@rovula/ui 0.1.41 → 0.1.43

package/dist/esm/types/components/AutoComplete/AutoComplete.d.ts

@@ -0,0 +1,76 @@
+import React, { ReactNode } from "react";
+import { type InputProps } from "../TextInput/TextInput";
+export type AutoCompleteOption = {
+    value: string;
+    label: string;
+};
+/**
+ * InputProps that AutoComplete manages internally.
+ * These are excluded from the public API so callers cannot accidentally
+ * override internal event wiring or ARIA attributes.
+ */
+type OmittedInputProps = "value" | "onChange" | "onKeyDown" | "onSelect" | "role" | "aria-expanded" | "aria-haspopup" | "aria-autocomplete" | "aria-activedescendant" | "aria-controls" | "autoComplete" | "hasClearIcon";
+export type AutoCompleteProps<T extends AutoCompleteOption = AutoCompleteOption> = {
+    /** Options provided by caller (already filtered/fetched externally) */
+    options: T[];
+    /** Controlled value — the current input text */
+    value?: string;
+    /**
+     * Called on every change: typing or clearing.
+     * Parent should update `value` from this.
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Called only when user explicitly selects an option from the list.
+     * Receives the full option object (including any domain-specific fields).
+     */
+    onSelect?: (option: T) => void;
+    onBlur?: () => void;
+    /** Called with the current query when the user types */
+    onSearch?: (query: string) => void;
+    /** Show a loading spinner inside the dropdown */
+    loading?: boolean;
+    /** Text shown when options is empty and not loading */
+    noOptionsText?: string;
+    /**
+     * When true, show the noOptionsText message when options is empty.
+     * Defaults to false (popover stays closed when no options).
+     */
+    showNoOptions?: boolean;
+    /**
+     * Custom render for each option item.
+     * Receives the option and whether it is currently selected.
+     * The wrapper button (styles + click handler) is provided by AutoComplete.
+     */
+    renderOption?: (option: T, isSelected: boolean) => ReactNode;
+    /**
+     * Override client-side filtering.
+     * Pass `(x) => x` to disable filtering entirely (when results come from an API).
+     * Defaults to identity (no filtering).
+     */
+    filterOptions?: (options: T[]) => T[];
+    /**
+     * Render the options list via a React portal so it escapes containers
+     * with `overflow: hidden/auto`.
+     * Set to false when inside a Dialog — portal content is blocked by
+     * Radix Dialog's focus trap and aria-modal, making items unclickable.
+     * Defaults to true.
+     */
+    portal?: boolean;
+    /** Extra className applied to the options list container */
+    listboxClassName?: string;
+    /** Extra inline styles applied to the options list container */
+    listboxStyle?: React.CSSProperties;
+    /** Extra inline styles applied to the Popover content wrapper (portal mode only) */
+    popoverStyle?: React.CSSProperties;
+    /** Extra className applied to each option item */
+    optionClassName?: string;
+    /** Extra inline styles applied to each option item */
+    optionStyle?: React.CSSProperties;
+    "data-testid"?: string;
+} & Omit<InputProps, OmittedInputProps>;
+declare function AutoCompleteInner<T extends AutoCompleteOption = AutoCompleteOption>({ options, value, onChange, onSelect, onBlur, onSearch, loading, noOptionsText, showNoOptions, renderOption, filterOptions, portal, listboxClassName, listboxStyle, popoverStyle, optionClassName, optionStyle, "data-testid": testId, id, label, fullwidth, size, rounded, variant, disabled, ...rest }: AutoCompleteProps<T>, ref: React.ForwardedRef<HTMLInputElement>): import("react/jsx-runtime").JSX.Element;
+declare const AutoComplete: <T extends AutoCompleteOption = AutoCompleteOption>(props: AutoCompleteProps<T> & {
+    ref?: React.ForwardedRef<HTMLInputElement>;
+}) => ReturnType<typeof AutoCompleteInner>;
+export default AutoComplete;

package/dist/esm/types/components/AutoComplete/AutoComplete.stories.d.ts

@@ -0,0 +1,362 @@
+import React from "react";
+import type { StoryObj } from "@storybook/react";
+import AutoComplete, { type AutoCompleteOption } from "./AutoComplete";
+declare const meta: {
+    title: string;
+    component: <T extends AutoCompleteOption = AutoCompleteOption>(props: import("./AutoComplete").AutoCompleteProps<T> & {
+        ref?: React.ForwardedRef<HTMLInputElement>;
+    }) => ReturnType<(<T_1 extends AutoCompleteOption = AutoCompleteOption>({ options, value, onChange, onSelect, onBlur, onSearch, loading, noOptionsText, showNoOptions, renderOption, filterOptions, portal, listboxClassName, listboxStyle, popoverStyle, optionClassName, optionStyle, "data-testid": testId, id, label, fullwidth, size, rounded, variant, disabled, ...rest }: import("./AutoComplete").AutoCompleteProps<T_1>, ref: React.ForwardedRef<HTMLInputElement>) => import("react/jsx-runtime").JSX.Element)>;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+    decorators: ((Story: import("@storybook/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
+        options: AutoCompleteOption[];
+        value?: string | undefined;
+        onChange?: ((value: string) => void) | undefined;
+        onSelect?: ((option: AutoCompleteOption) => void) | undefined;
+        onBlur?: ((() => void) & React.FocusEventHandler<HTMLInputElement>) | undefined;
+        onSearch?: ((query: string) => void) | undefined;
+        loading?: boolean | undefined;
+        noOptionsText?: string | undefined;
+        showNoOptions?: boolean | undefined;
+        renderOption?: ((option: AutoCompleteOption, isSelected: boolean) => React.ReactNode) | undefined;
+        filterOptions?: ((options: AutoCompleteOption[]) => AutoCompleteOption[]) | undefined;
+        portal?: boolean | undefined;
+        listboxClassName?: string | undefined;
+        listboxStyle?: React.CSSProperties | undefined;
+        popoverStyle?: React.CSSProperties | undefined;
+        optionClassName?: string | undefined;
+        optionStyle?: React.CSSProperties | undefined;
+        "data-testid"?: string | undefined;
+        variant?: "flat" | "outline" | "underline" | undefined;
+        suppressHydrationWarning?: boolean | undefined | undefined;
+        className?: string | undefined;
+        color?: string | undefined | undefined;
+        height?: number | string | undefined | undefined;
+        id?: string | undefined;
+        lang?: string | undefined | undefined;
+        max?: number | string | undefined | undefined;
+        min?: number | string | undefined | undefined;
+        name?: string | undefined | undefined;
+        style?: React.CSSProperties | undefined;
+        type?: React.HTMLInputTypeAttribute | undefined;
+        width?: number | string | undefined | undefined;
+        tabIndex?: number | undefined | undefined;
+        format?: ((value: string) => string) | undefined;
+        "aria-atomic"?: (boolean | "true" | "false") | undefined;
+        "aria-braillelabel"?: string | undefined | undefined;
+        "aria-brailleroledescription"?: string | undefined | undefined;
+        "aria-busy"?: (boolean | "true" | "false") | undefined;
+        "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
+        "aria-colcount"?: number | undefined | undefined;
+        "aria-colindex"?: number | undefined | undefined;
+        "aria-colindextext"?: string | undefined | undefined;
+        "aria-colspan"?: number | undefined | undefined;
+        "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
+        "aria-describedby"?: string | undefined | undefined;
+        "aria-description"?: string | undefined | undefined;
+        "aria-details"?: string | undefined | undefined;
+        "aria-disabled"?: (boolean | "true" | "false") | undefined;
+        "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
+        "aria-errormessage"?: string | undefined | undefined;
+        "aria-flowto"?: string | undefined | undefined;
+        "aria-grabbed"?: (boolean | "true" | "false") | undefined;
+        "aria-hidden"?: (boolean | "true" | "false") | undefined;
+        "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
+        "aria-keyshortcuts"?: string | undefined | undefined;
+        "aria-label"?: string | undefined | undefined;
+        "aria-labelledby"?: string | undefined | undefined;
+        "aria-level"?: number | undefined | undefined;
+        "aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
+        "aria-modal"?: (boolean | "true" | "false") | undefined;
+        "aria-multiline"?: (boolean | "true" | "false") | undefined;
+        "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
+        "aria-orientation"?: "horizontal" | "vertical" | undefined | undefined;
+        "aria-owns"?: string | undefined | undefined;
+        "aria-placeholder"?: string | undefined | undefined;
+        "aria-posinset"?: number | undefined | undefined;
+        "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
+        "aria-readonly"?: (boolean | "true" | "false") | undefined;
+        "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
+        "aria-required"?: (boolean | "true" | "false") | undefined;
+        "aria-roledescription"?: string | undefined | undefined;
+        "aria-rowcount"?: number | undefined | undefined;
+        "aria-rowindex"?: number | undefined | undefined;
+        "aria-rowindextext"?: string | undefined | undefined;
+        "aria-rowspan"?: number | undefined | undefined;
+        "aria-selected"?: (boolean | "true" | "false") | undefined;
+        "aria-setsize"?: number | undefined | undefined;
+        "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
+        "aria-valuemax"?: number | undefined | undefined;
+        "aria-valuemin"?: number | undefined | undefined;
+        "aria-valuenow"?: number | undefined | undefined;
+        "aria-valuetext"?: string | undefined | undefined;
+        children?: React.ReactNode;
+        dangerouslySetInnerHTML?: {
+            __html: string | TrustedHTML;
+        } | undefined | undefined;
+        onCopy?: React.ClipboardEventHandler<HTMLInputElement> | undefined;
+        onCopyCapture?: React.ClipboardEventHandler<HTMLInputElement> | undefined;
+        onCut?: React.ClipboardEventHandler<HTMLInputElement> | undefined;
+        onCutCapture?: React.ClipboardEventHandler<HTMLInputElement> | undefined;
+        onPaste?: React.ClipboardEventHandler<HTMLInputElement> | undefined;
+        onPasteCapture?: React.ClipboardEventHandler<HTMLInputElement> | undefined;
+        onCompositionEnd?: React.CompositionEventHandler<HTMLInputElement> | undefined;
+        onCompositionEndCapture?: React.CompositionEventHandler<HTMLInputElement> | undefined;
+        onCompositionStart?: React.CompositionEventHandler<HTMLInputElement> | undefined;
+        onCompositionStartCapture?: React.CompositionEventHandler<HTMLInputElement> | undefined;
+        onCompositionUpdate?: React.CompositionEventHandler<HTMLInputElement> | undefined;
+        onCompositionUpdateCapture?: React.CompositionEventHandler<HTMLInputElement> | undefined;
+        onFocus?: React.FocusEventHandler<HTMLInputElement> | undefined;
+        onFocusCapture?: React.FocusEventHandler<HTMLInputElement> | undefined;
+        onBlurCapture?: React.FocusEventHandler<HTMLInputElement> | undefined;
+        onChangeCapture?: React.FormEventHandler<HTMLInputElement> | undefined;
+        onBeforeInput?: React.FormEventHandler<HTMLInputElement> | undefined;
+        onBeforeInputCapture?: React.FormEventHandler<HTMLInputElement> | undefined;
+        onInput?: React.FormEventHandler<HTMLInputElement> | undefined;
+        onInputCapture?: React.FormEventHandler<HTMLInputElement> | undefined;
+        onReset?: React.FormEventHandler<HTMLInputElement> | undefined;
+        onResetCapture?: React.FormEventHandler<HTMLInputElement> | undefined;
+        onSubmit?: React.FormEventHandler<HTMLInputElement> | undefined;
+        onSubmitCapture?: React.FormEventHandler<HTMLInputElement> | undefined;
+        onInvalid?: React.FormEventHandler<HTMLInputElement> | undefined;
+        onInvalidCapture?: React.FormEventHandler<HTMLInputElement> | undefined;
+        onLoad?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onLoadCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onError?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onErrorCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onKeyDownCapture?: React.KeyboardEventHandler<HTMLInputElement> | undefined;
+        onKeyPress?: React.KeyboardEventHandler<HTMLInputElement> | undefined;
+        onKeyPressCapture?: React.KeyboardEventHandler<HTMLInputElement> | undefined;
+        onKeyUp?: React.KeyboardEventHandler<HTMLInputElement> | undefined;
+        onKeyUpCapture?: React.KeyboardEventHandler<HTMLInputElement> | undefined;
+        onAbort?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onAbortCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onCanPlay?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onCanPlayCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onCanPlayThrough?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onCanPlayThroughCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onDurationChange?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onDurationChangeCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onEmptied?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onEmptiedCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onEncrypted?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onEncryptedCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onEnded?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onEndedCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onLoadedData?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onLoadedDataCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onLoadedMetadata?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onLoadedMetadataCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onLoadStart?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onLoadStartCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onPause?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onPauseCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onPlay?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onPlayCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onPlaying?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onPlayingCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onProgress?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onProgressCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onRateChange?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onRateChangeCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onResize?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onResizeCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onSeeked?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onSeekedCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onSeeking?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onSeekingCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onStalled?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onStalledCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onSuspend?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onSuspendCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onTimeUpdate?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onTimeUpdateCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onVolumeChange?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onVolumeChangeCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onWaiting?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onWaitingCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onAuxClick?: React.MouseEventHandler<HTMLInputElement> | undefined;
+        onAuxClickCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
+        onClick?: React.MouseEventHandler<HTMLInputElement> | undefined;
+        onClickCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
+        onContextMenu?: React.MouseEventHandler<HTMLInputElement> | undefined;
+        onContextMenuCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
+        onDoubleClick?: React.MouseEventHandler<HTMLInputElement> | undefined;
+        onDoubleClickCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
+        onDrag?: React.DragEventHandler<HTMLInputElement> | undefined;
+        onDragCapture?: React.DragEventHandler<HTMLInputElement> | undefined;
+        onDragEnd?: React.DragEventHandler<HTMLInputElement> | undefined;
+        onDragEndCapture?: React.DragEventHandler<HTMLInputElement> | undefined;
+        onDragEnter?: React.DragEventHandler<HTMLInputElement> | undefined;
+        onDragEnterCapture?: React.DragEventHandler<HTMLInputElement> | undefined;
+        onDragExit?: React.DragEventHandler<HTMLInputElement> | undefined;
+        onDragExitCapture?: React.DragEventHandler<HTMLInputElement> | undefined;
+        onDragLeave?: React.DragEventHandler<HTMLInputElement> | undefined;
+        onDragLeaveCapture?: React.DragEventHandler<HTMLInputElement> | undefined;
+        onDragOver?: React.DragEventHandler<HTMLInputElement> | undefined;
+        onDragOverCapture?: React.DragEventHandler<HTMLInputElement> | undefined;
+        onDragStart?: React.DragEventHandler<HTMLInputElement> | undefined;
+        onDragStartCapture?: React.DragEventHandler<HTMLInputElement> | undefined;
+        onDrop?: React.DragEventHandler<HTMLInputElement> | undefined;
+        onDropCapture?: React.DragEventHandler<HTMLInputElement> | undefined;
+        onMouseDown?: React.MouseEventHandler<HTMLInputElement> | undefined;
+        onMouseDownCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
+        onMouseEnter?: React.MouseEventHandler<HTMLInputElement> | undefined;
+        onMouseLeave?: React.MouseEventHandler<HTMLInputElement> | undefined;
+        onMouseMove?: React.MouseEventHandler<HTMLInputElement> | undefined;
+        onMouseMoveCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
+        onMouseOut?: React.MouseEventHandler<HTMLInputElement> | undefined;
+        onMouseOutCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
+        onMouseOver?: React.MouseEventHandler<HTMLInputElement> | undefined;
+        onMouseOverCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
+        onMouseUp?: React.MouseEventHandler<HTMLInputElement> | undefined;
+        onMouseUpCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
+        onSelectCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onTouchCancel?: React.TouchEventHandler<HTMLInputElement> | undefined;
+        onTouchCancelCapture?: React.TouchEventHandler<HTMLInputElement> | undefined;
+        onTouchEnd?: React.TouchEventHandler<HTMLInputElement> | undefined;
+        onTouchEndCapture?: React.TouchEventHandler<HTMLInputElement> | undefined;
+        onTouchMove?: React.TouchEventHandler<HTMLInputElement> | undefined;
+        onTouchMoveCapture?: React.TouchEventHandler<HTMLInputElement> | undefined;
+        onTouchStart?: React.TouchEventHandler<HTMLInputElement> | undefined;
+        onTouchStartCapture?: React.TouchEventHandler<HTMLInputElement> | undefined;
+        onPointerDown?: React.PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerDownCapture?: React.PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerMove?: React.PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerMoveCapture?: React.PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerUp?: React.PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerUpCapture?: React.PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerCancel?: React.PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerCancelCapture?: React.PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerEnter?: React.PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerLeave?: React.PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerOver?: React.PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerOverCapture?: React.PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerOut?: React.PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerOutCapture?: React.PointerEventHandler<HTMLInputElement> | undefined;
+        onGotPointerCapture?: React.PointerEventHandler<HTMLInputElement> | undefined;
+        onGotPointerCaptureCapture?: React.PointerEventHandler<HTMLInputElement> | undefined;
+        onLostPointerCapture?: React.PointerEventHandler<HTMLInputElement> | undefined;
+        onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLInputElement> | undefined;
+        onScroll?: React.UIEventHandler<HTMLInputElement> | undefined;
+        onScrollCapture?: React.UIEventHandler<HTMLInputElement> | undefined;
+        onWheel?: React.WheelEventHandler<HTMLInputElement> | undefined;
+        onWheelCapture?: React.WheelEventHandler<HTMLInputElement> | undefined;
+        onAnimationStart?: React.AnimationEventHandler<HTMLInputElement> | undefined;
+        onAnimationStartCapture?: React.AnimationEventHandler<HTMLInputElement> | undefined;
+        onAnimationEnd?: React.AnimationEventHandler<HTMLInputElement> | undefined;
+        onAnimationEndCapture?: React.AnimationEventHandler<HTMLInputElement> | undefined;
+        onAnimationIteration?: React.AnimationEventHandler<HTMLInputElement> | undefined;
+        onAnimationIterationCapture?: React.AnimationEventHandler<HTMLInputElement> | undefined;
+        onTransitionEnd?: React.TransitionEventHandler<HTMLInputElement> | undefined;
+        onTransitionEndCapture?: React.TransitionEventHandler<HTMLInputElement> | undefined;
+        form?: string | undefined | undefined;
+        list?: string | undefined | undefined;
+        status?: "default" | "warning" | "error" | undefined;
+        step?: number | string | undefined | undefined;
+        normalize?: ((value: string) => string) | undefined;
+        warning?: boolean | undefined;
+        error?: boolean | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        disabled?: boolean | undefined;
+        fullwidth?: boolean | undefined;
+        title?: string | undefined | undefined;
+        startIcon?: React.ReactNode;
+        endIcon?: React.ReactNode;
+        formAction?: string | undefined;
+        formEncType?: string | undefined | undefined;
+        formMethod?: string | undefined | undefined;
+        formNoValidate?: boolean | undefined | undefined;
+        formTarget?: string | undefined | undefined;
+        defaultChecked?: boolean | undefined | undefined;
+        defaultValue?: string | number | readonly string[] | undefined;
+        suppressContentEditableWarning?: boolean | undefined | undefined;
+        accessKey?: string | undefined | undefined;
+        autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
+        autoFocus?: boolean | undefined | undefined;
+        contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
+        contextMenu?: string | undefined | undefined;
+        dir?: string | undefined | undefined;
+        draggable?: (boolean | "true" | "false") | undefined;
+        enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
+        hidden?: boolean | undefined | undefined;
+        nonce?: string | undefined | undefined;
+        slot?: string | undefined | undefined;
+        spellCheck?: (boolean | "true" | "false") | undefined;
+        translate?: "yes" | "no" | undefined | undefined;
+        radioGroup?: string | undefined | undefined;
+        about?: string | undefined | undefined;
+        content?: string | undefined | undefined;
+        datatype?: string | undefined | undefined;
+        inlist?: any;
+        prefix?: string | undefined | undefined;
+        property?: string | undefined | undefined;
+        rel?: string | undefined | undefined;
+        resource?: string | undefined | undefined;
+        rev?: string | undefined | undefined;
+        typeof?: string | undefined | undefined;
+        vocab?: string | undefined | undefined;
+        autoCorrect?: string | undefined | undefined;
+        autoSave?: string | undefined | undefined;
+        itemProp?: string | undefined | undefined;
+        itemScope?: boolean | undefined | undefined;
+        itemType?: string | undefined | undefined;
+        itemID?: string | undefined | undefined;
+        itemRef?: string | undefined | undefined;
+        results?: number | undefined | undefined;
+        security?: string | undefined | undefined;
+        unselectable?: "on" | "off" | undefined | undefined;
+        inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
+        is?: string | undefined | undefined;
+        rounded?: "none" | "normal" | "full" | undefined;
+        hasSearchIcon?: boolean | undefined;
+        isFloatingLabel?: boolean | undefined;
+        accept?: string | undefined | undefined;
+        alt?: string | undefined | undefined;
+        capture?: boolean | "user" | "environment" | undefined | undefined;
+        checked?: boolean | undefined | undefined;
+        maxLength?: number | undefined | undefined;
+        minLength?: number | undefined | undefined;
+        multiple?: boolean | undefined | undefined;
+        pattern?: string | undefined | undefined;
+        placeholder?: string | undefined | undefined;
+        readOnly?: boolean | undefined | undefined;
+        required?: boolean | undefined;
+        src?: string | undefined | undefined;
+        label?: string | undefined;
+        iconMode?: "flat" | "solid" | undefined;
+        helperText?: string | undefined;
+        errorMessage?: string | undefined;
+        warningMessage?: string | undefined;
+        keepCloseIconOnValue?: boolean | undefined;
+        keepFooterSpace?: boolean | undefined;
+        labelClassName?: string | undefined;
+        classes?: {
+            iconWrapper?: string;
+            iconSearchWrapper?: string;
+            icon?: string;
+            startIconWrapper?: string;
+            endIconWrapper?: string;
+        } | undefined;
+        onClickStartIcon?: (() => void) | undefined;
+        onClickEndIcon?: (() => void) | undefined;
+        renderStartIcon?: (() => React.ReactNode) | undefined;
+        renderEndIcon?: (() => React.ReactNode) | undefined;
+        trimOnCommit?: boolean | undefined;
+        normalizeOnCommit?: ((value: string) => string) | undefined;
+        ref?: React.ForwardedRef<HTMLInputElement> | undefined;
+    }>) => import("react/jsx-runtime").JSX.Element)[];
+};
+export default meta;
+export declare const Default: StoryObj<typeof AutoComplete>;
+export declare const ShowNoOptionsMessage: StoryObj;
+export declare const FreeSolo: StoryObj;
+export declare const Async: StoryObj;
+export declare const WithFormValidation: StoryObj;
+export declare const InsideDialog: StoryObj;
+export declare const Sizes: StoryObj;
+export declare const States: StoryObj;
+export declare const LoadingState: StoryObj;
+export declare const KeyboardNavigation: StoryObj;

package/dist/esm/types/components/AutoComplete/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./AutoComplete";
+export type { AutoCompleteProps, AutoCompleteOption } from "./AutoComplete";

package/dist/esm/types/index.d.ts

@@ -9,6 +9,9 @@ export { default as TextArea } from "./components/TextArea/TextArea";
 export { default as Text } from "./components/Text/Text";
 export { default as Tabs } from "./components/Tabs/Tabs";
 export { default as Dropdown } from "./components/Dropdown/Dropdown";
+export { menuItemBaseStyles } from "./components/Dropdown/Dropdown";
+export { default as AutoComplete } from "./components/AutoComplete/AutoComplete";
+export type { AutoCompleteProps, AutoCompleteOption } from "./components/AutoComplete/AutoComplete";
 export { Checkbox } from "./components/Checkbox/Checkbox";
 export { Label } from "./components/Label/Label";
 export { Input } from "./components/Input/Input";

package/dist/index.d.ts

@@ -1,10 +1,10 @@
 import * as React$1 from 'react';
 import React__default, { ReactElement, ReactNode, FC, ComponentPropsWithoutRef, CSSProperties, HTMLAttributes, FormHTMLAttributes, ComponentType } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as class_variance_authority_dist_types from 'class-variance-authority/dist/types';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import { VariantProps } from 'class-variance-authority';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import { DayPicker, Modifiers } from 'react-day-picker';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import { RowData, Row, ColumnDef, SortingState, PaginationState, RowSelectionState, Cell, ExpandedState, Header } from '@tanstack/react-table';
@@ -378,6 +378,7 @@ type TabsProps = {
 };
 declare const Tabs: React__default.FC<TabsProps>;
 
+declare const menuItemBaseStyles: string;
 type RenderLabelCallbackArg$1 = {
     value: string;
     label: string;
@@ -472,6 +473,80 @@ declare const Dropdown: React__default.ForwardRefExoticComponent<{
     portal?: boolean;
 } & Omit<InputProps, "onSelect" | "value"> & React__default.RefAttributes<HTMLInputElement>>;
 
+type AutoCompleteOption = {
+    value: string;
+    label: string;
+};
+/**
+ * InputProps that AutoComplete manages internally.
+ * These are excluded from the public API so callers cannot accidentally
+ * override internal event wiring or ARIA attributes.
+ */
+type OmittedInputProps = "value" | "onChange" | "onKeyDown" | "onSelect" | "role" | "aria-expanded" | "aria-haspopup" | "aria-autocomplete" | "aria-activedescendant" | "aria-controls" | "autoComplete" | "hasClearIcon";
+type AutoCompleteProps<T extends AutoCompleteOption = AutoCompleteOption> = {
+    /** Options provided by caller (already filtered/fetched externally) */
+    options: T[];
+    /** Controlled value — the current input text */
+    value?: string;
+    /**
+     * Called on every change: typing or clearing.
+     * Parent should update `value` from this.
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Called only when user explicitly selects an option from the list.
+     * Receives the full option object (including any domain-specific fields).
+     */
+    onSelect?: (option: T) => void;
+    onBlur?: () => void;
+    /** Called with the current query when the user types */
+    onSearch?: (query: string) => void;
+    /** Show a loading spinner inside the dropdown */
+    loading?: boolean;
+    /** Text shown when options is empty and not loading */
+    noOptionsText?: string;
+    /**
+     * When true, show the noOptionsText message when options is empty.
+     * Defaults to false (popover stays closed when no options).
+     */
+    showNoOptions?: boolean;
+    /**
+     * Custom render for each option item.
+     * Receives the option and whether it is currently selected.
+     * The wrapper button (styles + click handler) is provided by AutoComplete.
+     */
+    renderOption?: (option: T, isSelected: boolean) => ReactNode;
+    /**
+     * Override client-side filtering.
+     * Pass `(x) => x` to disable filtering entirely (when results come from an API).
+     * Defaults to identity (no filtering).
+     */
+    filterOptions?: (options: T[]) => T[];
+    /**
+     * Render the options list via a React portal so it escapes containers
+     * with `overflow: hidden/auto`.
+     * Set to false when inside a Dialog — portal content is blocked by
+     * Radix Dialog's focus trap and aria-modal, making items unclickable.
+     * Defaults to true.
+     */
+    portal?: boolean;
+    /** Extra className applied to the options list container */
+    listboxClassName?: string;
+    /** Extra inline styles applied to the options list container */
+    listboxStyle?: React__default.CSSProperties;
+    /** Extra inline styles applied to the Popover content wrapper (portal mode only) */
+    popoverStyle?: React__default.CSSProperties;
+    /** Extra className applied to each option item */
+    optionClassName?: string;
+    /** Extra inline styles applied to each option item */
+    optionStyle?: React__default.CSSProperties;
+    "data-testid"?: string;
+} & Omit<InputProps, OmittedInputProps>;
+declare function AutoCompleteInner<T extends AutoCompleteOption = AutoCompleteOption>({ options, value, onChange, onSelect, onBlur, onSearch, loading, noOptionsText, showNoOptions, renderOption, filterOptions, portal, listboxClassName, listboxStyle, popoverStyle, optionClassName, optionStyle, "data-testid": testId, id, label, fullwidth, size, rounded, variant, disabled, ...rest }: AutoCompleteProps<T>, ref: React__default.ForwardedRef<HTMLInputElement>): react_jsx_runtime.JSX.Element;
+declare const AutoComplete: <T extends AutoCompleteOption = AutoCompleteOption>(props: AutoCompleteProps<T> & {
+    ref?: React__default.ForwardedRef<HTMLInputElement>;
+}) => ReturnType<typeof AutoCompleteInner>;
+
 declare const Checkbox: React$1.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 
 declare const Label: React$1.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React$1.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<(props?: ({
@@ -2288,4 +2363,4 @@ declare const srgbToHex: (color: string) => string;
  */
 declare function getLucideIconNames(): Promise<string[]>;
 
-export { ActionButton, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Badge, type BadgeColor, type BadgeProps, Button, type ButtonProps, Calendar, Checkbox, Collapsible, type ColumnManagementOptions, ConfirmDialog, type ConfirmDialogProps, type ControlledFormFactoryOptions, type CustomSliderProps, DataTable, type DataTableEditingProps, type DataTablePaginationMode, type DataTableProps, DatePicker, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Dropdown, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type DropdownProps, type EditDisplayMode, type EditTrigger, type EditableColumnDef, Field, FieldMessage, type FieldMessageProps, type FieldProps, FocusedScrollView, Footer, type FooterProps, type FooterVariant, Form, type FormController, FormDialog, type FormDialogAction, type FormDialogProps, type FormProps, Icon, Input, InputFilter, type InputFilterProps, type InputProps, Label, Loading, type MaskRule, MaskedTextInput, type MaskedTextInputProps, Menu, DropdownMenuItem as MenuItem, type MenuItemType, DropdownMenuLabel as MenuLabel, type MenuOption, type MenuProps, DropdownMenuSeparator as MenuSeparator, Navbar, type NavbarProps, type NavbarVariant, NumberInput, type NumberInputProps, type OptionLike, type Options$1 as Options, OtpInput, OtpInputGroup, type OtpInputGroupProps, type OtpInputProps, PasswordInput, type PasswordInputProps, Popover, PopoverContent, PopoverTrigger, ProgressBar, RadioGroup, RadioGroupItem, ScrollArea, type ScrollAreaProps, type ScrollbarSize, Search, type SearchProps, SeverityBadge, type SeverityBadgeProps, type SeverityLevel, Slider, type SliderProps, Switch, THEME_COLOR_KEYS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TablePagination, type TablePaginationProps, TableRow, Tabs, Text, TextArea, type TextAreaProps, TextInput, type ThemeColorKey, Toast$1 as Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipSimple, TooltipTrigger, Tree, type TreeData, TreeItem, type TreeItemProps, type TreeProps, type UseControlledFormOptions, type UseOptionBridgeOptions, ValidationHintList, type ValidationHintListProps, type ValidationHintMode, type ValidationHintRule, type ValidationHintState, cn, createControlledForm, createYupResolver, getEndDateOfDay, getLucideIconNames, getStartDateOfDay, getStartEndTimestampOfDay, getThemeColor, getThemeColors, getTimestampUTC, reducer, resloveTimestamp, srgbToHex, toast, useControlledForm, useOptionBridge, usePrevious, useToast };
+export { ActionButton, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AutoComplete, type AutoCompleteOption, type AutoCompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Badge, type BadgeColor, type BadgeProps, Button, type ButtonProps, Calendar, Checkbox, Collapsible, type ColumnManagementOptions, ConfirmDialog, type ConfirmDialogProps, type ControlledFormFactoryOptions, type CustomSliderProps, DataTable, type DataTableEditingProps, type DataTablePaginationMode, type DataTableProps, DatePicker, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Dropdown, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type DropdownProps, type EditDisplayMode, type EditTrigger, type EditableColumnDef, Field, FieldMessage, type FieldMessageProps, type FieldProps, FocusedScrollView, Footer, type FooterProps, type FooterVariant, Form, type FormController, FormDialog, type FormDialogAction, type FormDialogProps, type FormProps, Icon, Input, InputFilter, type InputFilterProps, type InputProps, Label, Loading, type MaskRule, MaskedTextInput, type MaskedTextInputProps, Menu, DropdownMenuItem as MenuItem, type MenuItemType, DropdownMenuLabel as MenuLabel, type MenuOption, type MenuProps, DropdownMenuSeparator as MenuSeparator, Navbar, type NavbarProps, type NavbarVariant, NumberInput, type NumberInputProps, type OptionLike, type Options$1 as Options, OtpInput, OtpInputGroup, type OtpInputGroupProps, type OtpInputProps, PasswordInput, type PasswordInputProps, Popover, PopoverContent, PopoverTrigger, ProgressBar, RadioGroup, RadioGroupItem, ScrollArea, type ScrollAreaProps, type ScrollbarSize, Search, type SearchProps, SeverityBadge, type SeverityBadgeProps, type SeverityLevel, Slider, type SliderProps, Switch, THEME_COLOR_KEYS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TablePagination, type TablePaginationProps, TableRow, Tabs, Text, TextArea, type TextAreaProps, TextInput, type ThemeColorKey, Toast$1 as Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipSimple, TooltipTrigger, Tree, type TreeData, TreeItem, type TreeItemProps, type TreeProps, type UseControlledFormOptions, type UseOptionBridgeOptions, ValidationHintList, type ValidationHintListProps, type ValidationHintMode, type ValidationHintRule, type ValidationHintState, cn, createControlledForm, createYupResolver, getEndDateOfDay, getLucideIconNames, getStartDateOfDay, getStartEndTimestampOfDay, getThemeColor, getThemeColors, getTimestampUTC, menuItemBaseStyles, reducer, resloveTimestamp, srgbToHex, toast, useControlledForm, useOptionBridge, usePrevious, useToast };

package/dist/index.js

@@ -11,6 +11,8 @@ export { default as TextArea } from "./components/TextArea/TextArea";
 export { default as Text } from "./components/Text/Text";
 export { default as Tabs } from "./components/Tabs/Tabs";
 export { default as Dropdown } from "./components/Dropdown/Dropdown";
+export { menuItemBaseStyles } from "./components/Dropdown/Dropdown";
+export { default as AutoComplete } from "./components/AutoComplete/AutoComplete";
 export { Checkbox } from "./components/Checkbox/Checkbox";
 export { Label } from "./components/Label/Label";
 export { Input } from "./components/Input/Input";

package/dist/src/theme/global.css

@@ -4761,6 +4761,10 @@ input[type=number] {
   max-width: 28rem;
 }
 
+.max-w-sm {
+  max-width: 24rem;
+}
+
 .flex-1 {
   flex: 1 1 0%;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovula/ui",
-  "version": "0.1.41",
+  "version": "0.1.43",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
   "types": "dist/index.d.ts",