flikkui 0.1.0-beta.3 → 0.1.0-beta.5

package/README.md

@@ -0,0 +1,155 @@
+# Flikkui
+
+A modern React component library built with TypeScript, Tailwind CSS v4, and optional Framer Motion animations. Follows the shadcn philosophy where users can override any styling using className props while getting sensible defaults out of the box.
+
+## 🚀 Quick Start
+
+### 1. Install the package
+
+```bash
+npm install flikkui@beta motion
+# or
+yarn add flikkui@beta motion
+```
+
+### 2. Download the theme file
+
+Download the theme file from [flikkui.dev/theme](https://flikkui.dev/theme) and save it as `flikkui-theme.css` in your project root.
+
+Alternatively, you can copy this file: [flikkui-theme.css](./flikkui-theme.css)
+
+### 3. Import the theme in your app
+
+```tsx
+// In your main App.tsx, index.tsx, or _app.tsx
+import './flikkui-theme.css'  // Import the downloaded theme file
+import App from './App'
+
+// Your app code...
+```
+
+### 4. Start using components
+
+```tsx
+import { Button } from 'flikkui'
+
+export function MyComponent() {
+  return (
+    <Button variant="primary">
+      Hello World
+    </Button>
+  )
+}
+```
+
+## 🎨 Customization
+
+Edit the `flikkui-theme.css` file to customize your design system:
+
+```css
+/* flikkui-theme.css */
+@theme {
+  /* Change primary color */
+  --color-primary-base: oklch(0.666 0.223 48.717); /* Orange */
+  --color-primary-600: oklch(0.666 0.223 48.717);
+  --color-primary-700: oklch(0.555 0.192 47.355);
+  
+  /* Larger buttons */
+  --button-min-h-md: 3rem;
+  --button-px-md: 1.25rem;
+  
+  /* More rounded design */
+  --form-rounded: 1rem;
+}
+```
+
+You can also override styles using className props (shadcn approach):
+
+```tsx
+<Button className="bg-purple-600 hover:bg-purple-700 rounded-full">
+  Custom Button
+</Button>
+```
+
+## 📚 Components
+
+### Core Components
+- **Button** - Multiple variants, states, optional animations
+- **Avatar** - Image handling, fallbacks, status indicators
+- **AvatarGroup** - Overlapping avatars with compound component pattern  
+- **Badge** - Variants, sizes, content flexibility
+- **Accordion** - Compound component with animations
+- **Modal** - Compound component with header, body, footer
+- **Drawer** - Slide-out panels from edges
+- **Popover** - Compound with portal rendering
+- **Tooltip** - Positioning, animations, accessibility
+- **Tabs** - Horizontal tabbed interface
+
+### Form Components  
+- **Input** - Multiple types, masking, validation
+- **Select** - Searchable, compound pattern
+- **Checkbox** - Custom styling, controlled/uncontrolled
+- **Radio** - Group management
+- **Switch** - Toggle functionality
+- **Textarea** - Resizable, validation
+
+### Data Display
+- **Table** - Dual API, sorting, filtering, selection
+- **Spinner** - Loading states, sizes
+
+### Charts
+- **AreaChart** - Stacked, curved, null value handling
+- **BarChart** - Horizontal/vertical, grouped, stacked  
+- **LineChart** - Multiple series, curved lines
+- **DonutChart** - Progress, animations, gradients
+- **Heatmap** - Interactive, customizable intensity
+
+## 🔄 Migration from v0.1.0-beta.3
+
+If you were using the previous version, update your imports:
+
+```tsx
+// Old (v0.1.0-beta.3)
+import 'flikkui/styles.css'
+
+// New (v0.1.0-beta.4+)
+import './flikkui-theme.css'  // Download this file first
+```
+
+This change gives you:
+- ✅ 100% predictable styling
+- ✅ Full control over your design system  
+- ✅ No more CSS cascade conflicts
+- ✅ Easy theme customization
+
+## 💡 Philosophy
+
+Flikkui follows the **shadcn approach**:
+- Components provide sensible defaults
+- **className overrides always take precedence**
+- Full TypeScript support with excellent DX
+- Copy-paste friendly - customize anything
+- CSS variables for consistent theming
+
+## 🛠️ Tech Stack
+
+- **React 18** with TypeScript (strict mode)
+- **Tailwind CSS v4** with CSS variables
+- **Framer Motion** (optional, for enhanced components)
+- **Accessibility-first** - WCAG 2.1 AA compliance built-in
+
+## 📖 Documentation
+
+Visit [flikkui.dev](https://flikkui.dev) for:
+- Component API documentation
+- Interactive examples
+- Theme customization guide
+- Migration guides
+
+## 📄 License
+
+MIT
+
+---
+
+Made with ❤️ by [Espranza Innovations](https://espranza.net)

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

@@ -0,0 +1,434 @@
+import { __rest, __assign, __spreadArray } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default, { useRef, useState, useEffect } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { useChartTheme } from '../hooks/useChartTheme.js';
+import { useTooltipPosition } from '../hooks/useTooltipPosition.js';
+import { useChartAccessibility } from '../hooks/useChartAccessibility.js';
+import { XAxis } from '../shared/ChartAxis/XAxis.js';
+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 { getColorValue } from '../utils/color-utils.js';
+import { AREA_CHART_DEFAULTS } from './AreaChart.types.js';
+
+// Color configuration for data series
+var getSeriesColorClass = function (index) {
+    var colors = [
+        "stroke-primary-base fill-primary-base",
+        "stroke-warning-base fill-warning-base",
+        "stroke-success-base fill-success-base",
+        "stroke-error-base fill-error-base",
+    ];
+    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) {
+    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;
+};
+// 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 "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];
+    // Detect if device is mobile/touch
+    var isMobile = typeof window !== 'undefined' &&
+        ('ontouchstart' in window || navigator.maxTouchPoints > 0);
+    // Use the new tooltip positioning hook
+    var _u = useTooltipPosition({
+        containerRef: containerRef,
+        isMobile: isMobile,
+    }), tooltipData = _u.tooltipData, tooltipRef = _u.tooltipRef, handleMouseEnter = _u.handleMouseEnter, handleMouseMove = _u.handleMouseMove, handleMouseLeave = _u.handleMouseLeave;
+    // 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;
+    // 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("chart-container flex items-center justify-center text-neutral-500", 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 };
+    };
+    // 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(" ")
+            };
+        }
+    };
+    // 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 = 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" },
+            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("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 }),
+            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) {
+                    if (value >= 1000)
+                        return "".concat((value / 1000).toFixed(0), "k");
+                    return value.toString();
+                } }),
+            React__default.createElement("g", { className: "chart-areas" }, dataKeys.map(function (key, keyIndex) {
+                var paths = generateAreaPath(key, stackedValues[key]);
+                var colorClass = getSeriesColorClass(keyIndex);
+                if (!paths)
+                    return null;
+                return (React__default.createElement("g", { key: key },
+                    React__default.createElement("path", { d: paths.areaPath, fill: "url(#area-gradient-".concat(key, ")"), className: "transition-all duration-200", filter: "url(#area-shadow)" }),
+                    showStroke && (React__default.createElement("path", { d: paths.linePath, fill: "none", strokeWidth: strokeWidth, strokeLinecap: "round", className: cn("transition-all duration-200", colorClass.split(' ').find(function (cls) { return cls.startsWith('stroke-'); }) || '') })),
+                    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 regardless of showNullValues
+                            if (isNull)
+                                return null;
+                            stacked && stackedValues[key] ? stackedValues[key][dataIndex] : minValue;
+                            var topValue = stacked && stackedValues[key] ? stackedValues[key][dataIndex] + value : value;
+                            var _a = getPointPosition(dataIndex, topValue), x = _a.x, y = _a.y;
+                            (hoveredPoint === null || hoveredPoint === void 0 ? void 0 : hoveredPoint.index) === dataIndex && hoveredPoint.key === key;
+                            return (React__default.createElement("g", { key: "".concat(key, "-").concat(dataIndex) },
+                                React__default.createElement(ChartMarker, { cx: x, cy: y, radius: radius, colorClass: colorClass })));
+                        })));
+            })),
+            !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;
+                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 }));
+            }))),
+            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
+                        };
+                        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 = {
+                                x: pointX,
+                                y: margin.top + innerHeight / 2,
+                                dimensions: dimensions
+                            };
+                            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(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.types.js

@@ -0,0 +1,7 @@
+import { __assign } from '../../../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), { radius: CHART_DEFAULTS.radius, 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 };