@selectwin/kit 0.1.196 → 0.1.198

package/dist/SelectTokenTextarea.js

@@ -0,0 +1,173 @@
+import { SelectLabelRow as e } from "./SelectField.js";
+import { forwardRef as t, useCallback as n, useEffect as r, useId as i, useImperativeHandle as a, useLayoutEffect as o, useRef as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/SelectTokenTextarea.tsx
+var u = /\{\{?\s*([a-zA-Z_][a-zA-Z0-9_.[\]]*)\s*\}?\}/g, d = "data-select-sentinel";
+function f(e, t, n) {
+	let r = document.createElement("span");
+	return r.className = "select-token", r.setAttribute("contenteditable", "false"), r.dataset.token = t, r.dataset.raw = e, r.textContent = n(t), r;
+}
+function p(e, t, n) {
+	let r = [], i = new RegExp(t.source, t.flags.includes("g") ? t.flags : t.flags + "g"), a = 0;
+	for (let t of e.matchAll(i)) {
+		let i = t.index ?? 0;
+		i > a && r.push(document.createTextNode(e.slice(a, i))), r.push(f(t[0], t[1] ?? "", n)), a = i + t[0].length;
+	}
+	return a < e.length && r.push(document.createTextNode(e.slice(a))), r;
+}
+function m(e) {
+	let t = "", n = (e) => {
+		e.childNodes.forEach((e) => {
+			if (e.nodeType === Node.TEXT_NODE) {
+				t += e.nodeValue ?? "";
+				return;
+			}
+			if (e instanceof HTMLElement) {
+				if (e.dataset.raw != null) {
+					t += e.dataset.raw;
+					return;
+				}
+				if (e.tagName === "BR") {
+					e.hasAttribute(d) || (t += "\n");
+					return;
+				}
+				(e.tagName === "DIV" || e.tagName === "P") && t && !t.endsWith("\n") && (t += "\n"), n(e);
+			}
+		});
+	};
+	return n(e), t.replace(/​/g, "");
+}
+var h = t(function({ label: t, value: h, onChange: g, labelOf: _, pattern: v = u, labelAction: y, help: b, hint: x, error: S, placeholder: C, rows: w = 4, disabled: T = !1, onBlur: E, size: D = "md", className: O }, k) {
+	let A = i(), j = s(null), M = s(null), N = s(null), P = s(_);
+	P.current = _;
+	let F = n((e) => {
+		let t = j.current;
+		if (!t) return;
+		t.replaceChildren(...p(e, v, P.current));
+		let n = document.createElement("br");
+		n.setAttribute(d, ""), t.appendChild(n), M.current = e;
+	}, [v]);
+	o(() => {
+		h !== M.current && F(h);
+	}, [h, F]), r(() => {
+		var e;
+		(e = j.current) == null || e.querySelectorAll(".select-token").forEach((e) => {
+			e.textContent = _(e.dataset.token ?? "");
+		});
+	}, [_]);
+	let I = () => {
+		let e = j.current;
+		if (!e) return;
+		if (!e.lastChild || !(e.lastChild instanceof HTMLElement && e.lastChild.hasAttribute(d))) {
+			let t = document.createElement("br");
+			t.setAttribute(d, ""), e.appendChild(t);
+		}
+		let t = m(e);
+		M.current = t, g(t);
+	}, L = () => {
+		let e = window.getSelection(), t = j.current;
+		e && e.rangeCount && t && t.contains(e.anchorNode) && (N.current = e.getRangeAt(0).cloneRange());
+	}, R = (e, t) => {
+		let n = j.current;
+		if (!n || e.length === 0) return;
+		let r = window.getSelection(), i = t && n.contains(t.startContainer) ? t : null;
+		if (!i) {
+			i = document.createRange();
+			let e = n.lastChild;
+			e ? i.setStartBefore(e) : i.selectNodeContents(n), i.collapse(!0);
+		}
+		i.deleteContents();
+		let a = document.createDocumentFragment();
+		e.forEach((e) => a.appendChild(e));
+		let o = e[e.length - 1];
+		i.insertNode(a);
+		let s = document.createRange();
+		s.setStartAfter(o), s.collapse(!0), r == null || r.removeAllRanges(), r == null || r.addRange(s), N.current = s.cloneRange(), I();
+	}, z = () => {
+		let e = j.current;
+		if (!e) return;
+		e.focus();
+		let t = N.current;
+		if (t && e.contains(t.startContainer)) {
+			let e = window.getSelection();
+			e == null || e.removeAllRanges(), e == null || e.addRange(t.cloneRange());
+		}
+	};
+	a(k, () => ({
+		insertToken: (e) => {
+			var t, n;
+			R([f(`{${e}}`, e, P.current)], N.current), z(), window.setTimeout(z, 0), (t = (n = window).requestAnimationFrame) == null || t.call(n, () => z());
+		},
+		focus: z
+	}));
+	let B = (e) => {
+		if (e.key === "Enter") {
+			e.preventDefault();
+			let t = window.getSelection();
+			R([document.createTextNode("\n")], t && t.rangeCount ? t.getRangeAt(0) : null);
+		}
+	}, V = (e) => {
+		e.preventDefault();
+		let t = e.clipboardData.getData("text/plain");
+		if (!t) return;
+		let n = window.getSelection();
+		R(p(t.replace(/\r\n?/g, "\n"), v, P.current), n && n.rangeCount ? n.getRangeAt(0) : null);
+	}, H = (e, t) => {
+		let n = window.getSelection();
+		if (!n || !n.rangeCount || n.isCollapsed) return;
+		let r = n.getRangeAt(0), i = document.createElement("div");
+		i.appendChild(r.cloneContents()), e.preventDefault(), e.clipboardData.setData("text/plain", m(i)), t && (r.deleteContents(), I());
+	}, U = S ? `${A}-err` : x ? `${A}-hint` : void 0;
+	return /* @__PURE__ */ l("div", {
+		className: `select-field${D === "sm" ? " select-field--sm" : ""}${O ? " " + O : ""}`,
+		children: [
+			(t || b || y) && /* @__PURE__ */ c(e, {
+				htmlFor: A,
+				label: t,
+				help: b,
+				action: y
+			}),
+			/* @__PURE__ */ c("div", {
+				ref: j,
+				id: A,
+				role: "textbox",
+				"aria-multiline": "true",
+				"aria-label": t,
+				"aria-invalid": S ? !0 : void 0,
+				"aria-describedby": U,
+				"aria-disabled": T || void 0,
+				contentEditable: !T,
+				suppressContentEditableWarning: !0,
+				spellCheck: !0,
+				"data-placeholder": C,
+				"data-empty": h === "" || void 0,
+				className: `select-input select-tokenarea${S ? " select-input--error" : ""}${T ? " is-disabled" : ""}`,
+				style: { minHeight: `calc(${w} * 1.4em + 2 * var(--select-sp-4) + 2px)` },
+				onInput: I,
+				onKeyDown: B,
+				onKeyUp: L,
+				onMouseUp: L,
+				onFocus: L,
+				onBlur: () => {
+					L(), E == null || E();
+				},
+				onPaste: V,
+				onCopy: (e) => H(e, !1),
+				onCut: (e) => H(e, !0)
+			}),
+			S ? /* @__PURE__ */ c("p", {
+				id: `${A}-err`,
+				className: "select-field__error",
+				children: S
+			}) : x ? /* @__PURE__ */ c("p", {
+				id: `${A}-hint`,
+				className: "select-field__hint",
+				children: x
+			}) : null
+		]
+	});
+});
+//#endregion
+export { u as SELECT_TOKEN_PATTERN, h as SelectTokenTextarea, m as readTokenText };
+
+//# sourceMappingURL=SelectTokenTextarea.js.map

package/dist/SelectTooltip.js

@@ -0,0 +1,100 @@
+/* empty css           */
+import { computePopoverPosition as e } from "./positioning.js";
+import { useCallback as t, useEffect as n, useId as r, useLayoutEffect as i, useRef as a, useState as o } from "react";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+import { createPortal as u } from "react-dom";
+//#region src/SelectTooltip.tsx
+function d() {
+	return typeof window > "u" || !window.matchMedia || window.matchMedia("(hover: hover)").matches;
+}
+function f(e) {
+	try {
+		return e instanceof Element && e.matches(":focus-visible");
+	} catch {
+		return !0;
+	}
+}
+function p({ content: p, children: m, placement: h = "top", delay: g = 250, openOnClick: _ = !1, disabled: v = !1 }) {
+	let [y, b] = o(!1), [x, S] = o(!1), [C, w] = o(!1), T = !v && (x || y && !C), E = a(null), D = a(null), O = a(null), [k, A] = o(null), j = r(), M = () => {
+		d() && (O.current && clearTimeout(O.current), O.current = setTimeout(() => b(!0), g));
+	}, N = () => {
+		O.current && clearTimeout(O.current), b(!1), w(!1);
+	}, P = () => {
+		_ && (O.current && clearTimeout(O.current), T ? (S(!1), b(!1), w(!0)) : S(!0));
+	};
+	n(() => () => {
+		O.current && clearTimeout(O.current);
+	}, []);
+	let F = t(() => {
+		var t;
+		let n = ((t = E.current) == null ? void 0 : t.firstElementChild) ?? E.current, r = D.current;
+		if (!n || !r) return;
+		let i = e(n.getBoundingClientRect(), {
+			width: r.offsetWidth,
+			height: r.offsetHeight
+		}, h, 6);
+		A({
+			top: i.top,
+			left: i.left
+		});
+	}, [h]);
+	return i(() => {
+		if (!T) {
+			A(null);
+			return;
+		}
+		F();
+	}, [T, F]), n(() => {
+		if (!T) return;
+		let e = () => F();
+		return window.addEventListener("scroll", e, !0), window.addEventListener("resize", e), () => {
+			window.removeEventListener("scroll", e, !0), window.removeEventListener("resize", e);
+		};
+	}, [T, F]), n(() => {
+		if (!T) return;
+		let e = (e) => {
+			e.key === "Escape" && (S(!1), b(!1));
+		};
+		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+	}, [T]), n(() => {
+		if (!x) return;
+		let e = (e) => {
+			var t, n;
+			let r = e.target;
+			(t = E.current) != null && t.contains(r) || (n = D.current) != null && n.contains(r) || (S(!1), b(!1));
+		};
+		return document.addEventListener("mousedown", e, !0), () => document.removeEventListener("mousedown", e, !0);
+	}, [x]), /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c("span", {
+		className: "select-tip__trigger",
+		ref: E,
+		onMouseEnter: M,
+		onMouseLeave: N,
+		onFocusCapture: (e) => {
+			f(e.target) && b(!0);
+		},
+		onBlurCapture: N,
+		onClick: _ ? P : void 0,
+		"aria-describedby": T ? j : void 0,
+		children: m
+	}), T && u(/* @__PURE__ */ c("div", {
+		ref: D,
+		id: j,
+		role: "tooltip",
+		className: `select select-tip${x ? " select-tip--pinned" : ""}`,
+		style: k ? {
+			position: "fixed",
+			top: k.top,
+			left: k.left
+		} : {
+			position: "fixed",
+			top: 0,
+			left: 0,
+			visibility: "hidden"
+		},
+		children: p
+	}), document.body)] });
+}
+//#endregion
+export { p as SelectTooltip };
+
+//# sourceMappingURL=SelectTooltip.js.map

package/dist/SelectTour.js

@@ -0,0 +1,210 @@
+/* empty css           */
+import { SelectButton as e } from "./SelectButton.js";
+import { SelectLinkButton as t } from "./SelectLinkButton.js";
+import { useCallback as n, useEffect as r, useLayoutEffect as i, useMemo as a, useRef as o, useState as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { createPortal as u } from "react-dom";
+//#region src/SelectTour.tsx
+var d = 6, f = 14, p = 8, m = 640;
+function h(e) {
+	let t = document.querySelector(e);
+	if (!t) return null;
+	let n = t.getBoundingClientRect();
+	if (n.width === 0 && n.height === 0) return null;
+	let r = Math.min(parseFloat(getComputedStyle(t).borderTopLeftRadius) || 0, Math.min(n.width, n.height) / 2);
+	return {
+		top: n.top - d,
+		left: n.left - d,
+		width: n.width + 12,
+		height: n.height + 12,
+		radius: r + d
+	};
+}
+var g = (e, t, n) => Math.min(Math.max(e, t), Math.max(t, n));
+function _(e, t, n, r, i) {
+	if (r < m) return {
+		side: "sheet",
+		left: p,
+		top: e.top + e.height / 2 > i / 2 ? p : i - n - p
+	};
+	let a = e.top + e.height / 2, o = e.left + e.width / 2, s = (e) => e >= p && e + n <= i - p, c = (e) => e >= p && e + t <= r - p, l = g(a - n / 2, p, i - n - p), u = g(o - t / 2, p, r - t - p), d = [
+		{
+			side: "right",
+			left: e.left + e.width + f,
+			top: l,
+			arrow: a - l
+		},
+		{
+			side: "left",
+			left: e.left - f - t,
+			top: l,
+			arrow: a - l
+		},
+		{
+			side: "bottom",
+			left: u,
+			top: e.top + e.height + f,
+			arrow: o - u
+		},
+		{
+			side: "top",
+			left: u,
+			top: e.top - f - n,
+			arrow: o - u
+		}
+	];
+	for (let r of d) {
+		let o = r.side === "right" || r.side === "left";
+		if (!(o && (e.height > i * .6 || a < p || a > i - p)) && c(r.left) && s(r.top)) return {
+			...r,
+			arrow: g(r.arrow ?? 0, 16, (o ? n : t) - 16)
+		};
+	}
+	return {
+		side: "sheet",
+		left: u,
+		top: i - n - p
+	};
+}
+function v(e) {
+	let t = document.querySelector(e);
+	if (!t) return !1;
+	let n = t.getBoundingClientRect();
+	return n.width === 0 && n.height === 0 || n.right <= 0 || n.left >= window.innerWidth ? !1 : getComputedStyle(t).visibility !== "hidden";
+}
+function y({ open: d, steps: f, onClose: p, labels: m = {}, theme: g = "light" }) {
+	let y = a(() => d ? f.filter((e) => v(e.target)) : [], [d]), [b, x] = s(0), [S, C] = s(null), [w, T] = s(null), E = o(null), D = o(null);
+	r(() => {
+		d && x(0);
+	}, [d]);
+	let O = y[b], k = b === y.length - 1, A = n(() => {
+		if (!O) return;
+		let e = h(O.target);
+		C(e);
+		let t = E.current;
+		e && t && T(_(e, t.offsetWidth, t.offsetHeight, window.innerWidth, window.innerHeight));
+	}, [O]);
+	return i(() => {
+		var e, t;
+		if (!d || !O) return;
+		(e = document.querySelector(O.target)) == null || e.scrollIntoView({
+			block: "nearest",
+			inline: "nearest"
+		}), A();
+		let n = requestAnimationFrame(A);
+		return (t = D.current) == null || t.focus({ preventScroll: !0 }), () => cancelAnimationFrame(n);
+	}, [
+		d,
+		O,
+		A
+	]), r(() => {
+		if (d) return document.body.classList.add("select-tour-open"), () => document.body.classList.remove("select-tour-open");
+	}, [d]), r(() => {
+		if (!d) return;
+		let e = (e) => {
+			e.key === "Escape" && p("skip"), e.key === "ArrowRight" && x((e) => Math.min(e + 1, y.length - 1)), e.key === "ArrowLeft" && x((e) => Math.max(e - 1, 0));
+		};
+		return window.addEventListener("keydown", e), window.addEventListener("resize", A), window.addEventListener("scroll", A, !0), () => {
+			window.removeEventListener("keydown", e), window.removeEventListener("resize", A), window.removeEventListener("scroll", A, !0);
+		};
+	}, [
+		d,
+		p,
+		A,
+		y.length
+	]), !d || !O ? null : u(/* @__PURE__ */ l("div", {
+		className: "select select-tour",
+		"data-theme": g,
+		children: [
+			/* @__PURE__ */ c("div", {
+				className: "select-tour__catch",
+				"aria-hidden": "true"
+			}),
+			S && /* @__PURE__ */ c("div", {
+				className: "select-tour__hole",
+				"aria-hidden": "true",
+				style: {
+					top: S.top,
+					left: S.left,
+					width: S.width,
+					height: S.height,
+					borderRadius: S.radius
+				}
+			}),
+			/* @__PURE__ */ l("div", {
+				ref: E,
+				className: `select-tour__pop${w ? ` select-tour__pop--${w.side}` : ""}`,
+				role: "dialog",
+				"aria-modal": "true",
+				"aria-labelledby": "select-tour-title",
+				style: w ? {
+					top: w.top,
+					left: w.left
+				} : { visibility: "hidden" },
+				children: [
+					(w == null ? void 0 : w.arrow) !== void 0 && /* @__PURE__ */ c("span", {
+						className: "select-tour__arrow",
+						"aria-hidden": "true",
+						style: w.side === "right" || w.side === "left" ? { top: w.arrow } : { left: w.arrow }
+					}),
+					/* @__PURE__ */ l("div", {
+						className: "select-tour__content",
+						children: [
+							/* @__PURE__ */ l("span", {
+								className: "select-tour__count",
+								children: [
+									b + 1,
+									" de ",
+									y.length
+								]
+							}),
+							/* @__PURE__ */ c("h2", {
+								id: "select-tour-title",
+								className: "select-tour__title",
+								children: O.title
+							}),
+							/* @__PURE__ */ c("div", {
+								className: "select-tour__body",
+								children: O.body
+							})
+						]
+					}, b),
+					/* @__PURE__ */ l("div", {
+						className: "select-tour__foot",
+						children: [
+							/* @__PURE__ */ c("span", {
+								className: "select-tour__dots",
+								"aria-hidden": "true",
+								children: y.map((e, t) => /* @__PURE__ */ c("i", { className: t === b ? "is-on" : void 0 }, t))
+							}),
+							/* @__PURE__ */ c(t, {
+								onClick: () => p("skip"),
+								children: m.skip ?? "Pular tour"
+							}),
+							/* @__PURE__ */ l("span", {
+								className: "select-tour__nav",
+								children: [b > 0 && /* @__PURE__ */ c(e, {
+									variant: "secondary",
+									size: "sm",
+									inline: !0,
+									onClick: () => x((e) => e - 1),
+									children: m.prev ?? "Anterior"
+								}), /* @__PURE__ */ c(e, {
+									ref: D,
+									size: "sm",
+									inline: !0,
+									onClick: () => k ? p("done") : x((e) => e + 1),
+									children: k ? m.done ?? "Concluir" : m.next ?? "Próximo"
+								})]
+							})
+						]
+					})
+				]
+			})
+		]
+	}), document.body);
+}
+//#endregion
+export { y as SelectTour, _ as placePop };
+
+//# sourceMappingURL=SelectTour.js.map

package/dist/SelectTree.js

@@ -0,0 +1,86 @@
+/* empty css           */
+import { chartColor as e, useChartSize as t } from "./chartUtils.js";
+import { ChartTooltip as n, useChartTooltip as r } from "./chartTip.js";
+import { useState as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/SelectTree.tsx
+function s({ data: s, height: c = 260, className: l, ...u }) {
+	let { ref: d, width: f } = t(c), p = r(), [m, h] = i(null), g = {
+		top: 14,
+		right: 96,
+		bottom: 14,
+		left: 16
+	}, _ = null;
+	if (f > 0) {
+		let t = [], n = 0, r = 0, i = (e, a, o, s) => {
+			r = Math.max(r, a);
+			let c = {
+				node: e,
+				depth: a,
+				yUnit: 0,
+				ci: o,
+				parent: s
+			};
+			if (e.children && e.children.length) {
+				let t = e.children.map((e, t) => i(e, a + 1, a === 0 ? t : o, c));
+				c.yUnit = (t[0].yUnit + t[t.length - 1].yUnit) / 2;
+			} else c.yUnit = n, n++;
+			return t.push(c), c;
+		};
+		i(s, 0, 0);
+		let l = f - g.left - g.right, u = c - g.top - g.bottom, d = (e) => g.left + (r <= 0 ? 0 : l / r * e), v = (e) => g.top + (n <= 1 ? u / 2 : u / (n - 1) * e);
+		_ = /* @__PURE__ */ o("svg", {
+			width: f,
+			height: c,
+			className: "select-chart",
+			onMouseLeave: () => {
+				h(null), p.hide();
+			},
+			children: [t.map((e, t) => e.parent ? /* @__PURE__ */ a("path", {
+				className: "select-tree__link",
+				d: `M${d(e.parent.depth)},${v(e.parent.yUnit)} C${(d(e.parent.depth) + d(e.depth)) / 2},${v(e.parent.yUnit)} ${(d(e.parent.depth) + d(e.depth)) / 2},${v(e.yUnit)} ${d(e.depth)},${v(e.yUnit)}`
+			}, `l${t}`) : null), t.map((t, n) => {
+				let r = t.node.color ?? e(t.ci), i = d(t.depth), s = v(t.yUnit), c = !t.node.children || !t.node.children.length;
+				return /* @__PURE__ */ o("g", {
+					style: { opacity: m === null || m === n ? 1 : .4 },
+					children: [/* @__PURE__ */ a("circle", {
+						cx: i,
+						cy: s,
+						r: m === n ? 6 : 4.5,
+						fill: r,
+						className: "select-tree__node",
+						onMouseEnter: () => {
+							h(n), p.show({
+								x: i,
+								y: s - 8,
+								place: "top",
+								title: t.node.label,
+								rows: []
+							});
+						},
+						onMouseLeave: () => {
+							h(null), p.hide();
+						}
+					}), /* @__PURE__ */ a("text", {
+						x: c ? i + 9 : i,
+						y: c ? s : s - 9,
+						className: "select-chart__xlabel",
+						dominantBaseline: "middle",
+						textAnchor: c ? "start" : "middle",
+						children: t.node.label
+					})]
+				}, `n${n}`);
+			})]
+		});
+	}
+	return /* @__PURE__ */ o("div", {
+		...u,
+		className: `select-chart-wrap${l ? " " + l : ""}`,
+		ref: d,
+		children: [_, /* @__PURE__ */ a(n, { tip: p.tip })]
+	});
+}
+//#endregion
+export { s as SelectTree };
+
+//# sourceMappingURL=SelectTree.js.map

package/dist/SelectTreemap.js

@@ -0,0 +1,130 @@
+/* empty css           */
+import { chartColor as e, formatCompact as t, useChartSize as n } from "./chartUtils.js";
+import { ChartTooltip as r, useChartTooltip as i } from "./chartTip.js";
+import { useId as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/SelectTreemap.tsx
+function c(e, t, n) {
+	let r = [], i = (e, t) => {
+		let n = e.reduce((e, t) => e + t, 0), r = Math.max(...e), i = Math.min(...e);
+		return Math.max(t * t * r / (n * n), n * n / (t * t * i));
+	}, a = (t, n, o, s, c) => {
+		if (t.length === 0 || s <= 0 || c <= 0) return;
+		if (t.length === 1) {
+			r.push({
+				x: n,
+				y: o,
+				w: s,
+				h: c,
+				idx: t[0]
+			});
+			return;
+		}
+		let l = t.reduce((t, n) => t + e[n], 0) || 1, u = s * c, d = t.map((t) => e[t] / l * u), f = Math.min(s, c), p = 0, m = [];
+		for (; p < d.length;) {
+			let e = [...m, d[p]];
+			if (m.length === 0 || i(e, f) <= i(m, f)) m = e, p++;
+			else break;
+		}
+		let h = t.slice(0, p), g = m.reduce((e, t) => e + t, 0);
+		if (s >= c) {
+			let e = g / c, i = o;
+			h.forEach((t, a) => {
+				let o = m[a] / e;
+				r.push({
+					x: n,
+					y: i,
+					w: e,
+					h: o,
+					idx: t
+				}), i += o;
+			}), a(t.slice(p), n + e, o, s - e, c);
+		} else {
+			let e = g / s, i = n;
+			h.forEach((t, n) => {
+				let a = m[n] / e;
+				r.push({
+					x: i,
+					y: o,
+					w: a,
+					h: e,
+					idx: t
+				}), i += a;
+			}), a(t.slice(p), n, o + e, s, c - e);
+		}
+	};
+	return a(e.map((e, t) => t), 0, 0, t, n), r;
+}
+function l({ data: l, height: u = 240, format: d = t, className: f, ...p }) {
+	let { ref: m, width: h } = n(u), g = i(), _ = a(), v = l.map((e, t) => t).sort((e, t) => l[t].value - l[e].value), y = h > 0 ? c(v.map((e) => l[e].value), h, u) : [];
+	return /* @__PURE__ */ s("div", {
+		...p,
+		className: `select-chart-wrap select-treemap${f ? " " + f : ""}`,
+		ref: m,
+		children: [h > 0 && /* @__PURE__ */ s("svg", {
+			width: h,
+			height: u,
+			className: "select-chart",
+			children: [/* @__PURE__ */ o("defs", { children: l.map((t, n) => {
+				let r = t.color ?? e(n);
+				return /* @__PURE__ */ s("linearGradient", {
+					id: `${_}-t${n}`,
+					x1: "0",
+					y1: "0",
+					x2: "0",
+					y2: "1",
+					children: [/* @__PURE__ */ o("stop", {
+						offset: "0%",
+						stopColor: r,
+						stopOpacity: .95
+					}), /* @__PURE__ */ o("stop", {
+						offset: "100%",
+						stopColor: r,
+						stopOpacity: .6
+					})]
+				}, n);
+			}) }), y.map((t, n) => {
+				let r = v[t.idx], i = l[r], a = t.w > 56 && t.h > 30;
+				return /* @__PURE__ */ s("g", { children: [
+					/* @__PURE__ */ o("rect", {
+						x: t.x + 1.5,
+						y: t.y + 1.5,
+						width: Math.max(0, t.w - 3),
+						height: Math.max(0, t.h - 3),
+						rx: 6,
+						fill: `url(#${_}-t${r})`,
+						className: "select-treemap__cell",
+						onMouseEnter: () => g.show({
+							x: t.x + t.w / 2,
+							y: t.y + 6,
+							place: t.y < 44 ? "bottom" : "top",
+							title: i.label,
+							rows: [{
+								label: "Valor",
+								value: d(i.value),
+								color: i.color ?? e(r)
+							}]
+						}),
+						onMouseLeave: g.hide
+					}),
+					a && /* @__PURE__ */ o("text", {
+						x: t.x + 12,
+						y: t.y + 22,
+						className: "select-treemap__label",
+						children: i.label
+					}),
+					a && t.h > 46 && /* @__PURE__ */ o("text", {
+						x: t.x + 12,
+						y: t.y + 40,
+						className: "select-treemap__value",
+						children: d(i.value)
+					})
+				] }, n);
+			})]
+		}), /* @__PURE__ */ o(r, { tip: g.tip })]
+	});
+}
+//#endregion
+export { l as SelectTreemap };
+
+//# sourceMappingURL=SelectTreemap.js.map