import React from 'react';
import { Steps } from '@ark-ui/react/steps';
import { type StepperVariantProps } from 'styled-system/recipes';
/**
 * Step item configuration
 */
export interface StepItem {
    /** Unique identifier for the step */
    value: string;
    /** Step title/label */
    title: string;
    /** Optional step description */
    description?: string;
}
export interface StepperRootProps extends Omit<React.ComponentPropsWithoutRef<typeof Steps.Root>, 'count' | 'size' | 'orientation' | 'step' | 'defaultStep'>, Omit<StepperVariantProps, 'colorPalette'> {
    /** Array of step configurations */
    steps: StepItem[];
    /** Color palette for theming (default: "primary") */
    colorPalette?: 'primary' | 'secondary' | 'tertiary' | 'error' | 'neutral';
    /** Show step content below the indicators */
    showContent?: boolean;
    /** Show navigation actions (Back/Next buttons) */
    showActions?: boolean;
    /** Previous button label */
    prevLabel?: string;
    /** Next button label */
    nextLabel?: string;
    /** Current step (controlled mode) */
    step?: number;
    /** Default step (uncontrolled mode) */
    defaultStep?: number;
    /** Custom class name */
    className?: string;
}
/**
 * Stepper component for multi-step workflows
 *
 * Based on Ark UI Steps primitive with Material Design 3 styling.
 * Supports linear and non-linear navigation, with three visual states:
 * - Current: Active step (primary color)
 * - Completed: Previous steps (secondary color)
 * - Upcoming: Future steps (outlined)
 *
 * @example
 * ```tsx
 * const steps = [
 *   { value: 'step1', title: 'Contact Info' },
 *   { value: 'step2', title: 'Date & Time' },
 *   { value: 'step3', title: 'Review' },
 * ];
 *
 * <Stepper steps={steps} defaultStep={0} />
 * ```
 */
export declare const StepperRoot: React.ForwardRefExoticComponent<StepperRootProps & React.RefAttributes<HTMLDivElement>>;
export declare const Stepper: React.ForwardRefExoticComponent<StepperRootProps & React.RefAttributes<HTMLDivElement>> & {
    Root: React.ForwardRefExoticComponent<Steps.RootProps & React.RefAttributes<HTMLDivElement>>;
    List: React.ForwardRefExoticComponent<Steps.ListProps & React.RefAttributes<HTMLDivElement>>;
    Item: React.ForwardRefExoticComponent<Steps.ItemProps & React.RefAttributes<HTMLDivElement>>;
    Trigger: React.ForwardRefExoticComponent<Steps.TriggerProps & React.RefAttributes<HTMLButtonElement>>;
    Indicator: React.ForwardRefExoticComponent<Steps.IndicatorProps & React.RefAttributes<HTMLDivElement>>;
    Separator: React.ForwardRefExoticComponent<Steps.SeparatorProps & React.RefAttributes<HTMLDivElement>>;
    Content: React.ForwardRefExoticComponent<Steps.ContentProps & React.RefAttributes<HTMLDivElement>>;
    Progress: React.ForwardRefExoticComponent<Steps.ProgressProps & React.RefAttributes<HTMLDivElement>>;
    PrevTrigger: React.ForwardRefExoticComponent<Steps.PrevTriggerProps & React.RefAttributes<HTMLButtonElement>>;
    NextTrigger: React.ForwardRefExoticComponent<Steps.NextTriggerProps & React.RefAttributes<HTMLButtonElement>>;
};
//# sourceMappingURL=Stepper.d.ts.map