entangle-ui 0.9.0 → 0.10.0

package/dist/esm/components/controls/FileTree/useFileTreeDrop.js

@@ -0,0 +1,115 @@
+"use client";
+import { useState, useCallback } from 'react';
+import '../../../utils/devWarn.js';
+import { useLatest } from '../../../hooks/useLatest/useLatest.js';
+import '../../../hooks/useBreakpoint/useBreakpoint.js';
+import './../../../assets/src/theme/lightTheme.css.ts.vanilla-Ct6f9Iym.css';
+import '../../../node_modules/@vanilla-extract/css/dist/vanilla-extract-css.esm.js';
+import './../../../assets/src/theme/darkTheme.css.ts.vanilla-BHZ3ecRn.css';
+import 'react/jsx-runtime';
+import './../../../assets/src/theme/globalScrollbars.css.ts.vanilla-BAJwnUEJ.css';
+import '../../../hooks/useNavigationHistory/useNavigationHistory.js';
+
+/** True when the drag carries OS files (vs. a text/element drag). */
+function hasFiles(event) {
+    return Array.from(event.dataTransfer.types).includes('Files');
+}
+/** True when the drag is leaving the element entirely (not into a descendant). */
+function leftElement(event) {
+    const related = event.relatedTarget;
+    return !(related && event.currentTarget.contains(related));
+}
+function extractFiles(event) {
+    return Array.from(event.dataTransfer.files);
+}
+/**
+ * External file-import drag-and-drop for FileTree. Per-node `dragover` resolves
+ * (and highlights) the destination folder and stops propagation; the container
+ * handles drops on empty space (→ root) and clears the highlight when the drag
+ * leaves the tree, so there's no row-to-row flicker. All handlers have stable
+ * identities and read the latest props through `useLatest` (patterns #3 / #11).
+ */
+function useFileTreeDrop({ onImport, nodeById, parentFolderById, }) {
+    // `null` = no active target; otherwise the destination folder id (`null`
+    // folderId = the tree root).
+    const [target, setTarget] = useState(null);
+    const onImportRef = useLatest(onImport);
+    const nodeByIdRef = useLatest(nodeById);
+    const parentFolderByIdRef = useLatest(parentFolderById);
+    const enabled = onImport !== undefined;
+    /** The folder a drop on `node` should target (a folder targets itself; a file
+     * targets its parent folder, or the root). */
+    const resolveTargetFolder = useCallback((nodeId) => {
+        const node = nodeByIdRef.current.get(nodeId);
+        if (node?.kind === 'folder')
+            return node;
+        return parentFolderByIdRef.current.get(nodeId) ?? null;
+    }, [nodeByIdRef, parentFolderByIdRef]);
+    const setTargetFolder = useCallback((folderId) => {
+        setTarget(prev => prev !== null && prev.folderId === folderId ? prev : { folderId });
+    }, []);
+    const clearTarget = useCallback(() => {
+        setTarget(prev => (prev === null ? prev : null));
+    }, []);
+    const onNodeDragOver = useCallback((node, event) => {
+        if (onImportRef.current === undefined || !hasFiles(event))
+            return;
+        event.preventDefault();
+        // Owned by the row — keep the container from re-targeting the root.
+        event.stopPropagation();
+        event.dataTransfer.dropEffect = 'copy';
+        setTargetFolder(resolveTargetFolder(node.id)?.id ?? null);
+    }, [onImportRef, resolveTargetFolder, setTargetFolder]);
+    const onNodeDrop = useCallback((node, event) => {
+        const onImportCb = onImportRef.current;
+        if (onImportCb === undefined)
+            return;
+        const files = extractFiles(event);
+        if (files.length === 0) {
+            clearTarget();
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        onImportCb({ files, targetFolder: resolveTargetFolder(node.id) });
+        clearTarget();
+    }, [onImportRef, resolveTargetFolder, clearTarget]);
+    const onRootDragOver = useCallback((event) => {
+        if (onImportRef.current === undefined || !hasFiles(event))
+            return;
+        event.preventDefault();
+        event.dataTransfer.dropEffect = 'copy';
+        setTargetFolder(null);
+    }, [onImportRef, setTargetFolder]);
+    const onRootDragLeave = useCallback((event) => {
+        if (!leftElement(event))
+            return;
+        clearTarget();
+    }, [clearTarget]);
+    const onRootDrop = useCallback((event) => {
+        const onImportCb = onImportRef.current;
+        if (onImportCb === undefined)
+            return;
+        const files = extractFiles(event);
+        if (files.length === 0) {
+            clearTarget();
+            return;
+        }
+        event.preventDefault();
+        onImportCb({ files, targetFolder: null });
+        clearTarget();
+    }, [onImportRef, clearTarget]);
+    return {
+        enabled,
+        dropTargetId: target?.folderId ?? null,
+        rootActive: target !== null && target.folderId === null,
+        onNodeDragOver,
+        onNodeDrop,
+        onRootDragOver,
+        onRootDragLeave,
+        onRootDrop,
+    };
+}
+
+export { useFileTreeDrop };
+//# sourceMappingURL=useFileTreeDrop.js.map

package/dist/esm/components/controls/FileTree/useFileTreeDrop.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFileTreeDrop.js","sources":["../../../../../../src/components/controls/FileTree/useFileTreeDrop.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;AAoCA;AACA;AACE;AACF;AAEA;AACA;AACE;AACA;AACF;AAEA;;AAEA;AAEA;;;;;;AAMG;AACG;;;;AAWJ;AACA;AACA;AAEA;AAEA;AAC8C;AAC9C;;AAGI;AAA6B;;AAE/B;AAIF;;;AAMA;AACE;;;;;;;;AASE;AACA;;;AAOA;;;AAEA;AACA;AACE;;;;;AAKF;AACA;;AAKJ;;;;AAII;;AAEF;AAIF;AAEI;;AACA;AACF;AAIF;AAEI;;;AAEA;AACA;AACE;;;;;AAKF;AACF;;;AAMA;;;;;;;;AAQJ;;"}

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

@@ -1,10 +1,10 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React, { useId, useRef, useState, useCallback, useMemo } from 'react';
-import { CloudUploadIcon } from '../../Icons/CloudUploadIcon.js';
-import { TrashIcon } from '../../Icons/TrashIcon.js';
 import { FormHelperText } from '../../form/FormHelperText.js';
 import { FormLabel } from '../../form/FormLabel.js';
+import { CloudUploadIcon } from '../../Icons/CloudUploadIcon.js';
+import { TrashIcon } from '../../Icons/TrashIcon.js';
 import { useControlledState } from '../../../hooks/useControlledState/useControlledState.js';
 import { useMergedRef } from '../../../hooks/useMergedRef/useMergedRef.js';
 import { cx } from '../../../utils/cx.js';
@@ -185,8 +185,7 @@ function FileUploader({ value, defaultValue, onChange, onFilesAdd, onFileRemove,
         if (disabled)
             return;
         event.preventDefault();
-        if (event.dataTransfer)
-            event.dataTransfer.dropEffect = 'copy';
+        event.dataTransfer.dropEffect = 'copy';
     }, [disabled]);
     const handleDragLeave = useCallback((event) => {
         if (disabled)
@@ -203,8 +202,6 @@ function FileUploader({ value, defaultValue, onChange, onFilesAdd, onFileRemove,
         dragCounterRef.current = 0;
         setDragging(false);
         const dt = event.dataTransfer;
-        if (!dt)
-            return;
         const dropped = [];
         if (dt.files.length > 0) {
             dropped.push(...Array.from(dt.files));

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

@@ -1 +1 @@
-{"version":3,"file":"FileUploader.js","sources":["../../../../../../src/components/controls/FileUploader/FileUploader.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;AAgCA;AACA;;AAEE;AACF;AAEA;AAEA;;AAC4C;;AACzB;AACjB;AAIA;;;AAIF;AAEA;;;AAGK;;AAEH;AAAyB;;;AAKzB;AACE;AACE;AAA0B;;AACrB;;AAEL;AAAmC;;AAC9B;AACL;;;AAGJ;AACF;AAEA;;;;;;;;;;;;;;;;;;;;;;;;AAwBG;;AAgCD;AACA;AACA;AACA;AAEA;AACA;AACA;;AAGA;;;;AAIE;AACD;;AAGD;;;AAKM;;;AAGA;;;AAGA;;;AAGA;;;AAGA;;AACsB;;AACU;;AAElC;AACF;AAIF;AAEI;;;;AAGA;AAEA;AAEA;;;AAGI;;;AAGF;;;;AAIE;AACD;;;AAIH;;;AAGA;;AAEA;AACF;AAIF;;;AAGI;;;AAGA;AAAa;;AAKjB;AAEI;AACA;;;;AAGA;AACF;AAIF;AACE;;AACA;AACF;AAEA;AAEI;;AACA;;AAEE;;AAEJ;AAIF;AAEI;;;AAEA;AACA;;AACF;AAIF;AAEI;;;;AAEwB;AAC1B;AAIF;AAEI;;;AAEA;AACA;;AACF;AAIF;AAEI;;;AAEA;;AAEA;AACA;;;;AAGE;;;AAEA;AACE;AACE;AACA;AAAO;;;;;AAKf;AAIF;AAEA;;AAEI;;;;;;;AASK;;;AAMP;AAEA;AAiBQ;;AAgBF;AAMR;AAEA;;AACkC;;AAEhC;AAAY;;;;;AAKZ;;;;;;;;AAgFJ;AAEA;;"}
+{"version":3,"file":"FileUploader.js","sources":["../../../../../../src/components/controls/FileUploader/FileUploader.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;AAmCA;AACA;;AAEE;AACF;AAEA;AAEA;;AAC4C;;AACzB;AACjB;AAIA;;;AAIF;AAEA;;;AAGK;;AAEH;AAAyB;;;AAKzB;AACE;AACE;AAA0B;;AACrB;;AAEL;AAAmC;;AAC9B;AACL;;;AAGJ;AACF;AAEA;;;;;;;;;;;;;;;;;;;;;;;;AAwBG;;AAgCD;AACA;AACA;AACA;AAEA;AACA;AACA;;AAGA;;;;AAIE;AACD;;AAGD;;;AAKM;;;AAGA;;;AAGA;;;AAGA;;;AAGA;;AACsB;;AACU;;AAElC;AACF;AAIF;AAEI;;;;AAGA;AAEA;AAEA;;;AAGI;;;AAGF;;;;AAIE;AACD;;;AAIH;;;AAGA;;AAEA;AACF;AAIF;;;AAGI;;;AAGA;AAAa;;AAKjB;AAEI;AACA;;;;AAGA;AACF;AAIF;AACE;;AACA;AACF;AAEA;AAEI;;AACA;;AAEE;;AAEJ;AAIF;AAEI;;;AAEA;AACA;;AACF;AAIF;AAEI;;;AAEA;AACF;AAIF;AAEI;;;AAEA;AACA;;AACF;AAIF;AAEI;;;AAEA;;AAEA;;;AAGE;;;AAEA;AACE;AACE;AACA;AAAO;;;;;AAKf;AAIF;AAEA;;AAEI;;;;;;;AASK;;;AAMP;AAEA;AAiBQ;;AAgBF;AAMR;AAEA;;AACkC;;AAEhC;AAAY;;;;;AAKZ;;;;;;;;AAgFJ;AAEA;;"}

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

@@ -1,12 +1,12 @@
 "use client";
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { useId, useRef, useState, useMemo, useCallback, useEffect } from 'react';
+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 { FormHelperText } from '../../form/FormHelperText.js';
-import { FormLabel } from '../../form/FormLabel.js';
 import { ScrollArea } from '../../layout/ScrollArea/ScrollArea.js';
 import { useControlledState } from '../../../hooks/useControlledState/useControlledState.js';
 import { useListboxNav } from '../../../hooks/useListboxNav/useListboxNav.js';
@@ -80,12 +80,16 @@ function MultiSelect({ value, defaultValue, options, placeholder = 'Select...',
     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 || !searchQuery)
+        if (!searchable || !deferredSearchQuery)
             return allOptions;
-        return allOptions.filter(opt => filter(opt, searchQuery));
-    }, [allOptions, searchable, searchQuery, filter]);
+        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)
@@ -210,7 +214,9 @@ function MultiSelect({ value, defaultValue, options, placeholder = 'Select...',
             return jsx("div", { className: emptyMessageStyle, children: emptyMessage });
         }
         const hasGroups = options.some(isOptionGroup);
-        if (hasGroups && !searchQuery) {
+        // 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)) {
@@ -232,15 +238,21 @@ function MultiSelect({ value, defaultValue, options, placeholder = 'Select...',
         const isDisabled = opt.disabled ?? false;
         const reachedMax = typeof max === 'number' && !isSelected && selected.length >= max;
         const interactiveDisabled = isDisabled || reachedMax;
-        return (jsxs("div", { role: "option", "aria-selected": isSelected, "aria-disabled": interactiveDisabled || undefined, id: `${listboxId}-${opt.value}`, className: optionItemRecipe({
+        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: () => {
-                if (!interactiveDisabled) {
-                    toggleValue(opt.value, false);
-                    if (closeOnSelect)
-                        close();
+            }), onClick: selectOption, onKeyDown: e => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    selectOption();
                 }
             }, onMouseEnter: () => {
                 if (!interactiveDisabled)
@@ -248,7 +260,14 @@ function MultiSelect({ value, defaultValue, options, placeholder = 'Select...',
             }, 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: () => (isOpen ? close() : open()), onKeyDown: handleTriggerKeyDown, className: triggerRecipe({
+    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,
@@ -258,7 +277,19 @@ function MultiSelect({ value, defaultValue, options, placeholder = 'Select...',
                 }), "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);
-                                            }, 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, 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 &&
+                                            }, 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 }))] }));

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

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect.js","sources":["../../../../../../src/components/controls/MultiSelect/MultiSelect.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;AA+CA;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;AAEA;AACA;AACE;AAAiC;AACjC;;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;;;AAIF;;;AAGI;AACE;;AAEA;;;;;AAgBF;AACF;;AAGF;AACF;AAEA;;AAEE;AACA;AACA;AAEA;;AAUM;AACA;AACA;AACD;;AAGG;AACA;AAAmB;;AAEvB;AAEE;AAA0B;;AAalC;;AAIA;;;AA+BQ;;;AAGA;;;AA8Bc;;AAmChB;AAmBU;AACF;AA0BhB;AAEA;;"}
+{"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,11 +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 { 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 { FormLabel } from '../../form/FormLabel.js';
-import { FormHelperText } from '../../form/FormHelperText.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';
@@ -154,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
@@ -261,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
@@ -294,13 +295,19 @@ 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) {
@@ -308,14 +315,27 @@ function Select({ value: valueProp, defaultValue, options, placeholder = 'Select
                 }
             }, 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(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 &&
+                }), "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":";;;;;;;;;;;;;AAuCA;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;;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;;;;AAcR;AAEA;;;AA8BQ;;;;AAID;AAmCD;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.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React, { useId, useState, useRef, useMemo, useCallback } from 'react';
-import { CloseIcon } from '../../Icons/CloseIcon.js';
 import { FormHelperText } from '../../form/FormHelperText.js';
 import { FormLabel } from '../../form/FormLabel.js';
+import { CloseIcon } from '../../Icons/CloseIcon.js';
 import { useControlledState } from '../../../hooks/useControlledState/useControlledState.js';
 import { useMergedRef } from '../../../hooks/useMergedRef/useMergedRef.js';
 import { cx } from '../../../utils/cx.js';
@@ -159,7 +159,9 @@ function TagInput({ value, defaultValue, onChange, placeholder, separators = DEF
         }
     }, []);
     const renderChip = (tag, index) => {
-        const remove = () => removeTagAt(index);
+        const remove = () => {
+            removeTagAt(index);
+        };
         if (renderTag) {
             const state = {
                 tag,

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

@@ -1 +1 @@
-{"version":3,"file":"TagInput.js","sources":["../../../../../../src/components/controls/TagInput/TagInput.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;AAuBA;AACE;AACA;AACA;AACA;;AAGF;AAEA;AACE;AACF;AAEA;;;;;;;;;;;;;;AAcG;;AAiCD;AACA;AACA;AACA;AAEA;;;;AAIE;AACD;;;AAKD;AACA;;;AAKA;AACA;AAEA;;AAOI;AACA;AACE;AAAoB;AACpB;;;AAGA;AACA;;;AAGA;AACA;;;;AAIA;AACE;AACA;;AAEF;AACE;AACA;;;AAGJ;AACF;AAIF;;AAGI;AAAW;;AAEX;;AAKJ;;;;;AAKE;AAIF;AAEI;;;;;;;AAME;;;;;AAGO;;;;;;AAOT;;AAEE;;AAEJ;AAIF;AAEI;;;;;;;;;;;;AAeA;AACE;;;AAEA;;;;;;;AAQN;;;;;;;AAOA;;;;;AAMM;;;AAMN;;;AAGI;;;;;;;;AAaF;AAqBF;AAEA;;;;;;;;;;AAiDU;AAeZ;AAEA;;"}
+{"version":3,"file":"TagInput.js","sources":["../../../../../../src/components/controls/TagInput/TagInput.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;AA0BA;AACE;AACA;AACA;AACA;;AAGF;AAEA;AACE;AACF;AAEA;;;;;;;;;;;;;;AAcG;;AAiCD;AACA;AACA;AACA;AAEA;;;;AAIE;AACD;;;AAKD;AACA;;;AAKA;AACA;AAEA;;AAOI;AACA;AACE;AAAoB;AACpB;;;AAGA;AACA;;;AAGA;AACA;;;;AAIA;AACE;AACA;;AAEF;AACE;AACA;;;AAGJ;AACF;AAIF;;AAGI;AAAW;;AAEX;;AAKJ;;;;;AAKE;AAIF;AAEI;;;;;;;AAME;;;;;AAGO;;;;;;AAOT;;AAEE;;AAEJ;AAIF;AAEI;;;;;;;;;;;;AAeA;AACE;;;AAEA;;;;;;;AAQN;;;;;;;AAOA;;;;;AAMM;;;AAMN;;;AAGE;;AAEE;;;;;;;;AAaF;AAqBF;AAEA;;;;;;;;;;AAwDU;AAeZ;AAEA;;"}

package/dist/esm/components/controls/TreeView/TreeNode.css.js

@@ -1,15 +1,16 @@
-import './../../../assets/src/components/controls/TreeView/TreeNode.css.ts.vanilla-B_f8pUb8.css';
+import './../../../assets/src/components/controls/TreeView/TreeNode.css.ts.vanilla-DXPJRWZZ.css';
 import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
 
-var actionsStyle = 'TreeNode_actionsStyle__8ws3nev';
-var chevronRecipe = createRuntimeFn({defaultClassName:'TreeNode_chevronRecipe__8ws3nef',variantClassNames:{size:{sm:'TreeNode_chevronRecipe_size_sm__8ws3neg',md:'TreeNode_chevronRecipe_size_md__8ws3neh',lg:'TreeNode_chevronRecipe_size_lg__8ws3nei'},expanded:{true:'TreeNode_chevronRecipe_expanded_true__8ws3nej',false:'TreeNode_chevronRecipe_expanded_false__8ws3nek'},visible:{true:'TreeNode_chevronRecipe_visible_true__8ws3nel',false:'TreeNode_chevronRecipe_visible_false__8ws3nem'}},defaultVariants:{size:'md',expanded:false,visible:true},compoundVariants:[]});
+var actionsStyle = 'TreeNode_actionsStyle__8ws3new';
+var chevronRecipe = createRuntimeFn({defaultClassName:'TreeNode_chevronRecipe__8ws3neg',variantClassNames:{size:{sm:'TreeNode_chevronRecipe_size_sm__8ws3neh',md:'TreeNode_chevronRecipe_size_md__8ws3nei',lg:'TreeNode_chevronRecipe_size_lg__8ws3nej'},expanded:{true:'TreeNode_chevronRecipe_expanded_true__8ws3nek',false:'TreeNode_chevronRecipe_expanded_false__8ws3nel'},visible:{true:'TreeNode_chevronRecipe_visible_true__8ws3nem',false:'TreeNode_chevronRecipe_visible_false__8ws3nen'}},defaultVariants:{size:'md',expanded:false,visible:true},compoundVariants:[]});
+var dropTargetStyle = 'TreeNode_dropTargetStyle__8ws3nef';
 var guideLineLeftVar = 'var(--guideLineLeftVar__8ws3ne1)';
-var guideLineStyle = 'TreeNode_guideLineStyle__8ws3ne10';
-var iconRecipe = createRuntimeFn({defaultClassName:'TreeNode_iconRecipe__8ws3nen',variantClassNames:{size:{sm:'TreeNode_iconRecipe_size_sm__8ws3neo',md:'TreeNode_iconRecipe_size_md__8ws3nep',lg:'TreeNode_iconRecipe_size_lg__8ws3neq'}},defaultVariants:{size:'md'},compoundVariants:[]});
-var labelRecipe = createRuntimeFn({defaultClassName:'TreeNode_labelRecipe__8ws3ner',variantClassNames:{size:{sm:'TreeNode_labelRecipe_size_sm__8ws3nes',md:'TreeNode_labelRecipe_size_md__8ws3net',lg:'TreeNode_labelRecipe_size_lg__8ws3neu'}},defaultVariants:{size:'md'},compoundVariants:[]});
+var guideLineStyle = 'TreeNode_guideLineStyle__8ws3ne11';
+var iconRecipe = createRuntimeFn({defaultClassName:'TreeNode_iconRecipe__8ws3neo',variantClassNames:{size:{sm:'TreeNode_iconRecipe_size_sm__8ws3nep',md:'TreeNode_iconRecipe_size_md__8ws3neq',lg:'TreeNode_iconRecipe_size_lg__8ws3ner'}},defaultVariants:{size:'md'},compoundVariants:[]});
+var labelRecipe = createRuntimeFn({defaultClassName:'TreeNode_labelRecipe__8ws3nes',variantClassNames:{size:{sm:'TreeNode_labelRecipe_size_sm__8ws3net',md:'TreeNode_labelRecipe_size_md__8ws3neu',lg:'TreeNode_labelRecipe_size_lg__8ws3nev'}},defaultVariants:{size:'md'},compoundVariants:[]});
 var paddingLeftVar = 'var(--paddingLeftVar__8ws3ne0)';
-var renameInputRecipe = createRuntimeFn({defaultClassName:'TreeNode_renameInputRecipe__8ws3new',variantClassNames:{size:{sm:'TreeNode_renameInputRecipe_size_sm__8ws3nex',md:'TreeNode_renameInputRecipe_size_md__8ws3ney',lg:'TreeNode_renameInputRecipe_size_lg__8ws3nez'}},defaultVariants:{size:'md'},compoundVariants:[]});
+var renameInputRecipe = createRuntimeFn({defaultClassName:'TreeNode_renameInputRecipe__8ws3nex',variantClassNames:{size:{sm:'TreeNode_renameInputRecipe_size_sm__8ws3ney',md:'TreeNode_renameInputRecipe_size_md__8ws3nez',lg:'TreeNode_renameInputRecipe_size_lg__8ws3ne10'}},defaultVariants:{size:'md'},compoundVariants:[]});
 var rowRecipe = createRuntimeFn({defaultClassName:'TreeNode_rowRecipe__8ws3ne2',variantClassNames:{size:{sm:'TreeNode_rowRecipe_size_sm__8ws3ne3',md:'TreeNode_rowRecipe_size_md__8ws3ne4',lg:'TreeNode_rowRecipe_size_lg__8ws3ne5'},selected:{true:'TreeNode_rowRecipe_selected_true__8ws3ne6',false:'TreeNode_rowRecipe_selected_false__8ws3ne7'},focused:{true:'TreeNode_rowRecipe_focused_true__8ws3ne8',false:'TreeNode_rowRecipe_focused_false__8ws3ne9'},disabled:{true:'TreeNode_rowRecipe_disabled_true__8ws3nea',false:'TreeNode_rowRecipe_disabled_false__8ws3neb'}},defaultVariants:{size:'md',selected:false,focused:false,disabled:false},compoundVariants:[[{selected:true},'TreeNode_rowRecipe_compound_0__8ws3nec'],[{selected:false},'TreeNode_rowRecipe_compound_1__8ws3ned'],[{focused:true,selected:false},'TreeNode_rowRecipe_compound_2__8ws3nee']]});
 
-export { actionsStyle, chevronRecipe, guideLineLeftVar, guideLineStyle, iconRecipe, labelRecipe, paddingLeftVar, renameInputRecipe, rowRecipe };
+export { actionsStyle, chevronRecipe, dropTargetStyle, guideLineLeftVar, guideLineStyle, iconRecipe, labelRecipe, paddingLeftVar, renameInputRecipe, rowRecipe };
 //# sourceMappingURL=TreeNode.css.js.map

package/dist/esm/components/controls/TreeView/TreeNode.css.js.map

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