@idyeah/diya 0.0.0 → 1.0.1

package/dist/switch/Switch.d.ts

@@ -0,0 +1,47 @@
+import { type InputHTMLAttributes } from 'react';
+/** Native checkbox attributes, including `name`, `onChange`, `onBlur` and the ref, go on the switch input; `className` and `style` go on the outer field wrapper. */
+export type SwitchProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'role' | 'size' | 'value' | 'checked' | 'defaultChecked' | 'children'> & {
+    /** Whether the switch is on, when controlled; pair it with `onCheckedChange`. */
+    checked?: boolean;
+    /** Whether the switch starts on when uncontrolled; a form reset returns to it. */
+    defaultChecked?: boolean;
+    /** Called with the new on/off state when the switch is toggled. */
+    onCheckedChange?: (checked: boolean) => void;
+    /** The value sent with the form under `name` while the switch is on; defaults to "on", like a checkbox. */
+    value?: string;
+    /** Visible label beside the switch; also its accessible name. Hide it with hideLabel. */
+    label: string;
+    /** Visible hint below the label, announced with the switch; `error` replaces it while set. */
+    helperText?: string;
+    /** Visible error message below the label; marks the switch invalid while set. */
+    error?: string;
+    /** Hides the label visually but keeps it as the switch's accessible name. */
+    hideLabel?: boolean;
+    /** Prevents toggling and dims the switch. */
+    disabled?: boolean;
+    /** Track and thumb size; defaults to 'medium'. */
+    size?: 'small' | 'medium' | 'large';
+};
+/** An on/off toggle (a native checkbox with role="switch") with a label and optional helper text or error. */
+export declare const Switch: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "children" | "size" | "type" | "defaultChecked" | "role" | "checked"> & {
+    /** Whether the switch is on, when controlled; pair it with `onCheckedChange`. */
+    checked?: boolean;
+    /** Whether the switch starts on when uncontrolled; a form reset returns to it. */
+    defaultChecked?: boolean;
+    /** Called with the new on/off state when the switch is toggled. */
+    onCheckedChange?: (checked: boolean) => void;
+    /** The value sent with the form under `name` while the switch is on; defaults to "on", like a checkbox. */
+    value?: string;
+    /** Visible label beside the switch; also its accessible name. Hide it with hideLabel. */
+    label: string;
+    /** Visible hint below the label, announced with the switch; `error` replaces it while set. */
+    helperText?: string;
+    /** Visible error message below the label; marks the switch invalid while set. */
+    error?: string;
+    /** Hides the label visually but keeps it as the switch's accessible name. */
+    hideLabel?: boolean;
+    /** Prevents toggling and dims the switch. */
+    disabled?: boolean;
+    /** Track and thumb size; defaults to 'medium'. */
+    size?: "small" | "medium" | "large";
+} & import("react").RefAttributes<HTMLInputElement>>;

package/dist/switch/Switch.js

@@ -0,0 +1,18 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId } from 'react';
+import { cx } from '../internal/cx.js';
+/** An on/off toggle (a native checkbox with role="switch") with a label and optional helper text or error. */
+export const Switch = forwardRef(function Switch({ checked, defaultChecked, onCheckedChange, onChange, onKeyDown, label, helperText, error, hideLabel = false, disabled = false, size = 'medium', id, className, style, 'aria-describedby': describedBy, ...props }, ref) {
+    const description = error || helperText;
+    const generatedId = useId();
+    const inputId = id ?? generatedId;
+    return _jsxs("div", { className: cx('diya-switch-field', className), style: style, "data-size": size, "data-disabled": disabled, children: [_jsx("input", { ...props, ref: ref, id: inputId, type: "checkbox", role: "switch", className: "diya-switch", ...(checked !== undefined ? { checked } : { defaultChecked }), "aria-describedby": [describedBy, description ? `${inputId}-description` : undefined].filter(Boolean).join(' ') || undefined, "aria-invalid": error ? true : props['aria-invalid'], disabled: disabled, onChange: (event) => { onChange?.(event); onCheckedChange?.(event.target.checked); }, onKeyDown: (event) => {
+                    onKeyDown?.(event);
+                    // A switch toggles with Enter as well as Space.
+                    if (event.key === 'Enter' && !event.defaultPrevented && !disabled) {
+                        event.preventDefault();
+                        event.currentTarget.click();
+                    }
+                } }), _jsxs("div", { children: [_jsx("label", { htmlFor: inputId, className: hideLabel ? 'diya-sr-only' : 'diya-switch-label', children: label }), description && _jsxs("p", { id: `${inputId}-description`, className: "diya-switch-description", "data-invalid": error ? true : undefined, children: [error && _jsx("span", { "aria-hidden": "true", children: "!" }), description] })] })] });
+});

package/dist/table/Table.d.ts

@@ -0,0 +1,99 @@
+import { type HTMLAttributes, type ReactNode, type RefAttributes } from 'react';
+import { type MenuItem } from '../menu/Menu.js';
+import { tableMessages } from './messages.js';
+declare module '../messages.js' {
+    interface DiyaMessages {
+        table: typeof tableMessages;
+    }
+}
+export type TableColumn<T> = {
+    /** Stable column identity, also used as the sort key. */
+    key: string;
+    /** Visible column header text. */
+    label: string;
+    /** Renders the cell for a row. */
+    render: (row: T) => ReactNode;
+    /** Value the column sorts by; giving it makes the header a sort button. */
+    sortValue?: (row: T) => string | number;
+    /** Right-aligns the column for numbers; defaults to false. */
+    numeric?: boolean;
+    /** Column width in pixels; tables with more than four columns scroll sideways, using 160 for columns without one. */
+    width?: number;
+};
+export type TableFilter<T> = {
+    /** Stable identity for this filter's state. */
+    key: string;
+    /** Visible filter button text; the chosen option is appended, e.g. "Status: Active". */
+    label: string;
+    /** Choices in the filter menu, as plain strings or value/label pairs; an "All" choice is added first. */
+    options: (string | {
+        value: string;
+        label: string;
+    })[];
+    /** Returns the row's value to compare with the chosen option's value. */
+    getValue: (row: T) => string;
+};
+export type TableBulkAction = {
+    /** Visible button and menu item text. */
+    label: string;
+    /** Called with the selected row ids (see `getRowId`) from the toolbar, or with one row's id from its menu; the selection then clears. */
+    onAction: (ids: string[]) => void;
+    /** Marks the menu item as destructive; defaults to false. */
+    destructive?: boolean;
+};
+export type TableProps<T> = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /** The table's title: shown as its heading unless `showTitle` is false, and always its caption and accessible name. */
+    label: string;
+    /** Shows `label` as a visible heading above the table; defaults to true. */
+    showTitle?: boolean;
+    /** Heading level of the visible title, h1 to h6. Defaults to 3. */
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+    /** The data. Search, filters, sorting and pagination run on these rows in the browser. */
+    rows: T[];
+    /** Returns a row's unique id, used for keys and selection; defaults to the row's `id` field (a string or number, as a string). */
+    getRowId?: (row: T) => string;
+    /** Column definitions, in display order. */
+    columns: TableColumn<T>[];
+    /** Short name for a row, used in its checkbox and menu accessible names, e.g. "Select Ada Lovelace". */
+    rowLabel: (row: T) => string;
+    /** Text a row matches against; giving it shows the search field. */
+    searchText?: (row: T) => string;
+    /** Filter menus in the toolbar; a non-empty list shows the filter UI. */
+    filterOptions?: TableFilter<T>[];
+    /** Row height; defaults to 'comfortable'. */
+    density?: 'comfortable' | 'compact';
+    /** Shows the search field; defaults to on when `searchText` is given. */
+    search?: boolean;
+    /** Row checkboxes; defaults to on when there are bulk actions, a selection handler or `selectedIds`. */
+    selectable?: boolean;
+    /** Shows pagination under the table; defaults to true. */
+    pagination?: boolean;
+    /** Rows per page at first; defaults to 10. */
+    defaultPageSize?: number;
+    /** Choices in the rows-per-page menu; defaults to [10, 25, 50]. */
+    pageSizeOptions?: number[];
+    /** Wide-table mode: pins the checkbox and first column left and the row menu right while scrolling sideways; defaults to false. */
+    sticky?: boolean;
+    /** Shows skeleton rows and a loading status, and disables the tools; defaults to false. */
+    loading?: boolean;
+    /** Actions for the selected rows; each also appears in a row's own menu. */
+    bulkActions?: TableBulkAction[];
+    /** Adds an "open" item (openLabel) to each row's menu, called with that row. */
+    onRowOpen?: (row: T) => void;
+    /** Builds a row's menu items, replacing the open and bulk items; giving it shows the row menu. */
+    rowActions?: (row: T) => MenuItem[];
+    /** Selected row ids (see `getRowId`), for a controlled selection; leave it out to let the table keep its own. */
+    selectedIds?: string[];
+    /** Called with the full list of selected row ids whenever the selection changes. */
+    onSelectionChange?: (ids: string[]) => void;
+    /** Empty-state heading when there are no rows; defaults to "No data yet". */
+    emptyTitle?: string;
+    /** Empty-state text when there are no rows; defaults to "Items will appear here once they are added." */
+    emptyDescription?: string;
+    /** Status text announced while loading; defaults to "Loading…". */
+    loadingLabel?: string;
+    /** Text of the row menu item added by `onRowOpen`; defaults to "View details". */
+    openLabel?: string;
+};
+/** A data table with optional search, filters, sorting, row selection, bulk and row actions, and pagination, all run in the browser. */
+export declare const Table: <T>(props: TableProps<T> & RefAttributes<HTMLDivElement>) => ReactNode;

package/dist/table/Table.js

@@ -0,0 +1,158 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, Fragment, useState } from 'react';
+import { Search } from '../search/Search.js';
+import { Menu } from '../menu/Menu.js';
+import { Pagination } from '../pagination/Pagination.js';
+import { Button } from '../button/Button.js';
+import { useDiyaMessages } from '../DiyaProvider.js';
+import { cx } from '../internal/cx.js';
+import { tableMessages } from './messages.js';
+let warnedMissingId = false;
+function defaultRowId(row, index) {
+    const id = row?.id;
+    if (typeof id === 'string' || typeof id === 'number')
+        return String(id);
+    if (!warnedMissingId) {
+        warnedMissingId = true;
+        console.error('DIYA Table: a row has no string or number `id`. Pass `getRowId` to say which field identifies a row.');
+    }
+    return `diya-row-${index}`;
+}
+/** A data table with optional search, filters, sorting, row selection, bulk and row actions, and pagination, all run in the browser. */
+export const Table = forwardRef(function Table({ label, showTitle = true, headingLevel = 3, rows, getRowId, columns, rowLabel, searchText, filterOptions, density = 'comfortable', search, selectable, pagination = true, defaultPageSize = 10, pageSizeOptions = [10, 25, 50], sticky = false, loading = false, bulkActions = [], onRowOpen, rowActions, selectedIds, onSelectionChange, emptyTitle, emptyDescription, loadingLabel, openLabel, className, ...props }, ref) {
+    const t = useDiyaMessages('table', tableMessages);
+    const Heading = `h${headingLevel}`;
+    const ids = new Map();
+    rows.forEach((row, index) => ids.set(row, getRowId ? getRowId(row) : defaultRowId(row, index)));
+    const idOf = (row) => ids.get(row);
+    const [query, setQuery] = useState('');
+    const [filterValue, setFilterValue] = useState({});
+    const activeFilter = (key) => typeof filterValue[key] === 'string';
+    const showSearch = search ?? !!searchText;
+    const selection = selectable ?? (bulkActions.length > 0 || !!onSelectionChange || selectedIds !== undefined);
+    const filters = !!filterOptions?.length;
+    const optionsOf = (filter) => filter.options.map((option) => typeof option === 'string' ? { value: option, label: option } : option);
+    const [sort, setSort] = useState({ key: '', direction: 1 });
+    const [localSelected, setLocalSelected] = useState([]);
+    const selected = selectedIds ?? localSelected;
+    const showActions = !!(rowActions || bulkActions.length || onRowOpen);
+    function setSelection(ids) {
+        if (selectedIds === undefined)
+            setLocalSelected(ids);
+        onSelectionChange?.(ids);
+    }
+    function actionsFor(row) {
+        return (rowActions?.(row) ?? [
+            ...(onRowOpen ? [{ id: 'open', label: openLabel ?? t.open, onSelect: () => onRowOpen(row) }] : []),
+            ...bulkActions.map((action, index) => ({
+                id: `bulk-${index}`,
+                label: action.label,
+                destructive: action.destructive,
+                onSelect: () => action.onAction([idOf(row)]),
+            })),
+        ]);
+    }
+    const [page, setPage] = useState(1);
+    const [pageSize, setPageSize] = useState(defaultPageSize);
+    const matches = rows.filter((row) => (!showSearch || !searchText || searchText(row).toLowerCase().includes(query.trim().toLowerCase())) &&
+        (!filters ||
+            !filterOptions ||
+            filterOptions.every((item) => !activeFilter(item.key) || item.getValue(row) === filterValue[item.key])));
+    const sortColumn = columns.find((column) => column.key === sort.key);
+    if (sortColumn?.sortValue)
+        matches.sort((a, b) => {
+            const x = sortColumn.sortValue(a), y = sortColumn.sortValue(b);
+            return ((typeof x === 'number' && typeof y === 'number'
+                ? x - y
+                : String(x).localeCompare(String(y))) * sort.direction);
+        });
+    const current = Math.min(page, Math.max(1, Math.ceil(matches.length / pageSize)));
+    const visible = pagination ? matches.slice((current - 1) * pageSize, current * pageSize) : matches;
+    const activeSelection = selected.filter((id) => rows.some((row) => idOf(row) === id));
+    const allSelected = visible.length > 0 && visible.every((row) => selected.includes(idOf(row)));
+    const hasFilters = (showSearch && !!query.trim()) || (filters && filterOptions?.some(item => activeFilter(item.key)));
+    const someSelected = visible.some((row) => selected.includes(idOf(row)));
+    return (_jsxs("div", { ...props, ref: ref, className: cx('diya-table', className), "data-density": density, "data-sticky": sticky || undefined, "data-selection": selection || undefined, "data-rich": columns.length > 4 || undefined, children: [(showTitle || filters || showSearch) && _jsxs("div", { className: "diya-table-toolbar", children: [showTitle && _jsx(Heading, { className: "diya-table-title", children: label }), _jsxs("div", { className: "diya-table-tools", children: [filters && filterOptions && (_jsxs("div", { className: "diya-table-filters", children: [filterOptions.map((item) => (_jsx("div", { className: "diya-table-filter", "data-active": activeFilter(item.key) || undefined, children: _jsx(Menu, { disabled: loading, label: activeFilter(item.key) ? t.filterValue(item.label, optionsOf(item).find((option) => option.value === filterValue[item.key])?.label || t.noValue) : item.label, items: [
+                                                {
+                                                    id: 'all-values',
+                                                    label: t.all,
+                                                    type: 'radio',
+                                                    checked: !activeFilter(item.key),
+                                                    onSelect: () => {
+                                                        setFilterValue({ ...filterValue, [item.key]: null });
+                                                        setPage(1);
+                                                    },
+                                                },
+                                                ...optionsOf(item).map((option, index) => ({
+                                                    id: 'value-' + index,
+                                                    label: option.label || t.noValue,
+                                                    type: 'radio',
+                                                    checked: filterValue[item.key] === option.value,
+                                                    onSelect: () => {
+                                                        setFilterValue({ ...filterValue, [item.key]: option.value });
+                                                        setPage(1);
+                                                    },
+                                                })),
+                                            ] }) }, item.key))), filterOptions.some(item => activeFilter(item.key)) && (_jsx("button", { type: "button", className: "diya-table-clear", onClick: () => {
+                                            setFilterValue({});
+                                            setPage(1);
+                                        }, children: t.clearFilters }))] })), showSearch && (_jsx(Search, { disabled: loading, size: "small", label: t.searchLabel(label), hideLabel: true, placeholder: t.search, clearable: true, value: query, onValueChange: (value) => {
+                                    setQuery(value);
+                                    setPage(1);
+                                } }))] })] }), selection && activeSelection.length > 0 && (_jsxs("div", { className: "diya-table-bulk", children: [_jsx("span", { role: "status", children: t.selected(activeSelection.length) }), bulkActions.map((action, index) => (_jsx(Button, { size: "small", variant: "outline", disabled: loading, onClick: () => {
+                            action.onAction(activeSelection);
+                            setSelection([]);
+                        }, children: action.label }, `${index}-${action.label}`))), _jsx(Button, { size: "small", variant: "quiet", onClick: () => setSelection([]), children: t.clearSelection })] })), _jsx("div", { className: "diya-table-scroll", tabIndex: 0, role: "region", "aria-label": t.scrollHint(label), onFocus: (event) => {
+                    // Browsers leave a partly visible control where it is; bring it, and its focus ring, fully into view.
+                    const target = event.target;
+                    let keyboard = false;
+                    try {
+                        keyboard = target !== event.currentTarget && target.matches(':focus-visible');
+                    }
+                    catch { /* Older engines lack :focus-visible. */ }
+                    if (keyboard)
+                        target.scrollIntoView?.({ block: 'nearest', inline: 'nearest' });
+                }, children: _jsxs("table", { "aria-busy": loading, style: columns.length > 4
+                        ? {
+                            width: columns.reduce((sum, column) => sum + (column.width ?? 160), 0) +
+                                (selection ? 48 : 0) +
+                                (showActions ? 56 : 0),
+                            minWidth: '100%',
+                        }
+                        : undefined, children: [_jsxs("colgroup", { children: [selection && _jsx("col", { style: { width: 48 } }), columns.map((column) => (_jsx("col", { style: column.width ? { width: column.width } : undefined }, column.key))), showActions && _jsx("col", { style: { width: 56 } })] }), _jsx("caption", { className: "diya-sr-only", children: label }), _jsx("thead", { children: _jsxs("tr", { children: [selection && (_jsx("th", { className: "diya-table-check", "data-pinned": "selection", scope: "col", children: _jsx("input", { type: "checkbox", "aria-label": t.selectPage, checked: allSelected, disabled: loading || !visible.length, ref: (node) => {
+                                                if (node)
+                                                    node.indeterminate = someSelected && !allSelected;
+                                            }, onChange: () => setSelection(allSelected
+                                                ? selected.filter((id) => !visible.some((row) => idOf(row) === id))
+                                                : [...new Set([...selected, ...visible.map(idOf)])]) }) })), columns.map((column, columnIndex) => (_jsx("th", { scope: "col", "data-pinned": columnIndex === 0 ? 'primary' : undefined, className: column.numeric ? 'diya-table-numeric' : undefined, "aria-sort": column.sortValue
+                                            ? sort.key === column.key
+                                                ? sort.direction === 1
+                                                    ? 'ascending'
+                                                    : 'descending'
+                                                : 'none'
+                                            : undefined, children: column.sortValue ? (_jsxs("button", { type: "button", disabled: loading, className: "diya-table-sort", onClick: () => {
+                                                setSort({
+                                                    key: column.key,
+                                                    direction: sort.key === column.key && sort.direction === 1 ? -1 : 1,
+                                                });
+                                                setPage(1);
+                                            }, children: [column.label, _jsxs("svg", { width: "12", height: "14", viewBox: "0 0 12 14", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("path", { opacity: sort.key === column.key && sort.direction === -1 ? 0.25 : 1, d: "m3 5 3-3 3 3" }), _jsx("path", { opacity: sort.key === column.key && sort.direction === 1 ? 0.25 : 1, d: "m3 9 3 3 3-3" })] })] })) : (column.label) }, column.key))), showActions && (_jsx("th", { scope: "col", className: "diya-table-actions", children: _jsx("span", { className: "diya-sr-only", children: t.actions }) }))] }) }), _jsxs("tbody", { children: [loading
+                                    ? Array.from({ length: 5 }, (_, i) => (_jsx("tr", { children: Array.from({
+                                            length: columns.length +
+                                                Number(selection) +
+                                                Number(showActions),
+                                        }, (_, j) => (_jsx("td", { children: _jsx("span", { className: "diya-table-skeleton", "aria-hidden": "true" }) }, j))) }, i)))
+                                    : visible.map((row) => (_jsx(Fragment, { children: _jsxs("tr", { "data-selected": (selection && selected.includes(idOf(row))) || undefined, children: [selection && (_jsx("td", { className: "diya-table-check", "data-pinned": "selection", children: _jsx("input", { type: "checkbox", "aria-label": t.selectRow(rowLabel(row)), checked: selected.includes(idOf(row)), onChange: () => setSelection(selected.includes(idOf(row))
+                                                            ? selected.filter((id) => id !== idOf(row))
+                                                            : [...selected, idOf(row)]) }) })), columns.map((column, columnIndex) => (_jsx("td", { "data-pinned": columnIndex === 0 ? 'primary' : undefined, className: column.numeric ? 'diya-table-numeric' : undefined, children: column.render(row) }, column.key))), showActions && (_jsx("td", { className: "diya-table-actions", children: _jsx(Menu, { label: t.rowActions(rowLabel(row)), triggerIcon: _jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: [_jsx("circle", { cx: "5", cy: "12", r: "1.5" }), _jsx("circle", { cx: "12", cy: "12", r: "1.5" }), _jsx("circle", { cx: "19", cy: "12", r: "1.5" })] }), items: actionsFor(row) }) }))] }) }, idOf(row)))), !loading && !visible.length && (_jsx("tr", { children: _jsx("td", { colSpan: columns.length +
+                                            Number(selection) +
+                                            Number(showActions), children: _jsxs("div", { className: "diya-table-empty", children: [_jsx("strong", { children: hasFilters ? t.noMatches : emptyTitle ?? t.emptyTitle }), _jsx("p", { children: hasFilters ? t.noMatchesDescription : emptyDescription ?? t.emptyDescription }), hasFilters && (_jsx(Button, { variant: "outline", size: "small", onClick: () => {
+                                                        setQuery('');
+                                                        setFilterValue({});
+                                                        setPage(1);
+                                                    }, children: t.clearAll }))] }) }) }))] })] }) }), loading && (_jsx("p", { role: "status", className: "diya-table-loading", children: loadingLabel ?? t.loading })), pagination && !loading && (_jsx(Pagination, { page: current, total: matches.length, pageSize: pageSize, pageSizeOptions: pageSizeOptions, onPageChange: setPage, onPageSizeChange: (size) => {
+                    setPageSize(size);
+                    setPage(1);
+                } }))] }));
+});

package/dist/table/messages.d.ts

@@ -0,0 +1,23 @@
+/** table: English defaults, overridable through DiyaProvider `messages`. */
+export declare const tableMessages: {
+    loading: string;
+    emptyTitle: string;
+    emptyDescription: string;
+    noMatches: string;
+    noMatchesDescription: string;
+    clearAll: string;
+    clearFilters: string;
+    clearSelection: string;
+    selected: (count: number) => string;
+    search: string;
+    searchLabel: (label: string) => string;
+    filterValue: (filter: string, value: string) => string;
+    noValue: string;
+    all: string;
+    open: string;
+    actions: string;
+    rowActions: (row: string) => string;
+    selectPage: string;
+    selectRow: (row: string) => string;
+    scrollHint: (label: string) => string;
+};

package/dist/table/messages.js

@@ -0,0 +1,2 @@
+/** table: English defaults, overridable through DiyaProvider `messages`. */
+export const tableMessages = { loading: 'Loading…', emptyTitle: 'No data yet', emptyDescription: 'Items will appear here once they are added.', noMatches: 'No matching results', noMatchesDescription: 'Try another search or clear your filters.', clearAll: 'Clear search and filters', clearFilters: 'Clear filters', clearSelection: 'Clear selection', selected: (count) => `${count} selected`, search: 'Search', searchLabel: (label) => `Search ${label.toLowerCase()}`, filterValue: (filter, value) => `${filter}: ${value}`, noValue: 'No value', all: 'All', open: 'View details', actions: 'Actions', rowActions: (row) => `Actions for ${row}`, selectPage: 'Select this page', selectRow: (row) => `Select ${row}`, scrollHint: (label) => `${label}, scroll to see all columns` };

package/dist/tabs/Tabs.d.ts

@@ -0,0 +1,49 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type BadgeProps } from '../badge/Badge.js';
+export type TabItem = {
+    /** Unique key for the tab; `value` and `onValueChange` use it. */
+    value: string;
+    /** Visible tab text. */
+    label: string;
+    /** Decorative icon before the label; hidden from screen readers. */
+    icon?: ReactNode;
+    /** Small Badge after the label, such as an unread count; its `label` is the badge's accessible name. */
+    badge?: Omit<BadgeProps, 'size'>;
+    /** Skips this tab for clicks and arrow keys. */
+    disabled?: boolean;
+    /** Panel shown while this tab is selected. */
+    content: ReactNode;
+};
+export type TabsProps = HTMLAttributes<HTMLDivElement> & {
+    /** The tabs, in order. */
+    items: TabItem[];
+    /** `value` of the selected tab; falls back to the first enabled tab. */
+    value: string;
+    /** Called with a tab's `value` when it is clicked or reached with the arrow, Home or End keys. */
+    onValueChange: (value: string) => void;
+    /** Accessible name for the tab list; not shown. */
+    label: string;
+    /** 'underline' marks the selected tab with a line; 'pill' fills it. Defaults to 'underline'. */
+    variant?: 'underline' | 'pill';
+    /** Tab height and text size. Defaults to 'medium'. */
+    size?: 'small' | 'medium' | 'large';
+    /** Disables every tab. */
+    disabled?: boolean;
+};
+/** Tabs that switch between panels in place, with arrow-key navigation. The ref, `className`, `style` and other attributes go to the outer element. */
+export declare const Tabs: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    /** The tabs, in order. */
+    items: TabItem[];
+    /** `value` of the selected tab; falls back to the first enabled tab. */
+    value: string;
+    /** Called with a tab's `value` when it is clicked or reached with the arrow, Home or End keys. */
+    onValueChange: (value: string) => void;
+    /** Accessible name for the tab list; not shown. */
+    label: string;
+    /** 'underline' marks the selected tab with a line; 'pill' fills it. Defaults to 'underline'. */
+    variant?: "underline" | "pill";
+    /** Tab height and text size. Defaults to 'medium'. */
+    size?: "small" | "medium" | "large";
+    /** Disables every tab. */
+    disabled?: boolean;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/tabs/Tabs.js

@@ -0,0 +1,26 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId, useRef } from 'react';
+import { Badge } from '../badge/Badge.js';
+import { cx } from '../internal/cx.js';
+/** Tabs that switch between panels in place, with arrow-key navigation. The ref, `className`, `style` and other attributes go to the outer element. */
+export const Tabs = forwardRef(function Tabs({ items, value, onValueChange, label, variant = 'underline', size = 'medium', disabled = false, className, ...props }, ref) {
+    const id = useId();
+    const buttons = useRef([]);
+    const selected = items.findIndex((item) => item.value === value && !item.disabled);
+    const active = selected >= 0 ? selected : items.findIndex((item) => !item.disabled);
+    function navigate(event, index) {
+        if (!['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key))
+            return;
+        event.preventDefault();
+        const available = items.map((item, i) => !item.disabled ? i : -1).filter((i) => i >= 0);
+        if (!available.length)
+            return;
+        const position = available.indexOf(index);
+        const next = event.key === 'Home' ? available[0] : event.key === 'End' ? available[available.length - 1]
+            : available[(position + (event.key === 'ArrowRight' ? 1 : -1) + available.length) % available.length];
+        buttons.current[next]?.focus();
+        onValueChange(items[next].value);
+    }
+    return (_jsxs("div", { ...props, ref: ref, className: cx('diya-tabs', className), "data-variant": variant, "data-size": size, children: [_jsx("div", { className: "diya-tab-list", role: "tablist", "aria-label": label, "aria-orientation": "horizontal", children: items.map((item, index) => (_jsxs("button", { ref: (node) => { buttons.current[index] = node; }, className: "diya-tab", type: "button", role: "tab", id: `${id}-tab-${index}`, "aria-controls": `${id}-panel-${index}`, "aria-selected": index === active, tabIndex: index === active && !disabled ? 0 : -1, disabled: disabled || item.disabled, onClick: () => onValueChange(item.value), onKeyDown: (event) => navigate(event, index), children: [item.icon && _jsx("span", { className: "diya-tab-icon", "aria-hidden": "true", children: item.icon }), _jsx("span", { children: item.label }), item.badge && _jsx(Badge, { ...item.badge, size: "small" })] }, item.value))) }), items.map((item, index) => (_jsx("div", { className: "diya-tab-panel", role: "tabpanel", id: `${id}-panel-${index}`, "aria-labelledby": `${id}-tab-${index}`, hidden: index !== active, tabIndex: 0, children: item.content }, item.value)))] }));
+});

package/dist/tag/Tag.d.ts

@@ -0,0 +1,37 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type Tone } from '../badge/Badge.js';
+import { tagMessages } from './messages.js';
+declare module '../messages.js' {
+    interface DiyaMessages {
+        tag: typeof tagMessages;
+    }
+}
+export type TagProps = HTMLAttributes<HTMLSpanElement> & {
+    /** Visible tag text. */
+    children: ReactNode;
+    /** 'dot' shows a small dot in the tag's tone; any other node is a decorative icon. Both are hidden from screen readers. */
+    leading?: 'dot' | ReactNode;
+    /** Color meaning: 'neutral' plain, 'brand' a soft tint of your brand color, 'success' done, 'warning' needs care, 'error' failed, 'info' for information. Defaults to 'neutral'. */
+    tone?: Tone;
+    /** Tag height and text size. Defaults to 'medium'. */
+    size?: 'small' | 'medium' | 'large';
+    /** When given, shows a remove button that calls it. */
+    onRemove?: () => void;
+    /** Plain-text name for the tag, not shown; the remove button is announced as "Remove {label}". Defaults to the text of `children`. */
+    label?: string;
+};
+/** A compact label for a category, status or filter, optionally removable. */
+export declare const Tag: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & {
+    /** Visible tag text. */
+    children: ReactNode;
+    /** 'dot' shows a small dot in the tag's tone; any other node is a decorative icon. Both are hidden from screen readers. */
+    leading?: "dot" | ReactNode;
+    /** Color meaning: 'neutral' plain, 'brand' a soft tint of your brand color, 'success' done, 'warning' needs care, 'error' failed, 'info' for information. Defaults to 'neutral'. */
+    tone?: Tone;
+    /** Tag height and text size. Defaults to 'medium'. */
+    size?: "small" | "medium" | "large";
+    /** When given, shows a remove button that calls it. */
+    onRemove?: () => void;
+    /** Plain-text name for the tag, not shown; the remove button is announced as "Remove {label}". Defaults to the text of `children`. */
+    label?: string;
+} & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/tag/Tag.js

@@ -0,0 +1,20 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, forwardRef, isValidElement } from 'react';
+import { useDiyaMessages } from '../DiyaProvider.js';
+import { Badge } from '../badge/Badge.js';
+import { cx } from '../internal/cx.js';
+import { tagMessages } from './messages.js';
+/** The plain text inside a node tree, such as "Design" from <strong>Design</strong>. */
+function textOf(node) {
+    return Children.toArray(node)
+        .map((child) => (typeof child === 'string' || typeof child === 'number' ? String(child) : isValidElement(child) ? textOf(child.props.children) : ''))
+        .join('')
+        .trim();
+}
+/** A compact label for a category, status or filter, optionally removable. */
+export const Tag = forwardRef(function Tag({ children, leading, tone = 'neutral', size = 'medium', onRemove, label, className, ...props }, ref) {
+    const t = useDiyaMessages('tag', tagMessages);
+    const name = label ?? textOf(children);
+    return _jsxs("span", { ...props, ref: ref, className: cx('diya-tag', className), "data-size": size, "data-color": tone, children: [leading === 'dot' ? _jsx("span", { "aria-hidden": "true", children: _jsx(Badge, { variant: "dot", tone: tone, label: name }) }) : leading && _jsx("span", { className: "diya-tag-icon", "aria-hidden": "true", children: leading }), _jsx("span", { children: children }), onRemove && _jsx("button", { type: "button", "aria-label": t.remove(name), onClick: onRemove, children: _jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", "aria-hidden": "true", children: _jsx("path", { d: "m6 6 12 12M18 6 6 18" }) }) })] });
+});

package/dist/tag/messages.d.ts

@@ -0,0 +1,4 @@
+/** tag: English defaults, overridable through DiyaProvider `messages`. */
+export declare const tagMessages: {
+    remove: (label: string) => string;
+};

package/dist/tag/messages.js

@@ -0,0 +1,2 @@
+/** tag: English defaults, overridable through DiyaProvider `messages`. */
+export const tagMessages = { remove: (label) => `Remove ${label}` };

package/dist/text-area/TextArea.d.ts

@@ -0,0 +1,47 @@
+import { type TextareaHTMLAttributes } from 'react';
+/** Native textarea attributes, including `name`, `onChange`, `onBlur` and the ref, go on the textarea; `className` and `style` go on the outer field wrapper. */
+export type TextAreaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'defaultValue'> & {
+    /** Visible label above the textarea; also its accessible name. Hide it with hideLabel. */
+    label: string;
+    /** Hides the label visually but keeps it as the textarea's accessible name. */
+    hideLabel?: boolean;
+    /** Visible hint below the textarea, announced with it; `error` replaces it while set. */
+    helperText?: string;
+    /** Visible error message below the textarea; marks the field invalid while set. */
+    error?: string;
+    /** Type size and padding; defaults to 'medium'. */
+    size?: 'small' | 'medium' | 'large';
+    /** The current text when controlled; pair it with `onValueChange`. */
+    value?: string;
+    /** The starting text when uncontrolled; a form reset returns to it. */
+    defaultValue?: string;
+    /** Called with the new text on every edit. */
+    onValueChange?: (value: string) => void;
+    /** Shows a visible character count below the textarea, as "n / maxLength" when maxLength is set. */
+    showCount?: boolean;
+    /** Lets people drag the textarea taller; defaults to true. */
+    resizable?: boolean;
+};
+/** A multi-line labeled text field with optional helper text, error and character count. */
+export declare const TextArea: import("react").ForwardRefExoticComponent<Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "value" | "defaultValue"> & {
+    /** Visible label above the textarea; also its accessible name. Hide it with hideLabel. */
+    label: string;
+    /** Hides the label visually but keeps it as the textarea's accessible name. */
+    hideLabel?: boolean;
+    /** Visible hint below the textarea, announced with it; `error` replaces it while set. */
+    helperText?: string;
+    /** Visible error message below the textarea; marks the field invalid while set. */
+    error?: string;
+    /** Type size and padding; defaults to 'medium'. */
+    size?: "small" | "medium" | "large";
+    /** The current text when controlled; pair it with `onValueChange`. */
+    value?: string;
+    /** The starting text when uncontrolled; a form reset returns to it. */
+    defaultValue?: string;
+    /** Called with the new text on every edit. */
+    onValueChange?: (value: string) => void;
+    /** Shows a visible character count below the textarea, as "n / maxLength" when maxLength is set. */
+    showCount?: boolean;
+    /** Lets people drag the textarea taller; defaults to true. */
+    resizable?: boolean;
+} & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/text-area/TextArea.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId, useRef } from 'react';
+import { cx } from '../internal/cx.js';
+import { useFormReset, useMergedRef, useNativeMirror } from '../text-input/native-field.js';
+/** A multi-line labeled text field with optional helper text, error and character count. */
+export const TextArea = forwardRef(function TextArea({ label, hideLabel = false, helperText, error, size = 'medium', value, defaultValue, onValueChange, onChange, showCount, resizable = true, id, maxLength, className, style, 'aria-invalid': ariaInvalid, 'aria-describedby': describedBy, ...props }, ref) {
+    const generatedId = useId();
+    const inputId = id ?? generatedId;
+    const description = error || helperText;
+    const textarea = useRef(null);
+    const textareaRef = useMergedRef(ref, textarea);
+    const controlled = value !== undefined;
+    const [current, sync] = useNativeMirror(() => textarea.current?.value, value ?? defaultValue ?? '');
+    useFormReset(textarea, sync);
+    const text = controlled ? value : current;
+    return _jsxs("div", { className: cx('diya-text-field diya-textarea', className), style: style, "data-size": size, "data-invalid": !!error, "data-disabled": props.disabled, children: [_jsx("label", { htmlFor: inputId, className: hideLabel ? 'diya-sr-only' : undefined, children: label }), _jsx("textarea", { ...props, ref: textareaRef, id: inputId, ...(controlled ? { value } : { defaultValue }), maxLength: maxLength, onChange: (event) => { onChange?.(event); if (!controlled)
+                    sync(); onValueChange?.(event.target.value); }, "aria-invalid": error ? true : ariaInvalid, "aria-describedby": [describedBy, description ? `${inputId}-description` : undefined, showCount ? `${inputId}-count` : undefined].filter(Boolean).join(' ') || undefined, style: { resize: resizable ? 'vertical' : 'none' } }), _jsxs("div", { className: "diya-textarea-footer", children: [description && _jsxs("p", { className: "diya-text-field-description", id: `${inputId}-description`, children: [error && _jsx("span", { "aria-hidden": "true", children: "!" }), description] }), showCount && _jsxs("span", { className: "diya-textarea-count", id: `${inputId}-count`, children: [text.length, maxLength ? ` / ${maxLength}` : ''] })] })] });
+});