@flikk/ui 1.0.0-beta.30 → 1.0.0-beta.31

package/dist/components/charts/AreaChart/AreaChart.js

@@ -17,8 +17,10 @@ import { generateNiceTicks } from '../utils/chart-validation.js';
 import { generateCurvePath } from '../utils/path-utils.js';
 import { AREA_CHART_DEFAULTS } from './AreaChart.types.js';
 import { X_AXIS_MARGIN } from '../types/chart.types.js';
-import { areaChartTheme, getSeriesFillColor, getSeriesColorClass } from './AreaChart.theme.js';
+import { areaChartTheme, getSeriesColorClass } from './AreaChart.theme.js';
 import { RISE_FROM_BASELINE, riseTransition, SCALE_FROM_CENTER, dotEntranceTransition, HALO_FADE_TRANSITION } from '../utils/animation-utils.js';
+import { resolveSeriesColor } from '../utils/series-color.js';
+import { chartTheme } from '../theme/chart.theme.js';
 
 const sanitizeSvgId = (value) => value.replace(/[^a-zA-Z0-9_-]/g, "");
 const AreaChart = ({ data, config, 
@@ -34,18 +36,6 @@ svgClassName, areaClassName, lineClassName, gridClassName, axisClassName, width,
     var _a;
     // Resolve dotRadius with backward compatibility
     const resolvedDotRadius = (_a = dotRadius !== null && dotRadius !== void 0 ? dotRadius : radius) !== null && _a !== void 0 ? _a : AREA_CHART_DEFAULTS.dotRadius;
-    const resolveColor = (color, fallback) => {
-        if (!color)
-            return fallback;
-        if (!color.startsWith("var(") &&
-            !color.startsWith("#") &&
-            !color.startsWith("rgb") &&
-            !color.startsWith("hsl") &&
-            color.includes("-")) {
-            return `var(--color-${color})`;
-        }
-        return color;
-    };
     // Development warning for deprecated radius prop
     if (process.env.NODE_ENV !== "production" && radius !== undefined) {
         console.warn("[AreaChart]: The `radius` prop is deprecated and will be removed in a future version. " +
@@ -105,11 +95,11 @@ svgClassName, areaClassName, lineClassName, gridClassName, axisClassName, width,
     const dataKeys = useMemo(() => Object.keys(config), [config]);
     const resolvedLegendPosition = resolveLegendPosition(legend, config);
     const legendItems = dataKeys.map((key, index) => {
-        var _a, _b, _c;
+        var _a, _b;
         return ({
             key,
             label: (_b = (_a = config[key]) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : key,
-            color: resolveColor((_c = config[key]) === null || _c === void 0 ? void 0 : _c.color, getSeriesFillColor(index)),
+            color: resolveSeriesColor(index, key, config, chartTheme.baseStyle.colors.series),
         });
     });
     // Calculate scales. Guarded for empty data (`Math.max(...[])` is `-Infinity`)
@@ -248,13 +238,11 @@ svgClassName, areaClassName, lineClassName, gridClassName, axisClassName, width,
             setHoveredPoint(null);
             handleMouseLeave();
         }, ...props, children: [resolvedLegendPosition === "top" && (jsx(ChartLegend, { items: legendItems, className: "shrink-0 pb-2" })), descriptionProps && jsx("div", { ...descriptionProps }), jsx("div", { className: "relative flex-1 min-h-0", children: jsxs("svg", { width: "100%", height: "100%", viewBox: `0 0 ${dimensions.width} ${dimensions.height}`, className: cn(areaChartTheme.svgStyle, svgClassName), role: "presentation", children: [jsxs("defs", { children: [jsx("filter", { id: shadowFilterId, x: "-20%", y: "-20%", width: "140%", height: "140%", children: jsx("feDropShadow", { dx: "4", dy: "4", stdDeviation: "6", floodOpacity: "0.1", floodColor: "#000000" }) }), jsx("clipPath", { id: clipId, children: jsx("rect", { x: margin.left, y: margin.top, width: innerWidth, height: innerHeight }) }), dataKeys.map((key, keyIndex) => {
-                                    var _a;
-                                    const fillColor = resolveColor((_a = config[key]) === null || _a === void 0 ? void 0 : _a.color, getSeriesFillColor(keyIndex));
+                                    const fillColor = resolveSeriesColor(keyIndex, key, config, chartTheme.baseStyle.colors.series);
                                     return (jsx("linearGradient", { id: getAreaGradientId(keyIndex), gradientUnits: isGradientVariant ? "objectBoundingBox" : undefined, x1: "0", y1: "0", x2: "0", y2: "1", children: isGradientVariant ? (jsxs(Fragment, { children: [jsx("stop", { offset: "0%", stopColor: fillColor, stopOpacity: Math.min(0.42, fillOpacity * 1.15) }), jsx("stop", { offset: "32%", stopColor: fillColor, stopOpacity: Math.min(0.24, fillOpacity * 0.68) }), jsx("stop", { offset: "78%", stopColor: fillColor, stopOpacity: Math.min(0.08, fillOpacity * 0.22) }), jsx("stop", { offset: "100%", stopColor: fillColor, stopOpacity: "0" })] })) : (jsxs(Fragment, { children: [jsx("stop", { offset: "0%", stopColor: fillColor, stopOpacity: fillOpacity * 0.8 }), jsx("stop", { offset: "100%", stopColor: fillColor, stopOpacity: fillOpacity * 0.05 })] })) }, `gradient-${key}`));
                                 }), isGradientVariant &&
                                     dataKeys.map((key, keyIndex) => {
-                                        var _a;
-                                        const fillColor = resolveColor((_a = config[key]) === null || _a === void 0 ? void 0 : _a.color, getSeriesFillColor(keyIndex));
+                                        const fillColor = resolveSeriesColor(keyIndex, key, config, chartTheme.baseStyle.colors.series);
                                         return (jsxs(React__default.Fragment, { children: [jsx("filter", { id: getLineGlowId(keyIndex), x: "-12%", y: "-35%", width: "124%", height: "170%", colorInterpolationFilters: "sRGB", children: jsx("feDropShadow", { dx: "0", dy: "0", stdDeviation: "5", floodColor: fillColor, floodOpacity: "0.42" }) }), jsx("filter", { id: getMarkerGlowId(keyIndex), x: "-120%", y: "-120%", width: "340%", height: "340%", colorInterpolationFilters: "sRGB", children: jsx("feDropShadow", { dx: "0", dy: "0", stdDeviation: "5", floodColor: fillColor, floodOpacity: "0.45" }) })] }, `gradient-filters-${key}`));
                                     }), jsxs("linearGradient", { id: "vertical-fade", x1: "0%", y1: "0%", x2: "0%", y2: "100%", children: [jsx("stop", { offset: "0%", stopColor: "#6b7280", stopOpacity: "0" }), jsx("stop", { offset: "40%", stopColor: "#6b7280", stopOpacity: "0.3" }), jsx("stop", { offset: "50%", stopColor: "#6b7280", stopOpacity: "0.5" }), jsx("stop", { offset: "60%", stopColor: "#6b7280", stopOpacity: "0.3" }), jsx("stop", { offset: "100%", stopColor: "#6b7280", stopOpacity: "0" })] }), jsxs("linearGradient", { id: "horizontal-fade", x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [jsx("stop", { offset: "0%", stopColor: "#6b7280", stopOpacity: "0" }), jsx("stop", { offset: "40%", stopColor: "#6b7280", stopOpacity: "0.3" }), jsx("stop", { offset: "50%", stopColor: "#6b7280", stopOpacity: "0.5" }), jsx("stop", { offset: "60%", stopColor: "#6b7280", stopOpacity: "0.3" }), jsx("stop", { offset: "100%", stopColor: "#6b7280", stopOpacity: "0" })] })] }), jsx(HorizontalGrid, { show: showGrid, x: margin.left, y: margin.top, width: innerWidth, height: innerHeight, lineCount: 5, className: gridClassName }), jsx(ChartCrosshair, { show: hoveredPoint !== null, x: hoveredPoint !== null
                                 ? data.length === 1
@@ -272,13 +260,15 @@ svgClassName, areaClassName, lineClassName, gridClassName, axisClassName, width,
                                         ((numValue - minValue) / (maxValue - minValue)) *
                                             innerHeight);
                                 })()
-                                : undefined, margin: margin, innerWidth: innerWidth, innerHeight: innerHeight, showHorizontal: dataKeys.length === 1, strokeColor: isGradientVariant ? getSeriesFillColor(0) : undefined, strokeWidth: isGradientVariant ? 1.5 : undefined, strokeDasharray: isGradientVariant ? "3 7" : undefined, opacity: isGradientVariant ? 0.28 : undefined }), jsx(YAxis, { show: showYAxis, min: minValue, max: maxValue, x: margin.left, y: margin.top, height: innerHeight, showGrid: false, gridWidth: innerWidth, className: axisClassName, tickFormatter: (value) => {
+                                : undefined, margin: margin, innerWidth: innerWidth, innerHeight: innerHeight, showHorizontal: dataKeys.length === 1, strokeColor: isGradientVariant
+                                ? resolveSeriesColor(0, undefined, undefined, chartTheme.baseStyle.colors.series)
+                                : undefined, strokeWidth: isGradientVariant ? 1.5 : undefined, strokeDasharray: isGradientVariant ? "3 7" : undefined, opacity: isGradientVariant ? 0.28 : undefined }), jsx(YAxis, { show: showYAxis, min: minValue, max: maxValue, x: margin.left, y: margin.top, height: innerHeight, showGrid: false, gridWidth: innerWidth, className: axisClassName, tickFormatter: (value) => {
                                 if (Math.abs(value) >= 1000)
                                     return `${(value / 1000).toFixed(0)}k`;
                                 return value.toString();
                             } }), minValue < 0 && maxValue > 0 && (jsx("line", { x1: margin.left, y1: margin.top + innerHeight - ((0 - minValue) / (maxValue - minValue)) * innerHeight, x2: margin.left + innerWidth, y2: margin.top + innerHeight - ((0 - minValue) / (maxValue - minValue)) * innerHeight, className: "stroke-[var(--color-text-secondary)]", strokeWidth: 1, opacity: 0.6 })), jsx("g", { className: cn(areaChartTheme.areaGroupStyle, areaClassName), clipPath: `url(#${clipId})`, children: measured &&
                                 dataKeys.map((key, keyIndex) => {
-                                    var _a, _b, _c, _d, _e;
+                                    var _a, _b;
                                     const paths = allPaths[key];
                                     const colorClass = getSeriesColorClass(keyIndex);
                                     if (!paths)
@@ -291,19 +281,19 @@ svgClassName, areaClassName, lineClassName, gridClassName, axisClassName, width,
                                         // so the series grows UP from the x-axis — not from its own mid-height.
                                         style: RISE_FROM_BASELINE, children: [jsx("rect", { x: margin.left, y: margin.top, width: innerWidth, height: innerHeight, fill: "none", stroke: "none", style: { pointerEvents: "none" } }), jsx("path", { d: paths.areaPath, fill: `url(#${getAreaGradientId(keyIndex)})`, className: "transition-colors duration-200", filter: isGradientVariant ? undefined : `url(#${shadowFilterId})`, transform: isGradientVariant
                                                     ? `translate(0 ${gradientAreaGap})`
-                                                    : undefined }), showStroke && (jsxs(Fragment, { children: [isGradientVariant && (jsx(motion.path, { d: paths.linePath, initial: { opacity: 1 }, animate: { opacity: 1 }, fill: "none", stroke: resolveColor((_a = config[key]) === null || _a === void 0 ? void 0 : _a.color, getSeriesFillColor(keyIndex)), strokeWidth: gradientStrokeWidth + 1, strokeLinecap: "round", strokeLinejoin: "round", 
+                                                    : undefined }), showStroke && (jsxs(Fragment, { children: [isGradientVariant && (jsx(motion.path, { d: paths.linePath, initial: { opacity: 1 }, animate: { opacity: 1 }, fill: "none", stroke: resolveSeriesColor(keyIndex, key, config, chartTheme.baseStyle.colors.series), strokeWidth: gradientStrokeWidth + 1, strokeLinecap: "round", strokeLinejoin: "round", 
                                                         // Stroke width must ignore the group's scaleY rise, else
                                                         // it squashes flat at the start of the animation.
-                                                        vectorEffect: "non-scaling-stroke", opacity: 0.08, filter: `url(#${getLineGlowId(keyIndex)})`, style: { pointerEvents: "none" } })), jsx(motion.path, { d: paths.linePath, initial: { opacity: 1 }, animate: { opacity: 1 }, fill: "none", stroke: ((_b = config[key]) === null || _b === void 0 ? void 0 : _b.color) ? resolveColor((_c = config[key]) === null || _c === void 0 ? void 0 : _c.color, "") : (isGradientVariant ? getSeriesFillColor(keyIndex) : undefined), strokeWidth: isGradientVariant ? gradientStrokeWidth : strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", 
+                                                        vectorEffect: "non-scaling-stroke", opacity: 0.08, filter: `url(#${getLineGlowId(keyIndex)})`, style: { pointerEvents: "none" } })), jsx(motion.path, { d: paths.linePath, initial: { opacity: 1 }, animate: { opacity: 1 }, fill: "none", stroke: ((_a = config[key]) === null || _a === void 0 ? void 0 : _a.color) ? resolveSeriesColor(keyIndex, key, config, []) : (isGradientVariant ? resolveSeriesColor(keyIndex, undefined, undefined, chartTheme.baseStyle.colors.series) : undefined), strokeWidth: isGradientVariant ? gradientStrokeWidth : strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", 
                                                         // Constant stroke width through the scaleY rise (no squash).
                                                         vectorEffect: "non-scaling-stroke", className: cn("transition-colors duration-200", !isGradientVariant &&
                                                             (colorClass
                                                                 .split(" ")
-                                                                .find((cls) => cls.startsWith("stroke-")) || ""), lineClassName), style: { stroke: ((_d = config[key]) === null || _d === void 0 ? void 0 : _d.color) ? resolveColor((_e = config[key]) === null || _e === void 0 ? void 0 : _e.color, "") : undefined } })] }))] }, `${key}${shouldReduceMotion ? "" : `-${dataSignature}`}`));
+                                                                .find((cls) => cls.startsWith("stroke-")) || ""), lineClassName), style: { stroke: ((_b = config[key]) === null || _b === void 0 ? void 0 : _b.color) ? resolveSeriesColor(keyIndex, key, config, []) : undefined } })] }))] }, `${key}${shouldReduceMotion ? "" : `-${dataSignature}`}`));
                                 }) }), showDots && (jsx("g", { className: "chart-dots", children: dataKeys.map((key, keyIndex) => {
                                 const colorClass = getSeriesColorClass(keyIndex);
                                 return (jsx("g", { children: data.map((item, dataIndex) => {
-                                        var _a, _b;
+                                        var _a;
                                         const rawValue = item[key];
                                         const isNull = rawValue === null || rawValue === undefined;
                                         // Don't render dots for null values
@@ -316,12 +306,12 @@ svgClassName, areaClassName, lineClassName, gridClassName, axisClassName, width,
                                         const { x, y } = getPointPosition(dataIndex, topValue);
                                         return (jsx(motion.g, { initial: { opacity: 0, scale: 0 }, animate: { opacity: 1, scale: 1 }, 
                                             // Markers pop in left-to-right once the rise has finished.
-                                            transition: dotEntranceTransition(dataIndex, shouldReduceMotion), style: SCALE_FROM_CENTER, children: jsx(ChartMarker, { cx: x, cy: y, radius: resolvedDotRadius, colorClass: colorClass, strokeColor: ((_a = config[key]) === null || _a === void 0 ? void 0 : _a.color) ? resolveColor((_b = config[key]) === null || _b === void 0 ? void 0 : _b.color, "") : undefined }) }, `${key}-${dataIndex}${shouldReduceMotion ? "" : `-${dataSignature}`}`));
+                                            transition: dotEntranceTransition(dataIndex, shouldReduceMotion), style: SCALE_FROM_CENTER, children: jsx(ChartMarker, { cx: x, cy: y, radius: resolvedDotRadius, colorClass: colorClass, strokeColor: ((_a = config[key]) === null || _a === void 0 ? void 0 : _a.color) ? resolveSeriesColor(keyIndex, key, config, []) : undefined }) }, `${key}-${dataIndex}${shouldReduceMotion ? "" : `-${dataSignature}`}`));
                                     }) }, key));
                             }) })), jsx("g", { className: "chart-hover-markers", children: jsx(AnimatePresence, { children: (!showDots || isGradientVariant) &&
                                     hoveredPoint !== null &&
                                     dataKeys.map((key, keyIndex) => {
-                                        var _a, _b, _c;
+                                        var _a;
                                         const item = data[hoveredPoint.index];
                                         const rawValue = item[key];
                                         const isNull = rawValue === null || rawValue === undefined;
@@ -338,11 +328,11 @@ svgClassName, areaClassName, lineClassName, gridClassName, axisClassName, width,
                                             : value;
                                         const { x, y } = getPointPosition(hoveredPoint.index, topValue);
                                         const colorClass = getSeriesColorClass(keyIndex);
-                                        const markerColor = resolveColor((_a = config[key]) === null || _a === void 0 ? void 0 : _a.color, getSeriesFillColor(keyIndex));
+                                        const markerColor = resolveSeriesColor(keyIndex, key, config, chartTheme.baseStyle.colors.series);
                                         if (isGradientVariant) {
                                             return (jsxs(motion.g, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: HALO_FADE_TRANSITION, filter: `url(#${getMarkerGlowId(keyIndex)})`, style: { pointerEvents: "none" }, children: [jsx("circle", { cx: x, cy: y, r: resolvedDotRadius + 9, fill: markerColor, opacity: 0.12 }), jsx("circle", { cx: x, cy: y, r: resolvedDotRadius + 4, fill: "white", stroke: markerColor, strokeWidth: 2.5 }), jsx("circle", { cx: x, cy: y, r: resolvedDotRadius, fill: markerColor })] }, `hover-${key}-${hoveredPoint.index}`));
                                         }
-                                        return (jsx(ChartMarker, { cx: x, cy: y, radius: resolvedDotRadius, colorClass: colorClass, strokeColor: ((_b = config[key]) === null || _b === void 0 ? void 0 : _b.color) ? resolveColor((_c = config[key]) === null || _c === void 0 ? void 0 : _c.color, "") : undefined }, `hover-${key}-${hoveredPoint.index}`));
+                                        return (jsx(ChartMarker, { cx: x, cy: y, radius: resolvedDotRadius, colorClass: colorClass, strokeColor: ((_a = config[key]) === null || _a === void 0 ? void 0 : _a.color) ? resolveSeriesColor(keyIndex, key, config, []) : undefined }, `hover-${key}-${hoveredPoint.index}`));
                                     }) }) }), jsx("g", { className: "chart-hover-areas", children: data.map((item, dataIndex) => {
                                 // Calculate hover area based on new point positioning
                                 const pointX = data.length === 1
@@ -361,15 +351,14 @@ svgClassName, areaClassName, lineClassName, gridClassName, axisClassName, width,
                                         setHoveredPoint({ index: dataIndex, key: dataKeys[0] });
                                         // Create multi-series tooltip data
                                         const seriesData = dataKeys.map((seriesKey, keyIndex) => {
-                                            var _a, _b;
+                                            var _a;
                                             const seriesValue = item[seriesKey];
                                             const numValue = typeof seriesValue === "number" ? seriesValue : 0;
                                             return {
                                                 key: seriesKey,
                                                 label: ((_a = config[seriesKey]) === null || _a === void 0 ? void 0 : _a.label) || seriesKey,
                                                 value: numValue,
-                                                color: ((_b = config[seriesKey]) === null || _b === void 0 ? void 0 : _b.color) ||
-                                                    getSeriesFillColor(keyIndex),
+                                                color: resolveSeriesColor(keyIndex, seriesKey, config, chartTheme.baseStyle.colors.series),
                                             };
                                         });
                                         const content = {

package/dist/components/charts/AreaChart/AreaChart.theme.d.ts

@@ -14,11 +14,6 @@ export interface AreaChartTheme {
 export declare const areaChartTheme: AreaChartTheme;
 /**
  * Get series color class for stroke and fill
- * Uses semantic color CSS variables in production-ready format
+ * Uses the dedicated categorical chart-N tokens, not the semantic status colors
  */
 export declare const getSeriesColorClass: (index: number) => string;
-/**
- * Get fill color for SVG gradients
- * Returns CSS variable value directly for stopColor attribute
- */
-export declare const getSeriesFillColor: (index: number) => string;

package/dist/components/charts/AreaChart/AreaChart.theme.js

@@ -17,29 +17,17 @@ const areaChartTheme = {
 };
 /**
  * Get series color class for stroke and fill
- * Uses semantic color CSS variables in production-ready format
+ * Uses the dedicated categorical chart-N tokens, not the semantic status colors
  */
 const getSeriesColorClass = (index) => {
     const colors = [
-        "stroke-[var(--color-primary)] fill-[var(--color-primary)]",
-        "stroke-[var(--color-warning)] fill-[var(--color-warning)]",
-        "stroke-[var(--color-success)] fill-[var(--color-success)]",
-        "stroke-[var(--color-danger)] fill-[var(--color-danger)]",
+        "stroke-[var(--color-chart-1)] fill-[var(--color-chart-1)]",
+        "stroke-[var(--color-chart-2)] fill-[var(--color-chart-2)]",
+        "stroke-[var(--color-chart-3)] fill-[var(--color-chart-3)]",
+        "stroke-[var(--color-chart-4)] fill-[var(--color-chart-4)]",
+        "stroke-[var(--color-chart-5)] fill-[var(--color-chart-5)]",
     ];
     return colors[index % colors.length];
 };
-/**
- * Get fill color for SVG gradients
- * Returns CSS variable value directly for stopColor attribute
- */
-const getSeriesFillColor = (index) => {
-    const colorVars = [
-        "var(--color-primary)",
-        "var(--color-warning)",
-        "var(--color-success)",
-        "var(--color-danger)",
-    ];
-    return colorVars[index % colorVars.length];
-};
 
-export { areaChartTheme, getSeriesColorClass, getSeriesFillColor };
+export { areaChartTheme, getSeriesColorClass };

package/dist/components/charts/AreaChart/AreaChart.types.d.ts

@@ -1,5 +1,12 @@
 import { BaseChartProps, StandardChartDisplayProps, StandardVisualProps, ChartVariant } from '../types/chart.types';
-export interface AreaChartProps extends BaseChartProps, StandardChartDisplayProps, StandardVisualProps {
+/**
+ * Visual props that actually apply to an area chart.
+ *
+ * 🔴 Narrowed with `Omit` on purpose — see the note on `StandardVisualProps`.
+ * Dropped: the bar/cell-only props, which an area chart has nothing to apply them to.
+ */
+export type AreaVisualProps = Omit<StandardVisualProps, 'barRadius' | 'gap'>;
+export interface AreaChartProps extends BaseChartProps, StandardChartDisplayProps, AreaVisualProps {
     dotRadius?: number;
     radius?: number;
     strokeWidth?: number;
@@ -14,10 +21,19 @@ export interface AreaChartProps extends BaseChartProps, StandardChartDisplayProp
     gridClassName?: string;
     axisClassName?: string;
 }
+/**
+ * Default values using centralized defaults.
+ *
+ * 🔴 Picks explicitly rather than spreading `...CHART_DEFAULTS` — see the note on
+ * `BAR_CHART_DEFAULTS`.
+ */
 export declare const AREA_CHART_DEFAULTS: {
+    readonly showGrid: true;
+    readonly showXAxis: true;
+    readonly showYAxis: true;
+    readonly enableKeyboardNavigation: true;
     readonly variant: ChartVariant;
     readonly dotRadius: 3;
-    readonly radius: 3;
     readonly strokeWidth: 2;
     readonly curved: true;
     readonly curveType: import("..").CurveType;
@@ -25,15 +41,6 @@ export declare const AREA_CHART_DEFAULTS: {
     readonly fillOpacity: 0.3;
     readonly showStroke: true;
     readonly stacked: false;
-    readonly showGrid: true;
-    readonly showXAxis: true;
-    readonly showYAxis: true;
-    readonly barRadius: 32;
-    readonly cellRadius: 4;
-    readonly gap: 4;
-    readonly categoryGap: 16;
-    readonly orientation: "vertical" | "horizontal";
-    readonly enableKeyboardNavigation: true;
 };
 export type AreaChartData = BaseChartProps['data'][0];
 export type AreaChartConfig = BaseChartProps['config'];

package/dist/components/charts/AreaChart/AreaChart.types.js

@@ -1,11 +1,18 @@
 import { CHART_DEFAULTS } from '../types/chart.types.js';
 
-// Default values using centralized defaults
+/**
+ * Default values using centralized defaults.
+ *
+ * 🔴 Picks explicitly rather than spreading `...CHART_DEFAULTS` — see the note on
+ * `BAR_CHART_DEFAULTS`.
+ */
 const AREA_CHART_DEFAULTS = {
-    ...CHART_DEFAULTS,
+    showGrid: CHART_DEFAULTS.showGrid,
+    showXAxis: CHART_DEFAULTS.showXAxis,
+    showYAxis: CHART_DEFAULTS.showYAxis,
+    enableKeyboardNavigation: CHART_DEFAULTS.enableKeyboardNavigation,
     variant: "gradient", // AreaChart defaults to the gradient (premium) look; use variant="default" for flat fills
     dotRadius: CHART_DEFAULTS.dotRadius, // 20 - For dot markers
-    radius: CHART_DEFAULTS.dotRadius, // @deprecated - kept for backward compatibility
     strokeWidth: CHART_DEFAULTS.strokeWidth,
     curved: CHART_DEFAULTS.curved,
     curveType: CHART_DEFAULTS.curveType,

package/dist/components/charts/AreaChart/index.d.ts

@@ -1,4 +1,4 @@
 export { AreaChart } from './AreaChart';
 export type { AreaChartProps, AreaChartData, AreaChartConfig } from './AreaChart.types';
-export { areaChartTheme, getSeriesColorClass, getSeriesFillColor } from './AreaChart.theme';
+export { areaChartTheme, getSeriesColorClass } from './AreaChart.theme';
 export type { AreaChartTheme } from './AreaChart.theme';

package/dist/components/charts/BarChart/BarChart.js

@@ -17,7 +17,9 @@ import { BAR_CHART_DEFAULTS } from './BarChart.types.js';
 import { X_AXIS_MARGIN } from '../types/chart.types.js';
 import { BAR_GROUP_STAGGER, BAR_SPRING, barEntranceTransition } from '../utils/animation-utils.js';
 import { BarSeriesDefs, BarGlowRing, barStrokeStyle, barFill, barDimOpacity, deriveBarEmphasis } from '../utils/bar-emphasis.js';
-import { ExclamationTriangleIcon } from '@heroicons/react/20/solid';
+import { resolveSeriesColor } from '../utils/series-color.js';
+import { chartTheme } from '../theme/chart.theme.js';
+import { Warning } from '@phosphor-icons/react';
 
 // Pure helper functions moved to module level to avoid recreation per render
 const createRoundedTopBarPath = (x, y, width, height, radius) => {
@@ -59,8 +61,6 @@ showGrid = BAR_CHART_DEFAULTS.showGrid, showXAxis = BAR_CHART_DEFAULTS.showXAxis
 // Standardized visual props with defaults (renamed from bar-specific names)
 barRadius, radius, // @deprecated Use barRadius instead
 gap = BAR_CHART_DEFAULTS.gap, categoryGap = BAR_CHART_DEFAULTS.categoryGap, 
-// Bar-specific props
-orientation, 
 // Animation props
 showAnimation = BAR_CHART_DEFAULTS.showAnimation, 
 // Placeholder bar props
@@ -98,34 +98,15 @@ className, title, description, enableKeyboardNavigation = BAR_CHART_DEFAULTS.ena
     const { validation, sanitizedData, isValid, hasWarnings, safeScale, safeMath, } = useChartValidation(data, config, {
         autoSanitize: true,
     });
-    // Simple color functions based on direct CSS variables (following guidelines)
     const getSeriesFillColor = (index, key) => {
-        var _a, _b, _c;
-        if (key && ((_a = config[key]) === null || _a === void 0 ? void 0 : _a.color)) {
-            const customColor = config[key].color;
-            if (!customColor.startsWith("var(") &&
-                !customColor.startsWith("#") &&
-                !customColor.startsWith("rgb") &&
-                !customColor.startsWith("hsl") &&
-                customColor.includes("-")) {
-                return `var(--color-${customColor})`;
-            }
-            return customColor;
-        }
-        const defaultColors = [
-            "var(--color-primary)",
-            "var(--color-warning)",
-            "var(--color-success)",
-            "var(--color-danger)",
-        ];
-        // Use custom colors if provided, otherwise fall back to defaults
-        const themedColors = (_c = (_b = theme === null || theme === void 0 ? void 0 : theme.baseStyle) === null || _b === void 0 ? void 0 : _b.colors) === null || _c === void 0 ? void 0 : _c.series;
+        var _a, _b;
+        const themedColors = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.baseStyle) === null || _a === void 0 ? void 0 : _a.colors) === null || _b === void 0 ? void 0 : _b.series;
         const palette = colors && colors.length > 0
             ? colors
             : themedColors && themedColors.length > 0
                 ? themedColors
-                : defaultColors;
-        return palette[index % palette.length];
+                : chartTheme.baseStyle.colors.series;
+        return resolveSeriesColor(index, key, config, palette);
     };
     const resolvedLegendPosition = resolveLegendPosition(legend, config);
     const legendItems = Object.keys(config).map((key, index) => {
@@ -449,7 +430,7 @@ className, title, description, enableKeyboardNavigation = BAR_CHART_DEFAULTS.ena
     // Rules of Hooks: "move it before the return."
     // Invalid data: show an error message
     if (!isValid) {
-        return (jsxs("div", { className: cn("chart-container flex flex-col items-center justify-center p-6 border border-[var(--color-border)] rounded-lg text-2xl", className), role: "alert", "aria-live": "polite", ...props, children: [jsxs("div", { className: "flex flex-col items-center gap-4 mb-1", children: [jsx(ExclamationTriangleIcon, { className: "size-6 text-[var(--color-danger)]" }), jsx("div", { className: "text-base font-semibold text-[var(--color-text-secondary)]", children: "Invalid Chart Data" })] }), jsx("p", { className: "text-base text-[var(--color-text-secondary)]/70 mb-2", children: ((_b = validation.errors[0]) === null || _b === void 0 ? void 0 : _b.message) ||
+        return (jsxs("div", { className: cn("chart-container flex flex-col items-center justify-center p-6 border border-[var(--color-border)] rounded-lg text-2xl", className), role: "alert", "aria-live": "polite", ...props, children: [jsxs("div", { className: "flex flex-col items-center gap-4 mb-1", children: [jsx(Warning, { className: "size-6 text-[var(--color-danger)]" }), jsx("div", { className: "text-base font-semibold text-[var(--color-text-secondary)]", children: "Invalid Chart Data" })] }), jsx("p", { className: "text-base text-[var(--color-text-secondary)]/70 mb-2", children: ((_b = validation.errors[0]) === null || _b === void 0 ? void 0 : _b.message) ||
                         "Unable to render chart due to data validation errors" }), process.env.NODE_ENV === "development" &&
                     validation.errors.length > 1 && (jsxs("details", { className: "text-sm text-warning-500", children: [jsxs("summary", { className: "cursor-pointer", children: ["Show all errors (", validation.errors.length, ")"] }), jsx("ul", { className: "mt-2 text-left", children: validation.errors.map((error, index) => (jsxs("li", { children: ["\u2022 ", error.message] }, index))) })] }))] }));
     }
@@ -466,7 +447,7 @@ className, title, description, enableKeyboardNavigation = BAR_CHART_DEFAULTS.ena
                 height: height !== undefined ? (typeof height === "number" ? `${height}px` : height) : undefined,
             }, ...chartAccessibilityProps, onMouseEnter: handleMouseInteraction, onMouseMove: handleMouseInteraction, ...props, children: [resolvedLegendPosition === "top" && (jsx(ChartLegend, { items: legendItems, className: "shrink-0 pb-2" })), descriptionProps && jsx("div", { ...descriptionProps }), showValidationWarnings && hasWarnings && (jsxs("div", { className: "absolute top-2 left-2 right-2 z-10 p-2 bg-[var(--color-warning-50)] border border-[var(--color-warning-200)] rounded text-sm text-[var(--color-warning)] shadow-sm", children: [jsx("strong", { children: "Chart Warnings:" }), jsx("ul", { className: "mt-1", children: validation.warnings
                                 .filter((warning) => !warning.message.includes("has no valid numeric values"))
-                                .map((warning, index) => (jsxs("li", { children: ["\u2022 ", warning.message] }, index))) }), validation.warnings.some((warning) => warning.message.includes("has no valid numeric values")) && (jsx("div", { className: "mt-2 pt-2 border-t border-[var(--color-warning-200)]", children: jsx("span", { className: "text-[var(--color-warning)]", children: "\u2139\uFE0F Null/undefined values are handled by using averages from other data points" }) }))] })), jsx("div", { className: "relative flex-1 min-h-0", children: jsxs("svg", { width: "100%", height: "100%", viewBox: `0 0 ${dimensions.width} ${dimensions.height}`, style: { overflow: isGradientVariant ? "visible" : undefined }, children: [jsxs("defs", { children: [jsxs("pattern", { id: hatchPatternId, patternUnits: "userSpaceOnUse", width: "8", height: "8", children: [jsx("rect", { width: "8", height: "8", fill: "var(--color-neutral-50)" }), jsx("path", { d: "M-2,2 l4,-4\n                   M0,8 l8,-8\n                   M6,10 l4,-4", style: { stroke: "black", strokeWidth: 4, opacity: 0.1 } })] }), isGradientVariant &&
+                                .map((warning, index) => (jsxs("li", { children: ["\u2022 ", warning.message] }, index))) }), validation.warnings.some((warning) => warning.message.includes("has no valid numeric values")) && (jsx("div", { className: "mt-2 pt-2 border-t border-[var(--color-warning-200)]", children: jsx("span", { className: "text-[var(--color-warning)]", children: "\u2139\uFE0F Null/undefined values are handled by using averages from other data points" }) }))] })), jsx("div", { className: "relative flex-1 min-h-0", children: jsxs("svg", { width: "100%", height: "100%", viewBox: `0 0 ${dimensions.width} ${dimensions.height}`, style: { overflow: isGradientVariant ? "visible" : undefined }, children: [jsxs("defs", { children: [jsxs("pattern", { id: hatchPatternId, patternUnits: "userSpaceOnUse", width: "8", height: "8", children: [jsx("rect", { width: "8", height: "8", fill: "var(--color-mono-50)" }), jsx("path", { d: "M-2,2 l4,-4\n                   M0,8 l8,-8\n                   M6,10 l4,-4", style: { stroke: "black", strokeWidth: 4, opacity: 0.1 } })] }), isGradientVariant &&
                                         dataKeys.map((key, index) => {
                                             const color = getSeriesFillColor(index, key);
                                             return (jsx(BarSeriesDefs, { gradientId: getBarGradientId(index), shadowId: getBarShadowId(index), ringId: getBarRingId(index), color: color }, key));

package/dist/components/charts/BarChart/BarChart.types.d.ts

@@ -1,5 +1,13 @@
 import { BaseChartProps, StandardChartDisplayProps, StandardVisualProps, BarChartSpecificProps, ChartVariant } from "../types/chart.types";
-export interface BarChartProps extends BaseChartProps, StandardChartDisplayProps, StandardVisualProps, BarChartSpecificProps {
+/**
+ * Visual props that actually apply to a vertical bar chart.
+ *
+ * 🔴 Narrowed with `Omit` on purpose — see the note on `StandardVisualProps`.
+ * Kept: `barRadius` (+ its deprecated `radius` alias) and `gap`.
+ * Dropped: dot/cell radii, stroke width, and the line/area/stacked-only props.
+ */
+export type BarVisualProps = Omit<StandardVisualProps, "dotRadius" | "strokeWidth" | "curved" | "curveType" | "showDots" | "fillOpacity" | "showStroke" | "stacked">;
+export interface BarChartProps extends BaseChartProps, StandardChartDisplayProps, BarVisualProps, BarChartSpecificProps {
     barRadius?: number;
     radius?: number;
     gap?: number;
@@ -23,27 +31,23 @@ export interface BarChartProps extends BaseChartProps, StandardChartDisplayProps
      */
     darkMode?: boolean;
 }
+/**
+ * Default values using centralized defaults.
+ *
+ * 🔴 Picks explicitly rather than spreading `...CHART_DEFAULTS` — the spread pulled in a
+ * default for every other chart's props, so this object advertised values BarChart never
+ * reads. List only what the component actually consumes.
+ */
 export declare const BAR_CHART_DEFAULTS: {
+    readonly showGrid: true;
+    readonly showXAxis: true;
+    readonly showYAxis: true;
+    readonly enableKeyboardNavigation: true;
     readonly variant: ChartVariant;
     readonly barRadius: 32;
-    readonly radius: 32;
     readonly gap: 4;
     readonly categoryGap: 16;
-    readonly orientation: "horizontal" | "vertical";
     readonly showAnimation: true;
     readonly showPlaceholderBars: false;
-    readonly showGrid: true;
-    readonly showXAxis: true;
-    readonly showYAxis: true;
-    readonly dotRadius: 3;
-    readonly cellRadius: 4;
-    readonly strokeWidth: 2;
-    readonly curved: true;
-    readonly curveType: import("..").CurveType;
-    readonly fillOpacity: 0.3;
-    readonly showStroke: true;
-    readonly showDots: false;
-    readonly stacked: false;
-    readonly enableKeyboardNavigation: true;
 };
 export type BarChartData = BaseChartProps["data"][0];

package/dist/components/charts/BarChart/BarChart.types.js

@@ -1,14 +1,21 @@
 import { CHART_DEFAULTS } from '../types/chart.types.js';
 
-// Default values using centralized defaults
+/**
+ * Default values using centralized defaults.
+ *
+ * 🔴 Picks explicitly rather than spreading `...CHART_DEFAULTS` — the spread pulled in a
+ * default for every other chart's props, so this object advertised values BarChart never
+ * reads. List only what the component actually consumes.
+ */
 const BAR_CHART_DEFAULTS = {
-    ...CHART_DEFAULTS,
+    showGrid: CHART_DEFAULTS.showGrid,
+    showXAxis: CHART_DEFAULTS.showXAxis,
+    showYAxis: CHART_DEFAULTS.showYAxis,
+    enableKeyboardNavigation: CHART_DEFAULTS.enableKeyboardNavigation,
     variant: "gradient", // BarChart defaults to the gradient (premium) look; use variant="default" for flat fills
     barRadius: CHART_DEFAULTS.barRadius, // 24 - For bar corner rounding
-    radius: CHART_DEFAULTS.barRadius, // @deprecated - kept for backward compatibility
     gap: CHART_DEFAULTS.gap,
     categoryGap: CHART_DEFAULTS.categoryGap,
-    orientation: CHART_DEFAULTS.orientation,
     showAnimation: true, // Enable animations by default
     showPlaceholderBars: false, // Opt-in feature for backward compatibility
 };

package/dist/components/charts/ComboChart/BarRenderer.js

@@ -7,14 +7,17 @@ import { BAR_STACK_CATEGORY_DELAY, BAR_STACK_SEGMENT_STAGGER, BAR_GROUP_STAGGER,
 import { BarGlowRing, barStrokeStyle, barFill, barDimOpacity, BarSeriesDefs, deriveBarEmphasis } from '../utils/bar-emphasis.js';
 
 /**
- * Simple color functions based on direct CSS variables
+ * Fallback only — ComboChart always resolves a real color onto each series'
+ * config before it reaches this renderer (see ComboChart.tsx), so this array
+ * exists purely as a defensive default, not a live categorical palette.
  */
 const getSeriesFillColor = (index) => {
     const colorVars = [
-        "var(--color-primary)",
-        "var(--color-warning)",
-        "var(--color-success)",
-        "var(--color-danger)",
+        "var(--color-chart-1)",
+        "var(--color-chart-2)",
+        "var(--color-chart-3)",
+        "var(--color-chart-4)",
+        "var(--color-chart-5)",
     ];
     return colorVars[index % colorVars.length];
 };

package/dist/components/charts/ComboChart/ComboChart.js

@@ -8,7 +8,9 @@ import { BarRenderer } from './BarRenderer.js';
 import { LineRenderer } from './LineRenderer.js';
 import { resolveLegendPosition, ChartLegend } from '../shared/ChartLegend/ChartLegend.js';
 import { COMBO_CHART_DEFAULTS } from './ComboChart.types.js';
-import { ExclamationTriangleIcon } from '@heroicons/react/20/solid';
+import { Warning } from '@phosphor-icons/react';
+import { resolveSeriesColor } from '../utils/series-color.js';
+import { chartTheme } from '../theme/chart.theme.js';
 
 /**
  * Internal component that uses context to render bars and lines
@@ -16,31 +18,22 @@ import { ExclamationTriangleIcon } from '@heroicons/react/20/solid';
 const ComboChartRenderers = ({ barKeys, lineKeys, stacked, barRadius, dotRadius, gap, categoryGap, strokeWidth, curved, curveType, showDots, variant, }) => {
     const context = useComboChartContext();
     const dataKeys = Object.keys(context.config);
-    const seriesColors = [
-        "var(--color-primary)",
-        "var(--color-warning)",
-        "var(--color-success)",
-        "var(--color-danger)",
-    ];
+    const seriesColors = chartTheme.baseStyle.colors.series;
     // Filter configs for bars and lines, and assign colors
     const barConfig = {};
     barKeys.forEach((key) => {
-        var _a;
         const keyIndex = dataKeys.indexOf(key);
         barConfig[key] = {
             ...context.config[key],
-            color: ((_a = context.config[key]) === null || _a === void 0 ? void 0 : _a.color) ||
-                seriesColors[keyIndex % seriesColors.length],
+            color: resolveSeriesColor(keyIndex, key, context.config, seriesColors),
         };
     });
     const lineConfig = {};
     lineKeys.forEach((key) => {
-        var _a;
         const keyIndex = dataKeys.indexOf(key);
         lineConfig[key] = {
             ...context.config[key],
-            color: ((_a = context.config[key]) === null || _a === void 0 ? void 0 : _a.color) ||
-                seriesColors[keyIndex % seriesColors.length],
+            color: resolveSeriesColor(keyIndex, key, context.config, seriesColors),
         };
     });
     // Create custom tooltip handler that includes ALL series (bars + lines)
@@ -49,14 +42,14 @@ const ComboChartRenderers = ({ barKeys, lineKeys, stacked, barRadius, dotRadius,
         const dataItem = context.data.find((d) => d.name === content.category);
         if (dataItem) {
             const allSeries = dataKeys.map((key, idx) => {
-                var _a, _b;
+                var _a;
                 const value = dataItem[key];
                 const isNull = value === null || value === undefined || (typeof value === 'number' && !isFinite(value));
                 return {
                     key,
                     label: ((_a = context.config[key]) === null || _a === void 0 ? void 0 : _a.label) || key,
                     value: isNull ? 0 : value,
-                    color: ((_b = context.config[key]) === null || _b === void 0 ? void 0 : _b.color) || seriesColors[idx % seriesColors.length],
+                    color: resolveSeriesColor(idx, key, context.config, seriesColors),
                 };
             }).filter(series => {
                 // Only show series that have valid non-zero values
@@ -117,19 +110,13 @@ className, title, description, enableKeyboardNavigation = COMBO_CHART_DEFAULTS.e
         const seriesConfig = config[key];
         return (seriesConfig === null || seriesConfig === void 0 ? void 0 : seriesConfig.type) === "line";
     });
-    const legendSeriesColors = [
-        "var(--color-primary)",
-        "var(--color-warning)",
-        "var(--color-success)",
-        "var(--color-danger)",
-    ];
     const resolvedLegendPosition = resolveLegendPosition(legend, config || {});
     const legendItems = dataKeys.map((key, index) => {
-        var _a, _b, _c;
+        var _a, _b;
         return ({
             key,
             label: (_b = (_a = config[key]) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : key,
-            color: ((_c = config[key]) === null || _c === void 0 ? void 0 : _c.color) || legendSeriesColors[index % legendSeriesColors.length],
+            color: resolveSeriesColor(index, key, config, chartTheme.baseStyle.colors.series),
         });
     });
     // Use unified chart scales hook
@@ -146,7 +133,7 @@ className, title, description, enableKeyboardNavigation = COMBO_CHART_DEFAULTS.e
     });
     // Early return for invalid data with error message
     if (!isValid) {
-        return (jsxs("div", { className: cn("chart-container flex flex-col items-center justify-center p-6 border border-border rounded-lg text-2xl", className), role: "alert", "aria-live": "polite", ...props, children: [jsxs("div", { className: "flex flex-col items-center gap-4 mb-1", children: [jsx(ExclamationTriangleIcon, { className: "size-6 text-[var(--color-danger)]" }), jsx("div", { className: "text-base font-semibold text-[var(--color-text-secondary)]", children: "Invalid Chart Data" })] }), jsx("p", { className: "text-base text-[var(--color-text-secondary)]/70 mb-2", children: "Unable to render chart due to data validation errors" })] }));
+        return (jsxs("div", { className: cn("chart-container flex flex-col items-center justify-center p-6 border border-border rounded-lg text-2xl", className), role: "alert", "aria-live": "polite", ...props, children: [jsxs("div", { className: "flex flex-col items-center gap-4 mb-1", children: [jsx(Warning, { className: "size-6 text-[var(--color-danger)]" }), jsx("div", { className: "text-base font-semibold text-[var(--color-text-secondary)]", children: "Invalid Chart Data" })] }), jsx("p", { className: "text-base text-[var(--color-text-secondary)]/70 mb-2", children: "Unable to render chart due to data validation errors" })] }));
     }
     // Early return for empty data
     if (!sanitizedData || sanitizedData.length === 0) {