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 { ColorName } from "./color_tokens";
import { type StyleProps } from "./style_props";
import { type InkColor } from "./text_ink";
export type StepStatus = "upcoming" | "current" | "done" | "warning" | "fail" | "complete" | "mark" | "through";
export type StepOrientation = "horizontal" | "vertical";
export interface StepperProps extends StyleProps {
    children?: ReactNode;
    /** Ordered labels; `current` derives each status. Ignored with `children`. */
    steps?: string[];
    current?: number;
    orientation?: StepOrientation;
    live?: boolean;
    /** The ink role for reached nodes and the track; defaults to neutral. */
    color?: InkColor;
    /** Vertical only. The default separates groups carrying bodies; plain rows pass less, or the spine
     *  between one-liners reads as a dash. */
    gap?: number;
    /** `ring` (default) is completion, `box` selection; both 24px in one gutter, so swapping moves nothing. */
    mark?: "ring" | "box";
    /** Vertical only (default on): the line asserts sequence, which independent items lack. */
    connected?: boolean;
    accessibilityLabel?: string;
    testID?: string;
    ref?: React.Ref<HTMLElement>;
    render?: useRender.RenderProp;
}
/** What `Stepper` clones onto its children; a `Step` stand-in extends and spreads this, never re-listing
 *  keys, or a new positional prop drops silently. */
export interface StepPositional {
    _first?: boolean;
    _last?: boolean;
    _leftFilled?: boolean;
    _rightFilled?: boolean;
}
export interface StepProps extends StepPositional, StyleProps {
    status: StepStatus;
    children: ReactNode;
    /** The whole step horizontally, the row beside the marker vertically, so the ring keeps its own press. */
    onPress?: () => void;
    active?: boolean;
    /** Vertical only. The marker becomes a `Checkbox shape="ring"` completion control, rather than a second
     *  checkbox in the row. */
    onToggle?: (done: boolean) => void;
    /** Vertical only. The first row's height the marker centres on (default one `sm` line); pass
     *  `CONTROL_HEIGHT` beside a field. A `mark` step ignores it: the sheet centres on its lead
     *  (`--lotics-stepper-lead`, via `style`). */
    headHeight?: number;
    /** Vertical only. No marker column, for a step grouping others: its node would report without
     *  responding. */
    marker?: boolean;
    /** Drawn inside the node for a `mark` run, where an unnumbered disc must be counted down the rail. */
    ordinal?: number;
    /** Which position the run stands in, apart from what the node wears: on a run of states the current rung
     *  is reached and ticked (`done`), so `status` alone would announce no place. Defaults to
     *  `status === "current"`. */
    current?: boolean;
    /** The rung's own family (a record option's colour), painted where the mark says here; other nodes wear
     *  the run's ink. */
    tone?: ColorName;
    accessibilityLabel?: string;
    testID?: string;
    ref?: React.Ref<HTMLElement>;
    render?: useRender.RenderProp;
}
/** Progress through an ordered sequence on a track (horizontal) or spine (vertical); the node encodes
 *  status, not identity. Compound (`<Step status>`) or data (`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, ordinal, current, tone, accessibilityLabel, testID, render, ref, _first, _last, _leftFilled, _rightFilled, ...props }: StepProps): ReactElement<unknown, string | React.JSXElementConstructor<any>>;