@banzamel/mineralui 1.2.0 → 1.3.0

package/dist/layout-BvKpFxol.js

@@ -0,0 +1,905 @@
+import { n as e, t } from "./theme-Dl4EpdnW.js";
+import { Mi as n, Ni as r, Pi as i, cn as a } from "./icons-D5DK-J2C.js";
+import { t as o } from "./cn-YER3QsV1.js";
+import { t as s } from "./useInteractionEffect-DtpbVd77.js";
+import { t as c } from "./useReveal-BJ59usiL.js";
+import { n as l, t as u } from "./layoutProps-Cl6d1KmH.js";
+import { t as d } from "./MInline-BKY7arDg.js";
+import { t as f } from "./MLink-BgYBHhce.js";
+import { t as p } from "./MButton-pSNx-6UK.js";
+import { t as m } from "./MTooltip-UYOjDBOu.js";
+import { i as h, n as g, r as _ } from "./MDropdownMenu-CxBhYxQb.js";
+import { Children as v, cloneElement as y, createContext as b, forwardRef as x, isValidElement as S, useCallback as C, useContext as w, useEffect as T, useId as E, useMemo as D, useRef as O, useState as k } from "react";
+import { Fragment as A, jsx as j, jsxs as M } from "react/jsx-runtime";
+//#region src/components/layout/MContainer/MContainer.tsx
+function N({ size: t = "content", padded: n = !0, hidden: r, spacing: i, padding: a, fsize: s, mt: c, mb: d, ml: f, mr: p, mx: m, my: h, pt: g, pb: _, pl: v, pr: y, px: b, py: x, fullWidth: S, className: C, style: w, children: T, ...E }) {
+	let D = l({ fsize: s });
+	return /* @__PURE__ */ j("div", {
+		className: o("container", t, n && "padded", ...u({
+			spacing: i,
+			padding: a,
+			fsize: s,
+			mt: c,
+			mb: d,
+			ml: f,
+			mr: p,
+			mx: m,
+			my: h,
+			pt: g,
+			pb: _,
+			pl: v,
+			pr: y,
+			px: b,
+			py: x,
+			fullWidth: S
+		}), C),
+		style: {
+			...D,
+			...w
+		},
+		...e(r),
+		...E,
+		children: T
+	});
+}
+//#endregion
+//#region src/components/layout/MHeader/MHeader.tsx
+function P({ container: t = "wide", padded: n = !0, bordered: r = !0, sticky: i = !1, tone: a = "surface", layout: s = "split", hidden: c, className: l, children: u, ...d }) {
+	return /* @__PURE__ */ j("header", {
+		className: o("header", a, r && "bordered", i && "sticky", l),
+		...e(c),
+		...d,
+		children: /* @__PURE__ */ j(N, {
+			size: t,
+			padded: n,
+			className: o("inner", `layout-${s}`),
+			children: u
+		})
+	});
+}
+//#endregion
+//#region src/components/layout/MFooter/MFooter.tsx
+function F({ container: t = "wide", padded: n = !0, bordered: r = !0, tone: i = "surface", hidden: a, spacing: s, padding: c, fsize: d, mt: f, mb: p, ml: m, mr: h, mx: g, my: _, pt: v, pb: y, pl: b, pr: x, px: S, py: C, fullWidth: w, className: T, style: E, children: D, ...O }) {
+	let k = l({ fsize: d });
+	return /* @__PURE__ */ j("footer", {
+		className: o("footer", i, r && "bordered", ...u({
+			spacing: s,
+			padding: c,
+			fsize: d,
+			mt: f,
+			mb: p,
+			ml: m,
+			mr: h,
+			mx: g,
+			my: _,
+			pt: v,
+			pb: y,
+			pl: b,
+			pr: x,
+			px: S,
+			py: C,
+			fullWidth: w
+		}), T),
+		style: {
+			...k,
+			...E
+		},
+		...e(a),
+		...O,
+		children: /* @__PURE__ */ j(N, {
+			size: t,
+			padded: n,
+			className: "inner",
+			fullWidth: !0,
+			children: D
+		})
+	});
+}
+//#endregion
+//#region src/components/layout/MNavs/MNavs.tsx
+function I({ items: e, orientation: t = "horizontal", wrap: n = !1, className: r, children: i, ...a }) {
+	return /* @__PURE__ */ j("div", {
+		className: o("navs", t, n && "wrap", r),
+		...a,
+		children: e ? e.map((e) => {
+			let t = e.icon, n = e.iconOnly === !0 && t != null, r = typeof e.label == "string" ? e.label : void 0, i = n ? r : void 0, a = e.title ?? (n ? r : void 0);
+			return /* @__PURE__ */ M(f, {
+				component: e.component,
+				href: e.href,
+				to: e.to,
+				target: e.target,
+				rel: e.rel,
+				title: a,
+				current: e.current,
+				disabled: e.disabled,
+				className: o("link", n && "icon-only", e.className),
+				"aria-label": i,
+				children: [t ? /* @__PURE__ */ j("span", {
+					className: "icon",
+					"aria-hidden": !n || void 0,
+					children: /* @__PURE__ */ j(t, { size: e.iconSize })
+				}) : null, n ? null : e.label]
+			}, e.key ?? e.href ?? e.title?.toString() ?? r ?? "");
+		}) : i
+	});
+}
+//#endregion
+//#region src/components/layout/MNavbar/MNavbar.tsx
+function L({ container: t = "content", padded: n = !0, bordered: r = !0, sticky: i = !1, tone: s = "surface", justify: c = "between", wrap: l = !1, mobileMenu: u = "dropdown", mobileMenuContent: f, mobileMenuLabel: m = "Open navigation", hidden: h, className: g, children: _, ...b }) {
+	let [x, C] = k(!1), w = O(null), D = E(), A = v.toArray(_), P = A.filter((e) => S(e) && e.type === I).map((e, t) => y(e, {
+		key: `mnavbar-mobile-navs-${t}`,
+		orientation: "vertical"
+	})), F = /* @__PURE__ */ j(p, {
+		type: "button",
+		variant: "ghost",
+		size: "md",
+		iconOnly: !0,
+		className: "navbar-toggle",
+		"aria-label": m,
+		"aria-expanded": x,
+		"aria-controls": D,
+		onClick: z,
+		children: /* @__PURE__ */ j(a, {})
+	}, "mnavbar-toggle"), L = -1;
+	for (let e = A.length - 1; e >= 0; --e) {
+		let t = A[e];
+		if (S(t) && t.type === d) {
+			L = e;
+			break;
+		}
+	}
+	let R = L === -1 ? [...A, F] : A.map((e, t) => {
+		if (t !== L) return e;
+		let n = e, r = v.toArray(n.props.children);
+		return y(n, {
+			key: n.key ?? `mnavbar-inline-${t}`,
+			children: [...r, F]
+		});
+	});
+	T(() => {
+		if (!x) return;
+		function e(e) {
+			let t = w.current;
+			t && (e.target instanceof Node && t.contains(e.target) || C(!1));
+		}
+		function t(e) {
+			e.key === "Escape" && C(!1);
+		}
+		return document.addEventListener("pointerdown", e), document.addEventListener("keydown", t), () => {
+			document.removeEventListener("pointerdown", e), document.removeEventListener("keydown", t);
+		};
+	}, [x]);
+	function z() {
+		C((e) => !e);
+	}
+	function B(e) {
+		let t = e.target;
+		t && t.closest("a, [role=\"menuitem\"]") && C(!1);
+	}
+	return /* @__PURE__ */ M("nav", {
+		ref: w,
+		className: o("navbar", s, r && "bordered", i && "sticky", x && "mobile-open", `mobile-${u}`, g),
+		...e(h),
+		...b,
+		children: [
+			/* @__PURE__ */ j(N, {
+				size: t,
+				padded: n,
+				className: "container",
+				children: /* @__PURE__ */ j("div", {
+					className: o("inner", c, l && "wrap"),
+					children: R
+				})
+			}),
+			u === "drawer" && /* @__PURE__ */ j("div", {
+				className: o("mobile-backdrop", x && "visible"),
+				"aria-hidden": !0
+			}),
+			/* @__PURE__ */ M("div", {
+				id: D,
+				className: o("mobile-menu", u, x && "open"),
+				role: "menu",
+				"aria-hidden": !x || void 0,
+				onClick: B,
+				children: [P, f]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/layout/MTopbar/MTopbar.tsx
+function R(e) {
+	return e.key ?? e.to ?? e.href ?? String(e.label);
+}
+function z(e) {
+	return e.active ? !0 : (e.children ?? []).some(z);
+}
+function B(e, t = !1, r = !1) {
+	return /* @__PURE__ */ M(A, { children: [
+		e.icon ? /* @__PURE__ */ j("span", {
+			className: "topbar-icon",
+			children: e.icon
+		}) : null,
+		/* @__PURE__ */ j("span", { children: e.label }),
+		e.badge ? /* @__PURE__ */ j("span", {
+			className: "topbar-badge",
+			children: e.badge
+		}) : null,
+		t ? /* @__PURE__ */ j("span", {
+			className: o("topbar-chevron", r && "open"),
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ j(n, { size: "sm" })
+		}) : null
+	] });
+}
+function V(e) {
+	return e.map((e) => e.children?.length ? /* @__PURE__ */ j(g, {
+		label: String(e.label),
+		children: V(e.children)
+	}, R(e)) : /* @__PURE__ */ j(_, {
+		icon: e.icon,
+		label: e.label,
+		href: e.href,
+		to: e.to,
+		onClick: e.onClick,
+		color: e.color,
+		disabled: e.disabled,
+		active: e.active,
+		component: e.component,
+		className: e.className
+	}, R(e)));
+}
+function H({ items: t, container: n = "full", padded: a = !0, bordered: s = !0, sticky: c = !1, tone: l = "surface", justify: u = "left", size: d = "md", openOn: m = "hover", dropdownPlacement: g = "bottom-start", hidden: _, className: v, style: y, ...b }) {
+	let [x, S] = k(!1), [C, w] = k({}), [E, A] = k(!1), [P, F] = k(!1), [I, L] = k(!1), H = O(null);
+	T(() => {
+		let e = window.matchMedia("(pointer: coarse)"), t = () => S(e.matches);
+		return t(), typeof e.addEventListener == "function" ? (e.addEventListener("change", t), () => e.removeEventListener("change", t)) : (e.addListener(t), () => e.removeListener(t));
+	}, []), T(() => {
+		let e = H.current;
+		if (!e) return;
+		let t = () => {
+			A(e.scrollWidth > e.clientWidth + 1), F(e.scrollLeft > 4), L(e.scrollLeft + e.clientWidth < e.scrollWidth - 4);
+		};
+		t(), e.addEventListener("scroll", t, { passive: !0 });
+		let n = new ResizeObserver(t);
+		return n.observe(e), Array.from(e.children).forEach((e) => n.observe(e)), () => {
+			e.removeEventListener("scroll", t), n.disconnect();
+		};
+	}, [
+		t,
+		u,
+		d,
+		l,
+		s,
+		a,
+		n
+	]);
+	let U = D(() => x ? "click" : m, [x, m]), W = (e) => {
+		let t = H.current;
+		if (!t) return;
+		let n = Math.max(180, Math.floor(t.clientWidth * .45));
+		t.scrollBy({
+			left: e === "left" ? -n : n,
+			behavior: "smooth"
+		});
+	};
+	return /* @__PURE__ */ j("nav", {
+		className: o("topbar", l, d, s && "bordered", c && "sticky", v),
+		style: y,
+		...e(_),
+		...b,
+		children: /* @__PURE__ */ j(N, {
+			size: n,
+			padded: a,
+			className: "topbar-container",
+			children: /* @__PURE__ */ M("div", {
+				className: o("topbar-scroll-shell", E && "overflowing"),
+				children: [
+					E && /* @__PURE__ */ j(p, {
+						variant: "ghost",
+						color: "neutral",
+						iconOnly: !0,
+						shape: "circle",
+						className: o("topbar-scroll-button", "left", !P && "hidden"),
+						onClick: () => W("left"),
+						"aria-label": "Scroll topbar left",
+						children: /* @__PURE__ */ j(i, {})
+					}),
+					/* @__PURE__ */ j("div", {
+						ref: H,
+						className: "topbar-viewport",
+						children: /* @__PURE__ */ j("div", {
+							className: o("topbar-list", `justify-${u}`, E && "overflowing"),
+							children: t.map((e) => {
+								let t = R(e), n = z(e), r = !!C[t];
+								return e.children?.length ? e.disabled ? /* @__PURE__ */ j("div", {
+									className: o("topbar-trigger", e.color, "disabled", e.className),
+									"aria-disabled": "true",
+									children: B(e, !0)
+								}, t) : /* @__PURE__ */ j(h, {
+									trigger: /* @__PURE__ */ j("div", {
+										className: o("topbar-trigger", e.color, n && "active", r && "open", e.disabled && "disabled", e.className),
+										children: B(e, !0, r)
+									}),
+									openOn: e.openOn ?? U,
+									onOpenChange: (e) => w((n) => ({
+										...n,
+										[t]: e
+									})),
+									placement: g,
+									popoverClassName: "topbar-dropdown-popover",
+									children: V(e.children)
+								}, t) : /* @__PURE__ */ j(f, {
+									component: e.component,
+									href: e.href,
+									to: e.to,
+									onClick: e.onClick,
+									current: e.active,
+									disabled: e.disabled,
+									underline: "none",
+									tone: "inherit",
+									className: o("topbar-link", e.color, e.className, e.active && "active"),
+									children: B(e)
+								}, t);
+							})
+						})
+					}),
+					E && /* @__PURE__ */ j(p, {
+						variant: "ghost",
+						color: "neutral",
+						iconOnly: !0,
+						shape: "circle",
+						className: o("topbar-scroll-button", "right", !I && "hidden"),
+						onClick: () => W("right"),
+						"aria-label": "Scroll topbar right",
+						children: /* @__PURE__ */ j(r, {})
+					})
+				]
+			})
+		})
+	});
+}
+//#endregion
+//#region src/components/layout/MTabs/MTabs.tsx
+function U({ item: e, isActive: t, tabId: n, panelId: r, clickEffect: i, rippleColor: a, onSelect: c }) {
+	let { effectClassName: l, effectLayer: u, handlePointerDown: d, triggerEffect: f } = s({
+		effect: i,
+		disabled: e.disabled,
+		centered: !0,
+		color: a
+	});
+	return /* @__PURE__ */ M("button", {
+		type: "button",
+		id: n,
+		role: "tab",
+		"aria-selected": t,
+		"aria-controls": r,
+		tabIndex: t ? 0 : -1,
+		disabled: e.disabled,
+		className: o("tabs-trigger", t && "active", e.disabled && "disabled", l),
+		onPointerDown: d,
+		onKeyDown: (e) => {
+			(e.key === " " || e.key === "Enter") && f(e.currentTarget);
+		},
+		onClick: () => c(e.value),
+		children: [
+			u,
+			e.icon && /* @__PURE__ */ j("span", {
+				className: "tabs-icon",
+				children: e.icon
+			}),
+			/* @__PURE__ */ j("span", {
+				className: "tabs-label",
+				children: e.label
+			})
+		]
+	});
+}
+function W({ items: e, value: t, defaultValue: n, onValueChange: r, variant: i = "underline", orientation: a = "horizontal", size: s = "md", fullWidth: c = !1, showPanels: l = !0, panelClassName: u, clickEffect: d = "ripple", rippleColor: f, className: p, ...m }) {
+	let [h, g] = k(D(() => n ?? e.find((e) => !e.disabled)?.value ?? "", [n, e])), _ = t ?? h, v = e.find((e) => e.value === _) ?? e[0], y = E();
+	function b(e) {
+		t === void 0 && g(e), r?.(e);
+	}
+	function x(t) {
+		let n = e.filter((e) => !e.disabled), r = n.findIndex((e) => e.value === v?.value);
+		if (r === -1) return;
+		let i = a === "vertical" ? ["ArrowDown"] : ["ArrowRight", "ArrowDown"], o = a === "vertical" ? ["ArrowUp"] : ["ArrowLeft", "ArrowUp"];
+		if (i.includes(t.key)) {
+			t.preventDefault();
+			let e = n[(r + 1) % n.length];
+			b(e.value);
+		}
+		if (o.includes(t.key)) {
+			t.preventDefault();
+			let e = n[(r - 1 + n.length) % n.length];
+			b(e.value);
+		}
+	}
+	return /* @__PURE__ */ M("div", {
+		className: o("tabs", i, a, s, c && "full-width", p),
+		...m,
+		children: [/* @__PURE__ */ j("div", {
+			className: "tabs-list",
+			role: "tablist",
+			"aria-orientation": a,
+			onKeyDown: x,
+			children: e.map((e) => /* @__PURE__ */ j(U, {
+				item: e,
+				isActive: e.value === v?.value,
+				tabId: `${y}-${e.value}-tab`,
+				panelId: `${y}-${e.value}-panel`,
+				clickEffect: d,
+				rippleColor: f,
+				onSelect: b
+			}, e.value))
+		}), l && v?.content !== void 0 && /* @__PURE__ */ j("div", {
+			id: `${y}-${v.value}-panel`,
+			role: "tabpanel",
+			"aria-labelledby": `${y}-${v.value}-tab`,
+			className: o("tabs-panel", u),
+			children: v.content
+		}, v.value)]
+	});
+}
+//#endregion
+//#region src/components/layout/MSection/MSection.tsx
+function G({ as: t = "section", spacing: n = "lg", tone: r = "default", hidden: i, reveal: a, className: s, style: l, children: u, ...d }) {
+	let f = t, p = c(a), m = a !== void 0 && a !== !1;
+	return /* @__PURE__ */ j(f, {
+		ref: m ? p : void 0,
+		className: o("section", n, r, m && "reveal", s),
+		style: l,
+		...e(i),
+		...d,
+		children: u
+	});
+}
+//#endregion
+//#region src/components/layout/MSimpleGrid/MSimpleGrid.tsx
+function K({ columns: e = 2, minItemWidth: t, className: n, style: r, children: i, ...a }) {
+	return /* @__PURE__ */ j("div", {
+		className: o("grid", `columns-${e}`, n),
+		style: {
+			...t ? { "--grid-min-item-width": t } : {},
+			...r
+		},
+		...a,
+		children: i
+	});
+}
+//#endregion
+//#region src/components/layout/MGrid/MGrid.tsx
+function q(e) {
+	return S(e) ? e.type === Y ? !0 : e.type === J && e.props.type === "col" : !1;
+}
+function ee(e) {
+	return {
+		span: e.span ?? e.xxl ?? e.xl ?? e.lg ?? e.md ?? e.sm,
+		xxl: e.xxl ?? e.xl ?? e.lg ?? e.md ?? e.sm,
+		xl: e.xl ?? e.lg ?? e.md ?? e.sm,
+		lg: e.lg ?? e.md ?? e.sm,
+		md: e.md ?? e.sm,
+		sm: e.sm
+	};
+}
+function te(e, t) {
+	if (t <= 0) return [];
+	if (e <= 0) return Array.from({ length: t }, () => void 0);
+	let n = Math.floor(e / t), r = e % t;
+	return Array.from({ length: t }, (e, t) => {
+		let i = n + +(t < r);
+		return i >= 1 ? i : void 0;
+	});
+}
+function ne(e) {
+	let t = [
+		"span",
+		"xxl",
+		"xl",
+		"lg",
+		"md",
+		"sm"
+	], n = e.map((e) => ee(e)), r = n.map((e) => ({ ...e }));
+	for (let e of t) {
+		let t = [], i = 0;
+		n.forEach((n, r) => {
+			let a = n[e];
+			if (a) {
+				i += a;
+				return;
+			}
+			t.push(r);
+		});
+		let a = te(Math.max(12 - i, 0), t.length);
+		t.forEach((t, n) => {
+			r[t][e] = a[n];
+		});
+	}
+	return r;
+}
+function J({ type: t = "row", span: n, sm: r, md: i, lg: a, xl: s, xxl: c, hidden: d, spacing: f, padding: p, fsize: m, mt: h, mb: g, ml: _, mr: b, mx: x, my: S, pt: C, pb: w, pl: T, pr: E, px: D, py: O, fullWidth: k, className: A, style: M, children: N, ...P }) {
+	let F = l({ fsize: m }), I = n ?? c ?? s ?? a;
+	if (t === "col") return /* @__PURE__ */ j("div", {
+		className: o("grid", "col", I ? `span-${I}` : "span-auto", c && `xxl-${c}`, s && `xl-${s}`, a && `lg-${a}`, i && `md-${i}`, r && `sm-${r}`, ...u({
+			spacing: f,
+			padding: p,
+			fsize: m,
+			mt: h,
+			mb: g,
+			ml: _,
+			mr: b,
+			mx: x,
+			my: S,
+			pt: C,
+			pb: w,
+			pl: T,
+			pr: E,
+			px: D,
+			py: O,
+			fullWidth: k
+		}), A),
+		style: {
+			...F,
+			...M
+		},
+		...e(d),
+		...P,
+		children: N
+	});
+	let L = v.toArray(N), R = L.flatMap((e, t) => q(e) ? [{
+		child: e,
+		index: t
+	}] : []), z = Math.min(Math.max(R.length || L.length, 1), 12), B = R.some(({ child: e }) => {
+		let t = e.props;
+		return !!(t.span || t.xxl || t.xl || t.lg || t.md || t.sm);
+	}), V = B ? ne(R.map(({ child: e }) => e.props)) : null, H = B && V ? L.map((e, t) => {
+		let n = R.findIndex((e) => e.index === t);
+		if (n === -1 || !q(e)) return e;
+		let r = V[n];
+		return y(e, {
+			span: r.span,
+			xxl: r.xxl,
+			xl: r.xl,
+			lg: r.lg,
+			md: r.md,
+			sm: r.sm
+		});
+	}) : L;
+	return /* @__PURE__ */ j("div", {
+		className: o("grid", "row", B ? "tracked" : `auto-cols-${z}`, ...u({
+			spacing: f,
+			padding: p,
+			fsize: m,
+			mt: h,
+			mb: g,
+			ml: _,
+			mr: b,
+			mx: x,
+			my: S,
+			pt: C,
+			pb: w,
+			pl: T,
+			pr: E,
+			px: D,
+			py: O,
+			fullWidth: k ?? !0
+		}), A),
+		style: {
+			...F,
+			...M
+		},
+		...e(d),
+		...P,
+		children: H
+	});
+}
+function Y({ span: e, sm: t, md: n, lg: r, xl: i, xxl: a, ...o }) {
+	return /* @__PURE__ */ j(J, {
+		type: "col",
+		span: e,
+		sm: t,
+		md: n,
+		lg: r,
+		xl: i,
+		xxl: a,
+		...o
+	});
+}
+//#endregion
+//#region src/components/layout/MDivider/MDivider.tsx
+function re({ orientation: t = "horizontal", variant: n = "solid", hidden: r, className: i, style: a, ...s }) {
+	return /* @__PURE__ */ j("div", {
+		role: "separator",
+		"aria-orientation": t,
+		className: o("divider", t, n, i),
+		style: a,
+		...e(r),
+		...s
+	});
+}
+//#endregion
+//#region src/components/layout/MSidebar/MSidebar.tsx
+var X = "mineralui-sidebar", Z = b({
+	mode: "expanded",
+	mobile: !1,
+	mobileOpen: !1,
+	canToggle: !1,
+	toggleMode: () => {}
+});
+function Q() {
+	return w(Z);
+}
+function ie(e) {
+	let [t, n] = k(() => typeof window < "u" ? window.innerWidth <= e : !1);
+	return T(() => {
+		let t = window.matchMedia(`(max-width: ${e}px)`), r = (e) => n(e.matches);
+		return n(t.matches), t.addEventListener("change", r), () => t.removeEventListener("change", r);
+	}, [e]), t;
+}
+function $({ mode: e = "auto", defaultMode: n = "expanded", onModeChange: r, persist: i = !1, side: s = "left", tone: c = "subtle", bordered: l = !0, mobileBreakpoint: u = t.md, className: d, style: f, children: p }) {
+	let m = ie(u), [h, g] = k(!1), [_, v] = k(() => {
+		if (i) try {
+			let e = localStorage.getItem(X);
+			if (e === "expanded" || e === "collapsed") return e;
+		} catch {}
+		return n;
+	}), y = e === "auto" ? _ : e === "collapsed" ? "collapsed" : "expanded", b = C(() => {
+		let e = y === "expanded" ? "collapsed" : "expanded";
+		if (v(e), r?.(e), i) try {
+			localStorage.setItem(X, e);
+		} catch {}
+	}, [
+		y,
+		r,
+		i
+	]), x = C(() => g(!1), []);
+	T(() => {
+		if (!h) return;
+		let e = (e) => {
+			e.key === "Escape" && g(!1);
+		};
+		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+	}, [h]);
+	let S = !m && e === "auto", w = D(() => ({
+		mode: y,
+		mobile: m,
+		mobileOpen: h,
+		canToggle: S,
+		toggleMode: b
+	}), [
+		y,
+		m,
+		h,
+		S,
+		b
+	]), E = o("sidebar", c, s, !m && y === "collapsed" && "collapsed", l && "bordered", m && "mobile", m && h && "mobile-open", d);
+	return /* @__PURE__ */ M(Z.Provider, {
+		value: w,
+		children: [
+			m && h && /* @__PURE__ */ j("div", {
+				className: "sidebar-backdrop",
+				onClick: x
+			}),
+			/* @__PURE__ */ j("aside", {
+				className: E,
+				style: f,
+				children: p
+			}),
+			m && !h && /* @__PURE__ */ j("button", {
+				className: o("sidebar-hamburger", s),
+				onClick: () => g(!0),
+				"aria-label": "Open menu",
+				children: /* @__PURE__ */ j("span", {
+					className: "sidebar-hamburger-icon",
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ j(a, {})
+				})
+			})
+		]
+	});
+}
+function ae({ bordered: e = !1, className: t, children: n }) {
+	let { mode: i, mobile: a, canToggle: s, toggleMode: c } = Q(), l = !a && i === "collapsed";
+	return /* @__PURE__ */ M("div", {
+		className: o("sidebar-header", e && "bordered", t),
+		children: [/* @__PURE__ */ j("div", {
+			className: "sidebar-header-content",
+			children: n
+		}), s && /* @__PURE__ */ j(p, {
+			variant: "outlined",
+			color: "neutral",
+			iconOnly: !0,
+			size: "sm",
+			onClick: c,
+			"aria-label": l ? "Expand sidebar" : "Collapse sidebar",
+			className: "sidebar-toggle",
+			children: /* @__PURE__ */ j("span", {
+				className: o("sidebar-chevron", l && "flipped"),
+				children: /* @__PURE__ */ j(r, {})
+			})
+		})]
+	});
+}
+function oe({ className: e, children: t }) {
+	return /* @__PURE__ */ j("div", {
+		className: o("sidebar-body", e),
+		children: t
+	});
+}
+function se({ className: e, children: t }) {
+	return /* @__PURE__ */ j("nav", {
+		className: o("sidebar-nav", e),
+		children: t
+	});
+}
+function ce({ icon: e, label: t, href: n, to: r, onClick: i, active: a = !1, disabled: s = !1, badge: c, color: l, component: u, className: d }) {
+	let { mode: f, mobile: p } = Q(), h = !p && f === "collapsed", g = u ?? (n || r ? "a" : "button"), _ = u ? r ? { to: r } : n ? { href: n } : {} : n ? { href: n } : r ? { href: r } : {};
+	return /* @__PURE__ */ M(g, {
+		className: o("sidebar-item", a && "active", s && "disabled", l, d),
+		onClick: s ? void 0 : i,
+		"aria-disabled": s || void 0,
+		title: h ? t : void 0,
+		..._,
+		children: [
+			e && /* @__PURE__ */ j("span", {
+				className: "sidebar-item-icon",
+				children: e
+			}),
+			!h && /* @__PURE__ */ j(m, {
+				content: t,
+				placement: "top",
+				className: "sidebar-item-label-tooltip",
+				children: /* @__PURE__ */ j("span", {
+					className: "sidebar-item-label",
+					children: t
+				})
+			}),
+			!h && c && /* @__PURE__ */ j("span", {
+				className: "sidebar-item-badge",
+				children: c
+			})
+		]
+	});
+}
+function le({ label: e, icon: t, active: n = !1, defaultOpen: i = !0, collapsible: a = !0, children: s, className: c }) {
+	let l = Q(), { mode: u, mobile: d } = l, f = !d && u === "collapsed", [p, m] = k(i), g = D(() => ({
+		...l,
+		mode: "expanded"
+	}), [l]), _ = () => {
+		a && m((e) => !e);
+	};
+	if (f) {
+		let r = /* @__PURE__ */ j("span", {
+			className: o("sidebar-group-icon collapsed", n && "active"),
+			title: e,
+			children: t
+		});
+		return /* @__PURE__ */ j("div", {
+			className: o("sidebar-group", c),
+			children: /* @__PURE__ */ j(h, {
+				trigger: r,
+				placement: "right-start",
+				closeOnSelect: !0,
+				openOn: "hover",
+				children: /* @__PURE__ */ j(Z.Provider, {
+					value: g,
+					children: s
+				})
+			})
+		});
+	}
+	return /* @__PURE__ */ M("div", {
+		className: o("sidebar-group", c),
+		children: [/* @__PURE__ */ M("button", {
+			className: o("sidebar-group-header", n && "active"),
+			onClick: _,
+			"aria-expanded": p,
+			children: [
+				t && /* @__PURE__ */ j("span", {
+					className: "sidebar-group-icon",
+					children: t
+				}),
+				/* @__PURE__ */ j("span", {
+					className: "sidebar-group-label",
+					children: e
+				}),
+				a && /* @__PURE__ */ j("span", {
+					className: o("sidebar-group-arrow", p && "open"),
+					children: /* @__PURE__ */ j(r, {})
+				})
+			]
+		}), p && /* @__PURE__ */ j("div", {
+			className: "sidebar-group-items",
+			children: s
+		})]
+	});
+}
+function ue({ bordered: e = !1, className: t, children: n }) {
+	return /* @__PURE__ */ j("div", {
+		className: o("sidebar-footer", e && "bordered", t),
+		children: n
+	});
+}
+function de({ className: e, spacing: t = "md" }) {
+	return /* @__PURE__ */ j("hr", { className: o("sidebar-divider", t, e) });
+}
+//#endregion
+//#region src/components/layout/MBreadcrumb/MBreadcrumb.tsx
+function fe({ items: e, separator: t = "/", maxItems: n, className: r, ...i }) {
+	let a = D(() => {
+		if (!n || n >= e.length) return e;
+		if (n < 2) return [e[e.length - 1]];
+		let t = e.slice(0, 1), r = e.slice(-(n - 1));
+		return [
+			...t,
+			null,
+			...r
+		];
+	}, [e, n]);
+	return /* @__PURE__ */ j("nav", {
+		"aria-label": "breadcrumb",
+		className: o("breadcrumb", r),
+		...i,
+		children: /* @__PURE__ */ j("ol", {
+			className: "trail",
+			children: a.map((e, n) => {
+				if (e === null) return /* @__PURE__ */ M("li", {
+					className: "crumb dots",
+					children: [/* @__PURE__ */ j("span", {
+						className: "sep",
+						children: t
+					}), /* @__PURE__ */ j("span", { children: "…" })]
+				}, "ellipsis");
+				let r = n === a.length - 1;
+				return /* @__PURE__ */ M("li", {
+					className: o("crumb", r && "active"),
+					children: [n > 0 && /* @__PURE__ */ j("span", {
+						className: "sep",
+						children: t
+					}), e.href && !r ? /* @__PURE__ */ j("a", {
+						href: e.href,
+						className: "link",
+						onClick: e.onClick,
+						children: e.label
+					}) : e.onClick && !r ? /* @__PURE__ */ j("button", {
+						type: "button",
+						className: "link btn",
+						onClick: e.onClick,
+						children: e.label
+					}) : /* @__PURE__ */ j("span", {
+						className: "current",
+						"aria-current": r ? "page" : void 0,
+						children: e.label
+					})]
+				}, n);
+			})
+		})
+	});
+}
+//#endregion
+//#region src/components/layout/MAppShell/MAppShell.tsx
+var pe = x(function({ className: e, children: t, ...n }, r) {
+	let i = [], a = [];
+	return v.forEach(t, (e) => {
+		S(e) && e.type === $ ? i.push(e) : a.push(e);
+	}), /* @__PURE__ */ M("div", {
+		ref: r,
+		className: o("app-shell", e),
+		...n,
+		children: [i, /* @__PURE__ */ j("div", {
+			className: "app-main",
+			children: a
+		})]
+	});
+}), me = x(function({ className: e, children: t, ...n }, r) {
+	return /* @__PURE__ */ j("div", {
+		ref: r,
+		className: o("app-body", e),
+		...n,
+		children: t
+	});
+});
+//#endregion
+export { N as C, P as S, W as _, oe as a, I as b, le as c, se as d, re as f, G as g, K as h, $ as i, ae as l, Y as m, me as n, de as o, J as p, fe as r, ue as s, pe as t, ce as u, H as v, F as x, L as y };
+
+//# sourceMappingURL=layout-BvKpFxol.js.map