@pyreon/form 0.9.0 → 0.11.0

package/src/types.ts

@@ -1,4 +1,4 @@
-import type { Computed, Signal } from '@pyreon/reactivity'
+import type { Computed, Signal } from "@pyreon/reactivity"
 
 export type ValidationError = string | undefined
 
@@ -85,7 +85,7 @@ export interface FormState<TValues extends Record<string, unknown>> {
    */
   register: <K extends keyof TValues & string>(
     field: K,
-    options?: { type?: 'checkbox' | 'number' },
+    options?: { type?: "checkbox" | "number" },
   ) => FieldRegisterProps<TValues[K]>
   /**
    * Submit handler — runs validation, then calls onSubmit if valid.
@@ -110,7 +110,7 @@ export interface UseFormOptions<TValues extends Record<string, unknown>> {
   /** Schema-level validator (runs after field validators). */
   schema?: SchemaValidateFn<TValues>
   /** When to validate: 'blur' (default), 'change', or 'submit'. */
-  validateOn?: 'blur' | 'change' | 'submit'
+  validateOn?: "blur" | "change" | "submit"
   /** Debounce delay in ms for validators (useful for async validators). */
   debounceMs?: number
 }

package/src/use-field-array.ts

@@ -1,5 +1,5 @@
-import type { Computed, Signal } from '@pyreon/reactivity'
-import { computed, signal } from '@pyreon/reactivity'
+import type { Computed, Signal } from "@pyreon/reactivity"
+import { computed, signal } from "@pyreon/reactivity"
 
 export interface FieldArrayItem<T> {
   /** Stable key for keyed rendering. */

package/src/use-field.ts

@@ -1,11 +1,6 @@
-import type { Computed, Signal } from '@pyreon/reactivity'
-import { computed } from '@pyreon/reactivity'
-import type {
-  FieldRegisterProps,
-  FieldState,
-  FormState,
-  ValidationError,
-} from './types'
+import type { Computed, Signal } from "@pyreon/reactivity"
+import { computed } from "@pyreon/reactivity"
+import type { FieldRegisterProps, FieldState, FormState, ValidationError } from "./types"
 
 export interface UseFieldResult<T> {
   /** Current field value (reactive signal). */
@@ -23,7 +18,7 @@ export interface UseFieldResult<T> {
   /** Reset the field to its initial value. */
   reset: () => void
   /** Register props for input binding. */
-  register: (opts?: { type?: 'checkbox' }) => FieldRegisterProps<T>
+  register: (opts?: { type?: "checkbox" }) => FieldRegisterProps<T>
   /** Whether the field has an error (computed). */
   hasError: Computed<boolean>
   /** Whether the field should show its error (touched + has error). */
@@ -45,10 +40,10 @@ export interface UseFieldResult<T> {
  *   )
  * }
  */
-export function useField<
-  TValues extends Record<string, unknown>,
-  K extends keyof TValues & string,
->(form: FormState<TValues>, name: K): UseFieldResult<TValues[K]> {
+export function useField<TValues extends Record<string, unknown>, K extends keyof TValues & string>(
+  form: FormState<TValues>,
+  name: K,
+): UseFieldResult<TValues[K]> {
   const fieldState: FieldState<TValues[K]> = form.fields[name]
 
   const hasError = computed(() => fieldState.error() !== undefined)

package/src/use-form-state.ts

@@ -1,6 +1,6 @@
-import type { Computed } from '@pyreon/reactivity'
-import { computed } from '@pyreon/reactivity'
-import type { FormState, ValidationError } from './types'
+import type { Computed } from "@pyreon/reactivity"
+import { computed } from "@pyreon/reactivity"
+import type { FormState, ValidationError } from "./types"
 
 export interface FormStateSummary<TValues extends Record<string, unknown>> {
   isSubmitting: boolean

package/src/use-form.ts

@@ -1,13 +1,13 @@
-import { onUnmount } from '@pyreon/core'
-import type { Signal } from '@pyreon/reactivity'
-import { computed, effect, signal } from '@pyreon/reactivity'
+import { onUnmount } from "@pyreon/core"
+import type { Signal } from "@pyreon/reactivity"
+import { computed, effect, signal } from "@pyreon/reactivity"
 import type {
   FieldRegisterProps,
   FieldState,
   FormState,
   UseFormOptions,
   ValidationError,
-} from './types'
+} from "./types"
 
 /**
  * Create a signal-based form. Returns reactive field states, form-level
@@ -30,14 +30,7 @@ import type {
 export function useForm<TValues extends Record<string, unknown>>(
   options: UseFormOptions<TValues>,
 ): FormState<TValues> {
-  const {
-    initialValues,
-    onSubmit,
-    validators,
-    schema,
-    validateOn = 'blur',
-    debounceMs,
-  } = options
+  const { initialValues, onSubmit, validators, schema, validateOn = "blur", debounceMs } = options
 
   // Build field states
   const fieldEntries = Object.entries(initialValues) as [
@@ -48,9 +41,7 @@ export function useForm<TValues extends Record<string, unknown>>(
   const fields = {} as { [K in keyof TValues]: FieldState<TValues[K]> }
 
   // Debounce timers per field (only allocated when debounceMs is set)
-  const debounceTimers: Partial<
-    Record<keyof TValues, ReturnType<typeof setTimeout>>
-  > = {}
+  const debounceTimers: Partial<Record<keyof TValues, ReturnType<typeof setTimeout>>> = {}
 
   // Validation version per field — used to discard stale async results
   const validationVersions: Partial<Record<keyof TValues, number>> = {}
@@ -60,8 +51,7 @@ export function useForm<TValues extends Record<string, unknown>>(
     const values = {} as TValues
     for (const [name] of fieldEntries) {
       ;(values as Record<string, unknown>)[name] =
-        fields[name]?.value.peek() ??
-        (initialValues as Record<string, unknown>)[name]
+        fields[name]?.value.peek() ?? (initialValues as Record<string, unknown>)[name]
     }
     return values
   }
@@ -127,7 +117,7 @@ export function useForm<TValues extends Record<string, unknown>>(
       : runValidation
 
     // Auto-validate on change if configured
-    if (validateOn === 'change') {
+    if (validateOn === "change") {
       effect(() => {
         const v = valueSig()
         validateField(v)
@@ -146,7 +136,7 @@ export function useForm<TValues extends Record<string, unknown>>(
       },
       setTouched: () => {
         touchedSig.set(true)
-        if (validateOn === 'blur') {
+        if (validateOn === "blur") {
           validateField(valueSig.peek())
         }
       },
@@ -216,18 +206,13 @@ export function useForm<TValues extends Record<string, unknown>>(
             validationVersions[name] = (validationVersions[name] ?? 0) + 1
             const currentVersion = validationVersions[name]
             try {
-              const error = await fieldValidator(
-                fields[name].value.peek(),
-                allValues,
-              )
+              const error = await fieldValidator(fields[name].value.peek(), allValues)
               if (validationVersions[name] === currentVersion) {
                 fields[name].error.set(error)
               }
             } catch (err) {
               if (validationVersions[name] === currentVersion) {
-                fields[name].error.set(
-                  err instanceof Error ? err.message : String(err),
-                )
+                fields[name].error.set(err instanceof Error ? err.message : String(err))
               }
             }
           }
@@ -241,10 +226,7 @@ export function useForm<TValues extends Record<string, unknown>>(
           const schemaErrors = await schema(allValues)
           for (const [name] of fieldEntries) {
             const schemaError = schemaErrors[name]
-            if (
-              schemaError !== undefined &&
-              fields[name].error.peek() === undefined
-            ) {
+            if (schemaError !== undefined && fields[name].error.peek() === undefined) {
               fields[name].error.set(schemaError)
             }
           }
@@ -266,7 +248,7 @@ export function useForm<TValues extends Record<string, unknown>>(
   }
 
   const handleSubmit = async (e?: Event) => {
-    if (e && typeof e.preventDefault === 'function') {
+    if (e && typeof e.preventDefault === "function") {
       e.preventDefault()
     }
 
@@ -301,13 +283,10 @@ export function useForm<TValues extends Record<string, unknown>>(
     submitError.set(undefined)
   }
 
-  const setFieldValue = <K extends keyof TValues>(
-    field: K,
-    value: TValues[K],
-  ) => {
+  const setFieldValue = <K extends keyof TValues>(field: K, value: TValues[K]) => {
     if (!fields[field]) {
       throw new Error(
-        `[@pyreon/form] Field "${String(field)}" does not exist. Available fields: ${fieldEntries.map(([n]) => n).join(', ')}`,
+        `[@pyreon/form] Field "${String(field)}" does not exist. Available fields: ${fieldEntries.map(([n]) => n).join(", ")}`,
       )
     }
     fields[field].setValue(value)
@@ -316,15 +295,13 @@ export function useForm<TValues extends Record<string, unknown>>(
   const setFieldError = (field: keyof TValues, error: ValidationError) => {
     if (!fields[field]) {
       throw new Error(
-        `[@pyreon/form] Field "${String(field)}" does not exist. Available fields: ${fieldEntries.map(([n]) => n).join(', ')}`,
+        `[@pyreon/form] Field "${String(field)}" does not exist. Available fields: ${fieldEntries.map(([n]) => n).join(", ")}`,
       )
     }
     fields[field].error.set(error)
   }
 
-  const setErrors = (
-    errors: Partial<Record<keyof TValues, ValidationError>>,
-  ) => {
+  const setErrors = (errors: Partial<Record<keyof TValues, ValidationError>>) => {
     for (const [name, error] of Object.entries(errors)) {
       setFieldError(name as keyof TValues, error as ValidationError)
     }
@@ -347,9 +324,9 @@ export function useForm<TValues extends Record<string, unknown>>(
 
   const register = <K extends keyof TValues & string>(
     field: K,
-    opts?: { type?: 'checkbox' | 'number' },
+    opts?: { type?: "checkbox" | "number" },
   ): FieldRegisterProps<TValues[K]> => {
-    const cacheKey = `${field}:${opts?.type ?? 'text'}`
+    const cacheKey = `${field}:${opts?.type ?? "text"}`
     const cached = registerCache.get(cacheKey)
     if (cached) return cached as FieldRegisterProps<TValues[K]>
 
@@ -358,13 +335,11 @@ export function useForm<TValues extends Record<string, unknown>>(
       value: fieldState.value,
       onInput: (e: Event) => {
         const target = e.target as HTMLInputElement
-        if (opts?.type === 'checkbox') {
+        if (opts?.type === "checkbox") {
           fieldState.setValue(target.checked as TValues[K])
-        } else if (opts?.type === 'number') {
+        } else if (opts?.type === "number") {
           const num = target.valueAsNumber
-          fieldState.setValue(
-            (Number.isNaN(num) ? target.value : num) as TValues[K],
-          )
+          fieldState.setValue((Number.isNaN(num) ? target.value : num) as TValues[K])
         } else {
           fieldState.setValue(target.value as TValues[K])
         }
@@ -374,7 +349,7 @@ export function useForm<TValues extends Record<string, unknown>>(
       },
     }
 
-    if (opts?.type === 'checkbox') {
+    if (opts?.type === "checkbox") {
       props.checked = computed(() => Boolean(fieldState.value()))
     }
 
@@ -420,7 +395,7 @@ function structuredEqual(a: unknown, b: unknown, depth = 0): boolean {
     return true
   }
 
-  if (typeof a === 'object' && typeof b === 'object') {
+  if (typeof a === "object" && typeof b === "object") {
     const aObj = a as Record<string, unknown>
     const bObj = b as Record<string, unknown>
     const aKeys = Object.keys(aObj)

package/src/use-watch.ts

@@ -1,6 +1,6 @@
-import type { Computed, Signal } from '@pyreon/reactivity'
-import { computed } from '@pyreon/reactivity'
-import type { FormState } from './types'
+import type { Computed, Signal } from "@pyreon/reactivity"
+import { computed } from "@pyreon/reactivity"
+import type { FormState } from "./types"
 
 /**
  * Watch specific field values reactively. Returns a computed signal
@@ -21,27 +21,21 @@ import type { FormState } from './types'
  * const all = useWatch(form)
  * // all() => { email: '...', password: '...' }
  */
-export function useWatch<
-  TValues extends Record<string, unknown>,
-  K extends keyof TValues & string,
->(form: FormState<TValues>, name: K): Signal<TValues[K]>
+export function useWatch<TValues extends Record<string, unknown>, K extends keyof TValues & string>(
+  form: FormState<TValues>,
+  name: K,
+): Signal<TValues[K]>
 
 export function useWatch<
   TValues extends Record<string, unknown>,
   K extends (keyof TValues & string)[],
->(
-  form: FormState<TValues>,
-  names: K,
-): { [I in keyof K]: Signal<TValues[K[I] & keyof TValues]> }
+>(form: FormState<TValues>, names: K): { [I in keyof K]: Signal<TValues[K[I] & keyof TValues]> }
 
 export function useWatch<TValues extends Record<string, unknown>>(
   form: FormState<TValues>,
 ): Computed<TValues>
 
-export function useWatch<
-  TValues extends Record<string, unknown>,
-  K extends keyof TValues & string,
->(
+export function useWatch<TValues extends Record<string, unknown>, K extends keyof TValues & string>(
   form: FormState<TValues>,
   nameOrNames?: K | K[],
 ): Signal<TValues[K]> | Signal<TValues[K]>[] | Computed<TValues> {
@@ -49,8 +43,7 @@ export function useWatch<
   if (nameOrNames === undefined) {
     return computed(() => {
       const result = {} as TValues
-      for (const key of Object.keys(form.fields) as (keyof TValues &
-        string)[]) {
+      for (const key of Object.keys(form.fields) as (keyof TValues & string)[]) {
         ;(result as Record<string, unknown>)[key] = form.fields[key].value()
       }
       return result
@@ -59,9 +52,7 @@ export function useWatch<
 
   // Watch multiple fields
   if (Array.isArray(nameOrNames)) {
-    return nameOrNames.map((name) => form.fields[name].value) as Signal<
-      TValues[K]
-    >[]
+    return nameOrNames.map((name) => form.fields[name].value) as Signal<TValues[K]>[]
   }
 
   // Watch single field