@selectwin/kit 0.1.197 → 0.1.199

package/dist/SelectBalanceCard.js

@@ -0,0 +1,167 @@
+import { SelectButton as e } from "./SelectButton.js";
+import { ClockIcon as t } from "./icons.js";
+import { SelectInfoTip as n } from "./SelectInfoTip.js";
+import { SelectMetricDelta as r, SelectMoney as i } from "./SelectMoney.js";
+import { forwardRef as a } from "react";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/SelectBalanceCard.tsx
+var l = a(function({ availableCents: a, availableLabel: l = "Saldo disponível", availableHelp: u, delta: d, buckets: f = [], action: p, variant: m = "card", updatedLabel: h, meta: g = [], status: _, loading: v = !1, className: y, ...b }, x) {
+	if (m === "hero") {
+		let e = (e, t = "1em") => /* @__PURE__ */ s("span", {
+			className: "select-skeleton select-balance__skel",
+			style: {
+				width: e,
+				height: t
+			}
+		}), r = (e) => e == null || e === "" ? "—" : /* @__PURE__ */ s(i, { cents: e });
+		return /* @__PURE__ */ s("div", {
+			ref: x,
+			...b,
+			className: `select-balance-hero${y ? " " + y : ""}`,
+			children: /* @__PURE__ */ c("div", {
+				className: "select-balance-hero__layout",
+				children: [/* @__PURE__ */ c("section", {
+					className: "select-balance-hero__card",
+					"aria-label": l,
+					children: [
+						/* @__PURE__ */ c("div", {
+							className: "select-balance-hero__top",
+							children: [
+								/* @__PURE__ */ c("span", {
+									className: `select-balance-hero__label${u == null ? "" : " select-balance-hero__label--help"}`,
+									children: [l, u != null && /* @__PURE__ */ s(n, {
+										content: u,
+										label: `Sobre ${l}`
+									})]
+								}),
+								/* @__PURE__ */ s("span", {
+									className: "select-balance-hero__amount",
+									children: v ? e("11ch", "0.9em") : r(a)
+								}),
+								h != null && !v && /* @__PURE__ */ c("span", {
+									className: "select-balance-hero__updated",
+									children: [/* @__PURE__ */ s(t, {}), h]
+								})
+							]
+						}),
+						g.length > 0 && /* @__PURE__ */ s("dl", {
+							className: "select-balance-hero__meta",
+							children: g.map((t, n) => /* @__PURE__ */ c("div", {
+								className: "select-balance-hero__metaitem",
+								children: [/* @__PURE__ */ s("dt", { children: t.label }), /* @__PURE__ */ s("dd", { children: v ? e("7ch") : t.cents != null && t.cents !== "" ? /* @__PURE__ */ c(o, { children: [t.prefix, /* @__PURE__ */ s(i, { cents: t.cents })] }) : t.value ?? "—" })]
+							}, n))
+						}),
+						(p || _) && /* @__PURE__ */ c("div", {
+							className: "select-balance-hero__foot",
+							children: [p && /* @__PURE__ */ c("button", {
+								type: "button",
+								className: "select-balance-hero__cta",
+								onClick: p.onAction,
+								disabled: p.disabled || p.loading,
+								"aria-busy": p.loading || void 0,
+								children: [p.icon, p.content]
+							}), _ && /* @__PURE__ */ c("span", {
+								className: `select-balance-hero__status select-balance-hero__status--${_.tone ?? "success"}`,
+								children: [/* @__PURE__ */ s("span", {
+									className: "select-balance-hero__statusdot",
+									"aria-hidden": "true"
+								}), _.label]
+							})]
+						})
+					]
+				}), f.length > 0 && /* @__PURE__ */ s("div", {
+					className: "select-balance-hero__tiles",
+					children: f.map((t) => /* @__PURE__ */ c("div", {
+						className: "select-balance-hero__tile",
+						children: [
+							/* @__PURE__ */ c("div", {
+								className: "select-balance-hero__tilehead",
+								children: [
+									t.icon && /* @__PURE__ */ s("span", {
+										className: "select-balance-hero__tileicon",
+										children: t.icon
+									}),
+									/* @__PURE__ */ s("span", {
+										className: "select-balance-hero__tilelabel",
+										title: t.label,
+										children: t.label
+									}),
+									t.help != null && /* @__PURE__ */ s(n, {
+										content: t.help,
+										label: `Sobre ${t.label}`
+									})
+								]
+							}),
+							/* @__PURE__ */ s("span", {
+								className: "select-balance-hero__tileamount",
+								children: v ? e("8ch", "0.85em") : r(t.cents)
+							}),
+							t.hint != null && /* @__PURE__ */ s("span", {
+								className: "select-balance-hero__tilehint",
+								children: t.hint
+							})
+						]
+					}, t.label))
+				})]
+			})
+		});
+	}
+	return /* @__PURE__ */ c("div", {
+		ref: x,
+		...b,
+		className: `select-balance${y ? " " + y : ""}`,
+		children: [/* @__PURE__ */ c("div", {
+			className: "select-balance__head",
+			children: [/* @__PURE__ */ s("h3", {
+				className: "select-balance__title",
+				children: l
+			}), p && /* @__PURE__ */ s(e, {
+				variant: "primary",
+				size: "sm",
+				inline: !0,
+				onClick: p.onAction,
+				disabled: p.disabled,
+				loading: p.loading,
+				children: p.content
+			})]
+		}), /* @__PURE__ */ c("div", {
+			className: "select-balance__body",
+			children: [/* @__PURE__ */ c("div", {
+				className: "select-balance__heromain",
+				children: [/* @__PURE__ */ s("span", {
+					className: "select-balance__heroamount",
+					children: /* @__PURE__ */ s(i, { cents: a })
+				}), d != null && /* @__PURE__ */ s(r, {
+					value: d,
+					caption: "vs. período anterior"
+				})]
+			}), f.length > 0 && /* @__PURE__ */ s("div", {
+				className: "select-balance__buckets",
+				children: f.map((e) => /* @__PURE__ */ c("div", {
+					className: "select-balance__bucket",
+					children: [e.icon && /* @__PURE__ */ s("span", {
+						className: "select-balance__bucketicon",
+						children: e.icon
+					}), /* @__PURE__ */ c("span", {
+						className: "select-balance__bucketbody",
+						children: [/* @__PURE__ */ c("span", {
+							className: "select-balance__bucketlabel",
+							title: e.label,
+							children: [e.label, e.help != null && /* @__PURE__ */ s(n, {
+								content: e.help,
+								label: `Sobre ${e.label}`
+							})]
+						}), /* @__PURE__ */ s("span", {
+							className: "select-balance__bucketamount",
+							children: /* @__PURE__ */ s(i, { cents: e.cents })
+						})]
+					})]
+				}, e.label))
+			})]
+		})]
+	});
+});
+//#endregion
+export { l as SelectBalanceCard };
+
+//# sourceMappingURL=SelectBalanceCard.js.map

package/dist/SelectBankAccountField.js

@@ -0,0 +1,71 @@
+import { SelectField as e } from "./SelectField.js";
+import { SelectSelect as t } from "./SelectSelect.js";
+import { SelectCombobox as n } from "./SelectCombobox.js";
+import { SelectFieldGrid as r } from "./SelectFieldGrid.js";
+import { forwardRef as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/SelectBankAccountField.tsx
+var s = (e) => e.replace(/\D/g, "");
+function c(e) {
+	let [t = "", ...n] = e.replace(/[^\d-]/g, "").split("-");
+	return n.length ? `${t}-${n.join("").replace(/\D/g, "").slice(0, 2)}` : t;
+}
+var l = i(function({ value: i, onChange: l, banks: u = [], showType: d = !1, error: f, className: p, ...m }, h) {
+	let g = (e) => l({
+		...i,
+		...e
+	}), _ = u.map((e) => ({
+		label: e.name || e.code,
+		value: e.code
+	}));
+	return /* @__PURE__ */ o("div", {
+		ref: h,
+		...m,
+		className: `select-stack${p ? " " + p : ""}`,
+		children: [
+			/* @__PURE__ */ a(n, {
+				label: "Banco",
+				options: _,
+				value: i.bankCode,
+				onChange: (e) => g({ bankCode: e }),
+				placeholder: "Selecione o banco",
+				searchPlaceholder: "Buscar por nome ou código…",
+				emptyText: "Nenhum banco encontrado",
+				error: f
+			}),
+			/* @__PURE__ */ o(r, {
+				columns: 2,
+				children: [/* @__PURE__ */ a(e, {
+					label: "Agência",
+					value: i.agency,
+					onChange: (e) => g({ agency: s(e) }),
+					inputMode: "numeric",
+					maxLength: 6
+				}), /* @__PURE__ */ a(e, {
+					label: "Conta (com dígito)",
+					value: i.account,
+					onChange: (e) => g({ account: c(e) }),
+					inputMode: "numeric",
+					maxLength: 16,
+					placeholder: "Ex: 9288-1"
+				})]
+			}),
+			d && /* @__PURE__ */ a(t, {
+				label: "Tipo de conta",
+				options: [{
+					label: "Conta corrente",
+					value: "checking"
+				}, {
+					label: "Conta poupança",
+					value: "savings"
+				}],
+				value: i.type ?? "checking",
+				onChange: (e) => g({ type: e })
+			})
+		]
+	});
+});
+//#endregion
+export { l as SelectBankAccountField };
+
+//# sourceMappingURL=SelectBankAccountField.js.map

package/dist/SelectBankIcon.js

@@ -0,0 +1,162 @@
+/* empty css           */
+import { BankIcon as e } from "./icons.js";
+import { useState as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/SelectBankIcon.tsx
+var r = {
+	"001": "00000000",
+	"003": "04902979",
+	"004": "07237373",
+	"007": "33657248",
+	"016": "04891850",
+	"021": "28127603",
+	"025": "03323840",
+	"033": "90400888",
+	"036": "06271464",
+	"037": "04913711",
+	"041": "92702067",
+	"047": "13009717",
+	"063": "04184779",
+	"069": "61033106",
+	"070": "00000208",
+	"074": "03017677",
+	"077": "00416968",
+	"079": "09516419",
+	"084": "02398976",
+	"085": "05463212",
+	102: "02332886",
+	104: "00360305",
+	113: "61723847",
+	119: "13720915",
+	121: "10664513",
+	122: "33147315",
+	125: "45246410",
+	133: "10398952",
+	136: "00315557",
+	140: "62169875",
+	174: "43180355",
+	197: "16501555",
+	208: "30306294",
+	212: "92894922",
+	213: "54403563",
+	233: "62421979",
+	237: "60746948",
+	246: "28195667",
+	250: "50585090",
+	260: "18236120",
+	269: "53518684",
+	274: "11581339",
+	278: "27652684",
+	290: "08561701",
+	300: "33042151",
+	301: "13370835",
+	318: "61186680",
+	323: "10573521",
+	326: "03311443",
+	329: "32402502",
+	332: "13140088",
+	335: "27098060",
+	336: "31872495",
+	341: "60701190",
+	348: "33264668",
+	352: "29162769",
+	358: "09464032",
+	362: "01027058",
+	363: "62285390",
+	364: "09089356",
+	368: "08357240",
+	374: "27351731",
+	380: "22896431",
+	383: "21018182",
+	386: "30680829",
+	389: "17184037",
+	396: "13884775",
+	397: "34088029",
+	401: "15111975",
+	403: "37880206",
+	404: "37241230",
+	406: "37715993",
+	407: "00329598",
+	413: "01858774",
+	422: "58160789",
+	426: "11285104",
+	428: "39664698",
+	450: "13203354",
+	461: "19540550",
+	469: "07138049",
+	475: "10371492",
+	477: "33042953",
+	479: "60394079",
+	507: "37229413",
+	509: "13935893",
+	517: "03816413",
+	518: "37679449",
+	531: "34337707",
+	536: "20855875",
+	541: "00954288",
+	542: "18189547",
+	554: "28811341",
+	555: "02682287",
+	567: "33040601",
+	576: "11351086",
+	580: "87437687",
+	581: "70119680",
+	582: "33737818",
+	583: "33667205",
+	584: "80230774",
+	588: "20308187",
+	593: "27084098",
+	594: "48703388",
+	595: "19468242",
+	612: "31880826",
+	620: "51342763",
+	623: "59285411",
+	626: "61348538",
+	633: "68900810",
+	634: "17351180",
+	637: "60889128",
+	643: "62144175",
+	654: "92874270",
+	655: "59588111",
+	668: "48632754",
+	672: "53505601",
+	675: "30723871",
+	703: "10440482",
+	707: "62232889",
+	741: "00517645",
+	743: "00795423",
+	745: "33479023",
+	748: "01181521",
+	752: "01522368",
+	756: "02038232",
+	769: "24313102",
+	773: "53908413",
+	783: "31680151",
+	793: "61021673"
+};
+function i(e) {
+	let t = String(e ?? "").replace(/\D/g, "");
+	return t ? r[t.padStart(3, "0").slice(-3)] ?? null : null;
+}
+function a({ code: r, size: a = 32, label: o = null, baseUrl: s = "/bank-logos" }) {
+	let c = i(r), [l, u] = t(!1), d = o ? {
+		role: "img",
+		"aria-label": o
+	} : { "aria-hidden": !0 };
+	return /* @__PURE__ */ n("span", {
+		className: `select-brandicon select-bankicon${c && !l ? "" : " select-bankicon--generic"}`,
+		style: { "--select-brandicon-size": `${a}px` },
+		...d,
+		children: c && !l ? /* @__PURE__ */ n("img", {
+			src: `${s}/${c}.svg`,
+			alt: "",
+			loading: "lazy",
+			decoding: "async",
+			onError: () => u(!0)
+		}) : /* @__PURE__ */ n(e, {})
+	});
+}
+//#endregion
+export { a as SelectBankIcon, i as selectBankIspb };
+
+//# sourceMappingURL=SelectBankIcon.js.map

package/dist/SelectBarChart.js

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

package/dist/SelectBoxPlot.js

@@ -0,0 +1,127 @@
+/* empty css           */
+import { CHART_PAD as e, chartColor as t, formatCompact as n, niceMax as r, ticks as i, useChartSize as a } from "./chartUtils.js";
+import { ChartTooltip as o, useChartTooltip as s } from "./chartTip.js";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/SelectBoxPlot.tsx
+function u({ data: u, height: d = 240, format: f = n, className: p, ...m }) {
+	let { ref: h, width: g } = a(d), _ = s(), v = e, y = Math.max(0, g - v.left - v.right), b = d - v.top - v.bottom, x = v.top + b, S = r(Math.max(1, ...u.map((e) => e.max))), C = (e) => x - e / S * b, w = u.length, T = w ? y / w : 0, E = Math.min(T * .5, 40);
+	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: [i(S).map((e, t) => /* @__PURE__ */ l("g", { children: [/* @__PURE__ */ c("line", {
+				x1: v.left,
+				x2: g - v.right,
+				y1: C(e),
+				y2: C(e),
+				className: t === 0 ? "select-chart__axis" : "select-chart__grid"
+			}), /* @__PURE__ */ c("text", {
+				x: v.left - 8,
+				y: C(e),
+				className: "select-chart__ylabel",
+				dominantBaseline: "middle",
+				textAnchor: "end",
+				children: f(e)
+			})] }, t)), u.map((e, n) => {
+				let r = v.left + T * n + T / 2, i = e.color ?? t(n);
+				return /* @__PURE__ */ l("g", { children: [
+					/* @__PURE__ */ c("line", {
+						x1: r,
+						x2: r,
+						y1: C(e.max),
+						y2: C(e.min),
+						stroke: i,
+						strokeWidth: 1.5
+					}),
+					/* @__PURE__ */ c("line", {
+						x1: r - E / 4,
+						x2: r + E / 4,
+						y1: C(e.max),
+						y2: C(e.max),
+						stroke: i,
+						strokeWidth: 1.5
+					}),
+					/* @__PURE__ */ c("line", {
+						x1: r - E / 4,
+						x2: r + E / 4,
+						y1: C(e.min),
+						y2: C(e.min),
+						stroke: i,
+						strokeWidth: 1.5
+					}),
+					/* @__PURE__ */ c("rect", {
+						x: r - E / 2,
+						y: C(e.q3),
+						width: E,
+						height: Math.max(1, C(e.q1) - C(e.q3)),
+						rx: 3,
+						fill: i,
+						fillOpacity: .32,
+						stroke: i,
+						strokeWidth: 1.5
+					}),
+					/* @__PURE__ */ c("line", {
+						x1: r - E / 2,
+						x2: r + E / 2,
+						y1: C(e.median),
+						y2: C(e.median),
+						stroke: i,
+						strokeWidth: 2
+					}),
+					/* @__PURE__ */ c("text", {
+						x: r,
+						y: d - v.bottom + 16,
+						className: "select-chart__xlabel",
+						textAnchor: "middle",
+						children: e.label
+					}),
+					/* @__PURE__ */ c("rect", {
+						x: v.left + T * n,
+						y: v.top,
+						width: T,
+						height: b,
+						fill: "transparent",
+						onMouseEnter: () => _.show({
+							x: r,
+							y: C(e.max),
+							place: C(e.max) < v.top + 76 ? "bottom" : "top",
+							title: e.label,
+							rows: [
+								{
+									label: "Máx",
+									value: f(e.max),
+									color: i
+								},
+								{
+									label: "Q3",
+									value: f(e.q3)
+								},
+								{
+									label: "Mediana",
+									value: f(e.median)
+								},
+								{
+									label: "Q1",
+									value: f(e.q1)
+								},
+								{
+									label: "Mín",
+									value: f(e.min)
+								}
+							]
+						}),
+						onMouseLeave: _.hide
+					})
+				] }, n);
+			})]
+		}), /* @__PURE__ */ c(o, { tip: _.tip })]
+	});
+}
+//#endregion
+export { u as SelectBoxPlot };
+
+//# sourceMappingURL=SelectBoxPlot.js.map