@cronus-ui/ui 0.6.0

package/dist/components/data-table.js

@@ -0,0 +1,359 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { flexRender, getCoreRowModel, getFacetedRowModel, getFacetedUniqueValues, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable, } from "@tanstack/react-table";
+import { AlertCircle, ArrowDown, ArrowUp, ChevronDown, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, ChevronsUpDown, Columns3, Download, PlusCircle, RefreshCw, Search, SlidersHorizontal, X, } from "lucide-react";
+import { useId, useMemo, useState } from "react";
+import { cn } from "../lib/cn.js";
+import { Badge } from "./badge.js";
+import { Button } from "./button.js";
+import { Checkbox } from "./checkbox.js";
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "./dropdown-menu.js";
+import { Input } from "./input.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select.js";
+import { Skeleton } from "./skeleton.js";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./table.js";
+/* -------------------------------------------------------------------------------------------------
+ * Constants & helpers
+ * -----------------------------------------------------------------------------------------------*/
+const DENSITY_CELL = {
+    comfortable: "",
+    compact: "py-1.5",
+};
+const DEFAULT_PAGE_SIZE_OPTIONS = [10, 20, 30, 50];
+const DEFAULT_LABELS = {
+    selectAllRows: "Select all rows on this page",
+    // The index makes each row checkbox distinguishable to assistive tech —
+    // a page of identical "Select row" names is not navigable by voice or list.
+    selectRow: (rowIndex) => `Select row ${rowIndex + 1}`,
+    reset: "Reset",
+    densityComfortable: "Comfortable",
+    densityCompact: "Compact",
+    exportCsv: "Export",
+    view: "View",
+    toggleColumns: "Toggle columns",
+    clearFilter: "Clear filter",
+    bulkActions: "Bulk actions",
+    selectedCount: (count) => `${count} selected`,
+    selectedOfTotal: (selected, total) => `${selected} of ${total} row(s) selected.`,
+    rowsPerPage: "Rows per page",
+    rowRange: (first, last, total) => `${first}–${last} of ${total}`,
+    pageOf: (page, pageCount) => `Page ${page} of ${pageCount}`,
+    pagination: "Pagination",
+    firstPage: "Go to first page",
+    previousPage: "Go to previous page",
+    nextPage: "Go to next page",
+    lastPage: "Go to last page",
+    noResults: "No results.",
+    retry: "Retry",
+    loadingRows: "Loading rows…",
+};
+/** Reserved column id for the built-in selection checkbox column. */
+export const SELECTION_COLUMN_ID = "__select__";
+/**
+ * Case-insensitive "includes" global filter used by the toolbar search. It is
+ * exported so server-side callers can reuse the same matching semantics.
+ */
+export const fuzzyTextFilter = (row, columnId, filterValue) => {
+    const value = row.getValue(columnId);
+    if (value == null)
+        return false;
+    return String(value).toLowerCase().includes(String(filterValue).toLowerCase());
+};
+const arrIncludesSomeFilter = (row, columnId, filterValue) => {
+    const selected = filterValue;
+    if (!selected?.length)
+        return true;
+    return selected.includes(String(row.getValue(columnId)));
+};
+/**
+ * Resolve the effective TanStack column id for a `ColumnDef`, mirroring
+ * table-core's own derivation: explicit `id`, else `accessorKey` (with `.`
+ * normalised to `_`), else a string `header`. Used to match a column to a
+ * faceted-filter `columnId` so we can attach the correct multi-select filterFn.
+ */
+function resolveColumnDefId(column) {
+    if (column.id != null)
+        return column.id;
+    const accessorKey = column.accessorKey;
+    if (accessorKey != null)
+        return String(accessorKey).replace(/\./g, "_");
+    if (typeof column.header === "string")
+        return column.header;
+    return undefined;
+}
+/**
+ * Build the leading checkbox selection column. Exposed so callers who supply
+ * their own `columns` can prepend an identical, accessible selection column
+ * instead of relying on `enableRowSelection` injection.
+ */
+export function createSelectionColumn(options = {}) {
+    const { selectAllLabel = DEFAULT_LABELS.selectAllRows, getRowLabel = (row) => DEFAULT_LABELS.selectRow(row.index), } = options;
+    return {
+        id: SELECTION_COLUMN_ID,
+        enableSorting: false,
+        enableHiding: false,
+        header: ({ table }) => {
+            const all = table.getIsAllPageRowsSelected();
+            const some = table.getIsSomePageRowsSelected();
+            return (_jsx(Checkbox, { checked: all ? true : some ? "indeterminate" : false, onCheckedChange: (checked) => table.toggleAllPageRowsSelected(checked === true), "aria-label": selectAllLabel }));
+        },
+        cell: ({ row }) => (_jsx(Checkbox, { checked: row.getIsSelected(), disabled: !row.getCanSelect(), onCheckedChange: (checked) => row.toggleSelected(checked === true), "aria-label": getRowLabel(row) })),
+    };
+}
+/** Convert the visible (filtered/sorted) rows of a table to a CSV string. */
+export function tableRowsToCsv(table) {
+    const visibleLeafColumns = table
+        .getVisibleLeafColumns()
+        .filter((c) => c.id !== SELECTION_COLUMN_ID);
+    const escapeCell = (value) => {
+        let str = value == null ? "" : String(value);
+        // CSV-injection (formula injection) neutralisation: a leading =, +, -, @,
+        // tab, or carriage return makes Excel/Sheets treat the cell as a formula and
+        // execute it on open. Prefix such values with a single apostrophe so the
+        // spreadsheet renders them as literal text. This intentionally also prefixes
+        // negative numbers (leading `-`) — the accepted, standard tradeoff for safety.
+        if (/^[=+\-@\t\r]/.test(str))
+            str = `'${str}`;
+        // Quote per RFC 4180 when the value contains a comma, double-quote, or any
+        // line break (LF *or* CR — an unquoted CR also breaks row boundaries).
+        return /[",\r\n]/.test(str) ? `"${str.replace(/"/g, '""')}"` : str;
+    };
+    const header = visibleLeafColumns
+        .map((c) => {
+        const raw = c.columnDef.header;
+        return escapeCell(typeof raw === "string" ? raw : c.id);
+    })
+        .join(",");
+    const selected = table.getFilteredSelectedRowModel().rows;
+    const source = selected.length ? selected : table.getFilteredRowModel().rows;
+    const body = source
+        .map((row) => visibleLeafColumns.map((c) => escapeCell(row.getValue(c.id))).join(","))
+        .join("\n");
+    return `${header}\n${body}`;
+}
+function downloadCsv(csv, fileName) {
+    if (typeof document === "undefined")
+        return;
+    const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = `${fileName}.csv`;
+    link.style.display = "none";
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+}
+const DEFAULT_HEADER_LABELS = {
+    sort: (title) => `Sort by ${title}. Activate to sort ascending.`,
+    sortedAscending: (title) => `Sorted by ${title} ascending. Activate to sort descending.`,
+    sortedDescending: (title) => `Sorted by ${title} descending. Activate to sort ascending.`,
+};
+/**
+ * Sortable header cell with a sort-state icon. Falls back to plain text when
+ * the column cannot sort, so it is safe to use everywhere.
+ */
+export function DataTableColumnHeader({ column, title, className, labels, }) {
+    if (!column.getCanSort()) {
+        return (_jsx("span", { "data-slot": "data-table-column-header", className: cn("font-medium text-fg-secondary", className), children: title }));
+    }
+    const sorted = column.getIsSorted();
+    const mergedLabels = { ...DEFAULT_HEADER_LABELS, ...labels };
+    return (_jsxs(Button, { variant: "ghost", size: "sm", "data-slot": "data-table-column-header", 
+        // `toggleSorting` receives an explicit direction, so table-core's
+        // remove-sort branch (taken only when no manual value is passed) never
+        // runs: the real cycle is unsorted → ascending → descending → ascending,
+        // forever. The labels below promise exactly that — nothing more.
+        onClick: () => column.toggleSorting(sorted === "asc"), "aria-label": sorted === "asc"
+            ? mergedLabels.sortedAscending(title)
+            : sorted === "desc"
+                ? mergedLabels.sortedDescending(title)
+                : mergedLabels.sort(title), className: "-ml-3 h-8 text-fg-secondary data-[state=open]:bg-surface-overlay", children: [_jsx("span", { children: title }), sorted === "asc" ? (_jsx(ArrowUp, { "aria-hidden": true })) : sorted === "desc" ? (_jsx(ArrowDown, { "aria-hidden": true })) : (_jsx(ChevronsUpDown, { "aria-hidden": true, className: "opacity-60" }))] }));
+}
+/* -------------------------------------------------------------------------------------------------
+ * Faceted filter (opt-in)
+ * -----------------------------------------------------------------------------------------------*/
+function DataTableFacetedFilterControl({ column, title, options, clearFilterLabel, }) {
+    const facets = column?.getFacetedUniqueValues();
+    const selected = new Set(column?.getFilterValue() ?? []);
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", size: "sm", "data-slot": "data-table-faceted-filter", className: "border-dashed", children: [_jsx(PlusCircle, { "aria-hidden": true }), title, selected.size > 0 ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "mx-1 h-4 w-px bg-border", "aria-hidden": true }), _jsx(Badge, { variant: "secondary", className: "rounded-sm px-1 font-normal", children: selected.size })] })) : null] }) }), _jsxs(DropdownMenuContent, { align: "start", className: "min-w-[12rem]", children: [_jsx(DropdownMenuLabel, { children: title }), _jsx(DropdownMenuSeparator, {}), options.map((option) => {
+                        const isSelected = selected.has(option.value);
+                        const Icon = option.icon;
+                        return (_jsxs(DropdownMenuCheckboxItem, { checked: isSelected, onSelect: (event) => event.preventDefault(), onCheckedChange: () => {
+                                const next = new Set(selected);
+                                if (isSelected)
+                                    next.delete(option.value);
+                                else
+                                    next.add(option.value);
+                                const values = Array.from(next);
+                                column?.setFilterValue(values.length ? values : undefined);
+                            }, children: [Icon ? _jsx(Icon, { className: "size-4 text-fg-tertiary" }) : null, _jsx("span", { children: option.label }), facets?.get(option.value) ? (_jsx("span", { className: "ml-auto text-xs text-fg-tertiary", children: facets.get(option.value) })) : null] }, option.value));
+                    }), selected.size > 0 ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuItem, { onSelect: () => column?.setFilterValue(undefined), className: "justify-center", children: clearFilterLabel })] })) : null] })] }));
+}
+function DataTableToolbar({ table, label, labels, searchable, searchPlaceholder, globalFilter, onGlobalFilterChange, facetedFilters, enableColumnVisibility, density, enableDensityToggle, onDensityChange, enableCsvExport, onExportCsv, toolbarStart, toolbarEnd, }) {
+    const searchId = useId();
+    const isFiltered = table.getState().columnFilters.length > 0 || globalFilter.length > 0;
+    return (_jsxs("div", { role: "group", "aria-label": label, "data-slot": "data-table-toolbar", className: "flex flex-wrap items-center gap-2", children: [toolbarStart, searchable ? (_jsxs("div", { className: "relative w-full max-w-[16rem]", children: [_jsx(Search, { "aria-hidden": true, className: "pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-fg-muted" }), _jsx("label", { htmlFor: searchId, className: "sr-only", children: searchPlaceholder }), _jsx(Input, { id: searchId, type: "search", value: globalFilter, onChange: (event) => onGlobalFilterChange(event.target.value), placeholder: searchPlaceholder, className: "h-9 pl-9" })] })) : null, facetedFilters?.map((filter) => (_jsx(DataTableFacetedFilterControl, { column: table.getColumn(filter.columnId), title: filter.title, options: filter.options, clearFilterLabel: labels.clearFilter }, filter.columnId))), isFiltered ? (_jsxs(Button, { variant: "ghost", size: "sm", onClick: () => {
+                    table.resetColumnFilters();
+                    onGlobalFilterChange("");
+                }, children: [labels.reset, _jsx(X, { "aria-hidden": true })] })) : null, _jsxs("div", { className: "ml-auto flex items-center gap-2", children: [toolbarEnd, enableDensityToggle ? (_jsxs(Button, { variant: "outline", size: "sm", "aria-pressed": density === "compact", onClick: () => onDensityChange(density === "compact" ? "comfortable" : "compact"), children: [_jsx(SlidersHorizontal, { "aria-hidden": true }), density === "compact" ? labels.densityComfortable : labels.densityCompact] })) : null, enableCsvExport ? (_jsxs(Button, { variant: "outline", size: "sm", onClick: onExportCsv, children: [_jsx(Download, { "aria-hidden": true }), labels.exportCsv] })) : null, enableColumnVisibility ? (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", size: "sm", children: [_jsx(Columns3, { "aria-hidden": true }), labels.view, _jsx(ChevronDown, { "aria-hidden": true, className: "opacity-60" })] }) }), _jsxs(DropdownMenuContent, { align: "end", className: "min-w-[10rem]", children: [_jsx(DropdownMenuLabel, { children: labels.toggleColumns }), _jsx(DropdownMenuSeparator, {}), table
+                                        .getAllColumns()
+                                        .filter((column) => column.getCanHide())
+                                        .map((column) => (_jsx(DropdownMenuCheckboxItem, { checked: column.getIsVisible(), onSelect: (event) => event.preventDefault(), onCheckedChange: (value) => column.toggleVisibility(value === true), className: "capitalize", children: typeof column.columnDef.header === "string"
+                                            ? column.columnDef.header
+                                            : column.id }, column.id)))] })] })) : null] })] }));
+}
+/* -------------------------------------------------------------------------------------------------
+ * Pagination footer (opt-in)
+ * -----------------------------------------------------------------------------------------------*/
+function DataTablePagination({ table, pageSizeOptions, labels, }) {
+    const pageSizeId = useId();
+    const { pageIndex, pageSize } = table.getState().pagination;
+    const totalRows = table.getRowCount();
+    const pageCount = table.getPageCount();
+    const firstRow = totalRows === 0 ? 0 : pageIndex * pageSize + 1;
+    const lastRow = Math.min((pageIndex + 1) * pageSize, totalRows);
+    return (_jsxs("div", { "data-slot": "data-table-pagination", className: "flex flex-wrap items-center justify-between gap-4 px-1 py-2", children: [_jsx("p", { className: "text-sm text-fg-tertiary", "aria-live": "polite", children: labels.rowRange(firstRow, lastRow, totalRows) }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("label", { htmlFor: pageSizeId, className: "text-sm text-fg-secondary", children: labels.rowsPerPage }), _jsxs(Select, { value: String(pageSize), onValueChange: (value) => table.setPageSize(Number(value)), children: [_jsx(SelectTrigger, { id: pageSizeId, className: "h-8 w-[4.5rem]", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: pageSizeOptions.map((size) => (_jsx(SelectItem, { value: String(size), children: size }, size))) })] })] }), _jsx("p", { className: "text-sm text-fg-secondary", children: labels.pageOf(pageCount === 0 ? 0 : pageIndex + 1, pageCount) }), _jsxs("nav", { "aria-label": labels.pagination, className: "flex items-center gap-1", children: [_jsx(Button, { variant: "outline", size: "icon-sm", onClick: () => table.setPageIndex(0), disabled: !table.getCanPreviousPage(), "aria-label": labels.firstPage, children: _jsx(ChevronsLeft, { "aria-hidden": true }) }), _jsx(Button, { variant: "outline", size: "icon-sm", onClick: () => table.previousPage(), disabled: !table.getCanPreviousPage(), "aria-label": labels.previousPage, children: _jsx(ChevronLeft, { "aria-hidden": true }) }), _jsx(Button, { variant: "outline", size: "icon-sm", onClick: () => table.nextPage(), disabled: !table.getCanNextPage(), "aria-label": labels.nextPage, children: _jsx(ChevronRight, { "aria-hidden": true }) }), _jsx(Button, { variant: "outline", size: "icon-sm", onClick: () => table.setPageIndex(pageCount - 1), disabled: !table.getCanNextPage(), "aria-label": labels.lastPage, children: _jsx(ChevronsRight, { "aria-hidden": true }) })] })] })] }));
+}
+/* -------------------------------------------------------------------------------------------------
+ * DataTable
+ * -----------------------------------------------------------------------------------------------*/
+export function DataTable(props) {
+    const { columns, data, searchable = false, searchPlaceholder = "Search…", globalFilter: globalFilterProp, onGlobalFilterChange, facetedFilters, toolbarStart, toolbarEnd, enableColumnVisibility = false, columnVisibility: columnVisibilityProp, onColumnVisibilityChange, sorting: sortingProp, onSortingChange, manualSorting, columnFilters: columnFiltersProp, onColumnFiltersChange, manualFiltering, pagination = false, paginationState: paginationProp, onPaginationChange, manualPagination, pageCount, rowCount, initialPageSize = 10, pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS, enableRowSelection, rowSelection: rowSelectionProp, onRowSelectionChange, bulkActions, density: densityProp, onDensityChange, initialDensity = "comfortable", enableDensityToggle = false, enableCsvExport = false, csvFileName = "export", loading = false, loadingRowCount, error, onRetry, emptyState, className, toolbarLabel = "Table controls", labels: labelsProp, getRowLabel, } = props;
+    const labels = useMemo(() => ({ ...DEFAULT_LABELS, ...labelsProp }), [labelsProp]);
+    /* ---- Uncontrolled fallbacks (only used when the matching prop is absent) ---- */
+    const [sortingState, setSortingState] = useState([]);
+    const [columnFiltersState, setColumnFiltersState] = useState([]);
+    const [globalFilterState, setGlobalFilterState] = useState("");
+    const [columnVisibilityState, setColumnVisibilityState] = useState({});
+    const [rowSelectionState, setRowSelectionState] = useState({});
+    const [paginationStateInternal, setPaginationStateInternal] = useState({
+        pageIndex: 0,
+        pageSize: initialPageSize,
+    });
+    const [densityState, setDensityState] = useState(initialDensity);
+    const sorting = sortingProp ?? sortingState;
+    const columnFilters = columnFiltersProp ?? columnFiltersState;
+    const globalFilter = globalFilterProp ?? globalFilterState;
+    const columnVisibility = columnVisibilityProp ?? columnVisibilityState;
+    const rowSelection = rowSelectionProp ?? rowSelectionState;
+    const paginationStateValue = paginationProp ?? paginationStateInternal;
+    const density = densityProp ?? densityState;
+    const selectionEnabled = Boolean(enableRowSelection);
+    /* ---- Compose columns ---- *
+     * 1. For every faceted-filter target, guarantee `filterFn: "arrIncludesSome"`
+     *    when the author hasn't set one. The toolbar control writes an array of
+     *    selected values; without this, table-core's `auto` filterFn resolves to
+     *    `includesString` for string columns, which coerces the array via
+     *    `toString()` ("active,invited") and filters every row out once 2+ values
+     *    are selected. We only override the default ("auto"), never an explicit
+     *    author choice, so this is backward-compatible.
+     * 2. Prepend the selection column when row selection is enabled.
+     */
+    const facetedColumnIds = useMemo(() => new Set((facetedFilters ?? []).map((f) => f.columnId)), [facetedFilters]);
+    const resolvedColumns = useMemo(() => {
+        const withFacetFilterFn = facetedColumnIds.size === 0
+            ? columns
+            : columns.map((column) => {
+                if (column.filterFn != null && column.filterFn !== "auto")
+                    return column;
+                const id = resolveColumnDefId(column);
+                if (id == null || !facetedColumnIds.has(id))
+                    return column;
+                return { ...column, filterFn: "arrIncludesSome" };
+            });
+        if (!selectionEnabled)
+            return withFacetFilterFn;
+        const selectionColumn = createSelectionColumn({
+            selectAllLabel: labels.selectAllRows,
+            getRowLabel: getRowLabel ?? ((row) => labels.selectRow(row.index)),
+        });
+        return [selectionColumn, ...withFacetFilterFn];
+    }, [columns, facetedColumnIds, selectionEnabled, labels, getRowLabel]);
+    /* ---- Feature detection: only wire optional models/state when used ---- */
+    const filteringEnabled = searchable || Boolean(facetedFilters?.length) || Boolean(columnFiltersProp);
+    const paginationEnabled = pagination || Boolean(manualPagination);
+    const derivedPageCount = pageCount ??
+        (rowCount != null
+            ? Math.max(1, Math.ceil(rowCount / Math.max(1, paginationStateValue.pageSize)))
+            : undefined);
+    const table = useReactTable({
+        data,
+        columns: resolvedColumns,
+        state: {
+            sorting,
+            ...(filteringEnabled ? { columnFilters, globalFilter } : {}),
+            ...(enableColumnVisibility ? { columnVisibility } : {}),
+            ...(selectionEnabled ? { rowSelection } : {}),
+            ...(paginationEnabled ? { pagination: paginationStateValue } : {}),
+        },
+        getCoreRowModel: getCoreRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+        onSortingChange: onSortingChange ?? setSortingState,
+        manualSorting,
+        ...(filteringEnabled
+            ? {
+                getFilteredRowModel: getFilteredRowModel(),
+                getFacetedRowModel: getFacetedRowModel(),
+                getFacetedUniqueValues: getFacetedUniqueValues(),
+                onColumnFiltersChange: onColumnFiltersChange ?? setColumnFiltersState,
+                onGlobalFilterChange: onGlobalFilterChange ?? setGlobalFilterState,
+                globalFilterFn: fuzzyTextFilter,
+                manualFiltering,
+            }
+            : {}),
+        ...(enableColumnVisibility
+            ? { onColumnVisibilityChange: onColumnVisibilityChange ?? setColumnVisibilityState }
+            : {}),
+        ...(selectionEnabled
+            ? {
+                enableRowSelection,
+                onRowSelectionChange: onRowSelectionChange ?? setRowSelectionState,
+            }
+            : {}),
+        ...(paginationEnabled
+            ? {
+                onPaginationChange: onPaginationChange ?? setPaginationStateInternal,
+                manualPagination,
+                ...(manualPagination
+                    ? { pageCount: derivedPageCount, rowCount }
+                    : { getPaginationRowModel: getPaginationRowModel() }),
+            }
+            : {}),
+        filterFns: { arrIncludesSome: arrIncludesSomeFilter },
+    });
+    /* ---- Derived render state ---- */
+    const showToolbar = searchable ||
+        Boolean(facetedFilters?.length) ||
+        enableColumnVisibility ||
+        enableDensityToggle ||
+        enableCsvExport ||
+        Boolean(toolbarStart) ||
+        Boolean(toolbarEnd);
+    const rows = table.getRowModel().rows;
+    const colSpan = resolvedColumns.length || 1;
+    const densityClass = DENSITY_CELL[density];
+    const selectedRows = selectionEnabled ? table.getFilteredSelectedRowModel().rows : [];
+    const skeletonRows = loadingRowCount ?? (paginationEnabled ? paginationStateValue.pageSize : 5);
+    return (_jsxs("div", { "data-slot": "data-table", className: cn("flex flex-col gap-3", className), children: [showToolbar ? (_jsx(DataTableToolbar, { table: table, label: toolbarLabel, labels: labels, searchable: searchable, searchPlaceholder: searchPlaceholder, globalFilter: globalFilter, onGlobalFilterChange: (value) => (onGlobalFilterChange ?? setGlobalFilterState)(value), ...(facetedFilters ? { facetedFilters } : {}), enableColumnVisibility: enableColumnVisibility, density: density, enableDensityToggle: enableDensityToggle, onDensityChange: (value) => {
+                    // Uncontrolled: drive internal state. Controlled (`density` set):
+                    // leave state alone so the prop stays the single source of truth.
+                    if (densityProp == null)
+                        setDensityState(value);
+                    onDensityChange?.(value);
+                }, enableCsvExport: enableCsvExport, onExportCsv: () => downloadCsv(tableRowsToCsv(table), csvFileName), ...(toolbarStart ? { toolbarStart } : {}), ...(toolbarEnd ? { toolbarEnd } : {}) })) : null, selectionEnabled && bulkActions && selectedRows.length > 0 ? (_jsxs("section", { "aria-label": labels.bulkActions, "data-slot": "data-table-bulk-actions", className: "flex flex-wrap items-center gap-3 rounded-lg border border-border bg-surface-inset px-3 py-2", children: [_jsx("span", { className: "text-sm text-fg-secondary", "aria-live": "polite", children: labels.selectedCount(selectedRows.length) }), _jsx("div", { className: "ml-auto flex items-center gap-2", children: bulkActions(selectedRows) })] })) : null, _jsxs("div", { "data-slot": "data-table-container", "aria-busy": loading || undefined, className: "overflow-hidden rounded-xl border border-border", children: [loading ? (_jsx("span", { role: "status", "data-slot": "data-table-loading", className: "sr-only", children: labels.loadingRows })) : null, _jsxs(Table, { children: [_jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => (_jsx(TableRow, { children: headerGroup.headers.map((header) => {
+                                        const sortable = !header.isPlaceholder && header.column.getCanSort();
+                                        const sorted = header.column.getIsSorted();
+                                        return (_jsx(TableHead, { colSpan: header.colSpan, scope: "col", "aria-sort": sortable
+                                                ? sorted === "asc"
+                                                    ? "ascending"
+                                                    : sorted === "desc"
+                                                        ? "descending"
+                                                        : "none"
+                                                : undefined, children: header.isPlaceholder
+                                                ? null
+                                                : flexRender(header.column.columnDef.header, header.getContext()) }, header.id));
+                                    }) }, headerGroup.id))) }), _jsx(TableBody, { children: loading ? (Array.from({ length: skeletonRows }).map((_, rowIndex) => (_jsx(TableRow, { children: resolvedColumns.map((_column, cellIndex) => (_jsx(TableCell, { className: densityClass, children: _jsx(Skeleton, { className: "h-4 w-full" }) }, `skeleton-cell-${cellIndex}`))) }, `skeleton-${rowIndex}`)))) : error != null ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: colSpan, className: "h-32 text-center", children: _jsxs("div", { className: "flex flex-col items-center justify-center gap-3 text-fg-secondary", children: [_jsx(AlertCircle, { "aria-hidden": true, className: "size-6 text-error" }), _jsx("div", { role: "alert", className: "text-sm", children: error }), onRetry ? (_jsxs(Button, { variant: "outline", size: "sm", onClick: onRetry, children: [_jsx(RefreshCw, { "aria-hidden": true }), labels.retry] })) : null] }) }) })) : rows.length ? (rows.map((row) => (_jsx(TableRow, { "data-state": row.getIsSelected() ? "selected" : undefined, children: row.getVisibleCells().map((cell) => (_jsx(TableCell, { className: densityClass, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id)))) : (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: colSpan, className: "h-24 text-center text-fg-tertiary", children: emptyState ?? labels.noResults }) })) })] })] }), paginationEnabled && !loading && error == null ? (_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-4", children: [selectionEnabled ? (_jsx("p", { className: "text-sm text-fg-tertiary", "aria-live": "polite", children: labels.selectedOfTotal(selectedRows.length, table.getFilteredRowModel().rows.length) })) : (_jsx("span", {})), _jsx("div", { className: "ml-auto", children: _jsx(DataTablePagination, { table: table, pageSizeOptions: pageSizeOptions, labels: labels }) })] })) : selectionEnabled && !loading && error == null ? (_jsx("p", { className: "text-sm text-fg-tertiary", "aria-live": "polite", children: labels.selectedOfTotal(selectedRows.length, table.getFilteredRowModel().rows.length) })) : null] }));
+}
+//# sourceMappingURL=data-table.js.map

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

@@ -0,0 +1,66 @@
+import { type Locale } from "date-fns";
+import { type ButtonHTMLAttributes, type ComponentPropsWithoutRef } from "react";
+import type { Matcher } from "react-day-picker";
+import { PopoverContent } from "./popover.js";
+/**
+ * A single-date picker: a button-styled trigger that opens a calendar popover.
+ *
+ * - **Value** works controlled (`value` + `onValueChange`) or uncontrolled
+ *   (`defaultValue`). Picking a day commits the value, closes the popover and
+ *   returns focus to the trigger.
+ * - **Open state** follows the same pattern (`open` / `defaultOpen` /
+ *   `onOpenChange`) so the popover can also be driven externally.
+ * - **Forms:** when `name` is set, the selection is mirrored into a hidden
+ *   input serialized as a local ISO `yyyy-MM-dd` date (no UTC day-shifting).
+ * - **Display** is locale-aware via a `date-fns` `locale` and `dateFormat`,
+ *   with a `formatValue` escape hatch for fully custom labels.
+ * - The trigger accepts standard button attributes (`id`, `aria-describedby`,
+ *   `aria-invalid`, ...) so it composes with `FormControl` Slot injection.
+ */
+export interface DatePickerProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "value" | "defaultValue" | "onChange" | "disabled" | "name"> {
+    /** Controlled selected date. Pair with `onValueChange`. */
+    value?: Date;
+    /** Initial date for uncontrolled usage. */
+    defaultValue?: Date;
+    /** Called with the new date (`undefined` when deselected) on every selection change. */
+    onValueChange?: (date: Date | undefined) => void;
+    /**
+     * Legacy change callback, fired with the same payload as `onValueChange`.
+     *
+     * @deprecated Use `onValueChange` — this alias matches the family naming
+     * (`DateRangePicker`, `CurrencyInput`) and will be removed in a major.
+     */
+    onChange?: (date: Date | undefined) => void;
+    /** Controlled open state of the calendar popover. Pair with `onOpenChange`. */
+    open?: boolean;
+    /** Initial open state for uncontrolled usage. */
+    defaultOpen?: boolean;
+    /** Called whenever the popover opens or closes. */
+    onOpenChange?: (open: boolean) => void;
+    /** Text shown on the trigger when no date is selected. */
+    placeholder?: string;
+    /** Disables the trigger entirely. */
+    disabled?: boolean;
+    /** Marks the trigger invalid (error border/ring + `aria-invalid`). */
+    invalid?: boolean;
+    /** Earliest selectable day (inclusive). */
+    min?: Date;
+    /** Latest selectable day (inclusive). */
+    max?: Date;
+    /** Extra non-selectable days, merged with `min`/`max`. */
+    disabledDates?: Matcher | Matcher[];
+    /** `date-fns` locale used for both the trigger label and the calendar. */
+    locale?: Locale;
+    /** `date-fns` format token for the trigger label. */
+    dateFormat?: string;
+    /** Full override for the trigger label. Wins over `dateFormat`/`locale`. */
+    formatValue?: (date: Date) => string;
+    /** Form field name — renders a hidden input with the local `yyyy-MM-dd` date. */
+    name?: string;
+    /** Alignment of the popover against the trigger. */
+    align?: ComponentPropsWithoutRef<typeof PopoverContent>["align"];
+    /** Extra classes for the popover content. */
+    contentClassName?: string;
+}
+export declare const DatePicker: import("react").ForwardRefExoticComponent<DatePickerProps & import("react").RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=date-picker.d.ts.map

package/dist/components/date-picker.js

@@ -0,0 +1,55 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { format } from "date-fns";
+import { CalendarIcon } from "lucide-react";
+import { forwardRef, useCallback, useMemo, useState, } from "react";
+import { cn } from "../lib/cn.js";
+import { Button } from "./button.js";
+import { Calendar } from "./calendar.js";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
+function toMatcherList(min, max, disabledDates) {
+    const matchers = [];
+    if (min)
+        matchers.push({ before: min });
+    if (max)
+        matchers.push({ after: max });
+    if (Array.isArray(disabledDates))
+        matchers.push(...disabledDates);
+    else if (disabledDates !== undefined)
+        matchers.push(disabledDates);
+    return matchers;
+}
+export const DatePicker = forwardRef(({ value: valueProp, defaultValue, onValueChange, onChange, open: openProp, defaultOpen = false, onOpenChange, placeholder = "Pick a date", disabled = false, invalid = false, min, max, disabledDates, locale, dateFormat = "PPP", formatValue, name, align = "start", className, contentClassName, "aria-invalid": ariaInvalid, ...props }, ref) => {
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+    const isValueControlled = valueProp !== undefined;
+    const value = isValueControlled ? valueProp : uncontrolledValue;
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+    const isOpenControlled = openProp !== undefined;
+    const open = isOpenControlled ? openProp : uncontrolledOpen;
+    const setOpen = useCallback((next) => {
+        if (!isOpenControlled)
+            setUncontrolledOpen(next);
+        onOpenChange?.(next);
+    }, [isOpenControlled, onOpenChange]);
+    const commit = useCallback((next) => {
+        if (!isValueControlled)
+            setUncontrolledValue(next);
+        onValueChange?.(next);
+        onChange?.(next);
+    }, [isValueControlled, onValueChange, onChange]);
+    // Committing a day is a terminal action for a single-date picker, so the
+    // popover closes right away (Radix then restores focus to the trigger).
+    const handleSelect = useCallback((next) => {
+        commit(next);
+        setOpen(false);
+    }, [commit, setOpen]);
+    const disabledMatcher = useMemo(() => toMatcherList(min, max, disabledDates), [min, max, disabledDates]);
+    const label = useMemo(() => {
+        if (!value)
+            return placeholder;
+        return formatValue ? formatValue(value) : format(value, dateFormat, { locale });
+    }, [value, placeholder, formatValue, dateFormat, locale]);
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { ref: ref, variant: "outline", disabled: disabled, "aria-invalid": invalid ? true : ariaInvalid, "data-slot": "date-picker-trigger", className: cn("w-[240px] justify-start gap-2 font-normal", "aria-invalid:border-error aria-invalid:ring-2 aria-invalid:ring-error/30", !value && "text-fg-muted", className), ...props, children: [_jsx(CalendarIcon, { className: "size-4 shrink-0 opacity-70", "aria-hidden": "true" }), _jsx("span", { className: "truncate", children: label })] }) }), _jsx(PopoverContent, { align: align, "aria-label": placeholder, "data-slot": "date-picker-content", className: cn("w-auto p-0", contentClassName), children: _jsx(Calendar, { mode: "single", selected: value, onSelect: handleSelect, defaultMonth: value, startMonth: min, endMonth: max, disabled: disabledMatcher.length > 0 ? disabledMatcher : undefined, locale: locale, autoFocus: true }) }), name ? (_jsx("input", { type: "hidden", name: name, value: value ? format(value, "yyyy-MM-dd") : "", readOnly: true })) : null] }));
+});
+DatePicker.displayName = "DatePicker";
+//# sourceMappingURL=date-picker.js.map

package/dist/components/date-range-picker.d.ts

@@ -0,0 +1,59 @@
+import { type Locale } from "date-fns";
+import { type ComponentPropsWithoutRef } from "react";
+import type { Matcher } from "react-day-picker";
+import { PopoverContent } from "./popover.js";
+/**
+ * A start/end date selection. Both ends are optional so the value can describe
+ * an in-progress selection (a `from` with no `to` yet) as well as an empty one.
+ */
+export interface DateRange {
+    from?: Date;
+    to?: Date;
+}
+/** A named shortcut rendered in the presets column. */
+export interface DateRangePreset {
+    /** Visible, accessible label for the preset button. */
+    label: string;
+    /** The range applied when the preset is chosen. */
+    range: DateRange;
+}
+export interface DateRangePickerProps {
+    /** Controlled value. Pair with `onValueChange`. */
+    value?: DateRange;
+    /** Initial value for uncontrolled usage. */
+    defaultValue?: DateRange;
+    /** Called with the new range whenever the selection changes. */
+    onValueChange?: (range: DateRange | undefined) => void;
+    /** Optional shortcuts shown in a column beside the calendar. */
+    presets?: DateRangePreset[];
+    /** Text shown on the trigger when no range is selected. */
+    placeholder?: string;
+    /** Disables the trigger entirely. */
+    disabled?: boolean;
+    /** Earliest selectable day (inclusive). */
+    min?: Date;
+    /** Latest selectable day (inclusive). */
+    max?: Date;
+    /** Extra non-selectable days, merged with `min`/`max`. */
+    disabledDates?: Matcher | Matcher[];
+    /** `date-fns` locale used for both the trigger label and the calendar. */
+    locale?: Locale;
+    /** `date-fns` format token for each end of the range. */
+    dateFormat?: string;
+    /** Full override for the trigger label. Wins over `dateFormat`/`locale`. */
+    formatValue?: (range: DateRange) => string;
+    /** Alignment of the popover against the trigger. */
+    align?: ComponentPropsWithoutRef<typeof PopoverContent>["align"];
+    /** Number of months shown on wider viewports. */
+    numberOfMonths?: number;
+    /** Extra classes for the trigger button. */
+    className?: string;
+    /** Extra classes for the popover content. */
+    contentClassName?: string;
+    /** Accessible name for the trigger when there is no visible label. */
+    "aria-label"?: string;
+    /** ID of an element labelling the trigger. */
+    "aria-labelledby"?: string;
+}
+export declare const DateRangePicker: import("react").ForwardRefExoticComponent<DateRangePickerProps & import("react").RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=date-range-picker.d.ts.map

package/dist/components/date-range-picker.js

@@ -0,0 +1,59 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { format } from "date-fns";
+import { CalendarIcon } from "lucide-react";
+import { forwardRef, useCallback, useMemo, useState } from "react";
+import { cn } from "../lib/cn.js";
+import { Button } from "./button.js";
+import { Calendar } from "./calendar.js";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
+function hasSelection(range) {
+    return Boolean(range?.from || range?.to);
+}
+function toMatcherList(min, max, disabledDates) {
+    const matchers = [];
+    if (min)
+        matchers.push({ before: min });
+    if (max)
+        matchers.push({ after: max });
+    if (Array.isArray(disabledDates))
+        matchers.push(...disabledDates);
+    else if (disabledDates !== undefined)
+        matchers.push(disabledDates);
+    return matchers;
+}
+export const DateRangePicker = forwardRef(({ value: valueProp, defaultValue, onValueChange, presets, placeholder = "Pick a date range", disabled = false, min, max, disabledDates, locale, dateFormat = "LLL dd, y", formatValue, align = "start", numberOfMonths = 2, className, contentClassName, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...props }, ref) => {
+    const [open, setOpen] = useState(false);
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+    const isControlled = valueProp !== undefined;
+    const value = isControlled ? valueProp : uncontrolledValue;
+    const commit = useCallback((next) => {
+        if (!isControlled)
+            setUncontrolledValue(next);
+        onValueChange?.(next);
+    }, [isControlled, onValueChange]);
+    // react-day-picker's range selection requires a `from`; surface that as a
+    // fully-optional public shape and only feed it a valid selection.
+    const handleSelect = useCallback((next) => {
+        commit(next ? { from: next.from, to: next.to } : undefined);
+    }, [commit]);
+    const handlePreset = useCallback((range) => {
+        commit(range);
+        setOpen(false);
+    }, [commit]);
+    const selected = useMemo(() => (value?.from ? { from: value.from, to: value.to } : undefined), [value?.from, value?.to]);
+    const disabledMatcher = useMemo(() => toMatcherList(min, max, disabledDates), [min, max, disabledDates]);
+    const label = useMemo(() => {
+        if (!hasSelection(value))
+            return placeholder;
+        if (formatValue)
+            return formatValue(value);
+        const from = value.from ? format(value.from, dateFormat, { locale }) : "…";
+        if (!value.to)
+            return from;
+        return `${from} – ${format(value.to, dateFormat, { locale })}`;
+    }, [value, placeholder, formatValue, dateFormat, locale]);
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { ref: ref, variant: "outline", disabled: disabled, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "data-slot": "date-range-picker-trigger", className: cn("w-[300px] justify-start gap-2 font-normal", !hasSelection(value) && "text-fg-muted", className), ...props, children: [_jsx(CalendarIcon, { className: "size-4 shrink-0 opacity-70", "aria-hidden": "true" }), _jsx("span", { className: "truncate", children: label })] }) }), _jsx(PopoverContent, { align: align, "aria-label": placeholder, "data-slot": "date-range-picker-content", className: cn("w-auto p-0", contentClassName), children: _jsxs("div", { className: "flex flex-col sm:flex-row", children: [presets && presets.length > 0 ? (_jsxs("fieldset", { "data-slot": "date-range-picker-presets", className: "m-0 flex min-w-0 flex-row gap-1 border-0 border-border border-b p-2 sm:flex-col sm:border-e sm:border-b-0", children: [_jsx("legend", { className: "sr-only", children: "Date range presets" }), presets.map((preset) => (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => handlePreset(preset.range), "data-slot": "date-range-picker-preset", className: "justify-start whitespace-nowrap font-normal", children: preset.label }, preset.label)))] })) : null, _jsxs("fieldset", { "data-slot": "date-range-picker-calendar", className: "m-0 min-w-0 border-0 p-0", children: [_jsx("legend", { className: "sr-only", children: placeholder }), _jsx(Calendar, { mode: "range", selected: selected, onSelect: handleSelect, numberOfMonths: numberOfMonths, defaultMonth: value?.from, startMonth: min, endMonth: max, disabled: disabledMatcher.length > 0 ? disabledMatcher : undefined, locale: locale, autoFocus: true })] })] }) })] }));
+});
+DateRangePicker.displayName = "DateRangePicker";
+//# sourceMappingURL=date-range-picker.js.map