@selectwin/kit 0.1.219 → 0.1.220

package/dist/SelectCarousel.d.ts

@@ -0,0 +1,22 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+export interface SelectCarouselSlide {
+    key: string;
+    /** O título do slide ("Entrega no período"): o cabeçalho dele e o nome do ponto que leva até ele. */
+    title: string;
+    /** A análise em uma frase. */
+    text: ReactNode;
+    /** Para onde a seta leva: um endereço do app (o `<Link>` do roteador). */
+    to?: string;
+    /** Ou um endereço de fora. */
+    href?: string;
+}
+type SelectCarouselOwnProps = {
+    slides: readonly SelectCarouselSlide[];
+    /** O nome do carrossel ("Análises do período"); padrão: "Destaques". */
+    label?: string;
+    /** De quanto em quanto tempo passa sozinho, em ms (padrão 7000). */
+    interval?: number;
+};
+export type SelectCarouselProps = SelectCarouselOwnProps & Omit<ComponentPropsWithoutRef<'section'>, keyof SelectCarouselOwnProps>;
+export declare function SelectCarousel({ slides, label, interval, className, ...rest }: SelectCarouselProps): import("react").JSX.Element | null;
+export {};

package/dist/SelectCarousel.js

@@ -0,0 +1,133 @@
+/* empty css           */
+import { safeHref as e } from "./internal/safeHref.js";
+import { ArrowUpRightIcon as t, ChevronLeftIcon as n, ChevronRightIcon as r, PauseIcon as i, PlayIcon as a } from "./icons.js";
+import { formatSelectNumber as o, useSelectLocale as s, useSelectMessages as c } from "./SelectLocale.js";
+import { useEffect as l, useRef as u, useState as d } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { Link as m } from "react-router-dom";
+//#region src/SelectCarousel.tsx
+var h = () => typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+function g({ slides: g, label: _, interval: v = 7e3, className: y, ...b }) {
+	let x = c().carousel, S = s(), C = g.length, [w, T] = d(0), [E, D] = d(!1), [O, k] = d(() => !h()), [A, j] = d(!1), M = u(null), N = Math.min(w, Math.max(0, C - 1)), P = O && !A && C > 1;
+	l(() => {
+		if (!P) return;
+		let e = window.setTimeout(() => {
+			D(!1), T((e) => (e + 1) % C);
+		}, v);
+		return () => window.clearTimeout(e);
+	}, [
+		P,
+		C,
+		w,
+		v
+	]);
+	let F = (e) => {
+		D(e < N), T((e % C + C) % C);
+	}, I = g[N];
+	if (!I) return null;
+	let L = e(I.to ?? I.href), R = L === void 0 ? null : I.to == null ? /* @__PURE__ */ f("a", {
+		href: L,
+		className: "select-carousel__go",
+		"aria-label": x.open(I.title),
+		children: /* @__PURE__ */ f(t, {})
+	}) : /* @__PURE__ */ f(m, {
+		to: L,
+		className: "select-carousel__go",
+		"aria-label": x.open(I.title),
+		children: /* @__PURE__ */ f(t, {})
+	});
+	return /* @__PURE__ */ p("section", {
+		...b,
+		className: `select-carousel${y ? " " + y : ""}`,
+		"aria-roledescription": x.carousel,
+		"aria-label": _ ?? x.label,
+		onMouseEnter: () => j(!0),
+		onMouseLeave: () => j(!1),
+		onFocus: () => j(!0),
+		onBlur: (e) => {
+			e.currentTarget.contains(e.relatedTarget) || j(!1);
+		},
+		onKeyDown: (e) => {
+			C < 2 || e.key !== "ArrowRight" && e.key !== "ArrowLeft" || (e.preventDefault(), F(N + (e.key === "ArrowRight" ? 1 : -1)));
+		},
+		onPointerDown: (e) => {
+			e.pointerType !== "mouse" && (M.current = e.clientX);
+		},
+		onPointerUp: (e) => {
+			if (M.current === null) return;
+			let t = e.clientX - M.current;
+			M.current = null, C > 1 && Math.abs(t) > 40 && F(N + (t < 0 ? 1 : -1));
+		},
+		children: [
+			/* @__PURE__ */ f("span", {
+				className: "select-carousel__layer",
+				"aria-hidden": "true"
+			}),
+			/* @__PURE__ */ f("span", {
+				className: "select-carousel__layer select-carousel__layer--2",
+				"aria-hidden": "true"
+			}),
+			/* @__PURE__ */ p("div", {
+				className: "select-carousel__card",
+				children: [/* @__PURE__ */ f("div", {
+					className: "select-carousel__slides",
+					"aria-live": P ? "off" : "polite",
+					children: /* @__PURE__ */ p("div", {
+						className: `select-carousel__slide${E ? " is-back" : ""}`,
+						role: "group",
+						"aria-roledescription": x.slide,
+						"aria-label": x.position(o(N + 1, S), o(C, S)),
+						children: [/* @__PURE__ */ p("span", {
+							className: "select-carousel__head",
+							children: [/* @__PURE__ */ f("span", { children: I.title }), R]
+						}), /* @__PURE__ */ f("span", {
+							className: "select-carousel__text",
+							children: I.text
+						})]
+					}, I.key)
+				}), C > 1 && /* @__PURE__ */ p("div", {
+					className: "select-carousel__nav",
+					children: [/* @__PURE__ */ f("span", {
+						className: "select-carousel__dots",
+						children: g.map((e, t) => /* @__PURE__ */ f("button", {
+							type: "button",
+							className: "select-carousel__dot",
+							"aria-label": `${o(t + 1, S)}: ${e.title}`,
+							"aria-current": t === N ? "true" : void 0,
+							onClick: () => F(t)
+						}, e.key))
+					}), /* @__PURE__ */ p("span", {
+						className: "select-carousel__ctrl",
+						children: [
+							/* @__PURE__ */ f("button", {
+								type: "button",
+								className: "select-carousel__btn",
+								"aria-label": x.previous,
+								onClick: () => F(N - 1),
+								children: /* @__PURE__ */ f(n, {})
+							}),
+							/* @__PURE__ */ f("button", {
+								type: "button",
+								className: "select-carousel__btn",
+								"aria-label": O ? x.pause : x.play,
+								onClick: () => k((e) => !e),
+								children: f(O ? i : a, {})
+							}),
+							/* @__PURE__ */ f("button", {
+								type: "button",
+								className: "select-carousel__btn",
+								"aria-label": x.next,
+								onClick: () => F(N + 1),
+								children: /* @__PURE__ */ f(r, {})
+							})
+						]
+					})]
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { g as SelectCarousel };
+
+//# sourceMappingURL=SelectCarousel.js.map

package/dist/SelectLocale.d.ts

@@ -84,6 +84,18 @@ export interface SelectKitMessages {
     sideNav: {
         pending: (hint: string) => string;
     };
+    /** 0.1.220: o SelectCarousel — o nome, o papel, a posição e os botões. */
+    carousel: {
+        label: string;
+        carousel: string;
+        slide: string;
+        position: (at: string, count: string) => string;
+        previous: string;
+        next: string;
+        pause: string;
+        play: string;
+        open: (title: string) => string;
+    };
     /** 0.1.201: o SelectFeeBreakdown — os rótulos de sempre e a legenda da barra. */
     fees: {
         gross: string;

package/dist/SelectLocale.js

@@ -87,6 +87,17 @@ var r = {
 			progress: (e, t) => `${e} de ${t}`
 		},
 		sideNav: { pending: (e) => `${e} (com pendências)` },
+		carousel: {
+			label: "Destaques",
+			carousel: "carrossel",
+			slide: "slide",
+			position: (e, t) => `${e} de ${t}`,
+			previous: "Anterior",
+			next: "Próximo",
+			pause: "Parar de passar sozinho",
+			play: "Passar sozinho",
+			open: (e) => `Ver: ${e}`
+		},
 		fees: {
 			gross: "Valor bruto",
 			net: "Valor líquido",
@@ -180,6 +191,17 @@ var r = {
 			progress: (e, t) => `${e} of ${t}`
 		},
 		sideNav: { pending: (e) => `${e} (pending)` },
+		carousel: {
+			label: "Highlights",
+			carousel: "carousel",
+			slide: "slide",
+			position: (e, t) => `${e} of ${t}`,
+			previous: "Previous",
+			next: "Next",
+			pause: "Stop rotating",
+			play: "Rotate automatically",
+			open: (e) => `Open: ${e}`
+		},
 		fees: {
 			gross: "Gross amount",
 			net: "Net amount",

package/dist/SelectSetupGuide.d.ts

@@ -9,6 +9,12 @@ export interface SelectSetupStep {
     trailing?: ReactNode;
     /** A linha inteira vira botão e leva até a etapa (0.1.163). */
     onSelect?: () => void;
+    /**
+     * 0.1.220: a linha inteira é um LINK de verdade até a etapa — `to` é um endereço do app (o `<Link>` do roteador) e
+     * `href`, um de fora. Abre em outra aba, copia o endereço e o leitor de tela diz "link" (o `onSelect` é um botão).
+     */
+    to?: string;
+    href?: string;
 }
 export interface SelectSetupGroup {
     title: ReactNode;

package/dist/SelectSetupGuide.js

@@ -1,20 +1,22 @@
 /* empty css           */
-import { formatSelectNumber as e, useSelectLocale as t, useSelectMessages as n } from "./SelectLocale.js";
-import { useInsideFrame as r } from "./internal/frame.js";
-import { inertProps as i } from "./internal/inert.js";
-import { forwardRef as a, useEffect as o, useRef as s, useState as c } from "react";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { safeHref as e } from "./internal/safeHref.js";
+import { formatSelectNumber as t, useSelectLocale as n, useSelectMessages as r } from "./SelectLocale.js";
+import { useInsideFrame as i } from "./internal/frame.js";
+import { inertProps as a } from "./internal/inert.js";
+import { forwardRef as o, useEffect as s, useRef as c, useState as l } from "react";
+import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
+import { Link as p } from "react-router-dom";
 //#region src/SelectSetupGuide.tsx
-function d({ status: e }) {
-	return /* @__PURE__ */ l("span", {
+function m({ status: e }) {
+	return /* @__PURE__ */ d("span", {
 		className: `select-setupguide__icon select-setupguide__icon--${e}`,
 		"aria-hidden": "true",
-		children: e === "done" && /* @__PURE__ */ l("svg", {
+		children: e === "done" && /* @__PURE__ */ d("svg", {
 			viewBox: "0 0 16 16",
 			width: "10",
 			height: "10",
 			fill: "none",
-			children: /* @__PURE__ */ l("path", {
+			children: /* @__PURE__ */ d("path", {
 				d: "M3.5 8.5l3 3 6-7",
 				stroke: "currentColor",
 				strokeWidth: "2",
@@ -24,7 +26,7 @@ function d({ status: e }) {
 		})
 	});
 }
-var f = /* @__PURE__ */ l("svg", {
+var h = /* @__PURE__ */ d("svg", {
 	viewBox: "0 0 20 20",
 	width: "16",
 	height: "16",
@@ -34,120 +36,134 @@ var f = /* @__PURE__ */ l("svg", {
 	strokeLinecap: "round",
 	strokeLinejoin: "round",
 	"aria-hidden": "true",
-	children: /* @__PURE__ */ l("path", { d: "M8 5l5 5-5 5" })
+	children: /* @__PURE__ */ d("path", { d: "M8 5l5 5-5 5" })
 });
-function p({ group: e, justDone: t }) {
-	let r = n().setupGuide, [a, o] = c(!!(e.collapsible && e.defaultCollapsed)), s = !e.collapsible || !a;
-	return /* @__PURE__ */ u("div", {
-		className: `select-setupguide__group${s ? "" : " is-collapsed"}`,
-		children: [e.collapsible ? /* @__PURE__ */ u("button", {
+function g({ group: t, justDone: n }) {
+	let i = r().setupGuide, [o, s] = l(!!(t.collapsible && t.defaultCollapsed)), c = !t.collapsible || !o;
+	return /* @__PURE__ */ f("div", {
+		className: `select-setupguide__group${c ? "" : " is-collapsed"}`,
+		children: [t.collapsible ? /* @__PURE__ */ f("button", {
 			type: "button",
 			className: "select-setupguide__grouptitle select-setupguide__grouptoggle",
-			"aria-expanded": s,
-			onClick: () => o((e) => !e),
-			children: [/* @__PURE__ */ l("span", { children: e.title }), f]
-		}) : /* @__PURE__ */ l("div", {
+			"aria-expanded": c,
+			onClick: () => s((e) => !e),
+			children: [/* @__PURE__ */ d("span", { children: t.title }), h]
+		}) : /* @__PURE__ */ d("div", {
 			className: "select-setupguide__grouptitle",
-			children: e.title
-		}), /* @__PURE__ */ l("div", {
+			children: t.title
+		}), /* @__PURE__ */ d("div", {
 			className: "select-setupguide__collapse",
-			...i(!s),
-			children: /* @__PURE__ */ l("ul", {
+			...a(!c),
+			children: /* @__PURE__ */ d("ul", {
 				className: "select-setupguide__list",
-				children: e.steps.map((e) => /* @__PURE__ */ u("li", {
-					className: `select-setupguide__step is-${e.status}${e.onSelect ? " is-link" : ""}${t.has(e.id) ? " is-just-done" : ""}`,
-					children: [
-						/* @__PURE__ */ l(d, { status: e.status }),
-						/* @__PURE__ */ u("span", {
-							className: "select-setupguide__text",
-							children: [e.onSelect ? /* @__PURE__ */ u("button", {
-								type: "button",
-								className: "select-setupguide__steptitle select-setupguide__go",
-								onClick: e.onSelect,
-								children: [e.title, /* @__PURE__ */ u("span", {
-									className: "select-setupguide__sr",
-									children: [" — ", r[e.status]]
+				children: t.steps.map((t) => {
+					let r = t.to != null || t.href != null ? e(t.to ?? t.href) : void 0, a = r !== void 0, o = /* @__PURE__ */ f(u, { children: [t.title, /* @__PURE__ */ f("span", {
+						className: "select-setupguide__sr",
+						children: [" — ", i[t.status]]
+					})] });
+					return /* @__PURE__ */ f("li", {
+						className: `select-setupguide__step is-${t.status}${t.onSelect || a ? " is-link" : ""}${n.has(t.id) ? " is-just-done" : ""}`,
+						children: [
+							/* @__PURE__ */ d(m, { status: t.status }),
+							/* @__PURE__ */ f("span", {
+								className: "select-setupguide__text",
+								children: [a && t.to != null ? /* @__PURE__ */ d(p, {
+									to: r,
+									className: "select-setupguide__steptitle select-setupguide__go",
+									children: o
+								}) : a ? /* @__PURE__ */ d("a", {
+									href: r,
+									className: "select-setupguide__steptitle select-setupguide__go",
+									children: o
+								}) : t.onSelect ? /* @__PURE__ */ f("button", {
+									type: "button",
+									className: "select-setupguide__steptitle select-setupguide__go",
+									onClick: t.onSelect,
+									children: [t.title, /* @__PURE__ */ f("span", {
+										className: "select-setupguide__sr",
+										children: [" — ", i[t.status]]
+									})]
+								}) : /* @__PURE__ */ f("span", {
+									className: "select-setupguide__steptitle",
+									children: [t.title, /* @__PURE__ */ f("span", {
+										className: "select-setupguide__sr",
+										children: [" — ", i[t.status]]
+									})]
+								}), t.description && /* @__PURE__ */ d("span", {
+									className: "select-setupguide__stepdesc",
+									children: t.description
 								})]
-							}) : /* @__PURE__ */ u("span", {
-								className: "select-setupguide__steptitle",
-								children: [e.title, /* @__PURE__ */ u("span", {
-									className: "select-setupguide__sr",
-									children: [" — ", r[e.status]]
-								})]
-							}), e.description && /* @__PURE__ */ l("span", {
-								className: "select-setupguide__stepdesc",
-								children: e.description
-							})]
-						}),
-						e.trailing ? /* @__PURE__ */ l("span", {
-							className: "select-setupguide__trailing",
-							children: e.trailing
-						}) : e.onSelect && e.status !== "done" ? /* @__PURE__ */ l("span", {
-							className: "select-setupguide__chevron",
-							children: f
-						}) : null
-					]
-				}, e.id))
+							}),
+							t.trailing ? /* @__PURE__ */ d("span", {
+								className: "select-setupguide__trailing",
+								children: t.trailing
+							}) : (t.onSelect || a) && t.status !== "done" ? /* @__PURE__ */ d("span", {
+								className: "select-setupguide__chevron",
+								children: h
+							}) : null
+						]
+					}, t.id);
+				})
 			})
 		})]
 	});
 }
-var m = a(function({ title: a, description: c, progress: d, actions: f, next: m, groups: h, minimized: g = !1, tone: _ = "default", className: v, ...y }, b) {
-	let x = n().setupGuide, S = t(), C = d && d.total > 0 ? Math.round(d.done / d.total * 100) : 0, w = r(), T = s(null), E = /* @__PURE__ */ new Set(), D = h.flatMap((e) => e.steps);
+var _ = o(function({ title: e, description: o, progress: l, actions: u, next: p, groups: m, minimized: h = !1, tone: _ = "default", className: v, ...y }, b) {
+	let x = r().setupGuide, S = n(), C = l && l.total > 0 ? Math.round(l.done / l.total * 100) : 0, w = i(), T = c(null), E = /* @__PURE__ */ new Set(), D = m.flatMap((e) => e.steps);
 	if (T.current) for (let e of D) e.status === "done" && T.current.get(e.id) !== "done" && E.add(e.id);
-	return o(() => {
+	return s(() => {
 		T.current = new Map(D.map((e) => [e.id, e.status]));
-	}), /* @__PURE__ */ u("section", {
+	}), /* @__PURE__ */ f("section", {
 		ref: b,
 		...y,
-		className: `select-setupguide${w ? " select-setupguide--nested" : ""}${g ? " is-minimized" : ""}${_ === "sandbox" ? " select-setupguide--sandbox" : ""}${v ? " " + v : ""}`,
-		children: [/* @__PURE__ */ u("div", {
+		className: `select-setupguide${w ? " select-setupguide--nested" : ""}${h ? " is-minimized" : ""}${_ === "sandbox" ? " select-setupguide--sandbox" : ""}${v ? " " + v : ""}`,
+		children: [/* @__PURE__ */ f("div", {
 			className: "select-setupguide__head",
 			children: [
-				/* @__PURE__ */ u("div", {
+				/* @__PURE__ */ f("div", {
 					className: "select-setupguide__heading",
-					children: [/* @__PURE__ */ l("h2", {
+					children: [/* @__PURE__ */ d("h2", {
 						className: "select-setupguide__title",
-						children: a
-					}), c && /* @__PURE__ */ l("p", {
+						children: e
+					}), o && /* @__PURE__ */ d("p", {
 						className: "select-setupguide__desc",
-						children: c
+						children: o
 					})]
 				}),
-				d && /* @__PURE__ */ u("div", {
+				l && /* @__PURE__ */ f("div", {
 					className: "select-setupguide__progress",
-					children: [/* @__PURE__ */ l("div", {
+					children: [/* @__PURE__ */ d("div", {
 						className: "select-setupguide__bar",
 						role: "progressbar",
 						"aria-valuemin": 0,
-						"aria-valuemax": d.total,
-						"aria-valuenow": d.done,
+						"aria-valuemax": l.total,
+						"aria-valuenow": l.done,
 						"aria-label": x.progressLabel,
-						children: /* @__PURE__ */ l("span", {
+						children: /* @__PURE__ */ d("span", {
 							className: "select-setupguide__fill",
 							style: { width: `${Math.max(C, 3)}%` }
 						})
-					}), /* @__PURE__ */ l("span", {
+					}), /* @__PURE__ */ d("span", {
 						className: "select-setupguide__count",
-						children: d.label ?? x.progress(e(d.done, S), e(d.total, S))
+						children: l.label ?? x.progress(t(l.done, S), t(l.total, S))
 					})]
 				}),
-				f && /* @__PURE__ */ l("div", {
+				u && /* @__PURE__ */ d("div", {
 					className: "select-setupguide__actions",
-					children: f
+					children: u
 				})
 			]
-		}), /* @__PURE__ */ l("div", {
+		}), /* @__PURE__ */ d("div", {
 			className: "select-setupguide__fold",
-			...i(g),
-			children: /* @__PURE__ */ u("div", {
+			...a(h),
+			children: /* @__PURE__ */ f("div", {
 				className: "select-setupguide__body",
-				children: [m && /* @__PURE__ */ l("div", {
+				children: [p && /* @__PURE__ */ d("div", {
 					className: "select-setupguide__next",
-					children: m
-				}), /* @__PURE__ */ l("div", {
+					children: p
+				}), /* @__PURE__ */ d("div", {
 					className: "select-setupguide__steps",
-					children: h.map((e, t) => /* @__PURE__ */ l(p, {
+					children: m.map((e, t) => /* @__PURE__ */ d(g, {
 						group: e,
 						justDone: E
 					}, t))
@@ -156,32 +172,32 @@ var m = a(function({ title: a, description: c, progress: d, actions: f, next: m,
 		})]
 	});
 });
-function h({ eyebrow: e, title: t, children: n, actions: r }) {
-	return /* @__PURE__ */ u("div", {
+function v({ eyebrow: e, title: t, children: n, actions: r }) {
+	return /* @__PURE__ */ f("div", {
 		className: "select-setupnext",
-		children: [/* @__PURE__ */ u("div", {
+		children: [/* @__PURE__ */ f("div", {
 			className: "select-setupnext__text",
 			children: [
-				e && /* @__PURE__ */ l("div", {
+				e && /* @__PURE__ */ d("div", {
 					className: "select-setupnext__eyebrow",
 					children: e
 				}),
-				/* @__PURE__ */ l("h3", {
+				/* @__PURE__ */ d("h3", {
 					className: "select-setupnext__title",
 					children: t
 				}),
-				n && /* @__PURE__ */ l("div", {
+				n && /* @__PURE__ */ d("div", {
 					className: "select-setupnext__body",
 					children: n
 				})
 			]
-		}), r && /* @__PURE__ */ l("div", {
+		}), r && /* @__PURE__ */ d("div", {
 			className: "select-setupnext__actions",
 			children: r
 		})]
 	});
 }
 //#endregion
-export { m as SelectSetupGuide, h as SelectSetupNext };
+export { _ as SelectSetupGuide, v as SelectSetupNext };
 
 //# sourceMappingURL=SelectSetupGuide.js.map

package/dist/icons.d.ts

@@ -154,6 +154,8 @@ export declare function UsersIcon(): import("react").JSX.Element;
 /** Três círculos sobrepostos (Iconsax colorfilter) — cor, identidade visual. */
 export declare function PaletteIcon(): import("react").JSX.Element;
 /** Duas barras (Iconsax pause) — pausar uma cobrança recorrente. */
+/** Tocar (0.1.220): o triângulo, o par do `PauseIcon` (o botão de passar sozinho do SelectCarousel). */
+export declare function PlayIcon(): import("react").JSX.Element;
 export declare function PauseIcon(): import("react").JSX.Element;
 /** Seta voltando em volta (Iconsax arrow-rotate-left) — o ESTORNO: o dinheiro que volta. Não é o
  *  `RefreshIcon` (recarregar), que desenha o mesmo gesto para "de novo". */