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:T1075,import { useCallback, useState, type ChangeEvent, type FocusEvent, type FormEvent, } from "react"; export type FormErrors = Partial>; export type FormTouched = Partial>; export type UseFormOptions> = { initialValues: T; /** Return an error message per invalid field. Empty object means valid. */ validate?: (values: T) => FormErrors; /** Called with the values when a submit passes validation. */ onSubmit?: (values: T) => void | Promise; }; export type UseFormReturn> = { values: T; /** Validation errors (all fields). Show them alongside `touched` for a calmer UX. */ errors: FormErrors; touched: FormTouched; isValid: boolean; isSubmitting: boolean; /** onChange handler for inputs, selects and textareas; reads `name` and `value`/`checked`. */ handleChange: ( event: ChangeEvent< HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement >, ) => void; /** onBlur handler that marks the field as touched. */ handleBlur: ( event: FocusEvent< HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement >, ) => void; /** onSubmit handler: prevents default, touches every field, validates, then calls `onSubmit`. */ handleSubmit: (event?: FormEvent) => Promise; /** Set one field programmatically. */ setFieldValue: (field: K, value: T[K]) => void; /** Restore `initialValues` (or the given values) and clear touched state. */ reset: (values?: T) => void; }; /** * Lightweight form state: typed values, derived validation errors, touched tracking and submit handling. * * @example * const form = useForm({ * initialValues: { email: "" }, * validate: (v) => (v.email.includes("@") ? {} : { email: "Enter a valid email" }), * onSubmit: (v) => console.log(v), * }); * */ export function useForm>({ initialValues, validate, onSubmit, }: UseFormOptions): UseFormReturn { const [values, setValues] = useState(initialValues); const [touched, setTouched] = useState>({}); const [isSubmitting, setIsSubmitting] = useState(false); // Captured once: later changes to the `initialValues` argument don't reset the form. const [initial] = useState(initialValues); // Errors are derived from values on every render, so they can never go stale. const errors: FormErrors = validate ? validate(values) : {}; const isValid = Object.values(errors).every((e) => !e); const handleChange = useCallback["handleChange"]>( (event) => { const target = event.target; const value = target instanceof HTMLInputElement && target.type === "checkbox" ? target.checked : target instanceof HTMLInputElement && target.type === "number" ? target.valueAsNumber : target.value; setValues((prev) => ({ ...prev, [target.name]: value })); }, [], ); const handleBlur = useCallback["handleBlur"]>((event) => { const name = event.target.name; setTouched((prev) => ({ ...prev, [name]: true })); }, []); const setFieldValue = useCallback( (field: K, value: T[K]) => setValues((prev) => ({ ...prev, [field]: value })), [], ); const handleSubmit = async (event?: FormEvent) => { event?.preventDefault(); setTouched( Object.keys(values).reduce>( (acc, key) => ({ ...acc, [key]: true }), {}, ), ); if (!isValid || !onSubmit) return; setIsSubmitting(true); try { await onSubmit(values); } finally { setIsSubmitting(false); } }; const reset = useCallback( (next?: T) => { setValues(next ?? initial); setTouched({}); }, [initial], ); return { values, errors, touched, isValid, isSubmitting, handleChange, handleBlur, handleSubmit, setFieldValue, reset, }; } 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/registry/hooks/use-form.ts","content":"$4f","type":"registry:hook"}],"className":"h-[70svh] min-h-80"}]]}]