haze-ui 1.12.2 → 1.13.0

package/dist/components/Datepicker/DatepickerCore.js

@@ -1,42 +1,50 @@
 
 import { classnames as e } from "../../utils/classnames.js";
-import t from "./Calendar.js";
+import { FloatingPanel as t, useFloating as n } from "../../utils/floating.js";
+import r 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";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { useCallback as o, useId as s, useRef as c } 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", {
+var l = "haze-DatepickerCore__wrapper", u = "haze-DatepickerCore__input", d = "haze-DatepickerCore__dropdown";
+function f({ value: f, onChange: p, open: m, onOpenChange: h, min: g, max: _, placeholder: v = "Select date", className: y }) {
+	let b = c(null), x = c(null), S = s(), C = o((e) => h(typeof e == "function" ? e(m) : e), [h, m]), w = n({
+		open: m,
+		setOpen: C,
+		triggerRef: b,
+		panelRef: x
+	});
+	return /* @__PURE__ */ a("div", {
+		className: e([l, y]),
+		children: [/* @__PURE__ */ i("input", {
+			ref: b,
 			readOnly: !0,
-			className: s,
-			value: u,
-			placeholder: g,
-			onClick: () => p(!f),
+			style: w.triggerStyle,
+			className: u,
+			value: f,
+			placeholder: v,
+			role: "combobox",
 			"aria-haspopup": "dialog",
-			"aria-expanded": f
-		}), /* @__PURE__ */ n("div", {
-			className: e([c, !f && l]),
-			children: /* @__PURE__ */ n(t, {
-				value: u,
-				min: m,
-				max: h,
+			"aria-expanded": m,
+			"aria-controls": S,
+			onPointerDown: w.onTriggerPointerDown,
+			onClick: w.onTriggerClick
+		}), /* @__PURE__ */ i(t, {
+			ref: x,
+			behavior: w,
+			placement: "bottom",
+			visualClass: d,
+			id: S,
+			children: /* @__PURE__ */ i(r, {
+				value: f,
+				min: g,
+				max: _,
 				onSelect: (e) => {
-					d(e), p(!1);
+					p(e), h(!1);
 				}
 			})
 		})]
 	});
 }
 //#endregion
-export { u as default };
+export { f as default };

package/dist/components/DropdownMenu/DropdownMenu.js

@@ -1,38 +1,38 @@
 
 import { classnames as e } from "../../utils/classnames.js";
-import { DropdownMenuProvider as t } from "./DropdownMenuContext.js";
+import { useFloating as t } from "../../utils/floating.js";
+import { DropdownMenuProvider as n } from "./DropdownMenuContext.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, useId as o, useRef as s } from "react";
+import { jsx as r } from "react/jsx-runtime";
+import { useControl as i } from "react-use-control";
+import { useCallback as a, useId as o, useRef as s } from "react";
 //#region src/lib/components/DropdownMenu/DropdownMenu.tsx
 var c = "haze-DropdownMenu__wrapper";
 function l({ open: l, onOpenChange: u, children: d, className: f }) {
-	let [p, m] = r(l, !1), h = s(null), g = s(null), _ = s(null), v = o(), y = s(null), b = i((e) => {
+	let [p, m] = i(l, !1), h = s(null), g = s(null), _ = o(), v = s(null), y = a((e) => {
 		let t = typeof e == "function" ? e(p) : e;
 		m(t), u?.(t);
 	}, [
 		p,
 		m,
 		u
-	]);
-	return a(() => {
-		if (!p) return;
-		let e = (e) => {
-			h.current && !h.current.contains(e.target) && b(!1);
-		};
-		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-	}, [p, b]), /* @__PURE__ */ n(t, {
+	]), b = t({
+		open: p,
+		setOpen: y,
+		triggerRef: h,
+		panelRef: g
+	});
+	return /* @__PURE__ */ r(n, {
 		value: {
 			open: p,
-			setOpen: b,
-			triggerRef: g,
-			contentRef: _,
-			contentId: v,
-			focusRequestRef: y
+			setOpen: y,
+			triggerRef: h,
+			contentRef: g,
+			contentId: _,
+			focusRequestRef: v,
+			floating: b
 		},
-		children: n("div", {
-			ref: h,
+		children: r("div", {
 			className: e([c, f]),
 			children: d
 		})

package/dist/components/DropdownMenu/DropdownMenuContent.js

@@ -1,55 +1,48 @@
 
-import { classnames as e } from "../../utils/classnames.js";
-import { useDropdownMenuContext as t } from "./DropdownMenuContext.js";
-import { getEnabledMenuItems as n, useMenuKeyboard as r } from "./useMenuKeyboard.js";
+import { FloatingPanel as e } from "../../utils/floating.js";
+import { getEnabledMenuItems as t, useMenuKeyboard as n, useRovingTabindex as r } from "../../utils/menuKeyboard.js";
+import { useDropdownMenuContext as i } from "./DropdownMenuContext.js";
 /* empty css                              */
-import { jsx as i } from "react/jsx-runtime";
-import { useCallback as a, useEffect as o } from "react";
+import { jsx as a } from "react/jsx-runtime";
+import { useCallback as o, useEffect as s } from "react";
 //#region src/lib/components/DropdownMenu/DropdownMenuContent.tsx
-var s = "haze-DropdownMenuContent__content", c = {
-	start: "haze-DropdownMenuContent__alignStart",
-	center: "haze-DropdownMenuContent__alignCenter",
-	end: "haze-DropdownMenuContent__alignEnd"
+var c = "haze-DropdownMenuContent__content", l = {
+	start: "bottom",
+	center: "bottom-center",
+	end: "bottom-end"
 };
-function l({ children: l, align: u = "start", className: d }) {
-	let { open: f, setOpen: p, triggerRef: m, contentRef: h, contentId: g, focusRequestRef: _ } = t(), v = a(() => {
-		p(!1), m.current?.focus();
-	}, [p, m]), y = r({
-		menuRef: h,
-		onClose: v
+function u({ children: u, align: d = "start", className: f }) {
+	let { open: p, setOpen: m, triggerRef: h, contentRef: g, contentId: _, focusRequestRef: v, floating: y } = i(), b = o(() => {
+		m(!1), h.current?.focus();
+	}, [m, h]), x = n({
+		menuRef: g,
+		onClose: b
 	});
-	return o(() => {
-		if (!f) return;
-		let e = h.current;
-		if (!e) return;
-		let t = n(e);
-		t.forEach((e) => {
-			e.tabIndex = -1;
-		}), t[0] && (t[0].tabIndex = 0);
-		let r = _.current;
-		_.current = null, r && (r === "first" ? t[0] : t[t.length - 1])?.focus();
-		let i = (t) => {
-			n(e).forEach((e) => {
-				e.tabIndex = e === t.target ? 0 : -1;
-			});
-		};
-		return e.addEventListener("focusin", i), () => e.removeEventListener("focusin", i);
+	return r({
+		menuRef: g,
+		active: p
+	}), s(() => {
+		if (!p || !y.shown) return;
+		let e = v.current;
+		if (v.current = null, !e) return;
+		let n = t(g.current);
+		(e === "first" ? n[0] : n[n.length - 1])?.focus();
 	}, [
-		f,
-		h,
-		_
-	]), f ? /* @__PURE__ */ i("div", {
-		ref: h,
-		id: g,
+		p,
+		y.shown,
+		g,
+		v
+	]), p ? /* @__PURE__ */ a(e, {
+		ref: g,
+		behavior: y,
+		placement: l[d],
+		id: _,
 		role: "menu",
-		onKeyDown: y,
-		className: e([
-			s,
-			c[u],
-			d
-		]),
-		children: l
+		visualClass: c,
+		className: f,
+		onKeyDown: x,
+		children: u
 	}) : null;
 }
 //#endregion
-export { l as default };
+export { u as default };

package/dist/components/DropdownMenu/DropdownMenuTrigger.js

@@ -1,16 +1,16 @@
 
 import { classnames as e } from "../../utils/classnames.js";
-import { useDropdownMenuContext as t } from "./DropdownMenuContext.js";
-import { getEnabledMenuItems as n } from "./useMenuKeyboard.js";
+import { getEnabledMenuItems as t } from "../../utils/menuKeyboard.js";
+import { useDropdownMenuContext as n } from "./DropdownMenuContext.js";
 /* empty css                              */
 import { jsx as r } from "react/jsx-runtime";
 //#region src/lib/components/DropdownMenu/DropdownMenuTrigger.tsx
 var i = "haze-DropdownMenuTrigger__trigger";
 function a({ children: a, className: o }) {
-	let { open: s, setOpen: c, triggerRef: l, contentRef: u, contentId: d, focusRequestRef: f } = t(), p = (e) => {
+	let { open: s, setOpen: c, triggerRef: l, contentRef: u, contentId: d, focusRequestRef: f, floating: p } = n(), m = (e) => {
 		if (s) {
-			let t = n(u.current);
-			(e === "first" ? t[0] : t[t.length - 1])?.focus();
+			let n = t(u.current);
+			(e === "first" ? n[0] : n[n.length - 1])?.focus();
 		} else f.current = e, c(!0);
 	};
 	return /* @__PURE__ */ r("button", {
@@ -19,9 +19,11 @@ function a({ children: a, className: o }) {
 		"aria-haspopup": "menu",
 		"aria-expanded": s,
 		"aria-controls": s ? d : void 0,
-		onClick: () => c((e) => !e),
+		style: p.triggerStyle,
+		onPointerDown: p.onTriggerPointerDown,
+		onClick: p.onTriggerClick,
 		onKeyDown: (e) => {
-			e.key === "ArrowDown" ? (e.preventDefault(), p("first")) : e.key === "ArrowUp" && (e.preventDefault(), p("last"));
+			e.key === "ArrowDown" ? (e.preventDefault(), m("first")) : e.key === "ArrowUp" && (e.preventDefault(), m("last"));
 		},
 		className: e([i, o]),
 		children: a

package/dist/components/InlineEdit/InlineEdit.js

@@ -20,6 +20,7 @@ function l({ value: l, onChange: u, placeholder: d = "Click to edit", disabled:
 	};
 	return g ? /* @__PURE__ */ t("input", {
 		ref: b,
+		"aria-label": d,
 		value: v,
 		onChange: (e) => y(e.target.value),
 		onBlur: S,

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/OTPInput/OTPInputCore.js

@@ -31,6 +31,7 @@ function o({ length: o = 6, value: s, onChange: c, className: l }) {
 			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),

package/dist/components/PasswordInput/PasswordInputCore.js

@@ -11,6 +11,7 @@ function s({ value: s, onChange: c, placeholder: l, disabled: u, className: d })
 		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,

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

@@ -1,33 +1,59 @@
 
 import { classnames as e } from "../../utils/classnames.js";
+import { floatingPlacementClasses as t, useFloating as n, useFloatingPosition as r } from "../../utils/floating.js";
 /* empty css                  */
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { useId as r } 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 } from "react";
 //#region src/lib/components/Tooltip/Tooltip.tsx
-var i = "haze-Tooltip__wrapper", a = "haze-Tooltip__bubble", o = {
-	top: "haze-Tooltip__top",
-	bottom: "haze-Tooltip__bottom",
-	left: "haze-Tooltip__left",
-	right: "haze-Tooltip__right"
-}, s = "haze-Tooltip__showOnInteract";
-function c({ content: c, position: l = "top", className: u, children: d }) {
-	let f = r();
-	return /* @__PURE__ */ n("span", {
-		className: e([
-			i,
-			s,
-			u
-		]),
-		children: [/* @__PURE__ */ t("span", {
-			"aria-describedby": f,
-			children: d
-		}), /* @__PURE__ */ t("span", {
-			id: f,
+var u = "haze-Tooltip__wrapper", d = "haze-Tooltip__bubble", f = {
+	top: "top",
+	bottom: "bottom-center",
+	left: "left",
+	right: "right"
+};
+function p({ content: p, position: m = "top", delay: h = 150, open: g, className: _, children: v }) {
+	let [y, b] = o(g, !1), x = c(), S = l(null), C = l(null), w = f[m], T = n({
+		open: y,
+		setOpen: b,
+		triggerRef: S,
+		panelRef: C
+	});
+	r({
+		behavior: T,
+		placement: w
+	});
+	let E = l(0);
+	s(() => () => window.clearTimeout(E.current), []);
+	let D = () => {
+		window.clearTimeout(E.current), E.current = window.setTimeout(() => b(!0), h);
+	}, O = () => {
+		window.clearTimeout(E.current), b(!1);
+	};
+	return /* @__PURE__ */ a("span", {
+		className: e([u, _]),
+		children: [/* @__PURE__ */ i("span", {
+			ref: S,
+			style: T.triggerStyle,
+			"aria-describedby": x,
+			onMouseEnter: D,
+			onMouseLeave: O,
+			onFocus: D,
+			onBlur: O,
+			children: v
+		}), /* @__PURE__ */ i("span", {
+			id: x,
+			ref: C,
 			role: "tooltip",
-			className: e([a, o[l]]),
-			children: c
+			...T.panelAttrs,
+			className: e([
+				d,
+				...T.panelClasses,
+				...t(T, w)
+			]),
+			children: p
 		})]
 	});
 }
 //#endregion
-export { c as default };
+export { p as default };