/**
 * Stepper — horizontal step indicator with per-segment colored connector lines.
 *
 * Each step takes equal width (flex-1) and renders:
 *   [left-line] [bubble] [right-line]
 * with labels below. First step omits left line, last omits right line.
 * Line segments are colored to match each step's bubble state.
 *
 * The root is a container-query scope: below the @2xl container width the
 * per-step labels hide and a compact "Step x of n — label" summary renders
 * instead, so the stepper adapts to its panel, not the viewport.
 */
import type { ReactNode } from "react";
import { type StepBubbleState } from "../html/badge.js";
export * from "./variants.js";
export type StepperStep = {
    key: string;
    state: StepBubbleState;
    content: ReactNode;
    label: string;
    description?: string;
    /** Numeric weight for proportional bubble sizing. */
    weight?: number;
};
type StepperSize = "default" | "lg" | "xl";
export type StepperProps = {
    steps: StepperStep[];
    size?: StepperSize;
    onStepClick?: (key: string) => void;
    /** Constrain stepper width so it doesn't stretch full-width. */
    maxWidth?: "sm" | "md" | "lg" | "xl";
};
export declare function Stepper({ steps, size, onStepClick, maxWidth }: StepperProps): import("react").JSX.Element;
//# sourceMappingURL=index.d.ts.map