Stepper

1"use client";
2 
3import { mergeProps } from "@base-ui/react/merge-props";
4import { useRender } from "@base-ui/react/use-render";
5import * as React from "react";
6 
7import { cn } from "@/lib/utils";
8 
9type StepperOrientation = "horizontal" | "vertical";
10type StepState = "active" | "completed" | "inactive";
11type StepIndicators = Partial<Record<StepState | "loading", React.ReactNode>>;
12 
13type StepperContextValue = {
14  activeStep: number;
15  setActiveStep: (step: number) => void;
16  stepsCount: number;
17  orientation: StepperOrientation;
18  indicators: StepIndicators;
19  triggerNodes: HTMLButtonElement[];
20  registerTrigger: (node: HTMLButtonElement) => () => void;
21  focusNext: (currentIndex: number) => void;
22  focusPrevious: (currentIndex: number) => void;
23  focusFirst: () => void;
24  focusLast: () => void;
25};
26 
27type StepItemContextValue = {
28  step: number;
29  state: StepState;
30  isDisabled: boolean;
31  isLoading: boolean;
32};
33 
34type StepperProps = React.ComponentProps<"div"> & {
35  defaultValue?: number;
36  value?: number;
37  onValueChange?: (value: number) => void;
38  orientation?: StepperOrientation;
39  indicators?: StepIndicators;
40};
41 
42type StepperItemProps = React.ComponentProps<"div"> & {
43  step: number;
44  completed?: boolean;
45  disabled?: boolean;
46  loading?: boolean;
47};
48 
49type StepperTriggerState = Record<string, unknown> & {
50  state: StepState;
51  isLoading: boolean;
52  isSelected: boolean;
53};
54 
55type StepperTriggerProps = Omit<React.ComponentProps<"button">, "children"> & {
56  render?: useRender.RenderProp<StepperTriggerState>;
57  children?: React.ReactNode;
58};
59 
60type StepperContentProps = React.ComponentProps<"div"> & {
61  value: number;
62  forceMount?: boolean;
63};
64 
65const defaultIndicators = {};
66const StepperContext = React.createContext<StepperContextValue | null>(null);
67const StepItemContext = React.createContext<StepItemContextValue | null>(null);
68 
69function Stepper({
70  defaultValue = 1,
71  value,
72  onValueChange,
73  orientation = "horizontal",
74  indicators = defaultIndicators,
75  className,
76  children,
77  ...props
78}: StepperProps) {
79  const [uncontrolledStep, setUncontrolledStep] = React.useState(defaultValue);
80  const [triggerNodes, setTriggerNodes] = React.useState<HTMLButtonElement[]>([]);
81  const activeStep = value ?? uncontrolledStep;
82 
83  const setActiveStep = React.useCallback(
84    (step: number) => {
85      if (value === undefined) {
86        setUncontrolledStep(step);
87      }
88 
89      onValueChange?.(step);
90    },
91    [onValueChange, value],
92  );
93 
94// … truncated