flikkui 0.1.0-beta.11 → 0.1.0-beta.12

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

@@ -0,0 +1,490 @@
+import { __rest, __assign, __spreadArray } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
+import React__default, { useRef, useState, useId, useEffect, useMemo } from 'react';
+import { motion } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
+import { useTooltipPosition } from '../hooks/useTooltipPosition.js';
+import { useChartAccessibility } from '../hooks/useChartAccessibility.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 { ChartMarker } from '../shared/ChartMarker/ChartMarker.js';
+import { ChartCrosshair } from '../shared/ChartCrosshair/ChartCrosshair.js';
+import { AREA_CHART_DEFAULTS } from './AreaChart.types.js';
+import { areaChartTheme, getSeriesFillColor, getSeriesColorClass } from './AreaChart.theme.js';
+
+// Simplified curve generation
+var generateMonotonePath = function (points) {
+    if (points.length === 0)
+        return "";
+    if (points.length === 1)
+        return "M ".concat(points[0].x, " ").concat(points[0].y);
+    var path = "M ".concat(points[0].x, " ").concat(points[0].y);
+    for (var i = 1; i < points.length; i++) {
+        var prev = points[i - 1];
+        var curr = points[i];
+        // 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);
+    }
+    return path;
+};
+var generateLinearPath = function (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);
+    }
+    return path;
+};
+var generateStepPath = function (points) {
+    if (points.length === 0)
+        return "";
+    if (points.length === 1)
+        return "M ".concat(points[0].x, " ").concat(points[0].y);
+    var path = "M ".concat(points[0].x, " ").concat(points[0].y);
+    for (var i = 1; i < points.length; i++) {
+        var prev = points[i - 1];
+        var curr = points[i];
+        var midX = prev.x + (curr.x - prev.x) / 2;
+        // Step: horizontal to midpoint, vertical to current y, horizontal to current x
+        path += " L ".concat(midX, " ").concat(prev.y, " L ").concat(midX, " ").concat(curr.y, " L ").concat(curr.x, " ").concat(curr.y);
+    }
+    return path;
+};
+var generateStepBeforePath = function (points) {
+    if (points.length === 0)
+        return "";
+    if (points.length === 1)
+        return "M ".concat(points[0].x, " ").concat(points[0].y);
+    var path = "M ".concat(points[0].x, " ").concat(points[0].y);
+    for (var i = 1; i < points.length; i++) {
+        var prev = points[i - 1];
+        var curr = points[i];
+        // Step before: vertical first, then horizontal
+        path += " L ".concat(prev.x, " ").concat(curr.y, " L ").concat(curr.x, " ").concat(curr.y);
+    }
+    return path;
+};
+var generateStepAfterPath = function (points) {
+    if (points.length === 0)
+        return "";
+    if (points.length === 1)
+        return "M ".concat(points[0].x, " ").concat(points[0].y);
+    var path = "M ".concat(points[0].x, " ").concat(points[0].y);
+    for (var i = 1; i < points.length; i++) {
+        var prev = points[i - 1];
+        var curr = points[i];
+        // Step after: horizontal first, then vertical
+        path += " L ".concat(curr.x, " ").concat(prev.y, " L ").concat(curr.x, " ").concat(curr.y);
+    }
+    return path;
+};
+// Simple curve implementation
+var generateCurvePath = function (points, curveType) {
+    if (curveType === void 0) { curveType = "monotone"; }
+    if (points.length === 0)
+        return "";
+    if (points.length === 1)
+        return "M ".concat(points[0].x, " ").concat(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 _b;
+    var data = _a.data, config = _a.config, 
+    // Standardized display props with defaults
+    _c = _a.showGrid, 
+    // Standardized display props with defaults
+    showGrid = _c === void 0 ? AREA_CHART_DEFAULTS.showGrid : _c, _d = _a.showXAxis, showXAxis = _d === void 0 ? AREA_CHART_DEFAULTS.showXAxis : _d, _e = _a.showYAxis, showYAxis = _e === void 0 ? AREA_CHART_DEFAULTS.showYAxis : _e, propMinValue = _a.minValue, propMaxValue = _a.maxValue, _f = _a.variant; _f === void 0 ? AREA_CHART_DEFAULTS.variant : _f; _a.theme; 
+    var // Standardized visual props with defaults (renamed from area-specific names)
+    dotRadius = _a.dotRadius, radius = _a.radius, // @deprecated Use dotRadius instead
+    _g = _a.strokeWidth, // @deprecated Use dotRadius instead
+    strokeWidth = _g === void 0 ? AREA_CHART_DEFAULTS.strokeWidth : _g, _h = _a.curved, curved = _h === void 0 ? AREA_CHART_DEFAULTS.curved : _h, _j = _a.curveType, curveType = _j === void 0 ? AREA_CHART_DEFAULTS.curveType : _j, _k = _a.showDots, showDots = _k === void 0 ? AREA_CHART_DEFAULTS.showDots : _k, _l = _a.fillOpacity, fillOpacity = _l === void 0 ? AREA_CHART_DEFAULTS.fillOpacity : _l, _m = _a.showStroke, showStroke = _m === void 0 ? AREA_CHART_DEFAULTS.showStroke : _m, _o = _a.stacked, stacked = _o === void 0 ? AREA_CHART_DEFAULTS.stacked : _o, 
+    // Base props
+    className = _a.className, title = _a.title, description = _a.description, _p = _a.enableKeyboardNavigation, enableKeyboardNavigation = _p === void 0 ? AREA_CHART_DEFAULTS.enableKeyboardNavigation : _p, 
+    // Additional className overrides for chart elements
+    svgClassName = _a.svgClassName, areaClassName = _a.areaClassName, lineClassName = _a.lineClassName, gridClassName = _a.gridClassName, axisClassName = _a.axisClassName, children = _a.children, props = __rest(_a, ["data", "config", "showGrid", "showXAxis", "showYAxis", "minValue", "maxValue", "variant", "theme", "dotRadius", "radius", "strokeWidth", "curved", "curveType", "showDots", "fillOpacity", "showStroke", "stacked", "className", "title", "description", "enableKeyboardNavigation", "svgClassName", "areaClassName", "lineClassName", "gridClassName", "axisClassName", "children"]);
+    // Resolve dotRadius with backward compatibility
+    var resolvedDotRadius = (_b = dotRadius !== null && dotRadius !== void 0 ? dotRadius : radius) !== null && _b !== void 0 ? _b : 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
+    var containerRef = useRef(null);
+    var _q = useState({ width: 600, height: 400 }), dimensions = _q[0], setDimensions = _q[1];
+    var clipId = useId();
+    var revealClipId = useId();
+    var ANIMATION_DURATION = 1.5;
+    var _r = useState(null), hoveredPoint = _r[0], setHoveredPoint = _r[1];
+    // Detect if device is mobile/touch
+    var isMobile = typeof window !== "undefined" &&
+        ("ontouchstart" in window || navigator.maxTouchPoints > 0);
+    // Use the new tooltip positioning hook
+    var _s = useTooltipPosition({
+        containerRef: containerRef,
+        isMobile: isMobile,
+    }), tooltipData = _s.tooltipData, tooltipRef = _s.tooltipRef, handleMouseEnter = _s.handleMouseEnter, handleMouseMove = _s.handleMouseMove, handleMouseLeave = _s.handleMouseLeave;
+    // Use accessibility hook
+    var _t = useChartAccessibility({
+        chartType: "area",
+        data: data,
+        config: config,
+        title: title,
+        description: description,
+        enableKeyboardNavigation: enableKeyboardNavigation,
+    }), chartAccessibilityProps = _t.chartAccessibilityProps, descriptionProps = _t.descriptionProps, handleMouseInteraction = _t.handleMouseInteraction;
+    // Measure container dimensions
+    useEffect(function () {
+        var updateDimensions = function () {
+            if (containerRef.current) {
+                var _a = containerRef.current.getBoundingClientRect(), width = _a.width, height = _a.height;
+                setDimensions({
+                    width: width || 600,
+                    height: height || 400,
+                });
+            }
+        };
+        updateDimensions();
+        var resizeObserver = new ResizeObserver(updateDimensions);
+        if (containerRef.current) {
+            resizeObserver.observe(containerRef.current);
+        }
+        return function () {
+            resizeObserver.disconnect();
+        };
+    }, []);
+    // Early return if no data
+    if (!data || data.length === 0) {
+        return (React__default.createElement("div", __assign({ 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 = {
+        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;
+    // Get all data keys from config
+    var 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 () {
+        if (rawMaxValue <= 10)
+            return Math.ceil(rawMaxValue);
+        if (rawMaxValue <= 100)
+            return Math.ceil(rawMaxValue / 5) * 5;
+        if (rawMaxValue <= 1000)
+            return Math.ceil(rawMaxValue / 50) * 50;
+        if (rawMaxValue <= 10000)
+            return Math.ceil(rawMaxValue / 500) * 500;
+        return Math.ceil(rawMaxValue / 1000) * 1000;
+    })();
+    // Calculate point position
+    var getPointPosition = function (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
+            ? margin.left + innerWidth / 2 // Center single point
+            : margin.left + (dataIndex / (data.length - 1)) * innerWidth;
+        var y = margin.top +
+            innerHeight -
+            ((value - minValue) / (maxValue - minValue)) * innerHeight;
+        return { x: x, y: y };
+    };
+    // Calculate stacked values for each data point
+    var getStackedValues = function () {
+        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;
+                cumulativeValues[index] += value;
+            });
+        });
+        return stackedData;
+    };
+    var stackedValues = useMemo(function () { return getStackedValues(); }, [data, dataKeys, stacked]);
+    // Generate area path implementation
+    var generatePathData = function (key) {
+        var segments = [];
+        var currentSegment = {
+            points: [],
+            baselinePoints: [],
+        };
+        var seriesStackedValues = stackedValues[key];
+        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 (creates gap)
+                if (currentSegment.points.length > 0) {
+                    segments.push(currentSegment);
+                    currentSegment = { points: [], baselinePoints: [] };
+                }
+            }
+            else {
+                var value = typeof rawValue === "number" ? rawValue : 0;
+                var baselineValue = stacked && seriesStackedValues
+                    ? seriesStackedValues[index]
+                    : minValue;
+                var topValue = stacked && seriesStackedValues
+                    ? seriesStackedValues[index] + value
+                    : value;
+                var topPoint = getPointPosition(index, topValue);
+                var 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
+        var areaPaths = [];
+        var linePaths = [];
+        segments.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.push(areaPath);
+                linePaths.push(topPath);
+            }
+        });
+        return {
+            areaPath: areaPaths.join(" "),
+            linePath: linePaths.join(" "),
+        };
+    };
+    return (React__default.createElement("div", __assign({ ref: containerRef, className: cn(areaChartTheme.containerStyle, 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: 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" })),
+                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(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("stop", { offset: "0%", stopColor: fillColor, stopOpacity: fillOpacity * 0.8 }),
+                        React__default.createElement("stop", { offset: "100%", stopColor: fillColor, stopOpacity: fillOpacity * 0.05 })));
+                }),
+                React__default.createElement("linearGradient", { id: "vertical-fade", x1: "0%", y1: "0%", x2: "0%", y2: "100%" },
+                    React__default.createElement("stop", { offset: "0%", stopColor: "#6b7280", stopOpacity: "0" }),
+                    React__default.createElement("stop", { offset: "40%", stopColor: "#6b7280", stopOpacity: "0.3" }),
+                    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("linearGradient", { id: "horizontal-fade", x1: "0%", y1: "0%", x2: "100%", y2: "0%" },
+                    React__default.createElement("stop", { offset: "0%", stopColor: "#6b7280", stopOpacity: "0" }),
+                    React__default.createElement("stop", { offset: "40%", stopColor: "#6b7280", stopOpacity: "0.3" }),
+                    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, className: gridClassName }),
+            React__default.createElement(ChartCrosshair, { show: hoveredPoint !== null, x: hoveredPoint !== null
+                    ? data.length === 1
+                        ? margin.left + innerWidth / 2
+                        : margin.left +
+                            (hoveredPoint.index / (data.length - 1)) * innerWidth
+                    : 0, y: hoveredPoint !== null && dataKeys.length === 1
+                    ? (function () {
+                        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, className: axisClassName, tickFormatter: function (value) {
+                    if (value >= 1000)
+                        return "".concat((value / 1000).toFixed(0), "k");
+                    return value.toString();
+                } }),
+            React__default.createElement("g", { className: cn(areaChartTheme.areaGroupStyle, areaClassName), clipPath: "url(#".concat(clipId, ")") }, dataKeys.map(function (key, keyIndex) {
+                var paths = generatePathData(key); // Actual path
+                var colorClass = getSeriesColorClass(keyIndex);
+                if (!paths)
+                    return null;
+                return (React__default.createElement("g", { key: key, clipPath: "url(#".concat(revealClipId, ")") },
+                    React__default.createElement("path", { d: paths.areaPath, fill: "url(#area-gradient-".concat(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(function (cls) { return cls.startsWith("stroke-"); }) || "", lineClassName) })),
+                    showDots &&
+                        data.map(function (item, dataIndex) {
+                            var rawValue = item[key];
+                            var isNull = rawValue === null || rawValue === undefined;
+                            var value = isNull
+                                ? 0
+                                : typeof rawValue === "number"
+                                    ? rawValue
+                                    : 0;
+                            // Don't render dots for null values
+                            if (isNull)
+                                return null;
+                            var topValue = stacked && stackedValues[key]
+                                ? stackedValues[key][dataIndex] + value
+                                : value;
+                            var _a = getPointPosition(dataIndex, topValue), x = _a.x, y = _a.y;
+                            return (React__default.createElement(motion.g, { key: "".concat(key, "-").concat(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
+                    ? 0
+                    : typeof rawValue === "number"
+                        ? rawValue
+                        : 0;
+                // Don't render hover markers for null values
+                if (isNull)
+                    return null;
+                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: resolvedDotRadius, colorClass: colorClass }));
+            }))),
+            React__default.createElement("g", { className: "chart-hover-areas" }, data.map(function (item, dataIndex) {
+                // Calculate hover area based on new point positioning
+                var 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
+                    ? margin.left
+                    : Math.max(margin.left, pointX - hoverWidth / 2);
+                // Ensure hover area doesn't exceed chart bounds
+                var 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) {
+                        setHoveredPoint({ index: dataIndex, key: dataKeys[0] });
+                        // Create multi-series tooltip data
+                        var seriesData = dataKeys.map(function (seriesKey, keyIndex) {
+                            var _a, _b;
+                            var seriesValue = item[seriesKey];
+                            var 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),
+                            };
+                        });
+                        var content = {
+                            category: item.name || "Category ".concat(dataIndex + 1),
+                            series: seriesData,
+                        };
+                        // Only pass SVG coordinates on mobile for fixed positioning
+                        // On desktop, let the hook use mouse coordinates for cursor-following
+                        var svgCoordinates = isMobile
+                            ? {
+                                x: pointX,
+                                y: margin.top + innerHeight / 2,
+                                dimensions: dimensions,
+                            }
+                            : undefined;
+                        handleMouseEnter(e, content, svgCoordinates);
+                    }, onMouseMove: function (e) {
+                        if ((hoveredPoint === null || hoveredPoint === void 0 ? void 0 : hoveredPoint.index) === dataIndex) {
+                            // Only pass SVG coordinates on mobile
+                            var svgCoordinates = isMobile
+                                ? {
+                                    x: pointX,
+                                    y: margin.top + innerHeight / 2,
+                                    dimensions: 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, 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));
+};
+
+export { AreaChart };

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

@@ -0,0 +1,45 @@
+/**
+ * AreaChart theme configuration
+ * Uses production-ready CSS variables from global.scss
+ *
+ * Note: Color cycling and gradients are handled inline in component
+ * This theme focuses on container, SVG, and interactive styling
+ */
+var areaChartTheme = {
+    // Main container with transition utilities for hover states
+    containerStyle: "chart-container w-full h-full relative [&_.chart-areas]:transition-opacity [&_.chart-areas]:duration-300 [&_.chart-hover-areas]:cursor-pointer [&_.chart-hover-markers]:transition-all [&_.chart-hover-markers]:duration-200",
+    // SVG container with overflow and transition utilities
+    svgStyle: "overflow-visible [&_.chart-areas_path]:transition-all [&_.chart-areas_path]:duration-200",
+    // Area group styling with drop shadows
+    areaGroupStyle: "chart-areas [&_path]:drop-shadow-sm [&_path]:transition-all [&_path]:duration-200",
+    // Empty state text color using correct CSS variable
+    emptyStateStyle: "chart-container flex items-center justify-center text-[var(--color-text-placeholder)]",
+};
+/**
+ * Get series color class for stroke and fill
+ * Uses semantic color CSS variables in production-ready format
+ */
+var getSeriesColorClass = function (index) {
+    var colors = [
+        "stroke-[var(--color-primary)] fill-[var(--color-primary)]",
+        "stroke-[var(--color-warning)] fill-[var(--color-warning)]",
+        "stroke-[var(--color-success)] fill-[var(--color-success)]",
+        "stroke-[var(--color-danger)] fill-[var(--color-danger)]",
+    ];
+    return colors[index % colors.length];
+};
+/**
+ * Get fill color for SVG gradients
+ * Returns CSS variable value directly for stopColor attribute
+ */
+var getSeriesFillColor = function (index) {
+    var colorVars = [
+        "var(--color-primary)",
+        "var(--color-warning)",
+        "var(--color-success)",
+        "var(--color-danger)",
+    ];
+    return colorVars[index % colorVars.length];
+};
+
+export { areaChartTheme, getSeriesColorClass, getSeriesFillColor };

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

@@ -0,0 +1,7 @@
+import { __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
+import { CHART_DEFAULTS } from '../types/chart.types.js';
+
+// Default values using centralized defaults
+var AREA_CHART_DEFAULTS = __assign(__assign({}, CHART_DEFAULTS), { dotRadius: CHART_DEFAULTS.dotRadius, radius: CHART_DEFAULTS.dotRadius, strokeWidth: CHART_DEFAULTS.strokeWidth, curved: CHART_DEFAULTS.curved, curveType: CHART_DEFAULTS.curveType, showDots: CHART_DEFAULTS.showDots, fillOpacity: CHART_DEFAULTS.fillOpacity, showStroke: CHART_DEFAULTS.showStroke, stacked: CHART_DEFAULTS.stacked });
+
+export { AREA_CHART_DEFAULTS };