import "./funnel.css";
import type * as React from "react";
import { useRender } from "@base-ui/react/use-render";
import { type StyleProps } from "./style_props";
export interface FunnelStage {
    /** Identifier — the React key + the `onSelect` value. */
    key: string;
    /** Stage name (the widest / top-of-funnel stage first). */
    label: string;
    /** Count at this stage. Expected to be non-increasing down the list. */
    value: number;
}
export interface FunnelProps extends StyleProps {
    /** Ordered stages, widest (top of funnel) first. Each bar is sized `value ÷
     *  stages[0].value`, so the bars narrow through the funnel and the drop-off
     *  IS the shape. */
    stages: FunnelStage[];
    /** `vertical` = columns side-by-side that fill the width evenly, height ∝
     *  value capped at `size`; `horizontal` = stacked rows, bar width ∝ value.
     *  Default `vertical`. */
    orientation?: "vertical" | "horizontal";
    /** Bar fill — one accent for the whole funnel (one cohort narrowing, not many
     *  categories). Defaults to the neutral ink the sheet declares. */
    color?: string;
    /** Format a stage value (default `toLocaleString`). */
    formatValue?: (n: number) => string;
    /** Format the step conversion rate beside a stage (its value ÷ the stage
     *  above). Default `"NN%"`; return `null` to hide a rate. */
    formatRate?: (rate: number) => string | null;
    /** Make the bars press-to-drill: pressing a stage calls `onSelect(key)`, and
     *  pressing the selected stage again calls `onSelect(null)`. Pair with
     *  `selectedKey` — the selected bar stays solid, the others dim. The drill
     *  CONTENT (the records behind the stage) is the caller's to render. */
    onSelect?: (key: string | null) => void;
    /** The drilled stage (dims the others). */
    selectedKey?: string | null;
    /** xs muted uppercase overline above the funnel. Omit inside a band that
     *  already names it. */
    title?: string;
    /** Vertical: the column area height (the cap). Horizontal: bar thickness.
     *  Defaults 160 / 28. */
    size?: number;
    /** Names the funnel as a GROUP. A name needs a role, so passing one is what
     *  gives the block its `role="group"`. */
    accessibilityLabel?: string;
    testID?: string;
    ref?: React.Ref<HTMLElement>;
    render?: useRender.RenderProp;
}
/**
 * Conversion funnel — ordered stages as bars that NARROW (each sized value ÷
 * the top stage), with the step conversion rate (value ÷ the stage above)
 * beside each. The drop-off is the shape, so it reads "where do they fall
 * out?" at a glance. `vertical` columns or `horizontal` bars; pass `onSelect`
 * to make the bars press-to-drill (select/deselect, the others dim).
 *
 * The SUBSET/conversion sibling of a split `Progress`: a funnel is nested
 * cohorts that shrink (calls → connected → won), NOT a composition of a whole
 * (a split `Progress` — items distributed ACROSS stages that sum to a total).
 *
 * A drillable bar is a Base UI `Toggle`, so which stage you are in is announced
 * as `aria-pressed` and the dim is `data-dimmed` on the stage rather than an
 * opacity threaded through a style object.
 */
export declare function Funnel(props: FunnelProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;