haze-ui 1.29.0 → 1.30.0

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 }
+			})
 		})]
 	});
 }

package/dist/components/Collapsible/Collapsible.js

@@ -3,63 +3,66 @@
 import { classnames as e } from "../../utils/classnames.js";
 import { Presence as t } from "../../utils/presence.js";
 /* empty css                      */
-import { jsx as n } from "react/jsx-runtime";
-import { createContext as r, useContext as i } from "react";
+import { createContext as n, useContext as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
 import { useControl as a } from "react-use-control";
 //#region src/lib/components/Collapsible/Collapsible.tsx
-var o = r(void 0);
+var o = n(void 0);
 function s() {
-	let e = i(o);
+	let e = r(o);
 	if (!e) throw Error("Collapsible sub-components must be used within <Collapsible>");
 	return e;
 }
 var c = "haze-Collapsible__base";
-function l({ open: t, defaultOpen: r = !1, classNames: i, children: s, className: l }) {
-	let [u, d] = a(t, r);
-	return /* @__PURE__ */ n(o.Provider, {
+function l({ open: t, defaultOpen: n = !1, classNames: r, children: s, className: l }) {
+	let [u, d] = a(t, n);
+	return /* @__PURE__ */ i(o.Provider, {
 		value: {
 			open: u,
 			toggle: () => d((e) => !e),
-			classNames: i
+			classNames: r
 		},
-		children: n("div", {
+		children: i("div", {
+			"data-slot": "collapsible",
 			className: e([
 				c,
 				l,
-				i?.root
+				r?.root
 			]),
 			children: s
 		})
 	});
 }
 var u = "haze-Collapsible__triggerStyle";
-function d({ children: t, className: r }) {
-	let { toggle: i, classNames: a } = s();
-	return /* @__PURE__ */ n("button", {
+function d({ children: t, className: n }) {
+	let { toggle: r, classNames: a } = s();
+	return /* @__PURE__ */ i("button", {
 		type: "button",
-		onClick: i,
+		"data-slot": "trigger",
+		onClick: r,
 		className: e([
 			u,
-			r,
+			n,
 			a?.trigger
 		]),
 		children: t
 	});
 }
 var f = "haze-Collapsible__contentOuter", p = "haze-Collapsible__contentInner";
-function m({ children: r, className: i }) {
+function m({ children: n, className: r }) {
 	let { open: a, classNames: o } = s();
-	return /* @__PURE__ */ n(t, {
+	return /* @__PURE__ */ i(t, {
 		present: a,
-		children: n("div", {
+		children: i("div", {
+			"data-slot": "content",
 			className: e([
 				f,
-				i,
+				r,
 				o?.content
 			]),
-			children: /* @__PURE__ */ n("div", {
+			children: /* @__PURE__ */ i("div", {
 				className: e(p),
-				children: r
+				children: n
 			})
 		})
 	});

package/dist/components/ColorPicker/ColorPicker.js

@@ -1,19 +1,90 @@
+
 "use client";
-import e from "./ColorPickerCore.js";
-import { jsx as t } from "react/jsx-runtime";
-import { useControl as n } from "react-use-control";
+import { classnames as e } from "../../utils/classnames.js";
+import { mergeRefs as t } from "../../utils/refs.js";
+import { useStrings as n } from "../LocaleProvider/useStrings.js";
+import { FloatingPanel as r, useFloating as i } from "../../utils/floating.js";
+import { cssColor as a, parseColor as o, rgbHexKey as s } from "./color-math.js";
+import { checkerboard as c, panelVisuals as l, swatchFill as u, trigger as d } from "./color-picker-styles.js";
+import f from "./ColorPickerPanel.js";
+/* empty css                      */
+import { useCallback as p, useEffect as m, useId as h, useRef as g, useState as _ } from "react";
+import { jsx as v, jsxs as y } from "react/jsx-runtime";
+import { useControl as b } from "react-use-control";
 //#region src/lib/components/ColorPicker/ColorPicker.tsx
-function r({ value: r, presets: i, onChange: a, className: o, ref: s }) {
-	let [c, l] = n(r, "#000000");
-	return /* @__PURE__ */ t(e, {
-		ref: s,
-		value: c,
-		onChange: (e) => {
-			l(e), a?.(e);
-		},
-		presets: i,
-		className: o
+var x = 10, S = "haze-ColorPicker__container";
+function C({ value: C, onChange: w, open: T, inline: E = !1, format: D = "hex", allowAlpha: O = !1, presets: k, recent: A = !1, className: j, "aria-label": M, ref: N }) {
+	let P = n("colorPicker"), [F, I] = b(C, "#000000"), [L, R] = b(T, !1), z = M ?? P.pickColor, B = o(F)?.rgb ?? {
+		r: 0,
+		g: 0,
+		b: 0
+	}, V = p((e) => {
+		I(e), w?.(e);
+	}, [I, w]), [H, U] = _([]), W = p((e) => {
+		if (!A) return;
+		let t = s(o(e)?.rgb ?? {
+			r: 0,
+			g: 0,
+			b: 0
+		});
+		U((n) => [e, ...n.filter((e) => {
+			let n = o(e);
+			return n === null || s(n.rgb) !== t;
+		})].slice(0, x));
+	}, [A]), G = /* @__PURE__ */ v(f, {
+		value: F,
+		onChange: V,
+		onCommit: W,
+		format: D,
+		allowAlpha: O,
+		presets: k,
+		recentColors: A ? H : void 0
+	}), K = g(null), q = g(null), J = p((e) => t(K, N)(e), [N]), Y = h(), X = i({
+		open: L,
+		setOpen: R,
+		triggerRef: K,
+		panelRef: q,
+		animated: !0
+	});
+	return m(() => {
+		X.shown && q.current?.querySelector("[role='slider']")?.focus();
+	}, [X.shown]), E ? /* @__PURE__ */ v("div", {
+		ref: N,
+		"data-slot": "color-picker",
+		className: e([l, j]),
+		children: G
+	}) : /* @__PURE__ */ y("span", {
+		"data-slot": "color-picker",
+		className: S,
+		children: [/* @__PURE__ */ v("button", {
+			ref: J,
+			type: "button",
+			"data-slot": "trigger",
+			style: X.triggerStyle,
+			"aria-label": z,
+			"aria-haspopup": "dialog",
+			"aria-expanded": L,
+			"aria-controls": Y,
+			onPointerDown: X.onTriggerPointerDown,
+			onClick: X.onTriggerClick,
+			className: e([d, c]),
+			children: /* @__PURE__ */ v("span", {
+				"data-slot": "swatch",
+				style: { background: a(B) },
+				className: e([u])
+			})
+		}), /* @__PURE__ */ v(r, {
+			ref: q,
+			behavior: X,
+			placement: "bottom",
+			id: Y,
+			role: "dialog",
+			"aria-label": z,
+			visualClass: l,
+			className: j,
+			children: G
+		})]
 	});
 }
 //#endregion
-export { r as default };
+export { C as default };

package/dist/components/ColorPicker/ColorPickerCore.js

@@ -9,27 +9,33 @@ var i = "haze-ColorPickerCore__container", a = "haze-ColorPickerCore__previewRow
 function d({ value: d, onChange: f, presets: p, className: m, ref: h }) {
 	let g = t("colorPicker");
 	return /* @__PURE__ */ r("div", {
+		"data-slot": "color-picker",
 		className: e([i, m]),
 		children: [/* @__PURE__ */ r("div", {
+			"data-slot": "preview",
 			className: e([a]),
 			children: [/* @__PURE__ */ n("input", {
 				ref: h,
 				type: "color",
+				"data-slot": "color-input",
 				value: d,
 				"aria-label": g.pickColor,
 				onChange: (e) => f(e.target.value),
 				className: e([o])
 			}), /* @__PURE__ */ n("input", {
 				type: "text",
+				"data-slot": "text-input",
 				value: d,
 				"aria-label": g.hexColor,
 				onChange: (e) => f(e.target.value),
 				className: e([s])
 			})]
 		}), p && p.length > 0 && /* @__PURE__ */ n("div", {
+			"data-slot": "swatch-row",
 			className: e([c]),
 			children: p.map((t) => /* @__PURE__ */ n("button", {
 				type: "button",
+				"data-slot": "swatch-item",
 				style: { background: t },
 				"aria-label": t,
 				onClick: () => f(t),