@tokis/react 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Tokis Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,50 @@
+# /react
+
+React adapter for the Tokis design system — composable, accessible components, hooks, and theming context.
+
+## Installation
+
+```bash
+npm install /react /theme
+```
+
+> Or install everything at once: `npm install tokis`
+
+## Usage
+
+```tsx
+import '/theme';
+import { ButtonRoot, ButtonLabel, ThemeProvider } from '/react';
+
+function App() {
+  return (
+    <ThemeProvider>
+      <ButtonRoot variant="primary" size="lg">
+        <ButtonLabel>Save changes</ButtonLabel>
+      </ButtonRoot>
+    </ThemeProvider>
+  );
+}
+```
+
+## What's Included
+
+- **60+ components** — Button, Dialog, Drawer, Menu, Table, Charts, TreeView, and more
+- **Hooks** — `useTheme`, `useControllableState`, `useDialog`, `usePopover`, `useTabs`, `useMenu`
+- **ThemeProvider** — Light/dark mode with `toggle()` and `setMode()`
+- **Composition** — Compound component patterns (`ButtonRoot` + `ButtonLabel` + `ButtonIcon`)
+- **Full TypeScript** — Exported interfaces for every component and hook
+
+## Peer Dependencies
+
+- `react` >= 18.0.0
+- `react-dom` >= 18.0.0
+- `/theme` ^0.1.0
+
+## Documentation
+
+Visit [tokis.dev](https://tokis.dev/docs/introduction) for interactive demos and full API reference.
+
+## License
+
+MIT

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

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Accordion = Accordion;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const cn_js_1 = require("../../utils/cn");
+function Accordion({ items, type = 'single', defaultValue, value, onChange, collapsible = true, variant = 'bordered', className }) {
+    const normalize = (v) => {
+        if (!v)
+            return [];
+        return Array.isArray(v) ? v : [v];
+    };
+    const [internal, setInternal] = (0, react_1.useState)(normalize(defaultValue));
+    const controlled = value !== undefined;
+    const openValues = controlled ? normalize(value) : internal;
+    const toggle = (val) => {
+        const isOpen = openValues.includes(val);
+        let next;
+        if (type === 'single') {
+            next = isOpen && collapsible ? [] : [val];
+        }
+        else {
+            next = isOpen ? openValues.filter((v) => v !== val) : [...openValues, val];
+        }
+        if (!controlled)
+            setInternal(next);
+        onChange?.(type === 'single' ? (next[0] ?? '') : next);
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, cn_js_1.cn)('tokis-accordion-root', variant === 'flush' && 'tokis-accordion-root--flush', className), children: items.map((item) => ((0, jsx_runtime_1.jsx)(AccordionItemComponent, { item: item, isOpen: openValues.includes(item.value), onToggle: toggle }, item.value))) }));
+}
+function AccordionItemComponent({ item, isOpen, onToggle }) {
+    const triggerId = (0, react_1.useId)();
+    const panelId = (0, react_1.useId)();
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "tokis-accordion-item", children: [(0, jsx_runtime_1.jsxs)("button", { id: triggerId, type: "button", "aria-expanded": isOpen, "aria-controls": panelId, "aria-disabled": item.disabled || undefined, disabled: item.disabled, className: "tokis-accordion-trigger", onClick: () => { if (!item.disabled)
+                    onToggle(item.value); }, children: [(0, jsx_runtime_1.jsx)("span", { style: { flex: 1, textAlign: 'left' }, children: item.trigger }), (0, jsx_runtime_1.jsx)("svg", { className: "tokis-accordion-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" }) })] }), (0, jsx_runtime_1.jsx)("div", { id: panelId, role: "region", "aria-labelledby": triggerId, className: "tokis-accordion-content", "data-open": isOpen ? 'true' : 'false', "aria-hidden": !isOpen, children: (0, jsx_runtime_1.jsx)("div", { className: "tokis-accordion-content-inner", children: item.content }) })] }));
+}

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Alert = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const cn_js_1 = require("../../utils/cn");
+const AlertIcons = {
+    info: (0, jsx_runtime_1.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "8", cy: "8", r: "7", stroke: "currentColor", strokeWidth: "1.5" }), (0, jsx_runtime_1.jsx)("path", { d: "M8 7v4M8 5.5v.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })] }),
+    success: (0, jsx_runtime_1.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "8", cy: "8", r: "7", stroke: "currentColor", strokeWidth: "1.5" }), (0, jsx_runtime_1.jsx)("path", { d: "M5 8l2 2 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }),
+    warning: (0, jsx_runtime_1.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [(0, jsx_runtime_1.jsx)("path", { d: "M8 2L1.5 13h13L8 2z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M8 7v2.5M8 11v.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })] }),
+    error: (0, jsx_runtime_1.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "8", cy: "8", r: "7", stroke: "currentColor", strokeWidth: "1.5" }), (0, jsx_runtime_1.jsx)("path", { d: "M6 6l4 4M10 6l-4 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })] }),
+};
+exports.Alert = (0, react_1.forwardRef)(({ variant = 'info', title, onClose, icon, action, className, children, ...props }, ref) => ((0, jsx_runtime_1.jsxs)("div", { ref: ref, role: "alert", "aria-live": "polite", className: (0, cn_js_1.cn)('tokis-alert', `tokis-alert--${variant}`, className), ...props, children: [(0, jsx_runtime_1.jsx)("span", { className: "tokis-alert__icon", children: icon ?? AlertIcons[variant] }), (0, jsx_runtime_1.jsxs)("div", { className: "tokis-alert__body", children: [title && (0, jsx_runtime_1.jsx)("div", { className: "tokis-alert__title", children: title }), children && (0, jsx_runtime_1.jsx)("div", { className: "tokis-alert__message", children: children }), action && (0, jsx_runtime_1.jsx)("div", { style: { marginTop: 'var(--tokis-spacing-2)' }, children: action })] }), onClose && ((0, jsx_runtime_1.jsx)("button", { className: "tokis-alert__close", onClick: onClose, "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" }) }) }))] })));
+exports.Alert.displayName = 'Alert';

package/dist/cjs/components/app-bar/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppBar = AppBar;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const cn_js_1 = require("../../utils/cn");
+function AppBar({ leading, title, trailing, variant = 'default', elevation = 'sm', sticky = false, className, }) {
+    return ((0, jsx_runtime_1.jsxs)("header", { className: (0, cn_js_1.cn)('tokis-app-bar', variant !== 'default' && `tokis-app-bar--${variant}`, elevation !== 'none' && `tokis-app-bar--elevation-${elevation}`, sticky && 'tokis-app-bar--sticky', className), children: [leading && (0, jsx_runtime_1.jsx)("div", { className: "tokis-app-bar__leading", children: leading }), title && (0, jsx_runtime_1.jsx)("div", { className: "tokis-app-bar__title", children: title }), trailing && (0, jsx_runtime_1.jsx)("div", { className: "tokis-app-bar__trailing", children: trailing })] }));
+}
+AppBar.displayName = 'AppBar';

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

@@ -0,0 +1,64 @@
+"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.Chip = exports.Badge = exports.Avatar = void 0;
+exports.AvatarGroup = AvatarGroup;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const cn_js_1 = require("../../utils/cn");
+function getInitials(name) {
+    return name.split(' ').slice(0, 2).map((p) => p[0]).join('').toUpperCase();
+}
+exports.Avatar = (0, react_1.forwardRef)(({ src, alt, name, size = 'md', shape = 'circle', className }, ref) => ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: (0, cn_js_1.cn)('tokis-avatar', `tokis-avatar--${size}`, shape === 'square' && 'tokis-avatar--square', className), "aria-label": name ?? alt, role: name ? 'img' : undefined, children: src ? (0, jsx_runtime_1.jsx)("img", { src: src, alt: alt ?? name ?? '' }) : name ? getInitials(name) : null })));
+exports.Avatar.displayName = 'Avatar';
+function AvatarGroup({ children, max, size = 'md', className }) {
+    const items = react_1.default.Children.toArray(children);
+    const visible = max ? items.slice(0, max) : items;
+    const overflow = max && items.length > max ? items.length - max : 0;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_js_1.cn)('tokis-avatar-group', className), children: [visible, overflow > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_js_1.cn)('tokis-avatar', `tokis-avatar--${size}`), "aria-label": `${overflow} more`, children: ["+", overflow] }))] }));
+}
+exports.Badge = (0, react_1.forwardRef)(({ variant = 'default', dot = false, className, children, ...props }, ref) => ((0, jsx_runtime_1.jsx)("span", { ref: ref, className: (0, cn_js_1.cn)('tokis-badge', `tokis-badge--${variant}`, dot && 'tokis-badge--dot', className), ...props, children: children })));
+exports.Badge.displayName = 'Badge';
+exports.Chip = (0, react_1.forwardRef)(({ selected = false, onDelete, disabled = false, icon, className, children, onClick, ...props }, ref) => ((0, jsx_runtime_1.jsxs)("div", { ref: ref, role: onClick ? 'button' : undefined, tabIndex: onClick && !disabled ? 0 : undefined, "aria-pressed": onClick ? selected : undefined, "aria-disabled": disabled || undefined, className: (0, cn_js_1.cn)('tokis-chip', onClick && 'tokis-chip--clickable', selected && 'tokis-chip--selected', className), onClick: !disabled ? onClick : undefined, onKeyDown: onClick && !disabled ? (e) => { if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        onClick(e);
+    } } : undefined, ...props, children: [icon && (0, jsx_runtime_1.jsx)("span", { "aria-hidden": "true", style: { display: 'inline-flex', alignItems: 'center' }, children: icon }), children, onDelete && ((0, jsx_runtime_1.jsx)("span", { role: "button", tabIndex: 0, className: "tokis-chip__delete", "aria-label": "Remove", onClick: (e) => { e.stopPropagation(); if (!disabled)
+                onDelete(); }, onKeyDown: (e) => { if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                e.stopPropagation();
+                if (!disabled)
+                    onDelete();
+            } }, children: (0, jsx_runtime_1.jsx)("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)("path", { d: "M1 1l8 8M9 1L1 9", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) }))] })));
+exports.Chip.displayName = 'Chip';

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

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

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

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BottomNavigation = BottomNavigation;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const cn_js_1 = require("../../utils/cn");
+function BottomNavigation({ items, value, onChange, className }) {
+    return ((0, jsx_runtime_1.jsx)("nav", { className: (0, cn_js_1.cn)('tokis-bottom-nav', className), "aria-label": "Bottom navigation", children: items.map((item) => {
+            const isActive = item.value === value;
+            return ((0, jsx_runtime_1.jsxs)("button", { className: (0, cn_js_1.cn)('tokis-bottom-nav__item', isActive && 'tokis-bottom-nav__item--active'), onClick: () => onChange(item.value), "aria-current": isActive ? 'page' : undefined, "aria-label": item.label, children: [(0, jsx_runtime_1.jsxs)("span", { className: "tokis-bottom-nav__icon", children: [item.badge !== undefined && ((0, jsx_runtime_1.jsx)("span", { className: "tokis-bottom-nav__badge", "aria-label": `${item.badge} notifications`, children: item.badge })), item.icon] }), (0, jsx_runtime_1.jsx)("span", { className: "tokis-bottom-nav__label", children: item.label })] }, item.value));
+        }) }));
+}
+BottomNavigation.displayName = 'BottomNavigation';

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

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Link = exports.Breadcrumbs = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const cn_js_1 = require("../../utils/cn");
+exports.Breadcrumbs = (0, react_1.forwardRef)(({ items, separator = '/', maxItems, className, ...props }, ref) => {
+    const visible = maxItems && items.length > maxItems
+        ? [items[0], { label: '…', onClick: undefined }, ...items.slice(-(maxItems - 1))]
+        : items;
+    return ((0, jsx_runtime_1.jsx)("nav", { ref: ref, "aria-label": "Breadcrumb", className: (0, cn_js_1.cn)('tokis-breadcrumbs', className), ...props, children: (0, jsx_runtime_1.jsx)("ol", { style: { display: 'flex', alignItems: 'center', flexWrap: 'wrap', listStyle: 'none', margin: 0, padding: 0 }, children: visible.map((item, i) => {
+                const isLast = i === visible.length - 1;
+                const isCurrent = item.current || isLast;
+                return ((0, jsx_runtime_1.jsxs)("li", { className: (0, cn_js_1.cn)('tokis-breadcrumbs-item', isCurrent && 'tokis-breadcrumbs-item--current'), "aria-current": isCurrent ? 'page' : undefined, children: [item.href ? ((0, jsx_runtime_1.jsx)("a", { href: item.href, className: "tokis-breadcrumbs-link", children: item.label })) : item.onClick ? ((0, jsx_runtime_1.jsx)("button", { className: "tokis-breadcrumbs-link", onClick: item.onClick, style: { background: 'none', border: 'none', padding: 0, font: 'inherit', cursor: 'pointer' }, children: item.label })) : ((0, jsx_runtime_1.jsx)("span", { children: item.label })), !isLast && (0, jsx_runtime_1.jsx)("span", { className: "tokis-breadcrumbs-separator", "aria-hidden": "true", children: separator })] }, i));
+            }) }) }));
+});
+exports.Breadcrumbs.displayName = 'Breadcrumbs';
+exports.Link = (0, react_1.forwardRef)(({ external = false, underline = 'hover', className, children, ...props }, ref) => ((0, jsx_runtime_1.jsx)("a", { ref: ref, target: external ? '_blank' : undefined, rel: external ? 'noopener noreferrer' : undefined, className: (0, cn_js_1.cn)('tokis-link', external && 'tokis-link--external', className), ...props, children: children })));
+exports.Link.displayName = 'Link';

package/dist/cjs/components/button/ButtonIcon.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ButtonIcon = ({ children, 'aria-label': ariaLabel }) => {
+    return ((0, jsx_runtime_1.jsx)("span", { className: "button-icon", "aria-hidden": ariaLabel ? undefined : true, "aria-label": ariaLabel, children: children }));
+};
+exports.ButtonIcon = ButtonIcon;
+exports.ButtonIcon.displayName = 'ButtonIcon';

package/dist/cjs/components/button/ButtonLabel.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonLabel = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ButtonLabel = ({ children }) => {
+    return (0, jsx_runtime_1.jsx)("span", { className: "button-label", children: children });
+};
+exports.ButtonLabel = ButtonLabel;
+exports.ButtonLabel.displayName = 'ButtonLabel';

package/dist/cjs/components/button/ButtonRoot.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonRoot = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const cn_js_1 = require("../../utils/cn");
+const useButton_js_1 = require("./useButton");
+exports.ButtonRoot = (0, react_1.forwardRef)(({ as: Component = 'button', variant = 'primary', size = 'md', fullWidth = false, loading = false, iconOnly = false, disabled = false, className, onClick, children, ...props }, ref) => {
+    const { state, send } = (0, useButton_js_1.useButton)();
+    const id = (0, react_1.useId)();
+    const isNativeButton = Component === 'button';
+    const isDisabled = disabled || loading;
+    const handleClick = (0, react_1.useCallback)((e) => {
+        if (isDisabled)
+            return;
+        send({ type: 'PRESS' });
+        // Allow PRESS to register then immediately RELEASE for stateless click semantics
+        send({ type: 'RELEASE' });
+        onClick?.(e);
+    }, [isDisabled, onClick, send]);
+    return ((0, jsx_runtime_1.jsxs)(Component, { ref: ref, id: id, disabled: isNativeButton ? isDisabled : undefined, "aria-disabled": !isNativeButton && isDisabled ? true : undefined, "aria-busy": loading || undefined, "data-state": state.value, className: (0, cn_js_1.cn)('tokis-btn', `tokis-btn--${variant}`, size !== 'md' && `tokis-btn--${size}`, fullWidth && 'tokis-btn--full', loading && 'tokis-btn--loading', iconOnly && 'tokis-btn--icon-only', className), onClick: handleClick, ...props, children: [loading && (0, jsx_runtime_1.jsx)("span", { className: "tokis-spinner tokis-spinner--sm tokis-spinner--white", "aria-hidden": "true" }), children] }));
+});
+exports.ButtonRoot.displayName = 'ButtonRoot';

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

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useButton = exports.ButtonLabel = exports.ButtonIcon = exports.ButtonRoot = void 0;
+var ButtonRoot_js_1 = require("./ButtonRoot");
+Object.defineProperty(exports, "ButtonRoot", { enumerable: true, get: function () { return ButtonRoot_js_1.ButtonRoot; } });
+var ButtonIcon_js_1 = require("./ButtonIcon");
+Object.defineProperty(exports, "ButtonIcon", { enumerable: true, get: function () { return ButtonIcon_js_1.ButtonIcon; } });
+var ButtonLabel_js_1 = require("./ButtonLabel");
+Object.defineProperty(exports, "ButtonLabel", { enumerable: true, get: function () { return ButtonLabel_js_1.ButtonLabel; } });
+var useButton_js_1 = require("./useButton");
+Object.defineProperty(exports, "useButton", { enumerable: true, get: function () { return useButton_js_1.useButton; } });

package/dist/cjs/components/button/useButton.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useButton = useButton;
+const react_1 = require("react");
+function useButton() {
+    const [value, setValue] = (0, react_1.useState)('idle');
+    const send = (0, react_1.useCallback)((event) => {
+        if (event.type === 'PRESS')
+            setValue('pressed');
+        else if (event.type === 'RELEASE')
+            setValue('idle');
+    }, []);
+    return { state: { value }, send };
+}

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

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Divider = exports.CardDescription = exports.CardTitle = exports.CardFooter = exports.CardBody = exports.CardHeader = exports.Card = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const cn_js_1 = require("../../utils/cn");
+exports.Card = (0, react_1.forwardRef)(({ variant = 'default', clickable = false, className, children, ...props }, ref) => ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: (0, cn_js_1.cn)('tokis-card', variant !== 'default' && `tokis-card--${variant}`, clickable && 'tokis-card--clickable', className), role: clickable ? 'button' : undefined, tabIndex: clickable ? 0 : undefined, ...props, children: children })));
+exports.Card.displayName = 'Card';
+exports.CardHeader = (0, react_1.forwardRef)(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: (0, cn_js_1.cn)('tokis-card-header', className), ...props })));
+exports.CardHeader.displayName = 'CardHeader';
+exports.CardBody = (0, react_1.forwardRef)(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: (0, cn_js_1.cn)('tokis-card-body', className), ...props })));
+exports.CardBody.displayName = 'CardBody';
+exports.CardFooter = (0, react_1.forwardRef)(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: (0, cn_js_1.cn)('tokis-card-footer', className), ...props })));
+exports.CardFooter.displayName = 'CardFooter';
+exports.CardTitle = (0, react_1.forwardRef)(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)("h3", { ref: ref, className: (0, cn_js_1.cn)('tokis-card-title', className), ...props })));
+exports.CardTitle.displayName = 'CardTitle';
+exports.CardDescription = (0, react_1.forwardRef)(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)("p", { ref: ref, className: (0, cn_js_1.cn)('tokis-card-description', className), ...props })));
+exports.CardDescription.displayName = 'CardDescription';
+exports.Divider = (0, react_1.forwardRef)(({ orientation = 'horizontal', label, className, ...props }, ref) => {
+    if (label) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: (0, cn_js_1.cn)('tokis-divider tokis-divider--with-text', className), children: (0, jsx_runtime_1.jsx)("span", { className: "tokis-divider__text", children: label }) }));
+    }
+    return ((0, jsx_runtime_1.jsx)("hr", { ref: ref, role: "separator", "aria-orientation": orientation, className: (0, cn_js_1.cn)('tokis-divider', orientation === 'vertical' && 'tokis-divider--vertical', className), ...props }));
+});
+exports.Divider.displayName = 'Divider';

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

@@ -0,0 +1,214 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BarChart = BarChart;
+exports.LineChart = LineChart;
+exports.PieChart = PieChart;
+exports.Sparkline = Sparkline;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const cn_js_1 = require("../../utils/cn");
+const DEFAULT_COLORS = [
+    'var(--tokis-color-primary)',
+    '#7c3aed',
+    '#059669',
+    '#d97706',
+    '#dc2626',
+    '#0284c7',
+    '#db2777',
+];
+function useContainerWidth(ref) {
+    const [width, setWidth] = (0, react_1.useState)(300);
+    (0, react_1.useEffect)(() => {
+        if (!ref.current)
+            return;
+        const ro = new ResizeObserver(([entry]) => setWidth(entry.contentRect.width));
+        ro.observe(ref.current);
+        setWidth(ref.current.clientWidth);
+        return () => ro.disconnect();
+    }, [ref]);
+    return width;
+}
+function BarChart({ data, height = 200, barColor, animated = true, horizontal = false, className, }) {
+    const containerRef = (0, react_1.useRef)(null);
+    const containerWidth = useContainerWidth(containerRef);
+    const [mounted, setMounted] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => { if (animated)
+        setTimeout(() => setMounted(true), 50); }, [animated]);
+    const [hoveredBar, setHoveredBar] = (0, react_1.useState)(null);
+    const maxVal = Math.max(...data.map((d) => d.value), 1);
+    const padding = { top: 8, right: 8, bottom: 32, left: 40 };
+    const w = containerWidth;
+    const h = height;
+    const chartW = w - padding.left - padding.right;
+    const chartH = h - padding.top - padding.bottom;
+    const barWidth = (chartW / data.length) * 0.6;
+    const barGap = (chartW / data.length) * 0.4;
+    if (!horizontal) {
+        return ((0, jsx_runtime_1.jsx)("div", { ref: containerRef, className: (0, cn_js_1.cn)('tokis-chart tokis-chart--bar', className), children: (0, jsx_runtime_1.jsx)("svg", { width: w, height: h, "aria-label": "Bar chart", onMouseMove: (e) => {
+                    const svgRect = e.currentTarget.getBoundingClientRect();
+                    const mouseX = e.clientX - svgRect.left - padding.left;
+                    const colW = chartW / data.length;
+                    const idx = Math.floor(mouseX / colW);
+                    setHoveredBar(idx >= 0 && idx < data.length ? idx : null);
+                }, onMouseLeave: () => setHoveredBar(null), children: (0, jsx_runtime_1.jsxs)("g", { transform: `translate(${padding.left},${padding.top})`, children: [[0, 0.25, 0.5, 0.75, 1].map((t) => ((0, jsx_runtime_1.jsxs)("g", { transform: `translate(0,${chartH * (1 - t)})`, children: [(0, jsx_runtime_1.jsx)("line", { x1: -4, x2: chartW, stroke: "var(--tokis-color-border)", strokeWidth: "1" }), (0, jsx_runtime_1.jsx)("text", { x: -8, y: 4, fontSize: "10", fill: "var(--tokis-text-tertiary)", textAnchor: "end", children: Math.round(maxVal * t) })] }, t))), data.map((d, i) => {
+                            const x = i * (chartW / data.length) + barGap / 2;
+                            const barH = (d.value / maxVal) * chartH;
+                            const y = chartH - (mounted || !animated ? barH : 0);
+                            const color = d.color ?? barColor ?? DEFAULT_COLORS[i % DEFAULT_COLORS.length];
+                            return ((0, jsx_runtime_1.jsxs)("g", { children: [(0, jsx_runtime_1.jsx)("rect", { x: x, y: y, width: barWidth, height: mounted || !animated ? barH : 0, fill: color, rx: 3, opacity: hoveredBar !== null && hoveredBar !== i ? 0.5 : 1, style: { transition: animated ? 'y 0.6s ease, height 0.6s ease' : undefined } }), (0, jsx_runtime_1.jsx)("text", { x: x + barWidth / 2, y: chartH + 18, fontSize: "10", fill: "var(--tokis-text-secondary)", textAnchor: "middle", children: d.label })] }, i));
+                        }), hoveredBar !== null && (() => {
+                            const d = data[hoveredBar];
+                            const x = hoveredBar * (chartW / data.length) + barGap / 2 + barWidth / 2;
+                            const barH = (d.value / maxVal) * chartH;
+                            const tipY = Math.max(4, chartH - (mounted || !animated ? barH : 0) - 28);
+                            const txt = String(d.value);
+                            const tw = Math.max(36, txt.length * 7 + 16);
+                            return ((0, jsx_runtime_1.jsxs)("g", { style: { pointerEvents: 'none' }, children: [(0, jsx_runtime_1.jsx)("rect", { x: x - tw / 2, y: tipY, width: tw, height: 20, rx: 4, fill: "rgba(17,24,39,0.92)" }), (0, jsx_runtime_1.jsx)("text", { x: x, y: tipY + 13, fontSize: "10", textAnchor: "middle", fill: "#fff", fontWeight: "600", children: txt })] }));
+                        })()] }) }) }));
+    }
+    // Horizontal
+    const barH = (chartH / data.length) * 0.6;
+    const barGapH = (chartH / data.length) * 0.4;
+    return ((0, jsx_runtime_1.jsx)("div", { ref: containerRef, className: (0, cn_js_1.cn)('tokis-chart tokis-chart--bar', className), children: (0, jsx_runtime_1.jsx)("svg", { width: w, height: h, "aria-label": "Bar chart horizontal", children: (0, jsx_runtime_1.jsx)("g", { transform: `translate(${padding.left},${padding.top})`, children: data.map((d, i) => {
+                    const y = i * (chartH / data.length) + barGapH / 2;
+                    const barW = (d.value / maxVal) * chartW;
+                    const color = d.color ?? barColor ?? DEFAULT_COLORS[i % DEFAULT_COLORS.length];
+                    return ((0, jsx_runtime_1.jsxs)("g", { children: [(0, jsx_runtime_1.jsx)("text", { x: -8, y: y + barH / 2 + 4, fontSize: "10", fill: "var(--tokis-text-secondary)", textAnchor: "end", children: d.label }), (0, jsx_runtime_1.jsx)("rect", { x: 0, y: y, width: mounted || !animated ? barW : 0, height: barH, fill: color, rx: 3, style: { transition: animated ? 'width 0.6s ease' : undefined } })] }, i));
+                }) }) }) }));
+}
+BarChart.displayName = 'BarChart';
+function toPath(points, smooth) {
+    if (points.length < 2)
+        return '';
+    if (!smooth) {
+        return points.map((p, i) => `${i === 0 ? 'M' : 'L'}${p.x},${p.y}`).join(' ');
+    }
+    let d = `M${points[0].x},${points[0].y}`;
+    for (let i = 1; i < points.length; i++) {
+        const prev = points[i - 1];
+        const curr = points[i];
+        const cpx = (prev.x + curr.x) / 2;
+        d += ` C${cpx},${prev.y} ${cpx},${curr.y} ${curr.x},${curr.y}`;
+    }
+    return d;
+}
+function LineChart({ labels, datasets, height = 200, smooth = true, animated = true, className, }) {
+    const containerRef = (0, react_1.useRef)(null);
+    const containerWidth = useContainerWidth(containerRef);
+    const [mounted, setMounted] = (0, react_1.useState)(false);
+    const [hoveredCol, setHoveredCol] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => { if (animated)
+        setTimeout(() => setMounted(true), 50); }, [animated]);
+    const padding = { top: 12, right: 12, bottom: 32, left: 44 };
+    const w = containerWidth;
+    const h = height;
+    const chartW = w - padding.left - padding.right;
+    const chartH = h - padding.top - padding.bottom;
+    const allValues = datasets.flatMap((d) => d.data);
+    const maxVal = Math.max(...allValues, 1);
+    const minVal = Math.min(...allValues, 0);
+    const range = maxVal - minVal || 1;
+    const toPoint = (val, idx) => ({
+        x: (idx / (labels.length - 1 || 1)) * chartW,
+        y: chartH - ((val - minVal) / range) * chartH,
+    });
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: containerRef, className: (0, cn_js_1.cn)('tokis-chart tokis-chart--line', className), children: [(0, jsx_runtime_1.jsx)("svg", { width: w, height: h, "aria-label": "Line chart", onMouseMove: (e) => {
+                    const svgRect = e.currentTarget.getBoundingClientRect();
+                    const mouseX = e.clientX - svgRect.left - padding.left;
+                    const colW = chartW / (labels.length - 1 || 1);
+                    const idx = Math.round(mouseX / colW);
+                    setHoveredCol(idx >= 0 && idx < labels.length ? idx : null);
+                }, onMouseLeave: () => setHoveredCol(null), children: (0, jsx_runtime_1.jsxs)("g", { transform: `translate(${padding.left},${padding.top})`, children: [[0, 0.25, 0.5, 0.75, 1].map((t) => ((0, jsx_runtime_1.jsxs)("g", { transform: `translate(0,${chartH * (1 - t)})`, children: [(0, jsx_runtime_1.jsx)("line", { x1: 0, x2: chartW, stroke: "var(--tokis-color-border)", strokeWidth: "1" }), (0, jsx_runtime_1.jsx)("text", { x: -8, y: 4, fontSize: "10", fill: "var(--tokis-text-tertiary)", textAnchor: "end", children: Math.round(minVal + range * t) })] }, t))), labels.map((lbl, i) => ((0, jsx_runtime_1.jsx)("text", { x: toPoint(0, i).x, y: chartH + 18, fontSize: "10", fill: "var(--tokis-text-secondary)", textAnchor: "middle", children: lbl }, i))), datasets.map((dataset, di) => {
+                            const points = dataset.data.map((v, i) => toPoint(v, i));
+                            const pathD = toPath(points, smooth);
+                            const color = dataset.color ?? DEFAULT_COLORS[di % DEFAULT_COLORS.length];
+                            return ((0, jsx_runtime_1.jsxs)("g", { children: [(0, jsx_runtime_1.jsx)("path", { d: pathD, fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: animated ? { strokeDasharray: 2000, strokeDashoffset: mounted ? 0 : 2000, transition: 'stroke-dashoffset 1s ease' } : undefined }), points.map((p, pi) => ((0, jsx_runtime_1.jsx)("circle", { cx: p.x, cy: p.y, r: 3, fill: color, style: animated ? { opacity: mounted ? 1 : 0, transition: `opacity 0.5s ease ${pi * 0.05}s` } : undefined }, pi)))] }, di));
+                        }), hoveredCol !== null && (() => {
+                            const x = toPoint(0, hoveredCol).x;
+                            const vals = datasets.map((ds) => ({ val: ds.data[hoveredCol], color: ds.color ?? DEFAULT_COLORS[datasets.indexOf(ds) % DEFAULT_COLORS.length], label: ds.label }));
+                            const firstVal = vals[0];
+                            if (!firstVal || firstVal.val === undefined)
+                                return null;
+                            const y = toPoint(firstVal.val, hoveredCol).y;
+                            const isMulti = vals.length > 1;
+                            return ((0, jsx_runtime_1.jsxs)("g", { style: { pointerEvents: 'none' }, children: [(0, jsx_runtime_1.jsx)("line", { x1: x, x2: x, y1: 0, y2: chartH, stroke: "var(--tokis-color-border)", strokeWidth: "1", strokeDasharray: "3,3" }), vals.map(({ val, color }, vi) => {
+                                        if (val === undefined)
+                                            return null;
+                                        const py = toPoint(val, hoveredCol).y;
+                                        return (0, jsx_runtime_1.jsx)("circle", { cx: x, cy: py, r: 4, fill: color, stroke: "#fff", strokeWidth: "1.5" }, vi);
+                                    }), !isMulti && ((() => {
+                                        const txt = String(firstVal.val);
+                                        const tw = Math.max(36, txt.length * 7 + 16);
+                                        const tipX = Math.min(Math.max(x, tw / 2 + 2), chartW - tw / 2 - 2);
+                                        const tipY = Math.max(4, y - 30);
+                                        return ((0, jsx_runtime_1.jsxs)("g", { children: [(0, jsx_runtime_1.jsx)("rect", { x: tipX - tw / 2, y: tipY, width: tw, height: 20, rx: 4, fill: "rgba(17,24,39,0.92)" }), (0, jsx_runtime_1.jsx)("text", { x: tipX, y: tipY + 13, fontSize: "10", textAnchor: "middle", fill: "#fff", fontWeight: "600", children: txt })] }));
+                                    })()), isMulti && ((() => {
+                                        const lines = vals.filter(v => v.val !== undefined);
+                                        const tw = 90;
+                                        const th = lines.length * 16 + 8;
+                                        const tipX = Math.min(Math.max(x + 8, tw / 2 + 2), chartW - tw / 2 - 2);
+                                        const tipY = Math.max(4, Math.min(y - th / 2, chartH - th - 4));
+                                        return ((0, jsx_runtime_1.jsxs)("g", { children: [(0, jsx_runtime_1.jsx)("rect", { x: tipX - tw / 2, y: tipY, width: tw, height: th, rx: 4, fill: "rgba(17,24,39,0.92)" }), lines.map(({ val, color, label }, li) => ((0, jsx_runtime_1.jsxs)("g", { children: [(0, jsx_runtime_1.jsx)("circle", { cx: tipX - tw / 2 + 10, cy: tipY + 12 + li * 16, r: 3, fill: color }), (0, jsx_runtime_1.jsxs)("text", { x: tipX - tw / 2 + 18, y: tipY + 16 + li * 16, fontSize: "10", fill: "#fff", children: [label, ": ", val] })] }, li)))] }));
+                                    })())] }));
+                        })()] }) }), datasets.length > 1 && ((0, jsx_runtime_1.jsx)("div", { className: "tokis-chart__legend", children: datasets.map((d, i) => ((0, jsx_runtime_1.jsxs)("span", { className: "tokis-chart__legend-item", children: [(0, jsx_runtime_1.jsx)("span", { className: "tokis-chart__legend-dot", style: { background: d.color ?? DEFAULT_COLORS[i % DEFAULT_COLORS.length] } }), d.label] }, i))) }))] }));
+}
+LineChart.displayName = 'LineChart';
+function PieChart({ data, donut = false, size = 200, animated = true, showLegend = true, className, }) {
+    const [mounted, setMounted] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => { if (animated)
+        setTimeout(() => setMounted(true), 50); }, [animated]);
+    const [hovered, setHovered] = (0, react_1.useState)(null);
+    const total = data.reduce((s, d) => s + d.value, 0) || 1;
+    const cx = size / 2;
+    const cy = size / 2;
+    const r = (size / 2) * 0.78;
+    const innerR = donut ? r * 0.55 : 0;
+    let cumAngle = -Math.PI / 2;
+    const slices = data.map((d, i) => {
+        const angle = (d.value / total) * Math.PI * 2;
+        const startAngle = cumAngle;
+        cumAngle += angle;
+        const endAngle = cumAngle;
+        const expand = hovered === i ? 6 : 0;
+        const midAngle = startAngle + angle / 2;
+        const offsetX = expand * Math.cos(midAngle);
+        const offsetY = expand * Math.sin(midAngle);
+        const x1 = cx + offsetX + r * Math.cos(startAngle);
+        const y1 = cy + offsetY + r * Math.sin(startAngle);
+        const x2 = cx + offsetX + r * Math.cos(endAngle);
+        const y2 = cy + offsetY + r * Math.sin(endAngle);
+        const ix1 = cx + offsetX + innerR * Math.cos(endAngle);
+        const iy1 = cy + offsetY + innerR * Math.sin(endAngle);
+        const ix2 = cx + offsetX + innerR * Math.cos(startAngle);
+        const iy2 = cy + offsetY + innerR * Math.sin(startAngle);
+        const largeArc = angle > Math.PI ? 1 : 0;
+        const pathD = donut
+            ? `M${x1},${y1} A${r},${r} 0 ${largeArc},1 ${x2},${y2} L${ix1},${iy1} A${innerR},${innerR} 0 ${largeArc},0 ${ix2},${iy2} Z`
+            : `M${cx + offsetX},${cy + offsetY} L${x1},${y1} A${r},${r} 0 ${largeArc},1 ${x2},${y2} Z`;
+        return { ...d, pathD, color: d.color ?? DEFAULT_COLORS[i % DEFAULT_COLORS.length] };
+    });
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_js_1.cn)('tokis-chart tokis-chart--pie', className), children: [(0, jsx_runtime_1.jsx)("svg", { width: size, height: size, "aria-label": "Pie chart", children: slices.map((s, i) => ((0, jsx_runtime_1.jsx)("path", { d: s.pathD, fill: s.color, style: { opacity: mounted || !animated ? 1 : 0, transition: animated ? `opacity 0.4s ease ${i * 0.07}s` : undefined, cursor: 'pointer' }, onMouseEnter: () => setHovered(i), onMouseLeave: () => setHovered(null), children: (0, jsx_runtime_1.jsxs)("title", { children: [s.label, ": ", s.value, " (", ((s.value / total) * 100).toFixed(1), "%)"] }) }, i))) }), showLegend && ((0, jsx_runtime_1.jsx)("div", { className: "tokis-chart__legend", children: slices.map((s, i) => ((0, jsx_runtime_1.jsxs)("span", { className: "tokis-chart__legend-item", children: [(0, jsx_runtime_1.jsx)("span", { className: "tokis-chart__legend-dot", style: { background: s.color } }), s.label] }, i))) }))] }));
+}
+PieChart.displayName = 'PieChart';
+function Sparkline({ data, type = 'line', width = 80, height = 24, color = 'var(--tokis-color-primary)', className, }) {
+    if (data.length < 2)
+        return (0, jsx_runtime_1.jsx)("span", { className: (0, cn_js_1.cn)('tokis-sparkline', className) });
+    const maxVal = Math.max(...data, 1);
+    const minVal = Math.min(...data);
+    const range = maxVal - minVal || 1;
+    const xStep = width / (data.length - 1);
+    const toX = (i) => i * xStep;
+    const toY = (v) => height - ((v - minVal) / range) * (height - 2) - 1;
+    if (type === 'bar') {
+        const bw = Math.max(1, (width / data.length) * 0.7);
+        return ((0, jsx_runtime_1.jsx)("svg", { width: width, height: height, className: (0, cn_js_1.cn)('tokis-sparkline', className), "aria-hidden": "true", children: data.map((v, i) => {
+                const bh = ((v - minVal) / range) * height;
+                return (0, jsx_runtime_1.jsx)("rect", { x: i * (width / data.length), y: height - bh, width: bw, height: bh, fill: color, rx: 1 }, i);
+            }) }));
+    }
+    const points = data.map((v, i) => ({ x: toX(i), y: toY(v) }));
+    const lineD = points.map((p, i) => `${i === 0 ? 'M' : 'L'}${p.x},${p.y}`).join(' ');
+    const areaD = `${lineD} L${points[points.length - 1].x},${height} L${points[0].x},${height} Z`;
+    return ((0, jsx_runtime_1.jsxs)("svg", { width: width, height: height, className: (0, cn_js_1.cn)('tokis-sparkline', className), "aria-hidden": "true", children: [type === 'area' && (0, jsx_runtime_1.jsx)("path", { d: areaD, fill: color, opacity: 0.2 }), (0, jsx_runtime_1.jsx)("path", { d: lineD, fill: "none", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }));
+}
+Sparkline.displayName = 'Sparkline';

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

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Checkbox = Checkbox;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const cn_js_1 = require("../../utils/cn");
+function Checkbox({ label, description, checked, defaultChecked, indeterminate = false, disabled = false, onChange, id, name, value, className, 'aria-label': ariaLabel, }) {
+    const autoId = (0, react_1.useId)();
+    const inputId = id ?? `checkbox-${autoId}`;
+    const descId = description ? `${inputId}-desc` : undefined;
+    const inputRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (inputRef.current) {
+            inputRef.current.indeterminate = indeterminate;
+        }
+    }, [indeterminate]);
+    return ((0, jsx_runtime_1.jsxs)("label", { className: (0, cn_js_1.cn)('tokis-checkbox-root', className), "data-disabled": disabled || undefined, htmlFor: inputId, children: [(0, jsx_runtime_1.jsx)("input", { ref: inputRef, type: "checkbox", id: inputId, name: name, value: value, checked: checked, defaultChecked: defaultChecked, disabled: disabled, onChange: (e) => onChange?.(e.target.checked), className: "tokis-checkbox-native", "aria-label": !label ? ariaLabel : undefined, "aria-describedby": descId }), (0, jsx_runtime_1.jsx)("span", { "aria-hidden": "true", className: "tokis-checkbox-control", "data-checked": checked && !indeterminate ? 'true' : undefined, "data-indeterminate": indeterminate ? 'true' : undefined }), (label || description) && ((0, jsx_runtime_1.jsxs)("div", { children: [label && (0, jsx_runtime_1.jsx)("span", { className: "tokis-checkbox-label", children: label }), description && (0, jsx_runtime_1.jsx)("p", { id: descId, className: "tokis-checkbox-description", children: description })] }))] }));
+}

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

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