@flikk/ui 1.0.0-beta.27 → 1.0.0-beta.29

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

@@ -1,9 +1,10 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useRef, useState, useId, useEffect, useMemo, useCallback } from 'react';
-import { motion } from 'motion/react';
+import { useRef, useId, useMemo, useState, useCallback, useEffect } from 'react';
+import { useReducedMotion, motion } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
 import { useTooltipPosition } from '../hooks/useTooltipPosition.js';
 import { useChartAccessibility } from '../hooks/useChartAccessibility.js';
+import { useChartDimensions } from '../hooks/useChartDimensions.js';
 import { XAxis } from '../shared/ChartAxis/XAxis.js';
 import { YAxis } from '../shared/ChartAxis/YAxis.js';
 import { HorizontalGrid } from '../shared/ChartGrid/HorizontalGrid.js';
@@ -13,6 +14,7 @@ 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';
+import { X_AXIS_MARGIN } from '../types/chart.types.js';
 
 // Production-ready color system with CORRECT CSS variable syntax
 const getSeriesColorClass = (index) => {
@@ -25,7 +27,19 @@ const getSeriesColorClass = (index) => {
     return colors[index % colors.length];
 };
 // Get color value for SVG elements and tooltips
-const getSeriesFillColor = (index) => {
+const getSeriesFillColor = (index, key, config) => {
+    var _a;
+    if (key && config && ((_a = config[key]) === null || _a === void 0 ? void 0 : _a.color)) {
+        const customColor = config[key].color;
+        if (!customColor.startsWith("var(") &&
+            !customColor.startsWith("#") &&
+            !customColor.startsWith("rgb") &&
+            !customColor.startsWith("hsl") &&
+            customColor.includes("-")) {
+            return `var(--color-${customColor})`;
+        }
+        return customColor;
+    }
     const colorVars = [
         "var(--color-primary)",
         "var(--color-warning)",
@@ -43,7 +57,7 @@ color = LINE_CHART_DEFAULTS.color,
 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 }) => {
+className, title, description, enableKeyboardNavigation = LINE_CHART_DEFAULTS.enableKeyboardNavigation, width, height, 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;
@@ -54,12 +68,21 @@ className, title, description, enableKeyboardNavigation = LINE_CHART_DEFAULTS.en
     }
     // Simplified color system - no complex theme hook needed
     const containerRef = useRef(null);
-    const [dimensions, setDimensions] = useState({ width: 600, height: 400 });
-    const revealClipId = useId();
+    // `measured` gates the rise + dots so motion captures the baseline scaleY
+    // origin and dot positions at the real size, not the 600×400 fallback.
+    const { dimensions, measured } = useChartDimensions(containerRef);
     const shadowFilterId = useId();
     const verticalFadeId = useId();
     const horizontalFadeId = useId();
     const ANIMATION_DURATION = 1.5;
+    // Entrance: the line RISES from the x-axis (scaleY 0→1 about the baseline),
+    // mirroring how BarChart's bars grow up from the zero line. A single
+    // continuous path can't morph between datasets of different point counts, so
+    // it rises rather than draws. Keying the line group on the data signature
+    // replays the rise on every range switch; reduced-motion users get a stable
+    // key + scaleY:1 (no animation).
+    const shouldReduceMotion = useReducedMotion();
+    const dataSignature = useMemo(() => JSON.stringify(data), [data]);
     const [hoveredPoint, setHoveredPoint] = useState(null);
     // Detect if device is mobile/touch
     const isMobile = typeof window !== "undefined" &&
@@ -78,26 +101,6 @@ className, title, description, enableKeyboardNavigation = LINE_CHART_DEFAULTS.en
         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" }) }));
@@ -106,7 +109,7 @@ className, title, description, enableKeyboardNavigation = LINE_CHART_DEFAULTS.en
     const margin = useMemo(() => ({
         top: 0,
         right: 0,
-        bottom: showXAxis ? 40 : 0, // Reduce bottom margin when X-axis is hidden
+        bottom: showXAxis ? X_AXIS_MARGIN : 0, // shared X-axis margin so baselines align across chart types
         left: showYAxis ? 60 : 0, // Reduce left margin when Y-axis is hidden
     }), [showXAxis, showYAxis]);
     const innerWidth = dimensions.width - margin.left - margin.right;
@@ -189,7 +192,7 @@ className, title, description, enableKeyboardNavigation = LINE_CHART_DEFAULTS.en
                     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),
+                    color: ((_b = config[seriesKey]) === null || _b === void 0 ? void 0 : _b.color) || getSeriesFillColor(keyIndex, seriesKey, config),
                 };
             });
             const content = {
@@ -231,14 +234,15 @@ className, title, description, enableKeyboardNavigation = LINE_CHART_DEFAULTS.en
         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
+    return (jsxs("div", { ref: containerRef, className: cn("chart-container w-full h-full", className), style: {
+            width: width !== undefined ? (typeof width === "number" ? `${width}px` : width) : undefined,
+            height: height !== undefined ? (typeof height === "number" ? `${height}px` : height) : undefined,
+        }, ...chartAccessibilityProps, onMouseEnter: handleMouseInteraction, onMouseMove: handleMouseInteraction, onMouseLeave: () => {
+            // Clear the crosshair + glow marker when the pointer leaves the chart.
+            // The per-point rects only hide the tooltip; nothing else resets this.
+            setHoveredPoint(null);
+            handleMouseLeave();
+        }, ...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(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 +
@@ -258,40 +262,52 @@ className, title, description, enableKeyboardNavigation = LINE_CHART_DEFAULTS.en
                             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) => {
+                        } }), 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: measured &&
+                            dataKeys.map((key, keyIndex) => {
+                                var _a;
+                                const targetPath = allPaths[key];
+                                const colorClass = getSeriesColorClass(keyIndex);
+                                return (jsxs("g", { children: [jsxs(motion.g, { initial: { scaleY: shouldReduceMotion ? 1 : 0 }, animate: { scaleY: 1 }, transition: { duration: ANIMATION_DURATION, ease: "easeOut" }, 
+                                            // Rise from the x-axis like the bars. Framer forces
+                                            // transform-box:fill-box for SVG, so `originY:1` anchors scaleY
+                                            // to the group's fill-box BOTTOM. The invisible rect pins that
+                                            // bottom to the plot baseline (a bare line's bbox stops at its
+                                            // lowest point), so the line grows UP from the x-axis.
+                                            style: { originY: 1, transformOrigin: "bottom" }, children: [jsx("rect", { x: margin.left, y: margin.top, width: innerWidth, height: innerHeight, fill: "none", stroke: "none", style: { pointerEvents: "none" } }), jsx("path", { d: targetPath, fill: "none", strokeWidth: strokeWidth, strokeLinecap: "round", 
+                                                    // Constant stroke width through the scaleY rise (no squash).
+                                                    vectorEffect: "non-scaling-stroke", className: cn("transition-all duration-200", colorClass), style: { stroke: (_a = config[key]) === null || _a === void 0 ? void 0 : _a.color }, filter: `url(#${shadowFilterId})` })] }, shouldReduceMotion ? "line-static" : dataSignature), showDots &&
+                                            data.map((item, dataIndex) => {
+                                                var _a;
+                                                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: {
+                                                        // Markers pop in one-by-one (left-to-right) only AFTER the
+                                                        // line has fully risen — start the stagger at the rise's end.
+                                                        delay: shouldReduceMotion ? 0 : ANIMATION_DURATION + dataIndex * 0.06,
+                                                        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"), strokeColor: (_a = config[key]) === null || _a === void 0 ? void 0 : _a.color }) }, `${key}-${dataIndex}${shouldReduceMotion ? "" : `-${dataSignature}`}`));
+                                            })] }, key));
+                            }) }), !showDots && hoveredPoint !== null && (jsx("g", { className: "chart-hover-markers", children: dataKeys.map((key, keyIndex) => {
+                            var _a;
                             const item = data[hoveredPoint.index];
                             const rawValue = item[key];
                             const isNull = rawValue === null || rawValue === undefined;
@@ -305,7 +321,7 @@ className, title, description, enableKeyboardNavigation = LINE_CHART_DEFAULTS.en
                                 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}`));
+                            return (jsx(ChartMarker, { cx: x, cy: y, radius: resolvedDotRadius, colorClass: colorClass, strokeColor: (_a = config[key]) === null || _a === void 0 ? void 0 : _a.color }, `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
@@ -332,7 +348,7 @@ className, title, description, enableKeyboardNavigation = LINE_CHART_DEFAULTS.en
                                             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),
+                                                getSeriesFillColor(keyIndex, seriesKey, config),
                                         };
                                     });
                                     const content = {

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

@@ -11,12 +11,12 @@ export interface LineChartProps extends BaseChartProps, Omit<StandardChartDispla
 }
 export declare const LINE_CHART_DEFAULTS: {
     readonly color: undefined;
-    readonly dotRadius: 4;
-    readonly radius: 4;
+    readonly dotRadius: 3;
+    readonly radius: 3;
     readonly strokeWidth: 2;
     readonly curved: true;
     readonly curveType: import("..").CurveType;
-    readonly showDots: true;
+    readonly showDots: false;
     readonly showGrid: true;
     readonly showXAxis: true;
     readonly showYAxis: true;

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

@@ -134,7 +134,7 @@ const RadarChart = ({ axes, series, size = 400, gridLevels = 5, maxValue: maxVal
     }, [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 +
+    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: themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.gridColor, className: cn(!(themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.gridColor) && "stroke-[var(--color-border)]"), strokeWidth: 1 }, `grid-${idx}`))), spokes.map((spoke, idx) => (jsx("line", { x1: spoke.x1, y1: spoke.y1, x2: spoke.x2, y2: spoke.y2, stroke: themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.axisColor, className: cn(!(themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.axisColor) && "stroke-[var(--color-border-secondary)]"), 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;

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

@@ -8,9 +8,12 @@
 const radarChartTheme = {
     // Outer wrapper
     baseStyle: "flex flex-col items-center gap-4",
-    // Grid ring stroke color (gray-200 equivalent)
+    // Grid ring / axis spoke colors are drawn from the dark-mode-aware
+    // `--color-border` / `--color-border-secondary` tokens in the component
+    // (applied via className so the CSS variable resolves). These hex values are
+    // only the fallback used when a consumer overrides `theme.gridColor` /
+    // `theme.axisColor` — they are NOT the rendered default.
     gridColor: "#e5e7eb",
-    // Axis spoke stroke color (gray-300 equivalent)
     axisColor: "#d1d5db",
     // Axis label classes (applied to <text> elements via className)
     labelStyle: "text-xs fill-[#6b7280] select-none",

package/dist/components/charts/ScatterPlot/ScatterPlot.js

@@ -1,9 +1,10 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useRef, useState, useEffect, useMemo, useCallback } from 'react';
+import { useRef, 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 { useChartDimensions } from '../hooks/useChartDimensions.js';
 import { XAxis } from '../shared/ChartAxis/XAxis.js';
 import { YAxis } from '../shared/ChartAxis/YAxis.js';
 import { ChartTooltip } from '../shared/ChartTooltip/ChartTooltip.js';
@@ -17,37 +18,17 @@ import { getCategoryColor, scatterPlotTheme } from './ScatterPlot.theme.js';
  * Now uses shared axis components with tick marks and value labels like other charts.
  */
 const ScatterPlot = ({ data, xLabel, yLabel, dotRadius: propDotRadius, pointSize, // @deprecated
-showGrid = SCATTER_PLOT_DEFAULTS.showGrid, showXAxis = SCATTER_PLOT_DEFAULTS.showXAxis, showYAxis = SCATTER_PLOT_DEFAULTS.showYAxis, showTooltip = SCATTER_PLOT_DEFAULTS.showTooltip, colors, minValue: propMinValue, maxValue: propMaxValue, theme: themeOverrides, className, svgClassName, dotClassName, gridClassName, axisClassName, title, description, enableKeyboardNavigation = SCATTER_PLOT_DEFAULTS.enableKeyboardNavigation, ...props }) => {
+showGrid = SCATTER_PLOT_DEFAULTS.showGrid, showXAxis = SCATTER_PLOT_DEFAULTS.showXAxis, showYAxis = SCATTER_PLOT_DEFAULTS.showYAxis, showTooltip = SCATTER_PLOT_DEFAULTS.showTooltip, colors, minValue: propMinValue, maxValue: propMaxValue, theme: themeOverrides, className, svgClassName, dotClassName, gridClassName, axisClassName, title, description, enableKeyboardNavigation = SCATTER_PLOT_DEFAULTS.enableKeyboardNavigation, width, height, ...props }) => {
     var _a;
     const theme = { ...scatterPlotTheme, ...(themeOverrides || {}) };
     const chartColors = colors || theme.colors || scatterPlotTheme.colors;
     // Use dotRadius, fallback to pointSize for backward compatibility
     const dotRadiusValue = (_a = propDotRadius !== null && propDotRadius !== void 0 ? propDotRadius : pointSize) !== null && _a !== void 0 ? _a : SCATTER_PLOT_DEFAULTS.dotRadius;
-    // Responsive container dimensions
+    // Responsive container dimensions. `measured` gates dot mount so motion
+    // captures scale-in geometry at real cx/cy, not the 600×400 fallback (dots
+    // would otherwise fly in from the wrong positions on cold load).
     const containerRef = useRef(null);
-    const [dimensions, setDimensions] = useState({ width: 600, height: 400 });
-    // Update dimensions on mount and resize
-    useEffect(() => {
-        if (!containerRef.current)
-            return;
-        const updateDimensions = () => {
-            if (containerRef.current) {
-                const rect = containerRef.current.getBoundingClientRect();
-                setDimensions({
-                    width: rect.width || 600,
-                    height: rect.height || 400,
-                });
-            }
-        };
-        // Initial measurement
-        updateDimensions();
-        // Setup ResizeObserver
-        const resizeObserver = new ResizeObserver(updateDimensions);
-        resizeObserver.observe(containerRef.current);
-        return () => {
-            resizeObserver.disconnect();
-        };
-    }, []);
+    const { dimensions, measured } = useChartDimensions(containerRef);
     // Calculate ranges and categories
     const { xMin, xMax, yMin, yMax, categories, validData } = useMemo(() => {
         // Filter out invalid data points
@@ -155,53 +136,62 @@ showGrid = SCATTER_PLOT_DEFAULTS.showGrid, showXAxis = SCATTER_PLOT_DEFAULTS.sho
     }, [xMin, xMax]);
     // Return empty state if no data
     if (validData.length === 0) {
-        return (jsx("div", { ref: containerRef, className: cn(theme.containerStyle, className), style: { minHeight: '400px' }, ...props, children: jsx("div", { className: theme.emptyStateStyle, children: data.length === 0 ? 'No data available' : 'No valid data points' }) }));
+        return (jsx("div", { ref: containerRef, className: cn(theme.containerStyle, className), style: {
+                minHeight: height === undefined ? '400px' : undefined,
+                width: width !== undefined ? (typeof width === "number" ? `${width}px` : width) : undefined,
+                height: height !== undefined ? (typeof height === "number" ? `${height}px` : height) : undefined,
+            }, ...props, children: jsx("div", { className: theme.emptyStateStyle, children: data.length === 0 ? 'No data available' : 'No valid data points' }) }));
     }
-    return (jsxs("div", { ref: containerRef, className: cn(theme.containerStyle, className), style: { minHeight: '400px' }, ...chartAccessibilityProps, ...props, children: [jsxs("svg", { width: dimensions.width, height: dimensions.height, className: cn(theme.svgStyle, svgClassName), ...descriptionProps, children: [jsx(YAxis, { show: showYAxis, min: yMin, max: yMax, x: margin.left, y: margin.top, height: innerHeight, showGrid: showGrid, gridWidth: innerWidth, tickCount: 5, className: cn(axisClassName) }), validData.map((point, index) => {
-                        const cx = scaleX(point.x);
-                        const cy = scaleY(point.y);
-                        const size = point.size ? Math.sqrt(point.size) / 2 : dotRadiusValue;
-                        const pointColor = getColor(point.category);
-                        return (jsx(motion.circle, { cx: cx, cy: cy, r: size, fill: pointColor, className: cn(theme.dotStyle, dotClassName), strokeWidth: "0.5", initial: { scale: 0, opacity: 0 }, animate: { scale: 1, opacity: 1 }, transition: { delay: index * 0.01, duration: 0.3 }, whileHover: { scale: 1.5, opacity: 1 }, onMouseEnter: (e) => {
-                                if (showTooltip) {
-                                    const content = {
-                                        category: point.label || point.category || `Point ${index + 1}`,
-                                        series: [
-                                            {
-                                                key: 'x',
-                                                label: xLabel || 'X',
-                                                value: point.x.toFixed(2),
-                                                color: pointColor,
-                                            },
-                                            {
-                                                key: 'y',
-                                                label: yLabel || 'Y',
-                                                value: point.y.toFixed(2),
-                                                color: pointColor,
-                                            },
-                                            ...(point.size
-                                                ? [
-                                                    {
-                                                        key: 'size',
-                                                        label: 'Size',
-                                                        value: point.size.toFixed(2),
-                                                        color: pointColor,
-                                                    },
-                                                ]
-                                                : []),
-                                        ],
-                                    };
-                                    // Pass SVG coordinates for proper positioning (especially in mobile/constrained containers)
-                                    const svgCoordinates = isMobile ? {
-                                        x: cx,
-                                        y: cy,
-                                        dimensions
-                                    } : undefined;
-                                    handleMouseEnter(e, content, svgCoordinates);
-                                }
-                                handleMouseInteraction();
-                            }, onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave }, index));
-                    }), jsx(XAxis, { show: showXAxis, data: xAxisData, x: margin.left, y: margin.top + innerHeight, width: innerWidth, categoryWidth: innerWidth / (xAxisData.length - 1), categoryGap: 0, alignWithEdge: true, className: cn(axisClassName) }), xLabel && showXAxis && (jsx("text", { x: margin.left + innerWidth / 2, y: dimensions.height - 5, textAnchor: "middle", className: "text-sm fill-[var(--color-text-secondary)]", children: xLabel })), yLabel && showYAxis && (jsx("text", { x: 15, y: margin.top + innerHeight / 2, textAnchor: "middle", className: "text-sm fill-[var(--color-text-secondary)]", transform: `rotate(-90 15 ${margin.top + innerHeight / 2})`, children: yLabel }))] }), categories.length > 0 && (jsx("div", { className: theme.legendContainerStyle, children: categories.map((cat, index) => (jsxs("div", { className: theme.legendItemStyle, children: [jsx("div", { className: theme.legendDotStyle, style: { backgroundColor: getCategoryColor(chartColors, index) } }), jsx("span", { className: theme.legendLabelStyle, children: cat })] }, cat))) })), 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, chartType: "scatter" }))] }));
+    return (jsxs("div", { ref: containerRef, className: cn(theme.containerStyle, className), style: {
+            minHeight: height === undefined ? '400px' : undefined,
+            width: width !== undefined ? (typeof width === "number" ? `${width}px` : width) : undefined,
+            height: height !== undefined ? (typeof height === "number" ? `${height}px` : height) : undefined,
+        }, ...chartAccessibilityProps, ...props, children: [jsxs("svg", { width: dimensions.width, height: dimensions.height, className: cn(theme.svgStyle, svgClassName), ...descriptionProps, children: [jsx(YAxis, { show: showYAxis, min: yMin, max: yMax, x: margin.left, y: margin.top, height: innerHeight, showGrid: showGrid, gridWidth: innerWidth, tickCount: 5, className: cn(axisClassName) }), measured &&
+                        validData.map((point, index) => {
+                            const cx = scaleX(point.x);
+                            const cy = scaleY(point.y);
+                            const size = point.size ? Math.sqrt(point.size) / 2 : dotRadiusValue;
+                            const pointColor = getColor(point.category);
+                            return (jsx(motion.circle, { cx: cx, cy: cy, r: size, fill: pointColor, className: cn(theme.dotStyle, dotClassName), strokeWidth: "0.5", initial: { scale: 0, opacity: 0 }, animate: { scale: 1, opacity: 1 }, transition: { delay: index * 0.01, duration: 0.3 }, whileHover: { scale: 1.5, opacity: 1 }, onMouseEnter: (e) => {
+                                    if (showTooltip) {
+                                        const content = {
+                                            category: point.label || point.category || `Point ${index + 1}`,
+                                            series: [
+                                                {
+                                                    key: 'x',
+                                                    label: xLabel || 'X',
+                                                    value: point.x.toFixed(2),
+                                                    color: pointColor,
+                                                },
+                                                {
+                                                    key: 'y',
+                                                    label: yLabel || 'Y',
+                                                    value: point.y.toFixed(2),
+                                                    color: pointColor,
+                                                },
+                                                ...(point.size
+                                                    ? [
+                                                        {
+                                                            key: 'size',
+                                                            label: 'Size',
+                                                            value: point.size.toFixed(2),
+                                                            color: pointColor,
+                                                        },
+                                                    ]
+                                                    : []),
+                                            ],
+                                        };
+                                        // Pass SVG coordinates for proper positioning (especially in mobile/constrained containers)
+                                        const svgCoordinates = isMobile ? {
+                                            x: cx,
+                                            y: cy,
+                                            dimensions
+                                        } : undefined;
+                                        handleMouseEnter(e, content, svgCoordinates);
+                                    }
+                                    handleMouseInteraction();
+                                }, onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave }, index));
+                        }), jsx(XAxis, { show: showXAxis, data: xAxisData, x: margin.left, y: margin.top + innerHeight, width: innerWidth, categoryWidth: innerWidth / (xAxisData.length - 1), categoryGap: 0, alignWithEdge: true, className: cn(axisClassName) }), xLabel && showXAxis && (jsx("text", { x: margin.left + innerWidth / 2, y: dimensions.height - 5, textAnchor: "middle", className: "text-sm fill-[var(--color-text-secondary)]", children: xLabel })), yLabel && showYAxis && (jsx("text", { x: 15, y: margin.top + innerHeight / 2, textAnchor: "middle", className: "text-sm fill-[var(--color-text-secondary)]", transform: `rotate(-90 15 ${margin.top + innerHeight / 2})`, children: yLabel }))] }), categories.length > 0 && (jsx("div", { className: theme.legendContainerStyle, children: categories.map((cat, index) => (jsxs("div", { className: theme.legendItemStyle, children: [jsx("div", { className: theme.legendDotStyle, style: { backgroundColor: getCategoryColor(chartColors, index) } }), jsx("span", { className: theme.legendLabelStyle, children: cat })] }, cat))) })), 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, chartType: "scatter" }))] }));
 };
 ScatterPlot.displayName = 'ScatterPlot';
 

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

@@ -32,7 +32,16 @@ const scatterPlotTheme = {
  * Get fill color for category (supports both CSS variables and direct colors)
  */
 function getCategoryColor(colors, categoryIndex) {
-    return colors[categoryIndex % colors.length];
+    const color = colors[categoryIndex % colors.length];
+    if (color &&
+        !color.startsWith("var(") &&
+        !color.startsWith("#") &&
+        !color.startsWith("rgb") &&
+        !color.startsWith("hsl") &&
+        color.includes("-")) {
+        return `var(--color-${color})`;
+    }
+    return color;
 }
 
 export { getCategoryColor, scatterPlotTheme };

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

@@ -1,4 +1,4 @@
-import { StandardChartDisplayProps } from '../types/chart.types';
+import { StandardChartDisplayProps, BaseChartProps } from '../types/chart.types';
 /**
  * Data point for ScatterPlot
  */
@@ -17,7 +17,7 @@ export interface ScatterPlotDataPoint {
 /**
  * ScatterPlot props - extends standardized chart props
  */
-export interface ScatterPlotProps extends StandardChartDisplayProps {
+export interface ScatterPlotProps extends StandardChartDisplayProps, Omit<BaseChartProps, 'data' | 'config'> {
     /** Data points */
     data: ScatterPlotDataPoint[];
     /** X-axis label */
@@ -31,12 +31,6 @@ export interface ScatterPlotProps extends StandardChartDisplayProps {
     colors?: string[];
     /** Enable tooltip on hover */
     showTooltip?: boolean;
-    /** Accessibility props */
-    title?: string;
-    description?: string;
-    enableKeyboardNavigation?: boolean;
-    /** Additional className */
-    className?: string;
     /** className overrides for chart elements (shadcn approach) */
     svgClassName?: string;
     dotClassName?: string;
@@ -63,7 +57,7 @@ export declare const SCATTER_PLOT_DEFAULTS: {
     readonly curveType: import("..").CurveType;
     readonly fillOpacity: 0.3;
     readonly showStroke: true;
-    readonly showDots: true;
+    readonly showDots: false;
     readonly orientation: "vertical" | "horizontal";
     readonly stacked: false;
     readonly variant: import("..").ChartVariant;