import type { Datum } from "../shared/datumTypes";
import * as React from "react";
import type { StreamOrdinalFrameProps } from "../../stream/ordinalTypes";
import type { LegendInteractionMode } from "../shared/hooks";
import type { BaseChartProps, ChartAccessor, CategoryFormatFn } from "../shared/types";
import { type TooltipProp } from "../../Tooltip/Tooltip";
import type { RealtimeFrameHandle } from "../../realtime/types";
/**
 * FunnelChart component props
 */
export interface FunnelChartProps<TDatum extends Datum = Datum> extends BaseChartProps {
    data?: TDatum[];
    /** Accessor for funnel step names (e.g., "Awareness", "Interest", "Purchase") */
    stepAccessor?: ChartAccessor<TDatum, string>;
    /** Accessor for the numeric value at each step */
    valueAccessor?: ChartAccessor<TDatum, number>;
    /** Accessor for splitting into mirrored categories (e.g., "control" vs "treatment") */
    categoryAccessor?: ChartAccessor<TDatum, string>;
    colorBy?: ChartAccessor<TDatum, string>;
    colorScheme?: string | string[];
    /**
     * Funnel orientation.
     *
     * - `"horizontal"` (default): steps run top-to-bottom with centered bars and
     *   trapezoid connectors between steps.
     * - `"vertical"`: steps on the x-axis as vertical bars. Each bar is stacked:
     *   solid = retained value, hatched = dropoff from the previous step.
     *   Multi-category data renders grouped bars within each step.
     */
    orientation?: "horizontal" | "vertical";
    /** Opacity of the trapezoid connectors between steps (0–1, default 0.3). Horizontal only. */
    connectorOpacity?: number;
    /** Show step name + value labels on bars (default true) */
    showLabels?: boolean;
    enableHover?: boolean;
    showLegend?: boolean;
    legendInteraction?: LegendInteractionMode;
    legendPosition?: "right" | "left" | "top" | "bottom";
    tooltip?: TooltipProp;
    annotations?: Datum[];
    /** Custom formatter for category tick labels */
    categoryFormat?: CategoryFormatFn;
    frameProps?: Partial<Omit<StreamOrdinalFrameProps, "data" | "size">>;
}
/**
 * FunnelChart — Visualize sequential conversion steps.
 *
 * **Horizontal** (default): centered bars narrowing top-to-bottom with
 * trapezoid connectors. Multi-category mirrors around center axis.
 *
 * **Vertical** (`orientation="vertical"`): vertical bars with hatched
 * dropoff stacking. Each bar shows retained (solid) + dropoff from
 * previous step (hatched). Multi-category renders grouped bars.
 *
 * For multi-step many-source flows prefer {@link SankeyDiagram}.
 *
 * @example
 * ```tsx
 * // Classic conversion funnel
 * <FunnelChart
 *   data={[
 *     { step: "Visit",    users: 5000 },
 *     { step: "Signup",   users: 3200 },
 *     { step: "Activate", users: 1800 },
 *     { step: "Upgrade",  users: 240 },
 *   ]}
 *   stepAccessor="step"
 *   valueAccessor="users"
 * />
 * ```
 *
 * @example
 * ```tsx
 * // Vertical orientation showing absolute drop-off
 * <FunnelChart
 *   data={steps}
 *   stepAccessor="step"
 *   valueAccessor="users"
 *   orientation="vertical"
 *   connectorOpacity={0.3}
 * />
 * ```
 *
 * @example
 * ```tsx
 * // Multi-category funnel — one funnel per cohort
 * <FunnelChart
 *   data={cohortSteps}
 *   stepAccessor="step"
 *   valueAccessor="users"
 *   categoryAccessor="cohort"
 * />
 * ```
 */
export declare const FunnelChart: {
    <TDatum extends Datum = Datum>(props: FunnelChartProps<TDatum> & React.RefAttributes<RealtimeFrameHandle>): React.ReactElement | null;
    displayName?: string;
};
