Animated Stepper

1"use client";
2 
3import { cn } from "@/lib/utils";
4import { AnimatePresence, motion, useReducedMotion } from "motion/react";
5import { type ReactNode, useCallback, useId, useState } from "react";
6 
7export interface StepItem {
8  content?: ReactNode;
9  description?: string;
10  icon?: ReactNode;
11  label: string;
12}
13 
14export interface AnimatedStepperProps {
15  allowClickNavigation?: boolean;
16  className?: string;
17  currentStep?: number;
18  defaultStep?: number;
19  onStepChange?: (step: number) => void;
20  steps: StepItem[];
21  variant?: "horizontal" | "vertical";
22}
23 
24/* ─────────────────────────────────────────────────────────
25 * ANIMATION STORYBOARD
26 *
27 *    0ms   stepper enters viewport
28 *  100ms   step circles stagger in (50ms each)
29 *  click   active ring pulse + circle scale bounce
30 *  step    progress line fills with spring
31 *  done    checkmark draws with pathLength animation
32 *  slide   content slides directionally with crossfade
33 * ───────────────────────────────────────────────────────── */
34 
35const SPRING = {
36  bounce: 0.1,
37  duration: 0.25,
38  type: "spring" as const,
39};
40 
41const SPRING_BOUNCY = {
42  bounce: 0.2,
43  duration: 0.3,
44  type: "spring" as const,
45};
46 
47function CheckIcon() {
48  return (
49    <svg
50      aria-hidden="true"
51      className="h-5 w-5"
52      fill="none"
53      stroke="currentColor"
54      strokeWidth={2.5}
55      viewBox="0 0 24 24"
56    >
57      <path d="M5 13l4 4L19 7" strokeLinecap="round" strokeLinejoin="round" />
58    </svg>
59  );
60}
61 
62export default function AnimatedStepper({
63  steps,
64  currentStep: controlledStep,
65  defaultStep = 0,
66  onStepChange,
67  variant = "horizontal",
68  allowClickNavigation = false,
69  className,
70}: AnimatedStepperProps) {
71  const shouldReduceMotion = useReducedMotion();
72  const id = useId();
73 
74  const [internalStep, setInternalStep] = useState(defaultStep);
75  const [direction, setDirection] = useState(1);
76 
77  const isControlled = controlledStep !== undefined;
78  const activeStep = isControlled ? controlledStep : internalStep;
79 
80  const handleStepChange = useCallback(
81    (step: number) => {
82      if (step < 0 || step >= steps.length) {
83        return;
84      }
85      setDirection(step > activeStep ? 1 : -1);
86      if (!isControlled) {
87        setInternalStep(step);
88      }
89      onStepChange?.(step);
90    },
91// … truncated