haze-ui 1.26.0 → 1.27.0

package/dist/components/Chart/chart-elements.js

@@ -0,0 +1,88 @@
+"use client";
+import { Fragment as e, jsx as t, jsxs as n } from "react/jsx-runtime";
+import { Area as r, AreaChart as i, Bar as a, BarChart as o, CartesianGrid as s, Legend as c, Line as l, LineChart as u, ResponsiveContainer as d, Tooltip as f, XAxis as p, YAxis as m } from "recharts";
+//#region src/lib/components/Chart/chart-elements.tsx
+var h = [
+	"var(--haze-color-primary)",
+	"var(--haze-color-info)",
+	"var(--haze-color-success)",
+	"var(--haze-color-warning)",
+	"var(--haze-color-danger)"
+], g = "var(--haze-color-border)", _ = {
+	fontSize: "var(--haze-text-sm)",
+	fill: "var(--haze-color-text-secondary)"
+}, v = {
+	fontSize: "var(--haze-text-sm)",
+	color: "var(--haze-color-text)"
+}, y = { fontSize: "var(--haze-text-sm)" };
+function b(e) {
+	return e.map((e, t) => ({
+		key: e.key,
+		label: e.label ?? e.key,
+		color: e.color ?? h[t % h.length]
+	}));
+}
+function x(e, n) {
+	let { key: i, label: o, color: s } = n;
+	switch (e) {
+		case "area": return /* @__PURE__ */ t(r, {
+			dataKey: i,
+			name: o,
+			stroke: s,
+			fill: s
+		}, i);
+		case "bar": return /* @__PURE__ */ t(a, {
+			dataKey: i,
+			name: o,
+			fill: s
+		}, i);
+		case "line": return /* @__PURE__ */ t(l, {
+			dataKey: i,
+			name: o,
+			stroke: s
+		}, i);
+	}
+}
+function S(e, n, r) {
+	switch (e) {
+		case "area": return /* @__PURE__ */ t(i, {
+			data: n,
+			children: r
+		});
+		case "bar": return /* @__PURE__ */ t(o, {
+			data: n,
+			children: r
+		});
+		case "line": return /* @__PURE__ */ t(u, {
+			data: n,
+			children: r
+		});
+	}
+}
+function C(r) {
+	let { type: i, data: a, xKey: o, showGrid: l, showTooltip: u, showLegend: h, series: b } = r;
+	return /* @__PURE__ */ t(d, {
+		width: "100%",
+		height: "100%",
+		children: S(i, a, /* @__PURE__ */ n(e, { children: [
+			l && /* @__PURE__ */ t(s, { stroke: "var(--haze-color-border)" }),
+			/* @__PURE__ */ t(p, {
+				dataKey: o,
+				stroke: g,
+				tick: _
+			}),
+			/* @__PURE__ */ t(m, {
+				stroke: g,
+				tick: _
+			}),
+			u && /* @__PURE__ */ t(f, {
+				cursor: { stroke: "var(--haze-color-border)" },
+				contentStyle: v
+			}),
+			h && /* @__PURE__ */ t(c, { wrapperStyle: y }),
+			b.map((e) => x(i, e))
+		] }))
+	});
+}
+//#endregion
+export { g as AXIS_STROKE, _ as AXIS_TICK, y as LEGEND_STYLE, v as TOOLTIP_STYLE, S as chartElement, C as chartTree, b as resolveChartSeries, x as seriesElement };

package/dist/components/Chart/index.js

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

package/dist/components/ChatContainer/ChatContainer.js

@@ -1,27 +1,47 @@
 
 "use client";
 import { classnames as e } from "../../utils/classnames.js";
+import { useStrings as t } from "../LocaleProvider/useStrings.js";
 /* empty css                        */
-import { jsx as t } from "react/jsx-runtime";
-import { useEffect as n, useRef as r } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { useCallback as i, useEffect as a, useRef as o, useState as s } from "react";
 //#region src/lib/components/ChatContainer/ChatContainer.tsx
-var i = "haze-ChatContainer__container";
-function a({ children: a, autoScroll: o = !0, className: s }) {
-	let c = r(null);
-	return n(() => {
-		if (!o || !c.current) return;
-		let e = c.current, t = new MutationObserver(() => {
-			e.scrollTop = e.scrollHeight;
+var c = 40, l = "haze-ChatContainer__container", u = "haze-ChatContainer__jumpPill";
+function d({ children: d, autoScroll: f = !0, unreadLabel: p, className: m, ...h }) {
+	let g = o(null), [_, v] = s(!1), y = o(!0), b = t("chat"), x = i(() => {
+		let e = g.current;
+		e && (y.current = !0, e.scrollTop = e.scrollHeight, v(!1));
+	}, []);
+	return a(() => {
+		let e = g.current;
+		if (!e || !f) return;
+		let t = () => e.scrollHeight - e.scrollTop - e.clientHeight, n = () => {
+			y.current = t() < c, y.current && v(!1);
+		};
+		e.addEventListener("scroll", n, { passive: !0 }), y.current = !0, e.scrollTop = e.scrollHeight;
+		let r = new MutationObserver(() => {
+			y.current ? e.scrollTop = e.scrollHeight : v(!0);
 		});
-		return t.observe(e, {
+		return r.observe(e, {
 			childList: !0,
 			subtree: !0
-		}), e.scrollTop = e.scrollHeight, () => t.disconnect();
-	}, [o]), /* @__PURE__ */ t("div", {
-		ref: c,
-		className: e([i, s]),
-		children: a
+		}), () => {
+			e.removeEventListener("scroll", n), r.disconnect();
+		};
+	}, [f]), /* @__PURE__ */ r("div", {
+		ref: g,
+		...h,
+		className: e([l, m]),
+		children: [d, f && _ && /* @__PURE__ */ r("button", {
+			type: "button",
+			onClick: x,
+			className: e([u]),
+			children: [/* @__PURE__ */ n("span", {
+				"aria-hidden": "true",
+				children: "↓"
+			}), p ?? b.newMessages]
+		})]
 	});
 }
 //#endregion
-export { a as default };
+export { d as default };

package/dist/components/ChatInput/ChatInput.js

@@ -3,46 +3,66 @@
 import { classnames as e } from "../../utils/classnames.js";
 import { useStrings as t } from "../LocaleProvider/useStrings.js";
 /* empty css                    */
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
-import { useCallback as i, useRef as a } from "react";
-import { useControl as o } from "react-use-control";
+import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
+import { useCallback as a, useRef as o } from "react";
+import { useControl as s } from "react-use-control";
 //#region src/lib/components/ChatInput/ChatInput.tsx
-var s = "haze-ChatInput__wrapper", c = "haze-ChatInput__textarea", l = "haze-ChatInput__sendBtn";
-function u({ value: u, onSend: d, placeholder: f, disabled: p, maxLength: m, className: h }) {
-	let [g, _] = o(u, ""), v = a(null), y = t("chatInput"), b = f ?? y.placeholder, x = i(() => {
-		let e = g.trim();
-		e && !p && (d?.(e), _(""), v.current && (v.current.style.height = "auto"));
+var c = "haze-ChatInput__wrapper", l = "haze-ChatInput__textarea", u = "haze-ChatInput__sendBtn", d = () => /* @__PURE__ */ r("svg", {
+	width: "12",
+	height: "12",
+	viewBox: "0 0 12 12",
+	fill: "currentColor",
+	"aria-hidden": "true",
+	focusable: "false",
+	children: r("rect", {
+		x: "2",
+		y: "2",
+		width: "8",
+		height: "8",
+		rx: "1.5"
+	})
+});
+function f({ value: f, onSend: p, generating: m = !1, onStop: h, placeholder: g, disabled: _, maxLength: v, className: y }) {
+	let [b, x] = s(f, ""), S = o(null), C = t("chatInput"), w = t("chat"), T = g ?? C.placeholder, E = a(() => {
+		if (m) {
+			h?.();
+			return;
+		}
+		let e = b.trim();
+		e && !_ && (p?.(e), x(""), S.current && (S.current.style.height = "auto"));
 	}, [
-		g,
+		m,
+		h,
+		b,
+		_,
 		p,
-		d,
-		_
+		x
 	]);
-	return /* @__PURE__ */ r("div", {
-		className: e([s, h]),
-		children: [/* @__PURE__ */ n("textarea", {
-			ref: v,
-			value: g,
+	return /* @__PURE__ */ i("div", {
+		className: e([c, y]),
+		children: [/* @__PURE__ */ r("textarea", {
+			ref: S,
+			value: b,
 			onChange: (e) => {
-				_(e.target.value), v.current && (v.current.style.height = "auto", v.current.style.height = `${v.current.scrollHeight}px`);
+				x(e.target.value), S.current && (S.current.style.height = "auto", S.current.style.height = `${S.current.scrollHeight}px`);
 			},
 			onKeyDown: (e) => {
-				e.key === "Enter" && !e.shiftKey && (e.preventDefault(), x());
+				e.key === "Enter" && !e.shiftKey && (e.preventDefault(), E());
 			},
-			placeholder: b,
-			disabled: p,
-			maxLength: m,
+			placeholder: T,
+			disabled: _,
+			maxLength: v,
 			rows: 1,
-			className: e([c])
-		}), /* @__PURE__ */ n("button", {
+			className: e([l])
+		}), /* @__PURE__ */ r("button", {
 			type: "button",
-			onClick: x,
-			disabled: p || !g.trim(),
-			"aria-label": y.send,
-			className: e([l]),
-			children: "↑"
+			onClick: E,
+			disabled: _ || !m && !b.trim(),
+			"aria-label": m ? w.stopGeneration : C.send,
+			className: e([u]),
+			children: m ? /* @__PURE__ */ r(d, {}) : /* @__PURE__ */ r(n, { children: "↑" })
 		})]
 	});
 }
 //#endregion
-export { u as default };
+export { f as default };

package/dist/components/ChatMessage/ChatMessage.js

@@ -2,42 +2,89 @@
 "use client";
 import { classnames as e } from "../../utils/classnames.js";
 import { useStrings as t } from "../LocaleProvider/useStrings.js";
+import { useClipboard as n } from "../../hooks/useClipboard.js";
 /* empty css                      */
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { useRef as a } from "react";
 //#region src/lib/components/ChatMessage/ChatMessage.tsx
-var i = "haze-ChatMessage__wrapper", a = "haze-ChatMessage__wrapperUser", o = "haze-ChatMessage__avatarSlot", s = "haze-ChatMessage__body", c = "haze-ChatMessage__header", l = "haze-ChatMessage__headerUser", u = "haze-ChatMessage__bubble", d = "haze-ChatMessage__bubbleUser", f = "haze-ChatMessage__bubbleAssistant", p = "haze-ChatMessage__bubbleSystem", m = "haze-ChatMessage__statusText", h = "haze-ChatMessage__statusError", g = {
-	user: d,
-	assistant: f,
-	system: p
-};
-function _({ role: d, avatar: f, name: p, timestamp: _, status: v, children: y, className: b }) {
-	let x = d === "user", S = t("chatMessage");
-	return /* @__PURE__ */ r("div", {
+var o = 1500, s = "haze-ChatMessage__actionsRow", c = "haze-ChatMessage__wrapper", l = "haze-ChatMessage__wrapperUser", u = "haze-ChatMessage__avatarSlot", d = "haze-ChatMessage__body", f = "haze-ChatMessage__header", p = "haze-ChatMessage__headerUser", m = "haze-ChatMessage__bubble", h = "haze-ChatMessage__bubbleUser", g = "haze-ChatMessage__bubbleAssistant", _ = "haze-ChatMessage__bubbleSystem", v = "haze-ChatMessage__statusText", y = "haze-ChatMessage__statusError", b = "haze-ChatMessage__actionBtn", x = "haze-ChatMessage__actionBtnCopied", S = {
+	user: h,
+	assistant: g,
+	system: _
+}, C = () => /* @__PURE__ */ i("svg", {
+	width: "14",
+	height: "14",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	"aria-hidden": "true",
+	focusable: "false",
+	children: [/* @__PURE__ */ r("rect", {
+		x: "9",
+		y: "9",
+		width: "13",
+		height: "13",
+		rx: "2",
+		ry: "2"
+	}), /* @__PURE__ */ r("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })]
+}), w = () => /* @__PURE__ */ r("svg", {
+	width: "14",
+	height: "14",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	"aria-hidden": "true",
+	focusable: "false",
+	children: r("path", { d: "M20 6 9 17l-5-5" })
+});
+function T({ role: h, avatar: g, name: _, timestamp: T, status: E, copyable: D = !1, actions: O, children: k, className: A }) {
+	let j = h === "user", M = t("chatMessage"), N = t("chat"), P = a(null), { copied: F, copy: I } = n(o), L = D || O !== void 0;
+	return /* @__PURE__ */ i("div", {
+		"data-chat-actions": L ? !0 : void 0,
 		className: e([
-			i,
-			x && a,
-			b
+			c,
+			j && l,
+			A
 		]),
-		children: [d !== "system" && /* @__PURE__ */ n("div", {
-			className: e([o]),
-			children: f || (d === "user" ? "U" : "A")
-		}), /* @__PURE__ */ r("div", {
-			className: e([s]),
+		children: [h !== "system" && /* @__PURE__ */ r("div", {
+			className: e([u]),
+			children: g || (h === "user" ? "U" : "A")
+		}), /* @__PURE__ */ i("div", {
+			className: e([d]),
 			children: [
-				(p || _) && /* @__PURE__ */ r("div", {
-					className: e([c, x && l]),
-					children: [p && /* @__PURE__ */ n("span", { children: p }), _ && /* @__PURE__ */ n("span", { children: _ })]
+				(_ || T) && /* @__PURE__ */ i("div", {
+					className: e([f, j && p]),
+					children: [_ && /* @__PURE__ */ r("span", { children: _ }), T && /* @__PURE__ */ r("span", { children: T })]
 				}),
-				/* @__PURE__ */ n("div", {
-					className: e([u, g[d]]),
-					children: y
+				/* @__PURE__ */ r("div", {
+					ref: P,
+					className: e([m, S[h]]),
+					children: k
 				}),
-				v && /* @__PURE__ */ r("div", {
-					className: e([m, v === "error" && h]),
+				L && /* @__PURE__ */ i("div", {
+					className: e([s]),
+					children: [D && /* @__PURE__ */ r("button", {
+						type: "button",
+						onClick: () => {
+							I(P.current?.textContent ?? "");
+						},
+						"aria-label": N.copy,
+						className: e([b, F && x]),
+						children: r(F ? w : C, {})
+					}), O]
+				}),
+				E && /* @__PURE__ */ i("div", {
+					className: e([v, E === "error" && y]),
 					children: [
-						v === "sending" && S.sending,
-						v === "sent" && S.sent,
-						v === "error" && S.failedToSend
+						E === "sending" && M.sending,
+						E === "sent" && M.sent,
+						E === "error" && M.failedToSend
 					]
 				})
 			]
@@ -45,4 +92,4 @@ function _({ role: d, avatar: f, name: p, timestamp: _, status: v, children: y,
 	});
 }
 //#endregion
-export { _ as default };
+export { T as default };

package/dist/components/Checkbox/Checkbox.js

@@ -3,15 +3,16 @@ import e from "./CheckboxCore.js";
 import { jsx as t } from "react/jsx-runtime";
 import { useControl as n } from "react-use-control";
 //#region src/lib/components/Checkbox/Checkbox.tsx
-function r({ checked: r, className: i, label: a, onChange: o, ...s }) {
-	let [c, l] = n(r, !1);
+function r({ checked: r, className: i, label: a, onChange: o, ref: s, ...c }) {
+	let [l, u] = n(r, !1);
 	return /* @__PURE__ */ t(e, {
-		checked: c,
-		onChange: l,
+		ref: s,
+		checked: l,
+		onChange: u,
 		onNativeChange: o,
 		className: i,
 		label: a,
-		...s
+		...c
 	});
 }
 //#endregion

package/dist/components/Checkbox/CheckboxCore.js

@@ -5,19 +5,20 @@ import { classnames as e } from "../../utils/classnames.js";
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
 //#region src/lib/components/Checkbox/CheckboxCore.tsx
 var r = "haze-CheckboxCore__base", i = "haze-CheckboxCore__labelText";
-function a({ checked: a, onChange: o, onNativeChange: s, className: c, label: l, ...u }) {
-	let d = /* @__PURE__ */ t("input", {
+function a({ checked: a, onChange: o, onNativeChange: s, className: c, label: l, ref: u, ...d }) {
+	let f = /* @__PURE__ */ t("input", {
+		ref: u,
 		type: "checkbox",
 		checked: a,
 		onChange: (e) => {
 			o(e.target.checked), s?.(e);
 		},
-		...u,
+		...d,
 		className: e([r, c])
 	});
-	return l === void 0 ? d : /* @__PURE__ */ n("label", {
+	return l === void 0 ? f : /* @__PURE__ */ n("label", {
 		className: e(i),
-		children: [d, l]
+		children: [f, l]
 	});
 }
 //#endregion

package/dist/components/CodeBlock/CodeBlock.js

@@ -1,5 +1,4 @@
 
-"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/CodeBlock/index.js

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

package/dist/components/Collapsible/Collapsible.js

@@ -14,36 +14,49 @@ function s() {
 	return e;
 }
 var c = "haze-Collapsible__base";
-function l({ open: t, defaultOpen: r = !1, children: i, className: s }) {
-	let [l, u] = a(t, r);
+function l({ open: t, defaultOpen: r = !1, classNames: i, children: s, className: l }) {
+	let [u, d] = a(t, r);
 	return /* @__PURE__ */ n(o.Provider, {
 		value: {
-			open: l,
-			toggle: () => u((e) => !e)
+			open: u,
+			toggle: () => d((e) => !e),
+			classNames: i
 		},
 		children: n("div", {
-			className: e([c, s]),
-			children: i
+			className: e([
+				c,
+				l,
+				i?.root
+			]),
+			children: s
 		})
 	});
 }
 var u = "haze-Collapsible__triggerStyle";
 function d({ children: t, className: r }) {
-	let { toggle: i } = s();
+	let { toggle: i, classNames: a } = s();
 	return /* @__PURE__ */ n("button", {
 		type: "button",
 		onClick: i,
-		className: e([u, r]),
+		className: e([
+			u,
+			r,
+			a?.trigger
+		]),
 		children: t
 	});
 }
 var f = "haze-Collapsible__contentOuter", p = "haze-Collapsible__contentInner";
 function m({ children: r, className: i }) {
-	let { open: a } = s();
+	let { open: a, classNames: o } = s();
 	return /* @__PURE__ */ n(t, {
 		present: a,
 		children: n("div", {
-			className: e([f, i]),
+			className: e([
+				f,
+				i,
+				o?.content
+			]),
 			children: /* @__PURE__ */ n("div", {
 				className: e(p),
 				children: r

package/dist/components/ColorPicker/ColorPicker.js

@@ -3,12 +3,13 @@ import e from "./ColorPickerCore.js";
 import { jsx as t } from "react/jsx-runtime";
 import { useControl as n } from "react-use-control";
 //#region src/lib/components/ColorPicker/ColorPicker.tsx
-function r({ value: r, presets: i, onChange: a, className: o }) {
-	let [s, c] = n(r, "#000000");
+function r({ value: r, presets: i, onChange: a, className: o, ref: s }) {
+	let [c, l] = n(r, "#000000");
 	return /* @__PURE__ */ t(e, {
-		value: s,
+		ref: s,
+		value: c,
 		onChange: (e) => {
-			c(e), a?.(e);
+			l(e), a?.(e);
 		},
 		presets: i,
 		className: o

package/dist/components/ColorPicker/ColorPickerCore.js

@@ -6,22 +6,23 @@ import { useStrings as t } from "../LocaleProvider/useStrings.js";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/lib/components/ColorPicker/ColorPickerCore.tsx
 var i = "haze-ColorPickerCore__container", a = "haze-ColorPickerCore__previewRow", o = "haze-ColorPickerCore__colorInput", s = "haze-ColorPickerCore__textInput", c = "haze-ColorPickerCore__presetsRow", l = "haze-ColorPickerCore__presetBtn", u = "haze-ColorPickerCore__activePreset";
-function d({ value: d, onChange: f, presets: p, className: m }) {
-	let h = t("colorPicker");
+function d({ value: d, onChange: f, presets: p, className: m, ref: h }) {
+	let g = t("colorPicker");
 	return /* @__PURE__ */ r("div", {
 		className: e([i, m]),
 		children: [/* @__PURE__ */ r("div", {
 			className: e([a]),
 			children: [/* @__PURE__ */ n("input", {
+				ref: h,
 				type: "color",
 				value: d,
-				"aria-label": h.pickColor,
+				"aria-label": g.pickColor,
 				onChange: (e) => f(e.target.value),
 				className: e([o])
 			}), /* @__PURE__ */ n("input", {
 				type: "text",
 				value: d,
-				"aria-label": h.hexColor,
+				"aria-label": g.hexColor,
 				onChange: (e) => f(e.target.value),
 				className: e([s])
 			})]