4f:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 50:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 51:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 52:T95d9,"use client"; import * as React from "react"; import { Slot } from "@radix-ui/react-slot"; import { cn } from "@/lib/utils"; // ---------------------------------------------------------------------------- // Types // ---------------------------------------------------------------------------- type StepperOrientation = "horizontal" | "vertical"; type StepperValue = string; type StepperStepPosition = "previous" | "current" | "next"; type StepperStepState = | "inactive" | "active" | "completed" | "disabled" | "error"; type StepperStepInput = { value: TValue; disabled?: boolean; }; type StepperStep = { value: TValue; disabled: boolean; }; type StepperStepsValue = TSteps[number]["value"]; type RegisteredStep = StepperStep & { id: string; }; type StepperNavigationGuard = () => boolean | Promise; type StepperApi = { value: TValue | undefined; orientation: StepperOrientation; steps: StepperStep[]; currentIndex: number; totalSteps: number; setValue: (value: TValue) => void; getStepIndex: (value: TValue) => number; canGoPrevious: boolean; canGoNext: boolean; goPrevious: () => void; goNext: () => void; }; type StepperItemApi = { value: TValue; index: number; disabled: boolean; completed: boolean; isActive: boolean; stepState: StepperStepState; stepPosition: StepperStepPosition; orientation: StepperOrientation; setValue: (value: TValue) => void; triggerId: string; contentId: string; }; type StepperContextValue = StepperApi & { isExplicitMode: boolean; transitionFromIndex: number; transitionToIndex: number; registerStep: (step: RegisteredStep) => void; unregisterStep: (id: string) => void; getTriggerId: (value: TValue) => string; getContentId: (value: TValue) => string; }; type StepperItemContextValue = StepperItemApi; type StepperProps = React.ComponentPropsWithoutRef<"div"> & { value?: TValue; defaultValue?: TValue; onValueChange?: (value: TValue) => void; orientation?: StepperOrientation; steps?: readonly StepperStepInput[]; }; type StepperPropsWithSteps< TSteps extends readonly StepperStepInput[], > = Omit>, "steps"> & { steps: TSteps; }; type StepperPropsWithoutSteps< TValue extends StepperValue = StepperValue, > = Omit, "steps"> & { steps?: undefined; }; type StepperListProps = React.ComponentPropsWithoutRef<"ol">; type StepperItemProps = Omit< React.ComponentPropsWithoutRef<"li">, "value" > & { value: TValue; completed?: boolean; defaultTrigger?: boolean; disabled?: boolean; error?: boolean; separator?: boolean; }; type StepperTriggerProps = React.ComponentPropsWithoutRef<"button"> & { asChild?: boolean; }; type StepperIndicatorProps = React.ComponentPropsWithoutRef<"span">; type StepperLabelProps = React.ComponentPropsWithoutRef<"span">; type StepperDescriptionProps = React.ComponentPropsWithoutRef<"span">; type StepperSeparatorProps = React.ComponentPropsWithoutRef<"span">; type StepperContentProps = React.ComponentPropsWithoutRef<"div"> & { value: TValue; forceMount?: boolean; keepMounted?: boolean; asChild?: boolean; }; type StepperButtonProps = React.ComponentPropsWithoutRef<"button"> & { asChild?: boolean; }; type StepperPreviousProps = StepperButtonProps & { onBeforePrevious?: StepperNavigationGuard; }; type StepperNextProps = StepperButtonProps & { onBeforeNext?: StepperNavigationGuard; }; // ---------------------------------------------------------------------------- // Helpers // ---------------------------------------------------------------------------- const isDevelopment = process.env.NODE_ENV !== "production"; function warnDev(message: string) { if (isDevelopment) { console.warn(message); } } function getSafeId(value: StepperValue) { return value.replace(/[^a-zA-Z0-9_-]/g, "-"); } function normalizeStep( step: StepperStepInput ): StepperStep { return { value: step.value, disabled: Boolean(step.disabled), }; } function normalizeSteps( steps: readonly StepperStepInput[] | undefined ) { return steps?.map(normalizeStep) ?? []; } function getDuplicateStepValues( steps: ReadonlyArray<{ value: TValue }> ) { const seenValues = new Set(); const duplicateValues = new Set(); steps.forEach((step) => { if (seenValues.has(step.value)) { duplicateValues.add(step.value); return; } seenValues.add(step.value); }); return Array.from(duplicateValues); } function getStepByValue( steps: readonly StepperStep[], value: TValue | undefined ) { return steps.find((step) => step.value === value); } function getCurrentStepValue( steps: readonly StepperStep[], selectedValue: TValue | undefined ) { const selectedStep = getStepByValue(steps, selectedValue); if (selectedStep && !selectedStep.disabled) { return selectedStep.value; } return steps.find((step) => !step.disabled)?.value; } function getNextEnabledStep( steps: readonly StepperStep[], currentValue: TValue | undefined ) { const currentIndex = steps.findIndex((step) => step.value === currentValue); if (currentIndex === -1) { return undefined; } return steps.slice(currentIndex + 1).find((step) => !step.disabled); } function getPreviousEnabledStep( steps: readonly StepperStep[], currentValue: TValue | undefined ) { const currentIndex = steps.findIndex((step) => step.value === currentValue); if (currentIndex === -1) { return undefined; } return steps .slice(0, currentIndex) .reverse() .find((step) => !step.disabled); } function getKeyboardNavigationStepValue({ key, orientation, steps, value, }: { key: string; orientation: StepperOrientation; steps: readonly StepperStep[]; value: TValue; }) { const enabledSteps = steps.filter((step) => !step.disabled); const currentIndex = enabledSteps.findIndex((step) => step.value === value); if (currentIndex < 0) { return undefined; } if (key === "Home") { return enabledSteps.at(0)?.value; } if (key === "End") { return enabledSteps.at(-1)?.value; } if ( (orientation === "horizontal" && key === "ArrowRight") || (orientation === "vertical" && key === "ArrowDown") ) { return enabledSteps[Math.min(currentIndex + 1, enabledSteps.length - 1)] ?.value; } if ( (orientation === "horizontal" && key === "ArrowLeft") || (orientation === "vertical" && key === "ArrowUp") ) { return enabledSteps[Math.max(currentIndex - 1, 0)]?.value; } return undefined; } async function resolveNavigationGuard( guard: StepperNavigationGuard | undefined ) { if (!guard) { return true; } return (await guard()) !== false; } function setDisplayName(component: object, displayName: string) { (component as { displayName?: string }).displayName = displayName; } // ---------------------------------------------------------------------------- // Context // ---------------------------------------------------------------------------- const StepperContext = React.createContext(null); const StepperItemContext = React.createContext(null); const StepperListContext = React.createContext(false); function useStepperContext(component: string) { const context = React.useContext(StepperContext); if (!context) { throw new Error(`${component} must be used within Stepper`); } return context; } function useStepperItemContext(component: string) { const context = React.useContext(StepperItemContext); if (!context) { throw new Error(`${component} must be used within StepperItem`); } return context; } function useStepperListContext() { return React.useContext(StepperListContext); } // ---------------------------------------------------------------------------- // Internal Hooks // ---------------------------------------------------------------------------- function useRegisteredSteps() { const [registeredSteps, setRegisteredSteps] = React.useState< RegisteredStep[] >([]); const registerStep = React.useCallback((step: RegisteredStep) => { setRegisteredSteps((currentSteps) => { const existingStepIndex = currentSteps.findIndex( (currentStep) => currentStep.id === step.id ); if (existingStepIndex === -1) { return [...currentSteps, step]; } const existingStep = currentSteps[existingStepIndex]; if ( existingStep.value === step.value && existingStep.disabled === step.disabled ) { return currentSteps; } const nextSteps = [...currentSteps]; nextSteps[existingStepIndex] = step; return nextSteps; }); }, []); const unregisterStep = React.useCallback((stepId: string) => { setRegisteredSteps((currentSteps) => currentSteps.filter((step) => step.id !== stepId) ); }, []); return { registeredSteps, registerStep, unregisterStep, }; } function useStepperSteps( stepsProp: readonly StepperStepInput[] | undefined, registeredSteps: RegisteredStep[] ) { const isExplicitMode = stepsProp !== undefined; const explicitSteps = React.useMemo( () => (isExplicitMode ? normalizeSteps(stepsProp) : undefined), [isExplicitMode, stepsProp] ); const steps = React.useMemo( () => explicitSteps ?? registeredSteps.map((step) => ({ value: step.value, disabled: step.disabled, })), [explicitSteps, registeredSteps] ); return { isExplicitMode, steps, }; } function useStepperValue({ value, defaultValue, onValueChange, steps, }: { value: StepperValue | undefined; defaultValue: StepperValue | undefined; onValueChange: ((value: StepperValue) => void) | undefined; steps: StepperStep[]; }) { const isControlled = value !== undefined; const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue); const selectedValue = isControlled ? value : uncontrolledValue; const currentValue = React.useMemo( () => getCurrentStepValue(steps, selectedValue), [selectedValue, steps] ); const currentIndex = React.useMemo( () => currentValue === undefined ? -1 : steps.findIndex((step) => step.value === currentValue), [currentValue, steps] ); const setValue = React.useCallback( (nextValue: StepperValue) => { const nextStepRecord = getStepByValue(steps, nextValue); if (!nextStepRecord || nextStepRecord.disabled) { return; } if (!isControlled) { setUncontrolledValue(nextValue); } onValueChange?.(nextValue); }, [isControlled, onValueChange, steps] ); return { currentValue, currentIndex, setValue, }; } function useStepperNavigation({ currentValue, setValue, steps, }: { currentValue: StepperValue | undefined; setValue: (value: StepperValue) => void; steps: StepperStep[]; }) { const previousStep = React.useMemo( () => getPreviousEnabledStep(steps, currentValue), [currentValue, steps] ); const nextStep = React.useMemo( () => getNextEnabledStep(steps, currentValue), [currentValue, steps] ); const goPrevious = React.useCallback(() => { if (previousStep) { setValue(previousStep.value); } }, [previousStep, setValue]); const goNext = React.useCallback(() => { if (nextStep) { setValue(nextStep.value); } }, [nextStep, setValue]); return { canGoPrevious: Boolean(previousStep), canGoNext: Boolean(nextStep), goPrevious, goNext, }; } function useStepperTransition(currentIndex: number) { const previousIndexRef = React.useRef(currentIndex); const [transition, setTransition] = React.useState(() => ({ from: currentIndex, to: currentIndex, })); React.useLayoutEffect(() => { const previousIndex = previousIndexRef.current; if (previousIndex === currentIndex) { return; } setTransition({ from: previousIndex, to: currentIndex, }); previousIndexRef.current = currentIndex; }, [currentIndex]); return transition; } function getStepTransitionDelay({ from, index, to, }: { from: number; index: number; to: number; }) { if (from < 0 || to < 0 || index < 0 || from === to) { return 0; } if (to > from) { return index >= from && index < to ? (index - from) * 80 : 0; } return index >= to && index < from ? (from - index - 1) * 80 : 0; } function useDuplicateStepWarning(steps: StepperStep[]) { const duplicateStepValues = React.useMemo( () => getDuplicateStepValues(steps), [steps] ); const duplicateStepValuesKey = duplicateStepValues.join("\0"); React.useEffect(() => { if (!isDevelopment || duplicateStepValues.length === 0) { return; } duplicateStepValues.forEach((stepValue) => { warnDev( `StepperItem value "${stepValue}" is duplicated. Step values must be unique within a Stepper.` ); }); }, [duplicateStepValues, duplicateStepValuesKey]); } function useNavigationButton({ canNavigate, disabled, navigate, onBeforeNavigate, }: { canNavigate: boolean; disabled: boolean | undefined; navigate: () => void; onBeforeNavigate: StepperNavigationGuard | undefined; }) { const [isPending, setIsPending] = React.useState(false); const pendingRef = React.useRef(false); const isDisabled = disabled || !canNavigate || isPending; const handleClick = React.useCallback( async ( event: React.MouseEvent, onClick: React.MouseEventHandler | undefined ) => { onClick?.(event); if (isDisabled || pendingRef.current) { event.preventDefault(); return; } if (event.defaultPrevented) { return; } pendingRef.current = true; setIsPending(true); try { const canCompleteNavigation = await resolveNavigationGuard(onBeforeNavigate); if (canCompleteNavigation) { navigate(); } } finally { pendingRef.current = false; setIsPending(false); } }, [isDisabled, navigate, onBeforeNavigate] ); return { isDisabled, handleClick, }; } function useStepper< TValue extends StepperValue = StepperValue, >(): StepperApi { const context = useStepperContext( "useStepper" ) as unknown as StepperContextValue; return { value: context.value, orientation: context.orientation, steps: context.steps, currentIndex: context.currentIndex, totalSteps: context.totalSteps, setValue: context.setValue, getStepIndex: context.getStepIndex, canGoPrevious: context.canGoPrevious, canGoNext: context.canGoNext, goPrevious: context.goPrevious, goNext: context.goNext, }; } function useStepperItem< TValue extends StepperValue = StepperValue, >(): StepperItemApi { return useStepperItemContext( "useStepperItem" ) as unknown as StepperItemContextValue; } // ---------------------------------------------------------------------------- // Root // ---------------------------------------------------------------------------- function Stepper( props: StepperPropsWithSteps ): React.ReactElement; function Stepper( props: StepperPropsWithoutSteps ): React.ReactElement; function Stepper({ value, defaultValue, onValueChange, orientation = "horizontal", steps: stepsProp, className, children, ...props }: StepperProps) { const id = React.useId(); const { registeredSteps, registerStep, unregisterStep } = useRegisteredSteps(); const { isExplicitMode, steps } = useStepperSteps( stepsProp, registeredSteps ); const { currentValue, currentIndex, setValue: setStepperValue, } = useStepperValue({ value, defaultValue, onValueChange, steps, }); const { canGoPrevious, canGoNext, goPrevious, goNext } = useStepperNavigation({ currentValue, setValue: setStepperValue, steps, }); const { from: transitionFromIndex, to: transitionToIndex } = useStepperTransition(currentIndex); useDuplicateStepWarning(steps); const context = React.useMemo( () => ({ value: currentValue, orientation, steps, isExplicitMode, currentIndex, transitionFromIndex, transitionToIndex, totalSteps: steps.length, registerStep, unregisterStep, setValue: setStepperValue, getStepIndex: (stepValue) => steps.findIndex((step) => step.value === stepValue), getTriggerId: (stepValue) => `${id}-trigger-${getSafeId(stepValue)}`, getContentId: (stepValue) => `${id}-content-${getSafeId(stepValue)}`, canGoPrevious, canGoNext, goPrevious, goNext, }), [ canGoNext, canGoPrevious, currentValue, currentIndex, transitionFromIndex, transitionToIndex, goNext, goPrevious, id, isExplicitMode, orientation, registerStep, setStepperValue, steps, unregisterStep, ] ); return (

{children}

); } // ---------------------------------------------------------------------------- // List // ---------------------------------------------------------------------------- function StepperList({ className, "aria-label": ariaLabel = "Progress steps", children, ...props }: StepperListProps) { const { orientation } = useStepperContext("StepperList"); return (

li:last-child_[data-slot=stepper-separator]]:hidden", className )} {...props} > {children} ); } // ---------------------------------------------------------------------------- // Item // ---------------------------------------------------------------------------- function StepperItem({ value, completed = false, defaultTrigger = true, disabled = false, error = false, separator = true, className, style, children, ...props }: StepperItemProps) { const { value: currentValue, orientation, steps, isExplicitMode, transitionFromIndex, transitionToIndex, registerStep, unregisterStep, setValue, getStepIndex, getTriggerId, getContentId, } = useStepperContext("StepperItem"); const registrationId = React.useId(); const isInsideStepperList = useStepperListContext(); const index = getStepIndex(value); const step = getStepByValue(steps, value); const isDisabled = step?.disabled ?? disabled; const currentIndex = currentValue === undefined ? -1 : getStepIndex(currentValue); const isActive = currentValue === value; const stepPosition: StepperStepPosition = currentIndex < 0 || index < 0 ? "next" : index < currentIndex ? "previous" : index === currentIndex ? "current" : "next"; const stepState: StepperStepState = isDisabled ? "disabled" : error ? "error" : isActive ? "active" : completed ? "completed" : "inactive"; const renderDefaultTrigger = defaultTrigger; const isLastStep = index >= 0 && index === steps.length - 1; const shouldRenderSeparator = isInsideStepperList && separator && !isLastStep; const separatorTransitionDelay = getStepTransitionDelay({ from: transitionFromIndex, index, to: transitionToIndex, }); const itemStyle = { ...style, "--stepper-separator-delay": `${separatorTransitionDelay}ms`, } as React.CSSProperties; React.useLayoutEffect(() => { if (!isInsideStepperList || isExplicitMode) { return; } registerStep({ id: registrationId, value, disabled, }); return () => unregisterStep(registrationId); }, [ disabled, isExplicitMode, isInsideStepperList, registerStep, registrationId, unregisterStep, value, ]); React.useEffect(() => { if (!isDevelopment || isInsideStepperList) { return; } const timeout = window.setTimeout(() => { warnDev( `StepperItem with value "${value}" must be rendered inside StepperList to participate in step order.` ); }, 0); return () => window.clearTimeout(timeout); }, [isInsideStepperList, value]); React.useEffect(() => { if ( !isDevelopment || !isInsideStepperList || index >= 0 ) { return; } const timeout = window.setTimeout(() => { warnDev( `StepperItem with value "${value}" could not be found in the Stepper order. Check that it is rendered inside StepperList. For dynamic or conditional step order, pass an explicit steps prop to Stepper.` ); }, 0); return () => window.clearTimeout(timeout); }, [index, isInsideStepperList, value]); const itemContext = React.useMemo( () => ({ value, index, disabled: isDisabled, completed, isActive, stepState, stepPosition, orientation, setValue, triggerId: getTriggerId(value), contentId: getContentId(value), }), [ value, index, isDisabled, completed, isActive, stepState, stepPosition, orientation, setValue, getTriggerId, getContentId, ] ); return (

{renderDefaultTrigger ? ( <> {children} {shouldRenderSeparator ? : null} ) : ( <> {children} {shouldRenderSeparator ? : null} )}

); } // ---------------------------------------------------------------------------- // Trigger // ---------------------------------------------------------------------------- function StepperTrigger({ asChild = false, className, children, disabled, onClick, onKeyDown, tabIndex, ...props }: StepperTriggerProps) { const { value, disabled: itemDisabled, isActive, stepState, orientation, setValue, triggerId, contentId, } = useStepperItemContext("StepperTrigger"); const { steps, getTriggerId } = useStepperContext("StepperTrigger"); const isDisabled = itemDisabled || disabled; const Comp = asChild ? Slot : "button"; return ( ) => { onClick?.(event); if (isDisabled) { event.preventDefault(); return; } if (!event.defaultPrevented) { setValue(value); } }} onKeyDown={(event: React.KeyboardEvent) => { onKeyDown?.(event); if (event.defaultPrevented || isDisabled) { return; } const targetStepValue = getKeyboardNavigationStepValue({ key: event.key, orientation, steps, value, }); if (!targetStepValue || targetStepValue === value) { return; } const targetTrigger = document.getElementById( getTriggerId(targetStepValue) ); if (targetTrigger instanceof HTMLElement) { event.preventDefault(); targetTrigger.focus(); } }} {...props} > {children} ); } function StepperIndicator({ className, children, ...props }: StepperIndicatorProps) { const { index, stepState } = useStepperItemContext("StepperIndicator"); const stepNumber = index >= 0 ? index + 1 : undefined; const content = children !== undefined ? children : stepState === "error" ? "!" : stepState === "completed" ? "\u2713" : stepNumber ? stepNumber : null; return ( <> {stepNumber ? ( Step {stepNumber}: ) : null} ); } function StepperLabel({ className, ...props }: StepperLabelProps) { const { orientation } = useStepperItemContext("StepperLabel"); return ( ); } function StepperDescription({ className, ...props }: StepperDescriptionProps) { const { orientation } = useStepperItemContext("StepperDescription"); return ( ); } function StepperSeparator({ className, ...props }: StepperSeparatorProps) { const { orientation } = useStepperItemContext("StepperSeparator"); return ( ); } // ---------------------------------------------------------------------------- // Content // ---------------------------------------------------------------------------- function StepperContent({ value, forceMount = false, keepMounted = false, asChild = false, className, children, ...props }: StepperContentProps) { const { value: currentValue, steps, getTriggerId, getContentId, } = useStepperContext("StepperContent"); const isActive = currentValue === value; const hasMatchingStep = steps.some((step) => step.value === value); const shouldKeepMounted = forceMount || keepMounted; React.useEffect(() => { if (!isDevelopment || hasMatchingStep) { return; } const timeout = window.setTimeout(() => { warnDev( `StepperContent value "${value}" does not match any StepperItem. Content values should map to a step value.` ); }, 0); return () => window.clearTimeout(timeout); }, [hasMatchingStep, value]); if (!shouldKeepMounted && !isActive) { return null; } const Comp = asChild ? Slot : "div"; return ( ); } // ---------------------------------------------------------------------------- // Navigation // ---------------------------------------------------------------------------- function StepperPrevious({ asChild = false, className, children = "Previous", disabled, onBeforePrevious, onClick, tabIndex, ...props }: StepperPreviousProps) { const { canGoPrevious, goPrevious } = useStepperContext("StepperPrevious"); const { handleClick, isDisabled } = useNavigationButton({ canNavigate: canGoPrevious, disabled, navigate: goPrevious, onBeforeNavigate: onBeforePrevious, }); const Comp = asChild ? Slot : "button"; return ( svg]:size-4 [&>svg]:shrink-0", className ) } onClick={(event: React.MouseEvent) => handleClick(event, onClick) } {...props} > {children} ); } function StepperNext({ asChild = false, className, children = "Next", disabled, onBeforeNext, onClick, tabIndex, ...props }: StepperNextProps) { const { canGoNext, goNext } = useStepperContext("StepperNext"); const { handleClick, isDisabled } = useNavigationButton({ canNavigate: canGoNext, disabled, navigate: goNext, onBeforeNavigate: onBeforeNext, }); const Comp = asChild ? Slot : "button"; return ( svg]:size-4 [&>svg]:shrink-0", className ) } onClick={(event: React.MouseEvent) => handleClick(event, onClick) } {...props} > {children} ); } // ---------------------------------------------------------------------------- // Exports // ---------------------------------------------------------------------------- setDisplayName(Stepper, "Stepper"); setDisplayName(StepperList, "StepperList"); setDisplayName(StepperItem, "StepperItem"); setDisplayName(StepperTrigger, "StepperTrigger"); setDisplayName(StepperIndicator, "StepperIndicator"); setDisplayName(StepperLabel, "StepperLabel"); setDisplayName(StepperDescription, "StepperDescription"); setDisplayName(StepperSeparator, "StepperSeparator"); setDisplayName(StepperContent, "StepperContent"); setDisplayName(StepperPrevious, "StepperPrevious"); setDisplayName(StepperNext, "StepperNext"); export { Stepper, StepperContent, StepperDescription, StepperIndicator, StepperItem, StepperLabel, StepperList, StepperNext, StepperPrevious, StepperSeparator, StepperTrigger, useStepper, useStepperItem, }; export type { StepperApi, StepperButtonProps, StepperContentProps, StepperDescriptionProps, StepperIndicatorProps, StepperItemApi, StepperItemProps, StepperLabelProps, StepperListProps, StepperNavigationGuard, StepperNextProps, StepperOrientation, StepperPreviousProps, StepperProps, StepperSeparatorProps, StepperStep, StepperStepInput, StepperStepPosition, StepperStepState, StepperStepsValue, StepperTriggerProps, StepperValue, }; 53:T8b6b,"use client"; import * as React from "react"; import { ArrowRight, BookOpen, BriefcaseBusiness, Check, Circle, CircleHelp, Home, ImagePlus, KeyRound, Laptop, ListChecks, LoaderCircle, Mail, Monitor, Plane, School, Sparkles, SquareCheckBig, UsersRound, type LucideIcon, } from "lucide-react"; import { useForm, useWatch, type FieldPath, type UseFormRegisterReturn, } from "react-hook-form"; import { SiGoogle } from "react-icons/si"; import { z } from "zod/v3"; import { StepperLogo } from "@/components/stepper-logo"; import { Button } from "@/components/ui/button"; import { Checkbox } from "@/components/ui/checkbox"; import { Field, FieldDescription, FieldError, FieldLabel, } from "@/components/ui/field"; import { Input } from "@/components/ui/input"; import { Separator } from "@/components/ui/separator"; import { Stepper, StepperContent, StepperItem, StepperList, } from "@/components/ui/stepper"; import { cn } from "@/lib/utils"; const emailStepSchema = z.object({ email: z.string().trim().email("Enter a valid work email."), }); const verificationStepSchema = z.object({ code: z .string() .trim() .regex(/^\d{6}$/, "Enter the 6-digit verification code."), }); const profileStepSchema = z.object({ name: z.string().trim().min(2, "Enter your name."), password: z.string().min(8, "Use at least 8 characters."), }); const intentStepSchema = z.object({ intent: z.enum(["work", "personal", "school"], { required_error: "Choose what you are setting up.", }), }); const collaborationStepSchema = z.object({ collaboration: z.enum(["with-others", "on-my-own"], { required_error: "Choose a collaboration mode.", }), }); const onboardingStepValues = [ "account", "verify", "profile", "intent", "collaboration", "interests", "generating", "workspace", ] as const; type OnboardingStep = (typeof onboardingStepValues)[number]; type IntentValue = z.infer["intent"]; type CollaborationValue = z.infer< typeof collaborationStepSchema >["collaboration"]; type InterestValue = | "career" | "books" | "todo" | "site" | "travel" | "projects" | "finance" | "food" | "hobbies" | "habits"; type IntentOnboardingValues = { email: string; code: string; name: string; password: string; intent?: IntentValue; collaboration?: CollaborationValue; interests: InterestValue[]; marketingOptOut: boolean; }; type StepDefinition = { value: OnboardingStep; label: string; }; const onboardingSteps = [ { value: "account", label: "Create account" }, { value: "verify", label: "Verify email" }, { value: "profile", label: "Create profile" }, { value: "intent", label: "Choose intent" }, { value: "collaboration", label: "Choose collaboration" }, { value: "interests", label: "Choose interests" }, { value: "generating", label: "Prepare setup" }, { value: "workspace", label: "Signed in" }, ] satisfies StepDefinition[]; const intentOptions = [ { value: "work", title: "For work", description: "Track projects, goals, and meeting notes", icon: BriefcaseBusiness, }, { value: "personal", title: "For personal life", description: "Write better, think more clearly, stay organized", icon: Home, }, { value: "school", title: "For school", description: "Keep notes, research, and tasks in one place", icon: School, }, ] satisfies Array<{ value: IntentValue; title: string; description: string; icon: LucideIcon; }>; const collaborationOptions = [ { value: "with-others", title: "With others", description: "Plan travel, household chores, group activities", icon: UsersRound, }, { value: "on-my-own", title: "On my own", description: "Manage expenses, track hobbies, stay organized", icon: CircleHelp, }, ] satisfies Array<{ value: CollaborationValue; title: string; description: string; icon: LucideIcon; }>; const interestOptions = [ { value: "career", label: "Career building", icon: BriefcaseBusiness }, { value: "books", label: "Books and media", icon: Monitor }, { value: "todo", label: "To-do list", icon: ListChecks }, { value: "site", label: "Site or blog", icon: Laptop }, { value: "travel", label: "Travel", icon: Plane }, { value: "projects", label: "Project tracking", icon: SquareCheckBig }, { value: "finance", label: "Personal finance", icon: Circle }, { value: "food", label: "Food and nutrition", icon: Home }, { value: "hobbies", label: "Hobbies", icon: BookOpen }, { value: "habits", label: "Habit tracking", icon: Check }, ] satisfies Array<{ value: InterestValue; label: string; icon: LucideIcon; }>; const stepFields = { account: ["email"], verify: ["code"], profile: ["name", "password"], intent: ["intent"], collaboration: ["collaboration"], interests: [], generating: [], workspace: [], } satisfies Record[]>; function StepperIntentOnboardingExample() { const [step, setStep] = React.useState("account"); const [completedSteps, setCompletedSteps] = React.useState< Partial> >({}); const [isGenerating, setIsGenerating] = React.useState(false); const generationTimeoutRef = React.useRef(null); const form = useForm({ mode: "onChange", defaultValues: { email: "", code: "", name: "", password: "", intent: undefined, collaboration: undefined, interests: [], marketingOptOut: false, }, }); const watchedValues = useWatch({ control: form.control }); const values = React.useMemo( () => ({ email: watchedValues.email ?? "", code: watchedValues.code ?? "", name: watchedValues.name ?? "", password: watchedValues.password ?? "", intent: watchedValues.intent, collaboration: watchedValues.collaboration, interests: watchedValues.interests ?? [], marketingOptOut: watchedValues.marketingOptOut ?? false, }), [ watchedValues.code, watchedValues.collaboration, watchedValues.email, watchedValues.intent, watchedValues.interests, watchedValues.marketingOptOut, watchedValues.name, watchedValues.password, ] ); const currentIndex = getVisibleStepIndex(step, values); const totalVisibleSteps = getVisibleSteps(values).length; const progress = Math.round(((currentIndex + 1) / totalVisibleSteps) * 100); React.useEffect(() => { return () => { if (generationTimeoutRef.current) { window.clearTimeout(generationTimeoutRef.current); } }; }, []); async function continueFromStep() { const isValid = validateCurrentStep(step, form); if (!isValid) { return; } setCompletedSteps((current) => ({ ...current, [step]: true })); if (step === "interests") { startGeneration(); return; } const nextStep = getNextStep(step, values); if (nextStep) { setStep(nextStep); } } function continueWithProvider(provider: string) { const providerEmail = provider === "Google" ? "alex.smith@example.com" : "alex@example.com"; form.clearErrors(["email", "code"]); form.setValue("email", providerEmail, { shouldDirty: true, shouldTouch: true, shouldValidate: true, }); setCompletedSteps((current) => ({ ...current, account: true, verify: true, })); setStep("profile"); } function resetFlow() { if (generationTimeoutRef.current) { window.clearTimeout(generationTimeoutRef.current); generationTimeoutRef.current = null; } setIsGenerating(false); setCompletedSteps({}); form.reset(); setStep("account"); } function selectIntent(intent: IntentValue) { form.clearErrors("intent"); form.setValue("intent", intent, { shouldDirty: true, shouldTouch: true, shouldValidate: true, }); setCompletedSteps((current) => ({ ...current, intent: false, collaboration: false, })); } function selectCollaboration(collaboration: CollaborationValue) { form.clearErrors("collaboration"); form.setValue("collaboration", collaboration, { shouldDirty: true, shouldTouch: true, shouldValidate: true, }); } function toggleInterest(interest: InterestValue) { const currentInterests = values.interests; const nextInterests = currentInterests.includes(interest) ? currentInterests.filter((item) => item !== interest) : [...currentInterests, interest]; form.setValue("interests", nextInterests, { shouldDirty: true, shouldTouch: true, }); } function skipInterests() { form.setValue("interests", [], { shouldDirty: true, shouldTouch: true, }); setCompletedSteps((current) => ({ ...current, interests: true })); startGeneration(); } function startGeneration() { setIsGenerating(true); setStep("generating"); if (generationTimeoutRef.current) { window.clearTimeout(generationTimeoutRef.current); } generationTimeoutRef.current = window.setTimeout(() => { setIsGenerating(false); setCompletedSteps((current) => ({ ...current, interests: true, generating: true, workspace: true, })); setStep("workspace"); }, 700); } return ( setStep(nextStep as OnboardingStep)} className="min-w-0 gap-0 overflow-hidden rounded-xl border border-border bg-background text-foreground shadow-sm" >

form.clearErrors("email"), })} onContinue={() => void continueFromStep()} onGoogle={() => continueWithProvider("Google")} /> form.clearErrors("code"), })} onContinue={() => void continueFromStep()} /> form.clearErrors("name"), })} registerPassword={form.register("password", { onChange: () => form.clearErrors("password"), })} marketingOptOut={values.marketingOptOut} onMarketingChange={(checked) => form.setValue("marketingOptOut", checked, { shouldDirty: true, shouldTouch: true, }) } onContinue={() => void continueFromStep()} /> void continueFromStep()} /> void continueFromStep()} /> void continueFromStep()} onSkip={skipInterests} />

); } function HiddenStepList({ completedSteps, values, }: { completedSteps: Partial>; values: IntentOnboardingValues; }) { return ( {onboardingSteps.map((item) => ( {item.label} ))} ); } function CenteredStage({ children }: { children: React.ReactNode }) { return (

{children}

); } function AuthPanel({ email, error, registerEmail, onContinue, onGoogle, }: { email: string; error?: string; registerEmail: UseFormRegisterReturn<"email">; onContinue: () => void; onGoogle: () => void; }) { return (

Work email

{email ? ( ) : ( )}

{error ? ( {error} ) : ( Use an organization email to easily collaborate with teammates. )} Continue

By continuing, you acknowledge that you understand and agree to the{" "} Terms & Conditions {" "} and{" "} Privacy Policy .

); } function VerifyPanel({ email, error, registerCode, onContinue, }: { email: string; error?: string; registerCode: UseFormRegisterReturn<"code">; onContinue: () => void; }) { return (

We sent a verification code to{" "} {email}.

Verification code {error ? ( {error} ) : ( Use 123456 for this demo. )} Continue

Resend in 25s

); } function ProfilePanel({ values, errors, registerName, registerPassword, marketingOptOut, onMarketingChange, onContinue, }: { values: IntentOnboardingValues; errors: { name?: string; password?: string }; registerName: UseFormRegisterReturn<"name">; registerPassword: UseFormRegisterReturn<"password">; marketingOptOut: boolean; onMarketingChange: (checked: boolean) => void; onContinue: () => void; }) { return (

{getInitials(values.name || values.email)}

Enter your name {errors.name ? {errors.name} : null} Set a password

{errors.password ? ( {errors.password} ) : null}

Continue onMarketingChange(checked === true)} className="mt-0.5 border-border" /> No, I do not want to receive marketing communications.

); } function IntentPanel({ value, error, onSelect, onContinue, }: { value?: IntentValue; error?: string; onSelect: (value: IntentValue) => void; onContinue: () => void; }) { return (

{intentOptions.map((option) => ( onSelect(option.value)} /> ))}

{error ? (

{error}

) : null} Continue

); } function CollaborationPanel({ value, error, onSelect, onContinue, }: { value?: CollaborationValue; error?: string; onSelect: (value: CollaborationValue) => void; onContinue: () => void; }) { return (

{collaborationOptions.map((option) => ( onSelect(option.value)} /> ))}

{error ? (

{error}

) : null} Continue

); } function InterestsPanel({ selectedInterests, onToggleInterest, onContinue, onSkip, }: { selectedInterests: InterestValue[]; onToggleInterest: (value: InterestValue) => void; onContinue: () => void; onSkip: () => void; }) { return (

{selectedInterests.length} selected

{interestOptions.map((option) => ( onToggleInterest(option.value)} /> ))}

Continue

); } function GeneratingPanel({ values, isGenerating, }: { values: IntentOnboardingValues; isGenerating: boolean; }) { const items = [ "Choosing starter pages", "Mapping your interests", "Preparing a completion checklist", ]; return (

Preparing your setup

{values.intent ? `Tuned for ${getIntentLabel(values.intent).toLowerCase()}.` : "Tuned for your workflow."}

{items.map((item, index) => (

{index === items.length - 1 && isGenerating ? ( ) : ( )} {item}

))}

); } function SignedInPanel({ values, onRestart, }: { values: IntentOnboardingValues; onRestart: () => void; }) { const selectedLabels = values.interests .map( (interest) => interestOptions.find((item) => item.value === interest)?.label ) .filter(Boolean) .slice(0, 2); return (

You're signed in

Stepper completed the account, intent, and optional setup path {values.email ? ` for ${values.email}` : ""}.

0 ? `Prepared ${selectedLabels.join(" and ")}` : "Skipped optional goals" } />

Run again

); } function StageHeading({ title, description, align = "left", logo = false, }: { title: string; description: string; align?: "left" | "center"; logo?: boolean; }) { return (

{logo ? : null}

{title}

{description}

); } function OnboardingLogo({ className }: { className?: string }) { return ; } function ProviderButton({ onClick }: { onClick: () => void }) { return ( ); } function PrimaryAction({ children, className, onClick, }: { children: React.ReactNode; className?: string; onClick: () => void; }) { return ( ); } function LargeOptionButton({ active, icon: Icon, title, description, onClick, }: { active: boolean; icon: LucideIcon; title: string; description: string; onClick: () => void; }) { return ( ); } function TileOptionButton({ active, icon: Icon, title, description, onClick, }: { active: boolean; icon: LucideIcon; title: string; description: string; onClick: () => void; }) { return ( ); } function InterestChip({ option, active, onClick, }: { option: (typeof interestOptions)[number]; active: boolean; onClick: () => void; }) { const Icon = option.icon; return ( ); } function ChecklistRow({ checked, text }: { checked?: boolean; text: string }) { return (

{checked ? : null} {text}

); } function validateCurrentStep( step: OnboardingStep, form: ReturnType> ) { const values = form.getValues(); const schema = getStepSchema(step); form.clearErrors(stepFields[step]); if (!schema) { return true; } const result = schema.safeParse(values); if (result.success) { return true; } result.error.issues.forEach((issue) => { const field = issue.path[0] as FieldPath; form.setError(field, { message: issue.message, type: "manual" }); }); const firstIssue = result.error.issues[0]; if (firstIssue) { const firstField = firstIssue.path[0] as FieldPath; form.setFocus(firstField); } return false; } function getStepSchema(step: OnboardingStep) { if (step === "account") return emailStepSchema; if (step === "verify") return verificationStepSchema; if (step === "profile") return profileStepSchema; if (step === "intent") return intentStepSchema; if (step === "collaboration") return collaborationStepSchema; return undefined; } function getVisibleSteps(values: IntentOnboardingValues) { return onboardingStepValues.filter((step) => !isStepSkipped(step, values)); } function getVisibleStepIndex(step: OnboardingStep, values: IntentOnboardingValues) { const visibleSteps = getVisibleSteps(values); const index = visibleSteps.indexOf(step); return index === -1 ? 0 : index; } function getNextStep(step: OnboardingStep, values: IntentOnboardingValues) { const visibleSteps = getVisibleSteps(values); const currentIndex = visibleSteps.indexOf(step); return visibleSteps[currentIndex + 1]; } function isStepSkipped(step: OnboardingStep, values: IntentOnboardingValues) { return step === "collaboration" && values.intent !== "personal"; } function getInitials(value: string) { const normalized = value.trim(); if (!normalized) { return "A"; } return normalized .split(/[\s@.]+/) .filter(Boolean) .slice(0, 2) .map((part) => part[0]?.toUpperCase()) .join(""); } function getIntentLabel(intent: IntentValue) { return intentOptions.find((option) => option.value === intent)?.title ?? intent; } function getIntentSummary(values: IntentOnboardingValues) { if (!values.intent) { return "Intent captured"; } const label = getIntentLabel(values.intent).replace(/^For /, ""); return `Intent set for ${label.toLowerCase()}`; } export { StepperIntentOnboardingExample }; 54:Tef6,import type { SVGProps } from "react"; function StepperLogo(props: SVGProps) { return ( ); } export { StepperLogo }; 4b:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","@radix-ui/react-slot",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-slot","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"@radix-ui/react-slot"}]]}]}],["$","li","lucide-react",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","react-icons",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/react-icons","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"react-icons"}]]}]}],["$","li","react-hook-form",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/react-hook-form","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"react-hook-form"}]]}]}],["$","li","zod",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/zod","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"zod"}]]}]}]]}],["$","$L4f",null,{"registryDependencies":["button","checkbox","field","input","separator"]}]]}],["$","$L50",null,{"sourceUrl":"https://francozeta-stepper.vercel.app/stepper-intent-onboarding.json","proxyUrl":"https://shadcnregistry.com/r/stepper/stepper-intent-onboarding","itemId":"@stepper/stepper-intent-onboarding"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L51",null,{"files":[{"path":"registry/default/ui/stepper.tsx","content":"$52","type":"registry:ui","target":"@ui/stepper.tsx"},{"path":"registry/default/examples/stepper-intent-onboarding.tsx","content":"$53","type":"registry:component","target":"@components/stepper-intent-onboarding.tsx"},{"path":"registry/default/components/stepper-logo.tsx","content":"$54","type":"registry:component","target":"@components/stepper-logo.tsx"}]}]]}],"$L55"]}]

Stepper Intent Onboarding

Installation

Files

@ui

@components

Styles