@selectwin/kit 0.1.196 → 0.1.198

package/dist/SelectPasswordStrength.js

@@ -0,0 +1,82 @@
+import { CheckIcon 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/SelectPasswordStrength.tsx
+var a = [
+	{
+		label: "Muito fraca",
+		cls: "is-0"
+	},
+	{
+		label: "Fraca",
+		cls: "is-1"
+	},
+	{
+		label: "Razoável",
+		cls: "is-2"
+	},
+	{
+		label: "Forte",
+		cls: "is-3"
+	},
+	{
+		label: "Excelente",
+		cls: "is-4"
+	}
+], o = 2;
+function s(e) {
+	if (!e) return 0;
+	let t = 0;
+	return e.length >= 8 && t++, e.length >= 12 && t++, /[a-z]/.test(e) && /[A-Z]/.test(e) && t++, /\d/.test(e) && /[^A-Za-z0-9]/.test(e) && t++, Math.min(t, 4);
+}
+var c = t(function({ value: t, rules: c, showMeter: l = !0, columns: u = 1, className: d, ...f }, p) {
+	let m = c != null && c.length > 0, h = s(t), g = m && c.some((e) => !e.met) ? Math.min(h, o) : h, _ = a[g] ?? a[0], v = /* @__PURE__ */ i(n, { children: [/* @__PURE__ */ r("div", {
+		className: `select-strength__bars select-strength__bars--${_.cls}`,
+		children: [
+			0,
+			1,
+			2,
+			3
+		].map((e) => /* @__PURE__ */ r("span", { className: `select-strength__bar${e < g ? " is-on" : ""}` }, e))
+	}), t && /* @__PURE__ */ r("span", {
+		className: "select-strength__label",
+		children: _.label
+	})] });
+	return m ? /* @__PURE__ */ i("div", {
+		ref: p,
+		...f,
+		className: `select-strength select-strength--rules${d ? " " + d : ""}`,
+		children: [l && /* @__PURE__ */ r("div", {
+			className: "select-strength__meter",
+			"aria-hidden": !t,
+			children: v
+		}), /* @__PURE__ */ r("ul", {
+			className: `select-strength__rules${u === 2 ? " select-strength__rules--2col" : ""}`,
+			children: c.map((t) => /* @__PURE__ */ i("li", {
+				className: `select-strength__rule${t.met ? " is-met" : ""}`,
+				children: [
+					/* @__PURE__ */ r("span", {
+						className: "select-strength__mark",
+						"aria-hidden": "true",
+						children: t.met && /* @__PURE__ */ r(e, {})
+					}),
+					t.label,
+					/* @__PURE__ */ r("span", {
+						className: "select-strength__status",
+						children: t.met ? " (atendido)" : " (pendente)"
+					})
+				]
+			}, t.label))
+		})]
+	}) : /* @__PURE__ */ r("div", {
+		ref: p,
+		...f,
+		className: `select-strength${d ? " " + d : ""}`,
+		"aria-hidden": !t,
+		children: v
+	});
+});
+//#endregion
+export { c as SelectPasswordStrength, s as passwordScore };
+
+//# sourceMappingURL=SelectPasswordStrength.js.map

package/dist/SelectPaymentBrand.js

@@ -0,0 +1,213 @@
+import { SelectInline as e } from "./SelectLayout.js";
+import { SelectText as t } from "./SelectText.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/SelectPaymentBrand.tsx
+var i = "https://cdn.selectwin.io/public/payicons", a = [
+	{
+		value: "visa",
+		label: "Visa",
+		file: "visa"
+	},
+	{
+		value: "mastercard",
+		label: "Mastercard",
+		file: "mastercard"
+	},
+	{
+		value: "elo",
+		label: "Elo",
+		file: "elo"
+	},
+	{
+		value: "amex",
+		label: "American Express",
+		file: "amex"
+	},
+	{
+		value: "hipercard",
+		label: "Hipercard",
+		file: "hipercard"
+	},
+	{
+		value: "hiper",
+		label: "Hiper",
+		file: "hiper"
+	},
+	{
+		value: "jcb",
+		label: "JCB",
+		file: "jcb"
+	},
+	{
+		value: "aura",
+		label: "Aura",
+		file: "aura"
+	},
+	{
+		value: "cabal",
+		label: "Cabal",
+		file: "cabal"
+	},
+	{
+		value: "discover",
+		label: "Discover",
+		file: "discover"
+	},
+	{
+		value: "banescard",
+		label: "Banescard",
+		file: "banescard"
+	},
+	{
+		value: "dinersclub",
+		label: "Diners Club",
+		file: "dinersclub"
+	}
+], o = {
+	master: "mastercard",
+	"american-express": "amex",
+	americanexpress: "amex",
+	diners: "dinersclub",
+	"diners-club": "dinersclub"
+}, s = new Map(a.map((e) => [e.value, e]));
+function c(e) {
+	if (!e) return null;
+	let t = e.toLowerCase().trim().replace(/\s+/g, "-");
+	for (let e of [t, t.replace(/-/g, "")]) {
+		let t = s.get(e) ?? (o[e] ? s.get(o[e]) : void 0);
+		if (t) return t;
+	}
+	return null;
+}
+function l(e) {
+	var t;
+	return ((t = c(e)) == null ? void 0 : t.label) ?? e;
+}
+var u = {
+	pix: "pix",
+	billet: "boleto",
+	boleto: "boleto"
+}, d = {
+	credit: "Cartão de crédito",
+	debit: "Cartão de débito",
+	pix: "Pix",
+	billet: "Boleto bancário",
+	boleto: "Boleto bancário",
+	nupay: "NuPay"
+}, f = 500 / 275.9;
+function p({ fill: e, label: t, style: i }) {
+	return /* @__PURE__ */ r("svg", {
+		viewBox: "0 0 500 275.9",
+		role: "img",
+		"aria-label": t,
+		style: {
+			...i,
+			fill: e
+		},
+		children: [/* @__PURE__ */ n("path", { d: "M90.3 26.3c15.8-16.6 36.7-26.3 61.4-26.3 48 0 79.8 35 85.9 87.5 2 17.1 2 41.1 1.9 68.9v113h-66v-77.1s-.1-66-.5-78.4c-1.8-53.7-33.6-87.5-82.7-87.6-14.9 15.8-22.8 34.9-24 64.2-.2 4.1-.1 18.6-.1 37.6 0 9.9.1 21 .1 32.6v108.8H.3V150.8c0-4.1-.1-8.2-.1-12.3-.1-8.3-.3-16.6.1-24.9.7-13.8 3.1-27.4 9.6-40 14.7-28.8 44.9-47.4 77-47.4 1.1 0 2.2.1 3.4.1z" }), /* @__PURE__ */ n("path", { d: "M499.7 162.3c.4-8.3.3-16.6.1-24.9-.1-4.1-.1-8.2-.1-12.3V6.4h-66v108.8c0 11.6 0 22.7.1 32.6.1 19.1.1 33.6-.1 37.6-1.2 29.3-9.1 48.4-23.9 64.1-49.1 0-81-33.8-82.7-87.5-.4-12.3-.6-43-.6-78.4V6.3l-66 .1v113c0 27.8 0 51.9 1.9 68.9 6.1 52.5 37.9 87.5 85.9 87.5 24.6 0 45.6-9.7 61.4-26.3 1.1 0 2.2.1 3.4.1 32.2 0 62.3-18.6 77-47.4 6.5-12.6 8.9-26.1 9.6-39.9z" })]
+	});
+}
+function m(e) {
+	var t;
+	return ((t = c(e)) == null ? void 0 : t.file) ?? null;
+}
+function h({ method: a, cardBrand: o, size: s = 24, showLabel: c = !1, plain: h = !1, label: g }) {
+	let _ = m(o) ?? (a ? u[a] : null), v = o ? l(o) : void 0, y = g || v || (a ? d[a] : void 0) || a || "—", b = m(o) == null && a === "nupay";
+	if (!_ && !b) return /* @__PURE__ */ n(t, {
+		as: "span",
+		tone: "subdued",
+		variant: "bodySm",
+		children: g || a && d[a] || v || a || "—"
+	});
+	let x = m(o) == null, S = s, C = Math.round(s * 1.2);
+	if (h) {
+		let o = x ? Math.round(s * .7) : s, l = Math.round(s * .5), u = b ? /* @__PURE__ */ n(p, {
+			fill: "var(--select-nupay-mark, #4a0876)",
+			label: y,
+			style: {
+				height: l,
+				width: Math.min(Math.round(l * f), C),
+				display: "block",
+				flex: "0 0 auto"
+			}
+		}) : /* @__PURE__ */ n("img", {
+			src: `${i}/${_}.svg`,
+			alt: y,
+			title: y,
+			loading: "lazy",
+			style: {
+				height: o,
+				width: "auto",
+				maxWidth: C,
+				objectFit: "contain",
+				display: "block",
+				flex: "0 0 auto"
+			}
+		});
+		return c ? /* @__PURE__ */ r(e, {
+			gap: "150",
+			blockAlign: "center",
+			wrap: !1,
+			children: [u, /* @__PURE__ */ n(t, {
+				as: "span",
+				variant: "bodySm",
+				children: g || a && d[a] || v || a
+			})]
+		}) : u;
+	}
+	let w = /* @__PURE__ */ n("span", {
+		title: y,
+		style: {
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			width: C,
+			height: S,
+			padding: 2,
+			boxSizing: "border-box",
+			flex: "0 0 auto",
+			background: "#ffffff",
+			border: "1px solid var(--select-border)",
+			borderRadius: "var(--select-radius-sm)",
+			overflow: "hidden"
+		},
+		children: b ? /* @__PURE__ */ n(p, {
+			fill: "#4a0876",
+			label: y,
+			style: {
+				width: "100%",
+				height: "60%",
+				display: "block"
+			}
+		}) : /* @__PURE__ */ n("img", {
+			src: `${i}/${_}.svg`,
+			alt: y,
+			loading: "lazy",
+			style: x ? {
+				maxWidth: "100%",
+				maxHeight: "72%",
+				objectFit: "contain",
+				display: "block"
+			} : {
+				width: "100%",
+				height: "100%",
+				objectFit: "contain",
+				display: "block"
+			}
+		})
+	});
+	return c ? /* @__PURE__ */ r(e, {
+		gap: "150",
+		blockAlign: "center",
+		wrap: !1,
+		children: [w, /* @__PURE__ */ n(t, {
+			as: "span",
+			variant: "bodySm",
+			children: g || a && d[a] || v || a
+		})]
+	}) : w;
+}
+//#endregion
+export { a as SELECT_CARD_BRANDS, h as SelectPaymentBrand, c as selectCardBrand, l as selectCardBrandLabel };
+
+//# sourceMappingURL=SelectPaymentBrand.js.map

package/dist/SelectPaymentCard.js

@@ -0,0 +1,53 @@
+/* empty css           */
+import { SelectPaymentBrand as e } from "./SelectPaymentBrand.js";
+import { forwardRef as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/SelectPaymentCard.tsx
+var i = t(function({ brand: t, lastDigits: i, caption: a, className: o, ...s }, c) {
+	let l = (i ?? "").replace(/\D/g, "").slice(-4);
+	return /* @__PURE__ */ r("div", {
+		ref: c,
+		...s,
+		className: `select-paycard${o ? " " + o : ""}`,
+		children: [
+			/* @__PURE__ */ r("div", {
+				className: "select-paycard__top",
+				children: [/* @__PURE__ */ n("span", {
+					className: "select-paycard__chip",
+					"aria-hidden": "true"
+				}), /* @__PURE__ */ n(e, {
+					method: "credit",
+					cardBrand: t,
+					size: 24
+				})]
+			}),
+			/* @__PURE__ */ r("div", {
+				className: "select-paycard__number",
+				"aria-label": l ? `Cartão com final ${l}` : "Cartão",
+				children: [
+					/* @__PURE__ */ n("span", {
+						"aria-hidden": "true",
+						children: "••••"
+					}),
+					/* @__PURE__ */ n("span", {
+						"aria-hidden": "true",
+						children: "••••"
+					}),
+					/* @__PURE__ */ n("span", {
+						"aria-hidden": "true",
+						children: "••••"
+					}),
+					/* @__PURE__ */ n("span", { children: l || "••••" })
+				]
+			}),
+			a != null && /* @__PURE__ */ n("div", {
+				className: "select-paycard__caption",
+				children: a
+			})
+		]
+	});
+});
+//#endregion
+export { i as SelectPaymentCard };
+
+//# sourceMappingURL=SelectPaymentCard.js.map

package/dist/SelectPhoneField.js

@@ -0,0 +1,139 @@
+import { ChevronDownIcon as e } from "./icons.js";
+import { CountryFlag as t } from "./internal/flags.js";
+import { cleanNationalPhone as n, formatNationalPhone as r, phonePlaceholder as i } from "./internal/phone.js";
+import { forwardRef as a, useId as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/SelectPhoneField.tsx
+var l = [
+	{
+		iso: "BR",
+		dial: "+55",
+		flag: "🇧🇷",
+		name: "Brasil"
+	},
+	{
+		iso: "US",
+		dial: "+1",
+		flag: "🇺🇸",
+		name: "Estados Unidos"
+	},
+	{
+		iso: "PT",
+		dial: "+351",
+		flag: "🇵🇹",
+		name: "Portugal"
+	},
+	{
+		iso: "AR",
+		dial: "+54",
+		flag: "🇦🇷",
+		name: "Argentina"
+	},
+	{
+		iso: "MX",
+		dial: "+52",
+		flag: "🇲🇽",
+		name: "México"
+	},
+	{
+		iso: "ES",
+		dial: "+34",
+		flag: "🇪🇸",
+		name: "Espanha"
+	},
+	{
+		iso: "GB",
+		dial: "+44",
+		flag: "🇬🇧",
+		name: "Reino Unido"
+	}
+];
+function u(e) {
+	var t;
+	return ((t = l.find((t) => t.iso === e)) == null ? void 0 : t.dial) ?? "";
+}
+var d = a(function({ label: a, value: d, onChange: f, labelAction: p, hint: m, error: h, onBlur: g, placeholder: _, className: v, ...y }, b) {
+	let x = o(), S = u(d.country), C = h ? `${x}-err` : m ? `${x}-hint` : void 0;
+	return /* @__PURE__ */ c("div", {
+		ref: b,
+		...y,
+		className: `select-field${v ? " " + v : ""}`,
+		children: [
+			/* @__PURE__ */ c("div", {
+				className: "select-field__labelrow",
+				children: [/* @__PURE__ */ s("label", {
+					className: "select-field__label",
+					htmlFor: x,
+					children: a
+				}), p]
+			}),
+			/* @__PURE__ */ c("div", {
+				className: `select-phone${h ? " select-phone--error" : ""}`,
+				children: [/* @__PURE__ */ c("div", {
+					className: "select-phone__country",
+					children: [
+						/* @__PURE__ */ c("span", {
+							className: "select-phone__dial",
+							children: [
+								/* @__PURE__ */ s(t, { iso: d.country }),
+								" ",
+								S
+							]
+						}),
+						/* @__PURE__ */ s("span", {
+							className: "select-select-caret",
+							"aria-hidden": "true",
+							children: /* @__PURE__ */ s(e, {})
+						}),
+						/* @__PURE__ */ s("select", {
+							className: "select-phone__select",
+							value: d.country,
+							onChange: (e) => f({
+								...d,
+								country: e.target.value
+							}),
+							"aria-label": "País",
+							children: l.map((e) => /* @__PURE__ */ c("option", {
+								value: e.iso,
+								children: [
+									e.name,
+									" (",
+									e.dial,
+									")"
+								]
+							}, e.iso))
+						})
+					]
+				}), /* @__PURE__ */ s("input", {
+					id: x,
+					className: "select-phone__number",
+					type: "tel",
+					inputMode: "tel",
+					autoComplete: "tel-national",
+					value: r(d.country, d.number),
+					placeholder: _ ?? i(d.country),
+					onChange: (e) => f({
+						...d,
+						number: n(d.country, e.target.value)
+					}),
+					onBlur: g,
+					"aria-invalid": h ? !0 : void 0,
+					"aria-describedby": C
+				})]
+			}),
+			h ? /* @__PURE__ */ s("p", {
+				id: `${x}-err`,
+				className: "select-field__error",
+				children: h
+			}) : m ? /* @__PURE__ */ s("p", {
+				id: `${x}-hint`,
+				className: "select-field__hint",
+				children: m
+			}) : null
+		]
+	});
+});
+//#endregion
+export { l as SELECT_COUNTRIES, d as SelectPhoneField, u as dialCodeOf };
+
+//# sourceMappingURL=SelectPhoneField.js.map

package/dist/SelectPips.js

@@ -0,0 +1,25 @@
+/* empty css           */
+import { forwardRef as e } from "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/SelectPips.tsx
+var r = e(function({ total: e, value: r, label: i, tone: a = "success", className: o, ...s }, c) {
+	let l = Math.max(0, Math.floor(e)), u = Math.max(0, Math.min(l, Math.floor(r))), d = i === void 0 ? `${u} de ${l}` : i;
+	return /* @__PURE__ */ n("span", {
+		ref: c,
+		...s,
+		className: `select-pips select-pips--${a}${o ? " " + o : ""}`,
+		children: [/* @__PURE__ */ t("span", {
+			className: "select-pips__dots",
+			role: "img",
+			"aria-label": `${u} de ${l}`,
+			children: Array.from({ length: l }, (e, n) => /* @__PURE__ */ t("span", { className: `select-pips__dot${n < u ? " is-on" : ""}` }, n))
+		}), d != null && /* @__PURE__ */ t("span", {
+			className: "select-pips__label",
+			children: d
+		})]
+	});
+});
+//#endregion
+export { r as SelectPips };
+
+//# sourceMappingURL=SelectPips.js.map

package/dist/SelectPlanCard.js

@@ -0,0 +1,64 @@
+import { CheckCircleIcon as e } from "./icons.js";
+import { forwardRef as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/SelectPlanCard.tsx
+var i = t(function({ name: t, price: i, priceSuffix: a, headerAction: o, summary: s, cta: c, featuresTitle: l, features: u, featured: d = !1, className: f, ...p }, m) {
+	return /* @__PURE__ */ r("div", {
+		ref: m,
+		...p,
+		className: `select-plan${d ? " select-plan--featured" : ""}${f ? " " + f : ""}`,
+		children: [/* @__PURE__ */ r("div", {
+			className: "select-plan__top",
+			children: [
+				/* @__PURE__ */ r("div", {
+					className: "select-plan__head",
+					children: [/* @__PURE__ */ n("h3", {
+						className: "select-plan__name",
+						children: t
+					}), o && /* @__PURE__ */ n("div", {
+						className: "select-plan__headeraction",
+						children: o
+					})]
+				}),
+				/* @__PURE__ */ r("div", {
+					className: "select-plan__price",
+					children: [/* @__PURE__ */ n("span", {
+						className: "select-plan__amount",
+						children: i
+					}), a && /* @__PURE__ */ n("span", {
+						className: "select-plan__suffix",
+						children: a
+					})]
+				}),
+				s && /* @__PURE__ */ n("div", {
+					className: "select-plan__summary",
+					children: s
+				}),
+				c && /* @__PURE__ */ n("div", {
+					className: "select-plan__cta",
+					children: c
+				})
+			]
+		}), u && u.length > 0 && /* @__PURE__ */ r("div", {
+			className: "select-plan__features",
+			children: [l && /* @__PURE__ */ n("p", {
+				className: "select-plan__featurestitle",
+				children: l
+			}), /* @__PURE__ */ n("ul", {
+				className: "select-plan__list",
+				children: u.map((t, i) => /* @__PURE__ */ r("li", {
+					className: "select-plan__feature",
+					children: [/* @__PURE__ */ n("span", {
+						className: "select-plan__check",
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ n(e, {})
+					}), /* @__PURE__ */ n("span", { children: t })]
+				}, i))
+			})]
+		})]
+	});
+});
+//#endregion
+export { i as SelectPlanCard };
+
+//# sourceMappingURL=SelectPlanCard.js.map

package/dist/SelectPolarArea.js

@@ -0,0 +1,82 @@
+/* empty css           */
+import { chartColor as e, donutSegment as t, formatCompact as n, niceMax as r } from "./chartUtils.js";
+import { ChartTooltip as i, useChartTooltip as a } from "./chartTip.js";
+import { forwardRef as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/SelectPolarArea.tsx
+var l = o(function({ segments: o, size: l = 200, format: u = n, legend: d = !0, rose: f = !1, className: p, ...m }, h) {
+	let g = a(), _ = l / 2, v = l / 2, y = l / 2 - 2, b = o.length || 1, x = r(Math.max(1, ...o.map((e) => e.value))), S = (e) => f ? Math.max(0, e) / x * y : Math.sqrt(Math.max(0, e) / x) * y, C = 360 / b;
+	return /* @__PURE__ */ c("div", {
+		ref: h,
+		...m,
+		className: `select-donut-wrap${p ? " " + p : ""}`,
+		children: [/* @__PURE__ */ c("div", {
+			className: "select-radial",
+			style: {
+				width: l,
+				aspectRatio: "1"
+			},
+			children: [/* @__PURE__ */ c("svg", {
+				width: l,
+				height: l,
+				viewBox: `0 0 ${l} ${l}`,
+				className: "select-chart",
+				"aria-hidden": "true",
+				children: [[
+					.34,
+					.67,
+					1
+				].map((e, t) => /* @__PURE__ */ s("circle", {
+					cx: _,
+					cy: v,
+					r: y * e,
+					className: "select-chart__grid",
+					fill: "none"
+				}, t)), o.map((n, r) => {
+					let i = r * C, a = (r + 1) * C - 1.5, o = n.color ?? e(r), c = Math.max(2, S(n.value)), l = ((i + a) / 2 - 90) * (Math.PI / 180), d = _ + c * Math.cos(l), f = v + c * Math.sin(l);
+					return /* @__PURE__ */ s("path", {
+						d: t(_, v, c, 0, i, a),
+						fill: o,
+						fillOpacity: .8,
+						className: "select-chart__seg",
+						onMouseEnter: () => g.show({
+							x: d,
+							y: f,
+							place: f < v ? "top" : "bottom",
+							title: n.label,
+							rows: [{
+								label: "Valor",
+								value: u(n.value),
+								color: o
+							}]
+						}),
+						onMouseLeave: g.hide
+					}, r);
+				})]
+			}), /* @__PURE__ */ s(i, { tip: g.tip })]
+		}), d && /* @__PURE__ */ s("ul", {
+			className: "select-donut__legend",
+			children: o.map((t, n) => /* @__PURE__ */ c("li", {
+				className: "select-donut__legitem",
+				children: [
+					/* @__PURE__ */ s("span", {
+						className: "select-donut__dot",
+						style: { background: t.color ?? e(n) }
+					}),
+					/* @__PURE__ */ s("span", {
+						className: "select-donut__leglabel",
+						children: t.label
+					}),
+					/* @__PURE__ */ s("span", {
+						className: "select-donut__legval",
+						children: u(t.value)
+					})
+				]
+			}, n))
+		})]
+	});
+});
+//#endregion
+export { l as SelectPolarArea };
+
+//# sourceMappingURL=SelectPolarArea.js.map