npm - erp-pro-ui - Versions diffs - 0.2.4 → 0.2.6 - Mend

erp-pro-ui 0.2.4 → 0.2.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (413) hide show

package/dist/chunks/chartStyles-DPXgYmGn.mjs ADDED Viewed

@@ -0,0 +1,55 @@
+//#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
+export { chartTooltipContentStyle as a, chartTooltipWrapperStyle as c, chartPillTooltipStyle as i, getChartActiveDotStyle as l, chartLegendTextStyle as n, chartTooltipItemStyle as o, chartLineHoverCursorStyle as r, chartTooltipLabelStyle as s, chartBandHoverCursorStyle as t };
+//# sourceMappingURL=chartStyles-DPXgYmGn.mjs.map

package/dist/chunks/chartStyles-DPXgYmGn.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"chartStyles-DPXgYmGn.mjs","names":[],"sources":["../../src/components/data-display/charts/chartStyles.ts"],"sourcesContent":["import React from \"react\";\n\nexport const chartTooltipContentStyle: React.CSSProperties = {\n background:\n \"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))\",\n border:\n \"1px solid color-mix(in srgb, var(--ds-color-border-strong) 72%, transparent)\",\n borderRadius: \"12px\",\n backdropFilter: \"blur(18px) saturate(180%)\",\n WebkitBackdropFilter: \"blur(18px) saturate(180%)\",\n boxShadow:\n \"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)\",\n color: \"var(--ds-color-fg)\",\n padding: \"0.75rem 0.875rem\",\n};\n\nexport const chartTooltipLabelStyle: React.CSSProperties = {\n color: \"var(--ds-color-fg)\",\n fontSize: \"0.8125rem\",\n fontWeight: 600,\n marginBottom: \"0.375rem\",\n};\n\nexport const chartTooltipItemStyle: React.CSSProperties = {\n color: \"var(--ds-color-fg)\",\n fontSize: \"0.8125rem\",\n fontWeight: 500,\n padding: 0,\n};\n\nexport const chartTooltipWrapperStyle: React.CSSProperties = {\n outline: \"none\",\n};\n\nexport const chartLegendTextStyle: React.CSSProperties = {\n fontSize: \"12px\",\n color: \"var(--ds-color-fg-muted)\",\n};\n\nexport const chartBandHoverCursorStyle = {\n fill: \"color-mix(in srgb, var(--ds-color-accent) 12%, transparent)\",\n stroke:\n \"color-mix(in srgb, var(--ds-color-accent) 34%, var(--ds-color-border-strong))\",\n strokeWidth: 1,\n};\n\nexport const chartLineHoverCursorStyle = {\n stroke:\n \"color-mix(in srgb, var(--ds-color-accent) 42%, var(--ds-color-border-strong))\",\n strokeWidth: 1.25,\n strokeDasharray: \"4 4\",\n};\n\nexport const getChartActiveDotStyle = (\n strokeColor: string,\n): {\n fill: string;\n r: number;\n stroke: string;\n strokeWidth: number;\n} => ({\n r: 6,\n fill: \"color-mix(in srgb, var(--ds-color-bg-surface) 90%, transparent)\",\n stroke: strokeColor,\n strokeWidth: 2.5,\n});\n\nexport const chartPillTooltipStyle: React.CSSProperties = {\n background:\n \"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))\",\n border:\n \"1px solid color-mix(in srgb, var(--ds-color-border-strong) 70%, transparent)\",\n boxShadow:\n \"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)\",\n backdropFilter: \"blur(16px) saturate(170%)\",\n WebkitBackdropFilter: \"blur(16px) saturate(170%)\",\n};\n"],"mappings":";AAEA,IAAa,2BAAgD;CAC3D,YACE;CACF,QACE;CACF,cAAc;CACd,gBAAgB;CAChB,sBAAsB;CACtB,WACE;CACF,OAAO;CACP,SAAS;CACV;AAED,IAAa,yBAA8C;CACzD,OAAO;CACP,UAAU;CACV,YAAY;CACZ,cAAc;CACf;AAED,IAAa,wBAA6C;CACxD,OAAO;CACP,UAAU;CACV,YAAY;CACZ,SAAS;CACV;AAED,IAAa,2BAAgD,EAC3D,SAAS,QACV;AAED,IAAa,uBAA4C;CACvD,UAAU;CACV,OAAO;CACR;AAED,IAAa,4BAA4B;CACvC,MAAM;CACN,QACE;CACF,aAAa;CACd;AAED,IAAa,4BAA4B;CACvC,QACE;CACF,aAAa;CACb,iBAAiB;CAClB;AAED,IAAa,0BACX,iBAMI;CACJ,GAAG;CACH,MAAM;CACN,QAAQ;CACR,aAAa;CACd;AAED,IAAa,wBAA6C;CACxD,YACE;CACF,QACE;CACF,WACE;CACF,gBAAgB;CAChB,sBAAsB;CACvB"}

package/dist/chunks/{charts-DkVu0rFc.mjs → charts-C-KQ3Nk5.mjs} RENAMED Viewed

@@ -1,4 +1,5 @@
-import { t as TruncatedText } from "./truncated-text-C9t9o9IA.mjs";
+import { a as chartTooltipContentStyle, c as chartTooltipWrapperStyle, i as chartPillTooltipStyle, l as getChartActiveDotStyle, n as chartLegendTextStyle, o as chartTooltipItemStyle, r as chartLineHoverCursorStyle, s as chartTooltipLabelStyle, t as chartBandHoverCursorStyle } from "./chartStyles-DPXgYmGn.mjs";
+import { t as TruncatedText } from "./truncated-text-DUYTW1KP.mjs";
 import React from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Area, AreaChart, Bar, BarChart, CartesianGrid, Cell, Legend, Line, LineChart, Pie, PieChart, Rectangle, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
@@ -106,58 +107,6 @@ 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]);
@@ -1013,4 +962,4 @@ var PieChart$1 = ({ data, colors, height = 300, className = "", variant = "donut
 //#endregion
 export { ThinBreakdownBar as a, NeonLineChart as c, getChartPalette as d, AreaChart$1 as i, chartColorTokens as l, PositiveNegativeBarChart as n, StackedBarChart as o, BarChart$1 as r, MiniNeonSparkline as s, PieChart$1 as t, getChartColorVar as u };
-//# sourceMappingURL=charts-DkVu0rFc.mjs.map
+//# sourceMappingURL=charts-C-KQ3Nk5.mjs.map

package/dist/chunks/charts-C-KQ3Nk5.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"charts-C-KQ3Nk5.mjs","names":[],"sources":["../../src/components/data-display/charts/chartPalette.ts","../../src/components/data-display/charts/NeonLineChart.tsx","../../src/components/data-display/charts/MiniNeonSparkline.tsx","../../src/components/data-display/charts/StackedBarChart.tsx","../../src/components/data-display/charts/ThinBreakdownBar.tsx","../../src/components/data-display/charts/AreaChart.tsx","../../src/components/data-display/charts/BarChart.tsx","../../src/components/data-display/charts/PositiveNegativeBarChart.tsx","../../src/components/data-display/charts/PieChart.tsx"],"sourcesContent":["const chartColorSlots = [\n 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15,\n] as const;\n\nexport type ChartColorSlot = (typeof chartColorSlots)[number];\nexport type ChartColorToken = `chart-${ChartColorSlot}`;\n\nexport const chartColorTokens = chartColorSlots.map(\n (slot) => `chart-${slot}` as ChartColorToken,\n);\n\nconst chartPalette = chartColorSlots.map((slot) => `var(--ds-chart-${slot})`);\n\ntype RgbColor = {\n r: number;\n g: number;\n b: number;\n};\n\nconst resolvedColorCache = new Map<string, RgbColor | null>();\n\nconst chartTokenPattern = /^chart-(\\d+)$/i;\nconst chartVariablePattern = /^--((?:ds|color)-chart-(\\d+))$/i;\n\nconst getChartSlotValue = (slot: ChartColorSlot | ChartColorToken): number =>\n typeof slot === \"number\" ? slot : Number(slot.replace(\"chart-\", \"\"));\n\nexport const getChartColorVar = (\n slot: ChartColorSlot | ChartColorToken,\n namespace: \"ds\" | \"color\" = \"ds\",\n): string => `var(--${namespace}-chart-${getChartSlotValue(slot)})`;\n\nexport const normalizeChartColorValue = (\n value?: string,\n): string | undefined => {\n const normalizedValue = value?.trim();\n\n if (!normalizedValue) {\n return undefined;\n }\n\n const tokenMatch = normalizedValue.match(chartTokenPattern);\n if (tokenMatch) {\n return `var(--ds-chart-${tokenMatch[1]})`;\n }\n\n const variableMatch = normalizedValue.match(chartVariablePattern);\n if (variableMatch) {\n return `var(--${variableMatch[1]})`;\n }\n\n return normalizedValue;\n};\n\nconst getThemeSignature = (): string => {\n if (typeof document === \"undefined\") return \"\";\n\n const root = document.documentElement;\n return [\n root.getAttribute(\"data-brand\") ?? \"\",\n root.getAttribute(\"data-mode\") ?? \"\",\n root.getAttribute(\"data-theme\") ?? \"\",\n ].join(\"|\");\n};\n\nconst resolveColor = (value: string): RgbColor | null => {\n if (typeof document === \"undefined\") return null;\n\n const cacheKey = `${getThemeSignature()}::${value}`;\n const cached = resolvedColorCache.get(cacheKey);\n if (cached !== undefined) {\n return cached;\n }\n\n const probe = document.createElement(\"span\");\n probe.style.color = value;\n probe.style.position = \"fixed\";\n probe.style.opacity = \"0\";\n probe.style.pointerEvents = \"none\";\n document.body.appendChild(probe);\n\n const computedColor = getComputedStyle(probe).color;\n document.body.removeChild(probe);\n\n const match = computedColor.match(/rgba?\\((\\d+),\\s*(\\d+),\\s*(\\d+)/i);\n\n const resolved = match\n ? {\n r: Number(match[1]),\n g: Number(match[2]),\n b: Number(match[3]),\n }\n : null;\n\n resolvedColorCache.set(cacheKey, resolved);\n return resolved;\n};\n\nconst getColorDistance = (left: RgbColor, right: RgbColor): number => {\n const deltaR = left.r - right.r;\n const deltaG = left.g - right.g;\n const deltaB = left.b - right.b;\n\n return Math.sqrt(deltaR ** 2 + deltaG ** 2 + deltaB ** 2);\n};\n\nconst isTooSimilar = (\n candidate: string,\n usedColors: readonly string[],\n minDistance = 84,\n): boolean => {\n if (usedColors.includes(candidate)) {\n return true;\n }\n\n const candidateRgb = resolveColor(candidate);\n if (!candidateRgb) {\n return false;\n }\n\n return usedColors.some((usedColor) => {\n const usedRgb = resolveColor(usedColor);\n return usedRgb\n ? getColorDistance(candidateRgb, usedRgb) < minDistance\n : false;\n });\n};\n\nexport const getChartPalette = (count = chartPalette.length): string[] =>\n Array.from(\n { length: count },\n (_, index) => chartPalette[index % chartPalette.length],\n );\n\nexport const normalizeChartColors = (\n requestedColors: readonly (string | undefined)[],\n): string[] => {\n const usedColors: string[] = [];\n let paletteIndex = 0;\n\n const getNextDistinctPaletteColor = (): string => {\n for (let attempt = 0; attempt < chartPalette.length; attempt++) {\n const candidate =\n chartPalette[(paletteIndex + attempt) % chartPalette.length];\n\n if (!isTooSimilar(candidate, usedColors)) {\n paletteIndex = (paletteIndex + attempt + 1) % chartPalette.length;\n return candidate;\n }\n }\n\n const fallback = chartPalette[paletteIndex % chartPalette.length];\n paletteIndex = (paletteIndex + 1) % chartPalette.length;\n return fallback;\n };\n\n return requestedColors.map((requestedColor) => {\n const normalizedRequestedColor = normalizeChartColorValue(requestedColor);\n const resolvedColor =\n normalizedRequestedColor &&\n !isTooSimilar(normalizedRequestedColor, usedColors)\n ? normalizedRequestedColor\n : getNextDistinctPaletteColor();\n\n usedColors.push(resolvedColor);\n return resolvedColor;\n });\n};\n","\"use client\";\n\nimport React from \"react\";\nimport {\n LineChart,\n Line,\n XAxis,\n YAxis,\n CartesianGrid,\n Tooltip,\n ResponsiveContainer,\n} from \"recharts\";\n\nimport {\n getChartColorVar,\n normalizeChartColorValue,\n normalizeChartColors,\n} from \"./chartPalette\";\nimport {\n chartLineHoverCursorStyle,\n chartTooltipContentStyle,\n chartTooltipItemStyle,\n chartTooltipLabelStyle,\n chartTooltipWrapperStyle,\n getChartActiveDotStyle,\n} from \"./chartStyles\";\n\ninterface DataPoint {\n name: string;\n value: number;\n}\n\ninterface NeonLineChartProps {\n data: DataPoint[];\n height?: number | string;\n lineColorStop1?: string;\n lineColorStop2?: string;\n className?: string;\n glowColor?: string;\n}\n\nexport const NeonLineChart: React.FC<NeonLineChartProps> = ({\n data,\n height = 300,\n lineColorStop1 = getChartColorVar(2),\n lineColorStop2 = getChartColorVar(1),\n glowColor = getChartColorVar(1),\n className = \"\",\n}) => {\n const [normalizedStop1, normalizedStop2] = React.useMemo(\n () => normalizeChartColors([lineColorStop1, lineColorStop2]),\n [lineColorStop1, lineColorStop2],\n );\n const normalizedGlowColor = React.useMemo(\n () => normalizeChartColorValue(glowColor) ?? getChartColorVar(1),\n [glowColor],\n );\n\n return (\n <div className={`w-full relative ${className}`} style={{ height }}>\n <ResponsiveContainer width=\"100%\" height=\"100%\">\n <LineChart\n data={data}\n margin={{ top: 20, right: 30, left: 10, bottom: 20 }}\n >\n <defs>\n {/* Linear Gradient for the Line */}\n <linearGradient id=\"neonGradient\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"0\">\n <stop offset=\"0%\" stopColor={normalizedStop1} />\n <stop offset=\"100%\" stopColor={normalizedStop2} />\n </linearGradient>\n\n {/* Glowing Drop Shadow Filter */}\n <filter id=\"neonGlow\" x=\"-20%\" y=\"-20%\" width=\"140%\" height=\"140%\">\n <feDropShadow\n dx=\"0\"\n dy=\"6\"\n stdDeviation=\"8\"\n floodColor={normalizedGlowColor}\n floodOpacity=\"0.8\"\n />\n <feDropShadow\n dx=\"0\"\n dy=\"0\"\n stdDeviation=\"15\"\n floodColor={normalizedStop1}\n floodOpacity=\"0.3\"\n />\n </filter>\n </defs>\n\n {/* Minimal Grid */}\n <CartesianGrid\n strokeDasharray=\"3 3\"\n vertical={false}\n stroke=\"var(--ds-color-border)\"\n opacity={0.5}\n />\n\n <XAxis\n dataKey=\"name\"\n axisLine={false}\n tickLine={false}\n tick={{ fill: \"var(--ds-color-fg-muted)\", fontSize: 12 }}\n dy={10}\n />\n\n <YAxis\n axisLine={false}\n tickLine={false}\n tick={{ fill: \"var(--ds-color-fg-muted)\", fontSize: 12 }}\n dx={-10}\n />\n\n <Tooltip\n contentStyle={chartTooltipContentStyle}\n cursor={chartLineHoverCursorStyle}\n itemStyle={chartTooltipItemStyle}\n labelStyle={chartTooltipLabelStyle}\n wrapperStyle={chartTooltipWrapperStyle}\n />\n\n {/* The Neon Line */}\n <Line\n type=\"monotone\"\n dataKey=\"value\"\n stroke=\"url(#neonGradient)\"\n strokeWidth={3}\n dot={false}\n activeDot={getChartActiveDotStyle(normalizedStop2)}\n filter=\"url(#neonGlow)\"\n />\n </LineChart>\n </ResponsiveContainer>\n </div>\n );\n};\n","\"use client\";\n\nimport React from \"react\";\nimport { Area, AreaChart, Line, ResponsiveContainer, Tooltip } from \"recharts\";\n\nimport { getChartColorVar, normalizeChartColorValue } from \"./chartPalette\";\n\nexport interface MiniNeonSparklinePoint {\n label: string;\n value: number;\n}\n\nexport type MiniNeonSparklineTone =\n | \"default\"\n | \"success\"\n | \"warning\"\n | \"danger\"\n | \"info\";\n\nexport interface MiniNeonSparklineProps {\n data: MiniNeonSparklinePoint[];\n height?: number;\n strokeWidth?: number;\n className?: string;\n showArea?: boolean;\n showTooltip?: boolean;\n tone?: MiniNeonSparklineTone;\n}\n\nconst toneColorMap: Record<MiniNeonSparklineTone, string> = {\n default: getChartColorVar(1),\n success: \"var(--ds-color-success)\",\n warning: \"var(--ds-color-warning)\",\n danger: \"var(--ds-color-danger)\",\n info: \"var(--ds-color-info)\",\n};\n\nconst tooltipContentStyle: React.CSSProperties = {\n borderRadius: \"12px\",\n border: \"1px solid var(--ds-border-2)\",\n background: \"var(--ds-surface-1)\",\n color: \"var(--ds-text-1)\",\n fontSize: \"12px\",\n};\n\nexport const MiniNeonSparkline: React.FC<MiniNeonSparklineProps> = ({\n data,\n height = 46,\n strokeWidth = 2,\n className = \"\",\n showArea = true,\n showTooltip = true,\n tone = \"default\",\n}) => {\n const resolvedTone = React.useMemo(\n () => normalizeChartColorValue(toneColorMap[tone]) ?? toneColorMap.default,\n [tone],\n );\n\n const chartGradientId = React.useId();\n const chartGlowId = React.useId();\n\n return (\n <div className={`ui:relative ui:w-full ${className}`} style={{ height }}>\n <ResponsiveContainer width=\"100%\" height=\"100%\">\n <AreaChart\n data={data}\n margin={{ top: 4, right: 2, left: 2, bottom: 4 }}\n >\n <defs>\n <linearGradient id={chartGradientId} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop offset=\"0%\" stopColor={resolvedTone} stopOpacity={0.35} />\n <stop offset=\"100%\" stopColor={resolvedTone} stopOpacity={0.02} />\n </linearGradient>\n <filter\n id={chartGlowId}\n x=\"-20%\"\n y=\"-20%\"\n width=\"140%\"\n height=\"140%\"\n >\n <feDropShadow\n dx=\"0\"\n dy=\"2\"\n stdDeviation=\"3\"\n floodColor={resolvedTone}\n floodOpacity=\"0.45\"\n />\n </filter>\n </defs>\n\n {showArea ? (\n <Area\n type=\"monotone\"\n dataKey=\"value\"\n stroke=\"none\"\n fill={`url(#${chartGradientId})`}\n />\n ) : null}\n\n <Line\n type=\"monotone\"\n dataKey=\"value\"\n stroke={resolvedTone}\n strokeWidth={strokeWidth}\n dot={false}\n isAnimationActive={false}\n filter={`url(#${chartGlowId})`}\n />\n\n {showTooltip ? (\n <Tooltip\n contentStyle={tooltipContentStyle}\n labelStyle={{ color: \"var(--ds-text-2)\", marginBottom: \"4px\" }}\n itemStyle={{ color: \"var(--ds-text-1)\", fontWeight: 600 }}\n formatter={(value) => [String(value ?? \"\"), \"Value\"]}\n />\n ) : null}\n </AreaChart>\n </ResponsiveContainer>\n </div>\n );\n};\n","\"use client\";\n\nimport React from \"react\";\nimport {\n BarChart as RechartsBarChart,\n Bar,\n XAxis,\n YAxis,\n CartesianGrid,\n Tooltip,\n Legend,\n ResponsiveContainer,\n} from \"recharts\";\n\nimport { normalizeChartColors } from \"./chartPalette\";\nimport {\n chartBandHoverCursorStyle,\n chartLegendTextStyle,\n chartTooltipContentStyle,\n chartTooltipItemStyle,\n chartTooltipLabelStyle,\n chartTooltipWrapperStyle,\n} from \"./chartStyles\";\n\nexport interface StackedBarData {\n name: string;\n [key: string]: string | number;\n}\n\ninterface StackedBarChartProps {\n data: StackedBarData[];\n categories: { key: string; color: string; label: string }[];\n height?: number | string;\n yAxisDomain?: [number, number];\n className?: string;\n}\n\nexport const StackedBarChart: React.FC<StackedBarChartProps> = ({\n data,\n categories,\n height = 300,\n yAxisDomain,\n className = \"\",\n}) => {\n const normalizedCategories = React.useMemo(() => {\n const normalizedColors = normalizeChartColors(\n categories.map((category) => category.color),\n );\n\n return categories.map((category, index) => ({\n ...category,\n color: normalizedColors[index] ?? category.color,\n }));\n }, [categories]);\n\n return (\n <div className={`w-full ${className}`} style={{ height }}>\n <ResponsiveContainer width=\"100%\" height=\"100%\">\n <RechartsBarChart\n data={data}\n margin={{ top: 20, right: 30, left: 20, bottom: 5 }}\n >\n <CartesianGrid\n strokeDasharray=\"3 3\"\n vertical={false}\n stroke=\"var(--ds-color-border)\"\n opacity={0.4}\n />\n <XAxis\n dataKey=\"name\"\n axisLine={false}\n tickLine={false}\n tick={{ fill: \"var(--ds-color-fg-muted)\", fontSize: 12 }}\n dy={10}\n />\n <YAxis\n axisLine={false}\n tickLine={false}\n tick={{ fill: \"var(--ds-color-fg-muted)\", fontSize: 12 }}\n dx={-10}\n domain={yAxisDomain}\n />\n <Tooltip\n contentStyle={chartTooltipContentStyle}\n cursor={chartBandHoverCursorStyle}\n itemStyle={chartTooltipItemStyle}\n labelStyle={chartTooltipLabelStyle}\n wrapperStyle={chartTooltipWrapperStyle}\n />\n <Legend\n iconType=\"circle\"\n wrapperStyle={{\n ...chartLegendTextStyle,\n paddingTop: \"20px\",\n }}\n />\n\n {normalizedCategories.map((cat, index) => {\n // Apply rounded radius only to the top bar in the stack\n const isTop = index === normalizedCategories.length - 1;\n const radius: [number, number, number, number] = isTop\n ? [6, 6, 0, 0]\n : [0, 0, 0, 0];\n\n return (\n <Bar\n key={cat.key}\n dataKey={cat.key}\n name={cat.label}\n stackId=\"a\"\n fill={cat.color}\n radius={radius}\n barSize={32}\n />\n );\n })}\n </RechartsBarChart>\n </ResponsiveContainer>\n </div>\n );\n};\n","\"use client\";\n\nimport React from \"react\";\n\nimport { TruncatedText } from \"../../typography/truncated-text\";\nimport { normalizeChartColors } from \"./chartPalette\";\nimport { chartPillTooltipStyle } from \"./chartStyles\";\n\nexport interface BreakdownSegment {\n id?: string;\n label: string;\n value: number; // The absolute value or percentage\n color: string;\n}\n\ninterface ThinBreakdownBarProps {\n data: BreakdownSegment[];\n className?: string;\n showLabels?: boolean;\n showSummary?: boolean;\n summaryLabel?: string;\n valueFormatter?: (value: number) => string;\n}\n\nconst defaultValueFormatter = (value: number): string =>\n new Intl.NumberFormat().format(value);\n\nexport const ThinBreakdownBar: React.FC<ThinBreakdownBarProps> = ({\n data: segments,\n className = \"\",\n showLabels = true,\n showSummary = false,\n summaryLabel = \"Total\",\n valueFormatter = defaultValueFormatter,\n}) => {\n const [activeSegmentKey, setActiveSegmentKey] = React.useState<string | null>(\n null,\n );\n\n const normalizedSegments = React.useMemo(() => {\n const normalizedColors = normalizeChartColors(\n segments.map((segment) => segment.color),\n );\n\n const totalValue = segments.reduce((sum, item) => sum + item.value, 0);\n\n return segments.map((segment, index) => ({\n ...segment,\n key: segment.id || `segment-${index}`,\n color: normalizedColors[index] ?? segment.color,\n widthPercent:\n totalValue > 0 ? Math.max((segment.value / totalValue) * 100, 0) : 0,\n }));\n }, [segments]);\n\n const segmentsWithMetrics = React.useMemo(() => {\n let runningPercent = 0;\n\n return normalizedSegments.map((segment) => {\n const nextSegment = {\n ...segment,\n centerPercent: runningPercent + segment.widthPercent / 2,\n };\n\n runningPercent += segment.widthPercent;\n return nextSegment;\n });\n }, [normalizedSegments]);\n\n const activeSegment = React.useMemo(\n () =>\n segmentsWithMetrics.find((segment) => segment.key === activeSegmentKey) ??\n null,\n [activeSegmentKey, segmentsWithMetrics],\n );\n const totalValue = React.useMemo(\n () => segments.reduce((sum, item) => sum + item.value, 0),\n [segments],\n );\n const summaryTitle = activeSegment?.label ?? summaryLabel;\n const summaryValue = activeSegment?.value ?? totalValue;\n const summaryMeta = activeSegment\n ? `${Math.round(activeSegment.widthPercent)}% of total`\n : `${segments.length} segments`;\n\n return (\n <div className={`w-full flex flex-col gap-3 ${className}`}>\n {showSummary && (activeSegment || totalValue > 0) ? (\n <div className=\"flex items-start justify-between gap-4 rounded-xl border border-ds-border-2/70 bg-ds-canvas/70 px-4 py-3 backdrop-blur-md\">\n <div className=\"min-w-0\">\n <TruncatedText\n as=\"p\"\n showTitleOnHover\n className=\"truncate text-[11px] font-medium tracking-[0.16em] text-ds-2 uppercase transition-colors duration-200\"\n style={activeSegment ? { color: activeSegment.color } : undefined}\n >\n {summaryTitle}\n </TruncatedText>\n <p className=\"mt-1 text-xs text-ds-2\">{summaryMeta}</p>\n </div>\n <p\n className=\"text-right text-lg font-semibold leading-none text-ds-1 transition-colors duration-200\"\n style={activeSegment ? { color: activeSegment.color } : undefined}\n >\n {valueFormatter(summaryValue)}\n </p>\n </div>\n ) : null}\n\n <div className=\"relative\">\n {activeSegment && !showSummary && (\n <div\n 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-ds-1\"\n style={{\n ...chartPillTooltipStyle,\n left: `${activeSegment.centerPercent}%`,\n }}\n >\n <span>{activeSegment.label}</span>\n <span className=\"mx-1 text-ds-2\">•</span>\n <span style={{ color: activeSegment.color }}>\n {activeSegment.value}\n </span>\n </div>\n )}\n\n <div className=\"rounded-full bg-ds-surface-2/80 p-0.5\">\n <div\n className=\"flex w-full gap-1\"\n onMouseLeave={() => setActiveSegmentKey(null)}\n >\n {segmentsWithMetrics.map((segment) => {\n const isActive = activeSegmentKey === segment.key;\n\n return (\n <div\n key={segment.key}\n className=\"relative flex h-2.5 min-w-0 items-center\"\n style={{ width: `${segment.widthPercent}%` }}\n onMouseEnter={() => setActiveSegmentKey(segment.key)}\n >\n <div\n className=\"h-full w-full rounded-full transition-[transform,filter,box-shadow,opacity] duration-200 ease-out\"\n style={{\n backgroundColor: segment.color,\n opacity: activeSegmentKey && !isActive ? 0.72 : 1,\n transform: isActive ? \"scaleY(1.3)\" : \"scaleY(1)\",\n filter: isActive\n ? \"saturate(1.1) brightness(1.05)\"\n : \"none\",\n boxShadow: isActive\n ? `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)`\n : `inset 0 1px 1px rgba(255,255,255,0.2), 0 0 8px color-mix(in srgb, ${segment.color} 30%, transparent)`,\n }}\n title={`${segment.label}: ${segment.value}`}\n />\n </div>\n );\n })}\n </div>\n </div>\n </div>\n\n {showLabels && (\n <div className=\"flex w-full items-start gap-1 px-0.5\">\n {segmentsWithMetrics.map((segment) => {\n const isActive = activeSegmentKey === segment.key;\n\n return (\n <div\n key={`label-${segment.key}`}\n className=\"flex min-w-0 justify-center\"\n style={{ width: `${segment.widthPercent}%` }}\n >\n <span\n className=\"whitespace-nowrap px-1 text-center text-[11px] font-medium tracking-wide text-ds-2 transition-colors duration-200\"\n style={isActive ? { color: segment.color } : undefined}\n >\n {segment.label}\n </span>\n </div>\n );\n })}\n </div>\n )}\n </div>\n );\n};\n","\"use client\";\n\nimport React from \"react\";\nimport {\n AreaChart as RechartsAreaChart,\n Area,\n XAxis,\n YAxis,\n CartesianGrid,\n Tooltip,\n ResponsiveContainer,\n} from \"recharts\";\n\nimport { normalizeChartColors } from \"./chartPalette\";\nimport {\n chartLineHoverCursorStyle,\n chartTooltipContentStyle,\n chartTooltipItemStyle,\n chartTooltipLabelStyle,\n chartTooltipWrapperStyle,\n getChartActiveDotStyle,\n} from \"./chartStyles\";\n\nexport interface AreaChartData {\n name: string;\n [key: string]: string | number;\n}\n\ninterface AreaChartProps {\n data: AreaChartData[];\n categories: { key: string; color: string }[];\n height?: number | string;\n className?: string;\n showGrid?: boolean;\n}\n\nexport const AreaChart: React.FC<AreaChartProps> = ({\n data,\n categories,\n height = 300,\n className = \"\",\n showGrid = true,\n}) => {\n const normalizedCategories = React.useMemo(() => {\n const normalizedColors = normalizeChartColors(\n categories.map((category) => category.color),\n );\n\n return categories.map((category, index) => ({\n ...category,\n color: normalizedColors[index] ?? category.color,\n }));\n }, [categories]);\n\n return (\n <div className={`w-full ${className}`} style={{ height }}>\n <ResponsiveContainer width=\"100%\" height=\"100%\">\n <RechartsAreaChart\n data={data}\n margin={{ top: 10, right: 30, left: 0, bottom: 0 }}\n >\n <defs>\n {normalizedCategories.map((cat) => (\n <linearGradient\n key={`gradient-${cat.key}`}\n id={`color-${cat.key}`}\n x1=\"0\"\n y1=\"0\"\n x2=\"0\"\n y2=\"1\"\n >\n <stop offset=\"5%\" stopColor={cat.color} stopOpacity={0.3} />\n <stop offset=\"95%\" stopColor={cat.color} stopOpacity={0} />\n </linearGradient>\n ))}\n </defs>\n\n {showGrid && (\n <CartesianGrid\n strokeDasharray=\"3 3\"\n vertical={false}\n stroke=\"var(--ds-color-border)\"\n opacity={0.5}\n />\n )}\n\n <XAxis\n dataKey=\"name\"\n axisLine={false}\n tickLine={false}\n tick={{ fill: \"var(--ds-color-fg-muted)\", fontSize: 12 }}\n dy={10}\n />\n\n <YAxis\n axisLine={false}\n tickLine={false}\n tick={{ fill: \"var(--ds-color-fg-muted)\", fontSize: 12 }}\n dx={-10}\n />\n\n <Tooltip\n contentStyle={chartTooltipContentStyle}\n cursor={chartLineHoverCursorStyle}\n itemStyle={chartTooltipItemStyle}\n labelStyle={chartTooltipLabelStyle}\n wrapperStyle={chartTooltipWrapperStyle}\n />\n\n {normalizedCategories.map((cat) => (\n <Area\n key={cat.key}\n activeDot={getChartActiveDotStyle(cat.color)}\n type=\"monotone\"\n dataKey={cat.key}\n stroke={cat.color}\n strokeWidth={2}\n fillOpacity={1}\n fill={`url(#color-${cat.key})`}\n />\n ))}\n </RechartsAreaChart>\n </ResponsiveContainer>\n </div>\n );\n};\n","\"use client\";\n\nimport React from \"react\";\nimport {\n BarChart as RechartsBarChart,\n Bar,\n XAxis,\n YAxis,\n CartesianGrid,\n Tooltip,\n ResponsiveContainer,\n} from \"recharts\";\n\nimport { normalizeChartColors } from \"./chartPalette\";\nimport {\n chartBandHoverCursorStyle,\n chartTooltipContentStyle,\n chartTooltipItemStyle,\n chartTooltipLabelStyle,\n chartTooltipWrapperStyle,\n} from \"./chartStyles\";\n\nexport interface BarChartData {\n name: string;\n [key: string]: string | number;\n}\n\ninterface BarChartProps {\n data: BarChartData[];\n categories: { key: string; color: string }[];\n height?: number | string;\n className?: string;\n layout?: \"horizontal\" | \"vertical\";\n maxBarSize?: number;\n /**\n * Compact mode — strips axes, grid, tooltip, and margins.\n * Designed for small sparkline-style zones (e.g. StatCard md, ~130×68 px).\n */\n compact?: boolean;\n}\n\nexport const BarChart: React.FC<BarChartProps> = ({\n data,\n categories,\n height = 300,\n className = \"\",\n layout = \"horizontal\",\n maxBarSize,\n compact = false,\n}) => {\n const resolvedMaxBarSize = maxBarSize ?? (compact ? 8 : layout === \"horizontal\" ? 40 : 22);\n\n const normalizedCategories = React.useMemo(() => {\n const normalizedColors = normalizeChartColors(\n categories.map((category) => category.color),\n );\n\n return categories.map((category, index) => ({\n ...category,\n color: normalizedColors[index] ?? category.color,\n }));\n }, [categories]);\n\n if (compact) {\n return (\n <div className={`w-full h-full ${className}`} style={{ height }}>\n <ResponsiveContainer width=\"100%\" height=\"100%\">\n <RechartsBarChart\n data={data}\n layout={layout}\n barCategoryGap=\"20%\"\n margin={{ top: 2, right: 2, left: 2, bottom: 2 }}\n >\n <Tooltip\n contentStyle={chartTooltipContentStyle}\n cursor={chartBandHoverCursorStyle}\n itemStyle={chartTooltipItemStyle}\n labelStyle={chartTooltipLabelStyle}\n wrapperStyle={chartTooltipWrapperStyle}\n />\n {normalizedCategories.map((cat) => (\n <Bar\n key={cat.key}\n dataKey={cat.key}\n fill={cat.color}\n maxBarSize={resolvedMaxBarSize}\n radius={[3, 3, 0, 0]}\n />\n ))}\n </RechartsBarChart>\n </ResponsiveContainer>\n </div>\n );\n }\n\n return (\n <div className={`w-full ${className}`} style={{ height }}>\n <ResponsiveContainer width=\"100%\" height=\"100%\">\n <RechartsBarChart\n data={data}\n layout={layout}\n barCategoryGap={data.length <= 4 ? \"28%\" : \"18%\"}\n margin={{ top: 20, right: 30, left: 20, bottom: 5 }}\n >\n <CartesianGrid\n strokeDasharray=\"3 3\"\n horizontal={layout === \"horizontal\"}\n vertical={layout === \"vertical\"}\n stroke=\"var(--ds-color-border)\"\n opacity={0.4}\n />\n\n {layout === \"horizontal\" ? (\n <>\n <XAxis\n dataKey=\"name\"\n axisLine={false}\n tickLine={false}\n tick={{ fill: \"var(--ds-color-fg-muted)\", fontSize: 12 }}\n dy={10}\n />\n <YAxis\n axisLine={false}\n tickLine={false}\n tick={{ fill: \"var(--ds-color-fg-muted)\", fontSize: 12 }}\n dx={-10}\n />\n </>\n ) : (\n <>\n <XAxis\n type=\"number\"\n axisLine={false}\n tickLine={false}\n tick={{ fill: \"var(--ds-color-fg-muted)\", fontSize: 12 }}\n dy={10}\n />\n <YAxis\n dataKey=\"name\"\n type=\"category\"\n axisLine={false}\n tickLine={false}\n tick={{ fill: \"var(--ds-color-fg-muted)\", fontSize: 12 }}\n dx={-10}\n />\n </>\n )}\n\n <Tooltip\n contentStyle={chartTooltipContentStyle}\n cursor={chartBandHoverCursorStyle}\n itemStyle={chartTooltipItemStyle}\n labelStyle={chartTooltipLabelStyle}\n wrapperStyle={chartTooltipWrapperStyle}\n />\n\n {normalizedCategories.map((cat) => (\n <Bar\n key={cat.key}\n dataKey={cat.key}\n fill={cat.color}\n maxBarSize={resolvedMaxBarSize}\n radius={layout === \"horizontal\" ? [4, 4, 0, 0] : [0, 4, 4, 0]}\n />\n ))}\n </RechartsBarChart>\n </ResponsiveContainer>\n </div>\n );\n};\n","\"use client\";\n\nimport React from \"react\";\nimport {\n Bar,\n BarChart as RechartsBarChart,\n CartesianGrid,\n Cell,\n Rectangle,\n ReferenceLine,\n ResponsiveContainer,\n Tooltip,\n XAxis,\n YAxis,\n} from \"recharts\";\n\nimport { getChartColorVar, normalizeChartColorValue } from \"./chartPalette\";\nimport {\n chartBandHoverCursorStyle,\n chartTooltipContentStyle,\n chartTooltipItemStyle,\n chartTooltipLabelStyle,\n chartTooltipWrapperStyle,\n} from \"./chartStyles\";\n\nexport interface PositiveNegativeBarChartData {\n name: string;\n value: number;\n}\n\ninterface PositiveNegativeBarChartProps {\n data: PositiveNegativeBarChartData[];\n height?: number | string;\n className?: string;\n layout?: \"horizontal\" | \"vertical\";\n positiveColor?: string;\n negativeColor?: string;\n neutralColor?: string;\n showGrid?: boolean;\n seriesLabel?: string;\n valueFormatter?: (value: number) => string;\n tickFormatter?: (value: number) => string;\n}\n\nconst defaultValueFormatter = (value: number): string =>\n new Intl.NumberFormat().format(value);\n\nconst getBarRadius = (\n value: number,\n layout: \"horizontal\" | \"vertical\",\n): [number, number, number, number] => {\n if (value === 0) {\n return [6, 6, 6, 6];\n }\n\n if (layout === \"horizontal\") {\n return [6, 6, 0, 0];\n }\n\n return value > 0 ? [0, 6, 6, 0] : [6, 0, 0, 6];\n};\n\nexport const PositiveNegativeBarChart: React.FC<\n PositiveNegativeBarChartProps\n> = ({\n data,\n height = 320,\n className = \"\",\n layout = \"horizontal\",\n positiveColor = getChartColorVar(3),\n negativeColor = getChartColorVar(5),\n neutralColor = getChartColorVar(15),\n showGrid = true,\n seriesLabel = \"Variance\",\n valueFormatter = defaultValueFormatter,\n tickFormatter,\n}) => {\n const resolvedPositiveColor = React.useMemo(\n () => normalizeChartColorValue(positiveColor) ?? getChartColorVar(3),\n [positiveColor],\n );\n const resolvedNegativeColor = React.useMemo(\n () => normalizeChartColorValue(negativeColor) ?? getChartColorVar(5),\n [negativeColor],\n );\n const resolvedNeutralColor = React.useMemo(\n () => normalizeChartColorValue(neutralColor) ?? getChartColorVar(15),\n [neutralColor],\n );\n\n const resolvedTickFormatter = React.useCallback(\n (value: number) => tickFormatter?.(value) ?? valueFormatter(value),\n [tickFormatter, valueFormatter],\n );\n\n const getBarFill = React.useCallback(\n (value: number) => {\n if (value > 0) {\n return resolvedPositiveColor;\n }\n\n if (value < 0) {\n return resolvedNegativeColor;\n }\n\n return resolvedNeutralColor;\n },\n [resolvedNegativeColor, resolvedNeutralColor, resolvedPositiveColor],\n );\n\n return (\n <div className={`w-full ${className}`} style={{ height }}>\n <ResponsiveContainer width=\"100%\" height=\"100%\">\n <RechartsBarChart\n data={data}\n layout={layout}\n margin={{ top: 20, right: 30, left: 20, bottom: 5 }}\n >\n {showGrid ? (\n <CartesianGrid\n strokeDasharray=\"3 3\"\n horizontal={layout === \"horizontal\"}\n vertical={layout === \"vertical\"}\n stroke=\"var(--ds-color-border)\"\n opacity={0.35}\n />\n ) : null}\n\n {layout === \"horizontal\" ? (\n <>\n <XAxis\n dataKey=\"name\"\n axisLine={false}\n tickLine={false}\n tick={{ fill: \"var(--ds-color-fg-muted)\", fontSize: 12 }}\n dy={10}\n />\n <YAxis\n axisLine={false}\n tickLine={false}\n tick={{ fill: \"var(--ds-color-fg-muted)\", fontSize: 12 }}\n tickFormatter={resolvedTickFormatter}\n dx={-10}\n />\n <ReferenceLine\n y={0}\n stroke=\"var(--ds-color-border-strong)\"\n strokeOpacity={0.95}\n />\n </>\n ) : (\n <>\n <XAxis\n type=\"number\"\n axisLine={false}\n tickLine={false}\n tick={{ fill: \"var(--ds-color-fg-muted)\", fontSize: 12 }}\n tickFormatter={resolvedTickFormatter}\n dy={10}\n />\n <YAxis\n dataKey=\"name\"\n type=\"category\"\n axisLine={false}\n tickLine={false}\n tick={{ fill: \"var(--ds-color-fg-muted)\", fontSize: 12 }}\n width={96}\n dx={-6}\n />\n <ReferenceLine\n x={0}\n stroke=\"var(--ds-color-border-strong)\"\n strokeOpacity={0.95}\n />\n </>\n )}\n\n <Tooltip\n contentStyle={chartTooltipContentStyle}\n cursor={chartBandHoverCursorStyle}\n itemStyle={chartTooltipItemStyle}\n labelStyle={chartTooltipLabelStyle}\n wrapperStyle={chartTooltipWrapperStyle}\n formatter={(value) => [\n valueFormatter(Number(value ?? 0)),\n seriesLabel,\n ]}\n />\n\n <Bar\n dataKey=\"value\"\n radius={6}\n barSize={layout === \"horizontal\" ? 30 : 22}\n shape={(props) => {\n const barValue = Array.isArray(props.value)\n ? props.value[1] - props.value[0]\n : props.value;\n\n return (\n <Rectangle {...props} radius={getBarRadius(barValue, layout)} />\n );\n }}\n >\n {data.map((entry) => (\n <Cell\n key={`${entry.name}-${entry.value}`}\n fill={getBarFill(entry.value)}\n />\n ))}\n </Bar>\n </RechartsBarChart>\n </ResponsiveContainer>\n </div>\n );\n};\n","\"use client\";\n\nimport React from \"react\";\nimport {\n PieChart as RechartsPieChart,\n Pie,\n Cell,\n Tooltip,\n Legend,\n ResponsiveContainer,\n} from \"recharts\";\n\nimport { normalizeChartColors } from \"./chartPalette\";\nimport {\n chartLegendTextStyle,\n chartTooltipContentStyle,\n chartTooltipItemStyle,\n chartTooltipLabelStyle,\n chartTooltipWrapperStyle,\n} from \"./chartStyles\";\n\nexport interface PieChartData {\n name: string;\n value: number;\n}\n\nexport interface PieChartCenterContentContext {\n activeColor?: string;\n activeIndex: number | null;\n activeSlice: PieChartData | null;\n data: PieChartData[];\n displayLabel: string;\n displayPercentageLabel: string;\n displayValue: number;\n normalizedColors: string[];\n totalValue: number;\n valueFormatter: (value: number) => string;\n variant: \"pie\" | \"donut\";\n}\n\nexport interface PieChartProps {\n data: PieChartData[];\n colors: string[];\n height?: number | string;\n className?: string;\n variant?: \"pie\" | \"donut\";\n showCenterSummary?: boolean;\n centerLabel?: string;\n valueFormatter?: (value: number) => string;\n renderCenterContent?: (\n context: PieChartCenterContentContext,\n ) => React.ReactNode;\n}\n\nconst defaultValueFormatter = (value: number): string =>\n new Intl.NumberFormat().format(value);\n\nexport const PieChart: React.FC<PieChartProps> = ({\n data,\n colors,\n height = 300,\n className = \"\",\n variant = \"donut\",\n showCenterSummary = variant === \"donut\",\n centerLabel = \"Total\",\n valueFormatter = defaultValueFormatter,\n renderCenterContent,\n}) => {\n const [activeIndex, setActiveIndex] = React.useState<number | null>(null);\n const innerRadius = variant === \"donut\" ? \"60%\" : 0;\n const normalizedColors = React.useMemo(\n () => normalizeChartColors(colors),\n [colors],\n );\n const totalValue = React.useMemo(\n () => data.reduce((sum, item) => sum + item.value, 0),\n [data],\n );\n const activeSlice =\n activeIndex !== null && activeIndex >= 0 && activeIndex < data.length\n ? data[activeIndex]\n : null;\n const activePercentage =\n activeSlice && totalValue > 0\n ? `${Math.round((activeSlice.value / totalValue) * 100)}% of total`\n : `${data.length} categories`;\n const displayLabel = activeSlice?.name ?? centerLabel;\n const displayValue = activeSlice?.value ?? totalValue;\n const activeColor =\n activeIndex !== null\n ? normalizedColors[activeIndex % normalizedColors.length]\n : undefined;\n const centerContentContext: PieChartCenterContentContext = {\n activeColor,\n activeIndex,\n activeSlice,\n data,\n displayLabel,\n displayPercentageLabel: activePercentage,\n displayValue,\n normalizedColors,\n totalValue,\n valueFormatter,\n variant,\n };\n const shouldRenderCenterContent =\n variant === \"donut\" && (showCenterSummary || Boolean(renderCenterContent));\n\n return (\n <div className={`relative w-full ${className}`} style={{ height }}>\n <ResponsiveContainer width=\"100%\" height=\"100%\">\n <RechartsPieChart>\n <Pie\n data={data}\n cx=\"50%\"\n cy=\"50%\"\n innerRadius={innerRadius}\n outerRadius=\"80%\"\n paddingAngle={variant === \"donut\" ? 2 : 0}\n dataKey=\"value\"\n stroke=\"none\"\n onMouseEnter={(_data: unknown, index: number) =>\n setActiveIndex(index)\n }\n onMouseLeave={() => setActiveIndex(null)}\n >\n {data.map((entry, index) => (\n <Cell\n key={`cell-${index}`}\n fill={normalizedColors[index % normalizedColors.length]}\n />\n ))}\n </Pie>\n\n <Tooltip\n contentStyle={chartTooltipContentStyle}\n itemStyle={chartTooltipItemStyle}\n labelStyle={chartTooltipLabelStyle}\n wrapperStyle={chartTooltipWrapperStyle}\n />\n\n <Legend iconType=\"circle\" wrapperStyle={chartLegendTextStyle} />\n </RechartsPieChart>\n </ResponsiveContainer>\n\n {shouldRenderCenterContent ? (\n <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n {renderCenterContent ? (\n renderCenterContent(centerContentContext)\n ) : (\n <div className=\"flex max-w-[42%] flex-col items-center text-center\">\n <p className=\"text-[11px] font-medium tracking-[0.16em] text-ds-2 uppercase\">\n {displayLabel}\n </p>\n <p className=\"mt-1 text-2xl font-semibold leading-none text-ds-1 sm:text-3xl\">\n {valueFormatter(displayValue)}\n </p>\n <p className=\"mt-2 text-xs leading-tight text-ds-2\">\n {activePercentage}\n </p>\n </div>\n )}\n </div>\n ) : null}\n </div>\n );\n};\n"],"mappings":"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"}

package/dist/chunks/{charts-BmIV-mJy.cjs → charts-COx3IbI2.cjs} RENAMED Viewed

@@ -1,5 +1,6 @@
 const require_chunk = require("./chunk-B_GkZjkl.cjs");
-const require_truncated_text = require("./truncated-text-BIXqNfOL.cjs");
+const require_chartStyles = require("./chartStyles-BADmRKZo.cjs");
+const require_truncated_text = require("./truncated-text-CswjmrHZ.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -108,58 +109,6 @@ 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.default.useMemo(() => normalizeChartColors([lineColorStop1, lineColorStop2]), [lineColorStop1, lineColorStop2]);
@@ -238,11 +187,11 @@ var NeonLineChart = ({ data, height = 300, lineColorStop1 = getChartColorVar(2),
 						dx: -10
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Tooltip, {
-						contentStyle: chartTooltipContentStyle,
-						cursor: chartLineHoverCursorStyle,
-						itemStyle: chartTooltipItemStyle,
-						labelStyle: chartTooltipLabelStyle,
-						wrapperStyle: chartTooltipWrapperStyle
+						contentStyle: require_chartStyles.chartTooltipContentStyle,
+						cursor: require_chartStyles.chartLineHoverCursorStyle,
+						itemStyle: require_chartStyles.chartTooltipItemStyle,
+						labelStyle: require_chartStyles.chartTooltipLabelStyle,
+						wrapperStyle: require_chartStyles.chartTooltipWrapperStyle
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Line, {
 						type: "monotone",
@@ -250,7 +199,7 @@ var NeonLineChart = ({ data, height = 300, lineColorStop1 = getChartColorVar(2),
 						stroke: "url(#neonGradient)",
 						strokeWidth: 3,
 						dot: false,
-						activeDot: getChartActiveDotStyle(normalizedStop2),
+						activeDot: require_chartStyles.getChartActiveDotStyle(normalizedStop2),
 						filter: "url(#neonGlow)"
 					})
 				]
@@ -406,16 +355,16 @@ var StackedBarChart = ({ data, categories, height = 300, yAxisDomain, className
 						domain: yAxisDomain
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Tooltip, {
-						contentStyle: chartTooltipContentStyle,
-						cursor: chartBandHoverCursorStyle,
-						itemStyle: chartTooltipItemStyle,
-						labelStyle: chartTooltipLabelStyle,
-						wrapperStyle: chartTooltipWrapperStyle
+						contentStyle: require_chartStyles.chartTooltipContentStyle,
+						cursor: require_chartStyles.chartBandHoverCursorStyle,
+						itemStyle: require_chartStyles.chartTooltipItemStyle,
+						labelStyle: require_chartStyles.chartTooltipLabelStyle,
+						wrapperStyle: require_chartStyles.chartTooltipWrapperStyle
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Legend, {
 						iconType: "circle",
 						wrapperStyle: {
-							...chartLegendTextStyle,
+							...require_chartStyles.chartLegendTextStyle,
 							paddingTop: "20px"
 						}
 					}),
@@ -504,7 +453,7 @@ var ThinBreakdownBar = ({ data: segments, className = "", showLabels = true, sho
 				children: [activeSegment && !showSummary && /* @__PURE__ */ (0, react_jsx_runtime.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-ds-1",
 					style: {
-						...chartPillTooltipStyle,
+						...require_chartStyles.chartPillTooltipStyle,
 						left: `${activeSegment.centerPercent}%`
 					},
 					children: [
@@ -630,14 +579,14 @@ var AreaChart = ({ data, categories, height = 300, className = "", showGrid = tr
 						dx: -10
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Tooltip, {
-						contentStyle: chartTooltipContentStyle,
-						cursor: chartLineHoverCursorStyle,
-						itemStyle: chartTooltipItemStyle,
-						labelStyle: chartTooltipLabelStyle,
-						wrapperStyle: chartTooltipWrapperStyle
+						contentStyle: require_chartStyles.chartTooltipContentStyle,
+						cursor: require_chartStyles.chartLineHoverCursorStyle,
+						itemStyle: require_chartStyles.chartTooltipItemStyle,
+						labelStyle: require_chartStyles.chartTooltipLabelStyle,
+						wrapperStyle: require_chartStyles.chartTooltipWrapperStyle
 					}),
 					normalizedCategories.map((cat) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Area, {
-						activeDot: getChartActiveDotStyle(cat.color),
+						activeDot: require_chartStyles.getChartActiveDotStyle(cat.color),
 						type: "monotone",
 						dataKey: cat.key,
 						stroke: cat.color,
@@ -678,11 +627,11 @@ var BarChart = ({ data, categories, height = 300, className = "", layout = "hori
 					bottom: 2
 				},
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Tooltip, {
-					contentStyle: chartTooltipContentStyle,
-					cursor: chartBandHoverCursorStyle,
-					itemStyle: chartTooltipItemStyle,
-					labelStyle: chartTooltipLabelStyle,
-					wrapperStyle: chartTooltipWrapperStyle
+					contentStyle: require_chartStyles.chartTooltipContentStyle,
+					cursor: require_chartStyles.chartBandHoverCursorStyle,
+					itemStyle: require_chartStyles.chartTooltipItemStyle,
+					labelStyle: require_chartStyles.chartTooltipLabelStyle,
+					wrapperStyle: require_chartStyles.chartTooltipWrapperStyle
 				}), normalizedCategories.map((cat) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Bar, {
 					dataKey: cat.key,
 					fill: cat.color,
@@ -759,11 +708,11 @@ var BarChart = ({ data, categories, height = 300, className = "", layout = "hori
 						dx: -10
 					})] }),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Tooltip, {
-						contentStyle: chartTooltipContentStyle,
-						cursor: chartBandHoverCursorStyle,
-						itemStyle: chartTooltipItemStyle,
-						labelStyle: chartTooltipLabelStyle,
-						wrapperStyle: chartTooltipWrapperStyle
+						contentStyle: require_chartStyles.chartTooltipContentStyle,
+						cursor: require_chartStyles.chartBandHoverCursorStyle,
+						itemStyle: require_chartStyles.chartTooltipItemStyle,
+						labelStyle: require_chartStyles.chartTooltipLabelStyle,
+						wrapperStyle: require_chartStyles.chartTooltipWrapperStyle
 					}),
 					normalizedCategories.map((cat) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Bar, {
 						dataKey: cat.key,
@@ -908,11 +857,11 @@ var PositiveNegativeBarChart = ({ data, height = 320, className = "", layout = "
 						})
 					] }),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Tooltip, {
-						contentStyle: chartTooltipContentStyle,
-						cursor: chartBandHoverCursorStyle,
-						itemStyle: chartTooltipItemStyle,
-						labelStyle: chartTooltipLabelStyle,
-						wrapperStyle: chartTooltipWrapperStyle,
+						contentStyle: require_chartStyles.chartTooltipContentStyle,
+						cursor: require_chartStyles.chartBandHoverCursorStyle,
+						itemStyle: require_chartStyles.chartTooltipItemStyle,
+						labelStyle: require_chartStyles.chartTooltipLabelStyle,
+						wrapperStyle: require_chartStyles.chartTooltipWrapperStyle,
 						formatter: (value) => [valueFormatter(Number(value ?? 0)), seriesLabel]
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Bar, {
@@ -980,14 +929,14 @@ var PieChart = ({ data, colors, height = 300, className = "", variant = "donut",
 					children: data.map((entry, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Cell, { fill: normalizedColors[index % normalizedColors.length] }, `cell-${index}`))
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Tooltip, {
-					contentStyle: chartTooltipContentStyle,
-					itemStyle: chartTooltipItemStyle,
-					labelStyle: chartTooltipLabelStyle,
-					wrapperStyle: chartTooltipWrapperStyle
+					contentStyle: require_chartStyles.chartTooltipContentStyle,
+					itemStyle: require_chartStyles.chartTooltipItemStyle,
+					labelStyle: require_chartStyles.chartTooltipLabelStyle,
+					wrapperStyle: require_chartStyles.chartTooltipWrapperStyle
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Legend, {
 					iconType: "circle",
-					wrapperStyle: chartLegendTextStyle
+					wrapperStyle: require_chartStyles.chartLegendTextStyle
 				})
 			] })
 		}), shouldRenderCenterContent ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -1080,4 +1029,4 @@ Object.defineProperty(exports, "getChartPalette", {
 	}
 });
-//# sourceMappingURL=charts-BmIV-mJy.cjs.map
+//# sourceMappingURL=charts-COx3IbI2.cjs.map