haze-ui 1.24.1 → 1.25.0

package/dist/components/Toast/ToastContainer.js

@@ -3,45 +3,61 @@ import { classnames as e } from "../../utils/classnames.js";
 import { Presence as t } from "../../utils/presence.js";
 import n from "./Toast.js";
 import { ToastProvider as r } from "./ToastContext.js";
+import { nextToastId as i, subscribeToastChannel as a } from "./toast2.js";
 /* empty css                         */
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { useCallback as o, useRef as s, useState as c } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { useCallback as c, useEffect as l, useRef as u, useState as d } from "react";
 //#region src/lib/components/Toast/ToastContainer.tsx
-var l = "haze-ToastContainer__containerBase", u = {
+var f = "haze-ToastContainer__containerBase", p = {
 	"top-left": "haze-ToastContainer__top-left",
 	"top-right": "haze-ToastContainer__top-right",
 	"bottom-left": "haze-ToastContainer__bottom-left",
 	"bottom-right": "haze-ToastContainer__bottom-right"
 };
-function d({ children: d, maxCount: f, placement: p = "bottom-right" }) {
-	let [m, h] = c([]), [g, _] = c([]), v = s(0), y = o((e) => {
-		v.current += 1, h((t) => {
-			let n = [...t, {
-				...e,
-				id: v.current
-			}];
-			return f === void 0 || n.length <= f ? n : n.slice(n.length - f);
+function m({ children: m, maxCount: h, placement: g = "bottom-right" }) {
+	let [_, v] = d([]), [y, b] = d([]), x = u([]);
+	l(() => {
+		x.current = _;
+	}, [_]);
+	let S = c((e) => {
+		v((t) => {
+			let n = [...t, e];
+			return h === void 0 || n.length <= h ? n : n.slice(n.length - h);
 		});
-	}, [f]), b = o((e) => {
-		_((t) => t.includes(e) ? t : [...t, e]);
-	}, []), x = o((e) => {
-		h((t) => t.filter((t) => t.id !== e)), _((t) => t.filter((t) => t !== e));
-	}, []);
-	return /* @__PURE__ */ a(r, {
+	}, [h]), C = c((e) => {
+		S({
+			...e,
+			id: i()
+		});
+	}, [S]), w = c((e) => {
+		b((t) => t.includes(e) ? t : [...t, e]);
+	}, []), T = c((e) => {
+		v((t) => t.filter((t) => t.id !== e)), b((t) => t.filter((t) => t !== e));
+	}, []), E = c((e) => {
+		if (e === void 0) {
+			x.current.forEach((e) => w(e.id));
+			return;
+		}
+		w(e);
+	}, [w]);
+	return l(() => a({
+		onToast: S,
+		onDismiss: E
+	}), [S, E]), /* @__PURE__ */ s(r, {
 		value: {
-			toasts: m,
-			addToast: y,
-			removeToast: b
+			toasts: _,
+			addToast: C,
+			removeToast: w
 		},
-		children: [d, /* @__PURE__ */ i("div", {
-			className: e([l, u[p]]),
-			children: m.map((e) => /* @__PURE__ */ i(t, {
-				present: !g.includes(e.id),
-				onExited: () => x(e.id),
-				children: /* @__PURE__ */ i(n, {
+		children: [m, /* @__PURE__ */ o("div", {
+			className: e([f, p[g]]),
+			children: _.map((e) => /* @__PURE__ */ o(t, {
+				present: !y.includes(e.id),
+				onExited: () => T(e.id),
+				children: /* @__PURE__ */ o(n, {
 					variant: e.variant,
 					duration: e.duration,
-					onClose: () => b(e.id),
+					onClose: () => w(e.id),
 					children: e.content
 				})
 			}, e.id))
@@ -49,4 +65,4 @@ function d({ children: d, maxCount: f, placement: p = "bottom-right" }) {
 	});
 }
 //#endregion
-export { d as default, u as toastPlacements };
+export { m as default, p as toastPlacements };

package/dist/components/Toast/index.js

@@ -1,4 +1,5 @@
 import e from "./Toast.js";
-import t from "./ToastContainer.js";
-import n from "./useToast.js";
-export { e as Toast, t as ToastContainer, n as useToast };
+import { toast as t } from "./toast2.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

@@ -0,0 +1,44 @@
+//#region src/lib/components/Toast/toast.ts
+var e = [], t = /* @__PURE__ */ new Set(), n = 0;
+function r() {
+	return n += 1, n;
+}
+function i(n, i) {
+	let a = {
+		id: r(),
+		content: n,
+		variant: i?.variant ?? "info",
+		duration: i?.duration ?? 3e3
+	}, [o] = t;
+	return o ? o.onToast(a) : (e.length >= 100 && e.shift(), e.push(a)), a.id;
+}
+function a(n) {
+	if (n === void 0) {
+		e.length = 0;
+		let [n] = t;
+		n?.onDismiss(void 0);
+		return;
+	}
+	let r = e.findIndex((e) => e.id === n);
+	if (r !== -1) {
+		e.splice(r, 1);
+		return;
+	}
+	let [i] = t;
+	i?.onDismiss(n);
+}
+function o(e) {
+	return (t, n) => i(t, {
+		...n,
+		variant: e
+	});
+}
+i.info = o("info"), i.success = o("success"), i.warning = o("warning"), i.danger = o("danger"), i.dismiss = a;
+function s(n) {
+	if (t.add(n), t.size === 1 && e.length > 0) for (let t of e.splice(0)) n.onToast(t);
+	return () => {
+		t.delete(n);
+	};
+}
+//#endregion
+export { r as nextToastId, s as subscribeToastChannel, i as toast };

package/dist/components/TokenCounter/TokenCounter.js

@@ -1,31 +1,32 @@
 
 import { classnames as e } from "../../utils/classnames.js";
+import { useStrings as t } from "../LocaleProvider/useStrings.js";
 /* empty css                       */
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/lib/components/TokenCounter/TokenCounter.tsx
-var r = "haze-TokenCounter__wrapper", i = "haze-TokenCounter__bar", a = "haze-TokenCounter__fill", o = "haze-TokenCounter__fillNormal", s = "haze-TokenCounter__fillWarning", c = "haze-TokenCounter__fillDanger", l = "haze-TokenCounter__info", u = "haze-TokenCounter__count";
-function d({ used: d, max: f, label: p, className: m }) {
-	let h = f > 0 ? Math.min(100, d / f * 100) : 0, g = h > 90 ? c : h > 70 ? s : o;
-	return /* @__PURE__ */ n("div", {
-		className: e([r, m]),
-		children: [/* @__PURE__ */ n("div", {
-			className: e([l]),
-			children: [/* @__PURE__ */ t("span", { children: p || "Tokens" }), /* @__PURE__ */ n("span", {
-				className: e([u]),
+var i = "haze-TokenCounter__wrapper", a = "haze-TokenCounter__bar", o = "haze-TokenCounter__fill", s = "haze-TokenCounter__fillNormal", c = "haze-TokenCounter__fillWarning", l = "haze-TokenCounter__fillDanger", u = "haze-TokenCounter__info", d = "haze-TokenCounter__count";
+function f({ used: f, max: p, label: m, className: h }) {
+	let g = p > 0 ? Math.min(100, f / p * 100) : 0, _ = g > 90 ? l : g > 70 ? c : s, v = t("tokenCounter");
+	return /* @__PURE__ */ r("div", {
+		className: e([i, h]),
+		children: [/* @__PURE__ */ r("div", {
+			className: e([u]),
+			children: [/* @__PURE__ */ n("span", { children: m || v.label }), /* @__PURE__ */ r("span", {
+				className: e([d]),
 				children: [
-					d.toLocaleString(),
+					f.toLocaleString(),
 					" / ",
-					f.toLocaleString()
+					p.toLocaleString()
 				]
 			})]
-		}), /* @__PURE__ */ t("div", {
-			className: e([i]),
-			children: /* @__PURE__ */ t("div", {
-				style: { width: `${h}%` },
-				className: e([a, g])
+		}), /* @__PURE__ */ n("div", {
+			className: e([a]),
+			children: /* @__PURE__ */ n("div", {
+				style: { width: `${g}%` },
+				className: e([o, _])
 			})
 		})]
 	});
 }
 //#endregion
-export { d as default };
+export { f as default };

package/dist/components/ToolCallCard/ToolCallCard.js

@@ -1,54 +1,56 @@
 
 import { classnames as e } from "../../utils/classnames.js";
+import { useStrings as t } from "../LocaleProvider/useStrings.js";
 /* empty css                       */
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/lib/components/ToolCallCard/ToolCallCard.tsx
-var r = "haze-ToolCallCard__card", i = "haze-ToolCallCard__header", a = "haze-ToolCallCard__statusIcon", o = "haze-ToolCallCard__statusPending", s = "haze-ToolCallCard__statusRunning", c = "haze-ToolCallCard__statusDone", l = "haze-ToolCallCard__statusError", u = "haze-ToolCallCard__body", d = "haze-ToolCallCard__section", f = "haze-ToolCallCard__sectionLabel", p = "haze-ToolCallCard__content", m = {
-	pending: o,
-	running: s,
-	done: c,
-	error: l
-}, h = {
-	pending: "Pending",
-	running: "Running...",
-	done: "Done",
-	error: "Error"
+var i = "haze-ToolCallCard__card", a = "haze-ToolCallCard__header", o = "haze-ToolCallCard__statusIcon", s = "haze-ToolCallCard__statusPending", c = "haze-ToolCallCard__statusRunning", l = "haze-ToolCallCard__statusDone", u = "haze-ToolCallCard__statusError", d = "haze-ToolCallCard__body", f = "haze-ToolCallCard__section", p = "haze-ToolCallCard__sectionLabel", m = "haze-ToolCallCard__content", h = {
+	pending: s,
+	running: c,
+	done: l,
+	error: u
 };
-function g({ name: o, input: s, output: c, status: l = "pending", className: g }) {
-	return /* @__PURE__ */ n("div", {
-		className: e([r, g]),
-		children: [/* @__PURE__ */ n("div", {
-			className: e([i]),
+function g({ name: s, input: c, output: l, status: u = "pending", className: g }) {
+	let _ = t("toolCallCard"), v = {
+		pending: _.pending,
+		running: _.running,
+		done: _.done,
+		error: _.error
+	};
+	return /* @__PURE__ */ r("div", {
+		className: e([i, g]),
+		children: [/* @__PURE__ */ r("div", {
+			className: e([a]),
 			children: [
-				/* @__PURE__ */ t("span", { className: e([a, m[l]]) }),
-				/* @__PURE__ */ t("span", { children: o }),
-				/* @__PURE__ */ t("span", {
+				/* @__PURE__ */ n("span", { className: e([o, h[u]]) }),
+				/* @__PURE__ */ n("span", { children: s }),
+				/* @__PURE__ */ n("span", {
 					style: {
-						marginLeft: "auto",
+						marginInlineStart: "auto",
 						color: "var(--haze-color-text-muted)"
 					},
-					children: h[l]
+					children: v[u]
 				})
 			]
-		}), (s || c) && /* @__PURE__ */ n("div", {
-			className: e([u]),
-			children: [s && /* @__PURE__ */ n("div", {
-				className: e([d]),
-				children: [/* @__PURE__ */ t("div", {
-					className: e([f]),
-					children: "Input"
-				}), /* @__PURE__ */ t("div", {
+		}), (c || l) && /* @__PURE__ */ r("div", {
+			className: e([d]),
+			children: [c && /* @__PURE__ */ r("div", {
+				className: e([f]),
+				children: [/* @__PURE__ */ n("div", {
 					className: e([p]),
-					children: s
+					children: _.inputLabel
+				}), /* @__PURE__ */ n("div", {
+					className: e([m]),
+					children: c
 				})]
-			}), c && /* @__PURE__ */ n("div", {
-				className: e([d]),
-				children: [/* @__PURE__ */ t("div", {
-					className: e([f]),
-					children: "Output"
-				}), /* @__PURE__ */ t("div", {
+			}), l && /* @__PURE__ */ r("div", {
+				className: e([f]),
+				children: [/* @__PURE__ */ n("div", {
 					className: e([p]),
-					children: c
+					children: _.outputLabel
+				}), /* @__PURE__ */ n("div", {
+					className: e([m]),
+					children: l
 				})]
 			})]
 		})]

package/dist/components/Toolbar/Toolbar.js

@@ -0,0 +1,59 @@
+
+import { classnames as e } from "../../utils/classnames.js";
+import { getEnabledMenuItems as t, useRovingTabindex as n } from "../../utils/menuKeyboard.js";
+import { ToolbarProvider as r } from "./ToolbarContext.js";
+/* empty css                  */
+import { jsx as i } from "react/jsx-runtime";
+import { useCallback as a, useRef as o } from "react";
+//#region src/lib/components/Toolbar/Toolbar.tsx
+var s = "[data-haze-toolbar-item]:not([disabled])", c = "haze-Toolbar__toolbar", l = "haze-Toolbar__vertical";
+function u(e, n) {
+	return a((r) => {
+		let i = e === "horizontal" ? "ArrowRight" : "ArrowDown", a = e === "horizontal" ? "ArrowLeft" : "ArrowUp";
+		if (r.key !== i && r.key !== a && r.key !== "Home" && r.key !== "End") return;
+		let o = t(n.current, s);
+		if (o.length === 0) return;
+		let c = o.indexOf(document.activeElement), l = (e) => o[e]?.focus();
+		switch (r.preventDefault(), r.key) {
+			case i:
+				l((c + 1) % o.length);
+				return;
+			case a:
+				l((c - 1 + o.length) % o.length);
+				return;
+			case "Home":
+				l(0);
+				return;
+			case "End":
+				l(o.length - 1);
+				return;
+		}
+	}, [e, n]);
+}
+function d({ orientation: t = "horizontal", className: a, children: d, ...f }) {
+	let p = o(null);
+	n({
+		menuRef: p,
+		active: !0,
+		selector: s
+	});
+	let m = u(t, p);
+	return /* @__PURE__ */ i(r, {
+		value: t,
+		children: i("div", {
+			ref: p,
+			role: "toolbar",
+			"aria-orientation": t,
+			onKeyDown: m,
+			...f,
+			className: e([
+				c,
+				t === "vertical" && l,
+				a
+			]),
+			children: d
+		})
+	});
+}
+//#endregion
+export { d as default };

package/dist/components/Toolbar/ToolbarButton.js

@@ -0,0 +1,25 @@
+
+import { classnames as e } from "../../utils/classnames.js";
+import { base as t, sizes as n, squareSizes as r, variants as i } from "../Button/styles.js";
+/* empty css                        */
+import { jsx as a } from "react/jsx-runtime";
+//#region src/lib/components/Toolbar/ToolbarButton.tsx
+var o = "haze-ToolbarButton__toolbarItem";
+function s({ variant: s = "ghost", size: c = "md", square: l = !1, className: u, ...d }) {
+	let f = l ? r[c] : n[c];
+	return /* @__PURE__ */ a("button", {
+		type: "button",
+		"data-haze-toolbar-item": "",
+		tabIndex: -1,
+		...d,
+		className: e([
+			t,
+			i[s],
+			f,
+			o,
+			u
+		])
+	});
+}
+//#endregion
+export { s as default };

package/dist/components/Toolbar/ToolbarContext.js

@@ -0,0 +1,8 @@
+import { createContext as e, useContext as t } from "react";
+//#region src/lib/components/Toolbar/ToolbarContext.ts
+var n = e(void 0), r = n.Provider;
+function i() {
+	return t(n) ?? "horizontal";
+}
+//#endregion
+export { r as ToolbarProvider, i as useToolbarOrientation };

package/dist/components/Toolbar/ToolbarSeparator.js

@@ -0,0 +1,22 @@
+
+import { classnames as e } from "../../utils/classnames.js";
+import { useToolbarOrientation as t } from "./ToolbarContext.js";
+/* empty css                           */
+import { jsx as n } from "react/jsx-runtime";
+//#region src/lib/components/Toolbar/ToolbarSeparator.tsx
+var r = "haze-ToolbarSeparator__separator", i = "haze-ToolbarSeparator__horizontalRule";
+function a({ className: a, ...o }) {
+	let s = t() === "vertical";
+	return /* @__PURE__ */ n("div", {
+		role: "separator",
+		"aria-orientation": s ? "horizontal" : "vertical",
+		...o,
+		className: e([
+			r,
+			s && i,
+			a
+		])
+	});
+}
+//#endregion
+export { a as default };

package/dist/components/Toolbar/index.js

@@ -0,0 +1,4 @@
+import e from "./Toolbar.js";
+import t from "./ToolbarButton.js";
+import n from "./ToolbarSeparator.js";
+export { e as Toolbar, t as ToolbarButton, n as ToolbarSeparator };

package/dist/components/Tour/Tour.js

@@ -0,0 +1,197 @@
+
+import { classnames as e } from "../../utils/classnames.js";
+import { Presence as t } from "../../utils/presence.js";
+import { computeFloatingPosition as n, resolvePadding as r } from "../../utils/collision.js";
+import { formatString as i } from "../LocaleProvider/locale.js";
+import { useStrings as a } from "../LocaleProvider/useStrings.js";
+/* empty css               */
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { useCallback as c, useEffect as l, useId as u, useRef as d, useState as f } from "react";
+import { useControl as p } from "react-use-control";
+import { createPortal as m } from "react-dom";
+//#region src/lib/components/Tour/Tour.tsx
+var h = 8, g = 16;
+function _(e) {
+	let { target: t } = e;
+	if (typeof t == "function") return t();
+	try {
+		return document.querySelector(t);
+	} catch {
+		return null;
+	}
+}
+var v = "haze-Tour__overlay", y = "haze-Tour__spotlight", b = "haze-Tour__mask", ee = "haze-Tour__card", te = "haze-Tour__centeredCard", ne = "haze-Tour__titleStyle", re = "haze-Tour__bodyStyle", x = "haze-Tour__footerStyle", S = "haze-Tour__counterStyle", C = "haze-Tour__btn", w = "haze-Tour__subtleBtn", ie = "haze-Tour__primaryBtn";
+function T({ steps: T, open: E, current: D, onClose: O, onStepChange: k, maskClosable: A = !1, className: j, ...M }) {
+	let [N, P] = p(E, !1), [F, I] = p(D, 0), L = a("tour"), R = `haze-tour-title-${u()}`, z = `haze-tour-step-${u()}`, B = T.length, V = Math.min(Math.max(F, 0), Math.max(B - 1, 0)), H = B > 0 ? T[V] : void 0, U = V >= B - 1, W = H?.placement ?? "bottom", G = i(L.stepOf, {
+		current: V + 1,
+		total: B
+	}), [K, q] = f(N);
+	N !== K && (q(N), N && D === void 0 && I(0));
+	let J = d(null), Y = d(-1), [X, ae] = f(null), Z = d(null), Q = c((e) => {
+		P(!1), O?.(e);
+	}, [O, P]), $ = c((e) => {
+		I(e), k?.(e);
+	}, [k, I]);
+	return l(() => {
+		if (!N) return;
+		let e = B > 0 ? T[V] : void 0, t = J.current;
+		if (!e || !t) return;
+		let i = _(e);
+		i?.scrollIntoView({ block: "nearest" });
+		let a = (e) => {
+			let t = Z.current;
+			(t === null != (e === null) || t !== null && e !== null && (t.top !== e.top || t.left !== e.left || t.width !== e.width || t.height !== e.height)) && (Z.current = e, ae(e));
+		}, o = () => {
+			let e = i?.getBoundingClientRect();
+			if (!i || !e || e.width === 0 && e.height === 0) {
+				t.style.top = "", t.style.left = "", a(null);
+				return;
+			}
+			let o = t.getBoundingClientRect(), { top: s, left: c } = n({
+				trigger: e,
+				panel: {
+					width: o.width,
+					height: o.height
+				},
+				viewport: {
+					width: window.innerWidth,
+					height: window.innerHeight
+				},
+				placement: W,
+				gap: {
+					below: g,
+					above: g,
+					before: g,
+					after: g
+				},
+				strategy: {
+					flip: !0,
+					shift: !0,
+					padding: r()
+				}
+			});
+			t.style.top = `${s}px`, t.style.left = `${c}px`, a({
+				top: e.top - h,
+				left: e.left - h,
+				width: e.width + 16,
+				height: e.height + 16
+			});
+		};
+		o();
+		let s = 0, c = () => {
+			s ||= requestAnimationFrame(() => {
+				s = 0, o();
+			});
+		};
+		return window.addEventListener("resize", c), window.addEventListener("scroll", c, !0), () => {
+			s && cancelAnimationFrame(s), window.removeEventListener("resize", c), window.removeEventListener("scroll", c, !0);
+		};
+	}, [
+		N,
+		T,
+		V,
+		B,
+		W
+	]), l(() => {
+		if (!N) {
+			Y.current = -1;
+			return;
+		}
+		Y.current !== V && (Y.current = V, J.current?.focus());
+	}, [N, V]), l(() => {
+		if (!N || B === 0) return;
+		let e = (e) => {
+			if (e.defaultPrevented) return;
+			if (e.key === "Escape") {
+				Q("skip");
+				return;
+			}
+			let t = e.target;
+			t instanceof HTMLElement && (t.isContentEditable || t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.tagName === "SELECT") || (e.key === "ArrowRight" && !U ? (e.preventDefault(), $(V + 1)) : e.key === "ArrowLeft" && V > 0 && (e.preventDefault(), $(V - 1)));
+		};
+		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+	}, [
+		N,
+		B,
+		V,
+		U,
+		Q,
+		$
+	]), !H || typeof document > "u" ? null : m(/* @__PURE__ */ o(t, {
+		present: N,
+		children: s("div", {
+			onClick: A ? (e) => {
+				N && e.target === e.currentTarget && Q("skip");
+			} : void 0,
+			className: e([v]),
+			children: [X === null ? /* @__PURE__ */ o("div", {
+				"aria-hidden": "true",
+				className: e([b])
+			}) : /* @__PURE__ */ o("div", {
+				"data-haze-tour-spotlight": "",
+				"aria-hidden": "true",
+				style: {
+					top: X.top,
+					left: X.left,
+					width: X.width,
+					height: X.height
+				},
+				className: e([y])
+			}), /* @__PURE__ */ s("div", {
+				ref: J,
+				role: "dialog",
+				"aria-modal": "false",
+				"aria-labelledby": H.title === void 0 ? z : R,
+				tabIndex: -1,
+				...M,
+				className: e([
+					ee,
+					X === null && te,
+					j
+				]),
+				children: [
+					H.title !== void 0 && /* @__PURE__ */ o("h2", {
+						id: R,
+						className: e([ne]),
+						children: H.title
+					}),
+					/* @__PURE__ */ o("div", {
+						className: e([re]),
+						children: H.content
+					}),
+					/* @__PURE__ */ s("div", {
+						className: e([x]),
+						children: [
+							/* @__PURE__ */ o("span", {
+								id: z,
+								className: e([S]),
+								children: G
+							}),
+							/* @__PURE__ */ o("button", {
+								type: "button",
+								onClick: () => Q("skip"),
+								className: e([C, w]),
+								children: L.skip
+							}),
+							/* @__PURE__ */ o("button", {
+								type: "button",
+								disabled: V === 0,
+								onClick: () => $(V - 1),
+								className: e([C, w]),
+								children: L.back
+							}),
+							/* @__PURE__ */ o("button", {
+								type: "button",
+								onClick: () => U ? Q("done") : $(V + 1),
+								className: e([C, ie]),
+								children: U ? L.done : L.next
+							})
+						]
+					})
+				]
+			})]
+		})
+	}), document.body);
+}
+//#endregion
+export { T as default };

package/dist/components/Tour/index.js

@@ -0,0 +1,2 @@
+import e from "./Tour.js";
+export { e as Tour };