@classytic/fluid 0.3.6 → 0.4.0

package/dist/client/core.d.mts

@@ -1,7 +1,7 @@
 import { n as ApiPaginationData, r as ApiPaginationProps, t as ApiPagination } from "../api-pagination-CJ0vR_w6.mjs";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 import * as react from "react";
-import { ComponentType, ElementType, HTMLAttributes, ReactNode, RefObject } from "react";
+import { ComponentPropsWithoutRef, ComponentType, ElementType, HTMLAttributes, ReactNode, RefObject } from "react";
 import { LucideIcon, LucideProps } from "lucide-react";
 import { VariantProps } from "class-variance-authority";
 import * as class_variance_authority_types0 from "class-variance-authority/types";
@@ -1186,32 +1186,28 @@ declare function SimpleTable({
 }: SimpleTableProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/tabs-wrapper.d.ts
-interface TabsWrapperProps {
+type TabPreset = "default" | "line";
+interface TabsWrapperProps extends Omit<ComponentPropsWithoutRef<"div">, "defaultValue" | "dir"> {
   defaultValue?: string;
   value?: string;
   onValueChange?: (value: string) => void;
-  children: ReactNode;
-  className?: string;
+  /** Elements rendered inside TabsList. */
+  triggers: ReactNode;
   listClassName?: string;
-  variant?: "default" | "primary" | "secondary" | "outline" | "ghost" | "underline";
+  preset?: TabPreset;
+  fullWidth?: boolean;
   orientation?: "horizontal" | "vertical";
   layout?: "default" | "flex" | "sidebar";
 }
 declare const TabsWrapper: react.NamedExoticComponent<TabsWrapperProps>;
-interface TabTriggerProps {
+interface TabTriggerProps extends Omit<ComponentPropsWithoutRef<"button">, "value"> {
   value: string;
-  children: ReactNode;
-  className?: string;
-  variant?: "default" | "primary" | "secondary" | "outline" | "ghost" | "underline";
   icon?: ReactNode;
   hideTextOnMobile?: boolean;
-  disabled?: boolean;
 }
 declare const TabTrigger: react.NamedExoticComponent<TabTriggerProps>;
-interface TabContentProps {
+interface TabContentProps extends Omit<ComponentPropsWithoutRef<"div">, "value"> {
   value: string;
-  children: ReactNode;
-  className?: string;
   withScrollArea?: boolean;
   scrollAreaClassName?: string;
   padding?: boolean;
@@ -1226,16 +1222,16 @@ interface DynamicTabItem {
   disabled?: boolean;
   hideTextOnMobile?: boolean;
 }
-interface DynamicTabsProps {
+interface DynamicTabsProps extends Omit<ComponentPropsWithoutRef<"div">, "defaultValue" | "dir"> {
   tabs?: DynamicTabItem[];
   defaultValue?: string;
   value?: string;
   onValueChange?: (value: string) => void;
-  variant?: "default" | "primary" | "secondary" | "outline" | "ghost" | "underline";
+  preset?: TabPreset;
+  fullWidth?: boolean;
+  orientation?: "horizontal" | "vertical";
   layout?: "default" | "flex" | "sidebar";
-  className?: string;
   listClassName?: string;
-  listWrapperClassName?: string;
   contentClassName?: string;
   scrollable?: boolean;
 }
@@ -1611,4 +1607,4 @@ declare function AnimatedCounter({
   as
 }: AnimatedCounterProps): react.ReactElement<any, string | react.JSXElementConstructor<any>>;
 //#endregion
-export { AccordionSection, type AccordionSectionProps, ActionDropdown, type ActionDropdownItem, type ActionDropdownProps, ActionTooltip, type ActionTooltipProps, type AnimateBaseProps, AnimatedCounter, type AnimatedCounterProps, AnimatedText, type AnimatedTextProps, type Animation, ApiPagination, type ApiPaginationData, type ApiPaginationProps, ButtonTooltip, type ButtonTooltipProps, CardWrapper, type CardWrapperProps, CheckboxDropdown, type CheckboxDropdownProps, ClientSubmitButton, type ClientSubmitButtonProps, CollapsibleCard, type CollapsibleCardProps, CollapsibleSection, type CollapsibleSectionProps, CollapsibleWrapper, type CollapsibleWrapperProps, ConfirmDialog, type ConfirmDialogProps, ConfirmSheet, type ConfirmSheetProps, CopyButton, type CopyButtonProps, CopyCodeBlock, type CopyCodeBlockProps, CopyText, type CopyTextProps, CustomPagination, type CustomPaginationProps, DEFAULT_COUNTRIES, DataCard, type DataCardProps, DeleteConfirmDialog, type DeleteConfirmDialogProps, DetailItem, type DetailItemProps, DetailView, type DetailViewItemData, type DetailViewProps, DialogWrapper, type DialogWrapperProps, type DragHandleProps, DraggableCard, type DraggableCardProps, DropdownWrapper, type DropdownWrapperProps, type DynamicTabItem, DynamicTabs, type DynamicTabsProps, ErrorState, ErrorStateInline, type ErrorStateInlineProps, type ErrorStateProps, FadeIn, FadeInUp, FaqAccordion, type FaqAccordionProps, type FaqItem, FeatureItem, type FeatureItemProps, FeatureList, type FeatureListItem, type FeatureListProps, FormDialog, type FormDialogProps, FormSheet, type FormSheetProps, IconItemMedia, type IconItemMediaProps, IconTooltip, type IconTooltipProps, InfoAlert, type InfoAlertProps, InfoRow, type InfoRowProps, InfoTooltip, type InfoTooltipProps, LoadingCard, type LoadingCardProps, PaginationInfo, type PaginationInfoProps, type PhoneCountry, PhoneInput, type PhoneInputProps, Pill, PillAvatar, PillAvatarGroup, type PillAvatarGroupProps, type PillAvatarProps, PillButton, type PillButtonProps, PillDelta, type PillDeltaProps, PillIcon, type PillIconProps, PillIndicator, type PillIndicatorProps, type PillProps, PillStatus, type PillStatusProps, RadioDropdown, type RadioDropdownProps, ResponsiveSplitLayout, type ResponsiveSplitLayoutProps, ScaleIn, SelectDropdown, type SelectDropdownOption, type SelectDropdownProps, SheetWrapper, type SheetWrapperProps, SimpleTable, type SimpleTableProps, type SlideDirection, SlideIn, type SlideInProps, StaggerChildren, type StaggerChildrenProps, StatsCard, type StatsCardProps, StatusBanner, type StatusBannerProps, type StatusBannerVariant, StepContent, type StepContentProps, Stepper, type StepperProps, type StepperStep, TabContent, type TabContentProps, TabTrigger, type TabTriggerProps, TableWrapper, type TableWrapperColumn, type TableWrapperEmptyState, type TableWrapperProps, TabsWrapper, type TabsWrapperProps, Thumbnail, type ThumbnailProps, Timeline, type TimelineItem, type TimelineProps, type TimelineStatus, TooltipWrapper, type TooltipWrapperProps, type UseInViewOptions, useInView };
+export { AccordionSection, type AccordionSectionProps, ActionDropdown, type ActionDropdownItem, type ActionDropdownProps, ActionTooltip, type ActionTooltipProps, type AnimateBaseProps, AnimatedCounter, type AnimatedCounterProps, AnimatedText, type AnimatedTextProps, type Animation, ApiPagination, type ApiPaginationData, type ApiPaginationProps, ButtonTooltip, type ButtonTooltipProps, CardWrapper, type CardWrapperProps, CheckboxDropdown, type CheckboxDropdownProps, ClientSubmitButton, type ClientSubmitButtonProps, CollapsibleCard, type CollapsibleCardProps, CollapsibleSection, type CollapsibleSectionProps, CollapsibleWrapper, type CollapsibleWrapperProps, ConfirmDialog, type ConfirmDialogProps, ConfirmSheet, type ConfirmSheetProps, CopyButton, type CopyButtonProps, CopyCodeBlock, type CopyCodeBlockProps, CopyText, type CopyTextProps, CustomPagination, type CustomPaginationProps, DEFAULT_COUNTRIES, DataCard, type DataCardProps, DeleteConfirmDialog, type DeleteConfirmDialogProps, DetailItem, type DetailItemProps, DetailView, type DetailViewItemData, type DetailViewProps, DialogWrapper, type DialogWrapperProps, type DragHandleProps, DraggableCard, type DraggableCardProps, DropdownWrapper, type DropdownWrapperProps, type DynamicTabItem, DynamicTabs, type DynamicTabsProps, ErrorState, ErrorStateInline, type ErrorStateInlineProps, type ErrorStateProps, FadeIn, FadeInUp, FaqAccordion, type FaqAccordionProps, type FaqItem, FeatureItem, type FeatureItemProps, FeatureList, type FeatureListItem, type FeatureListProps, FormDialog, type FormDialogProps, FormSheet, type FormSheetProps, IconItemMedia, type IconItemMediaProps, IconTooltip, type IconTooltipProps, InfoAlert, type InfoAlertProps, InfoRow, type InfoRowProps, InfoTooltip, type InfoTooltipProps, LoadingCard, type LoadingCardProps, PaginationInfo, type PaginationInfoProps, type PhoneCountry, PhoneInput, type PhoneInputProps, Pill, PillAvatar, PillAvatarGroup, type PillAvatarGroupProps, type PillAvatarProps, PillButton, type PillButtonProps, PillDelta, type PillDeltaProps, PillIcon, type PillIconProps, PillIndicator, type PillIndicatorProps, type PillProps, PillStatus, type PillStatusProps, RadioDropdown, type RadioDropdownProps, ResponsiveSplitLayout, type ResponsiveSplitLayoutProps, ScaleIn, SelectDropdown, type SelectDropdownOption, type SelectDropdownProps, SheetWrapper, type SheetWrapperProps, SimpleTable, type SimpleTableProps, type SlideDirection, SlideIn, type SlideInProps, StaggerChildren, type StaggerChildrenProps, StatsCard, type StatsCardProps, StatusBanner, type StatusBannerProps, type StatusBannerVariant, StepContent, type StepContentProps, Stepper, type StepperProps, type StepperStep, TabContent, type TabContentProps, type TabPreset, TabTrigger, type TabTriggerProps, TableWrapper, type TableWrapperColumn, type TableWrapperEmptyState, type TableWrapperProps, TabsWrapper, type TabsWrapperProps, Thumbnail, type ThumbnailProps, Timeline, type TimelineItem, type TimelineProps, type TimelineStatus, TooltipWrapper, type TooltipWrapperProps, type UseInViewOptions, useInView };

package/dist/client/core.mjs

@@ -2,20 +2,19 @@
 
 import { t as cn } from "../utils-DQ5SCVoW.mjs";
 import { t as useMediaQuery } from "../use-media-query-BnVNIKT4.mjs";
-import { n as CustomPagination, r as PaginationInfo, t as ApiPagination } from "../api-pagination-DBTE0yk4.mjs";
+import { a as SelectDropdown, c as PaginationInfo, i as RadioDropdown, n as CheckboxDropdown, o as ApiPagination, r as DropdownWrapper, s as CustomPagination, t as ActionDropdown } from "../dropdown-wrapper-B86u9Fri.mjs";
 import { i as ClientSubmitButton, n as FormSheet, r as SheetWrapper, t as ConfirmSheet } from "../sheet-wrapper-C13Y-Q6w.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import * as React$1 from "react";
-import { Children, Fragment as Fragment$1, createElement, isValidElement, memo, useEffect, useMemo, useRef, useState } from "react";
-import { AlertCircle, AlertTriangle, ArrowLeft, ArrowRight, Check, CheckCircle2, ChevronDown, ChevronDownIcon, ChevronUp, ChevronUpIcon, Circle, Copy, Info, Loader2, MinusIcon, MoreHorizontal, RefreshCw, X } from "lucide-react";
+import { Children, Fragment as Fragment$1, createContext, createElement, isValidElement, memo, use, useEffect, useMemo, useRef, useState } from "react";
+import { AlertCircle, AlertTriangle, ArrowLeft, ArrowRight, Check, CheckCircle2, ChevronDown, ChevronDownIcon, ChevronUp, ChevronUpIcon, Circle, Copy, Info, Loader2, MinusIcon, RefreshCw, X } from "lucide-react";
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "@/components/ui/alert-dialog";
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
-import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { cva } from "class-variance-authority";
 import { Item, ItemContent, ItemDescription } from "@/components/ui/item";
@@ -642,170 +641,6 @@ function FormDialog({ open, onOpenChange, title, description, children, onSubmit
 	});
 }
 
-//#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
 //#region src/components/error-state.tsx
 /**
@@ -1481,58 +1316,73 @@ function PillAvatarGroup({ children, className, ...props }) {
 
 //#endregion
 //#region src/components/tabs-wrapper.tsx
-const LIST_BASE_CLASS = "flex flex-wrap items-center justify-start gap-1 h-auto rounded-md p-1 shadow-sm transition-colors";
-const LIST_VARIANTS = {
-	default: "border border-border/50 bg-muted/60 backdrop-blur-sm",
-	primary: "border border-primary/30 bg-primary/10",
-	secondary: "border border-secondary/40 bg-secondary/10",
-	outline: "border border-border bg-background",
-	ghost: "border border-transparent bg-transparent shadow-none",
-	underline: "w-full mb-4 rounded-none border-b border-border/60 bg-transparent p-0 shadow-none gap-6"
+const PRESET_VARIANT = {
+	default: "default",
+	line: "line"
 };
-const TRIGGER_VARIANTS = {
-	default: "text-muted-foreground hover:bg-muted/40 hover:text-foreground data-active:bg-background data-active:text-foreground data-active:shadow-sm",
-	primary: "text-primary hover:bg-primary/10 hover:text-primary data-active:bg-primary data-active:text-primary-foreground",
-	secondary: "text-secondary-foreground hover:bg-secondary/10 hover:text-secondary-foreground data-active:bg-secondary data-active:text-secondary-foreground",
-	outline: "text-foreground hover:bg-accent/40 hover:text-accent-foreground data-active:bg-accent data-active:text-accent-foreground",
-	ghost: "text-muted-foreground hover:bg-muted/30 hover:text-foreground data-active:bg-muted data-active:text-foreground",
-	underline: "text-muted-foreground rounded-none px-0 py-2 hover:bg-transparent hover:text-primary border-b-2 border-transparent data-active:border-primary data-active:text-primary data-active:shadow-none"
+const PRESETS = {
+	default: {
+		list: "",
+		trigger: ""
+	},
+	line: {
+		list: [
+			"justify-start p-0 shadow-none flex-nowrap",
+			"group-data-horizontal/tabs:w-full group-data-horizontal/tabs:border-b group-data-horizontal/tabs:border-border/60 group-data-horizontal/tabs:gap-5 group-data-horizontal/tabs:h-auto",
+			"group-data-vertical/tabs:border-r group-data-vertical/tabs:border-border/60 group-data-vertical/tabs:gap-1"
+		].join(" "),
+		trigger: [
+			"flex-initial",
+			"group-data-horizontal/tabs:px-2 group-data-horizontal/tabs:pb-2.5 group-data-horizontal/tabs:pt-1.5",
+			"group-data-vertical/tabs:py-2 group-data-vertical/tabs:px-3",
+			"after:bg-primary",
+			"data-active:text-primary",
+			"dark:data-active:text-primary"
+		].join(" ")
+	}
 };
-const TabsWrapper = memo(function TabsWrapper({ defaultValue, value, onValueChange, children, className, listClassName, variant = "default", orientation = "horizontal", layout = "default", ...props }) {
-	const isFlexLayout = useMemo(() => layout === "flex" || layout === "sidebar", [layout]);
-	const computedClasses = useMemo(() => ({
-		root: cn("w-full", isFlexLayout && "flex-1 flex flex-col", className),
-		list: cn(LIST_BASE_CLASS, isFlexLayout ? "w-full" : "w-fit", !isFlexLayout && variant !== "underline" && "mb-6", LIST_VARIANTS[variant] ?? LIST_VARIANTS.default, listClassName)
-	}), [
-		isFlexLayout,
-		className,
-		variant,
+const TabPresetContext = createContext({
+	preset: "default",
+	fullWidth: false
+});
+const TabsWrapper = memo(function TabsWrapper({ defaultValue, value, onValueChange, children, className, triggers, listClassName, preset = "default", fullWidth = false, orientation = "horizontal", layout = "default", ...props }) {
+	const isFlexLayout = layout === "flex" || layout === "sidebar";
+	const rootClassName = useMemo(() => cn("w-full", isFlexLayout && "flex-1 min-h-0", className), [isFlexLayout, className]);
+	const listClass = useMemo(() => cn(PRESETS[preset].list, fullWidth && "w-full", listClassName), [
+		preset,
+		fullWidth,
 		listClassName
 	]);
-	const triggers = [];
-	const panels = [];
-	Children.forEach(children, (child) => {
-		if (isValidElement(child) && child.type === TabContent) panels.push(child);
-		else triggers.push(child);
-	});
-	return /* @__PURE__ */ jsxs(Tabs, {
-		defaultValue,
-		value,
-		onValueChange,
-		orientation,
-		className: computedClasses.root,
-		...props,
-		children: [/* @__PURE__ */ jsx(TabsList, {
-			className: computedClasses.list,
-			children: triggers
-		}), panels]
+	return /* @__PURE__ */ jsx(TabPresetContext, {
+		value: {
+			preset,
+			fullWidth
+		},
+		children: /* @__PURE__ */ jsxs(Tabs, {
+			defaultValue,
+			value,
+			onValueChange,
+			orientation,
+			className: rootClassName,
+			...props,
+			children: [/* @__PURE__ */ jsx(TabsList, {
+				variant: PRESET_VARIANT[preset],
+				className: listClass,
+				children: triggers
+			}), children]
+		})
 	});
 });
-const TabTrigger = memo(function TabTrigger({ value, children, className, variant = "default", icon, hideTextOnMobile = false, disabled = false, ...props }) {
+const TabTrigger = memo(function TabTrigger({ value, children, className, icon, hideTextOnMobile = false, disabled = false, ...props }) {
+	const { preset, fullWidth } = use(TabPresetContext);
 	return /* @__PURE__ */ jsxs(TabsTrigger, {
 		value,
 		disabled,
-		className: useMemo(() => cn("flex items-center gap-2 transition-colors duration-200", TRIGGER_VARIANTS[variant] ?? TRIGGER_VARIANTS.default, className), [variant, className]),
+		className: useMemo(() => cn(PRESETS[preset].trigger, fullWidth && "flex-1", className), [
+			preset,
+			fullWidth,
+			className
+		]),
 		...props,
 		children: [icon, hideTextOnMobile ? /* @__PURE__ */ jsx("span", {
 			className: "hidden sm:inline",
@@ -1561,77 +1411,52 @@ const TabContent = memo(function TabContent({ value, children, className, withSc
 		}) : children
 	});
 });
-const DynamicTabs = memo(function DynamicTabs({ tabs = [], defaultValue, value, onValueChange, variant = "default", layout = "default", className, listClassName, listWrapperClassName, contentClassName, scrollable = false, ...props }) {
-	const isFlexLayout = useMemo(() => layout === "flex" || layout === "sidebar", [layout]);
-	const useSheetDefaults = isFlexLayout && scrollable;
-	const computedClasses = useMemo(() => ({
-		root: cn("w-full", isFlexLayout && "flex-1 flex flex-col min-h-0", className),
-		listWrapper: cn("w-full", useSheetDefaults ? "px-0" : "px-6", listWrapperClassName),
-		flexList: cn("flex flex-wrap items-center justify-center gap-1 h-auto", variant === "underline" ? "rounded-none border-b border-border/60 bg-transparent p-0 shadow-none gap-6" : "rounded-md p-1 shadow-sm backdrop-blur-sm", LIST_VARIANTS[variant] ?? LIST_VARIANTS.default, useSheetDefaults && "mb-4 gap-0.5", listClassName),
-		standardList: cn(LIST_BASE_CLASS, variant !== "underline" && "w-fit mb-6", LIST_VARIANTS[variant] ?? LIST_VARIANTS.default, listClassName),
-		contentWrapper: cn(isFlexLayout && "flex-1 min-h-0 overflow-hidden"),
-		flexContent: cn("mt-0 h-full", useSheetDefaults && "px-1", contentClassName),
-		standardContent: cn(isFlexLayout ? "h-full" : "space-y-4 mt-6", contentClassName)
-	}), [
+const DynamicTabs = memo(function DynamicTabs({ tabs = [], defaultValue, value, onValueChange, preset = "default", fullWidth = false, orientation = "horizontal", layout = "default", className, listClassName, contentClassName, scrollable = false, ...props }) {
+	const isFlexLayout = layout === "flex" || layout === "sidebar";
+	const rootClassName = useMemo(() => cn("w-full", isFlexLayout && "flex-1 min-h-0", className), [isFlexLayout, className]);
+	const listClass = useMemo(() => cn(PRESETS[preset].list, fullWidth && "w-full", isFlexLayout && "justify-center", listClassName), [
+		preset,
+		fullWidth,
 		isFlexLayout,
-		useSheetDefaults,
-		className,
-		listWrapperClassName,
-		listClassName,
-		variant,
-		contentClassName
+		listClassName
 	]);
-	return /* @__PURE__ */ jsxs(Tabs, {
-		defaultValue,
-		value,
-		onValueChange,
-		className: computedClasses.root,
-		...props,
-		children: [isFlexLayout ? /* @__PURE__ */ jsx("div", {
-			className: computedClasses.listWrapper,
-			children: /* @__PURE__ */ jsx(TabsList, {
-				className: computedClasses.flexList,
-				children: tabs.map((tab) => /* @__PURE__ */ jsxs(TabTrigger, {
+	const contentClass = useMemo(() => cn(isFlexLayout ? "mt-0 h-full" : "space-y-4 mt-6", contentClassName), [isFlexLayout, contentClassName]);
+	const content = isFlexLayout && scrollable ? /* @__PURE__ */ jsx(ScrollArea, {
+		className: "h-full w-full flex-1 min-h-0",
+		children: tabs.map((tab) => /* @__PURE__ */ jsx(TabsContent, {
+			value: tab.value,
+			className: contentClass,
+			children: tab.content
+		}, tab.value))
+	}) : tabs.map((tab) => /* @__PURE__ */ jsx(TabsContent, {
+		value: tab.value,
+		className: contentClass,
+		children: tab.content
+	}, tab.value));
+	return /* @__PURE__ */ jsx(TabPresetContext, {
+		value: {
+			preset,
+			fullWidth
+		},
+		children: /* @__PURE__ */ jsxs(Tabs, {
+			defaultValue,
+			value,
+			onValueChange,
+			orientation,
+			className: rootClassName,
+			...props,
+			children: [/* @__PURE__ */ jsx(TabsList, {
+				variant: PRESET_VARIANT[preset],
+				className: listClass,
+				children: tabs.map((tab) => /* @__PURE__ */ jsx(TabTrigger, {
 					value: tab.value,
-					variant,
 					disabled: tab.disabled,
-					className: "justify-center px-3 py-2 text-xs sm:text-sm shrink-0",
-					children: [tab.icon, tab.hideTextOnMobile ? /* @__PURE__ */ jsx("span", {
-						className: "hidden sm:inline",
-						children: tab.label
-					}) : tab.label]
-				}, tab.value))
-			})
-		}) : /* @__PURE__ */ jsx(TabsList, {
-			className: computedClasses.standardList,
-			children: tabs.map((tab) => /* @__PURE__ */ jsxs(TabTrigger, {
-				value: tab.value,
-				variant,
-				disabled: tab.disabled,
-				className: "whitespace-nowrap",
-				children: [tab.icon, tab.hideTextOnMobile ? /* @__PURE__ */ jsx("span", {
-					className: "hidden sm:inline text-sm",
-					children: tab.label
-				}) : /* @__PURE__ */ jsx("span", {
-					className: "text-sm",
+					icon: tab.icon,
+					hideTextOnMobile: tab.hideTextOnMobile,
 					children: tab.label
-				})]
-			}, tab.value))
-		}), /* @__PURE__ */ jsx("div", {
-			className: computedClasses.contentWrapper,
-			children: isFlexLayout && scrollable ? /* @__PURE__ */ jsx(ScrollArea, {
-				className: "h-full w-full",
-				children: tabs.map((tab) => /* @__PURE__ */ jsx(TabsContent, {
-					value: tab.value,
-					className: computedClasses.flexContent,
-					children: tab.content
 				}, tab.value))
-			}) : tabs.map((tab) => /* @__PURE__ */ jsx(TabsContent, {
-				value: tab.value,
-				className: computedClasses.standardContent,
-				children: tab.content
-			}, tab.value))
-		})]
+			}), content]
+		})
 	});
 });
 
@@ -1684,10 +1509,11 @@ function ResponsiveSplitLayout({ leftPanel, rightPanel, className, leftPanelClas
 				defaultValue: "left",
 				value: mobileView,
 				onValueChange: (val) => setMobileView(val),
-				variant: "default",
+				preset: "default",
+				fullWidth: true,
 				layout: "flex",
 				className: "h-full",
-				listWrapperClassName: "px-4 py-2 flex-shrink-0",
+				listClassName: "mx-3 mt-3 mb-1 flex-shrink-0",
 				contentClassName: "mt-0 flex-1 min-h-0"
 			})
 		});
@@ -1761,7 +1587,7 @@ function ResponsiveSplitLayout({ leftPanel, rightPanel, className, leftPanelClas
 	return /* @__PURE__ */ jsxs(ResizablePanelGroup, {
 		direction: "horizontal",
 		className: cn("h-full", className),
-		autoSaveId: persistLayoutKey,
+		...persistLayoutKey ? { autoSaveId: persistLayoutKey } : {},
 		children: [
 			/* @__PURE__ */ jsx(ResizablePanel, {
 				defaultSize: defaultLayout[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/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";

package/package.json

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

package/dist/api-pagination-DBTE0yk4.mjs

@@ -1,190 +0,0 @@
-import { t as cn } from "./utils-DQ5SCVoW.mjs";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
-import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "@/components/ui/pagination";
-
-//#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
-export { CustomPagination as n, PaginationInfo as r, ApiPagination as t };