@a4ui/core 0.37.1 → 0.38.0

package/dist/ui/Field.d.ts

@@ -0,0 +1,148 @@
+import { JSX, ParentProps } from 'solid-js';
+/** Layout direction of a {@link Field}. */
+export type FieldOrientation = 'vertical' | 'horizontal' | 'responsive';
+export interface FieldSetProps extends ParentProps, JSX.FieldsetHTMLAttributes<HTMLFieldSetElement> {
+    class?: string;
+}
+/**
+ * Semantic `<fieldset>` that groups related fields. Pair with {@link FieldLegend}.
+ *
+ * @example
+ * ```tsx
+ * <FieldSet>
+ *   <FieldLegend>Profile</FieldLegend>
+ *   <FieldGroup>...</FieldGroup>
+ * </FieldSet>
+ * ```
+ */
+export declare function FieldSet(props: FieldSetProps): JSX.Element;
+export interface FieldLegendProps extends ParentProps, JSX.HTMLAttributes<HTMLLegendElement> {
+    /** `legend` is a section heading; `label` is the smaller label size. Defaults to `legend`. */
+    variant?: 'legend' | 'label';
+    class?: string;
+}
+/**
+ * Caption of a {@link FieldSet}.
+ *
+ * @example
+ * ```tsx
+ * <FieldLegend variant="label">Notifications</FieldLegend>
+ * ```
+ */
+export declare function FieldLegend(props: FieldLegendProps): JSX.Element;
+export interface FieldGroupProps extends ParentProps, JSX.HTMLAttributes<HTMLDivElement> {
+    class?: string;
+}
+/**
+ * Vertical stack of {@link Field}s with consistent spacing.
+ *
+ * @example
+ * ```tsx
+ * <FieldGroup><Field>...</Field><Field>...</Field></FieldGroup>
+ * ```
+ */
+export declare function FieldGroup(props: FieldGroupProps): JSX.Element;
+export interface FieldProps extends ParentProps, JSX.HTMLAttributes<HTMLDivElement> {
+    /** `vertical` (default), `horizontal`, or `responsive` (stacked below `sm`, a row above). */
+    orientation?: FieldOrientation;
+    /** Marks the field invalid: sets `data-invalid` and `aria-invalid` on the control. */
+    invalid?: boolean;
+    class?: string;
+}
+/**
+ * One labelled form field. Provides the id context used by {@link FieldLabel},
+ * {@link FieldDescription} and {@link FieldError}, and wires the control inside
+ * it (`id`, `aria-describedby`, `aria-errormessage`, `aria-invalid`).
+ *
+ * @example
+ * ```tsx
+ * <Field invalid={!!error()}>
+ *   <FieldLabel>Email</FieldLabel>
+ *   <Input value={email()} onInput={setEmail} />
+ *   <FieldDescription>We never share it.</FieldDescription>
+ *   <FieldError>{error()}</FieldError>
+ * </Field>
+ * ```
+ */
+export declare function Field(props: FieldProps): JSX.Element;
+/**
+ * Wrapper for a title + description block next to a control, e.g. the text half
+ * of a horizontal switch row.
+ *
+ * @example
+ * ```tsx
+ * <FieldContent><FieldTitle>Alerts</FieldTitle><FieldDescription>Email me.</FieldDescription></FieldContent>
+ * ```
+ */
+export declare function FieldContent(props: ParentProps<{
+    class?: string;
+}>): JSX.Element;
+export interface FieldLabelProps extends ParentProps, JSX.LabelHTMLAttributes<HTMLLabelElement> {
+    class?: string;
+}
+/**
+ * `<label>` bound to the enclosing {@link Field}'s control through `for`.
+ *
+ * @example
+ * ```tsx
+ * <FieldLabel>Full name</FieldLabel>
+ * ```
+ */
+export declare function FieldLabel(props: FieldLabelProps): JSX.Element;
+/**
+ * Non-label title text for a field (use where a `<label>` would be wrong).
+ *
+ * @example
+ * ```tsx
+ * <FieldTitle>Two-factor authentication</FieldTitle>
+ * ```
+ */
+export declare function FieldTitle(props: ParentProps<{
+    class?: string;
+}>): JSX.Element;
+/**
+ * Helper text, linked to the control through `aria-describedby`.
+ *
+ * @example
+ * ```tsx
+ * <FieldDescription>Use 8 or more characters.</FieldDescription>
+ * ```
+ */
+export declare function FieldDescription(props: ParentProps<{
+    class?: string;
+    id?: string;
+}>): JSX.Element;
+export interface FieldSeparatorProps {
+    /** Optional text shown in the middle of the rule. */
+    children?: JSX.Element;
+    class?: string;
+}
+/**
+ * Horizontal rule between fields, optionally with text in the middle.
+ *
+ * @example
+ * ```tsx
+ * <FieldSeparator>or continue with</FieldSeparator>
+ * ```
+ */
+export declare function FieldSeparator(props: FieldSeparatorProps): JSX.Element;
+export interface FieldErrorProps {
+    /** Error messages; entries may be strings or `{ message }` objects (e.g. schema issues). */
+    errors?: Array<string | {
+        message?: string;
+    } | undefined>;
+    /** Custom content, used when `errors` is not given. */
+    children?: JSX.Element;
+    class?: string;
+}
+/**
+ * Validation message(s) for a field. Renders nothing when empty, a single line
+ * for one message and a list for several. `role="alert"` is set only while
+ * something is shown, so assistive tech announces it when it appears.
+ *
+ * @example
+ * ```tsx
+ * <FieldError errors={['Too short', 'Needs a number']} />
+ * ```
+ */
+export declare function FieldError(props: FieldErrorProps): JSX.Element;

package/dist/ui/Hero.d.ts

@@ -0,0 +1,48 @@
+import { JSX } from 'solid-js';
+import { SectionLink } from './internal/sectionKit';
+/** Arrangement of a {@link Hero}: text centered, or text beside the image. */
+export type HeroLayout = 'center' | 'split';
+/** Backdrop of a {@link Hero}. `'image'` uses `image` as a full-bleed photo. */
+export type HeroBackground = 'none' | 'aurora' | 'image';
+export interface HeroProps {
+    /** Small label above the title, e.g. a category or announcement. */
+    eyebrow?: string;
+    /** Main headline, rendered as the page `<h1>`. */
+    title: string;
+    /** Supporting paragraph under the title. */
+    subtitle?: string;
+    /** Main call-to-action (filled button). */
+    primary?: SectionLink;
+    /** Secondary call-to-action (outline button). */
+    secondary?: SectionLink;
+    /** Image URL. Shown beside the text in `split` layout, under it in `center`, or behind it with `background="image"`. */
+    image?: string;
+    /** Alt text of `image`. Defaults to empty (decorative). */
+    imageAlt?: string;
+    /** Defaults to `'center'`. */
+    layout?: HeroLayout;
+    /** Defaults to `'aurora'`. */
+    background?: HeroBackground;
+    /** Anchor id for in-page navigation. */
+    id?: string;
+    class?: string;
+}
+/**
+ * Opening section of a landing page: eyebrow, headline, subtitle and up to two
+ * call-to-action links, with an optional image. `layout="split"` puts the image
+ * beside the text on wide screens (stacked on phones); `background` picks a
+ * theme-tinted aurora glow, a full-bleed photo with a legibility scrim, or
+ * nothing.
+ *
+ * @example
+ * ```tsx
+ * <Hero
+ *   eyebrow="New"
+ *   title="Ship your site this week"
+ *   subtitle="Everything you need to launch, nothing you don't."
+ *   primary={{ label: 'Get started', href: '/signup' }}
+ *   secondary={{ label: 'See pricing', href: '#pricing' }}
+ * />
+ * ```
+ */
+export declare function Hero(props: HeroProps): JSX.Element;

package/dist/ui/InputGroup.d.ts

@@ -0,0 +1,93 @@
+import { JSX, ParentProps } from 'solid-js';
+export interface InputGroupProps extends ParentProps, JSX.HTMLAttributes<HTMLDivElement> {
+    class?: string;
+}
+/**
+ * Wrapper that owns a single border and focus ring for an input and its addons.
+ * Addons are placed by their `align` prop, whatever their order in the DOM.
+ *
+ * @example
+ * ```tsx
+ * <InputGroup>
+ *   <InputGroupAddon><Search class="h-4 w-4" /></InputGroupAddon>
+ *   <InputGroupInput value={q()} onInput={setQ} placeholder="Search" />
+ * </InputGroup>
+ * ```
+ */
+export declare function InputGroup(props: InputGroupProps): JSX.Element;
+export type InputGroupAddonAlign = 'inline-start' | 'inline-end' | 'block-start' | 'block-end';
+export interface InputGroupAddonProps extends ParentProps, JSX.HTMLAttributes<HTMLDivElement> {
+    /** Where the addon sits. Defaults to `inline-start`. */
+    align?: InputGroupAddonAlign;
+    class?: string;
+}
+/**
+ * Adornment around the control. Clicking anywhere on it (except on a button)
+ * focuses the group's input or textarea.
+ *
+ * @example
+ * ```tsx
+ * <InputGroupAddon align="inline-end"><Kbd>/</Kbd></InputGroupAddon>
+ * ```
+ */
+export declare function InputGroupAddon(props: InputGroupAddonProps): JSX.Element;
+/**
+ * Plain text inside an addon (a prefix like `https://` or a unit).
+ *
+ * @example
+ * ```tsx
+ * <InputGroupAddon><InputGroupText>https://</InputGroupText></InputGroupAddon>
+ * ```
+ */
+export declare function InputGroupText(props: ParentProps<{
+    class?: string;
+}>): JSX.Element;
+/** Compact sizes for {@link InputGroupButton}. */
+export type InputGroupButtonSize = 'xs' | 'sm' | 'icon-xs' | 'icon-sm';
+export interface InputGroupButtonProps extends ParentProps, Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
+    /** Compact size. Defaults to `xs`. */
+    size?: InputGroupButtonSize;
+    /** Button variant; ghost by default so it blends into the group. */
+    variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
+    type?: 'button' | 'submit' | 'reset';
+    class?: string;
+}
+/**
+ * Compact {@link Button} for use inside an addon. Ghost by default.
+ *
+ * @example
+ * ```tsx
+ * <InputGroupButton size="icon-xs" aria-label="Show password"><Eye /></InputGroupButton>
+ * ```
+ */
+export declare function InputGroupButton(props: InputGroupButtonProps): JSX.Element;
+export interface InputGroupInputProps extends Omit<JSX.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onInput'> {
+    value: string;
+    /** Called with the raw string value on every input event. */
+    onInput: (value: string) => void;
+    class?: string;
+}
+/**
+ * Borderless `<input>` for an {@link InputGroup} (same value/onInput API as `Input`).
+ *
+ * @example
+ * ```tsx
+ * <InputGroupInput value={url()} onInput={setUrl} placeholder="example.com" />
+ * ```
+ */
+export declare function InputGroupInput(props: InputGroupInputProps): JSX.Element;
+export interface InputGroupTextareaProps extends Omit<JSX.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'onInput'> {
+    value: string;
+    /** Called with the new string value on every input event. */
+    onInput: (value: string) => void;
+    class?: string;
+}
+/**
+ * Borderless `<textarea>` for an {@link InputGroup}.
+ *
+ * @example
+ * ```tsx
+ * <InputGroupTextarea value={msg()} onInput={setMsg} rows={3} />
+ * ```
+ */
+export declare function InputGroupTextarea(props: InputGroupTextareaProps): JSX.Element;

package/dist/ui/Item.d.ts

@@ -0,0 +1,63 @@
+import { JSX, ParentProps } from 'solid-js';
+export type ItemVariant = 'default' | 'outline' | 'muted';
+export type ItemSize = 'default' | 'sm' | 'xs';
+interface ItemProps extends ParentProps {
+    /** @default 'default' (transparent) */
+    variant?: ItemVariant;
+    /** Padding + gap density. @default 'default' */
+    size?: ItemSize;
+    /**
+     * Render the row as a link. The whole row becomes the hit target and gets a
+     * hover/focus state.
+     */
+    href?: string;
+    /** Render the row as a `<button>` with this click handler (when no `href`). */
+    onClick?: JSX.EventHandlerUnion<HTMLElement, MouseEvent>;
+    /** Element to render when neither `href` nor `onClick` is set. @default 'div' */
+    as?: 'div' | 'li' | 'article' | 'section';
+    class?: string;
+}
+export type { ItemProps };
+/**
+ * A row of content: optional `ItemMedia`, an `ItemContent` column with
+ * `ItemTitle`/`ItemDescription`, and trailing `ItemActions`. `ItemHeader` and
+ * `ItemFooter` span the full width above/below. Group rows with `ItemGroup`.
+ *
+ * @example
+ * ```tsx
+ * <Item variant="outline">
+ *   <ItemMedia variant="icon"><Bell /></ItemMedia>
+ *   <ItemContent>
+ *     <ItemTitle>Weekly digest</ItemTitle>
+ *     <ItemDescription>Every Monday at 9:00</ItemDescription>
+ *   </ItemContent>
+ *   <ItemActions><Switch checked /></ItemActions>
+ * </Item>
+ * ```
+ */
+export declare function Item(props: ItemProps): JSX.Element;
+interface SlotProps extends ParentProps {
+    class?: string;
+}
+/** Vertical stack of `Item`s. */
+export declare function ItemGroup(props: SlotProps): JSX.Element;
+/** Thin divider between `Item`s inside an `ItemGroup`. */
+export declare function ItemSeparator(props: {
+    class?: string;
+}): JSX.Element;
+export type ItemMediaVariant = 'default' | 'icon' | 'image';
+/** Leading visual: an icon tile, an image thumbnail, or anything (`default`). */
+export declare function ItemMedia(props: SlotProps & {
+    variant?: ItemMediaVariant;
+}): JSX.Element;
+/** The flexible text column (title + description). */
+export declare function ItemContent(props: SlotProps): JSX.Element;
+export declare function ItemTitle(props: SlotProps): JSX.Element;
+/** Muted secondary text, clamped to two lines. */
+export declare function ItemDescription(props: SlotProps): JSX.Element;
+/** Trailing controls (buttons, a switch, a badge). */
+export declare function ItemActions(props: SlotProps): JSX.Element;
+/** Full-width row above the media/content line. */
+export declare function ItemHeader(props: SlotProps): JSX.Element;
+/** Full-width row below the media/content line. */
+export declare function ItemFooter(props: SlotProps): JSX.Element;

package/dist/ui/Label.d.ts

@@ -0,0 +1,23 @@
+import { JSX, ParentProps } from 'solid-js';
+interface LabelProps extends ParentProps, Omit<JSX.LabelHTMLAttributes<HTMLLabelElement>, 'for'> {
+    /** Id of the control this label names. */
+    for?: string;
+    /** Appends an `*` marker (hidden from assistive tech; set `required` on the control too). */
+    required?: boolean;
+    /** Dims the label. It also dims when it follows a disabled `.peer` control. */
+    disabled?: boolean;
+    class?: string;
+}
+export type { LabelProps };
+/**
+ * Styled `<label>`. Clicking it focuses/activates the control matching `for`.
+ * Dims when `disabled`, inside a `.group` with `data-disabled`, or after a
+ * disabled `.peer` control.
+ *
+ * @example
+ * ```tsx
+ * <Label for="email" required>Email</Label>
+ * <Input id="email" value={email()} onInput={setEmail} required />
+ * ```
+ */
+export declare function Label(props: LabelProps): JSX.Element;

package/dist/ui/Menubar.d.ts

@@ -0,0 +1,83 @@
+import { JSX, ParentProps } from 'solid-js';
+interface ClassProps extends ParentProps {
+    class?: string;
+}
+/** Props of {@link Menubar}. */
+export interface MenubarProps extends ClassProps {
+    /** Accessible name of the menubar. @default 'Application menu' */
+    label?: string;
+}
+/**
+ * Horizontal bar of top-level menus. Arrow Left/Right moves between the
+ * triggers; once one menu is open, hovering another trigger switches to it.
+ *
+ * @example
+ * ```tsx
+ * <Menubar>
+ *   <MenubarMenu label="File">
+ *     <MenubarItem shortcut={['⌘', 'N']}>New project</MenubarItem>
+ *     <MenubarSeparator />
+ *     <MenubarItem>Quit</MenubarItem>
+ *   </MenubarMenu>
+ * </Menubar>
+ * ```
+ */
+export declare function Menubar(props: MenubarProps): JSX.Element;
+/** Props of {@link MenubarMenu}. */
+export interface MenubarMenuProps extends ClassProps {
+    /** Text of the top-level trigger. */
+    label: string;
+    /** Extra classes for the popover content. */
+    contentClass?: string;
+}
+/** One top-level menu: a trigger button plus its popover of items. */
+export declare function MenubarMenu(props: MenubarMenuProps): JSX.Element;
+/** Props of {@link MenubarItem}. */
+export interface MenubarItemProps extends ClassProps {
+    disabled?: boolean;
+    /** Called when the item is chosen (click, Enter or Space). */
+    onSelect?: () => void;
+    /** Keys shown right-aligned as keycaps, e.g. `['⌘', 'N']`. */
+    shortcut?: string[];
+    /** Styles the item as destructive (e.g. "Delete"). */
+    destructive?: boolean;
+}
+/** A plain action row, with an optional keyboard-shortcut hint. */
+export declare function MenubarItem(props: MenubarItemProps): JSX.Element;
+/** Props of {@link MenubarCheckboxItem}. */
+export interface MenubarCheckboxItemProps extends ClassProps {
+    checked?: boolean;
+    onChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    shortcut?: string[];
+}
+/** A toggle row exposing `role="menuitemcheckbox"` / `aria-checked`. */
+export declare function MenubarCheckboxItem(props: MenubarCheckboxItemProps): JSX.Element;
+/** Props of {@link MenubarRadioGroup}. */
+export interface MenubarRadioGroupProps extends ParentProps {
+    value?: string;
+    onChange?: (value: string) => void;
+}
+/** Groups {@link MenubarRadioItem}s so exactly one is selected. */
+export declare function MenubarRadioGroup(props: MenubarRadioGroupProps): JSX.Element;
+/** Props of {@link MenubarRadioItem}. */
+export interface MenubarRadioItemProps extends ClassProps {
+    value: string;
+    disabled?: boolean;
+}
+/** A single-choice row inside a {@link MenubarRadioGroup} (`role="menuitemradio"`). */
+export declare function MenubarRadioItem(props: MenubarRadioItemProps): JSX.Element;
+/** Props of {@link MenubarSub}. */
+export interface MenubarSubProps extends ClassProps {
+    /** Text of the submenu trigger row. */
+    label: string;
+}
+/** A nested submenu: opens with ArrowRight / hover, closes with ArrowLeft. */
+export declare function MenubarSub(props: MenubarSubProps): JSX.Element;
+/** Thin divider between groups of items. */
+export declare function MenubarSeparator(props: {
+    class?: string;
+}): JSX.Element;
+/** Non-interactive section heading inside a menu. */
+export declare function MenubarLabel(props: ClassProps): JSX.Element;
+export {};

package/dist/ui/Message.d.ts

@@ -1,6 +1,10 @@
 import { JSX } from 'solid-js';
 /** Who sent a {@link Message}; drives its subtle visual treatment. */
 export type ChatRole = 'user' | 'assistant' | 'system';
+/** Bubble style of a {@link Message}. */
+export type MessageVariant = 'default' | 'secondary' | 'muted' | 'tinted' | 'outline' | 'ghost' | 'destructive';
+/** Which side of the thread a message sits on. */
+export type MessageAlign = 'start' | 'end';
 export interface MessageProps {
     role: ChatRole;
     children: JSX.Element;
@@ -10,19 +14,61 @@ export interface MessageProps {
     avatar?: JSX.Element;
     /** Preformatted timestamp string, e.g. `'2:45 PM'`. */
     timestamp?: string;
+    /** Stable id, rendered as `data-message-id` so `ChatThread.scrollToMessage` can find it. */
+    id?: string;
+    /**
+     * Bubble style. When omitted the legacy role-based treatment applies
+     * (`assistant` faint panel, `user` faint tint).
+     */
+    variant?: MessageVariant;
+    /** Push the message to one side and shrink it to its content (max 85% wide). */
+    align?: MessageAlign;
+    /** Slot under the content, e.g. a row of reaction chips. */
+    reactions?: JSX.Element;
+    /** Slot under the content for `Attachment`s (wrap several in `AttachmentGroup`). */
+    attachments?: JSX.Element;
     class?: string;
 }
 /**
- * Full-width chat message row with no bubble: an optional avatar/author
- * header line followed by a prose content block. Role is differentiated with
- * subtle, token-based treatment only — `assistant` gets a faint muted panel,
- * `user` stays plain, `system` is a small centered note.
+ * One chat message: an optional avatar/author header followed by a prose
+ * content block, with optional `reactions` and `attachments` slots. Role is
+ * differentiated with subtle, token-based treatment — or choose a bubble
+ * `variant` and an `align` side. Inside a {@link MessageGroup} the header is
+ * suppressed (the group shows the sender once).
  *
  * @example
  * ```tsx
- * <Message role="assistant" author="Nova" timestamp="2:45 PM">
+ * <Message role="assistant" author="Nova" timestamp="2:45 PM" variant="secondary" align="start">
  *   <p>Here's the summary you asked for.</p>
  * </Message>
  * ```
  */
 export declare function Message(props: MessageProps): JSX.Element;
+export interface MessageGroupProps {
+    /** Sender name, shown once above the group. */
+    author?: string;
+    /** Sender avatar, shown once next to the name. */
+    avatar?: JSX.Element;
+    /** Timestamp of the first message, shown once. */
+    timestamp?: string;
+    /** Side for every message in the group (a message can still override it). */
+    align?: MessageAlign;
+    /** Bubble style for every message in the group (a message can still override it). */
+    variant?: MessageVariant;
+    /** The consecutive `Message`s from this sender. */
+    children: JSX.Element;
+    class?: string;
+}
+/**
+ * Visually groups consecutive messages from one sender: avatar, name and time
+ * appear once, and the bubbles sit closer together than separate messages.
+ *
+ * @example
+ * ```tsx
+ * <MessageGroup author="Nova" avatar={<Avatar name="Nova" size="sm" />} variant="secondary" align="start">
+ *   <Message role="assistant">First thought.</Message>
+ *   <Message role="assistant">And a follow-up.</Message>
+ * </MessageGroup>
+ * ```
+ */
+export declare function MessageGroup(props: MessageGroupProps): JSX.Element;

package/dist/ui/Modal.d.ts

@@ -1,5 +1,5 @@
 import { JSX, ParentProps } from 'solid-js';
-interface ModalProps extends ParentProps {
+export interface ModalProps extends ParentProps {
     open: boolean;
     onOpenChange: (open: boolean) => void;
     /** Header title; omitting it hides the whole header bar. */
@@ -11,6 +11,13 @@ interface ModalProps extends ParentProps {
      * @default 'drawer'
      */
     variant?: 'drawer' | 'center';
+    /**
+     * Width of the dialog: `'sm'` 24rem, `'md'` 32rem, `'lg'` 42rem, `'xl'` 56rem,
+     * `'full'` the whole viewport minus margin. Omitted keeps the historical width
+     * (`variant="center"`: 32rem, `variant="drawer"`: 520px). Content taller than
+     * the viewport scrolls inside the dialog; the header stays pinned.
+     */
+    size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
     class?: string;
     /** Accessible label for the close button. @default 'Close' */
     closeLabel?: string;
@@ -29,4 +36,3 @@ interface ModalProps extends ParentProps {
  * ```
  */
 export declare function Modal(props: ModalProps): JSX.Element;
-export {};

package/dist/ui/NativeSelect.d.ts

@@ -0,0 +1,26 @@
+import { JSX } from 'solid-js';
+export type NativeSelectSize = 'sm' | 'default';
+interface NativeSelectProps extends Omit<JSX.SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
+    /** @default 'default' */
+    size?: NativeSelectSize;
+    /** Marks the field invalid (destructive border + `aria-invalid`). */
+    invalid?: boolean;
+    /** Class for the `<select>`; use `wrapperClass` for the outer box. */
+    class?: string;
+    wrapperClass?: string;
+}
+export type { NativeSelectProps };
+/**
+ * Styled native `<select>` — gets the OS picker on mobile. Takes `<option>` and
+ * `<optgroup>` children; `value`, `onChange` and every other select attribute
+ * pass straight through.
+ *
+ * @example
+ * ```tsx
+ * <NativeSelect value={plan()} onChange={(e) => setPlan(e.currentTarget.value)} aria-label="Plan">
+ *   <option value="free">Free</option>
+ *   <option value="pro">Pro</option>
+ * </NativeSelect>
+ * ```
+ */
+export declare function NativeSelect(props: NativeSelectProps): JSX.Element;

package/dist/ui/NavigationMenu.d.ts

@@ -0,0 +1,85 @@
+import { JSX, ParentProps } from 'solid-js';
+/** One section of the collapsed (mobile) navigation. */
+export interface NavigationMenuMobileSection {
+    /** Section title shown on the accordion trigger (or the link label). */
+    label: string;
+    /** Destination when the section is a plain link with no children. */
+    href?: string;
+    /** Child links; when present the section becomes an accordion entry. */
+    links?: {
+        title: string;
+        href: string;
+        description?: string;
+    }[];
+}
+/** Props of {@link NavigationMenu}. */
+export interface NavigationMenuProps extends ParentProps {
+    /** Accessible name of the navigation landmark. @default 'Main' */
+    label?: string;
+    /**
+     * The same sections as `children`, as data. Used below the `md` breakpoint,
+     * where the menu collapses into a hamburger + drawer. Required: the mobile
+     * layout cannot be derived from the desktop JSX.
+     */
+    mobileSections: NavigationMenuMobileSection[];
+    /** Drawer title. @default 'Menu' */
+    mobileTitle?: string;
+    /** Accessible label of the hamburger button. @default 'Open navigation' */
+    mobileButtonLabel?: string;
+    class?: string;
+}
+/**
+ * Site navigation bar whose triggers open rich panels (links with icon, title
+ * and description, featured cards) inside a shared, size-animating viewport.
+ * Hover or click opens a panel, Escape closes it, and the links inside are
+ * reachable with Tab. The root is the `<ul>` list of items.
+ *
+ * @example
+ * ```tsx
+ * <NavigationMenu mobileSections={[{ label: 'Docs', href: '/docs' }]}>
+ *   <NavigationMenuItem>
+ *     <NavigationMenuTrigger>Product</NavigationMenuTrigger>
+ *     <NavigationMenuContent>
+ *       <NavigationMenuPanelLink href="/tour" title="Tour" description="A quick walkthrough" />
+ *     </NavigationMenuContent>
+ *   </NavigationMenuItem>
+ *   <NavigationMenuLink href="/docs">Docs</NavigationMenuLink>
+ * </NavigationMenu>
+ * ```
+ */
+export declare function NavigationMenu(props: NavigationMenuProps): JSX.Element;
+/** One top-level entry: pairs a trigger with its panel. */
+export declare function NavigationMenuItem(props: ParentProps): JSX.Element;
+/** Button that opens the sibling {@link NavigationMenuContent}; shows a chevron. */
+export declare function NavigationMenuTrigger(props: ParentProps & {
+    class?: string;
+}): JSX.Element;
+/** Props of {@link NavigationMenuContent}. */
+export interface NavigationMenuContentProps extends ParentProps {
+    class?: string;
+}
+/**
+ * The panel of one item. Rendered inside the shared viewport, which resizes to
+ * fit it. Put {@link NavigationMenuPanelLink}s in it, laid out with a grid.
+ */
+export declare function NavigationMenuContent(props: NavigationMenuContentProps): JSX.Element;
+/** Props of {@link NavigationMenuLink}. */
+export interface NavigationMenuLinkProps extends ParentProps {
+    href: string;
+    class?: string;
+}
+/** A top-level link with no panel; takes part in the trigger roving focus. */
+export declare function NavigationMenuLink(props: NavigationMenuLinkProps): JSX.Element;
+/** Props of {@link NavigationMenuPanelLink}. */
+export interface NavigationMenuPanelLinkProps {
+    href: string;
+    title: string;
+    description?: string;
+    /** Leading icon element (e.g. a lucide icon). */
+    icon?: JSX.Element;
+    /** Renders as a large highlighted card, typically spanning several grid rows. */
+    featured?: boolean;
+    class?: string;
+}
+/** A link inside a panel: icon + title + description, or a featured card. */
+export declare function NavigationMenuPanelLink(props: NavigationMenuPanelLinkProps): JSX.Element;