@datum-cloud/datum-ui 0.2.0-alpha.8 → 0.3.0-alpha.9d90881

package/dist/data-table/index.mjs

@@ -0,0 +1,1162 @@
+import { t as cn } from "../utils-Bfgoe-Gm.mjs";
+import { t as Button } from "../button-AzpnV-WB.mjs";
+import { t as Checkbox } from "../checkbox-DB5_3E_l.mjs";
+import "../dialog-Bm4trnic.mjs";
+import { a as CommandInput, i as CommandGroup, o as CommandItem, r as CommandEmpty, s as CommandList, t as Command } from "../command-DQlO6uTL.mjs";
+import { t as Input } from "../input-C-ZmsHkk.mjs";
+import { t as Label } from "../label-ClzLBWRT.mjs";
+import { i as DropdownMenuItem, l as DropdownMenuTrigger, r as DropdownMenuContent, t as DropdownMenu } from "../dropdown-menu-Xahj42Gr.mjs";
+import { i as PopoverTrigger, r as PopoverContent, t as Popover } from "../popover-CYzXdp9q.mjs";
+import { d as Select, f as SelectContent, h as SelectValue, m as SelectTrigger, p as SelectItem } from "../select-BznmyqBr.mjs";
+import { t as Skeleton } from "../skeleton-D3qW_KvG.mjs";
+import { c as TableRow, i as TableCell, n as TableBody, o as TableHead, s as TableHeader, t as Table } from "../table-fZEvpdD-.mjs";
+import { t as CalendarDatePicker } from "../calendar-date-picker-BBAg78Lg.mjs";
+import { cva } from "class-variance-authority";
+import { ArrowDown, ArrowUp, ArrowUpDown, Check, ChevronDown, ChevronLeft, ChevronRight, MoreHorizontal, X } from "lucide-react";
+import { createContext, use, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { parseAsInteger, parseAsJson, parseAsString, useQueryStates } from "nuqs";
+import { flexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
+
+//#region src/components/features/data-table/constants.ts
+const DEFAULT_PAGE_SIZE = 20;
+const DEFAULT_PAGE_SIZES = [
+	10,
+	20,
+	30,
+	50
+];
+const DEFAULT_DEBOUNCE_MS = 300;
+const DEFAULT_LOADING_ROWS = 5;
+
+//#endregion
+//#region src/components/features/data-table/adapters/nuqs-adapter.ts
+/**
+* Default parsers for core DataTable state.
+* URL params: ?sort=[...]&q=hello&page=0&size=20
+*/
+function sortingValidator(value) {
+	if (!Array.isArray(value)) return null;
+	return value.every((item) => typeof item === "object" && item !== null && typeof item.id === "string" && typeof item.desc === "boolean") ? value : null;
+}
+const coreSearchParams = {
+	sort: parseAsJson(sortingValidator).withDefault([]),
+	q: parseAsString.withDefault(""),
+	page: parseAsInteger.withDefault(0),
+	size: parseAsInteger.withDefault(DEFAULT_PAGE_SIZE)
+};
+/**
+* Hook that creates a StateAdapter backed by nuqs URL query state.
+*
+* Manages sorting, search, pageIndex, and pageSize automatically.
+* Consumer only needs to declare custom filter parsers.
+*
+* Requires `nuqs` to be installed in the consumer app.
+*
+* @example
+* ```tsx
+* // Zero config — all defaults synced to URL
+* const stateAdapter = useNuqsAdapter()
+* const tableState = useDataTableClient({ data, columns, stateAdapter })
+*
+* // With custom filters synced to URL
+* import { parseAsString } from 'nuqs'
+*
+* const stateAdapter = useNuqsAdapter({
+*   filters: { status: parseAsString.withDefault('') },
+* })
+* const tableState = useDataTableClient({ data, columns, stateAdapter })
+* ```
+*/
+function useNuqsAdapter(options = {}) {
+	const { filters: filterParsers } = options;
+	const [coreState, setCoreState] = useQueryStates(coreSearchParams);
+	const hasFilters = filterParsers != null && Object.keys(filterParsers).length > 0;
+	const [filterState, setFilterState] = useQueryStates(hasFilters ? filterParsers : { _dt: parseAsString.withDefault("") });
+	return useMemo(() => ({
+		read: () => ({
+			sorting: coreState.sort,
+			search: coreState.q,
+			pageIndex: coreState.page,
+			pageSize: coreState.size,
+			...hasFilters ? { filters: filterState } : {}
+		}),
+		write: (state) => {
+			setCoreState({
+				sort: state.sorting,
+				q: state.search,
+				page: state.pageIndex ?? 0,
+				size: state.pageSize ?? DEFAULT_PAGE_SIZE
+			});
+			if (hasFilters) setFilterState(state.filters);
+		}
+	}), [
+		coreState,
+		filterState,
+		hasFilters,
+		setCoreState,
+		setFilterState
+	]);
+}
+
+//#endregion
+//#region src/components/features/data-table/columns/selection-column.tsx
+const SELECTION_COLUMN_ID = "select";
+function createSelectionColumn(options = {}) {
+	const { className, headerClassName, renderHeader, renderCell } = options;
+	return {
+		id: SELECTION_COLUMN_ID,
+		size: 40,
+		enableSorting: false,
+		enableHiding: false,
+		header: renderHeader ?? (({ table }) => /* @__PURE__ */ jsx(Checkbox, {
+			checked: table.getIsAllPageRowsSelected() || table.getIsSomePageRowsSelected() && "indeterminate",
+			onCheckedChange: (value) => table.toggleAllPageRowsSelected(!!value),
+			"aria-label": "Select all",
+			className: headerClassName
+		})),
+		cell: renderCell ?? (({ row }) => /* @__PURE__ */ jsx(Checkbox, {
+			checked: row.getIsSelected(),
+			onCheckedChange: (value) => row.toggleSelected(!!value),
+			"aria-label": "Select row",
+			className
+		}))
+	};
+}
+function hasSelectionColumn(columns) {
+	return columns.some((col) => "id" in col && col.id === SELECTION_COLUMN_ID);
+}
+function withSelectionColumn(columns, options = {}) {
+	if (hasSelectionColumn(columns)) return columns;
+	return [createSelectionColumn(options), ...columns];
+}
+
+//#endregion
+//#region src/components/features/data-table/core/data-table-context.tsx
+const DataTableContext = createContext(null);
+function useDataTableContext() {
+	const context = use(DataTableContext);
+	if (!context) throw new Error("useDataTableContext must be used within a DataTable provider");
+	return context;
+}
+
+//#endregion
+//#region src/components/features/data-table/components/bulk-actions.tsx
+function DataTableBulkActions({ children, className }) {
+	const { table, rowSelection } = useDataTableContext();
+	const selectedRows = useMemo(() => {
+		return table.getFilteredSelectedRowModel().rows.map((row) => row.original);
+	}, [table, rowSelection]);
+	if (selectedRows.length === 0) return null;
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dt-bulk-actions",
+		className,
+		children: children(selectedRows)
+	});
+}
+
+//#endregion
+//#region src/components/features/data-table/components/column-header.tsx
+function DataTableColumnHeader({ column, title, className }) {
+	if (!column.getCanSort()) return /* @__PURE__ */ jsx("div", {
+		className: cn(className),
+		"data-slot": "dt-column-header",
+		children: title
+	});
+	const sorted = column.getIsSorted();
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex items-center gap-2", className),
+		"data-slot": "dt-column-header",
+		children: /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			className: "flex items-center gap-1 hover:text-foreground -ml-3 h-8 px-3 cursor-pointer",
+			onClick: () => column.toggleSorting(sorted === "asc"),
+			children: [/* @__PURE__ */ jsx("span", { children: title }), sorted === "desc" ? /* @__PURE__ */ jsx(ArrowDown, { className: "size-4" }) : sorted === "asc" ? /* @__PURE__ */ jsx(ArrowUp, { className: "size-4" }) : /* @__PURE__ */ jsx(ArrowUpDown, { className: "size-4" })]
+		})
+	});
+}
+
+//#endregion
+//#region src/components/features/data-table/components/content.tsx
+function resolveClassName(value, item) {
+	if (typeof value === "function") return value(item);
+	return value;
+}
+function renderInlineContentRow(entry, colSpan, rows) {
+	return /* @__PURE__ */ jsx(TableRow, {
+		"data-slot": "dt-inline-content",
+		"data-position": entry.position,
+		className: cn("transition-all duration-200", entry.className),
+		children: /* @__PURE__ */ jsx(TableCell, {
+			colSpan,
+			children: entry.render({
+				onClose: entry.onClose,
+				rowData: entry.position === "row" ? rows.find((r) => r.id === entry.rowId)?.original ?? null : null
+			})
+		})
+	}, entry.id);
+}
+function DataTableContent({ emptyMessage, className, tableClassName, headerClassName, headerRowClassName, headerCellClassName, bodyClassName, rowClassName, cellClassName }) {
+	const { table, inlineContents } = useDataTableContext();
+	const rows = table.getRowModel().rows;
+	const openInlineContents = useMemo(() => inlineContents.filter((e) => e.open), [inlineContents]);
+	const colSpan = table.getAllColumns().length;
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("datum-ui-data-table", className),
+		"data-slot": "dt",
+		style: { overflowX: "auto" },
+		children: /* @__PURE__ */ jsxs(Table, {
+			className: cn(tableClassName),
+			"data-slot": "dt-table",
+			children: [/* @__PURE__ */ jsx(TableHeader, {
+				className: cn(headerClassName),
+				"data-slot": "dt-header",
+				children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, {
+					className: cn(headerRowClassName),
+					"data-slot": "dt-header-row",
+					children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(TableHead, {
+						className: cn(headerCellClassName),
+						"data-slot": "dt-header-cell",
+						children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())
+					}, header.id))
+				}, headerGroup.id))
+			}), /* @__PURE__ */ jsxs(TableBody, {
+				className: cn(bodyClassName),
+				"data-slot": "dt-body",
+				children: [openInlineContents.filter((e) => e.position === "top").map((entry) => renderInlineContentRow(entry, colSpan, rows)), rows.length > 0 ? rows.map((row) => {
+					const rowEntry = openInlineContents.find((e) => e.position === "row" && e.rowId === row.id);
+					if (rowEntry) return renderInlineContentRow(rowEntry, colSpan, rows);
+					return /* @__PURE__ */ jsx(TableRow, {
+						className: cn(resolveClassName(rowClassName, row)),
+						"data-slot": "dt-row",
+						"data-state": row.getIsSelected() ? "selected" : void 0,
+						children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(TableCell, {
+							className: cn(resolveClassName(cellClassName, cell)),
+							"data-slot": "dt-cell",
+							children: flexRender(cell.column.columnDef.cell, cell.getContext())
+						}, cell.id))
+					}, row.id);
+				}) : /* @__PURE__ */ jsx(TableRow, {
+					"data-slot": "dt-row",
+					children: /* @__PURE__ */ jsx(TableCell, {
+						colSpan,
+						className: "h-24 text-center",
+						"data-slot": "dt-empty",
+						children: emptyMessage ?? "No results."
+					})
+				})]
+			})]
+		})
+	});
+}
+
+//#endregion
+//#region src/components/features/data-table/components/inline-content.tsx
+function DataTableInlineContent({ position, rowId, open, onClose, className, children }) {
+	const id = useId();
+	const { registerInlineContent, unregisterInlineContent } = useDataTableContext();
+	const initialRender = useRef(true);
+	useEffect(() => {
+		registerInlineContent({
+			id,
+			position,
+			rowId,
+			open,
+			onClose,
+			className,
+			render: children
+		});
+		return () => {
+			unregisterInlineContent(id);
+		};
+	}, [
+		id,
+		registerInlineContent,
+		unregisterInlineContent
+	]);
+	useEffect(() => {
+		if (initialRender.current) {
+			initialRender.current = false;
+			return;
+		}
+		registerInlineContent({
+			id,
+			position,
+			rowId,
+			open,
+			onClose,
+			className,
+			render: children
+		});
+	}, [
+		id,
+		position,
+		rowId,
+		open,
+		onClose,
+		className,
+		children,
+		registerInlineContent
+	]);
+	return null;
+}
+
+//#endregion
+//#region src/components/features/data-table/components/loading.tsx
+function DataTableLoading({ rows = DEFAULT_LOADING_ROWS, columns = 4, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		className,
+		"data-slot": "dt-loading",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "rounded-md border",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "border-b",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "flex gap-4 p-4",
+					children: Array.from({ length: columns }, (_, i) => /* @__PURE__ */ jsx(Skeleton, { className: "h-4 flex-1" }, i))
+				})
+			}), Array.from({ length: rows }, (_, rowIndex) => /* @__PURE__ */ jsx("div", {
+				className: "flex gap-4 border-b p-4 last:border-b-0",
+				children: Array.from({ length: columns }, (_, colIndex) => /* @__PURE__ */ jsx(Skeleton, { className: "h-4 flex-1" }, colIndex))
+			}, rowIndex))]
+		})
+	});
+}
+
+//#endregion
+//#region src/components/features/data-table/components/pagination.tsx
+function DataTablePagination({ pageSizes = DEFAULT_PAGE_SIZES, className }) {
+	const { pagination, mode } = useDataTableContext();
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex items-center justify-between px-2 py-4", className),
+		"data-slot": "dt-pagination",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-sm text-muted-foreground",
+				children: "Rows per page"
+			}), /* @__PURE__ */ jsxs(Select, {
+				value: String(pagination.pageSize),
+				onValueChange: (value) => pagination.setPageSize(Number(value)),
+				children: [/* @__PURE__ */ jsx(SelectTrigger, {
+					className: "h-8 w-[70px]",
+					children: /* @__PURE__ */ jsx(SelectValue, { placeholder: String(pagination.pageSize) })
+				}), /* @__PURE__ */ jsx(SelectContent, {
+					side: "top",
+					children: pageSizes.map((size) => /* @__PURE__ */ jsx(SelectItem, {
+						value: String(size),
+						children: size
+					}, size))
+				})]
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [
+				mode === "client" && pagination.pageIndex !== void 0 && pagination.pageCount !== void 0 && /* @__PURE__ */ jsxs("span", {
+					className: "text-sm text-muted-foreground",
+					children: [
+						"Page",
+						" ",
+						pagination.pageIndex + 1,
+						" ",
+						"of",
+						" ",
+						pagination.pageCount
+					]
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					variant: "outline",
+					size: "sm",
+					onClick: pagination.prevPage,
+					disabled: !pagination.canPrevPage,
+					children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4" })
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					variant: "outline",
+					size: "sm",
+					onClick: pagination.nextPage,
+					disabled: !pagination.canNextPage,
+					children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4" })
+				})
+			]
+		})]
+	});
+}
+
+//#endregion
+//#region src/components/features/data-table/components/row-actions.tsx
+function DataTableRowActions({ row, actions, isLoading = false, className }) {
+	const data = row.original;
+	const visibleActions = actions.filter((action) => {
+		if (action.hidden === void 0) return true;
+		return typeof action.hidden === "function" ? !action.hidden(data) : !action.hidden;
+	});
+	if (visibleActions.length === 0) return null;
+	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsxs(Button, {
+			variant: "ghost",
+			size: "sm",
+			className,
+			disabled: isLoading,
+			"data-slot": "dt-row-actions",
+			children: [/* @__PURE__ */ jsx(MoreHorizontal, { className: "size-4" }), /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: "Open menu"
+			})]
+		})
+	}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+		align: "end",
+		children: visibleActions.map((action) => {
+			return /* @__PURE__ */ jsxs(DropdownMenuItem, {
+				disabled: typeof action.disabled === "function" ? action.disabled(data) : action.disabled ?? false,
+				onClick: () => action.onClick(data),
+				className: action.variant === "destructive" ? "text-destructive" : void 0,
+				children: [action.icon && /* @__PURE__ */ jsx(action.icon, { className: "mr-2 size-4" }), action.label]
+			}, action.label);
+		})
+	})] });
+}
+
+//#endregion
+//#region src/components/features/data-table/components/search.tsx
+function DataTableSearch({ placeholder = "Search...", debounceMs = DEFAULT_DEBOUNCE_MS, className }) {
+	const { search, setSearch } = useDataTableContext();
+	const [inputValue, setInputValue] = useState(search);
+	useEffect(() => {
+		setInputValue(search);
+	}, [search]);
+	useEffect(() => {
+		const timer = setTimeout(() => {
+			if (inputValue !== search) setSearch(inputValue);
+		}, debounceMs);
+		return () => clearTimeout(timer);
+	}, [
+		inputValue,
+		debounceMs,
+		search,
+		setSearch
+	]);
+	return /* @__PURE__ */ jsx(Input, {
+		placeholder,
+		value: inputValue,
+		onChange: (e) => setInputValue(e.target.value),
+		className,
+		"data-slot": "dt-search"
+	});
+}
+
+//#endregion
+//#region src/components/features/data-table/hooks/use-inline-contents.ts
+function useInlineContents() {
+	const [inlineContents, setInlineContents] = useState([]);
+	return {
+		inlineContents,
+		registerInlineContent: useCallback((entry) => {
+			setInlineContents((prev) => {
+				const index = prev.findIndex((e) => e.id === entry.id);
+				if (index >= 0) {
+					const next = [...prev];
+					next[index] = entry;
+					return next;
+				}
+				return [...prev, entry];
+			});
+		}, []),
+		unregisterInlineContent: useCallback((id) => {
+			setInlineContents((prev) => prev.filter((e) => e.id !== id));
+		}, [])
+	};
+}
+
+//#endregion
+//#region src/components/features/data-table/core/client-provider.tsx
+function ClientProvider({ data, columns, sorting, setSorting, filters, setFilter, clearFilter, clearAllFilters, search, setSearch, clearSearch, searchableColumns, searchFn, rowSelection, setRowSelection, pagination, getRowId, enableRowSelection = false, className, children }) {
+	const columnFilters = useMemo(() => Object.entries(filters).map(([id, value]) => ({
+		id,
+		value
+	})), [filters]);
+	const arrayIncludesFilter = useMemo(() => (row, columnId, filterValue) => {
+		if (filterValue == null) return true;
+		if (Array.isArray(filterValue) && filterValue.length === 0) return true;
+		const cellValue = row.getValue(columnId);
+		if (Array.isArray(filterValue)) {
+			if (Array.isArray(cellValue)) return cellValue.some((v) => filterValue.includes(v));
+			return filterValue.includes(cellValue);
+		}
+		if (typeof filterValue === "string" && typeof cellValue === "string") return cellValue.toLowerCase().includes(filterValue.toLowerCase());
+		return cellValue === filterValue;
+	}, []);
+	const globalFilterFn = useMemo(() => {
+		if (searchFn) return (row, _columnId, filterValue) => searchFn(row.original, String(filterValue));
+		if (searchableColumns && searchableColumns.length > 0) return (row, _columnId, filterValue) => {
+			const query = String(filterValue).toLowerCase();
+			return searchableColumns.some((col) => {
+				const cellValue = row.getValue(col);
+				return cellValue != null && String(cellValue).toLowerCase().includes(query);
+			});
+		};
+	}, [searchFn, searchableColumns]);
+	const table = useReactTable({
+		data,
+		columns,
+		state: {
+			sorting,
+			rowSelection,
+			globalFilter: search,
+			columnFilters,
+			pagination: {
+				pageIndex: pagination.pageIndex,
+				pageSize: pagination.pageSize
+			}
+		},
+		filterFns: { arrayIncludes: arrayIncludesFilter },
+		defaultColumn: { filterFn: arrayIncludesFilter },
+		...globalFilterFn ? { globalFilterFn } : {},
+		onSortingChange: (updater) => {
+			setSorting(typeof updater === "function" ? updater(sorting) : updater);
+		},
+		onRowSelectionChange: (updater) => {
+			setRowSelection(typeof updater === "function" ? updater(rowSelection) : updater);
+		},
+		onPaginationChange: (updater) => {
+			const next = typeof updater === "function" ? updater({
+				pageIndex: pagination.pageIndex,
+				pageSize: pagination.pageSize
+			}) : updater;
+			pagination.setPageIndex(next.pageIndex);
+			pagination.setPageSize(next.pageSize);
+		},
+		getCoreRowModel: getCoreRowModel(),
+		getSortedRowModel: getSortedRowModel(),
+		getFilteredRowModel: getFilteredRowModel(),
+		getPaginationRowModel: getPaginationRowModel(),
+		getRowId,
+		enableRowSelection: !!enableRowSelection
+	});
+	const { inlineContents, registerInlineContent, unregisterInlineContent } = useInlineContents();
+	const paginationState = useMemo(() => ({
+		canNextPage: table.getCanNextPage(),
+		canPrevPage: table.getCanPreviousPage(),
+		nextPage: () => table.nextPage(),
+		prevPage: () => table.previousPage(),
+		pageIndex: pagination.pageIndex,
+		pageCount: table.getPageCount(),
+		setPageIndex: pagination.setPageIndex,
+		pageSize: pagination.pageSize,
+		setPageSize: pagination.setPageSize
+	}), [table, pagination]);
+	return /* @__PURE__ */ jsx(DataTableContext, {
+		value: useMemo(() => ({
+			table,
+			mode: "client",
+			sorting,
+			filters,
+			search,
+			rowSelection,
+			isLoading: false,
+			setSorting,
+			setFilter,
+			clearFilter,
+			clearAllFilters,
+			setSearch,
+			clearSearch,
+			setRowSelection,
+			pagination: paginationState,
+			inlineContents,
+			registerInlineContent,
+			unregisterInlineContent
+		}), [
+			table,
+			sorting,
+			filters,
+			search,
+			rowSelection,
+			setSorting,
+			setFilter,
+			clearFilter,
+			clearAllFilters,
+			setSearch,
+			clearSearch,
+			setRowSelection,
+			paginationState,
+			inlineContents,
+			registerInlineContent,
+			unregisterInlineContent
+		]),
+		children: /* @__PURE__ */ jsx("div", {
+			className,
+			children
+		})
+	});
+}
+
+//#endregion
+//#region src/components/features/data-table/core/server-provider.tsx
+function ServerProvider({ data, columns, isLoading, sorting, setSorting, filters, setFilter, clearFilter, clearAllFilters, search, setSearch, clearSearch, rowSelection, setRowSelection, pagination, getRowId, enableRowSelection = false, className, children }) {
+	const table = useReactTable({
+		data,
+		columns,
+		state: {
+			sorting,
+			rowSelection
+		},
+		onSortingChange: (updater) => {
+			setSorting(typeof updater === "function" ? updater(sorting) : updater);
+		},
+		onRowSelectionChange: (updater) => {
+			setRowSelection(typeof updater === "function" ? updater(rowSelection) : updater);
+		},
+		getCoreRowModel: getCoreRowModel(),
+		getRowId,
+		enableRowSelection: !!enableRowSelection,
+		manualPagination: true,
+		manualSorting: true,
+		manualFiltering: true
+	});
+	const { inlineContents, registerInlineContent, unregisterInlineContent } = useInlineContents();
+	const paginationState = useMemo(() => ({
+		canNextPage: pagination.hasNextPage,
+		canPrevPage: pagination.hasPrevPage,
+		nextPage: pagination.nextPage,
+		prevPage: pagination.prevPage,
+		pageSize: pagination.limit,
+		setPageSize: pagination.setLimit
+	}), [pagination]);
+	return /* @__PURE__ */ jsx(DataTableContext, {
+		value: useMemo(() => ({
+			table,
+			mode: "server",
+			sorting,
+			filters,
+			search,
+			rowSelection,
+			isLoading,
+			setSorting,
+			setFilter,
+			clearFilter,
+			clearAllFilters,
+			setSearch,
+			clearSearch,
+			setRowSelection,
+			pagination: paginationState,
+			inlineContents,
+			registerInlineContent,
+			unregisterInlineContent
+		}), [
+			table,
+			sorting,
+			filters,
+			search,
+			rowSelection,
+			isLoading,
+			setSorting,
+			setFilter,
+			clearFilter,
+			clearAllFilters,
+			setSearch,
+			clearSearch,
+			setRowSelection,
+			paginationState,
+			inlineContents,
+			registerInlineContent,
+			unregisterInlineContent
+		]),
+		children: /* @__PURE__ */ jsx("div", {
+			className,
+			children
+		})
+	});
+}
+
+//#endregion
+//#region ../shadcn/ui/badge.tsx
+/**
+* Vanilla shadcn/ui Badge Component
+* Pure shadcn badge without Datum customizations
+* For Datum-specific variants (sunglow, butter), import from @/modules/datum-ui
+*/
+const badgeVariants = cva("inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2", {
+	variants: { variant: {
+		default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+		secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+		destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+		outline: "text-foreground"
+	} },
+	defaultVariants: { variant: "default" }
+});
+function Badge({ className, variant, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn(badgeVariants({ variant }), className),
+		...props
+	});
+}
+
+//#endregion
+//#region src/components/features/data-table/filters/checkbox-filter.tsx
+const MAX_VISIBLE_BADGES = 2;
+function CheckboxFilter({ column, label, options, className, checkboxPopoverClassName }) {
+	const { filters, setFilter, clearFilter } = useDataTableContext();
+	const [open, setOpen] = useState(false);
+	const selectedValues = filters[column] ?? [];
+	const updateValues = (newValues) => {
+		if (newValues.length > 0) setFilter(column, newValues);
+		else clearFilter(column);
+	};
+	const handleToggle = (optionValue, checked) => {
+		updateValues(checked ? [...selectedValues, optionValue] : selectedValues.filter((v) => v !== optionValue));
+	};
+	const removeValue = (optionValue) => {
+		updateValues(selectedValues.filter((v) => v !== optionValue));
+	};
+	const visibleBadges = selectedValues.slice(0, MAX_VISIBLE_BADGES);
+	const remainingCount = selectedValues.length - MAX_VISIBLE_BADGES;
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsxs(Button, {
+				variant: "outline",
+				className: cn("justify-between gap-1", className),
+				"data-slot": "dt-filter",
+				"data-testid": "dt-filter-trigger",
+				children: [selectedValues.length > 0 ? /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-1 flex-wrap",
+					children: [visibleBadges.map((val) => {
+						const opt = options.find((o) => o.value === val);
+						return /* @__PURE__ */ jsxs(Badge, {
+							variant: "secondary",
+							className: "text-xs px-1.5 py-0",
+							children: [opt?.label ?? val, /* @__PURE__ */ jsx("span", {
+								role: "button",
+								tabIndex: 0,
+								"aria-label": `Remove ${opt?.label ?? val}`,
+								className: "ml-1 rounded-sm hover:bg-muted",
+								onClick: (e) => {
+									e.stopPropagation();
+									removeValue(val);
+								},
+								onKeyDown: (e) => {
+									if (e.key === "Enter" || e.key === " ") {
+										e.preventDefault();
+										removeValue(val);
+									}
+								},
+								children: /* @__PURE__ */ jsx(X, { className: "size-3" })
+							})]
+						}, val);
+					}), remainingCount > 0 && /* @__PURE__ */ jsxs("span", {
+						className: "text-xs text-muted-foreground",
+						children: [
+							"+",
+							remainingCount,
+							" ",
+							"more"
+						]
+					})]
+				}) : /* @__PURE__ */ jsx("span", { children: label }), /* @__PURE__ */ jsx(ChevronDown, { className: "size-4 opacity-50 ml-auto shrink-0" })]
+			})
+		}), /* @__PURE__ */ jsxs(PopoverContent, {
+			className: cn("popover-content-width-full p-0", checkboxPopoverClassName),
+			align: "start",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between p-2 border-b",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-sm font-medium",
+					children: label
+				}), selectedValues.length > 0 && /* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					size: "sm",
+					className: "h-auto p-1 text-xs",
+					onClick: () => clearFilter(column),
+					children: "Clear"
+				})]
+			}), /* @__PURE__ */ jsx("div", {
+				className: "max-h-48 overflow-y-auto p-2",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "flex flex-col gap-2",
+					children: options.map((option) => /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ jsx(Checkbox, {
+							id: `${column}-${option.value}`,
+							checked: selectedValues.includes(option.value),
+							onCheckedChange: (checked) => handleToggle(option.value, checked === true)
+						}), /* @__PURE__ */ jsx(Label, {
+							htmlFor: `${column}-${option.value}`,
+							className: "text-sm font-normal cursor-pointer",
+							children: option.label
+						})]
+					}, option.value))
+				})
+			})]
+		})]
+	});
+}
+
+//#endregion
+//#region src/components/features/data-table/filters/date-picker-filter.tsx
+function DatePickerFilter({ column, label, className, datePickerPopoverClassName, disableFuture, disablePast, minDate, maxDate }) {
+	const { filters, setFilter, clearFilter } = useDataTableContext();
+	const rawValue = filters[column];
+	const dateRange = useMemo(() => {
+		const date = rawValue ? new Date(rawValue) : void 0;
+		return {
+			from: date,
+			to: date
+		};
+	}, [rawValue]);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dt-filter",
+		children: /* @__PURE__ */ jsx(CalendarDatePicker, {
+			date: dateRange,
+			numberOfMonths: 1,
+			closeOnSelect: true,
+			placeholder: label,
+			triggerClassName: className,
+			variant: "outline",
+			disableFuture,
+			disablePast,
+			minDate,
+			maxDate,
+			popoverClassName: datePickerPopoverClassName,
+			onDateSelect: (range) => {
+				if (range?.from) setFilter(column, range.from.toISOString());
+				else clearFilter(column);
+			}
+		})
+	});
+}
+
+//#endregion
+//#region src/components/features/data-table/filters/select-filter.tsx
+function SelectFilter({ column, label, options, placeholder, searchable = true, className, selectPopoverClassName }) {
+	const { filters, setFilter, clearFilter } = useDataTableContext();
+	const [open, setOpen] = useState(false);
+	const value = filters[column];
+	const selectedOption = options.find((o) => o.value === value);
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsxs(Button, {
+				variant: "outline",
+				role: "combobox",
+				"aria-expanded": open,
+				className: cn("justify-between", className),
+				"data-slot": "dt-filter",
+				"data-testid": "dt-filter-trigger",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "truncate",
+					children: selectedOption ? selectedOption.label : placeholder ?? label
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "ml-2 flex items-center gap-1",
+					children: [value && /* @__PURE__ */ jsx("span", {
+						role: "button",
+						"aria-label": `Clear ${label} filter`,
+						className: "rounded-sm opacity-70 hover:opacity-100",
+						onClick: (e) => {
+							e.stopPropagation();
+							clearFilter(column);
+						},
+						onKeyDown: (e) => {
+							if (e.key === "Enter" || e.key === " ") {
+								e.preventDefault();
+								e.stopPropagation();
+								clearFilter(column);
+							}
+						},
+						tabIndex: 0,
+						children: /* @__PURE__ */ jsx(X, { className: "size-3" })
+					}), /* @__PURE__ */ jsx(ChevronDown, { className: "size-4 opacity-50" })]
+				})]
+			})
+		}), /* @__PURE__ */ jsx(PopoverContent, {
+			className: cn("popover-content-width-full p-0", selectPopoverClassName),
+			align: "start",
+			children: /* @__PURE__ */ jsxs(Command, { children: [searchable && /* @__PURE__ */ jsx(CommandInput, { placeholder: `Search ${label.toLowerCase()}...` }), /* @__PURE__ */ jsxs(CommandList, { children: [/* @__PURE__ */ jsx(CommandEmpty, { children: "No results found." }), /* @__PURE__ */ jsx(CommandGroup, { children: options.map((option) => /* @__PURE__ */ jsxs(CommandItem, {
+				value: option.value,
+				onSelect: () => {
+					setFilter(column, option.value);
+					setOpen(false);
+				},
+				children: [/* @__PURE__ */ jsx(Check, { className: cn("mr-2 size-4", value === option.value ? "opacity-100" : "opacity-0") }), option.label]
+			}, option.value)) })] })] })
+		})]
+	});
+}
+
+//#endregion
+//#region src/components/features/data-table/data-table.tsx
+const DataTable = {
+	Client: ClientProvider,
+	Server: ServerProvider,
+	Content: DataTableContent,
+	InlineContent: DataTableInlineContent,
+	ColumnHeader: DataTableColumnHeader,
+	Pagination: DataTablePagination,
+	Search: DataTableSearch,
+	RowActions: DataTableRowActions,
+	BulkActions: DataTableBulkActions,
+	Loading: DataTableLoading,
+	SelectFilter,
+	CheckboxFilter,
+	DatePickerFilter
+};
+
+//#endregion
+//#region src/components/features/data-table/hooks/use-data-table-client.ts
+function useDataTableClient(options) {
+	const { data, columns, pageSize: initialPageSize = DEFAULT_PAGE_SIZE, getRowId, enableRowSelection = false, defaultSort = [], defaultFilters = {}, searchableColumns, searchFn, stateAdapter } = options;
+	const adapterState = useMemo(() => stateAdapter?.read() ?? {}, []);
+	const [sorting, setSorting] = useState(adapterState.sorting ?? defaultSort);
+	const [filters, setFilters] = useState(adapterState.filters ?? defaultFilters);
+	const [search, setSearch] = useState(adapterState.search ?? "");
+	const [rowSelection, setRowSelection] = useState({});
+	const [pageIndex, setPageIndex] = useState(adapterState.pageIndex ?? 0);
+	const [pageSize, setPageSize] = useState(adapterState.pageSize ?? initialPageSize);
+	const setFilter = useCallback((key, value) => {
+		setFilters((prev) => ({
+			...prev,
+			[key]: value
+		}));
+	}, []);
+	const clearFilter = useCallback((key) => {
+		setFilters((prev) => {
+			const { [key]: _, ...rest } = prev;
+			return rest;
+		});
+	}, []);
+	const clearAllFilters = useCallback(() => {
+		setFilters({});
+	}, []);
+	const clearSearch = useCallback(() => {
+		setSearch("");
+	}, []);
+	useEffect(() => {
+		setRowSelection({});
+	}, [
+		sorting,
+		filters,
+		search,
+		pageIndex,
+		pageSize
+	]);
+	useEffect(() => {
+		stateAdapter?.write({
+			sorting,
+			filters,
+			search,
+			pageIndex,
+			pageSize
+		});
+	}, [
+		stateAdapter,
+		sorting,
+		filters,
+		search,
+		pageIndex,
+		pageSize
+	]);
+	const pagination = useMemo(() => ({
+		pageIndex,
+		pageSize,
+		setPageIndex,
+		setPageSize
+	}), [pageIndex, pageSize]);
+	const selectionEnabled = !!enableRowSelection;
+	const selectionOptions = typeof enableRowSelection === "object" ? enableRowSelection : void 0;
+	return {
+		data,
+		columns: useMemo(() => selectionEnabled ? withSelectionColumn(columns, selectionOptions) : columns, [
+			selectionEnabled,
+			columns,
+			selectionOptions
+		]),
+		sorting,
+		setSorting,
+		filters,
+		setFilter,
+		clearFilter,
+		clearAllFilters,
+		search,
+		setSearch,
+		clearSearch,
+		rowSelection,
+		setRowSelection,
+		pagination,
+		getRowId,
+		enableRowSelection: selectionEnabled,
+		searchableColumns,
+		searchFn
+	};
+}
+
+//#endregion
+//#region src/components/features/data-table/hooks/use-data-table-server.ts
+function useDataTableServer(options) {
+	const { columns, fetchFn, transform, limit: initialLimit = DEFAULT_PAGE_SIZE, getRowId, enableRowSelection = false, defaultSort = [], defaultFilters = {}, stateAdapter } = options;
+	const adapterState = useMemo(() => stateAdapter?.read() ?? {}, []);
+	const [data, setData] = useState([]);
+	const [isLoading, setIsLoading] = useState(true);
+	const [sorting, setSorting] = useState(adapterState.sorting ?? defaultSort);
+	const [filters, setFilters] = useState(adapterState.filters ?? defaultFilters);
+	const [search, setSearch] = useState(adapterState.search ?? "");
+	const [rowSelection, setRowSelection] = useState({});
+	const [limit, setLimit] = useState(adapterState.limit ?? initialLimit);
+	const [cursor, setCursor] = useState(void 0);
+	const [nextCursor, setNextCursor] = useState(void 0);
+	const [hasNextPage, setHasNextPage] = useState(false);
+	const [cursorHistory, setCursorHistory] = useState([]);
+	const fetchFnRef = useRef(fetchFn);
+	fetchFnRef.current = fetchFn;
+	const transformRef = useRef(transform);
+	transformRef.current = transform;
+	const setFilter = useCallback((key, value) => {
+		setFilters((prev) => ({
+			...prev,
+			[key]: value
+		}));
+	}, []);
+	const clearFilter = useCallback((key) => {
+		setFilters((prev) => {
+			const { [key]: _, ...rest } = prev;
+			return rest;
+		});
+	}, []);
+	const clearAllFilters = useCallback(() => {
+		setFilters({});
+	}, []);
+	const clearSearch = useCallback(() => {
+		setSearch("");
+	}, []);
+	const resetPagination = useCallback(() => {
+		setCursor(void 0);
+		setNextCursor(void 0);
+		setCursorHistory([]);
+		setHasNextPage(false);
+		setRowSelection({});
+	}, []);
+	useEffect(() => {
+		resetPagination();
+	}, [
+		sorting,
+		filters,
+		search,
+		limit,
+		resetPagination
+	]);
+	useEffect(() => {
+		let cancelled = false;
+		setIsLoading(true);
+		fetchFnRef.current({
+			cursor,
+			limit,
+			sorting,
+			filters,
+			search
+		}).then((response) => {
+			if (cancelled) return;
+			const result = transformRef.current(response);
+			setData(result.data);
+			setNextCursor(result.cursor);
+			setHasNextPage(result.hasNextPage);
+		}).catch(() => {
+			if (cancelled) return;
+			setData([]);
+			setNextCursor(void 0);
+			setHasNextPage(false);
+		}).finally(() => {
+			if (!cancelled) setIsLoading(false);
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [
+		cursor,
+		limit,
+		sorting,
+		filters,
+		search
+	]);
+	useEffect(() => {
+		stateAdapter?.write({
+			sorting,
+			filters,
+			search,
+			limit
+		});
+	}, [
+		stateAdapter,
+		sorting,
+		filters,
+		search,
+		limit
+	]);
+	const hasPrevPage = cursorHistory.length > 0;
+	const nextPage = useCallback(() => {
+		if (nextCursor && hasNextPage) {
+			setCursorHistory((prev) => [...prev, cursor ?? ""]);
+			setCursor(nextCursor);
+			setRowSelection({});
+		}
+	}, [
+		nextCursor,
+		hasNextPage,
+		cursor
+	]);
+	const prevPage = useCallback(() => {
+		setCursorHistory((prev) => {
+			const newHistory = [...prev];
+			const previousCursor = newHistory.pop();
+			setCursor(previousCursor === "" ? void 0 : previousCursor);
+			return newHistory;
+		});
+		setRowSelection({});
+	}, []);
+	const pagination = useMemo(() => ({
+		cursor,
+		limit,
+		hasNextPage,
+		hasPrevPage,
+		nextPage,
+		prevPage,
+		setLimit
+	}), [
+		cursor,
+		limit,
+		hasNextPage,
+		hasPrevPage,
+		nextPage,
+		prevPage
+	]);
+	const selectionEnabled = !!enableRowSelection;
+	const selectionOptions = typeof enableRowSelection === "object" ? enableRowSelection : void 0;
+	return {
+		data,
+		columns: useMemo(() => selectionEnabled ? withSelectionColumn(columns, selectionOptions) : columns, [
+			selectionEnabled,
+			columns,
+			selectionOptions
+		]),
+		isLoading,
+		sorting,
+		setSorting,
+		filters,
+		setFilter,
+		clearFilter,
+		clearAllFilters,
+		search,
+		setSearch,
+		clearSearch,
+		rowSelection,
+		setRowSelection,
+		pagination,
+		getRowId,
+		enableRowSelection: selectionEnabled
+	};
+}
+
+//#endregion
+export { DEFAULT_DEBOUNCE_MS, DEFAULT_LOADING_ROWS, DEFAULT_PAGE_SIZE, DEFAULT_PAGE_SIZES, DataTable, createSelectionColumn, useDataTableClient, useDataTableContext, useDataTableServer, useNuqsAdapter };