kaleido-ui 0.1.13 → 0.1.15

package/dist/css/kaleido-ui.css

@@ -171,6 +171,8 @@
   --font-sans:    'Satoshi', system-ui, -apple-system, sans-serif;
   --font-display: 'Satoshi', system-ui, -apple-system, sans-serif;
   --font-mono:    'Geist Mono', monospace;
+  --text-mini: 9px;
+  --text-mini--line-height: 12px;
   --text-xxs: 10px;
   --text-xxs--line-height: 14px;
   --text-tiny: 11px;

package/dist/native/index.cjs

@@ -314,6 +314,7 @@ var fontFamily = {
   mono: "'Geist Mono', monospace"
 };
 var typeScale = {
+  mini: ["9px", "12px"],
   xxs: ["10px", "14px"],
   tiny: ["11px", "16px"],
   caption: ["13px", "18px"],

package/dist/native/index.d.cts

@@ -216,6 +216,7 @@ declare const fontFamily: {
  * Type scale — [fontSize, lineHeight]
  */
 declare const typeScale: {
+    readonly mini: readonly ["9px", "12px"];
     readonly xxs: readonly ["10px", "14px"];
     readonly tiny: readonly ["11px", "16px"];
     readonly caption: readonly ["13px", "18px"];

package/dist/native/index.d.ts

@@ -216,6 +216,7 @@ declare const fontFamily: {
  * Type scale — [fontSize, lineHeight]
  */
 declare const typeScale: {
+    readonly mini: readonly ["9px", "12px"];
     readonly xxs: readonly ["10px", "14px"];
     readonly tiny: readonly ["11px", "16px"];
     readonly caption: readonly ["13px", "18px"];

package/dist/native/index.js

@@ -276,6 +276,7 @@ var fontFamily = {
   mono: "'Geist Mono', monospace"
 };
 var typeScale = {
+  mini: ["9px", "12px"],
   xxs: ["10px", "14px"],
   tiny: ["11px", "16px"],
   caption: ["13px", "18px"],

package/dist/tokens/index.cjs

@@ -177,6 +177,7 @@ var fontFamily = {
   mono: "'Geist Mono', monospace"
 };
 var typeScale = {
+  mini: ["9px", "12px"],
   xxs: ["10px", "14px"],
   tiny: ["11px", "16px"],
   caption: ["13px", "18px"],

package/dist/tokens/index.d.cts

@@ -142,6 +142,7 @@ declare const fontFamily: {
  * Type scale — [fontSize, lineHeight]
  */
 declare const typeScale: {
+    readonly mini: readonly ["9px", "12px"];
     readonly xxs: readonly ["10px", "14px"];
     readonly tiny: readonly ["11px", "16px"];
     readonly caption: readonly ["13px", "18px"];

package/dist/tokens/index.d.ts

@@ -142,6 +142,7 @@ declare const fontFamily: {
  * Type scale — [fontSize, lineHeight]
  */
 declare const typeScale: {
+    readonly mini: readonly ["9px", "12px"];
     readonly xxs: readonly ["10px", "14px"];
     readonly tiny: readonly ["11px", "16px"];
     readonly caption: readonly ["13px", "18px"];

package/dist/tokens/index.js

@@ -136,6 +136,7 @@ var fontFamily = {
   mono: "'Geist Mono', monospace"
 };
 var typeScale = {
+  mini: ["9px", "12px"],
   xxs: ["10px", "14px"],
   tiny: ["11px", "16px"],
   caption: ["13px", "18px"],

package/dist/web/index.cjs

@@ -2062,7 +2062,7 @@ function FilterDropdown({
             "span",
             {
               className: cn(
-                "shrink-0 text-xxs font-black uppercase tracking-wide",
+                "shrink-0 text-mini font-bold uppercase tracking-wider",
                 isFiltered ? "text-muted-foreground" : "text-white/45"
               ),
               children: label
@@ -5207,7 +5207,8 @@ function DepositGeneratedView({
   setAddress,
   setRecipientId,
   setAmount,
-  setInvoiceStatus
+  setInvoiceStatus,
+  onRegenerate
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "space-y-3 animate-in fade-in zoom-in-95 duration-300", children: [
     (network === "lightning" || network === "arkade" && arkSubMode === "ark") && isBtc && /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "flex flex-col gap-1.5 rounded-xl border border-white/8 bg-white/3 p-2.5", children: [
@@ -5279,7 +5280,10 @@ function DepositGeneratedView({
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(QrCode, { value: address, size: 188 }),
-            isInvoicePaid && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(PaidOverlay, {})
+            isInvoicePaid && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(PaidOverlay, {}),
+            loading && !isInvoicePaid && // Loading scrim — sits over the QR while a fresh address/invoice
+            // is being fetched (e.g. after the New Address button).
+            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "absolute inset-0 flex items-center justify-center rounded-2xl bg-white/80 backdrop-blur-sm", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "material-symbols-outlined animate-spin text-icon-3xl text-network-bitcoin", children: "progress_activity" }) })
           ]
         }
       ),
@@ -5352,22 +5356,31 @@ function DepositGeneratedView({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "flex justify-center pt-1", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "flex justify-center pt-1", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
       "button",
       {
         type: "button",
+        "aria-label": `New ${network === "lightning" ? "invoice" : "address"}`,
+        title: `New ${network === "lightning" ? "invoice" : "address"}`,
+        disabled: loading,
         onClick: () => {
+          if (onRegenerate) {
+            void onRegenerate();
+            return;
+          }
           setAddress("");
           setRecipientId("");
           setAmount("");
           setInvoiceStatus(null);
         },
-        className: "flex items-center justify-center gap-1.5 rounded-xl bg-primary/15 px-5 py-3 text-xs font-bold text-primary transition-all hover:bg-primary/25 active:scale-[0.98]",
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "material-symbols-outlined text-icon-sm", children: "refresh" }),
-          "New ",
-          network === "lightning" ? "Invoice" : "Address"
-        ]
+        className: "flex size-10 items-center justify-center rounded-full bg-primary/15 text-primary transition-all hover:bg-primary/25 active:scale-[0.98] disabled:opacity-50",
+        children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+          "span",
+          {
+            className: cn("material-symbols-outlined text-icon-md", loading && "animate-spin"),
+            children: "refresh"
+          }
+        )
       }
     ) })
   ] });
@@ -6024,49 +6037,53 @@ function DepositInvoiceGeneration({
         ] })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "flex-shrink-0 border-b border-border bg-background px-4 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("p", { className: "text-xxs font-bold uppercase tracking-widest text-white/35", children: "Destination Account" }),
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "mt-1.5 flex gap-1.5 overflow-x-auto no-scrollbar", children: availableAccounts.map((account) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-          AccountChoiceChip,
-          {
-            account,
-            active: isBtc ? btcSelectedAccount === account : selectedAccount === account,
-            onClick: () => {
-              if (isBtc) {
-                if (account === "SPARK") {
-                  setWalletChoice("SPARK");
-                  setNetwork("spark");
-                } else if (account === "ARKADE") {
-                  setNetwork("arkade");
-                  setWalletChoice("RGB");
+    (() => {
+      const hideDestinationRail = isNewAsset && (network === "spark" || network === "arkade");
+      if (hideDestinationRail) return null;
+      return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "flex-shrink-0 border-b border-border bg-background px-4 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("p", { className: "text-xxs font-bold uppercase tracking-widest text-white/35", children: "Destination Account" }),
+          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "mt-1.5 flex gap-1.5 overflow-x-auto no-scrollbar", children: availableAccounts.map((account) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+            AccountChoiceChip,
+            {
+              account,
+              active: isBtc ? btcSelectedAccount === account : selectedAccount === account,
+              onClick: () => {
+                if (isBtc) {
+                  if (account === "SPARK") {
+                    setWalletChoice("SPARK");
+                    setNetwork("spark");
+                  } else if (account === "ARKADE") {
+                    setNetwork("arkade");
+                    setWalletChoice("RGB");
+                  } else {
+                    setWalletChoice("RGB");
+                    setNetwork("onchain");
+                  }
                 } else {
-                  setWalletChoice("RGB");
-                  setNetwork("onchain");
+                  handleAccountSelect(account);
                 }
-              } else {
-                handleAccountSelect(account);
               }
-            }
-          },
-          account
-        )) })
-      ] }),
-      !isBtc && !(isNewAsset && (network === "spark" || network === "arkade")) && /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("p", { className: "text-xxs font-bold uppercase tracking-widest text-white/35", children: "Transfer Method" }),
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "mt-1.5 flex gap-1.5 overflow-x-auto no-scrollbar", children: methodOptions.map(({ method, enabled, disabledReason }) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-          MethodChoiceChip,
-          {
-            method,
-            active: currentMethod === method,
-            enabled,
-            disabledReason,
-            onClick: () => enabled && applyMethodSelection(selectedAccount, method)
-          },
-          method
-        )) })
-      ] })
-    ] }) }),
+            },
+            account
+          )) })
+        ] }),
+        !isBtc && !(isNewAsset && (network === "spark" || network === "arkade")) && /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("p", { className: "text-xxs font-bold uppercase tracking-widest text-white/35", children: "Transfer Method" }),
+          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "mt-1.5 flex gap-1.5 overflow-x-auto no-scrollbar", children: methodOptions.map(({ method, enabled, disabledReason }) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+            MethodChoiceChip,
+            {
+              method,
+              active: currentMethod === method,
+              enabled,
+              disabledReason,
+              onClick: () => enabled && applyMethodSelection(selectedAccount, method)
+            },
+            method
+          )) })
+        ] })
+      ] }) });
+    })(),
     /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ScrollArea, { className: "flex-1", viewportAs: "main", viewportClassName: "space-y-2.5 px-4 py-2.5", children: isBtc && accountReceiveResult ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
       BtcUnifiedReceive,
       {

package/dist/web/index.d.cts

@@ -1142,8 +1142,15 @@ interface DepositGeneratedViewProps {
      * compatibility — it is no longer invoked.
      */
     handleDone?: () => void;
+    /**
+     * Optional regenerate callback. When provided, the "New Address" button
+     * calls it directly (instead of just clearing local state via the
+     * setters above). Required for flows whose auto-generation effect does
+     * not refire on cleared state — e.g. RGB on-chain.
+     */
+    onRegenerate?: () => Promise<void> | void;
 }
-declare function DepositGeneratedView({ network, net, isBtc, address, addressLabel, recipientId, arkSubMode, invoiceStatus, isInvoicePending, isInvoicePaid, isInvoiceFailedOrExpired, amount, handleAmountChange, loading, copied, copyToClipboard, getUnitLabel, selectedAsset, maxDepositAmount, setAddress, setRecipientId, setAmount, setInvoiceStatus, }: DepositGeneratedViewProps): react_jsx_runtime.JSX.Element;
+declare function DepositGeneratedView({ network, net, isBtc, address, addressLabel, recipientId, arkSubMode, invoiceStatus, isInvoicePending, isInvoicePaid, isInvoiceFailedOrExpired, amount, handleAmountChange, loading, copied, copyToClipboard, getUnitLabel, selectedAsset, maxDepositAmount, setAddress, setRecipientId, setAmount, setInvoiceStatus, onRegenerate, }: DepositGeneratedViewProps): react_jsx_runtime.JSX.Element;
 
 interface DepositPreGenerationAsset {
     ticker?: string;

package/dist/web/index.d.ts

@@ -1142,8 +1142,15 @@ interface DepositGeneratedViewProps {
      * compatibility — it is no longer invoked.
      */
     handleDone?: () => void;
+    /**
+     * Optional regenerate callback. When provided, the "New Address" button
+     * calls it directly (instead of just clearing local state via the
+     * setters above). Required for flows whose auto-generation effect does
+     * not refire on cleared state — e.g. RGB on-chain.
+     */
+    onRegenerate?: () => Promise<void> | void;
 }
-declare function DepositGeneratedView({ network, net, isBtc, address, addressLabel, recipientId, arkSubMode, invoiceStatus, isInvoicePending, isInvoicePaid, isInvoiceFailedOrExpired, amount, handleAmountChange, loading, copied, copyToClipboard, getUnitLabel, selectedAsset, maxDepositAmount, setAddress, setRecipientId, setAmount, setInvoiceStatus, }: DepositGeneratedViewProps): react_jsx_runtime.JSX.Element;
+declare function DepositGeneratedView({ network, net, isBtc, address, addressLabel, recipientId, arkSubMode, invoiceStatus, isInvoicePending, isInvoicePaid, isInvoiceFailedOrExpired, amount, handleAmountChange, loading, copied, copyToClipboard, getUnitLabel, selectedAsset, maxDepositAmount, setAddress, setRecipientId, setAmount, setInvoiceStatus, onRegenerate, }: DepositGeneratedViewProps): react_jsx_runtime.JSX.Element;
 
 interface DepositPreGenerationAsset {
     ticker?: string;

package/dist/web/index.js

@@ -1907,7 +1907,7 @@ function FilterDropdown({
             "span",
             {
               className: cn(
-                "shrink-0 text-xxs font-black uppercase tracking-wide",
+                "shrink-0 text-mini font-bold uppercase tracking-wider",
                 isFiltered ? "text-muted-foreground" : "text-white/45"
               ),
               children: label
@@ -5052,7 +5052,8 @@ function DepositGeneratedView({
   setAddress,
   setRecipientId,
   setAmount,
-  setInvoiceStatus
+  setInvoiceStatus,
+  onRegenerate
 }) {
   return /* @__PURE__ */ jsxs43("div", { className: "space-y-3 animate-in fade-in zoom-in-95 duration-300", children: [
     (network === "lightning" || network === "arkade" && arkSubMode === "ark") && isBtc && /* @__PURE__ */ jsxs43("div", { className: "flex flex-col gap-1.5 rounded-xl border border-white/8 bg-white/3 p-2.5", children: [
@@ -5124,7 +5125,10 @@ function DepositGeneratedView({
               }
             ),
             /* @__PURE__ */ jsx56(QrCode, { value: address, size: 188 }),
-            isInvoicePaid && /* @__PURE__ */ jsx56(PaidOverlay, {})
+            isInvoicePaid && /* @__PURE__ */ jsx56(PaidOverlay, {}),
+            loading && !isInvoicePaid && // Loading scrim — sits over the QR while a fresh address/invoice
+            // is being fetched (e.g. after the New Address button).
+            /* @__PURE__ */ jsx56("div", { className: "absolute inset-0 flex items-center justify-center rounded-2xl bg-white/80 backdrop-blur-sm", children: /* @__PURE__ */ jsx56("span", { className: "material-symbols-outlined animate-spin text-icon-3xl text-network-bitcoin", children: "progress_activity" }) })
           ]
         }
       ),
@@ -5197,22 +5201,31 @@ function DepositGeneratedView({
         ]
       }
     ),
-    /* @__PURE__ */ jsx56("div", { className: "flex justify-center pt-1", children: /* @__PURE__ */ jsxs43(
+    /* @__PURE__ */ jsx56("div", { className: "flex justify-center pt-1", children: /* @__PURE__ */ jsx56(
       "button",
       {
         type: "button",
+        "aria-label": `New ${network === "lightning" ? "invoice" : "address"}`,
+        title: `New ${network === "lightning" ? "invoice" : "address"}`,
+        disabled: loading,
         onClick: () => {
+          if (onRegenerate) {
+            void onRegenerate();
+            return;
+          }
           setAddress("");
           setRecipientId("");
           setAmount("");
           setInvoiceStatus(null);
         },
-        className: "flex items-center justify-center gap-1.5 rounded-xl bg-primary/15 px-5 py-3 text-xs font-bold text-primary transition-all hover:bg-primary/25 active:scale-[0.98]",
-        children: [
-          /* @__PURE__ */ jsx56("span", { className: "material-symbols-outlined text-icon-sm", children: "refresh" }),
-          "New ",
-          network === "lightning" ? "Invoice" : "Address"
-        ]
+        className: "flex size-10 items-center justify-center rounded-full bg-primary/15 text-primary transition-all hover:bg-primary/25 active:scale-[0.98] disabled:opacity-50",
+        children: /* @__PURE__ */ jsx56(
+          "span",
+          {
+            className: cn("material-symbols-outlined text-icon-md", loading && "animate-spin"),
+            children: "refresh"
+          }
+        )
       }
     ) })
   ] });
@@ -5869,49 +5882,53 @@ function DepositInvoiceGeneration({
         ] })
       }
     ),
-    /* @__PURE__ */ jsx59("div", { className: "flex-shrink-0 border-b border-border bg-background px-4 py-2", children: /* @__PURE__ */ jsxs46("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsxs46("div", { children: [
-        /* @__PURE__ */ jsx59("p", { className: "text-xxs font-bold uppercase tracking-widest text-white/35", children: "Destination Account" }),
-        /* @__PURE__ */ jsx59("div", { className: "mt-1.5 flex gap-1.5 overflow-x-auto no-scrollbar", children: availableAccounts.map((account) => /* @__PURE__ */ jsx59(
-          AccountChoiceChip,
-          {
-            account,
-            active: isBtc ? btcSelectedAccount === account : selectedAccount === account,
-            onClick: () => {
-              if (isBtc) {
-                if (account === "SPARK") {
-                  setWalletChoice("SPARK");
-                  setNetwork("spark");
-                } else if (account === "ARKADE") {
-                  setNetwork("arkade");
-                  setWalletChoice("RGB");
+    (() => {
+      const hideDestinationRail = isNewAsset && (network === "spark" || network === "arkade");
+      if (hideDestinationRail) return null;
+      return /* @__PURE__ */ jsx59("div", { className: "flex-shrink-0 border-b border-border bg-background px-4 py-2", children: /* @__PURE__ */ jsxs46("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxs46("div", { children: [
+          /* @__PURE__ */ jsx59("p", { className: "text-xxs font-bold uppercase tracking-widest text-white/35", children: "Destination Account" }),
+          /* @__PURE__ */ jsx59("div", { className: "mt-1.5 flex gap-1.5 overflow-x-auto no-scrollbar", children: availableAccounts.map((account) => /* @__PURE__ */ jsx59(
+            AccountChoiceChip,
+            {
+              account,
+              active: isBtc ? btcSelectedAccount === account : selectedAccount === account,
+              onClick: () => {
+                if (isBtc) {
+                  if (account === "SPARK") {
+                    setWalletChoice("SPARK");
+                    setNetwork("spark");
+                  } else if (account === "ARKADE") {
+                    setNetwork("arkade");
+                    setWalletChoice("RGB");
+                  } else {
+                    setWalletChoice("RGB");
+                    setNetwork("onchain");
+                  }
                 } else {
-                  setWalletChoice("RGB");
-                  setNetwork("onchain");
+                  handleAccountSelect(account);
                 }
-              } else {
-                handleAccountSelect(account);
               }
-            }
-          },
-          account
-        )) })
-      ] }),
-      !isBtc && !(isNewAsset && (network === "spark" || network === "arkade")) && /* @__PURE__ */ jsxs46("div", { children: [
-        /* @__PURE__ */ jsx59("p", { className: "text-xxs font-bold uppercase tracking-widest text-white/35", children: "Transfer Method" }),
-        /* @__PURE__ */ jsx59("div", { className: "mt-1.5 flex gap-1.5 overflow-x-auto no-scrollbar", children: methodOptions.map(({ method, enabled, disabledReason }) => /* @__PURE__ */ jsx59(
-          MethodChoiceChip,
-          {
-            method,
-            active: currentMethod === method,
-            enabled,
-            disabledReason,
-            onClick: () => enabled && applyMethodSelection(selectedAccount, method)
-          },
-          method
-        )) })
-      ] })
-    ] }) }),
+            },
+            account
+          )) })
+        ] }),
+        !isBtc && !(isNewAsset && (network === "spark" || network === "arkade")) && /* @__PURE__ */ jsxs46("div", { children: [
+          /* @__PURE__ */ jsx59("p", { className: "text-xxs font-bold uppercase tracking-widest text-white/35", children: "Transfer Method" }),
+          /* @__PURE__ */ jsx59("div", { className: "mt-1.5 flex gap-1.5 overflow-x-auto no-scrollbar", children: methodOptions.map(({ method, enabled, disabledReason }) => /* @__PURE__ */ jsx59(
+            MethodChoiceChip,
+            {
+              method,
+              active: currentMethod === method,
+              enabled,
+              disabledReason,
+              onClick: () => enabled && applyMethodSelection(selectedAccount, method)
+            },
+            method
+          )) })
+        ] })
+      ] }) });
+    })(),
     /* @__PURE__ */ jsx59(ScrollArea, { className: "flex-1", viewportAs: "main", viewportClassName: "space-y-2.5 px-4 py-2.5", children: isBtc && accountReceiveResult ? /* @__PURE__ */ jsx59(
       BtcUnifiedReceive,
       {

package/package.json

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