haze-ui 1.30.0 → 1.32.0

package/dist/components/TabBar/TabBar.js

@@ -0,0 +1,60 @@
+
+"use client";
+import { classnames as e } from "../../utils/classnames.js";
+import t from "../Badge/Badge.js";
+/* empty css                 */
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/lib/components/TabBar/TabBar.tsx
+var i = "haze-TabBar__bar";
+function a({ children: t, className: r, ...a }) {
+	return /* @__PURE__ */ n("nav", {
+		"data-slot": "tab-bar",
+		...a,
+		className: e([i, r]),
+		children: t
+	});
+}
+var o = "haze-TabBar__item", s = "haze-TabBar__itemActive", c = "haze-TabBar__indicator", l = "haze-TabBar__itemIcon", u = "haze-TabBar__itemLabel", d = "haze-TabBar__itemBadge";
+function f({ icon: i, label: a, badge: f, active: p = !1, onSelect: m, onReselect: h, className: g, onClick: _, ...v }) {
+	return /* @__PURE__ */ r("button", {
+		type: "button",
+		"data-slot": "tab-bar-item",
+		"aria-current": p ? "true" : void 0,
+		onClick: (e) => {
+			_?.(e), p ? h?.() : m?.();
+		},
+		...v,
+		className: e([
+			o,
+			p && s,
+			g
+		]),
+		children: [
+			/* @__PURE__ */ r("span", {
+				"data-slot": "tab-bar-item-icon",
+				"aria-hidden": "true",
+				className: e(l),
+				children: [i, f != null && /* @__PURE__ */ n("span", {
+					"data-slot": "tab-bar-item-badge",
+					className: e(d),
+					children: /* @__PURE__ */ n(t, {
+						size: "sm",
+						children: f
+					})
+				})]
+			}),
+			/* @__PURE__ */ n("span", {
+				"data-slot": "tab-bar-item-label",
+				className: e(u),
+				children: a
+			}),
+			p && /* @__PURE__ */ n("span", {
+				"data-slot": "tab-bar-item-indicator",
+				"aria-hidden": "true",
+				className: e(c)
+			})
+		]
+	});
+}
+//#endregion
+export { f as TabBarItem, a as default };

package/dist/components/TabBar/index.js

@@ -0,0 +1,3 @@
+"use client";
+import e, { TabBarItem as t } from "./TabBar.js";
+export { e as TabBar, t as TabBarItem };

package/dist/components/Tabs/SortableTabList.js

@@ -0,0 +1,116 @@
+
+"use client";
+import { classnames as e } from "../../utils/classnames.js";
+import { useTabsContext as t } from "./TabsContext.js";
+import { collectTabMetas as n } from "./tab-metas.js";
+import r from "./TabList.js";
+import { sortableItemStyle as i } from "../../utils/sortable-shared.js";
+import { SortableRegion as a } from "../../utils/sortable.js";
+import { edgeScrollDelta as o } from "./edge-scroll.js";
+/* empty css                          */
+import { Children as s, createContext as c, isValidElement as l, useCallback as u, useContext as d, useEffect as f, useMemo as p, useRef as m, useState as h } from "react";
+import { jsx as g } from "react/jsx-runtime";
+import { arrayMove as _, horizontalListSortingStrategy as v, useSortable as y } from "@dnd-kit/sortable";
+//#region src/lib/components/Tabs/SortableTabList.tsx
+var b = "haze-SortableTabList__sortableTab", x = "haze-SortableTabList__sortableTabActive", S = "haze-SortableTabList__sortableTabDragging", C = c(null);
+function w(e, t, n) {
+	if (n.offsetParent !== t) return null;
+	let r = 0;
+	for (let e of Array.from(t.children)) {
+		let t = e;
+		r = Math.max(r, t.offsetLeft + t.offsetWidth);
+	}
+	if (r <= 0) return null;
+	let i = n.offsetLeft, a = -i, o = r - n.offsetWidth - i;
+	return {
+		x: Math.max(a, Math.min(e.x ?? 0, o)),
+		y: 0,
+		scaleX: 1,
+		scaleY: 1
+	};
+}
+function T({ id: n, children: r }) {
+	let { value: a, setValue: o } = t(), { listeners: s, setNodeRef: c, transform: h, transition: _, isDragging: v } = y({ id: n }), T = m(null), E = d(C), D = m(null), O = u((e) => {
+		D.current = e, c(e);
+	}, [c]), k = l(r) ? r.props.value : void 0, A = k !== void 0 && a === k, j = p(() => {
+		let e = E?.current, t = D.current;
+		return !h || !e || !t ? h : w(h, e, t) ?? h;
+	}, [h, E]);
+	f(() => {
+		if (v) {
+			T.current === null && (T.current = a);
+			return;
+		}
+		let e = T.current;
+		e !== null && (T.current = null, e !== a && o(e));
+	}, [
+		v,
+		a,
+		o
+	]);
+	function M(e) {
+		let t = s?.onKeyDown;
+		t?.(e), e.defaultPrevented && e.stopPropagation();
+	}
+	let N = s?.onPointerDown;
+	return /* @__PURE__ */ g("span", {
+		ref: O,
+		"data-slot": "sortable-tab",
+		style: i(j, _),
+		onPointerDown: N,
+		onKeyDownCapture: M,
+		className: e([
+			b,
+			A && x,
+			v && S
+		]),
+		children: r
+	});
+}
+function E({ className: e, onReorder: t, children: i }) {
+	let c = s.toArray(i), u = c.map((e, t) => {
+		if (l(e)) {
+			let t = e.props.value;
+			if (t !== void 0) return t;
+		}
+		return t;
+	}), d = p(() => n(c), [c]), y = m(null), b = m(0), [x, S] = h(!1);
+	return f(() => {
+		if (!x) return;
+		let e = 0, t = () => {
+			let n = y.current;
+			if (n) {
+				let e = n.getBoundingClientRect();
+				n.scrollLeft += o(e, b.current);
+			}
+			e = requestAnimationFrame(t);
+		};
+		e = requestAnimationFrame(t);
+		let n = (e) => {
+			b.current = e.clientX;
+		};
+		return window.addEventListener("pointermove", n), () => {
+			cancelAnimationFrame(e), window.removeEventListener("pointermove", n);
+		};
+	}, [x]), /* @__PURE__ */ g("div", { children: g(C.Provider, {
+		value: y,
+		children: /* @__PURE__ */ g(a, {
+			ids: u,
+			strategy: v,
+			onMove: (e, n) => t?.(_(u, e, n).map((e) => u.indexOf(e))),
+			onDragStart: (e) => S(e.activatorEvent.type === "pointerdown"),
+			onDragEnd: () => S(!1),
+			children: /* @__PURE__ */ g(r, {
+				className: e,
+				listRef: y,
+				tabMetas: d,
+				children: c.map((e, t) => /* @__PURE__ */ g(T, {
+					id: u[t] ?? t,
+					children: e
+				}, u[t] ?? t))
+			})
+		})
+	}) });
+}
+//#endregion
+export { E as default };

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/TagGroup/SortableTagGroup.js

@@ -1,27 +1,39 @@
 "use client";
 import { classnames as e } from "../../utils/classnames.js";
-import { SortableItem as t, SortableRegion as n } from "../../utils/sortable.js";
-import { group as r } from "./tag-group-styles.js";
-import { Children as i } from "react";
-import { jsx as a } from "react/jsx-runtime";
-import { arrayMove as o, rectSortingStrategy as s } from "@dnd-kit/sortable";
+import { useConfigDefaults as t } from "../ConfigProvider/useConfigDefaults.js";
+import { SortableItem as n, SortableRegion as r } from "../../utils/sortable.js";
+import { group as i } from "./tag-group-styles.js";
+import { TagGroupItemClassNamesContext as a } from "./TagGroup.js";
+import { Children as o } from "react";
+import { jsx as s } from "react/jsx-runtime";
+import { arrayMove as c, rectSortingStrategy as l } from "@dnd-kit/sortable";
 //#region src/lib/components/TagGroup/SortableTagGroup.tsx
-function c({ children: c, className: l, onReorder: u }) {
-	let d = i.toArray(c), f = d.map((e, t) => t);
-	return /* @__PURE__ */ a("div", {
-		"data-slot": "tag-group",
-		role: "group",
-		className: e([r, l]),
-		children: /* @__PURE__ */ a(n, {
-			ids: f,
-			strategy: s,
-			onMove: (e, t) => u?.(o(f, e, t)),
-			children: d.map((e, n) => /* @__PURE__ */ a(t, {
-				id: n,
-				children: e
-			}, n))
+function u({ children: u, className: d, classNames: f, onReorder: p }) {
+	let m = t("TagGroup"), h = m.classNames ? {
+		...m.classNames,
+		...f
+	} : f, g = o.toArray(u), _ = g.map((e, t) => t);
+	return /* @__PURE__ */ s(a.Provider, {
+		value: h,
+		children: /* @__PURE__ */ s("div", {
+			"data-slot": "tag-group",
+			role: "group",
+			className: e([
+				i,
+				d,
+				h?.root
+			]),
+			children: /* @__PURE__ */ s(r, {
+				ids: _,
+				strategy: l,
+				onMove: (e, t) => p?.(c(_, e, t)),
+				children: g.map((e, t) => /* @__PURE__ */ s(n, {
+					id: t,
+					children: e
+				}, t))
+			})
 		})
 	});
 }
 //#endregion
-export { c as default };
+export { u as default };

package/dist/components/TagGroup/TagGroup.js

@@ -1,15 +1,29 @@
 "use client";
 import { classnames as e } from "../../utils/classnames.js";
-import { group as t } from "./tag-group-styles.js";
-import { jsx as n } from "react/jsx-runtime";
+import { useConfigDefaults as t } from "../ConfigProvider/useConfigDefaults.js";
+import { group as n } from "./tag-group-styles.js";
+import { createContext as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
 //#region src/lib/components/TagGroup/TagGroup.tsx
-function r({ children: r, className: i }) {
-	return /* @__PURE__ */ n("div", {
-		"data-slot": "tag-group",
-		role: "group",
-		className: e([t, i]),
-		children: r
+var a = r(void 0);
+function o({ children: r, className: o, classNames: s }) {
+	let c = t("TagGroup"), l = c.classNames ? {
+		...c.classNames,
+		...s
+	} : s;
+	return /* @__PURE__ */ i(a.Provider, {
+		value: l,
+		children: /* @__PURE__ */ i("div", {
+			"data-slot": "tag-group",
+			role: "group",
+			className: e([
+				n,
+				o,
+				l?.root
+			]),
+			children: r
+		})
 	});
 }
 //#endregion
-export { r as default };
+export { a as TagGroupItemClassNamesContext, o as default };

package/dist/components/TagGroup/TagGroupItem.js

@@ -3,30 +3,36 @@
 import { classnames as e } from "../../utils/classnames.js";
 import { useStrings as t } from "../LocaleProvider/useStrings.js";
 import { sortableHandle as n, useSortableHandle as r } from "../../utils/sortable-handle.js";
+import { TagGroupItemClassNamesContext as i } from "./TagGroup.js";
 /* empty css                       */
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { useContext as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region src/lib/components/TagGroup/TagGroupItem.tsx
-var o = "haze-TagGroupItem__tag", s = "haze-TagGroupItem__closeBtn";
-function c({ children: c, onClose: l, className: u }) {
-	let d = t("tagGroup"), f = r(), p = f ? /* @__PURE__ */ i("span", {
+var c = "haze-TagGroupItem__tag", l = "haze-TagGroupItem__closeBtn";
+function u({ children: u, onClose: d, className: f }) {
+	let p = t("tagGroup"), m = a(i), h = r(), g = h ? /* @__PURE__ */ o("span", {
 		"data-slot": "drag-handle",
-		...f.attributes,
-		...f.listeners,
+		...h.attributes,
+		...h.listeners,
 		className: e([n]),
-		children: c
-	}) : c;
-	return /* @__PURE__ */ a("span", {
+		children: u
+	}) : u;
+	return /* @__PURE__ */ s("span", {
 		"data-slot": "tag-group-item",
-		className: e([o, u]),
-		children: [p, l && /* @__PURE__ */ i("button", {
+		className: e([
+			c,
+			m?.item,
+			f
+		]),
+		children: [g, d && /* @__PURE__ */ o("button", {
 			"data-slot": "remove-button",
 			type: "button",
-			onClick: l,
-			"aria-label": d.remove,
-			className: e([s]),
+			onClick: d,
+			"aria-label": p.remove,
+			className: e([l, m?.removeButton]),
 			children: "x"
 		})]
 	});
 }
 //#endregion
-export { c as default };
+export { u as default };