flikkui 0.1.0-beta.8 → 0.2.0-beta.1

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 React__default, { useRef, useState, useId, useEffect, useMemo } from 'react';
+import { motion } from 'motion/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,119 +9,149 @@ 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';
+import { areaChartTheme, getSeriesFillColor, getSeriesColorClass } from './AreaChart.theme.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",
-    ];
-    return colors[index % colors.length];
-};
-// Get fill color for gradients - now using comprehensive color mapping
-var getSeriesFillColor = function (index) {
-    var colorClasses = [
-        "fill-primary-base",
-        "fill-warning-base",
-        "fill-success-base",
-        "fill-error-base",
-    ];
-    var colorClass = colorClasses[index % colorClasses.length];
-    return getColorValue(colorClass);
-};
 // Simplified curve generation
-var generateMonotonePath = function (points) {
+const generateMonotonePath = (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];
+        return `M ${points[0].x} ${points[0].y}`;
+    let path = `M ${points[0].x} ${points[0].y}`;
+    for (let i = 1; i < points.length; i++) {
+        const prev = points[i - 1];
+        const curr = points[i];
         // Calculate control points for smooth curve
-        var dx = curr.x - prev.x;
-        var controlDistance = dx * 0.3;
-        var cp1x = prev.x + controlDistance;
-        var cp1y = prev.y;
-        var cp2x = curr.x - controlDistance;
-        var cp2y = curr.y;
-        path += " C ".concat(cp1x, " ").concat(cp1y, ", ").concat(cp2x, " ").concat(cp2y, ", ").concat(curr.x, " ").concat(curr.y);
+        const dx = curr.x - prev.x;
+        const controlDistance = dx * 0.3;
+        const cp1x = prev.x + controlDistance;
+        const cp1y = prev.y;
+        const cp2x = curr.x - controlDistance;
+        const cp2y = curr.y;
+        path += ` C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${curr.x} ${curr.y}`;
     }
     return path;
 };
-var generateLinearPath = function (points) {
+const generateLinearPath = (points) => {
     if (points.length === 0)
         return "";
-    var path = "M ".concat(points[0].x, " ").concat(points[0].y);
-    for (var i = 1; i < points.length; i++) {
-        path += " L ".concat(points[i].x, " ").concat(points[i].y);
+    let path = `M ${points[0].x} ${points[0].y}`;
+    for (let i = 1; i < points.length; i++) {
+        path += ` L ${points[i].x} ${points[i].y}`;
+    }
+    return path;
+};
+const generateStepPath = (points) => {
+    if (points.length === 0)
+        return "";
+    if (points.length === 1)
+        return `M ${points[0].x} ${points[0].y}`;
+    let path = `M ${points[0].x} ${points[0].y}`;
+    for (let i = 1; i < points.length; i++) {
+        const prev = points[i - 1];
+        const curr = points[i];
+        const midX = prev.x + (curr.x - prev.x) / 2;
+        // Step: horizontal to midpoint, vertical to current y, horizontal to current x
+        path += ` L ${midX} ${prev.y} L ${midX} ${curr.y} L ${curr.x} ${curr.y}`;
+    }
+    return path;
+};
+const generateStepBeforePath = (points) => {
+    if (points.length === 0)
+        return "";
+    if (points.length === 1)
+        return `M ${points[0].x} ${points[0].y}`;
+    let path = `M ${points[0].x} ${points[0].y}`;
+    for (let i = 1; i < points.length; i++) {
+        const prev = points[i - 1];
+        const curr = points[i];
+        // Step before: vertical first, then horizontal
+        path += ` L ${prev.x} ${curr.y} L ${curr.x} ${curr.y}`;
+    }
+    return path;
+};
+const generateStepAfterPath = (points) => {
+    if (points.length === 0)
+        return "";
+    if (points.length === 1)
+        return `M ${points[0].x} ${points[0].y}`;
+    let path = `M ${points[0].x} ${points[0].y}`;
+    for (let i = 1; i < points.length; i++) {
+        const prev = points[i - 1];
+        const curr = points[i];
+        // Step after: horizontal first, then vertical
+        path += ` L ${curr.x} ${prev.y} L ${curr.x} ${curr.y}`;
     }
     return path;
 };
 // Simple curve implementation
-var generateCurvePath = function (points, curveType) {
-    if (curveType === void 0) { curveType = "monotone"; }
+const generateCurvePath = (points, curveType = "monotone") => {
     if (points.length === 0)
         return "";
     if (points.length === 1)
-        return "M ".concat(points[0].x, " ").concat(points[0].y);
+        return `M ${points[0].x} ${points[0].y}`;
     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) {
-    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)
-    _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;
-    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];
+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, 
+// Standardized visual props with defaults (renamed from area-specific names)
+dotRadius, radius, // @deprecated Use dotRadius instead
+strokeWidth = AREA_CHART_DEFAULTS.strokeWidth, curved = AREA_CHART_DEFAULTS.curved, curveType = AREA_CHART_DEFAULTS.curveType, showDots = AREA_CHART_DEFAULTS.showDots, fillOpacity = AREA_CHART_DEFAULTS.fillOpacity, showStroke = AREA_CHART_DEFAULTS.showStroke, stacked = AREA_CHART_DEFAULTS.stacked, 
+// Base props
+className, title, description, enableKeyboardNavigation = AREA_CHART_DEFAULTS.enableKeyboardNavigation, 
+// Additional className overrides for chart elements
+svgClassName, areaClassName, lineClassName, gridClassName, axisClassName, 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;
+    // 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. " +
+            "Use `dotRadius` instead.");
+    }
+    // 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 ANIMATION_DURATION = 1.5;
+    const [hoveredPoint, setHoveredPoint] = useState(null);
     // Detect if device is mobile/touch
-    var isMobile = typeof window !== 'undefined' &&
-        ('ontouchstart' in window || navigator.maxTouchPoints > 0);
+    const isMobile = typeof window !== "undefined" &&
+        ("ontouchstart" in window || navigator.maxTouchPoints > 0);
     // Use the new tooltip positioning hook
-    var _u = useTooltipPosition({
-        containerRef: containerRef,
-        isMobile: isMobile,
-    }), tooltipData = _u.tooltipData, tooltipRef = _u.tooltipRef, handleMouseEnter = _u.handleMouseEnter, handleMouseMove = _u.handleMouseMove, handleMouseLeave = _u.handleMouseLeave;
+    const { tooltipData, tooltipRef, handleMouseEnter, handleMouseMove, handleMouseLeave, } = useTooltipPosition({
+        containerRef,
+        isMobile,
+    });
     // Use accessibility hook
-    var _v = 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;
+    const { chartAccessibilityProps, descriptionProps, handleMouseInteraction } = useChartAccessibility({
+        chartType: "area",
+        data,
+        config,
+        title,
+        description,
+        enableKeyboardNavigation,
+    });
     // Measure container dimensions
-    useEffect(function () {
-        var updateDimensions = function () {
+    useEffect(() => {
+        const updateDimensions = () => {
             if (containerRef.current) {
-                var _a = containerRef.current.getBoundingClientRect(), width = _a.width, height = _a.height;
+                const { width, height } = containerRef.current.getBoundingClientRect();
                 setDimensions({
                     width: width || 600,
                     height: height || 400,
@@ -130,44 +159,42 @@ var AreaChart = function (_a) {
             }
         };
         updateDimensions();
-        var resizeObserver = new ResizeObserver(updateDimensions);
+        const resizeObserver = new ResizeObserver(updateDimensions);
         if (containerRef.current) {
             resizeObserver.observe(containerRef.current);
         }
-        return function () {
+        return () => {
             resizeObserver.disconnect();
         };
     }, []);
     // 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", { className: cn(areaChartTheme.emptyStateStyle, className), role: "img", "aria-label": "Empty area chart", ...props },
             React__default.createElement("span", null, "No data available")));
     }
     // Calculate dimensions
-    var margin = {
+    const margin = {
         top: 0,
         right: 0,
         bottom: showXAxis ? 40 : 0,
         left: showYAxis ? 60 : 0,
     };
-    var innerWidth = dimensions.width - margin.left - margin.right;
-    var innerHeight = dimensions.height - margin.top - margin.bottom;
+    const innerWidth = dimensions.width - margin.left - margin.right;
+    const innerHeight = dimensions.height - margin.top - margin.bottom;
     // Get all data keys from config
-    var dataKeys = Object.keys(config);
+    const dataKeys = Object.keys(config);
     // Calculate scales
-    var rawMaxValue = Math.max.apply(Math, data.map(function (item) {
-        return stacked
-            ? dataKeys.reduce(function (sum, key) {
-                var value = item[key];
-                return sum + (typeof value === "number" ? value : 0);
-            }, 0)
-            : Math.max.apply(Math, dataKeys.map(function (key) {
-                var value = item[key];
-                return typeof value === "number" ? value : 0;
-            }));
-    }));
-    var minValue = propMinValue !== null && propMinValue !== void 0 ? propMinValue : 0;
-    var maxValue = propMaxValue !== null && propMaxValue !== void 0 ? propMaxValue : (function () {
+    const rawMaxValue = Math.max(...data.map((item) => stacked
+        ? dataKeys.reduce((sum, key) => {
+            const value = item[key];
+            return sum + (typeof value === "number" ? value : 0);
+        }, 0)
+        : Math.max(...dataKeys.map((key) => {
+            const value = item[key];
+            return typeof value === "number" ? value : 0;
+        }))));
+    const minValue = propMinValue !== null && propMinValue !== void 0 ? propMinValue : 0;
+    const maxValue = propMaxValue !== null && propMaxValue !== void 0 ? propMaxValue : (() => {
         if (rawMaxValue <= 10)
             return Math.ceil(rawMaxValue);
         if (rawMaxValue <= 100)
@@ -179,128 +206,117 @@ var AreaChart = function (_a) {
         return Math.ceil(rawMaxValue / 1000) * 1000;
     })();
     // Calculate point position
-    var getPointPosition = function (dataIndex, value) {
+    const getPointPosition = (dataIndex, value) => {
         // Spread points evenly across the full width
         // First point at left edge (margin.left), last point at right edge (margin.left + innerWidth)
-        var x = data.length === 1
+        const x = data.length === 1
             ? margin.left + innerWidth / 2 // Center single point
             : margin.left + (dataIndex / (data.length - 1)) * innerWidth;
-        var y = margin.top +
+        const y = margin.top +
             innerHeight -
             ((value - minValue) / (maxValue - minValue)) * innerHeight;
-        return { x: x, y: y };
-    };
-    // Generate area path with null value handling
-    var generateAreaPath = function (key, stackedValues) {
-        if (!showNullValues) {
-            // Original behavior: skip null values entirely
-            var points_1 = [];
-            var baselinePoints_1 = [];
-            data.forEach(function (item, index) {
-                var rawValue = item[key];
-                var isNull = rawValue === null || rawValue === undefined;
-                var value = isNull ? 0 : typeof rawValue === "number" ? rawValue : 0;
-                if (!isNull) {
-                    var baselineValue = stacked && stackedValues ? stackedValues[index] : minValue;
-                    var topValue = stacked && stackedValues ? stackedValues[index] + value : value;
-                    var topPoint = getPointPosition(index, topValue);
-                    var baselinePoint = getPointPosition(index, baselineValue);
-                    points_1.push(topPoint);
-                    baselinePoints_1.push(baselinePoint);
-                }
-            });
-            if (points_1.length === 0)
-                return null;
-            // Generate the top curve
-            var topPath = generateCurvePath(points_1, curved ? curveType : "linear");
-            // Generate the baseline (reverse order for proper area closure)
-            var reversedBaselinePoints = __spreadArray([], baselinePoints_1, true).reverse();
-            var baselinePath = generateCurvePath(reversedBaselinePoints, curved ? curveType : "linear");
-            // Create closed area path
-            var areaPath = "".concat(topPath, " L ").concat(baselinePoints_1[baselinePoints_1.length - 1].x, " ").concat(baselinePoints_1[baselinePoints_1.length - 1].y, " ").concat(baselinePath.replace('M', 'L'), " Z");
-            return {
-                areaPath: areaPath,
-                linePath: topPath
-            };
-        }
-        else {
-            // New behavior: break areas at null values
-            var segments_1 = [];
-            var currentSegment_1 = { points: [], baselinePoints: [] };
-            data.forEach(function (item, index) {
-                var rawValue = item[key];
-                var isNull = rawValue === null || rawValue === undefined;
-                if (isNull) {
-                    // End current segment and start a new one
-                    if (currentSegment_1.points.length > 0) {
-                        segments_1.push(currentSegment_1);
-                        currentSegment_1 = { points: [], baselinePoints: [] };
-                    }
-                }
-                else {
-                    var value = typeof rawValue === "number" ? rawValue : 0;
-                    var baselineValue = stacked && stackedValues ? stackedValues[index] : minValue;
-                    var topValue = stacked && stackedValues ? stackedValues[index] + value : value;
-                    var topPoint = getPointPosition(index, topValue);
-                    var baselinePoint = getPointPosition(index, baselineValue);
-                    currentSegment_1.points.push(topPoint);
-                    currentSegment_1.baselinePoints.push(baselinePoint);
-                }
-            });
-            // Add the last segment if it has points
-            if (currentSegment_1.points.length > 0) {
-                segments_1.push(currentSegment_1);
-            }
-            if (segments_1.length === 0)
-                return null;
-            // Generate paths for each segment
-            var areaPaths_1 = [];
-            var linePaths_1 = [];
-            segments_1.forEach(function (segment) {
-                if (segment.points.length > 0) {
-                    // Generate the top curve
-                    var topPath = generateCurvePath(segment.points, curved ? curveType : "linear");
-                    // Generate the baseline (reverse order for proper area closure)
-                    var reversedBaselinePoints = __spreadArray([], segment.baselinePoints, true).reverse();
-                    var baselinePath = generateCurvePath(reversedBaselinePoints, curved ? curveType : "linear");
-                    // Create closed area path
-                    var areaPath = "".concat(topPath, " L ").concat(segment.baselinePoints[segment.baselinePoints.length - 1].x, " ").concat(segment.baselinePoints[segment.baselinePoints.length - 1].y, " ").concat(baselinePath.replace('M', 'L'), " Z");
-                    areaPaths_1.push(areaPath);
-                    linePaths_1.push(topPath);
-                }
-            });
-            return {
-                areaPath: areaPaths_1.join(" "),
-                linePath: linePaths_1.join(" ")
-            };
-        }
+        return { x, y };
     };
     // Calculate stacked values for each data point
-    var getStackedValues = function () {
+    const getStackedValues = () => {
         if (!stacked)
             return {};
-        var stackedData = {};
-        var cumulativeValues = new Array(data.length).fill(0);
-        dataKeys.forEach(function (key) {
-            stackedData[key] = __spreadArray([], cumulativeValues, true);
-            data.forEach(function (item, index) {
-                var rawValue = item[key];
-                var value = typeof rawValue === "number" ? rawValue : 0;
+        const stackedData = {};
+        const cumulativeValues = new Array(data.length).fill(0);
+        dataKeys.forEach((key) => {
+            stackedData[key] = [...cumulativeValues];
+            data.forEach((item, index) => {
+                const rawValue = item[key];
+                const value = typeof rawValue === "number" ? rawValue : 0;
                 cumulativeValues[index] += value;
             });
         });
         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),
-        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" },
+    const stackedValues = useMemo(() => getStackedValues(), [data, dataKeys, stacked]);
+    // Generate area path implementation
+    const generatePathData = (key) => {
+        const segments = [];
+        let currentSegment = {
+            points: [],
+            baselinePoints: [],
+        };
+        const seriesStackedValues = stackedValues[key];
+        data.forEach((item, index) => {
+            const rawValue = item[key];
+            const isNull = rawValue === null || rawValue === undefined;
+            if (isNull) {
+                // End current segment and start a new one (creates gap)
+                if (currentSegment.points.length > 0) {
+                    segments.push(currentSegment);
+                    currentSegment = { points: [], baselinePoints: [] };
+                }
+            }
+            else {
+                const value = typeof rawValue === "number" ? rawValue : 0;
+                let baselineValue = stacked && seriesStackedValues
+                    ? seriesStackedValues[index]
+                    : minValue;
+                let topValue = stacked && seriesStackedValues
+                    ? seriesStackedValues[index] + value
+                    : value;
+                const topPoint = getPointPosition(index, topValue);
+                const baselinePoint = getPointPosition(index, baselineValue);
+                currentSegment.points.push(topPoint);
+                currentSegment.baselinePoints.push(baselinePoint);
+            }
+        });
+        // Add the last segment if it has points
+        if (currentSegment.points.length > 0) {
+            segments.push(currentSegment);
+        }
+        if (segments.length === 0)
+            return null;
+        // Generate paths for each segment
+        const areaPaths = [];
+        const linePaths = [];
+        segments.forEach((segment) => {
+            if (segment.points.length > 0) {
+                // Generate the top curve
+                const topPath = generateCurvePath(segment.points, curved ? curveType : "linear");
+                // Generate the baseline (reverse order for proper area closure)
+                const reversedBaselinePoints = [...segment.baselinePoints].reverse();
+                const baselinePath = generateCurvePath(reversedBaselinePoints, curved ? curveType : "linear");
+                // Create closed area path
+                const areaPath = `${topPath} L ${segment.baselinePoints[segment.baselinePoints.length - 1].x} ${segment.baselinePoints[segment.baselinePoints.length - 1].y} ${baselinePath.replace("M", "L")} Z`;
+                areaPaths.push(areaPath);
+                linePaths.push(topPath);
+            }
+        });
+        return {
+            areaPath: areaPaths.join(" "),
+            linePath: linePaths.join(" "),
+        };
+    };
+    return (React__default.createElement("div", { ref: containerRef, className: cn(areaChartTheme.containerStyle, className), ...chartAccessibilityProps, onMouseEnter: handleMouseInteraction, onMouseMove: handleMouseInteraction, ...props },
+        descriptionProps && React__default.createElement("div", { ...descriptionProps }),
+        React__default.createElement("svg", { width: "100%", height: "100%", viewBox: `0 0 ${dimensions.width} ${dimensions.height}`, className: cn(areaChartTheme.svgStyle, 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" })),
-                dataKeys.map(function (key, keyIndex) {
-                    var fillColor = getSeriesFillColor(keyIndex);
-                    return (React__default.createElement("linearGradient", { key: "gradient-".concat(key), id: "area-gradient-".concat(key), x1: "0%", y1: "0%", x2: "0%", y2: "100%" },
+                React__default.createElement("clipPath", { id: clipId },
+                    React__default.createElement("rect", { x: margin.left, y: margin.top, width: innerWidth, height: innerHeight })),
+                React__default.createElement("clipPath", { id: revealClipId },
+                    React__default.createElement(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 (React__default.createElement("linearGradient", { key: `gradient-${key}`, id: `area-gradient-${key}`, x1: "0%", y1: "0%", x2: "0%", y2: "100%" },
                         React__default.createElement("stop", { offset: "0%", stopColor: fillColor, stopOpacity: fillOpacity * 0.8 }),
                         React__default.createElement("stop", { offset: "100%", stopColor: fillColor, stopOpacity: fillOpacity * 0.05 })));
                 }),
@@ -316,54 +332,77 @@ 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(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 () {
-                    var item = data[hoveredPoint.index];
-                    var singleKey = dataKeys[0];
-                    var singleValue = item[singleKey];
-                    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(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
+                    ? (() => {
+                        const item = data[hoveredPoint.index];
+                        const singleKey = dataKeys[0];
+                        const singleValue = item[singleKey];
+                        const 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, className: axisClassName, tickFormatter: (value) => {
                     if (value >= 1000)
-                        return "".concat((value / 1000).toFixed(0), "k");
+                        return `${(value / 1000).toFixed(0)}k`;
                     return value.toString();
                 } }),
-            React__default.createElement("g", { className: "chart-areas" }, dataKeys.map(function (key, keyIndex) {
-                var paths = generateAreaPath(key, stackedValues[key]);
-                var colorClass = getSeriesColorClass(keyIndex);
+            React__default.createElement("g", { className: cn(areaChartTheme.areaGroupStyle, areaClassName), clipPath: `url(#${clipId})` }, dataKeys.map((key, keyIndex) => {
+                const paths = generatePathData(key); // Actual path
+                const 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-'); }) || '') })),
+                return (React__default.createElement("g", { key: key, clipPath: `url(#${revealClipId})` },
+                    React__default.createElement("path", { d: paths.areaPath, fill: `url(#area-gradient-${key})`, className: "transition-colors duration-200", filter: "url(#area-shadow)" }),
+                    showStroke && (React__default.createElement(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(function (item, dataIndex) {
-                            var rawValue = item[key];
-                            var isNull = rawValue === null || rawValue === undefined;
-                            var value = isNull
+                        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 regardless of showNullValues
+                            // Don't render dots for null values
                             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 })));
+                            const topValue = stacked && stackedValues[key]
+                                ? stackedValues[key][dataIndex] + value
+                                : value;
+                            const { x, y } = getPointPosition(dataIndex, topValue);
+                            return (React__default.createElement(motion.g, { key: `${key}-${dataIndex}`, 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",
+                                } },
+                                React__default.createElement(ChartMarker, { cx: x, cy: y, radius: resolvedDotRadius, colorClass: colorClass })));
                         })));
             })),
-            !showDots && hoveredPoint !== null && (React__default.createElement("g", { className: "chart-hover-markers" }, dataKeys.map(function (key, keyIndex) {
-                var item = data[hoveredPoint.index];
-                var rawValue = item[key];
-                var isNull = rawValue === null || rawValue === undefined;
-                var value = isNull
+            !showDots && hoveredPoint !== null && (React__default.createElement("g", { className: "chart-hover-markers" }, 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
@@ -371,62 +410,71 @@ 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);
-                return (React__default.createElement(ChartMarker, { key: "hover-".concat(key, "-").concat(hoveredPoint.index), cx: x, cy: y, radius: radius, colorClass: colorClass }));
+                const topValue = stacked && stackedValues[key]
+                    ? stackedValues[key][hoveredPoint.index] + value
+                    : value;
+                const { x, y } = getPointPosition(hoveredPoint.index, topValue);
+                const colorClass = getSeriesColorClass(keyIndex);
+                return (React__default.createElement(ChartMarker, { key: `hover-${key}-${hoveredPoint.index}`, cx: x, cy: y, radius: resolvedDotRadius, colorClass: colorClass }));
             }))),
-            React__default.createElement("g", { className: "chart-hover-areas" }, data.map(function (item, dataIndex) {
+            React__default.createElement("g", { className: "chart-hover-areas" }, data.map((item, dataIndex) => {
                 // Calculate hover area based on new point positioning
-                var pointX = data.length === 1
+                const pointX = data.length === 1
                     ? margin.left + innerWidth / 2
                     : margin.left + (dataIndex / (data.length - 1)) * innerWidth;
                 // Create hover area around each point
-                var hoverWidth = data.length === 1 ? innerWidth : innerWidth / (data.length - 1);
-                var hoverX = data.length === 1
+                const hoverWidth = data.length === 1 ? innerWidth : innerWidth / (data.length - 1);
+                const hoverX = data.length === 1
                     ? margin.left
                     : Math.max(margin.left, pointX - hoverWidth / 2);
                 // Ensure hover area doesn't exceed chart bounds
-                var adjustedWidth = data.length === 1
+                const adjustedWidth = data.length === 1
                     ? innerWidth
                     : Math.min(hoverWidth, margin.left + innerWidth - hoverX);
-                return (React__default.createElement("rect", { key: "hover-".concat(dataIndex), x: hoverX, y: margin.top, width: adjustedWidth, height: innerHeight, fill: "transparent", className: "cursor-pointer", onMouseEnter: function (e) {
+                return (React__default.createElement("rect", { key: `hover-${dataIndex}`, x: hoverX, y: margin.top, width: adjustedWidth, height: innerHeight, fill: "transparent", className: "cursor-pointer", onMouseEnter: (e) => {
                         setHoveredPoint({ index: dataIndex, key: dataKeys[0] });
                         // Create multi-series tooltip data
-                        var seriesData = dataKeys.map(function (seriesKey, keyIndex) {
+                        const seriesData = dataKeys.map((seriesKey, keyIndex) => {
                             var _a, _b;
-                            var seriesValue = item[seriesKey];
-                            var numValue = typeof seriesValue === 'number' ? seriesValue : 0;
+                            const seriesValue = item[seriesKey];
+                            const numValue = typeof seriesValue === "number" ? seriesValue : 0;
                             return {
                                 key: seriesKey,
                                 label: ((_a = config[seriesKey]) === null || _a === void 0 ? void 0 : _a.label) || seriesKey,
                                 value: numValue,
-                                color: ((_b = config[seriesKey]) === null || _b === void 0 ? void 0 : _b.color) || getSeriesFillColor(keyIndex)
+                                color: ((_b = config[seriesKey]) === null || _b === void 0 ? void 0 : _b.color) ||
+                                    getSeriesFillColor(keyIndex),
                             };
                         });
-                        var content = {
-                            category: item.name || "Category ".concat(dataIndex + 1),
-                            series: seriesData
+                        const content = {
+                            category: item.name || `Category ${dataIndex + 1}`,
+                            series: seriesData,
                         };
-                        var svgCoordinates = {
-                            x: pointX,
-                            y: margin.top + innerHeight / 2,
-                            dimensions: dimensions
-                        };
-                        handleMouseEnter(e, content, svgCoordinates);
-                    }, onMouseMove: function (e) {
-                        if ((hoveredPoint === null || hoveredPoint === void 0 ? void 0 : hoveredPoint.index) === dataIndex) {
-                            var svgCoordinates = {
+                        // Only pass SVG coordinates on mobile for fixed positioning
+                        // On desktop, let the hook use mouse coordinates for cursor-following
+                        const svgCoordinates = isMobile
+                            ? {
                                 x: pointX,
                                 y: margin.top + innerHeight / 2,
-                                dimensions: dimensions
-                            };
+                                dimensions,
+                            }
+                            : undefined;
+                        handleMouseEnter(e, content, svgCoordinates);
+                    }, onMouseMove: (e) => {
+                        if ((hoveredPoint === null || hoveredPoint === void 0 ? void 0 : hoveredPoint.index) === dataIndex) {
+                            // Only pass SVG coordinates on mobile
+                            const svgCoordinates = isMobile
+                                ? {
+                                    x: pointX,
+                                    y: margin.top + innerHeight / 2,
+                                    dimensions,
+                                }
+                                : undefined;
                             handleMouseMove(e, svgCoordinates);
                         }
                     }, 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, alignWithEdge: true })),
         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));
 };