ics-ui-kit 0.1.13 → 0.1.15

package/dist/components/sidebar.js

@@ -1,186 +1,190 @@
-import { jsx as r, jsxs as f } from "react/jsx-runtime";
-import { e as T } from "../useBreakpoints-D8wKOvil.js";
-import o from "react";
-import { T as B, b as D, c as A, a as E } from "../Tooltip-7Duaau0S.js";
+import { jsx as r, jsxs as f, Fragment as B } from "react/jsx-runtime";
+import { e as E } from "../useBreakpoints-DHvp74UL.js";
+import s from "react";
+import { T as A, b as D, c as G } from "../Tooltip-7Duaau0S.js";
 import { c as w } from "../cn-dsXlqdJg.js";
-import { S as G, a as L, b as O, d as H, e as P } from "../Sheet-qTIXsqm0.js";
+import { S as L, a as H, b as O, d as P, e as K } from "../Sheet-qTIXsqm0.js";
 import { I as R } from "../IconButton-DwkpNgn3.js";
-import { T as K } from "../TextInput-Cj50ImXi.js";
-import { D as j } from "../Divider-DPW5ZhZ8.js";
-import { S as v } from "../index-BtQfgaSF.js";
+import { T as j } from "../TextInput-Cj50ImXi.js";
+import { D as F } from "../Divider-DPW5ZhZ8.js";
+import { S as y } from "../index-BtQfgaSF.js";
 import { T as n } from "../index-BVqs-uqP.js";
 import { S as I } from "../Skeleton-y6I-i9q5.js";
 import { S as $ } from "../ScrollShadowContainer-DdrnF8qU.js";
-import { c as k } from "../createLucideIcon-DwBrHnj9.js";
+import { P as q } from "../plus-BpxYPnAG.js";
+import { c as W } from "../createLucideIcon-DwBrHnj9.js";
 /**
  * @license lucide-react v0.460.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const q = k("PanelLeft", [
+const V = W("PanelLeft", [
   ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
   ["path", { d: "M9 3v18", key: "fh3hqa" }]
-]);
-/**
- * @license lucide-react v0.460.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const F = k("Plus", [
-  ["path", { d: "M5 12h14", key: "1ays0h" }],
-  ["path", { d: "M12 5v14", key: "s699le" }]
-]), C = o.createContext(null);
+]), C = s.createContext(null);
 function N() {
-  const e = o.useContext(C);
-  if (!e)
+  const a = s.useContext(C);
+  if (!a)
     throw new Error("useSidebar must be used within a SidebarProvider.");
-  return e;
+  return a;
 }
-const W = "sidebar_state", V = 60 * 60 * 24 * 7, U = "16rem", X = "18rem", Y = "3rem", J = "b", Q = n({
-  base: "group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-primary-bg"
-}), Z = o.forwardRef(({ defaultOpen: e = !0, open: a, onOpenChange: t, className: i, style: s, children: d, ...p }, g) => {
-  const c = T(), [m, b] = o.useState(!1), [y, _] = o.useState(e), h = a ?? y, S = o.useCallback(
-    (l) => {
-      const u = typeof l == "function" ? l(h) : l;
-      t ? t(u) : _(u), document.cookie = `${W}=${u}; path=/; max-age=${V}`;
+const U = "sidebar_state", X = 60 * 60 * 24 * 7, Y = "16rem", J = "18rem", Q = "3rem", Z = "b", ee = n({
+  base: "group/sidebar-wrapper flex min-h-svh w-full",
+  variants: {
+    hasInset: {
+      true: "bg-primary-bg"
+    }
+  }
+}), ae = s.forwardRef(({ defaultOpen: a = !0, open: e, onOpenChange: t, className: o, style: i, children: d, ...p }, m) => {
+  const u = E(), [g, l] = s.useState(!1), [h, k] = s.useState(!1), [_, z] = s.useState(a), v = e ?? _, S = s.useCallback(
+    (c) => {
+      const b = typeof c == "function" ? c(v) : c;
+      t ? t(b) : z(b), document.cookie = `${U}=${b}; path=/; max-age=${X}`;
     },
-    [t, h]
-  ), x = o.useCallback(() => c ? b((l) => !l) : S((l) => !l), [c, S, b]);
-  o.useEffect(() => {
-    const l = (u) => {
-      u.key === J && (u.metaKey || u.ctrlKey) && (u.preventDefault(), x());
+    [t, v]
+  ), x = s.useCallback(() => u ? l((c) => !c) : S((c) => !c), [u, S, l]);
+  s.useEffect(() => {
+    const c = (b) => {
+      b.key === Z && (b.metaKey || b.ctrlKey) && (b.preventDefault(), x());
     };
-    return window.addEventListener("keydown", l), () => window.removeEventListener("keydown", l);
+    return window.addEventListener("keydown", c), () => window.removeEventListener("keydown", c);
   }, [x]);
-  const M = h ? "expanded" : "collapsed", z = o.useMemo(
+  const M = v ? "expanded" : "collapsed", T = s.useMemo(
     () => ({
       state: M,
-      open: h,
+      open: v,
       setOpen: S,
-      isMobile: c,
-      openMobile: m,
-      setOpenMobile: b,
-      toggleSidebar: x
+      isMobile: u,
+      openMobile: g,
+      setOpenMobile: l,
+      toggleSidebar: x,
+      hasInset: h,
+      setHasInset: k
     }),
-    [M, h, S, c, m, b, x]
+    [M, v, S, u, g, l, x, h]
   );
-  return /* @__PURE__ */ r(C.Provider, { value: z, children: /* @__PURE__ */ r(E, { delayDuration: 0, children: /* @__PURE__ */ r(
+  return /* @__PURE__ */ r(C.Provider, { value: T, children: /* @__PURE__ */ r(
     "div",
     {
       style: {
-        "--sidebar-width": U,
-        "--sidebar-width-icon": Y,
-        ...s
+        "--sidebar-width": Y,
+        "--sidebar-width-icon": Q,
+        ...i
       },
-      className: Q({ className: i }),
-      ref: g,
+      className: ee({ hasInset: h, className: o }),
+      ref: m,
       ...p,
       children: d
     }
-  ) }) });
+  ) });
 });
-Z.displayName = "SidebarProvider";
-const ee = o.forwardRef(({ side: e = "left", variant: a = "sidebar", collapsible: t = "offcanvas", className: i, children: s, ...d }, p) => {
-  const { isMobile: g, state: c, openMobile: m, setOpenMobile: b } = N();
-  return t === "none" ? /* @__PURE__ */ r(
+ae.displayName = "SidebarProvider";
+const te = s.forwardRef(({ side: a = "left", variant: e = "sidebar", collapsible: t = "offcanvas", className: o, children: i, ...d }, p) => {
+  const { state: m, openMobile: u, setOpenMobile: g, setHasInset: l } = N();
+  return s.useLayoutEffect(() => {
+    if (e === "inset")
+      return l(!0), () => l(!1);
+  }, [e, l]), t === "none" ? /* @__PURE__ */ r(
     "div",
     {
       className: w(
         "text-sidebar-foreground flex h-full w-[--sidebar-width] flex-col bg-sidebar-bg",
-        i
+        o
       ),
       ref: p,
       ...d,
-      children: s
+      children: i
     }
-  ) : g ? /* @__PURE__ */ r(G, { open: m, onOpenChange: b, ...d, children: /* @__PURE__ */ f(
-    L,
-    {
-      "data-sidebar": "sidebar",
-      "data-mobile": "true",
-      className: "w-[--sidebar-width] bg-sidebar-bg p-0 text-secondary-fg [&>button]:hidden",
-      style: {
-        "--sidebar-width": X
-      },
-      side: e,
-      children: [
-        /* @__PURE__ */ f(O, { className: "sr-only", children: [
-          /* @__PURE__ */ r(H, { children: "Sidebar" }),
-          /* @__PURE__ */ r(P, { children: "Displays the mobile sidebar." })
-        ] }),
-        /* @__PURE__ */ r("div", { className: "flex h-full w-full flex-col", children: s })
-      ]
-    }
-  ) }) : /* @__PURE__ */ f(
-    "div",
-    {
-      ref: p,
-      className: "text-sidebar-foreground group peer hidden md:block",
-      "data-state": c,
-      "data-collapsible": c === "collapsed" ? t : "",
-      "data-variant": a,
-      "data-side": e,
-      children: [
-        /* @__PURE__ */ r(
-          "div",
-          {
-            className: w(
-              "relative w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear",
-              "group-data-[collapsible=offcanvas]:w-0",
-              "group-data-[side=right]:rotate-180",
-              a === "floating" || a === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]" : "group-data-[collapsible=icon]:w-[--sidebar-width-icon]"
-            )
-          }
-        ),
-        /* @__PURE__ */ r(
-          "div",
-          {
-            className: w(
-              "fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex",
-              e === "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.
-              a === "floating" || a === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]" : "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l group-data-[side=left]:border-secondary-border group-data-[side=right]:border-secondary-border",
-              i
-            ),
-            ...d,
-            children: /* @__PURE__ */ r(
-              "div",
-              {
-                "data-sidebar": "sidebar",
-                className: "flex h-full w-full flex-col bg-sidebar-bg group-data-[variant=floating]:rounded-xl group-data-[variant=floating]:border-0.5 group-data-[variant=floating]:border-primary-border group-data-[variant=floating]:shadow-soft-xl",
-                children: s
-              }
-            )
-          }
-        )
-      ]
-    }
-  );
+  ) : /* @__PURE__ */ f(B, { children: [
+    /* @__PURE__ */ r("div", { className: "contents lg:hidden", children: /* @__PURE__ */ r(L, { open: u, onOpenChange: g, ...d, children: /* @__PURE__ */ f(
+      H,
+      {
+        "data-sidebar": "sidebar",
+        "data-mobile": "true",
+        className: "w-[--sidebar-width] bg-sidebar-bg p-0 text-secondary-fg [&>button]:hidden",
+        style: {
+          "--sidebar-width": J
+        },
+        side: a,
+        children: [
+          /* @__PURE__ */ f(O, { className: "sr-only", children: [
+            /* @__PURE__ */ r(P, { children: "Sidebar" }),
+            /* @__PURE__ */ r(K, { children: "Displays the mobile sidebar." })
+          ] }),
+          /* @__PURE__ */ r("div", { className: "flex h-full w-full flex-col", children: i })
+        ]
+      }
+    ) }) }),
+    /* @__PURE__ */ f(
+      "div",
+      {
+        ref: p,
+        className: "text-sidebar-foreground group peer hidden lg:block",
+        "data-state": m,
+        "data-collapsible": m === "collapsed" ? t : "",
+        "data-variant": e,
+        "data-side": a,
+        children: [
+          /* @__PURE__ */ r(
+            "div",
+            {
+              className: w(
+                "relative w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear",
+                "group-data-[collapsible=offcanvas]:w-0",
+                "group-data-[side=right]:rotate-180",
+                e === "floating" || e === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]" : "group-data-[collapsible=icon]:w-[--sidebar-width-icon]"
+              )
+            }
+          ),
+          /* @__PURE__ */ r(
+            "div",
+            {
+              className: w(
+                "fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear lg:flex",
+                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" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]" : "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l group-data-[side=left]:border-secondary-border group-data-[side=right]:border-secondary-border",
+                o
+              ),
+              ...d,
+              children: /* @__PURE__ */ r(
+                "div",
+                {
+                  "data-sidebar": "sidebar",
+                  className: "flex h-full w-full flex-col bg-sidebar-bg group-data-[variant=floating]:rounded-xl group-data-[variant=floating]:border-0.5 group-data-[variant=floating]:border-primary-border group-data-[variant=floating]:shadow-soft-xl",
+                  children: i
+                }
+              )
+            }
+          )
+        ]
+      }
+    )
+  ] });
 });
-ee.displayName = "Sidebar";
-const ae = o.forwardRef(
-  ({ onClick: e, ...a }, t) => {
-    const { toggleSidebar: i } = N();
+te.displayName = "Sidebar";
+const re = s.forwardRef(
+  ({ onClick: a, ...e }, t) => {
+    const { toggleSidebar: o } = N();
     return /* @__PURE__ */ r(
       R,
       {
-        icon: q,
+        icon: V,
         ref: t,
         "data-sidebar": "trigger",
         variant: "ghost",
-        onClick: (s) => {
-          e?.(s), i();
+        onClick: (i) => {
+          a?.(i), o();
         },
-        ...a,
+        ...e,
         children: /* @__PURE__ */ r("span", { className: "sr-only", children: "Toggle Sidebar" })
       }
     );
   }
 );
-ae.displayName = "SidebarTrigger";
-const te = n({
+re.displayName = "SidebarTrigger";
+const se = n({
   base: [
     "absolute inset-y-0 z-20 hidden w-[5px] -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-0 hover:after:-translate-x-1/2 hover:after:border-l hover:after:border-primary-border group-data-[side=left]:-right-[5px] group-data-[side=right]:left-0 sm:flex",
     "cursor-ew-resize",
@@ -188,9 +192,9 @@ const te = n({
     "[[data-side=left][data-collapsible=offcanvas]_&]:-right-[2.5px]",
     "[[data-side=right][data-collapsible=offcanvas]_&]:-left-[2.5px]"
   ]
-}), re = o.forwardRef(
-  ({ className: e, ...a }, t) => {
-    const { toggleSidebar: i } = N();
+}), oe = s.forwardRef(
+  ({ className: a, ...e }, t) => {
+    const { toggleSidebar: o } = N();
     return /* @__PURE__ */ r(
       "button",
       {
@@ -198,119 +202,119 @@ const te = n({
         "data-sidebar": "rail",
         "aria-label": "Toggle Sidebar",
         tabIndex: -1,
-        onClick: i,
+        onClick: o,
         title: "Toggle Sidebar",
-        className: te({ className: e }),
-        ...a
+        className: se({ className: a }),
+        ...e
       }
     );
   }
 );
-re.displayName = "SidebarRail";
-const oe = n({
+oe.displayName = "SidebarRail";
+const ie = n({
   base: [
     "relative flex w-full flex-1 flex-col bg-secondary-bg",
     "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"
   ]
-}), ie = o.forwardRef(({ className: e, ...a }, t) => /* @__PURE__ */ r("main", { ref: t, className: oe({ className: e }), ...a }));
-ie.displayName = "SidebarInset";
-const se = n({
+}), ne = s.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r("main", { ref: t, className: ie({ className: a }), ...e }));
+ne.displayName = "SidebarInset";
+const de = n({
   base: "h-8 w-full shadow-none"
-}), ne = o.forwardRef(
-  ({ className: e, ...a }, t) => /* @__PURE__ */ r(K, { ref: t, "data-sidebar": "input", className: se({ className: e }), ...a })
+}), le = s.forwardRef(
+  ({ className: a, ...e }, t) => /* @__PURE__ */ r(j, { ref: t, "data-sidebar": "input", className: de({ className: a }), ...e })
 );
-ne.displayName = "SidebarInput";
-const de = n({
-  base: "flex flex-col gap-2 p-2 group-data-[variant=floating]:px-2.5"
-}), le = o.forwardRef(({ className: e, ...a }, t) => /* @__PURE__ */ r("div", { ref: t, "data-sidebar": "header", className: de({ className: e }), ...a }));
-le.displayName = "SidebarHeader";
+le.displayName = "SidebarInput";
 const ce = n({
   base: "flex flex-col gap-2 p-2 group-data-[variant=floating]:px-2.5"
-}), be = o.forwardRef(({ className: e, ...a }, t) => /* @__PURE__ */ r("div", { ref: t, "data-sidebar": "footer", className: ce({ className: e }), ...a }));
-be.displayName = "SidebarFooter";
-const ue = n({
+}), ue = s.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r("div", { ref: t, "data-sidebar": "header", className: ce({ className: a }), ...e }));
+ue.displayName = "SidebarHeader";
+const be = n({
+  base: "flex flex-col gap-2 p-2 group-data-[variant=floating]:px-2.5"
+}), pe = s.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r("div", { ref: t, "data-sidebar": "footer", className: be({ className: a }), ...e }));
+pe.displayName = "SidebarFooter";
+const fe = n({
   base: "w-auto bg-secondary-border"
-}), pe = o.forwardRef(
-  ({ className: e, ...a }, t) => /* @__PURE__ */ r(
-    j,
+}), me = s.forwardRef(
+  ({ className: a, ...e }, t) => /* @__PURE__ */ r(
+    F,
     {
       ref: t,
       orientation: "horizontal",
       "data-sidebar": "separator",
-      className: ue({ className: e }),
-      ...a
+      className: fe({ className: a }),
+      ...e
     }
   )
 );
-pe.displayName = "SidebarSeparator";
-const me = n({
+me.displayName = "SidebarSeparator";
+const ge = n({
   slots: {
     content: "flex flex-1 flex-col gap-2 group-data-[collapsible=icon]:overflow-hidden"
   }
-}), fe = o.forwardRef(
-  ({ className: e, children: a, ...t }, i) => {
-    const s = me();
+}), he = s.forwardRef(
+  ({ className: a, children: e, ...t }, o) => {
+    const i = ge();
     return /* @__PURE__ */ r(
       $,
       {
-        ref: i,
+        ref: o,
         "data-sidebar": "content",
-        className: s.content({ className: e }),
+        className: i.content({ className: a }),
         shadowSize: 32,
         ...t,
-        children: a
+        children: e
       }
     );
   }
 );
-fe.displayName = "SidebarContent";
-const ge = n({
-  base: "relative flex w-full min-w-0 flex-col p-2 group-data-[variant=floating]:px-2.5"
-}), he = o.forwardRef(({ className: e, ...a }, t) => /* @__PURE__ */ r("div", { ref: t, "data-sidebar": "group", className: ge({ className: e }), ...a }));
-he.displayName = "SidebarGroup";
+he.displayName = "SidebarContent";
 const ve = n({
+  base: "relative flex w-full min-w-0 flex-col p-2 group-data-[variant=floating]:px-2.5"
+}), ye = s.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r("div", { ref: t, "data-sidebar": "group", className: ve({ className: a }), ...e }));
+ye.displayName = "SidebarGroup";
+const Se = n({
   base: [
     "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-secondary-fg/70 outline-none transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
     "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0"
   ]
-}), ye = o.forwardRef(
-  ({ className: e, asChild: a = !1, ...t }, i) => /* @__PURE__ */ r(a ? v : "div", { ref: i, "data-sidebar": "group-label", className: ve({ className: e }), ...t })
+}), xe = s.forwardRef(
+  ({ className: a, asChild: e = !1, ...t }, o) => /* @__PURE__ */ r(e ? y : "div", { ref: o, "data-sidebar": "group-label", className: Se({ className: a }), ...t })
 );
-ye.displayName = "SidebarGroupLabel";
-const Se = n({
+xe.displayName = "SidebarGroupLabel";
+const we = n({
   base: [
     "focus-visible:ring-primary2 absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-muted outline-none transition-transform hover:text-primary-fg focus-visible:shadow-focus [&>svg]:size-4 [&>svg]:shrink-0",
     // Increases the hit area of the button on mobile.
     "after:absolute after:-inset-2 after:md:hidden",
     "group-data-[collapsible=icon]:hidden"
   ]
-}), xe = o.forwardRef(
-  ({ className: e, asChild: a = !1, ...t }, i) => /* @__PURE__ */ r(
-    a ? v : "button",
+}), Ne = s.forwardRef(
+  ({ className: a, asChild: e = !1, ...t }, o) => /* @__PURE__ */ r(
+    e ? y : "button",
     {
-      ref: i,
+      ref: o,
       "data-sidebar": "group-action",
-      className: Se({ className: e }),
+      className: we({ className: a }),
       ...t
     }
   )
 );
-xe.displayName = "SidebarGroupAction";
-const we = n({
+Ne.displayName = "SidebarGroupAction";
+const Me = n({
   base: "w-full text-sm"
-}), Ne = o.forwardRef(
-  ({ className: e, ...a }, t) => /* @__PURE__ */ r("div", { ref: t, "data-sidebar": "group-content", className: we({ className: e }), ...a })
+}), Ie = s.forwardRef(
+  ({ className: a, ...e }, t) => /* @__PURE__ */ r("div", { ref: t, "data-sidebar": "group-content", className: Me({ className: a }), ...e })
 );
-Ne.displayName = "SidebarGroupContent";
-const Me = n({
-  base: "flex w-full min-w-0 flex-col gap-1"
-}), Ie = o.forwardRef(({ className: e, ...a }, t) => /* @__PURE__ */ r("ul", { ref: t, "data-sidebar": "menu", className: Me({ className: e }), ...a }));
-Ie.displayName = "SidebarMenu";
+Ie.displayName = "SidebarGroupContent";
 const Re = n({
+  base: "flex w-full min-w-0 flex-col gap-1"
+}), Ce = s.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r("ul", { ref: t, "data-sidebar": "menu", className: Re({ className: a }), ...e }));
+Ce.displayName = "SidebarMenu";
+const ke = n({
   base: "group/menu-item relative"
-}), ke = o.forwardRef(({ className: e, ...a }, t) => /* @__PURE__ */ r("li", { ref: t, "data-sidebar": "menu-item", className: Re({ className: e }), ...a }));
-ke.displayName = "SidebarMenuItem";
-const Ce = n({
+}), _e = s.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r("li", { ref: t, "data-sidebar": "menu-item", className: ke({ className: a }), ...e }));
+_e.displayName = "SidebarMenuItem";
+const ze = n({
   base: [
     "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md bg-primary-bg p-2 text-left text-sm text-secondary-fg outline-none transition-[width,height,padding]",
     "hover:bg-primary-bg-hover hover:text-primary-fg focus-visible:shadow-focus",
@@ -339,27 +343,27 @@ const Ce = n({
     variant: "default",
     size: "default"
   }
-}), _e = o.forwardRef(({ asChild: e = !1, isActive: a = !1, variant: t = "default", size: i = "default", tooltip: s, className: d, ...p }, g) => {
-  const c = e ? v : "button", { isMobile: m, state: b } = N(), y = /* @__PURE__ */ r(
-    c,
+}), Te = s.forwardRef(({ asChild: a = !1, isActive: e = !1, variant: t = "default", size: o = "default", tooltip: i, className: d, ...p }, m) => {
+  const u = a ? y : "button", { isMobile: g, state: l } = N(), h = /* @__PURE__ */ r(
+    u,
     {
-      ref: g,
+      ref: m,
       "data-sidebar": "menu-button",
-      "data-size": i,
-      "data-active": a,
-      className: w(Ce({ variant: t, size: i }), d),
+      "data-size": o,
+      "data-active": e,
+      className: w(ze({ variant: t, size: o }), d),
       ...p
     }
   );
-  return s ? (typeof s == "string" && (s = {
-    children: s
-  }), /* @__PURE__ */ f(B, { children: [
-    /* @__PURE__ */ r(D, { asChild: !0, children: y }),
-    /* @__PURE__ */ r(A, { side: "right", align: "center", hidden: b !== "collapsed" || m, ...s })
-  ] })) : y;
+  return i ? (typeof i == "string" && (i = {
+    children: i
+  }), /* @__PURE__ */ f(A, { children: [
+    /* @__PURE__ */ r(D, { asChild: !0, children: h }),
+    /* @__PURE__ */ r(G, { side: "right", align: "center", hidden: l !== "collapsed" || g, ...i })
+  ] })) : h;
 });
-_e.displayName = "SidebarMenuButton";
-const ze = n({
+Te.displayName = "SidebarMenuButton";
+const Be = n({
   base: [
     "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-muted outline-none transition-transform hover:text-primary-fg focus-visible:ring-1 focus-visible:ring-primary peer-hover/menu-button:text-primary-fg [&>svg]:size-4 [&>svg]:shrink-0",
     // Increases the hit area of the button on mobile.
@@ -374,17 +378,17 @@ const ze = n({
       true: "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-primary-accent md:opacity-0"
     }
   }
-}), Te = o.forwardRef(({ className: e, asChild: a = !1, showOnHover: t = !1, ...i }, s) => /* @__PURE__ */ r(
-  a ? v : "button",
+}), Ee = s.forwardRef(({ className: a, asChild: e = !1, showOnHover: t = !1, ...o }, i) => /* @__PURE__ */ r(
+  e ? y : "button",
   {
-    ref: s,
+    ref: i,
     "data-sidebar": "menu-action",
-    className: ze({ isHover: t, className: e }),
-    ...i
+    className: Be({ isHover: t, className: a }),
+    ...o
   }
 ));
-Te.displayName = "SidebarMenuAction";
-const Be = n({
+Ee.displayName = "SidebarMenuAction";
+const Ae = n({
   base: [
     "pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-normal tabular-nums leading-none text-muted",
     "peer-hover/menu-button:text-muted peer-disabled/menu-button:opacity-50 peer-data-[active=true]/menu-button:text-muted",
@@ -393,49 +397,49 @@ const Be = n({
     "peer-data-[size=lg]/menu-button:top-2.5",
     "group-data-[collapsible=icon]:hidden"
   ]
-}), De = o.forwardRef(
-  ({ className: e, ...a }, t) => /* @__PURE__ */ r("div", { ref: t, "data-sidebar": "menu-badge", className: Be({ className: e }), ...a })
+}), De = s.forwardRef(
+  ({ className: a, ...e }, t) => /* @__PURE__ */ r("div", { ref: t, "data-sidebar": "menu-badge", className: Ae({ className: a }), ...e })
 );
 De.displayName = "SidebarMenuBadge";
-const Ae = n({
+const Ge = n({
   slots: {
     wrapper: "flex h-8 items-center gap-2 rounded-md px-2",
     skeleton: "h-4 max-w-[--skeleton-width] flex-1",
     skeletonIcon: "size-4 rounded-md"
   }
-}), Ee = o.forwardRef(({ className: e, showIcon: a = !1, ...t }, i) => {
-  const s = o.useMemo(() => `${Math.floor(Math.random() * 40) + 50}%`, []), d = Ae();
-  return /* @__PURE__ */ f("div", { ref: i, "data-sidebar": "menu-skeleton", className: d.wrapper({ className: e }), ...t, children: [
-    a && /* @__PURE__ */ r(I, { className: d.skeletonIcon(), "data-sidebar": "menu-skeleton-icon" }),
+}), Le = s.forwardRef(({ className: a, showIcon: e = !1, ...t }, o) => {
+  const i = s.useMemo(() => `${Math.floor(Math.random() * 40) + 50}%`, []), d = Ge();
+  return /* @__PURE__ */ f("div", { ref: o, "data-sidebar": "menu-skeleton", className: d.wrapper({ className: a }), ...t, children: [
+    e && /* @__PURE__ */ r(I, { className: d.skeletonIcon(), "data-sidebar": "menu-skeleton-icon" }),
     /* @__PURE__ */ r(
       I,
       {
         className: d.skeleton(),
         "data-sidebar": "menu-skeleton-text",
         style: {
-          "--skeleton-width": s
+          "--skeleton-width": i
         }
       }
     )
   ] });
 });
-Ee.displayName = "SidebarMenuSkeleton";
-const Ge = n({
+Le.displayName = "SidebarMenuSkeleton";
+const He = n({
   base: [
     "ml-3.5 flex min-w-0 flex-col gap-1 border-l border-secondary-border py-0.5 pl-2.5",
     "group-data-[collapsible=icon]:hidden"
   ]
-}), Le = o.forwardRef(
-  ({ className: e, ...a }, t) => /* @__PURE__ */ r("ul", { ref: t, "data-sidebar": "menu-sub", className: Ge({ className: e }), ...a })
+}), Oe = s.forwardRef(
+  ({ className: a, ...e }, t) => /* @__PURE__ */ r("ul", { ref: t, "data-sidebar": "menu-sub", className: He({ className: a }), ...e })
 );
-Le.displayName = "SidebarMenuSub";
-const Oe = n({
+Oe.displayName = "SidebarMenuSub";
+const Pe = n({
   base: "rounded-md focus-visible:shadow-focus focus-visible:outline-none"
-}), He = o.forwardRef(
-  ({ className: e, ...a }, t) => /* @__PURE__ */ r("li", { ref: t, className: Oe({ className: e }), ...a })
+}), Ke = s.forwardRef(
+  ({ className: a, ...e }, t) => /* @__PURE__ */ r("li", { ref: t, className: Pe({ className: a }), ...e })
 );
-He.displayName = "SidebarMenuSubItem";
-const Pe = n({
+Ke.displayName = "SidebarMenuSubItem";
+const je = n({
   base: [
     "flex h-7 min-w-0 items-center gap-2 overflow-hidden rounded-md px-2 text-secondary-fg outline-none hover:bg-secondary-bg-hover hover:text-primary-fg focus-visible:mr-0.5 focus-visible:shadow-focus 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 [&>svg]:text-primary-fg",
     "data-[active=true]:bg-primary-bg-hover data-[active=true]:text-primary-accent",
@@ -447,59 +451,59 @@ const Pe = n({
       md: "text-sm"
     }
   }
-}), Ke = o.forwardRef(({ asChild: e = !1, size: a = "md", isActive: t, className: i, ...s }, d) => /* @__PURE__ */ r(
-  e ? v : "a",
+}), Fe = s.forwardRef(({ asChild: a = !1, size: e = "md", isActive: t, className: o, ...i }, d) => /* @__PURE__ */ r(
+  a ? y : "a",
   {
     ref: d,
     "data-sidebar": "menu-sub-button",
-    "data-size": a,
+    "data-size": e,
     "data-active": t,
-    className: Pe({ size: a, className: i }),
-    ...s
+    className: je({ size: e, className: o }),
+    ...i
   }
 ));
-Ke.displayName = "SidebarMenuSubButton";
-const je = n({
+Fe.displayName = "SidebarMenuSubButton";
+const $e = n({
   slots: {
     wrapper: "group/insertion flex cursor-pointer flex-row items-center border-none bg-transparent p-0",
     icon: "peer/icon h-4 w-4 p-0.5 text-muted opacity-0 group-hover/insertion:opacity-100",
     line: "h-px w-full bg-transparent group-hover/insertion:bg-muted peer-hover/icon:bg-primary-fg"
   }
-}), $e = o.forwardRef(
-  ({ className: e, ...a }, t) => {
-    const i = je();
-    return /* @__PURE__ */ f("div", { "data-sidebar": "sidebar-insertion-line", className: i.wrapper({ className: e }), ref: t, ...a, children: [
-      /* @__PURE__ */ r(R, { icon: F, size: "xs", className: i.icon(), variant: "link" }),
-      /* @__PURE__ */ r("div", { className: i.line() })
+}), qe = s.forwardRef(
+  ({ className: a, ...e }, t) => {
+    const o = $e();
+    return /* @__PURE__ */ f("div", { "data-sidebar": "sidebar-insertion-line", className: o.wrapper({ className: a }), ref: t, ...e, children: [
+      /* @__PURE__ */ r(R, { icon: q, size: "xs", className: o.icon(), variant: "link" }),
+      /* @__PURE__ */ r("div", { className: o.line() })
     ] });
   }
 );
-$e.displayName = "SidebarInsertionLine";
+qe.displayName = "SidebarInsertionLine";
 export {
-  ee as Sidebar,
-  fe as SidebarContent,
-  be as SidebarFooter,
-  he as SidebarGroup,
-  xe as SidebarGroupAction,
-  Ne as SidebarGroupContent,
-  ye as SidebarGroupLabel,
-  le as SidebarHeader,
-  ne as SidebarInput,
-  $e as SidebarInsertionLine,
-  ie as SidebarInset,
-  Ie as SidebarMenu,
-  Te as SidebarMenuAction,
+  te as Sidebar,
+  he as SidebarContent,
+  pe as SidebarFooter,
+  ye as SidebarGroup,
+  Ne as SidebarGroupAction,
+  Ie as SidebarGroupContent,
+  xe as SidebarGroupLabel,
+  ue as SidebarHeader,
+  le as SidebarInput,
+  qe as SidebarInsertionLine,
+  ne as SidebarInset,
+  Ce as SidebarMenu,
+  Ee as SidebarMenuAction,
   De as SidebarMenuBadge,
-  _e as SidebarMenuButton,
-  ke as SidebarMenuItem,
-  Ee as SidebarMenuSkeleton,
-  Le as SidebarMenuSub,
-  Ke as SidebarMenuSubButton,
-  He as SidebarMenuSubItem,
-  Z as SidebarProvider,
-  re as SidebarRail,
-  pe as SidebarSeparator,
-  ae as SidebarTrigger,
+  Te as SidebarMenuButton,
+  _e as SidebarMenuItem,
+  Le as SidebarMenuSkeleton,
+  Oe as SidebarMenuSub,
+  Fe as SidebarMenuSubButton,
+  Ke as SidebarMenuSubItem,
+  ae as SidebarProvider,
+  oe as SidebarRail,
+  me as SidebarSeparator,
+  re as SidebarTrigger,
   N as useSidebar
 };
 //# sourceMappingURL=sidebar.js.map