@devalok/shilp-sutra 0.36.0 → 0.37.0-next.0

package/dist/ui/sidebar.js

@@ -1,264 +1,264 @@
 "use client";
 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";
+import { springs as t } from "./lib/motion.js";
+import { t as n } from "../_chunks/vendor-utils.js";
+import { cn as r } from "./lib/utils.js";
+import { Icon as i } from "./icon.js";
+import { useIsMobile as a } from "../hooks/use-mobile.js";
+import { Button as o } from "./button.js";
+import { Skeleton as s } from "./skeleton.js";
+import { Input as c } from "./input.js";
+import { Separator as l } from "./separator.js";
+import { Sheet as u, SheetContent as d } from "./sheet.js";
+import { Tooltip as f, TooltipContent as p, TooltipProvider as m, TooltipTrigger as h } from "./tooltip.js";
+import { createContext as g, forwardRef as _, useCallback as v, useContext as y, useEffect as ee, useMemo as b, useRef as x, useState as S } from "react";
+import { Fragment as C, jsx as w, jsxs as T } from "react/jsx-runtime";
+import { IconLayoutSidebarLeftCollapse as te } from "@tabler/icons-react";
+import { motion as E, useReducedMotion as ne } from "framer-motion";
 //#region src/ui/sidebar.tsx
-var D = "sidebar:state", O = 3600 * 24 * 7, re = "16rem", ie = "18rem", ae = "3rem", oe = "b", k = v(null);
+var re = "sidebar:state", ie = 3600 * 24 * 7, D = "16rem", O = "18rem", ae = "3rem", oe = "b", k = g(null);
 function A() {
-	let e = x(k);
+	let e = y(k);
 	if (!e) throw Error("useSidebar must be used within a SidebarProvider.");
 	return e;
 }
-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), [
+var j = _(({ defaultOpen: e = !0, open: t, onOpenChange: n, className: i, style: o, children: s, ...c }, l) => {
+	let u = a(), [d, f] = S(!1), [p, h] = S(e), g = t ?? p, _ = v((e) => {
+		let t = typeof e == "function" ? e(g) : e;
+		n ? n(t) : h(t), typeof document < "u" && (document.cookie = `${re}=${t}; path=/; max-age=${ie}`);
+	}, [n, g]), y = v(() => u ? f((e) => !e) : _((e) => !e), [
 		u,
 		_,
 		f
 	]);
-	S(() => {
+	ee(() => {
 		let e = (e) => {
-			e.key === oe && (e.metaKey || e.ctrlKey) && (e.preventDefault(), v());
+			e.key === oe && (e.metaKey || e.ctrlKey) && (e.preventDefault(), y());
 		};
 		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
-	}, [v]);
-	let y = h ? "expanded" : "collapsed", x = C(() => ({
-		state: y,
-		open: h,
+	}, [y]);
+	let x = g ? "expanded" : "collapsed", C = b(() => ({
+		state: x,
+		open: g,
 		setOpen: _,
 		isMobile: u,
 		openMobile: d,
 		setOpenMobile: f,
-		toggleSidebar: v
+		toggleSidebar: y
 	}), [
-		y,
-		h,
+		x,
+		g,
 		_,
 		u,
 		d,
 		f,
-		v
+		y
 	]);
-	return /* @__PURE__ */ T(k.Provider, {
-		value: x,
-		children: /* @__PURE__ */ T(g, {
+	return /* @__PURE__ */ w(k.Provider, {
+		value: C,
+		children: /* @__PURE__ */ w(m, {
 			delayDuration: 0,
-			children: /* @__PURE__ */ T("div", {
+			children: /* @__PURE__ */ w("div", {
 				style: {
-					"--sidebar-width": re,
+					"--sidebar-width": D,
 					"--sidebar-width-icon": ae,
-					...i
+					...o
 				},
-				className: a("group/sidebar-wrapper flex min-h-svh has-[[data-variant=inset]]:bg-surface-sunken", r),
+				className: r("group/sidebar-wrapper flex min-h-svh has-[[data-variant=inset]]:bg-surface-sunken", i),
 				ref: l,
 				...c,
-				children: o
+				children: s
 			})
 		})
 	});
 });
 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,
+function se({ side: e, onClose: t, children: n }) {
+	let r = ne(), i = x(null), a = e === "left" ? { right: 0 } : { left: 0 };
+	return /* @__PURE__ */ w(E.div, {
+		ref: i,
 		className: "h-full w-full",
-		drag: a ? !1 : "x",
-		dragConstraints: s,
+		drag: r ? !1 : "x",
+		dragConstraints: a,
 		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();
+		onDragEnd: (n, r) => {
+			let a = i.current?.getBoundingClientRect().width ?? 280;
+			e === "left" ? (r.offset.x < -(a * .3) || r.velocity.x < -500) && t() : (r.offset.x > a * .3 || r.velocity.x > 500) && t();
 		},
-		children: i
+		children: n
 	});
 }
-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", {
+var M = _(({ side: e = "left", variant: t = "sidebar", collapsible: n = "offcanvas", className: i, children: a, ...o }, s) => {
+	let { isMobile: c, state: l, openMobile: f, setOpenMobile: p } = A();
+	return n === "none" ? /* @__PURE__ */ w("aside", {
 		"aria-label": "Sidebar",
-		className: a("flex h-full w-[--sidebar-width] flex-col bg-surface-raised text-surface-fg", r),
+		className: r("flex h-full w-(--sidebar-width) flex-col bg-surface-raised text-surface-fg", i),
 		ref: s,
 		...o,
-		children: i
-	}) : c ? /* @__PURE__ */ T(f, {
-		open: u,
-		onOpenChange: d,
+		children: a
+	}) : c ? /* @__PURE__ */ w(u, {
+		open: f,
+		onOpenChange: p,
 		...o,
-		children: /* @__PURE__ */ T(p, {
+		children: /* @__PURE__ */ w(d, {
 			"data-sidebar": "sidebar",
 			"data-mobile": "true",
-			className: "w-[--sidebar-width] bg-surface-raised p-0 text-surface-fg [&>button]:hidden",
-			style: { "--sidebar-width": ie },
+			className: "w-(--sidebar-width) bg-surface-raised p-0 text-surface-fg [&>button]:hidden",
+			style: { "--sidebar-width": O },
 			side: e,
 			responsive: !1,
-			children: /* @__PURE__ */ T(se, {
+			children: /* @__PURE__ */ w(se, {
 				side: e,
-				onClose: () => d(!1),
-				children: /* @__PURE__ */ T("aside", {
+				onClose: () => p(!1),
+				children: /* @__PURE__ */ w("aside", {
 					"aria-label": "Sidebar",
 					className: "flex h-full w-full flex-col",
-					children: i
+					children: a
 				})
 			})
 		})
-	}) : /* @__PURE__ */ E("div", {
+	}) : /* @__PURE__ */ T("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),
+		children: [/* @__PURE__ */ w("div", { className: r("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)_+_1rem)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)") }), /* @__PURE__ */ w("div", {
+			className: r("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)_+_1rem_+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l", i),
 			...o,
-			children: /* @__PURE__ */ T("aside", {
+			children: /* @__PURE__ */ w("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
+				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-raised",
+				children: a
 			})
 		})]
 	});
 });
 M.displayName = "Sidebar";
-var N = y(({ className: e, onClick: t, ...n }, r) => {
-	let { toggleSidebar: i } = A();
-	return /* @__PURE__ */ E(c, {
-		ref: r,
+var N = _(({ className: e, onClick: t, ...n }, a) => {
+	let { toggleSidebar: s } = A();
+	return /* @__PURE__ */ T(o, {
+		ref: a,
 		"data-sidebar": "trigger",
 		variant: "ghost",
 		size: "icon-md",
-		className: a("h-ds-xs-plus w-ds-xs-plus", e),
+		className: r("h-ds-xs-plus w-ds-xs-plus", e),
 		onClick: (e) => {
-			t?.(e), i();
+			t?.(e), s();
 		},
 		...n,
-		children: [/* @__PURE__ */ T(o, {
-			icon: ne,
+		children: [/* @__PURE__ */ w(i, {
+			icon: te,
 			size: "sm"
-		}), /* @__PURE__ */ T("span", {
+		}), /* @__PURE__ */ w("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", {
+var P = _(({ className: e, ...t }, n) => {
+	let { toggleSidebar: i } = A();
+	return /* @__PURE__ */ w("button", {
 		ref: n,
 		"data-sidebar": "rail",
 		"aria-label": "Toggle Sidebar",
 		tabIndex: -1,
-		onClick: r,
+		onClick: i,
 		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),
+		className: r("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", {
+var F = _(({ className: e, ...t }, n) => /* @__PURE__ */ w("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),
+	className: r("relative flex min-h-svh flex-1 flex-col bg-surface-base", "peer-data-[variant=inset]:min-h-[calc(100svh-1rem)] 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-raised", e),
 	...t
 }));
 F.displayName = "SidebarInset";
-var I = y(({ className: e, wrapperClassName: t, ...n }, r) => /* @__PURE__ */ T(u, {
-	ref: r,
+var I = _(({ className: e, wrapperClassName: t, ...n }, i) => /* @__PURE__ */ w(c, {
+	ref: i,
 	"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),
+	wrapperClassName: r("bg-surface-raised shadow-none focus-within:ring-2 focus-within:ring-accent-9", t),
+	className: r("w-full", e),
 	...n
 }));
 I.displayName = "SidebarInput";
-var L = y(({ className: e, ...t }, n) => /* @__PURE__ */ T("div", {
+var L = _(({ className: e, ...t }, n) => /* @__PURE__ */ w("div", {
 	ref: n,
 	"data-sidebar": "header",
-	className: a("flex flex-col gap-ds-03 p-ds-03", e),
+	className: r("flex flex-col gap-ds-03 p-ds-03", e),
 	...t
 }));
 L.displayName = "SidebarHeader";
-var R = y(({ className: e, ...t }, n) => /* @__PURE__ */ T("div", {
+var R = _(({ className: e, ...t }, n) => /* @__PURE__ */ w("div", {
 	ref: n,
 	"data-sidebar": "footer",
-	className: a("flex flex-col gap-ds-03 p-ds-03", e),
+	className: r("flex flex-col gap-ds-03 p-ds-03", e),
 	...t
 }));
 R.displayName = "SidebarFooter";
-var z = y(({ className: e, ...t }, n) => /* @__PURE__ */ T(d, {
+var z = _(({ className: e, ...t }, n) => /* @__PURE__ */ w(l, {
 	ref: n,
 	"data-sidebar": "separator",
-	className: a("bg-surface-border mx-ds-03 w-auto", e),
+	className: r("bg-surface-border mx-ds-03 w-auto", e),
 	...t
 }));
 z.displayName = "SidebarSeparator";
-var B = y(({ className: e, ...t }, n) => /* @__PURE__ */ T("div", {
+var B = _(({ className: e, ...t }, n) => /* @__PURE__ */ w("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),
+	className: r("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", {
+var V = _(({ className: e, ...t }, n) => /* @__PURE__ */ w("div", {
 	ref: n,
 	"data-sidebar": "group",
-	className: a("relative flex w-full min-w-0 flex-col p-ds-03", e),
+	className: r("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,
+var H = _(({ className: t, asChild: n = !1, ...i }, a) => /* @__PURE__ */ w(n ? e : "div", {
+	ref: a,
 	"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
+	className: r("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),
+	...i
 }));
 H.displayName = "SidebarGroupLabel";
-var U = y(({ className: t, asChild: n = !1, ...r }, i) => /* @__PURE__ */ T(n ? e : "button", {
-	ref: i,
+var U = _(({ className: t, asChild: n = !1, ...i }, a) => /* @__PURE__ */ w(n ? e : "button", {
+	ref: a,
 	"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
+	className: r("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),
+	...i
 }));
 U.displayName = "SidebarGroupAction";
-var W = y(({ className: e, ...t }, n) => /* @__PURE__ */ T("div", {
+var W = _(({ className: e, ...t }, n) => /* @__PURE__ */ w("div", {
 	ref: n,
 	"data-sidebar": "group-content",
-	className: a("w-full text-ds-md", e),
+	className: r("w-full text-ds-md", e),
 	...t
 }));
 W.displayName = "SidebarGroupContent";
-var G = y(({ className: e, ...t }, n) => /* @__PURE__ */ T("ul", {
+var G = _(({ className: e, ...t }, n) => /* @__PURE__ */ w("ul", {
 	ref: n,
 	"data-sidebar": "menu",
-	className: a("flex w-full min-w-0 flex-col gap-ds-02", e),
+	className: r("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", {
+var K = _(({ className: e, ...t }, n) => /* @__PURE__ */ w("li", {
 	ref: n,
 	"data-sidebar": "menu-item",
-	className: a("group/menu-item relative", e),
+	className: r("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", {
+var ce = n("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",
@@ -267,94 +267,94 @@ var ce = i("peer/menu-button hover:bg-surface-raised-hover active:bg-accent-2 da
 		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"
+			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,
+}), q = _(({ asChild: n = !1, isActive: i = !1, variant: a = "default", size: o = "md", tooltip: s, className: c, children: l, ...u }, d) => {
+	let m = n ? e : "button", { isMobile: g, state: _ } = A(), v = /* @__PURE__ */ w(m, {
+		ref: d,
 		"data-sidebar": "menu-button",
-		"data-size": s,
+		"data-size": o,
 		"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, {
+		className: r(ce({
+			variant: a,
+			size: o
+		}), !n && "relative", c),
+		...u,
+		children: n ? l : /* @__PURE__ */ T(C, { children: [i && /* @__PURE__ */ w(E.span, {
 			layoutId: "sidebar-active-indicator",
 			className: "absolute inset-0 rounded-ds-md bg-accent-2",
-			transition: r.smooth
-		}), /* @__PURE__ */ T("span", {
+			transition: t.smooth
+		}), /* @__PURE__ */ w("span", {
 			className: "relative z-[1] flex w-full items-center gap-[inherit]",
-			children: u
+			children: l
 		})] })
 	});
-	return c ? (typeof c == "string" && (c = { children: c }), /* @__PURE__ */ E(m, { children: [/* @__PURE__ */ T(_, {
+	return s ? (typeof s == "string" && (s = { children: s }), /* @__PURE__ */ T(f, { children: [/* @__PURE__ */ w(h, {
 		asChild: !0,
-		children: y
-	}), /* @__PURE__ */ T(h, {
+		children: v
+	}), /* @__PURE__ */ w(p, {
 		side: "right",
 		align: "center",
-		hidden: v !== "collapsed" || g,
-		...c
-	})] })) : y;
+		hidden: _ !== "collapsed" || g,
+		...s
+	})] })) : v;
 });
 q.displayName = "SidebarMenuButton";
-var J = y(({ className: t, asChild: n = !1, showOnHover: r = !1, ...i }, o) => /* @__PURE__ */ T(n ? e : "button", {
+var J = _(({ className: t, asChild: n = !1, showOnHover: i = !1, ...a }, o) => /* @__PURE__ */ w(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
+	className: r("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", i && "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),
+	...a
 }));
 J.displayName = "SidebarMenuAction";
-var Y = y(({ className: e, ...t }, n) => /* @__PURE__ */ T("div", {
+var Y = _(({ className: e, ...t }, n) => /* @__PURE__ */ w("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),
+	className: r("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,
+var X = _(({ className: e, showIcon: t = !1, ...n }, i) => {
+	let a = b(() => `${Math.floor(Math.random() * 40) + 50}%`, []);
+	return /* @__PURE__ */ T("div", {
+		ref: i,
 		"data-sidebar": "menu-skeleton",
-		className: a("flex h-ds-sm items-center gap-ds-03 rounded-ds-md px-ds-03", e),
+		className: r("flex h-ds-sm items-center gap-ds-03 rounded-ds-md px-ds-03", e),
 		...n,
-		children: [t && /* @__PURE__ */ T(l, {
+		children: [t && /* @__PURE__ */ w(s, {
 			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",
+		}), /* @__PURE__ */ w(s, {
+			className: "h-4 max-w-(--skeleton-width) flex-1",
 			"data-sidebar": "menu-skeleton-text",
-			style: { "--skeleton-width": i }
+			style: { "--skeleton-width": a }
 		})]
 	});
 });
 X.displayName = "SidebarMenuSkeleton";
-var Z = y(({ className: e, ...t }, n) => /* @__PURE__ */ T("ul", {
+var Z = _(({ className: e, ...t }, n) => /* @__PURE__ */ w("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),
+	className: r("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", {
+var Q = _(({ ...e }, t) => /* @__PURE__ */ w("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", {
+var $ = _(({ asChild: t = !1, size: n = "md", isActive: i, className: a, ...o }, s) => /* @__PURE__ */ w(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),
+	"data-active": i,
+	className: r("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", a),
 	...o
 }));
 $.displayName = "SidebarMenuSubButton";