@classytic/fluid 0.3.6 → 0.4.1

package/dist/client/table.mjs

@@ -3,12 +3,12 @@
 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 { t as ApiPagination } from "../api-pagination-DBTE0yk4.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 { ArrowDown, ArrowUp, ArrowUpDown, ChevronLeft, ChevronRight, Search, SlidersHorizontal, X } from "lucide-react";
+import { ArrowDown, ArrowUp, ArrowUpDown, ChevronLeft, ChevronRight, Search, Settings2, SlidersHorizontal, X } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
@@ -16,6 +16,7 @@ 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";
 
 //#region src/components/data-table.tsx
 const ScrollButton = React.memo(function ScrollButton({ direction, onClick, visible, className }) {
@@ -34,11 +35,14 @@ const ScrollButton = React.memo(function ScrollButton({ direction, onClick, visi
 		children: direction === "left" ? /* @__PURE__ */ jsx(ChevronLeft, { className: "size-5" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "size-5" })
 	});
 });
-function DataTable({ columns, data, isLoading = false, pagination, enableSorting = false, enableRowSelection = false, onRowSelectionChange, className, loadingState: customLoadingState, emptyState: customEmptyState }) {
+function DataTable({ columns, data, isLoading = false, pagination, enableSorting = false, enableRowSelection = false, onRowSelectionChange, columnVisibility: controlledVisibility, onColumnVisibilityChange, className, loadingState: customLoadingState, emptyState: customEmptyState }) {
 	const [sorting, setSorting] = useState([]);
 	const [rowSelection, setRowSelection] = useState({});
+	const [internalVisibility, setInternalVisibility] = useState({});
 	const scrollAreaRef = useRef(null);
 	const { canScrollLeft, canScrollRight, isScrollable, checkScroll } = useScrollDetection(scrollAreaRef);
+	const visibility = controlledVisibility ?? internalVisibility;
+	const setVisibility = onColumnVisibilityChange ?? setInternalVisibility;
 	const { total = 0, limit = 10, pages = 1, page = 1, hasNext = false, hasPrev = false, onPageChange = () => {} } = pagination ?? {};
 	const table = useReactTable({
 		data,
@@ -46,6 +50,9 @@ function DataTable({ columns, data, isLoading = false, pagination, enableSorting
 		getCoreRowModel: getCoreRowModel(),
 		getSortedRowModel: enableSorting ? getSortedRowModel() : void 0,
 		onSortingChange: setSorting,
+		onColumnVisibilityChange: (updater) => {
+			setVisibility(typeof updater === "function" ? updater(visibility) : updater);
+		},
 		onRowSelectionChange: enableRowSelection ? (updater) => {
 			setRowSelection(updater);
 			if (onRowSelectionChange) {
@@ -55,6 +62,7 @@ function DataTable({ columns, data, isLoading = false, pagination, enableSorting
 		} : void 0,
 		state: {
 			sorting,
+			columnVisibility: visibility,
 			rowSelection: enableRowSelection ? rowSelection : void 0
 		},
 		enableRowSelection
@@ -106,8 +114,9 @@ function DataTable({ columns, data, isLoading = false, pagination, enableSorting
 			})]
 		})
 	}), []);
+	const visibleColumnCount = table.getVisibleLeafColumns().length;
 	const defaultEmptyState = useMemo(() => /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, {
-		colSpan: columns.length,
+		colSpan: visibleColumnCount,
 		className: "h-32 text-center",
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "flex flex-col items-center justify-center py-8",
@@ -126,7 +135,7 @@ function DataTable({ columns, data, isLoading = false, pagination, enableSorting
 				})
 			]
 		})
-	}) }), [columns.length]);
+	}) }), [visibleColumnCount]);
 	if (isLoading) return /* @__PURE__ */ jsx(Fragment, { children: customLoadingState || defaultLoadingState });
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn("flex flex-col h-full gap-4", className),
@@ -159,7 +168,7 @@ function DataTable({ columns, data, isLoading = false, pagination, enableSorting
 								children: flexRender(cell.column.columnDef.cell, cell.getContext())
 							}, cell.id))
 						}, row.id)) : customEmptyState ? /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, {
-							colSpan: columns.length,
+							colSpan: visibleColumnCount,
 							className: "h-32 text-center",
 							children: customEmptyState
 						}) }) : defaultEmptyState })] })
@@ -370,4 +379,42 @@ function DataTableToolbar({ children, className, showSearch = true, searchPlaceh
 }
 
 //#endregion
-export { DataTable, DataTableToolbar };
+//#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 };

package/dist/dropdown-wrapper-B86u9Fri.mjs

@@ -0,0 +1,357 @@
+import { t as cn } from "./utils-DQ5SCVoW.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { ChevronDown, MoreHorizontal } from "lucide-react";
+import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "@/components/ui/pagination";
+import { Button } from "@/components/ui/button";
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
+
+//#region src/components/custom-pagination.tsx
+function CustomPagination({ page, onPageChange, pages, hasPrev, hasNext }) {
+	const [isMobile, setIsMobile] = useState(false);
+	const currentPageNum = Number(page);
+	useEffect(() => {
+		const checkMobile = () => {
+			setIsMobile(window.innerWidth < 640);
+		};
+		checkMobile();
+		window.addEventListener("resize", checkMobile);
+		return () => window.removeEventListener("resize", checkMobile);
+	}, []);
+	if (pages <= 1) return null;
+	const getPageNumbers = () => {
+		const delta = isMobile ? 1 : 2;
+		const range = [];
+		const rangeWithDots = [];
+		for (let i = Math.max(2, currentPageNum - delta); i <= Math.min(pages - 1, currentPageNum + delta); i++) range.push(i);
+		if (currentPageNum - delta > 2) rangeWithDots.push(1, "...");
+		else rangeWithDots.push(1);
+		rangeWithDots.push(...range);
+		if (currentPageNum + delta < pages - 1) rangeWithDots.push("...", pages);
+		else if (pages > 1) {
+			if (!range.includes(pages)) rangeWithDots.push(pages);
+		}
+		return [...new Set(rangeWithDots)];
+	};
+	if (isMobile && pages > 5) return /* @__PURE__ */ jsx(Pagination, {
+		className: "mx-0 w-auto",
+		children: /* @__PURE__ */ jsxs(PaginationContent, {
+			className: "gap-1",
+			children: [
+				/* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationPrevious, {
+					onClick: () => hasPrev ? onPageChange(currentPageNum - 1) : void 0,
+					className: cn("cursor-pointer transition-colors h-8 px-2 text-xs", !hasPrev && "pointer-events-none opacity-50 cursor-not-allowed", hasPrev && "hover:bg-accent hover:text-accent-foreground"),
+					"aria-disabled": !hasPrev
+				}) }),
+				/* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsxs("div", {
+					className: "flex h-8 items-center justify-center px-3 text-xs font-medium bg-primary text-primary-foreground rounded-md",
+					children: [
+						currentPageNum,
+						" / ",
+						pages
+					]
+				}) }),
+				/* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationNext, {
+					onClick: () => hasNext ? onPageChange(currentPageNum + 1) : void 0,
+					className: cn("cursor-pointer transition-colors h-8 px-2 text-xs", !hasNext && "pointer-events-none opacity-50 cursor-not-allowed", hasNext && "hover:bg-accent hover:text-accent-foreground"),
+					"aria-disabled": !hasNext
+				}) })
+			]
+		})
+	});
+	return /* @__PURE__ */ jsx(Pagination, {
+		className: "mx-0 w-auto",
+		children: /* @__PURE__ */ jsxs(PaginationContent, {
+			className: "gap-1 flex-wrap",
+			children: [
+				/* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationPrevious, {
+					onClick: () => hasPrev ? onPageChange(currentPageNum - 1) : void 0,
+					className: cn("cursor-pointer transition-colors", isMobile ? "h-8 px-2 text-xs" : "h-9 px-3 text-sm", !hasPrev && "pointer-events-none opacity-50 cursor-not-allowed", hasPrev && "hover:bg-accent hover:text-accent-foreground"),
+					"aria-disabled": !hasPrev
+				}) }),
+				getPageNumbers().map((pageNum, index) => /* @__PURE__ */ jsx(PaginationItem, { children: pageNum === "..." ? /* @__PURE__ */ jsx("span", {
+					className: cn("flex items-center justify-center text-muted-foreground", isMobile ? "h-8 w-8 text-xs" : "h-9 w-9 text-sm"),
+					children: "..."
+				}) : /* @__PURE__ */ jsx(PaginationLink, {
+					className: cn("cursor-pointer transition-colors", isMobile ? "h-8 w-8 text-xs p-0" : "h-9 w-9 text-sm p-0", "hover:bg-accent hover:text-accent-foreground", Number(currentPageNum) === Number(pageNum) && "bg-primary text-primary-foreground hover:bg-primary/90"),
+					onClick: () => typeof pageNum === "number" ? onPageChange(pageNum) : void 0,
+					isActive: Number(currentPageNum) === Number(pageNum),
+					"aria-label": `Go to page ${pageNum}`,
+					"aria-current": Number(currentPageNum) === Number(pageNum) ? "page" : void 0,
+					children: pageNum
+				}) }, `pagination-page-${pageNum}-${index}`)),
+				/* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationNext, {
+					onClick: () => hasNext ? onPageChange(currentPageNum + 1) : void 0,
+					className: cn("cursor-pointer transition-colors", isMobile ? "h-8 px-2 text-xs" : "h-9 px-3 text-sm", !hasNext && "pointer-events-none opacity-50 cursor-not-allowed", hasNext && "hover:bg-accent hover:text-accent-foreground"),
+					"aria-disabled": !hasNext
+				}) })
+			]
+		})
+	});
+}
+function PaginationInfo({ page, total, limit = 10 }) {
+	const [isMobile, setIsMobile] = useState(false);
+	useEffect(() => {
+		const checkMobile = () => {
+			setIsMobile(window.innerWidth < 640);
+		};
+		checkMobile();
+		window.addEventListener("resize", checkMobile);
+		return () => window.removeEventListener("resize", checkMobile);
+	}, []);
+	if (total === 0) return /* @__PURE__ */ jsx("div", {
+		className: "flex-1 text-sm text-muted-foreground",
+		children: /* @__PURE__ */ jsx("p", { children: "No entries found" })
+	});
+	const startEntry = (page - 1) * limit + 1;
+	const endEntry = Math.min(page * limit, total);
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex-1 text-sm text-muted-foreground",
+		children: /* @__PURE__ */ jsx("p", {
+			className: cn("whitespace-nowrap", isMobile && "text-xs"),
+			children: isMobile ? /* @__PURE__ */ jsxs("span", { children: [
+				startEntry.toLocaleString(),
+				"-",
+				endEntry.toLocaleString(),
+				" of",
+				" ",
+				total.toLocaleString()
+			] }) : /* @__PURE__ */ jsxs("span", { children: [
+				"Showing",
+				" ",
+				/* @__PURE__ */ jsx("span", {
+					className: "font-medium text-foreground",
+					children: startEntry.toLocaleString()
+				}),
+				" ",
+				"to",
+				" ",
+				/* @__PURE__ */ jsx("span", {
+					className: "font-medium text-foreground",
+					children: endEntry.toLocaleString()
+				}),
+				" ",
+				"of",
+				" ",
+				/* @__PURE__ */ jsx("span", {
+					className: "font-medium text-foreground",
+					children: total.toLocaleString()
+				}),
+				" ",
+				total === 1 ? "result" : "results"
+			] })
+		})
+	});
+}
+
+//#endregion
+//#region src/components/api-pagination.tsx
+/**
+* ApiPagination - A reusable pagination component for API-driven data
+*/
+function ApiPagination({ total = 0, limit = 10, pages = 1, page = 1, hasNext = false, hasPrev = false, onPageChange = () => {}, className, showInfo = true, infoPosition = "left" }) {
+	const infoComponent = showInfo && /* @__PURE__ */ jsx("div", {
+		className: "shrink-0",
+		children: /* @__PURE__ */ jsx(PaginationInfo, {
+			total,
+			page,
+			limit
+		})
+	});
+	const paginationComponent = /* @__PURE__ */ jsx("div", {
+		className: "flex justify-center sm:justify-end",
+		children: /* @__PURE__ */ jsx(CustomPagination, {
+			page,
+			pages,
+			hasPrev,
+			hasNext,
+			onPageChange
+		})
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("shrink-0 bg-muted/30 rounded-lg border border-border p-3 mb-2", className),
+		children: /* @__PURE__ */ jsx("div", {
+			className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between sm:gap-4",
+			children: infoPosition === "left" ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+				className: "order-2 sm:order-1",
+				children: infoComponent
+			}), /* @__PURE__ */ jsx("div", {
+				className: "order-1 sm:order-2",
+				children: paginationComponent
+			})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+				className: "order-1 sm:order-1",
+				children: paginationComponent
+			}), /* @__PURE__ */ jsx("div", {
+				className: "order-2 sm:order-2",
+				children: infoComponent
+			})] })
+		})
+	});
+}
+
+//#endregion
+//#region src/components/dropdown-wrapper.tsx
+function DropdownWrapper({ trigger, children, align = "end", side = "bottom", sideOffset = 4, className, contentClassName, ...props }) {
+	return /* @__PURE__ */ jsxs(DropdownMenu, {
+		...props,
+		children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, { render: trigger }), /* @__PURE__ */ jsx(DropdownMenuContent, {
+			align,
+			side,
+			sideOffset,
+			className: cn("min-w-[160px]", contentClassName),
+			children
+		})]
+	});
+}
+function ActionDropdown({ items = [], triggerIcon: TriggerIcon = MoreHorizontal, triggerVariant = "ghost", triggerSize = "sm", triggerClassName, triggerLabel, showOnHover = false, align = "end", contentClassName, onOpenChange, stopPropagation = true, ...props }) {
+	const handleTriggerClick = (e) => {
+		if (stopPropagation) e.stopPropagation();
+	};
+	const trigger = /* @__PURE__ */ jsxs(Button, {
+		variant: triggerVariant,
+		size: triggerSize,
+		onClick: handleTriggerClick,
+		className: cn(showOnHover && "opacity-0 group-hover:opacity-100 transition-opacity", triggerClassName),
+		children: [
+			/* @__PURE__ */ jsx(TriggerIcon, { className: "h-4 w-4" }),
+			triggerLabel && /* @__PURE__ */ jsx("span", {
+				className: "ml-2",
+				children: triggerLabel
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: "Open menu"
+			})
+		]
+	});
+	const handleItemClick = (item) => (e) => {
+		if (stopPropagation) e.stopPropagation();
+		item.onClick?.(e);
+	};
+	return /* @__PURE__ */ jsxs(DropdownMenu, {
+		onOpenChange,
+		...props,
+		children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, { render: trigger }), /* @__PURE__ */ jsx(DropdownMenuContent, {
+			align,
+			className: cn("min-w-[180px]", contentClassName),
+			children: items.map((item, index) => {
+				if (item.hidden) return null;
+				if (item.type === "separator") return /* @__PURE__ */ jsx(DropdownMenuSeparator, {}, item.key || `separator-${index}`);
+				if (item.type === "label") return /* @__PURE__ */ jsx(DropdownMenuGroup, { children: /* @__PURE__ */ jsx(DropdownMenuLabel, {
+					className: item.className,
+					children: item.label
+				}) }, item.key || `label-${index}`);
+				if (item.type === "group") return /* @__PURE__ */ jsx(DropdownMenuGroup, { children: item.items?.map((groupItem, groupIndex) => {
+					if (groupItem.hidden) return null;
+					const GroupItemIcon = groupItem.icon;
+					const groupItemLabel = typeof groupItem.label === "function" ? groupItem.label() : groupItem.label;
+					return /* @__PURE__ */ jsxs(DropdownMenuItem, {
+						onClick: handleItemClick(groupItem),
+						disabled: groupItem.disabled,
+						className: cn(groupItem.variant === "destructive" && "text-destructive focus:text-destructive", groupItem.className),
+						children: [
+							GroupItemIcon && /* @__PURE__ */ jsx(GroupItemIcon, { className: "h-4 w-4" }),
+							/* @__PURE__ */ jsx("span", { children: groupItemLabel }),
+							groupItem.shortcut && /* @__PURE__ */ jsx("span", {
+								className: "ml-auto text-xs tracking-widest text-muted-foreground",
+								children: groupItem.shortcut
+							})
+						]
+					}, groupItem.key || `group-item-${groupIndex}`);
+				}) }, item.key || `group-${index}`);
+				const ItemIcon = item.icon;
+				const displayLabel = typeof item.label === "function" ? item.label() : item.label;
+				return /* @__PURE__ */ jsxs(DropdownMenuItem, {
+					onClick: handleItemClick(item),
+					disabled: item.disabled,
+					className: cn(item.variant === "destructive" && "text-destructive focus:text-destructive", item.className),
+					children: [
+						ItemIcon && /* @__PURE__ */ jsx(ItemIcon, { className: "h-4 w-4" }),
+						/* @__PURE__ */ jsx("span", { children: displayLabel }),
+						item.shortcut && /* @__PURE__ */ jsx("span", {
+							className: "ml-auto text-xs tracking-widest text-muted-foreground",
+							children: item.shortcut
+						})
+					]
+				}, item.key || `item-${index}`);
+			})
+		})]
+	});
+}
+function SelectDropdown({ value, onValueChange, placeholder = "Select option...", options = [], triggerClassName, contentClassName, disabled = false, ...props }) {
+	const selectedOption = options.find((option) => option.value === value);
+	const trigger = /* @__PURE__ */ jsxs(Button, {
+		variant: "outline",
+		disabled,
+		className: cn("w-full justify-between", !selectedOption && "text-muted-foreground", triggerClassName),
+		children: [selectedOption ? selectedOption.label : placeholder, /* @__PURE__ */ jsx(ChevronDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })]
+	});
+	return /* @__PURE__ */ jsxs(DropdownMenu, {
+		...props,
+		children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, { render: trigger }), /* @__PURE__ */ jsx(DropdownMenuContent, {
+			align: "start",
+			className: cn("w-full min-w-(--anchor-width)", contentClassName),
+			children: options.map((option) => /* @__PURE__ */ jsxs(DropdownMenuItem, {
+				onClick: () => onValueChange?.(option.value),
+				className: cn("cursor-pointer", value === option.value && "bg-accent"),
+				children: [option.icon && /* @__PURE__ */ jsx(option.icon, { className: "mr-2 h-4 w-4" }), option.label]
+			}, option.value))
+		})]
+	});
+}
+function CheckboxDropdown({ values = [], onValuesChange, placeholder = "Select options...", options = [], triggerClassName, contentClassName, disabled = false, showSelectedCount = true, ...props }) {
+	const selectedOptions = options.filter((option) => values.includes(option.value));
+	const displayText = selectedOptions.length > 0 ? showSelectedCount ? `${selectedOptions.length} selected` : selectedOptions.map((opt) => opt.label).join(", ") : placeholder;
+	const trigger = /* @__PURE__ */ jsxs(Button, {
+		variant: "outline",
+		disabled,
+		className: cn("w-full justify-between", selectedOptions.length === 0 && "text-muted-foreground", triggerClassName),
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "truncate",
+			children: displayText
+		}), /* @__PURE__ */ jsx(ChevronDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })]
+	});
+	const handleCheckedChange = (optionValue, checked) => {
+		if (checked) onValuesChange?.([...values, optionValue]);
+		else onValuesChange?.(values.filter((value) => value !== optionValue));
+	};
+	return /* @__PURE__ */ jsxs(DropdownMenu, {
+		...props,
+		children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, { render: trigger }), /* @__PURE__ */ jsx(DropdownMenuContent, {
+			align: "start",
+			className: cn("w-full min-w-(--anchor-width)", contentClassName),
+			children: options.map((option) => /* @__PURE__ */ jsxs(DropdownMenuCheckboxItem, {
+				checked: values.includes(option.value),
+				onCheckedChange: (checked) => handleCheckedChange(option.value, checked),
+				children: [option.icon && /* @__PURE__ */ jsx(option.icon, { className: "mr-2 h-4 w-4" }), option.label]
+			}, option.value))
+		})]
+	});
+}
+function RadioDropdown({ value, onValueChange, placeholder = "Select option...", options = [], triggerClassName, contentClassName, disabled = false, ...props }) {
+	const selectedOption = options.find((option) => option.value === value);
+	const trigger = /* @__PURE__ */ jsxs(Button, {
+		variant: "outline",
+		disabled,
+		className: cn("w-full justify-between", !selectedOption && "text-muted-foreground", triggerClassName),
+		children: [selectedOption ? selectedOption.label : placeholder, /* @__PURE__ */ jsx(ChevronDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })]
+	});
+	return /* @__PURE__ */ jsxs(DropdownMenu, {
+		...props,
+		children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, { render: trigger }), /* @__PURE__ */ jsx(DropdownMenuContent, {
+			align: "start",
+			className: cn("w-full min-w-(--anchor-width)", contentClassName),
+			children: /* @__PURE__ */ jsx(DropdownMenuRadioGroup, {
+				value,
+				onValueChange,
+				children: options.map((option) => /* @__PURE__ */ jsxs(DropdownMenuRadioItem, {
+					value: option.value,
+					children: [option.icon && /* @__PURE__ */ jsx(option.icon, { className: "mr-2 h-4 w-4" }), option.label]
+				}, option.value))
+			})
+		})]
+	});
+}
+
+//#endregion
+export { SelectDropdown as a, PaginationInfo as c, RadioDropdown as i, CheckboxDropdown as n, ApiPagination as o, DropdownWrapper as r, CustomPagination as s, ActionDropdown as t };

package/dist/forms.mjs

@@ -12,12 +12,12 @@ import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGr
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Badge } from "@/components/ui/badge";
 import { Input } from "@/components/ui/input";
+import { Checkbox } from "@/components/ui/checkbox";
 import { format, isValid, set } from "date-fns";
 import { Controller } from "react-hook-form";
 import { Field, FieldContent, FieldDescription, FieldError as FieldError$1, FieldLabel } from "@/components/ui/field";
 import { Textarea } from "@/components/ui/textarea";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { Checkbox } from "@/components/ui/checkbox";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import { Switch } from "@/components/ui/switch";
 import { Calendar } from "@/components/ui/calendar";
@@ -1325,7 +1325,7 @@ function TagChoiceInputInternal({ name, label, description, placeholder = "Selec
 					}),
 					children: [/* @__PURE__ */ jsx("div", {
 						className: "flex flex-1 flex-wrap items-center gap-1 px-3 py-1.5 min-h-[2.25rem]",
-						children: selectedValues.length > 0 ? selectedValues.map((val) => {
+						children: selectedValues.length > 0 ? selectedValues.map((val, idx) => {
 							const item = items.find((i) => i.value === val);
 							return /* @__PURE__ */ jsxs(Badge, {
 								variant: "secondary",
@@ -1338,7 +1338,7 @@ function TagChoiceInputInternal({ name, label, description, placeholder = "Selec
 									"aria-label": `Remove ${item?.label || val}`,
 									children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
 								})]
-							}, val);
+							}, val || `tag-${idx}`);
 						}) : /* @__PURE__ */ jsx("span", {
 							className: "text-sm text-muted-foreground",
 							children: placeholder
@@ -1485,7 +1485,7 @@ function ComboboxInput({ control, name, label, placeholder = "Select...", emptyT
 	onValueChangeRef.current = onValueChange;
 	const propOnChangeRef = useRef(propOnChange);
 	propOnChangeRef.current = propOnChange;
-	const fieldRef = useRef();
+	const fieldRef = useRef(void 0);
 	const handleValueChange = useCallback((newItem) => {
 		const safeValue = newItem?.value || "";
 		if (safeValue === currentValueRef.current) return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@classytic/fluid",
-  "version": "0.3.6",
+  "version": "0.4.1",
   "type": "module",
   "description": "Fluid UI - Custom components built on shadcn/ui and base ui by Classytic",
   "main": "./dist/index.mjs",
@@ -35,6 +35,10 @@
       "types": "./dist/client/calendar.d.mts",
       "default": "./dist/client/calendar.mjs"
     },
+    "./client/spreadsheet": {
+      "types": "./dist/client/spreadsheet.d.mts",
+      "default": "./dist/client/spreadsheet.mjs"
+    },
     "./forms": {
       "types": "./dist/forms.d.mts",
       "default": "./dist/forms.mjs"
@@ -71,30 +75,36 @@
   "scripts": {
     "build": "tsdown",
     "dev": "tsdown --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "typecheck": "tsc --noEmit",
     "lint": "tsc --noEmit",
     "clean": "rimraf dist",
-    "prepublishOnly": "npm run clean && npm run build"
+    "prepublishOnly": "npm run typecheck && npm test && npm run clean && npm run build"
   },
   "peerDependencies": {
-    "@tanstack/react-table": "^8.21.0",
-    "class-variance-authority": "^0.7.0",
-    "clsx": "^2.1.0",
-    "date-fns": "^4.1.0",
+    "@tanstack/react-table": ">=8.21.0",
+    "@tanstack/react-virtual": ">=3.11.2",
+    "class-variance-authority": ">=0.7.0",
+    "clsx": ">=2.1.0",
+    "date-fns": ">=4.1.0",
     "lucide-react": ">=0.460.0",
-    "next": "^15.0.0 || ^16.0.0",
-    "next-themes": "^0.4.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "react-error-boundary": "^4.0.0 || ^5.0.0 || ^6.0.0",
-    "react-hook-form": "^7.54.0",
-    "tailwind-merge": "^2.2.0 || ^3.0.0",
-    "vaul": "^1.0.0"
+    "next": ">=16.0.0",
+    "next-themes": ">=0.4.0",
+    "react": ">=19.0.0",
+    "react-dom": ">=19.0.0",
+    "react-error-boundary": ">=6.0.0",
+    "react-hook-form": ">=7.54.0",
+    "tailwind-merge": ">=2.2.0",
+    "vaul": ">=1.0.0"
   },
   "peerDependenciesMeta": {
     "@tanstack/react-table": {
       "optional": true
     },
+    "@tanstack/react-virtual": {
+      "optional": true
+    },
     "next-themes": {
       "optional": true
     },
@@ -113,12 +123,18 @@
   },
   "devDependencies": {
     "@tanstack/react-table": "^8.21.0",
+    "@tanstack/react-virtual": "^3.13.23",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
     "@types/node": "^22.0.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "date-fns": "^4.1.0",
+    "jsdom": "^29.0.0",
     "lucide-react": "^0.460.0",
     "next-themes": "^0.4.0",
     "react": "^19.0.0",
@@ -128,7 +144,8 @@
     "rimraf": "^5.0.0",
     "tailwind-merge": "^3.5.0",
     "tsdown": "^0.21.0-beta.2",
-    "typescript": "^5.7.0"
+    "typescript": "^5.7.0",
+    "vitest": "^4.1.0"
   },
   "publishConfig": {
     "access": "public"