@pyreon/form 0.3.0 → 0.7.0

package/lib/types/index.d.ts

@@ -1,457 +1,291 @@
-import { createContext, onUnmount, popContext, pushContext, useContext } from "@pyreon/core";
-import { computed, effect, signal } from "@pyreon/reactivity";
+import { Props, VNode, VNodeChild } from "@pyreon/core";
+import { Computed, Signal } from "@pyreon/reactivity";
 
-//#region src/use-form.ts
+//#region src/types.d.ts
+type ValidationError = string | undefined;
 /**
-* Create a signal-based form. Returns reactive field states, form-level
-* signals, and handlers for submit/reset/validate.
-*
-* @example
-* const form = useForm({
-*   initialValues: { email: '', password: '', remember: false },
-*   validators: {
-*     email: (v) => (!v ? 'Required' : undefined),
-*     password: (v, all) => (v.length < 8 ? 'Too short' : undefined),
-*   },
-*   onSubmit: async (values) => { await login(values) },
-* })
-*
-* // Bind with register():
-* // h('input', form.register('email'))
-* // h('input', { type: 'checkbox', ...form.register('remember', { type: 'checkbox' }) })
-*/
-function useForm(options) {
-  const {
-    initialValues,
-    onSubmit,
-    validators,
-    schema,
-    validateOn = "blur",
-    debounceMs
-  } = options;
-  const fieldEntries = Object.entries(initialValues);
-  const fields = {};
-  const debounceTimers = {};
-  const validationVersions = {};
-  const getValues = () => {
-    const values = {};
-    for (const [name] of fieldEntries) values[name] = fields[name]?.value.peek() ?? initialValues[name];
-    return values;
-  };
-  const clearAllTimers = () => {
-    for (const key of Object.keys(debounceTimers)) {
-      clearTimeout(debounceTimers[key]);
-      delete debounceTimers[key];
-    }
-  };
-  const isValidating = signal(false);
-  const submitError = signal(void 0);
-  let disposed = false;
-  for (const [name, initial] of fieldEntries) {
-    const valueSig = signal(initial);
-    const errorSig = signal(void 0);
-    const touchedSig = signal(false);
-    const dirtySig = signal(false);
-    validationVersions[name] = 0;
-    const runValidation = async value => {
-      const fieldValidator = validators?.[name];
-      if (fieldValidator) {
-        validationVersions[name] = (validationVersions[name] ?? 0) + 1;
-        const currentVersion = validationVersions[name];
-        try {
-          const result = await fieldValidator(value, getValues());
-          if (!disposed && validationVersions[name] === currentVersion) errorSig.set(result);
-          return result;
-        } catch (err) {
-          if (!disposed && validationVersions[name] === currentVersion) {
-            const message = err instanceof Error ? err.message : String(err);
-            errorSig.set(message);
-          }
-          return err instanceof Error ? err.message : String(err);
-        }
-      }
-      errorSig.set(void 0);
-    };
-    const validateField = debounceMs ? value => {
-      clearTimeout(debounceTimers[name]);
-      return new Promise(resolve => {
-        debounceTimers[name] = setTimeout(async () => {
-          resolve(await runValidation(value));
-        }, debounceMs);
-      });
-    } : runValidation;
-    if (validateOn === "change") effect(() => {
-      validateField(valueSig());
-    });
-    fields[name] = {
-      value: valueSig,
-      error: errorSig,
-      touched: touchedSig,
-      dirty: dirtySig,
-      setValue: value => {
-        valueSig.set(value);
-        dirtySig.set(!structuredEqual(value, initial));
-      },
-      setTouched: () => {
-        touchedSig.set(true);
-        if (validateOn === "blur") validateField(valueSig.peek());
-      },
-      reset: () => {
-        valueSig.set(initial);
-        errorSig.set(void 0);
-        touchedSig.set(false);
-        dirtySig.set(false);
-        clearTimeout(debounceTimers[name]);
-      }
-    };
-  }
-  onUnmount(() => {
-    disposed = true;
-    clearAllTimers();
-  });
-  const isSubmitting = signal(false);
-  const submitCount = signal(0);
-  const isValid = computed(() => {
-    for (const name of fieldEntries.map(([n]) => n)) if (fields[name].error() !== void 0) return false;
-    return true;
-  });
-  const isDirty = computed(() => {
-    for (const name of fieldEntries.map(([n]) => n)) if (fields[name].dirty()) return true;
-    return false;
-  });
-  const getErrors = () => {
-    const errors = {};
-    for (const [name] of fieldEntries) {
-      const err = fields[name].error.peek();
-      if (err !== void 0) errors[name] = err;
-    }
-    return errors;
-  };
-  const validate = async () => {
-    clearAllTimers();
-    isValidating.set(true);
-    try {
-      const allValues = getValues();
-      for (const [name] of fieldEntries) fields[name].error.set(void 0);
-      await Promise.all(fieldEntries.map(async ([name]) => {
-        const fieldValidator = validators?.[name];
-        if (fieldValidator) {
-          validationVersions[name] = (validationVersions[name] ?? 0) + 1;
-          const currentVersion = validationVersions[name];
-          try {
-            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));
-          }
-        }
-      }));
-      if (schema) try {
-        const schemaErrors = await schema(allValues);
-        for (const [name] of fieldEntries) {
-          const schemaError = schemaErrors[name];
-          if (schemaError !== void 0 && fields[name].error.peek() === void 0) fields[name].error.set(schemaError);
-        }
-      } catch (err) {
-        submitError.set(err);
-        return false;
-      }
-      for (const [name] of fieldEntries) if (fields[name].error.peek() !== void 0) return false;
-      return true;
-    } finally {
-      isValidating.set(false);
-    }
-  };
-  const handleSubmit = async e => {
-    if (e && typeof e.preventDefault === "function") e.preventDefault();
-    submitError.set(void 0);
-    submitCount.update(n => n + 1);
-    for (const [name] of fieldEntries) fields[name].touched.set(true);
-    if (!(await validate())) return;
-    isSubmitting.set(true);
-    try {
-      await onSubmit(getValues());
-    } catch (err) {
-      submitError.set(err);
-      throw err;
-    } finally {
-      isSubmitting.set(false);
-    }
-  };
-  const reset = () => {
-    clearAllTimers();
-    for (const [name] of fieldEntries) fields[name].reset();
-    submitCount.set(0);
-    submitError.set(void 0);
-  };
-  const setFieldValue = (field, value) => {
-    if (!fields[field]) throw new Error(`[@pyreon/form] Field "${String(field)}" does not exist. Available fields: ${fieldEntries.map(([n]) => n).join(", ")}`);
-    fields[field].setValue(value);
-  };
-  const setFieldError = (field, error) => {
-    if (!fields[field]) throw new Error(`[@pyreon/form] Field "${String(field)}" does not exist. Available fields: ${fieldEntries.map(([n]) => n).join(", ")}`);
-    fields[field].error.set(error);
-  };
-  const setErrors = errors => {
-    for (const [name, error] of Object.entries(errors)) setFieldError(name, error);
-  };
-  const clearErrors = () => {
-    for (const [name] of fieldEntries) fields[name].error.set(void 0);
-  };
-  const resetField = field => {
-    if (fields[field]) fields[field].reset();
-  };
-  const registerCache = /* @__PURE__ */new Map();
-  const register = (field, opts) => {
-    const cacheKey = `${field}:${opts?.type ?? "text"}`;
-    const cached = registerCache.get(cacheKey);
-    if (cached) return cached;
-    const fieldState = fields[field];
-    const props = {
-      value: fieldState.value,
-      onInput: e => {
-        const target = e.target;
-        if (opts?.type === "checkbox") fieldState.setValue(target.checked);else if (opts?.type === "number") {
-          const num = target.valueAsNumber;
-          fieldState.setValue(Number.isNaN(num) ? target.value : num);
-        } else fieldState.setValue(target.value);
-      },
-      onBlur: () => {
-        fieldState.setTouched();
-      }
-    };
-    if (opts?.type === "checkbox") props.checked = computed(() => Boolean(fieldState.value()));
-    registerCache.set(cacheKey, props);
-    return props;
-  };
-  return {
-    fields,
-    isSubmitting,
-    isValidating,
-    isValid,
-    isDirty,
-    submitCount,
-    submitError,
-    values: getValues,
-    errors: getErrors,
-    setFieldValue,
-    setFieldError,
-    setErrors,
-    clearErrors,
-    resetField,
-    register,
-    handleSubmit,
-    reset,
-    validate
-  };
+ * A reactive value that can be read by calling it.
+ * Both `Signal<T>` and `Computed<T>` satisfy this interface.
+ */
+type Accessor<T> = Signal<T> | Computed<T>;
+/**
+ * Field validator function. Receives the field value and all current form values
+ * for cross-field validation.
+ */
+type ValidateFn<T, TValues = Record<string, unknown>> = (value: T, allValues: TValues) => ValidationError | Promise<ValidationError>;
+type SchemaValidateFn<TValues> = (values: TValues) => Partial<Record<keyof TValues, ValidationError>> | Promise<Partial<Record<keyof TValues, ValidationError>>>;
+interface FieldState<T = unknown> {
+  /** Current field value. */
+  value: Signal<T>;
+  /** Field error message (undefined if no error). */
+  error: Signal<ValidationError>;
+  /** Whether the field has been blurred at least once. */
+  touched: Signal<boolean>;
+  /** Whether the field value differs from its initial value. */
+  dirty: Signal<boolean>;
+  /** Set the field value. */
+  setValue: (value: T) => void;
+  /** Mark the field as touched (typically on blur). */
+  setTouched: () => void;
+  /** Reset the field to its initial value and clear error/touched/dirty. */
+  reset: () => void;
 }
-/** Deep structural equality with depth limit to guard against circular references. */
-function structuredEqual(a, b, depth = 0) {
-  if (Object.is(a, b)) return true;
-  if (a == null || b == null) return false;
-  if (typeof a !== typeof b) return false;
-  if (depth > 10) return false;
-  if (Array.isArray(a) && Array.isArray(b)) {
-    if (a.length !== b.length) return false;
-    for (let i = 0; i < a.length; i++) if (!structuredEqual(a[i], b[i], depth + 1)) return false;
-    return true;
-  }
-  if (typeof a === "object" && typeof b === "object") {
-    const aObj = a;
-    const bObj = b;
-    const aKeys = Object.keys(aObj);
-    const bKeys = Object.keys(bObj);
-    if (aKeys.length !== bKeys.length) return false;
-    for (const key of aKeys) if (!structuredEqual(aObj[key], bObj[key], depth + 1)) return false;
-    return true;
-  }
-  return false;
+/** Props returned by `register()` for binding an input element. */
+interface FieldRegisterProps<T> {
+  value: Signal<T>;
+  onInput: (e: Event) => void;
+  onBlur: () => void;
+  checked?: Accessor<boolean>;
 }
-
-//#endregion
-//#region src/use-field-array.ts
-/**
-* Manage a dynamic array of form fields with stable keys.
-*
-* @example
-* const tags = useFieldArray<string>([])
-* tags.append('typescript')
-* tags.append('pyreon')
-* // tags.items() — array of { key, value } for keyed rendering
-*/
-function useFieldArray(initial = []) {
-  let nextKey = 0;
-  const makeItem = value => ({
-    key: nextKey++,
-    value: signal(value)
-  });
-  const items = signal(initial.map(makeItem));
-  return {
-    items,
-    length: computed(() => items().length),
-    append(value) {
-      items.update(arr => [...arr, makeItem(value)]);
-    },
-    prepend(value) {
-      items.update(arr => [makeItem(value), ...arr]);
-    },
-    insert(index, value) {
-      items.update(arr => {
-        const next = [...arr];
-        next.splice(index, 0, makeItem(value));
-        return next;
-      });
-    },
-    remove(index) {
-      items.update(arr => arr.filter((_, i) => i !== index));
-    },
-    update(index, value) {
-      const item = items.peek()[index];
-      if (item) item.value.set(value);
-    },
-    move(from, to) {
-      items.update(arr => {
-        const next = [...arr];
-        const [item] = next.splice(from, 1);
-        if (item) next.splice(to, 0, item);
-        return next;
-      });
-    },
-    swap(indexA, indexB) {
-      items.update(arr => {
-        const next = [...arr];
-        const a = next[indexA];
-        const b = next[indexB];
-        if (a && b) {
-          next[indexA] = b;
-          next[indexB] = a;
-        }
-        return next;
-      });
-    },
-    replace(values) {
-      items.set(values.map(makeItem));
-    },
-    values() {
-      return items.peek().map(item => item.value.peek());
-    }
-  };
+interface FormState<TValues extends Record<string, unknown>> {
+  /** Individual field states keyed by field name. */
+  fields: { [K in keyof TValues]: FieldState<TValues[K]> };
+  /** Whether the form is currently being submitted. */
+  isSubmitting: Signal<boolean>;
+  /** Whether async validation is currently running. */
+  isValidating: Signal<boolean>;
+  /** Whether any field has an error (computed — read-only). */
+  isValid: Accessor<boolean>;
+  /** Whether any field value differs from its initial value (computed — read-only). */
+  isDirty: Accessor<boolean>;
+  /** Number of times the form has been submitted. */
+  submitCount: Signal<number>;
+  /** Error thrown by onSubmit (undefined if no error). */
+  submitError: Signal<unknown>;
+  /** All current form values as a plain object. */
+  values: () => TValues;
+  /** All current errors as a record. */
+  errors: () => Partial<Record<keyof TValues, ValidationError>>;
+  /** Set a single field's value. */
+  setFieldValue: <K extends keyof TValues>(field: K, value: TValues[K]) => void;
+  /** Set a single field's error (e.g. from server-side validation). */
+  setFieldError: (field: keyof TValues, error: ValidationError) => void;
+  /** Set multiple field errors at once (e.g. from server-side validation). */
+  setErrors: (errors: Partial<Record<keyof TValues, ValidationError>>) => void;
+  /** Clear all field errors. */
+  clearErrors: () => void;
+  /** Reset a single field to its initial value. */
+  resetField: (field: keyof TValues) => void;
+  /**
+   * Returns props for binding an input element to a field.
+   * For text/select: includes `value` signal, `onInput`, and `onBlur`.
+   * For checkboxes: pass `{ type: 'checkbox' }` to also get a `checked` signal.
+   * For numbers: pass `{ type: 'number' }` to use `valueAsNumber` on input.
+   */
+  register: <K extends keyof TValues & string>(field: K, options?: {
+    type?: 'checkbox' | 'number';
+  }) => FieldRegisterProps<TValues[K]>;
+  /**
+   * Submit handler — runs validation, then calls onSubmit if valid.
+   * Can be called directly or as a form event handler (calls preventDefault).
+   */
+  handleSubmit: (e?: Event) => Promise<void>;
+  /** Reset all fields to initial values. */
+  reset: () => void;
+  /** Validate all fields and return whether the form is valid. */
+  validate: () => Promise<boolean>;
+}
+interface UseFormOptions<TValues extends Record<string, unknown>> {
+  /** Initial values for each field. */
+  initialValues: TValues;
+  /** Called with validated values on successful submit. */
+  onSubmit: (values: TValues) => void | Promise<void>;
+  /** Per-field validators. Receives field value and all form values. */
+  validators?: Partial<{ [K in keyof TValues]: ValidateFn<TValues[K], TValues> }>;
+  /** Schema-level validator (runs after field validators). */
+  schema?: SchemaValidateFn<TValues>;
+  /** When to validate: 'blur' (default), 'change', or 'submit'. */
+  validateOn?: 'blur' | 'change' | 'submit';
+  /** Debounce delay in ms for validators (useful for async validators). */
+  debounceMs?: number;
 }
-
 //#endregion
-//#region src/use-field.ts
-/**
-* Extract a single field's state and helpers from a form instance.
-* Useful for building isolated field components.
-*
-* @example
-* function EmailField({ form }: { form: FormState<{ email: string }> }) {
-*   const field = useField(form, 'email')
-*   return (
-*     <>
-*       <input {...field.register()} />
-*       {field.showError() && <span>{field.error()}</span>}
-*     </>
-*   )
-* }
-*/
-function useField(form, name) {
-  const fieldState = form.fields[name];
-  const hasError = computed(() => fieldState.error() !== void 0);
-  const showError = computed(() => fieldState.touched() && hasError());
-  return {
-    value: fieldState.value,
-    error: fieldState.error,
-    touched: fieldState.touched,
-    dirty: fieldState.dirty,
-    setValue: fieldState.setValue,
-    setTouched: fieldState.setTouched,
-    reset: fieldState.reset,
-    register: opts => form.register(name, opts),
-    hasError,
-    showError
-  };
+//#region src/context.d.ts
+interface FormProviderProps<TValues extends Record<string, unknown>> extends Props {
+  form: FormState<TValues>;
+  children?: VNodeChild;
 }
-
+/**
+ * Provide a form instance to the component tree so nested components
+ * can access it via `useFormContext()`.
+ *
+ * @example
+ * const form = useForm({ initialValues: { email: '' }, onSubmit: ... })
+ *
+ * <FormProvider form={form}>
+ *   <EmailField />
+ *   <SubmitButton />
+ * </FormProvider>
+ */
+declare function FormProvider<TValues extends Record<string, unknown>>(props: FormProviderProps<TValues>): VNode;
+/**
+ * Access the form instance from the nearest `FormProvider`.
+ * Must be called within a component tree wrapped by `FormProvider`.
+ *
+ * @example
+ * function EmailField() {
+ *   const form = useFormContext<{ email: string }>()
+ *   return <input {...form.register('email')} />
+ * }
+ */
+declare function useFormContext<TValues extends Record<string, unknown> = Record<string, unknown>>(): FormState<TValues>;
 //#endregion
-//#region src/use-watch.ts
-function useWatch(form, nameOrNames) {
-  if (nameOrNames === void 0) return computed(() => {
-    const result = {};
-    for (const key of Object.keys(form.fields)) result[key] = form.fields[key].value();
-    return result;
-  });
-  if (Array.isArray(nameOrNames)) return nameOrNames.map(name => form.fields[name].value);
-  return form.fields[nameOrNames].value;
+//#region src/use-field.d.ts
+interface UseFieldResult<T> {
+  /** Current field value (reactive signal). */
+  value: Signal<T>;
+  /** Field error message (reactive signal). */
+  error: Signal<ValidationError>;
+  /** Whether the field has been touched (reactive signal). */
+  touched: Signal<boolean>;
+  /** Whether the field value differs from initial (reactive signal). */
+  dirty: Signal<boolean>;
+  /** Set the field value. */
+  setValue: (value: T) => void;
+  /** Mark the field as touched. */
+  setTouched: () => void;
+  /** Reset the field to its initial value. */
+  reset: () => void;
+  /** Register props for input binding. */
+  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). */
+  showError: Computed<boolean>;
 }
-
+/**
+ * Extract a single field's state and helpers from a form instance.
+ * Useful for building isolated field components.
+ *
+ * @example
+ * function EmailField({ form }: { form: FormState<{ email: string }> }) {
+ *   const field = useField(form, 'email')
+ *   return (
+ *     <>
+ *       <input {...field.register()} />
+ *       {field.showError() && <span>{field.error()}</span>}
+ *     </>
+ *   )
+ * }
+ */
+declare function useField<TValues extends Record<string, unknown>, K extends keyof TValues & string>(form: FormState<TValues>, name: K): UseFieldResult<TValues[K]>;
 //#endregion
-//#region src/use-form-state.ts
-function useFormState(form, selector) {
-  const buildSummary = () => {
-    const touchedFields = {};
-    const dirtyFields = {};
-    const errors = {};
-    for (const key of Object.keys(form.fields)) {
-      const field = form.fields[key];
-      if (field.touched()) touchedFields[key] = true;
-      if (field.dirty()) dirtyFields[key] = true;
-      const err = field.error();
-      if (err !== void 0) errors[key] = err;
-    }
-    return {
-      isSubmitting: form.isSubmitting(),
-      isValidating: form.isValidating(),
-      isValid: form.isValid(),
-      isDirty: form.isDirty(),
-      submitCount: form.submitCount(),
-      submitError: form.submitError(),
-      touchedFields,
-      dirtyFields,
-      errors
-    };
-  };
-  if (selector) return computed(() => selector(buildSummary()));
-  return computed(buildSummary);
+//#region src/use-field-array.d.ts
+interface FieldArrayItem<T> {
+  /** Stable key for keyed rendering. */
+  key: number;
+  /** Reactive value for this item. */
+  value: Signal<T>;
 }
-
+interface UseFieldArrayResult<T> {
+  /** Reactive list of items with stable keys. */
+  items: Signal<FieldArrayItem<T>[]>;
+  /** Number of items. */
+  length: Computed<number>;
+  /** Append a new item to the end. */
+  append: (value: T) => void;
+  /** Prepend a new item to the start. */
+  prepend: (value: T) => void;
+  /** Insert an item at the given index. */
+  insert: (index: number, value: T) => void;
+  /** Remove the item at the given index. */
+  remove: (index: number) => void;
+  /** Update the value of an item at the given index. */
+  update: (index: number, value: T) => void;
+  /** Move an item from one index to another. */
+  move: (from: number, to: number) => void;
+  /** Swap two items by index. */
+  swap: (indexA: number, indexB: number) => void;
+  /** Replace all items. */
+  replace: (values: T[]) => void;
+  /** Get all current values as a plain array. */
+  values: () => T[];
+}
+/**
+ * Manage a dynamic array of form fields with stable keys.
+ *
+ * @example
+ * const tags = useFieldArray<string>([])
+ * tags.append('typescript')
+ * tags.append('pyreon')
+ * // tags.items() — array of { key, value } for keyed rendering
+ */
+declare function useFieldArray<T>(initial?: T[]): UseFieldArrayResult<T>;
 //#endregion
-//#region src/context.ts
-
+//#region src/use-form.d.ts
 /**
-* Provide a form instance to the component tree so nested components
-* can access it via `useFormContext()`.
-*
-* @example
-* const form = useForm({ initialValues: { email: '' }, onSubmit: ... })
-*
-* <FormProvider form={form}>
-*   <EmailField />
-*   <SubmitButton />
-* </FormProvider>
-*/
-function FormProvider(props) {
-  pushContext(new Map([[FormContext.id, props.form]]));
-  onUnmount(() => popContext());
-  const ch = props.children;
-  return typeof ch === "function" ? ch() : ch;
+ * Create a signal-based form. Returns reactive field states, form-level
+ * signals, and handlers for submit/reset/validate.
+ *
+ * @example
+ * const form = useForm({
+ *   initialValues: { email: '', password: '', remember: false },
+ *   validators: {
+ *     email: (v) => (!v ? 'Required' : undefined),
+ *     password: (v, all) => (v.length < 8 ? 'Too short' : undefined),
+ *   },
+ *   onSubmit: async (values) => { await login(values) },
+ * })
+ *
+ * // Bind with register():
+ * // h('input', form.register('email'))
+ * // h('input', { type: 'checkbox', ...form.register('remember', { type: 'checkbox' }) })
+ */
+declare function useForm<TValues extends Record<string, unknown>>(options: UseFormOptions<TValues>): FormState<TValues>;
+//#endregion
+//#region src/use-form-state.d.ts
+interface FormStateSummary<TValues extends Record<string, unknown>> {
+  isSubmitting: boolean;
+  isValidating: boolean;
+  isValid: boolean;
+  isDirty: boolean;
+  submitCount: number;
+  submitError: unknown;
+  touchedFields: Partial<Record<keyof TValues, boolean>>;
+  dirtyFields: Partial<Record<keyof TValues, boolean>>;
+  errors: Partial<Record<keyof TValues, ValidationError>>;
 }
 /**
-* Access the form instance from the nearest `FormProvider`.
-* Must be called within a component tree wrapped by `FormProvider`.
-*
-* @example
-* function EmailField() {
-*   const form = useFormContext<{ email: string }>()
-*   return <input {...form.register('email')} />
-* }
-*/
-function useFormContext() {
-  const form = useContext(FormContext);
-  if (!form) throw new Error("[@pyreon/form] useFormContext() must be used within a <FormProvider>.");
-  return form;
-}
-
+ * Subscribe to the full form state as a single computed signal.
+ * Useful for rendering form-level UI (submit button disabled state,
+ * error summaries, progress indicators).
+ *
+ * @example
+ * const state = useFormState(form)
+ * // state() => { isSubmitting, isValid, isDirty, errors, ... }
+ *
+ * @example
+ * // Use a selector for fine-grained reactivity
+ * const canSubmit = useFormState(form, (s) => s.isValid && !s.isSubmitting)
+ */
+declare function useFormState<TValues extends Record<string, unknown>>(form: FormState<TValues>): Computed<FormStateSummary<TValues>>;
+declare function useFormState<TValues extends Record<string, unknown>, R>(form: FormState<TValues>, selector: (state: FormStateSummary<TValues>) => R): Computed<R>;
+//#endregion
+//#region src/use-watch.d.ts
+/**
+ * Watch specific field values reactively. Returns a computed signal
+ * that re-evaluates when any of the watched fields change.
+ *
+ * @example
+ * // Watch a single field
+ * const email = useWatch(form, 'email')
+ * // email() => current email value
+ *
+ * @example
+ * // Watch multiple fields
+ * const [first, last] = useWatch(form, ['firstName', 'lastName'])
+ * // first() => firstName value, last() => lastName value
+ *
+ * @example
+ * // Watch all fields
+ * const all = useWatch(form)
+ * // all() => { email: '...', password: '...' }
+ */
+declare function useWatch<TValues extends Record<string, unknown>, K extends keyof TValues & string>(form: FormState<TValues>, name: K): Signal<TValues[K]>;
+declare 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]> };
+declare function useWatch<TValues extends Record<string, unknown>>(form: FormState<TValues>): Computed<TValues>;
 //#endregion
-export { FormProvider, useField, useFieldArray, useForm, useFormContext, useFormState, useWatch };
-//# sourceMappingURL=index.d.ts.map
+export { type Accessor, type FieldArrayItem, type FieldRegisterProps, type FieldState, FormProvider, type FormState, type FormStateSummary, type SchemaValidateFn, type UseFieldArrayResult, type UseFieldResult, type UseFormOptions, type ValidateFn, type ValidationError, useField, useFieldArray, useForm, useFormContext, useFormState, useWatch };
+//# sourceMappingURL=index2.d.ts.map