haze-ui 1.30.0 → 1.31.0

package/dist/components/Tabs/Tab.js

@@ -1,30 +1,97 @@
 
 "use client";
 import { classnames as e } from "../../utils/classnames.js";
-import { useTabsContext as t } from "./TabsContext.js";
+import { useStrings as t } from "../LocaleProvider/useStrings.js";
+import { useTabsContext as n } from "./TabsContext.js";
 /* empty css              */
-import { jsx as n } from "react/jsx-runtime";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/lib/components/Tabs/Tab.tsx
-var r = "haze-Tab__base", i = "haze-Tab__active";
-function a({ value: a, className: o, children: s }) {
-	let { value: c, setValue: l, classNames: u } = t(), d = c === a;
-	return /* @__PURE__ */ n("button", {
+var o = "haze-Tab__base", s = "haze-Tab__active", c = "haze-Tab__iconSlot", l = "haze-Tab__statusDot", u = {
+	dirty: "haze-Tab__dirty",
+	error: "haze-Tab__error",
+	syncing: "haze-Tab__syncing"
+}, d = "haze-Tab__srOnly", f = "haze-Tab__labelContent", p = "haze-Tab__closeGlyph", m = "haze-Tab__closablePad", h = {
+	dirty: "statusDirty",
+	error: "statusError",
+	syncing: "statusSyncing"
+};
+function g({ status: t }) {
+	return /* @__PURE__ */ i("span", {
+		"data-slot": "tab-status-dot",
+		"aria-hidden": "true",
+		className: e([l, u[t]])
+	});
+}
+function _({ value: l, icon: u, status: _, statusLabel: v, closable: y = !1, closeLabel: b, onClose: x, className: S, children: C }) {
+	let { value: w, setValue: T, classNames: E } = n(), D = t("tabs"), O = w === l, k = (e) => {
+		e.stopPropagation(), x?.(e);
+	}, A = /* @__PURE__ */ a(r, { children: [
+		u !== void 0 && /* @__PURE__ */ i("span", {
+			"data-slot": "icon",
+			"aria-hidden": "true",
+			className: e(c),
+			children: u
+		}),
+		C,
+		_ !== void 0 && /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i(g, { status: _ }), /* @__PURE__ */ i("span", {
+			className: e(d),
+			children: v ?? D[h[_]]
+		})] })
+	] });
+	return y ? /* @__PURE__ */ a("div", {
+		"data-slot": "tab",
+		role: "tab",
+		"aria-selected": O,
+		"aria-controls": `tabpanel-${l}`,
+		tabIndex: O ? 0 : -1,
+		"data-haze-tab-value": l,
+		onKeyDown: (e) => {
+			if (e.key === "Enter" || e.key === " ") {
+				e.preventDefault(), T(l);
+				return;
+			}
+			e.key === "Delete" && (e.preventDefault(), x?.(e));
+		},
+		onClick: () => T(l),
+		className: e([
+			o,
+			O && s,
+			m,
+			S,
+			E?.tab
+		]),
+		children: [/* @__PURE__ */ i("span", {
+			"data-slot": "tab-label",
+			className: e(f),
+			children: A
+		}), /* @__PURE__ */ i("span", {
+			role: "button",
+			"data-slot": "tab-close",
+			"aria-label": b ?? D.close,
+			onClick: k,
+			className: e(p),
+			children: /* @__PURE__ */ i("span", {
+				"aria-hidden": "true",
+				children: "×"
+			})
+		})]
+	}) : /* @__PURE__ */ i("button", {
 		type: "button",
 		"data-slot": "tab",
 		role: "tab",
-		"aria-selected": d,
-		"aria-controls": `tabpanel-${a}`,
-		tabIndex: d ? 0 : -1,
-		"data-haze-tab-value": a,
-		onClick: () => l(a),
+		"aria-selected": O,
+		"aria-controls": `tabpanel-${l}`,
+		tabIndex: O ? 0 : -1,
+		"data-haze-tab-value": l,
+		onClick: () => T(l),
 		className: e([
-			r,
-			d && i,
 			o,
-			u?.tab
+			O && s,
+			S,
+			E?.tab
 		]),
-		children: s
+		children: A
 	});
 }
 //#endregion
-export { a as default };
+export { g as TabStatusDot, _ as default };

package/dist/components/Tabs/TabList.js

@@ -2,47 +2,103 @@
 "use client";
 import { classnames as e } from "../../utils/classnames.js";
 import { getDirection as t } from "../../utils/direction.js";
-import { useTabsContext as n } from "./TabsContext.js";
+import { useStrings as n } from "../LocaleProvider/useStrings.js";
+import { useTabsContext as r } from "./TabsContext.js";
+import i from "../Menu/Menu.js";
+import { TabStatusDot as a } from "./Tab.js";
+import { collectTabMetas as o } from "./tab-metas.js";
 /* empty css                  */
-import { useRef as r } from "react";
-import { jsx as i } from "react/jsx-runtime";
+import { useCallback as s, useEffect as c, useMemo as l, useRef as u, useState as d } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { useControl as m } from "react-use-control";
 //#region src/lib/components/Tabs/TabList.tsx
-var a = "haze-TabList__base", o = "[role=\"tab\"]:not([disabled])";
-function s({ className: s, children: c }) {
-	let { setValue: l, classNames: u } = n(), d = r(null);
-	return /* @__PURE__ */ i("div", {
-		ref: d,
-		"data-slot": "tab-list",
-		role: "tablist",
-		onKeyDown: (e) => {
-			let n = Array.from(d.current?.querySelectorAll(o) ?? []);
-			if (n.length === 0) return;
-			let r = n.indexOf(document.activeElement), i = (e) => {
-				let t = n[e];
-				t && (t.focus(), l(t.dataset.hazeTabValue ?? ""));
-			}, a = t(d.current) === "rtl" ? "ArrowLeft" : "ArrowRight", s = a === "ArrowLeft" ? "ArrowRight" : "ArrowLeft";
-			switch (e.key) {
-				case a:
-					e.preventDefault(), i(r < 0 ? 0 : (r + 1) % n.length);
-					return;
-				case s:
-					e.preventDefault(), i(r < 0 ? n.length - 1 : (r - 1 + n.length) % n.length);
-					return;
-				case "Home":
-					e.preventDefault(), i(0);
-					return;
-				case "End":
-					e.preventDefault(), i(n.length - 1);
-					return;
-			}
+var h = "haze-TabList__base", g = "haze-TabList__grow", _ = "haze-TabList__bar", v = "haze-TabList__overflowArea", y = "haze-TabList__overflowButton", b = "haze-TabList__menuTabLabel", x = "[role=\"tab\"]:not([disabled])";
+function S({ className: S, listRef: C, overflowLabel: w, children: T, tabMetas: E }) {
+	let { value: D, setValue: O, classNames: k } = r(), A = n("tabs"), j = u(null), M = C ?? j, [N, P] = d(!1), [, F, I] = m(void 0, !1), L = l(() => E ?? o(T), [E, T]), R = l(() => L.length === 0 ? [] : [{
+		type: "group",
+		key: `tab-list-overflow-${D}`,
+		value: D,
+		onValueChange: (e) => {
+			O(e), F(!1);
 		},
-		className: e([
-			a,
-			s,
-			u?.list
-		]),
-		children: c
+		children: L.map((t) => ({
+			type: "radio",
+			key: t.value,
+			value: t.value,
+			icon: t.icon,
+			label: t.status ? /* @__PURE__ */ p("span", {
+				className: e(b),
+				children: [/* @__PURE__ */ f(a, { status: t.status }), t.label]
+			}) : t.label
+		}))
+	}], [
+		L,
+		D,
+		O,
+		F
+	]), z = s(() => {
+		let e = M.current;
+		e && P(e.scrollWidth > e.clientWidth + 1);
+	}, []);
+	return c(() => {
+		let e = M.current;
+		if (!e || (z(), typeof ResizeObserver > "u")) return;
+		let t = new ResizeObserver(z);
+		return t.observe(e), () => t.disconnect();
+	}, [z, T]), /* @__PURE__ */ p("div", {
+		"data-slot": "tab-bar",
+		className: e(_),
+		children: [/* @__PURE__ */ f("div", {
+			ref: M,
+			"data-slot": "tab-list",
+			role: "tablist",
+			onKeyDown: (e) => {
+				let n = Array.from(M.current?.querySelectorAll(x) ?? []);
+				if (n.length === 0) return;
+				let r = document.activeElement, i = n.findIndex((e) => e.contains(r)), a = (e) => {
+					let t = n[e];
+					t && (t.focus(), O(t.dataset.hazeTabValue ?? ""));
+				}, o = t(M.current) === "rtl" ? "ArrowLeft" : "ArrowRight", s = o === "ArrowLeft" ? "ArrowRight" : "ArrowLeft";
+				switch (e.key) {
+					case o:
+						e.preventDefault(), a(i < 0 ? 0 : (i + 1) % n.length);
+						return;
+					case s:
+						e.preventDefault(), a(i < 0 ? n.length - 1 : (i - 1 + n.length) % n.length);
+						return;
+					case "Home":
+						e.preventDefault(), a(0);
+						return;
+					case "End":
+						e.preventDefault(), a(n.length - 1);
+						return;
+				}
+			},
+			className: e([
+				h,
+				g,
+				S,
+				k?.list
+			]),
+			children: T
+		}), N && L.length > 0 && /* @__PURE__ */ f("div", {
+			"data-slot": "tab-overflow",
+			className: e(v),
+			children: /* @__PURE__ */ f(i, {
+				open: I,
+				trigger: /* @__PURE__ */ f("button", {
+					type: "button",
+					"aria-label": w ?? A.moreTabs,
+					className: e(y),
+					children: /* @__PURE__ */ f("span", {
+						"aria-hidden": "true",
+						children: "⋯"
+					})
+				}),
+				items: R
+			})
+		})]
 	});
 }
 //#endregion
-export { s as default };
+export { S as default };

package/dist/components/Tabs/edge-scroll.js

@@ -0,0 +1,6 @@
+"use client";
+function e(e, t) {
+	return t >= e.right - 48 ? 10 : t <= e.left + 48 ? -10 : 0;
+}
+//#endregion
+export { e as edgeScrollDelta };

package/dist/components/Tabs/index.js

@@ -1,6 +1,7 @@
 "use client";
 import e from "./Tabs.js";
-import t from "./TabList.js";
-import n from "./Tab.js";
+import t from "./Tab.js";
+import n from "./TabList.js";
 import r from "./TabPanel.js";
-export { n as Tab, t as TabList, r as TabPanel, e as Tabs };
+import i from "./SortableTabList.js";
+export { i as SortableTabList, t as Tab, n as TabList, r as TabPanel, e as Tabs };

package/dist/components/Tabs/tab-metas.js

@@ -0,0 +1,24 @@
+"use client";
+import e from "./Tab.js";
+import { Children as t, Fragment as n, isValidElement as r } from "react";
+//#region src/lib/components/Tabs/tab-metas.ts
+function i(i) {
+	let a = [], o = (i) => {
+		t.forEach(i, (t) => {
+			if (r(t)) {
+				if (t.type === e) {
+					let { value: e, icon: n, status: r, children: i } = t.props;
+					a.push({
+						value: e,
+						icon: n,
+						status: r,
+						label: i
+					});
+				} else t.type === n && o(t.props.children);
+			}
+		});
+	};
+	return o(i), a;
+}
+//#endregion
+export { i as collectTabMetas };

package/dist/components/TagInput/SortableTagInputCore.js

@@ -1,24 +1,24 @@
 "use client";
 import { classnames as e } from "../../utils/classnames.js";
 import { sortableItemStyle as t } from "../../utils/sortable-shared.js";
-import { removeBtn as n, tag as r, tagHandle as i } from "./tag-input-styles.js";
-import a from "./TagInputCore.js";
-import { SortableRegion as o } from "../../utils/sortable.js";
+import { SortableRegion as n } from "../../utils/sortable.js";
+import { removeBtn as r, tag as i, tagHandle as a } from "./tag-input-styles.js";
+import o from "./TagInputCore.js";
 import { jsx as s, jsxs as c } from "react/jsx-runtime";
 import { rectSortingStrategy as l, useSortable as u } from "@dnd-kit/sortable";
 //#region src/lib/components/TagInput/SortableTagInputCore.tsx
-function d({ id: a, label: o, removeLabel: l, onRemove: d }) {
-	let { attributes: f, listeners: p, setNodeRef: m, transform: h, transition: g, isDragging: _ } = u({ id: a });
+function d({ id: n, label: o, removeLabel: l, onRemove: d }) {
+	let { attributes: f, listeners: p, setNodeRef: m, transform: h, transition: g, isDragging: _ } = u({ id: n });
 	return /* @__PURE__ */ c("li", {
 		ref: m,
 		"data-slot": "item",
 		style: t(h, g),
-		className: e([r, _ && "haze-tag-input-styles__tagDragging"]),
+		className: e([i, _ && "haze-tag-input-styles__tagDragging"]),
 		children: [/* @__PURE__ */ s("span", {
 			"data-slot": "handle",
 			...f,
 			...p,
-			className: e([i]),
+			className: e([a]),
 			children: o
 		}), /* @__PURE__ */ s("button", {
 			"data-slot": "remove-button",
@@ -28,14 +28,14 @@ function d({ id: a, label: o, removeLabel: l, onRemove: d }) {
 				e.key === "Backspace" && (e.preventDefault(), d());
 			},
 			"aria-label": l,
-			className: e([n]),
+			className: e([r]),
 			children: "x"
 		})]
 	});
 }
 function f(e) {
 	let { disabled: t } = e;
-	return /* @__PURE__ */ s(a, {
+	return /* @__PURE__ */ s(o, {
 		...e,
 		renderTag: t ? void 0 : (e) => /* @__PURE__ */ s(d, {
 			id: e.index,
@@ -43,10 +43,10 @@ function f(e) {
 			removeLabel: e.removeLabel,
 			onRemove: e.onRemove
 		}, e.index),
-		wrapTagList: t ? void 0 : (e, { count: t, onMove: n }) => /* @__PURE__ */ s(o, {
+		wrapTagList: t ? void 0 : (e, { count: t, onMove: r }) => /* @__PURE__ */ s(n, {
 			ids: Array.from({ length: t }, (e, t) => t),
 			strategy: l,
-			onMove: n,
+			onMove: r,
 			children: e
 		})
 	});

package/dist/components/Toast/ToastContainer.js

@@ -6,7 +6,7 @@ import { useStrings as n } from "../LocaleProvider/useStrings.js";
 import { Presence as r } from "../../utils/presence.js";
 import i from "./Toast.js";
 import { ToastProvider as a, applyToastPatch as o, deferredCopyKey as s } from "./ToastContext.js";
-import { nextToastId as c, subscribeToastChannel as l } from "./toast2.js";
+import { nextToastId as c, subscribeToastChannel as l } from "./toast-channel.js";
 /* empty css                         */
 import { useCallback as u, useEffect as d, useRef as f, useState as p } from "react";
 import { jsx as m, jsxs as h } from "react/jsx-runtime";

package/dist/components/Toast/index.js

@@ -1,6 +1,6 @@
 "use client";
 import e from "./Toast.js";
-import { toast as t } from "./toast2.js";
+import { toast as t } from "./toast-channel.js";
 import n from "./ToastContainer.js";
 import r from "./useToast.js";
 export { e as Toast, n as ToastContainer, t as toast, r as useToast };

package/dist/components/Toast/{toast2.js → toast-channel.js}

@@ -1,6 +1,6 @@
 "use client";
 import { applyToastPatch as e, deferredToastCopy as t } from "./ToastContext.js";
-//#region src/lib/components/Toast/toast.ts
+//#region src/lib/components/Toast/toast-channel.ts
 var n = 100, r = [], i = /* @__PURE__ */ new Set(), a = 0;
 function o() {
 	return a += 1, a;

package/dist/components/Toast/useToast.js

@@ -1,7 +1,7 @@
 "use client";
 import { useConfigDefaults as e } from "../ConfigProvider/useConfigDefaults.js";
 import { useToastContext as t } from "./ToastContext.js";
-import { driveToastPromise as n } from "./toast2.js";
+import { driveToastPromise as n } from "./toast-channel.js";
 import { useMemo as r } from "react";
 //#region src/lib/components/Toast/useToast.ts
 function i() {

package/dist/components/Tree/SortableTree.js

@@ -1,15 +1,15 @@
 "use client";
 import { classnames as e } from "../../utils/classnames.js";
-import { filterTreeByQuery as t, findNodeByKey as n, flattenVisibleTree as r } from "./utils.js";
-import i from "./Tree.js";
-import { SortableHandleContext as a, useSortableHandle as o } from "../../utils/sortable-handle.js";
-import { sortableItemStyle as s, useSortableSensors as c } from "../../utils/sortable-shared.js";
+import { SortableHandleContext as t, useSortableHandle as n } from "../../utils/sortable-handle.js";
+import { sortableItemStyle as r, useSortableSensors as i } from "../../utils/sortable-shared.js";
+import { filterTreeByQuery as a, findNodeByKey as o, flattenVisibleTree as s } from "./utils.js";
+import c from "./Tree.js";
 import { resolveTreeMove as l, subtreeKeys as u } from "./sortable-tree-utils.js";
 import { grip as d, row as f } from "./sortable-tree-styles.js";
 import { useCallback as p, useMemo as m, useRef as h, useState as g } from "react";
 import { Fragment as _, jsx as v, jsxs as y } from "react/jsx-runtime";
-import { DndContext as b, closestCenter as x } from "@dnd-kit/core";
-import { SortableContext as S, useSortable as C, verticalListSortingStrategy as w } from "@dnd-kit/sortable";
+import { SortableContext as b, useSortable as x, verticalListSortingStrategy as S } from "@dnd-kit/sortable";
+import { DndContext as C, closestCenter as w } from "@dnd-kit/core";
 //#region src/lib/components/Tree/SortableTree.tsx
 var T = () => /* @__PURE__ */ y("svg", {
 	viewBox: "0 0 10 16",
@@ -48,27 +48,27 @@ var T = () => /* @__PURE__ */ y("svg", {
 	]
 });
 function E() {
-	let t = o();
+	let t = n();
 	if (!t) return null;
-	let n = t.listeners?.onPointerDown;
+	let r = t.listeners?.onPointerDown;
 	return /* @__PURE__ */ v("span", {
 		"aria-hidden": "true",
 		"data-slot": "drag-handle",
-		onPointerDown: n,
+		onPointerDown: r,
 		className: e([d]),
 		children: /* @__PURE__ */ v(T, {})
 	});
 }
-function D({ node: t, treeDisabled: n, inDraggedSubtree: r, handleMode: i, children: o }) {
-	let { attributes: c, listeners: l, setNodeRef: u, transform: d, transition: p, isDragging: m } = C({
-		id: t.key,
-		disabled: n || !!t.disabled
+function D({ node: n, treeDisabled: i, inDraggedSubtree: a, handleMode: o, children: s }) {
+	let { attributes: c, listeners: l, setNodeRef: u, transform: d, transition: p, isDragging: m } = x({
+		id: n.key,
+		disabled: i || !!n.disabled
 	});
 	function h(e) {
 		let t = l?.onKeyDown;
 		t?.(e), e.defaultPrevented && e.stopPropagation();
 	}
-	return /* @__PURE__ */ v(a.Provider, {
+	return /* @__PURE__ */ v(t.Provider, {
 		value: {
 			attributes: c,
 			listeners: l
@@ -77,31 +77,31 @@ function D({ node: t, treeDisabled: n, inDraggedSubtree: r, handleMode: i, child
 			ref: u,
 			"data-slot": "sortable-row",
 			"data-sortable-row": "",
-			style: s(d, p),
-			...i ? void 0 : l,
+			style: r(d, p),
+			...o ? void 0 : l,
 			onKeyDown: h,
 			className: e([
 				f,
-				!i && "haze-sortable-tree-styles__rowDraggable",
+				!o && "haze-sortable-tree-styles__rowDraggable",
 				m && "haze-sortable-tree-styles__rowDragging",
-				r && "haze-sortable-tree-styles__rowInSubtree"
+				a && "haze-sortable-tree-styles__rowInSubtree"
 			]),
-			children: o
+			children: s
 		})
 	});
 }
-function O({ treeData: e, disabled: a = !1, dragHandle: o = !1, titleRender: s, searchValue: d, expandedKeys: f, onExpand: C, onMove: T, className: O, ...k }) {
-	let A = c(), [j, M] = g(null), N = h(/* @__PURE__ */ new Set()), [P, F] = g([]), I = p((e, t) => {
-		F(e), C?.(e, t);
-	}, [C]), L = m(() => t(e, d), [e, d]), R = Array.isArray(f) ? f : P, z = m(() => !L || L.ancestorKeys.length === 0 ? R : Array.from(/* @__PURE__ */ new Set([...R, ...L.ancestorKeys])), [R, L]), B = L ? L.tree : e, V = m(() => r(B, z, !1).map((e) => e.key), [B, z]), H = p((e) => {
+function O({ treeData: e, disabled: t = !1, dragHandle: n = !1, titleRender: r, searchValue: d, expandedKeys: f, onExpand: x, onMove: T, className: O, ...k }) {
+	let A = i(), [j, M] = g(null), N = h(/* @__PURE__ */ new Set()), [P, F] = g([]), I = p((e, t) => {
+		F(e), x?.(e, t);
+	}, [x]), L = m(() => a(e, d), [e, d]), R = Array.isArray(f) ? f : P, z = m(() => !L || L.ancestorKeys.length === 0 ? R : Array.from(/* @__PURE__ */ new Set([...R, ...L.ancestorKeys])), [R, L]), B = L ? L.tree : e, V = m(() => s(B, z, !1).map((e) => e.key), [B, z]), H = p((e) => {
 		let t = j === null ? e.droppableContainers : e.droppableContainers.filter((e) => String(e.id) === j || !N.current.has(String(e.id)));
-		return x({
+		return w({
 			...e,
 			droppableContainers: t
 		});
 	}, [j]), U = p((t) => {
-		let r = String(t.active.id), i = n(e, r);
-		N.current = i ? u(i) : /* @__PURE__ */ new Set(), M(r);
+		let n = String(t.active.id), r = o(e, n);
+		N.current = r ? u(r) : /* @__PURE__ */ new Set(), M(n);
 	}, [e]), W = p(() => {
 		N.current = /* @__PURE__ */ new Set(), M(null);
 	}, []), G = p((t) => {
@@ -112,31 +112,31 @@ function O({ treeData: e, disabled: a = !1, dragHandle: o = !1, titleRender: s,
 		W,
 		T,
 		e
-	]), K = p((e, t) => /* @__PURE__ */ v(D, {
-		node: t,
-		treeDisabled: a,
-		handleMode: o,
-		inDraggedSubtree: j !== null && j !== t.key && N.current.has(t.key),
+	]), K = p((e, r) => /* @__PURE__ */ v(D, {
+		node: r,
+		treeDisabled: t,
+		handleMode: n,
+		inDraggedSubtree: j !== null && j !== r.key && N.current.has(r.key),
 		children: e
 	}), [
 		j,
-		a,
-		o
+		t,
+		n
 	]);
-	return /* @__PURE__ */ v(b, {
+	return /* @__PURE__ */ v(C, {
 		sensors: A,
 		collisionDetection: H,
 		onDragStart: U,
 		onDragEnd: G,
 		onDragCancel: W,
-		children: /* @__PURE__ */ v(S, {
+		children: /* @__PURE__ */ v(b, {
 			items: V,
-			strategy: w,
-			children: /* @__PURE__ */ v(i, {
+			strategy: S,
+			children: /* @__PURE__ */ v(c, {
 				treeData: e,
-				disabled: a,
+				disabled: t,
 				searchValue: d,
-				titleRender: o || s ? (e) => /* @__PURE__ */ y(_, { children: [o && /* @__PURE__ */ v(E, {}), s ? s(e) : e.title] }) : void 0,
+				titleRender: n || r ? (e) => /* @__PURE__ */ y(_, { children: [n && /* @__PURE__ */ v(E, {}), r ? r(e) : e.title] }) : void 0,
 				expandedKeys: f,
 				onExpand: I,
 				rowWrap: K,