@akira-io/ui 1.1.0 → 1.2.0

package/dist/{chunk-UUTXPPRN.js → chunk-DW42Z75X.js}

@@ -1,7 +1,7 @@
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, Label, DialogFooter } from './chunk-6QM5BA7B.js';
-import { useUiLabels } from './chunk-5AJFQ6C4.js';
-import { Input } from './chunk-6X4TKSF6.js';
-import { elevatedSurface, cn, panelSurface, glassControl, controlFill, focusRing, nestedSurfaceReset, fieldSurface, Button, buttonVariants, modalSurface, menuSurface } from './chunk-DSD7MVLL.js';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, Label, DialogFooter } from './chunk-O5DZTX7D.js';
+import { useUiLabels } from './chunk-QNF4LJVT.js';
+import { Input } from './chunk-UTSTTTH5.js';
+import { elevatedSurface, cn, panelSurface, glassControl, controlFill, focusRing, nestedSurfaceReset, fieldSurface, fieldFocus, Button, buttonVariants, modalSurface, menuSurface } from './chunk-I5UZAJB4.js';
 import { Minus, AlertCircle, ChevronRight, ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon, SearchIcon, SearchXIcon, CheckIcon, ChevronUpIcon, ArrowLeftIcon, XIcon } from 'lucide-react';
 import * as React6 from 'react';
 import { useId, useState, useEffect } from 'react';
@@ -35,7 +35,8 @@ function ConfirmDialog({
   requiredValue,
   requiredValueLabel = "Type {{value}} to confirm",
   onConfirm,
-  onCancel
+  onCancel,
+  slotName = "confirm-dialog"
 }) {
   const labels = useUiLabels("confirmDialog", confirmDialogDefaultLabels, {
     title,
@@ -65,7 +66,7 @@ function ConfirmDialog({
     onCancel?.();
     onOpenChange(false);
   };
-  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-md p-0", "data-slot": "confirm-dialog", children: [
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-md p-0", slotName, children: [
     /* @__PURE__ */ jsxs(DialogHeader, { className: "p-6 md:p-8", children: [
       /* @__PURE__ */ jsx("div", { className: "mb-6 flex justify-center", children: /* @__PURE__ */ jsx(
         "div",
@@ -136,7 +137,9 @@ var alertVariants = cva(
     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"
+        destructive: "border-destructive/30 bg-destructive/10 text-destructive [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/80",
+        warning: "ring-warning/20 bg-warning/10 text-warning *:data-[slot=alert-description]:text-warning/80",
+        info: "ring-info/20 bg-info/10 text-info *:data-[slot=alert-description]:text-info/80"
       }
     },
     defaultVariants: {
@@ -144,47 +147,65 @@ var alertVariants = cva(
     }
   }
 );
+var alertDefaultLabels = {
+  warningLabel: "Warning",
+  infoLabel: "Information"
+};
+var SEVERITY_LABELS = {
+  warning: "warningLabel",
+  info: "infoLabel"
+};
 function Alert({
   className,
   variant,
+  labels,
+  slotName = "alert",
   ...props
 }) {
+  const resolved = useUiLabels("alert", alertDefaultLabels, labels);
+  const severity = variant ? SEVERITY_LABELS[variant] : void 0;
   return /* @__PURE__ */ jsx(
     "div",
     {
-      "data-slot": "alert",
       role: "alert",
+      "aria-label": severity ? resolved[severity] : void 0,
       className: cn(alertVariants({ variant }), className),
-      ...props
+      ...props,
+      "data-slot": slotName
     }
   );
 }
-function AlertTitle({ className, ...props }) {
+function AlertTitle({
+  className,
+  slotName = "alert-title",
+  ...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
+      ...props,
+      "data-slot": slotName
     }
   );
 }
 function AlertDescription({
   className,
+  slotName = "alert-description",
   ...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
+      ...props,
+      "data-slot": slotName
     }
   );
 }
@@ -196,6 +217,7 @@ function Calendar({
   buttonVariant = "ghost",
   formatters,
   components,
+  slotName = "calendar",
   ...props
 }) {
   const defaultClassNames = getDefaultClassNames();
@@ -249,7 +271,7 @@ function Calendar({
           defaultClassNames.dropdowns
         ),
         dropdown_root: cn(
-          "shadow-xs rounded-xl relative border border-border has-focus:border-ring has-focus:ring-[3px] has-focus:ring-ring/50",
+          "shadow-xs rounded-xl relative border border-border has-focus:outline-1 has-focus:outline-offset-0 has-focus:outline-ring has-focus:outline-solid",
           defaultClassNames.dropdown_root
         ),
         dropdown: cn(
@@ -316,10 +338,10 @@ function Calendar({
           return /* @__PURE__ */ jsx(
             "div",
             {
-              "data-slot": "calendar",
               ref: rootRef,
               className: cn(className2),
-              ...props2
+              ...props2,
+              "data-slot": slotName
             }
           );
         },
@@ -393,19 +415,20 @@ function CalendarDayButton({
 }
 function Command({
   className,
+  slotName = "command",
   ...props
 }) {
   return /* @__PURE__ */ jsx(
     Command$1,
     {
-      "data-slot": "command",
       className: cn(
         elevatedSurface,
         nestedSurfaceReset,
         "flex h-full w-full flex-col overflow-hidden bg-card text-card-foreground",
         className
       ),
-      ...props
+      ...props,
+      "data-slot": slotName
     }
   );
 }
@@ -437,6 +460,7 @@ function CommandDialog({
 }
 function CommandInput({
   className,
+  slotName = "command-input",
   ...props
 }) {
   return /* @__PURE__ */ jsx("div", { className: "shrink-0 border-b border-border", children: /* @__PURE__ */ jsxs(
@@ -452,12 +476,12 @@ function CommandInput({
         /* @__PURE__ */ jsx(
           Command$1.Input,
           {
-            "data-slot": "command-input",
             className: cn(
               "h-11 text-sm font-medium flex w-full bg-transparent outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
               className
             ),
-            ...props
+            ...props,
+            "data-slot": slotName
           }
         )
       ]
@@ -466,34 +490,36 @@ function CommandInput({
 }
 function CommandList({
   className,
+  slotName = "command-list",
   ...props
 }) {
   return /* @__PURE__ */ jsx(
     Command$1.List,
     {
-      "data-slot": "command-list",
       className: cn(
         "scroll-py-1 max-h-[300px] overflow-x-hidden overflow-y-auto",
         className
       ),
-      ...props
+      ...props,
+      "data-slot": slotName
     }
   );
 }
 function CommandEmpty({
   className,
   children,
+  slotName = "command-empty",
   ...props
 }) {
   return /* @__PURE__ */ jsxs(
     Command$1.Empty,
     {
-      "data-slot": "command-empty",
       className: cn(
         "gap-3 px-6 py-10 flex flex-col items-center justify-center text-center",
         className
       ),
       ...props,
+      "data-slot": slotName,
       children: [
         /* @__PURE__ */ jsx("span", { className: "size-10 flex items-center justify-center rounded-full bg-surface-recessed text-muted-foreground", children: /* @__PURE__ */ jsx(SearchXIcon, { className: "size-5" }) }),
         /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children })
@@ -503,112 +529,128 @@ function CommandEmpty({
 }
 function CommandGroup({
   className,
+  slotName = "command-group",
   ...props
 }) {
   return /* @__PURE__ */ jsx(
     Command$1.Group,
     {
-      "data-slot": "command-group",
       className: cn(
         "p-3 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium overflow-hidden text-foreground [&_[cmdk-group-heading]]:text-muted-foreground",
         className
       ),
-      ...props
+      ...props,
+      "data-slot": slotName
     }
   );
 }
 function CommandSeparator({
   className,
+  slotName = "command-separator",
   ...props
 }) {
   return /* @__PURE__ */ jsx(
     Command$1.Separator,
     {
-      "data-slot": "command-separator",
       className: cn("mx-3 h-px bg-border", className),
-      ...props
+      ...props,
+      "data-slot": slotName
     }
   );
 }
 function CommandItem({
   className,
+  slotName = "command-item",
   ...props
 }) {
   return /* @__PURE__ */ jsx(
     Command$1.Item,
     {
-      "data-slot": "command-item",
       className: cn(
         "gap-2 px-2 py-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 rounded-xl relative flex cursor-default items-center outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='text-'])]:text-muted-foreground",
         className
       ),
-      ...props
+      ...props,
+      "data-slot": slotName
     }
   );
 }
 function CommandShortcut({
   className,
+  slotName = "command-shortcut",
   ...props
 }) {
   return /* @__PURE__ */ jsx(
     "span",
     {
-      "data-slot": "command-shortcut",
       className: cn(
         "text-xs tracking-widest ml-auto text-muted-foreground",
         className
       ),
-      ...props
+      ...props,
+      "data-slot": slotName
     }
   );
 }
 var Popover = Popover$1.Root;
 var PopoverTrigger = Popover$1.Trigger;
 var PopoverAnchor = Popover$1.Anchor;
-var PopoverContent = React6.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(Popover$1.Portal, { children: /* @__PURE__ */ jsx(
-  Popover$1.Content,
-  {
-    "data-slot": "popover-content",
-    ref,
-    align,
-    sideOffset,
-    className: cn(
-      `${panelSurface} p-4 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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 z-50 w-full origin-[--radix-popover-content-transform-origin] bg-popover/90 outline-none`,
-      className
-    ),
+var PopoverContent = React6.forwardRef(
+  ({
+    className,
+    align = "center",
+    sideOffset = 4,
+    slotName = "popover-content",
     ...props
-  }
-) }));
+  }, ref) => /* @__PURE__ */ jsx(Popover$1.Portal, { children: /* @__PURE__ */ jsx(
+    Popover$1.Content,
+    {
+      ref,
+      align,
+      sideOffset,
+      className: cn(
+        `${panelSurface} p-4 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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 z-50 w-full origin-[--radix-popover-content-transform-origin] bg-popover/90 outline-none`,
+        className
+      ),
+      ...props,
+      "data-slot": slotName
+    }
+  ) })
+);
 PopoverContent.displayName = Popover$1.Content.displayName;
 function Select({
+  slotName = "select",
   ...props
 }) {
-  return /* @__PURE__ */ jsx(SelectPrimitive.Root, { "data-slot": "select", ...props });
+  return /* @__PURE__ */ jsx(SelectPrimitive.Root, { ...props, "data-slot": slotName });
 }
 function SelectGroup({
+  slotName = "select-group",
   ...props
 }) {
-  return /* @__PURE__ */ jsx(SelectPrimitive.Group, { "data-slot": "select-group", ...props });
+  return /* @__PURE__ */ jsx(SelectPrimitive.Group, { ...props, "data-slot": slotName });
 }
 function SelectValue({
+  slotName = "select-value",
   ...props
 }) {
-  return /* @__PURE__ */ jsx(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
+  return /* @__PURE__ */ jsx(SelectPrimitive.Value, { ...props, "data-slot": slotName });
 }
 function SelectTrigger({
   className,
   children,
+  slotName = "select-trigger",
   ...props
 }) {
   return /* @__PURE__ */ jsxs(
     SelectPrimitive.Trigger,
     {
-      "data-slot": "select-trigger",
       className: cn(
-        `${fieldSurface} h-11 px-4 text-sm font-medium *:data-[slot=select-value]:gap-2 [&_svg:not([class*='size-'])]:size-4 flex w-full items-center justify-between transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0 [&>span]:line-clamp-1 ${focusRing}`,
+        `${fieldSurface} h-11 px-4 text-sm font-medium *:data-[slot=select-value]:gap-2 [&_svg:not([class*='size-'])]:size-4 flex w-full items-center justify-between transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0 [&>span]:line-clamp-1 ${fieldFocus}`,
         className
       ),
       ...props,
+      "data-slot": slotName,
       children: [
         children,
         /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4 opacity-50" }) })
@@ -620,12 +662,12 @@ function SelectContent({
   className,
   children,
   position = "popper",
+  slotName = "select-content",
   ...props
 }) {
   return /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
     SelectPrimitive.Content,
     {
-      "data-slot": "select-content",
       className: cn(
         `${menuSurface} max-h-96 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 relative z-50 min-w-[8rem] overflow-hidden bg-popover/95`,
         position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
@@ -633,6 +675,7 @@ function SelectContent({
       ),
       position,
       ...props,
+      "data-slot": slotName,
       children: [
         /* @__PURE__ */ jsx(SelectScrollUpButton, {}),
         /* @__PURE__ */ jsx(
@@ -652,34 +695,36 @@ function SelectContent({
 }
 function SelectLabel({
   className,
+  slotName = "select-label",
   ...props
 }) {
   return /* @__PURE__ */ jsx(
     SelectPrimitive.Label,
     {
-      "data-slot": "select-label",
       className: cn(
         "px-2 py-1.5 text-xs font-medium tracking-wider text-muted-foreground uppercase",
         className
       ),
-      ...props
+      ...props,
+      "data-slot": slotName
     }
   );
 }
 function SelectItem({
   className,
   children,
+  slotName = "select-item",
   ...props
 }) {
   return /* @__PURE__ */ jsxs(
     SelectPrimitive.Item,
     {
-      "data-slot": "select-item",
       className: cn(
         "gap-2 rounded-xl py-1.5 pr-8 pl-2 text-sm [&_svg:not([class*='size-'])]:size-4 *:[span]:last:gap-2 focus:font-semibold relative flex w-full 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 [&_svg:not([class*='text-'])]:text-muted-foreground *:[span]:last:flex *:[span]:last:items-center",
         className
       ),
       ...props,
+      "data-slot": slotName,
       children: [
         /* @__PURE__ */ jsx("span", { className: "right-2 size-3.5 absolute flex items-center justify-center", children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" }) }) }),
         /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })
@@ -689,50 +734,53 @@ function SelectItem({
 }
 function SelectSeparator({
   className,
+  slotName = "select-separator",
   ...props
 }) {
   return /* @__PURE__ */ jsx(
     SelectPrimitive.Separator,
     {
-      "data-slot": "select-separator",
       className: cn(
         "-mx-1 my-1 pointer-events-none h-px bg-border",
         className
       ),
-      ...props
+      ...props,
+      "data-slot": slotName
     }
   );
 }
 function SelectScrollUpButton({
   className,
+  slotName = "select-scroll-up-button",
   ...props
 }) {
   return /* @__PURE__ */ jsx(
     SelectPrimitive.ScrollUpButton,
     {
-      "data-slot": "select-scroll-up-button",
       className: cn(
         "py-1 flex cursor-default items-center justify-center",
         className
       ),
       ...props,
+      "data-slot": slotName,
       children: /* @__PURE__ */ jsx(ChevronUpIcon, { className: "size-4" })
     }
   );
 }
 function SelectScrollDownButton({
   className,
+  slotName = "select-scroll-down-button",
   ...props
 }) {
   return /* @__PURE__ */ jsx(
     SelectPrimitive.ScrollDownButton,
     {
-      "data-slot": "select-scroll-down-button",
       className: cn(
         "py-1 flex cursor-default items-center justify-center",
         className
       ),
       ...props,
+      "data-slot": slotName,
       children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4" })
     }
   );
@@ -748,7 +796,12 @@ function useField() {
   }
   return field;
 }
-function FieldError({ message, className, ...props }) {
+function FieldError({
+  message,
+  className,
+  slotName = "field-error",
+  ...props
+}) {
   const field = useOptionalField();
   if (!message) {
     return null;
@@ -761,8 +814,8 @@ function FieldError({ message, className, ...props }) {
         "ml-1 text-xs font-medium text-destructive group-data-[orientation=horizontal]/field:col-span-2 group-data-[orientation=horizontal]/field:row-start-3",
         className
       ),
-      "data-slot": "field-error",
       ...props,
+      "data-slot": slotName,
       children: message
     }
   );
@@ -784,7 +837,8 @@ function useFloatingSheetStack() {
 }
 function FloatingSheetStack({
   children,
-  labels
+  labels,
+  slotName = "floating-sheet-stack"
 }) {
   const { backLabel, closeLabel } = useUiLabels(
     "floatingSheet",
@@ -848,7 +902,6 @@ function FloatingSheetStack({
           /* @__PURE__ */ jsxs(
             DialogPrimitive.Content,
             {
-              "data-slot": "floating-sheet-stack",
               "aria-describedby": void 0,
               onEscapeKeyDown: (event) => {
                 event.preventDefault();
@@ -864,6 +917,7 @@ function FloatingSheetStack({
               onOpenAutoFocus: (event) => event.preventDefault(),
               onCloseAutoFocus: (event) => event.preventDefault(),
               className: "inset-y-0 right-0 sm:inset-y-4 sm:right-4 sm:w-[calc(100vw-2rem)] sm:max-w-lg fixed z-50 w-full outline-none",
+              "data-slot": slotName,
               children: [
                 /* @__PURE__ */ jsx(DialogPrimitive.Title, { className: "sr-only", children: top?.title }),
                 /* @__PURE__ */ jsx(
@@ -890,6 +944,7 @@ function FloatingSheet({
   persistent = false,
   className,
   children,
+  slotName = "floating-sheet",
   ...props
 }) {
   const { labels, container, entries, register, unregister, closeAll } = useFloatingSheetStack();
@@ -958,7 +1013,6 @@ function FloatingSheet({
       "section",
       {
         ref: panelRef,
-        "data-slot": "floating-sheet",
         "data-depth": depth,
         role: "dialog",
         "aria-labelledby": titleId,
@@ -976,12 +1030,13 @@ function FloatingSheet({
           className
         ),
         ...props,
+        "data-slot": slotName,
         children: [
           /* @__PURE__ */ jsxs(
             "header",
             {
               "data-slot": "floating-sheet-header",
-              className: "gap-1 p-5 flex flex-col border-b border-border",
+              className: "gap-1 p-5 flex flex-col",
               children: [
                 index > 0 ? /* @__PURE__ */ jsxs(
                   "button",
@@ -1043,30 +1098,32 @@ function FloatingSheet({
 }
 function FloatingSheetBody({
   className,
+  slotName = "floating-sheet-body",
   ...props
 }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      "data-slot": "floating-sheet-body",
       className: cn("p-5 flex-1 overflow-y-auto", className),
-      ...props
+      ...props,
+      "data-slot": slotName
     }
   );
 }
 function FloatingSheetFooter({
   className,
+  slotName = "floating-sheet-footer",
   ...props
 }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      "data-slot": "floating-sheet-footer",
       className: cn(
-        "gap-2 p-5 mt-auto flex items-center justify-end border-t border-border",
+        "gap-2 p-5 mt-auto flex items-center justify-end",
         className
       ),
-      ...props
+      ...props,
+      "data-slot": slotName
     }
   );
 }
@@ -1085,14 +1142,13 @@ var InputOTP = React6.forwardRef(({ className, containerClassName, ...props }, r
 InputOTP.displayName = "InputOTP";
 var InputOTPGroup = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex items-center", className), ...props }));
 InputOTPGroup.displayName = "InputOTPGroup";
-var InputOTPSlot = React6.forwardRef(({ index, className, ...props }, ref) => {
+var InputOTPSlot = React6.forwardRef(({ index, className, slotName = "input-otp-slot", ...props }, ref) => {
   const inputOTPContext = React6.useContext(OTPInputContext);
   const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
   return /* @__PURE__ */ jsxs(
     "div",
     {
       ref,
-      "data-slot": "input-otp-slot",
       className: cn(
         glassControl,
         controlFill,
@@ -1101,6 +1157,7 @@ var InputOTPSlot = React6.forwardRef(({ index, className, ...props }, ref) => {
         className
       ),
       ...props,
+      "data-slot": slotName,
       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" }) })
@@ -1111,16 +1168,16 @@ var InputOTPSlot = React6.forwardRef(({ index, className, ...props }, ref) => {
 InputOTPSlot.displayName = "InputOTPSlot";
 var InputOTPSeparator = React6.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, role: "separator", ...props, children: /* @__PURE__ */ jsx(Minus, {}) }));
 InputOTPSeparator.displayName = "InputOTPSeparator";
-var Switch = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var Switch = React6.forwardRef(({ className, slotName = "switch", ...props }, ref) => /* @__PURE__ */ jsx(
   SwitchPrimitives.Root,
   {
-    "data-slot": "switch",
     className: cn(
       `peer h-6 w-11 shadow-sm inline-flex shrink-0 cursor-pointer items-center rounded-full border border-transparent transition-colors disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input ${focusRing}`,
       className
     ),
     ...props,
     ref,
+    "data-slot": slotName,
     children: /* @__PURE__ */ jsx(
       SwitchPrimitives.Thumb,
       {
@@ -1133,38 +1190,37 @@ var Switch = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   }
 ));
 Switch.displayName = SwitchPrimitives.Root.displayName;
-var Tabs = React6.forwardRef((props, ref) => /* @__PURE__ */ jsx(TabsPrimitive.Root, { "data-slot": "tabs", ref, ...props }));
+var Tabs = React6.forwardRef(({ slotName = "tabs", ...props }, ref) => /* @__PURE__ */ jsx(TabsPrimitive.Root, { ref, ...props, "data-slot": slotName }));
 Tabs.displayName = TabsPrimitive.Root.displayName;
-var TabsList = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TabsList = React6.forwardRef(({ className, slotName = "tabs-list", ...props }, ref) => /* @__PURE__ */ jsx(
   TabsPrimitive.List,
   {
-    "data-slot": "tabs-list",
     ref,
     className: cn(
       "h-11 p-1.5 rounded-2xl inline-flex items-center justify-center bg-muted text-muted-foreground",
       className
     ),
-    ...props
+    ...props,
+    "data-slot": slotName
   }
 ));
 TabsList.displayName = TabsPrimitive.List.displayName;
-var TabsTrigger = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TabsTrigger = React6.forwardRef(({ className, slotName = "tabs-trigger", ...props }, ref) => /* @__PURE__ */ jsx(
   TabsPrimitive.Trigger,
   {
-    "data-slot": "tabs-trigger",
     ref,
     className: cn(
       `px-4 text-sm font-medium data-[state=active]:shadow-sm h-8 rounded-xl data-[state=active]:font-semibold inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground ${focusRing}`,
       className
     ),
-    ...props
+    ...props,
+    "data-slot": slotName
   }
 ));
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-var TabsContent = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TabsContent = React6.forwardRef(({ className, slotName = "tabs-content", ...props }, ref) => /* @__PURE__ */ jsx(
   TabsPrimitive.Content,
   {
-    "data-slot": "tabs-content",
     ref,
     className: cn(
       elevatedSurface,
@@ -1172,29 +1228,30 @@ var TabsContent = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE
       `mt-2 p-5 bg-card ${focusRing}`,
       className
     ),
-    ...props
+    ...props,
+    "data-slot": slotName
   }
 ));
 TabsContent.displayName = TabsPrimitive.Content.displayName;
-var Textarea = React6.forwardRef(({ className, ...props }, ref) => {
+var Textarea = React6.forwardRef(({ className, slotName = "textarea", ...props }, ref) => {
   return /* @__PURE__ */ jsx(
     "textarea",
     {
-      "data-slot": "textarea",
       className: cn(
         fieldSurface,
         "px-4 py-3 text-sm font-medium min-h-24 flex w-full resize-none transition-[color,box-shadow] selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
-        focusRing,
+        fieldFocus,
         "aria-invalid:border-destructive aria-invalid:ring-destructive/20",
         className
       ),
       ref,
-      ...props
+      ...props,
+      "data-slot": slotName
     }
   );
 });
 Textarea.displayName = "Textarea";
 
-export { Alert, AlertDescription, AlertTitle, Calendar, CalendarDayButton, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ConfirmDialog, FieldContext, 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 };
-//# sourceMappingURL=chunk-UUTXPPRN.js.map
-//# sourceMappingURL=chunk-UUTXPPRN.js.map
+export { Alert, AlertDescription, AlertTitle, Calendar, CalendarDayButton, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ConfirmDialog, FieldContext, 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, alertDefaultLabels, confirmDialogDefaultLabels, floatingSheetDefaultLabels, useField };
+//# sourceMappingURL=chunk-DW42Z75X.js.map
+//# sourceMappingURL=chunk-DW42Z75X.js.map