haze-ui 1.12.1 → 1.13.0

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/Menu/Menu.js

@@ -1,35 +1,47 @@
 
 import { classnames as e } from "../../utils/classnames.js";
+import { FloatingPanel as t, useFloating as n } from "../../utils/floating.js";
+import { useMenuKeyboard as r, useRovingTabindex as i } from "../../utils/menuKeyboard.js";
 /* empty css               */
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { useControl as r } from "react-use-control";
-import { useEffect as i, useRef as a } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { useControl as s } from "react-use-control";
+import { useRef as c } from "react";
 //#region src/lib/components/Menu/Menu.tsx
-var o = "haze-Menu__container", s = "haze-Menu__panel", c = "haze-Menu__hidden";
-function l({ open: l, trigger: u, className: d, children: f }) {
-	let [p, m] = r(l, !1), h = a(null);
-	return i(() => {
-		if (!p) return;
-		let e = (e) => {
-			h.current && !h.current.contains(e.target) && m(!1);
-		};
-		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-	}, [p, m]), /* @__PURE__ */ n("div", {
-		ref: h,
-		className: o,
-		children: [/* @__PURE__ */ t("span", {
-			onClick: () => m((e) => !e),
-			children: u
-		}), /* @__PURE__ */ t("div", {
-			role: "menu",
-			className: e([
-				s,
-				!p && c,
-				d
-			]),
+var l = "haze-Menu__container", u = "haze-Menu__panel";
+function d({ open: d, trigger: f, className: p, children: m }) {
+	let [h, g] = s(d, !1), _ = c(null), v = c(null), y = n({
+		open: h,
+		setOpen: g,
+		triggerRef: _,
+		panelRef: v
+	});
+	i({
+		menuRef: v,
+		active: h
+	});
+	let b = r({
+		menuRef: v,
+		onClose: () => g(!1)
+	});
+	return /* @__PURE__ */ o("div", {
+		className: e(l),
+		children: [/* @__PURE__ */ a("span", {
+			ref: _,
+			style: y.triggerStyle,
+			onPointerDown: y.onTriggerPointerDown,
+			onClick: y.onTriggerClick,
 			children: f
+		}), /* @__PURE__ */ a(t, {
+			ref: v,
+			behavior: y,
+			placement: "bottom",
+			role: "menu",
+			visualClass: u,
+			className: p,
+			onKeyDown: b,
+			children: m
 		})]
 	});
 }
 //#endregion
-export { l as default };
+export { d as default };

package/dist/components/Menu/MenuItem.js

@@ -8,6 +8,7 @@ function r({ onSelect: r, disabled: i = !1, className: a, children: o }) {
 	return /* @__PURE__ */ t("button", {
 		type: "button",
 		role: "menuitem",
+		tabIndex: -1,
 		disabled: i,
 		onClick: r,
 		className: e([n, a]),

package/dist/components/ModelPicker/ModelPicker.js

@@ -10,6 +10,7 @@ function o({ value: o, onChange: s, options: c, disabled: l, className: u }) {
 	return /* @__PURE__ */ t("div", {
 		className: e([i, u]),
 		children: t("select", {
+			"aria-label": "Model",
 			value: d,
 			onChange: (e) => {
 				f(e.target.value), s?.(e.target.value);

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 };

package/dist/components/NumberInput/NumberInputCore.js

@@ -0,0 +1,56 @@
+
+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/NumberInput/NumberInputCore.tsx
+var r = "haze-NumberInputCore__wrapper", i = "haze-NumberInputCore__input", a = "haze-NumberInputCore__stepBtn", o = "haze-NumberInputCore__inputSm", s = "haze-NumberInputCore__inputMd", c = "haze-NumberInputCore__inputLg", l = "haze-NumberInputCore__btnSm", u = "haze-NumberInputCore__btnMd", d = "haze-NumberInputCore__btnLg", f = {
+	sm: o,
+	md: s,
+	lg: c
+}, p = {
+	sm: l,
+	md: u,
+	lg: d
+};
+function m({ value: o, onChange: s, onNativeChange: c, min: l, max: u, step: d = 1, size: m = "md", className: h, ...g }) {
+	let _ = (e) => {
+		let t = Math.round(e * 1e10) / 1e10;
+		return l !== void 0 && t < l ? l : u !== void 0 && t > u ? u : t;
+	};
+	return /* @__PURE__ */ n("div", {
+		className: e([r, h]),
+		children: [
+			/* @__PURE__ */ t("button", {
+				type: "button",
+				onClick: () => s(_(o - d)),
+				disabled: l !== void 0 && o <= l,
+				"aria-label": "Decrease",
+				className: e([a, p[m]]),
+				children: "−"
+			}),
+			/* @__PURE__ */ t("input", {
+				type: "number",
+				value: o,
+				min: l,
+				max: u,
+				step: d,
+				onChange: (e) => {
+					let t = Number(e.target.value);
+					Number.isNaN(t) || s(_(t)), c?.(e);
+				},
+				...g,
+				className: e([i, f[m]])
+			}),
+			/* @__PURE__ */ t("button", {
+				type: "button",
+				onClick: () => s(_(o + d)),
+				disabled: u !== void 0 && o >= u,
+				"aria-label": "Increase",
+				className: e([a, p[m]]),
+				children: "+"
+			})
+		]
+	});
+}
+//#endregion
+export { m as default };

package/dist/components/OTPInput/OTPInput.js

@@ -1,51 +1,17 @@
-
-import { classnames as e } from "../../utils/classnames.js";
-/* empty css                   */
+import e from "./OTPInputCore.js";
 import { jsx as t } from "react/jsx-runtime";
 import { useControl as n } from "react-use-control";
-import { useCallback as r, useRef as i } from "react";
 //#region src/lib/components/OTPInput/OTPInput.tsx
-var a = "haze-OTPInput__container", o = "haze-OTPInput__cell";
-function s({ length: s = 6, value: c, onChange: l, className: u }) {
-	let [d, f] = n(c, ""), p = i([]), m = r((e, t) => {
-		let n = d.split("");
-		n[e] = t.slice(-1);
-		let r = n.join("").slice(0, s);
-		f(r), l?.(r), t && e < s - 1 && p.current[e + 1]?.focus();
-	}, [
-		d,
-		s,
-		f,
-		l
-	]), h = r((e, t) => {
-		t.key === "Backspace" && !d[e] && e > 0 && p.current[e - 1]?.focus();
-	}, [d]), g = r((e) => {
-		e.preventDefault();
-		let t = e.clipboardData.getData("text").slice(0, s);
-		f(t), l?.(t);
-		let n = Math.min(t.length, s - 1);
-		p.current[n]?.focus();
-	}, [
-		s,
-		f,
-		l
-	]);
-	return /* @__PURE__ */ t("div", {
-		className: e([a, u]),
-		children: Array.from({ length: s }, (n, r) => /* @__PURE__ */ t("input", {
-			ref: (e) => {
-				p.current[r] = e;
-			},
-			type: "text",
-			inputMode: "numeric",
-			maxLength: 1,
-			value: d[r] ?? "",
-			onChange: (e) => m(r, e.target.value),
-			onKeyDown: (e) => h(r, e),
-			onPaste: g,
-			className: e([o])
-		}, r))
+function r({ length: r, value: i, onChange: a, className: o }) {
+	let [s, c] = n(i, "");
+	return /* @__PURE__ */ t(e, {
+		length: r,
+		value: s,
+		onChange: (e) => {
+			c(e), a?.(e);
+		},
+		className: o
 	});
 }
 //#endregion
-export { s as default };
+export { r as default };

package/dist/components/OTPInput/OTPInputCore.js

@@ -0,0 +1,44 @@
+
+import { classnames as e } from "../../utils/classnames.js";
+/* empty css                       */
+import { jsx as t } from "react/jsx-runtime";
+import { useCallback as n, useRef as r } from "react";
+//#region src/lib/components/OTPInput/OTPInputCore.tsx
+var i = "haze-OTPInputCore__container", a = "haze-OTPInputCore__cell";
+function o({ length: o = 6, value: s, onChange: c, className: l }) {
+	let u = r([]), d = n((e, t) => {
+		let n = s.split("");
+		n[e] = t.slice(-1), c(n.join("").slice(0, o)), t && e < o - 1 && u.current[e + 1]?.focus();
+	}, [
+		s,
+		o,
+		c
+	]), f = n((e, t) => {
+		t.key === "Backspace" && !s[e] && e > 0 && u.current[e - 1]?.focus();
+	}, [s]), p = n((e) => {
+		e.preventDefault();
+		let t = e.clipboardData.getData("text").slice(0, o);
+		c(t);
+		let n = Math.min(t.length, o - 1);
+		u.current[n]?.focus();
+	}, [o, c]);
+	return /* @__PURE__ */ t("div", {
+		className: e([i, l]),
+		children: Array.from({ length: o }, (n, r) => /* @__PURE__ */ t("input", {
+			ref: (e) => {
+				u.current[r] = e;
+			},
+			type: "text",
+			inputMode: "numeric",
+			maxLength: 1,
+			"aria-label": `Digit ${r + 1} of ${o}`,
+			value: s[r] ?? "",
+			onChange: (e) => d(r, e.target.value),
+			onKeyDown: (e) => f(r, e),
+			onPaste: p,
+			className: e([a])
+		}, r))
+	});
+}
+//#endregion
+export { o as default };

package/dist/components/PasswordInput/PasswordInput.js

@@ -1,33 +1,18 @@
-
-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 { useState as i } from "react";
+import e from "./PasswordInputCore.js";
+import { jsx as t } from "react/jsx-runtime";
+import { useControl as n } from "react-use-control";
 //#region src/lib/components/PasswordInput/PasswordInput.tsx
-var a = "haze-PasswordInput__wrapper", o = "haze-PasswordInput__input", s = "haze-PasswordInput__toggle";
-function c({ value: c, onChange: l, placeholder: u, disabled: d, className: f }) {
-	let [p, m] = r(c, ""), [h, g] = i(!1);
-	return /* @__PURE__ */ n("div", {
-		className: e([a, f]),
-		children: [/* @__PURE__ */ t("input", {
-			type: h ? "text" : "password",
-			value: p,
-			onChange: (e) => {
-				m(e.target.value), l?.(e.target.value);
-			},
-			placeholder: u,
-			disabled: d,
-			className: e([o])
-		}), /* @__PURE__ */ t("button", {
-			type: "button",
-			onClick: () => g(!h),
-			tabIndex: -1,
-			"aria-label": h ? "Hide password" : "Show password",
-			className: e([s]),
-			children: h ? "🙈" : "👁"
-		})]
+function r({ value: r, onChange: i, placeholder: a, disabled: o, className: s }) {
+	let [c, l] = n(r, "");
+	return /* @__PURE__ */ t(e, {
+		value: c,
+		onChange: (e) => {
+			l(e), i?.(e);
+		},
+		placeholder: a,
+		disabled: o,
+		className: s
 	});
 }
 //#endregion
-export { c as default };
+export { r as default };

package/dist/components/PasswordInput/PasswordInputCore.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";
+import { useState as r } from "react";
+//#region src/lib/components/PasswordInput/PasswordInputCore.tsx
+var i = "haze-PasswordInputCore__wrapper", a = "haze-PasswordInputCore__input", o = "haze-PasswordInputCore__toggle";
+function s({ value: s, onChange: c, placeholder: l, disabled: u, className: d }) {
+	let [f, p] = r(!1);
+	return /* @__PURE__ */ n("div", {
+		className: e([i, d]),
+		children: [/* @__PURE__ */ t("input", {
+			type: f ? "text" : "password",
+			"aria-label": "Password",
+			value: s,
+			onChange: (e) => c(e.target.value),
+			placeholder: l,
+			disabled: u,
+			className: e([a])
+		}), /* @__PURE__ */ t("button", {
+			type: "button",
+			onClick: () => p(!f),
+			tabIndex: -1,
+			"aria-label": f ? "Hide password" : "Show password",
+			className: e([o]),
+			children: f ? "🙈" : "👁"
+		})]
+	});
+}
+//#endregion
+export { s as default };

package/dist/components/Popover/Popover.js

@@ -1,82 +1,39 @@
 
-import { classnames as e } from "../../utils/classnames.js";
+import { FloatingPanel as e, useFloating as t } from "../../utils/floating.js";
 /* empty css                  */
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { useControl as r } from "react-use-control";
-import { useEffect as i, useId as a, useRef as o } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { useControl as i } from "react-use-control";
+import { useId as a, useRef as o } from "react";
 //#region src/lib/components/Popover/Popover.tsx
-var s = 500;
-function c() {
-	return typeof HTMLElement < "u" && "popover" in HTMLElement.prototype;
-}
-function l() {
-	return c() && typeof CSS < "u" && typeof CSS.supports == "function" && CSS.supports("anchor-name: --haze-popover-probe");
-}
-var u = "haze-Popover__container", d = "haze-Popover__panelVisuals", f = "haze-Popover__panelFallback", p = "haze-Popover__hidden", m = "haze-Popover__panelNative", h = "haze-Popover__panelAnchored", g = "haze-Popover__panelJsPositioned";
-function _({ content: _, open: v, className: y, children: b }) {
-	let [x, S] = r(v, !1), C = a(), w = `--haze-popover-${C.replace(/[^a-zA-Z0-9]/g, "")}`, T = c(), E = l(), D = o(null), O = o(null), k = o(!1), A = o(0), j = o(0);
-	return i(() => {
-		let e = O.current;
-		if (!e || !T) return;
-		let t = (e) => {
-			let t = e.newState;
-			k.current = t === "open", t === "closed" && x ? (performance.now() - A.current < s && (j.current = performance.now()), A.current = 0, S(!1)) : t === "open" && !x && S(!0);
-		};
-		return e.addEventListener("toggle", t), x && !k.current ? e.showPopover() : !x && k.current && e.hidePopover(), () => e.removeEventListener("toggle", t);
-	}, [
-		T,
-		x,
-		S
-	]), i(() => {
-		if (!T || E || !x) return;
-		let e = O.current, t = D.current;
-		if (!e || !t) return;
-		let n = () => {
-			let n = t.getBoundingClientRect(), r = parseFloat(getComputedStyle(e).marginTop) || 0;
-			e.style.top = `${n.bottom + r}px`, e.style.left = `${n.left}px`;
-		};
-		return n(), window.addEventListener("scroll", n, !0), window.addEventListener("resize", n), () => {
-			window.removeEventListener("scroll", n, !0), window.removeEventListener("resize", n);
-		};
-	}, [
-		T,
-		E,
-		x
-	]), /* @__PURE__ */ n("span", {
-		className: u,
-		children: [/* @__PURE__ */ t("span", {
-			ref: D,
-			"aria-expanded": x,
-			"aria-controls": C,
-			style: E ? { anchorName: w } : void 0,
-			onPointerDown: () => {
-				x && (A.current = performance.now());
-			},
-			onClick: () => {
-				if (performance.now() - j.current < s) {
-					j.current = 0;
-					return;
-				}
-				S((e) => !e);
-			},
-			children: b
-		}), /* @__PURE__ */ t("div", {
-			id: C,
-			ref: O,
-			popover: T ? "auto" : void 0,
-			style: T && E ? { "--haze-popover-anchor": w } : void 0,
-			className: e([
-				d,
-				T && m,
-				T && E && h,
-				T && !E && g,
-				!T && f,
-				!T && !x && p,
-				y
-			]),
-			children: _
+var s = "haze-Popover__container", c = "haze-Popover__panelVisuals";
+function l({ content: l, open: u, className: d, children: f }) {
+	let [p, m] = i(u, !1), h = a(), g = o(null), _ = o(null), v = t({
+		open: p,
+		setOpen: m,
+		triggerRef: g,
+		panelRef: _
+	});
+	return /* @__PURE__ */ r("span", {
+		className: s,
+		children: [/* @__PURE__ */ n("span", {
+			ref: g,
+			style: v.triggerStyle,
+			role: "button",
+			"aria-expanded": p,
+			"aria-controls": h,
+			onPointerDown: v.onTriggerPointerDown,
+			onClick: v.onTriggerClick,
+			children: f
+		}), /* @__PURE__ */ n(e, {
+			ref: _,
+			behavior: v,
+			placement: "bottom-span",
+			id: h,
+			visualClass: c,
+			className: d,
+			children: l
 		})]
 	});
 }
 //#endregion
-export { _ as default };
+export { l as default };

package/dist/components/Progress/Progress.js

@@ -36,6 +36,7 @@ function m({ value: m = 0, variant: h = "bar", size: g = "md", color: _ = "prima
 		let r = p[g], i = f[g], a = 2 * Math.PI * r, o = a - y / 100 * a;
 		return /* @__PURE__ */ t("div", {
 			role: "progressbar",
+			"aria-label": "Progress",
 			"aria-valuemin": 0,
 			"aria-valuemax": 100,
 			"aria-valuenow": y,
@@ -66,6 +67,7 @@ function m({ value: m = 0, variant: h = "bar", size: g = "md", color: _ = "prima
 	}
 	return /* @__PURE__ */ t("div", {
 		role: "progressbar",
+		"aria-label": "Progress",
 		"aria-valuemin": 0,
 		"aria-valuemax": 100,
 		"aria-valuenow": y,

package/dist/components/Radio/RadioGroup.js

@@ -1,25 +1,16 @@
-
-import { classnames as e } from "../../utils/classnames.js";
-import { RadioProvider as t } from "./RadioContext.js";
-/* empty css                     */
-import { jsx as n } from "react/jsx-runtime";
-import { useControl as r } from "react-use-control";
-import { useId as i } from "react";
+import e from "./RadioGroupCore.js";
+import { jsx as t } from "react/jsx-runtime";
+import { useControl as n } from "react-use-control";
 //#region src/lib/components/Radio/RadioGroup.tsx
-var a = "haze-RadioGroup__base";
-function o({ value: o, name: s, className: c, children: l }) {
-	let [u, d] = r(o, ""), f = i();
-	return /* @__PURE__ */ n("fieldset", {
-		className: e([a, c]),
-		children: n(t, {
-			value: {
-				name: s ?? f,
-				value: u,
-				setValue: d
-			},
-			children: l
-		})
+function r({ value: r, name: i, className: a, children: o }) {
+	let [s, c] = n(r, "");
+	return /* @__PURE__ */ t(e, {
+		value: s,
+		onChange: c,
+		name: i,
+		className: a,
+		children: o
 	});
 }
 //#endregion
-export { o as default };
+export { r as default };