52:I[707087,["/_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"],"RegistryDependencies"] 53: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"] 54:T11ab,/* eslint-disable react-refresh/only-export-components */ import * as React from 'react' /** * Multi-step form: a dependency-free form-state layer designed to sit on top of * the UI. It owns values, per-field errors, touched state, and the * active step, and gates forward navigation on the current step's validator. * Stepper renders the indicator; this drives its `activeStep`. */ export type StepValidator = (values: V) => Record | null export interface MultiStepFormStep { id: string validate?: StepValidator } interface MultiStepFormContextValue { values: V setValue: (name: K, value: V[K]) => void errors: Record touched: Record activeStep: number next: () => void back: () => void goTo: (step: number) => void canGoNext: boolean isStepValid: boolean isFirstStep: boolean isLastStep: boolean submit: () => void } // One context object reused for every value type; consumers read it through the // typed useMultiStepForm() hook below. const MultiStepFormContext = React.createContext | null>(null) export interface MultiStepFormProps { steps: MultiStepFormStep[] initialValues: V onSubmit: (values: V) => void children: React.ReactNode } export function MultiStepForm({ steps, initialValues, onSubmit, children, }: MultiStepFormProps) { const [values, setValues] = React.useState(initialValues) const [errors, setErrors] = React.useState>({}) const [touched, setTouched] = React.useState>({}) const [activeStep, setActiveStep] = React.useState(0) const totalSteps = steps.length const isFirstStep = activeStep === 0 const isLastStep = activeStep === totalSteps - 1 const setValue = React.useCallback((name: K, value: V[K]) => { setValues((prev) => ({ ...prev, [name]: value })) setTouched((prev) => ({ ...prev, [name as string]: true })) setErrors((prev) => { if (!(name as string in prev)) return prev const next = { ...prev } delete next[name as string] return next }) }, []) // Validate the current step against the latest values. Returns true when the // step has no validator or the validator returns null; otherwise publishes // the errors and returns false. const validateStep = React.useCallback( (step: number): boolean => { const validator = steps[step]?.validate if (!validator) { setErrors({}) return true } const result = validator(values) setErrors(result ?? {}) return result === null }, [steps, values] ) const isStepValid = React.useMemo(() => { const validator = steps[activeStep]?.validate return validator ? validator(values) === null : true }, [steps, activeStep, values]) const goTo = React.useCallback( (step: number) => { if (step < 0 || step >= totalSteps) return // Backward navigation is unguarded; forward runs the current validator. if (step > activeStep) { if (!validateStep(activeStep)) return } else { setErrors({}) } setActiveStep(step) }, [activeStep, totalSteps, validateStep] ) const next = React.useCallback(() => { if (isLastStep) return if (!validateStep(activeStep)) return setActiveStep((s) => Math.min(s + 1, totalSteps - 1)) }, [activeStep, isLastStep, totalSteps, validateStep]) const back = React.useCallback(() => { setErrors({}) setActiveStep((s) => Math.max(s - 1, 0)) }, []) const submit = React.useCallback(() => { if (!isLastStep) return if (!validateStep(activeStep)) return onSubmit(values) }, [activeStep, isLastStep, onSubmit, validateStep, values]) const ctx: MultiStepFormContextValue = { values, setValue, errors, touched, activeStep, next, back, goTo, canGoNext: isStepValid && !isLastStep, isStepValid, isFirstStep, isLastStep, submit, } return ( }> {children} ) } export function useMultiStepForm(): MultiStepFormContextValue { const ctx = React.useContext(MultiStepFormContext) if (!ctx) { throw new Error('useMultiStepForm must be used within a ') } return ctx as MultiStepFormContextValue } 51:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L52",null,{"namespace":"@boldkit","registryDependencies":["@boldkit/utils","stepper","button","input","label"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/default/ui/multi-step-form.tsx","content":"$54","type":"registry:ui","target":"components/ui/multi-step-form.tsx"}],"className":"h-[70svh] min-h-80"}]]}]