Setup

Recommended Installation and Implementation

Install

$ npm i @aurodesignsystem/auro-formkit

Implementation

There are two key parts to every Auro component: the class and the custom element definition. The class defines the component's behavior, while the custom element registers it under a specific name so it can be used in HTML. You can do this by importing only the component class and using the `register(name)` method with a unique name:

// Import the class only
import { AuroMenu, AuroMenuOption } from '@aurodesignsystem/auro-formkit/auro-menu/class';

// Register with a custom name if desired
AuroMenu.register('[custom]-menu');
AuroMenuOption.register('[custom]-menu-option');

This will create a new custom element `` and `` that behaves exactly like `` and ``, allowing both to coexist on the same page without interfering with each other.

<custom-menu>
  <custom-menuoption value="stops">Stops</custom-menuoption>
  <custom-menuoption value="price">Price</custom-menuoption>
  <custom-menuoption value="duration">Duration</custom-menuoption>
  <custom-menuoption value="departure">Departure</custom-menuoption>
  <custom-menuoption value="arrival">Arrival</custom-menuoption>
</custom-menu>

Auto Installation and Implementation

Warning: Default registration can cause conflicts if another package registers the same tag name using a different version of the component, leading to unexpected behavior. Use custom registration to avoid this risk.

Install

$ npm i @aurodesignsystem/auro-formkit

Implementation

Import the component, then register the custom element:

import '@aurodesignsystem/auro-formkit/auro-menu';

Then use the element in your HTML:

<auro-menu>
  <auro-menuoption value="option1">Option 1</auro-menuoption>
  <auro-menuoption value="option2">Option 2</auro-menuoption>
  <auro-menuoption value="option3">Option 3</auro-menuoption>
</auro-menu>

CDN Installation

Warning: CDN registration can cause conflicts if another package registers the same tag name using a different version of the component, leading to unexpected behavior. Use custom registration to avoid this risk.

The menu component can be loaded via CDN without a build step:

<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/auro-menu/+esm" type="module"></script>

Then use the element in your HTML:

<auro-menu>
  <auro-menuoption value="option1">Option 1</auro-menuoption>
  <auro-menuoption value="option2">Option 2</auro-menuoption>
  <auro-menuoption value="option3">Option 3</auro-menuoption>
</auro-menu>

Frameworks

React

React 19 includes native support for custom elements, so <auro-menu> works directly in JSX without any wrapper library. Import the Component Import and register the components at the top level of your application (e.g. in your root `main.tsx` or `App.tsx`):

import { AuroMenu, AuroMenuOption } from '@aurodesignsystem/auro-formkit/auro-menu/class';

AuroMenu.register('[custom]-menu');
AuroMenuOption.register('[custom]-menuoption');

TypeScript Declarations The component ships with TypeScript type definitions for the `AuroMenu` class. However, React's JSX does not automatically map custom element tag names to their types. To get type checking for `` in JSX, add the following declaration to a `.d.ts` file in your project:

import type { AuroMenu, AuroMenuOption } from '@aurodesignsystem/auro-formkit/auro-menu/class';

declare global {
  namespace JSX {
    interface IntrinsicElements {
      '[custom]-menu': React.HTMLAttributes<AuroMenu> & Partial<AuroMenu>;
      '[custom]-menuoption': React.HTMLAttributes<AuroMenuOption> & Partial<AuroMenuOption>;
    }
  }
}

Event Handling Auro components emit native `CustomEvent`s. Use a `ref` to attach event listeners in a `useEffect`:

import { useRef, useEffect } from 'react';

function MyMenu() {
  const menuRef = useRef<HTMLElement>(null);

  useEffect(() => {
    const el = menuRef.current;
    if (!el) return;

    const handleSelect = () => {
      console.log('Selected value:', (el as any).value);
    };

    el.addEventListener('selectedOption', handleSelect);
    return () => el.removeEventListener('selectedOption', handleSelect);
  }, []);

  return (
    <custom-menu ref={menuRef}>
      <custom-menuoption value="option1">Option 1</custom-menuoption>
      <custom-menuoption value="option2">Option 2</custom-menuoption>
      <custom-menuoption value="option3">Option 3</custom-menuoption>
    </custom-menu>
  );
}

Module Resolution Ensure your `tsconfig.json` uses `"moduleResolution": "bundler"` so TypeScript can resolve the component's package exports:

{
  "compilerOptions": {
    "moduleResolution": "bundler"
  }
}

Svelte

Svelte has native support for custom elements, so <auro-menu> works directly in Svelte templates without any wrapper or configuration. Import the Component Import and register the components in the `