haze-ui 1.28.0 → 1.30.0

package/dist/components/Signature/Signature.js

@@ -4,127 +4,135 @@ import { classnames as e } from "../../utils/classnames.js";
 import { useStrings as t } from "../LocaleProvider/useStrings.js";
 import { getCanvasPoint as n, normalizeStroke as r, pointDistance as i, serializeStrokes as a } from "./signature-points.js";
 /* empty css                    */
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-import { useCallback as c, useEffect as l, useRef as u, useState as d } from "react";
+import { useCallback as o, useEffect as s, useRef as c, useState as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
 import { useControl as f } from "react-use-control";
 //#region src/lib/components/Signature/Signature.tsx
-var p = "#1f2937", ee = 1.5, m = "haze-Signature__root", h = "haze-Signature__canvasFrame", g = "haze-Signature__canvasClass", _ = "haze-Signature__toolbar", v = "haze-Signature__toolButton", y = "haze-Signature__unsupportedNotice";
-function b({ value: b, onChange: x, clearLabel: S, undoLabel: C, unsupportedLabel: w, width: T = 320, height: E = 160, disabled: D = !1, penColor: O, penWidth: k = 2, className: A, ...j }) {
-	let M = t("signature"), N = S ?? M.clear, P = C ?? M.undo, F = w ?? M.unsupported, [, I] = f(b, ""), [L, R] = d(0), [z, B] = d(!1), V = u(null), H = u(null), U = u([]), W = u(null), G = u(p), K = u(""), q = c(() => {
-		if (O) return O;
-		let e = V.current;
+var p = "#1f2937", m = 1.5, h = "haze-Signature__root", g = "haze-Signature__canvasFrame", _ = "haze-Signature__canvasClass", v = "haze-Signature__toolbar", y = "haze-Signature__toolButton", b = "haze-Signature__unsupportedNotice";
+function x({ value: x, onChange: S, clearLabel: C, undoLabel: w, unsupportedLabel: T, width: E = 320, height: D = 160, disabled: O = !1, penColor: k, penWidth: A = 2, className: j, ...M }) {
+	let N = t("signature"), P = C ?? N.clear, F = w ?? N.undo, I = T ?? N.unsupported, [, L] = f(x, ""), [R, z] = l(0), [B, V] = l(!1), H = c(null), U = c(null), W = c([]), G = c(null), K = c(p), q = c(""), J = o(() => {
+		if (k) return k;
+		let e = H.current;
 		return (e ? getComputedStyle(e).getPropertyValue("--haze-color-text").trim() : "") || p;
-	}, [O]), J = c((e, t) => {
-		let n = H.current;
-		n && (n.strokeStyle = G.current, n.lineWidth = k, n.lineCap = "round", n.lineJoin = "round", n.beginPath(), n.moveTo(e.x, e.y), n.lineTo(t.x, t.y), n.stroke());
-	}, [k]), Y = c((e) => {
-		let t = H.current;
-		t && (t.fillStyle = G.current, t.beginPath(), t.arc(e.x, e.y, k / 2, 0, Math.PI * 2), t.fill());
-	}, [k]), X = c(() => {
-		let e = H.current, t = V.current;
+	}, [k]), Y = o((e, t) => {
+		let n = U.current;
+		n && (n.strokeStyle = K.current, n.lineWidth = A, n.lineCap = "round", n.lineJoin = "round", n.beginPath(), n.moveTo(e.x, e.y), n.lineTo(t.x, t.y), n.stroke());
+	}, [A]), X = o((e) => {
+		let t = U.current;
+		t && (t.fillStyle = K.current, t.beginPath(), t.arc(e.x, e.y, A / 2, 0, Math.PI * 2), t.fill());
+	}, [A]), Z = o(() => {
+		let e = U.current, t = H.current;
 		if (e && t) {
-			e.clearRect(0, 0, T, E), G.current = q();
-			for (let e of U.current) if (e.length !== 0) {
-				Y(e[0]);
-				for (let t = 1; t < e.length; t += 1) J(e[t - 1], e[t]);
+			e.clearRect(0, 0, E, D), K.current = J();
+			for (let e of W.current) if (e.length !== 0) {
+				X(e[0]);
+				for (let t = 1; t < e.length; t += 1) Y(e[t - 1], e[t]);
 			}
 		}
 	}, [
-		T,
 		E,
-		q,
-		Y,
-		J
+		D,
+		J,
+		X,
+		Y
 	]);
-	l(() => {
-		let e = V.current;
+	s(() => {
+		let e = H.current;
 		if (!e) return;
 		let t = typeof window > "u" ? 1 : window.devicePixelRatio || 1;
-		e.width = Math.max(1, Math.round(T * t)), e.height = Math.max(1, Math.round(E * t));
+		e.width = Math.max(1, Math.round(E * t)), e.height = Math.max(1, Math.round(D * t));
 		let n = e.getContext("2d");
-		H.current = n, B(!n), n && (n.scale(t, t), X());
+		U.current = n, V(!n), n && (n.scale(t, t), Z());
 	}, [
-		T,
 		E,
-		X
+		D,
+		Z
 	]);
-	let Z = c(() => {
-		let e = V.current;
-		if (!e || !H.current) return;
-		let t = a(U.current);
-		if (t === K.current) return;
-		K.current = t;
-		let n = U.current.length > 0 ? e.toDataURL("image/png") : "";
-		I(n), x?.(n);
-	}, [I, x]), Q = (e) => {
-		if (D || !H.current) return;
+	let Q = o(() => {
+		let e = H.current;
+		if (!e || !U.current) return;
+		let t = a(W.current);
+		if (t === q.current) return;
+		q.current = t;
+		let n = W.current.length > 0 ? e.toDataURL("image/png") : "";
+		L(n), S?.(n);
+	}, [L, S]), ee = (e) => {
+		if (O || !U.current) return;
 		e.preventDefault();
-		let t = V.current;
-		if (!t || W.current !== null) return;
-		if (W.current = e.pointerId, typeof t.setPointerCapture == "function") try {
+		let t = H.current;
+		if (!t || G.current !== null) return;
+		if (G.current = e.pointerId, typeof t.setPointerCapture == "function") try {
 			t.setPointerCapture(e.pointerId);
 		} catch {}
-		G.current = q();
+		K.current = J();
 		let r = n(e.clientX, e.clientY, t.getBoundingClientRect());
-		U.current = [...U.current, [r]], R(U.current.length), Y(r);
+		W.current = [...W.current, [r]], z(W.current.length), X(r);
 	}, te = (e) => {
-		if (W.current !== e.pointerId) return;
-		let t = V.current;
+		if (G.current !== e.pointerId) return;
+		let t = H.current;
 		if (!t) return;
-		let r = U.current, a = r[r.length - 1];
+		let r = W.current, a = r[r.length - 1];
 		if (!a) return;
 		let o = n(e.clientX, e.clientY, t.getBoundingClientRect()), s = a[a.length - 1];
 		if (!s || i(s, o) < .5) return;
 		let c = [...a, o];
-		U.current = [...r.slice(0, -1), c], J(s, o);
+		W.current = [...r.slice(0, -1), c], Y(s, o);
 	}, $ = () => {
-		if (W.current === null) return;
-		W.current = null;
-		let e = U.current, t = e[e.length - 1];
-		t && (U.current = [...e.slice(0, -1), r(t, ee)]), Z();
+		if (G.current === null) return;
+		G.current = null;
+		let e = W.current, t = e[e.length - 1];
+		t && (W.current = [...e.slice(0, -1), r(t, m)]), Q();
 	}, ne = () => {
-		D || U.current.length === 0 || (U.current = U.current.slice(0, -1), R(U.current.length), X(), Z());
+		O || W.current.length === 0 || (W.current = W.current.slice(0, -1), z(W.current.length), Z(), Q());
 	}, re = () => {
-		D || U.current.length !== 0 && (U.current = [], R(0), X(), Z());
+		O || W.current.length !== 0 && (W.current = [], z(0), Z(), Q());
 	};
-	return z ? /* @__PURE__ */ o("div", {
-		...j,
-		className: e([m, A]),
-		children: o("div", {
+	return B ? /* @__PURE__ */ u("div", {
+		"data-slot": "signature",
+		...M,
+		className: e([h, j]),
+		children: u("div", {
+			"data-slot": "unsupported-notice",
 			style: {
-				width: `${T}px`,
-				height: `${E}px`
+				width: `${E}px`,
+				height: `${D}px`
 			},
 			role: "status",
-			className: e([y]),
-			children: F
+			className: e([b]),
+			children: I
 		})
-	}) : /* @__PURE__ */ s("div", {
-		...j,
-		className: e([m, A]),
-		children: [/* @__PURE__ */ o("div", {
-			className: e([h]),
-			children: /* @__PURE__ */ o("canvas", {
-				ref: V,
+	}) : /* @__PURE__ */ d("div", {
+		"data-slot": "signature",
+		...M,
+		className: e([h, j]),
+		children: [/* @__PURE__ */ u("div", {
+			"data-slot": "canvas-frame",
+			className: e([g]),
+			children: /* @__PURE__ */ u("canvas", {
+				ref: H,
+				"data-slot": "canvas",
 				style: {
-					width: `${T}px`,
-					height: `${E}px`
+					width: `${E}px`,
+					height: `${D}px`
 				},
-				"data-disabled": D,
-				onPointerDown: Q,
+				"data-disabled": O,
+				onPointerDown: ee,
 				onPointerMove: te,
 				onPointerUp: $,
 				onPointerCancel: $,
-				className: e([g])
+				className: e([_])
 			})
-		}), /* @__PURE__ */ s("div", {
-			className: e([_]),
-			children: [/* @__PURE__ */ s("button", {
+		}), /* @__PURE__ */ d("div", {
+			"data-slot": "actions",
+			className: e([v]),
+			children: [/* @__PURE__ */ d("button", {
 				type: "button",
+				"data-slot": "undo-button",
 				onClick: ne,
-				disabled: D || L === 0,
-				className: e([v]),
-				children: [/* @__PURE__ */ s("svg", {
+				disabled: O || R === 0,
+				className: e([y]),
+				children: [/* @__PURE__ */ d("svg", {
+					"data-slot": "icon",
 					width: "14",
 					height: "14",
 					viewBox: "0 0 24 24",
@@ -134,14 +142,16 @@ function b({ value: b, onChange: x, clearLabel: S, undoLabel: C, unsupportedLabe
 					strokeLinecap: "round",
 					strokeLinejoin: "round",
 					"aria-hidden": "true",
-					children: [/* @__PURE__ */ o("path", { d: "M9 14 4 9l5-5" }), /* @__PURE__ */ o("path", { d: "M4 9h10.5a5.5 5.5 0 0 1 0 11H11" })]
-				}), P]
-			}), /* @__PURE__ */ s("button", {
+					children: [/* @__PURE__ */ u("path", { d: "M9 14 4 9l5-5" }), /* @__PURE__ */ u("path", { d: "M4 9h10.5a5.5 5.5 0 0 1 0 11H11" })]
+				}), F]
+			}), /* @__PURE__ */ d("button", {
 				type: "button",
+				"data-slot": "clear-button",
 				onClick: re,
-				disabled: D || L === 0,
-				className: e([v]),
-				children: [/* @__PURE__ */ s("svg", {
+				disabled: O || R === 0,
+				className: e([y]),
+				children: [/* @__PURE__ */ d("svg", {
+					"data-slot": "icon",
 					width: "14",
 					height: "14",
 					viewBox: "0 0 24 24",
@@ -152,14 +162,14 @@ function b({ value: b, onChange: x, clearLabel: S, undoLabel: C, unsupportedLabe
 					strokeLinejoin: "round",
 					"aria-hidden": "true",
 					children: [
-						/* @__PURE__ */ o("path", { d: "M3 6h18" }),
-						/* @__PURE__ */ o("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" }),
-						/* @__PURE__ */ o("path", { d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" })
+						/* @__PURE__ */ u("path", { d: "M3 6h18" }),
+						/* @__PURE__ */ u("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" }),
+						/* @__PURE__ */ u("path", { d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" })
 					]
-				}), N]
+				}), P]
 			})]
 		})]
 	});
 }
 //#endregion
-export { b as default };
+export { x as default };

package/dist/components/Skeleton/Skeleton.js

@@ -14,6 +14,7 @@ function i({ variant: i = "text", width: a, height: o, className: s }) {
 		height: typeof o == "number" ? `${o}px` : o
 	};
 	return /* @__PURE__ */ t("span", {
+		"data-slot": "skeleton",
 		style: c,
 		className: e([
 			n,

package/dist/components/Slider/SliderCore.js

@@ -3,81 +3,187 @@
 import { classnames as e } from "../../utils/classnames.js";
 import { getDirection as t } from "../../utils/direction.js";
 /* empty css                     */
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { useEffect as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { useControl as a } from "react-use-control";
 //#region src/lib/components/Slider/SliderCore.tsx
-var i = "haze-SliderCore__base", a = "haze-SliderCore__rangeWrapper", o = "haze-SliderCore__rangeRail", s = "haze-SliderCore__rangeFill", c = "haze-SliderCore__rangeInput";
-function l(e, n, r, i) {
+var o = "haze-SliderCore__base", s = "haze-SliderCore__rangeWrapper", c = "haze-SliderCore__singleWrapper", l = "haze-SliderCore__rangeRail", u = "haze-SliderCore__rangeFill", d = "haze-SliderCore__rangeInput", f = "haze-SliderCore__verticalWrapper", p = "haze-SliderCore__verticalInput", ee = "haze-SliderCore__verticalRail", m = "haze-SliderCore__verticalFill", h = "haze-SliderCore__marksHorizontal", g = "haze-SliderCore__marksVertical", te = "haze-SliderCore__markBase", ne = "haze-SliderCore__markHorizontal", re = "haze-SliderCore__markVertical", ie = "haze-SliderCore__markTick", ae = "haze-SliderCore__markLabel", _ = "haze-SliderCore__tooltipBubble", oe = "haze-SliderCore__tooltipBubbleVertical";
+function v(e, n, r, i) {
 	let a = e.currentTarget;
 	if (a.disabled || t(a) !== "rtl" || e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
 	e.preventDefault();
 	let o = a.step === "" || a.step === "any" ? 1 : Number(a.step), s = a.min === "" ? 0 : Number(a.min), c = a.max === "" ? 100 : Number(a.max), l = e.key === "ArrowLeft" ? o : -o, u = Math.min(Math.max(n + l, s), c);
 	r(Math.round(u * 1e6) / 1e6), i?.(e);
 }
-function u(e) {
+function se(e) {
 	let t = Array.isArray(e) ? e : [e, e];
 	return t[0] <= t[1] ? [t[0], t[1]] : [t[1], t[0]];
 }
-function d(e, t) {
+function y(e, t) {
 	let n = e === void 0 ? NaN : Number(e);
 	return Number.isFinite(n) ? n : t;
 }
-function f({ value: t, onChange: f, onNativeChange: p, range: m = !1, className: h, onKeyDown: g, "aria-label": _, ref: v, ...y }) {
-	if (!m) {
-		let r = t;
-		return /* @__PURE__ */ n("input", {
-			ref: v,
+function ce(e) {
+	if (e === void 0) return;
+	let t = Object.keys(e).map(Number).filter((e) => Number.isFinite(e)).sort((e, t) => e - t);
+	return t.length > 0 ? t : void 0;
+}
+function le(e, t) {
+	let n = t[0], r = Math.abs(e - n);
+	for (let i = 1; i < t.length; i += 1) {
+		let a = t[i], o = Math.abs(e - a);
+		o < r && (n = a, r = o);
+	}
+	return n;
+}
+function b({ value: t, onChange: b, onNativeChange: x, range: ue = !1, className: S, onKeyDown: C, "aria-label": w, tooltip: T = !1, tooltipFormatter: E, marks: D, vertical: O = !1, step: k, onPointerDown: A, onFocus: j, onBlur: M, ref: N, ...P }) {
+	let [F, I] = a(void 0, null);
+	n(() => {
+		if (F === null) return;
+		let e = () => I(null);
+		return window.addEventListener("pointerup", e), window.addEventListener("pointercancel", e), () => {
+			window.removeEventListener("pointerup", e), window.removeEventListener("pointercancel", e);
+		};
+	}, [F, I]);
+	let L = y(P.min, 0), R = y(P.max, 100) - L, z = (e) => R > 0 ? Math.min(Math.max((e - L) / R * 100, 0), 100) : 0, B = ce(D), V = k === null && B !== void 0 ? (e) => le(e, B) : (e) => e, H = k === null ? "any" : k, de = (e) => (t) => {
+		A?.(t), t.currentTarget.disabled || I(e);
+	}, U = (e) => T ? {
+		onPointerDown: de(e),
+		onFocus: (t) => {
+			j?.(t), I(e);
+		},
+		onBlur: (e) => {
+			M?.(e), I(null);
+		}
+	} : {
+		onPointerDown: A,
+		onFocus: j,
+		onBlur: M
+	}, W = (t, n) => T ? /* @__PURE__ */ r("span", {
+		"data-slot": "tooltip",
+		"aria-hidden": "true",
+		"data-state": F === n ? "open" : "closed",
+		style: O ? { insetBlockEnd: `${z(t)}%` } : { insetInlineStart: `${z(t)}%` },
+		className: e([_, O && oe]),
+		children: E ? E(t) : t
+	}) : null, G = (t) => B === void 0 ? null : B.map((n) => /* @__PURE__ */ i("span", {
+		"data-slot": "mark",
+		style: O ? { insetBlockEnd: `${z(n)}%` } : { insetInlineStart: `${z(n)}%` },
+		onClick: () => t(n),
+		className: e([te, O ? re : ne]),
+		children: [/* @__PURE__ */ r("span", {
+			"data-slot": "mark-tick",
+			className: e(ie)
+		}), /* @__PURE__ */ r("span", {
+			"data-slot": "mark-label",
+			className: e(ae),
+			children: D?.[n] ?? null
+		})]
+	}, n));
+	if (!ue) {
+		let n = t, a = w, s = (e) => b(V(e)), l = /* @__PURE__ */ r("input", {
+			ref: N,
 			type: "range",
-			value: r,
-			"aria-label": _,
+			"data-slot": "input",
+			value: n,
+			"aria-label": a,
+			step: H,
 			onChange: (e) => {
-				f(Number(e.target.value)), p?.(e);
+				s(Number(e.target.value)), x?.(e);
 			},
 			onKeyDown: (e) => {
-				g?.(e), e.defaultPrevented || l(e, r, f, p);
+				C?.(e), !e.defaultPrevented && !O && v(e, n, s, x);
 			},
-			...y,
-			className: e([i, h])
+			...U(0),
+			...P,
+			className: e([
+				o,
+				O && p,
+				S
+			])
+		});
+		return !T && D === void 0 && !O ? l : /* @__PURE__ */ i("span", {
+			"data-slot": "slider",
+			className: e([O ? f : c, D !== void 0 && (O ? g : h)]),
+			children: [
+				l,
+				W(n, 0),
+				G(s)
+			]
 		});
 	}
-	let [b, x] = u(t), S = Array.isArray(_) ? _ : [_, _], C = d(y.min, 0), w = d(y.max, 100) - C, T = (e) => w > 0 ? Math.min(Math.max((e - C) / w * 100, 0), 100) : 0, E = T(b), D = T(x) - E, O = (e) => f([Math.min(e, x), x]), k = (e) => f([b, Math.max(e, b)]), A = (e, t) => (n) => {
-		g?.(n), n.defaultPrevented || l(n, e, t, p);
+	let [K, q] = se(t), J = Array.isArray(w) ? w : [w, w], Y = z(K), X = z(q) - Y, Z = (e) => b([Math.min(V(e), q), q]), Q = (e) => b([K, Math.max(V(e), K)]), fe = (e) => {
+		let t = V(e);
+		b(Math.abs(t - K) <= Math.abs(t - q) ? [Math.min(t, q), q] : [K, Math.max(t, K)]);
+	}, $ = (e, t) => (n) => {
+		C?.(n), !n.defaultPrevented && !O && v(n, e, t, x);
 	};
-	return /* @__PURE__ */ r("span", {
-		className: e([a, h]),
+	return /* @__PURE__ */ i("span", {
+		"data-slot": "slider",
+		className: e([
+			s,
+			O && f,
+			D !== void 0 && (O ? g : h),
+			S
+		]),
 		children: [
-			/* @__PURE__ */ n("span", { className: e(o) }),
-			/* @__PURE__ */ n("span", {
-				style: {
-					insetInlineStart: `${E}%`,
-					width: `${D}%`
+			/* @__PURE__ */ r("span", {
+				"data-slot": "track",
+				className: e([l, O && ee])
+			}),
+			/* @__PURE__ */ r("span", {
+				"data-slot": "fill",
+				style: O ? {
+					insetBlockStart: `${100 - z(q)}%`,
+					height: `${X}%`
+				} : {
+					insetInlineStart: `${Y}%`,
+					width: `${X}%`
 				},
-				className: e(s)
+				className: e([u, O && m])
 			}),
-			/* @__PURE__ */ n("input", {
-				ref: v,
+			/* @__PURE__ */ r("input", {
+				ref: N,
 				type: "range",
-				value: b,
-				"aria-label": S[0],
+				"data-slot": "input",
+				value: K,
+				"aria-label": J[0],
+				step: H,
 				onChange: (e) => {
-					O(Number(e.target.value)), p?.(e);
+					Z(Number(e.target.value)), x?.(e);
 				},
-				onKeyDown: A(b, O),
-				...y,
-				className: e([i, c])
+				onKeyDown: $(K, Z),
+				...U(0),
+				...P,
+				className: e([
+					o,
+					d,
+					O && p
+				])
 			}),
-			/* @__PURE__ */ n("input", {
+			/* @__PURE__ */ r("input", {
 				type: "range",
-				value: x,
-				"aria-label": S[1],
+				"data-slot": "input",
+				value: q,
+				"aria-label": J[1],
+				step: H,
 				onChange: (e) => {
-					k(Number(e.target.value)), p?.(e);
+					Q(Number(e.target.value)), x?.(e);
 				},
-				onKeyDown: A(x, k),
-				...y,
-				className: e([i, c])
-			})
+				onKeyDown: $(q, Q),
+				...U(1),
+				...P,
+				className: e([
+					o,
+					d,
+					O && p
+				])
+			}),
+			W(K, 0),
+			W(q, 1),
+			G(fe)
 		]
 	});
 }
 //#endregion
-export { f as default };
+export { b as default };

package/dist/components/Sources/Sources.js

@@ -3,11 +3,11 @@
 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 { useId as a } from "react";
+import { useId as n } from "react";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
 import { useControl as o } from "react-use-control";
 //#region src/lib/components/Sources/Sources.tsx
-var s = "haze-Sources__list", c = "haze-Sources__item", l = "haze-Sources__badge", u = "haze-Sources__link", d = "haze-Sources__title", f = "haze-Sources__toggleBtn", p = "haze-Sources__snippetBase", m = "haze-Sources__snippetHidden", h = "haze-Sources__snippetShown", g = "haze-Sources__compactNav", _ = "haze-Sources__compactBadge", v = () => /* @__PURE__ */ r("svg", {
+var s = "haze-Sources__list", c = "haze-Sources__item", l = "haze-Sources__badge", u = "haze-Sources__link", d = "haze-Sources__title", f = "haze-Sources__toggleBtn", p = "haze-Sources__snippetBase", m = "haze-Sources__snippetHidden", h = "haze-Sources__snippetShown", g = "haze-Sources__compactNav", _ = "haze-Sources__compactBadge", v = () => /* @__PURE__ */ i("svg", {
 	width: "10",
 	height: "10",
 	viewBox: "0 0 10 10",
@@ -19,32 +19,35 @@ var s = "haze-Sources__list", c = "haze-Sources__item", l = "haze-Sources__badge
 	"aria-hidden": "true",
 	focusable: "false",
 	style: { transition: "transform var(--haze-duration-fast) var(--haze-ease)" },
-	children: r("path", { d: "M3 1.5 6.5 5 3 8.5" })
+	children: i("path", { d: "M3 1.5 6.5 5 3 8.5" })
 });
 function y(e, t) {
 	return typeof e == "string" ? `${t}. ${e}` : `[${t}]`;
 }
 function b({ items: b, compact: x = !1, expanded: S, label: C, expandLabel: w, collapseLabel: T, className: E, ...D }) {
-	let O = t("sources"), k = C ?? O.label, A = w ?? O.expand, j = T ?? O.collapse, M = a(), [N, P] = o(S, []);
-	if (x) return /* @__PURE__ */ r("nav", {
+	let O = t("sources"), k = C ?? O.label, A = w ?? O.expand, j = T ?? O.collapse, M = n(), [N, P] = o(S, []);
+	if (x) return /* @__PURE__ */ i("nav", {
+		"data-slot": "sources",
 		"aria-label": k,
 		...D,
 		className: e([g, E]),
 		children: b.map((t, n) => {
-			let r = n + 1, a = y(t.title, r);
-			return t.url ? /* @__PURE__ */ i("a", {
+			let r = n + 1, i = y(t.title, r);
+			return t.url ? /* @__PURE__ */ a("a", {
+				"data-slot": "source-item",
 				href: t.url,
 				target: "_blank",
 				rel: "noopener noreferrer",
-				"aria-label": a,
+				"aria-label": i,
 				className: e([_]),
 				children: [
 					"[",
 					r,
 					"]"
 				]
-			}, t.id) : /* @__PURE__ */ i("span", {
-				"aria-label": a,
+			}, t.id) : /* @__PURE__ */ a("span", {
+				"data-slot": "source-item",
+				"aria-label": i,
 				className: e([_]),
 				children: [
 					"[",
@@ -57,18 +60,21 @@ function b({ items: b, compact: x = !1, expanded: S, label: C, expandLabel: w, c
 	let F = (e) => N.includes(e), I = (e) => {
 		P((t) => t.includes(e) ? t.filter((t) => t !== e) : [...t, e]);
 	};
-	return /* @__PURE__ */ r("ol", {
+	return /* @__PURE__ */ i("ol", {
+		"data-slot": "sources",
 		"aria-label": k,
 		...D,
 		className: e([s, E]),
-		children: b.map((t, a) => {
-			let o = a + 1, s = `${M}-snippet-${t.id}`, g = F(t.id);
-			return /* @__PURE__ */ i("li", {
+		children: b.map((t, n) => {
+			let o = n + 1, s = `${M}-snippet-${t.id}`, g = F(t.id);
+			return /* @__PURE__ */ a("li", {
+				"data-slot": "source-item",
 				"data-haze-sources-item": "",
 				"data-state": g ? "expanded" : "collapsed",
 				className: e([c]),
 				children: [
-					/* @__PURE__ */ i("span", {
+					/* @__PURE__ */ a("span", {
+						"data-slot": "index",
 						"aria-hidden": "true",
 						className: e([l]),
 						children: [
@@ -77,26 +83,30 @@ function b({ items: b, compact: x = !1, expanded: S, label: C, expandLabel: w, c
 							"]"
 						]
 					}),
-					t.url ? /* @__PURE__ */ r("a", {
+					t.url ? /* @__PURE__ */ i("a", {
+						"data-slot": "link",
 						href: t.url,
 						target: "_blank",
 						rel: "noopener noreferrer",
 						className: e([u]),
 						children: t.title
-					}) : /* @__PURE__ */ r("span", {
+					}) : /* @__PURE__ */ i("span", {
+						"data-slot": "title",
 						className: e([d]),
 						children: t.title
 					}),
-					t.snippet != null && /* @__PURE__ */ i(n, { children: [/* @__PURE__ */ r("button", {
+					t.snippet != null && /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i("button", {
 						type: "button",
+						"data-slot": "expand-button",
 						"aria-expanded": g,
 						"aria-controls": s,
 						"aria-label": g ? j : A,
 						onClick: () => I(t.id),
 						className: e([f]),
-						children: /* @__PURE__ */ r(v, {})
-					}), /* @__PURE__ */ r("div", {
+						children: /* @__PURE__ */ i(v, {})
+					}), /* @__PURE__ */ i("div", {
 						id: s,
+						"data-slot": "snippet",
 						className: e([p, g ? h : m]),
 						children: t.snippet
 					})] })

package/dist/components/Spinner/Spinner.js

@@ -13,6 +13,7 @@ var i = "haze-Spinner__base", a = {
 function o({ size: o = "md", className: s }) {
 	let c = t("spinner");
 	return /* @__PURE__ */ n("span", {
+		"data-slot": "spinner",
 		role: "status",
 		"aria-label": c.loading,
 		className: e([