@flikk/ui 1.0.0-beta.1

package/dist/components/charts/LineChart/LineChart.js

@@ -0,0 +1,361 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useRef, useState, useId, useEffect, useMemo, useCallback } from 'react';
+import { motion } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
+import { useTooltipPosition } from '../hooks/useTooltipPosition.js';
+import { useChartAccessibility } from '../hooks/useChartAccessibility.js';
+import { XAxis } from '../shared/ChartAxis/XAxis.js';
+import { YAxis } from '../shared/ChartAxis/YAxis.js';
+import { HorizontalGrid } from '../shared/ChartGrid/HorizontalGrid.js';
+import { ChartTooltip } from '../shared/ChartTooltip/ChartTooltip.js';
+import { ChartMarker } from '../shared/ChartMarker/ChartMarker.js';
+import { ChartCrosshair } from '../shared/ChartCrosshair/ChartCrosshair.js';
+import { generateNiceTicks } from '../utils/chart-validation.js';
+import { generateCurvePath } from '../utils/path-utils.js';
+import { LINE_CHART_DEFAULTS } from './LineChart.types.js';
+
+// Production-ready color system with CORRECT CSS variable syntax
+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];
+};
+const LineChart = ({ data, config, 
+// Standardized display props with defaults
+showGrid = LINE_CHART_DEFAULTS.showGrid, showXAxis = LINE_CHART_DEFAULTS.showXAxis, showYAxis = LINE_CHART_DEFAULTS.showYAxis, minValue: propMinValue, maxValue: propMaxValue, 
+// Simple semantic color prop
+color = LINE_CHART_DEFAULTS.color, 
+// Standardized visual props with defaults (renamed from line-specific names)
+dotRadius, radius, // @deprecated Use dotRadius instead
+strokeWidth = LINE_CHART_DEFAULTS.strokeWidth, curved = LINE_CHART_DEFAULTS.curved, curveType = LINE_CHART_DEFAULTS.curveType, showDots = LINE_CHART_DEFAULTS.showDots, 
+// Base props
+className, title, description, enableKeyboardNavigation = LINE_CHART_DEFAULTS.enableKeyboardNavigation, children, ...props }) => {
+    var _a;
+    // Resolve dotRadius with backward compatibility
+    const resolvedDotRadius = (_a = dotRadius !== null && dotRadius !== void 0 ? dotRadius : radius) !== null && _a !== void 0 ? _a : LINE_CHART_DEFAULTS.dotRadius;
+    // Development warning for deprecated radius prop
+    if (process.env.NODE_ENV !== "production" && radius !== undefined) {
+        console.warn("[LineChart]: The `radius` prop is deprecated and will be removed in a future version. " +
+            "Use `dotRadius` instead.");
+    }
+    // Simplified color system - no complex theme hook needed
+    const containerRef = useRef(null);
+    const [dimensions, setDimensions] = useState({ width: 600, height: 400 });
+    const revealClipId = useId();
+    const shadowFilterId = useId();
+    const verticalFadeId = useId();
+    const horizontalFadeId = useId();
+    const ANIMATION_DURATION = 1.5;
+    const [hoveredPoint, setHoveredPoint] = useState(null);
+    // Detect if device is mobile/touch
+    const isMobile = typeof window !== "undefined" &&
+        ("ontouchstart" in window || navigator.maxTouchPoints > 0);
+    // Use the new tooltip positioning hook
+    const { tooltipData, tooltipRef, handleMouseEnter, handleMouseMove, handleMouseLeave, } = useTooltipPosition({
+        containerRef,
+        isMobile,
+    });
+    // Use accessibility hook
+    const { chartAccessibilityProps, descriptionProps, focusedElementIndex, isKeyboardMode, handleMouseInteraction, } = useChartAccessibility({
+        chartType: "line",
+        data,
+        config,
+        title,
+        description,
+        enableKeyboardNavigation,
+    });
+    // Measure container dimensions
+    useEffect(() => {
+        const updateDimensions = () => {
+            if (containerRef.current) {
+                const { width, height } = containerRef.current.getBoundingClientRect();
+                setDimensions({
+                    width: width || 600,
+                    height: height || 400,
+                });
+            }
+        };
+        updateDimensions();
+        const resizeObserver = new ResizeObserver(updateDimensions);
+        if (containerRef.current) {
+            resizeObserver.observe(containerRef.current);
+        }
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, []);
+    // Early return if no data
+    if (!data || data.length === 0) {
+        return (jsx("div", { className: cn("chart-container flex items-center justify-center text-[var(--color-text-placeholder)]", className), role: "img", "aria-label": "Empty line chart", ...props, children: jsx("span", { children: "No data available" }) }));
+    }
+    // Calculate dimensions
+    const margin = useMemo(() => ({
+        top: 0,
+        right: 0,
+        bottom: showXAxis ? 40 : 0, // Reduce bottom margin when X-axis is hidden
+        left: showYAxis ? 60 : 0, // Reduce left margin when Y-axis is hidden
+    }), [showXAxis, showYAxis]);
+    const innerWidth = dimensions.width - margin.left - margin.right;
+    const innerHeight = dimensions.height - margin.top - margin.bottom;
+    // Get all data keys from config
+    const dataKeys = useMemo(() => Object.keys(config), [config]);
+    // Calculate scales
+    const { minValue, maxValue } = useMemo(() => {
+        const rawMaxValue = Math.max(...data.map((item) => Math.max(...dataKeys.map((key) => {
+            const value = item[key];
+            return typeof value === "number" ? value : 0;
+        }))));
+        const rawMinValue = Math.min(...data.map((item) => Math.min(...dataKeys.map((key) => {
+            const value = item[key];
+            return typeof value === "number" ? value : 0;
+        }))));
+        // Compute nice axis boundaries using Heckbert's algorithm
+        const dataMinWithZero = Math.min(rawMinValue, 0);
+        const dataMaxWithZero = Math.max(rawMaxValue, 0);
+        const { niceMin, niceMax } = generateNiceTicks(dataMinWithZero, dataMaxWithZero, 5);
+        return {
+            minValue: propMinValue !== null && propMinValue !== void 0 ? propMinValue : niceMin,
+            maxValue: propMaxValue !== null && propMaxValue !== void 0 ? propMaxValue : niceMax,
+        };
+    }, [data, dataKeys, propMinValue, propMaxValue]);
+    // Calculate point position
+    const getPointPosition = useCallback((dataIndex, value) => {
+        // Spread points evenly across the full width
+        // First point at left edge (margin.left), last point at right edge (margin.left + innerWidth)
+        const x = data.length === 1
+            ? margin.left + innerWidth / 2 // Center single point
+            : margin.left + (dataIndex / (data.length - 1)) * innerWidth;
+        const y = margin.top +
+            innerHeight -
+            ((value - minValue) / (maxValue - minValue)) * innerHeight;
+        return { x, y };
+    }, [data.length, margin.left, margin.top, innerWidth, innerHeight, minValue, maxValue]);
+    // Precompute all line paths
+    const allPaths = useMemo(() => {
+        const result = {};
+        dataKeys.forEach((key) => {
+            const segments = [];
+            let currentSegment = [];
+            data.forEach((item, index) => {
+                const rawValue = item[key];
+                const isNull = rawValue === null || rawValue === undefined;
+                if (isNull) {
+                    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 });
+                }
+            });
+            if (currentSegment.length > 0) {
+                segments.push(currentSegment);
+            }
+            result[key] = segments
+                .map((segment) => generateCurvePath(segment, curved ? curveType : "linear"))
+                .join(" ");
+        });
+        return result;
+    }, [data, dataKeys, curved, curveType, getPointPosition]);
+    // Handle keyboard focus tooltips
+    useEffect(() => {
+        if (isKeyboardMode &&
+            focusedElementIndex >= 0 &&
+            focusedElementIndex < data.length) {
+            const item = data[focusedElementIndex];
+            // 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 ${focusedElementIndex + 1}`,
+                series: seriesData,
+            };
+            // Calculate position for focused point
+            const pointX = data.length === 1
+                ? margin.left + innerWidth / 2
+                : margin.left +
+                    (focusedElementIndex / (data.length - 1)) * innerWidth;
+            const svgCoordinates = {
+                x: pointX,
+                y: margin.top + innerHeight / 2,
+                dimensions,
+            };
+            // Simulate mouse enter for keyboard focus
+            const syntheticEvent = new MouseEvent("mouseenter", {
+                clientX: pointX,
+                clientY: margin.top + innerHeight / 2,
+            });
+            handleMouseEnter(syntheticEvent, content, svgCoordinates);
+        }
+        else if (isKeyboardMode && focusedElementIndex === -1) {
+            // Only clear tooltip when explicitly exiting keyboard mode (Escape key)
+            handleMouseLeave();
+        }
+        // Don't clear tooltips when switching from keyboard to mouse mode
+    }, [
+        isKeyboardMode,
+        focusedElementIndex,
+        data,
+        config,
+        dimensions,
+        margin,
+        innerWidth,
+        innerHeight,
+        dataKeys,
+        handleMouseEnter,
+        handleMouseLeave,
+    ]);
+    return (jsxs("div", { ref: containerRef, className: cn("chart-container w-full h-full", className), ...chartAccessibilityProps, onMouseEnter: handleMouseInteraction, onMouseMove: handleMouseInteraction, ...props, children: [descriptionProps && jsx("div", { ...descriptionProps }), jsxs("svg", { width: "100%", height: "100%", viewBox: `0 0 ${dimensions.width} ${dimensions.height}`, className: "overflow-visible", role: "presentation", children: [jsxs("defs", { children: [jsx("filter", { id: shadowFilterId, 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: verticalFadeId, 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: horizontalFadeId, 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("clipPath", { id: revealClipId, children: jsx(motion.rect, { initial: { width: 0, x: margin.left, y: margin.top }, animate: {
+                                        width: innerWidth + margin.right,
+                                        x: margin.left,
+                                        y: margin.top,
+                                    }, height: innerHeight, transition: {
+                                        duration: ANIMATION_DURATION,
+                                        ease: "easeOut",
+                                    } }) })] }), jsx(HorizontalGrid, { show: showGrid, x: margin.left, y: margin.top, width: innerWidth, height: innerHeight, lineCount: 5 }), jsx(ChartCrosshair, { show: hoveredPoint !== null, x: hoveredPoint !== null
+                            ? data.length === 1
+                                ? margin.left + innerWidth / 2
+                                : margin.left +
+                                    (hoveredPoint.index / (data.length - 1)) * innerWidth
+                            : 0, y: hoveredPoint !== null && dataKeys.length === 1
+                            ? (() => {
+                                const item = data[hoveredPoint.index];
+                                const singleKey = dataKeys[0];
+                                const singleValue = item[singleKey];
+                                const numValue = typeof singleValue === "number" ? singleValue : 0;
+                                return (margin.top +
+                                    innerHeight -
+                                    ((numValue - minValue) / (maxValue - minValue)) *
+                                        innerHeight);
+                            })()
+                            : undefined, margin: margin, innerWidth: innerWidth, innerHeight: innerHeight, showHorizontal: dataKeys.length === 1 }), jsx(YAxis, { show: showYAxis, min: minValue, max: maxValue, x: margin.left, y: margin.top, height: innerHeight, showGrid: false, gridWidth: innerWidth, tickFormatter: (value) => {
+                            if (Math.abs(value) >= 1000)
+                                return `${(value / 1000).toFixed(0)}k`;
+                            return value.toString();
+                        } }), minValue < 0 && maxValue > 0 && (jsx("line", { x1: margin.left, y1: margin.top + innerHeight - ((0 - minValue) / (maxValue - minValue)) * innerHeight, x2: margin.left + innerWidth, y2: margin.top + innerHeight - ((0 - minValue) / (maxValue - minValue)) * innerHeight, className: "stroke-[var(--color-text-secondary)]", strokeWidth: 1, opacity: 0.6 })), jsx("g", { className: "chart-lines", children: dataKeys.map((key, keyIndex) => {
+                            const targetPath = allPaths[key];
+                            const colorClass = getSeriesColorClass(keyIndex);
+                            return (jsxs("g", { clipPath: `url(#${revealClipId})`, children: [jsx("path", { d: targetPath, fill: "none", strokeWidth: strokeWidth, strokeLinecap: "round", className: cn("transition-all duration-200", colorClass), filter: `url(#${shadowFilterId})` }), 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);
+                                            const isFocused = isKeyboardMode && focusedElementIndex === dataIndex;
+                                            return (jsx(motion.g, { initial: { opacity: 0, scale: 0 }, animate: { opacity: 1, scale: 1 }, transition: {
+                                                    // Sync with the line reveal: calculate when the line reaches this point
+                                                    delay: (dataIndex / (data.length - 1)) *
+                                                        ANIMATION_DURATION,
+                                                    type: "spring",
+                                                    stiffness: 260,
+                                                    damping: 20,
+                                                }, style: {
+                                                    originX: "50%",
+                                                    originY: "50%",
+                                                    transformBox: "fill-box",
+                                                }, children: jsx(ChartMarker, { cx: x, cy: y, radius: isFocused
+                                                        ? resolvedDotRadius + 2
+                                                        : resolvedDotRadius, colorClass: cn(colorClass, isFocused &&
+                                                        "stroke-[var(--color-primary-600)] stroke-2") }) }, `${key}-${dataIndex}`));
+                                        })] }, key));
+                        }) }), !showDots && hoveredPoint !== null && (jsx("g", { className: "chart-hover-markers", children: dataKeys.map((key, keyIndex) => {
+                            const item = data[hoveredPoint.index];
+                            const rawValue = item[key];
+                            const isNull = rawValue === null || rawValue === undefined;
+                            const value = isNull
+                                ? 0
+                                : typeof rawValue === "number"
+                                    ? rawValue
+                                    : 0;
+                            // Don't render hover markers for null values
+                            if (isNull)
+                                return null;
+                            const { x, y } = getPointPosition(hoveredPoint.index, value);
+                            const colorClass = getSeriesColorClass(keyIndex);
+                            return (jsx(ChartMarker, { cx: x, cy: y, radius: resolvedDotRadius, colorClass: colorClass }, `hover-${key}-${hoveredPoint.index}`));
+                        }) })), jsx("g", { className: "chart-hover-areas", children: data.map((item, dataIndex) => {
+                            // Calculate hover area based on new point positioning
+                            const pointX = data.length === 1
+                                ? margin.left + innerWidth / 2
+                                : margin.left + (dataIndex / (data.length - 1)) * innerWidth;
+                            // Create hover area around each point
+                            const hoverWidth = data.length === 1 ? innerWidth : innerWidth / (data.length - 1);
+                            const hoverX = data.length === 1
+                                ? margin.left
+                                : Math.max(margin.left, pointX - hoverWidth / 2);
+                            // Ensure hover area doesn't exceed chart bounds
+                            const adjustedWidth = data.length === 1
+                                ? innerWidth
+                                : Math.min(hoverWidth, margin.left + innerWidth - hoverX);
+                            return (jsx("rect", { x: hoverX, y: margin.top, width: adjustedWidth, height: innerHeight, fill: "transparent", className: "cursor-pointer", onMouseEnter: (e) => {
+                                    setHoveredPoint({ index: dataIndex, key: dataKeys[0] });
+                                    // Create multi-series tooltip data
+                                    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,
+                                    };
+                                    handleMouseEnter(e, content, svgCoordinates);
+                                }, onMouseMove: (e) => {
+                                    if ((hoveredPoint === null || hoveredPoint === void 0 ? void 0 : hoveredPoint.index) === dataIndex) {
+                                        const svgCoordinates = {
+                                            x: pointX,
+                                            y: margin.top + innerHeight / 2,
+                                            dimensions,
+                                        };
+                                        handleMouseMove(e, svgCoordinates);
+                                    }
+                                }, onMouseLeave: handleMouseLeave }, `hover-${dataIndex}`));
+                        }) }), jsx(XAxis, { show: showXAxis, data: data, x: margin.left, y: margin.top + innerHeight, width: innerWidth, categoryWidth: innerWidth / data.length, categoryGap: 0, alignWithEdge: true })] }), jsx(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: "line" }), children] }));
+};
+
+export { LineChart };

package/dist/components/charts/LineChart/LineChart.types.d.ts

@@ -0,0 +1,33 @@
+import { BaseChartProps, StandardChartDisplayProps } from '../types/chart.types';
+export type SemanticColor = 'primary' | 'secondary' | 'success' | 'warning' | 'danger';
+export interface LineChartProps extends BaseChartProps, Omit<StandardChartDisplayProps, 'variant' | 'theme'> {
+    color?: SemanticColor;
+    dotRadius?: number;
+    radius?: number;
+    strokeWidth?: number;
+    curved?: boolean;
+    curveType?: 'linear' | 'monotone';
+    showDots?: boolean;
+}
+export declare const LINE_CHART_DEFAULTS: {
+    readonly color: undefined;
+    readonly dotRadius: 4;
+    readonly radius: 4;
+    readonly strokeWidth: 2;
+    readonly curved: true;
+    readonly curveType: import("../types/chart.types").CurveType;
+    readonly showDots: true;
+    readonly showGrid: true;
+    readonly showXAxis: true;
+    readonly showYAxis: true;
+    readonly barRadius: 32;
+    readonly cellRadius: 4;
+    readonly gap: 4;
+    readonly categoryGap: 16;
+    readonly fillOpacity: 0.3;
+    readonly showStroke: true;
+    readonly orientation: "vertical" | "horizontal";
+    readonly stacked: false;
+    readonly variant: import("../types/chart.types").ChartVariant;
+    readonly enableKeyboardNavigation: true;
+};

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

@@ -0,0 +1,15 @@
+import { CHART_DEFAULTS } from '../types/chart.types.js';
+
+// Default values using centralized defaults
+const LINE_CHART_DEFAULTS = {
+    ...CHART_DEFAULTS,
+    color: undefined, // Defaults to auto-cycling through semantic colors
+    dotRadius: CHART_DEFAULTS.dotRadius, // 20 - For dot markers
+    radius: CHART_DEFAULTS.dotRadius, // @deprecated - kept for backward compatibility
+    strokeWidth: CHART_DEFAULTS.strokeWidth,
+    curved: CHART_DEFAULTS.curved,
+    curveType: CHART_DEFAULTS.curveType,
+    showDots: CHART_DEFAULTS.showDots,
+};
+
+export { LINE_CHART_DEFAULTS };

package/dist/components/charts/LineChart/index.d.ts

@@ -0,0 +1,2 @@
+export { LineChart } from './LineChart';
+export type { LineChartProps } from './LineChart.types';

package/dist/components/charts/RadarChart/RadarChart.animations.d.ts

@@ -0,0 +1,16 @@
+import type { AnimationPreset } from "../utils/animation-utils";
+/**
+ * Animation configuration for the RadarChart component
+ *
+ * Uses the shared spring animation system from the charts utilities.
+ * The radar chart animates each data polygon from the center outward
+ * with a slight stagger between series.
+ */
+export declare const RADAR_CHART_ANIMATIONS: {
+    /** Spring preset for data polygon entrance */
+    readonly preset: AnimationPreset;
+    /** Initial delay before the first series animates (seconds) */
+    readonly initialDelay: 0.15;
+    /** Stagger delay between each series polygon (seconds) */
+    readonly seriesStagger: 0.12;
+};

package/dist/components/charts/RadarChart/RadarChart.animations.js

@@ -0,0 +1,17 @@
+/**
+ * Animation configuration for the RadarChart component
+ *
+ * Uses the shared spring animation system from the charts utilities.
+ * The radar chart animates each data polygon from the center outward
+ * with a slight stagger between series.
+ */
+const RADAR_CHART_ANIMATIONS = {
+    /** Spring preset for data polygon entrance */
+    preset: "smooth",
+    /** Initial delay before the first series animates (seconds) */
+    initialDelay: 0.15,
+    /** Stagger delay between each series polygon (seconds) */
+    seriesStagger: 0.12,
+};
+
+export { RADAR_CHART_ANIMATIONS };

package/dist/components/charts/RadarChart/RadarChart.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { RadarChartProps } from "./RadarChart.types";
+export declare const RadarChart: React.FC<RadarChartProps>;

package/dist/components/charts/RadarChart/RadarChart.js

@@ -0,0 +1,166 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default, { useRef, useMemo, useCallback } from 'react';
+import { useReducedMotion, motion } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
+import { radarChartTheme } from './RadarChart.theme.js';
+import { RADAR_CHART_ANIMATIONS } from './RadarChart.animations.js';
+import { getSpringAnimation, getStaggerDelay } from '../utils/animation-utils.js';
+import { ChartTooltip } from '../shared/ChartTooltip/ChartTooltip.js';
+import { useTooltipPosition } from '../hooks/useTooltipPosition.js';
+
+/* -------------------------------------------------------------------------- */
+/*  Geometry helpers                                                          */
+/* -------------------------------------------------------------------------- */
+function polarToCartesian(cx, cy, radius, angleRad) {
+    return {
+        x: cx + radius * Math.cos(angleRad),
+        y: cy + radius * Math.sin(angleRad),
+    };
+}
+function axisAngle(index, total) {
+    return (2 * Math.PI * index) / total - Math.PI / 2;
+}
+function buildPolygonPoints(values, maxValue, cx, cy, chartRadius) {
+    return values
+        .map((v, i) => {
+        const ratio = maxValue > 0 ? Math.min(v, maxValue) / maxValue : 0;
+        const r = ratio * chartRadius;
+        const angle = axisAngle(i, values.length);
+        const { x, y } = polarToCartesian(cx, cy, r, angle);
+        return `${x},${y}`;
+    })
+        .join(" ");
+}
+/* -------------------------------------------------------------------------- */
+/*  Component                                                                 */
+/* -------------------------------------------------------------------------- */
+const RadarChart = ({ axes, series, size = 400, gridLevels = 5, maxValue: maxValueProp, showGrid = true, showLabels = true, showLegend = true, showTooltip = true, showAnimation = true, fillOpacity = 0.25, strokeWidth = 2, className, theme: themeOverrides, ...props }) => {
+    const shouldReduceMotion = useReducedMotion();
+    const containerRef = useRef(null);
+    // Tooltip setup
+    const isMobile = typeof window !== "undefined" && window.innerWidth < 768;
+    const { tooltipData, tooltipRef, handleMouseEnter, handleMouseMove, handleMouseLeave, } = useTooltipPosition({
+        containerRef,
+        isMobile,
+    });
+    // Merge theme overrides
+    const theme = useMemo(() => ({ ...radarChartTheme, ...(themeOverrides || {}) }), [themeOverrides]);
+    const axisCount = axes.length;
+    // Auto-detect maxValue when not provided
+    const maxValue = useMemo(() => {
+        if (maxValueProp !== undefined)
+            return maxValueProp;
+        let max = 0;
+        for (const s of series) {
+            for (const v of s.data) {
+                if (v > max)
+                    max = v;
+            }
+        }
+        return max > 0 ? Math.ceil(max / 10) * 10 : 100;
+    }, [maxValueProp, series]);
+    // Layout constants
+    const labelOffset = 24;
+    const chartRadius = (size - labelOffset * 2) / 2;
+    const cx = size / 2;
+    const cy = size / 2;
+    /* ----------------------------- Grid rings ----------------------------- */
+    const gridRings = useMemo(() => {
+        if (!showGrid || gridLevels <= 0)
+            return [];
+        return Array.from({ length: gridLevels }, (_, levelIdx) => {
+            const ratio = (levelIdx + 1) / gridLevels;
+            const r = ratio * chartRadius;
+            const points = Array.from({ length: axisCount }, (_, i) => {
+                const angle = axisAngle(i, axisCount);
+                const { x, y } = polarToCartesian(cx, cy, r, angle);
+                return `${x},${y}`;
+            }).join(" ");
+            return points;
+        });
+    }, [showGrid, gridLevels, axisCount, chartRadius, cx, cy]);
+    /* ----------------------------- Axis spokes ----------------------------- */
+    const spokes = useMemo(() => {
+        return Array.from({ length: axisCount }, (_, i) => {
+            const angle = axisAngle(i, axisCount);
+            const end = polarToCartesian(cx, cy, chartRadius, angle);
+            return { x1: cx, y1: cy, x2: end.x, y2: end.y };
+        });
+    }, [axisCount, chartRadius, cx, cy]);
+    /* ----------------------------- Axis labels ----------------------------- */
+    const labels = useMemo(() => {
+        if (!showLabels)
+            return [];
+        const padding = 14;
+        return axes.map((label, i) => {
+            const angle = axisAngle(i, axisCount);
+            const { x, y } = polarToCartesian(cx, cy, chartRadius + padding, angle);
+            let anchor = "middle";
+            if (x < cx - 1)
+                anchor = "end";
+            else if (x > cx + 1)
+                anchor = "start";
+            let dy = "0.35em";
+            if (y < cy - chartRadius * 0.5)
+                dy = "0.9em";
+            else if (y > cy + chartRadius * 0.5)
+                dy = "-0.35em";
+            return { text: label, x, y, anchor, dy };
+        });
+    }, [axes, axisCount, showLabels, chartRadius, cx, cy]);
+    /* ----------------------------- Data polygons ----------------------------- */
+    const polygons = useMemo(() => {
+        return series.map((s) => ({
+            points: buildPolygonPoints(s.data, maxValue, cx, cy, chartRadius),
+            color: s.color,
+            label: s.label,
+        }));
+    }, [series, maxValue, cx, cy, chartRadius]);
+    /* ----------------------------- Tooltip handler ----------------------------- */
+    const buildTooltipContent = useCallback((axisIndex) => ({
+        category: axes[axisIndex],
+        series: series.map((s) => ({
+            key: s.label,
+            label: s.label,
+            value: s.data[axisIndex],
+            color: s.color,
+        })),
+    }), [axes, series]);
+    const handleDotMouseEnter = useCallback((event, axisIndex) => {
+        if (!showTooltip)
+            return;
+        const content = buildTooltipContent(axisIndex);
+        handleMouseEnter(event, content);
+    }, [showTooltip, buildTooltipContent, handleMouseEnter]);
+    /* ----------------------------- Animation ----------------------------- */
+    const shouldAnimate = showAnimation && !shouldReduceMotion;
+    return (jsxs("div", { ref: containerRef, className: cn(theme.baseStyle, className), role: "img", "aria-label": `Radar chart comparing ${series.map((s) => s.label).join(", ")} across ${axes.join(", ")}`, ...props, children: [jsxs("svg", { viewBox: `0 0 ${size} ${size}`, width: size, height: size, className: "overflow-visible", children: [gridRings.map((points, idx) => (jsx("polygon", { points: points, fill: "none", stroke: theme.gridColor, strokeWidth: 1 }, `grid-${idx}`))), spokes.map((spoke, idx) => (jsx("line", { x1: spoke.x1, y1: spoke.y1, x2: spoke.x2, y2: spoke.y2, stroke: theme.axisColor, strokeWidth: 1 }, `spoke-${idx}`))), polygons.map((poly, idx) => shouldAnimate ? (jsx(motion.polygon, { points: poly.points, fill: poly.color, fillOpacity: fillOpacity, stroke: poly.color, strokeWidth: strokeWidth, strokeLinejoin: "round", initial: { opacity: 0, scale: 0 }, animate: { opacity: 1, scale: 1 }, transition: getSpringAnimation(RADAR_CHART_ANIMATIONS.preset, shouldReduceMotion, RADAR_CHART_ANIMATIONS.initialDelay +
+                            getStaggerDelay(idx, RADAR_CHART_ANIMATIONS.seriesStagger)), style: { transformOrigin: `${cx}px ${cy}px` } }, `series-${idx}`)) : (jsx("polygon", { points: poly.points, fill: poly.color, fillOpacity: fillOpacity, stroke: poly.color, strokeWidth: strokeWidth, strokeLinejoin: "round" }, `series-${idx}`))), series.map((s, sIdx) => s.data.map((v, dIdx) => {
+                        const ratio = maxValue > 0 ? Math.min(v, maxValue) / maxValue : 0;
+                        const r = ratio * chartRadius;
+                        const angle = axisAngle(dIdx, axisCount);
+                        const { x, y } = polarToCartesian(cx, cy, r, angle);
+                        const dotProps = {
+                            cx: x,
+                            cy: y,
+                            r: 3,
+                            fill: s.color,
+                            className: showTooltip ? "cursor-pointer" : undefined,
+                            onMouseEnter: showTooltip
+                                ? (e) => handleDotMouseEnter(e, dIdx)
+                                : undefined,
+                            onMouseMove: showTooltip ? handleMouseMove : undefined,
+                            onMouseLeave: showTooltip ? handleMouseLeave : undefined,
+                        };
+                        // Invisible larger hit area behind each dot for easier hover
+                        const hitArea = showTooltip ? (jsx("circle", { cx: x, cy: y, r: 10, fill: "transparent", className: "cursor-pointer", onMouseEnter: (e) => handleDotMouseEnter(e, dIdx), onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave }, `hit-${sIdx}-${dIdx}`)) : null;
+                        return shouldAnimate ? (jsxs(React__default.Fragment, { children: [hitArea, jsx(motion.circle, { ...dotProps, initial: { opacity: 0 }, animate: { opacity: 1 }, transition: getSpringAnimation(RADAR_CHART_ANIMATIONS.preset, shouldReduceMotion, RADAR_CHART_ANIMATIONS.initialDelay +
+                                        getStaggerDelay(sIdx, RADAR_CHART_ANIMATIONS.seriesStagger) +
+                                        0.05) })] }, `dot-${sIdx}-${dIdx}`)) : (jsxs(React__default.Fragment, { children: [hitArea, jsx("circle", { ...dotProps })] }, `dot-${sIdx}-${dIdx}`));
+                    })), labels.map((lbl, idx) => (jsx("text", { x: lbl.x, y: lbl.y, textAnchor: lbl.anchor, dy: lbl.dy, className: theme.labelStyle, children: lbl.text }, `label-${idx}`)))] }), showLegend && series.length > 0 && (jsx("div", { className: cn(theme.legendStyle), children: series.map((s, idx) => (jsxs("div", { className: cn(theme.legendItemStyle), children: [jsx("span", { className: cn(theme.legendDotStyle), style: { backgroundColor: s.color } }), jsx("span", { className: cn(theme.legendLabelStyle), children: s.label })] }, `legend-${idx}`))) })), showTooltip && (jsx(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 }))] }));
+};
+RadarChart.displayName = "RadarChart";
+
+export { RadarChart };

package/dist/components/charts/RadarChart/RadarChart.theme.d.ts

@@ -0,0 +1,9 @@
+import type { RadarChartTheme } from "./RadarChart.types";
+/**
+ * Default theme for the RadarChart component
+ *
+ * SVG stroke/fill attributes use raw hex values because CSS variables
+ * are not resolved inside SVG attribute strings.  Tailwind utility
+ * classes are used only for the HTML wrapper elements (labels, legend).
+ */
+export declare const radarChartTheme: RadarChartTheme;