@shivaedev/form 0.14.0 → 0.15.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 0.15.0 - 2026-11-04
+
+### Added
+
+- `Field.number({ optional, min, max, integer })` supplies a finite numeric string codec with inclusive bounds and blank-as-null optional values. `numberInput` binds the encoded text to an input without losing invalid input.
+- `Field.list(item, { min, max })` bounds arrays with native Schema checks. The React `useList` hook adds, edits and removes items and exposes feedback for each current item.
+
 ## 0.14.0 - 2026-11-03
 
 ### Added

package/README.md

@@ -293,6 +293,70 @@ Read the message at the element's **current** index: in React, `useAtomValue(ans
 
 Without a selector for an array, handler errors fall back to index paths. They remain at that index while its input value matches, even if a different element with the same value moves there. Arrays nested inside an element also use index paths. Use immutable value updates and stable, unique keys for top-level arrays whose errors must follow elements.
 
+### Numeric inputs
+
+```tsx
+import * as Field from "@shivaedev/form/field.ts";
+import { numberInput } from "@shivaedev/form/adapters/numberInput.ts";
+import { useField } from "@shivaedev/form/adapters/react.ts";
+
+const numbers = form(Schema.Struct({ amount: Field.number({ optional: true, min: 0, max: 100, integer: true }) }), {
+	initialValues: { amount: "" },
+	onSubmit: Effect.succeed,
+});
+
+function Amount() {
+	const amount = useField(numbers, "amount");
+	return (
+		<>
+			<input {...numberInput(amount)} />
+			<span role="alert">{amount.error}</span>
+		</>
+	);
+}
+```
+
+`Field.number` holds a string and decodes to a finite number. `optional: true` decodes empty or whitespace-only input to `null`; encoding `null` gives `""`. Without it, blank input is required. `min` and `max` are inclusive; `integer: true` rejects fractions. Omit `integer` to accept fractions and omit either bound for an open range. Invalid, non-finite and out-of-range values prevent submission.
+
+`numberInput(field)` supplies `name`, `value`, `onInput`, `onBlur`, `type: "text"` and `inputMode: "decimal"` for a string-valued field. A text input preserves invalid text so it can display Schema feedback; a native number input can erase that text before the form receives it. Wording and layout remain application choices.
+
+### Bounded lists
+
+```tsx
+import * as Field from "@shivaedev/form/field.ts";
+import { useList } from "@shivaedev/form/adapters/useList.ts";
+
+const quickAmounts = form(Schema.Struct({ amounts: Field.list(Field.number({ min: 1 }), { max: 5 }) }), {
+	initialValues: { amounts: ["1", "2"] },
+	onSubmit: Effect.succeed,
+});
+
+function QuickAmounts() {
+	const amounts = useList(quickAmounts, "amounts");
+	return (
+		<>
+			{amounts.items.map((item, index) => (
+				<div key={index}>
+					<input {...numberInput({ name: String(index), value: item.value, onChange: item.onChange, onBlur: amounts.onBlur })} />
+					<span role="alert">{item.error}</span>
+					<button type="button" onClick={item.onRemove}>
+						Remove
+					</button>
+				</div>
+			))}
+			<button type="button" onClick={() => amounts.add("")}>
+				Add amount
+			</button>
+			<span role="alert">{amounts.error}</span>
+		</>
+	);
+}
+```
+
+`Field.list(item, { max, min? })` returns a native array schema with a required maximum count and optional minimum count. An omitted minimum permits an empty list. Bounds validate the current array, including direct edits: adding beyond `max` or removing below `min` displays list feedback and prevents submission. The binding keeps the edit available for correction.
+
+`useList(form, name)` edits a top-level array field through the existing form session. `add(encodedItem)` appends an item; each entry of `items` exposes its encoded `value`, `onChange(encodedItem)`, `onRemove()` and `error`. `onBlur()` touches the list. Item errors use `errorAt([name, index])`, and `error` retains the list summary. Schema errors track current positions. For object items, supply stable keys through `arrayKeys` and use the same keys in React; handler rejections then follow the existing keyed-array rules described above. Nested objects remain whole-item edits.
+
 ### Choices and nullable inputs
 
 ```ts
@@ -311,14 +375,17 @@ For a form made with these fields, `order.choices("visibility")` returns the enc
 
 Import the module that defines a name; there is no root entry.
 
-| Module                              | Application-facing exports                                                                |
-| ----------------------------------- | ----------------------------------------------------------------------------------------- |
-| `@shivaedev/form/form.ts`           | `form(schema, config)`                                                                    |
-| `@shivaedev/form/shape.ts`          | `Form`, `Submitter`, `FieldFailure`, `Invalid` and the field types they use               |
-| `@shivaedev/form/fieldRejection.ts` | `rejecting`, `fieldRejectionOf`, `FieldRejection`, `RejectField`, `FieldRejectionMapping` |
-| `@shivaedev/form/adapters/react.ts` | `useField`, `useSubmit`, `useDirty`, `usePersistedDraft`, `DraftSessionContext`           |
-| `@shivaedev/form/draftSession.ts`   | `draftSession(id)`                                                                        |
-| `@shivaedev/form/emptyAsNull.ts`    | `emptyAsNull`                                                                             |
+| Module                                    | Application-facing exports                                                                |
+| ----------------------------------------- | ----------------------------------------------------------------------------------------- |
+| `@shivaedev/form/form.ts`                 | `form(schema, config)`                                                                    |
+| `@shivaedev/form/shape.ts`                | `Form`, `Submitter`, `FieldFailure`, `Invalid` and the field types they use               |
+| `@shivaedev/form/fieldRejection.ts`       | `rejecting`, `fieldRejectionOf`, `FieldRejection`, `RejectField`, `FieldRejectionMapping` |
+| `@shivaedev/form/adapters/react.ts`       | `useField`, `useSubmit`, `useDirty`, `usePersistedDraft`, `DraftSessionContext`           |
+| `@shivaedev/form/draftSession.ts`         | `draftSession(id)`                                                                        |
+| `@shivaedev/form/field.ts`                | `number`, `list`, `NumberOptions`, `ListOptions`                                          |
+| `@shivaedev/form/adapters/numberInput.ts` | `numberInput`                                                                             |
+| `@shivaedev/form/adapters/useList.ts`     | `useList`                                                                                 |
+| `@shivaedev/form/emptyAsNull.ts`          | `emptyAsNull`                                                                             |
 
 `form` takes a `Schema.Struct` and this configuration:
 
@@ -371,7 +438,7 @@ pnpm add @effect/atom-react react
 ```
 
 The React mounting example also uses the application's `react-dom`. React and `@effect/atom-react` are optional peers; the core modules do not import them. The package needs Node 24 or newer.
-- Field names are top-level schema keys. There is no path-addressed field-array API.
+- Field names are top-level schema keys. `useList` edits top-level arrays; nested items remain whole-item edits.
 - Replace encoded values rather than mutating objects in place; use `change` for ordinary UI edits.
 - Keep the form and registry for their intended session, and clean up the registry when that session ends.
 - Decide in the application when to receive normalized rows and how to render general failures. Attach a draft owner when persisted input must end with the session.

package/dist/adapters/numberInput.d.ts

@@ -0,0 +1,15 @@
+import type { InputEvent } from "react";
+export declare function numberInput(field: {
+    readonly name: string;
+    readonly value: string;
+    readonly onChange: (value: string) => void;
+    readonly onBlur: () => void;
+}): {
+    inputMode: "decimal";
+    name: string;
+    onBlur: () => void;
+    onInput: (event: InputEvent<HTMLInputElement>) => void;
+    type: "text";
+    value: string;
+};
+//# sourceMappingURL=numberInput.d.ts.map

package/dist/adapters/numberInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"numberInput.d.ts","sourceRoot":"","sources":["../../src/adapters/numberInput.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAExC,wBAAgB,WAAW,CAAC,KAAK,EAAE;IAClC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,QAAQ,CAAC,MAAM,EAAE,MAAM,IAAI,CAAC;CAC5B;IAEC,SAAS,EAAE,SAAS;IACpB,IAAI;IACJ,MAAM,QALgB,IAAI;IAM1B,OAAO,UAAU,UAAU,CAAC,gBAAgB,CAAC;IAC7C,IAAI,EAAE,MAAM;IACZ,KAAK;EAEN"}

package/dist/adapters/numberInput.js

@@ -0,0 +1,11 @@
+export function numberInput(field) {
+    return {
+        inputMode: "decimal",
+        name: field.name,
+        onBlur: field.onBlur,
+        onInput: (event) => field.onChange(event.currentTarget.value),
+        type: "text",
+        value: field.value,
+    };
+}
+//# sourceMappingURL=numberInput.js.map

package/dist/adapters/numberInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"numberInput.js","sourceRoot":"","sources":["../../src/adapters/numberInput.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,WAAW,CAAC,KAK3B;IACA,OAAO;QACN,SAAS,EAAE,SAAkB;QAC7B,IAAI,EAAE,KAAK,CAAC,IAAI;QAChB,MAAM,EAAE,KAAK,CAAC,MAAM;QACpB,OAAO,EAAE,CAAC,KAAmC,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC;QAC3F,IAAI,EAAE,MAAe;QACrB,KAAK,EAAE,KAAK,CAAC,KAAK;KAClB,CAAC;AACH,CAAC"}

package/dist/adapters/useList.d.ts

@@ -0,0 +1,23 @@
+import * as Atom from "effect/reactivity/Atom";
+import type * as AtomRef from "effect/reactivity/AtomRef";
+interface ListForm<TKey extends string, TItem> {
+    readonly blur: (name: TKey) => void;
+    readonly change: (name: TKey, value: readonly TItem[]) => void;
+    readonly dirty: Atom.Atom<boolean>;
+    readonly error: (name: TKey) => Atom.Atom<string | undefined>;
+    readonly errorAt: (path: readonly [TKey, ...PropertyKey[]]) => Atom.Atom<string | undefined>;
+    readonly field: (name: TKey) => AtomRef.ReadonlyRef<readonly TItem[]>;
+}
+export declare function useList<TKey extends string, TItem>(form: ListForm<NoInfer<TKey>, TItem>, name: TKey): {
+    add: (value: TItem) => void;
+    error: string | undefined;
+    items: {
+        error: string | undefined;
+        onChange: (next: TItem) => void;
+        onRemove: () => void;
+        value: TItem;
+    }[];
+    onBlur: () => void;
+};
+export {};
+//# sourceMappingURL=useList.d.ts.map

package/dist/adapters/useList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useList.d.ts","sourceRoot":"","sources":["../../src/adapters/useList.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,IAAI,MAAM,wBAAwB,CAAC;AAC/C,OAAO,KAAK,KAAK,OAAO,MAAM,2BAA2B,CAAC;AAG1D,UAAU,QAAQ,CAAC,IAAI,SAAS,MAAM,EAAE,KAAK;IAC5C,QAAQ,CAAC,IAAI,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACpC,QAAQ,CAAC,MAAM,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,KAAK,EAAE,KAAK,IAAI,CAAC;IAC/D,QAAQ,CAAC,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACnC,QAAQ,CAAC,KAAK,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IAC9D,QAAQ,CAAC,OAAO,EAAE,CAAC,IAAI,EAAE,SAAS,CAAC,IAAI,EAAE,GAAG,WAAW,EAAE,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IAC7F,QAAQ,CAAC,KAAK,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,WAAW,CAAC,SAAS,KAAK,EAAE,CAAC,CAAC;CACtE;AAED,wBAAgB,OAAO,CAAC,IAAI,SAAS,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC,EAAE,IAAI,EAAE,IAAI;iBAcrF,KAAK;;;;yBAIA,KAAK;;;;;EAMxB"}

package/dist/adapters/useList.js

@@ -0,0 +1,27 @@
+import { useAtomMount, useAtomRef, useAtomValue } from "@effect/atom-react";
+import * as Atom from "effect/reactivity/Atom";
+import { useMemo } from "react";
+export function useList(form, name) {
+    useAtomMount(form.dirty);
+    const values = useAtomRef(form.field(name));
+    const error = useAtomValue(form.error(name));
+    const errors = useAtomValue(useMemo(() => Atom.readable((get) => values.map((_, index) => get(form.errorAt([name, index])))), [form, name, values]));
+    function change(next) {
+        form.change(name, next);
+    }
+    function current() {
+        return form.field(name).value;
+    }
+    return {
+        add: (value) => change([...current(), value]),
+        error,
+        items: values.map((value, index) => ({
+            error: errors[index],
+            onChange: (next) => change(current().map((item, at) => (at === index ? next : item))),
+            onRemove: () => change(current().filter((_, at) => at !== index)),
+            value,
+        })),
+        onBlur: () => form.blur(name),
+    };
+}
+//# sourceMappingURL=useList.js.map

package/dist/adapters/useList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useList.js","sourceRoot":"","sources":["../../src/adapters/useList.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC5E,OAAO,KAAK,IAAI,MAAM,wBAAwB,CAAC;AAE/C,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAWhC,MAAM,UAAU,OAAO,CAA6B,IAAoC,EAAE,IAAU;IACnG,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACzB,MAAM,MAAM,GAAG,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC;IAC5C,MAAM,KAAK,GAAG,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC;IAC7C,MAAM,MAAM,GAAG,YAAY,CAC1B,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC,CACvH,CAAC;IACF,SAAS,MAAM,CAAC,IAAsB;QACrC,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;IACzB,CAAC;IACD,SAAS,OAAO;QACf,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC;IAC/B,CAAC;IACD,OAAO;QACN,GAAG,EAAE,CAAC,KAAY,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC,GAAG,OAAO,EAAE,EAAE,KAAK,CAAC,CAAC;QACpD,KAAK;QACL,KAAK,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC;YACpC,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC;YACpB,QAAQ,EAAE,CAAC,IAAW,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;YAC5F,QAAQ,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,KAAK,CAAC,CAAC;YACjE,KAAK;SACL,CAAC,CAAC;QACH,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;KAC7B,CAAC;AACH,CAAC"}

package/dist/field.d.ts

@@ -0,0 +1,17 @@
+import { Schema } from "effect";
+export interface NumberOptions {
+    readonly integer?: boolean;
+    readonly max?: number;
+    readonly min?: number;
+    readonly optional?: boolean;
+}
+export declare function number(options?: NumberOptions & {
+    readonly optional?: false;
+}): Schema.Codec<number, string>;
+export declare function number(options: NumberOptions): Schema.Codec<number | null, string>;
+export interface ListOptions {
+    readonly max: number;
+    readonly min?: number;
+}
+export declare function list<TItem extends Schema.Constraint>(item: TItem, options: ListOptions): Schema.$Array<TItem>;
+//# sourceMappingURL=field.d.ts.map

package/dist/field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../src/field.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAGhC,MAAM,WAAW,aAAa;IAC7B,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;CAC5B;AACD,wBAAgB,MAAM,CAAC,OAAO,CAAC,EAAE,aAAa,GAAG;IAAE,QAAQ,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAA;CAAE,GAAG,MAAM,CAAC,KAAK,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAC9G,wBAAgB,MAAM,CAAC,OAAO,EAAE,aAAa,GAAG,MAAM,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,EAAE,MAAM,CAAC,CAAC;AAepF,MAAM,WAAW,WAAW;IAC3B,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,wBAAgB,IAAI,CAAC,KAAK,SAAS,MAAM,CAAC,UAAU,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,WAAW,wBAGtF"}

package/dist/field.js

@@ -0,0 +1,20 @@
+import { Schema } from "effect";
+import { emptyAsNull } from "./emptyAsNull.js";
+export function number(options = {}) {
+    let populated = Schema.NonEmptyString.pipe(Schema.decodeTo(Schema.FiniteFromString));
+    if (options.min !== undefined) {
+        populated = populated.check(Schema.isGreaterThanOrEqualTo(options.min));
+    }
+    if (options.max !== undefined) {
+        populated = populated.check(Schema.isLessThanOrEqualTo(options.max));
+    }
+    if (options.integer) {
+        populated = populated.check(Schema.isInt());
+    }
+    return Schema.Trim.pipe(Schema.decodeTo(options.optional ? emptyAsNull(populated) : populated));
+}
+export function list(item, options) {
+    const values = Schema.Array(item).check(Schema.isMaxLength(options.max));
+    return options.min === undefined ? values : values.check(Schema.isMinLength(options.min));
+}
+//# sourceMappingURL=field.js.map

package/dist/field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field.js","sourceRoot":"","sources":["../src/field.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAChC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAU/C,MAAM,UAAU,MAAM,CAAC,OAAO,GAAkB,EAAE;IACjD,IAAI,SAAS,GAAG,MAAM,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC;IACrF,IAAI,OAAO,CAAC,GAAG,KAAK,SAAS,EAAE,CAAC;QAC/B,SAAS,GAAG,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,sBAAsB,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC;IACzE,CAAC;IACD,IAAI,OAAO,CAAC,GAAG,KAAK,SAAS,EAAE,CAAC;QAC/B,SAAS,GAAG,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,mBAAmB,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC;IACtE,CAAC;IACD,IAAI,OAAO,CAAC,OAAO,EAAE,CAAC;QACrB,SAAS,GAAG,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;IAC7C,CAAC;IACD,OAAO,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;AACjG,CAAC;AAOD,MAAM,UAAU,IAAI,CAAkC,IAAW,EAAE,OAAoB;IACtF,MAAM,MAAM,GAAG,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC;IACzE,OAAO,OAAO,CAAC,GAAG,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC;AAC3F,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shivaedev/form",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "description": "Schema-derived Effect atom forms with optional React hooks",
   "keywords": [
     "effect"
@@ -43,14 +43,14 @@
     "README.md"
   ],
   "dependencies": {
-    "@shivaedev/errors": "0.7.0"
+    "@shivaedev/errors": "0.8.0"
   },
   "devDependencies": {
     "@effect/atom-react": "4.0.6",
     "@effect/vitest": "4.0.6",
-    "@shivaedev/quality": "0.57.1",
+    "@shivaedev/quality": "0.58.0",
     "@shivaedev/test": "0.14.0",
-    "@shivaedev/test-story": "0.36.0",
+    "@shivaedev/test-story": "0.37.0",
     "@types/node": "24.19.2",
     "@types/react": "19.3.0",
     "effect": "4.0.6",

package/src/adapters/numberInput.ts

@@ -0,0 +1,17 @@
+import type { InputEvent } from "react";
+
+export function numberInput(field: {
+	readonly name: string;
+	readonly value: string;
+	readonly onChange: (value: string) => void;
+	readonly onBlur: () => void;
+}) {
+	return {
+		inputMode: "decimal" as const,
+		name: field.name,
+		onBlur: field.onBlur,
+		onInput: (event: InputEvent<HTMLInputElement>) => field.onChange(event.currentTarget.value),
+		type: "text" as const,
+		value: field.value,
+	};
+}

package/src/adapters/useList.ts

@@ -0,0 +1,39 @@
+import { useAtomMount, useAtomRef, useAtomValue } from "@effect/atom-react";
+import * as Atom from "effect/reactivity/Atom";
+import type * as AtomRef from "effect/reactivity/AtomRef";
+import { useMemo } from "react";
+
+interface ListForm<TKey extends string, TItem> {
+	readonly blur: (name: TKey) => void;
+	readonly change: (name: TKey, value: readonly TItem[]) => void;
+	readonly dirty: Atom.Atom<boolean>;
+	readonly error: (name: TKey) => Atom.Atom<string | undefined>;
+	readonly errorAt: (path: readonly [TKey, ...PropertyKey[]]) => Atom.Atom<string | undefined>;
+	readonly field: (name: TKey) => AtomRef.ReadonlyRef<readonly TItem[]>;
+}
+
+export function useList<TKey extends string, TItem>(form: ListForm<NoInfer<TKey>, TItem>, name: TKey) {
+	useAtomMount(form.dirty);
+	const values = useAtomRef(form.field(name));
+	const error = useAtomValue(form.error(name));
+	const errors = useAtomValue(
+		useMemo(() => Atom.readable((get) => values.map((_, index) => get(form.errorAt([name, index])))), [form, name, values]),
+	);
+	function change(next: readonly TItem[]) {
+		form.change(name, next);
+	}
+	function current() {
+		return form.field(name).value;
+	}
+	return {
+		add: (value: TItem) => change([...current(), value]),
+		error,
+		items: values.map((value, index) => ({
+			error: errors[index],
+			onChange: (next: TItem) => change(current().map((item, at) => (at === index ? next : item))),
+			onRemove: () => change(current().filter((_, at) => at !== index)),
+			value,
+		})),
+		onBlur: () => form.blur(name),
+	};
+}

package/src/field.ts

@@ -0,0 +1,34 @@
+import { Schema } from "effect";
+import { emptyAsNull } from "./emptyAsNull.ts";
+
+export interface NumberOptions {
+	readonly integer?: boolean;
+	readonly max?: number;
+	readonly min?: number;
+	readonly optional?: boolean;
+}
+export function number(options?: NumberOptions & { readonly optional?: false }): Schema.Codec<number, string>;
+export function number(options: NumberOptions): Schema.Codec<number | null, string>;
+export function number(options: NumberOptions = {}): Schema.Codec<number | null, string> {
+	let populated = Schema.NonEmptyString.pipe(Schema.decodeTo(Schema.FiniteFromString));
+	if (options.min !== undefined) {
+		populated = populated.check(Schema.isGreaterThanOrEqualTo(options.min));
+	}
+	if (options.max !== undefined) {
+		populated = populated.check(Schema.isLessThanOrEqualTo(options.max));
+	}
+	if (options.integer) {
+		populated = populated.check(Schema.isInt());
+	}
+	return Schema.Trim.pipe(Schema.decodeTo(options.optional ? emptyAsNull(populated) : populated));
+}
+
+export interface ListOptions {
+	readonly max: number;
+	readonly min?: number;
+}
+
+export function list<TItem extends Schema.Constraint>(item: TItem, options: ListOptions) {
+	const values = Schema.Array(item).check(Schema.isMaxLength(options.max));
+	return options.min === undefined ? values : values.check(Schema.isMinLength(options.min));
+}