"use client";

import * as React from "react";
import { cn } from "@/lib/utils";

export interface FormStep {
  id: string;
  title: string;
  description?: string;
  content: React.ReactNode;
}

export interface FormStepperProps extends React.HTMLAttributes<HTMLDivElement> {
  steps: FormStep[];
  currentStep?: number;
  onStepChange?: (step: number) => void;
  onComplete?: () => void;
  showNavigation?: boolean;
  allowStepClick?: boolean;
  nextLabel?: string;
  prevLabel?: string;
  completeLabel?: string;
}

function CheckIcon({ className }: { className?: string }) {
  return (
    <svg
      className={className}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={2.5}
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden="true"
    >
      <polyline points="20 6 9 17 4 12" />
    </svg>
  );
}

export function FormStepper({
  steps,
  currentStep: controlledStep,
  onStepChange,
  onComplete,
  showNavigation = true,
  allowStepClick = false,
  nextLabel = "Next",
  prevLabel = "Back",
  completeLabel = "Complete",
  className,
  ...props
}: FormStepperProps) {
  const [internalStep, setInternalStep] = React.useState(0);

  const currentStep = controlledStep !== undefined ? controlledStep : internalStep;

  const updateStep = React.useCallback(
    (nextStep: number) => {
      if (controlledStep === undefined) {
        setInternalStep(nextStep);
      }
      onStepChange?.(nextStep);
    },
    [controlledStep, onStepChange]
  );

  const goToNext = () => {
    if (currentStep < steps.length - 1) {
      updateStep(currentStep + 1);
    } else {
      onComplete?.();
    }
  };

  const goToPrev = () => {
    if (currentStep > 0) {
      updateStep(currentStep - 1);
    }
  };

  const goToStep = (index: number) => {
    if (allowStepClick && index <= currentStep) {
      updateStep(index);
    }
  };

  const progressPercentage = ((currentStep + 1) / steps.length) * 100;

  return (
    <div className={cn("w-full", className)} {...props}>
      {/* Progress bar */}
      <div className="mb-2 h-1 w-full overflow-hidden rounded-full bg-muted">
        <div
          className="h-full bg-primary transition-all duration-300"
          style={{ width: `${progressPercentage}%` }}
        />
      </div>

      {/* Step indicators */}
      <div className="mb-6 flex items-center justify-between">
        {steps.map((step, index) => {
          const isCompleted = index < currentStep;
          const isCurrent = index === currentStep;
          const isClickable = allowStepClick && index <= currentStep;

          return (
            <div
              key={step.id}
              className={cn(
                "flex flex-1 flex-col items-center",
                index < steps.length - 1 && "relative"
              )}
            >
              {/* Connector line */}
              {index < steps.length - 1 ? (
                <div
                  className={cn(
                    "absolute left-[calc(50%+20px)] right-[calc(-50%+20px)] top-5 h-0.5",
                    isCompleted ? "bg-primary" : "bg-muted"
                  )}
                />
              ) : null}

              {/* Step circle */}
              <button
                type="button"
                onClick={() => goToStep(index)}
                disabled={!isClickable}
                className={cn(
                  "relative z-10 flex h-10 w-10 items-center justify-center rounded-full border-2 text-sm font-semibold transition-all",
                  isCompleted
                    ? "border-primary bg-primary text-background"
                    : isCurrent
                    ? "border-primary bg-card text-primary ring-2 ring-ring ring-offset-2 ring-offset-background"
                    : "border-border bg-muted text-muted-foreground",
                  isClickable && !isCurrent && "cursor-pointer hover:bg-muted",
                  !isClickable && "cursor-default"
                )}
                aria-current={isCurrent ? "step" : undefined}
              >
                {isCompleted ? (
                  <CheckIcon className="h-5 w-5" />
                ) : (
                  index + 1
                )}
              </button>

              {/* Step label */}
              <div className="mt-2 text-center">
                <p
                  className={cn(
                    "text-sm font-medium",
                    isCurrent || isCompleted
                      ? "text-foreground"
                      : "text-muted-foreground"
                  )}
                >
                  {step.title}
                </p>
                {step.description ? (
                  <p className="mt-0.5 text-xs text-muted-foreground">
                    {step.description}
                  </p>
                ) : null}
              </div>
            </div>
          );
        })}
      </div>

      {/* Step content */}
      <div className="rounded-xl border border-border bg-card p-6">
        {steps[currentStep]?.content}
      </div>

      {/* Navigation buttons */}
      {showNavigation ? (
        <div className="mt-6 flex items-center justify-between">
          <button
            type="button"
            onClick={goToPrev}
            disabled={currentStep === 0}
            className={cn(
              "rounded-lg border border-border bg-background px-4 py-2 text-sm font-medium text-foreground transition",
              "hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
              "disabled:cursor-not-allowed disabled:opacity-50"
            )}
          >
            {prevLabel}
          </button>

          <span className="text-sm text-muted-foreground">
            Step {currentStep + 1} of {steps.length}
          </span>

          <button
            type="button"
            onClick={goToNext}
            className={cn(
              "rounded-lg bg-primary px-4 py-2 text-sm font-medium text-background transition",
              "hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
            )}
          >
            {currentStep === steps.length - 1 ? completeLabel : nextLabel}
          </button>
        </div>
      ) : null}
    </div>
  );
}
Form Stepper

Dependencies

Files

Installation
