@inkra/react 0.0.0-stage → 0.2.0

package/dist/context-menu/index.js

@@ -0,0 +1,240 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as Primitive from '@radix-ui/react-dropdown-menu';
+import { createContext, forwardRef, useCallback, useContext, useEffect, useId, useMemo, useRef, useState, } from 'react';
+import { DropdownMenu } from '../dropdown-menu/index.js';
+import { PencilIcon } from '../PencilIcon.js';
+import { PencilSurface } from '../PencilSurface.js';
+import { PencilText } from '../PencilText.js';
+import { PortalThemeBridge, PortalThemeProvider, usePortalTriggerRef, } from '../overlay/themeBridge.js';
+const DEFAULT_EXCLUDE = '[data-context-menu-native]';
+const DEFAULT_LONG_PRESS_DELAY = 600;
+const DEFAULT_LONG_PRESS_TOLERANCE = 10;
+const submenuPaths = [{ d: 'm9 18 6-6-6-6' }];
+const classes = (...values) => values.filter(Boolean).join(' ');
+const ContextMenuContext = createContext(null);
+const ContextMenuAnchor = forwardRef(function ContextMenuAnchor({ type: _type, ...props }, ref) {
+    return _jsx("span", { ...props, ref: ref });
+});
+function useContextMenuContext(component) {
+    const context = useContext(ContextMenuContext);
+    if (!context)
+        throw new Error(`${component} must be used inside ContextMenu.Root.`);
+    return context;
+}
+function viewportPoint(point) {
+    if (typeof window === 'undefined')
+        return point;
+    return {
+        x: Math.max(0, Math.min(point.x, window.innerWidth)),
+        y: Math.max(0, Math.min(point.y, window.innerHeight)),
+    };
+}
+export function ContextMenuRoot({ children, defaultOpen = false, dir, modal = true, onOpenChange, open, }) {
+    const controlled = open !== undefined;
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+    const [point, setPoint] = useState({ x: 0, y: 0 });
+    const [positioned, setPositioned] = useState(false);
+    const [anchorVersion, setAnchorVersion] = useState(0);
+    const targetRef = useRef(null);
+    const currentOpen = controlled ? open : uncontrolledOpen;
+    const changeOpen = useCallback((nextOpen, details) => {
+        if (!controlled)
+            setUncontrolledOpen(nextOpen);
+        onOpenChange?.(nextOpen, details);
+    }, [controlled, onOpenChange]);
+    const openAt = useCallback((nextPoint, reason, event) => {
+        setPoint(viewportPoint(nextPoint));
+        setPositioned(true);
+        setAnchorVersion(version => version + 1);
+        changeOpen(true, { reason, event });
+    }, [changeOpen]);
+    const restoreFocus = useCallback(() => {
+        const target = targetRef.current;
+        if (!target || typeof target.focus !== 'function')
+            return;
+        target.focus({ preventScroll: true });
+    }, []);
+    useEffect(() => {
+        if (!currentOpen || positioned)
+            return;
+        const rect = targetRef.current?.getBoundingClientRect();
+        if (!rect)
+            return;
+        setPoint(viewportPoint({ x: rect.left, y: rect.bottom }));
+        setPositioned(true);
+    }, [currentOpen, positioned]);
+    const context = useMemo(() => ({
+        openAt,
+        restoreFocus,
+        setTarget: target => { targetRef.current = target; },
+    }), [openAt, restoreFocus]);
+    return (_jsx(PortalThemeProvider, { children: _jsx(ContextMenuContext.Provider, { value: context, children: _jsxs(Primitive.Root, { dir: dir, modal: modal, open: currentOpen, onOpenChange: nextOpen => changeOpen(nextOpen, { reason: 'dismiss' }), children: [children, _jsx(Primitive.Trigger, { asChild: true, children: _jsx(ContextMenuAnchor, { "aria-hidden": "true", className: "inkra-context-menu__anchor", style: { left: point.x, top: point.y } }) }, anchorVersion)] }) }) }));
+}
+function hasTextSelectionWithin(element) {
+    if (typeof window === 'undefined')
+        return false;
+    const selection = window.getSelection();
+    if (!selection || selection.isCollapsed)
+        return false;
+    return Boolean((selection.anchorNode && element.contains(selection.anchorNode))
+        || (selection.focusNode && element.contains(selection.focusNode)));
+}
+function isEditableTarget(target) {
+    return Boolean(target.closest('input, textarea, select, [contenteditable]:not([contenteditable="false"])'));
+}
+function matchesExclusion(exclude, target, currentTarget) {
+    if (typeof exclude === 'function')
+        return exclude(target, currentTarget);
+    if (!exclude)
+        return false;
+    try {
+        return Boolean(target.closest(exclude));
+    }
+    catch {
+        return false;
+    }
+}
+function shouldUseNativeMenu(policy, target, currentTarget, exclude) {
+    if (matchesExclusion(exclude, target, currentTarget))
+        return true;
+    if (policy === 'always')
+        return true;
+    if (policy === 'never')
+        return false;
+    return isEditableTarget(target) || hasTextSelectionWithin(currentTarget);
+}
+function composeHandler(supplied, owned) {
+    return (event) => {
+        supplied?.(event);
+        const maybePrevented = event;
+        if (!maybePrevented.defaultPrevented)
+            owned(event);
+    };
+}
+export const ContextMenuTrigger = forwardRef(function ContextMenuTrigger({ as: Component = 'div', children, disabled = false, exclude = DEFAULT_EXCLUDE, longPress = false, nativeContextMenu = 'editable', onContextMenu, onKeyDown, onPointerCancel, onPointerDown, onPointerLeave, onPointerMove, onPointerUp, tabIndex, ...props }, forwardedRef) {
+    const context = useContextMenuContext('ContextMenu.Trigger');
+    const longPressTimer = useRef(null);
+    const startPoint = useRef(null);
+    const pointerType = useRef('');
+    const suppressContextMenuUntil = useRef(0);
+    const { setTarget } = context;
+    const captureTarget = useCallback((node) => {
+        setTarget(node);
+        if (typeof forwardedRef === 'function')
+            forwardedRef(node);
+        else if (forwardedRef)
+            forwardedRef.current = node;
+    }, [forwardedRef, setTarget]);
+    const targetRef = usePortalTriggerRef(captureTarget);
+    const longPressOptions = typeof longPress === 'object' ? longPress : {};
+    const longPressEnabled = Boolean(longPress);
+    const delay = Math.max(300, longPressOptions.delay ?? DEFAULT_LONG_PRESS_DELAY);
+    const tolerance = Math.max(4, longPressOptions.movementTolerance ?? DEFAULT_LONG_PRESS_TOLERANCE);
+    useEffect(() => () => {
+        if (longPressTimer.current)
+            clearTimeout(longPressTimer.current);
+    }, []);
+    const cancelLongPress = () => {
+        if (longPressTimer.current)
+            clearTimeout(longPressTimer.current);
+        longPressTimer.current = null;
+        startPoint.current = null;
+    };
+    const openFromKeyboard = (event) => {
+        if (disabled || (event.key !== 'ContextMenu' && !(event.shiftKey && event.key === 'F10')))
+            return;
+        const target = event.target instanceof Element ? event.target : event.currentTarget;
+        if (shouldUseNativeMenu(nativeContextMenu, target, event.currentTarget, exclude))
+            return;
+        event.preventDefault();
+        context.setTarget(event.currentTarget);
+        const rect = event.currentTarget.getBoundingClientRect();
+        context.openAt({ x: rect.left, y: rect.bottom }, 'keyboard', event.nativeEvent);
+    };
+    const openFromPointer = (event) => {
+        if (disabled)
+            return;
+        const target = event.target instanceof Element ? event.target : event.currentTarget;
+        if (pointerType.current === 'touch' && !longPressEnabled)
+            return;
+        if (shouldUseNativeMenu(nativeContextMenu, target, event.currentTarget, exclude))
+            return;
+        event.preventDefault();
+        cancelLongPress();
+        if (Date.now() < suppressContextMenuUntil.current)
+            return;
+        context.setTarget(event.currentTarget);
+        context.openAt({ x: event.clientX, y: event.clientY }, 'pointer', event.nativeEvent);
+    };
+    const startLongPress = (event) => {
+        pointerType.current = event.pointerType;
+        if (!longPressEnabled || disabled || (event.pointerType !== 'touch' && event.pointerType !== 'pen'))
+            return;
+        const target = event.target instanceof Element ? event.target : event.currentTarget;
+        if (shouldUseNativeMenu(nativeContextMenu, target, event.currentTarget, exclude))
+            return;
+        cancelLongPress();
+        startPoint.current = { x: event.clientX, y: event.clientY };
+        const nativeEvent = event.nativeEvent;
+        const currentTarget = event.currentTarget;
+        const pressPoint = { x: event.clientX, y: event.clientY };
+        longPressTimer.current = setTimeout(() => {
+            longPressTimer.current = null;
+            if (hasTextSelectionWithin(currentTarget))
+                return;
+            suppressContextMenuUntil.current = Date.now() + 1000;
+            context.setTarget(currentTarget);
+            context.openAt(pressPoint, 'long-press', nativeEvent);
+        }, delay);
+    };
+    const trackLongPress = (event) => {
+        if (!startPoint.current || !longPressTimer.current)
+            return;
+        const distance = Math.hypot(event.clientX - startPoint.current.x, event.clientY - startPoint.current.y);
+        if (distance > tolerance)
+            cancelLongPress();
+    };
+    return (_jsx(Component, { ...props, "aria-disabled": disabled || undefined, "data-context-menu-trigger": "", ref: targetRef, tabIndex: disabled ? -1 : (tabIndex ?? 0), onContextMenu: composeHandler(onContextMenu, openFromPointer), onKeyDown: composeHandler(onKeyDown, openFromKeyboard), onPointerCancel: composeHandler(onPointerCancel, cancelLongPress), onPointerDown: composeHandler(onPointerDown, startLongPress), onPointerLeave: composeHandler(onPointerLeave, cancelLongPress), onPointerMove: composeHandler(onPointerMove, trackLongPress), onPointerUp: composeHandler(onPointerUp, cancelLongPress), children: children }));
+});
+export const ContextMenuPortal = DropdownMenu.Portal;
+export const ContextMenuContent = forwardRef(function ContextMenuContent({ align = 'start', onCloseAutoFocus, side = 'right', sideOffset = 2, ...props }, ref) {
+    const context = useContextMenuContext('ContextMenu.Content');
+    return (_jsx(DropdownMenu.Content, { ...props, align: align, ref: ref, side: side, sideOffset: sideOffset, onCloseAutoFocus: event => {
+            onCloseAutoFocus?.(event);
+            if (event.defaultPrevented)
+                return;
+            event.preventDefault();
+            context.restoreFocus();
+        } }));
+});
+export const ContextMenuItem = DropdownMenu.Item;
+export const ContextMenuCheckboxItem = DropdownMenu.CheckboxItem;
+export const ContextMenuRadioItem = DropdownMenu.RadioItem;
+export const ContextMenuLabel = DropdownMenu.Label;
+export const ContextMenuSeparator = DropdownMenu.Separator;
+export const ContextMenuGroup = DropdownMenu.Group;
+export const ContextMenuRadioGroup = DropdownMenu.RadioGroup;
+export const ContextMenuSub = Primitive.Sub;
+export const ContextMenuSubTrigger = forwardRef(function ContextMenuSubTrigger({ children, className, icon, ...props }, ref) {
+    return (_jsxs(Primitive.SubTrigger, { ...props, className: classes('inkra-menu__item', 'inkra-context-menu__sub-trigger', className), ref: ref, children: [_jsx(PencilSurface, { as: "span", "aria-hidden": "true", variant: "selection", className: "inkra-menu__highlight" }), _jsx("span", { className: "inkra-menu__icon", "aria-hidden": "true", children: icon }), _jsx("span", { className: "inkra-menu__label", children: typeof children === 'string' ? _jsx(PencilText, { children: children }) : children }), _jsx("span", { "aria-hidden": "true", className: "inkra-context-menu__sub-indicator", children: _jsx(PencilIcon, { decorative: true, paths: submenuPaths, size: 16, sourceSize: 24 }) })] }));
+});
+export const ContextMenuSubContent = forwardRef(function ContextMenuSubContent({ children, className, collisionPadding = 8, seed, sideOffset = 4, ...props }, ref) {
+    const id = useId();
+    return (_jsx(Primitive.Portal, { children: _jsx(PortalThemeBridge, { children: _jsx(Primitive.SubContent, { ...props, className: classes('inkra-menu', 'inkra-context-menu__sub-content', className), collisionPadding: collisionPadding, ref: ref, sideOffset: sideOffset, children: _jsx(PencilSurface, { className: "inkra-menu__paper", radius: 8, seed: seed ?? `context-submenu-${id}`, variant: "paper", children: children }) }) }) }));
+});
+export const ContextMenu = Object.freeze({
+    Root: ContextMenuRoot,
+    Trigger: ContextMenuTrigger,
+    Portal: ContextMenuPortal,
+    Content: ContextMenuContent,
+    Item: ContextMenuItem,
+    CheckboxItem: ContextMenuCheckboxItem,
+    RadioItem: ContextMenuRadioItem,
+    Label: ContextMenuLabel,
+    Separator: ContextMenuSeparator,
+    Group: ContextMenuGroup,
+    RadioGroup: ContextMenuRadioGroup,
+    Sub: ContextMenuSub,
+    SubTrigger: ContextMenuSubTrigger,
+    SubContent: ContextMenuSubContent,
+});

package/dist/data-table/index.d.ts

@@ -0,0 +1,47 @@
+import type { ColumnDef, OnChangeFn, PaginationState, Row, RowSelectionState, SortingState, TableOptions } from '@tanstack/react-table';
+import type { HTMLAttributes, ReactNode } from 'react';
+export type DataTableColumnDef<TData, TValue = unknown> = ColumnDef<TData, TValue>;
+export type DataTableSortingState = SortingState;
+export type DataTablePaginationState = PaginationState;
+export type DataTableRowSelectionState = RowSelectionState;
+export interface DataTableProps<TData> extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    data: TData[];
+    columns: DataTableColumnDef<TData>[];
+    getRowId: NonNullable<TableOptions<TData>['getRowId']>;
+    caption?: ReactNode;
+    density?: 'compact' | 'comfortable';
+    layout?: 'auto' | 'fixed';
+    striped?: boolean;
+    hoverable?: boolean;
+    stickyHeader?: boolean;
+    captionSide?: 'top' | 'bottom';
+    filterable?: boolean;
+    filterLabel?: string;
+    filterPlaceholder?: string;
+    globalFilter?: string;
+    defaultGlobalFilter?: string;
+    onGlobalFilterChange?: (value: string) => void;
+    sorting?: SortingState;
+    defaultSorting?: SortingState;
+    onSortingChange?: OnChangeFn<SortingState>;
+    pagination?: boolean;
+    paginationState?: PaginationState;
+    defaultPagination?: PaginationState;
+    onPaginationChange?: OnChangeFn<PaginationState>;
+    selectable?: boolean;
+    rowSelection?: RowSelectionState;
+    defaultRowSelection?: RowSelectionState;
+    onRowSelectionChange?: OnChangeFn<RowSelectionState>;
+    getRowCanSelect?: (row: Row<TData>) => boolean;
+    loading?: boolean;
+    loadingMessage?: ReactNode;
+    emptyMessage?: ReactNode;
+    selectAllLabel?: string;
+    selectRowLabel?: (row: Row<TData>) => string;
+    previousPageLabel?: string;
+    nextPageLabel?: string;
+    paginationLabel?: string;
+    pageLabel?: (page: number, pageCount: number) => ReactNode;
+    sortStatusLabel?: (columnId: string, direction: false | 'asc' | 'desc') => string;
+}
+export declare function DataTable<TData>({ data, columns, getRowId, caption, density, layout, striped, hoverable, stickyHeader, captionSide, filterable, filterLabel, filterPlaceholder, globalFilter, defaultGlobalFilter, onGlobalFilterChange, sorting, defaultSorting, onSortingChange, pagination, paginationState, defaultPagination, onPaginationChange, selectable, rowSelection, defaultRowSelection, onRowSelectionChange, getRowCanSelect, loading, loadingMessage, emptyMessage, selectAllLabel, selectRowLabel, previousPageLabel, nextPageLabel, paginationLabel, pageLabel, sortStatusLabel, className, ...props }: DataTableProps<TData>): import("react").JSX.Element;

package/dist/data-table/index.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { flexRender, functionalUpdate, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable, } from '@tanstack/react-table';
+import { useEffect, useState } from 'react';
+import { Button } from '../Button.js';
+import { PencilIcon } from '../PencilIcon.js';
+import { Input } from '../form/Input.js';
+import { Table } from '../content/index.js';
+import { Checkbox } from '../selection/Checkbox.js';
+const sortIcon = [{ d: 'M 8 10 L 12 6 L 16 10 M 8 14 L 12 18 L 16 14' }];
+const previousIcon = [{ d: 'M 14 7 L 9 12 L 14 17' }];
+const nextIcon = [{ d: 'M 10 7 L 15 12 L 10 17' }];
+function classes(...values) {
+    return values.filter(Boolean).join(' ');
+}
+function resolve(updater, current) {
+    return functionalUpdate(updater, current);
+}
+function SelectionCheckbox(props) {
+    return _jsx(Checkbox, { className: "inkra-data-table__selection", checked: props.checked, indeterminate: props.indeterminate, disabled: props.disabled, label: _jsx("span", { className: "inkra-visually-hidden", children: props.label }), onCheckedChange: props.onChange });
+}
+export function DataTable({ data, columns, getRowId, caption, density = 'comfortable', layout = 'auto', striped = false, hoverable = true, stickyHeader = false, captionSide = 'top', filterable = false, filterLabel = 'Filter rows', filterPlaceholder = 'Filter rows', globalFilter, defaultGlobalFilter = '', onGlobalFilterChange, sorting, defaultSorting = [], onSortingChange, pagination = false, paginationState, defaultPagination = { pageIndex: 0, pageSize: 10 }, onPaginationChange, selectable = false, rowSelection, defaultRowSelection = {}, onRowSelectionChange, getRowCanSelect, loading = false, loadingMessage = 'Loading rows', emptyMessage = 'No rows', selectAllLabel = 'Select all rows on this page', selectRowLabel = row => `Select row ${row.id}`, previousPageLabel = 'Previous page', nextPageLabel = 'Next page', paginationLabel = 'Table pagination', pageLabel = (page, pageCount) => `Page ${page} of ${pageCount}`, sortStatusLabel = (columnId, direction) => direction === 'asc' ? `${columnId}: sorted ascending` : direction === 'desc' ? `${columnId}: sorted descending` : `${columnId}: not sorted`, className, ...props }) {
+    const [internalFilter, setInternalFilter] = useState(defaultGlobalFilter);
+    const [internalSorting, setInternalSorting] = useState(defaultSorting);
+    const [internalPagination, setInternalPagination] = useState(defaultPagination);
+    const [internalSelection, setInternalSelection] = useState(defaultRowSelection);
+    const resolvedFilter = globalFilter ?? internalFilter;
+    const resolvedSorting = sorting ?? internalSorting;
+    const resolvedPagination = paginationState ?? internalPagination;
+    const resolvedSelection = rowSelection ?? internalSelection;
+    const handleSorting = updater => {
+        if (sorting === undefined)
+            setInternalSorting(current => resolve(updater, current));
+        onSortingChange?.(updater);
+    };
+    const handlePagination = updater => {
+        if (paginationState === undefined)
+            setInternalPagination(current => resolve(updater, current));
+        onPaginationChange?.(updater);
+    };
+    const handleSelection = updater => {
+        if (rowSelection === undefined)
+            setInternalSelection(current => resolve(updater, current));
+        onRowSelectionChange?.(updater);
+    };
+    const handleFilter = (value) => {
+        if (globalFilter === undefined)
+            setInternalFilter(value);
+        onGlobalFilterChange?.(value);
+        if (pagination && resolvedPagination.pageIndex !== 0)
+            handlePagination(current => ({ ...current, pageIndex: 0 }));
+    };
+    const table = useReactTable({
+        data,
+        columns,
+        getRowId,
+        state: {
+            globalFilter: resolvedFilter,
+            sorting: resolvedSorting,
+            pagination: resolvedPagination,
+            rowSelection: resolvedSelection,
+        },
+        onGlobalFilterChange: updater => handleFilter(resolve(updater, resolvedFilter)),
+        onSortingChange: handleSorting,
+        onPaginationChange: handlePagination,
+        onRowSelectionChange: handleSelection,
+        enableRowSelection: selectable ? getRowCanSelect ?? true : false,
+        getCoreRowModel: getCoreRowModel(),
+        getFilteredRowModel: getFilteredRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+        getPaginationRowModel: pagination ? getPaginationRowModel() : undefined,
+    });
+    const rows = table.getRowModel().rows;
+    const filteredRowCount = table.getPrePaginationRowModel().rows.length;
+    const pageCount = Math.max(1, table.getPageCount());
+    const visibleColumnCount = Math.max(1, table.getVisibleLeafColumns().length + (selectable ? 1 : 0));
+    const hasSelectableRows = rows.some(row => row.getCanSelect());
+    useEffect(() => {
+        if (!pagination)
+            return;
+        const lastPageIndex = Math.max(0, Math.ceil(filteredRowCount / resolvedPagination.pageSize) - 1);
+        if (resolvedPagination.pageIndex <= lastPageIndex)
+            return;
+        const next = { ...resolvedPagination, pageIndex: lastPageIndex };
+        if (paginationState === undefined)
+            setInternalPagination(next);
+        onPaginationChange?.(next);
+    }, [filteredRowCount, onPaginationChange, pagination, paginationState, resolvedPagination]);
+    return _jsxs("div", { ...props, className: classes('inkra-data-table', className), "data-loading": loading || undefined, children: [filterable && _jsx("div", { className: "inkra-data-table__toolbar", children: _jsxs("label", { className: "inkra-data-table__filter", children: [_jsx("span", { children: filterLabel }), _jsx(Input, { type: "search", value: resolvedFilter, placeholder: filterPlaceholder, onChange: event => handleFilter(event.currentTarget.value) })] }) }), _jsx(Table.Container, { className: "inkra-data-table__container", children: _jsxs(Table.Root, { density: density, layout: layout, striped: striped, hoverable: hoverable, stickyHeader: stickyHeader, captionSide: captionSide, children: [caption != null && _jsx(Table.Caption, { children: caption }), _jsx(Table.Header, { children: table.getHeaderGroups().map(headerGroup => _jsxs(Table.Row, { children: [selectable && _jsx(Table.Head, { className: "inkra-data-table__select-cell", children: _jsx(SelectionCheckbox, { checked: pagination ? table.getIsAllPageRowsSelected() : table.getIsAllRowsSelected(), indeterminate: pagination ? table.getIsSomePageRowsSelected() : table.getIsSomeRowsSelected(), label: selectAllLabel, disabled: loading || !hasSelectableRows, onChange: checked => pagination ? table.toggleAllPageRowsSelected(checked) : table.toggleAllRowsSelected(checked) }) }), headerGroup.headers.map(header => _jsx(Table.Head, { colSpan: header.colSpan, "aria-sort": header.column.getIsSorted() === 'asc' ? 'ascending' : header.column.getIsSorted() === 'desc' ? 'descending' : header.column.getCanSort() ? 'none' : undefined, children: header.isPlaceholder ? null : header.column.getCanSort() ? _jsxs("button", { type: "button", className: "inkra-data-table__sort", "data-sorted": header.column.getIsSorted() || undefined, onClick: header.column.getToggleSortingHandler(), children: [_jsx("span", { children: flexRender(header.column.columnDef.header, header.getContext()) }), _jsx(PencilIcon, { "aria-hidden": "true", paths: sortIcon, size: 18, sourceSize: 24, active: Boolean(header.column.getIsSorted()) }), _jsx("span", { className: "inkra-visually-hidden", children: sortStatusLabel(header.column.id, header.column.getIsSorted()) })] }) : flexRender(header.column.columnDef.header, header.getContext()) }, header.id))] }, headerGroup.id)) }), _jsx(Table.Body, { children: loading ? _jsx(Table.Row, { children: _jsx(Table.Cell, { colSpan: visibleColumnCount, children: _jsx("div", { className: "inkra-data-table__state", role: "status", children: loadingMessage }) }) })
+                                : rows.length === 0 ? _jsx(Table.Row, { children: _jsx(Table.Cell, { colSpan: visibleColumnCount, children: _jsx("div", { className: "inkra-data-table__state", children: emptyMessage }) }) })
+                                    : rows.map(row => _jsxs(Table.Row, { selected: row.getIsSelected(), children: [selectable && _jsx(Table.Cell, { className: "inkra-data-table__select-cell", children: _jsx(SelectionCheckbox, { checked: row.getIsSelected(), label: selectRowLabel(row), disabled: !row.getCanSelect(), onChange: checked => row.toggleSelected(checked) }) }), row.getVisibleCells().map(cell => _jsx(Table.Cell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))] }, row.id)) })] }) }), pagination && _jsxs("nav", { className: "inkra-data-table__pagination", "aria-label": paginationLabel, children: [_jsx(Button, { size: "icon-xs", variant: "ghost", "aria-label": previousPageLabel, disabled: loading || !table.getCanPreviousPage(), onClick: () => table.previousPage(), children: _jsx(PencilIcon, { paths: previousIcon, size: 18, sourceSize: 24 }) }), _jsx("span", { "aria-live": "polite", children: pageLabel(table.getState().pagination.pageIndex + 1, pageCount) }), _jsx(Button, { size: "icon-xs", variant: "ghost", "aria-label": nextPageLabel, disabled: loading || !table.getCanNextPage(), onClick: () => table.nextPage(), children: _jsx(PencilIcon, { paths: nextIcon, size: 18, sourceSize: 24 }) })] })] });
+}

package/dist/date-picker/index.d.ts

@@ -0,0 +1,50 @@
+import type { AriaAttributes, CSSProperties, FocusEventHandler } from 'react';
+import type { DateRange } from 'react-day-picker';
+import type { CalendarProps } from '../calendar/index.js';
+export type DatePickerMode = 'single' | 'range';
+export type DatePickerRange = DateRange;
+export type DatePickerValue = Date | DatePickerRange | undefined;
+export type DatePickerChangeReason = 'select' | 'clear';
+export interface DatePickerChangeDetails {
+    reason: DatePickerChangeReason;
+}
+export type DatePickerCalendarProps = Omit<CalendarProps, 'appearance' | 'mode' | 'onSelect' | 'required' | 'selected'>;
+export interface DatePickerProps {
+    'aria-describedby'?: string;
+    'aria-errormessage'?: string;
+    'aria-invalid'?: AriaAttributes['aria-invalid'];
+    'aria-label'?: string;
+    autoFocus?: boolean;
+    className?: string;
+    dir?: 'ltr' | 'rtl';
+    form?: string;
+    id?: string;
+    name?: string;
+    onBlur?: FocusEventHandler<HTMLButtonElement>;
+    onFocus?: FocusEventHandler<HTMLButtonElement>;
+    required?: boolean;
+    style?: CSSProperties;
+    mode?: DatePickerMode;
+    value?: DatePickerValue;
+    defaultValue?: DatePickerValue;
+    onValueChange?: (value: DatePickerValue, details: DatePickerChangeDetails) => void;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    disabled?: boolean;
+    readOnly?: boolean;
+    invalid?: boolean;
+    locale?: string;
+    placeholder?: string;
+    rangeSeparator?: string;
+    endName?: string;
+    clearable?: boolean;
+    clearButtonLabel?: string;
+    calendarLabel?: string;
+    openButtonLabel?: string;
+    fullWidth?: boolean;
+    calendarProps?: DatePickerCalendarProps;
+}
+export declare function datePickerLocalValue(value: Date | undefined): string;
+export declare const DatePicker: import("react").ForwardRefExoticComponent<DatePickerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export type DatePickerAriaInvalid = AriaAttributes['aria-invalid'];

package/dist/date-picker/index.js

@@ -0,0 +1,180 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useId, useImperativeHandle, useMemo, useRef, useState, } from 'react';
+import { Button } from '../Button.js';
+import { Calendar } from '../calendar/index.js';
+import { mergeAriaIds, useFieldContext } from '../form/context.js';
+import { useResolvedControlProps } from '../form/controlProps.js';
+import { PencilIcon } from '../PencilIcon.js';
+import { PencilLine } from '../PencilLine.js';
+import { Popover } from '../overlay/Popover.js';
+const calendarPaths = [
+    { d: 'M8 2v4' },
+    { d: 'M16 2v4' },
+    { d: 'M3 10h18' },
+    { d: 'M5 4h14a2 2 0 0 1 2 2v14H3V6a2 2 0 0 1 2-2Z' },
+];
+const clearPaths = [{ d: 'M18 6 6 18' }, { d: 'm6 6 12 12' }];
+const classes = (...values) => values.filter(Boolean).join(' ');
+function validDate(value) {
+    return value instanceof Date && Number.isFinite(value.getTime());
+}
+function isRange(value) {
+    return value != null && !validDate(value) && ('from' in value || 'to' in value);
+}
+export function datePickerLocalValue(value) {
+    if (!validDate(value))
+        return '';
+    return [
+        String(value.getFullYear()).padStart(4, '0'),
+        String(value.getMonth() + 1).padStart(2, '0'),
+        String(value.getDate()).padStart(2, '0'),
+    ].join('-');
+}
+function initialForMode(mode, value) {
+    if (mode === 'single')
+        return validDate(value) ? value : undefined;
+    return isRange(value) ? value : undefined;
+}
+function defaultCopy(locale) {
+    const chinese = locale.toLowerCase().startsWith('zh');
+    return {
+        calendar: chinese ? '选择日期' : 'Choose date',
+        clear: chinese ? '清空日期' : 'Clear date',
+        next: chinese ? '下个月' : 'Next month',
+        open: chinese ? '打开日期选择器' : 'Open date picker',
+        placeholder: chinese ? '选择日期' : 'Choose a date',
+        previous: chinese ? '上个月' : 'Previous month',
+        rangePlaceholder: chinese ? '选择日期范围' : 'Choose a date range',
+        selected: chinese ? '已选择' : 'selected',
+        today: chinese ? '今天' : 'today',
+    };
+}
+export const DatePicker = forwardRef(function DatePicker(allProps, forwardedRef) {
+    const valueControlled = Object.prototype.hasOwnProperty.call(allProps, 'value');
+    const openControlled = Object.prototype.hasOwnProperty.call(allProps, 'open');
+    const { 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, 'aria-invalid': ariaInvalid, 'aria-label': ariaLabel, autoFocus, calendarLabel, calendarProps = {}, className, clearable = true, clearButtonLabel, defaultOpen = false, defaultValue, dir, disabled = false, endName, form, fullWidth = true, id, invalid = false, locale = 'en-US', mode = 'single', name, onBlur, onFocus, onOpenChange, onValueChange, open, openButtonLabel, placeholder, rangeSeparator = ' – ', readOnly = false, required = false, style, value, } = allProps;
+    const generatedId = useId();
+    const field = useFieldContext();
+    const triggerRef = useRef(null);
+    const contentRef = useRef(null);
+    const [uncontrolledValue, setUncontrolledValue] = useState(() => initialForMode(mode, defaultValue));
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+    const [constraintInvalid, setConstraintInvalid] = useState(false);
+    useImperativeHandle(forwardedRef, () => triggerRef.current);
+    const state = useResolvedControlProps({
+        id,
+        required,
+        disabled,
+        readOnly,
+        invalid,
+        'aria-describedby': ariaDescribedBy,
+        'aria-errormessage': ariaErrorMessage,
+        'aria-invalid': ariaInvalid,
+    });
+    const copy = defaultCopy(locale);
+    const currentValue = initialForMode(mode, valueControlled ? value : uncontrolledValue);
+    const currentOpen = openControlled ? Boolean(open) : uncontrolledOpen;
+    const singleValue = validDate(currentValue) ? currentValue : undefined;
+    const rangeValue = isRange(currentValue) ? currentValue : undefined;
+    const firstDate = singleValue ?? rangeValue?.from ?? rangeValue?.to;
+    const hasValue = Boolean(singleValue || rangeValue?.from || rangeValue?.to);
+    const formatter = useMemo(() => new Intl.DateTimeFormat(locale, { dateStyle: 'medium' }), [locale]);
+    const fullFormatter = useMemo(() => new Intl.DateTimeFormat(locale, {
+        day: 'numeric', month: 'long', weekday: 'long', year: 'numeric',
+    }), [locale]);
+    const captionFormatter = useMemo(() => new Intl.DateTimeFormat(locale, {
+        month: 'long', year: 'numeric',
+    }), [locale]);
+    const weekdayFormatter = useMemo(() => new Intl.DateTimeFormat(locale, { weekday: 'short' }), [locale]);
+    const displayValue = singleValue
+        ? formatter.format(singleValue)
+        : rangeValue?.from
+            ? `${formatter.format(rangeValue.from)}${rangeSeparator}${rangeValue.to ? formatter.format(rangeValue.to) : '…'}`
+            : placeholder ?? (mode === 'range' ? copy.rangePlaceholder : copy.placeholder);
+    const triggerId = state.id ?? `inkra-date-picker-${generatedId}`;
+    const accessibleValueId = field ? `${triggerId}-value` : undefined;
+    const updateOpen = (nextOpen) => {
+        if (!openControlled)
+            setUncontrolledOpen(nextOpen);
+        onOpenChange?.(nextOpen);
+    };
+    const commit = (nextValue, reason) => {
+        if (!valueControlled)
+            setUncontrolledValue(initialForMode(mode, nextValue));
+        setConstraintInvalid(false);
+        onValueChange?.(initialForMode(mode, nextValue), { reason });
+    };
+    useEffect(() => {
+        const trigger = triggerRef.current;
+        if (!trigger || valueControlled)
+            return;
+        let timer;
+        const reset = (event) => {
+            clearTimeout(timer);
+            timer = setTimeout(() => {
+                if (!event.defaultPrevented) {
+                    setUncontrolledValue(initialForMode(mode, defaultValue));
+                    setUncontrolledOpen(false);
+                    setConstraintInvalid(false);
+                }
+            }, 0);
+        };
+        trigger.form?.addEventListener('reset', reset);
+        return () => {
+            clearTimeout(timer);
+            trigger.form?.removeEventListener('reset', reset);
+        };
+    }, [defaultValue, form, mode, valueControlled]);
+    const { disabled: disabledDays, formatters, labels, defaultMonth, ...restCalendarProps } = calendarProps;
+    const localizedFormatters = {
+        formatCaption: date => captionFormatter.format(date),
+        formatDay: date => new Intl.NumberFormat(locale).format(date.getDate()),
+        formatWeekdayName: date => weekdayFormatter.format(date),
+        ...formatters,
+    };
+    const localizedLabels = {
+        labelDayButton: (date, modifiers) => [
+            fullFormatter.format(date),
+            modifiers.today ? copy.today : '',
+            modifiers.selected ? copy.selected : '',
+        ].filter(Boolean).join(', '),
+        labelNext: () => copy.next,
+        labelPrevious: () => copy.previous,
+        ...labels,
+    };
+    const sharedCalendarProps = {
+        ...restCalendarProps,
+        appearance: 'picker',
+        defaultMonth: defaultMonth ?? firstDate,
+        disabled: state.readOnly ? true : disabledDays,
+        formatters: localizedFormatters,
+        labels: localizedLabels,
+    };
+    return (_jsxs(Popover.Root, { open: currentOpen, onOpenChange: updateOpen, children: [_jsxs("span", { className: classes('inkra-date-picker', className), "data-disabled": state.disabled || undefined, "data-full-width": fullWidth || undefined, "data-has-value": hasValue || undefined, "data-invalid": state.invalid || constraintInvalid || undefined, "data-mode": mode, "data-readonly": state.readOnly || undefined, dir: dir, style: style, children: [_jsx(Popover.Trigger, { asChild: true, children: _jsx(Button, { "aria-describedby": mergeAriaIds(state.describedBy, accessibleValueId), "aria-errormessage": state.errorMessage, "aria-invalid": constraintInvalid || state.ariaInvalid, "aria-label": ariaLabel ?? (openButtonLabel ? `${openButtonLabel}: ${displayValue}` : undefined), "aria-required": state.required || undefined, autoFocus: autoFocus, className: "inkra-date-picker__trigger", disabled: state.disabled, form: form, fullWidth: fullWidth, id: triggerId, onBlur: onBlur, onFocus: onFocus, ref: triggerRef, startIcon: _jsx(PencilIcon, { paths: calendarPaths, sourceSize: 24, size: 22 }), variant: "outline", children: _jsx("span", { className: "inkra-date-picker__value", "data-placeholder": !hasValue || undefined, children: displayValue }) }) }), accessibleValueId ? _jsx("span", { className: "inkra-date-picker__accessible-value", id: accessibleValueId, children: displayValue }) : null, clearable ? (_jsx(Button, { "aria-hidden": !hasValue || undefined, "aria-label": clearButtonLabel ?? copy.clear, className: "inkra-date-picker__clear", disabled: !hasValue || state.disabled || state.readOnly, onClick: () => {
+                            commit(undefined, 'clear');
+                            updateOpen(false);
+                            triggerRef.current?.focus({ preventScroll: true });
+                        }, size: "icon", tabIndex: hasValue ? 0 : -1, variant: "ghost", children: _jsx(PencilIcon, { paths: clearPaths, sourceSize: 24, size: 22 }) })) : null, name || state.required ? (mode === 'range' ? _jsxs(_Fragment, { children: [_jsx("input", { "aria-hidden": "true", className: "inkra-date-picker__form-field", disabled: state.disabled, form: form, name: name, onChange: () => undefined, onInvalid: event => { event.preventDefault(); setConstraintInvalid(true); triggerRef.current?.focus(); }, readOnly: state.readOnly, required: state.required, tabIndex: -1, type: "text", value: datePickerLocalValue(rangeValue?.from) }), _jsx("input", { "aria-hidden": "true", className: "inkra-date-picker__form-field", disabled: state.disabled, form: form, name: endName ?? (name ? `${name}End` : undefined), onChange: () => undefined, onInvalid: event => { event.preventDefault(); setConstraintInvalid(true); triggerRef.current?.focus(); }, readOnly: state.readOnly, required: state.required, tabIndex: -1, type: "text", value: datePickerLocalValue(rangeValue?.to) })] }) : _jsx("input", { "aria-hidden": "true", className: "inkra-date-picker__form-field", disabled: state.disabled, form: form, name: name, onChange: () => undefined, onInvalid: event => { event.preventDefault(); setConstraintInvalid(true); triggerRef.current?.focus(); }, readOnly: state.readOnly, required: state.required, tabIndex: -1, type: "text", value: datePickerLocalValue(singleValue) })) : null] }), _jsx(Popover.Portal, { children: _jsxs(Popover.Content, { align: "start", "aria-label": calendarLabel ?? copy.calendar, className: "inkra-date-picker__popover", collisionPadding: 12, onOpenAutoFocus: event => {
+                        event.preventDefault();
+                        requestAnimationFrame(() => {
+                            requestAnimationFrame(() => {
+                                const content = contentRef.current;
+                                const selected = content?.querySelector('.rdp-selected .rdp-day_button:not(:disabled)');
+                                const today = content?.querySelector('.rdp-today .rdp-day_button:not(:disabled)');
+                                const available = content?.querySelector('.rdp-day_button:not(:disabled)');
+                                (selected ?? today ?? available ?? content)?.focus({ preventScroll: true });
+                            });
+                        });
+                    }, ref: contentRef, sideOffset: 8, children: [_jsx(PencilLine, { className: "inkra-date-picker__heading-line", seed: `date-picker-${generatedId}-line` }), mode === 'single' ? (_jsx(Calendar, { ...sharedCalendarProps, mode: "single", selected: singleValue, onSelect: nextValue => {
+                                if (state.readOnly)
+                                    return;
+                                commit(nextValue, 'select');
+                                updateOpen(false);
+                            } })) : (_jsx(Calendar, { ...sharedCalendarProps, excludeDisabled: true, mode: "range", selected: rangeValue, onSelect: nextValue => {
+                                if (state.readOnly)
+                                    return;
+                                commit(nextValue, 'select');
+                                if (nextValue?.from && nextValue.to)
+                                    updateOpen(false);
+                            } }))] }) })] }));
+});