import { type BreakpointKey, type LayoutStyle } from "../../style/index.js";
import { type StepsSkin } from "./steps.styles.js";
export interface Step {
    label: string;
    description?: string;
    /**
     * The step's own progress, 0-100 (clamped): in the vertical layout the step draws a
     * 6 px bar under its text, its fill running from the accent into the cyan series hue.
     * Other layouts ignore it.
     */
    progress?: number;
}
export interface StepsProps {
    /** Ordered steps to render. Each is a label with an optional one-line note. */
    steps: Step[];
    /** Index of the active step (CONTROLLED). Earlier steps read completed, later ones muted. Omit for uncontrolled use. */
    current?: number;
    /** Initial active step for uncontrolled use (pressing a step, with `onStepPress`, moves it). */
    defaultCurrent?: number;
    vertical?: boolean;
    /** A short vertical list with 22px markers and no connector lines, for a workflow sidebar. */
    compact?: boolean;
    /**
     * Vertical only: each step a 32 px row like a desktop app's sidebar list (the Claude
     * desktop window's), the current step's row filled, done steps marked with a check.
     */
    rows?: boolean;
    /**
     * Equal segments in a row: each step a 4 px bar (the accent once reached, glowing on the
     * current step) over its label and, from its `description`, a status line inked by the
     * step's state (the success ink once done, the accent's text ink on the current step).
     */
    segmented?: boolean;
    /** Render a labeled percentage progress bar instead of discrete steps. */
    progress?: boolean;
    /**
     * Responsive (horizontal layout only): render the EXISTING vertical layout
     * when the component's own CONTAINER is at or below `stackBreakpoint`
     * (default `sm` = 640). Container-measured with a viewport seed, mirroring
     * Row `stacks`. `vertical` and `progress` are unaffected (a progress bar is
     * already fluid).
     */
    stacks?: boolean;
    /** The breakpoint at and below which `stacks` goes vertical (default `"sm"`).
     *  Only meaningful with `stacks`. */
    stackBreakpoint?: BreakpointKey;
    /** Progress mode only: filled fraction, 0-100 (clamped). Defaults to 0. */
    value?: number;
    /** Progress mode only: caption shown left of the percentage. */
    label?: string;
    /** When set, each step circle is pressable, reporting the step index. */
    onStepPress?: (index: number) => void;
    /** E2E hook forwarded to the root element. */
    testID?: string;
    /** Composition within a parent only, never a restyle hook and never a width: the parent layout container provides the bounds. */
    style?: LayoutStyle;
}
type Layout = "horizontal" | "vertical" | "segmented" | "progress";
export declare function layoutOf(p: StepsProps): Layout;
/** Build a Steps component from a platform skin. */
export declare function createSteps(skin: StepsSkin): (props: StepsProps) => import("react").JSX.Element;
export {};
//# sourceMappingURL=steps.shared.d.ts.map