Typed forms

import { signal, onCleanup } from '@zidomjs/core';import { createForm } from '@zidomjs/forms';export default function FormsDemo() {  const form = createForm(    { name: '', email: '' },    {      name: value =>        value.trim().length >= 2 ? undefined : 'Enter at least two characters',      email: value =>        value.includes('@') ? undefined : 'Enter a valid email'    }  );  onCleanup(() => form.dispose());  const name = form.field('name');  const email = form.field('email');  const message = signal('');  return (    <form      className="example-card demo-form"      onSubmit={(event: Event) => {        event.preventDefault();        void form.submit(async values => {          message.value = `Saved ${values.name} (${values.email})`;        });      }}    >      <label htmlFor="demo-name">Name</label>      <input        id="demo-name"        value={name.value}        aria-describedby="demo-name-error"        aria-invalid={() => Boolean(name.error.value)}        onInput={(event: Event) => {          name.set((event.currentTarget as HTMLInputElement).value);          message.value = '';        }}        onBlur={() => name.touch()}      />      <p className="demo-error" id="demo-name-error" role="status">        {name.error}      </p>      <label htmlFor="demo-email">Email</label>      <input        id="demo-email"        type="email"        value={email.value}        aria-describedby="demo-email-error"        aria-invalid={() => Boolean(email.error.value)}        onInput={(event: Event) => {          email.set((event.currentTarget as HTMLInputElement).value);          message.value = '';        }}        onBlur={() => email.touch()}      />      <p className="demo-error" id="demo-email-error" role="status">        {email.error}      </p>      <button type="submit" disabled={form.submitting}>        Validate and save      </button>      <p role="status">{message}</p>    </form>  );}