@logicplanes/kaeso-ui 0.4.4 → 0.4.5

package/dist/chunks/sidebar-Dq7oGOje.js

@@ -0,0 +1,664 @@
+"use client";
+import { t as e } from "./cn-BjnOAUrA.js";
+import { r as t } from "./link-provider-cvl8lSTT.js";
+import { i as n } from "./context-BELWW79w.js";
+import { t as r } from "./icon-CBzOwqrX.js";
+import { a as i, f as a, l as o, o as s, p as c, r as l, s as u } from "./tooltip-Tkm-urbi.js";
+import { t as d } from "./merge-refs-BN1FyQt9.js";
+import { t as f } from "./observe-resize-DhxhmoyB.js";
+import { t as p } from "./nav-wordmark-J4pB_vjr.js";
+import { r as m } from "./skeleton-D-qk3mes.js";
+import { n as h, t as g } from "./disclosure-BtYRTDO3.js";
+import { t as _ } from "./when-idle-Cy3pinqO.js";
+import { createContext as v, forwardRef as y, useCallback as b, useContext as x, useEffect as S, useId as C, useLayoutEffect as w, useMemo as T, useRef as E, useState as D, useSyncExternalStore as O } from "react";
+import { Fragment as k, jsx as A, jsxs as j } from "react/jsx-runtime";
+import { Alert02Icon as M, ArrowLeft01Icon as ee, SidebarLeftIcon as N, UnfoldMoreIcon as P } from "@hugeicons/core-free-icons";
+import { Collapsible as F } from "@base-ui/react/collapsible";
+//#region src/hooks/use-stored-state.ts
+var I, te;
+function ne(e) {
+	try {
+		let t = localStorage.getItem(e);
+		if (t !== null) return t;
+	} catch {}
+	return te?.get(e) ?? null;
+}
+function re(e, t) {
+	I ??= /* @__PURE__ */ new Map();
+	let n = I.get(e);
+	n || I.set(e, n = /* @__PURE__ */ new Set()), n.add(t);
+	let r = (n) => {
+		n.key === e && t();
+	};
+	return window.addEventListener("storage", r), () => {
+		n.delete(t), window.removeEventListener("storage", r);
+	};
+}
+var ie = () => () => void 0, ae = () => null;
+function L(e, t) {
+	let n = e ? `kaeso:${e}` : void 0, [r, i] = D(t), a = b((e) => n ? re(n, e) : () => void 0, [n]), o = b(() => n ? ne(n) : null, [n]), s = O(n ? a : ie, o, ae), c = T(() => {
+		if (s !== null) try {
+			return { value: JSON.parse(s) };
+		} catch {
+			return;
+		}
+	}, [s]), l = b((e) => {
+		if (!n) {
+			i(e);
+			return;
+		}
+		let t = JSON.stringify(e);
+		try {
+			localStorage.setItem(n, t);
+		} catch {
+			(te ??= /* @__PURE__ */ new Map()).set(n, t);
+		}
+		I?.get(n)?.forEach((e) => e());
+	}, [n]);
+	return [n ? c ? c.value : t : r, l];
+}
+//#endregion
+//#region src/components/sidebar/sidebar.tsx
+var R = (e) => e.split("**").map((e, t) => t % 2 ? /* @__PURE__ */ A("span", {
+	className: "font-semibold text-fg",
+	children: e
+}, t) : e), z = {
+	mode: {
+		expanded: { classes: "w-(--k-sidebar-width)" },
+		rail: { classes: "w-60" }
+	},
+	item: {
+		default: { classes: "text-fg hover:bg-fill-2 active:bg-fill-3" },
+		active: { classes: "bg-fill-3 text-fg" }
+	},
+	caption: {
+		secondary: { classes: "text-fg-secondary" },
+		danger: { classes: "text-danger-text" }
+	}
+}, oe = {
+	mode: "expanded",
+	item: "default",
+	caption: "secondary"
+}, B = /* @__PURE__ */ v({
+	rail: !1,
+	setRail: () => void 0,
+	collapsed: !1,
+	setCollapsed: () => void 0,
+	peeking: !1,
+	setPeeking: () => void 0,
+	width: 248,
+	setWidth: () => void 0,
+	previewWidth: () => void 0,
+	storageKey: void 0,
+	shortcut: !1
+}), V = () => x(B), H = /* @__PURE__ */ v(!1), U = /* @__PURE__ */ v(null);
+function W({ children: e, storageKey: t, defaultRail: n = !1, shortcut: r = !0 }) {
+	let [i, a] = L(t ? `${t}:rail` : void 0, n), [o, s] = L(t ? `${t}:width` : void 0, 248), [c, l] = D(null), u = G(c ?? o), [d, f] = L(t ? `${t}:collapsed` : void 0, !1), [p, m] = D(!1), h = E(null), g = b((e) => {
+		let t = document.activeElement instanceof HTMLElement ? document.activeElement : null, n = e && !!t?.closest("[data-sidebar-root]"), r = !e && !!t?.closest("[data-sidebar-expand]");
+		n && (h.current = t), f(e), m(!1), n && requestAnimationFrame(() => document.querySelector("[data-sidebar-expand]")?.focus()), r && requestAnimationFrame(() => {
+			((h.current?.isConnected ? h.current : null) ?? document.querySelector("[data-sidebar-root] [data-sidebar-collapse]"))?.focus();
+		});
+	}, [f]);
+	S(() => {
+		if (!r) return;
+		let e = (e) => {
+			if (e.key !== "[" || e.defaultPrevented || e.repeat || e.metaKey || e.ctrlKey && !e.altKey) return;
+			let t = e.target;
+			t instanceof HTMLElement && (t.isContentEditable || t.closest(se)) || !document.querySelector("[aria-modal=\"true\"]") && window.matchMedia("(min-width: 1024px)").matches && g(!d);
+		};
+		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
+	}, [
+		d,
+		g,
+		r
+	]);
+	let _ = T(() => ({
+		rail: i,
+		setRail: a,
+		collapsed: d,
+		setCollapsed: g,
+		peeking: p,
+		setPeeking: m,
+		width: u,
+		setWidth: s,
+		previewWidth: l,
+		storageKey: t,
+		shortcut: r
+	}), [
+		i,
+		a,
+		d,
+		g,
+		p,
+		u,
+		s,
+		t,
+		r
+	]);
+	return /* @__PURE__ */ A(B.Provider, {
+		value: _,
+		children: e
+	});
+}
+process.env.NODE_ENV !== "production" && (W.displayName = "Sidebar.Provider");
+var se = "input, textarea, select, [contenteditable]:not([contenteditable=\"false\"]), [role=\"textbox\"], [role=\"combobox\"], [role=\"searchbox\"]", ce = 500, le = 232, ue = 280, G = (e) => Math.round(Math.min(280, Math.max(232, Number.isFinite(e) ? e : 248))), K = /* @__PURE__ */ y(function({ resizable: t = !0, className: r, children: i, style: a, "aria-label": o, ...s }, c) {
+	let { rail: l, width: u, setWidth: d, previewWidth: f, collapsed: p, setCollapsed: m } = V(), h = n(), [g, _] = D(null), v = E(void 0);
+	S(() => () => clearTimeout(v.current), []);
+	let [y, C] = D(!1), w = E(null);
+	S(() => () => w.current?.(), []);
+	let T = b((e) => {
+		if (e.button !== 0) return;
+		e.preventDefault(), w.current?.();
+		let t = e.currentTarget, n = e.clientX, r = u, i = !1, a = r, o = (e) => {
+			Math.abs(e.clientX - n) > 3 && (i = !0, C(!0)), i && (a = G(r + e.clientX - n), f(a));
+		}, s = () => {
+			t.removeEventListener("pointermove", o), t.removeEventListener("pointerup", c), t.removeEventListener("pointercancel", s), document.body.style.cursor = "", document.body.style.userSelect = "", w.current = null, C(!1), i && d(a), f(null);
+		}, c = () => {
+			s(), i || m(!0);
+		};
+		t.setPointerCapture(e.pointerId), t.addEventListener("pointermove", o), t.addEventListener("pointerup", c), t.addEventListener("pointercancel", s), document.body.style.cursor = "col-resize", document.body.style.userSelect = "none", w.current = s;
+	}, [
+		u,
+		d,
+		f,
+		m
+	]), O = x(H), k = p && !O, M = /* @__PURE__ */ A("nav", {
+		ref: c,
+		"aria-label": o ?? h("sidebar.main", "Main"),
+		"data-rail": l || void 0,
+		"data-sidebar-root": "",
+		className: e("group/sidebar relative flex h-full shrink-0 flex-col bg-chrome text-fg", l ? z.mode.rail.classes : z.mode.expanded.classes, r),
+		style: {
+			"--k-sidebar-width": `${u}px`,
+			...a
+		},
+		...s,
+		children: i
+	});
+	return O ? M : /* @__PURE__ */ j("div", {
+		className: "relative flex h-full shrink-0",
+		children: [/* @__PURE__ */ A("div", {
+			className: "sidebar-motion relative h-full shrink-0",
+			style: { width: k ? 8 : l ? 60 : u },
+			...k ? {
+				"data-collapsed": "",
+				inert: !0,
+				"aria-hidden": !0
+			} : {},
+			children: /* @__PURE__ */ A("div", {
+				className: "sidebar-content-motion h-full",
+				style: { width: l ? 60 : u },
+				children: M
+			})
+		}), t && !l && !k && /* @__PURE__ */ j("div", {
+			role: "separator",
+			"aria-orientation": "vertical",
+			"aria-label": h("sidebar.resizeOrCollapse", "Resize sidebar; press Enter to collapse"),
+			"aria-valuemin": 232,
+			"aria-valuemax": 280,
+			"aria-valuenow": u,
+			"aria-valuetext": `${u} px`,
+			tabIndex: 0,
+			onPointerDown: T,
+			onPointerEnter: (e) => {
+				let t = Math.round(e.clientY - e.currentTarget.getBoundingClientRect().top);
+				clearTimeout(v.current), v.current = setTimeout(() => _(t), ce);
+			},
+			onPointerLeave: () => {
+				clearTimeout(v.current), _(null);
+			},
+			onKeyDown: (e) => {
+				let t = e.key === "ArrowLeft" ? u - 8 : e.key === "ArrowRight" ? u + 8 : e.key === "Home" ? 232 : e.key === "End" ? 280 : null;
+				t !== null && (e.preventDefault(), d(G(t))), (e.key === "Enter" || e.key === " ") && (e.preventDefault(), m(!0));
+			},
+			className: "group/edge absolute top-0 right-0 z-10 h-full w-8 cursor-col-resize rounded-pill focus-ring-inset",
+			children: [/* @__PURE__ */ A("span", {
+				"aria-hidden": !0,
+				className: "absolute inset-y-0 right-0 w-1 bg-line-strong opacity-0 transition-control group-hover/edge:opacity-100 forced-line"
+			}), g !== null && !y && /* @__PURE__ */ j("span", {
+				"aria-hidden": !0,
+				className: "pointer-events-none absolute left-16 flex w-max flex-col gap-2 rounded-tooltip-lg bg-tooltip px-12 py-8 text-small text-fg-secondary shadow-raised",
+				style: { top: Math.max(8, g - 24) },
+				children: [/* @__PURE__ */ A("span", { children: R(h("sidebar.dragToResize", "**Drag** to resize")) }), /* @__PURE__ */ A("span", { children: R(h("sidebar.clickToCollapse", "**Click** to collapse")) })]
+			})]
+		})]
+	});
+});
+process.env.NODE_ENV !== "production" && (K.displayName = "Sidebar");
+var q = /* @__PURE__ */ y(function({ className: t, ...n }, r) {
+	return /* @__PURE__ */ A("div", {
+		ref: r,
+		className: e("mt-8 flex h-52 shrink-0 items-center gap-4 px-8 transition-control group-data-scrolled-over/sidebar:hairline-b-strong", t),
+		...n
+	});
+});
+process.env.NODE_ENV !== "production" && (q.displayName = "Sidebar.Header");
+var J = /* @__PURE__ */ y(function({ href: t, label: n = "Kaeso", children: r, className: i }, a) {
+	let { rail: o } = V();
+	return o ? /* @__PURE__ */ A(q, {
+		ref: a,
+		className: e("justify-center px-0", i),
+		children: r
+	}) : /* @__PURE__ */ j(q, {
+		ref: a,
+		className: e("justify-between pr-16 pl-28", i),
+		children: [/* @__PURE__ */ A(Y, {
+			href: t,
+			label: n
+		}), r && /* @__PURE__ */ A("span", {
+			className: "flex items-center",
+			children: r
+		})]
+	});
+});
+process.env.NODE_ENV !== "production" && (J.displayName = "Sidebar.Brand");
+var Y = /* @__PURE__ */ y(function({ href: e, label: n = "Kaeso" }, r) {
+	let i = t();
+	return e ? /* @__PURE__ */ A(i, {
+		ref: r,
+		href: e,
+		"aria-label": n,
+		className: "-mx-4 flex h-32 items-center rounded-code px-4 text-fg focus-ring",
+		children: /* @__PURE__ */ A(p, { decorative: !0 })
+	}) : /* @__PURE__ */ A(p, {
+		ref: r,
+		title: n,
+		className: "text-fg"
+	});
+});
+process.env.NODE_ENV !== "production" && (Y.displayName = "BrandWordmark");
+var de = /* @__PURE__ */ u(() => import("./sidebar-menu-QSSNu1jJ.js"), { base: () => import.meta.url });
+function X({ trigger: e, side: t, header: n, footer: r, children: a }) {
+	let [c, l] = D(!1), [u, f] = D(!1), p = o(de, u || c, () => {
+		f(!1), l(!1);
+	}), [m] = D(s), h = E(null), g = e.props.ref, v = T(() => d(h, g), [g]), y = c && !p;
+	S(() => _(() => f(!0)), []), S(() => {
+		if (!y) return;
+		let e = h.current?.ownerDocument ?? document, t = (e) => {
+			e.key === "Escape" && (e.stopPropagation(), l(!1));
+		}, n = (e) => {
+			h.current?.contains(e.target) || l(!1);
+		};
+		return e.addEventListener("keydown", t, !0), e.addEventListener("pointerdown", n, !0), () => {
+			e.removeEventListener("keydown", t, !0), e.removeEventListener("pointerdown", n, !0);
+		};
+	}, [y]);
+	let b = () => f(!0), x = p ? { ref: v } : {
+		ref: v,
+		"aria-haspopup": "menu",
+		"aria-expanded": c,
+		...c ? { "data-popup-open": "" } : {},
+		onPointerEnter: b,
+		onFocus: b,
+		onClick: () => l((e) => !e),
+		onKeyDown: (e) => {
+			(e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), l(!0));
+		},
+		onBlur: (e) => {
+			c && e.relatedTarget && !e.currentTarget.contains(e.relatedTarget) && l(!1);
+		}
+	};
+	return /* @__PURE__ */ j(k, { children: [/* @__PURE__ */ A(i, {
+		store: m,
+		merge: p?.mergeTriggerProps,
+		extra: x,
+		children: e
+	}), p && /* @__PURE__ */ A(p.SidebarMenuRoot, {
+		open: c,
+		onOpenChange: l,
+		triggerProps: m,
+		side: t,
+		header: n,
+		footer: r,
+		children: a
+	})] });
+}
+process.env.NODE_ENV !== "production" && (X.displayName = "Sidebar.Menu");
+var Z = /* @__PURE__ */ y(function({ avatar: t, label: i, trailing: o, caption: s, captionTone: l = "secondary", children: u, header: d, footer: f, "aria-label": p, className: m, "data-force": h }, g) {
+	let { rail: _ } = V(), v = n(), y = a(s), b = a(i), x = p ?? v("sidebar.switchOrOpenSettings", "Switch or open settings"), S = c(b ? x : void 0);
+	return /* @__PURE__ */ j(k, { children: [/* @__PURE__ */ A(X, {
+		side: "top",
+		header: d,
+		footer: f,
+		trigger: /* @__PURE__ */ j("button", {
+			ref: g,
+			type: "button",
+			...b ? { "aria-describedby": S.id } : { "aria-label": x },
+			...h ? { "data-force": h } : {},
+			className: e("group/sw flex h-36 w-full min-w-0 cursor-pointer items-center gap-8 rounded-pill px-12 text-left text-body font-medium text-fg transition-control hover:bg-fill-2 active:bg-fill-3 open:bg-fill-3 focus-ring-inset coarse:h-44", _ && "justify-center px-0", m),
+			children: [
+				/* @__PURE__ */ j("span", {
+					className: "relative flex size-18 shrink-0 items-center justify-center",
+					children: [t, _ && y && l === "danger" && /* @__PURE__ */ A(r, {
+						icon: M,
+						size: "xs",
+						className: "absolute -right-6 -bottom-6 rounded-pill bg-chrome text-danger-text"
+					})]
+				}),
+				!_ && (y ? /* @__PURE__ */ j("span", {
+					className: "flex min-w-0 flex-1 flex-col",
+					children: [/* @__PURE__ */ A("span", {
+						className: "truncate",
+						children: i
+					}), /* @__PURE__ */ A("span", {
+						className: e("truncate text-caption font-regular", z.caption[l].classes),
+						children: s
+					})]
+				}) : /* @__PURE__ */ A("span", {
+					className: "min-w-0 flex-1 truncate",
+					children: i
+				})),
+				_ && b && /* @__PURE__ */ A("span", {
+					className: "sr-only",
+					children: i
+				}),
+				_ && y && /* @__PURE__ */ A("span", {
+					className: "sr-only",
+					children: s
+				}),
+				!_ && o,
+				!_ && /* @__PURE__ */ A(r, {
+					icon: P,
+					size: "sm",
+					className: "text-fg-tertiary transition-control group-hover/sw:text-fg-secondary"
+				})
+			]
+		}),
+		children: u
+	}), S.node] });
+});
+process.env.NODE_ENV !== "production" && (Z.displayName = "Sidebar.Switcher");
+var Q = /* @__PURE__ */ y(function({ avatar: i, label: o, children: s, href: u, header: d, footer: f, "aria-label": p, className: m, "data-force": h }, g) {
+	let { rail: _ } = V(), v = n(), y = t(), b = a(o), x = s ? p ?? v("sidebar.switchPlace", "Switch project") : p, S = c(b ? x : void 0), C = b ? S.id ? { "aria-describedby": S.id } : {} : x ? { "aria-label": x } : {}, w = e("group/place flex h-36 w-full min-w-0 items-center gap-8 rounded-pill px-12 text-left text-body font-medium text-fg", (s || u) && "cursor-pointer transition-control hover:bg-fill-2 active:bg-fill-3 open:bg-fill-3 focus-ring-inset coarse:h-44", _ && "justify-center px-0", m), T = /* @__PURE__ */ j(k, { children: [
+		/* @__PURE__ */ A("span", {
+			className: "flex size-18 shrink-0 items-center justify-center",
+			children: i
+		}),
+		_ ? /* @__PURE__ */ A("span", {
+			className: "sr-only",
+			children: o
+		}) : /* @__PURE__ */ A(pe, { label: o }),
+		!_ && s && /* @__PURE__ */ A(r, {
+			icon: P,
+			size: "sm",
+			className: "text-fg-tertiary transition-control group-hover/place:text-fg-secondary"
+		})
+	] }), E = {
+		className: w,
+		...h ? { "data-force": h } : {}
+	};
+	if (s) return /* @__PURE__ */ j(k, { children: [/* @__PURE__ */ A(X, {
+		side: "bottom",
+		header: d,
+		footer: f,
+		trigger: /* @__PURE__ */ A("button", {
+			ref: g,
+			type: "button",
+			...C,
+			...E,
+			children: T
+		}),
+		children: s
+	}), S.node] });
+	let D = u ? /* @__PURE__ */ A(y, {
+		ref: g,
+		href: u,
+		...C,
+		...E,
+		children: T
+	}) : /* @__PURE__ */ A("div", {
+		ref: g,
+		...E,
+		children: T
+	});
+	return /* @__PURE__ */ j(k, { children: [_ ? /* @__PURE__ */ A(l, {
+		content: o,
+		side: "right",
+		children: D
+	}) : D, u && S.node] });
+});
+process.env.NODE_ENV !== "production" && (Q.displayName = "Sidebar.Place");
+function fe(e, t) {
+	let [n, r] = D(!1);
+	return w(() => {
+		let n = e.current;
+		if (!t || !n || typeof ResizeObserver > "u") return;
+		let i = () => r(n.scrollWidth > n.clientWidth);
+		return i(), f([n], i);
+	}, [e, t]), t && n;
+}
+function pe({ label: e }) {
+	let t = E(null), n = fe(t, !0);
+	return /* @__PURE__ */ A(l, {
+		content: e,
+		side: "right",
+		disabled: !n,
+		children: /* @__PURE__ */ A("span", {
+			ref: t,
+			className: "min-w-0 flex-1 truncate",
+			children: e
+		})
+	});
+}
+var me = /* @__PURE__ */ y(function({ className: t, ...n }, r) {
+	let { rail: i } = V(), a = E(null), o = T(() => d(a, r), [r]);
+	return S(() => {
+		let e = a.current, t = e?.closest("[data-sidebar-root]");
+		if (!e || !t) return;
+		let n = () => {
+			t.toggleAttribute("data-scrolled-under", e.scrollHeight - e.scrollTop - e.clientHeight > 1), t.toggleAttribute("data-scrolled-over", e.scrollTop > 1);
+		};
+		n(), e.addEventListener("scroll", n, { passive: !0 });
+		let r = f([e, ...e.children], n);
+		return () => {
+			e.removeEventListener("scroll", n), r(), t.removeAttribute("data-scrolled-under"), t.removeAttribute("data-scrolled-over");
+		};
+	}, []), /* @__PURE__ */ A("div", {
+		ref: o,
+		className: e("flex min-h-0 flex-1 flex-col gap-16 overflow-y-auto overscroll-contain pt-8 pb-16 scrollbar-quiet", i ? "px-8" : "px-16", t),
+		...n
+	});
+});
+process.env.NODE_ENV !== "production" && (me.displayName = "Sidebar.Content");
+var he = /* @__PURE__ */ y(function({ className: t, ...n }, r) {
+	let { rail: i } = V();
+	return /* @__PURE__ */ A("div", {
+		ref: r,
+		className: e("flex shrink-0 items-center gap-4 pt-8 pb-12 transition-control group-data-scrolled-under/sidebar:hairline-t-strong", i ? "px-8" : "px-16", t),
+		...n
+	});
+});
+process.env.NODE_ENV !== "production" && (he.displayName = "Sidebar.Footer");
+var ge = /* @__PURE__ */ y(function({ label: t, id: n, defaultOpen: r = !0, collapsible: i = !0, children: a, className: o }, s) {
+	let { storageKey: c, rail: l } = V(), [u, d] = L(c && n ? `${c}:group:${n}` : void 0, r), f = C();
+	if (!t || !i || l) {
+		let n = !!t && !l;
+		return /* @__PURE__ */ j("div", {
+			ref: s,
+			...n ? {
+				role: "group",
+				"aria-labelledby": f
+			} : {},
+			className: e("flex flex-col", o),
+			children: [n && /* @__PURE__ */ A("div", {
+				id: f,
+				className: "flex h-32 items-center px-12 text-caption font-medium text-fg-secondary",
+				children: t
+			}), /* @__PURE__ */ A("ul", {
+				className: "flex flex-col gap-2",
+				children: a
+			})]
+		});
+	}
+	return /* @__PURE__ */ j(F.Root, {
+		ref: s,
+		open: u,
+		onOpenChange: (e) => d(e),
+		className: e("flex flex-col", o),
+		children: [/* @__PURE__ */ j(F.Trigger, {
+			className: e(g, "h-32 text-caption font-medium text-fg-secondary hover:bg-fill-2 hover:text-fg active:bg-fill-3 coarse:h-44"),
+			children: [/* @__PURE__ */ A("span", {
+				className: "min-w-0 flex-1 truncate",
+				children: t
+			}), /* @__PURE__ */ A(h, {})]
+		}), /* @__PURE__ */ A(F.Panel, {
+			className: "collapse-motion",
+			children: /* @__PURE__ */ A("ul", {
+				className: "flex flex-col gap-2 pt-2",
+				children: a
+			})
+		})]
+	});
+});
+process.env.NODE_ENV !== "production" && (ge.displayName = "Sidebar.Group");
+var _e = [
+	"",
+	"pl-32",
+	"pl-52"
+], ve = /* @__PURE__ */ y(function({ children: n, icon: i, leading: a, href: o, onClick: s, active: c, count: u, trailing: d, depth: f = 0, shortcut: p, className: m, "data-force": h }, g) {
+	let { rail: _ } = V(), v = t(), y = x(U), b = E(null), S = fe(b, !_), C = (e) => {
+		s?.(e), y && !y.peek && !o && !e.defaultPrevented && y.close();
+	}, w = e("group/si flex h-32 w-full min-w-0 cursor-pointer items-center gap-8 rounded-pill px-12 text-left text-body font-medium transition-control focus-ring-inset coarse:h-44", c ? z.item.active.classes : z.item.default.classes, !_ && _e[f], _ && "justify-center px-0", m), T = /* @__PURE__ */ j(k, { children: [
+		a ? /* @__PURE__ */ A("span", {
+			className: "flex size-18 shrink-0 items-center justify-center",
+			children: a
+		}) : i && /* @__PURE__ */ A(r, {
+			icon: i,
+			size: "md",
+			className: e("text-fg-secondary transition-control group-hover/si:text-fg", c && "text-fg")
+		}),
+		_ ? /* @__PURE__ */ A("span", {
+			className: "sr-only",
+			children: n
+		}) : /* @__PURE__ */ A("span", {
+			ref: b,
+			className: "min-w-0 flex-1 truncate",
+			children: n
+		}),
+		!_ && u !== void 0 && /* @__PURE__ */ A("span", {
+			className: e("text-caption font-medium tabular", c ? "text-fg" : "text-fg-tertiary"),
+			children: u
+		}),
+		!_ && d
+	] }), D = {
+		className: w,
+		...c ? { "aria-current": "page" } : {},
+		...h ? { "data-force": h } : {}
+	}, O = o ? /* @__PURE__ */ A(v, {
+		ref: g,
+		href: o,
+		...D,
+		...s ? { onClick: s } : {},
+		children: T
+	}) : /* @__PURE__ */ A("button", {
+		ref: g,
+		type: "button",
+		...D,
+		onClick: C,
+		children: T
+	});
+	return /* @__PURE__ */ A("li", {
+		className: "flex",
+		children: /* @__PURE__ */ A(l, {
+			content: n,
+			side: "right",
+			disabled: !_ && !S,
+			..._ && p ? { shortcut: p } : {},
+			children: O
+		})
+	});
+});
+process.env.NODE_ENV !== "production" && (ve.displayName = "Sidebar.Item");
+var ye = /* @__PURE__ */ y(function({ href: i, children: a, className: o }, s) {
+	let c = t(), l = n();
+	return /* @__PURE__ */ j(c, {
+		ref: s,
+		href: i,
+		className: e("flex h-32 items-center gap-8 rounded-pill px-12 text-body font-medium text-fg-secondary transition-control hover:bg-fill-2 hover:text-fg active:bg-fill-3 focus-ring-inset coarse:h-44", o),
+		children: [/* @__PURE__ */ A(r, {
+			icon: ee,
+			size: "md"
+		}), a ?? l("sidebar.backToApp", "Back to app")]
+	});
+});
+process.env.NODE_ENV !== "production" && (ye.displayName = "Sidebar.BackLink");
+var be = /* @__PURE__ */ y(function({ rows: e = 5 }, t) {
+	let r = n();
+	return /* @__PURE__ */ A("div", {
+		ref: t,
+		role: "status",
+		"aria-label": r("sidebar.loading", "Loading navigation"),
+		"aria-busy": !0,
+		className: "flex flex-col gap-2",
+		children: Array.from({ length: e }, (e, t) => /* @__PURE__ */ j("div", {
+			className: "flex h-32 items-center gap-8 px-12",
+			children: [/* @__PURE__ */ A(m, { className: "size-18 rounded-pill" }), /* @__PURE__ */ A(m, {
+				className: "h-12 rounded-pill",
+				style: { width: `${48 + t * 37 % 40}%` }
+			})]
+		}, t))
+	});
+});
+process.env.NODE_ENV !== "production" && (be.displayName = "Sidebar.Loading");
+var xe = /* @__PURE__ */ y(function({ className: t }, i) {
+	let { collapsed: a, setCollapsed: o, shortcut: s } = V(), c = x(U), u = n(), d = c ? c.peek ? u("sidebar.keepOpen", "Keep sidebar open") : u("sidebar.closeNavigation", "Close navigation") : a ? u("sidebar.expand", "Expand sidebar") : u("sidebar.collapse", "Collapse sidebar"), f = () => {
+		c?.peek ? o(!1) : c ? c.close() : o(!a);
+	};
+	return /* @__PURE__ */ A(l, {
+		content: d,
+		...s && (!c || c.peek) ? { shortcut: ["["] } : {},
+		children: /* @__PURE__ */ A("button", {
+			ref: i,
+			type: "button",
+			"data-sidebar-collapse": "",
+			"aria-label": d,
+			...c ? {} : { "aria-expanded": !a },
+			onClick: f,
+			className: e("relative inline-flex size-32 cursor-pointer items-center justify-center rounded-pill text-fg-secondary transition-control tap-target hover:bg-fill-2 hover:text-fg active:bg-fill-3 focus-ring", t),
+			children: /* @__PURE__ */ A(r, {
+				icon: N,
+				size: "sm"
+			})
+		})
+	});
+});
+process.env.NODE_ENV !== "production" && (xe.displayName = "Sidebar.CollapseToggle");
+var $ = /* @__PURE__ */ y(function({ className: t }, i) {
+	let { rail: a, setRail: o } = V(), s = n()("sidebar.iconsOnly", "Icons only");
+	return /* @__PURE__ */ A(l, {
+		content: s,
+		side: "right",
+		children: /* @__PURE__ */ A("button", {
+			ref: i,
+			type: "button",
+			"aria-label": s,
+			"aria-pressed": a,
+			onClick: () => o(!a),
+			className: e("relative inline-flex size-32 cursor-pointer items-center justify-center rounded-pill text-fg-secondary transition-control tap-target hover:bg-fill-2 hover:text-fg active:bg-fill-3 aria-pressed:bg-fill-3 aria-pressed:text-fg focus-ring", t),
+			children: /* @__PURE__ */ A(r, {
+				icon: N,
+				size: "sm"
+			})
+		})
+	});
+});
+process.env.NODE_ENV !== "production" && ($.displayName = "Sidebar.RailToggle");
+var Se = /* @__PURE__ */ Object.assign(K, {
+	Provider: W,
+	Header: q,
+	Brand: J,
+	Switcher: Z,
+	Place: Q,
+	Content: me,
+	Footer: he,
+	Group: ge,
+	Item: ve,
+	BackLink: ye,
+	Loading: be,
+	RailToggle: $,
+	CollapseToggle: xe
+});
+//#endregion
+export { le as a, U as c, ue as i, V as l, oe as n, Se as o, z as r, H as s, Y as t };
+
+//# sourceMappingURL=sidebar-Dq7oGOje.js.map