entangle-ui 0.8.2 → 0.9.0

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

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

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

@@ -0,0 +1,20 @@
+import './../../../assets/src/components/controls/FileUploader/FileUploader.css.ts.vanilla-T4nRiI7s.css';
+import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+
+var containerStyle = 'FileUploader_containerStyle__yf371x0';
+var dropZoneHintStyle = 'FileUploader_dropZoneHintStyle__yf371xc';
+var dropZonePrimaryStyle = 'FileUploader_dropZonePrimaryStyle__yf371xb';
+var dropZoneRecipe = createRuntimeFn({defaultClassName:'FileUploader_dropZoneRecipe__yf371x1',variantClassNames:{size:{sm:'FileUploader_dropZoneRecipe_size_sm__yf371x2',md:'FileUploader_dropZoneRecipe_size_md__yf371x3',lg:'FileUploader_dropZoneRecipe_size_lg__yf371x4'},dragging:{true:'FileUploader_dropZoneRecipe_dragging_true__yf371x5',false:'FileUploader_dropZoneRecipe_dragging_false__yf371x6'},disabled:{true:'FileUploader_dropZoneRecipe_disabled_true__yf371x7',false:'FileUploader_dropZoneRecipe_disabled_false__yf371x8'},error:{true:'FileUploader_dropZoneRecipe_error_true__yf371x9',false:'FileUploader_dropZoneRecipe_error_false__yf371xa'}},defaultVariants:{size:'md',dragging:false,disabled:false,error:false},compoundVariants:[]});
+var fileListStyle = 'FileUploader_fileListStyle__yf371xe';
+var fileMetaStyle = 'FileUploader_fileMetaStyle__yf371xk';
+var fileNameStyle = 'FileUploader_fileNameStyle__yf371xl';
+var fileRowRecipe = createRuntimeFn({defaultClassName:'FileUploader_fileRowRecipe__yf371xf',variantClassNames:{status:{pending:'FileUploader_fileRowRecipe_status_pending__yf371xg',uploading:'FileUploader_fileRowRecipe_status_uploading__yf371xh',done:'FileUploader_fileRowRecipe_status_done__yf371xi',error:'FileUploader_fileRowRecipe_status_error__yf371xj'}},defaultVariants:{status:'pending'},compoundVariants:[]});
+var fileSubStyle = 'FileUploader_fileSubStyle__yf371xm';
+var hiddenInputStyle = 'FileUploader_hiddenInputStyle__yf371xd';
+var progressBarStyle = 'FileUploader_progressBarStyle__yf371xn';
+var progressFillRecipe = createRuntimeFn({defaultClassName:'FileUploader_progressFillRecipe__yf371xo',variantClassNames:{status:{pending:'FileUploader_progressFillRecipe_status_pending__yf371xp',uploading:'FileUploader_progressFillRecipe_status_uploading__yf371xq',done:'FileUploader_progressFillRecipe_status_done__yf371xr',error:'FileUploader_progressFillRecipe_status_error__yf371xs'}},defaultVariants:{status:'uploading'},compoundVariants:[]});
+var removeButtonStyle = 'FileUploader_removeButtonStyle__yf371xt';
+var statusBadgeRecipe = createRuntimeFn({defaultClassName:'FileUploader_statusBadgeRecipe__yf371xu',variantClassNames:{status:{pending:'FileUploader_statusBadgeRecipe_status_pending__yf371xv',uploading:'FileUploader_statusBadgeRecipe_status_uploading__yf371xw',done:'FileUploader_statusBadgeRecipe_status_done__yf371xx',error:'FileUploader_statusBadgeRecipe_status_error__yf371xy'}},defaultVariants:{status:'pending'},compoundVariants:[]});
+
+export { containerStyle, dropZoneHintStyle, dropZonePrimaryStyle, dropZoneRecipe, fileListStyle, fileMetaStyle, fileNameStyle, fileRowRecipe, fileSubStyle, hiddenInputStyle, progressBarStyle, progressFillRecipe, removeButtonStyle, statusBadgeRecipe };
+//# sourceMappingURL=FileUploader.css.js.map

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

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

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

@@ -0,0 +1,264 @@
+"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 { useControlledState } from '../../../hooks/useControlledState/useControlledState.js';
+import { useMergedRef } from '../../../hooks/useMergedRef/useMergedRef.js';
+import { cx } from '../../../utils/cx.js';
+import { dropZonePrimaryStyle, dropZoneHintStyle, hiddenInputStyle, dropZoneRecipe, fileListStyle, containerStyle, fileMetaStyle, fileNameStyle, fileSubStyle, statusBadgeRecipe, progressBarStyle, progressFillRecipe, removeButtonStyle, fileRowRecipe } from './FileUploader.css.js';
+
+let __fileUploaderIdCounter = 0;
+function nextFileId() {
+    __fileUploaderIdCounter += 1;
+    return `eui-file-${String(Date.now())}-${String(__fileUploaderIdCounter)}`;
+}
+const SIZE_UNITS = ['B', 'KB', 'MB', 'GB', 'TB'];
+function formatBytes(bytes) {
+    if (!Number.isFinite(bytes) || bytes < 0)
+        return '';
+    if (bytes === 0)
+        return '0 B';
+    const exponent = Math.min(SIZE_UNITS.length - 1, Math.floor(Math.log(bytes) / Math.log(1024)));
+    const value = bytes / Math.pow(1024, exponent);
+    const formatted = value >= 100 || exponent === 0 ? value.toFixed(0) : value.toFixed(1);
+    return `${formatted} ${SIZE_UNITS[exponent] ?? ''}`;
+}
+function fileMatchesAccept(file, accept) {
+    const tokens = accept
+        .split(',')
+        .map(t => t.trim().toLowerCase())
+        .filter(Boolean);
+    if (tokens.length === 0)
+        return true;
+    const name = file.name.toLowerCase();
+    const type = file.type.toLowerCase();
+    for (const token of tokens) {
+        if (token.startsWith('.')) {
+            if (name.endsWith(token))
+                return true;
+        }
+        else if (token.endsWith('/*')) {
+            const prefix = token.slice(0, -2);
+            if (type.startsWith(`${prefix}/`))
+                return true;
+        }
+        else if (token === type) {
+            return true;
+        }
+    }
+    return false;
+}
+/**
+ * Drag-and-drop file uploader with click-to-browse fallback. Renders a list
+ * of uploaded items with per-file status (`pending` / `uploading` / `done` /
+ * `error`) and an animated progress bar.
+ *
+ * The component itself is purely presentational around the file list — it
+ * does not perform the actual upload. The consumer is expected to:
+ *   1. Listen to `onFilesAdd` (or `onChange`) to know which files were
+ *      accepted by the uploader.
+ *   2. Drive the upload (fetch / XHR / SDK) externally.
+ *   3. Reflect progress back into the component by passing a controlled
+ *      `value` and updating the `status` / `progress` of each item.
+ *
+ * @example
+ * ```tsx
+ * const [items, setItems] = useState<FileUploaderItem[]>([]);
+ * <FileUploader
+ *   value={items}
+ *   onChange={setItems}
+ *   accept="image/*,.pdf"
+ *   maxSize={5 * 1024 * 1024}
+ *   onFilesAdd={files => uploadAll(files, setItems)}
+ * />
+ * ```
+ */
+function FileUploader({ value, defaultValue, onChange, onFilesAdd, onFileRemove, onReject, accept, multiple = true, maxFiles, maxSize, minSize, validate, renderItem, size = 'md', label, helperText, error = false, errorMessage, disabled = false, required = false, dropZoneText = 'Drag files here or click to browse', dropZoneHint, name, className, style, testId, id: idProp, ref, ...rest }) {
+    const autoId = useId();
+    const fieldId = idProp ?? autoId;
+    const labelId = `${fieldId}-label`;
+    const helperId = `${fieldId}-helper`;
+    const inputRef = useRef(null);
+    const dropZoneRef = useRef(null);
+    const containerRef = useRef(null);
+    const setContainerRef = useMergedRef(containerRef, ref);
+    const [items, setItems] = useControlledState({
+        value,
+        defaultValue,
+        onChange,
+        fallback: [],
+    });
+    const [dragging, setDragging] = useState(false);
+    const dragCounterRef = useRef(0);
+    const validateFile = useCallback((file, currentCount) => {
+        if (typeof maxFiles === 'number' && currentCount >= maxFiles) {
+            return 'max-files';
+        }
+        if (accept && !fileMatchesAccept(file, accept)) {
+            return 'wrong-type';
+        }
+        if (typeof maxSize === 'number' && file.size > maxSize) {
+            return 'too-large';
+        }
+        if (typeof minSize === 'number' && file.size < minSize) {
+            return 'too-small';
+        }
+        if (validate) {
+            const result = validate(file);
+            if (result === false)
+                return 'invalid';
+            if (typeof result === 'string')
+                return result;
+        }
+        return null;
+    }, [accept, maxFiles, maxSize, minSize, validate]);
+    const acceptFiles = useCallback((incoming) => {
+        if (incoming.length === 0)
+            return;
+        const accepted = [];
+        const newItems = [];
+        let count = items.length;
+        const list = multiple ? incoming : incoming.slice(0, 1);
+        for (const file of list) {
+            const rejection = validateFile(file, count);
+            if (rejection) {
+                onReject?.(file, rejection);
+                continue;
+            }
+            accepted.push(file);
+            newItems.push({
+                id: nextFileId(),
+                file,
+                status: 'pending',
+            });
+            count += 1;
+        }
+        if (newItems.length === 0)
+            return;
+        // In single mode, replace any existing item.
+        const next = multiple ? [...items, ...newItems] : newItems;
+        setItems(next);
+        onFilesAdd?.(accepted);
+    }, [items, multiple, onFilesAdd, onReject, setItems, validateFile]);
+    const removeAt = useCallback((index) => {
+        if (index < 0 || index >= items.length)
+            return;
+        const removed = items[index];
+        const next = items.slice(0, index).concat(items.slice(index + 1));
+        setItems(next);
+        if (removed)
+            onFileRemove?.(removed);
+    }, [items, onFileRemove, setItems]);
+    const handleInputChange = useCallback((event) => {
+        const list = event.target.files;
+        if (!list)
+            return;
+        acceptFiles(Array.from(list));
+        // Reset so selecting the same file again still fires onChange.
+        event.target.value = '';
+    }, [acceptFiles]);
+    const openPicker = useCallback(() => {
+        if (disabled)
+            return;
+        inputRef.current?.click();
+    }, [disabled]);
+    const handleZoneKeyDown = useCallback((event) => {
+        if (disabled)
+            return;
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            openPicker();
+        }
+    }, [disabled, openPicker]);
+    const handleDragEnter = useCallback((event) => {
+        if (disabled)
+            return;
+        event.preventDefault();
+        dragCounterRef.current += 1;
+        if (dragCounterRef.current === 1)
+            setDragging(true);
+    }, [disabled]);
+    const handleDragOver = useCallback((event) => {
+        if (disabled)
+            return;
+        event.preventDefault();
+        if (event.dataTransfer)
+            event.dataTransfer.dropEffect = 'copy';
+    }, [disabled]);
+    const handleDragLeave = useCallback((event) => {
+        if (disabled)
+            return;
+        event.preventDefault();
+        dragCounterRef.current = Math.max(0, dragCounterRef.current - 1);
+        if (dragCounterRef.current === 0)
+            setDragging(false);
+    }, [disabled]);
+    const handleDrop = useCallback((event) => {
+        if (disabled)
+            return;
+        event.preventDefault();
+        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));
+        }
+        else if (dt.items.length > 0) {
+            for (const item of Array.from(dt.items)) {
+                if (item.kind === 'file') {
+                    const f = item.getAsFile();
+                    if (f)
+                        dropped.push(f);
+                }
+            }
+        }
+        acceptFiles(dropped);
+    }, [acceptFiles, disabled]);
+    const showHelperText = error && errorMessage ? errorMessage : helperText;
+    const renderRow = (item, index) => {
+        if (renderItem) {
+            return (jsx(React.Fragment, { children: renderItem({
+                    item,
+                    index,
+                    disabled,
+                    remove: () => {
+                        removeAt(index);
+                    },
+                }) }, item.id));
+        }
+        const progress = Math.max(0, Math.min(100, item.progress ?? 0));
+        const sub = item.errorMessage ?? formatBytes(item.file.size);
+        return (jsxs("div", { className: fileRowRecipe({ status: item.status }), "data-testid": testId ? `${testId}-item-${item.id}` : undefined, children: [jsxs("div", { className: fileMetaStyle, children: [jsx("span", { className: fileNameStyle, title: item.file.name, children: item.file.name }), jsxs("span", { className: fileSubStyle, children: [jsx("span", { className: statusBadgeRecipe({ status: item.status }), children: item.status }), jsx("span", { children: sub })] }), (item.status === 'uploading' ||
+                            (item.status === 'pending' && progress > 0)) && (jsx("div", { className: progressBarStyle, "aria-hidden": "true", children: jsx("div", { className: progressFillRecipe({ status: item.status }), style: { width: `${String(progress)}%` } }) }))] }), jsx("button", { type: "button", className: removeButtonStyle, "aria-label": `Remove ${item.file.name}`, disabled: disabled, onClick: () => {
+                        removeAt(index);
+                    }, children: jsx(TrashIcon, { size: "sm", decorative: true }) })] }, item.id));
+    };
+    const acceptHint = useMemo(() => {
+        if (dropZoneHint !== undefined)
+            return dropZoneHint;
+        const parts = [];
+        if (accept)
+            parts.push(accept);
+        if (typeof maxSize === 'number')
+            parts.push(`up to ${formatBytes(maxSize)}`);
+        if (typeof maxFiles === 'number')
+            parts.push(`max ${String(maxFiles)} files`);
+        return parts.length > 0 ? parts.join(' • ') : null;
+    }, [accept, dropZoneHint, maxFiles, maxSize]);
+    return (jsxs("div", { ref: setContainerRef, className: cx(containerStyle, className), style: style, "data-testid": testId, ...rest, children: [label && (jsx(FormLabel, { id: labelId, htmlFor: fieldId, required: required, disabled: disabled, children: label })), jsxs("div", { ref: dropZoneRef, role: "button", tabIndex: disabled ? -1 : 0, "aria-disabled": disabled || undefined, "aria-labelledby": label ? labelId : undefined, "aria-describedby": showHelperText ? helperId : undefined, className: dropZoneRecipe({
+                    size,
+                    dragging,
+                    disabled,
+                    error,
+                }), onClick: openPicker, onKeyDown: handleZoneKeyDown, onDragEnter: handleDragEnter, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, "data-testid": testId ? `${testId}-dropzone` : undefined, children: [jsx(CloudUploadIcon, { size: size === 'lg' ? 32 : size === 'sm' ? 18 : 24, decorative: true }), jsx("span", { className: dropZonePrimaryStyle, children: dropZoneText }), acceptHint && jsx("span", { className: dropZoneHintStyle, children: acceptHint }), jsx("input", { ref: inputRef, id: fieldId, type: "file", name: name, accept: accept, multiple: multiple, required: required, disabled: disabled, onChange: handleInputChange, className: hiddenInputStyle, "aria-hidden": "true", tabIndex: -1, "data-testid": testId ? `${testId}-input` : undefined })] }), items.length > 0 && (jsx("div", { className: fileListStyle, children: items.map((item, idx) => renderRow(item, idx)) })), showHelperText && (jsx(FormHelperText, { id: helperId, error: error, children: showHelperText }))] }));
+}
+FileUploader.displayName = 'FileUploader';
+
+export { FileUploader };
+//# sourceMappingURL=FileUploader.js.map

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

@@ -0,0 +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;;"}

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

@@ -0,0 +1,23 @@
+import './../../../assets/src/components/controls/MultiSelect/MultiSelect.css.ts.vanilla-CdYayqaF.css';
+import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+
+var checkboxRecipe = createRuntimeFn({defaultClassName:'MultiSelect_checkboxRecipe__1a6uxqy1e',variantClassNames:{selected:{true:'MultiSelect_checkboxRecipe_selected_true__1a6uxqy1f',false:'MultiSelect_checkboxRecipe_selected_false__1a6uxqy1g'}},defaultVariants:{selected:false},compoundVariants:[]});
+var chevronRecipe = createRuntimeFn({defaultClassName:'MultiSelect_chevronRecipe__1a6uxqyy',variantClassNames:{open:{true:'MultiSelect_chevronRecipe_open_true__1a6uxqyz',false:'MultiSelect_chevronRecipe_open_false__1a6uxqy10'}},defaultVariants:{open:false},compoundVariants:[]});
+var chipLabelStyle = 'MultiSelect_chipLabelStyle__1a6uxqyt';
+var chipRecipe = createRuntimeFn({defaultClassName:'MultiSelect_chipRecipe__1a6uxqyp',variantClassNames:{size:{sm:'MultiSelect_chipRecipe_size_sm__1a6uxqyq',md:'MultiSelect_chipRecipe_size_md__1a6uxqyr',lg:'MultiSelect_chipRecipe_size_lg__1a6uxqys'}},defaultVariants:{size:'md'},compoundVariants:[]});
+var chipRemoveStyle = 'MultiSelect_chipRemoveStyle__1a6uxqyu';
+var clearButtonStyle = 'MultiSelect_clearButtonStyle__1a6uxqyx';
+var containerStyle = 'MultiSelect_containerStyle__1a6uxqy0';
+var dropdownStyle = 'MultiSelect_dropdownStyle__1a6uxqy12';
+var emptyMessageStyle = 'MultiSelect_emptyMessageStyle__1a6uxqy1d';
+var groupLabelStyle = 'MultiSelect_groupLabelStyle__1a6uxqy1c';
+var moreBadgeStyle = 'MultiSelect_moreBadgeStyle__1a6uxqyv';
+var optionItemRecipe = createRuntimeFn({defaultClassName:'MultiSelect_optionItemRecipe__1a6uxqy15',variantClassNames:{active:{true:'MultiSelect_optionItemRecipe_active_true__1a6uxqy16',false:'MultiSelect_optionItemRecipe_active_false__1a6uxqy17'},selected:{true:'MultiSelect_optionItemRecipe_selected_true__1a6uxqy18',false:'MultiSelect_optionItemRecipe_selected_false__1a6uxqy19'},disabled:{true:'MultiSelect_optionItemRecipe_disabled_true__1a6uxqy1a',false:'MultiSelect_optionItemRecipe_disabled_false__1a6uxqy1b'}},defaultVariants:{active:false,selected:false,disabled:false},compoundVariants:[]});
+var optionsListStyle = 'MultiSelect_optionsListStyle__1a6uxqy14';
+var placeholderStyle = 'MultiSelect_placeholderStyle__1a6uxqyw';
+var searchInputStyle = 'MultiSelect_searchInputStyle__1a6uxqy13';
+var triggerContentStyle = 'MultiSelect_triggerContentStyle__1a6uxqyo';
+var triggerRecipe = createRuntimeFn({defaultClassName:'MultiSelect_triggerRecipe__1a6uxqy1',variantClassNames:{size:{sm:'MultiSelect_triggerRecipe_size_sm__1a6uxqy2',md:'MultiSelect_triggerRecipe_size_md__1a6uxqy3',lg:'MultiSelect_triggerRecipe_size_lg__1a6uxqy4'},variant:{'default':'MultiSelect_triggerRecipe_variant_default__1a6uxqy5',ghost:'MultiSelect_triggerRecipe_variant_ghost__1a6uxqy6',filled:'MultiSelect_triggerRecipe_variant_filled__1a6uxqy7'},open:{true:'MultiSelect_triggerRecipe_open_true__1a6uxqy8',false:'MultiSelect_triggerRecipe_open_false__1a6uxqy9'},error:{true:'MultiSelect_triggerRecipe_error_true__1a6uxqya',false:'MultiSelect_triggerRecipe_error_false__1a6uxqyb'},disabled:{true:'MultiSelect_triggerRecipe_disabled_true__1a6uxqyc',false:'MultiSelect_triggerRecipe_disabled_false__1a6uxqyd'},empty:{true:'MultiSelect_triggerRecipe_empty_true__1a6uxqye',false:'MultiSelect_triggerRecipe_empty_false__1a6uxqyf'}},defaultVariants:{size:'md',variant:'default',open:false,disabled:false,error:false,empty:true},compoundVariants:[[{open:true},'MultiSelect_triggerRecipe_compound_0__1a6uxqyg'],[{error:true,variant:'default'},'MultiSelect_triggerRecipe_compound_1__1a6uxqyh'],[{error:true,variant:'filled'},'MultiSelect_triggerRecipe_compound_2__1a6uxqyi'],[{open:true,variant:'default'},'MultiSelect_triggerRecipe_compound_3__1a6uxqyj'],[{open:true,variant:'filled'},'MultiSelect_triggerRecipe_compound_4__1a6uxqyk'],[{empty:true,variant:'default'},'MultiSelect_triggerRecipe_compound_5__1a6uxqyl'],[{empty:true,variant:'ghost'},'MultiSelect_triggerRecipe_compound_6__1a6uxqym'],[{empty:true,variant:'filled'},'MultiSelect_triggerRecipe_compound_7__1a6uxqyn']]});
+
+export { checkboxRecipe, chevronRecipe, chipLabelStyle, chipRecipe, chipRemoveStyle, clearButtonStyle, containerStyle, dropdownStyle, emptyMessageStyle, groupLabelStyle, moreBadgeStyle, optionItemRecipe, optionsListStyle, placeholderStyle, searchInputStyle, triggerContentStyle, triggerRecipe };
+//# sourceMappingURL=MultiSelect.css.js.map

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

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

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

@@ -0,0 +1,269 @@
+"use client";
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useId, useRef, useState, useMemo, useCallback, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { 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';
+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]);
+    const filter = filterFn ?? defaultFilter;
+    const filteredOptions = useMemo(() => {
+        if (!searchable || !searchQuery)
+            return allOptions;
+        return allOptions.filter(opt => filter(opt, searchQuery));
+    }, [allOptions, searchable, searchQuery, 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);
+        if (hasGroups && !searchQuery) {
+            let flatIndex = 0;
+            return options.map((item, groupIdx) => {
+                if (isOptionGroup(item)) {
+                    const groupOptions = item.options;
+                    const startIdx = flatIndex;
+                    flatIndex += groupOptions.length;
+                    return (jsxs("div", { role: "group", "aria-label": item.label, children: [jsx("div", { className: groupLabelStyle, children: item.label }), groupOptions.map((opt, optIdx) => 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;
+        return (jsxs("div", { role: "option", "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();
+                }
+            }, 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: () => (isOpen ? close() : 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);
+                                            }, 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 &&
+                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":";;;;;;;;;;;;;;;;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;;"}

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

@@ -2,6 +2,9 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useId, useRef, useState, useMemo, useCallback, useEffect } from 'react';
 import { createPortal } from 'react-dom';
+import { CheckIcon } from '../../Icons/CheckIcon.js';
+import { ChevronDownIcon } from '../../Icons/ChevronDownIcon.js';
+import { CloseIcon } from '../../Icons/CloseIcon.js';
 import { FormLabel } from '../../form/FormLabel.js';
 import { FormHelperText } from '../../form/FormHelperText.js';
 import { ScrollArea } from '../../layout/ScrollArea/ScrollArea.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.
@@ -305,7 +306,7 @@ function Select({ value: valueProp, defaultValue, options, placeholder = 'Select
                 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({
                     size,
@@ -314,7 +315,7 @@ function Select({ value: valueProp, defaultValue, options, placeholder = 'Select
                     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, "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);