@selectwin/kit 0.1.208 → 0.1.209

package/dist/SelectLocale.d.ts

@@ -25,6 +25,8 @@ export interface SelectKitMessages {
         optional: string;
         notifications: string;
         needsAttention: string;
+        /** 0.1.209: o passo feito, para o leitor de tela (o visto do número é decorativo). */
+        done: string;
     };
     pagination: {
         label: string;

package/dist/SelectLocale.js

@@ -24,7 +24,8 @@ var r = {
 			hidePassword: "Ocultar senha",
 			optional: "(opcional)",
 			notifications: "Notificações",
-			needsAttention: "precisa de atenção"
+			needsAttention: "precisa de atenção",
+			done: "feito"
 		},
 		pagination: {
 			label: "Paginação",
@@ -111,7 +112,8 @@ var r = {
 			hidePassword: "Hide password",
 			optional: "(optional)",
 			notifications: "Notifications",
-			needsAttention: "needs attention"
+			needsAttention: "needs attention",
+			done: "done"
 		},
 		pagination: {
 			label: "Pagination",

package/dist/SelectSegmented.d.ts

@@ -25,6 +25,10 @@ type SelectSegmentedOwnProps = {
     disabled?: boolean;
     /** A recusa da escolha (0.1.141): a trilha com o contorno de erro e a frase embaixo, no lugar do `hint`. */
     error?: ReactNode;
+    /** `tabs` (padrão): a trilha troca um painel (tablist). `radio` (0.1.209): uma escolha (radiogroup). */
+    semantics?: 'tabs' | 'radio';
+    /** `sm` (0.1.209): o tier pequeno (28px) fora de um `.select-dense` — a linha de um menu, o cabeçalho de um cartão. */
+    size?: 'md' | 'sm';
 };
 export type SelectSegmentedProps = SelectSegmentedOwnProps & Omit<ComponentPropsWithoutRef<'div'>, keyof SelectSegmentedOwnProps>;
 export declare const SelectSegmented: import('react').ForwardRefExoticComponent<SelectSegmentedOwnProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof SelectSegmentedOwnProps> & import('react').RefAttributes<HTMLDivElement>>;

package/dist/SelectSegmented.js

@@ -1,51 +1,61 @@
 import { forwardRef as e, useId as t, useLayoutEffect as n, useRef as r, useState as i } from "react";
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/SelectSegmented.tsx
-var s = e(function({ value: e, onChange: s, options: c, ariaLabel: l, fullWidth: u = !1, label: d, hint: f, disabled: p = !1, error: m, className: h, ...g }, _) {
-	let v = t(), y = Math.max(0, c.findIndex((t) => t.value === e)), b = r([]), [x, S] = i(null), C = c.map((e) => e.count ?? "").join(",");
+var s = e(function({ value: e, onChange: s, options: c, ariaLabel: l, fullWidth: u = !1, label: d, hint: f, disabled: p = !1, error: m, semantics: h = "tabs", size: g = "md", className: _, ...v }, y) {
+	let b = t(), x = Math.max(0, c.findIndex((t) => t.value === e)), S = r([]), [C, w] = i(null), T = h === "radio", E = c.map((e) => e.count ?? "").join(",");
 	n(() => {
 		let e = () => {
-			let e = b.current[y];
+			let e = S.current[x];
 			if (!e) return;
 			let t = {
 				left: e.offsetLeft,
 				width: e.offsetWidth
 			};
-			S((e) => e && e.left === t.left && e.width === t.width ? e : t);
+			w((e) => e && e.left === t.left && e.width === t.width ? e : t);
 		};
 		e();
 		let t = typeof ResizeObserver < "u" ? new ResizeObserver(e) : null;
-		return b.current.forEach((e) => e && (t == null ? void 0 : t.observe(e))), () => t == null ? void 0 : t.disconnect();
+		return S.current.forEach((e) => e && (t == null ? void 0 : t.observe(e))), () => t == null ? void 0 : t.disconnect();
 	}, [
-		y,
+		x,
 		c.length,
-		C
+		E
 	]);
-	let w = x ? {
-		left: x.left,
-		width: x.width,
+	let D = C ? {
+		left: C.left,
+		width: C.width,
 		opacity: 1
-	} : { opacity: 0 }, T = /* @__PURE__ */ o("div", {
-		ref: d == null ? _ : void 0,
-		...d == null ? g : {},
-		className: `select-segmented${u ? " select-segmented--full" : ""}${p ? " select-segmented--disabled" : ""}${m != null && m !== !1 ? " select-segmented--error" : ""}${d == null && h ? " " + h : ""}`,
-		role: "tablist",
+	} : { opacity: 0 }, O = d == null ? v : {}, k = (t) => {
+		var n, r;
+		if ((n = O.onKeyDown) == null || n.call(O, t), t.defaultPrevented || p || !c.length) return;
+		let i = S.current.findIndex((e) => e === t.target);
+		if (i < 0) return;
+		let a = t.key === "ArrowRight" || T && t.key === "ArrowDown", o = t.key === "ArrowLeft" || T && t.key === "ArrowUp", l = a ? (i + 1) % c.length : o ? (i - 1 + c.length) % c.length : t.key === "Home" ? 0 : t.key === "End" ? c.length - 1 : -1;
+		l < 0 || (t.preventDefault(), (r = S.current[l]) == null || r.focus(), c[l].value !== e && s(c[l].value));
+	}, A = /* @__PURE__ */ o("div", {
+		ref: d == null ? y : void 0,
+		...O,
+		className: `select-segmented${u ? " select-segmented--full" : ""}${g === "sm" ? " select-segmented--sm" : ""}${p ? " select-segmented--disabled" : ""}${m != null && m !== !1 ? " select-segmented--error" : ""}${d == null && _ ? " " + _ : ""}`,
+		role: T ? "radiogroup" : "tablist",
 		"aria-label": l,
-		"aria-labelledby": d != null && !l ? v : void 0,
+		"aria-labelledby": d != null && !l ? b : void 0,
 		"aria-disabled": p || void 0,
+		onKeyDown: k,
 		children: [/* @__PURE__ */ a("span", {
 			className: "select-segmented__pill",
 			"aria-hidden": "true",
-			style: w
+			style: D
 		}), c.map((t, n) => {
 			let r = t.value === e, i = !!t.count && t.count > 0, c = t.title && i ? `${t.title}, ${t.countLabel ?? t.count}` : t.title;
 			return /* @__PURE__ */ o("button", {
 				ref: (e) => {
-					b.current[n] = e;
+					S.current[n] = e;
 				},
 				type: "button",
-				role: "tab",
-				"aria-selected": r,
+				role: T ? "radio" : "tab",
+				"aria-selected": T ? void 0 : r,
+				"aria-checked": T ? r : void 0,
+				tabIndex: n === x ? 0 : -1,
 				className: `select-segmented__item${r ? " select-segmented__item--active" : ""}`,
 				title: t.title,
 				"aria-label": c,
@@ -58,28 +68,28 @@ var s = e(function({ value: e, onChange: s, options: c, ariaLabel: l, fullWidth:
 				}) : null]
 			}, t.value);
 		})]
-	}), E = m != null && m !== !1 && m !== "";
-	return d == null && !E ? T : d == null ? /* @__PURE__ */ o("div", {
+	}), j = m != null && m !== !1 && m !== "";
+	return d == null && !j ? A : d == null ? /* @__PURE__ */ o("div", {
 		className: "select-field",
-		children: [T, /* @__PURE__ */ a("p", {
+		children: [A, /* @__PURE__ */ a("p", {
 			className: "select-field__error",
 			children: m
 		})]
 	}) : /* @__PURE__ */ o("div", {
-		ref: _,
-		...g,
-		className: `select-field${h ? " " + h : ""}`,
+		ref: y,
+		...v,
+		className: `select-field${_ ? " " + _ : ""}`,
 		children: [
 			/* @__PURE__ */ a("div", {
 				className: "select-field__labelrow",
 				children: /* @__PURE__ */ a("span", {
 					className: "select-field__label",
-					id: v,
+					id: b,
 					children: d
 				})
 			}),
-			T,
-			E ? /* @__PURE__ */ a("p", {
+			A,
+			j ? /* @__PURE__ */ a("p", {
 				className: "select-field__error",
 				children: m
 			}) : f != null && /* @__PURE__ */ a("p", {

package/dist/SelectSteps.js

@@ -29,6 +29,14 @@ var o = n(function({ steps: n, current: o, onSelect: s, orientation: c = "horizo
 							")"
 						]
 					}),
+					l === "done" && /* @__PURE__ */ a("span", {
+						className: "select-steps__sr",
+						children: [
+							"(",
+							p.common.done,
+							")"
+						]
+					}),
 					m && c.description && /* @__PURE__ */ i("span", {
 						className: "select-steps__desc",
 						children: c.description

package/dist/SelectTabs.d.ts

@@ -4,6 +4,8 @@ export interface SelectTab {
     label: ReactNode;
     /** Status dot tone shown before the label. */
     dot?: 'success' | 'neutral' | 'warning';
+    /** O número do que a aba mostra (0.1.209), na língua do kit: as falhas das entregas, os itens de um estado. O 0 aparece. */
+    count?: number;
 }
 type SelectTabsOwnProps = {
     tabs: SelectTab[];
@@ -12,7 +14,9 @@ type SelectTabsOwnProps = {
     /** Right-aligned slot INSIDE the tab bar (shares the bottom border) — e.g. a board's
      *  "Personalizar" trigger. Controls inside render on the small (28px) tier. */
     end?: ReactNode;
+    /** O id do conteúdo que as abas trocam (0.1.209): vira o `aria-controls` de cada aba. */
+    panelId?: string;
 };
 export type SelectTabsProps = SelectTabsOwnProps & Omit<ComponentPropsWithoutRef<'div'>, keyof SelectTabsOwnProps>;
-export declare function SelectTabs({ tabs, value, onChange, end, className, ...rest }: SelectTabsProps): import("react").JSX.Element;
+export declare function SelectTabs({ tabs, value, onChange, end, panelId, className, onKeyDown, ...rest }: SelectTabsProps): import("react").JSX.Element;
 export {};

package/dist/SelectTabs.js

@@ -1,63 +1,88 @@
-import { useLayoutEffect as e, useRef as t, useState as n } from "react";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { formatSelectNumber as e, useSelectLocale as t } from "./SelectLocale.js";
+import { useLayoutEffect as n, useRef as r, useState as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/SelectTabs.tsx
-function a({ tabs: a, value: o, onChange: s, end: c, className: l, ...u }) {
-	let d = t(null), [f, p] = n({
+function s({ tabs: s, value: c, onChange: l, end: u, panelId: d, className: f, onKeyDown: p, ...m }) {
+	let h = t(), g = r(null), _ = r([]), [v, y] = i({
 		left: 0,
 		width: 0
-	});
-	e(() => {
-		let e = d.current;
+	}), b = s.findIndex((e) => e.id === c), x = s.map((e) => e.id).join("\0");
+	n(() => {
+		let e = g.current;
 		if (!e) return;
 		let t = () => {
 			let t = e.querySelector(".select-tab--active");
 			if (!t) {
-				p((e) => e.width === 0 ? e : {
+				y((e) => e.width === 0 ? e : {
 					left: e.left,
 					width: 0
 				});
 				return;
 			}
 			let n = t.offsetLeft, r = t.offsetWidth;
-			p((e) => e.left === n && e.width === r ? e : {
+			y((e) => e.left === n && e.width === r ? e : {
 				left: n,
 				width: r
 			});
 		};
 		t();
 		let n = typeof ResizeObserver < "u" ? new ResizeObserver(t) : null;
-		return n == null || n.observe(e), () => n == null ? void 0 : n.disconnect();
-	}, [o, a.length]);
-	let m = {
-		"--tab-ind-left": `${f.left}px`,
-		"--tab-ind-width": `${f.width}px`
+		return n == null || n.observe(e), _.current.forEach((e) => e && (n == null ? void 0 : n.observe(e))), () => n == null ? void 0 : n.disconnect();
+	}, [
+		c,
+		s.length,
+		x
+	]);
+	let S = (e) => {
+		var t;
+		if (p == null || p(e), e.defaultPrevented || !s.length) return;
+		let n = _.current.findIndex((t) => t === e.target);
+		if (n < 0) return;
+		let r = s.length - 1, i = e.key === "ArrowRight" ? (n + 1) % s.length : e.key === "ArrowLeft" ? (n - 1 + s.length) % s.length : e.key === "Home" ? 0 : e.key === "End" ? r : -1;
+		i < 0 || (e.preventDefault(), (t = _.current[i]) == null || t.focus(), s[i].id !== c && l(s[i].id));
+	}, C = {
+		"--tab-ind-left": `${v.left}px`,
+		"--tab-ind-width": `${v.width}px`
 	};
-	return /* @__PURE__ */ i("div", {
-		...u,
-		className: `select-tabs${l ? " " + l : ""}`,
+	return /* @__PURE__ */ o("div", {
+		...m,
+		className: `select-tabs${f ? " " + f : ""}`,
 		role: "tablist",
-		ref: d,
-		style: m,
-		children: [a.map((e) => {
-			let t = e.id === o;
-			return /* @__PURE__ */ i("button", {
+		ref: g,
+		style: C,
+		onKeyDown: S,
+		children: [s.map((t, n) => {
+			let r = t.id === c;
+			return /* @__PURE__ */ o("button", {
+				ref: (e) => {
+					_.current[n] = e;
+				},
 				type: "button",
 				role: "tab",
-				"aria-selected": t,
-				className: `select-tab${t ? " select-tab--active" : ""}`,
-				onClick: () => s(e.id),
-				children: [e.dot && /* @__PURE__ */ r("span", {
-					className: `select-tab__dot select-tab__dot--${e.dot}`,
-					"aria-hidden": "true"
-				}), e.label]
-			}, e.id);
-		}), c != null && /* @__PURE__ */ r("div", {
+				"aria-selected": r,
+				"aria-controls": d,
+				tabIndex: r || b < 0 && n === 0 ? 0 : -1,
+				className: `select-tab${r ? " select-tab--active" : ""}`,
+				onClick: () => l(t.id),
+				children: [
+					t.dot && /* @__PURE__ */ a("span", {
+						className: `select-tab__dot select-tab__dot--${t.dot}`,
+						"aria-hidden": "true"
+					}),
+					t.label,
+					t.count !== void 0 && /* @__PURE__ */ a("span", {
+						className: "select-tab__count",
+						children: e(t.count, h)
+					})
+				]
+			}, t.id);
+		}), u != null && /* @__PURE__ */ a("div", {
 			className: "select-tabs__end",
-			children: c
+			children: u
 		})]
 	});
 }
 //#endregion
-export { a as SelectTabs };
+export { s as SelectTabs };
 
 //# sourceMappingURL=SelectTabs.js.map