import type { Datum } from "../shared/datumTypes";
import * as React from "react";
import type { StreamXYFrameProps, MarginalGraphicsConfig } 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";
import { type RegressionProp } from "../shared/regressionUtils";
/**
 * BubbleChart component props
 */
export interface BubbleChartProps<TDatum extends Datum = Datum> extends BaseChartProps, AxisConfig {
    /**
     * Array of data points. Each point should have x, y, and size properties.
     * @example
     * ```ts
     * [{x: 1, y: 10, size: 50, category: 'A'}, {x: 2, y: 20, size: 30, 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 determine bubble size (required)
     * @example
     * ```ts
     * sizeBy="population"
     * sizeBy={d => Math.sqrt(d.value)}
     * ```
     */
    sizeBy: ChartAccessor<TDatum, number>;
    /**
     * Min and max radius for bubbles
     * @default [5, 40]
     */
    sizeRange?: [number, number];
    /**
     * Field name or function to determine bubble color
     * @example
     * ```ts
     * colorBy="category"
     * colorBy={d => d.value > 10 ? 'red' : 'blue'}
     * ```
     */
    colorBy?: ChartAccessor<TDatum, string>;
    /**
     * Color scheme for categorical data or custom colors array
     * @default "category10"
     */
    colorScheme?: string | string[];
    /**
     * Bubble opacity
     * @default 0.6
     */
    bubbleOpacity?: number;
    /**
     * Bubble stroke width
     * @default 1
     */
    bubbleStrokeWidth?: number;
    /**
     * Bubble stroke color
     * @default "white"
     */
    bubbleStrokeColor?: string;
    /**
     * Enable hover annotations
     * @default true
     */
    enableHover?: boolean;
    /**
     * Show grid lines
     * @default false
     */
    showGrid?: boolean;
    /**
     * Show legend
     * @default true (when colorBy is specified)
     */
    showLegend?: boolean;
    /**
     * Tooltip configuration
     */
    tooltip?: TooltipProp;
    /**
     * Marginal distribution plots in axis margins
     */
    marginalGraphics?: MarginalGraphicsConfig;
    /** Accessor for unique point IDs, used by point-anchored annotations */
    pointIdAccessor?: ChartAccessor<TDatum, string>;
    /**
     * 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;
    /**
     * Annotation objects to render on the chart
     */
    annotations?: Datum[];
    /**
     * Overlay a regression line on the bubbles. Accepts `true` (linear
     * with default styling), a method name (`"linear"` | `"polynomial"`
     * | `"loess"`), or a full `RegressionConfig`. Sugar over the `trend`
     * annotation — drop into the `annotations` array directly for richer
     * setups.
     */
    regression?: RegressionProp;
    /** Fixed x domain `[min, max]` (either bound may be undefined to leave that side data-derived). */
    xExtent?: [number | undefined, number | undefined] | [number];
    /** Fixed y domain `[min, max]` (either bound may be undefined to leave that side data-derived). */
    yExtent?: [number | undefined, number | undefined] | [number];
    /**
     * 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">>;
}
/**
 * BubbleChart - Visualize three dimensions of data using x, y, and size
 *
 * A simplified wrapper around StreamXYFrame for creating bubble charts. Perfect for
 * showing relationships between three continuous variables or comparing
 * magnitudes across categories.
 *
 * @example
 * ```tsx
 * // Simple bubble chart
 * <BubbleChart
 *   data={[
 *     {x: 1, y: 10, size: 50, name: 'A'},
 *     {x: 2, y: 20, size: 30, name: 'B'},
 *     {x: 3, y: 15, size: 70, name: 'C'}
 *   ]}
 *   sizeBy="size"
 *   xLabel="Time"
 *   yLabel="Value"
 * />
 * ```
 *
 * @example
 * ```tsx
 * // With color encoding
 * <BubbleChart
 *   data={data}
 *   sizeBy="population"
 *   colorBy="continent"
 *   sizeRange={[5, 50]}
 *   bubbleOpacity={0.7}
 *   xLabel="GDP per Capita"
 *   yLabel="Life Expectancy"
 * />
 * ```
 *
 * @example
 * ```tsx
 * // Advanced: Override StreamXYFrame props
 * <BubbleChart
 *   data={data}
 *   sizeBy="value"
 *   frameProps={{
 *     customPointMark: ({ d }) => <circle r={d.r} fill="gold" />
 *   }}
 * />
 * ```
 *
 * @remarks
 * This component wraps {@link StreamXYFrame} with sensible defaults for bubble charts.
 * For more advanced features like custom marks, annotations, or complex interactions,
 * use StreamXYFrame directly.
 *
 * **Breadcrumb to advanced usage:**
 * - Use the `frameProps` prop to pass any StreamXYFrame prop
 * - See StreamXYFrame documentation: https://semiotic.nteract.io/guides/xy-frame
 * - All StreamXYFrame props are available via `frameProps`
 *
 * @param props - BubbleChart configuration
 * @returns Rendered bubble chart
 */
export declare const BubbleChart: {
    <TDatum extends Datum = Datum>(props: BubbleChartProps<TDatum> & React.RefAttributes<RealtimeFrameHandle>): React.ReactElement | null;
    displayName?: string;
};
