impact-nova 2.0.9 → 2.1.0-alpha.10

package/dist/components/layout/sidebar/sidebar.js

@@ -0,0 +1,721 @@
+import { jsx as a, jsxs as g, Fragment as C } from "react/jsx-runtime";
+import * as o from "react";
+import * as I from "@radix-ui/react-collapsible";
+import { Slot as S } from "@radix-ui/react-slot";
+import { HamburgerOpen as G, HamburgerClosed as H, ChevronRight as A } from "impact-nova-icons";
+import { cn as l } from "../../../lib/utils.js";
+import { Button as j } from "../../primitives/button/button.js";
+import { Input as P } from "../../forms/input/input.js";
+import { Separator as W } from "../../data-display/separator/separator.js";
+import { Skeleton as _ } from "../../data-display/skeleton/skeleton.js";
+import { sidebarMenuButtonVariants as $ } from "./sidebar.variants.js";
+import { TooltipProvider as F, Tooltip as q, TooltipTrigger as K, TooltipContent as V } from "../../feedback/tooltip/tooltip.js";
+import { useImpactNovaI18n as y } from "../../../i18n/use-impact-nova-i18n.js";
+import { SidebarContext as X, useSidebar as w, SidebarMenuCollapsibleContext as z } from "./sidebar-context.js";
+const J = "sidebar_state", Q = 3600 * 24 * 7, U = "280px", Y = "64px", Z = o.forwardRef(
+  ({
+    defaultOpen: r = !1,
+    open: t,
+    onOpenChange: e,
+    className: i,
+    style: n,
+    children: d,
+    autoHideAfter: c,
+    ...u
+  }, b) => {
+    const [s, f] = o.useState(r), m = t ?? s, v = o.useCallback(
+      (h) => {
+        const k = typeof h == "function" ? h(m) : h;
+        e ? e(k) : f(k), document.cookie = `${J}=${k}; path=/; max-age=${Q}`;
+      },
+      [e, m]
+    ), p = o.useCallback(() => {
+      v((h) => !h);
+    }, [v]), x = m ? "expanded" : "collapsed", N = o.useMemo(
+      () => ({
+        state: x,
+        open: m,
+        setOpen: v,
+        toggleSidebar: p,
+        autoHideAfter: c
+      }),
+      [x, m, v, p, c]
+    );
+    return /* @__PURE__ */ a(X.Provider, { value: N, children: /* @__PURE__ */ a(F, { children: /* @__PURE__ */ a(
+      "div",
+      {
+        style: {
+          "--sidebar-width": U,
+          "--sidebar-width-icon": Y,
+          ...n
+        },
+        "data-component": "sidebar-provider",
+        className: l(
+          "group/sidebar-wrapper relative flex min-h-svh has-[[data-variant=inset]]:bg-navigation",
+          i
+        ),
+        ref: b,
+        ...u,
+        children: d
+      }
+    ) }) });
+  }
+);
+Z.displayName = "SidebarProvider";
+const ee = o.forwardRef(
+  ({
+    side: r = "left",
+    variant: t = "sidebar",
+    collapsible: e = "offcanvas",
+    className: i,
+    children: n,
+    ...d
+  }, c) => {
+    const { state: u, open: b, setOpen: s } = w();
+    return e === "none" ? /* @__PURE__ */ a(
+      "div",
+      {
+        className: l(
+          "flex h-full w-[--sidebar-width] flex-col bg-navigation text-navigation-foreground",
+          i
+        ),
+        "data-component": "sidebar",
+        ref: c,
+        ...d,
+        children: n
+      }
+    ) : /* @__PURE__ */ g(C, { children: [
+      e === "offcanvas" && b ? /* @__PURE__ */ a(
+        "div",
+        {
+          role: "presentation",
+          "aria-hidden": !0,
+          "data-sidebar": "offcanvas-backdrop",
+          className: "fixed inset-0 z-[44] hidden  md:block",
+          onPointerDown: () => s(!1)
+        }
+      ) : null,
+      /* @__PURE__ */ g(
+        "div",
+        {
+          ref: c,
+          className: "group peer hidden md:block text-navigation-foreground",
+          "data-component": "sidebar",
+          "data-state": u,
+          "data-collapsible": u === "collapsed" ? e : "",
+          "data-variant": t,
+          "data-side": r,
+          children: [
+            /* @__PURE__ */ a(
+              "div",
+              {
+                className: l(
+                  "relative h-full w-[--sidebar-width-icon] bg-transparent transition-[width] duration-200 ease-linear"
+                )
+              }
+            ),
+            /* @__PURE__ */ a(
+              "div",
+              {
+                className: l(
+                  "absolute inset-y-0 left-0 z-[45] duration-200 ease-linear md:flex h-full w-[--sidebar-width] flex-col bg-navigation group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-navigation-border group-data-[variant=floating]:shadow",
+                  "group-data-[state=collapsed]:w-[--sidebar-width-icon]",
+                  r === "left" ? "border-e border-navigation-border group-data-[variant=floating]:border-e-0" : "border-s border-navigation-border group-data-[variant=floating]:border-s-0",
+                  i
+                ),
+                ...d,
+                children: /* @__PURE__ */ a(
+                  "div",
+                  {
+                    "data-sidebar": "sidebar",
+                    className: "flex h-full w-full flex-col bg-navigation group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-navigation-border group-data-[variant=floating]:shadow",
+                    children: n
+                  }
+                )
+              }
+            )
+          ]
+        }
+      )
+    ] });
+  }
+);
+ee.displayName = "Sidebar";
+const ae = o.forwardRef(({ className: r, onClick: t, ...e }, i) => {
+  const { t: n } = y(), { toggleSidebar: d, state: c } = w(), u = n("aria.toggleSidebar");
+  return /* @__PURE__ */ g(
+    j,
+    {
+      ref: i,
+      "data-sidebar": "trigger",
+      variant: "ghost",
+      size: "icon",
+      className: l(
+        "h-10 w-10 min-h-10 min-w-10 rounded-lg p-0 hover:bg-transparent focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 [&_svg]:size-10",
+        r
+      ),
+      onClick: (b) => {
+        t?.(b), d();
+      },
+      "aria-label": u,
+      ...e,
+      children: [
+        c === "expanded" ? /* @__PURE__ */ a(G, { size: "3xl" }) : /* @__PURE__ */ a(H, { size: "3xl" }),
+        /* @__PURE__ */ a("span", { className: "sr-only", children: u })
+      ]
+    }
+  );
+});
+ae.displayName = "SidebarTrigger";
+const te = o.forwardRef(({ className: r, ...t }, e) => {
+  const { t: i } = y(), { toggleSidebar: n } = w(), d = i("aria.toggleSidebar");
+  return /* @__PURE__ */ a(
+    "button",
+    {
+      ref: e,
+      "data-sidebar": "rail",
+      "aria-label": d,
+      tabIndex: -1,
+      onClick: n,
+      title: d,
+      className: l(
+        "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-navigation-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-navigation",
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+        r
+      ),
+      ...t
+    }
+  );
+});
+te.displayName = "SidebarRail";
+const re = o.forwardRef(({ className: r, ...t }, e) => /* @__PURE__ */ a(
+  "div",
+  {
+    ref: e,
+    className: l(
+      "relative flex w-full flex-1 flex-col bg-canvas",
+      "md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ms-2 md:peer-data-[variant=inset]:ms-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
+      r
+    ),
+    ...t
+  }
+));
+re.displayName = "SidebarInset";
+const ne = o.forwardRef(({ className: r, ...t }, e) => /* @__PURE__ */ a(
+  P,
+  {
+    ref: e,
+    "data-sidebar": "input",
+    className: l(
+      "h-8 w-full bg-canvas shadow-none focus-visible:ring-2 focus-visible:ring-navigation-ring",
+      r
+    ),
+    ...t
+  }
+));
+ne.displayName = "SidebarInput";
+const ie = o.forwardRef(({ className: r, ...t }, e) => /* @__PURE__ */ a(
+  "div",
+  {
+    ref: e,
+    "data-sidebar": "header",
+    className: l(
+      "flex mt-3 mb-[34px] items-center px-3 transition-all duration-200 ease-linear",
+      r
+    ),
+    ...t
+  }
+));
+ie.displayName = "SidebarHeader";
+const oe = o.forwardRef(({ className: r, ...t }, e) => /* @__PURE__ */ a(
+  "div",
+  {
+    ref: e,
+    "data-sidebar": "footer",
+    className: l(
+      "flex shrink-0 flex-col gap-2 pt-2 min-w-0 w-full overflow-x-hidden group-data-[state=collapsed]:px-0",
+      r
+    ),
+    ...t
+  }
+));
+oe.displayName = "SidebarFooter";
+const se = o.forwardRef(({ className: r, ...t }, e) => /* @__PURE__ */ a(
+  W,
+  {
+    ref: e,
+    "data-sidebar": "separator",
+    className: l(
+      "mx-5 w-auto bg-navigation-border group-data-[state=collapsed]:mx-0 group-data-[state=collapsed]:w-full",
+      r
+    ),
+    ...t
+  }
+));
+se.displayName = "SidebarSeparator";
+const de = o.forwardRef(
+  ({
+    className: r,
+    routes: t,
+    activeValue: e,
+    onNavigate: i,
+    asLinks: n = !1,
+    children: d,
+    ...c
+  }, u) => {
+    const b = t ? /* @__PURE__ */ a(B, { children: t.map((s) => {
+      const f = !!s.children, m = e === s.value || f && s.children?.some((p) => p.value === e);
+      return /* @__PURE__ */ g(f ? D : R, { isActive: m, children: [
+        /* @__PURE__ */ a(
+          M,
+          {
+            asChild: n,
+            isActive: m,
+            tooltip: s.label,
+            onClick: () => {
+              !n && !f && !s.disabled && i?.(s.value);
+            },
+            disabled: s.disabled,
+            children: n ? /* @__PURE__ */ g(
+              "a",
+              {
+                href: s.url,
+                "aria-disabled": s.disabled,
+                className: s.disabled ? "pointer-events-none" : "",
+                onClick: (p) => {
+                  if (s.disabled) {
+                    p.preventDefault();
+                    return;
+                  }
+                  if (f) {
+                    p.preventDefault();
+                    return;
+                  }
+                  p.preventDefault(), i?.(s.value);
+                },
+                children: [
+                  s.icon,
+                  /* @__PURE__ */ a("span", { "data-sidebar": "menu-label", children: s.label })
+                ]
+              }
+            ) : /* @__PURE__ */ g(C, { children: [
+              s.icon,
+              /* @__PURE__ */ a("span", { "data-sidebar": "menu-label", children: s.label })
+            ] })
+          }
+        ),
+        f && s.children && /* @__PURE__ */ a(L, { children: s.children.map((p) => /* @__PURE__ */ a(T, { children: /* @__PURE__ */ a(
+          E,
+          {
+            asChild: n,
+            isActive: e === p.value,
+            href: n ? p.url : void 0,
+            onClick: n ? (x) => {
+              x.preventDefault(), i?.(p.value);
+            } : () => i?.(p.value),
+            children: /* @__PURE__ */ a("span", { children: p.label })
+          }
+        ) }, p.value)) })
+      ] }, s.value);
+    }) }) : d;
+    return /* @__PURE__ */ a(
+      "div",
+      {
+        ref: u,
+        "data-sidebar": "content",
+        className: l(
+          "flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto overflow-x-hidden group-data-[collapsible=icon]:overflow-hidden",
+          r
+        ),
+        ...c,
+        children: b
+      }
+    );
+  }
+);
+de.displayName = "SidebarContent";
+const le = o.forwardRef(({ className: r, ...t }, e) => /* @__PURE__ */ a(
+  "div",
+  {
+    ref: e,
+    "data-sidebar": "group",
+    className: l(
+      "relative flex w-full min-w-0 flex-col py-2 group-data-[state=collapsed]:px-0",
+      r
+    ),
+    ...t
+  }
+));
+le.displayName = "SidebarGroup";
+const ce = o.forwardRef(({ className: r, asChild: t = !1, ...e }, i) => /* @__PURE__ */ a(
+  t ? S : "div",
+  {
+    ref: i,
+    "data-sidebar": "group-label",
+    className: l(
+      "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-navigation-foreground/70 outline-none ring-navigation-ring 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",
+      r
+    ),
+    ...e
+  }
+));
+ce.displayName = "SidebarGroupLabel";
+const ue = o.forwardRef(({ className: r, asChild: t = !1, ...e }, i) => /* @__PURE__ */ a(
+  t ? S : "button",
+  {
+    ref: i,
+    "data-sidebar": "group-action",
+    className: l(
+      "absolute end-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-navigation-foreground outline-none ring-navigation-ring transition-transform hover:bg-navigation-hover hover:text-navigation-on-hover focus-visible:ring-2 [&>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",
+      r
+    ),
+    ...e
+  }
+));
+ue.displayName = "SidebarGroupAction";
+const pe = o.forwardRef(({ className: r, ...t }, e) => /* @__PURE__ */ a(
+  "div",
+  {
+    ref: e,
+    "data-sidebar": "group-content",
+    className: l("w-full text-sm", r),
+    ...t
+  }
+));
+pe.displayName = "SidebarGroupContent";
+const B = o.forwardRef(({ className: r, children: t, ...e }, i) => {
+  const { t: n } = y(), { autoHideAfter: d } = w(), [c, u] = o.useState(!1), b = o.Children.toArray(t), s = n("sidebar.viewMore"), f = n("sidebar.viewLess");
+  return /* @__PURE__ */ a(
+    "ul",
+    {
+      ref: i,
+      "data-sidebar": "menu",
+      className: l("flex w-full min-w-0 flex-col gap-1", r),
+      ...e,
+      children: !d || b.length <= d + 1 ? t : /* @__PURE__ */ g(C, { children: [
+        b.slice(0, d),
+        /* @__PURE__ */ a(R, { children: /* @__PURE__ */ g(
+          M,
+          {
+            onClick: () => u(!c),
+            className: "hover:bg-transparent",
+            tooltip: c ? f : s,
+            children: [
+              /* @__PURE__ */ a("div", { className: "text-success", children: /* @__PURE__ */ a(
+                A,
+                {
+                  size: "lg",
+                  className: l(
+                    "transition-transform duration-200",
+                    c ? "-rotate-90" : "rotate-90"
+                  )
+                }
+              ) }),
+              /* @__PURE__ */ a("span", { children: c ? f : s })
+            ]
+          }
+        ) }),
+        c && b.slice(d)
+      ] })
+    }
+  );
+});
+B.displayName = "SidebarMenu";
+const R = o.forwardRef(
+  ({ className: r, isActive: t, ...e }, i) => /* @__PURE__ */ a(
+    "li",
+    {
+      ref: i,
+      "data-sidebar": "menu-item",
+      "data-active": t || void 0,
+      className: l("group/menu-item relative", r),
+      ...e
+    }
+  )
+);
+R.displayName = "SidebarMenuItem";
+const D = o.forwardRef(
+  ({
+    children: r,
+    isActive: t,
+    defaultOpen: e,
+    open: i,
+    onOpenChange: n,
+    ...d
+  }, c) => {
+    const { state: u } = w(), [b, s] = o.useState(
+      e ?? !1
+    ), f = i !== void 0 ? i : b, m = o.useCallback((v) => {
+      i === void 0 && s(v), n?.(v);
+    }, [i, n]);
+    return o.useEffect(() => {
+      u === "expanded" && t && !f && m(!0);
+    }, [u, t, f, m]), /* @__PURE__ */ a(z.Provider, { value: { isCollapsible: !0 }, children: /* @__PURE__ */ a(
+      I.Root,
+      {
+        ref: c,
+        asChild: !0,
+        open: f,
+        onOpenChange: m,
+        ...d,
+        children: /* @__PURE__ */ a(R, { children: r })
+      }
+    ) });
+  }
+);
+D.displayName = "SidebarMenuCollapsible";
+const M = o.forwardRef(
+  ({
+    asChild: r = !1,
+    isActive: t = !1,
+    variant: e = "default",
+    size: i = "default",
+    tooltip: n,
+    className: d,
+    children: c,
+    ...u
+  }, b) => {
+    const s = r ? S : "button", { state: f, setOpen: m } = w(), p = !!o.useContext(z)?.isCollapsible, x = /* @__PURE__ */ a(
+      s,
+      {
+        ref: b,
+        "data-sidebar": "menu-button",
+        "data-size": i,
+        "data-active": t,
+        className: l(
+          "relative",
+          $({ variant: e, size: i }),
+          d
+        ),
+        ...u,
+        onClick: (h) => {
+          f === "collapsed" && p && (m(!0), t && (h.preventDefault(), h.stopPropagation())), u.onClick?.(h);
+        },
+        children: r ? c : /* @__PURE__ */ g(C, { children: [
+          c,
+          p && /* @__PURE__ */ a(A, { "data-sidebar": "menu-button-chevron" })
+        ] })
+      }
+    ), N = p ? /* @__PURE__ */ a(I.Trigger, { asChild: !0, children: x }) : x;
+    return n ? (typeof n == "string" && (n = {
+      children: n
+    }), /* @__PURE__ */ g(q, { children: [
+      /* @__PURE__ */ a(K, { asChild: !0, children: N }),
+      /* @__PURE__ */ a(
+        V,
+        {
+          side: "right",
+          align: "center",
+          variant: "tertiary",
+          hidden: f !== "collapsed",
+          ...n
+        }
+      )
+    ] })) : N;
+  }
+);
+M.displayName = "SidebarMenuButton";
+const O = o.forwardRef(({ className: r, ...t }, e) => /* @__PURE__ */ a(
+  "span",
+  {
+    ref: e,
+    "data-sidebar": "menu-label",
+    className: r,
+    ...t
+  }
+));
+O.displayName = "SidebarMenuLabel";
+const be = o.forwardRef(({ className: r, ...t }, e) => {
+  const { t: i } = y(), n = i("sidebar.logout");
+  return /* @__PURE__ */ g(
+    M,
+    {
+      ref: e,
+      className: l(
+        "text-success hover:text-success hover:bg-navigation-item-hover",
+        r
+      ),
+      ...t,
+      children: [
+        /* @__PURE__ */ a(
+          "svg",
+          {
+            width: "20",
+            height: "20",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg",
+            children: /* @__PURE__ */ a(
+              "path",
+              {
+                d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ a(O, { children: n })
+      ]
+    }
+  );
+});
+be.displayName = "SidebarLogout";
+const fe = o.forwardRef(({ className: r, asChild: t = !1, showOnHover: e = !1, ...i }, n) => /* @__PURE__ */ a(
+  t ? S : "button",
+  {
+    ref: n,
+    "data-sidebar": "menu-action",
+    className: l(
+      "absolute end-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-navigation-foreground outline-none ring-navigation-ring transition-transform hover:bg-navigation-hover hover:text-navigation-on-hover focus-visible:ring-2 peer-hover/menu-button:text-navigation-on-hover [&>svg]:size-4 [&>svg]: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",
+      e && "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-navigation-on-hover md:opacity-0",
+      r
+    ),
+    ...i
+  }
+));
+fe.displayName = "SidebarMenuAction";
+const me = o.forwardRef(({ className: r, ...t }, e) => /* @__PURE__ */ a(
+  "div",
+  {
+    ref: e,
+    "data-sidebar": "menu-badge",
+    className: l(
+      "pointer-events-none absolute end-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-navigation-foreground",
+      "peer-hover/menu-button:text-navigation-on-hover peer-data-[active=true]/menu-button:text-navigation-on-hover",
+      "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",
+      r
+    ),
+    ...t
+  }
+));
+me.displayName = "SidebarMenuBadge";
+const ge = o.forwardRef(({ className: r, showIcon: t = !1, ...e }, i) => {
+  const n = o.useId(), d = o.useMemo(() => `${50 + n.split("").reduce((u, b) => u + b.charCodeAt(0), 0) % 40}%`, [n]);
+  return /* @__PURE__ */ g(
+    "div",
+    {
+      ref: i,
+      "data-sidebar": "menu-skeleton",
+      className: l("flex h-8 items-center gap-2 rounded-md px-2", r),
+      ...e,
+      children: [
+        t && /* @__PURE__ */ a(
+          _,
+          {
+            className: "size-4 rounded-md",
+            "data-sidebar": "menu-skeleton-icon"
+          }
+        ),
+        /* @__PURE__ */ a(
+          _,
+          {
+            className: "h-4 max-w-[--skeleton-width] flex-1",
+            "data-sidebar": "menu-skeleton-text",
+            style: {
+              "--skeleton-width": d
+            }
+          }
+        )
+      ]
+    }
+  );
+});
+ge.displayName = "SidebarMenuSkeleton";
+const L = o.forwardRef(({ className: r, ...t }, e) => {
+  const n = !!o.useContext(z)?.isCollapsible, d = /* @__PURE__ */ a(
+    "ul",
+    {
+      ref: e,
+      "data-sidebar": "menu-sub",
+      className: l(
+        "relative ms-8 mt-2 mb-2 flex min-w-0 flex-col gap-0 py-0",
+        "group-data-[state=collapsed]:hidden",
+        r
+      ),
+      ...t
+    }
+  );
+  return n ? /* @__PURE__ */ a(I.Content, { className: "overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down motion-reduce:animate-none motion-reduce:transition-none", children: d }) : d;
+});
+L.displayName = "SidebarMenuSub";
+const T = o.forwardRef(({ className: r, isActive: t, ...e }, i) => /* @__PURE__ */ a(
+  "li",
+  {
+    ref: i,
+    "data-sidebar": "menu-sub-item",
+    "data-active": t || void 0,
+    className: l("group/menu-sub-item relative", r),
+    ...e
+  }
+));
+T.displayName = "SidebarMenuSubItem";
+const E = o.forwardRef(({ asChild: r = !1, size: t = "md", isActive: e, className: i, ...n }, d) => /* @__PURE__ */ a(
+  r ? S : "a",
+  {
+    ref: d,
+    "data-sidebar": "menu-sub-button",
+    "data-size": t,
+    "data-active": e,
+    className: l(
+      "relative flex h-auto min-w-0 items-center gap-2 overflow-visible py-[14px] px-5 text-navigation-foreground outline-none transition-colors hover:bg-navigation-item-hover focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 cursor-pointer [&>span]:truncate [&>span]:shrink [&>span]:text-[14px] [&>span]:whitespace-nowrap [&>svg]:size-4 [&>svg]:shrink-0",
+      "data-[active=true]:font-medium data-[active=true]:text-success",
+      "group-data-[state=collapsed]:hidden",
+      "before:absolute before:start-0 before:top-0 before:w-1 before:transition-all before:duration-200 before:h-full before:z-10",
+      "group-first/menu-sub-item:before:rounded-se-[4px] group-last/menu-sub-item:before:rounded-ee-[4px]",
+      e ? "before:bg-success" : "before:bg-navigation-item-active",
+      i
+    ),
+    ...n,
+    children: n.children
+  }
+));
+E.displayName = "SidebarMenuSubButton";
+export {
+  ee as Sidebar,
+  de as SidebarContent,
+  oe as SidebarFooter,
+  le as SidebarGroup,
+  ue as SidebarGroupAction,
+  pe as SidebarGroupContent,
+  ce as SidebarGroupLabel,
+  ie as SidebarHeader,
+  ne as SidebarInput,
+  re as SidebarInset,
+  be as SidebarLogout,
+  B as SidebarMenu,
+  fe as SidebarMenuAction,
+  me as SidebarMenuBadge,
+  M as SidebarMenuButton,
+  D as SidebarMenuCollapsible,
+  R as SidebarMenuItem,
+  O as SidebarMenuLabel,
+  ge as SidebarMenuSkeleton,
+  L as SidebarMenuSub,
+  E as SidebarMenuSubButton,
+  T as SidebarMenuSubItem,
+  Z as SidebarProvider,
+  te as SidebarRail,
+  se as SidebarSeparator,
+  ae as SidebarTrigger,
+  w as useSidebar
+};