@trsys-tech/matrix-library 0.6.0 → 1.0.0-canary.0

package/dist/sidebar.es.js

@@ -1,6 +1,6 @@
-import { jsx as r, jsxs as x } from "react/jsx-runtime";
+import { jsx as r, jsxs as v } from "react/jsx-runtime";
 import * as i from "react";
-import { Slot as v } from "@radix-ui/react-slot";
+import { Slot as w } from "@radix-ui/react-slot";
 import { tv as z } from "tailwind-variants";
 import { VisuallyHidden as I } from "@radix-ui/react-visually-hidden";
 import { cn as d } from "./utils.es.js";
@@ -11,122 +11,122 @@ import { Tooltip as T, TooltipTrigger as A, TooltipContent as D, TooltipProvider
 import { Sheet as G, SheetContent as H, SheetHeader as j, SheetTitle as K, SheetDescription as L } from "./sheet.es.js";
 const V = "sidebar:state", $ = 3600 * 24 * 7, y = "16rem", C = "18rem", N = "4rem", P = "b", M = i.createContext(null);
 function _() {
-  const e = i.useContext(M);
-  if (!e)
+  const t = i.useContext(M);
+  if (!t)
     throw new Error("useSidebar must be used within a SidebarProvider.");
-  return e;
+  return t;
 }
-const W = i.forwardRef(({ defaultOpen: e = !0, open: a, onOpenChange: t, className: o, style: s, children: n, ...l }, u) => {
-  const b = B(), [g, h] = i.useState(e), c = a ?? g, m = i.useCallback(
-    (p) => {
-      const f = typeof p == "function" ? p(c) : p;
-      t ? t(f) : h(f), document.cookie = `${V}=${f}; path=/; max-age=${$}`;
+const W = i.forwardRef(({ defaultOpen: t = !0, open: e, onOpenChange: a, className: m, style: o, children: s, ...n }, x) => {
+  const p = B(), [f, g] = i.useState(t), l = e ?? f, b = i.useCallback(
+    (c) => {
+      const u = typeof c == "function" ? c(l) : c;
+      a ? a(u) : g(u), document.cookie = `${V}=${u}; path=/; max-age=${$}`;
     },
-    [t, c]
-  ), w = i.useCallback(() => m((p) => !p), [m]);
+    [a, l]
+  ), h = i.useCallback(() => b((c) => !c), [b]);
   i.useEffect(() => {
-    const p = (f) => {
-      f.key === P && (f.metaKey || f.ctrlKey) && (f.preventDefault(), w());
+    const c = (u) => {
+      u.key === P && (u.metaKey || u.ctrlKey) && (u.preventDefault(), h());
     };
-    return window.addEventListener("keydown", p), () => window.removeEventListener("keydown", p);
-  }, [w]);
-  const S = c ? "expanded" : "collapsed", k = i.useMemo(
+    return window.addEventListener("keydown", c), () => window.removeEventListener("keydown", c);
+  }, [h]);
+  const S = l ? "expanded" : "collapsed", k = i.useMemo(
     () => ({
       state: S,
-      open: c,
-      setOpen: m,
-      isMobile: b,
-      toggleSidebar: w
+      open: l,
+      setOpen: b,
+      isMobile: p,
+      toggleSidebar: h
     }),
-    [S, c, m, b, w]
+    [S, l, b, p, h]
   );
   return /* @__PURE__ */ r(M.Provider, { value: k, children: /* @__PURE__ */ r(O, { delayDuration: 0, children: /* @__PURE__ */ r(
     "div",
     {
-      style: { ...s },
-      className: d("group/sidebar-wrapper flex h-full w-full has-[[data-variant=inset]]:bg-gray-50", o),
-      ref: u,
-      ...l,
-      children: n
+      style: { ...o },
+      className: d("mtx-group/sidebar-wrapper mtx-flex mtx-h-full mtx-w-full has-[[data-variant=inset]]:mtx-bg-gray-50", m),
+      ref: x,
+      ...n,
+      children: s
     }
   ) }) });
 });
 W.displayName = "SidebarProvider";
-const q = i.forwardRef(({ side: e = "left", variant: a = "sidebar", collapsible: t = "offcanvas", className: o, children: s, width: n, widthIcon: l, widthMobile: u, style: b, ...g }, h) => {
-  const { isMobile: c, state: m, open: w, setOpen: S } = _();
-  return t === "none" ? /* @__PURE__ */ r(
+const q = i.forwardRef(({ side: t = "left", variant: e = "sidebar", collapsible: a = "offcanvas", className: m, children: o, width: s, widthIcon: n, widthMobile: x, style: p, ...f }, g) => {
+  const { isMobile: l, state: b, open: h, setOpen: S } = _();
+  return a === "none" ? /* @__PURE__ */ r(
     "div",
     {
-      "data-side": e,
+      "data-side": t,
       style: {
-        ...e === "left" ? {
-          "--sidebar-left-width": n ?? y,
-          "--sidebar-left-width-icon": l ?? N
+        ...t === "left" ? {
+          "--sidebar-left-width": s ?? y,
+          "--sidebar-left-width-icon": n ?? N
         } : {
-          "--sidebar-right-width": n ?? y,
-          "--sidebar-right-width-icon": l ?? N
+          "--sidebar-right-width": s ?? y,
+          "--sidebar-right-width-icon": n ?? N
         },
-        ...b
+        ...p
       },
       className: d(
-        "flex h-full data-[side=left]:w-[--sidebar-left-width] data-[side=right]:w-[--sidebar-right-width] flex-col bg-gray-50",
-        o
+        "mtx-flex mtx-h-full data-[side=left]:mtx-w-[--sidebar-left-width] data-[side=right]:mtx-w-[--sidebar-right-width] mtx-flex-col mtx-bg-gray-50",
+        m
       ),
-      ref: h,
-      ...g,
-      children: s
+      ref: g,
+      ...f,
+      children: o
     }
-  ) : c ? /* @__PURE__ */ r(G, { open: w, onOpenChange: S, ...g, children: /* @__PURE__ */ x(
+  ) : l ? /* @__PURE__ */ r(G, { open: h, onOpenChange: S, ...f, children: /* @__PURE__ */ v(
     H,
     {
       "data-sidebar": "sidebar",
       "data-mobile": "true",
-      "data-side": e,
-      className: "data-[side=left]:w-[--sidebar-left-width] data-[side=right]:w-[--sidebar-right-width] bg-gray-50 p-0 [&>button]:hidden",
+      "data-side": t,
+      className: "data-[side=left]:mtx-w-[--sidebar-left-width] data-[side=right]:mtx-w-[--sidebar-right-width] mtx-bg-gray-50 mtx-p-0 [&>button]:mtx-hidden",
       style: {
-        ...e === "left" ? {
-          "--sidebar-left-width": u ?? C
+        ...t === "left" ? {
+          "--sidebar-left-width": x ?? C
         } : {
-          "--sidebar-right-width": u ?? C
+          "--sidebar-right-width": x ?? C
         }
       },
-      side: e,
+      side: t,
       children: [
-        /* @__PURE__ */ r(I, { children: /* @__PURE__ */ x(j, { children: [
+        /* @__PURE__ */ r(I, { children: /* @__PURE__ */ v(j, { children: [
           /* @__PURE__ */ r(K, { children: " " }),
           /* @__PURE__ */ r(L, { children: " " })
         ] }) }),
-        /* @__PURE__ */ r("div", { className: "flex h-full w-full flex-col", children: s })
+        /* @__PURE__ */ r("div", { className: "mtx-flex mtx-h-full mtx-w-full mtx-flex-col", children: o })
       ]
     }
-  ) }) : /* @__PURE__ */ x(
+  ) }) : /* @__PURE__ */ v(
     "div",
     {
-      ref: h,
-      className: "group peer hidden md:block relative",
-      "data-state": m,
-      "data-collapsible": m === "collapsed" ? t : "",
-      "data-variant": a,
-      "data-side": e,
+      ref: g,
+      className: "mtx-group mtx-peer mtx-hidden md:mtx-block mtx-relative",
+      "data-state": b,
+      "data-collapsible": b === "collapsed" ? a : "",
+      "data-variant": e,
+      "data-side": t,
       style: {
-        ...e === "left" ? {
-          "--sidebar-left-width": n ?? y,
-          "--sidebar-left-width-icon": l ?? N
+        ...t === "left" ? {
+          "--sidebar-left-width": s ?? y,
+          "--sidebar-left-width-icon": n ?? N
         } : {
-          "--sidebar-right-width": n ?? y,
-          "--sidebar-right-width-icon": l ?? N
+          "--sidebar-right-width": s ?? y,
+          "--sidebar-right-width-icon": n ?? N
         },
-        ...b
+        ...p
       },
       children: [
         /* @__PURE__ */ r(
           "div",
           {
             className: d(
-              "duration-200 relative h-full group-data-[side=left]:w-[--sidebar-left-width] group-data-[side=right]:w-[--sidebar-right-width] bg-transparent transition-[width] ease-linear",
-              "group-data-[side=left]:group-data-[collapsible=offcanvas]:w-0 group-data-[side=right]:group-data-[collapsible=offcanvas]:w-0",
-              "group-data-[side=right]:rotate-180",
-              a === "floating" || a === "inset" ? "group-data-[side=left]:group-data-[collapsible=icon]:w-[calc(var(--sidebar-left-width-icon)_+_theme(spacing.4))] group-data-[side=right]:group-data-[collapsible=icon]:w-[calc(var(--sidebar-right-width-icon)_+_theme(spacing.4))]" : "group-data-[side=left]:group-data-[collapsible=icon]:w-[--sidebar-left-width-icon] group-data-[side=right]:group-data-[collapsible=icon]:w-[--sidebar-right-width-icon]"
+              "mtx-duration-200 mtx-relative mtx-h-full group-data-[side=left]:mtx-w-[--sidebar-left-width] group-data-[side=right]:mtx-w-[--sidebar-right-width] mtx-bg-transparent mtx-transition-[width] mtx-ease-linear",
+              "group-data-[side=left]:group-data-[collapsible=offcanvas]:mtx-w-0 group-data-[side=right]:group-data-[collapsible=offcanvas]:mtx-w-0",
+              "group-data-[side=right]:mtx-rotate-180",
+              e === "floating" || e === "inset" ? "group-data-[side=left]:group-data-[collapsible=icon]:mtx-w-[calc(var(--sidebar-left-width-icon)_+_theme(spacing.4))] group-data-[side=right]:group-data-[collapsible=icon]:mtx-w-[calc(var(--sidebar-right-width-icon)_+_theme(spacing.4))]" : "group-data-[side=left]:group-data-[collapsible=icon]:mtx-w-[--sidebar-left-width-icon] group-data-[side=right]:group-data-[collapsible=icon]:mtx-w-[--sidebar-right-width-icon]"
             )
           }
         ),
@@ -134,19 +134,19 @@ const q = i.forwardRef(({ side: e = "left", variant: a = "sidebar", collapsible:
           "div",
           {
             className: d(
-              "duration-200 absolute inset-y-0 z-10 hidden h-full group-data-[side=left]:w-[--sidebar-left-width] group-data-[side=right]:w-[--sidebar-right-width] transition-[left,right,width] ease-linear md:flex",
-              e === "left" ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-left-width)*-1)]" : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-right-width)*-1)]",
+              "mtx-duration-200 mtx-absolute mtx-inset-y-0 mtx-z-10 mtx-hidden mtx-h-full group-data-[side=left]:mtx-w-[--sidebar-left-width] group-data-[side=right]:mtx-w-[--sidebar-right-width] mtx-transition-[left,right,width] mtx-ease-linear md:mtx-flex",
+              t === "left" ? "mtx-left-0 group-data-[collapsible=offcanvas]:mtx-left-[calc(var(--sidebar-left-width)*-1)]" : "mtx-right-0 group-data-[collapsible=offcanvas]:mtx-right-[calc(var(--sidebar-right-width)*-1)]",
               // Adjust the padding for floating and inset variants.
-              a === "floating" || a === "inset" ? "p-2 group-data-[side=left]:group-data-[collapsible=icon]:w-[calc(var(--sidebar-left-width-icon)_+_theme(spacing.4)_+2px)] group-data-[side=right]:group-data-[collapsible=icon]:w-[calc(var(--sidebar-right-width-icon)_+_theme(spacing.4)_+2px)]" : "group-data-[side=left]:group-data-[collapsible=icon]:w-[--sidebar-left-width-icon] group-data-[side=right]:group-data-[collapsible=icon]:w-[--sidebar-right-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
-              o
+              e === "floating" || e === "inset" ? "mtx-p-2 group-data-[side=left]:group-data-[collapsible=icon]:mtx-w-[calc(var(--sidebar-left-width-icon)_+_theme(spacing.4)_+2px)] group-data-[side=right]:group-data-[collapsible=icon]:mtx-w-[calc(var(--sidebar-right-width-icon)_+_theme(spacing.4)_+2px)]" : "group-data-[side=left]:group-data-[collapsible=icon]:mtx-w-[--sidebar-left-width-icon] group-data-[side=right]:group-data-[collapsible=icon]:mtx-w-[--sidebar-right-width-icon] group-data-[side=left]:mtx-border-r group-data-[side=right]:mtx-border-l",
+              m
             ),
-            ...g,
+            ...f,
             children: /* @__PURE__ */ r(
               "div",
               {
                 "data-sidebar": "sidebar",
-                className: "flex h-full w-full flex-col bg-gray-50 group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow",
-                children: s
+                className: "mtx-flex mtx-h-full mtx-w-full mtx-flex-col mtx-bg-gray-50 group-data-[variant=floating]:mtx-rounded-lg group-data-[variant=floating]:mtx-border group-data-[variant=floating]:mtx-shadow",
+                children: o
               }
             )
           }
@@ -157,268 +157,280 @@ const q = i.forwardRef(({ side: e = "left", variant: a = "sidebar", collapsible:
 });
 q.displayName = "Sidebar";
 const F = i.forwardRef(
-  ({ className: e, onClick: a, asChild: t, ...o }, s) => {
-    const { toggleSidebar: n } = _();
+  ({ className: t, onClick: e, asChild: a, ...m }, o) => {
+    const { toggleSidebar: s } = _();
     return /* @__PURE__ */ r(
-      t ? v : "button",
+      a ? w : "button",
       {
-        ref: s,
+        ref: o,
         "data-sidebar": "trigger",
-        className: d("h-7 w-7", e),
-        onClick: (u) => {
-          a?.(u), n();
+        className: d("mtx-h-7 mtx-w-7", t),
+        onClick: (x) => {
+          e?.(x), s();
         },
-        ...o
+        ...m
       }
     );
   }
 );
 F.displayName = "SidebarTrigger";
-const U = i.forwardRef(({ className: e, ...a }, t) => {
-  const { toggleSidebar: o } = _();
+const U = i.forwardRef(({ className: t, ...e }, a) => {
+  const { toggleSidebar: m } = _();
   return /* @__PURE__ */ r(
     "button",
     {
-      ref: t,
+      ref: a,
       "data-sidebar": "rail",
       "aria-label": "Toggle Sidebar",
       tabIndex: -1,
-      onClick: o,
+      onClick: m,
       title: "Toggle Sidebar",
       className: d(
-        "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] hover:after:bg-gray-50-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
-        "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
-        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
-        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-gray-50",
-        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
-        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
-        e
+        "mtx-absolute mtx-inset-y-0 mtx-z-20 mtx-hidden mtx-w-4 -mtx-translate-x-1/2 mtx-transition-all mtx-ease-linear after:mtx-absolute after:mtx-inset-y-0 after:mtx-left-1/2 after:mtx-w-[2px] hover:after:mtx-bg-gray-50-border group-data-[side=left]:-mtx-right-4 group-data-[side=right]:mtx-left-0 sm:mtx-flex",
+        "[[data-side=left]_&]:mtx-cursor-w-resize [[data-side=right]_&]:mtx-cursor-e-resize",
+        "[[data-side=left][data-state=collapsed]_&]:mtx-cursor-e-resize [[data-side=right][data-state=collapsed]_&]:mtx-cursor-w-resize",
+        "group-data-[collapsible=offcanvas]:mtx-translate-x-0 group-data-[collapsible=offcanvas]:after:mtx-left-full group-data-[collapsible=offcanvas]:hover:mtx-bg-gray-50",
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-mtx-right-2",
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-mtx-left-2",
+        t
       ),
-      ...a
+      ...e
     }
   );
 });
 U.displayName = "SidebarRail";
-const X = i.forwardRef(({ className: e, ...a }, t) => /* @__PURE__ */ r(
+const X = i.forwardRef(({ className: t, ...e }, a) => /* @__PURE__ */ r(
   "main",
   {
-    ref: t,
+    ref: a,
     className: d(
-      "relative flex h-full flex-1 flex-col bg-background",
-      "peer-data-[variant=inset]:min-h-[calc(100%-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
-      e
+      "mtx-relative mtx-flex mtx-h-full mtx-flex-1 mtx-flex-col mtx-bg-background",
+      "peer-data-[variant=inset]:mtx-min-h-[calc(100%-theme(spacing.4))] md:peer-data-[variant=inset]:mtx-m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:mtx-ml-2 md:peer-data-[variant=inset]:mtx-ml-0 md:peer-data-[variant=inset]:mtx-rounded-xl md:peer-data-[variant=inset]:mtx-shadow",
+      t
     ),
-    ...a
+    ...e
   }
 ));
 X.displayName = "SidebarInset";
-const Y = i.forwardRef(({ className: e, ...a }, t) => /* @__PURE__ */ r("div", { ref: t, "data-sidebar": "header", className: d("flex flex-col gap-2 p-2", e), ...a }));
+const Y = i.forwardRef(({ className: t, ...e }, a) => /* @__PURE__ */ r("div", { ref: a, "data-sidebar": "header", className: d("mtx-flex mtx-flex-col mtx-gap-2 mtx-p-2", t), ...e }));
 Y.displayName = "SidebarHeader";
-const J = i.forwardRef(({ className: e, ...a }, t) => /* @__PURE__ */ r("div", { ref: t, "data-sidebar": "footer", className: d("flex flex-col gap-2 p-2", e), ...a }));
+const J = i.forwardRef(({ className: t, ...e }, a) => /* @__PURE__ */ r("div", { ref: a, "data-sidebar": "footer", className: d("mtx-flex mtx-flex-col mtx-gap-2 mtx-p-2", t), ...e }));
 J.displayName = "SidebarFooter";
 const Q = i.forwardRef(
-  ({ className: e, ...a }, t) => /* @__PURE__ */ r(E, { ref: t, "data-sidebar": "separator", className: d("mx-2 w-auto bg-gray-50-border", e), ...a })
+  ({ className: t, ...e }, a) => /* @__PURE__ */ r(E, { ref: a, "data-sidebar": "separator", className: d("mtx-mx-2 mtx-w-auto mtx-bg-gray-50-border", t), ...e })
 );
 Q.displayName = "SidebarSeparator";
-const Z = i.forwardRef(({ className: e, ...a }, t) => /* @__PURE__ */ r(
+const Z = i.forwardRef(({ className: t, ...e }, a) => /* @__PURE__ */ r(
   "div",
   {
-    ref: t,
+    ref: a,
     "data-sidebar": "content",
-    className: d("flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden", e),
-    ...a
+    className: d(
+      "mtx-flex mtx-min-h-0 mtx-flex-1 mtx-flex-col mtx-gap-2 mtx-overflow-auto group-data-[collapsible=icon]:mtx-overflow-hidden",
+      t
+    ),
+    ...e
   }
 ));
 Z.displayName = "SidebarContent";
-const ee = i.forwardRef(({ className: e, ...a }, t) => /* @__PURE__ */ r("div", { ref: t, "data-sidebar": "group", className: d("relative flex w-full min-w-0 flex-col py-2", e), ...a }));
-ee.displayName = "SidebarGroup";
-const ae = i.forwardRef(
-  ({ className: e, asChild: a = !1, ...t }, o) => /* @__PURE__ */ r(
-    a ? v : "div",
+const tt = i.forwardRef(({ className: t, ...e }, a) => /* @__PURE__ */ r("div", { ref: a, "data-sidebar": "group", className: d("mtx-relative mtx-flex mtx-w-full mtx-min-w-0 mtx-flex-col mtx-py-2", t), ...e }));
+tt.displayName = "SidebarGroup";
+const et = i.forwardRef(
+  ({ className: t, asChild: e = !1, ...a }, m) => /* @__PURE__ */ r(
+    e ? w : "div",
     {
-      ref: o,
+      ref: m,
       "data-sidebar": "group-label",
       className: d(
-        "duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-none transition-[margin,opacity] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
-        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
-        e
+        "mtx-duration-200 mtx-flex mtx-h-8 mtx-shrink-0 mtx-items-center mtx-rounded-md mtx-px-2 mtx-text-xs mtx-font-medium mtx-outline-none mtx-transition-[margin,opacity] mtx-ease-linear focus-visible:mtx-ring-2 [&>svg]:mtx-size-4 [&>svg]:mtx-shrink-0",
+        "group-data-[collapsible=icon]:-mtx-mt-8 group-data-[collapsible=icon]:mtx-opacity-0",
+        t
       ),
-      ...t
+      ...a
     }
   )
 );
-ae.displayName = "SidebarGroupLabel";
-const te = i.forwardRef(
-  ({ className: e, asChild: a = !1, ...t }, o) => /* @__PURE__ */ r(
-    a ? v : "button",
+et.displayName = "SidebarGroupLabel";
+const at = i.forwardRef(
+  ({ className: t, asChild: e = !1, ...a }, m) => /* @__PURE__ */ r(
+    e ? w : "button",
     {
-      ref: o,
+      ref: m,
       "data-sidebar": "group-action",
       className: d(
-        "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform hover:bg-gray-50-accent focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "mtx-absolute mtx-right-3 mtx-top-3.5 mtx-flex mtx-aspect-square mtx-w-5 mtx-items-center mtx-justify-center mtx-rounded-md mtx-p-0 mtx-outline-none mtx-transition-transform hover:mtx-bg-gray-50-accent focus-visible:mtx-ring-2 [&>svg]:mtx-size-4 [&>svg]:mtx-shrink-0",
         // Increases the hit area of the button on mobile.
-        "after:absolute after:-inset-2 after:md:hidden",
-        "group-data-[collapsible=icon]:hidden",
-        e
+        "after:mtx-absolute after:-mtx-inset-2 after:md:mtx-hidden",
+        "group-data-[collapsible=icon]:mtx-hidden",
+        t
       ),
-      ...t
+      ...a
     }
   )
 );
-te.displayName = "SidebarGroupAction";
-const re = i.forwardRef(({ className: e, ...a }, t) => /* @__PURE__ */ r("div", { ref: t, "data-sidebar": "group-content", className: d("w-full text-sm", e), ...a }));
-re.displayName = "SidebarGroupContent";
-const ie = i.forwardRef(({ className: e, ...a }, t) => /* @__PURE__ */ r("ul", { ref: t, "data-sidebar": "menu", className: d("flex w-full min-w-0 flex-col gap-4", e), ...a }));
-ie.displayName = "SidebarMenu";
-const de = i.forwardRef(({ className: e, ...a }, t) => /* @__PURE__ */ r("li", { ref: t, "data-sidebar": "menu-item", className: d("group/menu-item relative ps-2", e), ...a }));
-de.displayName = "SidebarMenuItem";
-const oe = z({
+at.displayName = "SidebarGroupAction";
+const rt = i.forwardRef(({ className: t, ...e }, a) => /* @__PURE__ */ r("div", { ref: a, "data-sidebar": "group-content", className: d("mtx-w-full mtx-text-sm", t), ...e }));
+rt.displayName = "SidebarGroupContent";
+const it = i.forwardRef(({ className: t, ...e }, a) => /* @__PURE__ */ r("ul", { ref: a, "data-sidebar": "menu", className: d("mtx-flex mtx-w-full mtx-min-w-0 mtx-flex-col mtx-gap-4", t), ...e }));
+it.displayName = "SidebarMenu";
+const dt = i.forwardRef(({ className: t, ...e }, a) => /* @__PURE__ */ r("li", { ref: a, "data-sidebar": "menu-item", className: d("mtx-group/menu-item mtx-relative mtx-ps-2", t), ...e }));
+dt.displayName = "SidebarMenuItem";
+const mt = z({
   base: [
-    "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-s-md rounded-e-none p-2 text-left text-sm text-text-400 font-medium outline-none transition-[width,height,padding] hover:bg-gray-50 disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50",
-    "data-[active=true]:bg-primary data-[active=true]:text-gray-0 data-[active=true]:font-bold group-data-[collapsible=icon]:size-10 group-data-[collapsible=icon]:w-14 group-data-[collapsible=icon]:p-2 group-data-[collapsible=icon]:pl-4 [&>span:last-child]:truncate",
-    "[&>svg]:size-6 [&>svg]:shrink-0 [&>svg]:data-[active=true]:text-secondary group-data-[collapsible=icon]:[&>svg]:me-2",
-    "data-[active=true]:before:[content:''] data-[active=true]:before:absolute data-[active=true]:before:start-0 data-[active=true]:before:h-10 data-[active=true]:before:w-1 data-[active=true]:before:bg-secondary data-[active=true]:before:rounded-e-md",
-    "overflow-ellipsis whitespace-nowrap"
+    "mtx-peer/menu-button mtx-flex mtx-w-full mtx-items-center mtx-gap-2 mtx-overflow-hidden mtx-rounded-s-md mtx-rounded-e-none mtx-p-2 mtx-text-left mtx-text-sm mtx-text-text-400 mtx-font-medium mtx-outline-none mtx-transition-[width,height,padding] hover:mtx-bg-gray-50 disabled:mtx-pointer-events-none disabled:mtx-opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:mtx-pr-8 aria-disabled:mtx-pointer-events-none aria-disabled:mtx-opacity-50",
+    "data-[active=true]:mtx-bg-primary data-[active=true]:mtx-text-gray-0 data-[active=true]:mtx-font-bold group-data-[collapsible=icon]:mtx-size-10 group-data-[collapsible=icon]:mtx-w-14 group-data-[collapsible=icon]:mtx-p-2 group-data-[collapsible=icon]:mtx-pl-4 [&>span:last-child]:mtx-truncate",
+    "[&>svg]:mtx-size-6 [&>svg]:mtx-shrink-0 [&>svg]:data-[active=true]:mtx-text-secondary group-data-[collapsible=icon]:[&>svg]:mtx-me-2",
+    "data-[active=true]:before:mtx-[content:''] data-[active=true]:before:mtx-absolute data-[active=true]:before:mtx-start-0 data-[active=true]:before:mtx-h-10 data-[active=true]:before:mtx-w-1 data-[active=true]:before:mtx-bg-secondary data-[active=true]:before:mtx-rounded-e-md",
+    "mtx-overflow-ellipsis mtx-whitespace-nowrap"
   ].join(" "),
   variants: {
     variant: {
-      default: "hover:bg-gray-50",
-      outline: "bg-background shadow-[0_0_0_1px_hsl(var(--gray--300))] hover:bg-gray-50 hover:shadow-[0_0_0_1px_hsl(var(--gray-400))]"
+      default: "hover:mtx-bg-gray-50",
+      outline: "mtx-bg-background mtx-shadow-[0_0_0_1px_hsl(var(--gray--300))] hover:mtx-bg-gray-50 hover:mtx-shadow-[0_0_0_1px_hsl(var(--gray-400))]"
     },
     size: {
-      default: "h-10 text-sm",
-      sm: "h-7 text-xs",
-      lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0"
+      default: "mtx-h-10 mtx-text-sm",
+      sm: "mtx-h-7 mtx-text-xs",
+      lg: "mtx-h-12 mtx-text-sm group-data-[collapsible=icon]:mtx-!p-0"
     }
   },
   defaultVariants: {
     variant: "default",
     size: "default"
   }
-}), se = i.forwardRef(({ asChild: e = !1, isActive: a = !1, variant: t = "default", size: o = "default", tooltip: s, className: n, ...l }, u) => {
-  const b = e ? v : "button", { isMobile: g, state: h } = _(), c = /* @__PURE__ */ r(
-    b,
+}), ot = i.forwardRef(({ asChild: t = !1, isActive: e = !1, variant: a = "default", size: m = "default", tooltip: o, className: s, ...n }, x) => {
+  const p = t ? w : "button", { isMobile: f, state: g } = _(), l = /* @__PURE__ */ r(
+    p,
     {
-      ref: u,
+      ref: x,
       "data-sidebar": "menu-button",
-      "data-size": o,
-      "data-active": a,
-      className: d(oe({ variant: t, size: o }), n),
-      ...l
+      "data-size": m,
+      "data-active": e,
+      className: d(mt({ variant: a, size: m }), s),
+      ...n
     }
   );
-  return s ? (typeof s == "string" && (s = {
-    children: s
-  }), /* @__PURE__ */ x(T, { children: [
-    /* @__PURE__ */ r(A, { asChild: !0, children: c }),
-    /* @__PURE__ */ r(D, { side: "right", align: "center", hidden: h !== "collapsed" || g, ...s })
-  ] })) : c;
+  return o ? (typeof o == "string" && (o = {
+    children: o
+  }), /* @__PURE__ */ v(T, { children: [
+    /* @__PURE__ */ r(A, { asChild: !0, children: l }),
+    /* @__PURE__ */ r(D, { side: "right", align: "center", hidden: g !== "collapsed" || f, ...o })
+  ] })) : l;
 });
-se.displayName = "SidebarMenuButton";
-const ne = i.forwardRef(({ className: e, asChild: a = !1, showOnHover: t = !1, ...o }, s) => /* @__PURE__ */ r(
-  a ? v : "button",
+ot.displayName = "SidebarMenuButton";
+const st = i.forwardRef(({ className: t, asChild: e = !1, showOnHover: a = !1, ...m }, o) => /* @__PURE__ */ r(
+  e ? w : "button",
   {
-    ref: s,
+    ref: o,
     "data-sidebar": "menu-action",
     className: d(
-      "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform hover:bg-gray-50-accent focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+      "mtx-absolute mtx-right-1 mtx-top-1.5 mtx-flex mtx-aspect-square mtx-w-5 mtx-items-center mtx-justify-center mtx-rounded-md mtx-p-0 mtx-outline-none mtx-transition-transform hover:mtx-bg-gray-50-accent focus-visible:mtx-ring-2 [&>svg]:mtx-size-4 [&>svg]:mtx-shrink-0",
       // Increases the hit area of the button on mobile.
-      "after:absolute after:-inset-2 after:md:hidden",
-      "peer-data-[size=sm]/menu-button:top-1",
-      "peer-data-[size=default]/menu-button:top-1.5",
-      "peer-data-[size=lg]/menu-button:top-2.5",
-      "group-data-[collapsible=icon]:hidden",
-      t && "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
-      e
+      "after:mtx-absolute after:-mtx-inset-2 after:md:mtx-hidden",
+      "peer-data-[size=sm]/menu-button:mtx-top-1",
+      "peer-data-[size=default]/menu-button:mtx-top-1.5",
+      "peer-data-[size=lg]/menu-button:mtx-top-2.5",
+      "group-data-[collapsible=icon]:mtx-hidden",
+      a && "group-focus-within/menu-item:mtx-opacity-100 group-hover/menu-item:mtx-opacity-100 data-[state=open]:mtx-opacity-100 md:mtx-opacity-0",
+      t
     ),
-    ...o
+    ...m
   }
 ));
-ne.displayName = "SidebarMenuAction";
-const le = i.forwardRef(({ className: e, ...a }, t) => /* @__PURE__ */ r(
+st.displayName = "SidebarMenuAction";
+const nt = i.forwardRef(({ className: t, ...e }, a) => /* @__PURE__ */ r(
   "div",
   {
-    ref: t,
+    ref: a,
     "data-sidebar": "menu-badge",
     className: d(
-      "absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none pointer-events-none",
-      "peer-data-[size=sm]/menu-button:top-1",
-      "peer-data-[size=default]/menu-button:top-1.5",
-      "peer-data-[size=lg]/menu-button:top-2.5",
-      "group-data-[collapsible=icon]:hidden",
-      e
+      "mtx-absolute mtx-right-1 mtx-flex mtx-h-5 mtx-min-w-5 mtx-items-center mtx-justify-center mtx-rounded-md mtx-px-1 mtx-text-xs mtx-font-medium mtx-tabular-nums mtx-select-none mtx-pointer-events-none",
+      "peer-data-[size=sm]/menu-button:mtx-top-1",
+      "peer-data-[size=default]/menu-button:mtx-top-1.5",
+      "peer-data-[size=lg]/menu-button:mtx-top-2.5",
+      "group-data-[collapsible=icon]:mtx-hidden",
+      t
     ),
-    ...a
+    ...e
   }
 ));
-le.displayName = "SidebarMenuBadge";
-const ce = i.forwardRef(({ className: e, showIcon: a = !1, ...t }, o) => {
-  const s = i.useMemo(() => `${Math.floor(Math.random() * 40) + 50}%`, []);
-  return /* @__PURE__ */ x("div", { ref: o, "data-sidebar": "menu-skeleton", className: d("rounded-md h-8 flex gap-2 px-2 items-center", e), ...t, children: [
-    a && /* @__PURE__ */ r(R, { className: "size-4 rounded-md", "data-sidebar": "menu-skeleton-icon" }),
-    /* @__PURE__ */ r(
-      R,
-      {
-        className: "h-4 flex-1 max-w-[--skeleton-width]",
-        "data-sidebar": "menu-skeleton-text",
-        style: {
-          "--skeleton-width": s
-        }
-      }
-    )
-  ] });
+nt.displayName = "SidebarMenuBadge";
+const lt = i.forwardRef(({ className: t, showIcon: e = !1, ...a }, m) => {
+  const o = i.useMemo(() => `${Math.floor(Math.random() * 40) + 50}%`, []);
+  return /* @__PURE__ */ v(
+    "div",
+    {
+      ref: m,
+      "data-sidebar": "menu-skeleton",
+      className: d("mtx-rounded-md mtx-h-8 mtx-flex mtx-gap-2 mtx-px-2 mtx-items-center", t),
+      ...a,
+      children: [
+        e && /* @__PURE__ */ r(R, { className: "mtx-size-4 mtx-rounded-md", "data-sidebar": "menu-skeleton-icon" }),
+        /* @__PURE__ */ r(
+          R,
+          {
+            className: "mtx-h-4 mtx-flex-1 mtx-max-w-[--skeleton-width]",
+            "data-sidebar": "menu-skeleton-text",
+            style: {
+              "--skeleton-width": o
+            }
+          }
+        )
+      ]
+    }
+  );
 });
-ce.displayName = "SidebarMenuSkeleton";
-const ue = i.forwardRef(({ className: e, ...a }, t) => /* @__PURE__ */ r(
+lt.displayName = "SidebarMenuSkeleton";
+const xt = i.forwardRef(({ className: t, ...e }, a) => /* @__PURE__ */ r(
   "ul",
   {
-    ref: t,
+    ref: a,
     "data-sidebar": "menu-sub",
-    className: d("flex min-w-0 translate-x-px flex-col gap-1", "group-data-[collapsible=icon]:hidden", e),
-    ...a
+    className: d("mtx-flex mtx-min-w-0 mtx-translate-x-px mtx-flex-col mtx-gap-1", "group-data-[collapsible=icon]:mtx-hidden", t),
+    ...e
   }
 ));
-ue.displayName = "SidebarMenuSub";
-const pe = i.forwardRef(({ ...e }, a) => /* @__PURE__ */ r("li", { ref: a, ...e }));
-pe.displayName = "SidebarMenuSubItem";
-const fe = i.forwardRef(({ asChild: e = !1, size: a = "md", isActive: t, className: o, ...s }, n) => /* @__PURE__ */ r(
-  e ? v : "a",
+xt.displayName = "SidebarMenuSub";
+const ct = i.forwardRef(({ ...t }, e) => /* @__PURE__ */ r("li", { ref: e, ...t }));
+ct.displayName = "SidebarMenuSubItem";
+const ut = i.forwardRef(({ asChild: t = !1, size: e = "md", isActive: a, className: m, ...o }, s) => /* @__PURE__ */ r(
+  t ? w : "a",
   {
-    ref: n,
+    ref: s,
     "data-sidebar": "menu-sub-button",
-    "data-size": a,
-    "data-active": t,
+    "data-size": e,
+    "data-active": a,
     className: d(
-      "flex h-10 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-s-md ps-10 text-sm text-text-400 font-medium outline-none hover:bg-gray-50 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
-      "data-[active=true]:bg-gray-100 data-[active=true]:text-text",
-      a === "sm" && "text-xs",
-      a === "md" && "text-sm",
-      "group-data-[collapsible=icon]:hidden",
-      o
+      "mtx-flex mtx-h-10 mtx-min-w-0 -mtx-translate-x-px mtx-items-center mtx-gap-2 mtx-overflow-hidden mtx-rounded-s-md mtx-ps-10 mtx-text-sm mtx-text-text-400 mtx-font-medium mtx-outline-none hover:mtx-bg-gray-50 disabled:mtx-pointer-events-none disabled:mtx-opacity-50 aria-disabled:mtx-pointer-events-none aria-disabled:mtx-opacity-50 [&>span:last-child]:mtx-truncate [&>svg]:mtx-size-4 [&>svg]:mtx-shrink-0",
+      "data-[active=true]:mtx-bg-gray-100 data-[active=true]:mtx-text-text",
+      e === "sm" && "mtx-text-xs",
+      e === "md" && "mtx-text-sm",
+      "group-data-[collapsible=icon]:mtx-hidden",
+      m
     ),
-    ...s
+    ...o
   }
 ));
-fe.displayName = "SidebarMenuSubButton";
+ut.displayName = "SidebarMenuSubButton";
 export {
   q as Sidebar,
   Z as SidebarContent,
   J as SidebarFooter,
-  ee as SidebarGroup,
-  te as SidebarGroupAction,
-  re as SidebarGroupContent,
-  ae as SidebarGroupLabel,
+  tt as SidebarGroup,
+  at as SidebarGroupAction,
+  rt as SidebarGroupContent,
+  et as SidebarGroupLabel,
   Y as SidebarHeader,
   X as SidebarInset,
-  ie as SidebarMenu,
-  ne as SidebarMenuAction,
-  le as SidebarMenuBadge,
-  se as SidebarMenuButton,
-  de as SidebarMenuItem,
-  ce as SidebarMenuSkeleton,
-  ue as SidebarMenuSub,
-  fe as SidebarMenuSubButton,
-  pe as SidebarMenuSubItem,
+  it as SidebarMenu,
+  st as SidebarMenuAction,
+  nt as SidebarMenuBadge,
+  ot as SidebarMenuButton,
+  dt as SidebarMenuItem,
+  lt as SidebarMenuSkeleton,
+  xt as SidebarMenuSub,
+  ut as SidebarMenuSubButton,
+  ct as SidebarMenuSubItem,
   W as SidebarProvider,
   U as SidebarRail,
   Q as SidebarSeparator,