haze-ui 1.26.0 → 1.28.0

package/dist/components/Toast/ToastContainer.js

@@ -1,69 +1,89 @@
 
 "use client";
 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";
+import { useStrings as t } from "../LocaleProvider/useStrings.js";
+import { Presence as n } from "../../utils/presence.js";
+import r from "./Toast.js";
+import { ToastProvider as i, applyToastPatch as a, deferredCopyKey as o } from "./ToastContext.js";
+import { nextToastId as s, subscribeToastChannel as c } from "./toast2.js";
 /* empty css                         */
-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";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { useCallback as d, useEffect as f, useRef as p, useState as m } from "react";
 //#region src/lib/components/Toast/ToastContainer.tsx
-var f = "haze-ToastContainer__containerBase", p = {
+var h = "haze-ToastContainer__containerBase", g = {
 	"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 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) => {
+function _({ children: _, maxCount: v, placement: y = "bottom-right", classNames: b }) {
+	let [x, S] = m([]), [C, w] = m([]), T = p([]);
+	f(() => {
+		T.current = x;
+	}, [x]);
+	let E = d((e) => {
+		S((t) => {
 			let n = [...t, e];
-			return h === void 0 || n.length <= h ? n : n.slice(n.length - h);
+			return v === void 0 || n.length <= v ? n : n.slice(n.length - v);
 		});
-	}, [h]), C = c((e) => {
-		S({
+	}, [v]), D = d((e) => {
+		let t = s();
+		return E({
 			...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) => {
+			id: t
+		}), t;
+	}, [E]), O = d((e, t) => {
+		S((n) => n.map((n) => n.id === e ? a(n, t) : n));
+	}, []), k = d((e) => {
+		w((t) => t.includes(e) ? t : [...t, e]);
+	}, []), A = d((e) => {
+		S((t) => t.filter((t) => t.id !== e)), w((t) => t.filter((t) => t !== e));
+	}, []), j = d((e) => {
 		if (e === void 0) {
-			x.current.forEach((e) => w(e.id));
+			T.current.forEach((e) => k(e.id));
 			return;
 		}
-		w(e);
-	}, [w]);
-	return l(() => a({
-		onToast: S,
-		onDismiss: E
-	}), [S, E]), /* @__PURE__ */ s(r, {
+		k(e);
+	}, [k]);
+	f(() => c({
+		onToast: E,
+		onDismiss: j,
+		onUpdate: O
+	}), [
+		E,
+		j,
+		O
+	]);
+	let M = t("toast");
+	return /* @__PURE__ */ u(i, {
 		value: {
-			toasts: _,
-			addToast: C,
-			removeToast: w
+			toasts: x,
+			addToast: D,
+			removeToast: k,
+			updateToast: O
 		},
-		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: () => w(e.id),
-					children: e.content
-				})
-			}, e.id))
+		children: [_, /* @__PURE__ */ l("div", {
+			className: e([
+				h,
+				g[y],
+				b?.viewport
+			]),
+			children: x.map((e) => {
+				let t = o(e.content);
+				return /* @__PURE__ */ l(n, {
+					present: !C.includes(e.id),
+					onExited: () => A(e.id),
+					children: /* @__PURE__ */ l(r, {
+						variant: e.variant,
+						duration: e.duration,
+						onClose: () => k(e.id),
+						classNames: b,
+						children: t ? M[t] : e.content
+					})
+				}, e.id);
+			})
 		})]
 	});
 }
 //#endregion
-export { m as default, p as toastPlacements };
+export { _ as default, g as toastPlacements };

package/dist/components/Toast/ToastContext.js

@@ -1,11 +1,30 @@
 "use client";
 import { createContext as e, useContext as t } from "react";
 //#region src/lib/components/Toast/ToastContext.ts
-var n = e(void 0), r = n.Provider;
-function i() {
-	let e = t(n);
+function n(e) {
+	return { deferredCopy: e };
+}
+function r(e) {
+	return e === "loading" || e === "success" || e === "error";
+}
+function i(e) {
+	if (typeof e != "object" || !e || !("deferredCopy" in e)) return null;
+	let t = e.deferredCopy;
+	return r(t) ? t : null;
+}
+function a(e, t) {
+	return {
+		...e,
+		...t.content !== void 0 && { content: t.content },
+		...t.variant !== void 0 && { variant: t.variant },
+		...t.duration !== void 0 && { duration: t.duration }
+	};
+}
+var o = e(void 0), s = o.Provider;
+function c() {
+	let e = t(o);
 	if (!e) throw Error("useToast must be used within <ToastContainer>");
 	return e;
 }
 //#endregion
-export { r as ToastProvider, i as useToastContext };
+export { s as ToastProvider, a as applyToastPatch, i as deferredCopyKey, n as deferredToastCopy, c as useToastContext };

package/dist/components/Toast/toast2.js

@@ -1,45 +1,80 @@
 "use client";
+import { applyToastPatch as e, deferredToastCopy as t } from "./ToastContext.js";
 //#region src/lib/components/Toast/toast.ts
-var e = [], t = /* @__PURE__ */ new Set(), n = 0;
-function r() {
-	return n += 1, n;
+var n = 100, r = [], i = /* @__PURE__ */ new Set(), a = 0;
+function o() {
+	return a += 1, a;
 }
-function i(n, i) {
+function s(e, t) {
 	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);
+		id: o(),
+		content: e,
+		variant: t?.variant ?? "info",
+		duration: t?.duration ?? 3e3
+	}, [s] = i;
+	return s ? s.onToast(a) : (r.length >= n && r.shift(), r.push(a)), a.id;
+}
+function c(e) {
+	if (e === void 0) {
+		r.length = 0;
+		let [e] = i;
+		e?.onDismiss(void 0);
+		return;
+	}
+	let t = r.findIndex((t) => t.id === e);
+	if (t !== -1) {
+		r.splice(t, 1);
 		return;
 	}
-	let r = e.findIndex((e) => e.id === n);
-	if (r !== -1) {
-		e.splice(r, 1);
+	let [n] = i;
+	n?.onDismiss(e);
+}
+function l(t, n) {
+	let a = r.findIndex((e) => e.id === t);
+	if (a !== -1) {
+		r[a] = e(r[a], n);
 		return;
 	}
-	let [i] = t;
-	i?.onDismiss(n);
+	let [o] = i;
+	o?.onUpdate(t, n);
 }
-function o(e) {
-	return (t, n) => i(t, {
+function u(e) {
+	return (t, n) => s(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);
+function d(e, n, r) {
+	return e === void 0 ? t(r) : typeof e == "function" ? e(n) : e;
+}
+function f(e, n, r, i) {
+	let a = e(i?.loading ?? t("loading"), {
+		variant: "info",
+		duration: 0
+	}), o = i?.duration ?? 3e3;
+	return r.then((e) => {
+		n(a, {
+			content: d(i?.success, e, "success"),
+			variant: "success",
+			duration: o
+		});
+	}, (e) => {
+		n(a, {
+			content: d(i?.error, e, "error"),
+			variant: "danger",
+			duration: o
+		});
+	}), r;
+}
+function p(e, t) {
+	return f(s, l, e, t);
+}
+s.info = u("info"), s.success = u("success"), s.warning = u("warning"), s.danger = u("danger"), s.dismiss = c, s.update = l, s.promise = p;
+function m(e) {
+	if (i.add(e), i.size === 1 && r.length > 0) for (let t of r.splice(0)) e.onToast(t);
 	return () => {
-		t.delete(n);
+		i.delete(e);
 	};
 }
 //#endregion
-export { r as nextToastId, s as subscribeToastChannel, i as toast };
+export { f as driveToastPromise, o as nextToastId, m as subscribeToastChannel, s as toast };

package/dist/components/Toast/useToast.js

@@ -1,16 +1,18 @@
 "use client";
 import { useToastContext as e } from "./ToastContext.js";
-import { useCallback as t } from "react";
+import { driveToastPromise as t } from "./toast2.js";
+import { useMemo as n } from "react";
 //#region src/lib/components/Toast/useToast.ts
-function n() {
-	let { addToast: n } = e();
-	return t((e, t) => {
-		n({
+function r() {
+	let { addToast: r, updateToast: i } = e();
+	return n(() => {
+		let e = (e, t) => r({
 			content: e,
 			variant: t?.variant ?? "info",
 			duration: t?.duration ?? 3e3
 		});
-	}, [n]);
+		return e.update = (e, t) => i(e, t), e.promise = (n, r) => t(e, i, n, r), e;
+	}, [r, i]);
 }
 //#endregion
-export { n as default };
+export { r as default };

package/dist/components/Toggle/Toggle.js

@@ -0,0 +1,20 @@
+"use client";
+import e from "./ToggleCore.js";
+import { jsx as t } from "react/jsx-runtime";
+import { useControl as n } from "react-use-control";
+//#region src/lib/components/Toggle/Toggle.tsx
+function r({ pressed: r, size: i, square: a, className: o, onClick: s, ref: c, ...l }) {
+	let [u, d] = n(r, !1);
+	return /* @__PURE__ */ t(e, {
+		ref: c,
+		pressed: u,
+		onPressedChange: d,
+		onNativeClick: s,
+		size: i,
+		square: a,
+		className: o,
+		...l
+	});
+}
+//#endregion
+export { r as default };

package/dist/components/Toggle/ToggleCore.js

@@ -0,0 +1,31 @@
+
+"use client";
+import { classnames as e } from "../../utils/classnames.js";
+import { base as t, sizes as n, squareSizes as r } from "../Button/styles.js";
+/* empty css                     */
+import { jsx as i } from "react/jsx-runtime";
+//#region src/lib/components/Toggle/ToggleCore.tsx
+var a = {
+	rest: "haze-ToggleCore__rest",
+	pressed: "haze-ToggleCore__pressed"
+};
+function o({ pressed: o, onPressedChange: s, onNativeClick: c, size: l = "md", square: u = !1, className: d, ref: f, ...p }) {
+	let m = u ? r[l] : n[l];
+	return /* @__PURE__ */ i("button", {
+		ref: f,
+		type: "button",
+		"aria-pressed": o,
+		onClick: (e) => {
+			s(!o), c?.(e);
+		},
+		...p,
+		className: e([
+			t,
+			a[o ? "pressed" : "rest"],
+			m,
+			d
+		])
+	});
+}
+//#endregion
+export { o as default };

package/dist/components/Toggle/index.js

@@ -0,0 +1,4 @@
+"use client";
+import e from "./ToggleCore.js";
+import t from "./Toggle.js";
+export { t as Toggle, e as ToggleCore };

package/dist/components/Toolbar/Toolbar.js

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

package/dist/components/Toolbar/ToolbarToggle.js

@@ -0,0 +1,31 @@
+
+"use client";
+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";
+import { useControl as o } from "react-use-control";
+//#region src/lib/components/Toolbar/ToolbarToggle.tsx
+var s = "haze-ToolbarToggle__toolbarItem";
+function c({ pressed: c, variant: l = "ghost", size: u = "md", square: d = !1, className: f, onClick: p, ...m }) {
+	let [h, g] = o(c, !1), _ = d ? r[u] : n[u];
+	return /* @__PURE__ */ a("button", {
+		type: "button",
+		"data-haze-toolbar-item": "",
+		tabIndex: -1,
+		"aria-pressed": h,
+		onClick: (e) => {
+			g(!h), p?.(e);
+		},
+		...m,
+		className: e([
+			t,
+			i[l],
+			_,
+			s,
+			f
+		])
+	});
+}
+//#endregion
+export { c as default };

package/dist/components/Toolbar/index.js

@@ -2,4 +2,5 @@
 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 };
+import r from "./ToolbarToggle.js";
+export { e as Toolbar, t as ToolbarButton, n as ToolbarSeparator, r as ToolbarToggle };

package/dist/components/Tooltip/Tooltip.js

@@ -53,7 +53,7 @@ function m({ content: m, position: h = "top", delay: g = 150, open: _, collision
 			className: e([
 				f,
 				...O.panelClasses,
-				...t(O, E)
+				...t(O, E, O.direction)
 			]),
 			children: m
 		})]