@classytic/fluid 0.3.4 → 0.4.0

package/dist/client/table.d.mts

@@ -1,7 +1,7 @@
 import { n as ApiPaginationData } from "../api-pagination-CJ0vR_w6.mjs";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
-import React, { ReactNode } from "react";
-import { ColumnDef } from "@tanstack/react-table";
+import React$1, { ReactNode } from "react";
+import { ColumnDef, Table as TanstackTable, VisibilityState, VisibilityState as VisibilityState$1 } from "@tanstack/react-table";
 
 //#region src/components/data-table.d.ts
 interface DataTablePaginationProps extends Partial<ApiPaginationData> {
@@ -15,11 +15,15 @@ interface DataTableProps<TData, TValue> {
   enableSorting?: boolean;
   enableRowSelection?: boolean;
   onRowSelectionChange?: (selectedRows: TData[]) => void;
+  /** Controlled column visibility state. Keys are column IDs, values are booleans. */
+  columnVisibility?: VisibilityState$1;
+  /** Callback when column visibility changes. */
+  onColumnVisibilityChange?: (visibility: VisibilityState$1) => void;
   className?: string;
   /** Custom loading state renderer */
-  loadingState?: React.ReactNode;
+  loadingState?: React$1.ReactNode;
   /** Custom empty state renderer */
-  emptyState?: React.ReactNode;
+  emptyState?: React$1.ReactNode;
 }
 declare function DataTable<TData, TValue>({
   columns,
@@ -29,6 +33,8 @@ declare function DataTable<TData, TValue>({
   enableSorting,
   enableRowSelection,
   onRowSelectionChange,
+  columnVisibility: controlledVisibility,
+  onColumnVisibilityChange,
   className,
   loadingState: customLoadingState,
   emptyState: customEmptyState
@@ -81,4 +87,34 @@ declare function DataTableToolbar({
   showResultCount
 }: DataTableToolbarProps): react_jsx_runtime0.JSX.Element;
 //#endregion
-export { DataTable, type DataTablePaginationProps, type DataTableProps, DataTableToolbar, type DataTableToolbarProps };
+//#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 };

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/dashboard.d.mts

@@ -49,6 +49,8 @@ interface NavItem extends NavPermissions {
   url: string;
   icon?: LucideIcon;
   isActive?: boolean;
+  /** When true, the collapsible sub-menu is expanded by default (even when not active). */
+  defaultOpen?: boolean;
   badge?: string | number;
   items?: NavSubItem[];
 }

package/dist/dashboard.mjs

@@ -379,7 +379,7 @@ function SidebarBrand({ title, icon, href = "/", className, tooltip }) {
 function SidebarNavItem({ item, onClick }) {
 	const hasSubItems = item.items && item.items.length > 0;
 	const Icon = item.icon;
-	const [open, setOpen] = useState(item.isActive ?? false);
+	const [open, setOpen] = useState(item.defaultOpen ?? item.isActive ?? false);
 	if (hasSubItems) return /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(Collapsible, {
 		open,
 		onOpenChange: setOpen,

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";
@@ -372,6 +372,7 @@ function SelectInput({ control, items = [], groups = [], name, label, placeholde
 		const rawValue = field ? field.value?.toString() : localValue;
 		const handleChange = (newValue) => {
 			const actualValue = newValue === CLEAR_VALUE ? "" : newValue;
+			if ((field ? String(field.value ?? "") : localValue) === actualValue) return;
 			if (field) field.onChange(actualValue);
 			else setLocalValue(actualValue);
 			onValueChange?.(actualValue);
@@ -1475,18 +1476,32 @@ TagChoiceInput.displayName = "TagChoiceInput";
 */
 function ComboboxInput({ control, name, label, placeholder = "Select...", emptyText = "No items found.", description, helperText, required, disabled, items = [], className, labelClassName, inputClassName, onValueChange, renderOption, value: propValue, onChange: propOnChange }) {
 	const descriptionText = description || helperText;
-	const handleValueChange = useCallback((newItem, field) => {
+	const resolvedMapRef = useRef(/* @__PURE__ */ new Map());
+	const currentValueRef = useRef("");
+	useEffect(() => {
+		resolvedMapRef.current = new Map(items.map((item) => [item.value, item]));
+	}, [items]);
+	const onValueChangeRef = useRef(onValueChange);
+	onValueChangeRef.current = onValueChange;
+	const propOnChangeRef = useRef(propOnChange);
+	propOnChangeRef.current = propOnChange;
+	const fieldRef = useRef();
+	const handleValueChange = useCallback((newItem) => {
 		const safeValue = newItem?.value || "";
+		if (safeValue === currentValueRef.current) return;
+		const field = fieldRef.current;
 		if (field) field.onChange(safeValue);
-		else if (propOnChange) propOnChange(safeValue);
-		onValueChange?.(safeValue);
-	}, [propOnChange, onValueChange]);
+		else if (propOnChangeRef.current) propOnChangeRef.current(safeValue);
+		onValueChangeRef.current?.(safeValue);
+	}, []);
 	const renderCombobox = (currentValue, field, isDisabled, fieldState) => {
+		fieldRef.current = field;
+		currentValueRef.current = currentValue ?? "";
 		const ariaDescribedBy = [descriptionText ? `${name}-description` : void 0, fieldState?.invalid ? `${name}-error` : void 0].filter(Boolean).join(" ") || void 0;
 		return /* @__PURE__ */ jsxs(Combobox, {
 			items,
-			value: currentValue ? items.find((item) => item.value === currentValue) ?? null : null,
-			onValueChange: (item) => handleValueChange(item, field),
+			value: currentValue ? resolvedMapRef.current.get(currentValue) ?? items.find((item) => item.value === currentValue) ?? null : null,
+			onValueChange: handleValueChange,
 			disabled: isDisabled,
 			children: [/* @__PURE__ */ jsx(ComboboxInput$1, {
 				placeholder,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@classytic/fluid",
-  "version": "0.3.4",
+  "version": "0.4.0",
   "type": "module",
   "description": "Fluid UI - Custom components built on shadcn/ui and base ui by Classytic",
   "main": "./dist/index.mjs",