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

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

@@ -1,17 +1,29 @@
 /**
- * Heatmap theme configuration
- * Uses production-ready CSS variables from global.scss
+ * Heatmap theme configuration.
+ * CSS variables only (CLAUDE.md §3) — no raw Tailwind greys.
  */
 const heatmapTheme = {
-    // Container with variants handled inline
     containerStyle: "relative w-full h-full min-h-[200px] flex flex-col",
-    // Grid container (applied via inline styles for CSS Grid)
+    // `default` adds nothing; `minimal` tightens the frame.
+    variants: {
+        default: "",
+        minimal: "p-2",
+    },
+    // Grid container (CSS Grid template comes from inline styles).
     gridStyle: "absolute inset-0",
-    // Base cell styles (individual cells add opacity via inline styles)
-    cellBaseStyle: "relative w-full h-full cursor-pointer border border-transparent transition-all duration-500 animate-[flicker_0.6s_ease-out_forwards]",
-    // Axis labels using CSS variables for dark mode support
+    // Cells: motion owns opacity and transform, so the CSS transition lists
+    // background-color only — a `transition-all` here re-interpolates the
+    // hover/tap scale every frame (CLAUDE.md §12).
+    cellBaseStyle: "relative w-full h-full rounded-sm border border-transparent transition-[background-color] duration-[var(--motion-duration-fast)]",
+    // Missing data: a hairline well, never a painted cell. `border` supplies the
+    // width — `border-[var(--color-border)]` alone only sets border-color, and
+    // Tailwind's preflight zeroes border-width by default, so without it this
+    // painted nothing (this style is applied standalone by the parent's null
+    // branch, not merged with cellBaseStyle's own `border` utility).
+    cellNullStyle: "bg-transparent border border-[var(--color-border)]",
+    // Optional content rendered inside a cell.
+    cellOverlayStyle: "absolute inset-0 flex items-center justify-center text-sm font-medium text-[var(--color-text-primary)]",
     axisLabelStyle: "text-xs text-[var(--color-text-secondary)] font-medium select-none",
-    // Legend using correct CSS variables
     legendStyle: "w-full space-y-1.5 mt-3",
 };
 

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

@@ -1,9 +1,8 @@
 import { ReactNode } from 'react';
-import { BaseChartProps, ChartConfig } from '../types/chart.types';
-/**
- * Semantic color options for the heatmap
- */
-export type SemanticColor = 'primary' | 'success' | 'warning' | 'danger';
+import { BaseChartProps, ChartConfig, ChartLegendPosition, StandardChartDisplayProps } from '../types/chart.types';
+import type { SemanticColor } from '../../../utils/colorUtils';
+/** Heatmap has no gradient fill, so it narrows the family's ChartVariant. */
+export type HeatmapVariant = 'default' | 'minimal';
 /**
  * Heatmap data point structure
  * @property {string | number} x - X-axis category (e.g., day, month, hour)
@@ -25,6 +24,8 @@ export interface HeatmapCellProps {
     intensity: number;
     minOpacity?: number;
     color?: string;
+    /** Entrance delay in seconds, computed by the parent from the cell's grid position */
+    delay?: number;
     className?: string;
     onClick?: (data: HeatmapDataPoint) => void;
     onHover?: (data: HeatmapDataPoint, event: React.MouseEvent) => void;
@@ -33,93 +34,59 @@ export interface HeatmapCellProps {
     children?: ReactNode;
 }
 /**
- * Color scale configuration
- */
-export interface HeatmapColorScale {
-    /** Custom color steps from light to dark */
-    colors?: string[];
-    /** Number of color steps (default: 10) */
-    steps?: number;
-    /** Minimum opacity for null/zero values */
-    minOpacity?: number;
-}
-/**
- * Heatmap layout configuration
- */
-export interface HeatmapLayout {
-    /** Gap between cells */
-    gap?: number | string;
-}
-/**
- * Heatmap axis configuration
+ * 🔴 `Pick` of StandardChartDisplayProps, never `extends` — see the rule on
+ * StandardVisualProps in chart.types.ts. `showGrid`/`theme` are meaningless
+ * here and `variant` is narrowed below, so none of the three are picked.
+ *
+ * `enableKeyboardNavigation` is omitted from BaseChartProps: the grid has no
+ * arrow-key roving navigation, so advertising the prop would promise behaviour
+ * the component doesn't have — exactly the failure mode that rule describes.
+ * (Individual cells remain Enter/Space activatable via native `tabIndex`/
+ * `onKeyDown` when `onCellClick` is set — that part is unrelated to this prop,
+ * which is specifically about grid-level arrow-key navigation.)
  */
-export interface HeatmapAxisConfig {
-    /** Show X-axis labels */
-    showXAxis?: boolean;
-    /** Show Y-axis labels */
-    showYAxis?: boolean;
+export interface HeatmapProps extends Omit<BaseChartProps, 'data' | 'config' | 'enableKeyboardNavigation'>, Pick<StandardChartDisplayProps, 'showXAxis' | 'showYAxis' | 'minValue' | 'maxValue'> {
+    /**
+     * Colour-ramp legend position. Same union as every other chart, but redeclared
+     * rather than picked so it carries Heatmap's own documentation: this legend is
+     * a continuous ramp (see HeatmapLegend), not the series swatches `config`
+     * drives elsewhere, and it defaults to `'bottom'` rather than resolving to
+     * `'none'` for a single-series config — the ramp IS a heatmap's value key.
+     * @default 'bottom'
+     */
+    legend?: ChartLegendPosition;
+    /** Heatmap data array — optional when using ChartContainer context */
+    data?: HeatmapDataPoint[];
+    /** Chart configuration — optional when using ChartContainer context */
+    config?: ChartConfig;
+    /** Semantic colour for heatmap cells @default 'primary' */
+    color?: SemanticColor;
+    /** Visual variant @default 'default' */
+    variant?: HeatmapVariant;
     /** X-axis label formatter */
     xAxisFormatter?: (value: string | number, index: number) => string;
     /** Y-axis label formatter */
     yAxisFormatter?: (value: string | number, index: number) => string;
-    /** X-axis label rotation */
-    xAxisRotation?: number;
-    /** Y-axis label rotation */
-    yAxisRotation?: number;
-}
-/**
- * Heatmap tooltip configuration
- */
-export interface HeatmapTooltipConfig {
-    /** Show tooltip on hover */
-    enabled?: boolean;
-    /** Custom tooltip formatter */
-    formatter?: (data: HeatmapDataPoint) => ReactNode;
-    /** Tooltip delay in ms */
-    delay?: number;
-}
-/**
- * Heatmap legend configuration
- */
-export interface HeatmapLegendConfig {
-    /** Show legend */
-    enabled?: boolean;
-    /** Custom labels for min and max values */
-    labels?: {
+    /**
+     * Captions at each end of the colour ramp.
+     * @default { min: 'Low activity', max: 'High activity' }
+     */
+    legendLabels?: {
         min?: string;
         max?: string;
     };
-}
-/**
- * Main Heatmap component props
- */
-export interface HeatmapProps extends Omit<BaseChartProps, 'data' | 'config' | 'variant' | 'theme'> {
-    /** Heatmap data array - optional when using ChartContainer context */
-    data?: HeatmapDataPoint[];
-    /** Chart configuration - optional when using ChartContainer context */
-    config?: ChartConfig;
-    /** Semantic color for heatmap cells (primary, success, warning, danger) */
-    color?: SemanticColor;
-    /** Color scale configuration */
-    colorScale?: HeatmapColorScale;
-    /** Layout configuration */
-    layout?: HeatmapLayout;
-    /** Axis configuration */
-    axis?: HeatmapAxisConfig;
-    /** Tooltip configuration */
-    tooltip?: HeatmapTooltipConfig;
-    /** Legend configuration */
-    legend?: HeatmapLegendConfig;
-    /** Custom value range [min, max] - if not provided, will be calculated from data */
-    valueRange?: [number, number];
-    /** Cell click handler */
-    onCellClick?: (data: HeatmapDataPoint) => void;
+    /** Gap between cells @default 6 */
+    cellGap?: number | string;
+    /** Opacity floor for zero/lowest-intensity cells @default 0.1 */
+    minOpacity?: number;
     /** Custom cell renderer */
     cellRenderer?: (props: HeatmapCellProps) => ReactNode;
-    /** Additional CSS classes */
-    className?: string;
-    /** Chart variant */
-    variant?: 'default' | 'minimal' | 'bordered';
+    /** Cell click handler */
+    onCellClick?: (data: HeatmapDataPoint) => void;
+    /** Show the hover tooltip @default true */
+    showTooltip?: boolean;
+    /** Custom tooltip content */
+    tooltipFormatter?: (data: HeatmapDataPoint) => ReactNode;
 }
 /**
  * Processed heatmap data with calculated values

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)})`