@classytic/fluid 0.1.2 → 0.2.1

package/dist/index.js

@@ -1,8 +1,10 @@
 "use client";
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-import * as React5 from 'react';
-import { memo, useMemo, useCallback, forwardRef, createContext, useId, useContext, useState, useRef, useSyncExternalStore, useEffect, isValidElement } from 'react';
+export { Container, Section } from './chunk-H3NFL3GJ.js';
+export { ClientSubmitButton, ConfirmSheet, FormSheet, SheetWrapper, useIsMobile } from './chunk-J2YRTQE4.js';
+import { cn } from './chunk-GUHK2DTW.js';
+export { cn } from './chunk-GUHK2DTW.js';
+import * as React3 from 'react';
+import React3__default, { memo, useMemo, useState, useCallback, useSyncExternalStore, useRef, useEffect, isValidElement, Children, createElement, Fragment as Fragment$1 } from 'react';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@/components/ui/accordion';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -11,9 +13,9 @@ import { Pagination, PaginationContent, PaginationItem, PaginationPrevious, Pagi
 import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@/components/ui/card';
 import { Skeleton } from '@/components/ui/skeleton';
 import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from '@/components/ui/table';
-import { ChevronDown, Minus, Plus, X, Check, LoaderIcon, Wand2, ChevronUp, AlertTriangle, Loader2, AlertCircle, RefreshCw, Copy, Search, ArrowUp, ArrowDown, ArrowUpDown, MoreHorizontal, Sun, Moon, MinusIcon, ChevronUpIcon, ChevronDownIcon, ArrowLeft, ArrowRight, CalendarIcon, Filter, RotateCcw, ChevronLeft, ChevronRight, Tag } from 'lucide-react';
-import { Button } from '@/components/ui/button';
+import { Check, ChevronLeft, ChevronRight, ChevronUp, ChevronDown, AlertTriangle, Loader2, AlertCircle, RefreshCw, InboxIcon, SearchX, FileX2, CheckCircle2, Info, X, Copy, Search, ArrowUp, ArrowDown, ArrowUpDown, MoreHorizontal, Sun, Moon, MinusIcon, ChevronUpIcon, ChevronDownIcon, ArrowLeft, ArrowRight, CalendarIcon, Wand2, Tag, Plus } from 'lucide-react';
 import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@/components/ui/collapsible';
+import { Button } from '@/components/ui/button';
 import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction } from '@/components/ui/alert-dialog';
 import { Alert, AlertTitle, AlertDescription } from '@/components/ui/alert';
 import { useReactTable, getSortedRowModel, getCoreRowModel, flexRender } from '@tanstack/react-table';
@@ -24,19 +26,18 @@ import { cva } from 'class-variance-authority';
 import { Item, ItemContent, ItemDescription } from '@/components/ui/item';
 import { useTheme } from 'next-themes';
 import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from '@/components/ui/command';
-import { InputGroup, InputGroupAddon, InputGroupInput, InputGroupButton, InputGroupTextarea } from '@/components/ui/input-group';
+import { InputGroup, InputGroupAddon, InputGroupInput, InputGroupTextarea, InputGroupButton } from '@/components/ui/input-group';
 import { Popover, PopoverTrigger, PopoverContent } from '@/components/ui/popover';
 import { Badge } from '@/components/ui/badge';
 import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
 import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@/components/ui/resizable';
 import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
-import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetFooter } from '@/components/ui/sheet';
 import { Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip';
 import { Controller } from 'react-hook-form';
 import { Input } from '@/components/ui/input';
 import { Field, FieldLabel, FieldDescription, FieldError, FieldContent } from '@/components/ui/field';
 import { Textarea } from '@/components/ui/textarea';
-import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem, SelectGroup, SelectLabel } from '@/components/ui/select';
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectGroup, SelectLabel, SelectItem } from '@/components/ui/select';
 import { Checkbox } from '@/components/ui/checkbox';
 import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
 import { Switch } from '@/components/ui/switch';
@@ -44,14 +45,94 @@ import { Calendar } from '@/components/ui/calendar';
 import { Combobox, ComboboxInput as ComboboxInput$1, ComboboxContent, ComboboxEmpty, ComboboxList, ComboboxItem } from '@/components/ui/combobox';
 import { startOfMonth, endOfMonth, eachDayOfInterval, getDay, isSameDay, subMonths, addMonths, format, isSameMonth, isValid } from 'date-fns';
 
-var __defProp = Object.defineProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
+// src/lib/storage.ts
+var getStorageItem = (key, defaultValue = null) => {
+  if (typeof window === "undefined") return defaultValue;
+  try {
+    const item = window.localStorage.getItem(key);
+    if (!item) return defaultValue;
+    const parsed = JSON.parse(item);
+    if (parsed && typeof parsed === "object" && parsed.__expiresAt) {
+      const now = Date.now();
+      if (now > parsed.__expiresAt) {
+        window.localStorage.removeItem(key);
+        return defaultValue;
+      }
+      return parsed.value;
+    }
+    return parsed;
+  } catch (error) {
+    console.error(`Error reading localStorage key "${key}":`, error);
+    return defaultValue;
+  }
+};
+var setStorageItem = (key, value, ttl = null) => {
+  if (typeof window === "undefined") return false;
+  try {
+    let itemToStore = value;
+    if (ttl && typeof ttl === "number" && ttl > 0) {
+      itemToStore = {
+        value,
+        __expiresAt: Date.now() + ttl
+      };
+    }
+    window.localStorage.setItem(key, JSON.stringify(itemToStore));
+    return true;
+  } catch (error) {
+    console.error(`Error setting localStorage key "${key}":`, error);
+    return false;
+  }
+};
+var removeStorageItem = (key) => {
+  if (typeof window === "undefined") return false;
+  try {
+    window.localStorage.removeItem(key);
+    return true;
+  } catch (error) {
+    console.error(`Error removing localStorage key "${key}":`, error);
+    return false;
+  }
+};
+var clearStorage = () => {
+  if (typeof window === "undefined") return false;
+  try {
+    window.localStorage.clear();
+    return true;
+  } catch (error) {
+    console.error("Error clearing localStorage:", error);
+    return false;
+  }
+};
+var isStorageEmpty = (key) => {
+  const data = getStorageItem(key);
+  return !data || Array.isArray(data) && data.length === 0;
+};
+var generateUUID = () => {
+  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+    return crypto.randomUUID();
+  }
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
+    const r = Math.random() * 16 | 0;
+    const v = c === "x" ? r : r & 3 | 8;
+    return v.toString(16);
+  });
+};
+var TTL = {
+  MINUTE: 60 * 1e3,
+  HOUR: 60 * 60 * 1e3,
+  DAY: 24 * 60 * 60 * 1e3,
+  WEEK: 7 * 24 * 60 * 60 * 1e3,
+  MONTH: 30 * 24 * 60 * 60 * 1e3
+};
+var storage = {
+  get: getStorageItem,
+  set: setStorageItem,
+  remove: removeStorageItem,
+  clear: clearStorage,
+  isEmpty: isStorageEmpty,
+  generateUUID,
+  TTL
 };
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
 
 // src/lib/filter-utils.ts
 function buildFilterParams(filters, filterConfig) {
@@ -117,20 +198,6 @@ function getApiParams(searchParams) {
   }
   return params;
 }
-var MOBILE_BREAKPOINT = 768;
-function useIsMobile() {
-  const [isMobile, setIsMobile] = React5.useState(void 0);
-  React5.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
-    const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    };
-    mql.addEventListener("change", onChange);
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    return () => mql.removeEventListener("change", onChange);
-  }, []);
-  return !!isMobile;
-}
 function useBaseSearch(config) {
   const {
     basePath,
@@ -171,9 +238,12 @@ function useBaseSearch(config) {
     });
     return initialFilters;
   });
+  const stableConfig = {
+    searchFields,
+    filterFields};
   const handleSearch = useCallback(() => {
     const params = new URLSearchParams(searchParams);
-    clearSearchAndFilterParams(params, config);
+    clearSearchAndFilterParams(params, stableConfig);
     const searchParamsNew = buildSearchParams(searchType, searchValue, searchFields);
     for (const [key, value] of searchParamsNew) {
       params.set(key, value);
@@ -183,20 +253,10 @@ function useBaseSearch(config) {
       params.set(key, value);
     }
     router.push(`${basePath}?${params.toString()}`);
-  }, [
-    searchType,
-    searchValue,
-    filters,
-    searchFields,
-    filterFields,
-    searchParams,
-    router,
-    basePath,
-    config
-  ]);
+  }, [searchType, searchValue, filters, searchFields, filterFields, searchParams, router, basePath, defaultSearchType]);
   const clearSearch = useCallback(() => {
     const params = new URLSearchParams(searchParams);
-    clearSearchAndFilterParams(params, config);
+    clearSearchAndFilterParams(params, stableConfig);
     setSearchValue("");
     setSearchType(defaultSearchType);
     const resetFilters = {};
@@ -206,7 +266,7 @@ function useBaseSearch(config) {
     setFilters(resetFilters);
     const next = params.toString();
     router.push(next ? `${basePath}?${next}` : `${basePath}`);
-  }, [searchParams, router, basePath, config, defaultSearchType, filterFields]);
+  }, [searchParams, router, basePath, defaultSearchType, searchFields, filterFields]);
   const getSearchParamsForApi = useCallback(() => {
     return getApiParams(searchParams);
   }, [searchParams]);
@@ -259,6 +319,12 @@ var useScrollDetection = (ref, delay = 100) => {
     canScrollRight: false,
     isScrollable: false
   });
+  const timeoutRef = useRef(void 0);
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    };
+  }, []);
   const checkScroll = useCallback(() => {
     const scrollContainer = ref.current?.querySelector(
       '[data-slot="scroll-area-viewport"]'
@@ -276,11 +342,105 @@ var useScrollDetection = (ref, delay = 100) => {
     });
   }, [ref]);
   const debouncedCheckScroll = useCallback(() => {
-    const timeoutId = setTimeout(checkScroll, delay);
-    return () => clearTimeout(timeoutId);
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    timeoutRef.current = setTimeout(checkScroll, delay);
   }, [checkScroll, delay]);
   return { ...scrollState, checkScroll: debouncedCheckScroll };
 };
+function useDebounce(value, delay = 300) {
+  const [debounced, setDebounced] = useState(value);
+  useEffect(() => {
+    const timer = setTimeout(() => setDebounced(value), delay);
+    return () => clearTimeout(timer);
+  }, [value, delay]);
+  return debounced;
+}
+function useDebouncedCallback(callback, delay = 300) {
+  const timerRef = useRef(void 0);
+  const callbackRef = useRef(callback);
+  callbackRef.current = callback;
+  useEffect(() => {
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, []);
+  return (...args) => {
+    if (timerRef.current) clearTimeout(timerRef.current);
+    timerRef.current = setTimeout(() => callbackRef.current(...args), delay);
+  };
+}
+function useCopyToClipboard(resetDelay = 2e3) {
+  const [copied, setCopied] = useState(false);
+  const [error, setError] = useState(null);
+  const timerRef = useRef(void 0);
+  useEffect(() => {
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, []);
+  const reset = useCallback(() => {
+    setCopied(false);
+    setError(null);
+  }, []);
+  const copy = useCallback(
+    async (text) => {
+      if (!navigator?.clipboard) {
+        const err = new Error("Clipboard API not available");
+        setError(err);
+        return false;
+      }
+      try {
+        await navigator.clipboard.writeText(text);
+        setCopied(true);
+        setError(null);
+        if (timerRef.current) clearTimeout(timerRef.current);
+        timerRef.current = setTimeout(() => setCopied(false), resetDelay);
+        return true;
+      } catch (e) {
+        const err = e instanceof Error ? e : new Error("Copy failed");
+        setError(err);
+        setCopied(false);
+        return false;
+      }
+    },
+    [resetDelay]
+  );
+  return { copy, copied, error, reset };
+}
+function useLocalStorage(key, initialValue, ttl) {
+  const [storedValue, setStoredValue] = useState(() => {
+    const item = storage.get(key, initialValue);
+    return item !== null ? item : initialValue;
+  });
+  const keyRef = useRef(key);
+  const ttlRef = useRef(ttl);
+  useEffect(() => {
+    keyRef.current = key;
+    ttlRef.current = ttl;
+  }, [key, ttl]);
+  const setValue = useCallback((value) => {
+    setStoredValue((prev) => {
+      const nextValue = value instanceof Function ? value(prev) : value;
+      storage.set(keyRef.current, nextValue, ttlRef.current);
+      return nextValue;
+    });
+  }, []);
+  const removeValue = useCallback(() => {
+    storage.remove(keyRef.current);
+    setStoredValue(initialValue);
+  }, [initialValue]);
+  useEffect(() => {
+    const handleStorage = (e) => {
+      if (e.key === keyRef.current) {
+        const item = storage.get(keyRef.current, initialValue);
+        setStoredValue(item !== null ? item : initialValue);
+      }
+    };
+    window.addEventListener("storage", handleStorage);
+    return () => window.removeEventListener("storage", handleStorage);
+  }, [initialValue]);
+  return [storedValue, setValue, removeValue];
+}
 var AccordionSection = memo(function AccordionSection2({
   title,
   icon,
@@ -309,13 +469,13 @@ var FaqAccordion = memo(function FaqAccordion2({
   items,
   defaultOpen,
   className,
-  openMultiple = false
+  multiple = false
 }) {
   return /* @__PURE__ */ jsx(
     Accordion,
     {
       defaultValue: defaultOpen ? [defaultOpen] : [],
-      openMultiple,
+      multiple,
       className: cn("w-full", className),
       children: items.map((item) => /* @__PURE__ */ jsxs(AccordionItem, { value: item.id, children: [
         /* @__PURE__ */ jsx(AccordionTrigger, { className: "text-left", children: item.question }),
@@ -702,6 +862,29 @@ function ApiPagination({
     }
   );
 }
+var CARD_VARIANTS = {
+  default: "",
+  outline: "border-2",
+  ghost: "border-0 shadow-none bg-transparent",
+  elevated: "shadow-lg border-0",
+  primary: "border-primary/20 bg-primary/5",
+  secondary: "border-secondary/20 bg-secondary/5",
+  destructive: "border-destructive/20 bg-destructive/5",
+  success: "border-green-500/20 bg-green-500/5",
+  warning: "border-yellow-500/20 bg-yellow-500/5"
+};
+var CARD_SIZES = {
+  sm: "p-3",
+  default: "p-6",
+  lg: "p-8",
+  xl: "p-10"
+};
+var CARD_CONTENT_SIZES = {
+  sm: "pt-3",
+  default: "pt-6",
+  lg: "pt-8",
+  xl: "pt-10"
+};
 function CardWrapper({
   title,
   description,
@@ -716,48 +899,25 @@ function CardWrapper({
   hideHeader = false,
   ...props
 }) {
-  const variants = {
-    default: "",
-    outline: "border-2",
-    ghost: "border-0 shadow-none bg-transparent",
-    elevated: "shadow-lg border-0",
-    primary: "border-primary/20 bg-primary/5",
-    secondary: "border-secondary/20 bg-secondary/5",
-    destructive: "border-destructive/20 bg-destructive/5",
-    success: "border-green-500/20 bg-green-500/5",
-    warning: "border-yellow-500/20 bg-yellow-500/5"
-  };
-  const sizes2 = {
-    sm: "p-3",
-    default: "p-6",
-    lg: "p-8",
-    xl: "p-10"
-  };
-  const contentSizes = {
-    sm: "pt-3",
-    default: "pt-6",
-    lg: "pt-8",
-    xl: "pt-10"
-  };
-  return /* @__PURE__ */ jsxs(Card, { className: cn(variants[variant], className), ...props, children: [
-    !hideHeader && (title || description) && /* @__PURE__ */ jsxs(CardHeader, { className: cn(sizes2[size], "pb-4", headerClassName), children: [
+  return /* @__PURE__ */ jsxs(Card, { className: cn(CARD_VARIANTS[variant], className), ...props, children: [
+    !hideHeader && (title || description) && /* @__PURE__ */ jsxs(CardHeader, { className: cn(CARD_SIZES[size], "pb-4", headerClassName), children: [
       title && /* @__PURE__ */ jsx(CardTitle, { className: "text-lg font-semibold", children: title }),
       description && /* @__PURE__ */ jsx(CardDescription, { children: description })
     ] }),
     /* @__PURE__ */ jsx(
       CardContent,
       {
-        className: cn(hideHeader ? sizes2[size] : contentSizes[size], contentClassName),
+        className: cn(hideHeader ? CARD_SIZES[size] : CARD_CONTENT_SIZES[size], contentClassName),
         children
       }
     ),
-    footer && /* @__PURE__ */ jsx(CardFooter, { className: cn(sizes2[size], "pt-4 border-t", footerClassName), children: /* @__PURE__ */ jsx("div", { className: "w-full", children: footer }) })
+    footer && /* @__PURE__ */ jsx(CardFooter, { className: cn(CARD_SIZES[size], "pt-4 border-t", footerClassName), children: /* @__PURE__ */ jsx("div", { className: "w-full", children: footer }) })
   ] });
 }
 function DataCard({ title, data, className, ...props }) {
   return /* @__PURE__ */ jsx(CardWrapper, { title, className: cn("space-y-4", className), ...props, children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 md:grid-cols-3 gap-4", children: data.map((item, index) => /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
     /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: item.label }),
-    /* @__PURE__ */ jsx("p", { className: cn("text-lg font-semibold", item.color && `text-${item.color}-600`), children: item.value })
+    /* @__PURE__ */ jsx("p", { className: cn("text-lg font-semibold", item.color), children: item.value })
   ] }, index)) }) });
 }
 function LoadingCard({ title, description, className, ...props }) {
@@ -766,6 +926,27 @@ function LoadingCard({ title, description, className, ...props }) {
     /* @__PURE__ */ jsx("span", { className: "ml-2", children: "Loading..." })
   ] }) });
 }
+var STATS_CARD_VARIANTS = {
+  default: "",
+  success: "bg-green-50 border-green-200 dark:bg-green-950/30 dark:border-green-900",
+  warning: "bg-yellow-50 border-yellow-200 dark:bg-yellow-950/30 dark:border-yellow-900",
+  danger: "bg-red-50 border-red-200 dark:bg-red-950/30 dark:border-red-900",
+  info: "bg-blue-50 border-blue-200 dark:bg-blue-950/30 dark:border-blue-900"
+};
+var STATS_ICON_VARIANTS = {
+  default: "text-muted-foreground",
+  success: "text-green-600 dark:text-green-400",
+  warning: "text-yellow-600 dark:text-yellow-400",
+  danger: "text-red-600 dark:text-red-400",
+  info: "text-blue-600 dark:text-blue-400"
+};
+var STATS_ICON_WRAPPER_VARIANTS = {
+  default: "bg-muted border border-border",
+  success: "bg-green-100/50 dark:bg-green-900/30",
+  warning: "bg-yellow-100/50 dark:bg-yellow-900/30",
+  danger: "bg-red-100/50 dark:bg-red-900/30",
+  info: "bg-blue-100/50 dark:bg-blue-900/30"
+};
 function StatsCard({
   title,
   value,
@@ -777,31 +958,10 @@ function StatsCard({
   iconClassName,
   ...props
 }) {
-  const cardVariants = {
-    default: "",
-    success: "bg-green-50 border-green-200 dark:bg-green-950/30 dark:border-green-900",
-    warning: "bg-yellow-50 border-yellow-200 dark:bg-yellow-950/30 dark:border-yellow-900",
-    danger: "bg-red-50 border-red-200 dark:bg-red-950/30 dark:border-red-900",
-    info: "bg-blue-50 border-blue-200 dark:bg-blue-950/30 dark:border-blue-900"
-  };
-  const iconVariants = {
-    default: "text-muted-foreground",
-    success: "text-green-600 dark:text-green-400",
-    warning: "text-yellow-600 dark:text-yellow-400",
-    danger: "text-red-600 dark:text-red-400",
-    info: "text-blue-600 dark:text-blue-400"
-  };
-  const iconWrapperVariants = {
-    default: "bg-muted border border-border",
-    success: "bg-green-100/50 dark:bg-green-900/30",
-    warning: "bg-yellow-100/50 dark:bg-yellow-900/30",
-    danger: "bg-red-100/50 dark:bg-red-900/30",
-    info: "bg-blue-100/50 dark:bg-blue-900/30"
-  };
   return /* @__PURE__ */ jsxs(
     CardWrapper,
     {
-      className: cn("relative overflow-hidden", cardVariants[statsVariant], className),
+      className: cn("relative overflow-hidden", STATS_CARD_VARIANTS[statsVariant], className),
       size: "sm",
       hideHeader: true,
       ...props,
@@ -814,8 +974,8 @@ function StatsCard({
           ] }),
           icon && /* @__PURE__ */ jsx("div", { className: cn(
             "p-2 rounded-md",
-            iconWrapperVariants[statsVariant],
-            iconVariants[statsVariant],
+            STATS_ICON_WRAPPER_VARIANTS[statsVariant],
+            STATS_ICON_VARIANTS[statsVariant],
             iconClassName
           ), children: icon })
         ] }),
@@ -966,39 +1126,6 @@ function SkeletonGrid({
   };
   return /* @__PURE__ */ jsx("div", { className: cn("grid gap-4", gridCols[columns], className), children: Array.from({ length: cards }).map((_, i) => /* @__PURE__ */ jsx(SkeletonCard, { ...cardProps }, i)) });
 }
-function ClientSubmitButton({
-  children,
-  disabled,
-  loading = false,
-  loadingText,
-  className,
-  variant,
-  size,
-  form,
-  ...props
-}) {
-  const isDisabled = loading || disabled;
-  const content = loading && loadingText ? loadingText : children;
-  return /* @__PURE__ */ jsxs(
-    Button,
-    {
-      type: "submit",
-      form,
-      "aria-disabled": isDisabled,
-      "aria-busy": loading,
-      className: cn("relative", className),
-      disabled: isDisabled,
-      variant,
-      size,
-      ...props,
-      children: [
-        content,
-        loading && /* @__PURE__ */ jsx("span", { className: "animate-spin absolute right-4", children: /* @__PURE__ */ jsx(LoaderIcon, {}) }),
-        /* @__PURE__ */ jsx("span", { "aria-live": "polite", className: "sr-only", role: "status", children: loading ? "Loading" : "Submit form" })
-      ]
-    }
-  );
-}
 function CollapsibleWrapper({
   children,
   trigger,
@@ -1084,10 +1211,11 @@ function CollapsibleCard({
           CollapsibleTrigger,
           {
             render: /* @__PURE__ */ jsx(
-              "div",
+              "button",
               {
+                type: "button",
                 className: cn(
-                  "flex items-center justify-between w-full px-4 py-3 cursor-pointer transition-colors hover:bg-secondary/5",
+                  "flex items-center justify-between w-full px-4 py-3 cursor-pointer transition-colors hover:bg-secondary/5 bg-transparent border-0 text-left",
                   headerClassName
                 )
               }
@@ -1127,7 +1255,10 @@ function CollapsibleSection({
       defaultOpen,
       triggerVariant: "ghost",
       triggerSize: "sm",
-      triggerClassName: cn("h-8 px-2 font-medium justify-between", labelClassName),
+      triggerClassName: cn(
+        "h-8 px-2 font-medium justify-between",
+        labelClassName
+      ),
       contentClassName: cn("pl-4 mt-1", contentClassName),
       className: cn("space-y-1", className),
       ...props,
@@ -1169,7 +1300,7 @@ function ConfirmDialog({
     }
   };
   const triggerChildren = trigger?.props?.children;
-  const triggerElement = trigger ? React5.cloneElement(trigger, { children: void 0 }) : null;
+  const triggerElement = trigger ? React3.cloneElement(trigger, { children: void 0 }) : null;
   return /* @__PURE__ */ jsxs(AlertDialog, { open, onOpenChange, ...props, children: [
     triggerElement && /* @__PURE__ */ jsx(AlertDialogTrigger, { render: triggerElement, children: triggerChildren }),
     /* @__PURE__ */ jsxs(AlertDialogContent, { className: cn("max-w-md", className), children: [
@@ -1311,104 +1442,626 @@ function ErrorStateInline({
     }
   );
 }
-async function copyToClipboard(text, options) {
-  try {
-    await navigator.clipboard.writeText(text);
-    return true;
-  } catch {
-    return false;
+var PRESETS = {
+  noResults: {
+    icon: SearchX,
+    title: "No results found",
+    description: "Try adjusting your search or filter criteria."
+  },
+  noData: {
+    icon: InboxIcon,
+    title: "No data yet",
+    description: "Get started by creating your first item."
+  },
+  notFound: {
+    icon: FileX2,
+    title: "Not found",
+    description: "The item you're looking for doesn't exist or has been removed."
   }
-}
-function CopyButton({
-  value,
+};
+function EmptyState({
+  title = "Nothing here",
+  description,
+  icon: IconProp = InboxIcon,
+  action,
+  secondaryAction,
+  variant = "default",
   className,
-  size = "sm",
-  variant = "ghost",
-  showToast = true,
-  toastMessage = "Copied to clipboard",
-  errorMessage = "Failed to copy to clipboard",
-  timeout = 2e3,
-  children,
-  ...props
+  children
 }) {
-  const [copied, setCopied] = useState(false);
-  const handleCopy = async () => {
-    if (!value) return;
-    const success = await copyToClipboard(value);
-    if (success) {
-      setCopied(true);
-      setTimeout(() => setCopied(false), timeout);
+  const isLucideIcon = typeof IconProp === "function";
+  const Icon = IconProp;
+  const iconElement = isLucideIcon ? /* @__PURE__ */ jsx(
+    Icon,
+    {
+      className: cn(
+        "text-muted-foreground/60",
+        variant === "compact" ? "h-8 w-8" : "h-12 w-12"
+      ),
+      strokeWidth: 1.5
     }
-  };
-  return /* @__PURE__ */ jsx(
-    Button,
+  ) : IconProp;
+  if (variant === "compact") {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex items-center gap-3 py-6 px-4 text-muted-foreground",
+          className
+        ),
+        children: [
+          iconElement,
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: title }),
+            description && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground/80 mt-0.5", children: description })
+          ] }),
+          action
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
     {
-      variant,
-      size,
-      className: cn("h-6 w-6 p-0", className),
-      onClick: handleCopy,
-      disabled: !value,
-      ...props,
-      children: children || (copied ? /* @__PURE__ */ jsx(Check, { className: "h-3 w-3 text-green-600" }) : /* @__PURE__ */ jsx(Copy, { className: "h-3 w-3" }))
+      className: cn(
+        "flex flex-col items-center justify-center text-center",
+        variant === "card" && "rounded-lg border border-dashed border-muted-foreground/25 bg-muted/30",
+        variant === "default" ? "py-16 px-6" : "py-12 px-8",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "flex items-center justify-center rounded-full bg-muted/60",
+              variant === "default" ? "h-20 w-20 mb-6" : "h-16 w-16 mb-5"
+            ),
+            children: iconElement
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "h3",
+          {
+            className: cn(
+              "font-semibold tracking-tight",
+              variant === "default" ? "text-lg" : "text-base"
+            ),
+            children: title
+          }
+        ),
+        description && /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: cn(
+              "text-muted-foreground max-w-sm mt-2",
+              variant === "default" ? "text-sm" : "text-xs"
+            ),
+            children: description
+          }
+        ),
+        children && /* @__PURE__ */ jsx("div", { className: "mt-4 w-full max-w-md", children }),
+        (action || secondaryAction) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 mt-6", children: [
+          action,
+          secondaryAction
+        ] })
+      ]
     }
   );
 }
-function CopyText({
-  value,
-  displayValue,
-  className,
-  textClassName,
-  buttonClassName,
-  maxLength = 30,
-  showButton = true,
-  ...buttonProps
-}) {
-  const truncatedValue = displayValue || (value && value.length > maxLength ? `${value.substring(0, maxLength)}...` : value || "N/A");
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", className), children: [
-    /* @__PURE__ */ jsx("span", { className: cn("font-medium", textClassName), title: value || "N/A", children: truncatedValue }),
-    showButton && value && /* @__PURE__ */ jsx(CopyButton, { value, className: buttonClassName, ...buttonProps })
-  ] });
+function EmptyStateNoResults(props) {
+  return /* @__PURE__ */ jsx(EmptyState, { ...PRESETS.noResults, ...props });
 }
-function CopyCodeBlock({
-  value,
-  className,
-  language,
-  showLineNumbers = false,
-  ...buttonProps
-}) {
-  return /* @__PURE__ */ jsxs("div", { className: cn("relative group", className), children: [
-    /* @__PURE__ */ jsx("pre", { className: "bg-muted p-4 rounded-md overflow-x-auto text-sm", children: /* @__PURE__ */ jsx("code", { className: language ? `language-${language}` : "", children: value }) }),
-    /* @__PURE__ */ jsx("div", { className: "absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity", children: /* @__PURE__ */ jsx(CopyButton, { value, variant: "secondary", size: "sm", ...buttonProps }) })
-  ] });
+function EmptyStateNoData(props) {
+  return /* @__PURE__ */ jsx(EmptyState, { ...PRESETS.noData, ...props });
 }
-var ScrollButton = ({ direction, onClick, visible, className }) => {
-  if (!visible) return null;
-  const handleClick = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    onClick();
-  };
-  return /* @__PURE__ */ jsx(
-    "button",
+function EmptyStateNotFound(props) {
+  return /* @__PURE__ */ jsx(EmptyState, { ...PRESETS.notFound, ...props });
+}
+var SIZES = {
+  sm: "h-4 w-4",
+  md: "h-6 w-6",
+  lg: "h-10 w-10"
+};
+var TEXT_SIZES = {
+  sm: "text-xs",
+  md: "text-sm",
+  lg: "text-base"
+};
+function LoadingState({
+  text,
+  variant = "default",
+  size = "md",
+  className
+}) {
+  const spinner = /* @__PURE__ */ jsx(
+    Loader2,
+    {
+      className: cn(SIZES[size], "animate-spin text-muted-foreground")
+    }
+  );
+  if (variant === "minimal") {
+    return /* @__PURE__ */ jsx("div", { className: cn("flex items-center justify-center", className), children: spinner });
+  }
+  if (variant === "inline") {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex items-center gap-2 text-muted-foreground",
+          className
+        ),
+        children: [
+          spinner,
+          text && /* @__PURE__ */ jsx("span", { className: TEXT_SIZES[size], children: text })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
     {
-      type: "button",
       className: cn(
-        "absolute top-1/2 -translate-y-1/2 z-50",
-        "flex items-center justify-center",
-        "size-10 rounded-md shadow-lg border-2 border-border",
-        "bg-background hover:bg-muted",
-        "transition-transform duration-200",
-        "hover:scale-105 active:scale-95",
-        direction === "left" ? "left-2" : "right-2",
+        "flex flex-col items-center justify-center gap-3 py-12 px-6",
         className
       ),
-      onClick: handleClick,
-      onMouseDown: (e) => e.stopPropagation(),
-      "aria-label": `Scroll ${direction}`,
-      children: direction === "left" ? /* @__PURE__ */ jsx(ChevronLeft, { className: "size-5" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "size-5" })
+      children: [
+        spinner,
+        text && /* @__PURE__ */ jsx("p", { className: cn("text-muted-foreground", TEXT_SIZES[size]), children: text })
+      ]
     }
   );
+}
+function LoadingOverlay({
+  text,
+  visible = true,
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+    children,
+    visible && /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 z-10 flex flex-col items-center justify-center gap-3 rounded-[inherit] bg-background/90 backdrop-blur-sm", children: [
+      /* @__PURE__ */ jsx(Loader2, { className: "h-6 w-6 animate-spin text-muted-foreground" }),
+      text && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground font-medium", children: text })
+    ] })
+  ] });
+}
+var VARIANT_MAP = {
+  info: {
+    icon: Info,
+    bg: "bg-blue-50 dark:bg-blue-950/30",
+    border: "border-blue-200 dark:border-blue-800",
+    text: "text-blue-800 dark:text-blue-200",
+    iconColor: "text-blue-500 dark:text-blue-400"
+  },
+  warning: {
+    icon: AlertTriangle,
+    bg: "bg-amber-50 dark:bg-amber-950/30",
+    border: "border-amber-200 dark:border-amber-800",
+    text: "text-amber-800 dark:text-amber-200",
+    iconColor: "text-amber-500 dark:text-amber-400"
+  },
+  success: {
+    icon: CheckCircle2,
+    bg: "bg-emerald-50 dark:bg-emerald-950/30",
+    border: "border-emerald-200 dark:border-emerald-800",
+    text: "text-emerald-800 dark:text-emerald-200",
+    iconColor: "text-emerald-500 dark:text-emerald-400"
+  },
+  error: {
+    icon: AlertCircle,
+    bg: "bg-red-50 dark:bg-red-950/30",
+    border: "border-red-200 dark:border-red-800",
+    text: "text-red-800 dark:text-red-200",
+    iconColor: "text-red-500 dark:text-red-400"
+  }
 };
+function StatusBanner({
+  variant = "info",
+  children,
+  icon: CustomIcon,
+  dismissible = false,
+  onDismiss,
+  action,
+  className
+}) {
+  const [dismissed, setDismissed] = React3.useState(false);
+  if (dismissed) return null;
+  const config = VARIANT_MAP[variant];
+  const Icon = CustomIcon || config.icon;
+  const handleDismiss = () => {
+    setDismissed(true);
+    onDismiss?.();
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "alert",
+      className: cn(
+        "flex items-center gap-3 rounded-lg border px-4 py-3",
+        config.bg,
+        config.border,
+        config.text,
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          Icon,
+          {
+            className: cn("h-4 w-4 shrink-0", config.iconColor),
+            strokeWidth: 2
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0 text-sm", children }),
+        action && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: action }),
+        dismissible && /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "ghost",
+            size: "icon",
+            className: cn(
+              "h-6 w-6 shrink-0 hover:bg-transparent opacity-60 hover:opacity-100",
+              config.text
+            ),
+            onClick: handleDismiss,
+            children: [
+              /* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5" }),
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Dismiss" })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function normalizeStep(step) {
+  return typeof step === "string" ? { label: step } : step;
+}
+var StepCircle = React3.memo(function StepCircle2({
+  index,
+  isCompleted,
+  isActive,
+  icon,
+  variant
+}) {
+  const size = variant === "compact" ? "h-7 w-7" : "h-8 w-8";
+  const iconSize = variant === "compact" ? "h-3.5 w-3.5" : "h-4 w-4";
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "relative flex items-center justify-center rounded-full text-xs font-semibold shrink-0 transition-all duration-200",
+        size,
+        isCompleted ? "bg-primary text-primary-foreground" : isActive ? "bg-primary text-primary-foreground ring-2 ring-primary/20 ring-offset-2 ring-offset-background" : "border-2 border-muted-foreground/25 bg-background text-muted-foreground"
+      ),
+      children: isCompleted ? /* @__PURE__ */ jsx(Check, { className: iconSize, strokeWidth: 3 }) : icon || index + 1
+    }
+  );
+});
+var StepConnector = React3.memo(function StepConnector2({
+  isCompleted,
+  isVertical
+}) {
+  if (isVertical) {
+    return /* @__PURE__ */ jsx("div", { className: "flex justify-center w-8 py-1", children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "w-px h-6 transition-colors duration-200",
+          isCompleted ? "bg-primary" : "bg-border"
+        )
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx("div", { className: "flex-1 flex items-center min-w-4 mt-4", children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "h-px w-full transition-colors duration-200",
+        isCompleted ? "bg-primary" : "bg-border"
+      )
+    }
+  ) });
+});
+function HorizontalStepper({
+  steps,
+  currentStep,
+  variant,
+  onStepClick
+}) {
+  const activeRef = React3.useRef(null);
+  const navRef = React3.useRef(null);
+  React3.useEffect(() => {
+    if (activeRef.current && navRef.current) {
+      activeRef.current.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest",
+        inline: "center"
+      });
+    }
+  }, [currentStep]);
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      ref: navRef,
+      "aria-label": "Progress",
+      role: "list",
+      className: "flex items-start w-full overflow-x-auto [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden pb-1",
+      children: steps.map((step, index) => {
+        const isCompleted = index < currentStep;
+        const isActive = index === currentStep;
+        const isClickable = isCompleted && !!onStepClick;
+        const isLast = index === steps.length - 1;
+        return /* @__PURE__ */ jsxs(React3.Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: isActive ? activeRef : void 0,
+              role: "listitem",
+              "aria-current": isActive ? "step" : void 0,
+              className: cn("flex flex-col items-center text-center shrink-0"),
+              style: { minWidth: variant === "compact" ? 48 : 64 },
+              children: /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  disabled: !isClickable,
+                  onClick: () => isClickable && onStepClick(index),
+                  className: cn(
+                    "flex flex-col items-center gap-1.5 group",
+                    isClickable ? "cursor-pointer" : "cursor-default"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      StepCircle,
+                      {
+                        index,
+                        isCompleted,
+                        isActive,
+                        icon: step.icon,
+                        variant
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs("div", { className: "max-w-[5.5rem] sm:max-w-[7rem]", children: [
+                      /* @__PURE__ */ jsx(
+                        "p",
+                        {
+                          className: cn(
+                            "text-xs font-medium leading-tight truncate",
+                            isActive || isCompleted ? "text-foreground" : "text-muted-foreground"
+                          ),
+                          children: step.label
+                        }
+                      ),
+                      step.optional && /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground font-normal", children: "optional" }),
+                      step.description && variant !== "compact" && /* @__PURE__ */ jsx("p", { className: "text-[10px] text-muted-foreground mt-0.5 leading-tight truncate hidden sm:block", children: step.description })
+                    ] })
+                  ]
+                }
+              )
+            }
+          ),
+          !isLast && /* @__PURE__ */ jsx(StepConnector, { isCompleted, isVertical: false })
+        ] }, step.label);
+      })
+    }
+  );
+}
+function VerticalStepper({
+  steps,
+  currentStep,
+  variant,
+  onStepClick
+}) {
+  return /* @__PURE__ */ jsx("nav", { "aria-label": "Progress", role: "list", className: "flex flex-col", children: steps.map((step, index) => {
+    const isCompleted = index < currentStep;
+    const isActive = index === currentStep;
+    const isClickable = isCompleted && !!onStepClick;
+    const isLast = index === steps.length - 1;
+    return /* @__PURE__ */ jsxs(React3.Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: "listitem",
+          "aria-current": isActive ? "step" : void 0,
+          className: "flex items-start gap-3",
+          children: /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              disabled: !isClickable,
+              onClick: () => isClickable && onStepClick(index),
+              className: cn(
+                "flex items-center gap-3",
+                isClickable ? "cursor-pointer" : "cursor-default"
+              ),
+              children: [
+                /* @__PURE__ */ jsx(
+                  StepCircle,
+                  {
+                    index,
+                    isCompleted,
+                    isActive,
+                    icon: step.icon,
+                    variant
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "text-left", children: [
+                  /* @__PURE__ */ jsxs(
+                    "p",
+                    {
+                      className: cn(
+                        "text-sm font-medium leading-tight",
+                        isActive || isCompleted ? "text-foreground" : "text-muted-foreground"
+                      ),
+                      children: [
+                        step.label,
+                        step.optional && /* @__PURE__ */ jsx("span", { className: "ml-1 text-xs text-muted-foreground font-normal", children: "(optional)" })
+                      ]
+                    }
+                  ),
+                  step.description && variant !== "compact" && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-0.5", children: step.description })
+                ] })
+              ]
+            }
+          )
+        }
+      ),
+      !isLast && /* @__PURE__ */ jsx(StepConnector, { isCompleted, isVertical: true })
+    ] }, step.label);
+  }) });
+}
+function Stepper({
+  steps,
+  currentStep,
+  variant = "default",
+  orientation = "horizontal",
+  className,
+  onStepClick,
+  children,
+  ...props
+}) {
+  const normalizedSteps = steps.map(normalizeStep);
+  const isVertical = orientation === "vertical";
+  return /* @__PURE__ */ jsxs("div", { className: cn("w-full", className), ...props, children: [
+    isVertical ? /* @__PURE__ */ jsx(
+      VerticalStepper,
+      {
+        steps: normalizedSteps,
+        currentStep,
+        variant,
+        onStepClick
+      }
+    ) : /* @__PURE__ */ jsx(
+      HorizontalStepper,
+      {
+        steps: normalizedSteps,
+        currentStep,
+        variant,
+        onStepClick
+      }
+    ),
+    children && /* @__PURE__ */ jsx("div", { className: cn("mt-6", isVertical && "ml-11"), children })
+  ] });
+}
+function StepContent({
+  step,
+  currentStep,
+  children,
+  className,
+  keepMounted = false
+}) {
+  const isActive = step === currentStep;
+  if (!isActive && !keepMounted) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(className),
+      hidden: !isActive,
+      role: "tabpanel",
+      "aria-label": `Step ${step + 1}`,
+      children
+    }
+  );
+}
+async function copyToClipboard(text, options) {
+  try {
+    await navigator.clipboard.writeText(text);
+    return true;
+  } catch {
+    return false;
+  }
+}
+function CopyButton({
+  value,
+  className,
+  size = "sm",
+  variant = "ghost",
+  showToast = true,
+  toastMessage = "Copied to clipboard",
+  errorMessage = "Failed to copy to clipboard",
+  timeout = 2e3,
+  children,
+  ...props
+}) {
+  const [copied, setCopied] = useState(false);
+  const handleCopy = async () => {
+    if (!value) return;
+    const success = await copyToClipboard(value);
+    if (success) {
+      setCopied(true);
+      setTimeout(() => setCopied(false), timeout);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant,
+      size,
+      className: cn("h-6 w-6 p-0", className),
+      onClick: handleCopy,
+      disabled: !value,
+      ...props,
+      children: children || (copied ? /* @__PURE__ */ jsx(Check, { className: "h-3 w-3 text-green-600" }) : /* @__PURE__ */ jsx(Copy, { className: "h-3 w-3" }))
+    }
+  );
+}
+function CopyText({
+  value,
+  displayValue,
+  className,
+  textClassName,
+  buttonClassName,
+  maxLength = 30,
+  showButton = true,
+  ...buttonProps
+}) {
+  const truncatedValue = displayValue || (value && value.length > maxLength ? `${value.substring(0, maxLength)}...` : value || "N/A");
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", className), children: [
+    /* @__PURE__ */ jsx("span", { className: cn("font-medium", textClassName), title: value || "N/A", children: truncatedValue }),
+    showButton && value && /* @__PURE__ */ jsx(CopyButton, { value, className: buttonClassName, ...buttonProps })
+  ] });
+}
+function CopyCodeBlock({
+  value,
+  className,
+  language,
+  showLineNumbers = false,
+  ...buttonProps
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative group", className), children: [
+    /* @__PURE__ */ jsx("pre", { className: "bg-muted p-4 rounded-md overflow-x-auto text-sm", children: /* @__PURE__ */ jsx("code", { className: language ? `language-${language}` : "", children: value }) }),
+    /* @__PURE__ */ jsx("div", { className: "absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity", children: /* @__PURE__ */ jsx(CopyButton, { value, variant: "secondary", size: "sm", ...buttonProps }) })
+  ] });
+}
+var ScrollButton = React3__default.memo(function ScrollButton2({ direction, onClick, visible, className }) {
+  if (!visible) return null;
+  const handleClick = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    onClick();
+  };
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: cn(
+        "absolute top-1/2 -translate-y-1/2 z-50",
+        "flex items-center justify-center",
+        "size-10 rounded-md shadow-lg border-2 border-border",
+        "bg-background hover:bg-muted",
+        "transition-transform duration-200",
+        "hover:scale-105 active:scale-95",
+        direction === "left" ? "left-2" : "right-2",
+        className
+      ),
+      onClick: handleClick,
+      onMouseDown: (e) => e.stopPropagation(),
+      "aria-label": `Scroll ${direction}`,
+      children: direction === "left" ? /* @__PURE__ */ jsx(ChevronLeft, { className: "size-5" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "size-5" })
+    }
+  );
+});
 function DataTable({
   columns,
   data,
@@ -1417,7 +2070,9 @@ function DataTable({
   enableSorting = false,
   enableRowSelection = false,
   onRowSelectionChange,
-  className
+  className,
+  loadingState: customLoadingState,
+  emptyState: customEmptyState
 }) {
   const [sorting, setSorting] = useState([]);
   const [rowSelection, setRowSelection] = useState({});
@@ -1499,14 +2154,14 @@ function DataTable({
     const timer = setTimeout(checkScroll, 150);
     return () => clearTimeout(timer);
   }, [data, checkScroll]);
-  const loadingState = useMemo(
+  const defaultLoadingState = useMemo(
     () => /* @__PURE__ */ jsx("div", { className: "w-full h-full min-h-[24rem] flex items-center justify-center bg-background/50 rounded-lg border border-border", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-3", children: [
       /* @__PURE__ */ jsx("div", { className: "animate-spin rounded-full h-8 w-8 border-2 border-primary border-t-transparent" }),
       /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Loading data..." })
     ] }) }),
     []
   );
-  const emptyState = useMemo(
+  const defaultEmptyState = useMemo(
     () => /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: columns.length, className: "h-32 text-center", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-8", children: [
       /* @__PURE__ */ jsx("div", { className: "rounded-full bg-muted p-3 mb-4", children: /* @__PURE__ */ jsx(Search, { className: "h-6 w-6 text-muted-foreground" }) }),
       /* @__PURE__ */ jsx("p", { className: "text-lg font-medium text-foreground mb-1", children: "No results found" }),
@@ -1515,7 +2170,7 @@ function DataTable({
     [columns.length]
   );
   if (isLoading) {
-    return loadingState;
+    return /* @__PURE__ */ jsx(Fragment, { children: customLoadingState || defaultLoadingState });
   }
   return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col h-full gap-4", className), children: [
     /* @__PURE__ */ jsxs("div", { className: "flex-1 min-h-0 rounded-lg border overflow-hidden bg-background shadow-sm relative", children: [
@@ -1575,7 +2230,7 @@ function DataTable({
               ))
             },
             row.id
-          )) : emptyState })
+          )) : customEmptyState ? /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: columns.length, className: "h-32 text-center", children: customEmptyState }) }) : defaultEmptyState })
         ] }) }),
         /* @__PURE__ */ jsx(ScrollBar, { orientation: "horizontal" })
       ] }),
@@ -1611,12 +2266,12 @@ function DataTable({
   ] });
 }
 var SIZE_VARIANTS = {
-  sm: "sm:!max-w-sm",
-  default: "sm:!max-w-md",
-  lg: "sm:!max-w-lg md:!max-w-2xl",
-  xl: "sm:!max-w-2xl md:!max-w-4xl",
-  "2xl": "sm:!max-w-4xl md:!max-w-6xl",
-  full: "!max-w-[95vw] !h-[95vh]"
+  sm: "sm:max-w-sm",
+  default: "sm:max-w-md",
+  lg: "sm:max-w-lg md:max-w-2xl",
+  xl: "sm:max-w-2xl md:max-w-4xl",
+  "2xl": "sm:max-w-4xl md:max-w-6xl",
+  full: "max-w-[95vw] h-[95vh]"
 };
 function DialogWrapper({
   open,
@@ -1643,7 +2298,7 @@ function DialogWrapper({
       DialogContent,
       {
         showCloseButton: !hideCloseButton,
-        className: cn(SIZE_VARIANTS[size], contentClassName, className),
+        className: cn("max-w-none", SIZE_VARIANTS[size], contentClassName, className),
         children: [
           !hideHeader && /* @__PURE__ */ jsxs(DialogHeader, { className: cn("space-y-2", headerClassName), children: [
             hideTitle ? /* @__PURE__ */ jsx(DialogTitle, { className: "sr-only", children: title || "Dialog" }) : /* @__PURE__ */ jsx(DialogTitle, { children: title || "Dialog" }),
@@ -1670,18 +2325,10 @@ function FormDialog({
   submitDisabled = false,
   ...props
 }) {
-  const footer = /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        variant: "outline",
-        onClick: onCancel || (() => onOpenChange(false)),
-        disabled: isLoading,
-        children: cancelText
-      }
-    ),
-    /* @__PURE__ */ jsx(Button, { onClick: onSubmit, disabled: isLoading || submitDisabled, children: isLoading ? "Loading..." : submitText })
-  ] });
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    onSubmit?.(e);
+  };
   return /* @__PURE__ */ jsx(
     DialogWrapper,
     {
@@ -1689,16 +2336,30 @@ function FormDialog({
       onOpenChange,
       title,
       description,
-      footer,
       ...props,
-      children
-    }
-  );
-}
-function DropdownWrapper({
-  trigger,
-  children,
-  align = "end",
+      children: /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, children: [
+        children,
+        /* @__PURE__ */ jsxs(DialogFooter, { className: "gap-2 mt-4", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "outline",
+              onClick: onCancel || (() => onOpenChange(false)),
+              disabled: isLoading,
+              children: cancelText
+            }
+          ),
+          /* @__PURE__ */ jsx(Button, { type: "submit", disabled: isLoading || submitDisabled, children: isLoading ? "Loading..." : submitText })
+        ] })
+      ] })
+    }
+  );
+}
+function DropdownWrapper({
+  trigger,
+  children,
+  align = "end",
   side = "bottom",
   sideOffset = 4,
   className,
@@ -1984,11 +2645,11 @@ function RadioDropdown({
     )
   ] });
 }
-function InfoRow({ label, value, copyable = false, icon: Icon2 }) {
+function InfoRow({ label, value, copyable = false, icon: Icon }) {
   if (!value && value !== 0) return null;
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row sm:justify-between sm:items-center py-3 gap-2 group hover:bg-muted rounded-md px-3 -mx-3 transition-colors", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [
-      Icon2 && /* @__PURE__ */ jsx(Icon2, { className: "h-4 w-4 text-muted-foreground flex-shrink-0" }),
+      Icon && /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 text-muted-foreground flex-shrink-0" }),
       /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-muted-foreground truncate", children: label })
     ] }),
     /* @__PURE__ */ jsx("div", { className: "sm:text-right min-w-0 flex-shrink-0", children: copyable ? /* @__PURE__ */ jsx(
@@ -2033,7 +2694,7 @@ var iconItemMediaVariants = cva(
     }
   }
 );
-var IconItemMedia = React5.memo(function IconItemMedia2({
+var IconItemMedia = React3.memo(function IconItemMedia2({
   icon,
   iconBg = "primary",
   iconSize = "md",
@@ -2053,7 +2714,7 @@ var IconItemMedia = React5.memo(function IconItemMedia2({
   );
 });
 IconItemMedia.displayName = "IconItemMedia";
-var FeatureItem = React5.memo(function FeatureItem2({
+var FeatureItem = React3.memo(function FeatureItem2({
   icon,
   iconBg = "primary",
   iconSize = "md",
@@ -2095,7 +2756,10 @@ var FeatureItem = React5.memo(function FeatureItem2({
                   icon,
                   iconBg,
                   iconSize,
-                  className: cn(layout === "vertical" ? "" : "shrink-0", iconClassName)
+                  className: cn(
+                    layout === "vertical" ? "" : "shrink-0",
+                    iconClassName
+                  )
                 }
               ),
               /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 flex-1", children: [
@@ -2173,10 +2837,50 @@ var FeatureItem = React5.memo(function FeatureItem2({
   );
 });
 FeatureItem.displayName = "FeatureItem";
+function FeatureList({
+  items = [],
+  columns = 3,
+  variant = "outline",
+  iconBg = "primary",
+  iconSize = "md",
+  layout = "vertical",
+  className,
+  itemClassName,
+  ...props
+}) {
+  const gridCols = {
+    2: "md:grid-cols-2",
+    3: "md:grid-cols-2 lg:grid-cols-3",
+    4: "md:grid-cols-2 lg:grid-cols-4"
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "list",
+      className: cn("grid gap-6", gridCols[columns] || gridCols[3], className),
+      ...props,
+      children: items.map((item, index) => /* @__PURE__ */ jsx(
+        FeatureItem,
+        {
+          icon: item.icon,
+          iconBg: item.iconBg || iconBg,
+          iconSize: item.iconSize || iconSize,
+          title: item.title,
+          description: item.description,
+          variant,
+          layout,
+          className: itemClassName
+        },
+        item.id || item.title || index
+      ))
+    }
+  );
+}
+FeatureList.displayName = "FeatureList";
 function ModeToggle() {
   const { theme, setTheme } = useTheme();
-  const [mounted, setMounted] = React5.useState(false);
-  React5.useEffect(() => {
+  const [mounted, setMounted] = React3.useState(false);
+  React3.useEffect(() => {
     setMounted(true);
   }, []);
   if (!mounted) {
@@ -2198,7 +2902,7 @@ function ModeToggle() {
     ] }) })
   ] });
 }
-var COUNTRIES = [
+var DEFAULT_COUNTRIES = [
   { code: "GB", name: "United Kingdom", dialCode: "+44", flag: "\u{1F1EC}\u{1F1E7}" },
   { code: "US", name: "United States", dialCode: "+1", flag: "\u{1F1FA}\u{1F1F8}" },
   { code: "IE", name: "Ireland", dialCode: "+353", flag: "\u{1F1EE}\u{1F1EA}" },
@@ -2250,145 +2954,147 @@ var COUNTRIES = [
   { code: "RU", name: "Russia", dialCode: "+7", flag: "\u{1F1F7}\u{1F1FA}" },
   { code: "IL", name: "Israel", dialCode: "+972", flag: "\u{1F1EE}\u{1F1F1}" }
 ];
-var getCountryByCode = (code) => COUNTRIES.find((c) => c.code === code);
-var PhoneInput = React5.forwardRef(
-  ({
-    className,
-    onChange,
-    value,
-    defaultCountry = "GB",
-    disabled,
-    placeholder = "Phone number",
-    ...props
-  }, ref) => {
-    const [isOpen, setIsOpen] = React5.useState(false);
-    const [searchValue, setSearchValue] = React5.useState("");
-    const parseValue = React5.useCallback(
-      (val) => {
-        const valString = val ? String(val) : "";
-        if (!valString) {
-          return {
-            country: getCountryByCode(defaultCountry) || COUNTRIES[0],
-            number: ""
-          };
-        }
-        const cleanVal = valString.replace(/\s/g, "");
-        for (const country2 of COUNTRIES) {
-          if (cleanVal.startsWith(country2.dialCode)) {
-            return {
-              country: country2,
-              number: cleanVal.slice(country2.dialCode.length)
-            };
-          }
-        }
+function PhoneInput({
+  className,
+  onChange,
+  value,
+  defaultCountry = "GB",
+  countries = DEFAULT_COUNTRIES,
+  disabled,
+  placeholder = "Phone number",
+  ref,
+  ...props
+}) {
+  const [isOpen, setIsOpen] = React3.useState(false);
+  const [searchValue, setSearchValue] = React3.useState("");
+  const getCountryByCode = React3.useCallback(
+    (code) => countries.find((c) => c.code === code),
+    [countries]
+  );
+  const parseValue = React3.useCallback(
+    (val) => {
+      const valString = val ? String(val) : "";
+      if (!valString) {
         return {
-          country: getCountryByCode(defaultCountry) || COUNTRIES[0],
-          number: cleanVal.replace(/^\+/, "")
+          country: getCountryByCode(defaultCountry) || countries[0],
+          number: ""
         };
-      },
-      [defaultCountry]
-    );
-    const { country, number } = parseValue(value);
-    const [selectedCountry, setSelectedCountry] = React5.useState(country);
-    React5.useEffect(() => {
-      const parsed = parseValue(value);
-      setSelectedCountry(parsed.country);
-    }, [value, parseValue]);
-    const handleCountryChange = (newCountry) => {
-      setSelectedCountry(newCountry);
-      setIsOpen(false);
-      if (number) {
-        onChange?.(newCountry.dialCode + number);
       }
-    };
-    const handleNumberChange = (e) => {
-      const newNumber = e.target.value.replace(/[^\d]/g, "");
-      if (newNumber) {
-        onChange?.(selectedCountry.dialCode + newNumber);
-      } else {
-        onChange?.("");
+      const cleanVal = valString.replace(/\s/g, "");
+      for (const country2 of countries) {
+        if (cleanVal.startsWith(country2.dialCode)) {
+          return {
+            country: country2,
+            number: cleanVal.slice(country2.dialCode.length)
+          };
+        }
       }
-    };
-    return /* @__PURE__ */ jsxs(InputGroup, { className, children: [
-      /* @__PURE__ */ jsx(InputGroupAddon, { align: "inline-start", className: "p-0 overflow-hidden", children: /* @__PURE__ */ jsxs(
-        Popover,
-        {
-          open: isOpen,
-          modal: true,
-          onOpenChange: (open) => {
-            setIsOpen(open);
-            if (open) setSearchValue("");
-          },
-          children: [
+      return {
+        country: getCountryByCode(defaultCountry) || countries[0],
+        number: cleanVal.replace(/^\+/, "")
+      };
+    },
+    [defaultCountry, countries, getCountryByCode]
+  );
+  const { country, number } = parseValue(value);
+  const [selectedCountry, setSelectedCountry] = React3.useState(country);
+  React3.useEffect(() => {
+    const parsed = parseValue(value);
+    setSelectedCountry(parsed.country);
+  }, [value, parseValue]);
+  const handleCountryChange = (newCountry) => {
+    setSelectedCountry(newCountry);
+    setIsOpen(false);
+    if (number) {
+      onChange?.(newCountry.dialCode + number);
+    }
+  };
+  const handleNumberChange = (e) => {
+    const newNumber = e.target.value.replace(/[^\d]/g, "");
+    if (newNumber) {
+      onChange?.(selectedCountry.dialCode + newNumber);
+    } else {
+      onChange?.("");
+    }
+  };
+  return /* @__PURE__ */ jsxs(InputGroup, { className, children: [
+    /* @__PURE__ */ jsx(InputGroupAddon, { align: "inline-start", className: "p-0 overflow-hidden", children: /* @__PURE__ */ jsxs(
+      Popover,
+      {
+        open: isOpen,
+        modal: true,
+        onOpenChange: (open) => {
+          setIsOpen(open);
+          if (open) setSearchValue("");
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            PopoverTrigger,
+            {
+              render: /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  type: "button",
+                  variant: "ghost",
+                  className: "gap-1.5 rounded-none border-r px-3 focus:z-10 min-w-[90px] h-full",
+                  disabled,
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "text-base leading-none", children: selectedCountry.flag }),
+                    /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: selectedCountry.dialCode }),
+                    /* @__PURE__ */ jsx(ChevronDown, { className: "size-3.5 opacity-50" })
+                  ]
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(PopoverContent, { className: "w-[280px] p-0", align: "start", children: /* @__PURE__ */ jsxs(Command, { children: [
             /* @__PURE__ */ jsx(
-              PopoverTrigger,
+              CommandInput,
               {
-                render: /* @__PURE__ */ jsxs(
-                  Button,
-                  {
-                    type: "button",
-                    variant: "ghost",
-                    className: "gap-1.5 rounded-none border-r px-3 focus:z-10 min-w-[90px] h-full",
-                    disabled,
-                    children: [
-                      /* @__PURE__ */ jsx("span", { className: "text-base leading-none", children: selectedCountry.flag }),
-                      /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: selectedCountry.dialCode }),
-                      /* @__PURE__ */ jsx(ChevronDown, { className: "size-3.5 opacity-50" })
-                    ]
-                  }
-                )
+                value: searchValue,
+                onValueChange: setSearchValue,
+                placeholder: "Search country..."
               }
             ),
-            /* @__PURE__ */ jsx(PopoverContent, { className: "w-[280px] p-0", align: "start", children: /* @__PURE__ */ jsxs(Command, { children: [
-              /* @__PURE__ */ jsx(
-                CommandInput,
+            /* @__PURE__ */ jsx(CommandList, { children: /* @__PURE__ */ jsxs(ScrollArea, { className: "h-64", children: [
+              /* @__PURE__ */ jsx(CommandEmpty, { children: "No country found." }),
+              /* @__PURE__ */ jsx(CommandGroup, { children: countries.filter(
+                (c) => c.name.toLowerCase().includes(searchValue.toLowerCase()) || c.dialCode.includes(searchValue) || c.code.toLowerCase().includes(searchValue.toLowerCase())
+              ).map((c) => /* @__PURE__ */ jsxs(
+                CommandItem,
                 {
-                  value: searchValue,
-                  onValueChange: setSearchValue,
-                  placeholder: "Search country..."
-                }
-              ),
-              /* @__PURE__ */ jsx(CommandList, { children: /* @__PURE__ */ jsxs(ScrollArea, { className: "h-64", children: [
-                /* @__PURE__ */ jsx(CommandEmpty, { children: "No country found." }),
-                /* @__PURE__ */ jsx(CommandGroup, { children: COUNTRIES.filter(
-                  (c) => c.name.toLowerCase().includes(searchValue.toLowerCase()) || c.dialCode.includes(searchValue) || c.code.toLowerCase().includes(searchValue.toLowerCase())
-                ).map((c) => /* @__PURE__ */ jsxs(
-                  CommandItem,
-                  {
-                    className: "gap-2 cursor-pointer",
-                    onSelect: () => handleCountryChange(c),
-                    value: `${c.name} ${c.code} ${c.dialCode}`,
-                    children: [
-                      /* @__PURE__ */ jsx("span", { className: "text-base", children: c.flag }),
-                      /* @__PURE__ */ jsx("span", { className: "flex-1 text-sm", children: c.name }),
-                      /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: c.dialCode })
-                    ]
-                  },
-                  c.code
-                )) })
-              ] }) })
+                  className: "gap-2 cursor-pointer",
+                  onSelect: () => handleCountryChange(c),
+                  value: `${c.name} ${c.code} ${c.dialCode}`,
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "text-base", children: c.flag }),
+                    /* @__PURE__ */ jsx("span", { className: "flex-1 text-sm", children: c.name }),
+                    /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: c.dialCode })
+                  ]
+                },
+                c.code
+              )) })
             ] }) })
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ jsx(
-        InputGroupInput,
-        {
-          ref,
-          type: "tel",
-          inputMode: "numeric",
-          className: "rounded-s-none",
-          placeholder,
-          value: number,
-          onChange: handleNumberChange,
-          disabled,
-          ...props
-        }
-      )
-    ] });
-  }
-);
-PhoneInput.displayName = "PhoneInput";
+          ] }) })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      InputGroupInput,
+      {
+        ref,
+        type: "tel",
+        inputMode: "numeric",
+        className: "rounded-s-none",
+        placeholder,
+        value: number,
+        onChange: handleNumberChange,
+        disabled,
+        ...props
+      }
+    )
+  ] });
+}
 function Pill({
   variant = "secondary",
   themed = false,
@@ -2468,8 +3174,8 @@ function PillDelta({ className, delta }) {
   }
   return /* @__PURE__ */ jsx(ChevronDownIcon, { className: cn("size-3 text-rose-500", className) });
 }
-function PillIcon({ icon: Icon2, className, ...props }) {
-  return /* @__PURE__ */ jsx(Icon2, { className: cn("size-3 text-muted-foreground", className), size: 12, ...props });
+function PillIcon({ icon: Icon, className, ...props }) {
+  return /* @__PURE__ */ jsx(Icon, { className: cn("size-3 text-muted-foreground", className), size: 12, ...props });
 }
 function PillAvatarGroup({ children, className, ...props }) {
   return /* @__PURE__ */ jsx(
@@ -2602,7 +3308,16 @@ var TabContent = memo(function TabContent2({
     () => cn(padding && "px-6 py-4"),
     [padding]
   );
-  return /* @__PURE__ */ jsx(TabsContent, { value, keepMounted, className: contentClassName, ...props, children: withScrollArea ? /* @__PURE__ */ jsx(ScrollArea, { className: cn("h-full", scrollAreaClassName), children: /* @__PURE__ */ jsx("div", { className: scrollAreaPaddingClassName, children }) }) : children });
+  return /* @__PURE__ */ jsx(
+    TabsContent,
+    {
+      value,
+      keepMounted,
+      className: contentClassName,
+      ...props,
+      children: withScrollArea ? /* @__PURE__ */ jsx(ScrollArea, { className: cn("h-full", scrollAreaClassName), children: /* @__PURE__ */ jsx("div", { className: scrollAreaPaddingClassName, children }) }) : children
+    }
+  );
 });
 var DynamicTabs = memo(function DynamicTabs2({
   tabs = [],
@@ -2860,203 +3575,6 @@ function ResponsiveSplitLayout({
     }
   );
 }
-var SIZE_VARIANTS2 = {
-  sm: "sm:!max-w-md",
-  default: "w-full sm:!max-w-md md:!max-w-lg",
-  lg: "w-full sm:!max-w-lg md:!max-w-2xl lg:!max-w-4xl",
-  xl: "w-full sm:!max-w-2xl md:!max-w-4xl lg:!max-w-5xl",
-  full: "w-full !max-w-full",
-  mobile: "w-[85%] !max-w-sm",
-  "mobile-nav": "!w-[300px] sm:!w-[350px]"
-};
-var getPadding = (size, type = "default") => {
-  const isFullSize = size === "full";
-  if (type === "header" || type === "footer") {
-    return isFullSize ? "px-6 lg:px-8" : "px-4";
-  }
-  return isFullSize ? "p-6 lg:p-8" : "p-4";
-};
-var SheetWrapper = memo(function SheetWrapper2({
-  open,
-  onOpenChange,
-  title,
-  description,
-  children,
-  footer,
-  header,
-  side = "right",
-  size = "default",
-  modal = true,
-  className,
-  headerClassName,
-  contentClassName,
-  footerClassName,
-  innerClassName,
-  hideHeader = false,
-  hideTitle = false,
-  hideDescription = false,
-  hideCloseButton = false,
-  disableContentPadding = false
-}) {
-  const computedClasses = useMemo(
-    () => ({
-      header: cn("border-b pb-4 pt-6", getPadding(size, "header"), headerClassName),
-      inner: cn(
-        "flex-1 overflow-y-auto",
-        !disableContentPadding && getPadding(size),
-        innerClassName
-      ),
-      footer: cn(
-        "border-t bg-muted/30 pt-4 pb-6 mt-auto",
-        getPadding(size, "footer"),
-        footerClassName
-      )
-    }),
-    [size, headerClassName, innerClassName, footerClassName, disableContentPadding]
-  );
-  const shouldHideTitle = !!header || hideTitle;
-  const shouldHideDescription = !!header || hideDescription;
-  return /* @__PURE__ */ jsx(Sheet, { open, onOpenChange, modal, children: /* @__PURE__ */ jsxs(
-    SheetContent,
-    {
-      side,
-      showCloseButton: !hideCloseButton,
-      className: cn(SIZE_VARIANTS2[size], "flex flex-col p-0", contentClassName, className),
-      children: [
-        !hideHeader && /* @__PURE__ */ jsxs(SheetHeader, { className: computedClasses.header, children: [
-          /* @__PURE__ */ jsx(SheetTitle, { className: shouldHideTitle ? "sr-only" : "", children: title || "Sheet" }),
-          description && /* @__PURE__ */ jsx(SheetDescription, { className: shouldHideDescription ? "sr-only" : "", children: description }),
-          header
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: computedClasses.inner, children }),
-        footer && /* @__PURE__ */ jsx(SheetFooter, { className: computedClasses.footer, children: footer })
-      ]
-    }
-  ) });
-});
-var FormSheet = memo(function FormSheet2({
-  open,
-  onOpenChange,
-  title,
-  description,
-  children,
-  onSubmit,
-  onCancel,
-  submitLabel = "Submit",
-  cancelLabel = "Cancel",
-  submitDisabled = false,
-  submitLoading = false,
-  formId,
-  size = "lg",
-  ...props
-}) {
-  const handleCancel = useCallback(() => {
-    onCancel?.();
-    onOpenChange?.(false);
-  }, [onCancel, onOpenChange]);
-  const footer = useMemo(
-    () => /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row gap-2 w-full", children: [
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          type: "button",
-          variant: "outline",
-          className: "flex-1",
-          onClick: handleCancel,
-          disabled: submitDisabled || submitLoading,
-          children: cancelLabel
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        ClientSubmitButton,
-        {
-          form: formId,
-          className: "flex-1",
-          disabled: submitDisabled,
-          loading: submitLoading,
-          loadingText: "Saving...",
-          children: submitLabel
-        }
-      )
-    ] }),
-    [cancelLabel, submitLabel, submitDisabled, submitLoading, formId, handleCancel]
-  );
-  return /* @__PURE__ */ jsx(
-    SheetWrapper,
-    {
-      open,
-      onOpenChange,
-      title,
-      description,
-      size,
-      footer,
-      ...props,
-      children
-    }
-  );
-});
-var ConfirmSheet = memo(function ConfirmSheet2({
-  open,
-  onOpenChange,
-  title = "Confirm Action",
-  description,
-  children,
-  onConfirm,
-  onCancel,
-  confirmLabel = "Confirm",
-  cancelLabel = "Cancel",
-  confirmVariant = "default",
-  confirmDisabled = false,
-  confirmLoading = false,
-  size = "sm",
-  ...props
-}) {
-  const handleConfirm = useCallback(() => {
-    onConfirm?.();
-  }, [onConfirm]);
-  const handleCancel = useCallback(() => {
-    onCancel?.();
-    onOpenChange?.(false);
-  }, [onCancel, onOpenChange]);
-  const footer = useMemo(
-    () => /* @__PURE__ */ jsxs("div", { className: "flex gap-2 w-full", children: [
-      /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", className: "flex-1", onClick: handleCancel, children: cancelLabel }),
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          type: "button",
-          variant: confirmVariant,
-          className: "flex-1",
-          onClick: handleConfirm,
-          disabled: confirmDisabled || confirmLoading,
-          children: confirmLoading ? "Loading..." : confirmLabel
-        }
-      )
-    ] }),
-    [
-      cancelLabel,
-      confirmLabel,
-      confirmVariant,
-      confirmDisabled,
-      confirmLoading,
-      handleConfirm,
-      handleCancel
-    ]
-  );
-  return /* @__PURE__ */ jsx(
-    SheetWrapper,
-    {
-      open,
-      onOpenChange,
-      title,
-      description,
-      size,
-      footer,
-      ...props,
-      children
-    }
-  );
-});
 function TableWrapper({
   title,
   description,
@@ -3239,12 +3757,6 @@ function FormInput({
   labelClassName,
   inputClassName,
   inputGroupClassName,
-  // PascalCase variants
-  IconLeft,
-  IconRight,
-  AddonLeft,
-  AddonRight,
-  // camelCase variants
   iconLeft,
   iconRight,
   addonLeft,
@@ -3264,10 +3776,6 @@ function FormInput({
   inputMode,
   enterKeyHint
 }) {
-  const resolvedIconLeft = IconLeft || iconLeft;
-  const resolvedIconRight = IconRight || iconRight;
-  const resolvedAddonLeft = AddonLeft || addonLeft;
-  const resolvedAddonRight = AddonRight || addonRight;
   const descriptionText = description || helperText;
   const handleChange = (e, field) => {
     const newValue = transform?.output ? transform.output(e.target.value) : e.target.value;
@@ -3278,7 +3786,7 @@ function FormInput({
     }
     onValueChange?.(newValue);
   };
-  const hasInputGroup = resolvedIconLeft || resolvedIconRight || resolvedAddonLeft || resolvedAddonRight;
+  const hasInputGroup = iconLeft || iconRight || addonLeft || addonRight;
   const renderInput = (field, isDisabled, fieldState) => {
     const rawValue = field ? transform?.input ? transform.input(field.value) : field.value : transform?.input ? transform.input(value) : value;
     const safeValue = rawValue ?? "";
@@ -3314,9 +3822,9 @@ function FormInput({
           className: cn(inputGroupClassName),
           "data-disabled": isDisabled,
           children: [
-            (resolvedAddonLeft || resolvedIconLeft) && /* @__PURE__ */ jsx(InputGroupAddon, { align: "inline-start", children: resolvedAddonLeft || resolvedIconLeft }),
+            (addonLeft || iconLeft) && /* @__PURE__ */ jsx(InputGroupAddon, { align: "inline-start", children: addonLeft || iconLeft }),
             /* @__PURE__ */ jsx(InputGroupInput, { ...inputProps, className: inputClassName }),
-            (resolvedAddonRight || resolvedIconRight) && /* @__PURE__ */ jsx(InputGroupAddon, { align: "inline-end", children: resolvedAddonRight || resolvedIconRight })
+            (addonRight || iconRight) && /* @__PURE__ */ jsx(InputGroupAddon, { align: "inline-end", children: addonRight || iconRight })
           ]
         }
       );
@@ -3375,12 +3883,6 @@ function FormTextarea({
   labelClassName,
   textareaClassName,
   inputGroupClassName,
-  // PascalCase variants
-  IconLeft,
-  IconRight,
-  AddonLeft,
-  AddonRight,
-  // camelCase variants
   iconLeft,
   iconRight,
   addonLeft,
@@ -3391,12 +3893,8 @@ function FormTextarea({
   autoComplete,
   autoFocus
 }) {
-  const resolvedIconLeft = IconLeft || iconLeft;
-  const resolvedIconRight = IconRight || iconRight;
-  const resolvedAddonLeft = AddonLeft || addonLeft;
-  const resolvedAddonRight = AddonRight || addonRight;
   const descriptionText = description || helperText;
-  const hasInputGroup = resolvedIconLeft || resolvedIconRight || resolvedAddonLeft || resolvedAddonRight;
+  const hasInputGroup = iconLeft || iconRight || addonLeft || addonRight;
   const [localValue, setLocalValue] = useState(propValue || "");
   useEffect(() => {
     if (propValue !== void 0) {
@@ -3445,7 +3943,7 @@ function FormTextarea({
           className: cn(inputGroupClassName),
           "data-disabled": isDisabled,
           children: [
-            (resolvedAddonLeft || resolvedIconLeft) && /* @__PURE__ */ jsx(InputGroupAddon, { align: "inline-start", children: resolvedAddonLeft || resolvedIconLeft }),
+            (addonLeft || iconLeft) && /* @__PURE__ */ jsx(InputGroupAddon, { align: "inline-start", children: addonLeft || iconLeft }),
             /* @__PURE__ */ jsx(
               InputGroupTextarea,
               {
@@ -3453,7 +3951,7 @@ function FormTextarea({
                 className: cn("overflow-auto resize-none", textareaClassName)
               }
             ),
-            (resolvedAddonRight || resolvedIconRight) && /* @__PURE__ */ jsx(InputGroupAddon, { align: "inline-end", children: resolvedAddonRight || resolvedIconRight })
+            (addonRight || iconRight) && /* @__PURE__ */ jsx(InputGroupAddon, { align: "inline-end", children: addonRight || iconRight })
           ]
         }
       );
@@ -3518,7 +4016,7 @@ function SelectInput({
   triggerClassName,
   contentClassName,
   itemClassName,
-  Icon: Icon2,
+  Icon,
   onValueChange,
   value: propValue,
   defaultOpen,
@@ -3529,24 +4027,34 @@ function SelectInput({
 }) {
   const descriptionText = description || helperText;
   const CLEAR_VALUE = "__CLEAR__";
-  const filteredItems = items.filter((item) => {
-    const val = item.value;
-    return val !== void 0 && val !== null;
-  });
-  const displayItems = allOption ? [allOption, ...filteredItems] : filteredItems;
-  const filteredGroups = groups.map((group) => ({
-    ...group,
-    items: group.items.filter((item) => {
-      const val = item.value;
-      return val !== void 0 && val !== null;
-    })
-  })).filter((group) => group.items.length > 0);
+  const displayItems = useMemo(() => {
+    const filtered = items.filter((item) => item.value !== void 0 && item.value !== null);
+    return allOption ? [allOption, ...filtered] : filtered;
+  }, [items, allOption]);
+  const filteredGroups = useMemo(() => {
+    return groups.map((group) => ({
+      ...group,
+      items: group.items.filter((item) => item.value !== void 0 && item.value !== null)
+    })).filter((group) => group.items.length > 0);
+  }, [groups]);
   const [localValue, setLocalValue] = useState(propValue?.toString() || "");
   useEffect(() => {
     if (propValue !== void 0) {
       setLocalValue(propValue.toString());
     }
   }, [propValue]);
+  const labelMap = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const item of displayItems) {
+      map.set(item.value?.toString() ?? "", item.label);
+    }
+    for (const group of filteredGroups) {
+      for (const item of group.items) {
+        map.set(item.value?.toString() ?? "", item.label);
+      }
+    }
+    return map;
+  }, [displayItems, filteredGroups]);
   const renderSelect = (field, isDisabled, fieldState) => {
     const rawValue = field ? field.value?.toString() : localValue;
     const handleChange = (newValue) => {
@@ -3615,25 +4123,10 @@ function SelectInput({
       });
     };
     const selectValue = rawValue === "" ? CLEAR_VALUE : rawValue ? rawValue : void 0;
-    const findSelectedLabel = () => {
+    const selectedLabel = (() => {
       if (!rawValue && rawValue !== "") return void 0;
-      for (const item of displayItems) {
-        const itemVal = item.value?.toString() ?? "";
-        if (itemVal === rawValue || itemVal === "" && rawValue === "") {
-          return item.label;
-        }
-      }
-      for (const group of filteredGroups) {
-        for (const item of group.items) {
-          const itemVal = item.value?.toString() ?? "";
-          if (itemVal === rawValue) {
-            return item.label;
-          }
-        }
-      }
-      return void 0;
-    };
-    const selectedLabel = findSelectedLabel();
+      return labelMap.get(rawValue ?? "");
+    })();
     return /* @__PURE__ */ jsxs(
       Select,
       {
@@ -3648,7 +4141,7 @@ function SelectInput({
               className: cn("w-full", triggerClassName),
               "aria-invalid": fieldState?.invalid || void 0,
               children: [
-                Icon2 && /* @__PURE__ */ jsx(Icon2, { className: "mr-2 h-4 w-4 text-primary" }),
+                Icon && /* @__PURE__ */ jsx(Icon, { className: "mr-2 h-4 w-4 text-primary" }),
                 /* @__PURE__ */ jsx(SelectValue, { placeholder, children: selectedLabel || null })
               ]
             }
@@ -4072,7 +4565,7 @@ function DateInput({
   onValueChange,
   value: propValue,
   onChange: propOnChange,
-  Icon: Icon2 = CalendarIcon,
+  Icon = CalendarIcon,
   allowClear = true
 }) {
   const descriptionText = description || helperText;
@@ -4121,7 +4614,7 @@ function DateInput({
               ),
               disabled: isDisabled,
               children: [
-                /* @__PURE__ */ jsx(Icon2, { className: "mr-2 h-4 w-4" }),
+                /* @__PURE__ */ jsx(Icon, { className: "mr-2 h-4 w-4" }),
                 displayText,
                 allowClear && selected && !isDisabled && /* @__PURE__ */ jsx(
                   X,
@@ -4871,110 +5364,108 @@ function generateSlug(text) {
   if (!text) return "";
   return text.toLowerCase().trim().replace(/[^\w\s-]/g, "").replace(/\s+/g, "-").replace(/-+/g, "-").replace(/^-+|-+$/g, "");
 }
-var SlugField = forwardRef(
-  ({
-    control,
-    name,
-    description,
-    helperText,
-    required,
-    label,
-    placeholder = "my-page-slug",
-    disabled,
-    sourceValue,
-    onGenerate,
-    className,
-    inputClassName,
-    labelClassName,
-    onValueChange,
-    value,
-    onChange,
-    error
-  }, ref) => {
-    const descriptionText = description || helperText;
-    const handleGenerate = (_currentValue, fieldOnChange) => {
-      const newSlug = onGenerate ? onGenerate(sourceValue || "") : generateSlug(sourceValue);
-      fieldOnChange?.(newSlug);
-      onValueChange?.(newSlug);
-    };
-    const renderInput = (fieldValue, fieldOnChange, isDisabled, fieldState) => {
-      return /* @__PURE__ */ jsxs(InputGroup, { children: [
-        /* @__PURE__ */ jsx(
-          InputGroupInput,
-          {
-            ref,
-            id: name,
-            type: "text",
-            disabled: isDisabled,
-            placeholder,
-            value: fieldValue || "",
-            onChange: (e) => {
-              const newValue = e.target.value;
-              fieldOnChange?.(newValue);
-              onValueChange?.(newValue);
-            },
-            "aria-invalid": fieldState?.invalid,
-            className: inputClassName
-          }
-        ),
-        /* @__PURE__ */ jsx(InputGroupAddon, { align: "inline-end", children: /* @__PURE__ */ jsxs(
-          InputGroupButton,
-          {
-            type: "button",
-            size: "sm",
-            onClick: () => handleGenerate(fieldValue, fieldOnChange),
-            disabled: isDisabled || !sourceValue,
-            title: "Generate slug from source",
-            children: [
-              /* @__PURE__ */ jsx(Wand2, { className: "h-4 w-4" }),
-              "Generate"
-            ]
-          }
-        ) })
-      ] });
-    };
-    if (control && name) {
-      return /* @__PURE__ */ jsx(
-        Controller,
+function SlugField({
+  control,
+  name,
+  description,
+  helperText,
+  required,
+  label,
+  placeholder = "my-page-slug",
+  disabled,
+  sourceValue,
+  onGenerate,
+  className,
+  inputClassName,
+  labelClassName,
+  onValueChange,
+  value,
+  onChange,
+  error,
+  ref
+}) {
+  const descriptionText = description || helperText;
+  const handleGenerate = (_currentValue, fieldOnChange) => {
+    const newSlug = onGenerate ? onGenerate(sourceValue || "") : generateSlug(sourceValue);
+    fieldOnChange?.(newSlug);
+    onValueChange?.(newSlug);
+  };
+  const renderInput = (fieldValue, fieldOnChange, isDisabled, fieldState) => {
+    return /* @__PURE__ */ jsxs(InputGroup, { children: [
+      /* @__PURE__ */ jsx(
+        InputGroupInput,
         {
-          name,
-          control,
-          render: ({ field, fieldState }) => /* @__PURE__ */ jsxs(
-            Field,
-            {
-              className,
-              "data-disabled": disabled,
-              "data-invalid": fieldState.invalid,
-              children: [
-                label && /* @__PURE__ */ jsxs(FieldLabel, { htmlFor: name, className: labelClassName, children: [
-                  label,
-                  required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-1", children: "*" })
-                ] }),
-                renderInput(field.value, field.onChange, disabled, fieldState),
-                descriptionText && /* @__PURE__ */ jsx(FieldDescription, { children: descriptionText }),
-                fieldState.invalid && fieldState.error && /* @__PURE__ */ jsx(FieldError, { errors: [fieldState.error] })
-              ]
-            }
-          )
+          ref,
+          id: name,
+          type: "text",
+          disabled: isDisabled,
+          placeholder,
+          value: fieldValue || "",
+          onChange: (e) => {
+            const newValue = e.target.value;
+            fieldOnChange?.(newValue);
+            onValueChange?.(newValue);
+          },
+          "aria-invalid": fieldState?.invalid,
+          className: inputClassName
         }
-      );
-    }
-    const handleDirectChange = (newValue) => {
-      onChange?.({ target: { value: newValue } });
-      onValueChange?.(newValue);
-    };
-    return /* @__PURE__ */ jsxs(Field, { className, "data-disabled": disabled, children: [
-      label && /* @__PURE__ */ jsxs(FieldLabel, { htmlFor: name, className: labelClassName, children: [
-        label,
-        required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-1", children: "*" })
-      ] }),
-      renderInput(value, handleDirectChange, disabled, { }),
-      descriptionText && /* @__PURE__ */ jsx(FieldDescription, { children: descriptionText }),
-      error && /* @__PURE__ */ jsx(FieldError, { errors: [error] })
+      ),
+      /* @__PURE__ */ jsx(InputGroupAddon, { align: "inline-end", children: /* @__PURE__ */ jsxs(
+        InputGroupButton,
+        {
+          type: "button",
+          size: "sm",
+          onClick: () => handleGenerate(fieldValue, fieldOnChange),
+          disabled: isDisabled || !sourceValue,
+          title: "Generate slug from source",
+          children: [
+            /* @__PURE__ */ jsx(Wand2, { className: "h-4 w-4" }),
+            "Generate"
+          ]
+        }
+      ) })
     ] });
+  };
+  if (control && name) {
+    return /* @__PURE__ */ jsx(
+      Controller,
+      {
+        name,
+        control,
+        render: ({ field, fieldState }) => /* @__PURE__ */ jsxs(
+          Field,
+          {
+            className,
+            "data-disabled": disabled,
+            "data-invalid": fieldState.invalid,
+            children: [
+              label && /* @__PURE__ */ jsxs(FieldLabel, { htmlFor: name, className: labelClassName, children: [
+                label,
+                required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-1", children: "*" })
+              ] }),
+              renderInput(field.value, field.onChange, disabled, fieldState),
+              descriptionText && /* @__PURE__ */ jsx(FieldDescription, { children: descriptionText }),
+              fieldState.invalid && fieldState.error && /* @__PURE__ */ jsx(FieldError, { errors: [fieldState.error] })
+            ]
+          }
+        )
+      }
+    );
   }
-);
-SlugField.displayName = "SlugField";
+  const handleDirectChange = (newValue) => {
+    onChange?.({ target: { value: newValue } });
+    onValueChange?.(newValue);
+  };
+  return /* @__PURE__ */ jsxs(Field, { className, "data-disabled": disabled, children: [
+    label && /* @__PURE__ */ jsxs(FieldLabel, { htmlFor: name, className: labelClassName, children: [
+      label,
+      required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-1", children: "*" })
+    ] }),
+    renderInput(value, handleDirectChange, disabled, { }),
+    descriptionText && /* @__PURE__ */ jsx(FieldDescription, { children: descriptionText }),
+    error && /* @__PURE__ */ jsx(FieldError, { errors: [error] })
+  ] });
+}
 var flattenErrors = (errors, prefix = "") => {
   const flattened = [];
   Object.entries(errors).forEach(([key, value]) => {
@@ -5036,12 +5527,12 @@ function DateRangeFilter({
   alignRight = true,
   numberOfMonths = 1
 }) {
-  const [dateRange, setDateRange] = React5.useState(
+  const [dateRange, setDateRange] = React3.useState(
     initialStartDate || initialEndDate ? { from: initialStartDate, to: initialEndDate } : void 0
   );
-  const [appliedRange, setAppliedRange] = React5.useState(dateRange);
-  const [open, setOpen] = React5.useState(false);
-  React5.useEffect(() => {
+  const [appliedRange, setAppliedRange] = React3.useState(dateRange);
+  const [open, setOpen] = React3.useState(false);
+  React3.useEffect(() => {
     const newRange = initialStartDate || initialEndDate ? { from: initialStartDate, to: initialEndDate } : void 0;
     setDateRange(newRange);
     setAppliedRange(newRange);
@@ -5160,7 +5651,7 @@ function DateRangePopover({
   calendarClassName,
   allowClear,
   showBadge,
-  Icon: Icon2,
+  Icon,
   formatDateRange,
   isDateDisabled,
   handleDateRangeSelect,
@@ -5187,7 +5678,7 @@ function DateRangePopover({
                 buttonClassName
               ),
               children: [
-                /* @__PURE__ */ jsx(Icon2, { className: "h-4 w-4 shrink-0" }),
+                /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 shrink-0" }),
                 hasValue ? /* @__PURE__ */ jsxs("span", { className: "flex-1 truncate text-left", children: [
                   formatDateRange(dateRange),
                   showBadge && dateRange?.from && dateRange?.to && (() => {
@@ -5259,1442 +5750,178 @@ var defaultTransform = {
   } : { from: void 0, to: void 0 },
   output: (range) => ({
     from: range?.from ? range.from instanceof Date ? range.from.toISOString() : range.from : void 0,
-    to: range?.to ? range.to instanceof Date ? range.to.toISOString() : range.to : void 0
-  })
-};
-function DateRangeInput({
-  control,
-  name,
-  label,
-  description,
-  placeholder = "Select date range",
-  required,
-  disabled,
-  className,
-  labelClassName,
-  buttonClassName,
-  calendarClassName,
-  minDate,
-  maxDate,
-  disabledDates,
-  disabledDays,
-  onValueChange,
-  validateDateRange,
-  clearErrors,
-  descriptionComponent,
-  allowClear = true,
-  showBadge = false,
-  Icon: Icon2 = CalendarIcon,
-  transform = defaultTransform
-}) {
-  const [localDateRange, setLocalDateRange] = useState({
-    from: void 0,
-    to: void 0
-  });
-  const formatDateRange = (range) => {
-    if (!range || !range.from && !range.to) return "";
-    const fromDate = range.from instanceof Date ? range.from : range.from ? new Date(range.from) : null;
-    const toDate2 = range.to instanceof Date ? range.to : range.to ? new Date(range.to) : null;
-    const fromFormatted = fromDate && isValid(fromDate) ? format(fromDate, "MMM d") : "";
-    const toFormatted = toDate2 && isValid(toDate2) ? format(toDate2, "MMM d") : "";
-    if (fromFormatted && toFormatted) {
-      return `${fromFormatted} - ${toFormatted}`;
-    } else if (fromFormatted) {
-      return `From ${fromFormatted}`;
-    } else if (toFormatted) {
-      return `Until ${toFormatted}`;
-    }
-    return "";
-  };
-  const isDateDisabled = (date) => {
-    if (!date || !isValid(date)) return true;
-    if (disabled) return true;
-    if (minDate && date < minDate) return true;
-    if (maxDate && date > maxDate) return true;
-    if (disabledDates?.some((d) => d.getTime() === date.getTime())) return true;
-    if (disabledDays?.includes(date.getDay())) return true;
-    return false;
-  };
-  const handleDateRangeSelect = (range, field) => {
-    if (disabled) return;
-    const safeRange = range || { from: void 0, to: void 0 };
-    if (validateDateRange && !validateDateRange(safeRange)) {
-      return;
-    }
-    if (field) {
-      const transformedValue = transform.output(safeRange);
-      field.onChange(transformedValue);
-    } else {
-      setLocalDateRange(safeRange);
-    }
-    onValueChange?.(safeRange);
-    if (clearErrors && name) {
-      clearErrors(name);
-    }
-  };
-  const handleClear = (field, e) => {
-    e.stopPropagation();
-    const emptyRange = { from: void 0, to: void 0 };
-    if (field) {
-      field.onChange(emptyRange);
-    } else {
-      setLocalDateRange(emptyRange);
-    }
-    onValueChange?.(emptyRange);
-    if (clearErrors && name) {
-      clearErrors(name);
-    }
-  };
-  if (control) {
-    return /* @__PURE__ */ jsx(
-      Controller,
-      {
-        control,
-        name,
-        render: ({ field, fieldState }) => {
-          const dateRange = transform.input(field.value);
-          return /* @__PURE__ */ jsxs(
-            Field,
-            {
-              className: cn("w-full", className),
-              "data-invalid": !!fieldState.error,
-              children: [
-                label && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-2", children: [
-                  /* @__PURE__ */ jsxs(FieldLabel, { className: cn("grow", labelClassName), children: [
-                    label,
-                    required && /* @__PURE__ */ jsx("span", { className: "text-destructive ml-1", children: "*" })
-                  ] }),
-                  /* @__PURE__ */ jsx("span", { className: "text-muted-foreground shrink-0", children: /* @__PURE__ */ jsx(Icon2, { className: "h-4 w-4" }) })
-                ] }),
-                /* @__PURE__ */ jsx(
-                  DateRangePopover,
-                  {
-                    dateRange,
-                    placeholder,
-                    disabled,
-                    buttonClassName,
-                    calendarClassName,
-                    allowClear,
-                    showBadge,
-                    Icon: Icon2,
-                    formatDateRange,
-                    isDateDisabled,
-                    handleDateRangeSelect: (range) => handleDateRangeSelect(range, field),
-                    handleClear: (e) => handleClear(field, e),
-                    minDate,
-                    maxDate
-                  }
-                ),
-                description && !descriptionComponent && /* @__PURE__ */ jsx(FieldDescription, { children: description }),
-                descriptionComponent && /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: descriptionComponent }),
-                /* @__PURE__ */ jsx(
-                  FieldError,
-                  {
-                    errors: fieldState.error ? [fieldState.error] : void 0
-                  }
-                )
-              ]
-            }
-          );
-        }
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs("div", { className: cn("w-full", className), children: [
-    label && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-2", children: [
-      /* @__PURE__ */ jsxs("div", { className: cn("text-sm font-medium grow", labelClassName), children: [
-        label,
-        required && /* @__PURE__ */ jsx("span", { className: "text-destructive ml-1", children: "*" })
-      ] }),
-      /* @__PURE__ */ jsx("span", { className: "text-muted-foreground shrink-0", children: /* @__PURE__ */ jsx(Icon2, { className: "h-4 w-4" }) })
-    ] }),
-    /* @__PURE__ */ jsx(
-      DateRangePopover,
-      {
-        dateRange: localDateRange,
-        placeholder,
-        disabled,
-        buttonClassName,
-        calendarClassName,
-        allowClear,
-        showBadge,
-        Icon: Icon2,
-        formatDateRange,
-        isDateDisabled,
-        handleDateRangeSelect: (range) => handleDateRangeSelect(range),
-        handleClear: (e) => handleClear(null, e),
-        minDate,
-        maxDate
-      }
-    ),
-    description && /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground mt-1", children: description }),
-    descriptionComponent && /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: descriptionComponent })
-  ] });
-}
-
-// src/components/search/index.ts
-var search_exports = {};
-__export(search_exports, {
-  Actions: () => SearchActions,
-  Container: () => SearchContainer,
-  FilterActions: () => SearchFilterActions,
-  Filters: () => SearchFilters,
-  Input: () => SearchInput,
-  Root: () => SearchRoot,
-  SearchProvider: () => SearchProvider,
-  TypeInput: () => SearchTypeInput,
-  useSearch: () => useSearch
-});
-var SearchContext = createContext(void 0);
-function SearchProvider({ children, value }) {
-  return /* @__PURE__ */ jsx(SearchContext.Provider, { value, children });
-}
-function useSearch() {
-  const context = useContext(SearchContext);
-  if (!context) {
-    throw new Error("useSearch must be used within SearchProvider");
-  }
-  return context;
-}
-function SearchRoot({ children, hook, className }) {
-  return /* @__PURE__ */ jsx(SearchProvider, { value: hook, children: /* @__PURE__ */ jsx("div", { className: cn("w-full", className), children }) });
-}
-function SearchInput({
-  placeholder = "Search...",
-  className,
-  disabled,
-  showIcon = true,
-  showClearButton = false,
-  onKeyDown,
-  ...props
-}) {
-  const { searchValue, setSearchValue, handleSearch } = useSearch();
-  const handleKeyDown = (event) => {
-    onKeyDown?.(event);
-    if (!event.defaultPrevented && event.key === "Enter" && !disabled) {
-      handleSearch?.();
-    }
-  };
-  return /* @__PURE__ */ jsxs(
-    InputGroup,
-    {
-      className: cn("h-10 flex-1 shadow-sm", className),
-      "data-disabled": disabled || void 0,
-      children: [
-        showIcon && /* @__PURE__ */ jsx(InputGroupAddon, { align: "inline-start", children: /* @__PURE__ */ jsx(Search, { className: "size-4" }) }),
-        /* @__PURE__ */ jsx(
-          InputGroupInput,
-          {
-            ...props,
-            type: "text",
-            placeholder,
-            value: searchValue || "",
-            onChange: (e) => setSearchValue?.(e.target.value),
-            onKeyDown: handleKeyDown,
-            disabled,
-            className: "text-base"
-          }
-        ),
-        showClearButton && searchValue && /* @__PURE__ */ jsx(InputGroupAddon, { align: "inline-end", children: /* @__PURE__ */ jsx(
-          InputGroupButton,
-          {
-            variant: "ghost",
-            size: "icon-sm",
-            onClick: () => setSearchValue?.(""),
-            disabled,
-            children: /* @__PURE__ */ jsx(X, { className: "size-4" })
-          }
-        ) })
-      ]
-    }
-  );
-}
-function SearchTypeInput({
-  placeholder = "Search...",
-  className,
-  disabled,
-  showIcon = true,
-  showClearButton = false,
-  searchTypeOptions = [],
-  onKeyDown,
-  ...props
-}) {
-  const { searchValue, setSearchValue, searchType, setSearchType, handleSearch } = useSearch();
-  const handleKeyDown = (event) => {
-    onKeyDown?.(event);
-    if (!event.defaultPrevented && event.key === "Enter" && !disabled) {
-      handleSearch?.();
-    }
-  };
-  const selectedOption = searchTypeOptions.find((opt) => opt.value === searchType);
-  return /* @__PURE__ */ jsxs(
-    InputGroup,
-    {
-      className: cn("h-10 flex-1 shadow-sm", className),
-      "data-disabled": disabled || void 0,
-      children: [
-        showIcon && /* @__PURE__ */ jsx(InputGroupAddon, { align: "inline-start", children: /* @__PURE__ */ jsx(Search, { className: "size-4" }) }),
-        searchTypeOptions.length > 0 && /* @__PURE__ */ jsxs(InputGroupAddon, { align: "inline-start", className: "pr-0", children: [
-          /* @__PURE__ */ jsxs(
-            Select,
-            {
-              value: searchType,
-              onValueChange: setSearchType,
-              disabled,
-              children: [
-                /* @__PURE__ */ jsx(SelectTrigger, { className: "h-7 w-auto border-0 bg-transparent px-2 text-sm font-medium shadow-none focus:ring-0", children: /* @__PURE__ */ jsx(SelectValue, { children: selectedOption?.label || searchTypeOptions[0]?.label }) }),
-                /* @__PURE__ */ jsx(SelectContent, { children: searchTypeOptions.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.value, children: option.label }, option.value)) })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx("div", { className: "h-6 w-px bg-border ml-1" })
-        ] }),
-        /* @__PURE__ */ jsx(
-          InputGroupInput,
-          {
-            ...props,
-            type: "text",
-            placeholder,
-            value: searchValue || "",
-            onChange: (e) => setSearchValue?.(e.target.value),
-            onKeyDown: handleKeyDown,
-            disabled,
-            className: "text-base"
-          }
-        ),
-        showClearButton && searchValue && /* @__PURE__ */ jsx(InputGroupAddon, { align: "inline-end", children: /* @__PURE__ */ jsx(
-          InputGroupButton,
-          {
-            variant: "ghost",
-            size: "icon-sm",
-            onClick: () => setSearchValue?.(""),
-            disabled,
-            children: /* @__PURE__ */ jsx(X, { className: "size-4" })
-          }
-        ) })
-      ]
-    }
-  );
-}
-function SearchFilterActions({ onClose, disabled }) {
-  const { handleSearch, clearSearch, hasActiveFilters } = useSearch();
-  const handleApply = () => {
-    handleSearch?.();
-    onClose?.();
-  };
-  return /* @__PURE__ */ jsxs("div", { className: "flex gap-2 border-t bg-muted/30 p-4 pt-3 -mx-4 -mb-4", children: [
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        variant: "outline",
-        size: "sm",
-        onClick: clearSearch,
-        className: "flex-1",
-        disabled: disabled || !hasActiveFilters,
-        children: "Reset"
-      }
-    ),
-    /* @__PURE__ */ jsxs(Button, { size: "sm", onClick: handleApply, className: "flex-1", disabled, children: [
-      /* @__PURE__ */ jsx(Search, { size: 16, className: "mr-2" }),
-      "Apply"
-    ] })
-  ] });
-}
-function SearchFilters({
-  children,
-  title = "Filters",
-  description = "Refine your search results",
-  disabled,
-  className
-}) {
-  const { hasActiveFilters, filters = {} } = useSearch();
-  const isMobile = useIsMobile();
-  const [isOpen, setIsOpen] = useState(false);
-  const activeFilterCount = Object.values(filters).filter((value) => {
-    if (Array.isArray(value)) {
-      return value.filter(Boolean).length > 0;
-    }
-    if (typeof value === "string") {
-      return value.trim().length > 0 && value !== "all";
-    }
-    if (typeof value === "number") {
-      return value !== void 0 && value !== null && !Number.isNaN(value);
-    }
-    if (typeof value === "boolean") {
-      return value;
-    }
-    return Boolean(value);
-  }).length;
-  const FilterContent = () => /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsx("div", { className: "space-y-4", children }),
-    /* @__PURE__ */ jsx(SearchFilterActions, { onClose: () => setIsOpen(false) })
-  ] });
-  const triggerButton = /* @__PURE__ */ jsxs(
-    Button,
-    {
-      variant: "outline",
-      size: "default",
-      className: cn(
-        "relative h-10 w-10 shrink-0 px-0 sm:w-auto sm:px-4",
-        hasActiveFilters && "bg-primary/10 border-primary hover:bg-primary/15"
-      ),
-      disabled,
-      "aria-label": "Open filters",
-      children: [
-        /* @__PURE__ */ jsx(Filter, { className: "size-4" }),
-        /* @__PURE__ */ jsx("span", { className: "hidden sm:inline ml-2", children: "Filters" }),
-        activeFilterCount > 0 && /* @__PURE__ */ jsx(
-          Badge,
-          {
-            variant: "secondary",
-            className: "absolute -right-1 -top-1 flex h-5 min-w-5 items-center justify-center rounded-full bg-primary px-1 text-xs font-medium text-primary-foreground",
-            children: activeFilterCount
-          }
-        )
-      ]
-    }
-  );
-  if (isMobile) {
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs(
-        Button,
-        {
-          variant: "outline",
-          size: "default",
-          className: cn(
-            "relative h-10 w-10 shrink-0 px-0",
-            hasActiveFilters && "bg-primary/10 border-primary hover:bg-primary/15"
-          ),
-          disabled,
-          "aria-label": "Open filters",
-          onClick: () => setIsOpen(true),
-          children: [
-            /* @__PURE__ */ jsx(Filter, { className: "size-4" }),
-            activeFilterCount > 0 && /* @__PURE__ */ jsx(
-              Badge,
-              {
-                variant: "secondary",
-                className: "absolute -right-1 -top-1 flex h-5 min-w-5 items-center justify-center rounded-full bg-primary px-1 text-xs font-medium text-primary-foreground",
-                children: activeFilterCount
-              }
-            )
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        SheetWrapper,
-        {
-          open: isOpen,
-          onOpenChange: setIsOpen,
-          title,
-          description,
-          side: "bottom",
-          size: "default",
-          children: /* @__PURE__ */ jsx(FilterContent, {})
-        }
-      )
-    ] });
-  }
-  return /* @__PURE__ */ jsxs(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
-    /* @__PURE__ */ jsx(PopoverTrigger, { render: triggerButton }),
-    /* @__PURE__ */ jsx(PopoverContent, { className: "w-80 p-4 sm:w-96", align: "end", sideOffset: 8, children: /* @__PURE__ */ jsx(FilterContent, {}) })
-  ] });
-}
-function SearchActions({
-  showSearchButton = true,
-  showClearButton = true,
-  searchButtonText,
-  clearButtonText = "Clear",
-  disabled,
-  className
-}) {
-  const { handleSearch, clearSearch, searchValue, hasActiveFilters, hasActiveSearch } = useSearch();
-  const isMobile = useIsMobile();
-  const canSearch = Boolean(searchValue?.trim() || hasActiveFilters);
-  const canClear = Boolean(searchValue?.trim() || hasActiveFilters || hasActiveSearch);
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", className), children: [
-    showClearButton && canClear && (isMobile ? /* @__PURE__ */ jsx(
-      Button,
-      {
-        variant: "outline",
-        size: "icon",
-        onClick: clearSearch,
-        "aria-label": clearButtonText,
-        title: clearButtonText,
-        className: "shrink-0",
-        children: /* @__PURE__ */ jsx(RotateCcw, {})
-      }
-    ) : /* @__PURE__ */ jsx(
-      Button,
-      {
-        variant: "outline",
-        size: "default",
-        onClick: clearSearch,
-        className: "h-10 shrink-0",
-        children: clearButtonText
-      }
-    )),
-    showSearchButton && /* @__PURE__ */ jsxs(
-      Button,
-      {
-        size: "default",
-        onClick: handleSearch,
-        disabled: disabled || !canSearch,
-        className: "h-10 shrink-0 px-3 sm:px-4",
-        children: [
-          /* @__PURE__ */ jsx(
-            Search,
-            {
-              size: 16,
-              className: cn(searchButtonText ? "mr-2" : "sm:mr-2")
-            }
-          ),
-          /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: searchButtonText || "Search" })
-        ]
-      }
-    )
-  ] });
-}
-function SearchContainer({ children, className }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-2 flex-1", className), children });
-}
-var FieldContext = createContext(null);
-var Root = memo(function FieldRoot({
-  children,
-  className,
-  disabled = false,
-  invalid = false
-}) {
-  const id = useId();
-  const value = useMemo(() => ({
-    id,
-    disabled,
-    invalid
-  }), [id, disabled, invalid]);
-  return /* @__PURE__ */ jsx(FieldContext.Provider, { value, children: /* @__PURE__ */ jsx("div", { className: cn("w-full", className), children }) });
-});
-var Label = memo(function FieldLabel13({ children, className }) {
-  const ctx = useContext(FieldContext);
-  return /* @__PURE__ */ jsx(
-    "label",
-    {
-      htmlFor: ctx?.id,
-      className: cn(
-        "absolute left-3 top-0 -translate-y-1/2 bg-background px-2",
-        "text-xs font-medium text-muted-foreground z-10",
-        "group-focus-within:text-primary whitespace-nowrap",
-        ctx?.disabled && "opacity-60",
-        ctx?.invalid && "text-destructive",
-        className
-      ),
-      children
-    }
-  );
-});
-var Error2 = memo(function FieldError13({ children, className }) {
-  if (!children) return null;
-  return /* @__PURE__ */ jsx("p", { className: cn("text-xs text-destructive mt-1.5", className), children });
-});
-var Icon = memo(function FieldIcon({ children, className }) {
-  return /* @__PURE__ */ jsx("div", { className: cn(
-    "absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none z-10",
-    "text-muted-foreground",
-    className
-  ), children });
-});
-var Field13 = {
-  Root,
-  Label,
-  Error: Error2,
-  Icon
-};
-var CompactInput = forwardRef(({
-  // Form integration
-  control,
-  name,
-  description,
-  required,
-  // Basic props
-  label,
-  placeholder,
-  disabled,
-  type = "text",
-  // InputGroup addons
-  AddonLeft,
-  AddonRight,
-  // Styling
-  className,
-  inputClassName,
-  // Events
-  onValueChange,
-  // Direct usage
-  value,
-  onChange,
-  error,
-  // Valid HTML input attributes
-  autoComplete,
-  autoFocus,
-  maxLength,
-  minLength,
-  max,
-  min,
-  pattern,
-  readOnly,
-  step,
-  inputMode,
-  enterKeyHint,
-  ...props
-}, ref) => {
-  const hasInputGroup = AddonLeft || AddonRight;
-  const renderInput = (fieldValue, fieldOnChange, isDisabled, fieldError) => {
-    const inputProps = {
-      ref,
-      id: name,
-      name,
-      type,
-      disabled: isDisabled,
-      placeholder,
-      value: fieldValue || "",
-      onChange: (e) => {
-        const newValue = e.target.value;
-        fieldOnChange?.(newValue);
-        onValueChange?.(newValue);
-      },
-      className: cn(
-        "h-11",
-        fieldError && "border-destructive focus-visible:ring-destructive/20",
-        inputClassName
-      ),
-      autoComplete,
-      autoFocus,
-      maxLength,
-      minLength,
-      max,
-      min,
-      pattern,
-      readOnly,
-      step,
-      inputMode,
-      enterKeyHint,
-      ...props
-    };
-    if (hasInputGroup) {
-      return /* @__PURE__ */ jsxs(InputGroup, { children: [
-        AddonLeft && /* @__PURE__ */ jsx(InputGroupAddon, { align: "inline-start", children: AddonLeft }),
-        /* @__PURE__ */ jsx(InputGroupInput, { ...inputProps }),
-        AddonRight && /* @__PURE__ */ jsx(InputGroupAddon, { align: "inline-end", children: AddonRight })
-      ] });
-    }
-    return /* @__PURE__ */ jsx(Input, { ...inputProps });
-  };
-  if (control && name) {
-    return /* @__PURE__ */ jsx(
-      Controller,
-      {
-        name,
-        control,
-        render: ({ field, fieldState }) => /* @__PURE__ */ jsxs(Field13.Root, { className, disabled, invalid: !!fieldState?.error, children: [
-          /* @__PURE__ */ jsxs("div", { className: "relative group", children: [
-            label && /* @__PURE__ */ jsx(Field13.Label, { children: label }),
-            renderInput(field.value, field.onChange, disabled, fieldState?.error?.message)
-          ] }),
-          fieldState?.error && /* @__PURE__ */ jsx(Field13.Error, { children: fieldState.error.message }),
-          description && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-1.5", children: description })
-        ] })
-      }
-    );
-  }
-  const handleDirectChange = (newValue) => {
-    onChange?.({ target: { value: newValue } });
-    onValueChange?.(newValue);
-  };
-  return /* @__PURE__ */ jsxs(Field13.Root, { className, disabled, invalid: !!error, children: [
-    /* @__PURE__ */ jsxs("div", { className: "relative group", children: [
-      label && /* @__PURE__ */ jsx(Field13.Label, { children: label }),
-      renderInput(value, handleDirectChange, disabled, error)
-    ] }),
-    error && /* @__PURE__ */ jsx(Field13.Error, { children: error }),
-    description && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-1.5", children: description })
-  ] });
-});
-CompactInput.displayName = "CompactInput";
-var CompactTextarea = forwardRef(({
-  // Form integration
-  control,
-  name,
-  description,
-  required,
-  // Basic props
-  label,
-  placeholder,
-  disabled,
-  rows = 3,
-  // InputGroup addons
-  AddonLeft,
-  AddonRight,
-  // Styling
-  className,
-  inputClassName,
-  // Events
-  onValueChange,
-  // Direct usage
-  value,
-  onChange,
-  error,
-  // Valid HTML textarea attributes
-  cols,
-  wrap,
-  autoComplete,
-  autoFocus,
-  maxLength,
-  minLength,
-  readOnly,
-  spellCheck,
-  ...props
-}, ref) => {
-  const hasInputGroup = AddonLeft || AddonRight;
-  const renderTextarea = (fieldValue, fieldOnChange, isDisabled, fieldError) => {
-    const currentCharCount = fieldValue?.length || 0;
-    const textareaProps = {
-      ref,
-      id: name,
-      name,
-      disabled: isDisabled,
-      placeholder,
-      rows,
-      value: fieldValue || "",
-      onChange: (e) => {
-        const newValue = e.target.value;
-        fieldOnChange?.(newValue);
-        onValueChange?.(newValue);
-      },
-      className: cn(
-        "resize-none pt-3",
-        fieldError && "border-destructive focus-visible:ring-destructive/20",
-        inputClassName
-      ),
-      cols,
-      wrap,
-      autoComplete,
-      autoFocus,
-      maxLength,
-      minLength,
-      readOnly,
-      spellCheck,
-      ...props
-    };
-    if (hasInputGroup) {
-      return /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsxs(InputGroup, { children: [
-          AddonLeft && /* @__PURE__ */ jsx(InputGroupAddon, { align: "block-start", children: AddonLeft }),
-          /* @__PURE__ */ jsx(InputGroupTextarea, { ...textareaProps }),
-          AddonRight && /* @__PURE__ */ jsx(InputGroupAddon, { align: "block-end", children: AddonRight })
-        ] }),
-        maxLength && currentCharCount > 0 && /* @__PURE__ */ jsxs("div", { className: "text-xs text-muted-foreground mt-1.5 text-right", children: [
-          currentCharCount,
-          "/",
-          maxLength
-        ] })
-      ] });
-    }
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Textarea, { ...textareaProps }),
-      maxLength && currentCharCount > 0 && /* @__PURE__ */ jsxs("div", { className: "text-xs text-muted-foreground mt-1.5 text-right", children: [
-        currentCharCount,
-        "/",
-        maxLength
-      ] })
-    ] });
-  };
-  if (control && name) {
-    return /* @__PURE__ */ jsx(
-      Controller,
-      {
-        name,
-        control,
-        render: ({ field, fieldState }) => /* @__PURE__ */ jsxs(Field13.Root, { className, disabled, invalid: !!fieldState?.error, children: [
-          /* @__PURE__ */ jsxs("div", { className: "relative group", children: [
-            label && /* @__PURE__ */ jsx(Field13.Label, { children: label }),
-            renderTextarea(field.value, field.onChange, disabled, fieldState?.error?.message)
-          ] }),
-          fieldState?.error && /* @__PURE__ */ jsx(Field13.Error, { children: fieldState.error.message }),
-          description && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-1.5", children: description })
-        ] })
-      }
-    );
-  }
-  const handleDirectChange = (newValue) => {
-    onChange?.({ target: { value: newValue } });
-    onValueChange?.(newValue);
-  };
-  return /* @__PURE__ */ jsxs(Field13.Root, { className, disabled, invalid: !!error, children: [
-    /* @__PURE__ */ jsxs("div", { className: "relative group", children: [
-      label && /* @__PURE__ */ jsx(Field13.Label, { children: label }),
-      renderTextarea(value, handleDirectChange, disabled, error)
-    ] }),
-    error && /* @__PURE__ */ jsx(Field13.Error, { children: error }),
-    description && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-1.5", children: description })
-  ] });
-});
-CompactTextarea.displayName = "CompactTextarea";
-var CompactSelect = forwardRef(({
-  // Form integration
-  control,
-  name,
-  description,
-  required,
-  // Basic props
-  label,
-  placeholder = "Select option",
-  disabled,
-  items = [],
-  // Styling
-  className,
-  // Events
-  onValueChange,
-  // Direct usage
-  value,
-  error,
-  ...props
-}, ref) => {
-  if (control && name) {
-    return /* @__PURE__ */ jsx(
-      Controller,
-      {
-        name,
-        control,
-        render: ({ field, fieldState }) => /* @__PURE__ */ jsxs(Field13.Root, { disabled, invalid: !!fieldState?.error, children: [
-          /* @__PURE__ */ jsxs("div", { className: "relative group", children: [
-            label && /* @__PURE__ */ jsx(Field13.Label, { children: label }),
-            /* @__PURE__ */ jsxs(
-              Select,
-              {
-                value: field.value,
-                onValueChange: (val) => {
-                  field.onChange(val);
-                  onValueChange?.(val);
-                },
-                disabled,
-                ...props,
-                children: [
-                  /* @__PURE__ */ jsx(
-                    SelectTrigger,
-                    {
-                      ref,
-                      id: name,
-                      className: cn(
-                        "h-11",
-                        fieldState?.error && "border-destructive focus:ring-destructive/20",
-                        className
-                      ),
-                      children: /* @__PURE__ */ jsx(SelectValue, { placeholder })
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(SelectContent, { children: items.map((item) => /* @__PURE__ */ jsx(SelectItem, { value: item.value, children: item.label }, item.value)) })
-                ]
-              }
-            )
-          ] }),
-          fieldState?.error && /* @__PURE__ */ jsx(Field13.Error, { children: fieldState.error.message }),
-          description && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-1.5", children: description })
-        ] })
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs(Field13.Root, { disabled, invalid: !!error, children: [
-    /* @__PURE__ */ jsxs("div", { className: "relative group", children: [
-      label && /* @__PURE__ */ jsx(Field13.Label, { children: label }),
-      /* @__PURE__ */ jsxs(
-        Select,
-        {
-          value,
-          onValueChange,
-          disabled,
-          ...props,
-          children: [
-            /* @__PURE__ */ jsx(
-              SelectTrigger,
-              {
-                ref,
-                className: cn(
-                  "h-11",
-                  error && "border-destructive focus:ring-destructive/20",
-                  className
-                ),
-                children: /* @__PURE__ */ jsx(SelectValue, { placeholder })
-              }
-            ),
-            /* @__PURE__ */ jsx(SelectContent, { children: items.map((item) => /* @__PURE__ */ jsx(SelectItem, { value: item.value, children: item.label }, item.value)) })
-          ]
-        }
-      )
-    ] }),
-    error && /* @__PURE__ */ jsx(Field13.Error, { children: error })
-  ] });
-});
-CompactSelect.displayName = "CompactSelect";
-var CompactNumberInput = forwardRef(({
-  // Form integration
-  control,
-  name,
-  description,
-  required,
-  // Basic props
-  label,
-  placeholder,
-  disabled,
-  // Number configuration
-  min = 0,
-  max,
-  step = 1,
-  // Display options
-  prefix,
-  suffix,
-  showButtons = false,
-  buttonVariant = "ghost",
-  // Styling
-  className,
-  inputClassName,
-  labelClassName,
-  containerClassName,
-  // Events
-  onValueChange,
-  // Direct usage
-  value,
-  defaultValue,
-  onChange,
-  error,
-  ...props
-}, ref) => {
-  if (control && name) {
-    return /* @__PURE__ */ jsx(
-      Controller,
-      {
-        name,
-        control,
-        render: ({ field, fieldState }) => /* @__PURE__ */ jsx(
-          CompactNumberInputInternal,
-          {
-            ref,
-            label,
-            placeholder,
-            disabled,
-            min,
-            max,
-            step,
-            prefix,
-            suffix,
-            showButtons,
-            buttonVariant,
-            className,
-            inputClassName,
-            labelClassName,
-            containerClassName,
-            error: fieldState?.error?.message,
-            value: field.value ?? "",
-            onChange: (val) => {
-              field.onChange(val);
-              onValueChange?.(val);
-            },
-            ...props
-          }
-        )
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(
-    CompactNumberInputInternal,
-    {
-      ref,
-      label,
-      placeholder,
-      disabled,
-      min,
-      max,
-      step,
-      prefix,
-      suffix,
-      showButtons,
-      buttonVariant,
-      className,
-      inputClassName,
-      labelClassName,
-      containerClassName,
-      error,
-      value: value ?? "",
-      defaultValue,
-      onChange,
-      onValueChange,
-      ...props
-    }
-  );
-});
-var CompactNumberInputInternal = forwardRef(({
-  label,
-  placeholder,
-  min = 0,
-  max,
-  step = 1,
-  prefix,
-  suffix,
-  showButtons,
-  buttonVariant,
-  error,
-  className,
-  inputClassName,
-  labelClassName,
-  containerClassName,
-  disabled,
-  value,
-  defaultValue,
-  onChange,
-  onValueChange,
-  ...props
-}, ref) => {
-  const handleIncrement = () => {
-    const currentValue = Number(value) || 0;
-    const newValue = currentValue + step;
-    if (max === void 0 || newValue <= max) {
-      const finalValue = Number(newValue.toFixed(10));
-      onChange?.(finalValue);
-      onValueChange?.(finalValue);
-    }
-  };
-  const handleDecrement = () => {
-    const currentValue = Number(value) || 0;
-    const newValue = currentValue - step;
-    if (newValue >= min) {
-      const finalValue = Number(newValue.toFixed(10));
-      onChange?.(finalValue);
-      onValueChange?.(finalValue);
-    }
-  };
-  const handleInputChange = (e) => {
-    const val = e.target.value;
-    if (val === "") {
-      onChange?.("");
-      onValueChange?.("");
-      return;
-    }
-    const numVal = Number(val);
-    if (!isNaN(numVal)) {
-      if (min !== void 0 && numVal < min || max !== void 0 && numVal > max) {
-        return;
-      }
-      onChange?.(numVal);
-      onValueChange?.(numVal);
-    }
-  };
-  if (showButtons) {
-    return /* @__PURE__ */ jsxs(Field13.Root, { className: containerClassName, disabled, invalid: !!error, children: [
-      label && /* @__PURE__ */ jsx(Field13.Label, { className: labelClassName, children: label }),
-      /* @__PURE__ */ jsxs(InputGroup, { children: [
-        /* @__PURE__ */ jsx(InputGroupAddon, { align: "inline-start", children: /* @__PURE__ */ jsx(
-          InputGroupButton,
-          {
-            type: "button",
-            variant: buttonVariant,
-            size: "icon-sm",
-            onClick: handleDecrement,
-            disabled: disabled || Number(value) <= min,
-            children: /* @__PURE__ */ jsx(Minus, { className: "h-4 w-4" })
-          }
-        ) }),
-        /* @__PURE__ */ jsx(
-          InputGroupInput,
-          {
-            ref,
-            type: "number",
-            value,
-            defaultValue,
-            onChange: handleInputChange,
-            min,
-            max,
-            step,
-            disabled,
-            placeholder,
-            className: cn("text-center", inputClassName, className),
-            ...props
-          }
-        ),
-        /* @__PURE__ */ jsx(InputGroupAddon, { align: "inline-end", children: /* @__PURE__ */ jsx(
-          InputGroupButton,
-          {
-            type: "button",
-            variant: buttonVariant,
-            size: "icon-sm",
-            onClick: handleIncrement,
-            disabled: disabled || max !== void 0 && Number(value) >= max,
-            children: /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" })
-          }
-        ) })
-      ] }),
-      error && /* @__PURE__ */ jsx(Field13.Error, { children: error })
-    ] });
-  }
-  if (prefix || suffix) {
-    return /* @__PURE__ */ jsxs(Field13.Root, { className: containerClassName, disabled, invalid: !!error, children: [
-      label && /* @__PURE__ */ jsx(Field13.Label, { className: labelClassName, children: label }),
-      /* @__PURE__ */ jsxs(InputGroup, { children: [
-        prefix && /* @__PURE__ */ jsx(InputGroupAddon, { align: "inline-start", children: typeof prefix === "string" ? /* @__PURE__ */ jsx("span", { className: "text-xs", children: prefix }) : prefix }),
-        /* @__PURE__ */ jsx(
-          InputGroupInput,
-          {
-            ref,
-            type: "number",
-            value,
-            defaultValue,
-            onChange: handleInputChange,
-            min,
-            max,
-            step,
-            disabled,
-            placeholder,
-            className: cn(inputClassName, className),
-            ...props
-          }
-        ),
-        suffix && /* @__PURE__ */ jsx(InputGroupAddon, { align: "inline-end", children: typeof suffix === "string" ? /* @__PURE__ */ jsx("span", { className: "text-xs", children: suffix }) : suffix })
-      ] }),
-      error && /* @__PURE__ */ jsx(Field13.Error, { children: error })
-    ] });
-  }
-  return /* @__PURE__ */ jsxs(Field13.Root, { className: containerClassName, disabled, invalid: !!error, children: [
-    label && /* @__PURE__ */ jsx(Field13.Label, { className: labelClassName, children: label }),
-    /* @__PURE__ */ jsx(
-      Input,
-      {
-        ref,
-        type: "number",
-        value,
-        defaultValue,
-        onChange: handleInputChange,
-        min,
-        max,
-        step,
-        disabled,
-        placeholder,
-        className: cn(
-          "h-11 transition-all duration-200",
-          error && "border-destructive focus-visible:ring-destructive/20",
-          inputClassName,
-          className
-        ),
-        ...props
-      }
-    ),
-    error && /* @__PURE__ */ jsx(Field13.Error, { children: error })
-  ] });
-});
-CompactNumberInput.displayName = "CompactNumberInput";
-CompactNumberInputInternal.displayName = "CompactNumberInputInternal";
-var CompactTagChoice = forwardRef(({
-  // Form integration
-  control,
-  name,
-  // Display
-  label,
-  description,
-  placeholder = "Select options...",
-  required,
-  disabled,
-  // Data
-  choices = [],
-  maxSelections,
-  // Styling
-  className,
-  containerClassName,
-  labelClassName,
-  inputClassName,
-  // Direct usage
-  value: propValue = [],
-  onChange: propOnChange,
-  onValueChange,
-  error
-}, ref) => {
-  if (control && name) {
-    return /* @__PURE__ */ jsx(
-      Controller,
-      {
-        name,
-        control,
-        render: ({ field, fieldState }) => /* @__PURE__ */ jsx(
-          CompactTagChoiceInternal,
-          {
-            ref,
-            label,
-            placeholder,
-            disabled,
-            error: fieldState?.error?.message,
-            value: field.value || [],
-            onChange: (vals) => {
-              field.onChange(vals);
-              onValueChange?.(vals);
-            },
-            choices,
-            maxSelections,
-            containerClassName: cn(className, containerClassName),
-            labelClassName,
-            inputClassName
-          }
-        )
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(
-    CompactTagChoiceInternal,
-    {
-      ref,
-      label,
-      placeholder,
-      disabled,
-      value: propValue,
-      onChange: (vals) => {
-        propOnChange?.(vals);
-        onValueChange?.(vals);
-      },
-      choices,
-      maxSelections,
-      containerClassName,
-      labelClassName,
-      inputClassName,
-      className,
-      error
-    }
-  );
-});
-var CompactTagChoiceInternal = forwardRef(({
-  label,
-  placeholder,
-  disabled,
-  value = [],
-  onChange,
-  choices = [],
-  maxSelections,
-  error,
-  className,
-  containerClassName,
-  labelClassName,
-  inputClassName
-}, ref) => {
-  const [open, setOpen] = useState(false);
-  const triggerRef = useRef(null);
-  const availableChoices = choices.filter((c) => !value.includes(c.value));
-  const addChoice = (choiceValue) => {
-    if (value.includes(choiceValue)) return;
-    if (maxSelections && value.length >= maxSelections) return;
-    const updated = [...value, choiceValue];
-    onChange?.(updated);
-  };
-  const removeChoice = (choiceValue) => {
-    const updated = value.filter((v) => v !== choiceValue);
-    onChange?.(updated);
-  };
-  return /* @__PURE__ */ jsxs(Field13.Root, { className: containerClassName, disabled, invalid: !!error, children: [
-    label && /* @__PURE__ */ jsx(Field13.Label, { className: labelClassName, children: label }),
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: cn(
-          "min-h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm",
-          "ring-offset-background focus-within:ring-1 focus-within:ring-primary/20",
-          "hover:border-primary/50 transition-all duration-200",
-          error && "border-destructive focus-within:ring-destructive/20",
-          disabled && "opacity-50 cursor-not-allowed",
-          inputClassName
-        ),
-        ref,
-        children: [
-          /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1 mb-2", children: value.map((val) => {
-            const choice = choices.find((c) => c.value === val);
-            return /* @__PURE__ */ jsxs(Badge, { variant: "secondary", className: "flex items-center gap-1 px-2 py-1", children: [
-              /* @__PURE__ */ jsx("span", { children: choice?.label ?? val }),
-              !disabled && /* @__PURE__ */ jsx(
-                Button,
-                {
-                  type: "button",
-                  variant: "ghost",
-                  size: "sm",
-                  className: "h-auto p-0 text-muted-foreground hover:text-foreground",
-                  onClick: (e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    removeChoice(val);
-                  },
-                  children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
-                }
-              )
-            ] }, val);
-          }) }),
-          !disabled && availableChoices.length > 0 && (!maxSelections || value.length < maxSelections) && /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
-            /* @__PURE__ */ jsx(
-              PopoverTrigger,
-              {
-                render: /* @__PURE__ */ jsxs(
-                  Button,
-                  {
-                    ref: triggerRef,
-                    type: "button",
-                    variant: "ghost",
-                    className: cn(
-                      "inline-flex items-center justify-center h-auto p-1 rounded-md text-sm font-medium transition-colors",
-                      "text-muted-foreground hover:text-foreground hover:bg-accent",
-                      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-                    ),
-                    onClick: (e) => {
-                      e.preventDefault();
-                      e.stopPropagation();
-                      setOpen(true);
-                    },
-                    children: [
-                      /* @__PURE__ */ jsx(Plus, { className: "h-3 w-3 mr-1" }),
-                      value.length === 0 ? placeholder : "Add more..."
-                    ]
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ jsx(PopoverContent, { className: "w-[220px] p-0", align: "start", children: /* @__PURE__ */ jsxs("div", { className: "p-1", children: [
-              availableChoices.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-2 py-3 text-sm text-muted-foreground text-center", children: "No options available" }) : /* @__PURE__ */ jsx("div", { className: "space-y-1", children: availableChoices.map((choice) => /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  onClick: (e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    addChoice(choice.value);
-                  },
-                  className: "flex items-center justify-between px-2 py-2 text-sm rounded-sm hover:bg-accent hover:text-accent-foreground cursor-pointer",
-                  children: [
-                    /* @__PURE__ */ jsx("span", { children: choice.label }),
-                    value.includes(choice.value) && /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" })
-                  ]
-                },
-                choice.value
-              )) }),
-              /* @__PURE__ */ jsx("div", { className: "border-t px-2 py-2 text-xs text-muted-foreground", children: "Click to select \u2022 Click outside to close" })
-            ] }) })
-          ] }),
-          maxSelections && /* @__PURE__ */ jsxs("div", { className: "text-xs text-muted-foreground mt-1", children: [
-            value.length,
-            "/",
-            maxSelections,
-            " selected"
-          ] })
-        ]
-      }
-    ),
-    error && /* @__PURE__ */ jsx(Field13.Error, { children: error })
-  ] });
-});
-CompactTagChoice.displayName = "CompactTagChoice";
-CompactTagChoiceInternal.displayName = "CompactTagChoiceInternal";
-function generateSlug2(text) {
-  if (!text) return "";
-  return text.toLowerCase().trim().replace(/[^\w\s-]/g, "").replace(/\s+/g, "-").replace(/-+/g, "-").replace(/^-+|-+$/g, "");
-}
-var CompactSlugField = forwardRef(({
-  // Form integration
+    to: range?.to ? range.to instanceof Date ? range.to.toISOString() : range.to : void 0
+  })
+};
+function DateRangeInput({
   control,
   name,
+  label,
   description,
+  placeholder = "Select date range",
   required,
-  // Basic props
-  label,
-  placeholder = "my-page-slug",
   disabled,
-  // Icon support
-  icon,
-  // Slug generation
-  sourceValue,
-  onGenerate,
-  // Styling
   className,
-  inputClassName,
-  // Events
+  labelClassName,
+  buttonClassName,
+  calendarClassName,
+  minDate,
+  maxDate,
+  disabledDates,
+  disabledDays,
   onValueChange,
-  // Direct usage
-  value,
-  onChange,
-  error,
-  ...props
-}, ref) => {
-  const handleGenerate = (currentValue, fieldOnChange) => {
-    const newSlug = onGenerate ? onGenerate(sourceValue || "") : generateSlug2(sourceValue || "");
-    fieldOnChange(newSlug);
-    onValueChange?.(newSlug);
+  validateDateRange,
+  clearErrors,
+  descriptionComponent,
+  allowClear = true,
+  showBadge = false,
+  Icon = CalendarIcon,
+  transform = defaultTransform
+}) {
+  const [localDateRange, setLocalDateRange] = useState({
+    from: void 0,
+    to: void 0
+  });
+  const formatDateRange = (range) => {
+    if (!range || !range.from && !range.to) return "";
+    const fromDate = range.from instanceof Date ? range.from : range.from ? new Date(range.from) : null;
+    const toDate2 = range.to instanceof Date ? range.to : range.to ? new Date(range.to) : null;
+    const fromFormatted = fromDate && isValid(fromDate) ? format(fromDate, "MMM d") : "";
+    const toFormatted = toDate2 && isValid(toDate2) ? format(toDate2, "MMM d") : "";
+    if (fromFormatted && toFormatted) {
+      return `${fromFormatted} - ${toFormatted}`;
+    } else if (fromFormatted) {
+      return `From ${fromFormatted}`;
+    } else if (toFormatted) {
+      return `Until ${toFormatted}`;
+    }
+    return "";
   };
-  const renderInput = (fieldValue, fieldOnChange, isDisabled, fieldState) => {
-    const inputProps = {
-      ref,
-      id: name,
-      type: "text",
-      disabled: isDisabled,
-      placeholder,
-      value: fieldValue || "",
-      onChange: (e) => {
-        const newValue = e.target.value;
-        fieldOnChange(newValue);
-        onValueChange?.(newValue);
-      },
-      className: cn(
-        "h-11",
-        fieldState?.error && "border-destructive focus-visible:ring-destructive/20",
-        inputClassName
-      ),
-      ...props
-    };
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      icon && /* @__PURE__ */ jsx(Field13.Icon, { children: icon }),
-      /* @__PURE__ */ jsxs(InputGroup, { children: [
-        /* @__PURE__ */ jsx(InputGroupInput, { ...inputProps, className: cn(inputProps.className, icon && "pl-9") }),
-        /* @__PURE__ */ jsx(InputGroupAddon, { align: "inline-end", children: /* @__PURE__ */ jsxs(
-          InputGroupButton,
-          {
-            type: "button",
-            size: "sm",
-            onClick: () => handleGenerate(fieldValue, fieldOnChange),
-            disabled: isDisabled || !sourceValue,
-            title: "Generate slug from name",
-            children: [
-              /* @__PURE__ */ jsx(Wand2, { className: "h-4 w-4" }),
-              "Generate"
-            ]
-          }
-        ) })
-      ] })
-    ] });
+  const isDateDisabled = (date) => {
+    if (!date || !isValid(date)) return true;
+    if (disabled) return true;
+    if (minDate && date < minDate) return true;
+    if (maxDate && date > maxDate) return true;
+    if (disabledDates?.some((d) => d.getTime() === date.getTime())) return true;
+    if (disabledDays?.includes(date.getDay())) return true;
+    return false;
   };
-  if (control && name) {
+  const handleDateRangeSelect = (range, field) => {
+    if (disabled) return;
+    const safeRange = range || { from: void 0, to: void 0 };
+    if (validateDateRange && !validateDateRange(safeRange)) {
+      return;
+    }
+    if (field) {
+      const transformedValue = transform.output(safeRange);
+      field.onChange(transformedValue);
+    } else {
+      setLocalDateRange(safeRange);
+    }
+    onValueChange?.(safeRange);
+    if (clearErrors && name) {
+      clearErrors(name);
+    }
+  };
+  const handleClear = (field, e) => {
+    e.stopPropagation();
+    const emptyRange = { from: void 0, to: void 0 };
+    if (field) {
+      field.onChange(emptyRange);
+    } else {
+      setLocalDateRange(emptyRange);
+    }
+    onValueChange?.(emptyRange);
+    if (clearErrors && name) {
+      clearErrors(name);
+    }
+  };
+  if (control) {
     return /* @__PURE__ */ jsx(
       Controller,
       {
-        name,
         control,
-        render: ({ field, fieldState }) => /* @__PURE__ */ jsxs(Field13.Root, { className, disabled, invalid: !!fieldState?.error, children: [
-          /* @__PURE__ */ jsxs("div", { className: "relative group", children: [
-            label && /* @__PURE__ */ jsx(Field13.Label, { children: label }),
-            renderInput(field.value, field.onChange, disabled, fieldState)
-          ] }),
-          fieldState?.error && /* @__PURE__ */ jsx(Field13.Error, { children: fieldState.error.message }),
-          description && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-1.5", children: description })
-        ] })
+        name,
+        render: ({ field, fieldState }) => {
+          const dateRange = transform.input(field.value);
+          return /* @__PURE__ */ jsxs(
+            Field,
+            {
+              className: cn("w-full", className),
+              "data-invalid": !!fieldState.error,
+              children: [
+                label && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-2", children: [
+                  /* @__PURE__ */ jsxs(FieldLabel, { className: cn("grow", labelClassName), children: [
+                    label,
+                    required && /* @__PURE__ */ jsx("span", { className: "text-destructive ml-1", children: "*" })
+                  ] }),
+                  /* @__PURE__ */ jsx("span", { className: "text-muted-foreground shrink-0", children: /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" }) })
+                ] }),
+                /* @__PURE__ */ jsx(
+                  DateRangePopover,
+                  {
+                    dateRange,
+                    placeholder,
+                    disabled,
+                    buttonClassName,
+                    calendarClassName,
+                    allowClear,
+                    showBadge,
+                    Icon,
+                    formatDateRange,
+                    isDateDisabled,
+                    handleDateRangeSelect: (range) => handleDateRangeSelect(range, field),
+                    handleClear: (e) => handleClear(field, e),
+                    minDate,
+                    maxDate
+                  }
+                ),
+                description && !descriptionComponent && /* @__PURE__ */ jsx(FieldDescription, { children: description }),
+                descriptionComponent && /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: descriptionComponent }),
+                /* @__PURE__ */ jsx(
+                  FieldError,
+                  {
+                    errors: fieldState.error ? [fieldState.error] : void 0
+                  }
+                )
+              ]
+            }
+          );
+        }
       }
     );
   }
-  const handleDirectChange = (newValue) => {
-    onChange?.({ target: { value: newValue } });
-    onValueChange?.(newValue);
-  };
-  return /* @__PURE__ */ jsxs(Field13.Root, { className, disabled, invalid: !!error, children: [
-    /* @__PURE__ */ jsxs("div", { className: "relative group", children: [
-      label && /* @__PURE__ */ jsx(Field13.Label, { children: label }),
-      renderInput(value, handleDirectChange, disabled, { error: error ? { message: error } : void 0 })
+  return /* @__PURE__ */ jsxs("div", { className: cn("w-full", className), children: [
+    label && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: cn("text-sm font-medium grow", labelClassName), children: [
+        label,
+        required && /* @__PURE__ */ jsx("span", { className: "text-destructive ml-1", children: "*" })
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "text-muted-foreground shrink-0", children: /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" }) })
     ] }),
-    error && /* @__PURE__ */ jsx(Field13.Error, { children: error }),
-    description && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-1.5", children: description })
+    /* @__PURE__ */ jsx(
+      DateRangePopover,
+      {
+        dateRange: localDateRange,
+        placeholder,
+        disabled,
+        buttonClassName,
+        calendarClassName,
+        allowClear,
+        showBadge,
+        Icon,
+        formatDateRange,
+        isDateDisabled,
+        handleDateRangeSelect: (range) => handleDateRangeSelect(range),
+        handleClear: (e) => handleClear(null, e),
+        minDate,
+        maxDate
+      }
+    ),
+    description && /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground mt-1", children: description }),
+    descriptionComponent && /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: descriptionComponent })
   ] });
-});
-CompactSlugField.displayName = "CompactSlugField";
+}
 var WEEKDAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
 function EventCalendar({
   events = [],
@@ -6959,57 +6186,275 @@ function CalendarWithDetail({
     }
   );
 }
-var backgrounds = {
-  default: "bg-background",
-  muted: "bg-muted",
-  primary: "bg-primary text-primary-foreground",
-  transparent: "bg-transparent"
+var ANIMATION_CLASSES = {
+  fadeIn: "animate-fade-in",
+  fadeInUp: "animate-fade-in-up",
+  scaleIn: "animate-scale-in",
+  slideInLeft: "animate-slide-in-left",
+  slideInRight: "animate-slide-in-right",
+  slideInUp: "animate-slide-in-up",
+  slideInDown: "animate-slide-in-down"
 };
-var paddings = {
-  none: "",
-  sm: "py-8 md:py-12",
-  md: "py-12 md:py-16",
-  lg: "py-16 md:py-24",
-  xl: "py-24 md:py-32"
+var SLIDE_MAP = {
+  left: "slideInLeft",
+  right: "slideInRight",
+  up: "slideInUp",
+  down: "slideInDown"
 };
-function Section({
-  id,
+function useInView(ref, options = {}) {
+  const { margin = "0px", once = true, enabled = true } = options;
+  const [inView, setInView] = useState(false);
+  useEffect(() => {
+    if (!enabled) return;
+    const el = ref.current;
+    if (!el) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setInView(true);
+          if (once) observer.unobserve(el);
+        } else if (!once) {
+          setInView(false);
+        }
+      },
+      { rootMargin: margin }
+    );
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [enabled, margin, once]);
+  return inView;
+}
+function useAnimationState(opts) {
+  const ref = useRef(null);
+  const shouldAnimate = !opts.disabled;
+  const isInView = useInView(ref, {
+    margin: opts.inViewMargin,
+    once: opts.once,
+    enabled: !!opts.inView && shouldAnimate
+  });
+  const active = shouldAnimate && (!opts.inView || isInView);
+  return { ref, shouldAnimate, active };
+}
+function animTimingStyle(delay, duration) {
+  if (delay === 0 && duration === 600) return void 0;
+  return {
+    ...duration !== 600 ? { animationDuration: `${duration}ms` } : {},
+    ...delay > 0 ? { animationDelay: `${delay}ms` } : {}
+  };
+}
+function AnimateBase({
+  animation,
   children,
+  delay = 0,
+  duration = 600,
+  inView = false,
+  inViewMargin,
+  once = true,
+  disabled = false,
   className,
-  background = "default",
-  padding = "sm"
+  as = "div"
 }) {
-  return /* @__PURE__ */ jsx(
-    "section",
+  const { ref, shouldAnimate, active } = useAnimationState({
+    inView,
+    inViewMargin,
+    once,
+    disabled
+  });
+  return createElement(
+    as,
     {
-      id,
-      className: cn(backgrounds[background], paddings[padding], className),
-      children
-    }
+      ref,
+      "data-fluid-animate": shouldAnimate ? "" : void 0,
+      className: cn(
+        shouldAnimate && "opacity-0",
+        active && ANIMATION_CLASSES[animation],
+        className
+      ),
+      style: active ? animTimingStyle(delay, duration) : void 0
+    },
+    children
   );
 }
-var maxWidthClasses = {
-  sm: "max-w-screen-sm",
-  md: "max-w-screen-md",
-  lg: "max-w-screen-lg",
-  xl: "max-w-screen-xl",
-  "2xl": "max-w-screen-2xl",
-  "4xl": "max-w-4xl",
-  "5xl": "max-w-5xl",
-  "6xl": "max-w-6xl",
-  "7xl": "max-w-7xl",
-  full: "max-w-full"
-};
-function Container({
+function FadeIn(props) {
+  return /* @__PURE__ */ jsx(AnimateBase, { animation: "fadeIn", ...props });
+}
+function FadeInUp(props) {
+  return /* @__PURE__ */ jsx(AnimateBase, { animation: "fadeInUp", ...props });
+}
+function ScaleIn(props) {
+  return /* @__PURE__ */ jsx(AnimateBase, { animation: "scaleIn", ...props });
+}
+function SlideIn({ direction = "left", ...props }) {
+  return /* @__PURE__ */ jsx(AnimateBase, { animation: SLIDE_MAP[direction], ...props });
+}
+function StaggerChildren({
   children,
+  animation = "fadeInUp",
+  staggerDelay = 100,
+  initialDelay = 0,
+  duration = 600,
+  inView = false,
+  inViewMargin,
+  once = true,
+  disabled = false,
+  className,
+  childClassName,
+  as = "div"
+}) {
+  const { ref, shouldAnimate, active } = useAnimationState({
+    inView,
+    inViewMargin,
+    once,
+    disabled
+  });
+  const items = Children.toArray(children);
+  return createElement(
+    as,
+    { ref, className },
+    items.map((child, i) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-fluid-animate": shouldAnimate ? "" : void 0,
+        className: cn(
+          shouldAnimate && "opacity-0",
+          active && ANIMATION_CLASSES[animation],
+          childClassName
+        ),
+        style: active ? animTimingStyle(initialDelay + i * staggerDelay, duration) : void 0,
+        children: child
+      },
+      i
+    ))
+  );
+}
+function AnimatedText({
+  text,
+  as = "div",
+  animation = "fadeInUp",
+  splitBy = "word",
+  staggerDelay = 80,
+  delay = 0,
+  duration = 600,
+  inView = false,
+  inViewMargin,
+  once = true,
+  disabled = false,
+  className,
+  segmentClassName
+}) {
+  const { ref, shouldAnimate, active } = useAnimationState({
+    inView,
+    inViewMargin,
+    once,
+    disabled
+  });
+  const segments = splitBy === "word" ? text.split(" ") : text.split("");
+  let animIndex = 0;
+  return createElement(
+    as,
+    { ref, className },
+    segments.map((segment, i) => {
+      if (splitBy === "character" && segment === " ") {
+        return /* @__PURE__ */ jsx(Fragment$1, { children: "\xA0" }, i);
+      }
+      const idx = animIndex++;
+      return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+        splitBy === "word" && i > 0 && " ",
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-fluid-animate": shouldAnimate ? "" : void 0,
+            className: cn(
+              "inline-block",
+              shouldAnimate && "opacity-0",
+              active && ANIMATION_CLASSES[animation],
+              segmentClassName
+            ),
+            style: active ? animTimingStyle(delay + idx * staggerDelay, duration) : void 0,
+            children: segment
+          }
+        )
+      ] }, i);
+    })
+  );
+}
+function easeOutCubic(t) {
+  return 1 - Math.pow(1 - t, 3);
+}
+function AnimatedCounter({
+  from = 0,
+  to,
+  duration = 2e3,
+  delay = 0,
+  locale,
+  prefix,
+  suffix,
+  decimals = 0,
+  formatter,
+  inView = false,
+  inViewMargin,
+  once = true,
+  disabled = false,
   className,
-  maxWidth = "7xl"
+  as = "span"
 }) {
-  const isFullWidth = maxWidth === "full";
-  const baseClass = isFullWidth ? "w-full px-4 sm:px-6 lg:px-10" : "mx-auto px-4 sm:px-6 lg:px-8";
-  return /* @__PURE__ */ jsx("div", { className: cn(baseClass, !isFullWidth && maxWidthClasses[maxWidth], className), children });
+  const ref = useRef(null);
+  const isInView = useInView(ref, {
+    margin: inViewMargin,
+    once,
+    enabled: inView && !disabled
+  });
+  const active = !disabled && (!inView || isInView);
+  const [count, setCount] = useState(from);
+  const hasStarted = useRef(false);
+  useEffect(() => {
+    if (disabled) {
+      setCount(to);
+      return;
+    }
+    if (!active || hasStarted.current) return;
+    hasStarted.current = true;
+    if (typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      setCount(to);
+      return;
+    }
+    const timeout = setTimeout(() => {
+      const start = performance.now();
+      const step = (now) => {
+        const elapsed = now - start;
+        const progress = Math.min(elapsed / duration, 1);
+        const eased = easeOutCubic(progress);
+        const current = from + (to - from) * eased;
+        setCount(
+          decimals > 0 ? Number(current.toFixed(decimals)) : Math.round(current)
+        );
+        if (progress < 1) requestAnimationFrame(step);
+      };
+      requestAnimationFrame(step);
+    }, delay);
+    return () => clearTimeout(timeout);
+  }, [active, disabled, from, to, duration, delay, decimals]);
+  const formatValue = (v) => {
+    if (formatter) return formatter(v);
+    if (locale)
+      return v.toLocaleString(locale, {
+        minimumFractionDigits: decimals,
+        maximumFractionDigits: decimals
+      });
+    if (decimals > 0) return v.toFixed(decimals);
+    return String(v);
+  };
+  return createElement(
+    as,
+    { ref, className },
+    /* @__PURE__ */ jsxs(Fragment, { children: [
+      prefix,
+      formatValue(count),
+      suffix
+    ] })
+  );
 }
 
-export { AccordionSection, ActionDropdown, ActionTooltip, ApiPagination, ButtonTooltip, CalendarDayDetail, CalendarWithDetail, CardWrapper, CheckboxDropdown, CheckboxInput, ClientSubmitButton, CollapsibleCard, CollapsibleSection, CollapsibleWrapper, ComboboxInput, CompactInput, CompactNumberInput, CompactSelect, CompactSlugField, CompactTagChoice, CompactTextarea, ConfirmDialog, ConfirmSheet, Container, CopyButton, CopyCodeBlock, CopyText, CustomPagination, DataCard, DataTable, DateInput, DateRangeFilter, DateRangeInput, DeleteConfirmDialog, DialogWrapper, DisplayHeading, DraggableCard, DropdownWrapper, DynamicTabs, ErrorState, ErrorStateInline, EventCalendar, FacebookIcon, FaqAccordion, FeatureItem, Field13 as Field, FormDialog, FormErrorSummary, FormInput, FormSheet, FormTextarea, GoogleIcon, IconItemMedia, IconTooltip, InfoAlert, InfoRow, InfoTooltip, InstagramIcon, LoadingCard, ModeToggle, PaginationInfo, PhoneInput, Pill, PillAvatar, PillAvatarGroup, PillButton, PillDelta, PillIcon, PillIndicator, PillStatus, RadioDropdown, RadioInput, ResponsiveSplitLayout, search_exports as Search, SearchProvider, Section, SelectDropdown, SelectInput, SheetWrapper, SimpleTable, SkeletonCard, SkeletonGrid, SkeletonList, SkeletonTable, SlugField, StatsCard, SwitchInput, TabContent, TabTrigger, TableWrapper, TabsWrapper, TagChoiceInput, TagInput, Thumbnail, TooltipWrapper, TwitterXIcon, WhatsAppIcon, buildFilterParams, buildListingStatusParams, buildSearchParams, clearSearchAndFilterParams, cn, generateSlug, generateSlug2 as generateSlugCompact, getApiParams, useBaseSearch, useIsMobile, useMediaQuery, useScrollDetection, useSearch };
+export { AccordionSection, ActionDropdown, ActionTooltip, AnimatedCounter, AnimatedText, ApiPagination, ButtonTooltip, CalendarDayDetail, CalendarWithDetail, CardWrapper, CheckboxDropdown, CheckboxInput, CollapsibleCard, CollapsibleSection, CollapsibleWrapper, ComboboxInput, ConfirmDialog, CopyButton, CopyCodeBlock, CopyText, CustomPagination, DEFAULT_COUNTRIES, DataCard, DataTable, DateInput, DateRangeFilter, DateRangeInput, DeleteConfirmDialog, DialogWrapper, DisplayHeading, DraggableCard, DropdownWrapper, DynamicTabs, EmptyState, EmptyStateNoData, EmptyStateNoResults, EmptyStateNotFound, ErrorState, ErrorStateInline, EventCalendar, FacebookIcon, FadeIn, FadeInUp, FaqAccordion, FeatureItem, FeatureList, FormDialog, FormErrorSummary, FormInput, FormTextarea, GoogleIcon, IconItemMedia, IconTooltip, InfoAlert, InfoRow, InfoTooltip, InstagramIcon, LoadingCard, LoadingOverlay, LoadingState, ModeToggle, PaginationInfo, PhoneInput, Pill, PillAvatar, PillAvatarGroup, PillButton, PillDelta, PillIcon, PillIndicator, PillStatus, RadioDropdown, RadioInput, ResponsiveSplitLayout, ScaleIn, SelectDropdown, SelectInput, SimpleTable, SkeletonCard, SkeletonGrid, SkeletonList, SkeletonTable, SlideIn, SlugField, StaggerChildren, StatsCard, StatusBanner, StepContent, Stepper, SwitchInput, TTL, TabContent, TabTrigger, TableWrapper, TabsWrapper, TagChoiceInput, TagInput, Thumbnail, TooltipWrapper, TwitterXIcon, WhatsAppIcon, buildFilterParams, buildListingStatusParams, buildSearchParams, clearSearchAndFilterParams, clearStorage, generateSlug, generateUUID, getApiParams, getStorageItem, isStorageEmpty, removeStorageItem, setStorageItem, storage, useBaseSearch, useCopyToClipboard, useDebounce, useDebouncedCallback, useInView, useLocalStorage, useMediaQuery, useScrollDetection };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map