@selectwin/kit 0.1.196 → 0.1.198

package/dist/SelectPopover.js

@@ -0,0 +1,101 @@
+/* empty css           */
+import { computePopoverPosition as e } from "./positioning.js";
+import { useFocusTrap as t } from "./internal/useFocusTrap.js";
+import { LayerProvider as n, isTopLayer as r, openLayer as i, useParentLayer as a } from "./internal/layers.js";
+import { detectSelectTheme as o } from "./detectSelectTheme.js";
+import { useCallback as s, useEffect as c, useLayoutEffect as l, useRef as u, useState as d } from "react";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+import { createPortal as h } from "react-dom";
+//#region src/SelectPopover.tsx
+var g = [];
+function _({ active: _, onClose: v, activator: y, children: b, placement: x = "bottom-start", gap: S = 6, role: C, trapFocus: w = !1, matchWidth: T = !1, theme: E }) {
+	let D = u(null), O = u(null), k = u(null), [A, j] = d(null), [M, N] = d("light"), [P] = d(() => ({})), F = a(), I = s(() => {
+		var t;
+		let n = ((t = D.current) == null ? void 0 : t.firstElementChild) ?? D.current, r = O.current;
+		if (!n || !r) return;
+		let i = n.getBoundingClientRect(), a = e(i, {
+			width: r.offsetWidth,
+			height: r.offsetHeight
+		}, x, S);
+		j({
+			top: a.top,
+			left: a.left,
+			minWidth: T ? i.width : void 0
+		});
+	}, [
+		x,
+		S,
+		T
+	]);
+	return l(() => {
+		if (!_) {
+			j(null);
+			return;
+		}
+		N(o(D.current)), I();
+	}, [_, I]), c(() => {
+		if (_) return k.current = document.activeElement, () => {
+			var e, t;
+			return (e = k.current) == null || (t = e.focus) == null ? void 0 : t.call(e, { preventScroll: !0 });
+		};
+	}, [_]), c(() => {
+		if (!_) return;
+		let e = O.current;
+		if (e) return g.push(e), () => {
+			let t = g.lastIndexOf(e);
+			t !== -1 && g.splice(t, 1);
+		};
+	}, [_]), c(() => {
+		if (!_) return;
+		let e = () => I();
+		return window.addEventListener("scroll", e, !0), window.addEventListener("resize", e), () => {
+			window.removeEventListener("scroll", e, !0), window.removeEventListener("resize", e);
+		};
+	}, [_, I]), c(() => {
+		if (!_) return;
+		let e = i(P, F), t = (e) => {
+			var t, n;
+			let r = e.target;
+			(t = O.current) != null && t.contains(r) || (n = D.current) != null && n.contains(r) || g.length && g[g.length - 1] !== O.current || v();
+		}, n = (e) => {
+			e.key === "Escape" && r(P) && (e.stopPropagation(), v());
+		};
+		return document.addEventListener("mousedown", t, !0), document.addEventListener("keydown", n), () => {
+			e(), document.removeEventListener("mousedown", t, !0), document.removeEventListener("keydown", n);
+		};
+	}, [
+		_,
+		v,
+		P,
+		F
+	]), t(_ && w, O), /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p("span", {
+		className: "select-pop__trigger",
+		ref: D,
+		children: y
+	}), _ && h(/* @__PURE__ */ p("div", {
+		ref: O,
+		className: "select select-pop__panel",
+		"data-theme": E ?? M,
+		role: C,
+		tabIndex: -1,
+		style: A ? {
+			position: "fixed",
+			top: A.top,
+			left: A.left,
+			minWidth: A.minWidth
+		} : {
+			position: "fixed",
+			top: 0,
+			left: 0,
+			visibility: "hidden"
+		},
+		children: /* @__PURE__ */ p(n, {
+			value: P,
+			children: b
+		})
+	}), document.body)] });
+}
+//#endregion
+export { _ as SelectPopover };
+
+//# sourceMappingURL=SelectPopover.js.map

package/dist/SelectPreviewFrame.js

@@ -0,0 +1,119 @@
+import { ExternalLinkIcon as e, MobileIcon as t, MonitorIcon as n, RefreshIcon as r } from "./icons.js";
+import { SelectIconButton as i } from "./SelectIconButton.js";
+import { safeHref as a } from "./internal/safeHref.js";
+import { SelectLoader as o } from "./SelectLoader.js";
+import { forwardRef as s, useLayoutEffect as c, useRef as l, useState as u } from "react";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region src/SelectPreviewFrame.tsx
+var m = "allow-scripts allow-same-origin allow-forms", h = 390, g = 1280, _ = s(function({ src: s, sandbox: _ = m, title: v = "Pré-visualização", height: y = 560, fill: b = !1, initialDevice: x = "desktop", showDeviceToggle: S = !0, openLabel: C = "Abrir em nova aba", emptyLabel: w = "Salve para gerar a pré-visualização.", onReload: T, notice: E, iframeRef: D, desktopWidth: O = g, className: k, ...A }, j) {
+	let M = a(s), [N, P] = u(x), [F, I] = u(0), [L, R] = u(!0), z = l(null), [B, V] = u({
+		w: 0,
+		h: 0
+	});
+	c(() => {
+		let e = z.current;
+		if (!e || typeof ResizeObserver > "u") return;
+		let t = new ResizeObserver((e) => {
+			var t;
+			let n = (t = e[0]) == null ? void 0 : t.contentRect;
+			n && V({
+				w: n.width,
+				h: n.height
+			});
+		});
+		return t.observe(e), () => t.disconnect();
+	}, []);
+	let H = N === "mobile" ? h : O, U = B.w > 0 ? Math.min(1, B.w / H) : 1, W = M ? `${M}${M.includes("?") ? "&" : "?"}_pv=${F}` : "", G = () => {
+		if (R(!0), T) {
+			T();
+			return;
+		}
+		I((e) => e + 1);
+	};
+	return /* @__PURE__ */ p("div", {
+		ref: j,
+		...A,
+		className: `select-preview${b ? " select-preview--fill" : ""}${k ? " " + k : ""}`,
+		children: [/* @__PURE__ */ p("div", {
+			className: "select-preview__bar",
+			children: [
+				/* @__PURE__ */ f("span", {
+					className: "select-preview__title",
+					children: v
+				}),
+				E && /* @__PURE__ */ f("span", {
+					className: "select-preview__notice",
+					children: E
+				}),
+				/* @__PURE__ */ p("div", {
+					className: "select-preview__actions",
+					children: [
+						S && /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f(i, {
+							size: "sm",
+							icon: /* @__PURE__ */ f(n, {}),
+							label: "Ver no computador",
+							active: N === "desktop",
+							onClick: () => P("desktop")
+						}), /* @__PURE__ */ f(i, {
+							size: "sm",
+							icon: /* @__PURE__ */ f(t, {}),
+							label: "Ver no celular",
+							active: N === "mobile",
+							onClick: () => P("mobile")
+						})] }),
+						/* @__PURE__ */ f(i, {
+							size: "sm",
+							icon: /* @__PURE__ */ f(r, {}),
+							label: "Recarregar",
+							onClick: G,
+							disabled: !M
+						}),
+						M && /* @__PURE__ */ f("a", {
+							className: "select-iconbtn select-iconbtn--sm select-iconbtn--ghost",
+							href: M,
+							target: "_blank",
+							rel: "noreferrer",
+							"aria-label": C,
+							title: C,
+							children: /* @__PURE__ */ f(e, {})
+						})
+					]
+				})
+			]
+		}), /* @__PURE__ */ f("div", {
+			ref: z,
+			className: "select-preview__stage",
+			style: b ? void 0 : { height: y },
+			children: W ? /* @__PURE__ */ p("div", {
+				className: "select-preview__device",
+				style: { width: H * U },
+				children: [L && /* @__PURE__ */ f("div", {
+					className: "select-preview__loading",
+					children: /* @__PURE__ */ f(o, {})
+				}), /* @__PURE__ */ f("div", {
+					className: "select-preview__viewport",
+					style: {
+						width: H,
+						height: B.h > 0 ? B.h / U : "100%",
+						zoom: U
+					},
+					children: /* @__PURE__ */ f("iframe", {
+						ref: D,
+						title: v,
+						src: W,
+						sandbox: _ === !1 ? void 0 : _,
+						onLoad: () => R(!1),
+						className: "select-preview__iframe"
+					}, F)
+				})]
+			}) : /* @__PURE__ */ f("p", {
+				className: "select-preview__empty",
+				children: w
+			})
+		})]
+	});
+});
+//#endregion
+export { _ as SelectPreviewFrame };
+
+//# sourceMappingURL=SelectPreviewFrame.js.map

package/dist/SelectProgressBar.js

@@ -0,0 +1,54 @@
+/* empty css           */
+import { forwardRef as e } from "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/SelectProgressBar.tsx
+var r = e(function({ value: e = 0, max: r = 100, tone: i = "brand", size: a = "md", label: o, valueLabel: s, caption: c, indeterminate: l = !1, ariaLabel: u, loading: d = !1, className: f, ...p }, m) {
+	if (d) return /* @__PURE__ */ n("div", {
+		ref: m,
+		...p,
+		"aria-hidden": "true",
+		className: `select-progress select-progress--${a} is-loading${f ? " " + f : ""}`,
+		children: [/* @__PURE__ */ n("div", {
+			className: "select-progress__head",
+			children: [/* @__PURE__ */ t("span", { className: "select-skeleton select-progress__skellabel" }), /* @__PURE__ */ t("span", { className: "select-skeleton select-progress__skelvalue" })]
+		}), /* @__PURE__ */ t("div", { className: "select-skeleton select-progress__track" })]
+	});
+	let h = r > 0 ? r : 100, g = Math.max(0, Math.min(100, (Number.isFinite(e) ? e : 0) / h * 100)), _ = o != null || s != null;
+	return /* @__PURE__ */ n("div", {
+		ref: m,
+		...p,
+		className: `select-progress select-progress--${i} select-progress--${a}${l ? " is-indeterminate" : ""}${f ? " " + f : ""}`,
+		children: [
+			_ && /* @__PURE__ */ n("div", {
+				className: "select-progress__head",
+				children: [o != null && /* @__PURE__ */ t("span", {
+					className: "select-progress__label",
+					children: o
+				}), s != null && /* @__PURE__ */ t("span", {
+					className: "select-progress__value",
+					children: s
+				})]
+			}),
+			/* @__PURE__ */ t("div", {
+				className: "select-progress__track",
+				role: "progressbar",
+				"aria-valuemin": l ? void 0 : 0,
+				"aria-valuemax": l ? void 0 : h,
+				"aria-valuenow": l ? void 0 : Math.min(e, h),
+				"aria-label": u ?? (typeof o == "string" ? o : void 0),
+				children: /* @__PURE__ */ t("span", {
+					className: "select-progress__fill",
+					style: l ? void 0 : { width: `${g}%` }
+				})
+			}),
+			c != null && /* @__PURE__ */ t("p", {
+				className: "select-progress__caption",
+				children: c
+			})
+		]
+	});
+});
+//#endregion
+export { r as SelectProgressBar };
+
+//# sourceMappingURL=SelectProgressBar.js.map

package/dist/SelectProgressList.js

@@ -0,0 +1,58 @@
+/* empty css           */
+import { SelectBadge as e } from "./SelectBadge.js";
+import { chartColor as t, formatCompact as n } from "./chartUtils.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/SelectProgressList.tsx
+function a({ items: a, format: o = n, color: s, emptyText: c = "Sem dados no período.", spread: l = !1, max: u }) {
+	if (a.length === 0) return /* @__PURE__ */ r("div", {
+		className: "select-progresslist__empty",
+		children: c
+	});
+	let d = u != null && u > 0 ? u : Math.max(...a.map((e) => e.value), 1);
+	return /* @__PURE__ */ r("ul", {
+		className: `select-progresslist${l ? " select-progresslist--spread" : ""}`,
+		children: a.map((n, a) => {
+			let c = n.color ?? s ?? t(a);
+			return /* @__PURE__ */ i("li", {
+				className: "select-progresslist__row",
+				children: [
+					/* @__PURE__ */ i("div", {
+						className: "select-progresslist__top",
+						children: [/* @__PURE__ */ i("span", {
+							className: "select-progresslist__label",
+							children: [/* @__PURE__ */ r("span", {
+								className: "select-progresslist__name",
+								children: n.label
+							}), n.badge && /* @__PURE__ */ r(e, {
+								tone: n.badge.tone,
+								children: n.badge.label
+							})]
+						}), /* @__PURE__ */ r("span", {
+							className: "select-progresslist__value",
+							children: n.valueText ?? o(n.value)
+						})]
+					}),
+					/* @__PURE__ */ r("div", {
+						className: "select-progresslist__track",
+						children: /* @__PURE__ */ r("span", {
+							className: "select-progresslist__bar",
+							style: {
+								width: `${Math.min(100, Math.max(0, n.value / d * 100))}%`,
+								background: `linear-gradient(90deg, ${c}, color-mix(in srgb, ${c} 55%, transparent))`,
+								animationDelay: `${a * 40}ms`
+							}
+						})
+					}),
+					n.caption != null && /* @__PURE__ */ r("div", {
+						className: "select-progresslist__caption",
+						children: n.caption
+					})
+				]
+			}, `${n.label}-${a}`);
+		})
+	});
+}
+//#endregion
+export { a as SelectProgressList };
+
+//# sourceMappingURL=SelectProgressList.js.map

package/dist/SelectPyramid.js

@@ -0,0 +1,116 @@
+/* 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 { useState as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/SelectPyramid.tsx
+function c({ data: c, leftLabel: l = "Esquerda", rightLabel: u = "Direita", height: d, format: f = t, leftColor: p, rightColor: m, centerWidth: h = 84, className: g, ..._ }) {
+	let v = d ?? Math.max(180, c.length * 40 + 36), { ref: y, width: b } = n(v), x = i(), [S, C] = a(null), w = Math.max(1, ...c.flatMap((e) => [e.left, e.right])), T = Math.max(0, (b - h - 16) / 2), E = c.length ? (v - 26 - 8) / c.length : 0, D = Math.min(E * .6, 26), O = 8 + T, k = 8 + T + h, A = p ?? e(1), j = m ?? e(0);
+	return /* @__PURE__ */ s("div", {
+		..._,
+		className: `select-chart-wrap${g ? " " + g : ""}`,
+		ref: y,
+		children: [b > 0 && /* @__PURE__ */ s("svg", {
+			width: b,
+			height: v,
+			className: "select-chart",
+			onMouseLeave: () => {
+				C(null), x.hide();
+			},
+			children: [
+				/* @__PURE__ */ o("text", {
+					x: 8,
+					y: 14,
+					className: "select-chart__xlabel",
+					textAnchor: "start",
+					style: {
+						fill: A,
+						fontWeight: 600
+					},
+					children: l
+				}),
+				/* @__PURE__ */ o("text", {
+					x: b - 8,
+					y: 14,
+					className: "select-chart__xlabel",
+					textAnchor: "end",
+					style: {
+						fill: j,
+						fontWeight: 600
+					},
+					children: u
+				}),
+				c.map((e, t) => {
+					let n = 26 + E * t + E / 2, r = e.left / w * T, i = e.right / w * T, a = S === e.label;
+					return /* @__PURE__ */ s("g", {
+						style: { opacity: S === null || a ? 1 : .5 },
+						children: [
+							/* @__PURE__ */ o("rect", {
+								x: O - r,
+								y: n - D / 2,
+								width: r,
+								height: D,
+								rx: 4,
+								fill: A,
+								className: "select-pyramid__bar select-pyramid__bar--l",
+								onMouseEnter: () => {
+									C(e.label), x.show({
+										x: O - r,
+										y: n - D / 2,
+										place: "top",
+										title: e.label,
+										rows: [{
+											label: l,
+											value: f(e.left),
+											color: A
+										}]
+									});
+								},
+								onMouseLeave: () => {
+									C(null), x.hide();
+								}
+							}),
+							/* @__PURE__ */ o("rect", {
+								x: k,
+								y: n - D / 2,
+								width: i,
+								height: D,
+								rx: 4,
+								fill: j,
+								className: "select-pyramid__bar select-pyramid__bar--r",
+								onMouseEnter: () => {
+									C(e.label), x.show({
+										x: k + i,
+										y: n - D / 2,
+										place: "top",
+										title: e.label,
+										rows: [{
+											label: u,
+											value: f(e.right),
+											color: j
+										}]
+									});
+								},
+								onMouseLeave: () => {
+									C(null), x.hide();
+								}
+							}),
+							/* @__PURE__ */ o("text", {
+								x: (O + k) / 2,
+								y: n,
+								className: "select-chart__xlabel",
+								dominantBaseline: "middle",
+								textAnchor: "middle",
+								children: e.label
+							})
+						]
+					}, e.label);
+				})
+			]
+		}), /* @__PURE__ */ o(r, { tip: x.tip })]
+	});
+}
+//#endregion
+export { c as SelectPyramid };
+
+//# sourceMappingURL=SelectPyramid.js.map

package/dist/SelectQrCode.d.ts

@@ -0,0 +1,12 @@
+/** O caminho SVG dos módulos escuros (um quadrado de 1×1 por módulo, já deslocado pela margem). */
+export declare function qrPath(size: number, isDark: (row: number, col: number) => boolean): string;
+export interface SelectQrCodeProps {
+    /** O texto que o QR leva (o Pix copia e cola, um endereço, um `otpauth://`). */
+    value: string;
+    /** O que o QR é, para quem não o vê ("QR Code do Pix"). */
+    label: string;
+    /** O lado, em px (padrão 168). */
+    size?: number;
+    className?: string;
+}
+export declare function SelectQrCode({ value, label, size, className }: SelectQrCodeProps): import("react").JSX.Element | null;

package/dist/SelectQrCode.js

@@ -0,0 +1,51 @@
+/* empty css           */
+import { useEffect as e, useState as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/SelectQrCode.tsx
+var i = 4;
+function a(e, t) {
+	let n = "";
+	for (let r = 0; r < e; r++) for (let a = 0; a < e; a++) t(r, a) && (n += `M${a + i},${r + i}h1v1h-1z`);
+	return n;
+}
+function o({ value: i, label: o, size: s = 168, className: c }) {
+	let [l, u] = t(null), [d, f] = t(!1);
+	if (e(() => {
+		let e = !0;
+		return u(null), f(!1), import("qrcode-generator").then(({ default: t }) => {
+			let n = t(0, "M");
+			n.addData(i, "Byte"), n.make();
+			let r = n.getModuleCount();
+			e && u({
+				count: r,
+				path: a(r, (e, t) => n.isDark(e, t))
+			});
+		}).catch(() => {
+			e && f(!0);
+		}), () => {
+			e = !1;
+		};
+	}, [i]), d) return null;
+	let p = l ? l.count + 8 : 1;
+	return /* @__PURE__ */ r("svg", {
+		role: "img",
+		"aria-label": o,
+		width: s,
+		height: s,
+		viewBox: `0 0 ${p} ${p}`,
+		shapeRendering: "crispEdges",
+		className: `select-qr${l ? "" : " select-qr--loading"}${c ? " " + c : ""}`,
+		children: [/* @__PURE__ */ n("rect", {
+			width: p,
+			height: p,
+			fill: "#ffffff"
+		}), l && /* @__PURE__ */ n("path", {
+			d: l.path,
+			fill: "#000000"
+		})]
+	});
+}
+//#endregion
+export { o as SelectQrCode, a as qrPath };
+
+//# sourceMappingURL=SelectQrCode.js.map