mada-design-system 1.3.0 → 1.3.2

package/index.es73.js

@@ -1,4 +1,4 @@
-import { jsx as t, jsxs as f } from "react/jsx-runtime";
+import { jsx as e, jsxs as u } from "react/jsx-runtime";
 import { ViewSidebarRightFreeIcons as S, AlignBoxMiddleCenterFreeIcons as R, Cancel as z } from "./index.es118.js";
 import * as s from "@radix-ui/react-dialog";
 import { cva as I } from "./index.es127.js";
@@ -7,9 +7,9 @@ import i from "react";
 import { useMediaQuery as F } from "./index.es122.js";
 import { cn as r } from "./index.es96.js";
 import T from "./index.es6.js";
-import { ShouldRender as x } from "./index.es19.js";
+import { ShouldRender as d } from "./index.es19.js";
 import { Button as g } from "./index.es27.js";
-import { HugeiconsIcon as u } from "./index.es119.js";
+import { HugeiconsIcon as h } from "./index.es119.js";
 import D from "./index.es187.js";
 import V from "./index.es188.js";
 import _ from "./index.es130.js";
@@ -17,15 +17,15 @@ import { create as j } from "./index.es189.js";
 import { useIconConfig as A } from "./index.es99.js";
 const y = j((a) => ({
   isCenter: !1,
-  setIsCenter: (e) => a((o) => ({ isCenter: e ?? !o.isCenter }))
-})), le = s.Root, ie = s.Trigger, B = s.Close, H = s.Portal, N = i.forwardRef(({ className: a, ...e }, o) => /* @__PURE__ */ t(
+  setIsCenter: (t) => a((o) => ({ isCenter: t ?? !o.isCenter }))
+})), le = s.Root, ie = s.Trigger, B = s.Close, H = s.Portal, N = i.forwardRef(({ className: a, ...t }, o) => /* @__PURE__ */ e(
   s.Overlay,
   {
     className: r(
       "fixed inset-0 z-50 bg-background-overlay data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       a
     ),
-    ...e,
+    ...t,
     ref: o
   }
 ));
@@ -47,28 +47,28 @@ const O = I(
     }
   }
 ), P = i.forwardRef(
-  ({ className: a, side: e, ignoreInteractOutside: o = !1, hideOverlay: d = !1, overlayClassName: c, children: l, ...m }, n) => {
-    const v = T((p) => p.isActive), h = F("(min-width: 600px)"), { isCenter: b, setIsCenter: w } = y();
-    return /* @__PURE__ */ t(H, { children: /* @__PURE__ */ t(
+  ({ className: a, side: t, ignoreInteractOutside: o = !1, hideOverlay: c = !1, overlayClassName: m, children: l, ...p }, n) => {
+    const v = T((f) => f.isActive), b = F("(min-width: 600px)"), { isCenter: x, setIsCenter: w } = y();
+    return /* @__PURE__ */ e(H, { children: /* @__PURE__ */ e(
       N,
       {
-        className: k(c, {
-          "bg-transparent": d
+        className: k(m, {
+          "bg-transparent": c
         }),
-        children: /* @__PURE__ */ t(
+        children: /* @__PURE__ */ e(
           s.Content,
           {
             "aria-describedby": void 0,
-            onInteractOutside: (p) => o && p.preventDefault(),
+            onInteractOutside: (f) => o && f.preventDefault(),
             onCloseAutoFocus: () => w(!1),
             ref: n,
             className: r(
-              O({ side: e || (h ? b ? "center" : "left" : "bottom") }),
+              O({ side: t || (b ? x ? "center" : "left" : "bottom") }),
               { grayscale: v },
               a
             ),
-            "data-side": e || (h ? b ? "center" : "left" : "bottom"),
-            ...m,
+            "data-side": t || (b ? x ? "center" : "left" : "bottom"),
+            ...p,
             children: l
           }
         )
@@ -77,39 +77,39 @@ const O = I(
   }
 );
 P.displayName = s.Content.displayName;
-const M = ({ className: a, title: e, hideCenter: o, children: d, ...c }) => {
-  const { isHugeIcons: l } = A(), { setIsCenter: m, isCenter: n } = y();
-  return /* @__PURE__ */ f("div", { className: r("flex flex-row items-center gap-space-02 px-space-05 py-space-04", a), ...c, children: [
-    d,
-    /* @__PURE__ */ t(x, { shouldRender: !!e, children: /* @__PURE__ */ t(C, { children: e }) }),
-    /* @__PURE__ */ f("div", { className: "ms-auto flex items-center gap-space-01", children: [
-      /* @__PURE__ */ t(x, { shouldRender: !o, children: /* @__PURE__ */ f(g, { variant: "text", colors: "neutral", size: "icon-sm", onClick: () => m(), className: "hidden sm:inline-flex", children: [
-        !n && l ? /* @__PURE__ */ t(u, { icon: S, size: 20, className: "-scale-100" }) : /* @__PURE__ */ t(D, { className: "-scale-100" }),
-        n && l ? /* @__PURE__ */ t(u, { icon: R, size: 20 }) : /* @__PURE__ */ t(V, { size: 20 })
+const M = ({ className: a, title: t, hideCenter: o, children: c, ...m }) => {
+  const { isHugeIcons: l } = A(), { setIsCenter: p, isCenter: n } = y();
+  return /* @__PURE__ */ u("div", { className: r("flex flex-row items-center gap-space-02 px-space-05 py-space-04", a), ...m, children: [
+    c,
+    /* @__PURE__ */ e(d, { shouldRender: !!t, children: /* @__PURE__ */ e(C, { children: t }) }),
+    /* @__PURE__ */ u("div", { className: "ms-auto flex items-center gap-space-01", children: [
+      /* @__PURE__ */ e(d, { shouldRender: !o, children: /* @__PURE__ */ u(g, { variant: "text", colors: "neutral", size: "icon-sm", onClick: () => p(), className: "hidden sm:inline-flex", children: [
+        /* @__PURE__ */ e(d, { shouldRender: l, children: n ? /* @__PURE__ */ e(h, { icon: R, size: 20 }) : /* @__PURE__ */ e(h, { icon: S, size: 20, className: "-scale-100" }) }),
+        /* @__PURE__ */ e(d, { shouldRender: !l, children: n ? /* @__PURE__ */ e(V, { size: 20 }) : /* @__PURE__ */ e(D, { size: 20, className: "-scale-100" }) })
       ] }) }),
-      /* @__PURE__ */ t(B, { className: "p-space-01", "data-testid": "sheetClose", asChild: !0, children: /* @__PURE__ */ t(g, { variant: "text", colors: "neutral", size: "icon-sm", children: l ? /* @__PURE__ */ t(u, { icon: z, className: "size-[20px]" }) : /* @__PURE__ */ t(_, { className: "size-[20px]" }) }) })
+      /* @__PURE__ */ e(B, { className: "p-space-01", "data-testid": "sheetClose", asChild: !0, children: /* @__PURE__ */ e(g, { variant: "text", colors: "neutral", size: "icon-sm", children: l ? /* @__PURE__ */ e(h, { icon: z, className: "size-[20px]" }) : /* @__PURE__ */ e(_, { className: "size-[20px]" }) }) })
     ] })
   ] });
 };
 M.displayName = "SheetHeader";
-const L = ({ className: a, ...e }) => /* @__PURE__ */ t(
+const L = ({ className: a, ...t }) => /* @__PURE__ */ e(
   "div",
   {
     className: r(
       "mt-auto  flex w-full flex-col bg-background-secondary p-space-04 sm:flex-row sm:justify-end sm:space-x-2 sm:p-space-05",
       a
     ),
-    ...e
+    ...t
   }
 );
 L.displayName = "SheetFooter";
 const C = i.forwardRef(
-  ({ className: a, ...e }, o) => /* @__PURE__ */ t(s.Title, { ref: o, className: r("text-body-01 font-semibold", a), ...e })
+  ({ className: a, ...t }, o) => /* @__PURE__ */ e(s.Title, { ref: o, className: r("text-body-01 font-semibold", a), ...t })
 );
 C.displayName = s.Title.displayName;
-const Q = i.forwardRef(({ className: a, ...e }, o) => /* @__PURE__ */ t(s.Description, { ref: o, className: r("text-sm text-muted-foreground", a), ...e }));
+const Q = i.forwardRef(({ className: a, ...t }, o) => /* @__PURE__ */ e(s.Description, { ref: o, className: r("text-sm text-muted-foreground", a), ...t }));
 Q.displayName = s.Description.displayName;
-const W = i.forwardRef(({ className: a, ...e }, o) => /* @__PURE__ */ t(
+const W = i.forwardRef(({ className: a, ...t }, o) => /* @__PURE__ */ e(
   "div",
   {
     ref: o,
@@ -118,7 +118,7 @@ const W = i.forwardRef(({ className: a, ...e }, o) => /* @__PURE__ */ t(
       "h-full overflow-auto rounded-4 border border-border-neutral-secondary bg-card p-space-04 text-foreground lg:p-space-05",
       a
     ),
-    ...e
+    ...t
   }
 ));
 W.displayName = "SheetBody";

package/index.es74.js

@@ -1,78 +1,81 @@
-import { jsx as r, jsxs as S } from "react/jsx-runtime";
+import { jsx as r, jsxs as h } from "react/jsx-runtime";
 import { Menu03FreeIcons as C } from "./index.es118.js";
-import { Slot as h } from "@radix-ui/react-slot";
+import { Slot as x } from "@radix-ui/react-slot";
 import { cva as z } from "./index.es127.js";
 import * as i from "react";
 import { useIsMobile as I } from "./index.es190.js";
 import { cn as o } from "./index.es96.js";
-import { Button as B } from "./index.es27.js";
-import { Input as E } from "./index.es42.js";
-import { Separator as T } from "./index.es72.js";
-import { Sheet as A, SheetContent as O } from "./index.es73.js";
+import { Button as T } from "./index.es27.js";
+import { Input as B } from "./index.es42.js";
+import { Separator as E } from "./index.es72.js";
+import { Sheet as A, SheetHeader as O, SheetTitle as G, SheetContent as D } from "./index.es73.js";
 import { Skeleton as R } from "./index.es75.js";
-import { Tooltip as G, TooltipTrigger as D, TooltipContent as K, TooltipProvider as j } from "./index.es85.js";
-import { HugeiconsIcon as H } from "./index.es119.js";
-import L from "./index.es187.js";
-import { useIconConfig as V } from "./index.es99.js";
-const $ = "sidebar:state", F = 3600 * 24 * 7, P = "b", _ = i.createContext(null);
+import { Tooltip as H, TooltipTrigger as K, TooltipContent as j, TooltipProvider as L } from "./index.es85.js";
+import { HugeiconsIcon as V } from "./index.es119.js";
+import $ from "./index.es187.js";
+import { useIconConfig as F } from "./index.es99.js";
+const P = "sidebar:state", q = 3600 * 24 * 7, U = "b", _ = i.createContext(null);
 function y() {
   const a = i.useContext(_);
   if (!a)
     throw new Error("useSidebar must be used within a SidebarProvider.");
   return a;
 }
-const q = i.forwardRef(({ defaultOpen: a = !0, open: e, onOpenChange: t, className: n, style: d, children: s, ...c }, m) => {
-  const u = I(), [f, b] = i.useState(!1), [N, x] = i.useState(a), g = e ?? N, v = i.useCallback(
+const X = i.forwardRef(({ defaultOpen: a = !0, open: e, onOpenChange: t, className: d, style: n, children: s, ...c }, m) => {
+  const u = I(), [f, b] = i.useState(!1), [N, v] = i.useState(a), g = e ?? N, w = i.useCallback(
     (l) => {
       const p = typeof l == "function" ? l(g) : l;
-      t ? t(p) : x(p), document.cookie = `${$}=${p}; path=/; max-age=${F}`;
+      t ? t(p) : v(p), document.cookie = `${P}=${p}; path=/; max-age=${q}`;
     },
     [t, g]
-  ), w = i.useCallback(() => u ? b((l) => !l) : v((l) => !l), [u, v, b]);
+  ), S = i.useCallback(() => u ? b((l) => !l) : w((l) => !l), [u, w, b]);
   i.useEffect(() => {
     const l = (p) => {
-      p.key === P && (p.metaKey || p.ctrlKey) && (p.preventDefault(), w());
+      p.key === U && (p.metaKey || p.ctrlKey) && (p.preventDefault(), S());
     };
     return window.addEventListener("keydown", l), () => window.removeEventListener("keydown", l);
-  }, [w]);
+  }, [S]);
   const M = g ? "expanded" : "collapsed", k = i.useMemo(
     () => ({
       state: M,
       open: g,
-      setOpen: v,
+      setOpen: w,
       isMobile: u,
       openMobile: f,
       setOpenMobile: b,
-      toggleSidebar: w
+      toggleSidebar: S
     }),
-    [M, g, v, u, f, b, w]
+    [M, g, w, u, f, b, S]
   );
-  return /* @__PURE__ */ r(_.Provider, { value: k, children: /* @__PURE__ */ r(j, { delayDuration: 0, children: /* @__PURE__ */ r(
+  return /* @__PURE__ */ r(_.Provider, { value: k, children: /* @__PURE__ */ r(L, { delayDuration: 0, children: /* @__PURE__ */ r(
     "div",
     {
       style: {
-        ...d
+        ...n
       },
-      className: o("group/sidebar-wrapper has-[[data-variant=inset]]:bg-sidebar flex min-h-svh w-full", n),
+      className: o("group/sidebar-wrapper has-[[data-variant=inset]]:bg-sidebar flex min-h-svh w-full", d),
       ref: m,
       ...c,
       children: s
     }
   ) }) });
 });
-q.displayName = "SidebarProvider";
-const U = i.forwardRef(({ side: a = "left", variant: e = "sidebar", collapsible: t = "offcanvas", className: n, children: d, ...s }, c) => {
+X.displayName = "SidebarProvider";
+const Y = i.forwardRef(({ side: a = "left", variant: e = "sidebar", collapsible: t = "offcanvas", className: d, children: n, ...s }, c) => {
   const { isMobile: m, state: u, openMobile: f, setOpenMobile: b } = y();
-  return t === "none" ? /* @__PURE__ */ r("div", { className: o("bg-sidebar flex h-full w-[--sidebar-width] flex-col text-foreground-secondary", n), ref: c, ...s, children: d }) : m ? /* @__PURE__ */ r(A, { open: f, onOpenChange: b, ...s, children: /* @__PURE__ */ r(
-    O,
-    {
-      "data-sidebar": "sidebar",
-      "data-mobile": "true",
-      className: "w-[--sidebar-width-mobile] bg-card p-0 text-foreground-secondary [&>button]:hidden",
-      side: a,
-      children: /* @__PURE__ */ r("div", { className: "flex h-full w-full flex-col", children: d })
-    }
-  ) }) : /* @__PURE__ */ S(
+  return t === "none" ? /* @__PURE__ */ r("div", { className: o("bg-sidebar flex h-full w-[--sidebar-width] flex-col text-foreground-secondary", d), ref: c, ...s, children: n }) : m ? /* @__PURE__ */ h(A, { open: f, onOpenChange: b, ...s, children: [
+    /* @__PURE__ */ r(O, { className: "hidden", children: /* @__PURE__ */ r(G, {}) }),
+    /* @__PURE__ */ r(
+      D,
+      {
+        "data-sidebar": "sidebar",
+        "data-mobile": "true",
+        className: "w-[--sidebar-width-mobile] bg-card p-0 text-foreground-secondary [&>button]:hidden",
+        side: a,
+        children: /* @__PURE__ */ r("div", { className: "flex h-full w-full flex-col", children: n })
+      }
+    )
+  ] }) : /* @__PURE__ */ h(
     "div",
     {
       ref: c,
@@ -101,7 +104,7 @@ const U = i.forwardRef(({ side: a = "left", variant: e = "sidebar", collapsible:
               a === "left" ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
               // Adjust the padding for floating and inset variants.
               e === "floating" || e === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]" : "group-data-[collapsible=icon]:w-[--sidebar-width-icon]",
-              n
+              d
             ),
             ...s,
             children: /* @__PURE__ */ r(
@@ -109,7 +112,7 @@ const U = i.forwardRef(({ side: a = "left", variant: e = "sidebar", collapsible:
               {
                 "data-sidebar": "sidebar",
                 className: "bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow",
-                children: d
+                children: n
               }
             )
           }
@@ -118,34 +121,34 @@ const U = i.forwardRef(({ side: a = "left", variant: e = "sidebar", collapsible:
     }
   );
 });
-U.displayName = "Sidebar";
-const X = i.forwardRef(
-  ({ className: a, onClick: e, ...t }, n) => {
-    const { toggleSidebar: d } = y(), { isHugeIcons: s } = V();
-    return /* @__PURE__ */ S(
-      B,
+Y.displayName = "Sidebar";
+const J = i.forwardRef(
+  ({ className: a, onClick: e, ...t }, d) => {
+    const { toggleSidebar: n } = y(), { isHugeIcons: s } = F();
+    return /* @__PURE__ */ h(
+      T,
       {
-        ref: n,
+        ref: d,
         "data-sidebar": "trigger",
         variant: "text",
         colors: "neutral",
-        size: "icon",
+        size: "icon-sm",
         className: o(a),
         onClick: (c) => {
-          e == null || e(c), d();
+          e == null || e(c), n();
         },
         ...t,
         children: [
-          s ? /* @__PURE__ */ r(H, { icon: C }) : /* @__PURE__ */ r(L, { className: "ltr:-scale-x-100" }),
+          s ? /* @__PURE__ */ r(V, { icon: C }) : /* @__PURE__ */ r($, { className: "ltr:-scale-x-100" }),
           /* @__PURE__ */ r("span", { className: "sr-only", children: "Toggle Sidebar" })
         ]
       }
     );
   }
 );
-X.displayName = "SidebarTrigger";
-const Y = i.forwardRef(({ className: a, ...e }, t) => {
-  const { toggleSidebar: n } = y();
+J.displayName = "SidebarTrigger";
+const Q = i.forwardRef(({ className: a, ...e }, t) => {
+  const { toggleSidebar: d } = y();
   return /* @__PURE__ */ r(
     "button",
     {
@@ -153,7 +156,7 @@ const Y = i.forwardRef(({ className: a, ...e }, t) => {
       "data-sidebar": "rail",
       "aria-label": "Toggle Sidebar",
       tabIndex: -1,
-      onClick: n,
+      onClick: d,
       title: "Toggle Sidebar",
       className: o(
         "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
@@ -168,8 +171,8 @@ const Y = i.forwardRef(({ className: a, ...e }, t) => {
     }
   );
 });
-Y.displayName = "SidebarRail";
-const J = i.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r(
+Q.displayName = "SidebarRail";
+const W = i.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r(
   "main",
   {
     ref: t,
@@ -181,9 +184,9 @@ const J = i.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r(
     ...e
   }
 ));
-J.displayName = "SidebarInset";
-const Q = i.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r(
-  E,
+W.displayName = "SidebarInset";
+const Z = i.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r(
+  B,
   {
     ref: t,
     "data-sidebar": "input",
@@ -191,16 +194,16 @@ const Q = i.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r(
     ...e
   }
 ));
-Q.displayName = "SidebarInput";
-const W = i.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r("div", { ref: t, "data-sidebar": "header", className: o("flex flex-col gap-2", a), ...e }));
-W.displayName = "SidebarHeader";
-const Z = i.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r("div", { ref: t, "data-sidebar": "footer", className: o("flex flex-col gap-space-02 pb-space-03", a), ...e }));
-Z.displayName = "SidebarFooter";
-const ee = i.forwardRef(
-  ({ className: a, ...e }, t) => /* @__PURE__ */ r(T, { ref: t, "data-sidebar": "separator", className: o("bg-sidebar-border mx-2 w-auto", a), ...e })
+Z.displayName = "SidebarInput";
+const ee = i.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r("div", { ref: t, "data-sidebar": "header", className: o("flex flex-col gap-2", a), ...e }));
+ee.displayName = "SidebarHeader";
+const ae = i.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r("div", { ref: t, "data-sidebar": "footer", className: o("flex flex-col gap-space-02 pb-space-03", a), ...e }));
+ae.displayName = "SidebarFooter";
+const te = i.forwardRef(
+  ({ className: a, ...e }, t) => /* @__PURE__ */ r(E, { ref: t, "data-sidebar": "separator", className: o("bg-sidebar-border mx-2 w-auto", a), ...e })
 );
-ee.displayName = "SidebarSeparator";
-const ae = i.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r(
+te.displayName = "SidebarSeparator";
+const re = i.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r(
   "div",
   {
     ref: t,
@@ -209,8 +212,8 @@ const ae = i.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r(
     ...e
   }
 ));
-ae.displayName = "SidebarContent";
-const te = i.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r(
+re.displayName = "SidebarContent";
+const ie = i.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r(
   "div",
   {
     ref: t,
@@ -219,12 +222,12 @@ const te = i.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r(
     ...e
   }
 ));
-te.displayName = "SidebarGroup";
-const re = i.forwardRef(
-  ({ className: a, asChild: e = !1, ...t }, n) => /* @__PURE__ */ r(
-    e ? h : "div",
+ie.displayName = "SidebarGroup";
+const oe = i.forwardRef(
+  ({ className: a, asChild: e = !1, ...t }, d) => /* @__PURE__ */ r(
+    e ? x : "div",
     {
-      ref: n,
+      ref: d,
       "data-sidebar": "group-label",
       className: o(
         "text-foreground-secondary/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-none transition-[margin,opa] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
@@ -235,12 +238,12 @@ const re = i.forwardRef(
     }
   )
 );
-re.displayName = "SidebarGroupLabel";
-const ie = i.forwardRef(
-  ({ className: a, asChild: e = !1, ...t }, n) => /* @__PURE__ */ r(
-    e ? h : "button",
+oe.displayName = "SidebarGroupLabel";
+const de = i.forwardRef(
+  ({ className: a, asChild: e = !1, ...t }, d) => /* @__PURE__ */ r(
+    e ? x : "button",
     {
-      ref: n,
+      ref: d,
       "data-sidebar": "group-action",
       className: o(
         "ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-foreground-secondary outline-none transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
@@ -253,12 +256,12 @@ const ie = i.forwardRef(
     }
   )
 );
-ie.displayName = "SidebarGroupAction";
-const oe = i.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r("div", { ref: t, "data-sidebar": "group-content", className: o("w-full text-sm", a), ...e }));
-oe.displayName = "SidebarGroupContent";
-const ne = i.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r("ul", { ref: t, "data-sidebar": "menu", className: o("flex w-full min-w-0 flex-col gap-space-02", a), ...e }));
-ne.displayName = "SidebarMenu";
-const de = i.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r(
+de.displayName = "SidebarGroupAction";
+const ne = i.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r("div", { ref: t, "data-sidebar": "group-content", className: o("w-full text-sm", a), ...e }));
+ne.displayName = "SidebarGroupContent";
+const se = i.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r("ul", { ref: t, "data-sidebar": "menu", className: o("flex w-full min-w-0 flex-col gap-space-02", a), ...e }));
+se.displayName = "SidebarMenu";
+const le = i.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r(
   "li",
   {
     ref: t,
@@ -270,8 +273,8 @@ const de = i.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r(
     ...e
   }
 ));
-de.displayName = "SidebarMenuItem";
-const se = z(
+le.displayName = "SidebarMenuItem";
+const ce = z(
   "peer/menu-button  py-space-01 px-space-03 ring-sidebar-ring active:bg-sidebar-accent data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground flex w-full items-center gap-space-02 overflow-hidden text-left text-start text-body-01 outline-none transition-[width,height,padding] group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-background data-[active=true]:font-medium data-[active=true]:text-text-display group-data-[collapsible=icon]:!w-[36px] group-data-[collapsible=icon]:!px-space-02 hover:bg-background-neutral-100 hover:text-text-default focus-visible:ring-2 active:text-text-display disabled:pointer-events-none disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-[20px] [&>svg]:shrink-0",
   {
     variants: {
@@ -295,30 +298,30 @@ const se = z(
       rounded: "default"
     }
   }
-), le = i.forwardRef(({ asChild: a = !1, isActive: e = !1, variant: t = "default", size: n = "default", rounded: d = "default", tooltip: s, className: c, ...m }, u) => {
-  const f = a ? h : "button", { isMobile: b, state: N } = y(), x = /* @__PURE__ */ r(
+), ue = i.forwardRef(({ asChild: a = !1, isActive: e = !1, variant: t = "default", size: d = "default", rounded: n = "default", tooltip: s, className: c, ...m }, u) => {
+  const f = a ? x : "button", { isMobile: b, state: N } = y(), v = /* @__PURE__ */ r(
     f,
     {
       ref: u,
       "data-sidebar": "menu-button",
-      "data-size": n,
+      "data-size": d,
       "data-active": e,
-      className: o(se({ variant: t, size: n, rounded: d }), c),
+      className: o(ce({ variant: t, size: d, rounded: n }), c),
       ...m
     }
   );
   return s ? (typeof s == "string" && (s = {
     children: s
-  }), /* @__PURE__ */ S(G, { children: [
-    /* @__PURE__ */ r(D, { asChild: !0, children: x }),
-    /* @__PURE__ */ r(K, { side: "right", align: "center", hidden: N !== "collapsed" || b, ...s })
-  ] })) : x;
+  }), /* @__PURE__ */ h(H, { children: [
+    /* @__PURE__ */ r(K, { asChild: !0, children: v }),
+    /* @__PURE__ */ r(j, { side: "right", align: "center", hidden: N !== "collapsed" || b, ...s })
+  ] })) : v;
 });
-le.displayName = "SidebarMenuButton";
-const ce = i.forwardRef(({ className: a, asChild: e = !1, showOnHover: t = !1, ...n }, d) => /* @__PURE__ */ r(
-  e ? h : "button",
+ue.displayName = "SidebarMenuButton";
+const be = i.forwardRef(({ className: a, asChild: e = !1, showOnHover: t = !1, ...d }, n) => /* @__PURE__ */ r(
+  e ? x : "button",
   {
-    ref: d,
+    ref: n,
     "data-sidebar": "menu-action",
     className: o(
       "ring-sidebar-ring peer-hover/menu-button:text-sidebar-accent-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-foreground-secondary outline-none transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
@@ -331,11 +334,11 @@ const ce = i.forwardRef(({ className: a, asChild: e = !1, showOnHover: t = !1, .
       t && "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
       a
     ),
-    ...n
+    ...d
   }
 ));
-ce.displayName = "SidebarMenuAction";
-const ue = i.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r(
+be.displayName = "SidebarMenuAction";
+const pe = i.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r(
   "div",
   {
     ref: t,
@@ -352,10 +355,10 @@ const ue = i.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r(
     ...e
   }
 ));
-ue.displayName = "SidebarMenuBadge";
-const be = i.forwardRef(({ className: a, showIcon: e = !1, ...t }, n) => {
-  const d = i.useMemo(() => `${Math.floor(Math.random() * 40) + 50}%`, []);
-  return /* @__PURE__ */ S("div", { ref: n, "data-sidebar": "menu-skeleton", className: o("flex h-8 items-center gap-2 rounded-md px-2", a), ...t, children: [
+pe.displayName = "SidebarMenuBadge";
+const fe = i.forwardRef(({ className: a, showIcon: e = !1, ...t }, d) => {
+  const n = i.useMemo(() => `${Math.floor(Math.random() * 40) + 50}%`, []);
+  return /* @__PURE__ */ h("div", { ref: d, "data-sidebar": "menu-skeleton", className: o("flex h-8 items-center gap-2 rounded-md px-2", a), ...t, children: [
     e && /* @__PURE__ */ r(R, { className: "size-4 rounded-md", "data-sidebar": "menu-skeleton-icon" }),
     /* @__PURE__ */ r(
       R,
@@ -363,14 +366,14 @@ const be = i.forwardRef(({ className: a, showIcon: e = !1, ...t }, n) => {
         className: "h-4 max-w-[--skeleton-width] flex-1",
         "data-sidebar": "menu-skeleton-text",
         style: {
-          "--skeleton-width": d
+          "--skeleton-width": n
         }
       }
     )
   ] });
 });
-be.displayName = "SidebarMenuSkeleton";
-const pe = i.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r(
+fe.displayName = "SidebarMenuSkeleton";
+const me = i.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r(
   "ul",
   {
     ref: t,
@@ -383,11 +386,11 @@ const pe = i.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r(
     ...e
   }
 ));
-pe.displayName = "SidebarMenuSub";
-const fe = i.forwardRef(({ ...a }, e) => /* @__PURE__ */ r("li", { ref: e, ...a }));
-fe.displayName = "SidebarMenuSubItem";
-const me = i.forwardRef(({ asChild: a = !1, size: e = "md", isActive: t, className: n, ...d }, s) => /* @__PURE__ */ r(
-  a ? h : "a",
+me.displayName = "SidebarMenuSub";
+const ge = i.forwardRef(({ ...a }, e) => /* @__PURE__ */ r("li", { ref: e, ...a }));
+ge.displayName = "SidebarMenuSubItem";
+const he = i.forwardRef(({ asChild: a = !1, size: e = "md", isActive: t, className: d, ...n }, s) => /* @__PURE__ */ r(
+  a ? x : "a",
   {
     ref: s,
     "data-sidebar": "menu-sub-button",
@@ -399,35 +402,35 @@ const me = i.forwardRef(({ asChild: a = !1, size: e = "md", isActive: t, classNa
       e === "sm" && "text-xs",
       e === "md" && "text-sm",
       "group-data-[collapsible=icon]:hidden",
-      n
+      d
     ),
-    ...d
+    ...n
   }
 ));
-me.displayName = "SidebarMenuSubButton";
+he.displayName = "SidebarMenuSubButton";
 export {
-  U as Sidebar,
-  ae as SidebarContent,
-  Z as SidebarFooter,
-  te as SidebarGroup,
-  ie as SidebarGroupAction,
-  oe as SidebarGroupContent,
-  re as SidebarGroupLabel,
-  W as SidebarHeader,
-  Q as SidebarInput,
-  J as SidebarInset,
-  ne as SidebarMenu,
-  ce as SidebarMenuAction,
-  ue as SidebarMenuBadge,
-  le as SidebarMenuButton,
-  de as SidebarMenuItem,
-  be as SidebarMenuSkeleton,
-  pe as SidebarMenuSub,
-  me as SidebarMenuSubButton,
-  fe as SidebarMenuSubItem,
-  q as SidebarProvider,
-  Y as SidebarRail,
-  ee as SidebarSeparator,
-  X as SidebarTrigger,
+  Y as Sidebar,
+  re as SidebarContent,
+  ae as SidebarFooter,
+  ie as SidebarGroup,
+  de as SidebarGroupAction,
+  ne as SidebarGroupContent,
+  oe as SidebarGroupLabel,
+  ee as SidebarHeader,
+  Z as SidebarInput,
+  W as SidebarInset,
+  se as SidebarMenu,
+  be as SidebarMenuAction,
+  pe as SidebarMenuBadge,
+  ue as SidebarMenuButton,
+  le as SidebarMenuItem,
+  fe as SidebarMenuSkeleton,
+  me as SidebarMenuSub,
+  he as SidebarMenuSubButton,
+  ge as SidebarMenuSubItem,
+  X as SidebarProvider,
+  Q as SidebarRail,
+  te as SidebarSeparator,
+  J as SidebarTrigger,
   y as useSidebar
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mada-design-system",
-  "version": "1.3.0",
+  "version": "1.3.2",
   "sideEffects": false,
   "private": false,
   "main": "index.es.js",
@@ -114,8 +114,8 @@
     "lint-staged": "^16.1.5",
     "postcss": "^8.5.1",
     "postcss-rtlcss": "^4.0.8",
-    "prettier": "^3.4.2",
-    "prettier-plugin-tailwindcss": "^0.5.11",
+    "prettier": "^3.8.1",
+    "prettier-plugin-tailwindcss": "^0.7.2",
     "rtlcss": "^4.3.0",
     "storybook": "^8.5.3",
     "storybook-dark-mode": "^4.0.2",