@selectwin/kit 0.1.196 → 0.1.198

package/dist/SelectUnitInput.js

@@ -0,0 +1,53 @@
+import { SelectLabelRow as e } from "./SelectField.js";
+import { forwardRef as t, useId as n, useState as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/SelectUnitInput.tsx
+var o = t(function({ label: t, value: o, onChange: s, unit: c, info: l, hint: u, error: d, placeholder: f = "0", disabled: p = !1, min: m, max: h, decimal: g = !1, className: _, ...v }, y) {
+	let b = n(), [x, S] = r(null), C = g ? x ?? o.replace(".", ",") : o;
+	return /* @__PURE__ */ a("div", {
+		ref: y,
+		...v,
+		className: `select-field${_ ? " " + _ : ""}`,
+		children: [
+			t && /* @__PURE__ */ i(e, {
+				htmlFor: b,
+				label: t,
+				info: l
+			}),
+			/* @__PURE__ */ a("div", {
+				className: `select-unit${d ? " select-unit--error" : ""}${p ? " select-unit--disabled" : ""}`,
+				children: [/* @__PURE__ */ i("input", {
+					id: b,
+					className: "select-unit__input",
+					type: g ? "text" : "number",
+					inputMode: g ? "decimal" : "numeric",
+					value: C,
+					onChange: (e) => {
+						if (!g) return s(e.target.value);
+						let t = m != null && m < 0 && e.target.value.trim().startsWith("-"), [n = "", ...r] = e.target.value.replace(/[^\d.,]/g, "").split(/[.,]/), i = (t ? "-" : "") + n + (r.length ? "," + r.join("") : "");
+						S(i), s(i);
+					},
+					onBlur: () => S(null),
+					placeholder: f,
+					disabled: p,
+					min: m,
+					max: h
+				}), /* @__PURE__ */ i("span", {
+					className: "select-unit__unit",
+					children: c
+				})]
+			}),
+			d ? /* @__PURE__ */ i("p", {
+				className: "select-field__error",
+				children: d
+			}) : u ? /* @__PURE__ */ i("p", {
+				className: "select-field__hint",
+				children: u
+			}) : null
+		]
+	});
+});
+//#endregion
+export { o as SelectUnitInput };
+
+//# sourceMappingURL=SelectUnitInput.js.map

package/dist/SelectVenn.js

@@ -0,0 +1,75 @@
+/* empty css           */
+import { chartColor as e } from "./chartUtils.js";
+import { forwardRef as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/SelectVenn.tsx
+var i = t(function({ sets: t, size: i = 240, className: a, ...o }, s) {
+	let c = Math.min(3, t.length), l = i / 2, u = i / 2, d = Math.max(1, ...t.slice(0, c).map((e) => e.size)), f = i * .26, p = (e) => f * .45 + f * .55 * Math.sqrt(e.size / d), m = c <= 2 ? [[l - f * .42, u], [l + f * .42, u]] : [
+		[l, u - f * .5],
+		[l - f * .5, u + f * .36],
+		[l + f * .5, u + f * .36]
+	];
+	return /* @__PURE__ */ r("div", {
+		ref: s,
+		...o,
+		className: `select-donut-wrap${a ? " " + a : ""}`,
+		children: [/* @__PURE__ */ n("div", {
+			className: "select-radial",
+			style: {
+				width: i,
+				aspectRatio: "1"
+			},
+			children: /* @__PURE__ */ r("svg", {
+				width: i,
+				height: i,
+				viewBox: `0 0 ${i} ${i}`,
+				className: "select-chart",
+				"aria-hidden": "true",
+				children: [t.slice(0, c).map((t, r) => {
+					let i = t.color ?? e(r);
+					return /* @__PURE__ */ n("circle", {
+						cx: m[r][0],
+						cy: m[r][1],
+						r: p(t),
+						fill: i,
+						fillOpacity: .32,
+						stroke: i,
+						strokeWidth: 1.5,
+						className: "select-venn__circle"
+					}, r);
+				}), t.slice(0, c).map((e, t) => /* @__PURE__ */ n("text", {
+					x: m[t][0],
+					y: m[t][1],
+					className: "select-chart__xlabel",
+					textAnchor: "middle",
+					dominantBaseline: "middle",
+					style: { fontWeight: 600 },
+					children: e.label
+				}, t))]
+			})
+		}), /* @__PURE__ */ n("ul", {
+			className: "select-donut__legend",
+			children: t.slice(0, c).map((t, i) => /* @__PURE__ */ r("li", {
+				className: "select-donut__legitem",
+				children: [
+					/* @__PURE__ */ n("span", {
+						className: "select-donut__dot",
+						style: { background: t.color ?? e(i) }
+					}),
+					/* @__PURE__ */ n("span", {
+						className: "select-donut__leglabel",
+						children: t.label
+					}),
+					/* @__PURE__ */ n("span", {
+						className: "select-donut__legval",
+						children: t.size.toLocaleString("pt-BR")
+					})
+				]
+			}, i))
+		})]
+	});
+});
+//#endregion
+export { i as SelectVenn };
+
+//# sourceMappingURL=SelectVenn.js.map

package/dist/SelectViolin.js

@@ -0,0 +1,95 @@
+/* empty css           */
+import { CHART_PAD as e, chartColor as t, formatCompact as n, linePath as r, niceMax as i, ticks as a, useChartSize as o } from "./chartUtils.js";
+import { ChartTooltip as s, useChartTooltip as c } from "./chartTip.js";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/SelectViolin.tsx
+function d({ data: d, height: f = 240, format: p = n, className: m, ...h }) {
+	let { ref: g, width: _ } = o(f), v = c(), y = e, b = Math.max(0, _ - y.left - y.right), x = f - y.top - y.bottom, S = y.top + x, C = i(Math.max(1, ...d.map((e) => e.max))), w = (e) => S - e / C * x, T = d.length, E = T ? b / T : 0, D = Math.min(E * .42, 46), O = Math.max(1, ...d.flatMap((e) => e.bins));
+	return /* @__PURE__ */ u("div", {
+		...h,
+		className: `select-chart-wrap${m ? " " + m : ""}`,
+		ref: g,
+		children: [_ > 0 && /* @__PURE__ */ u("svg", {
+			width: _,
+			height: f,
+			className: "select-chart",
+			children: [a(C).map((e, t) => /* @__PURE__ */ u("g", { children: [/* @__PURE__ */ l("line", {
+				x1: y.left,
+				x2: _ - y.right,
+				y1: w(e),
+				y2: w(e),
+				className: t === 0 ? "select-chart__axis" : "select-chart__grid"
+			}), /* @__PURE__ */ l("text", {
+				x: y.left - 8,
+				y: w(e),
+				className: "select-chart__ylabel",
+				dominantBaseline: "middle",
+				textAnchor: "end",
+				children: p(e)
+			})] }, t)), d.map((e, n) => {
+				let i = y.left + E * n + E / 2, a = e.color ?? t(n), o = e.bins.length, s = (t) => w(e.min + (e.max - e.min) * t / Math.max(1, o - 1)), c = (t) => e.bins[t] / O * D, d = [], m = [];
+				for (let e = o - 1; e >= 0; e--) d.push([i + c(e), s(e)]);
+				for (let e = 0; e < o; e++) m.push([i - c(e), s(e)]);
+				let h = `${r(d)} ${r(m).replace(/^M/, "L")} Z`, g = e.median == null ? null : w(e.median);
+				return /* @__PURE__ */ u("g", { children: [
+					/* @__PURE__ */ l("path", {
+						d: h,
+						fill: a,
+						fillOpacity: .32,
+						stroke: a,
+						strokeWidth: 1.5,
+						strokeLinejoin: "round"
+					}),
+					g != null && /* @__PURE__ */ l("line", {
+						x1: i - D * .6,
+						x2: i + D * .6,
+						y1: g,
+						y2: g,
+						stroke: a,
+						strokeWidth: 2
+					}),
+					/* @__PURE__ */ l("text", {
+						x: i,
+						y: f - y.bottom + 16,
+						className: "select-chart__xlabel",
+						textAnchor: "middle",
+						children: e.label
+					}),
+					/* @__PURE__ */ l("rect", {
+						x: i - E / 2,
+						y: y.top,
+						width: E,
+						height: x,
+						fill: "transparent",
+						onMouseEnter: () => v.show({
+							x: i,
+							y: w(e.max),
+							place: w(e.max) < y.top + 64 ? "bottom" : "top",
+							title: e.label,
+							rows: [
+								{
+									label: "Máx",
+									value: p(e.max),
+									color: a
+								},
+								...e.median == null ? [] : [{
+									label: "Mediana",
+									value: p(e.median)
+								}],
+								{
+									label: "Mín",
+									value: p(e.min)
+								}
+							]
+						}),
+						onMouseLeave: v.hide
+					})
+				] }, n);
+			})]
+		}), /* @__PURE__ */ l(s, { tip: v.tip })]
+	});
+}
+//#endregion
+export { d as SelectViolin };
+
+//# sourceMappingURL=SelectViolin.js.map

package/dist/SelectWaffle.js

@@ -0,0 +1,56 @@
+/* empty css           */
+import { chartColor as e, formatCompact as t } from "./chartUtils.js";
+import { forwardRef as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/SelectWaffle.tsx
+var a = n(function({ segments: n, cols: a = 10, rows: o = 10, format: s = t, className: c, ...l }, u) {
+	let d = n.reduce((e, t) => e + t.value, 0) || 1, f = a * o, p = n.map((e) => e.value / d * f), m = p.map(Math.floor), h = m.reduce((e, t) => e + t, 0), g = p.map((e, t) => ({
+		i: t,
+		frac: e - m[t]
+	})).sort((e, t) => t.frac - e.frac);
+	for (let e = 0; h < f && e < g.length; e++, h++) m[g[e].i]++;
+	let _ = [];
+	for (n.forEach((t, n) => {
+		let r = t.color ?? e(n);
+		for (let e = 0; e < m[n]; e++) _.push(r);
+	}); _.length < f;) _.push("var(--select-chart-track)");
+	return /* @__PURE__ */ i("div", {
+		ref: u,
+		...l,
+		className: `select-waffle-wrap${c ? " " + c : ""}`,
+		children: [/* @__PURE__ */ r("div", {
+			className: "select-waffle",
+			style: { gridTemplateColumns: `repeat(${a}, 1fr)` },
+			children: _.slice(0, f).map((e, t) => /* @__PURE__ */ r("span", {
+				className: "select-waffle__cell",
+				style: {
+					background: e,
+					animationDelay: `${t % a * 12 + Math.floor(t / a) * 12}ms`
+				}
+			}, t))
+		}), /* @__PURE__ */ r("ul", {
+			className: "select-donut__legend",
+			children: n.map((t, n) => /* @__PURE__ */ i("li", {
+				className: "select-donut__legitem",
+				children: [
+					/* @__PURE__ */ r("span", {
+						className: "select-donut__dot",
+						style: { background: t.color ?? e(n) }
+					}),
+					/* @__PURE__ */ r("span", {
+						className: "select-donut__leglabel",
+						children: t.label
+					}),
+					/* @__PURE__ */ r("span", {
+						className: "select-donut__legval",
+						children: s(t.value)
+					})
+				]
+			}, n))
+		})]
+	});
+});
+//#endregion
+export { a as SelectWaffle };
+
+//# sourceMappingURL=SelectWaffle.js.map

package/dist/SelectWaterfall.js

@@ -0,0 +1,123 @@
+/* empty css           */
+import { CHART_PAD as e, formatCompact as t, niceMax as n, ticks as r, useChartSize as i } from "./chartUtils.js";
+import { ChartTooltip as a, useChartTooltip as o } from "./chartTip.js";
+import { useId as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/SelectWaterfall.tsx
+function u({ data: u, height: d = 240, format: f = t, className: p, ...m }) {
+	let { ref: h, width: g } = i(d), _ = o(), v = s(), y = 0, b = u.map((e) => {
+		if (e.total) return y = e.value, {
+			...e,
+			start: 0,
+			end: e.value
+		};
+		let t = y;
+		return y += e.value, {
+			...e,
+			start: t,
+			end: y
+		};
+	}), x = n(Math.max(0, ...b.map((e) => Math.max(e.start, e.end)))), S = e, C = Math.max(0, g - S.left - S.right), w = d - S.top - S.bottom, T = S.top + w, E = u.length, D = E ? C / E : 0, O = Math.min(D * .6, 46), k = (e) => T - e / x * w, A = {
+		total: "var(--select-chart-1)",
+		inc: "var(--select-chart-4)",
+		dec: "var(--select-chart-3)"
+	}, j = (e) => e.total ? "total" : e.value >= 0 ? "inc" : "dec";
+	return /* @__PURE__ */ l("div", {
+		...m,
+		className: `select-chart-wrap${p ? " " + p : ""}`,
+		ref: h,
+		children: [g > 0 && /* @__PURE__ */ l("svg", {
+			width: g,
+			height: d,
+			className: "select-chart",
+			children: [
+				/* @__PURE__ */ c("defs", { children: [
+					"total",
+					"inc",
+					"dec"
+				].map((e) => /* @__PURE__ */ l("linearGradient", {
+					id: `${v}-${e}`,
+					x1: "0",
+					y1: "0",
+					x2: "0",
+					y2: "1",
+					children: [/* @__PURE__ */ c("stop", {
+						offset: "0%",
+						stopColor: A[e],
+						stopOpacity: 1
+					}), /* @__PURE__ */ c("stop", {
+						offset: "100%",
+						stopColor: A[e],
+						stopOpacity: .62
+					})]
+				}, e)) }),
+				r(x).map((e, t) => /* @__PURE__ */ l("g", { children: [/* @__PURE__ */ c("line", {
+					x1: S.left,
+					x2: g - S.right,
+					y1: k(e),
+					y2: k(e),
+					className: t === 0 ? "select-chart__axis" : "select-chart__grid"
+				}), /* @__PURE__ */ c("text", {
+					x: S.left - 8,
+					y: k(e),
+					className: "select-chart__ylabel",
+					dominantBaseline: "middle",
+					textAnchor: "end",
+					children: f(e)
+				})] }, t)),
+				b.slice(0, -1).map((e, t) => {
+					let n = S.left + D * t + D / 2 + O / 2, r = S.left + D * (t + 1) + D / 2 - O / 2;
+					return /* @__PURE__ */ c("line", {
+						x1: n,
+						x2: r,
+						y1: k(e.end),
+						y2: k(e.end),
+						className: "select-chart__crosshair"
+					}, `c${t}`);
+				}),
+				b.map((e, t) => {
+					let n = S.left + D * t + D / 2, r = k(Math.max(e.start, e.end)), i = Math.abs(k(e.start) - k(e.end)), a = j(e);
+					return /* @__PURE__ */ l("g", { children: [/* @__PURE__ */ c("rect", {
+						x: n - O / 2,
+						y: r,
+						width: O,
+						height: Math.max(2, i),
+						rx: 4,
+						fill: `url(#${v}-${a})`,
+						className: "select-chart__bar",
+						style: { animationDelay: `${t * 40}ms` },
+						onMouseEnter: () => _.show({
+							x: n,
+							y: r,
+							place: r < S.top + 52 ? "bottom" : "top",
+							title: e.label,
+							rows: e.total ? [{
+								label: "Total",
+								value: f(e.end),
+								color: A.total
+							}] : [{
+								label: "Variação",
+								value: `${e.value >= 0 ? "+" : ""}${f(e.value)}`,
+								color: A[a]
+							}, {
+								label: "Total",
+								value: f(e.end)
+							}]
+						}),
+						onMouseLeave: _.hide
+					}), /* @__PURE__ */ c("text", {
+						x: n,
+						y: d - S.bottom + 16,
+						className: "select-chart__xlabel",
+						textAnchor: "middle",
+						children: e.label
+					})] }, t);
+				})
+			]
+		}), /* @__PURE__ */ c(a, { tip: _.tip })]
+	});
+}
+//#endregion
+export { u as SelectWaterfall };
+
+//# sourceMappingURL=SelectWaterfall.js.map

package/dist/SelectWordCloud.js

@@ -0,0 +1,27 @@
+/* empty css           */
+import { chartColor as e } from "./chartUtils.js";
+import { forwardRef as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/SelectWordCloud.tsx
+var r = t(function({ words: t, minSize: r = 14, maxSize: i = 46, className: a, ...o }, s) {
+	let c = t.map((e) => e.value), l = Math.max(1, ...c), u = Math.min(...c), d = l - u || 1, f = (e) => r + (e - u) / d * (i - r);
+	return /* @__PURE__ */ n("div", {
+		ref: s,
+		...o,
+		className: `select-wordcloud${a ? " " + a : ""}`,
+		children: t.map((t, r) => /* @__PURE__ */ n("span", {
+			className: "select-wordcloud__word",
+			title: `${t.text}: ${t.value}`,
+			style: {
+				fontSize: `${f(t.value)}px`,
+				color: t.color ?? e(r),
+				opacity: .55 + (t.value - u) / d * .45
+			},
+			children: t.text
+		}, `${t.text}-${r}`))
+	});
+});
+//#endregion
+export { r as SelectWordCloud };
+
+//# sourceMappingURL=SelectWordCloud.js.map

package/dist/SelectWorkspaceSwitcher.js

@@ -0,0 +1,40 @@
+import { SelectorIcon as e } from "./icons.js";
+import { forwardRef as t } from "react";
+import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/SelectWorkspaceSwitcher.tsx
+var a = t(function({ avatar: t, name: a, badge: o, onClick: s, readOnly: c = !1, className: l, ...u }, d) {
+	let f = /* @__PURE__ */ i(n, { children: [
+		t && /* @__PURE__ */ r("span", {
+			className: "select-wsswitcher__avatar",
+			children: t
+		}),
+		/* @__PURE__ */ r("span", {
+			className: "select-wsswitcher__name",
+			children: a
+		}),
+		o
+	] });
+	return c ? /* @__PURE__ */ r("div", {
+		className: `select-wsswitcher select-wsswitcher--readonly${l ? " " + l : ""}`,
+		"aria-label": u["aria-label"],
+		title: u.title,
+		id: u.id,
+		children: f
+	}) : /* @__PURE__ */ i("button", {
+		ref: d,
+		...u,
+		type: "button",
+		className: `select-wsswitcher${l ? " " + l : ""}`,
+		onClick: s,
+		"aria-haspopup": "menu",
+		children: [f, /* @__PURE__ */ r("span", {
+			className: "select-wsswitcher__selector",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ r(e, {})
+		})]
+	});
+});
+//#endregion
+export { a as SelectWorkspaceSwitcher };
+
+//# sourceMappingURL=SelectWorkspaceSwitcher.js.map

package/dist/SelectZoomThumbnail.js

@@ -0,0 +1,40 @@
+import { SelectThumbnail as e } from "./SelectThumbnail.js";
+import { SelectImageZoomModal as t } from "./SelectImageZoomModal.js";
+import { useState as n } from "react";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/SelectZoomThumbnail.tsx
+function o({ src: o, alt: s = "", size: c = 40, title: l, count: u }) {
+	let [d, f] = n(!1);
+	return o ? /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i("button", {
+		type: "button",
+		onClick: (e) => {
+			e.stopPropagation(), f(!0);
+		},
+		"aria-label": "Ampliar imagem",
+		style: {
+			all: "unset",
+			cursor: "zoom-in",
+			display: "inline-flex"
+		},
+		children: /* @__PURE__ */ i(e, {
+			src: o,
+			size: c,
+			alt: s,
+			count: u
+		})
+	}), d && /* @__PURE__ */ i(t, {
+		open: !0,
+		onClose: () => f(!1),
+		src: o,
+		alt: s,
+		title: l ?? s
+	})] }) : /* @__PURE__ */ i(e, {
+		size: c,
+		alt: s,
+		count: u
+	});
+}
+//#endregion
+export { o as SelectZoomThumbnail };
+
+//# sourceMappingURL=SelectZoomThumbnail.js.map

package/dist/chartTip.js

@@ -0,0 +1,70 @@
+import { useCallback as e, useEffect as t, useLayoutEffect as n, useRef as r, useState as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { createPortal as s } from "react-dom";
+//#region src/chartTip.tsx
+function c() {
+	let [t, n] = i(null);
+	return {
+		tip: t,
+		show: e((e) => n(e), []),
+		hide: e(() => n(null), [])
+	};
+}
+function l({ tip: e, className: t, ...s }) {
+	let c = r(null), [l, u] = i(0);
+	if (n(() => {
+		if (!e) return;
+		let t = c.current, n = t == null ? void 0 : t.offsetParent;
+		if (!t || !n) return;
+		let r = t.offsetWidth / 2, i = n.clientWidth, a = 0;
+		e.x - r < 6 ? a = 6 - (e.x - r) : e.x + r > i - 6 && (a = i - 6 - (e.x + r)), u(a);
+	}, [e]), !e) return null;
+	let d = {
+		left: e.x + l,
+		top: e.y,
+		"--tip-caret-shift": `${-l}px`
+	};
+	return /* @__PURE__ */ o("div", {
+		...s,
+		ref: c,
+		className: `select-chart__tip${e.place === "bottom" ? " select-chart__tip--bottom" : ""}${t ? " " + t : ""}`,
+		style: d,
+		role: "status",
+		"aria-hidden": "true",
+		children: [e.title != null && /* @__PURE__ */ a("div", {
+			className: "select-chart__tiptitle",
+			children: e.title
+		}), e.rows.map((e, t) => /* @__PURE__ */ o("div", {
+			className: "select-chart__tiprow",
+			children: [
+				e.color && /* @__PURE__ */ a("span", {
+					className: "select-chart__tipdot",
+					style: { background: e.color }
+				}),
+				/* @__PURE__ */ a("span", {
+					className: "select-chart__tiplabel",
+					children: e.label
+				}),
+				/* @__PURE__ */ a("span", {
+					className: "select-chart__tipval",
+					children: e.value
+				})
+			]
+		}, t))]
+	});
+}
+function u({ tip: e, onDismiss: n }) {
+	return t(() => {
+		if (e) return window.addEventListener("scroll", n, !0), window.addEventListener("resize", n), () => {
+			window.removeEventListener("scroll", n, !0), window.removeEventListener("resize", n);
+		};
+	}, [e, n]), !e || typeof document > "u" ? null : s(/* @__PURE__ */ a("div", {
+		className: "select select-chart-tiplayer",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ a(l, { tip: e })
+	}), document.body);
+}
+//#endregion
+export { l as ChartTooltip, u as FloatingChartTooltip, c as useChartTooltip };
+
+//# sourceMappingURL=chartTip.js.map