erp-pro-ui 0.1.0 → 0.1.2

package/dist/chunks/charts-DugYWvEf.mjs

@@ -0,0 +1,632 @@
+import React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Area, AreaChart, Bar, BarChart, CartesianGrid, Cell, Legend, Line, LineChart, Pie, PieChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+//#region src/components/data-display/charts/chartPalette.ts
+var chartColorSlots = [
+	1,
+	2,
+	3,
+	4,
+	5,
+	6,
+	7,
+	8,
+	9,
+	10,
+	11,
+	12,
+	13,
+	14,
+	15
+];
+var chartColorTokens = chartColorSlots.map((slot) => `chart-${slot}`);
+var chartPalette = chartColorSlots.map((slot) => `var(--ds-chart-${slot})`);
+var resolvedColorCache = /* @__PURE__ */ new Map();
+var chartTokenPattern = /^chart-(\d+)$/i;
+var chartVariablePattern = /^--((?:ds|color)-chart-(\d+))$/i;
+var getChartSlotValue = (slot) => typeof slot === "number" ? slot : Number(slot.replace("chart-", ""));
+var getChartColorVar = (slot, namespace = "ds") => `var(--${namespace}-chart-${getChartSlotValue(slot)})`;
+var normalizeChartColorValue = (value) => {
+	const normalizedValue = value?.trim();
+	if (!normalizedValue) return;
+	const tokenMatch = normalizedValue.match(chartTokenPattern);
+	if (tokenMatch) return `var(--ds-chart-${tokenMatch[1]})`;
+	const variableMatch = normalizedValue.match(chartVariablePattern);
+	if (variableMatch) return `var(--${variableMatch[1]})`;
+	return normalizedValue;
+};
+var getThemeSignature = () => {
+	if (typeof document === "undefined") return "";
+	const root = document.documentElement;
+	return [
+		root.getAttribute("data-brand") ?? "",
+		root.getAttribute("data-mode") ?? "",
+		root.getAttribute("data-theme") ?? ""
+	].join("|");
+};
+var resolveColor = (value) => {
+	if (typeof document === "undefined") return null;
+	const cacheKey = `${getThemeSignature()}::${value}`;
+	const cached = resolvedColorCache.get(cacheKey);
+	if (cached !== void 0) return cached;
+	const probe = document.createElement("span");
+	probe.style.color = value;
+	probe.style.position = "fixed";
+	probe.style.opacity = "0";
+	probe.style.pointerEvents = "none";
+	document.body.appendChild(probe);
+	const computedColor = getComputedStyle(probe).color;
+	document.body.removeChild(probe);
+	const match = computedColor.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/i);
+	const resolved = match ? {
+		r: Number(match[1]),
+		g: Number(match[2]),
+		b: Number(match[3])
+	} : null;
+	resolvedColorCache.set(cacheKey, resolved);
+	return resolved;
+};
+var getColorDistance = (left, right) => {
+	const deltaR = left.r - right.r;
+	const deltaG = left.g - right.g;
+	const deltaB = left.b - right.b;
+	return Math.sqrt(deltaR ** 2 + deltaG ** 2 + deltaB ** 2);
+};
+var isTooSimilar = (candidate, usedColors, minDistance = 84) => {
+	if (usedColors.includes(candidate)) return true;
+	const candidateRgb = resolveColor(candidate);
+	if (!candidateRgb) return false;
+	return usedColors.some((usedColor) => {
+		const usedRgb = resolveColor(usedColor);
+		return usedRgb ? getColorDistance(candidateRgb, usedRgb) < minDistance : false;
+	});
+};
+var getChartPalette = (count = chartPalette.length) => Array.from({ length: count }, (_, index) => chartPalette[index % chartPalette.length]);
+var normalizeChartColors = (requestedColors) => {
+	const usedColors = [];
+	let paletteIndex = 0;
+	const getNextDistinctPaletteColor = () => {
+		for (let attempt = 0; attempt < chartPalette.length; attempt++) {
+			const candidate = chartPalette[(paletteIndex + attempt) % chartPalette.length];
+			if (!isTooSimilar(candidate, usedColors)) {
+				paletteIndex = (paletteIndex + attempt + 1) % chartPalette.length;
+				return candidate;
+			}
+		}
+		const fallback = chartPalette[paletteIndex % chartPalette.length];
+		paletteIndex = (paletteIndex + 1) % chartPalette.length;
+		return fallback;
+	};
+	return requestedColors.map((requestedColor) => {
+		const normalizedRequestedColor = normalizeChartColorValue(requestedColor);
+		const resolvedColor = normalizedRequestedColor && !isTooSimilar(normalizedRequestedColor, usedColors) ? normalizedRequestedColor : getNextDistinctPaletteColor();
+		usedColors.push(resolvedColor);
+		return resolvedColor;
+	});
+};
+//#endregion
+//#region src/components/data-display/charts/NeonLineChart.tsx
+var NeonLineChart = ({ data, height = 300, lineColorStop1 = getChartColorVar(2), lineColorStop2 = getChartColorVar(1), glowColor = getChartColorVar(1), className = "" }) => {
+	const [normalizedStop1, normalizedStop2] = React.useMemo(() => normalizeChartColors([lineColorStop1, lineColorStop2]), [lineColorStop1, lineColorStop2]);
+	const normalizedGlowColor = React.useMemo(() => normalizeChartColorValue(glowColor) ?? getChartColorVar(1), [glowColor]);
+	return /* @__PURE__ */ jsx("div", {
+		className: `w-full relative ${className}`,
+		style: { height },
+		children: /* @__PURE__ */ jsx(ResponsiveContainer, {
+			width: "100%",
+			height: "100%",
+			children: /* @__PURE__ */ jsxs(LineChart, {
+				data,
+				margin: {
+					top: 20,
+					right: 30,
+					left: 10,
+					bottom: 20
+				},
+				children: [
+					/* @__PURE__ */ jsxs("defs", { children: [/* @__PURE__ */ jsxs("linearGradient", {
+						id: "neonGradient",
+						x1: "0",
+						y1: "0",
+						x2: "1",
+						y2: "0",
+						children: [/* @__PURE__ */ jsx("stop", {
+							offset: "0%",
+							stopColor: normalizedStop1
+						}), /* @__PURE__ */ jsx("stop", {
+							offset: "100%",
+							stopColor: normalizedStop2
+						})]
+					}), /* @__PURE__ */ jsxs("filter", {
+						id: "neonGlow",
+						x: "-20%",
+						y: "-20%",
+						width: "140%",
+						height: "140%",
+						children: [/* @__PURE__ */ jsx("feDropShadow", {
+							dx: "0",
+							dy: "6",
+							stdDeviation: "8",
+							floodColor: normalizedGlowColor,
+							floodOpacity: "0.8"
+						}), /* @__PURE__ */ jsx("feDropShadow", {
+							dx: "0",
+							dy: "0",
+							stdDeviation: "15",
+							floodColor: normalizedStop1,
+							floodOpacity: "0.3"
+						})]
+					})] }),
+					/* @__PURE__ */ jsx(CartesianGrid, {
+						strokeDasharray: "3 3",
+						vertical: false,
+						stroke: "var(--ds-color-border)",
+						opacity: .5
+					}),
+					/* @__PURE__ */ jsx(XAxis, {
+						dataKey: "name",
+						axisLine: false,
+						tickLine: false,
+						tick: {
+							fill: "var(--ds-color-fg-muted)",
+							fontSize: 12
+						},
+						dy: 10
+					}),
+					/* @__PURE__ */ jsx(YAxis, {
+						axisLine: false,
+						tickLine: false,
+						tick: {
+							fill: "var(--ds-color-fg-muted)",
+							fontSize: 12
+						},
+						dx: -10
+					}),
+					/* @__PURE__ */ jsx(Tooltip, {
+						contentStyle: {
+							backgroundColor: "color-mix(in srgb, var(--ds-color-surface) 92%, transparent)",
+							border: "1px solid var(--ds-color-border)",
+							borderRadius: "8px",
+							backdropFilter: "blur(8px)",
+							color: "var(--ds-color-fg)"
+						},
+						itemStyle: { color: "var(--ds-color-fg)" }
+					}),
+					/* @__PURE__ */ jsx(Line, {
+						type: "monotone",
+						dataKey: "value",
+						stroke: "url(#neonGradient)",
+						strokeWidth: 3,
+						dot: false,
+						activeDot: {
+							r: 6,
+							fill: "var(--ds-color-surface)",
+							stroke: normalizedStop2,
+							strokeWidth: 2
+						},
+						filter: "url(#neonGlow)"
+					})
+				]
+			})
+		})
+	});
+};
+//#endregion
+//#region src/components/data-display/charts/StackedBarChart.tsx
+var StackedBarChart = ({ data, categories, height = 300, yAxisDomain, className = "" }) => {
+	const normalizedCategories = React.useMemo(() => {
+		const normalizedColors = normalizeChartColors(categories.map((category) => category.color));
+		return categories.map((category, index) => ({
+			...category,
+			color: normalizedColors[index] ?? category.color
+		}));
+	}, [categories]);
+	return /* @__PURE__ */ jsx("div", {
+		className: `w-full ${className}`,
+		style: { height },
+		children: /* @__PURE__ */ jsx(ResponsiveContainer, {
+			width: "100%",
+			height: "100%",
+			children: /* @__PURE__ */ jsxs(BarChart, {
+				data,
+				margin: {
+					top: 20,
+					right: 30,
+					left: 20,
+					bottom: 5
+				},
+				children: [
+					/* @__PURE__ */ jsx(CartesianGrid, {
+						strokeDasharray: "3 3",
+						vertical: false,
+						stroke: "var(--ds-color-border)",
+						opacity: .4
+					}),
+					/* @__PURE__ */ jsx(XAxis, {
+						dataKey: "name",
+						axisLine: false,
+						tickLine: false,
+						tick: {
+							fill: "var(--ds-color-fg-muted)",
+							fontSize: 12
+						},
+						dy: 10
+					}),
+					/* @__PURE__ */ jsx(YAxis, {
+						axisLine: false,
+						tickLine: false,
+						tick: {
+							fill: "var(--ds-color-fg-muted)",
+							fontSize: 12
+						},
+						dx: -10,
+						domain: yAxisDomain
+					}),
+					/* @__PURE__ */ jsx(Tooltip, {
+						cursor: { fill: "color-mix(in srgb, var(--ds-color-accent) 10%, transparent)" },
+						contentStyle: {
+							backgroundColor: "color-mix(in srgb, var(--ds-color-surface) 92%, transparent)",
+							border: "1px solid var(--ds-color-border)",
+							borderRadius: "8px",
+							backdropFilter: "blur(8px)",
+							color: "var(--ds-color-fg)"
+						}
+					}),
+					/* @__PURE__ */ jsx(Legend, {
+						iconType: "circle",
+						wrapperStyle: {
+							paddingTop: "20px",
+							fontSize: "12px",
+							color: "var(--color-neutral-300)"
+						}
+					}),
+					normalizedCategories.map((cat, index) => {
+						const radius = index === normalizedCategories.length - 1 ? [
+							6,
+							6,
+							0,
+							0
+						] : [
+							0,
+							0,
+							0,
+							0
+						];
+						return /* @__PURE__ */ jsx(Bar, {
+							dataKey: cat.key,
+							name: cat.label,
+							stackId: "a",
+							fill: cat.color,
+							radius,
+							barSize: 32
+						}, cat.key);
+					})
+				]
+			})
+		})
+	});
+};
+//#endregion
+//#region src/components/data-display/charts/ThinBreakdownBar.tsx
+var ThinBreakdownBar = ({ data: segments, className = "", showLabels = true }) => {
+	const [activeSegmentKey, setActiveSegmentKey] = React.useState(null);
+	const normalizedSegments = React.useMemo(() => {
+		const normalizedColors = normalizeChartColors(segments.map((segment) => segment.color));
+		const totalValue = segments.reduce((sum, item) => sum + item.value, 0);
+		return segments.map((segment, index) => ({
+			...segment,
+			key: segment.id || `segment-${index}`,
+			color: normalizedColors[index] ?? segment.color,
+			widthPercent: totalValue > 0 ? Math.max(segment.value / totalValue * 100, 0) : 0
+		}));
+	}, [segments]);
+	const segmentsWithMetrics = React.useMemo(() => {
+		let runningPercent = 0;
+		return normalizedSegments.map((segment) => {
+			const nextSegment = {
+				...segment,
+				centerPercent: runningPercent + segment.widthPercent / 2
+			};
+			runningPercent += segment.widthPercent;
+			return nextSegment;
+		});
+	}, [normalizedSegments]);
+	const activeSegment = React.useMemo(() => segmentsWithMetrics.find((segment) => segment.key === activeSegmentKey) ?? null, [activeSegmentKey, segmentsWithMetrics]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: `w-full flex flex-col gap-3 ${className}`,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "relative",
+			children: [activeSegment && /* @__PURE__ */ jsxs("div", {
+				className: "pointer-events-none absolute -top-10 z-10 -translate-x-1/2 rounded-full border border-border/70 bg-background/95 px-2.5 py-1 text-[11px] font-medium text-foreground shadow-lg backdrop-blur-md",
+				style: { left: `${activeSegment.centerPercent}%` },
+				children: [
+					/* @__PURE__ */ jsx("span", { children: activeSegment.label }),
+					/* @__PURE__ */ jsx("span", {
+						className: "mx-1 text-muted-foreground",
+						children: "•"
+					}),
+					/* @__PURE__ */ jsx("span", {
+						style: { color: activeSegment.color },
+						children: activeSegment.value
+					})
+				]
+			}), /* @__PURE__ */ jsx("div", {
+				className: "rounded-full bg-background-tertiary/80 p-0.5",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "flex w-full gap-1",
+					onMouseLeave: () => setActiveSegmentKey(null),
+					children: segmentsWithMetrics.map((segment) => {
+						const isActive = activeSegmentKey === segment.key;
+						return /* @__PURE__ */ jsx("div", {
+							className: "relative flex h-2.5 min-w-0 items-center",
+							style: { width: `${segment.widthPercent}%` },
+							onMouseEnter: () => setActiveSegmentKey(segment.key),
+							children: /* @__PURE__ */ jsx("div", {
+								className: "h-full w-full rounded-full transition-[transform,filter,box-shadow,opacity] duration-200 ease-out",
+								style: {
+									backgroundColor: segment.color,
+									opacity: activeSegmentKey && !isActive ? .72 : 1,
+									transform: isActive ? "scaleY(1.3)" : "scaleY(1)",
+									filter: isActive ? "saturate(1.1) brightness(1.05)" : "none",
+									boxShadow: isActive ? `inset 0 1px 1px rgba(255,255,255,0.28), 0 0 0 1px color-mix(in srgb, ${segment.color} 35%, transparent), 0 0 14px color-mix(in srgb, ${segment.color} 45%, transparent)` : `inset 0 1px 1px rgba(255,255,255,0.2), 0 0 8px color-mix(in srgb, ${segment.color} 30%, transparent)`
+								},
+								title: `${segment.label}: ${segment.value}`
+							})
+						}, segment.key);
+					})
+				})
+			})]
+		}), showLabels && /* @__PURE__ */ jsx("div", {
+			className: "flex w-full items-start gap-1 px-0.5",
+			children: segmentsWithMetrics.map((segment) => {
+				const isActive = activeSegmentKey === segment.key;
+				return /* @__PURE__ */ jsx("div", {
+					className: "flex min-w-0 justify-center",
+					style: { width: `${segment.widthPercent}%` },
+					children: /* @__PURE__ */ jsx("span", {
+						className: "whitespace-nowrap px-1 text-center text-[11px] font-medium tracking-wide text-muted-foreground transition-colors duration-200",
+						style: isActive ? { color: segment.color } : void 0,
+						children: segment.label
+					})
+				}, `label-${segment.key}`);
+			})
+		})]
+	});
+};
+//#endregion
+//#region src/components/data-display/charts/AreaChart.tsx
+var AreaChart$1 = ({ data, categories, height = 300, className = "", showGrid = true }) => {
+	const normalizedCategories = React.useMemo(() => {
+		const normalizedColors = normalizeChartColors(categories.map((category) => category.color));
+		return categories.map((category, index) => ({
+			...category,
+			color: normalizedColors[index] ?? category.color
+		}));
+	}, [categories]);
+	return /* @__PURE__ */ jsx("div", {
+		className: `w-full ${className}`,
+		style: { height },
+		children: /* @__PURE__ */ jsx(ResponsiveContainer, {
+			width: "100%",
+			height: "100%",
+			children: /* @__PURE__ */ jsxs(AreaChart, {
+				data,
+				margin: {
+					top: 10,
+					right: 30,
+					left: 0,
+					bottom: 0
+				},
+				children: [
+					/* @__PURE__ */ jsx("defs", { children: normalizedCategories.map((cat) => /* @__PURE__ */ jsxs("linearGradient", {
+						id: `color-${cat.key}`,
+						x1: "0",
+						y1: "0",
+						x2: "0",
+						y2: "1",
+						children: [/* @__PURE__ */ jsx("stop", {
+							offset: "5%",
+							stopColor: cat.color,
+							stopOpacity: .3
+						}), /* @__PURE__ */ jsx("stop", {
+							offset: "95%",
+							stopColor: cat.color,
+							stopOpacity: 0
+						})]
+					}, `gradient-${cat.key}`)) }),
+					showGrid && /* @__PURE__ */ jsx(CartesianGrid, {
+						strokeDasharray: "3 3",
+						vertical: false,
+						stroke: "var(--ds-color-border)",
+						opacity: .5
+					}),
+					/* @__PURE__ */ jsx(XAxis, {
+						dataKey: "name",
+						axisLine: false,
+						tickLine: false,
+						tick: {
+							fill: "var(--ds-color-fg-muted)",
+							fontSize: 12
+						},
+						dy: 10
+					}),
+					/* @__PURE__ */ jsx(YAxis, {
+						axisLine: false,
+						tickLine: false,
+						tick: {
+							fill: "var(--ds-color-fg-muted)",
+							fontSize: 12
+						},
+						dx: -10
+					}),
+					/* @__PURE__ */ jsx(Tooltip, {
+						contentStyle: {
+							backgroundColor: "color-mix(in srgb, var(--ds-color-surface) 92%, transparent)",
+							border: "1px solid var(--ds-color-border)",
+							borderRadius: "8px",
+							backdropFilter: "blur(8px)",
+							color: "var(--ds-color-fg)"
+						},
+						itemStyle: { color: "var(--ds-color-fg)" }
+					}),
+					normalizedCategories.map((cat) => /* @__PURE__ */ jsx(Area, {
+						type: "monotone",
+						dataKey: cat.key,
+						stroke: cat.color,
+						strokeWidth: 2,
+						fillOpacity: 1,
+						fill: `url(#color-${cat.key})`
+					}, cat.key))
+				]
+			})
+		})
+	});
+};
+//#endregion
+//#region src/components/data-display/charts/BarChart.tsx
+var BarChart$1 = ({ data, categories, height = 300, className = "", layout = "horizontal" }) => {
+	const normalizedCategories = React.useMemo(() => {
+		const normalizedColors = normalizeChartColors(categories.map((category) => category.color));
+		return categories.map((category, index) => ({
+			...category,
+			color: normalizedColors[index] ?? category.color
+		}));
+	}, [categories]);
+	return /* @__PURE__ */ jsx("div", {
+		className: `w-full ${className}`,
+		style: { height },
+		children: /* @__PURE__ */ jsx(ResponsiveContainer, {
+			width: "100%",
+			height: "100%",
+			children: /* @__PURE__ */ jsxs(BarChart, {
+				data,
+				layout,
+				margin: {
+					top: 20,
+					right: 30,
+					left: 20,
+					bottom: 5
+				},
+				children: [
+					/* @__PURE__ */ jsx(CartesianGrid, {
+						strokeDasharray: "3 3",
+						horizontal: layout === "horizontal",
+						vertical: layout === "vertical",
+						stroke: "var(--ds-color-border)",
+						opacity: .4
+					}),
+					layout === "horizontal" ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(XAxis, {
+						dataKey: "name",
+						axisLine: false,
+						tickLine: false,
+						tick: {
+							fill: "var(--ds-color-fg-muted)",
+							fontSize: 12
+						},
+						dy: 10
+					}), /* @__PURE__ */ jsx(YAxis, {
+						axisLine: false,
+						tickLine: false,
+						tick: {
+							fill: "var(--ds-color-fg-muted)",
+							fontSize: 12
+						},
+						dx: -10
+					})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(XAxis, {
+						type: "number",
+						axisLine: false,
+						tickLine: false,
+						tick: {
+							fill: "var(--ds-color-fg-muted)",
+							fontSize: 12
+						},
+						dy: 10
+					}), /* @__PURE__ */ jsx(YAxis, {
+						dataKey: "name",
+						type: "category",
+						axisLine: false,
+						tickLine: false,
+						tick: {
+							fill: "var(--ds-color-fg-muted)",
+							fontSize: 12
+						},
+						dx: -10
+					})] }),
+					/* @__PURE__ */ jsx(Tooltip, {
+						cursor: { fill: "color-mix(in srgb, var(--ds-color-accent) 10%, transparent)" },
+						contentStyle: {
+							backgroundColor: "color-mix(in srgb, var(--ds-color-surface) 92%, transparent)",
+							border: "1px solid var(--ds-color-border)",
+							borderRadius: "8px",
+							backdropFilter: "blur(8px)",
+							color: "var(--ds-color-fg)"
+						}
+					}),
+					normalizedCategories.map((cat) => /* @__PURE__ */ jsx(Bar, {
+						dataKey: cat.key,
+						fill: cat.color,
+						radius: layout === "horizontal" ? [
+							4,
+							4,
+							0,
+							0
+						] : [
+							0,
+							4,
+							4,
+							0
+						]
+					}, cat.key))
+				]
+			})
+		})
+	});
+};
+//#endregion
+//#region src/components/data-display/charts/PieChart.tsx
+var PieChart$1 = ({ data, colors, height = 300, className = "", variant = "donut" }) => {
+	const innerRadius = variant === "donut" ? "60%" : 0;
+	const normalizedColors = React.useMemo(() => normalizeChartColors(colors), [colors]);
+	return /* @__PURE__ */ jsx("div", {
+		className: `w-full ${className}`,
+		style: { height },
+		children: /* @__PURE__ */ jsx(ResponsiveContainer, {
+			width: "100%",
+			height: "100%",
+			children: /* @__PURE__ */ jsxs(PieChart, { children: [
+				/* @__PURE__ */ jsx(Pie, {
+					data,
+					cx: "50%",
+					cy: "50%",
+					innerRadius,
+					outerRadius: "80%",
+					paddingAngle: variant === "donut" ? 2 : 0,
+					dataKey: "value",
+					stroke: "none",
+					children: data.map((entry, index) => /* @__PURE__ */ jsx(Cell, { fill: normalizedColors[index % normalizedColors.length] }, `cell-${index}`))
+				}),
+				/* @__PURE__ */ jsx(Tooltip, {
+					contentStyle: {
+						backgroundColor: "color-mix(in srgb, var(--ds-color-surface) 92%, transparent)",
+						border: "1px solid var(--ds-color-border)",
+						borderRadius: "8px",
+						backdropFilter: "blur(8px)",
+						color: "var(--ds-color-fg)"
+					},
+					itemStyle: { color: "var(--ds-color-fg)" }
+				}),
+				/* @__PURE__ */ jsx(Legend, {
+					iconType: "circle",
+					wrapperStyle: {
+						fontSize: "12px",
+						color: "var(--color-neutral-300)"
+					}
+				})
+			] })
+		})
+	});
+};
+//#endregion
+export { StackedBarChart as a, getChartColorVar as c, ThinBreakdownBar as i, getChartPalette as l, BarChart$1 as n, NeonLineChart as o, AreaChart$1 as r, chartColorTokens as s, PieChart$1 as t };
+
+//# sourceMappingURL=charts-DugYWvEf.mjs.map