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

package/dist/components/charts/{shared/ChartContainer/ChartContainer.js → ComboChart/ComboChartCanvas.js}

@@ -1,22 +1,24 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { createContext, useRef, useState, useEffect, useMemo, useCallback, useContext } from 'react';
-import { cn } from '../../../../utils/cn.js';
-import { useTooltipPosition } from '../../hooks/useTooltipPosition.js';
-import { useChartAccessibility } from '../../hooks/useChartAccessibility.js';
-import { ChartErrorBoundary } from '../ChartErrorBoundary/ChartErrorBoundary.js';
-import { XAxis } from '../ChartAxis/XAxis.js';
-import { YAxis } from '../ChartAxis/YAxis.js';
-import { HorizontalGrid } from '../ChartGrid/HorizontalGrid.js';
-import { ChartTooltip } from '../ChartTooltip/ChartTooltip.js';
+import { createContext, useRef, useState, useMemo, useCallback, useContext } from '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 { 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';
 
-const ChartContext = createContext(null);
+const ComboChartContext = createContext(null);
 /**
  * Hook to access chart context from renderers
  */
-const useChartContext = () => {
-    const context = useContext(ChartContext);
+const useComboChartContext = () => {
+    const context = useContext(ComboChartContext);
     if (!context) {
-        throw new Error('useChartContext must be used within a ChartContainer');
+        throw new Error('useComboChartContext must be used within a ComboChartCanvas');
     }
     return context;
 };
@@ -29,15 +31,26 @@ const defaultYAxisTickFormatter = (value) => {
     return value.toString();
 };
 /**
- * ChartContainer Component
+ * ComboChartCanvas
  *
- * Manages SVG container, axes, grid, tooltip, dimensions, and provides
- * context to child rendering components (BarRenderer, LineRenderer, etc.)
+ * ComboChart's own SVG canvas — manages the SVG, axes, grid, tooltip,
+ * dimensions, and provides context to its rendering components (BarRenderer,
+ * LineRenderer). This is not general chart infrastructure: every other chart
+ * type renders its own div/svg directly and measures itself independently
+ * (CLAUDE.md §19) — this exists specifically so a bar series and a line
+ * series can share one coordinate space (scales/margins/dimensions) in the
+ * same chart.
  */
-const ChartContainer = ({ children, data, config, scales, dimensions: propDimensions, margins: propMargins, showGrid = true, showXAxis = true, showYAxis = true, gridLineCount = 5, yAxisTickFormatter = defaultYAxisTickFormatter, categoryWidth, categoryGap = 8, className, title, description, enableKeyboardNavigation = true, chartType = 'bar', ...props }) => {
+const ComboChartCanvas = ({ children, data, config, scales, dimensions: propDimensions, margins: propMargins, showGrid = true, showXAxis = true, showYAxis = true, gridLineCount = 5, yAxisTickFormatter = defaultYAxisTickFormatter, categoryWidth, categoryGap = 8, className, title, description, enableKeyboardNavigation = true, chartType = 'bar', legendTop, legendBottom, width, height, ...props }) => {
     var _a;
     const containerRef = useRef(null);
-    const [dimensions, setDimensions] = useState(propDimensions || { width: 600, height: 400 });
+    // Shared measurement: seeds a 600×400 fallback and corrects in a layout effect,
+    // exposing `measured` so animated children (bars rising, lines/dots) mount only
+    // in the final coordinate space — no cold-load-from-fallback frame (CLAUDE.md §19).
+    // A caller-supplied `dimensions` prop overrides and counts as measured.
+    const { dimensions: autoDimensions, measured: autoMeasured } = useChartDimensions(containerRef);
+    const dimensions = propDimensions !== null && propDimensions !== void 0 ? propDimensions : autoDimensions;
+    const measured = propDimensions ? true : autoMeasured;
     const [hoveredCategory, setHoveredCategory] = useState(null);
     const [hoveredPoint, setHoveredPoint] = useState(null);
     // Detect if device is mobile/touch
@@ -57,30 +70,6 @@ const ChartContainer = ({ children, data, config, scales, dimensions: propDimens
         description,
         enableKeyboardNavigation,
     });
-    // Measure container dimensions
-    useEffect(() => {
-        if (propDimensions) {
-            setDimensions(propDimensions);
-            return;
-        }
-        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();
-        };
-    }, [propDimensions]);
     // Calculate margins (can be overridden by prop)
     const margin = useMemo(() => propMargins || {
         top: 15,
@@ -149,6 +138,7 @@ const ChartContainer = ({ children, data, config, scales, dimensions: propDimens
         config,
         scales: adjustedScales,
         dimensions,
+        measured,
         margin,
         innerWidth,
         innerHeight,
@@ -166,6 +156,7 @@ const ChartContainer = ({ children, data, config, scales, dimensions: propDimens
         config,
         adjustedScales,
         dimensions,
+        measured,
         margin,
         innerWidth,
         innerHeight,
@@ -177,9 +168,15 @@ const ChartContainer = ({ children, data, config, scales, dimensions: propDimens
         focusedElementIndex,
         isKeyboardMode,
     ]);
-    return (jsx(ChartErrorBoundary, { className: className, showErrorDetails: process.env.NODE_ENV === "development", children: jsx(ChartContext.Provider, { value: contextValue, 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 }), 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: gridLineCount }), jsx(YAxis, { show: showYAxis, min: adjustedScales.y.min, max: adjustedScales.y.max, x: margin.left, y: margin.top, height: innerHeight, showGrid: false, gridWidth: innerWidth, tickFormatter: yAxisTickFormatter }), adjustedScales.y.min < 0 && adjustedScales.y.max > 0 && (jsx("line", { x1: margin.left, y1: margin.top + innerHeight - ((0 - adjustedScales.y.min) / (adjustedScales.y.max - adjustedScales.y.min)) * innerHeight, x2: margin.left + innerWidth, y2: margin.top + innerHeight - ((0 - adjustedScales.y.min) / (adjustedScales.y.max - adjustedScales.y.min)) * innerHeight, className: "stroke-[var(--color-text-secondary)]", strokeWidth: 1, opacity: 0.6 })), children, jsx(XAxis, { show: showXAxis, data: data, x: margin.left, y: margin.top + innerHeight, width: innerWidth, categoryWidth: resolvedCategoryWidth, 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: jsx(ComboChartContext.Provider, { value: contextValue, 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: [legendTop, descriptionProps && jsx("div", { ...descriptionProps }), jsx("div", { className: "relative flex-1 min-h-0", children: jsxs("svg", { width: "100%", height: "100%", viewBox: `0 0 ${dimensions.width} ${dimensions.height}`, 
+                            // Let gradient-bar drop shadows / hover glow rings paint past the
+                            // plot edges instead of being clipped (matches BarChart).
+                            style: { overflow: "visible" }, children: [jsx(HorizontalGrid, { show: showGrid, x: margin.left, y: margin.top, width: innerWidth, height: innerHeight, lineCount: gridLineCount }), jsx(YAxis, { show: showYAxis, min: adjustedScales.y.min, max: adjustedScales.y.max, x: margin.left, y: margin.top, height: innerHeight, showGrid: false, gridWidth: innerWidth, tickFormatter: yAxisTickFormatter }), adjustedScales.y.min < 0 && adjustedScales.y.max > 0 && (jsx("line", { x1: margin.left, y1: margin.top + innerHeight - ((0 - adjustedScales.y.min) / (adjustedScales.y.max - adjustedScales.y.min)) * innerHeight, x2: margin.left + innerWidth, y2: margin.top + innerHeight - ((0 - adjustedScales.y.min) / (adjustedScales.y.max - adjustedScales.y.min)) * innerHeight, className: "stroke-[var(--color-text-secondary)]", strokeWidth: 1, opacity: 0.6 })), children, jsx(XAxis, { show: showXAxis, data: data, x: margin.left, y: margin.top + innerHeight, width: innerWidth, categoryWidth: resolvedCategoryWidth, categoryGap: categoryGap })] }) }), legendBottom, 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 } })] }) }) }));
 };
 
-export { ChartContainer, useChartContext };
+export { ComboChartCanvas, useComboChartContext };

package/dist/components/charts/{shared/ChartContainer/ChartContainer.types.d.ts → ComboChart/ComboChartCanvas.types.d.ts}

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
-import type { ChartDataPoint, ChartConfig } from '../../types/chart.types';
-import type { ChartScales } from '../../hooks/useChartScales';
+import type { ChartDataPoint, ChartConfig } from '../types/chart.types';
+import type { ChartScales } from '../hooks/useChartScales';
 export interface ChartDimensions {
     width: number;
     height: number;
@@ -11,7 +11,7 @@ export interface ChartMargins {
     bottom: number;
     left: number;
 }
-export interface ChartContainerProps {
+export interface ComboChartCanvasProps {
     /**
      * Child components to render within the chart (BarRenderer, LineRenderer, etc.)
      */
@@ -68,6 +68,16 @@ export interface ChartContainerProps {
      * Additional CSS class name
      */
     className?: string;
+    /**
+     * Explicit CSS size, applied as an inline style on the outer container.
+     * Without one of these, the container's height is indeterminate (`h-full`
+     * with no sized ancestor resolves to `auto`), which — combined with the
+     * SVG's own percentage height — is a circular sizing dependency: each
+     * ResizeObserver tick can measure a taller box than the last, growing
+     * without bound. A definite height here breaks that loop.
+     */
+    width?: string | number;
+    height?: string | number;
     /**
      * Chart title for accessibility
      */
@@ -84,6 +94,16 @@ export interface ChartContainerProps {
      * Chart type (affects margin calculations and axis rendering)
      */
     chartType?: 'bar' | 'line' | 'combo';
+    /**
+     * Optional legend rendered before the SVG. The container is always a flex
+     * column with the SVG in a shrinkable `flex-1` box, so with both slots
+     * empty, layout is the same as a plain full-height SVG.
+     */
+    legendTop?: ReactNode;
+    /**
+     * Optional legend rendered after the SVG (see `legendTop`).
+     */
+    legendBottom?: ReactNode;
     /**
      * Additional props to pass to container div
      */

package/dist/components/charts/{shared/LineRenderer → ComboChart}/LineRenderer.d.ts

@@ -3,7 +3,9 @@ import type { LineRendererProps } from "./LineRenderer.types";
 /**
  * LineRenderer Component
  *
- * Pure line rendering component that can be used standalone or within ChartContainer.
+ * ComboChart's line-drawing component. Standalone LineChart has its own,
+ * separate line-rendering implementation — this one exists so a line series
+ * can share one coordinate space with a bar series inside ComboChartCanvas.
  * Handles line paths, data points, and crosshair rendering.
  */
 export declare const LineRenderer: React.FC<LineRendererProps>;

package/dist/components/charts/{shared/LineRenderer → ComboChart}/LineRenderer.js

@@ -1,9 +1,12 @@
+"use client";
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { useCallback, useMemo } from 'react';
-import { cn } from '../../../../utils/cn.js';
-import { ChartMarker } from '../ChartMarker/ChartMarker.js';
-import { ChartCrosshair } from '../ChartCrosshair/ChartCrosshair.js';
-import { generateCurvePath } from '../../utils/path-utils.js';
+import { useMemo, useCallback } from 'react';
+import { useReducedMotion, motion } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
+import { ChartMarker } from '../shared/ChartMarker/ChartMarker.js';
+import { ChartCrosshair } from '../shared/ChartCrosshair/ChartCrosshair.js';
+import { generateCurvePath } from '../utils/path-utils.js';
+import { RISE_FROM_BASELINE, riseTransition, SCALE_FROM_CENTER, dotEntranceTransition } from '../utils/animation-utils.js';
 
 /**
  * Get series color class
@@ -32,10 +35,16 @@ const getSeriesFillColor = (index) => {
 /**
  * LineRenderer Component
  *
- * Pure line rendering component that can be used standalone or within ChartContainer.
+ * ComboChart's line-drawing component. Standalone LineChart has its own,
+ * separate line-rendering implementation — this one exists so a line series
+ * can share one coordinate space with a bar series inside ComboChartCanvas.
  * Handles line paths, data points, and crosshair rendering.
  */
-const LineRenderer = ({ data, config, scales, dimensions, margin, strokeWidth = 2, curved = true, curveType = "monotone", showDots = true, radius = 4, hoveredPoint: externalHoveredPoint, onHoverPoint, onMouseEnter, onMouseMove, onMouseLeave, focusedElementIndex = -1, isKeyboardMode = false, className, }) => {
+const LineRenderer = ({ data, config, scales, dimensions, margin, strokeWidth = 2, curved = true, curveType = "monotone", showDots = true, radius = 4, measured = true, hoveredPoint: externalHoveredPoint, onHoverPoint, onMouseEnter, onMouseMove, onMouseLeave, focusedElementIndex = -1, isKeyboardMode = false, className, }) => {
+    const shouldReduceMotion = useReducedMotion();
+    // Re-keys the rise/dot animation so it replays whenever the data changes
+    // (mirrors LineChart). Timing/feel come from the shared chart animation module.
+    const dataSignature = useMemo(() => JSON.stringify(data), [data]);
     // Get all data keys from config
     const dataKeys = Object.keys(config || {});
     // Calculate inner dimensions
@@ -90,7 +99,9 @@ const LineRenderer = ({ data, config, scales, dimensions, margin, strokeWidth =
             const customColor = (_a = config === null || config === void 0 ? void 0 : config[key]) === null || _a === void 0 ? void 0 : _a.color;
             const fallbackClass = getSeriesColorClass(keyIndex);
             const appliedColorClass = customColor ? undefined : fallbackClass;
-            return (jsxs("g", { children: [jsx("path", { d: targetPath, fill: "none", strokeWidth: strokeWidth, strokeLinecap: "round", className: cn("transition-all duration-200", appliedColorClass), stroke: customColor, filter: "url(#line-shadow)" }), showDots &&
+            return (jsxs("g", { children: [jsxs(motion.g, { initial: { scaleY: shouldReduceMotion ? 1 : 0 }, animate: { scaleY: 1 }, transition: riseTransition, style: RISE_FROM_BASELINE, children: [jsx("rect", { x: margin.left, y: margin.top, width: innerWidth, height: innerHeight, fill: "none", stroke: "none", style: { pointerEvents: "none" } }), jsx("path", { d: targetPath, fill: "none", strokeWidth: strokeWidth, strokeLinecap: "round", 
+                                // Constant stroke width through the scaleY rise (no squash).
+                                vectorEffect: "non-scaling-stroke", className: cn("transition-all duration-200", appliedColorClass), stroke: customColor, filter: "url(#line-shadow)" })] }, shouldReduceMotion ? "line-static" : dataSignature), showDots &&
                         data.map((item, dataIndex) => {
                             const rawValue = item[key];
                             const isNull = rawValue === null || rawValue === undefined;
@@ -103,11 +114,9 @@ const LineRenderer = ({ data, config, scales, dimensions, margin, strokeWidth =
                             if (isNull)
                                 return null;
                             const { x, y } = getPointPosition(dataIndex, value);
-                            (externalHoveredPoint === null || externalHoveredPoint === void 0 ? void 0 : externalHoveredPoint.index) === dataIndex &&
-                                externalHoveredPoint.key === key;
                             const isFocused = isKeyboardMode && focusedElementIndex === dataIndex;
-                            return (jsx("g", { children: jsx(ChartMarker, { cx: x, cy: y, radius: isFocused ? radius + 2 : radius, colorClass: cn(appliedColorClass, isFocused &&
-                                        "stroke-[var(--color-primary-600)] stroke-2"), strokeColor: customColor }) }, `${key}-${dataIndex}`));
+                            return (jsx(motion.g, { initial: { opacity: 0, scale: 0 }, animate: { opacity: 1, scale: 1 }, transition: dotEntranceTransition(dataIndex, shouldReduceMotion), style: SCALE_FROM_CENTER, children: jsx(ChartMarker, { cx: x, cy: y, radius: isFocused ? radius + 2 : radius, colorClass: cn(appliedColorClass, isFocused &&
+                                        "stroke-[var(--color-primary-600)] stroke-2"), strokeColor: customColor }) }, `${key}-${dataIndex}${shouldReduceMotion ? "" : `-${dataSignature}`}`));
                         })] }, key));
         });
     }, [
@@ -117,11 +126,15 @@ const LineRenderer = ({ data, config, scales, dimensions, margin, strokeWidth =
         showDots,
         data,
         getPointPosition,
-        externalHoveredPoint,
         focusedElementIndex,
         isKeyboardMode,
         radius,
         config,
+        shouldReduceMotion,
+        dataSignature,
+        margin,
+        innerWidth,
+        innerHeight,
     ]);
     // Hover-only markers (when showDots is false)
     const hoverMarkers = useMemo(() => {
@@ -233,7 +246,7 @@ const LineRenderer = ({ data, config, scales, dimensions, margin, strokeWidth =
                             ((numValue - minValue) / (maxValue - minValue)) *
                                 innerHeight);
                     })()
-                    : undefined, margin: margin, innerWidth: innerWidth, innerHeight: innerHeight, showHorizontal: dataKeys.length === 1 }), jsx("g", { className: cn("chart-lines", className), children: lines }), hoverMarkers, jsx("g", { className: "chart-hover-areas", children: hoverAreas })] }));
+                    : undefined, margin: margin, innerWidth: innerWidth, innerHeight: innerHeight, showHorizontal: dataKeys.length === 1 }), jsx("g", { className: cn("chart-lines", className), children: measured && lines }), hoverMarkers, jsx("g", { className: "chart-hover-areas", children: hoverAreas })] }));
 };
 
 export { LineRenderer };

package/dist/components/charts/{shared/LineRenderer → ComboChart}/LineRenderer.types.d.ts

@@ -1,7 +1,7 @@
-import type { ChartDataPoint, ChartConfig, CurveType } from '../../types/chart.types';
-import type { ChartScales } from '../../hooks/useChartScales';
-import type { ChartDimensions, ChartMargins } from '../ChartContainer';
-import type { MultiSeriesData } from '../ChartTooltip';
+import type { ChartDataPoint, ChartConfig, CurveType } from '../types/chart.types';
+import type { ChartScales } from '../hooks/useChartScales';
+import type { ChartDimensions, ChartMargins } from './ComboChartCanvas.types';
+import type { MultiSeriesData } from '../shared/ChartTooltip';
 export interface LineRendererProps {
     /**
      * Chart data
@@ -12,7 +12,7 @@ export interface LineRendererProps {
      */
     config: ChartConfig;
     /**
-     * Calculated scales (from useChartScales or ChartContainer)
+     * Calculated scales (from useChartScales or ComboChartCanvas)
      */
     scales: ChartScales;
     /**
@@ -43,6 +43,12 @@ export interface LineRendererProps {
      * Dot radius
      */
     radius?: number;
+    /**
+     * `true` once the container is measured. Lines mount (and rise from the x-axis)
+     * only when true, so the entrance starts from the real baseline rather than the
+     * 600×400 fallback (CLAUDE.md §19). Defaults to true for standalone use.
+     */
+    measured?: boolean;
     /**
      * Hovered point info
      */

package/dist/components/charts/DonutChart/DonutChart.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useState, useRef, useMemo, useEffect } from 'react';
 import { useReducedMotion, motion } from 'motion/react';
@@ -10,7 +11,7 @@ import { resolveCssVariable, describeRingSegmentPath, interpolateHexColor, clamp
  * DonutChart component for displaying a percentage value with a circular progress indicator
  * Supports customization of size, thickness, animations, and theming
  */
-const DonutChart = ({ variant = "solid", percentage, label, subtitle, size = 200, thickness = 2, segmentCount = 32, segmentGap = 0.35, showAnimation = true, className, children, theme: themeOverrides, colors, ...props }) => {
+const DonutChart = ({ variant = "solid", percentage, label, subtitle, size = 200, thickness = 2, segmentCount = 32, segmentGap = 0.35, showAnimation = true, className, children, theme: themeOverrides, colors, onAnimationStart, onAnimationEnd, onDrag, onDragStart, onDragEnd, ...props }) => {
     var _a, _b;
     const [isHovered, setIsHovered] = useState(false);
     const [hasAnimated, setHasAnimated] = useState(false);
@@ -144,7 +145,7 @@ const DonutChart = ({ variant = "solid", percentage, label, subtitle, size = 200
                         ? `drop-shadow(0 4px 4px ${getGlowColor()}60)`
                         : "none",
                     transition: "filter 1s ease",
-                }, children: [jsx("defs", { children: getColors.type === "gradient" && (jsxs("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [jsx("stop", { offset: "0%", stopColor: getColors.from }), jsx("stop", { offset: "100%", stopColor: getColors.to })] })) }), isSegmentedVariant ? (jsxs("g", { children: [segmentDefinitions.map((segment, index) => {
+                }, role: "presentation", "aria-hidden": "true", children: [jsx("defs", { children: getColors.type === "gradient" && (jsxs("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [jsx("stop", { offset: "0%", stopColor: getColors.from }), jsx("stop", { offset: "100%", stopColor: getColors.to })] })) }), isSegmentedVariant ? (jsxs("g", { children: [segmentDefinitions.map((segment, index) => {
                                 var _a;
                                 return (jsx("path", { d: segment.trackPath, fill: resolveCssVariable(((_a = theme.colors) === null || _a === void 0 ? void 0 : _a.track) || "", "#e5e7eb"), opacity: 0.25 }, `donut-track-${index}`));
                             }), segmentDefinitions.map((segment, index) => segment.activePath ? (jsx(motion.path, { d: segment.activePath, fill: resolveSegmentFill(segment.colorFactor), initial: { opacity: 0, scale: 0.95 }, animate: hasAnimated ? { opacity: 1, scale: 1 } : {}, transition: showAnimation && !shouldReduceMotion

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

@@ -10,7 +10,7 @@ const donutChartTheme = {
     progress: "text-[var(--color-primary)] transition-all duration-300",
     // Text styling
     text: {
-        label: "text-2xl font-bold text-[var(--color-text-primary)] transition-colors duration-300 tracking-tight",
+        label: "text-xl font-bold text-[var(--color-text-primary)] transition-colors duration-300 tracking-tight",
         subtitle: "text-sm text-[var(--color-text-secondary)] mt-1 transition-colors duration-300",
     },
     // Default color palette (CSS variables for dark mode support)

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

@@ -1,5 +1,4 @@
 import React from "react";
-import { HTMLMotionProps } from "motion/react";
 /**
  * Color configuration for the donut chart
  */
@@ -41,7 +40,7 @@ export interface DonutChartThemeOverrides {
 /**
  * DonutChart component props
  */
-export interface DonutChartProps extends Omit<HTMLMotionProps<"div">, "children"> {
+export interface DonutChartProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
     /**
      * Visual variant for the donut chart (solid or segmented)
      * @default "solid"

package/dist/components/charts/DonutChart/MultiSegmentDonutChart.js

@@ -1,9 +1,11 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React__default, { useState, useEffect, useMemo } from 'react';
 import { useMotionValue, useTransform, animate, motion, useReducedMotion } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
 import { multiSegmentDonutChartTheme } from './MultiSegmentDonutChart.theme.js';
 import { describeRingSegmentPath, describeArcPathClockwise, clamp } from './donut-utils.js';
+import { getSpringAnimation, SEGMENT_HOVER_TRANSITION, CIRCULAR_CHART_ANIMATIONS } from '../utils/animation-utils.js';
 
 const AnimatedSegmentInner = ({ center, innerRadius, outerRadius, startAngle, endAngle, color, delay, duration, shouldAnimate, shouldReduceMotion, isHovered, isFaded, onMouseEnter, onMouseLeave, onClick, clickable, }) => {
     // Motion value for animation progress (0 to 1)
@@ -29,12 +31,7 @@ const AnimatedSegmentInner = ({ center, innerRadius, outerRadius, startAngle, en
         }
         else if (shouldAnimate) {
             // Run the drawing animation with spring physics (same as base DonutChart)
-            const controls = animate(progress, 1, {
-                type: "spring",
-                stiffness: 80, // Same as CIRCULAR_CHART_ANIMATIONS.donut.preset ('smooth')
-                damping: 20,
-                delay,
-            });
+            const controls = animate(progress, 1, getSpringAnimation(CIRCULAR_CHART_ANIMATIONS.multiSegmentDonut.preset, shouldReduceMotion, delay));
             return () => controls.stop();
         }
         // If shouldAnimate is false, progress stays at 0 (waiting state)
@@ -42,10 +39,7 @@ const AnimatedSegmentInner = ({ center, innerRadius, outerRadius, startAngle, en
     return (jsx(motion.path, { d: path, fill: color, animate: {
             opacity: isFaded ? 0.6 : 1,
             scale: isHovered ? 1.025 : 1,
-        }, transition: {
-            scale: { duration: 0.2 },
-            opacity: { duration: 0.2 },
-        }, style: {
+        }, transition: SEGMENT_HOVER_TRANSITION, style: {
             transformOrigin: "50% 50%",
             cursor: clickable ? "pointer" : "default",
             filter: isHovered
@@ -72,16 +66,8 @@ const AnimatedStrokeSegmentInner = ({ center, radius, strokeWidth, startAngle, e
             opacity: isFaded ? 0.6 : 1,
             scale: isHovered ? 1.025 : 1,
         }, transition: {
-            strokeDashoffset: shouldReduceMotion
-                ? { duration: 0 }
-                : {
-                    type: "spring",
-                    stiffness: 80,
-                    damping: 20,
-                    delay,
-                },
-            scale: { duration: 0.2 },
-            opacity: { duration: 0.2 },
+            strokeDashoffset: getSpringAnimation(CIRCULAR_CHART_ANIMATIONS.multiSegmentDonut.preset, shouldReduceMotion, delay),
+            ...SEGMENT_HOVER_TRANSITION,
         }, style: {
             transformOrigin: "50% 50%",
             cursor: clickable ? "pointer" : "default",
@@ -93,7 +79,7 @@ const AnimatedStrokeSegment = React__default.memo(AnimatedStrokeSegmentInner);
  * MultiSegmentDonutChart component for displaying multiple data values in a circular chart
  * Each segment represents a different data point with its own value and optional color
  */
-const MultiSegmentDonutChart = ({ data, size = 200, thickness = 4, segmentGap = 0.05, showAnimation = true, showLegend = false, legendPosition = "right", centerContent, className, theme: themeOverrides, onSegmentHover, onSegmentClick, roundedCaps = true, ...restProps }) => {
+const MultiSegmentDonutChart = ({ data, size = 200, thickness = 4, segmentGap = 0.05, showAnimation = true, showLegend = false, legendPosition = "right", centerContent, className, theme: themeOverrides, onSegmentHover, onSegmentClick, roundedCaps = true, onAnimationStart, onAnimationEnd, onDrag, onDragStart, onDragEnd, ...restProps }) => {
     const [hoveredSegment, setHoveredSegment] = useState(null);
     const [hasAnimated, setHasAnimated] = useState(false);
     const shouldReduceMotion = useReducedMotion();
@@ -144,7 +130,7 @@ const MultiSegmentDonutChart = ({ data, size = 200, thickness = 4, segmentGap =
         let currentAngle = 0; // Start at 12 o'clock (top)
         let cumulativeDelay = 0; // Track cumulative delay for sequential animation
         // Base duration for a full 100% segment (in seconds)
-        const baseDuration = 0.6;
+        const baseDuration = CIRCULAR_CHART_ANIMATIONS.multiSegmentDonut.baseSegmentDuration;
         return validatedData.map((segment, index) => {
             // Calculate the angle for this segment
             const segmentAngle = (segment.percentage / 100) * effectiveCircle;
@@ -159,7 +145,7 @@ const MultiSegmentDonutChart = ({ data, size = 200, thickness = 4, segmentGap =
             const path = describeRingSegmentPath(center, center, innerRadius, outerRadius, startAngle, endAngle);
             // Calculate animation duration proportional to segment size
             // Minimum duration of 0.15s to ensure visibility
-            const duration = Math.max(0.15, (segment.percentage / 100) * baseDuration);
+            const duration = Math.max(CIRCULAR_CHART_ANIMATIONS.multiSegmentDonut.minSegmentDuration, (segment.percentage / 100) * baseDuration);
             // This segment starts after all previous segments complete
             const delay = cumulativeDelay;
             // Add this segment's duration to cumulative delay for next segment
@@ -243,7 +229,7 @@ const MultiSegmentDonutChart = ({ data, size = 200, thickness = 4, segmentGap =
             }) }));
     };
     if (!data || data.length === 0) {
-        return (jsx("div", { className: cn(theme.baseStyle, className), style: { width: containerSize, height: containerSize }, children: jsx("div", { className: "text-sm text-[var(--color-text-secondary)]", children: "No data" }) }));
+        return (jsx("div", { className: cn(theme.baseStyle, className), style: { width: containerSize, height: containerSize }, children: jsx("div", { className: "text-base text-[var(--color-text-secondary)]", children: "No data" }) }));
     }
     return (jsxs("div", { className: cn("flex gap-4 items-center", getLayoutClasses(), className), children: [jsxs(motion.div, { className: cn(theme.baseStyle), style: { width: containerSize, height: containerSize }, role: "img", "aria-label": `Donut chart with ${segments.length} segments`, ...restProps, children: [jsxs("svg", { viewBox: `0 0 ${svgSize} ${svgSize}`, width: "100%", height: "100%", className: "overflow-visible relative z-10", children: [jsx("circle", { cx: center, cy: center, r: radius, fill: "none", stroke: "#000000", strokeWidth: strokeWidth > 2 ? strokeWidth - 2 : 1, opacity: 0.03 }), segments.map((segment, index) => roundedCaps ? (jsx(AnimatedStrokeSegment, { center: center, radius: radius, strokeWidth: strokeWidth, startAngle: segment.startAngle, endAngle: segment.endAngle, color: segment.color, delay: segment.animationDelay, shouldAnimate: showAnimation && hasAnimated, shouldReduceMotion: shouldReduceMotion, isHovered: hoveredSegment === index, isFaded: hoveredSegment !== null && hoveredSegment !== index, onMouseEnter: () => handleSegmentMouseEnter(index), onMouseLeave: handleSegmentMouseLeave, onClick: () => handleSegmentClick(index), clickable: !!onSegmentClick }, `segment-${index}`)) : (jsx(AnimatedSegment, { center: center, innerRadius: innerRadius, outerRadius: outerRadius, startAngle: segment.startAngle, endAngle: segment.endAngle, color: segment.color, delay: segment.animationDelay, duration: segment.animationDuration, shouldAnimate: showAnimation && hasAnimated, shouldReduceMotion: shouldReduceMotion, isHovered: hoveredSegment === index, isFaded: hoveredSegment !== null && hoveredSegment !== index, onMouseEnter: () => handleSegmentMouseEnter(index), onMouseLeave: handleSegmentMouseLeave, onClick: () => handleSegmentClick(index), clickable: !!onSegmentClick }, `segment-${index}`)))] }), centerContent && (jsx("div", { className: cn(theme.centerContent), children: centerContent }))] }), renderLegend()] }));
 };

package/dist/components/charts/DonutChart/MultiSegmentDonutChart.types.d.ts

@@ -1,5 +1,4 @@
 import React from "react";
-import { HTMLMotionProps } from "motion/react";
 /**
  * Data segment for the multi-segment donut chart
  */
@@ -52,7 +51,7 @@ export interface MultiSegmentDonutChartThemeOverrides {
 /**
  * MultiSegmentDonutChart component props
  */
-export interface MultiSegmentDonutChartProps extends Omit<HTMLMotionProps<"div">, "children"> {
+export interface MultiSegmentDonutChartProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
     /**
      * Array of data segments to display
      * Each segment should have value and percentage

package/dist/components/charts/DonutChart/donut-utils.js

@@ -1,3 +1,4 @@
+"use client";
 /**
  * Shared utility functions for DonutChart components
  */

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

@@ -1,53 +1,6 @@
 /**
  * Animation variants for FunnelChart segments
  */
-const segmentVariants = {
-    hidden: {
-        opacity: 0,
-        scaleX: 0.8,
-    },
-    visible: (index) => ({
-        opacity: 1,
-        scaleX: 1,
-        transition: {
-            delay: index * 0.08,
-            duration: 0.4,
-            ease: [0.25, 0.46, 0.45, 0.94], // easeOutQuad
-        },
-    }),
-    exit: {
-        opacity: 0,
-        scaleX: 0.8,
-        transition: {
-            duration: 0.2,
-        },
-    },
-};
-/**
- * Animation variants for vertical orientation segments
- */
-const verticalSegmentVariants = {
-    hidden: {
-        opacity: 0,
-        scaleY: 0.8,
-    },
-    visible: (index) => ({
-        opacity: 1,
-        scaleY: 1,
-        transition: {
-            delay: index * 0.08,
-            duration: 0.4,
-            ease: [0.25, 0.46, 0.45, 0.94],
-        },
-    }),
-    exit: {
-        opacity: 0,
-        scaleY: 0.8,
-        transition: {
-            duration: 0.2,
-        },
-    },
-};
 /**
  * Animation variants for labels
  */
@@ -103,4 +56,4 @@ const summaryVariants = {
     },
 };
 
-export { badgeVariants, labelVariants, segmentVariants, summaryVariants, verticalSegmentVariants };
+export { badgeVariants, labelVariants, summaryVariants };

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

@@ -1,9 +1,8 @@
 import React from "react";
 import type { FunnelChartProps } from "./FunnelChart.types";
 /**
- * FunnelChart Component
- *
- * Displays conversion funnel data with trapezoid shapes showing progressive dropoff.
- * Features animations, keyboard navigation, and accessibility support.
+ * Displays conversion funnel data with trapezoid shapes showing progressive
+ * dropoff. The render keeps the chart surface focused: stage-level detail lives
+ * in labels/tooltips while conversion and dropoff badges appear on focus.
  */
 export declare const FunnelChart: React.FC<FunnelChartProps>;