@akira-io/ui 1.0.0 → 1.1.0

package/dist/index.js

@@ -1,17 +1,30 @@
-import { Label, Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, Popover, PopoverTrigger, PopoverContent, Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, Select, SelectTrigger, SelectContent, SelectItem, Calendar } from './chunk-42BJBH56.js';
-export { Calendar, CalendarDayButton, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Label, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea } from './chunk-42BJBH56.js';
-import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from './chunk-5MQWJVM2.js';
-export { Avatar, AvatarFallback, AvatarImage, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Collapsible, CollapsibleContent, CollapsibleTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Icon, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, useSidebar } from './chunk-5MQWJVM2.js';
-import { cn, focusRing, elevatedSurface, nestedRadius, nestedSurfaceReset, nestedEdgeToEdge, glassControl, controlFill, Button, modalSurface, recessedSurface, menuSurface, Input, floatingSurface, panelSurface, buttonVariants } from './chunk-POE7OYET.js';
-export { Button, Input, buttonVariants, cn, controlFill, elevatedSurface, focusRing, menuHighlight, nestedEdgeToEdge, nestedRadius, nestedSurfaceReset, recessedSurface, surface } from './chunk-POE7OYET.js';
-import { ChevronDown, Minus, AlertCircle, ChevronRight, ArrowLeft, ArrowRight, CheckIcon, ChevronsUpDown, Check, ChevronRightIcon, CircleIcon, MoreVertical, Search, X, Plus, ArrowUpDown, ChevronLeft, CalendarRange, ChevronDownIcon, ChevronLeftIcon, MoreHorizontalIcon, Loader2Icon, OctagonXIcon, TriangleAlertIcon, InfoIcon, CircleCheckIcon, PlusCircle } from 'lucide-react';
+import { Popover, PopoverTrigger, PopoverContent, Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, Select, SelectTrigger, SelectContent, SelectItem, Calendar, FieldContext, FieldError, useField, ConfirmDialog } from './chunk-UUTXPPRN.js';
+export { Alert, AlertDescription, AlertTitle, Calendar, CalendarDayButton, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ConfirmDialog, FieldError, FloatingSheet, FloatingSheetBody, FloatingSheetFooter, FloatingSheetStack, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, confirmDialogDefaultLabels, floatingSheetDefaultLabels, useField } from './chunk-UUTXPPRN.js';
+export { CopyButton, copyButtonLabels } from './chunk-JAHTUAQL.js';
+import { toggleVariants } from './chunk-LKSM3WLK.js';
+export { Toggle, toggleVariants } from './chunk-LKSM3WLK.js';
+import { Label } from './chunk-6QM5BA7B.js';
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Label } from './chunk-6QM5BA7B.js';
+import { useAppearance } from './chunk-IQMRJXEO.js';
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, cardVariants } from './chunk-SA5LM2GD.js';
+import { useUiLabels } from './chunk-5AJFQ6C4.js';
+export { UiLocaleProvider, useUiLabels, useUiLocale } from './chunk-5AJFQ6C4.js';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuItem } from './chunk-MNGNBEYN.js';
+export { Avatar, AvatarFallback, AvatarImage, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Collapsible, CollapsibleContent, CollapsibleTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Icon, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, useSidebar } from './chunk-MNGNBEYN.js';
+export { Separator } from './chunk-UUEWFCKT.js';
+import { Input } from './chunk-6X4TKSF6.js';
+export { Input } from './chunk-6X4TKSF6.js';
+import { cn, focusRing, nestedRadius, nestedSurfaceReset, nestedEdgeToEdge, elevatedSurface, modalSurface, Button, menuSurface, fieldSurface, floatingSurface, panelSurface, buttonVariants, Spinner } from './chunk-DSD7MVLL.js';
+export { Button, Spinner, buttonVariants, cn, controlFill, elevatedSurface, focusRing, menuHighlight, nestedEdgeToEdge, nestedRadius, nestedSurfaceReset, recessedSurface, spinnerVariants, surface } from './chunk-DSD7MVLL.js';
+import * as React3 from 'react';
+import { useState, useRef, useCallback, useEffect, useMemo, useId } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import * as React2 from 'react';
-import { useState, useMemo, useId, useEffect } from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
-import { cva } from 'class-variance-authority';
+import { ChevronDown, SunIcon, MoonIcon, MonitorIcon, ArrowLeft, ArrowRight, CheckIcon, ChevronsUpDown, Check, ChevronRightIcon, CircleIcon, MoreVertical, SearchX, Search, X, Plus, ArrowUpDown, ChevronLeft, ChevronRight, CalendarIcon, CalendarRange, ChevronDownIcon, ChevronLeftIcon, MoreHorizontalIcon, EyeOff, Eye, TriangleAlert, Loader2Icon, OctagonXIcon, TriangleAlertIcon, InfoIcon, CircleCheckIcon, PlusCircle } from 'lucide-react';
 import { AlertDialog as AlertDialog$1, AspectRatio as AspectRatio$1, ContextMenu as ContextMenu$1, HoverCard as HoverCard$1, Menubar as Menubar$1, Progress as Progress$1, RadioGroup as RadioGroup$1, Slider as Slider$1 } from 'radix-ui';
+import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
 import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
 import useEmblaCarousel from 'embla-carousel-react';
 import * as RechartsPrimitive from 'recharts';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
@@ -19,82 +32,100 @@ import { useReactTable, getPaginationRowModel, getFilteredRowModel, getSortedRow
 import { format } from 'date-fns';
 import { Drawer as Drawer$1 } from 'vaul';
 import { useFormContext, FormProvider, Controller } from 'react-hook-form';
-import { OTPInput, OTPInputContext } from 'input-otp';
 import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
 import * as ResizablePrimitive from 'react-resizable-panels';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 import { Toaster as Toaster$1 } from 'sonner';
 export { toast } from 'sonner';
-import * as TogglePrimitive from '@radix-ui/react-toggle';
-import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
 
-function ConfirmDialog({
-  open,
-  onOpenChange,
-  title = "Confirm Action",
-  description = "Are you sure you want to continue? This action cannot be undone.",
-  confirmText = "Confirm",
-  cancelText = "Cancel",
-  variant = "destructive",
-  processing = false,
-  onConfirm,
-  onCancel
-}) {
-  const handleConfirm = () => {
-    if (processing) {
-      return;
+var AUTOSAVE_DELAY = 700;
+function shallowEqual(a, b) {
+  if (Object.is(a, b)) {
+    return true;
+  }
+  if (typeof a !== "object" || typeof b !== "object" || a === null || b === null) {
+    return false;
+  }
+  const keys = Object.keys(a);
+  if (keys.length !== Object.keys(b).length) {
+    return false;
+  }
+  return keys.every(
+    (key) => Object.is(
+      a[key],
+      b[key]
+    )
+  );
+}
+function messageOf(reason) {
+  if (reason instanceof Error) {
+    return reason.message;
+  }
+  return typeof reason === "string" ? reason : void 0;
+}
+function useAutosave(values, onSave, options = {}) {
+  const { delay = AUTOSAVE_DELAY, enabled = true, isEqual } = options;
+  const [status, setStatus] = useState("idle");
+  const [error, setError] = useState(void 0);
+  const latest = useRef(values);
+  const dispatched = useRef(values);
+  const timer = useRef(void 0);
+  const issued = useRef(0);
+  const settled = useRef(0);
+  const mounted = useRef(true);
+  const save = useRef(onSave);
+  const equal = useRef(isEqual ?? shallowEqual);
+  latest.current = values;
+  save.current = onSave;
+  equal.current = isEqual ?? shallowEqual;
+  const run = useCallback(async () => {
+    const payload = latest.current;
+    const ticket = issued.current += 1;
+    setStatus("saving");
+    setError(void 0);
+    try {
+      await save.current(payload);
+      if (ticket < settled.current || !mounted.current) {
+        return;
+      }
+      settled.current = ticket;
+      setStatus("saved");
+    } catch (reason) {
+      if (ticket < settled.current || !mounted.current) {
+        return;
+      }
+      settled.current = ticket;
+      setError(messageOf(reason));
+      setStatus("error");
     }
-    onConfirm();
-    onOpenChange(false);
-  };
-  const handleCancel = () => {
-    if (processing) {
+  }, []);
+  const flush = useCallback(() => {
+    clearTimeout(timer.current);
+    dispatched.current = latest.current;
+    void run();
+  }, [run]);
+  const reset = useCallback(() => {
+    clearTimeout(timer.current);
+    dispatched.current = latest.current;
+    setError(void 0);
+    setStatus("idle");
+  }, []);
+  useEffect(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+      clearTimeout(timer.current);
+    };
+  }, []);
+  useEffect(() => {
+    if (!enabled || equal.current(values, dispatched.current)) {
       return;
     }
-    onCancel?.();
-    onOpenChange(false);
-  };
-  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-md p-0", "data-slot": "confirm-dialog", children: [
-    /* @__PURE__ */ jsxs(DialogHeader, { className: "p-6 md:p-8", children: [
-      /* @__PURE__ */ jsx("div", { className: "mb-6 flex justify-center", children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: cn(
-            "size-16 rounded-3xl shadow-xl flex items-center justify-center",
-            variant === "destructive" ? "bg-destructive text-destructive-foreground shadow-destructive/20" : "bg-primary text-primary-foreground shadow-primary/20"
-          ),
-          children: /* @__PURE__ */ jsx(AlertCircle, { className: "h-8 w-8" })
-        }
-      ) }),
-      /* @__PURE__ */ jsx(DialogTitle, { children: title }),
-      /* @__PURE__ */ jsx(DialogDescription, { children: description })
-    ] }),
-    /* @__PURE__ */ jsx(DialogFooter, { className: "p-6 md:p-8", children: /* @__PURE__ */ jsxs("div", { className: "gap-4 sm:grid-cols-2 grid w-full", children: [
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          type: "button",
-          variant: "ghost",
-          disabled: processing,
-          onClick: handleCancel,
-          className: "text-muted-foreground",
-          children: cancelText
-        }
-      ),
-      /* @__PURE__ */ jsxs(
-        Button,
-        {
-          variant,
-          disabled: processing,
-          onClick: handleConfirm,
-          children: [
-            confirmText,
-            /* @__PURE__ */ jsx(ChevronRight, { className: "ml-2 h-5 w-5" })
-          ]
-        }
-      )
-    ] }) })
-  ] }) });
+    dispatched.current = values;
+    clearTimeout(timer.current);
+    timer.current = setTimeout(() => void run(), delay);
+  }, [values, delay, enabled, run]);
+  return { status, error, flush, reset };
 }
 function useConfirmDialog() {
   const [isOpen, setIsOpen] = useState(false);
@@ -140,7 +171,7 @@ function Accordion({
     }
   );
 }
-var AccordionItem = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AccordionItem = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AccordionPrimitive.Item,
   {
     "data-slot": "accordion-item",
@@ -150,7 +181,7 @@ var AccordionItem = React2.forwardRef(({ className, ...props }, ref) => /* @__PU
   }
 ));
 AccordionItem.displayName = "AccordionItem";
-var AccordionTrigger = React2.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs(
+var AccordionTrigger = React3.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs(
   AccordionPrimitive.Trigger,
   {
     "data-slot": "accordion-trigger",
@@ -167,7 +198,7 @@ var AccordionTrigger = React2.forwardRef(({ className, children, ...props }, ref
   }
 ) }));
 AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
-var AccordionContent = React2.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+var AccordionContent = React3.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
   AccordionPrimitive.Content,
   {
     "data-slot": "accordion-content",
@@ -178,64 +209,6 @@ var AccordionContent = React2.forwardRef(({ className, children, ...props }, ref
   }
 ));
 AccordionContent.displayName = AccordionPrimitive.Content.displayName;
-var alertVariants = cva(
-  `${elevatedSurface} relative w-full px-5 py-4 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current`,
-  {
-    variants: {
-      variant: {
-        default: "bg-card/60 text-card-foreground",
-        destructive: "border-destructive/30 bg-destructive/10 text-destructive [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/80"
-      }
-    },
-    defaultVariants: {
-      variant: "default"
-    }
-  }
-);
-function Alert({
-  className,
-  variant,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "alert",
-      role: "alert",
-      className: cn(alertVariants({ variant }), className),
-      ...props
-    }
-  );
-}
-function AlertTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "alert-title",
-      className: cn(
-        "min-h-4 font-medium tracking-tight col-start-2 line-clamp-1",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function AlertDescription({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "alert-description",
-      className: cn(
-        "gap-1 text-sm [&_p]:leading-relaxed col-start-2 grid justify-items-start text-muted-foreground",
-        className
-      ),
-      ...props
-    }
-  );
-}
 function AlertDialog({
   ...props
 }) {
@@ -407,6 +380,167 @@ function AlertDialogCancel({
     }
   ) });
 }
+var ToggleGroupContext = React3.createContext({
+  size: "default",
+  variant: "default"
+});
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    ToggleGroupPrimitive.Root,
+    {
+      "data-slot": "toggle-group",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn(
+        "group/toggle-group data-[variant=outline]:shadow-xs rounded-2xl flex items-center",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(ToggleGroupContext.Provider, { value: { variant, size }, children })
+    }
+  );
+}
+function ToggleGroupItem({
+  className,
+  children,
+  variant,
+  size,
+  ...props
+}) {
+  const context = React3.useContext(ToggleGroupContext);
+  return /* @__PURE__ */ jsx(
+    ToggleGroupPrimitive.Item,
+    {
+      "data-slot": "toggle-group-item",
+      "data-variant": context.variant || variant,
+      "data-size": context.size || size,
+      className: cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size
+        }),
+        "min-w-0 first:rounded-l-2xl last:rounded-r-2xl shrink-0 rounded-none shadow-none focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+var appearanceToggleDefaultLabels = {
+  groupLabel: "Appearance",
+  lightLabel: "Light",
+  darkLabel: "Dark",
+  systemLabel: "System"
+};
+var OPTIONS = [
+  { value: "light", icon: SunIcon, label: (labels) => labels.lightLabel },
+  { value: "dark", icon: MoonIcon, label: (labels) => labels.darkLabel },
+  {
+    value: "system",
+    icon: MonitorIcon,
+    label: (labels) => labels.systemLabel
+  }
+];
+function AppearanceToggle({
+  className,
+  variant = "segmented",
+  labels: labelOverrides,
+  ...props
+}) {
+  const labels = useUiLabels(
+    "appearanceToggle",
+    appearanceToggleDefaultLabels,
+    labelOverrides
+  );
+  const { appearance, updateAppearance } = useAppearance();
+  const current = OPTIONS.find((option) => option.value === appearance);
+  const CurrentIcon = current?.icon ?? MonitorIcon;
+  if (variant === "menu") {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-slot": "appearance-toggle",
+        "data-variant": "menu",
+        className: cn("inline-flex", className),
+        ...props,
+        children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+          /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              "data-slot": "appearance-toggle-trigger",
+              variant: "ghost",
+              size: "icon-sm",
+              "aria-label": labels.groupLabel,
+              children: /* @__PURE__ */ jsx(CurrentIcon, { "aria-hidden": "true" })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", children: /* @__PURE__ */ jsx(
+            DropdownMenuRadioGroup,
+            {
+              value: appearance,
+              onValueChange: (value) => updateAppearance(value),
+              children: OPTIONS.map((option) => /* @__PURE__ */ jsxs(
+                DropdownMenuRadioItem,
+                {
+                  "data-slot": "appearance-toggle-item",
+                  value: option.value,
+                  children: [
+                    /* @__PURE__ */ jsx(option.icon, { "aria-hidden": "true" }),
+                    option.label(labels)
+                  ]
+                },
+                option.value
+              ))
+            }
+          ) })
+        ] })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "appearance-toggle",
+      "data-variant": "segmented",
+      className: cn("inline-flex", className),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        ToggleGroup,
+        {
+          type: "single",
+          size: "sm",
+          value: appearance,
+          "aria-label": labels.groupLabel,
+          onValueChange: (value) => {
+            if (value) {
+              updateAppearance(value);
+            }
+          },
+          children: OPTIONS.map((option) => /* @__PURE__ */ jsxs(
+            ToggleGroupItem,
+            {
+              "data-slot": "appearance-toggle-item",
+              value: option.value,
+              "aria-label": option.label(labels),
+              children: [
+                /* @__PURE__ */ jsx(option.icon, { "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx("span", { children: option.label(labels) })
+              ]
+            },
+            option.value
+          ))
+        }
+      )
+    }
+  );
+}
 function AspectRatio({
   ...props
 }) {
@@ -444,103 +578,9 @@ function Badge({
     }
   );
 }
-var cardVariants = cva(
-  `relative flex flex-col gap-6 overflow-hidden text-card-foreground ${elevatedSurface}`,
-  {
-    variants: {
-      variant: {
-        default: "bg-card/60",
-        subtle: "border-border/60 bg-card/40",
-        solid: "bg-card"
-      },
-      interactive: {
-        true: "transition-colors duration-200 hover:border-foreground/20",
-        false: ""
-      },
-      padding: { none: "py-0", sm: "py-4", md: "py-6", lg: "py-8" }
-    },
-    defaultVariants: {
-      variant: "default",
-      interactive: false,
-      padding: "md"
-    }
-  }
-);
-function Card({
-  className,
-  variant,
-  interactive,
-  padding,
-  inset = false,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "card",
-      "data-inset": inset || void 0,
-      className: cn(
-        cardVariants({ variant, interactive, padding }),
-        inset && recessedSurface,
-        className
-      ),
-      ...props
-    }
-  );
-}
-function CardHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "card-header",
-      className: cn("gap-1.5 px-6 flex flex-col", className),
-      ...props
-    }
-  );
-}
-function CardTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "card-title",
-      className: cn("font-semibold leading-none", className),
-      ...props
-    }
-  );
-}
-function CardDescription({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "card-description",
-      className: cn("text-sm text-muted-foreground", className),
-      ...props
-    }
-  );
-}
-function CardContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "card-content",
-      className: cn("px-6", className),
-      ...props
-    }
-  );
-}
-function CardFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "card-footer",
-      className: cn("px-6 flex items-center", className),
-      ...props
-    }
-  );
-}
-var CarouselContext = React2.createContext(null);
+var CarouselContext = React3.createContext(null);
 function useCarousel() {
-  const context = React2.useContext(CarouselContext);
+  const context = React3.useContext(CarouselContext);
   if (!context) {
     throw new Error("useCarousel must be used within a <Carousel />");
   }
@@ -562,20 +602,20 @@ function Carousel({
     },
     plugins
   );
-  const [canScrollPrev, setCanScrollPrev] = React2.useState(false);
-  const [canScrollNext, setCanScrollNext] = React2.useState(false);
-  const onSelect = React2.useCallback((api2) => {
+  const [canScrollPrev, setCanScrollPrev] = React3.useState(false);
+  const [canScrollNext, setCanScrollNext] = React3.useState(false);
+  const onSelect = React3.useCallback((api2) => {
     if (!api2) return;
     setCanScrollPrev(api2.canScrollPrev());
     setCanScrollNext(api2.canScrollNext());
   }, []);
-  const scrollPrev = React2.useCallback(() => {
+  const scrollPrev = React3.useCallback(() => {
     api?.scrollPrev();
   }, [api]);
-  const scrollNext = React2.useCallback(() => {
+  const scrollNext = React3.useCallback(() => {
     api?.scrollNext();
   }, [api]);
-  const handleKeyDown = React2.useCallback(
+  const handleKeyDown = React3.useCallback(
     (event) => {
       if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") {
         return;
@@ -589,11 +629,11 @@ function Carousel({
     },
     [scrollPrev, scrollNext]
   );
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     if (!api || !setApi) return;
     setApi(api);
   }, [api, setApi]);
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     if (!api) return;
     onSelect(api);
     api.on("reInit", onSelect);
@@ -732,9 +772,9 @@ function CarouselNext({
 }
 var THEMES = { light: "", dark: ".dark" };
 var INITIAL_DIMENSION = { width: 320, height: 200 };
-var ChartContext = React2.createContext(null);
+var ChartContext = React3.createContext(null);
 function useChart() {
-  const context = React2.useContext(ChartContext);
+  const context = React3.useContext(ChartContext);
   if (!context) {
     throw new Error("useChart must be used within a <ChartContainer />");
   }
@@ -748,7 +788,7 @@ function ChartContainer({
   initialDimension = INITIAL_DIMENSION,
   ...props
 }) {
-  const uniqueId = React2.useId();
+  const uniqueId = React3.useId();
   const chartId = `chart-${id ?? uniqueId.replace(/:/g, "")}`;
   return /* @__PURE__ */ jsx(ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ jsxs(
     "div",
@@ -818,7 +858,7 @@ function ChartTooltipContent({
   labelKey
 }) {
   const { config } = useChart();
-  const tooltipLabel = React2.useMemo(() => {
+  const tooltipLabel = React3.useMemo(() => {
     if (hideLabel || !payload?.length) {
       return null;
     }
@@ -1011,17 +1051,27 @@ function Checkbox({
     }
   );
 }
+var comboboxDefaultLabels = {
+  placeholder: "Select an option",
+  searchPlaceholder: "Search...",
+  emptyText: "No results."
+};
 function Combobox({
   id,
   value,
   options,
   onChange,
-  placeholder = "Select an option",
-  searchPlaceholder = "Search...",
-  emptyText = "No results.",
+  placeholder,
+  searchPlaceholder,
+  emptyText,
   disabled = false,
   invalid = false
 }) {
+  const labels = useUiLabels("combobox", comboboxDefaultLabels, {
+    placeholder,
+    searchPlaceholder,
+    emptyText
+  });
   const [open, setOpen] = useState(false);
   const selected = options.find((option) => option.value === value);
   return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
@@ -1040,7 +1090,7 @@ function Combobox({
           invalid && "border-destructive ring-destructive"
         ),
         children: [
-          selected ? selected.label : placeholder,
+          selected ? selected.label : labels.placeholder,
           /* @__PURE__ */ jsx(ChevronsUpDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })
         ]
       }
@@ -1054,12 +1104,12 @@ function Combobox({
           /* @__PURE__ */ jsx(
             CommandInput,
             {
-              placeholder: searchPlaceholder,
+              placeholder: labels.searchPlaceholder,
               className: "h-11"
             }
           ),
           /* @__PURE__ */ jsxs(CommandList, { children: [
-            /* @__PURE__ */ jsx(CommandEmpty, { children: emptyText }),
+            /* @__PURE__ */ jsx(CommandEmpty, { children: labels.emptyText }),
             /* @__PURE__ */ jsx(CommandGroup, { children: options.map((option) => /* @__PURE__ */ jsxs(
               CommandItem,
               {
@@ -1304,13 +1354,16 @@ function ContextMenuShortcut({
     }
   );
 }
+var dataTableFacetedFilterDefaultLabels = {
+  noOptionsLabel: "No options."
+};
 function FilterPopover({
   label,
   options,
   selected,
   onToggle,
   width,
-  noOptionsLabel = "No options."
+  noOptionsLabel
 }) {
   return /* @__PURE__ */ jsxs(Popover, { children: [
     /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
@@ -1365,6 +1418,11 @@ function FacetedFilter({
   filter,
   noOptionsLabel
 }) {
+  const labels = useUiLabels(
+    "dataTableFacetedFilter",
+    dataTableFacetedFilterDefaultLabels,
+    { noOptionsLabel }
+  );
   const selected = new Set(column?.getFilterValue() ?? []);
   const toggle = (value) => {
     const next = new Set(selected);
@@ -1384,7 +1442,7 @@ function FacetedFilter({
       selected,
       onToggle: toggle,
       width: "w-[220px]",
-      noOptionsLabel
+      noOptionsLabel: labels.noOptionsLabel
     }
   );
 }
@@ -1394,6 +1452,11 @@ function ServerFacetedFilter({
   onChange,
   noOptionsLabel
 }) {
+  const labels = useUiLabels(
+    "dataTableFacetedFilter",
+    dataTableFacetedFilterDefaultLabels,
+    { noOptionsLabel }
+  );
   const selectedSet = new Set(selected);
   const toggle = (value) => {
     const next = new Set(selectedSet);
@@ -1412,7 +1475,7 @@ function ServerFacetedFilter({
       selected: selectedSet,
       onToggle: toggle,
       width: "w-[240px]",
-      noOptionsLabel
+      noOptionsLabel: labels.noOptionsLabel
     }
   );
 }
@@ -1452,18 +1515,96 @@ function RowActionsMenu({
     }
   );
 }
-var Table = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    "data-slot": "table-container",
-    className: cn(
-      elevatedSurface,
-      nestedSurfaceReset,
-      nestedEdgeToEdge,
-      "relative w-full overflow-hidden bg-card"
-    ),
-    children: /* @__PURE__ */ jsx(
-      "div",
+var emptyStateLabels = {
+  title: "Nothing to show"
+};
+function EmptyState({
+  icon: Icon2 = SearchX,
+  title = emptyStateLabels.title,
+  description,
+  actions,
+  compact = false,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "empty-state",
+      "data-compact": compact || void 0,
+      className: cn(
+        "flex h-full w-full flex-col items-center justify-center text-center",
+        compact ? "gap-2 px-4 py-6" : "gap-3 px-6 py-12",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-slot": "empty-state-icon",
+            className: cn(
+              "flex shrink-0 items-center justify-center rounded-full bg-surface-recessed text-muted-foreground",
+              compact ? "size-8" : "size-10"
+            ),
+            children: /* @__PURE__ */ jsx(Icon2, { className: compact ? "size-4" : "size-5" })
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "max-w-md flex flex-col",
+              compact ? "gap-0.5" : "gap-1"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                "p",
+                {
+                  "data-slot": "empty-state-title",
+                  className: cn(
+                    "font-semibold text-foreground",
+                    compact ? "text-sm" : "text-base"
+                  ),
+                  children: title
+                }
+              ),
+              description && /* @__PURE__ */ jsx(
+                "p",
+                {
+                  "data-slot": "empty-state-description",
+                  className: "text-sm font-medium text-muted-foreground",
+                  children: description
+                }
+              )
+            ]
+          }
+        ),
+        actions && /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-slot": "empty-state-actions",
+            className: cn(
+              "gap-2 flex flex-wrap items-center justify-center",
+              compact ? "mt-1" : "mt-2"
+            ),
+            children: actions
+          }
+        )
+      ]
+    }
+  );
+}
+var Table = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    "data-slot": "table-container",
+    className: cn(
+      elevatedSurface,
+      nestedSurfaceReset,
+      nestedEdgeToEdge,
+      "relative w-full overflow-hidden bg-card"
+    ),
+    children: /* @__PURE__ */ jsx(
+      "div",
       {
         className: cn(
           nestedRadius,
@@ -1484,9 +1625,9 @@ var Table = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   }
 ));
 Table.displayName = "Table";
-var TableHeader = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("[&_tr]:border-b", className), ...props }));
+var TableHeader = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("[&_tr]:border-b", className), ...props }));
 TableHeader.displayName = "TableHeader";
-var TableBody = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableBody = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "tbody",
   {
     ref,
@@ -1495,7 +1636,7 @@ var TableBody = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 TableBody.displayName = "TableBody";
-var TableFooter = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableFooter = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "tfoot",
   {
     ref,
@@ -1507,7 +1648,7 @@ var TableFooter = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 TableFooter.displayName = "TableFooter";
-var TableRow = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableRow = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "tr",
   {
     ref,
@@ -1519,7 +1660,7 @@ var TableRow = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 TableRow.displayName = "TableRow";
-var TableHead = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableHead = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "th",
   {
     ref,
@@ -1531,7 +1672,7 @@ var TableHead = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 TableHead.displayName = "TableHead";
-var TableCell = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableCell = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "td",
   {
     ref,
@@ -1543,7 +1684,7 @@ var TableCell = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 TableCell.displayName = "TableCell";
-var TableCaption = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableCaption = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "caption",
   {
     ref,
@@ -1568,11 +1709,20 @@ function pageRange(current, last) {
   pages.push(last);
   return pages;
 }
+var dataTableDefaultLabels = {
+  searchPlaceholder: "Search...",
+  emptyLabel: "No results.",
+  createLabel: "New",
+  clearFiltersLabel: "Clear filters",
+  paginationLabel: (page, pages) => `Page ${page} of ${pages}`,
+  noOptionsLabel: "No options.",
+  totalLabel: (total) => `${total.toLocaleString("en-US")} records`
+};
 function DataTable({
   columns,
   data,
   searchKey,
-  searchPlaceholder = "Search...",
+  searchPlaceholder,
   pageSize = 10,
   pageSizeOptions = [10, 25, 50, 100],
   onPageSizeChange,
@@ -1584,11 +1734,11 @@ function DataTable({
   onClearFilters,
   toolbarExtra,
   toolbarAction,
-  emptyLabel = "No results.",
-  clearFiltersLabel = "Clear filters",
-  paginationLabel = (page, pages) => `Page ${page} of ${pages}`,
-  noOptionsLabel = "No options.",
-  totalLabel = (total2) => `${total2.toLocaleString("en-US")} records`,
+  emptyLabel,
+  clearFiltersLabel,
+  paginationLabel,
+  noOptionsLabel,
+  totalLabel,
   renderRow,
   onRowClick,
   isRowActive,
@@ -1601,8 +1751,17 @@ function DataTable({
   total,
   onPageChange,
   onCreate,
-  createLabel = "New"
-}) {
+  createLabel
+}) {
+  const labels = useUiLabels("dataTable", dataTableDefaultLabels, {
+    searchPlaceholder,
+    emptyLabel,
+    createLabel,
+    clearFiltersLabel,
+    paginationLabel,
+    noOptionsLabel,
+    totalLabel
+  });
   const [sorting, setSorting] = useState([]);
   const [globalFilter, setGlobalFilter] = useState("");
   const [columnFilters, setColumnFilters] = useState([]);
@@ -1669,7 +1828,7 @@ function DataTable({
               {
                 value: serverSearch ? searchValue ?? "" : globalFilter,
                 onChange: (e) => serverSearch ? onSearchChange?.(e.target.value) : setGlobalFilter(e.target.value),
-                placeholder: searchPlaceholder,
+                placeholder: labels.searchPlaceholder,
                 className: "h-11 rounded-2xl pl-11 font-medium focus:shadow-lg border-none bg-muted/50 focus:bg-muted"
               }
             )
@@ -1679,7 +1838,7 @@ function DataTable({
             {
               column: table.getColumn(filter.columnId),
               filter,
-              noOptionsLabel
+              noOptionsLabel: labels.noOptionsLabel
             },
             filter.columnId
           )),
@@ -1689,7 +1848,7 @@ function DataTable({
               filter,
               selected: filterValues?.[filter.paramKey] ?? [],
               onChange: (values) => onFilterChange?.(filter.paramKey, values),
-              noOptionsLabel
+              noOptionsLabel: labels.noOptionsLabel
             },
             filter.paramKey
           )),
@@ -1708,7 +1867,7 @@ function DataTable({
               },
               className: "h-11 rounded-2xl",
               children: [
-                clearFiltersLabel,
+                labels.clearFiltersLabel,
                 /* @__PURE__ */ jsx(X, { className: "ml-1 size-4" })
               ]
             }
@@ -1717,7 +1876,7 @@ function DataTable({
             Button,
             {
               onClick: onCreate,
-              "aria-label": createLabel,
+              "aria-label": labels.createLabel,
               size: "icon",
               className: "size-11 rounded-2xl shrink-0 cursor-pointer bg-primary text-primary-foreground hover:bg-primary/90",
               children: /* @__PURE__ */ jsx(Plus, { className: "size-5" })
@@ -1787,8 +1946,8 @@ function DataTable({
             TableCell,
             {
               colSpan: tableColumns.length,
-              className: "h-24 text-sm font-medium text-center text-muted-foreground italic",
-              children: emptyLabel
+              className: "h-24 p-0",
+              children: /* @__PURE__ */ jsx(EmptyState, { compact: true, title: labels.emptyLabel })
             }
           ) }) })
         ] }),
@@ -1814,8 +1973,8 @@ function DataTable({
               }
             ),
             /* @__PURE__ */ jsxs("span", { className: "text-xs font-medium text-muted-foreground", children: [
-              paginationLabel(currentPage, lastPage),
-              total !== void 0 && ` \xB7 ${totalLabel(total)}`
+              labels.paginationLabel(currentPage, lastPage),
+              total !== void 0 && ` \xB7 ${labels.totalLabel(total)}`
             ] })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "gap-1.5 flex items-center", children: [
@@ -1869,69 +2028,224 @@ function DataTable({
     }
   );
 }
+function CalendarPopover({
+  open,
+  onOpenChange,
+  trigger,
+  align = "start",
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsx(
+      PopoverContent,
+      {
+        "data-slot": "calendar-popover",
+        className: cn("p-2 w-auto", className),
+        align,
+        sideOffset: 4,
+        collisionPadding: 16,
+        children
+      }
+    )
+  ] });
+}
+var datePickerDefaultLabels = {
+  placeholder: "Pick a date",
+  dateFormat: "dd MMM yy",
+  clearLabel: "Clear date"
+};
+var triggerClasses = `h-11 px-4 text-sm font-medium flex w-full cursor-pointer items-center gap-2 text-left transition-all disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 ${fieldSurface} ${focusRing}`;
+function boundaries(minDate, maxDate, disabledDays) {
+  const matchers = [];
+  if (minDate) {
+    matchers.push({ before: minDate });
+  }
+  if (maxDate) {
+    matchers.push({ after: maxDate });
+  }
+  if (disabledDays) {
+    matchers.push(disabledDays);
+  }
+  return matchers;
+}
+function DatePicker(props) {
+  const {
+    id,
+    value,
+    defaultValue,
+    onChange,
+    minDate,
+    maxDate,
+    disabledDays,
+    disabled = false,
+    clearable = true,
+    invalid = false,
+    formatDate,
+    placeholder,
+    dateFormat,
+    clearLabel,
+    className
+  } = props;
+  const labels = useUiLabels("datePicker", datePickerDefaultLabels, {
+    placeholder,
+    dateFormat,
+    clearLabel
+  });
+  const [open, setOpen] = useState(false);
+  const [ownValue, setOwnValue] = useState(defaultValue);
+  const isControlled = "value" in props;
+  const selected = isControlled ? value : ownValue;
+  const showClear = clearable && !disabled && selected !== void 0;
+  const label = selected ? formatDate?.(selected) ?? format(selected, labels.dateFormat) : labels.placeholder;
+  function commit(next) {
+    if (!isControlled) {
+      setOwnValue(next);
+    }
+    onChange?.(next);
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "date-picker",
+      className: cn("relative w-full", className),
+      children: [
+        /* @__PURE__ */ jsx(
+          CalendarPopover,
+          {
+            open,
+            onOpenChange: setOpen,
+            trigger: /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                id,
+                "data-slot": "date-picker-trigger",
+                disabled,
+                "aria-invalid": invalid || void 0,
+                className: cn(triggerClasses, showClear && "pr-11"),
+                children: [
+                  /* @__PURE__ */ jsx(CalendarIcon, { className: "size-4 shrink-0 opacity-60" }),
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: cn(
+                        "truncate",
+                        !selected && "text-muted-foreground"
+                      ),
+                      children: label
+                    }
+                  )
+                ]
+              }
+            ),
+            children: /* @__PURE__ */ jsx(
+              Calendar,
+              {
+                mode: "single",
+                autoFocus: true,
+                selected,
+                defaultMonth: selected ?? minDate,
+                startMonth: minDate,
+                endMonth: maxDate,
+                disabled: boundaries(minDate, maxDate, disabledDays),
+                onSelect: (date) => {
+                  if (!date) {
+                    return;
+                  }
+                  commit(date);
+                  setOpen(false);
+                },
+                className: "rounded-2xl bg-transparent"
+              }
+            )
+          }
+        ),
+        showClear && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "data-slot": "date-picker-clear",
+            "aria-label": labels.clearLabel,
+            onClick: () => commit(void 0),
+            className: `size-7 rounded-xl right-2 absolute top-1/2 inline-flex -translate-y-1/2 cursor-pointer items-center justify-center text-muted-foreground hover:text-foreground ${focusRing}`,
+            children: /* @__PURE__ */ jsx(X, { className: "size-3.5" })
+          }
+        )
+      ]
+    }
+  );
+}
 function parse(value) {
   return value ? /* @__PURE__ */ new Date(`${value}T00:00:00`) : void 0;
 }
+var dateRangeFilterDefaultLabels = {
+  emptyLabel: "Date range",
+  dateFormat: "dd MMM yy"
+};
 function DateRangeFilter({
   from,
   to,
   onChange,
-  emptyLabel = "Date range",
-  dateFormat = "dd MMM yy"
+  emptyLabel,
+  dateFormat
 }) {
+  const labels = useUiLabels(
+    "dateRangeFilter",
+    dateRangeFilterDefaultLabels,
+    { emptyLabel, dateFormat }
+  );
   const [open, setOpen] = useState(false);
   const selected = from || to ? { from: parse(from), to: parse(to) } : void 0;
-  const label = from ? to && to !== from ? `${format(parse(from), dateFormat)} - ${format(parse(to), dateFormat)}` : format(parse(from), dateFormat) : emptyLabel;
-  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
-      Button,
-      {
-        variant: "outline",
-        "data-slot": "date-range-filter",
-        className: "h-11 rounded-2xl cursor-pointer border-dashed border-border",
-        children: [
-          /* @__PURE__ */ jsx(CalendarRange, { className: "mr-2 size-4" }),
-          label,
-          (from || to) && /* @__PURE__ */ jsx(
-            "span",
-            {
-              role: "button",
-              tabIndex: 0,
-              onClick: (event) => {
-                event.stopPropagation();
-                onChange({ from: void 0, to: void 0 });
-              },
-              className: "ml-2 inline-flex",
-              children: /* @__PURE__ */ jsx(X, { className: "size-3.5 opacity-60 hover:opacity-100" })
-            }
-          )
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ jsx(
-      PopoverContent,
-      {
-        className: "p-2 w-auto",
-        align: "end",
-        sideOffset: 4,
-        collisionPadding: 16,
-        children: /* @__PURE__ */ jsx(
-          Calendar,
-          {
-            mode: "range",
-            numberOfMonths: 2,
-            defaultMonth: parse(from),
-            selected,
-            onSelect: (range) => onChange({
-              from: range?.from ? format(range.from, "yyyy-MM-dd") : void 0,
-              to: range?.to ? format(range.to, "yyyy-MM-dd") : void 0
-            }),
-            className: "rounded-2xl bg-transparent"
-          }
-        )
-      }
-    )
-  ] });
+  const label = from ? to && to !== from ? `${format(parse(from), labels.dateFormat)} - ${format(parse(to), labels.dateFormat)}` : format(parse(from), labels.dateFormat) : labels.emptyLabel;
+  return /* @__PURE__ */ jsx(
+    CalendarPopover,
+    {
+      open,
+      onOpenChange: setOpen,
+      align: "end",
+      trigger: /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "outline",
+          "data-slot": "date-range-filter",
+          className: "h-11 rounded-2xl cursor-pointer border-dashed border-border",
+          children: [
+            /* @__PURE__ */ jsx(CalendarRange, { className: "mr-2 size-4" }),
+            label,
+            (from || to) && /* @__PURE__ */ jsx(
+              "span",
+              {
+                role: "button",
+                tabIndex: 0,
+                onClick: (event) => {
+                  event.stopPropagation();
+                  onChange({ from: void 0, to: void 0 });
+                },
+                className: "ml-2 inline-flex",
+                children: /* @__PURE__ */ jsx(X, { className: "size-3.5 opacity-60 hover:opacity-100" })
+              }
+            )
+          ]
+        }
+      ),
+      children: /* @__PURE__ */ jsx(
+        Calendar,
+        {
+          mode: "range",
+          numberOfMonths: 2,
+          defaultMonth: parse(from),
+          selected,
+          onSelect: (range) => onChange({
+            from: range?.from ? format(range.from, "yyyy-MM-dd") : void 0,
+            to: range?.to ? format(range.to, "yyyy-MM-dd") : void 0
+          }),
+          className: "rounded-2xl bg-transparent"
+        }
+      )
+    }
+  );
 }
 function Drawer({
   ...props
@@ -2046,21 +2360,158 @@ function DrawerDescription({
     }
   );
 }
-function FieldError({ message }) {
-  if (!message) {
-    return null;
-  }
+function Field({
+  className,
+  children,
+  id,
+  orientation = "vertical",
+  error,
+  invalid,
+  required = false,
+  ...props
+}) {
+  const generatedId = React3.useId();
+  const fieldId = id ?? generatedId;
+  const [hasDescription, setHasDescription] = React3.useState(false);
+  const isInvalid = invalid ?? Boolean(error);
+  const field = React3.useMemo(
+    () => ({
+      controlId: fieldId,
+      descriptionId: `${fieldId}-description`,
+      errorId: `${fieldId}-error`,
+      orientation,
+      invalid: isInvalid,
+      required,
+      hasDescription,
+      setHasDescription
+    }),
+    [fieldId, orientation, isInvalid, required, hasDescription]
+  );
+  return /* @__PURE__ */ jsx(FieldContext.Provider, { value: field, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "field",
+      "data-orientation": orientation,
+      "data-invalid": isInvalid ? "true" : void 0,
+      className: cn(
+        "group/field",
+        orientation === "horizontal" ? "gap-x-4 gap-y-1 grid grid-cols-[1fr_auto] items-center" : "gap-2 flex flex-col",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(FieldError, { message: error })
+      ]
+    }
+  ) });
+}
+function FieldGroup({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "field-group",
+      className: cn("gap-6 flex w-full flex-col", className),
+      ...props
+    }
+  );
+}
+function FieldLabel({
+  className,
+  children,
+  requiredLabel = "Required",
+  ...props
+}) {
+  const { controlId, invalid, required } = useField();
+  return /* @__PURE__ */ jsxs(
+    Label,
+    {
+      "data-slot": "field-label",
+      htmlFor: controlId,
+      className: cn(
+        "gap-1 flex items-center group-data-[orientation=horizontal]/field:col-start-1 group-data-[orientation=horizontal]/field:row-start-1",
+        invalid && "text-destructive",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        required ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "data-slot": "field-required",
+              "aria-hidden": "true",
+              className: "text-destructive",
+              children: "*"
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: requiredLabel })
+        ] }) : null
+      ]
+    }
+  );
+}
+function FieldDescription({
+  className,
+  ...props
+}) {
+  const { descriptionId, setHasDescription } = useField();
+  React3.useEffect(() => {
+    setHasDescription(true);
+    return () => setHasDescription(false);
+  }, [setHasDescription]);
   return /* @__PURE__ */ jsx(
     "p",
     {
-      className: "ml-1 text-xs font-medium text-destructive",
-      "data-slot": "field-error",
-      children: message
+      id: descriptionId,
+      "data-slot": "field-description",
+      className: cn(
+        "ml-1 text-xs font-medium text-muted-foreground group-data-[orientation=horizontal]/field:col-start-1 group-data-[orientation=horizontal]/field:row-start-2",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldControl({
+  className,
+  ...props
+}) {
+  const {
+    controlId,
+    descriptionId,
+    errorId,
+    invalid,
+    required,
+    hasDescription
+  } = useField();
+  const requiredProps = required ? { required: true } : {};
+  const describedBy = [
+    hasDescription ? descriptionId : null,
+    invalid ? errorId : null
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(
+    Slot,
+    {
+      "data-slot": "field-control",
+      id: controlId,
+      "aria-describedby": describedBy || void 0,
+      "aria-invalid": invalid ? true : void 0,
+      ...requiredProps,
+      className: cn(
+        "group-data-[orientation=horizontal]/field:col-start-2 group-data-[orientation=horizontal]/field:row-span-2 group-data-[orientation=horizontal]/field:row-start-1 group-data-[orientation=horizontal]/field:justify-self-end",
+        className
+      ),
+      ...props
     }
   );
 }
 var Form = FormProvider;
-var FormFieldContext = React2.createContext(
+var FormFieldContext = React3.createContext(
   {}
 );
 var FormField = ({
@@ -2069,8 +2520,8 @@ var FormField = ({
   return /* @__PURE__ */ jsx(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx(Controller, { ...props }) });
 };
 var useFormField = () => {
-  const fieldContext = React2.useContext(FormFieldContext);
-  const itemContext = React2.useContext(FormItemContext);
+  const fieldContext = React3.useContext(FormFieldContext);
+  const itemContext = React3.useContext(FormItemContext);
   const { getFieldState, formState } = useFormContext();
   const fieldState = getFieldState(fieldContext.name, formState);
   if (!fieldContext) {
@@ -2086,11 +2537,11 @@ var useFormField = () => {
     ...fieldState
   };
 };
-var FormItemContext = React2.createContext(
+var FormItemContext = React3.createContext(
   {}
 );
-var FormItem = React2.forwardRef(({ className, ...props }, ref) => {
-  const id = React2.useId();
+var FormItem = React3.forwardRef(({ className, ...props }, ref) => {
+  const id = React3.useId();
   return /* @__PURE__ */ jsx(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx(
     "div",
     {
@@ -2102,7 +2553,7 @@ var FormItem = React2.forwardRef(({ className, ...props }, ref) => {
   ) });
 });
 FormItem.displayName = "FormItem";
-var FormLabel = React2.forwardRef(({ className, ...props }, ref) => {
+var FormLabel = React3.forwardRef(({ className, ...props }, ref) => {
   const { error, formItemId } = useFormField();
   return /* @__PURE__ */ jsx(
     Label,
@@ -2115,7 +2566,7 @@ var FormLabel = React2.forwardRef(({ className, ...props }, ref) => {
   );
 });
 FormLabel.displayName = "FormLabel";
-var FormControl = React2.forwardRef(({ ...props }, ref) => {
+var FormControl = React3.forwardRef(({ ...props }, ref) => {
   const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
   return /* @__PURE__ */ jsx(
     Slot,
@@ -2129,7 +2580,7 @@ var FormControl = React2.forwardRef(({ ...props }, ref) => {
   );
 });
 FormControl.displayName = "FormControl";
-var FormDescription = React2.forwardRef(({ className, ...props }, ref) => {
+var FormDescription = React3.forwardRef(({ className, ...props }, ref) => {
   const { formDescriptionId } = useFormField();
   return /* @__PURE__ */ jsx(
     "p",
@@ -2142,7 +2593,7 @@ var FormDescription = React2.forwardRef(({ className, ...props }, ref) => {
   );
 });
 FormDescription.displayName = "FormDescription";
-var FormMessage = React2.forwardRef(({ className, children, ...props }, ref) => {
+var FormMessage = React3.forwardRef(({ className, children, ...props }, ref) => {
   const { error, formMessageId } = useFormField();
   const body = error ? String(error?.message ?? "") : children;
   if (!body) {
@@ -2193,47 +2644,6 @@ function HoverCardContent({
     }
   ) });
 }
-var InputOTP = React2.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ jsx(
-  OTPInput,
-  {
-    ref,
-    containerClassName: cn(
-      "gap-2 flex items-center has-[:disabled]:opacity-50",
-      containerClassName
-    ),
-    className: cn("disabled:cursor-not-allowed", className),
-    ...props
-  }
-));
-InputOTP.displayName = "InputOTP";
-var InputOTPGroup = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex items-center", className), ...props }));
-InputOTPGroup.displayName = "InputOTPGroup";
-var InputOTPSlot = React2.forwardRef(({ index, className, ...props }, ref) => {
-  const inputOTPContext = React2.useContext(OTPInputContext);
-  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref,
-      "data-slot": "input-otp-slot",
-      className: cn(
-        glassControl,
-        controlFill,
-        "size-11 text-sm font-medium first:rounded-l-2xl last:rounded-r-2xl relative flex items-center justify-center rounded-none transition-all",
-        isActive && "z-10 ring-[3px] ring-ring/50",
-        className
-      ),
-      ...props,
-      children: [
-        char,
-        hasFakeCaret && /* @__PURE__ */ jsx("div", { className: "inset-0 pointer-events-none absolute flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "h-4 animate-caret-blink w-px bg-foreground duration-1000" }) })
-      ]
-    }
-  );
-});
-InputOTPSlot.displayName = "InputOTPSlot";
-var InputOTPSeparator = React2.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, role: "separator", ...props, children: /* @__PURE__ */ jsx(Minus, {}) }));
-InputOTPSeparator.displayName = "InputOTPSeparator";
 function Menubar({
   className,
   ...props
@@ -2731,6 +3141,41 @@ function PaginationEllipsis({
     }
   );
 }
+function PasswordInput({
+  className,
+  revealable = true,
+  showLabel = "Show password",
+  hideLabel = "Hide password",
+  ...props
+}) {
+  const [visible, setVisible] = React3.useState(false);
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "password-input", className: "relative w-full", children: [
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        type: visible ? "text" : "password",
+        className: cn(revealable && "pr-12", className),
+        ...props
+      }
+    ),
+    revealable ? /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "icon-sm",
+        "data-slot": "password-input-toggle",
+        "aria-label": visible ? hideLabel : showLabel,
+        "aria-pressed": visible,
+        disabled: props.disabled,
+        onMouseDown: (event) => event.preventDefault(),
+        onClick: () => setVisible((current) => !current),
+        className: "right-1 absolute top-1/2 -translate-y-1/2",
+        children: visible ? /* @__PURE__ */ jsx(EyeOff, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Eye, { "aria-hidden": "true" })
+      }
+    ) : null
+  ] });
+}
 function PlaceholderPattern({ className }) {
   const patternId = useId();
   return /* @__PURE__ */ jsxs("svg", { "data-slot": "placeholder-pattern", className, fill: "none", children: [
@@ -2864,7 +3309,96 @@ function ResizableHandle({
     }
   );
 }
-var ScrollArea = React2.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var saveStatusLabels = {
+  error: "Your changes could not be saved",
+  idle: "Changes are saved automatically",
+  saved: "Saved",
+  saving: "Saving"
+};
+var SAVED_DURATION = 2e3;
+function SaveStatus({
+  status,
+  message,
+  showIdle = false,
+  savedDuration = SAVED_DURATION,
+  labels,
+  className,
+  ...props
+}) {
+  const text = useUiLabels("saveStatus", saveStatusLabels, labels);
+  const [faded, setFaded] = React3.useState(false);
+  React3.useEffect(() => {
+    if (status !== "saved" || savedDuration <= 0) {
+      setFaded(false);
+      return;
+    }
+    setFaded(false);
+    const timer = setTimeout(() => setFaded(true), savedDuration);
+    return () => clearTimeout(timer);
+  }, [status, savedDuration, message]);
+  const hidden = status === "saved" && faded;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...props,
+      "data-slot": "save-status",
+      "data-state": status,
+      "data-faded": hidden || void 0,
+      role: "status",
+      "aria-live": "polite",
+      "aria-hidden": hidden || void 0,
+      className: cn(
+        "gap-2 text-xs font-medium min-h-5 flex items-center transition-opacity duration-300",
+        hidden ? "opacity-0" : "opacity-100",
+        className
+      ),
+      children: [
+        status === "idle" && showIdle && /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-slot": "save-status-idle",
+            className: "text-muted-foreground",
+            children: text.idle
+          }
+        ),
+        status === "saving" && /* @__PURE__ */ jsxs(
+          "span",
+          {
+            "data-slot": "save-status-saving",
+            className: "gap-2 flex items-center text-muted-foreground",
+            children: [
+              /* @__PURE__ */ jsx(Spinner, { size: "sm", label: "", "aria-hidden": "true" }),
+              text.saving
+            ]
+          }
+        ),
+        status === "saved" && /* @__PURE__ */ jsxs(
+          "span",
+          {
+            "data-slot": "save-status-saved",
+            className: "gap-2 flex items-center text-success",
+            children: [
+              /* @__PURE__ */ jsx(Check, { "aria-hidden": "true", className: "size-3.5" }),
+              text.saved
+            ]
+          }
+        ),
+        status === "error" && /* @__PURE__ */ jsxs(
+          "span",
+          {
+            "data-slot": "save-status-error",
+            className: "gap-2 flex items-center text-destructive",
+            children: [
+              /* @__PURE__ */ jsx(TriangleAlert, { "aria-hidden": "true", className: "size-3.5" }),
+              message ?? text.error
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+var ScrollArea = React3.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   ScrollAreaPrimitive.Root,
   {
     "data-slot": "scroll-area",
@@ -2885,7 +3419,7 @@ var ScrollArea = React2.forwardRef(({ className, children, ...props }, ref) => /
   }
 ));
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-var ScrollBar = React2.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx(
+var ScrollBar = React3.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx(
   ScrollAreaPrimitive.ScrollAreaScrollbar,
   {
     "data-slot": "scroll-area-scrollbar",
@@ -2910,7 +3444,7 @@ function Slider({
   max = 100,
   ...props
 }) {
-  const _values = React2.useMemo(
+  const _values = React3.useMemo(
     () => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max],
     [value, defaultValue, min, max]
   );
@@ -3000,95 +3534,85 @@ var Toaster = ({ theme, ...props }) => {
     }
   );
 };
-var toggleVariants = cva(
-  `inline-flex items-center justify-center gap-2 rounded-xl text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:font-semibold data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 transition-[color,box-shadow] aria-invalid:ring-destructive/20 aria-invalid:border-destructive ${focusRing}`,
-  {
-    variants: {
-      variant: {
-        default: "bg-transparent",
-        outline: `${glassControl} ${controlFill} hover:bg-accent hover:text-accent-foreground`
-      },
-      size: {
-        default: "h-11 px-4 min-w-11",
-        sm: "h-9 px-3 min-w-9",
-        lg: "h-12 px-6 min-w-12"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
+var statusBadgeVariants = cva("", {
+  variants: {
+    status: {
+      neutral: "border-border bg-muted text-muted-foreground",
+      info: "border-info/20 bg-info/10 text-info",
+      success: "border-success/20 bg-success/10 text-success",
+      warning: "border-warning/20 bg-warning/10 text-warning",
+      danger: "border-destructive/20 bg-destructive/10 text-destructive"
+    }
+  },
+  defaultVariants: {
+    status: "neutral"
   }
-);
-function Toggle({
-  className,
-  variant,
-  size,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    TogglePrimitive.Root,
-    {
-      "data-slot": "toggle",
-      className: cn(toggleVariants({ variant, size, className })),
-      ...props
-    }
-  );
-}
-var ToggleGroupContext = React2.createContext({
-  size: "default",
-  variant: "default"
 });
-function ToggleGroup({
+function StatusBadge({
   className,
-  variant,
-  size,
+  status = "neutral",
+  dot = false,
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(
-    ToggleGroupPrimitive.Root,
+  const resolvedStatus = status ?? "neutral";
+  return /* @__PURE__ */ jsxs(
+    Badge,
     {
-      "data-slot": "toggle-group",
-      "data-variant": variant,
-      "data-size": size,
+      variant: "outline",
+      "data-slot": "status-badge",
+      "data-status": resolvedStatus,
       className: cn(
-        "group/toggle-group data-[variant=outline]:shadow-xs rounded-2xl flex items-center",
+        statusBadgeVariants({ status: resolvedStatus }),
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx(ToggleGroupContext.Provider, { value: { variant, size }, children })
+      children: [
+        dot && /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            "data-slot": "status-badge-dot",
+            className: "size-1.5 shrink-0 rounded-full bg-current"
+          }
+        ),
+        children
+      ]
     }
   );
 }
-function ToggleGroupItem({
+var textLinkVariants = cva(
+  `cursor-pointer rounded-xl underline decoration-border underline-offset-4 transition-colors duration-300 ease-out hover:decoration-current ${focusRing}`,
+  {
+    variants: {
+      variant: {
+        default: "text-foreground",
+        muted: "text-muted-foreground hover:text-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function TextLink({
   className,
-  children,
-  variant,
-  size,
+  variant = "default",
+  asChild = false,
   ...props
 }) {
-  const context = React2.useContext(ToggleGroupContext);
+  const Comp = asChild ? Slot : "a";
   return /* @__PURE__ */ jsx(
-    ToggleGroupPrimitive.Item,
+    Comp,
     {
-      "data-slot": "toggle-group-item",
-      "data-variant": context.variant || variant,
-      "data-size": context.size || size,
-      className: cn(
-        toggleVariants({
-          variant: context.variant || variant,
-          size: context.size || size
-        }),
-        "min-w-0 first:rounded-l-2xl last:rounded-r-2xl shrink-0 rounded-none shadow-none focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l",
-        className
-      ),
-      ...props,
-      children
+      "data-slot": "text-link",
+      "data-variant": variant,
+      className: cn(textLinkVariants({ variant }), className),
+      ...props
     }
   );
 }
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AspectRatio, Badge, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Combobox, ConfirmDialog, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataTable, DateRangeFilter, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, FacetedFilter, FieldError, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, HoverCard, HoverCardContent, HoverCardTrigger, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PlaceholderPattern, Progress, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, RowActionsMenu, ScrollArea, ScrollBar, ServerFacetedFilter, Slider, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Toaster, Toggle, ToggleGroup, ToggleGroupItem, badgeVariants, cardVariants, navigationMenuTriggerStyle, toggleVariants, useConfirmDialog, useFormField };
+export { AUTOSAVE_DELAY, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AppearanceToggle, AspectRatio, Badge, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Combobox, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataTable, DatePicker, DateRangeFilter, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, EmptyState, FacetedFilter, Field, FieldControl, FieldDescription, FieldGroup, FieldLabel, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, HoverCard, HoverCardContent, HoverCardTrigger, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PasswordInput, PlaceholderPattern, Progress, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, RowActionsMenu, SAVED_DURATION, SaveStatus, ScrollArea, ScrollBar, ServerFacetedFilter, Slider, StatusBadge, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, TextLink, Toaster, ToggleGroup, ToggleGroupItem, appearanceToggleDefaultLabels, badgeVariants, comboboxDefaultLabels, dataTableDefaultLabels, dataTableFacetedFilterDefaultLabels, datePickerDefaultLabels, dateRangeFilterDefaultLabels, emptyStateLabels, navigationMenuTriggerStyle, saveStatusLabels, statusBadgeVariants, textLinkVariants, useAutosave, useConfirmDialog, useFormField };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map