tembro 4.0.1 → 4.2.0

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

@@ -1,196 +1,212 @@
 "use client";
 import { cn as e } from "../../lib/utils.js";
-import { useIsMobile as t } from "../../hooks/use-is-mobile.js";
-import { ControllableDetails as n } from "./controllable-details.js";
-import { Tooltip as r } from "../ui/tooltip/index.js";
-import { useSidebar as i } from "./sidebar-context.js";
-import * as a from "react";
-import { ChevronRightIcon as o, MenuIcon as s, XIcon as c } from "lucide-react";
-import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+import { Input as t } from "../ui/input/index.js";
+import { useIsMobile as n } from "../../hooks/use-is-mobile.js";
+import { ControllableDetails as r } from "./controllable-details.js";
+import { Tooltip as i } from "../ui/tooltip/index.js";
+import { useSidebar as a } from "./sidebar-context.js";
+import * as o from "react";
+import { ChevronRightIcon as s, MenuIcon as c, SearchIcon as l, XIcon as u } from "lucide-react";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
 //#region src/components/layout/sidebar.tsx
-var f = 1024, p = "18rem", m = "4.75rem", h = "min(88vw, 22rem)";
-function g({ active: t, disabled: n }) {
+var m = 1024, h = "18rem", g = "4.75rem", _ = "min(88vw, 22rem)";
+function v({ active: t, disabled: n }) {
 	return e("border border-transparent bg-transparent text-[color:color-mix(in_oklch,var(--sidebar-foreground),transparent_6%)] hover:border-[color:var(--aui-sidebar-item-active-border)] hover:bg-[color:var(--aui-sidebar-item-hover-bg)] hover:text-[color:var(--sidebar-foreground)] focus-visible:border-[color:var(--sidebar-ring)] focus-visible:bg-[color:var(--aui-sidebar-item-hover-bg)] focus-visible:text-[color:var(--sidebar-foreground)] focus-visible:shadow-[0_0_0_3px_color-mix(in_oklch,var(--sidebar-ring),transparent_82%)]", t && "border-[color:var(--aui-sidebar-item-active-border)] bg-[color:var(--aui-sidebar-item-active-bg)] text-[color:var(--aui-sidebar-item-active-fg)] shadow-[inset_0_1px_0_rgba(255,255,255,0.08),0_10px_24px_color-mix(in_oklch,var(--sidebar-primary),transparent_88%)]", n && "hover:border-transparent hover:bg-transparent hover:text-[color:color-mix(in_oklch,var(--sidebar-foreground),transparent_6%)]");
 }
-function _({ collapsed: t, depth: n, itemSize: r, activeIndicator: i }) {
+function y({ collapsed: t, depth: n, itemSize: r, activeIndicator: i }) {
 	return e("relative w-full rounded-[min(var(--radius-xl),14px)] py-2", r === "sm" && "min-h-8 text-xs", r === "md" && "min-h-9 text-sm", r === "lg" && "min-h-11 text-sm", t ? "justify-center px-2" : "px-2.5", !t && n > 0 && "pl-3", i === "bar" && "data-[active=true]:pl-4 before:pointer-events-none before:absolute before:left-1.5 before:top-1/2 before:hidden before:h-5 before:w-1 before:-translate-y-1/2 before:rounded-full before:bg-[color:var(--sidebar-primary)] data-[active=true]:before:block", i === "pill" && "rounded-full", i === "none" && "data-[active=true]:shadow-none");
 }
-function v(e) {
+function b(e) {
 	return e.items?.some((e) => !e.hidden) ?? !1;
 }
-function y(e) {
-	return e.active ? !0 : e.items?.some((e) => y(e)) ?? !1;
+function x(e) {
+	return e.active ? !0 : e.items?.some((e) => x(e)) ?? !1;
 }
-function b(e, t) {
+function S(e, t) {
 	e.onSelect?.(), t?.(e);
 }
-function x({ item: t, collapsed: n, depth: i, itemSize: a, activeIndicator: o, onItemSelect: s, renderLink: c }) {
-	let f = {
-		"aria-current": t.current ?? (t.active ? "page" : void 0),
+function C({ item: t, collapsed: n, depth: r, itemSize: a, activeIndicator: o, onItemSelect: s, renderLink: c }) {
+	let l = t.current ?? (t.active ? "page" : void 0), u = {
+		"aria-label": n && typeof t.label == "string" ? t.label : void 0,
+		"aria-current": l,
 		"aria-disabled": t.disabled || void 0,
 		"data-slot": "sidebar-item",
 		"data-active": t.active || void 0,
 		"data-disabled": t.disabled || void 0,
-		"data-depth": String(i),
+		"data-depth": String(r),
 		"data-size": a,
 		"data-active-indicator": o,
-		className: e("flex items-center gap-2 border border-transparent font-medium outline-none transition-[background-color,border-color,color,box-shadow] data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50", g({
+		className: e("flex min-w-0 flex-1 items-center gap-2 border border-transparent text-left font-medium outline-none transition-[background-color,border-color,color,box-shadow] data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50", v({
 			active: t.active,
 			disabled: t.disabled
-		}), _({
+		}), y({
 			collapsed: n,
-			depth: i,
+			depth: r,
 			itemSize: a,
 			activeIndicator: o
 		}))
-	}, p = /* @__PURE__ */ d(l, { children: [
-		t.icon && /* @__PURE__ */ u("span", {
+	}, m = /* @__PURE__ */ p(d, { children: [
+		t.icon && /* @__PURE__ */ f("span", {
 			className: "shrink-0",
 			children: t.icon
 		}),
-		!n && /* @__PURE__ */ u("span", {
+		!n && /* @__PURE__ */ f("span", {
 			className: "min-w-0 flex-1 truncate",
 			children: t.label
 		}),
-		!n && t.badge && /* @__PURE__ */ u("span", {
+		!n && t.badge && /* @__PURE__ */ f("span", {
 			className: "shrink-0",
 			children: t.badge
 		})
-	] }), m = (e) => n ? /* @__PURE__ */ u(r, {
+	] }), h = (e) => n ? /* @__PURE__ */ f(i, {
 		content: t.tooltip ?? t.label,
 		side: "right",
-		children: /* @__PURE__ */ u("span", {
+		children: /* @__PURE__ */ f("span", {
 			className: "block",
 			children: e
 		})
-	}) : e;
-	return t.href?.startsWith("/") ? m(c ? /* @__PURE__ */ u(l, { children: c({
+	}) : e, g = (e) => n || !t.action ? e : /* @__PURE__ */ p("div", {
+		"data-slot": "sidebar-item-row",
+		className: "group/sidebar-item-row flex min-w-0 items-center gap-1",
+		children: [e, /* @__PURE__ */ f("button", {
+			type: "button",
+			"data-slot": "sidebar-item-action",
+			"aria-label": t.actionLabel ?? `Actions for ${String(t.label)}`,
+			className: "grid size-8 shrink-0 place-items-center rounded-md p-0 leading-none text-muted-foreground opacity-0 outline-none transition hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-sidebar-ring group-hover/sidebar-item-row:opacity-100",
+			onClick: (e) => {
+				e.preventDefault(), e.stopPropagation(), t.onAction?.();
+			},
+			children: t.action
+		})]
+	});
+	return t.href?.startsWith("/") ? h(g(c ? /* @__PURE__ */ f(d, { children: c({
 		item: t,
 		href: t.href,
-		...f,
+		...u,
 		onClick: (e) => {
 			if (t.disabled) {
 				e.preventDefault();
 				return;
 			}
-			b(t, s);
+			S(t, s);
 		},
-		children: p
-	}) }) : /* @__PURE__ */ u("a", {
+		children: m
+	}) }) : /* @__PURE__ */ f("a", {
 		href: t.href,
-		...f,
+		...u,
 		onClick: (e) => {
 			if (t.disabled) {
 				e.preventDefault();
 				return;
 			}
-			b(t, s);
+			S(t, s);
 		},
-		children: p
-	})) : t.href ? m(/* @__PURE__ */ u("button", {
+		children: m
+	}))) : t.href ? h(g(/* @__PURE__ */ f("button", {
 		type: "button",
-		...f,
-		className: e(f.className, "w-full"),
+		...u,
+		className: e(u.className, "w-full"),
 		onClick: () => {
 			if (t.disabled) return;
 			let e = t.href;
 			if (e) {
-				if (b(t, s), e.startsWith("http")) {
+				if (S(t, s), e.startsWith("http")) {
 					window.open(e, "_blank", "noopener,noreferrer");
 					return;
 				}
 				window.location.assign(e);
 			}
 		},
-		children: p
-	})) : m(/* @__PURE__ */ u("button", {
+		children: m
+	}))) : h(g(/* @__PURE__ */ f("button", {
 		type: "button",
 		disabled: t.disabled,
-		...f,
+		...u,
 		onClick: () => {
-			t.disabled || b(t, s);
+			t.disabled || S(t, s);
 		},
-		children: p
-	}));
+		children: m
+	})));
 }
-function S({ items: t, collapsed: i, depth: s, showSectionLabels: c, itemSize: l, activeIndicator: f, onItemSelect: p, renderLink: m }) {
+function w({ items: t, collapsed: n, depth: a, showSectionLabels: c, itemSize: l, activeIndicator: u, onItemSelect: d, renderLink: m }) {
 	return t.map((t) => {
 		if (t.hidden) return null;
-		let h = v(t), b = y(t), C = c && !i && s === 0 && t.sectionLabel;
-		if (!h) return /* @__PURE__ */ d(a.Fragment, { children: [C ? /* @__PURE__ */ u("div", {
+		let h = b(t), g = x(t), _ = c && !n && a === 0 && t.sectionLabel;
+		if (!h) return /* @__PURE__ */ p(o.Fragment, { children: [_ ? /* @__PURE__ */ f("div", {
 			"data-slot": "sidebar-group-label",
 			className: "px-2.5 pb-1 pt-3 text-[11px] font-semibold uppercase tracking-[0.14em] text-[color:color-mix(in_oklch,var(--sidebar-foreground),transparent_42%)] first:pt-0",
 			children: t.sectionLabel
-		}) : null, /* @__PURE__ */ u(x, {
+		}) : null, /* @__PURE__ */ f(C, {
 			item: t,
-			collapsed: i,
-			depth: s,
+			collapsed: n,
+			depth: a,
 			itemSize: l,
-			activeIndicator: f,
-			onItemSelect: p,
+			activeIndicator: u,
+			onItemSelect: d,
 			renderLink: m
 		})] }, t.key);
-		let w = t.defaultExpanded ?? b;
-		return /* @__PURE__ */ d("div", {
+		let S = t.defaultExpanded ?? g;
+		return /* @__PURE__ */ p("div", {
 			"data-slot": "sidebar-group",
-			"data-depth": s,
-			children: [C && /* @__PURE__ */ u("div", {
+			"data-depth": a,
+			children: [_ && /* @__PURE__ */ f("div", {
 				"data-slot": "sidebar-group-label",
 				className: "px-2.5 pb-1 pt-3 text-[11px] font-semibold uppercase tracking-[0.14em] text-[color:color-mix(in_oklch,var(--sidebar-foreground),transparent_42%)] first:pt-0",
 				children: t.sectionLabel
-			}), /* @__PURE__ */ d(n, {
+			}), /* @__PURE__ */ p(r, {
 				"data-slot": "sidebar-group-details",
 				open: t.expanded,
-				defaultOpen: w,
+				defaultOpen: S,
 				className: "group/sidebar-details",
 				onOpenChange: t.onExpandedChange,
-				children: [/* @__PURE__ */ d("summary", {
+				children: [/* @__PURE__ */ p("summary", {
+					"aria-label": n && typeof t.label == "string" ? t.label : void 0,
 					"data-slot": "sidebar-group-trigger",
 					"data-size": l,
-					"data-active": b || void 0,
-					"data-active-indicator": f,
-					className: e("flex list-none items-center gap-2 border border-transparent font-medium outline-none transition-[background-color,border-color,color,box-shadow]", g({ active: b }), _({
-						collapsed: i,
-						depth: s,
+					"data-active": g || void 0,
+					"data-active-indicator": u,
+					className: e("flex list-none items-center gap-2 border border-transparent text-left font-medium outline-none transition-[background-color,border-color,color,box-shadow]", v({ active: g }), y({
+						collapsed: n,
+						depth: a,
 						itemSize: l,
-						activeIndicator: f
+						activeIndicator: u
 					})),
 					children: [
-						t.icon ? i ? /* @__PURE__ */ u(r, {
+						t.icon ? n ? /* @__PURE__ */ f(i, {
 							content: t.tooltip ?? t.label,
 							side: "right",
-							children: /* @__PURE__ */ u("span", {
+							children: /* @__PURE__ */ f("span", {
 								className: "shrink-0",
 								children: t.icon
 							})
-						}) : /* @__PURE__ */ u("span", {
+						}) : /* @__PURE__ */ f("span", {
 							className: "shrink-0",
 							children: t.icon
 						}) : null,
-						!i && /* @__PURE__ */ u("span", {
+						!n && /* @__PURE__ */ f("span", {
 							className: "min-w-0 flex-1 truncate",
 							children: t.label
 						}),
-						!i && t.badge && /* @__PURE__ */ u("span", {
+						!n && t.badge && /* @__PURE__ */ f("span", {
 							className: "shrink-0",
 							children: t.badge
 						}),
-						!i && /* @__PURE__ */ u(o, {
+						!n && /* @__PURE__ */ f(s, {
 							"data-slot": "sidebar-group-chevron",
 							className: "ml-auto size-3.5 shrink-0 text-[color:color-mix(in_oklch,var(--sidebar-foreground),transparent_42%)] transition-transform group-open/sidebar-details:rotate-90"
 						})
 					]
-				}), /* @__PURE__ */ u("div", {
+				}), /* @__PURE__ */ f("div", {
 					"data-slot": "sidebar-group-content",
-					className: e("mt-1 flex flex-col gap-1", !i && "pl-3"),
-					children: /* @__PURE__ */ u(S, {
+					className: e("mt-1 flex flex-col gap-1", !n && "pl-3"),
+					children: /* @__PURE__ */ f(w, {
 						items: t.items ?? [],
-						collapsed: i,
-						depth: s + 1,
+						collapsed: n,
+						depth: a + 1,
 						showSectionLabels: c,
 						itemSize: l,
-						activeIndicator: f,
-						onItemSelect: p,
+						activeIndicator: u,
+						onItemSelect: d,
 						renderLink: m
 					})
 				})]
@@ -198,51 +214,66 @@ function S({ items: t, collapsed: i, depth: s, showSectionLabels: c, itemSize: l
 		}, t.key);
 	});
 }
-function C({ item: t, collapsed: n, onItemSelect: i }) {
-	let a = /* @__PURE__ */ d("button", {
+function T(e, t) {
+	let n = t.trim().toLocaleLowerCase();
+	return n ? e.flatMap((e) => {
+		let t = e.items ? T(e.items, n) : [];
+		return ![
+			typeof e.label == "string" ? e.label : "",
+			e.sectionLabel,
+			...e.keywords ?? []
+		].filter((e) => typeof e == "string").join(" ").toLocaleLowerCase().includes(n) && t.length === 0 ? [] : [{
+			...e,
+			items: t.length ? t : e.items,
+			defaultExpanded: t.length ? !0 : e.defaultExpanded
+		}];
+	}) : e;
+}
+function E({ item: t, collapsed: n, onItemSelect: r }) {
+	let a = /* @__PURE__ */ p("button", {
 		type: "button",
 		"data-slot": "sidebar-action",
 		"data-active": t.active || void 0,
 		"data-disabled": t.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", g({
+		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", v({
 			active: t.active,
 			disabled: t.disabled
 		}), n && "justify-center px-2"),
 		disabled: t.disabled,
 		onClick: () => {
-			t.disabled || b(t, i);
+			t.disabled || S(t, r);
 		},
 		children: [
-			t.icon ? /* @__PURE__ */ u("span", {
+			t.icon ? /* @__PURE__ */ f("span", {
 				className: "shrink-0",
 				children: t.icon
 			}) : null,
-			n ? null : /* @__PURE__ */ u("span", {
+			n ? null : /* @__PURE__ */ f("span", {
 				className: "min-w-0 flex-1 truncate",
 				children: t.label
 			}),
-			!n && t.badge ? /* @__PURE__ */ u("span", {
+			!n && t.badge ? /* @__PURE__ */ f("span", {
 				className: "shrink-0",
 				children: t.badge
 			}) : null
 		]
 	});
-	return n ? /* @__PURE__ */ u(r, {
+	return n ? /* @__PURE__ */ f(i, {
 		content: t.tooltip ?? t.label,
 		side: "right",
-		children: /* @__PURE__ */ u("span", {
+		children: /* @__PURE__ */ f("span", {
 			className: "block",
 			children: a
 		})
 	}) : a;
 }
-function w({ account: t, collapsed: n, onAfterSelect: i }) {
-	let a = /* @__PURE__ */ d("button", {
+function D({ account: t, collapsed: n, onAfterSelect: r }) {
+	let a = /* @__PURE__ */ p("button", {
 		type: "button",
 		"data-slot": "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]", g({}), n ? "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]", v({}), n ? "justify-center px-2 py-2.5" : "px-3 py-2.5"),
 		onClick: () => {
-			if (t.onSelect?.(), i?.(), t.href) {
+			if (t.onSelect?.(), r?.(), t.href) {
 				if (t.href.startsWith("http")) {
 					window.open(t.href, "_blank", "noopener,noreferrer");
 					return;
@@ -250,183 +281,238 @@ function w({ account: t, collapsed: n, onAfterSelect: i }) {
 				window.location.assign(t.href);
 			}
 		},
-		children: [t.avatar ? /* @__PURE__ */ u("span", {
+		children: [t.avatar ? /* @__PURE__ */ f("span", {
 			"data-slot": "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: t.avatar
-		}) : null, n ? null : /* @__PURE__ */ d("span", {
+		}) : null, n ? null : /* @__PURE__ */ p("span", {
 			className: "min-w-0 flex-1",
-			children: [/* @__PURE__ */ u("span", {
+			children: [/* @__PURE__ */ f("span", {
 				"data-slot": "sidebar-account-label",
 				className: "block truncate text-sm font-semibold text-[color:var(--sidebar-foreground)]",
 				children: t.label
-			}), t.description ? /* @__PURE__ */ u("span", {
+			}), t.description ? /* @__PURE__ */ f("span", {
 				"data-slot": "sidebar-account-description",
 				className: "block truncate text-xs text-[color:color-mix(in_oklch,var(--sidebar-foreground),transparent_36%)]",
 				children: t.description
 			}) : null]
 		})]
 	});
-	return n ? /* @__PURE__ */ u(r, {
+	return n ? /* @__PURE__ */ f(i, {
 		content: t.tooltip ?? t.label,
 		side: "right",
-		children: /* @__PURE__ */ u("span", {
+		children: /* @__PURE__ */ f("span", {
 			className: "block",
 			children: a
 		})
 	}) : a;
 }
-function T({ className: t, style: n, header: i, footer: o, items: s = [], collapsed: f = !1, width: h = p, collapsedWidth: g = m, collapsedRail: _, railItems: v = [], footerAccount: y, secondaryActions: b = [], footerSecondary: x, footerClassName: T, tooltipOnCollapsed: E, showSectionLabels: D = !0, itemSize: O = "md", activeIndicator: k = "bar", navigationLabel: A = "Primary navigation", onItemSelect: j, renderItem: M, renderLink: N, children: P, mobile: F, mobileTitle: I, mobileDescription: L, mobileCloseLabel: R = "Close navigation", onRequestClose: z, closeOnSelect: B = !0, ...V }) {
-	let H = s.filter((e) => !e.hidden), U = v.filter((e) => !e.hidden), W = b.filter((e) => !e.hidden), G = a.useCallback((e) => {
-		j?.(e), F && B && z?.();
+function O({ className: n, style: r, header: a, footer: s, items: c = [], collapsed: m = !1, width: _ = h, collapsedWidth: v = g, collapsedRail: y, railItems: b = [], footerAccount: x, secondaryActions: S = [], footerSecondary: C, footerClassName: O, tooltipOnCollapsed: ee, showSectionLabels: te = !0, itemSize: ne = "md", activeIndicator: re = "bar", navigationLabel: ie = "Primary navigation", search: k, hideScrollbar: ae = !0, variant: A = "sidebar", side: j = "left", collapsible: M = "icon", onItemSelect: N, renderItem: P, renderLink: oe, children: F, mobile: I, mobileTitle: L, mobileDescription: R, mobileCloseLabel: se = "Close navigation", onRequestClose: z, closeOnSelect: B = !0, ...ce }) {
+	let V = k && !o.isValidElement(k) && typeof k == "object" ? k : void 0, [le, ue] = o.useState(V?.defaultValue ?? ""), H = V?.value ?? le, U = T(c.filter((e) => !e.hidden), H), W = b.filter((e) => !e.hidden), G = S.filter((e) => !e.hidden), K = o.useCallback((e) => {
+		N?.(e), I && B && z?.();
 	}, [
 		B,
-		F,
-		j,
+		I,
+		N,
 		z
-	]), K = F && (I || L || z);
-	return /* @__PURE__ */ d("aside", {
+	]), q = I && (L || R || z);
+	return /* @__PURE__ */ p("aside", {
 		"data-slot": "sidebar",
-		"data-collapsed": f || void 0,
-		"data-mobile": F || void 0,
-		className: e("group/sidebar flex h-full min-h-0 flex-col overflow-hidden", t),
+		"data-collapsed": m || void 0,
+		"data-mobile": I || void 0,
+		"data-variant": A,
+		"data-side": j,
+		"data-collapsible": M,
+		className: e("peer group/sidebar flex h-full min-h-0 flex-col overflow-hidden bg-sidebar text-sidebar-foreground transition-[width,min-width,transform,border-radius,box-shadow] duration-200", j === "right" && "border-l border-r-0", !I && A === "floating" && "m-2 h-[calc(100%-1rem)] rounded-xl border shadow-lg", !I && A === "inset" && "m-2 h-[calc(100%-1rem)] rounded-lg border bg-sidebar/92 shadow-sm", I && "m-0 h-full rounded-none border-y-0", M === "offcanvas" && m && (j === "left" ? "-translate-x-full" : "translate-x-full"), n),
 		style: {
-			width: f ? g : h,
-			minWidth: f ? g : h,
-			...n
+			width: m ? M === "icon" ? v : M === "offcanvas" ? 0 : _ : _,
+			minWidth: m ? M === "icon" ? v : M === "offcanvas" ? 0 : _ : _,
+			...r
 		},
-		...V,
+		...ce,
 		children: [
-			(i || K) && /* @__PURE__ */ u("div", {
+			(a || q) && /* @__PURE__ */ f("div", {
 				"data-slot": "sidebar-header",
 				className: "shrink-0 border-b p-3",
-				children: /* @__PURE__ */ d("div", {
+				children: /* @__PURE__ */ p("div", {
 					className: "flex items-start gap-3",
-					children: [/* @__PURE__ */ d("div", {
+					children: [/* @__PURE__ */ p("div", {
 						className: "min-w-0 flex-1",
-						children: [i ?? null, K ? /* @__PURE__ */ d("div", {
-							className: e(i && "mt-3"),
-							children: [I ? /* @__PURE__ */ u("p", {
+						children: [a ?? null, q ? /* @__PURE__ */ p("div", {
+							className: e(a && "mt-3"),
+							children: [L ? /* @__PURE__ */ f("p", {
 								className: "text-sm font-semibold text-foreground",
-								children: I
-							}) : null, L ? /* @__PURE__ */ u("p", {
-								className: "mt-1 text-xs leading-5 text-muted-foreground",
 								children: L
+							}) : null, R ? /* @__PURE__ */ f("p", {
+								className: "mt-1 text-xs leading-5 text-muted-foreground",
+								children: R
 							}) : null]
 						}) : null]
-					}), F && z ? /* @__PURE__ */ u("button", {
+					}), I && z ? /* @__PURE__ */ f("button", {
 						type: "button",
-						"aria-label": R,
+						"aria-label": se,
 						"data-slot": "sidebar-mobile-close",
 						className: "inline-flex size-9 shrink-0 items-center justify-center rounded-xl border border-[color:var(--aui-divider,var(--border))] bg-[color:var(--aui-page-bg-alt,var(--muted))] text-[color:var(--aui-page-foreground,var(--foreground))] transition hover:bg-[color:var(--aui-control-bg,var(--muted))]",
 						onClick: z,
-						children: /* @__PURE__ */ u(c, { className: "size-4" })
+						children: /* @__PURE__ */ f(u, { className: "size-4" })
 					}) : null]
 				})
 			}),
-			/* @__PURE__ */ d("nav", {
+			k && !m ? /* @__PURE__ */ f("div", {
+				"data-slot": "sidebar-search",
+				className: "shrink-0 px-2 pt-2",
+				children: o.isValidElement(k) ? k : /* @__PURE__ */ f(t, {
+					kind: "search",
+					value: H,
+					onValueChange: (e) => {
+						V?.value === void 0 && ue(e), V?.onValueChange?.(e);
+					},
+					placeholder: V?.placeholder ?? "Search navigation...",
+					searchIcon: /* @__PURE__ */ f(l, {}),
+					"aria-label": V?.label ?? "Search navigation",
+					className: "h-9 bg-sidebar-accent/45"
+				})
+			}) : null,
+			/* @__PURE__ */ p("nav", {
 				"data-slot": "sidebar-nav",
-				"aria-label": A,
-				className: "flex min-h-0 flex-1 flex-col gap-1 overflow-y-auto overscroll-contain p-2",
-				children: [P ?? H.map((e) => {
-					if (!M) return null;
-					let t = M(e, { collapsed: f });
-					return !f || !E ? /* @__PURE__ */ u(a.Fragment, { children: t }, e.key) : /* @__PURE__ */ u(r, {
-						content: e.tooltip ?? e.label,
-						side: "right",
-						children: /* @__PURE__ */ u("span", {
-							className: "block",
-							children: t
-						})
-					}, e.key);
-				}), !P && !M && /* @__PURE__ */ u(S, {
-					items: H,
-					collapsed: f,
-					depth: 0,
-					showSectionLabels: D,
-					itemSize: O,
-					activeIndicator: k,
-					onItemSelect: G,
-					renderLink: N
-				})]
+				"aria-label": ie,
+				className: e("flex min-h-0 flex-1 flex-col gap-1 overflow-y-auto overscroll-contain p-2 [scrollbar-gutter:stable]", ae && "[scrollbar-width:none] [&::-webkit-scrollbar]:hidden"),
+				children: [
+					F ?? U.map((e) => {
+						if (!P) return null;
+						let t = P(e, { collapsed: m });
+						return !m || !ee ? /* @__PURE__ */ f(o.Fragment, { children: t }, e.key) : /* @__PURE__ */ f(i, {
+							content: e.tooltip ?? e.label,
+							side: "right",
+							children: /* @__PURE__ */ f("span", {
+								className: "block",
+								children: t
+							})
+						}, e.key);
+					}),
+					!F && !P && /* @__PURE__ */ f(w, {
+						items: U,
+						collapsed: m,
+						depth: 0,
+						showSectionLabels: te,
+						itemSize: ne,
+						activeIndicator: re,
+						onItemSelect: K,
+						renderLink: oe
+					}),
+					!F && U.length === 0 ? /* @__PURE__ */ f("div", {
+						"data-slot": "sidebar-search-empty",
+						className: "grid min-h-24 place-items-center px-4 text-center text-xs text-muted-foreground",
+						children: V?.empty ?? "No navigation items found."
+					}) : null
+				]
 			}),
-			(y || x || o || W.length > 0 || f && (_ || U.length > 0)) && /* @__PURE__ */ d("div", {
+			(x || C || s || G.length > 0 || m && (y || W.length > 0)) && /* @__PURE__ */ p("div", {
 				"data-slot": "sidebar-footer",
-				className: e("shrink-0 border-t p-3", T),
+				className: e("shrink-0 border-t p-3", O),
 				children: [
-					f ? /* @__PURE__ */ d(l, { children: [U.length > 0 ? /* @__PURE__ */ u("div", {
+					m ? /* @__PURE__ */ p(d, { children: [W.length > 0 ? /* @__PURE__ */ f("div", {
 						"data-slot": "sidebar-rail-actions",
 						className: "grid gap-2",
-						children: U.map((e) => /* @__PURE__ */ u(C, {
+						children: W.map((e) => /* @__PURE__ */ f(E, {
 							item: e,
 							collapsed: !0,
-							onItemSelect: G
+							onItemSelect: K
 						}, e.key))
-					}) : null, _ ? /* @__PURE__ */ u("div", {
+					}) : null, y ? /* @__PURE__ */ f("div", {
 						"data-slot": "sidebar-rail",
-						children: _
+						children: y
 					}) : null] }) : null,
-					!f && y ? /* @__PURE__ */ u("div", {
+					!m && x ? /* @__PURE__ */ f("div", {
 						"data-slot": "sidebar-account-wrap",
 						className: "mb-3",
-						children: /* @__PURE__ */ u(w, {
-							account: y,
+						children: /* @__PURE__ */ f(D, {
+							account: x,
 							collapsed: !1,
 							onAfterSelect: () => {
-								F && B && z?.();
+								I && B && z?.();
 							}
 						})
 					}) : null,
-					!f && W.length > 0 ? /* @__PURE__ */ u("div", {
+					!m && G.length > 0 ? /* @__PURE__ */ f("div", {
 						"data-slot": "sidebar-secondary-actions",
 						className: "mb-3 grid gap-2",
-						children: W.map((e) => /* @__PURE__ */ u(C, {
+						children: G.map((e) => /* @__PURE__ */ f(E, {
 							item: e,
 							collapsed: !1,
-							onItemSelect: G
+							onItemSelect: K
 						}, e.key))
 					}) : null,
-					!f && x ? /* @__PURE__ */ u("div", {
+					!m && C ? /* @__PURE__ */ f("div", {
 						"data-slot": "sidebar-footer-secondary",
 						className: "mb-3",
-						children: x
+						children: C
 					}) : null,
-					f && y ? /* @__PURE__ */ u("div", {
+					m && x ? /* @__PURE__ */ f("div", {
 						"data-slot": "sidebar-account-wrap",
-						children: /* @__PURE__ */ u(w, {
-							account: y,
+						children: /* @__PURE__ */ f(D, {
+							account: x,
 							collapsed: !0,
 							onAfterSelect: () => {
-								F && B && z?.();
+								I && B && z?.();
 							}
 						})
 					}) : null,
-					!f && o
+					!m && s
 				]
 			})
 		]
 	});
 }
-function E({ className: n, header: r, footer: o, items: c = [], collapsed: g, width: _ = p, collapsedWidth: v = m, mobileWidth: y = h, collapsedRail: b, railItems: x = [], footerAccount: S, secondaryActions: C = [], footerSecondary: w, tooltipOnCollapsed: E = !0, showSectionLabels: D = !0, itemSize: O = "md", activeIndicator: k = "bar", navigationLabel: A = "Primary navigation", responsive: j = !0, mobileBreakpoint: M = f, mobileOpen: N, defaultMobileOpen: P = !1, onMobileOpenChange: F, mobileTitle: I, mobileDescription: L, mobileToggleLabel: R = "Open navigation", mobileCloseLabel: z = "Close navigation", mobileToggleIcon: B, showMobileToggle: V = !0, closeOnSelect: H = !0, mobileToggleClassName: U, mobilePanelClassName: W, mobileOverlayClassName: G, renderMobileToggle: K, onItemSelect: q, renderItem: J, renderLink: ee, children: te, ...ne }) {
-	let Y = i(!0), re = g ?? Y?.collapsed ?? !1, ie = t(M), X = j && ie, [ae, oe] = a.useState(P), Z = N ?? Y?.mobileOpen ?? ae, Q = a.useCallback((e) => {
-		N == null && Y ? Y.setMobileOpen(e) : N ?? oe(e), F?.(e);
+function ee({ className: t, header: r, footer: i, items: s = [], collapsed: l, defaultCollapsed: u = !1, onCollapsedChange: v, variant: y = "sidebar", side: b = "left", collapsible: x = "icon", width: S = h, collapsedWidth: C = g, mobileWidth: w = _, collapsedRail: T, railItems: E = [], footerAccount: D, secondaryActions: ee = [], footerSecondary: te, tooltipOnCollapsed: ne = !0, showSectionLabels: re = !0, itemSize: ie = "md", activeIndicator: k = "bar", navigationLabel: ae = "Primary navigation", search: A, hideScrollbar: j = !0, keyboardShortcut: M = "b", persistKey: N, responsive: P = !0, mobileBreakpoint: oe = m, mobileOpen: F, defaultMobileOpen: I = !1, onMobileOpenChange: L, mobileTitle: R, mobileDescription: se, mobileToggleLabel: z = "Open navigation", mobileCloseLabel: B = "Close navigation", mobileToggleIcon: ce, showMobileToggle: V = !0, closeOnSelect: le = !0, mobileToggleClassName: ue, mobilePanelClassName: H, mobileOverlayClassName: U, renderMobileToggle: W, onItemSelect: G, renderItem: K, renderLink: q, children: de, ...fe }) {
+	let J = a(!0), [pe, me] = o.useState(u), Y = x === "none" ? !1 : l ?? J?.collapsed ?? pe, he = n(oe), X = P && he, [ge, _e] = o.useState(I), Z = F ?? J?.mobileOpen ?? ge, Q = o.useCallback((e) => {
+		x !== "none" && (l === void 0 && J ? J.setCollapsed(e) : l === void 0 && me(e), v?.(e), N && window.localStorage.setItem(N, String(e)));
+	}, [
+		l,
+		x,
+		v,
+		N,
+		J
+	]);
+	o.useEffect(() => {
+		if (!N || l !== void 0) return;
+		let e = window.localStorage.getItem(N);
+		(e === "true" || e === "false") && Q(e === "true");
 	}, [
+		l,
 		N,
+		Q
+	]), o.useEffect(() => {
+		if (!M || x === "none") return;
+		let e = (e) => {
+			(e.metaKey || e.ctrlKey) && e.key.toLocaleLowerCase() === M.toLocaleLowerCase() && (e.preventDefault(), Q(!Y));
+		};
+		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
+	}, [
+		Y,
+		x,
+		M,
+		Q
+	]);
+	let $ = o.useCallback((e) => {
+		F == null && J ? J.setMobileOpen(e) : F ?? _e(e), L?.(e);
+	}, [
 		F,
-		Y
+		L,
+		J
 	]);
-	a.useEffect(() => {
-		!X && Z && Q(!1);
+	o.useEffect(() => {
+		!X && Z && $(!1);
 	}, [
 		X,
 		Z,
-		Q
-	]), a.useEffect(() => {
+		$
+	]), o.useEffect(() => {
 		if (!X || !Z) return;
 		let e = document.body.style.overflow;
 		document.body.style.overflow = "hidden";
 		let t = (e) => {
-			e.key === "Escape" && Q(!1);
+			e.key === "Escape" && $(!1);
 		};
 		return window.addEventListener("keydown", t), () => {
 			document.body.style.overflow = e, window.removeEventListener("keydown", t);
@@ -434,83 +520,95 @@ function E({ className: n, header: r, footer: o, items: c = [], collapsed: g, wi
 	}, [
 		X,
 		Z,
-		Q
+		$
 	]);
-	let $ = {
-		className: n,
+	let ve = {
+		className: t,
 		header: r,
-		footer: o,
-		items: c,
-		collapsed: re,
-		width: _,
-		collapsedWidth: v,
-		collapsedRail: b,
-		railItems: x,
-		footerAccount: S,
-		secondaryActions: C,
-		footerSecondary: w,
-		tooltipOnCollapsed: E,
-		showSectionLabels: D,
-		itemSize: O,
+		footer: i,
+		items: s,
+		collapsed: Y,
+		width: S,
+		collapsedWidth: C,
+		collapsedRail: T,
+		railItems: E,
+		footerAccount: D,
+		secondaryActions: ee,
+		footerSecondary: te,
+		tooltipOnCollapsed: ne,
+		showSectionLabels: re,
+		itemSize: ie,
 		activeIndicator: k,
-		navigationLabel: A,
-		mobileCloseLabel: z,
-		closeOnSelect: H,
-		onItemSelect: q,
-		renderItem: J,
-		renderLink: ee,
-		children: te,
-		...ne
+		navigationLabel: ae,
+		search: A,
+		hideScrollbar: j,
+		variant: y,
+		side: b,
+		collapsible: x,
+		mobileCloseLabel: B,
+		closeOnSelect: le,
+		onItemSelect: G,
+		renderItem: K,
+		renderLink: q,
+		children: de,
+		...fe
 	};
-	if (!j || !X) return /* @__PURE__ */ u(T, { ...$ });
-	let se = /* @__PURE__ */ d("button", {
+	if (!P || !X) return /* @__PURE__ */ f(O, { ...ve });
+	let ye = /* @__PURE__ */ p("button", {
 		type: "button",
-		"aria-label": Z ? z : R,
+		"aria-label": Z ? B : z,
 		"data-slot": "sidebar-mobile-trigger",
 		"data-state": Z ? "open" : "closed",
-		className: e("inline-flex min-h-10 items-center gap-2 rounded-xl border border-[color:var(--aui-divider,var(--border))] bg-[color:var(--aui-page-bg,var(--background))] px-3 text-sm font-medium text-[color:var(--aui-page-foreground,var(--foreground))] shadow-sm transition hover:bg-[color:var(--aui-page-bg-alt,var(--muted))]", U),
-		onClick: () => Q(!Z),
-		children: [/* @__PURE__ */ u("span", {
+		className: e("inline-flex min-h-10 items-center gap-2 rounded-xl border border-[color:var(--aui-divider,var(--border))] bg-[color:var(--aui-page-bg,var(--background))] px-3 text-sm font-medium text-[color:var(--aui-page-foreground,var(--foreground))] shadow-sm transition hover:bg-[color:var(--aui-page-bg-alt,var(--muted))]", ue),
+		onClick: () => $(!Z),
+		children: [/* @__PURE__ */ f("span", {
 			className: "inline-flex size-8 items-center justify-center rounded-lg bg-[color:var(--aui-page-bg-alt,var(--muted))]",
-			children: B ?? /* @__PURE__ */ u(s, { className: "size-4" })
-		}), /* @__PURE__ */ u("span", { children: Z ? z : R })]
+			children: ce ?? /* @__PURE__ */ f(c, { className: "size-4" })
+		}), /* @__PURE__ */ f("span", { children: Z ? B : z })]
 	});
-	return /* @__PURE__ */ d(l, { children: [V ? K ? K({
+	return /* @__PURE__ */ p(d, { children: [V ? W ? W({
 		open: Z,
-		setOpen: Q
-	}) : se : null, /* @__PURE__ */ d("div", {
+		setOpen: $
+	}) : ye : null, /* @__PURE__ */ p("div", {
 		"data-slot": "sidebar-mobile-root",
 		className: "relative z-40",
-		children: [/* @__PURE__ */ u("button", {
+		children: [/* @__PURE__ */ f("button", {
 			type: "button",
 			"aria-label": "Dismiss navigation",
 			"data-slot": "sidebar-mobile-overlay",
 			"data-state": Z ? "open" : "closed",
-			className: e("fixed inset-0 z-40 bg-black/45 transition-opacity duration-200", Z ? "opacity-100" : "pointer-events-none opacity-0", G),
+			className: e("fixed inset-0 z-40 bg-black/45 transition-opacity duration-200", Z ? "opacity-100" : "pointer-events-none opacity-0", U),
 			style: {
 				opacity: +!!Z,
 				pointerEvents: Z ? "auto" : "none"
 			},
-			onClick: () => Q(!1)
-		}), /* @__PURE__ */ u(T, {
-			...$,
+			onClick: () => $(!1)
+		}), /* @__PURE__ */ f(O, {
+			...ve,
 			mobile: !0,
 			collapsed: !1,
-			mobileTitle: I,
-			mobileDescription: L,
-			onRequestClose: () => Q(!1),
+			mobileTitle: R,
+			mobileDescription: se,
+			onRequestClose: () => $(!1),
 			"data-state": Z ? "open" : "closed",
 			role: "dialog",
 			"aria-modal": "true",
-			"aria-label": typeof I == "string" ? I : "Navigation",
-			className: e("fixed inset-y-0 left-0 z-50 max-w-[22rem] border-r border-[color:var(--aui-divider,var(--border))] bg-[color:var(--aui-page-bg,var(--background))] shadow-2xl transition-transform duration-200 ease-out", Z ? "translate-x-0" : "-translate-x-full", W, n),
+			"aria-label": typeof R == "string" ? R : "Navigation",
+			className: e("fixed inset-y-0 z-50 max-w-[22rem] border-[color:var(--aui-divider,var(--border))] bg-[color:var(--aui-page-bg,var(--background))] shadow-2xl transition-transform duration-200 ease-out", b === "left" ? "left-0 border-r" : "right-0 border-l", Z ? "translate-x-0" : b === "left" ? "-translate-x-full" : "translate-x-full", H, t),
 			style: {
-				width: y,
-				minWidth: y,
-				translate: Z ? "0 0" : "-100% 0"
+				width: w,
+				minWidth: w,
+				translate: Z ? "0 0" : b === "left" ? "-100% 0" : "100% 0"
 			}
 		})]
 	})] });
 }
+function te({ className: t, ...n }) {
+	return /* @__PURE__ */ f("main", {
+		"data-slot": "sidebar-inset",
+		className: e("relative flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:border md:peer-data-[variant=inset]:shadow-sm", t),
+		...n
+	});
+}
 //#endregion
-export { E as Sidebar };
+export { ee as Sidebar, te as SidebarInset };