Steps

1import * as React from "react"
2import { cn } from "@/lib/utils"
3 
4interface StepsProps extends React.HTMLAttributes<HTMLDivElement> {
5  children: React.ReactNode
6}
7 
8function Steps({ className, children, ...props }: StepsProps) {
9  // Count Step children and inject step numbers
10  let stepIndex = 0
11  const childrenWithNumbers = React.Children.map(children, (child) => {
12    if (
13      React.isValidElement(child) &&
14      (child.type as React.FC)?.displayName === "Step"
15    ) {
16      stepIndex++
17      return React.cloneElement(child as React.ReactElement<StepInternalProps>, {
18        _stepNumber: stepIndex,
19      })
20    }
21    return child
22  })
23 
24  return (
25    <div className={cn("flex flex-col", className)} {...props}>
26      {childrenWithNumbers}
27    </div>
28  )
29}
30 
31interface StepInternalProps extends React.HTMLAttributes<HTMLDivElement> {
32  children: React.ReactNode
33  _stepNumber?: number
34}
35 
36function Step({ className, children, _stepNumber, ...props }: StepInternalProps) {
37  return (
38    <div className={cn("grid grid-cols-[auto_1fr] gap-4", className)} {...props}>
39      {/* Left column: number + line */}
40      <div className="flex flex-col items-center">
41        <div className="flex size-6 shrink-0 items-center justify-center rounded-full bg-muted text-xs font-medium text-muted-foreground">
42          {_stepNumber}
43        </div>
44        <div className="my-2 w-px flex-1 bg-border" />
45      </div>
46      {/* Right column: content */}
47      <div>
48        {children}
49      </div>
50    </div>
51  )
52}
53Step.displayName = "Step"
54 
55interface StepTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
56  children: React.ReactNode
57}
58 
59function StepTitle({ className, children, ...props }: StepTitleProps) {
60  return (
61    <h3
62      className={cn("text-base font-medium leading-6 tracking-tight", className)}
63      {...props}
64    >
65      {children}
66    </h3>
67  )
68}
69 
70interface StepContentProps extends React.HTMLAttributes<HTMLDivElement> {
71  children: React.ReactNode
72}
73 
74function StepContent({ className, children, ...props }: StepContentProps) {
75  return (
76    <div className={cn("mt-2", className)} {...props}>
77      {children}
78    </div>
79  )
80}
81 
82export { Steps, Step, StepTitle, StepContent }