import { ComponentPropsWithoutRef } from 'react';
import { LayoutUtilProps } from '../../types';
/**
 * Props for the Stepper component
 * @extends ComponentPropsWithoutRef<"div">
 * @extends LayoutUtilProps
 */
export type StepperProps = Omit<ComponentPropsWithoutRef<"div">, "onAnimationStart" | "onDragStart" | "onDragEnd" | "onDrag" | "onChange"> & LayoutUtilProps & {
    /**
     * Default step to start on (0-based index).
     * To start in the completed state (showing FinalPanel with all steps marked complete),
     * set this to the total number of steps (e.g. `items.length`).
     * @default undefined
     */
    defaultIndex?: number;
    /**
     * Allows users to navigate to previous steps.
     * @default undefined
     */
    allowNavigateToPrevStep?: boolean;
    /**
     * Returns current step data when step changes.
     * @param data Object containing currentStepId and currentStepIndex
     * @param data.currentStepId ID given to Stepper.Panel, or "final-panel"
     * @param data.currentStepIndex Index of current step, or undefined on final panel
     */
    onChange?: (data: {
        currentStepId: string | "final-panel";
        currentStepIndex?: number;
    }) => void;
    /**
     * Called when all steps are completed.
     */
    onComplete?: () => void;
};
/**
 * Stepper component for creating multi-step workflows and forms.
 *
 * Features:
 * - Multi-step navigation with visual progress indicators
 * - Keyboard navigation support with arrow keys
 * - Optional navigation to previous steps
 * - Smooth animations and transitions
 * - Accessible with proper ARIA roles and attributes
 * - Customizable step labels and content
 * - Completion state handling
 * - Layout utilities for positioning and spacing
 * - Motion animations for step transitions
 * - Context-based state management
 *
 * @example
 * <Stepper defaultIndex={0} allowNavigateToPrevStep>
 *   <Stepper.List>
 *     <Stepper.Step controls="step1">Step 1</Stepper.Step>
 *     <Stepper.Step controls="step2">Step 2</Stepper.Step>
 *     <Stepper.Step controls="step3">Step 3</Stepper.Step>
 *   </Stepper.List>
 *
 *   <Stepper.Panel id="step1">
 *     <h2>Step 1 Content</h2>
 *     <p>This is the first step content.</p>
 *   </Stepper.Panel>
 *
 *   <Stepper.Panel id="step2">
 *     <h2>Step 2 Content</h2>
 *     <p>This is the second step content.</p>
 *   </Stepper.Panel>
 *
 *   <Stepper.Panel id="step3">
 *     <h2>Step 3 Content</h2>
 *     <p>This is the final step content.</p>
 *   </Stepper.Panel>
 *
 *   <Stepper.FinalPanel>
 *     <h2>Completed!</h2>
 *     <p>All steps have been completed successfully.</p>
 *   </Stepper.FinalPanel>
 *
 *   <Stepper.PrevButton />
 *   <Stepper.NextButton />
 * </Stepper>
 */
export declare const Stepper: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "onChange" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart"> & LayoutUtilProps & {
    /**
     * Default step to start on (0-based index).
     * To start in the completed state (showing FinalPanel with all steps marked complete),
     * set this to the total number of steps (e.g. `items.length`).
     * @default undefined
     */
    defaultIndex?: number;
    /**
     * Allows users to navigate to previous steps.
     * @default undefined
     */
    allowNavigateToPrevStep?: boolean;
    /**
     * Returns current step data when step changes.
     * @param data Object containing currentStepId and currentStepIndex
     * @param data.currentStepId ID given to Stepper.Panel, or "final-panel"
     * @param data.currentStepIndex Index of current step, or undefined on final panel
     */
    onChange?: (data: {
        currentStepId: string | "final-panel";
        currentStepIndex?: number;
    }) => void;
    /**
     * Called when all steps are completed.
     */
    onComplete?: () => void;
} & import('react').RefAttributes<HTMLDivElement>> & {
    /**
     * Individual step component for the Stepper.
     *
     * Features:
     * - Visual progress indicator with animated bar
     * - Check icon for completed steps
     * - Keyboard navigation support
     * - Accessible with proper ARIA attributes
     * - Click handling for step navigation
     * - Visual states for current, completed, and future steps
     * - Responsive design with mobile-friendly layout
     * - Focus management for keyboard users
     * - Custom styling support
     *
     * @example
     * <Stepper.Step controls="step1">
     *   Personal Information
     * </Stepper.Step>
     *
     * @example
     * <Stepper.Step
     *   controls="step2"
     *   onClick={(e, index) => console.log(`Clicked step ${index}`)}
     * >
     *   Contact Details
     * </Stepper.Step>
     */
    Step: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "disabled" | "onClick"> & {
        controls: string;
        onClick?: (e: import('react').MouseEvent<HTMLButtonElement>, index?: number) => void;
    } & import('react').RefAttributes<HTMLButtonElement>>;
    /**
     * Container component for organizing and displaying stepper steps.
     *
     * Features:
     * - Groups multiple stepper steps together
     * - Displays current step label
     * - Responsive design with mobile-friendly layout
     * - Accessible with proper ARIA roles
     * - Automatic step organization
     * - Visual step indicators
     * - Context-based current step display
     * - Flexible layout with CSS Grid/Flexbox
     * - Container queries for responsive behavior
     *
     * @example
     * <Stepper.List>
     *   <Stepper.Step controls="step1">Step 1</Stepper.Step>
     *   <Stepper.Step controls="step2">Step 2</Stepper.Step>
     *   <Stepper.Step controls="step3">Step 3</Stepper.Step>
     * </Stepper.List>
     */
    List: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
    /**
     * Content panel component for displaying step content in the Stepper.
     *
     * Features:
     * - Displays content for the current step only
     * - Smooth fade-in/fade-out animations
     * - Automatic overflow handling with scroll support
     * - Accessible with proper ARIA roles
     * - Layout utilities for positioning and spacing
     * - Motion animations for smooth transitions
     * - Focus management for keyboard navigation
     * - Responsive design with flexible layout
     * - Context-based visibility control
     *
     * @example
     * <Stepper.Panel id="step1">
     *   <h2>Personal Information</h2>
     *   <form>
     *     <label htmlFor="name">Name:</label>
     *     <input id="name" type="text" />
     *   </form>
     * </Stepper.Panel>
     */
    Panel: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart"> & LayoutUtilProps & {
        id: string;
    } & import('react').RefAttributes<HTMLDivElement>>;
    /**
     * Next button component for navigating to the next step in the Stepper.
     *
     * Features:
     * - Automatically advances to the next step
     * - Changes label to "Complete" on the final step
     * - Supports async validation with Promise return
     * - Prevents navigation when validation fails
     * - Hides when all steps are completed
     * - Accessible with proper button semantics
     * - Customizable appearance and styling
     * - Integration with stepper context
     * - Automatic completion handling
     *
     * @example
     * <Stepper.NextButton
     *   nextLabel="Continue"
     *   completeLabel="Finish"
     * />
     *
     * @example
     * <Stepper.NextButton
     *   onClick={async (e) => {
     *     const isValid = await validateForm();
     *     return isValid;
     *   }}
     *   appearance="primary"
     * />
     */
    NextButton: import('react').ForwardRefExoticComponent<Omit<import('..').ButtonProps, "children"> & {
        nextLabel?: string;
        completeLabel?: string;
        onClick?: (e: import('react').MouseEvent<HTMLButtonElement>) => void | boolean | Promise<boolean>;
    } & import('../..').DataTrackingId & import('react').RefAttributes<HTMLButtonElement>>;
    /**
     * Previous button component for navigating to the previous step in the Stepper.
     *
     * Features:
     * - Navigates to the previous step when available
     * - Hides when on the first step
     * - Restores navigation when returning from completion
     * - Accessible with proper button semantics
     * - Customizable label and styling
     * - Integration with stepper context
     * - Automatic focus management
     * - Support for completion state handling
     *
     * @example
     * <Stepper.PrevButton label="Go Back" />
     *
     * @example
     * <Stepper.PrevButton
     *   label="Previous Step"
     *   appearance="secondary"
     *   onClick={(e) => console.log('Going back')}
     * />
     */
    PrevButton: import('react').ForwardRefExoticComponent<Omit<import('..').ButtonProps, "children"> & {
        label?: string;
    } & import('../..').DataTrackingId & import('react').RefAttributes<HTMLButtonElement>>;
    /**
     * Final panel component displayed when all stepper steps are completed.
     *
     * Features:
     * - Displays only when all steps are completed
     * - Smooth fade-in animation on completion
     * - Automatic overflow handling with scroll support
     * - Accessible with proper ARIA roles
     * - Layout utilities for positioning and spacing
     * - Motion animations for smooth transitions
     * - Focus management for keyboard navigation
     * - Responsive design with flexible layout
     * - Context-based visibility control
     *
     * @example
     * <Stepper.FinalPanel>
     *   <h2>Congratulations!</h2>
     *   <p>You have successfully completed all steps.</p>
     *   <Button onClick={handleSubmit}>Submit</Button>
     * </Stepper.FinalPanel>
     */
    FinalPanel: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart"> & LayoutUtilProps & import('react').RefAttributes<HTMLDivElement>>;
};