@selectwin/kit 0.1.217 → 0.1.219

package/dist/SelectChartTipRows.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+export interface SelectChartTipRow {
+    label: ReactNode;
+    value: ReactNode;
+    /** A cor da série ou da parte (o ponto à esquerda). */
+    color?: string;
+    /** A linha da soma: sem o ponto, com o espaço dele. */
+    total?: boolean;
+}
+export declare function SelectChartTipRows({ title, rows }: {
+    title?: ReactNode;
+    rows: readonly SelectChartTipRow[];
+}): import("react").JSX.Element;

package/dist/SelectChartTipRows.js

@@ -0,0 +1,31 @@
+/* empty css           */
+import { Fragment as e, jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/SelectChartTipRows.tsx
+function r({ title: r, rows: i }) {
+	let a = i.some((e) => e.color != null);
+	return /* @__PURE__ */ n(e, { children: [r != null && /* @__PURE__ */ t("span", {
+		className: "select-chart__tiptitle",
+		children: r
+	}), i.map((e, r) => /* @__PURE__ */ n("span", {
+		className: `select-chart__tiprow${e.total ? " select-chart__tiprow--total" : ""}`,
+		children: [
+			a && /* @__PURE__ */ t("span", {
+				className: "select-chart__tipdot",
+				style: e.color != null && !e.total ? { background: e.color } : { visibility: "hidden" },
+				"aria-hidden": "true"
+			}),
+			/* @__PURE__ */ t("span", {
+				className: "select-chart__tiplabel",
+				children: e.label
+			}),
+			/* @__PURE__ */ t("span", {
+				className: "select-chart__tipval",
+				children: e.value
+			})
+		]
+	}, r))] });
+}
+//#endregion
+export { r as SelectChartTipRows };
+
+//# sourceMappingURL=SelectChartTipRows.js.map

package/dist/SelectColumnChart.d.ts

@@ -3,10 +3,12 @@ import { SelectChartSeries } from './chartUtils';
 /** What the hover card shows for one slot (see `tooltip`). */
 export interface SelectColumnTooltip {
     title?: ReactNode;
+    /** `total` (0.1.219): a linha da soma, sem o ponto da cor e com o fio acima. */
     rows: {
         label: ReactNode;
         value: ReactNode;
         color?: string;
+        total?: boolean;
     }[];
 }
 type SelectColumnChartOwnProps = {
@@ -36,7 +38,19 @@ type SelectColumnChartOwnProps = {
     average?: boolean | {
         label?: string;
     };
+    /** 0.1.219: o nome do gráfico ("Mensagens por dia, por canal"). Com ele, o gráfico entra no Tab e anda pelas setas. */
+    label?: string;
+    /** 0.1.219: o ponto que o foco do teclado acende primeiro (padrão: o último, o mais recente). */
+    start?: number;
+    /** 0.1.219: o nome inteiro de cada ponto ("24/10, 14h–15h"), na dica e na tabela; o eixo segue com `labels`. */
+    titles?: string[];
+    /** 0.1.219: os números da dica e da tabela ("1.204"); o eixo segue com `format` ("1,2 mil"). Padrão: `format`. */
+    formatValue?: (n: number) => string;
+    /** 0.1.219: a linha da soma na dica padrão, com este rótulo ("no total"). */
+    total?: string;
+    /** 0.1.219: com `label`, a tabela escondida com todos os números; o texto é o cabeçalho da 1ª coluna ("Dia"). */
+    table?: string;
 };
 export type SelectColumnChartProps = SelectColumnChartOwnProps & Omit<ComponentPropsWithoutRef<'div'>, keyof SelectColumnChartOwnProps>;
-export declare function SelectColumnChart({ series, labels, height, format, stacked, marker, tooltip, compare, average, className, ...rest }: SelectColumnChartProps): import("react").JSX.Element;
+export declare function SelectColumnChart({ series, labels, height, format, stacked, marker, tooltip, compare, average, label, start, titles, formatValue, total, table, className, ...rest }: SelectColumnChartProps): import("react").JSX.Element;
 export {};

package/dist/SelectColumnChart.js

@@ -1,222 +1,250 @@
 /* empty css           */
 import { CHART_PAD as e, chartColor as t, formatCompact as n, niceTicks as r, useChartSize as i, yAxisPad as a } from "./chartUtils.js";
-import { ChartTooltip as o, useChartTooltip as ee } from "./chartTip.js";
-import { useId as te, useState as ne } from "react";
+import { ChartTooltip as o } from "./chartTip.js";
+import { tipSpeech as ee, useChartPointer as te } from "./internal/chartPointer.js";
+import { useId as ne } from "react";
 import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region src/SelectColumnChart.tsx
-var l = 6.4, re = 12, u = .45, d = 3;
-function f({ series: f, labels: p, height: m = 240, format: h = n, stacked: g = !1, marker: _, tooltip: v, compare: y, average: b, className: x, ...S }) {
-	var C;
-	let { ref: w, width: T } = i(m), E = ee(), D = te(), [O, k] = ne(null), A = p.length, j = f.length || 1, M = p.map((e, t) => f.reduce((e, n) => e + (n.data[t] ?? 0), 0)), N = y ? p.map((e, t) => y.data[t] ?? 0) : [], ie = Math.max(0, ...g ? M : f.flatMap((e) => e.data), ...N), { max: P, values: F } = r(ie, 4), I = {
+var re = 6.4, ie = 12, ae = .45, l = 3;
+function u({ series: u, labels: d, height: f = 240, format: p = n, stacked: m = !1, marker: h, tooltip: g, compare: _, average: v, label: y, start: oe, titles: b, formatValue: x = p, total: S, table: C, className: w, ...se }) {
+	var T;
+	let { ref: E, width: D } = i(f), O = ne(), k = d.length, A = u.length || 1, j = d.map((e, t) => u.reduce((e, n) => e + (n.data[t] ?? 0), 0)), M = _ ? d.map((e, t) => _.data[t] ?? 0) : [], ce = Math.max(0, ...m ? j : u.flatMap((e) => e.data), ...M), { max: N, values: P } = r(ce, 4), F = {
 		...e,
-		left: a(F.map(h), w.current)
-	}, L = Math.max(0, T - I.left - I.right), R = m - I.top - I.bottom, z = I.top + R, B = A ? L / A : 0, V = (e) => z - e / P * R, H = y ? 1.45 : 1, ae = Math.min(B * .72, j * 40 * H), U = Math.min(B * (y ? .62 : .5) / H, 44), W = g ? U : ae / H / j, G = y ? (g ? U : W * j) * u : 0, K = Math.min(30, 600 / Math.max(1, A)), q = (e, t) => e.pattern === "hatch" ? `url(#${D}-p${t})` : `url(#${D}-c${t})`, J = (e) => e.edge ? {
+		left: a(P.map(p), E.current)
+	}, I = Math.max(0, D - F.left - F.right), L = f - F.top - F.bottom, R = F.top + L, z = k ? I / k : 0, B = (e) => R - e / N * L, V = _ ? 1.45 : 1, le = Math.min(z * .72, A * 40 * V), H = Math.min(z * (_ ? .62 : .5) / V, 44), U = m ? H : le / V / A, W = _ ? (m ? H : U * A) * ae : 0, G = Math.min(30, 600 / Math.max(1, k)), K = (e, t) => e.pattern === "hatch" ? `url(#${O}-p${t})` : `url(#${O}-c${t})`, q = (e) => e.edge ? {
 		stroke: e.edge,
 		strokeWidth: 1
-	} : {}, Y = _ && A > 0 ? Math.min(A - 1, Math.max(0, _.index)) : null, oe = p.reduce((e, t) => Math.max(e, t.length), 0), X = B > 0 ? Math.max(1, Math.ceil((oe * l + re) / B)) : 1, se = Y ?? 0, ce = (e) => X === 1 || ((e - se) % X + X) % X === 0, Z = g ? M : ((C = f[0]) == null ? void 0 : C.data) ?? [], Q = b && Z.length > 0 ? Z.reduce((e, t) => e + (t ?? 0), 0) / Z.length : null, le = typeof b == "object" && b.label ? b.label : "Média", ue = (e, n) => {
-		if (v) {
-			let t = v(e);
+	} : {}, J = h && k > 0 ? Math.min(k - 1, Math.max(0, h.index)) : null, ue = d.reduce((e, t) => Math.max(e, t.length), 0), Y = z > 0 ? Math.max(1, Math.ceil((ue * re + ie) / z)) : 1, de = J ?? 0, fe = (e) => Y === 1 || ((e - de) % Y + Y) % Y === 0, X = m ? j : ((T = u[0]) == null ? void 0 : T.data) ?? [], Z = v && X.length > 0 ? X.reduce((e, t) => e + (t ?? 0), 0) / X.length : null, pe = typeof v == "object" && v.label ? v.label : "Média", me = (e, n) => {
+		if (g) {
+			let t = g(e);
 			return t ? {
 				title: t.title ?? n,
 				rows: t.rows
 			} : null;
 		}
-		let r = f.map((n, r) => ({
+		let r = u.map((n, r) => ({
 			label: n.name,
-			value: h(n.data[e] ?? 0),
+			value: x(n.data[e] ?? 0),
 			color: n.color ?? t(r)
 		}));
-		return y && r.push({
-			label: y.name,
-			value: h(N[e] ?? 0),
+		return _ && r.push({
+			label: _.name,
+			value: x(M[e] ?? 0),
 			color: "var(--select-chart-compare)"
+		}), S != null && r.push({
+			label: S,
+			value: x(j[e] ?? 0),
+			total: !0
 		}), {
 			title: n,
 			rows: r
 		};
-	}, $ = (e) => `select-chart__slot${O != null && O !== e ? " select-chart__slot--dim" : ""}`;
+	}, { active: Q, props: he } = te({
+		count: k,
+		indexAt: (e) => z > 0 && e >= F.left ? Math.min(k - 1, Math.floor((e - F.left) / z)) : null,
+		start: oe,
+		focusable: y != null
+	}), ge = (e) => {
+		let t = m ? B(j[e] ?? 0) : Math.min(...u.map((t) => B(t.data[e] ?? 0)));
+		return _ ? Math.min(t, B(M[e] ?? 0)) : t;
+	}, $ = Q == null ? null : me(Q, (b == null ? void 0 : b[Q]) ?? d[Q] ?? ""), _e = (e) => `select-chart__slot${Q != null && Q !== e ? " select-chart__slot--dim" : ""}`;
 	return /* @__PURE__ */ c("div", {
-		...S,
-		className: `select-chart-wrap${x ? " " + x : ""}`,
-		ref: w,
-		children: [T > 0 && /* @__PURE__ */ c("svg", {
-			width: T,
-			height: m,
-			className: "select-chart",
-			children: [
-				/* @__PURE__ */ s("defs", { children: f.map((e, n) => {
-					let r = e.color ?? t(n);
-					return e.pattern === "hatch" ? /* @__PURE__ */ c("pattern", {
-						id: `${D}-p${n}`,
-						width: 6,
-						height: 6,
-						patternUnits: "userSpaceOnUse",
-						patternTransform: "rotate(45)",
-						children: [/* @__PURE__ */ s("rect", {
+		...se,
+		className: `select-chart-wrap${w ? " " + w : ""}`,
+		ref: E,
+		children: [
+			D > 0 && /* @__PURE__ */ c("svg", {
+				width: D,
+				height: f,
+				className: "select-chart",
+				...y == null ? {} : {
+					role: "img",
+					"aria-label": y
+				},
+				...he,
+				children: [
+					/* @__PURE__ */ s("defs", { children: u.map((e, n) => {
+						let r = e.color ?? t(n);
+						return e.pattern === "hatch" ? /* @__PURE__ */ c("pattern", {
+							id: `${O}-p${n}`,
 							width: 6,
 							height: 6,
-							fill: r,
-							fillOpacity: .16
-						}), /* @__PURE__ */ s("line", {
-							x1: 0,
-							y1: 0,
-							x2: 0,
-							y2: 6,
-							stroke: r,
-							strokeWidth: 2.5
-						})]
-					}, n) : /* @__PURE__ */ c("linearGradient", {
-						id: `${D}-c${n}`,
-						x1: "0",
-						y1: "0",
-						x2: "0",
-						y2: "1",
-						children: [/* @__PURE__ */ s("stop", {
-							offset: "0%",
-							stopColor: r,
-							stopOpacity: 1
-						}), /* @__PURE__ */ s("stop", {
-							offset: "100%",
-							stopColor: r,
-							stopOpacity: .62
-						})]
-					}, n);
-				}) }),
-				F.map((e, t) => /* @__PURE__ */ c("g", { children: [/* @__PURE__ */ s("line", {
-					x1: I.left,
-					x2: T - I.right,
-					y1: V(e),
-					y2: V(e),
-					className: t === 0 ? "select-chart__axis" : "select-chart__grid"
-				}), /* @__PURE__ */ s("text", {
-					x: I.left - 8,
-					y: V(e),
-					className: "select-chart__ylabel",
-					dominantBaseline: "middle",
-					textAnchor: "end",
-					children: h(e)
-				})] }, t)),
-				p.map((e, t) => {
-					let n = I.left + B * t, r = (g ? W : W * j) + (y ? G + d : 0), i = n + B / 2 - r / 2, a = i + (y ? G + d : 0), o = y ? /* @__PURE__ */ s("rect", {
-						x: i,
-						y: V(N[t] ?? 0),
-						width: G,
-						height: Math.max(0, z - V(N[t] ?? 0)),
-						rx: Math.min(3, G / 2),
-						className: "select-chart__compare",
-						style: { animationDelay: `${Math.round(t * K)}ms` }
-					}) : null;
-					if (g) {
-						let e = 0;
+							patternUnits: "userSpaceOnUse",
+							patternTransform: "rotate(45)",
+							children: [/* @__PURE__ */ s("rect", {
+								width: 6,
+								height: 6,
+								fill: r,
+								fillOpacity: .16
+							}), /* @__PURE__ */ s("line", {
+								x1: 0,
+								y1: 0,
+								x2: 0,
+								y2: 6,
+								stroke: r,
+								strokeWidth: 2.5
+							})]
+						}, n) : /* @__PURE__ */ c("linearGradient", {
+							id: `${O}-c${n}`,
+							x1: "0",
+							y1: "0",
+							x2: "0",
+							y2: "1",
+							children: [/* @__PURE__ */ s("stop", {
+								offset: "0%",
+								stopColor: r,
+								stopOpacity: 1
+							}), /* @__PURE__ */ s("stop", {
+								offset: "100%",
+								stopColor: r,
+								stopOpacity: .62
+							})]
+						}, n);
+					}) }),
+					P.map((e, t) => /* @__PURE__ */ c("g", { children: [/* @__PURE__ */ s("line", {
+						x1: F.left,
+						x2: D - F.right,
+						y1: B(e),
+						y2: B(e),
+						className: t === 0 ? "select-chart__axis" : "select-chart__grid"
+					}), /* @__PURE__ */ s("text", {
+						x: F.left - 8,
+						y: B(e),
+						className: "select-chart__ylabel",
+						dominantBaseline: "middle",
+						textAnchor: "end",
+						children: p(e)
+					})] }, t)),
+					d.map((e, t) => {
+						let n = F.left + z * t, r = (m ? U : U * A) + (_ ? W + l : 0), i = n + z / 2 - r / 2, a = i + (_ ? W + l : 0), o = _ ? /* @__PURE__ */ s("rect", {
+							x: i,
+							y: B(M[t] ?? 0),
+							width: W,
+							height: Math.max(0, R - B(M[t] ?? 0)),
+							rx: Math.min(3, W / 2),
+							className: "select-chart__compare",
+							style: { animationDelay: `${Math.round(t * G)}ms` }
+						}) : null;
+						if (m) {
+							let e = 0;
+							return /* @__PURE__ */ c("g", {
+								className: _e(t),
+								children: [o, u.map((n, r) => {
+									let i = (n.data[t] ?? 0) / N * L, o = R - e - i;
+									return e += i, i <= 0 ? null : /* @__PURE__ */ s("rect", {
+										x: a,
+										y: o,
+										width: U,
+										height: i,
+										rx: Math.min(3, U / 2),
+										fill: K(n, r),
+										...q(n),
+										className: "select-chart__bar",
+										style: { animationDelay: `${Math.round(t * G)}ms` }
+									}, r);
+								})]
+							}, t);
+						}
 						return /* @__PURE__ */ c("g", {
-							className: $(t),
-							children: [o, f.map((n, r) => {
-								let i = (n.data[t] ?? 0) / P * R, o = z - e - i;
-								return e += i, i <= 0 ? null : /* @__PURE__ */ s("rect", {
-									x: a,
-									y: o,
-									width: W,
-									height: i,
-									rx: Math.min(3, W / 2),
-									fill: q(n, r),
-									...J(n),
+							className: _e(t),
+							children: [o, u.map((e, n) => {
+								let r = (e.data[t] ?? 0) / N * L;
+								return /* @__PURE__ */ s("rect", {
+									x: a + n * U + U * .1,
+									y: R - r,
+									width: U * .8,
+									height: Math.max(0, r),
+									rx: 3,
+									fill: K(e, n),
+									...q(e),
 									className: "select-chart__bar",
-									style: { animationDelay: `${Math.round(t * K)}ms` }
-								}, r);
+									style: { animationDelay: `${Math.round((t + n / A) * G)}ms` }
+								}, n);
 							})]
 						}, t);
-					}
-					return /* @__PURE__ */ c("g", {
-						className: $(t),
-						children: [o, f.map((e, n) => {
-							let r = (e.data[t] ?? 0) / P * R;
-							return /* @__PURE__ */ s("rect", {
-								x: a + n * W + W * .1,
-								y: z - r,
-								width: W * .8,
-								height: Math.max(0, r),
-								rx: 3,
-								fill: q(e, n),
-								...J(e),
-								className: "select-chart__bar",
-								style: { animationDelay: `${Math.round((t + n / j) * K)}ms` }
-							}, n);
-						})]
-					}, t);
-				}),
-				Q != null && Q > 0 && /* @__PURE__ */ c("g", {
-					pointerEvents: "none",
-					children: [/* @__PURE__ */ s("line", {
-						x1: I.left,
-						x2: T - I.right,
-						y1: V(Q),
-						y2: V(Q),
-						className: "select-chart__avg"
-					}), /* @__PURE__ */ s("text", {
-						x: I.left + 6,
-						y: V(Q) - 6,
-						className: "select-chart__avglabel",
-						children: `${le} ${h(Q)}`
-					})]
-				}),
-				_ && Y != null && (() => {
-					let e = I.left + B * Y + (_.edge === "end" ? B : B / 2), t = e > T - I.right - 44;
-					return /* @__PURE__ */ c("g", {
-						className: "select-chart__marker",
+					}),
+					Z != null && Z > 0 && /* @__PURE__ */ c("g", {
 						pointerEvents: "none",
 						children: [/* @__PURE__ */ s("line", {
-							x1: e,
-							x2: e,
-							y1: I.top - 4,
-							y2: z
-						}), _.label && /* @__PURE__ */ s("text", {
-							x: t ? e - 6 : e + 6,
-							y: I.top + 6,
-							textAnchor: t ? "end" : "start",
-							children: _.label
+							x1: F.left,
+							x2: D - F.right,
+							y1: B(Z),
+							y2: B(Z),
+							className: "select-chart__avg"
+						}), /* @__PURE__ */ s("text", {
+							x: F.left + 6,
+							y: B(Z) - 6,
+							className: "select-chart__avglabel",
+							children: `${pe} ${p(Z)}`
 						})]
-					});
-				})(),
-				p.map((e, t) => ce(t) ? /* @__PURE__ */ s("text", {
-					x: I.left + B * t + B / 2,
-					y: m - I.bottom + 16,
-					className: "select-chart__xlabel",
-					textAnchor: "middle",
-					children: e
-				}, t) : null),
-				p.map((e, t) => {
-					let n = g ? V(M[t] ?? 0) : Math.min(...f.map((e) => V(e.data[t] ?? 0))), r = y ? Math.min(n, V(N[t] ?? 0)) : n;
-					return /* @__PURE__ */ s("rect", {
-						x: I.left + B * t,
-						y: I.top,
-						width: B,
-						height: R,
-						fill: "transparent",
-						onMouseEnter: () => {
-							k(t);
-							let n = ue(t, e);
-							if (!n) {
-								E.hide();
-								return;
-							}
-							E.show({
-								x: I.left + B * t + B / 2,
-								y: r,
-								place: r < I.top + 52 ? "bottom" : "top",
-								title: n.title,
-								rows: n.rows
-							});
-						},
-						onMouseLeave: () => {
-							k(null), E.hide();
-						}
-					}, `h${t}`);
-				})
-			]
-		}), /* @__PURE__ */ s(o, { tip: E.tip })]
+					}),
+					h && J != null && (() => {
+						let e = F.left + z * J + (h.edge === "end" ? z : z / 2), t = e > D - F.right - 44;
+						return /* @__PURE__ */ c("g", {
+							className: "select-chart__marker",
+							pointerEvents: "none",
+							children: [/* @__PURE__ */ s("line", {
+								x1: e,
+								x2: e,
+								y1: F.top - 4,
+								y2: R
+							}), h.label && /* @__PURE__ */ s("text", {
+								x: t ? e - 6 : e + 6,
+								y: F.top + 6,
+								textAnchor: t ? "end" : "start",
+								children: h.label
+							})]
+						});
+					})(),
+					d.map((e, t) => fe(t) ? /* @__PURE__ */ s("text", {
+						x: F.left + z * t + z / 2,
+						y: f - F.bottom + 16,
+						className: "select-chart__xlabel",
+						textAnchor: "middle",
+						children: e
+					}, t) : null),
+					/* @__PURE__ */ s("rect", {
+						x: F.left,
+						y: F.top,
+						width: I,
+						height: L,
+						fill: "transparent"
+					})
+				]
+			}),
+			/* @__PURE__ */ s(o, { tip: $ && Q != null ? {
+				x: F.left + z * Q + z / 2,
+				y: ge(Q),
+				place: ge(Q) < F.top + 52 ? "bottom" : "top",
+				title: $.title,
+				rows: $.rows
+			} : null }),
+			y != null && /* @__PURE__ */ s("span", {
+				className: "select-visually-hidden",
+				"aria-live": "polite",
+				children: $ ? ee($.title, $.rows) : ""
+			}),
+			y != null && C != null && /* @__PURE__ */ c("table", {
+				className: "select-visually-hidden",
+				children: [
+					/* @__PURE__ */ s("caption", { children: y }),
+					/* @__PURE__ */ s("thead", { children: /* @__PURE__ */ c("tr", { children: [/* @__PURE__ */ s("th", {
+						scope: "col",
+						children: C
+					}), u.map((e, t) => /* @__PURE__ */ s("th", {
+						scope: "col",
+						children: e.name
+					}, t))] }) }),
+					/* @__PURE__ */ s("tbody", { children: d.map((e, t) => /* @__PURE__ */ c("tr", { children: [/* @__PURE__ */ s("th", {
+						scope: "row",
+						children: (b == null ? void 0 : b[t]) ?? e
+					}), u.map((e, n) => /* @__PURE__ */ s("td", { children: x(e.data[t] ?? 0) }, n))] }, t)) })
+				]
+			})
+		]
 	});
 }
 //#endregion
-export { f as SelectColumnChart };
+export { u as SelectColumnChart };
 
 //# sourceMappingURL=SelectColumnChart.js.map

package/dist/SelectGauge.d.ts

@@ -1,4 +1,4 @@
-import { ComponentPropsWithoutRef } from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
 type SelectGaugeOwnProps = {
     /** Percentage 0–100 (drives the arc sweep). */
     value: number;
@@ -12,6 +12,13 @@ type SelectGaugeOwnProps = {
     color?: string;
     /** Format the center number (default "NN%"). */
     format?: (n: number) => string;
+    /**
+     * 0.1.218: os números por trás da proporção ("1.204 entregues · 3 a caminho"), numa dica que abre no mouse, no foco do
+     * teclado (o medidor entra na ordem do Tab) e no toque, e fecha no Esc. Para quem lê tela, é a descrição do medidor.
+     */
+    tip?: ReactNode;
+    /** 0.1.218: o nome do medidor para o leitor de tela ("98% entregues"); padrão: o número e o `label`. */
+    ariaLabel?: string;
 };
 export type SelectGaugeProps = SelectGaugeOwnProps & Omit<ComponentPropsWithoutRef<'div'>, keyof SelectGaugeOwnProps>;
 export declare const SelectGauge: import('react').ForwardRefExoticComponent<SelectGaugeOwnProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof SelectGaugeOwnProps> & import('react').RefAttributes<HTMLDivElement>>;