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

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

@@ -1,16 +1,21 @@
+"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';
 import { useChartAccessibility } from '../hooks/useChartAccessibility.js';
 import { useChartValidation } from '../hooks/useChartValidation.js';
+import { useChartDimensions } from '../hooks/useChartDimensions.js';
 import { ChartErrorBoundary } from '../shared/ChartErrorBoundary/ChartErrorBoundary.js';
 import { XAxis } from '../shared/ChartAxis/XAxis.js';
 import { YAxis } from '../shared/ChartAxis/YAxis.js';
 import { HorizontalGrid } from '../shared/ChartGrid/HorizontalGrid.js';
 import { ChartTooltip } from '../shared/ChartTooltip/ChartTooltip.js';
+import { 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
@@ -37,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
@@ -45,11 +50,17 @@ stackOffset = STACKED_BAR_CHART_DEFAULTS.stackOffset,
 // Animation props
 showAnimation = STACKED_BAR_CHART_DEFAULTS.showAnimation, 
 // Base props
-className, title, description, enableKeyboardNavigation = STACKED_BAR_CHART_DEFAULTS.enableKeyboardNavigation, showValidationWarnings = process.env.NODE_ENV === "development", children, ...props }) => {
+className, title, description, enableKeyboardNavigation = STACKED_BAR_CHART_DEFAULTS.enableKeyboardNavigation, showValidationWarnings = process.env.NODE_ENV === "development", width, height, children, ...props }) => {
     var _a;
     // 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);
@@ -61,19 +72,21 @@ 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-xl", 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-sm font-semibold text-[var(--color-text-secondary)]", children: "Invalid Chart Data" })] }), jsx("p", { className: "text-sm 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) => {
+    const getSeriesFillColor = (index, key) => {
+        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-primary-400)",
@@ -85,7 +98,9 @@ className, title, description, enableKeyboardNavigation = STACKED_BAR_CHART_DEFA
         return colorVars[index % colorVars.length];
     };
     const containerRef = useRef(null);
-    const [dimensions, setDimensions] = useState({ width: 600, height: 400 });
+    // `measured` gates bar mount so motion captures geometry in the real
+    // coordinate space, not the 600×400 fallback (cold-load below-baseline bug).
+    const { dimensions, measured } = useChartDimensions(containerRef);
     const [hoveredCategory, setHoveredCategory] = useState(null);
     const isMobile = typeof window !== "undefined" &&
         ("ontouchstart" in window || navigator.maxTouchPoints > 0);
@@ -101,39 +116,26 @@ className, title, description, enableKeyboardNavigation = STACKED_BAR_CHART_DEFA
         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();
-        };
-    }, []);
     // Calculate dimensions
     const margin = useMemo(() => ({
         top: 15,
         right: showYAxis ? 20 : 0,
-        bottom: showXAxis ? 20 : 0,
+        bottom: showXAxis ? X_AXIS_MARGIN : 0,
         left: showYAxis ? 60 : 0,
     }), [showYAxis, showXAxis]);
     const innerWidth = Math.max(0, dimensions.width - margin.left - margin.right);
     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 = {};
@@ -169,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") {
@@ -189,8 +204,15 @@ 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) => {
-                var _a, _b;
+        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)
                     return null;
@@ -218,31 +240,37 @@ className, title, description, enableKeyboardNavigation = STACKED_BAR_CHART_DEFA
                 const pathD = isTopSegment
                     ? createRoundedTopBarPath(x, barY, barWidth, barHeight, barRadius)
                     : createRectPath(x, barY, barWidth, barHeight);
-                const fillColor = ((_b = config[key]) === null || _b === void 0 ? void 0 : _b.color) || getSeriesFillColor(keyIndex);
-                const delay = categoryIndex * BAR_STAGGER;
+                const fillColor = getSeriesFillColor(keyIndex, key);
+                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-background-tertiary)"
-                            : 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
                         const series = dataKeys.map((dataKey, idx) => {
-                            var _a, _b;
+                            var _a;
                             const rawValue = item[dataKey];
                             const value = typeof rawValue === "number" && isFinite(rawValue)
                                 ? rawValue
@@ -251,7 +279,7 @@ className, title, description, enableKeyboardNavigation = STACKED_BAR_CHART_DEFA
                                 key: dataKey,
                                 label: ((_a = config[dataKey]) === null || _a === void 0 ? void 0 : _a.label) || dataKey,
                                 value,
-                                color: ((_b = config[dataKey]) === null || _b === void 0 ? void 0 : _b.color) || getSeriesFillColor(idx),
+                                color: getSeriesFillColor(idx, dataKey),
                             };
                         });
                         // Calculate total
@@ -282,16 +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), ...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-xs 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: 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
+    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: [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,20 +15,20 @@ 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;
-    readonly dotRadius: 4;
+    readonly dotRadius: 3;
     readonly cellRadius: 4;
     readonly radius: 20;
     readonly strokeWidth: 2;
     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 stacked: false;
-    readonly variant: import("../types/chart.types").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,6 +1,8 @@
 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';
+export type { ChartDimensions, UseChartDimensionsReturn } 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.d.ts

@@ -0,0 +1,29 @@
+export interface ChartDimensions {
+    width: number;
+    height: number;
+}
+export interface UseChartDimensionsReturn {
+    /** Current container size. Starts at the fallback, corrected on measurement. */
+    dimensions: ChartDimensions;
+    /**
+     * `true` once the container has been measured with real (>0) width AND height.
+     *
+     * 🔴 Gate mount-animated SVG geometry (scaleY bars, scale-in dots, clip-sweep
+     * reveals) on this flag. Charts seed `dimensions` with a 600×400 fallback and
+     * only learn their true size after the ResizeObserver fires. `motion` elements
+     * capture their initial geometry and transform-origin at mount, so if they
+     * mount in the fallback coordinate space the entrance animation plays from the
+     * wrong place (e.g. bars rising from below the x-axis on cold load). Mounting
+     * the animated layer only when `measured` guarantees motion captures geometry
+     * in the final coordinate space. The measurement runs in a layout effect, so
+     * the corrected size lands synchronously before paint — no fallback frame is
+     * ever shown.
+     */
+    measured: boolean;
+}
+/**
+ * Measures a chart's container element and reports a `measured` flag once a real
+ * size is known. Replaces the per-chart inline ResizeObserver block so every
+ * Cartesian chart shares one correct implementation (see `measured` docs above).
+ */
+export declare function useChartDimensions(containerRef: React.RefObject<HTMLElement | HTMLDivElement | null>, fallback?: ChartDimensions): UseChartDimensionsReturn;

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

@@ -0,0 +1,43 @@
+"use client";
+import { useState, useEffect, useLayoutEffect } from 'react';
+
+// SSR-safe layout effect — charts only render meaningfully on the client, but
+// guarding avoids React's useLayoutEffect-on-server warning.
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+const FALLBACK = { width: 600, height: 400 };
+/**
+ * Measures a chart's container element and reports a `measured` flag once a real
+ * size is known. Replaces the per-chart inline ResizeObserver block so every
+ * Cartesian chart shares one correct implementation (see `measured` docs above).
+ */
+function useChartDimensions(containerRef, fallback = FALLBACK) {
+    const [dimensions, setDimensions] = useState(fallback);
+    const [measured, setMeasured] = useState(false);
+    useIsomorphicLayoutEffect(() => {
+        const updateDimensions = () => {
+            if (containerRef.current) {
+                const { width, height } = containerRef.current.getBoundingClientRect();
+                setDimensions({
+                    width: width || fallback.width,
+                    height: height || fallback.height,
+                });
+                if (width > 0 && height > 0) {
+                    setMeasured(true);
+                }
+            }
+        };
+        updateDimensions();
+        const resizeObserver = new ResizeObserver(updateDimensions);
+        if (containerRef.current) {
+            resizeObserver.observe(containerRef.current);
+        }
+        return () => {
+            resizeObserver.disconnect();
+        };
+        // fallback is read inside but is a stable default; ref identity is constant.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [containerRef]);
+    return { dimensions, measured };
+}
+
+export { useChartDimensions };

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';
@@ -39,7 +40,7 @@ class ChartErrorBoundary extends Component {
                 return this.props.fallback;
             }
             // Default error UI
-            return (jsxs("div", { className: cn("flex flex-col items-center justify-center p-6 border border-danger-200 bg-danger-50 rounded-lg text-center", this.props.className), role: "alert", "aria-live": "polite", children: [jsxs("div", { className: "flex items-center gap-2 mb-2", children: [jsx("svg", { className: "w-5 h-5 text-danger-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" }) }), jsx("h3", { className: "text-sm font-medium text-danger-800", children: "Chart Error" })] }), jsx("p", { className: "text-sm text-danger-600 mb-3", children: "Unable to render chart due to an error" }), this.props.showErrorDetails && this.state.error && (jsxs("details", { className: "w-full", children: [jsx("summary", { className: "text-xs text-danger-500 cursor-pointer hover:text-danger-700 mb-2", children: "Show error details" }), jsxs("div", { className: "text-left bg-danger-100 p-3 rounded border text-xs font-mono text-danger-800 overflow-auto max-h-32", children: [jsx("div", { className: "font-semibold mb-1", children: "Error:" }), jsx("div", { className: "mb-2", children: this.state.error.message }), ((_a = this.state.errorInfo) === null || _a === void 0 ? void 0 : _a.componentStack) && (jsxs(Fragment, { children: [jsx("div", { className: "font-semibold mb-1", children: "Component Stack:" }), jsx("pre", { className: "whitespace-pre-wrap text-xs", children: this.state.errorInfo.componentStack })] }))] })] })), jsx("button", { onClick: () => this.setState({ hasError: false, error: undefined, errorInfo: undefined }), className: "mt-3 px-3 py-1 text-xs bg-danger-600 text-white rounded hover:bg-danger-700 transition-colors", children: "Try Again" })] }));
+            return (jsxs("div", { className: cn("flex flex-col items-center justify-center p-6 border border-danger-200 bg-danger-50 rounded-lg text-center", this.props.className), role: "alert", "aria-live": "polite", children: [jsxs("div", { className: "flex items-center gap-2 mb-2", children: [jsx("svg", { className: "w-5 h-5 text-danger-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" }) }), jsx("h3", { className: "text-base font-medium text-danger-800", children: "Chart Error" })] }), jsx("p", { className: "text-base text-danger-600 mb-3", children: "Unable to render chart due to an error" }), this.props.showErrorDetails && this.state.error && (jsxs("details", { className: "w-full", children: [jsx("summary", { className: "text-sm text-danger-500 cursor-pointer hover:text-danger-700 mb-2", children: "Show error details" }), jsxs("div", { className: "text-left bg-danger-100 p-3 rounded border text-sm font-mono text-danger-800 overflow-auto max-h-32", children: [jsx("div", { className: "font-semibold mb-1", children: "Error:" }), jsx("div", { className: "mb-2", children: this.state.error.message }), ((_a = this.state.errorInfo) === null || _a === void 0 ? void 0 : _a.componentStack) && (jsxs(Fragment, { children: [jsx("div", { className: "font-semibold mb-1", children: "Component Stack:" }), jsx("pre", { className: "whitespace-pre-wrap text-sm", children: this.state.errorInfo.componentStack })] }))] })] })), jsx("button", { onClick: () => this.setState({ hasError: false, error: undefined, errorInfo: undefined }), className: "mt-3 px-3 py-1 text-sm bg-danger-600 text-white rounded hover:bg-danger-700 transition-colors", children: "Try Again" })] }));
         }
         return this.props.children;
     }

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>;