entangle-ui 0.8.2 → 0.10.0

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

@@ -0,0 +1,300 @@
+"use client";
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useId, useRef, useState, useMemo, useDeferredValue, useCallback, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { FormHelperText } from '../../form/FormHelperText.js';
+import { FormLabel } from '../../form/FormLabel.js';
+import { CheckIcon } from '../../Icons/CheckIcon.js';
+import { ChevronDownIcon } from '../../Icons/ChevronDownIcon.js';
+import { CloseIcon } from '../../Icons/CloseIcon.js';
+import { ScrollArea } from '../../layout/ScrollArea/ScrollArea.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 { triggerContentStyle, placeholderStyle, chipLabelStyle, chipRemoveStyle, chipRecipe, moreBadgeStyle, clearButtonStyle, chevronRecipe, triggerRecipe, dropdownStyle, searchInputStyle, optionsListStyle, containerStyle, emptyMessageStyle, groupLabelStyle, checkboxRecipe, optionItemRecipe } from './MultiSelect.css.js';
+
+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());
+}
+const CHEVRON_SIZES = {
+    sm: 10,
+    md: 12,
+    lg: 14,
+};
+/**
+ * Multi-value select that lets the user pick several options from a dropdown.
+ * Selected values are rendered as inline chips inside the trigger; the rest
+ * collapse into a "+N more" badge.
+ *
+ * Supports searchable mode, grouped options, controlled and uncontrolled
+ * modes, keyboard navigation, an optional `max` cap, and a clear-all button.
+ *
+ * @example
+ * ```tsx
+ * <MultiSelect
+ *   label="Tags"
+ *   options={[
+ *     { value: 'react', label: 'React' },
+ *     { value: 'vue', label: 'Vue' },
+ *     { value: 'svelte', label: 'Svelte' },
+ *   ]}
+ *   value={tags}
+ *   onChange={setTags}
+ * />
+ * ```
+ */
+function MultiSelect({ value, defaultValue, options, placeholder = 'Select...', searchable = false, searchPlaceholder = 'Search...', filterFn, emptyMessage = 'No results found', max, maxInlineChips = 3, size = 'md', variant = 'default', label, helperText, error = false, errorMessage, disabled = false, required = false, clearable = false, maxDropdownHeight = 240, minDropdownWidth, closeOnSelect = false, name, onChange, 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 triggerRef = useRef(null);
+    const dropdownRef = useRef(null);
+    const searchRef = useRef(null);
+    const setTriggerRef = useMergedRef(triggerRef, ref);
+    const [selected, setSelected] = useControlledState({
+        value,
+        defaultValue,
+        onChange,
+        fallback: [],
+    });
+    const [isOpen, setIsOpen] = useState(false);
+    const [searchQuery, setSearchQuery] = useState('');
+    const [dropdownPos, setDropdownPos] = useState({});
+    const allOptions = useMemo(() => flattenOptions(options), [options]);
+    // Defer the query that drives filtering so the search input stays
+    // responsive while a large option list re-filters. The immediate
+    // `searchQuery` still drives the input value.
+    const deferredSearchQuery = useDeferredValue(searchQuery);
+    const filter = filterFn ?? defaultFilter;
+    const filteredOptions = useMemo(() => {
+        if (!searchable || !deferredSearchQuery)
+            return allOptions;
+        return allOptions.filter(opt => filter(opt, deferredSearchQuery));
+    }, [allOptions, searchable, deferredSearchQuery, filter]);
+    const selectedSet = useMemo(() => new Set(selected), [selected]);
+    const toggleValue = useCallback((val, isDisabled) => {
+        if (isDisabled)
+            return;
+        const isSelected = selectedSet.has(val);
+        if (isSelected) {
+            setSelected(selected.filter(v => v !== val));
+        }
+        else {
+            if (typeof max === 'number' && selected.length >= max)
+                return;
+            setSelected([...selected, val]);
+        }
+    }, [max, selected, selectedSet, setSelected]);
+    const open = useCallback(() => {
+        if (disabled)
+            return;
+        setIsOpen(true);
+        setSearchQuery('');
+        onOpenChange?.(true);
+    }, [disabled, onOpenChange]);
+    const close = useCallback(() => {
+        setIsOpen(false);
+        setSearchQuery('');
+        onOpenChange?.(false);
+        triggerRef.current?.focus();
+    }, [onOpenChange]);
+    const listbox = useListboxNav({
+        items: filteredOptions,
+        isItemDisabled: opt => Boolean(opt.disabled),
+        onSelect: opt => {
+            toggleValue(opt.value, Boolean(opt.disabled));
+            if (closeOnSelect)
+                close();
+        },
+        onEscape: close,
+    });
+    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;
+        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();
+        if (searchable) {
+            requestAnimationFrame(() => {
+                searchRef.current?.focus();
+            });
+        }
+    }, [isOpen, updateDropdownPosition, searchable]);
+    // Outside click handling
+    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]);
+    const handleTriggerKeyDown = useCallback((e) => {
+        if (disabled)
+            return;
+        switch (e.key) {
+            case 'Enter':
+            case ' ':
+            case 'ArrowDown':
+            case 'ArrowUp':
+                e.preventDefault();
+                if (!isOpen)
+                    open();
+                break;
+        }
+    }, [disabled, isOpen, open]);
+    const handleDropdownKeyDown = useCallback((e) => {
+        listbox.handleKeyDown(e);
+    }, [listbox]);
+    const removeValue = useCallback((val) => {
+        setSelected(selected.filter(v => v !== val));
+    }, [selected, setSelected]);
+    const handleClearAll = useCallback((e) => {
+        e.stopPropagation();
+        setSelected([]);
+    }, [setSelected]);
+    const showHelperText = error && errorMessage ? errorMessage : helperText;
+    const chevronSize = CHEVRON_SIZES[size];
+    const selectedOptions = useMemo(() => selected
+        .map(v => allOptions.find(o => o.value === v))
+        .filter((o) => Boolean(o)), [allOptions, selected]);
+    const isEmpty = selected.length === 0;
+    const visibleChips = maxInlineChips === Infinity
+        ? selectedOptions
+        : selectedOptions.slice(0, maxInlineChips);
+    const overflowCount = selectedOptions.length - visibleChips.length;
+    // Render options
+    const renderOptionsList = () => {
+        if (filteredOptions.length === 0) {
+            return jsx("div", { className: emptyMessageStyle, children: emptyMessage });
+        }
+        const hasGroups = options.some(isOptionGroup);
+        // Mirror the deferred query used by `filteredOptions` so the grouped /
+        // flat switch stays consistent with the list being rendered.
+        if (hasGroups && !deferredSearchQuery) {
+            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) => renderOptionItem(opt, startIdx + optIdx))] }, `group-${String(groupIdx)}`));
+                }
+                const idx = flatIndex;
+                flatIndex += 1;
+                return renderOptionItem(item, idx);
+            });
+        }
+        return filteredOptions.map((opt, idx) => renderOptionItem(opt, idx));
+    };
+    const renderOptionItem = (opt, index) => {
+        const isSelected = selectedSet.has(opt.value);
+        const isActive = index === listbox.activeIndex;
+        const isDisabled = opt.disabled ?? false;
+        const reachedMax = typeof max === 'number' && !isSelected && selected.length >= max;
+        const interactiveDisabled = isDisabled || reachedMax;
+        const selectOption = () => {
+            if (!interactiveDisabled) {
+                toggleValue(opt.value, false);
+                if (closeOnSelect)
+                    close();
+            }
+        };
+        return (jsxs("div", { role: "option", tabIndex: -1, "aria-selected": isSelected, "aria-disabled": interactiveDisabled || undefined, id: `${listboxId}-${opt.value}`, className: optionItemRecipe({
+                active: isActive,
+                selected: isSelected,
+                disabled: interactiveDisabled,
+            }), onClick: selectOption, onKeyDown: e => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    selectOption();
+                }
+            }, onMouseEnter: () => {
+                if (!interactiveDisabled)
+                    listbox.setActiveIndex(index);
+            }, children: [jsx("span", { className: checkboxRecipe({ selected: isSelected }), "aria-hidden": "true", children: isSelected && jsx(CheckIcon, { size: 10, decorative: true }) }), opt.icon && jsx("span", { children: opt.icon }), jsx("span", { children: opt.label ?? opt.value })] }, opt.value));
+    };
+    const formValue = selected.join(',');
+    return (jsxs("div", { className: cx(containerStyle, className), style: style, children: [label && (jsx(FormLabel, { id: labelId, htmlFor: fieldId, required: required, disabled: disabled, children: label })), jsxs("button", { ref: setTriggerRef, id: fieldId, 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: () => {
+                    if (isOpen) {
+                        close();
+                    }
+                    else {
+                        open();
+                    }
+                }, onKeyDown: handleTriggerKeyDown, className: triggerRecipe({
+                    size,
+                    variant,
+                    open: isOpen,
+                    disabled,
+                    error,
+                    empty: isEmpty,
+                }), "data-testid": testId, ...rest, children: [jsx("span", { className: triggerContentStyle, children: isEmpty ? (jsx("span", { className: placeholderStyle, children: placeholder })) : (jsxs(Fragment, { children: [visibleChips.map(opt => (jsxs("span", { className: chipRecipe({ size }), "data-testid": testId ? `${testId}-chip-${opt.value}` : undefined, children: [opt.icon && jsx("span", { children: opt.icon }), jsx("span", { className: chipLabelStyle, children: opt.label ?? opt.value }), !disabled && (jsx("span", { role: "button", tabIndex: -1, "aria-label": `Remove ${opt.label ?? opt.value}`, className: chipRemoveStyle, onClick: e => {
+                                                e.stopPropagation();
+                                                removeValue(opt.value);
+                                            }, onKeyDown: e => {
+                                                if (e.key === 'Enter' || e.key === ' ') {
+                                                    e.preventDefault();
+                                                    e.stopPropagation();
+                                                    removeValue(opt.value);
+                                                }
+                                            }, children: jsx(CloseIcon, { size: "sm", decorative: true }) }))] }, opt.value))), overflowCount > 0 && (jsxs("span", { className: moreBadgeStyle, children: ["+", overflowCount, " more"] }))] })) }), clearable && !isEmpty && !disabled && (jsx("span", { role: "button", tabIndex: -1, "aria-label": "Clear selection", className: clearButtonStyle, onClick: handleClearAll, onKeyDown: e => {
+                            if (e.key === 'Enter' || e.key === ' ') {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                setSelected([]);
+                            }
+                        }, children: jsx(CloseIcon, { size: "sm", decorative: true }) })), jsx("span", { className: chevronRecipe({ open: isOpen }), children: jsx(ChevronDownIcon, { size: chevronSize, decorative: true }) })] }), name && jsx("input", { type: "hidden", name: name, value: formValue }), isOpen &&
+                createPortal(jsxs("div", { ref: dropdownRef, role: "listbox", id: listboxId, "aria-multiselectable": "true", "aria-labelledby": label ? labelId : undefined, className: dropdownStyle, style: dropdownPos, onKeyDown: handleDropdownKeyDown, tabIndex: -1, children: [searchable && (jsx("input", { ref: searchRef, type: "text", placeholder: searchPlaceholder, value: searchQuery, onChange: e => {
+                                setSearchQuery(e.target.value);
+                            }, onKeyDown: handleDropdownKeyDown, className: searchInputStyle, "aria-label": "Search options" })), jsx(ScrollArea, { className: optionsListStyle, maxHeight: maxDropdownHeight - (searchable ? 32 : 0), scrollbarWidth: 4, scrollbarVisibility: "auto", hideDelay: 600, children: renderOptionsList() })] }), document.body), showHelperText && (jsx(FormHelperText, { id: helperId, error: error, children: showHelperText }))] }));
+}
+MultiSelect.displayName = 'MultiSelect';
+
+export { MultiSelect };
+//# sourceMappingURL=MultiSelect.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelect.js","sources":["../../../../../../src/components/controls/MultiSelect/MultiSelect.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;AAmDA;AAGE;AACF;AAEA;;AAIE;AACE;;;;AAGE;;;AAGJ;AACF;AAEA;AAIE;;AAEF;AAEA;AACE;AACA;AACA;;AAGF;;;;;;;;;;;;;;;;;;;;;AAqBG;AACG;AAiCJ;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;;AAIA;;;;AAIE;AACD;;;;AAMD;;;;AAKA;AAEA;AACA;AACE;AAAyC;AACzC;;AAGF;;AAII;;;;AAGE;;;;;;;;AASN;AACE;;;;AAGA;AACF;AAEA;;;AAGE;AACA;AACF;;AAGE;;;AAGE;AACA;AAAmB;;AAErB;AACD;AAED;AACE;AACA;;AACA;;AAEA;AAGA;;AAGI;AAEJ;;AAEE;AACA;AACE;;AAEI;AACD;AACH;AACH;AACH;;AAGE;;AACA;;;AAGI;AACF;;;;;AAMF;;AACA;AACE;;;AAKE;;AAEJ;AACA;AACA;AACE;AACF;AACF;AAEA;AAEI;;AACA;AACE;AACA;AACA;AACA;;AAEE;AAAa;;;;AAOrB;AAEI;AACF;AAIF;AAEI;AACF;AAIF;;;AAIE;AAIF;AACA;AAEA;AAGO;AACA;AAIP;AACA;AAEI;;;;;AAMF;AACE;;;;;AAMF;;;AAGI;AACE;;AAEA;;;;;AAgBF;AACF;;AAGF;AACF;AAEA;;AAEE;AACA;AACA;AAEA;;;AAII;AACA;AAAmB;;AAEvB;AAEA;AASM;AACA;AACA;;AAIA;;AAEE;;AAEJ;AAEE;AAA0B;;AAalC;;;;AAgCU;;;AAEA;;;;;AAOF;;;AAGA;;;AA8Bc;AACF;AAEE;;;AAGE;;AAEJ;AAsBR;;;;;;AAmBN;AAmBU;AACF;AA0BhB;AAEA;;"}

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

@@ -3,9 +3,9 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import React, { useRef, useEffect } from 'react';
 import { inputWrapperRecipe } from '../../form/InputWrapper.css.js';
 import { ChevronDownIcon } from '../../Icons/ChevronDownIcon.js';
-import { useNumberInput } from './useNumberInput.js';
 import { cx } from '../../../utils/cx.js';
 import { labelRecipe, stepButtonIconLeftStyle, stepButtonRecipe, inputRecipe, unitLabelStyle, valueDisplayRecipe, stepButtonIconRightStyle, helperTextRecipe, containerDraggingStyle, containerHoveredStyle, numberInputContainerStyle } from './NumberInput.css.js';
+import { useNumberInput } from './useNumberInput.js';
 
 /**
  * A specialized number input component with Blender-like functionality.
@@ -82,9 +82,9 @@ size = 'md', disabled = false, readOnly = false, errorMessage, placeholder, labe
         ...(precisionStep !== undefined && { precisionStep }),
         ...(largeStep !== undefined && { largeStep }),
         ...(precision !== undefined && { precision }),
-        ...(allowExpressions !== undefined && { allowExpressions }),
+        allowExpressions,
         disabled: disabled || readOnly,
-        ...(dragSensitivity !== undefined && { dragSensitivity }),
+        dragSensitivity,
         ...(formatValue !== undefined && { formatValue }),
         ...(parseValue !== undefined && { parseValue }),
     });
@@ -204,7 +204,14 @@ size = 'md', disabled = false, readOnly = false, errorMessage, placeholder, labe
     // Format display value
     const formattedValue = formatValue ? formatValue(value) : displayValue;
     const inputId = React.useId();
-    return (jsxs("div", { ref: containerRef, className: cx(numberInputContainerStyle, isHovered && !disabled && !isDragging && containerHoveredStyle, isDragging && containerDraggingStyle, className), onMouseEnter: handleContainerMouseEnter, onMouseLeave: handleContainerMouseLeave, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, "data-testid": testId, children: [label && (jsxs("label", { htmlFor: inputId, className: labelRecipe({ disabled }), children: [label, required && jsx("span", { style: { color: 'var(--accent-error)' }, children: " *" })] })), jsxs("div", { className: inputWrapperRecipe({
+    return (
+    // The mouse handlers below implement a pointer-only drag-to-scrub
+    // enhancement on this presentational wrapper. Keyboard accessibility is
+    // provided by the inner native <input> (handleInputKeyDown) and the
+    // native step <button>s, so no role/keyboard handlers belong on the
+    // wrapper itself.
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    jsxs("div", { ref: containerRef, className: cx(numberInputContainerStyle, isHovered && !disabled && !isDragging && containerHoveredStyle, isDragging && containerDraggingStyle, className), onMouseEnter: handleContainerMouseEnter, onMouseLeave: handleContainerMouseLeave, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, "data-testid": testId, children: [label && (jsxs("label", { htmlFor: inputId, className: labelRecipe({ disabled }), children: [label, required && jsx("span", { style: { color: 'var(--accent-error)' }, children: " *" })] })), jsxs("div", { className: inputWrapperRecipe({
                     size,
                     error: effectiveError,
                     disabled,

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

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.js","sources":["../../../../../../src/components/controls/NumberInput/NumberInput.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;AAyIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CG;AACI;AACL;AACA;AAGA;AACA;AAMA;AACA;AAWA;AACA;AAgBA;AACA;AACA;;AAGA;AAKA;AACA;;;;AAKC;AAED;;;;;;;;;;;;;;;;AAgCC;;AAGD;AACA;AACA;;AAGA;;;;AAIE;;;AAGA;;;;;;AAME;AACA;;;AAIJ;AAEA;AACE;;AAEA;;;AAKE;;AAGA;AACA;;AAEJ;;AAGE;;AAEA;AACA;;AAIA;AACE;;;AAGE;;;AAIJ;AACF;;;AAIE;;AAEA;AACE;AACF;;AAGE;AACA;AACF;AAEA;AACA;AAEA;AACE;AACA;AACF;;;AAIF;AACE;AACF;AAEA;;AAEE;AACF;AAEA;;AAEE;AACA;AACF;AAEA;;AAEE;AACF;;;AAIE;;;AAGF;;;;AAKE;AACF;;AAGA;;;AAGE;;AAEF;AAEA;;;AAGE;;AAEF;;AAGA;;AAIA;;AAGA;AAEA;AAEA;;AA0BQ;;;AAGD;AAOK;;AAEA;;;;;;AAwCA;AACD;AAcC;;AAEA;AACD;AAgBD;AACA;AAKZ;AAEA;;"}
+{"version":3,"file":"NumberInput.js","sources":["../../../../../../src/components/controls/NumberInput/NumberInput.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;AA6IA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CG;AACI;AACL;AACA;AAGA;AACA;AAMA;AACA;AAWA;AACA;AAgBA;AACA;AACA;;AAGA;AAKA;AACA;;;;AAKC;AAED;;;;;;;;;;;;;;;;AAgCC;;AAGD;AACA;AACA;;AAGA;;;;AAIE;;;AAGA;;;;;;AAME;AACA;;;AAIJ;AAEA;AACE;;AAEA;;;AAKE;;AAGA;AACA;;AAEJ;;AAGE;;AAEA;AACA;;AAIA;AACE;;;AAGE;;;AAIJ;AACF;;;AAIE;;AAEA;AACE;AACF;;AAGE;AACA;AACF;AAEA;AACA;AAEA;AACE;AACA;AACF;;;AAIF;AACE;AACF;AAEA;;AAEE;AACF;AAEA;;AAEE;AACA;AACF;AAEA;;AAEE;AACF;;;AAIE;;;AAGF;;;;AAKE;AACF;;AAGA;;;AAGE;;AAEF;AAEA;;;AAGE;;AAEF;;AAGA;;AAIA;;AAGA;AAEA;;;;;;;;AASE;;AAyBM;;;AAGD;AAOK;;AAEA;;;;;;AAwCA;AACD;AAcC;;AAEA;AACD;AAgBD;AACA;AAKZ;AAEA;;"}

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

@@ -1,8 +1,8 @@
 "use client";
 import { useState, useRef, useEffect, useCallback } from 'react';
 import { useKeyboardContext } from '../../../context/KeyboardContext.js';
-import { parseNumericInput, isExpression } from '../../../utils/mathExpression.js';
 import { devError } from '../../../utils/devWarn.js';
+import { parseNumericInput, isExpression } from '../../../utils/mathExpression.js';
 
 /**
  * Clamps a value between min and max bounds
@@ -73,6 +73,10 @@ function useNumberInput({ value, onChange, min, max, softMin, softMax, step = 1,
             const formatted = formatValue
                 ? formatValue(value)
                 : defaultFormatValue(value, effectivePrecision);
+            // Sync the display string to the controlled `value` prop while the user
+            // is not actively editing/dragging — an external-value sync that the
+            // edit guard makes safe from cascading renders.
+            // eslint-disable-next-line react-hooks/set-state-in-effect
             setDisplayValue(formatted);
             setError(undefined);
         }
@@ -223,7 +227,7 @@ function useNumberInput({ value, onChange, min, max, softMin, softMax, step = 1,
         // Place cursor at end of input
         setTimeout(() => {
             const input = document.activeElement;
-            if (input) {
+            if (input instanceof HTMLInputElement) {
                 const len = input.value.length;
                 input.setSelectionRange(len, len);
             }

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

@@ -1 +1 @@
-{"version":3,"file":"useNumberInput.js","sources":["../../../../../../src/components/controls/NumberInput/useNumberInput.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AA0MA;;AAEG;AACH;;AAEE;;AACA;;AACA;AACF;AAEA;;AAEG;AACH;;AAC+B;;;AAG/B;AAEA;;AAEG;AACH;AACE;AACE;;;AAGF;AACF;AAEA;;;;;;;;;;;;AAYG;;;AAmBD;AACA;AACA;;;AAKI;;;;;;;;AAUJ;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;;AAEE;AACA;;;AAGN;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;;"}
+{"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;AACA;;;AAKI;;;;;;;;AAUJ;AACA;AACA;;AAGA;;;AAIE;;AAEI;AACA;;;;;;;;AAQN;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;AACA;AACE;AACA;;;AAGN;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.js

@@ -2,8 +2,11 @@
 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 { FormLabel } from '../../form/FormLabel.js';
+import { CheckIcon } from '../../Icons/CheckIcon.js';
+import { ChevronDownIcon } from '../../Icons/ChevronDownIcon.js';
+import { CloseIcon } from '../../Icons/CloseIcon.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';
@@ -34,8 +37,6 @@ const CHEVRON_SIZES = {
     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.
@@ -153,7 +154,9 @@ function Select({ value: valueProp, defaultValue, options, placeholder = 'Select
             }
         };
         document.addEventListener('mousedown', handleClick);
-        return () => document.removeEventListener('mousedown', handleClick);
+        return () => {
+            document.removeEventListener('mousedown', handleClick);
+        };
     }, [isOpen, close]);
     // Get navigable options (non-disabled)
     const navigableIndices = useMemo(() => filteredOptions
@@ -260,8 +263,7 @@ function Select({ value: valueProp, defaultValue, options, placeholder = 'Select
             ref(node);
         }
         else if (ref) {
-            ref.current =
-                node;
+            ref.current = node;
         }
     }, [ref]);
     // Render options list
@@ -293,28 +295,47 @@ function Select({ value: valueProp, defaultValue, options, placeholder = 'Select
     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({
+        const selectOption = () => {
+            if (!opt.disabled) {
+                selectValue(opt.value);
+            }
+        };
+        return (jsxs("div", { role: "option", tabIndex: -1, "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);
+            }), onClick: selectOption, onKeyDown: e => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    selectOption();
                 }
             }, 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));
+            }, children: [opt.icon && jsx("span", { children: opt.icon }), jsx("span", { children: opt.label ?? opt.value }), isSelected && (jsx("span", { className: checkmarkStyle, children: jsx(CheckIcon, { size: 10, decorative: true }) }))] }, 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({
+    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: () => {
+                    if (isOpen) {
+                        close();
+                    }
+                    else {
+                        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 &&
+                }), "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, onKeyDown: e => {
+                            if (e.key === 'Enter' || e.key === ' ') {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                selectValue(null);
+                            }
+                        }, "aria-label": "Clear selection", tabIndex: -1, children: jsx(CloseIcon, { size: "sm", decorative: true }) })), jsx("span", { className: chevronRecipe({ open: isOpen }), children: jsx(ChevronDownIcon, { size: chevronSize, decorative: true }) })] }), 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);

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

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../../../../src/components/controls/Select/Select.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;AAoCA;AAEA;AAGE;AACF;AAEA;;AAIE;AACE;;;;AAGE;;;AAGJ;AACF;AAEA;AAIE;;AAEF;AAEA;AAEA;AACE;AACA;AACA;;AAGF;AAEA;AAkBA;AAEA;;;;;;;;;;;;;;;;;;;AAmBG;;AA+BD;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;;AAGA;;;;AAQA;;;AAIA;;AAGA;AACA;AACE;AAAiC;AACjC;;;AAIF;;AAMA;AACE;AACA;;AAEA;;AAEA;AAGA;;AAGI;AAEJ;;AAEE;AACA;AACE;;AAEI;AACD;AACH;AACH;AACH;AAEA;AACE;;;;AAGA;AACA;;AAEF;AAEA;;;AAGE;AACA;AACA;AACF;AAEA;;;;AAKI;AACA;;;;;AAQA;;;;AAII;AACF;;;;;;AAOJ;;AAEA;AACE;;;AAKE;;AAEJ;AAEA;;AAEF;;AAGA;;AAIO;AAIP;AAEI;;AAEA;;;AAIE;AACE;;AAEF;;;AAGA;;AAGI;AAEA;;;;;;AAKJ;AACE;;;;;;;;;AASN;;AAKF;AAEI;;AAEA;AACE;AACA;AACA;;;AAGI;;;AAGJ;;;AAGI;;;;;;AASV;AAEI;AACE;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;AAII;AAEA;AACA;AACE;;;;AAIN;;AAEE;;;AAGN;AAIF;;;AAIE;AAIF;AACA;;AAGA;AAEI;AACA;;;;AAGG;AACC;;AAEN;;;AAMA;AACE;;;;AAMF;;;AAGI;AACE;;AAEA;AAEA;AAIM;AACA;AACF;;;;AAON;AACF;;AAGF;AACF;AAEA;AACE;AACA;AAEA;AAOM;AACA;AACA;AACD;AAEC;AACE;;AAEJ;AAEE;;;AAGF;AAyBN;AAEA;;;AA8BQ;;;;AAID;AAgDD;AAkBU;AACA;AACF;AA0BhB;AAEA;;"}
+{"version":3,"file":"Select.js","sources":["../../../../../../src/components/controls/Select/Select.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;AA0CA;AAEA;AAGE;AACF;AAEA;;AAIE;AACE;;;;AAGE;;;AAGJ;AACF;AAEA;AAIE;;AAEF;AAEA;AAEA;AACE;AACA;AACA;;AAGF;AAEA;;;;;;;;;;;;;;;;;;;AAmBG;;AA+BD;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;;AAGA;;;;AAQA;;;AAIA;;AAGA;AACA;AACE;AAAiC;AACjC;;;AAIF;;AAMA;AACE;AACA;;AAEA;;AAEA;AAGA;;AAGI;AAEJ;;AAEE;AACA;AACE;;AAEI;AACD;AACH;AACH;AACH;AAEA;AACE;;;;AAGA;AACA;;AAEF;AAEA;;;AAGE;AACA;AACA;AACF;AAEA;;;;AAKI;AACA;;;;;AAQA;;;;AAII;AACF;;;;;;AAOJ;;AAEA;AACE;;;AAKE;;AAEJ;AAEA;AACA;AACE;AACF;AACF;;AAGA;;AAIO;AAIP;AAEI;;AAEA;;;AAIE;AACE;;AAEF;;;AAGA;;AAGI;AAEA;;;;;;AAKJ;AACE;;;;;;;;;AASN;;AAKF;AAEI;;AAEA;AACE;AACA;AACA;;;AAGI;;;AAGJ;;;AAGI;;;;;;AASV;AAEI;AACE;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;AAII;AAEA;AACA;AACE;;;;AAIN;;AAEE;;;AAGN;AAIF;;;AAIE;AAIF;AACA;;AAGA;AAEI;AACA;;;;AAGE;;AAEJ;;;AAMA;AACE;;;;AAMF;;;AAGI;AACE;;AAEA;AAEA;AAIM;AACA;AACF;;;;AAON;AACF;;AAGF;AACF;AAEA;AACE;AACA;;AAGE;AACE;;AAEJ;;AAUM;AACA;AACA;;AAIA;;AAEE;;AAEJ;AAEE;;;;AAcR;;;AA6BU;;;AAEA;;;;;AAOF;;;;AAID;AAqBK;;;;;AAKF;AAgBJ;AAkBU;AACA;AACF;AA0BhB;AAEA;;"}

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

@@ -1,11 +1,11 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React, { useState, useRef, useCallback, useEffect } from 'react';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
-import { useKeyboardContext } from '../../../context/KeyboardContext.js';
-import { FormLabel } from '../../form/FormLabel.js';
+import React, { useState, useRef, useCallback, useEffect } from 'react';
 import { FormHelperText } from '../../form/FormHelperText.js';
+import { FormLabel } from '../../form/FormLabel.js';
 import { InputWrapper } from '../../form/InputWrapper.js';
+import { useKeyboardContext } from '../../../context/KeyboardContext.js';
 import { cx } from '../../../utils/cx.js';
 import { sliderWrapperStyle, fillPercentageVar, fillRecipe, trackRecipe, thumbPercentageVar, thumbRecipe, ticksStyle, tickStyle, tooltipPercentageVar, tooltipRecipe, sliderContainerRecipe } from './Slider.css.js';
 
@@ -104,10 +104,8 @@ const Slider = ({ value, onChange, min = 0, max = 100, step = 1, precisionStep,
     const displayValue = formatValue
         ? formatValue(clampedValue)
         : unit
-            ? `${precision !== undefined ? clampedValue.toFixed(precision) : clampedValue}${unit}`
-            : precision !== undefined
-                ? clampedValue.toFixed(precision)
-                : clampedValue.toString();
+            ? `${clampedValue.toFixed(precision)}${unit}`
+            : clampedValue.toFixed(precision);
     /**
      * Applies a new value with proper bounds checking and rounding
      */
@@ -252,7 +250,7 @@ const Slider = ({ value, onChange, min = 0, max = 100, step = 1, precisionStep,
                     background: 'transparent',
                     padding: 0,
                     height: 5,
-                }, children: jsxs("div", { ref: sliderRef, className: sliderWrapperStyle, onMouseDown: handleMouseDown, tabIndex: disabled ? -1 : 0, role: "slider", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": clampedValue, "aria-valuetext": displayValue, "aria-disabled": disabled, "aria-readonly": readOnly, "aria-required": required, "aria-invalid": error, "aria-labelledby": label ? sliderId : undefined, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown, children: [jsx("div", { ref: trackRef, className: trackRecipe({ size, error }), children: jsx("div", { className: fillRecipe({ error, isDragging }), style: assignInlineVars({
+                }, children: jsxs("div", { ref: sliderRef, className: sliderWrapperStyle, onMouseDown: handleMouseDown, tabIndex: disabled ? -1 : 0, role: "slider", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": clampedValue, "aria-valuetext": displayValue, "aria-disabled": disabled, "aria-readonly": readOnly, "aria-invalid": error, "aria-labelledby": label ? sliderId : undefined, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown, children: [jsx("div", { ref: trackRef, className: trackRecipe({ size, error }), children: jsx("div", { className: fillRecipe({ error, isDragging }), style: assignInlineVars({
                                     [fillPercentageVar]: `${percentage}%`,
                                 }) }) }), jsx("div", { className: thumbRecipe({ size, error, isDragging }), style: assignInlineVars({
                                 [thumbPercentageVar]: `${percentage}%`,

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

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sources":["../../../../../../src/components/controls/Slider/Slider.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;AA4KA;;AAEG;AACH;AACE;AACF;AAEA;;AAEG;AACH;;AAC+B;;;AAG/B;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgDG;AACI;;;;AAkCL;AACA;AACA;AAIA;;AAGA;AACA;AACA;;AAGA;;AACuB;AACrB;AAAyC;AACzC;AACF;AACE;AACA;AACA;;;;AAID;;;AAIC;AACA;;;AAGI;AACA;AAEN;;AAEG;AACH;;;;;;;AASI;;;AAGF;AAIF;;AAEG;AACH;;AAE2B;;;;;AAOvB;;AAGA;AACA;;AAKJ;;AAEG;AACH;;;;;;;;;;;AAcM;;AAEJ;AAIF;;AAEG;AACH;AAEI;;;;;;;AAMA;;AAKJ;;AAEG;AACH;;;AAGE;;AAGF;;AAEG;AACH;;;AAII;;AAGA;AACE;AACA;AACE;;AAEF;AACA;AACE;;AAEF;;;AAGA;;;AAGA;AACE;;AAEF;AACE;;AAEF;;;;;;AAQF;AACF;;;;;;;;;;AAWC;AAGH;;AAEG;AACH;;AAGI;AACF;AAIF;;AAGI;AACF;;;AAMA;;AAEA;AACA;AAEA;AACE;AACA;AACF;;;AAIF;AAEA;AAEA;AAmBQ;AACA;AACA;AACA;;AA0BM;;AAQF;;AAgBE;AACD;AAef;AAEA;;"}
+{"version":3,"file":"Slider.js","sources":["../../../../../../src/components/controls/Slider/Slider.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;AA+KA;;AAEG;AACH;AACE;AACF;AAEA;;AAEG;AACH;;AAC+B;;;AAG/B;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgDG;AACI;;;;AAkCL;AACA;AACA;AAIA;;AAGA;AACA;AACA;;AAGA;;AACuB;AACrB;AAAyC;AACzC;AACF;AACE;AACA;AACA;;;;AAID;;;AAIC;AACA;;AAEE;AAEJ;;AAEG;AACH;;;;;;;AASI;;;AAGF;AAIF;;AAEG;AACH;;AAE2B;;;;;AAOvB;;AAGA;AACA;;AAKJ;;AAEG;AACH;;;;;;;;;;;AAcM;;AAEJ;AAIF;;AAEG;AACH;AAEI;;;;;;;AAMA;;AAKJ;;AAEG;AACH;;;AAGE;;AAGF;;AAEG;AACH;;;AAII;;AAGA;AACE;AACA;AACE;;AAEF;AACA;AACE;;AAEF;;;AAGA;;;AAGA;AACE;;AAEF;AACE;;AAEF;;;;;;AAQF;AACF;;;;;;;;;;AAWC;AAGH;;AAEG;AACH;;AAGI;AACF;AAIF;;AAGI;AACF;;;AAMA;;AAEA;AACA;AAEA;AACE;AACA;AACF;;;AAIF;AAEA;AAEA;AAmBQ;AACA;AACA;AACA;;AAyBM;;AAQF;;AAgBE;AACD;AAef;AAEA;;"}

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

@@ -0,0 +1,12 @@
+import './../../../assets/src/components/controls/TagInput/TagInput.css.ts.vanilla-hnkMOPp1.css';
+import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+
+var containerStyle = 'TagInput_containerStyle__16f33bk0';
+var inputStyle = 'TagInput_inputStyle__16f33bkm';
+var tagLabelStyle = 'TagInput_tagLabelStyle__16f33bkk';
+var tagRecipe = createRuntimeFn({defaultClassName:'TagInput_tagRecipe__16f33bke',variantClassNames:{size:{sm:'TagInput_tagRecipe_size_sm__16f33bkf',md:'TagInput_tagRecipe_size_md__16f33bkg',lg:'TagInput_tagRecipe_size_lg__16f33bkh'},invalid:{true:'TagInput_tagRecipe_invalid_true__16f33bki',false:'TagInput_tagRecipe_invalid_false__16f33bkj'}},defaultVariants:{size:'md',invalid:false},compoundVariants:[]});
+var tagRemoveStyle = 'TagInput_tagRemoveStyle__16f33bkl';
+var wrapperRecipe = createRuntimeFn({defaultClassName:'TagInput_wrapperRecipe__16f33bk1',variantClassNames:{size:{sm:'TagInput_wrapperRecipe_size_sm__16f33bk2',md:'TagInput_wrapperRecipe_size_md__16f33bk3',lg:'TagInput_wrapperRecipe_size_lg__16f33bk4'},variant:{'default':'TagInput_wrapperRecipe_variant_default__16f33bk5',ghost:'TagInput_wrapperRecipe_variant_ghost__16f33bk6',filled:'TagInput_wrapperRecipe_variant_filled__16f33bk7'},focused:{true:'TagInput_wrapperRecipe_focused_true__16f33bk8',false:'TagInput_wrapperRecipe_focused_false__16f33bk9'},error:{true:'TagInput_wrapperRecipe_error_true__16f33bka',false:'TagInput_wrapperRecipe_error_false__16f33bkb'},disabled:{true:'TagInput_wrapperRecipe_disabled_true__16f33bkc',false:'TagInput_wrapperRecipe_disabled_false__16f33bkd'}},defaultVariants:{size:'md',variant:'default',focused:false,error:false,disabled:false},compoundVariants:[]});
+
+export { containerStyle, inputStyle, tagLabelStyle, tagRecipe, tagRemoveStyle, wrapperRecipe };
+//# sourceMappingURL=TagInput.css.js.map

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

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