"use client"; import { cn } from "@/lib/utils"; import { LoaderCircle } from "lucide-react"; import * as React from "react"; import { createContext, useContext } from "react"; import { CheckIcon } from "@radix-ui/react-icons"; // Types type StepperContextValue = { activeStep: number; setActiveStep: (step: number) => void; orientation: "horizontal" | "vertical"; }; type StepItemContextValue = { step: number; state: StepState; isDisabled: boolean; isLoading: boolean; }; type StepState = "active" | "completed" | "inactive" | "loading"; // Contexts const StepperContext = createContext(undefined); const StepItemContext = createContext(undefined); const useStepper = () => { const context = useContext(StepperContext); if (!context) { throw new Error("useStepper must be used within a Stepper"); } return context; }; const useStepItem = () => { const context = useContext(StepItemContext); if (!context) { throw new Error("useStepItem must be used within a StepperItem"); } return context; }; // Components interface StepperProps extends React.HTMLAttributes { defaultValue?: number; value?: number; onValueChange?: (value: number) => void; orientation?: "horizontal" | "vertical"; } const Stepper = React.forwardRef( ( { defaultValue = 0, value, onValueChange, orientation = "horizontal", className, ...props }, ref, ) => { const [activeStep, setInternalStep] = React.useState(defaultValue); const setActiveStep = React.useCallback( (step: number) => { if (value === undefined) { setInternalStep(step); } onValueChange?.(step); }, [value, onValueChange], ); const currentStep = value ?? activeStep; return (

); }, ); Stepper.displayName = "Stepper"; // StepperItem interface StepperItemProps extends React.HTMLAttributes { step: number; completed?: boolean; disabled?: boolean; loading?: boolean; } const StepperItem = React.forwardRef( ( { step, completed = false, disabled = false, loading = false, className, children, ...props }, ref, ) => { const { activeStep } = useStepper(); const state: StepState = completed || step < activeStep ? "completed" : activeStep === step ? "active" : "inactive"; const isLoading = loading && step === activeStep; return (

{children}

); }, ); StepperItem.displayName = "StepperItem"; // StepperTrigger interface StepperTriggerProps extends React.ButtonHTMLAttributes { asChild?: boolean; } const StepperTrigger = React.forwardRef( ({ asChild = false, className, children, ...props }, ref) => { const { setActiveStep } = useStepper(); const { step, isDisabled } = useStepItem(); if (asChild) { return

{children}

; } return ( ); }, ); StepperTrigger.displayName = "StepperTrigger"; // StepperIndicator interface StepperIndicatorProps extends React.HTMLAttributes { asChild?: boolean; } const StepperIndicator = React.forwardRef( ({ asChild = false, className, children, ...props }, ref) => { const { state, step, isLoading } = useStepItem(); return (

{asChild ? ( children ) : ( <> {step}

); }, ); StepperIndicator.displayName = "StepperIndicator"; // StepperTitle const StepperTitle = React.forwardRef>( ({ className, ...props }, ref) => (

), ); StepperTitle.displayName = "StepperTitle"; // StepperDescription const StepperDescription = React.forwardRef< HTMLParagraphElement, React.HTMLAttributes >(({ className, ...props }, ref) => (
)); StepperDescription.displayName = "StepperDescription"; // StepperSeparator const StepperSeparator = React.forwardRef>( ({ className, ...props }, ref) => { return (
); }, ); StepperSeparator.displayName = "StepperSeparator"; export { Stepper, StepperDescription, StepperIndicator, StepperItem, StepperSeparator, StepperTitle, StepperTrigger, };