stepper

1"use client"
2 
3import type { HTMLAttributes } from "react"
4import {
5  createContext,
6  useCallback,
7  useContext,
8  useEffect,
9  useId,
10  useMemo,
11  useRef,
12  useState,
13} from "react"
14import { mergeProps } from "@base-ui/react/merge-props"
15import { useRender } from "@base-ui/react/use-render"
16import { cva } from "class-variance-authority"
17 
18import { cn } from "@/lib/utils"
19 
20type StepperOrientation = "horizontal" | "vertical"
21type StepState = "active" | "completed" | "inactive"
22type StepperVariant = "default" | "info" | "success" | "warning" | "destructive"
23 
24type StepIndicators = {
25  active?: React.ReactNode
26  completed?: React.ReactNode
27  inactive?: React.ReactNode
28  loading?: React.ReactNode
29}
30 
31interface StepperContextValue {
32  activeStep: number
33  setActiveStep: (step: number) => void
34  orientation: StepperOrientation
35  variant: StepperVariant
36  activeVariant: StepperVariant
37  indicators: StepIndicators
38  baseId: string
39  registerTrigger: (node: HTMLButtonElement) => () => void
40  focusNext: (node: HTMLButtonElement) => void
41  focusPrev: (node: HTMLButtonElement) => void
42  focusFirst: () => void
43  focusLast: () => void
44}
45 
46interface StepItemContextValue {
47  step: number
48  state: StepState
49  isDisabled: boolean
50  isLoading: boolean
51}
52 
53const StepperContext = createContext<StepperContextValue | undefined>(undefined)
54const StepItemContext = createContext<StepItemContextValue | undefined>(
55  undefined
56)
57 
58function useStepper() {
59  const context = useContext(StepperContext)
60 
61  if (!context) {
62    throw new Error("useStepper must be used within a Stepper")
63  }
64 
65  return context
66}
67 
68function useStepItem() {
69  const context = useContext(StepItemContext)
70 
71  if (!context) {
72    throw new Error("useStepItem must be used within a StepperItem")
73  }
74 
75  return context
76}
77 
78interface StepperProps extends HTMLAttributes<HTMLDivElement> {
79  defaultValue?: number
80  value?: number
81  onValueChange?: (value: number) => void
82  orientation?: StepperOrientation
83  variant?: StepperVariant
84  activeVariant?: StepperVariant
85  indicators?: StepIndicators
86}
87 
88const stepperIndicatorVariants = cva(
89  "relative flex size-6 shrink-0 items-center justify-center overflow-hidden rounded-full border-background bg-accent text-xs text-accent-foreground data-[state=inactive]:text-muted-foreground",
90  {
91    variants: {
92      variant: {
93        default:
94          "data-[state=completed]:border-primary data-[state=completed]:bg-primary data-[state=completed]:text-primary-foreground",
95// … truncated