tembro 2.0.4 → 2.0.6

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

@@ -5,17 +5,20 @@ import * as r from "react";
 import { MenuIcon as i, XIcon as a } from "lucide-react";
 import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region src/components/layout/app-sidebar.tsx
-var l = 1024;
-function u(e) {
+var l = 1024, u = "18rem", d = "4.75rem", f = "min(88vw, 22rem)";
+function p({ active: t, disabled: n }) {
+	return e("border-[color:transparent] text-foreground/80 hover:border-[color:var(--aui-divider)] hover:bg-[color:color-mix(in_oklch,var(--card),var(--primary)_4%)] hover:text-foreground focus-visible:border-[color:var(--aui-control-border-strong,var(--border))] focus-visible:bg-[color:color-mix(in_oklch,var(--card),var(--primary)_6%)] focus-visible:text-foreground focus-visible:shadow-[0_0_0_3px_color-mix(in_oklch,var(--primary),transparent_86%)]", t && "border-[color:color-mix(in_oklch,var(--primary),transparent_76%)] bg-[color:color-mix(in_oklch,var(--primary),transparent_91%)] text-foreground shadow-[inset_0_1px_0_rgba(255,255,255,0.08)]", n && "hover:border-transparent hover:bg-transparent hover:text-foreground/80");
+}
+function m(e) {
 	return e.items?.some((e) => !e.hidden) ?? !1;
 }
-function d(e) {
-	return e.active ? !0 : e.items?.some((e) => d(e)) ?? !1;
+function h(e) {
+	return e.active ? !0 : e.items?.some((e) => h(e)) ?? !1;
 }
-function f(e, t) {
+function g(e, t) {
 	e.onSelect?.(), t?.(e);
 }
-function p({ item: n, collapsed: r, depth: i, onItemSelect: a, renderLink: l }) {
+function _({ item: n, collapsed: r, depth: i, onItemSelect: a, renderLink: l }) {
 	let u = {
 		"aria-current": n.current ?? (n.active ? "page" : void 0),
 		"aria-disabled": n.disabled || void 0,
@@ -23,7 +26,10 @@ function p({ item: n, collapsed: r, depth: i, onItemSelect: a, renderLink: l })
 		"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", r && "justify-center px-2")
+		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", p({
+			active: n.active,
+			disabled: n.disabled
+		}), r && "justify-center px-2")
 	}, d = /* @__PURE__ */ c(o, { children: [
 		n.icon && /* @__PURE__ */ s("span", {
 			className: "shrink-0",
@@ -37,7 +43,7 @@ function p({ item: n, collapsed: r, depth: i, onItemSelect: a, renderLink: l })
 			className: "shrink-0",
 			children: n.badge
 		})
-	] }), p = (e) => r ? /* @__PURE__ */ s(t, {
+	] }), f = (e) => r ? /* @__PURE__ */ s(t, {
 		content: n.tooltip ?? n.label,
 		side: "right",
 		children: /* @__PURE__ */ s("span", {
@@ -45,7 +51,7 @@ function p({ item: n, collapsed: r, depth: i, onItemSelect: a, renderLink: l })
 			children: e
 		})
 	}) : e;
-	return n.href?.startsWith("/") ? p(l ? /* @__PURE__ */ s(o, { children: l({
+	return n.href?.startsWith("/") ? f(l ? /* @__PURE__ */ s(o, { children: l({
 		item: n,
 		href: n.href,
 		...u,
@@ -54,7 +60,7 @@ function p({ item: n, collapsed: r, depth: i, onItemSelect: a, renderLink: l })
 				e.preventDefault();
 				return;
 			}
-			f(n, a);
+			g(n, a);
 		},
 		children: d
 	}) }) : /* @__PURE__ */ s("a", {
@@ -65,10 +71,10 @@ function p({ item: n, collapsed: r, depth: i, onItemSelect: a, renderLink: l })
 				e.preventDefault();
 				return;
 			}
-			f(n, a);
+			g(n, a);
 		},
 		children: d
-	})) : n.href ? p(/* @__PURE__ */ s("button", {
+	})) : n.href ? f(/* @__PURE__ */ s("button", {
 		type: "button",
 		...u,
 		className: e(u.className, "w-full"),
@@ -76,7 +82,7 @@ function p({ item: n, collapsed: r, depth: i, onItemSelect: a, renderLink: l })
 			if (n.disabled) return;
 			let e = n.href;
 			if (e) {
-				if (f(n, a), e.startsWith("http")) {
+				if (g(n, a), e.startsWith("http")) {
 					window.open(e, "_blank", "noopener,noreferrer");
 					return;
 				}
@@ -84,46 +90,46 @@ function p({ item: n, collapsed: r, depth: i, onItemSelect: a, renderLink: l })
 			}
 		},
 		children: d
-	})) : p(/* @__PURE__ */ s("button", {
+	})) : f(/* @__PURE__ */ s("button", {
 		type: "button",
 		disabled: n.disabled,
 		...u,
 		onClick: () => {
-			n.disabled || f(n, a);
+			n.disabled || g(n, a);
 		},
 		children: d
 	}));
 }
-function m({ items: n, collapsed: i, depth: a, onItemSelect: o, renderLink: l }) {
+function v({ items: n, collapsed: i, depth: a, onItemSelect: o, renderLink: l }) {
 	return n.map((n) => {
 		if (n.hidden) return null;
-		let f = u(n), h = d(n), g = !i && a === 0 && n.sectionLabel;
-		if (!f) return /* @__PURE__ */ c(r.Fragment, { children: [g ? /* @__PURE__ */ s("div", {
+		let u = m(n), d = h(n), f = !i && a === 0 && n.sectionLabel;
+		if (!u) return /* @__PURE__ */ c(r.Fragment, { children: [f ? /* @__PURE__ */ s("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",
 			children: n.sectionLabel
-		}) : null, /* @__PURE__ */ s(p, {
+		}) : null, /* @__PURE__ */ s(_, {
 			item: n,
 			collapsed: i,
 			depth: a,
 			onItemSelect: o,
 			renderLink: l
 		})] }, n.key);
-		let _ = n.defaultExpanded ?? h;
+		let g = n.defaultExpanded ?? d;
 		return /* @__PURE__ */ c("div", {
 			"data-slot": "app-sidebar-group",
 			"data-depth": a,
-			children: [g && /* @__PURE__ */ s("div", {
+			children: [f && /* @__PURE__ */ s("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",
 				children: n.sectionLabel
 			}), /* @__PURE__ */ c("details", {
 				"data-slot": "app-sidebar-group-details",
-				open: _,
+				open: g,
 				className: "group/app-sidebar-details",
 				children: [/* @__PURE__ */ c("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]", i ? "justify-center px-2" : "px-2.5"),
+					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]", p({ active: d }), i ? "justify-center px-2" : "px-2.5"),
 					children: [
 						n.icon ? i ? /* @__PURE__ */ s(t, {
 							content: n.tooltip ?? n.label,
@@ -153,7 +159,7 @@ function m({ items: n, collapsed: i, depth: a, onItemSelect: o, renderLink: l })
 				}), /* @__PURE__ */ s("div", {
 					"data-slot": "app-sidebar-group-content",
 					className: e("mt-1 space-y-1", !i && "pl-3"),
-					children: /* @__PURE__ */ s(m, {
+					children: /* @__PURE__ */ s(v, {
 						items: n.items ?? [],
 						collapsed: i,
 						depth: a + 1,
@@ -165,16 +171,19 @@ function m({ items: n, collapsed: i, depth: a, onItemSelect: o, renderLink: l })
 		}, n.key);
 	});
 }
-function h({ item: n, collapsed: r, onItemSelect: i }) {
+function y({ item: n, collapsed: r, onItemSelect: i }) {
 	let a = /* @__PURE__ */ c("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", r && "justify-center px-2"),
+		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", p({
+			active: n.active,
+			disabled: n.disabled
+		}), r && "justify-center px-2"),
 		disabled: n.disabled,
 		onClick: () => {
-			n.disabled || f(n, i);
+			n.disabled || g(n, i);
 		},
 		children: [
 			n.icon ? /* @__PURE__ */ s("span", {
@@ -200,11 +209,11 @@ function h({ item: n, collapsed: r, onItemSelect: i }) {
 		})
 	}) : a;
 }
-function g({ account: n, collapsed: r, onAfterSelect: i }) {
+function b({ account: n, collapsed: r, onAfterSelect: i }) {
 	let a = /* @__PURE__ */ c("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]", 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]", p({}), 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")) {
@@ -240,45 +249,50 @@ function g({ account: n, collapsed: r, onAfterSelect: i }) {
 		})
 	}) : a;
 }
-function _({ className: n, header: i, footer: l, items: u = [], collapsed: d = !1, collapsedRail: f, railItems: p = [], footerAccount: _, secondaryActions: v = [], footerSecondary: y, tooltipOnCollapsed: b, onItemSelect: x, renderItem: S, renderLink: C, children: w, mobile: T, mobileTitle: E, mobileDescription: D, onRequestClose: O, closeOnSelect: k = !0, ...A }) {
-	let j = u.filter((e) => !e.hidden), M = p.filter((e) => !e.hidden), N = v.filter((e) => !e.hidden), P = r.useCallback((e) => {
-		x?.(e), T && k && O?.();
+function x({ className: n, style: i, header: l, footer: f, items: p = [], collapsed: m = !1, width: h = u, collapsedWidth: g = d, collapsedRail: _, railItems: x = [], footerAccount: S, secondaryActions: C = [], footerSecondary: w, tooltipOnCollapsed: T, onItemSelect: E, renderItem: D, renderLink: O, children: k, mobile: A, mobileTitle: j, mobileDescription: M, onRequestClose: N, closeOnSelect: P = !0, ...F }) {
+	let I = p.filter((e) => !e.hidden), L = x.filter((e) => !e.hidden), R = C.filter((e) => !e.hidden), z = r.useCallback((e) => {
+		E?.(e), A && P && N?.();
 	}, [
-		k,
-		T,
-		x,
-		O
-	]), F = T && (E || D || O);
+		P,
+		A,
+		E,
+		N
+	]), B = A && (j || M || N);
 	return /* @__PURE__ */ c("aside", {
 		"data-slot": "app-sidebar",
-		"data-collapsed": d || void 0,
-		"data-mobile": T || void 0,
+		"data-collapsed": m || void 0,
+		"data-mobile": A || void 0,
 		className: e("flex h-full min-h-0 flex-col overflow-hidden", n),
-		...A,
+		style: {
+			width: m ? g : h,
+			minWidth: m ? g : h,
+			...i
+		},
+		...F,
 		children: [
-			(i || F) && /* @__PURE__ */ s("div", {
+			(l || B) && /* @__PURE__ */ s("div", {
 				"data-slot": "app-sidebar-header",
 				className: "shrink-0 border-b p-3",
 				children: /* @__PURE__ */ c("div", {
 					className: "flex items-start gap-3",
 					children: [/* @__PURE__ */ c("div", {
 						className: "min-w-0 flex-1",
-						children: [i ?? null, F ? /* @__PURE__ */ c("div", {
-							className: e(i && "mt-3"),
-							children: [E ? /* @__PURE__ */ s("p", {
+						children: [l ?? null, B ? /* @__PURE__ */ c("div", {
+							className: e(l && "mt-3"),
+							children: [j ? /* @__PURE__ */ s("p", {
 								className: "text-sm font-semibold text-foreground",
-								children: E
-							}) : null, D ? /* @__PURE__ */ s("p", {
+								children: j
+							}) : null, M ? /* @__PURE__ */ s("p", {
 								className: "mt-1 text-xs leading-5 text-muted-foreground",
-								children: D
+								children: M
 							}) : null]
 						}) : null]
-					}), T && O ? /* @__PURE__ */ s("button", {
+					}), A && N ? /* @__PURE__ */ s("button", {
 						type: "button",
 						"aria-label": "Close navigation",
 						"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: O,
+						onClick: N,
 						children: /* @__PURE__ */ s(a, { className: "size-4" })
 					}) : null]
 				})
@@ -286,10 +300,10 @@ function _({ className: n, header: i, footer: l, items: u = [], collapsed: d = !
 			/* @__PURE__ */ c("nav", {
 				"data-slot": "app-sidebar-nav",
 				className: "min-h-0 flex-1 space-y-1 overflow-y-auto overscroll-contain p-2",
-				children: [w ?? j.map((e) => {
-					if (!S) return null;
-					let n = S(e, { collapsed: d });
-					return !d || !b ? /* @__PURE__ */ s(r.Fragment, { children: n }, e.key) : /* @__PURE__ */ s(t, {
+				children: [k ?? I.map((e) => {
+					if (!D) return null;
+					let n = D(e, { collapsed: m });
+					return !m || !T ? /* @__PURE__ */ s(r.Fragment, { children: n }, e.key) : /* @__PURE__ */ s(t, {
 						content: e.tooltip ?? e.label,
 						side: "right",
 						children: /* @__PURE__ */ s("span", {
@@ -297,156 +311,162 @@ function _({ className: n, header: i, footer: l, items: u = [], collapsed: d = !
 							children: n
 						})
 					}, e.key);
-				}), !w && !S && /* @__PURE__ */ s(m, {
-					items: j,
-					collapsed: d,
+				}), !k && !D && /* @__PURE__ */ s(v, {
+					items: I,
+					collapsed: m,
 					depth: 0,
-					onItemSelect: P,
-					renderLink: C
+					onItemSelect: z,
+					renderLink: O
 				})]
 			}),
-			(_ || y || l || N.length > 0 || d && (f || M.length > 0)) && /* @__PURE__ */ c("div", {
+			(S || w || f || R.length > 0 || m && (_ || L.length > 0)) && /* @__PURE__ */ c("div", {
 				"data-slot": "app-sidebar-footer",
 				className: "shrink-0 border-t p-3",
 				children: [
-					d ? /* @__PURE__ */ c(o, { children: [M.length > 0 ? /* @__PURE__ */ s("div", {
+					m ? /* @__PURE__ */ c(o, { children: [L.length > 0 ? /* @__PURE__ */ s("div", {
 						"data-slot": "app-sidebar-rail-actions",
 						className: "grid gap-2",
-						children: M.map((e) => /* @__PURE__ */ s(h, {
+						children: L.map((e) => /* @__PURE__ */ s(y, {
 							item: e,
 							collapsed: !0,
-							onItemSelect: P
+							onItemSelect: z
 						}, e.key))
-					}) : null, f ? /* @__PURE__ */ s("div", {
+					}) : null, _ ? /* @__PURE__ */ s("div", {
 						"data-slot": "app-sidebar-rail",
-						children: f
+						children: _
 					}) : null] }) : null,
-					!d && _ ? /* @__PURE__ */ s("div", {
+					!m && S ? /* @__PURE__ */ s("div", {
 						"data-slot": "app-sidebar-account-wrap",
 						className: "mb-3",
-						children: /* @__PURE__ */ s(g, {
-							account: _,
+						children: /* @__PURE__ */ s(b, {
+							account: S,
 							collapsed: !1,
 							onAfterSelect: () => {
-								T && k && O?.();
+								A && P && N?.();
 							}
 						})
 					}) : null,
-					!d && N.length > 0 ? /* @__PURE__ */ s("div", {
+					!m && R.length > 0 ? /* @__PURE__ */ s("div", {
 						"data-slot": "app-sidebar-secondary-actions",
 						className: "mb-3 grid gap-2",
-						children: N.map((e) => /* @__PURE__ */ s(h, {
+						children: R.map((e) => /* @__PURE__ */ s(y, {
 							item: e,
 							collapsed: !1,
-							onItemSelect: P
+							onItemSelect: z
 						}, e.key))
 					}) : null,
-					!d && y ? /* @__PURE__ */ s("div", {
+					!m && w ? /* @__PURE__ */ s("div", {
 						"data-slot": "app-sidebar-footer-secondary",
 						className: "mb-3",
-						children: y
+						children: w
 					}) : null,
-					d && _ ? /* @__PURE__ */ s("div", {
+					m && S ? /* @__PURE__ */ s("div", {
 						"data-slot": "app-sidebar-account-wrap",
-						children: /* @__PURE__ */ s(g, {
-							account: _,
+						children: /* @__PURE__ */ s(b, {
+							account: S,
 							collapsed: !0,
 							onAfterSelect: () => {
-								T && k && O?.();
+								A && P && N?.();
 							}
 						})
 					}) : null,
-					!d && l
+					!m && f
 				]
 			})
 		]
 	});
 }
-function v({ className: t, header: a, footer: u, items: d = [], collapsed: f = !1, collapsedRail: p, railItems: m = [], footerAccount: h, secondaryActions: g = [], footerSecondary: v, tooltipOnCollapsed: y = !0, responsive: b = !0, mobileBreakpoint: x = l, mobileOpen: S, defaultMobileOpen: C = !1, onMobileOpenChange: w, mobileTitle: T, mobileDescription: E, mobileToggleLabel: D = "Open navigation", mobileToggleIcon: O, showMobileToggle: k = !0, closeOnSelect: A = !0, mobileToggleClassName: j, mobilePanelClassName: M, mobileOverlayClassName: N, renderMobileToggle: P, onItemSelect: F, renderItem: I, renderLink: L, children: R, ...z }) {
-	let B = b ? n(x) : !1, [V, H] = r.useState(C), U = S ?? V, W = r.useCallback((e) => {
-		S ?? H(e), w?.(e);
-	}, [S, w]);
+function S({ className: t, header: a, footer: p, items: m = [], collapsed: h = !1, width: g = u, collapsedWidth: _ = d, mobileWidth: v = f, collapsedRail: y, railItems: b = [], footerAccount: S, secondaryActions: C = [], footerSecondary: w, tooltipOnCollapsed: T = !0, responsive: E = !0, mobileBreakpoint: D = l, 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 = E ? n(D) : !1, [q, J] = r.useState(k), Y = O ?? q, X = r.useCallback((e) => {
+		O ?? J(e), A?.(e);
+	}, [O, A]);
 	r.useEffect(() => {
-		!B && U && W(!1);
+		!K && Y && X(!1);
 	}, [
-		B,
-		U,
-		W
+		K,
+		Y,
+		X
 	]), r.useEffect(() => {
-		if (!B || !U) return;
+		if (!K || !Y) return;
 		let e = document.body.style.overflow;
 		document.body.style.overflow = "hidden";
 		let t = (e) => {
-			e.key === "Escape" && W(!1);
+			e.key === "Escape" && X(!1);
 		};
 		return window.addEventListener("keydown", t), () => {
 			document.body.style.overflow = e, window.removeEventListener("keydown", t);
 		};
 	}, [
-		B,
-		U,
-		W
+		K,
+		Y,
+		X
 	]);
-	let G = {
+	let Z = {
 		className: t,
 		header: a,
-		footer: u,
-		items: d,
-		collapsed: f,
-		collapsedRail: p,
-		railItems: m,
-		footerAccount: h,
-		secondaryActions: g,
-		footerSecondary: v,
-		tooltipOnCollapsed: y,
-		closeOnSelect: A,
-		onItemSelect: F,
-		renderItem: I,
-		renderLink: L,
-		children: R,
-		...z
+		footer: p,
+		items: m,
+		collapsed: h,
+		width: g,
+		collapsedWidth: _,
+		collapsedRail: y,
+		railItems: b,
+		footerAccount: S,
+		secondaryActions: C,
+		footerSecondary: w,
+		tooltipOnCollapsed: T,
+		closeOnSelect: I,
+		onItemSelect: V,
+		renderItem: H,
+		renderLink: U,
+		children: W,
+		...G
 	};
-	if (!b || !B) return /* @__PURE__ */ s(_, { ...G });
-	let K = /* @__PURE__ */ c("button", {
+	if (!E || !K) return /* @__PURE__ */ s(x, { ...Z });
+	let Q = /* @__PURE__ */ c("button", {
 		type: "button",
-		"aria-label": U ? "Close navigation" : D,
+		"aria-label": Y ? "Close navigation" : N,
 		"data-slot": "app-sidebar-mobile-trigger",
-		"data-state": U ? "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)]", j),
-		onClick: () => W(!U),
+		"data-state": Y ? "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: () => X(!Y),
 		children: [/* @__PURE__ */ s("span", {
 			className: "inline-flex size-8 items-center justify-center rounded-lg bg-[color:var(--aui-page-bg-alt)]",
-			children: O ?? /* @__PURE__ */ s(i, { className: "size-4" })
-		}), /* @__PURE__ */ s("span", { children: U ? "Close navigation" : D })]
+			children: P ?? /* @__PURE__ */ s(i, { className: "size-4" })
+		}), /* @__PURE__ */ s("span", { children: Y ? "Close navigation" : N })]
 	});
-	return /* @__PURE__ */ c(o, { children: [k ? P ? P({
-		open: U,
-		setOpen: W
-	}) : K : null, /* @__PURE__ */ c("div", {
+	return /* @__PURE__ */ c(o, { children: [F ? B ? B({
+		open: Y,
+		setOpen: X
+	}) : Q : null, /* @__PURE__ */ c("div", {
 		"data-slot": "app-sidebar-mobile-root",
 		className: "relative z-40",
 		children: [/* @__PURE__ */ s("button", {
 			type: "button",
 			"aria-label": "Dismiss navigation",
 			"data-slot": "app-sidebar-mobile-overlay",
-			"data-state": U ? "open" : "closed",
-			className: e("fixed inset-0 z-40 bg-black/45 transition-opacity duration-200", U ? "opacity-100" : "pointer-events-none opacity-0", N),
-			onClick: () => W(!1)
-		}), /* @__PURE__ */ s(_, {
-			...G,
+			"data-state": Y ? "open" : "closed",
+			className: e("fixed inset-0 z-40 bg-black/45 transition-opacity duration-200", Y ? "opacity-100" : "pointer-events-none opacity-0", z),
+			onClick: () => X(!1)
+		}), /* @__PURE__ */ s(x, {
+			...Z,
 			mobile: !0,
 			collapsed: !1,
-			mobileTitle: T,
-			mobileDescription: E,
-			onRequestClose: () => W(!1),
-			"data-state": U ? "open" : "closed",
+			mobileTitle: j,
+			mobileDescription: M,
+			onRequestClose: () => X(!1),
+			"data-state": Y ? "open" : "closed",
 			role: "dialog",
 			"aria-modal": "true",
-			"aria-label": typeof T == "string" ? T : "Navigation",
-			className: e("fixed inset-y-0 left-0 z-50 w-[min(88vw,22rem)] max-w-[22rem] border-r border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] shadow-2xl transition-transform duration-200 ease-out", U ? "translate-x-0" : "-translate-x-full", M, t)
+			"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", Y ? "translate-x-0" : "-translate-x-full", R, t),
+			style: {
+				width: v,
+				minWidth: v
+			}
 		})]
 	})] });
 }
-var y = v;
+var C = S;
 //#endregion
-export { v as AppSidebar, y as Sidebar };
+export { S as AppSidebar, C as Sidebar };

package/dist/components/layout/breadcrumbs.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("lucide-react"),i=require("react/jsx-runtime");function a(e,t,n){if(e.length<=t||t<3)return e;let r=e[0],i=Math.max(t-2,1),a=e.slice(-i);return[r,{key:`__collapsed__`,label:n},...a]}function o({className:e,items:o,maxItems:s,collapseLabel:c=`…`,separator:l=(0,i.jsx)(r.ChevronRightIcon,{className:`size-3.5`}),renderLink:u,...d}){let f=n.useMemo(()=>typeof s==`number`?a(o,s,c):o,[c,o,s]);return(0,i.jsx)(`nav`,{"data-slot":`breadcrumbs`,"aria-label":`Breadcrumb`,className:t.cn(`flex min-w-0 items-center gap-1 text-sm text-muted-foreground`,e),...d,children:f.map((e,r)=>{let a=e.key===`__collapsed__`,o=r===f.length-1,s=e.current||o;return(0,i.jsxs)(n.Fragment,{children:[r>0&&(0,i.jsx)(`span`,{className:`shrink-0 opacity-60`,children:l}),a?(0,i.jsx)(`span`,{"data-slot":`breadcrumbs-collapsed`,className:`shrink-0 rounded-full border border-border/65 px-2 py-0.5 text-xs text-muted-foreground`,children:e.label}):e.href&&!s?u?u({item:e,href:e.href,"data-slot":`breadcrumbs-link`,className:`truncate transition-colors hover:text-foreground`,onClick:()=>e.onSelect?.(),children:(0,i.jsxs)(`span`,{className:`inline-flex min-w-0 items-center gap-1.5`,children:[e.icon?(0,i.jsx)(`span`,{className:`shrink-0`,children:e.icon}):null,(0,i.jsx)(`span`,{className:`truncate`,children:e.label})]})}):(0,i.jsx)(`a`,{href:e.href,"data-slot":`breadcrumbs-link`,className:`truncate transition-colors hover:text-foreground`,onClick:()=>e.onSelect?.(),children:(0,i.jsxs)(`span`,{className:`inline-flex min-w-0 items-center gap-1.5`,children:[e.icon?(0,i.jsx)(`span`,{className:`shrink-0`,children:e.icon}):null,(0,i.jsx)(`span`,{className:`truncate`,children:e.label})]})}):(0,i.jsxs)(`span`,{"data-slot":`breadcrumbs-current`,"aria-current":s?e.currentLabel??`page`:void 0,className:t.cn(`inline-flex min-w-0 items-center gap-1.5 truncate`,s&&`font-medium text-foreground`),children:[e.icon?(0,i.jsx)(`span`,{className:`shrink-0`,children:e.icon}):null,(0,i.jsx)(`span`,{className:`truncate`,children:e.label})]})]},e.key)})})}exports.Breadcrumbs=o;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("lucide-react"),i=require("react/jsx-runtime");function a(e,t,n){if(e.length<=t||t<3)return e;let r=e[0],i=Math.max(t-2,1),a=e.slice(-i);return[r,{key:`__collapsed__`,label:n},...a]}function o({className:e,items:o,maxItems:s,collapseLabel:c=`…`,separator:l=(0,i.jsx)(r.ChevronRightIcon,{className:`size-3.5`}),wrap:u=!1,renderLink:d,...f}){let p=n.useMemo(()=>typeof s==`number`?a(o,s,c):o,[c,o,s]);return(0,i.jsx)(`nav`,{"data-slot":`breadcrumbs`,"aria-label":`Breadcrumb`,className:t.cn(`flex min-w-0 items-center gap-1 overflow-x-auto text-sm text-muted-foreground`,u?`flex-wrap`:`whitespace-nowrap`,e),...f,children:p.map((e,r)=>{let a=e.key===`__collapsed__`,o=r===p.length-1,s=e.current||o;return(0,i.jsxs)(n.Fragment,{children:[r>0&&(0,i.jsx)(`span`,{className:`shrink-0 opacity-60`,children:l}),a?(0,i.jsx)(`span`,{"data-slot":`breadcrumbs-collapsed`,className:`shrink-0 rounded-full border border-border/65 px-2 py-0.5 text-xs text-muted-foreground`,children:e.label}):e.href&&!s?d?d({item:e,href:e.href,"data-slot":`breadcrumbs-link`,className:`truncate rounded-[var(--radius-sm)] px-1 py-0.5 transition-colors hover:bg-accent/55 hover:text-foreground`,onClick:()=>e.onSelect?.(),children:(0,i.jsxs)(`span`,{className:`inline-flex min-w-0 items-center gap-1.5`,children:[e.icon?(0,i.jsx)(`span`,{className:`shrink-0`,children:e.icon}):null,(0,i.jsx)(`span`,{className:`truncate`,children:e.label})]})}):(0,i.jsx)(`a`,{href:e.href,"data-slot":`breadcrumbs-link`,className:`truncate rounded-[var(--radius-sm)] px-1 py-0.5 transition-colors hover:bg-accent/55 hover:text-foreground`,onClick:()=>e.onSelect?.(),children:(0,i.jsxs)(`span`,{className:`inline-flex min-w-0 items-center gap-1.5`,children:[e.icon?(0,i.jsx)(`span`,{className:`shrink-0`,children:e.icon}):null,(0,i.jsx)(`span`,{className:`truncate`,children:e.label})]})}):(0,i.jsxs)(`span`,{"data-slot":`breadcrumbs-current`,"aria-current":s?e.currentLabel??`page`:void 0,className:t.cn(`inline-flex min-w-0 items-center gap-1.5 truncate rounded-[var(--radius-sm)] px-1 py-0.5`,s&&`bg-accent/45 font-medium text-foreground`),children:[e.icon?(0,i.jsx)(`span`,{className:`shrink-0`,children:e.icon}):null,(0,i.jsx)(`span`,{className:`truncate`,children:e.label})]})]},e.key)})})}exports.Breadcrumbs=o;

package/dist/components/layout/breadcrumbs.d.ts

@@ -13,10 +13,11 @@ export type BreadcrumbsProps = React.ComponentProps<"nav"> & {
     maxItems?: number;
     collapseLabel?: React.ReactNode;
     separator?: React.ReactNode;
+    wrap?: boolean;
     renderLink?: (props: React.ComponentProps<"a"> & {
         item: BreadcrumbItem;
         [key: `data-${string}`]: string | boolean | undefined;
     }) => React.ReactNode;
 };
-declare function Breadcrumbs({ className, items, maxItems, collapseLabel, separator, renderLink, ...props }: BreadcrumbsProps): React.JSX.Element;
+declare function Breadcrumbs({ className, items, maxItems, collapseLabel, separator, wrap, renderLink, ...props }: BreadcrumbsProps): React.JSX.Element;
 export { Breadcrumbs };

package/dist/components/layout/breadcrumbs.js

@@ -15,8 +15,8 @@ function a(e, t, n) {
 		...a
 	];
 }
-function o({ className: o, items: s, maxItems: c, collapseLabel: l = "…", separator: u = /* @__PURE__ */ r(n, { className: "size-3.5" }), renderLink: d, ...f }) {
-	let p = t.useMemo(() => typeof c == "number" ? a(s, c, l) : s, [
+function o({ className: o, items: s, maxItems: c, collapseLabel: l = "…", separator: u = /* @__PURE__ */ r(n, { className: "size-3.5" }), wrap: d = !1, renderLink: f, ...p }) {
+	let m = t.useMemo(() => typeof c == "number" ? a(s, c, l) : s, [
 		l,
 		s,
 		c
@@ -24,10 +24,10 @@ function o({ className: o, items: s, maxItems: c, collapseLabel: l = "…", sepa
 	return /* @__PURE__ */ r("nav", {
 		"data-slot": "breadcrumbs",
 		"aria-label": "Breadcrumb",
-		className: e("flex min-w-0 items-center gap-1 text-sm text-muted-foreground", o),
-		...f,
-		children: p.map((n, a) => {
-			let o = n.key === "__collapsed__", s = a === p.length - 1, c = n.current || s;
+		className: e("flex min-w-0 items-center gap-1 overflow-x-auto text-sm text-muted-foreground", d ? "flex-wrap" : "whitespace-nowrap", o),
+		...p,
+		children: m.map((n, a) => {
+			let o = n.key === "__collapsed__", s = a === m.length - 1, c = n.current || s;
 			return /* @__PURE__ */ i(t.Fragment, { children: [a > 0 && /* @__PURE__ */ r("span", {
 				className: "shrink-0 opacity-60",
 				children: u
@@ -35,11 +35,11 @@ function o({ className: o, items: s, maxItems: c, collapseLabel: l = "…", sepa
 				"data-slot": "breadcrumbs-collapsed",
 				className: "shrink-0 rounded-full border border-border/65 px-2 py-0.5 text-xs text-muted-foreground",
 				children: n.label
-			}) : n.href && !c ? d ? d({
+			}) : n.href && !c ? f ? f({
 				item: n,
 				href: n.href,
 				"data-slot": "breadcrumbs-link",
-				className: "truncate transition-colors hover:text-foreground",
+				className: "truncate rounded-[var(--radius-sm)] px-1 py-0.5 transition-colors hover:bg-accent/55 hover:text-foreground",
 				onClick: () => n.onSelect?.(),
 				children: /* @__PURE__ */ i("span", {
 					className: "inline-flex min-w-0 items-center gap-1.5",
@@ -54,7 +54,7 @@ function o({ className: o, items: s, maxItems: c, collapseLabel: l = "…", sepa
 			}) : /* @__PURE__ */ r("a", {
 				href: n.href,
 				"data-slot": "breadcrumbs-link",
-				className: "truncate transition-colors hover:text-foreground",
+				className: "truncate rounded-[var(--radius-sm)] px-1 py-0.5 transition-colors hover:bg-accent/55 hover:text-foreground",
 				onClick: () => n.onSelect?.(),
 				children: /* @__PURE__ */ i("span", {
 					className: "inline-flex min-w-0 items-center gap-1.5",
@@ -69,7 +69,7 @@ function o({ className: o, items: s, maxItems: c, collapseLabel: l = "…", sepa
 			}) : /* @__PURE__ */ i("span", {
 				"data-slot": "breadcrumbs-current",
 				"aria-current": c ? n.currentLabel ?? "page" : void 0,
-				className: e("inline-flex min-w-0 items-center gap-1.5 truncate", c && "font-medium text-foreground"),
+				className: e("inline-flex min-w-0 items-center gap-1.5 truncate rounded-[var(--radius-sm)] px-1 py-0.5", c && "bg-accent/45 font-medium text-foreground"),
 				children: [n.icon ? /* @__PURE__ */ r("span", {
 					className: "shrink-0",
 					children: n.icon

package/dist/components/layout/index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./app-sidebar.cjs"),t=require("./breadcrumbs.cjs"),n=require("./page-container.cjs"),r=require("./section.cjs"),i=require("./sidebar-nav.cjs"),a=require("./sticky-footer-bar.cjs"),o=require("./app-header.cjs"),s=require("./stat-card.cjs");exports.AppHeader=o.AppHeader,exports.AppSidebar=e.AppSidebar,exports.Breadcrumbs=t.Breadcrumbs,exports.PageContainer=n.PageContainer,exports.Section=r.Section,exports.Sidebar=e.Sidebar,exports.SidebarNav=i.SidebarNav,exports.SplitLayout=r.SplitLayout,exports.StatCard=s.StatCard,exports.StickyFooterBar=a.StickyFooterBar,exports.Toolbar=r.Toolbar;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./app-sidebar.cjs"),t=require("./breadcrumbs.cjs"),n=require("./page-container.cjs"),r=require("./section.cjs"),i=require("./sidebar-nav.cjs"),a=require("./sticky-footer-bar.cjs"),o=require("./stat-card.cjs"),s=require("./app-header.cjs");exports.AppHeader=s.AppHeader,exports.AppSidebar=e.AppSidebar,exports.Breadcrumbs=t.Breadcrumbs,exports.PageContainer=n.PageContainer,exports.Section=r.Section,exports.Sidebar=e.Sidebar,exports.SidebarNav=i.SidebarNav,exports.SplitLayout=r.SplitLayout,exports.StatCard=o.StatCard,exports.StickyFooterBar=a.StickyFooterBar,exports.Toolbar=r.Toolbar;

package/dist/components/layout/index.js

@@ -4,6 +4,6 @@ import { PageContainer as r } from "./page-container.js";
 import { Section as i, SplitLayout as a, Toolbar as o } from "./section.js";
 import { SidebarNav as s } from "./sidebar-nav.js";
 import { StickyFooterBar as c } from "./sticky-footer-bar.js";
-import { AppHeader as l } from "./app-header.js";
-import { StatCard as u } from "./stat-card.js";
-export { l as AppHeader, e as AppSidebar, n as Breadcrumbs, r as PageContainer, i as Section, t as Sidebar, s as SidebarNav, a as SplitLayout, u as StatCard, c as StickyFooterBar, o as Toolbar };
+import { StatCard as l } from "./stat-card.js";
+import { AppHeader as u } from "./app-header.js";
+export { u as AppHeader, e as AppSidebar, n as Breadcrumbs, r as PageContainer, i as Section, t as Sidebar, s as SidebarNav, a as SplitLayout, l as StatCard, c as StickyFooterBar, o as Toolbar };