@banzamel/mineralui 1.3.0 → 1.5.0

package/dist/display-CZO1cOXZ.js

@@ -0,0 +1,614 @@
+import { n as e } from "./chunk-efA98nb6.js";
+import { Fi as t, Mi as n, rn as r } from "./icons-DZr7JKf6.js";
+import { t as i } from "./cn-CUSXNnjF.js";
+import { t as a } from "./MInline-CnxH6VZx.js";
+import { t as o } from "./MText-C0VxNQCE.js";
+import { t as s } from "./MButton-JumA31vM.js";
+import { t as c } from "./MBadge-CuVY4TXo.js";
+import { a as l, n as u, r as d } from "./MSkeleton-CJIlxsCx.js";
+import { t as f } from "./MStack-8qZI36jT.js";
+import { Children as p, cloneElement as m, isValidElement as h, useCallback as g, useEffect as _, useMemo as v, useRef as y, useState as b } from "react";
+import { jsx as x, jsxs as S } from "react/jsx-runtime";
+//#region src/components/display/MCollapsible/MCollapsible.tsx
+function C({ title: e, defaultOpen: t = !1, open: r, onToggle: a, color: o = "primary", className: c, children: l, ...u }) {
+	let [d, p] = b(t), m = r ?? d, h = () => {
+		let e = !m;
+		r === void 0 && p(e), a?.(e);
+	}, g = /* @__PURE__ */ x("span", {
+		className: i("chevron", m && "open"),
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ x(n, {})
+	});
+	return /* @__PURE__ */ S("div", {
+		className: i("collapsible", c),
+		...u,
+		children: [/* @__PURE__ */ x(s, {
+			variant: "ghost",
+			color: o,
+			className: "trigger",
+			"aria-expanded": m,
+			onClick: h,
+			endIcon: g,
+			children: e
+		}), /* @__PURE__ */ x("div", {
+			className: i("content-wrap", m && "open"),
+			"aria-hidden": !m,
+			children: /* @__PURE__ */ x(f, {
+				className: "content",
+				children: l
+			})
+		})]
+	});
+}
+//#endregion
+//#region src/components/display/MAccordion/MAccordion.tsx
+function w(e) {
+	return null;
+}
+function T({ multiple: e = !1, defaultOpen: t, onChange: n, bordered: r = !1, color: a, className: o, children: s, ...c }) {
+	let [l, u] = b(Array.isArray(t) ? t : t ? [t] : []), d = g((t, r) => {
+		u((i) => {
+			let a;
+			return a = r ? e ? [...i, t] : [t] : i.filter((e) => e !== t), n?.(a), a;
+		});
+	}, [e, n]), f = p.toArray(s).filter((e) => h(e) && e.type === w);
+	return /* @__PURE__ */ x("div", {
+		className: i("accordion", r && "bordered", o),
+		...c,
+		children: f.map((e) => {
+			if (!h(e)) return null;
+			let { id: t, title: n, children: r, disabled: o, color: s } = e.props, c = l.includes(t);
+			return /* @__PURE__ */ x("div", {
+				className: i("accordion-item", o && "disabled"),
+				children: /* @__PURE__ */ x(C, {
+					title: n,
+					open: c,
+					onToggle: o ? void 0 : (e) => d(t, e),
+					color: s ?? a,
+					children: r
+				})
+			}, t);
+		})
+	});
+}
+//#endregion
+//#region src/components/display/MProgressBar/MProgressBar.tsx
+var E = 800;
+function D(e) {
+	return 1 - (1 - e) ** 3;
+}
+function O({ value: e, max: t = 100, color: n = "primary", size: r = "md", label: a, showValue: o = !1, animated: s = !1, striped: c = !1, className: l, ...u }) {
+	let d = Math.min(100, Math.max(0, e / t * 100)), [f, p] = b(0), [m, h] = b(0), v = y(0), C = y(0), w = g((e, t) => {
+		cancelAnimationFrame(C.current);
+		let n = performance.now(), r = (i) => {
+			let a = i - n, o = Math.min(a / E, 1), s = D(o);
+			p(e + (t - e) * s), o < 1 && (C.current = requestAnimationFrame(r));
+		};
+		h(t), C.current = requestAnimationFrame(r);
+	}, []);
+	return _(() => (w(v.current, d), v.current = d, () => cancelAnimationFrame(C.current)), [d, w]), /* @__PURE__ */ S("div", {
+		className: i("progress-bar", `color-${n}`, r, l),
+		role: "progressbar",
+		"aria-valuenow": e,
+		"aria-valuemin": 0,
+		"aria-valuemax": t,
+		"aria-label": a,
+		...u,
+		children: [(a || o) && /* @__PURE__ */ S("div", {
+			className: "progress-bar-header",
+			children: [a && /* @__PURE__ */ x("span", {
+				className: "progress-bar-label",
+				children: a
+			}), o && /* @__PURE__ */ S("span", {
+				className: "progress-bar-value",
+				children: [Math.round(f), "%"]
+			})]
+		}), /* @__PURE__ */ x("div", {
+			className: "progress-bar-track",
+			children: /* @__PURE__ */ x("div", {
+				className: i("progress-bar-fill", s && "animated", c && "striped"),
+				style: { width: `${m}%` }
+			})
+		})]
+	});
+}
+//#endregion
+//#region src/components/display/MCountUp/MCountUp.tsx
+function k({ value: e, from: t = 0, duration: n = 1e3, decimals: r = 0, prefix: a = "", suffix: o = "", separator: s = "", className: c, ...l }) {
+	let [u, d] = b(t), f = y(0), p = y(null);
+	_(() => {
+		let t = u;
+		p.current = null;
+		let r = (i) => {
+			p.current === null && (p.current = i);
+			let a = i - p.current, o = Math.min(a / n, 1), s = 1 - (1 - o) ** 3;
+			d(t + (e - t) * s), o < 1 && (f.current = requestAnimationFrame(r));
+		};
+		return f.current = requestAnimationFrame(r), () => cancelAnimationFrame(f.current);
+	}, [e, n]);
+	let m = A(u, r, s);
+	return /* @__PURE__ */ S("span", {
+		className: i("count-up", c),
+		...l,
+		children: [
+			a,
+			m,
+			o
+		]
+	});
+}
+function A(e, t, n) {
+	let r = e.toFixed(t);
+	if (!n) return r;
+	let [i, a] = r.split("."), o = i.replace(/\B(?=(\d{3})+(?!\d))/g, n);
+	return a === void 0 ? o : `${o}.${a}`;
+}
+//#endregion
+//#region src/components/display/MCodeBlock/MCodeBlock.tsx
+var j = {
+	ts: "typescript",
+	typescript: "typescript",
+	tsx: "tsx",
+	js: "javascript",
+	javascript: "javascript",
+	jsx: "jsx",
+	json: "json",
+	css: "css",
+	html: "markup",
+	markup: "markup",
+	bash: "bash",
+	shell: "bash",
+	shellscript: "bash",
+	php: "php"
+}, M = null, N = 42, P = 200;
+function F(e) {
+	return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function I(e) {
+	return j[e] ?? e;
+}
+async function L() {
+	return M ||= (async () => {
+		let t = (await import("./prism-core-DsZQ3wSm.js").then((t) => /* @__PURE__ */ e(t.default, 1))).default;
+		return await import("./prism-markup-3wgbeWT0.js"), await import("./prism-clike-CrtZga9r.js"), await import("./prism-javascript-tgrsDJvl.js"), await import("./prism-markup-templating-DwntZfmY.js"), await import("./prism-jsx-WafGh0eg.js"), await import("./prism-typescript-Br2XvXsL.js"), await import("./prism-tsx-BFlaUgcE.js"), await import("./prism-json-DdyAX9Pp.js"), await import("./prism-css-DNZzCmaG.js"), await import("./prism-bash-Xs-n623m.js"), await import("./prism-php-CizDps-m.js"), t;
+	})(), M;
+}
+function R({ code: e, language: t = "tsx", title: n, showHeader: f = !0, showLanguage: p = !0, showCopyButton: m = !0, copyLabel: h = "Copy", copiedLabel: g = "Copied", maxHeight: C, animated: w = !1, lineNumbers: T = !1, className: E, ...D }) {
+	let O = v(() => I(t.trim().toLowerCase()), [t]), [k, A] = b(() => w ? 0 : e.length), j = w ? e.slice(0, k) : e, [M, R] = b(() => F(j)), [z, B] = b(!1), V = y(null), H = y(null), U = y(null), W = typeof navigator < "u" && typeof navigator.clipboard?.writeText == "function", G = f && (!!n || p || m), K = v(() => Math.max(1, j.split("\n").length), [j]);
+	_(() => {
+		H.current !== null && (window.clearTimeout(H.current), H.current = null), A(w ? 0 : e.length);
+	}, [w, e]), _(() => {
+		if (!(!w || e.length === 0)) return k < e.length && (H.current = window.setTimeout(() => {
+			A((t) => Math.min(t + 1, e.length)), H.current = null;
+		}, k === 0 ? P : N)), () => {
+			H.current !== null && (window.clearTimeout(H.current), H.current = null);
+		};
+	}, [
+		w,
+		e.length,
+		k
+	]), _(() => {
+		let e = !0;
+		async function t() {
+			try {
+				let t = await L(), n = t.languages[O], r = n ? t.highlight(j, n, O) : F(j);
+				e && R(r);
+			} catch {
+				e && R(F(j));
+			}
+		}
+		return t(), () => {
+			e = !1;
+		};
+	}, [O, j]), _(() => () => {
+		V.current !== null && window.clearTimeout(V.current), H.current !== null && window.clearTimeout(H.current);
+	}, []), _(() => {
+		!w || !U.current || (U.current.scrollTop = U.current.scrollHeight);
+	}, [w, k]);
+	async function q() {
+		if (W) try {
+			await navigator.clipboard.writeText(e), B(!0), V.current !== null && window.clearTimeout(V.current), V.current = window.setTimeout(() => {
+				B(!1), V.current = null;
+			}, 1200);
+		} catch {
+			B(!1);
+		}
+	}
+	return /* @__PURE__ */ S(u, {
+		className: i("code-block-card", E),
+		...D,
+		padded: !1,
+		children: [G && /* @__PURE__ */ x(l, {
+			className: "code-block-header",
+			children: /* @__PURE__ */ S(a, {
+				className: "code-block-header-layout",
+				align: "center",
+				justify: "between",
+				wrap: "nowrap",
+				px: "lg",
+				py: "md",
+				children: [/* @__PURE__ */ S(a, {
+					className: "code-block-header-meta",
+					align: "center",
+					wrap: "wrap",
+					children: [n && /* @__PURE__ */ x(o, {
+						as: "span",
+						className: "code-block-title",
+						size: "sm",
+						weight: "semibold",
+						children: n
+					}), p && t && /* @__PURE__ */ x(c, {
+						color: "info",
+						size: "sm",
+						children: t
+					})]
+				}), m && /* @__PURE__ */ x(s, {
+					variant: "ghost",
+					size: "sm",
+					color: "neutral",
+					startIcon: /* @__PURE__ */ x(r, {
+						size: "sm",
+						"aria-hidden": "true"
+					}),
+					onClick: q,
+					disabled: !W,
+					children: z ? g : h
+				})]
+			})
+		}), /* @__PURE__ */ x(d, {
+			className: "code-block-body",
+			children: /* @__PURE__ */ x("div", {
+				ref: U,
+				className: "code-block-scroll",
+				style: C ? {
+					maxHeight: C,
+					overflowY: "auto"
+				} : void 0,
+				children: /* @__PURE__ */ S("pre", {
+					className: i("code-block-pre", T && "with-line-numbers", `language-${O}`),
+					children: [T && /* @__PURE__ */ x("span", {
+						className: "code-block-line-numbers",
+						"aria-hidden": "true",
+						children: Array.from({ length: K }, (e, t) => /* @__PURE__ */ x("span", {
+							className: "code-block-line-number",
+							children: t + 1
+						}, t + 1))
+					}), /* @__PURE__ */ x("span", {
+						className: "code-block-code-shell",
+						children: /* @__PURE__ */ x("code", {
+							className: i("code-block-code", `language-${O}`),
+							dangerouslySetInnerHTML: { __html: M }
+						})
+					})]
+				})
+			})
+		})]
+	});
+}
+//#endregion
+//#region src/components/display/MColorPicker/MColorPicker.tsx
+function z(e, t, n) {
+	let r = (r) => {
+		let i = (r + e / 60) % 6;
+		return n - n * t * Math.max(0, Math.min(i, 4 - i, 1));
+	};
+	return `#${[
+		Math.round(r(5) * 255),
+		Math.round(r(3) * 255),
+		Math.round(r(1) * 255)
+	].map((e) => e.toString(16).padStart(2, "0")).join("")}`;
+}
+function B(e) {
+	let t = e.replace("#", "").match(/.{2}/g);
+	if (!t) return [
+		0,
+		0,
+		1
+	];
+	let [n, r, i] = t.map((e) => parseInt(e, 16) / 255), a = Math.max(n, r, i), o = a - Math.min(n, r, i), s = 0;
+	o !== 0 && (s = a === n ? ((r - i) / o + 6) % 6 : a === r ? (i - n) / o + 2 : (n - r) / o + 4, s *= 60);
+	let c = a === 0 ? 0 : o / a;
+	return [
+		s,
+		c,
+		a
+	];
+}
+function V(e) {
+	let t = e.replace("#", "").match(/.{2}/g);
+	if (!t) return "rgb(0, 0, 0)";
+	let [n, r, i] = t.map((e) => parseInt(e, 16));
+	return `rgb(${n}, ${r}, ${i})`;
+}
+function H(e) {
+	let t = e.replace("#", "").match(/.{2}/g);
+	if (!t) return "hsl(0, 0%, 0%)";
+	let [n, r, i] = t.map((e) => parseInt(e, 16) / 255), a = Math.max(n, r, i), o = Math.min(n, r, i), s = (a + o) / 2, c = 0, l = 0;
+	if (a !== o) {
+		let e = a - o;
+		l = s > .5 ? e / (2 - a - o) : e / (a + o), c = a === n ? ((r - i) / e + 6) % 6 : a === r ? (i - n) / e + 2 : (n - r) / e + 4, c *= 60;
+	}
+	return `hsl(${Math.round(c)}, ${Math.round(l * 100)}%, ${Math.round(s * 100)}%)`;
+}
+function U(e, t) {
+	return t === "rgb" ? V(e) : t === "hsl" ? H(e) : e;
+}
+function W(e) {
+	if (!e) return "#000000";
+	if (e.startsWith("#")) return e.length === 7 ? e : "#000000";
+	let t = e.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
+	return t ? `#${[
+		t[1],
+		t[2],
+		t[3]
+	].map((e) => parseInt(e).toString(16).padStart(2, "0")).join("")}` : "#000000";
+}
+var G = [
+	"#ef4444",
+	"#f97316",
+	"#eab308",
+	"#22c55e",
+	"#06b6d4",
+	"#3b82f6",
+	"#8b5cf6",
+	"#ec4899",
+	"#000000",
+	"#ffffff"
+];
+function K({ value: e, onChange: t, swatches: n = G, format: r = "hex", size: a = "md", label: o, disabled: s = !1, className: c, ...l }) {
+	let u = W(e ?? "#3b82f6"), [d, f] = b(() => B(u)), [p, m] = b(U(u, r)), h = y(null), v = y(null), C = y(null);
+	_(() => {
+		let t = W(e ?? "#3b82f6");
+		f(B(t)), m(U(t, r));
+	}, [e, r]);
+	let w = g((e, n, i) => {
+		let a = z(e, n, i);
+		f([
+			e,
+			n,
+			i
+		]), m(U(a, r)), t?.(U(a, r));
+	}, [t, r]);
+	function T(e) {
+		let t = h.current?.getBoundingClientRect();
+		if (!t) return;
+		let n = Math.max(0, Math.min(1, (e.clientX - t.left) / t.width)), r = Math.max(0, Math.min(1, 1 - (e.clientY - t.top) / t.height));
+		w(d[0], n, r);
+	}
+	function E(e) {
+		let t = v.current?.getBoundingClientRect();
+		t && w(Math.max(0, Math.min(360, (e.clientX - t.left) / t.width * 360)), d[1], d[2]);
+	}
+	_(() => {
+		function e(e) {
+			C.current === "area" ? T(e) : C.current === "hue" && E(e);
+		}
+		function t() {
+			C.current = null;
+		}
+		return window.addEventListener("pointermove", e), window.addEventListener("pointerup", t), () => {
+			window.removeEventListener("pointermove", e), window.removeEventListener("pointerup", t);
+		};
+	});
+	function D(e) {
+		m(e);
+		try {
+			let n = W(e);
+			(n !== "#000000" || e === "#000000" || e.toLowerCase() === "rgb(0, 0, 0)") && (f(B(n)), t?.(U(n, r)));
+		} catch {}
+	}
+	let O = z(d[0], d[1], d[2]);
+	return /* @__PURE__ */ S("div", {
+		className: i("color-picker", a, s && "disabled", c),
+		...l,
+		children: [
+			o && /* @__PURE__ */ x("label", {
+				className: "label",
+				children: o
+			}),
+			/* @__PURE__ */ S("div", {
+				ref: h,
+				className: "area",
+				style: { background: `hsl(${d[0]}, 100%, 50%)` },
+				onPointerDown: (e) => {
+					s || (C.current = "area", T(e));
+				},
+				children: [
+					/* @__PURE__ */ x("div", { className: "white" }),
+					/* @__PURE__ */ x("div", { className: "black" }),
+					/* @__PURE__ */ x("div", {
+						className: "cursor",
+						style: {
+							left: `${d[1] * 100}%`,
+							top: `${(1 - d[2]) * 100}%`,
+							background: O
+						}
+					})
+				]
+			}),
+			/* @__PURE__ */ x("div", {
+				ref: v,
+				className: "hue",
+				onPointerDown: (e) => {
+					s || (C.current = "hue", E(e));
+				},
+				children: /* @__PURE__ */ x("div", {
+					className: "hue-thumb",
+					style: { left: `${d[0] / 360 * 100}%` }
+				})
+			}),
+			/* @__PURE__ */ S("div", {
+				className: "controls",
+				children: [/* @__PURE__ */ x("div", {
+					className: "preview",
+					style: { background: O }
+				}), /* @__PURE__ */ x("input", {
+					type: "text",
+					className: "input",
+					value: p,
+					onChange: (e) => D(e.target.value),
+					disabled: s
+				})]
+			}),
+			n.length > 0 && /* @__PURE__ */ x("div", {
+				className: "swatches",
+				children: n.map((e) => /* @__PURE__ */ x("button", {
+					type: "button",
+					className: i("swatch", O.toLowerCase() === e.toLowerCase() && "active"),
+					style: { background: e },
+					onClick: () => {
+						if (s) return;
+						let [t, n, r] = B(e);
+						w(t, n, r);
+					}
+				}, e))
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/display/MEmptyState/MEmptyState.tsx
+var q = {
+	xs: "xs",
+	sm: "sm",
+	md: "sm",
+	lg: "md",
+	xl: "lg"
+};
+function J({ icon: e, illustration: t, title: n, description: r, buttonText: a, onAction: o, color: c = "neutral", size: l = "md", className: u, children: d, ...f }) {
+	return /* @__PURE__ */ S("div", {
+		className: i("empty-state", `color-${c}`, l, u),
+		...f,
+		children: [
+			t && /* @__PURE__ */ x("div", {
+				className: "empty-state-illustration",
+				children: h(t) ? m(t, { color: c }) : t
+			}),
+			!t && e && /* @__PURE__ */ x("div", {
+				className: "empty-state-icon",
+				children: e
+			}),
+			/* @__PURE__ */ S("div", {
+				className: "empty-state-content",
+				children: [/* @__PURE__ */ x("div", {
+					className: "empty-state-title",
+					children: n
+				}), r && /* @__PURE__ */ x("div", {
+					className: "empty-state-description",
+					children: r
+				})]
+			}),
+			a && o && /* @__PURE__ */ x("div", {
+				className: "empty-state-action",
+				children: /* @__PURE__ */ x(s, {
+					size: q[l],
+					variant: "outlined",
+					color: c,
+					onClick: o,
+					children: a
+				})
+			}),
+			d
+		]
+	});
+}
+//#endregion
+//#region src/components/display/MStepper/MStepper.tsx
+var Y = {
+	xs: 10,
+	sm: 14,
+	md: 18,
+	lg: 22,
+	xl: 28
+};
+function X(e) {
+	return null;
+}
+function Z({ activeStep: e, variant: n = "horizontal", color: r = "primary", size: a = "md", clickable: o = !1, onChange: s, className: c, children: l, ...u }) {
+	let d = p.toArray(l).filter((e) => h(e) && e.type === X);
+	return /* @__PURE__ */ x("div", {
+		className: i("stepper", n, `color-${r}`, a, c),
+		role: "list",
+		...u,
+		children: d.map((n, r) => {
+			if (!h(n)) return null;
+			let { id: c, title: l, description: u, icon: d, disabled: f, optional: p, error: m } = n.props, g = r === e, _ = r < e, v = o && !f, y = () => {
+				v && s && s(r);
+			};
+			return /* @__PURE__ */ S("div", {
+				className: i("stepper-step", g && "active", _ && "completed", f && "disabled", m && "error", v && "clickable"),
+				role: "listitem",
+				"aria-current": g ? "step" : void 0,
+				children: [/* @__PURE__ */ x("div", {
+					className: "stepper-indicator",
+					onClick: v ? y : void 0,
+					role: v ? "button" : void 0,
+					tabIndex: v ? 0 : void 0,
+					onKeyDown: v ? (e) => {
+						(e.key === "Enter" || e.key === " ") && (e.preventDefault(), y());
+					} : void 0,
+					children: m ? "!" : _ ? d ?? /* @__PURE__ */ x(t, { size: Y[a] }) : d ?? r + 1
+				}), /* @__PURE__ */ S("div", {
+					className: "stepper-content",
+					children: [
+						/* @__PURE__ */ x("span", {
+							className: "stepper-title",
+							children: l
+						}),
+						u && /* @__PURE__ */ x("span", {
+							className: "stepper-description",
+							children: u
+						}),
+						p && /* @__PURE__ */ x("span", {
+							className: "stepper-optional",
+							children: "Optional"
+						})
+					]
+				})]
+			}, c);
+		})
+	});
+}
+//#endregion
+//#region src/components/display/MTimeline/MTimeline.tsx
+function Q(e) {
+	return null;
+}
+function $({ align: e = "left", color: t = "primary", size: n = "md", className: r, children: a, ...o }) {
+	let s = p.toArray(a).filter((e) => h(e) && e.type === Q);
+	return /* @__PURE__ */ x("div", {
+		className: i("timeline", `align-${e}`, `color-${t}`, n, r),
+		...o,
+		children: s.map((t, n) => {
+			if (!h(t)) return null;
+			let { id: r, title: a, description: o, date: s, icon: c, color: l } = t.props, u = e === "alternate" ? n % 2 == 0 ? "left" : "right" : void 0;
+			return /* @__PURE__ */ S("div", {
+				className: i("timeline-item", u && `side-${u}`),
+				children: [/* @__PURE__ */ x("div", {
+					className: i("timeline-dot", l && `color-${l}`),
+					children: c
+				}), /* @__PURE__ */ S("div", {
+					className: "timeline-content",
+					children: [
+						/* @__PURE__ */ x("span", {
+							className: "timeline-title",
+							children: a
+						}),
+						o && /* @__PURE__ */ x("span", {
+							className: "timeline-description",
+							children: o
+						}),
+						s && /* @__PURE__ */ x("span", {
+							className: "timeline-date",
+							children: s
+						})
+					]
+				})]
+			}, r);
+		})
+	});
+}
+//#endregion
+export { J as a, k as c, w as d, C as f, Z as i, O as l, Q as n, K as o, X as r, R as s, $ as t, T as u };
+
+//# sourceMappingURL=display-CZO1cOXZ.js.map