@burdenoff/microfe-brainyrich 2026.706.1 → 2026.706.2

package/dist/brainyrich/components/viz.js

@@ -0,0 +1,628 @@
+import e from "../../node_modules/clsx/dist/clsx.js";
+import { Tooltip as t } from "../../node_modules/recharts/es6/component/Tooltip.js";
+import { ResponsiveContainer as n } from "../../node_modules/recharts/es6/component/ResponsiveContainer.js";
+import { Cell as r } from "../../node_modules/recharts/es6/component/Cell.js";
+import { Pie as i } from "../../node_modules/recharts/es6/polar/Pie.js";
+import { Bar as a } from "../../node_modules/recharts/es6/cartesian/Bar.js";
+import { ReferenceLine as o } from "../../node_modules/recharts/es6/cartesian/ReferenceLine.js";
+import { Area as s } from "../../node_modules/recharts/es6/cartesian/Area.js";
+import { XAxis as c } from "../../node_modules/recharts/es6/cartesian/XAxis.js";
+import { YAxis as l } from "../../node_modules/recharts/es6/cartesian/YAxis.js";
+import { BarChart as u } from "../../node_modules/recharts/es6/chart/BarChart.js";
+import { PieChart as d } from "../../node_modules/recharts/es6/chart/PieChart.js";
+import { AreaChart as f } from "../../node_modules/recharts/es6/chart/AreaChart.js";
+import { motion as p } from "../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js";
+import { useReducedMotion as m } from "../../node_modules/framer-motion/dist/es/utils/reduced-motion/use-reduced-motion.js";
+import { twMerge as h } from "../../node_modules/tailwind-merge/dist/bundle-mjs.js";
+import { 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/brainyrich/components/viz.tsx
+function S(...t) {
+	return h(e(t));
+}
+var C = {
+	brand: "--color-action-primary-bg",
+	brandBorder: "--color-action-primary-border",
+	grid: "--color-chart-grid",
+	axis: "--color-chart-axis",
+	positive: "--color-chart-positive",
+	negative: "--color-chart-negative",
+	success: "--color-status-success",
+	error: "--color-status-error",
+	warning: "--color-status-warning",
+	info: "--color-status-info",
+	teal: "--color-accent-teal",
+	blue: "--color-accent-blue",
+	purple: "--color-accent-purple",
+	indigo: "--color-accent-indigo",
+	textPrimary: "--color-text-primary",
+	textSecondary: "--color-text-secondary",
+	surface: "--color-bg-elevated",
+	border: "--color-border-subtle"
+}, w = [
+	"--color-action-primary-bg",
+	"--color-chart-2",
+	"--color-chart-3",
+	"--color-chart-4",
+	"--color-chart-5",
+	"--color-chart-6",
+	"--color-chart-7",
+	"--color-chart-8",
+	"--color-chart-9",
+	"--color-chart-10",
+	"--color-chart-11",
+	"--color-chart-12"
+];
+function T(e) {
+	return typeof window > "u" ? `var(${e})` : getComputedStyle(document.documentElement).getPropertyValue(e).trim() || `var(${e})`;
+}
+function E() {
+	let [e, t] = y(0);
+	return g(() => {
+		if (typeof window > "u") return;
+		let e = new MutationObserver(() => t((e) => e + 1));
+		return e.observe(document.documentElement, {
+			attributes: !0,
+			attributeFilter: [
+				"data-theme",
+				"class",
+				"style"
+			]
+		}), () => e.disconnect();
+	}, []), v(() => {
+		let e = Object.fromEntries(Object.keys(C).map((e) => [e, T(C[e])])), t = w.map(T), n = (t) => {
+			switch (t) {
+				case "brand":
+				case "primary": return e.brand;
+				case "success":
+				case "positive": return e.success;
+				case "error":
+				case "negative": return e.error;
+				case "warning": return e.warning;
+				case "info": return e.info;
+				case "teal": return e.teal;
+				case "blue": return e.blue;
+				case "purple": return e.purple;
+				case "indigo": return e.indigo;
+				case "neutral": return e.textSecondary;
+				default: return e.brand;
+			}
+		};
+		return {
+			...e,
+			palette: t,
+			tone: n
+		};
+	}, [e]);
+}
+function D() {
+	let e = E();
+	return {
+		wrapper: {
+			background: e.surface,
+			border: `1px solid ${e.border}`,
+			borderRadius: 10,
+			padding: "8px 12px",
+			color: e.textPrimary,
+			fontSize: 12,
+			boxShadow: "var(--shadow-pop, 0 8px 24px rgba(0,0,0,0.35))"
+		},
+		label: {
+			color: e.textSecondary,
+			marginBottom: 4,
+			fontSize: 11
+		}
+	};
+}
+function O({ active: e, payload: t, label: n, valueFormatter: r }) {
+	let i = D();
+	return !e || !t || t.length === 0 ? null : /* @__PURE__ */ x("div", {
+		style: i.wrapper,
+		role: "tooltip",
+		children: [n !== void 0 && n !== "" ? /* @__PURE__ */ b("div", {
+			style: i.label,
+			children: n
+		}) : null, t.map((e, t) => {
+			let n = typeof e.value == "number" ? e.value : Number(e.value), a = r && Number.isFinite(n) ? r(n) : String(e.value ?? "");
+			return /* @__PURE__ */ x("div", {
+				className: "flex items-center gap-2",
+				children: [
+					e.color ? /* @__PURE__ */ b("span", {
+						"aria-hidden": "true",
+						style: {
+							width: 8,
+							height: 8,
+							borderRadius: 9999,
+							background: e.color,
+							display: "inline-block"
+						}
+					}) : null,
+					e.name ? /* @__PURE__ */ x("span", {
+						style: { color: i.label.color },
+						children: [e.name, ":"]
+					}) : null,
+					/* @__PURE__ */ b("span", {
+						style: { fontWeight: 600 },
+						children: a
+					})
+				]
+			}, t);
+		})]
+	});
+}
+function k({ children: e, index: t = 0, delay: n = 0, className: r, as: i = "div" }) {
+	if (m()) return /* @__PURE__ */ b(i, {
+		className: r,
+		children: e
+	});
+	let a = p[i];
+	return /* @__PURE__ */ b(a, {
+		className: r,
+		initial: {
+			opacity: 0,
+			y: 8
+		},
+		animate: {
+			opacity: 1,
+			y: 0
+		},
+		transition: {
+			duration: .25,
+			ease: "easeOut",
+			delay: n + t * .04
+		},
+		children: e
+	});
+}
+function A({ children: e, className: t, glow: n = !1 }) {
+	return /* @__PURE__ */ b("div", {
+		className: S("rounded-2xl border p-5", "border-[var(--color-border-glass,var(--color-border-subtle))]", "bg-[var(--color-surface-glass,var(--color-bg-elevated))]", "shadow-[var(--shadow-float,var(--shadow-elevation-3))]", "backdrop-blur-[var(--blur-glass,12px)]", n && "ring-1 ring-[var(--color-action-primary-border)]/40", t),
+		children: e
+	});
+}
+function j({ data: e, centerLabel: a, centerValue: o, legend: s = !0, height: c = 220, valueFormatter: l }) {
+	let u = E(), f = m(), p = e.filter((e) => Number.isFinite(e.value) && e.value > 0);
+	if (p.length === 0) return /* @__PURE__ */ b("p", {
+		className: "text-sm text-text-secondary",
+		children: "No data."
+	});
+	let h = (e, t) => e.tone ? u.tone(e.tone) : u.palette[t % u.palette.length];
+	return /* @__PURE__ */ x("div", {
+		className: "flex flex-col items-center gap-4 sm:flex-row sm:items-center",
+		children: [/* @__PURE__ */ x("div", {
+			className: "relative",
+			style: {
+				width: "100%",
+				maxWidth: 260,
+				height: c
+			},
+			children: [/* @__PURE__ */ b(n, {
+				width: "100%",
+				height: "100%",
+				children: /* @__PURE__ */ x(d, { children: [/* @__PURE__ */ b(i, {
+					data: p,
+					dataKey: "value",
+					nameKey: "label",
+					innerRadius: "62%",
+					outerRadius: "90%",
+					paddingAngle: 2,
+					stroke: "transparent",
+					isAnimationActive: !f,
+					animationDuration: 250,
+					children: p.map((e, t) => /* @__PURE__ */ b(r, { fill: h(e, t) }, e.label))
+				}), /* @__PURE__ */ b(t, { content: /* @__PURE__ */ b(O, { valueFormatter: l }) })] })
+			}), o || a ? /* @__PURE__ */ x("div", {
+				className: "pointer-events-none absolute inset-0 flex flex-col items-center justify-center",
+				children: [o ? /* @__PURE__ */ b("span", {
+					className: "text-xl font-semibold text-text-primary",
+					children: o
+				}) : null, a ? /* @__PURE__ */ b("span", {
+					className: "text-xs text-text-secondary",
+					children: a
+				}) : null]
+			}) : null]
+		}), s ? /* @__PURE__ */ b("ul", {
+			className: "grid flex-1 grid-cols-1 gap-2 sm:grid-cols-2",
+			"aria-label": "Legend",
+			children: p.map((e, t) => /* @__PURE__ */ x("li", {
+				className: "flex items-center gap-2 text-xs",
+				children: [
+					/* @__PURE__ */ b("span", {
+						"aria-hidden": "true",
+						className: "size-2.5 shrink-0 rounded-full",
+						style: { background: h(e, t) }
+					}),
+					/* @__PURE__ */ b("span", {
+						className: "truncate text-text-secondary",
+						children: e.label
+					}),
+					/* @__PURE__ */ b("span", {
+						className: "ml-auto font-medium text-text-primary",
+						children: l ? l(e.value) : e.value
+					})
+				]
+			}, e.label))
+		}) : null]
+	});
+}
+function M({ data: e, tone: t = "brand", height: r = 40, className: i }) {
+	let a = E().tone(t), o = e.filter((e) => Number.isFinite(e)), c = `spark-${_().replace(/:/g, "")}`;
+	if (o.length < 2) return /* @__PURE__ */ b("div", {
+		className: i,
+		style: { height: r },
+		"aria-hidden": "true"
+	});
+	let l = o.map((e, t) => ({
+		x: t,
+		y: e
+	}));
+	return /* @__PURE__ */ b("div", {
+		className: i,
+		style: {
+			width: "100%",
+			height: r
+		},
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ b(n, {
+			width: "100%",
+			height: "100%",
+			children: /* @__PURE__ */ x(f, {
+				data: l,
+				margin: {
+					top: 2,
+					right: 0,
+					bottom: 0,
+					left: 0
+				},
+				children: [/* @__PURE__ */ b("defs", { children: /* @__PURE__ */ x("linearGradient", {
+					id: c,
+					x1: "0",
+					y1: "0",
+					x2: "0",
+					y2: "1",
+					children: [/* @__PURE__ */ b("stop", {
+						offset: "0%",
+						stopColor: a,
+						stopOpacity: .28
+					}), /* @__PURE__ */ b("stop", {
+						offset: "100%",
+						stopColor: a,
+						stopOpacity: 0
+					})]
+				}) }), /* @__PURE__ */ b(s, {
+					type: "monotone",
+					dataKey: "y",
+					stroke: a,
+					strokeWidth: 2,
+					fill: `url(#${c})`,
+					isAnimationActive: !1,
+					dot: !1
+				})]
+			})
+		})
+	});
+}
+function N({ value: e, label: t, tone: n = "brand", size: r = 120, strokeWidth: i = 10 }) {
+	let a = E(), o = m(), s = Math.max(0, Math.min(100, Number.isFinite(e) ? e : 0)), c = (r - i) / 2, l = 2 * Math.PI * c, u = s / 100 * l, d = a.tone(n);
+	return /* @__PURE__ */ x("div", {
+		className: "relative inline-flex items-center justify-center",
+		style: {
+			width: r,
+			height: r
+		},
+		role: "progressbar",
+		"aria-valuenow": Math.round(s),
+		"aria-valuemin": 0,
+		"aria-valuemax": 100,
+		"aria-label": t ?? "Progress",
+		children: [/* @__PURE__ */ x("svg", {
+			width: r,
+			height: r,
+			className: "-rotate-90",
+			children: [/* @__PURE__ */ b("circle", {
+				cx: r / 2,
+				cy: r / 2,
+				r: c,
+				fill: "none",
+				stroke: a.border,
+				strokeWidth: i
+			}), /* @__PURE__ */ b(p.circle, {
+				cx: r / 2,
+				cy: r / 2,
+				r: c,
+				fill: "none",
+				stroke: d,
+				strokeWidth: i,
+				strokeLinecap: "round",
+				strokeDasharray: l,
+				initial: { strokeDashoffset: o ? l - u : l },
+				animate: { strokeDashoffset: l - u },
+				transition: {
+					duration: o ? 0 : .25,
+					ease: "easeOut"
+				}
+			})]
+		}), /* @__PURE__ */ x("div", {
+			className: "absolute inset-0 flex flex-col items-center justify-center",
+			children: [/* @__PURE__ */ x("span", {
+				className: "text-lg font-semibold text-text-primary",
+				children: [Math.round(s), "%"]
+			}), t ? /* @__PURE__ */ b("span", {
+				className: "text-[10px] text-text-secondary",
+				children: t
+			}) : null]
+		})]
+	});
+}
+function P({ data: e, height: r = 240, valueFormatter: i }) {
+	let s = E(), d = m(), f = e.filter((e) => Number.isFinite(e.inflow) && Number.isFinite(e.outflow));
+	if (f.length === 0) return /* @__PURE__ */ b("p", {
+		className: "text-sm text-text-secondary",
+		children: "No cashflow data."
+	});
+	let p = f.map((e) => ({
+		label: e.label,
+		inflow: Math.abs(e.inflow),
+		outflow: -Math.abs(e.outflow)
+	}));
+	return /* @__PURE__ */ b("div", {
+		style: {
+			width: "100%",
+			height: r
+		},
+		children: /* @__PURE__ */ b(n, {
+			width: "100%",
+			height: "100%",
+			children: /* @__PURE__ */ x(u, {
+				data: p,
+				margin: {
+					top: 8,
+					right: 8,
+					bottom: 0,
+					left: 8
+				},
+				stackOffset: "sign",
+				children: [
+					/* @__PURE__ */ b(c, {
+						dataKey: "label",
+						tick: {
+							fill: s.textSecondary,
+							fontSize: 11
+						},
+						axisLine: { stroke: s.grid },
+						tickLine: !1
+					}),
+					/* @__PURE__ */ b(l, {
+						tick: {
+							fill: s.textSecondary,
+							fontSize: 11
+						},
+						axisLine: !1,
+						tickLine: !1,
+						width: 44,
+						tickFormatter: (e) => i ? i(Math.abs(e)) : String(Math.abs(e))
+					}),
+					/* @__PURE__ */ b(o, {
+						y: 0,
+						stroke: s.grid
+					}),
+					/* @__PURE__ */ b(t, {
+						cursor: {
+							fill: s.border,
+							opacity: .25
+						},
+						content: /* @__PURE__ */ b(O, { valueFormatter: (e) => i ? i(Math.abs(e)) : String(Math.abs(e)) })
+					}),
+					/* @__PURE__ */ b(a, {
+						dataKey: "inflow",
+						name: "Inflow",
+						fill: s.positive,
+						radius: [
+							4,
+							4,
+							0,
+							0
+						],
+						isAnimationActive: !d,
+						animationDuration: 250
+					}),
+					/* @__PURE__ */ b(a, {
+						dataKey: "outflow",
+						name: "Outflow",
+						fill: s.negative,
+						radius: [
+							0,
+							0,
+							4,
+							4
+						],
+						isAnimationActive: !d,
+						animationDuration: 250
+					})
+				]
+			})
+		})
+	});
+}
+function F({ data: e, target: r, tone: i = "brand", height: a = 200, valueFormatter: u }) {
+	let d = E(), p = m(), h = d.tone(i), g = e.filter((e) => Number.isFinite(e.y)), v = `area-${_().replace(/:/g, "")}`;
+	return g.length < 2 ? /* @__PURE__ */ b("p", {
+		className: "text-sm text-text-secondary",
+		children: "Not enough data to chart."
+	}) : /* @__PURE__ */ b("div", {
+		style: {
+			width: "100%",
+			height: a
+		},
+		children: /* @__PURE__ */ b(n, {
+			width: "100%",
+			height: "100%",
+			children: /* @__PURE__ */ x(f, {
+				data: g,
+				margin: {
+					top: 8,
+					right: 8,
+					bottom: 0,
+					left: 8
+				},
+				children: [
+					/* @__PURE__ */ b("defs", { children: /* @__PURE__ */ x("linearGradient", {
+						id: v,
+						x1: "0",
+						y1: "0",
+						x2: "0",
+						y2: "1",
+						children: [/* @__PURE__ */ b("stop", {
+							offset: "0%",
+							stopColor: h,
+							stopOpacity: .3
+						}), /* @__PURE__ */ b("stop", {
+							offset: "100%",
+							stopColor: h,
+							stopOpacity: .02
+						})]
+					}) }),
+					/* @__PURE__ */ b(c, {
+						dataKey: "x",
+						tick: {
+							fill: d.textSecondary,
+							fontSize: 11
+						},
+						axisLine: { stroke: d.grid },
+						tickLine: !1
+					}),
+					/* @__PURE__ */ b(l, {
+						tick: {
+							fill: d.textSecondary,
+							fontSize: 11
+						},
+						axisLine: !1,
+						tickLine: !1,
+						width: 44,
+						tickFormatter: (e) => u ? u(e) : String(e)
+					}),
+					/* @__PURE__ */ b(t, { content: /* @__PURE__ */ b(O, { valueFormatter: u }) }),
+					r !== void 0 && Number.isFinite(r) ? /* @__PURE__ */ b(o, {
+						y: r,
+						stroke: d.textSecondary,
+						strokeDasharray: "5 4",
+						label: {
+							value: u ? `Target ${u(r)}` : `Target ${r}`,
+							position: "insideTopRight",
+							fill: d.textSecondary,
+							fontSize: 10
+						}
+					}) : null,
+					/* @__PURE__ */ b(s, {
+						type: "monotone",
+						dataKey: "y",
+						stroke: h,
+						strokeWidth: 2,
+						fill: `url(#${v})`,
+						isAnimationActive: !p,
+						animationDuration: 250,
+						dot: !1
+					})
+				]
+			})
+		})
+	});
+}
+var I = /reject|cancel|abandon|decline|fail/i;
+function L({ steps: e, current: t, className: n }) {
+	let r = I.test(t), i = e.findIndex((e) => e.toLowerCase() === t.toLowerCase());
+	return /* @__PURE__ */ x("ol", {
+		className: S("flex w-full items-center overflow-x-auto", n),
+		"aria-label": "Lifecycle progress",
+		children: [e.map((t, n) => {
+			let a = n === e.length - 1, o = i >= 0 && n < i, s = i >= 0 && n === i && !r, c = o ? "done" : s ? "active" : "upcoming";
+			return /* @__PURE__ */ x("li", {
+				className: "flex min-w-fit flex-1 items-center",
+				"aria-current": s ? "step" : void 0,
+				children: [/* @__PURE__ */ x("div", {
+					className: "flex flex-col items-center gap-1.5 px-1",
+					children: [/* @__PURE__ */ b("span", {
+						className: S("flex size-7 items-center justify-center rounded-full border text-xs font-semibold transition-colors", c === "done" && "border-transparent bg-[var(--color-action-primary-bg)] text-[var(--color-action-primary-text)]", c === "active" && "border-[var(--color-action-primary-border)] bg-[var(--color-action-primary-bg)]/15 text-[var(--color-action-primary-text)]", c === "upcoming" && "border-border-subtle bg-bg-sunken text-text-secondary"),
+						"aria-hidden": "true",
+						children: o ? "✓" : n + 1
+					}), /* @__PURE__ */ b("span", {
+						className: S("whitespace-nowrap text-[11px]", s ? "font-medium text-text-primary" : "text-text-secondary"),
+						children: t
+					})]
+				}), a ? null : /* @__PURE__ */ b("span", {
+					"aria-hidden": "true",
+					className: S("mx-1 h-0.5 flex-1 rounded-full", o ? "bg-[var(--color-action-primary-bg)]" : "bg-border-subtle")
+				})]
+			}, t);
+		}), r ? /* @__PURE__ */ x("li", {
+			className: "ml-2 flex min-w-fit items-center gap-1.5",
+			"aria-current": "step",
+			children: [/* @__PURE__ */ b("span", {
+				className: "mx-1 h-0.5 w-6 rounded-full bg-status-error-border",
+				"aria-hidden": "true"
+			}), /* @__PURE__ */ x("div", {
+				className: "flex flex-col items-center gap-1.5 px-1",
+				children: [/* @__PURE__ */ b("span", {
+					className: "flex size-7 items-center justify-center rounded-full border border-transparent bg-status-error text-xs font-semibold text-status-error-text",
+					"aria-hidden": "true",
+					children: "✕"
+				}), /* @__PURE__ */ b("span", {
+					className: "whitespace-nowrap text-[11px] font-medium text-status-error-text",
+					children: t
+				})]
+			})]
+		}) : null]
+	});
+}
+function R({ label: e, value: t, delta: n, deltaTone: r, deltaSuffix: i = "%", spark: a, sparkTone: o = "brand", glow: s = !1, icon: c, className: l }) {
+	let u = r ? r === "positive" : (n ?? 0) > 0, d = r ? r === "negative" : (n ?? 0) < 0, f = u ? "text-status-success-text bg-status-success-bg" : d ? "text-status-error-text bg-status-error-bg" : "text-text-secondary bg-bg-sunken", p = n !== void 0 && n > 0 ? "+" : "";
+	return /* @__PURE__ */ x("div", {
+		className: S("group relative overflow-hidden rounded-xl border border-border-subtle bg-bg-surface p-4 transition-shadow", "motion-safe:hover:shadow-[var(--shadow-pop-hover,var(--shadow-elevation-2))]", s && "ring-1 ring-[var(--color-action-primary-border)]/40", l),
+		children: [
+			s ? /* @__PURE__ */ b("span", {
+				"aria-hidden": "true",
+				className: "pointer-events-none absolute -right-8 -top-8 size-24 rounded-full bg-[var(--color-action-primary-bg)]/15 blur-2xl"
+			}) : null,
+			/* @__PURE__ */ x("div", {
+				className: "flex items-start justify-between gap-2",
+				children: [/* @__PURE__ */ b("p", {
+					className: "text-xs text-text-secondary",
+					children: e
+				}), c ? /* @__PURE__ */ b("span", {
+					className: "text-text-secondary",
+					children: c
+				}) : null]
+			}),
+			/* @__PURE__ */ b("p", {
+				className: "mt-1 text-2xl font-semibold text-text-primary",
+				children: t
+			}),
+			/* @__PURE__ */ x("div", {
+				className: "mt-2 flex items-center justify-between gap-2",
+				children: [n !== void 0 && Number.isFinite(n) ? /* @__PURE__ */ x("span", {
+					className: S("inline-flex items-center gap-0.5 rounded-full px-1.5 py-0.5 text-xs font-medium", f),
+					children: [
+						/* @__PURE__ */ b("span", {
+							"aria-hidden": "true",
+							children: u ? "▲" : d ? "▼" : "—"
+						}),
+						p,
+						n.toFixed(1),
+						i
+					]
+				}) : /* @__PURE__ */ b("span", {}), a && a.length > 1 ? /* @__PURE__ */ b("div", {
+					className: "w-20 shrink-0",
+					children: /* @__PURE__ */ b(M, {
+						data: a,
+						tone: o,
+						height: 28
+					})
+				}) : null]
+			})
+		]
+	});
+}
+//#endregion
+export { j as DonutChart, k as FadeIn, A as GlassCard, L as LifecycleStepper, F as MiniAreaChart, N as ProgressRing, M as Sparkline, R as StatTile, P as TrendBars, E as useVizColors };
+
+//# sourceMappingURL=viz.js.map