entangle-ui 0.2.0 → 0.4.0

package/dist/esm/components/controls/NumberInput/useNumberInput.js

@@ -0,0 +1,324 @@
+"use client";
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { useKeyboardContext } from '../../../context/KeyboardContext.js';
+import { parseNumericInput, isExpression } from '../../../utils/mathExpression.js';
+
+/**
+ * Clamps a value between min and max bounds
+ */
+function clamp(value, min, max) {
+    let result = value;
+    if (min !== undefined && result < min)
+        result = min;
+    if (max !== undefined && result > max)
+        result = max;
+    return result;
+}
+/**
+ * Rounds a number to specified decimal places
+ */
+function roundToPrecision(value, precision) {
+    if (precision === undefined)
+        return value;
+    const factor = Math.pow(10, precision);
+    return Math.round(value * factor) / factor;
+}
+/**
+ * Default formatter for display values
+ */
+function defaultFormatValue(value, precision) {
+    if (precision !== undefined) {
+        return value.toFixed(precision);
+    }
+    // Remove trailing zeros and unnecessary decimal point
+    return value.toString();
+}
+/**
+ * Hook for managing NumberInput state and interactions.
+ *
+ * Provides Blender-like number input functionality including:
+ * - Drag to change values
+ * - Keyboard input with expression evaluation
+ * - Modifier key support (Ctrl, Shift)
+ * - Soft and hard limits
+ * - Precision control
+ *
+ * @param props Configuration options
+ * @returns Object with state and actions
+ */
+function useNumberInput({ value, onChange, min, max, softMin, softMax, step = 1, precisionStep, largeStep, precision, allowExpressions = true, disabled = false, dragSensitivity = 1, formatValue, parseValue, }) {
+    // Calculate default step sizes if not provided
+    const effectivePrecisionStep = precisionStep ?? step / 10;
+    const effectiveLargeStep = largeStep ?? step * 10;
+    // State
+    const [displayValue, setDisplayValue] = useState(() => formatValue ? formatValue(value) : defaultFormatValue(value, precision));
+    const [isEditing, setIsEditing] = useState(false);
+    const [isDragging, setIsDragging] = useState(false);
+    const [isHovered, setIsHovered] = useState(false);
+    const [isFocused, setIsFocused] = useState(false);
+    const [error, setError] = useState();
+    // Refs for drag state
+    const dragStartX = useRef(0);
+    const dragStartValue = useRef(0);
+    const accumulatedDelta = useRef(0);
+    // Keyboard state
+    const { modifiers } = useKeyboardContext();
+    // Update display value when external value changes (but not during editing)
+    useEffect(() => {
+        if (!isEditing && !isDragging) {
+            const formatted = formatValue
+                ? formatValue(value)
+                : defaultFormatValue(value, precision);
+            setDisplayValue(formatted);
+            setError(undefined);
+        }
+    }, [value, precision, isEditing, isDragging, formatValue]);
+    /**
+     * Gets the appropriate step size based on modifier keys
+     */
+    const getStepSize = useCallback(() => {
+        if (modifiers.shift)
+            return effectivePrecisionStep;
+        if (modifiers.control || modifiers.meta)
+            return effectiveLargeStep;
+        return step;
+    }, [
+        modifiers.shift,
+        modifiers.control,
+        modifiers.meta,
+        effectivePrecisionStep,
+        effectiveLargeStep,
+        step,
+    ]);
+    /**
+     * Applies a new value with proper bounds checking and rounding
+     */
+    const applyValue = useCallback((newValue, useSoftLimits = false) => {
+        if (disabled)
+            return;
+        // Apply rounding
+        const rounded = roundToPrecision(newValue, precision);
+        // Apply limits
+        const minLimit = useSoftLimits && softMin !== undefined ? softMin : min;
+        const maxLimit = useSoftLimits && softMax !== undefined ? softMax : max;
+        const clamped = clamp(rounded, minLimit, maxLimit);
+        if (clamped !== value) {
+            onChange(clamped);
+        }
+    }, [disabled, precision, min, max, softMin, softMax, value, onChange]);
+    /**
+     * Parses and applies text input value
+     */
+    const parseAndApplyInput = useCallback(() => {
+        try {
+            // Try custom parser first
+            if (parseValue) {
+                const parsed = parseValue(displayValue);
+                if (parsed !== null && !isNaN(parsed)) {
+                    applyValue(parsed);
+                    setError(undefined);
+                    return true;
+                }
+            }
+            // Try expression evaluation if allowed
+            if (allowExpressions) {
+                const result = parseNumericInput(displayValue);
+                if (result.success && result.value !== undefined) {
+                    applyValue(result.value);
+                    setError(undefined);
+                    return true;
+                }
+                else {
+                    setError(result.error ?? 'Invalid expression');
+                    return false;
+                }
+            }
+            // Fall back to simple number parsing
+            const numValue = parseFloat(displayValue);
+            if (!isNaN(numValue)) {
+                applyValue(numValue);
+                setError(undefined);
+                return true;
+            }
+            setError('Invalid number');
+            return false;
+        }
+        catch (err) {
+            setError('Invalid input');
+            console.error('Error parsing input:', err);
+            return false;
+        }
+    }, [displayValue, parseValue, allowExpressions, applyValue]);
+    // Actions
+    const increment = useCallback(() => {
+        if (disabled)
+            return;
+        const currentStep = getStepSize();
+        applyValue(value + currentStep);
+    }, [disabled, getStepSize, value, applyValue]);
+    const decrement = useCallback(() => {
+        if (disabled)
+            return;
+        const currentStep = getStepSize();
+        applyValue(value - currentStep);
+    }, [disabled, getStepSize, value, applyValue]);
+    const startDrag = useCallback((clientX) => {
+        if (disabled)
+            return;
+        setIsDragging(true);
+        dragStartX.current = clientX;
+        dragStartValue.current = value;
+        accumulatedDelta.current = 0;
+        document.body.style.cursor = 'ew-resize';
+    }, [disabled, value]);
+    const updateDrag = useCallback((clientX) => {
+        if (!isDragging || disabled)
+            return;
+        const deltaX = clientX - dragStartX.current;
+        const currentStep = getStepSize();
+        const sensitivity = dragSensitivity;
+        // Accumulate fractional changes for smooth dragging
+        const pixelsPerStep = 5; // Pixels needed to trigger one step
+        const totalDelta = (deltaX * sensitivity) / pixelsPerStep;
+        // Only update if we've moved enough for at least one step
+        const steps = Math.floor(totalDelta);
+        if (steps !== Math.floor(accumulatedDelta.current)) {
+            accumulatedDelta.current = totalDelta;
+            const newValue = dragStartValue.current + steps * currentStep;
+            // Use soft limits for dragging
+            applyValue(newValue, true);
+            // Update display to show current value
+            const formatted = formatValue
+                ? formatValue(newValue)
+                : defaultFormatValue(newValue, precision);
+            setDisplayValue(formatted);
+        }
+    }, [
+        isDragging,
+        disabled,
+        getStepSize,
+        dragSensitivity,
+        applyValue,
+        formatValue,
+        precision,
+    ]);
+    const endDrag = useCallback(() => {
+        setIsDragging(false);
+        document.body.style.cursor = '';
+        // Refresh display value to ensure it matches the current value
+        const formatted = formatValue
+            ? formatValue(value)
+            : defaultFormatValue(value, precision);
+        setDisplayValue(formatted);
+    }, [value, formatValue, precision]);
+    const startEditing = useCallback(() => {
+        if (disabled)
+            return;
+        setIsEditing(true);
+        setError(undefined);
+        // Select all text when starting to edit
+        setTimeout(() => {
+            const input = document.activeElement;
+            input?.select();
+        }, 0);
+    }, [disabled]);
+    const endEditing = useCallback(() => {
+        if (parseAndApplyInput()) {
+            setIsEditing(false);
+        }
+        // If parsing failed, stay in editing mode to show error
+    }, [parseAndApplyInput]);
+    const cancelEditing = useCallback(() => {
+        setIsEditing(false);
+        const formatted = formatValue
+            ? formatValue(value)
+            : defaultFormatValue(value, precision);
+        setDisplayValue(formatted);
+        setError(undefined);
+    }, [value, precision, formatValue]);
+    const updateDisplayValue = useCallback((newValue) => {
+        setDisplayValue(newValue);
+        // Clear error when user starts typing
+        if (error) {
+            setError(undefined);
+        }
+    }, [error]);
+    const handleKeyDown = useCallback((event) => {
+        if (disabled)
+            return;
+        switch (event.key) {
+            case 'Enter':
+                event.preventDefault();
+                if (isEditing) {
+                    endEditing();
+                }
+                else {
+                    startEditing();
+                }
+                break;
+            case 'Escape':
+                event.preventDefault();
+                if (isEditing) {
+                    cancelEditing();
+                }
+                break;
+            case 'ArrowUp':
+                if (!isEditing) {
+                    event.preventDefault();
+                    increment();
+                }
+                break;
+            case 'ArrowDown':
+                if (!isEditing) {
+                    event.preventDefault();
+                    decrement();
+                }
+                break;
+            case '-':
+                // Only negate when not editing and minus is pressed alone (not in the middle of text)
+                if (!isEditing) {
+                    event.preventDefault();
+                    applyValue(-value);
+                }
+                break;
+        }
+    }, [
+        disabled,
+        isEditing,
+        endEditing,
+        startEditing,
+        cancelEditing,
+        increment,
+        decrement,
+        value,
+        applyValue,
+    ]);
+    // Determine if current input looks like an expression
+    const isExpressionValue = allowExpressions && isExpression(displayValue);
+    return {
+        // State
+        displayValue,
+        isEditing,
+        isDragging,
+        isHovered,
+        isFocused,
+        error,
+        isExpression: isExpressionValue,
+        // Actions
+        increment,
+        decrement,
+        startDrag,
+        updateDrag,
+        endDrag,
+        startEditing,
+        endEditing,
+        cancelEditing,
+        updateDisplayValue,
+        setHovered: setIsHovered,
+        setFocused: setIsFocused,
+        handleKeyDown,
+    };
+}
+
+export { useNumberInput };
+//# sourceMappingURL=useNumberInput.js.map

package/dist/esm/components/controls/NumberInput/useNumberInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useNumberInput.js","sources":["../../../../../../src/components/controls/NumberInput/useNumberInput.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAwMA;;AAEG;AACH;;AAEE;;AACA;;AACA;AACF;AAEA;;AAEG;AACH;;AAC+B;;;AAG/B;AAEA;;AAEG;AACH;AACE;AACE;;;AAGF;AACF;AAEA;;;;;;;;;;;;AAYG;;;AAmBD;AACA;;AAGA;;;;;;;AAUA;AACA;AACA;;AAGA;;;AAIE;;AAEI;AACA;;;;AAIN;AAEA;;AAEG;AACH;;AACuB;AACrB;AAAyC;AACzC;AACF;AACE;AACA;AACA;;;;AAID;AAED;;AAEG;;AAGC;;;;;AAMA;AACA;;AAGA;;;AAGF;AAIF;;AAEG;AACH;AACE;;;AAGI;;;;AAIE;;;;;AAMF;;AAEE;;AAEA;;;AAEA;AACA;;;;AAKJ;AACA;;;AAGE;;;AAIF;;;;AAGA;AACA;;;;AAKJ;AACE;;AACA;AACA;;AAGF;AACE;;AACA;AACA;;AAGF;AAEI;;;AAEA;AACA;AACA;;AAEF;AAIF;;;AAII;AACA;;;AAIA;;;;;AAME;;;AAIA;;;AAIE;AACA;;;AAGN;;;;;;;;AASC;AAGH;;;;;AAKI;AACA;;;AAIJ;AACE;;;;;;AAKE;;;AAGJ;AAEA;;;;;AAKA;AAEA;;;AAGI;AACA;;;;AAKJ;;;;;;AAOE;AAIF;AAEI;;AAEA;AACE;;;AAGI;;;AAEA;;;AAIJ;;;AAGI;;;AAIJ;;;AAGI;;;AAIJ;;;AAGI;;;AAIJ;;;;AAII;;;;AAIR;;;;;;;;;;AAWC;;;;;;;;;;;AAcD;;;;;;;;;;;AAYA;AACA;;;AAGJ;;"}

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

@@ -0,0 +1,18 @@
+import './../../../assets/src/components/controls/Select/Select.css.ts.vanilla-D4C059Ua.css';
+import { c as createRuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js';
+
+var checkmarkStyle = 'Select_checkmarkStyle__ycpn7018';
+var chevronRecipe = createRuntimeFn({defaultClassName:'Select_chevronRecipe__ycpn70q',variantClassNames:{open:{true:'Select_chevronRecipe_open_true__ycpn70r',false:'Select_chevronRecipe_open_false__ycpn70s'}},defaultVariants:{open:false},compoundVariants:[]});
+var clearButtonStyle = 'Select_clearButtonStyle__ycpn70t';
+var dropdownStyle = 'Select_dropdownStyle__ycpn70v';
+var emptyMessageStyle = 'Select_emptyMessageStyle__ycpn7017';
+var groupLabelStyle = 'Select_groupLabelStyle__ycpn7016';
+var optionItemRecipe = createRuntimeFn({defaultClassName:'Select_optionItemRecipe__ycpn70y',variantClassNames:{highlighted:{true:'Select_optionItemRecipe_highlighted_true__ycpn70z',false:'Select_optionItemRecipe_highlighted_false__ycpn7010'},selected:{true:'Select_optionItemRecipe_selected_true__ycpn7011',false:'Select_optionItemRecipe_selected_false__ycpn7012'},disabled:{true:'Select_optionItemRecipe_disabled_true__ycpn7013',false:'Select_optionItemRecipe_disabled_false__ycpn7014'}},defaultVariants:{highlighted:false,selected:false,disabled:false},compoundVariants:[[{highlighted:true},'Select_optionItemRecipe_compound_0__ycpn7015']]});
+var optionsListStyle = 'Select_optionsListStyle__ycpn70x';
+var searchInputStyle = 'Select_searchInputStyle__ycpn70w';
+var selectContainerStyle = 'Select_selectContainerStyle__ycpn700';
+var triggerContentStyle = 'Select_triggerContentStyle__ycpn70p';
+var triggerRecipe = createRuntimeFn({defaultClassName:'Select_triggerRecipe__ycpn702',variantClassNames:{size:{sm:'Select_triggerRecipe_size_sm__ycpn703',md:'Select_triggerRecipe_size_md__ycpn704',lg:'Select_triggerRecipe_size_lg__ycpn705'},variant:{'default':'Select_triggerRecipe_variant_default__ycpn706',ghost:'Select_triggerRecipe_variant_ghost__ycpn707',filled:'Select_triggerRecipe_variant_filled__ycpn708'},disabled:{true:'Select_triggerRecipe_disabled_true__ycpn709',false:'Select_triggerRecipe_disabled_false__ycpn70a'},hasValue:{true:'Select_triggerRecipe_hasValue_true__ycpn70b',false:'Select_triggerRecipe_hasValue_false__ycpn70c'},open:{true:'Select_triggerRecipe_open_true__ycpn70d',false:'Select_triggerRecipe_open_false__ycpn70e'},error:{true:'Select_triggerRecipe_error_true__ycpn70f',false:'Select_triggerRecipe_error_false__ycpn70g'}},defaultVariants:{size:'md',variant:'default',disabled:false,hasValue:false,open:false,error:false},compoundVariants:[[{open:true},'Select_triggerRecipe_compound_0__ycpn70h'],[{error:true,variant:'default'},'Select_triggerRecipe_compound_1__ycpn70i'],[{error:true,variant:'filled'},'Select_triggerRecipe_compound_2__ycpn70j'],[{open:true,variant:'default'},'Select_triggerRecipe_compound_3__ycpn70k'],[{open:true,variant:'filled'},'Select_triggerRecipe_compound_4__ycpn70l'],[{hasValue:false,variant:'default'},'Select_triggerRecipe_compound_5__ycpn70m'],[{hasValue:false,variant:'ghost'},'Select_triggerRecipe_compound_6__ycpn70n'],[{hasValue:false,variant:'filled'},'Select_triggerRecipe_compound_7__ycpn70o']]});
+
+export { checkmarkStyle, chevronRecipe, clearButtonStyle, dropdownStyle, emptyMessageStyle, groupLabelStyle, optionItemRecipe, optionsListStyle, searchInputStyle, selectContainerStyle, triggerContentStyle, triggerRecipe };
+//# sourceMappingURL=Select.css.js.map

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

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

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

@@ -0,0 +1,327 @@
+"use client";
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useId, useRef, useState, useMemo, useCallback, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { FormLabel } from '../../form/FormLabel.js';
+import { FormHelperText } from '../../form/FormHelperText.js';
+import '../../form/InputWrapper.js';
+import { ScrollArea } from '../../layout/ScrollArea/ScrollArea.js';
+import { cx } from '../../../utils/cx.js';
+import { triggerContentStyle, clearButtonStyle, chevronRecipe, triggerRecipe, dropdownStyle, searchInputStyle, optionsListStyle, selectContainerStyle, emptyMessageStyle, groupLabelStyle, checkmarkStyle, optionItemRecipe } from './Select.css.js';
+
+// --- Helpers ---
+function isOptionGroup(item) {
+    return 'options' in item && Array.isArray(item.options);
+}
+function flattenOptions(items) {
+    const result = [];
+    for (const item of items) {
+        if (isOptionGroup(item)) {
+            result.push(...item.options);
+        }
+        else {
+            result.push(item);
+        }
+    }
+    return result;
+}
+function defaultFilter(option, query) {
+    const label = (option.label ?? option.value).toLowerCase();
+    return label.includes(query.toLowerCase());
+}
+// --- Size maps ---
+const CHEVRON_SIZES = {
+    sm: 10,
+    md: 12,
+    lg: 14,
+};
+// --- Chevron icon ---
+const ChevronDownIcon = ({ size }) => (jsx("svg", { width: size, height: size, viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: jsx("path", { d: "M3 4.5L6 7.5L9 4.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+// --- Component ---
+/**
+ * Select component for choosing single values from a dropdown list.
+ *
+ * Supports searchable mode, grouped options, keyboard navigation,
+ * clearable state, and multiple visual variants.
+ *
+ * @example
+ * ```tsx
+ * <Select
+ *   label="Blend Mode"
+ *   options={[
+ *     { value: 'normal', label: 'Normal' },
+ *     { value: 'multiply', label: 'Multiply' },
+ *     { value: 'screen', label: 'Screen' },
+ *   ]}
+ *   value={blendMode}
+ *   onChange={setBlendMode}
+ * />
+ * ```
+ */
+function Select({ value: valueProp, defaultValue, options, placeholder = 'Select...', searchable = false, searchPlaceholder = 'Search...', filterFn, emptyMessage = 'No results found', size = 'md', variant = 'default', label, helperText, error = false, errorMessage, disabled = false, required = false, clearable = false, maxDropdownHeight = 240, minDropdownWidth, name, onChange, onOpenChange, className, style, testId, ref, id: idProp, ...rest }) {
+    const autoId = useId();
+    const selectId = idProp ?? autoId;
+    const labelId = `${selectId}-label`;
+    const helperId = `${selectId}-helper`;
+    const listboxId = `${selectId}-listbox`;
+    const triggerRef = useRef(null);
+    const dropdownRef = useRef(null);
+    const searchRef = useRef(null);
+    const [isOpen, setIsOpen] = useState(false);
+    const [internalValue, setInternalValue] = useState(defaultValue ?? null);
+    const [searchQuery, setSearchQuery] = useState('');
+    const [highlightedIndex, setHighlightedIndex] = useState(-1);
+    const [dropdownStyleState, setDropdownStyleState] = useState({});
+    const isControlled = valueProp !== undefined;
+    const currentValue = isControlled ? valueProp : internalValue;
+    // Flatten all options for navigation
+    const allOptions = useMemo(() => flattenOptions(options), [options]);
+    // Filter options when searchable
+    const filter = filterFn ?? defaultFilter;
+    const filteredOptions = useMemo(() => {
+        if (!searchable || !searchQuery)
+            return allOptions;
+        return allOptions.filter(opt => filter(opt, searchQuery));
+    }, [allOptions, searchable, searchQuery, filter]);
+    // Find selected option
+    const selectedOption = useMemo(() => allOptions.find(o => o.value === currentValue) ?? null, [allOptions, currentValue]);
+    // Position dropdown
+    const updateDropdownPosition = useCallback(() => {
+        const trigger = triggerRef.current;
+        if (!trigger)
+            return;
+        const rect = trigger.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;
+        setDropdownStyleState({
+            left: rect.left,
+            width: dropdownW,
+            ...(openAbove
+                ? {
+                    bottom: window.innerHeight - rect.top + 4,
+                    transformOrigin: 'bottom',
+                }
+                : { top: rect.bottom + 4, transformOrigin: 'top' }),
+        });
+    }, [maxDropdownHeight, minDropdownWidth]);
+    const open = useCallback(() => {
+        if (disabled)
+            return;
+        setIsOpen(true);
+        setSearchQuery('');
+        setHighlightedIndex(-1);
+        onOpenChange?.(true);
+        // Position is calculated in useEffect after render
+    }, [disabled, onOpenChange]);
+    const close = useCallback(() => {
+        setIsOpen(false);
+        setSearchQuery('');
+        setHighlightedIndex(-1);
+        onOpenChange?.(false);
+        triggerRef.current?.focus();
+    }, [onOpenChange]);
+    const selectValue = useCallback((val) => {
+        if (!isControlled) {
+            setInternalValue(val);
+        }
+        onChange?.(val);
+        close();
+    }, [isControlled, onChange, close]);
+    // Update position when open
+    useEffect(() => {
+        if (isOpen) {
+            updateDropdownPosition();
+            if (searchable) {
+                // Focus search input after portal renders
+                requestAnimationFrame(() => {
+                    searchRef.current?.focus();
+                });
+            }
+        }
+    }, [isOpen, updateDropdownPosition, searchable]);
+    // Close on outside click
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleClick = (e) => {
+            const target = e.target;
+            if (!triggerRef.current?.contains(target) &&
+                !dropdownRef.current?.contains(target)) {
+                close();
+            }
+        };
+        document.addEventListener('mousedown', handleClick);
+        return () => document.removeEventListener('mousedown', handleClick);
+    }, [isOpen, close]);
+    // Get navigable options (non-disabled)
+    const navigableIndices = useMemo(() => filteredOptions
+        .map((opt, i) => (opt.disabled ? -1 : i))
+        .filter(i => i !== -1), [filteredOptions]);
+    const navigateHighlight = useCallback((direction) => {
+        if (navigableIndices.length === 0)
+            return;
+        let nextIndex;
+        const currentNavIdx = navigableIndices.indexOf(highlightedIndex);
+        switch (direction) {
+            case 'first':
+                nextIndex = navigableIndices[0] ?? 0;
+                break;
+            case 'last':
+                nextIndex = navigableIndices[navigableIndices.length - 1] ?? 0;
+                break;
+            case 'next':
+                if (currentNavIdx === -1 ||
+                    currentNavIdx >= navigableIndices.length - 1) {
+                    nextIndex = navigableIndices[0] ?? 0;
+                }
+                else {
+                    nextIndex = navigableIndices[currentNavIdx + 1] ?? 0;
+                }
+                break;
+            case 'prev':
+                if (currentNavIdx <= 0) {
+                    nextIndex = navigableIndices[navigableIndices.length - 1] ?? 0;
+                }
+                else {
+                    nextIndex = navigableIndices[currentNavIdx - 1] ?? 0;
+                }
+                break;
+        }
+        setHighlightedIndex(nextIndex);
+    }, [navigableIndices, highlightedIndex]);
+    // Keyboard handling for trigger
+    const handleTriggerKeyDown = useCallback((e) => {
+        if (disabled)
+            return;
+        switch (e.key) {
+            case 'Enter':
+            case ' ':
+            case 'ArrowDown':
+                e.preventDefault();
+                if (!isOpen) {
+                    open();
+                }
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                if (!isOpen) {
+                    open();
+                }
+                break;
+        }
+    }, [disabled, isOpen, open]);
+    // Keyboard handling for dropdown
+    const handleDropdownKeyDown = useCallback((e) => {
+        switch (e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                navigateHighlight('next');
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                navigateHighlight('prev');
+                break;
+            case 'Home':
+                e.preventDefault();
+                navigateHighlight('first');
+                break;
+            case 'End':
+                e.preventDefault();
+                navigateHighlight('last');
+                break;
+            case 'Enter':
+                e.preventDefault();
+                if (highlightedIndex >= 0 &&
+                    highlightedIndex < filteredOptions.length) {
+                    const opt = filteredOptions[highlightedIndex];
+                    if (opt && !opt.disabled) {
+                        selectValue(opt.value);
+                    }
+                }
+                break;
+            case 'Escape':
+                e.preventDefault();
+                close();
+                break;
+        }
+    }, [navigateHighlight, highlightedIndex, filteredOptions, selectValue, close]);
+    const handleClear = useCallback((e) => {
+        e.stopPropagation();
+        selectValue(null);
+    }, [selectValue]);
+    const showHelperText = error && errorMessage ? errorMessage : helperText;
+    const chevronSize = CHEVRON_SIZES[size];
+    // Assign ref
+    const setTriggerRef = useCallback((node) => {
+        triggerRef.current = node;
+        if (typeof ref === 'function') {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current =
+                node;
+        }
+    }, [ref]);
+    // Render options list
+    const renderOptions = () => {
+        if (filteredOptions.length === 0) {
+            return jsx("div", { className: emptyMessageStyle, children: emptyMessage });
+        }
+        // If options are grouped, render with group headers
+        const hasGroups = options.some(isOptionGroup);
+        if (hasGroups && !searchQuery) {
+            let flatIndex = 0;
+            return options.map((item, groupIdx) => {
+                if (isOptionGroup(item)) {
+                    const groupOptions = item.options;
+                    const startIdx = flatIndex;
+                    flatIndex += groupOptions.length;
+                    return (jsxs("div", { role: "group", "aria-label": item.label, children: [jsx("div", { className: groupLabelStyle, children: item.label }), groupOptions.map((opt, optIdx) => {
+                                const idx = startIdx + optIdx;
+                                return renderOptionItem(opt, idx);
+                            })] }, `group-${groupIdx}`));
+                }
+                const idx = flatIndex;
+                flatIndex += 1;
+                return renderOptionItem(item, idx);
+            });
+        }
+        return filteredOptions.map((opt, idx) => renderOptionItem(opt, idx));
+    };
+    const renderOptionItem = (opt, index) => {
+        const isSelected = opt.value === currentValue;
+        const isHighlighted = index === highlightedIndex;
+        return (jsxs("div", { role: "option", "aria-selected": isSelected, "aria-disabled": opt.disabled ?? undefined, className: optionItemRecipe({
+                highlighted: isHighlighted,
+                selected: isSelected,
+                disabled: opt.disabled ?? false,
+            }), onClick: () => {
+                if (!opt.disabled) {
+                    selectValue(opt.value);
+                }
+            }, onMouseEnter: () => {
+                if (!opt.disabled) {
+                    setHighlightedIndex(index);
+                }
+            }, children: [opt.icon && jsx("span", { children: opt.icon }), jsx("span", { children: opt.label ?? opt.value }), isSelected && (jsx("span", { className: checkmarkStyle, children: jsx("svg", { width: "10", height: "10", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: jsx("path", { d: "M2 6L5 9L10 3", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }))] }, opt.value));
+    };
+    return (jsxs("div", { className: cx(selectContainerStyle, className), style: style, children: [label && (jsx(FormLabel, { id: labelId, htmlFor: selectId, required: required, disabled: disabled, children: label })), jsxs("button", { ref: setTriggerRef, type: "button", role: "combobox", "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-controls": isOpen ? listboxId : undefined, "aria-labelledby": label ? labelId : undefined, "aria-required": required || undefined, "aria-invalid": error || undefined, "aria-describedby": showHelperText ? helperId : undefined, disabled: disabled, onClick: () => (isOpen ? close() : open()), onKeyDown: handleTriggerKeyDown, className: triggerRecipe({
+                    size,
+                    variant,
+                    open: isOpen,
+                    disabled,
+                    error,
+                    hasValue: currentValue !== null,
+                }), "data-testid": testId, ...rest, children: [jsx("span", { className: triggerContentStyle, children: selectedOption ? (jsxs(Fragment, { children: [selectedOption.icon && jsx("span", { children: selectedOption.icon }), jsx("span", { children: selectedOption.label ?? selectedOption.value })] })) : (jsx("span", { children: placeholder })) }), clearable && currentValue !== null && (jsx("span", { className: clearButtonStyle, role: "button", onClick: handleClear, "aria-label": "Clear selection", tabIndex: -1, children: jsx("svg", { width: "8", height: "8", viewBox: "0 0 8 8", fill: "none", "aria-hidden": "true", children: jsx("path", { d: "M1 1L7 7M7 1L1 7", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) })), jsx("span", { className: chevronRecipe({ open: isOpen }), children: jsx(ChevronDownIcon, { size: chevronSize }) })] }), name && jsx("input", { type: "hidden", name: name, value: currentValue ?? '' }), isOpen &&
+                createPortal(jsxs("div", { ref: dropdownRef, role: "listbox", id: listboxId, "aria-labelledby": label ? labelId : undefined, className: dropdownStyle, style: dropdownStyleState, onKeyDown: handleDropdownKeyDown, tabIndex: -1, children: [searchable && (jsx("input", { ref: searchRef, type: "text", placeholder: searchPlaceholder, value: searchQuery, onChange: e => {
+                                setSearchQuery(e.target.value);
+                                setHighlightedIndex(-1);
+                            }, onKeyDown: handleDropdownKeyDown, className: searchInputStyle, "aria-label": "Search options" })), jsx(ScrollArea, { className: optionsListStyle, maxHeight: maxDropdownHeight - (searchable ? 32 : 0), scrollbarWidth: 4, scrollbarVisibility: "auto", hideDelay: 600, children: renderOptions() })] }), document.body), showHelperText && (jsx(FormHelperText, { id: helperId, error: error, children: showHelperText }))] }));
+}
+Select.displayName = 'Select';
+
+export { Select };
+//# sourceMappingURL=Select.js.map