@tokis/react 1.0.1 → 1.1.0

package/dist/cjs/components/datagrid/utils.js

@@ -0,0 +1,87 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCellValue = getCellValue;
+exports.sortRows = sortRows;
+exports.filterRows = filterRows;
+exports.nextSortDirection = nextSortDirection;
+exports.paginateRows = paginateRows;
+exports.computeColumnWidths = computeColumnWidths;
+/** Extract a comparable value from a row cell. */
+function getCellValue(row, col) {
+    return col.valueGetter ? col.valueGetter(row) : row[col.field];
+}
+/** Sort rows by a single column. Returns a new array. */
+function sortRows(rows, sortModel, columns) {
+    if (!sortModel.direction)
+        return rows;
+    const col = columns.find((c) => c.field === sortModel.field);
+    if (!col)
+        return rows;
+    return [...rows].sort((a, b) => {
+        const av = getCellValue(a, col);
+        const bv = getCellValue(b, col);
+        let cmp = 0;
+        if (typeof av === 'number' && typeof bv === 'number') {
+            cmp = av - bv;
+        }
+        else {
+            cmp = String(av ?? '').localeCompare(String(bv ?? ''), undefined, { numeric: true, sensitivity: 'base' });
+        }
+        return sortModel.direction === 'asc' ? cmp : -cmp;
+    });
+}
+/** Filter rows based on the FilterModel. Returns a new array. */
+function filterRows(rows, filterModel, columns) {
+    let result = rows;
+    // Global quick filter
+    const q = filterModel.quickFilter?.trim().toLowerCase();
+    if (q) {
+        const filterableCols = columns.filter((c) => c.filterable !== false);
+        result = result.filter((row) => filterableCols.some((col) => {
+            const v = getCellValue(row, col);
+            return String(v ?? '').toLowerCase().includes(q);
+        }));
+    }
+    // Per-column filters
+    const colFilters = filterModel.columnFilters ?? {};
+    const activeColFilters = Object.entries(colFilters).filter(([, v]) => v.trim() !== '');
+    if (activeColFilters.length > 0) {
+        result = result.filter((row) => activeColFilters.every(([field, filterStr]) => {
+            const col = columns.find((c) => c.field === field);
+            if (!col)
+                return true;
+            const v = getCellValue(row, col);
+            return String(v ?? '').toLowerCase().includes(filterStr.toLowerCase());
+        }));
+    }
+    return result;
+}
+/** Cycle sort direction: null → asc → desc → null */
+function nextSortDirection(currentField, currentModel, clickedField) {
+    if (currentModel.field !== clickedField || currentModel.direction === null) {
+        return { field: clickedField, direction: 'asc' };
+    }
+    if (currentModel.direction === 'asc') {
+        return { field: clickedField, direction: 'desc' };
+    }
+    return { field: clickedField, direction: null };
+}
+/** Paginate an array. Returns the slice for the given page. */
+function paginateRows(rows, page, pageSize) {
+    const start = page * pageSize;
+    return rows.slice(start, start + pageSize);
+}
+/** Compute column widths from fixed + flex definitions. */
+function computeColumnWidths(columns, totalWidth) {
+    const fixed = columns.map((c) => c.width ?? 0);
+    const totalFixed = fixed.reduce((s, w) => s + w, 0);
+    const totalFlex = columns.reduce((s, c) => s + (c.flex ?? 0), 0);
+    const remaining = Math.max(0, totalWidth - totalFixed);
+    return columns.map((col, i) => {
+        if (col.width)
+            return col.width;
+        if (totalFlex > 0 && col.flex)
+            return (col.flex / totalFlex) * remaining;
+        return fixed[i] || 120; // fallback
+    });
+}

package/dist/cjs/components/datepicker/Calendar.js

@@ -0,0 +1,117 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Calendar = Calendar;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Calendar — standalone month-grid date picker widget.
+ *
+ * Implements WAI-ARIA Calendar / Date Grid pattern:
+ *  - role="grid" on the day grid
+ *  - role="gridcell" on each day
+ *  - Arrow keys navigate within the grid
+ *  - Enter/Space selects the focused date
+ *  - Page Up/Down → prev/next month
+ *  - Ctrl+Page Up/Down → prev/next year
+ *  - Home/End → first/last day of current week
+ */
+const react_1 = require("react");
+const date_utils_js_1 = require("./date-utils");
+const cn_js_1 = require("../../utils/cn");
+function Calendar({ value, onChange, min, max, defaultMonth, className }) {
+    const selectedDate = (0, date_utils_js_1.parseDate)(value);
+    const minDate = (0, date_utils_js_1.parseDate)(min);
+    const maxDate = (0, date_utils_js_1.parseDate)(max);
+    const todayDate = (0, date_utils_js_1.today)();
+    const initialYear = defaultMonth?.year ?? selectedDate?.getFullYear() ?? todayDate.getFullYear();
+    const initialMonth = defaultMonth?.month ?? selectedDate?.getMonth() ?? todayDate.getMonth();
+    const [viewYear, setViewYear] = (0, react_1.useState)(initialYear);
+    const [viewMonth, setViewMonth] = (0, react_1.useState)(initialMonth);
+    const [focusedDate, setFocusedDate] = (0, react_1.useState)(selectedDate ?? todayDate);
+    const gridRef = (0, react_1.useRef)(null);
+    const grid = (0, date_utils_js_1.buildCalendarGrid)(viewYear, viewMonth);
+    const navigateMonth = (delta) => {
+        setViewMonth((m) => {
+            const next = m + delta;
+            if (next < 0) {
+                setViewYear((y) => y - 1);
+                return 11;
+            }
+            if (next > 11) {
+                setViewYear((y) => y + 1);
+                return 0;
+            }
+            return next;
+        });
+    };
+    const navigateYear = (delta) => {
+        setViewYear((y) => y + delta);
+    };
+    const selectDate = (0, react_1.useCallback)((date) => {
+        if (minDate && (0, date_utils_js_1.isBeforeDay)(date, minDate))
+            return;
+        if (maxDate && (0, date_utils_js_1.isAfterDay)(date, maxDate))
+            return;
+        onChange?.((0, date_utils_js_1.formatDate)(date));
+    }, [onChange, minDate, maxDate]);
+    const handleKeyDown = (e) => {
+        let next = new Date(focusedDate);
+        switch (e.key) {
+            case 'ArrowRight':
+                next.setDate(next.getDate() + 1);
+                break;
+            case 'ArrowLeft':
+                next.setDate(next.getDate() - 1);
+                break;
+            case 'ArrowDown':
+                next.setDate(next.getDate() + 7);
+                break;
+            case 'ArrowUp':
+                next.setDate(next.getDate() - 7);
+                break;
+            case 'Home':
+                next = new Date(next.getFullYear(), next.getMonth(), 1);
+                break;
+            case 'End':
+                next = new Date(next.getFullYear(), next.getMonth(), (0, date_utils_js_1.daysInMonth)(next.getFullYear(), next.getMonth()));
+                break;
+            case 'PageUp':
+                e.ctrlKey ? navigateYear(-1) : navigateMonth(-1);
+                return;
+            case 'PageDown':
+                e.ctrlKey ? navigateYear(1) : navigateMonth(1);
+                return;
+            case 'Enter':
+            case ' ':
+                e.preventDefault();
+                selectDate(focusedDate);
+                return;
+            default: return;
+        }
+        e.preventDefault();
+        setFocusedDate(next);
+        // Auto-navigate view if the focused date is outside the current view month
+        if (next.getFullYear() !== viewYear || next.getMonth() !== viewMonth) {
+            setViewYear(next.getFullYear());
+            setViewMonth(next.getMonth());
+        }
+        // Re-focus the cell after state update
+        requestAnimationFrame(() => {
+            const cell = gridRef.current?.querySelector('[tabindex="0"]');
+            cell?.focus();
+        });
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_js_1.cn)('tokis-calendar', className), role: "group", "aria-label": "Calendar", children: [(0, jsx_runtime_1.jsxs)("div", { className: "tokis-calendar-nav", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "tokis-calendar-nav-btn", onClick: () => navigateYear(-1), "aria-label": "Previous year", children: "\u00AB" }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "tokis-calendar-nav-btn", onClick: () => navigateMonth(-1), "aria-label": "Previous month", children: "\u2039" }), (0, jsx_runtime_1.jsxs)("span", { className: "tokis-calendar-title", "aria-live": "polite", "aria-atomic": "true", children: [date_utils_js_1.MONTHS[viewMonth], " ", viewYear] }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "tokis-calendar-nav-btn", onClick: () => navigateMonth(1), "aria-label": "Next month", children: "\u203A" }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "tokis-calendar-nav-btn", onClick: () => navigateYear(1), "aria-label": "Next year", children: "\u00BB" })] }), (0, jsx_runtime_1.jsxs)("table", { ref: gridRef, className: "tokis-calendar-grid", role: "grid", "aria-label": `${date_utils_js_1.MONTHS[viewMonth]} ${viewYear}`, onKeyDown: handleKeyDown, children: [(0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsx)("tr", { role: "row", children: date_utils_js_1.DAYS_OF_WEEK.map((d) => ((0, jsx_runtime_1.jsx)("th", { role: "columnheader", abbr: d, className: "tokis-calendar-weekday", scope: "col", children: d }, d))) }) }), (0, jsx_runtime_1.jsx)("tbody", { children: grid.map((week, wi) => ((0, jsx_runtime_1.jsx)("tr", { role: "row", children: week.map((day) => {
+                                const isCurrentMonth = day.getMonth() === viewMonth;
+                                const isSelected = selectedDate ? (0, date_utils_js_1.isSameDay)(day, selectedDate) : false;
+                                const isToday = (0, date_utils_js_1.isSameDay)(day, todayDate);
+                                const isFocused = (0, date_utils_js_1.isSameDay)(day, focusedDate);
+                                const isDisabled = Boolean((minDate && (0, date_utils_js_1.isBeforeDay)(day, minDate)) ||
+                                    (maxDate && (0, date_utils_js_1.isAfterDay)(day, maxDate)));
+                                return ((0, jsx_runtime_1.jsx)("td", { role: "gridcell", "aria-selected": isSelected, "aria-disabled": isDisabled, "aria-label": day.toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' }), "aria-current": isToday ? 'date' : undefined, tabIndex: isFocused ? 0 : -1, className: (0, cn_js_1.cn)('tokis-calendar-day', !isCurrentMonth && 'tokis-calendar-day--outside', isSelected && 'tokis-calendar-day--selected', isToday && 'tokis-calendar-day--today', isDisabled && 'tokis-calendar-day--disabled', isFocused && 'tokis-calendar-day--focused'), onClick: () => !isDisabled && selectDate(day), onFocus: () => setFocusedDate(day), children: day.getDate() }, day.toISOString()));
+                            }) }, wi))) })] }), (0, jsx_runtime_1.jsx)("div", { className: "tokis-calendar-footer", children: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "tokis-calendar-today-btn", onClick: () => {
+                        setViewYear(todayDate.getFullYear());
+                        setViewMonth(todayDate.getMonth());
+                        setFocusedDate(todayDate);
+                        selectDate(todayDate);
+                    }, children: "Today" }) })] }));
+}

package/dist/cjs/components/datepicker/date-utils.js

@@ -0,0 +1,121 @@
+"use strict";
+/**
+ * Zero-dependency date utilities for the DatePicker calendar.
+ * All functions operate on plain JS Date objects or ISO YYYY-MM-DD strings.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MONTHS = exports.DAYS_OF_WEEK = void 0;
+exports.parseDate = parseDate;
+exports.formatDate = formatDate;
+exports.formatDisplayDate = formatDisplayDate;
+exports.startOfMonth = startOfMonth;
+exports.daysInMonth = daysInMonth;
+exports.buildCalendarGrid = buildCalendarGrid;
+exports.isSameDay = isSameDay;
+exports.isBeforeDay = isBeforeDay;
+exports.isAfterDay = isAfterDay;
+exports.today = today;
+exports.parseTime = parseTime;
+exports.formatTime = formatTime;
+exports.DAYS_OF_WEEK = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+exports.MONTHS = [
+    'January', 'February', 'March', 'April', 'May', 'June',
+    'July', 'August', 'September', 'October', 'November', 'December',
+];
+/** Parse a YYYY-MM-DD string → local Date (midnight). Returns null if invalid. */
+function parseDate(iso) {
+    if (!iso)
+        return null;
+    const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(iso);
+    if (!m)
+        return null;
+    const [, y, mo, d] = m.map(Number);
+    const date = new Date(y, mo - 1, d);
+    // Guard against e.g. "2024-02-30" auto-rolling to March
+    if (date.getFullYear() !== y || date.getMonth() !== mo - 1 || date.getDate() !== d)
+        return null;
+    return date;
+}
+/** Format a Date → YYYY-MM-DD string. */
+function formatDate(date) {
+    const y = date.getFullYear();
+    const m = String(date.getMonth() + 1).padStart(2, '0');
+    const d = String(date.getDate()).padStart(2, '0');
+    return `${y}-${m}-${d}`;
+}
+/** Format a Date for the input display label (e.g., "Jan 15, 2025"). */
+function formatDisplayDate(date) {
+    return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
+}
+/** Return the first day of the month for a given year/month (0-indexed). */
+function startOfMonth(year, month) {
+    return new Date(year, month, 1);
+}
+/** Return the number of days in a month. */
+function daysInMonth(year, month) {
+    return new Date(year, month + 1, 0).getDate();
+}
+/** Build the 6×7 calendar grid for a given year/month. Returns Date[][] (some days in prev/next month). */
+function buildCalendarGrid(year, month) {
+    const firstDay = startOfMonth(year, month).getDay(); // 0=Sun
+    const totalDays = daysInMonth(year, month);
+    const cells = [];
+    // Pad with days from previous month
+    const prevMonthDays = daysInMonth(year, month - 1 < 0 ? 11 : month - 1);
+    const prevYear = month === 0 ? year - 1 : year;
+    const prevMonth = month === 0 ? 11 : month - 1;
+    for (let i = firstDay - 1; i >= 0; i--) {
+        cells.push(new Date(prevYear, prevMonth, prevMonthDays - i));
+    }
+    // Current month days
+    for (let d = 1; d <= totalDays; d++) {
+        cells.push(new Date(year, month, d));
+    }
+    // Pad to complete 6 rows (42 cells)
+    const nextYear = month === 11 ? year + 1 : year;
+    const nextMonth = month === 11 ? 0 : month + 1;
+    let nextDay = 1;
+    while (cells.length < 42) {
+        cells.push(new Date(nextYear, nextMonth, nextDay++));
+    }
+    // Split into 6 rows of 7
+    const rows = [];
+    for (let r = 0; r < 6; r++) {
+        rows.push(cells.slice(r * 7, r * 7 + 7));
+    }
+    return rows;
+}
+/** Returns true if two dates represent the same calendar day. */
+function isSameDay(a, b) {
+    return a.getFullYear() === b.getFullYear()
+        && a.getMonth() === b.getMonth()
+        && a.getDate() === b.getDate();
+}
+/** Returns true if a date is before the given min date (by day). */
+function isBeforeDay(date, min) {
+    const d = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+    const m = new Date(min.getFullYear(), min.getMonth(), min.getDate());
+    return d < m;
+}
+/** Returns true if a date is after the given max date (by day). */
+function isAfterDay(date, max) {
+    const d = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+    const m = new Date(max.getFullYear(), max.getMonth(), max.getDate());
+    return d > m;
+}
+/** Returns today as a local midnight Date. */
+function today() {
+    const t = new Date();
+    return new Date(t.getFullYear(), t.getMonth(), t.getDate());
+}
+/** Parse a HH:MM string into { hours, minutes }. */
+function parseTime(t) {
+    if (!t)
+        return { hours: 0, minutes: 0 };
+    const [h, m] = t.split(':').map(Number);
+    return { hours: h ?? 0, minutes: m ?? 0 };
+}
+/** Format { hours, minutes } → HH:MM string. */
+function formatTime(hours, minutes) {
+    return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`;
+}

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

@@ -0,0 +1,134 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Calendar = void 0;
+exports.DatePicker = DatePicker;
+exports.TimePicker = TimePicker;
+exports.DateTimePicker = DateTimePicker;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * DatePicker, TimePicker, DateTimePicker
+ *
+ * All three share a pattern: a trigger input that opens a Portal-mounted popup.
+ * DatePicker uses the Calendar grid widget.
+ * TimePicker uses scroll-select columns for hours/minutes.
+ * DateTimePicker combines both.
+ */
+const react_1 = require("react");
+const index_js_1 = require("../portal/index");
+const useId_js_1 = require("../../hooks/useId");
+const cn_js_1 = require("../../utils/cn");
+const Calendar_js_1 = require("./Calendar");
+const date_utils_js_1 = require("./date-utils");
+// ─── Shared floating panel hook ───────────────────────────────────────────────
+function useFloatingPanel(onClose) {
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const triggerRef = (0, react_1.useRef)(null);
+    const panelRef = (0, react_1.useRef)(null);
+    const [pos, setPos] = (0, react_1.useState)({ top: 0, left: 0 });
+    const updatePos = (0, react_1.useCallback)(() => {
+        const el = triggerRef.current;
+        if (!el)
+            return;
+        const rect = el.getBoundingClientRect();
+        setPos({
+            top: rect.bottom + window.scrollY + 4,
+            left: rect.left + window.scrollX,
+        });
+    }, []);
+    const openPanel = () => {
+        updatePos();
+        setOpen(true);
+    };
+    const closePanel = (0, react_1.useCallback)(() => {
+        setOpen(false);
+        onClose?.();
+        triggerRef.current?.focus();
+    }, [onClose]);
+    // Close on outside click
+    (0, react_1.useEffect)(() => {
+        if (!open)
+            return;
+        const handler = (e) => {
+            if (!triggerRef.current?.contains(e.target) &&
+                !panelRef.current?.contains(e.target)) {
+                closePanel();
+            }
+        };
+        document.addEventListener('mousedown', handler);
+        return () => document.removeEventListener('mousedown', handler);
+    }, [open, closePanel]);
+    // Close on Escape
+    (0, react_1.useEffect)(() => {
+        if (!open)
+            return;
+        const handler = (e) => { if (e.key === 'Escape')
+            closePanel(); };
+        document.addEventListener('keydown', handler);
+        return () => document.removeEventListener('keydown', handler);
+    }, [open, closePanel]);
+    return { open, openPanel, closePanel, triggerRef, panelRef, pos };
+}
+function DatePicker({ value: valueProp, defaultValue, onChange, label, placeholder = 'Pick a date', disabled = false, required = false, error = false, min, max, className, }) {
+    const [internalValue, setInternalValue] = (0, react_1.useState)(defaultValue);
+    const value = valueProp !== undefined ? valueProp : internalValue;
+    const id = (0, useId_js_1.useId)('datepicker');
+    const parsedDate = (0, date_utils_js_1.parseDate)(value);
+    const { open, openPanel, closePanel, triggerRef, panelRef, pos } = useFloatingPanel();
+    const handleSelect = (iso) => {
+        if (valueProp === undefined)
+            setInternalValue(iso);
+        onChange?.(iso);
+        closePanel();
+    };
+    const handleClear = (e) => {
+        e.stopPropagation();
+        if (valueProp === undefined)
+            setInternalValue(undefined);
+        onChange?.(undefined);
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_js_1.cn)('tokis-datepicker', error && 'tokis-datepicker--error', disabled && 'tokis-datepicker--disabled', className), children: [label && ((0, jsx_runtime_1.jsxs)("label", { className: "tokis-label", htmlFor: id, children: [label, required && (0, jsx_runtime_1.jsx)("span", { className: "tokis-label-required", "aria-hidden": "true", children: " *" })] })), (0, jsx_runtime_1.jsxs)("div", { className: "tokis-datepicker-input-wrap", children: [(0, jsx_runtime_1.jsxs)("button", { ref: triggerRef, id: id, type: "button", className: (0, cn_js_1.cn)('tokis-datepicker-trigger', open && 'tokis-datepicker-trigger--open'), disabled: disabled, "aria-haspopup": "dialog", "aria-expanded": open, "aria-label": label ? `${label}: ${parsedDate ? (0, date_utils_js_1.formatDisplayDate)(parsedDate) : 'not set'}` : undefined, onClick: () => (open ? closePanel() : openPanel()), children: [(0, jsx_runtime_1.jsx)("span", { className: (0, cn_js_1.cn)('tokis-datepicker-value', !parsedDate && 'tokis-datepicker-placeholder'), children: parsedDate ? (0, date_utils_js_1.formatDisplayDate)(parsedDate) : placeholder }), (0, jsx_runtime_1.jsx)("span", { className: "tokis-datepicker-icon", "aria-hidden": "true", children: "\uD83D\uDCC5" })] }), parsedDate && !disabled && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "tokis-datepicker-clear", "aria-label": "Clear date", onClick: handleClear, children: "\u2715" }))] }), open && ((0, jsx_runtime_1.jsx)(index_js_1.Portal, { children: (0, jsx_runtime_1.jsx)("div", { ref: panelRef, className: "tokis-datepicker-panel", role: "dialog", "aria-modal": "false", "aria-label": label ?? 'Date picker', style: { top: pos.top, left: pos.left }, children: (0, jsx_runtime_1.jsx)(Calendar_js_1.Calendar, { value: value, onChange: handleSelect, min: min, max: max }) }) }))] }));
+}
+function TimePicker({ value: valueProp, defaultValue, onChange, label, disabled = false, required = false, error = false, hourFormat = 24, minuteStep = 1, className, }) {
+    const [internalValue, setInternalValue] = (0, react_1.useState)(defaultValue ?? '00:00');
+    const value = valueProp !== undefined ? valueProp : internalValue;
+    const { hours, minutes } = (0, date_utils_js_1.parseTime)(value);
+    const id = (0, useId_js_1.useId)('timepicker');
+    const setTime = (h, m) => {
+        const next = (0, date_utils_js_1.formatTime)(h, m);
+        if (valueProp === undefined)
+            setInternalValue(next);
+        onChange?.(next);
+    };
+    const hourOptions = Array.from({ length: hourFormat === 12 ? 12 : 24 }, (_, i) => hourFormat === 12 ? i + 1 : i);
+    const minuteOptions = [];
+    for (let m = 0; m < 60; m += minuteStep)
+        minuteOptions.push(m);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_js_1.cn)('tokis-timepicker', error && 'tokis-timepicker--error', disabled && 'tokis-timepicker--disabled', className), children: [label && ((0, jsx_runtime_1.jsxs)("label", { className: "tokis-label", htmlFor: `${id}-hours`, children: [label, required && (0, jsx_runtime_1.jsx)("span", { className: "tokis-label-required", "aria-hidden": "true", children: " *" })] })), (0, jsx_runtime_1.jsxs)("div", { className: "tokis-timepicker-inputs", children: [(0, jsx_runtime_1.jsx)("select", { id: `${id}-hours`, className: "tokis-timepicker-select", value: hours, disabled: disabled, "aria-label": "Hours", onChange: (e) => setTime(Number(e.target.value), minutes), children: hourOptions.map((h) => ((0, jsx_runtime_1.jsx)("option", { value: h, children: String(h).padStart(2, '0') }, h))) }), (0, jsx_runtime_1.jsx)("span", { className: "tokis-timepicker-sep", "aria-hidden": "true", children: ":" }), (0, jsx_runtime_1.jsx)("select", { id: `${id}-minutes`, className: "tokis-timepicker-select", value: minutes, disabled: disabled, "aria-label": "Minutes", onChange: (e) => setTime(hours, Number(e.target.value)), children: minuteOptions.map((m) => ((0, jsx_runtime_1.jsx)("option", { value: m, children: String(m).padStart(2, '0') }, m))) }), hourFormat === 12 && ((0, jsx_runtime_1.jsxs)("select", { className: "tokis-timepicker-select tokis-timepicker-ampm", value: hours < 12 ? 'AM' : 'PM', disabled: disabled, "aria-label": "AM/PM", onChange: (e) => {
+                            const ampm = e.target.value;
+                            let h = hours % 12;
+                            if (ampm === 'PM')
+                                h += 12;
+                            setTime(h, minutes);
+                        }, children: [(0, jsx_runtime_1.jsx)("option", { value: "AM", children: "AM" }), (0, jsx_runtime_1.jsx)("option", { value: "PM", children: "PM" })] }))] })] }));
+}
+function DateTimePicker({ value: valueProp, defaultValue, onChange, minuteStep = 1, hourFormat = 24, ...dateProps }) {
+    const split = (v) => {
+        if (!v)
+            return { date: undefined, time: '00:00' };
+        const [date, time] = v.split('T');
+        return { date, time: time ?? '00:00' };
+    };
+    const [internalValue, setInternalValue] = (0, react_1.useState)(defaultValue);
+    const value = valueProp !== undefined ? valueProp : internalValue;
+    const { date, time } = split(value);
+    const emit = (0, react_1.useCallback)((d, t) => {
+        const next = d ? `${d}T${t ?? '00:00'}` : undefined;
+        if (valueProp === undefined)
+            setInternalValue(next);
+        onChange?.(next);
+    }, [valueProp, onChange]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "tokis-datetimepicker", children: [(0, jsx_runtime_1.jsx)(DatePicker, { ...dateProps, value: date, onChange: (d) => emit(d, time) }), (0, jsx_runtime_1.jsx)(TimePicker, { value: time, disabled: dateProps.disabled, minuteStep: minuteStep, hourFormat: hourFormat, onChange: (t) => emit(date, t) })] }));
+}
+// Re-export Calendar for standalone use
+var Calendar_js_2 = require("./Calendar");
+Object.defineProperty(exports, "Calendar", { enumerable: true, get: function () { return Calendar_js_2.Calendar; } });

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

@@ -41,7 +41,6 @@ exports.Rating = Rating;
 exports.StarRating = Rating;
 exports.TransferList = TransferList;
 exports.Icon = Icon;
-exports.MaterialIcon = MaterialIcon;
 exports.Backdrop = Backdrop;
 exports.Paper = Paper;
 exports.SpeedDial = SpeedDial;
@@ -58,19 +57,15 @@ 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 core_1 = require("@tokis/core");
 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);
@@ -128,19 +123,12 @@ function TransferList({ left, right, onChange, leftTitle = 'Available', rightTit
     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': '→',
+const _emojiIconMap = {
+    search: '⌕', close: '×', menu: '☰', check: '✓', star: '★', 'arrow-right': '→',
 };
+/** @deprecated Use named SVG icons from `@tokis/icons`. */
 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 });
+    return (0, jsx_runtime_1.jsx)("span", { className: (0, cn_js_1.cn)('tokis-icon', className), "aria-hidden": "true", ...props, children: _emojiIconMap[name] });
 }
 function Backdrop({ open, onClick, className, children, ...props }) {
     if (!open)
@@ -252,10 +240,42 @@ function InitColorSchemeScript() {
   })();`;
     return (0, jsx_runtime_1.jsx)("script", { dangerouslySetInnerHTML: { __html: script } });
 }
-function Modal({ open, onClose, children }) {
+function Modal({ open, onClose, children, title, description, closeOnBackdropClick = true, closeOnEscape = true, }) {
+    const contentRef = (0, react_1.useRef)(null);
+    const previousFocusRef = (0, react_1.useRef)(null);
+    const titleId = (0, react_1.useId)();
+    const descriptionId = (0, react_1.useId)();
+    // Lock scroll on open
+    (0, react_1.useEffect)(() => {
+        if (!open)
+            return;
+        const prev = document.body.style.overflow;
+        document.body.style.overflow = 'hidden';
+        return () => { document.body.style.overflow = prev; };
+    }, [open]);
+    // Trap focus when open
+    (0, react_1.useEffect)(() => {
+        if (!open || !contentRef.current)
+            return;
+        previousFocusRef.current = document.activeElement;
+        const release = (0, core_1.trapFocus)(contentRef.current);
+        return () => {
+            release?.();
+            previousFocusRef.current?.focus();
+        };
+    }, [open]);
+    // Close on Escape
+    (0, react_1.useEffect)(() => {
+        if (!open || !closeOnEscape)
+            return;
+        const handler = (e) => { if (e.key === 'Escape')
+            onClose(); };
+        document.addEventListener('keydown', handler);
+        return () => document.removeEventListener('keydown', handler);
+    }, [open, closeOnEscape, onClose]);
     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 }) }) }));
+    return ((0, jsx_runtime_1.jsx)(index_js_3.Portal, { children: (0, jsx_runtime_1.jsx)("div", { className: "tokis-modal-root", role: "presentation", onClick: closeOnBackdropClick ? onClose : undefined, children: (0, jsx_runtime_1.jsxs)("div", { ref: contentRef, className: "tokis-modal-content", role: "dialog", "aria-modal": "true", "aria-labelledby": title ? titleId : undefined, "aria-describedby": description ? descriptionId : undefined, onClick: (e) => e.stopPropagation(), children: [title && (0, jsx_runtime_1.jsx)("span", { id: titleId, className: "tokis-modal-title", children: title }), description && (0, jsx_runtime_1.jsx)("span", { id: descriptionId, className: "tokis-modal-desc", children: description }), children] }) }) }));
 }
 function NoSsr({ children, fallback = null }) {
     const [mounted, setMounted] = (0, react_1.useState)(false);
@@ -311,18 +331,6 @@ function useMediaQuery(query) {
     }, [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/layout/index.js

@@ -22,10 +22,11 @@ exports.Box = (0, react_1.forwardRef)(({ as: Component = 'div', display, flex, g
         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,
+        // Logical properties for RTL support
+        paddingInlineStart: px !== undefined ? gapVar(px) : undefined,
+        paddingInlineEnd: px !== undefined ? gapVar(px) : undefined,
+        paddingBlockStart: py !== undefined ? gapVar(py) : undefined,
+        paddingBlockEnd: py !== undefined ? gapVar(py) : undefined,
         margin: m !== undefined ? gapVar(m) : undefined,
         width,
         height,

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

@@ -53,7 +53,7 @@ function TreeItem({ node, level, selected, expanded, onSelect, onExpand, multiSe
                 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: () => {
+    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: { paddingInlineStart: `calc(${(level - 1) * 20}px + var(--tokis-spacing-2))` }, onClick: () => {
                     if (node.disabled)
                         return;
                     if (hasChildren)

package/dist/cjs/hooks/useId.js

@@ -2,12 +2,25 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useId = useId;
 const react_1 = require("react");
-const core_1 = require("@tokis/core");
 /**
- * Returns a stable, unique ID for the lifetime of the component.
- * Prefer React 18's built-in `useId` for SSR-safe IDs.
- * Use this hook only when a custom prefix is needed.
+ * Returns a stable, SSR-safe, unique ID for the lifetime of the component.
+ * Delegates to React 18's built-in `useId` to guarantee consistent IDs
+ * across server and client renders — no hydration mismatch.
+ *
+ * The raw React `useId` value (e.g. `:r3:`) has colons stripped so it is safe
+ * for use as an HTML `id` attribute and inside class name strings.
+ *
+ * @param prefix  Optional string prepended to the generated ID.
+ *                Defaults to `'tokis'`.
+ *
+ * @example
+ * const id = useId();          // → 'tokis-r3'
+ * const id = useId('dialog');  // → 'dialog-r3'
  */
 function useId(prefix = 'tokis') {
-    return (0, react_1.useRef)((0, core_1.generateId)(prefix)).current;
+    // React 18 useId is SSR-safe: server and client produce matching values.
+    const reactId = (0, react_1.useId)();
+    // Strip the leading/trailing colons React adds (e.g. ':r3:' → 'r3')
+    const clean = reactId.replace(/:/g, '');
+    return prefix ? `${prefix}-${clean}` : clean;
 }