@flikk/ui 1.0.0-beta.31 → 1.0.0-beta.32

package/dist/components/charts/Heatmap/HeatmapCell.js

@@ -1,95 +1,44 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import React__default, { useRef } from 'react';
-import { motion } from 'motion/react';
+import React__default from 'react';
+import { useReducedMotion, motion } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
 import { heatmapTheme } from './Heatmap.theme.js';
+import { HEATMAP_CELL_TAP_TRANSITION, HEATMAP_CELL_HOVER_TRANSITION, HEATMAP_CELL_FADE_DURATION } from '../utils/animation-utils.js';
 
 /**
- * Individual heatmap cell component with hover animations and color intensity
+ * Individual heatmap cell — colour intensity plus a deterministic fade-in.
+ *
+ * The resting opacity is the animation target (not an inline style), so motion
+ * owns it end to end; `data-intensity-opacity` publishes the resolved value for
+ * consumers and tests.
  */
-const HeatmapCellInner = ({ data, intensity, minOpacity = 0.1, color = 'var(--color-primary)', // Default to primary color (correct CSS variable)
-className, onClick, onHover, onMouseMove, onLeave, children, }) => {
-    // Calculate cell color and opacity based on intensity
-    const getColorStyle = (intensity) => {
-        // Only return empty object for null values (will use CSS class)
-        if (data.value === null) {
-            return {};
-        }
-        // Calculate base opacity from intensity
-        let baseOpacity;
-        // For 0 values, use minOpacity
-        if (data.value === 0) {
-            baseOpacity = minOpacity;
-        }
-        else {
-            // Map intensity (0-1) to opacity levels (minOpacity-1.0) in 10% increments
-            const opacityStep = Math.ceil(intensity * 10) / 10; // Round up to nearest 10%
-            baseOpacity = Math.max(minOpacity, Math.min(1.0, opacityStep));
-        }
-        // Use the passed color prop with calculated opacity
-        return {
-            backgroundColor: color,
-            opacity: baseOpacity
-        };
-    };
-    const getColorClass = (intensity) => {
-        // Only use gray colors for null values (missing data)
-        if (data.value === null) {
-            return 'bg-transparent border border-gray-200/80';
-        }
-        // For non-null values, we'll use inline styles
-        return '';
-    };
-    const handleClick = () => {
-        if (onClick) {
-            onClick(data);
-        }
-    };
-    const handleMouseEnter = (event) => {
-        if (onHover) {
-            onHover(data, event);
-        }
-    };
-    const handleMouseMove = (event) => {
-        if (onMouseMove) {
-            onMouseMove(data, event);
-        }
-    };
-    const handleMouseLeave = () => {
-        if (onLeave) {
-            onLeave();
-        }
-    };
-    const handleAnimationEnd = () => {
-        // Remove animation class after flicker completes to prevent interference with opacity
-        if (containerRef.current) {
-            containerRef.current.classList.remove('animate-[flicker_0.6s_ease-out_forwards]');
-        }
-    };
-    const containerRef = useRef(null);
-    const flickerDelayRef = useRef(`${Math.random() * 0.3}s`);
-    return (jsx(motion.div, { ref: containerRef, className: cn(heatmapTheme.cellBaseStyle, getColorClass(), onClick && 'cursor-pointer', className), style: {
-            ...getColorStyle(intensity),
-            // CSS custom properties for the animation
-            '--flicker-delay': flickerDelayRef.current,
-            animationDelay: `var(--flicker-delay)`,
-        }, onAnimationEnd: handleAnimationEnd, onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, 
-        // Framer Motion animations (just for hover/tap, not initial load)
-        whileHover: {
-            scale: 1.025,
-            transition: { duration: 0.15, ease: 'easeOut' }
-        }, whileTap: {
-            scale: 0.95,
-            transition: { duration: 0.1, ease: 'easeOut' }
-        }, 
-        // Accessibility
-        role: "gridcell", tabIndex: onClick ? 0 : -1, "aria-label": `Value: ${data.value}, X: ${data.x}, Y: ${data.y}`, onKeyDown: (e) => {
+const HeatmapCellInner = ({ data, intensity, minOpacity = 0.1, color = 'var(--color-primary)', delay = 0, className, onClick, onHover, onMouseMove, onLeave, children, }) => {
+    const shouldReduceMotion = useReducedMotion();
+    const isNull = data.value === null;
+    // Map intensity (0-1) onto [minOpacity, 1] in 10% steps; a 0 value pins to
+    // minOpacity so an empty cell still reads as "measured, but nothing here".
+    const resolvedOpacity = isNull
+        ? 0
+        : data.value === 0
+            ? minOpacity
+            : Math.max(minOpacity, Math.min(1, Math.ceil(intensity * 10) / 10));
+    const handleClick = () => onClick === null || onClick === void 0 ? void 0 : onClick(data);
+    const handleMouseEnter = (event) => onHover === null || onHover === void 0 ? void 0 : onHover(data, event);
+    const handleMouseMove = (event) => onMouseMove === null || onMouseMove === void 0 ? void 0 : onMouseMove(data, event);
+    const handleMouseLeave = () => onLeave === null || onLeave === void 0 ? void 0 : onLeave();
+    return (jsx(motion.div, { "data-heatmap-cell": "", "data-intensity-opacity": resolvedOpacity, className: cn(heatmapTheme.cellBaseStyle, isNull && heatmapTheme.cellNullStyle, onClick && 'cursor-pointer', className), style: isNull ? undefined : { backgroundColor: color }, initial: shouldReduceMotion ? false : { opacity: 0 }, animate: { opacity: resolvedOpacity }, transition: shouldReduceMotion
+            ? { duration: 0 }
+            : { duration: HEATMAP_CELL_FADE_DURATION, delay, ease: 'easeOut' }, onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, whileHover: shouldReduceMotion
+            ? undefined
+            : { scale: 1.025, transition: HEATMAP_CELL_HOVER_TRANSITION }, whileTap: shouldReduceMotion
+            ? undefined
+            : { scale: 0.95, transition: HEATMAP_CELL_TAP_TRANSITION }, role: "gridcell", tabIndex: onClick ? 0 : -1, "aria-label": `Value: ${data.value}, X: ${data.x}, Y: ${data.y}`, onKeyDown: (e) => {
             if ((e.key === 'Enter' || e.key === ' ') && onClick) {
                 e.preventDefault();
                 onClick(data);
             }
-        }, children: children && (jsx("div", { className: "absolute inset-0 flex items-center justify-center text-sm font-medium text-gray-700 dark:text-gray-300", children: children })) }));
+        }, children: children && (jsx("div", { className: heatmapTheme.cellOverlayStyle, children: children })) }));
 };
 const HeatmapCell = React__default.memo(HeatmapCellInner);
 

package/dist/components/charts/Heatmap/HeatmapLegend.d.ts

@@ -1,13 +1,14 @@
 import React from 'react';
+/**
+ * The ramp is a purely visual scale: it renders the two end captions, never the
+ * numeric bounds. `minValue`/`maxValue` used to sit here and were never read —
+ * the same advertise-a-prop-you-ignore trap the flat-API refactor removed from
+ * `HeatmapProps`. If the numbers are ever wanted beside the ramp, that is a
+ * deliberate feature with its own rendering, not two dormant props.
+ */
 export interface HeatmapLegendProps {
-    /** Base color key from chart config (e.g., 'value', 'activity') */
-    colorKey?: string;
     /** Color to use for the gradient */
     color?: string;
-    /** Minimum value for the legend */
-    minValue?: number;
-    /** Maximum value for the legend */
-    maxValue?: number;
     /** Custom labels for min and max */
     labels?: {
         min?: string;

package/dist/components/charts/Heatmap/HeatmapLegend.js

@@ -2,16 +2,16 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { cn } from '../../../utils/cn.js';
 import { heatmapTheme } from './Heatmap.theme.js';
 
-const HeatmapLegend = ({ colorKey = 'value', color = 'var(--color-primary)', // Correct CSS variable
-minValue = 0, maxValue = 100, labels = {
-    min: 'Low activity',
-    max: 'High activity'
-}, className }) => {
+const HeatmapLegend = ({ color = 'var(--color-primary)', // Correct CSS variable
+labels, className }) => {
+    var _a, _b;
+    const min = (_a = labels === null || labels === void 0 ? void 0 : labels.min) !== null && _a !== void 0 ? _a : 'Low activity';
+    const max = (_b = labels === null || labels === void 0 ? void 0 : labels.max) !== null && _b !== void 0 ? _b : 'High activity';
     // Create gradient using passed color (supports CSS variables and hex)
     const gradientStyle = {
         background: `linear-gradient(to right, color-mix(in srgb, ${color} 20%, transparent), ${color})`
     };
-    return (jsxs("div", { className: cn(heatmapTheme.legendStyle, className), children: [jsx("div", { className: "w-full h-1.5 rounded-full", style: gradientStyle }), jsxs("div", { className: "flex items-center justify-between text-sm font-medium text-[var(--color-text-secondary)]", children: [jsx("div", { children: labels.min }), jsx("div", { children: labels.max })] })] }));
+    return (jsxs("div", { className: cn(heatmapTheme.legendStyle, className), children: [jsx("div", { className: "w-full h-1.5 rounded-full", style: gradientStyle }), jsxs("div", { className: "flex items-center justify-between text-xs font-medium text-[var(--color-text-secondary)]", children: [jsx("div", { children: min }), jsx("div", { children: max })] })] }));
 };
 
 export { HeatmapLegend };

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

@@ -2,6 +2,6 @@ export { Heatmap } from './Heatmap';
 export { HeatmapCell } from './HeatmapCell';
 export { HeatmapLegend } from './HeatmapLegend';
 export { heatmapTheme } from './Heatmap.theme';
-export type { HeatmapProps, HeatmapDataPoint, HeatmapCellProps, SemanticColor } from './Heatmap.types';
+export type { HeatmapProps, HeatmapDataPoint, HeatmapCellProps, HeatmapVariant } from './Heatmap.types';
 export * from './Heatmap.types';
 export * from './utils/heatmapUtils';

package/dist/components/charts/Heatmap/utils/heatmapUtils.d.ts

@@ -1,8 +1,10 @@
 import type { HeatmapDataPoint, ProcessedHeatmapData } from '../Heatmap.types';
 /**
- * Process raw heatmap data and calculate necessary values
+ * Process raw heatmap data and calculate necessary values.
+ * `minValue`/`maxValue` are the flat family-standard bounds; either may be
+ * omitted, in which case it is derived from the data.
  */
-export declare function processHeatmapData(data: HeatmapDataPoint[], valueRange?: [number, number]): ProcessedHeatmapData;
+export declare function processHeatmapData(data: HeatmapDataPoint[], minValue?: number, maxValue?: number): ProcessedHeatmapData;
 /**
  * Calculate intensity (0-1) for a given value within the range
  */
@@ -13,18 +15,11 @@ export declare function calculateIntensity(value: number | null, minValue: numbe
  */
 export declare function createGridMatrix(data: HeatmapDataPoint[], xCategories: (string | number)[], yCategories: (string | number)[]): HeatmapDataPoint[][];
 /**
- * Generate default tooltip content for a data point
+ * Default tooltip content for a data point. `label` is the series label from
+ * `config[key].label` — the family contract every other chart already honours.
  */
-export declare function getDefaultTooltipContent(data: HeatmapDataPoint): string;
+export declare function getDefaultTooltipContent(data: HeatmapDataPoint, label?: string): string;
 /**
  * Format axis labels with common patterns
  */
 export declare function formatAxisLabel(value: string | number, type?: 'day' | 'month' | 'hour' | 'date' | 'number' | 'default'): string;
-/**
- * Calculate responsive cell size based on container dimensions
- */
-export declare function calculateCellSize(containerWidth: number, containerHeight: number, xCount: number, yCount: number, gap?: number, minSize?: number, maxSize?: number): number;
-/**
- * Generate sample heatmap data for testing/examples
- */
-export declare function generateSampleData(type?: 'weekly' | 'monthly' | 'hourly'): HeatmapDataPoint[];

package/dist/components/charts/Heatmap/utils/heatmapUtils.js

@@ -1,11 +1,12 @@
 /**
- * Process raw heatmap data and calculate necessary values
+ * Process raw heatmap data and calculate necessary values.
+ * `minValue`/`maxValue` are the flat family-standard bounds; either may be
+ * omitted, in which case it is derived from the data.
  */
-function processHeatmapData(data, valueRange) {
+function processHeatmapData(data, minValue, maxValue) {
     // Extract unique categories preserving the order they appear in the data
     const xCategories = [];
     const yCategories = [];
-    // Preserve order by iterating through data and collecting unique values
     data.forEach(point => {
         if (!xCategories.includes(point.x)) {
             xCategories.push(point.x);
@@ -14,18 +15,18 @@ function processHeatmapData(data, valueRange) {
             yCategories.push(point.y);
         }
     });
-    // Calculate value range if not provided
     const values = data.map(d => d.value).filter(v => v !== null);
     const calculatedMin = Math.min(...values);
     const calculatedMax = Math.max(...values);
-    const finalValueRange = valueRange || [calculatedMin, calculatedMax];
+    const resolvedMin = minValue !== null && minValue !== void 0 ? minValue : calculatedMin;
+    const resolvedMax = maxValue !== null && maxValue !== void 0 ? maxValue : calculatedMax;
     return {
         data,
         xCategories,
         yCategories,
-        valueRange: finalValueRange,
-        minValue: finalValueRange[0],
-        maxValue: finalValueRange[1],
+        valueRange: [resolvedMin, resolvedMax],
+        minValue: resolvedMin,
+        maxValue: resolvedMax,
     };
 }
 /**
@@ -56,11 +57,14 @@ function createGridMatrix(data, xCategories, yCategories) {
     }));
 }
 /**
- * Generate default tooltip content for a data point
+ * Default tooltip content for a data point. `label` is the series label from
+ * `config[key].label` — the family contract every other chart already honours.
  */
-function getDefaultTooltipContent(data) {
+function getDefaultTooltipContent(data, label) {
     const value = data.value !== null ? data.value.toString() : 'No data';
-    return `${data.x}, ${data.y}: ${value}`;
+    return label
+        ? `${data.x} · ${data.y} — ${label}: ${value}`
+        : `${data.x}, ${data.y}: ${value}`;
 }
 /**
  * Format axis labels with common patterns
@@ -117,54 +121,5 @@ function formatAxisLabel(value, type = 'default') {
     }
     return String(value);
 }
-/**
- * Generate sample heatmap data for testing/examples
- */
-function generateSampleData(type = 'weekly') {
-    const data = [];
-    switch (type) {
-        case 'weekly':
-            const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
-            const weeks = Array.from({ length: 12 }, (_, i) => `Week ${i + 1}`);
-            weeks.forEach(week => {
-                days.forEach(day => {
-                    data.push({
-                        x: day,
-                        y: week,
-                        value: Math.floor(Math.random() * 20),
-                    });
-                });
-            });
-            break;
-        case 'monthly':
-            const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
-                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
-            const years = ['2022', '2023', '2024'];
-            years.forEach(year => {
-                months.forEach(month => {
-                    data.push({
-                        x: month,
-                        y: year,
-                        value: Math.floor(Math.random() * 100),
-                    });
-                });
-            });
-            break;
-        case 'hourly':
-            const hours = Array.from({ length: 24 }, (_, i) => i);
-            const daysOfWeek = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
-            daysOfWeek.forEach(day => {
-                hours.forEach(hour => {
-                    data.push({
-                        x: hour,
-                        y: day,
-                        value: Math.floor(Math.random() * 50),
-                    });
-                });
-            });
-            break;
-    }
-    return data;
-}
 
-export { calculateIntensity, createGridMatrix, formatAxisLabel, generateSampleData, getDefaultTooltipContent, processHeatmapData };
+export { calculateIntensity, createGridMatrix, formatAxisLabel, getDefaultTooltipContent, processHeatmapData };

package/dist/components/charts/Heatmap/utils/heatmapUtils.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/charts/HorizontalBarChart/HorizontalBarChart.js

@@ -11,7 +11,7 @@ import { ChartErrorBoundary } from '../shared/ChartErrorBoundary/ChartErrorBound
 import { CategoryYAxis } from '../shared/ChartAxis/CategoryYAxis.js';
 import { ValueXAxis } from '../shared/ChartAxis/ValueXAxis.js';
 import { VerticalGrid } from '../shared/ChartGrid/VerticalGrid.js';
-import { ChartTooltip } from '../shared/ChartTooltip/ChartTooltip.js';
+import { ChartTooltip } from '../../core/shared/ChartTooltip/ChartTooltip.js';
 import { resolveLegendPosition, ChartLegend } from '../shared/ChartLegend/ChartLegend.js';
 import { HORIZONTAL_BAR_CHART_DEFAULTS } from './HorizontalBarChart.types.js';
 import { X_AXIS_MARGIN } from '../types/chart.types.js';

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

@@ -9,7 +9,7 @@ import { useChartDimensions } from '../hooks/useChartDimensions.js';
 import { XAxis } from '../shared/ChartAxis/XAxis.js';
 import { YAxis } from '../shared/ChartAxis/YAxis.js';
 import { HorizontalGrid } from '../shared/ChartGrid/HorizontalGrid.js';
-import { ChartTooltip } from '../shared/ChartTooltip/ChartTooltip.js';
+import { ChartTooltip } from '../../core/shared/ChartTooltip/ChartTooltip.js';
 import { resolveLegendPosition, ChartLegend } from '../shared/ChartLegend/ChartLegend.js';
 import { ChartMarker } from '../shared/ChartMarker/ChartMarker.js';
 import { ChartCrosshair } from '../shared/ChartCrosshair/ChartCrosshair.js';
@@ -285,7 +285,7 @@ className, title, description, enableKeyboardNavigation = LINE_CHART_DEFAULTS.en
                                                 // lowest point), so the line grows UP from the x-axis.
                                                 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", colorClass), style: { stroke: (_a = config[key]) === null || _a === void 0 ? void 0 : _a.color }, 
+                                                        vectorEffect: "non-scaling-stroke", className: cn("transition-all duration-[var(--motion-duration-base)]", colorClass), style: { stroke: (_a = config[key]) === null || _a === void 0 ? void 0 : _a.color }, 
                                                         // Soft series-colored glow instead of a hard black drop shadow.
                                                         filter: `url(#${getSeriesGlowId(keyIndex)})` })] }, shouldReduceMotion ? "line-static" : dataSignature), showDots &&
                                                 data.map((item, dataIndex) => {

package/dist/components/charts/LollipopChart/LollipopChart.js

@@ -9,7 +9,7 @@ import { useChartValidation } from '../hooks/useChartValidation.js';
 import { useChartAccessibility } from '../hooks/useChartAccessibility.js';
 import { useTooltipPosition } from '../hooks/useTooltipPosition.js';
 import { ChartErrorBoundary } from '../shared/ChartErrorBoundary/ChartErrorBoundary.js';
-import { ChartTooltip } from '../shared/ChartTooltip/ChartTooltip.js';
+import { ChartTooltip } from '../../core/shared/ChartTooltip/ChartTooltip.js';
 import { HorizontalGrid } from '../shared/ChartGrid/HorizontalGrid.js';
 import { YAxis } from '../shared/ChartAxis/YAxis.js';
 import { XAxis } from '../shared/ChartAxis/XAxis.js';

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

@@ -6,7 +6,7 @@ import { cn } from '../../../utils/cn.js';
 import { radarChartTheme } from './RadarChart.theme.js';
 import { RADAR_CHART_ANIMATIONS } from './RadarChart.animations.js';
 import { getSpringAnimation, getStaggerDelay } from '../utils/animation-utils.js';
-import { ChartTooltip } from '../shared/ChartTooltip/ChartTooltip.js';
+import { ChartTooltip } from '../../core/shared/ChartTooltip/ChartTooltip.js';
 import { ChartLegend } from '../shared/ChartLegend/ChartLegend.js';
 import { useTooltipPosition } from '../hooks/useTooltipPosition.js';
 

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

@@ -11,7 +11,7 @@ import { ChartErrorBoundary } from '../shared/ChartErrorBoundary/ChartErrorBound
 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 { ChartTooltip } from '../../core/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';
@@ -245,8 +245,8 @@ className, title, description, enableKeyboardNavigation = STACKED_BAR_CHART_DEFA
                             // plain style values at mount and ignores re-render changes.
                             opacity: shouldReduceOpacity ? (isGradientVariant ? 0.42 : 0.9) : 1,
                         }, transition: stackedSegmentTransition(delay, hasAnimated), className: cn(isGradientVariant
-                            ? "transition-all duration-300 ease-out cursor-pointer"
-                            : "transition-colors duration-200 cursor-pointer", isFocused && "stroke-2"), style: {
+                            ? "transition-all duration-[var(--motion-duration-slow)] ease-out cursor-pointer"
+                            : "transition-colors duration-[var(--motion-duration-base)] cursor-pointer", isFocused && "stroke-2"), style: {
                             ...RISE_FROM_BASELINE,
                             fill: isGradientVariant
                                 ? `url(#${stackGradientId(keyIndex)})`

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

@@ -1,10 +1,13 @@
 "use client";
-import { useState, useRef, useCallback, useMemo } from 'react';
+import { useState, useId, useCallback, useMemo } from 'react';
 
 function useChartAccessibility({ chartType, data, config, title, description, enableKeyboardNavigation = true, }) {
     const [focusedElementIndex, setFocusedElementIndex] = useState(-1);
     const [isKeyboardMode, setIsKeyboardMode] = useState(false);
-    const descriptionId = useRef(`chart-description-${Math.random().toString(36).substr(2, 9)}`);
+    // useId() (never Math.random()) — the id is rendered into markup on both the
+    // sr-only element and the container's aria-describedby, so a per-render
+    // random value mismatches across hydration.
+    const descriptionId = useId();
     // Generate chart summary for screen readers
     const generateChartSummary = useCallback(() => {
         var _a;
@@ -102,16 +105,16 @@ function useChartAccessibility({ chartType, data, config, title, description, en
     const chartAccessibilityProps = useMemo(() => ({
         role: 'img',
         'aria-label': ariaLabel,
-        'aria-describedby': description ? descriptionId.current : undefined,
+        'aria-describedby': description ? descriptionId : undefined,
         tabIndex: enableKeyboardNavigation ? 0 : -1,
         onKeyDown: handleKeyDown,
-    }), [ariaLabel, description, enableKeyboardNavigation, handleKeyDown]);
+    }), [ariaLabel, description, descriptionId, enableKeyboardNavigation, handleKeyDown]);
     // Description element props
     const descriptionProps = useMemo(() => description ? {
-        id: descriptionId.current,
+        id: descriptionId,
         className: 'sr-only',
         children: description,
-    } : null, [description]);
+    } : null, [description, descriptionId]);
     return {
         chartAccessibilityProps,
         descriptionProps,

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

@@ -7,13 +7,11 @@ export { AreaChart } from "./AreaChart";
 export { DonutChart } from "./DonutChart/DonutChart";
 export { MultiSegmentDonutChart } from "./DonutChart/MultiSegmentDonutChart";
 export { Heatmap } from "./Heatmap";
-export { FunnelChart } from "./FunnelChart";
-export { ScatterPlot } from "./ScatterPlot";
 export { RadarChart } from "./RadarChart";
 export { ComboChart } from "./ComboChart";
 export { ActivityRings } from "./ActivityRings";
 export { LollipopChart } from "./LollipopChart";
-export { ChartTooltip } from "./shared/ChartTooltip";
+export { ChartTooltip } from "../core/shared/ChartTooltip";
 export { ChartLegend } from "./shared/ChartLegend";
 export { XAxis, YAxis } from "./shared/ChartAxis";
 export { ChartText } from "./shared/ChartText";
@@ -25,9 +23,9 @@ export { useTooltipPosition } from "./hooks/useTooltipPosition";
 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 { processHeatmapData, calculateIntensity, createGridMatrix, getDefaultTooltipContent, formatAxisLabel, } from "./Heatmap/utils/heatmapUtils";
 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 { ChartTooltipProps, ChartTooltipContentProps, } from "../core/shared/ChartTooltip/ChartTooltip.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";
@@ -41,9 +39,7 @@ export type { LineChartProps } from "./LineChart/LineChart.types";
 export type { AreaChartProps } from "./AreaChart/AreaChart.types";
 export type { DonutChartProps } from "./DonutChart/DonutChart.types";
 export type { MultiSegmentDonutChartProps, DonutSegment, } from "./DonutChart/MultiSegmentDonutChart.types";
-export type { HeatmapProps } from "./Heatmap/Heatmap.types";
-export type { FunnelChartProps, FunnelChartDataPoint, } from "./FunnelChart/FunnelChart.types";
-export type { ScatterPlotProps, ScatterPlotDataPoint, } from "./ScatterPlot/ScatterPlot.types";
+export type { HeatmapProps, HeatmapVariant } from "./Heatmap/Heatmap.types";
 export type { RadarChartProps, RadarChartSeries, } from "./RadarChart/RadarChart.types";
 export type { ComboChartProps, ComboChartConfig, SeriesType, } from "./ComboChart/ComboChart.types";
 export type { ActivityRingsProps, RingData, ActivityRingsThemeOverrides, } from "./ActivityRings/ActivityRings.types";

package/dist/components/charts/index.js

@@ -12,15 +12,13 @@ export { Heatmap } from './Heatmap/Heatmap.js';
 import './Heatmap/HeatmapCell.js';
 import 'react/jsx-runtime';
 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';
+export { calculateIntensity, createGridMatrix, formatAxisLabel, getDefaultTooltipContent, processHeatmapData } from './Heatmap/utils/heatmapUtils.js';
 export { RadarChart } from './RadarChart/RadarChart.js';
 export { ComboChart } from './ComboChart/ComboChart.js';
 export { ActivityRings } from './ActivityRings/ActivityRings.js';
 export { LollipopChart } from './LollipopChart/LollipopChart.js';
 export { LOLLIPOP_CHART_DEFAULTS } from './LollipopChart/LollipopChart.types.js';
-export { ChartTooltip } from './shared/ChartTooltip/ChartTooltip.js';
+export { ChartTooltip } from '../core/shared/ChartTooltip/ChartTooltip.js';
 export { ChartLegend } from './shared/ChartLegend/ChartLegend.js';
 export { XAxis } from './shared/ChartAxis/XAxis.js';
 export { YAxis } from './shared/ChartAxis/YAxis.js';

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

@@ -3,7 +3,7 @@
  * Uses fixed Tailwind styling for consistency across charts
  */
 const chartTextTheme = {
-    baseStyle: "transition-all duration-200 text-xs  text-[var(--color-text-secondary)]/80 fill-[var(--color-text-secondary)]/80 font-medium select-none",
+    baseStyle: "transition-all duration-[var(--motion-duration-base)] text-xs  text-[var(--color-text-secondary)]/80 fill-[var(--color-text-secondary)]/80 font-medium select-none",
 };
 
 export { chartTextTheme };

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

@@ -4,4 +4,4 @@ export { ChartMarker } from './ChartMarker';
 export { HorizontalGrid } from './ChartGrid';
 export { ChartText } from './ChartText';
 export { XAxis, YAxis } from './ChartAxis';
-export { ChartTooltip } from './ChartTooltip';
+export { ChartTooltip } from '../../core/shared/ChartTooltip';

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

@@ -19,7 +19,7 @@ const chartTheme = {
             axis: "stroke-[var(--color-border)]",
             text: "fill-[var(--color-text-secondary)]",
             background: "fill-[var(--color-background)]",
-            hover: "fill-[var(--color-background-secondary)]",
+            hover: "fill-[var(--color-surface)]",
             disabled: "fill-[var(--color-background-disabled)]",
         },
         opacity: {
@@ -28,8 +28,8 @@ const chartTheme = {
             disabled: "opacity-50",
         },
         transitions: {
-            default: "transition-all duration-200",
-            hover: "transition-all duration-150",
+            default: "transition-all duration-[var(--motion-duration-base)]",
+            hover: "transition-all duration-[var(--motion-duration-fast)]",
         },
     },
     variants: {

package/dist/components/charts/utils/animation-utils.d.ts

@@ -132,10 +132,6 @@ export declare const CIRCULAR_CHART_ANIMATIONS: {
 export declare const CROSSHAIR_FADE_TRANSITION: Transition;
 /** Crosshair line tracking the pointer between data points. */
 export declare const CROSSHAIR_FOLLOW_TRANSITION: Transition;
-/** Tooltip pop-in: springy position/scale with a quick opacity/scale settle. */
-export declare const TOOLTIP_ENTER_TRANSITION: Transition;
-/** Tooltip pop-out. */
-export declare const TOOLTIP_EXIT_TRANSITION: Transition;
 /** Circular-chart segment hover dim/lift (opacity fade + scale pop). */
 export declare const SEGMENT_HOVER_TRANSITION: Transition;
 /** Rise/draw duration for line & area entrances (and the shared LineRenderer). */
@@ -150,9 +146,6 @@ export declare const STACKED_BAR_STAGGER = 0.08;
 export declare const BAR_STACK_CATEGORY_DELAY = 0.25;
 /** Shared BarRenderer stacked-mode per-segment stagger. */
 export declare const BAR_STACK_SEGMENT_STAGGER = 0.12;
-/** ScatterPlot per-point stagger + grow duration. */
-export declare const SCATTER_POINT_STAGGER = 0.01;
-export declare const SCATTER_POINT_DURATION = 0.3;
 /** Marker pop-in spring (line/area dots). */
 export declare const DOT_SPRING: {
     type: "spring";
@@ -204,3 +197,15 @@ export declare function barEntranceTransition(delay: number, hasAnimated: boolea
  * `barEntranceTransition`.
  */
 export declare function stackedSegmentTransition(delay: number, hasAnimated: boolean): Transition;
+/** Heatmap cell fade-in duration (seconds). */
+export declare const HEATMAP_CELL_FADE_DURATION = 0.35;
+/** Per-diagonal stagger for the heatmap cell entrance (seconds). */
+export declare const HEATMAP_CELL_STAGGER = 0.02;
+/** Cap on the entrance stagger, so a large grid still settles quickly (seconds). */
+export declare const HEATMAP_CELL_MAX_DELAY = 0.3;
+/** Deterministic entrance delay for the cell at (row, col). */
+export declare function heatmapCellDelay(row: number, col: number): number;
+/** Cell hover scale-up (`whileHover`). */
+export declare const HEATMAP_CELL_HOVER_TRANSITION: Transition;
+/** Cell press scale-down (`whileTap`). */
+export declare const HEATMAP_CELL_TAP_TRANSITION: Transition;