haze-ui 1.29.0 → 1.31.0

package/dist/utils/floating.js

@@ -5,8 +5,8 @@ import { getDirection as t } from "./direction.js";
 import { computeFloatingPosition as n, mirrorPlacement as r, resolvePadding as i } from "./collision.js";
 import { whenExitSettles as a } from "./presence.js";
 /* empty css                   */
-import { jsx as o } from "react/jsx-runtime";
-import { useCallback as s, useEffect as c, useId as l, useRef as u, useState as d } from "react";
+import { useCallback as o, useEffect as s, useId as c, useRef as l, useState as u } from "react";
+import { jsx as d } from "react/jsx-runtime";
 //#region src/lib/utils/floating.tsx
 var f = 500;
 function p() {
@@ -52,47 +52,47 @@ var F = "haze-floating__fallbackBottom", I = F, L = "haze-floating__fallbackBott
 	left: W,
 	right: G
 };
-function te({ open: e, setOpen: n, triggerRef: r, panelRef: i, animated: o, collision: v }) {
-	let y = `--haze-floating-${l().replace(/[^a-zA-Z0-9]/g, "")}`, b = p(), x = m(), [S, C] = d(!e), [w, T] = d(e);
+function te({ open: e, setOpen: n, triggerRef: r, panelRef: i, animated: d, collision: v }) {
+	let y = `--haze-floating-${c().replace(/[^a-zA-Z0-9]/g, "")}`, b = p(), x = m(), [S, C] = u(!e), [w, T] = u(e);
 	e !== w && (T(e), e && C(!1));
-	let E = u(!1), [D, O] = d(!1), k = u(null), A = u(-Infinity), j = u(-Infinity), M = u(null);
-	c(() => {
+	let E = l(!1), [D, O] = u(!1), k = l(null), A = l(-Infinity), j = l(-Infinity), M = l(null);
+	s(() => {
 		let t = i.current;
 		if (!t || !b) return;
 		t !== k.current && (k.current = t, E.current = !1, O(!1));
-		let r = !0, s = () => {
+		let r = !0, o = () => {
 			M.current = { el: t }, t.hidePopover();
-		}, c = () => {
+		}, s = () => {
 			if (E.current && t === i.current) {
-				if (o) {
+				if (d) {
 					let e = () => {
-						r && E.current && t === i.current && s();
+						r && E.current && t === i.current && o();
 					}, n = a(t);
 					n ? n.then(e) : e();
-				} else s();
+				} else o();
 			}
-		}, l = (r) => {
+		}, c = (r) => {
 			let i = r.newState;
 			if (E.current = i === "open", O(E.current), i === "closed") {
-				o && C(!0);
+				d && C(!0);
 				let r = M.current?.el === t;
 				if (M.current = null, r) {
 					e && t.showPopover();
 					return;
 				}
 				e && (performance.now() - A.current < f && (j.current = performance.now()), A.current = -Infinity, n(!1));
-			} else e || c();
+			} else e || s();
 		};
-		return t.addEventListener("toggle", l), e ? E.current || t.showPopover() : c(), () => {
-			r = !1, t.removeEventListener("toggle", l);
+		return t.addEventListener("toggle", c), e ? E.current || t.showPopover() : s(), () => {
+			r = !1, t.removeEventListener("toggle", c);
 		};
 	}, [
 		b,
 		e,
 		n,
 		i,
-		o
-	]), c(() => {
+		d
+	]), s(() => {
 		if (b || !e) return;
 		let t = (e) => e instanceof Node && !!(r.current?.contains(e) || i.current?.contains(e)), a = (e) => {
 			t(e.target) || n(!1);
@@ -108,31 +108,31 @@ function te({ open: e, setOpen: n, triggerRef: r, panelRef: i, animated: o, coll
 		n,
 		r,
 		i
-	]), c(() => {
-		if (b || !o || e || S) return;
-		let t = !0, n = i.current, r = n ? a(n) : null, s = () => {
+	]), s(() => {
+		if (b || !d || e || S) return;
+		let t = !0, n = i.current, r = n ? a(n) : null, o = () => {
 			t && C(!0);
 		};
-		return r ? r.then(s) : s(), () => {
+		return r ? r.then(o) : o(), () => {
 			t = !1;
 		};
 	}, [
 		b,
-		o,
+		d,
 		e,
 		S,
 		i
 	]);
-	let N = s(() => {
+	let N = o(() => {
 		e && (A.current = performance.now());
-	}, [e]), P = s(() => {
+	}, [e]), P = o(() => {
 		if (performance.now() - j.current < f) {
 			j.current = -Infinity;
 			return;
 		}
 		n((e) => !e);
-	}, [n]), [F, I] = d("ltr");
-	return c(() => {
+	}, [n]), [F, I] = u("ltr");
+	return s(() => {
 		let e = t(r.current);
 		I((t) => t === e ? t : e);
 	}, [r, e]), {
@@ -140,8 +140,8 @@ function te({ open: e, setOpen: n, triggerRef: r, panelRef: i, animated: o, coll
 		native: b,
 		anchored: x,
 		shown: b ? D : e,
-		dataState: o ? e ? "open" : "closed" : void 0,
-		exited: o ? S : !e,
+		dataState: d ? e ? "open" : "closed" : void 0,
+		exited: d ? S : !e,
 		collision: v,
 		direction: F,
 		anchorName: y,
@@ -156,8 +156,8 @@ function te({ open: e, setOpen: n, triggerRef: r, panelRef: i, animated: o, coll
 			b && h,
 			b && x && g,
 			b && !x && _,
-			!b && !e && (!o || S) && "haze-floating__floatingHidden",
-			!!o && "haze-floating__floatingAnimated"
+			!b && !e && (!d || S) && "haze-floating__floatingHidden",
+			!!d && "haze-floating__floatingAnimated"
 		],
 		triggerRef: r,
 		panelRef: i
@@ -205,8 +205,8 @@ function Q(e, r, a, o) {
 	e.style.top = `${d}px`, e.style.left = `${f}px`;
 }
 function $({ behavior: e, placement: t, collision: n }) {
-	let { native: r, anchored: a, shown: o, triggerRef: s, panelRef: l } = e;
-	c(() => {
+	let { native: r, anchored: a, shown: o, triggerRef: c, panelRef: l } = e;
+	s(() => {
 		if (!r || t === "point" || !o) return;
 		let e = l.current;
 		if (!e) return;
@@ -223,9 +223,9 @@ function $({ behavior: e, placement: t, collision: n }) {
 				window.removeEventListener("scroll", s, !0), window.removeEventListener("resize", s), e.style.translate = "";
 			};
 		}
-		let c = s.current;
-		if (!c) return;
-		let u = () => Q(e, c, t, n);
+		let s = c.current;
+		if (!s) return;
+		let u = () => Q(e, s, t, n);
 		return u(), window.addEventListener("scroll", u, !0), window.addEventListener("resize", u), () => {
 			window.removeEventListener("scroll", u, !0), window.removeEventListener("resize", u);
 		};
@@ -235,32 +235,33 @@ function $({ behavior: e, placement: t, collision: n }) {
 		o,
 		t,
 		n,
-		s,
+		c,
 		l
 	]);
 }
-function ne({ behavior: t, placement: n, collision: r, visualClass: i, className: a, style: s, children: c, ...l }) {
+function ne({ behavior: t, placement: n, collision: r, visualClass: i, className: a, style: o, children: s, ...c }) {
 	$({
 		behavior: t,
 		placement: n ?? "point",
 		collision: r ?? t.collision
 	});
-	let u = t.panelAttrs.style || s ? {
+	let l = t.panelAttrs.style || o ? {
 		...t.panelAttrs.style,
-		...s
+		...o
 	} : void 0;
-	return /* @__PURE__ */ o("div", {
+	return /* @__PURE__ */ d("div", {
+		"data-slot": "content",
 		...t.dataState !== void 0 && { "data-state": t.dataState },
-		...l,
+		...c,
 		...t.panelAttrs,
-		style: u,
+		style: l,
 		className: e([
 			i,
 			...t.panelClasses,
 			...n ? Y(t, n, t.direction) : [],
 			a
 		]),
-		children: c
+		children: s
 	});
 }
 //#endregion

package/dist/utils/menuItems.js

@@ -0,0 +1,55 @@
+"use client";
+import { Fragment as e } from "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/lib/utils/menuItems.tsx
+function r(i, a) {
+	return i.map((i, o) => {
+		let s = i.key ?? o;
+		switch (i.type) {
+			case "divider": return /* @__PURE__ */ t(a.Divider, {}, s);
+			case "item": return /* @__PURE__ */ t(a.Item, {
+				onSelect: i.onSelect,
+				disabled: i.disabled,
+				danger: i.danger,
+				icon: i.icon,
+				kbdLabel: i.kbdLabel,
+				children: i.label
+			}, s);
+			case "checkbox": return /* @__PURE__ */ t(a.CheckboxItem, {
+				checked: i.checked,
+				onCheckedChange: i.onCheckedChange,
+				disabled: i.disabled,
+				danger: i.danger,
+				icon: i.icon,
+				kbdLabel: i.kbdLabel,
+				children: i.label
+			}, s);
+			case "radio": return /* @__PURE__ */ t(a.RadioItem, {
+				value: i.value,
+				disabled: i.disabled,
+				danger: i.danger,
+				icon: i.icon,
+				kbdLabel: i.kbdLabel,
+				children: i.label
+			}, s);
+			case "group": {
+				let n = i.value === void 0 ? i.label === void 0 ? r(i.children, a) : /* @__PURE__ */ t(a.Group, {
+					label: i.label,
+					children: r(i.children, a)
+				}) : /* @__PURE__ */ t(a.RadioGroup, {
+					value: i.value,
+					onValueChange: i.onValueChange,
+					label: i.label,
+					children: r(i.children, a)
+				});
+				return /* @__PURE__ */ t(e, { children: n }, s);
+			}
+			case "sub": return /* @__PURE__ */ n(a.Sub, { children: [/* @__PURE__ */ t(a.SubTrigger, {
+				disabled: i.disabled,
+				children: i.label
+			}), /* @__PURE__ */ t(a.SubContent, { children: r(i.children, a) })] }, s);
+		}
+	});
+}
+//#endregion
+export { r as renderMenuDataItems };

package/dist/utils/menuKeyboard.js

@@ -2,56 +2,56 @@
 import { getDirection as e } from "./direction.js";
 import { useCallback as t, useEffect as n, useRef as r } from "react";
 //#region src/lib/utils/menuKeyboard.ts
-var i = 500, a = "[role=\"menuitem\"]:not([disabled])";
-function o(e, t = a) {
+var i = 500, a = "[role^=\"menuitem\"]:not([disabled])", o = /* @__PURE__ */ new Set(["menuitemcheckbox", "menuitemradio"]);
+function s(e, t = a) {
 	if (!e) return [];
 	let n = Array.from(e.querySelectorAll(t));
 	return e.getAttribute("role") === "menu" ? n.filter((t) => t.closest("[role=\"menu\"]") === e) : n;
 }
-function s({ menuRef: a, onClose: s, selector: c, onCloseToStart: l, orientation: u = "vertical" }) {
-	let d = r(""), f = r(0);
-	return n(() => () => window.clearTimeout(f.current), []), t((t) => {
-		let n = o(a.current, c);
+function c({ menuRef: a, onClose: c, selector: l, onCloseToStart: u, orientation: d = "vertical" }) {
+	let f = r(""), p = r(0);
+	return n(() => () => window.clearTimeout(p.current), []), t((t) => {
+		let n = s(a.current, l);
 		if (n.length === 0) return;
-		let r = n.indexOf(document.activeElement), p = (e) => n[e]?.focus(), m = u === "horizontal" ? e(a.current) === "rtl" ? "ArrowLeft" : "ArrowRight" : "ArrowDown", h = u === "horizontal" ? e(a.current) === "rtl" ? "ArrowRight" : "ArrowLeft" : "ArrowUp";
-		if (l) {
+		let r = n.indexOf(document.activeElement), m = (e) => n[e]?.focus(), h = d === "horizontal" ? e(a.current) === "rtl" ? "ArrowLeft" : "ArrowRight" : "ArrowDown", g = d === "horizontal" ? e(a.current) === "rtl" ? "ArrowRight" : "ArrowLeft" : "ArrowUp";
+		if (u) {
 			let n = e(a.current) === "rtl" ? "ArrowRight" : "ArrowLeft";
 			if (t.key === n) {
-				t.preventDefault(), l();
+				t.preventDefault(), u();
 				return;
 			}
 		}
 		switch (t.key) {
-			case m:
-				t.preventDefault(), p((r + 1) % n.length);
-				return;
 			case h:
-				t.preventDefault(), p((r - 1 + n.length) % n.length);
+				t.preventDefault(), m((r + 1) % n.length);
+				return;
+			case g:
+				t.preventDefault(), m((r - 1 + n.length) % n.length);
 				return;
 			case "Home":
-				t.preventDefault(), p(0);
+				t.preventDefault(), m(0);
 				return;
 			case "End":
-				t.preventDefault(), p(n.length - 1);
+				t.preventDefault(), m(n.length - 1);
 				return;
 			case "Escape":
-				t.preventDefault(), s();
+				t.preventDefault(), c();
 				return;
 			case "Tab":
-				t.preventDefault(), s();
+				t.preventDefault(), c();
 				return;
 			default: {
-				if (t.key.length !== 1 || t.ctrlKey || t.metaKey || t.altKey) return;
+				if (t.key.length !== 1 || t.ctrlKey || t.metaKey || t.altKey || t.key === " " && t.target instanceof Element && o.has(t.target.getAttribute("role") ?? "")) return;
 				t.preventDefault();
-				let e = (d.current + t.key).toLowerCase();
-				d.current = e, window.clearTimeout(f.current), f.current = window.setTimeout(() => {
-					d.current = "";
+				let e = (f.current + t.key).toLowerCase();
+				f.current = e, window.clearTimeout(p.current), p.current = window.setTimeout(() => {
+					f.current = "";
 				}, i);
 				let a = r + 1;
 				for (let t = 0; t < n.length; t++) {
 					let r = (a + t) % n.length;
 					if (n[r].textContent.toLowerCase().startsWith(e)) {
-						p(r);
+						m(r);
 						return;
 					}
 				}
@@ -59,18 +59,18 @@ function s({ menuRef: a, onClose: s, selector: c, onCloseToStart: l, orientation
 		}
 	}, [
 		a,
-		s,
 		c,
 		l,
-		u
+		u,
+		d
 	]);
 }
-function c({ menuRef: e, active: t, selector: r = a }) {
+function l({ menuRef: e, active: t, selector: r = a }) {
 	n(() => {
 		let n = e.current;
 		if (!t || !n) return;
 		let i = () => {
-			let e = o(n, r);
+			let e = s(n, r);
 			if (e.length === 0) return;
 			let t = e.findIndex((e) => e.tabIndex === 0), i = t >= 0 ? t : 0;
 			e.forEach((e, t) => {
@@ -83,14 +83,14 @@ function c({ menuRef: e, active: t, selector: r = a }) {
 			childList: !0,
 			subtree: !0
 		});
-		let s = (e) => {
-			let t = o(n, r);
+		let o = (e) => {
+			let t = s(n, r);
 			t.includes(e.target) && t.forEach((t) => {
 				t.tabIndex = t === e.target ? 0 : -1;
 			});
 		};
-		return n.addEventListener("focusin", s), () => {
-			a.disconnect(), n.removeEventListener("focusin", s);
+		return n.addEventListener("focusin", o), () => {
+			a.disconnect(), n.removeEventListener("focusin", o);
 		};
 	}, [
 		e,
@@ -99,4 +99,4 @@ function c({ menuRef: e, active: t, selector: r = a }) {
 	]);
 }
 //#endregion
-export { o as getEnabledMenuItems, s as useMenuKeyboard, c as useRovingTabindex };
+export { s as getEnabledMenuItems, c as useMenuKeyboard, l as useRovingTabindex };

package/dist/utils/menuRadio.js

@@ -0,0 +1,28 @@
+"use client";
+import { createContext as e, useContext as t, useMemo as n } from "react";
+import { useControl as r } from "react-use-control";
+//#region src/lib/utils/menuRadio.ts
+var i = e(void 0), a = i.Provider;
+function o(e, t) {
+	let [i, a] = r(e, "");
+	return n(() => ({
+		value: i,
+		select: (e) => {
+			e !== i && (a(e), t?.(e));
+		}
+	}), [
+		i,
+		a,
+		t
+	]);
+}
+function s(e) {
+	let n = t(i);
+	if (!n) throw Error("MenuRadioItem / DropdownMenuRadioItem must be used within a radio group");
+	return {
+		checked: n.value === e,
+		select: () => n.select(e)
+	};
+}
+//#endregion
+export { a as MenuRadioGroupProvider, o as useMenuRadioGroup, s as useMenuRadioItem };

package/dist/utils/sortable.js

@@ -8,18 +8,19 @@ import { jsx as i } from "react/jsx-runtime";
 import { SortableContext as a, useSortable as o } from "@dnd-kit/sortable";
 import { DndContext as s, closestCenter as c } from "@dnd-kit/core";
 //#region src/lib/utils/sortable.tsx
-function l({ ids: e, strategy: t, onMove: n, children: o }) {
-	let l = r();
+function l({ ids: e, strategy: t, onMove: n, onDragStart: o, onDragEnd: l, children: u }) {
+	let d = r();
 	return /* @__PURE__ */ i(s, {
-		sensors: l,
+		sensors: d,
 		collisionDetection: c,
+		onDragStart: o,
 		onDragEnd: ({ active: t, over: r }) => {
-			r && t.id !== r.id && n(e.indexOf(t.id), e.indexOf(r.id));
+			l?.(), r && t.id !== r.id && n(e.indexOf(t.id), e.indexOf(r.id));
 		},
 		children: i(a, {
 			items: e,
 			strategy: t,
-			children: o
+			children: u
 		})
 	});
 }
@@ -33,6 +34,7 @@ function f({ id: r, className: a, children: s }) {
 		},
 		children: i("span", {
 			ref: f,
+			"data-slot": "sortable-item",
 			style: n(p, m),
 			className: e([
 				u,

package/dist/utils/use-end-reached.js

@@ -0,0 +1,46 @@
+"use client";
+import { getDirection as e } from "./direction.js";
+import { useCallback as t, useEffect as n, useRef as r } from "react";
+//#region src/lib/utils/use-end-reached.ts
+function i({ ref: i, onEndReached: a, threshold: o, contentUnits: s, axis: c = "y", fromStart: l = !1, extentFallback: u, attach: d = !0 }) {
+	let f = r(a);
+	n(() => {
+		f.current = a;
+	});
+	let p = a !== void 0, m = r(!0), h = r(null), g = t(() => {
+		let t = f.current;
+		if (!t) return;
+		let n = i.current;
+		if (!n) return;
+		let r = c === "y" ? n.scrollTop : n.scrollLeft, a = c === "x" && e(n) === "rtl" ? -r : r, s = c === "y" ? n.scrollHeight : n.scrollWidth, d = (c === "y" ? n.clientHeight : n.clientWidth) || u || 0;
+		(l ? a : s - d - a) <= o ? m.current && (m.current = !1, t()) : m.current = !0;
+	}, [
+		i,
+		c,
+		l,
+		u,
+		o
+	]), _ = r(!1);
+	return n(() => {
+		let e = h.current, t = _.current;
+		h.current = s, _.current = p, p && (t && e !== null && s <= e || (!l || e !== null && t) && (m.current = !0, g()));
+	}, [
+		s,
+		g,
+		p,
+		l
+	]), n(() => {
+		if (!d || !p) return;
+		let e = i.current;
+		if (!e) return;
+		let t = () => g();
+		return e.addEventListener("scroll", t, { passive: !0 }), () => e.removeEventListener("scroll", t);
+	}, [
+		d,
+		p,
+		g,
+		i
+	]), g;
+}
+//#endregion
+export { i as useEndReached };

package/dist/utils/viewport.js

@@ -0,0 +1,20 @@
+"use client";
+import { useEffect as e, useState as t } from "react";
+//#region src/lib/utils/viewport.ts
+function n(n = !0) {
+	let [r, i] = t(0);
+	return e(() => {
+		if (!n) return;
+		let e = window.visualViewport;
+		if (!e) return;
+		let t = () => {
+			let t = Math.max(0, Math.round(window.innerHeight - e.height - e.offsetTop));
+			i((e) => e === t ? e : t);
+		};
+		return t(), e.addEventListener("resize", t, { passive: !0 }), e.addEventListener("scroll", t, { passive: !0 }), () => {
+			e.removeEventListener("resize", t), e.removeEventListener("scroll", t);
+		};
+	}, [n]), r;
+}
+//#endregion
+export { n as useVisualViewportInset };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "haze-ui",
-  "version": "1.29.0",
+  "version": "1.31.0",
   "type": "module",
   "description": "A React UI component library powered by react-use-control and Linaria",
   "main": "./dist/index.js",
@@ -34,6 +34,7 @@
     },
     "./design-tokens/light.json": "./dist/design-tokens/light.json",
     "./design-tokens/dark.json": "./dist/design-tokens/dark.json",
+    "./design-tokens/*/*": "./dist/design-tokens/*/*",
     "./mcp-docs.json": "./dist/mcp-docs.json",
     "./styles.css": "./dist/haze-ui.css",
     "./css/*": "./dist/css/*",
@@ -42,10 +43,12 @@
   },
   "files": [
     "dist",
-    "mcp"
+    "mcp",
+    "cli"
   ],
   "bin": {
-    "haze-ui-mcp": "./mcp/index.mjs"
+    "haze-ui-mcp": "./mcp/index.mjs",
+    "haze-ui-theme": "./cli/theme.mjs"
   },
   "engines": {
     "node": ">=20"
@@ -118,6 +121,8 @@
     "@babel/preset-env": "^8.0.2",
     "@babel/preset-typescript": "^8.0.1",
     "@for-fun/event-emitter": "^1.1.0",
+    "@guidepup/guidepup": "^0.34.0",
+    "@guidepup/playwright": "^0.19.1",
     "@linaria/core": "^8.2.0",
     "@native-router/core": "^1.17.0",
     "@native-router/react": "^1.16.1",
@@ -184,20 +189,26 @@
       "import": "{SortableTagInput}",
       "limit": "30 KB"
     },
+    {
+      "name": "SortableTree — pulls the @dnd-kit trio (from barrel)",
+      "path": "dist/index.js",
+      "import": "{SortableTree}",
+      "limit": "35 KB"
+    },
     {
       "name": "Dashboard profile: Button + Input + Select + Dialog + Toast + Pagination",
       "path": "dist/index.js",
       "import": "{Button, Input, Select, Dialog, Toast, Pagination}",
-      "limit": "17 KB"
+      "limit": "18 KB"
     },
     {
       "name": "CSS aggregate (dist/haze-ui.css, brotli)",
       "path": "dist/haze-ui.css",
-      "limit": "21 KB"
+      "limit": "25.25 KB"
     },
     {
       "path": "dist/haze-ui.css",
-      "limit": "26 KB",
+      "limit": "32.25 KB",
       "gzip": true
     },
     {
@@ -218,6 +229,12 @@
       "limit": "0.3 KB",
       "gzip": true
     },
+    {
+      "name": "CSS family ratchet: sparkline",
+      "path": "dist/css/sparkline.css",
+      "limit": "0.3 KB",
+      "gzip": true
+    },
     {
       "name": "CSS family ratchet: result",
       "path": "dist/css/result.css",
@@ -245,7 +262,7 @@
     {
       "name": "CSS family ratchet: dialog",
       "path": "dist/css/dialog.css",
-      "limit": "0.5 KB",
+      "limit": "0.55 KB",
       "gzip": true
     },
     {
@@ -269,7 +286,7 @@
     {
       "name": "CSS family ratchet: toast",
       "path": "dist/css/toast.css",
-      "limit": "1 KB",
+      "limit": "1.25 KB",
       "gzip": true
     },
     {
@@ -281,7 +298,7 @@
     {
       "name": "CSS family ratchet: tree",
       "path": "dist/css/tree.css",
-      "limit": "1 KB",
+      "limit": "1.25 KB",
       "gzip": true
     },
     {