@devalok/shilp-sutra 0.34.0 → 0.36.0

package/dist/ui/sidebar.js

@@ -1,605 +1,362 @@
 "use client";
-import { jsx as s, jsxs as h, Fragment as R } from "react/jsx-runtime";
-import { S as v } from "../_chunks/primitives.js";
-import { a as T } from "../_chunks/vendor-utils.js";
-import { IconLayoutSidebarLeftCollapse as A } from "@tabler/icons-react";
-import { useIsMobile as D } from "../hooks/use-mobile.js";
-import { springs as O } from "./lib/motion.js";
-import { cn as i } from "./lib/utils.js";
-import { Icon as G } from "./icon.js";
-import { Button as L } from "./button.js";
-import { Input as H } from "./input.js";
-import { Separator as K } from "./separator.js";
-import { Sheet as j, SheetContent as W } from "./sheet.js";
-import { Skeleton as _ } from "./skeleton.js";
-import { TooltipProvider as $, Tooltip as F, TooltipTrigger as P, TooltipContent as V } from "./tooltip.js";
-import { createContext as q, forwardRef as o, useState as C, useCallback as I, useEffect as U, useMemo as k, useContext as X, useRef as Y } from "react";
-import { m as z, u as J } from "../_chunks/framer.js";
-const Q = "sidebar:state", Z = 3600 * 24 * 7, ee = "16rem", ae = "18rem", te = "3rem", se = "b", E = q(null);
-function N() {
-  const e = X(E);
-  if (!e)
-    throw new Error("useSidebar must be used within a SidebarProvider.");
-  return e;
+import { Hn as e } from "../_chunks/primitives.js";
+import { a as t, n } from "../_chunks/framer.js";
+import { springs as r } from "./lib/motion.js";
+import { t as i } from "../_chunks/vendor-utils.js";
+import { cn as a } from "./lib/utils.js";
+import { Icon as o } from "./icon.js";
+import { useIsMobile as s } from "../hooks/use-mobile.js";
+import { Button as c } from "./button.js";
+import { Skeleton as l } from "./skeleton.js";
+import { Input as u } from "./input.js";
+import { Separator as d } from "./separator.js";
+import { Sheet as f, SheetContent as p } from "./sheet.js";
+import { Tooltip as m, TooltipContent as h, TooltipProvider as g, TooltipTrigger as _ } from "./tooltip.js";
+import { createContext as v, forwardRef as y, useCallback as b, useContext as x, useEffect as S, useMemo as C, useRef as ee, useState as w } from "react";
+import { Fragment as te, jsx as T, jsxs as E } from "react/jsx-runtime";
+import { IconLayoutSidebarLeftCollapse as ne } from "@tabler/icons-react";
+//#region src/ui/sidebar.tsx
+var D = "sidebar:state", O = 3600 * 24 * 7, re = "16rem", ie = "18rem", ae = "3rem", oe = "b", k = v(null);
+function A() {
+	let e = x(k);
+	if (!e) throw Error("useSidebar must be used within a SidebarProvider.");
+	return e;
 }
-const re = o(
-  ({
-    defaultOpen: e = !0,
-    open: a,
-    onOpenChange: t,
-    className: r,
-    style: d,
-    children: n,
-    ...c
-  }, b) => {
-    const l = D(), [f, p] = C(!1), [y, x] = C(e), g = a ?? y, S = I(
-      (u) => {
-        const m = typeof u == "function" ? u(g) : u;
-        t ? t(m) : x(m), typeof document < "u" && (document.cookie = `${Q}=${m}; path=/; max-age=${Z}`);
-      },
-      [t, g]
-    ), w = I(() => l ? p((u) => !u) : S((u) => !u), [l, S, p]);
-    U(() => {
-      const u = (m) => {
-        m.key === se && (m.metaKey || m.ctrlKey) && (m.preventDefault(), w());
-      };
-      return window.addEventListener("keydown", u), () => window.removeEventListener("keydown", u);
-    }, [w]);
-    const M = g ? "expanded" : "collapsed", B = k(
-      () => ({
-        state: M,
-        open: g,
-        setOpen: S,
-        isMobile: l,
-        openMobile: f,
-        setOpenMobile: p,
-        toggleSidebar: w
-      }),
-      [
-        M,
-        g,
-        S,
-        l,
-        f,
-        p,
-        w
-      ]
-    );
-    return /* @__PURE__ */ s(E.Provider, { value: B, children: /* @__PURE__ */ s($, { delayDuration: 0, children: /* @__PURE__ */ s(
-      "div",
-      {
-        style: {
-          "--sidebar-width": ee,
-          "--sidebar-width-icon": te,
-          ...d
-        },
-        className: i(
-          "group/sidebar-wrapper flex min-h-svh has-[[data-variant=inset]]:bg-surface-sunken",
-          r
-        ),
-        ref: b,
-        ...c,
-        children: n
-      }
-    ) }) });
-  }
-);
-re.displayName = "SidebarProvider";
-function ie({
-  side: e,
-  onClose: a,
-  children: t
-}) {
-  const r = J(), d = Y(null), n = "x", c = e === "left" ? { right: 0 } : { left: 0 };
-  return /* @__PURE__ */ s(
-    z.div,
-    {
-      ref: d,
-      className: "h-full w-full",
-      drag: r ? !1 : n,
-      dragConstraints: c,
-      dragElastic: 0.2,
-      onDragEnd: (b, l) => {
-        const f = d.current?.getBoundingClientRect().width ?? 280;
-        e === "left" ? (l.offset.x < -(f * 0.3) || l.velocity.x < -500) && a() : (l.offset.x > f * 0.3 || l.velocity.x > 500) && a();
-      },
-      children: t
-    }
-  );
+var j = y(({ defaultOpen: e = !0, open: t, onOpenChange: n, className: r, style: i, children: o, ...c }, l) => {
+	let u = s(), [d, f] = w(!1), [p, m] = w(e), h = t ?? p, _ = b((e) => {
+		let t = typeof e == "function" ? e(h) : e;
+		n ? n(t) : m(t), typeof document < "u" && (document.cookie = `${D}=${t}; path=/; max-age=${O}`);
+	}, [n, h]), v = b(() => u ? f((e) => !e) : _((e) => !e), [
+		u,
+		_,
+		f
+	]);
+	S(() => {
+		let e = (e) => {
+			e.key === oe && (e.metaKey || e.ctrlKey) && (e.preventDefault(), v());
+		};
+		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
+	}, [v]);
+	let y = h ? "expanded" : "collapsed", x = C(() => ({
+		state: y,
+		open: h,
+		setOpen: _,
+		isMobile: u,
+		openMobile: d,
+		setOpenMobile: f,
+		toggleSidebar: v
+	}), [
+		y,
+		h,
+		_,
+		u,
+		d,
+		f,
+		v
+	]);
+	return /* @__PURE__ */ T(k.Provider, {
+		value: x,
+		children: /* @__PURE__ */ T(g, {
+			delayDuration: 0,
+			children: /* @__PURE__ */ T("div", {
+				style: {
+					"--sidebar-width": re,
+					"--sidebar-width-icon": ae,
+					...i
+				},
+				className: a("group/sidebar-wrapper flex min-h-svh has-[[data-variant=inset]]:bg-surface-sunken", r),
+				ref: l,
+				...c,
+				children: o
+			})
+		})
+	});
+});
+j.displayName = "SidebarProvider";
+function se({ side: e, onClose: r, children: i }) {
+	let a = n(), o = ee(null), s = e === "left" ? { right: 0 } : { left: 0 };
+	return /* @__PURE__ */ T(t.div, {
+		ref: o,
+		className: "h-full w-full",
+		drag: a ? !1 : "x",
+		dragConstraints: s,
+		dragElastic: .2,
+		onDragEnd: (t, n) => {
+			let i = o.current?.getBoundingClientRect().width ?? 280;
+			e === "left" ? (n.offset.x < -(i * .3) || n.velocity.x < -500) && r() : (n.offset.x > i * .3 || n.velocity.x > 500) && r();
+		},
+		children: i
+	});
 }
-const de = o(
-  ({
-    side: e = "left",
-    variant: a = "sidebar",
-    collapsible: t = "offcanvas",
-    className: r,
-    children: d,
-    ...n
-  }, c) => {
-    const { isMobile: b, state: l, openMobile: f, setOpenMobile: p } = N();
-    return t === "none" ? /* @__PURE__ */ s(
-      "aside",
-      {
-        "aria-label": "Sidebar",
-        className: i(
-          "flex h-full w-[--sidebar-width] flex-col bg-surface-raised text-surface-fg",
-          r
-        ),
-        ref: c,
-        ...n,
-        children: d
-      }
-    ) : b ? /* @__PURE__ */ s(j, { open: f, onOpenChange: p, ...n, children: /* @__PURE__ */ s(
-      W,
-      {
-        "data-sidebar": "sidebar",
-        "data-mobile": "true",
-        className: "w-[--sidebar-width] bg-surface-raised p-0 text-surface-fg [&>button]:hidden",
-        style: {
-          "--sidebar-width": ae
-        },
-        side: e,
-        responsive: !1,
-        children: /* @__PURE__ */ s(ie, { side: e, onClose: () => p(!1), children: /* @__PURE__ */ s("aside", { "aria-label": "Sidebar", className: "flex h-full w-full flex-col", children: d }) })
-      }
-    ) }) : /* @__PURE__ */ h(
-      "div",
-      {
-        ref: c,
-        className: "group peer hidden text-surface-fg md:block",
-        "data-state": l,
-        "data-collapsible": l === "collapsed" ? t : "",
-        "data-variant": a,
-        "data-side": e,
-        children: [
-          /* @__PURE__ */ s(
-            "div",
-            {
-              className: i(
-                "relative h-svh w-[--sidebar-width] bg-transparent transition-[width] duration-moderate-02 ease-productive-exit",
-                "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__ */ s(
-            "div",
-            {
-              className: i(
-                "fixed inset-y-0 z-raised hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-moderate-02 ease-productive-exit 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)]",
-                a === "floating" || a === "inset" ? "p-ds-03 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",
-                r
-              ),
-              ...n,
-              children: /* @__PURE__ */ s(
-                "aside",
-                {
-                  "aria-label": "Sidebar",
-                  "data-sidebar": "sidebar",
-                  className: "flex h-full w-full flex-col bg-surface-raised group-data-[variant=floating]:rounded-ds-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-surface-border group-data-[variant=floating]:shadow",
-                  children: d
-                }
-              )
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-de.displayName = "Sidebar";
-const oe = o(({ className: e, onClick: a, ...t }, r) => {
-  const { toggleSidebar: d } = N();
-  return /* @__PURE__ */ h(
-    L,
-    {
-      ref: r,
-      "data-sidebar": "trigger",
-      variant: "ghost",
-      size: "icon-md",
-      className: i("h-ds-xs-plus w-ds-xs-plus", e),
-      onClick: (n) => {
-        a?.(n), d();
-      },
-      ...t,
-      children: [
-        /* @__PURE__ */ s(G, { icon: A, size: "sm" }),
-        /* @__PURE__ */ s("span", { className: "sr-only", children: "Toggle Sidebar" })
-      ]
-    }
-  );
+var M = y(({ side: e = "left", variant: t = "sidebar", collapsible: n = "offcanvas", className: r, children: i, ...o }, s) => {
+	let { isMobile: c, state: l, openMobile: u, setOpenMobile: d } = A();
+	return n === "none" ? /* @__PURE__ */ T("aside", {
+		"aria-label": "Sidebar",
+		className: a("flex h-full w-[--sidebar-width] flex-col bg-surface-raised text-surface-fg", r),
+		ref: s,
+		...o,
+		children: i
+	}) : c ? /* @__PURE__ */ T(f, {
+		open: u,
+		onOpenChange: d,
+		...o,
+		children: /* @__PURE__ */ T(p, {
+			"data-sidebar": "sidebar",
+			"data-mobile": "true",
+			className: "w-[--sidebar-width] bg-surface-raised p-0 text-surface-fg [&>button]:hidden",
+			style: { "--sidebar-width": ie },
+			side: e,
+			responsive: !1,
+			children: /* @__PURE__ */ T(se, {
+				side: e,
+				onClose: () => d(!1),
+				children: /* @__PURE__ */ T("aside", {
+					"aria-label": "Sidebar",
+					className: "flex h-full w-full flex-col",
+					children: i
+				})
+			})
+		})
+	}) : /* @__PURE__ */ E("div", {
+		ref: s,
+		className: "group peer hidden text-surface-fg md:block",
+		"data-state": l,
+		"data-collapsible": l === "collapsed" ? n : "",
+		"data-variant": t,
+		"data-side": e,
+		children: [/* @__PURE__ */ T("div", { className: a("relative h-svh w-[--sidebar-width] bg-transparent transition-[width] duration-moderate-02 ease-productive-exit", "group-data-[collapsible=offcanvas]:w-0", "group-data-[side=right]:rotate-180", t === "floating" || t === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]" : "group-data-[collapsible=icon]:w-[--sidebar-width-icon]") }), /* @__PURE__ */ T("div", {
+			className: a("fixed inset-y-0 z-raised hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-moderate-02 ease-productive-exit 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)]", t === "floating" || t === "inset" ? "p-ds-03 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", r),
+			...o,
+			children: /* @__PURE__ */ T("aside", {
+				"aria-label": "Sidebar",
+				"data-sidebar": "sidebar",
+				className: "flex h-full w-full flex-col bg-surface-raised group-data-[variant=floating]:rounded-ds-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-surface-border group-data-[variant=floating]:shadow",
+				children: i
+			})
+		})]
+	});
+});
+M.displayName = "Sidebar";
+var N = y(({ className: e, onClick: t, ...n }, r) => {
+	let { toggleSidebar: i } = A();
+	return /* @__PURE__ */ E(c, {
+		ref: r,
+		"data-sidebar": "trigger",
+		variant: "ghost",
+		size: "icon-md",
+		className: a("h-ds-xs-plus w-ds-xs-plus", e),
+		onClick: (e) => {
+			t?.(e), i();
+		},
+		...n,
+		children: [/* @__PURE__ */ T(o, {
+			icon: ne,
+			size: "sm"
+		}), /* @__PURE__ */ T("span", {
+			className: "sr-only",
+			children: "Toggle Sidebar"
+		})]
+	});
+});
+N.displayName = "SidebarTrigger";
+var P = y(({ className: e, ...t }, n) => {
+	let { toggleSidebar: r } = A();
+	return /* @__PURE__ */ T("button", {
+		ref: n,
+		"data-sidebar": "rail",
+		"aria-label": "Toggle Sidebar",
+		tabIndex: -1,
+		onClick: r,
+		title: "Toggle Sidebar",
+		className: a("hover:after:bg-surface-border-strong absolute inset-y-0 z-raised hidden w-4 -translate-x-1/2 transition-colors ease-productive-standard after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex", "[[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-surface-raised-hover", "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2", "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2", e),
+		...t
+	});
+});
+P.displayName = "SidebarRail";
+var F = y(({ className: e, ...t }, n) => /* @__PURE__ */ T("main", {
+	ref: n,
+	className: a("relative flex min-h-svh flex-1 flex-col bg-surface-base", "peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-ds-03 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-ds-03 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-ds-xl md:peer-data-[variant=inset]:shadow", e),
+	...t
+}));
+F.displayName = "SidebarInset";
+var I = y(({ className: e, wrapperClassName: t, ...n }, r) => /* @__PURE__ */ T(u, {
+	ref: r,
+	"data-sidebar": "input",
+	size: "sm",
+	wrapperClassName: a("bg-surface-raised shadow-none focus-within:ring-2 focus-within:ring-accent-9", t),
+	className: a("w-full", e),
+	...n
+}));
+I.displayName = "SidebarInput";
+var L = y(({ className: e, ...t }, n) => /* @__PURE__ */ T("div", {
+	ref: n,
+	"data-sidebar": "header",
+	className: a("flex flex-col gap-ds-03 p-ds-03", e),
+	...t
+}));
+L.displayName = "SidebarHeader";
+var R = y(({ className: e, ...t }, n) => /* @__PURE__ */ T("div", {
+	ref: n,
+	"data-sidebar": "footer",
+	className: a("flex flex-col gap-ds-03 p-ds-03", e),
+	...t
+}));
+R.displayName = "SidebarFooter";
+var z = y(({ className: e, ...t }, n) => /* @__PURE__ */ T(d, {
+	ref: n,
+	"data-sidebar": "separator",
+	className: a("bg-surface-border mx-ds-03 w-auto", e),
+	...t
+}));
+z.displayName = "SidebarSeparator";
+var B = y(({ className: e, ...t }, n) => /* @__PURE__ */ T("div", {
+	ref: n,
+	"data-sidebar": "content",
+	className: a("flex min-h-0 flex-1 flex-col gap-ds-03 overflow-auto group-data-[collapsible=icon]:overflow-hidden", e),
+	...t
+}));
+B.displayName = "SidebarContent";
+var V = y(({ className: e, ...t }, n) => /* @__PURE__ */ T("div", {
+	ref: n,
+	"data-sidebar": "group",
+	className: a("relative flex w-full min-w-0 flex-col p-ds-03", e),
+	...t
+}));
+V.displayName = "SidebarGroup";
+var H = y(({ className: t, asChild: n = !1, ...r }, i) => /* @__PURE__ */ T(n ? e : "div", {
+	ref: i,
+	"data-sidebar": "group-label",
+	className: a("flex h-ds-sm shrink-0 items-center rounded-ds-md px-ds-03 text-ds-sm font-medium text-surface-fg-muted outline-hidden ring-accent-9 transition-[margin,opacity] duration-moderate-02 ease-productive-exit focus-visible:ring-2 [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0", "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0", t),
+	...r
+}));
+H.displayName = "SidebarGroupLabel";
+var U = y(({ className: t, asChild: n = !1, ...r }, i) => /* @__PURE__ */ T(n ? e : "button", {
+	ref: i,
+	"data-sidebar": "group-action",
+	className: a("hover:bg-surface-raised-hover absolute right-ds-04 top-ds-04 flex aspect-square w-5 items-center justify-center rounded-ds-md p-0 text-surface-fg outline-hidden ring-accent-9 transition-transform hover:text-surface-fg focus-visible:ring-2 [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0", "after:absolute after:-inset-2 after:md:hidden", "group-data-[collapsible=icon]:hidden", t),
+	...r
+}));
+U.displayName = "SidebarGroupAction";
+var W = y(({ className: e, ...t }, n) => /* @__PURE__ */ T("div", {
+	ref: n,
+	"data-sidebar": "group-content",
+	className: a("w-full text-ds-md", e),
+	...t
+}));
+W.displayName = "SidebarGroupContent";
+var G = y(({ className: e, ...t }, n) => /* @__PURE__ */ T("ul", {
+	ref: n,
+	"data-sidebar": "menu",
+	className: a("flex w-full min-w-0 flex-col gap-ds-02", e),
+	...t
+}));
+G.displayName = "SidebarMenu";
+var K = y(({ className: e, ...t }, n) => /* @__PURE__ */ T("li", {
+	ref: n,
+	"data-sidebar": "menu-item",
+	className: a("group/menu-item relative", e),
+	...t
+}));
+K.displayName = "SidebarMenuItem";
+var ce = i("peer/menu-button hover:bg-surface-raised-hover active:bg-accent-2 data-[active=true]:bg-accent-2 data-[state=open]:hover:bg-surface-raised-hover flex w-full items-center gap-ds-03 overflow-hidden rounded-ds-md p-ds-03 text-left outline-hidden ring-accent-9 transition-[width,height,padding] hover:text-surface-fg focus-visible:ring-2 active:text-surface-fg disabled:pointer-events-none disabled:opacity-action-disabled group-has-[[data-sidebar=menu-action]]/menu-item:pr-ds-07 aria-disabled:pointer-events-none aria-disabled:opacity-action-disabled data-[active=true]:font-medium data-[active=true]:text-surface-fg data-[state=open]:hover:text-surface-fg group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-ds-03 [&>span:last-child]:truncate [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0", {
+	variants: {
+		variant: {
+			default: "hover:bg-surface-raised-hover hover:text-surface-fg",
+			outline: "hover:bg-surface-raised-hover bg-surface-raised shadow-[0_0_0_1px_var(--color-surface-border)] hover:text-surface-fg hover:shadow-[0_0_0_1px_var(--color-surface-border-strong)]"
+		},
+		size: {
+			md: "h-ds-sm text-ds-md",
+			sm: "h-ds-xs-plus text-ds-sm",
+			lg: "h-ds-lg text-ds-md group-data-[collapsible=icon]:!p-0"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "md"
+	}
+}), q = y(({ asChild: n = !1, isActive: i = !1, variant: o = "default", size: s = "md", tooltip: c, className: l, children: u, ...d }, f) => {
+	let p = n ? e : "button", { isMobile: g, state: v } = A(), y = /* @__PURE__ */ T(p, {
+		ref: f,
+		"data-sidebar": "menu-button",
+		"data-size": s,
+		"data-active": i,
+		className: a(ce({
+			variant: o,
+			size: s
+		}), !n && "relative", l),
+		...d,
+		children: n ? u : /* @__PURE__ */ E(te, { children: [i && /* @__PURE__ */ T(t.span, {
+			layoutId: "sidebar-active-indicator",
+			className: "absolute inset-0 rounded-ds-md bg-accent-2",
+			transition: r.smooth
+		}), /* @__PURE__ */ T("span", {
+			className: "relative z-[1] flex w-full items-center gap-[inherit]",
+			children: u
+		})] })
+	});
+	return c ? (typeof c == "string" && (c = { children: c }), /* @__PURE__ */ E(m, { children: [/* @__PURE__ */ T(_, {
+		asChild: !0,
+		children: y
+	}), /* @__PURE__ */ T(h, {
+		side: "right",
+		align: "center",
+		hidden: v !== "collapsed" || g,
+		...c
+	})] })) : y;
 });
-oe.displayName = "SidebarTrigger";
-const ne = o(
-  ({ className: e, ...a }, t) => {
-    const { toggleSidebar: r } = N();
-    return /* @__PURE__ */ s(
-      "button",
-      {
-        ref: t,
-        "data-sidebar": "rail",
-        "aria-label": "Toggle Sidebar",
-        tabIndex: -1,
-        onClick: r,
-        title: "Toggle Sidebar",
-        className: i(
-          "hover:after:bg-surface-border-strong absolute inset-y-0 z-raised hidden w-4 -translate-x-1/2 transition-colors ease-productive-standard after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
-          "[[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-surface-raised-hover",
-          "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
-          "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
-          e
-        ),
-        ...a
-      }
-    );
-  }
-);
-ne.displayName = "SidebarRail";
-const le = o(
-  ({ className: e, ...a }, t) => /* @__PURE__ */ s(
-    "main",
-    {
-      ref: t,
-      className: i(
-        "relative flex min-h-svh flex-1 flex-col bg-surface-base",
-        "peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-ds-03 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-ds-03 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-ds-xl md:peer-data-[variant=inset]:shadow",
-        e
-      ),
-      ...a
-    }
-  )
-);
-le.displayName = "SidebarInset";
-const ce = o(({ className: e, wrapperClassName: a, ...t }, r) => /* @__PURE__ */ s(
-  H,
-  {
-    ref: r,
-    "data-sidebar": "input",
-    size: "sm",
-    wrapperClassName: i(
-      "bg-surface-raised shadow-none focus-within:ring-2 focus-within:ring-accent-9",
-      a
-    ),
-    className: i("w-full", e),
-    ...t
-  }
-));
-ce.displayName = "SidebarInput";
-const ue = o(
-  ({ className: e, ...a }, t) => /* @__PURE__ */ s(
-    "div",
-    {
-      ref: t,
-      "data-sidebar": "header",
-      className: i("flex flex-col gap-ds-03 p-ds-03", e),
-      ...a
-    }
-  )
-);
-ue.displayName = "SidebarHeader";
-const fe = o(
-  ({ className: e, ...a }, t) => /* @__PURE__ */ s(
-    "div",
-    {
-      ref: t,
-      "data-sidebar": "footer",
-      className: i("flex flex-col gap-ds-03 p-ds-03", e),
-      ...a
-    }
-  )
-);
-fe.displayName = "SidebarFooter";
-const pe = o(({ className: e, ...a }, t) => /* @__PURE__ */ s(
-  K,
-  {
-    ref: t,
-    "data-sidebar": "separator",
-    className: i(
-      "bg-surface-border mx-ds-03 w-auto",
-      e
-    ),
-    ...a
-  }
-));
-pe.displayName = "SidebarSeparator";
-const me = o(
-  ({ className: e, ...a }, t) => /* @__PURE__ */ s(
-    "div",
-    {
-      ref: t,
-      "data-sidebar": "content",
-      className: i(
-        "flex min-h-0 flex-1 flex-col gap-ds-03 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
-        e
-      ),
-      ...a
-    }
-  )
-);
-me.displayName = "SidebarContent";
-const be = o(
-  ({ className: e, ...a }, t) => /* @__PURE__ */ s(
-    "div",
-    {
-      ref: t,
-      "data-sidebar": "group",
-      className: i("relative flex w-full min-w-0 flex-col p-ds-03", e),
-      ...a
-    }
-  )
-);
-be.displayName = "SidebarGroup";
-const ge = o(({ className: e, asChild: a = !1, ...t }, r) => /* @__PURE__ */ s(
-  a ? v : "div",
-  {
-    ref: r,
-    "data-sidebar": "group-label",
-    className: i(
-      "flex h-ds-sm shrink-0 items-center rounded-ds-md px-ds-03 text-ds-sm font-medium text-surface-fg-muted outline-hidden ring-accent-9 transition-[margin,opacity] duration-moderate-02 ease-productive-exit focus-visible:ring-2 [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0",
-      "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
-      e
-    ),
-    ...t
-  }
-));
-ge.displayName = "SidebarGroupLabel";
-const he = o(({ className: e, asChild: a = !1, ...t }, r) => /* @__PURE__ */ s(
-  a ? v : "button",
-  {
-    ref: r,
-    "data-sidebar": "group-action",
-    className: i(
-      "hover:bg-surface-raised-hover absolute right-ds-04 top-ds-04 flex aspect-square w-5 items-center justify-center rounded-ds-md p-0 text-surface-fg outline-hidden ring-accent-9 transition-transform hover:text-surface-fg focus-visible:ring-2 [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0",
-      "after:absolute after:-inset-2 after:md:hidden",
-      "group-data-[collapsible=icon]:hidden",
-      e
-    ),
-    ...t
-  }
-));
-he.displayName = "SidebarGroupAction";
-const ve = o(
-  ({ className: e, ...a }, t) => /* @__PURE__ */ s(
-    "div",
-    {
-      ref: t,
-      "data-sidebar": "group-content",
-      className: i("w-full text-ds-md", e),
-      ...a
-    }
-  )
-);
-ve.displayName = "SidebarGroupContent";
-const xe = o(
-  ({ className: e, ...a }, t) => /* @__PURE__ */ s(
-    "ul",
-    {
-      ref: t,
-      "data-sidebar": "menu",
-      className: i("flex w-full min-w-0 flex-col gap-ds-02", e),
-      ...a
-    }
-  )
-);
-xe.displayName = "SidebarMenu";
-const Se = o(
-  ({ className: e, ...a }, t) => /* @__PURE__ */ s(
-    "li",
-    {
-      ref: t,
-      "data-sidebar": "menu-item",
-      className: i("group/menu-item relative", e),
-      ...a
-    }
-  )
-);
-Se.displayName = "SidebarMenuItem";
-const we = T(
-  "peer/menu-button hover:bg-surface-raised-hover active:bg-accent-2 data-[active=true]:bg-accent-2 data-[state=open]:hover:bg-surface-raised-hover flex w-full items-center gap-ds-03 overflow-hidden rounded-ds-md p-ds-03 text-left outline-hidden ring-accent-9 transition-[width,height,padding] hover:text-surface-fg focus-visible:ring-2 active:text-surface-fg disabled:pointer-events-none disabled:opacity-action-disabled group-has-[[data-sidebar=menu-action]]/menu-item:pr-ds-07 aria-disabled:pointer-events-none aria-disabled:opacity-action-disabled data-[active=true]:font-medium data-[active=true]:text-surface-fg data-[state=open]:hover:text-surface-fg group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-ds-03 [&>span:last-child]:truncate [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "hover:bg-surface-raised-hover hover:text-surface-fg",
-        outline: "hover:bg-surface-raised-hover bg-surface-raised shadow-[0_0_0_1px_var(--color-surface-border)] hover:text-surface-fg hover:shadow-[0_0_0_1px_var(--color-surface-border-strong)]"
-      },
-      size: {
-        md: "h-ds-sm text-ds-md",
-        sm: "h-ds-xs-plus text-ds-sm",
-        lg: "h-ds-lg text-ds-md group-data-[collapsible=icon]:!p-0"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "md"
-    }
-  }
-), Ne = o(
-  ({
-    asChild: e = !1,
-    isActive: a = !1,
-    variant: t = "default",
-    size: r = "md",
-    tooltip: d,
-    className: n,
-    children: c,
-    ...b
-  }, l) => {
-    const f = e ? v : "button", { isMobile: p, state: y } = N(), x = /* @__PURE__ */ s(
-      f,
-      {
-        ref: l,
-        "data-sidebar": "menu-button",
-        "data-size": r,
-        "data-active": a,
-        className: i(we({ variant: t, size: r }), !e && "relative", n),
-        ...b,
-        children: e ? c : /* @__PURE__ */ h(R, { children: [
-          a && /* @__PURE__ */ s(
-            z.span,
-            {
-              layoutId: "sidebar-active-indicator",
-              className: "absolute inset-0 rounded-ds-md bg-accent-2",
-              transition: O.smooth
-            }
-          ),
-          /* @__PURE__ */ s("span", { className: "relative z-[1] flex w-full items-center gap-[inherit]", children: c })
-        ] })
-      }
-    );
-    return d ? (typeof d == "string" && (d = {
-      children: d
-    }), /* @__PURE__ */ h(F, { children: [
-      /* @__PURE__ */ s(P, { asChild: !0, children: x }),
-      /* @__PURE__ */ s(
-        V,
-        {
-          side: "right",
-          align: "center",
-          hidden: y !== "collapsed" || p,
-          ...d
-        }
-      )
-    ] })) : x;
-  }
-);
-Ne.displayName = "SidebarMenuButton";
-const ye = o(({ className: e, asChild: a = !1, showOnHover: t = !1, ...r }, d) => /* @__PURE__ */ s(
-  a ? v : "button",
-  {
-    ref: d,
-    "data-sidebar": "menu-action",
-    className: i(
-      "hover:bg-surface-raised-hover absolute right-ds-02 top-ds-02b flex aspect-square w-5 items-center justify-center rounded-ds-md p-0 text-surface-fg outline-hidden ring-accent-9 transition-transform hover:text-surface-fg focus-visible:ring-2 peer-hover/menu-button:text-surface-fg [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0",
-      "after:absolute after:-inset-2 after:md:hidden",
-      "peer-data-[size=sm]/menu-button:top-1",
-      "peer-data-[size=md]/menu-button:top-ds-02b",
-      "peer-data-[size=lg]/menu-button:top-ds-03",
-      "group-data-[collapsible=icon]:hidden",
-      t && "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-surface-fg md:opacity-0",
-      e
-    ),
-    ...r
-  }
-));
-ye.displayName = "SidebarMenuAction";
-const Me = o(
-  ({ className: e, ...a }, t) => /* @__PURE__ */ s(
-    "div",
-    {
-      ref: t,
-      "data-sidebar": "menu-badge",
-      className: i(
-        "pointer-events-none absolute right-ds-02 flex h-5 min-w-5 select-none items-center justify-center rounded-ds-md px-ds-02 text-ds-sm font-medium tabular-nums text-surface-fg",
-        "peer-hover/menu-button:text-surface-fg peer-data-[active=true]/menu-button:text-surface-fg",
-        "peer-data-[size=sm]/menu-button:top-1",
-        "peer-data-[size=md]/menu-button:top-ds-02b",
-        "peer-data-[size=lg]/menu-button:top-ds-03",
-        "group-data-[collapsible=icon]:hidden",
-        e
-      ),
-      ...a
-    }
-  )
-);
-Me.displayName = "SidebarMenuBadge";
-const _e = o(({ className: e, showIcon: a = !1, ...t }, r) => {
-  const d = k(() => `${Math.floor(Math.random() * 40) + 50}%`, []);
-  return /* @__PURE__ */ h(
-    "div",
-    {
-      ref: r,
-      "data-sidebar": "menu-skeleton",
-      className: i("flex h-ds-sm items-center gap-ds-03 rounded-ds-md px-ds-03", e),
-      ...t,
-      children: [
-        a && /* @__PURE__ */ s(
-          _,
-          {
-            className: "h-ico-sm w-ico-sm rounded-ds-md",
-            "data-sidebar": "menu-skeleton-icon"
-          }
-        ),
-        /* @__PURE__ */ s(
-          _,
-          {
-            className: "h-4 max-w-[--skeleton-width] flex-1",
-            "data-sidebar": "menu-skeleton-text",
-            style: {
-              "--skeleton-width": d
-            }
-          }
-        )
-      ]
-    }
-  );
+q.displayName = "SidebarMenuButton";
+var J = y(({ className: t, asChild: n = !1, showOnHover: r = !1, ...i }, o) => /* @__PURE__ */ T(n ? e : "button", {
+	ref: o,
+	"data-sidebar": "menu-action",
+	className: a("hover:bg-surface-raised-hover absolute right-ds-02 top-ds-02b flex aspect-square w-5 items-center justify-center rounded-ds-md p-0 text-surface-fg outline-hidden ring-accent-9 transition-transform hover:text-surface-fg focus-visible:ring-2 peer-hover/menu-button:text-surface-fg [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0", "after:absolute after:-inset-2 after:md:hidden", "peer-data-[size=sm]/menu-button:top-1", "peer-data-[size=md]/menu-button:top-ds-02b", "peer-data-[size=lg]/menu-button:top-ds-03", "group-data-[collapsible=icon]:hidden", r && "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-surface-fg md:opacity-0", t),
+	...i
+}));
+J.displayName = "SidebarMenuAction";
+var Y = y(({ className: e, ...t }, n) => /* @__PURE__ */ T("div", {
+	ref: n,
+	"data-sidebar": "menu-badge",
+	className: a("pointer-events-none absolute right-ds-02 flex h-5 min-w-5 select-none items-center justify-center rounded-ds-md px-ds-02 text-ds-sm font-medium tabular-nums text-surface-fg", "peer-hover/menu-button:text-surface-fg peer-data-[active=true]/menu-button:text-surface-fg", "peer-data-[size=sm]/menu-button:top-1", "peer-data-[size=md]/menu-button:top-ds-02b", "peer-data-[size=lg]/menu-button:top-ds-03", "group-data-[collapsible=icon]:hidden", e),
+	...t
+}));
+Y.displayName = "SidebarMenuBadge";
+var X = y(({ className: e, showIcon: t = !1, ...n }, r) => {
+	let i = C(() => `${Math.floor(Math.random() * 40) + 50}%`, []);
+	return /* @__PURE__ */ E("div", {
+		ref: r,
+		"data-sidebar": "menu-skeleton",
+		className: a("flex h-ds-sm items-center gap-ds-03 rounded-ds-md px-ds-03", e),
+		...n,
+		children: [t && /* @__PURE__ */ T(l, {
+			className: "h-ico-sm w-ico-sm rounded-ds-md",
+			"data-sidebar": "menu-skeleton-icon"
+		}), /* @__PURE__ */ T(l, {
+			className: "h-4 max-w-[--skeleton-width] flex-1",
+			"data-sidebar": "menu-skeleton-text",
+			style: { "--skeleton-width": i }
+		})]
+	});
 });
-_e.displayName = "SidebarMenuSkeleton";
-const Ce = o(
-  ({ className: e, ...a }, t) => /* @__PURE__ */ s(
-    "ul",
-    {
-      ref: t,
-      "data-sidebar": "menu-sub",
-      className: i(
-        "mx-ds-04 flex min-w-0 translate-x-px flex-col gap-ds-02 border-l border-surface-border px-ds-03 py-ds-01",
-        "group-data-[collapsible=icon]:hidden",
-        e
-      ),
-      ...a
-    }
-  )
-);
-Ce.displayName = "SidebarMenuSub";
-const Ie = o(
-  ({ ...e }, a) => /* @__PURE__ */ s("li", { ref: a, ...e })
-);
-Ie.displayName = "SidebarMenuSubItem";
-const ke = o(({ asChild: e = !1, size: a = "md", isActive: t, className: r, ...d }, n) => /* @__PURE__ */ s(
-  e ? v : "a",
-  {
-    ref: n,
-    "data-sidebar": "menu-sub-button",
-    "data-size": a,
-    "data-active": t,
-    className: i(
-      "hover:bg-surface-raised-hover active:bg-accent-2 flex h-ds-xs-plus min-w-0 -translate-x-px items-center gap-ds-03 overflow-hidden rounded-ds-md px-ds-03 text-surface-fg outline-hidden ring-accent-9 hover:text-surface-fg focus-visible:ring-2 active:text-surface-fg disabled:pointer-events-none disabled:opacity-action-disabled aria-disabled:pointer-events-none aria-disabled:opacity-action-disabled [&>span:last-child]:truncate [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0 [&>svg]:text-surface-fg",
-      "data-[active=true]:bg-accent-2 data-[active=true]:text-surface-fg",
-      a === "sm" && "text-ds-sm",
-      a === "md" && "text-ds-md",
-      "group-data-[collapsible=icon]:hidden",
-      r
-    ),
-    ...d
-  }
-));
-ke.displayName = "SidebarMenuSubButton";
-export {
-  de as Sidebar,
-  me as SidebarContent,
-  fe as SidebarFooter,
-  be as SidebarGroup,
-  he as SidebarGroupAction,
-  ve as SidebarGroupContent,
-  ge as SidebarGroupLabel,
-  ue as SidebarHeader,
-  ce as SidebarInput,
-  le as SidebarInset,
-  xe as SidebarMenu,
-  ye as SidebarMenuAction,
-  Me as SidebarMenuBadge,
-  Ne as SidebarMenuButton,
-  Se as SidebarMenuItem,
-  _e as SidebarMenuSkeleton,
-  Ce as SidebarMenuSub,
-  ke as SidebarMenuSubButton,
-  Ie as SidebarMenuSubItem,
-  re as SidebarProvider,
-  ne as SidebarRail,
-  pe as SidebarSeparator,
-  oe as SidebarTrigger,
-  N as useSidebar
-};
+X.displayName = "SidebarMenuSkeleton";
+var Z = y(({ className: e, ...t }, n) => /* @__PURE__ */ T("ul", {
+	ref: n,
+	"data-sidebar": "menu-sub",
+	className: a("mx-ds-04 flex min-w-0 translate-x-px flex-col gap-ds-02 border-l border-surface-border px-ds-03 py-ds-01", "group-data-[collapsible=icon]:hidden", e),
+	...t
+}));
+Z.displayName = "SidebarMenuSub";
+var Q = y(({ ...e }, t) => /* @__PURE__ */ T("li", {
+	ref: t,
+	...e
+}));
+Q.displayName = "SidebarMenuSubItem";
+var $ = y(({ asChild: t = !1, size: n = "md", isActive: r, className: i, ...o }, s) => /* @__PURE__ */ T(t ? e : "a", {
+	ref: s,
+	"data-sidebar": "menu-sub-button",
+	"data-size": n,
+	"data-active": r,
+	className: a("hover:bg-surface-raised-hover active:bg-accent-2 flex h-ds-xs-plus min-w-0 -translate-x-px items-center gap-ds-03 overflow-hidden rounded-ds-md px-ds-03 text-surface-fg outline-hidden ring-accent-9 hover:text-surface-fg focus-visible:ring-2 active:text-surface-fg disabled:pointer-events-none disabled:opacity-action-disabled aria-disabled:pointer-events-none aria-disabled:opacity-action-disabled [&>span:last-child]:truncate [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0 [&>svg]:text-surface-fg", "data-[active=true]:bg-accent-2 data-[active=true]:text-surface-fg", n === "sm" && "text-ds-sm", n === "md" && "text-ds-md", "group-data-[collapsible=icon]:hidden", i),
+	...o
+}));
+$.displayName = "SidebarMenuSubButton";
+//#endregion
+export { M as Sidebar, B as SidebarContent, R as SidebarFooter, V as SidebarGroup, U as SidebarGroupAction, W as SidebarGroupContent, H as SidebarGroupLabel, L as SidebarHeader, I as SidebarInput, F as SidebarInset, G as SidebarMenu, J as SidebarMenuAction, Y as SidebarMenuBadge, q as SidebarMenuButton, K as SidebarMenuItem, X as SidebarMenuSkeleton, Z as SidebarMenuSub, $ as SidebarMenuSubButton, Q as SidebarMenuSubItem, j as SidebarProvider, P as SidebarRail, z as SidebarSeparator, N as SidebarTrigger, A as useSidebar };