@barefootjs/form 0.1.0

package/README.md

@@ -0,0 +1,180 @@
+# @barefootjs/form
+
+Signal-based form management for [BarefootJS](https://github.com/piconic-ai/barefootjs). Provides reactive per-field state (value, error, touched, dirty), configurable validation timing, and [Standard Schema](https://github.com/standard-schema/standard-schema) integration for library-agnostic validation.
+
+## Install
+
+```bash
+bun add @barefootjs/form @barefootjs/client
+```
+
+You also need a Standard Schema–compatible validation library (e.g. [Zod](https://zod.dev/), [Valibot](https://valibot.dev/), [ArkType](https://arktype.io/)):
+
+```bash
+bun add zod
+```
+
+## Quick Start
+
+```tsx
+"use client"
+
+import { createForm } from "@barefootjs/form"
+import { z } from "zod"
+
+const schema = z.object({
+  email: z.string().email("Invalid email"),
+  password: z.string().min(8, "At least 8 characters"),
+})
+
+function LoginForm() {
+  const form = createForm({
+    schema,
+    defaultValues: { email: "", password: "" },
+    onSubmit: async (data) => {
+      // `data` is fully typed and validated
+      await fetch("/api/login", {
+        method: "POST",
+        body: JSON.stringify(data),
+      })
+    },
+  })
+
+  const email = form.field("email")
+  const password = form.field("password")
+
+  return (
+    <form onSubmit={form.handleSubmit}>
+      <input
+        type="email"
+        value={email.value()}
+        onInput={email.handleInput}
+        onBlur={email.handleBlur}
+      />
+      {email.error() && <span>{email.error()}</span>}
+
+      <input
+        type="password"
+        value={password.value()}
+        onInput={password.handleInput}
+        onBlur={password.handleBlur}
+      />
+      {password.error() && <span>{password.error()}</span>}
+
+      <button type="submit" disabled={form.isSubmitting()}>
+        {form.isSubmitting() ? "Submitting..." : "Log in"}
+      </button>
+    </form>
+  )
+}
+```
+
+## API
+
+### `createForm(options)`
+
+Creates a form instance with reactive state management.
+
+```ts
+const form = createForm({
+  schema,                          // Standard Schema compliant
+  defaultValues: { email: "", password: "" },
+  validateOn: "blur",              // "input" | "blur" | "submit" (default: "submit")
+  revalidateOn: "input",           // validation after first error (default: "input")
+  onSubmit: async (data) => {},    // called with validated data
+})
+```
+
+#### Options
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `schema` | `StandardSchemaV1` | required | Validation schema (Zod, Valibot, ArkType, etc.) |
+| `defaultValues` | `InferInput<TSchema>` | required | Initial field values |
+| `validateOn` | `"input" \| "blur" \| "submit"` | `"submit"` | When to run first validation |
+| `revalidateOn` | `"input" \| "blur" \| "submit"` | `"input"` | When to revalidate after first error |
+| `onSubmit` | `(data) => void \| Promise<void>` | — | Called with validated data on successful submit |
+
+### Form Return
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `field(name)` | `(name) => FieldReturn` | Get a field controller (memoized) |
+| `isSubmitting()` | `() => boolean` | Whether submission is in progress |
+| `isDirty` | `Memo<boolean>` | Whether any field differs from defaults |
+| `isValid` | `Memo<boolean>` | Whether all fields pass validation |
+| `errors` | `Memo<Record<string, string>>` | All current errors by field name |
+| `handleSubmit(e)` | `(e: Event) => Promise<void>` | Form submit handler |
+| `reset()` | `() => void` | Reset all fields to defaults |
+| `setError(name, msg)` | `(name, message) => void` | Manually set a field error |
+
+### Field Return
+
+```ts
+const email = form.field("email")
+```
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `value()` | `() => V` | Current value (signal getter) |
+| `error()` | `() => string` | Validation error message |
+| `touched()` | `() => boolean` | Whether field has been blurred |
+| `dirty()` | `() => boolean` | Whether value differs from default |
+| `setValue(value)` | `(value: V) => void` | Set value directly |
+| `handleInput(e)` | `(e: Event) => void` | Input event handler (reads `e.target.value`) |
+| `handleBlur()` | `() => void` | Blur event handler |
+
+## Validation Timing
+
+The `validateOn` / `revalidateOn` options control when validation runs:
+
+```ts
+// Validate on blur, revalidate on input (good UX default)
+createForm({ validateOn: "blur", revalidateOn: "input", ... })
+
+// Validate only on submit
+createForm({ validateOn: "submit", ... })
+
+// Validate on every keystroke
+createForm({ validateOn: "input", ... })
+```
+
+After `reset()`, the timing reverts to `validateOn` (the `revalidateOn` state is cleared).
+
+## Server-Side Errors
+
+Use `setError` to apply errors returned from a server:
+
+```ts
+const form = createForm({
+  schema,
+  defaultValues: { email: "" },
+  onSubmit: async (data) => {
+    const res = await fetch("/api/register", {
+      method: "POST",
+      body: JSON.stringify(data),
+    })
+    if (!res.ok) {
+      const body = await res.json()
+      form.setError("email", body.message)
+    }
+  },
+})
+```
+
+## Custom Components
+
+For components that don't use `e.target.value` (e.g. checkboxes, selects, custom widgets), use `setValue` directly:
+
+```tsx
+const active = form.field("active")
+
+<Switch
+  checked={active.value()}
+  onCheckedChange={(checked) => active.setValue(checked)}
+/>
+```
+
+## License
+
+MIT

package/dist/create-form.d.ts

@@ -0,0 +1,4 @@
+import type { StandardSchemaV1 } from "@standard-schema/spec";
+import type { CreateFormOptions, FormReturn } from "./types";
+export declare function createForm<TSchema extends StandardSchemaV1<Record<string, unknown>>>(options: CreateFormOptions<TSchema>): FormReturn<TSchema>;
+//# sourceMappingURL=create-form.d.ts.map

package/dist/create-form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-form.d.ts","sourceRoot":"","sources":["../src/create-form.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAI9D,OAAO,KAAK,EACV,iBAAiB,EACjB,UAAU,EAGX,MAAM,SAAS,CAAC;AAajB,wBAAgB,UAAU,CACxB,OAAO,SAAS,gBAAgB,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,EACzD,OAAO,EAAE,iBAAiB,CAAC,OAAO,CAAC,GAAG,UAAU,CAAC,OAAO,CAAC,CAqN1D"}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { createForm } from "./create-form";
+export { validateSchema, validateField } from "./validate";
+export type { CreateFormOptions, FormReturn, FieldReturn, ValidateOn, } from "./types";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3D,YAAY,EACV,iBAAiB,EACjB,UAAU,EACV,WAAW,EACX,UAAU,GACX,MAAM,SAAS,CAAC"}

package/dist/index.js

@@ -0,0 +1,317 @@
+// ../client/src/reactive.ts
+var Owner = null;
+var Listener = null;
+var MAX_EFFECT_RUNS = 100;
+var BatchDepth = 0;
+var PendingEffects = new Set;
+function createSignal(initialValue) {
+  let value = initialValue;
+  const subscribers = new Set;
+  const get = () => {
+    if (Listener) {
+      subscribers.add(Listener);
+      Listener.dependencies.add(subscribers);
+    }
+    return value;
+  };
+  const set = (valueOrFn) => {
+    const newValue = typeof valueOrFn === "function" ? valueOrFn(value) : valueOrFn;
+    if (Object.is(value, newValue)) {
+      return;
+    }
+    value = newValue;
+    if (BatchDepth > 0) {
+      for (const effect of subscribers) {
+        PendingEffects.add(effect);
+      }
+    } else {
+      const effectsToRun = [...subscribers];
+      for (const effect of effectsToRun) {
+        runEffect(effect);
+      }
+    }
+  };
+  return [get, set];
+}
+function createEffect(fn) {
+  const effect = {
+    fn,
+    cleanup: null,
+    dependencies: new Set,
+    owner: Owner,
+    children: [],
+    disposed: false,
+    runCount: 0
+  };
+  if (Owner)
+    Owner.children.push(effect);
+  runEffect(effect);
+}
+function runEffect(effect) {
+  if (effect.disposed)
+    return;
+  effect.runCount++;
+  if (effect.runCount > MAX_EFFECT_RUNS) {
+    effect.runCount = 0;
+    throw new Error(`Circular dependency detected: effect re-entered itself ${MAX_EFFECT_RUNS} times.`);
+  }
+  if (effect.cleanup) {
+    effect.cleanup();
+    effect.cleanup = null;
+  }
+  for (const dep of effect.dependencies) {
+    dep.delete(effect);
+  }
+  effect.dependencies.clear();
+  const prevOwner = Owner;
+  const prevListener = Listener;
+  Owner = effect;
+  Listener = effect;
+  try {
+    const result = effect.fn();
+    if (typeof result === "function") {
+      effect.cleanup = result;
+    }
+  } finally {
+    Owner = prevOwner;
+    Listener = prevListener;
+    effect.runCount--;
+  }
+}
+function untrack(fn) {
+  const prevListener = Listener;
+  Listener = null;
+  try {
+    return fn();
+  } finally {
+    Listener = prevListener;
+  }
+}
+function createMemo(fn) {
+  const [value, setValue] = createSignal(undefined);
+  createEffect(() => {
+    const result = fn();
+    setValue(() => result);
+  });
+  return value;
+}
+
+// ../../node_modules/.bun/@standard-schema+utils@0.3.0/node_modules/@standard-schema/utils/dist/index.js
+function getDotPath(issue) {
+  if (issue.path?.length) {
+    let dotPath = "";
+    for (const item of issue.path) {
+      const key = typeof item === "object" ? item.key : item;
+      if (typeof key === "string" || typeof key === "number") {
+        if (dotPath) {
+          dotPath += `.${key}`;
+        } else {
+          dotPath += key;
+        }
+      } else {
+        return null;
+      }
+    }
+    return dotPath;
+  }
+  return null;
+}
+
+// src/validate.ts
+async function validateSchema(schema, values) {
+  const result = await schema["~standard"].validate(values);
+  if (!result.issues) {
+    return {};
+  }
+  const errors = {};
+  for (const issue of result.issues) {
+    const path = getDotPath(issue);
+    if (path && !errors[path]) {
+      errors[path] = issue.message;
+    }
+  }
+  return errors;
+}
+async function validateField(schema, values, fieldName) {
+  const errors = await validateSchema(schema, values);
+  return errors[fieldName] ?? "";
+}
+
+// src/create-form.ts
+function isPrimitive(v) {
+  return v === null || typeof v !== "object";
+}
+function createForm(options) {
+  const {
+    schema,
+    defaultValues,
+    validateOn = "submit",
+    revalidateOn = "input",
+    onSubmit
+  } = options;
+  const defaults = defaultValues;
+  const defaultKeys = Object.keys(defaults);
+  const fieldSignals = new Map;
+  const fieldCache = new Map;
+  const validatedFields = new Set;
+  const [isSubmitting, setIsSubmitting] = createSignal(false);
+  const [fieldVersion, setFieldVersion] = createSignal(0);
+  function getOrCreateFieldSignals(name) {
+    let signals = fieldSignals.get(name);
+    if (!signals) {
+      signals = {
+        value: createSignal(defaults[name] ?? ""),
+        error: createSignal(""),
+        touched: createSignal(false),
+        dirty: createSignal(false)
+      };
+      fieldSignals.set(name, signals);
+      setFieldVersion((v) => v + 1);
+    }
+    return signals;
+  }
+  function getCurrentValues() {
+    return untrack(() => {
+      const values = {};
+      for (const key of defaultKeys) {
+        const signals = fieldSignals.get(key);
+        values[key] = signals ? signals.value[0]() : defaults[key];
+      }
+      return values;
+    });
+  }
+  function shouldValidate(name, trigger) {
+    const timing = validatedFields.has(name) ? revalidateOn : validateOn;
+    return timing === trigger;
+  }
+  async function runFieldValidation(name) {
+    const values = getCurrentValues();
+    const error = await validateField(schema, values, name);
+    const signals = fieldSignals.get(name);
+    if (signals) {
+      signals.error[1](error);
+    }
+    validatedFields.add(name);
+  }
+  function field(name) {
+    const cached = fieldCache.get(name);
+    if (cached)
+      return cached;
+    const signals = getOrCreateFieldSignals(name);
+    const defaultValue = defaults[name] ?? "";
+    const defaultIsPrimitive = isPrimitive(defaultValue);
+    const serializedDefault = defaultIsPrimitive ? undefined : JSON.stringify(defaultValue);
+    function checkDirty(value) {
+      if (defaultIsPrimitive)
+        return value !== defaultValue;
+      return JSON.stringify(value) !== serializedDefault;
+    }
+    const fieldReturn = {
+      value: signals.value[0],
+      error: signals.error[0],
+      touched: signals.touched[0],
+      dirty: signals.dirty[0],
+      setValue(value) {
+        signals.value[1](value);
+        signals.dirty[1](checkDirty(value));
+        if (shouldValidate(name, "input")) {
+          runFieldValidation(name);
+        }
+      },
+      handleInput(e) {
+        const target = e.target;
+        const value = target.value;
+        fieldReturn.setValue(value);
+      },
+      handleBlur() {
+        signals.touched[1](true);
+        if (shouldValidate(name, "blur")) {
+          runFieldValidation(name);
+        }
+      }
+    };
+    fieldCache.set(name, fieldReturn);
+    return fieldReturn;
+  }
+  const isDirty = createMemo(() => {
+    fieldVersion();
+    for (const [, signals] of fieldSignals) {
+      if (signals.dirty[0]())
+        return true;
+    }
+    return false;
+  });
+  const errors = createMemo(() => {
+    fieldVersion();
+    const result = {};
+    for (const [name, signals] of fieldSignals) {
+      const err = signals.error[0]();
+      if (err)
+        result[name] = err;
+    }
+    return result;
+  });
+  const isValid = createMemo(() => {
+    const e = errors();
+    for (const _ in e)
+      return false;
+    return true;
+  });
+  async function handleSubmit(e) {
+    e.preventDefault();
+    const values = getCurrentValues();
+    setIsSubmitting(true);
+    try {
+      const validationErrors = await validateSchema(schema, values);
+      const hasErrors = Object.keys(validationErrors).length > 0;
+      if (hasErrors) {
+        for (const [name, message] of Object.entries(validationErrors)) {
+          const signals = getOrCreateFieldSignals(name);
+          signals.error[1](message);
+          validatedFields.add(name);
+        }
+        setIsSubmitting(false);
+        return;
+      }
+      for (const [, signals] of fieldSignals) {
+        signals.error[1]("");
+      }
+      if (onSubmit) {
+        try {
+          await onSubmit(values);
+        } catch {}
+      }
+    } finally {
+      setIsSubmitting(false);
+    }
+  }
+  function reset() {
+    for (const [name, signals] of fieldSignals) {
+      signals.value[1](defaults[name] ?? "");
+      signals.error[1]("");
+      signals.touched[1](false);
+      signals.dirty[1](false);
+    }
+    validatedFields.clear();
+  }
+  function setError(name, message) {
+    const signals = getOrCreateFieldSignals(name);
+    signals.error[1](message);
+    validatedFields.add(name);
+  }
+  return {
+    field,
+    isSubmitting,
+    isDirty,
+    isValid,
+    errors,
+    handleSubmit,
+    reset,
+    setError
+  };
+}
+export {
+  validateSchema,
+  validateField,
+  createForm
+};

package/dist/types.d.ts

@@ -0,0 +1,45 @@
+import type { StandardSchemaV1 } from "@standard-schema/spec";
+import type { Reactive, Memo } from "@barefootjs/client";
+export type ValidateOn = "input" | "blur" | "submit";
+export interface CreateFormOptions<TSchema extends StandardSchemaV1<Record<string, unknown>>> {
+    schema: TSchema;
+    defaultValues: StandardSchemaV1.InferInput<TSchema>;
+    validateOn?: ValidateOn;
+    revalidateOn?: ValidateOn;
+    onSubmit?: (data: StandardSchemaV1.InferOutput<TSchema>) => void | Promise<void>;
+}
+export interface FieldReturn<V> {
+    /** Current field value (signal getter) */
+    value: Reactive<() => V>;
+    /** Current validation error message (signal getter) */
+    error: Reactive<() => string>;
+    /** Whether the field has been touched (signal getter) */
+    touched: Reactive<() => boolean>;
+    /** Whether the field value differs from defaultValue (signal getter) */
+    dirty: Reactive<() => boolean>;
+    /** Set field value directly */
+    setValue: (value: V) => void;
+    /** Input event handler — reads e.target.value */
+    handleInput: (e: Event) => void;
+    /** Blur event handler — marks touched and may trigger validation */
+    handleBlur: () => void;
+}
+export interface FormReturn<TSchema extends StandardSchemaV1<Record<string, unknown>>> {
+    /** Get a field controller by name (memoized) */
+    field: <K extends string & keyof StandardSchemaV1.InferInput<TSchema>>(name: K) => FieldReturn<StandardSchemaV1.InferInput<TSchema>[K]>;
+    /** Whether a submission is in progress (signal getter) */
+    isSubmitting: Reactive<() => boolean>;
+    /** Whether any field value differs from defaults (memo) */
+    isDirty: Memo<boolean>;
+    /** Whether all fields pass validation (memo) */
+    isValid: Memo<boolean>;
+    /** All current errors keyed by field name (memo) */
+    errors: Memo<Record<string, string>>;
+    /** Form submit handler — call with the submit event */
+    handleSubmit: (e: Event) => Promise<void>;
+    /** Reset all fields to default values and clear errors */
+    reset: () => void;
+    /** Manually set an error on a field (e.g. server-side errors) */
+    setError: (name: string & keyof StandardSchemaV1.InferInput<TSchema>, message: string) => void;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAIzD,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;AAIrD,MAAM,WAAW,iBAAiB,CAChC,OAAO,SAAS,gBAAgB,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAEzD,MAAM,EAAE,OAAO,CAAC;IAChB,aAAa,EAAE,gBAAgB,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;IACpD,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B,QAAQ,CAAC,EAAE,CACT,IAAI,EAAE,gBAAgB,CAAC,WAAW,CAAC,OAAO,CAAC,KACxC,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CAC3B;AAID,MAAM,WAAW,WAAW,CAAC,CAAC;IAC5B,0CAA0C;IAC1C,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC;IACzB,uDAAuD;IACvD,KAAK,EAAE,QAAQ,CAAC,MAAM,MAAM,CAAC,CAAC;IAC9B,yDAAyD;IACzD,OAAO,EAAE,QAAQ,CAAC,MAAM,OAAO,CAAC,CAAC;IACjC,wEAAwE;IACxE,KAAK,EAAE,QAAQ,CAAC,MAAM,OAAO,CAAC,CAAC;IAC/B,+BAA+B;IAC/B,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC7B,iDAAiD;IACjD,WAAW,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAChC,oEAAoE;IACpE,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAID,MAAM,WAAW,UAAU,CACzB,OAAO,SAAS,gBAAgB,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAEzD,gDAAgD;IAChD,KAAK,EAAE,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,gBAAgB,CAAC,UAAU,CAAC,OAAO,CAAC,EACnE,IAAI,EAAE,CAAC,KACJ,WAAW,CAAC,gBAAgB,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC1D,0DAA0D;IAC1D,YAAY,EAAE,QAAQ,CAAC,MAAM,OAAO,CAAC,CAAC;IACtC,2DAA2D;IAC3D,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;IACvB,gDAAgD;IAChD,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;IACvB,oDAAoD;IACpD,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IACrC,uDAAuD;IACvD,YAAY,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1C,0DAA0D;IAC1D,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,iEAAiE;IACjE,QAAQ,EAAE,CACR,IAAI,EAAE,MAAM,GAAG,MAAM,gBAAgB,CAAC,UAAU,CAAC,OAAO,CAAC,EACzD,OAAO,EAAE,MAAM,KACZ,IAAI,CAAC;CACX"}

package/dist/validate.d.ts

@@ -0,0 +1,11 @@
+import type { StandardSchemaV1 } from "@standard-schema/spec";
+/**
+ * Validate all fields against the schema and return a map of field name → error message.
+ */
+export declare function validateSchema(schema: StandardSchemaV1<Record<string, unknown>>, values: Record<string, unknown>): Promise<Record<string, string>>;
+/**
+ * Validate the full schema and extract the error for a specific field.
+ * Returns empty string if the field has no error.
+ */
+export declare function validateField(schema: StandardSchemaV1<Record<string, unknown>>, values: Record<string, unknown>, fieldName: string): Promise<string>;
+//# sourceMappingURL=validate.d.ts.map

package/dist/validate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"validate.d.ts","sourceRoot":"","sources":["../src/validate.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAG9D;;GAEG;AACH,wBAAsB,cAAc,CAClC,MAAM,EAAE,gBAAgB,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,EACjD,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAC9B,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAcjC;AAED;;;GAGG;AACH,wBAAsB,aAAa,CACjC,MAAM,EAAE,gBAAgB,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,EACjD,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC/B,SAAS,EAAE,MAAM,GAChB,OAAO,CAAC,MAAM,CAAC,CAGjB"}

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@barefootjs/form",
+  "version": "0.1.0",
+  "description": "Signal-based form management for BarefootJS",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "bun run build:js && bun run build:types",
+    "build:js": "bun build ./src/index.ts --outdir ./dist --format esm",
+    "build:types": "tsgo --emitDeclarationOnly --outDir ./dist",
+    "test": "bun test",
+    "clean": "rm -rf dist"
+  },
+  "keywords": [
+    "form",
+    "signals",
+    "reactive",
+    "barefoot"
+  ],
+  "author": "kobaken <kentafly88@gmail.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/piconic-ai/barefootjs",
+    "directory": "packages/form"
+  },
+  "peerDependencies": {
+    "@barefootjs/client": ">=0.0.1",
+    "@standard-schema/spec": "^1.0.0"
+  },
+  "dependencies": {
+    "@standard-schema/utils": "^0.3.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.0.0",
+    "zod": "^3.24.0"
+  }
+}

package/src/create-form.ts

@@ -0,0 +1,238 @@
+import type { StandardSchemaV1 } from "@standard-schema/spec";
+import { createSignal, createMemo, untrack } from "@barefootjs/client";
+import type { Signal, Memo } from "@barefootjs/client";
+import { validateSchema, validateField } from "./validate";
+import type {
+  CreateFormOptions,
+  FormReturn,
+  FieldReturn,
+  ValidateOn,
+} from "./types";
+
+interface FieldSignals {
+  value: Signal<unknown>;
+  error: Signal<string>;
+  touched: Signal<boolean>;
+  dirty: Signal<boolean>;
+}
+
+function isPrimitive(v: unknown): boolean {
+  return v === null || typeof v !== "object";
+}
+
+export function createForm<
+  TSchema extends StandardSchemaV1<Record<string, unknown>>,
+>(options: CreateFormOptions<TSchema>): FormReturn<TSchema> {
+  type Input = StandardSchemaV1.InferInput<TSchema>;
+
+  const {
+    schema,
+    defaultValues,
+    validateOn = "submit",
+    revalidateOn = "input",
+    onSubmit,
+  } = options;
+
+  // --- Internal state ---
+
+  const defaults = defaultValues as Record<string, unknown>;
+  const defaultKeys = Object.keys(defaults);
+  const fieldSignals = new Map<string, FieldSignals>();
+  const fieldCache = new Map<string, FieldReturn<unknown>>();
+  const validatedFields = new Set<string>();
+  const [isSubmitting, setIsSubmitting] = createSignal(false);
+  // Bump when fields are added so memos that iterate fieldSignals re-run
+  const [fieldVersion, setFieldVersion] = createSignal(0);
+
+  // --- Helpers ---
+
+  function getOrCreateFieldSignals(name: string): FieldSignals {
+    let signals = fieldSignals.get(name);
+    if (!signals) {
+      signals = {
+        value: createSignal<unknown>(defaults[name] ?? ""),
+        error: createSignal(""),
+        touched: createSignal(false),
+        dirty: createSignal(false),
+      };
+      fieldSignals.set(name, signals);
+      setFieldVersion((v) => v + 1);
+    }
+    return signals;
+  }
+
+  function getCurrentValues(): Record<string, unknown> {
+    return untrack(() => {
+      const values: Record<string, unknown> = {};
+      for (const key of defaultKeys) {
+        const signals = fieldSignals.get(key);
+        values[key] = signals ? signals.value[0]() : defaults[key];
+      }
+      return values;
+    });
+  }
+
+  function shouldValidate(name: string, trigger: ValidateOn): boolean {
+    const timing = validatedFields.has(name) ? revalidateOn : validateOn;
+    return timing === trigger;
+  }
+
+  async function runFieldValidation(name: string): Promise<void> {
+    const values = getCurrentValues();
+    const error = await validateField(schema, values, name);
+    const signals = fieldSignals.get(name);
+    if (signals) {
+      signals.error[1](error);
+    }
+    validatedFields.add(name);
+  }
+
+  // --- Field API ---
+
+  function field<K extends string & keyof Input>(
+    name: K,
+  ): FieldReturn<Input[K]> {
+    const cached = fieldCache.get(name);
+    if (cached) return cached as FieldReturn<Input[K]>;
+
+    const signals = getOrCreateFieldSignals(name);
+    const defaultValue = defaults[name] ?? "";
+    const defaultIsPrimitive = isPrimitive(defaultValue);
+    const serializedDefault = defaultIsPrimitive
+      ? undefined
+      : JSON.stringify(defaultValue);
+
+    function checkDirty(value: unknown): boolean {
+      if (defaultIsPrimitive) return value !== defaultValue;
+      return JSON.stringify(value) !== serializedDefault;
+    }
+
+    const fieldReturn: FieldReturn<Input[K]> = {
+      value: signals.value[0] as FieldReturn<Input[K]>['value'],
+      error: signals.error[0],
+      touched: signals.touched[0],
+      dirty: signals.dirty[0],
+
+      setValue(value: Input[K]) {
+        signals.value[1](value);
+        signals.dirty[1](checkDirty(value));
+        if (shouldValidate(name, "input")) {
+          runFieldValidation(name);
+        }
+      },
+
+      handleInput(e: Event) {
+        const target = e.target as HTMLInputElement;
+        const value = target.value as Input[K];
+        fieldReturn.setValue(value);
+      },
+
+      handleBlur() {
+        signals.touched[1](true);
+        if (shouldValidate(name, "blur")) {
+          runFieldValidation(name);
+        }
+      },
+    };
+
+    fieldCache.set(name, fieldReturn as FieldReturn<unknown>);
+    return fieldReturn;
+  }
+
+  // --- Derived state ---
+
+  const isDirty: Memo<boolean> = createMemo(() => {
+    fieldVersion(); // track field additions
+    for (const [, signals] of fieldSignals) {
+      if (signals.dirty[0]()) return true;
+    }
+    return false;
+  });
+
+  const errors: Memo<Record<string, string>> = createMemo(() => {
+    fieldVersion(); // track field additions
+    const result: Record<string, string> = {};
+    for (const [name, signals] of fieldSignals) {
+      const err = signals.error[0]();
+      if (err) result[name] = err;
+    }
+    return result;
+  });
+
+  const isValid: Memo<boolean> = createMemo(() => {
+    const e = errors();
+    for (const _ in e) return false;
+    return true;
+  });
+
+  // --- Form actions ---
+
+  async function handleSubmit(e: Event): Promise<void> {
+    e.preventDefault();
+
+    const values = getCurrentValues();
+
+    setIsSubmitting(true);
+
+    try {
+      const validationErrors = await validateSchema(schema, values);
+      const hasErrors = Object.keys(validationErrors).length > 0;
+
+      if (hasErrors) {
+        for (const [name, message] of Object.entries(validationErrors)) {
+          const signals = getOrCreateFieldSignals(name);
+          signals.error[1](message);
+          validatedFields.add(name);
+        }
+        setIsSubmitting(false);
+        return;
+      }
+
+      // Clear all errors on success
+      for (const [, signals] of fieldSignals) {
+        signals.error[1]("");
+      }
+
+      if (onSubmit) {
+        try {
+          await onSubmit(values as StandardSchemaV1.InferOutput<TSchema>);
+        } catch {
+          // onSubmit errors are silently caught to prevent unhandled rejections.
+          // Use onSubmit's own try/catch to handle errors explicitly.
+        }
+      }
+    } finally {
+      setIsSubmitting(false);
+    }
+  }
+
+  function reset(): void {
+    for (const [name, signals] of fieldSignals) {
+      signals.value[1](defaults[name] ?? "" as unknown);
+      signals.error[1]("");
+      signals.touched[1](false);
+      signals.dirty[1](false);
+    }
+    validatedFields.clear();
+  }
+
+  function setError(
+    name: string & keyof Input,
+    message: string,
+  ): void {
+    const signals = getOrCreateFieldSignals(name);
+    signals.error[1](message);
+    validatedFields.add(name);
+  }
+
+  return {
+    field,
+    isSubmitting,
+    isDirty,
+    isValid,
+    errors,
+    handleSubmit,
+    reset,
+    setError,
+  };
+}

package/src/index.ts

@@ -0,0 +1,8 @@
+export { createForm } from "./create-form";
+export { validateSchema, validateField } from "./validate";
+export type {
+  CreateFormOptions,
+  FormReturn,
+  FieldReturn,
+  ValidateOn,
+} from "./types";

package/src/types.ts

@@ -0,0 +1,67 @@
+import type { StandardSchemaV1 } from "@standard-schema/spec";
+import type { Reactive, Memo } from "@barefootjs/client";
+
+// --- Validation timing ---
+
+export type ValidateOn = "input" | "blur" | "submit";
+
+// --- Form options ---
+
+export interface CreateFormOptions<
+  TSchema extends StandardSchemaV1<Record<string, unknown>>,
+> {
+  schema: TSchema;
+  defaultValues: StandardSchemaV1.InferInput<TSchema>;
+  validateOn?: ValidateOn;
+  revalidateOn?: ValidateOn;
+  onSubmit?: (
+    data: StandardSchemaV1.InferOutput<TSchema>,
+  ) => void | Promise<void>;
+}
+
+// --- Field return ---
+
+export interface FieldReturn<V> {
+  /** Current field value (signal getter) */
+  value: Reactive<() => V>;
+  /** Current validation error message (signal getter) */
+  error: Reactive<() => string>;
+  /** Whether the field has been touched (signal getter) */
+  touched: Reactive<() => boolean>;
+  /** Whether the field value differs from defaultValue (signal getter) */
+  dirty: Reactive<() => boolean>;
+  /** Set field value directly */
+  setValue: (value: V) => void;
+  /** Input event handler — reads e.target.value */
+  handleInput: (e: Event) => void;
+  /** Blur event handler — marks touched and may trigger validation */
+  handleBlur: () => void;
+}
+
+// --- Form return ---
+
+export interface FormReturn<
+  TSchema extends StandardSchemaV1<Record<string, unknown>>,
+> {
+  /** Get a field controller by name (memoized) */
+  field: <K extends string & keyof StandardSchemaV1.InferInput<TSchema>>(
+    name: K,
+  ) => FieldReturn<StandardSchemaV1.InferInput<TSchema>[K]>;
+  /** Whether a submission is in progress (signal getter) */
+  isSubmitting: Reactive<() => boolean>;
+  /** Whether any field value differs from defaults (memo) */
+  isDirty: Memo<boolean>;
+  /** Whether all fields pass validation (memo) */
+  isValid: Memo<boolean>;
+  /** All current errors keyed by field name (memo) */
+  errors: Memo<Record<string, string>>;
+  /** Form submit handler — call with the submit event */
+  handleSubmit: (e: Event) => Promise<void>;
+  /** Reset all fields to default values and clear errors */
+  reset: () => void;
+  /** Manually set an error on a field (e.g. server-side errors) */
+  setError: (
+    name: string & keyof StandardSchemaV1.InferInput<TSchema>,
+    message: string,
+  ) => void;
+}

package/src/validate.ts

@@ -0,0 +1,37 @@
+import type { StandardSchemaV1 } from "@standard-schema/spec";
+import { getDotPath } from "@standard-schema/utils";
+
+/**
+ * Validate all fields against the schema and return a map of field name → error message.
+ */
+export async function validateSchema(
+  schema: StandardSchemaV1<Record<string, unknown>>,
+  values: Record<string, unknown>,
+): Promise<Record<string, string>> {
+  const result = await schema["~standard"].validate(values);
+  if (!result.issues) {
+    return {};
+  }
+
+  const errors: Record<string, string> = {};
+  for (const issue of result.issues) {
+    const path = getDotPath(issue);
+    if (path && !errors[path]) {
+      errors[path] = issue.message;
+    }
+  }
+  return errors;
+}
+
+/**
+ * Validate the full schema and extract the error for a specific field.
+ * Returns empty string if the field has no error.
+ */
+export async function validateField(
+  schema: StandardSchemaV1<Record<string, unknown>>,
+  values: Record<string, unknown>,
+  fieldName: string,
+): Promise<string> {
+  const errors = await validateSchema(schema, values);
+  return errors[fieldName] ?? "";
+}