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

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

@@ -1,9 +1,10 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useRef, useState, useId, useEffect, useMemo, useCallback } from 'react';
-import { motion } from 'motion/react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React__default, { useRef, useId, useMemo, useState, useCallback } 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 { useChartDimensions } from '../hooks/useChartDimensions.js';
 import { XAxis } from '../shared/ChartAxis/XAxis.js';
 import { YAxis } from '../shared/ChartAxis/YAxis.js';
 import { HorizontalGrid } from '../shared/ChartGrid/HorizontalGrid.js';
@@ -13,8 +14,10 @@ import { ChartCrosshair } from '../shared/ChartCrosshair/ChartCrosshair.js';
 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';
 
+const sanitizeSvgId = (value) => value.replace(/[^a-zA-Z0-9_-]/g, "");
 const AreaChart = ({ data, config, 
 // Standardized display props with defaults
 showGrid = AREA_CHART_DEFAULTS.showGrid, showXAxis = AREA_CHART_DEFAULTS.showXAxis, showYAxis = AREA_CHART_DEFAULTS.showYAxis, minValue: propMinValue, maxValue: propMaxValue, variant = AREA_CHART_DEFAULTS.variant, theme, 
@@ -24,10 +27,22 @@ strokeWidth = AREA_CHART_DEFAULTS.strokeWidth, curved = AREA_CHART_DEFAULTS.curv
 // Base props
 className, title, description, enableKeyboardNavigation = AREA_CHART_DEFAULTS.enableKeyboardNavigation, 
 // Additional className overrides for chart elements
-svgClassName, areaClassName, lineClassName, gridClassName, axisClassName, children, ...props }) => {
+svgClassName, areaClassName, lineClassName, gridClassName, axisClassName, width, height, children, ...props }) => {
     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. " +
@@ -35,11 +50,27 @@ svgClassName, areaClassName, lineClassName, gridClassName, axisClassName, childr
     }
     // Simplified color system - no complex theme hook needed
     const containerRef = useRef(null);
-    const [dimensions, setDimensions] = useState({ width: 600, height: 400 });
-    const clipId = useId();
-    const revealClipId = useId();
-    const shadowFilterId = useId();
+    // `measured` gates the rise + dots so motion captures the baseline scaleY
+    // origin and dot positions at the real size, not the 600×400 fallback.
+    const { dimensions, measured } = useChartDimensions(containerRef);
+    const chartId = sanitizeSvgId(useId());
+    const clipId = `${chartId}-clip`;
+    const shadowFilterId = `${chartId}-shadow`;
+    const isGradientVariant = variant === "gradient";
+    const getAreaGradientId = (index) => `${chartId}-area-gradient-${index}`;
+    const getLineGlowId = (index) => `${chartId}-line-glow-${index}`;
+    const getMarkerGlowId = (index) => `${chartId}-marker-glow-${index}`;
+    // The gradient look caps the line weight so the glow stays crisp
+    const gradientStrokeWidth = Math.min(strokeWidth, 1);
     const ANIMATION_DURATION = 1.5;
+    // Entrance: the line/area RISES from the x-axis (scaleY 0→1 about the
+    // baseline), mirroring how BarChart's bars grow up from the zero line. A
+    // single continuous path can't morph between datasets of different point
+    // counts, so it rises rather than draws. Keying the series group on the data
+    // signature replays the rise on every range switch; reduced-motion users get
+    // a stable key + scaleY:1 (no animation).
+    const shouldReduceMotion = useReducedMotion();
+    const dataSignature = useMemo(() => JSON.stringify(data), [data]);
     const [hoveredPoint, setHoveredPoint] = useState(null);
     // Detect if device is mobile/touch
     const isMobile = typeof window !== "undefined" &&
@@ -58,26 +89,6 @@ svgClassName, areaClassName, lineClassName, gridClassName, axisClassName, childr
         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();
-        };
-    }, []);
     // Early return if no data
     if (!data || data.length === 0) {
         return (jsx("div", { className: cn(areaChartTheme.emptyStateStyle, className), role: "img", "aria-label": "Empty area chart", ...props, children: jsx("span", { children: "No data available" }) }));
@@ -86,11 +97,12 @@ svgClassName, areaClassName, lineClassName, gridClassName, axisClassName, childr
     const margin = useMemo(() => ({
         top: 0,
         right: 0,
-        bottom: showXAxis ? 40 : 0,
+        bottom: showXAxis ? X_AXIS_MARGIN : 0,
         left: showYAxis ? 60 : 0,
     }), [showXAxis, showYAxis]);
     const innerWidth = dimensions.width - margin.left - margin.right;
     const innerHeight = dimensions.height - margin.top - margin.bottom;
+    const gradientAreaGap = 4;
     // Get all data keys from config
     const dataKeys = useMemo(() => Object.keys(config), [config]);
     // Calculate scales
@@ -205,21 +217,24 @@ svgClassName, areaClassName, lineClassName, gridClassName, axisClassName, childr
         });
         return result;
     }, [data, dataKeys, stacked, stackedValues, curved, curveType, getPointPosition]);
-    return (jsxs("div", { ref: containerRef, className: cn(areaChartTheme.containerStyle, className), ...chartAccessibilityProps, onMouseEnter: handleMouseInteraction, onMouseMove: handleMouseInteraction, ...props, children: [descriptionProps && jsx("div", { ...descriptionProps }), 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 }) }), jsx("clipPath", { id: revealClipId, children: jsx(motion.rect
-                                // Explicitly set x/y in initial to prevent 0,0 glitch
-                                , { 
-                                    // Explicitly set x/y in initial to prevent 0,0 glitch
-                                    initial: { width: 0, x: margin.left, y: margin.top }, animate: {
-                                        width: innerWidth + margin.right,
-                                        x: margin.left,
-                                        y: margin.top,
-                                    }, height: innerHeight, transition: {
-                                        duration: ANIMATION_DURATION,
-                                        ease: "easeOut",
-                                    } }) }), dataKeys.map((key, keyIndex) => {
-                                const fillColor = getSeriesFillColor(keyIndex);
-                                return (jsxs("linearGradient", { id: `area-gradient-${key}`, x1: "0%", y1: "0%", x2: "0%", y2: "100%", children: [jsx("stop", { offset: "0%", stopColor: fillColor, stopOpacity: fillOpacity * 0.8 }), jsx("stop", { offset: "100%", stopColor: fillColor, stopOpacity: fillOpacity * 0.05 })] }, `gradient-${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
+    return (jsxs("div", { ref: containerRef, className: cn(areaChartTheme.containerStyle, 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, onMouseLeave: () => {
+            // Clear the crosshair + glow marker when the pointer leaves the chart.
+            // The per-point rects only hide the tooltip; nothing else resets this.
+            setHoveredPoint(null);
+            handleMouseLeave();
+        }, ...props, children: [descriptionProps && jsx("div", { ...descriptionProps }), 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));
+                                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));
+                                    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
                                 ? margin.left + innerWidth / 2
                                 : margin.left +
@@ -235,67 +250,87 @@ svgClassName, areaClassName, lineClassName, gridClassName, axisClassName, childr
                                     ((numValue - minValue) / (maxValue - minValue)) *
                                         innerHeight);
                             })()
-                            : undefined, margin: margin, innerWidth: innerWidth, innerHeight: innerHeight, showHorizontal: dataKeys.length === 1 }), 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 ? 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) => {
                             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: dataKeys.map((key, keyIndex) => {
-                            const paths = allPaths[key];
+                        } }), 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;
+                                const paths = allPaths[key];
+                                const colorClass = getSeriesColorClass(keyIndex);
+                                if (!paths)
+                                    return null;
+                                return (jsxs(motion.g, { initial: { scaleY: shouldReduceMotion ? 1 : 0 }, animate: { scaleY: 1 }, transition: { duration: ANIMATION_DURATION, ease: "easeOut" }, 
+                                    // Rise from the x-axis like the bars. Framer forces
+                                    // transform-box:fill-box for SVG (a view-box origin is ignored),
+                                    // so `originY:1` anchors scaleY to the group's fill-box BOTTOM.
+                                    // The invisible rect below pins that bottom to the plot baseline,
+                                    // so the series grows UP from the x-axis — not from its own mid-height.
+                                    style: { originY: 1, transformOrigin: "bottom" }, 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", 
+                                                    // 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", 
+                                                    // 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}`}`));
+                            }) }), showDots && (jsx("g", { className: "chart-dots", children: dataKeys.map((key, keyIndex) => {
                             const colorClass = getSeriesColorClass(keyIndex);
-                            if (!paths)
-                                return null;
-                            return (jsxs("g", { clipPath: `url(#${revealClipId})`, children: [jsx("path", { d: paths.areaPath, fill: `url(#area-gradient-${key})`, className: "transition-colors duration-200", filter: `url(#${shadowFilterId})` }), showStroke && (jsx(motion.path, { d: paths.linePath, 
-                                        // Removed pathLength animation in favor of clipPath for perfect sync with area
-                                        initial: { opacity: 1 }, animate: { opacity: 1 }, fill: "none", strokeWidth: strokeWidth, strokeLinecap: "round", className: cn("transition-colors duration-200", colorClass
-                                            .split(" ")
-                                            .find((cls) => cls.startsWith("stroke-")) || "", lineClassName) })), showDots &&
-                                        data.map((item, dataIndex) => {
-                                            const rawValue = item[key];
-                                            const isNull = rawValue === null || rawValue === undefined;
-                                            const value = isNull
-                                                ? 0
-                                                : typeof rawValue === "number"
-                                                    ? rawValue
-                                                    : 0;
-                                            // Don't render dots for null values
-                                            if (isNull)
-                                                return null;
-                                            const topValue = stacked && stackedValues[key]
-                                                ? stackedValues[key][dataIndex] + value
-                                                : value;
-                                            const { x, y } = getPointPosition(dataIndex, topValue);
-                                            return (jsx(motion.g, { initial: { opacity: 0, scale: 0 }, animate: { opacity: 1, scale: 1 }, transition: {
-                                                    // Sync with the line reveal: calculate when the line reaches this point
-                                                    delay: (dataIndex / (data.length - 1)) *
-                                                        ANIMATION_DURATION,
-                                                    type: "spring",
-                                                    stiffness: 260,
-                                                    damping: 20,
-                                                }, style: {
-                                                    originX: "50%",
-                                                    originY: "50%",
-                                                    transformBox: "fill-box",
-                                                }, children: jsx(ChartMarker, { cx: x, cy: y, radius: resolvedDotRadius, colorClass: colorClass }) }, `${key}-${dataIndex}`));
-                                        })] }, key));
-                        }) }), !showDots && hoveredPoint !== null && (jsx("g", { className: "chart-hover-markers", children: dataKeys.map((key, keyIndex) => {
-                            const item = data[hoveredPoint.index];
-                            const rawValue = item[key];
-                            const isNull = rawValue === null || rawValue === undefined;
-                            const value = isNull
-                                ? 0
-                                : typeof rawValue === "number"
-                                    ? rawValue
-                                    : 0;
-                            // Don't render hover markers for null values
-                            if (isNull)
-                                return null;
-                            const topValue = stacked && stackedValues[key]
-                                ? stackedValues[key][hoveredPoint.index] + value
-                                : value;
-                            const { x, y } = getPointPosition(hoveredPoint.index, topValue);
-                            const colorClass = getSeriesColorClass(keyIndex);
-                            return (jsx(ChartMarker, { cx: x, cy: y, radius: resolvedDotRadius, colorClass: colorClass }, `hover-${key}-${hoveredPoint.index}`));
-                        }) })), jsx("g", { className: "chart-hover-areas", children: data.map((item, dataIndex) => {
+                            return (jsx("g", { children: data.map((item, dataIndex) => {
+                                    var _a, _b;
+                                    const rawValue = item[key];
+                                    const isNull = rawValue === null || rawValue === undefined;
+                                    // Don't render dots for null values
+                                    if (isNull)
+                                        return null;
+                                    const value = typeof rawValue === "number" ? rawValue : 0;
+                                    const topValue = stacked && stackedValues[key]
+                                        ? stackedValues[key][dataIndex] + value
+                                        : value;
+                                    const { x, y } = getPointPosition(dataIndex, topValue);
+                                    return (jsx(motion.g, { initial: { opacity: 0, scale: 0 }, animate: { opacity: 1, scale: 1 }, transition: {
+                                            // Markers pop in one-by-one (left-to-right) only AFTER the
+                                            // line has fully risen — start the stagger at the rise's end.
+                                            delay: shouldReduceMotion ? 0 : ANIMATION_DURATION + dataIndex * 0.06,
+                                            type: "spring",
+                                            stiffness: 260,
+                                            damping: 20,
+                                        }, style: {
+                                            originX: "50%",
+                                            originY: "50%",
+                                            transformBox: "fill-box",
+                                        }, 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}`}`));
+                                }) }, key));
+                        }) })), jsx("g", { className: "chart-hover-markers", children: jsx(AnimatePresence, { children: (!showDots || isGradientVariant) &&
+                                hoveredPoint !== null &&
+                                dataKeys.map((key, keyIndex) => {
+                                    var _a, _b, _c;
+                                    const item = data[hoveredPoint.index];
+                                    const rawValue = item[key];
+                                    const isNull = rawValue === null || rawValue === undefined;
+                                    const value = isNull
+                                        ? 0
+                                        : typeof rawValue === "number"
+                                            ? rawValue
+                                            : 0;
+                                    // Don't render hover markers for null values
+                                    if (isNull)
+                                        return null;
+                                    const topValue = stacked && stackedValues[key]
+                                        ? stackedValues[key][hoveredPoint.index] + value
+                                        : 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));
+                                    if (isGradientVariant) {
+                                        return (jsxs(motion.g, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.22, ease: "easeOut" }, 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}`));
+                                }) }) }), jsx("g", { className: "chart-hover-areas", children: data.map((item, dataIndex) => {
                             // Calculate hover area based on new point positioning
                             const pointX = data.length === 1
                                 ? margin.left + innerWidth / 2

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

@@ -1,4 +1,4 @@
-import { BaseChartProps, StandardChartDisplayProps, StandardVisualProps } from '../types/chart.types';
+import { BaseChartProps, StandardChartDisplayProps, StandardVisualProps, ChartVariant } from '../types/chart.types';
 export interface AreaChartProps extends BaseChartProps, StandardChartDisplayProps, StandardVisualProps {
     dotRadius?: number;
     radius?: number;
@@ -15,12 +15,13 @@ export interface AreaChartProps extends BaseChartProps, StandardChartDisplayProp
     axisClassName?: string;
 }
 export declare const AREA_CHART_DEFAULTS: {
-    readonly dotRadius: 4;
-    readonly radius: 4;
+    readonly variant: ChartVariant;
+    readonly dotRadius: 3;
+    readonly radius: 3;
     readonly strokeWidth: 2;
     readonly curved: true;
     readonly curveType: import("..").CurveType;
-    readonly showDots: true;
+    readonly showDots: false;
     readonly fillOpacity: 0.3;
     readonly showStroke: true;
     readonly stacked: false;
@@ -32,7 +33,6 @@ export declare const AREA_CHART_DEFAULTS: {
     readonly gap: 4;
     readonly categoryGap: 16;
     readonly orientation: "vertical" | "horizontal";
-    readonly variant: import("..").ChartVariant;
     readonly enableKeyboardNavigation: true;
 };
 export type AreaChartData = BaseChartProps['data'][0];

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

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