erp-pro-ui 0.1.2 → 0.1.4

package/dist/chunks/{charts-DugYWvEf.mjs → charts-BYvM4TMG.mjs}

@@ -1,6 +1,6 @@
 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";
+import { Area, AreaChart, Bar, BarChart, CartesianGrid, Cell, Legend, Line, LineChart, Pie, PieChart, Rectangle, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
 //#region src/components/data-display/charts/chartPalette.ts
 var chartColorSlots = [
 	1,
@@ -105,6 +105,58 @@ var normalizeChartColors = (requestedColors) => {
 	});
 };
 //#endregion
+//#region src/components/data-display/charts/chartStyles.ts
+var chartTooltipContentStyle = {
+	background: "linear-gradient(135deg, color-mix(in srgb, var(--ds-color-bg-surface) 88%, transparent), color-mix(in srgb, var(--ds-color-bg-elevated) 74%, transparent))",
+	border: "1px solid color-mix(in srgb, var(--ds-color-border-strong) 72%, transparent)",
+	borderRadius: "12px",
+	backdropFilter: "blur(18px) saturate(180%)",
+	WebkitBackdropFilter: "blur(18px) saturate(180%)",
+	boxShadow: "0 18px 40px color-mix(in srgb, var(--ds-color-fg) 14%, transparent), inset 0 1px 0 color-mix(in srgb, var(--ds-color-bg-surface) 36%, transparent)",
+	color: "var(--ds-color-fg)",
+	padding: "0.75rem 0.875rem"
+};
+var chartTooltipLabelStyle = {
+	color: "var(--ds-color-fg)",
+	fontSize: "0.8125rem",
+	fontWeight: 600,
+	marginBottom: "0.375rem"
+};
+var chartTooltipItemStyle = {
+	color: "var(--ds-color-fg)",
+	fontSize: "0.8125rem",
+	fontWeight: 500,
+	padding: 0
+};
+var chartTooltipWrapperStyle = { outline: "none" };
+var chartLegendTextStyle = {
+	fontSize: "12px",
+	color: "var(--ds-color-fg-muted)"
+};
+var chartBandHoverCursorStyle = {
+	fill: "color-mix(in srgb, var(--ds-color-accent) 12%, transparent)",
+	stroke: "color-mix(in srgb, var(--ds-color-accent) 34%, var(--ds-color-border-strong))",
+	strokeWidth: 1
+};
+var chartLineHoverCursorStyle = {
+	stroke: "color-mix(in srgb, var(--ds-color-accent) 42%, var(--ds-color-border-strong))",
+	strokeWidth: 1.25,
+	strokeDasharray: "4 4"
+};
+var getChartActiveDotStyle = (strokeColor) => ({
+	r: 6,
+	fill: "color-mix(in srgb, var(--ds-color-bg-surface) 90%, transparent)",
+	stroke: strokeColor,
+	strokeWidth: 2.5
+});
+var chartPillTooltipStyle = {
+	background: "linear-gradient(135deg, color-mix(in srgb, var(--ds-color-bg-surface) 90%, transparent), color-mix(in srgb, var(--ds-color-bg-elevated) 76%, transparent))",
+	border: "1px solid color-mix(in srgb, var(--ds-color-border-strong) 70%, transparent)",
+	boxShadow: "0 14px 32px color-mix(in srgb, var(--ds-color-fg) 14%, transparent), inset 0 1px 0 color-mix(in srgb, var(--ds-color-bg-surface) 34%, transparent)",
+	backdropFilter: "blur(16px) saturate(170%)",
+	WebkitBackdropFilter: "blur(16px) saturate(170%)"
+};
+//#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]);
@@ -183,14 +235,11 @@ var NeonLineChart = ({ data, height = 300, lineColorStop1 = getChartColorVar(2),
 						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)" }
+						contentStyle: chartTooltipContentStyle,
+						cursor: chartLineHoverCursorStyle,
+						itemStyle: chartTooltipItemStyle,
+						labelStyle: chartTooltipLabelStyle,
+						wrapperStyle: chartTooltipWrapperStyle
 					}),
 					/* @__PURE__ */ jsx(Line, {
 						type: "monotone",
@@ -198,12 +247,7 @@ var NeonLineChart = ({ data, height = 300, lineColorStop1 = getChartColorVar(2),
 						stroke: "url(#neonGradient)",
 						strokeWidth: 3,
 						dot: false,
-						activeDot: {
-							r: 6,
-							fill: "var(--ds-color-surface)",
-							stroke: normalizedStop2,
-							strokeWidth: 2
-						},
+						activeDot: getChartActiveDotStyle(normalizedStop2),
 						filter: "url(#neonGlow)"
 					})
 				]
@@ -263,21 +307,17 @@ var StackedBarChart = ({ data, categories, height = 300, yAxisDomain, className
 						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)"
-						}
+						contentStyle: chartTooltipContentStyle,
+						cursor: chartBandHoverCursorStyle,
+						itemStyle: chartTooltipItemStyle,
+						labelStyle: chartTooltipLabelStyle,
+						wrapperStyle: chartTooltipWrapperStyle
 					}),
 					/* @__PURE__ */ jsx(Legend, {
 						iconType: "circle",
 						wrapperStyle: {
-							paddingTop: "20px",
-							fontSize: "12px",
-							color: "var(--color-neutral-300)"
+							...chartLegendTextStyle,
+							paddingTop: "20px"
 						}
 					}),
 					normalizedCategories.map((cat, index) => {
@@ -308,7 +348,8 @@ var StackedBarChart = ({ data, categories, height = 300, yAxisDomain, className
 };
 //#endregion
 //#region src/components/data-display/charts/ThinBreakdownBar.tsx
-var ThinBreakdownBar = ({ data: segments, className = "", showLabels = true }) => {
+var defaultValueFormatter$2 = (value) => new Intl.NumberFormat().format(value);
+var ThinBreakdownBar = ({ data: segments, className = "", showLabels = true, showSummary = false, summaryLabel = "Total", valueFormatter = defaultValueFormatter$2 }) => {
 	const [activeSegmentKey, setActiveSegmentKey] = React.useState(null);
 	const normalizedSegments = React.useMemo(() => {
 		const normalizedColors = normalizeChartColors(segments.map((segment) => segment.color));
@@ -332,65 +373,93 @@ var ThinBreakdownBar = ({ data: segments, className = "", showLabels = true }) =
 		});
 	}, [normalizedSegments]);
 	const activeSegment = React.useMemo(() => segmentsWithMetrics.find((segment) => segment.key === activeSegmentKey) ?? null, [activeSegmentKey, segmentsWithMetrics]);
+	const totalValue = React.useMemo(() => segments.reduce((sum, item) => sum + item.value, 0), [segments]);
+	const summaryTitle = activeSegment?.label ?? summaryLabel;
+	const summaryValue = activeSegment?.value ?? totalValue;
+	const summaryMeta = activeSegment ? `${Math.round(activeSegment.widthPercent)}% of total` : `${segments.length} segments`;
 	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);
+		children: [
+			showSummary && (activeSegment || totalValue > 0) ? /* @__PURE__ */ jsxs("div", {
+				className: "flex items-start justify-between gap-4 rounded-xl border border-border/70 bg-background/70 px-4 py-3 backdrop-blur-md",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "min-w-0",
+					children: [/* @__PURE__ */ jsx("p", {
+						className: "truncate text-[11px] font-medium tracking-[0.16em] text-muted-foreground uppercase transition-colors duration-200",
+						style: activeSegment ? { color: activeSegment.color } : void 0,
+						children: summaryTitle
+					}), /* @__PURE__ */ jsx("p", {
+						className: "mt-1 text-xs text-muted-foreground",
+						children: summaryMeta
+					})]
+				}), /* @__PURE__ */ jsx("p", {
+					className: "text-right text-lg font-semibold leading-none text-foreground transition-colors duration-200",
+					style: activeSegment ? { color: activeSegment.color } : void 0,
+					children: valueFormatter(summaryValue)
+				})]
+			}) : null,
+			/* @__PURE__ */ jsxs("div", {
+				className: "relative",
+				children: [activeSegment && !showSummary && /* @__PURE__ */ jsxs("div", {
+					className: "pointer-events-none absolute -top-10 z-10 -translate-x-1/2 rounded-full px-2.5 py-1 text-[11px] font-medium text-foreground",
+					style: {
+						...chartPillTooltipStyle,
+						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}`);
 				})
-			})]
-		}), 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
@@ -460,16 +529,14 @@ var AreaChart$1 = ({ data, categories, height = 300, className = "", showGrid =
 						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)" }
+						contentStyle: chartTooltipContentStyle,
+						cursor: chartLineHoverCursorStyle,
+						itemStyle: chartTooltipItemStyle,
+						labelStyle: chartTooltipLabelStyle,
+						wrapperStyle: chartTooltipWrapperStyle
 					}),
 					normalizedCategories.map((cat) => /* @__PURE__ */ jsx(Area, {
+						activeDot: getChartActiveDotStyle(cat.color),
 						type: "monotone",
 						dataKey: cat.key,
 						stroke: cat.color,
@@ -484,7 +551,8 @@ var AreaChart$1 = ({ data, categories, height = 300, className = "", showGrid =
 };
 //#endregion
 //#region src/components/data-display/charts/BarChart.tsx
-var BarChart$1 = ({ data, categories, height = 300, className = "", layout = "horizontal" }) => {
+var BarChart$1 = ({ data, categories, height = 300, className = "", layout = "horizontal", maxBarSize }) => {
+	const resolvedMaxBarSize = maxBarSize ?? (layout === "horizontal" ? 40 : 22);
 	const normalizedCategories = React.useMemo(() => {
 		const normalizedColors = normalizeChartColors(categories.map((category) => category.color));
 		return categories.map((category, index) => ({
@@ -501,6 +569,7 @@ var BarChart$1 = ({ data, categories, height = 300, className = "", layout = "ho
 			children: /* @__PURE__ */ jsxs(BarChart, {
 				data,
 				layout,
+				barCategoryGap: data.length <= 4 ? "28%" : "18%",
 				margin: {
 					top: 20,
 					right: 30,
@@ -553,18 +622,16 @@ var BarChart$1 = ({ data, categories, height = 300, className = "", layout = "ho
 						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)"
-						}
+						contentStyle: chartTooltipContentStyle,
+						cursor: chartBandHoverCursorStyle,
+						itemStyle: chartTooltipItemStyle,
+						labelStyle: chartTooltipLabelStyle,
+						wrapperStyle: chartTooltipWrapperStyle
 					}),
 					normalizedCategories.map((cat) => /* @__PURE__ */ jsx(Bar, {
 						dataKey: cat.key,
 						fill: cat.color,
+						maxBarSize: resolvedMaxBarSize,
 						radius: layout === "horizontal" ? [
 							4,
 							4,
@@ -583,14 +650,187 @@ var BarChart$1 = ({ data, categories, height = 300, className = "", layout = "ho
 	});
 };
 //#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]);
+//#region src/components/data-display/charts/PositiveNegativeBarChart.tsx
+var defaultValueFormatter$1 = (value) => new Intl.NumberFormat().format(value);
+var getBarRadius = (value, layout) => {
+	if (value === 0) return [
+		6,
+		6,
+		6,
+		6
+	];
+	if (layout === "horizontal") return value > 0 ? [
+		6,
+		6,
+		0,
+		0
+	] : [
+		0,
+		0,
+		6,
+		6
+	];
+	return value > 0 ? [
+		0,
+		6,
+		6,
+		0
+	] : [
+		6,
+		0,
+		0,
+		6
+	];
+};
+var PositiveNegativeBarChart = ({ data, height = 320, className = "", layout = "horizontal", positiveColor = getChartColorVar(3), negativeColor = getChartColorVar(5), neutralColor = getChartColorVar(15), showGrid = true, seriesLabel = "Variance", valueFormatter = defaultValueFormatter$1, tickFormatter }) => {
+	const resolvedPositiveColor = React.useMemo(() => normalizeChartColorValue(positiveColor) ?? getChartColorVar(3), [positiveColor]);
+	const resolvedNegativeColor = React.useMemo(() => normalizeChartColorValue(negativeColor) ?? getChartColorVar(5), [negativeColor]);
+	const resolvedNeutralColor = React.useMemo(() => normalizeChartColorValue(neutralColor) ?? getChartColorVar(15), [neutralColor]);
+	const resolvedTickFormatter = React.useCallback((value) => tickFormatter?.(value) ?? valueFormatter(value), [tickFormatter, valueFormatter]);
+	const getBarFill = React.useCallback((value) => {
+		if (value > 0) return resolvedPositiveColor;
+		if (value < 0) return resolvedNegativeColor;
+		return resolvedNeutralColor;
+	}, [
+		resolvedNegativeColor,
+		resolvedNeutralColor,
+		resolvedPositiveColor
+	]);
 	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: [
+					showGrid ? /* @__PURE__ */ jsx(CartesianGrid, {
+						strokeDasharray: "3 3",
+						horizontal: layout === "horizontal",
+						vertical: layout === "vertical",
+						stroke: "var(--ds-color-border)",
+						opacity: .35
+					}) : null,
+					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
+							},
+							tickFormatter: resolvedTickFormatter,
+							dx: -10
+						}),
+						/* @__PURE__ */ jsx(ReferenceLine, {
+							y: 0,
+							stroke: "var(--ds-color-border-strong)",
+							strokeOpacity: .95
+						})
+					] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+						/* @__PURE__ */ jsx(XAxis, {
+							type: "number",
+							axisLine: false,
+							tickLine: false,
+							tick: {
+								fill: "var(--ds-color-fg-muted)",
+								fontSize: 12
+							},
+							tickFormatter: resolvedTickFormatter,
+							dy: 10
+						}),
+						/* @__PURE__ */ jsx(YAxis, {
+							dataKey: "name",
+							type: "category",
+							axisLine: false,
+							tickLine: false,
+							tick: {
+								fill: "var(--ds-color-fg-muted)",
+								fontSize: 12
+							},
+							width: 96,
+							dx: -6
+						}),
+						/* @__PURE__ */ jsx(ReferenceLine, {
+							x: 0,
+							stroke: "var(--ds-color-border-strong)",
+							strokeOpacity: .95
+						})
+					] }),
+					/* @__PURE__ */ jsx(Tooltip, {
+						contentStyle: chartTooltipContentStyle,
+						cursor: chartBandHoverCursorStyle,
+						itemStyle: chartTooltipItemStyle,
+						labelStyle: chartTooltipLabelStyle,
+						wrapperStyle: chartTooltipWrapperStyle,
+						formatter: (value) => [valueFormatter(Number(value ?? 0)), seriesLabel]
+					}),
+					/* @__PURE__ */ jsx(Bar, {
+						dataKey: "value",
+						radius: 6,
+						barSize: layout === "horizontal" ? 30 : 22,
+						shape: (props) => {
+							const barValue = Array.isArray(props.value) ? props.value[1] - props.value[0] : props.value;
+							return /* @__PURE__ */ jsx(Rectangle, {
+								...props,
+								radius: getBarRadius(barValue, layout)
+							});
+						},
+						children: data.map((entry) => /* @__PURE__ */ jsx(Cell, { fill: getBarFill(entry.value) }, `${entry.name}-${entry.value}`))
+					})
+				]
+			})
+		})
+	});
+};
+//#endregion
+//#region src/components/data-display/charts/PieChart.tsx
+var defaultValueFormatter = (value) => new Intl.NumberFormat().format(value);
+var PieChart$1 = ({ data, colors, height = 300, className = "", variant = "donut", showCenterSummary = variant === "donut", centerLabel = "Total", valueFormatter = defaultValueFormatter, renderCenterContent }) => {
+	const [activeIndex, setActiveIndex] = React.useState(null);
+	const innerRadius = variant === "donut" ? "60%" : 0;
+	const normalizedColors = React.useMemo(() => normalizeChartColors(colors), [colors]);
+	const totalValue = React.useMemo(() => data.reduce((sum, item) => sum + item.value, 0), [data]);
+	const activeSlice = activeIndex !== null && activeIndex >= 0 && activeIndex < data.length ? data[activeIndex] : null;
+	const activePercentage = activeSlice && totalValue > 0 ? `${Math.round(activeSlice.value / totalValue * 100)}% of total` : `${data.length} categories`;
+	const displayLabel = activeSlice?.name ?? centerLabel;
+	const displayValue = activeSlice?.value ?? totalValue;
+	const centerContentContext = {
+		activeColor: activeIndex !== null ? normalizedColors[activeIndex % normalizedColors.length] : void 0,
+		activeIndex,
+		activeSlice,
+		data,
+		displayLabel,
+		displayPercentageLabel: activePercentage,
+		displayValue,
+		normalizedColors,
+		totalValue,
+		valueFormatter,
+		variant
+	};
+	const shouldRenderCenterContent = variant === "donut" && (showCenterSummary || Boolean(renderCenterContent));
+	return /* @__PURE__ */ jsxs("div", {
+		className: `relative w-full ${className}`,
+		style: { height },
+		children: [/* @__PURE__ */ jsx(ResponsiveContainer, {
 			width: "100%",
 			height: "100%",
 			children: /* @__PURE__ */ jsxs(PieChart, { children: [
@@ -603,30 +843,44 @@ var PieChart$1 = ({ data, colors, height = 300, className = "", variant = "donut
 					paddingAngle: variant === "donut" ? 2 : 0,
 					dataKey: "value",
 					stroke: "none",
+					onMouseEnter: (_data, index) => setActiveIndex(index),
+					onMouseLeave: () => setActiveIndex(null),
 					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)" }
+					contentStyle: chartTooltipContentStyle,
+					itemStyle: chartTooltipItemStyle,
+					labelStyle: chartTooltipLabelStyle,
+					wrapperStyle: chartTooltipWrapperStyle
 				}),
 				/* @__PURE__ */ jsx(Legend, {
 					iconType: "circle",
-					wrapperStyle: {
-						fontSize: "12px",
-						color: "var(--color-neutral-300)"
-					}
+					wrapperStyle: chartLegendTextStyle
 				})
 			] })
-		})
+		}), shouldRenderCenterContent ? /* @__PURE__ */ jsx("div", {
+			className: "pointer-events-none absolute inset-0 flex items-center justify-center",
+			children: renderCenterContent ? renderCenterContent(centerContentContext) : /* @__PURE__ */ jsxs("div", {
+				className: "flex max-w-[42%] flex-col items-center text-center",
+				children: [
+					/* @__PURE__ */ jsx("p", {
+						className: "text-[11px] font-medium tracking-[0.16em] text-muted-foreground uppercase",
+						children: displayLabel
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "mt-1 text-2xl font-semibold leading-none text-foreground sm:text-3xl",
+						children: valueFormatter(displayValue)
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "mt-2 text-xs leading-tight text-muted-foreground",
+						children: activePercentage
+					})
+				]
+			})
+		}) : null]
 	});
 };
 //#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 };
+export { ThinBreakdownBar as a, chartColorTokens as c, AreaChart$1 as i, getChartColorVar as l, PositiveNegativeBarChart as n, StackedBarChart as o, BarChart$1 as r, NeonLineChart as s, PieChart$1 as t, getChartPalette as u };
 
-//# sourceMappingURL=charts-DugYWvEf.mjs.map
+//# sourceMappingURL=charts-BYvM4TMG.mjs.map