@cyberbloxai/ui-kit 0.2.2 → 0.3.1

package/dist/index.mjs

@@ -16,13 +16,13 @@ import * as J from "@radix-ui/react-collapsible";
 import { Command as N } from "cmdk";
 import * as c from "@radix-ui/react-dialog";
 import * as m from "@radix-ui/react-context-menu";
-import { Drawer as h } from "vaul";
+import { Drawer as x } from "vaul";
 import * as f from "@radix-ui/react-dropdown-menu";
 import * as H from "@radix-ui/react-hover-card";
 import { OTPInput as Be, OTPInputContext as He } from "input-otp";
 import * as ie from "@radix-ui/react-label";
 import * as l from "@radix-ui/react-menubar";
-import * as y from "@radix-ui/react-navigation-menu";
+import * as h from "@radix-ui/react-navigation-menu";
 import * as _ from "@radix-ui/react-popover";
 import * as Q from "@radix-ui/react-progress";
 import * as A from "@radix-ui/react-radio-group";
@@ -68,22 +68,23 @@ const Ue = s.forwardRef(({ className: e, children: t, ...a }, n) => /* @__PURE__
 ));
 Ue.displayName = C.Content.displayName;
 const k = T(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-semibold ring-offset-background transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 active:scale-[0.98]",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        default: "bg-primary text-primary-foreground shadow-sm hover:bg-primary/90 hover:shadow-md",
+        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90 hover:shadow-md",
+        outline: "border-2 border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground hover:border-accent",
+        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80 hover:shadow-md",
         ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline"
+        link: "text-primary underline-offset-4 hover:underline",
+        shiny: "bg-primary text-primary-foreground shadow-lg hover:shadow-primary/20 hover:-translate-y-0.5 relative overflow-hidden before:absolute before:inset-0 before:bg-gradient-to-r before:from-transparent before:via-white/20 before:to-transparent before:translate-x-[-100%] hover:before:translate-x-[100%] before:transition-transform before:duration-700"
       },
       size: {
-        default: "h-10 px-4 py-2",
-        sm: "h-9 rounded-md px-3",
-        lg: "h-11 rounded-md px-8",
-        icon: "h-10 w-10"
+        default: "h-11 px-6 py-2.5",
+        sm: "h-9 rounded-md px-4 text-xs",
+        lg: "h-13 rounded-xl px-10 text-base",
+        icon: "h-11 w-11"
       }
     },
     defaultVariants: {
@@ -185,14 +186,17 @@ const st = s.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ o(
 ));
 st.displayName = P.Fallback.displayName;
 const nt = T(
-  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  "inline-flex items-center rounded-full border px-3 py-0.5 text-xs font-semibold transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
   {
     variants: {
       variant: {
-        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
-        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
-        outline: "text-foreground"
+        default: "border-transparent bg-primary text-primary-foreground shadow-sm hover:bg-primary/90",
+        secondary: "border-transparent bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        destructive: "border-transparent bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/80",
+        outline: "text-foreground border-border hover:bg-accent hover:text-accent-foreground",
+        success: "border-transparent bg-emerald-500 text-white shadow-sm hover:bg-emerald-600",
+        warning: "border-transparent bg-amber-500 text-white shadow-sm hover:bg-amber-600",
+        info: "border-transparent bg-blue-500 text-white shadow-sm hover:bg-blue-600"
       }
     },
     defaultVariants: {
@@ -297,7 +301,17 @@ function pt({ className: e, classNames: t, showOutsideDays: a = !0, ...n }) {
   );
 }
 pt.displayName = "Calendar";
-const gt = s.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ o("div", { ref: a, className: r("rounded-lg border bg-card text-card-foreground shadow-sm", e), ...t }));
+const gt = s.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ o(
+  "div",
+  {
+    ref: a,
+    className: r(
+      "rounded-xl border bg-card text-card-foreground shadow-sm transition-all duration-200 hover:shadow-md",
+      e
+    ),
+    ...t
+  }
+));
 gt.displayName = "Card";
 const bt = s.forwardRef(
   ({ className: e, ...t }, a) => /* @__PURE__ */ o("div", { ref: a, className: r("flex flex-col space-y-1.5 p-6", e), ...t })
@@ -307,18 +321,18 @@ const Nt = s.forwardRef(
   ({ className: e, ...t }, a) => /* @__PURE__ */ o("h3", { ref: a, className: r("text-2xl font-semibold leading-none tracking-tight", e), ...t })
 );
 Nt.displayName = "CardTitle";
-const yt = s.forwardRef(
+const ht = s.forwardRef(
   ({ className: e, ...t }, a) => /* @__PURE__ */ o("p", { ref: a, className: r("text-sm text-muted-foreground", e), ...t })
 );
-yt.displayName = "CardDescription";
-const xt = s.forwardRef(
+ht.displayName = "CardDescription";
+const yt = s.forwardRef(
   ({ className: e, ...t }, a) => /* @__PURE__ */ o("div", { ref: a, className: r("p-6 pt-0", e), ...t })
 );
-xt.displayName = "CardContent";
-const ht = s.forwardRef(
+yt.displayName = "CardContent";
+const xt = s.forwardRef(
   ({ className: e, ...t }, a) => /* @__PURE__ */ o("div", { ref: a, className: r("flex items-center p-6 pt-0", e), ...t })
 );
-ht.displayName = "CardFooter";
+xt.displayName = "CardFooter";
 const me = s.createContext(null);
 function F() {
   const e = s.useContext(me);
@@ -327,7 +341,7 @@ function F() {
   return e;
 }
 const wt = s.forwardRef(
-  ({ orientation: e = "horizontal", opts: t, setApi: a, plugins: n, className: i, children: g, ...x }, v) => {
+  ({ orientation: e = "horizontal", opts: t, setApi: a, plugins: n, className: i, children: g, ...y }, v) => {
     const [Re, p] = Ee(
       {
         ...t,
@@ -374,7 +388,7 @@ const wt = s.forwardRef(
             className: r("relative", i),
             role: "region",
             "aria-roledescription": "carousel",
-            ...x,
+            ...y,
             children: g
           }
         )
@@ -415,7 +429,7 @@ const Rt = s.forwardRef(
 Rt.displayName = "CarouselItem";
 const Ct = s.forwardRef(
   ({ className: e, variant: t = "outline", size: a = "icon", ...n }, i) => {
-    const { orientation: g, scrollPrev: x, canScrollPrev: v } = F();
+    const { orientation: g, scrollPrev: y, canScrollPrev: v } = F();
     return /* @__PURE__ */ d(
       ee,
       {
@@ -428,7 +442,7 @@ const Ct = s.forwardRef(
           e
         ),
         disabled: !v,
-        onClick: x,
+        onClick: y,
         ...n,
         children: [
           /* @__PURE__ */ o(Me, { className: "h-4 w-4" }),
@@ -441,7 +455,7 @@ const Ct = s.forwardRef(
 Ct.displayName = "CarouselPrevious";
 const Tt = s.forwardRef(
   ({ className: e, variant: t = "outline", size: a = "icon", ...n }, i) => {
-    const { orientation: g, scrollNext: x, canScrollNext: v } = F();
+    const { orientation: g, scrollNext: y, canScrollNext: v } = F();
     return /* @__PURE__ */ d(
       ee,
       {
@@ -454,7 +468,7 @@ const Tt = s.forwardRef(
           e
         ),
         disabled: !v,
-        onClick: x,
+        onClick: y,
         ...n,
         children: [
           /* @__PURE__ */ o(ze, { className: "h-4 w-4" }),
@@ -470,7 +484,7 @@ const St = s.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ o(
   {
     ref: a,
     className: r(
-      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background data-[state=checked]:bg-primary data-[state=checked]:text-primary-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",
+      "peer h-4 w-4 shrink-0 rounded border border-primary ring-offset-background transition-all duration-200 data-[state=checked]:bg-primary data-[state=checked]:text-primary-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",
       e
     ),
     ...t,
@@ -497,7 +511,7 @@ const ue = s.forwardRef(({ className: e, children: t, ...a }, n) => /* @__PURE__
     {
       ref: n,
       className: r(
-        "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 shadow-lg 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-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        "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 shadow-xl duration-300 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-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-xl",
         e
       ),
       ...a,
@@ -693,14 +707,14 @@ const Kt = s.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ o(m.Separ
 Kt.displayName = m.Separator.displayName;
 const Xt = ({ className: e, ...t }) => /* @__PURE__ */ o("span", { className: r("ml-auto text-xs tracking-widest text-muted-foreground", e), ...t });
 Xt.displayName = "ContextMenuShortcut";
-const Wt = ({ shouldScaleBackground: e = !0, ...t }) => /* @__PURE__ */ o(h.Root, { shouldScaleBackground: e, ...t });
+const Wt = ({ shouldScaleBackground: e = !0, ...t }) => /* @__PURE__ */ o(x.Root, { shouldScaleBackground: e, ...t });
 Wt.displayName = "Drawer";
-const rr = h.Trigger, Qt = h.Portal, sr = h.Close, ge = s.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ o(h.Overlay, { ref: a, className: r("fixed inset-0 z-50 bg-black/80", e), ...t }));
-ge.displayName = h.Overlay.displayName;
+const rr = x.Trigger, Qt = x.Portal, sr = x.Close, ge = s.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ o(x.Overlay, { ref: a, className: r("fixed inset-0 z-50 bg-black/80", e), ...t }));
+ge.displayName = x.Overlay.displayName;
 const Yt = s.forwardRef(({ className: e, children: t, ...a }, n) => /* @__PURE__ */ d(Qt, { children: [
   /* @__PURE__ */ o(ge, {}),
   /* @__PURE__ */ d(
-    h.Content,
+    x.Content,
     {
       ref: n,
       className: r(
@@ -721,16 +735,16 @@ Jt.displayName = "DrawerHeader";
 const Zt = ({ className: e, ...t }) => /* @__PURE__ */ o("div", { className: r("mt-auto flex flex-col gap-2 p-4", e), ...t });
 Zt.displayName = "DrawerFooter";
 const ea = s.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ o(
-  h.Title,
+  x.Title,
   {
     ref: a,
     className: r("text-lg font-semibold leading-none tracking-tight", e),
     ...t
   }
 ));
-ea.displayName = h.Title.displayName;
-const ta = s.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ o(h.Description, { ref: a, className: r("text-sm text-muted-foreground", e), ...t }));
-ta.displayName = h.Description.displayName;
+ea.displayName = x.Title.displayName;
+const ta = s.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ o(x.Description, { ref: a, className: r("text-sm text-muted-foreground", e), ...t }));
+ta.displayName = x.Description.displayName;
 const nr = f.Root, ir = f.Trigger, dr = f.Group, lr = f.Portal, cr = f.Sub, mr = f.RadioGroup, aa = s.forwardRef(({ className: e, inset: t, children: a, ...n }, i) => /* @__PURE__ */ d(
   f.SubTrigger,
   {
@@ -863,7 +877,7 @@ const ua = s.forwardRef(
 );
 ua.displayName = "InputOTPGroup";
 const pa = s.forwardRef(({ index: e, className: t, ...a }, n) => {
-  const i = s.useContext(He), { char: g, hasFakeCaret: x, isActive: v } = i.slots[e];
+  const i = s.useContext(He), { char: g, hasFakeCaret: y, isActive: v } = i.slots[e];
   return /* @__PURE__ */ d(
     "div",
     {
@@ -876,7 +890,7 @@ const pa = s.forwardRef(({ index: e, className: t, ...a }, n) => {
       ...a,
       children: [
         g,
-        x && /* @__PURE__ */ o("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ o("div", { className: "animate-caret-blink h-4 w-px bg-foreground duration-1000" }) })
+        y && /* @__PURE__ */ o("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ o("div", { className: "animate-caret-blink h-4 w-px bg-foreground duration-1000" }) })
       ]
     }
   );
@@ -892,7 +906,7 @@ const ba = s.forwardRef(
     {
       type: t,
       className: r(
-        "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",
+        "flex h-11 w-full rounded-lg border border-input bg-background px-3 py-2 text-sm ring-offset-background transition-all duration-200 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground hover:border-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
         e
       ),
       ref: n,
@@ -901,9 +915,9 @@ const ba = s.forwardRef(
   )
 );
 ba.displayName = "Input";
-const Na = T("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"), ya = s.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ o(ie.Root, { ref: a, className: r(Na(), e), ...t }));
-ya.displayName = ie.Root.displayName;
-const pr = l.Menu, gr = l.Group, br = l.Portal, Nr = l.Sub, yr = l.RadioGroup, xa = s.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ o(
+const Na = T("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"), ha = s.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ o(ie.Root, { ref: a, className: r(Na(), e), ...t }));
+ha.displayName = ie.Root.displayName;
+const pr = l.Menu, gr = l.Group, br = l.Portal, Nr = l.Sub, hr = l.RadioGroup, ya = s.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ o(
   l.Root,
   {
     ref: a,
@@ -911,8 +925,8 @@ const pr = l.Menu, gr = l.Group, br = l.Portal, Nr = l.Sub, yr = l.RadioGroup, x
     ...t
   }
 ));
-xa.displayName = l.Root.displayName;
-const ha = s.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ o(
+ya.displayName = l.Root.displayName;
+const xa = s.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ o(
   l.Trigger,
   {
     ref: a,
@@ -923,7 +937,7 @@ const ha = s.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ o(
     ...t
   }
 ));
-ha.displayName = l.Trigger.displayName;
+xa.displayName = l.Trigger.displayName;
 const wa = s.forwardRef(({ className: e, inset: t, children: a, ...n }, i) => /* @__PURE__ */ d(
   l.SubTrigger,
   {
@@ -1028,7 +1042,7 @@ Ia.displayName = l.Separator.displayName;
 const Pa = ({ className: e, ...t }) => /* @__PURE__ */ o("span", { className: r("ml-auto text-xs tracking-widest text-muted-foreground", e), ...t });
 Pa.displayname = "MenubarShortcut";
 const Da = s.forwardRef(({ className: e, children: t, ...a }, n) => /* @__PURE__ */ d(
-  y.Root,
+  h.Root,
   {
     ref: n,
     className: r("relative z-10 flex max-w-max flex-1 items-center justify-center", e),
@@ -1039,20 +1053,20 @@ const Da = s.forwardRef(({ className: e, children: t, ...a }, n) => /* @__PURE__
     ]
   }
 ));
-Da.displayName = y.Root.displayName;
+Da.displayName = h.Root.displayName;
 const Ma = s.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ o(
-  y.List,
+  h.List,
   {
     ref: a,
     className: r("group flex flex-1 list-none items-center justify-center space-x-1", e),
     ...t
   }
 ));
-Ma.displayName = y.List.displayName;
-const xr = y.Item, za = T(
+Ma.displayName = h.List.displayName;
+const yr = h.Item, za = T(
   "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50"
 ), _a = s.forwardRef(({ className: e, children: t, ...a }, n) => /* @__PURE__ */ d(
-  y.Trigger,
+  h.Trigger,
   {
     ref: n,
     className: r(za(), "group", e),
@@ -1070,9 +1084,9 @@ const xr = y.Item, za = T(
     ]
   }
 ));
-_a.displayName = y.Trigger.displayName;
+_a.displayName = h.Trigger.displayName;
 const Aa = s.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ o(
-  y.Content,
+  h.Content,
   {
     ref: a,
     className: r(
@@ -1082,9 +1096,9 @@ const Aa = s.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ o(
     ...t
   }
 ));
-Aa.displayName = y.Content.displayName;
-const hr = y.Link, be = s.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ o("div", { className: r("absolute left-0 top-full flex justify-center"), children: /* @__PURE__ */ o(
-  y.Viewport,
+Aa.displayName = h.Content.displayName;
+const xr = h.Link, be = s.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ o("div", { className: r("absolute left-0 top-full flex justify-center"), children: /* @__PURE__ */ o(
+  h.Viewport,
   {
     className: r(
       "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
@@ -1094,9 +1108,9 @@ const hr = y.Link, be = s.forwardRef(({ className: e, ...t }, a) => /* @__PURE__
     ...t
   }
 ) }));
-be.displayName = y.Viewport.displayName;
+be.displayName = h.Viewport.displayName;
 const Oa = s.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ o(
-  y.Indicator,
+  h.Indicator,
   {
     ref: a,
     className: r(
@@ -1107,7 +1121,7 @@ const Oa = s.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ o(
     children: /* @__PURE__ */ o("div", { className: "relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" })
   }
 ));
-Oa.displayName = y.Indicator.displayName;
+Oa.displayName = h.Indicator.displayName;
 const La = ({ className: e, ...t }) => /* @__PURE__ */ o(
   "nav",
   {
@@ -1161,7 +1175,7 @@ const wr = _.Root, vr = _.Trigger, Va = s.forwardRef(({ className: e, align: t =
     align: t,
     sideOffset: a,
     className: r(
-      "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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-72 rounded-xl border bg-popover p-4 text-popover-foreground shadow-xl outline-none duration-300 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",
       e
     ),
     ...n
@@ -1246,7 +1260,7 @@ const Sr = u.Root, kr = u.Group, Ir = u.Value, Ka = s.forwardRef(({ className: e
   {
     ref: n,
     className: r(
-      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "flex h-11 w-full items-center justify-between rounded-lg border border-input bg-background px-3 py-2 text-sm ring-offset-background transition-all duration-200 placeholder:text-muted-foreground hover:border-accent focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
       e
     ),
     ...a,
@@ -1257,7 +1271,7 @@ const Sr = u.Root, kr = u.Group, Ir = u.Value, Ka = s.forwardRef(({ className: e
   }
 ));
 Ka.displayName = u.Trigger.displayName;
-const ye = s.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ o(
+const he = s.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ o(
   u.ScrollUpButton,
   {
     ref: a,
@@ -1266,8 +1280,8 @@ const ye = s.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ o(
     children: /* @__PURE__ */ o(Le, { className: "h-4 w-4" })
   }
 ));
-ye.displayName = u.ScrollUpButton.displayName;
-const xe = s.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ o(
+he.displayName = u.ScrollUpButton.displayName;
+const ye = s.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ o(
   u.ScrollDownButton,
   {
     ref: a,
@@ -1276,20 +1290,20 @@ const xe = s.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ o(
     children: /* @__PURE__ */ o(E, { className: "h-4 w-4" })
   }
 ));
-xe.displayName = u.ScrollDownButton.displayName;
+ye.displayName = u.ScrollDownButton.displayName;
 const Xa = s.forwardRef(({ className: e, children: t, position: a = "popper", ...n }, i) => /* @__PURE__ */ o(u.Portal, { children: /* @__PURE__ */ d(
   u.Content,
   {
     ref: i,
     className: r(
-      "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover 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",
+      "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-xl border bg-popover text-popover-foreground shadow-xl 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",
       a === "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",
       e
     ),
     position: a,
     ...n,
     children: [
-      /* @__PURE__ */ o(ye, {}),
+      /* @__PURE__ */ o(he, {}),
       /* @__PURE__ */ o(
         u.Viewport,
         {
@@ -1300,7 +1314,7 @@ const Xa = s.forwardRef(({ className: e, children: t, position: a = "popper", ..
           children: t
         }
       ),
-      /* @__PURE__ */ o(xe, {})
+      /* @__PURE__ */ o(ye, {})
     ]
   }
 ) }));
@@ -1336,7 +1350,7 @@ const Ja = s.forwardRef(({ className: e, orientation: t = "horizontal", decorati
   }
 ));
 Ja.displayName = de.Root.displayName;
-const Pr = c.Root, Dr = c.Trigger, Mr = c.Close, Za = c.Portal, he = s.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ o(
+const Pr = c.Root, Dr = c.Trigger, Mr = c.Close, Za = c.Portal, xe = s.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ o(
   c.Overlay,
   {
     className: r(
@@ -1347,7 +1361,7 @@ const Pr = c.Root, Dr = c.Trigger, Mr = c.Close, Za = c.Portal, he = s.forwardRe
     ref: a
   }
 ));
-he.displayName = c.Overlay.displayName;
+xe.displayName = c.Overlay.displayName;
 const eo = T(
   "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
   {
@@ -1365,7 +1379,7 @@ const eo = T(
   }
 ), to = s.forwardRef(
   ({ side: e = "right", className: t, children: a, ...n }, i) => /* @__PURE__ */ d(Za, { children: [
-    /* @__PURE__ */ o(he, {}),
+    /* @__PURE__ */ o(xe, {}),
     /* @__PURE__ */ d(c.Content, { ref: i, className: r(eo({ side: e }), t), ...n, children: [
       a,
       /* @__PURE__ */ d(c.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity data-[state=open]:bg-secondary hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none", children: [
@@ -1404,7 +1418,7 @@ const io = s.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ o(
   Y.Root,
   {
     className: r(
-      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors data-[state=checked]:bg-primary data-[state=unchecked]:bg-input 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",
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-all duration-300 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input 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",
       e
     ),
     ...t,
@@ -1413,7 +1427,7 @@ const io = s.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ o(
       Y.Thumb,
       {
         className: r(
-          "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+          "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform duration-300 data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
         )
       }
     )
@@ -1474,26 +1488,26 @@ const _r = S.Root, No = s.forwardRef(({ className: e, ...t }, a) => /* @__PURE__
   {
     ref: a,
     className: r(
-      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      "inline-flex h-11 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
       e
     ),
     ...t
   }
 ));
 No.displayName = S.List.displayName;
-const yo = s.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ o(
+const ho = s.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ o(
   S.Trigger,
   {
     ref: a,
     className: r(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium ring-offset-background transition-all duration-200 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
       e
     ),
     ...t
   }
 ));
-yo.displayName = S.Trigger.displayName;
-const xo = s.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ o(
+ho.displayName = S.Trigger.displayName;
+const yo = s.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ o(
   S.Content,
   {
     ref: a,
@@ -1504,19 +1518,19 @@ const xo = s.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ o(
     ...t
   }
 ));
-xo.displayName = S.Content.displayName;
-const ho = s.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ o(
+yo.displayName = S.Content.displayName;
+const xo = s.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ o(
   "textarea",
   {
     className: r(
-      "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background 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",
+      "flex min-h-[80px] w-full rounded-lg border border-input bg-background px-3 py-2 text-sm ring-offset-background transition-all duration-200 placeholder:text-muted-foreground hover:border-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
       e
     ),
     ref: a,
     ...t
   }
 ));
-ho.displayName = "Textarea";
+xo.displayName = "Textarea";
 const we = T(
   "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
   {
@@ -1544,15 +1558,15 @@ const ve = s.createContext({
 }), vo = s.forwardRef(({ className: e, variant: t, size: a, children: n, ...i }, g) => /* @__PURE__ */ o(V.Root, { ref: g, className: r("flex items-center justify-center gap-1", e), ...i, children: /* @__PURE__ */ o(ve.Provider, { value: { variant: t, size: a }, children: n }) }));
 vo.displayName = V.Root.displayName;
 const Ro = s.forwardRef(({ className: e, children: t, variant: a, size: n, ...i }, g) => {
-  const x = s.useContext(ve);
+  const y = s.useContext(ve);
   return /* @__PURE__ */ o(
     V.Item,
     {
       ref: g,
       className: r(
         we({
-          variant: x.variant || a,
-          size: x.size || n
+          variant: y.variant || a,
+          size: y.size || n
         }),
         e
       ),
@@ -1708,9 +1722,9 @@ export {
   ee as Button,
   pt as Calendar,
   gt as Card,
-  xt as CardContent,
-  yt as CardDescription,
-  ht as CardFooter,
+  yt as CardContent,
+  ht as CardDescription,
+  xt as CardFooter,
   bt as CardHeader,
   Nt as CardTitle,
   wt as Carousel,
@@ -1789,8 +1803,8 @@ export {
   ua as InputOTPGroup,
   ga as InputOTPSeparator,
   pa as InputOTPSlot,
-  ya as Label,
-  xa as Menubar,
+  ha as Label,
+  ya as Menubar,
   Ta as MenubarCheckboxItem,
   Ra as MenubarContent,
   gr as MenubarGroup,
@@ -1798,19 +1812,19 @@ export {
   ka as MenubarLabel,
   pr as MenubarMenu,
   br as MenubarPortal,
-  yr as MenubarRadioGroup,
+  hr as MenubarRadioGroup,
   Sa as MenubarRadioItem,
   Ia as MenubarSeparator,
   Pa as MenubarShortcut,
   Nr as MenubarSub,
   va as MenubarSubContent,
   wa as MenubarSubTrigger,
-  ha as MenubarTrigger,
+  xa as MenubarTrigger,
   Da as NavigationMenu,
   Aa as NavigationMenuContent,
   Oa as NavigationMenuIndicator,
-  xr as NavigationMenuItem,
-  hr as NavigationMenuLink,
+  yr as NavigationMenuItem,
+  xr as NavigationMenuLink,
   Ma as NavigationMenuList,
   _a as NavigationMenuTrigger,
   be as NavigationMenuViewport,
@@ -1837,8 +1851,8 @@ export {
   kr as SelectGroup,
   Qa as SelectItem,
   Wa as SelectLabel,
-  xe as SelectScrollDownButton,
-  ye as SelectScrollUpButton,
+  ye as SelectScrollDownButton,
+  he as SelectScrollUpButton,
   Ya as SelectSeparator,
   Ka as SelectTrigger,
   Ir as SelectValue,
@@ -1849,7 +1863,7 @@ export {
   so as SheetDescription,
   oo as SheetFooter,
   ao as SheetHeader,
-  he as SheetOverlay,
+  xe as SheetOverlay,
   Za as SheetPortal,
   ro as SheetTitle,
   Dr as SheetTrigger,
@@ -1865,10 +1879,10 @@ export {
   co as TableHeader,
   uo as TableRow,
   _r as Tabs,
-  xo as TabsContent,
+  yo as TabsContent,
   No as TabsList,
-  yo as TabsTrigger,
-  ho as Textarea,
+  ho as TabsTrigger,
+  xo as Textarea,
   wo as Toggle,
   vo as ToggleGroup,
   Ro as ToggleGroupItem,