haze-ui 1.12.2 → 1.13.0

package/README.md

@@ -114,6 +114,46 @@ function ProfileForm() {
 surfaces the first error in a `role="alert"` element — no manual
 `FieldError` wiring.
 
+#### `as`: declarative binding (react-f0rm Field-style)
+
+Skip the render-prop: pass any component as `as` and `FormItem` wires the
+id, aria attributes, `onBlur` and `onChange` itself — the same props shape
+as react-f0rm's `Field`, not Radix's `asChild`. `as` and the children
+render-prop are mutually exclusive.
+
+```jsx
+// text field: nothing else to wire
+<FormItem form={form} name="email" label="Email" as={InputCore} />
+
+// checkbox-style control: value lives in `checked`
+<FormItem
+  form={form}
+  name="subscribed"
+  label="Subscribe"
+  as={CheckboxCore}
+  valueToProps={(checked) => ({ checked: !!checked })}
+/>
+
+// DOM-element-shaped control: adapt event and value in one line each
+<FormItem
+  form={form}
+  name="email"
+  as={NativeInput}
+  eventToValue={(e) => e.target.value}
+  renderError={(error, id) => <em id={id}>{error}</em>}
+/>
+```
+
+- `eventToValue` defaults to identity — haze cores' `onChange` emits the
+  next plain value; pass `(e) => e.target.value` when `as` is a raw DOM
+  element component.
+- `asProps` spreads extra props onto the control before the value props,
+  so `value`/`valueToProps` win conflicts (Field.tsx precedence).
+- `renderError(error, id)` replaces the built-in error span's content;
+  the span itself (`id`, `role="alert"`, styling) stays FormItem's.
+- With a typed form, `validate`'s value argument is the field's actual
+  type (`PathValueOf<TValues, P>`), not `any`.
+
 #### `mode`: per-field validation timing (react-f0rm ≥ 0.6)
 
 Pass `mode` to validate one field on its own schedule instead of the
@@ -199,3 +239,26 @@ Anyone and everyone is welcome to contribute.
 ## License
 
 [MIT](https://choosealicense.com/licenses/mit/)
+
+## FAQ
+
+### Components render without any styles
+
+haze-ui ships styles as separate CSS subpaths — the JS entry does not
+import any stylesheet. Import the full bundle once:
+
+```js
+import 'haze-ui/styles.css';
+```
+
+or import the tokens plus each component's own rules:
+
+```js
+import 'haze-ui/css/tokens.css';
+import 'haze-ui/css/button.css';
+```
+
+### Is there a CommonJS build?
+
+No — haze-ui is ESM-only (`"type": "module"`). Use a bundler or runtime
+with ESM support (Vite, webpack 5, Next.js, Node ≥ 18, …).

package/dist/components/ColorPicker/ColorPickerCore.js

@@ -12,11 +12,13 @@ function u({ value: u, onChange: d, presets: f, className: p }) {
 			children: [/* @__PURE__ */ t("input", {
 				type: "color",
 				value: u,
+				"aria-label": "Pick color",
 				onChange: (e) => d(e.target.value),
 				className: e([a])
 			}), /* @__PURE__ */ t("input", {
 				type: "text",
 				value: u,
+				"aria-label": "Hex color",
 				onChange: (e) => d(e.target.value),
 				className: e([o])
 			})]

package/dist/components/Combobox/Combobox.js

@@ -1,53 +1,64 @@
 
 import { classnames as e } from "../../utils/classnames.js";
-import t from "./ComboboxOption.js";
+import { FloatingPanel as t, useFloating as n } from "../../utils/floating.js";
+import r from "./ComboboxOption.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, useId as o, useRef as s, useState as c } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { useControl as o } from "react-use-control";
+import { useEffect as s, useId as c, useRef as l, useState as u } from "react";
 //#region src/lib/components/Combobox/Combobox.tsx
-var l = "haze-Combobox__wrapper", u = "haze-Combobox__input", d = "haze-Combobox__listbox", f = "haze-Combobox__hidden";
-function p({ value: p, open: m, options: h, placeholder: g, className: _ }) {
-	let [v, y] = i(p, ""), [b, x] = c(""), [S, C] = i(m, !1), [w, T] = c(-1), E = o(), D = s(null), O = h.filter((e) => e.label.toLowerCase().includes(b.toLowerCase()));
-	a(() => {
-		T(-1);
-	}, [b]);
-	let k = (e) => {
-		y(e);
-		let t = h.find((t) => t.value === e)?.label ?? e;
-		x(t), C(!1), D.current?.focus();
+var d = "haze-Combobox__wrapper", f = "haze-Combobox__input", p = "haze-Combobox__listbox";
+function m({ value: m, open: h, options: g, placeholder: _, className: v }) {
+	let [y, b] = o(m, ""), [x, S] = u(""), [C, w] = o(h, !1), [T, E] = u(-1), D = c(), O = l(null), k = l(null), A = n({
+		open: C,
+		setOpen: w,
+		triggerRef: O,
+		panelRef: k
+	}), j = g.filter((e) => e.label.toLowerCase().includes(x.toLowerCase()));
+	s(() => {
+		E(-1);
+	}, [x]);
+	let M = (e) => {
+		b(e);
+		let t = g.find((t) => t.value === e)?.label ?? e;
+		S(t), w(!1), O.current?.focus();
 	};
-	return /* @__PURE__ */ r("div", {
-		className: e([l, _]),
-		children: [/* @__PURE__ */ n("input", {
-			ref: D,
+	return /* @__PURE__ */ a("div", {
+		className: e([d, v]),
+		children: [/* @__PURE__ */ i("input", {
+			ref: O,
 			role: "combobox",
-			"aria-expanded": S,
-			"aria-controls": E,
+			style: A.triggerStyle,
+			"aria-expanded": C,
+			"aria-controls": D,
 			"aria-autocomplete": "list",
-			className: u,
-			value: b,
-			placeholder: g,
+			className: f,
+			value: x,
+			placeholder: _,
 			onChange: (e) => {
-				x(e.target.value), C(!0);
+				S(e.target.value), w(!0);
 			},
-			onFocus: () => C(!0),
+			onFocus: () => w(!0),
+			onClick: () => w(!0),
 			onKeyDown: (e) => {
-				e.key === "ArrowDown" ? (e.preventDefault(), T((e) => Math.min(e + 1, O.length - 1))) : e.key === "ArrowUp" ? (e.preventDefault(), T((e) => Math.max(e - 1, 0))) : e.key === "Enter" && w >= 0 && O[w] ? (e.preventDefault(), k(O[w].value)) : e.key === "Escape" && C(!1);
+				e.key === "ArrowDown" ? (e.preventDefault(), E((e) => Math.min(e + 1, j.length - 1))) : e.key === "ArrowUp" ? (e.preventDefault(), E((e) => Math.max(e - 1, 0))) : e.key === "Enter" && T >= 0 && j[T] ? (e.preventDefault(), M(j[T].value)) : e.key === "Escape" && w(!1);
 			}
-		}), /* @__PURE__ */ n("div", {
-			id: E,
+		}), /* @__PURE__ */ i(t, {
+			ref: k,
+			behavior: A,
+			placement: "bottom-span",
+			id: D,
 			role: "listbox",
-			className: e([d, !S && f]),
-			children: O.map((e, r) => /* @__PURE__ */ n(t, {
+			visualClass: p,
+			children: j.map((e, t) => /* @__PURE__ */ i(r, {
 				value: e.value,
-				highlighted: r === w,
-				selected: e.value === v,
-				onSelect: k,
+				highlighted: t === T,
+				selected: e.value === y,
+				onSelect: M,
 				children: e.label
 			}, e.value))
 		})]
 	});
 }
 //#endregion
-export { p as default };
+export { m as default };

package/dist/components/Command/Command.js

@@ -1,59 +1,94 @@
 
 import { classnames as e } from "../../utils/classnames.js";
+import { getEnabledMenuItems as t, useMenuKeyboard as n, useRovingTabindex as r } from "../../utils/menuKeyboard.js";
 /* empty css                  */
-import { jsx as t } from "react/jsx-runtime";
-import { useControl as n } from "react-use-control";
-import { createContext as r, useContext as i, useMemo as a } from "react";
+import { jsx as i } from "react/jsx-runtime";
+import { useControl as a } from "react-use-control";
+import { createContext as o, useContext as s, useId as c, useMemo as l, useRef as u } from "react";
 //#region src/lib/components/Command/Command.tsx
-var o = r(void 0);
-function s() {
-	let e = i(o);
+var d = "[role=\"option\"]", f = o(void 0);
+function p() {
+	let e = s(f);
 	if (!e) throw Error("Command sub-components must be used within <Command>");
 	return e;
 }
-var c = "haze-Command__base";
-function l({ query: r, children: i, className: s }) {
-	let [l, u] = n(r, ""), d = a(() => ({
-		query: l,
-		setQuery: u
-	}), [l, u]);
-	return /* @__PURE__ */ t(o.Provider, {
-		value: d,
-		children: t("div", {
+var m = "haze-Command__base";
+function h({ query: t, children: n, className: r }) {
+	let [o, s] = a(t, ""), d = u(null), p = u(null), h = c(), g = l(() => ({
+		query: o,
+		setQuery: s,
+		inputRef: d,
+		listRef: p,
+		listId: h
+	}), [
+		o,
+		s,
+		h
+	]);
+	return /* @__PURE__ */ i(f.Provider, {
+		value: g,
+		children: i("div", {
 			role: "combobox",
-			className: e([c, s]),
-			children: i
+			"aria-expanded": !0,
+			"aria-controls": h,
+			className: e([m, r]),
+			children: n
 		})
 	});
 }
-var u = "haze-Command__inputStyle";
-function d({ placeholder: n, className: r }) {
-	let { query: i, setQuery: a } = s();
-	return /* @__PURE__ */ t("input", {
+var g = "haze-Command__inputStyle";
+function _({ placeholder: n, className: r }) {
+	let { query: a, setQuery: o, inputRef: s, listRef: c } = p();
+	return /* @__PURE__ */ i("input", {
+		ref: s,
 		type: "text",
 		placeholder: n,
-		value: i,
-		onChange: (e) => a(e.target.value),
-		className: e([u, r])
+		value: a,
+		onChange: (e) => o(e.target.value),
+		onKeyDown: (e) => {
+			if (e.key !== "ArrowDown" && e.key !== "ArrowUp") return;
+			e.preventDefault();
+			let n = t(c.current, d);
+			(e.key === "ArrowDown" ? n[0] : n[n.length - 1])?.focus();
+		},
+		className: e([g, r])
 	});
 }
-var f = "haze-Command__listStyle";
-function p({ children: n, className: r }) {
-	return /* @__PURE__ */ t("div", {
+var v = "haze-Command__listStyle";
+function y({ children: t, className: a }) {
+	let { inputRef: o, listRef: s, listId: c } = p();
+	r({
+		menuRef: s,
+		active: !0,
+		selector: d
+	});
+	let l = n({
+		menuRef: s,
+		selector: d,
+		onClose: () => o.current?.focus()
+	});
+	return /* @__PURE__ */ i("div", {
+		ref: s,
 		role: "listbox",
-		className: e([f, r]),
-		children: n
+		id: c,
+		onKeyDown: l,
+		className: e([v, a]),
+		children: t
 	});
 }
-var m = "haze-Command__itemStyle";
-function h({ children: n, className: r, onSelect: i }) {
-	let { query: a } = s();
-	return !a || (typeof n == "string" ? n : "").toLowerCase().includes(a.toLowerCase()) ? /* @__PURE__ */ t("div", {
+var b = "haze-Command__itemStyle";
+function x({ children: t, className: n, onSelect: r }) {
+	let { query: a } = p();
+	return !a || (typeof t == "string" ? t : "").toLowerCase().includes(a.toLowerCase()) ? /* @__PURE__ */ i("div", {
 		role: "option",
-		onClick: i,
-		className: e([m, r]),
-		children: n
+		tabIndex: -1,
+		onClick: r,
+		onKeyDown: (e) => {
+			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), r?.());
+		},
+		className: e([b, n]),
+		children: t
 	}) : null;
 }
 //#endregion
-export { d as CommandInput, h as CommandItem, p as CommandList, l as default };
+export { _ as CommandInput, x as CommandItem, y as CommandList, h as default };

package/dist/components/ContextMenu/ContextMenu.js

@@ -1,38 +1,40 @@
 
 import { classnames as e } from "../../utils/classnames.js";
-import { ContextMenuProvider as t } from "./ContextMenuContext.js";
+import { useFloating as t } from "../../utils/floating.js";
+import { ContextMenuProvider as n } from "./ContextMenuContext.js";
 /* empty css                      */
-import { jsx as n } from "react/jsx-runtime";
-import { useControl as r } from "react-use-control";
-import { useCallback as i, useEffect as a, useRef as o, useState as s } from "react";
+import { jsx as r } from "react/jsx-runtime";
+import { useControl as i } from "react-use-control";
+import { useCallback as a, useRef as o, useState as s } from "react";
 //#region src/lib/components/ContextMenu/ContextMenu.tsx
 var c = "haze-ContextMenu__wrapper";
 function l({ open: l, onOpenChange: u, children: d, className: f }) {
-	let [p, m] = r(l, !1), [h, g] = s(0), [_, v] = s(0), y = o(null), b = i((e) => {
+	let [p, m] = i(l, !1), [h, g] = s(0), [_, v] = s(0), y = o(null), b = o(null), x = a((e) => {
 		let t = typeof e == "function" ? e(p) : e;
 		m(t), u?.(t);
 	}, [
 		p,
 		m,
 		u
-	]), x = i((e, t) => {
+	]), S = a((e, t) => {
 		g(e), v(t);
-	}, []);
-	return a(() => {
-		if (!p) return;
-		let e = (e) => {
-			y.current && !y.current.contains(e.target) && b(!1);
-		};
-		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-	}, [p, b]), /* @__PURE__ */ n(t, {
+	}, []), C = t({
+		open: p,
+		setOpen: x,
+		triggerRef: y,
+		panelRef: b
+	});
+	return /* @__PURE__ */ r(n, {
 		value: {
 			open: p,
-			setOpen: b,
+			setOpen: x,
 			x: h,
 			y: _,
-			setPosition: x
+			setPosition: S,
+			contentRef: b,
+			floating: C
 		},
-		children: n("div", {
+		children: r("div", {
 			ref: y,
 			className: e([c, f]),
 			children: d

package/dist/components/ContextMenu/ContextMenuContent.js

@@ -1,20 +1,32 @@
 
-import { classnames as e } from "../../utils/classnames.js";
-import { useContextMenuContext as t } from "./ContextMenuContext.js";
+import { FloatingPanel as e } from "../../utils/floating.js";
+import { useMenuKeyboard as t, useRovingTabindex as n } from "../../utils/menuKeyboard.js";
+import { useContextMenuContext as r } from "./ContextMenuContext.js";
 /* empty css                             */
-import { jsx as n } from "react/jsx-runtime";
+import { jsx as i } from "react/jsx-runtime";
 //#region src/lib/components/ContextMenu/ContextMenuContent.tsx
-var r = "haze-ContextMenuContent__content";
-function i({ children: i, className: a }) {
-	let { open: o, x: s, y: c } = t();
-	return o ? /* @__PURE__ */ n("div", {
+var a = "haze-ContextMenuContent__content";
+function o({ children: o, className: s }) {
+	let { open: c, setOpen: l, x: u, y: d, contentRef: f, floating: p } = r(), m = t({
+		menuRef: f,
+		onClose: () => l(!1)
+	});
+	return n({
+		menuRef: f,
+		active: c
+	}), c ? /* @__PURE__ */ i(e, {
+		ref: f,
+		behavior: p,
+		role: "menu",
+		visualClass: a,
+		className: s,
 		style: {
-			left: s,
-			top: c
+			left: u,
+			top: d
 		},
-		className: e([r, a]),
-		children: i
+		onKeyDown: m,
+		children: o
 	}) : null;
 }
 //#endregion
-export { i as default };
+export { o as default };

package/dist/components/ContextMenu/ContextMenuItem.js

@@ -9,6 +9,8 @@ function i({ children: i, onClick: a, disabled: o, className: s }) {
 	let { setOpen: c } = t();
 	return /* @__PURE__ */ n("button", {
 		type: "button",
+		role: "menuitem",
+		tabIndex: -1,
 		onClick: () => {
 			o || (a?.(), c(!1));
 		},

package/dist/components/DateRangePicker/DateRangePickerCore.js

@@ -10,6 +10,7 @@ function o({ startDate: o, endDate: s, onStartChange: c, onEndChange: l, separat
 		children: [
 			/* @__PURE__ */ t("input", {
 				type: "date",
+				"aria-label": "Start date",
 				value: o,
 				onChange: (e) => c(e.target.value),
 				className: e([i])
@@ -20,6 +21,7 @@ function o({ startDate: o, endDate: s, onStartChange: c, onEndChange: l, separat
 			}),
 			/* @__PURE__ */ t("input", {
 				type: "date",
+				"aria-label": "End date",
 				value: s,
 				onChange: (e) => l(e.target.value),
 				className: e([i])

package/dist/components/Datepicker/Calendar.js

@@ -4,7 +4,7 @@ import { classnames as e } from "../../utils/classnames.js";
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
 import { useState as r } from "react";
 //#region src/lib/components/Datepicker/Calendar.tsx
-var i = "haze-Calendar__calendarWrapper", a = "haze-Calendar__header", o = "haze-Calendar__headerBtn", s = "haze-Calendar__headerTitle", c = "haze-Calendar__grid", l = "haze-Calendar__weekday", u = "haze-Calendar__dayBtn", d = "haze-Calendar__daySelected", f = "haze-Calendar__dayOutside", p = [
+var i = "haze-Calendar__calendarWrapper", a = "haze-Calendar__header", o = "haze-Calendar__headerBtn", s = "haze-Calendar__headerTitle", c = "haze-Calendar__grid", l = "haze-Calendar__rowContents", u = "haze-Calendar__cellContents", d = "haze-Calendar__weekday", f = "haze-Calendar__dayBtn", p = "haze-Calendar__daySelected", m = "haze-Calendar__dayOutside", h = [
 	"Su",
 	"Mo",
 	"Tu",
@@ -13,94 +13,108 @@ var i = "haze-Calendar__calendarWrapper", a = "haze-Calendar__header", o = "haze
 	"Fr",
 	"Sa"
 ];
-function m(e, t) {
+function g(e, t) {
 	return new Date(e, t + 1, 0).getDate();
 }
-function h(e, t, n) {
+function _(e, t, n) {
 	return `${e}-${String(t + 1).padStart(2, "0")}-${String(n).padStart(2, "0")}`;
 }
-function g({ value: g, min: _, max: v, onSelect: y }) {
-	let b = g ? new Date(g) : /* @__PURE__ */ new Date(), [x, S] = r(b.getFullYear()), [C, w] = r(b.getMonth()), T = m(x, C), E = new Date(x, C, 1).getDay(), D = m(x, C - 1), O = () => {
-		w((e) => e === 0 ? (S((e) => e - 1), 11) : e - 1);
-	}, k = () => {
-		w((e) => e === 11 ? (S((e) => e + 1), 0) : e + 1);
-	}, A = (e) => !!(_ && e < _ || v && e > v), j = [];
-	for (let e = E - 1; e >= 0; e--) {
-		let t = C === 0 ? 11 : C - 1, n = C === 0 ? x - 1 : x;
-		j.push({
-			day: D - e,
+function v({ value: v, min: y, max: b, onSelect: x }) {
+	let S = v ? new Date(v) : /* @__PURE__ */ new Date(), [C, w] = r(S.getFullYear()), [T, E] = r(S.getMonth()), D = g(C, T), O = new Date(C, T, 1).getDay(), k = g(C, T - 1), A = () => {
+		E((e) => e === 0 ? (w((e) => e - 1), 11) : e - 1);
+	}, j = () => {
+		E((e) => e === 11 ? (w((e) => e + 1), 0) : e + 1);
+	}, M = (e) => !!(y && e < y || b && e > b), N = [];
+	for (let e = O - 1; e >= 0; e--) {
+		let t = T === 0 ? 11 : T - 1, n = T === 0 ? C - 1 : C;
+		N.push({
+			day: k - e,
 			month: t,
 			year: n,
 			outside: !0
 		});
 	}
-	for (let e = 1; e <= T; e++) j.push({
+	for (let e = 1; e <= D; e++) N.push({
 		day: e,
-		month: C,
-		year: x,
+		month: T,
+		year: C,
 		outside: !1
 	});
-	let M = 7 - j.length % 7;
-	if (M < 7) for (let e = 1; e <= M; e++) {
-		let t = C === 11 ? 0 : C + 1, n = C === 11 ? x + 1 : x;
-		j.push({
+	let P = 7 - N.length % 7;
+	if (P < 7) for (let e = 1; e <= P; e++) {
+		let t = T === 11 ? 0 : T + 1, n = T === 11 ? C + 1 : C;
+		N.push({
 			day: e,
 			month: t,
 			year: n,
 			outside: !0
 		});
 	}
-	let N = new Date(x, C).toLocaleString("default", {
+	let F = new Date(C, T).toLocaleString("default", {
 		month: "long",
 		year: "numeric"
-	});
+	}), I = [];
+	for (let e = 0; e < N.length; e += 7) I.push(N.slice(e, e + 7));
 	return /* @__PURE__ */ n("div", {
-		role: "grid",
-		"aria-label": N,
 		className: e([i]),
 		children: [/* @__PURE__ */ n("div", {
 			className: e([a]),
 			children: [
 				/* @__PURE__ */ t("button", {
 					type: "button",
-					onClick: O,
+					onClick: A,
 					"aria-label": "Previous month",
 					className: e([o]),
 					children: "‹"
 				}),
 				/* @__PURE__ */ t("span", {
 					className: e([s]),
-					children: N
+					children: F
 				}),
 				/* @__PURE__ */ t("button", {
 					type: "button",
-					onClick: k,
+					onClick: j,
 					"aria-label": "Next month",
 					className: e([o]),
 					children: "›"
 				})
 			]
 		}), /* @__PURE__ */ n("div", {
+			role: "grid",
+			"aria-label": F,
 			className: e([c]),
-			children: [p.map((n) => /* @__PURE__ */ t("span", {
+			children: [/* @__PURE__ */ t("div", {
+				role: "row",
 				className: e([l]),
-				children: n
-			}, n)), j.map((n, r) => {
-				let i = h(n.year, n.month, n.day);
-				return /* @__PURE__ */ t("button", {
-					type: "button",
-					disabled: A(i),
-					onClick: () => y(i),
-					className: e([
-						u,
-						i === g && d,
-						n.outside && f
-					]),
-					children: n.day
-				}, r);
-			})]
+				children: h.map((n) => /* @__PURE__ */ t("span", {
+					role: "columnheader",
+					className: e([d]),
+					children: n
+				}, n))
+			}), I.map((n, r) => /* @__PURE__ */ t("div", {
+				role: "row",
+				className: e([l]),
+				children: n.map((n) => {
+					let r = _(n.year, n.month, n.day);
+					return /* @__PURE__ */ t("span", {
+						role: "gridcell",
+						className: e([u]),
+						children: /* @__PURE__ */ t("button", {
+							type: "button",
+							disabled: M(r),
+							onClick: () => x(r),
+							className: e([
+								f,
+								r === v && p,
+								n.outside && m
+							]),
+							children: n.day
+						})
+					}, r);
+				})
+			}, r))]
 		})]
 	});
 }
 //#endregion
-export { g as default };
+export { v as default };