@tokis/react 1.0.0

package/dist/cjs/components/circular-progress/index.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CircularProgress = CircularProgress;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const cn_js_1 = require("../../utils/cn");
+const sizeMap = {
+    sm: 32,
+    md: 48,
+    lg: 64,
+    xl: 80,
+};
+const strokeWidthMap = {
+    sm: 3,
+    md: 4,
+    lg: 5,
+    xl: 6,
+};
+function CircularProgress({ value, size = 'md', strokeWidth, label, variant = 'default', className, }) {
+    const svgSize = sizeMap[size];
+    const sw = strokeWidth ?? strokeWidthMap[size];
+    const radius = (svgSize - sw) / 2;
+    const circumference = 2 * Math.PI * radius;
+    const isIndeterminate = value === undefined;
+    const clampedValue = Math.min(100, Math.max(0, value ?? 0));
+    const offset = circumference * (1 - clampedValue / 100);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_js_1.cn)('tokis-circular-progress', `tokis-circular-progress--${size}`, `tokis-circular-progress--${variant}`, isIndeterminate && 'tokis-circular-progress--indeterminate', className), role: "progressbar", "aria-valuenow": isIndeterminate ? undefined : clampedValue, "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": isIndeterminate ? 'Loading…' : `${clampedValue}%`, children: [(0, jsx_runtime_1.jsxs)("svg", { width: svgSize, height: svgSize, viewBox: `0 0 ${svgSize} ${svgSize}`, fill: "none", children: [(0, jsx_runtime_1.jsx)("circle", { className: "tokis-circular-progress__track", cx: svgSize / 2, cy: svgSize / 2, r: radius, strokeWidth: sw }), (0, jsx_runtime_1.jsx)("circle", { className: "tokis-circular-progress__fill", cx: svgSize / 2, cy: svgSize / 2, r: radius, strokeWidth: sw, strokeDasharray: circumference, strokeDashoffset: isIndeterminate ? circumference * 0.75 : offset, strokeLinecap: "round", transform: `rotate(-90 ${svgSize / 2} ${svgSize / 2})` })] }), label && (0, jsx_runtime_1.jsx)("div", { className: "tokis-circular-progress__label", children: label })] }));
+}
+CircularProgress.displayName = 'CircularProgress';

package/dist/cjs/components/codeblock/CodeBlock.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CodeBlock = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const cn_js_1 = require("../../utils/cn");
+const CopyIcon = () => ((0, jsx_runtime_1.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: [(0, jsx_runtime_1.jsx)("rect", { x: "4", y: "4", width: "8", height: "8", rx: "1.5", stroke: "currentColor", strokeWidth: "1.5" }), (0, jsx_runtime_1.jsx)("path", { d: "M10 4V2.5A1.5 1.5 0 0 0 8.5 1h-6A1.5 1.5 0 0 0 1 2.5v6A1.5 1.5 0 0 0 2.5 10H4", stroke: "currentColor", strokeWidth: "1.5" })] }));
+const CheckIcon = () => ((0, jsx_runtime_1.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)("path", { d: "M2 7l3.5 3.5L12 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+const CodeBlock = ({ code, language, filename, highlightedHtml, showLineNumbers = false, theme = 'auto', className, }) => {
+    const [copied, setCopied] = (0, react_1.useState)(false);
+    const handleCopy = (0, react_1.useCallback)(async () => {
+        try {
+            await navigator.clipboard.writeText(code);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        }
+        catch {
+            // Fallback for browsers without clipboard API
+            const textarea = document.createElement('textarea');
+            textarea.value = code;
+            textarea.style.position = 'fixed';
+            textarea.style.opacity = '0';
+            document.body.appendChild(textarea);
+            textarea.select();
+            document.execCommand('copy');
+            document.body.removeChild(textarea);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        }
+    }, [code]);
+    const lines = code.split('\n');
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_js_1.cn)('tokis-codeblock', className), "data-codeblock-theme": theme !== 'auto' ? theme : undefined, children: [(0, jsx_runtime_1.jsxs)("div", { className: "tokis-codeblock__header", children: [(0, jsx_runtime_1.jsx)("span", { className: "tokis-codeblock__lang", children: filename ?? language ?? 'code' }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: (0, cn_js_1.cn)('tokis-codeblock__copy', copied && 'tokis-codeblock__copy--copied'), onClick: handleCopy, "aria-label": copied ? 'Copied!' : 'Copy code', children: [copied ? (0, jsx_runtime_1.jsx)(CheckIcon, {}) : (0, jsx_runtime_1.jsx)(CopyIcon, {}), (0, jsx_runtime_1.jsx)("span", { children: copied ? 'Copied!' : 'Copy' })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "tokis-codeblock__body", children: [showLineNumbers && ((0, jsx_runtime_1.jsx)("div", { className: "tokis-codeblock__lines", "aria-hidden": "true", children: lines.map((_, i) => ((0, jsx_runtime_1.jsx)("span", { className: "tokis-codeblock__line-num", children: i + 1 }, i))) })), (0, jsx_runtime_1.jsx)("pre", { className: "tokis-codeblock__pre", children: highlightedHtml ? ((0, jsx_runtime_1.jsx)("code", { className: (0, cn_js_1.cn)('tokis-codeblock__code', language && `language-${language}`), dangerouslySetInnerHTML: { __html: highlightedHtml } })) : ((0, jsx_runtime_1.jsx)("code", { className: (0, cn_js_1.cn)('tokis-codeblock__code', language && `language-${language}`), children: code })) })] })] }));
+};
+exports.CodeBlock = CodeBlock;
+exports.CodeBlock.displayName = 'CodeBlock';

package/dist/cjs/components/codeblock/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CodeBlock = void 0;
+var CodeBlock_js_1 = require("./CodeBlock");
+Object.defineProperty(exports, "CodeBlock", { enumerable: true, get: function () { return CodeBlock_js_1.CodeBlock; } });

package/dist/cjs/components/command-palette/index.js

@@ -0,0 +1,84 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CommandPalette = CommandPalette;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const cn_js_1 = require("../../utils/cn");
+const index_js_1 = require("../portal/index");
+const core_1 = require("@tokis/core");
+function CommandPalette({ open, onClose, items, placeholder = 'Search commands…', className, }) {
+    const [query, setQuery] = (0, react_1.useState)('');
+    const [activeIndex, setActiveIndex] = (0, react_1.useState)(0);
+    const containerRef = (0, react_1.useRef)(null);
+    const inputRef = (0, react_1.useRef)(null);
+    const filtered = (0, react_1.useMemo)(() => {
+        const q = query.trim().toLowerCase();
+        if (!q)
+            return items;
+        return items.filter((item) => item.label.toLowerCase().includes(q) ||
+            item.description?.toLowerCase().includes(q) ||
+            item.category?.toLowerCase().includes(q));
+    }, [query, items]);
+    const grouped = (0, react_1.useMemo)(() => {
+        const map = new Map();
+        for (const item of filtered) {
+            const cat = item.category ?? '';
+            if (!map.has(cat))
+                map.set(cat, []);
+            map.get(cat).push(item);
+        }
+        return map;
+    }, [filtered]);
+    const flatFiltered = filtered;
+    const handleSelect = (0, react_1.useCallback)((item) => {
+        item.onSelect();
+        onClose();
+        setQuery('');
+        setActiveIndex(0);
+    }, [onClose]);
+    (0, react_1.useEffect)(() => {
+        if (!open) {
+            setQuery('');
+            setActiveIndex(0);
+            return;
+        }
+        const cleanup = containerRef.current ? (0, core_1.trapFocus)(containerRef.current) : undefined;
+        inputRef.current?.focus();
+        return () => cleanup?.();
+    }, [open]);
+    (0, react_1.useEffect)(() => {
+        if (!open)
+            return;
+        const onKey = (e) => {
+            if (e.key === 'Escape') {
+                onClose();
+                return;
+            }
+            if (e.key === 'ArrowDown') {
+                e.preventDefault();
+                setActiveIndex((i) => Math.min(i + 1, flatFiltered.length - 1));
+            }
+            else if (e.key === 'ArrowUp') {
+                e.preventDefault();
+                setActiveIndex((i) => Math.max(i - 1, 0));
+            }
+            else if (e.key === 'Enter') {
+                const item = flatFiltered[activeIndex];
+                if (item)
+                    handleSelect(item);
+            }
+        };
+        document.addEventListener('keydown', onKey);
+        return () => document.removeEventListener('keydown', onKey);
+    }, [open, flatFiltered, activeIndex, handleSelect, onClose]);
+    (0, react_1.useEffect)(() => { setActiveIndex(0); }, [query]);
+    if (!open)
+        return null;
+    let globalIndex = 0;
+    return ((0, jsx_runtime_1.jsxs)(index_js_1.Portal, { children: [(0, jsx_runtime_1.jsx)("div", { className: "tokis-command-palette-backdrop", "aria-hidden": "true", onClick: onClose }), (0, jsx_runtime_1.jsxs)("div", { ref: containerRef, className: (0, cn_js_1.cn)('tokis-command-palette', className), role: "dialog", "aria-label": "Command palette", "aria-modal": "true", children: [(0, jsx_runtime_1.jsxs)("div", { className: "tokis-command-palette__search", children: [(0, jsx_runtime_1.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", className: "tokis-command-palette__search-icon", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "7", cy: "7", r: "4.5", stroke: "currentColor", strokeWidth: "1.5" }), (0, jsx_runtime_1.jsx)("path", { d: "M11 11l3 3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })] }), (0, jsx_runtime_1.jsx)("input", { ref: inputRef, type: "text", className: "tokis-command-palette__input", placeholder: placeholder, value: query, onChange: (e) => setQuery(e.target.value), "aria-label": placeholder, autoComplete: "off", spellCheck: false })] }), (0, jsx_runtime_1.jsx)("div", { className: "tokis-command-palette__list", role: "listbox", children: filtered.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "tokis-command-palette__empty", children: "No commands found" })) : (Array.from(grouped.entries()).map(([category, categoryItems]) => ((0, jsx_runtime_1.jsxs)("div", { className: "tokis-command-palette__group", children: [category && ((0, jsx_runtime_1.jsx)("div", { className: "tokis-command-palette__group-label", children: category })), categoryItems.map((item) => {
+                                    const idx = globalIndex++;
+                                    const isActive = activeIndex === idx;
+                                    return ((0, jsx_runtime_1.jsxs)("button", { role: "option", "aria-selected": isActive, className: (0, cn_js_1.cn)('tokis-command-palette__item', isActive && 'tokis-command-palette__item--active'), onClick: () => handleSelect(item), onMouseEnter: () => setActiveIndex(idx), children: [item.icon && ((0, jsx_runtime_1.jsx)("span", { className: "tokis-command-palette__item-icon", "aria-hidden": "true", children: item.icon })), (0, jsx_runtime_1.jsxs)("span", { className: "tokis-command-palette__item-content", children: [(0, jsx_runtime_1.jsx)("span", { className: "tokis-command-palette__item-label", children: item.label }), item.description && ((0, jsx_runtime_1.jsx)("span", { className: "tokis-command-palette__item-desc", children: item.description }))] }), item.shortcut && ((0, jsx_runtime_1.jsx)("span", { className: "tokis-command-palette__shortcut", "aria-label": `Shortcut: ${item.shortcut.join('+')}`, children: item.shortcut.map((k, ki) => ((0, jsx_runtime_1.jsx)("kbd", { className: "tokis-command-palette__kbd", children: k }, ki))) }))] }, item.id));
+                                })] }, category)))) })] })] }));
+}
+CommandPalette.displayName = 'CommandPalette';

package/dist/cjs/components/confirm-dialog/index.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConfirmDialog = ConfirmDialog;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const index_js_1 = require("../dialog/index");
+const cn_js_1 = require("../../utils/cn");
+function ConfirmDialog({ open, onClose, onConfirm, title, description, confirmLabel = 'Confirm', cancelLabel = 'Cancel', destructive = false, loading = false, className, }) {
+    return ((0, jsx_runtime_1.jsx)(index_js_1.Dialog, { open: open, onClose: onClose, title: title, description: description, size: "sm", className: (0, cn_js_1.cn)('tokis-confirm-dialog', className), footer: (0, jsx_runtime_1.jsxs)("div", { className: "tokis-confirm-dialog__actions", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "tokis-confirm-dialog__cancel", onClick: onClose, disabled: loading, children: cancelLabel }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: (0, cn_js_1.cn)('tokis-confirm-dialog__confirm', destructive && 'tokis-confirm-dialog__confirm--destructive'), onClick: onConfirm, disabled: loading, "aria-busy": loading, children: [loading ? ((0, jsx_runtime_1.jsx)("span", { className: "tokis-confirm-dialog__spinner", "aria-hidden": "true" })) : null, confirmLabel] })] }) }));
+}
+ConfirmDialog.displayName = 'ConfirmDialog';

package/dist/cjs/components/context-menu/index.js

@@ -0,0 +1,82 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContextMenu = ContextMenu;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const cn_js_1 = require("../../utils/cn");
+const index_js_1 = require("../portal/index");
+function ContextMenu({ items, children, className }) {
+    const [visible, setVisible] = (0, react_1.useState)(false);
+    const [pos, setPos] = (0, react_1.useState)({ x: 0, y: 0 });
+    const menuRef = (0, react_1.useRef)(null);
+    const close = (0, react_1.useCallback)(() => setVisible(false), []);
+    const handleContextMenu = (0, react_1.useCallback)((e) => {
+        e.preventDefault();
+        setPos({ x: e.clientX, y: e.clientY });
+        setVisible(true);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (!visible)
+            return;
+        const onKey = (e) => { if (e.key === 'Escape')
+            close(); };
+        const onClick = (e) => {
+            if (menuRef.current && !menuRef.current.contains(e.target))
+                close();
+        };
+        document.addEventListener('keydown', onKey);
+        document.addEventListener('mousedown', onClick);
+        return () => {
+            document.removeEventListener('keydown', onKey);
+            document.removeEventListener('mousedown', onClick);
+        };
+    }, [visible, close]);
+    (0, react_1.useEffect)(() => {
+        if (!visible || !menuRef.current)
+            return;
+        menuRef.current.focus();
+    }, [visible]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [react_1.default.cloneElement(children, { onContextMenu: handleContextMenu }), visible && ((0, jsx_runtime_1.jsx)(index_js_1.Portal, { children: (0, jsx_runtime_1.jsx)("div", { ref: menuRef, className: (0, cn_js_1.cn)('tokis-context-menu', className), role: "menu", tabIndex: -1, style: { position: 'fixed', top: pos.y, left: pos.x }, children: items.map((item, i) => {
+                        if (item.type === 'separator') {
+                            return (0, jsx_runtime_1.jsx)("div", { className: "tokis-context-menu__separator", role: "separator" }, i);
+                        }
+                        if (item.type === 'label') {
+                            return (0, jsx_runtime_1.jsx)("div", { className: "tokis-context-menu__label", children: item.label }, i);
+                        }
+                        return ((0, jsx_runtime_1.jsxs)("button", { role: "menuitem", className: (0, cn_js_1.cn)('tokis-context-menu__item', item.destructive && 'tokis-context-menu__item--destructive', item.disabled && 'tokis-context-menu__item--disabled'), disabled: item.disabled, onClick: () => { item.onClick?.(); close(); }, children: [item.icon && (0, jsx_runtime_1.jsx)("span", { className: "tokis-context-menu__icon", "aria-hidden": "true", children: item.icon }), item.label] }, i));
+                    }) }) }))] }));
+}
+ContextMenu.displayName = 'ContextMenu';

package/dist/cjs/components/dialog/index.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Dialog = Dialog;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const cn_js_1 = require("../../utils/cn");
+const index_js_1 = require("../portal/index");
+const core_1 = require("@tokis/core");
+function Dialog({ open, onClose, title, description, children, footer, size = 'md', closeOnBackdrop = true, closeOnEsc = true, className, 'aria-label': ariaLabel, }) {
+    const contentRef = (0, react_1.useRef)(null);
+    const uid = (0, react_1.useId)();
+    const titleId = title ? `dialog-title-${uid}` : undefined;
+    const descId = description ? `dialog-desc-${uid}` : undefined;
+    (0, react_1.useEffect)(() => {
+        if (!open)
+            return;
+        const cleanup = contentRef.current ? (0, core_1.trapFocus)(contentRef.current) : undefined;
+        const prev = document.activeElement;
+        contentRef.current?.focus();
+        return () => {
+            cleanup?.();
+            prev?.focus();
+        };
+    }, [open]);
+    (0, react_1.useEffect)(() => {
+        if (!open || !closeOnEsc)
+            return;
+        const handle = (e) => { if (e.key === 'Escape')
+            onClose(); };
+        document.addEventListener('keydown', handle);
+        return () => document.removeEventListener('keydown', handle);
+    }, [open, closeOnEsc, onClose]);
+    (0, react_1.useEffect)(() => {
+        if (open) {
+            const prev = document.body.style.overflow;
+            document.body.style.overflow = 'hidden';
+            return () => { document.body.style.overflow = prev; };
+        }
+    }, [open]);
+    if (!open)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(index_js_1.Portal, { children: (0, jsx_runtime_1.jsx)("div", { className: "tokis-dialog-backdrop", "aria-hidden": "true", onClick: closeOnBackdrop ? onClose : undefined, children: (0, jsx_runtime_1.jsxs)("div", { ref: contentRef, role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, "aria-describedby": descId, "aria-label": !title ? ariaLabel : undefined, tabIndex: -1, className: (0, cn_js_1.cn)('tokis-dialog-content', size !== 'md' && `tokis-dialog-content--${size}`, className), onClick: (e) => e.stopPropagation(), children: [(title || description) && ((0, jsx_runtime_1.jsxs)("div", { className: "tokis-dialog-header", children: [(0, jsx_runtime_1.jsxs)("div", { children: [title && (0, jsx_runtime_1.jsx)("h2", { id: titleId, className: "tokis-dialog-title", children: title }), description && (0, jsx_runtime_1.jsx)("p", { id: descId, className: "tokis-dialog-description", children: description })] }), (0, jsx_runtime_1.jsx)("button", { className: "tokis-dialog-close", onClick: onClose, "aria-label": "Close dialog", children: (0, jsx_runtime_1.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)("path", { d: "M3 3l10 10M13 3L3 13", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) })] })), children && (0, jsx_runtime_1.jsx)("div", { className: "tokis-dialog-body", children: children }), footer && (0, jsx_runtime_1.jsx)("div", { className: "tokis-dialog-footer", children: footer })] }) }) }));
+}

package/dist/cjs/components/divider/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Divider = void 0;
+// Re-export Divider from card
+var index_js_1 = require("../card/index");
+Object.defineProperty(exports, "Divider", { enumerable: true, get: function () { return index_js_1.Divider; } });

package/dist/cjs/components/drawer/index.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Drawer = Drawer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const cn_js_1 = require("../../utils/cn");
+const index_js_1 = require("../portal/index");
+const core_1 = require("@tokis/core");
+function Drawer({ open, onClose, side = 'right', title, description, children, footer, closeOnBackdrop = true, closeOnEsc = true, className }) {
+    const contentRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (!open)
+            return;
+        const cleanup = contentRef.current ? (0, core_1.trapFocus)(contentRef.current) : undefined;
+        const prev = document.activeElement;
+        contentRef.current?.focus();
+        return () => { cleanup?.(); prev?.focus(); };
+    }, [open]);
+    (0, react_1.useEffect)(() => {
+        if (!open || !closeOnEsc)
+            return;
+        const h = (e) => { if (e.key === 'Escape')
+            onClose(); };
+        document.addEventListener('keydown', h);
+        return () => document.removeEventListener('keydown', h);
+    }, [open, closeOnEsc, onClose]);
+    (0, react_1.useEffect)(() => {
+        if (open) {
+            const prev = document.body.style.overflow;
+            document.body.style.overflow = 'hidden';
+            return () => { document.body.style.overflow = prev; };
+        }
+    }, [open]);
+    if (!open)
+        return null;
+    return ((0, jsx_runtime_1.jsxs)(index_js_1.Portal, { children: [(0, jsx_runtime_1.jsx)("div", { className: "tokis-drawer-backdrop", "aria-hidden": "true", onClick: closeOnBackdrop ? onClose : undefined }), (0, jsx_runtime_1.jsxs)("div", { ref: contentRef, role: "dialog", "aria-modal": "true", tabIndex: -1, className: (0, cn_js_1.cn)(`tokis-drawer-content tokis-drawer-content--${side}`, className), onClick: (e) => e.stopPropagation(), children: [(title || description) && ((0, jsx_runtime_1.jsxs)("div", { className: "tokis-drawer-header", children: [title && (0, jsx_runtime_1.jsx)("h2", { className: "tokis-drawer-title", children: title }), description && (0, jsx_runtime_1.jsx)("p", { className: "tokis-drawer-description", children: description }), (0, jsx_runtime_1.jsx)("button", { className: "tokis-drawer-close", onClick: onClose, "aria-label": "Close drawer", children: (0, jsx_runtime_1.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)("path", { d: "M3 3l10 10M13 3L3 13", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) })] })), (0, jsx_runtime_1.jsx)("div", { className: "tokis-drawer-body", children: children }), footer && (0, jsx_runtime_1.jsx)("div", { className: "tokis-drawer-footer", children: footer })] })] }));
+}

package/dist/cjs/components/dropdown/index.js

@@ -0,0 +1,104 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Dropdown = Dropdown;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const cn_js_1 = require("../../utils/cn");
+const index_js_1 = require("../portal/index");
+function computeDropdownPos(anchor, placement) {
+    const gap = 4;
+    switch (placement) {
+        case 'bottom-start': return { top: anchor.bottom + gap, left: anchor.left };
+        case 'bottom-end': return { top: anchor.bottom + gap, left: anchor.right };
+        case 'top-start': return { top: anchor.top - gap, left: anchor.left };
+        case 'top-end': return { top: anchor.top - gap, left: anchor.right };
+    }
+}
+const transformMap = {
+    'bottom-start': 'none',
+    'bottom-end': 'translateX(-100%)',
+    'top-start': 'translateY(-100%)',
+    'top-end': 'translate(-100%, -100%)',
+};
+function Dropdown({ trigger, children, placement = 'bottom-start', open: controlledOpen, defaultOpen = false, onOpenChange, className, }) {
+    const [internalOpen, setInternalOpen] = (0, react_1.useState)(defaultOpen);
+    const isControlled = controlledOpen !== undefined;
+    const isOpen = isControlled ? controlledOpen : internalOpen;
+    const [pos, setPos] = (0, react_1.useState)({ top: 0, left: 0 });
+    const anchorRef = (0, react_1.useRef)(null);
+    const menuRef = (0, react_1.useRef)(null);
+    const setOpen = (0, react_1.useCallback)((v) => {
+        if (!isControlled)
+            setInternalOpen(v);
+        onOpenChange?.(v);
+    }, [isControlled, onOpenChange]);
+    const toggle = (0, react_1.useCallback)(() => {
+        const next = !isOpen;
+        if (next && anchorRef.current) {
+            const rect = anchorRef.current.getBoundingClientRect();
+            setPos(computeDropdownPos(rect, placement));
+        }
+        setOpen(next);
+    }, [isOpen, placement, setOpen]);
+    (0, react_1.useEffect)(() => {
+        if (!isOpen)
+            return;
+        const onKey = (e) => { if (e.key === 'Escape')
+            setOpen(false); };
+        const onMouse = (e) => {
+            if (menuRef.current && !menuRef.current.contains(e.target) &&
+                anchorRef.current && !anchorRef.current.contains(e.target)) {
+                setOpen(false);
+            }
+        };
+        document.addEventListener('keydown', onKey);
+        document.addEventListener('mousedown', onMouse);
+        return () => {
+            document.removeEventListener('keydown', onKey);
+            document.removeEventListener('mousedown', onMouse);
+        };
+    }, [isOpen, setOpen]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [react_1.default.cloneElement(trigger, {
+                ref: anchorRef,
+                onClick: (...args) => {
+                    toggle();
+                    trigger.props.onClick?.(...args);
+                },
+                'aria-expanded': isOpen,
+                'aria-haspopup': 'true',
+            }), isOpen && ((0, jsx_runtime_1.jsx)(index_js_1.Portal, { children: (0, jsx_runtime_1.jsx)("div", { ref: menuRef, className: (0, cn_js_1.cn)('tokis-dropdown', `tokis-dropdown--${placement}`, className), style: { position: 'fixed', top: pos.top, left: pos.left, transform: transformMap[placement] }, children: children }) }))] }));
+}
+Dropdown.displayName = 'Dropdown';

package/dist/cjs/components/emptystate/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EmptyState = EmptyState;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const cn_js_1 = require("../../utils/cn");
+function EmptyState({ icon, title, description, action, className }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_js_1.cn)('tokis-empty-state', className), role: "status", children: [icon && (0, jsx_runtime_1.jsx)("div", { className: "tokis-empty-state__icon", "aria-hidden": "true", children: icon }), (0, jsx_runtime_1.jsx)("h3", { className: "tokis-empty-state__title", children: title }), description && (0, jsx_runtime_1.jsx)("p", { className: "tokis-empty-state__description", children: description }), action && (0, jsx_runtime_1.jsx)("div", { className: "tokis-empty-state__action", children: action })] }));
+}
+EmptyState.displayName = 'EmptyState';