entangle-ui 0.8.1 → 0.9.0

package/dist/esm/components/Icons/MinusIcon.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { Icon } from '../primitives/Icon/Icon.js';
+
+/**
+ * Minus icon component for remove/decrement actions.
+ *
+ * A single horizontal stroke commonly used to remove items, decrement
+ * counters, and zoom out. Pairs with `AddIcon` for [+/-] controls.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <MinusIcon />
+ *
+ * // With custom size and color
+ * <MinusIcon size="sm" color="muted" />
+ *
+ * // In a counter control
+ * <IconButton icon={<MinusIcon />} label="Decrease" />
+ * ```
+ */
+const MinusIcon = /*#__PURE__*/ React.memo(props => {
+    return (jsx(Icon, { ...props, children: jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" }) }));
+});
+MinusIcon.displayName = 'MinusIcon';
+
+export { MinusIcon };
+//# sourceMappingURL=MinusIcon.js.map

package/dist/esm/components/Icons/MinusIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MinusIcon.js","sources":["../../../../../src/components/Icons/MinusIcon.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAMA;;;;;;;;;;;;;;;;;AAiBG;AACI;;AAOL;AAGF;;"}

package/dist/esm/components/Icons/PauseIcon.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { Icon } from '../primitives/Icon/Icon.js';
+
+/**
+ * Pause icon component for pausing playback and processes.
+ *
+ * Two parallel vertical bars commonly used to pause animations, video,
+ * preview playback, and long-running operations. Pairs with `PlayIcon`.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <PauseIcon />
+ *
+ * // With custom size and color
+ * <PauseIcon size="lg" color="primary" />
+ *
+ * // In a transport bar
+ * <IconButton icon={<PauseIcon />} label="Pause" />
+ * ```
+ */
+const PauseIcon = /*#__PURE__*/ React.memo(props => {
+    return (jsxs(Icon, { ...props, children: [jsx("rect", { x: "6", y: "4", width: "4", height: "16", rx: "1" }), jsx("rect", { x: "14", y: "4", width: "4", height: "16", rx: "1" })] }));
+});
+PauseIcon.displayName = 'PauseIcon';
+
+export { PauseIcon };
+//# sourceMappingURL=PauseIcon.js.map

package/dist/esm/components/Icons/PauseIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PauseIcon.js","sources":["../../../../../src/components/Icons/PauseIcon.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAMA;;;;;;;;;;;;;;;;;AAiBG;AACI;;AAQL;AAGF;;"}

package/dist/esm/components/Icons/PinIcon.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { Icon } from '../primitives/Icon/Icon.js';
+
+/**
+ * Pin icon component for pinning items to keep them visible.
+ *
+ * A push-pin silhouette commonly used to pin tabs, conversations,
+ * or list items so they stay in view. A filled visual variant could
+ * indicate the pinned state.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <PinIcon />
+ *
+ * // With custom size and color
+ * <PinIcon size="sm" color="accent" />
+ *
+ * // In a pin/unpin toggle
+ * <IconButton icon={<PinIcon />} label="Pin item" />
+ * ```
+ */
+const PinIcon = /*#__PURE__*/ React.memo(props => {
+    return (jsxs(Icon, { ...props, children: [jsx("line", { x1: "12", y1: "17", x2: "12", y2: "22" }), jsx("path", { d: "M5 17h14v-1.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V6h1a2 2 0 0 0 0-4H8a2 2 0 0 0 0 4h1v4.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24z" })] }));
+});
+PinIcon.displayName = 'PinIcon';
+
+export { PinIcon };
+//# sourceMappingURL=PinIcon.js.map

package/dist/esm/components/Icons/PinIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PinIcon.js","sources":["../../../../../src/components/Icons/PinIcon.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAMA;;;;;;;;;;;;;;;;;;AAkBG;AACI;AAEH;AAMF;AAGF;;"}

package/dist/esm/components/Icons/SendIcon.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { Icon } from '../primitives/Icon/Icon.js';
+
+/**
+ * Send icon component for submitting messages and forms.
+ *
+ * A paper plane silhouette commonly used as the trigger for
+ * sending chat messages, dispatching commands, and form submissions.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <SendIcon />
+ *
+ * // With custom size and color
+ * <SendIcon size="md" color="accent" />
+ *
+ * // In a chat input
+ * <IconButton icon={<SendIcon />} label="Send message" />
+ * ```
+ */
+const SendIcon = /*#__PURE__*/ React.memo(props => {
+    return (jsxs(Icon, { ...props, children: [jsx("line", { x1: "22", y1: "2", x2: "11", y2: "13" }), jsx("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })] }));
+});
+SendIcon.displayName = 'SendIcon';
+
+export { SendIcon };
+//# sourceMappingURL=SendIcon.js.map

package/dist/esm/components/Icons/SendIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SendIcon.js","sources":["../../../../../src/components/Icons/SendIcon.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAMA;;;;;;;;;;;;;;;;;AAiBG;AACI;AAEH;AAMF;AAGF;;"}

package/dist/esm/components/Icons/StopIcon.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { Icon } from '../primitives/Icon/Icon.js';
+
+/**
+ * Stop icon component for halting playback and streams.
+ *
+ * A solid square commonly used to stop transport playback, abort
+ * generations, and cancel long-running streaming operations.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <StopIcon />
+ *
+ * // With custom size and color
+ * <StopIcon size="md" color="error" />
+ *
+ * // In a stop streaming button
+ * <IconButton icon={<StopIcon />} label="Stop" />
+ * ```
+ */
+const StopIcon = /*#__PURE__*/ React.memo(props => {
+    return (jsx(Icon, { ...props, children: jsx("rect", { x: "5", y: "5", width: "14", height: "14", rx: "1" }) }));
+});
+StopIcon.displayName = 'StopIcon';
+
+export { StopIcon };
+//# sourceMappingURL=StopIcon.js.map

package/dist/esm/components/Icons/StopIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StopIcon.js","sources":["../../../../../src/components/Icons/StopIcon.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAMA;;;;;;;;;;;;;;;;;AAiBG;AACI;AAEH;AAKF;AAGF;;"}

package/dist/esm/components/Icons/TerminalIcon.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { Icon } from '../primitives/Icon/Icon.js';
+
+/**
+ * Terminal icon component for shells, command palettes, and CLI panels.
+ *
+ * A prompt caret with an underscore line, commonly used for terminal
+ * panels, command palette triggers, and shell-related actions.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <TerminalIcon />
+ *
+ * // With custom size and color
+ * <TerminalIcon size="md" color="secondary" />
+ *
+ * // In a command palette trigger
+ * <IconButton icon={<TerminalIcon />} label="Open terminal" />
+ * ```
+ */
+const TerminalIcon = /*#__PURE__*/ React.memo(props => {
+    return (jsxs(Icon, { ...props, children: [jsx("polyline", { points: "4 17 10 11 4 5" }), jsx("line", { x1: "12", y1: "19", x2: "20", y2: "19" })] }));
+});
+TerminalIcon.displayName = 'TerminalIcon';
+
+export { TerminalIcon };
+//# sourceMappingURL=TerminalIcon.js.map

package/dist/esm/components/Icons/TerminalIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TerminalIcon.js","sources":["../../../../../src/components/Icons/TerminalIcon.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAMA;;;;;;;;;;;;;;;;;AAiBG;AACI;AAGL;AAMF;AAEA;;"}

package/dist/esm/components/Icons/UnlinkIcon.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { Icon } from '../primitives/Icon/Icon.js';
+
+/**
+ * Unlink icon — a broken chain.
+ *
+ * Indicates that two values are decoupled (no longer linked). Pair with
+ * `LinkIcon` to render a toggle: link → unlink. Common in coordinate
+ * inputs, transform locks, color-channel groups.
+ *
+ * @example
+ * ```tsx
+ * <IconButton aria-label="Unlink axes">
+ *   <UnlinkIcon />
+ * </IconButton>
+ * ```
+ */
+const UnlinkIcon = /*#__PURE__*/ React.memo(props => {
+    return (jsxs(Icon, { ...props, children: [jsx("path", { d: "M9 17H7A5 5 0 0 1 7 7h2" }), jsx("path", { d: "M15 7h2a5 5 0 0 1 0 10h-2" }), jsx("line", { x1: "3", y1: "3", x2: "21", y2: "21" })] }));
+});
+UnlinkIcon.displayName = 'UnlinkIcon';
+
+export { UnlinkIcon };
+//# sourceMappingURL=UnlinkIcon.js.map

package/dist/esm/components/Icons/UnlinkIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UnlinkIcon.js","sources":["../../../../../src/components/Icons/UnlinkIcon.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAMA;;;;;;;;;;;;;AAaG;AACI;AAEH;AAOF;AAGF;;"}

package/dist/esm/components/Icons/UsersIcon.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { Icon } from '../primitives/Icon/Icon.js';
+
+/**
+ * Users icon component for groups, teams, and multi-user contexts.
+ *
+ * Two overlapping user silhouettes commonly used for team membership,
+ * shared resources, and group-level actions. Pairs with `UserIcon` for
+ * single-user contexts.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <UsersIcon />
+ *
+ * // With custom size and color
+ * <UsersIcon size="md" color="secondary" />
+ *
+ * // In a team selector
+ * <Button icon={<UsersIcon />}>Team</Button>
+ * ```
+ */
+const UsersIcon = /*#__PURE__*/ React.memo(props => {
+    return (jsxs(Icon, { ...props, children: [jsx("path", { d: "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" }), jsx("circle", { cx: "9", cy: "7", r: "4" }), jsx("path", { d: "M22 21v-2a4 4 0 0 0-3-3.87" }), jsx("path", { d: "M16 3.13a4 4 0 0 1 0 7.75" })] }));
+});
+UsersIcon.displayName = 'UsersIcon';
+
+export { UsersIcon };
+//# sourceMappingURL=UsersIcon.js.map

package/dist/esm/components/Icons/UsersIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UsersIcon.js","sources":["../../../../../src/components/Icons/UsersIcon.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAMA;;;;;;;;;;;;;;;;;;AAkBG;AACI;AAEH;AAQF;AAGF;;"}

package/dist/esm/components/controls/Combobox/Combobox.css.js

@@ -0,0 +1,20 @@
+import './../../../assets/src/components/controls/Combobox/Combobox.css.ts.vanilla-B7B5ttkq.css';
+import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+
+var checkmarkStyle = 'Combobox_checkmarkStyle__1pazsaxx';
+var chevronButtonStyle = 'Combobox_chevronButtonStyle__1pazsaxg';
+var chevronIconRecipe = createRuntimeFn({defaultClassName:'Combobox_chevronIconRecipe__1pazsaxh',variantClassNames:{open:{true:'Combobox_chevronIconRecipe_open_true__1pazsaxi',false:'Combobox_chevronIconRecipe_open_false__1pazsaxj'}},defaultVariants:{open:false},compoundVariants:[]});
+var clearButtonStyle = 'Combobox_clearButtonStyle__1pazsaxf';
+var containerStyle = 'Combobox_containerStyle__1pazsax0';
+var createRowStyle = 'Combobox_createRowStyle__1pazsaxy';
+var dropdownStyle = 'Combobox_dropdownStyle__1pazsaxl';
+var emptyMessageStyle = 'Combobox_emptyMessageStyle__1pazsaxw';
+var inputStyle = 'Combobox_inputStyle__1pazsaxe';
+var inputWrapperRecipe = createRuntimeFn({defaultClassName:'Combobox_inputWrapperRecipe__1pazsax1',variantClassNames:{size:{sm:'Combobox_inputWrapperRecipe_size_sm__1pazsax2',md:'Combobox_inputWrapperRecipe_size_md__1pazsax3',lg:'Combobox_inputWrapperRecipe_size_lg__1pazsax4'},variant:{'default':'Combobox_inputWrapperRecipe_variant_default__1pazsax5',ghost:'Combobox_inputWrapperRecipe_variant_ghost__1pazsax6',filled:'Combobox_inputWrapperRecipe_variant_filled__1pazsax7'},focused:{true:'Combobox_inputWrapperRecipe_focused_true__1pazsax8',false:'Combobox_inputWrapperRecipe_focused_false__1pazsax9'},error:{true:'Combobox_inputWrapperRecipe_error_true__1pazsaxa',false:'Combobox_inputWrapperRecipe_error_false__1pazsaxb'},disabled:{true:'Combobox_inputWrapperRecipe_disabled_true__1pazsaxc',false:'Combobox_inputWrapperRecipe_disabled_false__1pazsaxd'}},defaultVariants:{size:'md',variant:'default',focused:false,error:false,disabled:false},compoundVariants:[]});
+var optionDescriptionStyle = 'Combobox_optionDescriptionStyle__1pazsaxv';
+var optionItemRecipe = createRuntimeFn({defaultClassName:'Combobox_optionItemRecipe__1pazsaxn',variantClassNames:{active:{true:'Combobox_optionItemRecipe_active_true__1pazsaxo',false:'Combobox_optionItemRecipe_active_false__1pazsaxp'},selected:{true:'Combobox_optionItemRecipe_selected_true__1pazsaxq',false:'Combobox_optionItemRecipe_selected_false__1pazsaxr'},disabled:{true:'Combobox_optionItemRecipe_disabled_true__1pazsaxs',false:'Combobox_optionItemRecipe_disabled_false__1pazsaxt'}},defaultVariants:{active:false,selected:false,disabled:false},compoundVariants:[]});
+var optionLabelStyle = 'Combobox_optionLabelStyle__1pazsaxu';
+var optionsListStyle = 'Combobox_optionsListStyle__1pazsaxm';
+
+export { checkmarkStyle, chevronButtonStyle, chevronIconRecipe, clearButtonStyle, containerStyle, createRowStyle, dropdownStyle, emptyMessageStyle, inputStyle, inputWrapperRecipe, optionDescriptionStyle, optionItemRecipe, optionLabelStyle, optionsListStyle };
+//# sourceMappingURL=Combobox.css.js.map

package/dist/esm/components/controls/Combobox/Combobox.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Combobox.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/components/controls/Combobox/Combobox.js

@@ -0,0 +1,354 @@
+"use client";
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useId, useRef, useCallback, useState, useEffect, useMemo } from 'react';
+import { createPortal } from 'react-dom';
+import { CheckIcon } from '../../Icons/CheckIcon.js';
+import { ChevronDownIcon } from '../../Icons/ChevronDownIcon.js';
+import { CloseIcon } from '../../Icons/CloseIcon.js';
+import { fuzzyScore } from '../../feedback/CommandPalette/fuzzySearch.js';
+import { FormHelperText } from '../../form/FormHelperText.js';
+import { FormLabel } from '../../form/FormLabel.js';
+import { ScrollArea } from '../../layout/ScrollArea/ScrollArea.js';
+import { Spinner } from '../../feedback/Spinner/Spinner.js';
+import { useControlledState } from '../../../hooks/useControlledState/useControlledState.js';
+import { useListboxNav } from '../../../hooks/useListboxNav/useListboxNav.js';
+import { useMergedRef } from '../../../hooks/useMergedRef/useMergedRef.js';
+import { cx } from '../../../utils/cx.js';
+import { inputStyle, clearButtonStyle, chevronButtonStyle, chevronIconRecipe, inputWrapperRecipe, dropdownStyle, optionsListStyle, containerStyle, emptyMessageStyle, optionLabelStyle, optionDescriptionStyle, checkmarkStyle, createRowStyle, optionItemRecipe } from './Combobox.css.js';
+
+const CHEVRON_SIZES = {
+    sm: 10,
+    md: 12,
+    lg: 14,
+};
+const CREATE_ROW_VALUE = '__combobox_create__';
+function defaultFilter(option, query) {
+    const haystack = `${option.label ?? option.value} ${option.description ?? ''}`;
+    return fuzzyScore(query, haystack);
+}
+function applyFilter(options, query, custom) {
+    if (!query)
+        return options;
+    const scored = [];
+    for (const option of options) {
+        let score;
+        if (custom) {
+            const result = custom(option, query);
+            if (typeof result === 'boolean') {
+                score = result ? 1 : 0;
+            }
+            else {
+                score = result;
+            }
+        }
+        else {
+            score = defaultFilter(option, query);
+        }
+        if (score > 0)
+            scored.push({ option, score });
+    }
+    scored.sort((a, b) => b.score - a.score);
+    return scored.map(entry => entry.option);
+}
+/**
+ * Single-value select with an editable input. Filters the option list as the
+ * user types (built-in fuzzy matcher, configurable via `filterFn`), supports
+ * controlled and uncontrolled modes, optional `freeSolo` typing, optional
+ * `creatable` mode for adding new entries, and an `loading` state for async
+ * data sources.
+ *
+ * @example
+ * ```tsx
+ * <Combobox
+ *   label="Framework"
+ *   options={[
+ *     { value: 'react', label: 'React' },
+ *     { value: 'vue', label: 'Vue' },
+ *   ]}
+ *   value={framework}
+ *   onChange={setFramework}
+ * />
+ * ```
+ */
+function Combobox({ value, defaultValue, options, placeholder, filterFn, emptyMessage = 'No results found', loading = false, loadingMessage = 'Loading...', freeSolo = false, creatable = false, createLabel, openOnFocus = false, size = 'md', variant = 'default', label, helperText, error = false, errorMessage, disabled = false, required = false, readOnly = false, clearable = false, maxDropdownHeight = 240, minDropdownWidth, name, onChange, onInputChange, onCreate, onOpenChange, className, style, testId, ref, id: idProp, ...rest }) {
+    const autoId = useId();
+    const fieldId = idProp ?? autoId;
+    const labelId = `${fieldId}-label`;
+    const helperId = `${fieldId}-helper`;
+    const listboxId = `${fieldId}-listbox`;
+    const inputRef = useRef(null);
+    const wrapperRef = useRef(null);
+    const dropdownRef = useRef(null);
+    const setInputRef = useMergedRef(inputRef, ref);
+    const [selected, setSelected] = useControlledState({
+        value,
+        defaultValue,
+        onChange,
+        fallback: null,
+    });
+    const labelOf = useCallback((val) => {
+        if (val === null)
+            return '';
+        const found = options.find(o => o.value === val);
+        return found?.label ?? String(val);
+    }, [options]);
+    const [query, setQuery] = useState(() => labelOf(selected));
+    const [isOpen, setIsOpen] = useState(false);
+    const [focused, setFocused] = useState(false);
+    const [dropdownPos, setDropdownPos] = useState({});
+    const isEditingRef = useRef(false);
+    // Sync the query with the selected label when it changes externally and the
+    // user is not actively typing.
+    useEffect(() => {
+        if (!isEditingRef.current) {
+            setQuery(labelOf(selected));
+        }
+    }, [labelOf, selected]);
+    const effectiveCreatable = creatable;
+    const effectiveFreeSolo = freeSolo || creatable;
+    const filteredOptions = useMemo(() => applyFilter(options, 
+    // When the user hasn't typed yet (query equals the selected label) we
+    // show the full list so the dropdown serves as a browseable menu.
+    isEditingRef.current ? query : '', filterFn), [filterFn, options, query]);
+    const hasExactMatch = useMemo(() => {
+        if (!query)
+            return false;
+        const q = query.toLowerCase();
+        return options.some(o => (o.label ?? o.value).toLowerCase() === q);
+    }, [options, query]);
+    const showCreateRow = effectiveCreatable && query.length > 0 && !hasExactMatch && !loading;
+    // The list passed to useListboxNav. The "create" row is appended at the
+    // end as a synthetic option so the same navigation works.
+    const navItems = useMemo(() => {
+        const list = [...filteredOptions];
+        if (showCreateRow) {
+            list.push({
+                value: CREATE_ROW_VALUE,
+                label: query,
+            });
+        }
+        return list;
+    }, [filteredOptions, query, showCreateRow]);
+    const open = useCallback(() => {
+        if (disabled || readOnly)
+            return;
+        if (isOpen)
+            return;
+        setIsOpen(true);
+        onOpenChange?.(true);
+    }, [disabled, readOnly, isOpen, onOpenChange]);
+    const close = useCallback(() => {
+        if (!isOpen)
+            return;
+        setIsOpen(false);
+        onOpenChange?.(false);
+    }, [isOpen, onOpenChange]);
+    const commitOption = useCallback((opt) => {
+        if (opt.disabled)
+            return;
+        if (opt.value === CREATE_ROW_VALUE) {
+            const created = query;
+            if (onCreate)
+                onCreate(created);
+            else
+                setSelected(created);
+        }
+        else {
+            setSelected(opt.value);
+        }
+        isEditingRef.current = false;
+        setQuery(opt.value === CREATE_ROW_VALUE
+            ? query
+            : (opt.label ?? String(opt.value)));
+        close();
+    }, [close, onCreate, query, setSelected]);
+    const listbox = useListboxNav({
+        items: navItems,
+        isItemDisabled: opt => Boolean(opt.disabled),
+        onSelect: commitOption,
+        onEscape: close,
+    });
+    const updateDropdownPosition = useCallback(() => {
+        const wrapper = wrapperRef.current;
+        if (!wrapper)
+            return;
+        const rect = wrapper.getBoundingClientRect();
+        const spaceBelow = window.innerHeight - rect.bottom;
+        const openAbove = spaceBelow < maxDropdownHeight + 8 && rect.top > spaceBelow;
+        const dropdownW = minDropdownWidth !== undefined
+            ? Math.max(rect.width, minDropdownWidth)
+            : rect.width;
+        setDropdownPos({
+            left: rect.left,
+            width: dropdownW,
+            ...(openAbove
+                ? {
+                    bottom: window.innerHeight - rect.top + 4,
+                    transformOrigin: 'bottom',
+                }
+                : { top: rect.bottom + 4, transformOrigin: 'top' }),
+        });
+    }, [maxDropdownHeight, minDropdownWidth]);
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        updateDropdownPosition();
+    }, [isOpen, updateDropdownPosition]);
+    // Outside click
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleClick = (e) => {
+            const target = e.target;
+            if (!wrapperRef.current?.contains(target) &&
+                !dropdownRef.current?.contains(target)) {
+                close();
+            }
+        };
+        document.addEventListener('mousedown', handleClick);
+        return () => {
+            document.removeEventListener('mousedown', handleClick);
+        };
+    }, [close, isOpen]);
+    const handleInputChange = useCallback((event) => {
+        const next = event.target.value;
+        isEditingRef.current = true;
+        setQuery(next);
+        onInputChange?.(next);
+        if (!isOpen)
+            open();
+        // Clearing the input clears the selection.
+        if (next === '' && selected !== null) {
+            setSelected(null);
+        }
+    }, [isOpen, onInputChange, open, selected, setSelected]);
+    const handleInputKeyDown = useCallback((event) => {
+        if (disabled || readOnly)
+            return;
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            if (!isOpen) {
+                event.preventDefault();
+                open();
+                return;
+            }
+        }
+        if (event.key === 'Enter') {
+            // freeSolo / creatable take precedence when no suggestion is active.
+            if (effectiveFreeSolo && listbox.activeIndex < 0 && query.length > 0) {
+                event.preventDefault();
+                if (effectiveCreatable && !hasExactMatch) {
+                    if (onCreate)
+                        onCreate(query);
+                    else
+                        setSelected(query);
+                }
+                else {
+                    setSelected(query);
+                }
+                isEditingRef.current = false;
+                close();
+                return;
+            }
+        }
+        if (event.key === 'Tab' && isOpen) {
+            // Commit the active suggestion if any, otherwise close.
+            if (listbox.activeIndex >= 0) {
+                listbox.selectActive();
+            }
+            else {
+                close();
+            }
+            return;
+        }
+        listbox.handleKeyDown(event);
+    }, [
+        close,
+        disabled,
+        effectiveCreatable,
+        effectiveFreeSolo,
+        hasExactMatch,
+        isOpen,
+        listbox,
+        onCreate,
+        open,
+        query,
+        readOnly,
+        setSelected,
+    ]);
+    const handleFocus = useCallback(() => {
+        setFocused(true);
+        if (openOnFocus)
+            open();
+    }, [open, openOnFocus]);
+    const handleBlur = useCallback(() => {
+        setFocused(false);
+        isEditingRef.current = false;
+        // Restore the last selected label unless freeSolo allowed the typed value.
+        if (!effectiveFreeSolo) {
+            setQuery(labelOf(selected));
+        }
+    }, [effectiveFreeSolo, labelOf, selected]);
+    const handleClear = useCallback((event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        setSelected(null);
+        setQuery('');
+        isEditingRef.current = false;
+        inputRef.current?.focus();
+    }, [setSelected]);
+    const handleToggleClick = useCallback(() => {
+        if (disabled || readOnly)
+            return;
+        if (isOpen)
+            close();
+        else
+            open();
+        inputRef.current?.focus();
+    }, [close, disabled, isOpen, open, readOnly]);
+    const showHelperText = error && errorMessage ? errorMessage : helperText;
+    const chevronSize = CHEVRON_SIZES[size];
+    const renderOptions = () => {
+        if (loading) {
+            return (jsxs("div", { className: emptyMessageStyle, children: [jsx(Spinner, { size: "xs" }), " ", loadingMessage] }));
+        }
+        if (navItems.length === 0) {
+            return jsx("div", { className: emptyMessageStyle, children: emptyMessage });
+        }
+        return navItems.map((opt, idx) => {
+            const isCreate = opt.value === CREATE_ROW_VALUE;
+            const isSelected = !isCreate && opt.value === selected;
+            const isActive = idx === listbox.activeIndex;
+            const isDisabled = opt.disabled ?? false;
+            return (jsxs("div", { role: "option", "aria-selected": isSelected, "aria-disabled": isDisabled || undefined, id: `${listboxId}-${String(idx)}`, className: cx(optionItemRecipe({
+                    active: isActive,
+                    selected: isSelected,
+                    disabled: isDisabled,
+                }), isCreate && createRowStyle), onClick: () => {
+                    commitOption(opt);
+                }, onMouseEnter: () => {
+                    if (!isDisabled)
+                        listbox.setActiveIndex(idx);
+                }, children: [opt.icon && jsx("span", { children: opt.icon }), jsx("span", { className: optionLabelStyle, children: isCreate
+                            ? (createLabel?.(query) ?? jsxs(Fragment, { children: ["Create \"", query, "\""] }))
+                            : (opt.label ?? opt.value) }), opt.description && !isCreate && (jsx("span", { className: optionDescriptionStyle, children: opt.description })), isSelected && (jsx("span", { className: checkmarkStyle, children: jsx(CheckIcon, { size: 10, decorative: true }) }))] }, isCreate ? `create-${query}` : `${opt.value}-${String(idx)}`));
+        });
+    };
+    const formValue = selected ?? '';
+    const displayValue = focused || isOpen ? query : labelOf(selected);
+    return (jsxs("div", { className: cx(containerStyle, className), style: style, children: [label && (jsx(FormLabel, { id: labelId, htmlFor: fieldId, required: required, disabled: disabled, children: label })), jsxs("div", { ref: wrapperRef, className: inputWrapperRecipe({
+                    size,
+                    variant,
+                    focused,
+                    error,
+                    disabled,
+                }), children: [jsx("input", { ref: setInputRef, id: fieldId, type: "text", role: "combobox", "aria-expanded": isOpen, "aria-controls": isOpen ? listboxId : undefined, "aria-autocomplete": "list", "aria-activedescendant": isOpen && listbox.activeIndex >= 0
+                            ? `${listboxId}-${String(listbox.activeIndex)}`
+                            : undefined, "aria-labelledby": label ? labelId : undefined, "aria-required": required || undefined, "aria-invalid": error || undefined, "aria-describedby": showHelperText ? helperId : undefined, autoComplete: "off", spellCheck: false, disabled: disabled, readOnly: readOnly, required: required, placeholder: placeholder, value: displayValue, className: inputStyle, onChange: handleInputChange, onKeyDown: handleInputKeyDown, onFocus: handleFocus, onBlur: handleBlur, "data-testid": testId, ...rest }), clearable && selected !== null && !disabled && !readOnly && (jsx("button", { type: "button", tabIndex: -1, "aria-label": "Clear selection", className: clearButtonStyle, onMouseDown: handleClear, children: jsx(CloseIcon, { size: "sm", decorative: true }) })), jsx("button", { type: "button", tabIndex: -1, "aria-label": isOpen ? 'Close suggestions' : 'Open suggestions', className: chevronButtonStyle, onMouseDown: e => {
+                            e.preventDefault();
+                        }, onClick: handleToggleClick, disabled: disabled, children: jsx("span", { className: chevronIconRecipe({ open: isOpen }), children: jsx(ChevronDownIcon, { size: chevronSize, decorative: true }) }) })] }), name && jsx("input", { type: "hidden", name: name, value: formValue }), isOpen &&
+                createPortal(jsx("div", { ref: dropdownRef, role: "listbox", id: listboxId, "aria-labelledby": label ? labelId : undefined, className: dropdownStyle, style: dropdownPos, tabIndex: -1, children: jsx(ScrollArea, { className: optionsListStyle, maxHeight: maxDropdownHeight, scrollbarWidth: 4, scrollbarVisibility: "auto", hideDelay: 600, children: renderOptions() }) }), document.body), showHelperText && (jsx(FormHelperText, { id: helperId, error: error, children: showHelperText }))] }));
+}
+Combobox.displayName = 'Combobox';
+
+export { Combobox };
+//# sourceMappingURL=Combobox.js.map

package/dist/esm/components/controls/Combobox/Combobox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Combobox.js","sources":["../../../../../../src/components/controls/Combobox/Combobox.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AA6CA;AACE;AACA;AACA;;AAGF;AAOA;AAIE;AACA;AACF;AAEA;AAKE;AAAY;;AAGZ;AACE;;;AAGE;;;;;;;;AAMA;;;;;AAIJ;AACA;AACF;AAEA;;;;;;;;;;;;;;;;;;;AAmBG;AACG;AAqCJ;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;;AAIA;;;;AAIE;AACD;AAED;;AAEsB;AAClB;;AAEF;AAIF;;;;AAIA;;;;AAKE;AACE;;AAEJ;;AAGA;;;;;AAcA;AACE;AAAY;AACZ;;AAEF;AAEA;;;AAKA;AACE;;;AAGI;AACA;AACD;;AAEH;;AAGF;;;AAEE;;;AAEA;;AAGF;AACE;;;AAEA;AACF;AAEA;;;AAGI;;AAEE;;;;;;AAGA;;AAEF;AACA;AAEI;AACA;AAEJ;;;AAMF;;AAEA;AACA;AACD;AAED;AACE;AACA;;AACA;;AAEA;AAGA;;AAGI;AAEJ;;AAEE;AACA;AACE;;AAEI;AACD;AACH;AACH;AACH;;AAGE;;AACA;AACF;;;AAIE;;AACA;AACE;;;AAKE;;AAEJ;AACA;AACA;AACE;AACF;AACF;AAEA;AAEI;AACA;;AAEA;AACA;AAAa;;;;;AAKf;AAIF;;;AAII;;;AAGI;;;;AAKJ;;AAEE;;AAEE;AACE;;;;;;;;AAKF;AACA;;;;;;AAOF;;;;AAGE;;;;AAKJ;AACF;;;;;;;;;;;;;AAcC;AAGH;;AAEE;AAAiB;AACnB;AAEA;;AAEE;;;AAGE;;;AAIJ;;;;;AAMI;AACA;AACF;AAIF;;;AAEE;AAAY;;AACP;AACL;AACF;AAEA;AACA;;;AAII;;AAMF;AACE;;;AAGA;;AAEA;AACA;AACA;AASQ;AACA;AACA;;;AAMJ;AAEE;AAAiB;AACnB;;AAMI;AAYV;AACF;AAEA;AACA;;;;;;;AAuBO;;AAaK;;;AAsDN;AA8BR;AAEA;;"}