/**
 * AreaChart — filled bands over time, stacked or overlaid.
 *
 * ```tsx
 * <AreaChart data={traffic} xDataKey="date" stacked>
 *   <AreaChart.Grid />
 *   <AreaChart.Area dataKey="direct" />
 *   <AreaChart.Area dataKey="search" colorIndex={2} />
 *   <AreaChart.XAxis />
 *   <AreaChart.Tooltip />
 * </AreaChart>
 * ```
 *
 * ## Why this is not `LineChart.Area`
 *
 * `LineChart.Area` shades under a line, which is one series saying "this is
 * the shape of the thing". This chart answers a different question — *what is
 * it made of* — and that needs stacking: each band sits on the running total
 * of the ones below it, so the top edge is the whole and the thickness of each
 * band is its share.
 *
 * Stacking is not a flag that could be bolted on. It changes the y-domain from
 * the largest single series to the largest *sum*, it makes each area's
 * baseline a curve rather than the axis, and it makes the order the series are
 * declared in load-bearing. A chart where all of that is true of some children
 * and not others is a chart nobody can read, so it is a chart of its own.
 *
 * Unstacked, the bands overlay each other and the fills are drawn translucent,
 * which is the right reading when the series are alternatives rather than
 * parts — two plans compared, not two slices of one total.
 */
import { type ReactNode } from 'react';
import { type ViewProps } from 'react-native';
import { type ChartAccessibilityProps } from '../../primitives/chart-accessibility.js';
import { type ChartCurve, type SeriesColorIndex } from '../../utils/chart.js';
type Layer = 'svg' | 'series' | 'overlay' | 'header';
export type AreaChartStatus = 'loading' | 'ready';
export type AreaChartDatum = Record<string, string | number | null | undefined>;
/**
 * The point under the crosshair, for something rendered *inside* the chart.
 * A readout in the card's header is outside this provider — use
 * `onActiveIndexChange` for that.
 */
export declare function useAreaChart(): {
    activeIndex: number;
    activePoint: AreaChartDatum | null;
    xDataKey: string;
};
export interface AreaChartProps extends ViewProps, ChartAccessibilityProps<AreaChartDatum> {
    className?: string;
    /** The rows. Each one is a point along the x-axis. */
    data: AreaChartDatum[];
    /** Key holding the x label. Used by the axis and the crosshair readout. */
    xDataKey?: string;
    /**
     * `loading` holds the bands flat and grows them into the real ones when it
     * turns `ready`. Add an `AreaChart.Skeleton` for something to stand in the
     * plot meanwhile.
     */
    status?: AreaChartStatus;
    /** Width ÷ height. `2` is the wide card shape. */
    aspectRatio?: number;
    /** Milliseconds for the reveal on mount. */
    animationDuration?: number;
    /** Milliseconds for the y-axis to settle after the data changes. */
    domainDuration?: number;
    /** Fix the y-axis instead of deriving it from the data. */
    yDomain?: [number, number];
    /**
     * Sit each band on the running total of the ones below it, so the top edge
     * is the whole and each thickness is a share. The order the `Area` children
     * are declared in is the stacking order, bottom first.
     *
     * Unstacked, the bands overlay and their fills are translucent — the right
     * reading when the series are alternatives rather than parts of a total.
     */
    stacked?: boolean;
    /** `monotone` never overshoots between points; `linear` joins them straight. */
    curve?: ChartCurve;
    /**
     * The point under the crosshair as it moves, and `-1`/`null` when it lifts.
     * Fires when the index changes, not per frame.
     */
    onActiveIndexChange?: (index: number, datum: AreaChartDatum | null) => void;
    /** Drop the axis padding so the bands reach the edges, for a sparkline. */
    compact?: boolean;
    children?: ReactNode;
}
/** Imperative handle: re-run the reveal on demand, for a "replay" control. */
export interface AreaChartHandle {
    replay: () => void;
}
export interface AreaChartGridProps {
    rows?: number;
    color?: string;
    dashArray?: string;
    opacity?: number;
}
/** Horizontal rules, so a band can be read against a number. */
declare function AreaChartGrid({ rows, color, dashArray, opacity }: AreaChartGridProps): import("react").JSX.Element;
declare namespace AreaChartGrid {
    var displayName: string;
    var layer: Layer;
}
export interface AreaChartAreaProps {
    /** Column in the data holding this series' values. */
    dataKey: string;
    /** Explicit colour. Defaults to the `--color-chart-*` token for `colorIndex`. */
    color?: string;
    /** Which of the five chart tokens to take. */
    colorIndex?: SeriesColorIndex;
    /** Opacity of the fill at the top of the band. */
    fillOpacity?: number;
    /** Opacity at the bottom. `0` fades the band out; match `fillOpacity` for a flat fill. */
    gradientToOpacity?: number;
    /** Draw the line along the top edge of the band. */
    showLine?: boolean;
    /** Thickness of that line. */
    strokeWidth?: number;
}
/**
 * One filled band.
 *
 * The fill is a gradient by default rather than a flat wash, because a flat
 * fill of any weight competes with the line on top of it — fading it downward
 * keeps the top edge, which is the part carrying the numbers, the darkest
 * thing in the band.
 */
declare function AreaChartArea({ dataKey, color, colorIndex, fillOpacity, gradientToOpacity, showLine, strokeWidth, }: AreaChartAreaProps): import("react").JSX.Element;
declare namespace AreaChartArea {
    var displayName: string;
    var layer: Layer;
}
export interface AreaChartSkeletonProps {
    /** Milliseconds for one pass of the sweep. */
    duration?: number;
    color?: string;
}
/**
 * The loading state: a low band along the baseline with a highlight travelling
 * across it.
 *
 * Flat on purpose. A placeholder with a shape in it is a shape the reader has
 * no way to tell from the real one until it changes under them, so the band
 * says only where the series will be and how tall the plot is.
 *
 * The sweep is the part that carries the meaning. Without it a chart waiting
 * for data and a chart whose values are all zero draw the same picture, and
 * the reader is left to guess which one they are looking at.
 */
declare function AreaChartSkeleton({ duration, color }: AreaChartSkeletonProps): import("react").JSX.Element | null;
declare namespace AreaChartSkeleton {
    var displayName: string;
    var layer: Layer;
}
export interface AreaChartXAxisProps {
    ticks?: number;
    format?: (datum: AreaChartDatum, index: number) => string;
    className?: string;
}
/** The x labels. Real text, so they follow the theme's font and text scaling. */
declare function AreaChartXAxis({ ticks, format, className }: AreaChartXAxisProps): import("react").JSX.Element;
declare namespace AreaChartXAxis {
    var displayName: string;
    var layer: Layer;
}
export interface AreaChartYAxisProps {
    ticks?: number;
    format?: (value: number) => string;
    className?: string;
}
/** Value labels down the side, aligned to the grid lines. */
declare function AreaChartYAxis({ ticks, format, className }: AreaChartYAxisProps): import("react").JSX.Element;
declare namespace AreaChartYAxis {
    var displayName: string;
    var layer: Layer;
    var axis: "y";
}
export interface AreaChartTooltipProps {
    color?: string;
    /** Format one series' value. Defaults to a compact number. */
    formatValue?: (value: number, key: string) => string;
    /** Format the readout's heading from the row. Defaults to the value at xDataKey. */
    formatX?: (datum: AreaChartDatum) => string;
    className?: string;
}
/**
 * The crosshair, the gesture that drives it, and the readout that rides it.
 *
 * The hit area is the whole plot. A crosshair you have to land on a band to
 * summon is a crosshair nobody finds.
 */
declare function AreaChartTooltip({ color, formatValue, formatX, className }: AreaChartTooltipProps): import("react").JSX.Element | null;
declare namespace AreaChartTooltip {
    var displayName: string;
    var layer: Layer;
}
export interface AreaChartLegendProps extends ViewProps {
    className?: string;
    /** Prettier names for the series keys. */
    labels?: Record<string, string>;
}
/**
 * A swatch and a name per series.
 *
 * Reversed for a stack, so the key reads in the order the bands appear on the
 * chart: the last one declared is the top band, and a legend listing it last
 * points at the bottom one.
 */
declare function AreaChartLegend({ className, labels, ...props }: AreaChartLegendProps): import("react").JSX.Element | null;
declare namespace AreaChartLegend {
    var displayName: string;
    var layer: Layer;
}
export interface AreaChartHeaderProps extends ViewProps {
    className?: string;
    /** Small line above the value — what the chart is of. */
    title?: string;
    /** The readout. The largest thing on the card, and the first thing read. */
    value?: string;
    /** One muted line under the value — a period, a comparison, a total. */
    caption?: string;
    /** Prettier names for the series keys, as the legend takes. */
    labels?: Record<string, string>;
    /**
     * Draw a swatch and a name per series along the trailing edge, in the order
     * the bands appear on a stack. Prefer this to `AreaChart.Legend` on a chart
     * that has a header: the legend floats over the plot, where a tall band and a
     * key end up in the same corner.
     */
    legend?: boolean;
    /** Trailing slot — a control, a badge, a range picker. Wins over `legend`. */
    children?: ReactNode;
}
/**
 * The strip above the plot: what the chart is of, what it currently reads, and
 * what the colours mean.
 *
 * It belongs to the chart rather than to the card around it because it is about
 * the *plot* — the number changes as a finger moves along the bands, and the
 * legend is the series list the chart itself is holding. The card's header is a
 * caption on the tray the chart sits in; this is the chart introducing itself.
 *
 * The value is not derived here. A readout that follows the finger belongs to
 * whoever owns the data — take it from `onActiveIndexChange` and pass the
 * formatted string down, so one header can show a total when nothing is pressed
 * and a point's value when something is.
 */
declare function AreaChartHeader({ className, title, value, caption, labels, legend, children, ...props }: AreaChartHeaderProps): import("react").JSX.Element;
declare namespace AreaChartHeader {
    var displayName: string;
    var layer: Layer;
}
export declare const AreaChart: import("react").ForwardRefExoticComponent<AreaChartProps & import("react").RefAttributes<AreaChartHandle>> & {
    Header: typeof AreaChartHeader;
    Grid: typeof AreaChartGrid;
    Area: typeof AreaChartArea;
    Skeleton: typeof AreaChartSkeleton;
    XAxis: typeof AreaChartXAxis;
    YAxis: typeof AreaChartYAxis;
    Tooltip: typeof AreaChartTooltip;
    Legend: typeof AreaChartLegend;
};
export {};
//# sourceMappingURL=index.d.ts.map