tembro 3.1.1 → 3.1.5

package/dist/src/components/layout/app-sidebar.js

@@ -2,218 +2,231 @@
 import { cn as e } from "../../lib/utils.js";
 import { Tooltip as t } from "../ui/tooltip/index.js";
 import { useIsMobile as n } from "../../hooks/use-is-mobile.js";
-import * as r from "react";
-import { ChevronRightIcon as i, MenuIcon as a, XIcon as o } from "lucide-react";
-import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+import { ControllableDetails as r } from "./controllable-details.js";
+import * as i from "react";
+import { ChevronRightIcon as a, MenuIcon as o, XIcon as s } from "lucide-react";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/components/layout/app-sidebar.tsx
-var u = 1024, d = "18rem", f = "4.75rem", p = "min(88vw, 22rem)";
-function m({ active: t, disabled: n }) {
-	return e("border border-transparent bg-transparent text-[color:color-mix(in_oklch,var(--sidebar-foreground),transparent_18%)] hover:border-[color:var(--aui-sidebar-item-active-border)] hover:bg-[color:var(--aui-sidebar-item-hover-bg)] hover:text-[color:var(--sidebar-foreground)] focus-visible:border-[color:var(--sidebar-ring)] focus-visible:bg-[color:var(--aui-sidebar-item-hover-bg)] focus-visible:text-[color:var(--sidebar-foreground)] focus-visible:shadow-[0_0_0_3px_color-mix(in_oklch,var(--sidebar-ring),transparent_82%)]", t && "border-[color:var(--aui-sidebar-item-active-border)] bg-[color:var(--aui-sidebar-item-active-bg)] text-[color:var(--aui-sidebar-item-active-fg)] shadow-[inset_0_1px_0_rgba(255,255,255,0.08),0_10px_24px_color-mix(in_oklch,var(--sidebar-primary),transparent_88%)]", n && "hover:border-transparent hover:bg-transparent hover:text-[color:color-mix(in_oklch,var(--sidebar-foreground),transparent_18%)]");
+var d = 1024, f = "18rem", p = "4.75rem", m = "min(88vw, 22rem)";
+function h({ active: t, disabled: n }) {
+	return e("border border-transparent bg-transparent text-[color:color-mix(in_oklch,var(--sidebar-foreground),transparent_6%)] hover:border-[color:var(--aui-sidebar-item-active-border)] hover:bg-[color:var(--aui-sidebar-item-hover-bg)] hover:text-[color:var(--sidebar-foreground)] focus-visible:border-[color:var(--sidebar-ring)] focus-visible:bg-[color:var(--aui-sidebar-item-hover-bg)] focus-visible:text-[color:var(--sidebar-foreground)] focus-visible:shadow-[0_0_0_3px_color-mix(in_oklch,var(--sidebar-ring),transparent_82%)]", t && "border-[color:var(--aui-sidebar-item-active-border)] bg-[color:var(--aui-sidebar-item-active-bg)] text-[color:var(--aui-sidebar-item-active-fg)] shadow-[inset_0_1px_0_rgba(255,255,255,0.08),0_10px_24px_color-mix(in_oklch,var(--sidebar-primary),transparent_88%)]", n && "hover:border-transparent hover:bg-transparent hover:text-[color:color-mix(in_oklch,var(--sidebar-foreground),transparent_6%)]");
 }
-function h(e) {
+function g(e) {
 	return e.items?.some((e) => !e.hidden) ?? !1;
 }
-function g(e) {
-	return e.active ? !0 : e.items?.some((e) => g(e)) ?? !1;
+function _(e) {
+	return e.active ? !0 : e.items?.some((e) => _(e)) ?? !1;
 }
-function _(e, t) {
+function v(e, t) {
 	e.onSelect?.(), t?.(e);
 }
-function v({ item: n, collapsed: r, depth: i, onItemSelect: a, renderLink: o }) {
-	let u = {
+function y({ item: n, collapsed: r, depth: i, itemSize: a, activeIndicator: o, onItemSelect: s, renderLink: d }) {
+	let f = {
 		"aria-current": n.current ?? (n.active ? "page" : void 0),
 		"aria-disabled": n.disabled || void 0,
 		"data-slot": "app-sidebar-item",
 		"data-active": n.active || void 0,
 		"data-disabled": n.disabled || void 0,
 		"data-depth": String(i),
-		className: e("flex min-h-9 items-center gap-2 rounded-lg border border-transparent px-2.5 text-sm font-medium outline-none transition-[background-color,border-color,color,box-shadow] data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50", m({
+		"data-size": a,
+		"data-active-indicator": o,
+		className: e("flex items-center gap-2 border border-transparent text-sm font-medium outline-none transition-[background-color,border-color,color,box-shadow] data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50", h({
 			active: n.active,
 			disabled: n.disabled
 		}), r && "justify-center px-2")
-	}, d = /* @__PURE__ */ l(s, { children: [
-		n.icon && /* @__PURE__ */ c("span", {
+	}, p = /* @__PURE__ */ u(c, { children: [
+		n.icon && /* @__PURE__ */ l("span", {
 			className: "shrink-0",
 			children: n.icon
 		}),
-		!r && /* @__PURE__ */ c("span", {
+		!r && /* @__PURE__ */ l("span", {
 			className: "min-w-0 flex-1 truncate",
 			children: n.label
 		}),
-		!r && n.badge && /* @__PURE__ */ c("span", {
+		!r && n.badge && /* @__PURE__ */ l("span", {
 			className: "shrink-0",
 			children: n.badge
 		})
-	] }), f = (e) => r ? /* @__PURE__ */ c(t, {
+	] }), m = (e) => r ? /* @__PURE__ */ l(t, {
 		content: n.tooltip ?? n.label,
 		side: "right",
-		children: /* @__PURE__ */ c("span", {
+		children: /* @__PURE__ */ l("span", {
 			className: "block",
 			children: e
 		})
 	}) : e;
-	return n.href?.startsWith("/") ? f(o ? /* @__PURE__ */ c(s, { children: o({
+	return n.href?.startsWith("/") ? m(d ? /* @__PURE__ */ l(c, { children: d({
 		item: n,
 		href: n.href,
-		...u,
+		...f,
 		onClick: (e) => {
 			if (n.disabled) {
 				e.preventDefault();
 				return;
 			}
-			_(n, a);
+			v(n, s);
 		},
-		children: d
-	}) }) : /* @__PURE__ */ c("a", {
+		children: p
+	}) }) : /* @__PURE__ */ l("a", {
 		href: n.href,
-		...u,
+		...f,
 		onClick: (e) => {
 			if (n.disabled) {
 				e.preventDefault();
 				return;
 			}
-			_(n, a);
+			v(n, s);
 		},
-		children: d
-	})) : n.href ? f(/* @__PURE__ */ c("button", {
+		children: p
+	})) : n.href ? m(/* @__PURE__ */ l("button", {
 		type: "button",
-		...u,
-		className: e(u.className, "w-full"),
+		...f,
+		className: e(f.className, "w-full"),
 		onClick: () => {
 			if (n.disabled) return;
 			let e = n.href;
 			if (e) {
-				if (_(n, a), e.startsWith("http")) {
+				if (v(n, s), e.startsWith("http")) {
 					window.open(e, "_blank", "noopener,noreferrer");
 					return;
 				}
 				window.location.assign(e);
 			}
 		},
-		children: d
-	})) : f(/* @__PURE__ */ c("button", {
+		children: p
+	})) : m(/* @__PURE__ */ l("button", {
 		type: "button",
 		disabled: n.disabled,
-		...u,
+		...f,
 		onClick: () => {
-			n.disabled || _(n, a);
+			n.disabled || v(n, s);
 		},
-		children: d
+		children: p
 	}));
 }
-function y({ items: n, collapsed: a, depth: o, onItemSelect: s, renderLink: u }) {
+function b({ items: n, collapsed: o, depth: s, showSectionLabels: c, itemSize: d, activeIndicator: f, onItemSelect: p, renderLink: m }) {
 	return n.map((n) => {
 		if (n.hidden) return null;
-		let d = h(n), f = g(n), p = !a && o === 0 && n.sectionLabel;
-		if (!d) return /* @__PURE__ */ l(r.Fragment, { children: [p ? /* @__PURE__ */ c("div", {
+		let v = g(n), x = _(n), S = c && !o && s === 0 && n.sectionLabel;
+		if (!v) return /* @__PURE__ */ u(i.Fragment, { children: [S ? /* @__PURE__ */ l("div", {
 			"data-slot": "app-sidebar-group-label",
-			className: "px-2.5 pb-1 pt-3 text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground first:pt-0",
+			className: "px-2.5 pb-1 pt-3 text-[11px] font-semibold uppercase tracking-[0.14em] text-[color:color-mix(in_oklch,var(--sidebar-foreground),transparent_42%)] first:pt-0",
 			children: n.sectionLabel
-		}) : null, /* @__PURE__ */ c(v, {
+		}) : null, /* @__PURE__ */ l(y, {
 			item: n,
-			collapsed: a,
-			depth: o,
-			onItemSelect: s,
-			renderLink: u
+			collapsed: o,
+			depth: s,
+			itemSize: d,
+			activeIndicator: f,
+			onItemSelect: p,
+			renderLink: m
 		})] }, n.key);
-		let _ = n.defaultExpanded ?? f;
-		return /* @__PURE__ */ l("div", {
+		let C = n.defaultExpanded ?? x;
+		return /* @__PURE__ */ u("div", {
 			"data-slot": "app-sidebar-group",
-			"data-depth": o,
-			children: [p && /* @__PURE__ */ c("div", {
+			"data-depth": s,
+			children: [S && /* @__PURE__ */ l("div", {
 				"data-slot": "app-sidebar-group-label",
-				className: "px-2.5 pb-1 pt-3 text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground first:pt-0",
+				className: "px-2.5 pb-1 pt-3 text-[11px] font-semibold uppercase tracking-[0.14em] text-[color:color-mix(in_oklch,var(--sidebar-foreground),transparent_42%)] first:pt-0",
 				children: n.sectionLabel
-			}), /* @__PURE__ */ l("details", {
+			}), /* @__PURE__ */ u(r, {
 				"data-slot": "app-sidebar-group-details",
-				open: _,
+				open: n.expanded,
+				defaultOpen: C,
 				className: "group/app-sidebar-details",
-				children: [/* @__PURE__ */ l("summary", {
+				onOpenChange: n.onExpandedChange,
+				children: [/* @__PURE__ */ u("summary", {
 					"data-slot": "app-sidebar-group-trigger",
-					className: e("flex min-h-9 list-none items-center gap-2 rounded-lg border border-transparent text-sm font-medium outline-none transition-[background-color,border-color,color,box-shadow]", m({ active: f }), a ? "justify-center px-2" : "px-2.5"),
+					"data-size": d,
+					"data-active": x || void 0,
+					"data-active-indicator": f,
+					className: e("flex list-none items-center gap-2 border border-transparent text-sm font-medium outline-none transition-[background-color,border-color,color,box-shadow]", h({ active: x }), o ? "justify-center px-2" : "px-2.5"),
 					children: [
-						n.icon ? a ? /* @__PURE__ */ c(t, {
+						n.icon ? o ? /* @__PURE__ */ l(t, {
 							content: n.tooltip ?? n.label,
 							side: "right",
-							children: /* @__PURE__ */ c("span", {
+							children: /* @__PURE__ */ l("span", {
 								className: "shrink-0",
 								children: n.icon
 							})
-						}) : /* @__PURE__ */ c("span", {
+						}) : /* @__PURE__ */ l("span", {
 							className: "shrink-0",
 							children: n.icon
 						}) : null,
-						!a && /* @__PURE__ */ c("span", {
+						!o && /* @__PURE__ */ l("span", {
 							className: "min-w-0 flex-1 truncate",
 							children: n.label
 						}),
-						!a && n.badge && /* @__PURE__ */ c("span", {
+						!o && n.badge && /* @__PURE__ */ l("span", {
 							className: "shrink-0",
 							children: n.badge
 						}),
-						!a && /* @__PURE__ */ c(i, {
+						!o && /* @__PURE__ */ l(a, {
 							"data-slot": "app-sidebar-group-chevron",
-							className: "ml-auto size-3.5 shrink-0 text-muted-foreground transition-transform group-open/app-sidebar-details:rotate-90"
+							className: "ml-auto size-3.5 shrink-0 text-[color:color-mix(in_oklch,var(--sidebar-foreground),transparent_42%)] transition-transform group-open/app-sidebar-details:rotate-90"
 						})
 					]
-				}), /* @__PURE__ */ c("div", {
+				}), /* @__PURE__ */ l("div", {
 					"data-slot": "app-sidebar-group-content",
-					className: e("mt-1 space-y-1", !a && "pl-3"),
-					children: /* @__PURE__ */ c(y, {
+					className: e("mt-1 flex flex-col gap-1", !o && "pl-3"),
+					children: /* @__PURE__ */ l(b, {
 						items: n.items ?? [],
-						collapsed: a,
-						depth: o + 1,
-						onItemSelect: s,
-						renderLink: u
+						collapsed: o,
+						depth: s + 1,
+						showSectionLabels: c,
+						itemSize: d,
+						activeIndicator: f,
+						onItemSelect: p,
+						renderLink: m
 					})
 				})]
 			})]
 		}, n.key);
 	});
 }
-function b({ item: n, collapsed: r, onItemSelect: i }) {
-	let a = /* @__PURE__ */ l("button", {
+function x({ item: n, collapsed: r, onItemSelect: i }) {
+	let a = /* @__PURE__ */ u("button", {
 		type: "button",
 		"data-slot": "app-sidebar-action",
 		"data-active": n.active || void 0,
 		"data-disabled": n.disabled || void 0,
-		className: e("flex min-h-9 items-center gap-2 rounded-lg border border-transparent px-2.5 text-sm font-medium outline-none transition-[background-color,border-color,color,box-shadow] data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50", m({
+		className: e("flex min-h-9 items-center gap-2 rounded-lg border border-transparent px-2.5 text-sm font-medium outline-none transition-[background-color,border-color,color,box-shadow] data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50", h({
 			active: n.active,
 			disabled: n.disabled
 		}), r && "justify-center px-2"),
 		disabled: n.disabled,
 		onClick: () => {
-			n.disabled || _(n, i);
+			n.disabled || v(n, i);
 		},
 		children: [
-			n.icon ? /* @__PURE__ */ c("span", {
+			n.icon ? /* @__PURE__ */ l("span", {
 				className: "shrink-0",
 				children: n.icon
 			}) : null,
-			r ? null : /* @__PURE__ */ c("span", {
+			r ? null : /* @__PURE__ */ l("span", {
 				className: "min-w-0 flex-1 truncate",
 				children: n.label
 			}),
-			!r && n.badge ? /* @__PURE__ */ c("span", {
+			!r && n.badge ? /* @__PURE__ */ l("span", {
 				className: "shrink-0",
 				children: n.badge
 			}) : null
 		]
 	});
-	return r ? /* @__PURE__ */ c(t, {
+	return r ? /* @__PURE__ */ l(t, {
 		content: n.tooltip ?? n.label,
 		side: "right",
-		children: /* @__PURE__ */ c("span", {
+		children: /* @__PURE__ */ l("span", {
 			className: "block",
 			children: a
 		})
 	}) : a;
 }
-function x({ account: n, collapsed: r, onAfterSelect: i }) {
-	let a = /* @__PURE__ */ l("button", {
+function S({ account: n, collapsed: r, onAfterSelect: i }) {
+	let a = /* @__PURE__ */ u("button", {
 		type: "button",
 		"data-slot": "app-sidebar-account",
-		className: e("flex w-full items-center gap-3 rounded-[min(var(--radius-xl),16px)] border border-transparent text-left transition-[background-color,border-color,color,box-shadow]", m({}), r ? "justify-center px-2 py-2.5" : "px-3 py-2.5"),
+		className: e("flex w-full items-center gap-3 rounded-[min(var(--radius-xl),16px)] border border-transparent text-left transition-[background-color,border-color,color,box-shadow]", h({}), r ? "justify-center px-2 py-2.5" : "px-3 py-2.5"),
 		onClick: () => {
 			if (n.onSelect?.(), i?.(), n.href) {
 				if (n.href.startsWith("http")) {
@@ -223,243 +236,252 @@ function x({ account: n, collapsed: r, onAfterSelect: i }) {
 				window.location.assign(n.href);
 			}
 		},
-		children: [n.avatar ? /* @__PURE__ */ c("span", {
+		children: [n.avatar ? /* @__PURE__ */ l("span", {
 			"data-slot": "app-sidebar-account-avatar",
 			className: "inline-flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-full border border-border/65 bg-muted/45 text-sm font-semibold",
 			children: n.avatar
-		}) : null, r ? null : /* @__PURE__ */ l("span", {
+		}) : null, r ? null : /* @__PURE__ */ u("span", {
 			className: "min-w-0 flex-1",
-			children: [/* @__PURE__ */ c("span", {
+			children: [/* @__PURE__ */ l("span", {
 				"data-slot": "app-sidebar-account-label",
-				className: "block truncate text-sm font-semibold text-foreground",
+				className: "block truncate text-sm font-semibold text-[color:var(--sidebar-foreground)]",
 				children: n.label
-			}), n.description ? /* @__PURE__ */ c("span", {
+			}), n.description ? /* @__PURE__ */ l("span", {
 				"data-slot": "app-sidebar-account-description",
-				className: "block truncate text-xs text-muted-foreground",
+				className: "block truncate text-xs text-[color:color-mix(in_oklch,var(--sidebar-foreground),transparent_36%)]",
 				children: n.description
 			}) : null]
 		})]
 	});
-	return r ? /* @__PURE__ */ c(t, {
+	return r ? /* @__PURE__ */ l(t, {
 		content: n.tooltip ?? n.label,
 		side: "right",
-		children: /* @__PURE__ */ c("span", {
+		children: /* @__PURE__ */ l("span", {
 			className: "block",
 			children: a
 		})
 	}) : a;
 }
-function S({ className: n, style: i, header: a, footer: u, items: p = [], collapsed: m = !1, width: h = d, collapsedWidth: g = f, collapsedRail: _, railItems: v = [], footerAccount: S, secondaryActions: C = [], footerSecondary: w, footerClassName: T, tooltipOnCollapsed: E, onItemSelect: D, renderItem: O, renderLink: k, children: A, mobile: j, mobileTitle: M, mobileDescription: N, onRequestClose: P, closeOnSelect: F = !0, ...I }) {
-	let L = p.filter((e) => !e.hidden), R = v.filter((e) => !e.hidden), z = C.filter((e) => !e.hidden), B = r.useCallback((e) => {
-		D?.(e), j && F && P?.();
+function C({ className: n, style: r, header: a, footer: o, items: d = [], collapsed: m = !1, width: h = f, collapsedWidth: g = p, collapsedRail: _, railItems: v = [], footerAccount: y, secondaryActions: C = [], footerSecondary: w, footerClassName: T, tooltipOnCollapsed: E, showSectionLabels: D = !0, itemSize: O = "md", activeIndicator: k = "bar", navigationLabel: A = "Primary navigation", onItemSelect: j, renderItem: M, renderLink: N, children: P, mobile: F, mobileTitle: I, mobileDescription: L, mobileCloseLabel: R = "Close navigation", onRequestClose: z, closeOnSelect: B = !0, ...V }) {
+	let H = d.filter((e) => !e.hidden), U = v.filter((e) => !e.hidden), W = C.filter((e) => !e.hidden), G = i.useCallback((e) => {
+		j?.(e), F && B && z?.();
 	}, [
+		B,
 		F,
 		j,
-		D,
-		P
-	]), V = j && (M || N || P);
-	return /* @__PURE__ */ l("aside", {
+		z
+	]), K = F && (I || L || z);
+	return /* @__PURE__ */ u("aside", {
 		"data-slot": "app-sidebar",
 		"data-collapsed": m || void 0,
-		"data-mobile": j || void 0,
+		"data-mobile": F || void 0,
 		className: e("flex h-full min-h-0 flex-col overflow-hidden", n),
 		style: {
 			width: m ? g : h,
 			minWidth: m ? g : h,
-			...i
+			...r
 		},
-		...I,
+		...V,
 		children: [
-			(a || V) && /* @__PURE__ */ c("div", {
+			(a || K) && /* @__PURE__ */ l("div", {
 				"data-slot": "app-sidebar-header",
 				className: "shrink-0 border-b p-3",
-				children: /* @__PURE__ */ l("div", {
+				children: /* @__PURE__ */ u("div", {
 					className: "flex items-start gap-3",
-					children: [/* @__PURE__ */ l("div", {
+					children: [/* @__PURE__ */ u("div", {
 						className: "min-w-0 flex-1",
-						children: [a ?? null, V ? /* @__PURE__ */ l("div", {
+						children: [a ?? null, K ? /* @__PURE__ */ u("div", {
 							className: e(a && "mt-3"),
-							children: [M ? /* @__PURE__ */ c("p", {
+							children: [I ? /* @__PURE__ */ l("p", {
 								className: "text-sm font-semibold text-foreground",
-								children: M
-							}) : null, N ? /* @__PURE__ */ c("p", {
+								children: I
+							}) : null, L ? /* @__PURE__ */ l("p", {
 								className: "mt-1 text-xs leading-5 text-muted-foreground",
-								children: N
+								children: L
 							}) : null]
 						}) : null]
-					}), j && P ? /* @__PURE__ */ c("button", {
+					}), F && z ? /* @__PURE__ */ l("button", {
 						type: "button",
-						"aria-label": "Close navigation",
+						"aria-label": R,
 						"data-slot": "app-sidebar-mobile-close",
 						className: "inline-flex size-9 shrink-0 items-center justify-center rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] text-[color:var(--aui-page-foreground)] transition hover:bg-[color:var(--aui-control-bg)]",
-						onClick: P,
-						children: /* @__PURE__ */ c(o, { className: "size-4" })
+						onClick: z,
+						children: /* @__PURE__ */ l(s, { className: "size-4" })
 					}) : null]
 				})
 			}),
-			/* @__PURE__ */ l("nav", {
+			/* @__PURE__ */ u("nav", {
 				"data-slot": "app-sidebar-nav",
-				className: "min-h-0 flex-1 space-y-1 overflow-y-auto overscroll-contain p-2",
-				children: [A ?? L.map((e) => {
-					if (!O) return null;
-					let n = O(e, { collapsed: m });
-					return !m || !E ? /* @__PURE__ */ c(r.Fragment, { children: n }, e.key) : /* @__PURE__ */ c(t, {
+				"aria-label": A,
+				className: "flex min-h-0 flex-1 flex-col gap-1 overflow-y-auto overscroll-contain p-2",
+				children: [P ?? H.map((e) => {
+					if (!M) return null;
+					let n = M(e, { collapsed: m });
+					return !m || !E ? /* @__PURE__ */ l(i.Fragment, { children: n }, e.key) : /* @__PURE__ */ l(t, {
 						content: e.tooltip ?? e.label,
 						side: "right",
-						children: /* @__PURE__ */ c("span", {
+						children: /* @__PURE__ */ l("span", {
 							className: "block",
 							children: n
 						})
 					}, e.key);
-				}), !A && !O && /* @__PURE__ */ c(y, {
-					items: L,
+				}), !P && !M && /* @__PURE__ */ l(b, {
+					items: H,
 					collapsed: m,
 					depth: 0,
-					onItemSelect: B,
-					renderLink: k
+					showSectionLabels: D,
+					itemSize: O,
+					activeIndicator: k,
+					onItemSelect: G,
+					renderLink: N
 				})]
 			}),
-			(S || w || u || z.length > 0 || m && (_ || R.length > 0)) && /* @__PURE__ */ l("div", {
+			(y || w || o || W.length > 0 || m && (_ || U.length > 0)) && /* @__PURE__ */ u("div", {
 				"data-slot": "app-sidebar-footer",
 				className: e("shrink-0 border-t p-3", T),
 				children: [
-					m ? /* @__PURE__ */ l(s, { children: [R.length > 0 ? /* @__PURE__ */ c("div", {
+					m ? /* @__PURE__ */ u(c, { children: [U.length > 0 ? /* @__PURE__ */ l("div", {
 						"data-slot": "app-sidebar-rail-actions",
 						className: "grid gap-2",
-						children: R.map((e) => /* @__PURE__ */ c(b, {
+						children: U.map((e) => /* @__PURE__ */ l(x, {
 							item: e,
 							collapsed: !0,
-							onItemSelect: B
+							onItemSelect: G
 						}, e.key))
-					}) : null, _ ? /* @__PURE__ */ c("div", {
+					}) : null, _ ? /* @__PURE__ */ l("div", {
 						"data-slot": "app-sidebar-rail",
 						children: _
 					}) : null] }) : null,
-					!m && S ? /* @__PURE__ */ c("div", {
+					!m && y ? /* @__PURE__ */ l("div", {
 						"data-slot": "app-sidebar-account-wrap",
 						className: "mb-3",
-						children: /* @__PURE__ */ c(x, {
-							account: S,
+						children: /* @__PURE__ */ l(S, {
+							account: y,
 							collapsed: !1,
 							onAfterSelect: () => {
-								j && F && P?.();
+								F && B && z?.();
 							}
 						})
 					}) : null,
-					!m && z.length > 0 ? /* @__PURE__ */ c("div", {
+					!m && W.length > 0 ? /* @__PURE__ */ l("div", {
 						"data-slot": "app-sidebar-secondary-actions",
 						className: "mb-3 grid gap-2",
-						children: z.map((e) => /* @__PURE__ */ c(b, {
+						children: W.map((e) => /* @__PURE__ */ l(x, {
 							item: e,
 							collapsed: !1,
-							onItemSelect: B
+							onItemSelect: G
 						}, e.key))
 					}) : null,
-					!m && w ? /* @__PURE__ */ c("div", {
+					!m && w ? /* @__PURE__ */ l("div", {
 						"data-slot": "app-sidebar-footer-secondary",
 						className: "mb-3",
 						children: w
 					}) : null,
-					m && S ? /* @__PURE__ */ c("div", {
+					m && y ? /* @__PURE__ */ l("div", {
 						"data-slot": "app-sidebar-account-wrap",
-						children: /* @__PURE__ */ c(x, {
-							account: S,
+						children: /* @__PURE__ */ l(S, {
+							account: y,
 							collapsed: !0,
 							onAfterSelect: () => {
-								j && F && P?.();
+								F && B && z?.();
 							}
 						})
 					}) : null,
-					!m && u
+					!m && o
 				]
 			})
 		]
 	});
 }
-function C({ className: t, header: i, footer: o, items: m = [], collapsed: h = !1, width: g = d, collapsedWidth: _ = f, mobileWidth: v = p, collapsedRail: y, railItems: b = [], footerAccount: x, secondaryActions: C = [], footerSecondary: w, tooltipOnCollapsed: T = !0, responsive: E = !0, mobileBreakpoint: D = u, mobileOpen: O, defaultMobileOpen: k = !1, onMobileOpenChange: A, mobileTitle: j, mobileDescription: M, mobileToggleLabel: N = "Open navigation", mobileToggleIcon: P, showMobileToggle: F = !0, closeOnSelect: I = !0, mobileToggleClassName: L, mobilePanelClassName: R, mobileOverlayClassName: z, renderMobileToggle: B, onItemSelect: V, renderItem: H, renderLink: U, children: W, ...G }) {
-	let K = n(D), q = E && K, [J, Y] = r.useState(k), X = O ?? J, Z = r.useCallback((e) => {
-		O ?? Y(e), A?.(e);
-	}, [O, A]);
-	r.useEffect(() => {
-		!q && X && Z(!1);
+function w({ className: t, header: r, footer: a, items: s = [], collapsed: h = !1, width: g = f, collapsedWidth: _ = p, mobileWidth: v = m, collapsedRail: y, railItems: b = [], footerAccount: x, secondaryActions: S = [], footerSecondary: w, tooltipOnCollapsed: T = !0, showSectionLabels: E = !0, itemSize: D = "md", activeIndicator: O = "bar", navigationLabel: k = "Primary navigation", responsive: A = !0, mobileBreakpoint: j = d, mobileOpen: M, defaultMobileOpen: N = !1, onMobileOpenChange: P, mobileTitle: F, mobileDescription: I, mobileToggleLabel: L = "Open navigation", mobileCloseLabel: R = "Close navigation", mobileToggleIcon: z, showMobileToggle: B = !0, closeOnSelect: V = !0, mobileToggleClassName: H, mobilePanelClassName: U, mobileOverlayClassName: W, renderMobileToggle: G, onItemSelect: K, renderItem: q, renderLink: J, children: Y, ...ee }) {
+	let te = n(j), X = A && te, [ne, re] = i.useState(N), Z = M ?? ne, Q = i.useCallback((e) => {
+		M ?? re(e), P?.(e);
+	}, [M, P]);
+	i.useEffect(() => {
+		!X && Z && Q(!1);
 	}, [
-		q,
 		X,
-		Z
-	]), r.useEffect(() => {
-		if (!q || !X) return;
+		Z,
+		Q
+	]), i.useEffect(() => {
+		if (!X || !Z) return;
 		let e = document.body.style.overflow;
 		document.body.style.overflow = "hidden";
 		let t = (e) => {
-			e.key === "Escape" && Z(!1);
+			e.key === "Escape" && Q(!1);
 		};
 		return window.addEventListener("keydown", t), () => {
 			document.body.style.overflow = e, window.removeEventListener("keydown", t);
 		};
 	}, [
-		q,
 		X,
-		Z
+		Z,
+		Q
 	]);
-	let Q = {
+	let $ = {
 		className: t,
-		header: i,
-		footer: o,
-		items: m,
+		header: r,
+		footer: a,
+		items: s,
 		collapsed: h,
 		width: g,
 		collapsedWidth: _,
 		collapsedRail: y,
 		railItems: b,
 		footerAccount: x,
-		secondaryActions: C,
+		secondaryActions: S,
 		footerSecondary: w,
 		tooltipOnCollapsed: T,
-		closeOnSelect: I,
-		onItemSelect: V,
-		renderItem: H,
-		renderLink: U,
-		children: W,
-		...G
+		showSectionLabels: E,
+		itemSize: D,
+		activeIndicator: O,
+		navigationLabel: k,
+		mobileCloseLabel: R,
+		closeOnSelect: V,
+		onItemSelect: K,
+		renderItem: q,
+		renderLink: J,
+		children: Y,
+		...ee
 	};
-	if (!E || !q) return /* @__PURE__ */ c(S, { ...Q });
-	let $ = /* @__PURE__ */ l("button", {
+	if (!A || !X) return /* @__PURE__ */ l(C, { ...$ });
+	let ie = /* @__PURE__ */ u("button", {
 		type: "button",
-		"aria-label": X ? "Close navigation" : N,
+		"aria-label": Z ? R : L,
 		"data-slot": "app-sidebar-mobile-trigger",
-		"data-state": X ? "open" : "closed",
-		className: e("inline-flex min-h-10 items-center gap-2 rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] px-3 text-sm font-medium text-[color:var(--aui-page-foreground)] shadow-sm transition hover:bg-[color:var(--aui-page-bg-alt)]", L),
-		onClick: () => Z(!X),
-		children: [/* @__PURE__ */ c("span", {
+		"data-state": Z ? "open" : "closed",
+		className: e("inline-flex min-h-10 items-center gap-2 rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] px-3 text-sm font-medium text-[color:var(--aui-page-foreground)] shadow-sm transition hover:bg-[color:var(--aui-page-bg-alt)]", H),
+		onClick: () => Q(!Z),
+		children: [/* @__PURE__ */ l("span", {
 			className: "inline-flex size-8 items-center justify-center rounded-lg bg-[color:var(--aui-page-bg-alt)]",
-			children: P ?? /* @__PURE__ */ c(a, { className: "size-4" })
-		}), /* @__PURE__ */ c("span", { children: X ? "Close navigation" : N })]
+			children: z ?? /* @__PURE__ */ l(o, { className: "size-4" })
+		}), /* @__PURE__ */ l("span", { children: Z ? R : L })]
 	});
-	return /* @__PURE__ */ l(s, { children: [F ? B ? B({
-		open: X,
-		setOpen: Z
-	}) : $ : null, /* @__PURE__ */ l("div", {
+	return /* @__PURE__ */ u(c, { children: [B ? G ? G({
+		open: Z,
+		setOpen: Q
+	}) : ie : null, /* @__PURE__ */ u("div", {
 		"data-slot": "app-sidebar-mobile-root",
 		className: "relative z-40",
-		children: [/* @__PURE__ */ c("button", {
+		children: [/* @__PURE__ */ l("button", {
 			type: "button",
 			"aria-label": "Dismiss navigation",
 			"data-slot": "app-sidebar-mobile-overlay",
-			"data-state": X ? "open" : "closed",
-			className: e("fixed inset-0 z-40 bg-black/45 transition-opacity duration-200", X ? "opacity-100" : "pointer-events-none opacity-0", z),
-			onClick: () => Z(!1)
-		}), /* @__PURE__ */ c(S, {
-			...Q,
+			"data-state": Z ? "open" : "closed",
+			className: e("fixed inset-0 z-40 bg-black/45 transition-opacity duration-200", Z ? "opacity-100" : "pointer-events-none opacity-0", W),
+			onClick: () => Q(!1)
+		}), /* @__PURE__ */ l(C, {
+			...$,
 			mobile: !0,
 			collapsed: !1,
-			mobileTitle: j,
-			mobileDescription: M,
-			onRequestClose: () => Z(!1),
-			"data-state": X ? "open" : "closed",
+			mobileTitle: F,
+			mobileDescription: I,
+			onRequestClose: () => Q(!1),
+			"data-state": Z ? "open" : "closed",
 			role: "dialog",
 			"aria-modal": "true",
-			"aria-label": typeof j == "string" ? j : "Navigation",
-			className: e("fixed inset-y-0 left-0 z-50 max-w-[22rem] border-r border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] shadow-2xl transition-transform duration-200 ease-out", X ? "translate-x-0" : "-translate-x-full", R, t),
+			"aria-label": typeof F == "string" ? F : "Navigation",
+			className: e("fixed inset-y-0 left-0 z-50 max-w-[22rem] border-r border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] shadow-2xl transition-transform duration-200 ease-out", Z ? "translate-x-0" : "-translate-x-full", U, t),
 			style: {
 				width: v,
 				minWidth: v
@@ -468,4 +490,4 @@ function C({ className: t, header: i, footer: o, items: m = [], collapsed: h = !
 	})] });
 }
 //#endregion
-export { C as Sidebar };
+export { w as Sidebar };