"use client";

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

export interface StepItem {
  label: string;
  description?: string;
}

interface StepperProps {
  steps: StepItem[];
  currentStep: number;
  orientation?: "horizontal" | "vertical";
  className?: string;
}

function Stepper({
  steps,
  currentStep,
  orientation = "horizontal",
  className,
}: StepperProps) {
  const isHorizontal = orientation === "horizontal";

  return (
    <div
      className={cn(
        "flex",
        isHorizontal ? "flex-row items-start" : "flex-col",
        className
      )}
      role="list"
      aria-label="Progress"
    >
      {steps.map((step, index) => {
        const stepNumber = index + 1;
        const isCompleted = stepNumber < currentStep;
        const isActive = stepNumber === currentStep;
        const isLast = index === steps.length - 1;

        return (
          <div
            key={`${step.label}-${index}`}
            className={cn(
              "relative flex",
              isHorizontal ? "flex-1 flex-col items-center" : "items-start gap-4"
            )}
            role="listitem"
            aria-current={isActive ? "step" : undefined}
          >
            {/* Connector line */}
            {!isLast ? (
              <div
                className={cn(
                  "absolute",
                  isHorizontal
                    ? "left-[calc(50%+20px)] right-[calc(-50%+20px)] top-5 h-2"
                    : "bottom-0 left-5 top-12 w-2"
                )}
              >
                <div
                  className={cn(
                    "absolute inset-0",
                    isHorizontal ? "border-t border-border" : "border-l border-border"
                  )}
                />
              </div>
            ) : null}

            {/* Step indicator and content */}
            <div
              className={cn(
                "flex",
                isHorizontal ? "flex-col items-center gap-2" : "flex-row gap-4"
              )}
            >
              {/* Circle indicator */}
              <motion.div
                initial={false}
                animate={{
                  scale: isActive ? 1.1 : 1,
                }}
                transition={{ type: "spring", stiffness: 300, damping: 20 }}
                className={cn(
                  "relative z-10 flex h-10 w-10 shrink-0 items-center justify-center rounded-full border-2 border-border bg-card text-sm font-semibold transition-colors",
                  isCompleted || isActive
                    ? "text-primary"
                    : "text-muted-foreground"
                )}
              >
                {isCompleted ? (
                  <motion.svg
                    initial={{ scale: 0, opacity: 0 }}
                    animate={{ scale: 1, opacity: 1 }}
                    transition={{ duration: 0.2, ease: "easeOut" }}
                    className="h-5 w-5"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                    strokeWidth={2.5}
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      d="M5 13l4 4L19 7"
                    />
                  </motion.svg>
                ) : (
                  stepNumber
                )}
              </motion.div>

              {/* Labels */}
              <div
                className={cn(
                  "flex flex-col",
                  isHorizontal ? "items-center text-center" : "items-start",
                  !isHorizontal && "min-h-16 pb-4"
                )}
              >
                <span
                  className={cn(
                    "text-sm font-medium transition-colors",
                    isActive || isCompleted
                      ? "text-foreground"
                      : "text-muted-foreground"
                  )}
                >
                  {step.label}
                </span>
                {step.description ? (
                  <span className="mt-0.5 text-xs text-muted-foreground">
                    {step.description}
                  </span>
                ) : null}
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
}

export { Stepper };
export type { StepperProps };
Stepper

Dependencies

Files

Installation
