@selectwin/kit 0.1.215 → 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/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';