Multi-Step Flow

1"use client";
2 
3import * as React from "react";
4import {
5  AnimatePresence,
6  motion,
7  MotionConfig,
8  useReducedMotion,
9  type HTMLMotionProps,
10} from "motion/react";
11 
12import { Button } from "@/components/ui/button";
13import { useElementHeight } from "@/hooks/use-element-height";
14import { cn } from "@/lib/utils";
15 
16type MotionTransition = NonNullable<HTMLMotionProps<"div">["transition"]>;
17type StepDirection = -1 | 1;
18 
19export type MultiStepItem = {
20  id: string;
21  content: React.ReactNode;
22};
23 
24export type MultiStepProps = Omit<
25  HTMLMotionProps<"div">,
26  | "animate"
27  | "children"
28  | "defaultValue"
29  | "initial"
30  | "onChange"
31  | "transition"
32> & {
33  steps: MultiStepItem[];
34  currentStep?: number;
35  defaultStep?: number;
36  onStepChange?: (step: number) => void;
37  backLabel?: React.ReactNode;
38  continueLabel?: React.ReactNode;
39  completeLabel?: React.ReactNode;
40  disableBack?: boolean;
41  disableContinue?: boolean;
42  footer?: React.ReactNode;
43  contentClassName?: string;
44  innerClassName?: string;
45  actionsClassName?: string;
46  transition?: MotionTransition;
47};
48 
49export function MultiStep({
50  steps,
51  currentStep,
52  defaultStep = 0,
53  onStepChange,
54  backLabel = "Back",
55  continueLabel = "Continue",
56  completeLabel = "Done",
57  disableBack,
58  disableContinue,
59  footer,
60  className,
61  contentClassName,
62  innerClassName,
63  actionsClassName,
64  transition,
65  ...props
66}: MultiStepProps) {
67  const [uncontrolledStep, setUncontrolledStep] = React.useState(defaultStep);
68  const [direction, setDirection] = React.useState<StepDirection>(1);
69  const [innerRef, height] = useElementHeight<HTMLDivElement>();
70  const shouldReduceMotion = useReducedMotion();
71 
72  const selectedStep = clampStep(currentStep ?? uncontrolledStep, steps.length);
73  const isControlled = currentStep !== undefined;
74  const isFirstStep = selectedStep === 0;
75  const isLastStep = selectedStep === steps.length - 1;
76  const activeStep = steps[selectedStep];
77 
78  const setStep = React.useCallback(
79    (nextStep: number, nextDirection: StepDirection) => {
80      const resolvedStep = clampStep(nextStep, steps.length);
81 
82      setDirection(nextDirection);
83 
84      if (!isControlled) {
85        setUncontrolledStep(resolvedStep);
86      }
87 
88      onStepChange?.(resolvedStep);
89    },
90    [isControlled, onStepChange, steps.length],
91  );
92 
93  const resolvedTransition: MotionTransition = shouldReduceMotion
94    ? { duration: 0 }
95    : (transition ?? { type: "spring", duration: 0.5, bounce: 0 });
96// … truncated