@kitn.ai/ui/dist/ui/dropdown.d.ts

Framework-agnostic, Shadow-DOM web components for building AI chat interfaces — works in React, Vue, Angular, Svelte, or plain HTML. Authored in SolidJS.

import { JSX, Accessor } from 'solid-js';
import { AsTag } from './overlay';
/** Imperative open controller, handed to a parent (e.g. the kai-menu facade) via
 *  `controllerRef` so it can drive/observe the Dropdown's open state. */
export interface DropdownController {
    open: Accessor<boolean>;
    setOpen: (v: boolean) => void;
}
export declare function Dropdown(props: {
    children: JSX.Element;
    /** Initial open state (uncontrolled seed). */
    defaultOpen?: boolean;
    /** When true, the trigger never opens the menu. */
    disabled?: boolean;
    /** Receive the open controller (open accessor + setOpen) once mounted. */
    controllerRef?: (api: DropdownController) => void;
}): JSX.Element;
export declare function DropdownTrigger(props: {
    as?: AsTag;
    children?: JSX.Element;
    class?: string;
    [k: string]: any;
}): JSX.Element;
export declare function DropdownContent(props: {
    children: JSX.Element;
    class?: string;
}): JSX.Element;
export declare function DropdownItem(props: {
    children: JSX.Element;
    class?: string;
    onSelect?: () => void;
    disabled?: boolean;
}): JSX.Element;
/**
 * A thin, non-interactive divider between groups of items.
 * a11y: `role="separator"` — exposed to AT as a group boundary; not in the
 * roving-focus tab order (the `[role="menuitem"]` query skips it).
 */
export declare function DropdownSeparator(props: {
    class?: string;
}): JSX.Element;
/**
 * A non-interactive section header.
 * a11y: a plain muted label — NOT a menuitem and NOT focusable, so roving focus
 * skips it; it labels the items that follow visually only (`select-none`).
 */
export declare function DropdownLabel(props: {
    children: JSX.Element;
    class?: string;
}): JSX.Element;
/**
 * A togglable menu item.
 * a11y: `role="menuitemcheckbox"` + `aria-checked`. Activating fires `onSelect`
 * but KEEPS THE MENU OPEN (the consumer flips `checked`). The Check sits at the
 * TRAILING edge (toggle-style) so the item's leading content — an icon when
 * present — aligns with the plain items above it instead of being pushed in by a
 * reserved leading check column.
 */
export declare function DropdownCheckboxItem(props: {
    children: JSX.Element;
    class?: string;
    checked?: boolean;
    onSelect?: () => void;
    disabled?: boolean;
}): JSX.Element;
/**
 * A single-select (radio) menu item.
 * a11y: `role="menuitemradio"` + `aria-checked`. Behaves like the checkbox item —
 * activating fires `onSelect` but KEEPS THE MENU OPEN (the consumer moves the
 * selection within the group). The Check sits at the TRAILING edge so leading
 * content aligns with plain items. Group membership is the consumer's concern;
 * this primitive just renders the selected state and reports the click.
 */
export declare function DropdownRadioItem(props: {
    children: JSX.Element;
    class?: string;
    checked?: boolean;
    onSelect?: () => void;
    disabled?: boolean;
}): JSX.Element;
/**
 * A nested menu group. Mirrors the `Dropdown` context shape with its own open
 * signal + trigger/content refs, plus a small close-delay so a pointer can cross
 * the gap from the trigger to the submenu without it snapping shut.
 *
 * The submenu is tied to its PARENT open state: when the parent menu closes
 * (Escape/outside-click/select), `useDismiss` on the parent unmounts the whole
 * content tree, which tears this provider down and drops the sub with it.
 */
export declare function DropdownSub(props: {
    children: JSX.Element;
}): JSX.Element;
/**
 * The item that opens a submenu.
 * a11y: `role="menuitem"` + `aria-haspopup="menu"` + `aria-expanded`, trailing
 * ChevronRight. Opens on pointerenter, click, ArrowRight, and Enter/Space;
 * keyboard-open also moves focus into the sub's first item. ArrowRight/Enter are
 * swallowed so the parent menu doesn't also act on them.
 */
export declare function DropdownSubTrigger(props: {
    children: JSX.Element;
    class?: string;
}): JSX.Element;
/**
 * The submenu surface — same portal/positioning/roving-focus core as
 * DropdownContent, anchored `right-start` off its trigger.
 * a11y: ArrowLeft and Escape close the sub and RETURN FOCUS to the trigger;
 * ArrowUp/Down/Home/End rove within; typeahead included (matches DropdownContent).
 * Keyboard-open focuses the first item.
 */
export declare function DropdownSubContent(props: {
    children: JSX.Element;
    class?: string;
}): JSX.Element;