solid-tiny-form 0.1.0 → 0.3.0

package/README.md

@@ -1,96 +1,144 @@
-# solid-tiny-form
-
-A tiny SolidJS form state manager inspired by `react-hook-form`, but designed around Solid's fine-grained reactivity and `createStore`.
-
-## Features
-
-- `createForm` API for registering fields, setting values, submitting, resetting, and validating.
-- Form state is stored in a Solid store from `solid-js/store`.
-- Pluggable resolver interface for schema validation libraries.
-- Built-in ArkType resolver via `arktypeResolver`.
-- Lightweight field-level rules for common cases.
-
-## Installation
-
-```sh
-pnpm add solid-tiny-form solid-js
-```
-
-Install ArkType when using the optional ArkType resolver:
-
-```sh
-pnpm add arktype
-```
-
-The ArkType adapter supports `arktype@^2.1.27` and is exposed from `solid-tiny-form/resolvers/arktype`.
-
-## Usage
-
-```tsx
-import { type } from "arktype";
-import { createForm } from "solid-tiny-form";
-import { arktypeResolver } from "solid-tiny-form/resolvers/arktype";
-
-const schema = type({
-  email: "string.email",
-  age: "number >= 18",
-});
-
-function Example() {
-  const form = createForm({
-    defaultValues: {
-      email: "",
-      age: 18,
-    },
-    resolver: arktypeResolver(schema),
-    mode: "onBlur",
-  });
-
-  const onSubmit = form.handleSubmit((values) => {
-    console.log(values);
-  });
-
-  return (
-    <form onSubmit={onSubmit}>
-      <input {...form.register("email")} />
-      <input type="number" {...form.register("age", { valueAsNumber: true })} />
-      <button disabled={form.formState.isSubmitting}>Submit</button>
-    </form>
-  );
-}
-```
-
-## API
-
-### `createForm(options)`
-
-Creates a form controller.
-
-```ts
-const form = createForm({
-  defaultValues,
-  resolver,
-  context,
-  mode: "onSubmit",
-});
-```
-
-Validation modes are `onSubmit`, `onBlur`, `onChange`, and `all`.
-
-### Resolver interface
-
-Resolvers receive current values and return parsed values plus field errors.
-
-```ts
-type Resolver<TValues, TContext> = (
-  values: TValues,
-  context: {
-    name?: string;
-    context?: TContext;
-  }
-) =>
-  | { values: TValues; errors: Record<string, FieldError> }
-  | Promise<{ values: TValues; errors: Record<string, FieldError> }>;
-```
-
-This keeps the core form independent from any validation library.
+# solid-tiny-form
+
+A tiny SolidJS form state manager designed around Solid's fine-grained reactivity and `createStore`.
+
+## Features
+
+- `createForm` API for creating fields, setting values, submitting, resetting, and validating.
+- Form state is stored in a Solid store from `solid-js/store`.
+- Pluggable resolver interface for schema validation libraries.
+- Built-in ArkType resolver via `arktypeResolver`.
+- Lightweight field-level rules for common cases.
+
+## Installation
+
+```sh
+pnpm add solid-tiny-form solid-js
+```
+
+Install ArkType when using the optional ArkType resolver:
+
+```sh
+pnpm add arktype
+```
+
+The ArkType adapter supports `arktype@^2.1.27` and is exposed from `solid-tiny-form/resolvers/arktype`.
+
+## Usage
+
+```tsx
+import { type } from "arktype";
+import { createForm } from "solid-tiny-form";
+import { arktypeResolver } from "solid-tiny-form/resolvers/arktype";
+
+const schema = type({
+  email: "string.email",
+  age: "number >= 18",
+});
+
+type FormValues = { email: string; age: number | undefined };
+
+function Example() {
+  const form = createForm<FormValues>({
+    defaultValues: {
+      email: "",
+      age: 18,
+    },
+    resolver: arktypeResolver<FormValues>(schema),
+    mode: "onBlur",
+  });
+
+  const email = form.createField("email");
+  const age = form.createField("age");
+
+  const onSubmit = form.handleSubmit((values) => {
+    console.log(values);
+  });
+
+  return (
+    <form onSubmit={onSubmit}>
+      <input
+        name={email.name}
+        value={email.value}
+        onInput={(event) => email.handleChange(event.currentTarget.value)}
+        onBlur={email.handleBlur}
+      />
+      <input
+        type="number"
+        name={age.name}
+        value={age.value ?? ""}
+        onInput={(event) => {
+          const value = event.currentTarget.value;
+          age.handleChange(value === "" ? undefined : Number(value));
+        }}
+        onBlur={age.handleBlur}
+      />
+      <button disabled={form.formState.isSubmitting}>Submit</button>
+    </form>
+  );
+}
+```
+
+## API
+
+### `createForm(options)`
+
+Creates a form controller.
+
+```ts
+const form = createForm({
+  defaultValues,
+  resolver,
+  context,
+  mode: "onSubmit",
+});
+```
+
+Validation modes are `onSubmit`, `onBlur`, `onChange`, and `all`.
+
+### `form.createField(name, options?)`
+
+Use value callbacks with third-party or custom components:
+
+```tsx
+const form = createForm<{ country: string }>({
+  defaultValues: { country: "" },
+  mode: "onBlur",
+});
+const country = form.createField("country", { required: "Choose a country" });
+
+// Select is a third-party component with a value callback.
+<Select
+  name={country.name}
+  value={country.value}
+  onValueChange={country.handleChange}
+  onBlur={country.handleBlur}
+/>
+<span>{country.error?.message}</span>
+```
+
+Paths and values are typed with `FieldPath` and `FieldPathValue`. `value`, `error`, `touched`, and `dirty` are reactive getters: read them in JSX or another reactive scope; **do not destructure them**. They also reflect programmatic updates and reset.
+
+Both handlers return `void`. Changes update dirty state; blur marks touched. Validation follows the form's mode. Rules persist across reset and subsequent bindings created without options. `handleChange` accepts the final value, including booleans and objects with a `target` property. It performs no event extraction or value conversion.
+
+`FieldOptions<TValue, TValues>` supports `required`, `min`, `max`, `pattern`, and `validate`. Convert values explicitly at the component boundary, as shown above for numbers (empty input becomes `undefined`). For checkboxes, bind `checked={field.value}` and pass `event.currentTarget.checked` to `handleChange`. Bind `name` explicitly. Do not spread a controller into input props or destructure its getters.
+
+This is a breaking API change: `createField` is the only field-binding API; no compatibility aliases are provided.
+
+### Resolver interface
+
+Resolvers receive current values and return parsed values plus field errors.
+
+```ts
+type Resolver<TValues, TContext> = (
+  values: TValues,
+  context: {
+    name?: string;
+    context?: TContext;
+  }
+) =>
+  | { values: TValues; errors: Record<string, FieldError> }
+  | Promise<{ values: TValues; errors: Record<string, FieldError> }>;
+```
+
+This keeps the core form independent from any validation library.

package/dist/index.d.mts

@@ -1,7 +1,4 @@
-import { a as FieldPath, c as FieldValues, d as RegisterOptions, f as Resolver, g as ValidationMode, h as SetValueOptions, i as FieldFlags, l as Form, m as ResolverResult, n as FieldError, o as FieldPathValue, p as ResolverContext, r as FieldErrors, s as FieldRegistration, t as CreateFormOptions, u as FormState } from "./types-CzHtMISe.mjs";
-
-//#region src/create-form.d.ts
+import { a as FieldFlags, c as FieldPathValue, d as FormState, f as Resolver, g as ValidationMode, h as SetValueOptions, i as FieldErrors, l as FieldValues, m as ResolverResult, n as FieldController, o as FieldOptions, p as ResolverContext, r as FieldError, s as FieldPath, t as CreateFormOptions, u as Form } from "./types-xBmBF3iK.mjs";
 /** Create a Solid-first form controller backed by createStore. */
-declare function createForm<TValues extends FieldValues = FieldValues, TContext = unknown>(options?: CreateFormOptions<TValues, TContext>): Form<TValues>;
-//#endregion
-export { type CreateFormOptions, type FieldError, type FieldErrors, type FieldFlags, type FieldPath, type FieldPathValue, type FieldRegistration, type FieldValues, type Form, type FormState, type RegisterOptions, type Resolver, type ResolverContext, type ResolverResult, type SetValueOptions, type ValidationMode, createForm };
+export declare function createForm<TValues extends FieldValues = FieldValues, TContext = unknown>(options?: CreateFormOptions<TValues, TContext>): Form<TValues>;
+export type { CreateFormOptions, FieldController, FieldError, FieldErrors, FieldFlags, FieldOptions, FieldPath, FieldPathValue, FieldValues, Form, FormState, Resolver, ResolverContext, ResolverResult, SetValueOptions, ValidationMode };

package/dist/index.mjs

@@ -1,5 +1,6 @@
+import { a as setPath, i as isEqual, n as getPath, r as isEmptyObject, t as cloneValue } from "./utils-0Ihz8msV.mjs";
 import { createStore, produce, reconcile, unwrap } from "solid-js/store";
-//#region src/create-form/async.ts
+// src/create-form/async.ts
 /** Run a promise from a synchronous event handler and surface failures globally. */
 function runAsync(task) {
 	task.catch((error) => {
@@ -8,67 +9,7 @@ function runAsync(task) {
 		});
 	});
 }
-//#endregion
-//#region src/utils.ts
-/** Return a dot path split into store path segments. */
-function toPath(name) {
-	return name.split(".").filter(Boolean);
-}
-/** Read a nested value from an object by dot path. */
-function getPath(source, name) {
-	let value = source;
-	for (const key of toPath(name)) {
-		if (value == null || typeof value !== "object") return;
-		value = value[key];
-	}
-	return value;
-}
-/** Set a nested value on a cloned object by dot path. */
-function setPath(source, name, value) {
-	const root = cloneValue(source);
-	const path = toPath(name);
-	let cursor = root;
-	for (const [index, key] of path.entries()) {
-		if (index === path.length - 1) {
-			cursor[key] = value;
-			break;
-		}
-		const next = cursor[key];
-		if (next == null || typeof next !== "object" || Array.isArray(next)) cursor[key] = {};
-		cursor = cursor[key];
-	}
-	return root;
-}
-/** Create a JSON-compatible deep clone. */
-function cloneValue(value) {
-	if (value == null || typeof value !== "object") return value;
-	return JSON.parse(JSON.stringify(value));
-}
-/** Compare two JSON-compatible values. */
-function isEqual(left, right) {
-	return JSON.stringify(left) === JSON.stringify(right);
-}
-/** Return true when an object has no own enumerable keys. */
-function isEmptyObject(value) {
-	return Object.keys(value).length === 0;
-}
-/** Extract a form value from a DOM event or raw value. */
-function getEventValue(valueOrEvent) {
-	if (!isEventLike(valueOrEvent)) return valueOrEvent;
-	const target = valueOrEvent.currentTarget ?? valueOrEvent.target;
-	if (!isValueTarget(target)) return;
-	if (target.type === "checkbox") return Boolean(target.checked);
-	if (target.type === "number") return target.value === "" ? void 0 : Number(target.value);
-	return target.value;
-}
-function isEventLike(value) {
-	return value != null && typeof value === "object" && ("target" in value || "currentTarget" in value);
-}
-function isValueTarget(target) {
-	return target != null && typeof target === "object" && ("value" in target || "checked" in target);
-}
-//#endregion
-//#region src/create-form/state.ts
+// src/create-form/state.ts
 /** Create the initial form state object. */
 function createInitialFormState(defaultValues) {
 	return {
@@ -92,24 +33,22 @@ function mergeValidationErrors(currentErrors, name, errors) {
 		...unwrap(currentErrors),
 		[name]: errors[name]
 	};
-	if (!errors[name]) delete nextErrors[name];
+	if (!errors[name]) Reflect.deleteProperty(nextErrors, name);
 	return nextErrors;
 }
 /** Calculate the next dirty field map after one field value changes. */
 function createNextDirtyFields(dirtyFields, values, defaultValues, name) {
 	const nextDirtyFields = { ...unwrap(dirtyFields) };
 	if (!isEqual(getPath(values, name), getPath(defaultValues, name))) nextDirtyFields[name] = true;
-	else delete nextDirtyFields[name];
+	else Reflect.deleteProperty(nextDirtyFields, name);
 	return {
 		dirtyFields: nextDirtyFields,
 		isDirty: !isEmptyObject(nextDirtyFields)
 	};
 }
-//#endregion
-//#region src/validation/rules.ts
-/** Validate one field with built-in registration rules. */
-async function validateField(name, value, values, options) {
-	return validateRequired(name, value, options) ?? validateMin(name, value, options) ?? validateMax(name, value, options) ?? validatePattern(name, value, options) ?? await validateCustom(name, value, values, options);
+// src/validation/rules.ts
+function isEmpty(value) {
+	return value === null || value === "" || Array.isArray(value) && value.length === 0;
 }
 function validateRequired(name, value, options) {
 	if (!(options.required && isEmpty(value))) return;
@@ -118,6 +57,13 @@ function validateRequired(name, value, options) {
 		type: "required"
 	};
 }
+function readRule(rule) {
+	if (typeof rule === "number") return {
+		message: void 0,
+		value: rule
+	};
+	return rule;
+}
 function validateMin(name, value, options) {
 	const min = readRule(options.min);
 	if (!min || isEmpty(value) || Number(value) >= min.value) return;
@@ -134,6 +80,13 @@ function validateMax(name, value, options) {
 		type: "max"
 	};
 }
+function readPattern(rule) {
+	if (rule instanceof RegExp) return {
+		message: void 0,
+		value: rule
+	};
+	return rule;
+}
 function validatePattern(name, value, options) {
 	const pattern = readPattern(options.pattern);
 	if (!pattern || typeof value !== "string" || pattern.value.test(value)) return;
@@ -156,59 +109,62 @@ async function validateCustom(name, value, values, options) {
 	};
 	return result;
 }
-function isEmpty(value) {
-	return value == null || value === "" || Array.isArray(value) && value.length === 0;
-}
-function readRule(rule) {
-	if (typeof rule === "number") return {
-		value: rule,
-		message: void 0
-	};
-	return rule;
+/** Validate one field with built-in field rules. */
+async function validateField(name, value, values, options) {
+	return validateRequired(name, value, options) ?? validateMin(name, value, options) ?? validateMax(name, value, options) ?? validatePattern(name, value, options) ?? await validateCustom(name, value, values, options);
 }
-function readPattern(rule) {
-	if (rule instanceof RegExp) return {
-		value: rule,
-		message: void 0
-	};
-	return rule;
+// src/create-form.ts
+function pickFieldErrors(errors, name) {
+	if (!errors[name]) return {};
+	return { [name]: errors[name] };
 }
-//#endregion
-//#region src/create-form.ts
 /** Create a Solid-first form controller backed by createStore. */
 function createForm(options = {}) {
 	const mode = options.mode ?? "onSubmit";
 	const fieldOptions = /* @__PURE__ */ new Map();
-	const [formState, setFormState] = createStore(createInitialFormState(cloneValue(options.defaultValues ?? {})));
-	function register(name, options) {
-		if (options) fieldOptions.set(name, options);
-		return {
-			name,
-			get value() {
-				return getValue(name);
-			},
-			get checked() {
-				return Boolean(getValue(name));
-			},
-			onInput(event) {
-				runAsync(setValue(name, readInputValue(name, event), { shouldValidate: mode === "onChange" || mode === "all" }));
-			},
-			onChange(event) {
-				runAsync(setValue(name, readInputValue(name, event), { shouldValidate: mode === "onChange" || mode === "all" }));
-			},
-			onBlur() {
-				setFormState("touchedFields", produce((touchedFields) => {
-					touchedFields[name] = true;
-				}));
-				if (mode === "onBlur" || mode === "all") runAsync(trigger(name));
-			}
-		};
+	const defaultValues = cloneValue(options.defaultValues ?? {});
+	const [formState, setFormState] = createStore(createInitialFormState(defaultValues));
+	function getValue(name) {
+		return getPath(formState.values, name);
+	}
+	async function collectFieldErrors(errors, name, values) {
+		for (const [fieldName, rules] of fieldOptions) {
+			if (name && fieldName !== name) continue;
+			const error = await validateField(fieldName, getPath(values, fieldName), values, rules);
+			if (error) errors[fieldName] = error;
+		}
+	}
+	async function collectResolverErrors(errors, name, values) {
+		if (!options.resolver) return;
+		const result = await options.resolver(values, {
+			context: options.context,
+			name
+		});
+		Object.assign(errors, name ? pickFieldErrors(result.errors, name) : result.errors);
+		if (isEmptyObject(result.errors)) setFormState("values", cloneValue(result.values));
+	}
+	async function collectErrors(name, values) {
+		const errors = {};
+		await collectFieldErrors(errors, name, values);
+		await collectResolverErrors(errors, name, values);
+		return errors;
 	}
 	function getValues() {
 		return unwrap(formState.values);
 	}
-	function getValue(name) {
-		return getPath(formState.values, name);
+	async function trigger(name) {
+		setFormState("isValidating", true);
+		const errors = await collectErrors(name, getValues());
+		const nextErrors = mergeValidationErrors(formState.errors, name, errors);
+		setFormState("errors", reconcile(nextErrors));
+		setFormState("isValid", isEmptyObject(nextErrors));
+		setFormState("isValidating", false);
+		return name ? !nextErrors[name] : isEmptyObject(errors);
+	}
+	function updateDirtyField(name) {
+		const nextDirty = createNextDirtyFields(formState.dirtyFields, formState.values, formState.defaultValues, name);
+		setFormState("dirtyFields", reconcile(nextDirty.dirtyFields));
+		setFormState("isDirty", nextDirty.isDirty);
 	}
 	async function setValue(name, value, setValueOptions = {}) {
 		setFormState("values", setPath(getValues(), name, value));
@@ -218,6 +174,33 @@ function createForm(options = {}) {
 		if (setValueOptions.shouldDirty ?? true) updateDirtyField(name);
 		if (setValueOptions.shouldValidate) await trigger(name);
 	}
+	function createField(name, options) {
+		if (options) fieldOptions.set(name, options);
+		return {
+			get dirty() {
+				return Boolean(formState.dirtyFields[name]);
+			},
+			get error() {
+				return formState.errors[name];
+			},
+			handleBlur() {
+				setFormState("touchedFields", produce((touchedFields) => {
+					touchedFields[name] = true;
+				}));
+				if (mode === "onBlur" || mode === "all") runAsync(trigger(name));
+			},
+			handleChange(value) {
+				runAsync(setValue(name, value, { shouldValidate: mode === "onChange" || mode === "all" }));
+			},
+			name,
+			get touched() {
+				return Boolean(formState.touchedFields[name]);
+			},
+			get value() {
+				return getValue(name);
+			}
+		};
+	}
 	function setError(name, error) {
 		setFormState("errors", produce((errors) => {
 			errors[name] = error;
@@ -226,56 +209,25 @@ function createForm(options = {}) {
 	}
 	function clearErrors(name) {
 		if (name) setFormState("errors", produce((errors) => {
-			delete errors[name];
+			Reflect.deleteProperty(errors, name);
 		}));
 		else setFormState("errors", reconcile({}));
 		setFormState("isValid", isEmptyObject(formState.errors));
 	}
-	async function trigger(name) {
-		setFormState("isValidating", true);
-		const errors = await collectErrors(name, getValues());
-		const nextErrors = mergeValidationErrors(formState.errors, name, errors);
-		setFormState("errors", reconcile(nextErrors));
-		setFormState("isValid", isEmptyObject(nextErrors));
-		setFormState("isValidating", false);
-		return name ? !nextErrors[name] : isEmptyObject(errors);
-	}
-	async function collectErrors(name, values) {
-		const errors = {};
-		await collectRegisteredErrors(errors, name, values);
-		await collectResolverErrors(errors, name, values);
-		return errors;
-	}
-	async function collectRegisteredErrors(errors, name, values) {
-		for (const [fieldName, registerOptions] of fieldOptions) {
-			if (name && fieldName !== name) continue;
-			const error = await validateField(fieldName, getPath(values, fieldName), values, registerOptions);
-			if (error) errors[fieldName] = error;
-		}
-	}
-	async function collectResolverErrors(errors, name, values) {
-		if (!options.resolver) return;
-		const result = await options.resolver(values, {
-			name,
-			context: options.context
-		});
-		Object.assign(errors, name ? pickFieldErrors(result.errors, name) : result.errors);
-		if (isEmptyObject(result.errors)) setFormState("values", cloneValue(result.values));
-	}
 	function reset(values) {
 		const nextDefaultValues = cloneValue(values ?? options.defaultValues ?? {});
 		setFormState({
-			values: cloneValue(nextDefaultValues),
 			defaultValues: nextDefaultValues,
-			errors: {},
-			touchedFields: {},
 			dirtyFields: {},
+			errors: {},
 			isDirty: false,
+			isSubmitted: false,
+			isSubmitting: false,
 			isValid: true,
 			isValidating: false,
-			isSubmitting: false,
-			isSubmitted: false,
-			submitCount: 0
+			submitCount: 0,
+			touchedFields: {},
+			values: cloneValue(nextDefaultValues)
 		});
 	}
 	function handleSubmit(onValid, onInvalid) {
@@ -286,44 +238,24 @@ function createForm(options = {}) {
 			setFormState("isSubmitting", true);
 			const isValid = await trigger();
 			try {
-				if (isValid) await onValid(getValues(), event);
-				else await onInvalid?.(formState.errors, event);
+				await (isValid ? onValid(getValues(), event) : onInvalid?.(formState.errors, event));
 			} finally {
 				setFormState("isSubmitting", false);
 			}
 		};
 	}
-	function updateDirtyField(name) {
-		const nextDirty = createNextDirtyFields(formState.dirtyFields, formState.values, formState.defaultValues, name);
-		setFormState("dirtyFields", reconcile(nextDirty.dirtyFields));
-		setFormState("isDirty", nextDirty.isDirty);
-	}
-	function readInputValue(name, event) {
-		return transformValue(name, getEventValue(event));
-	}
-	function transformValue(name, value) {
-		const options = fieldOptions.get(name);
-		if (options?.setValueAs) return options.setValueAs(value);
-		if (options?.valueAsNumber) return value === "" || value == null ? void 0 : Number(value);
-		return value;
-	}
 	return {
+		clearErrors,
+		createField,
 		formState,
-		setFormState,
-		register,
-		getValues,
 		getValue,
-		setValue,
-		setError,
-		clearErrors,
-		trigger,
+		getValues,
+		handleSubmit,
 		reset,
-		handleSubmit
+		setError,
+		setFormState,
+		setValue,
+		trigger
 	};
 }
-function pickFieldErrors(errors, name) {
-	if (!errors[name]) return {};
-	return { [name]: errors[name] };
-}
-//#endregion
 export { createForm };

package/dist/resolvers/arktype.d.mts

@@ -1,10 +1,4 @@
-import { c as FieldValues, f as Resolver } from "../types-CzHtMISe.mjs";
+import { f as Resolver, l as FieldValues } from "../types-xBmBF3iK.mjs";
 import { Type } from "arktype";
-
-//#region src/resolvers/arktype.d.ts
-/** A supported ArkType schema. */
-type ArkTypeSchema<TValues extends FieldValues = FieldValues> = Type<TValues>;
 /** Create a resolver for ArkType schemas. */
-declare function arktypeResolver<TValues extends FieldValues>(schema: ArkTypeSchema<TValues>): Resolver<TValues>;
-//#endregion
-export { ArkTypeSchema, arktypeResolver };
+export declare function arktypeResolver<TValues extends FieldValues>(schema: Type<TValues>): Resolver<TValues>;

package/dist/resolvers/arktype.mjs

@@ -1,13 +1,20 @@
-//#region src/resolvers/arktype.ts
-/** Create a resolver for ArkType schemas. */
-function arktypeResolver(schema) {
-	return (values) => {
-		const result = schema(values);
-		const errors = readArkTypeErrors(result);
-		return {
-			errors: errors ?? {},
-			values: errors ? values : result
-		};
+import { n as getPath } from "../utils-0Ihz8msV.mjs";
+// src/resolvers/arktype.ts
+function isArkErrors(value) {
+	return Array.isArray(value) && "byPath" in value && typeof value.summary === "string";
+}
+function readMessage(value) {
+	if (typeof value === "string") return value;
+	if (value && typeof value === "object") {
+		const candidate = value;
+		return candidate.message ?? candidate.summary ?? candidate.toString?.() ?? "Invalid field value";
+	}
+	return "Invalid field value";
+}
+function collectByPath(errors, byPath) {
+	for (const [path, value] of Object.entries(byPath)) errors[path || "root"] = {
+		message: readMessage(value),
+		type: "arktype"
 	};
 }
 function readArkTypeErrors(result) {
@@ -20,22 +27,39 @@ function readArkTypeErrors(result) {
 	};
 	return errors;
 }
-function isArkErrors(value) {
-	return Array.isArray(value) && "byPath" in value && typeof value.summary === "string";
+function joinPath(name, path) {
+	if (!path || path === "root") return name;
+	return `${name}.${path}`;
 }
-function collectByPath(errors, byPath) {
-	for (const [path, value] of Object.entries(byPath)) errors[path || "root"] = {
-		message: readMessage(value),
-		type: "arktype"
-	};
+function prefixFieldErrors(name, errors) {
+	if (errors.root) return { [name]: errors.root };
+	return Object.fromEntries(Object.entries(errors).map(([path, error]) => [joinPath(name, path), error]));
 }
-function readMessage(value) {
-	if (typeof value === "string") return value;
-	if (value && typeof value === "object") {
-		const candidate = value;
-		return candidate.message ?? candidate.summary ?? candidate.toString?.() ?? "Invalid field value";
+function validateField(schema, values, name) {
+	try {
+		const errors = readArkTypeErrors(schema.get(...name.split("."))(getPath(values, name)));
+		return {
+			errors: errors ? prefixFieldErrors(name, errors) : {},
+			values
+		};
+	} catch (error) {
+		console.error(error);
+		return {
+			errors: {},
+			values
+		};
 	}
-	return "Invalid field value";
 }
-//#endregion
+/** Create a resolver for ArkType schemas. */
+function arktypeResolver(schema) {
+	return (values, ctx) => {
+		if (ctx.name) return validateField(schema, values, ctx.name);
+		const result = schema(values);
+		const errors = readArkTypeErrors(result);
+		return {
+			errors: errors ?? {},
+			values: errors ? values : result
+		};
+	};
+}
 export { arktypeResolver };

package/dist/{types-CzHtMISe.d.mts → types-xBmBF3iK.d.mts}

@@ -1,13 +1,11 @@
 import { SetStoreFunction, Store } from "solid-js/store";
-
-//#region src/types.d.ts
 /** The object shape managed by a form. */
 type FieldValues = object;
 /** A dot-separated field path. */
 type FieldPath<TValues extends FieldValues = FieldValues> = keyof TValues extends never ? string : ObjectPath<TValues>;
 /** The value type represented by a dot-separated field path. */
 type FieldPathValue<TValues extends FieldValues, TName extends FieldPath<TValues>> = PathValue<TValues, TName>;
-type ObjectPath<TValue> = TValue extends FieldValues ? { [TKey in Extract<keyof TValue, string>]: TValue[TKey] extends FieldValues ? TKey | `${TKey}.${ObjectPath<TValue[TKey]>}` : TKey }[Extract<keyof TValue, string>] : never;
+type ObjectPath<TValue> = TValue extends FieldValues ? { [TKey in Extract<keyof TValue, string>]: TValue[TKey] extends FieldValues ? TKey | `${TKey}.${ObjectPath<TValue[TKey]>}` : TKey; }[Extract<keyof TValue, string>] : never;
 type PathValue<TValue, TName> = TName extends `${infer TKey}.${infer TRest}` ? TKey extends keyof TValue ? PathValue<TValue[TKey], TRest> : unknown : TName extends keyof TValue ? TValue[TName] : unknown;
 /** A validation error associated with a field path. */
 interface FieldError {
@@ -62,7 +60,7 @@ interface ResolverContext<TValues extends FieldValues = FieldValues, TContext =
 /** Pluggable validation function for schema libraries or custom logic. */
 type Resolver<TValues extends FieldValues = FieldValues, TContext = unknown> = (values: TValues, context: ResolverContext<TValues, TContext>) => ResolverResult<TValues> | Promise<ResolverResult<TValues>>;
 /** Built-in field-level validation rules. */
-interface RegisterOptions<TValue = unknown, TValues extends FieldValues = FieldValues> {
+interface FieldOptions<TValue = unknown, TValues extends FieldValues = FieldValues> {
   /** Maximum string length or numeric value. */
   max?: number | {
     value: number;
@@ -80,26 +78,24 @@ interface RegisterOptions<TValue = unknown, TValues extends FieldValues = FieldV
   };
   /** Whether the field is required. */
   required?: boolean | string;
-  /** Custom value transform before storing. */
-  setValueAs?: (value: unknown) => TValue;
   /** Custom synchronous or asynchronous validation rule. */
   validate?: (value: TValue, values: TValues) => boolean | string | FieldError | Promise<boolean | string | FieldError>;
-  /** Convert input values to numbers before storing them. */
-  valueAsNumber?: boolean;
 }
-/** Props and helpers returned by register. */
-interface FieldRegistration<TValue = unknown> {
-  /** Reactive checked getter for checkbox inputs. */
-  readonly checked: boolean;
-  /** Field name. */
-  name: string;
-  /** Solid blur handler that marks the field as touched. */
-  onBlur: () => void;
-  /** Solid change handler that updates form state. */
-  onChange: (event: Event) => void;
-  /** Solid input handler that updates form state. */
-  onInput: (event: Event) => void;
-  /** Reactive value getter suitable for spreading into Solid JSX. */
+/** Value-driven custom component bindings. Read getters in a reactive scope. */
+interface FieldController<TValue = unknown, TName extends string = string> {
+  /** Whether the field differs from its default. */
+  readonly dirty: boolean;
+  /** Current validation error. */
+  readonly error: FieldError | undefined;
+  /** Mark touched and validate according to mode. */
+  handleBlur: () => void;
+  /** Store a final value without DOM extraction or conversion. */
+  handleChange: (value: TValue) => void;
+  /** Field path. */
+  readonly name: TName;
+  /** Whether the field has been blurred. */
+  readonly touched: boolean;
+  /** Current field value. */
   readonly value: TValue;
 }
 /** Validation trigger mode. */
@@ -109,7 +105,7 @@ interface CreateFormOptions<TValues extends FieldValues = FieldValues, TContext
   /** Extra context passed to the resolver. */
   context?: TContext;
   /** Initial form values. */
-  defaultValues?: Partial<TValues>;
+  defaultValues?: Partial<NoInfer<TValues>>;
   /** When validation should run automatically. Defaults to onSubmit. */
   mode?: ValidationMode;
   /** Schema or custom validation resolver. */
@@ -119,6 +115,8 @@ interface CreateFormOptions<TValues extends FieldValues = FieldValues, TContext
 interface Form<TValues extends FieldValues = FieldValues> {
   /** Clear all errors or one field error. */
   clearErrors: (name?: FieldPath<TValues>) => void;
+  /** Configure rules and receive value-driven component bindings. */
+  createField: <TName extends FieldPath<TValues>>(name: TName, options?: FieldOptions<FieldPathValue<TValues, TName>, TValues>) => FieldController<FieldPathValue<TValues, TName>, TName>;
   /** Reactive form state. */
   formState: Store<FormState<TValues>>;
   /** Read a single field value. */
@@ -127,8 +125,6 @@ interface Form<TValues extends FieldValues = FieldValues> {
   getValues: () => TValues;
   /** Submit helper that validates before calling the valid handler. */
   handleSubmit: (onValid: (values: TValues, event?: Event) => void | Promise<void>, onInvalid?: (errors: FieldErrors<TValues>, event?: Event) => void | Promise<void>) => (event?: Event) => Promise<void>;
-  /** Register a field and receive Solid-friendly input props. */
-  register: <TName extends FieldPath<TValues>>(name: TName, options?: RegisterOptions<FieldPathValue<TValues, TName>, TValues>) => FieldRegistration<FieldPathValue<TValues, TName>>;
   /** Reset values and form state. */
   reset: (values?: Partial<TValues>) => void;
   /** Set a field error. */
@@ -149,5 +145,4 @@ interface SetValueOptions {
   /** Trigger validation after the value is set. */
   shouldValidate?: boolean;
 }
-//#endregion
-export { FieldPath as a, FieldValues as c, RegisterOptions as d, Resolver as f, ValidationMode as g, SetValueOptions as h, FieldFlags as i, Form as l, ResolverResult as m, FieldError as n, FieldPathValue as o, ResolverContext as p, FieldErrors as r, FieldRegistration as s, CreateFormOptions as t, FormState as u };
+export { FieldFlags as a, FieldPathValue as c, FormState as d, Resolver as f, ValidationMode as g, SetValueOptions as h, FieldErrors as i, FieldValues as l, ResolverResult as m, FieldController as n, FieldOptions as o, ResolverContext as p, FieldError as r, FieldPath as s, CreateFormOptions as t, Form as u };

package/dist/utils-0Ihz8msV.mjs

@@ -0,0 +1,44 @@
+// src/utils.ts
+/** Return a dot path split into store path segments. */
+function toPath(name) {
+	return name.split(".").filter(Boolean);
+}
+/** Read a nested value from an object by dot path. */
+function getPath(source, name) {
+	let value = source;
+	for (const key of toPath(name)) {
+		if (value === null || typeof value !== "object") return;
+		value = value[key];
+	}
+	return value;
+}
+/** Create a JSON-compatible deep clone. */
+function cloneValue(value) {
+	if (value === null || typeof value !== "object") return value;
+	return JSON.parse(JSON.stringify(value));
+}
+/** Set a nested value on a cloned object by dot path. */
+function setPath(source, name, value) {
+	const root = cloneValue(source);
+	const path = toPath(name);
+	let cursor = root;
+	for (const [index, key] of path.entries()) {
+		if (index === path.length - 1) {
+			cursor[key] = value;
+			break;
+		}
+		const next = cursor[key];
+		if (next === null || typeof next !== "object" || Array.isArray(next)) cursor[key] = {};
+		cursor = cursor[key];
+	}
+	return root;
+}
+/** Compare two JSON-compatible values. */
+function isEqual(left, right) {
+	return JSON.stringify(left) === JSON.stringify(right);
+}
+/** Return true when an object has no own enumerable keys. */
+function isEmptyObject(value) {
+	return Object.keys(value).length === 0;
+}
+export { setPath as a, isEqual as i, getPath as n, isEmptyObject as r, cloneValue as t };

package/package.json

@@ -1,72 +1,71 @@
 {
-  "devDependencies": {
-    "@biomejs/biome": "2.4.16",
-    "@solidjs/testing-library": "^0.8.10",
-    "@testing-library/jest-dom": "^6.9.1",
-    "@types/node": "^25.9.2",
-    "@typescript/native-preview": "7.0.0-dev.20260608.1",
-    "@vitest/ui": "^4.1.8",
-    "arktype": "^2.2.0",
-    "bumpp": "^11.1.0",
-    "jsdom": "^29.1.1",
-    "tsdown": "^0.22.2",
-    "typescript": "^5.9.3",
-    "ultracite": "7.8.2",
-    "vite": "^8.0.16",
-    "vite-plugin-solid": "^2.11.12",
-    "vitest": "^4.1.8"
-  },
   "name": "solid-tiny-form",
-  "peerDependencies": {
-    "arktype": "^2.1.27",
-    "solid-js": "^1.9.7"
-  },
-  "type": "module",
-  "version": "0.1.0",
-  "peerDependenciesMeta": {
-    "arktype": {
-      "optional": true
-    }
-  },
+  "version": "0.3.0",
   "description": "A tiny SolidJS form state manager with pluggable validation",
-  "author": "solid tiny",
+  "keywords": [
+    "arktype",
+    "form",
+    "reactive",
+    "solid",
+    "solidjs",
+    "validation"
+  ],
+  "homepage": "https://codeberg.org/solid-tiny/solid-tiny-form#readme",
+  "bugs": {
+    "url": "https://codeberg.org/solid-tiny/solid-tiny-form/issues"
+  },
   "license": "MIT",
-  "homepage": "https://github.com/sxl-cc/solid-tiny-form#readme",
+  "author": "solid tiny",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/sxl-cc/solid-tiny-form.git"
-  },
-  "bugs": {
-    "url": "https://github.com/sxl-cc/solid-tiny-form/issues"
+    "url": "git+https://codeberg.org/solid-tiny/solid-tiny-form.git"
   },
   "files": [
     "dist"
   ],
+  "type": "module",
   "sideEffects": false,
-  "keywords": [
-    "solidjs",
-    "solid",
-    "form",
-    "reactive",
-    "validation",
-    "arktype"
-  ],
   "types": "./dist/index.d.mts",
   "exports": {
     ".": "./dist/index.mjs",
     "./resolvers/arktype": "./dist/resolvers/arktype.mjs",
     "./package.json": "./package.json"
   },
+  "devDependencies": {
+    "@solidjs/testing-library": "^0.8.10",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@types/node": "^25.9.9",
+    "arktype": "^2.2.9",
+    "bumpp": "^12.3.0",
+    "jsdom": "^29.1.1",
+    "oxfmt": "^0.75.0",
+    "oxlint": "^1.93.0",
+    "tsdown": "^0.23.7",
+    "typescript": "^6.0.3",
+    "ultracite": "8.1.1",
+    "vite": "^8.3.7",
+    "vite-plugin-solid": "^2.11.15",
+    "vitest": "^5.1.0"
+  },
+  "peerDependencies": {
+    "arktype": "^2.2.3",
+    "solid-js": "^1.9.7"
+  },
+  "peerDependenciesMeta": {
+    "arktype": {
+      "optional": true
+    }
+  },
   "scripts": {
     "build": "tsdown",
-    "dev": "vite -c ./playground/vite.config.ts",
-    "test": "vitest run",
-    "test:ui": "vitest --ui",
-    "tc": "tsgo --noEmit --skipLibCheck",
     "bump": "pnpm bumpp --no-push",
-    "prepublish": "pnpm build",
     "check": "ultracite check",
     "check:error": "ultracite check --diagnostic-level error",
-    "fix": "ultracite fix"
+    "dev": "vite -c ./playground/vite.config.ts",
+    "fix": "ultracite fix",
+    "prepublish": "pnpm build",
+    "tc": "tsc --noEmit --skipLibCheck",
+    "test": "vitest run",
+    "test:ui": "vitest --ui"
   }
 }