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

package/dist/components/charts/index.js

@@ -1,5 +1,7 @@
 export { ChartContainer } from './ChartContainer.js';
 export { BarChart } from './BarChart/BarChart.js';
+export { HorizontalBarChart } from './HorizontalBarChart/HorizontalBarChart.js';
+export { HORIZONTAL_BAR_CHART_DEFAULTS } from './HorizontalBarChart/HorizontalBarChart.types.js';
 export { StackedBarChart } from './StackedBarChart/StackedBarChart.js';
 export { STACKED_BAR_CHART_DEFAULTS } from './StackedBarChart/StackedBarChart.types.js';
 export { LineChart } from './LineChart/LineChart.js';
@@ -10,16 +12,18 @@ 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 { ChartTooltip } from './shared/ChartTooltip/ChartTooltip.js';
+export { LollipopChart } from './LollipopChart/LollipopChart.js';
+export { LOLLIPOP_CHART_DEFAULTS } from './LollipopChart/LollipopChart.types.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';
+import './shared/ChartAxis/ValueXAxis.js';
+import './shared/ChartAxis/CategoryYAxis.js';
 export { ChartText } from './shared/ChartText/ChartText.js';
 export { ChartMarker } from './shared/ChartMarker/ChartMarker.js';
 export { ChartCrosshair } from './shared/ChartCrosshair/ChartCrosshair.js';

package/dist/components/charts/shared/ChartAxis/CategoryYAxis.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import type { CategoryYAxisProps } from "./ChartAxis.types";
+/**
+ * CategoryYAxis component for charts
+ * Renders a vertical CATEGORY axis: one label per category down the left, with
+ * optional tick marks.
+ *
+ * This is `XAxis` rotated. Labels sit to the LEFT of the axis line and are
+ * end-anchored, so a ragged set of category names ("United Kingdom", "Italy") stays
+ * flush against the plot — the caller is responsible for reserving enough left margin,
+ * since unlike a bottom axis there is no shared constant that can know how wide a
+ * category name will be.
+ */
+export declare const CategoryYAxis: React.FC<CategoryYAxisProps>;

package/dist/components/charts/shared/ChartAxis/CategoryYAxis.js

@@ -0,0 +1,35 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../../../utils/cn.js';
+import { ChartText } from '../ChartText/ChartText.js';
+
+/**
+ * CategoryYAxis component for charts
+ * Renders a vertical CATEGORY axis: one label per category down the left, with
+ * optional tick marks.
+ *
+ * This is `XAxis` rotated. Labels sit to the LEFT of the axis line and are
+ * end-anchored, so a ragged set of category names ("United Kingdom", "Italy") stays
+ * flush against the plot — the caller is responsible for reserving enough left margin,
+ * since unlike a bottom axis there is no shared constant that can know how wide a
+ * category name will be.
+ */
+const CategoryYAxis = React__default.memo(({ data, x, y, height, categoryHeight, categoryGap = 0, show = true, className, showTicks = true, tickLength = 6, tickPadding = 8, textAnchor = "end", labelFormatter, maxLabelWidth = 100, }) => {
+    if (!show)
+        return null;
+    const formatLabel = (item, index) => {
+        if (labelFormatter) {
+            return labelFormatter(item, index);
+        }
+        return item.name || item.label || String(index);
+    };
+    const getTickY = (index) => y + index * (categoryHeight + categoryGap) + categoryHeight / 2;
+    return (jsxs("g", { className: cn("chart-category-y-axis", className), children: [jsx("line", { x1: x, y1: y, x2: x, y2: y + height, className: "stroke-[var(--color-border)]", strokeWidth: 1 }), data.map((item, index) => {
+                const tickY = getTickY(index);
+                const label = formatLabel(item, index);
+                return (jsxs("g", { children: [showTicks && (jsx("line", { x1: x - tickLength, y1: tickY, x2: x, y2: tickY, className: "stroke-[var(--color-border)]", strokeWidth: 1 })), jsx(ChartText, { x: x - tickLength - tickPadding, y: tickY, textAnchor: textAnchor, dominantBaseline: "middle", maxWidth: maxLabelWidth, truncate: !!maxLabelWidth, children: label })] }, index));
+            })] }));
+});
+CategoryYAxis.displayName = "CategoryYAxis";
+
+export { CategoryYAxis };

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

@@ -1,13 +1,14 @@
 import type { ChartDataPoint } from '../../types/chart.types';
+/**
+ * 🔴 No `color` / `fontSize` here on purpose. Axis lines and labels are themed via CSS
+ * variables (`stroke-[var(--color-border)]` and the text utilities), so both props were
+ * accepted and then ignored. Restyle an axis with `className`, or change the token.
+ */
 export interface BaseAxisProps {
     /** Whether to show the axis */
     show?: boolean;
     /** Custom className for styling */
     className?: string;
-    /** Color of the axis line and text */
-    color?: string;
-    /** Font size for axis labels */
-    fontSize?: number;
     /** Whether to show tick marks */
     showTicks?: boolean;
     /** Length of tick marks */
@@ -64,9 +65,73 @@ export interface YAxisProps extends BaseAxisProps {
     showGrid?: boolean;
     /** Width of the chart area for grid lines */
     gridWidth?: number;
+    /** Custom className for the grid lines this axis draws (`className` styles the axis group) */
+    gridClassName?: string;
     /** Custom tick values */
     ticks?: number[];
 }
+/**
+ * A VALUE axis rendered horizontally (ticks along the bottom).
+ *
+ * The mirror of `YAxisProps`, for charts whose value axis runs left-to-right
+ * (HorizontalBarChart). Note `XAxis` is a CATEGORY axis despite also being
+ * horizontal — the two axis families are split by what they measure, not by
+ * which way they point.
+ */
+export interface ValueXAxisProps extends BaseAxisProps {
+    /** Minimum value for the axis */
+    min: number;
+    /** Maximum value for the axis */
+    max: number;
+    /** Number of ticks */
+    tickCount?: number;
+    /** X position of the axis */
+    x: number;
+    /** Y position of the axis (its baseline) */
+    y: number;
+    /** Width of the axis */
+    width: number;
+    /** Text anchor for labels */
+    textAnchor?: 'start' | 'middle' | 'end';
+    /** Custom tick formatter */
+    tickFormatter?: (value: number) => string;
+    /** Whether to draw grid lines up from each tick */
+    showGrid?: boolean;
+    /** Height of the chart area for grid lines */
+    gridHeight?: number;
+    /** Custom tick values */
+    ticks?: number[];
+}
+/**
+ * A CATEGORY axis rendered vertically (one label per category, down the left).
+ *
+ * The mirror of `XAxisProps`, for charts whose categories stack vertically
+ * (HorizontalBarChart).
+ */
+export interface CategoryYAxisProps extends BaseAxisProps {
+    /** Data points for the axis */
+    data: Array<{
+        name?: string;
+        label?: string;
+        [key: string]: string | number | null | undefined;
+    }>;
+    /** X position of the axis (its line) */
+    x: number;
+    /** Y position of the axis */
+    y: number;
+    /** Height of the axis */
+    height: number;
+    /** Height of each category/bar group */
+    categoryHeight: number;
+    /** Gap between categories */
+    categoryGap?: number;
+    /** Text anchor for labels */
+    textAnchor?: 'start' | 'middle' | 'end';
+    /** Custom label formatter */
+    labelFormatter?: (value: ChartDataPoint, index: number) => string;
+    /** Maximum width for labels before truncation */
+    maxLabelWidth?: number;
+}
 export interface AxisTickProps {
     /** Value of the tick */
     value: number | string;
@@ -82,10 +147,6 @@ export interface AxisTickProps {
     textAnchor?: 'start' | 'middle' | 'end';
     /** Custom formatter */
     formatter?: (value: number | string) => string;
-    /** Font size */
-    fontSize?: number;
-    /** Color */
-    color?: string;
     /** Rotation angle */
     rotation?: number;
     /** Maximum width before truncation */

package/dist/components/charts/shared/ChartAxis/ValueXAxis.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import type { ValueXAxisProps } from "./ChartAxis.types";
+/**
+ * ValueXAxis component for charts
+ * Renders a horizontal VALUE axis: nice ticks, labels below, optional grid lines
+ * rising from each tick.
+ *
+ * This is `YAxis` rotated — same Heckbert nice-ticks and the same tick formatting,
+ * so a horizontal chart's value ticks read identically to a vertical one's. Kept as a
+ * separate component rather than an `orientation` prop on YAxis because every position
+ * calculation and text anchor differs; a branchy shared axis would be harder to follow
+ * than two flat mirrors.
+ */
+export declare const ValueXAxis: React.FC<ValueXAxisProps>;

package/dist/components/charts/shared/ChartAxis/ValueXAxis.js

@@ -0,0 +1,64 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../../../utils/cn.js';
+import { ChartText } from '../ChartText/ChartText.js';
+import { generateNiceTicks } from '../../utils/chart-validation.js';
+
+/**
+ * ValueXAxis component for charts
+ * Renders a horizontal VALUE axis: nice ticks, labels below, optional grid lines
+ * rising from each tick.
+ *
+ * This is `YAxis` rotated — same Heckbert nice-ticks and the same tick formatting,
+ * so a horizontal chart's value ticks read identically to a vertical one's. Kept as a
+ * separate component rather than an `orientation` prop on YAxis because every position
+ * calculation and text anchor differs; a branchy shared axis would be harder to follow
+ * than two flat mirrors.
+ */
+const ValueXAxis = React__default.memo(({ min, max, tickCount = 5, x, y, width, show = true, className, showTicks = true, tickLength = 6, tickPadding = 12, textAnchor = "middle", tickFormatter, showGrid = false, gridHeight = 0, ticks: customTicks, }) => {
+    if (!show)
+        return null;
+    // Generate tick values using Heckbert's nice numbers algorithm (same as YAxis)
+    const ticks = (() => {
+        if (customTicks)
+            return customTicks;
+        if (tickCount <= 1)
+            return [min];
+        const { ticks: niceTicks } = generateNiceTicks(min, max, tickCount);
+        return niceTicks;
+    })();
+    // Identical to YAxis.formatTick — the two must agree, or the same dataset would
+    // label differently depending on orientation.
+    const formatTick = (value) => {
+        if (tickFormatter) {
+            return tickFormatter(value);
+        }
+        if (Math.abs(value) >= 1000000) {
+            return `${Math.round(value / 1000000)}M`;
+        }
+        else if (Math.abs(value) >= 1000) {
+            return `${Math.round(value / 1000)}K`;
+        }
+        else if (Number.isInteger(value) ||
+            Math.abs(value - Math.round(value)) < 0.01) {
+            return Math.round(value).toString();
+        }
+        else {
+            return value.toFixed(1);
+        }
+    };
+    const getTickX = (value) => {
+        if (max === min) {
+            return x + width / 2; // Center position when no range
+        }
+        const ratio = (value - min) / (max - min);
+        return x + ratio * width;
+    };
+    return (jsxs("g", { className: cn("chart-value-x-axis", className), children: [jsx("line", { x1: x, y1: y, x2: x + width, y2: y, className: "stroke-[var(--color-border)]", strokeWidth: 1 }), ticks.map((tick, index) => {
+                const tickX = getTickX(tick);
+                return (jsxs("g", { children: [showGrid && gridHeight > 0 && (jsx("line", { x1: tickX, y1: y, x2: tickX, y2: y - gridHeight, className: "opacity-80 stroke-[var(--color-border)]", strokeWidth: 1 })), showTicks && (jsx("line", { x1: tickX, y1: y, x2: tickX, y2: y + tickLength, className: "stroke-[var(--color-border)]", strokeWidth: 1 })), jsx(ChartText, { x: tickX, y: y + tickLength + tickPadding, textAnchor: textAnchor, children: formatTick(tick) })] }, index));
+            })] }));
+});
+ValueXAxis.displayName = "ValueXAxis";
+
+export { ValueXAxis };

package/dist/components/charts/shared/ChartAxis/XAxis.js

@@ -7,7 +7,7 @@ import { ChartText } from '../ChartText/ChartText.js';
  * XAxis component for charts
  * Renders horizontal axis with labels and optional tick marks
  */
-const XAxis = React__default.memo(({ data, x, y, width, categoryWidth, categoryGap = 0, show = true, className, color = "currentColor", showTicks = true, tickLength = 6, tickPadding = 12, textAnchor = "middle", labelRotation = 0, labelFormatter, maxLabelWidth = 100, alignWithEdge = false, }) => {
+const XAxis = React__default.memo(({ data, x, y, width, categoryWidth, categoryGap = 0, show = true, className, showTicks = true, tickLength = 6, tickPadding = 12, textAnchor = "middle", labelRotation = 0, labelFormatter, maxLabelWidth = 100, alignWithEdge = false, }) => {
     if (!show)
         return null;
     const formatLabel = (item, index) => {

package/dist/components/charts/shared/ChartAxis/YAxis.js

@@ -8,7 +8,7 @@ import { generateNiceTicks } from '../../utils/chart-validation.js';
  * YAxis component for charts
  * Renders vertical axis with labels, optional tick marks, and grid lines
  */
-const YAxis = React__default.memo(({ min, max, tickCount = 5, x, y, height, show = true, className, color = "currentColor", showTicks = true, tickLength = 6, tickPadding = 8, textAnchor = "end", tickFormatter, showGrid = false, gridWidth = 0, ticks: customTicks, }) => {
+const YAxis = React__default.memo(({ min, max, tickCount = 5, x, y, height, show = true, className, showTicks = true, tickLength = 6, tickPadding = 8, textAnchor = "end", tickFormatter, showGrid = false, gridWidth = 0, gridClassName, ticks: customTicks, }) => {
     if (!show)
         return null;
     // Generate tick values using Heckbert's nice numbers algorithm
@@ -48,7 +48,7 @@ const YAxis = React__default.memo(({ min, max, tickCount = 5, x, y, height, show
     };
     return (jsxs("g", { className: cn("chart-y-axis", className), children: [jsx("line", { x1: x, y1: y, x2: x, y2: y + height, className: "stroke-[var(--color-border)]", strokeWidth: 1 }), ticks.map((tick, index) => {
                 const tickY = getTickY(tick);
-                return (jsxs("g", { children: [showGrid && gridWidth > 0 && (jsx("line", { x1: x, y1: tickY, x2: x + gridWidth, y2: tickY, className: "opacity-80 stroke-[var(--color-border)]", strokeWidth: 1 })), showTicks && (jsx("line", { x1: x - tickLength, y1: tickY, x2: x, y2: tickY, className: "stroke-[var(--color-border)]", strokeWidth: 1 })), jsx(ChartText, { x: x - tickLength - tickPadding, y: tickY, textAnchor: textAnchor, dominantBaseline: "middle", children: formatTick(tick) })] }, index));
+                return (jsxs("g", { children: [showGrid && gridWidth > 0 && (jsx("line", { x1: x, y1: tickY, x2: x + gridWidth, y2: tickY, className: cn("opacity-80 stroke-[var(--color-border)]", gridClassName), strokeWidth: 1 })), showTicks && (jsx("line", { x1: x - tickLength, y1: tickY, x2: x, y2: tickY, className: "stroke-[var(--color-border)]", strokeWidth: 1 })), jsx(ChartText, { x: x - tickLength - tickPadding, y: tickY, textAnchor: textAnchor, dominantBaseline: "middle", children: formatTick(tick) })] }, index));
             })] }));
 });
 

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

@@ -1,3 +1,5 @@
 export { XAxis } from './XAxis';
 export { YAxis } from './YAxis';
-export type { BaseAxisProps, XAxisProps, YAxisProps, AxisTickProps, } from './ChartAxis.types';
+export { ValueXAxis } from './ValueXAxis';
+export { CategoryYAxis } from './CategoryYAxis';
+export type { BaseAxisProps, XAxisProps, YAxisProps, ValueXAxisProps, CategoryYAxisProps, AxisTickProps, } from './ChartAxis.types';

package/dist/components/charts/shared/ChartGrid/HorizontalGrid.d.ts

@@ -12,8 +12,6 @@ export interface HorizontalGridProps {
     lineCount?: number;
     /** Whether to show the grid */
     show?: boolean;
-    /** Grid line color */
-    color?: string;
     /** Additional CSS classes */
     className?: string;
     /** Custom tick positions (overrides lineCount) */

package/dist/components/charts/shared/ChartGrid/HorizontalGrid.js

@@ -5,7 +5,7 @@ import { cn } from '../../../../utils/cn.js';
  * HorizontalGrid component for charts
  * Renders horizontal grid lines at specified intervals
  */
-const HorizontalGrid = ({ x, y, width, height, lineCount = 5, show = true, color = "currentColor", className, tickPositions, }) => {
+const HorizontalGrid = ({ x, y, width, height, lineCount = 5, show = true, className, tickPositions, }) => {
     if (!show)
         return null;
     // Generate grid line positions

package/dist/components/charts/shared/ChartGrid/VerticalGrid.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+export interface VerticalGridProps {
+    /** X position to start the grid */
+    x: number;
+    /** Y position to start the grid */
+    y: number;
+    /** Width of the grid area */
+    width: number;
+    /** Height of the grid area */
+    height: number;
+    /** Number of grid lines */
+    lineCount?: number;
+    /** Whether to show the grid */
+    show?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+    /** Custom tick positions (overrides lineCount) */
+    tickPositions?: number[];
+}
+/**
+ * VerticalGrid component for charts
+ * Renders vertical grid lines at specified intervals — the mirror of HorizontalGrid,
+ * for charts whose VALUE axis runs horizontally (e.g. HorizontalBarChart), where the
+ * reference lines a reader traces are vertical.
+ *
+ * Deliberately has NO `color` prop: the line is themed via `stroke-[var(--color-border)]`.
+ * Don't add one here without wiring it up.
+ */
+export declare const VerticalGrid: React.FC<VerticalGridProps>;

package/dist/components/charts/shared/ChartGrid/VerticalGrid.js

@@ -0,0 +1,26 @@
+import { jsx } from 'react/jsx-runtime';
+import { cn } from '../../../../utils/cn.js';
+
+/**
+ * VerticalGrid component for charts
+ * Renders vertical grid lines at specified intervals — the mirror of HorizontalGrid,
+ * for charts whose VALUE axis runs horizontally (e.g. HorizontalBarChart), where the
+ * reference lines a reader traces are vertical.
+ *
+ * Deliberately has NO `color` prop: the line is themed via `stroke-[var(--color-border)]`.
+ * Don't add one here without wiring it up.
+ */
+const VerticalGrid = ({ x, y, width, height, lineCount = 5, show = true, className, tickPositions, }) => {
+    if (!show)
+        return null;
+    // Generate grid line positions
+    const positions = tickPositions ||
+        Array.from({ length: lineCount }, (_, i) => {
+            if (lineCount <= 1)
+                return x;
+            return x + (i * width) / (lineCount - 1);
+        });
+    return (jsx("g", { className: cn("chart-vertical-grid", className), children: positions.map((lineX, index) => (jsx("line", { x1: lineX, y1: y, x2: lineX, y2: y + height, className: "opacity-80 stroke-[var(--color-border)]", strokeWidth: 1 }, index))) }));
+};
+
+export { VerticalGrid };

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

@@ -1,2 +1,4 @@
 export { HorizontalGrid } from './HorizontalGrid';
 export type { HorizontalGridProps } from './HorizontalGrid';
+export { VerticalGrid } from './VerticalGrid';
+export type { VerticalGridProps } from './VerticalGrid';

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

@@ -16,7 +16,13 @@ const ChartMarker = ({ cx, cy, radius, colorClass, className, strokeWidth = 2, f
     const currentRadius = isHovered ? radius * 1.1 : radius;
     return (jsx("g", { className: "chart-marker", children: jsx("circle", { cx: cx, cy: cy, r: currentRadius, className: baseClasses, fill: fillColor || "white", stroke: strokeColor, strokeWidth: strokeWidth, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), style: {
                 transition: 'linear 0.2s ease-out',
-                cursor: 'pointer'
+                cursor: 'pointer',
+                // `fill-white`/`stroke-2` in the theme's baseStyle are CSS class rules, which
+                // beat the `fill`/`stroke` presentation attributes below in the cascade — so an
+                // explicit fillColor/strokeColor prop needs inline style (highest specificity)
+                // to actually take effect, not just the attribute.
+                ...(fillColor ? { fill: fillColor } : {}),
+                ...(strokeColor ? { stroke: strokeColor } : {}),
             } }) }));
 };
 

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

@@ -5,23 +5,21 @@
 const chartTheme = {
     baseStyle: {
         colors: {
-            // Default series colors using your design system colors
+            // Categorical series palette — dedicated chart-N tokens, decoupled
+            // from the semantic status colors (primary/success/warning/danger).
             series: [
-                "fill-[var(--color-primary)] stroke-[var(--color-primary)]", // Primary
-                "fill-[var(--color-warning)] stroke-[var(--color-warning)]", // Warning/Orange
-                "fill-[var(--color-success)] stroke-[var(--color-success)]", // Success/Green
-                "fill-[var(--color-danger)] stroke-[var(--color-danger)]", // Danger/Red
-                "fill-[var(--color-primary-400)] stroke-[var(--color-primary-400)]", // Primary lighter
-                "fill-[var(--color-warning-400)] stroke-[var(--color-warning-400)]", // Warning lighter
-                "fill-[var(--color-success-400)] stroke-[var(--color-success-400)]", // Success lighter
-                "fill-[var(--color-danger-400)] stroke-[var(--color-danger-400)]", // Danger lighter
+                "var(--color-chart-1)",
+                "var(--color-chart-2)",
+                "var(--color-chart-3)",
+                "var(--color-chart-4)",
+                "var(--color-chart-5)",
             ],
             // Chart infrastructure colors
             grid: "stroke-[var(--color-border)]",
             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: {
@@ -30,31 +28,28 @@ 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: {
         default: {
             colors: [
-                "fill-[var(--color-primary)] stroke-[var(--color-primary)]",
-                "fill-[var(--color-warning)] stroke-[var(--color-warning)]",
-                "fill-[var(--color-success)] stroke-[var(--color-success)]",
-                "fill-[var(--color-danger)] stroke-[var(--color-danger)]",
-                "fill-[var(--color-primary-400)] stroke-[var(--color-primary-400)]",
-                "fill-[var(--color-warning-400)] stroke-[var(--color-warning-400)]",
-                "fill-[var(--color-success-400)] stroke-[var(--color-success-400)]",
-                "fill-[var(--color-danger-400)] stroke-[var(--color-danger-400)]",
+                "var(--color-chart-1)",
+                "var(--color-chart-2)",
+                "var(--color-chart-3)",
+                "var(--color-chart-4)",
+                "var(--color-chart-5)",
             ],
         },
         minimal: {
             colors: [
-                "fill-[var(--color-neutral-600)] stroke-[var(--color-neutral-600)]",
-                "fill-[var(--color-neutral-500)] stroke-[var(--color-neutral-500)]",
-                "fill-[var(--color-neutral-400)] stroke-[var(--color-neutral-400)]",
-                "fill-[var(--color-neutral-300)] stroke-[var(--color-neutral-300)]",
-                "fill-[var(--color-neutral-700)] stroke-[var(--color-neutral-700)]",
-                "fill-[var(--color-neutral-800)] stroke-[var(--color-neutral-800)]",
+                "fill-[var(--color-mono-600)] stroke-[var(--color-mono-600)]",
+                "fill-[var(--color-mono-500)] stroke-[var(--color-mono-500)]",
+                "fill-[var(--color-mono-400)] stroke-[var(--color-mono-400)]",
+                "fill-[var(--color-mono-300)] stroke-[var(--color-mono-300)]",
+                "fill-[var(--color-mono-700)] stroke-[var(--color-mono-700)]",
+                "fill-[var(--color-mono-800)] stroke-[var(--color-mono-800)]",
             ],
         },
         gradient: {

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

@@ -52,8 +52,6 @@ export declare const CHART_DEFAULTS: {
     readonly showYAxis: true;
     readonly barRadius: 32;
     readonly dotRadius: 3;
-    readonly cellRadius: 4;
-    readonly radius: 20;
     readonly strokeWidth: 2;
     readonly gap: 4;
     readonly categoryGap: 16;
@@ -62,7 +60,6 @@ export declare const CHART_DEFAULTS: {
     readonly fillOpacity: 0.3;
     readonly showStroke: true;
     readonly showDots: false;
-    readonly orientation: "vertical" | "horizontal";
     readonly stacked: false;
     readonly variant: ChartVariant;
     readonly enableKeyboardNavigation: true;
@@ -93,10 +90,18 @@ export interface StandardChartDisplayProps {
     variant?: ChartVariant;
     theme?: ChartThemeOverrides;
 }
+/**
+ * The union of every chart's visual props.
+ *
+ * 🔴 Narrow this with `Omit` per chart — never `extends StandardVisualProps` wholesale.
+ * Doing so advertises other charts' props: they type-check, reach the generative schema,
+ * and do nothing. `BaseChartProps` does not extend HTMLAttributes, so they can't even be
+ * forwarded via `{...props}` — they land on a <div> as unknown attributes. Add a prop
+ * back to a chart only alongside an implementation that reads it.
+ */
 export interface StandardVisualProps {
     barRadius?: number;
     dotRadius?: number;
-    cellRadius?: number;
     radius?: number;
     strokeWidth?: number;
     gap?: number;
@@ -108,7 +113,6 @@ export interface StandardVisualProps {
     stacked?: boolean;
 }
 export interface BarChartSpecificProps {
-    orientation?: 'vertical' | 'horizontal';
     categoryGap?: number;
 }
 export interface StandardAxisConfig {

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

@@ -14,10 +14,8 @@ const CHART_DEFAULTS = {
     // Visual properties
     barRadius: 32, // For bar corners (rounded top)
     dotRadius: 3, // For line/area dot markers
-    cellRadius: 4, // For heatmap cells
-    radius: 20, // @deprecated Use barRadius, dotRadius, or cellRadius instead
     strokeWidth: 2,
-    gap: 4, // For bars, cells
+    gap: 4, // For bars
     categoryGap: 16, // For bar categories
     // Line/Area specific
     curved: true,
@@ -25,12 +23,8 @@ const CHART_DEFAULTS = {
     fillOpacity: 0.3,
     showStroke: true,
     showDots: false,
-    // Bar specific
-    orientation: 'vertical',
     // Layout
     stacked: false,
-    // Theme
-    variant: 'default',
     // Accessibility
     enableKeyboardNavigation: true,
 };

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;