haze-ui 1.11.1 → 1.12.0

package/README.md

@@ -137,6 +137,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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "haze-ui",
-  "version": "1.11.1",
+  "version": "1.12.0",
   "type": "module",
   "description": "A React UI component library powered by react-use-control and Linaria",
   "main": "./dist/index.js",