import { default as React } from 'react';
import { default as IStepperProps } from './IStepperProps';
/**
 * Stepper component for displaying a sequence of steps with centralized state management
 * Supports horizontal, vertical, and large display types with optional click navigation
 *
 * @param props {@link IStepperProps} - Props for the Stepper component
 * @returns The rendered stepper component
 *
 * @example
 * ```tsx
 * // Basic horizontal stepper with active and completed steps
 * function App() {
 *   return (
 *     <Stepper activeStep={1} completedSteps={[0]}>
 *       <StepperStep title="Step 1" description="First step" />
 *       <StepperStep title="Step 2" description="Second step" />
 *       <StepperStep title="Step 3" description="Third step" />
 *     </Stepper>
 *   );
 * }
 * ```
 *
 * @example
 * ```tsx
 * // Vertical stepper with navigation
 * function App() {
 *   const [activeStep, setActiveStep] = useState(1);
 *   const [completedSteps, setCompletedSteps] = useState([0]);
 *
 *   const handleStepClick = (stepIndex: number) => {
 *     setActiveStep(stepIndex);
 *     // Update completed steps as needed
 *   };
 *
 *   return (
 *     <Stepper
 *       type="vertical"
 *       activeStep={activeStep}
 *       completedSteps={completedSteps}
 *       onClick={handleStepClick}
 *     >
 *       <StepperStep title="Setup" description="Initial configuration" />
 *       <StepperStep title="Verification" description="Verify your settings" />
 *       <StepperStep title="Complete" description="Finish the process" />
 *     </Stepper>
 *   );
 * }
 * ```
 *
 * @example
 * ```tsx
 * // Advanced large stepper with completion states and custom badges
 * function App() {
 *   return (
 *     <Stepper type="large" activeStep={1} completedSteps={[0]}>
 *       <StepperStep
 *         title="Email Verification"
 *         description="Verify your email address"
 *         completedTitle="Email Verified"
 *         completedDescription="Your email has been successfully verified"
 *         completedBadgeLabel="Verified"
 *         completedBadgeIcon="BadgeCheck"
 *       >
 *         <Box className="flex flex-col gap-[var(--spacing-4)]">
 *           <Text>Email verification content</Text>
 *         </Box>
 *       </StepperStep>
 *       <StepperStep
 *         title="Profile Setup"
 *         description="Complete your profile information"
 *       >
 *         <Box className="flex flex-col gap-[var(--spacing-4)]">
 *           <Text>Profile setup form</Text>
 *           <Box className="flex justify-end">
 *             <Button label="Continue" />
 *           </Box>
 *         </Box>
 *       </StepperStep>
 *       <StepperStep
 *         title="Final Review"
 *         description="Review and confirm your settings"
 *       />
 *     </Stepper>
 *   );
 * }
 * ```
 */
declare const Stepper: React.FC<IStepperProps>;
export default Stepper;
