haze-ui 1.29.0 → 1.31.0

package/dist/components/ColorPicker/ColorPickerPanel.js

@@ -0,0 +1,277 @@
+"use client";
+import { classnames as e } from "../../utils/classnames.js";
+import { useStrings as t } from "../LocaleProvider/useStrings.js";
+import { cssColor as n, formatColor as r, hsvToRgb as i, parseColor as a, rgbHexKey as o, rgbToHsv as s } from "./color-math.js";
+import { checkerboard as c, hueTrack as l, panelContent as u, svArea as d, svThumb as f, swatchBtn as p, swatchFill as m, swatchRow as h, track as g, trackThumb as _, valueInput as v } from "./color-picker-styles.js";
+import { useRef as y, useState as b } from "react";
+import { Fragment as x, jsx as S, jsxs as C } from "react/jsx-runtime";
+//#region src/lib/components/ColorPicker/ColorPickerPanel.tsx
+var w = {
+	r: 0,
+	g: 0,
+	b: 0
+};
+function T(e) {
+	return Math.min(Math.max(e, 0), 1);
+}
+function E(e) {
+	let t = e.getBoundingClientRect();
+	return t.width > 0 && t.height > 0 ? t : null;
+}
+function D(e, t, n) {
+	let r = y(null);
+	return {
+		onPointerDown(n) {
+			if (n.button !== 0) return;
+			let i = e(n);
+			if (i !== null) {
+				if (n.preventDefault(), r.current = n.pointerId, typeof n.currentTarget.setPointerCapture == "function") try {
+					n.currentTarget.setPointerCapture(n.pointerId);
+				} catch {}
+				t(i);
+			}
+		},
+		onPointerMove(n) {
+			if (r.current !== n.pointerId) return;
+			let i = e(n);
+			i !== null && t(i);
+		},
+		onPointerUp(t) {
+			if (r.current !== t.pointerId) return;
+			r.current = null;
+			let i = e(t);
+			i !== null && n(i);
+		},
+		onPointerCancel(e) {
+			r.current === e.pointerId && (r.current = null);
+		}
+	};
+}
+function O(e) {
+	let t = E(e.currentTarget);
+	return t ? T((e.clientX - t.left) / t.width) : null;
+}
+function k({ value: y, onChange: k, onCommit: A, format: j = "hex", allowAlpha: M = !1, presets: N, recentColors: P, className: F }) {
+	let I = t("colorPicker"), L = a(y)?.rgb ?? w, R = M ? L.a ?? 1 : 1, z = s(L), B = o({
+		...L,
+		a: R
+	}), V = (e, t) => {
+		let n = r({
+			...e,
+			a: M ? e.a : void 0
+		}, j, M);
+		k(n), t && A?.(n);
+	}, H = (e, t) => {
+		V({
+			...i(e),
+			a: R
+		}, t);
+	}, U = (e, t) => {
+		V({
+			...L,
+			a: e
+		}, t);
+	}, W = D((e) => {
+		let t = E(e.currentTarget);
+		return t ? {
+			h: z.h,
+			s: T((e.clientX - t.left) / t.width),
+			v: 1 - T((e.clientY - t.top) / t.height)
+		} : null;
+	}, (e) => H(e, !1), (e) => H(e, !0)), G = D((e) => {
+		let t = O(e);
+		return t === null ? null : t * 360;
+	}, (e) => H({
+		...z,
+		h: e
+	}, !1), (e) => H({
+		...z,
+		h: e
+	}, !0)), K = D((e) => O(e), (e) => U(e, !1), (e) => U(e, !0)), q = (e) => {
+		let t = (e.shiftKey ? 10 : 1) / 100;
+		switch (e.key) {
+			case "ArrowLeft":
+				H({
+					...z,
+					s: T(z.s - t)
+				}, !0);
+				break;
+			case "ArrowRight":
+				H({
+					...z,
+					s: T(z.s + t)
+				}, !0);
+				break;
+			case "ArrowDown":
+				H({
+					...z,
+					v: T(z.v - t)
+				}, !0);
+				break;
+			case "ArrowUp":
+				H({
+					...z,
+					v: T(z.v + t)
+				}, !0);
+				break;
+			default: return;
+		}
+		e.preventDefault();
+	}, J = (e) => {
+		let t = e.shiftKey ? 10 : 1;
+		switch (e.key) {
+			case "ArrowLeft":
+			case "ArrowDown":
+				H({
+					...z,
+					h: ((z.h - t) % 360 + 360) % 360
+				}, !0);
+				break;
+			case "ArrowRight":
+			case "ArrowUp":
+				H({
+					...z,
+					h: (z.h + t) % 360
+				}, !0);
+				break;
+			default: return;
+		}
+		e.preventDefault();
+	}, Y = (e) => {
+		let t = (e.shiftKey ? 10 : 1) / 100;
+		switch (e.key) {
+			case "ArrowLeft":
+			case "ArrowDown":
+				U(T(R - t), !0);
+				break;
+			case "ArrowRight":
+			case "ArrowUp":
+				U(T(R + t), !0);
+				break;
+			default: return;
+		}
+		e.preventDefault();
+	}, [X, Z] = b(null), ee = X ?? r({
+		...L,
+		a: R
+	}, j, M), Q = () => {
+		if (X === null) return;
+		let e = a(X);
+		Z(null), e && V(e.rgb, !0);
+	}, $ = (t, r) => /* @__PURE__ */ S("div", {
+		"data-slot": "swatch-row",
+		className: e([h]),
+		children: t.map((t) => {
+			let i = a(t)?.rgb;
+			return i ? /* @__PURE__ */ S("button", {
+				type: "button",
+				"data-slot": "swatch-item",
+				"aria-label": t,
+				onClick: () => V(i, !0),
+				className: e([
+					p,
+					c,
+					o(i) === B && "haze-color-picker-styles__swatchActive"
+				]),
+				children: /* @__PURE__ */ S("span", {
+					"data-slot": "swatch",
+					style: { background: n(i) },
+					className: e([m])
+				})
+			}, `${r}:${t}`) : null;
+		})
+	});
+	return /* @__PURE__ */ C("div", {
+		"data-slot": "panel",
+		className: e([u, F]),
+		children: [
+			/* @__PURE__ */ S("div", {
+				"data-slot": "saturation",
+				role: "slider",
+				tabIndex: 0,
+				"aria-label": I.saturationBrightness,
+				"aria-valuemin": 0,
+				"aria-valuemax": 100,
+				"aria-valuenow": Math.round(z.s * 100),
+				"aria-valuetext": r(L, "hex", !1),
+				style: { background: `linear-gradient(to top, #000, rgba(0, 0, 0, 0)), linear-gradient(to right, #fff, rgba(255, 255, 255, 0)), hsl(${z.h}, 100%, 50%)` },
+				onKeyDown: q,
+				...W,
+				className: e([d]),
+				children: /* @__PURE__ */ S("span", {
+					"data-slot": "thumb",
+					style: {
+						left: `${z.s * 100}%`,
+						top: `${(1 - z.v) * 100}%`
+					},
+					className: e([f])
+				})
+			}),
+			/* @__PURE__ */ S("div", {
+				"data-slot": "hue-track",
+				role: "slider",
+				tabIndex: 0,
+				"aria-label": I.hue,
+				"aria-valuemin": 0,
+				"aria-valuemax": 360,
+				"aria-valuenow": Math.round(z.h),
+				"aria-valuetext": `${Math.round(z.h)}deg`,
+				onKeyDown: J,
+				...G,
+				className: e([g, l]),
+				children: /* @__PURE__ */ S("span", {
+					"data-slot": "thumb",
+					style: { left: `${z.h / 360 * 100}%` },
+					className: e([_])
+				})
+			}),
+			M && /* @__PURE__ */ C("div", {
+				"data-slot": "alpha-track",
+				role: "slider",
+				tabIndex: 0,
+				"aria-label": I.alpha,
+				"aria-valuemin": 0,
+				"aria-valuemax": 100,
+				"aria-valuenow": Math.round(R * 100),
+				"aria-valuetext": `${Math.round(R * 100)}%`,
+				onKeyDown: Y,
+				...K,
+				className: e(["haze-color-picker-styles__track", "haze-color-picker-styles__checkerboard"]),
+				children: [/* @__PURE__ */ S("span", {
+					"data-slot": "fill",
+					style: { background: `linear-gradient(to right, rgba(${L.r}, ${L.g}, ${L.b}, 0), rgba(${L.r}, ${L.g}, ${L.b}, 1))` },
+					className: e(["haze-color-picker-styles__trackFill"])
+				}), /* @__PURE__ */ S("span", {
+					"data-slot": "thumb",
+					style: { left: `${R * 100}%` },
+					className: e(["haze-color-picker-styles__trackThumb"])
+				})]
+			}),
+			/* @__PURE__ */ S("input", {
+				type: "text",
+				"data-slot": "input",
+				"aria-label": I.hexColor,
+				spellCheck: !1,
+				value: ee,
+				onChange: (e) => Z(e.target.value),
+				onBlur: Q,
+				onKeyDown: (e) => {
+					e.key === "Enter" ? (e.preventDefault(), Q()) : e.key === "Escape" && (e.stopPropagation(), Z(null));
+				},
+				className: e([v])
+			}),
+			N !== void 0 && N.length > 0 && /* @__PURE__ */ C(x, { children: [/* @__PURE__ */ S("div", {
+				"data-slot": "group-label",
+				className: e(["haze-color-picker-styles__groupLabel"]),
+				children: I.presetsLabel
+			}), $(N, "preset")] }),
+			P !== void 0 && P.length > 0 && /* @__PURE__ */ C(x, { children: [/* @__PURE__ */ S("div", {
+				"data-slot": "group-label",
+				className: e(["haze-color-picker-styles__groupLabel"]),
+				children: I.recentColors
+			}), $(P, "recent")] })
+		]
+	});
+}
+//#endregion
+export { k as default };

package/dist/components/ColorPicker/color-math.js

@@ -0,0 +1,168 @@
+"use client";
+//#region src/lib/components/ColorPicker/color-math.ts
+function e(e, t, n) {
+	return Math.min(Math.max(e, t), n);
+}
+function t(t) {
+	return e(t, 0, 1);
+}
+var n = /^#?([0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$/i;
+function r(t, n) {
+	let r = t.endsWith("%"), i = Number(r ? t.slice(0, -1) : t);
+	return Number.isFinite(i) ? e(r ? i / 100 * n : i, 0, n) : NaN;
+}
+function i(e) {
+	if (e === void 0) return;
+	let t = r(e, 1);
+	return Number.isFinite(t) ? t : 1;
+}
+var a = String.raw`\d*\.?\d+`, o = RegExp(`^rgba?\\(\\s*(${a}%?)\\s*[,\\s]\\s*(${a}%?)\\s*[,\\s]\\s*(${a}%?)\\s*(?:[,/]\\s*(${a}%?)\\s*)?\\)$`, "i"), s = RegExp(`^hsla?\\(\\s*(-?${a})(?:deg)?\\s*[,\\s]\\s*(${a})%\\s*[,\\s]\\s*(${a})%\\s*(?:[,/]\\s*(${a}%?)\\s*)?\\)$`, "i");
+function c(e) {
+	let a = e.trim(), c = n.exec(a);
+	if (c) {
+		let e = c[1] ?? "", n = e.length === 3 || e.length === 4 ? e.split("").map((e) => e + e).join("") : e, r = Number.parseInt(n, 16);
+		return {
+			format: "hex",
+			rgb: n.length === 8 ? {
+				r: r >>> 24 & 255,
+				g: r >>> 16 & 255,
+				b: r >>> 8 & 255,
+				a: t((r & 255) / 255)
+			} : {
+				r: r >>> 16 & 255,
+				g: r >>> 8 & 255,
+				b: r & 255
+			}
+		};
+	}
+	let l = o.exec(a);
+	if (l) {
+		let e = r(l[1] ?? "0", 255), t = r(l[2] ?? "0", 255), n = r(l[3] ?? "0", 255);
+		return [
+			e,
+			t,
+			n
+		].every(Number.isFinite) ? {
+			format: "rgb",
+			rgb: {
+				r: Math.round(e),
+				g: Math.round(t),
+				b: Math.round(n),
+				a: i(l[4])
+			}
+		} : null;
+	}
+	let u = s.exec(a);
+	if (u) {
+		let e = Number(u[1]), t = r(u[2] ?? "0", 100) / 100, n = r(u[3] ?? "0", 100) / 100;
+		return [
+			e,
+			t,
+			n
+		].every(Number.isFinite) ? {
+			format: "hsl",
+			rgb: {
+				..._({
+					h: (e % 360 + 360) % 360,
+					s: t,
+					l: n
+				}),
+				a: i(u[4])
+			}
+		} : null;
+	}
+	return null;
+}
+function l(t) {
+	return e(Math.round(t), 0, 255).toString(16).padStart(2, "0");
+}
+function u(e) {
+	let n = t(e).toFixed(3).replace(/0+$/, "").replace(/\.$/, "");
+	return n === "" ? "0" : n;
+}
+function d(e, t, n) {
+	let r = e.a ?? 1, i = n && r < 1;
+	if (t === "hex") {
+		let t = `#${l(e.r)}${l(e.g)}${l(e.b)}`;
+		return i ? `${t}${l(r * 255)}` : t;
+	}
+	if (t === "rgb") return i ? `rgba(${e.r}, ${e.g}, ${e.b}, ${u(r)})` : `rgb(${e.r}, ${e.g}, ${e.b})`;
+	let a = g(e), o = Math.round(a.h), s = Math.round(a.s * 100), c = Math.round(a.l * 100);
+	return i ? `hsla(${o}, ${s}%, ${c}%, ${u(r)})` : `hsl(${o}, ${s}%, ${c}%)`;
+}
+function f(e) {
+	return `rgba(${e.r}, ${e.g}, ${e.b}, ${u(e.a ?? 1)})`;
+}
+function p(e) {
+	return `#${l(e.r)}${l(e.g)}${l(e.b)}${l((e.a ?? 1) * 255)}`;
+}
+function m({ r: e, g: t, b: n }) {
+	let r = e / 255, i = t / 255, a = n / 255, o = Math.max(r, i, a), s = o - Math.min(r, i, a), c = 0;
+	return s !== 0 && (c = o === r ? ((i - a) / s % 6 + 6) % 6 : o === i ? (a - r) / s + 2 : (r - i) / s + 4, c *= 60), {
+		h: c,
+		s: o === 0 ? 0 : s / o,
+		v: o
+	};
+}
+function h({ h: e, s: t, v: n }) {
+	let r = (e % 360 + 360) % 360 / 60, i = n * t, a = i * (1 - Math.abs(r % 2 - 1)), o = n - i, s;
+	return s = r < 1 ? [
+		i,
+		a,
+		0
+	] : r < 2 ? [
+		a,
+		i,
+		0
+	] : r < 3 ? [
+		0,
+		i,
+		a
+	] : r < 4 ? [
+		0,
+		a,
+		i
+	] : r < 5 ? [
+		a,
+		0,
+		i
+	] : [
+		i,
+		0,
+		a
+	], {
+		r: Math.round((s[0] + o) * 255),
+		g: Math.round((s[1] + o) * 255),
+		b: Math.round((s[2] + o) * 255)
+	};
+}
+function g({ r: e, g: t, b: n }) {
+	let r = e / 255, i = t / 255, a = n / 255, o = Math.max(r, i, a), s = Math.min(r, i, a), c = (o + s) / 2, l = o - s, u = 0, d = 0;
+	return l !== 0 && (d = l / (1 - Math.abs(2 * c - 1)), u = o === r ? ((i - a) / l % 6 + 6) % 6 : o === i ? (a - r) / l + 2 : (r - i) / l + 4, u *= 60), {
+		h: u,
+		s: d,
+		l: c
+	};
+}
+function _({ h: e, s: t, l: n }) {
+	let r = (e % 360 + 360) % 360 / 360;
+	if (t === 0) {
+		let e = Math.round(n * 255);
+		return {
+			r: e,
+			g: e,
+			b: e
+		};
+	}
+	let i = n < .5 ? n * (1 + t) : n + t - n * t, a = 2 * n - i, o = (e) => {
+		let t = e;
+		return t < 0 && (t += 1), t > 1 && --t, t < 1 / 6 ? a + (i - a) * 6 * t : t < 1 / 2 ? i : t < 2 / 3 ? a + (i - a) * (2 / 3 - t) * 6 : a;
+	};
+	return {
+		r: Math.round(o(r + 1 / 3) * 255),
+		g: Math.round(o(r) * 255),
+		b: Math.round(o(r - 1 / 3) * 255)
+	};
+}
+//#endregion
+export { f as cssColor, d as formatColor, _ as hslToRgb, h as hsvToRgb, c as parseColor, p as rgbHexKey, g as rgbToHsl, m as rgbToHsv };

package/dist/components/ColorPicker/color-picker-styles.js

@@ -0,0 +1,7 @@
+
+"use client";
+/* empty css                              */
+//#region src/lib/components/ColorPicker/color-picker-styles.ts
+var e = "haze-color-picker-styles__panelVisuals", t = "haze-color-picker-styles__panelContent", n = "haze-color-picker-styles__svArea", r = "haze-color-picker-styles__svThumb", i = "haze-color-picker-styles__track", a = "haze-color-picker-styles__hueTrack", o = "haze-color-picker-styles__checkerboard", s = "haze-color-picker-styles__trackFill", c = "haze-color-picker-styles__trackThumb", l = "haze-color-picker-styles__valueInput", u = "haze-color-picker-styles__groupLabel", d = "haze-color-picker-styles__swatchRow", f = "haze-color-picker-styles__swatchBtn", p = "haze-color-picker-styles__swatchFill", m = "haze-color-picker-styles__swatchActive", h = "haze-color-picker-styles__trigger";
+//#endregion
+export { o as checkerboard, u as groupLabel, a as hueTrack, t as panelContent, e as panelVisuals, n as svArea, r as svThumb, m as swatchActive, f as swatchBtn, p as swatchFill, d as swatchRow, i as track, s as trackFill, c as trackThumb, h as trigger, l as valueInput };

package/dist/components/ColorPicker/index.js

@@ -1,4 +1,4 @@
 "use client";
-import e from "./ColorPickerCore.js";
-import t from "./ColorPicker.js";
-export { t as ColorPicker, e as ColorPickerCore };
+import e from "./ColorPicker.js";
+import t from "./ColorPickerCore.js";
+export { e as ColorPicker, t as ColorPickerCore };

package/dist/components/Combobox/Combobox.js

@@ -11,25 +11,26 @@ import ie from "../VirtualList/VirtualList.js";
 import ae from "./ComboboxGroup.js";
 import oe from "./ComboboxOption.js";
 /* empty css                   */
-import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
-import { useCallback as se, useEffect as s, useId as ce, useMemo as le, useRef as c, useState as l } from "react";
+import { useCallback as se, useEffect as i, useId as ce, useMemo as le, useRef as a, useState as o } from "react";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
 import { useControl as u } from "react-use-control";
 //#region src/lib/components/Combobox/Combobox.tsx
 var ue = "haze-Combobox__wrapper", de = "haze-Combobox__input", fe = "haze-Combobox__multiBox", pe = "haze-Combobox__multiInput", d = "haze-Combobox__matchMark", f = "haze-Combobox__stateRow", me = "haze-Combobox__groupHeadingText", he = "haze-Combobox__listbox", ge = "haze-Combobox__listboxVirtual", _e = 200, ve = 37, ye = "haze-Combobox__virtualRow";
 function be(t, n) {
 	if (n === "") return t;
 	let r = t.toLowerCase().indexOf(n.toLowerCase());
-	return r < 0 ? t : /* @__PURE__ */ o(i, { children: [
+	return r < 0 ? t : /* @__PURE__ */ l(s, { children: [
 		t.slice(0, r),
-		/* @__PURE__ */ a("mark", {
+		/* @__PURE__ */ c("mark", {
+			"data-slot": "match",
 			className: e([d]),
 			children: t.slice(r, r + n.length)
 		}),
 		t.slice(r + n.length)
 	] });
 }
-function p({ value: i, open: d, options: p, multiple: m = !1, onValuesChange: h, creatable: xe = !1, onCreate: Se, onSearch: g, loading: _ = !1, empty: Ce, highlightMatches: we = !1, maxHeight: v, placeholder: Te, virtualThreshold: y = 100, virtualized: b, className: Ee, ref: x }) {
-	let S = r("combobox"), [C, w] = u(i, m ? [] : ""), [T, De] = l([]), [E, D] = l(""), [O, k] = u(d, !1), [A, j] = l(-1), [Oe, ke] = l(E), M = ce(), N = c(null), Ae = se((e) => t(N, x)(e), [N, x]), P = c(null), F = c(null), I = c(null), L = c(null), R = te({
+function p({ value: s, open: d, options: p, multiple: m = !1, onValuesChange: h, creatable: xe = !1, onCreate: Se, onSearch: g, loading: _ = !1, empty: Ce, highlightMatches: we = !1, maxHeight: v, placeholder: Te, virtualThreshold: y = 100, virtualized: b, className: Ee, ref: x }) {
+	let S = r("combobox"), [C, w] = u(s, m ? [] : ""), [T, De] = o([]), [E, D] = o(""), [O, k] = u(d, !1), [A, j] = o(-1), [Oe, ke] = o(E), M = ce(), N = a(null), Ae = se((e) => t(N, x)(e), [N, x]), P = a(null), F = a(null), I = a(null), L = a(null), R = te({
 		open: O,
 		setOpen: k,
 		triggerRef: m ? P : N,
@@ -74,7 +75,7 @@ function p({ value: i, open: d, options: p, multiple: m = !1, onValuesChange: h,
 		});
 	}
 	let Pe = Y.some((e) => e.label !== void 0);
-	s(() => {
+	i(() => {
 		if (!R.shown || A < 0) return;
 		if (K) {
 			I.current?.scrollToIndex(A, "auto");
@@ -87,12 +88,12 @@ function p({ value: i, open: d, options: p, multiple: m = !1, onValuesChange: h,
 		R.shown,
 		A
 	]);
-	let X = c(g);
-	s(() => {
+	let X = a(g);
+	i(() => {
 		X.current = g;
 	}, [g]);
-	let Z = c(E);
-	s(() => {
+	let Z = a(E);
+	i(() => {
 		Z.current !== E && (Z.current = E, X.current?.(E));
 	}, [E]), E !== Oe && (ke(E), j(-1));
 	let Fe = (e) => m ? z.includes(e) : C === e, Ie = (e) => B.find((t) => t.value === e)?.label ?? e, Le = (e, t) => {
@@ -120,7 +121,7 @@ function p({ value: i, open: d, options: p, multiple: m = !1, onValuesChange: h,
 			let t = z.slice(0, -1);
 			w(t), h?.(t);
 		}
-	}, Q = (e, t, n) => /* @__PURE__ */ a(oe, {
+	}, Q = (e, t, n) => /* @__PURE__ */ c(oe, {
 		ref: !n && t === A ? L : void 0,
 		value: e.value,
 		id: J(t),
@@ -131,8 +132,9 @@ function p({ value: i, open: d, options: p, multiple: m = !1, onValuesChange: h,
 		onSelect: ze,
 		className: n ? ye : void 0,
 		children: H && t === 0 ? je : we ? be(e.label, E) : e.label
-	}, e.value), $ = /* @__PURE__ */ a("input", {
+	}, e.value), $ = /* @__PURE__ */ c("input", {
 		ref: Ae,
+		"data-slot": "input",
 		role: "combobox",
 		style: m ? void 0 : R.triggerStyle,
 		"aria-expanded": O,
@@ -150,19 +152,21 @@ function p({ value: i, open: d, options: p, multiple: m = !1, onValuesChange: h,
 		onClick: m ? void 0 : R.onTriggerClick,
 		onKeyDown: Be
 	});
-	return /* @__PURE__ */ o("div", {
+	return /* @__PURE__ */ l("div", {
 		className: e([ue, Ee]),
-		children: [m ? /* @__PURE__ */ o("div", {
+		children: [m ? /* @__PURE__ */ l("div", {
 			ref: P,
+			"data-slot": "trigger",
 			style: R.triggerStyle,
 			onPointerDown: R.onTriggerPointerDown,
 			onClick: () => {
 				R.onTriggerClick(), N.current?.focus();
 			},
 			className: e(fe),
-			children: [z.map((e) => /* @__PURE__ */ a("span", {
+			children: [z.map((e) => /* @__PURE__ */ c("span", {
+				"data-slot": "item",
 				onClick: (e) => e.stopPropagation(),
-				children: /* @__PURE__ */ a(ne, {
+				children: /* @__PURE__ */ c(ne, {
 					color: "primary",
 					onClose: () => {
 						let t = z.filter((t) => t !== e);
@@ -171,7 +175,7 @@ function p({ value: i, open: d, options: p, multiple: m = !1, onValuesChange: h,
 					children: Ie(e)
 				})
 			}, e)), $]
-		}) : $, /* @__PURE__ */ a(ee, {
+		}) : $, /* @__PURE__ */ c(ee, {
 			ref: F,
 			behavior: R,
 			placement: "bottom-span",
@@ -180,19 +184,21 @@ function p({ value: i, open: d, options: p, multiple: m = !1, onValuesChange: h,
 			"aria-multiselectable": m ? "true" : void 0,
 			visualClass: K ? ge : he,
 			style: v !== void 0 && !K ? { maxHeight: `${v}px` } : void 0,
-			children: _ ? /* @__PURE__ */ a("div", {
+			children: _ ? /* @__PURE__ */ c("div", {
 				role: "option",
+				"data-slot": "loading",
 				"aria-selected": !1,
 				"aria-disabled": "true",
 				className: e([f]),
-				children: /* @__PURE__ */ a(re, { size: "sm" })
-			}) : W.length === 0 ? /* @__PURE__ */ a("div", {
+				children: /* @__PURE__ */ c(re, { size: "sm" })
+			}) : W.length === 0 ? /* @__PURE__ */ c("div", {
 				role: "option",
+				"data-slot": "empty",
 				"aria-selected": !1,
 				"aria-disabled": "true",
 				className: e([f]),
 				children: Ce ?? S.noResults
-			}) : K ? /* @__PURE__ */ a(ie, {
+			}) : K ? /* @__PURE__ */ c(ie, {
 				ref: I,
 				"data-virtualized": !0,
 				items: W,
@@ -202,13 +208,14 @@ function p({ value: i, open: d, options: p, multiple: m = !1, onValuesChange: h,
 				groups: Pe ? Y.filter((e) => e.label !== void 0).map((t) => ({
 					startIndex: t.rows[0]?.index ?? 0,
 					key: t.key,
-					render: () => /* @__PURE__ */ a("div", {
+					render: () => /* @__PURE__ */ c("div", {
+						"data-slot": "group-label",
 						className: e([me]),
 						children: t.label
 					})
 				})) : void 0,
 				renderItem: (e, t) => Q(e, t, !0)
-			}) : Y.flatMap((e) => e.label === void 0 ? e.rows.map(({ option: e, index: t }) => Q(e, t, !1)) : [/* @__PURE__ */ a(ae, {
+			}) : Y.flatMap((e) => e.label === void 0 ? e.rows.map(({ option: e, index: t }) => Q(e, t, !1)) : [/* @__PURE__ */ c(ae, {
 				label: e.label,
 				children: e.rows.map(({ option: e, index: t }) => Q(e, t, !1))
 			}, e.key)])

package/dist/components/Combobox/ComboboxGroup.js

@@ -2,18 +2,20 @@
 "use client";
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                        */
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { useId as r } from "react";
+import { useId as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/lib/components/Combobox/ComboboxGroup.tsx
 var i = "haze-ComboboxGroup__groupHeading";
 function a({ label: a, className: o, children: s }) {
-	let c = r();
-	return /* @__PURE__ */ n("div", {
+	let c = t();
+	return /* @__PURE__ */ r("div", {
+		"data-slot": "group",
 		role: "group",
 		"aria-labelledby": c,
 		className: e([o]),
-		children: [/* @__PURE__ */ t("div", {
+		children: [/* @__PURE__ */ n("div", {
 			id: c,
+			"data-slot": "group-label",
 			className: e([i]),
 			children: a
 		}), s]

package/dist/components/Combobox/ComboboxOption.js

@@ -8,6 +8,7 @@ var n = "haze-ComboboxOption__option", r = "haze-ComboboxOption__highlightedStyl
 function a({ value: a, highlighted: o = !1, selected: s = !1, id: c, ref: l, setSize: u, posInSet: d, onSelect: f, className: p, children: m }) {
 	return /* @__PURE__ */ t("div", {
 		ref: l,
+		"data-slot": "option",
 		role: "option",
 		id: c,
 		"aria-selected": s || o,