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 { /** The React key and the `onSelect` value. */ key: string; /** Top of funnel first. */ label: string; /** Expected non-increasing. */ value: number; } export interface FunnelProps extends StyleProps { /** Each bar is `value ÷ stages[0].value`, so the drop-off is the shape. */ stages: FunnelStage[]; /** * `vertical` (default): even columns, height ∝ value capped at `size`. `horizontal`: stacked * rows, width ∝ value. */ orientation?: "vertical" | "horizontal"; /** One accent: one cohort narrowing. Defaults to the sheet's neutral ink. */ color?: string; /** Default `toLocaleString`. */ formatValue?: (n: number) => string; /** Value ÷ the stage above. Default `"NN%"`; `null` hides it. */ formatRate?: (rate: number) => string | null; /** * Pressing selects, pressing again clears; pair with `selectedKey`. The drill content is the * caller's. */ onSelect?: (key: string | null) => void; /** The drilled stage, whose words take the accent. */ selectedKey?: string | null; /** Omit inside a band that already names it. */ title?: string; /** Defaults 160 (vertical height cap) / 28 (horizontal thickness). */ size?: number; /** Passing one gives the block `role="group"`. */ accessibilityLabel?: string; testID?: string; ref?: React.Ref; render?: useRender.RenderProp; } /** * Conversion funnel: bars sized against the top stage with each step's rate, so drop-off reads at a * glance. Nested shrinking cohorts, unlike a split `Progress` (a whole distributed across stages). * A drillable stage — its rate, its bar, its figure and name — is one toggle (`aria-pressed`). */ export declare function Funnel(props: FunnelProps): React.ReactElement>;