haze-ui 1.26.0 → 1.28.0

package/dist/components/Chart/Chart.js

@@ -0,0 +1,34 @@
+
+"use client";
+import { classnames as e } from "../../utils/classnames.js";
+import { chartTree as t, resolveChartSeries as n } from "./chart-elements.js";
+/* empty css                */
+import { jsx as r } from "react/jsx-runtime";
+import { useMemo as i } from "react";
+//#region src/lib/components/Chart/Chart.tsx
+var a = "haze-Chart__root";
+function o({ type: o, data: s, series: c, xKey: l, height: u = 300, innerRadius: d = 0, layout: f = "horizontal", renderTooltip: p, showLegend: m = !1, showGrid: h = !0, showTooltip: g = !0, className: _, style: v, ...y }) {
+	let b = i(() => n(c), [c]);
+	return /* @__PURE__ */ r("div", {
+		style: {
+			height: u,
+			...v
+		},
+		...y,
+		className: e([a, _]),
+		children: t({
+			type: o,
+			data: s,
+			xKey: l,
+			showGrid: h,
+			showTooltip: g,
+			showLegend: m,
+			series: b,
+			layout: f,
+			innerRadius: d,
+			renderTooltip: p ? (e) => p(e) : void 0
+		})
+	});
+}
+//#endregion
+export { o as default };

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

@@ -0,0 +1,164 @@
+"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, Pie as d, PieChart as f, ResponsiveContainer as p, Tooltip as m, XAxis as h, YAxis as g } from "recharts";
+//#region src/lib/components/Chart/chart-elements.tsx
+var _ = [
+	"var(--haze-color-primary)",
+	"var(--haze-color-info)",
+	"var(--haze-color-success)",
+	"var(--haze-color-warning)",
+	"var(--haze-color-danger)"
+], v = "var(--haze-color-border)", y = {
+	fontSize: "var(--haze-text-sm)",
+	fill: "var(--haze-color-text-secondary)"
+}, b = {
+	fontSize: "var(--haze-text-sm)",
+	color: "var(--haze-color-text)"
+}, x = { fontSize: "var(--haze-text-sm)" };
+function S(e) {
+	return _[e % _.length];
+}
+function C(e) {
+	return e.map((e) => ({
+		key: e.key,
+		label: e.label ?? e.key,
+		color: e.color
+	}));
+}
+function w(e, n, i = 0) {
+	let { key: o, label: s } = n, c = n.color ?? S(i);
+	switch (e) {
+		case "area": return /* @__PURE__ */ t(r, {
+			dataKey: o,
+			name: s,
+			stroke: c,
+			fill: c
+		}, o);
+		case "bar": return /* @__PURE__ */ t(a, {
+			dataKey: o,
+			name: s,
+			fill: c
+		}, o);
+		case "line": return /* @__PURE__ */ t(l, {
+			dataKey: o,
+			name: s,
+			stroke: c
+		}, o);
+	}
+}
+function T(e, t, n) {
+	if (t <= 1) return {
+		innerRadius: n,
+		outerRadius: "80%"
+	};
+	let r = typeof n == "string" ? Number.parseFloat(n) : 0, i = Number.isFinite(r) ? Math.max(r, 0) : 0, a = (80 - i) / t;
+	return {
+		innerRadius: `${i + e * a}%`,
+		outerRadius: `${i + (e + 1) * a}%`
+	};
+}
+function E(e) {
+	let { entry: n, data: r, nameKey: i, ringIndex: a, ringCount: o, innerRadius: s } = e, c = T(a, o, s), l = r.map((e, t) => ({
+		...e,
+		fill: n.color ?? S(t)
+	}));
+	return /* @__PURE__ */ t(d, {
+		data: l,
+		dataKey: n.key,
+		nameKey: i,
+		innerRadius: c.innerRadius,
+		outerRadius: c.outerRadius,
+		stroke: "var(--haze-color-bg)"
+	}, n.key);
+}
+function D(e, n, r, a = "horizontal") {
+	switch (e) {
+		case "area": return /* @__PURE__ */ t(i, {
+			data: n,
+			layout: a,
+			children: r
+		});
+		case "bar": return /* @__PURE__ */ t(o, {
+			data: n,
+			layout: a,
+			children: r
+		});
+		case "line": return /* @__PURE__ */ t(u, {
+			data: n,
+			layout: a,
+			children: r
+		});
+		case "pie": return /* @__PURE__ */ t(f, {
+			data: n,
+			children: r
+		});
+	}
+}
+function O(e) {
+	return (t) => {
+		let { payload: n, label: r } = t;
+		return e({
+			label: r,
+			entries: (n ?? []).map((e) => ({
+				name: String(e.name ?? e.dataKey ?? ""),
+				value: e.value ?? "",
+				color: e.color ?? "",
+				dataEntry: e.payload
+			}))
+		});
+	};
+}
+function k(r) {
+	let { type: i, data: a, xKey: o, showGrid: l, showTooltip: u, showLegend: d, series: f, layout: _ = "horizontal", innerRadius: S = 0, renderTooltip: C } = r, T = C ? O(C) : void 0;
+	return i === "pie" ? /* @__PURE__ */ t(p, {
+		width: "100%",
+		height: "100%",
+		children: D(i, a, /* @__PURE__ */ n(e, { children: [
+			u && /* @__PURE__ */ t(m, {
+				contentStyle: b,
+				content: T
+			}),
+			d && /* @__PURE__ */ t(c, { wrapperStyle: x }),
+			f.map((e, t) => E({
+				entry: e,
+				data: a,
+				nameKey: o,
+				ringIndex: t,
+				ringCount: f.length,
+				innerRadius: S
+			}))
+		] }))
+	}) : /* @__PURE__ */ t(p, {
+		width: "100%",
+		height: "100%",
+		children: D(i, a, /* @__PURE__ */ n(e, { children: [
+			l && /* @__PURE__ */ t(s, { stroke: "var(--haze-color-border)" }),
+			_ === "vertical" ? /* @__PURE__ */ n(e, { children: [/* @__PURE__ */ t(h, {
+				type: "number",
+				stroke: v,
+				tick: y
+			}), /* @__PURE__ */ t(g, {
+				type: "category",
+				dataKey: o,
+				stroke: v,
+				tick: y
+			})] }) : /* @__PURE__ */ n(e, { children: [/* @__PURE__ */ t(h, {
+				dataKey: o,
+				stroke: v,
+				tick: y
+			}), /* @__PURE__ */ t(g, {
+				stroke: v,
+				tick: y
+			})] }),
+			u && /* @__PURE__ */ t(m, {
+				cursor: { stroke: "var(--haze-color-border)" },
+				contentStyle: b,
+				content: T
+			}),
+			d && /* @__PURE__ */ t(c, { wrapperStyle: x }),
+			f.map((e, t) => w(i, e, t))
+		] }), _)
+	});
+}
+//#endregion
+export { v as AXIS_STROKE, y as AXIS_TICK, x as LEGEND_STYLE, b as TOOLTIP_STYLE, O as buildTooltipContent, D as chartElement, k as chartTree, E as pieElement, T as pieRingRadii, C as resolveChartSeries, w 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,21 +1,50 @@
 
-"use client";
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                    */
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { useEffect as r, useMemo as i, useState as a } from "react";
 //#region src/lib/components/CodeBlock/CodeBlock.tsx
-var r = "haze-CodeBlock__block", i = "haze-CodeBlock__pre", a = "haze-CodeBlock__lang";
-function o({ children: o, language: s, className: c }) {
+var o = "haze-CodeBlock__block", s = "haze-CodeBlock__pre", c = "haze-CodeBlock__lang";
+function l({ children: l, language: u, highlight: d, className: f }) {
+	let p = typeof l == "string" ? l : void 0, m = i(() => {
+		if (d !== void 0 && p !== void 0) try {
+			return d(p, u ?? "");
+		} catch {
+			return;
+		}
+	}, [
+		d,
+		p,
+		u
+	]), h = m instanceof Promise ? m : void 0, [g, _] = a(null);
+	r(() => {
+		if (h === void 0) return;
+		let e = !0;
+		return h.then((t) => {
+			e && _({
+				pending: h,
+				html: t
+			});
+		}, () => {
+			e && _({
+				pending: h,
+				html: null
+			});
+		}), () => {
+			e = !1;
+		};
+	}, [h]);
+	let v = typeof m == "string" ? m : g !== null && g.pending === h ? g.html : null;
 	return /* @__PURE__ */ n("div", {
-		className: e([r, c]),
-		children: [s && /* @__PURE__ */ t("span", {
-			className: e([a]),
-			children: s
+		className: e([o, f]),
+		children: [u && /* @__PURE__ */ t("span", {
+			className: e([c]),
+			children: u
 		}), /* @__PURE__ */ t("pre", {
-			className: e([i]),
-			children: /* @__PURE__ */ t("code", { children: o })
+			className: e([s]),
+			children: v === null ? /* @__PURE__ */ t("code", { children: l }) : /* @__PURE__ */ t("code", { dangerouslySetInnerHTML: { __html: v } })
 		})]
 	});
 }
 //#endregion
-export { o as default };
+export { l as default };

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