@flikk/ui 1.0.0-beta.3 → 1.0.0-beta.30

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

@@ -1,5 +1,5 @@
 import { BaseChartProps, StandardChartDisplayProps } from '../types/chart.types';
-export type SemanticColor = 'primary' | 'secondary' | 'success' | 'warning' | 'danger';
+export type SemanticColor = 'primary' | 'success' | 'warning' | 'danger';
 export interface LineChartProps extends BaseChartProps, Omit<StandardChartDisplayProps, 'variant' | 'theme'> {
     color?: SemanticColor;
     dotRadius?: number;
@@ -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("../types/chart.types").CurveType;
-    readonly showDots: true;
+    readonly curveType: import("..").CurveType;
+    readonly showDots: false;
     readonly showGrid: true;
     readonly showXAxis: true;
     readonly showYAxis: true;
@@ -28,6 +28,6 @@ export declare const LINE_CHART_DEFAULTS: {
     readonly showStroke: true;
     readonly orientation: "vertical" | "horizontal";
     readonly stacked: false;
-    readonly variant: import("../types/chart.types").ChartVariant;
+    readonly variant: import("..").ChartVariant;
     readonly enableKeyboardNavigation: true;
 };

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default, { useRef, useMemo, useCallback } from 'react';
 import { useReducedMotion, motion } from 'motion/react';
@@ -6,6 +7,7 @@ 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 { ChartLegend } from '../shared/ChartLegend/ChartLegend.js';
 import { useTooltipPosition } from '../hooks/useTooltipPosition.js';
 
 /* -------------------------------------------------------------------------- */
@@ -134,7 +136,9 @@ 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": series.length > 0 && axes.length > 0
+            ? `Radar chart comparing ${series.map((s) => s.label).join(", ")} across ${axes.join(", ")}`
+            : "Radar chart with no data", ...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;
@@ -157,7 +161,11 @@ const RadarChart = ({ axes, series, size = 400, gridLevels = 5, maxValue: maxVal
                         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
+                    })), 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 && (jsx(ChartLegend, { items: series.map((s, idx) => ({
+                    key: `${s.label}-${idx}`,
+                    label: s.label,
+                    color: s.color,
+                })) })), 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 }))] }));
 };

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

@@ -8,20 +8,15 @@
 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",
-    // Legend container
-    legendStyle: "flex flex-wrap items-center justify-center gap-x-6 gap-y-2",
-    // Individual legend item
-    legendItemStyle: "flex items-center gap-2 text-sm",
-    // Colored dot in legend
-    legendDotStyle: "w-2.5 h-2.5 rounded-full shrink-0",
-    // Legend label text
-    legendLabelStyle: "text-[var(--color-text-secondary)]",
 };
 
 export { radarChartTheme };

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

@@ -22,14 +22,6 @@ export interface RadarChartThemeOverrides {
     axisColor?: string;
     /** Axis label CSS classes */
     labelStyle?: string;
-    /** Legend container CSS classes */
-    legendStyle?: string;
-    /** Legend item CSS classes */
-    legendItemStyle?: string;
-    /** Legend dot CSS classes */
-    legendDotStyle?: string;
-    /** Legend label CSS classes */
-    legendLabelStyle?: string;
 }
 /**
  * Full theme configuration (all fields required)

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

@@ -1,14 +1,18 @@
+"use client";
 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';
+import { ChartLegend } from '../shared/ChartLegend/ChartLegend.js';
 import { SCATTER_PLOT_DEFAULTS } from './ScatterPlot.types.js';
 import { getCategoryColor, scatterPlotTheme } from './ScatterPlot.theme.js';
+import { SCATTER_POINT_DURATION, SCATTER_POINT_STAGGER } from '../utils/animation-utils.js';
 
 /**
  * ScatterPlot Component
@@ -17,37 +21,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
@@ -125,6 +109,11 @@ showGrid = SCATTER_PLOT_DEFAULTS.showGrid, showXAxis = SCATTER_PLOT_DEFAULTS.sho
         });
         return configObj;
     }, [categories, chartColors]);
+    const legendItems = useMemo(() => categories.map((cat, idx) => ({
+        key: cat,
+        label: cat,
+        color: getCategoryColor(chartColors, idx),
+    })), [categories, chartColors]);
     const chartDataForAccessibility = useMemo(() => {
         return validData.map((point) => ({
             category: point.category || 'Point',
@@ -155,53 +144,63 @@ 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' }) }));
+        const emptyMessage = 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,
+            }, role: "img", "aria-label": `Empty scatter plot: ${emptyMessage}`, ...props, children: jsx("div", { className: theme.emptyStateStyle, children: emptyMessage }) }));
     }
-    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-xs fill-[var(--color-text-secondary)]", children: xLabel })), yLabel && showYAxis && (jsx("text", { x: 15, y: margin.top + innerHeight / 2, textAnchor: "middle", className: "text-xs 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 * SCATTER_POINT_STAGGER, duration: SCATTER_POINT_DURATION }, 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 }))] }), jsx(ChartLegend, { items: legendItems, className: "mt-4" }), 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.d.ts

@@ -10,10 +10,6 @@ export declare const scatterPlotTheme: {
     axisLabelStyle: string;
     dotStyle: string;
     dotHoverStyle: string;
-    legendContainerStyle: string;
-    legendItemStyle: string;
-    legendDotStyle: string;
-    legendLabelStyle: string;
     colors: string[];
 };
 /**

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

@@ -13,11 +13,6 @@ const scatterPlotTheme = {
     // Data point styles
     dotStyle: 'fill-opacity-70 stroke-white',
     dotHoverStyle: 'fill-opacity-100',
-    // Legend styles
-    legendContainerStyle: 'flex flex-wrap gap-3 mt-4 justify-center',
-    legendItemStyle: 'flex items-center gap-2',
-    legendDotStyle: 'w-3 h-3 rounded-full',
-    legendLabelStyle: 'text-sm text-[var(--color-text-secondary)]',
     // Default category colors using CSS variables
     colors: [
         'var(--color-primary)',
@@ -32,7 +27,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;
@@ -60,12 +54,12 @@ export declare const SCATTER_PLOT_DEFAULTS: {
     readonly gap: 4;
     readonly categoryGap: 16;
     readonly curved: true;
-    readonly curveType: import("../types/chart.types").CurveType;
+    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("../types/chart.types").ChartVariant;
+    readonly variant: import("..").ChartVariant;
     readonly enableKeyboardNavigation: true;
 };