@flikk/ui 1.0.0-beta.1

package/dist/components/charts/shared/ChartLegend/ChartLegendContent.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ChartLegendContentProps } from './ChartLegend.types';
+/**
+ * Basic ChartLegendContent component - minimal implementation
+ * TODO: Enhance with full legend content functionality when needed
+ */
+export declare const ChartLegendContent: React.FC<ChartLegendContentProps>;

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

@@ -0,0 +1,18 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+/**
+ * Basic ChartLegendContent component - minimal implementation
+ * TODO: Enhance with full legend content functionality when needed
+ */
+const ChartLegendContent = ({ payload = [], nameKey = 'name', className, ...props }) => {
+    if (!payload || payload.length === 0) {
+        return null;
+    }
+    return (jsx("div", { className: `flex flex-wrap gap-4 ${className || ''}`, ...props, children: payload.map((entry, index) => {
+            const name = entry[nameKey] || entry.dataKey || `Series ${index + 1}`;
+            const color = entry.color || '#8884d8';
+            return (jsxs("div", { className: "flex items-center gap-2", children: [jsx("div", { className: "w-3 h-3 rounded", style: { backgroundColor: color } }), jsx("span", { className: "text-sm text-gray-600", children: name })] }, index));
+        }) }));
+};
+
+export { ChartLegendContent };

package/dist/components/charts/shared/ChartLegend/index.d.ts

@@ -0,0 +1,3 @@
+export { ChartLegend } from './ChartLegend';
+export { ChartLegendContent } from './ChartLegendContent';
+export type { ChartLegendProps, ChartLegendContentProps } from './ChartLegend.types';

package/dist/components/charts/shared/ChartMarker/ChartMarker.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { ChartMarkerProps } from "./ChartMarker.types";
+/**
+ * ChartMarker component for rendering circular data point markers in charts
+ * Supports hover scaling with React state for reliable SVG interactions
+ */
+export declare const ChartMarker: React.FC<ChartMarkerProps>;

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

@@ -0,0 +1,22 @@
+import { jsx } from 'react/jsx-runtime';
+import { 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
+ */
+const ChartMarker = ({ cx, cy, radius, colorClass, className, strokeWidth = 2, fillColor, strokeColor, }) => {
+    const theme = chartMarkerTheme;
+    const [isHovered, setIsHovered] = useState(false);
+    const baseClasses = cn(theme.baseStyle, colorClass, className);
+    // Calculate hover radius
+    const currentRadius = isHovered ? radius * 1.1 : radius;
+    return (jsx("g", { className: "chart-marker", children: jsx("circle", { cx: cx, cy: cy, r: currentRadius, className: baseClasses, fill: fillColor || "white", stroke: strokeColor, strokeWidth: strokeWidth, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), style: {
+                transition: 'linear 0.2s ease-out',
+                cursor: 'pointer'
+            } }) }));
+};
+
+export { ChartMarker };

package/dist/components/charts/shared/ChartMarker/ChartMarker.theme.d.ts

@@ -0,0 +1,6 @@
+import type { ChartMarkerTheme } from './ChartMarker.types';
+/**
+ * Default theme for ChartMarker component
+ * Provides consistent styling for chart data point markers
+ */
+export declare const chartMarkerTheme: ChartMarkerTheme;

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
+ */
+const chartMarkerTheme = {
+    baseStyle: "fill-white stroke-2",
+};
+
+export { chartMarkerTheme };

package/dist/components/charts/shared/ChartMarker/ChartMarker.types.d.ts

@@ -0,0 +1,21 @@
+export interface ChartMarkerProps {
+    /** X coordinate of the marker center */
+    cx: number;
+    /** Y coordinate of the marker center */
+    cy: number;
+    /** Radius of the marker */
+    radius: number;
+    /** Color class for the marker stroke */
+    colorClass?: string;
+    /** Additional CSS classes */
+    className?: string;
+    /** Custom stroke width */
+    strokeWidth?: number;
+    /** Fill color override */
+    fillColor?: string;
+    /** Stroke color override */
+    strokeColor?: string;
+}
+export interface ChartMarkerTheme {
+    baseStyle?: string;
+}

package/dist/components/charts/shared/ChartMarker/index.d.ts

@@ -0,0 +1,3 @@
+export { ChartMarker } from './ChartMarker';
+export type { ChartMarkerProps, ChartMarkerTheme } from './ChartMarker.types';
+export { chartMarkerTheme } from './ChartMarker.theme';

package/dist/components/charts/shared/ChartText/ChartText.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { ChartTextProps } from "./ChartText.types";
+/**
+ * ChartText component for consistent typography in charts
+ * Uses fixed Tailwind styling for consistency
+ */
+export declare const ChartText: React.FC<ChartTextProps>;

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

@@ -0,0 +1,32 @@
+import { jsx } from 'react/jsx-runtime';
+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
+ */
+const ChartText = ({ children, textAnchor = "start", dominantBaseline = "auto", maxWidth, truncate = false, rotation = 0, className, ...props }) => {
+    const theme = chartTextTheme;
+    // Truncate text if needed
+    const truncateText = (text, maxWidth) => {
+        // Rough estimate: 6px per character for text-sm
+        if (!maxWidth || text.length <= maxWidth / 6) {
+            return text;
+        }
+        const maxChars = Math.floor(maxWidth / 6) - 3;
+        return text.substring(0, maxChars) + "...";
+    };
+    // Process children to handle truncation
+    const processedChildren = React__default.useMemo(() => {
+        if (!truncate || !maxWidth || typeof children !== "string") {
+            return children;
+        }
+        return truncateText(children, maxWidth);
+    }, [children, truncate, maxWidth]);
+    const { x, y } = props;
+    return (jsx("text", { textAnchor: textAnchor, dominantBaseline: dominantBaseline, className: cn(theme.baseStyle, className), transform: rotation !== 0 && x !== undefined && y !== undefined ? `rotate(${rotation}, ${x}, ${y})` : undefined, ...props, children: processedChildren }));
+};
+
+export { ChartText };

package/dist/components/charts/shared/ChartText/ChartText.theme.d.ts

@@ -0,0 +1,6 @@
+import type { ChartTextTheme } from './ChartText.types';
+/**
+ * Default theme for ChartText component
+ * Uses fixed Tailwind styling for consistency across charts
+ */
+export declare const chartTextTheme: ChartTextTheme;

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
+ */
+const 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/ChartText/ChartText.types.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+export interface ChartTextProps extends React.SVGProps<SVGTextElement> {
+    /** Text content to display */
+    children: React.ReactNode;
+    /** Text anchor alignment */
+    textAnchor?: 'start' | 'middle' | 'end';
+    /** Dominant baseline alignment */
+    dominantBaseline?: 'auto' | 'middle' | 'hanging' | 'central' | 'text-before-edge' | 'text-after-edge';
+    /** Maximum width before truncation */
+    maxWidth?: number;
+    /** Whether to truncate text with ellipsis */
+    truncate?: boolean;
+    /** Rotation angle in degrees */
+    rotation?: number;
+    /** Additional CSS classes */
+    className?: string;
+}
+export interface ChartTextTheme {
+    /** Base styles for chart text (includes default size, weight, color) */
+    baseStyle: string;
+}

package/dist/components/charts/shared/ChartText/index.d.ts

@@ -0,0 +1,2 @@
+export { ChartText } from './ChartText';
+export type { ChartTextProps, ChartTextTheme } from './ChartText.types';

package/dist/components/charts/shared/ChartTooltip/ChartTooltip.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import { ChartTooltipProps, MultiSeriesChartTooltipProps } from "./ChartTooltip.types";
+export declare function ChartTooltip({ content, className, active, position, children, chartType, containerClassName, categoryClassName, seriesContainerClassName, seriesRowClassName, dotClassName, labelClassName, valueClassName, tooltipRef, theme: themeOverrides, cursor, wrapperStyle, labelStyle, contentStyle, itemStyle, payload, label, onAnimationStart, onAnimationEnd, onDragStart, onDragEnd, onDrag, ...props }: (ChartTooltipProps | MultiSeriesChartTooltipProps) & {
+    active?: boolean;
+    position?: {
+        x: number;
+        y: number;
+    };
+    children?: React.ReactNode;
+    chartType?: 'line' | 'bar' | 'area' | 'scatter';
+    containerClassName?: string;
+    categoryClassName?: string;
+    seriesContainerClassName?: string;
+    seriesRowClassName?: string;
+    dotClassName?: string;
+    labelClassName?: string;
+    valueClassName?: string;
+    tooltipRef?: React.RefObject<HTMLDivElement | null>;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,50 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { createPortal } from 'react-dom';
+import { AnimatePresence, motion } from 'motion/react';
+import { cn } from '../../../../utils/cn.js';
+import { chartTooltipTheme } from './ChartTooltip.theme.js';
+import { useIsClient } from '../../../../hooks/useIsClient.js';
+
+// Helper function to check if content is MultiSeriesData
+const isMultiSeriesData = (content) => {
+    return typeof content === 'object' && content !== null && 'category' in content && 'series' in content;
+};
+// Component to render multi-series tooltip content
+const MultiSeriesContent = ({ data, theme, containerClassName, categoryClassName, seriesContainerClassName, seriesRowClassName, dotClassName, labelClassName, valueClassName }) => {
+    return (jsxs("div", { className: cn(theme.multiSeriesContainerStyle, containerClassName), children: [jsx("div", { className: cn(theme.categoryStyle, categoryClassName), children: data.category }), jsxs("div", { className: cn(theme.seriesContainerStyle, seriesContainerClassName), children: [data.series.map((item, index) => (jsxs("div", { className: cn(theme.seriesRowStyle, seriesRowClassName), children: [jsxs("div", { className: "flex items-center gap-1.5", children: [item.color && (jsx("div", { className: cn(theme.dotStyle, dotClassName), style: { backgroundColor: item.color } })), jsx("span", { className: cn(theme.labelStyle, labelClassName), children: item.label || item.key })] }), jsx("span", { className: cn(theme.valueStyle, valueClassName), children: item.value })] }, index))), data.total !== undefined && (jsxs(Fragment, { children: [jsx("div", { className: "my-1 border-t border-[var(--color-border)]" }), jsxs("div", { className: cn(theme.seriesRowStyle, seriesRowClassName), children: [jsx("div", { className: "flex items-center gap-1.5", children: jsx("span", { className: cn(theme.labelStyle, labelClassName, "font-medium"), children: "Total" }) }), jsx("span", { className: cn(theme.valueStyle, valueClassName), children: data.total })] })] }))] })] }));
+};
+function ChartTooltip({ content, className, active = false, position = { x: 0, y: 0 }, children, chartType, containerClassName, categoryClassName, seriesContainerClassName, seriesRowClassName, dotClassName, labelClassName, valueClassName, tooltipRef, theme: themeOverrides, cursor, wrapperStyle, labelStyle, contentStyle, itemStyle, payload, label, onAnimationStart, onAnimationEnd, onDragStart, onDragEnd, onDrag, ...props }) {
+    const theme = { ...chartTooltipTheme, ...(themeOverrides || {}) };
+    const isClient = useIsClient();
+    const tooltipContent = (jsx(AnimatePresence, { mode: "wait", children: active && content && (jsx(motion.div, { 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, children: jsx("div", { className: cn(theme.contentStyle, isMultiSeriesData(content) ? theme.multiSeriesContainerStyle : "text-center"), children: isMultiSeriesData(content) ? (jsx(MultiSeriesContent, { data: content, theme: theme, containerClassName: containerClassName, categoryClassName: categoryClassName, seriesContainerClassName: seriesContainerClassName, seriesRowClassName: seriesRowClassName, dotClassName: dotClassName, labelClassName: labelClassName, valueClassName: valueClassName })) : (content) }) })) }));
+    return (jsxs(Fragment, { children: [children, isClient
+                ? createPortal(tooltipContent, document.body)
+                : null] }));
+}
+
+export { ChartTooltip };

package/dist/components/charts/shared/ChartTooltip/ChartTooltip.theme.d.ts

@@ -0,0 +1,7 @@
+import { ChartTooltipTheme } from "./ChartTooltip.types";
+/**
+ * ChartTooltip Theme Configuration
+ *
+ * Follows the established theming pattern with CSS variables
+ */
+export declare const chartTooltipTheme: ChartTooltipTheme;

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

@@ -0,0 +1,18 @@
+/**
+ * ChartTooltip Theme Configuration
+ *
+ * Follows the established theming pattern with CSS variables
+ */
+const chartTooltipTheme = {
+    baseStyle: "fixed z-50 text-[var(--color-text-primary)] rounded-[var(--tooltip-radius)] 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-[calc(var(--radius-base)*0.75)]",
+    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/ChartTooltip/ChartTooltip.types.d.ts

@@ -0,0 +1,74 @@
+import { ReactNode } from 'react';
+/**
+ * ChartTooltip theme configuration
+ */
+export interface ChartTooltipTheme {
+    /** Base tooltip container styles */
+    baseStyle?: string;
+    /** Content wrapper styles */
+    contentStyle?: string;
+    /** Multi-series container styles */
+    multiSeriesContainerStyle?: string;
+    /** Category label styles */
+    categoryStyle?: string;
+    /** Series items container styles */
+    seriesContainerStyle?: string;
+    /** Individual series row styles */
+    seriesRowStyle?: string;
+    /** Color indicator dot styles */
+    dotStyle?: string;
+    /** Series label text styles */
+    labelStyle?: string;
+    /** Series value text styles */
+    valueStyle?: string;
+}
+export interface ChartTooltipProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'content'> {
+    content?: ReactNode;
+    cursor?: boolean | object;
+    wrapperStyle?: React.CSSProperties;
+    labelStyle?: React.CSSProperties;
+    contentStyle?: React.CSSProperties;
+    itemStyle?: React.CSSProperties;
+    active?: boolean;
+    payload?: any[];
+    label?: string | number;
+    className?: string;
+    position?: {
+        x: number;
+        y: number;
+    };
+    /** Theme overrides */
+    theme?: ChartTooltipTheme;
+}
+export interface ChartTooltipContentProps {
+    active?: boolean;
+    payload?: any[];
+    label?: string | number;
+    labelKey?: string;
+    nameKey?: string;
+    indicator?: 'dot' | 'line' | 'dashed';
+    hideLabel?: boolean;
+    hideIndicator?: boolean;
+    className?: string;
+}
+export interface MultiSeriesData {
+    category: string | number;
+    series: Array<{
+        key: string;
+        label?: string;
+        value: number | string;
+        color?: string;
+    }>;
+    total?: number | string;
+}
+export interface MultiSeriesChartTooltipProps extends Omit<ChartTooltipProps, 'content'> {
+    content?: ReactNode | MultiSeriesData;
+    chartType?: 'line' | 'bar' | 'area' | 'scatter';
+    containerClassName?: string;
+    categoryClassName?: string;
+    seriesContainerClassName?: string;
+    seriesRowClassName?: string;
+    dotClassName?: string;
+    labelClassName?: string;
+    valueClassName?: string;
+}

package/dist/components/charts/shared/ChartTooltip/ChartTooltipContent.d.ts

@@ -0,0 +1,2 @@
+import { ChartTooltipContentProps } from './ChartTooltip.types';
+export declare function ChartTooltipContent({ active, payload, label, labelKey, nameKey, indicator, hideLabel, hideIndicator, className, }: ChartTooltipContentProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/charts/shared/ChartTooltip/index.d.ts

@@ -0,0 +1,4 @@
+export { ChartTooltip } from './ChartTooltip';
+export { ChartTooltipContent } from './ChartTooltipContent';
+export { chartTooltipTheme } from './ChartTooltip.theme';
+export type { ChartTooltipProps, ChartTooltipContentProps, ChartTooltipTheme, MultiSeriesData } from './ChartTooltip.types';

package/dist/components/charts/shared/LineRenderer/LineRenderer.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import type { LineRendererProps } from "./LineRenderer.types";
+/**
+ * LineRenderer Component
+ *
+ * Pure line rendering component that can be used standalone or within ChartContainer.
+ * Handles line paths, data points, and crosshair rendering.
+ */
+export declare const LineRenderer: React.FC<LineRendererProps>;

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

@@ -0,0 +1,239 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useCallback, useMemo } from 'react';
+import { cn } from '../../../../utils/cn.js';
+import { ChartMarker } from '../ChartMarker/ChartMarker.js';
+import { ChartCrosshair } from '../ChartCrosshair/ChartCrosshair.js';
+import { generateCurvePath } from '../../utils/path-utils.js';
+
+/**
+ * Get series color class
+ */
+const getSeriesColorClass = (index) => {
+    const 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
+ */
+const getSeriesFillColor = (index) => {
+    const colorVars = [
+        "var(--color-primary)",
+        "var(--color-warning)",
+        "var(--color-success)",
+        "var(--color-danger)",
+    ];
+    return colorVars[index % colorVars.length];
+};
+/**
+ * LineRenderer Component
+ *
+ * Pure line rendering component that can be used standalone or within ChartContainer.
+ * Handles line paths, data points, and crosshair rendering.
+ */
+const LineRenderer = ({ data, config, scales, dimensions, margin, strokeWidth = 2, curved = true, curveType = "monotone", showDots = true, radius = 4, hoveredPoint: externalHoveredPoint, onHoverPoint, onMouseEnter, onMouseMove, onMouseLeave, focusedElementIndex = -1, isKeyboardMode = false, className, }) => {
+    // Get all data keys from config
+    const dataKeys = Object.keys(config || {});
+    // Calculate inner dimensions
+    const innerWidth = Math.max(0, dimensions.width - margin.left - margin.right);
+    const innerHeight = Math.max(0, dimensions.height - margin.top - margin.bottom);
+    // Get min/max from scales
+    const { min: minValue, max: maxValue } = scales.y;
+    // Calculate point position
+    const getPointPosition = useCallback((dataIndex, value) => {
+        const categoryX = scales.x.pointPosition(dataIndex);
+        const categoryWidth = scales.x.categoryWidth || 0;
+        const x = margin.left + categoryX + categoryWidth / 2;
+        const y = margin.top +
+            innerHeight -
+            ((value - minValue) / (maxValue - minValue)) * innerHeight;
+        return { x, y };
+    }, [scales.x, margin.left, margin.top, innerHeight, minValue, maxValue]);
+    // Generate SVG path for line with null value handling
+    const generatePath = useCallback((key) => {
+        const segments = [];
+        let currentSegment = [];
+        data.forEach((item, index) => {
+            const rawValue = item[key];
+            const isNull = rawValue === null || rawValue === undefined;
+            if (isNull) {
+                // End current segment and start a new one (creates gap)
+                if (currentSegment.length > 0) {
+                    segments.push(currentSegment);
+                    currentSegment = [];
+                }
+            }
+            else {
+                const value = typeof rawValue === "number" ? rawValue : 0;
+                const { x, y } = getPointPosition(index, value);
+                currentSegment.push({ x, y });
+            }
+        });
+        // Add the last segment if it has points
+        if (currentSegment.length > 0) {
+            segments.push(currentSegment);
+        }
+        // Generate path for each segment
+        return segments
+            .map((segment) => generateCurvePath(segment, curved ? curveType : "linear"))
+            .join(" ");
+    }, [data, getPointPosition, curved, curveType]);
+    // Render lines
+    const lines = useMemo(() => {
+        return dataKeys.map((key, keyIndex) => {
+            var _a;
+            const targetPath = generatePath(key);
+            const customColor = (_a = config === null || config === void 0 ? void 0 : config[key]) === null || _a === void 0 ? void 0 : _a.color;
+            const fallbackClass = getSeriesColorClass(keyIndex);
+            const appliedColorClass = customColor ? undefined : fallbackClass;
+            return (jsxs("g", { children: [jsx("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((item, dataIndex) => {
+                            const rawValue = item[key];
+                            const isNull = rawValue === null || rawValue === undefined;
+                            const value = isNull
+                                ? 0
+                                : typeof rawValue === "number"
+                                    ? rawValue
+                                    : 0;
+                            // Don't render dots for null values
+                            if (isNull)
+                                return null;
+                            const { x, y } = getPointPosition(dataIndex, value);
+                            (externalHoveredPoint === null || externalHoveredPoint === void 0 ? void 0 : externalHoveredPoint.index) === dataIndex &&
+                                externalHoveredPoint.key === key;
+                            const isFocused = isKeyboardMode && focusedElementIndex === dataIndex;
+                            return (jsx("g", { children: jsx(ChartMarker, { cx: x, cy: y, radius: isFocused ? radius + 2 : radius, colorClass: cn(appliedColorClass, isFocused &&
+                                        "stroke-[var(--color-primary-600)] stroke-2"), strokeColor: customColor }) }, `${key}-${dataIndex}`));
+                        })] }, key));
+        });
+    }, [
+        dataKeys,
+        generatePath,
+        strokeWidth,
+        showDots,
+        data,
+        getPointPosition,
+        externalHoveredPoint,
+        focusedElementIndex,
+        isKeyboardMode,
+        radius,
+        config,
+    ]);
+    // Hover-only markers (when showDots is false)
+    const hoverMarkers = useMemo(() => {
+        if (showDots || !externalHoveredPoint)
+            return null;
+        return (jsx("g", { className: "chart-hover-markers", children: dataKeys.map((key, keyIndex) => {
+                var _a;
+                const item = data[externalHoveredPoint.index];
+                const rawValue = item[key];
+                const isNull = rawValue === null || rawValue === undefined;
+                const value = isNull
+                    ? 0
+                    : typeof rawValue === "number"
+                        ? rawValue
+                        : 0;
+                if (isNull)
+                    return null;
+                const { x, y } = getPointPosition(externalHoveredPoint.index, value);
+                const customColor = (_a = config === null || config === void 0 ? void 0 : config[key]) === null || _a === void 0 ? void 0 : _a.color;
+                const colorClass = customColor ? undefined : getSeriesColorClass(keyIndex);
+                return (jsx(ChartMarker, { cx: x, cy: y, radius: radius, colorClass: colorClass, strokeColor: customColor }, `hover-${key}-${externalHoveredPoint.index}`));
+            }) }));
+    }, [
+        showDots,
+        externalHoveredPoint,
+        dataKeys,
+        data,
+        getPointPosition,
+        radius,
+        config,
+    ]);
+    // Invisible hover areas for multi-series tooltips
+    const hoverAreas = useMemo(() => {
+        return data.map((item, dataIndex) => {
+            const categoryX = scales.x.pointPosition(dataIndex);
+            const categoryWidth = scales.x.categoryWidth || 0;
+            const pointX = margin.left + categoryX + categoryWidth / 2;
+            // Create hover area around each point
+            const hoverWidth = categoryWidth;
+            const hoverX = margin.left + categoryX;
+            return (jsx("rect", { x: hoverX, y: margin.top, width: hoverWidth, height: innerHeight, fill: "transparent", className: "cursor-pointer", onMouseEnter: (e) => {
+                    if (onHoverPoint) {
+                        onHoverPoint({ index: dataIndex, key: dataKeys[0] });
+                    }
+                    if (onMouseEnter) {
+                        // Create multi-series tooltip data
+                        const seriesData = dataKeys.map((seriesKey, keyIndex) => {
+                            var _a, _b;
+                            const seriesValue = item[seriesKey];
+                            const numValue = typeof seriesValue === "number" ? seriesValue : 0;
+                            return {
+                                key: seriesKey,
+                                label: ((_a = config[seriesKey]) === null || _a === void 0 ? void 0 : _a.label) || seriesKey,
+                                value: numValue,
+                                color: ((_b = config[seriesKey]) === null || _b === void 0 ? void 0 : _b.color) || getSeriesFillColor(keyIndex),
+                            };
+                        });
+                        const content = {
+                            category: item.name || `Category ${dataIndex + 1}`,
+                            series: seriesData,
+                        };
+                        const svgCoordinates = {
+                            x: pointX,
+                            y: margin.top + innerHeight / 2,
+                            dimensions,
+                        };
+                        onMouseEnter(e, content, svgCoordinates);
+                    }
+                }, onMouseMove: (e) => {
+                    if (onMouseMove &&
+                        (externalHoveredPoint === null || externalHoveredPoint === void 0 ? void 0 : externalHoveredPoint.index) === dataIndex) {
+                        const svgCoordinates = {
+                            x: pointX,
+                            y: margin.top + innerHeight / 2,
+                            dimensions,
+                        };
+                        onMouseMove(e, svgCoordinates);
+                    }
+                }, onMouseLeave: () => {
+                    if (onMouseLeave) {
+                        onMouseLeave();
+                    }
+                } }, `hover-${dataIndex}`));
+        });
+    }, [
+        data,
+        scales.x,
+        margin,
+        innerHeight,
+        dataKeys,
+        config,
+        dimensions,
+        externalHoveredPoint,
+        onHoverPoint,
+        onMouseEnter,
+        onMouseMove,
+        onMouseLeave,
+    ]);
+    return (jsxs(Fragment, { children: [jsxs("defs", { children: [jsx("filter", { id: "line-shadow", x: "-20%", y: "-20%", width: "140%", height: "140%", children: jsx("feDropShadow", { dx: "8", dy: "8", stdDeviation: "8", floodOpacity: "0.15", floodColor: "#000000" }) }), jsxs("linearGradient", { id: "vertical-fade", x1: "0%", y1: "0%", x2: "0%", y2: "100%", children: [jsx("stop", { offset: "0%", stopColor: "#6b7280", stopOpacity: "0" }), jsx("stop", { offset: "40%", stopColor: "#6b7280", stopOpacity: "0.3" }), jsx("stop", { offset: "50%", stopColor: "#6b7280", stopOpacity: "0.5" }), jsx("stop", { offset: "60%", stopColor: "#6b7280", stopOpacity: "0.3" }), jsx("stop", { offset: "100%", stopColor: "#6b7280", stopOpacity: "0" })] }), jsxs("linearGradient", { id: "horizontal-fade", x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [jsx("stop", { offset: "0%", stopColor: "#6b7280", stopOpacity: "0" }), jsx("stop", { offset: "40%", stopColor: "#6b7280", stopOpacity: "0.3" }), jsx("stop", { offset: "50%", stopColor: "#6b7280", stopOpacity: "0.5" }), jsx("stop", { offset: "60%", stopColor: "#6b7280", stopOpacity: "0.3" }), jsx("stop", { offset: "100%", stopColor: "#6b7280", stopOpacity: "0" })] })] }), jsx(ChartCrosshair, { show: externalHoveredPoint !== null, x: externalHoveredPoint
+                    ? margin.left + scales.x.pointPosition(externalHoveredPoint.index) + (scales.x.categoryWidth || 0) / 2
+                    : 0, y: externalHoveredPoint && dataKeys.length === 1
+                    ? (() => {
+                        const item = data[externalHoveredPoint.index];
+                        const singleKey = dataKeys[0];
+                        const singleValue = item[singleKey];
+                        const numValue = typeof singleValue === "number" ? singleValue : 0;
+                        return (margin.top +
+                            innerHeight -
+                            ((numValue - minValue) / (maxValue - minValue)) *
+                                innerHeight);
+                    })()
+                    : undefined, margin: margin, innerWidth: innerWidth, innerHeight: innerHeight, showHorizontal: dataKeys.length === 1 }), jsx("g", { className: cn("chart-lines", className), children: lines }), hoverMarkers, jsx("g", { className: "chart-hover-areas", children: hoverAreas })] }));
+};
+
+export { LineRenderer };