@tokis/react 1.0.0

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

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SnackbarContainer = SnackbarContainer;
+exports.useSnackbar = useSnackbar;
+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 SnackbarContainer({ position = 'bottom-right', items, onDismiss }) {
+    const posClassMap = {
+        'bottom-right': '', 'bottom-left': 'tokis-snackbar-container--bottom-left',
+        'bottom-center': 'tokis-snackbar-container--bottom-center',
+        'top-right': 'tokis-snackbar-container--top-right',
+        'top-center': 'tokis-snackbar-container--top-center',
+    };
+    return ((0, jsx_runtime_1.jsx)(index_js_1.Portal, { children: (0, jsx_runtime_1.jsx)("div", { className: (0, cn_js_1.cn)('tokis-snackbar-container', posClassMap[position]), "aria-live": "polite", "aria-atomic": "false", children: items.map((item) => ((0, jsx_runtime_1.jsx)(SnackbarToast, { item: item, onDismiss: onDismiss }, item.id))) }) }));
+}
+function SnackbarToast({ item, onDismiss }) {
+    (0, react_1.useEffect)(() => {
+        const duration = item.duration ?? 4000;
+        if (duration === Infinity)
+            return;
+        const t = setTimeout(() => onDismiss(item.id), duration);
+        return () => clearTimeout(t);
+    }, [item.id, item.duration, onDismiss]);
+    return ((0, jsx_runtime_1.jsxs)("div", { role: "status", className: (0, cn_js_1.cn)('tokis-snackbar', item.variant && item.variant !== 'default' && `tokis-snackbar--${item.variant}`), children: [(0, jsx_runtime_1.jsxs)("div", { className: "tokis-snackbar__body", children: [item.title && (0, jsx_runtime_1.jsx)("div", { className: "tokis-snackbar__title", children: item.title }), (0, jsx_runtime_1.jsx)("div", { children: item.message }), item.action && ((0, jsx_runtime_1.jsx)("button", { className: "tokis-snackbar__action", onClick: () => { item.action.onClick(); onDismiss(item.id); }, children: item.action.label }))] }), (0, jsx_runtime_1.jsx)("button", { className: "tokis-snackbar__close", onClick: () => onDismiss(item.id), "aria-label": "Dismiss", children: (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 2l10 10M12 2L2 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) })] }));
+}
+// ─── useSnackbar hook ─────────────────────────────────────
+function useSnackbar() {
+    const [items, setItems] = (0, react_1.useState)([]);
+    const add = (0, react_1.useCallback)((item) => {
+        const id = `snackbar-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`;
+        setItems((prev) => [...prev, { ...item, id }]);
+        return id;
+    }, []);
+    const dismiss = (0, react_1.useCallback)((id) => {
+        setItems((prev) => prev.filter((i) => i.id !== id));
+    }, []);
+    const dismissAll = (0, react_1.useCallback)(() => setItems([]), []);
+    return { items, add, dismiss, dismissAll };
+}

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

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

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Statistic = Statistic;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const cn_js_1 = require("../../utils/cn");
+function TrendIcon({ trend }) {
+    if (trend === 'up') {
+        return ((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: "M7 11V3M3 7l4-4 4 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+    }
+    if (trend === 'down') {
+        return ((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: "M7 3v8M3 7l4 4 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+    }
+    return ((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: "M3 7h8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }));
+}
+function Statistic({ value, label, prefix, suffix, trend, trendValue, description, className, }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_js_1.cn)('tokis-statistic', className), children: [(0, jsx_runtime_1.jsx)("div", { className: "tokis-statistic__label", children: label }), (0, jsx_runtime_1.jsxs)("div", { className: "tokis-statistic__value-row", children: [prefix && (0, jsx_runtime_1.jsx)("span", { className: "tokis-statistic__prefix", children: prefix }), (0, jsx_runtime_1.jsx)("span", { className: "tokis-statistic__value", children: value }), suffix && (0, jsx_runtime_1.jsx)("span", { className: "tokis-statistic__suffix", children: suffix }), trend && trendValue && ((0, jsx_runtime_1.jsxs)("span", { className: (0, cn_js_1.cn)('tokis-statistic__trend', `tokis-statistic__trend--${trend}`), "aria-label": `Trend: ${trend === 'up' ? 'up' : trend === 'down' ? 'down' : 'neutral'} ${trendValue}`, children: [(0, jsx_runtime_1.jsx)(TrendIcon, { trend: trend }), trendValue] }))] }), description && ((0, jsx_runtime_1.jsx)("div", { className: "tokis-statistic__desc", children: description }))] }));
+}

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

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Stepper = Stepper;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const cn_js_1 = require("../../utils/cn");
+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.8", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+const ErrorIcon = () => ((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: "M3 3l8 8M11 3L3 11", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round" }) }));
+function getStepStatus(step, index, current) {
+    if (step.status)
+        return step.status;
+    if (index < current)
+        return 'completed';
+    if (index === current)
+        return 'active';
+    return 'pending';
+}
+function Stepper({ steps, current, orientation = 'horizontal', className }) {
+    return ((0, jsx_runtime_1.jsx)("ol", { className: (0, cn_js_1.cn)('tokis-stepper', `tokis-stepper--${orientation}`, className), "aria-label": "Progress steps", children: steps.map((step, index) => {
+            const status = getStepStatus(step, index, current);
+            const isLast = index === steps.length - 1;
+            return ((0, jsx_runtime_1.jsxs)("li", { className: (0, cn_js_1.cn)('tokis-stepper__step', `tokis-stepper__step--${status}`), "aria-current": status === 'active' ? 'step' : undefined, children: [(0, jsx_runtime_1.jsxs)("div", { className: "tokis-stepper__step-inner", children: [(0, jsx_runtime_1.jsx)("div", { className: (0, cn_js_1.cn)('tokis-stepper__circle', `tokis-stepper__circle--${status}`), children: status === 'completed' ? (0, jsx_runtime_1.jsx)(CheckIcon, {}) : status === 'error' ? (0, jsx_runtime_1.jsx)(ErrorIcon, {}) : (0, jsx_runtime_1.jsx)("span", { children: index + 1 }) }), (0, jsx_runtime_1.jsxs)("div", { className: "tokis-stepper__text", children: [(0, jsx_runtime_1.jsx)("div", { className: "tokis-stepper__label", children: step.label }), step.description && (0, jsx_runtime_1.jsx)("div", { className: "tokis-stepper__desc", children: step.description })] })] }), !isLast && (0, jsx_runtime_1.jsx)("div", { className: (0, cn_js_1.cn)('tokis-stepper__connector', status === 'completed' && 'tokis-stepper__connector--completed'), "aria-hidden": "true" })] }, index));
+        }) }));
+}
+Stepper.displayName = 'Stepper';

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

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Switch = Switch;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const cn_js_1 = require("../../utils/cn");
+function Switch({ checked, defaultChecked, onChange, label, description, disabled = false, size = 'md', id, name, className, 'aria-label': ariaLabel }) {
+    const autoId = (0, react_1.useId)();
+    const switchId = id ?? `switch-${autoId}`;
+    const descId = description ? `${switchId}-desc` : undefined;
+    const toggle = (0, react_1.useCallback)(() => {
+        if (!disabled)
+            onChange?.(!checked);
+    }, [checked, disabled, onChange]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_js_1.cn)('tokis-switch-root', size === 'sm' && 'tokis-switch-root--sm', className), "data-disabled": disabled || undefined, children: [(0, jsx_runtime_1.jsx)("div", { role: "switch", tabIndex: disabled ? -1 : 0, "aria-checked": checked ?? false, "aria-label": ariaLabel, "aria-labelledby": label ? switchId : undefined, "aria-describedby": descId, "aria-disabled": disabled, className: "tokis-switch-track", "data-checked": checked ? 'true' : undefined, onClick: toggle, onKeyDown: (e) => { if (e.key === ' ' || e.key === 'Enter') {
+                    e.preventDefault();
+                    toggle();
+                } }, children: (0, jsx_runtime_1.jsx)("span", { className: "tokis-switch-thumb" }) }), (label || description) && ((0, jsx_runtime_1.jsxs)("div", { className: "tokis-switch-content", onClick: toggle, style: { cursor: disabled ? 'not-allowed' : 'pointer' }, children: [label && (0, jsx_runtime_1.jsx)("label", { id: switchId, className: "tokis-switch-label", children: label }), description && (0, jsx_runtime_1.jsx)("p", { id: descId, className: "tokis-switch-description", children: description })] })), (0, jsx_runtime_1.jsx)("input", { type: "checkbox", role: "none", name: name, checked: checked, defaultChecked: defaultChecked, disabled: disabled, onChange: (e) => onChange?.(e.target.checked), style: { position: 'absolute', opacity: 0, width: 0, height: 0 }, "aria-hidden": "true", tabIndex: -1 })] }));
+}

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

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableCell = exports.TableHeaderCell = exports.TableRow = exports.TableBody = exports.TableHead = exports.Table = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const cn_js_1 = require("../../utils/cn");
+exports.Table = (0, react_1.forwardRef)(({ striped = false, container = true, className, children, ...props }, ref) => {
+    const table = ((0, jsx_runtime_1.jsx)("table", { ref: ref, className: (0, cn_js_1.cn)('tokis-table', striped && 'tokis-table--striped', !container && className), ...props, children: children }));
+    if (!container)
+        return table;
+    return (0, jsx_runtime_1.jsx)("div", { className: (0, cn_js_1.cn)('tokis-table-container', className), children: table });
+});
+exports.Table.displayName = 'Table';
+exports.TableHead = (0, react_1.forwardRef)((props, ref) => (0, jsx_runtime_1.jsx)("thead", { ref: ref, ...props }));
+exports.TableHead.displayName = 'TableHead';
+exports.TableBody = (0, react_1.forwardRef)((props, ref) => (0, jsx_runtime_1.jsx)("tbody", { ref: ref, ...props }));
+exports.TableBody.displayName = 'TableBody';
+exports.TableRow = (0, react_1.forwardRef)((props, ref) => (0, jsx_runtime_1.jsx)("tr", { ref: ref, ...props }));
+exports.TableRow.displayName = 'TableRow';
+exports.TableHeaderCell = (0, react_1.forwardRef)(({ sortable, sorted, onSort, className, children, ...props }, ref) => ((0, jsx_runtime_1.jsx)("th", { ref: ref, scope: "col", "aria-sort": sorted ? sorted === 'asc' ? 'ascending' : 'descending' : sortable ? 'none' : undefined, className: (0, cn_js_1.cn)(sortable && 'tokis-table th--sortable', className), onClick: sortable ? onSort : undefined, onKeyDown: sortable ? (e) => { if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        onSort?.();
+    } } : undefined, tabIndex: sortable ? 0 : undefined, ...props, children: (0, jsx_runtime_1.jsxs)("span", { style: { display: 'inline-flex', alignItems: 'center', gap: '4px' }, children: [children, sortable && ((0, jsx_runtime_1.jsxs)("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", style: { opacity: sorted ? 1 : 0.4 }, children: [sorted !== 'asc' && (0, jsx_runtime_1.jsx)("path", { d: "M4 7l2 2 2-2", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" }), sorted !== 'desc' && (0, jsx_runtime_1.jsx)("path", { d: "M4 5l2-2 2 2", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" })] }))] }) })));
+exports.TableHeaderCell.displayName = 'TableHeaderCell';
+exports.TableCell = (0, react_1.forwardRef)((props, ref) => (0, jsx_runtime_1.jsx)("td", { ref: ref, ...props }));
+exports.TableCell.displayName = 'TableCell';

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

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tabs = Tabs;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const cn_js_1 = require("../../utils/cn");
+function Tabs({ tabs, defaultValue, value, onChange, variant = 'line', orientation = 'horizontal', className }) {
+    const [internalValue, setInternalValue] = (0, react_1.useState)(defaultValue ?? tabs[0]?.value ?? '');
+    const activeValue = value ?? internalValue;
+    const tablistRef = (0, react_1.useRef)(null);
+    const groupId = (0, react_1.useId)();
+    const handleChange = (val) => {
+        if (value === undefined)
+            setInternalValue(val);
+        onChange?.(val);
+    };
+    const handleKeyDown = (e, currentIndex) => {
+        const enabledTabs = tabs.filter((t) => !t.disabled);
+        const idx = enabledTabs.findIndex((t) => t.value === tabs[currentIndex].value);
+        let nextIdx = idx;
+        const isVertical = orientation === 'vertical';
+        if ((e.key === 'ArrowRight' && !isVertical) || (e.key === 'ArrowDown' && isVertical)) {
+            nextIdx = (idx + 1) % enabledTabs.length;
+        }
+        else if ((e.key === 'ArrowLeft' && !isVertical) || (e.key === 'ArrowUp' && isVertical)) {
+            nextIdx = (idx - 1 + enabledTabs.length) % enabledTabs.length;
+        }
+        else if (e.key === 'Home') {
+            nextIdx = 0;
+        }
+        else if (e.key === 'End') {
+            nextIdx = enabledTabs.length - 1;
+        }
+        else {
+            return;
+        }
+        e.preventDefault();
+        handleChange(enabledTabs[nextIdx].value);
+        const buttons = tablistRef.current?.querySelectorAll('[role="tab"]:not([disabled])');
+        buttons?.[nextIdx]?.focus();
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_js_1.cn)('tokis-tabs-root', orientation === 'vertical' && 'tokis-tabs-root--vertical', className), children: [(0, jsx_runtime_1.jsx)("div", { ref: tablistRef, role: "tablist", "aria-orientation": orientation, className: (0, cn_js_1.cn)('tokis-tabs-list', variant === 'pills' && 'tokis-tabs-list--pills'), children: tabs.map((tab, i) => ((0, jsx_runtime_1.jsxs)("button", { role: "tab", id: `${groupId}-tab-${tab.value}`, "aria-controls": `${groupId}-panel-${tab.value}`, "aria-selected": tab.value === activeValue, "aria-disabled": tab.disabled, disabled: tab.disabled, tabIndex: tab.value === activeValue ? 0 : -1, "data-active": tab.value === activeValue ? 'true' : undefined, className: "tokis-tabs-trigger", onClick: () => { if (!tab.disabled)
+                        handleChange(tab.value); }, onKeyDown: (e) => handleKeyDown(e, i), children: [tab.icon && (0, jsx_runtime_1.jsx)("span", { className: "tokis-btn__icon", "aria-hidden": "true", children: tab.icon }), tab.label] }, tab.value))) }), tabs.map((tab) => ((0, jsx_runtime_1.jsx)("div", { role: "tabpanel", id: `${groupId}-panel-${tab.value}`, "aria-labelledby": `${groupId}-tab-${tab.value}`, tabIndex: 0, className: "tokis-tabs-panel", hidden: tab.value !== activeValue, children: tab.value === activeValue ? tab.content : null }, tab.value)))] }));
+}

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

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tag = void 0;
+// Re-export Chip as Tag (same component, different semantic)
+var index_js_1 = require("../avatar/index");
+Object.defineProperty(exports, "Tag", { enumerable: true, get: function () { return index_js_1.Chip; } });

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

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Timeline = Timeline;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const cn_js_1 = require("../../utils/cn");
+function Timeline({ items, className }) {
+    return ((0, jsx_runtime_1.jsx)("ol", { className: (0, cn_js_1.cn)('tokis-timeline', className), "aria-label": "Timeline", children: items.map((item, index) => {
+            const variant = item.variant ?? 'default';
+            const isLast = index === items.length - 1;
+            return ((0, jsx_runtime_1.jsxs)("li", { className: "tokis-timeline__item", children: [(0, jsx_runtime_1.jsxs)("div", { className: "tokis-timeline__track", "aria-hidden": "true", children: [(0, jsx_runtime_1.jsx)("div", { className: (0, cn_js_1.cn)('tokis-timeline__dot', `tokis-timeline__dot--${variant}`), children: item.icon ?? null }), !isLast && (0, jsx_runtime_1.jsx)("div", { className: "tokis-timeline__connector" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "tokis-timeline__content", children: [(0, jsx_runtime_1.jsxs)("div", { className: "tokis-timeline__header", children: [(0, jsx_runtime_1.jsx)("span", { className: "tokis-timeline__title", children: item.title }), item.date && ((0, jsx_runtime_1.jsx)("time", { className: "tokis-timeline__date", dateTime: item.date, children: item.date }))] }), item.description && ((0, jsx_runtime_1.jsx)("div", { className: "tokis-timeline__desc", children: item.description }))] })] }, item.id));
+        }) }));
+}

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

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToggleButton = ToggleButton;
+exports.ToggleGroup = ToggleGroup;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const cn_js_1 = require("../../utils/cn");
+function ToggleButton({ pressed, onChange, children, disabled = false, size = 'md', className, 'aria-label': ariaLabel, }) {
+    return ((0, jsx_runtime_1.jsx)("button", { type: "button", className: (0, cn_js_1.cn)('tokis-toggle', `tokis-toggle--${size}`, pressed && 'tokis-toggle--pressed', className), "aria-pressed": pressed, "aria-label": ariaLabel, disabled: disabled, onClick: () => onChange(!pressed), children: children }));
+}
+ToggleButton.displayName = 'ToggleButton';
+function ToggleGroup({ options, value, onChange, multiple = false, size = 'md', className, }) {
+    const isSelected = (v) => multiple ? value.includes(v) : value === v;
+    const handleClick = (v) => {
+        if (multiple) {
+            const arr = value;
+            if (arr.includes(v)) {
+                onChange(arr.filter((x) => x !== v));
+            }
+            else {
+                onChange([...arr, v]);
+            }
+        }
+        else {
+            onChange(v);
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, cn_js_1.cn)('tokis-toggle-group', className), role: multiple ? 'group' : 'radiogroup', "aria-label": "Toggle group", children: options.map((opt) => {
+            const selected = isSelected(opt.value);
+            return ((0, jsx_runtime_1.jsx)("button", { type: "button", className: (0, cn_js_1.cn)('tokis-toggle-group__item', `tokis-toggle-group__item--${size}`, selected && 'tokis-toggle-group__item--active'), role: multiple ? 'checkbox' : 'radio', "aria-checked": selected, disabled: opt.disabled, onClick: () => handleClick(opt.value), children: opt.label }, opt.value));
+        }) }));
+}
+ToggleGroup.displayName = 'ToggleGroup';

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

@@ -0,0 +1,116 @@
+"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.Tooltip = Tooltip;
+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 Tooltip({ content, children, placement = 'top', delay = 300, disabled = false }) {
+    const [state, setState] = (0, react_1.useState)({ visible: false, top: 0, left: 0, placement });
+    const triggerRef = (0, react_1.useRef)(null);
+    const timerRef = (0, react_1.useRef)();
+    const tooltipId = (0, react_1.useId)();
+    // When placement prop changes and tooltip is visible, recompute
+    (0, react_1.useEffect)(() => {
+        if (state.visible && triggerRef.current) {
+            const rect = triggerRef.current.getBoundingClientRect();
+            const { top, left } = computePosition(rect, placement);
+            setState((prev) => ({ ...prev, top, left, placement }));
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [placement]);
+    const show = (0, react_1.useCallback)(() => {
+        timerRef.current = setTimeout(() => {
+            if (!triggerRef.current)
+                return;
+            const rect = triggerRef.current.getBoundingClientRect();
+            const { top, left } = computePosition(rect, placement);
+            // Single atomic state update — position + visible at once
+            setState({ visible: true, top, left, placement });
+        }, delay);
+    }, [delay, placement]);
+    const hide = (0, react_1.useCallback)(() => {
+        clearTimeout(timerRef.current);
+        setState((prev) => ({ ...prev, visible: false }));
+    }, []);
+    (0, react_1.useEffect)(() => () => clearTimeout(timerRef.current), []);
+    const transformMap = {
+        top: 'translateX(-50%) translateY(-100%)',
+        bottom: 'translateX(-50%)',
+        left: 'translateX(-100%) translateY(-50%)',
+        right: 'translateY(-50%)',
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [react_1.default.cloneElement(children, {
+                ref: triggerRef,
+                'aria-describedby': state.visible ? tooltipId : undefined,
+                onMouseEnter: (...args) => {
+                    if (!disabled)
+                        show();
+                    children.props.onMouseEnter?.(...args);
+                },
+                onMouseLeave: (...args) => {
+                    hide();
+                    children.props.onMouseLeave?.(...args);
+                },
+                onFocus: (...args) => {
+                    if (!disabled)
+                        show();
+                    children.props.onFocus?.(...args);
+                },
+                onBlur: (...args) => {
+                    hide();
+                    children.props.onBlur?.(...args);
+                },
+            }), state.visible && !disabled && ((0, jsx_runtime_1.jsx)(index_js_1.Portal, { children: (0, jsx_runtime_1.jsx)("div", { id: tooltipId, role: "tooltip", className: (0, cn_js_1.cn)('tokis-tooltip-content', `tokis-tooltip-content--${state.placement}`), style: {
+                        position: 'fixed',
+                        top: state.top,
+                        left: state.left,
+                        transform: transformMap[state.placement],
+                    }, children: content }) }))] }));
+}
+function computePosition(rect, placement) {
+    const gap = 8;
+    switch (placement) {
+        case 'top':
+            return { top: rect.top - gap, left: rect.left + rect.width / 2 };
+        case 'bottom':
+            return { top: rect.bottom + gap, left: rect.left + rect.width / 2 };
+        case 'left':
+            return { top: rect.top + rect.height / 2, left: rect.left - gap };
+        case 'right':
+            return { top: rect.top + rect.height / 2, left: rect.right + gap };
+    }
+}

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

@@ -0,0 +1,89 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TreeView = TreeView;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const cn_js_1 = require("../../utils/cn");
+function flattenVisible(nodes, expanded) {
+    const result = [];
+    function walk(items) {
+        for (const node of items) {
+            result.push(node);
+            if (node.children && expanded.includes(node.id)) {
+                walk(node.children);
+            }
+        }
+    }
+    walk(nodes);
+    return result;
+}
+function TreeItem({ node, level, selected, expanded, onSelect, onExpand, multiSelect, allNodes, onKeyNav, }) {
+    const hasChildren = Boolean(node.children && node.children.length > 0);
+    const isExpanded = expanded.includes(node.id);
+    const isSelected = selected.includes(node.id);
+    const handleKeyDown = (e) => {
+        switch (e.key) {
+            case 'ArrowRight':
+                e.preventDefault();
+                if (hasChildren && !isExpanded)
+                    onExpand(node.id);
+                else if (hasChildren && isExpanded)
+                    onKeyNav(node.id, 'down');
+                break;
+            case 'ArrowLeft':
+                e.preventDefault();
+                if (hasChildren && isExpanded)
+                    onExpand(node.id);
+                else
+                    onKeyNav(node.id, 'up');
+                break;
+            case 'ArrowDown':
+                e.preventDefault();
+                onKeyNav(node.id, 'down');
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                onKeyNav(node.id, 'up');
+                break;
+            case 'Enter':
+            case ' ':
+                e.preventDefault();
+                if (!node.disabled)
+                    onSelect(node.id);
+                break;
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)("li", { role: "none", children: [(0, jsx_runtime_1.jsxs)("div", { role: "treeitem", "aria-expanded": hasChildren ? isExpanded : undefined, "aria-selected": isSelected, "aria-disabled": node.disabled, "aria-level": level, tabIndex: node.disabled ? -1 : 0, className: (0, cn_js_1.cn)('tokis-treeview__item', isSelected && 'tokis-treeview__item--selected', node.disabled && 'tokis-treeview__item--disabled'), style: { paddingLeft: `calc(${(level - 1) * 20}px + var(--tokis-spacing-2))` }, onClick: () => {
+                    if (node.disabled)
+                        return;
+                    if (hasChildren)
+                        onExpand(node.id);
+                    onSelect(node.id);
+                }, onKeyDown: handleKeyDown, "data-id": node.id, children: [hasChildren ? ((0, jsx_runtime_1.jsx)("span", { className: (0, cn_js_1.cn)('tokis-treeview__chevron', isExpanded && 'tokis-treeview__chevron--open'), "aria-hidden": "true", 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: "M4 3l4 3-4 3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) })) : ((0, jsx_runtime_1.jsx)("span", { className: "tokis-treeview__leaf-spacer", "aria-hidden": "true" })), node.icon && ((0, jsx_runtime_1.jsx)("span", { className: "tokis-treeview__icon", "aria-hidden": "true", children: node.icon })), (0, jsx_runtime_1.jsx)("span", { className: "tokis-treeview__label", children: node.label })] }), hasChildren && isExpanded && ((0, jsx_runtime_1.jsx)("ul", { role: "group", className: "tokis-treeview__group", "aria-label": node.label, children: node.children.map((child) => ((0, jsx_runtime_1.jsx)(TreeItem, { node: child, level: level + 1, selected: selected, expanded: expanded, onSelect: onSelect, onExpand: onExpand, multiSelect: multiSelect, allNodes: allNodes, onKeyNav: onKeyNav }, child.id))) }))] }));
+}
+function TreeView({ data, selected = [], onSelect, expanded = [], onExpand, multiSelect = false, className, }) {
+    const treeRef = (0, react_1.useRef)(null);
+    const handleSelect = (0, react_1.useCallback)((id) => {
+        onSelect?.(id);
+    }, [onSelect]);
+    const handleExpand = (0, react_1.useCallback)((id) => {
+        onExpand?.(id);
+    }, [onExpand]);
+    const handleKeyNav = (0, react_1.useCallback)((currentId, direction) => {
+        const visible = flattenVisible(data, expanded);
+        const currentIndex = visible.findIndex((n) => n.id === currentId);
+        if (currentIndex === -1)
+            return;
+        let targetIndex;
+        if (direction === 'down')
+            targetIndex = Math.min(currentIndex + 1, visible.length - 1);
+        if (direction === 'up')
+            targetIndex = Math.max(currentIndex - 1, 0);
+        if (targetIndex !== undefined && targetIndex !== currentIndex) {
+            const targetId = visible[targetIndex].id;
+            const el = treeRef.current?.querySelector(`[data-id="${targetId}"]`);
+            el?.focus();
+        }
+    }, [data, expanded]);
+    return ((0, jsx_runtime_1.jsx)("ul", { ref: treeRef, role: "tree", "aria-multiselectable": multiSelect, className: (0, cn_js_1.cn)('tokis-treeview', className), children: data.map((node) => ((0, jsx_runtime_1.jsx)(TreeItem, { node: node, level: 1, selected: selected, expanded: expanded, onSelect: handleSelect, onExpand: handleExpand, multiSelect: multiSelect, allNodes: data, onKeyNav: handleKeyNav }, node.id))) }));
+}

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

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Typography = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const cn_js_1 = require("../../utils/cn");
+const variantElementMap = {
+    h1: 'h1', h2: 'h2', h3: 'h3', h4: 'h4', h5: 'h5', h6: 'h6',
+    body1: 'p', body2: 'p', caption: 'span', label: 'label', code: 'code', overline: 'span',
+};
+const variantClassMap = {
+    h1: 'tokis-h1', h2: 'tokis-h2', h3: 'tokis-h3', h4: 'tokis-h4', h5: 'tokis-h5', h6: 'tokis-h6',
+    body1: 'tokis-text', body2: 'tokis-text', caption: 'tokis-text', label: 'tokis-text',
+    code: 'tokis-code', overline: 'tokis-text',
+};
+exports.Typography = (0, react_1.forwardRef)(({ as, variant = 'body1', color, truncate, weight, align, className, children, ...props }, ref) => {
+    const Component = as ?? variantElementMap[variant] ?? 'p';
+    return ((0, jsx_runtime_1.jsx)(Component, { ref: ref, className: (0, cn_js_1.cn)(variantClassMap[variant], color && color !== 'inherit' && `tokis-text--${color}`, truncate && 'tokis-text--truncate', weight && `tokis-text--weight-${weight}`, align && `tokis-text--align-${align}`, className), ...props, children: children }));
+});
+exports.Typography.displayName = 'Typography';

package/dist/cjs/components/virtual-list/index.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VirtualizedList = VirtualizedList;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const cn_js_1 = require("../../utils/cn");
+function VirtualizedList({ items, itemHeight, height, renderItem, overscan = 3, className, getItemKey, }) {
+    const [scrollTop, setScrollTop] = (0, react_1.useState)(0);
+    const containerRef = (0, react_1.useRef)(null);
+    const totalHeight = items.length * itemHeight;
+    const visibleCount = Math.ceil(height / itemHeight);
+    const startIndex = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan);
+    const endIndex = Math.min(items.length - 1, startIndex + visibleCount + overscan * 2);
+    const paddingTop = startIndex * itemHeight;
+    const handleScroll = (0, react_1.useCallback)(() => {
+        if (containerRef.current)
+            setScrollTop(containerRef.current.scrollTop);
+    }, []);
+    return ((0, jsx_runtime_1.jsx)("div", { ref: containerRef, className: (0, cn_js_1.cn)('tokis-virtual-list', className), style: { height, overflow: 'auto' }, onScroll: handleScroll, children: (0, jsx_runtime_1.jsx)("div", { style: { height: totalHeight, position: 'relative' }, children: (0, jsx_runtime_1.jsx)("div", { style: { position: 'absolute', top: paddingTop, left: 0, right: 0 }, children: items.slice(startIndex, endIndex + 1).map((item, offset) => {
+                    const index = startIndex + offset;
+                    const key = getItemKey ? getItemKey(item, index) : index;
+                    return ((0, jsx_runtime_1.jsx)("div", { style: { height: itemHeight }, children: renderItem(item, index) }, key));
+                }) }) }) }));
+}
+VirtualizedList.displayName = 'VirtualizedList';

package/dist/cjs/context/ConfigProvider.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConfigProvider = void 0;
+exports.useConfig = useConfig;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const tokens_1 = require("@tokis/tokens");
+const defaultConfig = {
+    tokens: tokens_1.lightTheme,
+};
+const ConfigContext = (0, react_1.createContext)(defaultConfig);
+const ConfigProvider = ({ children, config }) => {
+    const resolved = {
+        ...defaultConfig,
+        ...config,
+    };
+    return (0, jsx_runtime_1.jsx)(ConfigContext.Provider, { value: resolved, children: children });
+};
+exports.ConfigProvider = ConfigProvider;
+function useConfig() {
+    return (0, react_1.useContext)(ConfigContext);
+}

package/dist/cjs/context/ThemeContext.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemeProvider = void 0;
+exports.useTheme = useTheme;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ThemeContext = (0, react_1.createContext)(undefined);
+const ThemeProvider = ({ children, initialMode = 'light' }) => {
+    const [mode, setMode] = (0, react_1.useState)(initialMode);
+    (0, react_1.useEffect)(() => {
+        document.documentElement.setAttribute('data-theme', mode);
+        return () => {
+            document.documentElement.removeAttribute('data-theme');
+        };
+    }, [mode]);
+    const toggle = () => setMode((prev) => (prev === 'light' ? 'dark' : 'light'));
+    return ((0, jsx_runtime_1.jsx)(ThemeContext.Provider, { value: { mode, toggle, setMode }, children: children }));
+};
+exports.ThemeProvider = ThemeProvider;
+function useTheme() {
+    const ctx = (0, react_1.useContext)(ThemeContext);
+    if (!ctx)
+        throw new Error('useTheme must be used within ThemeProvider');
+    return ctx;
+}

package/dist/cjs/hooks/useControllableState.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useControllableState = useControllableState;
+const react_1 = require("react");
+const core_1 = require("@tokis/core");
+/**
+ * A React hook for managing controllable state — supporting both
+ * controlled (externally managed) and uncontrolled (internally managed) modes.
+ *
+ * @param controlled - The externally controlled value (undefined = uncontrolled)
+ * @param defaultValue - The initial value for uncontrolled mode
+ * @param onChange - Optional callback invoked when internal state changes
+ */
+function useControllableState(controlled, defaultValue, onChange) {
+    const [internalState, setInternalState] = (0, react_1.useState)(defaultValue);
+    const controlled_ = (0, core_1.isControlled)(controlled);
+    const value = controlled_ ? controlled : internalState;
+    // Keep a stable ref to onChange to avoid stale closures
+    const onChangeRef = (0, react_1.useRef)(onChange);
+    onChangeRef.current = onChange;
+    const setValue = (0, react_1.useCallback)((next) => {
+        const nextValue = typeof next === 'function'
+            ? next(value)
+            : next;
+        if (!controlled_) {
+            setInternalState(nextValue);
+        }
+        onChangeRef.current?.(nextValue);
+    }, [controlled_, value]);
+    return [value, setValue];
+}

package/dist/cjs/hooks/useDialog.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDialog = useDialog;
+const react_1 = require("react");
+function useDialog(defaultOpen = false) {
+    const [isOpen, setIsOpen] = (0, react_1.useState)(defaultOpen);
+    const dialogId = (0, react_1.useId)();
+    const titleId = `${dialogId}-title`;
+    const descriptionId = `${dialogId}-desc`;
+    const open = (0, react_1.useCallback)(() => setIsOpen(true), []);
+    const close = (0, react_1.useCallback)(() => setIsOpen(false), []);
+    const toggle = (0, react_1.useCallback)(() => setIsOpen((v) => !v), []);
+    return {
+        isOpen,
+        open,
+        close,
+        toggle,
+        dialogProps: {
+            open: isOpen,
+            onClose: close,
+            'aria-modal': true,
+            role: 'dialog',
+            'aria-labelledby': titleId,
+            'aria-describedby': descriptionId,
+        },
+        triggerProps: {
+            onClick: open,
+            'aria-haspopup': 'dialog',
+            'aria-expanded': isOpen,
+            'aria-controls': dialogId,
+        },
+        titleId,
+        descriptionId,
+    };
+}