@banzamel/mineralui 0.10.3 → 1.0.0

package/dist/AppShell-BGFVRml6.js

@@ -1,659 +0,0 @@
-import { t as e } from "./ChevronRightIcon-1oaUsxM2.js";
-import { t } from "./MenuIcon-mX5bSTAp.js";
-import { t as n } from "./cn-BIeeqGZv.js";
-import { t as r } from "./useInteractionEffect-B5_UpgTt.js";
-import { t as i } from "./useReveal-Fg-i8hhZ.js";
-import { n as a, t as o } from "./layoutProps-CY4cnDrW.js";
-import { t as s } from "./appearanceProps-8tN47e1u.js";
-import { t as c } from "./Link-D3lmTu3R.js";
-import { i as l } from "./DropdownMenu-Bf1l4spO.js";
-import { Children as u, createContext as d, forwardRef as f, isValidElement as p, useCallback as m, useContext as h, useEffect as g, useId as _, useMemo as v, useState as y } from "react";
-import { jsx as b, jsxs as x } from "react/jsx-runtime";
-//#region src/components/layout/Container/Container.tsx
-function S({ size: e = "content", padded: t = !0, spacing: r, padding: i, fsize: s, fcolor: c, mt: l, mb: u, ml: d, mr: f, mx: p, my: m, pt: h, pb: g, pl: _, pr: v, px: y, py: x, fullWidth: S, className: C, style: w, children: T, ...E }) {
-	let D = a({ fsize: s });
-	return /* @__PURE__ */ b("div", {
-		className: n("container", e, t && "padded", ...o({
-			spacing: r,
-			padding: i,
-			fsize: s,
-			fcolor: c,
-			mt: l,
-			mb: u,
-			ml: d,
-			mr: f,
-			mx: p,
-			my: m,
-			pt: h,
-			pb: g,
-			pl: _,
-			pr: v,
-			px: y,
-			py: x,
-			fullWidth: S
-		}), C),
-		style: {
-			...D,
-			...w
-		},
-		...E,
-		children: T
-	});
-}
-//#endregion
-//#region src/components/layout/MHeader/MHeader.tsx
-function C({ container: e = "wide", padded: t = !0, bordered: r = !0, sticky: i = !1, tone: a = "surface", fcolor: o, className: c, children: l, ...u }) {
-	return /* @__PURE__ */ b("header", {
-		className: n("header", a, ...s({ fcolor: o }), r && "bordered", i && "sticky", c),
-		...u,
-		children: /* @__PURE__ */ b(S, {
-			size: e,
-			padded: t,
-			className: "inner",
-			children: l
-		})
-	});
-}
-//#endregion
-//#region src/components/layout/MFooter/MFooter.tsx
-function w({ container: e = "wide", padded: t = !0, bordered: r = !0, tone: i = "surface", spacing: s, padding: c, fsize: l, fcolor: u, mt: d, mb: f, ml: p, mr: m, mx: h, my: g, pt: _, pb: v, pl: y, pr: x, px: C, py: w, fullWidth: T, className: E, style: D, children: O, ...k }) {
-	let A = a({ fsize: l });
-	return /* @__PURE__ */ b("footer", {
-		className: n("footer", i, r && "bordered", ...o({
-			spacing: s,
-			padding: c,
-			fsize: l,
-			fcolor: u,
-			mt: d,
-			mb: f,
-			ml: p,
-			mr: m,
-			mx: h,
-			my: g,
-			pt: _,
-			pb: v,
-			pl: y,
-			pr: x,
-			px: C,
-			py: w,
-			fullWidth: T
-		}), E),
-		style: {
-			...A,
-			...D
-		},
-		...k,
-		children: /* @__PURE__ */ b(S, {
-			size: e,
-			padded: t,
-			className: "inner",
-			fullWidth: !0,
-			children: O
-		})
-	});
-}
-//#endregion
-//#region src/components/layout/MNavbar/MNavbar.tsx
-function T({ container: e = "content", padded: t = !0, bordered: r = !0, sticky: i = !1, tone: a = "surface", fcolor: o, justify: c = "between", align: l = "center", wrap: u = !1, className: d, children: f, ...p }) {
-	return /* @__PURE__ */ b("nav", {
-		className: n("navbar", a, ...s({ fcolor: o }), r && "bordered", i && "sticky", d),
-		...p,
-		children: /* @__PURE__ */ b(S, {
-			size: e,
-			padded: t,
-			className: "container",
-			children: /* @__PURE__ */ b("div", {
-				className: n("inner", c, l, u && "wrap"),
-				children: f
-			})
-		})
-	});
-}
-//#endregion
-//#region src/components/layout/MNavs/MNavs.tsx
-function E({ items: e, orientation: t = "horizontal", fcolor: r, wrap: i = !1, className: a, children: o, ...l }) {
-	return /* @__PURE__ */ b("div", {
-		className: n("navs", t, ...s({ fcolor: r }), i && "wrap", a),
-		...l,
-		children: e ? e.map((e) => /* @__PURE__ */ b(c, {
-			component: e.component,
-			href: e.href,
-			to: e.to,
-			target: e.target,
-			rel: e.rel,
-			title: e.title,
-			fcolor: r,
-			current: e.current,
-			disabled: e.disabled,
-			className: n("link", e.className),
-			children: e.label
-		}, e.key ?? e.href ?? e.title?.toString() ?? e.label?.toString())) : o
-	});
-}
-//#endregion
-//#region src/components/layout/MTabs/MTabs.tsx
-function D({ item: e, isActive: t, tabId: i, panelId: a, clickEffect: o, rippleColor: s, onSelect: c }) {
-	let { effectClassName: l, effectLayer: u, handlePointerDown: d, triggerEffect: f } = r({
-		effect: o,
-		disabled: e.disabled,
-		centered: !0,
-		color: s
-	});
-	return /* @__PURE__ */ x("button", {
-		type: "button",
-		id: i,
-		role: "tab",
-		"aria-selected": t,
-		"aria-controls": a,
-		tabIndex: t ? 0 : -1,
-		disabled: e.disabled,
-		className: n("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__ */ b("span", {
-				className: "tabs-icon",
-				children: e.icon
-			}),
-			/* @__PURE__ */ b("span", {
-				className: "tabs-label",
-				children: e.label
-			})
-		]
-	});
-}
-function O({ items: e, value: t, defaultValue: r, onValueChange: i, variant: a = "underline", orientation: o = "horizontal", size: c = "md", fullWidth: l = !1, fcolor: u, showPanels: d = !0, panelClassName: f, clickEffect: p = "ripple", rippleColor: m, className: h, ...g }) {
-	let [S, C] = y(v(() => r ?? e.find((e) => !e.disabled)?.value ?? "", [r, e])), w = t ?? S, T = e.find((e) => e.value === w) ?? e[0], E = _();
-	function O(e) {
-		t === void 0 && C(e), i?.(e);
-	}
-	function k(t) {
-		let n = e.filter((e) => !e.disabled), r = n.findIndex((e) => e.value === T?.value);
-		if (r === -1) return;
-		let i = o === "vertical" ? ["ArrowDown"] : ["ArrowRight", "ArrowDown"], a = o === "vertical" ? ["ArrowUp"] : ["ArrowLeft", "ArrowUp"];
-		if (i.includes(t.key)) {
-			t.preventDefault();
-			let e = n[(r + 1) % n.length];
-			O(e.value);
-		}
-		if (a.includes(t.key)) {
-			t.preventDefault();
-			let e = n[(r - 1 + n.length) % n.length];
-			O(e.value);
-		}
-	}
-	return /* @__PURE__ */ x("div", {
-		className: n("tabs", a, o, c, ...s({ fcolor: u }), l && "full-width", h),
-		...g,
-		children: [/* @__PURE__ */ b("div", {
-			className: "tabs-list",
-			role: "tablist",
-			"aria-orientation": o,
-			onKeyDown: k,
-			children: e.map((e) => /* @__PURE__ */ b(D, {
-				item: e,
-				isActive: e.value === T?.value,
-				tabId: `${E}-${e.value}-tab`,
-				panelId: `${E}-${e.value}-panel`,
-				clickEffect: p,
-				rippleColor: m,
-				onSelect: O
-			}, e.value))
-		}), d && T?.content !== void 0 && /* @__PURE__ */ b("div", {
-			id: `${E}-${T.value}-panel`,
-			role: "tabpanel",
-			"aria-labelledby": `${E}-${T.value}-tab`,
-			className: n("tabs-panel", f),
-			children: T.content
-		}, T.value)]
-	});
-}
-//#endregion
-//#region src/components/layout/Section/Section.tsx
-function k({ as: e = "section", spacing: t = "lg", tone: r = "default", reveal: a, className: o, style: s, children: c, ...l }) {
-	let u = e, d = i(a), f = a !== void 0 && a !== !1;
-	return /* @__PURE__ */ b(u, {
-		ref: f ? d : void 0,
-		className: n("section", t, r, f && "mineral-reveal", o),
-		style: s,
-		...l,
-		children: c
-	});
-}
-//#endregion
-//#region src/components/layout/Inline/Inline.tsx
-function A({ align: e = "center", justify: t = "start", wrap: r = "wrap", reveal: s, spacing: c, padding: l, fsize: u, fcolor: d, mt: f, mb: p, ml: m, mr: h, mx: g, my: _, pt: v, pb: y, pl: x, pr: S, px: C, py: w, fullWidth: T, className: E, style: D, children: O, ...k }) {
-	let A = a({ fsize: u }), j = i(s);
-	return /* @__PURE__ */ b("div", {
-		ref: s !== void 0 && s !== !1 ? j : void 0,
-		className: n("inline", e, `justify-${t}`, r, s !== void 0 && s !== !1 && "mineral-reveal", ...o({
-			spacing: c,
-			padding: l,
-			fsize: u,
-			fcolor: d,
-			mt: f,
-			mb: p,
-			ml: m,
-			mr: h,
-			mx: g,
-			my: _,
-			pt: v,
-			pb: y,
-			pl: x,
-			pr: S,
-			px: C,
-			py: w,
-			fullWidth: T
-		}), E),
-		style: {
-			...A,
-			...D
-		},
-		...k,
-		children: O
-	});
-}
-//#endregion
-//#region src/components/layout/Grid/Grid.tsx
-function j({ columns: e = 2, minItemWidth: t, className: r, style: i, children: a, ...o }) {
-	return /* @__PURE__ */ b("div", {
-		className: n("grid", `columns-${e}`, r),
-		style: {
-			...t ? { "--grid-min-item-width": t } : {},
-			...i
-		},
-		...o,
-		children: a
-	});
-}
-//#endregion
-//#region src/components/layout/MGrid/MGrid.tsx
-function M({ type: e = "row", span: t, sm: r, md: i, lg: s, xl: c, spacing: l, padding: d, fsize: f, fcolor: m, mt: h, mb: g, ml: _, mr: v, mx: y, my: x, pt: S, pb: C, pl: w, pr: T, px: E, py: D, fullWidth: O, className: k, style: A, children: j, ...M }) {
-	let N = a({ fsize: f }), P = t ?? c ?? s;
-	if (e === "col") return /* @__PURE__ */ b("div", {
-		className: n("grid", "col", P ? `span-${P}` : "span-auto", c && `xl-${c}`, s && `lg-${s}`, i && `md-${i}`, r && `sm-${r}`, ...o({
-			spacing: l,
-			padding: d,
-			fsize: f,
-			fcolor: m,
-			mt: h,
-			mb: g,
-			ml: _,
-			mr: v,
-			mx: y,
-			my: x,
-			pt: S,
-			pb: C,
-			pl: w,
-			pr: T,
-			px: E,
-			py: D,
-			fullWidth: O
-		}), k),
-		style: {
-			...N,
-			...A
-		},
-		...M,
-		children: j
-	});
-	let F = u.toArray(j), I = Math.min(Math.max(F.length, 1), 12);
-	return /* @__PURE__ */ b("div", {
-		className: n("grid", "row", F.some((e) => {
-			if (!p(e)) return !1;
-			let t = e.props;
-			return !!(t?.span || t?.lg || t?.xl);
-		}) ? "tracked" : `auto-cols-${I}`, ...o({
-			spacing: l,
-			padding: d,
-			fsize: f,
-			fcolor: m,
-			mt: h,
-			mb: g,
-			ml: _,
-			mr: v,
-			mx: y,
-			my: x,
-			pt: S,
-			pb: C,
-			pl: w,
-			pr: T,
-			px: E,
-			py: D,
-			fullWidth: O ?? !0
-		}), k),
-		style: {
-			...N,
-			...A
-		},
-		...M,
-		children: j
-	});
-}
-function N({ span: e, sm: t, md: n, lg: r, xl: i, ...a }) {
-	return /* @__PURE__ */ b(M, {
-		type: "col",
-		span: e,
-		sm: t,
-		md: n,
-		lg: r,
-		xl: i,
-		...a
-	});
-}
-//#endregion
-//#region src/components/layout/Divider/Divider.tsx
-function P({ orientation: e = "horizontal", variant: t = "solid", className: r, style: i, ...a }) {
-	return /* @__PURE__ */ b("div", {
-		role: "separator",
-		"aria-orientation": e,
-		className: n("divider", e, t, r),
-		style: i,
-		...a
-	});
-}
-//#endregion
-//#region src/components/layout/MSidebar/MSidebar.tsx
-var F = "mineralui-sidebar", I = d({
-	mode: "expanded",
-	mobile: !1,
-	mobileOpen: !1,
-	canToggle: !1,
-	toggleMode: () => {}
-});
-function L() {
-	return h(I);
-}
-function R(e) {
-	let [t, n] = y(() => typeof window < "u" ? window.innerWidth < e : !1);
-	return g(() => {
-		let t = window.matchMedia(`(max-width: ${e - 1}px)`), r = (e) => n(e.matches);
-		return n(t.matches), t.addEventListener("change", r), () => t.removeEventListener("change", r);
-	}, [e]), t;
-}
-function z({ mode: e = "auto", defaultMode: r = "expanded", onModeChange: i, persist: a = !1, side: o = "left", tone: s = "subtle", bordered: c = !0, mobileBreakpoint: l = 768, className: u, style: d, children: f }) {
-	let p = R(l), [h, _] = y(!1), [S, C] = y(() => {
-		if (a) try {
-			let e = localStorage.getItem(F);
-			if (e === "expanded" || e === "collapsed") return e;
-		} catch {}
-		return r;
-	}), w = e === "auto" ? S : e === "collapsed" ? "collapsed" : "expanded", T = m(() => {
-		let e = w === "expanded" ? "collapsed" : "expanded";
-		if (C(e), i?.(e), a) try {
-			localStorage.setItem(F, e);
-		} catch {}
-	}, [
-		w,
-		i,
-		a
-	]), E = m(() => _(!1), []);
-	g(() => {
-		if (!h) return;
-		let e = (e) => {
-			e.key === "Escape" && _(!1);
-		};
-		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
-	}, [h]);
-	let D = !p && e === "auto", O = v(() => ({
-		mode: w,
-		mobile: p,
-		mobileOpen: h,
-		canToggle: D,
-		toggleMode: T
-	}), [
-		w,
-		p,
-		h,
-		D,
-		T
-	]), k = n("sidebar", s, o, !p && w === "collapsed" && "collapsed", c && "bordered", p && "mobile", p && h && "mobile-open", u);
-	return /* @__PURE__ */ x(I.Provider, {
-		value: O,
-		children: [
-			p && h && /* @__PURE__ */ b("div", {
-				className: "sidebar-backdrop",
-				onClick: E
-			}),
-			/* @__PURE__ */ b("aside", {
-				className: k,
-				style: d,
-				children: f
-			}),
-			p && !h && /* @__PURE__ */ b("button", {
-				className: n("sidebar-hamburger", o),
-				onClick: () => _(!0),
-				"aria-label": "Open menu",
-				children: /* @__PURE__ */ b("span", {
-					className: "sidebar-hamburger-icon",
-					"aria-hidden": "true",
-					children: /* @__PURE__ */ b(t, {})
-				})
-			})
-		]
-	});
-}
-function B({ bordered: t = !1, className: r, children: i }) {
-	let { mode: a, mobile: o, canToggle: s, toggleMode: c } = L(), l = !o && a === "collapsed";
-	return /* @__PURE__ */ x("div", {
-		className: n("sidebar-header", t && "bordered", r),
-		children: [/* @__PURE__ */ b("div", {
-			className: "sidebar-header-content",
-			children: i
-		}), s && /* @__PURE__ */ b("button", {
-			className: "sidebar-toggle",
-			onClick: c,
-			"aria-label": l ? "Expand sidebar" : "Collapse sidebar",
-			children: /* @__PURE__ */ b("span", {
-				className: n("sidebar-chevron", l && "flipped"),
-				children: /* @__PURE__ */ b(e, {})
-			})
-		})]
-	});
-}
-function V({ className: e, children: t }) {
-	return /* @__PURE__ */ b("div", {
-		className: n("sidebar-body", e),
-		children: t
-	});
-}
-function H({ className: e, children: t }) {
-	return /* @__PURE__ */ b("nav", {
-		className: n("sidebar-nav", e),
-		children: t
-	});
-}
-function U({ icon: e, label: t, href: r, to: i, onClick: a, active: o = !1, disabled: s = !1, badge: c, color: l, component: u, className: d }) {
-	let { mode: f, mobile: p } = L(), m = !p && f === "collapsed", h = u ?? (r || i ? "a" : "button"), g = u ? i ? { to: i } : r ? { href: r } : {} : r ? { href: r } : i ? { href: i } : {};
-	return /* @__PURE__ */ x(h, {
-		className: n("sidebar-item", o && "active", s && "disabled", l, d),
-		onClick: s ? void 0 : a,
-		"aria-disabled": s || void 0,
-		title: m ? t : void 0,
-		...g,
-		children: [
-			e && /* @__PURE__ */ b("span", {
-				className: "sidebar-item-icon",
-				children: e
-			}),
-			!m && /* @__PURE__ */ b("span", {
-				className: "sidebar-item-label",
-				children: t
-			}),
-			!m && c && /* @__PURE__ */ b("span", {
-				className: "sidebar-item-badge",
-				children: c
-			})
-		]
-	});
-}
-function W({ label: t, icon: r, active: i = !1, defaultOpen: a = !0, collapsible: o = !0, children: s, className: c }) {
-	let u = L(), { mode: d, mobile: f } = u, p = !f && d === "collapsed", [m, h] = y(a), g = v(() => ({
-		...u,
-		mode: "expanded"
-	}), [u]), _ = () => {
-		o && h((e) => !e);
-	};
-	if (p) {
-		let e = /* @__PURE__ */ b("span", {
-			className: n("sidebar-group-icon collapsed", i && "active"),
-			title: t,
-			children: r
-		});
-		return /* @__PURE__ */ b("div", {
-			className: n("sidebar-group", c),
-			children: /* @__PURE__ */ b(l, {
-				trigger: e,
-				placement: "right-start",
-				closeOnSelect: !0,
-				openOn: "hover",
-				children: /* @__PURE__ */ b(I.Provider, {
-					value: g,
-					children: s
-				})
-			})
-		});
-	}
-	return /* @__PURE__ */ x("div", {
-		className: n("sidebar-group", c),
-		children: [/* @__PURE__ */ x("button", {
-			className: n("sidebar-group-header", i && "active"),
-			onClick: _,
-			"aria-expanded": m,
-			children: [
-				r && /* @__PURE__ */ b("span", {
-					className: "sidebar-group-icon",
-					children: r
-				}),
-				/* @__PURE__ */ b("span", {
-					className: "sidebar-group-label",
-					children: t
-				}),
-				o && /* @__PURE__ */ b("span", {
-					className: n("sidebar-group-arrow", m && "open"),
-					children: /* @__PURE__ */ b(e, {})
-				})
-			]
-		}), m && /* @__PURE__ */ b("div", {
-			className: "sidebar-group-items",
-			children: s
-		})]
-	});
-}
-function G({ bordered: e = !1, className: t, children: r }) {
-	return /* @__PURE__ */ b("div", {
-		className: n("sidebar-footer", e && "bordered", t),
-		children: r
-	});
-}
-function K({ className: e, spacing: t = "md" }) {
-	return /* @__PURE__ */ b("hr", { className: n("sidebar-divider", t, e) });
-}
-//#endregion
-//#region src/components/layout/MSubNav/MSubNav.tsx
-function q({ items: e, active: t, onChange: r, component: i, className: a, ...o }) {
-	return /* @__PURE__ */ b("nav", {
-		className: n("subnav", a),
-		...o,
-		children: e.map((e) => {
-			let a = i ?? (e.href ? "a" : "button"), o = t === e.value, s = e.href ? { href: e.href } : {};
-			return /* @__PURE__ */ x(a, {
-				className: n("subnav item", o && "active", e.disabled && "disabled"),
-				onClick: e.disabled ? void 0 : () => r?.(e.value),
-				"aria-disabled": e.disabled || void 0,
-				...s,
-				children: [e.icon && /* @__PURE__ */ b("span", {
-					className: "subnav icon",
-					children: e.icon
-				}), /* @__PURE__ */ b("span", {
-					className: "subnav label",
-					children: e.label
-				})]
-			}, e.value);
-		})
-	});
-}
-//#endregion
-//#region src/components/layout/MBreadcrumb/MBreadcrumb.tsx
-function J({ items: e, separator: t = "/", maxItems: r, className: i, ...a }) {
-	let o = v(() => {
-		if (!r || r >= e.length) return e;
-		if (r < 2) return [e[e.length - 1]];
-		let t = e.slice(0, 1), n = e.slice(-(r - 1));
-		return [
-			...t,
-			null,
-			...n
-		];
-	}, [e, r]);
-	return /* @__PURE__ */ b("nav", {
-		"aria-label": "breadcrumb",
-		className: n("breadcrumb", i),
-		...a,
-		children: /* @__PURE__ */ b("ol", {
-			className: "trail",
-			children: o.map((e, r) => {
-				if (e === null) return /* @__PURE__ */ x("li", {
-					className: "crumb dots",
-					children: [/* @__PURE__ */ b("span", {
-						className: "sep",
-						children: t
-					}), /* @__PURE__ */ b("span", { children: "…" })]
-				}, "ellipsis");
-				let i = r === o.length - 1;
-				return /* @__PURE__ */ x("li", {
-					className: n("crumb", i && "active"),
-					children: [r > 0 && /* @__PURE__ */ b("span", {
-						className: "sep",
-						children: t
-					}), e.href && !i ? /* @__PURE__ */ b("a", {
-						href: e.href,
-						className: "link",
-						onClick: e.onClick,
-						children: e.label
-					}) : e.onClick && !i ? /* @__PURE__ */ b("button", {
-						type: "button",
-						className: "link btn",
-						onClick: e.onClick,
-						children: e.label
-					}) : /* @__PURE__ */ b("span", {
-						className: "current",
-						"aria-current": i ? "page" : void 0,
-						children: e.label
-					})]
-				}, r);
-			})
-		})
-	});
-}
-//#endregion
-//#region src/components/layout/AppShell/AppShell.tsx
-var Y = f(function({ className: e, children: t, ...r }, i) {
-	let a = [], o = [];
-	return u.forEach(t, (e) => {
-		p(e) && e.type === z ? a.push(e) : o.push(e);
-	}), /* @__PURE__ */ x("div", {
-		ref: i,
-		className: n("app-shell", e),
-		...r,
-		children: [a, /* @__PURE__ */ b("div", {
-			className: "app-main",
-			children: o
-		})]
-	});
-}), X = f(function({ className: e, children: t, ...r }, i) {
-	return /* @__PURE__ */ b("div", {
-		ref: i,
-		className: n("app-body", e),
-		...r,
-		children: t
-	});
-});
-//#endregion
-export { C, w as S, A as _, z as a, E as b, G as c, U as d, H as f, j as g, N as h, q as i, W as l, M as m, X as n, V as o, P as p, J as r, K as s, Y as t, B as u, k as v, S as w, T as x, O as y };
-
-//# sourceMappingURL=AppShell-BGFVRml6.js.map