4e:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 4f:T1a00,import { Slot } from '@radix-ui/react-slot' import { CheckIcon, LoaderCircleIcon } from 'lucide-react' import * as React from 'react' import { createContext, useContext } from 'react' import { cn } from '@/lib/utils' // Types type StepperContextValue = { activeStep: number setActiveStep: (step: number) => void orientation: 'horizontal' | 'vertical' } type StepItemContextValue = { step: number state: StepState isDisabled: boolean isLoading: boolean } type StepState = 'active' | 'completed' | 'inactive' | 'loading' // Contexts const StepperContext = createContext(undefined) const StepItemContext = createContext( undefined, ) const useStepper = () => { const context = useContext(StepperContext) if (!context) { throw new Error('useStepper must be used within a Stepper') } return context } const useStepItem = () => { const context = useContext(StepItemContext) if (!context) { throw new Error('useStepItem must be used within a StepperItem') } return context } // Components interface StepperProps extends React.HTMLAttributes { defaultValue?: number value?: number onValueChange?: (value: number) => void orientation?: 'horizontal' | 'vertical' } function Stepper({ defaultValue = 0, value, onValueChange, orientation = 'horizontal', className, ...props }: StepperProps) { const [activeStep, setInternalStep] = React.useState(defaultValue) const setActiveStep = React.useCallback( (step: number) => { if (value === undefined) { setInternalStep(step) } onValueChange?.(step) }, [value, onValueChange], ) const currentStep = value ?? activeStep return (

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

{children}

) } // StepperTrigger interface StepperTriggerProps extends React.ButtonHTMLAttributes { asChild?: boolean } function StepperTrigger({ asChild = false, className, children, ...props }: StepperTriggerProps) { const { setActiveStep } = useStepper() const { step, isDisabled } = useStepItem() if (asChild) { const Comp = asChild ? Slot : 'span' return ( {children} ) } return ( ) } // StepperIndicator interface StepperIndicatorProps extends React.HTMLAttributes { asChild?: boolean } function StepperIndicator({ asChild = false, className, children, ...props }: StepperIndicatorProps) { const { state, step, isLoading } = useStepItem() return ( {asChild ? ( children ) : ( <> {step} ) } // StepperTitle function StepperTitle({ className, ...props }: React.HTMLAttributes) { return (

) } // StepperDescription function StepperDescription({ className, ...props }: React.HTMLAttributes) { return (
) } // StepperSeparator function StepperSeparator({ className, ...props }: React.HTMLAttributes) { return (
) } export { Stepper, StepperDescription, StepperIndicator, StepperItem, StepperSeparator, StepperTitle, StepperTrigger, } 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L4e",null,{"files":[{"path":"src/components/ui/stepper.tsx","content":"$4f","type":"registry:component","target":"components/ui/stepper.tsx"}],"className":"h-[70svh] min-h-80"}]]}]