import "./stepper.css";
import { type ReactElement, type ReactNode } from "react";
import type * as React from "react";
import { useRender } from "@base-ui/react/use-render";
import { type StyleProps } from "./style_props";
import { type InkColor } from "./text_ink";
export type StepStatus = "upcoming" | "current" | "done" | "warning" | "fail" | "complete";
export type StepOrientation = "horizontal" | "vertical";
export interface StepperProps extends StyleProps {
    /** Compound form: `<Stepper><Step status>…</Step></Stepper>` — swappable content. */
    children?: ReactNode;
    /** Data form: ordered labels; `current` derives each step's status. Ignored when `children` is set. */
    steps?: string[];
    current?: number;
    orientation?: StepOrientation;
    live?: boolean;
    /** The ink ROLE for reached nodes and the connecting track. Defaults to the
     *  neutral ink. */
    color?: InkColor;
    /** VERTICAL only. Space beneath each step. The default separates GROUPS —
     *  stages that each carry a body — and a run of plain rows passes a tighter
     *  number, or the spine between two one-line steps reads as a dash. */
    gap?: number;
    /** What a toggleable marker MEANS, and therefore its SHAPE. `ring` (default) is
     *  COMPLETION — the row is a thing someone finishes. `box` is SELECTION — the
     *  row is a thing someone PICKS. The two are 24px either way and share one
     *  gutter, so a surface swaps between them without moving anything. */
    mark?: "ring" | "box";
    /** VERTICAL only. Draw the connecting line between markers (default on). The
     *  line asserts SEQUENCE, which a set of independent items does not have. */
    connected?: boolean;
    accessibilityLabel?: string;
    testID?: string;
    ref?: React.Ref<HTMLElement>;
    render?: useRender.RenderProp;
}
/** The props `Stepper` CLONES onto its direct children. A component that stands
 *  where a `Step` would extends this and spreads it through, never re-listing
 *  the keys, or a new positional prop is dropped silently. */
export interface StepPositional {
    _first?: boolean;
    _last?: boolean;
    _leftFilled?: boolean;
    _rightFilled?: boolean;
}
export interface StepProps extends StepPositional, StyleProps {
    status: StepStatus;
    children: ReactNode;
    /** Make the step navigable — the whole step is the tap target horizontally,
     *  the row beside the marker vertically, so the ring keeps its own press. */
    onPress?: () => void;
    active?: boolean;
    /** VERTICAL only. Make the MARKER itself the completion control — the node
     *  becomes a `Checkbox shape="ring"` the reader can press to finish (or reopen)
     *  the step. A checkbox parked in the row beside the marker instead puts two
     *  completion affordances on one line. */
    onToggle?: (done: boolean) => void;
    /** VERTICAL only. Height of the content's FIRST ROW — the marker centres on it.
     *  Defaults to one line of `sm` text. Pass `CONTROL_HEIGHT` when the row carries
     *  a field beside the label, or the marker centres on the text while the label
     *  centres in the taller row. Ignored horizontally. */
    headHeight?: number;
    /** VERTICAL only. Drop the marker COLUMN — no node, no spine, content flush to
     *  the run's left edge, for a step that GROUPS others rather than being one. A
     *  grouping row has no completion of its own, so a node it wore would be a
     *  control that reports without responding. */
    marker?: boolean;
    accessibilityLabel?: string;
    testID?: string;
    ref?: React.Ref<HTMLElement>;
    render?: useRender.RenderProp;
}
/** Progress through an ordered sequence — done, current, upcoming on a
 *  connecting track (horizontal) or spine (vertical). The node encodes STATUS,
 *  not identity. Drive it the compound way (`<Step status>` children) or the data
 *  way (`steps` + `current`). */
export declare function Stepper({ children, steps, current, orientation, live, color, gap, connected, mark, accessibilityLabel, testID, render, ref, ...props }: StepperProps): React.JSX.Element;
export declare function Step({ status, children, onPress, active, onToggle, headHeight, marker, accessibilityLabel, testID, render, ref, _first, _last, _leftFilled, _rightFilled, ...props }: StepProps): ReactElement<unknown, string | React.JSXElementConstructor<any>>;