flikkui 0.1.0-beta.8 → 0.1.0-beta.9

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

@@ -1,7 +1,6 @@
 import { __rest, __assign, __spreadArray } from '../../../node_modules/tslib/tslib.es6.js';
 import React__default, { useRef, useState, useEffect } from 'react';
 import { cn } from '../../../utils/cn.js';
-import { useChartTheme } from '../hooks/useChartTheme.js';
 import { useTooltipPosition } from '../hooks/useTooltipPosition.js';
 import { useChartAccessibility } from '../hooks/useChartAccessibility.js';
 import { XAxis } from '../shared/ChartAxis/XAxis.js';
@@ -10,29 +9,27 @@ import { HorizontalGrid } from '../shared/ChartGrid/HorizontalGrid.js';
 import { ChartTooltip } from '../shared/ChartTooltip/ChartTooltip.js';
 import { ChartMarker } from '../shared/ChartMarker/ChartMarker.js';
 import { ChartCrosshair } from '../shared/ChartCrosshair/ChartCrosshair.js';
-import { getColorValue } from '../utils/color-utils.js';
 import { AREA_CHART_DEFAULTS } from './AreaChart.types.js';
 
 // Color configuration for data series
 var getSeriesColorClass = function (index) {
     var colors = [
-        "stroke-primary-base fill-primary-base",
-        "stroke-warning-base fill-warning-base",
-        "stroke-success-base fill-success-base",
-        "stroke-error-base fill-error-base",
+        "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)]",
     ];
     return colors[index % colors.length];
 };
-// Get fill color for gradients - now using comprehensive color mapping
+// Get fill color for gradients - extract CSS variables directly
 var getSeriesFillColor = function (index) {
-    var colorClasses = [
-        "fill-primary-base",
-        "fill-warning-base",
-        "fill-success-base",
-        "fill-error-base",
+    var colorVars = [
+        "var(--color-primary)",
+        "var(--color-warning)",
+        "var(--color-success)",
+        "var(--color-danger)",
     ];
-    var colorClass = colorClasses[index % colorClasses.length];
-    return getColorValue(colorClass);
+    return colorVars[index % colorVars.length];
 };
 // Simplified curve generation
 var generateMonotonePath = function (points) {
@@ -64,6 +61,49 @@ var generateLinearPath = function (points) {
     }
     return path;
 };
+var generateStepPath = function (points) {
+    if (points.length === 0)
+        return "";
+    if (points.length === 1)
+        return "M ".concat(points[0].x, " ").concat(points[0].y);
+    var path = "M ".concat(points[0].x, " ").concat(points[0].y);
+    for (var i = 1; i < points.length; i++) {
+        var prev = points[i - 1];
+        var curr = points[i];
+        var midX = prev.x + (curr.x - prev.x) / 2;
+        // Step: horizontal to midpoint, vertical to current y, horizontal to current x
+        path += " L ".concat(midX, " ").concat(prev.y, " L ").concat(midX, " ").concat(curr.y, " L ").concat(curr.x, " ").concat(curr.y);
+    }
+    return path;
+};
+var generateStepBeforePath = function (points) {
+    if (points.length === 0)
+        return "";
+    if (points.length === 1)
+        return "M ".concat(points[0].x, " ").concat(points[0].y);
+    var path = "M ".concat(points[0].x, " ").concat(points[0].y);
+    for (var i = 1; i < points.length; i++) {
+        var prev = points[i - 1];
+        var curr = points[i];
+        // Step before: vertical first, then horizontal
+        path += " L ".concat(prev.x, " ").concat(curr.y, " L ").concat(curr.x, " ").concat(curr.y);
+    }
+    return path;
+};
+var generateStepAfterPath = function (points) {
+    if (points.length === 0)
+        return "";
+    if (points.length === 1)
+        return "M ".concat(points[0].x, " ").concat(points[0].y);
+    var path = "M ".concat(points[0].x, " ").concat(points[0].y);
+    for (var i = 1; i < points.length; i++) {
+        var prev = points[i - 1];
+        var curr = points[i];
+        // Step after: horizontal first, then vertical
+        path += " L ".concat(curr.x, " ").concat(prev.y, " L ").concat(curr.x, " ").concat(curr.y);
+    }
+    return path;
+};
 // Simple curve implementation
 var generateCurvePath = function (points, curveType) {
     if (curveType === void 0) { curveType = "monotone"; }
@@ -74,50 +114,55 @@ var generateCurvePath = function (points, curveType) {
     switch (curveType) {
         case "monotone":
             return generateMonotonePath(points);
+        case "step":
+            return generateStepPath(points);
+        case "stepBefore":
+            return generateStepBeforePath(points);
+        case "stepAfter":
+            return generateStepAfterPath(points);
         case "linear":
         default:
             return generateLinearPath(points);
     }
 };
 var AreaChart = function (_a) {
+    // Simplified color system - no complex theme hook needed
     var data = _a.data, config = _a.config, 
     // Standardized display props with defaults
     _b = _a.showGrid, 
     // Standardized display props with defaults
     showGrid = _b === void 0 ? AREA_CHART_DEFAULTS.showGrid : _b, _c = _a.showXAxis, showXAxis = _c === void 0 ? AREA_CHART_DEFAULTS.showXAxis : _c, _d = _a.showYAxis, showYAxis = _d === void 0 ? AREA_CHART_DEFAULTS.showYAxis : _d, _e = _a.showNullValues, showNullValues = _e === void 0 ? AREA_CHART_DEFAULTS.showNullValues : _e, // NEW!
-    propMinValue = _a.minValue, propMaxValue = _a.maxValue, _f = _a.variant, variant = _f === void 0 ? AREA_CHART_DEFAULTS.variant : _f, theme = _a.theme, 
-    // Standardized visual props with defaults (renamed from area-specific names)
+    propMinValue = _a.minValue, propMaxValue = _a.maxValue, _f = _a.variant; _f === void 0 ? AREA_CHART_DEFAULTS.variant : _f; _a.theme; 
+    var // Standardized visual props with defaults (renamed from area-specific names)
     _g = _a.radius, 
     // Standardized visual props with defaults (renamed from area-specific names)
     radius = _g === void 0 ? AREA_CHART_DEFAULTS.radius : _g, // Was dotRadius
     _h = _a.strokeWidth, // Was dotRadius
     strokeWidth = _h === void 0 ? AREA_CHART_DEFAULTS.strokeWidth : _h, _j = _a.curved, curved = _j === void 0 ? AREA_CHART_DEFAULTS.curved : _j, _k = _a.curveType, curveType = _k === void 0 ? AREA_CHART_DEFAULTS.curveType : _k, _l = _a.showDots, showDots = _l === void 0 ? AREA_CHART_DEFAULTS.showDots : _l, _m = _a.fillOpacity, fillOpacity = _m === void 0 ? AREA_CHART_DEFAULTS.fillOpacity : _m, _o = _a.showStroke, showStroke = _o === void 0 ? AREA_CHART_DEFAULTS.showStroke : _o, _p = _a.stacked, stacked = _p === void 0 ? AREA_CHART_DEFAULTS.stacked : _p, 
     // Base props
-    className = _a.className, title = _a.title, description = _a.description, _q = _a.enableKeyboardNavigation, enableKeyboardNavigation = _q === void 0 ? AREA_CHART_DEFAULTS.enableKeyboardNavigation : _q, children = _a.children, props = __rest(_a, ["data", "config", "showGrid", "showXAxis", "showYAxis", "showNullValues", "minValue", "maxValue", "variant", "theme", "radius", "strokeWidth", "curved", "curveType", "showDots", "fillOpacity", "showStroke", "stacked", "className", "title", "description", "enableKeyboardNavigation", "children"]);
-    // Use the new theme system
-    var _r = useChartTheme({ config: config, variant: variant, theme: theme }); _r.getSeriesColor; _r.getColorClass; _r.getOpacityClass; _r.getTransitionClass; 
-    // Legacy support
-    _r.getThemeValue;
+    className = _a.className, title = _a.title, description = _a.description, _q = _a.enableKeyboardNavigation, enableKeyboardNavigation = _q === void 0 ? AREA_CHART_DEFAULTS.enableKeyboardNavigation : _q, 
+    // Additional className overrides for chart elements
+    svgClassName = _a.svgClassName, areaClassName = _a.areaClassName, lineClassName = _a.lineClassName, gridClassName = _a.gridClassName, axisClassName = _a.axisClassName, children = _a.children, props = __rest(_a, ["data", "config", "showGrid", "showXAxis", "showYAxis", "showNullValues", "minValue", "maxValue", "variant", "theme", "radius", "strokeWidth", "curved", "curveType", "showDots", "fillOpacity", "showStroke", "stacked", "className", "title", "description", "enableKeyboardNavigation", "svgClassName", "areaClassName", "lineClassName", "gridClassName", "axisClassName", "children"]);
     var containerRef = useRef(null);
-    var _s = useState({ width: 600, height: 400 }), dimensions = _s[0], setDimensions = _s[1];
-    var _t = useState(null), hoveredPoint = _t[0], setHoveredPoint = _t[1];
+    var _r = useState({ width: 600, height: 400 }), dimensions = _r[0], setDimensions = _r[1];
+    var _s = useState(null), hoveredPoint = _s[0], setHoveredPoint = _s[1];
     // Detect if device is mobile/touch
     var isMobile = typeof window !== 'undefined' &&
         ('ontouchstart' in window || navigator.maxTouchPoints > 0);
     // Use the new tooltip positioning hook
-    var _u = useTooltipPosition({
+    var _t = useTooltipPosition({
         containerRef: containerRef,
         isMobile: isMobile,
-    }), tooltipData = _u.tooltipData, tooltipRef = _u.tooltipRef, handleMouseEnter = _u.handleMouseEnter, handleMouseMove = _u.handleMouseMove, handleMouseLeave = _u.handleMouseLeave;
+    }), tooltipData = _t.tooltipData, tooltipRef = _t.tooltipRef, handleMouseEnter = _t.handleMouseEnter, handleMouseMove = _t.handleMouseMove, handleMouseLeave = _t.handleMouseLeave;
     // Use accessibility hook
-    var _v = useChartAccessibility({
+    var _u = useChartAccessibility({
         chartType: 'area',
         data: data,
         config: config,
         title: title,
         description: description,
         enableKeyboardNavigation: enableKeyboardNavigation,
-    }), chartAccessibilityProps = _v.chartAccessibilityProps, descriptionProps = _v.descriptionProps; _v.focusedElementIndex; _v.isKeyboardMode; var handleMouseInteraction = _v.handleMouseInteraction;
+    }), chartAccessibilityProps = _u.chartAccessibilityProps, descriptionProps = _u.descriptionProps, handleMouseInteraction = _u.handleMouseInteraction;
     // Measure container dimensions
     useEffect(function () {
         var updateDimensions = function () {
@@ -140,7 +185,7 @@ var AreaChart = function (_a) {
     }, []);
     // Early return if no data
     if (!data || data.length === 0) {
-        return (React__default.createElement("div", __assign({ className: cn("chart-container flex items-center justify-center text-neutral-500", className), role: "img", "aria-label": "Empty area chart" }, props),
+        return (React__default.createElement("div", __assign({ className: cn("chart-container flex items-center justify-center text-[var(--color-text-placeholder)]", className), role: "img", "aria-label": "Empty area chart" }, props),
             React__default.createElement("span", null, "No data available")));
     }
     // Calculate dimensions
@@ -292,9 +337,9 @@ var AreaChart = function (_a) {
         return stackedData;
     };
     var stackedValues = getStackedValues();
-    return (React__default.createElement("div", __assign({ ref: containerRef, className: cn("chart-container w-full h-full", className) }, chartAccessibilityProps, { onMouseEnter: handleMouseInteraction, onMouseMove: handleMouseInteraction }, props),
+    return (React__default.createElement("div", __assign({ ref: containerRef, className: cn("chart-container w-full h-full relative", "[&_.chart-areas]:transition-opacity [&_.chart-areas]:duration-300", "[&_.chart-hover-areas]:cursor-pointer", "[&_.chart-hover-markers]:transition-all [&_.chart-hover-markers]:duration-200", className) }, chartAccessibilityProps, { onMouseEnter: handleMouseInteraction, onMouseMove: handleMouseInteraction }, props),
         descriptionProps && React__default.createElement("div", __assign({}, descriptionProps)),
-        React__default.createElement("svg", { width: "100%", height: "100%", viewBox: "0 0 ".concat(dimensions.width, " ").concat(dimensions.height), className: "overflow-visible", role: "presentation" },
+        React__default.createElement("svg", { width: "100%", height: "100%", viewBox: "0 0 ".concat(dimensions.width, " ").concat(dimensions.height), className: cn("overflow-visible", "[&_.chart-areas_path]:transition-all [&_.chart-areas_path]:duration-200", svgClassName), role: "presentation" },
             React__default.createElement("defs", null,
                 React__default.createElement("filter", { id: "area-shadow", x: "-20%", y: "-20%", width: "140%", height: "140%" },
                     React__default.createElement("feDropShadow", { dx: "4", dy: "4", stdDeviation: "6", floodOpacity: "0.1", floodColor: "#000000" })),
@@ -316,7 +361,7 @@ var AreaChart = function (_a) {
                     React__default.createElement("stop", { offset: "50%", stopColor: "#6b7280", stopOpacity: "0.5" }),
                     React__default.createElement("stop", { offset: "60%", stopColor: "#6b7280", stopOpacity: "0.3" }),
                     React__default.createElement("stop", { offset: "100%", stopColor: "#6b7280", stopOpacity: "0" }))),
-            React__default.createElement(HorizontalGrid, { show: showGrid, x: margin.left, y: margin.top, width: innerWidth, height: innerHeight, lineCount: 5 }),
+            React__default.createElement(HorizontalGrid, { show: showGrid, x: margin.left, y: margin.top, width: innerWidth, height: innerHeight, lineCount: 5, className: gridClassName }),
             React__default.createElement(ChartCrosshair, { show: hoveredPoint !== null, x: hoveredPoint !== null ? (data.length === 1
                     ? margin.left + innerWidth / 2
                     : margin.left + (hoveredPoint.index / (data.length - 1)) * innerWidth) : 0, y: hoveredPoint !== null && dataKeys.length === 1 ? (function () {
@@ -326,19 +371,19 @@ var AreaChart = function (_a) {
                     var numValue = typeof singleValue === 'number' ? singleValue : 0;
                     return margin.top + innerHeight - ((numValue - minValue) / (maxValue - minValue)) * innerHeight;
                 })() : undefined, margin: margin, innerWidth: innerWidth, innerHeight: innerHeight, showHorizontal: dataKeys.length === 1 }),
-            React__default.createElement(YAxis, { show: showYAxis, min: minValue, max: maxValue, x: margin.left, y: margin.top, height: innerHeight, showGrid: false, gridWidth: innerWidth, tickFormatter: function (value) {
+            React__default.createElement(YAxis, { show: showYAxis, min: minValue, max: maxValue, x: margin.left, y: margin.top, height: innerHeight, showGrid: false, gridWidth: innerWidth, className: axisClassName, tickFormatter: function (value) {
                     if (value >= 1000)
                         return "".concat((value / 1000).toFixed(0), "k");
                     return value.toString();
                 } }),
-            React__default.createElement("g", { className: "chart-areas" }, dataKeys.map(function (key, keyIndex) {
+            React__default.createElement("g", { className: cn("chart-areas", "[&_path]:drop-shadow-sm [&_path]:transition-all [&_path]:duration-200", areaClassName) }, dataKeys.map(function (key, keyIndex) {
                 var paths = generateAreaPath(key, stackedValues[key]);
                 var colorClass = getSeriesColorClass(keyIndex);
                 if (!paths)
                     return null;
                 return (React__default.createElement("g", { key: key },
                     React__default.createElement("path", { d: paths.areaPath, fill: "url(#area-gradient-".concat(key, ")"), className: "transition-all duration-200", filter: "url(#area-shadow)" }),
-                    showStroke && (React__default.createElement("path", { d: paths.linePath, fill: "none", strokeWidth: strokeWidth, strokeLinecap: "round", className: cn("transition-all duration-200", colorClass.split(' ').find(function (cls) { return cls.startsWith('stroke-'); }) || '') })),
+                    showStroke && (React__default.createElement("path", { d: paths.linePath, fill: "none", strokeWidth: strokeWidth, strokeLinecap: "round", className: cn("transition-all duration-200", colorClass.split(' ').find(function (cls) { return cls.startsWith('stroke-'); }) || '', lineClassName) })),
                     showDots &&
                         data.map(function (item, dataIndex) {
                             var rawValue = item[key];
@@ -351,10 +396,8 @@ var AreaChart = function (_a) {
                             // Don't render dots for null values regardless of showNullValues
                             if (isNull)
                                 return null;
-                            stacked && stackedValues[key] ? stackedValues[key][dataIndex] : minValue;
                             var topValue = stacked && stackedValues[key] ? stackedValues[key][dataIndex] + value : value;
                             var _a = getPointPosition(dataIndex, topValue), x = _a.x, y = _a.y;
-                            (hoveredPoint === null || hoveredPoint === void 0 ? void 0 : hoveredPoint.index) === dataIndex && hoveredPoint.key === key;
                             return (React__default.createElement("g", { key: "".concat(key, "-").concat(dataIndex) },
                                 React__default.createElement(ChartMarker, { cx: x, cy: y, radius: radius, colorClass: colorClass })));
                         })));
@@ -371,7 +414,6 @@ var AreaChart = function (_a) {
                 // Don't render hover markers for null values
                 if (isNull)
                     return null;
-                stacked && stackedValues[key] ? stackedValues[key][hoveredPoint.index] : minValue;
                 var topValue = stacked && stackedValues[key] ? stackedValues[key][hoveredPoint.index] + value : value;
                 var _a = getPointPosition(hoveredPoint.index, topValue), x = _a.x, y = _a.y;
                 var colorClass = getSeriesColorClass(keyIndex);
@@ -426,7 +468,7 @@ var AreaChart = function (_a) {
                         }
                     }, onMouseLeave: handleMouseLeave }));
             })),
-            React__default.createElement(XAxis, { show: showXAxis, data: data, x: margin.left, y: margin.top + innerHeight, width: innerWidth, categoryWidth: innerWidth / data.length, categoryGap: 0 })),
+            React__default.createElement(XAxis, { show: showXAxis, data: data, x: margin.left, y: margin.top + innerHeight, width: innerWidth, categoryWidth: innerWidth / data.length, categoryGap: 0, className: axisClassName })),
         React__default.createElement(ChartTooltip, { active: !!tooltipData, position: tooltipData ? { x: tooltipData.x, y: tooltipData.y } : { x: 0, y: 0 }, tooltipRef: tooltipRef, content: tooltipData === null || tooltipData === void 0 ? void 0 : tooltipData.content, chartType: "area" }),
         children));
 };

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

@@ -3,11 +3,15 @@ export interface AreaChartProps extends BaseChartProps, StandardChartDisplayProp
     radius?: number;
     strokeWidth?: number;
     curved?: boolean;
-    curveType?: 'linear' | 'monotone';
     showDots?: boolean;
     fillOpacity?: number;
     showStroke?: boolean;
     stacked?: boolean;
+    svgClassName?: string;
+    areaClassName?: string;
+    lineClassName?: string;
+    gridClassName?: string;
+    axisClassName?: string;
 }
 export declare const AREA_CHART_DEFAULTS: {
     readonly radius: 4;

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

@@ -1,7 +1,6 @@
 import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
 import React__default, { useRef, useState, useEffect } from 'react';
 import { cn } from '../../../utils/cn.js';
-import { useChartTheme } from '../hooks/useChartTheme.js';
 import { useTooltipPosition } from '../hooks/useTooltipPosition.js';
 import { useChartAccessibility } from '../hooks/useChartAccessibility.js';
 import { useChartValidation } from '../hooks/useChartValidation.js';
@@ -10,7 +9,6 @@ import { XAxis } from '../shared/ChartAxis/XAxis.js';
 import { YAxis } from '../shared/ChartAxis/YAxis.js';
 import { HorizontalGrid } from '../shared/ChartGrid/HorizontalGrid.js';
 import { ChartTooltip } from '../shared/ChartTooltip/ChartTooltip.js';
-import { getColorValue } from '../utils/color-utils.js';
 import { BAR_CHART_DEFAULTS } from './BarChart.types.js';
 
 var BarChart = function (_a) {
@@ -19,8 +17,8 @@ var BarChart = function (_a) {
     // Standardized display props with defaults
     _c = _a.showGrid, 
     // Standardized display props with defaults
-    showGrid = _c === void 0 ? BAR_CHART_DEFAULTS.showGrid : _c, _d = _a.showXAxis, showXAxis = _d === void 0 ? BAR_CHART_DEFAULTS.showXAxis : _d, _e = _a.showYAxis, showYAxis = _e === void 0 ? BAR_CHART_DEFAULTS.showYAxis : _e, _f = _a.showNullValues, showNullValues = _f === void 0 ? BAR_CHART_DEFAULTS.showNullValues : _f, propMinValue = _a.minValue, propMaxValue = _a.maxValue, _g = _a.variant, variant = _g === void 0 ? BAR_CHART_DEFAULTS.variant : _g, theme = _a.theme, 
-    // Standardized visual props with defaults (renamed from bar-specific names)
+    showGrid = _c === void 0 ? BAR_CHART_DEFAULTS.showGrid : _c, _d = _a.showXAxis, showXAxis = _d === void 0 ? BAR_CHART_DEFAULTS.showXAxis : _d, _e = _a.showYAxis, showYAxis = _e === void 0 ? BAR_CHART_DEFAULTS.showYAxis : _e, _f = _a.showNullValues, showNullValues = _f === void 0 ? BAR_CHART_DEFAULTS.showNullValues : _f, propMinValue = _a.minValue, propMaxValue = _a.maxValue, _g = _a.variant; _g === void 0 ? BAR_CHART_DEFAULTS.variant : _g; _a.theme; 
+    var // Standardized visual props with defaults (renamed from bar-specific names)
     _h = _a.radius, 
     // Standardized visual props with defaults (renamed from bar-specific names)
     radius = _h === void 0 ? BAR_CHART_DEFAULTS.radius : _h, // Was barRadius
@@ -35,12 +33,12 @@ var BarChart = function (_a) {
     // Bar-specific props
     _m === void 0 ? BAR_CHART_DEFAULTS.orientation : _m; 
     var // Base props
-    className = _a.className, title = _a.title, description = _a.description, _o = _a.enableKeyboardNavigation, enableKeyboardNavigation = _o === void 0 ? BAR_CHART_DEFAULTS.enableKeyboardNavigation : _o, children = _a.children, props = __rest(_a, ["data", "config", "showGrid", "showXAxis", "showYAxis", "showNullValues", "minValue", "maxValue", "variant", "theme", "radius", "gap", "categoryGap", "stacked", "orientation", "className", "title", "description", "enableKeyboardNavigation", "children"]);
+    className = _a.className, title = _a.title, description = _a.description, _o = _a.enableKeyboardNavigation, enableKeyboardNavigation = _o === void 0 ? BAR_CHART_DEFAULTS.enableKeyboardNavigation : _o, _p = _a.showValidationWarnings, showValidationWarnings = _p === void 0 ? process.env.NODE_ENV === 'development' : _p, children = _a.children, props = __rest(_a, ["data", "config", "showGrid", "showXAxis", "showYAxis", "showNullValues", "minValue", "maxValue", "variant", "theme", "radius", "gap", "categoryGap", "stacked", "orientation", "className", "title", "description", "enableKeyboardNavigation", "showValidationWarnings", "children"]);
     // Validate data and config with error handling
-    var _p = useChartValidation(data, config, {
+    var _q = useChartValidation(data, config, {
         autoSanitize: true,
         logWarnings: true,
-    }), validation = _p.validation, sanitizedData = _p.sanitizedData, isValid = _p.isValid, hasWarnings = _p.hasWarnings, safeScale = _p.safeScale, safeMath = _p.safeMath;
+    }), validation = _q.validation, sanitizedData = _q.sanitizedData, isValid = _q.isValid, hasWarnings = _q.hasWarnings, safeScale = _q.safeScale, safeMath = _q.safeMath;
     // Early return for invalid data with error message
     if (!isValid) {
         return (React__default.createElement("div", __assign({ className: cn("chart-container flex flex-col items-center justify-center p-6 border border-warning-200 bg-warning-50 rounded-lg text-center", className), role: "alert", "aria-live": "polite" }, props),
@@ -63,10 +61,16 @@ var BarChart = function (_a) {
         return (React__default.createElement("div", __assign({ className: cn("chart-container flex items-center justify-center text-neutral-500", className), role: "img", "aria-label": "Empty bar chart" }, props),
             React__default.createElement("span", null, "No data available")));
     }
-    // Use the new theme system
-    var _q = useChartTheme({ config: config, variant: variant, theme: theme }); _q.getSeriesColor; _q.getColorClass; _q.getOpacityClass; _q.getTransitionClass; 
-    // Legacy support
-    _q.getThemeValue;
+    // Simple color functions based on direct CSS variables (following guidelines)
+    var getSeriesFillColor = function (index) {
+        var colorVars = [
+            "var(--color-primary)",
+            "var(--color-warning)",
+            "var(--color-success)",
+            "var(--color-danger)",
+        ];
+        return colorVars[index % colorVars.length];
+    };
     var containerRef = useRef(null);
     var _r = useState({ width: 600, height: 400 }), dimensions = _r[0], setDimensions = _r[1];
     var _s = useState(null), hoveredCategory = _s[0], setHoveredCategory = _s[1];
@@ -168,31 +172,15 @@ var BarChart = function (_a) {
                     var range = maxValue - minValue;
                     var barHeight = range > 0 ? ((value - minValue) / range) * innerHeight : 0;
                     var y = margin.top + innerHeight - barHeight;
-                    // Get the color class for the first series (index 0)
-                    var colorClass = void 0;
-                    switch (0 % 4) {
-                        case 0:
-                            colorClass = "fill-primary-base";
-                            break;
-                        case 1:
-                            colorClass = "fill-warning-base";
-                            break;
-                        case 2:
-                            colorClass = "fill-success-base";
-                            break;
-                        case 3:
-                            colorClass = "fill-danger-base";
-                            break;
-                        default:
-                            colorClass = "fill-primary-base";
-                    }
+                    // Get the fill color for the first series (index 0)
+                    var fillColor = getSeriesFillColor(0);
                     var content = {
                         category: item.name || "Category ".concat(focusedElementIndex + 1),
                         series: [{
                                 key: key,
                                 label: ((_a = config[key]) === null || _a === void 0 ? void 0 : _a.label) || key,
                                 value: value,
-                                color: ((_b = config[key]) === null || _b === void 0 ? void 0 : _b.color) || getColorValue(colorClass)
+                                color: ((_b = config[key]) === null || _b === void 0 ? void 0 : _b.color) || fillColor
                             }]
                     };
                     var svgCoordinates = {
@@ -218,11 +206,15 @@ var BarChart = function (_a) {
     return (React__default.createElement(ChartErrorBoundary, { className: className, showErrorDetails: process.env.NODE_ENV === 'development' },
         React__default.createElement("div", __assign({ ref: containerRef, className: cn("chart-container w-full h-full", className) }, chartAccessibilityProps, { onMouseEnter: handleMouseInteraction, onMouseMove: handleMouseInteraction }, props),
             descriptionProps && React__default.createElement("div", __assign({}, descriptionProps)),
-            process.env.NODE_ENV === 'development' && hasWarnings && (React__default.createElement("div", { className: "absolute top-2 left-2 right-2 z-10 p-2 bg-yellow-50 border border-yellow-200 rounded text-xs text-yellow-800 shadow-sm" },
+            showValidationWarnings && hasWarnings && (React__default.createElement("div", { className: "absolute top-2 left-2 right-2 z-10 p-2 bg-yellow-50 border border-yellow-200 rounded text-xs text-yellow-800 shadow-sm" },
                 React__default.createElement("strong", null, "Chart Warnings:"),
-                React__default.createElement("ul", { className: "mt-1" }, validation.warnings.map(function (warning, index) { return (React__default.createElement("li", { key: index },
+                React__default.createElement("ul", { className: "mt-1" }, validation.warnings
+                    .filter(function (warning) { return !warning.message.includes('has no valid numeric values'); })
+                    .map(function (warning, index) { return (React__default.createElement("li", { key: index },
                     "\u2022 ",
-                    warning.message)); })))),
+                    warning.message)); })),
+                validation.warnings.some(function (warning) { return warning.message.includes('has no valid numeric values'); }) && (React__default.createElement("div", { className: "mt-2 pt-2 border-t border-yellow-200" },
+                    React__default.createElement("span", { className: "text-yellow-700" }, "\u2139\uFE0F Null/undefined values are handled by using averages from other data points"))))),
             React__default.createElement("svg", { width: "100%", height: "100%", viewBox: "0 0 ".concat(dimensions.width, " ").concat(dimensions.height) },
                 React__default.createElement(HorizontalGrid, { show: showGrid, x: margin.left, y: margin.top, width: innerWidth, height: innerHeight, lineCount: 5 }),
                 React__default.createElement(YAxis, { show: showYAxis, min: minValue, max: maxValue, x: margin.left, y: margin.top, height: innerHeight, showGrid: false, gridWidth: innerWidth, tickFormatter: function (value) {
@@ -244,24 +236,8 @@ var BarChart = function (_a) {
                             var barHeight = range > 0 ? safeMath.scale(actualValue, minValue, maxValue, 0, innerHeight) : 0;
                             var currentY = stackedY_1 - barHeight;
                             stackedY_1 = currentY;
-                            // Get color class for this data series
-                            var colorClass;
-                            switch (keyIndex % 4) {
-                                case 0:
-                                    colorClass = "fill-primary-base";
-                                    break;
-                                case 1:
-                                    colorClass = "fill-warning-base";
-                                    break;
-                                case 2:
-                                    colorClass = "fill-success-base";
-                                    break;
-                                case 3:
-                                    colorClass = "fill-danger-base";
-                                    break;
-                                default:
-                                    colorClass = "fill-primary-base";
-                            }
+                            // Get fill color for this data series using direct CSS variables
+                            var fillColor = getSeriesFillColor(keyIndex);
                             var isHovered = hoveredCategory === index;
                             var isAnyBarHovered = hoveredCategory !== null;
                             var shouldReduceOpacity = isAnyBarHovered && !isHovered;
@@ -276,10 +252,17 @@ var BarChart = function (_a) {
                             }
                             return (React__default.createElement("path", { key: keyIndex, d: createRoundedTopBarPath(x, currentY, individualBarWidth, barHeight, keyIndex === dataKeys.length - 1 ? radius : 0), className: cn("transition-all duration-750", 
                                 // Only add cursor-pointer for non-null bars
-                                !isNull && "cursor-pointer", !isNull && shouldReduceOpacity ? "fill-slate-500" :
-                                    isNull ? "fill-neutral-300 " : colorClass, !isNull && shouldReduceOpacity && "opacity-20", 
+                                !isNull && "cursor-pointer", 
                                 // Keyboard focus styles
-                                isFocused && "stroke-primary-600 stroke-2"), onMouseEnter: !isNull ? function (e) {
+                                isFocused && "stroke-2"), style: {
+                                    fill: isNull
+                                        ? "var(--color-neutral)"
+                                        : shouldReduceOpacity
+                                            ? "var(--color-neutral)"
+                                            : fillColor,
+                                    opacity: !isNull && shouldReduceOpacity ? 0.2 : 1,
+                                    stroke: isFocused ? "var(--color-primary)" : "none"
+                                }, onMouseEnter: !isNull ? function (e) {
                                     var _a, _b;
                                     setHoveredCategory(index);
                                     // Create content in MultiSeriesData format for consistency
@@ -289,7 +272,7 @@ var BarChart = function (_a) {
                                                 key: key,
                                                 label: ((_a = config[key]) === null || _a === void 0 ? void 0 : _a.label) || key,
                                                 value: value,
-                                                color: ((_b = config[key]) === null || _b === void 0 ? void 0 : _b.color) || getColorValue(colorClass)
+                                                color: ((_b = config[key]) === null || _b === void 0 ? void 0 : _b.color) || fillColor
                                             }]
                                     };
                                     var svgCoordinates = {
@@ -324,24 +307,8 @@ var BarChart = function (_a) {
                             var barHeight = range > 0 ? safeMath.scale(actualValue, minValue, maxValue, 0, innerHeight) : 0;
                             var barX = x + keyIndex * (individualBarWidth + gap);
                             var barY = margin.top + innerHeight - barHeight;
-                            // Get color class for this data series
-                            var colorClass;
-                            switch (keyIndex % 4) {
-                                case 0:
-                                    colorClass = "fill-primary-base";
-                                    break;
-                                case 1:
-                                    colorClass = "fill-warning-base";
-                                    break;
-                                case 2:
-                                    colorClass = "fill-success-base";
-                                    break;
-                                case 3:
-                                    colorClass = "fill-danger-base";
-                                    break;
-                                default:
-                                    colorClass = "fill-primary-base";
-                            }
+                            // Get fill color for this data series using direct CSS variables
+                            var fillColor = getSeriesFillColor(keyIndex);
                             var isHovered = hoveredCategory === index;
                             var isAnyBarHovered = hoveredCategory !== null;
                             var shouldReduceOpacity = isAnyBarHovered && !isHovered;
@@ -356,10 +323,17 @@ var BarChart = function (_a) {
                             }
                             return (React__default.createElement("path", { key: keyIndex, d: createRoundedTopBarPath(barX, barY, individualBarWidth, barHeight, radius), className: cn("transition-all duration-750", 
                                 // Only add cursor-pointer for non-null bars
-                                !isNull && "cursor-pointer", !isNull && shouldReduceOpacity ? "fill-slate-500" :
-                                    isNull ? "fill-neutral-300" : colorClass, !isNull && shouldReduceOpacity && "opacity-20", 
+                                !isNull && "cursor-pointer", 
                                 // Keyboard focus styles
-                                isFocused && "stroke-primary-600 stroke-2"), onMouseEnter: !isNull ? function (e) {
+                                isFocused && "stroke-2"), style: {
+                                    fill: isNull
+                                        ? "var(--color-neutral)"
+                                        : shouldReduceOpacity
+                                            ? "var(--color-neutral)"
+                                            : fillColor,
+                                    opacity: !isNull && shouldReduceOpacity ? 0.2 : 1,
+                                    stroke: isFocused ? "var(--color-primary)" : "none"
+                                }, onMouseEnter: !isNull ? function (e) {
                                     var _a, _b;
                                     setHoveredCategory(index);
                                     // Create content in MultiSeriesData format for consistency
@@ -369,7 +343,7 @@ var BarChart = function (_a) {
                                                 key: key,
                                                 label: ((_a = config[key]) === null || _a === void 0 ? void 0 : _a.label) || key,
                                                 value: value,
-                                                color: ((_b = config[key]) === null || _b === void 0 ? void 0 : _b.color) || getColorValue(colorClass)
+                                                color: ((_b = config[key]) === null || _b === void 0 ? void 0 : _b.color) || fillColor
                                             }]
                                     };
                                     var svgCoordinates = {

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

@@ -3,6 +3,7 @@ export interface BarChartProps extends BaseChartProps, StandardChartDisplayProps
     radius?: number;
     gap?: number;
     categoryGap?: number;
+    showValidationWarnings?: boolean;
 }
 export declare const BAR_CHART_DEFAULTS: {
     readonly radius: 12;

package/dist/components/charts/LineChart/LineChart.js

@@ -16,12 +16,12 @@ import { LINE_CHART_DEFAULTS } from './LineChart.types.js';
 // Color configuration for data series
 var getSeriesColorClass = function (index) {
     var colors = [
-        "stroke-primary-base",
-        "stroke-warning-base",
-        "stroke-success-base",
-        "stroke-error-base",
-        "stroke-info-base",
-        "stroke-secondary-base",
+        "stroke-primary",
+        "stroke-warning",
+        "stroke-success",
+        "stroke-error",
+        "stroke-info",
+        "stroke-secondary",
     ];
     return colors[index % colors.length];
 };

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

@@ -10,7 +10,7 @@ export interface ChartConfig {
     };
 }
 export type ChartVariant = 'default' | 'minimal' | 'gradient';
-export type CurveType = 'linear' | 'monotone';
+export type CurveType = 'linear' | 'monotone' | 'step' | 'stepBefore' | 'stepAfter';
 export interface ChartThemeOverrides {
     baseStyle?: {
         colors?: Partial<{

package/dist/components/charts/utils/chart-validation.js

@@ -111,12 +111,21 @@ function validateChartData(data) {
         var hasNumericValue = Object.values(item).some(function (value) {
             return typeof value === 'number' && isFinite(value);
         });
+        // Only warn about missing numeric values if there are no valid numeric values 
+        // in the entire dataset. Individual items with null/undefined values are 
+        // handled gracefully by chart components (e.g., using averages for bar charts)
         if (!hasNumericValue) {
-            warnings.push({
-                type: 'data',
-                message: "Data item at index ".concat(index, " has no valid numeric values"),
-                field: "data[".concat(index, "]")
+            var allDataHasNumericValues = data.some(function (dataItem) {
+                return dataItem && typeof dataItem === 'object' &&
+                    Object.values(dataItem).some(function (value) { return typeof value === 'number' && isFinite(value); });
             });
+            if (!allDataHasNumericValues) {
+                warnings.push({
+                    type: 'data',
+                    message: "Data item at index ".concat(index, " has no valid numeric values"),
+                    field: "data[".concat(index, "]")
+                });
+            }
         }
     });
     return { isValid: errors.length === 0, errors: errors, warnings: warnings };

package/dist/components/charts/utils/color-utils.js

@@ -133,9 +133,9 @@ function generateColorPalette(count, baseHue) {
 function getContrastColor(backgroundColor) {
     // Convert hex to RGB
     var hex = backgroundColor.replace('#', '');
-    var r = parseInt(hex.substr(0, 2), 16);
-    var g = parseInt(hex.substr(2, 2), 16);
-    var b = parseInt(hex.substr(4, 2), 16);
+    var r = parseInt(hex.substring(0, 2), 16);
+    var g = parseInt(hex.substring(2, 2), 16);
+    var b = parseInt(hex.substring(4, 2), 16);
     // Calculate luminance
     var luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
     return luminance > 0.5 ? '#000000' : '#ffffff';
@@ -153,20 +153,20 @@ var getColorValue = function (colorClass) {
     // Map to CSS variables that actually exist in global.css
     var colorMap = {
         // Primary colors (exists)
-        'primary': 'var(--color-primary-base)',
+        'primary': 'var(--color-primary)',
         // Warning/Yellow colors (exists)
-        'warning': 'var(--color-warning-base)',
+        'warning': 'var(--color-warning)',
         // Success/Green colors (exists)
-        'success': 'var(--color-success-base)',
+        'success': 'var(--color-success)',
         // Error/Danger/Red colors (exists as danger)
-        'error': 'var(--color-danger-base)', // Map error to danger
-        'danger': 'var(--color-danger-base)',
+        'error': 'var(--color-danger)', // Map error to danger
+        'danger': 'var(--color-danger)',
         // Fallbacks for colors that don't exist in CSS - use primary as fallback
-        'info': 'var(--color-primary-base)', // Fallback to primary
-        'secondary': 'var(--color-primary-base)', // Fallback to primary
+        'info': 'var(--color-primary)', // Fallback to primary
+        'secondary': 'var(--color-primary)', // Fallback to primary
         // Neutral colors - fallback to primary
-        'neutral': 'var(--color-primary-base)',
-        'slate': 'var(--color-primary-base)',
+        'neutral': 'var(--color-primary)',
+        'slate': 'var(--color-primary)',
     };
     // Return the CSS variable directly
     return colorMap[normalizedClass] || colorMap['primary'];

package/dist/components/core/Avatar/Avatar.theme.js

@@ -3,7 +3,7 @@
  */
 var avatarTheme = {
     // Base styles for the avatar element
-    baseStyle: 'relative inline-flex items-center justify-center overflow-hidden bg-neutral-200 text-text-primary font-semibold tracking-tighter rounded-[var(--avatar-rounded)] ring-2 ring-[var(--color-primary)]/10 border border-white transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2',
+    baseStyle: 'relative inline-flex items-center justify-center overflow-hidden bg-neutral-200 text-[var(--color-text-primary)] font-semibold tracking-tighter rounded-[var(--avatar-rounded)] ring-2 ring-[var(--color-primary)]/10 border border-white transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2',
     // Size variants using CSS variables
     sizes: {
         xs: 'size-[var(--avatar-size-xs)] text-[var(--avatar-text-xs)]',