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

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/theme/chart.theme.js

@@ -5,16 +5,14 @@
 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)]",
@@ -37,24 +35,21 @@ const chartTheme = {
     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.js

@@ -178,8 +178,6 @@ const CARTESIAN_ENTRANCE_DURATION = 0.7;
 const LINE_DOT_STAGGER = 0.06;
 /** Grouped-bar stagger (BarChart + shared BarRenderer grouped path). */
 const BAR_GROUP_STAGGER = 0.05;
-/** Stacked-bar per-category stagger (StackedBarChart). */
-const STACKED_BAR_STAGGER = 0.08;
 /** Shared BarRenderer stacked-mode per-category delay. */
 const BAR_STACK_CATEGORY_DELAY = 0.25;
 /** Shared BarRenderer stacked-mode per-segment stagger. */
@@ -261,4 +259,4 @@ function stackedSegmentTransition(delay, hasAnimated) {
     };
 }
 
-export { BAR_GROUP_STAGGER, BAR_SPRING, BAR_STACK_CATEGORY_DELAY, BAR_STACK_SEGMENT_STAGGER, CARTESIAN_ENTRANCE_DURATION, CIRCULAR_CHART_ANIMATIONS, CROSSHAIR_FADE_TRANSITION, CROSSHAIR_FOLLOW_TRANSITION, DOT_SPRING, HALO_FADE_TRANSITION, LINE_DOT_STAGGER, RING_FADE_TRANSITION, RISE_FROM_BASELINE, SCALE_FROM_CENTER, SCATTER_POINT_DURATION, SCATTER_POINT_STAGGER, SEGMENT_HOVER_TRANSITION, SPRING_PRESETS, STACKED_BAR_STAGGER, TOOLTIP_ENTER_TRANSITION, TOOLTIP_EXIT_TRANSITION, barEntranceTransition, dotEntranceTransition, getSpringAnimation, getStaggerDelay, riseTransition, stackedSegmentTransition };
+export { BAR_GROUP_STAGGER, BAR_SPRING, BAR_STACK_CATEGORY_DELAY, BAR_STACK_SEGMENT_STAGGER, CARTESIAN_ENTRANCE_DURATION, CIRCULAR_CHART_ANIMATIONS, CROSSHAIR_FADE_TRANSITION, CROSSHAIR_FOLLOW_TRANSITION, DOT_SPRING, HALO_FADE_TRANSITION, LINE_DOT_STAGGER, RING_FADE_TRANSITION, RISE_FROM_BASELINE, SCALE_FROM_CENTER, SCATTER_POINT_DURATION, SCATTER_POINT_STAGGER, SEGMENT_HOVER_TRANSITION, SPRING_PRESETS, TOOLTIP_ENTER_TRANSITION, TOOLTIP_EXIT_TRANSITION, barEntranceTransition, dotEntranceTransition, getSpringAnimation, getStaggerDelay, riseTransition, stackedSegmentTransition };

package/dist/components/charts/utils/bar-emphasis.d.ts

@@ -25,6 +25,16 @@ export interface BarEmphasisInput {
     isFocused: boolean;
     isAnyBarHovered: boolean;
     isGradientVariant: boolean;
+    /**
+     * Whether hover/focus gets the premium emphasis (glow ring + colored stroke + the
+     * stronger sibling dim). Defaults to `isGradientVariant`, since for column bars the
+     * two travel together — so BarChart and ComboChart are unaffected.
+     *
+     * Pass it explicitly for a chart whose fills are flat but which still wants the
+     * premium hover (HorizontalBarChart). The two really are separate axes: "how the bar
+     * is painted" vs "how it responds to hover".
+     */
+    premiumEmphasis?: boolean;
 }
 export interface BarEmphasisState {
     /** Hover OR keyboard focus, gradient variant only — drives ring + stroke. */
@@ -32,7 +42,7 @@ export interface BarEmphasisState {
     /** A sibling is hovered and this bar isn't — drives the dim. */
     shouldReduceOpacity: boolean;
 }
-export declare function deriveBarEmphasis({ isHovered, isFocused, isAnyBarHovered, isGradientVariant, }: BarEmphasisInput): BarEmphasisState;
+export declare function deriveBarEmphasis({ isHovered, isFocused, isAnyBarHovered, isGradientVariant, premiumEmphasis, }: BarEmphasisInput): BarEmphasisState;
 /**
  * Animated hover-dim opacity. Belongs in the motion `animate` prop, not
  * `style` — motion.path freezes plain style values at mount.
@@ -46,17 +56,36 @@ export declare function barFill({ isGradientVariant, gradientFill, isNull, shoul
     shouldReduceOpacity: boolean;
     fillColor: string;
 }): string;
-/** Stroke cascade: keyboard-focus ring › emphasis › resting hairline › none. */
-export declare function barStrokeStyle({ isFocused, isEmphasized, isGradientVariant, fillColor, }: {
+/**
+ * Stroke cascade: keyboard-focus ring › emphasis › resting hairline › none.
+ *
+ * `showRestingStroke` (default `true`) keeps the resting white hairline that gradient
+ * column bars carry. Set it `false` for bars that should read as flat shapes with no
+ * outline at rest — the focus and emphasis strokes still apply, so keyboard focus stays
+ * visible either way. Prefer this flag over re-deriving the cascade at a call site:
+ * the two hand-copies of this logic drifted once already (§19).
+ */
+export declare function barStrokeStyle({ isFocused, isEmphasized, isGradientVariant, fillColor, showRestingStroke, }: {
     isFocused: boolean;
     isEmphasized: boolean;
     isGradientVariant: boolean;
     fillColor: string;
+    showRestingStroke?: boolean;
 }): {
     stroke: string;
     strokeWidth: number | undefined;
     strokeOpacity: number;
 };
+/**
+ * The hover glow-ring filter alone. Split out of `BarSeriesDefs` so a chart with FLAT
+ * fills can still render the premium hover ring without emitting a gradient def it
+ * never references — `BarSeriesDefs` composes it, so both paths stay single-sourced
+ * and the ring can't drift between them.
+ */
+export declare const BarRingDef: React.FC<{
+    ringId: string;
+    color: string;
+}>;
 /**
  * Per-series SVG defs for the gradient variant: vertical gradient fill,
  * colored drop shadow, and the hover glow-ring filter. Render inside <defs>.

package/dist/components/charts/utils/bar-emphasis.js

@@ -16,9 +16,9 @@ const BAR_RING_STROKE_OPACITY = 0.24;
 function barRingStrokeWidth(barWidth) {
     return Math.min(14, Math.max(8, barWidth * 0.08));
 }
-function deriveBarEmphasis({ isHovered, isFocused, isAnyBarHovered, isGradientVariant, }) {
+function deriveBarEmphasis({ isHovered, isFocused, isAnyBarHovered, isGradientVariant, premiumEmphasis = isGradientVariant, }) {
     return {
-        isEmphasized: isGradientVariant && (isHovered || isFocused),
+        isEmphasized: premiumEmphasis && (isHovered || isFocused),
         shouldReduceOpacity: isAnyBarHovered && !isHovered,
     };
 }
@@ -41,29 +41,45 @@ function barFill({ isGradientVariant, gradientFill, isNull, shouldReduceOpacity,
             ? "var(--color-surface-sunken)"
             : fillColor;
 }
-/** Stroke cascade: keyboard-focus ring › emphasis › resting hairline › none. */
-function barStrokeStyle({ isFocused, isEmphasized, isGradientVariant, fillColor, }) {
+/**
+ * Stroke cascade: keyboard-focus ring › emphasis › resting hairline › none.
+ *
+ * `showRestingStroke` (default `true`) keeps the resting white hairline that gradient
+ * column bars carry. Set it `false` for bars that should read as flat shapes with no
+ * outline at rest — the focus and emphasis strokes still apply, so keyboard focus stays
+ * visible either way. Prefer this flag over re-deriving the cascade at a call site:
+ * the two hand-copies of this logic drifted once already (§19).
+ */
+function barStrokeStyle({ isFocused, isEmphasized, isGradientVariant, fillColor, showRestingStroke = true, }) {
+    const hasRestingStroke = isGradientVariant && showRestingStroke;
     return {
         stroke: isFocused
             ? "var(--color-primary)"
             : isEmphasized
                 ? fillColor
-                : isGradientVariant
+                : hasRestingStroke
                     ? BAR_RESTING_STROKE
                     : "none",
-        strokeWidth: isFocused ? 3 : isEmphasized ? 2 : isGradientVariant ? 1 : undefined,
+        strokeWidth: isFocused ? 3 : isEmphasized ? 2 : hasRestingStroke ? 1 : undefined,
         strokeOpacity: isEmphasized ? BAR_EMPHASIS_STROKE_OPACITY : 1,
     };
 }
+/**
+ * The hover glow-ring filter alone. Split out of `BarSeriesDefs` so a chart with FLAT
+ * fills can still render the premium hover ring without emitting a gradient def it
+ * never references — `BarSeriesDefs` composes it, so both paths stay single-sourced
+ * and the ring can't drift between them.
+ */
+const BarRingDef = ({ ringId, color, }) => (jsxs("filter", { id: ringId, x: "-25%", y: "-25%", width: "150%", height: "165%", colorInterpolationFilters: "sRGB", children: [jsx("feDropShadow", { dx: "0", dy: "0", stdDeviation: "4", floodColor: color, floodOpacity: "0.42" }), jsx("feDropShadow", { dx: "0", dy: "10", stdDeviation: "8", floodColor: color, floodOpacity: "0.18" })] }));
 /**
  * Per-series SVG defs for the gradient variant: vertical gradient fill,
  * colored drop shadow, and the hover glow-ring filter. Render inside <defs>.
  */
-const BarSeriesDefs = ({ gradientId, shadowId, ringId, color }) => (jsxs(Fragment, { children: [jsxs("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [jsx("stop", { offset: "0%", stopColor: color, stopOpacity: "0.46" }), jsx("stop", { offset: "14%", stopColor: color, stopOpacity: "0.9" }), jsx("stop", { offset: "42%", stopColor: color, stopOpacity: "1" }), jsx("stop", { offset: "72%", stopColor: color, stopOpacity: "0.96" }), jsx("stop", { offset: "100%", stopColor: color, stopOpacity: "0.82" })] }), jsx("filter", { id: shadowId, x: "-35%", y: "-35%", width: "170%", height: "190%", colorInterpolationFilters: "sRGB", children: jsx("feDropShadow", { dx: "0", dy: "10", stdDeviation: "8", floodColor: color, floodOpacity: "0.22" }) }), jsxs("filter", { id: ringId, x: "-25%", y: "-25%", width: "150%", height: "165%", colorInterpolationFilters: "sRGB", children: [jsx("feDropShadow", { dx: "0", dy: "0", stdDeviation: "4", floodColor: color, floodOpacity: "0.42" }), jsx("feDropShadow", { dx: "0", dy: "10", stdDeviation: "8", floodColor: color, floodOpacity: "0.18" })] })] }));
+const BarSeriesDefs = ({ gradientId, shadowId, ringId, color }) => (jsxs(Fragment, { children: [jsxs("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [jsx("stop", { offset: "0%", stopColor: color, stopOpacity: "0.46" }), jsx("stop", { offset: "14%", stopColor: color, stopOpacity: "0.9" }), jsx("stop", { offset: "42%", stopColor: color, stopOpacity: "1" }), jsx("stop", { offset: "72%", stopColor: color, stopOpacity: "0.96" }), jsx("stop", { offset: "100%", stopColor: color, stopOpacity: "0.82" })] }), jsx("filter", { id: shadowId, x: "-35%", y: "-35%", width: "170%", height: "190%", colorInterpolationFilters: "sRGB", children: jsx("feDropShadow", { dx: "0", dy: "10", stdDeviation: "8", floodColor: color, floodOpacity: "0.22" }) }), jsx(BarRingDef, { ringId: ringId, color: color })] }));
 /**
  * Hover/focus glow ring behind an emphasized bar. Mount/unmount it via
  * `show` — enter/exit fades are handled internally.
  */
 const BarGlowRing = ({ show, pathD, color, barWidth, filter }) => (jsx(AnimatePresence, { children: show && (jsx(motion.path, { d: pathD, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: RING_FADE_TRANSITION, fill: "none", stroke: color, strokeWidth: barRingStrokeWidth(barWidth), strokeOpacity: BAR_RING_STROKE_OPACITY, strokeLinejoin: "round", vectorEffect: "non-scaling-stroke", filter: filter, style: { pointerEvents: "none" } })) }));
 
-export { BAR_DIM_OPACITY_FLAT, BAR_DIM_OPACITY_GRADIENT, BAR_EMPHASIS_STROKE_OPACITY, BAR_RESTING_STROKE, BAR_RING_STROKE_OPACITY, BarGlowRing, BarSeriesDefs, barDimOpacity, barFill, barRingStrokeWidth, barStrokeStyle, deriveBarEmphasis };
+export { BAR_DIM_OPACITY_FLAT, BAR_DIM_OPACITY_GRADIENT, BAR_EMPHASIS_STROKE_OPACITY, BAR_RESTING_STROKE, BAR_RING_STROKE_OPACITY, BarGlowRing, BarRingDef, BarSeriesDefs, barDimOpacity, barFill, barRingStrokeWidth, barStrokeStyle, deriveBarEmphasis };

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

@@ -1,3 +1,4 @@
+export { resolveSeriesColor } from "./series-color";
 export { extractFillClass, extractStrokeClass, colorClassToVariable, combineClasses, createColorClass, generateSeriesColors, DEFAULT_CHART_COLORS, EXTENDED_CHART_COLORS, MINIMAL_CHART_COLORS, generateColorPalette, getContrastColor, } from './color-utils';
 export { SafeMath, validateChart, validateChartData, validateChartConfig, validateDataConfigCompatibility, sanitizeChartData, calculateSafeScaleRange, niceNum, generateNiceTicks, type ChartValidationError, type ChartValidationResult, } from './chart-validation';
 export { getSpringAnimation, getUseSpringConfig, getStaggerDelay, SPRING_PRESETS, CIRCULAR_CHART_ANIMATIONS, type SpringConfig, type NoAnimationConfig, type AnimationPreset, } from './animation-utils';

package/dist/components/charts/utils/series-color.d.ts

@@ -0,0 +1,7 @@
+import type { ChartConfig } from "../types/chart.types";
+/**
+ * Resolves the paint color for series `key` at position `index`.
+ * Priority: explicit config[key].color (preserving the bare-token DX,
+ * e.g. "success" -> "var(--color-success)"), then palette[index % length].
+ */
+export declare function resolveSeriesColor(index: number, key: string | undefined, config: ChartConfig | undefined, palette: readonly string[]): string;

package/dist/components/charts/utils/series-color.js

@@ -0,0 +1,20 @@
+/**
+ * Resolves the paint color for series `key` at position `index`.
+ * Priority: explicit config[key].color (preserving the bare-token DX,
+ * e.g. "success" -> "var(--color-success)"), then palette[index % length].
+ */
+function resolveSeriesColor(index, key, config, palette) {
+    var _a;
+    const raw = key ? (_a = config === null || config === void 0 ? void 0 : config[key]) === null || _a === void 0 ? void 0 : _a.color : undefined;
+    if (raw) {
+        const isBareToken = !raw.startsWith("var(") &&
+            !raw.startsWith("#") &&
+            !raw.startsWith("rgb") &&
+            !raw.startsWith("hsl") &&
+            raw.includes("-");
+        return isBareToken ? `var(--color-${raw})` : raw;
+    }
+    return palette.length > 0 ? palette[index % palette.length] : "var(--color-chart-1)";
+}
+
+export { resolveSeriesColor };