themelia-react-ui 2.0.3 → 2.0.5

package/dist/sidebar-f9gRWXIR.js

@@ -0,0 +1,1001 @@
+"use client";
+import { d as e, i as t, r as n } from "./ui-provider-C-74NVLc.js";
+import { useStrings as r } from "./lib/strings.js";
+import { t as i } from "./utils-B6kKb8jB.js";
+import { t as a } from "./affordance-geometry.generated-P-aVJisu.js";
+import { a as o, c as s, i as c, s as l, t as u } from "./sheet-BGPERY55.js";
+import { t as d } from "./separator-Bb17I4pu.js";
+import { c as f, o as p } from "./typography-BQnine1k.js";
+import { t as m } from "./focus-recipes-B653VaLq.js";
+import { t as h } from "./motion-recipes-DitYv6P2.js";
+import { a as g, o as _, s as v } from "./tooltip-8wz5S_Zr.js";
+import { t as y } from "./button-S2Cubiiz.js";
+import { a as b } from "./surface-recipes-BKRVW8Os.js";
+import { r as x } from "./skeleton-BapcJd9C.js";
+import { f as S, y as C } from "./form-sizing-Bs2qFUeE.js";
+import { t as w } from "./input-DMBwAZmr.js";
+import { n as T, r as E, t as D } from "./navigation-row-recipes-BGVLvU_O.js";
+import * as O from "react";
+import { Fragment as k, jsx as A, jsxs as j } from "react/jsx-runtime";
+import { PanelLeftIcon as M, PanelRightIcon as N } from "lucide-react";
+import { mergeProps as P } from "@base-ui/react/merge-props";
+import { useRender as F } from "@base-ui/react/use-render";
+import { cva as I } from "class-variance-authority";
+import { createPortal as L } from "react-dom";
+//#region src/components/ui/sidebar-state.tsx
+var R = {
+	primary: 768,
+	secondary: 1024,
+	aside: 1440
+}, z = O.createContext(null), B = z.Provider, V = O.createContext(null);
+function H() {
+	return O.useContext(V);
+}
+function U(e) {
+	let t = H(), n = O.useContext(z);
+	if (!t) throw Error("useSidebar must be used within a SidebarProvider.");
+	let r = e ?? n?.panelId ?? "primary", i = t.openPanels.includes(r), a = t.getPresentation(r), o = a === "drawer";
+	return {
+		panelId: r,
+		side: n?.panelId === r ? n.side ?? "left" : "left",
+		state: i ? "expanded" : "collapsed",
+		open: i,
+		setOpen: (e) => t.setPanelOpen(r, e),
+		collapsed: !i && !o && t.getCollapseMode(r) !== "none",
+		presentation: a,
+		isMobile: o,
+		openMobile: t.mobilePanel === r,
+		setOpenMobile: (e) => t.setPanelOpenMobile(r, e),
+		toggleSidebar: () => t.togglePanel(r),
+		openPanels: t.openPanels,
+		mobilePanel: t.mobilePanel,
+		setMobilePanel: t.setMobilePanel
+	};
+}
+function W({ defaultOpen: e = !0, adaptTo: t = "viewport", open: n, onOpenChange: r, openPanels: a, defaultOpenPanels: o, onOpenPanelsChange: s, mobilePanel: c, onMobilePanelChange: l, navigationPanel: u = "primary", keyboardShortcut: d = "b", ref: f, className: p, style: m, children: h, ...g }) {
+	let _ = O.useRef(null), [v, y] = O.useState(Infinity), [b, x] = O.useState(), [S, C] = O.useState({}), [w, T] = O.useState(() => o ? [...o] : e ? ["primary"] : []), [E, D] = O.useState(null), k = a ?? (n === void 0 ? w : [...w.filter((e) => e !== "primary"), ...n ? ["primary"] : []]), j = O.useRef(k);
+	j.current = k;
+	let M = c === void 0 ? E : c, N = O.useRef(M);
+	N.current = M;
+	let P = O.useRef({}), I = O.useCallback((e, t) => {
+		P.current[e] = t;
+	}, []), L = O.useCallback((e) => {
+		let t = (e) => {
+			if (!e.isConnected) return !1;
+			for (let t = e; t; t = t.parentElement) {
+				let e = window.getComputedStyle(t);
+				if (t.hidden || t.hasAttribute("inert") || e.display === "none" || e.visibility === "hidden") return !1;
+			}
+			return !0;
+		}, n = P.current[e];
+		if (n && t(n)) return n;
+		let r = _.current?.querySelectorAll(`[data-sidebar-trigger-panel="${e}"]`);
+		return r ? Array.from(r).find(t) ?? null : null;
+	}, []);
+	O.useEffect(() => {
+		let e = () => y(window.innerWidth), t = window.matchMedia?.("(max-width: 767px)");
+		return window.addEventListener("resize", e), t?.addEventListener("change", e), e(), () => {
+			window.removeEventListener("resize", e), t?.removeEventListener("change", e);
+		};
+	}, []), O.useEffect(() => {
+		let e = _.current;
+		if (t !== "container" || !e) return;
+		let n = () => {
+			let t = e.getBoundingClientRect().width;
+			t > 0 && x(t);
+		};
+		if (n(), typeof ResizeObserver > "u") return;
+		let r = new ResizeObserver(n);
+		return r.observe(e), () => r.disconnect();
+	}, [t]);
+	let z = O.useCallback((e, t) => {
+		C((n) => {
+			let r = n[e];
+			if (!t && !r || t && r?.dockAt === t.dockAt && r?.width === t.width && r?.collapsible === t.collapsible) return n;
+			let i = { ...n };
+			return t ? i[e] = t : delete i[e], i;
+		});
+	}, []), B = O.useCallback((e) => {
+		let n = S[e];
+		return n?.collapsible === "none" ? "docked" : Math.min(v, n?.width ?? Infinity, t === "container" ? b ?? Infinity : Infinity) < (n?.dockAt ?? R[e]) ? "drawer" : "docked";
+	}, [
+		S,
+		v,
+		b,
+		t
+	]), H = O.useCallback((e) => S[e]?.collapsible, [S]), U = O.useCallback((e, t) => {
+		let i = j.current, o = i.includes(e), c = typeof t == "function" ? t(o) : t;
+		if (c === o) return;
+		let l = i.filter((t) => t !== e);
+		c && l.push(e), a === void 0 && (e !== "primary" || n === void 0) && (j.current = l), a === void 0 && T(l), s?.([...l]), e === "primary" && (r?.(c), document.cookie = `sidebar_state=${c}; path=/; max-age=604800`);
+	}, [
+		a,
+		n,
+		s,
+		r
+	]), W = O.useCallback((e) => {
+		N.current !== e && (c === void 0 && (N.current = e, D(e)), l?.(e));
+	}, [c, l]), G = O.useCallback((e, t) => {
+		let n = N.current === e, r = typeof t == "function" ? t(n) : t;
+		r !== n && W(r ? e : null);
+	}, [W]), K = O.useCallback((e) => {
+		B(e) === "drawer" ? W(N.current === e ? null : e) : U(e, (e) => !e);
+	}, [
+		B,
+		W,
+		U
+	]), q = M && B(M) === "drawer" ? M : null;
+	O.useEffect(() => {
+		Number.isFinite(v) && M && B(M) === "docked" && (W(null), L(M)?.focus());
+	}, [
+		M,
+		B,
+		W,
+		L,
+		v
+	]);
+	let J = O.useMemo(() => ({
+		openPanels: k,
+		mobilePanel: q,
+		navigationPanel: u,
+		adaptTo: t,
+		hostRef: _,
+		getPresentation: B,
+		getCollapseMode: H,
+		setPanelOpen: U,
+		setPanelOpenMobile: G,
+		setMobilePanel: W,
+		togglePanel: K,
+		registerRegion: z,
+		triggerFor: L,
+		rememberTrigger: I
+	}), [
+		k,
+		q,
+		u,
+		t,
+		B,
+		H,
+		U,
+		G,
+		W,
+		K,
+		z,
+		L,
+		I
+	]);
+	O.useEffect(() => {
+		if (d === !1) return;
+		let e = (e) => {
+			if (e.defaultPrevented || e.repeat || e.altKey || e.shiftKey || !(e.metaKey || e.ctrlKey) || e.key.toLowerCase() !== d.toLowerCase()) return;
+			let t = e.target instanceof Element ? e.target : document.activeElement;
+			if (t?.closest("input,textarea,select,[contenteditable]:not([contenteditable=\"false\"]),[role=\"textbox\"],[role=\"dialog\"],[role=\"alertdialog\"],[role=\"menu\"],[role=\"listbox\"]")) return;
+			let n = t?.closest("[data-slot=\"sidebar-wrapper\"]"), r = document.querySelectorAll("[data-slot=\"sidebar-wrapper\"]");
+			(n ? n !== _.current : r.length !== 1) || (e.preventDefault(), B(u) === "drawer" ? W(N.current === u ? null : u) : U(u, (e) => !e));
+		};
+		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
+	}, [
+		d,
+		u,
+		B,
+		W,
+		U
+	]);
+	let Y = F({
+		defaultTagName: "div",
+		ref: f ? [_, f] : _,
+		props: {
+			...g,
+			"data-slot": "sidebar-wrapper",
+			"data-mobile": B("primary") === "drawer",
+			style: {
+				"--sidebar-width": "16rem",
+				"--sidebar-width-icon": "3rem",
+				...m
+			},
+			className: i("group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar relative flex min-h-svh w-full", t === "container" && "isolate [contain:paint]", p),
+			children: h
+		}
+	});
+	return /* @__PURE__ */ A(V.Provider, {
+		value: J,
+		children: Y
+	});
+}
+//#endregion
+//#region src/components/ui/sidebar.tsx
+function G({ className: e, onClick: t, panelId: n, children: r, ...a }) {
+	let o = H(), s = n ?? o?.navigationPanel ?? "primary", { toggleSidebar: c, open: l, openMobile: u, isMobile: d } = U(s);
+	return /* @__PURE__ */ A(y, {
+		"data-sidebar": "trigger",
+		"data-slot": "sidebar-trigger",
+		"data-sidebar-trigger-panel": s,
+		"aria-expanded": d ? u : l,
+		variant: "ghost",
+		size: "icon-sm",
+		className: i(e),
+		onClick: (e) => {
+			t?.(e), e.defaultPrevented || (o?.rememberTrigger(s, e.currentTarget), c());
+		},
+		...a,
+		children: r ?? /* @__PURE__ */ j(k, { children: [A(s === "aside" ? N : M, {}), /* @__PURE__ */ A("span", {
+			className: "sr-only",
+			children: "Toggle Sidebar"
+		})] })
+	});
+}
+function K({ className: e, ...t }) {
+	let { toggleSidebar: n } = U();
+	return /* @__PURE__ */ A("button", {
+		"data-sidebar": "rail",
+		"data-slot": "sidebar-rail",
+		"aria-label": "Toggle Sidebar",
+		tabIndex: -1,
+		onClick: n,
+		title: "Toggle Sidebar",
+		className: i("hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2", "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize", "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize", "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full", "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2", "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2", e),
+		...t
+	});
+}
+function q({ className: e, ...t }) {
+	return /* @__PURE__ */ A("main", {
+		"data-slot": "sidebar-inset",
+		className: i("bg-background md:peer-data-[variant=inset]:m-space-md md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-surface md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-space-md relative flex w-full flex-1 flex-col", e),
+		...t
+	});
+}
+function J({ className: e, ...t }) {
+	return /* @__PURE__ */ A(w, {
+		"data-slot": "sidebar-input",
+		"data-sidebar": "input",
+		className: i("w-full", e),
+		...t
+	});
+}
+function Y({ className: e, ...t }) {
+	return /* @__PURE__ */ A("div", {
+		"data-slot": "sidebar-header",
+		"data-sidebar": "header",
+		className: i("flex flex-col", e),
+		...t
+	});
+}
+function ee({ className: e, ...t }) {
+	return /* @__PURE__ */ A("div", {
+		"data-slot": "sidebar-footer",
+		"data-sidebar": "footer",
+		className: i("flex flex-col", e),
+		...t
+	});
+}
+function te({ className: e, ...t }) {
+	return /* @__PURE__ */ A(d, {
+		"data-slot": "sidebar-separator",
+		"data-sidebar": "separator",
+		className: i("bg-sidebar-border mx-space-md w-auto", e),
+		...t
+	});
+}
+function ne({ className: e, ...t }) {
+	return /* @__PURE__ */ A("div", {
+		"data-slot": "sidebar-content",
+		"data-sidebar": "content",
+		className: i("gap-space-md flex min-h-0 flex-1 flex-col overflow-auto group-data-[collapsible=icon]:overflow-hidden", e),
+		...t
+	});
+}
+function re({ className: e, ...t }) {
+	return /* @__PURE__ */ A("div", {
+		"data-slot": "sidebar-group",
+		"data-sidebar": "group",
+		className: i("relative flex w-full min-w-0 flex-col", e),
+		...t
+	});
+}
+function ie({ className: e, render: t, ...n }) {
+	return F({
+		defaultTagName: "div",
+		props: P({ className: i(`text-sidebar-foreground/70 h-8 rounded-radius text-xs font-medium transition-opacity duration-150 group-data-[collapsible=icon]:opacity-0 ${m.sidebar} [&>svg]:size-icon flex shrink-0 items-center outline-hidden [&>svg]:shrink-0`, e) }, n),
+		render: t,
+		state: {
+			slot: "sidebar-group-label",
+			sidebar: "group-label"
+		}
+	});
+}
+function ae({ className: e, render: t, ...n }) {
+	return F({
+		defaultTagName: "button",
+		props: P({ className: i(`box-border border-0 bg-transparent font-sans text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 w-5 rounded-radius p-0 ${m.sidebar} [&>svg]:size-icon flex aspect-square items-center justify-center outline-hidden transition-transform [&>svg]:shrink-0 after:absolute after:-inset-2 md:after:hidden group-data-[collapsible=icon]:hidden`, e) }, n),
+		render: t,
+		state: {
+			slot: "sidebar-group-action",
+			sidebar: "group-action"
+		}
+	});
+}
+function oe({ className: e, ...t }) {
+	return /* @__PURE__ */ A("div", {
+		"data-slot": "sidebar-group-content",
+		"data-sidebar": "group-content",
+		className: i("text-sm w-full", e),
+		...t
+	});
+}
+function se({ className: e, ...t }) {
+	return /* @__PURE__ */ A("ul", {
+		"data-slot": "sidebar-menu",
+		"data-sidebar": "menu",
+		className: i("m-0 p-0 list-none flex w-full min-w-0 flex-col", e),
+		...t
+	});
+}
+function ce({ className: e, ...t }) {
+	return /* @__PURE__ */ A("li", {
+		"data-slot": "sidebar-menu-item",
+		"data-sidebar": "menu-item",
+		className: i("group/menu-item relative", e),
+		...t
+	});
+}
+var le = I(i(`box-border border-0 bg-transparent py-0 font-sans no-underline hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground text-left transition-[background-color,color] ${m.sidebar} data-active:font-medium peer/menu-button flex w-full items-center overflow-hidden outline-hidden group/menu-button disabled:opacity-50 aria-disabled:opacity-50 [&>span:last-child]:truncate [&_svg]:size-icon [&_svg]:shrink-0`, E), {
+	variants: {
+		variant: {
+			default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+			outline: "bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground ring-1 ring-sidebar-border hover:ring-sidebar-accent"
+		},
+		size: {
+			default: "h-action",
+			sm: "h-action-sm",
+			lg: "h-action-lg"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+function ue({ render: e, disabled: t = !1, isActive: n = !1, variant: r = "default", size: a = "default", tooltip: o, className: s, ...c }) {
+	let { isMobile: l, collapsed: u } = U(), d = t || c["aria-disabled"] === !0 || c["aria-disabled"] === "true", f = F({
+		defaultTagName: "button",
+		props: P({ className: i(le({
+			variant: r,
+			size: a
+		}), s) }, c),
+		render: e,
+		state: {
+			slot: "sidebar-menu-button",
+			sidebar: "menu-button",
+			size: a,
+			active: n
+		}
+	}), p = d ? O.cloneElement(f, {
+		disabled: f.type !== "a" || void 0,
+		"aria-disabled": !0,
+		tabIndex: -1,
+		onClickCapture: X,
+		onClick: X,
+		onPointerDownCapture: X,
+		onKeyDownCapture: de,
+		onKeyUpCapture: de
+	}) : f;
+	return o ? (typeof o == "string" && (o = { children: o }), /* @__PURE__ */ j(g, {
+		disabled: d || !u || l,
+		children: [/* @__PURE__ */ A(v, {
+			disabled: d,
+			render: p
+		}), /* @__PURE__ */ A(_, {
+			side: "right",
+			align: "center",
+			...o
+		})]
+	})) : p;
+}
+function X(e) {
+	e.preventDefault(), e.stopPropagation();
+}
+function de(e) {
+	(e.key === "Enter" || e.key === " ") && X(e);
+}
+function fe({ className: e, render: t, showOnHover: n = !1, ...r }) {
+	return F({
+		defaultTagName: "button",
+		props: P({ className: i(`box-border border-0 bg-transparent font-sans text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 aspect-square w-5 rounded-radius p-0 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 ${m.sidebar} [&>svg]:size-icon flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&_svg]:shrink-0`, n && "peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0", e) }, r),
+		render: t,
+		state: {
+			slot: "sidebar-menu-action",
+			sidebar: "menu-action"
+		}
+	});
+}
+function pe({ className: e, ...t }) {
+	return /* @__PURE__ */ A("div", {
+		"data-slot": "sidebar-menu-badge",
+		"data-sidebar": "menu-badge",
+		className: i("text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 rounded-radius px-space-xs text-xs font-medium peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 flex items-center justify-center tabular-nums select-none group-data-[collapsible=icon]:hidden", e),
+		...t
+	});
+}
+function me({ className: e, ...t }) {
+	return /* @__PURE__ */ A("ul", {
+		"data-slot": "sidebar-menu-sub",
+		"data-sidebar": "menu-sub",
+		className: i("m-0 p-0 list-none border-sidebar-border mx-space-lg translate-x-px gap-space-xs border-l px-row-x py-row-y group-data-[collapsible=icon]:hidden flex min-w-0 flex-col", e),
+		...t
+	});
+}
+function he({ className: e, ...t }) {
+	return /* @__PURE__ */ A("li", {
+		"data-slot": "sidebar-menu-sub-item",
+		"data-sidebar": "menu-sub-item",
+		className: i("group/menu-sub-item relative", e),
+		...t
+	});
+}
+function ge({ render: e, size: t = "md", isActive: n = !1, className: r, ...a }) {
+	return F({
+		defaultTagName: "a",
+		props: P({ className: i(`text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-action-xs ${m.sidebar} data-[size=md]:text-sm data-[size=sm]:text-xs [&>svg]:size-icon flex -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0`, E, r) }, a),
+		render: e,
+		state: {
+			slot: "sidebar-menu-sub-button",
+			sidebar: "menu-sub-button",
+			size: t,
+			active: n
+		}
+	});
+}
+//#endregion
+//#region src/components/base/sidebar/sidebar.tsx
+var _e = {
+	mobileTitle: "Navigation",
+	mobileDescription: "Navigation for this application."
+}, ve = {
+	mobileTitle: "Inspector",
+	mobileDescription: "Supporting tools and details."
+}, ye = `font-medium text-sidebar-foreground transition-[background-color,color] hover:bg-sidebar-accent hover:text-sidebar-foreground ${m.sidebar} data-active:bg-sidebar-accent data-active:text-sidebar-foreground data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-foreground`, be = ye, Z = O.createContext(void 0), xe = O.createContext(!1), Q = T, $ = "group-data-[collapsible=icon]:w-shell-sidebar-icon-padded";
+function Se(e) {
+	return typeof e == "string" || typeof e == "number" || typeof e == "bigint" ? /* @__PURE__ */ A(f, {
+		tag: "span",
+		size: "inherit",
+		weight: "inherit",
+		lineHeight: "tight",
+		className: "text-inherit",
+		children: e
+	}) : e;
+}
+function Ce(e) {
+	return typeof e == "string" || typeof e == "number" || typeof e == "bigint" ? /* @__PURE__ */ A(f, {
+		tag: "span",
+		size: "inherit",
+		lineHeight: "snug",
+		className: "sidebar-menu-button--tooltip-text text-inherit",
+		children: e
+	}) : e;
+}
+function we(e) {
+	return e && (typeof e == "string" ? { children: Ce(e) } : {
+		...e,
+		children: Ce(e.children)
+	});
+}
+function Te(e) {
+	return e === "sm" ? "h-action-sm group-data-[collapsible=icon]:size-action-sm!" : e === "lg" ? "h-action-lg group-data-[collapsible=icon]:size-action-lg!" : "h-action group-data-[collapsible=icon]:size-action!";
+}
+function Ee({ className: e, style: t, menuDensity: n, ...r }) {
+	return /* @__PURE__ */ A(Z.Provider, {
+		value: n,
+		children: /* @__PURE__ */ A(W, {
+			className: i("sidebar-provider--component shell-sidebar-vars box-border", e),
+			style: {
+				"--sidebar-width": "var(--shell-sidebar-width)",
+				"--sidebar-width-icon": "var(--shell-sidebar-width-icon)",
+				...t
+			},
+			...r,
+			children: /* @__PURE__ */ A(ke, { children: r.children })
+		})
+	});
+}
+var De = O.createContext(null);
+function Oe(e, t) {
+	let n = Object.keys(e);
+	return n.length === Object.keys(t).length && n.every((n) => Reflect.get(e, n) === Reflect.get(t, n));
+}
+function ke({ children: e }) {
+	let { mobilePanel: t, setMobilePanel: r } = U(), a = H(), [d, f] = O.useState({}), p = O.useRef({}), m = O.useRef({
+		mobilePanel: t,
+		setMobilePanel: r
+	});
+	m.current = {
+		mobilePanel: t,
+		setMobilePanel: r
+	};
+	let h = O.useRef(!0);
+	O.useLayoutEffect(() => (h.current = !0, () => {
+		h.current = !1;
+	}), []);
+	let [g, _] = O.useState(null), v = O.useRef("primary"), y = O.useRef(null);
+	t && (v.current = t);
+	let b = O.useCallback((e, t) => {
+		let n = !!p.current[e];
+		t ? p.current[e] = t : delete p.current[e], !t && n && (v.current === e && (y.current = null), queueMicrotask(() => {
+			h.current && !p.current[e] && m.current.mobilePanel === e && m.current.setMobilePanel(null);
+		})), f((n) => {
+			let r = n[e];
+			if (!t && !r || r && t && Oe(r.props, t.props) && Oe({
+				...r,
+				props: void 0
+			}, {
+				...t,
+				props: void 0
+			})) return n;
+			let i = { ...n };
+			return t ? i[e] = t : delete i[e], i;
+		});
+	}, []), x = t ? d[t] : y.current;
+	t && (y.current = x ?? null);
+	let S = O.useMemo(() => ({
+		target: g,
+		register: b
+	}), [g, b]), C = null;
+	if (x?.themeContainer) {
+		let e = x.themeContainer;
+		C = "current" in e ? e.current : e;
+	}
+	let w = !!x?.contained || a.adaptTo === "container", T = w && C && !a.hostRef.current?.contains(C) ? a.hostRef : x?.themeContainer;
+	return /* @__PURE__ */ A(u, {
+		modal: !0,
+		open: !!t && !!x,
+		onOpenChange: (e) => {
+			e || r(null);
+		},
+		children: /* @__PURE__ */ j(De.Provider, {
+			value: S,
+			children: [e, x && /* @__PURE__ */ A(n, {
+				value: x.themeScope,
+				children: /* @__PURE__ */ j(c, {
+					...x.props,
+					container: T,
+					forceRenderBackdrop: !0,
+					backdropClassName: x.contained ? "absolute" : void 0,
+					dir: x.dir,
+					"data-sidebar": "sidebar",
+					"data-slot": "sidebar",
+					"data-panel-id": t ?? v.current,
+					"data-mobile": "true",
+					"data-presentation": "drawer",
+					side: x.side,
+					finalFocus: () => a.triggerFor(v.current),
+					className: i("sidebar--component shell-sidebar-vars box-border data-[side=left]:w-(--sidebar-width) data-[side=right]:w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&_[data-overlay-close]]:top-[calc(var(--surface-y)*var(--space-scale)/2+(var(--text-base)*var(--leading-snug)-var(--height-action)*7/8*var(--density-scale))/2)]! [&_[data-overlay-close]]:end-[calc(var(--surface-x)*var(--space-scale)/2)]!", x.contained && "absolute", x.surfaceClassName, x.className, x.rootClassName),
+					style: {
+						...x.props.style,
+						"--sidebar-width": "var(--shell-sidebar-width-offcanvas)",
+						...w ? { maxWidth: "calc(100% - var(--control-x) * var(--space-scale))" } : {}
+					},
+					children: [/* @__PURE__ */ j(l, {
+						className: "min-h-[calc(var(--height-action)*var(--density-scale)+var(--surface-y)*var(--space-scale))] p-surface-xs pe-[calc(var(--height-action)*var(--density-scale)+var(--surface-x)*var(--space-scale))]",
+						children: [/* @__PURE__ */ A(s, { children: x.title }), /* @__PURE__ */ A(o, {
+							className: "sr-only",
+							children: x.description
+						})]
+					}), /* @__PURE__ */ A("div", {
+						ref: _,
+						className: "sidebar--surface flex min-h-0 w-full flex-1 flex-col"
+					})]
+				})
+			})]
+		})
+	});
+}
+function Ae({ panelId: e, dockAt: t = R[e], presentation: n = "panel", side: r = "left", width: a, className: o, style: s, ref: c, children: l, ...u }) {
+	let d = H(), f = O.useRef(null), [p, m] = O.useState(Infinity), [g, _] = O.useState(null), v = d?.registerRegion;
+	O.useLayoutEffect(() => {
+		let e = f.current;
+		if (!e) return;
+		let t = e.closest("[data-shell-regions]"), n = !d || d.adaptTo === "container" ? t ?? d?.hostRef.current : null, r = () => {
+			let e = n?.getBoundingClientRect().width;
+			m(Math.min(window.innerWidth, e && e > 0 ? e : Infinity));
+		};
+		r(), window.addEventListener("resize", r);
+		let i = n && typeof ResizeObserver < "u" ? new ResizeObserver(r) : null;
+		return n && i?.observe(n), () => {
+			window.removeEventListener("resize", r), i?.disconnect();
+		};
+	}, [d?.adaptTo, d?.hostRef]), O.useLayoutEffect(() => {
+		v?.(e, {
+			dockAt: t,
+			width: p,
+			collapsible: g?.collapsible
+		});
+	}, [
+		v,
+		e,
+		t,
+		p,
+		g?.collapsible
+	]), O.useLayoutEffect(() => () => {
+		v?.(e, null);
+	}, [v, e]);
+	let y = d ? d.getPresentation(e) === "docked" : p >= t, b = d?.openPanels.includes(e) ?? !0, x = !b && g?.collapsible !== "none", S = !y || x && g?.collapsible === "offcanvas", C = !y && !g, w = y && x && g?.collapsible === "offcanvas", T = n === "rail" || x && g?.collapsible === "icon", E = O.useMemo(() => ({
+		panelId: e,
+		geometry: n,
+		side: r,
+		setCollapse: _
+	}), [
+		e,
+		n,
+		r
+	]), D = n === "rail" ? "var(--shell-navigation-rail-width)" : T ? "var(--shell-sidebar-width-icon)" : "var(--sidebar-width)";
+	return x && g?.collapsible === "icon" && g.variant !== "sidebar" && n !== "rail" && (D = "calc(var(--shell-sidebar-width-icon) + 1rem * var(--space-scale))"), /* @__PURE__ */ A(B, {
+		value: E,
+		children: /* @__PURE__ */ A("aside", {
+			...u,
+			ref: (e) => {
+				f.current = e, typeof c == "function" ? c(e) : c && (c.current = e);
+			},
+			"data-slot": "sidebar-region",
+			"data-panel-id": e,
+			"data-presentation": y ? "docked" : "drawer",
+			"data-region-presentation": n,
+			"data-state": b ? "expanded" : "collapsed",
+			"data-collapsible": x ? g?.collapsible : "",
+			"data-side": r,
+			"aria-hidden": w || void 0,
+			inert: w || void 0,
+			className: i("sidebar-region--component shell-sidebar-vars box-border relative min-h-0 shrink-0", g?.collapsible === "offcanvas" && "overflow-hidden", y && h.sidebar, o),
+			style: {
+				...s,
+				"--sidebar-width": a ?? "var(--shell-sidebar-width)",
+				width: S ? 0 : D,
+				position: y ? void 0 : "static",
+				display: C ? "none" : void 0
+			},
+			children: l
+		})
+	});
+}
+function je(e) {
+	let t = O.useContext(z), n = e.panelId ?? t?.panelId ?? "primary", r = O.useMemo(() => ({
+		...t?.panelId === n ? t : {},
+		panelId: n,
+		side: e.side ?? (t?.panelId === n ? t.side : void 0) ?? "left"
+	}), [
+		t,
+		n,
+		e.side
+	]);
+	return /* @__PURE__ */ A(B, {
+		value: r,
+		children: /* @__PURE__ */ A(Me, {
+			...e,
+			panelId: n
+		})
+	});
+}
+function Me({ panelId: e = "primary", surface: a = "default", side: o, variant: s = "sidebar", collapsible: c = "offcanvas", contained: l = !1, className: u, surfaceClassName: d, rootClassName: f, children: p, dir: m, strings: h, ref: g, ..._ }) {
+	let v = O.useContext(z), y = !!v?.setCollapse, b = o ?? v?.side ?? "left", { isMobile: x, state: S } = U(e), C = H(), w = O.useContext(De), T = t(), E = T && "current" in T ? T : C.hostRef, D = T === void 0 ? C.hostRef : T, k = O.useMemo(() => ({
+		host: E,
+		mounted: T !== null
+	}), [E, T]), M = O.useMemo(() => ({
+		host: { current: w?.target ?? null },
+		mounted: !!w?.target
+	}), [w?.target]), N = r(e === "aside" ? ve : _e, h), P = O.useRef(null), F = v?.setCollapse;
+	O.useLayoutEffect(() => (F?.({
+		collapsible: c,
+		variant: s
+	}), () => F?.(null)), [
+		F,
+		c,
+		s
+	]), O.useLayoutEffect(() => {
+		if (!y) return C.registerRegion(e, {
+			dockAt: R[e],
+			collapsible: c
+		}), () => C.registerRegion(e, null);
+	}, [
+		y,
+		C.registerRegion,
+		e,
+		c
+	]), O.useLayoutEffect(() => {
+		w?.register(e, {
+			contained: l,
+			side: b,
+			dir: m,
+			className: u,
+			surfaceClassName: d,
+			rootClassName: f,
+			title: N.mobileTitle,
+			description: N.mobileDescription,
+			themeContainer: D,
+			themeScope: k,
+			props: {
+				..._,
+				ref: g
+			}
+		});
+	}), O.useLayoutEffect(() => {
+		let t = w?.target, n = t?.parentElement;
+		x && C.mobilePanel === e && t && n && !n.contains(document.activeElement) && (t.querySelector("button:not(:disabled),a[href],input:not(:disabled),textarea:not(:disabled),select:not(:disabled),[tabindex]:not([tabindex=\"-1\"])") ?? n).focus({ preventScroll: !0 });
+	}, [
+		x,
+		C.mobilePanel,
+		w?.target,
+		e
+	]);
+	let I = w?.register;
+	O.useLayoutEffect(() => () => I?.(e, null), [I, e]);
+	let B = O.useCallback((t) => {
+		let n = P.current;
+		!t && n?.contains(document.activeElement) && queueMicrotask(() => {
+			n.isConnected || C.triggerFor(e)?.focus();
+		}), P.current = t;
+	}, [C.triggerFor, e]);
+	O.useLayoutEffect(() => {
+		let t = P.current, n = document.activeElement;
+		if (S !== "collapsed" || c === "none" || !t || !(n instanceof HTMLElement) || !t.contains(n)) return;
+		let r = c === "offcanvas";
+		for (let e = n; !r && e && t.contains(e); e = e.parentElement) {
+			let t = window.getComputedStyle(e);
+			r = e.hidden || t.display === "none" || t.visibility === "hidden";
+		}
+		r && C.triggerFor(e)?.focus();
+	}, [
+		S,
+		c,
+		e,
+		C
+	]);
+	let V = !x && S === "collapsed" && c === "offcanvas", W = c === "none", G = _.style?.["--sidebar-width"] ?? (v?.geometry === "rail" ? "var(--shell-navigation-rail-width)" : void 0);
+	if (x && c !== "none") return w?.target && C.mobilePanel === e ? L(/* @__PURE__ */ A(n, {
+		value: M,
+		children: p
+	}), w.target) : null;
+	let K = {
+		..._,
+		ref: g
+	}, q = W ? {
+		"data-panel-id": e,
+		"data-presentation": "docked",
+		"data-state": S,
+		"data-collapsible": "",
+		"data-variant": s,
+		"data-side": b,
+		dir: m
+	} : {};
+	return l ? /* @__PURE__ */ A("div", {
+		className: i("shell-sidebar-vars group peer text-sidebar-foreground", W ? "contents" : "sidebar--component sticky top-0 block h-full shrink-0", !W && (y ? "w-full" : "w-(--sidebar-width) transition-[width] duration-200 ease-linear data-[collapsible=offcanvas]:w-0"), !W && !y && (s === "floating" || s === "inset" ? "data-[collapsible=icon]:w-shell-sidebar-icon-padded" : "data-[collapsible=icon]:w-(--sidebar-width-icon)"), !W && f),
+		style: { "--sidebar-width": G },
+		"data-panel-id": e,
+		"data-presentation": "docked",
+		"aria-hidden": V || void 0,
+		inert: V || void 0,
+		ref: B,
+		"data-state": S,
+		"data-collapsible": !W && S === "collapsed" ? c : "",
+		"data-variant": s,
+		"data-side": b,
+		"data-slot": W ? void 0 : "sidebar",
+		dir: m,
+		children: /* @__PURE__ */ A("div", {
+			"data-slot": W ? "sidebar" : void 0,
+			...q,
+			className: i("box-border flex h-full", W ? "relative" : "absolute inset-y-0 z-10", W && "sidebar--component", y ? c === "offcanvas" ? "w-(--sidebar-width)" : "w-full" : "w-(--sidebar-width) transition-[transform,width] duration-200 ease-linear", !y && (b === "left" ? "left-0 group-data-[collapsible=offcanvas]:-translate-x-full" : "right-0 group-data-[collapsible=offcanvas]:translate-x-full"), y && (b === "left" ? "left-0" : "right-0"), s === "floating" || s === "inset" ? i(s === "floating" ? "p-space-md" : "px-space-md py-space-lg", $) : !y && "group-data-[collapsible=icon]:w-(--sidebar-width-icon)", W && f, u),
+			...K,
+			children: /* @__PURE__ */ A("div", {
+				"data-sidebar": "sidebar",
+				"data-slot": "sidebar-inner",
+				className: i("sidebar--surface box-border flex size-full flex-col group-data-[variant=floating]:rounded-surface group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border", a === "transparent" ? "bg-transparent" : "bg-sidebar", d),
+				children: p
+			})
+		})
+	}) : /* @__PURE__ */ j("div", {
+		className: i("shell-sidebar-vars group peer text-sidebar-foreground", W ? "contents" : "sidebar--component block", !W && f),
+		style: { "--sidebar-width": G },
+		"data-panel-id": e,
+		"data-presentation": "docked",
+		"aria-hidden": V || void 0,
+		inert: V || void 0,
+		ref: B,
+		"data-state": S,
+		"data-collapsible": !W && S === "collapsed" ? c : "",
+		"data-variant": s,
+		"data-side": b,
+		"data-slot": W ? void 0 : "sidebar",
+		dir: m,
+		children: [/* @__PURE__ */ A("div", {
+			"data-slot": "sidebar-gap",
+			className: i("relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear", W && "hidden", "group-data-[collapsible=offcanvas]:w-0", "group-data-[side=right]:rotate-180", s === "floating" || s === "inset" ? $ : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)")
+		}), /* @__PURE__ */ A("div", {
+			"data-slot": W ? "sidebar" : "sidebar-container",
+			"data-side": b,
+			...q,
+			className: i(W ? "box-border relative flex h-full w-(--sidebar-width)" : "box-border fixed inset-y-0 z-10 flex h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]", W && "sidebar--component", s === "floating" || s === "inset" ? i("p-space-md", $) : "border-border group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l", W && f, u),
+			...K,
+			children: /* @__PURE__ */ A("div", {
+				"data-sidebar": "sidebar",
+				"data-slot": "sidebar-inner",
+				className: i("sidebar--surface box-border flex size-full flex-col group-data-[variant=floating]:rounded-surface group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border", a === "transparent" ? "bg-transparent" : "bg-sidebar", d),
+				children: p
+			})
+		})]
+	});
+}
+function Ne({ className: e, ...t }) {
+	return /* @__PURE__ */ A(Y, {
+		className: i("sidebar-header--component box-border min-w-0 shrink-0 gap-space-sm p-surface-xs", e),
+		...t
+	});
+}
+function Pe({ className: e, ...t }) {
+	return /* @__PURE__ */ A(xe.Provider, {
+		value: !0,
+		children: /* @__PURE__ */ A(ee, {
+			className: i("sidebar-footer--component box-border min-w-0 shrink-0 gap-space-md p-surface-xs", b.sidebar.footer, e),
+			...t
+		})
+	});
+}
+function Fe({ className: e, ...t }) {
+	return /* @__PURE__ */ A(ne, {
+		className: i("sidebar-content--component min-w-0 gap-space-sm overflow-x-hidden", e),
+		...t
+	});
+}
+function Ie({ className: e, ...t }) {
+	let n = O.useContext(xe);
+	return /* @__PURE__ */ A(re, {
+		className: i("sidebar-group--component box-border", n ? "p-0" : "px-surface-xs py-space-2xs", e),
+		...t
+	});
+}
+function Le({ className: e, ...t }) {
+	return /* @__PURE__ */ A(oe, {
+		className: i("sidebar-group-content--component", e),
+		...t
+	});
+}
+function Re({ className: e, ...t }) {
+	return /* @__PURE__ */ A(ae, {
+		className: i("sidebar-group-action--component top-space-xs size-action-xs", e),
+		...t
+	});
+}
+function ze({ className: t, ...n }) {
+	let { defaultScale: r } = e(), a = C(void 0, r);
+	return /* @__PURE__ */ A(J, {
+		className: i("sidebar-input--component", S(a), t),
+		...n
+	});
+}
+function Be({ className: e, ...t }) {
+	return /* @__PURE__ */ A(te, {
+		className: i("sidebar-separator--component mx-space-lg", e),
+		...t
+	});
+}
+function Ve({ className: e, menuDensity: t, ...n }) {
+	let r = O.useContext(Z), a = t ?? r, o = Q[a ?? "default"];
+	return /* @__PURE__ */ A(Z.Provider, {
+		value: a,
+		children: /* @__PURE__ */ A(se, {
+			className: i("sidebar-menu--component", o.gap, e),
+			...n
+		})
+	});
+}
+function He({ className: e, ...t }) {
+	return /* @__PURE__ */ A(ce, {
+		className: i("sidebar-menu-item--component group-data-[collapsible=icon]:flex group-data-[collapsible=icon]:justify-center", e),
+		...t
+	});
+}
+function Ue({ className: e, ...t }) {
+	let n = O.useContext(Z) ?? "default";
+	return /* @__PURE__ */ A(fe, {
+		className: i("sidebar-menu-action--component size-action-xs right-auto end-space-2xs! top-action-center! -translate-y-1/2 peer-data-[size=sm]/menu-button:top-action-sm-center! peer-data-[size=lg]/menu-button:top-action-lg-center!", n === "comfortable" ? "peer-data-[sidebar=menu-sub-button]/menu-sub-button:top-action-sm-center!" : "peer-data-[sidebar=menu-sub-button]/menu-sub-button:top-action-xs-center!", e),
+		...t
+	});
+}
+function We({ className: e, inline: t = !1, size: n = "md", children: r, ...a }) {
+	let o = typeof r == "string" || typeof r == "number" || typeof r == "bigint" ? /* @__PURE__ */ A(f, {
+		tag: "span",
+		size: "xxs",
+		weight: "semibold",
+		lineHeight: "none",
+		className: "text-inherit tabular-nums",
+		children: r
+	}) : r;
+	return /* @__PURE__ */ A(pe, {
+		className: i("sidebar-menu-badge--component shrink-0 text-sidebar-foreground", n === "sm" ? "h-4 min-w-4" : n === "lg" ? "h-6 min-w-6" : "h-5 min-w-5", t ? "static ms-auto translate-y-0" : "top-action-center! -translate-y-1/2 peer-data-[size=sm]/menu-button:top-action-sm-center! peer-data-[size=lg]/menu-button:top-action-lg-center!", e),
+		...a,
+		children: o
+	});
+}
+function Ge({ className: e, showIcon: t = !1, style: n, width: r, ...a }) {
+	let o = r ?? "72%";
+	return /* @__PURE__ */ j("div", {
+		"data-slot": "sidebar-menu-skeleton",
+		"data-sidebar": "menu-skeleton",
+		className: i("sidebar-menu-skeleton--component flex h-action items-center gap-space-md rounded-radius px-control-sm", e),
+		style: n,
+		...a,
+		children: [t ? /* @__PURE__ */ A(x, {
+			className: "size-icon rounded-radius-sm",
+			"data-sidebar": "menu-skeleton-icon"
+		}) : null, /* @__PURE__ */ A(x, {
+			className: "h-icon-sm flex-1",
+			"data-sidebar": "menu-skeleton-text",
+			style: { maxWidth: o }
+		})]
+	});
+}
+function Ke({ className: e, ...t }) {
+	let n = O.useContext(Z) ?? "default";
+	return /* @__PURE__ */ A(me, {
+		className: i("sidebar-menu-sub--component border-l-0 border-s! border-sidebar-border", D, Q[n].childGap, e),
+		...t
+	});
+}
+function qe({ className: e, ...t }) {
+	return /* @__PURE__ */ A(he, {
+		className: i("sidebar-menu-sub-item--component", e),
+		...t
+	});
+}
+function Je({ className: e, ...t }) {
+	return /* @__PURE__ */ A(q, {
+		className: i("sidebar-inset--component", e),
+		...t
+	});
+}
+function Ye({ className: e, ...t }) {
+	return /* @__PURE__ */ A(K, {
+		className: i("sidebar-rail--component", e),
+		...t
+	});
+}
+function Xe({ className: e, ...t }) {
+	return /* @__PURE__ */ A(G, {
+		className: i("sidebar-trigger--component size-action", e),
+		...t
+	});
+}
+function Ze({ className: e, render: t, size: n, tooltip: r, children: o, active: s = !1, ...c }) {
+	let l = r && !t ? /* @__PURE__ */ A("button", { type: "button" }) : t, u = we(r), d = O.useContext(Z) ?? "default", f = n ?? Q[d].size, p = f === "md" ? "default" : f;
+	return /* @__PURE__ */ A(ue, {
+		className: i("sidebar-menu-button--component group-data-[collapsible=icon]:px-control-sm! group-data-[collapsible=icon]:py-0!", E, "group-has-data-[sidebar=menu-action]/menu-item:px-control-sm!", a.menuActionReserve.item, Te(f), ye, e),
+		render: l,
+		size: p,
+		tooltip: u,
+		isActive: s,
+		...c,
+		children: Se(o)
+	});
+}
+function Qe({ className: e, children: t, active: n = !1, ...r }) {
+	let o = O.useContext(Z) ?? "default";
+	return /* @__PURE__ */ A(ge, {
+		className: i("sidebar-menu-sub-button--component peer/menu-sub-button translate-x-0", a.menuActionReserve.subItem, E, Q[o].childHeight, be, e),
+		isActive: n,
+		...r,
+		children: Se(t)
+	});
+}
+function $e({ className: e, children: t, ...n }) {
+	let r = typeof t == "string" || typeof t == "number" || typeof t == "bigint" ? /* @__PURE__ */ A(p, { children: t }) : t;
+	return /* @__PURE__ */ A(ie, {
+		className: i("sidebar-group-label--component mb-space-md h-action-sm px-control-sm group-data-[collapsible=icon]:hidden", e),
+		...n,
+		children: r
+	});
+}
+var et = U;
+function tt() {
+	return O.useContext(Z);
+}
+//#endregion
+export { Be as C, tt as D, et as E, U as O, Ae as S, _e as T, Ke as _, Re as a, Ee as b, Ne as c, Ve as d, Ue as f, Ge as g, He as h, Ie as i, ze as l, Ze as m, Fe as n, Le as o, We as p, Pe as r, $e as s, je as t, Je as u, Qe as v, Xe as w, Ye as x, qe as y };
+
+//# sourceMappingURL=sidebar-f9gRWXIR.js.map