haze-ui 1.24.1 → 1.26.0

package/dist/components/Mentions/index.js

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

package/dist/components/Menu/Menu.js

@@ -1,4 +1,5 @@
 
+"use client";
 import { classnames as e } from "../../utils/classnames.js";
 import { useFocusScope as t } from "../../utils/focus-scope.js";
 import { FloatingPanel as n, useFloating as r } from "../../utils/floating.js";

package/dist/components/Menu/MenuDivider.js

@@ -1,4 +1,5 @@
 
+"use client";
 /* empty css                      */
 import { jsx as e } from "react/jsx-runtime";
 //#region src/lib/components/Menu/MenuDivider.tsx

package/dist/components/Menu/MenuItem.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/Menu/index.js

@@ -1,3 +1,4 @@
+"use client";
 import e from "./Menu.js";
 import t from "./MenuItem.js";
 import n from "./MenuDivider.js";

package/dist/components/ModelPicker/ModelPicker.js

@@ -1,23 +1,25 @@
 
+"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 { useControl as r } from "react-use-control";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { useControl as i } from "react-use-control";
 //#region src/lib/components/ModelPicker/ModelPicker.tsx
-var i = "haze-ModelPicker__wrapper", a = "haze-ModelPicker__select";
-function o({ value: o, onChange: s, options: c, disabled: l, className: u }) {
-	let [d, f] = r(o, "");
-	return /* @__PURE__ */ t("div", {
-		className: e([i, u]),
-		children: t("select", {
-			"aria-label": "Model",
-			value: d,
+var a = "haze-ModelPicker__wrapper", o = "haze-ModelPicker__select";
+function s({ value: s, onChange: c, options: l, disabled: u, className: d }) {
+	let [f, p] = i(s, ""), m = t("modelPicker");
+	return /* @__PURE__ */ n("div", {
+		className: e([a, d]),
+		children: n("select", {
+			"aria-label": m.label,
+			value: f,
 			onChange: (e) => {
-				f(e.target.value), s?.(e.target.value);
+				p(e.target.value), c?.(e.target.value);
 			},
-			disabled: l,
-			className: e([a]),
-			children: c.map((e) => /* @__PURE__ */ n("option", {
+			disabled: u,
+			className: e([o]),
+			children: l.map((e) => /* @__PURE__ */ r("option", {
 				value: e.value,
 				children: [e.label, e.contextLength ? ` (${e.contextLength})` : ""]
 			}, e.value))
@@ -25,4 +27,4 @@ function o({ value: o, onChange: s, options: c, disabled: l, className: u }) {
 	});
 }
 //#endregion
-export { o as default };
+export { s as default };

package/dist/components/ModelPicker/index.js

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

package/dist/components/NavigationBar/NavLink.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/NavigationBar/NavigationBar.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/NavigationBar/index.js

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

package/dist/components/NumberInput/NumberInput.js

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

package/dist/components/NumberInput/NumberInputCore.js

@@ -1,56 +1,58 @@
 
+"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/NumberInput/NumberInputCore.tsx
-var r = "haze-NumberInputCore__wrapper", i = "haze-NumberInputCore__input", a = "haze-NumberInputCore__stepBtn", o = "haze-NumberInputCore__inputSm", s = "haze-NumberInputCore__inputMd", c = "haze-NumberInputCore__inputLg", l = "haze-NumberInputCore__btnSm", u = "haze-NumberInputCore__btnMd", d = "haze-NumberInputCore__btnLg", f = {
-	sm: o,
-	md: s,
-	lg: c
-}, p = {
-	sm: l,
-	md: u,
-	lg: d
+var i = "haze-NumberInputCore__wrapper", a = "haze-NumberInputCore__input", o = "haze-NumberInputCore__stepBtn", s = "haze-NumberInputCore__inputSm", c = "haze-NumberInputCore__inputMd", l = "haze-NumberInputCore__inputLg", u = "haze-NumberInputCore__btnSm", d = "haze-NumberInputCore__btnMd", f = "haze-NumberInputCore__btnLg", p = {
+	sm: s,
+	md: c,
+	lg: l
+}, m = {
+	sm: u,
+	md: d,
+	lg: f
 };
-function m({ value: o, onChange: s, onNativeChange: c, min: l, max: u, step: d = 1, size: m = "md", className: h, ...g }) {
-	let _ = (e) => {
+function h({ value: s, onChange: c, onNativeChange: l, min: u, max: d, step: f = 1, size: h = "md", className: g, ..._ }) {
+	let v = t("numberInput"), y = (e) => {
 		let t = Math.round(e * 1e10) / 1e10;
-		return l !== void 0 && t < l ? l : u !== void 0 && t > u ? u : t;
+		return u !== void 0 && t < u ? u : d !== void 0 && t > d ? d : t;
 	};
-	return /* @__PURE__ */ n("div", {
-		className: e([r, h]),
+	return /* @__PURE__ */ r("div", {
+		className: e([i, g]),
 		children: [
-			/* @__PURE__ */ t("button", {
+			/* @__PURE__ */ n("button", {
 				type: "button",
-				onClick: () => s(_(o - d)),
-				disabled: l !== void 0 && o <= l,
-				"aria-label": "Decrease",
-				className: e([a, p[m]]),
+				onClick: () => c(y(s - f)),
+				disabled: u !== void 0 && s <= u,
+				"aria-label": v.decrease,
+				className: e([o, m[h]]),
 				children: "−"
 			}),
-			/* @__PURE__ */ t("input", {
+			/* @__PURE__ */ n("input", {
 				type: "number",
-				value: o,
-				min: l,
-				max: u,
-				step: d,
+				value: s,
+				min: u,
+				max: d,
+				step: f,
 				onChange: (e) => {
 					let t = Number(e.target.value);
-					Number.isNaN(t) || s(_(t)), c?.(e);
+					Number.isNaN(t) || c(y(t)), l?.(e);
 				},
-				...g,
-				className: e([i, f[m]])
+				..._,
+				className: e([a, p[h]])
 			}),
-			/* @__PURE__ */ t("button", {
+			/* @__PURE__ */ n("button", {
 				type: "button",
-				onClick: () => s(_(o + d)),
-				disabled: u !== void 0 && o >= u,
-				"aria-label": "Increase",
-				className: e([a, p[m]]),
+				onClick: () => c(y(s + f)),
+				disabled: d !== void 0 && s >= d,
+				"aria-label": v.increase,
+				className: e([o, m[h]]),
 				children: "+"
 			})
 		]
 	});
 }
 //#endregion
-export { m as default };
+export { h as default };

package/dist/components/NumberInput/index.js

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

package/dist/components/OTPInput/OTPInput.js

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

package/dist/components/OTPInput/OTPInputCore.js

@@ -1,44 +1,50 @@
 
+"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 } from "react/jsx-runtime";
-import { useCallback as n, useRef as r } from "react";
+import { jsx as r } from "react/jsx-runtime";
+import { useCallback as i, useRef as a } from "react";
 //#region src/lib/components/OTPInput/OTPInputCore.tsx
-var i = "haze-OTPInputCore__container", a = "haze-OTPInputCore__cell";
-function o({ length: o = 6, value: s, onChange: c, className: l }) {
-	let u = r([]), d = n((e, t) => {
-		let n = s.split("");
-		n[e] = t.slice(-1), c(n.join("").slice(0, o)), t && e < o - 1 && u.current[e + 1]?.focus();
+var o = "haze-OTPInputCore__container", s = "haze-OTPInputCore__cell";
+function c({ length: c = 6, value: l, onChange: u, className: d }) {
+	let f = a([]), p = n("otpInput"), m = i((e, t) => {
+		let n = l.split("");
+		n[e] = t.slice(-1), u(n.join("").slice(0, c)), t && e < c - 1 && f.current[e + 1]?.focus();
 	}, [
-		s,
-		o,
-		c
-	]), f = n((e, t) => {
-		t.key === "Backspace" && !s[e] && e > 0 && u.current[e - 1]?.focus();
-	}, [s]), p = n((e) => {
+		l,
+		c,
+		u
+	]), h = i((e, t) => {
+		t.key === "Backspace" && !l[e] && e > 0 && f.current[e - 1]?.focus();
+	}, [l]), g = i((e) => {
 		e.preventDefault();
-		let t = e.clipboardData.getData("text").slice(0, o);
-		c(t);
-		let n = Math.min(t.length, o - 1);
-		u.current[n]?.focus();
-	}, [o, c]);
-	return /* @__PURE__ */ t("div", {
-		className: e([i, l]),
-		children: Array.from({ length: o }, (n, r) => /* @__PURE__ */ t("input", {
+		let t = e.clipboardData.getData("text").slice(0, c);
+		u(t);
+		let n = Math.min(t.length, c - 1);
+		f.current[n]?.focus();
+	}, [c, u]);
+	return /* @__PURE__ */ r("div", {
+		className: e([o, d]),
+		children: Array.from({ length: c }, (n, i) => /* @__PURE__ */ r("input", {
 			ref: (e) => {
-				u.current[r] = e;
+				f.current[i] = e;
 			},
 			type: "text",
 			inputMode: "numeric",
 			maxLength: 1,
-			"aria-label": `Digit ${r + 1} of ${o}`,
-			value: s[r] ?? "",
-			onChange: (e) => d(r, e.target.value),
-			onKeyDown: (e) => f(r, e),
-			onPaste: p,
-			className: e([a])
-		}, r))
+			"aria-label": t(p.digitLabel, {
+				index: i + 1,
+				total: c
+			}),
+			value: l[i] ?? "",
+			onChange: (e) => m(i, e.target.value),
+			onKeyDown: (e) => h(i, e),
+			onPaste: g,
+			className: e([s])
+		}, i))
 	});
 }
 //#endregion
-export { o as default };
+export { c as default };

package/dist/components/OTPInput/index.js

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

package/dist/components/Pagination/Pagination.js

@@ -1,59 +1,61 @@
 
+"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 { useControl as r } from "react-use-control";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { useControl as i } from "react-use-control";
 //#region src/lib/components/Pagination/Pagination.tsx
-var i = "haze-Pagination__nav", a = "haze-Pagination__btn", o = "haze-Pagination__activeBtn", s = "haze-Pagination__ellipsis", c = {
+var a = "haze-Pagination__nav", o = "haze-Pagination__btn", s = "haze-Pagination__activeBtn", c = "haze-Pagination__ellipsis", l = {
 	sm: "haze-Pagination__sm",
 	md: "haze-Pagination__md",
 	lg: "haze-Pagination__lg"
 };
-function l(e, t) {
+function u(e, t) {
 	if (t <= 7) return Array.from({ length: t }, (e, t) => t + 1);
 	let n = [1];
 	e > 3 && n.push("...");
 	for (let r = Math.max(2, e - 1); r <= Math.min(t - 1, e + 1); r++) n.push(r);
 	return e < t - 2 && n.push("..."), n.push(t), n;
 }
-function u({ page: u, total: d, pageSize: f = 10, size: p = "md", className: m, ...h }) {
-	let [g, _] = r(u, 1), v = Math.max(1, Math.ceil(d / f)), y = l(g, v);
-	return /* @__PURE__ */ n("nav", {
-		...h,
+function d({ page: d, total: f, pageSize: p = 10, size: m = "md", className: h, ...g }) {
+	let [_, v] = i(d, 1), y = t("pagination"), b = Math.max(1, Math.ceil(f / p)), x = u(_, b);
+	return /* @__PURE__ */ r("nav", {
+		...g,
 		className: e([
-			i,
-			c[p],
-			m
+			a,
+			l[m],
+			h
 		]),
 		children: [
-			/* @__PURE__ */ t("button", {
+			/* @__PURE__ */ n("button", {
 				type: "button",
-				disabled: g <= 1,
-				onClick: () => _((e) => Math.max(1, e - 1)),
-				"aria-label": "Previous",
-				className: e([a]),
+				disabled: _ <= 1,
+				onClick: () => v((e) => Math.max(1, e - 1)),
+				"aria-label": y.previous,
+				className: e([o]),
 				children: "‹"
 			}),
-			y.map((n, r) => n === "..." ? /* @__PURE__ */ t("span", {
-				className: e([s]),
+			x.map((t, r) => t === "..." ? /* @__PURE__ */ n("span", {
+				className: e([c]),
 				children: "…"
-			}, `e${r}`) : /* @__PURE__ */ t("button", {
+			}, `e${r}`) : /* @__PURE__ */ n("button", {
 				type: "button",
-				"aria-current": n === g ? "page" : void 0,
-				onClick: () => _(n),
-				className: e([a, n === g && o]),
-				children: n
-			}, n)),
-			/* @__PURE__ */ t("button", {
+				"aria-current": t === _ ? "page" : void 0,
+				onClick: () => v(t),
+				className: e([o, t === _ && s]),
+				children: t
+			}, t)),
+			/* @__PURE__ */ n("button", {
 				type: "button",
-				disabled: g >= v,
-				onClick: () => _((e) => Math.min(v, e + 1)),
-				"aria-label": "Next",
-				className: e([a]),
+				disabled: _ >= b,
+				onClick: () => v((e) => Math.min(b, e + 1)),
+				"aria-label": y.next,
+				className: e([o]),
 				children: "›"
 			})
 		]
 	});
 }
 //#endregion
-export { u as default };
+export { d as default };

package/dist/components/Pagination/index.js

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

package/dist/components/PasswordInput/PasswordInput.js

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

package/dist/components/PasswordInput/PasswordInputCore.js

@@ -1,31 +1,33 @@
 
+"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 { useState as r } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { useState as i } from "react";
 //#region src/lib/components/PasswordInput/PasswordInputCore.tsx
-var i = "haze-PasswordInputCore__wrapper", a = "haze-PasswordInputCore__input", o = "haze-PasswordInputCore__toggle";
-function s({ value: s, onChange: c, placeholder: l, disabled: u, className: d }) {
-	let [f, p] = r(!1);
-	return /* @__PURE__ */ n("div", {
-		className: e([i, d]),
-		children: [/* @__PURE__ */ t("input", {
-			type: f ? "text" : "password",
-			"aria-label": "Password",
-			value: s,
-			onChange: (e) => c(e.target.value),
-			placeholder: l,
-			disabled: u,
-			className: e([a])
-		}), /* @__PURE__ */ t("button", {
+var a = "haze-PasswordInputCore__wrapper", o = "haze-PasswordInputCore__input", s = "haze-PasswordInputCore__toggle";
+function c({ value: c, onChange: l, placeholder: u, disabled: d, className: f }) {
+	let [p, m] = i(!1), h = t("passwordInput");
+	return /* @__PURE__ */ r("div", {
+		className: e([a, f]),
+		children: [/* @__PURE__ */ n("input", {
+			type: p ? "text" : "password",
+			"aria-label": h.label,
+			value: c,
+			onChange: (e) => l(e.target.value),
+			placeholder: u,
+			disabled: d,
+			className: e([o])
+		}), /* @__PURE__ */ n("button", {
 			type: "button",
-			onClick: () => p(!f),
+			onClick: () => m(!p),
 			tabIndex: -1,
-			"aria-label": f ? "Hide password" : "Show password",
-			className: e([o]),
-			children: f ? "🙈" : "👁"
+			"aria-label": p ? h.hide : h.show,
+			className: e([s]),
+			children: p ? "🙈" : "👁"
 		})]
 	});
 }
 //#endregion
-export { s as default };
+export { c as default };

package/dist/components/PasswordInput/index.js

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

package/dist/components/Popover/Popover.js

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

package/dist/components/Popover/index.js

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

package/dist/components/Progress/Progress.js

@@ -1,86 +1,88 @@
 
+"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/Progress/Progress.tsx
-var r = "haze-Progress__barBase", i = {
+var i = "haze-Progress__barBase", a = {
 	sm: "haze-Progress__sm",
 	md: "haze-Progress__md",
 	lg: "haze-Progress__lg"
-}, a = "haze-Progress__barFill", o = {
+}, o = "haze-Progress__barFill", s = {
 	primary: "haze-Progress__primary",
 	success: "haze-Progress__success",
 	warning: "haze-Progress__warning",
 	danger: "haze-Progress__danger"
-}, s = "haze-Progress__circleBase", c = {
+}, c = "haze-Progress__circleBase", l = {
 	sm: "haze-Progress__sm",
 	md: "haze-Progress__md",
 	lg: "haze-Progress__lg"
-}, l = "haze-Progress__circleBg", u = "haze-Progress__circleFill", d = {
+}, u = "haze-Progress__circleBg", d = "haze-Progress__circleFill", f = {
 	primary: "haze-Progress__primary",
 	success: "haze-Progress__success",
 	warning: "haze-Progress__warning",
 	danger: "haze-Progress__danger"
-}, f = {
+}, p = {
 	sm: 3,
 	md: 4,
 	lg: 5
-}, p = {
+}, m = {
 	sm: 13,
 	md: 20,
 	lg: 27
 };
-function m({ value: m = 0, variant: h = "bar", size: g = "md", color: _ = "primary", className: v }) {
-	let y = Math.max(0, Math.min(100, m));
-	if (h === "circle") {
-		let r = p[g], i = f[g], a = 2 * Math.PI * r, o = a - y / 100 * a;
-		return /* @__PURE__ */ t("div", {
+function h({ value: h = 0, variant: g = "bar", size: _ = "md", color: v = "primary", className: y }) {
+	let b = Math.max(0, Math.min(100, h)), x = t("progress");
+	if (g === "circle") {
+		let t = m[_], i = p[_], a = 2 * Math.PI * t, o = a - b / 100 * a;
+		return /* @__PURE__ */ n("div", {
 			role: "progressbar",
-			"aria-label": "Progress",
+			"aria-label": x.label,
 			"aria-valuemin": 0,
 			"aria-valuemax": 100,
-			"aria-valuenow": y,
+			"aria-valuenow": b,
 			className: e([
-				s,
-				c[g],
-				v
+				c,
+				l[_],
+				y
 			]),
-			children: n("svg", {
-				viewBox: `0 0 ${(r + i) * 2} ${(r + i) * 2}`,
-				children: [/* @__PURE__ */ t("circle", {
-					cx: r + i,
-					cy: r + i,
-					r,
+			children: r("svg", {
+				viewBox: `0 0 ${(t + i) * 2} ${(t + i) * 2}`,
+				children: [/* @__PURE__ */ n("circle", {
+					cx: t + i,
+					cy: t + i,
+					r: t,
 					strokeWidth: i,
-					className: e([l])
-				}), /* @__PURE__ */ t("circle", {
-					cx: r + i,
-					cy: r + i,
-					r,
+					className: e([u])
+				}), /* @__PURE__ */ n("circle", {
+					cx: t + i,
+					cy: t + i,
+					r: t,
 					strokeWidth: i,
 					strokeDasharray: a,
 					strokeDashoffset: o,
-					className: e([u, d[_]])
+					className: e([d, f[v]])
 				})]
 			})
 		});
 	}
-	return /* @__PURE__ */ t("div", {
+	return /* @__PURE__ */ n("div", {
 		role: "progressbar",
-		"aria-label": "Progress",
+		"aria-label": x.label,
 		"aria-valuemin": 0,
 		"aria-valuemax": 100,
-		"aria-valuenow": y,
+		"aria-valuenow": b,
 		className: e([
-			r,
-			i[g],
-			v
+			i,
+			a[_],
+			y
 		]),
-		children: t("div", {
-			style: { width: `${y}%` },
-			className: e([a, o[_]])
+		children: n("div", {
+			style: { width: `${b}%` },
+			className: e([o, s[v]])
 		})
 	});
 }
 //#endregion
-export { m as default };
+export { h as default };

package/dist/components/Progress/index.js

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

package/dist/components/Radio/Radio.js

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

package/dist/components/Radio/RadioContext.js

@@ -1,3 +1,4 @@
+"use client";
 import { createContext as e, useContext as t } from "react";
 //#region src/lib/components/Radio/RadioContext.ts
 var n = e(void 0), r = n.Provider;

package/dist/components/Radio/RadioGroup.js

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