"use client"; import * as React from "react"; import { motion } from "motion/react"; import { CheckIcon } from "lucide-react"; import { cn } from "@/lib/utils"; // ── Types ─────────────────────────────────────────────────────────────────── type WizardStepState = "active" | "completed" | "pending"; interface WizardStepData { id: string | number; title: string; description?: string; } interface WizardContextValue { currentStep: number; setCurrentStep: (step: number) => void; totalSteps: number; isLoading: boolean; } // ── Context ───────────────────────────────────────────────────────────────── const WizardContext = React.createContext( undefined, ); function useWizard() { const context = React.useContext(WizardContext); if (!context) { throw new Error("useWizard must be used within a WizardStepper"); } return context; } // ── WizardStepper ─────────────────────────────────────────────────────────── interface WizardStepperProps extends React.HTMLAttributes { steps: WizardStepData[]; defaultStep?: number; currentStep?: number; onStepChange?: (step: number) => void; loading?: boolean; orientation?: "horizontal" | "vertical"; } function WizardStepper({ steps, defaultStep = 0, currentStep: controlledStep, onStepChange, loading = false, orientation = "horizontal", className, ...props }: WizardStepperProps) { const [internalStep, setInternalStep] = React.useState(defaultStep); const currentStep = controlledStep ?? internalStep; const setCurrentStep = React.useCallback( (step: number) => { if (controlledStep === undefined) setInternalStep(step); onStepChange?.(step); }, [controlledStep, onStepChange], ); return (

{steps.map((step, index) => { const state: WizardStepState = index < currentStep ? "completed" : index === currentStep ? "active" : "pending"; return ( setCurrentStep(index)} /> {index < steps.length - 1 && orientation === "horizontal" && ( )} ); })}

); } // ── WizardStepItem ────────────────────────────────────────────────────────── interface WizardStepItemProps { step: number; state: WizardStepState; title: string; description?: string; isLast: boolean; orientation: "horizontal" | "vertical"; isLoading: boolean; onClick: () => void; } function WizardStepItem({ step, state, title, description, isLast, orientation, isLoading, onClick, }: WizardStepItemProps) { return (

{orientation === "vertical" && (

{!isLast && ( )}

)} {orientation === "horizontal" && ( )}

{title}

{description && (

{description}

)}

); } // ── WizardCircle ──────────────────────────────────────────────────────────── interface WizardCircleProps { step: number; state: WizardStepState; isLoading: boolean; } function WizardCircle({ step, state, isLoading }: WizardCircleProps) { return (

{state === "active" && ( )} {isLoading ? ( ) : state === "completed" ? ( ) : ( step )}

); } // ── WizardConnector ───────────────────────────────────────────────────────── interface WizardConnectorProps { state: WizardStepState; } function WizardConnector({ state }: WizardConnectorProps) { return (

); } // ── Exports ───────────────────────────────────────────────────────────────── export { WizardStepper, useWizard }; export type { WizardStepData, WizardStepState };