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

package/dist/components/charts/shared/ChartErrorBoundary/ChartErrorBoundary.js

@@ -0,0 +1,66 @@
+import { __extends } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
+import React__default, { Component } from 'react';
+import { cn } from '../../../../utils/cn.js';
+
+/**
+ * Error boundary specifically designed for chart components
+ * Provides graceful error handling and fallback UI
+ */
+var ChartErrorBoundary = /** @class */ (function (_super) {
+    __extends(ChartErrorBoundary, _super);
+    function ChartErrorBoundary(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = { hasError: false };
+        return _this;
+    }
+    ChartErrorBoundary.getDerivedStateFromError = function (error) {
+        return {
+            hasError: true,
+            error: error,
+        };
+    };
+    ChartErrorBoundary.prototype.componentDidCatch = function (error, errorInfo) {
+        this.setState({
+            error: error,
+            errorInfo: errorInfo,
+        });
+        // Call optional error handler
+        if (this.props.onError) {
+            this.props.onError(error, errorInfo);
+        }
+        // Log error in development
+        if (process.env.NODE_ENV === 'development') {
+            console.error('Chart Error Boundary caught an error:', error, errorInfo);
+        }
+    };
+    ChartErrorBoundary.prototype.render = function () {
+        var _this = this;
+        var _a;
+        if (this.state.hasError) {
+            // Use custom fallback if provided
+            if (this.props.fallback) {
+                return this.props.fallback;
+            }
+            // Default error UI
+            return (React__default.createElement("div", { className: cn("flex flex-col items-center justify-center p-6 border border-danger-200 bg-danger-50 rounded-lg text-center", this.props.className), role: "alert", "aria-live": "polite" },
+                React__default.createElement("div", { className: "flex items-center gap-2 mb-2" },
+                    React__default.createElement("svg", { className: "w-5 h-5 text-danger-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" },
+                        React__default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" })),
+                    React__default.createElement("h3", { className: "text-sm font-medium text-danger-800" }, "Chart Error")),
+                React__default.createElement("p", { className: "text-sm text-danger-600 mb-3" }, "Unable to render chart due to an error"),
+                this.props.showErrorDetails && this.state.error && (React__default.createElement("details", { className: "w-full" },
+                    React__default.createElement("summary", { className: "text-xs text-danger-500 cursor-pointer hover:text-danger-700 mb-2" }, "Show error details"),
+                    React__default.createElement("div", { className: "text-left bg-danger-100 p-3 rounded border text-xs font-mono text-danger-800 overflow-auto max-h-32" },
+                        React__default.createElement("div", { className: "font-semibold mb-1" }, "Error:"),
+                        React__default.createElement("div", { className: "mb-2" }, this.state.error.message),
+                        ((_a = this.state.errorInfo) === null || _a === void 0 ? void 0 : _a.componentStack) && (React__default.createElement(React__default.Fragment, null,
+                            React__default.createElement("div", { className: "font-semibold mb-1" }, "Component Stack:"),
+                            React__default.createElement("pre", { className: "whitespace-pre-wrap text-xs" }, this.state.errorInfo.componentStack)))))),
+                React__default.createElement("button", { onClick: function () { return _this.setState({ hasError: false, error: undefined, errorInfo: undefined }); }, className: "mt-3 px-3 py-1 text-xs bg-danger-600 text-white rounded hover:bg-danger-700 transition-colors" }, "Try Again")));
+        }
+        return this.props.children;
+    };
+    return ChartErrorBoundary;
+}(Component));
+
+export { ChartErrorBoundary };

package/dist/components/charts/shared/ChartGrid/HorizontalGrid.js

@@ -0,0 +1,22 @@
+import React__default from 'react';
+import { cn } from '../../../../utils/cn.js';
+
+/**
+ * HorizontalGrid component for charts
+ * Renders horizontal grid lines at specified intervals
+ */
+var HorizontalGrid = function (_a) {
+    var x = _a.x, y = _a.y, width = _a.width, height = _a.height, _b = _a.lineCount, lineCount = _b === void 0 ? 5 : _b, _c = _a.show, show = _c === void 0 ? true : _c, _d = _a.color, color = _d === void 0 ? 'currentColor' : _d, className = _a.className, tickPositions = _a.tickPositions;
+    if (!show)
+        return null;
+    // Generate grid line positions
+    var positions = tickPositions ||
+        Array.from({ length: lineCount }, function (_, i) {
+            if (lineCount <= 1)
+                return y;
+            return y + (i * height) / (lineCount - 1);
+        });
+    return (React__default.createElement("g", { className: cn('chart-horizontal-grid', className) }, positions.map(function (lineY, index) { return (React__default.createElement("line", { key: index, x1: x, y1: lineY, x2: x + width, y2: lineY, stroke: color, className: "opacity-10", strokeWidth: 1 })); })));
+};
+
+export { HorizontalGrid };

package/dist/components/charts/shared/ChartLegend/ChartLegend.js

@@ -0,0 +1,30 @@
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+
+/**
+ * Basic ChartLegend component - minimal implementation
+ * TODO: Enhance with full legend functionality when needed
+ */
+var ChartLegend = function (_a) {
+    var content = _a.content, className = _a.className, wrapperStyle = _a.wrapperStyle, _b = _a.layout, layout = _b === void 0 ? 'horizontal' : _b, _c = _a.align, align = _c === void 0 ? 'center' : _c, _d = _a.verticalAlign, verticalAlign = _d === void 0 ? 'bottom' : _d, props = __rest(_a, ["content", "className", "wrapperStyle", "layout", "align", "verticalAlign"]);
+    if (!content) {
+        return null;
+    }
+    var alignClasses = {
+        left: 'justify-start',
+        center: 'justify-center',
+        right: 'justify-end',
+    };
+    var verticalAlignClasses = {
+        top: 'items-start',
+        middle: 'items-center',
+        bottom: 'items-end',
+    };
+    var layoutClasses = {
+        horizontal: 'flex-row',
+        vertical: 'flex-col',
+    };
+    return (React__default.createElement("div", __assign({ className: "flex ".concat(layoutClasses[layout], " ").concat(alignClasses[align], " ").concat(verticalAlignClasses[verticalAlign], " ").concat(className || ''), style: wrapperStyle }, props), content));
+};
+
+export { ChartLegend };

package/dist/components/charts/shared/ChartLegend/ChartLegendContent.js

@@ -0,0 +1,22 @@
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+
+/**
+ * Basic ChartLegendContent component - minimal implementation
+ * TODO: Enhance with full legend content functionality when needed
+ */
+var ChartLegendContent = function (_a) {
+    var _b = _a.payload, payload = _b === void 0 ? [] : _b, _c = _a.nameKey, nameKey = _c === void 0 ? 'name' : _c, className = _a.className, props = __rest(_a, ["payload", "nameKey", "className"]);
+    if (!payload || payload.length === 0) {
+        return null;
+    }
+    return (React__default.createElement("div", __assign({ className: "flex flex-wrap gap-4 ".concat(className || '') }, props), payload.map(function (entry, index) {
+        var name = entry[nameKey] || entry.dataKey || "Series ".concat(index + 1);
+        var color = entry.color || '#8884d8';
+        return (React__default.createElement("div", { key: index, className: "flex items-center gap-2" },
+            React__default.createElement("div", { className: "w-3 h-3 rounded", style: { backgroundColor: color } }),
+            React__default.createElement("span", { className: "text-sm text-gray-600" }, name)));
+    })));
+};
+
+export { ChartLegendContent };

package/dist/components/charts/shared/ChartMarker/ChartMarker.js

@@ -0,0 +1,23 @@
+import React__default, { useState } from 'react';
+import { cn } from '../../../../utils/cn.js';
+import { chartMarkerTheme } from './ChartMarker.theme.js';
+
+/**
+ * ChartMarker component for rendering circular data point markers in charts
+ * Supports hover scaling with React state for reliable SVG interactions
+ */
+var ChartMarker = function (_a) {
+    var cx = _a.cx, cy = _a.cy, radius = _a.radius, colorClass = _a.colorClass, className = _a.className, _b = _a.strokeWidth, strokeWidth = _b === void 0 ? 2 : _b, fillColor = _a.fillColor, strokeColor = _a.strokeColor;
+    var theme = chartMarkerTheme;
+    var _c = useState(false), isHovered = _c[0], setIsHovered = _c[1];
+    var baseClasses = cn(theme.baseStyle, colorClass, className);
+    // Calculate hover radius
+    var currentRadius = isHovered ? radius * 1.1 : radius;
+    return (React__default.createElement("g", { className: "chart-marker" },
+        React__default.createElement("circle", { cx: cx, cy: cy, r: currentRadius, className: baseClasses, fill: fillColor || "white", stroke: strokeColor, strokeWidth: strokeWidth, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, style: {
+                transition: 'linear 0.2s ease-out',
+                cursor: 'pointer'
+            } })));
+};
+
+export { ChartMarker };

package/dist/components/charts/shared/ChartMarker/ChartMarker.theme.js

@@ -0,0 +1,9 @@
+/**
+ * Default theme for ChartMarker component
+ * Provides consistent styling for chart data point markers
+ */
+var chartMarkerTheme = {
+    baseStyle: "fill-white stroke-2",
+};
+
+export { chartMarkerTheme };

package/dist/components/charts/shared/ChartText/ChartText.js

@@ -0,0 +1,33 @@
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import { cn } from '../../../../utils/cn.js';
+import { chartTextTheme } from './ChartText.theme.js';
+
+/**
+ * ChartText component for consistent typography in charts
+ * Uses fixed Tailwind styling for consistency
+ */
+var ChartText = function (_a) {
+    var children = _a.children, _b = _a.textAnchor, textAnchor = _b === void 0 ? "start" : _b, _c = _a.dominantBaseline, dominantBaseline = _c === void 0 ? "auto" : _c, maxWidth = _a.maxWidth, _d = _a.truncate, truncate = _d === void 0 ? false : _d, _e = _a.rotation, rotation = _e === void 0 ? 0 : _e, className = _a.className, props = __rest(_a, ["children", "textAnchor", "dominantBaseline", "maxWidth", "truncate", "rotation", "className"]);
+    var theme = chartTextTheme;
+    // Truncate text if needed
+    var truncateText = function (text, maxWidth) {
+        // Rough estimate: 6px per character for text-sm
+        if (!maxWidth || text.length <= maxWidth / 6) {
+            return text;
+        }
+        var maxChars = Math.floor(maxWidth / 6) - 3;
+        return text.substring(0, maxChars) + "...";
+    };
+    // Process children to handle truncation
+    var processedChildren = React__default.useMemo(function () {
+        if (!truncate || !maxWidth || typeof children !== "string") {
+            return children;
+        }
+        return truncateText(children, maxWidth);
+    }, [children, truncate, maxWidth]);
+    var x = props.x, y = props.y;
+    return (React__default.createElement("text", __assign({ textAnchor: textAnchor, dominantBaseline: dominantBaseline, className: cn(theme.baseStyle, className), transform: rotation !== 0 && x !== undefined && y !== undefined ? "rotate(".concat(rotation, ", ").concat(x, ", ").concat(y, ")") : undefined }, props), processedChildren));
+};
+
+export { ChartText };

package/dist/components/charts/shared/ChartText/ChartText.theme.js

@@ -0,0 +1,9 @@
+/**
+ * Default theme for ChartText component
+ * Uses fixed Tailwind styling for consistency across charts
+ */
+var chartTextTheme = {
+    baseStyle: "transition-all duration-200 text-xs  text-[var(--color-text-secondary)]/80 fill-[var(--color-text-secondary)]/80 font-medium select-none",
+};
+
+export { chartTextTheme };

package/dist/components/charts/shared/ChartTooltip/ChartTooltip.js

@@ -0,0 +1,71 @@
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
+import React__default, { useState, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { AnimatePresence, motion } from 'motion/react';
+import { cn } from '../../../../utils/cn.js';
+import { chartTooltipTheme } from './ChartTooltip.theme.js';
+
+// Helper function to check if content is MultiSeriesData
+var isMultiSeriesData = function (content) {
+    return content && typeof content === 'object' && 'category' in content && 'series' in content;
+};
+// Component to render multi-series tooltip content
+var MultiSeriesContent = function (_a) {
+    var data = _a.data, theme = _a.theme, containerClassName = _a.containerClassName, categoryClassName = _a.categoryClassName, seriesContainerClassName = _a.seriesContainerClassName, seriesRowClassName = _a.seriesRowClassName, dotClassName = _a.dotClassName, labelClassName = _a.labelClassName, valueClassName = _a.valueClassName;
+    return (React__default.createElement("div", { className: cn(theme.multiSeriesContainerStyle, containerClassName) },
+        React__default.createElement("div", { className: cn(theme.categoryStyle, categoryClassName) }, data.category),
+        React__default.createElement("div", { className: cn(theme.seriesContainerStyle, seriesContainerClassName) },
+            data.series.map(function (item, index) { return (React__default.createElement("div", { key: index, className: cn(theme.seriesRowStyle, seriesRowClassName) },
+                React__default.createElement("div", { className: "flex items-center gap-1.5" },
+                    item.color && (React__default.createElement("div", { className: cn(theme.dotStyle, dotClassName), style: { backgroundColor: item.color } })),
+                    React__default.createElement("span", { className: cn(theme.labelStyle, labelClassName) }, item.label || item.key)),
+                React__default.createElement("span", { className: cn(theme.valueStyle, valueClassName) }, item.value))); }),
+            data.total !== undefined && (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement("div", { className: "my-1 border-t border-[var(--color-border)]" }),
+                React__default.createElement("div", { className: cn(theme.seriesRowStyle, seriesRowClassName) },
+                    React__default.createElement("div", { className: "flex items-center gap-1.5" },
+                        React__default.createElement("span", { className: cn(theme.labelStyle, labelClassName, "font-medium") }, "Total")),
+                    React__default.createElement("span", { className: cn(theme.valueStyle, valueClassName) }, data.total)))))));
+};
+function ChartTooltip(_a) {
+    var content = _a.content, className = _a.className, _b = _a.active, active = _b === void 0 ? false : _b, _c = _a.position, position = _c === void 0 ? { x: 0, y: 0 } : _c, children = _a.children; _a.chartType; var containerClassName = _a.containerClassName, categoryClassName = _a.categoryClassName, seriesContainerClassName = _a.seriesContainerClassName, seriesRowClassName = _a.seriesRowClassName, dotClassName = _a.dotClassName, labelClassName = _a.labelClassName, valueClassName = _a.valueClassName, tooltipRef = _a.tooltipRef, themeOverrides = _a.theme; _a.cursor; _a.wrapperStyle; _a.labelStyle; _a.contentStyle; _a.itemStyle; _a.payload; _a.label; _a.onAnimationStart; _a.onAnimationEnd; _a.onDragStart; _a.onDragEnd; _a.onDrag; var props = __rest(_a, ["content", "className", "active", "position", "children", "chartType", "containerClassName", "categoryClassName", "seriesContainerClassName", "seriesRowClassName", "dotClassName", "labelClassName", "valueClassName", "tooltipRef", "theme", "cursor", "wrapperStyle", "labelStyle", "contentStyle", "itemStyle", "payload", "label", "onAnimationStart", "onAnimationEnd", "onDragStart", "onDragEnd", "onDrag"]);
+    var theme = __assign(__assign({}, chartTooltipTheme), (themeOverrides || {}));
+    var _d = useState(false), mounted = _d[0], setMounted = _d[1];
+    useEffect(function () {
+        setMounted(true);
+    }, []);
+    var tooltipContent = (React__default.createElement(AnimatePresence, { mode: "wait" }, active && content && (React__default.createElement(motion.div, __assign({ ref: tooltipRef, initial: {
+            opacity: 0,
+            scale: 0.95,
+        }, animate: {
+            opacity: 1,
+            scale: 1,
+            transition: {
+                type: "spring",
+                stiffness: 400,
+                damping: 30,
+                opacity: { duration: 0.15 },
+                scale: { duration: 0.15 }
+            },
+        }, exit: {
+            opacity: 0,
+            scale: 0.95,
+            transition: {
+                type: "spring",
+                stiffness: 300,
+                damping: 25,
+                duration: 0.15,
+            },
+        }, className: cn(theme.baseStyle, className), style: {
+            left: position.x + 16,
+            top: position.y + 16,
+        } }, props),
+        React__default.createElement("div", { className: cn(theme.contentStyle, isMultiSeriesData(content) ? theme.multiSeriesContainerStyle : "text-center") }, isMultiSeriesData(content) ? (React__default.createElement(MultiSeriesContent, { data: content, theme: theme, containerClassName: containerClassName, categoryClassName: categoryClassName, seriesContainerClassName: seriesContainerClassName, seriesRowClassName: seriesRowClassName, dotClassName: dotClassName, labelClassName: labelClassName, valueClassName: valueClassName })) : (content))))));
+    return (React__default.createElement(React__default.Fragment, null,
+        children,
+        mounted && typeof document !== 'undefined'
+            ? createPortal(tooltipContent, document.body)
+            : null));
+}
+
+export { ChartTooltip };

package/dist/components/charts/shared/ChartTooltip/ChartTooltip.theme.js

@@ -0,0 +1,18 @@
+/**
+ * ChartTooltip Theme Configuration
+ *
+ * Follows the established theming pattern with CSS variables
+ */
+var chartTooltipTheme = {
+    baseStyle: "fixed z-50 text-[var(--color-text-primary)] rounded-xl px-3 py-2 shadow-lg pointer-events-none glass-effect",
+    contentStyle: "whitespace-nowrap text-sm",
+    multiSeriesContainerStyle: "text-left",
+    categoryStyle: "text-xs font-semibold mb-1 text-[var(--color-text-primary)]",
+    seriesContainerStyle: "space-y-0.5",
+    seriesRowStyle: "flex items-center justify-between gap-3",
+    dotStyle: "size-2 rounded-md ",
+    labelStyle: "text-xs opacity-90 text-[var(--color-text-secondary)]",
+    valueStyle: "text-xs font-semibold text-[var(--color-text-primary)]",
+};
+
+export { chartTooltipTheme };

package/dist/components/charts/shared/LineRenderer/LineRenderer.js

@@ -0,0 +1,314 @@
+import React__default, { useCallback, useMemo } from 'react';
+import { cn } from '../../../../utils/cn.js';
+import { ChartMarker } from '../ChartMarker/ChartMarker.js';
+import { ChartCrosshair } from '../ChartCrosshair/ChartCrosshair.js';
+
+/**
+ * Get series color class
+ */
+var getSeriesColorClass = function (index) {
+    var colors = [
+        "stroke-[var(--color-primary)]",
+        "stroke-[var(--color-warning)]",
+        "stroke-[var(--color-success)]",
+        "stroke-[var(--color-danger)]",
+    ];
+    return colors[index % colors.length];
+};
+/**
+ * Get color value for SVG elements and tooltips
+ */
+var getSeriesFillColor = function (index) {
+    var colorVars = [
+        "var(--color-primary)",
+        "var(--color-warning)",
+        "var(--color-success)",
+        "var(--color-danger)",
+    ];
+    return colorVars[index % colorVars.length];
+};
+/**
+ * Monotone cubic interpolation (based on D3's curveMonotoneX)
+ */
+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];
+        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;
+};
+/**
+ * Generate linear 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;
+};
+/**
+ * Generate curve path
+ */
+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":
+            return generateLinearPath(points);
+        default:
+            return generateLinearPath(points);
+    }
+};
+/**
+ * LineRenderer Component
+ *
+ * Pure line rendering component that can be used standalone or within ChartContainer.
+ * Handles line paths, data points, and crosshair rendering.
+ */
+var LineRenderer = function (_a) {
+    var data = _a.data, config = _a.config, scales = _a.scales, dimensions = _a.dimensions, margin = _a.margin, _b = _a.strokeWidth, strokeWidth = _b === void 0 ? 2 : _b, _c = _a.curved, curved = _c === void 0 ? true : _c, _d = _a.curveType, curveType = _d === void 0 ? "monotone" : _d, _e = _a.showDots, showDots = _e === void 0 ? true : _e, _f = _a.radius, radius = _f === void 0 ? 4 : _f, externalHoveredPoint = _a.hoveredPoint, onHoverPoint = _a.onHoverPoint, onMouseEnter = _a.onMouseEnter, onMouseMove = _a.onMouseMove, onMouseLeave = _a.onMouseLeave, _g = _a.focusedElementIndex, focusedElementIndex = _g === void 0 ? -1 : _g, _h = _a.isKeyboardMode, isKeyboardMode = _h === void 0 ? false : _h, className = _a.className;
+    // Get all data keys from config
+    var dataKeys = Object.keys(config || {});
+    // Calculate inner dimensions
+    var innerWidth = Math.max(0, dimensions.width - margin.left - margin.right);
+    var innerHeight = Math.max(0, dimensions.height - margin.top - margin.bottom);
+    // Get min/max from scales
+    var _j = scales.y, minValue = _j.min, maxValue = _j.max;
+    // Calculate point position
+    var getPointPosition = useCallback(function (dataIndex, value) {
+        var categoryX = scales.x.pointPosition(dataIndex);
+        var categoryWidth = scales.x.categoryWidth || 0;
+        var x = margin.left + categoryX + categoryWidth / 2;
+        var y = margin.top +
+            innerHeight -
+            ((value - minValue) / (maxValue - minValue)) * innerHeight;
+        return { x: x, y: y };
+    }, [scales.x, margin.left, margin.top, innerHeight, minValue, maxValue]);
+    // Generate SVG path for line with null value handling
+    var generatePath = useCallback(function (key) {
+        var segments = [];
+        var currentSegment = [];
+        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.length > 0) {
+                    segments.push(currentSegment);
+                    currentSegment = [];
+                }
+            }
+            else {
+                var value = typeof rawValue === "number" ? rawValue : 0;
+                var _a = getPointPosition(index, value), x = _a.x, y = _a.y;
+                currentSegment.push({ x: x, y: y });
+            }
+        });
+        // Add the last segment if it has points
+        if (currentSegment.length > 0) {
+            segments.push(currentSegment);
+        }
+        // Generate path for each segment
+        return segments
+            .map(function (segment) {
+            return generateCurvePath(segment, curved ? curveType : "linear");
+        })
+            .join(" ");
+    }, [data, getPointPosition, curved, curveType]);
+    // Render lines
+    var lines = useMemo(function () {
+        return dataKeys.map(function (key, keyIndex) {
+            var _a;
+            var targetPath = generatePath(key);
+            var customColor = (_a = config === null || config === void 0 ? void 0 : config[key]) === null || _a === void 0 ? void 0 : _a.color;
+            var fallbackClass = getSeriesColorClass(keyIndex);
+            var appliedColorClass = customColor ? undefined : fallbackClass;
+            return (React__default.createElement("g", { key: key },
+                React__default.createElement("path", { d: targetPath, fill: "none", strokeWidth: strokeWidth, strokeLinecap: "round", className: cn("transition-all duration-200", appliedColorClass), stroke: customColor, filter: "url(#line-shadow)" }),
+                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 _a = getPointPosition(dataIndex, value), x = _a.x, y = _a.y;
+                        (externalHoveredPoint === null || externalHoveredPoint === void 0 ? void 0 : externalHoveredPoint.index) === dataIndex &&
+                            externalHoveredPoint.key === key;
+                        var isFocused = isKeyboardMode && focusedElementIndex === dataIndex;
+                        return (React__default.createElement("g", { key: "".concat(key, "-").concat(dataIndex) },
+                            React__default.createElement(ChartMarker, { cx: x, cy: y, radius: isFocused ? radius + 2 : radius, colorClass: cn(appliedColorClass, isFocused &&
+                                    "stroke-[var(--color-primary-600)] stroke-2"), strokeColor: customColor })));
+                    })));
+        });
+    }, [
+        dataKeys,
+        generatePath,
+        strokeWidth,
+        showDots,
+        data,
+        getPointPosition,
+        externalHoveredPoint,
+        focusedElementIndex,
+        isKeyboardMode,
+        radius,
+        config,
+    ]);
+    // Hover-only markers (when showDots is false)
+    var hoverMarkers = useMemo(function () {
+        if (showDots || !externalHoveredPoint)
+            return null;
+        return (React__default.createElement("g", { className: "chart-hover-markers" }, dataKeys.map(function (key, keyIndex) {
+            var _a;
+            var item = data[externalHoveredPoint.index];
+            var rawValue = item[key];
+            var isNull = rawValue === null || rawValue === undefined;
+            var value = isNull
+                ? 0
+                : typeof rawValue === "number"
+                    ? rawValue
+                    : 0;
+            if (isNull)
+                return null;
+            var _b = getPointPosition(externalHoveredPoint.index, value), x = _b.x, y = _b.y;
+            var customColor = (_a = config === null || config === void 0 ? void 0 : config[key]) === null || _a === void 0 ? void 0 : _a.color;
+            var colorClass = customColor ? undefined : getSeriesColorClass(keyIndex);
+            return (React__default.createElement(ChartMarker, { key: "hover-".concat(key, "-").concat(externalHoveredPoint.index), cx: x, cy: y, radius: radius, colorClass: colorClass, strokeColor: customColor }));
+        })));
+    }, [
+        showDots,
+        externalHoveredPoint,
+        dataKeys,
+        data,
+        getPointPosition,
+        radius,
+        config,
+    ]);
+    // Invisible hover areas for multi-series tooltips
+    var hoverAreas = useMemo(function () {
+        return data.map(function (item, dataIndex) {
+            var categoryX = scales.x.pointPosition(dataIndex);
+            var categoryWidth = scales.x.categoryWidth || 0;
+            var pointX = margin.left + categoryX + categoryWidth / 2;
+            // Create hover area around each point
+            var hoverWidth = categoryWidth;
+            var hoverX = margin.left + categoryX;
+            return (React__default.createElement("rect", { key: "hover-".concat(dataIndex), x: hoverX, y: margin.top, width: hoverWidth, height: innerHeight, fill: "transparent", className: "cursor-pointer", onMouseEnter: function (e) {
+                    if (onHoverPoint) {
+                        onHoverPoint({ index: dataIndex, key: dataKeys[0] });
+                    }
+                    if (onMouseEnter) {
+                        // 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,
+                        };
+                        onMouseEnter(e, content, svgCoordinates);
+                    }
+                }, onMouseMove: function (e) {
+                    if (onMouseMove &&
+                        (externalHoveredPoint === null || externalHoveredPoint === void 0 ? void 0 : externalHoveredPoint.index) === dataIndex) {
+                        var svgCoordinates = {
+                            x: pointX,
+                            y: margin.top + innerHeight / 2,
+                            dimensions: dimensions,
+                        };
+                        onMouseMove(e, svgCoordinates);
+                    }
+                }, onMouseLeave: function () {
+                    if (onMouseLeave) {
+                        onMouseLeave();
+                    }
+                } }));
+        });
+    }, [
+        data,
+        scales.x,
+        margin,
+        innerHeight,
+        dataKeys,
+        config,
+        dimensions,
+        externalHoveredPoint,
+        onHoverPoint,
+        onMouseEnter,
+        onMouseMove,
+        onMouseLeave,
+    ]);
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("defs", null,
+            React__default.createElement("filter", { id: "line-shadow", x: "-20%", y: "-20%", width: "140%", height: "140%" },
+                React__default.createElement("feDropShadow", { dx: "8", dy: "8", stdDeviation: "8", floodOpacity: "0.15", floodColor: "#000000" })),
+            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(ChartCrosshair, { show: externalHoveredPoint !== null, x: externalHoveredPoint
+                ? margin.left + scales.x.pointPosition(externalHoveredPoint.index) + (scales.x.categoryWidth || 0) / 2
+                : 0, y: externalHoveredPoint && dataKeys.length === 1
+                ? (function () {
+                    var item = data[externalHoveredPoint.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("g", { className: cn("chart-lines", className) }, lines),
+        hoverMarkers,
+        React__default.createElement("g", { className: "chart-hover-areas" }, hoverAreas)));
+};
+
+export { LineRenderer };