@flikk/ui 1.0.0-beta.27 → 1.0.0-beta.29

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

@@ -1,16 +1,18 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useEffect, useRef, useMemo } from 'react';
-import { useReducedMotion, motion } from 'motion/react';
+import React__default, { useId, useState, useEffect, useRef, useMemo } from 'react';
+import { useReducedMotion, motion, AnimatePresence } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
 import { useTooltipPosition } from '../hooks/useTooltipPosition.js';
 import { useChartAccessibility } from '../hooks/useChartAccessibility.js';
 import { useChartValidation } from '../hooks/useChartValidation.js';
+import { useChartDimensions } from '../hooks/useChartDimensions.js';
 import { ChartErrorBoundary } from '../shared/ChartErrorBoundary/ChartErrorBoundary.js';
 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 { BAR_CHART_DEFAULTS } from './BarChart.types.js';
+import { X_AXIS_MARGIN } from '../types/chart.types.js';
 import { ExclamationTriangleIcon } from '@heroicons/react/20/solid';
 
 // Pure helper functions moved to module level to avoid recreation per render
@@ -62,10 +64,16 @@ showPlaceholderBars = BAR_CHART_DEFAULTS.showPlaceholderBars, placeholderData,
 // Color customization
 colors, 
 // Base props
-className, title, description, enableKeyboardNavigation = BAR_CHART_DEFAULTS.enableKeyboardNavigation, showValidationWarnings = process.env.NODE_ENV === "development", darkMode = false, children, ...props }) => {
+className, title, description, enableKeyboardNavigation = BAR_CHART_DEFAULTS.enableKeyboardNavigation, showValidationWarnings = process.env.NODE_ENV === "development", darkMode = false, width, height, children, ...props }) => {
     var _a, _b;
     // Resolve barRadius with backward compatibility
     const resolvedBarRadius = (_a = barRadius !== null && barRadius !== void 0 ? barRadius : radius) !== null && _a !== void 0 ? _a : BAR_CHART_DEFAULTS.barRadius;
+    const chartId = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+    const isGradientVariant = variant === "gradient";
+    const hatchPatternId = `${chartId}-diagonal-hatch`;
+    const getBarGradientId = (index) => `${chartId}-bar-gradient-${index}`;
+    const getBarShadowId = (index) => `${chartId}-bar-shadow-${index}`;
+    const getBarRingId = (index) => `${chartId}-bar-ring-${index}`;
     // Development warning for deprecated radius prop
     if (process.env.NODE_ENV !== "production" && radius !== undefined) {
         console.warn("[BarChart]: The `radius` prop is deprecated and will be removed in a future version. " +
@@ -98,7 +106,19 @@ className, title, description, enableKeyboardNavigation = BAR_CHART_DEFAULTS.ena
         return (jsx("div", { className: cn("chart-container flex items-center justify-center text-[var(--color-text-muted)]", className), role: "img", "aria-label": "Empty bar chart", ...props, children: jsx("span", { children: "No data available" }) }));
     }
     // Simple color functions based on direct CSS variables (following guidelines)
-    const getSeriesFillColor = (index) => {
+    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)",
@@ -106,11 +126,19 @@ className, title, description, enableKeyboardNavigation = BAR_CHART_DEFAULTS.ena
             "var(--color-danger)",
         ];
         // Use custom colors if provided, otherwise fall back to defaults
-        const palette = colors && colors.length > 0 ? colors : defaultColors;
+        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;
+        const palette = colors && colors.length > 0
+            ? colors
+            : themedColors && themedColors.length > 0
+                ? themedColors
+                : defaultColors;
         return palette[index % palette.length];
     };
     const containerRef = useRef(null);
-    const [dimensions, setDimensions] = useState({ width: 600, height: 400 });
+    // Bars must not mount before the real container size is known (cold-load bug:
+    // motion captures geometry in the 600×400 fallback space, so the entrance
+    // animation rises from below the real baseline). `measured` gates the mount.
+    const { dimensions, measured } = useChartDimensions(containerRef);
     const [hoveredCategory, setHoveredCategory] = useState(null);
     // Detect if device is mobile/touch
     const isMobile = typeof window !== "undefined" &&
@@ -129,31 +157,11 @@ className, title, description, enableKeyboardNavigation = BAR_CHART_DEFAULTS.ena
         description,
         enableKeyboardNavigation,
     });
-    // Measure container dimensions
-    useEffect(() => {
-        const updateDimensions = () => {
-            if (containerRef.current) {
-                const { width, height } = containerRef.current.getBoundingClientRect();
-                setDimensions({
-                    width: width || 600,
-                    height: height || 400,
-                });
-            }
-        };
-        updateDimensions();
-        const resizeObserver = new ResizeObserver(updateDimensions);
-        if (containerRef.current) {
-            resizeObserver.observe(containerRef.current);
-        }
-        return () => {
-            resizeObserver.disconnect();
-        };
-    }, []);
     // Calculate dimensions with safe math
     const margin = useMemo(() => ({
         top: 15,
         right: showYAxis ? 20 : 0,
-        bottom: showXAxis ? 20 : 0,
+        bottom: showXAxis ? X_AXIS_MARGIN : 0,
         left: showYAxis ? 60 : 0,
     }), [showYAxis, showXAxis]);
     const innerWidth = Math.max(0, dimensions.width - margin.left - margin.right);
@@ -182,7 +190,7 @@ className, title, description, enableKeyboardNavigation = BAR_CHART_DEFAULTS.ena
     const individualBarWidth = safeMath.divide(availableBarWidth, dataKeys.length, 0);
     // Handle keyboard focus tooltips
     useEffect(() => {
-        var _a, _b;
+        var _a;
         if (isKeyboardMode &&
             focusedElementIndex >= 0 &&
             focusedElementIndex < sanitizedData.length) {
@@ -201,7 +209,7 @@ className, title, description, enableKeyboardNavigation = BAR_CHART_DEFAULTS.ena
                     const isNeg = value < 0;
                     const y = isNeg ? zeroY : zeroY - barHeight;
                     // Get the fill color for the first series (index 0)
-                    const fillColor = getSeriesFillColor(0);
+                    const fillColor = getSeriesFillColor(0, key);
                     const content = {
                         category: item.name || `Category ${focusedElementIndex + 1}`,
                         series: [
@@ -209,7 +217,7 @@ className, title, description, enableKeyboardNavigation = BAR_CHART_DEFAULTS.ena
                                 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) || fillColor,
+                                color: fillColor,
                             },
                         ],
                     };
@@ -278,11 +286,12 @@ className, title, description, enableKeyboardNavigation = BAR_CHART_DEFAULTS.ena
             rawValue === undefined ||
             (typeof rawValue === "number" && !isFinite(rawValue));
         // Get fill color for this data series using direct CSS variables
-        const fillColor = getSeriesFillColor(keyIndex);
+        const fillColor = getSeriesFillColor(keyIndex, key);
         const isHovered = hoveredCategory === index;
         const isAnyBarHovered = hoveredCategory !== null;
         const shouldReduceOpacity = isAnyBarHovered && !isHovered;
         const isFocused = isKeyboardMode && focusedElementIndex === index;
+        const isEmphasized = isHovered || isFocused;
         // Handle null bars - either skip or show placeholder
         if (isNull) {
             if (!showPlaceholderBars) {
@@ -327,7 +336,7 @@ className, title, description, enableKeyboardNavigation = BAR_CHART_DEFAULTS.ena
                 }, className: "transition-opacity duration-200", style: {
                     originY: 1,
                     transformOrigin: "bottom",
-                    fill: "url(#diagonalHatch)",
+                    fill: `url(#${hatchPatternId})`,
                     opacity: 0.75,
                 }, "aria-label": `${item.name || `Category ${index + 1}`} - ${((_a = config[key]) === null || _a === void 0 ? void 0 : _a.label) || key}: No data` }, keyIndex));
         }
@@ -339,122 +348,177 @@ className, title, description, enableKeyboardNavigation = BAR_CHART_DEFAULTS.ena
             ? createRoundedBottomBarPath(barX, barY, individualBarWidth, barHeight, resolvedBarRadius)
             : createRoundedTopBarPath(barX, barY, individualBarWidth, barHeight, resolvedBarRadius);
         const delay = (index * dataKeys.length + keyIndex) * BAR_STAGGER;
-        return (jsx(motion.path, { d: pathD, initial: shouldAnimate && showAnimation && !shouldReduceMotion
-                ? { scaleY: 0, opacity: 0 }
-                : { scaleY: 1, opacity: 1 }, animate: {
-                scaleY: 1,
-                opacity: 1,
-            }, transition: {
-                type: "spring",
-                stiffness: 100,
-                damping: 20,
-                delay,
-            }, className: cn("transition-colors duration-200", !isNull && "cursor-pointer", isFocused && "stroke-2"), style: {
-                originY: isNegative ? 0 : 1,
-                transformOrigin: isNegative ? "top" : "bottom",
-                fill: isNull
-                    ? "var(--color-surface-sunken)"
-                    : shouldReduceOpacity
-                        ? "var(--color-surface-sunken)"
-                        : fillColor,
-                opacity: !isNull && shouldReduceOpacity ? 0.9 : 1,
-                stroke: isFocused ? "var(--color-primary)" : "none",
-            }, onMouseEnter: !isNull
-                ? (e) => {
-                    setHoveredCategory(index);
-                    // Create content with ALL series for this category
-                    const series = dataKeys
-                        .map((dataKey, idx) => {
-                        var _a, _b;
-                        const seriesValue = item[dataKey];
-                        const isSeriesNull = seriesValue === null ||
-                            seriesValue === undefined ||
-                            (typeof seriesValue === "number" &&
-                                !isFinite(seriesValue));
-                        return {
-                            key: dataKey,
-                            label: ((_a = config[dataKey]) === null || _a === void 0 ? void 0 : _a.label) || dataKey,
-                            value: isSeriesNull ? 0 : seriesValue,
-                            color: ((_b = config[dataKey]) === null || _b === void 0 ? void 0 : _b.color) || getSeriesFillColor(idx),
-                        };
-                    })
-                        .filter((series) => {
-                        // Only include non-null and non-zero values in tooltip
-                        const rawVal = item[series.key];
-                        return (rawVal != null &&
-                            typeof rawVal === "number" &&
-                            isFinite(rawVal) &&
-                            rawVal !== 0);
-                    });
-                    const content = {
-                        category: item.name || `Category ${index + 1}`,
-                        series,
-                    };
-                    const svgCoordinates = {
-                        x: barX + individualBarWidth / 2,
-                        y: barY,
-                        dimensions,
-                    };
-                    handleMouseEnter(e, content, svgCoordinates);
-                }
-                : undefined, onMouseMove: !isNull
-                ? (e) => {
-                    if (hoveredCategory === index) {
-                        const svgCoordinates = {
-                            x: barX + individualBarWidth / 2,
-                            y: barY,
-                            dimensions,
-                        };
-                        handleMouseMove(e, svgCoordinates);
-                    }
-                }
-                : undefined, onMouseLeave: !isNull
-                ? () => {
-                    setHoveredCategory(null);
-                    handleMouseLeave();
-                }
-                : undefined }, keyIndex));
+        const gradientFill = `url(#${getBarGradientId(keyIndex)})`;
+        const shadowFilter = `url(#${getBarShadowId(keyIndex)})`;
+        const ringFilter = `url(#${getBarRingId(keyIndex)})`;
+        const commonInitial = shouldAnimate && showAnimation && !shouldReduceMotion
+            ? { scaleY: 0, opacity: 0 }
+            : { scaleY: 1, opacity: 1 };
+        const commonTransition = {
+            type: "spring",
+            stiffness: 100,
+            damping: 20,
+            delay,
+            // Opacity carries both the mount fade-in and the hover dim. On mount it
+            // must wait out the same stagger delay as scaleY — a visible bar at
+            // scaleY≈0 renders as a glowing stub straddling the x-axis. After mount
+            // (hasAnimated), hover dims must respond with no delay. Motion re-reads
+            // this only when the opacity target changes, so the switch is safe.
+            opacity: {
+                type: "tween",
+                duration: 0.25,
+                ease: "easeOut",
+                delay: hasAnimated ? 0 : delay,
+            },
+        };
+        return (jsxs(React__default.Fragment, { children: [jsx(AnimatePresence, { children: isGradientVariant && isEmphasized && (jsx(motion.path, { d: pathD, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: {
+                            opacity: {
+                                duration: 0.45,
+                                ease: "easeOut",
+                            },
+                        }, fill: "none", stroke: fillColor, strokeWidth: Math.min(14, Math.max(8, individualBarWidth * 0.08)), strokeOpacity: 0.24, strokeLinejoin: "round", vectorEffect: "non-scaling-stroke", filter: ringFilter, style: {
+                            pointerEvents: "none",
+                        } })) }), jsx(motion.path, { d: pathD, initial: commonInitial, animate: {
+                        scaleY: 1,
+                        // Hover dim lives in `animate`, not `style`: motion.path freezes
+                        // plain style values at mount and ignores re-render changes
+                        opacity: shouldReduceOpacity ? (isGradientVariant ? 0.42 : 0.9) : 1,
+                    }, transition: commonTransition, className: cn(isGradientVariant
+                        ? "transition-all duration-300 ease-out"
+                        : "transition-colors duration-200", !isNull && "cursor-pointer", isFocused && "stroke-2"), style: {
+                        originY: isNegative ? 0 : 1,
+                        transformOrigin: isNegative ? "top" : "bottom",
+                        fill: isGradientVariant
+                            ? gradientFill
+                            : isNull
+                                ? "var(--color-surface-sunken)"
+                                : shouldReduceOpacity
+                                    ? "var(--color-surface-sunken)"
+                                    : fillColor,
+                        // Element opacity applies post-filter, so the animated hover dim
+                        // fades the shadow along with the bar — no need to toggle it here
+                        filter: isGradientVariant ? shadowFilter : undefined,
+                        stroke: isFocused
+                            ? "var(--color-primary)"
+                            : isGradientVariant && isEmphasized
+                                ? fillColor
+                                : isGradientVariant
+                                    ? "rgba(255,255,255,0.24)"
+                                    : "none",
+                        strokeWidth: isFocused
+                            ? 3
+                            : isGradientVariant && isEmphasized
+                                ? 2
+                                : isGradientVariant
+                                    ? 1
+                                    : undefined,
+                        strokeOpacity: isGradientVariant && isEmphasized ? 0.78 : 1,
+                        strokeLinejoin: "round",
+                        vectorEffect: "non-scaling-stroke",
+                    }, onMouseEnter: !isNull
+                        ? (e) => {
+                            setHoveredCategory(index);
+                            // Create content with ALL series for this category
+                            const series = dataKeys
+                                .map((dataKey, idx) => {
+                                var _a;
+                                const seriesValue = item[dataKey];
+                                const isSeriesNull = seriesValue === null ||
+                                    seriesValue === undefined ||
+                                    (typeof seriesValue === "number" &&
+                                        !isFinite(seriesValue));
+                                return {
+                                    key: dataKey,
+                                    label: ((_a = config[dataKey]) === null || _a === void 0 ? void 0 : _a.label) || dataKey,
+                                    value: isSeriesNull ? 0 : seriesValue,
+                                    color: getSeriesFillColor(idx, dataKey),
+                                };
+                            })
+                                .filter((series) => {
+                                // Only include non-null and non-zero values in tooltip
+                                const rawVal = item[series.key];
+                                return (rawVal != null &&
+                                    typeof rawVal === "number" &&
+                                    isFinite(rawVal) &&
+                                    rawVal !== 0);
+                            });
+                            const content = {
+                                category: item.name || `Category ${index + 1}`,
+                                series,
+                            };
+                            const svgCoordinates = {
+                                x: barX + individualBarWidth / 2,
+                                y: barY,
+                                dimensions,
+                            };
+                            handleMouseEnter(e, content, svgCoordinates);
+                        }
+                        : undefined, onMouseMove: !isNull
+                        ? (e) => {
+                            if (hoveredCategory === index) {
+                                const svgCoordinates = {
+                                    x: barX + individualBarWidth / 2,
+                                    y: barY,
+                                    dimensions,
+                                };
+                                handleMouseMove(e, svgCoordinates);
+                            }
+                        }
+                        : undefined, onMouseLeave: !isNull
+                        ? () => {
+                            setHoveredCategory(null);
+                            handleMouseLeave();
+                        }
+                        : undefined })] }, keyIndex));
     };
-    return (jsx(ChartErrorBoundary, { className: className, showErrorDetails: process.env.NODE_ENV === "development", children: jsxs("div", { ref: containerRef, className: cn("chart-container w-full h-full", darkMode && "dark", className), ...chartAccessibilityProps, onMouseEnter: handleMouseInteraction, onMouseMove: handleMouseInteraction, ...props, children: [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
+    return (jsx(ChartErrorBoundary, { className: className, showErrorDetails: process.env.NODE_ENV === "development", children: jsxs("div", { ref: containerRef, className: cn("chart-container w-full h-full", darkMode && "dark", className), style: {
+                width: width !== undefined ? (typeof width === "number" ? `${width}px` : width) : undefined,
+                height: height !== undefined ? (typeof height === "number" ? `${height}px` : height) : undefined,
+            }, ...chartAccessibilityProps, onMouseEnter: handleMouseInteraction, onMouseMove: handleMouseInteraction, ...props, children: [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" }) }))] })), jsxs("svg", { width: "100%", height: "100%", viewBox: `0 0 ${dimensions.width} ${dimensions.height}`, children: [jsx("defs", { children: jsxs("pattern", { id: "diagonalHatch", 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 } })] }) }), jsx(HorizontalGrid, { show: showGrid, x: margin.left, y: margin.top, width: innerWidth, height: innerHeight, lineCount: 5 }), jsx(YAxis, { show: showYAxis, min: minValue, max: maxValue, x: margin.left, y: margin.top, height: innerHeight, showGrid: false, gridWidth: innerWidth, tickFormatter: (value) => {
+                                .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" }) }))] })), 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 &&
+                                    dataKeys.map((key, index) => {
+                                        const color = getSeriesFillColor(index, key);
+                                        return (jsxs(React__default.Fragment, { children: [jsxs("linearGradient", { id: getBarGradientId(index), x1: "0", y1: "0", x2: "0", y2: "1", children: [jsx("stop", { offset: "0%", stopColor: color, stopOpacity: "0.46" }), jsx("stop", { offset: "14%", stopColor: color, stopOpacity: "0.9" }), jsx("stop", { offset: "42%", stopColor: color, stopOpacity: "1" }), jsx("stop", { offset: "72%", stopColor: color, stopOpacity: "0.96" }), jsx("stop", { offset: "100%", stopColor: color, stopOpacity: "0.82" })] }), jsx("filter", { id: getBarShadowId(index), x: "-35%", y: "-35%", width: "170%", height: "190%", colorInterpolationFilters: "sRGB", children: jsx("feDropShadow", { dx: "0", dy: "10", stdDeviation: "8", floodColor: color, floodOpacity: "0.22" }) }), jsxs("filter", { id: getBarRingId(index), x: "-25%", y: "-25%", width: "150%", height: "165%", colorInterpolationFilters: "sRGB", children: [jsx("feDropShadow", { dx: "0", dy: "0", stdDeviation: "4", floodColor: color, floodOpacity: "0.42" }), jsx("feDropShadow", { dx: "0", dy: "10", stdDeviation: "8", floodColor: color, floodOpacity: "0.18" })] })] }, key));
+                                    })] }), jsx(HorizontalGrid, { show: showGrid, x: margin.left, y: margin.top, width: innerWidth, height: innerHeight, lineCount: 5 }), jsx(YAxis, { show: showYAxis, min: minValue, max: maxValue, x: margin.left, y: margin.top, height: innerHeight, showGrid: false, gridWidth: innerWidth, 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: "chart-bars", children: (() => {
-                                // Calculate the zero baseline position (where value=0 maps to in pixel space)
-                                const range = maxValue - minValue;
-                                const scaledZero = range > 0
-                                    ? safeMath.scale(0, minValue, maxValue, 0, innerHeight)
-                                    : 0;
-                                const zeroY = margin.top + innerHeight - scaledZero;
-                                return sanitizedData.map((item, index) => {
-                                    const x = margin.left + index * (barWidth + categoryGap);
-                                    return (jsx("g", { children: dataKeys.map((key, keyIndex) => {
-                                            const rawValue = item[key];
-                                            const value = typeof rawValue === "number" && isFinite(rawValue)
-                                                ? rawValue
-                                                : 0;
-                                            const isNull = rawValue === null ||
-                                                rawValue === undefined ||
-                                                (typeof rawValue === "number" && !isFinite(rawValue));
-                                            // For null values, use the average of non-null values
-                                            const actualValue = isNull
-                                                ? calculateAverageForKey(sanitizedData, key, safeMath.divide)
-                                                : value;
-                                            const scaledValue = range > 0
-                                                ? safeMath.scale(actualValue, minValue, maxValue, 0, innerHeight)
-                                                : 0;
-                                            const barHeight = Math.abs(scaledValue - scaledZero);
-                                            const isNeg = actualValue < 0;
-                                            const barX = x + keyIndex * (individualBarWidth + gap);
-                                            // Positive: bar extends upward from zero baseline
-                                            // Negative: bar extends downward from zero baseline
-                                            const barY = isNeg ? zeroY : zeroY - barHeight;
-                                            return renderBarPath(item, index, key, keyIndex, barX, barY, barHeight, true, isNeg);
-                                        }) }, index));
-                                });
-                            })() }), jsx(XAxis, { show: showXAxis, data: sanitizedData, x: margin.left, y: margin.top + innerHeight, width: innerWidth, categoryWidth: barWidth, categoryGap: categoryGap })] }), jsx(ChartTooltip, { tooltipRef: tooltipRef, content: tooltipData === null || tooltipData === void 0 ? void 0 : tooltipData.content, active: !!tooltipData, position: tooltipData
+                            } }), 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: "chart-bars", children: measured &&
+                                (() => {
+                                    // Calculate the zero baseline position (where value=0 maps to in pixel space)
+                                    const range = maxValue - minValue;
+                                    const scaledZero = range > 0
+                                        ? safeMath.scale(0, minValue, maxValue, 0, innerHeight)
+                                        : 0;
+                                    const zeroY = margin.top + innerHeight - scaledZero;
+                                    return sanitizedData.map((item, index) => {
+                                        const x = margin.left + index * (barWidth + categoryGap);
+                                        return (jsx("g", { children: dataKeys.map((key, keyIndex) => {
+                                                const rawValue = item[key];
+                                                const value = typeof rawValue === "number" && isFinite(rawValue)
+                                                    ? rawValue
+                                                    : 0;
+                                                const isNull = rawValue === null ||
+                                                    rawValue === undefined ||
+                                                    (typeof rawValue === "number" && !isFinite(rawValue));
+                                                // For null values, use the average of non-null values
+                                                const actualValue = isNull
+                                                    ? calculateAverageForKey(sanitizedData, key, safeMath.divide)
+                                                    : value;
+                                                const scaledValue = range > 0
+                                                    ? safeMath.scale(actualValue, minValue, maxValue, 0, innerHeight)
+                                                    : 0;
+                                                const barHeight = Math.abs(scaledValue - scaledZero);
+                                                const isNeg = actualValue < 0;
+                                                const barX = x + keyIndex * (individualBarWidth + gap);
+                                                // Positive: bar extends upward from zero baseline
+                                                // Negative: bar extends downward from zero baseline
+                                                const barY = isNeg ? zeroY : zeroY - barHeight;
+                                                return renderBarPath(item, index, key, keyIndex, barX, barY, barHeight, true, isNeg);
+                                            }) }, index));
+                                    });
+                                })() }), jsx(XAxis, { show: showXAxis, data: sanitizedData, x: margin.left, y: margin.top + innerHeight, width: innerWidth, categoryWidth: barWidth, categoryGap: categoryGap })] }), jsx(ChartTooltip, { tooltipRef: tooltipRef, content: tooltipData === null || tooltipData === void 0 ? void 0 : tooltipData.content, active: !!tooltipData, position: tooltipData
                         ? { x: tooltipData.x, y: tooltipData.y }
                         : { x: 0, y: 0 } }), children] }) }));
 };

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

@@ -1,4 +1,4 @@
-import { BaseChartProps, StandardChartDisplayProps, StandardVisualProps, BarChartSpecificProps } from "../types/chart.types";
+import { BaseChartProps, StandardChartDisplayProps, StandardVisualProps, BarChartSpecificProps, ChartVariant } from "../types/chart.types";
 export interface BarChartProps extends BaseChartProps, StandardChartDisplayProps, StandardVisualProps, BarChartSpecificProps {
     barRadius?: number;
     radius?: number;
@@ -24,6 +24,7 @@ export interface BarChartProps extends BaseChartProps, StandardChartDisplayProps
     darkMode?: boolean;
 }
 export declare const BAR_CHART_DEFAULTS: {
+    readonly variant: ChartVariant;
     readonly barRadius: 32;
     readonly radius: 32;
     readonly gap: 4;
@@ -34,16 +35,15 @@ export declare const BAR_CHART_DEFAULTS: {
     readonly showGrid: true;
     readonly showXAxis: true;
     readonly showYAxis: true;
-    readonly dotRadius: 4;
+    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: true;
+    readonly showDots: false;
     readonly stacked: false;
-    readonly variant: import("..").ChartVariant;
     readonly enableKeyboardNavigation: true;
 };
 export type BarChartData = BaseChartProps["data"][0];

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

@@ -3,6 +3,7 @@ import { CHART_DEFAULTS } from '../types/chart.types.js';
 // Default values using centralized defaults
 const BAR_CHART_DEFAULTS = {
     ...CHART_DEFAULTS,
+    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,

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

@@ -29,11 +29,11 @@ export interface ComboChartProps extends BaseChartProps, StandardChartDisplayPro
 }
 export declare const COMBO_CHART_DEFAULTS: {
     readonly barRadius: 32;
-    readonly dotRadius: 4;
+    readonly dotRadius: 3;
     readonly categoryGap: 16;
     readonly curved: true;
     readonly curveType: import("..").CurveType;
-    readonly showDots: true;
+    readonly showDots: false;
     readonly showDualAxis: false;
     readonly showGrid: true;
     readonly showXAxis: true;