@dungle-scrubs/admin-ui-soft 0.0.0-stage → 0.1.0

package/dist/compositions/data-table/data-table.js

@@ -0,0 +1,615 @@
+import { Alert, AlertAction, AlertDescription, AlertTitle } from "../../components/ui/alert.js";
+import { Spinner } from "../../components/ui/spinner.js";
+import { Button } from "../../components/ui/button.js";
+import { Checkbox } from "../../components/ui/checkbox.js";
+import { InputGroup, InputGroupAddon, InputGroupInput } from "../../components/ui/input-group.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../../components/ui/dropdown-menu.js";
+import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "../../components/ui/empty.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../components/ui/select.js";
+import { Skeleton } from "../../components/ui/skeleton.js";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../components/ui/table.js";
+import { createDataTableState, updateDataTableState } from "./data-table-state.js";
+import * as React from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "cn";
+import { AlertCircleIcon, ArrowDownIcon, ArrowUpDownIcon, ArrowUpIcon, ChevronLeftIcon, ChevronRightIcon, ChevronsLeftIcon, ChevronsRightIcon, MoreHorizontalIcon, RotateCwIcon, SearchIcon, SearchXIcon, TableIcon, XIcon } from "lucide-react";
+import { columnFilteringFeature, createColumnHelper, createFilteredRowModel, createPaginatedRowModel, createSortedRowModel, filterFn_equalsString, filterFn_includesString, functionalUpdate, globalFilteringFeature, metaHelper, rowPaginationFeature, rowSelectionFeature, rowSortingFeature, sortFn_alphanumeric, sortFn_basic, sortFn_datetime, sortFn_text, tableFeatures, useTable } from "@tanstack/react-table";
+import { useVirtualizer } from "@tanstack/react-virtual";
+//#region src/compositions/data-table/data-table.tsx
+const BREAKPOINT_WIDTHS = {
+	sm: 640,
+	md: 768,
+	lg: 1024
+};
+/**
+* The TanStack Table v9 features every DataTable registers: column filters,
+* global search, sorting, pagination and row selection, with the client row
+* models for each. Build column definitions against this feature set, for
+* example with `createDataTableColumnHelper`.
+*/
+const dataTableFeatures = tableFeatures({
+	columnFilteringFeature,
+	globalFilteringFeature,
+	rowSortingFeature,
+	rowPaginationFeature,
+	rowSelectionFeature,
+	filteredRowModel: createFilteredRowModel(),
+	sortedRowModel: createSortedRowModel(),
+	paginatedRowModel: createPaginatedRowModel(),
+	filterFns: {
+		includesString: filterFn_includesString,
+		equalsString: filterFn_equalsString
+	},
+	sortFns: {
+		alphanumeric: sortFn_alphanumeric,
+		basic: sortFn_basic,
+		datetime: sortFn_datetime,
+		text: sortFn_text
+	},
+	columnMeta: metaHelper()
+});
+/** A typed TanStack column helper bound to the DataTable feature set. */
+function createDataTableColumnHelper() {
+	return createColumnHelper();
+}
+const DEFAULT_PAGE_SIZE_OPTIONS = [
+	10,
+	25,
+	50,
+	100
+];
+const DEFAULT_MAX_HEIGHT = "36rem";
+const ESTIMATED_ROW_HEIGHT = 37;
+const SKELETON_ROWS = 5;
+const SELECT_COLUMN_WIDTH = "2.25rem";
+const ACTIONS_COLUMN_WIDTH = "3rem";
+const AUTO_COLUMN_MIN_WIDTH = "10rem";
+const NO_SELECTION = [];
+function columnLabel(column) {
+	const { meta, header } = column.columnDef;
+	if (meta?.label) return meta.label;
+	if (typeof header === "string") return header;
+	return column.id;
+}
+function selectionFromIds(ids) {
+	return Object.fromEntries(ids.map((id) => [id, true]));
+}
+function idsFromSelection(selection) {
+	return Object.keys(selection).filter((id) => selection[id]);
+}
+const numberFormat = new Intl.NumberFormat();
+/**
+* A table for large, interactive lists: sorting, column filters, global
+* search, paging, row selection and row actions, in client or server mode,
+* with virtualized rows. Built on the shadcn table, TanStack Table v9 and
+* TanStack Virtual.
+*/
+function DataTable(props) {
+	const { label, columns, rows, getRowId, getRowLabel, selection, onSelectionChange, rowActions, isLoading = false, error, onRetry, emptyLabel = "No rows yet", emptyDescription, searchable = true, searchPlaceholder = "Search...", pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS, maxHeight = DEFAULT_MAX_HEIGHT, className } = props;
+	const serverMode = props.mode === "server";
+	const paginate = serverMode || props.paginate !== false;
+	const [ownState, setOwnState] = React.useState(() => createDataTableState(props.mode === "server" ? void 0 : props.defaultState));
+	const state = props.state ?? ownState;
+	const stateRef = React.useRef(state);
+	stateRef.current = state;
+	const controlled = props.state !== void 0;
+	const { onStateChange } = props;
+	const setSlice = (key, updater) => {
+		const previous = stateRef.current;
+		const next = updateDataTableState(previous, key, updater);
+		if (next === previous) return;
+		stateRef.current = next;
+		if (!controlled) setOwnState(next);
+		onStateChange?.(next);
+	};
+	const selectable = onSelectionChange !== void 0 || selection !== void 0;
+	const [ownSelection, setOwnSelection] = React.useState({});
+	const controlledSelection = React.useMemo(() => selection === void 0 ? void 0 : selectionFromIds(selection ?? NO_SELECTION), [selection]);
+	const rowSelection = controlledSelection ?? ownSelection;
+	const rowSelectionRef = React.useRef(rowSelection);
+	rowSelectionRef.current = rowSelection;
+	const setRowSelection = (updater) => {
+		const next = functionalUpdate(updater, rowSelectionRef.current);
+		rowSelectionRef.current = next;
+		if (controlledSelection === void 0) setOwnSelection(next);
+		onSelectionChange?.(idsFromSelection(next));
+	};
+	const table = useTable({
+		features: dataTableFeatures,
+		columns,
+		data: rows,
+		getRowId: (row) => getRowId(row),
+		defaultColumn: { filterFn: "equalsString" },
+		globalFilterFn: "includesString",
+		state: {
+			sorting: state.sorting,
+			columnFilters: state.columnFilters,
+			globalFilter: state.globalFilter,
+			pagination: state.pagination,
+			rowSelection
+		},
+		onSortingChange: (updater) => setSlice("sorting", updater),
+		onColumnFiltersChange: (updater) => setSlice("columnFilters", updater),
+		onGlobalFilterChange: (updater) => setSlice("globalFilter", updater),
+		onPaginationChange: (updater) => setSlice("pagination", updater),
+		onRowSelectionChange: setRowSelection,
+		autoResetPageIndex: false,
+		enableMultiSort: false,
+		enableRowSelection: selectable,
+		isRowRangeSelectionEvent: (event) => event.shiftKey === true,
+		manualSorting: serverMode,
+		manualFiltering: serverMode,
+		manualPagination: !paginate || serverMode,
+		...serverMode ? { rowCount: props.total } : {}
+	});
+	const scrollRef = React.useRef(null);
+	const viewportWidth = useClientWidth(scrollRef);
+	const isShown = (column) => {
+		const hideBelow = column.columnDef.meta?.hideBelow;
+		return !hideBelow || viewportWidth === void 0 || viewportWidth >= BREAKPOINT_WIDTHS[hideBelow];
+	};
+	const visibleRows = table.getRowModel().rows;
+	const rowCount = table.getRowCount();
+	const pageOffset = paginate ? state.pagination.pageIndex * state.pagination.pageSize : 0;
+	const allLeafColumns = table.getAllLeafColumns();
+	const leafColumns = allLeafColumns.filter(isShown);
+	const filterColumns = allLeafColumns.filter((column) => column.columnDef.meta?.filter);
+	const hasActions = rowActions !== void 0;
+	const columnCount = leafColumns.length + (selectable ? 1 : 0) + (hasActions ? 1 : 0);
+	const tableMinWidth = `calc(${[
+		...selectable ? [SELECT_COLUMN_WIDTH] : [],
+		...leafColumns.map((column) => column.columnDef.meta?.width ?? AUTO_COLUMN_MIN_WIDTH),
+		...hasActions ? [ACTIONS_COLUMN_WIDTH] : []
+	].join(" + ")})`;
+	const isFiltered = state.globalFilter !== "" || state.columnFilters.length > 0;
+	const selectedCount = idsFromSelection(rowSelection).length;
+	const rowLabel = (row, id) => getRowLabel?.(row) ?? id;
+	const [overflowsX, setOverflowsX] = React.useState(false);
+	React.useLayoutEffect(() => {
+		const element = scrollRef.current;
+		if (element) setOverflowsX(element.scrollWidth > element.clientWidth + 1);
+	});
+	const virtualizer = useVirtualizer({
+		count: visibleRows.length,
+		getScrollElement: () => scrollRef.current,
+		estimateSize: () => ESTIMATED_ROW_HEIGHT,
+		getItemKey: (index) => visibleRows[index]?.id ?? index,
+		overscan: 8
+	});
+	const { pageIndex } = state.pagination;
+	React.useEffect(() => {
+		if (pageIndex >= 0) scrollRef.current?.scrollTo({ top: 0 });
+	}, [pageIndex]);
+	const virtualItems = virtualizer.getVirtualItems();
+	const paddingTop = virtualItems[0]?.start ?? 0;
+	const paddingBottom = virtualItems.length > 0 ? virtualizer.getTotalSize() - (virtualItems[virtualItems.length - 1]?.end ?? 0) : 0;
+	const showSkeleton = isLoading && visibleRows.length === 0 && !error;
+	const showBodyError = Boolean(error) && visibleRows.length === 0;
+	const showBannerError = Boolean(error) && visibleRows.length > 0;
+	const clearFilters = () => {
+		setSlice("columnFilters", []);
+		setSlice("globalFilter", "");
+	};
+	const errorRetry = onRetry ? /* @__PURE__ */ jsx(Button, {
+		variant: "outline",
+		size: "sm",
+		onClick: onRetry,
+		children: "Retry"
+	}) : null;
+	let body;
+	if (showBodyError) body = /* @__PURE__ */ jsx(StateRow, {
+		columnCount,
+		children: /* @__PURE__ */ jsxs(Empty, { children: [/* @__PURE__ */ jsxs(EmptyHeader, { children: [
+			/* @__PURE__ */ jsx(EmptyMedia, {
+				variant: "icon",
+				className: "bg-destructive/10 text-destructive",
+				children: /* @__PURE__ */ jsx(AlertCircleIcon, {})
+			}),
+			/* @__PURE__ */ jsx(EmptyTitle, { children: "Could not load rows" }),
+			/* @__PURE__ */ jsx(EmptyDescription, { children: error })
+		] }), errorRetry ? /* @__PURE__ */ jsx(EmptyContent, { children: errorRetry }) : null] })
+	});
+	else if (showSkeleton) body = Array.from({ length: Math.min(SKELETON_ROWS, state.pagination.pageSize) }, (_, i) => /* @__PURE__ */ jsx(TableRow, {
+		"data-slot": "data-table-skeleton-row",
+		children: Array.from({ length: columnCount }, (_, j) => /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full max-w-32" }) }, j))
+	}, i));
+	else if (visibleRows.length === 0) body = /* @__PURE__ */ jsx(StateRow, {
+		columnCount,
+		children: isFiltered ? /* @__PURE__ */ jsxs(Empty, { children: [/* @__PURE__ */ jsxs(EmptyHeader, { children: [
+			/* @__PURE__ */ jsx(EmptyMedia, {
+				variant: "icon",
+				children: /* @__PURE__ */ jsx(SearchXIcon, {})
+			}),
+			/* @__PURE__ */ jsx(EmptyTitle, { children: "No matching rows" }),
+			/* @__PURE__ */ jsx(EmptyDescription, { children: "Nothing matches the current search and filters." })
+		] }), /* @__PURE__ */ jsx(EmptyContent, { children: /* @__PURE__ */ jsx(Button, {
+			variant: "outline",
+			size: "sm",
+			onClick: clearFilters,
+			children: "Clear search and filters"
+		}) })] }) : /* @__PURE__ */ jsx(Empty, { children: /* @__PURE__ */ jsxs(EmptyHeader, { children: [
+			/* @__PURE__ */ jsx(EmptyMedia, {
+				variant: "icon",
+				children: /* @__PURE__ */ jsx(TableIcon, {})
+			}),
+			/* @__PURE__ */ jsx(EmptyTitle, { children: /* @__PURE__ */ jsx("h3", { children: emptyLabel }) }),
+			emptyDescription ? /* @__PURE__ */ jsx(EmptyDescription, { children: emptyDescription }) : null
+		] }) })
+	});
+	else body = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		paddingTop > 0 ? /* @__PURE__ */ jsx(SpacerRow, {
+			height: paddingTop,
+			columnCount
+		}) : null,
+		virtualItems.map((item) => {
+			const row = visibleRows[item.index];
+			if (!row) return null;
+			const name = rowLabel(row.original, row.id);
+			const selected = row.getIsSelected();
+			const actions = rowActions?.(row.original);
+			return /* @__PURE__ */ jsxs(TableRow, {
+				ref: virtualizer.measureElement,
+				"data-index": item.index,
+				"data-state": selected ? "selected" : void 0,
+				"aria-rowindex": pageOffset + item.index + 2,
+				children: [
+					selectable ? /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Checkbox, {
+						"aria-label": `Select ${name}`,
+						checked: selected,
+						onCheckedChange: (checked, details) => row.getToggleSelectedHandler()({
+							target: { checked },
+							shiftKey: details.event.shiftKey
+						})
+					}) }) : null,
+					row.getAllCells().filter((cell) => isShown(cell.column)).map((cell) => /* @__PURE__ */ jsx(TableCell, {
+						className: cn("overflow-hidden text-ellipsis", cell.column.columnDef.meta?.align === "end" && "text-right tabular-nums"),
+						children: /* @__PURE__ */ jsx(table.FlexRender, { cell })
+					}, cell.id)),
+					hasActions ? /* @__PURE__ */ jsx(TableCell, {
+						className: cn("text-right", STICKY_ACTIONS_CELL),
+						children: actions && actions.length > 0 ? /* @__PURE__ */ jsx(RowActionsMenu, {
+							name,
+							actions
+						}) : null
+					}) : null
+				]
+			}, row.id);
+		}),
+		paddingBottom > 0 ? /* @__PURE__ */ jsx(SpacerRow, {
+			height: paddingBottom,
+			columnCount
+		}) : null
+	] });
+	const pageCount = Math.max(table.getPageCount(), 1);
+	React.useEffect(() => {
+		if (!serverMode && paginate && state.pagination.pageIndex >= pageCount) table.setPageIndex(pageCount - 1);
+	}, [
+		pageCount,
+		paginate,
+		serverMode,
+		state.pagination.pageIndex,
+		table
+	]);
+	const hasRows = visibleRows.length > 0;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "data-table",
+		className: cn("flex min-w-0 flex-col gap-2", className),
+		children: [
+			searchable || filterColumns.length > 0 ? /* @__PURE__ */ jsxs("div", {
+				"data-slot": "data-table-toolbar",
+				className: "@container/data-table-toolbar flex flex-wrap items-center gap-2",
+				children: [
+					searchable ? /* @__PURE__ */ jsxs(InputGroup, {
+						className: "w-full @min-[640px]/data-table-toolbar:w-64",
+						children: [/* @__PURE__ */ jsx(InputGroupAddon, { children: /* @__PURE__ */ jsx(SearchIcon, {}) }), /* @__PURE__ */ jsx(InputGroupInput, {
+							type: "search",
+							className: "[&::-webkit-search-cancel-button]:appearance-none",
+							"aria-label": `Search ${label}`,
+							placeholder: searchPlaceholder,
+							value: state.globalFilter,
+							onChange: (event) => table.setGlobalFilter(event.target.value)
+						})]
+					}) : null,
+					filterColumns.map((column) => /* @__PURE__ */ jsx(ColumnFilter, { column }, column.id)),
+					isFiltered ? /* @__PURE__ */ jsxs(Button, {
+						variant: "ghost",
+						size: "sm",
+						onClick: clearFilters,
+						children: [/* @__PURE__ */ jsx(XIcon, { "data-icon": "inline-start" }), "Reset"]
+					}) : null
+				]
+			}) : null,
+			showBannerError ? /* @__PURE__ */ jsxs(Alert, {
+				variant: "destructive",
+				"data-slot": "data-table-error",
+				children: [
+					/* @__PURE__ */ jsx(AlertCircleIcon, {}),
+					/* @__PURE__ */ jsx(AlertTitle, { children: "Could not refresh rows" }),
+					/* @__PURE__ */ jsx(AlertDescription, { children: error }),
+					onRetry ? /* @__PURE__ */ jsx(AlertAction, { children: /* @__PURE__ */ jsxs(Button, {
+						variant: "outline",
+						size: "xs",
+						className: "text-foreground",
+						onClick: onRetry,
+						children: [/* @__PURE__ */ jsx(RotateCwIcon, {}), "Retry"]
+					}) }) : null
+				]
+			}) : null,
+			/* @__PURE__ */ jsx("section", {
+				ref: scrollRef,
+				"aria-label": label,
+				"aria-busy": isLoading || void 0,
+				tabIndex: 0,
+				"data-slot": "data-table-scroll",
+				"data-overflow-x": overflowsX && visibleRows.length > 0 || void 0,
+				className: "@container/data-table-scroll relative max-h-(--data-table-max-height) overflow-auto rounded-lg border bg-background outline-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 *:data-[slot=table-container]:overflow-visible",
+				style: { "--data-table-max-height": maxHeight },
+				children: /* @__PURE__ */ jsxs(Table, {
+					"aria-label": label,
+					"aria-rowcount": rowCount + 1,
+					className: "table-fixed",
+					style: { minWidth: tableMinWidth },
+					children: [
+						/* @__PURE__ */ jsxs("colgroup", { children: [
+							selectable ? /* @__PURE__ */ jsx("col", { className: "w-9" }) : null,
+							leafColumns.map((column) => /* @__PURE__ */ jsx("col", { style: { width: column.columnDef.meta?.width } }, column.id)),
+							hasActions ? /* @__PURE__ */ jsx("col", { className: "w-12" }) : null
+						] }),
+						/* @__PURE__ */ jsx(TableHeader, {
+							className: "sticky top-0 z-10 bg-background [&_tr]:border-b-0 [&_th]:shadow-[inset_0_-1px_0_var(--color-border)]",
+							children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxs(TableRow, {
+								"aria-rowindex": 1,
+								className: "hover:bg-transparent",
+								children: [
+									selectable ? /* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsx(Checkbox, {
+										"aria-label": "Select all rows on this page",
+										className: "data-indeterminate:border-primary data-indeterminate:bg-primary data-indeterminate:text-primary-foreground data-indeterminate:before:h-0.5 data-indeterminate:before:w-2 data-indeterminate:before:rounded-full data-indeterminate:before:bg-current dark:data-indeterminate:bg-primary data-indeterminate:*:data-[slot=checkbox-indicator]:hidden",
+										disabled: !hasRows,
+										checked: hasRows && table.getIsAllPageRowsSelected(),
+										indeterminate: table.getIsSomePageRowsSelected(),
+										onCheckedChange: (checked) => table.toggleAllPageRowsSelected(checked)
+									}) }) : null,
+									headerGroup.headers.filter((header) => isShown(header.column)).map((header) => {
+										const { column } = header;
+										const sorted = column.getIsSorted();
+										const end = column.columnDef.meta?.align === "end";
+										return /* @__PURE__ */ jsx(TableHead, {
+											colSpan: header.colSpan,
+											"aria-sort": sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : void 0,
+											className: cn(end && "text-right"),
+											children: header.isPlaceholder ? null : column.getCanSort() ? /* @__PURE__ */ jsxs(Button, {
+												variant: "ghost",
+												size: "sm",
+												className: cn("-mx-2 max-w-[calc(100%+1rem)]", end && "flex-row-reverse"),
+												onClick: column.getToggleSortingHandler(),
+												children: [/* @__PURE__ */ jsx("span", {
+													className: "truncate",
+													children: /* @__PURE__ */ jsx(table.FlexRender, { header })
+												}), sorted === "asc" ? /* @__PURE__ */ jsx(ArrowUpIcon, { "data-icon": end ? "inline-start" : "inline-end" }) : sorted === "desc" ? /* @__PURE__ */ jsx(ArrowDownIcon, { "data-icon": end ? "inline-start" : "inline-end" }) : /* @__PURE__ */ jsx(ArrowUpDownIcon, {
+													"data-icon": end ? "inline-start" : "inline-end",
+													className: "text-muted-foreground"
+												})]
+											}) : /* @__PURE__ */ jsx(table.FlexRender, { header })
+										}, header.id);
+									}),
+									hasActions ? /* @__PURE__ */ jsx(TableHead, {
+										className: cn("bg-background", STICKY_ACTIONS_CELL, "in-data-[overflow-x=true]:shadow-[inset_1px_0_0_var(--color-border),inset_0_-1px_0_var(--color-border)]!"),
+										children: /* @__PURE__ */ jsx("span", {
+											className: "sr-only",
+											children: "Actions"
+										})
+									}) : null
+								]
+							}, headerGroup.id))
+						}),
+						/* @__PURE__ */ jsx(TableBody, { children: body })
+					]
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				"data-slot": "data-table-footer",
+				className: "flex flex-wrap items-center justify-between gap-x-4 gap-y-2 text-xs text-muted-foreground",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ jsx("p", {
+						"aria-live": "polite",
+						className: "tabular-nums",
+						children: showSkeleton ? "Loading rows" : selectable && selectedCount > 0 ? selectedCount > rowCount ? `${numberFormat.format(selectedCount)} selected` : `${numberFormat.format(selectedCount)} of ${numberFormat.format(rowCount)} selected` : `${numberFormat.format(rowCount)} ${rowCount === 1 ? "row" : "rows"}`
+					}), isLoading && hasRows ? /* @__PURE__ */ jsx(Spinner, { className: "size-3.5" }) : null]
+				}), paginate && rowCount > 0 ? /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-wrap items-center gap-x-4 gap-y-2",
+					children: [/* @__PURE__ */ jsx(PageSizeSelect, {
+						value: state.pagination.pageSize,
+						options: pageSizeOptions,
+						onChange: (pageSize) => table.setPageSize(pageSize)
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "flex shrink-0 items-center gap-2",
+						children: [/* @__PURE__ */ jsxs("p", {
+							className: "tabular-nums",
+							children: [
+								"Page ",
+								numberFormat.format(state.pagination.pageIndex + 1),
+								" of",
+								" ",
+								numberFormat.format(pageCount)
+							]
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-1",
+							children: [
+								/* @__PURE__ */ jsx(Button, {
+									variant: "outline",
+									size: "icon-sm",
+									"aria-label": "First page",
+									disabled: !table.getCanPreviousPage(),
+									onClick: () => table.firstPage(),
+									children: /* @__PURE__ */ jsx(ChevronsLeftIcon, {})
+								}),
+								/* @__PURE__ */ jsx(Button, {
+									variant: "outline",
+									size: "icon-sm",
+									"aria-label": "Previous page",
+									disabled: !table.getCanPreviousPage(),
+									onClick: () => table.previousPage(),
+									children: /* @__PURE__ */ jsx(ChevronLeftIcon, {})
+								}),
+								/* @__PURE__ */ jsx(Button, {
+									variant: "outline",
+									size: "icon-sm",
+									"aria-label": "Next page",
+									disabled: !table.getCanNextPage(),
+									onClick: () => table.nextPage(),
+									children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
+								}),
+								/* @__PURE__ */ jsx(Button, {
+									variant: "outline",
+									size: "icon-sm",
+									"aria-label": "Last page",
+									disabled: !table.getCanNextPage(),
+									onClick: () => table.lastPage(),
+									children: /* @__PURE__ */ jsx(ChevronsRightIcon, {})
+								})
+							]
+						})]
+					})]
+				}) : null]
+			})
+		]
+	});
+}
+/**
+* A body row holding the empty or error state. The state is pinned to the
+* scroll area's visible width, so on a table wider than the screen it stays
+* centered in view rather than across the full table.
+*/
+function StateRow({ columnCount, children }) {
+	return /* @__PURE__ */ jsx(TableRow, {
+		className: "hover:bg-transparent",
+		children: /* @__PURE__ */ jsx(TableCell, {
+			colSpan: columnCount,
+			className: "p-0 whitespace-normal",
+			children: /* @__PURE__ */ jsx("div", {
+				"data-slot": "data-table-state",
+				className: "sticky left-0 w-[100cqw] p-2",
+				children
+			})
+		})
+	});
+}
+/**
+* The row-actions column sticks to the right edge, so the menu stays in reach
+* while the table scrolls sideways. Its fill tracks the row's hover and
+* selected states, opaque so scrolled cells pass under it. While the table
+* overflows, a rule marks its edge and a short fade in the same fill runs
+* ahead of it, so text passing under the column fades out instead of being
+* cut mid-glyph.
+*/
+const STICKY_ACTIONS_CELL = "sticky right-0 z-[1] [--data-table-sticky-fill:var(--color-background)] bg-(--data-table-sticky-fill) [tr:hover>&]:[--data-table-sticky-fill:color-mix(in_oklab,var(--color-muted)_50%,var(--color-background))] [tr:has([aria-expanded=true])>&]:[--data-table-sticky-fill:color-mix(in_oklab,var(--color-muted)_50%,var(--color-background))] [tr[data-state=selected]>&]:[--data-table-sticky-fill:var(--color-muted)] in-data-[overflow-x=true]:shadow-[inset_1px_0_0_var(--color-border)] in-data-[overflow-x=true]:before:pointer-events-none in-data-[overflow-x=true]:before:absolute in-data-[overflow-x=true]:before:inset-y-0 in-data-[overflow-x=true]:before:right-full in-data-[overflow-x=true]:before:w-6 in-data-[overflow-x=true]:before:bg-linear-to-l in-data-[overflow-x=true]:before:from-(--data-table-sticky-fill) in-data-[overflow-x=true]:before:to-transparent";
+/**
+* The element's client width (inside borders and scrollbar), kept current on
+* resize. Measured in a layout effect rather than with ahooks' useSize, which
+* reports one animation frame late: a phone would first paint the columns
+* that `hideBelow` then removes.
+*/
+function useClientWidth(ref) {
+	const [width, setWidth] = React.useState();
+	React.useLayoutEffect(() => {
+		const element = ref.current;
+		if (!element) return;
+		const measure = () => setWidth(element.clientWidth);
+		measure();
+		const observer = new ResizeObserver(measure);
+		observer.observe(element);
+		return () => observer.disconnect();
+	}, [ref]);
+	return width;
+}
+/** Stands in for the rows scrolled out of view, so the scrollbar stays true. */
+function SpacerRow({ height, columnCount }) {
+	return /* @__PURE__ */ jsx("tr", {
+		"aria-hidden": "true",
+		"data-slot": "data-table-spacer",
+		children: /* @__PURE__ */ jsx("td", {
+			colSpan: columnCount,
+			style: {
+				height,
+				padding: 0
+			}
+		})
+	});
+}
+function RowActionsMenu({ name, actions }) {
+	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+		render: /* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			size: "icon-sm",
+			"aria-label": `Actions for ${name}`
+		}),
+		children: /* @__PURE__ */ jsx(MoreHorizontalIcon, {})
+	}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+		align: "end",
+		className: "w-auto",
+		children: actions.map((action) => /* @__PURE__ */ jsx(DropdownMenuItem, {
+			variant: action.destructive ? "destructive" : "default",
+			disabled: action.disabled,
+			onClick: () => action.onSelect(),
+			children: action.label
+		}, action.label))
+	})] });
+}
+const ALL = "__all__";
+function ColumnFilter({ column }) {
+	const name = columnLabel(column);
+	const options = column.columnDef.meta?.filter?.options ?? [];
+	const items = [{
+		label: "All",
+		value: ALL
+	}, ...options];
+	const current = column.getFilterValue();
+	return /* @__PURE__ */ jsxs(Select, {
+		items,
+		value: typeof current === "string" ? current : ALL,
+		onValueChange: (next) => column.setFilterValue(next === ALL || next == null ? void 0 : next),
+		children: [/* @__PURE__ */ jsxs(SelectTrigger, {
+			"aria-label": `Filter by ${name}`,
+			className: "min-w-32 flex-1 @min-[640px]/data-table-toolbar:flex-none",
+			children: [/* @__PURE__ */ jsxs("span", {
+				className: "text-muted-foreground",
+				children: [name, ":"]
+			}), /* @__PURE__ */ jsx(SelectValue, {})]
+		}), /* @__PURE__ */ jsx(SelectContent, { children: items.map((item) => /* @__PURE__ */ jsx(SelectItem, {
+			value: item.value,
+			children: item.label
+		}, item.value)) })]
+	});
+}
+function PageSizeSelect({ value, options, onChange }) {
+	const id = React.useId();
+	const items = (options.includes(value) ? options : [...options, value].sort((a, b) => a - b)).map((size) => ({
+		label: String(size),
+		value: size
+	}));
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-2",
+		children: [/* @__PURE__ */ jsx("span", {
+			id,
+			children: "Rows per page"
+		}), /* @__PURE__ */ jsxs(Select, {
+			items,
+			value,
+			onValueChange: (next) => {
+				if (typeof next === "number") onChange(next);
+			},
+			children: [/* @__PURE__ */ jsx(SelectTrigger, {
+				size: "sm",
+				"aria-labelledby": id,
+				className: "tabular-nums",
+				children: /* @__PURE__ */ jsx(SelectValue, {})
+			}), /* @__PURE__ */ jsx(SelectContent, { children: items.map((item) => /* @__PURE__ */ jsx(SelectItem, {
+				value: item.value,
+				children: item.label
+			}, item.value)) })]
+		})]
+	});
+}
+//#endregion
+export { DataTable, createDataTableColumnHelper, createDataTableState, dataTableFeatures };

package/dist/compositions/date-range-picker/date-range-options.d.ts

@@ -0,0 +1,28 @@
+//#region src/compositions/date-range-picker/date-range-options.d.ts
+/** The preset name of a range picked or adjusted on the calendar. */
+export declare const CUSTOM_DATE_RANGE_PRESET = "custom";
+/** A committed date range: the preset that produced it, or "custom", plus both ends. */
+export interface DateRangeValue {
+  readonly preset: string;
+  /** Range start, yyyy-MM-dd (local calendar). */
+  readonly from: string;
+  /** Range end, yyyy-MM-dd (local calendar), inclusive. */
+  readonly to: string;
+}
+/** A labeled resolver that turns "today" into a concrete range. */
+export interface DateRangeShortcut {
+  readonly label: string;
+  readonly resolve: (today: Date) => {
+    from: string;
+    to: string;
+  };
+}
+/** A named preset: a shortcut with a stable `value` and the span it can need. */
+export interface DateRangeOption extends DateRangeShortcut {
+  /** Stable preset name, stored as `DateRangeValue.preset`. Never "custom". */
+  readonly value: string;
+  /** The longest span, in days, the preset can resolve to. */
+  readonly requiredDays: number;
+}
+export declare const DEFAULT_DATE_RANGE_OPTIONS: ReadonlyArray<DateRangeOption>;
+//#endregion