@tokis/react 1.0.0

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

@@ -0,0 +1,329 @@
+"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.Autocomplete = Autocomplete;
+exports.ButtonGroup = ButtonGroup;
+exports.FloatingActionButton = FloatingActionButton;
+exports.NumberField = NumberField;
+exports.Rating = Rating;
+exports.StarRating = Rating;
+exports.TransferList = TransferList;
+exports.Icon = Icon;
+exports.MaterialIcon = MaterialIcon;
+exports.Backdrop = Backdrop;
+exports.Paper = Paper;
+exports.SpeedDial = SpeedDial;
+exports.ImageList = ImageList;
+exports.ImageListItem = ImageListItem;
+exports.ClickAwayListener = ClickAwayListener;
+exports.OtpInput = OtpInput;
+exports.FileDropZone = FileDropZone;
+exports.CssBaseline = CssBaseline;
+exports.InitColorSchemeScript = InitColorSchemeScript;
+exports.Modal = Modal;
+exports.NoSsr = NoSsr;
+exports.Popper = Popper;
+exports.TextareaAutosize = TextareaAutosize;
+exports.Fade = Fade;
+exports.useMediaQuery = useMediaQuery;
+exports.DataGrid = DataGrid;
+exports.DatePicker = DatePicker;
+exports.TimePicker = TimePicker;
+exports.DateTimePicker = DateTimePicker;
+exports.Charts = Charts;
+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("../input/index");
+const index_js_2 = require("../button/index");
+const index_js_3 = require("../portal/index");
+const index_js_4 = require("../card/index");
+const index_js_5 = require("../table/index");
+function Autocomplete({ options, value, onChange, label, placeholder = 'Search...', ...props }) {
+    const [query, setQuery] = (0, react_1.useState)(value ?? '');
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const filtered = (0, react_1.useMemo)(() => options.filter((o) => o.label.toLowerCase().includes(query.toLowerCase())), [options, query]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "tokis-autocomplete", children: [(0, jsx_runtime_1.jsx)(index_js_1.TextField, { label: label, value: query, placeholder: placeholder, onFocus: () => setOpen(true), onChange: (e) => {
+                    setQuery(e.target.value);
+                    onChange?.(e.target.value);
+                    setOpen(true);
+                }, ...props }), open && filtered.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "tokis-autocomplete-list", role: "listbox", children: filtered.map((option) => ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "tokis-autocomplete-item", onClick: () => {
+                        setQuery(option.label);
+                        onChange?.(option.value);
+                        setOpen(false);
+                    }, children: option.label }, option.value))) }))] }));
+}
+function ButtonGroup({ orientation = 'horizontal', className, ...props }) {
+    return (0, jsx_runtime_1.jsx)("div", { className: (0, cn_js_1.cn)('tokis-button-group', orientation === 'vertical' && 'tokis-button-group--vertical', className), ...props });
+}
+function FloatingActionButton({ children, label = 'Action', className, ...props }) {
+    return ((0, jsx_runtime_1.jsx)(index_js_2.ButtonRoot, { className: (0, cn_js_1.cn)('tokis-fab', className), iconOnly: true, "aria-label": label, ...props, children: children }));
+}
+function NumberField({ label, value = 0, onChange, step = 1, min, max, ...props }) {
+    const parsedStep = Number(step) || 1;
+    const minNum = typeof min === 'number' ? min : undefined;
+    const maxNum = typeof max === 'number' ? max : undefined;
+    const update = (next) => {
+        const boundedMin = minNum !== undefined ? Math.max(minNum, next) : next;
+        const bounded = maxNum !== undefined ? Math.min(maxNum, boundedMin) : boundedMin;
+        onChange?.(bounded);
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "tokis-number-field", children: [(0, jsx_runtime_1.jsx)(index_js_1.TextField, { ...props, type: "number", label: label, value: value, onChange: (e) => onChange?.(Number(e.target.value)) }), (0, jsx_runtime_1.jsxs)("div", { className: "tokis-number-field-actions", children: [(0, jsx_runtime_1.jsx)(index_js_2.ButtonRoot, { size: "sm", variant: "outline", onClick: () => update(value - parsedStep), children: "-" }), (0, jsx_runtime_1.jsx)(index_js_2.ButtonRoot, { size: "sm", variant: "outline", onClick: () => update(value + parsedStep), children: "+" })] })] }));
+}
+function Rating({ value = 0, max = 5, readOnly = false, onChange, size = 'md', label = 'Rating' }) {
+    const [hovered, setHovered] = (0, react_1.useState)(null);
+    const display = hovered ?? value;
+    const sizeMap = { sm: '18px', md: '24px', lg: '32px' };
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, cn_js_1.cn)('tokis-rating', readOnly && 'tokis-rating--readonly'), role: "radiogroup", "aria-label": label, "data-readonly": readOnly || undefined, children: Array.from({ length: max }).map((_, index) => {
+            const current = index + 1;
+            const filled = current <= display;
+            return ((0, jsx_runtime_1.jsx)("button", { type: "button", role: "radio", "aria-checked": current <= value, "aria-label": `${current} star${current !== 1 ? 's' : ''}`, disabled: readOnly, className: (0, cn_js_1.cn)('tokis-rating-star', filled && 'tokis-rating-star--active', hovered !== null && filled && 'tokis-rating-star--hover'), style: { fontSize: sizeMap[size] }, onClick: () => onChange?.(current), onMouseEnter: () => !readOnly && setHovered(current), onMouseLeave: () => !readOnly && setHovered(null), children: (0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 24 24", width: sizeMap[size], height: sizeMap[size], "aria-hidden": "true", fill: filled ? 'currentColor' : 'none', stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: (0, jsx_runtime_1.jsx)("path", { d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" }) }) }, current));
+        }) }));
+}
+function TransferList({ left, right, onChange, leftTitle = 'Available', rightTitle = 'Selected' }) {
+    const [leftChecked, setLeftChecked] = (0, react_1.useState)([]);
+    const [rightChecked, setRightChecked] = (0, react_1.useState)([]);
+    const moveToRight = () => {
+        const moved = left.filter((item) => leftChecked.includes(item.id));
+        onChange(left.filter((item) => !leftChecked.includes(item.id)), [...right, ...moved]);
+        setLeftChecked([]);
+    };
+    const moveToLeft = () => {
+        const moved = right.filter((item) => rightChecked.includes(item.id));
+        onChange([...left, ...moved], right.filter((item) => !rightChecked.includes(item.id)));
+        setRightChecked([]);
+    };
+    const renderPane = (title, items, checked, setChecked) => ((0, jsx_runtime_1.jsxs)(index_js_4.Card, { className: "tokis-transfer-pane", children: [(0, jsx_runtime_1.jsx)(index_js_4.CardHeader, { children: title }), (0, jsx_runtime_1.jsx)(index_js_4.CardBody, { children: items.map((item) => ((0, jsx_runtime_1.jsxs)("label", { className: "tokis-transfer-item", children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: checked.includes(item.id), onChange: (e) => setChecked(e.target.checked ? [...checked, item.id] : checked.filter((id) => id !== item.id)) }), item.label] }, item.id))) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "tokis-transfer-list", children: [renderPane(leftTitle, left, leftChecked, setLeftChecked), (0, jsx_runtime_1.jsxs)("div", { className: "tokis-transfer-actions", children: [(0, jsx_runtime_1.jsx)(index_js_2.ButtonRoot, { size: "sm", onClick: moveToRight, children: '>' }), (0, jsx_runtime_1.jsx)(index_js_2.ButtonRoot, { size: "sm", onClick: moveToLeft, children: '<' })] }), renderPane(rightTitle, right, rightChecked, setRightChecked)] }));
+}
+const iconMap = {
+    search: '⌕',
+    close: '×',
+    menu: '☰',
+    check: '✓',
+    star: '★',
+    'arrow-right': '→',
+};
+function Icon({ name, className, ...props }) {
+    return (0, jsx_runtime_1.jsx)("span", { className: (0, cn_js_1.cn)('tokis-icon', className), "aria-hidden": "true", ...props, children: iconMap[name] });
+}
+function MaterialIcon({ icon, className, ...props }) {
+    return (0, jsx_runtime_1.jsx)("span", { className: (0, cn_js_1.cn)('tokis-material-icon', className), ...props, children: icon });
+}
+function Backdrop({ open, onClick, className, children, ...props }) {
+    if (!open)
+        return null;
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, cn_js_1.cn)('tokis-backdrop', className), onClick: onClick, ...props, children: children }));
+}
+function Paper({ elevation = 1, className, ...props }) {
+    return (0, jsx_runtime_1.jsx)("div", { className: (0, cn_js_1.cn)('tokis-paper', `tokis-paper--${elevation}`, className), ...props });
+}
+function SpeedDial({ label = 'Open actions', actions }) {
+    const [open, setOpen] = (0, react_1.useState)(false);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "tokis-speed-dial", children: [open && ((0, jsx_runtime_1.jsx)("div", { className: "tokis-speed-dial-actions", children: actions.map((action) => ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "tokis-speed-dial-action", onClick: () => {
+                        action.onClick?.();
+                        setOpen(false);
+                    }, children: [action.icon, (0, jsx_runtime_1.jsx)("span", { children: action.label })] }, action.id))) })), (0, jsx_runtime_1.jsx)(FloatingActionButton, { label: label, onClick: () => setOpen((state) => !state), children: "+" })] }));
+}
+function ImageList({ cols = 3, className, style, ...props }) {
+    return (0, jsx_runtime_1.jsx)("div", { className: (0, cn_js_1.cn)('tokis-image-list', className), style: { gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`, ...style }, ...props });
+}
+function ImageListItem(props) {
+    return (0, jsx_runtime_1.jsx)("div", { className: "tokis-image-list-item", ...props });
+}
+function ClickAwayListener({ onClickAway, children }) {
+    const ref = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        const handler = (event) => {
+            if (!ref.current?.contains(event.target))
+                onClickAway();
+        };
+        document.addEventListener('mousedown', handler);
+        return () => document.removeEventListener('mousedown', handler);
+    }, [onClickAway]);
+    return react_1.default.cloneElement(children, {
+        ref: (node) => {
+            ref.current = node;
+        },
+    });
+}
+function OtpInput({ length = 6, value = '', onChange, disabled = false, error = false, label }) {
+    const digits = value.slice(0, length).padEnd(length, '').split('');
+    const inputsRef = (0, react_1.useRef)([]);
+    const handleChange = (index, char) => {
+        const filtered = char.replace(/\D/g, '').slice(0, 1);
+        const next = digits.map((d, i) => (i === index ? filtered : d)).join('').trimEnd();
+        onChange?.(next);
+        if (filtered && index < length - 1) {
+            inputsRef.current[index + 1]?.focus();
+        }
+    };
+    const handleKeyDown = (index, e) => {
+        if (e.key === 'Backspace' && !digits[index] && index > 0) {
+            inputsRef.current[index - 1]?.focus();
+            const next = digits.map((d, i) => (i === index - 1 ? '' : d)).join('').trimEnd();
+            onChange?.(next);
+        }
+        if (e.key === 'ArrowLeft' && index > 0)
+            inputsRef.current[index - 1]?.focus();
+        if (e.key === 'ArrowRight' && index < length - 1)
+            inputsRef.current[index + 1]?.focus();
+    };
+    const handlePaste = (e) => {
+        e.preventDefault();
+        const pasted = e.clipboardData.getData('text').replace(/\D/g, '').slice(0, length);
+        onChange?.(pasted);
+        const focusIndex = Math.min(pasted.length, length - 1);
+        inputsRef.current[focusIndex]?.focus();
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "tokis-otp-root", children: [label && (0, jsx_runtime_1.jsx)("label", { className: "tokis-label", style: { marginBottom: 'var(--tokis-spacing-2)', display: 'block' }, children: label }), (0, jsx_runtime_1.jsx)("div", { className: "tokis-otp-inputs", "aria-label": label ?? 'OTP Input', children: digits.map((digit, index) => ((0, jsx_runtime_1.jsx)("input", { ref: (el) => { inputsRef.current[index] = el; }, type: "text", inputMode: "numeric", pattern: "[0-9]*", maxLength: 1, value: digit.trim(), disabled: disabled, className: (0, cn_js_1.cn)('tokis-otp-cell', error && 'tokis-otp-cell--error', digit.trim() && 'tokis-otp-cell--filled'), "aria-label": `Digit ${index + 1} of ${length}`, onChange: (e) => handleChange(index, e.target.value), onKeyDown: (e) => handleKeyDown(index, e), onPaste: handlePaste, onFocus: (e) => e.target.select() }, index))) })] }));
+}
+function FileDropZone({ onFiles, accept, multiple = false, disabled = false, label = 'Drop files here or click to upload', hint, maxSize, }) {
+    const [dragging, setDragging] = (0, react_1.useState)(false);
+    const [files, setFiles] = (0, react_1.useState)([]);
+    const [error, setError] = (0, react_1.useState)(null);
+    const inputRef = (0, react_1.useRef)(null);
+    const process = (incoming) => {
+        if (!incoming)
+            return;
+        const arr = Array.from(incoming);
+        if (maxSize) {
+            const oversized = arr.find((f) => f.size > maxSize);
+            if (oversized) {
+                setError(`File "${oversized.name}" exceeds the ${Math.round(maxSize / 1024)}KB limit.`);
+                return;
+            }
+        }
+        setError(null);
+        setFiles(arr);
+        onFiles?.(arr);
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_js_1.cn)('tokis-dropzone', dragging && 'tokis-dropzone--dragging', disabled && 'tokis-dropzone--disabled', error && 'tokis-dropzone--error'), role: "button", tabIndex: disabled ? -1 : 0, "aria-disabled": disabled, onClick: () => !disabled && inputRef.current?.click(), onKeyDown: (e) => { if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            inputRef.current?.click();
+        } }, onDragOver: (e) => { e.preventDefault(); if (!disabled)
+            setDragging(true); }, onDragLeave: () => setDragging(false), onDrop: (e) => {
+            e.preventDefault();
+            setDragging(false);
+            if (!disabled)
+                process(e.dataTransfer.files);
+        }, children: [(0, jsx_runtime_1.jsx)("input", { ref: inputRef, type: "file", accept: accept, multiple: multiple, style: { display: 'none' }, onChange: (e) => process(e.target.files) }), (0, jsx_runtime_1.jsx)("div", { className: "tokis-dropzone__icon", "aria-hidden": "true", children: (0, jsx_runtime_1.jsxs)("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", children: [(0, jsx_runtime_1.jsx)("path", { d: "M6 22v3a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1v-3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M16 6v14M10 12l6-6 6 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "tokis-dropzone__label", children: label }), hint && !files.length && (0, jsx_runtime_1.jsx)("div", { className: "tokis-dropzone__hint", children: hint }), error && (0, jsx_runtime_1.jsx)("div", { className: "tokis-dropzone__error", children: error }), files.length > 0 && !error && ((0, jsx_runtime_1.jsx)("div", { className: "tokis-dropzone__files", children: files.map((f) => ((0, jsx_runtime_1.jsx)("span", { className: "tokis-dropzone__file", children: f.name }, f.name))) }))] }));
+}
+function CssBaseline() {
+    return ((0, jsx_runtime_1.jsx)("style", { children: `*, *::before, *::after { box-sizing: border-box; } body { margin: 0; min-height: 100vh; }` }));
+}
+function InitColorSchemeScript() {
+    const script = `(() => {
+    const stored = localStorage.getItem('tokis-theme');
+    const mode = stored || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+    document.documentElement.setAttribute('data-theme', mode);
+  })();`;
+    return (0, jsx_runtime_1.jsx)("script", { dangerouslySetInnerHTML: { __html: script } });
+}
+function Modal({ open, onClose, children }) {
+    if (!open)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(index_js_3.Portal, { children: (0, jsx_runtime_1.jsx)("div", { className: "tokis-modal-root", role: "presentation", onClick: onClose, children: (0, jsx_runtime_1.jsx)("div", { className: "tokis-modal-content", role: "dialog", "aria-modal": "true", onClick: (e) => e.stopPropagation(), children: children }) }) }));
+}
+function NoSsr({ children, fallback = null }) {
+    const [mounted, setMounted] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => setMounted(true), []);
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: mounted ? children : fallback });
+}
+function Popper({ anchorEl, open, children, placement = 'bottom-start' }) {
+    const [pos, setPos] = (0, react_1.useState)({ top: 0, left: 0 });
+    (0, react_1.useEffect)(() => {
+        if (!anchorEl || !open)
+            return;
+        const rect = anchorEl.getBoundingClientRect();
+        const isBottom = placement.startsWith('bottom');
+        setPos({
+            top: (isBottom ? rect.bottom : rect.top) + window.scrollY + (isBottom ? 8 : -8),
+            left: (placement.endsWith('start') ? rect.left : rect.right) + window.scrollX,
+        });
+    }, [anchorEl, open, placement]);
+    if (!open)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(index_js_3.Portal, { children: (0, jsx_runtime_1.jsx)("div", { className: "tokis-popper", style: { top: pos.top, left: pos.left }, children: children }) }));
+}
+function TextareaAutosize({ minRows = 3, maxRows = 8, onChange, ...props }) {
+    const ref = (0, react_1.useRef)(null);
+    const resize = () => {
+        if (!ref.current)
+            return;
+        ref.current.style.height = 'auto';
+        const rowHeight = 24;
+        const minHeight = minRows * rowHeight;
+        const maxHeight = maxRows * rowHeight;
+        ref.current.style.height = `${Math.min(maxHeight, Math.max(minHeight, ref.current.scrollHeight))}px`;
+    };
+    (0, react_1.useEffect)(() => {
+        resize();
+    }, []);
+    return ((0, jsx_runtime_1.jsx)("textarea", { ref: ref, className: "tokis-textarea tokis-textarea-autosize", onChange: (event) => {
+            resize();
+            onChange?.(event);
+        }, ...props }));
+}
+function Fade({ in: visible, children }) {
+    return (0, jsx_runtime_1.jsx)("div", { className: (0, cn_js_1.cn)('tokis-fade', visible && 'tokis-fade--in'), children: children });
+}
+function useMediaQuery(query) {
+    const [matches, setMatches] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        const media = window.matchMedia(query);
+        setMatches(media.matches);
+        const listener = (event) => setMatches(event.matches);
+        media.addEventListener('change', listener);
+        return () => media.removeEventListener('change', listener);
+    }, [query]);
+    return matches;
+}
+function DataGrid({ columns, rows }) {
+    return ((0, jsx_runtime_1.jsxs)(index_js_5.Table, { children: [(0, jsx_runtime_1.jsx)(index_js_5.TableHead, { children: (0, jsx_runtime_1.jsx)(index_js_5.TableRow, { children: columns.map((column) => ((0, jsx_runtime_1.jsx)(index_js_5.TableHeaderCell, { children: column.headerName }, column.field))) }) }), (0, jsx_runtime_1.jsx)(index_js_5.TableBody, { children: rows.map((row, rowIndex) => ((0, jsx_runtime_1.jsx)(index_js_5.TableRow, { children: columns.map((column) => ((0, jsx_runtime_1.jsx)(index_js_5.TableCell, { children: row[column.field] }, column.field))) }, rowIndex))) })] }));
+}
+function DatePicker({ label, ...props }) {
+    return (0, jsx_runtime_1.jsx)(index_js_1.TextField, { type: "date", label: label, ...props });
+}
+function TimePicker({ label, ...props }) {
+    return (0, jsx_runtime_1.jsx)(index_js_1.TextField, { type: "time", label: label, ...props });
+}
+function DateTimePicker({ label, ...props }) {
+    return (0, jsx_runtime_1.jsx)(index_js_1.TextField, { type: "datetime-local", label: label, ...props });
+}
+function Charts({ data, labels = [] }) {
+    const max = Math.max(...data, 1);
+    return ((0, jsx_runtime_1.jsx)("div", { className: "tokis-chart", role: "img", "aria-label": "Bar chart", children: data.map((value, index) => ((0, jsx_runtime_1.jsxs)("div", { className: "tokis-chart-bar-wrap", children: [(0, jsx_runtime_1.jsx)("div", { className: "tokis-chart-bar", style: { height: `${(value / max) * 100}%` }, title: `${labels[index] ?? index}: ${value}` }), (0, jsx_runtime_1.jsx)("span", { className: "tokis-chart-label", children: labels[index] ?? index + 1 })] }, index))) }));
+}

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

@@ -0,0 +1,107 @@
+"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.HoverCard = HoverCard;
+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 computePosition(anchor, placement) {
+    const gap = 8;
+    switch (placement) {
+        case 'top': return { top: anchor.top - gap, left: anchor.left + anchor.width / 2 };
+        case 'bottom': return { top: anchor.bottom + gap, left: anchor.left + anchor.width / 2 };
+        case 'left': return { top: anchor.top + anchor.height / 2, left: anchor.left - gap };
+        case 'right': return { top: anchor.top + anchor.height / 2, left: anchor.right + gap };
+    }
+}
+function HoverCard({ trigger, content, placement = 'bottom', openDelay = 300, closeDelay = 200, className, }) {
+    const [visible, setVisible] = (0, react_1.useState)(false);
+    const [positioned, setPositioned] = (0, react_1.useState)(false);
+    const [pos, setPos] = (0, react_1.useState)({ top: 0, left: 0 });
+    const anchorRef = (0, react_1.useRef)(null);
+    const openTimer = (0, react_1.useRef)();
+    const closeTimer = (0, react_1.useRef)();
+    const show = (0, react_1.useCallback)(() => {
+        clearTimeout(closeTimer.current);
+        openTimer.current = setTimeout(() => {
+            if (!anchorRef.current)
+                return;
+            const rect = anchorRef.current.getBoundingClientRect();
+            setPos(computePosition(rect, placement));
+            setVisible(true);
+            requestAnimationFrame(() => setPositioned(true));
+        }, openDelay);
+    }, [openDelay, placement]);
+    const hide = (0, react_1.useCallback)(() => {
+        clearTimeout(openTimer.current);
+        setPositioned(false);
+        closeTimer.current = setTimeout(() => setVisible(false), closeDelay);
+    }, [closeDelay]);
+    (0, react_1.useEffect)(() => () => { clearTimeout(openTimer.current); clearTimeout(closeTimer.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(trigger, {
+                ref: anchorRef,
+                onMouseEnter: (...args) => {
+                    show();
+                    trigger.props.onMouseEnter?.(...args);
+                },
+                onMouseLeave: (...args) => {
+                    hide();
+                    trigger.props.onMouseLeave?.(...args);
+                },
+                onFocus: (...args) => {
+                    show();
+                    trigger.props.onFocus?.(...args);
+                },
+                onBlur: (...args) => {
+                    hide();
+                    trigger.props.onBlur?.(...args);
+                },
+            }), visible && ((0, jsx_runtime_1.jsx)(index_js_1.Portal, { children: (0, jsx_runtime_1.jsx)("div", { className: (0, cn_js_1.cn)('tokis-hover-card', `tokis-hover-card--${placement}`, className), style: {
+                        position: 'fixed',
+                        top: pos.top,
+                        left: pos.left,
+                        transform: transformMap[placement],
+                        opacity: positioned ? undefined : 0,
+                        pointerEvents: positioned ? undefined : 'none',
+                    }, onMouseEnter: () => clearTimeout(closeTimer.current), onMouseLeave: hide, children: content }) }))] }));
+}
+HoverCard.displayName = 'HoverCard';

package/dist/cjs/components/infinite-scroll/index.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InfiniteScroll = InfiniteScroll;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const cn_js_1 = require("../../utils/cn");
+function InfiniteScroll({ children, hasMore, loading, onLoadMore, loadingComponent, endMessage, threshold = 0.1, className, }) {
+    const sentinelRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (!sentinelRef.current)
+            return;
+        const observer = new IntersectionObserver(([entry]) => {
+            if (entry.isIntersecting && hasMore && !loading)
+                onLoadMore();
+        }, { threshold });
+        observer.observe(sentinelRef.current);
+        return () => observer.disconnect();
+    }, [hasMore, loading, onLoadMore, threshold]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_js_1.cn)('tokis-infinite-scroll', className), children: [children, loading && ((0, jsx_runtime_1.jsx)("div", { className: "tokis-infinite-scroll__loading", children: loadingComponent ?? (0, jsx_runtime_1.jsx)("span", { className: "tokis-infinite-scroll__spinner", "aria-label": "Loading more\u2026" }) })), !hasMore && !loading && endMessage && ((0, jsx_runtime_1.jsx)("div", { className: "tokis-infinite-scroll__end", children: endMessage })), (0, jsx_runtime_1.jsx)("div", { ref: sentinelRef, className: "tokis-infinite-scroll__sentinel", "aria-hidden": "true" })] }));
+}
+InfiniteScroll.displayName = 'InfiniteScroll';

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

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Textarea = exports.TextField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const cn_js_1 = require("../../utils/cn");
+// ─── TextField ────────────────────────────────────────────
+const EyeShowIcon = () => ((0, jsx_runtime_1.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: [(0, jsx_runtime_1.jsx)("path", { d: "M1 7s2-4 6-4 6 4 6 4-2 4-6 4-6-4-6-4z", stroke: "currentColor", strokeWidth: "1.3" }), (0, jsx_runtime_1.jsx)("circle", { cx: "7", cy: "7", r: "1.5", stroke: "currentColor", strokeWidth: "1.3" })] }));
+const EyeHideIcon = () => ((0, jsx_runtime_1.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: [(0, jsx_runtime_1.jsx)("path", { d: "M1 7s2-4 6-4 6 4 6 4-2 4-6 4-6-4-6-4z", stroke: "currentColor", strokeWidth: "1.3" }), (0, jsx_runtime_1.jsx)("circle", { cx: "7", cy: "7", r: "1.5", stroke: "currentColor", strokeWidth: "1.3" }), (0, jsx_runtime_1.jsx)("path", { d: "M2 2l10 10", stroke: "currentColor", strokeWidth: "1.3", strokeLinecap: "round" })] }));
+exports.TextField = (0, react_1.forwardRef)(({ label, helperText, error = false, startAdornment, endAdornment, inputSize = 'md', required, id, className, disabled, type, ...props }, ref) => {
+    const autoId = (0, react_1.useId)();
+    const inputId = id ?? `field-${autoId}`;
+    const helperId = helperText ? `${inputId}-helper` : undefined;
+    const isPassword = type === 'password';
+    const [showPassword, setShowPassword] = (0, react_1.useState)(false);
+    const resolvedType = isPassword ? (showPassword ? 'text' : 'password') : type;
+    const passwordToggle = isPassword && !endAdornment ? ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "tokis-input-password-toggle", onClick: () => setShowPassword((v) => !v), "aria-label": showPassword ? 'Hide password' : 'Show password', tabIndex: -1, children: showPassword ? (0, jsx_runtime_1.jsx)(EyeHideIcon, {}) : (0, jsx_runtime_1.jsx)(EyeShowIcon, {}) })) : null;
+    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: inputId, className: (0, cn_js_1.cn)('tokis-label', required && 'tokis-label--required'), children: label })), (0, jsx_runtime_1.jsxs)("div", { className: "tokis-input-wrapper", children: [startAdornment && ((0, jsx_runtime_1.jsx)("span", { className: "tokis-input-adornment tokis-input-adornment--start", children: startAdornment })), (0, jsx_runtime_1.jsx)("input", { ref: ref, id: inputId, disabled: disabled, required: required, type: resolvedType, "aria-invalid": error || undefined, "aria-describedby": helperId, className: (0, cn_js_1.cn)('tokis-input', inputSize !== 'md' && `tokis-input--${inputSize}`, !!startAdornment && 'tokis-input--with-start', !!(endAdornment || passwordToggle) && 'tokis-input--with-end'), ...props }), passwordToggle, endAdornment && ((0, jsx_runtime_1.jsx)("span", { className: "tokis-input-adornment tokis-input-adornment--end", children: endAdornment }))] }), 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 }))] }));
+});
+exports.TextField.displayName = 'TextField';
+exports.Textarea = (0, react_1.forwardRef)(({ label, helperText, error = false, required, id, className, ...props }, ref) => {
+    const autoId = (0, react_1.useId)();
+    const textareaId = id ?? `textarea-${autoId}`;
+    const helperId = helperText ? `${textareaId}-helper` : undefined;
+    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: textareaId, className: (0, cn_js_1.cn)('tokis-label', required && 'tokis-label--required'), children: label })), (0, jsx_runtime_1.jsx)("textarea", { ref: ref, id: textareaId, required: required, "aria-invalid": error || undefined, "aria-describedby": helperId, className: "tokis-textarea", ...props }), 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 }))] }));
+});
+exports.Textarea.displayName = 'Textarea';

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

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Box = exports.Container = exports.Grid = exports.Stack = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const cn_js_1 = require("../../utils/cn");
+const gapVar = (g) => `var(--tokis-spacing-${g})`;
+exports.Stack = (0, react_1.forwardRef)(({ direction = 'column', gap = 4, align, justify, wrap = false, as: Component = 'div', className, style, children, ...props }, ref) => ((0, jsx_runtime_1.jsx)(Component, { ref: ref, className: (0, cn_js_1.cn)('tokis-stack', direction === 'column' ? 'tokis-stack--v' : 'tokis-stack--h', wrap && 'tokis-stack--wrap', className), style: { gap: gapVar(gap), alignItems: align, justifyContent: justify, ...style }, ...props, children: children })));
+exports.Stack.displayName = 'Stack';
+exports.Grid = (0, react_1.forwardRef)(({ columns = 1, gap = 4, rowGap, columnGap, as: Component = 'div', className, style, children, ...props }, ref) => ((0, jsx_runtime_1.jsx)(Component, { ref: ref, className: (0, cn_js_1.cn)('tokis-grid', className), style: {
+        gridTemplateColumns: (typeof columns === 'number') ? `repeat(${columns}, minmax(0, 1fr))` : columns,
+        gap: gapVar(gap),
+        rowGap: rowGap !== undefined ? gapVar(rowGap) : undefined,
+        columnGap: columnGap !== undefined ? gapVar(columnGap) : undefined,
+        ...style,
+    }, ...props, children: children })));
+exports.Grid.displayName = 'Grid';
+exports.Container = (0, react_1.forwardRef)(({ fluid = false, as: Component = 'div', className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(Component, { ref: ref, className: (0, cn_js_1.cn)('tokis-container', fluid && 'tokis-container--fluid', className), ...props })));
+exports.Container.displayName = 'Container';
+exports.Box = (0, react_1.forwardRef)(({ as: Component = 'div', display, flex, gap, p, px, py, m, width, height, className, style, ...props }, ref) => ((0, jsx_runtime_1.jsx)(Component, { ref: ref, className: (0, cn_js_1.cn)('tokis-box', className), style: {
+        display,
+        flex,
+        gap: gap !== undefined ? gapVar(gap) : undefined,
+        padding: p !== undefined ? gapVar(p) : undefined,
+        paddingLeft: px !== undefined ? gapVar(px) : undefined,
+        paddingRight: px !== undefined ? gapVar(px) : undefined,
+        paddingTop: py !== undefined ? gapVar(py) : undefined,
+        paddingBottom: py !== undefined ? gapVar(py) : undefined,
+        margin: m !== undefined ? gapVar(m) : undefined,
+        width,
+        height,
+        ...style,
+    }, ...props })));
+exports.Box.displayName = 'Box';

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Breadcrumbs = exports.Link = void 0;
+// Re-export Link, Breadcrumbs from breadcrumbs (Pagination moved to pagination/)
+var index_js_1 = require("../breadcrumbs/index");
+Object.defineProperty(exports, "Link", { enumerable: true, get: function () { return index_js_1.Link; } });
+Object.defineProperty(exports, "Breadcrumbs", { enumerable: true, get: function () { return index_js_1.Breadcrumbs; } });

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListItem = exports.List = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const cn_js_1 = require("../../utils/cn");
+// ─── List ────────────────────────────────────────────────
+exports.List = (0, react_1.forwardRef)(({ className, role = 'list', ...props }, ref) => ((0, jsx_runtime_1.jsx)("div", { ref: ref, role: role, className: (0, cn_js_1.cn)('tokis-list', className), ...props })));
+exports.List.displayName = 'List';
+exports.ListItem = (0, react_1.forwardRef)(({ selected = false, disabled = false, icon, endContent, primary, secondary, clickable = false, className, children, onClick, ...props }, ref) => ((0, jsx_runtime_1.jsxs)("div", { ref: ref, role: clickable ? 'listitem' : 'listitem', tabIndex: clickable && !disabled ? 0 : undefined, "aria-selected": selected || undefined, "aria-disabled": disabled || undefined, className: (0, cn_js_1.cn)('tokis-list-item', (clickable || onClick) && 'tokis-list-item--clickable', selected && 'tokis-list-item--selected', className), onClick: !disabled ? onClick : undefined, onKeyDown: !disabled && onClick ? (e) => { if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        onClick(e);
+    } } : undefined, ...props, children: [icon && (0, jsx_runtime_1.jsx)("span", { className: "tokis-list-item__icon", "aria-hidden": "true", children: icon }), (primary || secondary) ? ((0, jsx_runtime_1.jsxs)("div", { className: "tokis-list-item__content", children: [primary && (0, jsx_runtime_1.jsx)("div", { className: "tokis-list-item__primary", children: primary }), secondary && (0, jsx_runtime_1.jsx)("div", { className: "tokis-list-item__secondary", children: secondary })] })) : children, endContent && (0, jsx_runtime_1.jsx)("span", { className: "tokis-list-item__end", children: endContent })] })));
+exports.ListItem.displayName = 'ListItem';