kaleido-ui 0.1.12 → 0.1.14

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
@@ -4137,28 +4137,34 @@ function RouteChoiceCard({
   recommended,
   onClick
 }) {
+  const { disabled = false, disabledReason } = route;
   return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
     "button",
     {
       type: "button",
       "data-testid": `withdraw-route-${route.account.toLowerCase()}`,
       onClick,
+      disabled,
+      "aria-disabled": disabled,
+      title: disabled ? disabledReason : void 0,
       className: cn(
         "w-full rounded-2xl border p-4 text-left transition-all",
-        selected ? "border-primary/30 bg-primary/10" : "border-border bg-white/4 hover:border-white/20 hover:bg-white/6"
+        disabled ? "cursor-not-allowed border-danger/15 bg-danger/5 opacity-60" : selected ? "border-primary/30 bg-primary/10" : "border-border bg-white/4 hover:border-white/20 hover:bg-white/6"
       ),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex items-start justify-between gap-3", children: [
           /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { children: [
             /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "text-sm font-bold text-white", children: route.accountTitle }),
-              recommended && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "rounded-full border border-primary/20 bg-primary/10 px-2 py-0.5 text-xxs font-bold uppercase tracking-wider text-primary", children: "Recommended" })
+              recommended && !disabled && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "rounded-full border border-primary/20 bg-primary/10 px-2 py-0.5 text-xxs font-bold uppercase tracking-wider text-primary", children: "Recommended" }),
+              disabled && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "rounded-full border border-danger/20 bg-danger/10 px-2 py-0.5 text-xxs font-bold uppercase tracking-wider text-danger", children: "Insufficient" })
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: "mt-1 text-xs text-white/45", children: route.methodLabel })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "text-xxs font-bold uppercase tracking-wider text-white/35", children: route.feeHint })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: "mt-3 text-xs leading-relaxed text-muted-foreground", children: route.summary })
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: "mt-3 text-xs leading-relaxed text-muted-foreground", children: route.summary }),
+        disabled && disabledReason && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: "mt-2 text-xxs leading-relaxed text-danger/80", children: disabledReason })
       ]
     }
   );
@@ -6018,49 +6024,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

@@ -804,6 +804,10 @@ interface WithdrawRouteOption<TAccount extends string = string> {
     accountTitle: string;
     methodLabel: string;
     feeHint: string;
+    /** When true, the route is unavailable (e.g. insufficient liquidity) and not clickable. */
+    disabled?: boolean;
+    /** Short reason shown under the disabled card. Pair with `disabled`. */
+    disabledReason?: string;
 }
 interface WithdrawRouteSummary {
     method: string;

package/dist/web/index.d.ts

@@ -804,6 +804,10 @@ interface WithdrawRouteOption<TAccount extends string = string> {
     accountTitle: string;
     methodLabel: string;
     feeHint: string;
+    /** When true, the route is unavailable (e.g. insufficient liquidity) and not clickable. */
+    disabled?: boolean;
+    /** Short reason shown under the disabled card. Pair with `disabled`. */
+    disabledReason?: string;
 }
 interface WithdrawRouteSummary {
     method: 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
@@ -3982,28 +3982,34 @@ function RouteChoiceCard({
   recommended,
   onClick
 }) {
+  const { disabled = false, disabledReason } = route;
   return /* @__PURE__ */ jsxs33(
     "button",
     {
       type: "button",
       "data-testid": `withdraw-route-${route.account.toLowerCase()}`,
       onClick,
+      disabled,
+      "aria-disabled": disabled,
+      title: disabled ? disabledReason : void 0,
       className: cn(
         "w-full rounded-2xl border p-4 text-left transition-all",
-        selected ? "border-primary/30 bg-primary/10" : "border-border bg-white/4 hover:border-white/20 hover:bg-white/6"
+        disabled ? "cursor-not-allowed border-danger/15 bg-danger/5 opacity-60" : selected ? "border-primary/30 bg-primary/10" : "border-border bg-white/4 hover:border-white/20 hover:bg-white/6"
       ),
       children: [
         /* @__PURE__ */ jsxs33("div", { className: "flex items-start justify-between gap-3", children: [
           /* @__PURE__ */ jsxs33("div", { children: [
             /* @__PURE__ */ jsxs33("div", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ jsx45("span", { className: "text-sm font-bold text-white", children: route.accountTitle }),
-              recommended && /* @__PURE__ */ jsx45("span", { className: "rounded-full border border-primary/20 bg-primary/10 px-2 py-0.5 text-xxs font-bold uppercase tracking-wider text-primary", children: "Recommended" })
+              recommended && !disabled && /* @__PURE__ */ jsx45("span", { className: "rounded-full border border-primary/20 bg-primary/10 px-2 py-0.5 text-xxs font-bold uppercase tracking-wider text-primary", children: "Recommended" }),
+              disabled && /* @__PURE__ */ jsx45("span", { className: "rounded-full border border-danger/20 bg-danger/10 px-2 py-0.5 text-xxs font-bold uppercase tracking-wider text-danger", children: "Insufficient" })
             ] }),
             /* @__PURE__ */ jsx45("p", { className: "mt-1 text-xs text-white/45", children: route.methodLabel })
           ] }),
           /* @__PURE__ */ jsx45("span", { className: "text-xxs font-bold uppercase tracking-wider text-white/35", children: route.feeHint })
         ] }),
-        /* @__PURE__ */ jsx45("p", { className: "mt-3 text-xs leading-relaxed text-muted-foreground", children: route.summary })
+        /* @__PURE__ */ jsx45("p", { className: "mt-3 text-xs leading-relaxed text-muted-foreground", children: route.summary }),
+        disabled && disabledReason && /* @__PURE__ */ jsx45("p", { className: "mt-2 text-xxs leading-relaxed text-danger/80", children: disabledReason })
       ]
     }
   );
@@ -5863,49 +5869,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.12",
+  "version": "0.1.14",
   "description": "KaleidoSwap shared UI library — design tokens, web components (Tailwind + Radix), and React Native components extending WDK UI Kit",
   "license": "MIT",
   "type": "module",