import type { Datum } from "../shared/datumTypes";
import * as React from "react";
import type { StreamXYFrameProps } from "../../stream/types";
import type { RealtimeFrameHandle } from "../../realtime/types";
import type { LegendInteractionMode, LegendPosition } from "../shared/hooks";
import type { BaseChartProps, AxisConfig, ChartAccessor } from "../shared/types";
import { type TooltipProp } from "../../Tooltip/Tooltip";
/**
 * AreaChart component props
 */
export interface AreaChartProps<TDatum extends Datum = Datum> extends BaseChartProps, AxisConfig {
    /**
     * Array of data points, grouped by category.
     * @example
     * ```ts
     * // Multiple areas with grouping
     * [{x: 1, y: 10, category: 'A'}, {x: 2, y: 20, category: 'A'}, {x: 1, y: 15, category: 'B'}]
     * ```
     */
    data?: TDatum[];
    /**
     * Field name or function to access x values
     * @default "x"
     */
    xAccessor?: ChartAccessor<TDatum, number>;
    /**
     * Field name or function to access y values
     * @default "y"
     */
    yAccessor?: ChartAccessor<TDatum, number>;
    /**
     * Field name or function to group data into multiple areas
     * @example
     * ```ts
     * areaBy="category"  // Group by category field
     * areaBy={d => d.group}  // Use function
     * ```
     */
    areaBy?: ChartAccessor<TDatum, string>;
    /**
     * Field name in area objects that contains coordinate arrays
     * Used when data is in area objects format
     * @default "coordinates"
     */
    lineDataAccessor?: string;
    /**
     * Field name or function to determine area color
     * @example
     * ```ts
     * colorBy="category"
     * colorBy={d => d.label}
     * ```
     */
    colorBy?: ChartAccessor<TDatum, string>;
    /**
     * Color scheme for categorical data or custom colors array
     * @default "category10"
     */
    colorScheme?: string | string[];
    /**
     * Curve interpolation type
     * @default "monotoneX"
     */
    curve?: "linear" | "monotoneX" | "monotoneY" | "step" | "stepAfter" | "stepBefore" | "basis" | "cardinal" | "catmullRom";
    /**
     * Per-point lower bound accessor for band/ribbon charts.
     * When set, the area fills between yAccessor (top) and y0Accessor (bottom)
     * instead of filling down to the axis. Use for percentile bands (p5–p95),
     * confidence intervals, or any ribbon visualization.
     * @example
     * ```ts
     * // Data: [{ x: 0, p95: 80, p5: 20 }, ...]
     * <AreaChart data={d} xAccessor="x" yAccessor="p95" y0Accessor="p5" />
     * ```
     */
    y0Accessor?: ChartAccessor<TDatum, number>;
    /**
     * Gradient fill from line to baseline. Set `true` for default opacity (80% → 5%),
     * `{ topOpacity, bottomOpacity }` for custom opacity, or
     * `{ colorStops: [{offset, color}] }` for multi-color gradients.
     * @default false
     */
    gradientFill?: boolean | {
        topOpacity: number;
        bottomOpacity: number;
    } | {
        colorStops: Array<{
            offset: number;
            color: string;
        }>;
    };
    /**
     * Area opacity (flat fill, ignored when gradientFill is set)
     * @default 0.7
     */
    areaOpacity?: number;
    /**
     * Horizontal gradient for the line stroke. Color stops define a left-to-right gradient.
     */
    lineGradient?: {
        colorStops: Array<{
            offset: number;
            color: string;
        }>;
    };
    /**
     * Show line on top of area
     * @default true
     */
    showLine?: boolean;
    /**
     * Line stroke width when showLine is true
     * @default 2
     */
    lineWidth?: number;
    /**
     * Show data points on the area line.
     * Useful for sparse data or single-point series.
     * @default false
     */
    showPoints?: boolean;
    /**
     * Point radius when showPoints is true
     * @default 3
     */
    pointRadius?: number;
    /**
     * Enable hover annotations
     * @default true
     */
    enableHover?: boolean;
    /**
     * Show grid lines
     * @default false
     */
    showGrid?: boolean;
    /**
     * Show legend for multiple areas
     * @default true (when multiple areas)
     */
    showLegend?: boolean;
    /**
     * Legend interaction mode.
     * - "highlight": hover dims non-hovered categories to 30% opacity
     * - "isolate": click toggles category visibility with checkmark indicators
     * - "none": static legend (default)
     */
    legendInteraction?: LegendInteractionMode;
    /**
     * Legend position
     */
    legendPosition?: LegendPosition;
    /**
     * Tooltip configuration
     */
    tooltip?: TooltipProp;
    /**
     * Annotation objects to render on the chart
     */
    annotations?: Datum[];
    /**
     * Additional StreamXYFrame props for advanced customization
     * For full control, consider using StreamXYFrame directly
     * @see https://semiotic.nteract.io/guides/xy-frame
     */
    frameProps?: Partial<Omit<StreamXYFrameProps, "chartType" | "data" | "size">>;
}
/**
 * AreaChart - Visualize quantities over continuous intervals with overlapping filled areas
 *
 * Each series fills from its line down to the baseline. Multiple series overlap
 * with transparency so all shapes remain visible.
 *
 * For stacked areas use {@link StackedAreaChart}.
 *
 * @example
 * ```tsx
 * <AreaChart
 *   data={[
 *     {x: 1, y: 10, category: 'A'},
 *     {x: 2, y: 20, category: 'A'},
 *     {x: 1, y: 15, category: 'B'},
 *     {x: 2, y: 25, category: 'B'}
 *   ]}
 *   areaBy="category"
 *   colorBy="category"
 *   xLabel="Time"
 *   yLabel="Value"
 * />
 * ```
 */
export declare const AreaChart: {
    <TDatum extends Datum = Datum>(props: AreaChartProps<TDatum> & React.RefAttributes<RealtimeFrameHandle>): React.ReactElement | null;
    displayName?: string;
};
