import type { ReactNode } from "react";
/**
 * Where a step sits in the sequence.
 *
 * `blocked` is not a worse `upcoming`. Upcoming means "its turn has
 * not come"; blocked means "its turn has come and something is in
 * the way", which is a thing to go and fix rather than a thing to
 * wait for. Docket's phases need exactly this split — a phase gated
 * behind an unfinished one, versus a phase gated behind an EMPTY
 * one, where the second is a mistake somebody has to correct.
 */
export type StepStatus = "blocked" | "current" | "done" | "upcoming";
export type Step = {
    /** What the marker shows instead of its ordinal position. */
    readonly marker?: ReactNode;
    readonly key: string;
    readonly label: ReactNode;
    /** One line under the label — why it is blocked, what it is
     * waiting on, when it finished. */
    readonly description?: ReactNode;
    /**
     * What BELONGS to this step: the tasks in a phase, the fields in
     * a form stage, the checks in a pipeline.
     *
     * The reason this component is not a `ProgressBar` with a legend.
     * A bar says a sequence is half done; only the contents say which
     * things go together and which one is next.
     */
    readonly content?: ReactNode;
    readonly status?: StepStatus;
};
export type StepperOrientation = "horizontal" | "vertical";
export type StepperProps = {
    /** `compact` is the dot-and-line ladder for short status labels in cards. */
    readonly appearance?: "default" | "compact";
    readonly className?: string;
    /**
     * What level the step labels are. The caller's, because only the
     * caller knows what the stepper sits under — one below a page
     * `<h1>` wants `2`, one inside an already-deep section wants `4`.
     * Getting it wrong is an axe `heading-order` failure and a broken
     * screen-reader outline.
     */
    readonly headingLevel?: 2 | 3 | 4 | 5;
    /** The list's accessible name. Required — an unnamed sequence of
     * numbers is a sequence of numbers. */
    readonly label: string;
    /**
     * Whether a requested horizontal sequence collapses below `cq-md`.
     * Keep this on for prose-sized steps. Turn it off only when the
     * caller supplies short labels that are designed to remain a compact
     * ladder inside a card.
     */
    readonly isResponsive?: boolean;
    /**
     * `horizontal` is a REQUEST, not a promise: it collapses to
     * vertical below `cq-md`, because four steps side by side in a
     * narrow container squash into unreadable slivers (`2. / De- /
     * dupe`, measured). A step carrying `content` should stay
     * vertical — a column cannot hold a list.
     */
    readonly orientation?: StepperOrientation;
    /** Completed stages become buttons; the caller resets dependent answers. */
    readonly onStepSelect?: (key: string) => void;
    readonly steps: readonly Step[];
};
/**
 * An ordered sequence of steps, with what belongs to each one.
 *
 * ### Why the status is never colour alone
 *
 * Four states painted only as four marker colours is a WCAG 1.4.1
 * failure however clear it looks, so each status reaches a screen
 * reader as a word — `VisuallyHidden`, next to the label — and gets
 * a second visual channel besides hue: a **filled** marker for done
 * and current, an **outlined** one for upcoming and blocked, and a
 * connector that is solid behind finished work and dashed ahead of
 * it.
 *
 * ### Why the marker is a number and never a tick
 *
 * This library
 * [ships no icons and no symbol glyphs](../../../../docs/decisions/2026-07-29-ship-no-icons-and-no-symbol-glyphs.md).
 * A `✓` renders as an empty box wherever the font lacks it — which
 * includes the sandbox chromium, the kiosk image and the ePaper
 * build — and an empty box in the "done" position reads as an error.
 * The ordinal always renders. An app that owns a glyph set can pass
 * one as `marker`.
 *
 * ### Why the connector is an element
 *
 * Not a `::before`. `styles.css` is reserved for the handful of
 * visuals a Tailwind utility genuinely cannot express — the looping
 * animations and the scrollbar — and a line between two markers is
 * not one of them. A real `<span aria-hidden>` also stops the last
 * step drawing a connector into empty space, which is a
 * `:not(:last-child)` selector nobody remembers to write.
 */
export declare const Stepper: ({ appearance, className, headingLevel, isResponsive, label, orientation, onStepSelect, steps, }: StepperProps) => import("react").JSX.Element;
//# sourceMappingURL=Stepper.d.ts.map