@abuzareal/contour-ui 0.5.0 → 0.6.1

package/dist/components/ui/Combobox.d.ts

@@ -0,0 +1,325 @@
+export type { ComboboxOption, ComboboxProps } from "./Combobox.types.js";
+import type { ComboboxOption } from "./Combobox.types.js";
+/** Searchable allowed-value selection. The forwarded ref targets the visible input. */
+declare const Combobox: import("react").ForwardRefExoticComponent<import("../../hooks/useFloatingPanel.js").FloatingOptions & {
+    label: string;
+    options: readonly ComboboxOption[];
+    filteredOptions?: readonly ComboboxOption[];
+    value?: string | null;
+    defaultValue?: string | null;
+    onValueChange?: (value: string | null) => void;
+    inputValue?: string;
+    defaultInputValue?: string;
+    onInputValueChange?: (query: string) => void;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    id?: string;
+    name?: string;
+    form?: string;
+    required?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    hint?: string;
+    error?: string;
+    hideLabel?: boolean;
+    loading?: boolean;
+    searchError?: string;
+    onRetry?: () => void;
+    loadingText?: string;
+    emptyText?: string;
+    retryLabel?: string;
+    triggerLabel?: string;
+    missingValueText?: string;
+    inputProps?: {
+        [x: `data-${string}`]: string | number | boolean | undefined;
+        title?: string | undefined | undefined;
+        ref?: ((instance: HTMLInputElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLInputElement> | null | undefined;
+        suppressHydrationWarning?: boolean | undefined | undefined;
+        className?: string | undefined | undefined;
+        color?: string | undefined | undefined;
+        height?: number | string | undefined | undefined;
+        lang?: string | undefined | undefined;
+        max?: number | string | undefined | undefined;
+        min?: number | string | undefined | undefined;
+        style?: import("react").CSSProperties | undefined;
+        width?: number | string | undefined | undefined;
+        role?: import("react").AriaRole | undefined;
+        tabIndex?: number | undefined | undefined;
+        "aria-activedescendant"?: string | undefined | undefined;
+        "aria-atomic"?: (boolean | "true" | "false") | undefined;
+        "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | 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-controls"?: string | 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-expanded"?: (boolean | "true" | "false") | undefined;
+        "aria-flowto"?: string | undefined | undefined;
+        "aria-grabbed"?: (boolean | "true" | "false") | undefined;
+        "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | 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;
+        onCopy?: import("react").ClipboardEventHandler<HTMLInputElement> | undefined;
+        onCopyCapture?: import("react").ClipboardEventHandler<HTMLInputElement> | undefined;
+        onCut?: import("react").ClipboardEventHandler<HTMLInputElement> | undefined;
+        onCutCapture?: import("react").ClipboardEventHandler<HTMLInputElement> | undefined;
+        onPaste?: import("react").ClipboardEventHandler<HTMLInputElement> | undefined;
+        onPasteCapture?: import("react").ClipboardEventHandler<HTMLInputElement> | undefined;
+        onCompositionEnd?: import("react").CompositionEventHandler<HTMLInputElement> | undefined;
+        onCompositionEndCapture?: import("react").CompositionEventHandler<HTMLInputElement> | undefined;
+        onCompositionStart?: import("react").CompositionEventHandler<HTMLInputElement> | undefined;
+        onCompositionStartCapture?: import("react").CompositionEventHandler<HTMLInputElement> | undefined;
+        onCompositionUpdate?: import("react").CompositionEventHandler<HTMLInputElement> | undefined;
+        onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLInputElement> | undefined;
+        onFocus?: import("react").FocusEventHandler<HTMLInputElement> | undefined;
+        onFocusCapture?: import("react").FocusEventHandler<HTMLInputElement> | undefined;
+        onBlur?: import("react").FocusEventHandler<HTMLInputElement> | undefined;
+        onBlurCapture?: import("react").FocusEventHandler<HTMLInputElement> | undefined;
+        onChange?: import("react").ChangeEventHandler<HTMLInputElement> | undefined;
+        onChangeCapture?: import("react").FormEventHandler<HTMLInputElement> | undefined;
+        onBeforeInput?: import("react").InputEventHandler<HTMLInputElement> | undefined;
+        onBeforeInputCapture?: import("react").FormEventHandler<HTMLInputElement> | undefined;
+        onInput?: import("react").FormEventHandler<HTMLInputElement> | undefined;
+        onInputCapture?: import("react").FormEventHandler<HTMLInputElement> | undefined;
+        onReset?: import("react").FormEventHandler<HTMLInputElement> | undefined;
+        onResetCapture?: import("react").FormEventHandler<HTMLInputElement> | undefined;
+        onSubmit?: import("react").FormEventHandler<HTMLInputElement> | undefined;
+        onSubmitCapture?: import("react").FormEventHandler<HTMLInputElement> | undefined;
+        onInvalid?: import("react").FormEventHandler<HTMLInputElement> | undefined;
+        onInvalidCapture?: import("react").FormEventHandler<HTMLInputElement> | undefined;
+        onLoad?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onLoadCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onError?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onErrorCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onKeyDown?: import("react").KeyboardEventHandler<HTMLInputElement> | undefined;
+        onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLInputElement> | undefined;
+        onKeyPress?: import("react").KeyboardEventHandler<HTMLInputElement> | undefined;
+        onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLInputElement> | undefined;
+        onKeyUp?: import("react").KeyboardEventHandler<HTMLInputElement> | undefined;
+        onKeyUpCapture?: import("react").KeyboardEventHandler<HTMLInputElement> | undefined;
+        onAbort?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onAbortCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onCanPlay?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onCanPlayCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onCanPlayThrough?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onCanPlayThroughCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onDurationChange?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onDurationChangeCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onEmptied?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onEmptiedCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onEncrypted?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onEncryptedCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onEnded?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onEndedCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onLoadedData?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onLoadedDataCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onLoadedMetadata?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onLoadedMetadataCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onLoadStart?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onLoadStartCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onPause?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onPauseCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onPlay?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onPlayCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onPlaying?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onPlayingCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onProgress?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onProgressCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onRateChange?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onRateChangeCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onSeeked?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onSeekedCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onSeeking?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onSeekingCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onStalled?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onStalledCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onSuspend?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onSuspendCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onTimeUpdate?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onTimeUpdateCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onVolumeChange?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onVolumeChangeCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onWaiting?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onWaitingCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onAuxClick?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+        onAuxClickCapture?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+        onClick?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+        onClickCapture?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+        onContextMenu?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+        onContextMenuCapture?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+        onDoubleClick?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+        onDoubleClickCapture?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+        onDrag?: import("react").DragEventHandler<HTMLInputElement> | undefined;
+        onDragCapture?: import("react").DragEventHandler<HTMLInputElement> | undefined;
+        onDragEnd?: import("react").DragEventHandler<HTMLInputElement> | undefined;
+        onDragEndCapture?: import("react").DragEventHandler<HTMLInputElement> | undefined;
+        onDragEnter?: import("react").DragEventHandler<HTMLInputElement> | undefined;
+        onDragEnterCapture?: import("react").DragEventHandler<HTMLInputElement> | undefined;
+        onDragExit?: import("react").DragEventHandler<HTMLInputElement> | undefined;
+        onDragExitCapture?: import("react").DragEventHandler<HTMLInputElement> | undefined;
+        onDragLeave?: import("react").DragEventHandler<HTMLInputElement> | undefined;
+        onDragLeaveCapture?: import("react").DragEventHandler<HTMLInputElement> | undefined;
+        onDragOver?: import("react").DragEventHandler<HTMLInputElement> | undefined;
+        onDragOverCapture?: import("react").DragEventHandler<HTMLInputElement> | undefined;
+        onDragStart?: import("react").DragEventHandler<HTMLInputElement> | undefined;
+        onDragStartCapture?: import("react").DragEventHandler<HTMLInputElement> | undefined;
+        onDrop?: import("react").DragEventHandler<HTMLInputElement> | undefined;
+        onDropCapture?: import("react").DragEventHandler<HTMLInputElement> | undefined;
+        onMouseDown?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+        onMouseDownCapture?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+        onMouseEnter?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+        onMouseLeave?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+        onMouseMove?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+        onMouseMoveCapture?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+        onMouseOut?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+        onMouseOutCapture?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+        onMouseOver?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+        onMouseOverCapture?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+        onMouseUp?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+        onMouseUpCapture?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+        onSelect?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onSelectCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onTouchCancel?: import("react").TouchEventHandler<HTMLInputElement> | undefined;
+        onTouchCancelCapture?: import("react").TouchEventHandler<HTMLInputElement> | undefined;
+        onTouchEnd?: import("react").TouchEventHandler<HTMLInputElement> | undefined;
+        onTouchEndCapture?: import("react").TouchEventHandler<HTMLInputElement> | undefined;
+        onTouchMove?: import("react").TouchEventHandler<HTMLInputElement> | undefined;
+        onTouchMoveCapture?: import("react").TouchEventHandler<HTMLInputElement> | undefined;
+        onTouchStart?: import("react").TouchEventHandler<HTMLInputElement> | undefined;
+        onTouchStartCapture?: import("react").TouchEventHandler<HTMLInputElement> | undefined;
+        onPointerDown?: import("react").PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerDownCapture?: import("react").PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerMove?: import("react").PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerMoveCapture?: import("react").PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerUp?: import("react").PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerUpCapture?: import("react").PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerCancel?: import("react").PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerCancelCapture?: import("react").PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerEnter?: import("react").PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerLeave?: import("react").PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerOver?: import("react").PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerOverCapture?: import("react").PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerOut?: import("react").PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerOutCapture?: import("react").PointerEventHandler<HTMLInputElement> | undefined;
+        onGotPointerCapture?: import("react").PointerEventHandler<HTMLInputElement> | undefined;
+        onGotPointerCaptureCapture?: import("react").PointerEventHandler<HTMLInputElement> | undefined;
+        onLostPointerCapture?: import("react").PointerEventHandler<HTMLInputElement> | undefined;
+        onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLInputElement> | undefined;
+        onScroll?: import("react").UIEventHandler<HTMLInputElement> | undefined;
+        onScrollCapture?: import("react").UIEventHandler<HTMLInputElement> | undefined;
+        onWheel?: import("react").WheelEventHandler<HTMLInputElement> | undefined;
+        onWheelCapture?: import("react").WheelEventHandler<HTMLInputElement> | undefined;
+        onAnimationStart?: import("react").AnimationEventHandler<HTMLInputElement> | undefined;
+        onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLInputElement> | undefined;
+        onAnimationEnd?: import("react").AnimationEventHandler<HTMLInputElement> | undefined;
+        onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLInputElement> | undefined;
+        onAnimationIteration?: import("react").AnimationEventHandler<HTMLInputElement> | undefined;
+        onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLInputElement> | undefined;
+        onTransitionEnd?: import("react").TransitionEventHandler<HTMLInputElement> | undefined;
+        onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLInputElement> | undefined;
+        key?: import("react").Key | null | undefined;
+        size?: number | undefined | undefined;
+        list?: string | undefined | undefined;
+        src?: string | undefined | undefined;
+        alt?: string | undefined | undefined;
+        step?: number | string | undefined | undefined;
+        formAction?: string | undefined;
+        formEncType?: string | undefined | undefined;
+        formMethod?: string | undefined | undefined;
+        formNoValidate?: boolean | undefined | undefined;
+        formTarget?: string | undefined | undefined;
+        defaultChecked?: boolean | undefined | undefined;
+        suppressContentEditableWarning?: boolean | undefined | undefined;
+        accessKey?: string | undefined | undefined;
+        autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
+        autoFocus?: boolean | undefined | undefined;
+        contentEditable?: (boolean | "true" | "false") | "inherit" | "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;
+        exportparts?: string | undefined | undefined;
+        part?: string | undefined | undefined;
+        accept?: string | undefined | undefined;
+        autoComplete?: import("react").HTMLInputAutoCompleteAttribute | 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;
+    };
+    popupProps?: import("../../lib/componentProps.js").NativePartProps<"div">;
+    rootProps?: import("../../lib/componentProps.js").NativePartProps<"div">;
+} & import("react").RefAttributes<HTMLInputElement>>;
+export default Combobox;

package/dist/components/ui/Combobox.js

@@ -0,0 +1,135 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useContext, useId, useLayoutEffect, useMemo, useRef, useState, } from "react";
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
+import { DirectionProvider } from "@base-ui/react/direction-provider";
+import { Check, ChevronDown } from "lucide-react";
+import { ccx } from "../../lib/classNames.js";
+import { fieldDescribedBy } from "../../lib/a11y.js";
+import { composeRefs } from "../../lib/composeRefs.js";
+import { LayerVisibility } from "../../lib/layers.js";
+import { floatingContainer } from "../../hooks/useFloatingPanel.js";
+import useControlRef from "../../hooks/useControlRef.js";
+import useFormReset from "../../hooks/useFormReset.js";
+import useLayerDismiss from "../../hooks/useLayerDismiss.js";
+import useOpenState from "../../hooks/useOpenState.js";
+import useComboboxAnchor from "../../hooks/useComboboxAnchor.js";
+import FloatingScope from "./FloatingScope.js";
+import Field from "./Field.js";
+/** Searchable allowed-value selection. The forwarded ref targets the visible input. */
+const Combobox = forwardRef(function Combobox({ label, options, filteredOptions, value: controlledValue, defaultValue = null, onValueChange, inputValue, defaultInputValue, onInputValueChange, open: controlledOpen, defaultOpen = false, onOpenChange, id: providedId, name, form, required, disabled, readOnly, hint, error, hideLabel, loading = false, searchError, onRetry, loadingText = "Loading choices…", emptyText = "No matching choices.", retryLabel = "Retry search", triggerLabel = "Show choices", missingValueText = "Selected option is unavailable. Choose another.", side = "bottom", align = "start", sideOffset = 8, collisionPadding = 8, portal = true, container, inputProps, popupProps, rootProps, }, forwardedRef) {
+    const generatedId = useId();
+    const id = providedId ?? generatedId;
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const value = controlledValue === undefined ? internalValue : controlledValue;
+    const selected = options.find((option) => option.value === value);
+    const missing = value !== null && !selected;
+    const [query, setQuery] = useState(defaultInputValue ?? null);
+    const [open, changeOpen] = useOpenState(controlledOpen, defaultOpen, onOpenChange);
+    const available = useContext(LayerVisibility) && !disabled && !readOnly;
+    const visible = available && open;
+    const { ref: input, attach } = useControlRef(forwardedRef);
+    const [anchor, setAnchor] = useState(null);
+    const attachInput = useMemo(() => composeRefs(attach, inputProps?.ref, setAnchor), [attach, inputProps?.ref]);
+    const actions = useRef(null);
+    // The custom non-modal popup has no exit animation. Complete the public close
+    // lifecycle after it is hidden so controlled query text returns to the selected label.
+    useLayoutEffect(() => {
+        if (!visible)
+            actions.current?.unmount();
+    }, [visible]);
+    const root = useRef(null);
+    const attachRoot = useMemo(() => composeRefs(root, rootProps?.ref), [rootProps?.ref]);
+    const positioner = useRef(null);
+    const [, mountedPositioner] = useState(null);
+    const attachPositioner = useMemo(() => composeRefs(positioner, mountedPositioner), []);
+    const [direction, setDirection] = useState("ltr");
+    const target = anchor && portal ? floatingContainer(anchor, { container }) : null;
+    const collection = useMemo(() => BaseCombobox.createItems(options, {
+        getValue: (option) => option.value,
+        getLabel: (option) => option.label,
+    }), [options]);
+    const close = () => {
+        changeOpen(false);
+        setQuery(null);
+    };
+    useLayerDismiss(root, visible, close, {
+        branches: [positioner, input],
+        layerElement: positioner,
+    });
+    useFormReset(input, () => {
+        if (controlledValue === undefined)
+            setInternalValue(defaultValue);
+        setQuery(null);
+        changeOpen(false);
+    });
+    useLayoutEffect(() => {
+        const element = input.current;
+        element?.setCustomValidity(missing ? missingValueText : "");
+        return () => element?.setCustomValidity("");
+    }, [input, missing, missingValueText]);
+    const fieldError = error ?? (missing ? missingValueText : undefined);
+    const results = loading || searchError ? [] : filteredOptions;
+    const statusId = `${id}-search-status`;
+    const positioning = useComboboxAnchor(anchor, positioner);
+    const popup = (_jsx(FloatingScope, { anchor: anchor, open: visible, target: target, onDirectionChange: setDirection, children: _jsx(BaseCombobox.Positioner, { ...positioning, ref: attachPositioner, className: ccx("combobox-positioner"), positionMethod: "fixed", side: side, align: align, sideOffset: Number.isFinite(sideOffset) ? sideOffset : 8, collisionPadding: Number.isFinite(collisionPadding) ? Math.max(0, collisionPadding) : 8, children: _jsxs("div", { role: "region", "aria-labelledby": `${id}-label`, ...popupProps, className: ccx("combobox-popup", popupProps?.className), hidden: !visible, children: [_jsx(BaseCombobox.Empty, { className: ccx("combobox-status"), children: loading ? loadingText : (searchError ?? emptyText) }), searchError && onRetry && (_jsx("button", { type: "button", className: ccx("combobox-retry"), onClick: onRetry, children: retryLabel })), _jsx(BaseCombobox.List, { className: ccx("combobox-list"), "aria-labelledby": `${id}-label`, children: (option) => (_jsxs(BaseCombobox.Item, { className: ccx("combobox-option"), value: option.value, disabled: option.disabled, children: [_jsx("span", { children: option.label }), _jsx(BaseCombobox.ItemIndicator, { children: _jsx(Check, { size: 14, "aria-hidden": "true" }) })] }, option.value)) })] }) }) }));
+    return (_jsx(DirectionProvider, { direction: direction, children: _jsx("div", { ...rootProps, ref: attachRoot, className: ccx("combobox", rootProps?.className), children: _jsxs(BaseCombobox.Root, { actionsRef: actions, items: collection, filteredItems: results, value: missing ? null : value, onValueChange: (next) => {
+                    if (controlledValue === undefined)
+                        setInternalValue(next);
+                    setQuery(null);
+                    onValueChange?.(next);
+                }, inputValue: inputValue ?? query ?? selected?.label ?? "", onInputValueChange: (next, details) => {
+                    setQuery(details.reason === "input-change" ||
+                        details.reason === "input-clear"
+                        ? next
+                        : null);
+                    onInputValueChange?.(next);
+                }, open: visible, onOpenChange: (next, details) => {
+                    // Keep native observers informed; a prevented Escape must not dismiss the host layer.
+                    details.allowPropagation();
+                    if ((next && !available) ||
+                        (details.reason === "escape-key" &&
+                            details.event.defaultPrevented)) {
+                        details.cancel();
+                        return;
+                    }
+                    if (!next) {
+                        details.preventUnmountOnClose();
+                        setQuery(null);
+                    }
+                    changeOpen(next);
+                }, name: name, form: form, required: required, disabled: disabled, readOnly: readOnly, children: [_jsx(Field, { id: id, label: label, hint: hint, error: fieldError, required: required, disabled: disabled, hideLabel: hideLabel, children: _jsxs(BaseCombobox.InputGroup, { className: ccx("field-control combobox-control"), children: [_jsx(BaseCombobox.Input, { ...inputProps, onMouseDown: (event) => {
+                                        inputProps?.onMouseDown?.(event);
+                                        // Own activation on click; leave native focus/caret behavior intact and avoid stale touch timers.
+                                        event.preventBaseUIHandler();
+                                    }, onClick: (event) => {
+                                        inputProps?.onClick?.(event);
+                                        if (!event.defaultPrevented && available)
+                                            changeOpen(true);
+                                    }, onKeyDown: (event) => {
+                                        inputProps?.onKeyDown?.(event);
+                                        // Contour preserves a closed selection and lets the enclosing layer own Escape.
+                                        // Cancelling only Base UI's handler leaves the native document event intact.
+                                        if (event.defaultPrevented ||
+                                            (event.key === "Escape" && !visible))
+                                            event.preventBaseUIHandler();
+                                        else if (event.key === "Tab" && visible) {
+                                            // Close even when native traversal leaves the document (for example Safari's last field).
+                                            // Do not preventDefault: the browser still owns the next keyboard target.
+                                            event.preventBaseUIHandler();
+                                            close();
+                                        }
+                                    }, ref: attachInput, id: id, form: form, "aria-labelledby": [
+                                        `${id}-label`,
+                                        inputProps?.["aria-labelledby"],
+                                    ]
+                                        .filter(Boolean)
+                                        .join(" "), "aria-invalid": fieldError ? true : inputProps?.["aria-invalid"], "aria-busy": loading || undefined, "aria-describedby": [
+                                        inputProps?.["aria-describedby"],
+                                        fieldDescribedBy(id, hint, fieldError),
+                                        statusId,
+                                    ]
+                                        .filter(Boolean)
+                                        .join(" ") }), _jsx(BaseCombobox.Trigger, { disabled: disabled || readOnly, className: ccx("combobox-trigger"), "aria-label": triggerLabel, children: _jsx(ChevronDown, { size: 16, "aria-hidden": "true" }) })] }) }), _jsx("span", { id: statusId, role: "status", className: ccx("visually-hidden"), children: loading ? loadingText : (searchError ?? "") }), _jsx(BaseCombobox.Portal, { container: portal ? (target ?? undefined) : root, children: popup })] }) }) }));
+});
+export default Combobox;

package/dist/components/ui/Combobox.types.d.ts

@@ -0,0 +1,46 @@
+import type { NativePartProps } from "../../lib/componentProps.js";
+import type { FloatingOptions } from "../../hooks/useFloatingPanel.js";
+export type ComboboxOption = {
+    /** Unique, nonempty form value. Labels are presentation, never identity. */
+    value: string;
+    label: string;
+    disabled?: boolean;
+};
+type InputPart = Omit<NativePartProps<"input">, "value" | "defaultValue" | "name" | "form" | "id" | "disabled" | "required" | "readOnly" | "type">;
+export type ComboboxProps = FloatingOptions & {
+    label: string;
+    options: readonly ComboboxOption[];
+    /** Application-filtered results. Retain the selected option in options for async searches. */
+    filteredOptions?: readonly ComboboxOption[];
+    value?: string | null;
+    defaultValue?: string | null;
+    onValueChange?: (value: string | null) => void;
+    inputValue?: string;
+    defaultInputValue?: string;
+    onInputValueChange?: (query: string) => void;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    id?: string;
+    name?: string;
+    form?: string;
+    required?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    hint?: string;
+    error?: string;
+    hideLabel?: boolean;
+    loading?: boolean;
+    /** Search/service failure, distinct from field validation. Results are hidden until retry succeeds. */
+    searchError?: string;
+    onRetry?: () => void;
+    loadingText?: string;
+    emptyText?: string;
+    retryLabel?: string;
+    triggerLabel?: string;
+    missingValueText?: string;
+    inputProps?: InputPart;
+    popupProps?: NativePartProps<"div">;
+    rootProps?: NativePartProps<"div">;
+};
+export {};

package/dist/components/ui/Combobox.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/ui/DataTable.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ccx } from "../../lib/classNames.js";
 /** Editorial data table with mono headers, optional column sorting, and horizontal scroll on small screens. */
 import { useMemo, useState } from "react";
+import Table from "./Table.js";
 import { ArrowDown, ArrowUp } from "lucide-react";
 export default function DataTable({ caption, columns, rows, rowKey, }) {
     const [sort, setSort] = useState(null);
@@ -22,8 +23,8 @@ export default function DataTable({ caption, columns, rows, rowKey, }) {
     const toggleSort = (key) => setSort((current) => current?.key === key && current.direction === "ascending"
         ? { key, direction: "descending" }
         : { key, direction: "ascending" });
-    return (_jsx("div", { className: ccx("table-scroll"), tabIndex: 0, role: "region", "aria-label": caption, children: _jsxs("table", { className: ccx("data-table"), children: [_jsx("caption", { className: ccx("visually-hidden"), children: caption }), _jsx("thead", { className: ccx("mono"), children: _jsx("tr", { children: columns.map((column) => {
-                            const direction = sort?.key === column.key ? sort.direction : undefined;
-                            return (_jsx("th", { scope: "col", "aria-sort": column.sortable ? (direction ?? "none") : undefined, "data-align": column.align, children: column.sortable ? (_jsxs("button", { type: "button", onClick: () => toggleSort(column.key), children: [column.header, direction === "descending" ? (_jsx(ArrowDown, { size: 12, "aria-hidden": "true" })) : (_jsx(ArrowUp, { size: 12, "aria-hidden": "true", className: ccx(direction ? undefined : "data-table-idle") }))] })) : (column.header) }, column.key));
-                        }) }) }), _jsx("tbody", { children: sortedRows.map((row) => (_jsx("tr", { children: columns.map((column) => (_jsx("td", { "data-align": column.align, children: column.render ? column.render(row) : row[column.key] }, column.key))) }, String(row[rowKey])))) })] }) }));
+    return (_jsxs(Table, { caption: caption, children: [_jsx("thead", { className: ccx("mono"), children: _jsx("tr", { children: columns.map((column) => {
+                        const direction = sort?.key === column.key ? sort.direction : undefined;
+                        return (_jsx("th", { scope: "col", "aria-sort": column.sortable ? (direction ?? "none") : undefined, "data-align": column.align, children: column.sortable ? (_jsxs("button", { type: "button", onClick: () => toggleSort(column.key), children: [column.header, direction === "descending" ? (_jsx(ArrowDown, { size: 12, "aria-hidden": "true" })) : (_jsx(ArrowUp, { size: 12, "aria-hidden": "true", className: ccx(direction ? undefined : "data-table-idle") }))] })) : (column.header) }, column.key));
+                    }) }) }), _jsx("tbody", { children: sortedRows.map((row) => (_jsx("tr", { children: columns.map((column) => (_jsx("td", { "data-align": column.align, children: column.render ? column.render(row) : row[column.key] }, column.key))) }, String(row[rowKey])))) })] }));
 }

package/dist/components/ui/Field.js

@@ -2,5 +2,5 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AlertCircle } from "lucide-react";
 import { ccx } from "../../lib/classNames.js";
 export default function Field({ id, label, children, hint, error, required, hideLabel, counter, disabled, }) {
-    return (_jsxs("div", { className: ccx("field", error && "field-invalid", disabled && "field-disabled"), children: [_jsxs("label", { htmlFor: id, className: ccx("field-label mono", hideLabel && "visually-hidden"), children: [label, required && (_jsx("span", { className: ccx("field-required"), "aria-hidden": "true", children: "*" }))] }), children, (hint || error || counter) && (_jsxs("div", { className: ccx("field-footer mono"), children: [error ? (_jsxs("span", { id: `${id}-error`, className: ccx("field-error"), children: [_jsx(AlertCircle, { size: 13, "aria-hidden": "true" }), error] })) : (hint && _jsx("span", { id: `${id}-hint`, children: hint })), counter && _jsx("span", { className: ccx("field-counter"), children: counter })] }))] }));
+    return (_jsxs("div", { className: ccx("field", error && "field-invalid", disabled && "field-disabled"), children: [_jsxs("label", { htmlFor: id, className: ccx("field-label mono", hideLabel && "visually-hidden"), children: [_jsx("span", { id: `${id}-label`, children: label }), required && (_jsx("span", { className: ccx("field-required"), "aria-hidden": "true", children: "*" }))] }), children, (hint || error || counter) && (_jsxs("div", { className: ccx("field-footer mono"), children: [error ? (_jsxs("span", { id: `${id}-error`, className: ccx("field-error"), children: [_jsx(AlertCircle, { size: 13, "aria-hidden": "true" }), error] })) : (hint && _jsx("span", { id: `${id}-hint`, children: hint })), counter && _jsx("span", { className: ccx("field-counter"), children: counter })] }))] }));
 }

package/dist/components/ui/FloatingPortal.js

@@ -1,51 +1,13 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useLayoutEffect, useRef } from "react";
 import { createPortal } from "react-dom";
 import useFloatingPanel, { floatingContainer, } from "../../hooks/useFloatingPanel.js";
+import FloatingScope from "./FloatingScope.js";
 export default function FloatingPortal({ anchor, anchorElement, panel, open, options, children, }) {
-    const scope = useRef(null);
     const target = anchorElement && options.portal !== false
         ? floatingContainer(anchorElement, options)
         : null;
-    useLayoutEffect(() => {
-        const root = scope.current;
-        if (!open || !anchorElement || !root)
-            return;
-        const view = anchorElement.ownerDocument.defaultView;
-        if (!view)
-            return;
-        const synchronize = () => {
-            const computed = view.getComputedStyle(anchorElement);
-            // Copy inherited CSS variables without controlling the host document's theme.
-            for (let index = 0; index < computed.length; index++) {
-                const name = computed.item(index);
-                if (name.startsWith("--"))
-                    root.style.setProperty(name, computed.getPropertyValue(name));
-            }
-            root.dir = computed.direction;
-            root.style.fontFamily = computed.fontFamily;
-            root.style.color = computed.color;
-        };
-        synchronize();
-        const observer = new view.MutationObserver(synchronize);
-        let ancestor = anchorElement;
-        while (ancestor) {
-            observer.observe(ancestor, {
-                attributes: true,
-                attributeFilter: [
-                    "style",
-                    "class",
-                    "dir",
-                    "data-theme",
-                    "data-contour-theme",
-                ],
-            });
-            ancestor = ancestor.parentElement;
-        }
-        return () => observer.disconnect();
-    }, [anchorElement, target, open]);
     useFloatingPanel(anchor, panel, open, { ...options, container: target });
-    const content = (_jsx("span", { ref: scope, className: "contour-floating-root contour-root", style: { display: "contents" }, children: children }));
+    const content = (_jsx(FloatingScope, { anchor: anchorElement, open: open, target: target, children: children }));
     return target ? createPortal(content, target) : content;
 }

package/dist/components/ui/FloatingScope.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from "react";
+/** Carry the anchor's inherited theme into a portal without changing its host. */
+export default function FloatingScope({ anchor, open, target, onDirectionChange, children, }: {
+    anchor: HTMLElement | null;
+    open: boolean;
+    target: Node | null;
+    onDirectionChange?: (direction: "ltr" | "rtl") => void;
+    children: ReactNode;
+}): import("react").JSX.Element;