@selectwin/kit 0.1.214 → 0.1.216

package/dist/SelectCodeBlock.d.ts

@@ -12,6 +12,8 @@ type SelectCodeBlockOwnProps = {
     copyable?: boolean;
     /** `critical` = o bloco fica sobre um aviso vermelho (a resposta de uma falha). */
     tone?: 'neutral' | 'critical';
+    /** 0.1.216: o nome do botão de copiar (padrão "Copiar"): com vários blocos na tela, diga qual ("Copiar: Node.js"). */
+    copyLabel?: string;
 };
 export type SelectCodeBlockProps = SelectCodeBlockOwnProps & Omit<ComponentPropsWithoutRef<'div'>, keyof SelectCodeBlockOwnProps>;
 /** JSON válido → indentado; qualquer outra coisa → como veio. */

package/dist/SelectCodeBlock.js

@@ -1,51 +1,42 @@
 /* empty css           */
-import { CheckIcon as e, CopyIcon as t } from "./icons.js";
-import { useSelectMessages as n } from "./SelectLocale.js";
-import { SelectIconButton as r } from "./SelectIconButton.js";
-import { forwardRef as i, useState as a } from "react";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { SelectCopyButton as e } from "./SelectCopyButton.js";
+import { forwardRef as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/SelectCodeBlock.tsx
-function c(e) {
+function i(e) {
 	try {
 		return JSON.stringify(JSON.parse(e), null, 2);
 	} catch {
 		return e;
 	}
 }
-var l = i(function({ value: i, label: l, pretty: u = !1, maxHeight: d = 14, copyable: f = !0, tone: p = "neutral", className: m, style: h, ...g }, _) {
-	let v = n(), [y, b] = a(!1), x = u ? c(i) : i, S = () => {
-		var e;
-		(e = navigator.clipboard) == null || e.writeText(x).then(() => {
-			b(!0), setTimeout(() => b(!1), 1200);
-		});
-	};
-	return /* @__PURE__ */ s("div", {
-		ref: _,
-		...g,
-		className: `select-codeblock${p === "critical" ? " select-codeblock--critical" : ""}${m ? " " + m : ""}`,
-		style: h,
-		children: [l != null && /* @__PURE__ */ o("span", {
+var a = t(function({ value: t, label: a, pretty: o = !1, maxHeight: s = 14, copyable: c = !0, tone: l = "neutral", copyLabel: u, className: d, style: f, ...p }, m) {
+	let h = o ? i(t) : t;
+	return /* @__PURE__ */ r("div", {
+		ref: m,
+		...p,
+		className: `select-codeblock${l === "critical" ? " select-codeblock--critical" : ""}${d ? " " + d : ""}`,
+		style: f,
+		children: [a != null && /* @__PURE__ */ n("span", {
 			className: "select-codeblock__label",
-			children: l
-		}), /* @__PURE__ */ s("div", {
+			children: a
+		}), /* @__PURE__ */ r("div", {
 			className: "select-codeblock__box",
-			children: [/* @__PURE__ */ o("pre", {
+			children: [/* @__PURE__ */ n("pre", {
 				className: "select-codeblock__pre",
-				style: { maxHeight: `${d}rem` },
-				children: x
-			}), f && /* @__PURE__ */ o("span", {
+				style: { maxHeight: `${s}rem` },
+				children: h
+			}), c && /* @__PURE__ */ n("span", {
 				className: "select-codeblock__copy",
-				children: /* @__PURE__ */ o(r, {
-					size: "sm",
-					icon: o(y ? e : t, {}),
-					label: y ? v.common.copied : v.common.copy,
-					onClick: S
+				children: /* @__PURE__ */ n(e, {
+					value: h,
+					...u ? { label: u } : {}
 				})
 			})]
 		})]
 	});
 });
 //#endregion
-export { l as SelectCodeBlock, c as prettyCode };
+export { a as SelectCodeBlock, i as prettyCode };
 
 //# sourceMappingURL=SelectCodeBlock.js.map

package/dist/SelectCopyButton.d.ts

@@ -0,0 +1,14 @@
+export interface SelectCopyButtonProps {
+    /** O que vai para a área de transferência. */
+    value: string;
+    /** O nome do botão (e o texto, com `showLabel`). Padrão: "Copiar". */
+    label?: string;
+    /** O botão com o texto ao lado do ícone, em vez do ícone sozinho. */
+    showLabel?: boolean;
+    size?: 'sm' | 'md';
+    /** Depois de copiar (um aviso de quem usa); a cópia em si é do botão. */
+    onCopy?: (value: string) => void;
+    disabled?: boolean;
+    className?: string;
+}
+export declare function SelectCopyButton({ value, label: labelProp, showLabel, size, onCopy, disabled, className }: SelectCopyButtonProps): import("react").JSX.Element;

package/dist/SelectCopyButton.js

@@ -0,0 +1,41 @@
+/* empty css           */
+import { SelectButton as e } from "./SelectButton.js";
+import { CheckIcon as t, CopyIcon as n } from "./icons.js";
+import { useSelectMessages as r } from "./SelectLocale.js";
+import { SelectIconButton as i } from "./SelectIconButton.js";
+import { useClipboard as a } from "./internal/clipboard.js";
+import { useRef as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/SelectCopyButton.tsx
+function l({ value: l, label: u, showLabel: d = !1, size: f = "sm", onCopy: p, disabled: m = !1, className: h }) {
+	let g = r().common, _ = u ?? g.copy, v = o(null), { state: y, copy: b } = a(), x = async () => {
+		await b(l, v.current) && (p == null || p(l));
+	}, S = s(y === "copied" ? t : n, {});
+	return /* @__PURE__ */ c("span", {
+		ref: v,
+		className: `select-copybtn${y === "copied" ? " is-copied" : ""}${h ? " " + h : ""}`,
+		children: [d ? /* @__PURE__ */ s(e, {
+			variant: "secondary",
+			size: f,
+			inline: !0,
+			icon: S,
+			onClick: x,
+			disabled: m,
+			children: y === "copied" ? g.copied : _
+		}) : /* @__PURE__ */ s(i, {
+			size: f,
+			icon: S,
+			label: _,
+			onClick: x,
+			disabled: m
+		}), /* @__PURE__ */ s("span", {
+			role: "status",
+			className: "select-copybtn__status",
+			children: y === "copied" ? g.copied : y === "failed" ? g.copyFailed : ""
+		})]
+	});
+}
+//#endregion
+export { l as SelectCopyButton };
+
+//# sourceMappingURL=SelectCopyButton.js.map

package/dist/SelectCopyRow.d.ts

@@ -12,6 +12,16 @@ type SelectCopyRowOwnProps = {
     prose?: boolean;
     /** Onde cortar quando não cabe: no fim (padrão) ou no começo — para link e id, cuja parte que distingue é o fim. */
     truncate?: 'end' | 'start';
+    /** 0.1.216: o nome do botão de copiar (padrão "Copiar"): com vários na tela, diga o quê. */
+    copyLabel?: string;
+    /** 0.1.216: o valor inteiro, quebrando a linha onde precisar (sem reticências), na fonte mono. */
+    wrap?: boolean;
+    /**
+     * 0.1.216: o valor fica escondido (pontos) até o olho; o copiar leva o valor de verdade. `secretName` dá o nome para o
+     * leitor de tela ("client secret escondido", "Mostrar client secret").
+     */
+    secret?: boolean;
+    secretName?: string;
 };
 export type SelectCopyRowProps = SelectCopyRowOwnProps & Omit<ComponentPropsWithoutRef<'div'>, keyof SelectCopyRowOwnProps>;
 export declare const SelectCopyRow: import('react').ForwardRefExoticComponent<SelectCopyRowOwnProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof SelectCopyRowOwnProps> & import('react').RefAttributes<HTMLDivElement>>;

package/dist/SelectCopyRow.js

@@ -1,61 +1,65 @@
-import { SelectButton as e } from "./SelectButton.js";
-import { safeHref as t } from "./internal/safeHref.js";
-import { CheckIcon as n, CopyIcon as r, ExternalLinkIcon as i } from "./icons.js";
-import { useSelectMessages as a } from "./SelectLocale.js";
-import { SelectIconButton as o } from "./SelectIconButton.js";
+import { safeHref as e } from "./internal/safeHref.js";
+import { ExternalLinkIcon as t, EyeIcon as n, EyeOffIcon as r } from "./icons.js";
+import { useSelectMessages as i } from "./SelectLocale.js";
+import { SelectIconButton as a } from "./SelectIconButton.js";
+import { SelectCopyButton as o } from "./SelectCopyButton.js";
 import { forwardRef as s, useState as c } from "react";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/SelectCopyRow.tsx
-var d = s(function({ label: s, value: d, href: f, onCopy: p, prose: m = !1, truncate: h = "end", className: g, ..._ }, v) {
-	let y = a(), [b, x] = c(!1), S = t(f), C = () => {
-		navigator.clipboard.writeText(d).then(() => {
-			x(!0), setTimeout(() => x(!1), 1200), p == null || p(d);
-		});
-	};
-	return /* @__PURE__ */ u("div", {
-		ref: v,
-		..._,
-		className: `select-copyrow${m ? " select-copyrow--prose" : ""}${h === "start" && !m ? " select-copyrow--truncate-start" : ""}${g ? " " + g : ""}`,
-		children: [s && /* @__PURE__ */ l("span", {
+var f = s(function({ label: s, value: f, href: p, onCopy: m, prose: h = !1, truncate: g = "end", copyLabel: _, wrap: v = !1, secret: y = !1, secretName: b, className: x, ...S }, C) {
+	let w = i(), [T, E] = c(!1), D = e(p), O = b ?? s ?? w.copyable.secret, k = y && !T, A = g === "start" && !h && !v;
+	return /* @__PURE__ */ d("div", {
+		ref: C,
+		...S,
+		className: `select-copyrow${h ? " select-copyrow--prose" : ""}${A ? " select-copyrow--truncate-start" : ""}${v ? " select-copyrow--wrap" : ""}${x ? " " + x : ""}`,
+		children: [s && /* @__PURE__ */ u("span", {
 			className: "select-copyrow__label",
 			children: s
-		}), /* @__PURE__ */ u("div", {
+		}), /* @__PURE__ */ d("div", {
 			className: "select-copyrow__value",
-			children: [/* @__PURE__ */ l("span", {
+			children: [/* @__PURE__ */ u("span", {
 				className: "select-copyrow__text",
-				title: h === "start" && !m ? d : void 0,
-				children: h === "start" && !m ? /* @__PURE__ */ l("bdi", {
+				title: A && !k ? f : void 0,
+				children: k ? /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u("span", {
+					"aria-hidden": "true",
+					children: "•".repeat(Math.min(32, f.length))
+				}), /* @__PURE__ */ u("span", {
+					className: "select-copybtn__status",
+					children: w.copyable.concealed(O)
+				})] }) : A ? /* @__PURE__ */ u("bdi", {
 					dir: "ltr",
-					children: d
-				}) : d
-			}), /* @__PURE__ */ u("div", {
+					children: f
+				}) : f
+			}), /* @__PURE__ */ d("div", {
 				className: "select-copyrow__actions",
-				children: [S && /* @__PURE__ */ l("a", {
-					className: "select-iconbtn select-iconbtn--sm",
-					href: S,
-					target: "_blank",
-					rel: "noreferrer",
-					"aria-label": y.common.open,
-					title: y.common.open,
-					children: /* @__PURE__ */ l(i, {})
-				}), m ? /* @__PURE__ */ l(e, {
-					variant: "secondary",
-					size: "sm",
-					inline: !0,
-					icon: l(b ? n : r, {}),
-					onClick: C,
-					children: b ? y.common.copied : y.common.copy
-				}) : /* @__PURE__ */ l(o, {
-					size: "sm",
-					icon: l(b ? n : r, {}),
-					label: b ? y.common.copied : y.common.copy,
-					onClick: C
-				})]
+				children: [
+					D && /* @__PURE__ */ u("a", {
+						className: "select-iconbtn select-iconbtn--sm",
+						href: D,
+						target: "_blank",
+						rel: "noreferrer",
+						"aria-label": w.common.open,
+						title: w.common.open,
+						children: /* @__PURE__ */ u(t, {})
+					}),
+					y && /* @__PURE__ */ u(a, {
+						size: "sm",
+						icon: u(T ? r : n, {}),
+						label: T ? w.copyable.conceal(O) : w.copyable.reveal(O),
+						onClick: () => E((e) => !e)
+					}),
+					/* @__PURE__ */ u(o, {
+						value: f,
+						..._ ? { label: _ } : {},
+						showLabel: h,
+						...m ? { onCopy: m } : {}
+					})
+				]
 			})]
 		})]
 	});
 });
 //#endregion
-export { d as SelectCopyRow };
+export { f as SelectCopyRow };
 
 //# sourceMappingURL=SelectCopyRow.js.map

package/dist/SelectLocale.d.ts

@@ -8,6 +8,8 @@ export interface SelectKitMessages {
         save: string;
         copy: string;
         copied: string;
+        /** 0.1.216: a área de transferência recusou (o botão de copiar diz ao leitor de tela). */
+        copyFailed: string;
         open: string;
         back: string;
         actions: string;
@@ -60,6 +62,11 @@ export interface SelectKitMessages {
     copyable: {
         copyCode: string;
         copyId: string;
+        /** 0.1.216: o valor escondido do SelectCopyRow `secret` (o nome padrão, e o que o olho e o leitor de tela dizem). */
+        secret: string;
+        reveal: (name: string) => string;
+        conceal: (name: string) => string;
+        concealed: (name: string) => string;
     };
     assistant: {
         send: string;

package/dist/SelectLocale.js

@@ -8,6 +8,7 @@ var r = {
 			confirm: "Confirmar",
 			save: "Salvar",
 			copy: "Copiar",
+			copyFailed: "Não deu para copiar",
 			copied: "Copiado",
 			open: "Abrir",
 			back: "Voltar",
@@ -58,7 +59,11 @@ var r = {
 		},
 		copyable: {
 			copyCode: "Copiar código",
-			copyId: "Copiar id"
+			copyId: "Copiar id",
+			secret: "o segredo",
+			reveal: (e) => `Mostrar ${e}`,
+			conceal: (e) => `Esconder ${e}`,
+			concealed: (e) => `${e} escondido`
 		},
 		assistant: {
 			send: "Enviar",
@@ -96,6 +101,7 @@ var r = {
 			confirm: "Confirm",
 			save: "Save",
 			copy: "Copy",
+			copyFailed: "Couldn't copy",
 			copied: "Copied",
 			open: "Open",
 			back: "Back",
@@ -146,7 +152,11 @@ var r = {
 		},
 		copyable: {
 			copyCode: "Copy code",
-			copyId: "Copy ID"
+			copyId: "Copy ID",
+			secret: "the secret",
+			reveal: (e) => `Show ${e}`,
+			conceal: (e) => `Hide ${e}`,
+			concealed: (e) => `${e} hidden`
 		},
 		assistant: {
 			send: "Send",

package/dist/SelectTooltip.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { SelectPlacement } from './positioning';
-export declare function SelectTooltip({ content, children, placement, delay, openOnClick, disabled, }: {
+export declare function SelectTooltip({ content, children, placement, delay, openOnClick, disabled, focusable, }: {
     content: ReactNode;
     children: ReactNode;
     placement?: SelectPlacement;
@@ -12,4 +12,6 @@ export declare function SelectTooltip({ content, children, placement, delay, ope
     /** Não abre (0.1.188): o gatilho já mostra o mesmo conteúdo noutro lugar (ex.: o painel de páginas do trilho aberto
      *  ao lado do ícone). O embrulho continua no lugar, então o gatilho não remonta nem perde o foco. */
     disabled?: boolean;
+    /** 0.1.215: o embrulho recebe o foco (o filho não é focável): o Tab chega na dica, e ela abre no foco do teclado. */
+    focusable?: boolean;
 }): import("react").JSX.Element;

package/dist/SelectTooltip.js

@@ -14,77 +14,78 @@ function f(e) {
 		return !0;
 	}
 }
-function p({ content: p, children: m, placement: h = "top", delay: g = 250, openOnClick: _ = !1, disabled: v = !1 }) {
-	let [y, b] = o(!1), [x, S] = o(!1), [C, w] = o(!1), T = !v && (x || y && !C), E = a(null), D = a(null), O = a(null), [k, A] = o(null), j = r(), M = () => {
-		d() && (O.current && clearTimeout(O.current), O.current = setTimeout(() => b(!0), g));
-	}, N = () => {
-		O.current && clearTimeout(O.current), b(!1), w(!1);
+function p({ content: p, children: m, placement: h = "top", delay: g = 250, openOnClick: _ = !1, disabled: v = !1, focusable: y = !1 }) {
+	let [b, x] = o(!1), [S, C] = o(!1), [w, T] = o(!1), E = !v && (S || b && !w), D = a(null), O = a(null), k = a(null), [A, j] = o(null), M = r(), N = () => {
+		d() && (k.current && clearTimeout(k.current), k.current = setTimeout(() => x(!0), g));
 	}, P = () => {
-		_ && (O.current && clearTimeout(O.current), T ? (S(!1), b(!1), w(!0)) : S(!0));
+		k.current && clearTimeout(k.current), x(!1), T(!1);
+	}, F = () => {
+		_ && (k.current && clearTimeout(k.current), E ? (C(!1), x(!1), T(!0)) : C(!0));
 	};
 	n(() => () => {
-		O.current && clearTimeout(O.current);
+		k.current && clearTimeout(k.current);
 	}, []);
-	let F = t(() => {
+	let I = t(() => {
 		var t;
-		let n = ((t = E.current) == null ? void 0 : t.firstElementChild) ?? E.current, r = D.current;
+		let n = ((t = D.current) == null ? void 0 : t.firstElementChild) ?? D.current, r = O.current;
 		if (!n || !r) return;
 		let i = e(n.getBoundingClientRect(), {
 			width: r.offsetWidth,
 			height: r.offsetHeight
 		}, h, 6);
-		A({
+		j({
 			top: i.top,
 			left: i.left
 		});
 	}, [h]);
 	return i(() => {
-		if (!T) {
-			A(null);
+		if (!E) {
+			j(null);
 			return;
 		}
-		F();
-	}, [T, F]), n(() => {
-		if (!T) return;
-		let e = () => F();
+		I();
+	}, [E, I]), n(() => {
+		if (!E) return;
+		let e = () => I();
 		return window.addEventListener("scroll", e, !0), window.addEventListener("resize", e), () => {
 			window.removeEventListener("scroll", e, !0), window.removeEventListener("resize", e);
 		};
-	}, [T, F]), n(() => {
-		if (!T) return;
+	}, [E, I]), n(() => {
+		if (!E) return;
 		let e = (e) => {
-			e.key === "Escape" && (S(!1), b(!1));
+			e.key === "Escape" && (C(!1), x(!1));
 		};
 		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
-	}, [T]), n(() => {
-		if (!x) return;
+	}, [E]), n(() => {
+		if (!S) return;
 		let e = (e) => {
 			var t, n;
 			let r = e.target;
-			(t = E.current) != null && t.contains(r) || (n = D.current) != null && n.contains(r) || (S(!1), b(!1));
+			(t = D.current) != null && t.contains(r) || (n = O.current) != null && n.contains(r) || (C(!1), x(!1));
 		};
 		return document.addEventListener("mousedown", e, !0), () => document.removeEventListener("mousedown", e, !0);
-	}, [x]), /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c("span", {
+	}, [S]), /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c("span", {
 		className: "select-tip__trigger",
-		ref: E,
-		onMouseEnter: M,
-		onMouseLeave: N,
+		ref: D,
+		onMouseEnter: N,
+		onMouseLeave: P,
 		onFocusCapture: (e) => {
-			f(e.target) && b(!0);
+			f(e.target) && x(!0);
 		},
-		onBlurCapture: N,
-		onClick: _ ? P : void 0,
-		"aria-describedby": T ? j : void 0,
+		onBlurCapture: P,
+		onClick: _ ? F : void 0,
+		tabIndex: y ? 0 : void 0,
+		"aria-describedby": E ? M : void 0,
 		children: m
-	}), T && u(/* @__PURE__ */ c("div", {
-		ref: D,
-		id: j,
+	}), E && u(/* @__PURE__ */ c("div", {
+		ref: O,
+		id: M,
 		role: "tooltip",
-		className: `select select-tip${x ? " select-tip--pinned" : ""}`,
-		style: k ? {
+		className: `select select-tip${S ? " select-tip--pinned" : ""}`,
+		style: A ? {
 			position: "fixed",
-			top: k.top,
-			left: k.left
+			top: A.top,
+			left: A.left
 		} : {
 			position: "fixed",
 			top: 0,

package/dist/index.d.ts

@@ -74,6 +74,9 @@ export { SelectTable, SelectTableRow, SelectTableCell, SelectTableEmpty, SelectU
 export { SelectMenu, SelectMenuItem, SelectMenuLink, SelectMenuHeading, SelectMenuDivider, SelectMenuButton } from './SelectMenu';
 export { SelectFilterChip } from './SelectFilterChip';
 export { SelectCopyRow } from './SelectCopyRow';
+export type { SelectCopyRowProps } from './SelectCopyRow';
+export { SelectCopyButton } from './SelectCopyButton';
+export type { SelectCopyButtonProps } from './SelectCopyButton';
 export { SelectCodeBlock, prettyCode } from './SelectCodeBlock';
 export type { SelectCodeBlockProps } from './SelectCodeBlock';
 export { SelectCopyableId } from './SelectCopyableId';