@vuer-ai/vuer-uikit 0.0.4 → 0.0.7

package/dist/{chunk-XPNUQSKQ.mjs → chunk-B2E7AY66.mjs}

@@ -1,4 +1,4 @@
-import { cn } from './chunk-HW6SLBO3.mjs';
+import { cn } from './chunk-KTNZSZ5Y.mjs';
 import { jsx } from 'react/jsx-runtime';
 
 function Card({ className, ...props }) {
@@ -9,12 +9,11 @@ function Card({ className, ...props }) {
       className: cn(
         "flex",
         "flex-col",
-        "gap-lg",
+        "gap-md",
         "min-w-[300px]",
-        "rounded-lg",
+        "rounded-uk-lg",
         "p-lg",
         "bg-bg-primary",
-        "border-text-secondary",
         "shadow-[0_4px_16px_0_var(--color-shadow-secondary)]",
         "liquid:liquid-bg",
         className
@@ -40,8 +39,8 @@ function CardTitle({ className, ...props }) {
       "data-slot": "card-title",
       className: cn(
         "text-text-highlight",
-        "text-[14px]",
-        "leading-[20px]",
+        "text-uk-md",
+        "leading-uk-md",
         "font-medium",
         "vertical-align-middle",
         className
@@ -55,7 +54,7 @@ function CardDescription({ className, ...props }) {
     "div",
     {
       "data-slot": "card-description",
-      className: cn("text-muted-foreground text-sm", className),
+      className: cn("text-text-secondary text-uk-sm leading-uk-sm", className),
       ...props
     }
   );
@@ -67,8 +66,8 @@ function CardAction({ className, ...props }) {
       "data-slot": "card-action",
       className: cn(
         "text-text-secondary",
-        "text-[11px]",
-        "leading-[14px]",
+        "text-uk-sm",
+        "leading-uk-sm",
         "font-medium",
         "vertical-align-middle",
         className
@@ -81,14 +80,7 @@ function CardContent({ className, ...props }) {
   return /* @__PURE__ */ jsx("div", { "data-slot": "card-content", className: cn("", className), ...props });
 }
 function CardFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "card-footer",
-      className: cn("[.border-t]:pt-6 flex items-center", className),
-      ...props
-    }
-  );
+  return /* @__PURE__ */ jsx("div", { "data-slot": "card-footer", className: cn("flex items-center", className), ...props });
 }
 
 export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };

package/dist/{chunk-X2QENXCS.mjs → chunk-BOPZFNFS.mjs}

@@ -1,4 +1,4 @@
-import { cn } from './chunk-HW6SLBO3.mjs';
+import { cn } from './chunk-KTNZSZ5Y.mjs';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import { jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-5GPQ7U5B.mjs → chunk-DDOX4EEM.mjs}

@@ -1,4 +1,4 @@
-import { cn } from './chunk-HW6SLBO3.mjs';
+import { cn } from './chunk-KTNZSZ5Y.mjs';
 import { cva } from 'class-variance-authority';
 import { jsx } from 'react/jsx-runtime';
 
@@ -8,15 +8,11 @@ var textareaVariants = cva(
     "disabled:bg-bg-tertiary",
     "disabled:text-text-tertiary",
     "disabled:cursor-not-allowed",
-    "outline",
     "outline-transparent",
-    "-outline-offset-1",
-    "placehoder:text-muted-foreground",
-    "flex",
+    "placehoder:text-text-secondary/20",
     "min-h-16",
-    "w-full",
-    "px-3",
-    "py-2"
+    "flex",
+    "w-full"
   ],
   {
     variants: {
@@ -25,9 +21,9 @@ var textareaVariants = cva(
         error: ["hover:bg-danger-primary/10", "bg-danger-primary/20"]
       },
       size: {
-        sm: ["text-sm", "rounded-uk-sm"],
-        base: ["text-md", "rounded-uk-md"],
-        lg: ["text-xl", "rounded-uk-md"]
+        sm: ["text-uk-sm", "leading-uk-sm", "rounded-uk-sm", "px-sm", "py-xs"],
+        base: ["text-uk-md", "leading-uk-md", "rounded-uk-md", "px-md", "py-sm"],
+        lg: ["text-uk-lg", "leading-uk-lg", "rounded-uk-md", "px-lg", "py-sm"]
       }
     },
     defaultVariants: {

package/dist/{chunk-NN7R5DNL.mjs → chunk-DZ4J7I7I.mjs}

@@ -1,4 +1,4 @@
-import { cn } from './chunk-HW6SLBO3.mjs';
+import { cn } from './chunk-KTNZSZ5Y.mjs';
 import * as SheetPrimitive from '@radix-ui/react-dialog';
 import { XIcon } from 'lucide-react';
 import { jsx, jsxs } from 'react/jsx-runtime';
@@ -6,31 +6,29 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 function Sheet({ ...props }) {
   return /* @__PURE__ */ jsx(SheetPrimitive.Root, { "data-slot": "sheet", ...props });
 }
-function SheetTrigger({
-  ...props
-}) {
+function SheetTrigger({ ...props }) {
   return /* @__PURE__ */ jsx(SheetPrimitive.Trigger, { "data-slot": "sheet-trigger", ...props });
 }
-function SheetClose({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(SheetPrimitive.Close, { "data-slot": "sheet-close", className: cn("focus:outline-none focus:ring-0"), ...props });
+function SheetClose({ ...props }) {
+  return /* @__PURE__ */ jsx(
+    SheetPrimitive.Close,
+    {
+      "data-slot": "sheet-close",
+      className: cn("focus:ring-0 focus:outline-none"),
+      ...props
+    }
+  );
 }
-function SheetPortal({
-  ...props
-}) {
+function SheetPortal({ ...props }) {
   return /* @__PURE__ */ jsx(SheetPrimitive.Portal, { "data-slot": "sheet-portal", ...props });
 }
-function SheetOverlay({
-  className,
-  ...props
-}) {
+function SheetOverlay({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     SheetPrimitive.Overlay,
     {
       "data-slot": "sheet-overlay",
       className: cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-bg-primary/50",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-bg-primary/50 fixed inset-0 z-50",
         className
       ),
       ...props
@@ -50,7 +48,7 @@ function SheetContent({
       {
         "data-slot": "sheet-content",
         className: cn(
-          "liquid:liquid-bg bg-bg-primary data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 p-xl",
+          "liquid:liquid-bg bg-bg-primary data-[state=open]:animate-in data-[state=closed]:animate-out p-xl fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
           side === "right" && "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-[340px]",
           side === "left" && "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-[340px]",
           side === "top" && "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto",
@@ -74,7 +72,7 @@ function SheetHeader({ className, ...props }) {
     "div",
     {
       "data-slot": "sheet-header",
-      className: cn("flex flex-col gap-md pb-xl", className),
+      className: cn("gap-md pb-xl flex flex-col", className),
       ...props
     }
   );
@@ -84,20 +82,17 @@ function SheetFooter({ className, ...props }) {
     "div",
     {
       "data-slot": "sheet-footer",
-      className: cn("mt-auto flex flex-col gap-lg pt-xl", className),
+      className: cn("gap-lg pt-xl mt-auto flex flex-col", className),
       ...props
     }
   );
 }
-function SheetTitle({
-  className,
-  ...props
-}) {
+function SheetTitle({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     SheetPrimitive.Title,
     {
       "data-slot": "sheet-title",
-      className: cn("text-[14px] text-text-highlight font-medium", className),
+      className: cn("text-text-highlight text-uk-xl leading-uk-xl font-medium", className),
       ...props
     }
   );
@@ -110,7 +105,7 @@ function SheetDescription({
     SheetPrimitive.Description,
     {
       "data-slot": "sheet-description",
-      className: cn("text-[12px] text-text-secondary", className),
+      className: cn("text-text-secondary text-uk-md leading-uk-md", className),
       ...props
     }
   );

package/dist/{chunk-G7XNQVPB.js → chunk-E33MW663.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkUWO6RBCE_js = require('./chunk-UWO6RBCE.js');
+var chunkXXWQ4RVP_js = require('./chunk-XXWQ4RVP.js');
 var DialogPrimitive = require('@radix-ui/react-dialog');
 var classVarianceAuthority = require('class-variance-authority');
 var lucideReact = require('lucide-react');
@@ -51,18 +51,17 @@ function ModalOverlay({ className, ...props }) {
     DialogPrimitive__namespace.Overlay,
     {
       "data-slot": "modal-overlay",
-      className: chunkUWO6RBCE_js.cn(modalOverlayVariants(), className),
+      className: chunkXXWQ4RVP_js.cn(modalOverlayVariants(), className),
       ...props
     }
   );
 }
 var modalContentVariants = classVarianceAuthority.cva([
-  "px-xl",
   "pb-xl",
+  "px-xl",
   "bg-bg-primary",
-  "rounded-xl",
+  "rounded-uk-xl",
   "shadow-[0_4px_16px_0_var(--color-shadow-secondary)]",
-  "w-[320px]",
   "min-w-[280px]",
   "duration-200",
   "transition-all",
@@ -92,7 +91,7 @@ function ModalContent({
       DialogPrimitive__namespace.Content,
       {
         "data-slot": "modal-content",
-        className: chunkUWO6RBCE_js.cn(modalContentVariants(), className),
+        className: chunkXXWQ4RVP_js.cn(modalContentVariants(), className),
         ...props,
         children: [
           children,
@@ -100,13 +99,13 @@ function ModalContent({
             DialogPrimitive__namespace.Close,
             {
               "data-slot": "modal-close",
-              className: chunkUWO6RBCE_js.cn(
+              className: chunkXXWQ4RVP_js.cn(
                 "absolute",
                 "right-[16px]",
                 "top-[16px]",
                 "w-[16px]",
                 "h-[16px]",
-                "rounded-sm",
+                "rounded-uk-sm",
                 "cursor-pointer",
                 "hover:text-icon-highlight",
                 "text-icon-primary",
@@ -126,19 +125,20 @@ function ModalContent({
   ] });
 }
 function ModalHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "modal-header", className: chunkUWO6RBCE_js.cn("flex flex-col", className), ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "modal-header", className: chunkXXWQ4RVP_js.cn("flex flex-col", className), ...props });
 }
 function ModalTitle({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     DialogPrimitive__namespace.Title,
     {
       "data-slot": "modal-title",
-      className: chunkUWO6RBCE_js.cn(
+      className: chunkXXWQ4RVP_js.cn(
         "text-text-highlight",
-        "text-[14px]",
-        "leading-[20px]",
+        "text-uk-lg",
+        "leading-uk-lg",
         "font-medium",
         "py-lg",
+        "px-xl",
         "text-center",
         className
       ),
@@ -151,15 +151,7 @@ function ModalDescription({ className, ...props }) {
     DialogPrimitive__namespace.Description,
     {
       "data-slot": "modal-description",
-      className: chunkUWO6RBCE_js.cn(
-        "text-text-primary",
-        "text-[14px]",
-        "leading-[20px]",
-        "font-normal",
-        "pb-lg",
-        "text-start",
-        className
-      ),
+      className: chunkXXWQ4RVP_js.cn("text-text-primary", "text-uk-md", "leading-uk-md", "text-start", className),
       ...props
     }
   );
@@ -169,7 +161,7 @@ function ModalFooter({ className, ...props }) {
     "div",
     {
       "data-slot": "modal-footer",
-      className: chunkUWO6RBCE_js.cn("w-full", "flex", "justify-end", "gap-[8px]", className),
+      className: chunkXXWQ4RVP_js.cn("w-full", "flex", "justify-end", "gap-xs", className),
       ...props
     }
   );

package/dist/{chunk-D4C5V4EN.mjs → chunk-E5KWKBH3.mjs}

@@ -14,17 +14,22 @@ function ThemeProvider({
   ...props
 }) {
   const [theme, setTheme] = useState(() => {
+    if (typeof window === "undefined") return defaultTheme;
     return localStorage.getItem(storageKey) || defaultTheme;
   });
   useEffect(() => {
+    if (typeof window === "undefined") return;
     const root = window.document.documentElement;
     root.classList.remove("light", "dark", "liquidlight", "liquiddark", "system");
+    root.removeAttribute("data-theme");
     if (theme === "system") {
       const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
       root.classList.add(systemTheme);
+      root.setAttribute("data-theme", "auto");
       return;
     }
     root.classList.add(theme);
+    root.setAttribute("data-theme", theme);
   }, [theme]);
   return /* @__PURE__ */ jsx(
     ThemeProviderContext.Provider,
@@ -34,7 +39,9 @@ function ThemeProvider({
         () => ({
           theme,
           setTheme: (theme2) => {
-            localStorage.setItem(storageKey, theme2);
+            if (typeof window !== "undefined") {
+              localStorage.setItem(storageKey, theme2);
+            }
             setTheme(theme2);
           }
         }),

package/dist/{chunk-R6XNT4PN.js → chunk-EGPLKTJM.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkUWO6RBCE_js = require('./chunk-UWO6RBCE.js');
+var chunkXXWQ4RVP_js = require('./chunk-XXWQ4RVP.js');
 var AccordionPrimitive = require('@radix-ui/react-accordion');
 var classVarianceAuthority = require('class-variance-authority');
 var lucideReact = require('lucide-react');
@@ -28,7 +28,7 @@ function _interopNamespace(e) {
 var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrimitive);
 
 var treeVariants = classVarianceAuthority.cva(
-  "text-[14px] group py-1 h-9 text-text-primary rounded transition-colors cursor-pointer text-left relative z-20"
+  "text-uk-md group py-1 h-9 text-text-primary rounded transition-colors cursor-pointer text-left relative z-20"
 );
 var selectedTreeVariants = classVarianceAuthority.cva("");
 var dragOverVariants = classVarianceAuthority.cva("bg-primary/20 text-primary-foreground");
@@ -110,8 +110,8 @@ var TreeView = react.forwardRef(
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: chunkUWO6RBCE_js.cn(
-          "bg-bg-primary relative min-w-[240px] max-w-[300px] overflow-hidden p-2",
+        className: chunkXXWQ4RVP_js.cn(
+          "bg-bg-primary relative max-w-[300px] min-w-[240px] overflow-hidden p-2",
           className
         ),
         "data-tree-container": true,
@@ -119,7 +119,7 @@ var TreeView = react.forwardRef(
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
-              className: "bg-bg-tertiary pointer-events-none absolute left-2 right-2 z-10 rounded-uk-sm transition-all duration-150",
+              className: "bg-bg-tertiary rounded-uk-sm pointer-events-none absolute right-2 left-2 z-10 transition-all duration-150",
               style: {
                 display: hoverBackgroundStyle.display,
                 top: hoverBackgroundStyle.top,
@@ -148,7 +148,7 @@ var TreeView = react.forwardRef(
             "div",
             {
               className: "h-[48px] w-full",
-              onDrop: (e) => {
+              onDrop: () => {
                 handleDrop({ id: "", name: "parent_div" });
               }
             }
@@ -249,7 +249,7 @@ var TreeNode = ({
       AccordionTrigger,
       {
         style: { margin: 0 },
-        className: chunkUWO6RBCE_js.cn(
+        className: chunkXXWQ4RVP_js.cn(
           treeVariants(),
           selectedItemId === item.id && selectedTreeVariants(),
           isDragOver && dragOverVariants(),
@@ -284,7 +284,7 @@ var TreeNode = ({
               default: defaultNodeIcon
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-text-primary flex-grow truncate text-left text-sm", children: item.name }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-text-primary text-uk-md flex-grow truncate text-left", children: item.name }),
           /* @__PURE__ */ jsxRuntime.jsx(TreeActions, { isSelected: selectedItemId === item.id && !item.disabled, children: item.actions })
         ]
       }
@@ -347,7 +347,7 @@ var TreeLeaf = react.forwardRef(
       "div",
       {
         ref,
-        className: chunkUWO6RBCE_js.cn(
+        className: chunkXXWQ4RVP_js.cn(
           "relative flex items-center",
           treeVariants(),
           className,
@@ -371,7 +371,7 @@ var TreeLeaf = react.forwardRef(
         ...props,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(TreeIcon, { item, isSelected: selectedItemId === item.id, default: defaultLeafIcon }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-text-primary flex-grow truncate text-left text-sm", children: item.name }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-text-primary text-uk-md flex-grow truncate text-left", children: item.name }),
           /* @__PURE__ */ jsxRuntime.jsx(TreeActions, { isSelected: selectedItemId === item.id && !item.disabled, children: item.actions })
         ]
       }
@@ -383,7 +383,7 @@ var AccordionTrigger = react.forwardRef(({ className, children, ...props }, ref)
   AccordionPrimitive__namespace.Trigger,
   {
     ref,
-    className: chunkUWO6RBCE_js.cn(
+    className: chunkXXWQ4RVP_js.cn(
       "relative flex w-full flex-1 items-center justify-between text-left font-medium transition-all",
       className
     ),
@@ -396,12 +396,12 @@ var AccordionContent = react.forwardRef(({ className, children, ...props }, ref)
   AccordionPrimitive__namespace.Content,
   {
     ref,
-    className: chunkUWO6RBCE_js.cn(
-      "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm transition-all",
+    className: chunkXXWQ4RVP_js.cn(
+      "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down text-uk-md overflow-hidden transition-all",
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pb-0 pt-0", children })
+    children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-0 pb-0", children })
   }
 ));
 AccordionContent.displayName = AccordionPrimitive__namespace.Content.displayName;
@@ -425,7 +425,7 @@ var TreeIcon = ({
   return Icon ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "text-text-primary mr-2 h-4 w-4 shrink-0" }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
 };
 var TreeActions = ({ children, isSelected }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkUWO6RBCE_js.cn(isSelected ? "block" : "hidden", "absolute right-3 group-hover:block"), children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkXXWQ4RVP_js.cn(isSelected ? "block" : "hidden", "absolute right-3 group-hover:block"), children });
 };
 
 exports.TreeView = TreeView;

package/dist/{chunk-COFRS37Z.mjs → chunk-EUY74AXP.mjs}

@@ -1,4 +1,4 @@
-import { cn } from './chunk-HW6SLBO3.mjs';
+import { cn } from './chunk-KTNZSZ5Y.mjs';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { CheckIcon, CircleIcon, ChevronRightIcon } from 'lucide-react';
 import { jsx, jsxs } from 'react/jsx-runtime';
@@ -100,7 +100,8 @@ function DropdownMenuItem({
           "relative",
           "cursor-default",
           "rounded-uk-xs",
-          "text-xs",
+          "text-uk-xs",
+          "leading-uk-xs",
           "outline-hidden",
           "select-none",
           "hover:bg-bg-tertiary",
@@ -141,7 +142,8 @@ function DropdownMenuCheckboxItem({
           "relative",
           "cursor-default",
           "rounded-uk-xs",
-          "text-xs",
+          "text-uk-xs",
+          "leading-uk-xs",
           "outline-hidden",
           "select-none",
           "hover:bg-bg-tertiary",
@@ -193,7 +195,8 @@ function DropdownMenuRadioItem({
           "pr-md",
           "mb-xs",
           "last:mb-0",
-          "text-xs",
+          "text-uk-xs",
+          "leading-uk-xs",
           "data-[disabled]:pointer-events-none",
           "data-[disabled]:text-bg-quaternary",
           "[&_svg:not([class*='size-'])]:size-4",
@@ -220,7 +223,7 @@ function DropdownMenuLabel({
     {
       "data-slot": "dropdown-menu-label",
       "data-inset": inset,
-      className: cn("text-text-secondary px-2 py-1.5 text-xs", className),
+      className: cn("text-text-secondary text-uk-xs leading-uk-xs px-2 py-1.5", className),
       ...props
     }
   );
@@ -243,7 +246,7 @@ function DropdownMenuShortcut({ className, ...props }) {
     "span",
     {
       "data-slot": "dropdown-menu-shortcut",
-      className: cn("text-text-tertiary ml-auto text-xs", className),
+      className: cn("text-text-tertiary text-uk-xs leading-uk-xs ml-auto", className),
       ...props
     }
   );
@@ -274,7 +277,8 @@ function DropdownMenuSubTrigger({
         "relative",
         "cursor-default",
         "rounded-uk-xs",
-        "text-xs",
+        "text-uk-xs",
+        "leading-uk-xs",
         "outline-hidden",
         "select-none",
         "hover:bg-bg-tertiary",

package/dist/{chunk-ATDHGFVI.mjs → chunk-F776EMXP.mjs}

@@ -1,4 +1,4 @@
-import { cn } from './chunk-HW6SLBO3.mjs';
+import { cn } from './chunk-KTNZSZ5Y.mjs';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import React from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
@@ -55,7 +55,7 @@ function AvatarGroup({ children, className, spacing = "normal", max }) {
           {
             key: index,
             className: cn(
-              `ring-background relative ring-2 z-[${zIndex}] hover:scale-120 transition-all duration-200 ease-in-out hover:z-[100]`,
+              `ring-background relative ring-2 z-[${zIndex}] transition-all duration-200 ease-in-out hover:z-[100] hover:scale-120`,
               (_a = child.props) == null ? void 0 : _a.className
             )
           }
@@ -67,7 +67,7 @@ function AvatarGroup({ children, className, spacing = "normal", max }) {
       Avatar,
       {
         className: cn(
-          "ring-background hover:scale-120 relative cursor-default ring-2 transition-all duration-200 ease-in-out hover:z-[100]",
+          "ring-background relative cursor-default ring-2 transition-all duration-200 ease-in-out hover:z-[100] hover:scale-120",
           `z-[${30 - displayChildren.length}]`
         ),
         children: /* @__PURE__ */ jsxs(AvatarFallback, { children: [