haze-ui 1.24.1 → 1.26.0

package/dist/components/Tag/Tag.js

@@ -1,34 +1,37 @@
 
+"use client";
 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/Tag/Tag.tsx
-var r = "haze-Tag__base", i = {
+var i = "haze-Tag__base", a = {
 	default: "haze-Tag__default",
 	primary: "haze-Tag__primary",
 	success: "haze-Tag__success",
 	warning: "haze-Tag__warning",
 	danger: "haze-Tag__danger"
-}, a = {
+}, o = {
 	sm: "haze-Tag__sm",
 	md: "haze-Tag__md"
-}, o = "haze-Tag__closeBtn";
-function s({ variant: s = "default", size: c = "md", closable: l = !1, onClose: u, className: d, children: f }) {
-	return /* @__PURE__ */ n("span", {
+}, s = "haze-Tag__closeBtn";
+function c({ variant: c = "default", size: l = "md", closable: u = !1, onClose: d, className: f, children: p }) {
+	let m = t("tag");
+	return /* @__PURE__ */ r("span", {
 		className: e([
-			r,
-			i[s],
+			i,
 			a[c],
-			d
+			o[l],
+			f
 		]),
-		children: [f, l && /* @__PURE__ */ t("button", {
+		children: [p, u && /* @__PURE__ */ n("button", {
 			type: "button",
-			className: o,
-			"aria-label": "Remove",
-			onClick: u,
+			className: s,
+			"aria-label": m.remove,
+			onClick: d,
 			children: "×"
 		})]
 	});
 }
 //#endregion
-export { s as default };
+export { c as default };

package/dist/components/Tag/index.js

@@ -1,2 +1,3 @@
+"use client";
 import e from "./Tag.js";
 export { e as Tag };

package/dist/components/TagGroup/TagGroup.js

@@ -1,4 +1,5 @@
 
+"use client";
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                   */
 import { jsx as t } from "react/jsx-runtime";

package/dist/components/TagGroup/TagGroupItem.js

@@ -1,20 +1,23 @@
 
+"use client";
 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/TagGroup/TagGroupItem.tsx
-var r = "haze-TagGroupItem__tag", i = "haze-TagGroupItem__closeBtn";
-function a({ children: a, onClose: o, className: s }) {
-	return /* @__PURE__ */ n("span", {
-		className: e([r, s]),
-		children: [a, o && /* @__PURE__ */ t("button", {
+var i = "haze-TagGroupItem__tag", a = "haze-TagGroupItem__closeBtn";
+function o({ children: o, onClose: s, className: c }) {
+	let l = t("tagGroup");
+	return /* @__PURE__ */ r("span", {
+		className: e([i, c]),
+		children: [o, s && /* @__PURE__ */ n("button", {
 			type: "button",
-			onClick: o,
-			"aria-label": "Remove",
-			className: e([i]),
+			onClick: s,
+			"aria-label": l.remove,
+			className: e([a]),
 			children: "x"
 		})]
 	});
 }
 //#endregion
-export { a as default };
+export { o as default };

package/dist/components/TagGroup/index.js

@@ -1,3 +1,4 @@
+"use client";
 import e from "./TagGroup.js";
 import t from "./TagGroupItem.js";
 export { e as TagGroup, t as TagGroupItem };

package/dist/components/TagInput/TagInput.js

@@ -1,3 +1,4 @@
+"use client";
 import e from "./TagInputCore.js";
 import { jsx as t } from "react/jsx-runtime";
 import { useControl as n } from "react-use-control";

package/dist/components/TagInput/TagInputCore.js

@@ -1,68 +1,71 @@
 
+"use client";
 import { classnames as e } from "../../utils/classnames.js";
+import { formatString as t } from "../LocaleProvider/locale.js";
+import { useStrings as n } from "../LocaleProvider/useStrings.js";
 /* empty css                       */
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { useCallback as r, useEffect as i, useRef as a, useState as o } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { useCallback as a, useEffect as o, useRef as s, useState as c } from "react";
 //#region src/lib/components/TagInput/TagInputCore.tsx
-var s = "haze-TagInputCore__container", c = "haze-TagInputCore__listWrap", l = "haze-TagInputCore__tag", u = "haze-TagInputCore__removeBtn", d = "haze-TagInputCore__inputEl";
-function f({ value: f, onChange: p, placeholder: m, maxTags: h, disabled: g, className: _, id: v, "aria-invalid": y, "aria-describedby": b }) {
-	let [x, S] = o(""), C = a(null), w = a(null), T = a(null);
-	i(() => {
-		let e = T.current;
+var l = "haze-TagInputCore__container", u = "haze-TagInputCore__listWrap", d = "haze-TagInputCore__tag", f = "haze-TagInputCore__removeBtn", p = "haze-TagInputCore__inputEl";
+function m({ value: m, onChange: h, placeholder: g, maxTags: _, disabled: v, className: y, id: b, "aria-invalid": x, "aria-describedby": S }) {
+	let [C, w] = c(""), T = s(null), E = s(null), D = s(null);
+	o(() => {
+		let e = D.current;
 		if (e === null) return;
-		if (T.current = null, f.length === 0) {
-			w.current?.focus();
+		if (D.current = null, m.length === 0) {
+			E.current?.focus();
 			return;
 		}
-		let t = Math.min(e, f.length - 1);
-		(C.current?.querySelectorAll("[aria-label^=\"Remove \"]"))?.[t]?.focus();
-	}, [f]);
-	let E = r((e) => {
+		let t = Math.min(e, m.length - 1);
+		(T.current?.querySelectorAll("li > button"))?.[t]?.focus();
+	}, [m]);
+	let O = a((e) => {
 		let t = e.trim();
-		t && !f.includes(t) && (h && f.length >= h || (p([...f, t]), S("")));
+		t && !m.includes(t) && (_ && m.length >= _ || (h([...m, t]), w("")));
 	}, [
-		f,
-		h,
-		p
-	]), D = r((e) => {
-		let t = f.filter((t, n) => n !== e);
-		p(t), T.current = t.length === 0 ? 0 : Math.min(e, t.length - 1);
-	}, [f, p]), O = (e) => {
-		e.key === "Enter" || e.key === "," ? (e.preventDefault(), E(x)) : e.key === "Backspace" && !x && f.length > 0 && D(f.length - 1);
-	}, k = m || "Add tag", A = `${f.length} tag${f.length === 1 ? "" : "s"}`;
-	return /* @__PURE__ */ n("div", {
-		ref: C,
-		className: e([s, _]),
-		children: [/* @__PURE__ */ t("ul", {
-			className: e([c]),
-			children: f.map((r, i) => /* @__PURE__ */ n("li", {
-				className: e([l]),
-				children: [r, /* @__PURE__ */ t("button", {
+		m,
+		_,
+		h
+	]), k = a((e) => {
+		let t = m.filter((t, n) => n !== e);
+		h(t), D.current = t.length === 0 ? 0 : Math.min(e, t.length - 1);
+	}, [m, h]), A = (e) => {
+		e.key === "Enter" || e.key === "," ? (e.preventDefault(), O(C)) : e.key === "Backspace" && !C && m.length > 0 && k(m.length - 1);
+	}, j = n("tagInput"), M = g || j.placeholder, N = t(m.length === 1 ? j.tagCountSingular : j.tagCount, { count: m.length });
+	return /* @__PURE__ */ i("div", {
+		ref: T,
+		className: e([l, y]),
+		children: [/* @__PURE__ */ r("ul", {
+			className: e([u]),
+			children: m.map((n, a) => /* @__PURE__ */ i("li", {
+				className: e([d]),
+				children: [n, /* @__PURE__ */ r("button", {
 					type: "button",
-					onClick: () => D(i),
+					onClick: () => k(a),
 					onKeyDown: (e) => {
-						e.key === "Backspace" && (e.preventDefault(), D(i));
+						e.key === "Backspace" && (e.preventDefault(), k(a));
 					},
-					"aria-label": `Remove ${r}`,
-					disabled: g,
-					className: e([u]),
+					"aria-label": t(j.removeTag, { tag: n }),
+					disabled: v,
+					className: e([f]),
 					children: "x"
 				})]
-			}, i))
-		}), /* @__PURE__ */ t("input", {
-			ref: w,
-			id: v,
-			"aria-invalid": y,
-			"aria-describedby": b,
-			value: x,
-			onChange: (e) => S(e.target.value),
-			onKeyDown: O,
-			placeholder: f.length === 0 ? m : void 0,
-			"aria-label": f.length > 0 ? `${k}, ${A}` : k,
-			disabled: g,
-			className: e([d])
+			}, a))
+		}), /* @__PURE__ */ r("input", {
+			ref: E,
+			id: b,
+			"aria-invalid": x,
+			"aria-describedby": S,
+			value: C,
+			onChange: (e) => w(e.target.value),
+			onKeyDown: A,
+			placeholder: m.length === 0 ? g : void 0,
+			"aria-label": m.length > 0 ? `${M}, ${N}` : M,
+			disabled: v,
+			className: e([p])
 		})]
 	});
 }
 //#endregion
-export { f as default };
+export { m as default };

package/dist/components/TagInput/index.js

@@ -1,3 +1,4 @@
+"use client";
 import e from "./TagInputCore.js";
 import t from "./TagInput.js";
 export { t as TagInput, e as TagInputCore };

package/dist/components/Textarea/Textarea.js

@@ -1,3 +1,4 @@
+"use client";
 import e from "./TextareaCore.js";
 import { jsx as t } from "react/jsx-runtime";
 import { useControl as n } from "react-use-control";

package/dist/components/Textarea/TextareaCore.js

@@ -1,4 +1,5 @@
 
+"use client";
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                       */
 import { jsx as t } from "react/jsx-runtime";

package/dist/components/Textarea/index.js

@@ -1,3 +1,4 @@
+"use client";
 import e from "./TextareaCore.js";
 import t from "./Textarea.js";
 export { t as Textarea, e as TextareaCore };

package/dist/components/ThinkingIndicator/ThinkingIndicator.js

@@ -1,21 +1,24 @@
 
+"use client";
 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/ThinkingIndicator/ThinkingIndicator.tsx
-var r = "haze-ThinkingIndicator__wrapper", i = "haze-ThinkingIndicator__dots", a = "haze-ThinkingIndicator__dot", o = "haze-ThinkingIndicator__dot2", s = "haze-ThinkingIndicator__dot3";
-function c({ text: c = "Thinking", className: l }) {
-	return /* @__PURE__ */ n("div", {
-		className: e([r, l]),
-		children: [/* @__PURE__ */ t("span", { children: c }), /* @__PURE__ */ n("span", {
-			className: e([i]),
+var i = "haze-ThinkingIndicator__wrapper", a = "haze-ThinkingIndicator__dots", o = "haze-ThinkingIndicator__dot", s = "haze-ThinkingIndicator__dot2", c = "haze-ThinkingIndicator__dot3";
+function l({ text: l, className: u }) {
+	let d = t("thinkingIndicator"), f = l ?? d.text;
+	return /* @__PURE__ */ r("div", {
+		className: e([i, u]),
+		children: [/* @__PURE__ */ n("span", { children: f }), /* @__PURE__ */ r("span", {
+			className: e([a]),
 			children: [
-				/* @__PURE__ */ t("span", { className: e([a]) }),
-				/* @__PURE__ */ t("span", { className: e([a, o]) }),
-				/* @__PURE__ */ t("span", { className: e([a, s]) })
+				/* @__PURE__ */ n("span", { className: e([o]) }),
+				/* @__PURE__ */ n("span", { className: e([o, s]) }),
+				/* @__PURE__ */ n("span", { className: e([o, c]) })
 			]
 		})]
 	});
 }
 //#endregion
-export { c as default };
+export { l as default };

package/dist/components/ThinkingIndicator/index.js

@@ -1,2 +1,3 @@
+"use client";
 import e from "./ThinkingIndicator.js";
 export { e as ThinkingIndicator };

package/dist/components/TimePicker/TimePicker.js

@@ -1,3 +1,4 @@
+"use client";
 import e from "./TimePickerCore.js";
 import { jsx as t } from "react/jsx-runtime";
 import { useControl as n } from "react-use-control";

package/dist/components/TimePicker/TimePickerCore.js

@@ -1,4 +1,5 @@
 
+"use client";
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                         */
 import { jsx as t } from "react/jsx-runtime";

package/dist/components/TimePicker/index.js

@@ -1,3 +1,4 @@
+"use client";
 import e from "./TimePickerCore.js";
 import t from "./TimePicker.js";
 export { t as TimePicker, e as TimePickerCore };

package/dist/components/Timeline/Timeline.js

@@ -1,4 +1,5 @@
 
+"use client";
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                   */
 import { jsx as t, jsxs as n } from "react/jsx-runtime";

package/dist/components/Timeline/index.js

@@ -1,2 +1,3 @@
+"use client";
 import { Timeline as e, TimelineItem as t } from "./Timeline.js";
 export { e as Timeline, t as TimelineItem };

package/dist/components/Toast/Toast.js

@@ -1,4 +1,5 @@
 
+"use client";
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                */
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
@@ -9,58 +10,63 @@ var o = "haze-Toast__base", s = {
 	success: "haze-Toast__success",
 	warning: "haze-Toast__warning",
 	danger: "haze-Toast__danger"
-}, c = "haze-Toast__contentStyle", l = "haze-Toast__closeBtn";
-function u({ variant: u = "info", onClose: d, duration: f, children: p, className: m, ...h }) {
-	let g = a(f), _ = a(0), v = a(null), y = a(!1), b = a(!1), x = a(d);
+}, c = {
+	info: "status",
+	success: "status",
+	warning: "status",
+	danger: "alert"
+}, l = "haze-Toast__contentStyle", u = "haze-Toast__closeBtn";
+function d({ variant: d = "info", onClose: f, duration: p, children: m, className: h, ...g }) {
+	let _ = a(p), v = a(0), y = a(null), b = a(!1), x = a(!1), S = a(f);
 	i(() => {
-		x.current = d;
-	}, [d]);
-	let S = r(() => {
-		v.current !== null && (clearTimeout(v.current), v.current = null, g.current = Math.max(0, g.current - (Date.now() - _.current)));
-	}, []), C = r(() => {
-		v.current !== null || g.current <= 0 || (_.current = Date.now(), v.current = setTimeout(() => {
-			v.current = null, x.current();
-		}, g.current));
+		S.current = f;
+	}, [f]);
+	let C = r(() => {
+		y.current !== null && (clearTimeout(y.current), y.current = null, _.current = Math.max(0, _.current - (Date.now() - v.current)));
 	}, []), w = r(() => {
-		y.current || b.current ? S() : C();
-	}, [S, C]);
+		y.current !== null || _.current <= 0 || (v.current = Date.now(), y.current = setTimeout(() => {
+			y.current = null, S.current();
+		}, _.current));
+	}, []), T = r(() => {
+		b.current || x.current ? C() : w();
+	}, [C, w]);
 	return i(() => {
-		if (!(f <= 0)) return g.current = f, !y.current && !b.current && C(), S;
+		if (!(p <= 0)) return _.current = p, !b.current && !x.current && w(), C;
 	}, [
-		f,
-		C,
-		S
+		p,
+		w,
+		C
 	]), /* @__PURE__ */ n("div", {
-		role: "alert",
+		role: c[d],
 		onPointerEnter: () => {
-			y.current = !0, w();
+			b.current = !0, T();
 		},
 		onPointerLeave: () => {
-			y.current = !1, w();
+			b.current = !1, T();
 		},
 		onFocus: () => {
-			b.current = !0, w();
+			x.current = !0, T();
 		},
 		onBlur: () => {
-			b.current = !1, w();
+			x.current = !1, T();
 		},
-		...h,
+		...g,
 		className: e([
 			o,
-			s[u],
-			m
+			s[d],
+			h
 		]),
 		children: [/* @__PURE__ */ t("div", {
-			className: c,
-			children: p
+			className: l,
+			children: m
 		}), /* @__PURE__ */ t("button", {
 			type: "button",
-			className: l,
+			className: u,
 			"aria-label": "Close",
-			onClick: d,
+			onClick: f,
 			children: "×"
 		})]
 	});
 }
 //#endregion
-export { u as default };
+export { d as default };

package/dist/components/Toast/ToastContainer.js

@@ -1,47 +1,64 @@
 
+"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";
 /* 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 +66,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/ToastContext.js

@@ -1,3 +1,4 @@
+"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;

package/dist/components/Toast/index.js

@@ -1,4 +1,6 @@
+"use client";
 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,45 @@
+"use client";
+//#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/Toast/useToast.js

@@ -1,3 +1,4 @@
+"use client";
 import { useToastContext as e } from "./ToastContext.js";
 import { useCallback as t } from "react";
 //#region src/lib/components/Toast/useToast.ts