haze-ui 1.30.0 → 1.32.0

package/dist/components/Select/SelectFloating.js

@@ -1,24 +1,24 @@
 
 "use client";
 import { classnames as e } from "../../utils/classnames.js";
-import { mergeRefs as t } from "../../utils/refs.js";
-import { formatString as n } from "../LocaleProvider/locale.js";
-import { useStrings as r } from "../LocaleProvider/useStrings.js";
-import { FloatingPanel as i, useFloating as ee } from "../../utils/floating.js";
-import te from "../Chip/Chip.js";
-import ne from "../Spinner/Spinner.js";
-import re from "../VirtualList/VirtualList.js";
-import { filterSelectEntries as ie, flattenSelectEntries as a, selectOptionText as ae } from "./select-options.js";
+import { formatString as t } from "../LocaleProvider/locale.js";
+import { useStrings as n } from "../LocaleProvider/useStrings.js";
+import r from "../Spinner/Spinner.js";
+import { mergeRefs as ee } from "../../utils/refs.js";
+import { FloatingPanel as te, useFloating as ne } from "../../utils/floating.js";
+import re from "../Chip/Chip.js";
+import ie from "../VirtualList/VirtualList.js";
+import { filterSelectEntries as ae, flattenSelectEntries as i, selectOptionText as oe } from "./select-options.js";
 /* empty css                         */
-import { useCallback as oe, useEffect as o, useId as se, useRef as s, useState as c } from "react";
-import { Fragment as ce, jsx as l, jsxs as u } from "react/jsx-runtime";
-import { useControl as le } from "react-use-control";
+import { useCallback as se, useEffect as a, useId as ce, useRef as o, useState as s } from "react";
+import { Fragment as le, jsx as c, jsxs as l } from "react/jsx-runtime";
+import { useControl as ue } from "react-use-control";
 //#region src/lib/components/Select/SelectFloating.tsx
-var ue = "haze-SelectFloating__wrapper", de = "haze-SelectFloating__trigger", fe = {
+var de = "haze-SelectFloating__wrapper", fe = "haze-SelectFloating__trigger", pe = {
 	sm: "haze-SelectFloating__sm",
 	md: "haze-SelectFloating__md",
 	lg: "haze-SelectFloating__lg"
-}, d = "haze-SelectFloating__placeholderText", pe = "haze-SelectFloating__triggerLabel", me = "haze-SelectFloating__chipItem", he = "haze-SelectFloating__chipRemove", ge = "haze-SelectFloating__overflowBadge", _e = "haze-SelectFloating__clearBtn", ve = "haze-SelectFloating__caret", ye = "haze-SelectFloating__listbox", be = "haze-SelectFloating__listboxVirtual", xe = "haze-SelectFloating__panelSearch", Se = "haze-SelectFloating__listboxInner", Ce = "haze-SelectFloating__searchInput", we = "haze-SelectFloating__loadingBlock", Te = "haze-SelectFloating__emptyBlock", Ee = "haze-SelectFloating__groupLabelText", De = "haze-SelectFloating__groupLabelRow", Oe = 200, ke = 29, Ae = "haze-SelectFloating__virtualRow", je = "haze-SelectFloating__optionRow", Me = "haze-SelectFloating__optionActive", Ne = "haze-SelectFloating__optionSelected", Pe = "haze-SelectFloating__checkboxVisual", Fe = "haze-SelectFloating__checkboxChecked", Ie = () => /* @__PURE__ */ l("svg", {
+}, u = "haze-SelectFloating__placeholderText", me = "haze-SelectFloating__triggerLabel", he = "haze-SelectFloating__chipItem", ge = "haze-SelectFloating__chipRemove", _e = "haze-SelectFloating__overflowBadge", ve = "haze-SelectFloating__clearBtn", ye = "haze-SelectFloating__caret", be = "haze-SelectFloating__listbox", xe = "haze-SelectFloating__listboxVirtual", Se = "haze-SelectFloating__panelSearch", Ce = "haze-SelectFloating__listboxInner", we = "haze-SelectFloating__searchInput", Te = "haze-SelectFloating__loadingBlock", Ee = "haze-SelectFloating__emptyBlock", d = "haze-SelectFloating__groupLabelText", De = "haze-SelectFloating__groupLabelRow", Oe = 200, ke = 29, Ae = "haze-SelectFloating__virtualRow", je = "haze-SelectFloating__optionRow", Me = "haze-SelectFloating__optionActive", Ne = "haze-SelectFloating__optionSelected", Pe = "haze-SelectFloating__checkboxVisual", Fe = "haze-SelectFloating__checkboxChecked", Ie = () => /* @__PURE__ */ c("svg", {
 	viewBox: "0 0 12 12",
 	width: "12",
 	height: "12",
@@ -29,244 +29,248 @@ var ue = "haze-SelectFloating__wrapper", de = "haze-SelectFloating__trigger", fe
 	strokeLinejoin: "round",
 	"aria-hidden": "true",
 	focusable: "false",
-	children: l("path", { d: "M2 4l4 4 4-4" })
+	children: c("path", { d: "M2 4l4 4 4-4" })
 });
-function f({ value: f, onChange: p, entries: m, multiple: h, placeholder: g, searchable: _ = !1, clearable: v = !1, loading: y = !1, onSearch: b, maxTagCount: x, size: Le = "md", virtualized: S, className: Re, ref: C, ...ze }) {
-	let w = r("select"), T = h && Array.isArray(f) ? f : [], E = !h && typeof f == "string" ? f : "", [D, O] = le(void 0, !1), [k, A] = c(-1), [j, M] = c(""), [Be, Ve] = c(j), N = se(), P = s(null), He = oe((e) => t(P, C)(e), [P, C]), F = s(null), I = s(null), L = s(null), R = s(null), z = S !== void 0 && S !== !1, B = typeof S == "object" ? S : void 0, V = B?.itemHeight ?? ke, Ue = B?.overscan, H = ee({
-		open: D,
-		setOpen: O,
-		triggerRef: P,
-		panelRef: F,
+function f({ value: f, onChange: p, entries: m, multiple: h, placeholder: g, searchable: _ = !1, clearable: v = !1, loading: y = !1, onSearch: b, maxTagCount: x, size: Le = "md", virtualized: S, className: Re, classNames: C, ref: w, ...ze }) {
+	let T = n("select"), E = h && Array.isArray(f) ? f : [], D = !h && typeof f == "string" ? f : "", [O, k] = ue(void 0, !1), [A, j] = s(-1), [M, N] = s(""), [Be, Ve] = s(M), P = ce(), F = o(null), He = se((e) => ee(F, w)(e), [F, w]), I = o(null), Ue = o(null), We = o(null), Ge = o(null), L = S !== void 0 && S !== !1, Ke = typeof S == "object" ? S : void 0, R = Ke?.itemHeight ?? ke, qe = Ke?.overscan, z = ne({
+		open: O,
+		setOpen: k,
+		triggerRef: F,
+		panelRef: I,
 		animated: !0
-	}), We = a(m), U = y ? [] : b ? m : ie(m, j), W = a(U), G = U.reduce((e, t) => ({
+	}), Je = i(m), B = y ? [] : b ? m : ae(m, M), V = i(B), H = B.reduce((e, t) => ({
 		offsets: [...e.offsets, e.flat],
 		flat: e.flat + (t.kind === "group" ? t.options.length : 1)
 	}), {
 		offsets: [],
 		flat: 0
-	}).offsets, K = (e) => `${N}-option-${e}`, Ge = D && W[k] ? K(k) : void 0, q = `${N}-listbox`;
-	o(() => {
-		if (!H.shown || k < 0) return;
-		if (z) {
-			R.current?.scrollToIndex(k, "auto");
+	}).offsets, U = (e) => `${P}-option-${e}`, W = O && V[A] ? U(A) : void 0, G = `${P}-listbox`;
+	a(() => {
+		if (!z.shown || A < 0) return;
+		if (L) {
+			Ge.current?.scrollToIndex(A, "auto");
 			return;
 		}
-		let e = L.current;
+		let e = We.current;
 		e && typeof e.scrollIntoView == "function" && e.scrollIntoView({ block: "nearest" });
 	}, [
-		H.shown,
-		k,
-		z
-	]), o(() => {
-		_ && D && H.shown && I.current?.focus();
+		z.shown,
+		A,
+		L
+	]), a(() => {
+		_ && O && z.shown && Ue.current?.focus();
 	}, [
 		_,
-		D,
-		H.shown
+		O,
+		z.shown
 	]);
-	let Ke = s(b);
-	o(() => {
-		Ke.current = b;
+	let K = o(b);
+	a(() => {
+		K.current = b;
 	}, [b]);
-	let J = s(j);
-	o(() => {
-		J.current !== j && (J.current = j, Ke.current?.(j));
-	}, [j]), !D && j !== "" && M(""), j !== Be && (Ve(j), A(W.length > 0 ? 0 : -1));
-	let qe = (e) => {
-		p(T.includes(e) ? T.filter((t) => t !== e) : [...T, e]);
-	}, Je = (e) => {
-		p(T.filter((t) => t !== e));
-	}, Y = (e) => We.find((t) => t.value === e)?.label ?? e, Ye = () => {
+	let q = o(M);
+	a(() => {
+		q.current !== M && (q.current = M, K.current?.(M));
+	}, [M]), !O && M !== "" && N(""), M !== Be && (Ve(M), j(V.length > 0 ? 0 : -1));
+	let Ye = (e) => {
+		p(E.includes(e) ? E.filter((t) => t !== e) : [...E, e]);
+	}, Xe = (e) => {
+		p(E.filter((t) => t !== e));
+	}, J = (e) => Je.find((t) => t.value === e)?.label ?? e, Y = () => {
 		p(h ? [] : "");
 	}, X = (e) => {
 		if (h) {
-			qe(e);
+			Ye(e);
 			return;
 		}
-		p(e), O(!1), P.current?.focus();
-	}, Xe = (e) => {
-		A((t) => e === 1 ? Math.min(t + 1, W.length - 1) : Math.max(t - 1, 0));
+		p(e), k(!1), F.current?.focus();
+	}, Z = (e) => {
+		j((t) => e === 1 ? Math.min(t + 1, V.length - 1) : Math.max(t - 1, 0));
 	}, Ze = (e) => {
-		A(W.length === 0 ? -1 : e === "Home" ? 0 : W.length - 1);
+		j(V.length === 0 ? -1 : e === "Home" ? 0 : V.length - 1);
 	}, Qe = (e) => {
-		e.key === "ArrowDown" || e.key === "ArrowUp" ? (e.preventDefault(), O(!0), Xe(e.key === "ArrowDown" ? 1 : -1)) : e.key === "Home" || e.key === "End" ? (e.preventDefault(), O(!0), Ze(e.key)) : (e.key === "Enter" || e.key === " " || e.key === "Space") && D && W[k] ? (e.preventDefault(), X(W[k].value)) : e.key === "Escape" ? O(!1) : e.key === "Backspace" && (h && T.length > 0 ? (e.preventDefault(), p(T.slice(0, -1))) : !h && v && E !== "" && (e.preventDefault(), Ye()));
+		e.key === "ArrowDown" || e.key === "ArrowUp" ? (e.preventDefault(), k(!0), Z(e.key === "ArrowDown" ? 1 : -1)) : e.key === "Home" || e.key === "End" ? (e.preventDefault(), k(!0), Ze(e.key)) : (e.key === "Enter" || e.key === " " || e.key === "Space") && O && V[A] ? (e.preventDefault(), X(V[A].value)) : e.key === "Escape" ? k(!1) : e.key === "Backspace" && (h && E.length > 0 ? (e.preventDefault(), p(E.slice(0, -1))) : !h && v && D !== "" && (e.preventDefault(), Y()));
 	}, $e = (e) => {
-		e.key === "ArrowDown" || e.key === "ArrowUp" ? (e.preventDefault(), Xe(e.key === "ArrowDown" ? 1 : -1)) : e.key === "Home" || e.key === "End" ? (e.preventDefault(), Ze(e.key)) : e.key === "Enter" ? (e.preventDefault(), W[k] && X(W[k].value)) : e.key === "Escape" && (e.preventDefault(), O(!1), P.current?.focus());
-	}, Z = (t, n) => {
-		let r = h ? T.includes(t.value) : t.value === E;
-		return /* @__PURE__ */ u("div", {
+		e.key === "ArrowDown" || e.key === "ArrowUp" ? (e.preventDefault(), Z(e.key === "ArrowDown" ? 1 : -1)) : e.key === "Home" || e.key === "End" ? (e.preventDefault(), Ze(e.key)) : e.key === "Enter" ? (e.preventDefault(), V[A] && X(V[A].value)) : e.key === "Escape" && (e.preventDefault(), k(!1), F.current?.focus());
+	}, Q = (t, n) => {
+		let r = h ? E.includes(t.value) : t.value === D;
+		return /* @__PURE__ */ l("div", {
 			"data-slot": "option",
-			ref: n === k ? L : void 0,
+			ref: n === A ? We : void 0,
 			role: "option",
-			id: K(n),
+			id: U(n),
 			"aria-selected": r,
-			"aria-setsize": W.length,
+			"aria-setsize": V.length,
 			"aria-posinset": n + 1,
 			onClick: () => X(t.value),
 			className: e([
 				je,
-				n === k && Me,
+				n === A && Me,
 				!h && r && Ne,
-				z && Ae
+				L && Ae,
+				C?.option
 			]),
-			children: [h && /* @__PURE__ */ l("span", {
+			children: [h && /* @__PURE__ */ c("span", {
 				"aria-hidden": "true",
 				"data-slot": "indicator",
 				className: e([Pe, r && Fe])
 			}), t.label]
 		}, t.value);
-	}, et = v && (h ? T.length > 0 : E !== "") ? /* @__PURE__ */ l("span", {
+	}, et = v && (h ? E.length > 0 : D !== "") ? /* @__PURE__ */ c("span", {
 		"aria-hidden": "true",
 		"data-slot": "clear-button",
-		title: w.clear,
+		title: T.clear,
 		onClick: (e) => {
-			e.stopPropagation(), Ye(), P.current?.focus();
+			e.stopPropagation(), Y(), F.current?.focus();
 		},
-		className: e(_e),
+		className: e([ve, C?.clearButton]),
 		children: "×"
-	}) : void 0, tt = h ? T.length === 0 ? /* @__PURE__ */ l("span", {
+	}) : void 0, tt = h ? E.length === 0 ? /* @__PURE__ */ c("span", {
 		"data-slot": "placeholder",
-		className: e(d),
-		children: g ?? w.placeholder
-	}) : /* @__PURE__ */ u(ce, { children: [(x === void 0 ? T : T.slice(0, Math.max(x, 0))).map((t) => /* @__PURE__ */ u("span", {
+		className: e(u),
+		children: g ?? T.placeholder
+	}) : /* @__PURE__ */ l(le, { children: [(x === void 0 ? E : E.slice(0, Math.max(x, 0))).map((t) => /* @__PURE__ */ l("span", {
 		"data-slot": "item",
-		className: e(me),
-		children: [/* @__PURE__ */ l(te, {
+		className: e([he, C?.item]),
+		children: [/* @__PURE__ */ c(re, {
 			color: "primary",
-			children: Y(t)
-		}), /* @__PURE__ */ l("span", {
+			children: J(t)
+		}), /* @__PURE__ */ c("span", {
 			"aria-hidden": "true",
 			"data-slot": "item-remove",
 			onClick: (e) => {
-				e.stopPropagation(), Je(t);
+				e.stopPropagation(), Xe(t);
 			},
-			className: e(he),
+			className: e(ge),
 			children: "×"
 		})]
-	}, t)), x !== void 0 && T.length > Math.max(x, 0) && /* @__PURE__ */ l("span", {
+	}, t)), x !== void 0 && E.length > Math.max(x, 0) && /* @__PURE__ */ c("span", {
 		"data-slot": "overflow-badge",
-		title: T.slice(Math.max(x, 0)).map((e) => ae(Y(e))).join(", "),
-		className: e(ge),
-		children: n(w.moreTags, { count: T.length - Math.max(x, 0) })
-	})] }) : E === "" ? /* @__PURE__ */ l("span", {
+		title: E.slice(Math.max(x, 0)).map((e) => oe(J(e))).join(", "),
+		className: e(_e),
+		children: t(T.moreTags, { count: E.length - Math.max(x, 0) })
+	})] }) : D === "" ? /* @__PURE__ */ c("span", {
 		"data-slot": "placeholder",
-		className: e(d),
-		children: g ?? w.placeholder
-	}) : /* @__PURE__ */ l("span", {
+		className: e(u),
+		children: g ?? T.placeholder
+	}) : /* @__PURE__ */ c("span", {
 		"data-slot": "value",
-		className: e(pe),
-		children: Y(E)
-	}), Q = !y && W.length > 0, nt = z ? /* @__PURE__ */ l(re, {
-		ref: R,
+		className: e(me),
+		children: J(D)
+	}), $ = !y && V.length > 0, nt = L ? /* @__PURE__ */ c(ie, {
+		ref: Ge,
 		"data-virtualized": !0,
-		items: W,
-		groups: U.some((e) => e.kind === "group") ? U.flatMap((t, n) => t.kind === "group" ? [{
-			startIndex: G[n] ?? 0,
-			key: `group-${t.label}-${G[n] ?? 0}`,
-			render: () => /* @__PURE__ */ l("div", {
+		items: V,
+		groups: B.some((e) => e.kind === "group") ? B.flatMap((t, n) => t.kind === "group" ? [{
+			startIndex: H[n] ?? 0,
+			key: `group-${t.label}-${H[n] ?? 0}`,
+			render: () => /* @__PURE__ */ c("div", {
 				"data-slot": "group-label",
-				className: e(Ee),
+				className: e(d),
 				children: t.label
 			})
 		}] : []) : void 0,
-		height: Math.min(Oe, W.length * V),
-		itemHeight: V,
-		overscan: Ue,
-		renderItem: Z
-	}) : U.map((t, n) => {
-		let r = G[n] ?? 0;
-		return t.kind === "option" ? Z(t.option, r) : /* @__PURE__ */ u("div", {
+		height: Math.min(Oe, V.length * R),
+		itemHeight: R,
+		overscan: qe,
+		renderItem: Q
+	}) : B.map((t, n) => {
+		let r = H[n] ?? 0;
+		return t.kind === "option" ? Q(t.option, r) : /* @__PURE__ */ l("div", {
 			"data-slot": "group",
 			role: "group",
 			"aria-label": t.label,
-			children: [/* @__PURE__ */ l("div", {
+			children: [/* @__PURE__ */ c("div", {
 				"data-slot": "group-label",
-				className: e([De, Ee]),
+				className: e([De, d]),
 				children: t.label
-			}), t.options.map((e, t) => Z(e, r + t))]
+			}), t.options.map((e, t) => Q(e, r + t))]
 		}, `group-${t.label}`);
-	}), $ = y ? /* @__PURE__ */ u("div", {
+	}), rt = y ? /* @__PURE__ */ l("div", {
 		"data-slot": "loading",
-		className: e(we),
-		children: [/* @__PURE__ */ l(ne, { size: "sm" }), /* @__PURE__ */ l("span", { children: w.loading })]
-	}) : /* @__PURE__ */ l("div", {
-		"data-slot": "empty",
 		className: e(Te),
-		children: w.noMatch
+		children: [/* @__PURE__ */ c(r, { size: "sm" }), /* @__PURE__ */ c("span", { children: T.loading })]
+	}) : /* @__PURE__ */ c("div", {
+		"data-slot": "empty",
+		className: e(Ee),
+		children: T.noMatch
 	});
-	return /* @__PURE__ */ u("div", {
-		className: e(ue),
-		children: [/* @__PURE__ */ u("button", {
+	return /* @__PURE__ */ l("div", {
+		className: e(de),
+		children: [/* @__PURE__ */ l("button", {
 			...ze,
 			ref: He,
 			"data-slot": "trigger",
 			type: "button",
-			style: H.triggerStyle,
+			style: z.triggerStyle,
 			role: "combobox",
 			"aria-haspopup": "listbox",
-			"aria-expanded": D,
-			"aria-controls": _ ? q : N,
-			"aria-activedescendant": Ge,
+			"aria-expanded": O,
+			"aria-controls": _ ? G : P,
+			"aria-activedescendant": W,
 			"data-clearable": v || void 0,
-			onPointerDown: H.onTriggerPointerDown,
-			onClick: H.onTriggerClick,
+			onPointerDown: z.onTriggerPointerDown,
+			onClick: z.onTriggerClick,
 			onKeyDown: Qe,
 			className: e([
-				de,
-				fe[Le],
-				Re
+				fe,
+				pe[Le],
+				Re,
+				C?.trigger
 			]),
 			children: [
 				tt,
 				et,
-				/* @__PURE__ */ l("span", {
+				/* @__PURE__ */ c("span", {
 					"data-slot": "icon",
 					"aria-hidden": "true",
-					className: e(ve),
-					children: /* @__PURE__ */ l(Ie, {})
+					className: e(ye),
+					children: /* @__PURE__ */ c(Ie, {})
 				})
 			]
-		}), _ ? /* @__PURE__ */ u(i, {
-			ref: F,
-			behavior: H,
+		}), _ ? /* @__PURE__ */ l(te, {
+			ref: I,
+			behavior: z,
 			placement: "bottom-span",
 			"aria-busy": y || void 0,
-			visualClass: xe,
-			children: [/* @__PURE__ */ l("input", {
-				ref: I,
+			visualClass: Se,
+			className: C?.content,
+			children: [/* @__PURE__ */ c("input", {
+				ref: Ue,
 				"data-slot": "input",
 				type: "text",
-				"aria-label": w.searchLabel,
-				placeholder: w.searchPlaceholder,
-				...Q && {
-					"aria-controls": q,
+				"aria-label": T.searchLabel,
+				placeholder: T.searchPlaceholder,
+				...$ && {
+					"aria-controls": G,
 					"aria-autocomplete": "list"
 				},
-				"aria-activedescendant": Ge,
-				value: j,
-				onChange: (e) => M(e.target.value),
+				"aria-activedescendant": W,
+				value: M,
+				onChange: (e) => N(e.target.value),
 				onKeyDown: $e,
-				className: e(Ce)
-			}), Q ? /* @__PURE__ */ l("div", {
-				id: q,
+				className: e([we, C?.searchInput])
+			}), $ ? /* @__PURE__ */ c("div", {
+				id: G,
 				"data-slot": "list",
 				role: "listbox",
 				"aria-multiselectable": h || void 0,
-				"aria-label": w.listboxLabel,
-				className: e(z ? void 0 : Se),
+				"aria-label": T.listboxLabel,
+				className: e(L ? void 0 : Ce),
 				children: nt
-			}) : $]
-		}) : /* @__PURE__ */ l(i, {
-			ref: F,
-			behavior: H,
+			}) : rt]
+		}) : /* @__PURE__ */ c(te, {
+			ref: I,
+			behavior: z,
 			placement: "bottom-span",
-			id: N,
-			role: Q ? "listbox" : void 0,
-			"aria-multiselectable": Q && h ? "true" : void 0,
-			"aria-label": w.listboxLabel,
+			id: P,
+			role: $ ? "listbox" : void 0,
+			"aria-multiselectable": $ && h ? "true" : void 0,
+			"aria-label": T.listboxLabel,
 			"aria-busy": y || void 0,
-			visualClass: z ? be : ye,
-			children: Q ? nt : $
+			visualClass: L ? xe : be,
+			className: C?.content,
+			children: $ ? nt : rt
 		})]
 	});
 }

package/dist/components/Sparkline/Sparkline.js

@@ -0,0 +1,45 @@
+import { classnames as e } from "../../utils/classnames.js";
+import { base as t, toneFills as n, toneStrokes as r } from "./sparkline-styles.js";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/lib/components/Sparkline/Sparkline.tsx
+var o = 100, s = 2;
+function c(e) {
+	let t = Math.min(...e), n = Math.max(...e) - t, r = e.length - 1;
+	return e.map((e, i) => {
+		let a = i / r * o, s = n === 0 ? o / 2 : 92 - (e - t) / n * 84;
+		return `${i === 0 ? "M" : "L"}${a.toFixed(2)} ${s.toFixed(2)}`;
+	}).join(" ");
+}
+function l(e) {
+	let t = o.toFixed(2);
+	return `${e} L${t} ${t} L0.00 ${t} Z`;
+}
+function u({ data: u, width: d = 96, height: f = 28, variant: p = "line", tone: m = "primary", className: h, ...g }) {
+	let _ = g["aria-label"], v = g["aria-labelledby"], y = typeof _ == "string" && _.length > 0 || typeof v == "string" && v.length > 0, b = u.length >= s, x = b ? c(u) : "";
+	return /* @__PURE__ */ a("svg", {
+		...g,
+		"data-slot": "sparkline",
+		width: d,
+		height: f,
+		viewBox: `0 0 ${o} ${o}`,
+		preserveAspectRatio: "none",
+		role: y ? "img" : g.role,
+		"aria-hidden": !y || void 0,
+		className: e([t, h]),
+		children: [b && p === "area" && /* @__PURE__ */ i("path", {
+			d: l(x),
+			stroke: "none",
+			className: e([n[m]])
+		}), b && /* @__PURE__ */ i("path", {
+			d: x,
+			fill: "none",
+			"stroke-width": "2",
+			"stroke-linecap": "round",
+			"stroke-linejoin": "round",
+			"vector-effect": "non-scaling-stroke",
+			className: e([r[m]])
+		})]
+	});
+}
+//#endregion
+export { u as default };

package/dist/components/Sparkline/index.js

@@ -0,0 +1,3 @@
+import { toneFills as e, toneStrokes as t } from "./sparkline-styles.js";
+import n from "./Sparkline.js";
+export { n as Sparkline, e as sparklineToneFills, t as sparklineToneStrokes };

package/dist/components/Sparkline/sparkline-styles.js

@@ -0,0 +1,18 @@
+
+/* empty css                           */
+//#region src/lib/components/Sparkline/sparkline-styles.ts
+var e = "haze-sparkline-styles__base", t = {
+	primary: "haze-sparkline-styles__primary",
+	success: "haze-sparkline-styles__success",
+	danger: "haze-sparkline-styles__danger",
+	warning: "haze-sparkline-styles__warning",
+	info: "haze-sparkline-styles__info"
+}, n = {
+	primary: "haze-sparkline-styles__primary",
+	success: "haze-sparkline-styles__success",
+	danger: "haze-sparkline-styles__danger",
+	warning: "haze-sparkline-styles__warning",
+	info: "haze-sparkline-styles__info"
+};
+//#endregion
+export { e as base, n as toneFills, t as toneStrokes };

package/dist/components/Spoiler/Spoiler.js

@@ -0,0 +1,36 @@
+
+"use client";
+import { classnames as e } from "../../utils/classnames.js";
+import { useStrings as t } from "../LocaleProvider/useStrings.js";
+/* empty css                  */
+import { useId 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/Spoiler/Spoiler.tsx
+var o = "haze-Spoiler__root", s = "haze-Spoiler__clip", c = "haze-Spoiler__toggle";
+function l({ expanded: l, maxHeight: u = 100, showLabel: d, hideLabel: f, className: p, children: m, ...h }) {
+	let g = t("spoiler"), [_, v] = a(l, !1), y = n(), b = _ ? f ?? g.showLess : d ?? g.showMore;
+	return /* @__PURE__ */ i("div", {
+		"data-slot": "spoiler",
+		...h,
+		className: e([o, p]),
+		children: [/* @__PURE__ */ r("div", {
+			id: y,
+			"data-slot": "content",
+			"data-expanded": _ || void 0,
+			style: _ ? void 0 : { maxHeight: u },
+			className: e([!_ && s]),
+			children: m
+		}), /* @__PURE__ */ r("button", {
+			type: "button",
+			"data-slot": "toggle",
+			"aria-expanded": _,
+			"aria-controls": y,
+			onClick: () => v((e) => !e),
+			className: e([c]),
+			children: b
+		})]
+	});
+}
+//#endregion
+export { l as default };

package/dist/components/Spoiler/index.js

@@ -0,0 +1,3 @@
+"use client";
+import e from "./Spoiler.js";
+export { e as Spoiler };

package/dist/components/StatusBar/StatusBar.js

@@ -0,0 +1,47 @@
+
+"use client";
+import { classnames as e } from "../../utils/classnames.js";
+/* empty css                    */
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/lib/components/StatusBar/StatusBar.tsx
+var r = "haze-StatusBar__bar", i = "haze-StatusBar__group", a = "haze-StatusBar__groupEnd", o = "haze-StatusBar__item", s = "haze-StatusBar__itemAction";
+function c({ left: o, right: s, className: c, ...l }) {
+	return /* @__PURE__ */ n("footer", {
+		"data-slot": "status-bar",
+		...l,
+		className: e([r, c]),
+		children: [o != null && /* @__PURE__ */ t("div", {
+			"data-slot": "status-bar-left",
+			className: e(i),
+			children: o
+		}), s != null && /* @__PURE__ */ t("div", {
+			"data-slot": "status-bar-right",
+			className: e([i, a]),
+			children: s
+		})]
+	});
+}
+function l({ priority: n, onSelect: r, className: i, children: a, ...c }) {
+	let l = [
+		o,
+		r != null && s,
+		i
+	], u = n ? "true" : void 0;
+	return r == null ? /* @__PURE__ */ t("span", {
+		"data-slot": "status-item",
+		"data-priority": u,
+		...c,
+		className: e(l),
+		children: a
+	}) : /* @__PURE__ */ t("button", {
+		type: "button",
+		"data-slot": "status-item",
+		"data-priority": u,
+		onClick: r,
+		...c,
+		className: e(l),
+		children: a
+	});
+}
+//#endregion
+export { l as StatusItem, c as default };

package/dist/components/StatusBar/index.js

@@ -0,0 +1,3 @@
+"use client";
+import e, { StatusItem as t } from "./StatusBar.js";
+export { e as StatusBar, t as StatusItem };