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

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/ChartLegend/ChartLegend.d.ts

@@ -1,7 +1,10 @@
 import React from 'react';
+import type { ChartConfig, ChartLegendPosition } from '../../types/chart.types';
 import { ChartLegendProps } from './ChartLegend.types';
 /**
- * Basic ChartLegend component - minimal implementation
- * TODO: Enhance with full legend functionality when needed
+ * Resolves the effective legend position: an explicit `legend` prop wins,
+ * otherwise defaults to `'bottom'` for multi-series `config` and `'none'`
+ * for single-series (a lone series' name rarely needs a dedicated key).
  */
+export declare function resolveLegendPosition(legend: ChartLegendPosition | undefined, config: ChartConfig): ChartLegendPosition;
 export declare const ChartLegend: React.FC<ChartLegendProps>;

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

@@ -1,28 +1,21 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { cn } from '../../../../utils/cn.js';
+import { chartTheme } from '../../theme/chart.theme.js';
 
 /**
- * Basic ChartLegend component - minimal implementation
- * TODO: Enhance with full legend functionality when needed
+ * Resolves the effective legend position: an explicit `legend` prop wins,
+ * otherwise defaults to `'bottom'` for multi-series `config` and `'none'`
+ * for single-series (a lone series' name rarely needs a dedicated key).
  */
-const ChartLegend = ({ content, className, wrapperStyle, layout = 'horizontal', align = 'center', verticalAlign = 'bottom', ...props }) => {
-    if (!content) {
+function resolveLegendPosition(legend, config) {
+    if (legend)
+        return legend;
+    return Object.keys(config).length > 1 ? 'bottom' : 'none';
+}
+const ChartLegend = ({ items, className }) => {
+    if (items.length === 0)
         return null;
-    }
-    const alignClasses = {
-        left: 'justify-start',
-        center: 'justify-center',
-        right: 'justify-end',
-    };
-    const verticalAlignClasses = {
-        top: 'items-start',
-        middle: 'items-center',
-        bottom: 'items-end',
-    };
-    const layoutClasses = {
-        horizontal: 'flex-row',
-        vertical: 'flex-col',
-    };
-    return (jsx("div", { className: `flex ${layoutClasses[layout]} ${alignClasses[align]} ${verticalAlignClasses[verticalAlign]} ${className || ''}`, style: wrapperStyle, ...props, children: content }));
+    return (jsx("div", { className: cn(chartTheme.legend.container, className), children: items.map((item) => (jsxs("div", { className: chartTheme.legend.item, children: [jsx("span", { className: chartTheme.legend.dot, style: { backgroundColor: item.color } }), jsx("span", { className: chartTheme.legend.label, children: item.label })] }, item.key))) }));
 };
 
-export { ChartLegend };
+export { ChartLegend, resolveLegendPosition };

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

@@ -1,15 +1,10 @@
-import { ReactNode } from 'react';
-export interface ChartLegendProps {
-    content?: ReactNode;
-    wrapperStyle?: React.CSSProperties;
-    iconType?: 'line' | 'rect' | 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye';
-    layout?: 'horizontal' | 'vertical';
-    align?: 'left' | 'center' | 'right';
-    verticalAlign?: 'top' | 'middle' | 'bottom';
-    className?: string;
+/** One resolved legend entry — already-resolved CSS color, ready to render. */
+export interface ChartLegendItem {
+    key: string;
+    label: string;
+    color: string;
 }
-export interface ChartLegendContentProps {
-    payload?: any[];
-    nameKey?: string;
+export interface ChartLegendProps {
+    items: ChartLegendItem[];
     className?: string;
 }

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

@@ -1,3 +1,2 @@
-export { ChartLegend } from './ChartLegend';
-export { ChartLegendContent } from './ChartLegendContent';
-export type { ChartLegendProps, ChartLegendContentProps } from './ChartLegend.types';
+export { ChartLegend, resolveLegendPosition } from './ChartLegend';
+export type { ChartLegendProps, ChartLegendItem } from './ChartLegend.types';

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
 import { cn } from '../../../../utils/cn.js';
@@ -15,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.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { cn } from '../../../../utils/cn.js';
@@ -11,7 +12,7 @@ const ChartText = ({ children, textAnchor = "start", dominantBaseline = "auto",
     const theme = chartTextTheme;
     // Truncate text if needed
     const truncateText = (text, maxWidth) => {
-        // Rough estimate: 6px per character for text-sm
+        // Rough estimate: 6px per character for text-base
         if (!maxWidth || text.length <= maxWidth / 6) {
             return text;
         }

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

@@ -1,9 +1,11 @@
+"use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 import { AnimatePresence, motion } from 'motion/react';
 import { cn } from '../../../../utils/cn.js';
 import { chartTooltipTheme } from './ChartTooltip.theme.js';
 import { useIsClient } from '../../../../hooks/useIsClient.js';
+import { TOOLTIP_EXIT_TRANSITION, TOOLTIP_ENTER_TRANSITION } from '../../utils/animation-utils.js';
 
 // Helper function to check if content is MultiSeriesData
 const isMultiSeriesData = (content) => {
@@ -22,22 +24,11 @@ function ChartTooltip({ content, className, active = false, position = { x: 0, y
             }, animate: {
                 opacity: 1,
                 scale: 1,
-                transition: {
-                    type: "spring",
-                    stiffness: 400,
-                    damping: 30,
-                    opacity: { duration: 0.15 },
-                    scale: { duration: 0.15 }
-                },
+                transition: TOOLTIP_ENTER_TRANSITION,
             }, exit: {
                 opacity: 0,
                 scale: 0.95,
-                transition: {
-                    type: "spring",
-                    stiffness: 300,
-                    damping: 25,
-                    duration: 0.15,
-                },
+                transition: TOOLTIP_EXIT_TRANSITION,
             }, className: cn(theme.baseStyle, className), style: {
                 left: position.x + 16,
                 top: position.y + 16,

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

@@ -4,7 +4,7 @@
  * Follows the established theming pattern with CSS variables
  */
 const chartTooltipTheme = {
-    baseStyle: "fixed z-50 text-[var(--color-text-primary)] rounded-[var(--tooltip-radius)] px-3 py-2 shadow-lg pointer-events-none glass-effect",
+    baseStyle: "fixed z-[99] text-[var(--color-text-primary)] rounded-[var(--tooltip-radius)] px-3 py-2 shadow-real-lg pointer-events-none bg-[var(--color-surface-overlay)]/60 backdrop-blur-lg outline outline-[var(--color-border)]",
     contentStyle: "whitespace-nowrap text-sm",
     multiSeriesContainerStyle: "text-left",
     categoryStyle: "text-xs font-semibold mb-1 text-[var(--color-text-primary)]",

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

@@ -1,4 +1,15 @@
 import { ReactNode } from 'react';
+/**
+ * Individual payload item from chart data
+ */
+export interface ChartTooltipPayloadItem {
+    name?: string;
+    value?: number | string;
+    color?: string;
+    dataKey?: string;
+    payload?: Record<string, unknown>;
+    [key: string]: unknown;
+}
 /**
  * ChartTooltip theme configuration
  */
@@ -30,7 +41,7 @@ export interface ChartTooltipProps extends Omit<React.HTMLAttributes<HTMLDivElem
     contentStyle?: React.CSSProperties;
     itemStyle?: React.CSSProperties;
     active?: boolean;
-    payload?: any[];
+    payload?: ChartTooltipPayloadItem[];
     label?: string | number;
     className?: string;
     position?: {
@@ -42,7 +53,7 @@ export interface ChartTooltipProps extends Omit<React.HTMLAttributes<HTMLDivElem
 }
 export interface ChartTooltipContentProps {
     active?: boolean;
-    payload?: any[];
+    payload?: ChartTooltipPayloadItem[];
     label?: string | number;
     labelKey?: string;
     nameKey?: string;

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

@@ -5,10 +5,3 @@ export { HorizontalGrid } from './ChartGrid';
 export { ChartText } from './ChartText';
 export { XAxis, YAxis } from './ChartAxis';
 export { ChartTooltip } from './ChartTooltip';
-export { ChartContainer, useChartContext } from './ChartContainer';
-export type { ChartContainerProps, ChartDimensions, ChartMargins } from './ChartContainer';
-export { BarRenderer } from './BarRenderer';
-export type { BarRendererProps } from './BarRenderer';
-export { BAR_ANIMATION_TIMING } from './BarRenderer';
-export { LineRenderer } from './LineRenderer';
-export type { LineRendererProps } from './LineRenderer';

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: {
@@ -68,6 +63,12 @@ const chartTheme = {
             ],
         },
     },
+    legend: {
+        container: "flex flex-wrap items-center justify-center gap-x-6 gap-y-2 mb-3",
+        item: "flex items-center gap-2 text-sm",
+        dot: "size-2.5 rounded shrink-0",
+        label: "text-[var(--color-text-secondary)]",
+    },
 };
 
 export { chartTheme };

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

@@ -12,6 +12,8 @@ export interface ChartConfig {
 }
 export type ChartVariant = 'default' | 'minimal' | 'gradient';
 export type CurveType = 'linear' | 'monotone' | 'step' | 'stepBefore' | 'stepAfter';
+/** `undefined` resolves to `'bottom'` for multi-series `config`, `'none'` for single-series. */
+export type ChartLegendPosition = 'top' | 'bottom' | 'none';
 export interface ChartThemeOverrides {
     baseStyle?: {
         colors?: Partial<{
@@ -37,14 +39,19 @@ export interface ChartThemeOverrides {
         colors: string[];
     }>>;
 }
+/**
+ * Shared bottom margin (px) reserved for the X-axis across all Cartesian charts
+ * (Area/Line/Bar/StackedBar). A single source of truth so their plot baselines
+ * always align when placed side by side. Sized to fit one row of axis labels
+ * (XAxis tickLength 6 + tickPadding 12 + label height).
+ */
+export declare const X_AXIS_MARGIN = 28;
 export declare const CHART_DEFAULTS: {
     readonly showGrid: true;
     readonly showXAxis: true;
     readonly showYAxis: true;
     readonly barRadius: 32;
-    readonly dotRadius: 4;
-    readonly cellRadius: 4;
-    readonly radius: 20;
+    readonly dotRadius: 3;
     readonly strokeWidth: 2;
     readonly gap: 4;
     readonly categoryGap: 16;
@@ -52,8 +59,7 @@ export declare const CHART_DEFAULTS: {
     readonly curveType: CurveType;
     readonly fillOpacity: 0.3;
     readonly showStroke: true;
-    readonly showDots: true;
-    readonly orientation: "vertical" | "horizontal";
+    readonly showDots: false;
     readonly stacked: false;
     readonly variant: ChartVariant;
     readonly enableKeyboardNavigation: true;
@@ -63,6 +69,8 @@ export interface BaseChartProps {
     config: ChartConfig;
     className?: string;
     children?: ReactNode;
+    width?: string | number;
+    height?: string | number;
     title?: string;
     description?: string;
     enableKeyboardNavigation?: boolean;
@@ -71,15 +79,29 @@ export interface StandardChartDisplayProps {
     showGrid?: boolean;
     showXAxis?: boolean;
     showYAxis?: boolean;
+    /**
+     * Always-visible legend position, rendered from `config`'s labels/colors.
+     * Omitted resolves to `"bottom"` for multi-series `config`, `"none"` for
+     * single-series — there is no single fixed default.
+     */
+    legend?: ChartLegendPosition;
     minValue?: number;
     maxValue?: number;
     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;
@@ -91,7 +113,6 @@ export interface StandardVisualProps {
     stacked?: boolean;
 }
 export interface BarChartSpecificProps {
-    orientation?: 'vertical' | 'horizontal';
     categoryGap?: number;
 }
 export interface StandardAxisConfig {
@@ -150,6 +171,13 @@ export interface ChartThemeConfig {
             colors: string[];
         };
     };
+    /** Shared `ChartLegend` styling — one place for every chart's legend. */
+    legend: {
+        container: string;
+        item: string;
+        dot: string;
+        label: string;
+    };
 }
 export interface ChartTheme {
     colors: {

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

@@ -1,3 +1,10 @@
+/**
+ * Shared bottom margin (px) reserved for the X-axis across all Cartesian charts
+ * (Area/Line/Bar/StackedBar). A single source of truth so their plot baselines
+ * always align when placed side by side. Sized to fit one row of axis labels
+ * (XAxis tickLength 6 + tickPadding 12 + label height).
+ */
+const X_AXIS_MARGIN = 28;
 // Standardized Chart Defaults
 const CHART_DEFAULTS = {
     // Display options
@@ -6,26 +13,20 @@ const CHART_DEFAULTS = {
     showYAxis: true,
     // Visual properties
     barRadius: 32, // For bar corners (rounded top)
-    dotRadius: 4, // For line/area dot markers
-    cellRadius: 4, // For heatmap cells
-    radius: 20, // @deprecated Use barRadius, dotRadius, or cellRadius instead
+    dotRadius: 3, // For line/area dot markers
     strokeWidth: 2,
-    gap: 4, // For bars, cells
+    gap: 4, // For bars
     categoryGap: 16, // For bar categories
     // Line/Area specific
     curved: true,
     curveType: 'monotone',
     fillOpacity: 0.3,
     showStroke: true,
-    showDots: true,
-    // Bar specific
-    orientation: 'vertical',
+    showDots: false,
     // Layout
     stacked: false,
-    // Theme
-    variant: 'default',
     // Accessibility
     enableKeyboardNavigation: true,
 };
 
-export { CHART_DEFAULTS };
+export { CHART_DEFAULTS, X_AXIS_MARGIN };

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

@@ -3,7 +3,15 @@
  *
  * Provides shared spring animation presets and helper functions
  * to ensure consistent animations across all chart components.
+ *
+ * Two families live here:
+ *  - Circular/radar (DonutChart, ActivityRings, RadarChart) — spring presets +
+ *    `getSpringAnimation`/`getStaggerDelay` (below).
+ *  - Cartesian (Area/Bar/Line/StackedBar + the shared Bar/LineRenderer) — the
+ *    entrance + hover primitives at the bottom of this file. Keep all chart
+ *    animation values here so timing/feel can't drift between charts.
  */
+import type { Transition } from "motion/react";
 /**
  * Spring animation configuration
  */
@@ -99,6 +107,7 @@ export declare const CIRCULAR_CHART_ANIMATIONS: {
         readonly preset: AnimationPreset;
         readonly staggerDelay: 0.1;
         readonly centerLabelDelay: 0.3;
+        readonly centerLabelDuration: 0.4;
     };
     /**
      * GaugeChart: Bouncy animation for needle
@@ -108,4 +117,90 @@ export declare const CIRCULAR_CHART_ANIMATIONS: {
         readonly needleDelay: 0;
         readonly valueDelay: 0.3;
     };
+    /**
+     * MultiSegmentDonutChart: segments draw sequentially, each segment's draw
+     * duration proportional to its share (base = a full 100% segment, min keeps
+     * slivers visible).
+     */
+    readonly multiSegmentDonut: {
+        readonly preset: AnimationPreset;
+        readonly baseSegmentDuration: 0.6;
+        readonly minSegmentDuration: 0.15;
+    };
+};
+/** Crosshair group fade in/out (AnimatePresence enter/exit). */
+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). */
+export declare const CARTESIAN_ENTRANCE_DURATION = 0.7;
+/** Per-marker stagger for line/area dot pop-in (seconds). */
+export declare const LINE_DOT_STAGGER = 0.06;
+/** Grouped-bar stagger (BarChart + shared BarRenderer grouped path). */
+export declare const BAR_GROUP_STAGGER = 0.05;
+/** Stacked-bar per-category stagger (StackedBarChart). */
+export declare const STACKED_BAR_STAGGER = 0.08;
+/** Shared BarRenderer stacked-mode per-category delay. */
+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";
+    stiffness: number;
+    damping: number;
+};
+/** Bar grow spring (grouped bars / stacked columns). */
+export declare const BAR_SPRING: {
+    type: "spring";
+    stiffness: number;
+    damping: number;
 };
+/**
+ * Transform-origin presets (passed to a motion element's `style`).
+ * `RISE_FROM_BASELINE` scales a group UP from the plot baseline — pair it with an
+ * invisible full-plot rect so the group's fill-box bottom pins to the x-axis.
+ * `SCALE_FROM_CENTER` scales an element in about its own centre (markers).
+ */
+export declare const RISE_FROM_BASELINE: {
+    readonly originY: 1;
+    readonly transformOrigin: "bottom";
+};
+export declare const SCALE_FROM_CENTER: {
+    readonly originX: "50%";
+    readonly originY: "50%";
+    readonly transformBox: "fill-box";
+};
+/** Line/area rise transition. */
+export declare const riseTransition: Transition;
+/** Hover glow-ring fade (bars). */
+export declare const RING_FADE_TRANSITION: Transition;
+/** Hover glow-halo fade (line/area active point). */
+export declare const HALO_FADE_TRANSITION: Transition;
+/**
+ * Marker pop-in that starts as the rise finishes, then staggers left-to-right.
+ * Reduced motion → no delay (markers just appear with the static line).
+ */
+export declare function dotEntranceTransition(index: number, shouldReduceMotion?: boolean | null): Transition;
+/**
+ * Bar grow transition. Opacity carries BOTH the mount fade (delayed to match the
+ * stagger so a scaleY≈0 bar isn't a visible stub) and the instant hover dim once
+ * mounted (`hasAnimated`). Used by BarChart, StackedBarChart, and the grouped
+ * path of the shared BarRenderer.
+ */
+export declare function barEntranceTransition(delay: number, hasAnimated: boolean): Transition;
+/**
+ * Stacked-segment grow for the shared BarRenderer (a tween, not a spring, so
+ * stacked segments settle together). Same delayed-opacity contract as
+ * `barEntranceTransition`.
+ */
+export declare function stackedSegmentTransition(delay: number, hasAnimated: boolean): Transition;