haze-ui 1.12.0 → 1.12.2

package/README.md

@@ -51,34 +51,45 @@ always come from `haze-ui/css/tokens.css`.
 
 ## react-f0rm Integration
 
-The form layer (`FormItem`, `useFormControl`; peer dependency
-`react-f0rm`) is exported from the main barrel and glues react-f0rm
-form state to haze-ui's control-prop system, so any control-prop
-component (`Input`, `Select`, `Switch`, `Textarea`, `TagInput`, ...)
-binds to a form field with zero adapters.
+react-f0rm owns form field state, and its headless `useField` hook is
+the single binding layer — the same channel its built-in
+`Field`/`Checkbox`/`Select` components use. haze-ui contributes the
+views: controlled cores (`InputCore`, `SelectCore`, `SwitchCore`,
+`TextareaCore`, `TagInputCore`, ...) take the plain `{value, onChange}`
+pair with zero adapters, and `FormItem` wraps the hook's state in label,
+error and aria wiring. The sugar components (`Input`, `Select`, ...)
+keep their `Control<T> | T` API for standalone use outside forms.
 
-### useFormControl(form, name): field → Control
+### useField: field → {value, onChange}
 
 ```jsx
-import { useForm, setValue } from 'react-f0rm';
-import { Input, useFormControl } from 'haze-ui';
+import { useForm, useField } from 'react-f0rm';
+import { InputCore } from 'haze-ui';
 
 function NameField({ form }) {
-  const name = useFormControl(form, 'name');
-  return <Input value={name} />; // two-way bound, no onChange wiring
+  const { value, onChange } = useField({ form, name: 'name' });
+  return <InputCore value={value} onChange={onChange} />; // two-way bound
 }
 ```
 
-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.
+The hook subscribes to the field (sibling fields stay isolated), and
+`onChange` writes through react-f0rm's user-change channel — a 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 bound
+core after a failed submit re-validates per keystroke and clears the
+error as soon as the value is valid — no blur, no resubmit. `onChange`
+accepts plain values only (controlled cores emit the next value, never
+functional updaters; read the previous value from `value` on the next
+render). `reset(form, newValues)` re-seeds every binding with no
+remounting.
 
 ### FormItem: label, errors and aria wiring
 
 ```jsx
 import { Form, useForm } from 'react-f0rm';
-import { FormItem, Input } from 'haze-ui';
+import { FormItem, InputCore } from 'haze-ui';
 
 function ProfileForm() {
   const form = useForm({ initialValues: { email: '' } });
@@ -90,8 +101,8 @@ function ProfileForm() {
         label="Email"
         validate={(v) => (v.includes('@') ? undefined : 'must be an email')}
       >
-        {({ id, errorId, invalid, control }) => (
-          <Input id={id} value={control} aria-invalid={invalid} aria-describedby={errorId} />
+        {({ id, errorId, invalid, value, onChange }) => (
+          <InputCore id={id} value={value} onChange={onChange} aria-invalid={invalid} aria-describedby={errorId} />
         )}
       </FormItem>
     </Form>
@@ -119,10 +130,11 @@ keep the form's mode.
   mode="onBlur"
   validate={(v) => (v.includes('@') ? undefined : 'must be an email')}
 >
-  {({ id, errorId, invalid, onBlur, control }) => (
-    <Input
+  {({ id, errorId, invalid, onBlur, value, onChange }) => (
+    <InputCore
       id={id}
-      value={control}
+      value={value}
+      onChange={onChange}
       aria-invalid={invalid}
       aria-describedby={errorId}
       onBlur={onBlur}
@@ -131,8 +143,8 @@ keep the form's mode.
 </FormItem>
 ```
 
-With `mode="onBlur"` (and the binding's `onBlur` passed to the control,
-as above) the email field is validated the moment it loses focus — no
+With `mode="onBlur"` (and the binding's `onBlur` passed to the core, as
+above) the email field is validated the moment it loses focus — no
 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`.
@@ -166,8 +178,8 @@ react-f0rm's `useField`:
   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} />
+  {({ id, errorId, invalid, value, onChange }) => (
+    <InputCore id={id} value={value} onChange={onChange} aria-invalid={invalid} aria-describedby={errorId} />
   )}
 </FormItem>
 ```

package/dist/components/Checkbox/Checkbox.js

@@ -1,24 +1,17 @@
-
-import { classnames as e } from "../../utils/classnames.js";
-/* empty css                   */
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { useControl as r } from "react-use-control";
+import e from "./CheckboxCore.js";
+import { jsx as t } from "react/jsx-runtime";
+import { useControl as n } from "react-use-control";
 //#region src/lib/components/Checkbox/Checkbox.tsx
-var i = "haze-Checkbox__base", a = "haze-Checkbox__labelText";
-function o({ checked: o, className: s, label: c, onChange: l, ...u }) {
-	let [d, f] = r(o, !1), p = /* @__PURE__ */ t("input", {
-		type: "checkbox",
-		checked: d,
-		onChange: (e) => {
-			f(e.target.checked), l?.(e);
-		},
-		...u,
-		className: e([i, s])
-	});
-	return c === void 0 ? p : /* @__PURE__ */ n("label", {
-		className: e(a),
-		children: [p, c]
+function r({ checked: r, className: i, label: a, onChange: o, ...s }) {
+	let [c, l] = n(r, !1);
+	return /* @__PURE__ */ t(e, {
+		checked: c,
+		onChange: l,
+		onNativeChange: o,
+		className: i,
+		label: a,
+		...s
 	});
 }
 //#endregion
-export { o as default };
+export { r as default };

package/dist/components/Checkbox/CheckboxCore.js

@@ -0,0 +1,23 @@
+
+import { classnames as e } from "../../utils/classnames.js";
+/* empty css                       */
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/lib/components/Checkbox/CheckboxCore.tsx
+var r = "haze-CheckboxCore__base", i = "haze-CheckboxCore__labelText";
+function a({ checked: a, onChange: o, onNativeChange: s, className: c, label: l, ...u }) {
+	let d = /* @__PURE__ */ t("input", {
+		type: "checkbox",
+		checked: a,
+		onChange: (e) => {
+			o(e.target.checked), s?.(e);
+		},
+		...u,
+		className: e([r, c])
+	});
+	return l === void 0 ? d : /* @__PURE__ */ n("label", {
+		className: e(i),
+		children: [d, l]
+	});
+}
+//#endregion
+export { a as default };

package/dist/components/ColorPicker/ColorPicker.js

@@ -1,46 +1,17 @@
-
-import { classnames as e } from "../../utils/classnames.js";
-/* empty css                      */
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { useControl as r } from "react-use-control";
+import e from "./ColorPickerCore.js";
+import { jsx as t } from "react/jsx-runtime";
+import { useControl as n } from "react-use-control";
 //#region src/lib/components/ColorPicker/ColorPicker.tsx
-var i = "haze-ColorPicker__container", a = "haze-ColorPicker__previewRow", o = "haze-ColorPicker__colorInput", s = "haze-ColorPicker__textInput", c = "haze-ColorPicker__presetsRow", l = "haze-ColorPicker__presetBtn", u = "haze-ColorPicker__activePreset";
-function d({ value: d, presets: f, onChange: p, className: m }) {
-	let [h, g] = r(d, "#000000"), _ = (e) => {
-		let t = e.target.value;
-		g(t), p?.(t);
-	}, v = (e) => {
-		let t = e.target.value;
-		g(t), p?.(t);
-	}, y = (e) => {
-		g(e), p?.(e);
-	};
-	return /* @__PURE__ */ n("div", {
-		className: e([i, m]),
-		children: [/* @__PURE__ */ n("div", {
-			className: e([a]),
-			children: [/* @__PURE__ */ t("input", {
-				type: "color",
-				value: h,
-				onChange: v,
-				className: e([o])
-			}), /* @__PURE__ */ t("input", {
-				type: "text",
-				value: h,
-				onChange: _,
-				className: e([s])
-			})]
-		}), f && f.length > 0 && /* @__PURE__ */ t("div", {
-			className: e([c]),
-			children: f.map((n) => /* @__PURE__ */ t("button", {
-				type: "button",
-				style: { background: n },
-				"aria-label": n,
-				onClick: () => y(n),
-				className: e([l, h === n && u])
-			}, n))
-		})]
+function r({ value: r, presets: i, onChange: a, className: o }) {
+	let [s, c] = n(r, "#000000");
+	return /* @__PURE__ */ t(e, {
+		value: s,
+		onChange: (e) => {
+			c(e), a?.(e);
+		},
+		presets: i,
+		className: o
 	});
 }
 //#endregion
-export { d as default };
+export { r as default };

package/dist/components/ColorPicker/ColorPickerCore.js

@@ -0,0 +1,36 @@
+
+import { classnames as e } from "../../utils/classnames.js";
+/* empty css                          */
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/lib/components/ColorPicker/ColorPickerCore.tsx
+var r = "haze-ColorPickerCore__container", i = "haze-ColorPickerCore__previewRow", a = "haze-ColorPickerCore__colorInput", o = "haze-ColorPickerCore__textInput", s = "haze-ColorPickerCore__presetsRow", c = "haze-ColorPickerCore__presetBtn", l = "haze-ColorPickerCore__activePreset";
+function u({ value: u, onChange: d, presets: f, className: p }) {
+	return /* @__PURE__ */ n("div", {
+		className: e([r, p]),
+		children: [/* @__PURE__ */ n("div", {
+			className: e([i]),
+			children: [/* @__PURE__ */ t("input", {
+				type: "color",
+				value: u,
+				onChange: (e) => d(e.target.value),
+				className: e([a])
+			}), /* @__PURE__ */ t("input", {
+				type: "text",
+				value: u,
+				onChange: (e) => d(e.target.value),
+				className: e([o])
+			})]
+		}), f && f.length > 0 && /* @__PURE__ */ t("div", {
+			className: e([s]),
+			children: f.map((n) => /* @__PURE__ */ t("button", {
+				type: "button",
+				style: { background: n },
+				"aria-label": n,
+				onClick: () => d(n),
+				className: e([c, u === n && l])
+			}, n))
+		})]
+	});
+}
+//#endregion
+export { u as default };

package/dist/components/DateRangePicker/DateRangePicker.js

@@ -1,39 +1,21 @@
-
-import { classnames as e } from "../../utils/classnames.js";
-/* empty css                          */
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { useControl as r } from "react-use-control";
+import e from "./DateRangePickerCore.js";
+import { jsx as t } from "react/jsx-runtime";
+import { useControl as n } from "react-use-control";
 //#region src/lib/components/DateRangePicker/DateRangePicker.tsx
-var i = "haze-DateRangePicker__container", a = "haze-DateRangePicker__input", o = "haze-DateRangePicker__sep";
-function s({ startDate: s, endDate: c, onStartChange: l, onEndChange: u, separator: d = "–", className: f }) {
-	let [p, m] = r(s, ""), [h, g] = r(c, "");
-	return /* @__PURE__ */ n("div", {
-		className: e([i, f]),
-		children: [
-			/* @__PURE__ */ t("input", {
-				type: "date",
-				value: p,
-				onChange: (e) => {
-					let t = e.target.value;
-					m(t), l?.(t);
-				},
-				className: e([a])
-			}),
-			/* @__PURE__ */ t("span", {
-				className: e([o]),
-				children: d
-			}),
-			/* @__PURE__ */ t("input", {
-				type: "date",
-				value: h,
-				onChange: (e) => {
-					let t = e.target.value;
-					g(t), u?.(t);
-				},
-				className: e([a])
-			})
-		]
+function r({ startDate: r, endDate: i, onStartChange: a, onEndChange: o, separator: s, className: c }) {
+	let [l, u] = n(r, ""), [d, f] = n(i, "");
+	return /* @__PURE__ */ t(e, {
+		startDate: l,
+		endDate: d,
+		onStartChange: (e) => {
+			u(e), a?.(e);
+		},
+		onEndChange: (e) => {
+			f(e), o?.(e);
+		},
+		separator: s,
+		className: c
 	});
 }
 //#endregion
-export { s as default };
+export { r as default };

package/dist/components/DateRangePicker/DateRangePickerCore.js

@@ -0,0 +1,31 @@
+
+import { classnames as e } from "../../utils/classnames.js";
+/* empty css                              */
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/lib/components/DateRangePicker/DateRangePickerCore.tsx
+var r = "haze-DateRangePickerCore__container", i = "haze-DateRangePickerCore__input", a = "haze-DateRangePickerCore__sep";
+function o({ startDate: o, endDate: s, onStartChange: c, onEndChange: l, separator: u = "–", className: d }) {
+	return /* @__PURE__ */ n("div", {
+		className: e([r, d]),
+		children: [
+			/* @__PURE__ */ t("input", {
+				type: "date",
+				value: o,
+				onChange: (e) => c(e.target.value),
+				className: e([i])
+			}),
+			/* @__PURE__ */ t("span", {
+				className: e([a]),
+				children: u
+			}),
+			/* @__PURE__ */ t("input", {
+				type: "date",
+				value: s,
+				onChange: (e) => l(e.target.value),
+				className: e([i])
+			})
+		]
+	});
+}
+//#endregion
+export { o as default };

package/dist/components/Datepicker/Datepicker.js

@@ -1,43 +1,19 @@
-
-import { classnames as e } from "../../utils/classnames.js";
-import t from "./Calendar.js";
-/* empty css                     */
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
-import { useControl as i } from "react-use-control";
-import { useEffect as a, useRef as o } from "react";
+import e from "./DatepickerCore.js";
+import { jsx as t } from "react/jsx-runtime";
+import { useControl as n } from "react-use-control";
 //#region src/lib/components/Datepicker/Datepicker.tsx
-var s = "haze-Datepicker__wrapper", c = "haze-Datepicker__input", l = "haze-Datepicker__dropdown", u = "haze-Datepicker__hiddenStyle";
-function d({ value: d, open: f, min: p, max: m, placeholder: h = "Select date", className: g }) {
-	let [_, v] = i(d, ""), [y, b] = i(f, !1), x = o(null);
-	return a(() => {
-		if (!y) return;
-		let e = (e) => {
-			x.current && !x.current.contains(e.target) && b(!1);
-		};
-		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-	}, [y, b]), /* @__PURE__ */ r("div", {
-		ref: x,
-		className: e([s, g]),
-		children: [/* @__PURE__ */ n("input", {
-			readOnly: !0,
-			className: c,
-			value: _,
-			placeholder: h,
-			onClick: () => b((e) => !e),
-			"aria-haspopup": "dialog",
-			"aria-expanded": y
-		}), /* @__PURE__ */ n("div", {
-			className: e([l, !y && u]),
-			children: /* @__PURE__ */ n(t, {
-				value: _,
-				min: p,
-				max: m,
-				onSelect: (e) => {
-					v(e), b(!1);
-				}
-			})
-		})]
+function r({ value: r, open: i, min: a, max: o, placeholder: s, className: c }) {
+	let [l, u] = n(r, ""), [d, f] = n(i, !1);
+	return /* @__PURE__ */ t(e, {
+		value: l,
+		onChange: u,
+		open: d,
+		onOpenChange: f,
+		min: a,
+		max: o,
+		placeholder: s,
+		className: c
 	});
 }
 //#endregion
-export { d as default };
+export { r as default };

package/dist/components/Datepicker/DatepickerCore.js

@@ -0,0 +1,42 @@
+
+import { classnames as e } from "../../utils/classnames.js";
+import t from "./Calendar.js";
+/* empty css                         */
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { useEffect as i, useRef as a } from "react";
+//#region src/lib/components/Datepicker/DatepickerCore.tsx
+var o = "haze-DatepickerCore__wrapper", s = "haze-DatepickerCore__input", c = "haze-DatepickerCore__dropdown", l = "haze-DatepickerCore__hiddenStyle";
+function u({ value: u, onChange: d, open: f, onOpenChange: p, min: m, max: h, placeholder: g = "Select date", className: _ }) {
+	let v = a(null);
+	return i(() => {
+		if (!f) return;
+		let e = (e) => {
+			v.current && !v.current.contains(e.target) && p(!1);
+		};
+		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+	}, [f, p]), /* @__PURE__ */ r("div", {
+		ref: v,
+		className: e([o, _]),
+		children: [/* @__PURE__ */ n("input", {
+			readOnly: !0,
+			className: s,
+			value: u,
+			placeholder: g,
+			onClick: () => p(!f),
+			"aria-haspopup": "dialog",
+			"aria-expanded": f
+		}), /* @__PURE__ */ n("div", {
+			className: e([c, !f && l]),
+			children: /* @__PURE__ */ n(t, {
+				value: u,
+				min: m,
+				max: h,
+				onSelect: (e) => {
+					d(e), p(!1);
+				}
+			})
+		})]
+	});
+}
+//#endregion
+export { u as default };

package/dist/components/Input/Input.js

@@ -1,28 +1,17 @@
-
-import { classnames as e } from "../../utils/classnames.js";
-/* empty css                */
+import e from "./InputCore.js";
 import { jsx as t } from "react/jsx-runtime";
 import { useControl as n } from "react-use-control";
 //#region src/lib/components/Input/Input.tsx
-var r = "haze-Input__base", i = {
-	sm: "haze-Input__sm",
-	md: "haze-Input__md",
-	lg: "haze-Input__lg"
-};
-function a({ value: a, size: o = "md", className: s, onChange: c, ...l }) {
-	let [u, d] = n(a, "");
-	return /* @__PURE__ */ t("input", {
-		value: u,
-		onChange: (e) => {
-			d(e.target.value), c?.(e);
-		},
-		...l,
-		className: e([
-			r,
-			i[o],
-			s
-		])
+function r({ value: r, size: i, className: a, onChange: o, ...s }) {
+	let [c, l] = n(r, "");
+	return /* @__PURE__ */ t(e, {
+		value: c,
+		onChange: l,
+		onNativeChange: o,
+		size: i,
+		className: a,
+		...s
 	});
 }
 //#endregion
-export { a as default };
+export { r as default };

package/dist/components/Input/InputCore.js

@@ -0,0 +1,26 @@
+
+import { classnames as e } from "../../utils/classnames.js";
+/* empty css                    */
+import { jsx as t } from "react/jsx-runtime";
+//#region src/lib/components/Input/InputCore.tsx
+var n = "haze-InputCore__base", r = {
+	sm: "haze-InputCore__sm",
+	md: "haze-InputCore__md",
+	lg: "haze-InputCore__lg"
+};
+function i({ value: i, onChange: a, onNativeChange: o, size: s = "md", className: c, ...l }) {
+	return /* @__PURE__ */ t("input", {
+		value: i,
+		onChange: (e) => {
+			a(e.target.value), o?.(e);
+		},
+		...l,
+		className: e([
+			n,
+			r[s],
+			c
+		])
+	});
+}
+//#endregion
+export { i as default };

package/dist/components/NumberInput/NumberInput.js

@@ -1,57 +1,20 @@
-
-import { classnames as e } from "../../utils/classnames.js";
-/* empty css                      */
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { useControl as r } from "react-use-control";
+import e from "./NumberInputCore.js";
+import { jsx as t } from "react/jsx-runtime";
+import { useControl as n } from "react-use-control";
 //#region src/lib/components/NumberInput/NumberInput.tsx
-var i = "haze-NumberInput__wrapper", a = "haze-NumberInput__input", o = "haze-NumberInput__stepBtn", s = "haze-NumberInput__inputSm", c = "haze-NumberInput__inputMd", l = "haze-NumberInput__inputLg", u = "haze-NumberInput__btnSm", d = "haze-NumberInput__btnMd", f = "haze-NumberInput__btnLg", p = {
-	sm: s,
-	md: c,
-	lg: l
-}, m = {
-	sm: u,
-	md: d,
-	lg: f
-};
-function h({ value: s, min: c, max: l, step: u = 1, size: d = "md", className: f, onChange: h, ...g }) {
-	let [_, v] = r(s, 0), y = (e) => {
-		let t = Math.round(e * 1e10) / 1e10;
-		return c !== void 0 && t < c ? c : l !== void 0 && t > l ? l : t;
-	};
-	return /* @__PURE__ */ n("div", {
-		className: e([i, f]),
-		children: [
-			/* @__PURE__ */ t("button", {
-				type: "button",
-				onClick: () => v(y(_ - u)),
-				disabled: c !== void 0 && _ <= c,
-				"aria-label": "Decrease",
-				className: e([o, m[d]]),
-				children: "−"
-			}),
-			/* @__PURE__ */ t("input", {
-				type: "number",
-				value: _,
-				min: c,
-				max: l,
-				step: u,
-				onChange: (e) => {
-					let t = Number(e.target.value);
-					Number.isNaN(t) || v(y(t)), h?.(e);
-				},
-				...g,
-				className: e([a, p[d]])
-			}),
-			/* @__PURE__ */ t("button", {
-				type: "button",
-				onClick: () => v(y(_ + u)),
-				disabled: l !== void 0 && _ >= l,
-				"aria-label": "Increase",
-				className: e([o, m[d]]),
-				children: "+"
-			})
-		]
+function r({ value: r, min: i, max: a, step: o, size: s, className: c, onChange: l, ...u }) {
+	let [d, f] = n(r, 0);
+	return /* @__PURE__ */ t(e, {
+		value: d,
+		onChange: f,
+		onNativeChange: l,
+		min: i,
+		max: a,
+		step: o,
+		size: s,
+		className: c,
+		...u
 	});
 }
 //#endregion
-export { h as default };
+export { r as default };