haze-ui 1.11.1 → 1.12.1

package/README.md

@@ -70,9 +70,16 @@ function NameField({ form }) {
 ```
 
 The handle is a real `Control`: reads subscribe to the field (sibling
-fields stay isolated), writes go through `setValueByPath`, and functional
-updates evaluate against the live form value. `reset(form, newValues)`
-re-seeds every bridged control with no remounting.
+fields stay isolated), and writes go through react-f0rm's user-change
+channel (`changeValueByPath`, ≥ 0.7) — a control write fires exactly the
+validation a user typing into the field would fire: the field's effective
+`mode` (a `FormItem`/`useField` per-field override included) and the
+form's `reValidateMode`. With the default `mode: 'onSubmit'` +
+`reValidateMode: 'onChange'`, typing through a bridged control after a
+failed submit re-validates per keystroke and clears the error as soon as
+the value is valid — no blur, no resubmit. Functional updates evaluate
+against the live form value. `reset(form, newValues)` re-seeds every
+bridged control with no remounting.
 
 ### FormItem: label, errors and aria wiring
 
@@ -137,6 +144,45 @@ submit needed. `mode` accepts `'onSubmit'`, `'onBlur'`, `'onChange'`,
 `'onTouched'` or `'all'`; only this field's schedule changes, the rest
 of the form keeps its own `mode`.
 
+#### `validateDebounce` / `delayError` / `rules` (react-f0rm ≥ 0.6)
+
+`FormItem` passes these field-level options straight through to
+react-f0rm's `useField`:
+
+- `validateDebounce={300}` — debounce this field's validation kicks:
+  only the last kick inside the window runs the validator (e.g. keeps a
+  per-keystroke async validator from firing while the user types fast).
+  While the timer is pending the field counts as validating, so
+  `trigger`/submit wait it out.
+- `delayError={500}` — delay *showing* a newly appearing error in the
+  rendered error span (and the binding's `invalid`/`errors`). The form's
+  error state stays immediate — submit and `getError` still gate on it.
+  An error that clears inside the window never shows.
+- `rules={{ required: 'Email is required', minLength: 4, pattern: { value: /@/, message: 'Must be an email' } }}`
+  — declarative constraints (a subset of react-hook-form's `register`
+  rules) compiled into a validator that runs *before* `validate`; both
+  sources' errors merge into the field's error list, rules errors ahead.
+
+```jsx
+<FormItem
+  form={form}
+  name="email"
+  label="Email"
+  validateDebounce={300}
+  delayError={500}
+  rules={{ required: 'Email is required' }}
+  validate={(v) => (v.includes('@') ? undefined : 'must be an email')}
+>
+  {({ id, errorId, invalid, control }) => (
+    <Input id={id} value={control} aria-invalid={invalid} aria-describedby={errorId} />
+  )}
+</FormItem>
+```
+
+All three are optional; omit them and the field behaves exactly as
+before (immediate validation per the form's `mode`, immediate error
+display, `validate`-only).
+
 ## Related Projects
 
 - [react-use-control](https://github.com/wmzy/react-use-control)

package/dist/form/FormItem.js

@@ -4,40 +4,43 @@ import { useFormControl as t } from "./useFormControl.js";
 /* empty css                   */
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 import { useId as i } from "react";
-import { useField as a, useFieldErrors as o } from "react-f0rm";
+import { useField as a } from "react-f0rm";
 //#region src/lib/form/FormItem.tsx
-var s = "haze-FormItem__item", c = "haze-FormItem__labelText", l = "haze-FormItem__errorText";
-function u({ form: u, name: d, label: f, validate: p, mode: m, className: h, children: g }) {
-	let _ = `haze-field-${i()}`, v = `${_}-error`, { onBlur: y } = a({
-		form: u,
-		name: d,
-		validate: p,
-		mode: m
-	}), b = o(u, d), x = t(u, d), S = b.length > 0;
+var o = "haze-FormItem__item", s = "haze-FormItem__labelText", c = "haze-FormItem__errorText";
+function l({ form: l, name: u, label: d, validate: f, mode: p, validateDebounce: m, delayError: h, rules: g, className: _, children: v }) {
+	let y = `haze-field-${i()}`, b = `${y}-error`, { onBlur: x, errors: S } = a({
+		form: l,
+		name: u,
+		validate: f,
+		mode: p,
+		validateDebounce: m,
+		delayError: h,
+		rules: g
+	}), C = t(l, u), w = S.length > 0;
 	return /* @__PURE__ */ r("div", {
-		className: e([s, h]),
+		className: e([o, _]),
 		children: [
-			f !== void 0 && /* @__PURE__ */ n("label", {
-				htmlFor: _,
-				className: e(c),
-				children: f
+			d !== void 0 && /* @__PURE__ */ n("label", {
+				htmlFor: y,
+				className: e(s),
+				children: d
 			}),
-			g({
-				id: _,
-				errorId: v,
-				invalid: S,
-				errors: b,
-				onBlur: y,
-				control: x
+			v({
+				id: y,
+				errorId: b,
+				invalid: w,
+				errors: S,
+				onBlur: x,
+				control: C
 			}),
-			S && /* @__PURE__ */ n("span", {
-				id: v,
+			w && /* @__PURE__ */ n("span", {
+				id: b,
 				role: "alert",
-				className: e(l),
-				children: b[0].message
+				className: e(c),
+				children: S[0].message
 			})
 		]
 	});
 }
 //#endregion
-export { u as default };
+export { l as default };

package/dist/form/useFormControl.js

@@ -1,6 +1,6 @@
 import { useControl as e, useThru as t } from "react-use-control";
 import { useMemo as n } from "react";
-import { getValueByPath as r, setValueByPath as i, useValueByPath as a } from "react-f0rm";
+import { changeValueByPath as r, getValueByPath as i, useValueByPath as a } from "react-f0rm";
 //#region src/lib/form/useFormControl.ts
 var o = /* @__PURE__ */ new Map();
 function s(e) {
@@ -46,8 +46,8 @@ function l(e) {
 function u(n, o) {
 	let s = l(o), c = a(n, s), [, , u] = e();
 	return t(u, () => [c, (e) => {
-		let t = r(n, s), a = typeof e == "function" ? e(t) : e;
-		i(n, s, a);
+		let t = i(n, s), a = typeof e == "function" ? e(t) : e;
+		r(n, s, a);
 	}]);
 }
 //#endregion

package/dist/types/form/FormItem.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import type { FieldError, FieldPath, Name, ValidationMode } from 'react-f0rm';
+import type { FieldError, FieldPath, FieldRules, Name, ValidationMode } from 'react-f0rm';
 import type { Control } from 'react-use-control';
 import type { FormInstance, PathValueOf } from './useFormControl';
 /**
@@ -41,6 +41,23 @@ export type FormItemProps<TValues extends Record<string, any> = any, P extends F
      * of the form's `mode`; other fields are unaffected. Omit to keep the
      * form-wide behavior. */
     mode?: ValidationMode;
+    /** Milliseconds to debounce this field's validation kicks (react-f0rm
+     * ≥0.6): only the last kick inside the window runs the validator — e.g.
+     * `300` keeps a fast typist from firing a per-keystroke async validator.
+     * While the timer is pending the field counts as validating. Omit for
+     * immediate validation (react-f0rm's default). */
+    validateDebounce?: number;
+    /** Milliseconds to delay *showing* a newly appearing error in the render
+     * layer (react-f0rm ≥0.6): the form's error state stays immediate —
+     * submit/trigger still gate on it — only the rendered error span and
+     * `invalid` wait out the window. An error that clears inside the window
+     * never shows. Omit for immediate display. */
+    delayError?: number;
+    /** Declarative rules (required/min/max/minLength/maxLength/pattern;
+     * react-f0rm ≥0.6), compiled into a validator that runs *before*
+     * `validate` — both sources' errors merge, rules errors ahead. Omit for
+     * `validate`-only validation. */
+    rules?: FieldRules;
     className?: string;
     children: (binding: FormItemBinding<TValues, P>) => ReactNode;
 };
@@ -61,4 +78,4 @@ export type FormItemProps<TValues extends Record<string, any> = any, P extends F
  * `<span id={errorId} role='alert'>` next to the children; with no errors
  * no extra element is rendered.
  */
-export default function FormItem<TValues extends Record<string, any> = any, P extends FieldPath<TValues> | Name = Name>({ form, name, label, validate, mode, className, children }: FormItemProps<TValues, P>): import("react").JSX.Element;
+export default function FormItem<TValues extends Record<string, any> = any, P extends FieldPath<TValues> | Name = Name>({ form, name, label, validate, mode, validateDebounce, delayError, rules, className, children }: FormItemProps<TValues, P>): import("react").JSX.Element;

package/dist/types/form/useFormControl.d.ts

@@ -18,8 +18,11 @@ export type { FormInstance, PathValueOf };
  * `getValueByPath` at render time (kept fresh by a `useValueByPath`
  * subscription that re-renders this component on own-field changes — and
  * only those, so sibling fields stay isolated); writes go through
- * `setValueByPath`, accepting either a plain value or a functional updater
- * that is evaluated against the live form value.
+ * `changeValueByPath` — react-f0rm's user-change channel — so a control
+ * write fires exactly the validation a user typing into the field would
+ * fire (the field's effective `mode`, per-field override included, and the
+ * form's `reValidateMode`). The setter accepts either a plain value or a
+ * functional updater that is evaluated against the live form value.
  *
  * The handle's identity is stable across re-renders, including own-field
  * value changes.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "haze-ui",
-  "version": "1.11.1",
+  "version": "1.12.1",
   "type": "module",
   "description": "A React UI component library powered by react-use-control and Linaria",
   "main": "./dist/index.js",
@@ -49,7 +49,7 @@
   "peerDependencies": {
     "@linaria/core": "^7.0.0 || ^8.0.0",
     "react": "^19.0.0",
-    "react-f0rm": ">=0.3.0"
+    "react-f0rm": ">=0.7.0"
   },
   "dependencies": {
     "react-toolroom": "^0.11.0",
@@ -95,7 +95,7 @@
     "ramda": "^0.32.0",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
-    "react-f0rm": "^0.6.0",
+    "react-f0rm": "^0.7.0",
     "react-icons": "^5.7.0",
     "rollup-plugin-type-as-json-schema": "^0.2.6",
     "semantic-release": "^25.0.9",