entangle-ui 0.8.2 → 0.9.0

package/dist/esm/components/feedback/CommandPalette/CommandPalette.js

@@ -0,0 +1,261 @@
+"use client";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useId, useRef, useState, useEffect, useMemo, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+import { SearchIcon } from '../../Icons/SearchIcon.js';
+import { Kbd } from '../../primitives/Kbd/Kbd.js';
+import { useDebouncedValue } from '../../../hooks/useDebounced/useDebouncedValue.js';
+import { cx } from '../../../utils/cx.js';
+import { overlayStyle, inputWrapperStyle, searchIconStyle, inputStyle, emptyStyle, listStyle, groupHeaderStyle, itemSelectedStyle, itemStyle, panelStyle, itemIconStyle, itemTextStyle, itemLabelStyle, itemDescriptionStyle, itemShortcutStyle } from './CommandPalette.css.js';
+import { fuzzyFilter } from './fuzzySearch.js';
+import { useRecentItems } from './useRecentItems.js';
+
+const DEFAULT_GROUP = 'default';
+const RECENT_GROUP = '__recent__';
+function getItemSearchStrings(item) {
+    const out = [item.label];
+    if (item.description)
+        out.push(item.description);
+    if (item.keywords)
+        out.push(...item.keywords);
+    return out;
+}
+/**
+ * Search-driven command list shown as a centred floating dialog. Type to
+ * fuzzy-filter, ArrowUp/ArrowDown to navigate, Enter to select, Escape to
+ * close. Recent selections are tracked in localStorage when `recentKey` is
+ * set. The component does not bind a global hotkey — wire `useHotkey` in
+ * the consumer.
+ *
+ * @example
+ * ```tsx
+ * useHotkey('Mod+K', () => { setOpen(true); });
+ *
+ * <CommandPalette
+ *   open={open}
+ *   onClose={() => setOpen(false)}
+ *   items={[
+ *     { id: 'open', label: 'Open File', shortcut: 'Cmd+O', group: 'File' },
+ *     { id: 'save', label: 'Save', shortcut: 'Cmd+S', group: 'File' },
+ *   ]}
+ *   onSelect={(item) => runCommand(item.id)}
+ *   recentKey="myapp:command-palette"
+ * />
+ * ```
+ */
+const CommandPalette = ({ open, onClose, items, onSelect, placeholder = 'Type a command or search...', emptyState, recentLabel = 'Recent', recentKey, maxRecent = 5, debounceMs = 150, renderItem, portal = true, maxHeight = 400, width = 640, className, style, testId, id, ...rest }) => {
+    const autoId = useId();
+    const inputId = id ?? `command-palette-${autoId}`;
+    const listboxId = `${inputId}-listbox`;
+    const inputRef = useRef(null);
+    const listRef = useRef(null);
+    const [query, setQuery] = useState('');
+    const [activeIndex, setActiveIndex] = useState(0);
+    const debouncedQuery = useDebouncedValue(query, debounceMs);
+    const { recentIds, pushRecent } = useRecentItems({
+        storageKey: recentKey,
+        maxRecent,
+    });
+    // Reset state when the palette opens.
+    useEffect(() => {
+        if (open) {
+            setQuery('');
+            setActiveIndex(0);
+        }
+    }, [open]);
+    // Focus the input on open.
+    useEffect(() => {
+        if (open) {
+            const t = setTimeout(() => {
+                inputRef.current?.focus();
+            }, 0);
+            return () => {
+                clearTimeout(t);
+            };
+        }
+        return undefined;
+    }, [open]);
+    // Resolve groups + filtering.
+    const { rows, selectableItems } = useMemo(() => {
+        const groupOrder = [];
+        const groupMap = new Map();
+        if (debouncedQuery === '' && recentIds.length > 0) {
+            const byId = new Map(items.map(it => [it.id, it]));
+            const recent = [];
+            for (const id of recentIds) {
+                const it = byId.get(id);
+                if (it && !it.disabled)
+                    recent.push(it);
+            }
+            if (recent.length > 0) {
+                groupOrder.push(RECENT_GROUP);
+                groupMap.set(RECENT_GROUP, recent);
+            }
+        }
+        const filtered = fuzzyFilter(debouncedQuery, items, getItemSearchStrings);
+        const filteredItems = filtered.map(r => r.item);
+        for (const item of filteredItems) {
+            const g = item.group ?? DEFAULT_GROUP;
+            if (!groupMap.has(g)) {
+                groupOrder.push(g);
+                groupMap.set(g, []);
+            }
+            groupMap.get(g)?.push(item);
+        }
+        const rows = [];
+        const flat = [];
+        let nextIndex = 0;
+        for (const groupKey of groupOrder) {
+            const list = groupMap.get(groupKey);
+            if (!list || list.length === 0)
+                continue;
+            const groupLabel = groupKey === RECENT_GROUP
+                ? recentLabel
+                : groupKey === DEFAULT_GROUP
+                    ? ''
+                    : groupKey;
+            if (groupLabel) {
+                rows.push({
+                    type: 'header',
+                    group: groupKey,
+                    groupLabel,
+                });
+            }
+            for (const item of list) {
+                const index = nextIndex++;
+                rows.push({
+                    type: 'item',
+                    group: groupKey,
+                    groupLabel,
+                    item,
+                    index,
+                });
+                flat.push(item);
+            }
+        }
+        return { rows, selectableItems: flat };
+    }, [items, debouncedQuery, recentIds, recentLabel]);
+    // Clamp activeIndex when the result list shrinks.
+    useEffect(() => {
+        setActiveIndex(prev => {
+            if (selectableItems.length === 0)
+                return 0;
+            if (prev >= selectableItems.length)
+                return selectableItems.length - 1;
+            return prev;
+        });
+    }, [selectableItems.length]);
+    const moveActive = useCallback((delta) => {
+        setActiveIndex(prev => {
+            const len = selectableItems.length;
+            if (len === 0)
+                return 0;
+            let next = prev + delta;
+            if (next < 0)
+                next = len - 1;
+            if (next >= len)
+                next = 0;
+            return next;
+        });
+    }, [selectableItems.length]);
+    const runSelect = useCallback((item) => {
+        if (item.disabled)
+            return;
+        pushRecent(item.id);
+        if (item.onSelect) {
+            item.onSelect();
+        }
+        else {
+            onSelect?.(item);
+        }
+        onClose();
+    }, [onClose, onSelect, pushRecent]);
+    const handleKeyDown = useCallback((e) => {
+        if (e.key === 'Escape') {
+            e.preventDefault();
+            onClose();
+            return;
+        }
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            moveActive(1);
+            return;
+        }
+        if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            moveActive(-1);
+            return;
+        }
+        if (e.key === 'Home') {
+            e.preventDefault();
+            setActiveIndex(0);
+            return;
+        }
+        if (e.key === 'End') {
+            e.preventDefault();
+            setActiveIndex(Math.max(0, selectableItems.length - 1));
+            return;
+        }
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            const item = selectableItems[activeIndex];
+            if (item)
+                runSelect(item);
+        }
+    }, [activeIndex, moveActive, onClose, runSelect, selectableItems]);
+    // Scroll active item into view when it changes.
+    useEffect(() => {
+        if (!open)
+            return;
+        const list = listRef.current;
+        if (!list)
+            return;
+        const el = list.querySelector(`[data-row-index="${String(activeIndex)}"]`);
+        if (el && typeof el.scrollIntoView === 'function') {
+            el.scrollIntoView({ block: 'nearest' });
+        }
+    }, [activeIndex, open]);
+    const handleOverlayClick = useCallback((e) => {
+        if (e.target === e.currentTarget) {
+            onClose();
+        }
+    }, [onClose]);
+    if (!open)
+        return null;
+    const widthCss = typeof width === 'number' ? `${String(width)}px` : width;
+    const activeId = activeIndex < selectableItems.length
+        ? `${listboxId}-item-${String(activeIndex)}`
+        : undefined;
+    const content = (jsxs(Fragment, { children: [jsx("div", { className: overlayStyle, "data-testid": testId ? `${testId}-overlay` : undefined, onClick: handleOverlayClick }), jsxs("div", { role: "dialog", "aria-modal": "true", "aria-label": "Command palette", className: cx(panelStyle, className), style: { width: widthCss, ...style }, "data-testid": testId, onKeyDown: handleKeyDown, ...rest, children: [jsxs("div", { className: inputWrapperStyle, children: [jsx("span", { className: searchIconStyle, "aria-hidden": "true", children: jsx(SearchIcon, {}) }), jsx("input", { ref: inputRef, id: inputId, type: "text", role: "combobox", "aria-expanded": "true", "aria-controls": listboxId, "aria-activedescendant": activeId, "aria-autocomplete": "list", className: inputStyle, placeholder: placeholder, value: query, onChange: e => {
+                                    setQuery(e.target.value);
+                                    setActiveIndex(0);
+                                }, "data-testid": testId ? `${testId}-input` : undefined })] }), selectableItems.length === 0 ? (jsx("div", { className: emptyStyle, "data-testid": testId ? `${testId}-empty` : undefined, children: emptyState ?? `No matches for "${debouncedQuery}"` })) : (jsx("ul", { ref: listRef, id: listboxId, role: "listbox", className: listStyle, style: { maxHeight }, children: rows.map((row, rowIndex) => {
+                            if (row.type === 'header') {
+                                return (jsx("li", { role: "presentation", className: groupHeaderStyle, children: row.groupLabel }, `hdr-${row.group}-${String(rowIndex)}`));
+                            }
+                            const item = row.item;
+                            const itemIndex = row.index;
+                            if (!item || itemIndex === undefined)
+                                return null;
+                            const isSelected = itemIndex === activeIndex;
+                            const itemDomId = `${listboxId}-item-${String(itemIndex)}`;
+                            return (jsx("li", { id: itemDomId, role: "option", "aria-selected": isSelected, "aria-disabled": item.disabled ? true : undefined, className: cx(itemStyle, isSelected && itemSelectedStyle), "data-disabled": item.disabled ? 'true' : undefined, "data-row-index": itemIndex, "data-testid": testId ? `${testId}-item-${item.id}` : undefined, onMouseEnter: () => {
+                                    if (!item.disabled)
+                                        setActiveIndex(itemIndex);
+                                }, onClick: () => {
+                                    runSelect(item);
+                                }, children: renderItem ? (renderItem(item, {
+                                    selected: isSelected,
+                                    query: debouncedQuery,
+                                })) : (jsx(DefaultItemContent, { item: item })) }, `${row.group}-${item.id}`));
+                        }) }))] })] }));
+    if (portal && typeof document !== 'undefined') {
+        return createPortal(content, document.body);
+    }
+    return content;
+};
+CommandPalette.displayName = 'CommandPalette';
+const DefaultItemContent = ({ item }) => (jsxs(Fragment, { children: [item.icon && jsx("span", { className: itemIconStyle, children: item.icon }), jsxs("span", { className: itemTextStyle, children: [jsx("span", { className: itemLabelStyle, children: item.label }), item.description && (jsx("span", { className: itemDescriptionStyle, children: item.description }))] }), item.shortcut && (jsx("span", { className: itemShortcutStyle, children: jsx(Kbd, { size: "sm", children: item.shortcut }) }))] }));
+
+export { CommandPalette };
+//# sourceMappingURL=CommandPalette.js.map

package/dist/esm/components/feedback/CommandPalette/CommandPalette.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandPalette.js","sources":["../../../../../../src/components/feedback/CommandPalette/CommandPalette.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;AAoCA;AACA;AAUA;AACE;;AACsB;;;AAEtB;AACF;AAEA;;;;;;;;;;;;;;;;;;;;;;AAsBG;AACI;AAqBL;AACA;AACA;AAEA;AACA;;;;AAMA;AACE;;AAED;;;;;;;AAQD;;;;AAKI;AACE;;AAEF;;AAEA;;AAEF;AACF;;;;AAKE;;;;AAKE;;AAEE;AAAwB;;AAE1B;AACE;AACA;;;;AAKJ;AAEA;AACE;;AAEE;AACA;;;;;;;AASJ;;AAEE;;AACA;AAEI;;AAEE;;;;AAIF;AACA;;AAED;;AAEH;AACE;;AAEE;AACA;;;;AAID;AACD;;;AAIJ;;;;;AAME;AAAkC;AAClC;AAAoC;AACpC;AACF;AACF;AAEA;;AAGM;;AACe;AACf;;AACc;;;AAEd;AACF;AACF;AAIF;;;AAGI;AACA;;;;AAGE;;AAEF;;AAKJ;AAEI;;AAEE;;;AAGF;;;;;AAKA;;AAEE;;;AAGF;;;;;AAKA;;AAEE;;;AAGF;;AAEE;AACA;;;AAEJ;;;AAMA;;AACA;AACA;;AACA;;;;AAMF;AAEA;;AAGM;;AAEJ;AAIF;AAAW;AAEX;AACA;;;;AAuCY;;AAEF;AAqBE;;;AAWA;AACA;AACA;AAAsC;AACtC;;AAEA;;;AAaI;;;AAOI;AACA;;AAOV;AAOV;;;AAGA;AACF;AAEA;AAEA;;"}

package/dist/esm/components/feedback/CommandPalette/fuzzySearch.js

@@ -0,0 +1,86 @@
+/**
+ * Score how well `query` matches `target`. Higher = better. Zero = no match.
+ *
+ * Heuristics, in priority order:
+ *   1. Exact case-insensitive match (1000).
+ *   2. Target starts with the query (800 + length bonus).
+ *   3. Target contains the query as a contiguous substring (500 + position bonus).
+ *   4. Subsequence match: every query char appears in target in order; bonuses
+ *      for consecutive matches, word-boundary matches, and earlier positions.
+ *
+ * @example
+ * ```ts
+ * fuzzyScore('opn', 'open file')  // > 0, subsequence match
+ * fuzzyScore('zzz', 'open file')  // 0
+ * ```
+ */
+function fuzzyScore(query, target) {
+    if (query === '')
+        return 1;
+    if (target === '')
+        return 0;
+    const q = query.toLowerCase();
+    const t = target.toLowerCase();
+    if (q === t)
+        return 1000;
+    if (t.startsWith(q))
+        return 800 + Math.max(0, 50 - target.length);
+    const containsAt = t.indexOf(q);
+    if (containsAt !== -1)
+        return 500 - containsAt + Math.max(0, 30 - target.length);
+    let score = 0;
+    let qi = 0;
+    let lastMatch = -2;
+    for (let ti = 0; ti < t.length && qi < q.length; ti++) {
+        const ch = t[ti];
+        if (ch === q[qi]) {
+            // Earlier matches contribute more.
+            score += Math.max(1, 30 - ti);
+            if (lastMatch === ti - 1) {
+                score += 25;
+            }
+            // Bonus when the match begins a "word" (after space/-/_/.)
+            const prev = ti > 0 ? t[ti - 1] : '';
+            if (ti === 0 ||
+                prev === ' ' ||
+                prev === '-' ||
+                prev === '_' ||
+                prev === '.') {
+                score += 20;
+            }
+            lastMatch = ti;
+            qi++;
+        }
+    }
+    if (qi !== q.length)
+        return 0;
+    return score;
+}
+/**
+ * Score a list of items against a query. Items with score 0 are dropped, the
+ * rest are sorted by descending score. The `getStrings` accessor returns one
+ * or more strings per item to score against; the highest-scoring string wins.
+ */
+function fuzzyFilter(query, items, getStrings) {
+    if (query === '') {
+        return items.map(item => ({ item, score: 1 }));
+    }
+    const result = [];
+    for (const item of items) {
+        const strings = getStrings(item);
+        let best = 0;
+        for (const s of strings) {
+            const score = fuzzyScore(query, s);
+            if (score > best)
+                best = score;
+        }
+        if (best > 0) {
+            result.push({ item, score: best });
+        }
+    }
+    result.sort((a, b) => b.score - a.score);
+    return result;
+}
+
+export { fuzzyFilter, fuzzyScore };
+//# sourceMappingURL=fuzzySearch.js.map

package/dist/esm/components/feedback/CommandPalette/fuzzySearch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fuzzySearch.js","sources":["../../../../../../src/components/feedback/CommandPalette/fuzzySearch.ts"],"sourcesContent":[null],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;AAeG;AACG,SAAU,UAAU,CAAC,KAAa,EAAE,MAAc,EAAA;IACtD,IAAI,KAAK,KAAK,EAAE;AAAE,QAAA,OAAO,CAAC;IAC1B,IAAI,MAAM,KAAK,EAAE;AAAE,QAAA,OAAO,CAAC;AAE3B,IAAA,MAAM,CAAC,GAAG,KAAK,CAAC,WAAW,EAAE;AAC7B,IAAA,MAAM,CAAC,GAAG,MAAM,CAAC,WAAW,EAAE;IAE9B,IAAI,CAAC,KAAK,CAAC;AAAE,QAAA,OAAO,IAAI;AACxB,IAAA,IAAI,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC;AAAE,QAAA,OAAO,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC;IACjE,MAAM,UAAU,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC;IAC/B,IAAI,UAAU,KAAK,EAAE;AACnB,QAAA,OAAO,GAAG,GAAG,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC;IAE3D,IAAI,KAAK,GAAG,CAAC;IACb,IAAI,EAAE,GAAG,CAAC;AACV,IAAA,IAAI,SAAS,GAAG,EAAE;IAClB,KAAK,IAAI,EAAE,GAAG,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC,MAAM,IAAI,EAAE,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,EAAE,EAAE;AACrD,QAAA,MAAM,EAAE,GAAG,CAAC,CAAC,EAAE,CAAC;AAChB,QAAA,IAAI,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,EAAE;;YAEhB,KAAK,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,GAAG,EAAE,CAAC;AAC7B,YAAA,IAAI,SAAS,KAAK,EAAE,GAAG,CAAC,EAAE;gBACxB,KAAK,IAAI,EAAE;YACb;;AAEA,YAAA,MAAM,IAAI,GAAG,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,GAAG,EAAE;YACpC,IACE,EAAE,KAAK,CAAC;AACR,gBAAA,IAAI,KAAK,GAAG;AACZ,gBAAA,IAAI,KAAK,GAAG;AACZ,gBAAA,IAAI,KAAK,GAAG;gBACZ,IAAI,KAAK,GAAG,EACZ;gBACA,KAAK,IAAI,EAAE;YACb;YACA,SAAS,GAAG,EAAE;AACd,YAAA,EAAE,EAAE;QACN;IACF;AAEA,IAAA,IAAI,EAAE,KAAK,CAAC,CAAC,MAAM;AAAE,QAAA,OAAO,CAAC;AAC7B,IAAA,OAAO,KAAK;AACd;AAOA;;;;AAIG;SACa,WAAW,CACzB,KAAa,EACb,KAAmB,EACnB,UAA0C,EAAA;AAE1C,IAAA,IAAI,KAAK,KAAK,EAAE,EAAE;AAChB,QAAA,OAAO,KAAK,CAAC,GAAG,CAAC,IAAI,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC;IAChD;IACA,MAAM,MAAM,GAAoB,EAAE;AAClC,IAAA,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE;AACxB,QAAA,MAAM,OAAO,GAAG,UAAU,CAAC,IAAI,CAAC;QAChC,IAAI,IAAI,GAAG,CAAC;AACZ,QAAA,KAAK,MAAM,CAAC,IAAI,OAAO,EAAE;YACvB,MAAM,KAAK,GAAG,UAAU,CAAC,KAAK,EAAE,CAAC,CAAC;YAClC,IAAI,KAAK,GAAG,IAAI;gBAAE,IAAI,GAAG,KAAK;QAChC;AACA,QAAA,IAAI,IAAI,GAAG,CAAC,EAAE;YACZ,MAAM,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;QACpC;IACF;AACA,IAAA,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,KAAK,CAAC;AACxC,IAAA,OAAO,MAAM;AACf;;;;"}

package/dist/esm/components/feedback/CommandPalette/useRecentItems.js

@@ -0,0 +1,63 @@
+"use client";
+import { useState, useEffect, useCallback } from 'react';
+
+function readStorage(key) {
+    if (typeof window === 'undefined')
+        return [];
+    try {
+        const raw = window.localStorage.getItem(key);
+        if (!raw)
+            return [];
+        const parsed = JSON.parse(raw);
+        if (Array.isArray(parsed)) {
+            return parsed.filter((v) => typeof v === 'string');
+        }
+        return [];
+    }
+    catch {
+        return [];
+    }
+}
+function writeStorage(key, ids) {
+    if (typeof window === 'undefined')
+        return;
+    try {
+        window.localStorage.setItem(key, JSON.stringify(ids));
+    }
+    catch {
+        // localStorage may be unavailable (private mode, full quota); silently ignore.
+    }
+}
+/**
+ * Track recently selected command ids. Backed by localStorage when
+ * `storageKey` is provided; otherwise the list is in-memory only.
+ */
+function useRecentItems({ storageKey, maxRecent = 5, }) {
+    const [recentIds, setRecentIds] = useState(() => storageKey ? readStorage(storageKey).slice(0, maxRecent) : []);
+    // Re-read storage if the key changes after mount.
+    useEffect(() => {
+        if (storageKey) {
+            setRecentIds(readStorage(storageKey).slice(0, maxRecent));
+        }
+        else {
+            setRecentIds([]);
+        }
+    }, [storageKey, maxRecent]);
+    const pushRecent = useCallback((id) => {
+        setRecentIds(prev => {
+            const next = [id, ...prev.filter(v => v !== id)].slice(0, maxRecent);
+            if (storageKey)
+                writeStorage(storageKey, next);
+            return next;
+        });
+    }, [storageKey, maxRecent]);
+    const clearRecent = useCallback(() => {
+        setRecentIds([]);
+        if (storageKey)
+            writeStorage(storageKey, []);
+    }, [storageKey]);
+    return { recentIds, pushRecent, clearRecent };
+}
+
+export { useRecentItems };
+//# sourceMappingURL=useRecentItems.js.map

package/dist/esm/components/feedback/CommandPalette/useRecentItems.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRecentItems.js","sources":["../../../../../../src/components/feedback/CommandPalette/useRecentItems.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAiBA;;AACqC;AACnC;;AAEE;AAAU;;AAEV;AACE;;AAEF;;AACA;AACA;;AAEJ;AAEA;;;AAEE;AACE;;AACA;;;AAGJ;AAEA;;;AAGG;AACG;AAIJ;;;;AAOI;;;;;AAIJ;AAEA;;;AAIM;AAAgB;AAChB;AACF;AACF;AAIF;;AAEE;AAAgB;AAClB;AAEA;AACF;;"}

package/dist/esm/components/feedback/Dialog/DialogHeader.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { CloseIcon } from '../../Icons/CloseIcon.js';
 import { useDialogContext } from './Dialog.js';
 import { cx } from '../../../utils/cx.js';
 import { dialogHeaderContentStyle, dialogTitleStyle, dialogDescriptionStyle, dialogCloseButtonStyle, dialogHeaderStyle } from './Dialog.css.js';
@@ -18,7 +19,7 @@ import { dialogHeaderContentStyle, dialogTitleStyle, dialogDescriptionStyle, dia
  */
 const DialogHeader = ({ children, showClose = true, description, className, style, testId, ref, ...rest }) => {
     const { onClose, titleId, descriptionId } = useDialogContext();
-    return (jsxs("div", { ref: ref, className: cx(dialogHeaderStyle, className), style: style, "data-testid": testId, ...rest, children: [jsxs("div", { className: dialogHeaderContentStyle, children: [jsx("div", { id: titleId, className: dialogTitleStyle, children: children }), description && (jsx("div", { id: descriptionId, className: dialogDescriptionStyle, children: description }))] }), showClose && (jsx("button", { type: "button", onClick: onClose, "aria-label": "Close dialog", className: dialogCloseButtonStyle, "data-testid": testId ? `${testId}-close` : undefined, children: jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M1 1L11 11M11 1L1 11", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) }))] }));
+    return (jsxs("div", { ref: ref, className: cx(dialogHeaderStyle, className), style: style, "data-testid": testId, ...rest, children: [jsxs("div", { className: dialogHeaderContentStyle, children: [jsx("div", { id: titleId, className: dialogTitleStyle, children: children }), description && (jsx("div", { id: descriptionId, className: dialogDescriptionStyle, children: description }))] }), showClose && (jsx("button", { type: "button", onClick: onClose, "aria-label": "Close dialog", className: dialogCloseButtonStyle, "data-testid": testId ? `${testId}-close` : undefined, children: jsx(CloseIcon, { size: "sm", decorative: true }) }))] }));
 };
 DialogHeader.displayName = 'DialogHeader';
 

package/dist/esm/components/feedback/Dialog/DialogHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogHeader.js","sources":["../../../../../../src/components/feedback/Dialog/DialogHeader.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAcA;AAEA;;;;;;;;;;AAUG;AACI;;AAYL;AA4CF;AAEA;;"}
+{"version":3,"file":"DialogHeader.js","sources":["../../../../../../src/components/feedback/Dialog/DialogHeader.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAeA;AAEA;;;;;;;;;;AAUG;AACI;;;AA2CP;AAEA;;"}

package/dist/esm/components/feedback/Drawer/Drawer.css.js

@@ -0,0 +1,17 @@
+import './../../../assets/src/components/feedback/Drawer/Drawer.css.ts.vanilla-CLPTOUrA.css';
+import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+
+var DRAWER_ANIMATION_MS = 220;
+var DRAWER_SIZE_MAP = {sm:'280px',md:'360px',lg:'480px',xl:'640px'};
+var drawerBodyStyle = 'Drawer_drawerBodyStyle__x57sw1x';
+var drawerCloseButtonStyle = 'Drawer_drawerCloseButtonStyle__x57sw113';
+var drawerDescriptionStyle = 'Drawer_drawerDescriptionStyle__x57sw1w';
+var drawerFooterRecipe = createRuntimeFn({defaultClassName:'Drawer_drawerFooterRecipe__x57sw1y',variantClassNames:{align:{left:'Drawer_drawerFooterRecipe_align_left__x57sw1z',center:'Drawer_drawerFooterRecipe_align_center__x57sw110',right:'Drawer_drawerFooterRecipe_align_right__x57sw111','space-between':'Drawer_drawerFooterRecipe_align_space-between__x57sw112'}},defaultVariants:{align:'right'},compoundVariants:[]});
+var drawerHeaderContentStyle = 'Drawer_drawerHeaderContentStyle__x57sw1u';
+var drawerHeaderStyle = 'Drawer_drawerHeaderStyle__x57sw1t';
+var drawerPanelRecipe = createRuntimeFn({defaultClassName:'Drawer_drawerPanelBase__x57sw1d',variantClassNames:{anchor:{left:'Drawer_drawerPanelRecipe_anchor_left__x57sw1f',right:'Drawer_drawerPanelRecipe_anchor_right__x57sw1g',top:'Drawer_drawerPanelRecipe_anchor_top__x57sw1h',bottom:'Drawer_drawerPanelRecipe_anchor_bottom__x57sw1i'},state:{open:'Drawer_drawerPanelRecipe_state_open__x57sw1j',closing:'Drawer_drawerPanelRecipe_state_closing__x57sw1k'}},defaultVariants:{anchor:'right',state:'open'},compoundVariants:[[{anchor:'left',state:'open'},'Drawer_drawerPanelRecipe_compound_0__x57sw1l'],[{anchor:'left',state:'closing'},'Drawer_drawerPanelRecipe_compound_1__x57sw1m'],[{anchor:'right',state:'open'},'Drawer_drawerPanelRecipe_compound_2__x57sw1n'],[{anchor:'right',state:'closing'},'Drawer_drawerPanelRecipe_compound_3__x57sw1o'],[{anchor:'top',state:'open'},'Drawer_drawerPanelRecipe_compound_4__x57sw1p'],[{anchor:'top',state:'closing'},'Drawer_drawerPanelRecipe_compound_5__x57sw1q'],[{anchor:'bottom',state:'open'},'Drawer_drawerPanelRecipe_compound_6__x57sw1r'],[{anchor:'bottom',state:'closing'},'Drawer_drawerPanelRecipe_compound_7__x57sw1s']]});
+var drawerTitleStyle = 'Drawer_drawerTitleStyle__x57sw1v';
+var overlayRecipe = createRuntimeFn({defaultClassName:'Drawer_overlayRecipe__x57sw1a',variantClassNames:{closing:{true:'Drawer_overlayRecipe_closing_true__x57sw1b',false:'Drawer_overlayRecipe_closing_false__x57sw1c'}},defaultVariants:{closing:false},compoundVariants:[]});
+
+export { DRAWER_ANIMATION_MS, DRAWER_SIZE_MAP, drawerBodyStyle, drawerCloseButtonStyle, drawerDescriptionStyle, drawerFooterRecipe, drawerHeaderContentStyle, drawerHeaderStyle, drawerPanelRecipe, drawerTitleStyle, overlayRecipe };
+//# sourceMappingURL=Drawer.css.js.map

package/dist/esm/components/feedback/Drawer/Drawer.css.js.map

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

package/dist/esm/components/feedback/Drawer/Drawer.js

@@ -0,0 +1,120 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useId, useRef, useCallback, createContext, useContext } from 'react';
+import { createPortal } from 'react-dom';
+import { CloseIcon } from '../../Icons/CloseIcon.js';
+import { useFocusTrap } from '../../../hooks/useFocusTrap/useFocusTrap.js';
+import { useMergedRef } from '../../../hooks/useMergedRef/useMergedRef.js';
+import { cx } from '../../../utils/cx.js';
+import { overlayRecipe, drawerPanelRecipe, drawerHeaderContentStyle, drawerTitleStyle, drawerDescriptionStyle, drawerCloseButtonStyle, drawerHeaderStyle, drawerBodyStyle, drawerFooterRecipe, DRAWER_SIZE_MAP } from './Drawer.css.js';
+import { useDrawerAnimation } from './useDrawerAnimation.js';
+
+const DrawerContext = /*#__PURE__*/ createContext(null);
+function useDrawerContext() {
+    const ctx = useContext(DrawerContext);
+    if (!ctx) {
+        throw new Error('Drawer sub-components must be used within <Drawer>');
+    }
+    return ctx;
+}
+function resolveSize(size, anchor) {
+    const isHorizontal = anchor === 'left' || anchor === 'right';
+    const dimension = isHorizontal ? 'width' : 'height';
+    let value;
+    if (typeof size === 'number') {
+        value = `${String(size)}px`;
+    }
+    else {
+        value = DRAWER_SIZE_MAP[size] ?? size;
+    }
+    return {
+        [dimension]: value,
+        maxWidth: '100vw',
+        maxHeight: '100vh',
+    };
+}
+/**
+ * Anchored sliding panel for secondary navigation, filters, or detail views.
+ * Modal mode renders an overlay backdrop and traps focus; non-modal mode
+ * leaves the rest of the page interactive.
+ *
+ * @example
+ * ```tsx
+ * <Drawer open={isOpen} onClose={close} anchor="right" size="md">
+ *   <Drawer.Header>Filters</Drawer.Header>
+ *   <Drawer.Body>...</Drawer.Body>
+ *   <Drawer.Footer>
+ *     <Button onClick={close}>Cancel</Button>
+ *     <Button variant="filled">Apply</Button>
+ *   </Drawer.Footer>
+ * </Drawer>
+ * ```
+ */
+const DrawerRoot = ({ open, onClose, anchor = 'right', size = 'md', modal = true, closeOnOverlayClick = true, closeOnEscape = true, trapFocus, initialFocusRef, portal = true, title, description, className, style, testId, id, children, ref, ...rest }) => {
+    const autoId = useId();
+    const titleId = `drawer-title-${autoId}`;
+    const descriptionId = `drawer-desc-${autoId}`;
+    const panelRef = useRef(null);
+    const shouldTrapFocus = trapFocus ?? modal;
+    const { mounted, closing } = useDrawerAnimation({
+        open,
+        panelRef,
+        initialFocusRef,
+        shouldFocus: shouldTrapFocus,
+    });
+    const handleFocusTrap = useFocusTrap({
+        containerRef: panelRef,
+        enabled: shouldTrapFocus,
+    });
+    const setPanelRef = useMergedRef(panelRef, ref);
+    const handleKeyDown = useCallback((e) => {
+        if (closeOnEscape && e.key === 'Escape') {
+            e.stopPropagation();
+            onClose();
+            return;
+        }
+        handleFocusTrap(e);
+    }, [closeOnEscape, onClose, handleFocusTrap]);
+    const handleOverlayClick = useCallback((e) => {
+        if (closeOnOverlayClick && e.target === e.currentTarget) {
+            onClose();
+        }
+    }, [closeOnOverlayClick, onClose]);
+    if (!mounted)
+        return null;
+    const contextValue = {
+        onClose,
+        titleId,
+        descriptionId,
+    };
+    const sizeStyle = resolveSize(size, anchor);
+    const drawerContent = (jsxs(DrawerContext.Provider, { value: contextValue, children: [modal && (jsx("div", { className: overlayRecipe({ closing }), onClick: handleOverlayClick, "data-testid": testId ? `${testId}-overlay` : undefined })), jsxs("div", { ref: setPanelRef, role: "dialog", "aria-modal": modal ? 'true' : undefined, "aria-labelledby": title ? titleId : undefined, "aria-describedby": description ? descriptionId : undefined, tabIndex: -1, className: cx(drawerPanelRecipe({ anchor, state: closing ? 'closing' : 'open' }), className), style: { ...sizeStyle, ...style }, id: id, "data-testid": testId, "data-anchor": anchor, onKeyDown: handleKeyDown, ...rest, children: [title && (jsx("span", { id: titleId, style: { display: 'none' }, children: title })), description && (jsx("span", { id: descriptionId, style: { display: 'none' }, children: description })), children] })] }));
+    if (portal && typeof document !== 'undefined') {
+        return createPortal(drawerContent, document.body);
+    }
+    return drawerContent;
+};
+DrawerRoot.displayName = 'Drawer';
+const DrawerHeader = ({ children, showClose = true, description, className, style, testId, ref, ...rest }) => {
+    const { onClose, titleId, descriptionId } = useDrawerContext();
+    return (jsxs("div", { ref: ref, className: cx(drawerHeaderStyle, className), style: style, "data-testid": testId, ...rest, children: [jsxs("div", { className: drawerHeaderContentStyle, children: [jsx("div", { id: titleId, className: drawerTitleStyle, children: children }), description && (jsx("div", { id: descriptionId, className: drawerDescriptionStyle, children: description }))] }), showClose && (jsx("button", { type: "button", onClick: onClose, "aria-label": "Close drawer", className: drawerCloseButtonStyle, "data-testid": testId ? `${testId}-close` : undefined, children: jsx(CloseIcon, { size: "sm", decorative: true }) }))] }));
+};
+DrawerHeader.displayName = 'Drawer.Header';
+const DrawerBody = ({ children, className, style, testId, ref, ...rest }) => (jsx("div", { ref: ref, className: cx(drawerBodyStyle, className), style: style, "data-testid": testId, ...rest, children: children }));
+DrawerBody.displayName = 'Drawer.Body';
+const DrawerFooter = ({ children, align = 'right', className, style, testId, ref, ...rest }) => (jsx("div", { ref: ref, className: cx(drawerFooterRecipe({ align }), className), style: style, "data-testid": testId, ...rest, children: children }));
+DrawerFooter.displayName = 'Drawer.Footer';
+const DrawerCloseButton = ({ children, className, style, testId, 'aria-label': ariaLabel = 'Close drawer', ref, ...rest }) => {
+    const { onClose } = useDrawerContext();
+    return (jsx("button", { ref: ref, type: "button", onClick: onClose, "aria-label": ariaLabel, className: cx(drawerCloseButtonStyle, className), style: style, "data-testid": testId, ...rest, children: children ?? jsx(CloseIcon, { size: "sm", decorative: true }) }));
+};
+DrawerCloseButton.displayName = 'Drawer.CloseButton';
+const Drawer = Object.assign(DrawerRoot, {
+    Header: DrawerHeader,
+    Body: DrawerBody,
+    Footer: DrawerFooter,
+    CloseButton: DrawerCloseButton,
+});
+
+export { Drawer };
+//# sourceMappingURL=Drawer.js.map

package/dist/esm/components/feedback/Drawer/Drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.js","sources":["../../../../../../src/components/feedback/Drawer/Drawer.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;AAqCA;AAIA;AACE;;AAEE;;AAEF;AACF;AAEA;;;AAME;AACA;AACE;;;AAEA;;;;AAIA;AACA;;AAEJ;AAEA;;;;;;;;;;;;;;;;AAgBG;AACH;AAqBE;AACA;AACA;AACA;AAEA;AAEA;;;;AAIE;AACD;;AAGC;AACA;AACD;;AAID;;;AAIM;;;;;AAQN;;AAGM;;AAEJ;AAIF;AAAc;AAEd;;;;;;AAQA;AA0CA;;;AAGA;AACF;AAEA;AAEA;;;AA0CA;AAEA;AAEA;AAmBA;AAEA;AAoBA;AAEA;AASE;;AAeF;AAEA;;AAUE;AACA;AACA;AACA;AACD;;"}