@akira-io/ui 1.1.0 → 1.1.1

package/dist/index.js

@@ -1,21 +1,21 @@
-import { Popover, PopoverTrigger, PopoverContent, Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, Select, SelectTrigger, SelectContent, SelectItem, Calendar, FieldContext, FieldError, useField, ConfirmDialog } from './chunk-UUTXPPRN.js';
-export { Alert, AlertDescription, AlertTitle, Calendar, CalendarDayButton, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ConfirmDialog, FieldError, FloatingSheet, FloatingSheetBody, FloatingSheetFooter, FloatingSheetStack, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, confirmDialogDefaultLabels, floatingSheetDefaultLabels, useField } from './chunk-UUTXPPRN.js';
-export { CopyButton, copyButtonLabels } from './chunk-JAHTUAQL.js';
-import { toggleVariants } from './chunk-LKSM3WLK.js';
-export { Toggle, toggleVariants } from './chunk-LKSM3WLK.js';
-import { Label } from './chunk-6QM5BA7B.js';
-export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Label } from './chunk-6QM5BA7B.js';
+import { 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-SA5LM2GD.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-MNGNBEYN.js';
-export { Avatar, AvatarFallback, AvatarImage, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Collapsible, CollapsibleContent, CollapsibleTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Icon, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, useSidebar } from './chunk-MNGNBEYN.js';
-export { Separator } from './chunk-UUEWFCKT.js';
-import { Input } from './chunk-6X4TKSF6.js';
-export { Input } from './chunk-6X4TKSF6.js';
-import { cn, focusRing, nestedRadius, nestedSurfaceReset, nestedEdgeToEdge, elevatedSurface, modalSurface, Button, menuSurface, fieldSurface, floatingSurface, panelSurface, buttonVariants, Spinner } from './chunk-DSD7MVLL.js';
-export { Button, Spinner, buttonVariants, cn, controlFill, elevatedSurface, focusRing, menuHighlight, nestedEdgeToEdge, nestedRadius, nestedSurfaceReset, recessedSurface, spinnerVariants, surface } from './chunk-DSD7MVLL.js';
+import { 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';
@@ -160,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 = React3.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 = React3.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" })
@@ -198,63 +199,56 @@ var AccordionTrigger = React3.forwardRef(({ className, children, ...props }, ref
   }
 ) }));
 AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
-var AccordionContent = React3.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;
 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: [
@@ -262,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
     }
   );
 }
@@ -354,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
     }
   ) });
 }
@@ -369,14 +369,15 @@ 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
     }
   ) });
 }
@@ -389,12 +390,12 @@ function ToggleGroup({
   variant,
   size,
   children,
+  slotName = "toggle-group",
   ...props
 }) {
   return /* @__PURE__ */ jsx(
     ToggleGroupPrimitive.Root,
     {
-      "data-slot": "toggle-group",
       "data-variant": variant,
       "data-size": size,
       className: cn(
@@ -402,6 +403,7 @@ function ToggleGroup({
         className
       ),
       ...props,
+      "data-slot": slotName,
       children: /* @__PURE__ */ jsx(ToggleGroupContext.Provider, { value: { variant, size }, children })
     }
   );
@@ -411,13 +413,13 @@ function ToggleGroupItem({
   children,
   variant,
   size,
+  slotName = "toggle-group-item",
   ...props
 }) {
   const context = React3.useContext(ToggleGroupContext);
   return /* @__PURE__ */ jsx(
     ToggleGroupPrimitive.Item,
     {
-      "data-slot": "toggle-group-item",
       "data-variant": context.variant || variant,
       "data-size": context.size || size,
       className: cn(
@@ -429,6 +431,7 @@ function ToggleGroupItem({
         className
       ),
       ...props,
+      "data-slot": slotName,
       children
     }
   );
@@ -452,6 +455,7 @@ function AppearanceToggle({
   className,
   variant = "segmented",
   labels: labelOverrides,
+  slotName = "appearance-toggle",
   ...props
 }) {
   const labels = useUiLabels(
@@ -466,15 +470,15 @@ function AppearanceToggle({
     return /* @__PURE__ */ jsx(
       "div",
       {
-        "data-slot": "appearance-toggle",
         "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,
             {
-              "data-slot": "appearance-toggle-trigger",
+              slotName: "appearance-toggle-trigger",
               variant: "ghost",
               size: "icon-sm",
               "aria-label": labels.groupLabel,
@@ -489,7 +493,7 @@ function AppearanceToggle({
               children: OPTIONS.map((option) => /* @__PURE__ */ jsxs(
                 DropdownMenuRadioItem,
                 {
-                  "data-slot": "appearance-toggle-item",
+                  slotName: "appearance-toggle-item",
                   value: option.value,
                   children: [
                     /* @__PURE__ */ jsx(option.icon, { "aria-hidden": "true" }),
@@ -507,10 +511,10 @@ function AppearanceToggle({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      "data-slot": "appearance-toggle",
       "data-variant": "segmented",
       className: cn("inline-flex", className),
       ...props,
+      "data-slot": slotName,
       children: /* @__PURE__ */ jsx(
         ToggleGroup,
         {
@@ -526,7 +530,7 @@ function AppearanceToggle({
           children: OPTIONS.map((option) => /* @__PURE__ */ jsxs(
             ToggleGroupItem,
             {
-              "data-slot": "appearance-toggle-item",
+              slotName: "appearance-toggle-item",
               value: option.value,
               "aria-label": option.label(labels),
               children: [
@@ -542,9 +546,10 @@ function AppearanceToggle({
   );
 }
 function AspectRatio({
+  slotName = "aspect-ratio",
   ...props
 }) {
-  return /* @__PURE__ */ jsx(AspectRatio$1.Root, { "data-slot": "aspect-ratio", ...props });
+  return /* @__PURE__ */ jsx(AspectRatio$1.Root, { ...props, "data-slot": slotName });
 }
 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",
@@ -566,15 +571,16 @@ function Badge({
   className,
   variant,
   asChild = false,
+  slotName = "badge",
   ...props
 }) {
   const Comp = asChild ? Slot : "span";
   return /* @__PURE__ */ jsx(
     Comp,
     {
-      "data-slot": "badge",
       className: cn(badgeVariants({ variant }), className),
-      ...props
+      ...props,
+      "data-slot": slotName
     }
   );
 }
@@ -593,6 +599,7 @@ function Carousel({
   plugins,
   className,
   children,
+  slotName = "carousel",
   ...props
 }) {
   const [carouselRef, api] = useEmblaCarousel(
@@ -667,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",
         {
@@ -697,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
     }
   );
 }
@@ -718,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(
@@ -735,6 +750,7 @@ function CarouselPrevious({
       disabled: !canScrollPrev,
       onClick: scrollPrev,
       ...props,
+      slotName,
       children: [
         /* @__PURE__ */ jsx(ArrowLeft, {}),
         /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Previous slide" })
@@ -746,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(
@@ -763,6 +779,7 @@ function CarouselNext({
       disabled: !canScrollNext,
       onClick: scrollNext,
       ...props,
+      slotName,
       children: [
         /* @__PURE__ */ jsx(ArrowRight, {}),
         /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Next slide" })
@@ -786,6 +803,7 @@ function ChartContainer({
   children,
   config,
   initialDimension = INITIAL_DIMENSION,
+  slotName = "chart",
   ...props
 }) {
   const uniqueId = React3.useId();
@@ -793,7 +811,6 @@ function ChartContainer({
   return /* @__PURE__ */ jsx(ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ jsxs(
     "div",
     {
-      "data-slot": "chart",
       "data-chart": chartId,
       className: cn(
         elevatedSurface,
@@ -803,6 +820,7 @@ function ChartContainer({
         className
       ),
       ...props,
+      "data-slot": slotName,
       children: [
         /* @__PURE__ */ jsx(ChartStyle, { id: chartId, config }),
         /* @__PURE__ */ jsx(
@@ -1029,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,
         {
@@ -1057,7 +1076,6 @@ var comboboxDefaultLabels = {
   emptyText: "No results."
 };
 function Combobox({
-  id,
   value,
   options,
   onChange,
@@ -1065,7 +1083,12 @@ function Combobox({
   searchPlaceholder,
   emptyText,
   disabled = false,
-  invalid = false
+  invalid = false,
+  required,
+  className,
+  "aria-invalid": ariaInvalid,
+  slotName = "combobox",
+  ...trigger
 }) {
   const labels = useUiLabels("combobox", comboboxDefaultLabels, {
     placeholder,
@@ -1078,17 +1101,20 @@ function Combobox({
     /* @__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 : labels.placeholder,
           /* @__PURE__ */ jsx(ChevronsUpDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })
@@ -1141,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" })
@@ -1213,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
     }
   ) });
 }
@@ -1247,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
     }
   );
 }
@@ -1267,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
@@ -1289,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
@@ -1310,47 +1330,50 @@ 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
     }
   );
 }
@@ -1363,15 +1386,16 @@ function FilterPopover({
   selected,
   onToggle,
   width,
-  noOptionsLabel
+  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,
@@ -1481,14 +1505,15 @@ function ServerFacetedFilter({
 }
 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,
@@ -1524,18 +1549,19 @@ function EmptyState({
   description,
   actions,
   compact = false,
-  className
+  className,
+  slotName = "empty-state"
 }) {
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      "data-slot": "empty-state",
       "data-compact": compact || void 0,
       className: cn(
         "flex h-full w-full flex-col items-center justify-center text-center",
         compact ? "gap-2 px-4 py-6" : "gap-3 px-6 py-12",
         className
       ),
+      "data-slot": slotName,
       children: [
         /* @__PURE__ */ jsx(
           "span",
@@ -1593,16 +1619,16 @@ function EmptyState({
     }
   );
 }
-var Table = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+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",
       {
@@ -1751,7 +1777,8 @@ function DataTable({
   total,
   onPageChange,
   onCreate,
-  createLabel
+  createLabel,
+  slotName = "data-table"
 }) {
   const labels = useUiLabels("dataTable", dataTableDefaultLabels, {
     searchPlaceholder,
@@ -1817,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: [
@@ -1829,7 +1856,7 @@ function DataTable({
                 value: serverSearch ? searchValue ?? "" : globalFilter,
                 onChange: (e) => serverSearch ? onSearchChange?.(e.target.value) : setGlobalFilter(e.target.value),
                 placeholder: labels.searchPlaceholder,
-                className: "h-11 rounded-2xl pl-11 font-medium focus:shadow-lg border-none bg-muted/50 focus:bg-muted"
+                className: `h-11 rounded-2xl pl-11 font-medium border-none bg-muted/50 focus:bg-muted ${quietFocus}`
               }
             )
           ] }),
@@ -2034,18 +2061,19 @@ function CalendarPopover({
   trigger,
   align = "start",
   className,
-  children
+  children,
+  slotName = "calendar-popover"
 }) {
   return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange, children: [
     /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: trigger }),
     /* @__PURE__ */ jsx(
       PopoverContent,
       {
-        "data-slot": "calendar-popover",
         className: cn("p-2 w-auto", className),
         align,
         sideOffset: 4,
         collisionPadding: 16,
+        slotName,
         children
       }
     )
@@ -2072,7 +2100,6 @@ function boundaries(minDate, maxDate, disabledDays) {
 }
 function DatePicker(props) {
   const {
-    id,
     value,
     defaultValue,
     onChange,
@@ -2082,11 +2109,15 @@ function DatePicker(props) {
     disabled = false,
     clearable = true,
     invalid = false,
+    required,
     formatDate,
     placeholder,
     dateFormat,
     clearLabel,
-    className
+    className,
+    "aria-invalid": ariaInvalid,
+    slotName = "date-picker",
+    ...trigger
   } = props;
   const labels = useUiLabels("datePicker", datePickerDefaultLabels, {
     placeholder,
@@ -2105,77 +2136,71 @@ function DatePicker(props) {
     }
     onChange?.(next);
   }
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      "data-slot": "date-picker",
-      className: cn("relative w-full", className),
-      children: [
-        /* @__PURE__ */ jsx(
-          CalendarPopover,
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative w-full", className), "data-slot": slotName, children: [
+    /* @__PURE__ */ jsx(
+      CalendarPopover,
+      {
+        open,
+        onOpenChange: setOpen,
+        trigger: /* @__PURE__ */ jsxs(
+          "button",
           {
-            open,
-            onOpenChange: setOpen,
-            trigger: /* @__PURE__ */ jsxs(
-              "button",
-              {
-                type: "button",
-                id,
-                "data-slot": "date-picker-trigger",
-                disabled,
-                "aria-invalid": invalid || void 0,
-                className: cn(triggerClasses, showClear && "pr-11"),
-                children: [
-                  /* @__PURE__ */ jsx(CalendarIcon, { className: "size-4 shrink-0 opacity-60" }),
-                  /* @__PURE__ */ jsx(
-                    "span",
-                    {
-                      className: cn(
-                        "truncate",
-                        !selected && "text-muted-foreground"
-                      ),
-                      children: label
-                    }
-                  )
-                ]
-              }
-            ),
-            children: /* @__PURE__ */ jsx(
-              Calendar,
-              {
-                mode: "single",
-                autoFocus: true,
-                selected,
-                defaultMonth: selected ?? minDate,
-                startMonth: minDate,
-                endMonth: maxDate,
-                disabled: boundaries(minDate, maxDate, disabledDays),
-                onSelect: (date) => {
-                  if (!date) {
-                    return;
-                  }
-                  commit(date);
-                  setOpen(false);
-                },
-                className: "rounded-2xl bg-transparent"
-              }
-            )
+            ...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
+                }
+              )
+            ]
           }
         ),
-        showClear && /* @__PURE__ */ jsx(
-          "button",
+        children: /* @__PURE__ */ jsx(
+          Calendar,
           {
-            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" })
+            mode: "single",
+            autoFocus: true,
+            selected,
+            defaultMonth: selected ?? minDate,
+            startMonth: minDate,
+            endMonth: maxDate,
+            disabled: boundaries(minDate, maxDate, disabledDays),
+            onSelect: (date) => {
+              if (!date) {
+                return;
+              }
+              commit(date);
+              setOpen(false);
+            },
+            className: "rounded-2xl bg-transparent"
           }
         )
-      ]
-    }
-  );
+      }
+    ),
+    showClear && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "data-slot": "date-picker-clear",
+        "aria-label": labels.clearLabel,
+        onClick: () => commit(void 0),
+        className: `size-7 rounded-xl right-2 absolute top-1/2 inline-flex -translate-y-1/2 cursor-pointer items-center justify-center text-muted-foreground hover:text-foreground ${focusRing}`,
+        children: /* @__PURE__ */ jsx(X, { className: "size-3.5" })
+      }
+    )
+  ] });
 }
 function parse(value) {
   return value ? /* @__PURE__ */ new Date(`${value}T00:00:00`) : void 0;
@@ -2189,7 +2214,10 @@ function DateRangeFilter({
   to,
   onChange,
   emptyLabel,
-  dateFormat
+  dateFormat,
+  className,
+  slotName = "date-range-filter",
+  ...trigger
 }) {
   const labels = useUiLabels(
     "dateRangeFilter",
@@ -2209,8 +2237,12 @@ function DateRangeFilter({
         Button,
         {
           variant: "outline",
-          "data-slot": "date-range-filter",
-          className: "h-11 rounded-2xl cursor-pointer border-dashed border-border",
+          ...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,
@@ -2248,52 +2280,57 @@ function DateRangeFilter({
   );
 }
 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",
@@ -2303,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
@@ -2311,52 +2349,62 @@ 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, ...props }) {
+function DrawerFooter({
+  className,
+  slotName = "drawer-footer",
+  ...props
+}) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      "data-slot": "drawer-footer",
       className: cn("gap-2 p-4 mt-auto flex flex-col", className),
-      ...props
+      ...props,
+      "data-slot": slotName
     }
   );
 }
 function DrawerTitle({
   className,
+  slotName = "drawer-title",
   ...props
 }) {
   return /* @__PURE__ */ jsx(
     Drawer$1.Title,
     {
-      "data-slot": "drawer-title",
       className: cn("font-semibold text-foreground", className),
-      ...props
+      ...props,
+      "data-slot": slotName
     }
   );
 }
 function DrawerDescription({
   className,
+  slotName = "drawer-description",
   ...props
 }) {
   return /* @__PURE__ */ jsx(
     Drawer$1.Description,
     {
-      "data-slot": "drawer-description",
       className: cn("text-sm text-muted-foreground", className),
-      ...props
+      ...props,
+      "data-slot": slotName
     }
   );
 }
@@ -2368,6 +2416,7 @@ function Field({
   error,
   invalid,
   required = false,
+  slotName = "field",
   ...props
 }) {
   const generatedId = React3.useId();
@@ -2390,7 +2439,6 @@ function Field({
   return /* @__PURE__ */ jsx(FieldContext.Provider, { value: field, children: /* @__PURE__ */ jsxs(
     "div",
     {
-      "data-slot": "field",
       "data-orientation": orientation,
       "data-invalid": isInvalid ? "true" : void 0,
       className: cn(
@@ -2399,6 +2447,7 @@ function Field({
         className
       ),
       ...props,
+      "data-slot": slotName,
       children: [
         children,
         /* @__PURE__ */ jsx(FieldError, { message: error })
@@ -2408,14 +2457,15 @@ function Field({
 }
 function FieldGroup({
   className,
+  slotName = "field-group",
   ...props
 }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      "data-slot": "field-group",
       className: cn("gap-6 flex w-full flex-col", className),
-      ...props
+      ...props,
+      "data-slot": slotName
     }
   );
 }
@@ -2423,13 +2473,13 @@ function FieldLabel({
   className,
   children,
   requiredLabel = "Required",
+  slotName = "field-label",
   ...props
 }) {
   const { controlId, invalid, required } = useField();
   return /* @__PURE__ */ jsxs(
     Label,
     {
-      "data-slot": "field-label",
       htmlFor: controlId,
       className: cn(
         "gap-1 flex items-center group-data-[orientation=horizontal]/field:col-start-1 group-data-[orientation=horizontal]/field:row-start-1",
@@ -2437,6 +2487,7 @@ function FieldLabel({
         className
       ),
       ...props,
+      slotName,
       children: [
         children,
         required ? /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -2457,6 +2508,7 @@ function FieldLabel({
 }
 function FieldDescription({
   className,
+  slotName = "field-description",
   ...props
 }) {
   const { descriptionId, setHasDescription } = useField();
@@ -2468,12 +2520,12 @@ function FieldDescription({
     "p",
     {
       id: descriptionId,
-      "data-slot": "field-description",
       className: cn(
         "ml-1 text-xs font-medium text-muted-foreground group-data-[orientation=horizontal]/field:col-start-1 group-data-[orientation=horizontal]/field:row-start-2",
         className
       ),
-      ...props
+      ...props,
+      "data-slot": slotName
     }
   );
 }
@@ -2497,7 +2549,7 @@ function FieldControl({
   return /* @__PURE__ */ jsx(
     Slot,
     {
-      "data-slot": "field-control",
+      "data-field-control": "true",
       id: controlId,
       "aria-describedby": describedBy || void 0,
       "aria-invalid": invalid ? true : void 0,
@@ -2540,15 +2592,15 @@ var useFormField = () => {
 var FormItemContext = React3.createContext(
   {}
 );
-var FormItem = React3.forwardRef(({ className, ...props }, ref) => {
+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
     }
   ) });
 });
@@ -2615,90 +2667,93 @@ var FormMessage = React3.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
     }
   ) });
 }
 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
     }
   );
 }
@@ -2707,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,
@@ -2720,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
     }
   ) });
 }
@@ -2728,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
     }
   );
 }
@@ -2748,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
@@ -2770,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
@@ -2791,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" })
@@ -2865,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
     }
   );
 }
@@ -2883,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, {})
@@ -2904,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
     }
   );
 }
@@ -2937,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,
         " ",
@@ -2961,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(
@@ -2989,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
         }
       )
     }
@@ -3002,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({
@@ -3080,7 +3161,8 @@ function PaginationLink({
         }),
         className
       ),
-      ...props
+      ...props,
+      "data-slot": slotName
     }
   );
 }
@@ -3122,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" })
@@ -3146,10 +3229,11 @@ function PasswordInput({
   revealable = true,
   showLabel = "Show password",
   hideLabel = "Hide password",
+  slotName = "password-input",
   ...props
 }) {
   const [visible, setVisible] = React3.useState(false);
-  return /* @__PURE__ */ jsxs("div", { "data-slot": "password-input", className: "relative w-full", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "relative w-full", "data-slot": slotName, children: [
     /* @__PURE__ */ jsx(
       Input,
       {
@@ -3164,7 +3248,7 @@ function PasswordInput({
         type: "button",
         variant: "ghost",
         size: "icon-sm",
-        "data-slot": "password-input-toggle",
+        slotName: "password-input-toggle",
         "aria-label": visible ? hideLabel : showLabel,
         "aria-pressed": visible,
         disabled: props.disabled,
@@ -3176,9 +3260,12 @@ function PasswordInput({
     ) : null
   ] });
 }
-function PlaceholderPattern({ className }) {
+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",
       {
@@ -3211,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,
         {
@@ -3235,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,
         {
@@ -3272,39 +3362,44 @@ 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" })
     }
   );
@@ -3323,6 +3418,7 @@ function SaveStatus({
   savedDuration = SAVED_DURATION,
   labels,
   className,
+  slotName = "save-status",
   ...props
 }) {
   const text = useUiLabels("saveStatus", saveStatusLabels, labels);
@@ -3341,7 +3437,6 @@ function SaveStatus({
     "div",
     {
       ...props,
-      "data-slot": "save-status",
       "data-state": status,
       "data-faded": hidden || void 0,
       role: "status",
@@ -3352,6 +3447,7 @@ function SaveStatus({
         hidden ? "opacity-0" : "opacity-100",
         className
       ),
+      "data-slot": slotName,
       children: [
         status === "idle" && showIdle && /* @__PURE__ */ jsx(
           "span",
@@ -3398,10 +3494,9 @@ function SaveStatus({
     }
   );
 }
-var ScrollArea = React3.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var ScrollArea = React3.forwardRef(({ className, children, slotName = "scroll-area", ...props }, ref) => /* @__PURE__ */ jsxs(
   ScrollAreaPrimitive.Root,
   {
-    "data-slot": "scroll-area",
     ref,
     className: cn(
       elevatedSurface,
@@ -3411,6 +3506,7 @@ var ScrollArea = React3.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, {}),
@@ -3419,22 +3515,29 @@ var ScrollArea = React3.forwardRef(({ className, children, ...props }, ref) => /
   }
 ));
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-var ScrollBar = React3.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,
@@ -3442,6 +3545,7 @@ function Slider({
   value,
   min = 0,
   max = 100,
+  slotName = "slider",
   ...props
 }) {
   const _values = React3.useMemo(
@@ -3451,7 +3555,6 @@ function Slider({
   return /* @__PURE__ */ jsxs(
     Slider$1.Root,
     {
-      "data-slot": "slider",
       defaultValue,
       value,
       min,
@@ -3461,6 +3564,7 @@ function Slider({
         className
       ),
       ...props,
+      "data-slot": slotName,
       children: [
         /* @__PURE__ */ jsx(
           Slider$1.Track,
@@ -3553,6 +3657,7 @@ function StatusBadge({
   status = "neutral",
   dot = false,
   children,
+  slotName = "status-badge",
   ...props
 }) {
   const resolvedStatus = status ?? "neutral";
@@ -3560,13 +3665,13 @@ function StatusBadge({
     Badge,
     {
       variant: "outline",
-      "data-slot": "status-badge",
       "data-status": resolvedStatus,
       className: cn(
         statusBadgeVariants({ status: resolvedStatus }),
         className
       ),
       ...props,
+      slotName,
       children: [
         dot && /* @__PURE__ */ jsx(
           "span",
@@ -3599,16 +3704,17 @@ function TextLink({
   className,
   variant = "default",
   asChild = false,
+  slotName = "text-link",
   ...props
 }) {
   const Comp = asChild ? Slot : "a";
   return /* @__PURE__ */ jsx(
     Comp,
     {
-      "data-slot": "text-link",
       "data-variant": variant,
       className: cn(textLinkVariants({ variant }), className),
-      ...props
+      ...props,
+      "data-slot": slotName
     }
   );
 }