import type { StepperProps } from "@mui/material";
export interface ThemedStep {
    /** Label shown beneath the step icon. */
    label: React.ReactNode;
    /** Optional label rendered as MUI StepLabel's optionalLabel. */
    optional?: React.ReactNode;
    /** Marks the step as errored. */
    error?: boolean;
    /** Disables the step (passed to MUI Step). */
    disabled?: boolean;
}
export interface ThemedStepperProps extends Omit<StepperProps, "children"> {
    /** Steps to render. */
    steps: ThemedStep[];
    /** Callback fired when a step label is clicked. Enables non-linear navigation. */
    onStepClick?: (index: number) => void;
    /** Renders read-only labels even when onStepClick is supplied. */
    disableStepClick?: boolean;
    /**
     * Furthest step that has been completed. Steps before this index show a checkmark.
     * Defaults to `activeStep`, which gives standard linear stepper behavior.
     */
    completedStep?: number;
}
/**
 * ThemedStepper
 *
 * A future-proof, scoped stepper component built on top of MUI's public Stepper APIs.
 * It renders the Inflow design-system stepper look: labels beneath icons, completed
 * steps as checkmarks in solid navy circles, active steps as navy circles with an inner
 * dot, and inactive steps as outlined grey circles. Connector lines and label colors
 * reflect each step's state.
 *
 * `activeStep` is the currently viewed step: it renders the ring + inner dot and is never
 * underlined. `completedStep` is the furthest reached step: those steps keep their checkmarks
 * and are underlined unless they are the active step. When `completedStep` is omitted, it
 * defaults to `activeStep`, giving standard linear stepper behavior.
 *
 * @example
 * ```tsx
 * import { ThemedStepper } from '@/components/themed';
 *
 * const steps = [
 *   { label: 'Configure' },
 *   { label: 'Options' },
 *   { label: 'Test' },
 *   { label: 'Review' },
 * ];
 *
 * <ThemedStepper activeStep={1} steps={steps} />
 * <ThemedStepper
 *   activeStep={currentStep}
 *   completedStep={furthestStep}
 *   steps={steps}
 *   onStepClick={(index) => {
 *     setCurrentStep(index);
 *     if (index > furthestStep) setFurthestStep(index);
 *   }}
 * />
 * ```
 */
export declare const ThemedStepper: import("react").ForwardRefExoticComponent<Omit<ThemedStepperProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
//# sourceMappingURL=ThemedStepper.d.ts.map