@datum-cloud/datum-ui 0.3.0-alpha.36807e9 → 0.3.0-alpha.4702cdb

package/dist/data-table/index.mjs

@@ -12,9 +12,10 @@ import { t as Label } from "../label-_ste_Re3.mjs";
 import { i as DropdownMenuItem, l as DropdownMenuTrigger, r as DropdownMenuContent, t as DropdownMenu } from "../dropdown-menu-DAFyO-qD.mjs";
 import { i as PopoverTrigger, r as PopoverContent, t as Popover } from "../popover-Ds9624qY.mjs";
 import { i as SelectItem, l as SelectTrigger, n as SelectContent, t as Select, u as SelectValue } from "../select-CwVIFWFO.mjs";
-import { t as Skeleton } from "../skeleton-Cs6Q5GQc.mjs";
-import { c as TableRow, i as TableCell, n as TableBody, o as TableHead, s as TableHeader, t as Table } from "../table-Dc3HfbM4.mjs";
-import { t as CalendarDatePicker } from "../calendar-date-picker-mlbzp3xR.mjs";
+import "../skeleton-CkE23wsL.mjs";
+import { t as Skeleton } from "../skeleton-DZ31pU4B.mjs";
+import { c as TableRow, i as TableCell, n as TableBody, o as TableHead, s as TableHeader, t as Table } from "../table-Dpzh0VPK.mjs";
+import { t as CalendarDatePicker } from "../calendar-date-picker-Bw6Mrr-P.mjs";
 import { ArrowDown, ArrowUp, ArrowUpDown, Check, ChevronDown, 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";
@@ -157,6 +158,16 @@ function withSelectionColumn(columns, options = {}) {
 
 //#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;
@@ -200,14 +211,13 @@ function applyFilters(data, filters, search, registeredFilters, customFilterFns,
 				console.warn(`[DataTable] No filter strategy registered for column "${column}". Filter ignored.`);
 				continue;
 			}
-			const cellValue = row[column];
-			if (!fn(cellValue, value)) return false;
+			if (!fn(resolvePath(row, column), value)) return false;
 		}
 		if (hasSearch) {
 			const query = search.toLowerCase();
 			if (searchConfig.searchFn) return searchConfig.searchFn(row, search);
 			if (searchConfig.searchableColumns && searchConfig.searchableColumns.length > 0) return searchConfig.searchableColumns.some((col) => {
-				const cellValue = row[col];
+				const cellValue = resolvePath(row, col);
 				return cellValue != null && String(cellValue).toLowerCase().includes(query);
 			});
 			return Object.values(row).some((val) => {
@@ -240,8 +250,9 @@ function createDataTableStore(options) {
 		rowSelection: {},
 		pageIndex: 0,
 		pageSize: options.pageSize ?? DEFAULT_PAGE_SIZE,
+		columnCount: options.columnCount ?? 0,
 		mode: options.mode,
-		isLoading: false,
+		isLoading: options.isLoading ?? false,
 		error: null,
 		inlineContents: [],
 		_version: 0
@@ -285,7 +296,6 @@ function createDataTableStore(options) {
 				filteredData: data
 			});
 		},
-		setTable: (_t) => {},
 		setSorting: (sorting) => {
 			setState({
 				...state,
@@ -468,10 +478,12 @@ function useDataTableStore() {
 	if (!store) throw new Error("useDataTableStore must be used within a <DataTable.Client> or <DataTable.Server> provider");
 	return store;
 }
-function useTableInstance() {
-	const table = use(TableInstanceContext);
-	if (!table) throw new Error("useTableInstance must be used within a <DataTable.Client> or <DataTable.Server> provider");
-	return table;
+/**
+* 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
@@ -533,25 +545,35 @@ function useDataTableSorting() {
 function useDataTableSelection() {
 	useRenderKey();
 	const store = useDataTableStore();
-	const table = useTableInstance();
+	const table = useTableInstanceOrNull();
 	return {
 		rowSelection: store.getSnapshot().rowSelection,
 		setRowSelection: store.setRowSelection,
-		selectedRows: table.getFilteredSelectedRowModel().rows.map((r) => r.original)
+		selectedRows: table ? table.getFilteredSelectedRowModel().rows.map((r) => r.original) : []
 	};
 }
 function useDataTablePagination() {
 	useRenderKey();
 	const store = useDataTableStore();
-	const table = useTableInstance();
+	const table = useTableInstanceOrNull();
 	const state = store.getSnapshot();
-	const nextPage = useCallback(() => table.nextPage(), [table]);
-	const prevPage = useCallback(() => table.previousPage(), [table]);
+	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,
-		prevPage,
+		nextPage: () => table.nextPage(),
+		prevPage: () => table.previousPage(),
 		pageIndex: state.pageIndex,
 		pageCount: table.getPageCount(),
 		setPageIndex: store.setPageIndex,
@@ -562,7 +584,12 @@ function useDataTablePagination() {
 }
 function useDataTableRows() {
 	useRenderKey();
-	const table = useTableInstance();
+	const table = useTableInstanceOrNull();
+	if (!table) return {
+		rows: [],
+		headerGroups: [],
+		totalColumns: 0
+	};
 	return {
 		rows: table.getRowModel().rows,
 		headerGroups: table.getHeaderGroups(),
@@ -572,7 +599,8 @@ function useDataTableRows() {
 function useDataTableLoading() {
 	return useSliceSelector(useCallback((state) => ({
 		isLoading: state.isLoading,
-		error: state.error
+		error: state.error,
+		columnCount: state.columnCount
 	}), []));
 }
 function useDataTableInlineContents() {
@@ -586,11 +614,9 @@ function useDataTableInlineContents() {
 
 //#endregion
 //#region src/components/features/data-table/components/active-filters.tsx
-function formatValue(column, value, formatter) {
-	if (formatter) {
-		const result = formatter(column, value);
-		if (result !== void 0) return result;
-	}
+function formatValue(column, value, formatters) {
+	const fn = formatters?.[column];
+	if (fn) return fn(value);
 	return String(value);
 }
 function FilterGroup({ label, children, className }) {
@@ -605,14 +631,15 @@ function FilterGroup({ label, children, className }) {
 	});
 }
 const EMPTY_LABELS = {};
-function ActiveFiltersInner({ label = "Selected Filters", filterLabels = EMPTY_LABELS, formatFilterValue: formatter, clearAll = "icon", clearAllLabel = "Clear all", className, groupClassName, badgeClassName }) {
+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 activeFilterEntries = Object.entries(filters).filter(([, value]) => value != null && value !== "" && !(Array.isArray(value) && value.length === 0));
-	const hasSearch = search.length > 0;
+	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 (!hasSearch && !hasFilters) return null;
-	const totalGroups = activeFilterEntries.length + (hasSearch ? 1 : 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);
@@ -620,7 +647,7 @@ function ActiveFiltersInner({ label = "Selected Filters", filterLabels = EMPTY_L
 	};
 	const handleClearAll = () => {
 		clearAllFilters();
-		if (hasSearch) clearSearch();
+		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", {
@@ -633,7 +660,7 @@ function ActiveFiltersInner({ label = "Selected Filters", filterLabels = EMPTY_L
 				"data-slot": "dt-active-filters-label",
 				children: label
 			}),
-			hasSearch && /* @__PURE__ */ jsx(FilterGroup, {
+			showSearch && /* @__PURE__ */ jsx(FilterGroup, {
 				label: "Search",
 				className: groupClassName,
 				children: /* @__PURE__ */ jsxs(Badge, {
@@ -662,10 +689,10 @@ function ActiveFiltersInner({ label = "Selected Filters", filterLabels = EMPTY_L
 						type: "muted",
 						theme: "solid",
 						className: badgeCn,
-						children: [/* @__PURE__ */ jsx("span", { children: formatValue(column, item, formatter) }), /* @__PURE__ */ jsx(Button, {
+						children: [/* @__PURE__ */ jsx("span", { children: formatValue(column, item, formatters) }), /* @__PURE__ */ jsx(Button, {
 							theme: "borderless",
 							size: "small",
-							"aria-label": `Remove ${formatValue(column, item, formatter)} from ${groupLabel}`,
+							"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, {
@@ -682,7 +709,7 @@ function ActiveFiltersInner({ label = "Selected Filters", filterLabels = EMPTY_L
 						type: "muted",
 						theme: "solid",
 						className: badgeCn,
-						children: [/* @__PURE__ */ jsx("span", { children: formatValue(column, value, formatter) }), /* @__PURE__ */ jsx(Button, {
+						children: [/* @__PURE__ */ jsx("span", { children: formatValue(column, value, formatters) }), /* @__PURE__ */ jsx(Button, {
 							theme: "borderless",
 							size: "small",
 							"aria-label": `Clear ${groupLabel} filter`,
@@ -788,9 +815,12 @@ function renderInlineContentRow(entry, colSpan, rows) {
 }
 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 || DEFAULT_LOADING_ROWS;
 	return /* @__PURE__ */ jsx("div", {
 		className: cn("datum-ui-data-table", className),
 		"data-slot": "dt",
@@ -827,7 +857,13 @@ function DataTableContent({ emptyMessage, className, tableClassName, headerClass
 							children: flexRender(cell.column.columnDef.cell, cell.getContext())
 						}, cell.id))
 					}, row.id);
-				}) : /* @__PURE__ */ jsx(TableRow, {
+				}) : 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,
@@ -898,19 +934,8 @@ 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))]
-		})
+		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)) })] })
 	});
 }
 
@@ -1075,7 +1100,7 @@ function DataTableRowActions({ row, actions, isLoading = false, className }) {
 
 //#endregion
 //#region src/components/features/data-table/components/search.tsx
-function DataTableSearch({ placeholder = "Search...", debounceMs = DEFAULT_DEBOUNCE_MS, className }) {
+function DataTableSearch({ placeholder = "Search...", debounceMs = DEFAULT_DEBOUNCE_MS, className, disabled }) {
 	const { search, setSearch } = useDataTableSearch();
 	const [inputValue, setInputValue] = useState(search);
 	useEffect(() => {
@@ -1097,6 +1122,7 @@ function DataTableSearch({ placeholder = "Search...", debounceMs = DEFAULT_DEBOU
 		value: inputValue,
 		onChange: (e) => setInputValue(e.target.value),
 		className,
+		disabled,
 		"aria-label": placeholder,
 		"data-slot": "dt-search"
 	});
@@ -1104,26 +1130,12 @@ function DataTableSearch({ placeholder = "Search...", debounceMs = DEFAULT_DEBOU
 
 //#endregion
 //#region src/components/features/data-table/hooks/use-data-table-client.ts
-function useDataTableClient(options) {
-	const { data, columns, pageSize, getRowId, enableRowSelection = false, defaultSort, defaultFilters, searchableColumns, searchFn, filterFns, stateAdapter } = options;
-	const store = useMemo(() => createDataTableStore({
-		data,
-		mode: "client",
-		defaultSort,
-		defaultFilters,
-		pageSize,
-		searchableColumns,
-		searchFn,
-		filterFns
-	}), []);
-	const isInitialRender = useRef(true);
-	useEffect(() => {
-		if (isInitialRender.current) {
-			isInitialRender.current = false;
-			return;
-		}
-		store.setData(data);
-	}, [data, store]);
+/**
+* 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({
@@ -1194,40 +1206,74 @@ function useDataTableClient(options) {
 		storePageSize,
 		stateAdapter
 	]);
-	return {
-		store,
-		table
-	};
-}
-
-//#endregion
-//#region src/components/features/data-table/hooks/use-is-client.ts
-/**
-* Returns `false` during SSR and `true` after hydration.
-* Used to gate components that depend on client-only APIs
-* (e.g. TanStack Table's internal useSyncExternalStore call
-* which omits the getServerSnapshot argument).
-*/
-function useIsClient() {
-	const [isClient, setIsClient] = useState(false);
-	useEffect(() => setIsClient(true), []);
-	return isClient;
+	return { table };
 }
 
 //#endregion
 //#region src/components/features/data-table/core/client-provider.tsx
 /**
-* Inner component that calls useDataTableClient.
-* Only rendered on the client (gated by ClientProvider).
+* Inner component that calls useClientTable.
+* Only rendered after hydration (gated by tableReady).
 */
-function ClientProviderInner({ className, children, ssrFallback: _ssrFallback, ...options }) {
-	const { store, table } = useDataTableClient(options);
+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 [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: /* @__PURE__ */ jsx(TableInstanceContext, {
-			value: table,
+		children: tableReady ? /* @__PURE__ */ jsx(ClientProviderInner, {
+			store,
+			columns,
+			getRowId,
+			enableRowSelection,
+			stateAdapter,
+			className,
+			children
+		}) : /* @__PURE__ */ jsx(TableInstanceContext, {
+			value: null,
 			children: /* @__PURE__ */ jsx(DataTableRenderKeyContext, {
-				value: store.getSnapshot()._version,
+				value: 0,
 				children: /* @__PURE__ */ jsx("div", {
 					className,
 					children
@@ -1236,15 +1282,16 @@ function ClientProviderInner({ className, children, ssrFallback: _ssrFallback, .
 		})
 	});
 }
-function ClientProvider(props) {
-	if (!useIsClient()) return /* @__PURE__ */ jsx(Fragment$1, { children: props.ssrFallback ?? null });
-	return /* @__PURE__ */ jsx(ClientProviderInner, { ...props });
-}
 
 //#endregion
 //#region src/components/features/data-table/hooks/use-data-table-server.ts
-function useDataTableServer(options) {
-	const { columns, fetchFn, transform, limit = 20, getRowId, enableRowSelection = false, defaultSort, defaultFilters, stateAdapter } = options;
+/**
+* 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(() => {
@@ -1255,13 +1302,6 @@ function useDataTableServer(options) {
 	}, [transform]);
 	const cursorMapRef = useRef(/* @__PURE__ */ new Map());
 	const hasNextPageRef = useRef(false);
-	const store = useMemo(() => createDataTableStore({
-		data: [],
-		mode: "server",
-		defaultSort,
-		defaultFilters,
-		pageSize: limit
-	}), []);
 	const { sorting, filters, search, rowSelection, pageSize, pageIndex } = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);
 	const prevQueryRef = useRef({
 		sorting,
@@ -1305,7 +1345,7 @@ function useDataTableServer(options) {
 			const result = transformRef.current(response);
 			store.setServerData(result.data);
 			store.setError(null);
-			if (result.nextCursor) cursorMapRef.current.set(pageIndex + 1, result.nextCursor);
+			if (result.cursor) cursorMapRef.current.set(pageIndex + 1, result.cursor);
 			hasNextPageRef.current = result.hasNextPage;
 		}).catch((error) => {
 			if (cancelled) return;
@@ -1375,26 +1415,58 @@ function useDataTableServer(options) {
 		pageSize,
 		stateAdapter
 	]);
-	return {
-		store,
-		table
-	};
+	return { table };
 }
 
 //#endregion
 //#region src/components/features/data-table/core/server-provider.tsx
 /**
-* Inner component that calls useDataTableServer.
-* Only rendered on the client (gated by ServerProvider).
+* Inner component that calls useServerTable.
+* Only rendered after hydration (gated by tableReady).
 */
-function ServerProviderInner({ className, children, ssrFallback: _ssrFallback, ...options }) {
-	const { store, table } = useDataTableServer(options);
+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: /* @__PURE__ */ jsx(TableInstanceContext, {
-			value: table,
+		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: store.getSnapshot()._version,
+				value: 0,
 				children: /* @__PURE__ */ jsx("div", {
 					className,
 					children
@@ -1403,15 +1475,11 @@ function ServerProviderInner({ className, children, ssrFallback: _ssrFallback, .
 		})
 	});
 }
-function ServerProvider(props) {
-	if (!useIsClient()) return /* @__PURE__ */ jsx(Fragment$1, { children: props.ssrFallback ?? null });
-	return /* @__PURE__ */ jsx(ServerProviderInner, { ...props });
-}
 
 //#endregion
 //#region src/components/features/data-table/filters/checkbox-filter.tsx
 const MAX_VISIBLE_BADGES = 2;
-function CheckboxFilter({ column, label, options, className, checkboxPopoverClassName }) {
+function CheckboxFilter({ column, label, options, className, checkboxPopoverClassName, disabled }) {
 	const { filters, setFilter, clearFilter, registerFilter, unregisterFilter } = useDataTableFilters();
 	const [open, setOpen] = useState(false);
 	useEffect(() => {
@@ -1442,7 +1510,8 @@ function CheckboxFilter({ column, label, options, className, checkboxPopoverClas
 			asChild: true,
 			children: /* @__PURE__ */ jsxs(Button, {
 				theme: "outline",
-				className: cn("justify-between gap-1", className),
+				disabled,
+				className: cn("h-10 justify-between gap-1", className),
 				"data-slot": "dt-filter",
 				"data-testid": "dt-filter-trigger",
 				children: [selectedValues.length > 0 ? /* @__PURE__ */ jsxs("div", {
@@ -1521,7 +1590,7 @@ function CheckboxFilter({ column, label, options, className, checkboxPopoverClas
 
 //#endregion
 //#region src/components/features/data-table/filters/date-picker-filter.tsx
-function DatePickerFilter({ column, label, className, datePickerPopoverClassName, disableFuture, disablePast, minDate, maxDate }) {
+function DatePickerFilter({ column, label, className, datePickerPopoverClassName, disableFuture, disablePast, minDate, maxDate, disabled }) {
 	const { filters, setFilter, clearFilter, registerFilter, unregisterFilter } = useDataTableFilters();
 	const rawValue = filters[column];
 	useEffect(() => {
@@ -1546,8 +1615,9 @@ function DatePickerFilter({ column, label, className, datePickerPopoverClassName
 			numberOfMonths: 1,
 			closeOnSelect: true,
 			placeholder: label,
-			triggerClassName: className,
+			triggerClassName: cn("h-10", className),
 			variant: "outline",
+			disabled,
 			disableFuture,
 			disablePast,
 			minDate,
@@ -1563,7 +1633,7 @@ function DatePickerFilter({ column, label, className, datePickerPopoverClassName
 
 //#endregion
 //#region src/components/features/data-table/filters/select-filter.tsx
-function SelectFilter({ column, label, options, placeholder, searchable = true, className, selectPopoverClassName }) {
+function SelectFilter({ column, label, options, placeholder, searchable = true, className, selectPopoverClassName, disabled }) {
 	const { filters, setFilter, clearFilter, registerFilter, unregisterFilter } = useDataTableFilters();
 	const [open, setOpen] = useState(false);
 	const value = filters[column];
@@ -1585,7 +1655,8 @@ function SelectFilter({ column, label, options, placeholder, searchable = true,
 				theme: "outline",
 				role: "combobox",
 				"aria-expanded": open,
-				className: cn("justify-between", className),
+				disabled,
+				className: cn("h-10 justify-between", className),
 				"data-slot": "dt-filter",
 				"data-testid": "dt-filter-trigger",
 				children: [/* @__PURE__ */ jsx("span", {

package/dist/date-picker/index.mjs

@@ -4,7 +4,7 @@ import "../button-AzpnV-WB.mjs";
 import "../input-DuyjEKEW.mjs";
 import "../popover-Ds9624qY.mjs";
 import "../select-CwVIFWFO.mjs";
-import { t as CalendarDatePicker } from "../calendar-date-picker-mlbzp3xR.mjs";
-import { C as utcToLocalInputString, S as utcStringToZonedDate, _ as getBrowserTimezone, a as formatTimeRangeDisplay, b as getTimezoneOffset, c as getPresetByKey, d as TimezoneSelector, f as QuickRangesPanel, g as formatUtcForDisplay, h as formatTimezoneLabel, i as formatSingleTimeDisplay, l as getPresetByShortcut, m as createTimezoneOption, n as TimeRangePicker, o as DEFAULT_PRESETS, p as CustomRangePanel, r as formatDateForInput, s as getDefaultPreset, t as toApiTimeRange, u as getPresetRange, v as getDefaultTimezoneOptions, w as zonedDateToUtcString, x as localInputStringToUtc, y as getShortTimezoneDisplay } from "../to-api-format-zI26rEBI.mjs";
+import { t as CalendarDatePicker } from "../calendar-date-picker-Bw6Mrr-P.mjs";
+import { C as utcToLocalInputString, S as utcStringToZonedDate, _ as getBrowserTimezone, a as formatTimeRangeDisplay, b as getTimezoneOffset, c as getPresetByKey, d as TimezoneSelector, f as QuickRangesPanel, g as formatUtcForDisplay, h as formatTimezoneLabel, i as formatSingleTimeDisplay, l as getPresetByShortcut, m as createTimezoneOption, n as TimeRangePicker, o as DEFAULT_PRESETS, p as CustomRangePanel, r as formatDateForInput, s as getDefaultPreset, t as toApiTimeRange, u as getPresetRange, v as getDefaultTimezoneOptions, w as zonedDateToUtcString, x as localInputStringToUtc, y as getShortTimezoneDisplay } from "../to-api-format-CzPt5UAX.mjs";
 
 export { CustomRangePanel as AbsoluteRangePanel, CustomRangePanel, CalendarDatePicker, DEFAULT_PRESETS, QuickRangesPanel, TimeRangePicker, TimezoneSelector, createTimezoneOption, formatDateForInput, formatSingleTimeDisplay, formatTimeRangeDisplay, formatTimezoneLabel, formatUtcForDisplay, getBrowserTimezone, getDefaultPreset, getDefaultTimezoneOptions, getPresetByKey, getPresetByShortcut, getPresetRange, getShortTimezoneDisplay, getTimezoneOffset, localInputStringToUtc, toApiTimeRange, utcStringToZonedDate, utcToLocalInputString, zonedDateToUtcString };

package/dist/dropdown/index.mjs

@@ -1,3 +1,3 @@
-import { a as DropdownMenuItem, c as DropdownMenuRadioGroup, d as DropdownMenuShortcut, f as DropdownMenuSub, h as DropdownMenuTrigger, i as DropdownMenuGroup, l as DropdownMenuRadioItem, m as DropdownMenuSubTrigger, n as DropdownMenuCheckboxItem, o as DropdownMenuLabel, p as DropdownMenuSubContent, r as DropdownMenuContent, s as DropdownMenuPortal, t as DropdownMenu, u as DropdownMenuSeparator } from "../dropdown-Cs7Xr8w7.mjs";
+import { a as DropdownMenuItem, c as DropdownMenuRadioGroup, d as DropdownMenuShortcut, f as DropdownMenuSub, h as DropdownMenuTrigger, i as DropdownMenuGroup, l as DropdownMenuRadioItem, m as DropdownMenuSubTrigger, n as DropdownMenuCheckboxItem, o as DropdownMenuLabel, p as DropdownMenuSubContent, r as DropdownMenuContent, s as DropdownMenuPortal, t as DropdownMenu, u as DropdownMenuSeparator } from "../dropdown-Dgm_b6Mm.mjs";
 
 export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger };

package/dist/dropzone/index.mjs

@@ -1,5 +1,5 @@
 import "../utils-Bfgoe-Gm.mjs";
 import "../button-AzpnV-WB.mjs";
-import { i as FileInputButton, n as DropzoneContent, r as DropzoneEmptyState, t as Dropzone } from "../dropzone-BT5fEDEF.mjs";
+import { i as FileInputButton, n as DropzoneContent, r as DropzoneEmptyState, t as Dropzone } from "../dropzone-DR6O9OdU.mjs";
 
 export { Dropzone, DropzoneContent, DropzoneEmptyState, FileInputButton };

package/dist/empty-content/index.mjs

@@ -1,3 +1,3 @@
-import { t as EmptyContent } from "../empty-content-iDu3NUqG.mjs";
+import { t as EmptyContent } from "../empty-content-Dm7_5jO9.mjs";
 
 export { EmptyContent };

package/dist/form/index.mjs

@@ -9,9 +9,9 @@ import "../label-_ste_Re3.mjs";
 import "../popover-Ds9624qY.mjs";
 import "../radio-group-B9Hm77LQ.mjs";
 import "../select-CwVIFWFO.mjs";
-import "../switch-B2VVauH6.mjs";
-import "../tooltip-DZFG1iMs.mjs";
-import { A as FormButton, C as FormField, D as FormCustom, E as FormDescription, O as FormCopyBox, S as FormFieldArray, T as FormDialog, _ as FormSelectItem, a as FormInputGroup, b as FormRadioItem, c as FormStep, d as useWatch, f as useWatchAll, g as FormSelect, h as FormSubmit, i as useField, j as FormAutocomplete, k as FormCheckbox, l as FormStepper, m as FormSwitch, n as useFormContext, o as StepperNavigation, p as FormTextarea, r as useFieldContext, s as StepperControls, t as useStepper, u as FormWhen, v as FormRoot, w as FormError, x as FormInput, y as FormRadioGroup } from "../use-stepper-CB1injte.mjs";
+import "../tooltip-U3XxlW4l.mjs";
+import "../switch-Cn9IM2gC.mjs";
+import { A as FormButton, C as FormField, D as FormCustom, E as FormDescription, O as FormCopyBox, S as FormFieldArray, T as FormDialog, _ as FormSelectItem, a as FormInputGroup, b as FormRadioItem, c as FormStep, d as useWatch, f as useWatchAll, g as FormSelect, h as FormSubmit, i as useField, j as FormAutocomplete, k as FormCheckbox, l as FormStepper, m as FormSwitch, n as useFormContext, o as StepperNavigation, p as FormTextarea, r as useFieldContext, s as StepperControls, t as useStepper, u as FormWhen, v as FormRoot, w as FormError, x as FormInput, y as FormRadioGroup } from "../use-stepper-DJd8o9dV.mjs";
 
 //#region src/components/features/form/index.ts
 /**

package/dist/grid/index.mjs

@@ -1,3 +1,3 @@
-import { a as getResponsiveValue, c as GRID_COLUMNS, d as RESPONSIVE_MAP, i as getGutter, l as GRID_PREFIX, n as Row, o as registerMediaQuery, r as RowContext, s as GRID_BREAKPOINTS, t as Col, u as RESPONSIVE_ARRAY } from "../col-RfO7d6AR.mjs";
+import { a as getResponsiveValue, c as GRID_COLUMNS, d as RESPONSIVE_MAP, i as getGutter, l as GRID_PREFIX, n as Row, o as registerMediaQuery, r as RowContext, s as GRID_BREAKPOINTS, t as Col, u as RESPONSIVE_ARRAY } from "../col-DCneNxQj.mjs";
 
 export { Col, GRID_BREAKPOINTS, GRID_COLUMNS, GRID_PREFIX, RESPONSIVE_ARRAY, RESPONSIVE_MAP, Row, RowContext, getGutter, getResponsiveValue, registerMediaQuery };