@selectwin/kit 0.1.197 → 0.1.199

package/dist/SelectDatePicker.js

@@ -0,0 +1,311 @@
+/* empty css           */
+import { SelectButton as e } from "./SelectButton.js";
+import { CheckIcon as t, ChevronLeftIcon as n, ChevronRightIcon as r } from "./icons.js";
+import { useSelectLocaleIfSet as i } from "./SelectLocale.js";
+import { forwardRef as a, useState as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/SelectDatePicker.tsx
+var l = (e) => String(e).padStart(2, "0"), u = {
+	"en-US": {
+		weekdays: [
+			"Su",
+			"Mo",
+			"Tu",
+			"We",
+			"Th",
+			"Fr",
+			"Sa"
+		],
+		months: [
+			"January",
+			"February",
+			"March",
+			"April",
+			"May",
+			"June",
+			"July",
+			"August",
+			"September",
+			"October",
+			"November",
+			"December"
+		],
+		from: "From",
+		to: "To",
+		cancel: "Cancel",
+		apply: "Apply",
+		formatDate: (e) => `${e.getMonth() + 1} / ${e.getDate()} / ${e.getFullYear()}`
+	},
+	"pt-BR": {
+		weekdays: [
+			"Dom",
+			"Seg",
+			"Ter",
+			"Qua",
+			"Qui",
+			"Sex",
+			"Sáb"
+		],
+		months: [
+			"Janeiro",
+			"Fevereiro",
+			"Março",
+			"Abril",
+			"Maio",
+			"Junho",
+			"Julho",
+			"Agosto",
+			"Setembro",
+			"Outubro",
+			"Novembro",
+			"Dezembro"
+		],
+		from: "De",
+		to: "Até",
+		cancel: "Cancelar",
+		apply: "Aplicar",
+		formatDate: (e) => `${l(e.getDate())} / ${l(e.getMonth() + 1)} / ${e.getFullYear()}`
+	}
+}, d = (e) => new Date(e.getFullYear(), e.getMonth(), e.getDate()), f = (e) => new Date(e.getFullYear(), e.getMonth(), 1), p = (e, t) => new Date(e.getFullYear(), e.getMonth(), e.getDate() + t), m = (e, t) => new Date(e.getFullYear(), e.getMonth() + t, 1), h = (e, t) => e.getFullYear() === t.getFullYear() && e.getMonth() === t.getMonth() && e.getDate() === t.getDate(), g = (e) => {
+	let t = /* @__PURE__ */ new Date();
+	return {
+		from: /* @__PURE__ */ new Date(t.getTime() - e * 6e4),
+		to: t
+	};
+}, _ = [
+	{
+		id: "15m",
+		label: "Last 15 minutes",
+		range: () => g(15)
+	},
+	{
+		id: "1h",
+		label: "Last 1 hour",
+		range: () => g(60)
+	},
+	{
+		id: "3h",
+		label: "Last 3 hours",
+		range: () => g(180)
+	},
+	{
+		id: "24h",
+		label: "Last 24 hours",
+		range: () => g(1440)
+	},
+	{
+		id: "3d",
+		label: "Last 3 days",
+		disabled: !0
+	},
+	{
+		id: "7d",
+		label: "Last 7 days",
+		disabled: !0
+	},
+	{
+		id: "all",
+		label: "All",
+		range: () => ({
+			from: d(/* @__PURE__ */ new Date()),
+			to: d(/* @__PURE__ */ new Date())
+		})
+	}
+], v = (e) => {
+	let t = d(/* @__PURE__ */ new Date());
+	return {
+		from: p(t, -e),
+		to: t
+	};
+}, y = (e) => {
+	let t = p(d(/* @__PURE__ */ new Date()), -e);
+	return {
+		from: t,
+		to: t
+	};
+}, b = [
+	{
+		id: "today",
+		label: "Hoje",
+		range: () => v(0)
+	},
+	{
+		id: "yesterday",
+		label: "Ontem",
+		range: () => y(1)
+	},
+	{
+		id: "7d",
+		label: "Últimos 7 dias",
+		range: () => v(6)
+	},
+	{
+		id: "10d",
+		label: "Últimos 10 dias",
+		range: () => v(9)
+	},
+	{
+		id: "15d",
+		label: "Últimos 15 dias",
+		range: () => v(14)
+	},
+	{
+		id: "20d",
+		label: "Últimos 20 dias",
+		range: () => v(19)
+	},
+	{
+		id: "30d",
+		label: "Últimos 30 dias",
+		range: () => v(29)
+	},
+	{
+		id: "90d",
+		label: "Últimos 90 dias",
+		range: () => v(89)
+	}
+];
+function x(e) {
+	if (!e) return "—";
+	let t = e.getHours(), n = t < 12 ? "AM" : "PM";
+	return t = t % 12 || 12, `${t} : ${String(e.getMinutes()).padStart(2, "0")} ${n}`;
+}
+var S = a(function({ value: a, presets: l = _, onApply: g, onCancel: v, accentVar: y, locale: b, showTime: S = !0, maxDate: C, embedded: w = !1, className: T, ...E }, D) {
+	let O = i(), k = b ?? (O === "pt-BR" ? "pt-BR" : "en-US"), A = u[k], j = d(/* @__PURE__ */ new Date()), M = C ? d(C) : null, [N, P] = o(a ?? {
+		from: j,
+		to: j
+	}), [F, I] = o(f((a == null ? void 0 : a.from) ?? /* @__PURE__ */ new Date())), [L, R] = o(null), z = p(f(F), -f(F).getDay()), B = Array.from({ length: 42 }, (e, t) => p(z, t)), V = (e) => M ? d(e) > M : !1, H = (e) => e ? A.formatDate(e) : /* @__PURE__ */ s("span", {
+		className: "select-datepicker__placeholder",
+		children: "— / — / ——"
+	}), U = (e) => {
+		V(e) || (R(null), P((t) => !t.from || t.from && t.to || e < d(t.from) ? {
+			from: e,
+			to: null
+		} : {
+			from: t.from,
+			to: e
+		}));
+	}, W = (e) => {
+		if (e.disabled || !e.range) return;
+		let t = e.range();
+		P(t), R(e.id), t.from && I(f(t.from));
+	}, G = y ? { "--select-dp-accent": `var(${y})` } : void 0;
+	return /* @__PURE__ */ s("div", {
+		ref: D,
+		...E,
+		className: `select select-datepicker${w ? " select-datepicker--bare" : ""}${T ? " " + T : ""}`,
+		style: G,
+		children: /* @__PURE__ */ c("div", {
+			className: "select-datepicker__body",
+			children: [/* @__PURE__ */ s("div", {
+				className: "select-datepicker__presets",
+				role: "listbox",
+				"aria-label": "Intervalos",
+				children: l.map((e) => {
+					let n = L === e.id;
+					return /* @__PURE__ */ c("button", {
+						type: "button",
+						role: "option",
+						"aria-selected": n,
+						disabled: e.disabled,
+						className: `select-datepicker__preset${n ? " is-active" : ""}`,
+						onClick: () => W(e),
+						children: [/* @__PURE__ */ s("span", {
+							className: "select-datepicker__preset-check",
+							children: n && /* @__PURE__ */ s(t, {})
+						}), e.label]
+					}, e.id);
+				})
+			}), /* @__PURE__ */ c("div", {
+				className: "select-datepicker__main",
+				children: [
+					/* @__PURE__ */ s("div", {
+						className: "select-datepicker__fields",
+						children: ["from", "to"].map((e) => /* @__PURE__ */ c("div", {
+							className: "select-datepicker__fieldrow",
+							children: [
+								/* @__PURE__ */ s("span", {
+									className: "select-datepicker__fieldlabel",
+									children: e === "from" ? A.from : A.to
+								}),
+								/* @__PURE__ */ s("span", {
+									className: "select-datepicker__pill select-datepicker__pill--date",
+									children: H(N[e])
+								}),
+								S && /* @__PURE__ */ s("span", {
+									className: "select-datepicker__pill select-datepicker__pill--time",
+									children: x(N[e])
+								})
+							]
+						}, e))
+					}),
+					/* @__PURE__ */ c("div", {
+						className: "select-datepicker__calhead",
+						children: [
+							/* @__PURE__ */ s("button", {
+								type: "button",
+								className: "select-datepicker__nav",
+								"aria-label": k === "pt-BR" ? "Mês anterior" : "Previous month",
+								onClick: () => I((e) => m(e, -1)),
+								children: /* @__PURE__ */ s(n, {})
+							}),
+							/* @__PURE__ */ c("span", {
+								className: "select-datepicker__monthlabel",
+								children: [
+									A.months[F.getMonth()],
+									" ",
+									F.getFullYear()
+								]
+							}),
+							/* @__PURE__ */ s("button", {
+								type: "button",
+								className: "select-datepicker__nav",
+								"aria-label": k === "pt-BR" ? "Próximo mês" : "Next month",
+								onClick: () => I((e) => m(e, 1)),
+								children: /* @__PURE__ */ s(r, {})
+							})
+						]
+					}),
+					/* @__PURE__ */ c("div", {
+						className: "select-datepicker__grid",
+						role: "grid",
+						children: [A.weekdays.map((e, t) => /* @__PURE__ */ s("div", {
+							className: "select-datepicker__weekday",
+							children: e
+						}, t)), B.map((e) => {
+							let t = e.getMonth() !== F.getMonth(), n = V(e), r = !!N.from && h(e, N.from), i = !!N.to && h(e, N.to), a = r || i, o = !!N.from && !!N.to && !h(N.from, N.to), c = "select-datepicker__day" + (N.from && N.to && e > d(N.from) && e < d(N.to) ? " select-datepicker__day--in-range" : "") + (o && r ? " select-datepicker__day--range-start" : "") + (o && i ? " select-datepicker__day--range-end" : ""), l = "select-datepicker__daybtn" + (a ? " is-selected" : "") + (h(e, j) && !a ? " is-today" : "") + (t ? " is-outside" : "");
+							return /* @__PURE__ */ s("div", {
+								className: c,
+								children: /* @__PURE__ */ s("button", {
+									type: "button",
+									className: l,
+									disabled: n,
+									onClick: () => U(e),
+									children: e.getDate()
+								})
+							}, e.getTime());
+						})]
+					}),
+					/* @__PURE__ */ c("div", {
+						className: "select-datepicker__footer",
+						children: [/* @__PURE__ */ s(e, {
+							variant: "secondary",
+							inline: !0,
+							onClick: v,
+							children: A.cancel
+						}), /* @__PURE__ */ s(e, {
+							variant: "primary",
+							inline: !0,
+							onClick: () => g == null ? void 0 : g(N),
+							children: A.apply
+						})]
+					})
+				]
+			})]
+		})
+	});
+});
+//#endregion
+export { b as SELECT_DAILY_PRESETS, _ as SELECT_DATE_PRESETS, S as SelectDatePicker };
+
+//# sourceMappingURL=SelectDatePicker.js.map

package/dist/SelectDateRangeField.js

@@ -0,0 +1,57 @@
+import { SelectButton as e } from "./SelectButton.js";
+import { CalendarIcon as t, ChevronDownIcon as n } from "./icons.js";
+import { SelectPopover as r } from "./SelectPopover.js";
+import { SELECT_DAILY_PRESETS as i, SelectDatePicker as a } from "./SelectDatePicker.js";
+import { useState as o } from "react";
+import { jsx as s } from "react/jsx-runtime";
+//#region src/SelectDateRangeField.tsx
+var c = (e) => new Date(e.getFullYear(), e.getMonth(), e.getDate()), l = (e, t) => e.getFullYear() === t.getFullYear() && e.getMonth() === t.getMonth() && e.getDate() === t.getDate(), u = (e) => `${String(e.getDate()).padStart(2, "0")}/${String(e.getMonth() + 1).padStart(2, "0")}/${e.getFullYear()}`;
+function d(e, t) {
+	for (let r of t) {
+		var n;
+		let t = (n = r.range) == null ? void 0 : n.call(r);
+		if (t != null && t.from && t != null && t.to && l(t.from, e.start) && l(t.to, e.end)) return r.label;
+	}
+	return l(e.start, e.end) ? u(e.start) : `${u(e.start)} – ${u(e.end)}`;
+}
+function f({ value: l, onChange: u, presets: f = i, maxDate: p, placement: m = "bottom-end", size: h = "md", disabled: g = !1, block: _ = !1 }) {
+	let [v, y] = o(!1), b = p === null ? null : p ?? c(/* @__PURE__ */ new Date());
+	return /* @__PURE__ */ s(r, {
+		active: v,
+		onClose: () => y(!1),
+		placement: m,
+		role: "dialog",
+		activator: /* @__PURE__ */ s(e, {
+			variant: "secondary",
+			size: h,
+			inline: !_,
+			disabled: g,
+			icon: /* @__PURE__ */ s(t, {}),
+			trailingIcon: /* @__PURE__ */ s(n, {}),
+			onClick: () => y((e) => !e),
+			children: d(l, f)
+		}),
+		children: /* @__PURE__ */ s(a, {
+			embedded: !0,
+			locale: "pt-BR",
+			showTime: !1,
+			presets: f,
+			maxDate: b,
+			value: {
+				from: l.start,
+				to: l.end
+			},
+			onCancel: () => y(!1),
+			onApply: (e) => {
+				e.from && u({
+					start: c(e.from),
+					end: c(e.to ?? e.from)
+				}), y(!1);
+			}
+		})
+	});
+}
+//#endregion
+export { f as SelectDateRangeField };
+
+//# sourceMappingURL=SelectDateRangeField.js.map

package/dist/SelectDetail.js

@@ -0,0 +1,49 @@
+/* empty css           */
+import { useSelectReveal as e } from "./internal/useSelectReveal.js";
+import { createContext as t, forwardRef as n, useContext as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/SelectDetail.tsx
+var o = t(!1);
+function s({ children: t, stacked: n = !1, compact: r = !1, loading: a = !1 }) {
+	let s = e({
+		selector: ".select-detail",
+		y: 8,
+		duration: .45,
+		stagger: .05,
+		scroll: !0
+	});
+	return /* @__PURE__ */ i(o.Provider, {
+		value: a,
+		children: /* @__PURE__ */ i("div", {
+			className: `select-detaillist${n ? " select-detaillist--stacked" : ""}${r ? " select-detaillist--compact" : ""}`,
+			ref: s,
+			children: t
+		})
+	});
+}
+var c = n(function({ label: e, children: t, action: n, align: s = "center", loading: c, className: l, ...u }, d) {
+	let f = r(o), p = c ?? f;
+	return /* @__PURE__ */ a("div", {
+		ref: d,
+		...u,
+		className: `select-detail select-detail--${s}${l ? " " + l : ""}`,
+		children: [
+			/* @__PURE__ */ i("div", {
+				className: "select-detail__label",
+				children: e
+			}),
+			/* @__PURE__ */ i("div", {
+				className: "select-detail__value",
+				children: p ? /* @__PURE__ */ i("span", { className: "select-skeleton select-detail__skel" }) : t
+			}),
+			n && /* @__PURE__ */ i("div", {
+				className: "select-detail__action",
+				children: n
+			})
+		]
+	});
+});
+//#endregion
+export { s as SelectDetailList, c as SelectDetailRow };
+
+//# sourceMappingURL=SelectDetail.js.map

package/dist/SelectDisclosureButton.js

@@ -0,0 +1,23 @@
+import { SelectButton as e } from "./SelectButton.js";
+import { ChevronDownIcon as t } from "./icons.js";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/SelectDisclosureButton.tsx
+function r({ open: r, onToggle: i, children: a, openLabel: o, disabled: s = !1, size: c = "sm", variant: l = "secondary" }) {
+	return /* @__PURE__ */ n(e, {
+		variant: l,
+		size: c,
+		inline: !0,
+		trailingIcon: /* @__PURE__ */ n("span", {
+			className: `select-disclosure-caret${r ? " is-open" : ""}`,
+			children: /* @__PURE__ */ n(t, {})
+		}),
+		disabled: s,
+		"aria-expanded": r,
+		onClick: i,
+		children: r ? o ?? a : a
+	});
+}
+//#endregion
+export { r as SelectDisclosureButton };
+
+//# sourceMappingURL=SelectDisclosureButton.js.map

package/dist/SelectDivider.js

@@ -0,0 +1,20 @@
+import { forwardRef as e } from "react";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/SelectDivider.tsx
+var n = e(function({ children: e, className: n, ...r }, i) {
+	return e == null ? /* @__PURE__ */ t("div", {
+		ref: i,
+		...r,
+		className: `select-divider select-divider--plain${n ? " " + n : ""}`,
+		role: "separator"
+	}) : /* @__PURE__ */ t("div", {
+		ref: i,
+		...r,
+		className: `select-divider${n ? " " + n : ""}`,
+		children: e
+	});
+});
+//#endregion
+export { n as SelectDivider };
+
+//# sourceMappingURL=SelectDivider.js.map

package/dist/SelectDnsRecords.js

@@ -0,0 +1,74 @@
+/* empty css           */
+import { useSelectMessages as e } from "./SelectLocale.js";
+import { SelectCopyableId as t } from "./SelectCopyableId.js";
+import { forwardRef as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/SelectDnsRecords.tsx
+var a = n(function({ records: n, labels: a, className: o, ...s }, c) {
+	let l = e().dns, u = (a == null ? void 0 : a.type) ?? l.type, d = (a == null ? void 0 : a.name) ?? l.name, f = (a == null ? void 0 : a.value) ?? l.value;
+	return /* @__PURE__ */ i("div", {
+		ref: c,
+		role: "table",
+		"aria-label": l.label,
+		...s,
+		className: `select-dnsrecs${o ? " " + o : ""}`,
+		children: [/* @__PURE__ */ i("div", {
+			className: "select-dnsrecs__head",
+			role: "row",
+			children: [
+				/* @__PURE__ */ r("span", {
+					role: "columnheader",
+					children: u
+				}),
+				/* @__PURE__ */ r("span", {
+					role: "columnheader",
+					children: d
+				}),
+				/* @__PURE__ */ r("span", {
+					role: "columnheader",
+					children: f
+				})
+			]
+		}), n.map((e, n) => /* @__PURE__ */ i("div", {
+			className: "select-dnsrecs__row",
+			role: "row",
+			children: [
+				/* @__PURE__ */ i("span", {
+					className: "select-dnsrecs__cell select-dnsrecs__cell--type",
+					role: "cell",
+					children: [/* @__PURE__ */ r("span", {
+						className: "select-dnsrecs__type",
+						children: e.type
+					}), e.tag != null && /* @__PURE__ */ r("span", {
+						className: "select-dnsrecs__tag",
+						children: e.tag
+					})]
+				}),
+				/* @__PURE__ */ r("span", {
+					className: "select-dnsrecs__cell",
+					role: "cell",
+					"data-label": d,
+					children: /* @__PURE__ */ r(t, {
+						value: e.name,
+						reveal: "always",
+						label: `Copiar o nome do ${e.type}`
+					})
+				}),
+				/* @__PURE__ */ r("span", {
+					className: "select-dnsrecs__cell",
+					role: "cell",
+					"data-label": f,
+					children: /* @__PURE__ */ r(t, {
+						value: e.value,
+						reveal: "always",
+						label: `Copiar o valor do ${e.type}`
+					})
+				})
+			]
+		}, `${e.type}-${e.name}-${n}`))]
+	});
+});
+//#endregion
+export { a as SelectDnsRecords };
+
+//# sourceMappingURL=SelectDnsRecords.js.map

package/dist/SelectDocumentField.js

@@ -0,0 +1,24 @@
+import { SelectField as e } from "./SelectField.js";
+import { cleanDocument as t, documentType as n, formatDocument as r } from "./internal/document.js";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/SelectDocumentField.tsx
+function a({ label: a = "CPF/CNPJ", value: o, onChange: s, hint: c, error: l, onBlur: u, required: d, name: f }) {
+	let p = n(o);
+	return /* @__PURE__ */ i(e, {
+		label: a,
+		value: r(o),
+		onChange: (e) => s(t(e)),
+		inputMode: "numeric",
+		autoComplete: "off",
+		maxLength: 18,
+		hint: l ? void 0 : c ?? (p || void 0),
+		error: l,
+		onBlur: u,
+		required: d,
+		name: f
+	});
+}
+//#endregion
+export { a as SelectDocumentField };
+
+//# sourceMappingURL=SelectDocumentField.js.map

package/dist/SelectDonut.js

@@ -0,0 +1,103 @@
+/* empty css           */
+import { chartColor as e, donutSegment as t, formatCompact as n, useMeasuredWidth as r } from "./chartUtils.js";
+import { ChartTooltip as i, useChartTooltip as a } from "./chartTip.js";
+import { forwardRef as o, useId as s, useRef as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/SelectDonut.tsx
+var d = o(function({ segments: o, size: d = 200, thickness: f = 26, format: p = n, centerLabel: m, legend: h = !0, gap: g = 2, pie: _ = !1, className: v, ...y }, b) {
+	let x = a(), S = s(), C = c(null), w = r(C, d), T = o.reduce((e, t) => e + t.value, 0) || 1, E = w / 2, D = w / 2, O = w / 2 - 2, k = _ ? 0 : O - f, A = 0;
+	return /* @__PURE__ */ u("div", {
+		ref: b,
+		...y,
+		className: `select-donut-wrap${v ? " " + v : ""}`,
+		children: [
+			/* @__PURE__ */ u("div", {
+				ref: C,
+				className: "select-donut-ring",
+				style: {
+					width: `${d / 16}rem`,
+					aspectRatio: "1"
+				},
+				children: [/* @__PURE__ */ u("svg", {
+					width: w,
+					height: w,
+					viewBox: `0 0 ${w} ${w}`,
+					className: "select-chart select-donut",
+					"aria-hidden": "true",
+					children: [/* @__PURE__ */ l("defs", { children: o.map((t, n) => {
+						let r = t.color ?? e(n);
+						return /* @__PURE__ */ u("linearGradient", {
+							id: `${S}-s${n}`,
+							gradientUnits: "userSpaceOnUse",
+							x1: "0",
+							y1: "0",
+							x2: "0",
+							y2: w,
+							children: [/* @__PURE__ */ l("stop", {
+								offset: "0%",
+								stopColor: r,
+								stopOpacity: 1
+							}), /* @__PURE__ */ l("stop", {
+								offset: "100%",
+								stopColor: r,
+								stopOpacity: .6
+							})]
+						}, n);
+					}) }), o.map((n, r) => {
+						let i = A / T * 360;
+						A += n.value;
+						let a = A / T * 360, o = n.color ?? e(r), s = a - i > g * 1.5 ? g / 2 : 0, c = i + s, u = Math.max(c + .01, a - s);
+						return /* @__PURE__ */ l("path", {
+							d: t(E, D, O, k, c, u),
+							fill: `url(#${S}-s${r})`,
+							className: "select-chart__seg",
+							onMouseEnter: () => {
+								let e = ((i + a) / 2 - 90) * Math.PI / 180, t = E + (O + 6) * Math.cos(e), r = D + (O + 6) * Math.sin(e);
+								x.show({
+									x: t,
+									y: r,
+									place: r <= D ? "top" : "bottom",
+									title: n.label,
+									rows: [{
+										label: "Valor",
+										value: p(n.value),
+										color: o
+									}]
+								});
+							},
+							onMouseLeave: x.hide
+						}, r);
+					})]
+				}), m != null && /* @__PURE__ */ l("div", {
+					className: "select-donut__center",
+					children: m
+				})]
+			}),
+			h && /* @__PURE__ */ l("ul", {
+				className: "select-donut__legend",
+				children: o.map((t, n) => /* @__PURE__ */ u("li", {
+					className: "select-donut__legitem",
+					children: [
+						/* @__PURE__ */ l("span", {
+							className: "select-donut__dot",
+							style: { background: t.color ?? e(n) }
+						}),
+						/* @__PURE__ */ l("span", {
+							className: "select-donut__leglabel",
+							children: t.label
+						}),
+						/* @__PURE__ */ l("span", {
+							className: "select-donut__legval",
+							children: p(t.value)
+						})
+					]
+				}, n))
+			}),
+			/* @__PURE__ */ l(i, { tip: x.tip })
+		]
+	});
+});
+//#endregion
+export { d as SelectDonut };
+
+//# sourceMappingURL=SelectDonut.js.map