@datum-cloud/datum-ui 0.10.2 → 1.1.0

package/dist/data-table-BTIxzB7O.mjs

@@ -0,0 +1,1588 @@
+import { t as cn } from "./cn-dlASUkDY.mjs";
+import { t as Badge } from "./badge-DO2_XsXD.mjs";
+import { t as Button } from "./button-B_N7A8gv.mjs";
+import { t as Checkbox } from "./checkbox-BZr9bkke.mjs";
+import { t as Input } from "./input-DBzgl-pN.mjs";
+import { t as ResponsiveDropdown } from "./responsive-dropdown-BhvBzT_1.mjs";
+import { i as SelectItem, l as SelectTrigger, n as SelectContent, t as Select, u as SelectValue } from "./select-DNnPDWSW.mjs";
+import { t as Skeleton } from "./skeleton-CGU89HPB.mjs";
+import { c as TableRow, i as TableCell, n as TableBody, o as TableHead, s as TableHeader, t as Table } from "./table-BR3mwU8X.mjs";
+import { t as Autocomplete } from "./autocomplete-Bg187x6x.mjs";
+import { t as CalendarDatePicker } from "./calendar-date-picker-DAVXW7Jg.mjs";
+import { t as ActionRow } from "./action-row-BhMyMSep.mjs";
+import { t as MultiSelect } from "./multi-select-C9ocz07C.mjs";
+import { ArrowDown, ArrowUp, ArrowUpDown, ChevronLeft, ChevronRight, MoreHorizontal, X } from "lucide-react";
+import { createContext, memo, use, useCallback, useContext, useEffect, useId, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { parseAsInteger, parseAsString, useQueryStates } from "nuqs";
+import { flexRender, getCoreRowModel, 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
+/**
+* Serialize SortingState to URL-friendly string.
+* Format: "name" (asc), "-name" (desc), comma-separated for multi-sort.
+* Example: "-department,name" → [{id:"department",desc:true},{id:"name",desc:false}]
+*/
+function serializeSorting(sorting) {
+	if (sorting.length === 0) return "";
+	return sorting.map((s) => s.desc ? `-${s.id}` : s.id).join(",");
+}
+/**
+* Parse URL sort string back to SortingState.
+*/
+function parseSorting(value) {
+	if (!value) return [];
+	return value.split(",").filter(Boolean).map((part) => {
+		if (part.startsWith("-")) return {
+			id: part.slice(1),
+			desc: true
+		};
+		return {
+			id: part,
+			desc: false
+		};
+	});
+}
+const coreSearchParams = {
+	sort: parseAsString.withDefault(""),
+	q: parseAsString.withDefault(""),
+	page: parseAsInteger.withDefault(0),
+	size: parseAsInteger.withDefault(20)
+};
+const EMPTY_FILTER_PARSERS_PLACEHOLDER = { _dt: parseAsString.withDefault("") };
+/**
+* Hook that creates a StateAdapter backed by nuqs URL query state.
+*
+* URL format:
+* - `?sort=name` (asc) or `?sort=-name` (desc), comma-separated for multi-sort
+* - `?q=search` for search text
+* - `?page=0&size=20` for pagination
+* - Custom filter keys as declared in options
+*
+* Requires `nuqs` to be installed in the consumer app.
+*
+* @example
+* ```tsx
+* const stateAdapter = useNuqsAdapter({
+*   filters: {
+*     status: parseAsString.withDefault(''),
+*     department: parseAsArrayOf(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 : EMPTY_FILTER_PARSERS_PLACEHOLDER);
+	return useMemo(() => ({
+		read: () => ({
+			sorting: parseSorting(coreState.sort),
+			search: coreState.q,
+			pageIndex: coreState.page,
+			pageSize: coreState.size,
+			...hasFilters ? { filters: filterState } : {}
+		}),
+		write: (state) => {
+			setCoreState({
+				sort: serializeSorting(state.sorting),
+				q: state.search,
+				page: state.pageIndex ?? 0,
+				size: state.pageSize ?? 20
+			});
+			if (hasFilters && filterParsers) {
+				const update = {};
+				for (const key of Object.keys(filterParsers)) update[key] = state.filters?.[key] ?? null;
+				setFilterState(update);
+			}
+		}
+	}), [
+		coreState,
+		filterState,
+		hasFilters,
+		setCoreState,
+		setFilterState,
+		filterParsers
+	]);
+}
+//#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/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.getToggleSortingHandler(),
+			"aria-label": `Sort by ${title}${sorted === "asc" ? ", sorted ascending" : sorted === "desc" ? ", sorted descending" : ""}`,
+			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/row-actions.tsx
+function DataTableRowActions({ row, actions, isLoading = false, className, responsive = true, sheetTitle = "Actions" }) {
+	const [open, setOpen] = useState(false);
+	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__ */ jsx(ResponsiveDropdown, {
+		open,
+		onOpenChange: setOpen,
+		trigger: /* @__PURE__ */ jsxs(Button, {
+			theme: "borderless",
+			size: "small",
+			className,
+			disabled: isLoading,
+			"data-slot": "dt-row-actions",
+			onClick: () => setOpen(!open),
+			children: [/* @__PURE__ */ jsx(MoreHorizontal, { className: "size-4" }), /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: "Open menu"
+			})]
+		}),
+		sheetTitle,
+		align: "end",
+		responsive,
+		children: visibleActions.map((action) => /* @__PURE__ */ jsx(ActionRow, {
+			action,
+			data,
+			onSelect: () => setOpen(false)
+		}, action.label))
+	});
+}
+//#endregion
+//#region src/components/features/data-table/core/filter-engine.ts
+/**
+* Resolve a dot-path on an object (e.g. "status.registrationApproval").
+* Falls back to a flat key lookup when the path has no dots.
+*/
+function resolvePath(obj, path) {
+	if (obj == null) return void 0;
+	const record = obj;
+	if (!path.includes(".")) return record[path];
+	return path.split(".").reduce((acc, key) => acc != null ? acc[key] : void 0, record);
+}
+const FILTER_STRATEGIES = {
+	"checkbox": (cellValue, filterValue) => {
+		if (filterValue == null) return true;
+		if (Array.isArray(filterValue) && filterValue.length === 0) return true;
+		if (!Array.isArray(filterValue)) return cellValue === filterValue;
+		if (Array.isArray(cellValue)) return cellValue.some((v) => filterValue.includes(v));
+		return filterValue.includes(cellValue);
+	},
+	"select": (cellValue, filterValue) => {
+		if (filterValue == null || filterValue === "") return true;
+		return cellValue === filterValue;
+	},
+	"date-gte": (cellValue, filterValue) => {
+		if (!filterValue) return true;
+		const cell = new Date(cellValue);
+		const filter = new Date(filterValue);
+		if (Number.isNaN(cell.getTime()) || Number.isNaN(filter.getTime())) return true;
+		return cell >= filter;
+	},
+	"date-lte": (cellValue, filterValue) => {
+		if (!filterValue) return true;
+		const cell = new Date(cellValue);
+		const filter = new Date(filterValue);
+		if (Number.isNaN(cell.getTime()) || Number.isNaN(filter.getTime())) return true;
+		return cell <= filter;
+	}
+};
+function resolveStrategy(strategy) {
+	if (!strategy) return void 0;
+	if (typeof strategy === "function") return strategy;
+	return FILTER_STRATEGIES[strategy];
+}
+/** True when a row matches a free-text query (custom fn → columns → all values). */
+function rowMatchesSearch(row, search, config) {
+	if (!search || search.length === 0) return true;
+	if (config.searchFn) return config.searchFn(row, search);
+	const query = search.toLowerCase();
+	if (config.searchableColumns && config.searchableColumns.length > 0) return config.searchableColumns.some((col) => {
+		const cellValue = resolvePath(row, col);
+		return cellValue != null && String(cellValue).toLowerCase().includes(query);
+	});
+	return Object.values(row).some((val) => val != null && String(val).toLowerCase().includes(query));
+}
+function applyFilters(data, filters, search, registeredFilters, customFilterFns, searchConfig) {
+	const hasFilters = Object.keys(filters).length > 0;
+	const hasSearch = search.length > 0;
+	if (!hasFilters && !hasSearch) return data;
+	return data.filter((row) => {
+		if (hasFilters) for (const [column, value] of Object.entries(filters)) {
+			const fn = customFilterFns[column] ?? resolveStrategy(registeredFilters.get(column));
+			if (!fn) {
+				console.warn(`[DataTable] No filter strategy registered for column "${column}". Filter ignored.`);
+				continue;
+			}
+			if (!fn(resolvePath(row, column), value)) return false;
+		}
+		if (hasSearch && !rowMatchesSearch(row, search, searchConfig)) return false;
+		return true;
+	});
+}
+//#endregion
+//#region src/components/features/data-table/core/store.ts
+function createDataTableStore(options) {
+	let registeredFilters = /* @__PURE__ */ new Map();
+	const listeners = /* @__PURE__ */ new Set();
+	function computeFilteredData(s) {
+		if (s.mode === "server") return s.data;
+		return applyFilters(s.data, s.filters, s.search, registeredFilters, options.filterFns ?? {}, {
+			searchFn: options.searchFn,
+			searchableColumns: options.searchableColumns
+		});
+	}
+	let state = {
+		data: options.data,
+		filteredData: options.data,
+		sorting: options.defaultSort ?? [],
+		filters: options.defaultFilters ?? {},
+		search: "",
+		rowSelection: {},
+		pageIndex: 0,
+		pageSize: options.pageSize ?? 20,
+		columnCount: options.columnCount ?? 0,
+		mode: options.mode,
+		isLoading: options.isLoading ?? false,
+		error: null,
+		inlineContents: [],
+		_version: 0
+	};
+	if (options.defaultFilters && Object.keys(options.defaultFilters).length > 0) state = {
+		...state,
+		filteredData: computeFilteredData(state)
+	};
+	function notify() {
+		for (const listener of listeners) listener();
+	}
+	function setState(next) {
+		state = {
+			...next,
+			_version: state._version + 1
+		};
+		notify();
+	}
+	return {
+		getSnapshot: () => state,
+		subscribe: (listener) => {
+			listeners.add(listener);
+			return () => listeners.delete(listener);
+		},
+		setData: (data) => {
+			const next = {
+				...state,
+				data,
+				pageIndex: 0,
+				rowSelection: {}
+			};
+			setState({
+				...next,
+				filteredData: computeFilteredData(next)
+			});
+		},
+		setServerData: (data) => {
+			setState({
+				...state,
+				data,
+				filteredData: data
+			});
+		},
+		setSorting: (sorting) => {
+			setState({
+				...state,
+				sorting,
+				rowSelection: {}
+			});
+		},
+		setFilter: (key, value) => {
+			const next = {
+				...state,
+				filters: {
+					...state.filters,
+					[key]: value
+				},
+				rowSelection: {},
+				pageIndex: 0
+			};
+			setState({
+				...next,
+				filteredData: computeFilteredData(next)
+			});
+		},
+		clearFilter: (key) => {
+			const filters = Object.fromEntries(Object.entries(state.filters).filter(([k]) => k !== key));
+			const next = {
+				...state,
+				filters,
+				rowSelection: {},
+				pageIndex: 0
+			};
+			setState({
+				...next,
+				filteredData: computeFilteredData(next)
+			});
+		},
+		clearAllFilters: () => {
+			const next = {
+				...state,
+				filters: {},
+				rowSelection: {},
+				pageIndex: 0
+			};
+			setState({
+				...next,
+				filteredData: computeFilteredData(next)
+			});
+		},
+		setSearch: (search) => {
+			const next = {
+				...state,
+				search,
+				rowSelection: {},
+				pageIndex: 0
+			};
+			setState({
+				...next,
+				filteredData: computeFilteredData(next)
+			});
+		},
+		clearSearch: () => {
+			const next = {
+				...state,
+				search: "",
+				rowSelection: {},
+				pageIndex: 0
+			};
+			setState({
+				...next,
+				filteredData: computeFilteredData(next)
+			});
+		},
+		setRowSelection: (rowSelection) => {
+			setState({
+				...state,
+				rowSelection
+			});
+		},
+		setPageIndex: (pageIndex) => {
+			if (!Number.isFinite(pageIndex) || pageIndex < 0) return;
+			setState({
+				...state,
+				pageIndex: Math.floor(pageIndex),
+				rowSelection: {}
+			});
+		},
+		setPageSize: (pageSize) => {
+			if (!Number.isFinite(pageSize) || pageSize < 1) return;
+			setState({
+				...state,
+				pageSize: Math.floor(pageSize),
+				pageIndex: 0,
+				rowSelection: {}
+			});
+		},
+		setPagination: (pageIndex, pageSize) => {
+			const safeIndex = Number.isFinite(pageIndex) ? Math.max(0, Math.floor(pageIndex)) : state.pageIndex;
+			const safeSize = Number.isFinite(pageSize) ? Math.max(1, Math.floor(pageSize)) : state.pageSize;
+			setState({
+				...state,
+				pageIndex: safeIndex,
+				pageSize: safeSize,
+				rowSelection: {}
+			});
+		},
+		setLoading: (isLoading) => {
+			setState({
+				...state,
+				isLoading
+			});
+		},
+		setError: (error) => {
+			setState({
+				...state,
+				error
+			});
+		},
+		registerFilter: (column, strategy) => {
+			const next = new Map(registeredFilters);
+			next.set(column, strategy);
+			registeredFilters = next;
+			const filteredData = computeFilteredData(state);
+			setState({
+				...state,
+				filteredData
+			});
+		},
+		unregisterFilter: (column) => {
+			const next = new Map(registeredFilters);
+			next.delete(column);
+			registeredFilters = next;
+			if (column in state.filters) {
+				const filteredData = computeFilteredData(state);
+				setState({
+					...state,
+					filteredData
+				});
+			}
+		},
+		registerInlineContent: (entry) => {
+			const existing = state.inlineContents.findIndex((e) => e.id === entry.id);
+			const inlineContents = existing >= 0 ? state.inlineContents.map((e, i) => i === existing ? entry : e) : [...state.inlineContents, entry];
+			setState({
+				...state,
+				inlineContents
+			});
+		},
+		unregisterInlineContent: (id) => {
+			const inlineContents = state.inlineContents.filter((e) => e.id !== id);
+			setState({
+				...state,
+				inlineContents
+			});
+		}
+	};
+}
+//#endregion
+//#region src/components/features/data-table/core/data-table-context.tsx
+const DataTableStoreContext = createContext(null);
+const TableInstanceContext = createContext(null);
+/**
+* Monotonic counter that increments on every store mutation.
+* Table-dependent hooks consume this context to force re-renders
+* through React's {children} composition boundary, since the
+* mutable table singleton (stable ref) cannot trigger context updates.
+*/
+const DataTableRenderKeyContext = createContext(0);
+/**
+* Forces a re-render when the store changes. Used by table-dependent hooks.
+* Uses useContext (not use()) because use() does not reliably register
+* context subscriptions in SSR/hydration scenarios (React Router SSR),
+* preventing re-renders when the context value changes.
+*/
+function useRenderKey() {
+	return useContext(DataTableRenderKeyContext);
+}
+createContext(null);
+function useDataTableStore() {
+	const store = use(DataTableStoreContext);
+	if (!store) throw new Error("useDataTableStore must be used within a <DataTable.Client> or <DataTable.Server> provider");
+	return store;
+}
+/**
+* Returns the table instance or null if not yet available.
+* Used by hooks that need to handle the null-table window during SSR.
+*/
+function useTableInstanceOrNull() {
+	return use(TableInstanceContext);
+}
+//#endregion
+//#region src/components/features/data-table/hooks/use-selectors.ts
+function shallowEqual(a, b) {
+	const keysA = Object.keys(a);
+	const keysB = Object.keys(b);
+	if (keysA.length !== keysB.length) return false;
+	for (const key of keysA) {
+		const va = a[key];
+		const vb = b[key];
+		if (va === vb) continue;
+		if (Array.isArray(va) && Array.isArray(vb)) {
+			if (va.length !== vb.length) return false;
+			for (let i = 0; i < va.length; i++) if (va[i] !== vb[i]) return false;
+			continue;
+		}
+		return false;
+	}
+	return true;
+}
+function useSliceSelector(selector) {
+	const store = useDataTableStore();
+	const cachedRef = useRef(null);
+	const getSnapshot = useCallback(() => {
+		const next = selector(store.getSnapshot());
+		if (cachedRef.current && shallowEqual(cachedRef.current, next)) return cachedRef.current;
+		cachedRef.current = next;
+		return next;
+	}, [store, selector]);
+	return useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
+}
+function useDataTableFilters() {
+	const store = useDataTableStore();
+	return useSliceSelector(useCallback((state) => ({
+		filters: state.filters,
+		setFilter: store.setFilter,
+		clearFilter: store.clearFilter,
+		clearAllFilters: store.clearAllFilters,
+		registerFilter: store.registerFilter,
+		unregisterFilter: store.unregisterFilter
+	}), [store]));
+}
+function useDataTableSearch() {
+	const store = useDataTableStore();
+	return useSliceSelector(useCallback((state) => ({
+		search: state.search,
+		setSearch: store.setSearch,
+		clearSearch: store.clearSearch
+	}), [store]));
+}
+function useDataTableSorting() {
+	const store = useDataTableStore();
+	return useSliceSelector(useCallback((state) => ({
+		sorting: state.sorting,
+		setSorting: store.setSorting
+	}), [store]));
+}
+function useDataTableSelection() {
+	useRenderKey();
+	const store = useDataTableStore();
+	const table = useTableInstanceOrNull();
+	return {
+		rowSelection: store.getSnapshot().rowSelection,
+		setRowSelection: store.setRowSelection,
+		selectedRows: table ? table.getFilteredSelectedRowModel().rows.map((r) => r.original) : []
+	};
+}
+function useDataTablePagination() {
+	useRenderKey();
+	const store = useDataTableStore();
+	const table = useTableInstanceOrNull();
+	const state = store.getSnapshot();
+	if (!table) return {
+		canNextPage: false,
+		canPrevPage: false,
+		nextPage: () => {},
+		prevPage: () => {},
+		pageIndex: state.pageIndex,
+		pageCount: 0,
+		setPageIndex: store.setPageIndex,
+		pageSize: state.pageSize,
+		setPageSize: store.setPageSize,
+		totalRows: 0
+	};
+	return {
+		canNextPage: table.getCanNextPage(),
+		canPrevPage: table.getCanPreviousPage(),
+		nextPage: () => table.nextPage(),
+		prevPage: () => table.previousPage(),
+		pageIndex: state.pageIndex,
+		pageCount: table.getPageCount(),
+		setPageIndex: store.setPageIndex,
+		pageSize: state.pageSize,
+		setPageSize: store.setPageSize,
+		totalRows: state.filteredData.length
+	};
+}
+function useDataTableRows() {
+	useRenderKey();
+	const table = useTableInstanceOrNull();
+	if (!table) return {
+		rows: [],
+		headerGroups: [],
+		totalColumns: 0
+	};
+	return {
+		rows: table.getRowModel().rows,
+		headerGroups: table.getHeaderGroups(),
+		totalColumns: table.getAllColumns().length
+	};
+}
+function useDataTableLoading() {
+	return useSliceSelector(useCallback((state) => ({
+		isLoading: state.isLoading,
+		error: state.error,
+		columnCount: state.columnCount
+	}), []));
+}
+function useDataTableInlineContents() {
+	const store = useDataTableStore();
+	return useSliceSelector(useCallback((state) => ({
+		inlineContents: state.inlineContents,
+		registerInlineContent: store.registerInlineContent,
+		unregisterInlineContent: store.unregisterInlineContent
+	}), [store]));
+}
+//#endregion
+//#region src/components/features/data-table/components/active-filters.tsx
+function formatValue(column, value, formatters) {
+	const fn = formatters?.[column];
+	if (fn) return fn(value);
+	return String(value);
+}
+function FilterGroup({ label, children, className }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex items-center gap-2 rounded-md border px-2 py-1", className),
+		"data-slot": "dt-filter-group",
+		"data-testid": "dt-filter-group",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "text-muted-foreground border-r pr-2 text-xs",
+			children: label
+		}), children]
+	});
+}
+const EMPTY_LABELS = {};
+function ActiveFiltersInner({ label = "Selected Filters", excludeFilters, filterLabels = EMPTY_LABELS, formatFilterValue: formatters, clearAll = "icon", clearAllLabel = "Clear all", className, groupClassName, badgeClassName }) {
+	const { filters, setFilter, clearFilter, clearAllFilters } = useDataTableFilters();
+	const { search, clearSearch } = useDataTableSearch();
+	const excludeSet = useMemo(() => new Set(excludeFilters ?? []), [excludeFilters]);
+	const activeFilterEntries = Object.entries(filters).filter(([key, value]) => !excludeSet.has(key) && value != null && value !== "" && !(Array.isArray(value) && value.length === 0));
+	const showSearch = search.length > 0 && !excludeSet.has("search");
+	const hasFilters = activeFilterEntries.length > 0;
+	if (!showSearch && !hasFilters) return null;
+	const totalGroups = activeFilterEntries.length + (showSearch ? 1 : 0);
+	const removeArrayItem = (column, items, item) => {
+		const remaining = items.filter((v) => v !== item);
+		if (remaining.length > 0) setFilter(column, remaining);
+		else clearFilter(column);
+	};
+	const handleClearAll = () => {
+		clearAllFilters();
+		if (search.length > 0) clearSearch();
+	};
+	const badgeCn = cn("flex items-center gap-1.5 px-2 py-0.5 text-xs", badgeClassName);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-wrap items-center gap-2", className),
+		"data-slot": "dt-active-filters",
+		"data-testid": "dt-active-filters",
+		children: [
+			label !== null && /* @__PURE__ */ jsx("span", {
+				className: "text-sm text-muted-foreground",
+				"data-slot": "dt-active-filters-label",
+				children: label
+			}),
+			showSearch && /* @__PURE__ */ jsx(FilterGroup, {
+				label: "Search",
+				className: groupClassName,
+				children: /* @__PURE__ */ jsxs(Badge, {
+					type: "muted",
+					theme: "solid",
+					className: badgeCn,
+					children: [/* @__PURE__ */ jsx("span", { children: search }), /* @__PURE__ */ jsx(Button, {
+						theme: "borderless",
+						size: "small",
+						"aria-label": "Clear search",
+						className: "h-auto p-0 text-muted-foreground hover:text-foreground",
+						onClick: clearSearch,
+						children: /* @__PURE__ */ jsx(X, {
+							className: "size-2.5",
+							"aria-hidden": "true"
+						})
+					})]
+				})
+			}),
+			activeFilterEntries.map(([column, value]) => {
+				const groupLabel = filterLabels[column] ?? column;
+				if (Array.isArray(value)) return /* @__PURE__ */ jsx(FilterGroup, {
+					label: groupLabel,
+					className: groupClassName,
+					children: value.map((item) => /* @__PURE__ */ jsxs(Badge, {
+						type: "muted",
+						theme: "solid",
+						className: badgeCn,
+						children: [/* @__PURE__ */ jsx("span", { children: formatValue(column, item, formatters) }), /* @__PURE__ */ jsx(Button, {
+							theme: "borderless",
+							size: "small",
+							"aria-label": `Remove ${formatValue(column, item, formatters)} from ${groupLabel}`,
+							className: "h-auto p-0 text-muted-foreground hover:text-foreground",
+							onClick: () => removeArrayItem(column, value, item),
+							children: /* @__PURE__ */ jsx(X, {
+								className: "size-2.5",
+								"aria-hidden": "true"
+							})
+						})]
+					}, item))
+				}, column);
+				return /* @__PURE__ */ jsx(FilterGroup, {
+					label: groupLabel,
+					className: groupClassName,
+					children: /* @__PURE__ */ jsxs(Badge, {
+						type: "muted",
+						theme: "solid",
+						className: badgeCn,
+						children: [/* @__PURE__ */ jsx("span", { children: formatValue(column, value, formatters) }), /* @__PURE__ */ jsx(Button, {
+							theme: "borderless",
+							size: "small",
+							"aria-label": `Clear ${groupLabel} filter`,
+							className: "h-auto p-0 text-muted-foreground hover:text-foreground",
+							onClick: () => clearFilter(column),
+							children: /* @__PURE__ */ jsx(X, {
+								className: "size-2.5",
+								"aria-hidden": "true"
+							})
+						})]
+					})
+				}, column);
+			}),
+			totalGroups > 1 && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				clearAll === "icon" && /* @__PURE__ */ jsx(Button, {
+					theme: "borderless",
+					size: "small",
+					"aria-label": clearAllLabel,
+					title: clearAllLabel,
+					className: "h-auto p-1 text-muted-foreground hover:text-foreground",
+					"data-slot": "dt-clear-all-filters",
+					"data-testid": "dt-clear-all-filters",
+					onClick: handleClearAll,
+					children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+				}),
+				clearAll === "button" && /* @__PURE__ */ jsxs(Button, {
+					theme: "outline",
+					size: "small",
+					className: "h-auto px-2 py-1 text-xs",
+					"data-slot": "dt-clear-all-filters",
+					"data-testid": "dt-clear-all-filters",
+					onClick: handleClearAll,
+					children: [/* @__PURE__ */ jsx(X, { className: "size-3 mr-1" }), clearAllLabel]
+				}),
+				clearAll === "text" && /* @__PURE__ */ jsx(Button, {
+					theme: "borderless",
+					size: "small",
+					className: "h-auto px-1 py-0.5 text-xs text-muted-foreground hover:text-foreground",
+					"data-slot": "dt-clear-all-filters",
+					"data-testid": "dt-clear-all-filters",
+					onClick: handleClearAll,
+					children: clearAllLabel
+				})
+			] })
+		]
+	});
+}
+const DataTableActiveFilters = memo(ActiveFiltersInner);
+//#endregion
+//#region src/components/features/data-table/components/bulk-actions.tsx
+function DataTableBulkActions({ children, className }) {
+	const { selectedRows } = useDataTableSelection();
+	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/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 { rows, headerGroups, totalColumns } = useDataTableRows();
+	const { isLoading, columnCount } = useDataTableLoading();
+	const { pageSize } = useDataTablePagination();
+	const { inlineContents } = useDataTableInlineContents();
+	const openInlineContents = useMemo(() => inlineContents.filter((e) => e.open), [inlineContents]);
+	const colSpan = totalColumns;
+	const skeletonColumns = totalColumns || columnCount || 5;
+	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: headerGroups.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)),
+						style: { transitionProperty: "none" },
+						"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);
+				}) : isLoading ? Array.from({ length: pageSize }, (_, i) => /* @__PURE__ */ jsx(TableRow, {
+					"data-slot": "dt-skeleton-row",
+					children: Array.from({ length: skeletonColumns }, (_, j) => /* @__PURE__ */ jsx(TableCell, {
+						"data-slot": "dt-skeleton-cell",
+						children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" })
+					}, j))
+				}, i)) : /* @__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 } = useDataTableInlineContents();
+	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 = 5, columns = 4, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		className,
+		"data-slot": "dt-loading",
+		style: { overflowX: "auto" },
+		children: /* @__PURE__ */ jsxs(Table, { children: [/* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsx(TableRow, { children: Array.from({ length: columns }, (_, i) => /* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" }) }, i)) }) }), /* @__PURE__ */ jsx(TableBody, { children: Array.from({ length: rows }, (_, rowIndex) => /* @__PURE__ */ jsx(TableRow, { children: Array.from({ length: columns }, (_, colIndex) => /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" }) }, colIndex)) }, rowIndex)) })] })
+	});
+}
+//#endregion
+//#region src/components/features/data-table/components/pagination.tsx
+/**
+* Generates page numbers with ellipsis for large page counts.
+* Shows up to 7 items: first, last, current +/- 1 neighbor, and ellipsis gaps.
+*/
+function getPageNumbers(currentPage, totalPages) {
+	if (totalPages <= 7) return Array.from({ length: totalPages }, (_, i) => i + 1);
+	const pages = [1];
+	const current = currentPage + 1;
+	if (current <= 4) {
+		for (let i = 2; i <= 5; i++) pages.push(i);
+		pages.push("...");
+		pages.push(totalPages);
+	} else if (current >= totalPages - 3) {
+		pages.push("...");
+		for (let i = totalPages - 4; i <= totalPages; i++) pages.push(i);
+	} else {
+		pages.push("...");
+		for (let i = current - 1; i <= current + 1; i++) pages.push(i);
+		pages.push("...");
+		pages.push(totalPages);
+	}
+	return pages;
+}
+function DataTablePagination({ pageSizes = DEFAULT_PAGE_SIZES, className }) {
+	const { canNextPage, canPrevPage, nextPage, prevPage, pageIndex, pageCount, setPageIndex, pageSize, setPageSize, totalRows } = useDataTablePagination();
+	const isClientMode = pageCount > 0;
+	const startRow = pageIndex * pageSize + 1;
+	const endRow = Math.min((pageIndex + 1) * pageSize, totalRows);
+	const pageNumbers = useMemo(() => getPageNumbers(pageIndex, pageCount), [pageIndex, pageCount]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col-reverse items-center justify-between gap-4 px-2 py-4 sm:flex-row", className),
+		"data-slot": "dt-pagination",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-4",
+			children: [isClientMode && totalRows > 0 && /* @__PURE__ */ jsxs("span", {
+				className: "text-sm text-muted-foreground whitespace-nowrap",
+				children: [
+					"Showing",
+					" ",
+					startRow,
+					" ",
+					"to",
+					" ",
+					endRow,
+					" ",
+					"of",
+					" ",
+					totalRows,
+					" ",
+					"rows"
+				]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-sm text-muted-foreground whitespace-nowrap",
+					children: "Rows per page"
+				}), /* @__PURE__ */ jsxs(Select, {
+					value: String(pageSize),
+					onValueChange: (value) => setPageSize(Number(value)),
+					children: [/* @__PURE__ */ jsx(SelectTrigger, {
+						className: "h-8 w-[70px]",
+						children: /* @__PURE__ */ jsx(SelectValue, { placeholder: String(pageSize) })
+					}), /* @__PURE__ */ jsx(SelectContent, {
+						side: "top",
+						children: pageSizes.map((size) => /* @__PURE__ */ jsx(SelectItem, {
+							value: String(size),
+							children: size
+						}, size))
+					})]
+				})]
+			})]
+		}), /* @__PURE__ */ jsxs("nav", {
+			"aria-label": "Table pagination",
+			className: "flex items-center gap-1",
+			children: [
+				/* @__PURE__ */ jsx(Button, {
+					theme: "outline",
+					size: "icon",
+					className: "size-8",
+					onClick: prevPage,
+					disabled: !canPrevPage,
+					"aria-label": "Previous page",
+					children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4" })
+				}),
+				isClientMode && pageCount > 1 ? pageNumbers.map((page, index) => {
+					if (page === "...") return /* @__PURE__ */ jsx("span", {
+						className: "px-2 text-sm text-muted-foreground",
+						children: "..."
+					}, `ellipsis-${index}`);
+					const isActive = page === pageIndex + 1;
+					return /* @__PURE__ */ jsx(Button, {
+						theme: isActive ? "solid" : "outline",
+						size: "small",
+						className: cn("h-8 min-w-8 px-2", isActive && "pointer-events-none font-semibold"),
+						onClick: () => setPageIndex(page - 1),
+						"aria-disabled": isActive || void 0,
+						"aria-label": `Page ${page}`,
+						"aria-current": isActive ? "page" : void 0,
+						children: page
+					}, page);
+				}) : !isClientMode && /* @__PURE__ */ jsxs("span", {
+					className: "px-2 text-sm text-muted-foreground",
+					children: [
+						"Page",
+						" ",
+						pageIndex + 1
+					]
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					theme: "outline",
+					size: "icon",
+					className: "size-8",
+					onClick: nextPage,
+					disabled: !canNextPage,
+					"aria-label": "Next page",
+					children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4" })
+				})
+			]
+		})]
+	});
+}
+//#endregion
+//#region src/components/features/data-table/components/search.tsx
+function DataTableSearch({ placeholder = "Search...", debounceMs = 300, className, disabled }) {
+	const { search, setSearch } = useDataTableSearch();
+	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,
+		disabled,
+		"aria-label": placeholder,
+		"data-slot": "dt-search"
+	});
+}
+//#endregion
+//#region src/components/features/data-table/hooks/use-data-table-client.ts
+/**
+* Creates a TanStack Table instance from an existing store.
+* Does NOT create the store or sync data — the caller is responsible for that.
+*/
+function useClientTable(store, options) {
+	const { columns, getRowId, enableRowSelection = false, stateAdapter } = options;
+	const resolvedColumns = useMemo(() => enableRowSelection ? withSelectionColumn(columns, typeof enableRowSelection === "object" ? enableRowSelection : {}) : columns, [columns, enableRowSelection]);
+	const { filteredData, sorting, rowSelection, pageIndex, pageSize: storePageSize, filters, search } = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);
+	const table = useReactTable({
+		data: filteredData,
+		columns: resolvedColumns,
+		state: {
+			sorting,
+			rowSelection,
+			pagination: {
+				pageIndex,
+				pageSize: storePageSize
+			}
+		},
+		onSortingChange: (updater) => {
+			const next = typeof updater === "function" ? updater(sorting) : updater;
+			store.setSorting(next);
+		},
+		onRowSelectionChange: (updater) => {
+			const next = typeof updater === "function" ? updater(rowSelection) : updater;
+			store.setRowSelection(next);
+		},
+		onPaginationChange: (updater) => {
+			const next = typeof updater === "function" ? updater({
+				pageIndex,
+				pageSize: storePageSize
+			}) : updater;
+			store.setPagination(next.pageIndex, next.pageSize);
+		},
+		getCoreRowModel: getCoreRowModel(),
+		getSortedRowModel: getSortedRowModel(),
+		getPaginationRowModel: getPaginationRowModel(),
+		getRowId,
+		enableRowSelection: !!enableRowSelection
+	});
+	const hydratedRef = useRef(false);
+	useEffect(() => {
+		if (stateAdapter && !hydratedRef.current) {
+			hydratedRef.current = true;
+			const persisted = stateAdapter.read();
+			if (persisted.sorting && persisted.sorting.length > 0) store.setSorting(persisted.sorting);
+			if (persisted.filters) {
+				for (const [key, value] of Object.entries(persisted.filters)) if (value != null) store.setFilter(key, value);
+			}
+			if (persisted.search) store.setSearch(persisted.search);
+			if (persisted.pageIndex != null && persisted.pageIndex > 0) store.setPageIndex(persisted.pageIndex);
+			if (persisted.pageSize != null) store.setPageSize(persisted.pageSize);
+		}
+	}, []);
+	const isFirstWrite = useRef(true);
+	useEffect(() => {
+		if (!stateAdapter) return;
+		if (isFirstWrite.current) {
+			isFirstWrite.current = false;
+			return;
+		}
+		stateAdapter.write({
+			sorting,
+			filters,
+			search,
+			pageIndex,
+			pageSize: storePageSize
+		});
+	}, [
+		sorting,
+		filters,
+		search,
+		pageIndex,
+		storePageSize,
+		stateAdapter
+	]);
+	return { table };
+}
+//#endregion
+//#region src/components/features/data-table/core/client-provider.tsx
+/**
+* Inner component that calls useClientTable.
+* Only rendered after hydration (gated by tableReady).
+*/
+function ClientProviderInner({ store, className, children, ...options }) {
+	const { table } = useClientTable(store, options);
+	return /* @__PURE__ */ jsx(TableInstanceContext, {
+		value: table,
+		children: /* @__PURE__ */ jsx(DataTableRenderKeyContext, {
+			value: store.getSnapshot()._version,
+			children: /* @__PURE__ */ jsx("div", {
+				className,
+				children
+			})
+		})
+	});
+}
+function ClientProvider(props) {
+	const { data, columns, loading, pageSize, getRowId, enableRowSelection, defaultSort, defaultFilters, searchableColumns, searchFn, filterFns, stateAdapter, className, children } = props;
+	const store = useMemo(() => createDataTableStore({
+		data,
+		mode: "client",
+		isLoading: true,
+		defaultSort,
+		defaultFilters,
+		pageSize,
+		columnCount: columns.length,
+		searchableColumns,
+		searchFn,
+		filterFns
+	}), []);
+	const isInitialRender = useRef(true);
+	useEffect(() => {
+		if (isInitialRender.current) {
+			isInitialRender.current = false;
+			return;
+		}
+		store.setData(data);
+	}, [data, store]);
+	const isPageSizeInitial = useRef(true);
+	useEffect(() => {
+		if (isPageSizeInitial.current) {
+			isPageSizeInitial.current = false;
+			return;
+		}
+		if (pageSize != null) store.setPageSize(pageSize);
+	}, [pageSize, store]);
+	const [tableReady, setTableReady] = useState(false);
+	useEffect(() => setTableReady(true), []);
+	useEffect(() => {
+		if (!tableReady) return;
+		store.setLoading(loading ?? false);
+	}, [
+		loading,
+		tableReady,
+		store
+	]);
+	return /* @__PURE__ */ jsx(DataTableStoreContext, {
+		value: store,
+		children: tableReady ? /* @__PURE__ */ jsx(ClientProviderInner, {
+			store,
+			columns,
+			getRowId,
+			enableRowSelection,
+			stateAdapter,
+			className,
+			children
+		}) : /* @__PURE__ */ jsx(TableInstanceContext, {
+			value: null,
+			children: /* @__PURE__ */ jsx(DataTableRenderKeyContext, {
+				value: 0,
+				children: /* @__PURE__ */ jsx("div", {
+					className,
+					children
+				})
+			})
+		})
+	});
+}
+//#endregion
+//#region src/components/features/data-table/hooks/use-data-table-server.ts
+/**
+* Creates a TanStack Table instance from an existing store.
+* Handles fetch-on-query-change, cursor pagination, and state adapter sync.
+* Does NOT create the store — the caller is responsible for that.
+*/
+function useServerTable(store, options) {
+	const { columns, fetchFn, transform, getRowId, enableRowSelection = false, stateAdapter } = options;
+	const fetchRef = useRef(fetchFn);
+	const transformRef = useRef(transform);
+	useEffect(() => {
+		fetchRef.current = fetchFn;
+	}, [fetchFn]);
+	useEffect(() => {
+		transformRef.current = transform;
+	}, [transform]);
+	const cursorMapRef = useRef(/* @__PURE__ */ new Map());
+	const hasNextPageRef = useRef(false);
+	const { sorting, filters, search, rowSelection, pageSize, pageIndex } = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);
+	const prevQueryRef = useRef({
+		sorting,
+		filters,
+		search,
+		pageSize
+	});
+	useEffect(() => {
+		const prev = prevQueryRef.current;
+		if (prev.sorting !== sorting || prev.filters !== filters || prev.search !== search || prev.pageSize !== pageSize) {
+			cursorMapRef.current = /* @__PURE__ */ new Map();
+			hasNextPageRef.current = false;
+			if (pageIndex !== 0) {
+				prevQueryRef.current = {
+					sorting,
+					filters,
+					search,
+					pageSize
+				};
+				store.setPageIndex(0);
+				return;
+			}
+		}
+		prevQueryRef.current = {
+			sorting,
+			filters,
+			search,
+			pageSize
+		};
+		let cancelled = false;
+		store.setLoading(true);
+		const cursor = cursorMapRef.current.get(pageIndex);
+		fetchRef.current({
+			sorting,
+			filters,
+			search,
+			cursor,
+			limit: pageSize
+		}).then((response) => {
+			if (cancelled) return;
+			const result = transformRef.current(response);
+			store.setServerData(result.data);
+			store.setError(null);
+			if (result.cursor) cursorMapRef.current.set(pageIndex + 1, result.cursor);
+			hasNextPageRef.current = result.hasNextPage;
+		}).catch((error) => {
+			if (cancelled) return;
+			store.setServerData([]);
+			store.setError(error instanceof Error ? error : new Error(String(error)));
+			hasNextPageRef.current = false;
+		}).finally(() => {
+			if (!cancelled) store.setLoading(false);
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [
+		sorting,
+		filters,
+		search,
+		pageSize,
+		pageIndex,
+		store
+	]);
+	const resolvedColumns = useMemo(() => enableRowSelection ? withSelectionColumn(columns, typeof enableRowSelection === "object" ? enableRowSelection : {}) : columns, [columns, enableRowSelection]);
+	const table = useReactTable({
+		data: store.getSnapshot().data,
+		columns: resolvedColumns,
+		state: {
+			sorting,
+			rowSelection,
+			pagination: {
+				pageIndex,
+				pageSize
+			}
+		},
+		manualPagination: true,
+		manualSorting: true,
+		manualFiltering: true,
+		pageCount: hasNextPageRef.current ? pageIndex + 2 : pageIndex + 1,
+		getCoreRowModel: getCoreRowModel(),
+		getRowId,
+		enableRowSelection: !!enableRowSelection,
+		onSortingChange: (updater) => {
+			const next = typeof updater === "function" ? updater(sorting) : updater;
+			store.setSorting(next);
+		},
+		onRowSelectionChange: (updater) => {
+			const next = typeof updater === "function" ? updater(rowSelection) : updater;
+			store.setRowSelection(next);
+		},
+		onPaginationChange: (updater) => {
+			const next = typeof updater === "function" ? updater({
+				pageIndex,
+				pageSize
+			}) : updater;
+			store.setPagination(next.pageIndex, next.pageSize);
+		}
+	});
+	const stateAdapterRef = useRef(stateAdapter);
+	useEffect(() => {
+		stateAdapterRef.current = stateAdapter;
+	}, [stateAdapter]);
+	useEffect(() => {
+		stateAdapterRef.current?.write({
+			sorting,
+			filters,
+			search,
+			pageSize
+		});
+	}, [
+		sorting,
+		filters,
+		search,
+		pageSize
+	]);
+	return { table };
+}
+//#endregion
+//#region src/components/features/data-table/core/server-provider.tsx
+/**
+* Inner component that calls useServerTable.
+* Only rendered after hydration (gated by tableReady).
+*/
+function ServerProviderInner({ store, className, children, ...options }) {
+	const { table } = useServerTable(store, options);
+	return /* @__PURE__ */ jsx(TableInstanceContext, {
+		value: table,
+		children: /* @__PURE__ */ jsx(DataTableRenderKeyContext, {
+			value: store.getSnapshot()._version,
+			children: /* @__PURE__ */ jsx("div", {
+				className,
+				children
+			})
+		})
+	});
+}
+function ServerProvider(props) {
+	const { columns, fetchFn, transform, limit = 20, getRowId, enableRowSelection, defaultSort, defaultFilters, stateAdapter, className, children } = props;
+	const store = useMemo(() => createDataTableStore({
+		data: [],
+		mode: "server",
+		isLoading: true,
+		defaultSort,
+		defaultFilters,
+		pageSize: limit,
+		columnCount: columns.length
+	}), []);
+	const [tableReady, setTableReady] = useState(false);
+	useEffect(() => setTableReady(true), []);
+	return /* @__PURE__ */ jsx(DataTableStoreContext, {
+		value: store,
+		children: tableReady ? /* @__PURE__ */ jsx(ServerProviderInner, {
+			store,
+			columns,
+			fetchFn,
+			transform,
+			limit,
+			getRowId,
+			enableRowSelection,
+			stateAdapter,
+			className,
+			children
+		}) : /* @__PURE__ */ jsx(TableInstanceContext, {
+			value: null,
+			children: /* @__PURE__ */ jsx(DataTableRenderKeyContext, {
+				value: 0,
+				children: /* @__PURE__ */ jsx("div", {
+					className,
+					children
+				})
+			})
+		})
+	});
+}
+//#endregion
+//#region src/components/features/data-table/filters/checkbox-filter.tsx
+function CheckboxFilter({ column, label, options, className, disabled, responsive, sheetTitle, modal }) {
+	const { filters, setFilter, clearFilter, registerFilter, unregisterFilter } = useDataTableFilters();
+	useEffect(() => {
+		registerFilter(column, "checkbox");
+		return () => unregisterFilter(column);
+	}, [
+		column,
+		registerFilter,
+		unregisterFilter
+	]);
+	return /* @__PURE__ */ jsx(MultiSelect, {
+		options,
+		value: filters[column] ?? [],
+		onValueChange: (next) => {
+			if (next.length > 0) setFilter(column, next);
+			else clearFilter(column);
+		},
+		placeholder: label,
+		sheetTitle: sheetTitle ?? label,
+		responsive,
+		modalPopover: modal,
+		maxCount: 2,
+		showClearButton: true,
+		showSelectAll: false,
+		disabled,
+		className
+	});
+}
+//#endregion
+//#region src/components/features/data-table/filters/date-picker-filter.tsx
+function DatePickerFilter({ column, label, className, datePickerPopoverClassName, disableFuture, disablePast, minDate, maxDate, disabled }) {
+	const { filters, setFilter, clearFilter, registerFilter, unregisterFilter } = useDataTableFilters();
+	const rawValue = filters[column];
+	useEffect(() => {
+		registerFilter(column, "date-gte");
+		return () => unregisterFilter(column);
+	}, [
+		column,
+		registerFilter,
+		unregisterFilter
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dt-filter",
+		children: /* @__PURE__ */ jsx(CalendarDatePicker, {
+			date: useMemo(() => {
+				const date = rawValue ? new Date(rawValue) : void 0;
+				return {
+					from: date,
+					to: date
+				};
+			}, [rawValue]),
+			numberOfMonths: 1,
+			closeOnSelect: true,
+			placeholder: label,
+			triggerClassName: cn("h-10", className),
+			variant: "outline",
+			disabled,
+			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, disabled, responsive, sheetTitle, modal }) {
+	const { filters, setFilter, clearFilter, registerFilter, unregisterFilter } = useDataTableFilters();
+	const value = filters[column];
+	useEffect(() => {
+		registerFilter(column, "select");
+		return () => unregisterFilter(column);
+	}, [
+		column,
+		registerFilter,
+		unregisterFilter
+	]);
+	return /* @__PURE__ */ jsx(Autocomplete, {
+		options,
+		value,
+		onValueChange: (next) => {
+			if (next === "" || next === void 0) clearFilter(column);
+			else setFilter(column, next);
+		},
+		placeholder: placeholder ?? label,
+		searchPlaceholder: `Search ${label.toLowerCase()}...`,
+		disableSearch: !searchable,
+		sheetTitle: sheetTitle ?? label,
+		responsive,
+		modal,
+		disabled,
+		className,
+		contentClassName: selectPopoverClassName,
+		triggerClassName: "h-10"
+	});
+}
+//#endregion
+//#region src/components/features/data-table/data-table.tsx
+const DataTable = {
+	Client: ClientProvider,
+	Server: ServerProvider,
+	ActiveFilters: DataTableActiveFilters,
+	Content: DataTableContent,
+	InlineContent: DataTableInlineContent,
+	ColumnHeader: DataTableColumnHeader,
+	Pagination: DataTablePagination,
+	Search: DataTableSearch,
+	RowActions: DataTableRowActions,
+	BulkActions: DataTableBulkActions,
+	Loading: DataTableLoading,
+	SelectFilter,
+	CheckboxFilter,
+	DatePickerFilter
+};
+//#endregion
+export { DEFAULT_DEBOUNCE_MS as _, useDataTablePagination as a, DEFAULT_PAGE_SIZES as b, useDataTableSelection as c, resolvePath as d, rowMatchesSearch as f, useNuqsAdapter as g, createSelectionColumn as h, useDataTableLoading as i, useDataTableSorting as l, DataTableColumnHeader as m, useDataTableFilters as n, useDataTableRows as o, DataTableRowActions as p, useDataTableInlineContents as r, useDataTableSearch as s, DataTable as t, createDataTableStore as u, DEFAULT_LOADING_ROWS as v, DEFAULT_PAGE_SIZE as y };