"use client"; import { mergeProps } from "@base-ui/react/merge-props"; import { useRender } from "@base-ui/react/use-render"; import * as React from "react"; import { cn } from "@/lib/utils"; type StepperOrientation = "horizontal" | "vertical"; type StepState = "active" | "completed" | "inactive" | "loading"; type StepIndicators = { active?: React.ReactNode; completed?: React.ReactNode; inactive?: React.ReactNode; loading?: React.ReactNode; }; type StepperContextValue = { id: string; activeStep: number; setActiveStep: (step: number) => void; orientation: StepperOrientation; indicators: StepIndicators; registerTrigger: (node: HTMLButtonElement | null) => void; triggerNodes: HTMLButtonElement[]; }; type StepItemContextValue = { step: number; state: StepState; isDisabled: boolean; isLoading: boolean; }; const StepperContext = React.createContext( undefined, ); const StepItemContext = React.createContext( undefined, ); function useStepper() { const context = React.useContext(StepperContext); if (!context) { throw new Error("useStepper must be used within a Stepper"); } return context; } function useStepItem() { const context = React.useContext(StepItemContext); if (!context) { throw new Error("useStepItem must be used within a StepperItem"); } return context; } interface StepperProps extends React.ComponentProps<"div"> { defaultValue?: number; value?: number; onValueChange?: (value: number) => void; orientation?: StepperOrientation; indicators?: StepIndicators; } function Stepper({ defaultValue = 1, value, onValueChange, orientation = "horizontal", indicators = {}, className, ...props }: StepperProps) { const [internalStep, setInternalStep] = React.useState(defaultValue); const [triggerNodes, setTriggerNodes] = React.useState( [], ); const registerTrigger = React.useCallback( (node: HTMLButtonElement | null) => { if (!node) return; setTriggerNodes((prev) => { if (prev.includes(node)) return prev; // Keep DOM order so arrow keys move to the visually next step. return [...prev, node].sort((a, b) => a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1, ); }); }, [], ); const setActiveStep = React.useCallback( (step: number) => { if (value === undefined) { setInternalStep(step); } onValueChange?.(step); }, [value, onValueChange], ); const id = React.useId(); const activeStep = value ?? internalStep; const contextValue = React.useMemo( () => ({ id, activeStep, setActiveStep, orientation, indicators, registerTrigger, triggerNodes, }), [ id, activeStep, setActiveStep, orientation, indicators, registerTrigger, triggerNodes, ], ); return (

); } interface StepperItemProps extends React.ComponentProps<"div"> { step: number; completed?: boolean; disabled?: boolean; loading?: boolean; } function StepperItem({ step, completed = false, disabled = false, loading = false, className, ...props }: StepperItemProps) { const { activeStep } = useStepper(); const state: StepState = completed || step < activeStep ? "completed" : activeStep === step ? "active" : "inactive"; const isLoading = loading && step === activeStep; return (

); } type StepperTriggerProps = useRender.ComponentProps<"button">; function StepperTrigger({ className, render, ...props }: StepperTriggerProps) { const { id, activeStep, setActiveStep, registerTrigger, triggerNodes } = useStepper(); const { step, state, isDisabled, isLoading } = useStepItem(); const ref = React.useRef(null); const isSelected = activeStep === step; React.useEffect(() => { registerTrigger(ref.current); }, [registerTrigger]); const focusAt = (index: number) => { const count = triggerNodes.length; if (count) triggerNodes[(index + count) % count]?.focus(); }; const handleKeyDown = (event: React.KeyboardEvent) => { const index = triggerNodes.findIndex((node) => node === ref.current); switch (event.key) { case "ArrowRight": case "ArrowDown": event.preventDefault(); focusAt(index + 1); break; case "ArrowLeft": case "ArrowUp": event.preventDefault(); focusAt(index - 1); break; case "Home": event.preventDefault(); focusAt(0); break; case "End": event.preventDefault(); focusAt(triggerNodes.length - 1); break; } }; return useRender({ defaultTagName: "button", render, ref, props: mergeProps<"button">( { type: "button", role: "tab", id: `${id}-tab-${step}`, "aria-selected": isSelected, "aria-controls": `${id}-panel-${step}`, tabIndex: isSelected ? 0 : -1, disabled: isDisabled, onClick: () => setActiveStep(step), onKeyDown: handleKeyDown, className: cn( "inline-flex cursor-pointer items-center gap-2.5 rounded-full outline-none focus-visible:z-10 focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-60", className, ), }, { "data-slot": "stepper-trigger", "data-state": state, "data-loading": isLoading || undefined, ...props, } as React.ComponentProps<"button">, ), }); } function StepperIndicator({ className, children, ...props }: React.ComponentProps<"div">) { const { indicators } = useStepper(); const { state, isLoading } = useStepItem(); const indicator = (isLoading && indicators.loading) || (state === "completed" && indicators.completed) || (state === "active" && indicators.active) || (state === "inactive" && indicators.inactive) || children; return (

{indicator}

); } function StepperSeparator({ className, ...props }: React.ComponentProps<"div">) { const { state } = useStepItem(); return (

); } function StepperTitle({ className, ...props }: React.ComponentProps<"h3">) { const { state } = useStepItem(); return (

); } function StepperDescription({ className, ...props }: React.ComponentProps<"p">) { const { state } = useStepItem(); return (
); } function StepperNav({ className, ...props }: React.ComponentProps<"nav">) { const { activeStep, orientation } = useStepper(); return (
); } function StepperPanel({ className, ...props }: React.ComponentProps<"div">) { const { activeStep } = useStepper(); return (
); } interface StepperContentProps extends React.ComponentProps<"div"> { value: number; forceMount?: boolean; } function StepperContent({ value, forceMount = false, className, ...props }: StepperContentProps) { const { id, activeStep } = useStepper(); const isActive = value === activeStep; if (!forceMount && !isActive) { return null; } return (