@akira-io/ui 1.0.0 → 1.1.1

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-CFDDAFPJ.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-CFDDAFPJ.js';
+export { CopyButton, copyButtonLabels } from './chunk-2WIIRDHT.js';
+import { toggleVariants } from './chunk-FWQFB37J.js';
+export { Toggle, toggleVariants } from './chunk-FWQFB37J.js';
+import { Label } from './chunk-T2INZOCM.js';
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Label } from './chunk-T2INZOCM.js';
+import { useAppearance } from './chunk-IQMRJXEO.js';
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, cardVariants } from './chunk-RPCL7VFQ.js';
+import { useUiLabels } from './chunk-5AJFQ6C4.js';
+export { UiLocaleProvider, useUiLabels, useUiLocale } from './chunk-5AJFQ6C4.js';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuItem } from './chunk-QHZWW55M.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-QHZWW55M.js';
+export { Separator } from './chunk-TGF54WAO.js';
+import { Input } from './chunk-XZCC6MTE.js';
+export { Input } from './chunk-XZCC6MTE.js';
+import { cn, focusRing, nestedRadius, nestedSurfaceReset, nestedEdgeToEdge, elevatedSurface, modalSurface, Button, menuSurface, quietFocus, fieldSurface, floatingSurface, panelSurface, buttonVariants, Spinner } from './chunk-ODYCBCKS.js';
+export { Button, Spinner, buttonVariants, cn, controlFill, elevatedSurface, focusRing, menuHighlight, nestedEdgeToEdge, nestedRadius, nestedSurfaceReset, recessedSurface, spinnerVariants, surface } from './chunk-ODYCBCKS.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);
@@ -129,37 +160,38 @@ function useConfirmDialog() {
 }
 function Accordion({
   className,
+  slotName = "accordion",
   ...props
 }) {
   return /* @__PURE__ */ jsx(
     AccordionPrimitive.Root,
     {
-      "data-slot": "accordion",
       className: cn(elevatedSurface, "px-5 bg-card", className),
-      ...props
+      ...props,
+      "data-slot": slotName
     }
   );
 }
-var AccordionItem = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AccordionItem = React3.forwardRef(({ className, slotName = "accordion-item", ...props }, ref) => /* @__PURE__ */ jsx(
   AccordionPrimitive.Item,
   {
-    "data-slot": "accordion-item",
     ref,
     className: cn("border-b border-border last:border-b-0", className),
-    ...props
+    ...props,
+    "data-slot": slotName
   }
 ));
 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, slotName = "accordion-trigger", ...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs(
   AccordionPrimitive.Trigger,
   {
-    "data-slot": "accordion-trigger",
     ref,
     className: cn(
       `text-base py-4 font-medium rounded-xl data-[state=open]:font-semibold flex flex-1 items-center justify-between transition-all [&[data-state=open]>svg]:rotate-180 ${focusRing}`,
       className
     ),
     ...props,
+    "data-slot": slotName,
     children: [
       children,
       /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 shrink-0 transition-transform duration-200" })
@@ -167,121 +199,56 @@ 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, slotName = "accordion-content", ...props }, ref) => /* @__PURE__ */ jsx(
   AccordionPrimitive.Content,
   {
-    "data-slot": "accordion-content",
     ref,
     className: "text-md data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden transition-all",
     ...props,
+    "data-slot": slotName,
     children: /* @__PURE__ */ jsx("div", { className: cn("pb-4 pt-0", className), children })
   }
 ));
 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({
+  slotName = "alert-dialog",
   ...props
 }) {
-  return /* @__PURE__ */ jsx(AlertDialog$1.Root, { "data-slot": "alert-dialog", ...props });
+  return /* @__PURE__ */ jsx(AlertDialog$1.Root, { ...props, "data-slot": slotName });
 }
 function AlertDialogTrigger({
+  slotName = "alert-dialog-trigger",
   ...props
 }) {
-  return /* @__PURE__ */ jsx(
-    AlertDialog$1.Trigger,
-    {
-      "data-slot": "alert-dialog-trigger",
-      ...props
-    }
-  );
+  return /* @__PURE__ */ jsx(AlertDialog$1.Trigger, { ...props, "data-slot": slotName });
 }
 function AlertDialogPortal({
+  slotName = "alert-dialog-portal",
   ...props
 }) {
-  return /* @__PURE__ */ jsx(
-    AlertDialog$1.Portal,
-    {
-      "data-slot": "alert-dialog-portal",
-      ...props
-    }
-  );
+  return /* @__PURE__ */ jsx(AlertDialog$1.Portal, { ...props, "data-slot": slotName });
 }
 function AlertDialogOverlay({
   className,
+  slotName = "alert-dialog-overlay",
   ...props
 }) {
   return /* @__PURE__ */ jsx(
     AlertDialog$1.Overlay,
     {
-      "data-slot": "alert-dialog-overlay",
       className: cn(
         "inset-0 bg-black/60 backdrop-blur-sm data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0 fixed z-50",
         className
       ),
-      ...props
+      ...props,
+      "data-slot": slotName
     }
   );
 }
 function AlertDialogContent({
   className,
   size = "default",
+  slotName = "alert-dialog-content",
   ...props
 }) {
   return /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [
@@ -289,91 +256,96 @@ function AlertDialogContent({
     /* @__PURE__ */ jsx(
       AlertDialog$1.Content,
       {
-        "data-slot": "alert-dialog-content",
         "data-size": size,
         className: cn(
           `${modalSurface} group/alert-dialog-content gap-4 p-6 md:p-8 data-[size=sm]:max-w-xs data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[size=default]:sm:max-w-lg fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] duration-200`,
           className
         ),
-        ...props
+        ...props,
+        "data-slot": slotName
       }
     )
   ] });
 }
 function AlertDialogHeader({
   className,
+  slotName = "alert-dialog-header",
   ...props
 }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      "data-slot": "alert-dialog-header",
       className: cn(
         "gap-1.5 has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr] grid grid-rows-[auto_1fr] place-items-center text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr]",
         className
       ),
-      ...props
+      ...props,
+      "data-slot": slotName
     }
   );
 }
 function AlertDialogFooter({
   className,
+  slotName = "alert-dialog-footer",
   ...props
 }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      "data-slot": "alert-dialog-footer",
       className: cn(
         "gap-2 sm:flex-row sm:justify-end flex flex-col-reverse group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2",
         className
       ),
-      ...props
+      ...props,
+      "data-slot": slotName
     }
   );
 }
 function AlertDialogTitle({
   className,
+  slotName = "alert-dialog-title",
   ...props
 }) {
   return /* @__PURE__ */ jsx(
     AlertDialog$1.Title,
     {
-      "data-slot": "alert-dialog-title",
       className: cn(
         "text-lg font-semibold sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
         className
       ),
-      ...props
+      ...props,
+      "data-slot": slotName
     }
   );
 }
 function AlertDialogDescription({
   className,
+  slotName = "alert-dialog-description",
   ...props
 }) {
   return /* @__PURE__ */ jsx(
     AlertDialog$1.Description,
     {
-      "data-slot": "alert-dialog-description",
       className: cn("text-sm text-muted-foreground", className),
-      ...props
+      ...props,
+      "data-slot": slotName
     }
   );
 }
 function AlertDialogMedia({
   className,
+  slotName = "alert-dialog-media",
   ...props
 }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      "data-slot": "alert-dialog-media",
       className: cn(
         "mb-2 size-16 sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8 rounded-2xl inline-flex items-center justify-center bg-muted",
         className
       ),
-      ...props
+      ...props,
+      "data-slot": slotName
     }
   );
 }
@@ -381,14 +353,15 @@ function AlertDialogAction({
   className,
   variant = "default",
   size = "default",
+  slotName = "alert-dialog-action",
   ...props
 }) {
   return /* @__PURE__ */ jsx(Button, { variant, size, asChild: true, children: /* @__PURE__ */ jsx(
     AlertDialog$1.Action,
     {
-      "data-slot": "alert-dialog-action",
       className: cn(className),
-      ...props
+      ...props,
+      "data-slot": slotName
     }
   ) });
 }
@@ -396,151 +369,224 @@ function AlertDialogCancel({
   className,
   variant = "outline",
   size = "default",
+  slotName = "alert-dialog-cancel",
   ...props
 }) {
   return /* @__PURE__ */ jsx(Button, { variant, size, asChild: true, children: /* @__PURE__ */ jsx(
     AlertDialog$1.Cancel,
     {
-      "data-slot": "alert-dialog-cancel",
       className: cn(className),
-      ...props
+      ...props,
+      "data-slot": slotName
     }
   ) });
 }
-function AspectRatio({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(AspectRatio$1.Root, { "data-slot": "aspect-ratio", ...props });
-}
-var badgeVariants = cva(
-  "inline-flex items-center justify-center rounded-full border px-2.5 py-1 text-xs font-semibold w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
-  {
-    variants: {
-      variant: {
-        default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
-        secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
-        destructive: "border-transparent bg-destructive text-destructive-foreground [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
-        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
-      }
-    },
-    defaultVariants: {
-      variant: "default"
-    }
-  }
-);
-function Badge({
+var ToggleGroupContext = React3.createContext({
+  size: "default",
+  variant: "default"
+});
+function ToggleGroup({
   className,
   variant,
-  asChild = false,
+  size,
+  children,
+  slotName = "toggle-group",
   ...props
 }) {
-  const Comp = asChild ? Slot : "span";
   return /* @__PURE__ */ jsx(
-    Comp,
+    ToggleGroupPrimitive.Root,
     {
-      "data-slot": "badge",
-      className: cn(badgeVariants({ variant }), className),
-      ...props
+      "data-variant": variant,
+      "data-size": size,
+      className: cn(
+        "group/toggle-group data-[variant=outline]:shadow-xs rounded-2xl flex items-center",
+        className
+      ),
+      ...props,
+      "data-slot": slotName,
+      children: /* @__PURE__ */ jsx(ToggleGroupContext.Provider, { value: { variant, size }, children })
     }
   );
 }
-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({
+function ToggleGroupItem({
   className,
+  children,
   variant,
-  interactive,
-  padding,
-  inset = false,
+  size,
+  slotName = "toggle-group-item",
   ...props
 }) {
+  const context = React3.useContext(ToggleGroupContext);
   return /* @__PURE__ */ jsx(
-    "div",
+    ToggleGroupPrimitive.Item,
     {
-      "data-slot": "card",
-      "data-inset": inset || void 0,
+      "data-variant": context.variant || variant,
+      "data-size": context.size || size,
       className: cn(
-        cardVariants({ variant, interactive, padding }),
-        inset && recessedSurface,
+        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
+      ...props,
+      "data-slot": slotName,
+      children
     }
   );
 }
-function CardHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "card-header",
-      className: cn("gap-1.5 px-6 flex flex-col", className),
-      ...props
-    }
+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,
+  slotName = "appearance-toggle",
+  ...props
+}) {
+  const labels = useUiLabels(
+    "appearanceToggle",
+    appearanceToggleDefaultLabels,
+    labelOverrides
   );
-}
-function CardTitle({ className, ...props }) {
+  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-variant": "menu",
+        className: cn("inline-flex", className),
+        ...props,
+        "data-slot": slotName,
+        children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+          /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              slotName: "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,
+                {
+                  slotName: "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": "card-title",
-      className: cn("font-semibold leading-none", className),
-      ...props
+      "data-variant": "segmented",
+      className: cn("inline-flex", className),
+      ...props,
+      "data-slot": slotName,
+      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,
+            {
+              slotName: "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 CardDescription({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "card-description",
-      className: cn("text-sm text-muted-foreground", className),
-      ...props
-    }
-  );
+function AspectRatio({
+  slotName = "aspect-ratio",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(AspectRatio$1.Root, { ...props, "data-slot": slotName });
 }
-function CardContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "card-content",
-      className: cn("px-6", className),
-      ...props
+var badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-full border px-2.5 py-1 text-xs font-semibold w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive: "border-transparent bg-destructive text-destructive-foreground [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
+        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
     }
-  );
-}
-function CardFooter({ className, ...props }) {
+  }
+);
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  slotName = "badge",
+  ...props
+}) {
+  const Comp = asChild ? Slot : "span";
   return /* @__PURE__ */ jsx(
-    "div",
+    Comp,
     {
-      "data-slot": "card-footer",
-      className: cn("px-6 flex items-center", className),
-      ...props
+      className: cn(badgeVariants({ variant }), className),
+      ...props,
+      "data-slot": slotName
     }
   );
 }
-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 />");
   }
@@ -553,6 +599,7 @@ function Carousel({
   plugins,
   className,
   children,
+  slotName = "carousel",
   ...props
 }) {
   const [carouselRef, api] = useEmblaCarousel(
@@ -562,20 +609,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 +636,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);
@@ -627,22 +674,26 @@ function Carousel({
           ),
           role: "region",
           "aria-roledescription": "carousel",
-          "data-slot": "carousel",
           ...props,
+          "data-slot": slotName,
           children
         }
       )
     }
   );
 }
-function CarouselContent({ className, ...props }) {
+function CarouselContent({
+  className,
+  slotName = "carousel-content",
+  ...props
+}) {
   const { carouselRef, orientation } = useCarousel();
   return /* @__PURE__ */ jsx(
     "div",
     {
       ref: carouselRef,
       className: cn(nestedRadius, "overflow-hidden"),
-      "data-slot": "carousel-content",
+      "data-slot": slotName,
       children: /* @__PURE__ */ jsx(
         "div",
         {
@@ -657,20 +708,24 @@ function CarouselContent({ className, ...props }) {
     }
   );
 }
-function CarouselItem({ className, ...props }) {
+function CarouselItem({
+  className,
+  slotName = "carousel-item",
+  ...props
+}) {
   const { orientation } = useCarousel();
   return /* @__PURE__ */ jsx(
     "div",
     {
       role: "group",
       "aria-roledescription": "slide",
-      "data-slot": "carousel-item",
       className: cn(
         "min-w-0 shrink-0 grow-0 basis-full",
         orientation === "horizontal" ? "pl-4" : "pt-4",
         className
       ),
-      ...props
+      ...props,
+      "data-slot": slotName
     }
   );
 }
@@ -678,13 +733,13 @@ function CarouselPrevious({
   className,
   variant = "outline",
   size = "icon",
+  slotName = "carousel-previous",
   ...props
 }) {
   const { orientation, scrollPrev, canScrollPrev } = useCarousel();
   return /* @__PURE__ */ jsxs(
     Button,
     {
-      "data-slot": "carousel-previous",
       variant,
       size,
       className: cn(
@@ -695,6 +750,7 @@ function CarouselPrevious({
       disabled: !canScrollPrev,
       onClick: scrollPrev,
       ...props,
+      slotName,
       children: [
         /* @__PURE__ */ jsx(ArrowLeft, {}),
         /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Previous slide" })
@@ -706,13 +762,13 @@ function CarouselNext({
   className,
   variant = "outline",
   size = "icon",
+  slotName = "carousel-next",
   ...props
 }) {
   const { orientation, scrollNext, canScrollNext } = useCarousel();
   return /* @__PURE__ */ jsxs(
     Button,
     {
-      "data-slot": "carousel-next",
       variant,
       size,
       className: cn(
@@ -723,6 +779,7 @@ function CarouselNext({
       disabled: !canScrollNext,
       onClick: scrollNext,
       ...props,
+      slotName,
       children: [
         /* @__PURE__ */ jsx(ArrowRight, {}),
         /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Next slide" })
@@ -732,9 +789,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 />");
   }
@@ -746,14 +803,14 @@ function ChartContainer({
   children,
   config,
   initialDimension = INITIAL_DIMENSION,
+  slotName = "chart",
   ...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",
     {
-      "data-slot": "chart",
       "data-chart": chartId,
       className: cn(
         elevatedSurface,
@@ -763,6 +820,7 @@ function ChartContainer({
         className
       ),
       ...props,
+      "data-slot": slotName,
       children: [
         /* @__PURE__ */ jsx(ChartStyle, { id: chartId, config }),
         /* @__PURE__ */ jsx(
@@ -818,7 +876,7 @@ function ChartTooltipContent({
   labelKey
 }) {
   const { config } = useChart();
-  const tooltipLabel = React2.useMemo(() => {
+  const tooltipLabel = React3.useMemo(() => {
     if (hideLabel || !payload?.length) {
       return null;
     }
@@ -989,17 +1047,18 @@ function getPayloadConfigFromPayload(config, payload, key) {
 }
 function Checkbox({
   className,
+  slotName = "checkbox",
   ...props
 }) {
   return /* @__PURE__ */ jsx(
     CheckboxPrimitive.Root,
     {
-      "data-slot": "checkbox",
       className: cn(
         `peer size-5 shadow-xs shrink-0 rounded-md border border-border transition-all disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground ${focusRing}`,
         className
       ),
       ...props,
+      "data-slot": slotName,
       children: /* @__PURE__ */ jsx(
         CheckboxPrimitive.Indicator,
         {
@@ -1011,36 +1070,53 @@ 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
+  invalid = false,
+  required,
+  className,
+  "aria-invalid": ariaInvalid,
+  slotName = "combobox",
+  ...trigger
 }) {
+  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: [
     /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
       Button,
       {
-        "data-slot": "combobox",
-        id,
         variant: "outline",
+        ...trigger,
         role: "combobox",
         "aria-expanded": open,
+        "aria-required": required || void 0,
+        "aria-invalid": ariaInvalid ?? (invalid || void 0),
         disabled,
         className: cn(
           "h-11 rounded-2xl w-full justify-between border-border bg-muted/40 hover:bg-muted disabled:cursor-not-allowed disabled:opacity-50",
           !selected && "text-muted-foreground",
-          invalid && "border-destructive ring-destructive"
+          invalid && "border-destructive ring-destructive",
+          className
         ),
+        slotName,
         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 +1130,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,
               {
@@ -1091,69 +1167,58 @@ function Combobox({
   ] });
 }
 function ContextMenu({
+  slotName = "context-menu",
   ...props
 }) {
-  return /* @__PURE__ */ jsx(ContextMenu$1.Root, { "data-slot": "context-menu", ...props });
+  return /* @__PURE__ */ jsx(ContextMenu$1.Root, { ...props, "data-slot": slotName });
 }
 function ContextMenuTrigger({
+  slotName = "context-menu-trigger",
   ...props
 }) {
-  return /* @__PURE__ */ jsx(
-    ContextMenu$1.Trigger,
-    {
-      "data-slot": "context-menu-trigger",
-      ...props
-    }
-  );
+  return /* @__PURE__ */ jsx(ContextMenu$1.Trigger, { ...props, "data-slot": slotName });
 }
 function ContextMenuGroup({
+  slotName = "context-menu-group",
   ...props
 }) {
-  return /* @__PURE__ */ jsx(ContextMenu$1.Group, { "data-slot": "context-menu-group", ...props });
+  return /* @__PURE__ */ jsx(ContextMenu$1.Group, { ...props, "data-slot": slotName });
 }
 function ContextMenuPortal({
+  slotName = "context-menu-portal",
   ...props
 }) {
-  return /* @__PURE__ */ jsx(
-    ContextMenu$1.Portal,
-    {
-      "data-slot": "context-menu-portal",
-      ...props
-    }
-  );
+  return /* @__PURE__ */ jsx(ContextMenu$1.Portal, { ...props, "data-slot": slotName });
 }
 function ContextMenuSub({
+  slotName = "context-menu-sub",
   ...props
 }) {
-  return /* @__PURE__ */ jsx(ContextMenu$1.Sub, { "data-slot": "context-menu-sub", ...props });
+  return /* @__PURE__ */ jsx(ContextMenu$1.Sub, { ...props, "data-slot": slotName });
 }
 function ContextMenuRadioGroup({
+  slotName = "context-menu-radio-group",
   ...props
 }) {
-  return /* @__PURE__ */ jsx(
-    ContextMenu$1.RadioGroup,
-    {
-      "data-slot": "context-menu-radio-group",
-      ...props
-    }
-  );
+  return /* @__PURE__ */ jsx(ContextMenu$1.RadioGroup, { ...props, "data-slot": slotName });
 }
 function ContextMenuSubTrigger({
   className,
   inset,
   children,
+  slotName = "context-menu-sub-trigger",
   ...props
 }) {
   return /* @__PURE__ */ jsxs(
     ContextMenu$1.SubTrigger,
     {
-      "data-slot": "context-menu-sub-trigger",
       "data-inset": inset,
       className: cn(
         "px-2 py-1.5 text-sm data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-4 rounded-xl flex cursor-default items-center outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='text-'])]:text-muted-foreground",
         className
       ),
       ...props,
+      "data-slot": slotName,
       children: [
         children,
         /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto" })
@@ -1163,33 +1228,35 @@ function ContextMenuSubTrigger({
 }
 function ContextMenuSubContent({
   className,
+  slotName = "context-menu-sub-content",
   ...props
 }) {
   return /* @__PURE__ */ jsx(
     ContextMenu$1.SubContent,
     {
-      "data-slot": "context-menu-sub-content",
       className: cn(
         `${menuSurface} p-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden`,
         className
       ),
-      ...props
+      ...props,
+      "data-slot": slotName
     }
   );
 }
 function ContextMenuContent({
   className,
+  slotName = "context-menu-content",
   ...props
 }) {
   return /* @__PURE__ */ jsx(ContextMenu$1.Portal, { children: /* @__PURE__ */ jsx(
     ContextMenu$1.Content,
     {
-      "data-slot": "context-menu-content",
       className: cn(
         `${menuSurface} p-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto`,
         className
       ),
-      ...props
+      ...props,
+      "data-slot": slotName
     }
   ) });
 }
@@ -1197,19 +1264,20 @@ function ContextMenuItem({
   className,
   inset,
   variant = "default",
+  slotName = "context-menu-item",
   ...props
 }) {
   return /* @__PURE__ */ jsx(
     ContextMenu$1.Item,
     {
-      "data-slot": "context-menu-item",
       "data-inset": inset,
       "data-variant": variant,
       className: cn(
         "gap-2 px-2 py-1.5 text-sm data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-4 rounded-xl relative flex cursor-default items-center outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!",
         className
       ),
-      ...props
+      ...props,
+      "data-slot": slotName
     }
   );
 }
@@ -1217,18 +1285,19 @@ function ContextMenuCheckboxItem({
   className,
   children,
   checked,
+  slotName = "context-menu-checkbox-item",
   ...props
 }) {
   return /* @__PURE__ */ jsxs(
     ContextMenu$1.CheckboxItem,
     {
-      "data-slot": "context-menu-checkbox-item",
       className: cn(
         "gap-2 py-1.5 pr-2 pl-8 text-sm [&_svg:not([class*='size-'])]:size-4 rounded-xl relative flex cursor-default items-center outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className
       ),
       checked,
       ...props,
+      "data-slot": slotName,
       children: [
         /* @__PURE__ */ jsx("span", { className: "left-2 size-3.5 pointer-events-none absolute flex items-center justify-center", children: /* @__PURE__ */ jsx(ContextMenu$1.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" }) }) }),
         children
@@ -1239,17 +1308,18 @@ function ContextMenuCheckboxItem({
 function ContextMenuRadioItem({
   className,
   children,
+  slotName = "context-menu-radio-item",
   ...props
 }) {
   return /* @__PURE__ */ jsxs(
     ContextMenu$1.RadioItem,
     {
-      "data-slot": "context-menu-radio-item",
       className: cn(
         "gap-2 py-1.5 pr-2 pl-8 text-sm [&_svg:not([class*='size-'])]:size-4 rounded-xl relative flex cursor-default items-center outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className
       ),
       ...props,
+      "data-slot": slotName,
       children: [
         /* @__PURE__ */ jsx("span", { className: "left-2 size-3.5 pointer-events-none absolute flex items-center justify-center", children: /* @__PURE__ */ jsx(ContextMenu$1.ItemIndicator, { children: /* @__PURE__ */ jsx(CircleIcon, { className: "size-2 fill-current" }) }) }),
         children
@@ -1260,65 +1330,72 @@ function ContextMenuRadioItem({
 function ContextMenuLabel({
   className,
   inset,
+  slotName = "context-menu-label",
   ...props
 }) {
   return /* @__PURE__ */ jsx(
     ContextMenu$1.Label,
     {
-      "data-slot": "context-menu-label",
       "data-inset": inset,
       className: cn(
         "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8 text-foreground",
         className
       ),
-      ...props
+      ...props,
+      "data-slot": slotName
     }
   );
 }
 function ContextMenuSeparator({
   className,
+  slotName = "context-menu-separator",
   ...props
 }) {
   return /* @__PURE__ */ jsx(
     ContextMenu$1.Separator,
     {
-      "data-slot": "context-menu-separator",
       className: cn("-mx-1 my-1 h-px bg-border", className),
-      ...props
+      ...props,
+      "data-slot": slotName
     }
   );
 }
 function ContextMenuShortcut({
   className,
+  slotName = "context-menu-shortcut",
   ...props
 }) {
   return /* @__PURE__ */ jsx(
     "span",
     {
-      "data-slot": "context-menu-shortcut",
       className: cn(
         "text-xs tracking-widest ml-auto text-muted-foreground",
         className
       ),
-      ...props
+      ...props,
+      "data-slot": slotName
     }
   );
 }
+var dataTableFacetedFilterDefaultLabels = {
+  noOptionsLabel: "No options."
+};
 function FilterPopover({
   label,
   options,
   selected,
   onToggle,
   width,
-  noOptionsLabel = "No options."
+  noOptionsLabel,
+  slotName = "data-table-faceted-filter"
 }) {
   return /* @__PURE__ */ jsxs(Popover, { children: [
     /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
       Button,
       {
         variant: "outline",
-        "data-slot": "data-table-faceted-filter",
         className: "h-11 rounded-2xl border-dashed border-border",
+        slotName,
         children: [
           /* @__PURE__ */ jsx(PlusCircle, { className: "mr-2 size-4" }),
           label,
@@ -1365,6 +1442,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 +1466,7 @@ function FacetedFilter({
       selected,
       onToggle: toggle,
       width: "w-[220px]",
-      noOptionsLabel
+      noOptionsLabel: labels.noOptionsLabel
     }
   );
 }
@@ -1394,6 +1476,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,20 +1499,21 @@ function ServerFacetedFilter({
       selected: selectedSet,
       onToggle: toggle,
       width: "w-[240px]",
-      noOptionsLabel
+      noOptionsLabel: labels.noOptionsLabel
     }
   );
 }
 function RowActionsMenu({
   row,
-  actions
+  actions,
+  slotName = "data-table-row-actions"
 }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
       className: "flex justify-end",
-      "data-slot": "data-table-row-actions",
       onClick: (event) => event.stopPropagation(),
+      "data-slot": slotName,
       children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
         /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
           Button,
@@ -1452,16 +1540,95 @@ function RowActionsMenu({
     }
   );
 }
-var Table = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var emptyStateLabels = {
+  title: "Nothing to show"
+};
+function EmptyState({
+  icon: Icon2 = SearchX,
+  title = emptyStateLabels.title,
+  description,
+  actions,
+  compact = false,
+  className,
+  slotName = "empty-state"
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "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
+      ),
+      "data-slot": slotName,
+      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, slotName = "table-container", ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
-    "data-slot": "table-container",
     className: cn(
       elevatedSurface,
       nestedSurfaceReset,
       nestedEdgeToEdge,
       "relative w-full overflow-hidden bg-card"
     ),
+    "data-slot": slotName,
     children: /* @__PURE__ */ jsx(
       "div",
       {
@@ -1484,9 +1651,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 +1662,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 +1674,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 +1686,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 +1698,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 +1710,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 +1735,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 +1760,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 +1777,18 @@ function DataTable({
   total,
   onPageChange,
   onCreate,
-  createLabel = "New"
-}) {
+  createLabel,
+  slotName = "data-table"
+}) {
+  const labels = useUiLabels("dataTable", dataTableDefaultLabels, {
+    searchPlaceholder,
+    emptyLabel,
+    createLabel,
+    clearFiltersLabel,
+    paginationLabel,
+    noOptionsLabel,
+    totalLabel
+  });
   const [sorting, setSorting] = useState([]);
   const [globalFilter, setGlobalFilter] = useState("");
   const [columnFilters, setColumnFilters] = useState([]);
@@ -1658,8 +1844,8 @@ function DataTable({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      "data-slot": "data-table",
       className: cn(elevatedSurface, "space-y-4 p-5 bg-card"),
+      "data-slot": slotName,
       children: [
         hasToolbar && /* @__PURE__ */ jsxs("div", { className: "gap-2 flex flex-wrap items-center", children: [
           searchKey !== void 0 && /* @__PURE__ */ jsxs("div", { className: "relative min-w-[200px] flex-1", children: [
@@ -1669,8 +1855,8 @@ function DataTable({
               {
                 value: serverSearch ? searchValue ?? "" : globalFilter,
                 onChange: (e) => serverSearch ? onSearchChange?.(e.target.value) : setGlobalFilter(e.target.value),
-                placeholder: searchPlaceholder,
-                className: "h-11 rounded-2xl pl-11 font-medium focus:shadow-lg border-none bg-muted/50 focus:bg-muted"
+                placeholder: labels.searchPlaceholder,
+                className: `h-11 rounded-2xl pl-11 font-medium border-none bg-muted/50 focus:bg-muted ${quietFocus}`
               }
             )
           ] }),
@@ -1679,7 +1865,7 @@ function DataTable({
             {
               column: table.getColumn(filter.columnId),
               filter,
-              noOptionsLabel
+              noOptionsLabel: labels.noOptionsLabel
             },
             filter.columnId
           )),
@@ -1689,7 +1875,7 @@ function DataTable({
               filter,
               selected: filterValues?.[filter.paramKey] ?? [],
               onChange: (values) => onFilterChange?.(filter.paramKey, values),
-              noOptionsLabel
+              noOptionsLabel: labels.noOptionsLabel
             },
             filter.paramKey
           )),
@@ -1708,7 +1894,7 @@ function DataTable({
               },
               className: "h-11 rounded-2xl",
               children: [
-                clearFiltersLabel,
+                labels.clearFiltersLabel,
                 /* @__PURE__ */ jsx(X, { className: "ml-1 size-4" })
               ]
             }
@@ -1717,7 +1903,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 +1973,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 +2000,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,117 +2055,282 @@ function DataTable({
     }
   );
 }
-function parse(value) {
-  return value ? /* @__PURE__ */ new Date(`${value}T00:00:00`) : void 0;
-}
-function DateRangeFilter({
-  from,
-  to,
-  onChange,
-  emptyLabel = "Date range",
-  dateFormat = "dd MMM yy"
+function CalendarPopover({
+  open,
+  onOpenChange,
+  trigger,
+  align = "start",
+  className,
+  children,
+  slotName = "calendar-popover"
 }) {
-  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" })
-            }
-          )
-        ]
-      }
-    ) }),
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: trigger }),
     /* @__PURE__ */ jsx(
       PopoverContent,
       {
-        className: "p-2 w-auto",
-        align: "end",
+        className: cn("p-2 w-auto", className),
+        align,
         sideOffset: 4,
         collisionPadding: 16,
+        slotName,
+        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 {
+    value,
+    defaultValue,
+    onChange,
+    minDate,
+    maxDate,
+    disabledDays,
+    disabled = false,
+    clearable = true,
+    invalid = false,
+    required,
+    formatDate,
+    placeholder,
+    dateFormat,
+    clearLabel,
+    className,
+    "aria-invalid": ariaInvalid,
+    slotName = "date-picker",
+    ...trigger
+  } = 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", { className: cn("relative w-full", className), "data-slot": slotName, children: [
+    /* @__PURE__ */ jsx(
+      CalendarPopover,
+      {
+        open,
+        onOpenChange: setOpen,
+        trigger: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            ...trigger,
+            type: "button",
+            "data-slot": "date-picker-trigger",
+            disabled,
+            "aria-required": required || void 0,
+            "aria-invalid": ariaInvalid ?? (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: "range",
-            numberOfMonths: 2,
-            defaultMonth: parse(from),
+            mode: "single",
+            autoFocus: true,
             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
-            }),
+            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,
+  dateFormat,
+  className,
+  slotName = "date-range-filter",
+  ...trigger
+}) {
+  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), 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",
+          ...trigger,
+          className: cn(
+            "h-11 rounded-2xl cursor-pointer border-dashed border-border",
+            className
+          ),
+          slotName,
+          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({
+  slotName = "drawer",
   ...props
 }) {
-  return /* @__PURE__ */ jsx(Drawer$1.Root, { "data-slot": "drawer", ...props });
+  return /* @__PURE__ */ jsx(Drawer$1.Root, { ...props, "data-slot": slotName });
 }
 function DrawerTrigger({
+  slotName = "drawer-trigger",
   ...props
 }) {
-  return /* @__PURE__ */ jsx(Drawer$1.Trigger, { "data-slot": "drawer-trigger", ...props });
+  return /* @__PURE__ */ jsx(Drawer$1.Trigger, { ...props, "data-slot": slotName });
 }
 function DrawerPortal({
+  slotName = "drawer-portal",
   ...props
 }) {
-  return /* @__PURE__ */ jsx(Drawer$1.Portal, { "data-slot": "drawer-portal", ...props });
+  return /* @__PURE__ */ jsx(Drawer$1.Portal, { ...props, "data-slot": slotName });
 }
 function DrawerClose({
+  slotName = "drawer-close",
   ...props
 }) {
-  return /* @__PURE__ */ jsx(Drawer$1.Close, { "data-slot": "drawer-close", ...props });
+  return /* @__PURE__ */ jsx(Drawer$1.Close, { ...props, "data-slot": slotName });
 }
 function DrawerOverlay({
   className,
+  slotName = "drawer-overlay",
   ...props
 }) {
   return /* @__PURE__ */ jsx(
     Drawer$1.Overlay,
     {
-      "data-slot": "drawer-overlay",
       className: cn(
         "inset-0 bg-black/60 backdrop-blur-sm data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0 fixed z-50",
         className
       ),
-      ...props
+      ...props,
+      "data-slot": slotName
     }
   );
 }
 function DrawerContent({
   className,
   children,
+  slotName = "drawer-content",
   ...props
 }) {
-  return /* @__PURE__ */ jsxs(DrawerPortal, { "data-slot": "drawer-portal", children: [
+  return /* @__PURE__ */ jsxs(DrawerPortal, { slotName: "drawer-portal", children: [
     /* @__PURE__ */ jsx(DrawerOverlay, {}),
     /* @__PURE__ */ jsxs(
       Drawer$1.Content,
       {
-        "data-slot": "drawer-content",
         className: cn(
           `${floatingSurface} group/drawer-content fixed z-50 flex h-auto flex-col border-border`,
           "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:rounded-b-3xl data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:border-b",
@@ -1989,6 +2340,7 @@ function DrawerContent({
           className
         ),
         ...props,
+        "data-slot": slotName,
         children: [
           /* @__PURE__ */ jsx("div", { className: "mt-4 h-2 mx-auto hidden w-[100px] shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block" }),
           children
@@ -1997,70 +2349,221 @@ function DrawerContent({
     )
   ] });
 }
-function DrawerHeader({ className, ...props }) {
+function DrawerHeader({
+  className,
+  slotName = "drawer-header",
+  ...props
+}) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      "data-slot": "drawer-header",
       className: cn(
         "gap-0.5 p-4 md:gap-1.5 md:text-left flex flex-col group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center",
         className
       ),
-      ...props
+      ...props,
+      "data-slot": slotName
+    }
+  );
+}
+function DrawerFooter({
+  className,
+  slotName = "drawer-footer",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("gap-2 p-4 mt-auto flex flex-col", className),
+      ...props,
+      "data-slot": slotName
+    }
+  );
+}
+function DrawerTitle({
+  className,
+  slotName = "drawer-title",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Drawer$1.Title,
+    {
+      className: cn("font-semibold text-foreground", className),
+      ...props,
+      "data-slot": slotName
+    }
+  );
+}
+function DrawerDescription({
+  className,
+  slotName = "drawer-description",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Drawer$1.Description,
+    {
+      className: cn("text-sm text-muted-foreground", className),
+      ...props,
+      "data-slot": slotName
+    }
+  );
+}
+function Field({
+  className,
+  children,
+  id,
+  orientation = "vertical",
+  error,
+  invalid,
+  required = false,
+  slotName = "field",
+  ...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-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,
+      "data-slot": slotName,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(FieldError, { message: error })
+      ]
     }
-  );
+  ) });
 }
-function DrawerFooter({ className, ...props }) {
+function FieldGroup({
+  className,
+  slotName = "field-group",
+  ...props
+}) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      "data-slot": "drawer-footer",
-      className: cn("gap-2 p-4 mt-auto flex flex-col", className),
-      ...props
+      className: cn("gap-6 flex w-full flex-col", className),
+      ...props,
+      "data-slot": slotName
     }
   );
 }
-function DrawerTitle({
+function FieldLabel({
   className,
+  children,
+  requiredLabel = "Required",
+  slotName = "field-label",
   ...props
 }) {
-  return /* @__PURE__ */ jsx(
-    Drawer$1.Title,
+  const { controlId, invalid, required } = useField();
+  return /* @__PURE__ */ jsxs(
+    Label,
     {
-      "data-slot": "drawer-title",
-      className: cn("font-semibold text-foreground", className),
-      ...props
+      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,
+      slotName,
+      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 DrawerDescription({
+function FieldDescription({
   className,
+  slotName = "field-description",
   ...props
 }) {
+  const { descriptionId, setHasDescription } = useField();
+  React3.useEffect(() => {
+    setHasDescription(true);
+    return () => setHasDescription(false);
+  }, [setHasDescription]);
   return /* @__PURE__ */ jsx(
-    Drawer$1.Description,
+    "p",
     {
-      "data-slot": "drawer-description",
-      className: cn("text-sm text-muted-foreground", className),
-      ...props
+      id: descriptionId,
+      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,
+      "data-slot": slotName
     }
   );
 }
-function FieldError({ message }) {
-  if (!message) {
-    return null;
-  }
+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(
-    "p",
+    Slot,
     {
-      className: "ml-1 text-xs font-medium text-destructive",
-      "data-slot": "field-error",
-      children: message
+      "data-field-control": "true",
+      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 +2572,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,23 +2589,23 @@ 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, slotName = "form-item", ...props }, ref) => {
+  const id = React3.useId();
   return /* @__PURE__ */ jsx(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx(
     "div",
     {
       ref,
       className: cn("space-y-2", className),
-      "data-slot": "form-item",
-      ...props
+      ...props,
+      "data-slot": slotName
     }
   ) });
 });
 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 +2618,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 +2632,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 +2645,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) {
@@ -2164,131 +2667,93 @@ var FormMessage = React2.forwardRef(({ className, children, ...props }, ref) =>
 });
 FormMessage.displayName = "FormMessage";
 function HoverCard({
+  slotName = "hover-card",
   ...props
 }) {
-  return /* @__PURE__ */ jsx(HoverCard$1.Root, { "data-slot": "hover-card", ...props });
+  return /* @__PURE__ */ jsx(HoverCard$1.Root, { ...props, "data-slot": slotName });
 }
 function HoverCardTrigger({
+  slotName = "hover-card-trigger",
   ...props
 }) {
-  return /* @__PURE__ */ jsx(HoverCard$1.Trigger, { "data-slot": "hover-card-trigger", ...props });
+  return /* @__PURE__ */ jsx(HoverCard$1.Trigger, { ...props, "data-slot": slotName });
 }
 function HoverCardContent({
   className,
   align = "center",
   sideOffset = 4,
+  slotName = "hover-card-content",
   ...props
 }) {
   return /* @__PURE__ */ jsx(HoverCard$1.Portal, { "data-slot": "hover-card-portal", children: /* @__PURE__ */ jsx(
     HoverCard$1.Content,
     {
-      "data-slot": "hover-card-content",
       align,
       sideOffset,
       className: cn(
         `${panelSurface} w-64 p-4 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 z-50 origin-(--radix-hover-card-content-transform-origin) bg-popover/90 outline-hidden`,
         className
       ),
-      ...props
+      ...props,
+      "data-slot": slotName
     }
   ) });
 }
-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,
+  slotName = "menubar",
   ...props
 }) {
   return /* @__PURE__ */ jsx(
     Menubar$1.Root,
     {
-      "data-slot": "menubar",
       className: cn(
         "h-9 gap-1 p-1 shadow-sm backdrop-blur-xl rounded-2xl flex items-center border border-border bg-card/60",
         className
       ),
-      ...props
+      ...props,
+      "data-slot": slotName
     }
   );
 }
 function MenubarMenu({
+  slotName = "menubar-menu",
   ...props
 }) {
-  return /* @__PURE__ */ jsx(Menubar$1.Menu, { "data-slot": "menubar-menu", ...props });
+  return /* @__PURE__ */ jsx(Menubar$1.Menu, { ...props, "data-slot": slotName });
 }
 function MenubarGroup({
+  slotName = "menubar-group",
   ...props
 }) {
-  return /* @__PURE__ */ jsx(Menubar$1.Group, { "data-slot": "menubar-group", ...props });
+  return /* @__PURE__ */ jsx(Menubar$1.Group, { ...props, "data-slot": slotName });
 }
 function MenubarPortal({
+  slotName = "menubar-portal",
   ...props
 }) {
-  return /* @__PURE__ */ jsx(Menubar$1.Portal, { "data-slot": "menubar-portal", ...props });
+  return /* @__PURE__ */ jsx(Menubar$1.Portal, { ...props, "data-slot": slotName });
 }
 function MenubarRadioGroup({
+  slotName = "menubar-radio-group",
   ...props
 }) {
-  return /* @__PURE__ */ jsx(
-    Menubar$1.RadioGroup,
-    {
-      "data-slot": "menubar-radio-group",
-      ...props
-    }
-  );
+  return /* @__PURE__ */ jsx(Menubar$1.RadioGroup, { ...props, "data-slot": slotName });
 }
 function MenubarTrigger({
   className,
+  slotName = "menubar-trigger",
   ...props
 }) {
   return /* @__PURE__ */ jsx(
     Menubar$1.Trigger,
     {
-      "data-slot": "menubar-trigger",
       className: cn(
         "px-2 py-1 text-sm font-medium rounded-xl flex items-center outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
         className
       ),
-      ...props
+      ...props,
+      "data-slot": slotName
     }
   );
 }
@@ -2297,12 +2762,12 @@ function MenubarContent({
   align = "start",
   alignOffset = -4,
   sideOffset = 8,
+  slotName = "menubar-content",
   ...props
 }) {
   return /* @__PURE__ */ jsx(MenubarPortal, { children: /* @__PURE__ */ jsx(
     Menubar$1.Content,
     {
-      "data-slot": "menubar-content",
       align,
       alignOffset,
       sideOffset,
@@ -2310,7 +2775,8 @@ function MenubarContent({
         `${menuSurface} p-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 z-50 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden`,
         className
       ),
-      ...props
+      ...props,
+      "data-slot": slotName
     }
   ) });
 }
@@ -2318,19 +2784,20 @@ function MenubarItem({
   className,
   inset,
   variant = "default",
+  slotName = "menubar-item",
   ...props
 }) {
   return /* @__PURE__ */ jsx(
     Menubar$1.Item,
     {
-      "data-slot": "menubar-item",
       "data-inset": inset,
       "data-variant": variant,
       className: cn(
         "gap-2 px-2 py-1.5 text-sm data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-4 rounded-xl relative flex cursor-default items-center outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!",
         className
       ),
-      ...props
+      ...props,
+      "data-slot": slotName
     }
   );
 }
@@ -2338,18 +2805,19 @@ function MenubarCheckboxItem({
   className,
   children,
   checked,
+  slotName = "menubar-checkbox-item",
   ...props
 }) {
   return /* @__PURE__ */ jsxs(
     Menubar$1.CheckboxItem,
     {
-      "data-slot": "menubar-checkbox-item",
       className: cn(
         "gap-2 rounded-xl py-1.5 pr-2 pl-8 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className
       ),
       checked,
       ...props,
+      "data-slot": slotName,
       children: [
         /* @__PURE__ */ jsx("span", { className: "left-2 size-3.5 pointer-events-none absolute flex items-center justify-center", children: /* @__PURE__ */ jsx(Menubar$1.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" }) }) }),
         children
@@ -2360,17 +2828,18 @@ function MenubarCheckboxItem({
 function MenubarRadioItem({
   className,
   children,
+  slotName = "menubar-radio-item",
   ...props
 }) {
   return /* @__PURE__ */ jsxs(
     Menubar$1.RadioItem,
     {
-      "data-slot": "menubar-radio-item",
       className: cn(
         "gap-2 rounded-xl py-1.5 pr-2 pl-8 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className
       ),
       ...props,
+      "data-slot": slotName,
       children: [
         /* @__PURE__ */ jsx("span", { className: "left-2 size-3.5 pointer-events-none absolute flex items-center justify-center", children: /* @__PURE__ */ jsx(Menubar$1.ItemIndicator, { children: /* @__PURE__ */ jsx(CircleIcon, { className: "size-2 fill-current" }) }) }),
         children
@@ -2381,71 +2850,76 @@ function MenubarRadioItem({
 function MenubarLabel({
   className,
   inset,
+  slotName = "menubar-label",
   ...props
 }) {
   return /* @__PURE__ */ jsx(
     Menubar$1.Label,
     {
-      "data-slot": "menubar-label",
       "data-inset": inset,
       className: cn(
         "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
         className
       ),
-      ...props
+      ...props,
+      "data-slot": slotName
     }
   );
 }
 function MenubarSeparator({
   className,
+  slotName = "menubar-separator",
   ...props
 }) {
   return /* @__PURE__ */ jsx(
     Menubar$1.Separator,
     {
-      "data-slot": "menubar-separator",
       className: cn("-mx-1 my-1 h-px bg-border", className),
-      ...props
+      ...props,
+      "data-slot": slotName
     }
   );
 }
 function MenubarShortcut({
   className,
+  slotName = "menubar-shortcut",
   ...props
 }) {
   return /* @__PURE__ */ jsx(
     "span",
     {
-      "data-slot": "menubar-shortcut",
       className: cn(
         "text-xs tracking-widest ml-auto text-muted-foreground",
         className
       ),
-      ...props
+      ...props,
+      "data-slot": slotName
     }
   );
 }
 function MenubarSub({
+  slotName = "menubar-sub",
   ...props
 }) {
-  return /* @__PURE__ */ jsx(Menubar$1.Sub, { "data-slot": "menubar-sub", ...props });
+  return /* @__PURE__ */ jsx(Menubar$1.Sub, { ...props, "data-slot": slotName });
 }
 function MenubarSubTrigger({
   className,
   inset,
   children,
+  slotName = "menubar-sub-trigger",
   ...props
 }) {
   return /* @__PURE__ */ jsxs(
     Menubar$1.SubTrigger,
     {
-      "data-slot": "menubar-sub-trigger",
       "data-inset": inset,
       className: cn(
         "px-2 py-1.5 text-sm data-[inset]:pl-8 rounded-xl flex cursor-default items-center outline-none select-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
         className
       ),
       ...props,
+      "data-slot": slotName,
       children: [
         children,
         /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-4 w-4 ml-auto" })
@@ -2455,17 +2929,18 @@ function MenubarSubTrigger({
 }
 function MenubarSubContent({
   className,
+  slotName = "menubar-sub-content",
   ...props
 }) {
   return /* @__PURE__ */ jsx(
     Menubar$1.SubContent,
     {
-      "data-slot": "menubar-sub-content",
       className: cn(
         `${menuSurface} p-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 z-50 min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden`,
         className
       ),
-      ...props
+      ...props,
+      "data-slot": slotName
     }
   );
 }
@@ -2473,18 +2948,19 @@ function NavigationMenu({
   className,
   children,
   viewport = true,
+  slotName = "navigation-menu",
   ...props
 }) {
   return /* @__PURE__ */ jsxs(
     NavigationMenuPrimitive.Root,
     {
-      "data-slot": "navigation-menu",
       "data-viewport": viewport,
       className: cn(
         "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
         className
       ),
       ...props,
+      "data-slot": slotName,
       children: [
         children,
         viewport && /* @__PURE__ */ jsx(NavigationMenuViewport, {})
@@ -2494,30 +2970,32 @@ function NavigationMenu({
 }
 function NavigationMenuList({
   className,
+  slotName = "navigation-menu-list",
   ...props
 }) {
   return /* @__PURE__ */ jsx(
     NavigationMenuPrimitive.List,
     {
-      "data-slot": "navigation-menu-list",
       className: cn(
         "group gap-1 flex flex-1 list-none items-center justify-center",
         className
       ),
-      ...props
+      ...props,
+      "data-slot": slotName
     }
   );
 }
 function NavigationMenuItem({
   className,
+  slotName = "navigation-menu-item",
   ...props
 }) {
   return /* @__PURE__ */ jsx(
     NavigationMenuPrimitive.Item,
     {
-      "data-slot": "navigation-menu-item",
       className: cn("relative", className),
-      ...props
+      ...props,
+      "data-slot": slotName
     }
   );
 }
@@ -2527,14 +3005,15 @@ var navigationMenuTriggerStyle = cva(
 function NavigationMenuTrigger({
   className,
   children,
+  slotName = "navigation-menu-trigger",
   ...props
 }) {
   return /* @__PURE__ */ jsxs(
     NavigationMenuPrimitive.Trigger,
     {
-      "data-slot": "navigation-menu-trigger",
       className: cn(navigationMenuTriggerStyle(), "group", className),
       ...props,
+      "data-slot": slotName,
       children: [
         children,
         " ",
@@ -2551,23 +3030,25 @@ function NavigationMenuTrigger({
 }
 function NavigationMenuContent({
   className,
+  slotName = "navigation-menu-content",
   ...props
 }) {
   return /* @__PURE__ */ jsx(
     NavigationMenuPrimitive.Content,
     {
-      "data-slot": "navigation-menu-content",
       className: cn(
         "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 p-2 pr-2.5 md:absolute md:w-auto w-full",
         "group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:shadow-2xl group-data-[viewport=false]/navigation-menu:backdrop-blur-xl group-data-[viewport=false]/navigation-menu:rounded-2xl group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:border-border group-data-[viewport=false]/navigation-menu:bg-popover/90 group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
         className
       ),
-      ...props
+      ...props,
+      "data-slot": slotName
     }
   );
 }
 function NavigationMenuViewport({
   className,
+  slotName = "navigation-menu-viewport",
   ...props
 }) {
   return /* @__PURE__ */ jsx(
@@ -2579,12 +3060,12 @@ function NavigationMenuViewport({
       children: /* @__PURE__ */ jsx(
         NavigationMenuPrimitive.Viewport,
         {
-          "data-slot": "navigation-menu-viewport",
           className: cn(
             `${panelSurface} origin-top-center data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 mt-1.5 md:w-[var(--radix-navigation-menu-viewport-width)] relative h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden bg-popover/90`,
             className
           ),
-          ...props
+          ...props,
+          "data-slot": slotName
         }
       )
     }
@@ -2592,76 +3073,86 @@ function NavigationMenuViewport({
 }
 function NavigationMenuLink({
   className,
+  slotName = "navigation-menu-link",
   ...props
 }) {
   return /* @__PURE__ */ jsx(
     NavigationMenuPrimitive.Link,
     {
-      "data-slot": "navigation-menu-link",
       className: cn(
         "gap-1 p-2 text-sm [&_svg:not([class*='size-'])]:size-4 rounded-xl data-[active=true]:font-semibold flex flex-col transition-[color,box-shadow] outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground",
         className
       ),
-      ...props
+      ...props,
+      "data-slot": slotName
     }
   );
 }
 function NavigationMenuIndicator({
   className,
+  slotName = "navigation-menu-indicator",
   ...props
 }) {
   return /* @__PURE__ */ jsx(
     NavigationMenuPrimitive.Indicator,
     {
-      "data-slot": "navigation-menu-indicator",
       className: cn(
         "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in h-1.5 top-full z-[1] flex items-end justify-center overflow-hidden",
         className
       ),
       ...props,
+      "data-slot": slotName,
       children: /* @__PURE__ */ jsx("div", { className: "h-2 w-2 shadow-md rounded-tl-xs relative top-[60%] rotate-45 bg-border" })
     }
   );
 }
-function Pagination({ className, ...props }) {
+function Pagination({
+  className,
+  slotName = "pagination",
+  ...props
+}) {
   return /* @__PURE__ */ jsx(
     "nav",
     {
       role: "navigation",
       "aria-label": "pagination",
-      "data-slot": "pagination",
       className: cn("mx-auto flex w-full justify-center", className),
-      ...props
+      ...props,
+      "data-slot": slotName
     }
   );
 }
 function PaginationContent({
   className,
+  slotName = "pagination-content",
   ...props
 }) {
   return /* @__PURE__ */ jsx(
     "ul",
     {
-      "data-slot": "pagination-content",
       className: cn("gap-1 flex flex-row items-center", className),
-      ...props
+      ...props,
+      "data-slot": slotName
     }
   );
 }
-function PaginationItem({ ...props }) {
-  return /* @__PURE__ */ jsx("li", { "data-slot": "pagination-item", ...props });
+function PaginationItem({
+  slotName = "pagination-item",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx("li", { ...props, "data-slot": slotName });
 }
 function PaginationLink({
   className,
   isActive,
   size = "icon",
+  slotName = "pagination-link",
   ...props
 }) {
   return /* @__PURE__ */ jsx(
     "a",
     {
       "aria-current": isActive ? "page" : void 0,
-      "data-slot": "pagination-link",
       "data-active": isActive,
       className: cn(
         buttonVariants({
@@ -2670,7 +3161,8 @@ function PaginationLink({
         }),
         className
       ),
-      ...props
+      ...props,
+      "data-slot": slotName
     }
   );
 }
@@ -2712,18 +3204,19 @@ function PaginationNext({
 }
 function PaginationEllipsis({
   className,
+  slotName = "pagination-ellipsis",
   ...props
 }) {
   return /* @__PURE__ */ jsxs(
     "span",
     {
       "aria-hidden": true,
-      "data-slot": "pagination-ellipsis",
       className: cn(
         "size-9 rounded-xl flex items-center justify-center",
         className
       ),
       ...props,
+      "data-slot": slotName,
       children: [
         /* @__PURE__ */ jsx(MoreHorizontalIcon, { className: "size-4" }),
         /* @__PURE__ */ jsx("span", { className: "sr-only", children: "More pages" })
@@ -2731,9 +3224,48 @@ function PaginationEllipsis({
     }
   );
 }
-function PlaceholderPattern({ className }) {
+function PasswordInput({
+  className,
+  revealable = true,
+  showLabel = "Show password",
+  hideLabel = "Hide password",
+  slotName = "password-input",
+  ...props
+}) {
+  const [visible, setVisible] = React3.useState(false);
+  return /* @__PURE__ */ jsxs("div", { className: "relative w-full", "data-slot": slotName, 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",
+        slotName: "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,
+  slotName = "placeholder-pattern"
+}) {
   const patternId = useId();
-  return /* @__PURE__ */ jsxs("svg", { "data-slot": "placeholder-pattern", className, fill: "none", children: [
+  return /* @__PURE__ */ jsxs("svg", { className, fill: "none", "data-slot": slotName, children: [
     /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx(
       "pattern",
       {
@@ -2766,17 +3298,18 @@ function PlaceholderPattern({ className }) {
 function Progress({
   className,
   value,
+  slotName = "progress",
   ...props
 }) {
   return /* @__PURE__ */ jsx(
     Progress$1.Root,
     {
-      "data-slot": "progress",
       className: cn(
         "h-2 relative w-full overflow-hidden rounded-full bg-primary/20",
         className
       ),
       ...props,
+      "data-slot": slotName,
       children: /* @__PURE__ */ jsx(
         Progress$1.Indicator,
         {
@@ -2790,30 +3323,32 @@ function Progress({
 }
 function RadioGroup({
   className,
+  slotName = "radio-group",
   ...props
 }) {
   return /* @__PURE__ */ jsx(
     RadioGroup$1.Root,
     {
-      "data-slot": "radio-group",
       className: cn("gap-3 grid", className),
-      ...props
+      ...props,
+      "data-slot": slotName
     }
   );
 }
 function RadioGroupItem({
   className,
+  slotName = "radio-group-item",
   ...props
 }) {
   return /* @__PURE__ */ jsx(
     RadioGroup$1.Item,
     {
-      "data-slot": "radio-group-item",
       className: cn(
         `size-5 shadow-xs aspect-square shrink-0 rounded-full border border-border text-primary transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 ${focusRing}`,
         className
       ),
       ...props,
+      "data-slot": slotName,
       children: /* @__PURE__ */ jsx(
         RadioGroup$1.Indicator,
         {
@@ -2827,47 +3362,141 @@ function RadioGroupItem({
 }
 function ResizablePanelGroup({
   className,
+  slotName = "resizable-panel-group",
   ...props
 }) {
   return /* @__PURE__ */ jsx(
     ResizablePrimitive.Group,
     {
-      "data-slot": "resizable-panel-group",
       className: cn(
         elevatedSurface,
         nestedSurfaceReset,
         "flex h-full w-full overflow-hidden bg-card aria-[orientation=vertical]:flex-col",
         className
       ),
-      ...props
+      ...props,
+      "data-slot": slotName
     }
   );
 }
-function ResizablePanel({ ...props }) {
-  return /* @__PURE__ */ jsx(ResizablePrimitive.Panel, { "data-slot": "resizable-panel", ...props });
+function ResizablePanel({
+  slotName = "resizable-panel",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(ResizablePrimitive.Panel, { ...props, "data-slot": slotName });
 }
 function ResizableHandle({
   withHandle,
   className,
+  slotName = "resizable-handle",
   ...props
 }) {
   return /* @__PURE__ */ jsx(
     ResizablePrimitive.Separator,
     {
-      "data-slot": "resizable-handle",
       className: cn(
         "after:inset-y-0 after:w-1 aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:translate-x-0 relative flex w-px items-center justify-center bg-border after:absolute after:left-1/2 after:-translate-x-1/2 focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-none aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90",
         className
       ),
       ...props,
+      "data-slot": slotName,
       children: withHandle && /* @__PURE__ */ jsx("div", { className: "h-8 w-1.5 z-10 rounded-full bg-muted-foreground/40 transition-colors group-hover:bg-muted-foreground/60" })
     }
   );
 }
-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,
+  slotName = "save-status",
+  ...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-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
+      ),
+      "data-slot": slotName,
+      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, slotName = "scroll-area", ...props }, ref) => /* @__PURE__ */ jsxs(
   ScrollAreaPrimitive.Root,
   {
-    "data-slot": "scroll-area",
     ref,
     className: cn(
       elevatedSurface,
@@ -2877,6 +3506,7 @@ var ScrollArea = React2.forwardRef(({ className, children, ...props }, ref) => /
       className
     ),
     ...props,
+    "data-slot": slotName,
     children: [
       /* @__PURE__ */ jsx(ScrollAreaPrimitive.Viewport, { className: "h-full w-full rounded-[inherit]", children }),
       /* @__PURE__ */ jsx(ScrollBar, {}),
@@ -2885,22 +3515,29 @@ var ScrollArea = React2.forwardRef(({ className, children, ...props }, ref) => /
   }
 ));
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-var ScrollBar = React2.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx(
-  ScrollAreaPrimitive.ScrollAreaScrollbar,
-  {
-    "data-slot": "scroll-area-scrollbar",
-    ref,
-    orientation,
-    className: cn(
-      "flex touch-none transition-colors select-none",
-      orientation === "vertical" && "w-2.5 h-full border-l border-l-transparent p-[1px]",
-      orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
-      className
-    ),
-    ...props,
-    children: /* @__PURE__ */ jsx(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border" })
-  }
-));
+var ScrollBar = React3.forwardRef(
+  ({
+    className,
+    orientation = "vertical",
+    slotName = "scroll-area-scrollbar",
+    ...props
+  }, ref) => /* @__PURE__ */ jsx(
+    ScrollAreaPrimitive.ScrollAreaScrollbar,
+    {
+      ref,
+      orientation,
+      className: cn(
+        "flex touch-none transition-colors select-none",
+        orientation === "vertical" && "w-2.5 h-full border-l border-l-transparent p-[1px]",
+        orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+        className
+      ),
+      ...props,
+      "data-slot": slotName,
+      children: /* @__PURE__ */ jsx(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border" })
+    }
+  )
+);
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 function Slider({
   className,
@@ -2908,16 +3545,16 @@ function Slider({
   value,
   min = 0,
   max = 100,
+  slotName = "slider",
   ...props
 }) {
-  const _values = React2.useMemo(
+  const _values = React3.useMemo(
     () => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max],
     [value, defaultValue, min, max]
   );
   return /* @__PURE__ */ jsxs(
     Slider$1.Root,
     {
-      "data-slot": "slider",
       defaultValue,
       value,
       min,
@@ -2927,6 +3564,7 @@ function Slider({
         className
       ),
       ...props,
+      "data-slot": slotName,
       children: [
         /* @__PURE__ */ jsx(
           Slider$1.Track,
@@ -3000,95 +3638,87 @@ 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,
+  slotName = "status-badge",
   ...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-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 })
+      slotName,
+      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,
+  slotName = "text-link",
   ...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
-      ),
+      "data-variant": variant,
+      className: cn(textLinkVariants({ variant }), className),
       ...props,
-      children
+      "data-slot": slotName
     }
   );
 }
 
-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