Stepper

1import { Slot } from '@radix-ui/react-slot'
2import { CheckIcon, LoaderCircleIcon } from 'lucide-react'
3import * as React from 'react'
4import { createContext, useContext } from 'react'
5 
6import { cn } from '@/lib/utils'
7 
8// Types
9type StepperContextValue = {
10	activeStep: number
11	setActiveStep: (step: number) => void
12	orientation: 'horizontal' | 'vertical'
13}
14 
15type StepItemContextValue = {
16	step: number
17	state: StepState
18	isDisabled: boolean
19	isLoading: boolean
20}
21 
22type StepState = 'active' | 'completed' | 'inactive' | 'loading'
23 
24// Contexts
25const StepperContext = createContext<StepperContextValue | undefined>(undefined)
26const StepItemContext = createContext<StepItemContextValue | undefined>(
27	undefined,
28)
29 
30const useStepper = () => {
31	const context = useContext(StepperContext)
32	if (!context) {
33		throw new Error('useStepper must be used within a Stepper')
34	}
35	return context
36}
37 
38const useStepItem = () => {
39	const context = useContext(StepItemContext)
40	if (!context) {
41		throw new Error('useStepItem must be used within a StepperItem')
42	}
43	return context
44}
45 
46// Components
47interface StepperProps extends React.HTMLAttributes<HTMLDivElement> {
48	defaultValue?: number
49	value?: number
50	onValueChange?: (value: number) => void
51	orientation?: 'horizontal' | 'vertical'
52}
53 
54function Stepper({
55	defaultValue = 0,
56	value,
57	onValueChange,
58	orientation = 'horizontal',
59	className,
60	...props
61}: StepperProps) {
62	const [activeStep, setInternalStep] = React.useState(defaultValue)
63 
64	const setActiveStep = React.useCallback(
65		(step: number) => {
66			if (value === undefined) {
67				setInternalStep(step)
68			}
69			onValueChange?.(step)
70		},
71		[value, onValueChange],
72	)
73 
74	const currentStep = value ?? activeStep
75 
76	return (
77		<StepperContext.Provider
78			value={{
79				activeStep: currentStep,
80				orientation,
81				setActiveStep,
82			}}
83		>
84			<div
85				className={cn(
86					'group/stepper inline-flex data-[orientation=horizontal]:w-full data-[orientation=horizontal]:flex-row data-[orientation=vertical]:flex-col',
87					className,
88				)}
89				data-orientation={orientation}
90				data-slot="stepper"
91				{...props}
92			/>
93		</StepperContext.Provider>
94	)
95}
96 
97// StepperItem
98interface StepperItemProps extends React.HTMLAttributes<HTMLDivElement> {
99	step: number
100	completed?: boolean
101	disabled?: boolean
102	loading?: boolean
103}
104 
105function StepperItem({
106	step,
107	completed = false,
108	disabled = false,
109	loading = false,
110	className,
111	children,
112	...props
113}: StepperItemProps) {
114	const { activeStep } = useStepper()
115 
116// … truncated