@tokis/react 1.0.0

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

@@ -0,0 +1,120 @@
+"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.Menu = Menu;
+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 Menu({ trigger, items, placement = 'bottom-start', className }) {
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const [pos, setPos] = (0, react_1.useState)({ top: 0, left: 0 });
+    const [focusedIndex, setFocusedIndex] = (0, react_1.useState)(-1);
+    const triggerRef = (0, react_1.useRef)(null);
+    const contentRef = (0, react_1.useRef)(null);
+    const menuId = (0, react_1.useId)();
+    const updatePosition = (0, react_1.useCallback)(() => {
+        if (!triggerRef.current)
+            return;
+        const rect = triggerRef.current.getBoundingClientRect();
+        const isBottom = placement.startsWith('bottom');
+        const isStart = placement.endsWith('start');
+        setPos({
+            top: isBottom ? rect.bottom + window.scrollY + 4 : rect.top + window.scrollY - 4,
+            left: isStart ? rect.left + window.scrollX : rect.right + window.scrollX,
+        });
+    }, [placement]);
+    const clickableItems = items.filter((i) => i.type !== 'separator' && i.type !== 'label' && !i.disabled);
+    (0, react_1.useEffect)(() => {
+        if (!open)
+            return;
+        const handle = (e) => {
+            if (!triggerRef.current?.contains(e.target) && !contentRef.current?.contains(e.target))
+                setOpen(false);
+        };
+        const handleKey = (e) => {
+            if (e.key === 'Escape') {
+                setOpen(false);
+                triggerRef.current?.focus();
+            }
+        };
+        document.addEventListener('mousedown', handle);
+        document.addEventListener('keydown', handleKey);
+        return () => { document.removeEventListener('mousedown', handle); document.removeEventListener('keydown', handleKey); };
+    }, [open]);
+    const handleTriggerKeyDown = (e) => {
+        if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            updatePosition();
+            setOpen(true);
+            setFocusedIndex(0);
+        }
+    };
+    const handleMenuKeyDown = (e) => {
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            setFocusedIndex((p) => (p + 1) % clickableItems.length);
+        }
+        if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            setFocusedIndex((p) => (p - 1 + clickableItems.length) % clickableItems.length);
+        }
+        if (e.key === 'Enter' && focusedIndex >= 0) {
+            clickableItems[focusedIndex].onClick?.();
+            setOpen(false);
+        }
+    };
+    let clickableIdx = -1;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [react_1.default.cloneElement(trigger, {
+                ref: triggerRef,
+                'aria-haspopup': 'menu',
+                'aria-expanded': open,
+                'aria-controls': open ? menuId : undefined,
+                onClick: (e) => { updatePosition(); setOpen((v) => !v); trigger.props.onClick?.(e); },
+                onKeyDown: handleTriggerKeyDown,
+            }), open && ((0, jsx_runtime_1.jsx)(index_js_1.Portal, { children: (0, jsx_runtime_1.jsx)("div", { ref: contentRef, id: menuId, role: "menu", tabIndex: -1, className: (0, cn_js_1.cn)('tokis-menu-content', className), style: { position: 'absolute', top: pos.top, left: pos.left, ...(placement.endsWith('end') && { transform: 'translateX(-100%)' }) }, onKeyDown: handleMenuKeyDown, children: items.map((item, i) => {
+                        if (item.type === 'separator')
+                            return (0, jsx_runtime_1.jsx)("div", { className: "tokis-menu-separator", role: "separator" }, i);
+                        if (item.type === 'label')
+                            return (0, jsx_runtime_1.jsx)("div", { className: "tokis-menu-group-label", children: item.label }, i);
+                        clickableIdx++;
+                        const isFocused = clickableIdx === focusedIndex;
+                        const idx = clickableIdx;
+                        return ((0, jsx_runtime_1.jsxs)("button", { role: "menuitem", className: (0, cn_js_1.cn)('tokis-menu-item', item.destructive && 'tokis-menu-item--destructive'), "data-focused": isFocused ? 'true' : undefined, "data-disabled": item.disabled ? 'true' : undefined, "aria-disabled": item.disabled, disabled: item.disabled, tabIndex: isFocused ? 0 : -1, onClick: () => { if (!item.disabled) {
+                                item.onClick?.();
+                                setOpen(false);
+                            } }, onMouseEnter: () => setFocusedIndex(idx), children: [item.icon && (0, jsx_runtime_1.jsx)("span", { className: "tokis-menu-item__icon", "aria-hidden": "true", children: item.icon }), (0, jsx_runtime_1.jsx)("span", { className: "tokis-menu-item__label", children: item.label }), item.shortcut && (0, jsx_runtime_1.jsx)("span", { className: "tokis-menu-item__shortcut", "aria-label": `keyboard shortcut: ${item.shortcut}`, children: item.shortcut })] }, i));
+                    }) }) }))] }));
+}

package/dist/cjs/components/nav-rail/index.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavigationRail = NavigationRail;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const cn_js_1 = require("../../utils/cn");
+function NavigationRail({ items, value, onChange, header, footer, className }) {
+    return ((0, jsx_runtime_1.jsxs)("nav", { className: (0, cn_js_1.cn)('tokis-nav-rail', className), "aria-label": "Navigation rail", children: [header && (0, jsx_runtime_1.jsx)("div", { className: "tokis-nav-rail__header", children: header }), (0, jsx_runtime_1.jsx)("div", { className: "tokis-nav-rail__items", children: items.map((item) => {
+                    const isActive = item.value === value;
+                    return ((0, jsx_runtime_1.jsxs)("button", { className: (0, cn_js_1.cn)('tokis-nav-rail__item', isActive && 'tokis-nav-rail__item--active'), onClick: () => onChange(item.value), "aria-current": isActive ? 'page' : undefined, "aria-label": item.label, children: [(0, jsx_runtime_1.jsxs)("span", { className: "tokis-nav-rail__icon", children: [item.badge !== undefined && ((0, jsx_runtime_1.jsx)("span", { className: "tokis-nav-rail__badge", "aria-label": `${item.badge} notifications`, children: item.badge })), item.icon] }), (0, jsx_runtime_1.jsx)("span", { className: "tokis-nav-rail__label", children: item.label })] }, item.value));
+                }) }), footer && (0, jsx_runtime_1.jsx)("div", { className: "tokis-nav-rail__footer", children: footer })] }));
+}
+NavigationRail.displayName = 'NavigationRail';

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

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Pagination = Pagination;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const cn_js_1 = require("../../utils/cn");
+function range(start, end) {
+    const length = end - start + 1;
+    return Array.from({ length }, (_, i) => start + i);
+}
+function usePaginationItems(page, totalPages, siblingCount) {
+    return (0, react_1.useMemo)(() => {
+        const totalPageNumbers = siblingCount * 2 + 5; // siblings + first + last + current + 2 ellipsis
+        if (totalPages <= totalPageNumbers) {
+            return range(1, totalPages);
+        }
+        const leftSiblingIndex = Math.max(page - siblingCount, 1);
+        const rightSiblingIndex = Math.min(page + siblingCount, totalPages);
+        const showLeftEllipsis = leftSiblingIndex > 2;
+        const showRightEllipsis = rightSiblingIndex < totalPages - 1;
+        if (!showLeftEllipsis && showRightEllipsis) {
+            const leftRange = range(1, 3 + siblingCount * 2);
+            return [...leftRange, 'ellipsis-end', totalPages];
+        }
+        if (showLeftEllipsis && !showRightEllipsis) {
+            const rightRange = range(totalPages - (2 + siblingCount * 2), totalPages);
+            return [1, 'ellipsis-start', ...rightRange];
+        }
+        const middleRange = range(leftSiblingIndex, rightSiblingIndex);
+        return [1, 'ellipsis-start', ...middleRange, 'ellipsis-end', totalPages];
+    }, [page, totalPages, siblingCount]);
+}
+function Pagination({ page, totalPages, onChange, siblingCount = 1, className, }) {
+    const items = usePaginationItems(page, totalPages, siblingCount);
+    const handlePrev = () => { if (page > 1)
+        onChange(page - 1); };
+    const handleNext = () => { if (page < totalPages)
+        onChange(page + 1); };
+    return ((0, jsx_runtime_1.jsxs)("nav", { className: (0, cn_js_1.cn)('tokis-pagination', className), "aria-label": "Pagination navigation", role: "navigation", children: [(0, jsx_runtime_1.jsx)("button", { className: (0, cn_js_1.cn)('tokis-pagination__item', 'tokis-pagination__prev', page === 1 && 'tokis-pagination__item--disabled'), onClick: handlePrev, disabled: page === 1, "aria-label": "Go to previous page", "aria-disabled": page === 1, 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: "M10 12L6 8l4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) }), items.map((item, index) => {
+                if (item === 'ellipsis-start' || item === 'ellipsis-end') {
+                    return ((0, jsx_runtime_1.jsx)("span", { className: "tokis-pagination__ellipsis", "aria-hidden": "true", children: "\u2026" }, item));
+                }
+                const isActive = item === page;
+                return ((0, jsx_runtime_1.jsx)("button", { className: (0, cn_js_1.cn)('tokis-pagination__item', isActive && 'tokis-pagination__item--active'), onClick: () => onChange(item), "aria-label": `Go to page ${item}`, "aria-current": isActive ? 'page' : undefined, disabled: isActive, children: item }, `${item}-${index}`));
+            }), (0, jsx_runtime_1.jsx)("button", { className: (0, cn_js_1.cn)('tokis-pagination__item', 'tokis-pagination__next', page === totalPages && 'tokis-pagination__item--disabled'), onClick: handleNext, disabled: page === totalPages, "aria-label": "Go to next page", "aria-disabled": page === totalPages, 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: "M6 4l4 4-4 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] }));
+}

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

@@ -0,0 +1,114 @@
+"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.Popover = Popover;
+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 Popover({ trigger, content, title, placement = 'bottom-start', open, defaultOpen = false, onOpenChange, closeOnClickOutside = true, closeOnEsc = true, className }) {
+    const [internalOpen, setInternalOpen] = (0, react_1.useState)(defaultOpen);
+    const isOpen = open ?? internalOpen;
+    const [pos, setPos] = (0, react_1.useState)({ top: 0, left: 0 });
+    const triggerRef = (0, react_1.useRef)(null);
+    const contentRef = (0, react_1.useRef)(null);
+    const popoverId = (0, react_1.useId)();
+    const setOpen = (0, react_1.useCallback)((val) => {
+        if (open === undefined)
+            setInternalOpen(val);
+        onOpenChange?.(val);
+    }, [open, onOpenChange]);
+    const updatePosition = (0, react_1.useCallback)(() => {
+        if (!triggerRef.current)
+            return;
+        const rect = triggerRef.current.getBoundingClientRect();
+        const gap = 8;
+        let top = 0;
+        let left = 0;
+        const base = placement.split('-')[0];
+        const align = placement.split('-')[1];
+        if (base === 'bottom') {
+            top = rect.bottom + window.scrollY + gap;
+        }
+        if (base === 'top') {
+            top = rect.top + window.scrollY - gap;
+        }
+        if (base === 'right') {
+            left = rect.right + window.scrollX + gap;
+            top = rect.top + window.scrollY;
+        }
+        if (base === 'left') {
+            left = rect.left + window.scrollX - gap;
+            top = rect.top + window.scrollY;
+        }
+        if (!align || align === 'start') {
+            left = rect.left + window.scrollX;
+        }
+        if (align === 'end') {
+            left = rect.right + window.scrollX;
+        }
+        if (align === 'center' || (base === 'top' || base === 'bottom') && !align) {
+            left = rect.left + window.scrollX + rect.width / 2;
+        }
+        setPos({ top, left });
+    }, [placement]);
+    (0, react_1.useEffect)(() => {
+        if (!isOpen || !closeOnClickOutside)
+            return;
+        const handle = (e) => {
+            if (!triggerRef.current?.contains(e.target) && !contentRef.current?.contains(e.target)) {
+                setOpen(false);
+            }
+        };
+        document.addEventListener('mousedown', handle);
+        return () => document.removeEventListener('mousedown', handle);
+    }, [isOpen, closeOnClickOutside, setOpen]);
+    (0, react_1.useEffect)(() => {
+        if (!isOpen || !closeOnEsc)
+            return;
+        const h = (e) => { if (e.key === 'Escape')
+            setOpen(false); };
+        document.addEventListener('keydown', h);
+        return () => document.removeEventListener('keydown', h);
+    }, [isOpen, closeOnEsc, setOpen]);
+    const handleToggle = () => { updatePosition(); setOpen(!isOpen); };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [react_1.default.cloneElement(trigger, {
+                ref: triggerRef,
+                'aria-expanded': isOpen,
+                'aria-haspopup': 'dialog',
+                'aria-controls': isOpen ? popoverId : undefined,
+                onClick: (e) => { handleToggle(); trigger.props.onClick?.(e); },
+            }), isOpen && ((0, jsx_runtime_1.jsx)(index_js_1.Portal, { children: (0, jsx_runtime_1.jsxs)("div", { ref: contentRef, id: popoverId, role: "dialog", "aria-modal": "false", tabIndex: -1, className: (0, cn_js_1.cn)('tokis-popover-content', className), style: { position: 'absolute', top: pos.top, left: pos.left }, children: [title && (0, jsx_runtime_1.jsx)("p", { className: "tokis-popover-title", children: title }), (0, jsx_runtime_1.jsx)("button", { className: "tokis-popover-close", onClick: () => setOpen(false), "aria-label": "Close", children: (0, jsx_runtime_1.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)("path", { d: "M1 1l10 10M11 1L1 11", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) }), content] }) }))] }));
+}

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Portal = Portal;
+const react_dom_1 = require("react-dom");
+function Portal({ children, container }) {
+    if (typeof document === 'undefined')
+        return null;
+    const target = container ?? document.body;
+    return (0, react_dom_1.createPortal)(children, target);
+}

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

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Spinner = exports.Skeleton = exports.Progress = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const cn_js_1 = require("../../utils/cn");
+exports.Progress = (0, react_1.forwardRef)(({ value, max = 100, label, showValue = false, variant = 'default', size = 'md', className, ...props }, ref) => {
+    const pct = value !== undefined ? Math.min(100, Math.max(0, (value / max) * 100)) : undefined;
+    const isIndeterminate = pct === undefined;
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, className: (0, cn_js_1.cn)('tokis-progress-root', className), ...props, children: [(label || showValue) && ((0, jsx_runtime_1.jsxs)("div", { className: "tokis-progress-label", children: [label && (0, jsx_runtime_1.jsx)("span", { className: "tokis-progress-label-text", children: label }), showValue && !isIndeterminate && (0, jsx_runtime_1.jsxs)("span", { className: "tokis-progress-label-value", children: [Math.round(pct), "%"] })] })), (0, jsx_runtime_1.jsx)("div", { role: "progressbar", "aria-valuenow": isIndeterminate ? undefined : pct, "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": label, className: (0, cn_js_1.cn)('tokis-progress-track', size !== 'md' && `tokis-progress-track--${size}`), children: (0, jsx_runtime_1.jsx)("div", { className: (0, cn_js_1.cn)('tokis-progress-fill', variant !== 'default' && `tokis-progress-fill--${variant}`, isIndeterminate && 'tokis-progress-fill--indeterminate'), style: !isIndeterminate ? { width: `${pct}%` } : undefined }) })] }));
+});
+exports.Progress.displayName = 'Progress';
+exports.Skeleton = (0, react_1.forwardRef)(({ variant = 'rectangular', width, height, lines, className, style, ...props }, ref) => {
+    if (lines && lines > 1) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: className, children: Array.from({ length: lines }).map((_, i) => ((0, jsx_runtime_1.jsx)("span", { className: (0, cn_js_1.cn)('tokis-skeleton tokis-skeleton--text'), style: { width: i === lines - 1 ? '70%' : '100%', marginBottom: i < lines - 1 ? '8px' : 0 } }, i))) }));
+    }
+    return ((0, jsx_runtime_1.jsx)("span", { ref: ref, className: (0, cn_js_1.cn)('tokis-skeleton', variant === 'text' && 'tokis-skeleton--text', variant === 'circular' && 'tokis-skeleton--circle', variant === 'wave' && 'tokis-skeleton--wave', className), style: { display: 'block', width, height, ...style }, "aria-hidden": "true", ...props }));
+});
+exports.Skeleton.displayName = 'Skeleton';
+exports.Spinner = (0, react_1.forwardRef)(({ size = 'md', variant = 'default', label = 'Loading…', className, ...props }, ref) => ((0, jsx_runtime_1.jsx)("span", { ref: ref, role: "status", "aria-label": label, className: (0, cn_js_1.cn)('tokis-spinner', size !== 'md' && `tokis-spinner--${size}`, variant === 'white' && 'tokis-spinner--white', className), ...props })));
+exports.Spinner.displayName = 'Spinner';

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

@@ -0,0 +1,60 @@
+"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.Radio = Radio;
+exports.RadioGroup = RadioGroup;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const cn_js_1 = require("../../utils/cn");
+function Radio({ value, label, description, disabled = false, checked = false, name, onChange, className }) {
+    const autoId = (0, react_1.useId)();
+    const radioId = `radio-${autoId}`;
+    const descId = description ? `${radioId}-desc` : undefined;
+    return ((0, jsx_runtime_1.jsxs)("label", { className: (0, cn_js_1.cn)('tokis-radio-root', className), "data-disabled": disabled || undefined, htmlFor: radioId, children: [(0, jsx_runtime_1.jsx)("input", { type: "radio", id: radioId, name: name, value: value, checked: checked, disabled: disabled, onChange: (e) => e.target.checked && onChange?.(value), className: "tokis-radio-native", "aria-describedby": descId }), (0, jsx_runtime_1.jsx)("span", { "aria-hidden": "true", className: "tokis-radio-control", "data-checked": checked ? 'true' : undefined }), (label || description) && ((0, jsx_runtime_1.jsxs)("div", { children: [label && (0, jsx_runtime_1.jsx)("span", { className: "tokis-radio-label", children: label }), description && (0, jsx_runtime_1.jsx)("p", { id: descId, className: "tokis-radio-description", children: description })] }))] }));
+}
+function RadioGroup({ value, onChange, name, orientation = 'vertical', disabled = false, children, className, label }) {
+    const groupId = (0, react_1.useId)();
+    return ((0, jsx_runtime_1.jsxs)("div", { role: "radiogroup", "aria-labelledby": label ? groupId : undefined, "aria-disabled": disabled, className: (0, cn_js_1.cn)('tokis-radio-group', orientation === 'horizontal' && 'tokis-radio-group--horizontal', className), children: [label && (0, jsx_runtime_1.jsx)("span", { id: groupId, className: "tokis-label", style: { marginBottom: 'var(--tokis-spacing-1)' }, children: label }), react_1.default.Children.map(children, (child) => {
+                if (!react_1.default.isValidElement(child))
+                    return child;
+                const item = child;
+                return react_1.default.cloneElement(item, {
+                    name: name ?? groupId,
+                    checked: value !== undefined ? item.props.value === value : item.props.checked,
+                    disabled: disabled || item.props.disabled,
+                    onChange: (v) => onChange?.(v),
+                });
+            })] }));
+}

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

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Result = Result;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const cn_js_1 = require("../../utils/cn");
+const StatusIcon = ({ status }) => {
+    if (status === 'success') {
+        return ((0, jsx_runtime_1.jsxs)("svg", { width: "48", height: "48", viewBox: "0 0 48 48", fill: "none", "aria-hidden": "true", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "24", cy: "24", r: "22", stroke: "currentColor", strokeWidth: "2" }), (0, jsx_runtime_1.jsx)("path", { d: "M14 24l7 7 13-14", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" })] }));
+    }
+    if (status === 'error') {
+        return ((0, jsx_runtime_1.jsxs)("svg", { width: "48", height: "48", viewBox: "0 0 48 48", fill: "none", "aria-hidden": "true", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "24", cy: "24", r: "22", stroke: "currentColor", strokeWidth: "2" }), (0, jsx_runtime_1.jsx)("path", { d: "M16 16l16 16M32 16L16 32", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round" })] }));
+    }
+    if (status === 'warning') {
+        return ((0, jsx_runtime_1.jsxs)("svg", { width: "48", height: "48", viewBox: "0 0 48 48", fill: "none", "aria-hidden": "true", children: [(0, jsx_runtime_1.jsx)("path", { d: "M24 6L42 40H6L24 6z", stroke: "currentColor", strokeWidth: "2", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M24 20v10M24 34v2", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round" })] }));
+    }
+    if (status === 'info') {
+        return ((0, jsx_runtime_1.jsxs)("svg", { width: "48", height: "48", viewBox: "0 0 48 48", fill: "none", "aria-hidden": "true", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "24", cy: "24", r: "22", stroke: "currentColor", strokeWidth: "2" }), (0, jsx_runtime_1.jsx)("path", { d: "M24 22v12M24 16v2", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round" })] }));
+    }
+    // loading
+    return ((0, jsx_runtime_1.jsx)("svg", { width: "48", height: "48", viewBox: "0 0 48 48", fill: "none", "aria-hidden": "true", className: "tokis-result__spin", children: (0, jsx_runtime_1.jsx)("circle", { cx: "24", cy: "24", r: "20", stroke: "currentColor", strokeWidth: "3", strokeDasharray: "31.4 94.2", strokeLinecap: "round" }) }));
+};
+function Result({ status, title, description, extra, className }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_js_1.cn)('tokis-result', `tokis-result--${status}`, className), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, cn_js_1.cn)('tokis-result__icon', `tokis-result__icon--${status}`), children: (0, jsx_runtime_1.jsx)(StatusIcon, { status: status }) }), (0, jsx_runtime_1.jsx)("h3", { className: "tokis-result__title", children: title }), description && (0, jsx_runtime_1.jsx)("p", { className: "tokis-result__description", children: description }), extra && (0, jsx_runtime_1.jsx)("div", { className: "tokis-result__extra", children: extra })] }));
+}
+Result.displayName = 'Result';

package/dist/cjs/components/search-field/index.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchField = SearchField;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const cn_js_1 = require("../../utils/cn");
+function SearchField({ value, onChange, onSearch, placeholder = 'Search…', loading = false, debounce = 300, label, className, }) {
+    const debounceRef = (0, react_1.useRef)();
+    const handleChange = (0, react_1.useCallback)((e) => {
+        const val = e.target.value;
+        onChange(val);
+        if (onSearch) {
+            clearTimeout(debounceRef.current);
+            debounceRef.current = setTimeout(() => onSearch(val), debounce);
+        }
+    }, [onChange, onSearch, debounce]);
+    const handleKeyDown = (0, react_1.useCallback)((e) => {
+        if (e.key === 'Enter' && onSearch) {
+            clearTimeout(debounceRef.current);
+            onSearch(value);
+        }
+        if (e.key === 'Escape') {
+            onChange('');
+            onSearch?.('');
+        }
+    }, [value, onChange, onSearch]);
+    (0, react_1.useEffect)(() => () => clearTimeout(debounceRef.current), []);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_js_1.cn)('tokis-search-field', className), children: [label && (0, jsx_runtime_1.jsx)("label", { className: "tokis-search-field__label", children: label }), (0, jsx_runtime_1.jsxs)("div", { className: "tokis-search-field__wrap", children: [(0, jsx_runtime_1.jsx)("span", { className: "tokis-search-field__icon", "aria-hidden": "true", children: (0, jsx_runtime_1.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "6", cy: "6", r: "4", stroke: "currentColor", strokeWidth: "1.4" }), (0, jsx_runtime_1.jsx)("path", { d: "M9.5 9.5L12 12", stroke: "currentColor", strokeWidth: "1.4", strokeLinecap: "round" })] }) }), (0, jsx_runtime_1.jsx)("input", { type: "search", className: "tokis-search-field__input", value: value, onChange: handleChange, onKeyDown: handleKeyDown, placeholder: placeholder, "aria-label": label ?? placeholder }), loading && ((0, jsx_runtime_1.jsx)("span", { className: "tokis-search-field__spinner", "aria-label": "Searching\u2026" })), !loading && value && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "tokis-search-field__clear", onClick: () => { onChange(''); onSearch?.(''); }, "aria-label": "Clear search", children: (0, jsx_runtime_1.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", children: (0, jsx_runtime_1.jsx)("path", { d: "M2 2l8 8M10 2l-8 8", stroke: "currentColor", strokeWidth: "1.4", strokeLinecap: "round" }) }) }))] })] }));
+}
+SearchField.displayName = 'SearchField';

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

@@ -0,0 +1,88 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Select = Select;
+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");
+function Select({ value, defaultValue, onChange, options, placeholder = 'Select an option', disabled = false, label, helperText, error = false, required, id, className, size = 'md', }) {
+    const autoId = (0, react_1.useId)();
+    const selectId = id ?? `select-${autoId}`;
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const [internalValue, setInternalValue] = (0, react_1.useState)(defaultValue ?? '');
+    const [focusedIndex, setFocusedIndex] = (0, react_1.useState)(-1);
+    const triggerRef = (0, react_1.useRef)(null);
+    const contentRef = (0, react_1.useRef)(null);
+    const [position, setPosition] = (0, react_1.useState)({ top: 0, left: 0, width: 0 });
+    const currentValue = value !== undefined ? value : internalValue;
+    const selectedOption = options.find((o) => o.value === currentValue);
+    const enabledOptions = options.filter((o) => !o.disabled);
+    const updatePosition = (0, react_1.useCallback)(() => {
+        if (!triggerRef.current)
+            return;
+        const rect = triggerRef.current.getBoundingClientRect();
+        setPosition({ top: rect.bottom + window.scrollY + 4, left: rect.left + window.scrollX, width: rect.width });
+    }, []);
+    const handleSelect = (val) => {
+        if (value === undefined)
+            setInternalValue(val);
+        onChange?.(val);
+        setOpen(false);
+        triggerRef.current?.focus();
+    };
+    const handleKeyDown = (e) => {
+        if (disabled)
+            return;
+        if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+            e.preventDefault();
+            if (!open) {
+                updatePosition();
+                setOpen(true);
+                setFocusedIndex(0);
+                return;
+            }
+            setFocusedIndex((prev) => {
+                const next = e.key === 'ArrowDown' ? (prev + 1) % enabledOptions.length : (prev - 1 + enabledOptions.length) % enabledOptions.length;
+                return next;
+            });
+        }
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            if (!open) {
+                updatePosition();
+                setOpen(true);
+                return;
+            }
+            if (focusedIndex >= 0)
+                handleSelect(enabledOptions[focusedIndex].value);
+        }
+        if (e.key === 'Escape') {
+            setOpen(false);
+            triggerRef.current?.focus();
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        if (!open)
+            return;
+        const handle = (e) => {
+            if (!triggerRef.current?.contains(e.target) && !contentRef.current?.contains(e.target)) {
+                setOpen(false);
+            }
+        };
+        document.addEventListener('mousedown', handle);
+        return () => document.removeEventListener('mousedown', handle);
+    }, [open]);
+    const helperId = helperText ? `${selectId}-helper` : undefined;
+    const groups = [...new Set(options.map((o) => o.group))];
+    const hasGroups = groups.some(Boolean);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_js_1.cn)('tokis-field', className), children: [label && ((0, jsx_runtime_1.jsx)("label", { htmlFor: selectId, className: (0, cn_js_1.cn)('tokis-label', required && 'tokis-label--required'), children: label })), (0, jsx_runtime_1.jsxs)("button", { ref: triggerRef, id: selectId, type: "button", role: "combobox", "aria-expanded": open, "aria-haspopup": "listbox", "aria-describedby": helperId, "aria-invalid": error || undefined, "aria-required": required, "aria-disabled": disabled, className: (0, cn_js_1.cn)('tokis-select-trigger', size !== 'md' && `tokis-select-trigger--${size}`), "data-open": open || undefined, "data-disabled": disabled || undefined, disabled: disabled, onKeyDown: handleKeyDown, onClick: () => { if (!disabled) {
+                    updatePosition();
+                    setOpen((v) => !v);
+                } }, children: [(0, jsx_runtime_1.jsx)("span", { className: (0, cn_js_1.cn)(!selectedOption && 'tokis-select-trigger__placeholder'), children: selectedOption ? selectedOption.label : placeholder }), (0, jsx_runtime_1.jsx)("svg", { className: "tokis-select-trigger__icon", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)("path", { d: "M4 6l4 4 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })] }), open && ((0, jsx_runtime_1.jsx)(index_js_1.Portal, { children: (0, jsx_runtime_1.jsx)("div", { ref: contentRef, role: "listbox", "aria-label": label, className: "tokis-select-content", style: { position: 'absolute', top: position.top, left: position.left, width: position.width }, children: hasGroups
+                        ? groups.map((group) => ((0, jsx_runtime_1.jsxs)("div", { children: [group && (0, jsx_runtime_1.jsx)("div", { className: "tokis-select-group-label", children: group }), options.filter((o) => o.group === group).map((opt) => ((0, jsx_runtime_1.jsx)(SelectItem, { opt: opt, currentValue: currentValue, onSelect: handleSelect }, opt.value)))] }, group ?? '__default__')))
+                        : options.map((opt) => ((0, jsx_runtime_1.jsx)(SelectItem, { opt: opt, currentValue: currentValue, onSelect: handleSelect }, opt.value))) }) })), helperText && ((0, jsx_runtime_1.jsx)("span", { id: helperId, className: (0, cn_js_1.cn)('tokis-helper-text', error && 'tokis-helper-text--error'), children: helperText }))] }));
+}
+function SelectItem({ opt, currentValue, onSelect }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { role: "option", "aria-selected": opt.value === currentValue, "aria-disabled": opt.disabled, className: "tokis-select-item", "data-selected": opt.value === currentValue ? 'true' : undefined, "data-disabled": opt.disabled ? 'true' : undefined, onClick: () => { if (!opt.disabled)
+            onSelect(opt.value); }, children: [opt.value === currentValue && ((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 3.5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })), opt.label] }));
+}

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

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

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

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Slider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const cn_js_1 = require("../../utils/cn");
+exports.Slider = (0, react_1.forwardRef)(({ value, defaultValue = 0, min = 0, max = 100, step = 1, onChange, disabled = false, label, showValue = false, marks, className, ...props }, ref) => {
+    const [internal, setInternal] = (0, react_1.useState)(defaultValue);
+    const current = value ?? internal;
+    const trackRef = (0, react_1.useRef)(null);
+    const clamp = (v) => Math.min(max, Math.max(min, Math.round(v / step) * step));
+    const pct = ((current - min) / (max - min)) * 100;
+    const handleChange = (0, react_1.useCallback)((newVal) => {
+        const clamped = clamp(newVal);
+        if (value === undefined)
+            setInternal(clamped);
+        onChange?.(clamped);
+    }, [min, max, step, value, onChange]);
+    const handleKeyDown = (e) => {
+        if (disabled)
+            return;
+        if (e.key === 'ArrowRight' || e.key === 'ArrowUp') {
+            e.preventDefault();
+            handleChange(current + step);
+        }
+        if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') {
+            e.preventDefault();
+            handleChange(current - step);
+        }
+        if (e.key === 'Home') {
+            e.preventDefault();
+            handleChange(min);
+        }
+        if (e.key === 'End') {
+            e.preventDefault();
+            handleChange(max);
+        }
+        if (e.key === 'PageUp') {
+            e.preventDefault();
+            handleChange(current + step * 10);
+        }
+        if (e.key === 'PageDown') {
+            e.preventDefault();
+            handleChange(current - step * 10);
+        }
+    };
+    const handleTrackClick = (e) => {
+        if (disabled || !trackRef.current)
+            return;
+        const rect = trackRef.current.getBoundingClientRect();
+        const ratio = (e.clientX - rect.left) / rect.width;
+        handleChange(min + ratio * (max - min));
+    };
+    const markList = Array.isArray(marks)
+        ? marks
+        : marks
+            ? [{ value: min }, { value: max }]
+            : [];
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_js_1.cn)('tokis-slider-root', className), "data-disabled": disabled || undefined, ...props, ref: ref, children: [label && ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', justifyContent: 'space-between', marginBottom: '8px' }, children: [(0, jsx_runtime_1.jsx)("span", { className: "tokis-label", children: label }), showValue && (0, jsx_runtime_1.jsx)("span", { className: "tokis-text--secondary", style: { fontSize: 'var(--tokis-font-size-sm)' }, children: current })] })), (0, jsx_runtime_1.jsxs)("div", { className: "tokis-slider-track-wrapper", children: [(0, jsx_runtime_1.jsx)("div", { ref: trackRef, className: "tokis-slider-track", onClick: handleTrackClick, children: (0, jsx_runtime_1.jsx)("div", { className: "tokis-slider-range", style: { width: `${pct}%` } }) }), (0, jsx_runtime_1.jsx)("div", { role: "slider", tabIndex: disabled ? -1 : 0, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": current, "aria-label": label, "aria-disabled": disabled, className: "tokis-slider-thumb", style: { left: `${pct}%` }, onKeyDown: handleKeyDown, onMouseDown: (e) => {
+                            if (disabled)
+                                return;
+                            e.preventDefault();
+                            const move = (me) => {
+                                if (!trackRef.current)
+                                    return;
+                                const rect = trackRef.current.getBoundingClientRect();
+                                handleChange(min + ((me.clientX - rect.left) / rect.width) * (max - min));
+                            };
+                            document.addEventListener('mousemove', move);
+                            document.addEventListener('mouseup', () => document.removeEventListener('mousemove', move), { once: true });
+                        } })] }), markList.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "tokis-slider-marks", children: markList.map((m) => ((0, jsx_runtime_1.jsx)("span", { className: "tokis-slider-mark-label", children: m.label ?? m.value }, m.value))) }))] }));
+});
+exports.Slider.displayName = 'Slider';