tembro 2.0.1 → 2.0.2

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

@@ -1,45 +1,51 @@
 import { cn as e } from "../../lib/utils.js";
 import { Tooltip as t } from "../ui/tooltip/index.js";
-import * as n from "react";
-import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+import { useIsMobile as n } from "../../hooks/use-is-mobile.js";
+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
-function o(e) {
+var l = 1024;
+function u(e) {
 	return e.items?.some((e) => !e.hidden) ?? !1;
 }
-function s(e) {
-	return e.active ? !0 : e.items?.some((e) => s(e)) ?? !1;
+function d(e) {
+	return e.active ? !0 : e.items?.some((e) => d(e)) ?? !1;
 }
-function c({ item: n, collapsed: o, depth: s, onItemSelect: c, renderLink: l }) {
+function f(e, t) {
+	e.onSelect?.(), t?.(e);
+}
+function p({ 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,
 		"data-slot": "app-sidebar-item",
 		"data-active": n.active || void 0,
 		"data-disabled": n.disabled || void 0,
-		"data-depth": String(s),
-		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", o && "justify-center px-2")
-	}, d = /* @__PURE__ */ a(r, { children: [
-		n.icon && /* @__PURE__ */ i("span", {
+		"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")
+	}, d = /* @__PURE__ */ c(o, { children: [
+		n.icon && /* @__PURE__ */ s("span", {
 			className: "shrink-0",
 			children: n.icon
 		}),
-		!o && /* @__PURE__ */ i("span", {
+		!r && /* @__PURE__ */ s("span", {
 			className: "min-w-0 flex-1 truncate",
 			children: n.label
 		}),
-		!o && n.badge && /* @__PURE__ */ i("span", {
+		!r && n.badge && /* @__PURE__ */ s("span", {
 			className: "shrink-0",
 			children: n.badge
 		})
-	] }), f = (e) => o ? /* @__PURE__ */ i(t, {
+	] }), p = (e) => r ? /* @__PURE__ */ s(t, {
 		content: n.tooltip ?? n.label,
 		side: "right",
-		children: /* @__PURE__ */ i("span", {
+		children: /* @__PURE__ */ s("span", {
 			className: "block",
 			children: e
 		})
 	}) : e;
-	return n.href?.startsWith("/") ? f(l ? /* @__PURE__ */ i(r, { children: l({
+	return n.href?.startsWith("/") ? p(l ? /* @__PURE__ */ s(o, { children: l({
 		item: n,
 		href: n.href,
 		...u,
@@ -48,10 +54,10 @@ function c({ item: n, collapsed: o, depth: s, onItemSelect: c, renderLink: l })
 				e.preventDefault();
 				return;
 			}
-			n.onSelect?.(), c?.(n);
+			f(n, a);
 		},
 		children: d
-	}) }) : /* @__PURE__ */ i("a", {
+	}) }) : /* @__PURE__ */ s("a", {
 		href: n.href,
 		...u,
 		onClick: (e) => {
@@ -59,10 +65,10 @@ function c({ item: n, collapsed: o, depth: s, onItemSelect: c, renderLink: l })
 				e.preventDefault();
 				return;
 			}
-			n.onSelect?.(), c?.(n);
+			f(n, a);
 		},
 		children: d
-	})) : n.href ? f(/* @__PURE__ */ i("button", {
+	})) : n.href ? p(/* @__PURE__ */ s("button", {
 		type: "button",
 		...u,
 		className: e(u.className, "w-full"),
@@ -70,7 +76,7 @@ function c({ item: n, collapsed: o, depth: s, onItemSelect: c, renderLink: l })
 			if (n.disabled) return;
 			let e = n.href;
 			if (e) {
-				if (n.onSelect?.(), c?.(n), e.startsWith("http")) {
+				if (f(n, a), e.startsWith("http")) {
 					window.open(e, "_blank", "noopener,noreferrer");
 					return;
 				}
@@ -78,89 +84,89 @@ function c({ item: n, collapsed: o, depth: s, onItemSelect: c, renderLink: l })
 			}
 		},
 		children: d
-	})) : f(/* @__PURE__ */ i("button", {
+	})) : p(/* @__PURE__ */ s("button", {
 		type: "button",
 		disabled: n.disabled,
 		...u,
 		onClick: () => {
-			n.onSelect?.(), c?.(n);
+			n.disabled || f(n, a);
 		},
 		children: d
 	}));
 }
-function l({ items: r, collapsed: u, depth: d, onItemSelect: f, renderLink: p }) {
-	return r.map((r) => {
-		if (r.hidden) return null;
-		let m = o(r), h = s(r), g = !u && d === 0 && r.sectionLabel;
-		if (!m) return /* @__PURE__ */ a(n.Fragment, { children: [g ? /* @__PURE__ */ i("div", {
+function m({ 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", {
 			"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: r.sectionLabel
-		}) : null, /* @__PURE__ */ i(c, {
-			item: r,
-			collapsed: u,
-			depth: d,
-			onItemSelect: f,
-			renderLink: p
-		})] }, r.key);
-		let _ = r.defaultExpanded ?? h;
-		return /* @__PURE__ */ a("div", {
+			children: n.sectionLabel
+		}) : null, /* @__PURE__ */ s(p, {
+			item: n,
+			collapsed: i,
+			depth: a,
+			onItemSelect: o,
+			renderLink: l
+		})] }, n.key);
+		let _ = n.defaultExpanded ?? h;
+		return /* @__PURE__ */ c("div", {
 			"data-slot": "app-sidebar-group",
-			"data-depth": d,
-			children: [g && /* @__PURE__ */ i("div", {
+			"data-depth": a,
+			children: [g && /* @__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: r.sectionLabel
-			}), /* @__PURE__ */ a("details", {
+				children: n.sectionLabel
+			}), /* @__PURE__ */ c("details", {
 				"data-slot": "app-sidebar-group-details",
 				open: _,
 				className: "group/app-sidebar-details",
-				children: [/* @__PURE__ */ a("summary", {
+				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]", u ? "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]", i ? "justify-center px-2" : "px-2.5"),
 					children: [
-						r.icon ? u ? /* @__PURE__ */ i(t, {
-							content: r.tooltip ?? r.label,
+						n.icon ? i ? /* @__PURE__ */ s(t, {
+							content: n.tooltip ?? n.label,
 							side: "right",
-							children: /* @__PURE__ */ i("span", {
+							children: /* @__PURE__ */ s("span", {
 								className: "shrink-0",
-								children: r.icon
+								children: n.icon
 							})
-						}) : /* @__PURE__ */ i("span", {
+						}) : /* @__PURE__ */ s("span", {
 							className: "shrink-0",
-							children: r.icon
+							children: n.icon
 						}) : null,
-						!u && /* @__PURE__ */ i("span", {
+						!i && /* @__PURE__ */ s("span", {
 							className: "min-w-0 flex-1 truncate",
-							children: r.label
+							children: n.label
 						}),
-						!u && r.badge && /* @__PURE__ */ i("span", {
+						!i && n.badge && /* @__PURE__ */ s("span", {
 							className: "shrink-0",
-							children: r.badge
+							children: n.badge
 						}),
-						!u && /* @__PURE__ */ i("span", {
+						!i && /* @__PURE__ */ s("span", {
 							"data-slot": "app-sidebar-group-chevron",
 							className: "ml-auto text-xs text-muted-foreground transition-transform group-open/app-sidebar-details:rotate-90",
 							children: "›"
 						})
 					]
-				}), /* @__PURE__ */ i("div", {
+				}), /* @__PURE__ */ s("div", {
 					"data-slot": "app-sidebar-group-content",
-					className: e("mt-1 space-y-1", !u && "pl-3"),
-					children: /* @__PURE__ */ i(l, {
-						items: r.items ?? [],
-						collapsed: u,
-						depth: d + 1,
-						onItemSelect: f,
-						renderLink: p
+					className: e("mt-1 space-y-1", !i && "pl-3"),
+					children: /* @__PURE__ */ s(m, {
+						items: n.items ?? [],
+						collapsed: i,
+						depth: a + 1,
+						onItemSelect: o,
+						renderLink: l
 					})
 				})]
 			})]
-		}, r.key);
+		}, n.key);
 	});
 }
-function u({ item: n, collapsed: r, onItemSelect: o }) {
-	let s = /* @__PURE__ */ a("button", {
+function h({ item: n, collapsed: r, onItemSelect: i }) {
+	let a = /* @__PURE__ */ c("button", {
 		type: "button",
 		"data-slot": "app-sidebar-action",
 		"data-active": n.active || void 0,
@@ -168,39 +174,39 @@ function u({ item: n, collapsed: r, onItemSelect: o }) {
 		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"),
 		disabled: n.disabled,
 		onClick: () => {
-			n.disabled || (n.onSelect?.(), o?.(n));
+			n.disabled || f(n, i);
 		},
 		children: [
-			n.icon ? /* @__PURE__ */ i("span", {
+			n.icon ? /* @__PURE__ */ s("span", {
 				className: "shrink-0",
 				children: n.icon
 			}) : null,
-			r ? null : /* @__PURE__ */ i("span", {
+			r ? null : /* @__PURE__ */ s("span", {
 				className: "min-w-0 flex-1 truncate",
 				children: n.label
 			}),
-			!r && n.badge ? /* @__PURE__ */ i("span", {
+			!r && n.badge ? /* @__PURE__ */ s("span", {
 				className: "shrink-0",
 				children: n.badge
 			}) : null
 		]
 	});
-	return r ? /* @__PURE__ */ i(t, {
+	return r ? /* @__PURE__ */ s(t, {
 		content: n.tooltip ?? n.label,
 		side: "right",
-		children: /* @__PURE__ */ i("span", {
+		children: /* @__PURE__ */ s("span", {
 			className: "block",
-			children: s
+			children: a
 		})
-	}) : s;
+	}) : a;
 }
-function d({ account: n, collapsed: r }) {
-	let o = /* @__PURE__ */ a("button", {
+function g({ 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"),
 		onClick: () => {
-			if (n.onSelect?.(), n.href) {
+			if (n.onSelect?.(), i?.(), n.href) {
 				if (n.href.startsWith("http")) {
 					window.open(n.href, "_blank", "noopener,noreferrer");
 					return;
@@ -208,118 +214,239 @@ function d({ account: n, collapsed: r }) {
 				window.location.assign(n.href);
 			}
 		},
-		children: [n.avatar ? /* @__PURE__ */ i("span", {
+		children: [n.avatar ? /* @__PURE__ */ s("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__ */ a("span", {
+		}) : null, r ? null : /* @__PURE__ */ c("span", {
 			className: "min-w-0 flex-1",
-			children: [/* @__PURE__ */ i("span", {
+			children: [/* @__PURE__ */ s("span", {
 				"data-slot": "app-sidebar-account-label",
 				className: "block truncate text-sm font-semibold text-foreground",
 				children: n.label
-			}), n.description ? /* @__PURE__ */ i("span", {
+			}), n.description ? /* @__PURE__ */ s("span", {
 				"data-slot": "app-sidebar-account-description",
 				className: "block truncate text-xs text-muted-foreground",
 				children: n.description
 			}) : null]
 		})]
 	});
-	return r ? /* @__PURE__ */ i(t, {
+	return r ? /* @__PURE__ */ s(t, {
 		content: n.tooltip ?? n.label,
 		side: "right",
-		children: /* @__PURE__ */ i("span", {
+		children: /* @__PURE__ */ s("span", {
 			className: "block",
-			children: o
+			children: a
 		})
-	}) : o;
+	}) : a;
 }
-function f({ className: o, header: s, footer: c, items: f = [], collapsed: p = !1, collapsedRail: m, railItems: h = [], footerAccount: g, secondaryActions: _ = [], footerSecondary: v, tooltipOnCollapsed: y = !0, onItemSelect: b, renderItem: x, renderLink: S, children: C, ...w }) {
-	let T = f.filter((e) => !e.hidden), E = h.filter((e) => !e.hidden), D = _.filter((e) => !e.hidden);
-	return /* @__PURE__ */ a("aside", {
+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?.();
+	}, [
+		k,
+		T,
+		x,
+		O
+	]), F = T && (E || D || O);
+	return /* @__PURE__ */ c("aside", {
 		"data-slot": "app-sidebar",
-		"data-collapsed": p || void 0,
-		className: e("flex h-full min-h-0 flex-col overflow-hidden", o),
-		...w,
+		"data-collapsed": d || void 0,
+		"data-mobile": T || void 0,
+		className: e("flex h-full min-h-0 flex-col overflow-hidden", n),
+		...A,
 		children: [
-			s && /* @__PURE__ */ i("div", {
+			(i || F) && /* @__PURE__ */ s("div", {
 				"data-slot": "app-sidebar-header",
 				className: "shrink-0 border-b p-3",
-				children: s
+				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", {
+								className: "text-sm font-semibold text-foreground",
+								children: E
+							}) : null, D ? /* @__PURE__ */ s("p", {
+								className: "mt-1 text-xs leading-5 text-muted-foreground",
+								children: D
+							}) : null]
+						}) : null]
+					}), T && O ? /* @__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,
+						children: /* @__PURE__ */ s(a, { className: "size-4" })
+					}) : null]
+				})
 			}),
-			/* @__PURE__ */ a("nav", {
+			/* @__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: [C ?? T.map((e) => {
-					if (!x) return null;
-					let r = x(e, { collapsed: p });
-					return !p || !y ? /* @__PURE__ */ i(n.Fragment, { children: r }, e.key) : /* @__PURE__ */ i(t, {
+				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, {
 						content: e.tooltip ?? e.label,
 						side: "right",
-						children: /* @__PURE__ */ i("span", {
+						children: /* @__PURE__ */ s("span", {
 							className: "block",
-							children: r
+							children: n
 						})
 					}, e.key);
-				}), !C && !x && /* @__PURE__ */ i(l, {
-					items: T,
-					collapsed: p,
+				}), !w && !S && /* @__PURE__ */ s(m, {
+					items: j,
+					collapsed: d,
 					depth: 0,
-					onItemSelect: b,
-					renderLink: S
+					onItemSelect: P,
+					renderLink: C
 				})]
 			}),
-			(g || v || c || D.length > 0 || p && (m || E.length > 0)) && /* @__PURE__ */ a("div", {
+			(_ || y || l || N.length > 0 || d && (f || M.length > 0)) && /* @__PURE__ */ c("div", {
 				"data-slot": "app-sidebar-footer",
 				className: "shrink-0 border-t p-3",
 				children: [
-					p ? /* @__PURE__ */ a(r, { children: [E.length > 0 ? /* @__PURE__ */ i("div", {
+					d ? /* @__PURE__ */ c(o, { children: [M.length > 0 ? /* @__PURE__ */ s("div", {
 						"data-slot": "app-sidebar-rail-actions",
 						className: "grid gap-2",
-						children: E.map((e) => /* @__PURE__ */ i(u, {
+						children: M.map((e) => /* @__PURE__ */ s(h, {
 							item: e,
 							collapsed: !0,
-							onItemSelect: b
+							onItemSelect: P
 						}, e.key))
-					}) : null, m ? /* @__PURE__ */ i("div", {
+					}) : null, f ? /* @__PURE__ */ s("div", {
 						"data-slot": "app-sidebar-rail",
-						children: m
+						children: f
 					}) : null] }) : null,
-					!p && g ? /* @__PURE__ */ i("div", {
+					!d && _ ? /* @__PURE__ */ s("div", {
 						"data-slot": "app-sidebar-account-wrap",
 						className: "mb-3",
-						children: /* @__PURE__ */ i(d, {
-							account: g,
-							collapsed: !1
+						children: /* @__PURE__ */ s(g, {
+							account: _,
+							collapsed: !1,
+							onAfterSelect: () => {
+								T && k && O?.();
+							}
 						})
 					}) : null,
-					!p && D.length > 0 ? /* @__PURE__ */ i("div", {
+					!d && N.length > 0 ? /* @__PURE__ */ s("div", {
 						"data-slot": "app-sidebar-secondary-actions",
 						className: "mb-3 grid gap-2",
-						children: D.map((e) => /* @__PURE__ */ i(u, {
+						children: N.map((e) => /* @__PURE__ */ s(h, {
 							item: e,
 							collapsed: !1,
-							onItemSelect: b
+							onItemSelect: P
 						}, e.key))
 					}) : null,
-					!p && v ? /* @__PURE__ */ i("div", {
+					!d && y ? /* @__PURE__ */ s("div", {
 						"data-slot": "app-sidebar-footer-secondary",
 						className: "mb-3",
-						children: v
+						children: y
 					}) : null,
-					p && g ? /* @__PURE__ */ i("div", {
+					d && _ ? /* @__PURE__ */ s("div", {
 						"data-slot": "app-sidebar-account-wrap",
-						children: /* @__PURE__ */ i(d, {
-							account: g,
-							collapsed: !0
+						children: /* @__PURE__ */ s(g, {
+							account: _,
+							collapsed: !0,
+							onAfterSelect: () => {
+								T && k && O?.();
+							}
 						})
 					}) : null,
-					!p && c
+					!d && l
 				]
 			})
 		]
 	});
 }
-var p = 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]);
+	r.useEffect(() => {
+		!B && U && W(!1);
+	}, [
+		B,
+		U,
+		W
+	]), r.useEffect(() => {
+		if (!B || !U) return;
+		let e = document.body.style.overflow;
+		document.body.style.overflow = "hidden";
+		let t = (e) => {
+			e.key === "Escape" && W(!1);
+		};
+		return window.addEventListener("keydown", t), () => {
+			document.body.style.overflow = e, window.removeEventListener("keydown", t);
+		};
+	}, [
+		B,
+		U,
+		W
+	]);
+	let G = {
+		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
+	};
+	if (!b || !B) return /* @__PURE__ */ s(_, { ...G });
+	let K = /* @__PURE__ */ c("button", {
+		type: "button",
+		"aria-label": U ? "Close navigation" : D,
+		"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),
+		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 })]
+	});
+	return /* @__PURE__ */ c(o, { children: [k ? P ? P({
+		open: U,
+		setOpen: W
+	}) : K : 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,
+			mobile: !0,
+			collapsed: !1,
+			mobileTitle: T,
+			mobileDescription: E,
+			onRequestClose: () => W(!1),
+			"data-state": U ? "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)
+		})]
+	})] });
+}
+var y = v;
 //#endregion
-export { f as AppSidebar, p as Sidebar };
+export { v as AppSidebar, y as Sidebar };

package/dist/hooks/index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./use-session-storage-state.cjs"),t=require("./use-before-unload-when-dirty.cjs"),n=require("./use-is-mobile.cjs"),r=require("./use-disclosure.cjs"),i=require("./use-debounce.cjs"),a=require("./use-data-table-view-state.cjs");exports.DEFAULT_MOBILE_BREAKPOINT=n.DEFAULT_MOBILE_BREAKPOINT,exports.useBeforeUnloadWhenDirty=t.useBeforeUnloadWhenDirty,exports.useDataTableViewState=a.useDataTableViewState,exports.useDebouncedCallback=i.useDebouncedCallback,exports.useDebouncedValue=i.useDebouncedValue,exports.useDisclosure=r.useDisclosure,exports.useIsMobile=n.useIsMobile,exports.useSessionStorageState=e.useSessionStorageState;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./use-is-mobile.cjs"),t=require("./use-session-storage-state.cjs"),n=require("./use-before-unload-when-dirty.cjs"),r=require("./use-disclosure.cjs"),i=require("./use-debounce.cjs"),a=require("./use-data-table-view-state.cjs");exports.DEFAULT_MOBILE_BREAKPOINT=e.DEFAULT_MOBILE_BREAKPOINT,exports.useBeforeUnloadWhenDirty=n.useBeforeUnloadWhenDirty,exports.useDataTableViewState=a.useDataTableViewState,exports.useDebouncedCallback=i.useDebouncedCallback,exports.useDebouncedValue=i.useDebouncedValue,exports.useDisclosure=r.useDisclosure,exports.useIsMobile=e.useIsMobile,exports.useSessionStorageState=t.useSessionStorageState;

package/dist/hooks/index.js

@@ -1,7 +1,7 @@
-import { useSessionStorageState as e } from "./use-session-storage-state.js";
-import { useBeforeUnloadWhenDirty as t } from "./use-before-unload-when-dirty.js";
-import { DEFAULT_MOBILE_BREAKPOINT as n, useIsMobile as r } from "./use-is-mobile.js";
+import { DEFAULT_MOBILE_BREAKPOINT as e, useIsMobile as t } from "./use-is-mobile.js";
+import { useSessionStorageState as n } from "./use-session-storage-state.js";
+import { useBeforeUnloadWhenDirty as r } from "./use-before-unload-when-dirty.js";
 import { useDisclosure as i } from "./use-disclosure.js";
 import { useDebouncedCallback as a, useDebouncedValue as o } from "./use-debounce.js";
 import { useDataTableViewState as s } from "./use-data-table-view-state.js";
-export { n as DEFAULT_MOBILE_BREAKPOINT, t as useBeforeUnloadWhenDirty, s as useDataTableViewState, a as useDebouncedCallback, o as useDebouncedValue, i as useDisclosure, r as useIsMobile, e as useSessionStorageState };
+export { e as DEFAULT_MOBILE_BREAKPOINT, r as useBeforeUnloadWhenDirty, s as useDataTableViewState, a as useDebouncedCallback, o as useDebouncedValue, i as useDisclosure, t as useIsMobile, n as useSessionStorageState };