@sesionario/blocks 1.27.0 → 1.29.0

package/dist/charts.d.ts

@@ -0,0 +1,1450 @@
+import * as React$1 from 'react';
+import { ReactNode, Dispatch, SetStateAction, RefObject, CSSProperties } from 'react';
+import { Transition } from 'motion/react';
+import { scaleTime, scaleLinear, scaleBand } from '@visx/scale';
+import { CurveFactory } from 'd3-shape';
+
+type ChartStatus = "loading" | "ready";
+/** Loading animation style: the default traveling pulse, or a diagonal
+ * shimmer that sweeps across the skeleton. */
+type LoadingStyle = "pulse" | "sweep";
+/**
+ * Internal visual lifecycle phase. Forward and reverse transitions add
+ * intermediate phases in later stack branches.
+ */
+type ChartPhase = "loading" | "exiting" | "gridTweenReady" | "revealing" | "ready" | "exitingReady" | "gridTweenLoading" | "revealingLoading";
+
+interface ReferenceAreaConfig {
+    yAxisId: string;
+    y1?: number;
+    y2?: number;
+    axisLabelColor?: string;
+}
+
+interface ChartSelection {
+    startX: number;
+    endX: number;
+    startIndex: number;
+    endIndex: number;
+    active: boolean;
+}
+
+type YDomain = [number, number];
+
+type ScaleLinear<Output> = ReturnType<typeof scaleLinear<Output>>;
+type ScaleTime<Output> = ReturnType<typeof scaleTime<Output>>;
+type ScaleBand<Domain extends {
+    toString(): string;
+}> = ReturnType<typeof scaleBand<Domain>>;
+
+declare const chartCssVars: {
+    background: string;
+    foreground: string;
+    foregroundMuted: string;
+    label: string;
+    linePrimary: string;
+    lineSecondary: string;
+    crosshair: string;
+    grid: string;
+    indicatorColor: string;
+    indicatorSecondaryColor: string;
+    markerBackground: string;
+    markerBorder: string;
+    markerForeground: string;
+    badgeBackground: string;
+    badgeForeground: string;
+    segmentBackground: string;
+    segmentLine: string;
+    brushBorder: string;
+    tooltipBackground: string;
+};
+interface Margin {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}
+interface TooltipData {
+    /** The data point being hovered */
+    point: Record<string, unknown>;
+    /** Index in the data array */
+    index: number;
+    /** X position in pixels (relative to chart area) */
+    x: number;
+    /** Y positions for each line, keyed by dataKey */
+    yPositions: Record<string, number>;
+    /** X positions for each series (for grouped bars), keyed by dataKey */
+    xPositions?: Record<string, number>;
+}
+interface LineConfig {
+    dataKey: string;
+    stroke: string;
+    strokeWidth: number;
+    /** Scale group id (Recharts `yAxisId`). Default: `"left"`. */
+    yAxisId?: string | number;
+}
+/**
+ * Hover/selection state — every field here changes on mouse movement.
+ * Lives in its own context so cold consumers (Grid, YAxis, PatternArea, …)
+ * can subscribe to the stable slice and skip re-rendering on every hover.
+ */
+interface ChartHoverContextValue {
+    tooltipData: TooltipData | null;
+    setTooltipData: Dispatch<SetStateAction<TooltipData | null>>;
+    /** Current drag/pinch selection range */
+    selection?: ChartSelection | null;
+    /** Clear the current selection */
+    clearSelection?: () => void;
+    /** Index of currently hovered bar */
+    hoveredBarIndex?: number | null;
+    /** Setter for hovered bar index */
+    setHoveredBarIndex?: (index: number | null) => void;
+    /** Index of currently hovered candle */
+    hoveredCandleIndex?: number | null;
+    /** Setter for hovered candle index */
+    setHoveredCandleIndex?: (index: number | null) => void;
+}
+interface ChartContextValue extends ChartHoverContextValue {
+    data: Record<string, unknown>[];
+    /** Decimated subset for SVG path rendering; equals `data` when no decimation is needed. */
+    renderData: Record<string, unknown>[];
+    xScale: ScaleTime<number>;
+    /** Primary (left) y-scale — alias for `yScales[DEFAULT_Y_AXIS_ID]`. */
+    yScale: ScaleLinear<number>;
+    /** Per-axis y-scales keyed by `yAxisId`. */
+    yScales: Record<string, ScaleLinear<number>>;
+    width: number;
+    height: number;
+    innerWidth: number;
+    innerHeight: number;
+    margin: Margin;
+    columnWidth: number;
+    containerRef: RefObject<HTMLDivElement | null>;
+    lines: LineConfig[];
+    /** {@link ReferenceArea} bands — drives y-axis label colors in range. */
+    referenceAreas: ReferenceAreaConfig[];
+    chartPhase: ChartPhase;
+    chartStatus: ChartStatus;
+    /** Centered label while `chartPhase` shows loading chrome. */
+    loadingLabel?: string;
+    /** Y-domain tween duration when transitioning loading ↔ ready (ms). */
+    yDomainTweenDuration: number;
+    /** Nice’d y-domains per axis from skeleton data (placeholder). */
+    yDomainSkeletonByAxis: Record<string, YDomain>;
+    /** Nice’d y-domains per axis from the current target data. */
+    yDomainTargetByAxis: Record<string, YDomain>;
+    isLoaded: boolean;
+    animationDuration: number;
+    /** CSS easing for clip-reveal / line draw (cartesian charts). */
+    animationEasing?: string;
+    /** Motion enter transition (spring or tween) — drives clip reveal when spring. */
+    enterTransition?: Transition;
+    /** Increments when enter animation should replay. */
+    revealEpoch?: number;
+    /** Fired when a one-shot loading pulse (exit / enter) completes. */
+    notifyLoadingPulseComplete?: () => void;
+    xAccessor: (d: Record<string, unknown>) => Date;
+    dateLabels: string[];
+    /** Active brush zoom range — when set, axis ticks align to visible data rows. */
+    xDomain?: [Date, Date];
+    /** Full dataset length when brush zoom is enabled (for zoom vs full-range detection). */
+    xDomainSlotCount?: number;
+    /** Band scale for categorical x-axis (bar charts) */
+    barScale?: ScaleBand<string>;
+    /** Width of each bar band */
+    bandWidth?: number;
+    /** X accessor for bar charts (returns string instead of Date) */
+    barXAccessor?: (d: Record<string, unknown>) => string;
+    /** Bar chart orientation */
+    orientation?: "vertical" | "horizontal";
+    /** Whether bars are stacked */
+    stacked?: boolean;
+    /** Stack offsets: Map of data index -> Map of dataKey -> cumulative offset */
+    stackOffsets?: Map<number, Map<string, number>>;
+    /** Squares variant — snap tooltip to top square and size ring dots. */
+    squareSnap?: {
+        squareGap: number;
+        groupGap?: number;
+        fit?: boolean;
+    };
+    /** `SeriesBar` dataKeys in tree order, for grouped columns at each x */
+    composedBarDataKeys?: string[];
+    /** Target bar width in px (Recharts `barSize` style). */
+    composedBarSize?: number;
+    /** Max bar width in px (Recharts `maxBarSize`). */
+    composedMaxBarSize?: number;
+    /** Gap between grouped `SeriesBar` columns in px. */
+    composedBarGap?: number;
+    /** When true, `SeriesBar` segments stack in child order at each x. */
+    composedStacked?: boolean;
+    /** Per-row cumulative offsets for stacked `SeriesBar` (data index → dataKey → offset). */
+    composedStackOffsets?: Map<number, Map<string, number>>;
+    /** Vertical gap in px between stacked `SeriesBar` segments. Default: 0 */
+    composedStackGap?: number;
+}
+/**
+ * Stable slice of the chart context — everything that doesn't change on hover
+ * (data, scales, dimensions, animation state, layout config). Consumers that
+ * subscribe via `useChartStable()` skip re-renders on every mouse move.
+ */
+type ChartStableContextValue = Omit<ChartContextValue, keyof ChartHoverContextValue>;
+/**
+ * Splits the merged `value` into a stable slice and a volatile hover slice,
+ * publishing each to its own context. Each slice is memoized on its own
+ * field identities, so changing `tooltipData` does not bust the stable
+ * slice — consumers of `useChartStable()` skip re-renders on hover.
+ */
+declare function ChartProvider({ children, value, }: {
+    children: ReactNode;
+    value: ChartContextValue;
+}): React$1.JSX.Element;
+/**
+ * Stable slice — data, scales, dimensions, animation state, layout config.
+ * Subscribers skip re-renders on hover (the hover slice lives in a separate
+ * context). Prefer this in cold consumers like axes, grid, pattern fills.
+ */
+declare function useChartStable(): ChartStableContextValue;
+/**
+ * Merged stable + hover context. Convenient for components that need both,
+ * but re-renders on every hover (because hover changes). Prefer
+ * `useChartStable()` or `useChartHover()` for hot consumers that only need
+ * one slice.
+ */
+declare function useChart(): ChartContextValue;
+
+type FadeEdges = boolean | "left" | "right";
+
+type LineLoadingPulseMode = "loop" | "exit" | "enter";
+
+interface SeriesPointMarkerStyle {
+    /** Fill color for the inner circle */
+    fill?: string;
+    /** Outer ring stroke color. Default: same as `fill` */
+    stroke?: string;
+    /** Outer ring stroke width in px. Default: 2. Set to 0 to disable. */
+    strokeWidth?: number;
+    /** Gap between the inner fill and outer ring in px. Default: 2 */
+    ringGap?: number;
+    /** Optional outer outline beyond the ring. Default: 0 */
+    outlineWidth?: number;
+    /** Outer outline color. Default: same as `stroke` */
+    outlineColor?: string;
+    /** Point radius in px. Default: 5 */
+    radius?: number;
+    /** Dim non-active points while hovering. Default: true */
+    fadeOnHover?: boolean;
+    /** Opacity for non-hovered points when `fadeOnHover` is true. Default: 0.5 */
+    inactiveOpacity?: number;
+    /**
+     * Blur in px for non-hovered points when `fadeOnHover` is true.
+     * Applied once on the dimmed layer (not per dot) for performance. Default: 2
+     */
+    inactiveBlur?: number;
+    /** Initial blur in px during enter animation. Default: 2 */
+    enterBlur?: number;
+    /** Enlarge the active point while hovering. Default: true */
+    showActiveHighlight?: boolean;
+}
+
+interface AreaProps {
+    /** Key in data to use for y values */
+    dataKey: string;
+    /** Y-scale group id (Recharts `yAxisId`). Default: `"left"`. */
+    yAxisId?: string | number;
+    /** Fill color for the area gradient start. Default: var(--chart-line-primary) */
+    fill?: string;
+    /** Fill opacity at the top of the area. Default: 0.4 */
+    fillOpacity?: number;
+    /** Stroke color for the line. Default: same as fill */
+    stroke?: string;
+    /** Stroke width. Default: 2 */
+    strokeWidth?: number;
+    /** Curve function. Default: curveMonotoneX */
+    curve?: CurveFactory;
+    /** Whether to animate the area. Default: true */
+    animate?: boolean;
+    /** Whether to show the stroke line. Default: true */
+    showLine?: boolean;
+    /** Whether to show highlight segment on hover. Default: true */
+    showHighlight?: boolean;
+    /** Gradient opacity at bottom (0 = fully transparent). Default: 0 */
+    gradientToOpacity?: number;
+    /**
+     * Vertical extent of the fill gradient (0–1). `1` fades across the full
+     * height; lower values compress the gradient toward the top.
+     */
+    gradientSpan?: number;
+    /**
+     * Fade the area fill (and stroke) toward transparent at the chart edges.
+     * - `true` fades both edges, `false` disables the fade entirely.
+     * - `"left"` / `"right"` fades only that side — useful when the opposite
+     *   edge butts up against another element you don't want to fade into.
+     * Default: false
+     */
+    fadeEdges?: FadeEdges;
+    /** Render scatter-style circle markers at each data point. Default: false */
+    showMarkers?: boolean;
+    /** Marker styling (same options as Scatter). */
+    markers?: SeriesPointMarkerStyle;
+    /**
+     * Data index from which the line stroke becomes dashed (inclusive).
+     * Useful for projecting incomplete periods, e.g. dashed from yesterday through today.
+     */
+    dashFromIndex?: number;
+    /** Dash pattern for the tail segment when `dashFromIndex` is set. Default: "6,4" */
+    dashArray?: string;
+    /** Pulse stroke color while chart is loading. Default: var(--foreground) */
+    loadingStroke?: string;
+    /** Pulse stroke opacity while chart is loading. Default: 0.5 */
+    loadingStrokeOpacity?: number;
+    /**
+     * Show the loading pulse overlay. Default: follows chart loading phase.
+     * Set `false` to disable even during loading.
+     */
+    loading?: boolean;
+    /** Override pulse animation mode (loop / exit / enter). */
+    loadingPulseMode?: LineLoadingPulseMode;
+    /**
+     * Loading animation while the chart is in loading status: the default
+     * traveling `"pulse"`, or a diagonal `"sweep"` shimmer across the skeleton
+     * area. Default: `"pulse"`.
+     */
+    loadingStyle?: LoadingStyle;
+}
+declare function Area({ dataKey, yAxisId, fill, fillOpacity, stroke, strokeWidth, curve, animate, showLine, showHighlight, gradientToOpacity, gradientSpan, fadeEdges, showMarkers, markers, dashFromIndex, dashArray, loading, loadingStroke, loadingStrokeOpacity, loadingPulseMode, loadingStyle, }: AreaProps): React$1.JSX.Element;
+declare namespace Area {
+    var displayName: string;
+}
+
+interface AreaChartProps {
+    /** Data array - each item should have a date field and numeric values */
+    data: Record<string, unknown>[];
+    /** Key in data for the x-axis (date). Default: "date" */
+    xDataKey?: string;
+    /** Chart margins */
+    margin?: Partial<Margin>;
+    /** Animation duration in milliseconds. Default: 1100 */
+    animationDuration?: number;
+    /** CSS easing for clip-reveal. Default: cubic-bezier(0.85, 0, 0.15, 1) */
+    animationEasing?: string;
+    /** Motion enter transition (spring or cubic-bezier tween). */
+    enterTransition?: Transition;
+    /** Signature of motion URL state — triggers reveal replay when it changes. */
+    revealSignature?: string;
+    /** Aspect ratio as "width / height". Default: "2 / 1" */
+    aspectRatio?: string;
+    /** Additional class name for the container */
+    className?: string;
+    /** Loading vs ready — drives chart phase and loading chrome. Default: `"ready"`. */
+    status?: ChartStatus;
+    /** Centered shimmer label while loading. */
+    loadingLabel?: string;
+    /** Animate y-domain over this duration (ms) on status transitions. Default: 500. */
+    yDomainTweenDuration?: number;
+    /** Animate y-domain when status or target domain changes. Default: true */
+    yDomainTween?: boolean;
+    /** Visible x-domain for brush zoom. */
+    xDomain?: [Date, Date];
+    /** Full dataset length for x-scale padding when `xDomain` is set. */
+    xDomainSlotCount?: number;
+    /** Tween y-domain when brush changes the visible x-range. Default: false */
+    tweenYDomainOnXDomainChange?: boolean;
+    /** Inline container styles (e.g. fixed height for brush strip). */
+    style?: CSSProperties;
+    /** Fires when the internal chart phase changes (e.g. OG capture readiness). */
+    onPhaseChange?: (phase: ChartPhase) => void;
+    /** Child components (Area, Grid, ChartTooltip, etc.) */
+    children: ReactNode;
+}
+declare function AreaChart({ data, xDataKey, margin: marginProp, animationDuration, animationEasing, enterTransition, revealSignature, aspectRatio, className, status, loadingLabel, yDomainTweenDuration, yDomainTween, xDomain, xDomainSlotCount, tweenYDomainOnXDomainChange, style, onPhaseChange, children, }: AreaChartProps): React$1.JSX.Element;
+
+interface LineProps {
+    /** Key in data to use for y values */
+    dataKey: string;
+    /** Y-scale group id (Recharts `yAxisId`). Default: `"left"`. */
+    yAxisId?: string | number;
+    /** Stroke color. Default: var(--chart-line-primary) */
+    stroke?: string;
+    /** Stroke width. Default: 2.5 */
+    strokeWidth?: number;
+    /** Curve function. Default: curveNatural */
+    curve?: CurveFactory;
+    /** Whether to animate the line. Default: true */
+    animate?: boolean;
+    /**
+     * Fade the line stroke toward transparent at the chart edges.
+     * - `true` fades both edges, `false` disables the fade entirely.
+     * - `"left"` / `"right"` fades only that side.
+     * Default: true
+     */
+    fadeEdges?: FadeEdges;
+    /** Whether to show highlight segment on hover. Default: true */
+    showHighlight?: boolean;
+    /** Render scatter-style circle markers at each data point. Default: false */
+    showMarkers?: boolean;
+    /** Marker styling (same options as Scatter). */
+    markers?: SeriesPointMarkerStyle;
+    /**
+     * Data index from which the line stroke becomes dashed (inclusive).
+     * Useful for projecting incomplete periods, e.g. dashed from yesterday through today.
+     */
+    dashFromIndex?: number;
+    /** Dash pattern for the tail segment when `dashFromIndex` is set. Default: "6,4" */
+    dashArray?: string;
+    /**
+     * Show the loading pulse overlay. Default: follows chart loading phase.
+     * Set `false` to disable even during loading.
+     */
+    loading?: boolean;
+    /** Stroke color for the loading pulse overlay. Default: var(--foreground) */
+    loadingStroke?: string;
+    /** Loading pulse stroke opacity. Default: 0.5 */
+    loadingStrokeOpacity?: number;
+    /** Override pulse animation mode (loop / exit / enter). */
+    loadingPulseMode?: LineLoadingPulseMode;
+    /** Called when a loop-mode pulse cycle completes. */
+    onLoadingPulseCycleComplete?: () => void;
+    /**
+     * Loading animation while the chart is in loading status: the default
+     * traveling `"pulse"`, or a diagonal `"sweep"` shimmer across the skeleton
+     * line. Default: `"pulse"`.
+     */
+    loadingStyle?: LoadingStyle;
+}
+declare function Line({ dataKey, yAxisId, stroke, strokeWidth, curve, animate, fadeEdges, showHighlight, showMarkers, markers, dashFromIndex, dashArray, loading, loadingStroke, loadingStrokeOpacity, loadingPulseMode, onLoadingPulseCycleComplete, loadingStyle, }: LineProps): React$1.JSX.Element;
+declare namespace Line {
+    var displayName: string;
+}
+
+interface LineChartProps {
+    /** Data array - each item should have a date field and numeric values */
+    data: Record<string, unknown>[];
+    /** Key in data for the x-axis (date). Default: "date" */
+    xDataKey?: string;
+    /** Chart margins */
+    margin?: Partial<Margin>;
+    /** Animation duration in milliseconds. Default: 1100 */
+    animationDuration?: number;
+    /** CSS easing for clip-reveal. Default: cubic-bezier(0.85, 0, 0.15, 1) */
+    animationEasing?: string;
+    enterTransition?: Transition;
+    revealSignature?: string;
+    /** Aspect ratio as "width / height". Default: "2 / 1". Omit to fill a sized parent. */
+    aspectRatio?: string;
+    /** Additional class name for the container */
+    className?: string;
+    /** Loading vs ready — drives chart phase and loading chrome. Default: `"ready"`. */
+    status?: ChartStatus;
+    /** Centered shimmer label while loading. */
+    loadingLabel?: string;
+    /** Animate y-domain over this duration (ms) on status transitions. Default: 500. */
+    yDomainTweenDuration?: number;
+    /** Animate y-domain when status or target domain changes. Default: true */
+    yDomainTween?: boolean;
+    /** Visible x-domain for brush zoom. */
+    xDomain?: [Date, Date];
+    /** Full dataset length for x-scale padding when `xDomain` is set. */
+    xDomainSlotCount?: number;
+    /** Tween y-domain when brush changes the visible x-range. Default: false */
+    tweenYDomainOnXDomainChange?: boolean;
+    /** Inline container styles (e.g. fixed height for brush strip). */
+    style?: CSSProperties;
+    /** Fires when the internal chart phase changes (e.g. OG capture readiness). */
+    onPhaseChange?: (phase: ChartPhase) => void;
+    /** Child components (Line, Grid, ChartTooltip, etc.) */
+    children: ReactNode;
+}
+declare function LineChart({ data, xDataKey, margin: marginProp, animationDuration, animationEasing, enterTransition, revealSignature, aspectRatio, className, status, loadingLabel, yDomainTweenDuration, yDomainTween, xDomain, xDomainSlotCount, tweenYDomainOnXDomainChange, style, onPhaseChange, children, }: LineChartProps): React$1.JSX.Element;
+
+type BarOrientation = "vertical" | "horizontal";
+interface BarChartProps {
+    /** Data array - each item should have an x-axis key and numeric values */
+    data: Record<string, unknown>[];
+    /** Key in data for the categorical axis. Default: "name" */
+    xDataKey?: string;
+    /** Chart margins */
+    margin?: Partial<Margin>;
+    /** Animation duration in milliseconds. Default: 1100 */
+    animationDuration?: number;
+    /** CSS easing for bar grow transitions. */
+    animationEasing?: string;
+    /** Motion enter transition (spring or cubic-bezier tween). */
+    enterTransition?: Transition;
+    /** Signature of motion URL state — triggers enter replay when it changes. */
+    revealSignature?: string;
+    /** Aspect ratio as "width / height". Default: "2 / 1" */
+    aspectRatio?: string;
+    /** Additional class name for the container */
+    className?: string;
+    /** Gap between bar groups as a fraction of band width (0-1). Default: 0.2 */
+    barGap?: number;
+    /** Fixed bar width in pixels. If not set, bars auto-size to fill the band. */
+    barWidth?: number;
+    /** Bar chart orientation. Default: "vertical" */
+    orientation?: BarOrientation;
+    /** Whether to stack bars instead of grouping them. Default: false */
+    stacked?: boolean;
+    /** Gap between stacked bar segments in pixels. Default: 0 */
+    stackGap?: number;
+    /** When set, tooltip Y positions snap to the top square center (shape variant). */
+    squareSnap?: {
+        squareGap: number;
+        groupGap?: number;
+        fit?: boolean;
+    };
+    /** Child components (Bar, Grid, ChartTooltip, etc.). Optional — omit for a
+     * pure `status="loading"` skeleton. */
+    children?: ReactNode;
+    /** Reports reveal lifecycle for OG screenshots and loading orchestration. */
+    onPhaseChange?: (phase: ChartPhase) => void;
+    /** Fetch / display status. When `"loading"`, a shimmer skeleton replaces the
+     * bars (no chart data required). Default: `"ready"`. */
+    status?: ChartStatus;
+}
+declare function BarChart({ data, xDataKey, margin: marginProp, animationDuration, animationEasing, enterTransition, revealSignature, aspectRatio, className, barGap, barWidth, orientation, stacked, stackGap, squareSnap, children, onPhaseChange, status, }: BarChartProps): React$1.JSX.Element;
+declare namespace BarChart {
+    var displayName: string;
+}
+
+type BarLineCap = "round" | "butt" | number;
+type BarAnimationType = "grow" | "fade";
+interface BarProps {
+    /** Key in data to use for y values */
+    dataKey: string;
+    /** Y-scale group id for vertical bars (Recharts `yAxisId`). Default: `"left"`. */
+    yAxisId?: string | number;
+    /** Fill color for the bar. Can be a color, gradient url, or pattern url. Default: var(--chart-line-primary) */
+    fill?: string;
+    /** Color for tooltip dot. Use when fill is a gradient/pattern. Default: uses fill value */
+    stroke?: string;
+    /** Line cap style for bar ends: "round", "butt", or a number for custom radius. Default: "round" */
+    lineCap?: BarLineCap;
+    /** Whether to animate the bars. Default: true */
+    animate?: boolean;
+    /** Animation type: "grow" (height) or "fade" (opacity + blur). Default: "grow" */
+    animationType?: BarAnimationType;
+    /** Opacity when not hovered (when another bar is hovered). Default: 0.3 */
+    fadedOpacity?: number;
+    /** Stagger delay between bars in seconds. Auto-calculated if not provided. */
+    staggerDelay?: number;
+    /** Gap between stacked bars in pixels. Default: 0 */
+    stackGap?: number;
+    /** Gap between grouped bars in pixels. Default: 4 */
+    groupGap?: number;
+    /** Shrink each positive bar's top by its perspective rise so the front face
+     * lines up with `<BarDepthBack>`'s lid (instead of the lid sitting above the
+     * front face). Pass `true` whenever the chart also renders the bar-depth 3D
+     * surfaces. Default: false */
+    perspective?: boolean;
+    /** Minimum rendered bar height in px (non-stacked, vertical). Floors short or
+     * zero-value bars so they stay visible. Pair with the same value on
+     * `<BarDepthProvider minBarHeight>` when using the 3D surfaces. Default: 0 */
+    minBarHeight?: number;
+}
+declare function Bar(props: BarProps): React$1.JSX.Element | null;
+declare namespace Bar {
+    var displayName: string;
+}
+
+interface ComposedChartProps {
+    /** Data array — each row typically has a date and multiple numeric series */
+    data: Record<string, unknown>[];
+    /** Key for the x-axis (time). Default: "date" */
+    xDataKey?: string;
+    margin?: Partial<Margin>;
+    animationDuration?: number;
+    animationEasing?: string;
+    enterTransition?: Transition;
+    /** Signature of motion URL state — triggers reveal replay when it changes. */
+    revealSignature?: string;
+    aspectRatio?: string;
+    className?: string;
+    children: ReactNode;
+    /** Target bar width in px (Recharts-style `barSize`). */
+    barSize?: number;
+    /** Maximum bar width in px (`maxBarSize`). */
+    maxBarSize?: number;
+    /** Gap between grouped `SeriesBar` series in px. Default: 4 */
+    barGap?: number;
+    /** Stack `SeriesBar` segments in child order at each x (line/area are not stacked). */
+    stacked?: boolean;
+    /** Gap in px between stacked segments. Default: 0 */
+    stackGap?: number;
+    onPhaseChange?: (phase: ChartPhase) => void;
+}
+declare function ComposedChart({ data, xDataKey, margin: marginProp, animationDuration, animationEasing, enterTransition, revealSignature, aspectRatio, className, children, barSize, maxBarSize, barGap, stacked, stackGap, onPhaseChange, }: ComposedChartProps): React$1.JSX.Element;
+declare namespace ComposedChart {
+    var displayName: string;
+}
+
+interface LiveLinePoint {
+    time: number;
+    value: number;
+}
+interface LiveLineChartProps {
+    /** Streaming data — array of { time: unixSeconds, value } */
+    data: LiveLinePoint[];
+    /** Latest value (smoothly interpolated to) */
+    value: number;
+    /** Key used for the value field in context data. Default: "value" */
+    dataKey?: string;
+    /** Visible time window in seconds. Default: 30 */
+    window?: number;
+    /** Number of X-axis ticks (used to compute leading offset). Default: 5 */
+    numXTicks?: number;
+    /** Leading offset in X-tick units (0 = now at right edge). Default: 0 */
+    nowOffsetUnits?: number;
+    /** Tight Y-axis. Default: false */
+    exaggerate?: boolean;
+    /** Interpolation speed (0–1). Default: 0.08 */
+    lerpSpeed?: number;
+    /** Chart margins */
+    margin?: Partial<Margin>;
+    /** Freeze chart scrolling. Default: false */
+    paused?: boolean;
+    /** Child components (LiveLine, Grid, ChartTooltip, LiveXAxis, LiveYAxis, etc.) */
+    children: ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare function LiveLineChart({ data, value, dataKey, window: windowSecs, numXTicks, nowOffsetUnits, exaggerate, lerpSpeed, margin: marginProp, paused, children, className, style, }: LiveLineChartProps): React$1.JSX.Element;
+
+interface MomentumColors {
+    up: string;
+    down: string;
+    flat: string;
+}
+interface LiveLineProps {
+    /** Key in data to use for y values */
+    dataKey: string;
+    /** Stroke color. Default: var(--chart-line-primary) */
+    stroke?: string;
+    /** Stroke width. Default: 2 */
+    strokeWidth?: number;
+    /** Curve function. Default: curveMonotoneX */
+    curve?: CurveFactory;
+    /** Show gradient fill under the curve. Default: true */
+    fill?: boolean;
+    /** Show pulsing live dot at the right edge. Default: true */
+    pulse?: boolean;
+    /** Radius of the live dot. Default: 4 */
+    dotSize?: number;
+    /** Show value badge pill at the live tip. Default: true */
+    badge?: boolean;
+    /** Value label formatter for the badge */
+    formatValue?: (v: number) => string;
+    /**
+     * When set, the line/fill color changes based on momentum direction.
+     * Overrides `stroke` for the line and fill (dot always uses momentum colors).
+     */
+    momentumColors?: MomentumColors;
+}
+declare function LiveLine({ dataKey, stroke, strokeWidth, curve, fill, pulse, dotSize, badge, formatValue, momentumColors, }: LiveLineProps): React$1.JSX.Element;
+declare namespace LiveLine {
+    var displayName: string;
+}
+
+interface FunnelGradientStop {
+    offset: string | number;
+    color: string;
+}
+interface FunnelStage {
+    label: string;
+    value: number;
+    displayValue?: string;
+    /** Override the chart-level color for this segment */
+    color?: string;
+    /**
+     * Apply a linear gradient to this segment.
+     * Provide an array of color stops, e.g. `[{ offset: "0%", color: "#8B5CF6" }, { offset: "100%", color: "#3B82F6" }]`.
+     * When set, this takes priority over the segment and chart-level `color` for the innermost ring.
+     * Outer halo rings use the first stop color as their solid color.
+     */
+    gradient?: FunnelGradientStop[];
+}
+interface FunnelChartProps {
+    data: FunnelStage[];
+    orientation?: "horizontal" | "vertical";
+    color?: string;
+    layers?: number;
+    className?: string;
+    style?: CSSProperties;
+    showPercentage?: boolean;
+    showValues?: boolean;
+    showLabels?: boolean;
+    /** Controlled hover state — index of the hovered segment */
+    hoveredIndex?: number | null;
+    /** Callback when hover state changes */
+    onHoverChange?: (index: number | null) => void;
+    formatPercentage?: (pct: number) => string;
+    formatValue?: (value: number) => string;
+    /** Stagger delay between segments in seconds. Default 0.12 */
+    staggerDelay?: number;
+    /** Framer Motion transition for segment enter animation */
+    enterTransition?: Transition;
+    /** Gap between segments in pixels. Default 4 */
+    gap?: number;
+    /**
+     * Render a visx pattern definition. Receives a unique `id` string per segment
+     * and the resolved `color`. Return a `<PatternLines>` (or any visx pattern)
+     * inside an SVG `<defs>`. The component will use `fill="url(#id)"` on the
+     * innermost ring while keeping outer halo rings as solid color.
+     */
+    renderPattern?: (id: string, color: string) => ReactNode;
+    /** Edge style for the funnel segments. Default "curved" */
+    edges?: "curved" | "straight";
+    /**
+     * Controls how segment labels (value, percentage, stage name) are arranged.
+     * - "spread": Value/percentage/label are spread apart (top/center/bottom for horizontal,
+     *   left/center/right for vertical). This is the default.
+     * - "grouped": All label items stack together in a tight group.
+     *
+     * When "grouped", use `labelOrientation` and `labelAlign` for full control.
+     */
+    labelLayout?: "spread" | "grouped";
+    /**
+     * Stack direction of the label group. Only applies when `labelLayout="grouped"`.
+     * - "vertical": Items stack top-to-bottom. Default for horizontal funnels.
+     * - "horizontal": Items stack left-to-right. Default for vertical funnels.
+     */
+    labelOrientation?: "vertical" | "horizontal";
+    /**
+     * Where the label group sits within the segment cell.
+     * - "center" (default), "start", "end"
+     * For horizontal funnel: start=top, end=bottom.
+     * For vertical funnel: start=left, end=right.
+     */
+    labelAlign?: "center" | "start" | "end";
+    /** Grid configuration. Pass `true` for default bands + lines, or an object for fine control. */
+    grid?: boolean | {
+        /** Show alternating background bands behind each segment. Default true */
+        bands?: boolean;
+        /** Color of the background bands. Default "var(--color-muted)" */
+        bandColor?: string;
+        /** Show grid lines at each gap between segments. Default true */
+        lines?: boolean;
+        /** Color of the grid lines. Default "var(--chart-grid)" */
+        lineColor?: string;
+        /** Opacity of the grid lines. Default 1 */
+        lineOpacity?: number;
+        /** Width of the grid lines in pixels. Default 1 */
+        lineWidth?: number;
+    };
+}
+declare function FunnelChart({ data, orientation, color, layers, className, style, showPercentage, showValues, showLabels, hoveredIndex: hoveredIndexProp, onHoverChange, formatPercentage, formatValue, staggerDelay, enterTransition, gap, renderPattern, edges, labelLayout, labelOrientation, labelAlign, grid: gridProp, }: FunnelChartProps): React$1.JSX.Element | null;
+
+declare const PATTERN_PRESET_IDS: readonly ["none", "diagonal", "horizontal", "vertical", "cross", "dots", "circles", "accent"];
+type PatternPresetId = (typeof PATTERN_PRESET_IDS)[number];
+
+type HeatmapLevelColors = readonly [
+    string,
+    string,
+    string,
+    string,
+    string
+];
+type HeatmapLevelFillMode = "solid" | "pattern";
+interface HeatmapLevelStyle {
+    color: string;
+    fillMode?: HeatmapLevelFillMode;
+    pattern?: PatternPresetId;
+    patternColor?: string;
+    patternScale?: number;
+    patternStrokeWidth?: number;
+    patternRadius?: number;
+    patternComplement?: boolean;
+    patternFill?: string;
+    patternTileBackground?: string;
+    patternOpacity?: number;
+    patternDotsFill?: boolean;
+}
+type HeatmapLevelStyles = readonly [
+    HeatmapLevelStyle,
+    HeatmapLevelStyle,
+    HeatmapLevelStyle,
+    HeatmapLevelStyle,
+    HeatmapLevelStyle
+];
+
+/** First row of the grid — `0` = Sunday (GitHub default). */
+type HeatmapWeekStartDay = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+/** Which Y-axis row ticks to display. */
+type HeatmapYAxisTickFilter = "all" | "odd" | "even";
+/** Y-axis label display — `initial` shows the first letter only (Mon → M). */
+type HeatmapYAxisLabelFormat = "full" | "initial";
+/** Layout spacing parsed from {@link HeatmapSeparator}. */
+type HeatmapSeparatorGroupBy = "every" | "quarter";
+/** Separator config from props — resolved to column indices once data is known. */
+interface HeatmapSeparatorParsedConfig {
+    groupBy: HeatmapSeparatorGroupBy;
+    every?: number;
+    spacing: number;
+}
+
+interface HeatmapBin {
+    count: number;
+    bin: number;
+    date: Date;
+}
+interface HeatmapColumn {
+    bin: number;
+    bins: HeatmapBin[];
+}
+
+interface HeatmapCellsProps {
+    /** Corner radius for each cell. Default: 2 */
+    cornerRadius?: number;
+    /** Override the default GitHub-style green color scale. */
+    colorScale?: (count: number | null | undefined) => string;
+    /** Opacity for inactive cells while hovering. Default: 0.3 */
+    inactiveOpacity?: number;
+    /** Scale for inactive cells while hovering. Default: 1 */
+    inactiveScale?: number;
+    /** Scale for the highlighted cell while hovering. Default: 1 */
+    activeScale?: number;
+    /** Per-row opacity multiplier (display row index). Default: 1 */
+    rowOpacity?: number | readonly number[];
+    /** Pointer hover + dimming. Default: true */
+    interactive?: boolean;
+    /** Hide out-of-range bins (GitHub-style ghost cells). Default: true */
+    hideGhostCells?: boolean;
+}
+declare const HeatmapCells: React$1.NamedExoticComponent<HeatmapCellsProps>;
+
+type HeatmapLayout = "fluid" | "fill";
+interface HeatmapChartProps {
+    /** Column data — one entry per week (or category) with row bins inside. */
+    data: HeatmapColumn[];
+    /** Visible time range — filters week columns that overlap the domain. */
+    xDomain?: [Date, Date];
+    /**
+     * Week columns used for cell sizing when `xDomain` is set. Keeps bin height
+     * stable while scrubbing (filtered columns can vary by ±1 at boundaries).
+     */
+    sizingColumnCount?: number;
+    /**
+     * `fluid` — width drives square cells; chart height hugs the grid (GitHub-style).
+     * `fill` — expands cells to fill the parent.
+     */
+    layout?: HeatmapLayout;
+    /** Chart margins */
+    margin?: Partial<Margin>;
+    /** Fixed cell size in pixels. When 0, cells are square and sized to fit the plot. Default: 0 */
+    binSize?: number;
+    /** Gap between cells in pixels. Default: 2 */
+    gap?: number;
+    /** Override the default color scale. */
+    colorScale?: (count: number | null | undefined) => string;
+    /** Per-level colors for the Less → More scale (5 entries). */
+    levelColors?: HeatmapLevelColors;
+    /** Per-level fill styles (color and optional pattern). Takes precedence over `levelColors`. */
+    levelStyles?: HeatmapLevelStyles;
+    /** Optional outer aspect ratio (e.g. "2 / 1"). Omit to fill the parent. */
+    aspectRatio?: string;
+    /** Additional class name for the container */
+    className?: string;
+    /** Fetch / display status. Default: `"ready"`. */
+    status?: ChartStatus;
+    /** Centered label while loading. */
+    loadingLabel?: string;
+    /** Enter animation duration in milliseconds. Default: 1600 */
+    animationDuration?: number;
+    /** Motion enter transition (spring or cubic-bezier tween). */
+    enterTransition?: Transition;
+    /** Signature of motion URL state — triggers enter replay when it changes. */
+    revealSignature?: string;
+    /** Scales wave stagger delays (1 = default). */
+    enterStaggerScale?: number;
+    /** Play enter fade-in / loading shimmer animations. Default: true */
+    animate?: boolean;
+    /** Chart opacity while loading. Default: 0.5 */
+    loadingOpacity?: number;
+    /** Show loading cell shimmer while loading. Default: true */
+    showLoadingCells?: boolean;
+    /** Max opacity loading cells animate toward (0–1). Default: 0.5 */
+    loadingCellMaxOpacity?: number;
+    /** Share of cells that participate in loading shimmer (0–1). Default: 0.65 */
+    loadingCellRandomness?: number;
+    /**
+     * Inserts horizontal gaps between column groups. Overridden when a
+     * {@link HeatmapSeparator} child sets `every` / `spacing`.
+     */
+    columnSeparators?: HeatmapSeparatorParsedConfig;
+    /**
+     * First row of the grid — `0` = Sunday (GitHub default), `1` = Monday, etc.
+     * Rotates column bins for display without reshaping source data.
+     */
+    weekStartDay?: HeatmapWeekStartDay;
+    /** Child components (HeatmapCells, HeatmapXAxis, HeatmapYAxis) */
+    children: ReactNode;
+}
+declare function HeatmapChart({ data, xDomain, sizingColumnCount, layout, margin: marginProp, binSize, gap, colorScale: colorScaleProp, levelColors, levelStyles: levelStylesProp, aspectRatio, className, status, loadingLabel, animationDuration, enterTransition, revealSignature, enterStaggerScale, animate, loadingOpacity, showLoadingCells, loadingCellMaxOpacity, loadingCellRandomness, columnSeparators, weekStartDay, children, }: HeatmapChartProps): React$1.JSX.Element;
+declare namespace HeatmapChart {
+    var displayName: string;
+}
+
+type HeatmapLegendVariant = "swatches" | "gradient";
+interface HeatmapLegendProps {
+    /** Side label before the swatches. Default: "Less" */
+    lessLabel?: string;
+    /** Side label after the swatches. Default: "More" */
+    moreLabel?: string;
+    /** Swatch size in pixels. Default: 11 */
+    cellSize?: number;
+    /** Gap between swatches. Default: 2 */
+    gap?: number;
+    /** Corner radius for swatches. Default: 2 */
+    cornerRadius?: number;
+    /** Horizontal alignment within the legend cell. Default: "end" */
+    align?: "start" | "center" | "end";
+    /** Legend layout — discrete swatches or a continuous gradient bar. Default: `"swatches"` */
+    variant?: HeatmapLegendVariant;
+    /** Gradient bar width in swatch units when `variant="gradient"`. Default: 5 */
+    gradientSpan?: number;
+    /** Font size in pixels for side labels. */
+    fontSize?: number;
+    /** Additional class name for less/more labels. */
+    labelClassName?: string;
+    /** Shared level styles for cells and legend swatches. */
+    levelStyles?: HeatmapLevelStyles;
+    /** Override the default color scale (used when `levelStyles` is omitted). */
+    colorScale?: (count: number | null | undefined) => string;
+    /** Opacity for inactive swatches while interacting. Default: 0.3 */
+    inactiveOpacity?: number;
+    /** Scale for inactive swatches while interacting. Default: 1 */
+    inactiveScale?: number;
+    /** Scale for the highlighted swatch while interacting. Default: 1 */
+    activeScale?: number;
+    /** Sync dimming with chart hover. Default: true when inside HeatmapInteractionProvider */
+    interactive?: boolean;
+    className?: string;
+}
+declare const HeatmapLegend: React$1.NamedExoticComponent<HeatmapLegendProps>;
+
+interface HeatmapTooltipProps {
+    /** Custom contribution line (bottom section). Default: `N contribution(s)`. */
+    formatLabel?: (count: number, date: Date) => string;
+    /** Custom class name */
+    className?: string;
+    /** Inline styles for the tooltip panel (background, blur, etc.). */
+    panelStyle?: React.CSSProperties;
+    /**
+     * Tooltip panel background color (CSS variable or color value).
+     * Default: `var(--chart-tooltip-background)`.
+     */
+    backgroundColor?: string;
+    /**
+     * Delay before showing the tooltip on first hover (ms).
+     * Moving between cells updates immediately once visible.
+     */
+    showDelay?: number;
+    /**
+     * Grace period before hiding when the pointer leaves a cell (ms).
+     * Helps avoid flicker when moving quickly between adjacent cells.
+     */
+    hideDelay?: number;
+    /**
+     * When true, the tooltip appears and disappears instantly with no motion.
+     */
+    instant?: boolean;
+}
+declare const HeatmapTooltip: React$1.NamedExoticComponent<HeatmapTooltipProps>;
+
+interface HeatmapXAxisProps {
+    /** Additional class name for labels */
+    className?: string;
+}
+declare const HeatmapXAxis: React$1.NamedExoticComponent<HeatmapXAxisProps>;
+
+interface HeatmapYAxisProps {
+    /** Additional class name for labels */
+    className?: string;
+    /** Which row ticks to display. Default: `"odd"` (Mon / Wed / Fri). */
+    tickFilter?: HeatmapYAxisTickFilter;
+    /** Label format — `"initial"` shows the first letter only (Mon → M). Default: `"full"`. */
+    labelFormat?: HeatmapYAxisLabelFormat;
+    /** Per-row label opacity — mirrors {@link HeatmapCells} `rowOpacity`. */
+    rowOpacity?: number | readonly number[];
+}
+declare const HeatmapYAxis: React$1.NamedExoticComponent<HeatmapYAxisProps>;
+
+interface XAxisProps {
+    /** Number of ticks to show (including first and last). Default: 5. */
+    numTicks?: number;
+    /** Width of the date ticker box for fade calculation. Default: 50 */
+    tickerHalfWidth?: number;
+    /**
+     * `"data"` — tick labels snap to data rows so crosshair and tooltip stay aligned (default).
+     * `"domain"` — evenly spaced ticks across the time domain (may not align with hover).
+     */
+    tickMode?: "domain" | "data";
+}
+declare function XAxis(props: XAxisProps): React$1.JSX.Element | null;
+declare namespace XAxis {
+    var displayName: string;
+}
+
+type YAxisOrientation = "left" | "right";
+
+interface YAxisProps {
+    /** Scale group id (Recharts `yAxisId`). Default: `"left"`. */
+    yAxisId?: string | number;
+    /** Which side of the chart to render labels. Default: `"left"`. */
+    orientation?: YAxisOrientation;
+    /**
+     * Approximate tick count hint for `scale.ticks()` (d3). Actual label count may differ.
+     * Clamped to {@link Y_AXIS_MIN_TICK_COUNT}–{@link Y_AXIS_MAX_TICK_COUNT}. Default: 5.
+     */
+    numTicks?: number;
+    /** Format large numbers (e.g. 1000 as "1k"). Default: true */
+    formatLargeNumbers?: boolean;
+    /** Custom formatter for tick labels (e.g. USD). Overrides formatLargeNumbers when set. */
+    formatValue?: (value: number) => string;
+}
+declare function YAxis(props: YAxisProps): React$1.JSX.Element | null;
+declare namespace YAxis {
+    var displayName: string;
+}
+
+interface GridProps {
+    /** Show horizontal grid lines. Default: true */
+    horizontal?: boolean;
+    /** Show vertical grid lines. Default: false */
+    vertical?: boolean;
+    /** Number of horizontal grid lines. Default: 5 */
+    numTicksRows?: number;
+    /** Number of vertical grid lines. Default: 10 */
+    numTicksColumns?: number;
+    /** Explicit tick values for horizontal grid lines. Overrides numTicksRows. */
+    rowTickValues?: number[];
+    /** Grid line stroke color. Default: var(--chart-grid) */
+    stroke?: string;
+    /** Grid stroke while loading chrome is active. Falls back to `stroke`. */
+    loadingStroke?: string;
+    /** Grid line stroke opacity. Default: 1 */
+    strokeOpacity?: number;
+    /** Grid line stroke width. Default: 1 */
+    strokeWidth?: number;
+    /** Grid line dash array. Default: "4,4" for dashed lines */
+    strokeDasharray?: string;
+    /** Horizontal row values rendered with alternate styling (e.g. zero baseline). */
+    highlightRowValues?: number[];
+    /** Stroke for highlighted rows. Default: var(--chart-foreground-muted) */
+    highlightRowStroke?: string;
+    /** Stroke opacity for highlighted rows. Default: 1 */
+    highlightRowStrokeOpacity?: number;
+    /** Stroke width for highlighted rows. Default: 1 */
+    highlightRowStrokeWidth?: number;
+    /** Dash array for highlighted rows. Default: solid line */
+    highlightRowStrokeDasharray?: string;
+    /** Enable horizontal fade effect on grid rows (fades at left/right). Default: true */
+    fadeHorizontal?: boolean;
+    /** Enable vertical fade effect on grid columns (fades at top/bottom). Default: false */
+    fadeVertical?: boolean;
+    /** Omit the first and last horizontal grid lines. Default: false */
+    hideHorizontalEdgeLines?: boolean;
+    /** Omit the first and last vertical grid lines. Default: false */
+    hideVerticalEdgeLines?: boolean;
+    /** Y-scale for horizontal grid lines. Default: primary (`"left"`) axis. */
+    yAxisId?: string | number;
+    /** Animate a shimmer band across horizontal grid lines. Default: false */
+    shimmer?: boolean;
+    /** Shimmer band stroke (color and opacity via color-mix or oklch alpha). */
+    shimmerStroke?: string;
+    /** Shimmer band width in pixels. Default: 140 */
+    shimmerLength?: number;
+    /** Shimmer speed multiplier (higher = faster). Default: 1 */
+    shimmerSpeed?: number;
+    /** Match loop timing to the loading line pulse (cycle + inter-loop pause). */
+    shimmerSync?: boolean;
+}
+declare function Grid({ horizontal, vertical, numTicksRows, numTicksColumns, rowTickValues, stroke, loadingStroke, strokeOpacity, strokeWidth, strokeDasharray, highlightRowValues, highlightRowStroke, highlightRowStrokeOpacity, highlightRowStrokeWidth, highlightRowStrokeDasharray, fadeHorizontal, fadeVertical, hideHorizontalEdgeLines, hideVerticalEdgeLines, yAxisId, shimmer, shimmerStroke, shimmerLength, shimmerSpeed, shimmerSync, }: GridProps): React$1.JSX.Element;
+declare namespace Grid {
+    var displayName: string;
+}
+
+interface SpringConfig {
+    stiffness: number;
+    damping: number;
+}
+
+type IndicatorFadeEdges = "both" | "none" | "top" | "bottom";
+
+interface TooltipRow {
+    color: string;
+    label: string;
+    value: string | number;
+}
+
+interface ChartTooltipProps {
+    /** Whether to show the date pill at bottom. Default: true */
+    showDatePill?: boolean;
+    /** Whether to show the vertical crosshair line. Default: true */
+    showCrosshair?: boolean;
+    /** Whether to show dots on the lines. Default: true */
+    showDots?: boolean;
+    /** Dot style: filled circle or transparent ring. Default: "dot" */
+    dotVariant?: "dot" | "ring";
+    /** Dot / ring radius in pixels. Default: 5 */
+    dotSize?: number;
+    /** Ring corner radius as a fraction of side length (0 = square, 0.5 = circle). */
+    dotRadiusFraction?: number;
+    /** Multiplier applied to the computed dot / ring pixel radius. Default: 1 */
+    dotScale?: number;
+    /** Ring stroke width in pixels. Default: 1.5 for ring variant */
+    dotStrokeWidth?: number;
+    /**
+     * Color for the crosshair/indicator line. When a function, receives the hovered point
+     * (e.g. for candlestick: match candle color from close vs open). Default: --chart-crosshair.
+     */
+    indicatorColor?: string | ((point: Record<string, unknown>) => string);
+    /** Custom content renderer for the tooltip box */
+    content?: (props: {
+        point: Record<string, unknown>;
+        index: number;
+    }) => React.ReactNode;
+    /** Custom row renderer - return array of TooltipRow */
+    rows?: (point: Record<string, unknown>) => TooltipRow[];
+    /**
+     * Override tooltip dot fill. When omitted and `rows` is set, dot colors match row colors.
+     * When a function, receives the hovered point and line config.
+     */
+    dotColor?: string | ((point: Record<string, unknown>, line: LineConfig) => string);
+    /** Additional content to show below rows (e.g., markers) */
+    children?: React.ReactNode;
+    /** Custom class name */
+    className?: string;
+    /** Per-chart override for the crosshair / dot / date-pill spring. */
+    springConfig?: SpringConfig;
+    /**
+     * When `true`, the floating panel uses the crosshair spring and stays in sync.
+     * Default `false` — panel follow uses `damping` (`20`).
+     */
+    matchCrosshair?: boolean;
+    /**
+     * Spring damping for the floating tooltip panel when `matchCrosshair` is `false`.
+     * `0` disables spring motion (instant). Default: `20`.
+     */
+    damping?: number;
+    /** SVG stroke dash pattern for the crosshair. Omit for solid. */
+    indicatorDasharray?: string;
+    /** Vertical crosshair fade: `both`, `top`, `bottom`, or `none` (solid). Default: `both`. */
+    indicatorFadeEdges?: IndicatorFadeEdges;
+    /** Crosshair fade zone size (% of height). Default: `10`. */
+    indicatorFadeLength?: number;
+    /** Per-chart override for the floating-panel spring. */
+    boxSpringConfig?: SpringConfig;
+    /** Inline styles for the tooltip panel (background, blur, etc.). */
+    panelStyle?: React.CSSProperties;
+    /**
+     * Tooltip panel background color (CSS variable or color value).
+     * Default: `var(--chart-tooltip-background)`.
+     */
+    backgroundColor?: string;
+}
+declare function ChartTooltip(props: ChartTooltipProps): React$1.JSX.Element | null;
+declare namespace ChartTooltip {
+    var displayName: string;
+}
+
+/** Subset of `Intl.NumberFormatOptions` supported by NumberFlow */
+interface ChartStatFlowFormat {
+    notation?: "standard" | "compact";
+    compactDisplay?: "short" | "long";
+    minimumFractionDigits?: number;
+    maximumFractionDigits?: number;
+    minimumIntegerDigits?: number;
+    minimumSignificantDigits?: number;
+    maximumSignificantDigits?: number;
+    style?: "decimal" | "percent" | "currency";
+    currency?: string;
+    currencyDisplay?: "symbol" | "narrowSymbol" | "code" | "name";
+    unit?: string;
+    unitDisplay?: "short" | "long" | "narrow";
+}
+declare const defaultChartStatFlowFormat: ChartStatFlowFormat;
+interface ChartStatFlowProps {
+    value: number;
+    label: string;
+    formatOptions?: ChartStatFlowFormat;
+    prefix?: string;
+    suffix?: string;
+    valueClassName?: string;
+    labelClassName?: string;
+    icon?: ReactNode;
+}
+/**
+ * Shared value + label stack using NumberFlow (same layout as pie / ring centers).
+ * Parent should provide flex alignment and sizing when needed.
+ */
+declare function ChartStatFlow({ value, label, formatOptions, prefix, suffix, valueClassName, labelClassName, icon, }: ChartStatFlowProps): React$1.JSX.Element;
+declare namespace ChartStatFlow {
+    var displayName: string;
+}
+
+type GaugeLabelPlacement = "top" | "bottom" | "left" | "right";
+type GaugeLabelAlign = "start" | "center" | "end";
+
+type GaugeOrientation = "arc" | "linear";
+interface GaugeProps {
+    /** Arc (default) or horizontal linear notch track */
+    orientation?: GaugeOrientation;
+    /** Fill level 0–100 */
+    value: number;
+    /** Number of notches */
+    totalNotches?: number;
+    /** Percentage of the track reserved for gaps between notches */
+    spacing?: number;
+    notchCornerRadius?: number;
+    /** `true` = rectangular notches; `false` = tapered toward center / midline */
+    uniformWidth?: boolean;
+    startAngle?: number;
+    endAngle?: number;
+    useGradient?: boolean;
+    activeGradient?: readonly [string, string];
+    inactiveGradient?: readonly [string, string];
+    /** Center statistic — omit to hide the label block */
+    centerValue?: number;
+    defaultLabel?: string;
+    prefix?: string;
+    suffix?: string;
+    formatOptions?: ChartStatFlowFormat;
+    /** Label position for `orientation="linear"`. Arc gauges always overlay center. */
+    labelPlacement?: GaugeLabelPlacement;
+    /** Cross-axis alignment (start / center / end), same model as chart legend */
+    labelAlign?: GaugeLabelAlign;
+    inactiveFill?: string;
+    activeFill?: string;
+    inactiveFillOpacity?: number;
+    activeFillOpacity?: number;
+    children?: ReactNode;
+    className?: string;
+    width?: number;
+    height?: number;
+    minWidth?: number;
+    notchLengthPercent?: number;
+    /** Linear only — notch width as % of each slot (default 80) */
+    notchWidthPercent?: number;
+    /** Linear only — bar thickness in px when responsive (default 24) */
+    linearHeight?: number;
+    enterTransition?: Transition;
+    enterStaggerScale?: number;
+    /** Studio-only: static paths while scrubbing geometry controls */
+    geometryScrubbing?: boolean;
+}
+declare function Gauge({ width: widthProp, height: heightProp, className, minWidth, orientation, linearHeight, ...props }: GaugeProps): React$1.JSX.Element;
+declare namespace Gauge {
+    var displayName: string;
+}
+
+declare const ringCssVars: {
+    background: string;
+    foreground: string;
+    foregroundMuted: string;
+    label: string;
+    ringBackground: string;
+    ring1: string;
+    ring2: string;
+    ring3: string;
+    ring4: string;
+    ring5: string;
+};
+declare const defaultRingColors: string[];
+interface RingData {
+    /** Display label for the ring */
+    label: string;
+    /** Current value */
+    value: number;
+    /** Maximum value (determines progress percentage) */
+    maxValue: number;
+    /** Optional color override - falls back to palette */
+    color?: string;
+}
+interface RingHoverContextValue {
+    hoveredIndex: number | null;
+    setHoveredIndex: (index: number | null) => void;
+}
+interface RingStableContextValue {
+    data: RingData[];
+    size: number;
+    center: number;
+    strokeWidth: number;
+    ringGap: number;
+    baseInnerRadius: number;
+    animationKey: number;
+    isLoaded: boolean;
+    enterTransition?: Transition;
+    enterStaggerScale: number;
+    containerRef: RefObject<HTMLDivElement | null>;
+    totalValue: number;
+    getColor: (index: number) => string;
+    getRingRadii: (index: number) => {
+        innerRadius: number;
+        outerRadius: number;
+    };
+    startAngle: number;
+    endAngle: number;
+    /**
+     * Studio geometry scrub — skip Motion path morphing and use plain SVG paths.
+     * @default false
+     */
+    geometryScrubbing: boolean;
+}
+type RingContextValue = RingStableContextValue & RingHoverContextValue;
+declare function RingProvider({ children, value, }: {
+    children: ReactNode;
+    value: RingContextValue;
+}): React$1.JSX.Element;
+declare function useRingStable(): RingStableContextValue;
+declare function useRingHover(): RingHoverContextValue;
+declare function useRing(): RingContextValue;
+
+interface RingChartProps {
+    /** Data array - each item represents a ring */
+    data: RingData[];
+    /** Chart size in pixels. If not provided, uses parent container size */
+    size?: number;
+    /** Stroke width of each ring. Default: 12 */
+    strokeWidth?: number;
+    /** Gap between rings. Default: 6 */
+    ringGap?: number;
+    /** Inner radius of the innermost ring. Default: 60 */
+    baseInnerRadius?: number;
+    /** Animation duration in milliseconds. Default: 1100 */
+    animationDuration?: number;
+    /** Additional class name for the container */
+    className?: string;
+    /** Controlled hover state - index of hovered ring */
+    hoveredIndex?: number | null;
+    /** Callback when hover state changes */
+    onHoverChange?: (index: number | null) => void;
+    /** Start angle in radians. Default: -PI/2 (top) */
+    startAngle?: number;
+    /** End angle in radians. Default: 3*PI/2 (full circle) */
+    endAngle?: number;
+    /** Framer Motion transition for ring enter animation */
+    enterTransition?: Transition;
+    /** Scales ring stagger delays (1 = default). */
+    enterStaggerScale?: number;
+    /**
+     * High-frequency geometry updates (e.g. studio NumberField scrub).
+     * Uses plain SVG paths instead of Motion `d` morphing.
+     */
+    geometryScrubbing?: boolean;
+    /** Child components (Ring, RingCenter, etc.) */
+    children: ReactNode;
+}
+declare function RingChart({ data, size: fixedSize, strokeWidth, ringGap, baseInnerRadius, className, hoveredIndex, onHoverChange, startAngle, endAngle, enterTransition, enterStaggerScale, geometryScrubbing, children, }: RingChartProps): React$1.JSX.Element;
+
+type RingLineCap = "round" | "butt";
+interface RingProps {
+    index: number;
+    color?: string;
+    animate?: boolean;
+    showGlow?: boolean;
+    lineCap?: RingLineCap;
+}
+declare const Ring: React$1.NamedExoticComponent<RingProps>;
+
+interface RingCenterProps {
+    /** Label shown below the value. Default: "Total" when not hovering */
+    defaultLabel?: string;
+    /** Format options for NumberFlow. Default: standard notation */
+    formatOptions?: ChartStatFlowFormat;
+    /** Custom render function for complete control over center content */
+    children?: (props: {
+        value: number;
+        label: string;
+        isHovered: boolean;
+        data: {
+            label: string;
+            value: number;
+            maxValue: number;
+            color?: string;
+        };
+    }) => ReactNode;
+    /** Additional class name for the container */
+    className?: string;
+    /** Class name for the value text. Scales with center size via container queries. */
+    valueClassName?: string;
+    /** Class name for the label text. Scales with center size via container queries. */
+    labelClassName?: string;
+    /** Prefix to show before the number (e.g., "$") */
+    prefix?: string;
+    /** Suffix to show after the number (e.g., "%") */
+    suffix?: string;
+}
+/**
+ * RingCenter displays content in the center of the ring chart.
+ *
+ * This component renders as pure HTML (not inside SVG foreignObject) to avoid
+ * Safari's WebKit bug #23113 where HTML content with CSS transforms/opacity
+ * inside foreignObject renders at incorrect positions.
+ *
+ * The parent RingChart uses CSS Grid stacking to overlay this HTML content
+ * on top of the SVG rings.
+ */
+declare function RingCenter({ defaultLabel, formatOptions, children, className, valueClassName, labelClassName, prefix, suffix, }: RingCenterProps): React$1.JSX.Element;
+declare namespace RingCenter {
+    var displayName: string;
+}
+
+declare function StatCardArea(): React$1.JSX.Element;
+
+declare function StatCardLine(): React$1.JSX.Element;
+
+declare function TrendBadge({ value, className, }: {
+    value: number;
+    className?: string;
+}): React$1.JSX.Element;
+
+/**
+ * Pure helpers for sparse rollup series → chart-ready points.
+ * Locale-aware formatting via Intl; no React / chart deps.
+ */
+type ChartPoint = {
+    date: string;
+    value: number;
+    [key: string]: string | number | null | undefined;
+};
+type FillSeriesGapsOptions = {
+    /** Inclusive start, `YYYY-MM-DD`. */
+    from: string;
+    /** Inclusive end, `YYYY-MM-DD`. */
+    to: string;
+    /** Field holding the date key (default `date`). */
+    dateKey?: string;
+    /** Field holding the numeric value (default `value`). */
+    valueKey?: string;
+    /** Fill missing days with this value (default `0`). */
+    fill?: number;
+};
+/**
+ * Expand a sparse daily series into a contiguous day range, filling gaps.
+ */
+declare function fillSeriesGaps(points: ChartPoint[], options: FillSeriesGapsOptions): ChartPoint[];
+type TrendDelta = {
+    /** Absolute change from previous → current. */
+    delta: number;
+    /** Percent change; `null` when previous is 0. */
+    percent: number | null;
+    /** Sign of the change for badges. */
+    direction: "up" | "down" | "flat";
+};
+/**
+ * Compare the last point to the previous (or to the first when only two).
+ */
+declare function trendDelta(points: Array<{
+    value: number;
+}>): TrendDelta | null;
+declare function formatChartNumber(value: number, locale: string, options?: Intl.NumberFormatOptions): string;
+declare function formatChartDate(isoDate: string, locale: string, options?: Intl.DateTimeFormatOptions): string;
+/**
+ * Map `{ period, value }` rollup rows into chart points keyed by `date`.
+ */
+declare function toChartPoints(rows: Array<{
+    period: string;
+    value: number;
+}>): ChartPoint[];
+
+export { Area, AreaChart, type AreaChartProps, type AreaProps, Bar, BarChart, type BarChartProps, type BarProps, type ChartPoint, ChartProvider, ChartStatFlow, type ChartStatFlowFormat, type ChartStatFlowProps, ChartTooltip, ComposedChart, type ComposedChartProps, type FillSeriesGapsOptions, FunnelChart, type FunnelChartProps, Gauge, type GaugeLabelAlign, type GaugeLabelPlacement, type GaugeOrientation, type GaugeProps, Grid, HeatmapCells, HeatmapChart, type HeatmapChartProps, HeatmapLegend, HeatmapTooltip, HeatmapXAxis, HeatmapYAxis, Line, LineChart, type LineChartProps, type LineConfig, type LineProps, LiveLine, LiveLineChart, type LiveLineChartProps, type LiveLineProps, type Margin, Ring, RingCenter, type RingCenterProps, RingChart, type RingChartProps, type RingContextValue, type RingData, type RingHoverContextValue, type RingLineCap, type RingProps, RingProvider, type RingStableContextValue, StatCardArea, StatCardLine, TrendBadge, type TrendDelta, XAxis, YAxis, chartCssVars, defaultChartStatFlowFormat, defaultRingColors, fillSeriesGaps, formatChartDate, formatChartNumber, ringCssVars, toChartPoints, trendDelta, useChart, useChartStable, useRing, useRingHover, useRingStable };