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

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useRef, useMemo, useCallback } from 'react';
 import { motion } from 'motion/react';
@@ -8,8 +9,10 @@ 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
@@ -106,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',
@@ -136,11 +144,12 @@ showGrid = SCATTER_PLOT_DEFAULTS.showGrid, showXAxis = SCATTER_PLOT_DEFAULTS.sho
     }, [xMin, xMax]);
     // Return empty state if no data
     if (validData.length === 0) {
+        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,
-            }, ...props, children: jsx("div", { className: theme.emptyStateStyle, children: data.length === 0 ? 'No data available' : 'No valid data points' }) }));
+            }, 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: height === undefined ? '400px' : undefined,
@@ -152,7 +161,7 @@ showGrid = SCATTER_PLOT_DEFAULTS.showGrid, showXAxis = SCATTER_PLOT_DEFAULTS.sho
                             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) => {
+                            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}`,
@@ -191,7 +200,7 @@ showGrid = SCATTER_PLOT_DEFAULTS.showGrid, showXAxis = SCATTER_PLOT_DEFAULTS.sho
                                     }
                                     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" }))] }));
+                        }), 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)',

package/dist/components/charts/StackedBarChart/StackedBarChart.js

@@ -1,5 +1,6 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useEffect, useRef, useMemo } from 'react';
+import { useState, useId, useEffect, useRef, useMemo } from 'react';
 import { useReducedMotion, motion } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
 import { useTooltipPosition } from '../hooks/useTooltipPosition.js';
@@ -11,8 +12,10 @@ 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 { resolveLegendPosition, ChartLegend } from '../shared/ChartLegend/ChartLegend.js';
 import { STACKED_BAR_CHART_DEFAULTS } from './StackedBarChart.types.js';
 import { X_AXIS_MARGIN } from '../types/chart.types.js';
+import { RISE_FROM_BASELINE, barEntranceTransition, STACKED_BAR_STAGGER } from '../utils/animation-utils.js';
 import { ExclamationTriangleIcon } from '@heroicons/react/20/solid';
 
 // Pure helper functions moved to module level to avoid recreation per render
@@ -39,7 +42,7 @@ const createRectPath = (x, y, width, height) => {
 };
 const StackedBarChart = ({ data, config, 
 // Standardized display props with defaults
-showGrid = STACKED_BAR_CHART_DEFAULTS.showGrid, showXAxis = STACKED_BAR_CHART_DEFAULTS.showXAxis, showYAxis = STACKED_BAR_CHART_DEFAULTS.showYAxis, minValue: propMinValue, maxValue: propMaxValue, variant = STACKED_BAR_CHART_DEFAULTS.variant, theme, 
+showGrid = STACKED_BAR_CHART_DEFAULTS.showGrid, showXAxis = STACKED_BAR_CHART_DEFAULTS.showXAxis, showYAxis = STACKED_BAR_CHART_DEFAULTS.showYAxis, legend, minValue: propMinValue, maxValue: propMaxValue, variant = STACKED_BAR_CHART_DEFAULTS.variant, theme, 
 // Bar visual props
 barRadius = STACKED_BAR_CHART_DEFAULTS.barRadius, categoryGap = STACKED_BAR_CHART_DEFAULTS.categoryGap, 
 // Stacking behavior
@@ -52,6 +55,12 @@ className, title, description, enableKeyboardNavigation = STACKED_BAR_CHART_DEFA
     // Animation state
     const shouldReduceMotion = useReducedMotion();
     const [hasAnimated, setHasAnimated] = useState(false);
+    const isGradientVariant = variant === "gradient";
+    // Per-instance ids so multiple charts on a page don't share gradient/filter defs.
+    const rawId = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+    const stackGradientId = (index) => `${rawId}-stack-gradient-${index}`;
+    const columnShadowId = `${rawId}-column-shadow`;
+    const columnGlowId = `${rawId}-column-glow`;
     useEffect(() => {
         if (!shouldReduceMotion && showAnimation) {
             setHasAnimated(true);
@@ -63,17 +72,7 @@ className, title, description, enableKeyboardNavigation = STACKED_BAR_CHART_DEFA
     // Validate data and config with error handling
     const { validation, sanitizedData, isValid, hasWarnings, safeScale, safeMath, } = useChartValidation(data, config, {
         autoSanitize: true,
-        logWarnings: true,
     });
-    // Early return for invalid data
-    if (!isValid) {
-        return (jsxs("div", { className: cn("chart-container flex flex-col items-center justify-center p-6 border border-border rounded-lg text-2xl", className), role: "alert", "aria-live": "polite", ...props, children: [jsxs("div", { className: "flex flex-col items-center gap-4 mb-1", children: [jsx(ExclamationTriangleIcon, { className: "size-6 text-[var(--color-danger)]" }), jsx("div", { className: "text-base font-semibold text-[var(--color-text-secondary)]", children: "Invalid Chart Data" })] }), jsx("p", { className: "text-base text-[var(--color-text-secondary)]/70 mb-2", children: ((_a = validation.errors[0]) === null || _a === void 0 ? void 0 : _a.message) ||
-                        "Unable to render chart due to data validation errors" })] }));
-    }
-    // Early return for empty data
-    if (!sanitizedData || sanitizedData.length === 0) {
-        return (jsx("div", { className: cn("chart-container flex items-center justify-center text-[var(--color-text-muted)]", className), role: "img", "aria-label": "Empty stacked bar chart", ...props, children: jsx("span", { children: "No data available" }) }));
-    }
     // Color palette using CSS variables
     const getSeriesFillColor = (index, key) => {
         var _a;
@@ -128,8 +127,15 @@ className, title, description, enableKeyboardNavigation = STACKED_BAR_CHART_DEFA
     const innerHeight = Math.max(0, dimensions.height - margin.top - margin.bottom);
     // Get all data keys from config
     const dataKeys = useMemo(() => Object.keys(config || {}), [config]);
-    // Animation timing
-    const BAR_STAGGER = 0.08;
+    const resolvedLegendPosition = resolveLegendPosition(legend, config || {});
+    const legendItems = dataKeys.map((key, index) => {
+        var _a, _b;
+        return ({
+            key,
+            label: (_b = (_a = config === null || config === void 0 ? void 0 : config[key]) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : key,
+            color: getSeriesFillColor(index, key),
+        });
+    });
     // Calculate stacked values for each data point
     const getStackedValues = useMemo(() => {
         const stackedData = {};
@@ -165,6 +171,19 @@ className, title, description, enableKeyboardNavigation = STACKED_BAR_CHART_DEFA
         });
         return max;
     }, [sanitizedData, dataKeys]);
+    // --- Every hook above this line runs unconditionally, every render, in the
+    // same order. Only NOW — after the last hook — do we branch on validity, so
+    // a chart going from populated → empty/invalid data (a common loading-state
+    // transition) never changes its hook count mid-lifetime. See BarChart.tsx.
+    // Early return for invalid data
+    if (!isValid) {
+        return (jsxs("div", { className: cn("chart-container flex flex-col items-center justify-center p-6 border border-border rounded-lg text-2xl", className), role: "alert", "aria-live": "polite", ...props, children: [jsxs("div", { className: "flex flex-col items-center gap-4 mb-1", children: [jsx(ExclamationTriangleIcon, { className: "size-6 text-[var(--color-danger)]" }), jsx("div", { className: "text-base font-semibold text-[var(--color-text-secondary)]", children: "Invalid Chart Data" })] }), jsx("p", { className: "text-base text-[var(--color-text-secondary)]/70 mb-2", children: ((_a = validation.errors[0]) === null || _a === void 0 ? void 0 : _a.message) ||
+                        "Unable to render chart due to data validation errors" })] }));
+    }
+    // Early return for empty data
+    if (!sanitizedData || sanitizedData.length === 0) {
+        return (jsx("div", { className: cn("chart-container flex items-center justify-center text-[var(--color-text-muted)]", className), role: "img", "aria-label": "Empty stacked bar chart", ...props, children: jsx("span", { children: "No data available" }) }));
+    }
     // Apply stackOffset if needed
     const getScaledMaxValue = () => {
         if (stackOffset === "expand") {
@@ -185,7 +204,14 @@ className, title, description, enableKeyboardNavigation = STACKED_BAR_CHART_DEFA
         const shouldReduceOpacity = isAnyBarHovered && !isHovered;
         const isFocused = isKeyboardMode && focusedElementIndex === categoryIndex;
         const range = maxValue - minValue;
-        return (jsx("g", { children: dataKeys.map((key, keyIndex) => {
+        return (jsx("g", { 
+            // Soft lift shadow on the whole column at rest; a colored glow halo when
+            // hovered. A single column-level filter avoids muddy per-segment shadows.
+            filter: isGradientVariant
+                ? isHovered
+                    ? `url(#${columnGlowId})`
+                    : `url(#${columnShadowId})`
+                : undefined, style: isGradientVariant ? { overflow: "visible" } : undefined, children: dataKeys.map((key, keyIndex) => {
                 var _a;
                 const stackData = (_a = getStackedValues[key]) === null || _a === void 0 ? void 0 : _a[categoryIndex];
                 if (!stackData)
@@ -215,25 +241,31 @@ className, title, description, enableKeyboardNavigation = STACKED_BAR_CHART_DEFA
                     ? createRoundedTopBarPath(x, barY, barWidth, barHeight, barRadius)
                     : createRectPath(x, barY, barWidth, barHeight);
                 const fillColor = getSeriesFillColor(keyIndex, key);
-                const delay = categoryIndex * BAR_STAGGER;
+                const delay = categoryIndex * STACKED_BAR_STAGGER;
                 return (jsx(motion.path, { d: pathD, initial: showAnimation && !shouldReduceMotion
                         ? { scaleY: 0, opacity: 0 }
                         : { scaleY: 1, opacity: 1 }, animate: {
                         scaleY: 1,
-                        opacity: 1,
-                    }, transition: {
-                        type: "spring",
-                        stiffness: 100,
-                        damping: 20,
-                        delay,
-                    }, className: cn("transition-colors duration-200 cursor-pointer", isFocused && "stroke-2"), style: {
-                        originY: 1,
-                        transformOrigin: "bottom",
-                        fill: shouldReduceOpacity
-                            ? "var(--color-surface-sunken)"
-                            : fillColor,
-                        opacity: shouldReduceOpacity ? 0.9 : 1,
-                        stroke: isFocused ? "var(--color-primary)" : "none",
+                        // Hover dim lives in `animate` (not `style`): motion.path freezes
+                        // plain style values at mount and ignores re-render changes.
+                        opacity: shouldReduceOpacity ? (isGradientVariant ? 0.42 : 0.9) : 1,
+                    }, transition: barEntranceTransition(delay, hasAnimated), className: cn(isGradientVariant
+                        ? "transition-all duration-300 ease-out cursor-pointer"
+                        : "transition-colors duration-200 cursor-pointer", isFocused && "stroke-2"), style: {
+                        ...RISE_FROM_BASELINE,
+                        fill: isGradientVariant
+                            ? `url(#${stackGradientId(keyIndex)})`
+                            : shouldReduceOpacity
+                                ? "var(--color-surface-sunken)"
+                                : fillColor,
+                        // Hairline white seam separates stacked segments in gradient mode.
+                        stroke: isFocused
+                            ? "var(--color-primary)"
+                            : isGradientVariant
+                                ? "rgba(255,255,255,0.16)"
+                                : "none",
+                        strokeWidth: isFocused ? 2 : isGradientVariant ? 1 : undefined,
+                        vectorEffect: "non-scaling-stroke",
                     }, onMouseEnter: (e) => {
                         setHoveredCategory(categoryIndex);
                         // Create tooltip content with all series
@@ -278,20 +310,25 @@ className, title, description, enableKeyboardNavigation = STACKED_BAR_CHART_DEFA
                     } }, key));
             }) }, categoryIndex));
     };
-    return (jsx(ChartErrorBoundary, { className: className, showErrorDetails: process.env.NODE_ENV === "development", children: jsxs("div", { ref: containerRef, className: cn("chart-container w-full h-full", className), style: {
+    return (jsx(ChartErrorBoundary, { className: className, showErrorDetails: process.env.NODE_ENV === "development", children: jsxs("div", { ref: containerRef, className: cn("chart-container w-full h-full flex flex-col", 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, ...props, children: [descriptionProps && jsx("div", { ...descriptionProps }), showValidationWarnings && hasWarnings && (jsxs("div", { className: "absolute top-2 left-2 right-2 z-10 p-2 bg-[var(--color-warning-50)] border border-[var(--color-warning-200)] rounded text-sm text-[var(--color-warning)] shadow-sm", children: [jsx("strong", { children: "Chart Warnings:" }), jsx("ul", { className: "mt-1", children: validation.warnings.map((warning, index) => (jsxs("li", { children: ["\u2022 ", warning.message] }, index))) })] })), jsxs("svg", { width: "100%", height: "100%", viewBox: `0 0 ${dimensions.width} ${dimensions.height}`, children: [jsx(HorizontalGrid, { show: showGrid, x: margin.left, y: margin.top, width: innerWidth, height: innerHeight, lineCount: 5 }), jsx(YAxis, { show: showYAxis, min: minValue, max: maxValue, x: margin.left, y: margin.top, height: innerHeight, showGrid: false, gridWidth: innerWidth, tickFormatter: (value) => {
-                                if (stackOffset === "expand")
-                                    return `${value}%`;
-                                if (Math.abs(value) >= 1000)
-                                    return `${(value / 1000).toFixed(0)}k`;
-                                return value.toString();
-                            } }), jsx("g", { className: "chart-bars", children: measured &&
-                                sanitizedData.map((item, index) => {
-                                    const x = margin.left + index * (barWidth + categoryGap);
-                                    return renderStackedBar(item, index, x);
-                                }) }), jsx(XAxis, { show: showXAxis, data: sanitizedData, x: margin.left, y: margin.top + innerHeight, width: innerWidth, categoryWidth: barWidth, categoryGap: categoryGap })] }), jsx(ChartTooltip, { tooltipRef: tooltipRef, content: tooltipData === null || tooltipData === void 0 ? void 0 : tooltipData.content, active: !!tooltipData, position: tooltipData
+            }, ...chartAccessibilityProps, onMouseEnter: handleMouseInteraction, onMouseMove: handleMouseInteraction, ...props, children: [resolvedLegendPosition === "top" && (jsx(ChartLegend, { items: legendItems, className: "shrink-0 pb-2" })), descriptionProps && jsx("div", { ...descriptionProps }), showValidationWarnings && hasWarnings && (jsxs("div", { className: "absolute top-2 left-2 right-2 z-10 p-2 bg-[var(--color-warning-50)] border border-[var(--color-warning-200)] rounded text-sm text-[var(--color-warning)] shadow-sm", children: [jsx("strong", { children: "Chart Warnings:" }), jsx("ul", { className: "mt-1", children: validation.warnings.map((warning, index) => (jsxs("li", { children: ["\u2022 ", warning.message] }, index))) })] })), jsx("div", { className: "relative flex-1 min-h-0", children: jsxs("svg", { width: "100%", height: "100%", viewBox: `0 0 ${dimensions.width} ${dimensions.height}`, 
+                        // Let the column lift shadow / hover glow paint past the plot edges.
+                        className: isGradientVariant ? "overflow-visible" : undefined, children: [isGradientVariant && (jsxs("defs", { children: [dataKeys.map((key, index) => {
+                                        const color = getSeriesFillColor(index, key);
+                                        return (jsxs("linearGradient", { id: stackGradientId(index), x1: "0", y1: "0", x2: "0", y2: "1", children: [jsx("stop", { offset: "0%", stopColor: color, stopOpacity: "0.92" }), jsx("stop", { offset: "45%", stopColor: color, stopOpacity: "1" }), jsx("stop", { offset: "100%", stopColor: color, stopOpacity: "0.84" })] }, key));
+                                    }), jsx("filter", { id: columnShadowId, x: "-40%", y: "-25%", width: "180%", height: "160%", colorInterpolationFilters: "sRGB", children: jsx("feDropShadow", { dx: "0", dy: "10", stdDeviation: "9", floodColor: "var(--color-neutral-950)", floodOpacity: "0.16" }) }), jsxs("filter", { id: columnGlowId, x: "-50%", y: "-45%", width: "200%", height: "200%", colorInterpolationFilters: "sRGB", children: [jsx("feDropShadow", { dx: "0", dy: "0", stdDeviation: "5", floodColor: getSeriesFillColor(0, dataKeys[0]), floodOpacity: "0.4" }), jsx("feDropShadow", { dx: "0", dy: "10", stdDeviation: "9", floodColor: "var(--color-neutral-950)", floodOpacity: "0.14" })] })] })), jsx(HorizontalGrid, { show: showGrid, x: margin.left, y: margin.top, width: innerWidth, height: innerHeight, lineCount: 5 }), jsx(YAxis, { show: showYAxis, min: minValue, max: maxValue, x: margin.left, y: margin.top, height: innerHeight, showGrid: false, gridWidth: innerWidth, tickFormatter: (value) => {
+                                    if (stackOffset === "expand")
+                                        return `${value}%`;
+                                    if (Math.abs(value) >= 1000)
+                                        return `${(value / 1000).toFixed(0)}k`;
+                                    return value.toString();
+                                } }), jsx("g", { className: "chart-bars", children: measured &&
+                                    sanitizedData.map((item, index) => {
+                                        const x = margin.left + index * (barWidth + categoryGap);
+                                        return renderStackedBar(item, index, x);
+                                    }) }), jsx(XAxis, { show: showXAxis, data: sanitizedData, x: margin.left, y: margin.top + innerHeight, width: innerWidth, categoryWidth: barWidth, categoryGap: categoryGap })] }) }), resolvedLegendPosition === "bottom" && (jsx(ChartLegend, { items: legendItems, className: "shrink-0 pt-2" })), jsx(ChartTooltip, { tooltipRef: tooltipRef, content: tooltipData === null || tooltipData === void 0 ? void 0 : tooltipData.content, active: !!tooltipData, position: tooltipData
                         ? { x: tooltipData.x, y: tooltipData.y }
                         : { x: 0, y: 0 } }), children] }) }));
 };

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

@@ -1,4 +1,4 @@
-import { BaseChartProps, StandardChartDisplayProps, StandardVisualProps, BarChartSpecificProps } from "../types/chart.types";
+import { BaseChartProps, StandardChartDisplayProps, StandardVisualProps, BarChartSpecificProps, ChartVariant } from "../types/chart.types";
 export type StackOffset = "none" | "expand" | "wiggle" | "silhouette";
 export interface StackedBarChartProps extends BaseChartProps, StandardChartDisplayProps, StandardVisualProps, BarChartSpecificProps {
     barRadius?: number;
@@ -15,6 +15,7 @@ export declare const STACKED_BAR_CHART_DEFAULTS: {
     readonly orientation: "horizontal" | "vertical";
     readonly stackOffset: StackOffset;
     readonly showAnimation: true;
+    readonly variant: ChartVariant;
     readonly showGrid: true;
     readonly showXAxis: true;
     readonly showYAxis: true;
@@ -28,7 +29,6 @@ export declare const STACKED_BAR_CHART_DEFAULTS: {
     readonly showStroke: true;
     readonly showDots: false;
     readonly stacked: false;
-    readonly variant: import("..").ChartVariant;
     readonly enableKeyboardNavigation: true;
 };
 export type StackedBarChartData = BaseChartProps["data"][0];

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

@@ -9,6 +9,9 @@ const STACKED_BAR_CHART_DEFAULTS = {
     orientation: CHART_DEFAULTS.orientation,
     stackOffset: "none",
     showAnimation: true,
+    // Premium look by default (per-segment gradient + lift shadow + hover glow),
+    // matching BarChart/AreaChart. Pass variant="default" for flat fills.
+    variant: "gradient",
 };
 
 export { STACKED_BAR_CHART_DEFAULTS };

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

@@ -1,7 +1,7 @@
 export { useChartTheme } from './useChartTheme';
 export { useChartAccessibility } from './useChartAccessibility';
 export { useTooltipPosition } from './useTooltipPosition';
-export { useChartValidation, useChartDataValidation, useChartValidationProduction } from './useChartValidation';
+export { useChartValidation } from './useChartValidation';
 export { useChartScales } from './useChartScales';
 export type { UseChartScalesOptions, UseChartScalesReturn, ChartScales } from './useChartScales';
 export { useChartDimensions } from './useChartDimensions';

package/dist/components/charts/hooks/useChartAccessibility.js

@@ -1,3 +1,4 @@
+"use client";
 import { useState, useRef, useCallback, useMemo } from 'react';
 
 function useChartAccessibility({ chartType, data, config, title, description, enableKeyboardNavigation = true, }) {

package/dist/components/charts/hooks/useChartDimensions.js

@@ -1,3 +1,4 @@
+"use client";
 import { useState, useEffect, useLayoutEffect } from 'react';
 
 // SSR-safe layout effect — charts only render meaningfully on the client, but

package/dist/components/charts/hooks/useChartScales.js

@@ -1,3 +1,4 @@
+"use client";
 import { useMemo } from 'react';
 import { useChartValidation } from './useChartValidation.js';
 
@@ -10,7 +11,6 @@ function useChartScales(options) {
     // Use validation hook for data sanitization and safe calculations
     const { validation, sanitizedData, isValid, hasWarnings, safeScale, safeMath, } = useChartValidation(data, config, {
         autoSanitize: true,
-        logWarnings: true,
     });
     // Get all data keys from config
     const dataKeys = Object.keys(config || {});

package/dist/components/charts/hooks/useChartTheme.js

@@ -1,3 +1,4 @@
+"use client";
 import { useMemo } from 'react';
 import { chartTheme } from '../theme/chart.theme.js';
 

package/dist/components/charts/hooks/useChartValidation.d.ts

@@ -63,12 +63,4 @@ interface UseChartValidationReturn {
  * Hook for comprehensive chart validation and error handling
  */
 export declare function useChartValidation(data: unknown, config: unknown, options?: UseChartValidationOptions): UseChartValidationReturn;
-/**
- * Simplified hook for basic chart validation
- */
-export declare function useChartDataValidation(data: unknown, config: unknown): UseChartValidationReturn;
-/**
- * Hook for production chart validation (no console warnings)
- */
-export declare function useChartValidationProduction(data: unknown, config: unknown, onError?: (errors: ChartValidationError[]) => void): UseChartValidationReturn;
 export {};

package/dist/components/charts/hooks/useChartValidation.js

@@ -1,3 +1,4 @@
+"use client";
 import { useMemo, useEffect, useCallback } from 'react';
 import { validateChart, sanitizeChartData, calculateSafeScaleRange, SafeMath } from '../utils/chart-validation.js';
 

package/dist/components/charts/hooks/useTooltipPosition.js

@@ -1,3 +1,4 @@
+"use client";
 import { useState, useRef, useEffect, useCallback } from 'react';
 
 // Optimized animation frame throttle for smooth movement

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

@@ -12,7 +12,7 @@ export { RadarChart } from "./RadarChart";
 export { ComboChart } from "./ComboChart";
 export { ActivityRings } from "./ActivityRings";
 export { ChartTooltip } from "./shared/ChartTooltip";
-export { ChartLegend, ChartLegendContent } from "./shared/ChartLegend";
+export { ChartLegend } from "./shared/ChartLegend";
 export { XAxis, YAxis } from "./shared/ChartAxis";
 export { ChartText } from "./shared/ChartText";
 export { ChartMarker } from "./shared/ChartMarker";
@@ -24,9 +24,9 @@ export { useChartAccessibility } from "./hooks/useChartAccessibility";
 export { useChartValidation } from "./hooks/useChartValidation";
 export { generateColorPalette, getContrastColor } from "./utils/color-utils";
 export { processHeatmapData, calculateIntensity, createGridMatrix, getDefaultTooltipContent, formatAxisLabel, generateSampleData, } from "./Heatmap/utils/heatmapUtils";
-export type { ChartDataPoint, ChartConfig, ChartVariant, CurveType, BaseChartProps, StandardChartDisplayProps, StandardVisualProps, BarChartSpecificProps, StandardAxisConfig, ChartThemeOverrides, CHART_DEFAULTS, } from "./types/chart.types";
+export type { ChartDataPoint, ChartConfig, ChartVariant, CurveType, ChartLegendPosition, BaseChartProps, StandardChartDisplayProps, StandardVisualProps, BarChartSpecificProps, StandardAxisConfig, ChartThemeOverrides, CHART_DEFAULTS, } from "./types/chart.types";
 export type { ChartTooltipProps, ChartTooltipContentProps, } from "./shared/ChartTooltip/ChartTooltip.types";
-export type { ChartLegendProps, ChartLegendContentProps, } from "./shared/ChartLegend/ChartLegend.types";
+export type { ChartLegendProps, ChartLegendItem, } from "./shared/ChartLegend/ChartLegend.types";
 export type { BaseAxisProps, XAxisProps, YAxisProps, AxisTickProps, } from "./shared/ChartAxis/ChartAxis.types";
 export type { ChartTextProps, ChartTextTheme, } from "./shared/ChartText/ChartText.types";
 export type { ChartMarkerProps, ChartMarkerTheme, } from "./shared/ChartMarker/ChartMarker.types";

package/dist/components/charts/index.js

@@ -9,8 +9,7 @@ export { MultiSegmentDonutChart } from './DonutChart/MultiSegmentDonutChart.js';
 export { Heatmap } from './Heatmap/Heatmap.js';
 import './Heatmap/HeatmapCell.js';
 import 'react/jsx-runtime';
-import 'clsx';
-import 'tailwind-merge';
+import '../../utils/cn.js';
 export { calculateIntensity, createGridMatrix, formatAxisLabel, generateSampleData, getDefaultTooltipContent, processHeatmapData } from './Heatmap/utils/heatmapUtils.js';
 export { FunnelChart } from './FunnelChart/FunnelChart.js';
 export { ScatterPlot } from './ScatterPlot/ScatterPlot.js';
@@ -19,7 +18,6 @@ export { ComboChart } from './ComboChart/ComboChart.js';
 export { ActivityRings } from './ActivityRings/ActivityRings.js';
 export { ChartTooltip } from './shared/ChartTooltip/ChartTooltip.js';
 export { ChartLegend } from './shared/ChartLegend/ChartLegend.js';
-export { ChartLegendContent } from './shared/ChartLegend/ChartLegendContent.js';
 export { XAxis } from './shared/ChartAxis/XAxis.js';
 export { YAxis } from './shared/ChartAxis/YAxis.js';
 export { ChartText } from './shared/ChartText/ChartText.js';

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

@@ -1,7 +1,9 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { AnimatePresence, motion } from 'motion/react';
 import { cn } from '../../../../utils/cn.js';
 import { chartCrosshairTheme } from './ChartCrosshair.theme.js';
+import { CROSSHAIR_FADE_TRANSITION, CROSSHAIR_FOLLOW_TRANSITION } from '../../utils/animation-utils.js';
 
 /**
  * ChartCrosshair component for rendering crosshair lines in charts
@@ -10,22 +12,13 @@ import { chartCrosshairTheme } from './ChartCrosshair.theme.js';
 const ChartCrosshair = ({ show, x, y, margin, innerWidth, innerHeight, showHorizontal = false, strokeColor = "#6b7280", strokeWidth = 1, strokeDasharray = "4 4", opacity = 0.4, className, }) => {
     const theme = chartCrosshairTheme;
     const baseClasses = cn(theme.baseStyle, className);
-    return (jsx(AnimatePresence, { children: show && (jsxs(motion.g, { className: "chart-crosshair", initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: {
-                duration: 0.3,
-                ease: "easeInOut"
-            }, children: [jsx(motion.line, { x1: x, y1: margin.top, x2: x, y2: margin.top + innerHeight, stroke: strokeColor, strokeWidth: strokeWidth, strokeDasharray: strokeDasharray, opacity: opacity, className: cn(baseClasses, theme.verticalLine), animate: {
+    return (jsx(AnimatePresence, { children: show && (jsxs(motion.g, { className: "chart-crosshair", initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: CROSSHAIR_FADE_TRANSITION, children: [jsx(motion.line, { x1: x, y1: margin.top, x2: x, y2: margin.top + innerHeight, stroke: strokeColor, strokeWidth: strokeWidth, strokeDasharray: strokeDasharray, opacity: opacity, className: cn(baseClasses, theme.verticalLine), initial: false, animate: {
                         x1: x,
                         x2: x
-                    }, transition: {
-                        duration: 0.2,
-                        ease: "easeOut"
-                    } }), showHorizontal && y !== undefined && (jsx(motion.line, { x1: margin.left, y1: y, x2: margin.left + innerWidth, y2: y, stroke: strokeColor, strokeWidth: strokeWidth, strokeDasharray: strokeDasharray, opacity: opacity, className: cn(baseClasses, theme.horizontalLine), animate: {
+                    }, transition: CROSSHAIR_FOLLOW_TRANSITION }), showHorizontal && y !== undefined && (jsx(motion.line, { x1: margin.left, y1: y, x2: margin.left + innerWidth, y2: y, stroke: strokeColor, strokeWidth: strokeWidth, strokeDasharray: strokeDasharray, opacity: opacity, className: cn(baseClasses, theme.horizontalLine), initial: false, animate: {
                         y1: y,
                         y2: y
-                    }, transition: {
-                        duration: 0.2,
-                        ease: "easeOut"
-                    } }))] })) }));
+                    }, transition: CROSSHAIR_FOLLOW_TRANSITION }))] })) }));
 };
 
 export { ChartCrosshair };

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { Component } from 'react';
 import { cn } from '../../../../utils/cn.js';

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

@@ -1,7 +1,10 @@
 import React from 'react';
+import type { ChartConfig, ChartLegendPosition } from '../../types/chart.types';
 import { ChartLegendProps } from './ChartLegend.types';
 /**
- * Basic ChartLegend component - minimal implementation
- * TODO: Enhance with full legend functionality when needed
+ * Resolves the effective legend position: an explicit `legend` prop wins,
+ * otherwise defaults to `'bottom'` for multi-series `config` and `'none'`
+ * for single-series (a lone series' name rarely needs a dedicated key).
  */
+export declare function resolveLegendPosition(legend: ChartLegendPosition | undefined, config: ChartConfig): ChartLegendPosition;
 export declare const ChartLegend: React.FC<ChartLegendProps>;

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

@@ -1,28 +1,21 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { cn } from '../../../../utils/cn.js';
+import { chartTheme } from '../../theme/chart.theme.js';
 
 /**
- * Basic ChartLegend component - minimal implementation
- * TODO: Enhance with full legend functionality when needed
+ * Resolves the effective legend position: an explicit `legend` prop wins,
+ * otherwise defaults to `'bottom'` for multi-series `config` and `'none'`
+ * for single-series (a lone series' name rarely needs a dedicated key).
  */
-const ChartLegend = ({ content, className, wrapperStyle, layout = 'horizontal', align = 'center', verticalAlign = 'bottom', ...props }) => {
-    if (!content) {
+function resolveLegendPosition(legend, config) {
+    if (legend)
+        return legend;
+    return Object.keys(config).length > 1 ? 'bottom' : 'none';
+}
+const ChartLegend = ({ items, className }) => {
+    if (items.length === 0)
         return null;
-    }
-    const alignClasses = {
-        left: 'justify-start',
-        center: 'justify-center',
-        right: 'justify-end',
-    };
-    const verticalAlignClasses = {
-        top: 'items-start',
-        middle: 'items-center',
-        bottom: 'items-end',
-    };
-    const layoutClasses = {
-        horizontal: 'flex-row',
-        vertical: 'flex-col',
-    };
-    return (jsx("div", { className: `flex ${layoutClasses[layout]} ${alignClasses[align]} ${verticalAlignClasses[verticalAlign]} ${className || ''}`, style: wrapperStyle, ...props, children: content }));
+    return (jsx("div", { className: cn(chartTheme.legend.container, className), children: items.map((item) => (jsxs("div", { className: chartTheme.legend.item, children: [jsx("span", { className: chartTheme.legend.dot, style: { backgroundColor: item.color } }), jsx("span", { className: chartTheme.legend.label, children: item.label })] }, item.key))) }));
 };
 
-export { ChartLegend };
+export { ChartLegend, resolveLegendPosition };

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

@@ -1,27 +1,10 @@
-import { ReactNode } from 'react';
-/**
- * Individual payload item for chart legend entries
- */
-export interface ChartLegendPayloadItem {
-    value?: string;
-    type?: string;
-    id?: string;
-    color?: string;
-    dataKey?: string;
-    payload?: Record<string, unknown>;
-    [key: string]: unknown;
+/** One resolved legend entry — already-resolved CSS color, ready to render. */
+export interface ChartLegendItem {
+    key: string;
+    label: string;
+    color: string;
 }
 export interface ChartLegendProps {
-    content?: ReactNode;
-    wrapperStyle?: React.CSSProperties;
-    iconType?: 'line' | 'rect' | 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye';
-    layout?: 'horizontal' | 'vertical';
-    align?: 'left' | 'center' | 'right';
-    verticalAlign?: 'top' | 'middle' | 'bottom';
-    className?: string;
-}
-export interface ChartLegendContentProps {
-    payload?: ChartLegendPayloadItem[];
-    nameKey?: string;
+    items: ChartLegendItem[];
     className?: string;
 }

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

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

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
 import { cn } from '../../../../utils/cn.js';

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { cn } from '../../../../utils/cn.js';