haze-ui 1.26.0 → 1.27.0

package/dist/utils/menuKeyboard.js

@@ -1,89 +1,102 @@
 "use client";
-import { useCallback as e, useEffect as t, useRef as n } from "react";
+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 r = 500, i = "[role=\"menuitem\"]:not([disabled])";
-function a(e, t = i) {
-	return e ? Array.from(e.querySelectorAll(t)) : [];
+var i = 500, a = "[role=\"menuitem\"]:not([disabled])";
+function o(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 o({ menuRef: i, onClose: o, selector: s }) {
-	let c = n(""), l = n(0);
-	return t(() => () => window.clearTimeout(l.current), []), e((e) => {
-		let t = a(i.current, s);
-		if (t.length === 0) return;
-		let n = t.indexOf(document.activeElement), u = (e) => t[e]?.focus();
-		switch (e.key) {
-			case "ArrowDown":
-				e.preventDefault(), u((n + 1) % t.length);
+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);
+		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 n = e(a.current) === "rtl" ? "ArrowRight" : "ArrowLeft";
+			if (t.key === n) {
+				t.preventDefault(), l();
 				return;
-			case "ArrowUp":
-				e.preventDefault(), u((n - 1 + t.length) % t.length);
+			}
+		}
+		switch (t.key) {
+			case m:
+				t.preventDefault(), p((r + 1) % n.length);
+				return;
+			case h:
+				t.preventDefault(), p((r - 1 + n.length) % n.length);
 				return;
 			case "Home":
-				e.preventDefault(), u(0);
+				t.preventDefault(), p(0);
 				return;
 			case "End":
-				e.preventDefault(), u(t.length - 1);
+				t.preventDefault(), p(n.length - 1);
 				return;
 			case "Escape":
-				e.preventDefault(), o();
+				t.preventDefault(), s();
 				return;
 			case "Tab":
-				e.preventDefault(), o();
+				t.preventDefault(), s();
 				return;
 			default: {
-				if (e.key.length !== 1 || e.ctrlKey || e.metaKey || e.altKey) return;
-				e.preventDefault();
-				let i = (c.current + e.key).toLowerCase();
-				c.current = i, window.clearTimeout(l.current), l.current = window.setTimeout(() => {
-					c.current = "";
-				}, r);
-				let a = n + 1;
-				for (let e = 0; e < t.length; e++) {
-					let n = (a + e) % t.length;
-					if (t[n].textContent.toLowerCase().startsWith(i)) {
-						u(n);
+				if (t.key.length !== 1 || t.ctrlKey || t.metaKey || t.altKey) return;
+				t.preventDefault();
+				let e = (d.current + t.key).toLowerCase();
+				d.current = e, window.clearTimeout(f.current), f.current = window.setTimeout(() => {
+					d.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);
 						return;
 					}
 				}
 			}
 		}
 	}, [
-		i,
-		o,
-		s
+		a,
+		s,
+		c,
+		l,
+		u
 	]);
 }
-function s({ menuRef: e, active: n, selector: r = i }) {
-	t(() => {
-		let t = e.current;
-		if (!n || !t) return;
+function c({ menuRef: e, active: t, selector: r = a }) {
+	n(() => {
+		let n = e.current;
+		if (!t || !n) return;
 		let i = () => {
-			let e = a(t, r);
+			let e = o(n, r);
 			if (e.length === 0) return;
-			let n = e.findIndex((e) => e.tabIndex === 0), i = n >= 0 ? n : 0;
+			let t = e.findIndex((e) => e.tabIndex === 0), i = t >= 0 ? t : 0;
 			e.forEach((e, t) => {
 				e.tabIndex = t === i ? 0 : -1;
 			});
 		};
 		i();
-		let o = new MutationObserver(i);
-		o.observe(t, {
+		let a = new MutationObserver(i);
+		a.observe(n, {
 			childList: !0,
 			subtree: !0
 		});
 		let s = (e) => {
-			a(t, r).forEach((t) => {
+			let t = o(n, r);
+			t.includes(e.target) && t.forEach((t) => {
 				t.tabIndex = t === e.target ? 0 : -1;
 			});
 		};
-		return t.addEventListener("focusin", s), () => {
-			o.disconnect(), t.removeEventListener("focusin", s);
+		return n.addEventListener("focusin", s), () => {
+			a.disconnect(), n.removeEventListener("focusin", s);
 		};
 	}, [
 		e,
-		n,
+		t,
 		r
 	]);
 }
 //#endregion
-export { a as getEnabledMenuItems, o as useMenuKeyboard, s as useRovingTabindex };
+export { o as getEnabledMenuItems, s as useMenuKeyboard, c as useRovingTabindex };

package/dist/utils/refs.js

@@ -0,0 +1,9 @@
+"use client";
+//#region src/lib/utils/refs.ts
+function e(...e) {
+	return (t) => {
+		for (let n of e) n && (typeof n == "function" ? n(t) : n.current = t);
+	};
+}
+//#endregion
+export { e as mergeRefs };

package/dist/utils/sortable-shared.js

@@ -0,0 +1,24 @@
+
+"use client";
+/* empty css                          */
+import { createContext as e, useContext as t } from "react";
+import { sortableKeyboardCoordinates as n } from "@dnd-kit/sortable";
+import { KeyboardSensor as r, PointerSensor as i, useSensor as a, useSensors as o } from "@dnd-kit/core";
+import { CSS as s } from "@dnd-kit/utilities";
+//#region src/lib/utils/sortable-shared.ts
+function c() {
+	return o(a(i, { activationConstraint: { distance: 8 } }), a(r, { coordinateGetter: n }));
+}
+function l(e, t) {
+	return {
+		transform: s.Translate.toString(e),
+		transition: t ?? void 0
+	};
+}
+var u = e(null);
+function d() {
+	return t(u);
+}
+var f = "haze-sortable-shared__sortableHandle";
+//#endregion
+export { u as SortableHandleContext, f as sortableHandle, l as sortableItemStyle, d as useSortableHandle, c as useSortableSensors };

package/dist/utils/sortable.js

@@ -0,0 +1,46 @@
+
+"use client";
+import { classnames as e } from "./classnames.js";
+import { SortableHandleContext as t, sortableItemStyle as n, useSortableSensors as r } from "./sortable-shared.js";
+/* empty css                   */
+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();
+	return /* @__PURE__ */ i(s, {
+		sensors: l,
+		collisionDetection: c,
+		onDragEnd: ({ active: t, over: r }) => {
+			r && t.id !== r.id && n(e.indexOf(t.id), e.indexOf(r.id));
+		},
+		children: i(a, {
+			items: e,
+			strategy: t,
+			children: o
+		})
+	});
+}
+var u = "haze-sortable__sortableNode", d = "haze-sortable__sortableNodeDragging";
+function f({ id: r, className: a, children: s }) {
+	let { attributes: c, listeners: l, setNodeRef: f, transform: p, transition: m, isDragging: h } = o({ id: r });
+	return /* @__PURE__ */ i(t.Provider, {
+		value: {
+			attributes: c,
+			listeners: l
+		},
+		children: i("span", {
+			ref: f,
+			style: n(p, m),
+			className: e([
+				u,
+				h && d,
+				a
+			]),
+			children: s
+		})
+	});
+}
+//#endregion
+export { f as SortableItem, l as SortableRegion };

package/dist/utils/submenu.js

@@ -0,0 +1,104 @@
+"use client";
+import { getDirection as e } from "./direction.js";
+import { useFloating as t } from "./floating.js";
+import { getEnabledMenuItems as n, useMenuKeyboard as r, useRovingTabindex as i } from "./menuKeyboard.js";
+import { createContext as a, useCallback as o, useContext as s, useEffect as c, useId as l, useRef as u } from "react";
+import { useControl as d } from "react-use-control";
+function f({ open: a, onOpenChange: s }) {
+	let [f, p] = d(a, !1), m = u(null), h = u(null), g = l(), _ = u(!1), v = u(0), y = u(0), b = o((e) => {
+		let t = typeof e == "function" ? e(f) : e;
+		p(t), s?.(t);
+	}, [
+		f,
+		p,
+		s
+	]), x = t({
+		open: f,
+		setOpen: b,
+		triggerRef: m,
+		panelRef: h,
+		animated: !0
+	}), S = o(() => {
+		window.clearTimeout(y.current);
+	}, []), C = o(() => {
+		window.clearTimeout(y.current), y.current = window.setTimeout(() => {
+			b(!1);
+		}, 160);
+	}, [b]), w = o(() => {
+		m.current?.disabled || (S(), !f && (window.clearTimeout(v.current), v.current = window.setTimeout(() => {
+			b(!0);
+		}, 120)));
+	}, [
+		f,
+		b,
+		S
+	]);
+	c(() => {
+		let e = (e) => e instanceof Node && !!(m.current?.contains(e) || h.current?.contains(e)), t = (t) => {
+			if (e(t.target)) {
+				f && S();
+				return;
+			}
+			window.clearTimeout(v.current), f && C();
+		};
+		return document.addEventListener("pointerover", t), () => {
+			document.removeEventListener("pointerover", t), f && S();
+		};
+	}, [
+		f,
+		S,
+		C
+	]), c(() => () => {
+		window.clearTimeout(v.current), window.clearTimeout(y.current);
+	}, []);
+	let T = o(() => {
+		n(h.current)[0]?.focus();
+	}, []);
+	c(() => {
+		f && x.shown && _.current && (_.current = !1, T());
+	}, [
+		f,
+		x.shown,
+		T
+	]);
+	let E = o(() => {
+		let e = h.current?.contains(document.activeElement) ?? !1;
+		b(!1), e && m.current?.focus();
+	}, [b]), D = o((t) => {
+		if (m.current?.disabled) return;
+		let n = e(m.current), r = n === "rtl" ? "ArrowLeft" : "ArrowRight", i = n === "rtl" ? "ArrowRight" : "ArrowLeft";
+		t.key === r ? (t.preventDefault(), t.stopPropagation(), f ? T() : (_.current = !0, b(!0))) : f && (t.key === i || t.key === "Escape") && (t.preventDefault(), t.stopPropagation(), E());
+	}, [
+		f,
+		b,
+		T,
+		E
+	]), O = r({
+		menuRef: h,
+		onClose: E,
+		onCloseToStart: E
+	}), k = o((e) => {
+		O(e), e.key !== "Tab" && e.stopPropagation();
+	}, [O]);
+	return i({
+		menuRef: h,
+		active: f
+	}), {
+		open: f,
+		triggerRef: m,
+		contentRef: h,
+		contentId: g,
+		floating: x,
+		onTriggerPointerEnter: w,
+		handleTriggerKeyDown: D,
+		contentKeyDown: k
+	};
+}
+var p = a(void 0), m = p.Provider;
+function h() {
+	let e = s(p);
+	if (!e) throw Error("Submenu components must be used within <MenuSub> or <DropdownMenuSub>");
+	return e;
+}
+//#endregion
+export { m as SubmenuProvider, f as useSubmenu, h as useSubmenuContext };

package/dist/utils/view-transition.js

@@ -0,0 +1,26 @@
+"use client";
+import { usePrefersReducedMotion as e } from "../hooks/usePrefersReducedMotion.js";
+import { useCallback as t } from "react";
+import { flushSync as n } from "react-dom";
+//#region src/lib/utils/view-transition.ts
+function r(r, i) {
+	let a = e();
+	return t((e) => {
+		if (!r || a || typeof document.startViewTransition != "function") {
+			i(e);
+			return;
+		}
+		let t = document.startViewTransition(() => {
+			n(() => {
+				i(e);
+			});
+		});
+		t.ready.catch(() => void 0), t.finished.catch(() => void 0);
+	}, [
+		r,
+		a,
+		i
+	]);
+}
+//#endregion
+export { r as useViewTransitionFlip };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "haze-ui",
-  "version": "1.26.0",
+  "version": "1.27.0",
   "type": "module",
   "description": "A React UI component library powered by react-use-control and Linaria",
   "main": "./dist/index.js",
@@ -22,6 +22,11 @@
       "import": "./dist/form/index.js",
       "default": "./dist/form/index.js"
     },
+    "./headless": {
+      "types": "./dist/types/headless/index.d.ts",
+      "import": "./dist/headless/index.js",
+      "default": "./dist/headless/index.js"
+    },
     "./tokens": {
       "types": "./dist/types/tokens/index.d.ts",
       "import": "./dist/tokens/index.js",
@@ -35,13 +40,22 @@
   "files": [
     "dist"
   ],
+  "engines": {
+    "node": ">=20"
+  },
+  "browserslist": [
+    "chrome >= 119",
+    "edge >= 119",
+    "safari >= 16.4",
+    "firefox >= 128"
+  ],
   "sideEffects": [
     "*.css"
   ],
   "scripts": {
     "start": "vite",
     "build": "BUILD_LIB=true vite build && node scripts/split-css.mjs && node scripts/generate-registry.mjs && tsc -p tsconfig.lib.json && tsc-alias -p tsconfig.lib.json",
-    "build:demo": "BABEL_ENV=development BUILD_DEMO=true vite build && cp dist/index.html dist/404.html && cp llms.txt dist/",
+    "build:demo": "node scripts/write-version.mjs && BABEL_ENV=development BUILD_DEMO=true vite build && cp dist/index.html dist/404.html && cp llms.txt dist/ && cp llms-full.txt dist/",
     "commit": "lint-staged && git-cz -n",
     "coverage": "vitest run --coverage",
     "lint": "eslint --fix src *.mjs",
@@ -78,19 +92,32 @@
   "author": "wmzy",
   "license": "MIT",
   "peerDependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@tanstack/react-table": "^9.2.4",
     "react": "^19.0.0",
-    "react-f0rm": "^1.1.1"
+    "recharts": "^3.10.1"
   },
   "peerDependenciesMeta": {
+    "@dnd-kit/core": {
+      "optional": true
+    },
+    "@dnd-kit/sortable": {
+      "optional": true
+    },
+    "@dnd-kit/utilities": {
+      "optional": true
+    },
     "@tanstack/react-table": {
       "optional": true
     },
-    "react-f0rm": {
+    "recharts": {
       "optional": true
     }
   },
   "dependencies": {
+    "react-f0rm": "^1.3.0",
     "react-use-control": "^1.6.0"
   },
   "devDependencies": {
@@ -98,20 +125,24 @@
     "@babel/core": "^8.0.1",
     "@babel/preset-env": "^8.0.2",
     "@babel/preset-typescript": "^8.0.1",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@for-fun/event-emitter": "^1.1.0",
     "@linaria/core": "^8.2.0",
-    "@native-router/core": "^1.16.1",
-    "@native-router/react": "^1.15.0",
-    "@playwright/test": "^1.62.1",
+    "@native-router/core": "^1.17.0",
+    "@native-router/react": "^1.16.0",
+    "@playwright/test": "^1.63.0",
     "@size-limit/esbuild": "^13.0.3",
     "@size-limit/file": "^13.0.3",
+    "@stackblitz/sdk": "^1.11.1",
     "@tanstack/react-table": "^9.2.4",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.3",
     "@testing-library/user-event": "^14.6.7",
     "@types/culori": "^4.0.1",
     "@types/jest-axe": "^3.5.9",
-    "@types/node": "^26.4.1",
+    "@types/node": "^26.5.0",
     "@types/react": "^19.2.18",
     "@types/react-dom": "^19.2.7",
     "@vitejs/plugin-react": "^6.1.1",
@@ -123,19 +154,19 @@
     "commitizen": "^4.3.2",
     "core-js": "^3.50.0",
     "culori": "^4.0.2",
-    "eslint": "^10.9.1",
+    "eslint": "^10.10.0",
     "eslint-plugin-compat": "^7.0.2",
     "gh-pages": "^6.3.0",
     "husky": "^9.1.7",
     "jest-axe": "^11.0.0",
     "jsdom": "^30.0.1",
-    "lint-staged": "^17.4.1",
-    "lucide-react": "^1.41.0",
+    "lint-staged": "^17.5.0",
+    "lucide-react": "^1.42.0",
     "prettier": "^3.9.6",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
-    "react-f0rm": "^1.1.1",
     "react-icons": "^5.7.0",
+    "recharts": "^3.10.1",
     "semantic-release": "^25.0.9",
     "size-limit": "^13.0.3",
     "terser": "^5.51.2",
@@ -143,7 +174,8 @@
     "tsc-alias": "^1.9.4",
     "typescript": "^6.0.3",
     "vite": "^8.2.2",
-    "vitest": "^5.0.0"
+    "vitest": "^5.0.0",
+    "zod": "^4.5.4"
   },
   "size-limit": [
     {
@@ -156,15 +188,76 @@
       "name": "Dashboard profile: Button + Input + Select + Dialog + Toast + Pagination",
       "path": "dist/index.js",
       "import": "{Button, Input, Select, Dialog, Toast, Pagination}",
-      "limit": "10 KB"
+      "limit": "15 KB"
     },
     {
+      "name": "CSS aggregate (dist/haze-ui.css, brotli)",
       "path": "dist/haze-ui.css",
-      "limit": "136 KB"
+      "limit": "17.5 KB"
     },
     {
       "path": "dist/haze-ui.css",
-      "limit": "19 KB",
+      "limit": "21 KB",
+      "gzip": true
+    },
+    {
+      "name": "CSS family ratchet: button",
+      "path": "dist/css/button.css",
+      "limit": "1 KB",
+      "gzip": true
+    },
+    {
+      "name": "CSS family ratchet: select",
+      "path": "dist/css/select.css",
+      "limit": "2.5 KB",
+      "gzip": true
+    },
+    {
+      "name": "CSS family ratchet: dialog",
+      "path": "dist/css/dialog.css",
+      "limit": "0.5 KB",
+      "gzip": true
+    },
+    {
+      "name": "CSS family ratchet: table",
+      "path": "dist/css/table.css",
+      "limit": "0.5 KB",
+      "gzip": true
+    },
+    {
+      "name": "CSS family ratchet: data-table",
+      "path": "dist/css/data-table.css",
+      "limit": "1.5 KB",
+      "gzip": true
+    },
+    {
+      "name": "CSS family ratchet: form",
+      "path": "dist/css/form.css",
+      "limit": "0.5 KB",
+      "gzip": true
+    },
+    {
+      "name": "CSS family ratchet: toast",
+      "path": "dist/css/toast.css",
+      "limit": "1 KB",
+      "gzip": true
+    },
+    {
+      "name": "CSS family ratchet: chat-message",
+      "path": "dist/css/chat-message.css",
+      "limit": "1 KB",
+      "gzip": true
+    },
+    {
+      "name": "CSS family ratchet: tree",
+      "path": "dist/css/tree.css",
+      "limit": "1 KB",
+      "gzip": true
+    },
+    {
+      "name": "CSS family ratchet: combobox",
+      "path": "dist/css/combobox.css",
+      "limit": "1.5 KB",
       "gzip": true
     }
   ]