@olwiba/cn 0.1.26 → 0.1.27

package/dist/index.js

@@ -142,23 +142,26 @@ var alertVariants = cva(
     }
   }
 );
-var Alert = React37.forwardRef(({ className, variant, mode, size, disabled, ...props }, ref) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    ref,
-    role: "alert",
-    className: cn(
-      alertVariants({ variant }),
-      size === "sm" && "p-3 text-xs [&>svg]:top-3 [&>svg]:left-3",
-      size === "lg" && "p-6 text-base [&>svg]:top-6 [&>svg]:left-6",
-      mode === "smooth" && "rounded-2xl",
-      mode === "playful" && "border-l-4",
-      disabled && "opacity-50 pointer-events-none",
-      className
-    ),
-    ...props
-  }
-));
+var Alert = React37.forwardRef(({ className, variant, mode: modeProp, size, disabled, ...props }, ref) => {
+  const mode = modeProp ?? useUIVariant();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role: "alert",
+      className: cn(
+        alertVariants({ variant }),
+        size === "sm" && "p-3 text-xs [&>svg]:top-3 [&>svg]:left-3",
+        size === "lg" && "p-6 text-base [&>svg]:top-6 [&>svg]:left-6",
+        mode === "smooth" && "rounded-2xl",
+        mode === "playful" && "border-l-4",
+        disabled && "opacity-50 pointer-events-none",
+        className
+      ),
+      ...props
+    }
+  );
+});
 Alert.displayName = "Alert";
 var AlertTitle = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "h5",
@@ -178,6 +181,12 @@ var AlertDescription = React37.forwardRef(({ className, ...props }, ref) => /* @
   }
 ));
 AlertDescription.displayName = "AlertDescription";
+
+// src/components/ui/glass.ts
+var glassBlur = "backdrop-blur-xl backdrop-saturate-150";
+var glassSurface = "border border-white/20 bg-background/60 backdrop-blur-xl backdrop-saturate-150 shadow-lg shadow-black/10 dark:border-white/10 dark:bg-background/40";
+var glassPanel = "border border-white/20 bg-popover/70 backdrop-blur-lg backdrop-saturate-150 shadow-lg shadow-black/10 dark:border-white/10 dark:bg-popover/50";
+var glassControl = "border border-white/25 bg-background/50 backdrop-blur-md backdrop-saturate-150 shadow-sm shadow-black/10 dark:border-white/10 dark:bg-background/30";
 var buttonVariants = cva(
   "inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-semibold transition-all duration-200 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/20 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
@@ -203,6 +212,12 @@ var buttonVariants = cva(
     }
   }
 );
+var glassButtonBg = {
+  default: "bg-primary/75 hover:bg-primary/60",
+  destructive: "bg-destructive/75 hover:bg-destructive/60",
+  outline: "bg-background/40 hover:bg-background/60",
+  secondary: "bg-secondary/50 hover:bg-secondary/40"
+};
 var Button = React37.forwardRef(
   ({ className, variant, size, asChild = false, mode: modeProp, ...props }, ref) => {
     const mode = modeProp ?? useUIVariant();
@@ -236,12 +251,18 @@ var Button = React37.forwardRef(
         )
       ] });
     }
+    const isGlass = mode === "glass" && variant !== "ghost" && variant !== "link";
     return /* @__PURE__ */ jsx(
       Comp,
       {
         className: cn(
           buttonVariants({ variant, size, className }),
-          mode === "smooth" && "rounded-full shadow-none"
+          mode === "smooth" && "rounded-full shadow-none",
+          isGlass && cn(
+            glassBlur,
+            "border border-white/25 shadow-sm shadow-black/10 dark:border-white/15",
+            glassButtonBg[variant ?? "default"]
+          )
         ),
         ref,
         ...props
@@ -265,24 +286,27 @@ var AlertDialogOverlay = React37.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
-var AlertDialogContent = React37.forwardRef(({ className, mode, children, ...props }, ref) => /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [
-  /* @__PURE__ */ jsx(AlertDialogOverlay, {}),
-  /* @__PURE__ */ jsx(
-    AlertDialogPrimitive.Content,
-    {
-      ref,
-      className: cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 duration-200 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-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-top-[48%]",
-        !mode && "shadow-lg sm:rounded-lg",
-        mode === "smooth" && "rounded-2xl shadow-xl",
-        mode === "playful" && "rounded-xl border-2 shadow-lg shadow-primary/10",
-        className
-      ),
-      ...props,
-      children: /* @__PURE__ */ jsx(UIVariantProvider, { mode, children })
-    }
-  )
-] }));
+var AlertDialogContent = React37.forwardRef(({ className, mode: modeProp, children, ...props }, ref) => {
+  const mode = modeProp ?? useUIVariant();
+  return /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [
+    /* @__PURE__ */ jsx(AlertDialogOverlay, {}),
+    /* @__PURE__ */ jsx(
+      AlertDialogPrimitive.Content,
+      {
+        ref,
+        className: cn(
+          "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 duration-200 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-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-top-[48%]",
+          !mode && "shadow-lg sm:rounded-lg",
+          mode === "smooth" && "rounded-2xl shadow-xl",
+          mode === "playful" && "rounded-xl border-2 shadow-lg shadow-primary/10",
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsx(UIVariantProvider, { mode, children })
+      }
+    )
+  ] });
+});
 AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
 var AlertDialogHeader = ({
   className,
@@ -940,6 +964,7 @@ var Card = React37.forwardRef(
         className: cn(
           "rounded-lg border bg-card text-card-foreground shadow-sm",
           mode === "smooth" && "rounded-3xl",
+          mode === "glass" && cn(glassSurface, "rounded-xl"),
           className
         ),
         ...props
@@ -1527,30 +1552,34 @@ var DialogOverlay = React37.forwardRef(({ className, ...props }, ref) => /* @__P
   }
 ));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-var DialogContent = React37.forwardRef(({ className, mode, children, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
-  /* @__PURE__ */ jsx(DialogOverlay, {}),
-  /* @__PURE__ */ jsx(
-    DialogPrimitive.Content,
-    {
-      ref,
-      className: cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 duration-200 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]:slide-out-to-top-full data-[state=open]:slide-in-from-top-full",
-        !mode && "shadow-lg sm:rounded-lg",
-        mode === "smooth" && "rounded-2xl shadow-xl",
-        mode === "playful" && "rounded-xl border-2 shadow-lg shadow-primary/10",
-        className
-      ),
-      ...props,
-      children: /* @__PURE__ */ jsxs(UIVariantProvider, { mode, children: [
-        children,
-        /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [
-          /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
-          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+var DialogContent = React37.forwardRef(({ className, mode: modeProp, children, ...props }, ref) => {
+  const mode = modeProp ?? useUIVariant();
+  return /* @__PURE__ */ jsxs(DialogPortal, { children: [
+    /* @__PURE__ */ jsx(DialogOverlay, { className: mode === "glass" ? "bg-black/40" : void 0 }),
+    /* @__PURE__ */ jsx(
+      DialogPrimitive.Content,
+      {
+        ref,
+        className: cn(
+          "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 duration-200 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]:slide-out-to-top-full data-[state=open]:slide-in-from-top-full",
+          !mode && "shadow-lg sm:rounded-lg",
+          mode === "smooth" && "rounded-2xl shadow-xl",
+          mode === "playful" && "rounded-xl border-2 shadow-lg shadow-primary/10",
+          mode === "glass" && cn(glassSurface, "rounded-2xl"),
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsxs(UIVariantProvider, { mode, children: [
+          children,
+          /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [
+            /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
+            /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+          ] })
         ] })
-      ] })
-    }
-  )
-] }));
+      }
+    )
+  ] });
+});
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 var DialogHeader = ({
   className,
@@ -1644,20 +1673,45 @@ function useIsMac() {
   return isMac;
 }
 var Hotkey = React37.forwardRef(
-  ({ shortcut, asKbd = false, className, ...props }, ref) => {
+  ({ shortcut, asKbd = false, mode: modeProp, className, ...props }, ref) => {
     const isMac = useIsMac();
     const content = formatShortcut(shortcut, isMac);
+    const mode = modeProp ?? useUIVariant();
     if (asKbd) {
+      const kbdClasses = cn(
+        "bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 select-none items-center justify-center gap-1 px-1 font-sans text-xs font-medium",
+        "[&_svg:not([class*='size-'])]:size-3",
+        !mode && "rounded-sm",
+        mode === "smooth" && "rounded-md",
+        mode === "playful" && "rounded-sm"
+      );
+      if (mode === "playful") {
+        return /* @__PURE__ */ jsxs("span", { className: "group/playful relative inline-flex", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "absolute inset-0 rounded-sm bg-primary/30 dark:bg-primary/20 transition-transform duration-200 translate-x-[2px] translate-y-[2px] -rotate-[3deg] group-hover/playful:-rotate-[5deg]"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "kbd",
+            {
+              ref,
+              "data-slot": "hotkey",
+              className: cn(kbdClasses, "relative rotate-[1.5deg]", className),
+              ...props,
+              children: content
+            }
+          )
+        ] });
+      }
       return /* @__PURE__ */ jsx(
         "kbd",
         {
           ref,
           "data-slot": "hotkey",
-          className: cn(
-            "bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 select-none items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium",
-            "[&_svg:not([class*='size-'])]:size-3",
-            className
-          ),
+          className: cn(kbdClasses, className),
           ...props,
           children: content
         }
@@ -1798,92 +1852,132 @@ var ContextMenuGroup = ContextMenuPrimitive.Group;
 var ContextMenuPortal = ContextMenuPrimitive.Portal;
 var ContextMenuSub = ContextMenuPrimitive.Sub;
 var ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
-var ContextMenuSubTrigger = React37.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
-  ContextMenuPrimitive.SubTrigger,
-  {
-    ref,
-    className: cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
-      inset && "pl-8",
-      className
-    ),
-    ...props,
-    children: [
-      children,
-      /* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto h-4 w-4" })
-    ]
-  }
-));
+var ContextMenuSubTrigger = React37.forwardRef(({ className, inset, children, ...props }, ref) => {
+  const mode = useUIVariant();
+  return /* @__PURE__ */ jsxs(
+    ContextMenuPrimitive.SubTrigger,
+    {
+      ref,
+      className: cn(
+        "flex cursor-default select-none items-center px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+        !mode && "rounded-sm",
+        mode === "smooth" && "rounded-lg",
+        mode === "playful" && "rounded-lg",
+        inset && "pl-8",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto h-4 w-4" })
+      ]
+    }
+  );
+});
 ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
-var ContextMenuSubContent = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  ContextMenuPrimitive.SubContent,
-  {
-    ref,
-    className: cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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 origin-[--radix-context-menu-content-transform-origin]",
-      className
-    ),
-    ...props
-  }
-));
+var ContextMenuSubContent = React37.forwardRef(({ className, mode: modeProp, children, ...props }, ref) => {
+  const inheritedMode = useUIVariant();
+  const mode = modeProp ?? inheritedMode;
+  return /* @__PURE__ */ jsx(
+    ContextMenuPrimitive.SubContent,
+    {
+      ref,
+      className: cn(
+        "z-50 min-w-[8rem] overflow-hidden border bg-popover p-1 text-popover-foreground 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 origin-[--radix-context-menu-content-transform-origin]",
+        !mode && "rounded-md shadow-md",
+        mode === "smooth" && "rounded-2xl shadow-xl",
+        mode === "playful" && "rounded-xl border-2 shadow-lg shadow-primary/10",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(UIVariantProvider, { mode, children })
+    }
+  );
+});
 ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
-var ContextMenuContent = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
-  ContextMenuPrimitive.Content,
-  {
-    ref,
-    className: cn(
-      "z-50 max-h-[--radix-context-menu-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 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 origin-[--radix-context-menu-content-transform-origin]",
-      className
-    ),
-    ...props
-  }
-) }));
+var ContextMenuContent = React37.forwardRef(({ className, mode: modeProp, children, ...props }, ref) => {
+  const inheritedMode = useUIVariant();
+  const mode = modeProp ?? inheritedMode;
+  return /* @__PURE__ */ jsx(ContextMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+    ContextMenuPrimitive.Content,
+    {
+      ref,
+      className: cn(
+        "z-50 max-h-[--radix-context-menu-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden border bg-popover p-1 text-popover-foreground animate-in fade-in-80 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 origin-[--radix-context-menu-content-transform-origin]",
+        !mode && "rounded-md shadow-md",
+        mode === "smooth" && "rounded-2xl shadow-xl",
+        mode === "playful" && "rounded-xl border-2 shadow-lg shadow-primary/10",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(UIVariantProvider, { mode, children })
+    }
+  ) });
+});
 ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
-var ContextMenuItem = React37.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
-  ContextMenuPrimitive.Item,
-  {
-    ref,
-    className: cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      inset && "pl-8",
-      className
-    ),
-    ...props
-  }
-));
+var ContextMenuItem = React37.forwardRef(({ className, inset, ...props }, ref) => {
+  const mode = useUIVariant();
+  return /* @__PURE__ */ jsx(
+    ContextMenuPrimitive.Item,
+    {
+      ref,
+      className: cn(
+        "relative flex cursor-default select-none items-center px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        !mode && "rounded-sm",
+        mode === "smooth" && "rounded-lg",
+        mode === "playful" && "rounded-lg",
+        inset && "pl-8",
+        className
+      ),
+      ...props
+    }
+  );
+});
 ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
-var ContextMenuCheckboxItem = React37.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
-  ContextMenuPrimitive.CheckboxItem,
-  {
-    ref,
-    className: cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    ),
-    checked,
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }) }),
-      children
-    ]
-  }
-));
+var ContextMenuCheckboxItem = React37.forwardRef(({ className, children, checked, ...props }, ref) => {
+  const mode = useUIVariant();
+  return /* @__PURE__ */ jsxs(
+    ContextMenuPrimitive.CheckboxItem,
+    {
+      ref,
+      className: cn(
+        "relative flex cursor-default select-none items-center py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        !mode && "rounded-sm",
+        mode === "smooth" && "rounded-lg",
+        mode === "playful" && "rounded-lg",
+        className
+      ),
+      checked,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }) }),
+        children
+      ]
+    }
+  );
+});
 ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName;
-var ContextMenuRadioItem = React37.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
-  ContextMenuPrimitive.RadioItem,
-  {
-    ref,
-    className: cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    ),
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Circle, { className: "h-2 w-2 fill-current" }) }) }),
-      children
-    ]
-  }
-));
+var ContextMenuRadioItem = React37.forwardRef(({ className, children, ...props }, ref) => {
+  const mode = useUIVariant();
+  return /* @__PURE__ */ jsxs(
+    ContextMenuPrimitive.RadioItem,
+    {
+      ref,
+      className: cn(
+        "relative flex cursor-default select-none items-center py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        !mode && "rounded-sm",
+        mode === "smooth" && "rounded-lg",
+        mode === "playful" && "rounded-lg",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Circle, { className: "h-2 w-2 fill-current" }) }) }),
+        children
+      ]
+    }
+  );
+});
 ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
 var ContextMenuLabel = React37.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
   ContextMenuPrimitive.Label,
@@ -1949,27 +2043,30 @@ var DrawerOverlay = React37.forwardRef(({ className, ...props }, ref) => /* @__P
   }
 ));
 DrawerOverlay.displayName = Drawer$1.Overlay.displayName;
-var DrawerContent = React37.forwardRef(({ className, mode, children, ...props }, ref) => /* @__PURE__ */ jsxs(DrawerPortal, { children: [
-  /* @__PURE__ */ jsx(DrawerOverlay, {}),
-  /* @__PURE__ */ jsx(
-    Drawer$1.Content,
-    {
-      ref,
-      className: cn(
-        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col border bg-background",
-        !mode && "rounded-t-[10px]",
-        mode === "smooth" && "rounded-t-2xl shadow-xl",
-        mode === "playful" && "rounded-t-xl border-2 shadow-lg shadow-primary/10",
-        className
-      ),
-      ...props,
-      children: /* @__PURE__ */ jsxs(UIVariantProvider, { mode, children: [
-        /* @__PURE__ */ jsx("div", { className: "mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" }),
-        children
-      ] })
-    }
-  )
-] }));
+var DrawerContent = React37.forwardRef(({ className, mode: modeProp, children, ...props }, ref) => {
+  const mode = modeProp ?? useUIVariant();
+  return /* @__PURE__ */ jsxs(DrawerPortal, { children: [
+    /* @__PURE__ */ jsx(DrawerOverlay, {}),
+    /* @__PURE__ */ jsx(
+      Drawer$1.Content,
+      {
+        ref,
+        className: cn(
+          "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col border bg-background",
+          !mode && "rounded-t-[10px]",
+          mode === "smooth" && "rounded-t-2xl shadow-xl",
+          mode === "playful" && "rounded-t-xl border-2 shadow-lg shadow-primary/10",
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsxs(UIVariantProvider, { mode, children: [
+          /* @__PURE__ */ jsx("div", { className: "mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" }),
+          children
+        ] })
+      }
+    )
+  ] });
+});
 DrawerContent.displayName = "DrawerContent";
 var DrawerHeader = ({
   className,
@@ -2645,6 +2742,7 @@ var Input = React37.forwardRef(
           "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm aria-invalid:border-destructive aria-invalid:focus-visible:ring-destructive/20",
           mode === "smooth" && "rounded-full",
           mode === "playful" && "relative z-10",
+          mode === "glass" && glassControl,
           className
         ),
         ref,
@@ -2707,10 +2805,11 @@ var Textarea = React37.forwardRef(
 Textarea.displayName = "Textarea";
 function InputGroup({
   className,
-  mode,
+  mode: modeProp,
   disabled,
   ...props
 }) {
+  const mode = modeProp ?? useUIVariant();
   return /* @__PURE__ */ jsx(UIVariantProvider, { mode, children: /* @__PURE__ */ jsx(
     "div",
     {
@@ -3125,20 +3224,36 @@ function ItemFooter({ className, ...props }) {
     }
   );
 }
-function Kbd({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "kbd",
-    {
-      "data-slot": "kbd",
-      className: cn(
-        "bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 select-none items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium",
-        "[&_svg:not([class*='size-'])]:size-3",
-        "[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10",
-        className
-      ),
-      ...props
-    }
+function Kbd({ className, mode: modeProp, ...props }) {
+  const mode = modeProp ?? useUIVariant();
+  const baseClasses = cn(
+    "bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 select-none items-center justify-center gap-1 px-1 font-sans text-xs font-medium",
+    "[&_svg:not([class*='size-'])]:size-3",
+    "[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10",
+    !mode && "rounded-sm",
+    mode === "smooth" && "rounded-md",
+    mode === "playful" && "rounded-sm"
   );
+  if (mode === "playful") {
+    return /* @__PURE__ */ jsxs("span", { className: "group/playful relative inline-flex", children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: "absolute inset-0 rounded-sm bg-primary/30 dark:bg-primary/20 transition-transform duration-200 translate-x-[2px] translate-y-[2px] -rotate-[3deg] group-hover/playful:-rotate-[5deg]"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "kbd",
+        {
+          "data-slot": "kbd",
+          className: cn(baseClasses, "relative rotate-[1.5deg]", className),
+          ...props
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsx("kbd", { "data-slot": "kbd", className: cn(baseClasses, className), ...props });
 }
 function KbdGroup({ className, ...props }) {
   return /* @__PURE__ */ jsx(
@@ -3700,6 +3815,7 @@ var PopoverContent = React37.forwardRef(({ className, align = "center", sideOffs
         !mode && "rounded-md shadow-md",
         mode === "smooth" && "rounded-2xl shadow-xl",
         mode === "playful" && "rounded-xl border-2 shadow-lg shadow-primary/10",
+        mode === "glass" && cn(glassPanel, "rounded-xl"),
         className
       ),
       ...props,
@@ -3708,27 +3824,43 @@ var PopoverContent = React37.forwardRef(({ className, align = "center", sideOffs
   ) });
 });
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
-var Progress = React37.forwardRef(({ className, value, disabled = false, ...props }, ref) => /* @__PURE__ */ jsx(
-  ProgressPrimitive.Root,
-  {
-    ref,
-    "aria-disabled": disabled || void 0,
-    "data-disabled": disabled ? "" : void 0,
-    className: cn(
-      "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
-      disabled && "opacity-50",
-      className
-    ),
-    ...props,
-    children: /* @__PURE__ */ jsx(
-      ProgressPrimitive.Indicator,
-      {
-        className: "h-full w-full flex-1 bg-primary transition-all",
-        style: { transform: `translateX(-${100 - (value || 0)}%)` }
-      }
-    )
+var Progress = React37.forwardRef(({ className, value, disabled = false, mode: modeProp, ...props }, ref) => {
+  const mode = modeProp ?? useUIVariant();
+  const bar = /* @__PURE__ */ jsx(
+    ProgressPrimitive.Root,
+    {
+      ref,
+      "aria-disabled": disabled || void 0,
+      "data-disabled": disabled ? "" : void 0,
+      className: cn(
+        "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
+        disabled && "opacity-50",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        ProgressPrimitive.Indicator,
+        {
+          className: "h-full w-full flex-1 bg-primary transition-all",
+          style: { transform: `translateX(-${100 - (value || 0)}%)` }
+        }
+      )
+    }
+  );
+  if (mode === "playful") {
+    return /* @__PURE__ */ jsxs("div", { className: "group/playful relative", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-hidden": "true",
+          className: "absolute inset-0 rounded-full bg-border transition-transform duration-200 translate-x-[3px] translate-y-[3px] -rotate-[0.5deg] group-hover/playful:-rotate-[1.5deg]"
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "relative", children: bar })
+    ] });
   }
-));
+  return bar;
+});
 Progress.displayName = ProgressPrimitive.Root.displayName;
 var RadioGroup4 = React37.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
@@ -3741,7 +3873,31 @@ var RadioGroup4 = React37.forwardRef(({ className, ...props }, ref) => {
   );
 });
 RadioGroup4.displayName = RadioGroupPrimitive.Root.displayName;
-var RadioGroupItem = React37.forwardRef(({ className, ...props }, ref) => {
+var RadioGroupItem = React37.forwardRef(({ className, mode: modeProp, ...props }, ref) => {
+  const mode = modeProp ?? useUIVariant();
+  if (mode === "playful") {
+    return /* @__PURE__ */ jsxs("span", { className: "group/playful relative inline-flex", children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: "absolute inset-0 rounded-full bg-primary/30 dark:bg-primary/20 transition-transform duration-200 translate-x-[2px] translate-y-[2px] -rotate-[3deg] group-hover/playful:-rotate-[5deg]"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        RadioGroupPrimitive.Item,
+        {
+          ref,
+          className: cn(
+            "relative aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+            className
+          ),
+          ...props,
+          children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(Circle, { className: "h-2.5 w-2.5 fill-current text-current" }) })
+        }
+      )
+    ] });
+  }
   return /* @__PURE__ */ jsx(
     RadioGroupPrimitive.Item,
     {
@@ -3987,29 +4143,32 @@ var sideRoundingPlayful = {
   top: "rounded-b-xl",
   bottom: "rounded-t-xl"
 };
-var SheetContent = React37.forwardRef(({ side = "right", className, children, container, mode, ...props }, ref) => /* @__PURE__ */ jsxs(SheetPortal, { container: container ?? void 0, children: [
-  /* @__PURE__ */ jsx(SheetOverlay, {}),
-  /* @__PURE__ */ jsx(
-    DialogPrimitive.Content,
-    {
-      ref,
-      className: cn(
-        sheetVariants({ side }),
-        mode === "smooth" && `${sideRoundingSmooth[side ?? "right"]} shadow-xl`,
-        mode === "playful" && `${sideRoundingPlayful[side ?? "right"]} border-2 shadow-lg shadow-primary/10`,
-        className
-      ),
-      ...props,
-      children: /* @__PURE__ */ jsxs(UIVariantProvider, { mode, children: [
-        children,
-        /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary", children: [
-          /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
-          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+var SheetContent = React37.forwardRef(({ side = "right", className, children, container, mode: modeProp, ...props }, ref) => {
+  const mode = modeProp ?? useUIVariant();
+  return /* @__PURE__ */ jsxs(SheetPortal, { container: container ?? void 0, children: [
+    /* @__PURE__ */ jsx(SheetOverlay, {}),
+    /* @__PURE__ */ jsx(
+      DialogPrimitive.Content,
+      {
+        ref,
+        className: cn(
+          sheetVariants({ side }),
+          mode === "smooth" && `${sideRoundingSmooth[side ?? "right"]} shadow-xl`,
+          mode === "playful" && `${sideRoundingPlayful[side ?? "right"]} border-2 shadow-lg shadow-primary/10`,
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsxs(UIVariantProvider, { mode, children: [
+          children,
+          /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary", children: [
+            /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
+            /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+          ] })
         ] })
-      ] })
-    }
-  )
-] }));
+      }
+    )
+  ] });
+});
 SheetContent.displayName = DialogPrimitive.Content.displayName;
 var SheetHeader = ({
   className,
@@ -4086,21 +4245,25 @@ function Skeleton({
 var TooltipProvider = TooltipPrimitive.Provider;
 var Tooltip2 = TooltipPrimitive.Root;
 var TooltipTrigger = TooltipPrimitive.Trigger;
-var TooltipContent = React37.forwardRef(({ className, sideOffset = 4, mode, children, ...props }, ref) => /* @__PURE__ */ jsx(
-  TooltipPrimitive.Content,
-  {
-    ref,
-    sideOffset,
-    className: cn(
-      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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 origin-[--radix-tooltip-content-transform-origin]",
-      mode === "smooth" && "rounded-xl shadow-xl",
-      mode === "playful" && "rounded-lg border-2 shadow-md shadow-primary/10",
-      className
-    ),
-    ...props,
-    children: /* @__PURE__ */ jsx(UIVariantProvider, { mode, children })
-  }
-));
+var TooltipContent = React37.forwardRef(({ className, sideOffset = 4, mode: modeProp, children, ...props }, ref) => {
+  const mode = modeProp ?? useUIVariant();
+  return /* @__PURE__ */ jsx(
+    TooltipPrimitive.Content,
+    {
+      ref,
+      sideOffset,
+      className: cn(
+        "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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 origin-[--radix-tooltip-content-transform-origin]",
+        mode === "smooth" && "rounded-xl shadow-xl",
+        mode === "playful" && "rounded-lg border-2 shadow-md shadow-primary/10",
+        mode === "glass" && cn(glassPanel, "rounded-lg"),
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(UIVariantProvider, { mode, children })
+    }
+  );
+});
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 var SIDEBAR_COOKIE_NAME = "sidebar_state";
 var SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
@@ -4826,8 +4989,9 @@ var Slider = React37.forwardRef(({ className, size = "default", ...props }, ref)
   }
 ));
 Slider.displayName = SliderPrimitive.Root.displayName;
-var Toaster = ({ mode, className, style, ...props }) => {
+var Toaster = ({ mode: modeProp, className, style, ...props }) => {
   const { theme = "system" } = useTheme();
+  const mode = modeProp ?? useUIVariant();
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     mode === "smooth" && /* @__PURE__ */ jsx("style", { children: `[data-sonner-toaster].toaster-smooth { --border-radius: 1.5rem; }` }),
     mode === "playful" && /* @__PURE__ */ jsx("style", { children: `
@@ -4954,8 +5118,41 @@ var switchSizes = {
     thumb: "size-6 data-[state=checked]:translate-x-7"
   }
 };
-var Switch = React37.forwardRef(({ className, size = "default", ...props }, ref) => {
+var Switch = React37.forwardRef(({ className, size = "default", mode: modeProp, ...props }, ref) => {
+  const mode = modeProp ?? useUIVariant();
   const sizes = switchSizes[size];
+  if (mode === "playful") {
+    return /* @__PURE__ */ jsxs("span", { className: "group/playful relative inline-flex", children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: "absolute inset-0 rounded-full bg-primary/30 dark:bg-primary/20 transition-transform duration-200 translate-x-[2px] translate-y-[2px] -rotate-[3deg] group-hover/playful:-rotate-[5deg]"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        SwitchPrimitives.Root,
+        {
+          className: cn(
+            "relative peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input rotate-[1.5deg]",
+            sizes.root,
+            className
+          ),
+          ...props,
+          ref,
+          children: /* @__PURE__ */ jsx(
+            SwitchPrimitives.Thumb,
+            {
+              className: cn(
+                "pointer-events-none block rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=unchecked]:translate-x-0",
+                sizes.thumb
+              )
+            }
+          )
+        }
+      )
+    ] });
+  }
   return /* @__PURE__ */ jsx(
     SwitchPrimitives.Root,
     {
@@ -6818,12 +7015,13 @@ function AsciiText({
     }
   ) });
 }
+var SHINE_SPEED = 1.0125;
 function getShineAlpha(col, row, time, bounds) {
   const span = bounds.max - bounds.min + 1;
   const travel = span + 6;
   const diagonalCol = col + row * 0.62;
-  const primarySweep = bounds.max + 3 - time * 1.35 % 1 * travel;
-  const secondarySweep = bounds.max + 3 - (time * 1.35 + 0.5) % 1 * travel;
+  const primarySweep = bounds.max + 3 - time * SHINE_SPEED % 1 * travel;
+  const secondarySweep = bounds.max + 3 - (time * SHINE_SPEED + 0.5) % 1 * travel;
   const primary = getShineBandAlpha(diagonalCol, primarySweep);
   const secondary = getShineBandAlpha(diagonalCol, secondarySweep);
   return Math.min(0.86, primary + secondary * 0.82);