@selectwin/kit 0.1.194 → 0.1.196

package/README.md

@@ -28,13 +28,18 @@ import { SelectLocaleProvider } from '@selectwin/kit';
 
 A prop de texto do componente (`confirmLabel`, `noun`…) sempre ganha do dicionário.
 
-Tom corporativo (0.1.188; arredondado suave no botão desde a 0.1.192 e em tudo desde a 0.1.193): campo e botão com
-0.75rem (`--select-radius`, `--select-radius-button`), card 1rem, caixa de dentro e menu 0.625rem, item de menu 0.5rem
-(`--select-radius-sm`); pílula só em selo. Rótulos de KPI
+Tom corporativo (0.1.188; arredondado suave no botão desde a 0.1.192, em tudo desde a 0.1.193 e bem suave desde a
+0.1.195): campo e botão com 1rem (`--select-radius`, `--select-radius-button`), card 1.5rem, caixa de dentro e menu
+1rem, item de menu 0.75rem (`--select-radius-sm`); pílula só em selo. Rótulos de KPI
 e cabeçalho de tabela em caixa-alta espaçada. Nos gráficos, cor é situação: verde `--select-chart-paid` = pago, dourado
 `--select-chart-pending` (+ `-edge`) = pendente, `--select-chart-compare` = o período anterior, e os cinzas
 `--select-chart-ramp-1..4` para categoria. O app que quer o visual antigo sobrescreve esses tokens.
 
+O card mostra o dado; a explicação vai no tooltip (0.1.196). O "i" `help` está no `SelectSection`, no
+`SelectDataTable`, no `SelectChartCard`, no `SelectKpiCard`, no `SelectListCard`, em cada número do `SelectMiniStats` e
+em cada balde do `SelectBalanceCard`. Na `SelectShareBar`, cada faixa tem o seu tooltip, e a nota da parte vai em
+`tip`; o que o clique faz vai em `selectHint`/`clearHint`, no lugar da linha `hint`.
+
 Peer deps: **react**, **react-dom** (obrigatórios); **gsap** (opcional — só componentes animados),
 **react-router-dom** (opcional). Tematização = sobrescrever os tokens CSS `--select-*` / `--sw-*`.
 

package/dist/SelectBalanceCard.d.ts

@@ -4,8 +4,10 @@ export interface SelectBalanceBucket {
     cents: number | string | null | undefined;
     /** Optional icon embedded in the bucket's mini-card. */
     icon?: ReactNode;
-    /** One line of context under the amount (hero tiles only) — "Entra no disponível nos próximos dias". */
+    /** One line of context under the amount (hero tiles only) — a DADO ("Nada retido agora"), não a definição. */
     hint?: ReactNode;
+    /** O "i" ao lado do rótulo (0.1.196): o que o balde é ("Vira disponível no prazo de cada venda"). */
+    help?: ReactNode;
 }
 /** One context number on the hero's strip ("Entra nos próximos 7 dias", "Último saque · 23/09"). */
 export interface SelectBalanceMeta {

package/dist/SelectListCard.d.ts

@@ -1,6 +1,11 @@
 import { ReactNode, ComponentPropsWithoutRef } from 'react';
 type SelectListCardOwnProps = {
     title?: ReactNode;
+    /**
+     * O "i" ao lado do título (0.1.196), como o do `SelectSection`: a explicação do card mora aqui, não numa linha do
+     * corpo nem na descrição (dono, 03/11/2026 — o card mostra o dado).
+     */
+    help?: ReactNode;
     description?: ReactNode;
     /** Right-aligned action in the header (e.g. an "Add" button). */
     headerAction?: ReactNode;

package/dist/SelectMiniStats.d.ts

@@ -3,8 +3,10 @@ export interface SelectMiniStat {
     key?: string;
     label: ReactNode;
     value: ReactNode;
-    /** Linha de apoio sob o número ("398 de 1.284", "mediana entre compras"). */
+    /** Linha de apoio sob o número — DADO ("398 de 1.284"). A definição do número vai em `help`. */
     hint?: ReactNode;
+    /** O "i" ao lado do rótulo (0.1.196): como o número é contado ("mediana entre compras"). Não vira linha no card. */
+    help?: ReactNode;
 }
 type SelectMiniStatsOwnProps = {
     items: SelectMiniStat[];

package/dist/SelectShareBar.d.ts

@@ -10,6 +10,8 @@ export interface SelectShareItem {
     valueText?: ReactNode;
     /** Na legenda em fichas: o número em negrito ao lado do rótulo (a contagem). */
     count?: ReactNode;
+    /** A nota da parte, no tooltip da faixa e da ficha (0.1.196): "Inclui 203 Pix vencidos…". Nunca uma linha no card. */
+    tip?: ReactNode;
 }
 type SelectShareBarOwnProps = {
     items: SelectShareItem[];
@@ -23,9 +25,13 @@ type SelectShareBarOwnProps = {
     onSelect?: (key: string) => void;
     /** A parte escolhida (as outras esmaecem). */
     selected?: string | null;
-    /** Linha discreta sob a legenda. */
+    /** Linha discreta sob a legenda. Prefira o tooltip: a explicação vai no `tip` da parte e o clique em `selectHint`. */
     hint?: ReactNode;
+    /** Com `onSelect`, a última linha do tooltip de cada faixa e ficha (0.1.196). Padrão: "Clique para filtrar." */
+    selectHint?: ReactNode;
+    /** A mesma linha na parte escolhida. Padrão: "Clique de novo para ver todas." */
+    clearHint?: ReactNode;
 };
 export type SelectShareBarProps = SelectShareBarOwnProps & Omit<ComponentPropsWithoutRef<'div'>, keyof SelectShareBarOwnProps>;
-export declare function SelectShareBar({ items, label, aside, legend, size, onSelect, selected, hint, className, ...rest }: SelectShareBarProps): import("react").JSX.Element | null;
+export declare function SelectShareBar({ items, label, aside, legend, size, onSelect, selected, hint, selectHint, clearHint, className, ...rest }: SelectShareBarProps): import("react").JSX.Element | null;
 export {};

package/dist/index.js

@@ -12783,14 +12783,21 @@ var Mu = "allow-scripts allow-same-origin allow-forms", Nu = 390, Pu = 1280, Fu
 						children: [
 							/* @__PURE__ */ y("div", {
 								className: "select-balance-hero__tilehead",
-								children: [e.icon && /* @__PURE__ */ v("span", {
-									className: "select-balance-hero__tileicon",
-									children: e.icon
-								}), /* @__PURE__ */ v("span", {
-									className: "select-balance-hero__tilelabel",
-									title: e.label,
-									children: e.label
-								})]
+								children: [
+									e.icon && /* @__PURE__ */ v("span", {
+										className: "select-balance-hero__tileicon",
+										children: e.icon
+									}),
+									/* @__PURE__ */ v("span", {
+										className: "select-balance-hero__tilelabel",
+										title: e.label,
+										children: e.label
+									}),
+									e.help != null && /* @__PURE__ */ v(Mn, {
+										content: e.help,
+										label: `Sobre ${e.label}`
+									})
+								]
 							}),
 							/* @__PURE__ */ v("span", {
 								className: "select-balance-hero__tileamount",
@@ -12844,10 +12851,13 @@ var Mu = "allow-scripts allow-same-origin allow-forms", Nu = 390, Pu = 1280, Fu
 						children: e.icon
 					}), /* @__PURE__ */ y("span", {
 						className: "select-balance__bucketbody",
-						children: [/* @__PURE__ */ v("span", {
+						children: [/* @__PURE__ */ y("span", {
 							className: "select-balance__bucketlabel",
 							title: e.label,
-							children: e.label
+							children: [e.label, e.help != null && /* @__PURE__ */ v(Mn, {
+								content: e.help,
+								label: `Sobre ${e.label}`
+							})]
 						}), /* @__PURE__ */ v("span", {
 							className: "select-balance__bucketamount",
 							children: /* @__PURE__ */ v(Gl, { cents: e.cents })
@@ -15073,17 +15083,38 @@ function Yd({ items: e, className: t, ...n }) {
 }
 //#endregion
 //#region src/SelectShareBar.tsx
-function Xd({ items: e, label: t, aside: n, legend: r = "list", size: i = "sm", onSelect: a, selected: o, hint: s, className: c, ...l }) {
-	let u = e.map((e, t) => ({
+function Xd({ items: e, label: t, aside: n, legend: r = "list", size: i = "sm", onSelect: a, selected: o, hint: s, selectHint: c = "Clique para filtrar.", clearHint: l = "Clique de novo para ver todas.", className: u, ...d }) {
+	let f = e.map((e, t) => ({
 		...e,
 		key: e.key ?? e.label,
 		color: e.color ?? X(t)
-	})).filter((e) => e.value > 0), d = u.reduce((e, t) => e + t.value, 0);
-	if (d <= 0) return null;
-	let f = (e) => Math.round(e / d * 100), p = (e) => o != null && o !== e;
+	})).filter((e) => e.value > 0), p = f.reduce((e, t) => e + t.value, 0);
+	if (p <= 0) return null;
+	let m = (e) => Math.round(e / p * 100), h = (e) => o != null && o !== e, g = (e, t) => {
+		let n = a ? o === e.key ? l : c : null;
+		return !t && e.tip == null && n == null ? null : /* @__PURE__ */ y("span", {
+			className: "select-sharebar__tip",
+			children: [
+				t && /* @__PURE__ */ y(_, { children: [/* @__PURE__ */ v("strong", { children: e.label }), /* @__PURE__ */ y("span", { children: [
+					e.count != null && /* @__PURE__ */ y(_, { children: [e.count, " · "] }),
+					e.valueText != null && /* @__PURE__ */ y(_, { children: [e.valueText, " · "] }),
+					m(e.value),
+					"%"
+				] })] }),
+				e.tip != null && /* @__PURE__ */ v("span", { children: e.tip }),
+				n != null && /* @__PURE__ */ v("span", {
+					className: "select-sharebar__tipaction",
+					children: n
+				})
+			]
+		});
+	}, b = (e, t) => e == null ? t : /* @__PURE__ */ v(wn, {
+		content: e,
+		children: t
+	});
 	return /* @__PURE__ */ y("div", {
-		...l,
-		className: `select-sharebar select-sharebar--${i}${r === "chips" ? " select-sharebar--chips" : ""}${c ? " " + c : ""}`,
+		...d,
+		className: `select-sharebar select-sharebar--${i}${r === "chips" ? " select-sharebar--chips" : ""}${u ? " " + u : ""}`,
 		children: [
 			(t != null || n != null) && /* @__PURE__ */ y("div", {
 				className: "select-sharebar__head",
@@ -15092,28 +15123,31 @@ function Xd({ items: e, label: t, aside: n, legend: r = "list", size: i = "sm",
 			/* @__PURE__ */ v("div", {
 				className: "select-sharebar__track",
 				role: a ? "group" : "img",
-				"aria-label": u.map((e) => `${e.label} ${f(e.value)}%`).join(", "),
-				children: u.map((e) => a ? /* @__PURE__ */ v("button", {
-					type: "button",
-					className: `select-sharebar__seg select-sharebar__seg--btn${p(e.key) ? " is-dim" : ""}`,
-					style: {
-						width: `${e.value / d * 100}%`,
-						background: e.color
-					},
-					"aria-label": `${e.label}: ${f(e.value)}%`,
-					"aria-pressed": o === e.key,
-					onClick: () => a(e.key)
-				}, e.key) : /* @__PURE__ */ v("span", {
-					className: `select-sharebar__seg${p(e.key) ? " is-dim" : ""}`,
-					style: {
-						width: `${e.value / d * 100}%`,
-						background: e.color
-					}
+				"aria-label": f.map((e) => `${e.label} ${m(e.value)}%`).join(", "),
+				children: f.map((e) => /* @__PURE__ */ v(wn, {
+					content: g(e, !0),
+					children: a ? /* @__PURE__ */ v("button", {
+						type: "button",
+						className: `select-sharebar__seg select-sharebar__seg--btn${h(e.key) ? " is-dim" : ""}`,
+						style: {
+							width: `${e.value / p * 100}%`,
+							background: e.color
+						},
+						"aria-label": `${e.label}: ${m(e.value)}%`,
+						"aria-pressed": o === e.key,
+						onClick: () => a(e.key)
+					}) : /* @__PURE__ */ v("span", {
+						className: `select-sharebar__seg${h(e.key) ? " is-dim" : ""}`,
+						style: {
+							width: `${e.value / p * 100}%`,
+							background: e.color
+						}
+					})
 				}, e.key))
 			}),
 			r === "chips" ? /* @__PURE__ */ v("ul", {
 				className: "select-sharebar__chips",
-				children: u.map((e) => {
+				children: f.map((e) => {
 					let t = /* @__PURE__ */ y(_, { children: [
 						/* @__PURE__ */ v("span", {
 							className: "select-sharebar__dot",
@@ -15133,20 +15167,20 @@ function Xd({ items: e, label: t, aside: n, legend: r = "list", size: i = "sm",
 							children: e.valueText
 						})
 					] });
-					return /* @__PURE__ */ v("li", { children: a ? /* @__PURE__ */ v("button", {
+					return /* @__PURE__ */ v("li", { children: b(g(e, !1), a ? /* @__PURE__ */ v("button", {
 						type: "button",
-						className: `select-sharebar__chip select-sharebar__chip--btn${o === e.key ? " is-selected" : ""}${p(e.key) ? " is-dim" : ""}`,
+						className: `select-sharebar__chip select-sharebar__chip--btn${o === e.key ? " is-selected" : ""}${h(e.key) ? " is-dim" : ""}`,
 						"aria-pressed": o === e.key,
 						onClick: () => a(e.key),
 						children: t
 					}) : /* @__PURE__ */ v("span", {
 						className: "select-sharebar__chip",
 						children: t
-					}) }, e.key);
+					})) }, e.key);
 				})
 			}) : /* @__PURE__ */ v("ul", {
 				className: "select-sharebar__legend",
-				children: u.map((e) => /* @__PURE__ */ y("li", {
+				children: f.map((e) => /* @__PURE__ */ y("li", {
 					className: "select-sharebar__item",
 					children: [
 						/* @__PURE__ */ v("span", {
@@ -15154,17 +15188,20 @@ function Xd({ items: e, label: t, aside: n, legend: r = "list", size: i = "sm",
 							style: { background: e.color },
 							"aria-hidden": "true"
 						}),
-						/* @__PURE__ */ v("span", {
+						b(e.tip == null ? null : /* @__PURE__ */ v("span", {
+							className: "select-sharebar__tip",
+							children: e.tip
+						}), /* @__PURE__ */ v("span", {
 							className: "select-sharebar__label",
 							children: e.label
-						}),
+						})),
 						e.valueText != null && /* @__PURE__ */ v("span", {
 							className: "select-sharebar__value",
 							children: e.valueText
 						}),
 						/* @__PURE__ */ y("span", {
 							className: "select-sharebar__pct",
-							children: [f(e.value), "%"]
+							children: [m(e.value), "%"]
 						})
 					]
 				}, e.key))
@@ -15420,9 +15457,9 @@ var Zd = r(function({ value: e, max: t = 100, size: n = 64, thickness: r, tone:
 		children: e.map((e, t) => /* @__PURE__ */ y("div", {
 			className: "select-ministats__item",
 			children: [
-				/* @__PURE__ */ v("dt", {
-					className: "select-ministats__label",
-					children: e.label
+				/* @__PURE__ */ y("dt", {
+					className: `select-ministats__label${e.help == null ? "" : " select-ministats__label--help"}`,
+					children: [e.label, e.help != null && /* @__PURE__ */ v(Mn, { content: e.help })]
 				}),
 				/* @__PURE__ */ v("dd", {
 					className: "select-ministats__value",
@@ -30466,38 +30503,38 @@ var Vp = r(function({ name: e, price: t, priceSuffix: n, headerAction: r, summar
 			})]
 		})]
 	});
-}), Hp = r(function({ title: e, description: t, headerAction: n, footer: r, dense: i = !1, spread: a = !1, flush: o = !1, children: s, className: c, ...l }, u) {
+}), Hp = r(function({ title: e, help: t, description: n, headerAction: r, footer: i, dense: a = !1, spread: o = !1, flush: s = !1, children: c, className: l, ...u }, d) {
 	return /* @__PURE__ */ y("div", {
-		ref: u,
-		...l,
-		className: `select-listcard${i ? " select-listcard--dense" : ""}${a ? " select-listcard--spread" : ""}${o ? " select-listcard--flush" : ""}${c ? " " + c : ""}`,
+		ref: d,
+		...u,
+		className: `select-listcard${a ? " select-listcard--dense" : ""}${o ? " select-listcard--spread" : ""}${s ? " select-listcard--flush" : ""}${l ? " " + l : ""}`,
 		children: [
-			(e || n) && /* @__PURE__ */ y("div", {
+			(e || r) && /* @__PURE__ */ y("div", {
 				className: "select-listcard__head",
 				children: [/* @__PURE__ */ y("div", {
 					className: "select-listcard__heading",
-					children: [e && /* @__PURE__ */ v("h3", {
-						className: "select-listcard__title",
-						children: e
-					}), t && /* @__PURE__ */ v("p", {
+					children: [e && /* @__PURE__ */ y("h3", {
+						className: `select-listcard__title${t == null ? "" : " select-listcard__title--help"}`,
+						children: [e, t != null && /* @__PURE__ */ v(Mn, { content: t })]
+					}), n && /* @__PURE__ */ v("p", {
 						className: "select-listcard__desc",
-						children: t
+						children: n
 					})]
-				}), n && /* @__PURE__ */ v("div", {
+				}), r && /* @__PURE__ */ v("div", {
 					className: "select-listcard__headeraction",
-					children: n
+					children: r
 				})]
 			}),
 			/* @__PURE__ */ v("div", {
 				className: "select-listcard__body",
 				children: /* @__PURE__ */ v("div", {
 					className: "select-listcard__rows",
-					children: s
+					children: c
 				})
 			}),
-			r && /* @__PURE__ */ v("div", {
+			i && /* @__PURE__ */ v("div", {
 				className: "select-listcard__footer",
-				children: r
+				children: i
 			})
 		]
 	});