haze-ui 1.28.0 → 1.30.0

package/dist/components/Calendar/date.js

@@ -41,15 +41,26 @@ function r(r, i, a) {
 }
 function i(e, t, n) {
 	let r = new Date(e, t, n).getDay(), i = r === 0 ? 7 : r, a = Date.UTC(e, t, n + 4 - i), o = new Date(a).getUTCFullYear(), s = (a - Date.UTC(o, 0, 1)) / 864e5;
-	return Math.floor(s / 7) + 1;
+	return {
+		year: o,
+		week: Math.floor(s / 7) + 1
+	};
 }
-function a(e, t, n) {
+function a(e, t) {
+	let n = new Date(Date.UTC(e, 0, 4)).getUTCDay(), r = n === 0 ? 7 : n, i = Date.UTC(e, 0, 4 - (r - 1)) + (t - 1) * 7 * 864e5, a = new Date(i);
+	return {
+		year: a.getUTCFullYear(),
+		month: a.getUTCMonth(),
+		day: a.getUTCDate()
+	};
+}
+function o(e, t, n) {
 	return `${e}-${String(t + 1).padStart(2, "0")}-${String(n).padStart(2, "0")}`;
 }
-function o(e, t) {
+function s(e, t) {
 	return `${e}-${String(t + 1).padStart(2, "0")}`;
 }
-function s(e) {
+function c(e) {
 	let t = /^(\d{4})-(\d{2})$/.exec(e);
 	if (!t) return null;
 	let n = Number(t[1]), r = Number(t[2]) - 1;
@@ -58,24 +69,38 @@ function s(e) {
 		month: r
 	};
 }
-function c(e, t) {
+function l(e, t) {
 	return `${e}-Q${t}`;
 }
-function l(e) {
+function u(e) {
 	let t = /^(\d{4})-Q([1-4])$/.exec(e);
 	return t ? {
 		year: Number(t[1]),
 		quarter: Number(t[2])
 	} : null;
 }
-function u(e) {
+function d(e) {
 	return String(e);
 }
-function d(e) {
+function f(e) {
 	let t = /^(\d{4})$/.exec(e);
 	return t ? { year: Number(t[1]) } : null;
 }
-function f(t) {
+function p(e, t) {
+	return `${e}-W${String(t).padStart(2, "0")}`;
+}
+function m(e) {
+	let t = /^(\d{4})-W(\d{2})$/.exec(e);
+	if (!t) return null;
+	let n = Number(t[1]), r = Number(t[2]);
+	if (r < 1 || r > 53) return null;
+	let o = a(n, r), s = i(o.year, o.month, o.day);
+	return s.year !== n || s.week !== r ? null : {
+		year: n,
+		week: r
+	};
+}
+function h(t) {
 	let n = /^(\d{4})-(\d{2})-(\d{2})$/.exec(t);
 	if (!n) return null;
 	let r = Number(n[1]), i = Number(n[2]) - 1, a = Number(n[3]);
@@ -84,4 +109,4 @@ function f(t) {
 	return o.getFullYear() !== r || o.getMonth() !== i || o.getDate() !== a ? null : o;
 }
 //#endregion
-export { t as addMonths, r as buildMonthCells, a as formatDate, o as formatMonthValue, c as formatQuarterValue, u as formatYearValue, e as getDaysInMonth, i as getISOWeekNumber, n as getLeadingDays, f as parseCivilDate, s as parseMonthValue, l as parseQuarterValue, d as parseYearValue };
+export { t as addMonths, r as buildMonthCells, o as formatDate, s as formatMonthValue, l as formatQuarterValue, p as formatWeekValue, d as formatYearValue, e as getDaysInMonth, i as getISOWeek, a as getISOWeekStartDate, n as getLeadingDays, h as parseCivilDate, c as parseMonthValue, u as parseQuarterValue, m as parseWeekValue, f as parseYearValue };

package/dist/components/Card/Card.js

@@ -10,6 +10,7 @@ var n = "haze-Card__base", r = {
 };
 function i({ variant: i = "elevated", className: a, children: o }) {
 	return /* @__PURE__ */ t("div", {
+		"data-slot": "card",
 		className: e([
 			n,
 			r[i],

package/dist/components/Carousel/Carousel.js

@@ -5,90 +5,187 @@ import { getDirection as t } from "../../utils/direction.js";
 import { formatString as n } from "../LocaleProvider/locale.js";
 import { useStrings as r } from "../LocaleProvider/useStrings.js";
 /* empty css                   */
-import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
-import { Children as s, useEffect as c, useRef as l } from "react";
-import { useControl as u } from "react-use-control";
+import { Children as i, cloneElement as a, isValidElement as o, useCallback as s, useEffect as c, useRef as l } from "react";
+import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
+import { useControl as p } from "react-use-control";
 //#region src/lib/components/Carousel/Carousel.tsx
-var d = "haze-Carousel__wrapper", f = "haze-Carousel__track", p = "haze-Carousel__navBtn", m = "haze-Carousel__prevBtn", h = "haze-Carousel__nextBtn", g = "haze-Carousel__indicators", _ = "haze-Carousel__dot", v = "haze-Carousel__dotActive";
-function y({ value: y, autoPlay: b = !1, interval: x = 5e3, className: S, children: C }) {
-	let [w, T] = u(y, 0), E = l(null), D = l(null), O = s.count(C), k = r("carousel");
+var m = 4, h = .25, g = () => void 0, ee = "haze-Carousel__wrapper", _ = "haze-Carousel__track", v = "haze-Carousel__fadeTrack", y = "haze-Carousel__navBtn", b = "haze-Carousel__prevBtn", te = "haze-Carousel__nextBtn", x = "haze-Carousel__indicators", S = "haze-Carousel__dot", C = "haze-Carousel__dotActive";
+function w({ value: w, autoPlay: T = !1, interval: E = 5e3, effect: ne = "slide", pauseOnHover: D = !1, className: O, children: k }) {
+	let [A, j] = p(w, 0), M = l(null), N = l(null), P = i.count(k), F = r("carousel"), I = ne === "fade";
 	c(() => {
-		let e = E.current;
+		if (I) return;
+		let e = M.current;
 		if (!e) return;
-		let t = e.children[w];
+		let t = e.children[A];
 		t && t.scrollIntoView({
 			behavior: "smooth",
 			block: "nearest",
 			inline: "start"
 		});
-	}, [w]), c(() => {
-		if (!b || O <= 1) return;
-		let e = setInterval(() => {
-			T((e) => (e + 1) % O);
-		}, x);
-		return () => clearInterval(e);
+	}, [A, I]);
+	let L = () => j((e) => (e - 1 + P) % P), R = () => j((e) => (e + 1) % P), z = l(null), B = l(0), V = l(0), H = l(!1), U = l(!1), W = l(!1), G = l(!1), K = l(g), q = l(g);
+	c(() => {
+		if (!T || P <= 1) {
+			K.current = g, q.current = g;
+			return;
+		}
+		let e = () => j((e) => (e + 1) % P), t = () => {
+			B.current = Date.now(), z.current = setTimeout(() => {
+				z.current = null, e(), V.current = E, H.current || t();
+			}, V.current);
+		}, n = () => {
+			z.current !== null && (clearTimeout(z.current), z.current = null, V.current = Math.max(1, V.current - (Date.now() - B.current)));
+		};
+		return K.current = n, q.current = () => {
+			z.current === null && V.current > 0 && t();
+		}, V.current = E, H.current || t(), n;
 	}, [
-		b,
-		x,
-		O,
-		T
+		T,
+		E,
+		P,
+		j
 	]);
-	let A = () => T((e) => (e - 1 + O) % O), j = () => T((e) => (e + 1) % O);
-	return /* @__PURE__ */ o("div", {
-		ref: D,
+	let J = s(() => {
+		H.current = G.current || D && (U.current || W.current), H.current ? K.current() : q.current();
+	}, [D]), Y = l(null), X = l(!1), Z = (e, t) => {
+		try {
+			e.setPointerCapture(t);
+		} catch {}
+		e.style.userSelect = "none", I || (e.style.scrollBehavior = "auto", e.style.scrollSnapType = "none");
+	}, Q = (e) => {
+		e && (e.style.userSelect = "", e.style.scrollBehavior = "", e.style.scrollSnapType = "");
+	}, $ = () => {
+		I || (M.current?.children[A])?.scrollIntoView({
+			behavior: "smooth",
+			block: "nearest",
+			inline: "start"
+		});
+	}, re = (e) => {
+		P <= 1 || e.button !== 0 || (I || e.pointerType === "mouse") && (Y.current = {
+			pointerId: e.pointerId,
+			startX: e.clientX,
+			startScrollLeft: M.current?.scrollLeft ?? 0,
+			moved: !1
+		}, G.current = !0, J());
+	}, ie = (e) => {
+		let t = Y.current, n = M.current;
+		if (!t || !n || t.pointerId !== e.pointerId) return;
+		let r = e.clientX - t.startX;
+		if (!t.moved) {
+			if (Math.abs(r) < m) return;
+			t.moved = !0, Z(n, e.pointerId);
+		}
+		I || (n.scrollLeft = t.startScrollLeft - r);
+	}, ae = (e) => {
+		let n = Y.current;
+		if (!n || n.pointerId !== e.pointerId) return;
+		let r = M.current;
+		Y.current = null, Q(r), G.current = !1;
+		let i = N.current;
+		if (i) {
+			let t = i.getBoundingClientRect();
+			(e.clientX < t.left || e.clientX > t.right || e.clientY < t.top || e.clientY > t.bottom) && (U.current = !1);
+		}
+		if (J(), !n.moved) return;
+		X.current = !0;
+		let a = r?.getBoundingClientRect().width ?? 0, o = Math.max(1, a * h), s = e.clientX - n.startX;
+		if (Math.abs(s) < o) {
+			$();
+			return;
+		}
+		let c = t(N.current) === "rtl";
+		s > 0 ? c ? R() : L() : c ? L() : R();
+	}, oe = (e) => {
+		let t = Y.current;
+		t && t.pointerId === e.pointerId && (Y.current = null, Q(M.current), G.current = !1, J(), t.moved && (X.current = !0, $()));
+	}, se = (e) => {
+		X.current && (X.current = !1, e.preventDefault(), e.stopPropagation());
+	}, ce = (e) => {
+		Y.current && e.preventDefault();
+	}, le = (e) => {
+		if (P <= 1) return;
+		let n = t(N.current) === "rtl" ? "ArrowLeft" : "ArrowRight", r = n === "ArrowLeft" ? "ArrowRight" : "ArrowLeft";
+		switch (e.key) {
+			case n:
+				e.preventDefault(), R();
+				return;
+			case r:
+				e.preventDefault(), L();
+				return;
+			case "Home":
+				e.preventDefault(), j(0);
+				return;
+			case "End":
+				e.preventDefault(), j(P - 1);
+				return;
+		}
+	}, ue = !I || P === 0 ? k : i.map(k, (e, t) => o(e) ? a(e, {
+		"data-active": t === A || void 0,
+		inert: t !== A || void 0
+	}) : e);
+	return /* @__PURE__ */ f("div", {
+		ref: N,
+		"data-slot": "carousel",
 		role: "region",
 		"aria-roledescription": "carousel",
-		"aria-label": k.label,
+		"aria-label": F.label,
 		tabIndex: 0,
-		onKeyDown: (e) => {
-			if (O <= 1) return;
-			let n = t(D.current) === "rtl" ? "ArrowLeft" : "ArrowRight", r = n === "ArrowLeft" ? "ArrowRight" : "ArrowLeft";
-			switch (e.key) {
-				case n:
-					e.preventDefault(), j();
-					return;
-				case r:
-					e.preventDefault(), A();
-					return;
-				case "Home":
-					e.preventDefault(), T(0);
-					return;
-				case "End":
-					e.preventDefault(), T(O - 1);
-					return;
-			}
+		onKeyDown: le,
+		onPointerEnter: () => {
+			U.current = !0, J();
+		},
+		onPointerLeave: () => {
+			U.current = !1, J();
+		},
+		onFocus: () => {
+			W.current = !0, J();
+		},
+		onBlur: (e) => {
+			let t = e.relatedTarget;
+			t instanceof Node && e.currentTarget.contains(t) || (W.current = !1, J());
 		},
-		className: e([d, S]),
-		children: [/* @__PURE__ */ a("div", {
-			ref: E,
-			className: f,
-			children: C
-		}), O > 1 && /* @__PURE__ */ o(i, { children: [
-			/* @__PURE__ */ a("button", {
+		className: e([ee, O]),
+		children: [/* @__PURE__ */ d("div", {
+			ref: M,
+			"data-slot": "track",
+			onPointerDown: re,
+			onPointerMove: ie,
+			onPointerUp: ae,
+			onPointerCancel: oe,
+			onClickCapture: se,
+			onDragStart: ce,
+			className: e([I ? v : _]),
+			children: ue
+		}), P > 1 && /* @__PURE__ */ f(u, { children: [
+			/* @__PURE__ */ d("button", {
 				type: "button",
-				onClick: A,
-				"aria-label": k.previousSlide,
-				className: e([p, m]),
+				"data-slot": "prev",
+				onClick: L,
+				"aria-label": F.previousSlide,
+				className: e([y, b]),
 				children: "‹"
 			}),
-			/* @__PURE__ */ a("button", {
+			/* @__PURE__ */ d("button", {
 				type: "button",
-				onClick: j,
-				"aria-label": k.nextSlide,
-				className: e([p, h]),
+				"data-slot": "next",
+				onClick: R,
+				"aria-label": F.nextSlide,
+				className: e([y, te]),
 				children: "›"
 			}),
-			/* @__PURE__ */ a("div", {
-				className: g,
-				children: Array.from({ length: O }, (t, r) => /* @__PURE__ */ a("button", {
+			/* @__PURE__ */ d("div", {
+				"data-slot": "dots",
+				className: x,
+				children: Array.from({ length: P }, (t, r) => /* @__PURE__ */ d("button", {
 					type: "button",
-					onClick: () => T(r),
-					"aria-label": n(k.goToSlide, { index: r + 1 }),
-					className: e([_, r === w && v])
+					"data-slot": "dot",
+					onClick: () => j(r),
+					"aria-label": n(F.goToSlide, { index: r + 1 }),
+					className: e([S, r === A && C])
 				}, r))
 			})
 		] })]
 	});
 }
 //#endregion
-export { y as default };
+export { w as default };

package/dist/components/Carousel/CarouselSlide.js

@@ -5,10 +5,12 @@ import { classnames as e } from "../../utils/classnames.js";
 import { jsx as t } from "react/jsx-runtime";
 //#region src/lib/components/Carousel/CarouselSlide.tsx
 var n = "haze-CarouselSlide__slide";
-function r({ className: r, children: i }) {
+function r({ className: r, children: i, ...a }) {
 	return /* @__PURE__ */ t("div", {
+		"data-slot": "slide",
 		role: "group",
 		"aria-roledescription": "slide",
+		...a,
 		className: e([n, r]),
 		children: i
 	});

package/dist/components/Cascader/Cascader.js

@@ -9,11 +9,11 @@ import o from "../Spinner/Spinner.js";
 import ee from "../VirtualList/VirtualList.js";
 import { useFocusScope as te } from "../../utils/focus-scope.js";
 /* empty css                   */
-import { Fragment as ne, jsx as s, jsxs as c } from "react/jsx-runtime";
-import { Fragment as re, useCallback as l, useEffect as u, useId as ie, useRef as d, useState as f } from "react";
+import { Fragment as ne, useCallback as s, useEffect as c, useId as re, useRef as l, useState as u } from "react";
+import { Fragment as ie, jsx as d, jsxs as f } from "react/jsx-runtime";
 import { isControl as ae, useControl as p, useThru as oe, watch as se } from "react-use-control";
 //#region src/lib/components/Cascader/Cascader.tsx
-var ce = "haze-Cascader__wrapper", le = "haze-Cascader__trigger", ue = "haze-Cascader__triggerValue", de = "haze-Cascader__triggerPlaceholder", fe = "haze-Cascader__triggerCaret", pe = "haze-Cascader__separator", me = "haze-Cascader__panel", he = "haze-Cascader__panelSearch", ge = "haze-Cascader__columnsStrip", _e = "haze-Cascader__searchInput", ve = "haze-Cascader__loadingBlock", ye = "haze-Cascader__emptyBlock", be = "haze-Cascader__column", xe = "haze-Cascader__columnVirtual", Se = 220, Ce = 37, we = "haze-Cascader__virtualRow", Te = "haze-Cascader__item", Ee = "haze-Cascader__itemInPath", De = "haze-Cascader__itemLabel", Oe = "haze-Cascader__chevron", ke = () => /* @__PURE__ */ s("svg", {
+var ce = "haze-Cascader__wrapper", le = "haze-Cascader__trigger", ue = "haze-Cascader__triggerValue", de = "haze-Cascader__triggerPlaceholder", fe = "haze-Cascader__triggerCaret", pe = "haze-Cascader__separator", me = "haze-Cascader__panel", he = "haze-Cascader__panelSearch", ge = "haze-Cascader__columnsStrip", _e = "haze-Cascader__searchInput", ve = "haze-Cascader__loadingBlock", ye = "haze-Cascader__emptyBlock", be = "haze-Cascader__column", xe = "haze-Cascader__columnVirtual", Se = 220, Ce = 37, we = "haze-Cascader__virtualRow", Te = "haze-Cascader__item", Ee = "haze-Cascader__itemInPath", De = "haze-Cascader__itemLabel", Oe = "haze-Cascader__chevron", ke = () => /* @__PURE__ */ d("svg", {
 	viewBox: "0 0 12 12",
 	fill: "none",
 	stroke: "currentColor",
@@ -22,8 +22,8 @@ var ce = "haze-Cascader__wrapper", le = "haze-Cascader__trigger", ue = "haze-Cas
 	strokeLinejoin: "round",
 	"aria-hidden": "true",
 	focusable: "false",
-	children: s("path", { d: "M4 2l4 4-4 4" })
-}), Ae = () => /* @__PURE__ */ s("svg", {
+	children: d("path", { d: "M4 2l4 4-4 4" })
+}), Ae = () => /* @__PURE__ */ d("svg", {
 	viewBox: "0 0 12 12",
 	fill: "none",
 	stroke: "currentColor",
@@ -32,7 +32,7 @@ var ce = "haze-Cascader__wrapper", le = "haze-Cascader__trigger", ue = "haze-Cas
 	strokeLinejoin: "round",
 	"aria-hidden": "true",
 	focusable: "false",
-	children: s("path", { d: "M2 4l4 4 4-4" })
+	children: d("path", { d: "M2 4l4 4 4-4" })
 }), m = "[role=\"menuitem\"]";
 function h(e) {
 	return e ? Array.from(e.querySelectorAll("[data-haze-cascader-column]")) : [];
@@ -41,7 +41,7 @@ function g(e) {
 	return e ? Array.from(e.querySelectorAll(m)) : [];
 }
 function _({ options: _, value: v, onChange: je, placeholder: Me, changeOnSelect: Ne = !1, expandTrigger: Pe = "click", onSearch: y, loading: b = !1, virtualized: x, className: Fe, ref: S, ...Ie }) {
-	let Le = r("cascader"), C = r("select"), [w, T] = p(!1, !1), E = ae(v), [D, O] = p(oe(E ? v : void 0, se((e) => je?.(e))), E ? [] : v ?? []), [k, A] = f([]), [j, M] = f(null), N = y !== void 0, [P, Re] = f(""), F = x !== void 0 && x !== !1, I = typeof x == "object" ? x : void 0, L = I?.itemHeight ?? Ce, ze = I?.overscan, R = ie(), z = d(null), Be = l((e) => t(z, S)(e), [z, S]), B = d(null), V = d(null), H = d(/* @__PURE__ */ new Map()), U = d(!1), W = a({
+	let Le = r("cascader"), C = r("select"), [w, T] = p(!1, !1), E = ae(v), [D, O] = p(oe(E ? v : void 0, se((e) => je?.(e))), E ? [] : v ?? []), [k, A] = u([]), [j, M] = u(null), N = y !== void 0, [P, Re] = u(""), F = x !== void 0 && x !== !1, I = typeof x == "object" ? x : void 0, L = I?.itemHeight ?? Ce, ze = I?.overscan, R = re(), z = l(null), Be = s((e) => t(z, S)(e), [z, S]), B = l(null), V = l(null), H = l(/* @__PURE__ */ new Map()), U = l(!1), W = a({
 		open: w,
 		setOpen: T,
 		triggerRef: z,
@@ -51,11 +51,11 @@ function _({ options: _, value: v, onChange: je, placeholder: Me, changeOnSelect
 		enabled: w,
 		autoFocus: !1,
 		returnFocus: !0
-	}), K = d(!1);
-	u(() => {
+	}), K = l(!1);
+	c(() => {
 		let e = w && !K.current;
 		K.current = w, e && A(D);
-	}, [w, D]), u(() => {
+	}, [w, D]), c(() => {
 		if (!w) {
 			U.current = !1, M(null);
 			return;
@@ -103,17 +103,17 @@ function _({ options: _, value: v, onChange: je, placeholder: Me, changeOnSelect
 		_,
 		N
 	]);
-	let q = d(y);
-	u(() => {
+	let q = l(y);
+	c(() => {
 		q.current = y;
 	}, [y]);
-	let J = d(P);
-	u(() => {
+	let J = l(P);
+	c(() => {
 		J.current !== P && (J.current = P, q.current?.(P));
 	}, [P]), !w && P !== "" && Re("");
-	let Ve = l((e) => {
+	let Ve = s((e) => {
 		B.current = e, G(e);
-	}, [B, G]), He = l((e) => (t) => {
+	}, [B, G]), He = s((e) => (t) => {
 		t ? H.current.set(e, t) : H.current.delete(e);
 	}, []), Y = [_];
 	for (let e of k) {
@@ -205,7 +205,8 @@ function _({ options: _, value: v, onChange: je, placeholder: Me, changeOnSelect
 		}
 	}, qe = (t, n, r) => {
 		let i = !!t.children?.length, a = k[n] === t.value;
-		return /* @__PURE__ */ c("button", {
+		return /* @__PURE__ */ f("button", {
+			"data-slot": "option",
 			type: "button",
 			role: "menuitem",
 			tabIndex: -1,
@@ -222,21 +223,24 @@ function _({ options: _, value: v, onChange: je, placeholder: Me, changeOnSelect
 				a && Ee,
 				F && we
 			]),
-			children: [/* @__PURE__ */ s("span", {
+			children: [/* @__PURE__ */ d("span", {
+				"data-slot": "label",
 				className: e(De),
 				children: t.label
-			}), i && /* @__PURE__ */ s("span", {
+			}), i && /* @__PURE__ */ d("span", {
 				role: "img",
+				"data-slot": "icon",
 				"aria-label": Le.expand,
 				className: e(Oe),
-				children: /* @__PURE__ */ s(ke, {})
+				children: /* @__PURE__ */ d(ke, {})
 			})]
 		}, t.value);
-	}, Je = Y.map((t, n) => /* @__PURE__ */ s("div", {
+	}, Je = Y.map((t, n) => /* @__PURE__ */ d("div", {
+		"data-slot": "column",
 		role: "menu",
 		"data-haze-cascader-column": n,
 		className: e([be, F && xe]),
-		children: F ? /* @__PURE__ */ s(ee, {
+		children: F ? /* @__PURE__ */ d(ee, {
 			ref: He(n),
 			"data-virtualized": !0,
 			items: t,
@@ -245,18 +249,21 @@ function _({ options: _, value: v, onChange: je, placeholder: Me, changeOnSelect
 			overscan: ze,
 			renderItem: (e, t) => qe(e, n, t)
 		}) : t.map((e, t) => qe(e, n, t))
-	}, n)), $ = b ? /* @__PURE__ */ c("div", {
+	}, n)), $ = b ? /* @__PURE__ */ f("div", {
+		"data-slot": "loading",
 		className: e(ve),
-		children: [/* @__PURE__ */ s(o, { size: "sm" }), /* @__PURE__ */ s("span", { children: C.loading })]
-	}) : N && _.length === 0 ? /* @__PURE__ */ s("div", {
+		children: [/* @__PURE__ */ d(o, { size: "sm" }), /* @__PURE__ */ d("span", { children: C.loading })]
+	}) : N && _.length === 0 ? /* @__PURE__ */ d("div", {
+		"data-slot": "empty",
 		className: e(ye),
 		children: C.noMatch
 	}) : Je;
-	return /* @__PURE__ */ c("div", {
+	return /* @__PURE__ */ f("div", {
 		...Ie,
 		className: e([ce, Fe]),
-		children: [/* @__PURE__ */ c("button", {
+		children: [/* @__PURE__ */ f("button", {
 			ref: Be,
+			"data-slot": "trigger",
 			type: "button",
 			style: W.triggerStyle,
 			"aria-haspopup": "menu",
@@ -266,21 +273,25 @@ function _({ options: _, value: v, onChange: je, placeholder: Me, changeOnSelect
 			onClick: W.onTriggerClick,
 			onKeyDown: Ge,
 			className: e(le),
-			children: [/* @__PURE__ */ s("span", {
+			children: [/* @__PURE__ */ d("span", {
+				"data-slot": "value",
 				className: e(ue),
-				children: Z.length === 0 ? /* @__PURE__ */ s("span", {
+				children: Z.length === 0 ? /* @__PURE__ */ d("span", {
+					"data-slot": "placeholder",
 					className: e(de),
 					children: Me
-				}) : Z.map((t, n) => /* @__PURE__ */ c(re, { children: [n > 0 && /* @__PURE__ */ s("span", {
+				}) : Z.map((t, n) => /* @__PURE__ */ f(ne, { children: [n > 0 && /* @__PURE__ */ d("span", {
+					"data-slot": "separator",
 					className: e(pe),
 					children: " / "
 				}), t.label] }, t.value))
-			}), /* @__PURE__ */ s("span", {
+			}), /* @__PURE__ */ d("span", {
+				"data-slot": "icon",
 				"aria-hidden": "true",
 				className: e(fe),
-				children: /* @__PURE__ */ s(Ae, {})
+				children: /* @__PURE__ */ d(Ae, {})
 			})]
-		}), /* @__PURE__ */ s(i, {
+		}), /* @__PURE__ */ d(i, {
 			ref: Ve,
 			behavior: W,
 			placement: "bottom",
@@ -289,16 +300,18 @@ function _({ options: _, value: v, onChange: je, placeholder: Me, changeOnSelect
 			"aria-busy": b || void 0,
 			visualClass: N ? he : me,
 			onKeyDown: Ke,
-			children: N ? /* @__PURE__ */ c(ne, { children: [/* @__PURE__ */ s("input", {
+			children: N ? /* @__PURE__ */ f(ie, { children: [/* @__PURE__ */ d("input", {
 				ref: V,
+				"data-slot": "input",
 				type: "text",
 				"aria-label": C.searchLabel,
 				placeholder: C.searchPlaceholder,
 				value: P,
 				onChange: (e) => Re(e.target.value),
 				className: e(_e)
-			}), /* @__PURE__ */ s("div", {
+			}), /* @__PURE__ */ d("div", {
 				id: R,
+				"data-slot": "columns",
 				role: !b && _.length > 0 ? "menu" : void 0,
 				className: e(ge),
 				children: $

package/dist/components/Chart/Chart.js

@@ -3,13 +3,14 @@
 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";
+import { useMemo as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
 //#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", {
+	let b = r(() => n(c), [c]);
+	return /* @__PURE__ */ i("div", {
+		"data-slot": "chart",
 		style: {
 			height: u,
 			...v