import { ReactNode } from 'react';
export interface StepProps {
    /** Step number (1, 2, 3, etc.) */
    step: number;
    /** Currently active step number */
    currentStep: number;
    /** Step label/description */
    children: ReactNode;
    /** Optional custom className */
    className?: string;
}
/**
 * Step Component - Displays a single step in a multi-step process
 *
 * Shows different visual states based on progress:
 * - **Pending** (future): Number badge, reduced opacity
 * - **Active** (current): Spinner animation, full opacity
 * - **Complete** (past): Checkmark, full opacity
 *
 * @example
 * ```tsx
 * <Step step={1} currentStep={2}>
 *   Complete Step
 * </Step>
 *
 * <Step step={2} currentStep={2}>
 *   Active Step (spinner)
 * </Step>
 *
 * <Step step={3} currentStep={2}>
 *   Pending Step
 * </Step>
 * ```
 */
export declare function Step({ step, currentStep, children, className }: StepProps): import("react/jsx-runtime").JSX.Element;