tembro 2.0.1 → 2.0.3

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/components/ui/button/index.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("@base-ui/react/button"),i=require("class-variance-authority"),a=require("react/jsx-runtime");var o=(0,i.cva)(`group/button inline-flex shrink-0 items-center justify-center rounded-[var(--aui-control-radius,var(--radius-lg))] border border-[color:var(--aui-control-border-strong,var(--border))] bg-[color:var(--aui-control-surface,var(--background))] bg-clip-padding text-sm font-semibold text-foreground whitespace-nowrap shadow-[var(--aui-control-shadow,0_1px_2px_rgba(15,23,42,0.04))] transition-[transform,background-color,border-color,color,box-shadow,opacity] outline-none select-none hover:border-[color:var(--aui-control-hover-border,var(--ring))] hover:bg-[color:var(--aui-control-surface-hover,var(--muted))] focus-visible:ring-0 focus-visible:shadow-[var(--aui-control-shadow,0_1px_2px_rgba(15,23,42,0.04)),0_0_0_1px_var(--aui-focus-ring,var(--ring)),0_0_0_5px_var(--aui-focus-ring-soft,transparent)] active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:cursor-not-allowed disabled:translate-y-0 disabled:border-[color:color-mix(in_oklch,var(--border),transparent_24%)] disabled:bg-[color:var(--aui-control-surface-disabled,var(--muted))] disabled:text-muted-foreground disabled:shadow-none disabled:opacity-100 aria-disabled:pointer-events-none aria-disabled:cursor-not-allowed aria-disabled:translate-y-0 aria-disabled:opacity-100 aria-invalid:border-destructive [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,{variants:{variant:{default:`border-[color:color-mix(in_oklch,var(--primary),black_10%)] bg-primary text-primary-foreground shadow-[var(--aui-button-primary-shadow,0_10px_24px_rgba(16,185,129,0.18))] hover:border-[color:color-mix(in_oklch,var(--primary),black_18%)] hover:bg-[color:color-mix(in_oklch,var(--primary),white_8%)]`,outline:`bg-[color:var(--aui-control-surface,var(--background))] text-foreground shadow-none`,secondary:`border-[color:color-mix(in_oklch,var(--border),var(--foreground)_6%)] bg-secondary text-secondary-foreground shadow-none`,ghost:`border-transparent bg-transparent shadow-none`,destructive:`border-[color:color-mix(in_oklch,var(--destructive),black_8%)] bg-destructive text-[color:var(--aui-danger-foreground,var(--primary-foreground))] shadow-[var(--aui-button-danger-shadow,0_10px_24px_rgba(239,68,68,0.16))] hover:border-[color:color-mix(in_oklch,var(--destructive),black_16%)] hover:bg-[color:color-mix(in_oklch,var(--destructive),white_6%)]`,warning:`border-[color:color-mix(in_oklch,var(--aui-warning,var(--primary)),transparent_52%)] bg-[color:color-mix(in_oklch,var(--aui-warning,var(--primary)),transparent_78%)] text-[color:var(--aui-warning-foreground,var(--foreground))] shadow-none hover:bg-[color:color-mix(in_oklch,var(--aui-warning,var(--primary)),transparent_70%)]`,link:`rounded-none border-transparent bg-transparent p-0 text-primary shadow-none underline-offset-4 hover:bg-transparent hover:text-[color:color-mix(in_oklch,var(--primary),black_10%)]`},size:{default:`h-9 gap-1.5 px-3.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3`,xs:`h-7 gap-1 rounded-[var(--radius-sm)] px-2.5 text-xs in-data-[slot=button-group]:rounded-[var(--radius-sm)] has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3`,sm:`h-8 gap-1 rounded-[var(--radius-md)] px-3.5 text-[0.82rem] in-data-[slot=button-group]:rounded-[var(--radius-md)] has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5 [&_svg:not([class*='size-'])]:size-3.5`,md:`h-9 gap-1.5 px-3.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3`,lg:`h-10 gap-1.5 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3`,xl:`h-11 gap-2 px-5 text-base has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4`,icon:`size-9`,"icon-xs":`size-7 rounded-[var(--radius-sm)] in-data-[slot=button-group]:rounded-[var(--radius-sm)] [&_svg:not([class*='size-'])]:size-3`,"icon-sm":`size-8 rounded-[var(--radius-md)] in-data-[slot=button-group]:rounded-[var(--radius-md)]`,"icon-lg":`size-10`}},defaultVariants:{variant:`default`,size:`default`}});function s({className:e,variant:n=`default`,size:i=`default`,disabled:s,loading:c=!1,loadingLabel:l=`Loading`,leftIcon:u,rightIcon:d,children:f,...p}){return(0,a.jsxs)(r.Button,{"data-slot":`button`,"data-variant":n??`default`,"data-size":i??`default`,"data-loading":c||void 0,disabled:s||c,"aria-busy":c||void 0,className:t.cn(o({variant:n,size:i,className:e})),...p,children:[c?(0,a.jsx)(`span`,{"data-slot":`button-spinner`,"aria-hidden":`true`,className:`size-4 animate-spin rounded-full border-2 border-current border-t-transparent opacity-80`}):u?(0,a.jsx)(`span`,{"data-icon":`inline-start`,"data-slot":`button-icon`,className:`inline-flex shrink-0 items-center justify-center`,children:u}):null,f?(0,a.jsx)(`span`,{"data-slot":`button-label`,children:c?l:f}):null,!c&&d?(0,a.jsx)(`span`,{"data-icon":`inline-end`,"data-slot":`button-icon`,className:`inline-flex shrink-0 items-center justify-center`,children:d}):null]})}exports.Button=s,exports.buttonVariants=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("@base-ui/react/button"),i=require("class-variance-authority"),a=require("react/jsx-runtime");var o=(0,i.cva)(`group/button inline-flex shrink-0 items-center justify-center rounded-[var(--aui-control-radius,var(--radius-md))] border border-[color:var(--aui-control-border-strong,var(--border))] bg-[color:var(--aui-control-surface,var(--background))] bg-clip-padding text-sm font-semibold text-foreground whitespace-nowrap shadow-[var(--aui-control-shadow,0_1px_2px_rgba(15,23,42,0.04))] transition-[transform,background-color,border-color,color,box-shadow,opacity] outline-none select-none hover:border-[color:var(--aui-control-hover-border,var(--ring))] hover:bg-[color:var(--aui-control-surface-hover,var(--muted))] focus-visible:ring-0 focus-visible:shadow-[var(--aui-control-shadow,0_1px_2px_rgba(15,23,42,0.04)),0_0_0_1px_var(--aui-focus-ring,var(--ring)),0_0_0_4px_var(--aui-focus-ring-soft,transparent)] active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:cursor-not-allowed disabled:translate-y-0 disabled:border-[color:color-mix(in_oklch,var(--border),transparent_24%)] disabled:bg-[color:var(--aui-control-surface-disabled,var(--muted))] disabled:text-muted-foreground disabled:shadow-none disabled:opacity-100 aria-disabled:pointer-events-none aria-disabled:cursor-not-allowed aria-disabled:translate-y-0 aria-disabled:opacity-100 aria-invalid:border-destructive [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,{variants:{variant:{default:`border-[color:color-mix(in_oklch,var(--primary),black_10%)] bg-primary text-primary-foreground shadow-[var(--aui-button-primary-shadow,0_10px_24px_rgba(16,185,129,0.18))] hover:border-[color:color-mix(in_oklch,var(--primary),black_18%)] hover:bg-[color:color-mix(in_oklch,var(--primary),white_8%)] hover:text-primary-foreground`,outline:`bg-[color:var(--aui-control-surface,var(--background))] text-foreground shadow-none`,secondary:`border-[color:color-mix(in_oklch,var(--border),var(--foreground)_6%)] bg-secondary text-secondary-foreground shadow-none`,ghost:`border-transparent bg-transparent shadow-none`,destructive:`border-[color:color-mix(in_oklch,var(--destructive),black_8%)] bg-destructive text-[color:var(--aui-danger-foreground,var(--primary-foreground))] shadow-[var(--aui-button-danger-shadow,0_10px_24px_rgba(239,68,68,0.16))] hover:border-[color:color-mix(in_oklch,var(--destructive),black_16%)] hover:bg-[color:color-mix(in_oklch,var(--destructive),white_6%)]`,warning:`border-[color:color-mix(in_oklch,var(--aui-warning,var(--primary)),transparent_52%)] bg-[color:color-mix(in_oklch,var(--aui-warning,var(--primary)),transparent_78%)] text-[color:var(--aui-warning-foreground,var(--foreground))] shadow-none hover:bg-[color:color-mix(in_oklch,var(--aui-warning,var(--primary)),transparent_70%)]`,link:`rounded-none border-transparent bg-transparent p-0 text-primary shadow-none underline-offset-4 hover:bg-transparent hover:text-[color:color-mix(in_oklch,var(--primary),black_10%)]`},size:{default:`h-9 gap-1.5 px-3.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3`,xs:`h-7 gap-1 rounded-[var(--radius-sm)] px-2.5 text-xs in-data-[slot=button-group]:rounded-[var(--radius-sm)] has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3`,sm:`h-8 gap-1 rounded-[var(--radius-md)] px-3.5 text-[0.82rem] in-data-[slot=button-group]:rounded-[var(--radius-md)] has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5 [&_svg:not([class*='size-'])]:size-3.5`,md:`h-9 gap-1.5 px-3.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3`,lg:`h-10 gap-1.5 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3`,xl:`h-11 gap-2 px-5 text-base has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4`,icon:`size-9`,"icon-xs":`size-7 rounded-[var(--radius-sm)] in-data-[slot=button-group]:rounded-[var(--radius-sm)] [&_svg:not([class*='size-'])]:size-3`,"icon-sm":`size-8 rounded-[var(--radius-md)] in-data-[slot=button-group]:rounded-[var(--radius-md)]`,"icon-lg":`size-10`}},defaultVariants:{variant:`default`,size:`default`}});function s({className:e,variant:n=`default`,size:i=`default`,disabled:s,loading:c=!1,loadingLabel:l=`Loading`,leftIcon:u,rightIcon:d,children:f,...p}){return(0,a.jsxs)(r.Button,{"data-slot":`button`,"data-variant":n??`default`,"data-size":i??`default`,"data-loading":c||void 0,disabled:s||c,"aria-busy":c||void 0,className:t.cn(o({variant:n,size:i,className:e})),...p,children:[c?(0,a.jsx)(`span`,{"data-slot":`button-spinner`,"aria-hidden":`true`,className:`size-4 animate-spin rounded-full border-2 border-current border-t-transparent opacity-80`}):u?(0,a.jsx)(`span`,{"data-icon":`inline-start`,"data-slot":`button-icon`,className:`inline-flex shrink-0 items-center justify-center`,children:u}):null,f?(0,a.jsx)(`span`,{"data-slot":`button-label`,children:c?l:f}):null,!c&&d?(0,a.jsx)(`span`,{"data-icon":`inline-end`,"data-slot":`button-icon`,className:`inline-flex shrink-0 items-center justify-center`,children:d}):null]})}exports.Button=s,exports.buttonVariants=o;

package/dist/components/ui/button/index.js

@@ -4,10 +4,10 @@ import { Button as t } from "@base-ui/react/button";
 import { cva as n } from "class-variance-authority";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region src/components/ui/button/index.tsx
-var a = n("group/button inline-flex shrink-0 items-center justify-center rounded-[var(--aui-control-radius,var(--radius-lg))] border border-[color:var(--aui-control-border-strong,var(--border))] bg-[color:var(--aui-control-surface,var(--background))] bg-clip-padding text-sm font-semibold text-foreground whitespace-nowrap shadow-[var(--aui-control-shadow,0_1px_2px_rgba(15,23,42,0.04))] transition-[transform,background-color,border-color,color,box-shadow,opacity] outline-none select-none hover:border-[color:var(--aui-control-hover-border,var(--ring))] hover:bg-[color:var(--aui-control-surface-hover,var(--muted))] focus-visible:ring-0 focus-visible:shadow-[var(--aui-control-shadow,0_1px_2px_rgba(15,23,42,0.04)),0_0_0_1px_var(--aui-focus-ring,var(--ring)),0_0_0_5px_var(--aui-focus-ring-soft,transparent)] active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:cursor-not-allowed disabled:translate-y-0 disabled:border-[color:color-mix(in_oklch,var(--border),transparent_24%)] disabled:bg-[color:var(--aui-control-surface-disabled,var(--muted))] disabled:text-muted-foreground disabled:shadow-none disabled:opacity-100 aria-disabled:pointer-events-none aria-disabled:cursor-not-allowed aria-disabled:translate-y-0 aria-disabled:opacity-100 aria-invalid:border-destructive [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+var a = n("group/button inline-flex shrink-0 items-center justify-center rounded-[var(--aui-control-radius,var(--radius-md))] border border-[color:var(--aui-control-border-strong,var(--border))] bg-[color:var(--aui-control-surface,var(--background))] bg-clip-padding text-sm font-semibold text-foreground whitespace-nowrap shadow-[var(--aui-control-shadow,0_1px_2px_rgba(15,23,42,0.04))] transition-[transform,background-color,border-color,color,box-shadow,opacity] outline-none select-none hover:border-[color:var(--aui-control-hover-border,var(--ring))] hover:bg-[color:var(--aui-control-surface-hover,var(--muted))] focus-visible:ring-0 focus-visible:shadow-[var(--aui-control-shadow,0_1px_2px_rgba(15,23,42,0.04)),0_0_0_1px_var(--aui-focus-ring,var(--ring)),0_0_0_4px_var(--aui-focus-ring-soft,transparent)] active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:cursor-not-allowed disabled:translate-y-0 disabled:border-[color:color-mix(in_oklch,var(--border),transparent_24%)] disabled:bg-[color:var(--aui-control-surface-disabled,var(--muted))] disabled:text-muted-foreground disabled:shadow-none disabled:opacity-100 aria-disabled:pointer-events-none aria-disabled:cursor-not-allowed aria-disabled:translate-y-0 aria-disabled:opacity-100 aria-invalid:border-destructive [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
 	variants: {
 		variant: {
-			default: "border-[color:color-mix(in_oklch,var(--primary),black_10%)] bg-primary text-primary-foreground shadow-[var(--aui-button-primary-shadow,0_10px_24px_rgba(16,185,129,0.18))] hover:border-[color:color-mix(in_oklch,var(--primary),black_18%)] hover:bg-[color:color-mix(in_oklch,var(--primary),white_8%)]",
+			default: "border-[color:color-mix(in_oklch,var(--primary),black_10%)] bg-primary text-primary-foreground shadow-[var(--aui-button-primary-shadow,0_10px_24px_rgba(16,185,129,0.18))] hover:border-[color:color-mix(in_oklch,var(--primary),black_18%)] hover:bg-[color:color-mix(in_oklch,var(--primary),white_8%)] hover:text-primary-foreground",
 			outline: "bg-[color:var(--aui-control-surface,var(--background))] text-foreground shadow-none",
 			secondary: "border-[color:color-mix(in_oklch,var(--border),var(--foreground)_6%)] bg-secondary text-secondary-foreground shadow-none",
 			ghost: "border-transparent bg-transparent shadow-none",

package/dist/components/ui/input/primitive.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("react/jsx-runtime"),i=require("@base-ui/react/input");function a({className:e,type:n,...a}){return(0,r.jsx)(i.Input,{type:n,"data-slot":`input`,className:t.cn(`h-11 w-full min-w-0 rounded-[var(--aui-control-radius,var(--radius-lg))] border border-[color:color-mix(in_oklch,var(--aui-control-border-strong,var(--input)),var(--foreground)_6%)] bg-[color:var(--aui-control-surface,var(--background))] px-4 py-2.5 text-sm font-medium text-foreground shadow-[var(--aui-shadow-xs,0_1px_2px_rgba(15,23,42,0.04))] transition-[background-color,border-color,box-shadow,color] outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground/72 hover:border-[color:color-mix(in_oklch,var(--aui-control-hover-border,var(--ring)),var(--foreground)_10%)] hover:bg-[color:var(--aui-control-surface-hover,var(--background))] focus-visible:border-[color:var(--ring)] focus-visible:ring-0 focus-visible:shadow-[var(--aui-shadow-xs,0_1px_2px_rgba(15,23,42,0.04)),0_0_0_1px_var(--aui-focus-ring,var(--ring)),0_0_0_5px_var(--aui-focus-ring-soft,transparent)] disabled:pointer-events-none disabled:cursor-not-allowed disabled:border-[color:color-mix(in_oklch,var(--border),transparent_18%)] disabled:bg-[color:var(--aui-control-surface-disabled,var(--muted))] disabled:text-muted-foreground disabled:shadow-none disabled:opacity-100 read-only:bg-[color:var(--aui-control-surface-readonly,var(--muted))]`,e),...a})}exports.InputPrimitive=a;
+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("react/jsx-runtime"),i=require("@base-ui/react/input");function a({className:e,type:n,...a}){return(0,r.jsx)(i.Input,{type:n,"data-slot":`input`,className:t.cn(`h-11 w-full min-w-0 rounded-[var(--aui-control-radius,var(--radius-md))] border border-[color:color-mix(in_oklch,var(--aui-control-border-strong,var(--input)),var(--foreground)_6%)] bg-[color:var(--aui-control-surface,var(--background))] px-3.5 py-2.5 text-sm font-normal text-foreground shadow-[var(--aui-shadow-xs,0_1px_2px_rgba(15,23,42,0.04))] transition-[background-color,border-color,box-shadow,color] outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground/74 hover:border-[color:color-mix(in_oklch,var(--aui-control-hover-border,var(--ring)),var(--foreground)_10%)] hover:bg-[color:var(--aui-control-surface-hover,var(--background))] focus-visible:border-[color:var(--ring)] focus-visible:ring-0 focus-visible:shadow-[var(--aui-shadow-xs,0_1px_2px_rgba(15,23,42,0.04)),0_0_0_1px_var(--aui-focus-ring,var(--ring)),0_0_0_4px_var(--aui-focus-ring-soft,transparent)] disabled:pointer-events-none disabled:cursor-not-allowed disabled:border-[color:color-mix(in_oklch,var(--border),transparent_18%)] disabled:bg-[color:var(--aui-control-surface-disabled,var(--muted))] disabled:text-muted-foreground disabled:shadow-none disabled:opacity-100 read-only:bg-[color:var(--aui-control-surface-readonly,var(--muted))]`,e),...a})}exports.InputPrimitive=a;