ics-ui-kit 0.1.14 → 0.1.16

package/dist/components/sidebar.js

@@ -1,120 +1,130 @@
-import { jsx as r, jsxs as p, Fragment as z } from "react/jsx-runtime";
-import { e as T } from "../useBreakpoints-DHvp74UL.js";
+import { jsx as r, jsxs as f, Fragment as B } from "react/jsx-runtime";
+import { e as E } from "../useBreakpoints-DHvp74UL.js";
 import o from "react";
-import { T as B, b as D, c as A, a as E } from "../Tooltip-7Duaau0S.js";
+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 F } from "../ScrollShadowContainer-DdrnF8qU.js";
-import { P as $ } from "../plus-BpxYPnAG.js";
-import { c as q } from "../createLucideIcon-DwBrHnj9.js";
+import { S as $ } from "../ScrollShadowContainer-DdrnF8qU.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 W = q("PanelLeft", [
+const V = W("PanelLeft", [
   ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
   ["path", { d: "M9 3v18", key: "fh3hqa" }]
 ]), C = o.createContext(null);
 function N() {
-  const e = o.useContext(C);
-  if (!e)
+  const a = o.useContext(C);
+  if (!a)
     throw new Error("useSidebar must be used within a SidebarProvider.");
-  return e;
+  return a;
 }
-const V = "sidebar_state", U = 60 * 60 * 24 * 7, X = "16rem", Y = "18rem", J = "3rem", Q = "b", Z = n({
-  base: "group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-primary-bg"
-}), ee = o.forwardRef(({ defaultOpen: e = !0, open: a, onOpenChange: t, className: i, style: s, children: d, ...u }, m) => {
-  const c = T(), [f, g] = o.useState(!1), [y, k] = o.useState(e), h = a ?? y, S = o.useCallback(
-    (l) => {
-      const b = typeof l == "function" ? l(h) : l;
-      t ? t(b) : k(b), document.cookie = `${V}=${b}; path=/; max-age=${U}`;
+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 = o.forwardRef(({ defaultOpen: a = !0, open: e, onOpenChange: t, className: s, style: i, children: d, ...p }, m) => {
+  const u = E(), [g, l] = o.useState(!1), [h, k] = o.useState(!1), [_, z] = o.useState(a), v = e ?? _, S = o.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 ? g((l) => !l) : S((l) => !l), [c, S, g]);
+    [t, v]
+  ), x = o.useCallback(() => u ? l((c) => !c) : S((c) => !c), [u, S, l]);
   o.useEffect(() => {
-    const l = (b) => {
-      b.key === Q && (b.metaKey || b.ctrlKey) && (b.preventDefault(), x());
+    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", _ = o.useMemo(
+  const M = v ? "expanded" : "collapsed", T = o.useMemo(
     () => ({
       state: M,
-      open: h,
+      open: v,
       setOpen: S,
-      isMobile: c,
-      openMobile: f,
-      setOpenMobile: g,
-      toggleSidebar: x
+      isMobile: u,
+      openMobile: g,
+      setOpenMobile: l,
+      toggleSidebar: x,
+      hasInset: h,
+      setHasInset: k
     }),
-    [M, h, S, c, f, g, x]
+    [M, v, S, u, g, l, x, h]
   );
-  return /* @__PURE__ */ r(C.Provider, { value: _, children: /* @__PURE__ */ r(E, { delayDuration: 0, children: /* @__PURE__ */ r(
+  return /* @__PURE__ */ r(C.Provider, { value: T, children: /* @__PURE__ */ r(
     "div",
     {
       style: {
-        "--sidebar-width": X,
-        "--sidebar-width-icon": J,
-        ...s
+        "--sidebar-width": Y,
+        "--sidebar-width-icon": Q,
+        ...i
       },
-      className: Z({ className: i }),
+      className: ee({ hasInset: h, className: s }),
       ref: m,
-      ...u,
+      ...p,
       children: d
     }
-  ) }) });
+  ) });
 });
-ee.displayName = "SidebarProvider";
-const ae = o.forwardRef(({ side: e = "left", variant: a = "sidebar", collapsible: t = "offcanvas", className: i, children: s, ...d }, u) => {
-  const { state: m, openMobile: c, setOpenMobile: f } = N();
-  return t === "none" ? /* @__PURE__ */ r(
+ae.displayName = "SidebarProvider";
+const te = o.forwardRef(({ side: a = "left", variant: e = "sidebar", collapsible: t = "offcanvas", className: s, children: i, ...d }, p) => {
+  const { state: m, openMobile: u, setOpenMobile: g, setHasInset: l } = N();
+  return o.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
+        s
       ),
-      ref: u,
+      ref: p,
       ...d,
-      children: s
+      children: i
     }
-  ) : /* @__PURE__ */ p(z, { children: [
-    /* @__PURE__ */ r("div", { className: "contents lg:hidden", children: /* @__PURE__ */ r(G, { open: c, onOpenChange: f, ...d, children: /* @__PURE__ */ p(
-      L,
+  ) : /* @__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": Y
+          "--sidebar-width": J
         },
-        side: e,
+        side: a,
         children: [
-          /* @__PURE__ */ p(O, { className: "sr-only", children: [
-            /* @__PURE__ */ r(H, { children: "Sidebar" }),
-            /* @__PURE__ */ r(P, { children: "Displays the mobile sidebar." })
+          /* @__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: s })
+          /* @__PURE__ */ r("div", { className: "flex h-full w-full flex-col", children: i })
         ]
       }
     ) }) }),
-    /* @__PURE__ */ p(
+    /* @__PURE__ */ f(
       "div",
       {
-        ref: u,
+        ref: p,
         className: "text-sidebar-foreground group peer hidden lg:block",
         "data-state": m,
         "data-collapsible": m === "collapsed" ? t : "",
-        "data-variant": a,
-        "data-side": e,
+        "data-variant": e,
+        "data-side": a,
         children: [
           /* @__PURE__ */ r(
             "div",
@@ -123,7 +133,7 @@ const ae = o.forwardRef(({ side: e = "left", variant: a = "sidebar", collapsible
                 "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]"
+                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]"
               )
             }
           ),
@@ -132,10 +142,10 @@ const ae = o.forwardRef(({ side: e = "left", variant: a = "sidebar", collapsible
             {
               className: w(
                 "fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear lg: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)]",
+                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.
-                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
+                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",
+                s
               ),
               ...d,
               children: /* @__PURE__ */ r(
@@ -143,7 +153,7 @@ const ae = o.forwardRef(({ side: e = "left", variant: a = "sidebar", collapsible
                 {
                   "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
+                  children: i
                 }
               )
             }
@@ -153,28 +163,28 @@ const ae = o.forwardRef(({ side: e = "left", variant: a = "sidebar", collapsible
     )
   ] });
 });
-ae.displayName = "Sidebar";
-const te = o.forwardRef(
-  ({ onClick: e, ...a }, t) => {
-    const { toggleSidebar: i } = N();
+te.displayName = "Sidebar";
+const re = o.forwardRef(
+  ({ onClick: a, ...e }, t) => {
+    const { toggleSidebar: s } = N();
     return /* @__PURE__ */ r(
       R,
       {
-        icon: W,
+        icon: V,
         ref: t,
         "data-sidebar": "trigger",
         variant: "ghost",
-        onClick: (s) => {
-          e?.(s), i();
+        onClick: (i) => {
+          a?.(i), s();
         },
-        ...a,
+        ...e,
         children: /* @__PURE__ */ r("span", { className: "sr-only", children: "Toggle Sidebar" })
       }
     );
   }
 );
-te.displayName = "SidebarTrigger";
-const re = n({
+re.displayName = "SidebarTrigger";
+const oe = 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",
@@ -182,9 +192,9 @@ const re = n({
     "[[data-side=left][data-collapsible=offcanvas]_&]:-right-[2.5px]",
     "[[data-side=right][data-collapsible=offcanvas]_&]:-left-[2.5px]"
   ]
-}), oe = o.forwardRef(
-  ({ className: e, ...a }, t) => {
-    const { toggleSidebar: i } = N();
+}), se = o.forwardRef(
+  ({ className: a, ...e }, t) => {
+    const { toggleSidebar: s } = N();
     return /* @__PURE__ */ r(
       "button",
       {
@@ -192,119 +202,119 @@ const re = n({
         "data-sidebar": "rail",
         "aria-label": "Toggle Sidebar",
         tabIndex: -1,
-        onClick: i,
+        onClick: s,
         title: "Toggle Sidebar",
-        className: re({ className: e }),
-        ...a
+        className: oe({ className: a }),
+        ...e
       }
     );
   }
 );
-oe.displayName = "SidebarRail";
+se.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"
   ]
-}), se = o.forwardRef(({ className: e, ...a }, t) => /* @__PURE__ */ r("main", { ref: t, className: ie({ className: e }), ...a }));
-se.displayName = "SidebarInset";
-const ne = n({
+}), ne = o.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"
-}), de = o.forwardRef(
-  ({ className: e, ...a }, t) => /* @__PURE__ */ r(K, { ref: t, "data-sidebar": "input", className: ne({ className: e }), ...a })
+}), le = o.forwardRef(
+  ({ className: a, ...e }, t) => /* @__PURE__ */ r(j, { ref: t, "data-sidebar": "input", className: de({ className: a }), ...e })
 );
-de.displayName = "SidebarInput";
-const le = n({
-  base: "flex flex-col gap-2 p-2 group-data-[variant=floating]:px-2.5"
-}), ce = o.forwardRef(({ className: e, ...a }, t) => /* @__PURE__ */ r("div", { ref: t, "data-sidebar": "header", className: le({ className: e }), ...a }));
-ce.displayName = "SidebarHeader";
+le.displayName = "SidebarInput";
+const ce = n({
+  base: "flex flex-col gap-2 p-2 group-data-[variant=floating]:px-2.5 overflow-y-hidden [scrollbar-gutter:stable]"
+}), ue = o.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"
-}), ue = o.forwardRef(({ className: e, ...a }, t) => /* @__PURE__ */ r("div", { ref: t, "data-sidebar": "footer", className: be({ className: e }), ...a }));
-ue.displayName = "SidebarFooter";
-const pe = n({
+  base: "flex flex-col gap-2 p-2 group-data-[variant=floating]:px-2.5 overflow-y-hidden [scrollbar-gutter:stable]"
+}), pe = o.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"
 }), me = o.forwardRef(
-  ({ className: e, ...a }, t) => /* @__PURE__ */ r(
-    j,
+  ({ className: a, ...e }, t) => /* @__PURE__ */ r(
+    F,
     {
       ref: t,
       orientation: "horizontal",
       "data-sidebar": "separator",
-      className: pe({ className: e }),
-      ...a
+      className: fe({ className: a }),
+      ...e
     }
   )
 );
 me.displayName = "SidebarSeparator";
-const fe = n({
+const ge = n({
   slots: {
-    content: "flex flex-1 flex-col gap-2 group-data-[collapsible=icon]:overflow-hidden"
+    content: "flex flex-1 flex-col gap-2 [scrollbar-gutter:stable] group-data-[collapsible=icon]:overflow-hidden"
   }
-}), ge = o.forwardRef(
-  ({ className: e, children: a, ...t }, i) => {
-    const s = fe();
+}), he = o.forwardRef(
+  ({ className: a, children: e, ...t }, s) => {
+    const i = ge();
     return /* @__PURE__ */ r(
-      F,
+      $,
       {
-        ref: i,
+        ref: s,
         "data-sidebar": "content",
-        className: s.content({ className: e }),
+        className: i.content({ className: a }),
         shadowSize: 32,
         ...t,
-        children: a
+        children: e
       }
     );
   }
 );
-ge.displayName = "SidebarContent";
-const he = n({
+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"
-}), ve = o.forwardRef(({ className: e, ...a }, t) => /* @__PURE__ */ r("div", { ref: t, "data-sidebar": "group", className: he({ className: e }), ...a }));
-ve.displayName = "SidebarGroup";
-const ye = n({
+}), ye = o.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"
   ]
-}), Se = o.forwardRef(
-  ({ className: e, asChild: a = !1, ...t }, i) => /* @__PURE__ */ r(a ? v : "div", { ref: i, "data-sidebar": "group-label", className: ye({ className: e }), ...t })
+}), xe = o.forwardRef(
+  ({ className: a, asChild: e = !1, ...t }, s) => /* @__PURE__ */ r(e ? y : "div", { ref: s, "data-sidebar": "group-label", className: Se({ className: a }), ...t })
 );
-Se.displayName = "SidebarGroupLabel";
-const xe = 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"
   ]
-}), we = o.forwardRef(
-  ({ className: e, asChild: a = !1, ...t }, i) => /* @__PURE__ */ r(
-    a ? v : "button",
+}), Ne = o.forwardRef(
+  ({ className: a, asChild: e = !1, ...t }, s) => /* @__PURE__ */ r(
+    e ? y : "button",
     {
-      ref: i,
+      ref: s,
       "data-sidebar": "group-action",
-      className: xe({ className: e }),
+      className: we({ className: a }),
       ...t
     }
   )
 );
-we.displayName = "SidebarGroupAction";
-const Ne = n({
+Ne.displayName = "SidebarGroupAction";
+const Me = n({
   base: "w-full text-sm"
-}), Me = o.forwardRef(
-  ({ className: e, ...a }, t) => /* @__PURE__ */ r("div", { ref: t, "data-sidebar": "group-content", className: Ne({ className: e }), ...a })
+}), Ie = o.forwardRef(
+  ({ className: a, ...e }, t) => /* @__PURE__ */ r("div", { ref: t, "data-sidebar": "group-content", className: Me({ className: a }), ...e })
 );
-Me.displayName = "SidebarGroupContent";
-const Ie = n({
+Ie.displayName = "SidebarGroupContent";
+const Re = n({
   base: "flex w-full min-w-0 flex-col gap-1"
-}), Re = o.forwardRef(({ className: e, ...a }, t) => /* @__PURE__ */ r("ul", { ref: t, "data-sidebar": "menu", className: Ie({ className: e }), ...a }));
-Re.displayName = "SidebarMenu";
-const Ce = n({
+}), Ce = o.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: Ce({ className: e }), ...a }));
-ke.displayName = "SidebarMenuItem";
-const _e = n({
+}), _e = o.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",
@@ -333,27 +343,27 @@ const _e = n({
     variant: "default",
     size: "default"
   }
-}), ze = o.forwardRef(({ asChild: e = !1, isActive: a = !1, variant: t = "default", size: i = "default", tooltip: s, className: d, ...u }, m) => {
-  const c = e ? v : "button", { isMobile: f, state: g } = N(), y = /* @__PURE__ */ r(
-    c,
+}), Te = o.forwardRef(({ asChild: a = !1, isActive: e = !1, variant: t = "default", size: s = "default", tooltip: i, className: d, ...p }, m) => {
+  const u = a ? y : "button", { isMobile: g, state: l } = N(), h = /* @__PURE__ */ r(
+    u,
     {
       ref: m,
       "data-sidebar": "menu-button",
-      "data-size": i,
-      "data-active": a,
-      className: w(_e({ variant: t, size: i }), d),
-      ...u
+      "data-size": s,
+      "data-active": e,
+      className: w(ze({ variant: t, size: s }), d),
+      ...p
     }
   );
-  return s ? (typeof s == "string" && (s = {
-    children: s
-  }), /* @__PURE__ */ p(B, { children: [
-    /* @__PURE__ */ r(D, { asChild: !0, children: y }),
-    /* @__PURE__ */ r(A, { side: "right", align: "center", hidden: g !== "collapsed" || f, ...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;
 });
-ze.displayName = "SidebarMenuButton";
-const Te = 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.
@@ -368,17 +378,17 @@ const Te = 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"
     }
   }
-}), Be = o.forwardRef(({ className: e, asChild: a = !1, showOnHover: t = !1, ...i }, s) => /* @__PURE__ */ r(
-  a ? v : "button",
+}), Ee = o.forwardRef(({ className: a, asChild: e = !1, showOnHover: t = !1, ...s }, i) => /* @__PURE__ */ r(
+  e ? y : "button",
   {
-    ref: s,
+    ref: i,
     "data-sidebar": "menu-action",
-    className: Te({ isHover: t, className: e }),
-    ...i
+    className: Be({ isHover: t, className: a }),
+    ...s
   }
 ));
-Be.displayName = "SidebarMenuAction";
-const De = 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",
@@ -387,49 +397,49 @@ const De = n({
     "peer-data-[size=lg]/menu-button:top-2.5",
     "group-data-[collapsible=icon]:hidden"
   ]
-}), Ae = o.forwardRef(
-  ({ className: e, ...a }, t) => /* @__PURE__ */ r("div", { ref: t, "data-sidebar": "menu-badge", className: De({ className: e }), ...a })
+}), De = o.forwardRef(
+  ({ className: a, ...e }, t) => /* @__PURE__ */ r("div", { ref: t, "data-sidebar": "menu-badge", className: Ae({ className: a }), ...e })
 );
-Ae.displayName = "SidebarMenuBadge";
-const Ee = n({
+De.displayName = "SidebarMenuBadge";
+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"
   }
-}), Ge = o.forwardRef(({ className: e, showIcon: a = !1, ...t }, i) => {
-  const s = o.useMemo(() => `${Math.floor(Math.random() * 40) + 50}%`, []), d = Ee();
-  return /* @__PURE__ */ p("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 = o.forwardRef(({ className: a, showIcon: e = !1, ...t }, s) => {
+  const i = o.useMemo(() => `${Math.floor(Math.random() * 40) + 50}%`, []), d = Ge();
+  return /* @__PURE__ */ f("div", { ref: s, "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
         }
       }
     )
   ] });
 });
-Ge.displayName = "SidebarMenuSkeleton";
-const Le = 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"
   ]
 }), Oe = o.forwardRef(
-  ({ className: e, ...a }, t) => /* @__PURE__ */ r("ul", { ref: t, "data-sidebar": "menu-sub", className: Le({ className: e }), ...a })
+  ({ className: a, ...e }, t) => /* @__PURE__ */ r("ul", { ref: t, "data-sidebar": "menu-sub", className: He({ className: a }), ...e })
 );
 Oe.displayName = "SidebarMenuSub";
-const He = n({
+const Pe = n({
   base: "rounded-md focus-visible:shadow-focus focus-visible:outline-none"
-}), Pe = o.forwardRef(
-  ({ className: e, ...a }, t) => /* @__PURE__ */ r("li", { ref: t, className: He({ className: e }), ...a })
+}), Ke = o.forwardRef(
+  ({ className: a, ...e }, t) => /* @__PURE__ */ r("li", { ref: t, className: Pe({ className: a }), ...e })
 );
-Pe.displayName = "SidebarMenuSubItem";
-const Ke = 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",
@@ -441,59 +451,59 @@ const Ke = n({
       md: "text-sm"
     }
   }
-}), je = o.forwardRef(({ asChild: e = !1, size: a = "md", isActive: t, className: i, ...s }, d) => /* @__PURE__ */ r(
-  e ? v : "a",
+}), Fe = o.forwardRef(({ asChild: a = !1, size: e = "md", isActive: t, className: s, ...i }, d) => /* @__PURE__ */ r(
+  a ? y : "a",
   {
     ref: d,
     "data-sidebar": "menu-sub-button",
-    "data-size": a,
+    "data-size": e,
     "data-active": t,
-    className: Ke({ size: a, className: i }),
-    ...s
+    className: je({ size: e, className: s }),
+    ...i
   }
 ));
-je.displayName = "SidebarMenuSubButton";
-const Fe = 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 = Fe();
-    return /* @__PURE__ */ p("div", { "data-sidebar": "sidebar-insertion-line", className: i.wrapper({ className: e }), ref: t, ...a, children: [
-      /* @__PURE__ */ r(R, { icon: $, size: "xs", className: i.icon(), variant: "link" }),
-      /* @__PURE__ */ r("div", { className: i.line() })
+}), qe = o.forwardRef(
+  ({ className: a, ...e }, t) => {
+    const s = $e();
+    return /* @__PURE__ */ f("div", { "data-sidebar": "sidebar-insertion-line", className: s.wrapper({ className: a }), ref: t, ...e, children: [
+      /* @__PURE__ */ r(R, { icon: q, size: "xs", className: s.icon(), variant: "link" }),
+      /* @__PURE__ */ r("div", { className: s.line() })
     ] });
   }
 );
-$e.displayName = "SidebarInsertionLine";
+qe.displayName = "SidebarInsertionLine";
 export {
-  ae as Sidebar,
-  ge as SidebarContent,
-  ue as SidebarFooter,
-  ve as SidebarGroup,
-  we as SidebarGroupAction,
-  Me as SidebarGroupContent,
-  Se as SidebarGroupLabel,
-  ce as SidebarHeader,
-  de as SidebarInput,
-  $e as SidebarInsertionLine,
-  se as SidebarInset,
-  Re as SidebarMenu,
-  Be as SidebarMenuAction,
-  Ae as SidebarMenuBadge,
-  ze as SidebarMenuButton,
-  ke as SidebarMenuItem,
-  Ge as SidebarMenuSkeleton,
+  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,
+  Te as SidebarMenuButton,
+  _e as SidebarMenuItem,
+  Le as SidebarMenuSkeleton,
   Oe as SidebarMenuSub,
-  je as SidebarMenuSubButton,
-  Pe as SidebarMenuSubItem,
-  ee as SidebarProvider,
-  oe as SidebarRail,
+  Fe as SidebarMenuSubButton,
+  Ke as SidebarMenuSubItem,
+  ae as SidebarProvider,
+  se as SidebarRail,
   me as SidebarSeparator,
-  te as SidebarTrigger,
+  re as SidebarTrigger,
   N as useSidebar
 };
 //# sourceMappingURL=sidebar.js.map