@classytic/fluid 0.4.1 → 0.5.0

package/dist/client/hooks.mjs

@@ -1,11 +1,11 @@
 "use client";
 
-import { a as getApiParams, i as clearSearchAndFilterParams, r as buildSearchParams, t as buildFilterParams } from "../filter-utils-DqMmy_v-.mjs";
-import { t as useIsMobile } from "../use-mobile-BX3SQVo2.mjs";
-import { t as useMediaQuery } from "../use-media-query-BnVNIKT4.mjs";
-import { t as useScrollDetection } from "../use-scroll-detection-CsgsQYvy.mjs";
-import { n as useDebouncedCallback, t as useDebounce } from "../use-debounce-xmZucz5e.mjs";
-import { t as useKeyboardShortcut } from "../use-keyboard-shortcut-Bl6YM5Q7.mjs";
+import { a as getApiParams, i as clearSearchAndFilterParams, r as buildSearchParams, t as buildFilterParams } from "../filter-utils-BGIvtq1R.mjs";
+import { n as useDebouncedCallback, t as useDebounce } from "../use-debounce-BNoNiEon.mjs";
+import { t as useKeyboardShortcut } from "../use-keyboard-shortcut-C_Vk-36P.mjs";
+import { t as useMediaQuery } from "../use-media-query-ChLfFChU.mjs";
+import { t as useIsMobile } from "../use-mobile-CnEmFiQx.mjs";
+import { t as useScrollDetection } from "../use-scroll-detection-BKfqkmEC.mjs";
 import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 
@@ -210,6 +210,28 @@ function useBaseSearch(config) {
 	};
 }
 
+//#endregion
+//#region src/hooks/create-search-hook.ts
+/**
+* Factory that pre-configures useBaseSearch with typed defaults.
+*
+* @example
+* ```ts
+* const useOrderSearch = createSearchHook({
+*   basePath: "/dashboard/orders",
+*   searchFields: { name: "Name", sku: "SKU", barcode: "Barcode" },
+* });
+*
+* // In component:
+* const search = useOrderSearch();
+* ```
+*/
+function createSearchHook(config) {
+	return function useConfiguredSearch() {
+		return useBaseSearch(config);
+	};
+}
+
 //#endregion
 //#region src/hooks/use-copy-to-clipboard.ts
 /**
@@ -484,4 +506,4 @@ function useLocalStorage(key, initialValue, ttl) {
 }
 
 //#endregion
-export { TTL, clearStorage, generateUUID, getStorageItem, isStorageEmpty, removeStorageItem, setStorageItem, storage, useBaseSearch, useCopyToClipboard, useDebounce, useDebouncedCallback, useIsMobile, useKeyboardShortcut, useLocalStorage, useMediaQuery, useScrollDetection };
+export { TTL, clearStorage, createSearchHook, generateUUID, getStorageItem, isStorageEmpty, removeStorageItem, setStorageItem, storage, useBaseSearch, useCopyToClipboard, useDebounce, useDebouncedCallback, useIsMobile, useKeyboardShortcut, useLocalStorage, useMediaQuery, useScrollDetection };

package/dist/client/spreadsheet.d.mts

@@ -1,6 +1,6 @@
-import * as react_jsx_runtime0 from "react/jsx-runtime";
 import * as react from "react";
 import { ComponentType, ReactNode } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/spreadsheet/types.d.ts
 interface SpreadsheetColumn<TData = unknown> {
@@ -76,6 +76,8 @@ interface SpreadsheetTableProps<TData = unknown> {
   }) => ReactNode;
   /** CSS class for the table container */
   className?: string;
+  /** CSS class for the header row (overrides default bg-muted/50) */
+  headerClassName?: string;
   /** Accessible label for the table */
   ariaLabel?: string;
   /** Called when a row is added (receives the ID of the row to insert after) */
@@ -113,23 +115,6 @@ type SpreadsheetAction<TData = unknown> = {
   actions: SpreadsheetAction<TData>[];
 };
 //#endregion
-//#region src/components/spreadsheet/spreadsheet-table.d.ts
-declare function SpreadsheetTable<TData = unknown>({
-  columns,
-  items,
-  orderedIds,
-  dispatch,
-  isReadOnly,
-  footer,
-  mobileFooter,
-  rowActions,
-  className,
-  ariaLabel,
-  onAddRow,
-  virtualize,
-  estimateRowHeight
-}: SpreadsheetTableProps<TData>): react_jsx_runtime0.JSX.Element;
-//#endregion
 //#region src/components/spreadsheet/spreadsheet-row.d.ts
 interface SpreadsheetRowProps<TData = unknown> {
   rowId: string;
@@ -166,15 +151,23 @@ declare function SpreadsheetRowInner<TData>({
 }: SpreadsheetRowProps<TData>): react_jsx_runtime0.JSX.Element;
 declare const SpreadsheetRow: typeof SpreadsheetRowInner;
 //#endregion
-//#region src/components/spreadsheet/use-spreadsheet-store.d.ts
-declare function useSpreadsheetStore<TData>(initialItems?: TData[], getId?: (item: TData) => string): {
-  items: Map<string, TData>;
-  orderedIds: string[];
-  dispatch: react.ActionDispatch<[action: SpreadsheetAction<TData>]>;
-  getOrderedItems: () => TData[];
-  rowCount: number;
-};
-type SpreadsheetStore<TData> = ReturnType<typeof useSpreadsheetStore<TData>>;
+//#region src/components/spreadsheet/spreadsheet-table.d.ts
+declare function SpreadsheetTable<TData = unknown>({
+  columns,
+  items,
+  orderedIds,
+  dispatch,
+  isReadOnly,
+  footer,
+  mobileFooter,
+  rowActions,
+  className,
+  headerClassName,
+  ariaLabel,
+  onAddRow,
+  virtualize,
+  estimateRowHeight
+}: SpreadsheetTableProps<TData>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/spreadsheet/use-spreadsheet-keyboard.d.ts
 interface UseSpreadsheetKeyboardOptions {
@@ -204,4 +197,14 @@ declare function useSpreadsheetKeyboard({
   CELL_ATTR: string;
 };
 //#endregion
+//#region src/components/spreadsheet/use-spreadsheet-store.d.ts
+declare function useSpreadsheetStore<TData>(initialItems?: TData[], getId?: (item: TData) => string): {
+  items: Map<string, TData>;
+  orderedIds: string[];
+  dispatch: react.ActionDispatch<[action: SpreadsheetAction<TData>]>;
+  getOrderedItems: () => TData[];
+  rowCount: number;
+};
+type SpreadsheetStore<TData> = ReturnType<typeof useSpreadsheetStore<TData>>;
+//#endregion
 export { type CellRenderProps, type SpreadsheetAction, type SpreadsheetColumn, SpreadsheetRow, type SpreadsheetState, type SpreadsheetStore, SpreadsheetTable, type SpreadsheetTableProps, useSpreadsheetKeyboard, useSpreadsheetStore };

package/dist/client/spreadsheet.mjs

@@ -1,7 +1,7 @@
 "use client";
 
-import { jsx, jsxs } from "react/jsx-runtime";
 import { memo, useCallback, useEffect, useMemo, useReducer, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useVirtualizer } from "@tanstack/react-virtual";
 
 //#region src/components/spreadsheet/spreadsheet-row.tsx
@@ -100,6 +100,82 @@ function rowPropsAreEqual(prev, next) {
 }
 const SpreadsheetRow = memo(SpreadsheetRowInner, rowPropsAreEqual);
 
+//#endregion
+//#region src/components/spreadsheet/use-spreadsheet-clipboard.ts
+/**
+* Handles copy/pasting from Excel or other spreadsheets natively.
+* Supports matrix pasting (multiple rows and columns at once) via BATCH updates.
+*/
+function useSpreadsheetClipboard({ containerRef, orderedIds, columns, dispatch, isReadOnly = false }) {
+	const orderedIdsRef = useRef(orderedIds);
+	const columnsRef = useRef(columns);
+	const isReadOnlyRef = useRef(isReadOnly);
+	useEffect(() => {
+		orderedIdsRef.current = orderedIds;
+		columnsRef.current = columns;
+		isReadOnlyRef.current = isReadOnly;
+	}, [
+		orderedIds,
+		columns,
+		isReadOnly
+	]);
+	useEffect(() => {
+		const container = containerRef.current;
+		if (!container) return;
+		function handlePaste(e) {
+			if (isReadOnlyRef.current) return;
+			const activeElement = document.activeElement;
+			if (!activeElement || !container?.contains(activeElement)) return;
+			const cellElement = activeElement.closest("[data-cell]");
+			if (!cellElement) return;
+			const cellCoord = cellElement.getAttribute("data-cell");
+			if (!cellCoord) return;
+			const [startRowId, startColId] = cellCoord.split(":");
+			const clipboardData = e.clipboardData;
+			if (!clipboardData) return;
+			const pastedText = clipboardData.getData("text/plain");
+			if (!pastedText) return;
+			if (!(pastedText.includes("	") || pastedText.includes("\n"))) return;
+			e.preventDefault();
+			const currentOrderedIds = orderedIdsRef.current;
+			const visibleCols = columnsRef.current.filter((c) => !c.hiddenWhen?.({ isReadOnly: isReadOnlyRef.current }));
+			const startRowIdx = currentOrderedIds.indexOf(startRowId);
+			const startColIdx = visibleCols.findIndex((c) => c.id === startColId);
+			if (startRowIdx === -1 || startColIdx === -1) return;
+			const rows = pastedText.replace(/\r?\n$/, "").split(/\r?\n/);
+			const batchActions = [];
+			rows.forEach((row, rIdx) => {
+				const targetRowIdx = startRowIdx + rIdx;
+				if (targetRowIdx >= currentOrderedIds.length) return;
+				const targetRowId = currentOrderedIds[targetRowIdx];
+				row.split("	").forEach((cellValue, cIdx) => {
+					const targetColIdx = startColIdx + cIdx;
+					if (targetColIdx >= visibleCols.length) return;
+					const col = visibleCols[targetColIdx];
+					const field = col.field ?? col.id;
+					let value = cellValue;
+					if (col.dataType === "number") {
+						const num = Number(cellValue);
+						value = isNaN(num) ? 0 : num;
+					}
+					batchActions.push({
+						type: "UPDATE_CELL",
+						rowId: targetRowId,
+						field,
+						value
+					});
+				});
+			});
+			if (batchActions.length > 0) dispatch({
+				type: "BATCH",
+				actions: batchActions
+			});
+		}
+		container.addEventListener("paste", handlePaste);
+		return () => container.removeEventListener("paste", handlePaste);
+	}, [containerRef, dispatch]);
+}
+
 //#endregion
 //#region src/components/spreadsheet/use-spreadsheet-keyboard.ts
 /**
@@ -202,82 +278,6 @@ function useSpreadsheetKeyboard({ orderedIds, columnIds, containerRef, onAddRow
 	};
 }
 
-//#endregion
-//#region src/components/spreadsheet/use-spreadsheet-clipboard.ts
-/**
-* Handles copy/pasting from Excel or other spreadsheets natively.
-* Supports matrix pasting (multiple rows and columns at once) via BATCH updates.
-*/
-function useSpreadsheetClipboard({ containerRef, orderedIds, columns, dispatch, isReadOnly = false }) {
-	const orderedIdsRef = useRef(orderedIds);
-	const columnsRef = useRef(columns);
-	const isReadOnlyRef = useRef(isReadOnly);
-	useEffect(() => {
-		orderedIdsRef.current = orderedIds;
-		columnsRef.current = columns;
-		isReadOnlyRef.current = isReadOnly;
-	}, [
-		orderedIds,
-		columns,
-		isReadOnly
-	]);
-	useEffect(() => {
-		const container = containerRef.current;
-		if (!container) return;
-		function handlePaste(e) {
-			if (isReadOnlyRef.current) return;
-			const activeElement = document.activeElement;
-			if (!activeElement || !container?.contains(activeElement)) return;
-			const cellElement = activeElement.closest("[data-cell]");
-			if (!cellElement) return;
-			const cellCoord = cellElement.getAttribute("data-cell");
-			if (!cellCoord) return;
-			const [startRowId, startColId] = cellCoord.split(":");
-			const clipboardData = e.clipboardData;
-			if (!clipboardData) return;
-			const pastedText = clipboardData.getData("text/plain");
-			if (!pastedText) return;
-			if (!(pastedText.includes("	") || pastedText.includes("\n"))) return;
-			e.preventDefault();
-			const currentOrderedIds = orderedIdsRef.current;
-			const visibleCols = columnsRef.current.filter((c) => !c.hiddenWhen?.({ isReadOnly: isReadOnlyRef.current }));
-			const startRowIdx = currentOrderedIds.indexOf(startRowId);
-			const startColIdx = visibleCols.findIndex((c) => c.id === startColId);
-			if (startRowIdx === -1 || startColIdx === -1) return;
-			const rows = pastedText.replace(/\r?\n$/, "").split(/\r?\n/);
-			const batchActions = [];
-			rows.forEach((row, rIdx) => {
-				const targetRowIdx = startRowIdx + rIdx;
-				if (targetRowIdx >= currentOrderedIds.length) return;
-				const targetRowId = currentOrderedIds[targetRowIdx];
-				row.split("	").forEach((cellValue, cIdx) => {
-					const targetColIdx = startColIdx + cIdx;
-					if (targetColIdx >= visibleCols.length) return;
-					const col = visibleCols[targetColIdx];
-					const field = col.field ?? col.id;
-					let value = cellValue;
-					if (col.dataType === "number") {
-						const num = Number(cellValue);
-						value = isNaN(num) ? 0 : num;
-					}
-					batchActions.push({
-						type: "UPDATE_CELL",
-						rowId: targetRowId,
-						field,
-						value
-					});
-				});
-			});
-			if (batchActions.length > 0) dispatch({
-				type: "BATCH",
-				actions: batchActions
-			});
-		}
-		container.addEventListener("paste", handlePaste);
-		return () => container.removeEventListener("paste", handlePaste);
-	}, [containerRef, dispatch]);
-}
-
 //#endregion
 //#region src/components/spreadsheet/spreadsheet-table.tsx
 const VIRTUAL_ROW_BASE = {
@@ -289,7 +289,7 @@ const VIRTUAL_ROW_BASE = {
 	width: "100%",
 	willChange: "transform"
 };
-function SpreadsheetTable({ columns, items, orderedIds, dispatch, isReadOnly = false, footer, mobileFooter, rowActions, className = "", ariaLabel = "Spreadsheet", onAddRow, virtualize = false, estimateRowHeight = 48 }) {
+function SpreadsheetTable({ columns, items, orderedIds, dispatch, isReadOnly = false, footer, mobileFooter, rowActions, className = "", headerClassName, ariaLabel = "Spreadsheet", onAddRow, virtualize = false, estimateRowHeight = 48 }) {
 	const containerRef = useRef(null);
 	const tableContainerRef = useRef(null);
 	const mobileContainerRef = useRef(null);
@@ -343,9 +343,9 @@ function SpreadsheetTable({ columns, items, orderedIds, dispatch, isReadOnly = f
 				"aria-label": ariaLabel,
 				children: [
 					/* @__PURE__ */ jsx("thead", {
-						className: "sticky top-0 z-10 bg-background",
+						className: `sticky top-0 z-10 ${headerClassName ?? "bg-muted/50"}`,
 						children: /* @__PURE__ */ jsxs("tr", {
-							className: "border-b bg-muted/50",
+							className: "border-b",
 							style: virtualize ? {
 								display: "flex",
 								width: "100%"

package/dist/client/table.d.mts

@@ -1,8 +1,41 @@
-import { n as ApiPaginationData } from "../api-pagination-CJ0vR_w6.mjs";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { n as ApiPaginationData } from "../api-pagination-C30ser2L.mjs";
 import React$1, { ReactNode } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { ColumnDef, Table as TanstackTable, VisibilityState, VisibilityState as VisibilityState$1 } from "@tanstack/react-table";
 
+//#region src/components/bulk-action-bar.d.ts
+interface BulkActionBarProps {
+  /** Number of selected items */
+  count: number;
+  /** Callback to clear selection */
+  onClear?: () => void;
+  /** Label template. Default: "{count} selected" */
+  label?: string | ((count: number) => string);
+  /** Action buttons (children slot) */
+  children?: React.ReactNode;
+  /** Position variant */
+  position?: "inline" | "sticky" | "fixed";
+  /** Additional className for the root container */
+  className?: string;
+  /** Additional className for the label text */
+  labelClassName?: string;
+  /** Additional className for the actions wrapper */
+  actionsClassName?: string;
+  /** Disable entrance animation */
+  animated?: boolean;
+}
+declare function BulkActionBar({
+  count,
+  onClear,
+  label,
+  children,
+  position,
+  className,
+  labelClassName,
+  actionsClassName,
+  animated
+}: BulkActionBarProps): react_jsx_runtime0.JSX.Element | null;
+//#endregion
 //#region src/components/data-table.d.ts
 interface DataTablePaginationProps extends Partial<ApiPaginationData> {
   onPageChange?: (page: number) => void;
@@ -40,6 +73,36 @@ declare function DataTable<TData, TValue>({
   emptyState: customEmptyState
 }: DataTableProps<TData, TValue>): react_jsx_runtime0.JSX.Element;
 //#endregion
+//#region src/components/data-table-column-toggle.d.ts
+interface ToggleableColumn {
+  /** Column ID (must match the column key used in VisibilityState) */
+  id: string;
+  /** Display name shown in the toggle list */
+  header: string;
+}
+interface DataTableColumnToggleProps {
+  /** List of columns that can be toggled. Derive from your ColumnDef array. */
+  columns: ToggleableColumn[];
+  /** Controlled visibility state. Keys are column IDs, values are booleans. */
+  columnVisibility: VisibilityState$1;
+  /** Callback when visibility changes. */
+  onColumnVisibilityChange: (visibility: VisibilityState$1) => void;
+  /** Custom trigger element. Defaults to a Settings2 icon button. */
+  trigger?: React.ReactNode;
+  /** Label shown at the top of the dropdown */
+  label?: string;
+  /** Additional className for the trigger button */
+  className?: string;
+}
+declare function DataTableColumnToggle({
+  columns,
+  columnVisibility,
+  onColumnVisibilityChange,
+  trigger,
+  label,
+  className
+}: DataTableColumnToggleProps): react_jsx_runtime0.JSX.Element;
+//#endregion
 //#region src/components/data-table-toolbar.d.ts
 interface DataTableToolbarProps {
   children?: ReactNode;
@@ -87,34 +150,4 @@ declare function DataTableToolbar({
   showResultCount
 }: DataTableToolbarProps): react_jsx_runtime0.JSX.Element;
 //#endregion
-//#region src/components/data-table-column-toggle.d.ts
-interface ToggleableColumn {
-  /** Column ID (must match the column key used in VisibilityState) */
-  id: string;
-  /** Display name shown in the toggle list */
-  header: string;
-}
-interface DataTableColumnToggleProps {
-  /** List of columns that can be toggled. Derive from your ColumnDef array. */
-  columns: ToggleableColumn[];
-  /** Controlled visibility state. Keys are column IDs, values are booleans. */
-  columnVisibility: VisibilityState$1;
-  /** Callback when visibility changes. */
-  onColumnVisibilityChange: (visibility: VisibilityState$1) => void;
-  /** Custom trigger element. Defaults to a Settings2 icon button. */
-  trigger?: React.ReactNode;
-  /** Label shown at the top of the dropdown */
-  label?: string;
-  /** Additional className for the trigger button */
-  className?: string;
-}
-declare function DataTableColumnToggle({
-  columns,
-  columnVisibility,
-  onColumnVisibilityChange,
-  trigger,
-  label,
-  className
-}: DataTableColumnToggleProps): react_jsx_runtime0.JSX.Element;
-//#endregion
-export { DataTable, DataTableColumnToggle, type DataTableColumnToggleProps, type DataTablePaginationProps, type DataTableProps, DataTableToolbar, type DataTableToolbarProps, type TanstackTable, type ToggleableColumn, type VisibilityState };
+export { BulkActionBar, type BulkActionBarProps, DataTable, DataTableColumnToggle, type DataTableColumnToggleProps, type DataTablePaginationProps, type DataTableProps, DataTableToolbar, type DataTableToolbarProps, type TanstackTable, type ToggleableColumn, type VisibilityState };

package/dist/client/table.mjs

@@ -1,23 +1,56 @@
 "use client";
 
 import { t as cn } from "../utils-DQ5SCVoW.mjs";
-import { t as useIsMobile } from "../use-mobile-BX3SQVo2.mjs";
-import { t as useScrollDetection } from "../use-scroll-detection-CsgsQYvy.mjs";
-import { o as ApiPagination, r as DropdownWrapper } from "../dropdown-wrapper-B86u9Fri.mjs";
-import { n as useSearch } from "../search-context-DR7DBs7S.mjs";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { t as useIsMobile } from "../use-mobile-CnEmFiQx.mjs";
+import { t as useScrollDetection } from "../use-scroll-detection-BKfqkmEC.mjs";
+import { o as ApiPagination, r as DropdownWrapper } from "../dropdown-wrapper-B9nRDUlz.mjs";
+import { n as useSearch } from "../search-context-1g3ZmOvx.mjs";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { ArrowDown, ArrowUp, ArrowUpDown, ChevronLeft, ChevronRight, Search, Settings2, SlidersHorizontal, X } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
-import { Badge } from "@/components/ui/badge";
 import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet";
 import { flexRender, getCoreRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
-import { Input } from "@/components/ui/input";
 import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+
+//#region src/components/bulk-action-bar.tsx
+function BulkActionBar({ count, onClear, label, children, position = "inline", className, labelClassName, actionsClassName, animated = true }) {
+	if (count <= 0) return null;
+	const displayLabel = typeof label === "function" ? label(count) : label ?? `${count} selected`;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex items-center gap-3 rounded-lg border bg-muted/50 px-4 py-2", animated && "animate-in fade-in slide-in-from-bottom-2 duration-200", position === "sticky" && "sticky bottom-4 z-40 shadow-lg", position === "fixed" && "fixed bottom-4 left-1/2 -translate-x-1/2 z-50 shadow-lg", className),
+		role: "toolbar",
+		"aria-label": "Bulk actions",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: cn("text-sm font-medium text-foreground", labelClassName),
+				children: displayLabel
+			}),
+			onClear && /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: "icon",
+				className: "h-7 w-7 shrink-0",
+				onClick: onClear,
+				"aria-label": "Clear selection",
+				children: /* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5" })
+			}),
+			children && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+				"aria-hidden": "true",
+				className: "h-4 w-px bg-border"
+			}), /* @__PURE__ */ jsx("div", {
+				className: cn("flex items-center gap-2", actionsClassName),
+				children
+			})] })
+		]
+	});
+}
 
+//#endregion
 //#region src/components/data-table.tsx
 const ScrollButton = React.memo(function ScrollButton({ direction, onClick, visible, className }) {
 	if (!visible) return null;
@@ -104,7 +137,7 @@ function DataTable({ columns, data, isLoading = false, pagination, enableSorting
 		const timer = setTimeout(checkScroll, 150);
 		return () => clearTimeout(timer);
 	}, [data, checkScroll]);
-	const defaultLoadingState = useMemo(() => /* @__PURE__ */ jsx("div", {
+	const defaultLoadingState = /* @__PURE__ */ jsx("div", {
 		className: "w-full h-full min-h-[24rem] flex items-center justify-center bg-background/50 rounded-lg border border-border",
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "flex flex-col items-center gap-3",
@@ -113,9 +146,9 @@ function DataTable({ columns, data, isLoading = false, pagination, enableSorting
 				children: "Loading data..."
 			})]
 		})
-	}), []);
+	});
 	const visibleColumnCount = table.getVisibleLeafColumns().length;
-	const defaultEmptyState = useMemo(() => /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, {
+	const defaultEmptyState = /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, {
 		colSpan: visibleColumnCount,
 		className: "h-32 text-center",
 		children: /* @__PURE__ */ jsxs("div", {
@@ -135,8 +168,8 @@ function DataTable({ columns, data, isLoading = false, pagination, enableSorting
 				})
 			]
 		})
-	}) }), [visibleColumnCount]);
-	if (isLoading) return /* @__PURE__ */ jsx(Fragment, { children: customLoadingState || defaultLoadingState });
+	}) });
+	if (isLoading) return /* @__PURE__ */ jsx(Fragment$1, { children: customLoadingState || defaultLoadingState });
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn("flex flex-col h-full gap-4", className),
 		children: [/* @__PURE__ */ jsxs("div", {
@@ -197,6 +230,44 @@ function DataTable({ columns, data, isLoading = false, pagination, enableSorting
 	});
 }
 
+//#endregion
+//#region src/components/data-table-column-toggle.tsx
+function DataTableColumnToggle({ columns, columnVisibility, onColumnVisibilityChange, trigger, label = "Columns", className }) {
+	const defaultTrigger = /* @__PURE__ */ jsxs(Button, {
+		variant: "outline",
+		size: "sm",
+		className: cn("shrink-0", className),
+		children: [/* @__PURE__ */ jsx(Settings2, { className: "mr-2 h-4 w-4" }), label]
+	});
+	return /* @__PURE__ */ jsxs(DropdownWrapper, {
+		trigger: trigger ?? defaultTrigger,
+		contentClassName: "min-w-[150px]",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "px-1.5 py-1 text-xs font-medium text-muted-foreground",
+				children: label
+			}),
+			/* @__PURE__ */ jsx("div", { className: "bg-border -mx-1 my-1 h-px" }),
+			columns.map((col) => {
+				const isVisible = columnVisibility[col.id] !== false;
+				return /* @__PURE__ */ jsxs("div", {
+					role: "menuitemcheckbox",
+					"aria-checked": isVisible,
+					className: "flex items-center gap-2 rounded-md px-2 py-1.5 text-sm cursor-pointer hover:bg-accent select-none",
+					onClick: () => onColumnVisibilityChange({
+						...columnVisibility,
+						[col.id]: !isVisible
+					}),
+					children: [/* @__PURE__ */ jsx(Checkbox, {
+						checked: isVisible,
+						className: "pointer-events-none"
+					}), col.header]
+				}, col.id);
+			})
+		]
+	});
+}
+
 //#endregion
 //#region src/components/data-table-toolbar.tsx
 /**
@@ -243,7 +314,7 @@ function DataTableToolbar({ children, className, showSearch = true, searchPlaceh
 			children
 		]
 	});
-	const filterElement = showFilters && filterContent && /* @__PURE__ */ jsx(Fragment, { children: isMobile ? /* @__PURE__ */ jsxs(Sheet, {
+	const filterElement = showFilters && filterContent && /* @__PURE__ */ jsx(Fragment$1, { children: isMobile ? /* @__PURE__ */ jsxs(Sheet, {
 		open: filterOpen,
 		onOpenChange: setFilterOpen,
 		children: [/* @__PURE__ */ jsxs(Button, {
@@ -379,42 +450,4 @@ function DataTableToolbar({ children, className, showSearch = true, searchPlaceh
 }
 
 //#endregion
-//#region src/components/data-table-column-toggle.tsx
-function DataTableColumnToggle({ columns, columnVisibility, onColumnVisibilityChange, trigger, label = "Columns", className }) {
-	const defaultTrigger = /* @__PURE__ */ jsxs(Button, {
-		variant: "outline",
-		size: "sm",
-		className: cn("shrink-0", className),
-		children: [/* @__PURE__ */ jsx(Settings2, { className: "mr-2 h-4 w-4" }), label]
-	});
-	return /* @__PURE__ */ jsxs(DropdownWrapper, {
-		trigger: trigger ?? defaultTrigger,
-		contentClassName: "min-w-[150px]",
-		children: [
-			/* @__PURE__ */ jsx("div", {
-				className: "px-1.5 py-1 text-xs font-medium text-muted-foreground",
-				children: label
-			}),
-			/* @__PURE__ */ jsx("div", { className: "bg-border -mx-1 my-1 h-px" }),
-			columns.map((col) => {
-				const isVisible = columnVisibility[col.id] !== false;
-				return /* @__PURE__ */ jsxs("div", {
-					role: "menuitemcheckbox",
-					"aria-checked": isVisible,
-					className: "flex items-center gap-2 rounded-md px-2 py-1.5 text-sm cursor-pointer hover:bg-accent select-none",
-					onClick: () => onColumnVisibilityChange({
-						...columnVisibility,
-						[col.id]: !isVisible
-					}),
-					children: [/* @__PURE__ */ jsx(Checkbox, {
-						checked: isVisible,
-						className: "pointer-events-none"
-					}), col.header]
-				}, col.id);
-			})
-		]
-	});
-}
-
-//#endregion
-export { DataTable, DataTableColumnToggle, DataTableToolbar };
+export { BulkActionBar, DataTable, DataTableColumnToggle, DataTableToolbar };

package/dist/client/theme.mjs

@@ -1,7 +1,7 @@
 "use client";
 
-import { jsx, jsxs } from "react/jsx-runtime";
 import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Moon, Sun } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";

package/dist/command.d.mts

@@ -1,6 +1,6 @@
-import { n as useKeyboardShortcut } from "./use-keyboard-shortcut-_mRCh3QO.mjs";
+import { n as useKeyboardShortcut } from "./use-keyboard-shortcut-Q4CSPzSI.mjs";
+import React, { ReactNode } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
-import { ReactNode } from "react";
 
 //#region src/components/command/command-search.d.ts
 interface CommandSearchContextValue {
@@ -43,8 +43,10 @@ interface CommandSearchGroupProps {
 }
 interface CommandSearchItemProps {
   children: ReactNode;
-  /** Icon element rendered before the label */
-  icon?: ReactNode;
+  /** Icon — accepts a rendered element (`<Home />`) or a component (`Home`). */
+  icon?: ReactNode | React.ComponentType<{
+    className?: string;
+  }>;
   /** Keyboard shortcut displayed via Kbd component */
   shortcut?: string;
   /** Called when the item is selected */