haze-ui 1.28.0 → 1.30.0

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

@@ -1,52 +1,68 @@
 "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";
+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, PolarAngleAxis as p, PolarGrid as m, PolarRadiusAxis as h, Radar as g, RadarChart as _, ResponsiveContainer as v, Scatter as y, ScatterChart as b, Tooltip as x, XAxis as S, YAxis as C } from "recharts";
 //#region src/lib/components/Chart/chart-elements.tsx
-var _ = [
+var w = [
 	"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 = {
+], T = "var(--haze-color-border)", E = {
 	fontSize: "var(--haze-text-sm)",
 	fill: "var(--haze-color-text-secondary)"
-}, b = {
+}, D = {
 	fontSize: "var(--haze-text-sm)",
 	color: "var(--haze-color-text)"
-}, x = { fontSize: "var(--haze-text-sm)" };
-function S(e) {
-	return _[e % _.length];
+}, O = { fontSize: "var(--haze-text-sm)" };
+function k(e) {
+	return w[e % w.length];
 }
-function C(e) {
+function A(e) {
 	return e.map((e) => ({
 		key: e.key,
 		label: e.label ?? e.key,
-		color: e.color
+		color: e.color,
+		type: e.type,
+		stackId: e.stackId
 	}));
 }
-function w(e, n, i = 0) {
-	let { key: o, label: s } = n, c = n.color ?? S(i);
+function j(e, n, i = 0) {
+	let { key: o, label: s, stackId: c } = n, u = n.color ?? k(i);
 	switch (e) {
 		case "area": return /* @__PURE__ */ t(r, {
 			dataKey: o,
 			name: s,
-			stroke: c,
-			fill: c
+			stroke: u,
+			fill: u,
+			stackId: c
 		}, o);
 		case "bar": return /* @__PURE__ */ t(a, {
 			dataKey: o,
 			name: s,
-			fill: c
+			fill: u,
+			stackId: c
 		}, o);
 		case "line": return /* @__PURE__ */ t(l, {
 			dataKey: o,
 			name: s,
-			stroke: c
+			stroke: u
+		}, o);
+		case "radar": return /* @__PURE__ */ t(g, {
+			dataKey: o,
+			name: s,
+			stroke: u,
+			fill: u,
+			fillOpacity: .3
+		}, o);
+		case "scatter": return /* @__PURE__ */ t(y, {
+			dataKey: o,
+			name: s,
+			fill: u
 		}, o);
 	}
 }
-function T(e, t, n) {
+function M(e, t, n) {
 	if (t <= 1) return {
 		innerRadius: n,
 		outerRadius: "80%"
@@ -57,10 +73,10 @@ function T(e, t, n) {
 		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) => ({
+function N(e) {
+	let { entry: n, data: r, nameKey: i, ringIndex: a, ringCount: o, innerRadius: s } = e, c = M(a, o, s), l = r.map((e, t) => ({
 		...e,
-		fill: n.color ?? S(t)
+		fill: n.color ?? k(t)
 	}));
 	return /* @__PURE__ */ t(d, {
 		data: l,
@@ -71,7 +87,7 @@ function E(e) {
 		stroke: "var(--haze-color-bg)"
 	}, n.key);
 }
-function D(e, n, r, a = "horizontal") {
+function P(e, n, r, a = "horizontal") {
 	switch (e) {
 		case "area": return /* @__PURE__ */ t(i, {
 			data: n,
@@ -92,9 +108,17 @@ function D(e, n, r, a = "horizontal") {
 			data: n,
 			children: r
 		});
+		case "radar": return /* @__PURE__ */ t(_, {
+			data: n,
+			children: r
+		});
+		case "scatter": return /* @__PURE__ */ t(b, {
+			data: n,
+			children: r
+		});
 	}
 }
-function O(e) {
+function F(e) {
 	return (t) => {
 		let { payload: n, label: r } = t;
 		return e({
@@ -108,57 +132,98 @@ function O(e) {
 		});
 	};
 }
-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, {
+function I(r) {
+	let { type: i, data: a, xKey: o, showGrid: l, showTooltip: u, showLegend: d, series: f, layout: g = "horizontal", innerRadius: _ = 0, renderTooltip: y } = r, b = y ? F(y) : void 0;
+	return i === "pie" ? /* @__PURE__ */ t(v, {
 		width: "100%",
 		height: "100%",
-		children: D(i, a, /* @__PURE__ */ n(e, { children: [
-			u && /* @__PURE__ */ t(m, {
-				contentStyle: b,
-				content: T
+		children: P(i, a, /* @__PURE__ */ n(e, { children: [
+			u && /* @__PURE__ */ t(x, {
+				contentStyle: D,
+				content: b
 			}),
-			d && /* @__PURE__ */ t(c, { wrapperStyle: x }),
-			f.map((e, t) => E({
+			d && /* @__PURE__ */ t(c, { wrapperStyle: O }),
+			f.map((e, t) => N({
 				entry: e,
 				data: a,
 				nameKey: o,
 				ringIndex: t,
 				ringCount: f.length,
-				innerRadius: S
+				innerRadius: _
 			}))
 		] }))
-	}) : /* @__PURE__ */ t(p, {
+	}) : i === "radar" ? /* @__PURE__ */ t(v, {
+		width: "100%",
+		height: "100%",
+		children: P(i, a, /* @__PURE__ */ n(e, { children: [
+			l && /* @__PURE__ */ t(m, { stroke: "var(--haze-color-border)" }),
+			/* @__PURE__ */ t(p, {
+				dataKey: o,
+				tick: E
+			}),
+			/* @__PURE__ */ t(h, { tick: E }),
+			u && /* @__PURE__ */ t(x, {
+				contentStyle: D,
+				content: b
+			}),
+			d && /* @__PURE__ */ t(c, { wrapperStyle: O }),
+			f.map((e, t) => j("radar", e, t))
+		] }))
+	}) : i === "scatter" ? /* @__PURE__ */ t(v, {
+		width: "100%",
+		height: "100%",
+		children: P(i, a, /* @__PURE__ */ n(e, { children: [
+			l && /* @__PURE__ */ t(s, { stroke: "var(--haze-color-border)" }),
+			/* @__PURE__ */ t(S, {
+				type: "number",
+				dataKey: o,
+				stroke: T,
+				tick: E
+			}),
+			/* @__PURE__ */ t(C, {
+				type: "number",
+				stroke: T,
+				tick: E
+			}),
+			u && /* @__PURE__ */ t(x, {
+				cursor: { stroke: "var(--haze-color-border)" },
+				contentStyle: D,
+				content: b
+			}),
+			d && /* @__PURE__ */ t(c, { wrapperStyle: O }),
+			f.map((e, t) => j("scatter", e, t))
+		] }))
+	}) : /* @__PURE__ */ t(v, {
 		width: "100%",
 		height: "100%",
-		children: D(i, a, /* @__PURE__ */ n(e, { children: [
+		children: P(i, a, /* @__PURE__ */ n(e, { children: [
 			l && /* @__PURE__ */ t(s, { stroke: "var(--haze-color-border)" }),
-			_ === "vertical" ? /* @__PURE__ */ n(e, { children: [/* @__PURE__ */ t(h, {
+			g === "vertical" ? /* @__PURE__ */ n(e, { children: [/* @__PURE__ */ t(S, {
 				type: "number",
-				stroke: v,
-				tick: y
-			}), /* @__PURE__ */ t(g, {
+				stroke: T,
+				tick: E
+			}), /* @__PURE__ */ t(C, {
 				type: "category",
 				dataKey: o,
-				stroke: v,
-				tick: y
-			})] }) : /* @__PURE__ */ n(e, { children: [/* @__PURE__ */ t(h, {
+				stroke: T,
+				tick: E
+			})] }) : /* @__PURE__ */ n(e, { children: [/* @__PURE__ */ t(S, {
 				dataKey: o,
-				stroke: v,
-				tick: y
-			}), /* @__PURE__ */ t(g, {
-				stroke: v,
-				tick: y
+				stroke: T,
+				tick: E
+			}), /* @__PURE__ */ t(C, {
+				stroke: T,
+				tick: E
 			})] }),
-			u && /* @__PURE__ */ t(m, {
+			u && /* @__PURE__ */ t(x, {
 				cursor: { stroke: "var(--haze-color-border)" },
-				contentStyle: b,
-				content: T
+				contentStyle: D,
+				content: b
 			}),
-			d && /* @__PURE__ */ t(c, { wrapperStyle: x }),
-			f.map((e, t) => w(i, e, t))
-		] }), _)
+			d && /* @__PURE__ */ t(c, { wrapperStyle: O }),
+			f.map((e, t) => j(e.type ?? i, e, t))
+		] }), g)
 	});
 }
 //#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 };
+export { T as AXIS_STROKE, E as AXIS_TICK, O as LEGEND_STYLE, D as TOOLTIP_STYLE, F as buildTooltipContent, P as chartElement, I as chartTree, N as pieElement, M as pieRingRadii, A as resolveChartSeries, j as seriesElement };

package/dist/components/ChatContainer/ChatContainer.js

@@ -3,16 +3,16 @@
 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, useEffect as a, useRef as o, useState as s } from "react";
+import { useCallback as n, useEffect as r, useRef as i, useState as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region src/lib/components/ChatContainer/ChatContainer.tsx
 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 g = i(null), [_, v] = a(!1), y = i(!0), b = t("chat"), x = n(() => {
 		let e = g.current;
 		e && (y.current = !0, e.scrollTop = e.scrollHeight, v(!1));
 	}, []);
-	return a(() => {
+	return r(() => {
 		let e = g.current;
 		if (!e || !f) return;
 		let t = () => e.scrollHeight - e.scrollTop - e.clientHeight, n = () => {
@@ -28,15 +28,17 @@ function d({ children: d, autoScroll: f = !0, unreadLabel: p, className: m, ...h
 		}), () => {
 			e.removeEventListener("scroll", n), r.disconnect();
 		};
-	}, [f]), /* @__PURE__ */ r("div", {
+	}, [f]), /* @__PURE__ */ s("div", {
 		ref: g,
+		"data-slot": "chat-container",
 		...h,
 		className: e([l, m]),
-		children: [d, f && _ && /* @__PURE__ */ r("button", {
+		children: [d, f && _ && /* @__PURE__ */ s("button", {
 			type: "button",
+			"data-slot": "jump-button",
 			onClick: x,
 			className: e([u]),
-			children: [/* @__PURE__ */ n("span", {
+			children: [/* @__PURE__ */ o("span", {
 				"aria-hidden": "true",
 				children: "↓"
 			}), p ?? b.newMessages]

package/dist/components/ChatInput/ChatInput.js

@@ -3,18 +3,18 @@
 import { classnames as e } from "../../utils/classnames.js";
 import { useStrings as t } from "../LocaleProvider/useStrings.js";
 /* empty css                    */
-import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
-import { useCallback as a, useRef as o } from "react";
+import { useCallback as n, useRef as r } from "react";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
 import { useControl as s } from "react-use-control";
 //#region src/lib/components/ChatInput/ChatInput.tsx
-var c = "haze-ChatInput__wrapper", l = "haze-ChatInput__textarea", u = "haze-ChatInput__sendBtn", d = () => /* @__PURE__ */ r("svg", {
+var c = "haze-ChatInput__wrapper", l = "haze-ChatInput__textarea", u = "haze-ChatInput__sendBtn", d = () => /* @__PURE__ */ a("svg", {
 	width: "12",
 	height: "12",
 	viewBox: "0 0 12 12",
 	fill: "currentColor",
 	"aria-hidden": "true",
 	focusable: "false",
-	children: r("rect", {
+	children: a("rect", {
 		x: "2",
 		y: "2",
 		width: "8",
@@ -23,7 +23,7 @@ var c = "haze-ChatInput__wrapper", l = "haze-ChatInput__textarea", u = "haze-Cha
 	})
 });
 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(() => {
+	let [b, x] = s(f, ""), S = r(null), C = t("chatInput"), w = t("chat"), T = g ?? C.placeholder, E = n(() => {
 		if (m) {
 			h?.();
 			return;
@@ -38,10 +38,12 @@ function f({ value: f, onSend: p, generating: m = !1, onStop: h, placeholder: g,
 		p,
 		x
 	]);
-	return /* @__PURE__ */ i("div", {
+	return /* @__PURE__ */ o("div", {
+		"data-slot": "chat-input",
 		className: e([c, y]),
-		children: [/* @__PURE__ */ r("textarea", {
+		children: [/* @__PURE__ */ a("textarea", {
 			ref: S,
+			"data-slot": "input",
 			value: b,
 			onChange: (e) => {
 				x(e.target.value), S.current && (S.current.style.height = "auto", S.current.style.height = `${S.current.scrollHeight}px`);
@@ -54,13 +56,14 @@ function f({ value: f, onSend: p, generating: m = !1, onStop: h, placeholder: g,
 			maxLength: v,
 			rows: 1,
 			className: e([l])
-		}), /* @__PURE__ */ r("button", {
+		}), /* @__PURE__ */ a("button", {
+			"data-slot": m ? "stop-button" : "send-button",
 			type: "button",
 			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: "↑" })
+			children: m ? /* @__PURE__ */ a(d, {}) : /* @__PURE__ */ a(i, { children: "↑" })
 		})]
 	});
 }

package/dist/components/ChatMessage/ChatMessage.js

@@ -4,14 +4,22 @@ 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 r, jsxs as i } from "react/jsx-runtime";
-import { useRef as a } from "react";
+import { useEffect as r, useRef as i, useState as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region src/lib/components/ChatMessage/ChatMessage.tsx
-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", {
+var c = 1500, l = 1200, u = "haze-ChatMessage__actionsRow", d = "haze-ChatMessage__wrapper", f = "haze-ChatMessage__wrapperUser", p = "haze-ChatMessage__avatarSlot", m = "haze-ChatMessage__body", h = "haze-ChatMessage__header", g = "haze-ChatMessage__headerUser", _ = "haze-ChatMessage__bubble", v = "haze-ChatMessage__bubbleUser", y = "haze-ChatMessage__bubbleAssistant", b = "haze-ChatMessage__bubbleSystem", x = "haze-ChatMessage__statusText", S = "haze-ChatMessage__statusError", C = "haze-ChatMessage__actionBtn", w = "haze-ChatMessage__actionBtnCopied", T = "haze-ChatMessage__srOnly";
+function E(e) {
+	if (!e) return "";
+	if (e.querySelector("[data-slot='live-region']") === null) return e.textContent;
+	let t = e.cloneNode(!0);
+	for (let e of t.querySelectorAll("[data-slot='live-region']")) e.remove();
+	return t.textContent;
+}
+var D = {
+	user: v,
+	assistant: y,
+	system: b
+}, O = () => /* @__PURE__ */ s("svg", {
 	width: "14",
 	height: "14",
 	viewBox: "0 0 24 24",
@@ -22,15 +30,15 @@ var o = 1500, s = "haze-ChatMessage__actionsRow", c = "haze-ChatMessage__wrapper
 	strokeLinejoin: "round",
 	"aria-hidden": "true",
 	focusable: "false",
-	children: [/* @__PURE__ */ r("rect", {
+	children: [/* @__PURE__ */ o("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", {
+	}), /* @__PURE__ */ o("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })]
+}), k = () => /* @__PURE__ */ o("svg", {
 	width: "14",
 	height: "14",
 	viewBox: "0 0 24 24",
@@ -41,50 +49,81 @@ var o = 1500, s = "haze-ChatMessage__actionsRow", c = "haze-ChatMessage__wrapper
 	strokeLinejoin: "round",
 	"aria-hidden": "true",
 	focusable: "false",
-	children: r("path", { d: "M20 6 9 17l-5-5" })
+	children: o("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,
+function A({ role: v, avatar: y, name: b, timestamp: A, status: j, streaming: M = !1, copyable: N = !1, actions: P, children: F, className: I }) {
+	let L = v === "user", R = t("chatMessage"), z = t("chat"), B = t("streamingText"), V = i(null), { copied: H, copy: U } = n(c), W = N || P !== void 0, [G, K] = a(""), q = i(!1);
+	return r(() => {
+		if (!M) {
+			q.current && (q.current = !1, K(E(V.current)));
+			return;
+		}
+		q.current = !0, K(B.generating);
+		let e = setInterval(() => {
+			K(E(V.current));
+		}, l);
+		return () => clearInterval(e);
+	}, [M, B.generating]), /* @__PURE__ */ s("div", {
+		"data-slot": "chat-message",
+		"data-chat-actions": W ? !0 : void 0,
 		className: e([
-			c,
-			j && l,
-			A
+			d,
+			L && f,
+			I
 		]),
-		children: [h !== "system" && /* @__PURE__ */ r("div", {
-			className: e([u]),
-			children: g || (h === "user" ? "U" : "A")
-		}), /* @__PURE__ */ i("div", {
-			className: e([d]),
+		children: [v !== "system" && /* @__PURE__ */ o("div", {
+			"data-slot": "avatar",
+			className: e([p]),
+			children: y || (v === "user" ? "U" : "A")
+		}), /* @__PURE__ */ s("div", {
+			"data-slot": "body",
+			className: e([m]),
 			children: [
-				(_ || T) && /* @__PURE__ */ i("div", {
-					className: e([f, j && p]),
-					children: [_ && /* @__PURE__ */ r("span", { children: _ }), T && /* @__PURE__ */ r("span", { children: T })]
+				(b || A) && /* @__PURE__ */ s("div", {
+					"data-slot": "header",
+					className: e([h, L && g]),
+					children: [b && /* @__PURE__ */ o("span", {
+						"data-slot": "name",
+						children: b
+					}), A && /* @__PURE__ */ o("span", {
+						"data-slot": "timestamp",
+						children: A
+					})]
+				}),
+				/* @__PURE__ */ o("div", {
+					"data-slot": "bubble",
+					ref: V,
+					"aria-busy": M || void 0,
+					className: e([_, D[v]]),
+					children: F
 				}),
-				/* @__PURE__ */ r("div", {
-					ref: P,
-					className: e([m, S[h]]),
-					children: k
+				v === "assistant" && /* @__PURE__ */ o("span", {
+					"data-slot": "live-region",
+					role: "status",
+					className: e([T]),
+					children: G
 				}),
-				L && /* @__PURE__ */ i("div", {
-					className: e([s]),
-					children: [D && /* @__PURE__ */ r("button", {
+				W && /* @__PURE__ */ s("div", {
+					"data-slot": "actions",
+					className: e([u]),
+					children: [N && /* @__PURE__ */ o("button", {
 						type: "button",
+						"data-slot": "copy-button",
 						onClick: () => {
-							I(P.current?.textContent ?? "");
+							U(E(V.current));
 						},
-						"aria-label": N.copy,
-						className: e([b, F && x]),
-						children: r(F ? w : C, {})
-					}), O]
+						"aria-label": z.copy,
+						className: e([C, H && w]),
+						children: o(H ? k : O, {})
+					}), P]
 				}),
-				E && /* @__PURE__ */ i("div", {
-					className: e([v, E === "error" && y]),
+				j && /* @__PURE__ */ s("div", {
+					"data-slot": "status",
+					className: e([x, j === "error" && S]),
 					children: [
-						E === "sending" && M.sending,
-						E === "sent" && M.sent,
-						E === "error" && M.failedToSend
+						j === "sending" && R.sending,
+						j === "sent" && R.sent,
+						j === "error" && R.failedToSend
 					]
 				})
 			]
@@ -92,4 +131,4 @@ function T({ role: h, avatar: g, name: _, timestamp: T, status: E, copyable: D =
 	});
 }
 //#endregion
-export { T as default };
+export { A as default };

package/dist/components/Checkbox/CheckboxCore.js

@@ -9,6 +9,7 @@ function a({ checked: a, onChange: o, onNativeChange: s, className: c, label: l,
 	let f = /* @__PURE__ */ t("input", {
 		ref: u,
 		type: "checkbox",
+		"data-slot": "checkbox",
 		checked: a,
 		onChange: (e) => {
 			o(e.target.checked), s?.(e);
@@ -17,6 +18,7 @@ function a({ checked: a, onChange: o, onNativeChange: s, className: c, label: l,
 		className: e([r, c])
 	});
 	return l === void 0 ? f : /* @__PURE__ */ n("label", {
+		"data-slot": "label",
 		className: e(i),
 		children: [f, l]
 	});

package/dist/components/Chip/Chip.js

@@ -21,6 +21,7 @@ var i = "haze-Chip__base", a = {
 function l({ variant: l = "solid", color: u = "default", icon: d, onClose: f, className: p, children: m }) {
 	let h = t("chip"), g = l === "outline" ? o[u] : a[u];
 	return /* @__PURE__ */ r("span", {
+		"data-slot": "chip",
 		className: e([
 			i,
 			g,
@@ -28,11 +29,13 @@ function l({ variant: l = "solid", color: u = "default", icon: d, onClose: f, cl
 		]),
 		children: [
 			d && /* @__PURE__ */ n("span", {
+				"data-slot": "icon",
 				className: e([s]),
 				children: d
 			}),
 			m,
 			f && /* @__PURE__ */ n("button", {
+				"data-slot": "remove-button",
 				type: "button",
 				onClick: f,
 				"aria-label": h.remove,

package/dist/components/CodeBlock/CodeBlock.js

@@ -1,12 +1,12 @@
 
 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";
+import { useEffect as t, useMemo as n, useState as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/lib/components/CodeBlock/CodeBlock.tsx
 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(() => {
+	let p = typeof l == "string" ? l : void 0, m = n(() => {
 		if (d !== void 0 && p !== void 0) try {
 			return d(p, u ?? "");
 		} catch {
@@ -16,8 +16,8 @@ function l({ children: l, language: u, highlight: d, className: f }) {
 		d,
 		p,
 		u
-	]), h = m instanceof Promise ? m : void 0, [g, _] = a(null);
-	r(() => {
+	]), h = m instanceof Promise ? m : void 0, [g, _] = r(null);
+	t(() => {
 		if (h === void 0) return;
 		let e = !0;
 		return h.then((t) => {
@@ -35,14 +35,23 @@ function l({ children: l, language: u, highlight: d, className: f }) {
 		};
 	}, [h]);
 	let v = typeof m == "string" ? m : g !== null && g.pending === h ? g.html : null;
-	return /* @__PURE__ */ n("div", {
+	return /* @__PURE__ */ a("div", {
+		"data-slot": "code-block",
 		className: e([o, f]),
-		children: [u && /* @__PURE__ */ t("span", {
+		children: [u && /* @__PURE__ */ i("span", {
+			"data-slot": "language-label",
 			className: e([c]),
 			children: u
-		}), /* @__PURE__ */ t("pre", {
+		}), /* @__PURE__ */ i("pre", {
+			"data-slot": "code",
 			className: e([s]),
-			children: v === null ? /* @__PURE__ */ t("code", { children: l }) : /* @__PURE__ */ t("code", { dangerouslySetInnerHTML: { __html: v } })
+			children: v === null ? /* @__PURE__ */ i("code", {
+				"data-slot": "code-text",
+				children: l
+			}) : /* @__PURE__ */ i("code", {
+				"data-slot": "code-text",
+				dangerouslySetInnerHTML: { __html: v }
+			})
 		})]
 	});
 }