@abuzareal/contour-ui 0.4.0 → 0.6.0

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,120 @@
+"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 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(BaseCombobox.Popup, { ...popupProps, className: ccx("combobox-popup", popupProps?.className), 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"), 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, { 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)
+                        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();
+                                    }, 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/CountUp.d.ts

@@ -5,5 +5,6 @@ export type CountUpProps = {
     /** Pads to this many digits, e.g. 2 renders 05. */
     digits?: number;
     suffix?: string;
+    formatValue?: (value: number) => string;
 };
-export default function CountUp({ to, duration, digits, suffix, }: CountUpProps): import("react").JSX.Element;
+export default function CountUp({ to, duration, digits, suffix, formatValue, }: CountUpProps): import("react").JSX.Element;

package/dist/components/ui/CountUp.js

@@ -1,10 +1,11 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ccx } from "../../lib/classNames.js";
 /** Number that counts up the first time it scrolls into view; screen readers get the final value. */
 import { useEffect, useRef, useState } from "react";
 import { motionDisabledFor } from "../../lib/motion.js";
 const easeOutCubic = (progress) => 1 - (1 - progress) ** 3;
-export default function CountUp({ to, duration = 1400, digits = 0, suffix = "", }) {
+export default function CountUp({ to, duration = 1400, digits = 0, suffix = "", formatValue, }) {
     const ref = useRef(null);
     const [current, setCurrent] = useState(0);
     useEffect(() => {
@@ -46,6 +47,8 @@ export default function CountUp({ to, duration = 1400, digits = 0, suffix = "",
             cancelAnimationFrame(frame);
         };
     }, [to, duration]);
-    const format = (value) => `${String(value).padStart(digits, "0")}${suffix}`;
-    return (_jsxs("span", { ref: ref, className: "count-up", children: [_jsx("span", { "aria-hidden": "true", children: format(current) }), _jsx("span", { className: "visually-hidden", children: format(to) })] }));
+    const format = (value) => formatValue
+        ? formatValue(value)
+        : `${String(value).padStart(digits, "0")}${suffix}`;
+    return (_jsxs("span", { ref: ref, className: ccx("count-up"), children: [_jsx("span", { "aria-hidden": "true", children: format(current) }), _jsx("span", { className: ccx("visually-hidden"), children: format(to) })] }));
 }

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

@@ -5,6 +5,7 @@ export type TableColumn<Row> = {
     header: string;
     align?: "start" | "end";
     sortable?: boolean;
+    compare?: (a: Row, b: Row) => number;
     render?: (row: Row) => ReactNode;
 };
 export type DataTableProps<Row> = {

package/dist/components/ui/DataTable.js

@@ -1,25 +1,30 @@
 "use client";
 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);
     const sortedRows = useMemo(() => {
         if (!sort)
             return rows;
+        const compare = columns.find((column) => column.key === sort.key)?.compare;
         const factor = sort.direction === "ascending" ? 1 : -1;
-        return [...rows].sort((a, b) => a[sort.key] > b[sort.key]
-            ? factor
-            : a[sort.key] < b[sort.key]
-                ? -factor
-                : 0);
-    }, [rows, sort]);
+        return [...rows].sort((a, b) => compare
+            ? factor * compare(a, b)
+            : a[sort.key] > b[sort.key]
+                ? factor
+                : a[sort.key] < b[sort.key]
+                    ? -factor
+                    : 0);
+    }, [rows, sort, columns]);
     const toggleSort = (key) => setSort((current) => current?.key === key && current.direction === "ascending"
         ? { key, direction: "descending" }
         : { key, direction: "ascending" });
-    return (_jsx("div", { className: "table-scroll", tabIndex: 0, role: "region", "aria-label": caption, children: _jsxs("table", { className: "data-table", children: [_jsx("caption", { className: "visually-hidden", children: caption }), _jsx("thead", { className: "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: 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/DepthButton.js

@@ -2,8 +2,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 /** Physical, layered button that presses down into its base (CSS 3D depth). */
 import { forwardRef } from "react";
-import { cx } from "../../lib/classNames.js";
+import { ccx } from "../../lib/classNames.js";
 const DepthButton = forwardRef(function DepthButton({ children, className, type = "button", ...rest }, ref) {
-    return (_jsx("button", { ref: ref, ...rest, type: type, className: cx("depth-button", className), children: _jsx("span", { className: "depth-button-face", children: children }) }));
+    return (_jsx("button", { ref: ref, ...rest, type: type, className: ccx("depth-button", className), children: _jsx("span", { className: ccx("depth-button-face"), children: children }) }));
 });
 export default DepthButton;

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

@@ -1,5 +1,5 @@
 /** Native controlled modal, with refs and props for its existing DOM parts. */
-import { type ReactNode } from "react";
+import { type RefObject, type ReactNode } from "react";
 import type { NativePartProps } from "../../lib/componentProps.js";
 export type DialogProps = Omit<NativePartProps<"dialog">, "ref" | "open" | "onClose" | "title"> & {
     open: boolean;
@@ -9,6 +9,8 @@ export type DialogProps = Omit<NativePartProps<"dialog">, "ref" | "open" | "onCl
     description?: string;
     footer?: ReactNode;
     placement?: "center" | "left" | "right";
+    initialFocus?: RefObject<HTMLElement | null>;
+    onOpenAutoFocus?: (event: Event) => void;
     panelProps?: NativePartProps<"div">;
     bodyProps?: NativePartProps<"div">;
     footerProps?: NativePartProps<"footer">;
@@ -22,6 +24,8 @@ declare const Dialog: import("react").ForwardRefExoticComponent<Omit<NativePartP
     description?: string;
     footer?: ReactNode;
     placement?: "center" | "left" | "right";
+    initialFocus?: RefObject<HTMLElement | null>;
+    onOpenAutoFocus?: (event: Event) => void;
     panelProps?: NativePartProps<"div">;
     bodyProps?: NativePartProps<"div">;
     footerProps?: NativePartProps<"footer">;