kaleido-ui 0.1.35 → 0.1.36

package/dist/web/index.cjs

@@ -6454,24 +6454,27 @@ function BtcUnifiedReceive({
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
-        "button",
-        {
-          type: "button",
-          className: cn(
-            "flex items-center gap-1 rounded-full border px-2.5 py-1 text-xxs font-bold uppercase tracking-widest transition-all",
-            copied ? "border-primary/30 bg-primary/10 text-primary" : "border-border bg-white/5 text-muted-foreground hover:border-white/20 hover:bg-accent hover:text-white"
-          ),
-          onClick: (event) => {
-            event.stopPropagation();
-            void copyToClipboard(accountReceiveResult.qrValue);
-          },
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Icon2, { name: copied ? "check" : "content_copy", size: "xs" }),
-            copied ? "Copied" : `Copy ${accountReceiveResult.qrLabel}`
-          ]
-        }
-      )
+      (() => {
+        const isQrCopied = copied === accountReceiveResult.qrValue;
+        return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
+          "button",
+          {
+            type: "button",
+            className: cn(
+              "flex items-center gap-1 rounded-full border px-2.5 py-1 text-xxs font-bold uppercase tracking-widest transition-all",
+              isQrCopied ? "border-primary/30 bg-primary/10 text-primary" : "border-border bg-white/5 text-muted-foreground hover:border-white/20 hover:bg-accent hover:text-white"
+            ),
+            onClick: (event) => {
+              event.stopPropagation();
+              void copyToClipboard(accountReceiveResult.qrValue);
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Icon2, { name: isQrCopied ? "check" : "content_copy", size: "xs" }),
+              isQrCopied ? "Copied" : `Copy ${accountReceiveResult.qrLabel}`
+            ]
+          }
+        );
+      })()
     ] }),
     invoiceStatus && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
       InvoiceStatusBanner,
@@ -6508,7 +6511,7 @@ function BtcUnifiedReceive({
                 ] }),
                 /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("p", { className: "mt-0.5 truncate font-mono text-tiny text-muted-foreground", children: address.value.length > 50 ? `${address.value.slice(0, 18)}...${address.value.slice(-14)}` : address.value })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(CopyIcon, { copied })
+              /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(CopyIcon, { copied: copied === address.value })
             ]
           },
           address.network
@@ -6668,24 +6671,27 @@ function DepositGeneratedView({
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
-        "button",
-        {
-          type: "button",
-          className: cn(
-            "flex items-center gap-1 rounded-full border px-2.5 py-1 text-xxs font-bold uppercase tracking-widest transition-all",
-            copied ? "border-primary/30 bg-primary/10 text-primary" : "border-border bg-white/5 text-muted-foreground hover:border-white/20 hover:bg-accent hover:text-white"
-          ),
-          onClick: (event) => {
-            event.stopPropagation();
-            void copyToClipboard(address);
-          },
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Icon2, { name: copied ? "check" : "content_copy", size: "xs" }),
-            copied ? "Copied" : network === "lightning" ? "Copy Invoice" : "Copy Address"
-          ]
-        }
-      )
+      (() => {
+        const isAddressCopied = copied === address;
+        return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
+          "button",
+          {
+            type: "button",
+            className: cn(
+              "flex items-center gap-1 rounded-full border px-2.5 py-1 text-xxs font-bold uppercase tracking-widest transition-all",
+              isAddressCopied ? "border-primary/30 bg-primary/10 text-primary" : "border-border bg-white/5 text-muted-foreground hover:border-white/20 hover:bg-accent hover:text-white"
+            ),
+            onClick: (event) => {
+              event.stopPropagation();
+              void copyToClipboard(address);
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Icon2, { name: isAddressCopied ? "check" : "content_copy", size: "xs" }),
+              isAddressCopied ? "Copied" : network === "lightning" ? "Copy Invoice" : "Copy Address"
+            ]
+          }
+        );
+      })()
     ] }),
     network === "lightning" && invoiceStatus && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
       InvoiceStatusBanner,
@@ -6714,7 +6720,7 @@ function DepositGeneratedView({
             /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("p", { className: cn("text-xxs font-bold uppercase tracking-widest", net.text), children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { "data-testid": "deposit-address-label", children: addressLabel }) }),
             /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("p", { className: "mt-0.5 truncate font-mono text-tiny text-muted-foreground", children: address.length > 50 ? `${address.slice(0, 18)}...${address.slice(-14)}` : address })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(CopyIcon, { copied })
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(CopyIcon, { copied: copied === address })
         ]
       }
     ),
@@ -6733,7 +6739,7 @@ function DepositGeneratedView({
             /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("p", { className: "text-xxs font-bold uppercase tracking-widest text-primary", children: "Recipient ID" }),
             /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("p", { className: "mt-0.5 truncate font-mono text-tiny text-muted-foreground", children: recipientId.length > 50 ? `${recipientId.slice(0, 18)}...${recipientId.slice(-14)}` : recipientId })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(CopyIcon, { copied })
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(CopyIcon, { copied: copied === recipientId })
         ]
       }
     ),

package/dist/web/index.d.cts

@@ -1162,7 +1162,13 @@ interface BtcUnifiedReceiveProps {
     amount: string;
     handleAmountChange: (event: ChangeEvent<HTMLInputElement>) => void;
     loading: boolean;
-    copied: boolean;
+    /**
+     * Identifier of the most recently copied value (the address/invoice text),
+     * or null when nothing was copied recently. Each row compares against its
+     * own value so the "Copied" affordance only highlights the row the user
+     * actually clicked.
+     */
+    copied: string | null;
     copyToClipboard: (text: string) => Promise<void>;
     setAddress: (value: string) => void;
     setAmount: (value: string) => void;
@@ -1200,7 +1206,13 @@ interface DepositGeneratedViewProps {
     amount: string;
     handleAmountChange: (event: ChangeEvent<HTMLInputElement>) => void;
     loading: boolean;
-    copied: boolean;
+    /**
+     * Identifier of the most recently copied value (the address/invoice text),
+     * or null when nothing was copied recently. Each row compares against its
+     * own value so the "Copied" affordance only highlights the row the user
+     * actually clicked.
+     */
+    copied: string | null;
     copyToClipboard: (text: string) => Promise<void>;
     getUnitLabel: () => string;
     selectedAsset: DepositGeneratedAsset | null;
@@ -1310,7 +1322,10 @@ interface DepositGenerationController {
     isInvoicePaid: boolean;
     isInvoiceFailedOrExpired: boolean;
     accountReceiveResult: BtcUnifiedReceiveResult | null;
-    copied: boolean;
+    /** Last-copied value (or null). Per-row matching prevents the "Copied"
+        affordance from appearing on every address row when only one was
+        clicked. */
+    copied: string | null;
     handleAmountChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
     generateInvoice: () => Promise<void>;
     copyToClipboard: (text: string) => Promise<void>;

package/dist/web/index.d.ts

@@ -1162,7 +1162,13 @@ interface BtcUnifiedReceiveProps {
     amount: string;
     handleAmountChange: (event: ChangeEvent<HTMLInputElement>) => void;
     loading: boolean;
-    copied: boolean;
+    /**
+     * Identifier of the most recently copied value (the address/invoice text),
+     * or null when nothing was copied recently. Each row compares against its
+     * own value so the "Copied" affordance only highlights the row the user
+     * actually clicked.
+     */
+    copied: string | null;
     copyToClipboard: (text: string) => Promise<void>;
     setAddress: (value: string) => void;
     setAmount: (value: string) => void;
@@ -1200,7 +1206,13 @@ interface DepositGeneratedViewProps {
     amount: string;
     handleAmountChange: (event: ChangeEvent<HTMLInputElement>) => void;
     loading: boolean;
-    copied: boolean;
+    /**
+     * Identifier of the most recently copied value (the address/invoice text),
+     * or null when nothing was copied recently. Each row compares against its
+     * own value so the "Copied" affordance only highlights the row the user
+     * actually clicked.
+     */
+    copied: string | null;
     copyToClipboard: (text: string) => Promise<void>;
     getUnitLabel: () => string;
     selectedAsset: DepositGeneratedAsset | null;
@@ -1310,7 +1322,10 @@ interface DepositGenerationController {
     isInvoicePaid: boolean;
     isInvoiceFailedOrExpired: boolean;
     accountReceiveResult: BtcUnifiedReceiveResult | null;
-    copied: boolean;
+    /** Last-copied value (or null). Per-row matching prevents the "Copied"
+        affordance from appearing on every address row when only one was
+        clicked. */
+    copied: string | null;
     handleAmountChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
     generateInvoice: () => Promise<void>;
     copyToClipboard: (text: string) => Promise<void>;

package/dist/web/index.js

@@ -6296,24 +6296,27 @@ function BtcUnifiedReceive({
           ]
         }
       ),
-      /* @__PURE__ */ jsxs46(
-        "button",
-        {
-          type: "button",
-          className: cn(
-            "flex items-center gap-1 rounded-full border px-2.5 py-1 text-xxs font-bold uppercase tracking-widest transition-all",
-            copied ? "border-primary/30 bg-primary/10 text-primary" : "border-border bg-white/5 text-muted-foreground hover:border-white/20 hover:bg-accent hover:text-white"
-          ),
-          onClick: (event) => {
-            event.stopPropagation();
-            void copyToClipboard(accountReceiveResult.qrValue);
-          },
-          children: [
-            /* @__PURE__ */ jsx60(Icon2, { name: copied ? "check" : "content_copy", size: "xs" }),
-            copied ? "Copied" : `Copy ${accountReceiveResult.qrLabel}`
-          ]
-        }
-      )
+      (() => {
+        const isQrCopied = copied === accountReceiveResult.qrValue;
+        return /* @__PURE__ */ jsxs46(
+          "button",
+          {
+            type: "button",
+            className: cn(
+              "flex items-center gap-1 rounded-full border px-2.5 py-1 text-xxs font-bold uppercase tracking-widest transition-all",
+              isQrCopied ? "border-primary/30 bg-primary/10 text-primary" : "border-border bg-white/5 text-muted-foreground hover:border-white/20 hover:bg-accent hover:text-white"
+            ),
+            onClick: (event) => {
+              event.stopPropagation();
+              void copyToClipboard(accountReceiveResult.qrValue);
+            },
+            children: [
+              /* @__PURE__ */ jsx60(Icon2, { name: isQrCopied ? "check" : "content_copy", size: "xs" }),
+              isQrCopied ? "Copied" : `Copy ${accountReceiveResult.qrLabel}`
+            ]
+          }
+        );
+      })()
     ] }),
     invoiceStatus && /* @__PURE__ */ jsx60(
       InvoiceStatusBanner,
@@ -6350,7 +6353,7 @@ function BtcUnifiedReceive({
                 ] }),
                 /* @__PURE__ */ jsx60("p", { className: "mt-0.5 truncate font-mono text-tiny text-muted-foreground", children: address.value.length > 50 ? `${address.value.slice(0, 18)}...${address.value.slice(-14)}` : address.value })
               ] }),
-              /* @__PURE__ */ jsx60(CopyIcon, { copied })
+              /* @__PURE__ */ jsx60(CopyIcon, { copied: copied === address.value })
             ]
           },
           address.network
@@ -6510,24 +6513,27 @@ function DepositGeneratedView({
           ]
         }
       ),
-      /* @__PURE__ */ jsxs47(
-        "button",
-        {
-          type: "button",
-          className: cn(
-            "flex items-center gap-1 rounded-full border px-2.5 py-1 text-xxs font-bold uppercase tracking-widest transition-all",
-            copied ? "border-primary/30 bg-primary/10 text-primary" : "border-border bg-white/5 text-muted-foreground hover:border-white/20 hover:bg-accent hover:text-white"
-          ),
-          onClick: (event) => {
-            event.stopPropagation();
-            void copyToClipboard(address);
-          },
-          children: [
-            /* @__PURE__ */ jsx61(Icon2, { name: copied ? "check" : "content_copy", size: "xs" }),
-            copied ? "Copied" : network === "lightning" ? "Copy Invoice" : "Copy Address"
-          ]
-        }
-      )
+      (() => {
+        const isAddressCopied = copied === address;
+        return /* @__PURE__ */ jsxs47(
+          "button",
+          {
+            type: "button",
+            className: cn(
+              "flex items-center gap-1 rounded-full border px-2.5 py-1 text-xxs font-bold uppercase tracking-widest transition-all",
+              isAddressCopied ? "border-primary/30 bg-primary/10 text-primary" : "border-border bg-white/5 text-muted-foreground hover:border-white/20 hover:bg-accent hover:text-white"
+            ),
+            onClick: (event) => {
+              event.stopPropagation();
+              void copyToClipboard(address);
+            },
+            children: [
+              /* @__PURE__ */ jsx61(Icon2, { name: isAddressCopied ? "check" : "content_copy", size: "xs" }),
+              isAddressCopied ? "Copied" : network === "lightning" ? "Copy Invoice" : "Copy Address"
+            ]
+          }
+        );
+      })()
     ] }),
     network === "lightning" && invoiceStatus && /* @__PURE__ */ jsx61(
       InvoiceStatusBanner,
@@ -6556,7 +6562,7 @@ function DepositGeneratedView({
             /* @__PURE__ */ jsx61("p", { className: cn("text-xxs font-bold uppercase tracking-widest", net.text), children: /* @__PURE__ */ jsx61("span", { "data-testid": "deposit-address-label", children: addressLabel }) }),
             /* @__PURE__ */ jsx61("p", { className: "mt-0.5 truncate font-mono text-tiny text-muted-foreground", children: address.length > 50 ? `${address.slice(0, 18)}...${address.slice(-14)}` : address })
           ] }),
-          /* @__PURE__ */ jsx61(CopyIcon, { copied })
+          /* @__PURE__ */ jsx61(CopyIcon, { copied: copied === address })
         ]
       }
     ),
@@ -6575,7 +6581,7 @@ function DepositGeneratedView({
             /* @__PURE__ */ jsx61("p", { className: "text-xxs font-bold uppercase tracking-widest text-primary", children: "Recipient ID" }),
             /* @__PURE__ */ jsx61("p", { className: "mt-0.5 truncate font-mono text-tiny text-muted-foreground", children: recipientId.length > 50 ? `${recipientId.slice(0, 18)}...${recipientId.slice(-14)}` : recipientId })
           ] }),
-          /* @__PURE__ */ jsx61(CopyIcon, { copied })
+          /* @__PURE__ */ jsx61(CopyIcon, { copied: copied === recipientId })
         ]
       }
     ),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kaleido-ui",
-  "version": "0.1.35",
+  "version": "0.1.36",
   "description": "KaleidoSwap shared UI library — design tokens, web components (Tailwind + Radix), and React Native components extending WDK UI Kit",
   "license": "MIT",
   "type": "module",