"use client";

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

export interface ProgressStep {
  title: string;
  description?: string;
}

export interface ProgressStepsProps extends React.HTMLAttributes<HTMLDivElement> {
  steps: ProgressStep[];
  currentStep: number;
  layout?: "horizontal" | "vertical";
}

function ProgressSteps({
  steps,
  currentStep,
  layout = "horizontal",
  className,
  ...props
}: ProgressStepsProps) {
  const isHorizontal = layout === "horizontal";
  const activeIndex = Math.min(Math.max(currentStep - 1, 0), steps.length - 1);

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

        return (
          <div
            key={`${step.title}-${index}`}
            className={cn(
              "flex",
              isHorizontal ? "flex-1 flex-col" : "flex-row items-start gap-4"
            )}
            role="listitem"
            aria-current={isCurrent ? "step" : undefined}
          >
            <div
              className={cn(
                "flex",
                isHorizontal
                  ? "w-full items-center"
                  : "flex-col items-center"
              )}
            >
              <div
                className={cn(
                  "flex h-9 w-9 items-center justify-center rounded-full border border-border text-sm font-semibold",
                  isCompleted
                    ? "bg-muted text-primary"
                    : isCurrent
                    ? "bg-card text-foreground ring-2 ring-ring"
                    : "bg-muted text-muted-foreground"
                )}
              >
                {isCompleted ? (
                  <svg
                    viewBox="0 0 24 24"
                    aria-hidden="true"
                    className="h-4 w-4"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth={2.5}
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      d="M5 13l4 4L19 7"
                    />
                  </svg>
                ) : (
                  index + 1
                )}
              </div>

              {!isLast ? (
                <div
                  className={cn(
                    isHorizontal
                      ? "mx-2 h-1 flex-1 rounded-full"
                      : "mt-2 h-12 w-1 rounded-full"
                  )}
                >
                  <div
                    className={cn(
                      "h-full w-full rounded-full",
                      isCompleted ? "bg-card border border-border" : "bg-muted"
                    )}
                  />
                </div>
              ) : null}
            </div>

            <div
              className={cn(
                "mt-3",
                isHorizontal ? "text-center" : "mt-0"
              )}
            >
              <p
                className={cn(
                  "text-sm font-medium",
                  isCompleted || isCurrent
                    ? "text-foreground"
                    : "text-muted-foreground"
                )}
              >
                {step.title}
              </p>
              {step.description ? (
                <p className="mt-1 text-sm text-muted-foreground">
                  {step.description}
                </p>
              ) : null}
            </div>
          </div>
        );
      })}
    </div>
  );
}

export { ProgressSteps };
Progress Steps

Dependencies

Files

Installation
