kaleido-ui 0.1.71 → 0.1.72

package/dist/web/index.cjs

@@ -4676,16 +4676,17 @@ function WithdrawDestinationInput({
           onChange: (event) => setDestination(event.target.value)
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "absolute right-4 top-1/2 flex -translate-y-1/2 items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "absolute right-3 top-1/2 flex -translate-y-1/2 items-center gap-1", children: [
         destination && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
           "button",
           {
             type: "button",
+            "aria-label": "Clear",
             onClick: () => {
               setDestination("");
               handleReset();
             },
-            className: "text-xs text-muted-foreground transition-colors hover:text-white",
+            className: "rounded-lg p-2 text-muted-foreground transition-colors hover:text-white",
             children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "material-symbols-outlined text-icon-md", children: "close" })
           }
         ),
@@ -4693,9 +4694,10 @@ function WithdrawDestinationInput({
           "button",
           {
             type: "button",
+            "aria-label": "Paste",
             onClick: handlePaste,
-            className: "rounded-lg bg-white/10 px-2.5 py-1 text-xs font-medium text-primary transition-colors hover:bg-white/20",
-            children: "Paste"
+            className: "rounded-lg bg-white/5 p-2 text-muted-foreground transition-colors hover:text-primary",
+            children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "material-symbols-outlined text-icon-md", children: "content_paste" })
           }
         )
       ] })
@@ -4808,7 +4810,7 @@ function WithdrawAmountInput({
             const value = parseInt(event.target.value, 10);
             if (!Number.isNaN(value)) setWitnessAmountSat(value);
           },
-          className: "w-full rounded-xl border bg-card px-4 py-3 text-sm text-white transition-colors focus:border-primary/50 focus:outline-none"
+          className: "w-full rounded-xl bg-card px-4 py-3 text-sm text-white shadow-inner transition-all focus:outline focus:outline-2 focus:outline-primary/50"
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("p", { className: "ml-1 text-xs text-muted-foreground", children: "Bitcoin amount sent to create the witness UTXO for the recipient." })
@@ -4820,7 +4822,7 @@ function WithdrawAmountInput({
         {
           type: "button",
           onClick: () => setFeeRate(rate),
-          className: `group relative overflow-hidden rounded-[16px] border px-3 py-3 shadow-sm transition-all active:scale-[0.98] ${feeRate === rate ? "border-primary/40 bg-primary/10" : "border-border bg-card/40 backdrop-blur-xl hover:border-primary/40"}`,
+          className: `group relative overflow-hidden rounded-[16px] px-3 py-3 shadow-sm transition-all active:scale-[0.98] ${feeRate === rate ? "bg-primary/10" : "bg-card/40 backdrop-blur-xl hover:bg-card/60"}`,
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
               "div",
@@ -4852,7 +4854,7 @@ function WithdrawAmountInput({
         rate
       )) })
     ] }),
-    addressType === "rgb" && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex items-center justify-between rounded-xl border bg-card p-3", children: [
+    addressType === "rgb" && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex items-center justify-between rounded-xl bg-card p-3", children: [
       /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { children: [
         /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("p", { className: "text-sm font-medium text-white", children: "Gift / Donation" }),
         /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("p", { className: "text-xs text-muted-foreground", children: "Skip amount checks for this transfer" })
@@ -4978,21 +4980,23 @@ function RouteChoiceCard({
   onClick,
   displayOnly
 }) {
-  const { disabled = false, disabledReason, accountIcon, balanceLabel } = route;
-  if (displayOnly) {
-    return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "rounded-2xl bg-card/50 px-4 py-3.5", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex min-w-0 items-center gap-3", children: [
-        accountIcon && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "shrink-0", children: accountIcon }),
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "min-w-0", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "text-sm font-semibold text-white", children: route.accountTitle }),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { className: "mt-0.5 text-xs text-white/45", children: route.methodLabel })
-        ] })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex shrink-0 flex-col items-end gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "text-xxs font-bold uppercase tracking-wider text-white/35", children: route.feeHint }),
-        balanceLabel && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "font-mono text-xxs text-white/50", children: balanceLabel })
+  const { disabled = false, disabledReason, accountIcon, balanceLabel, accentClassName } = route;
+  const body = /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex items-start justify-between gap-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex min-w-0 items-start gap-3", children: [
+      accountIcon && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "mt-0.5 shrink-0", children: accountIcon }),
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex flex-wrap items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "text-sm font-bold text-white", children: route.accountTitle }),
+          recommended && !disabled && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "rounded-full bg-primary/10 px-2 py-0.5 text-xxs font-bold uppercase tracking-wider text-primary", children: "Recommended" }),
+          disabled && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "rounded-full bg-danger/10 px-2 py-0.5 text-xxs font-bold uppercase tracking-wider text-danger", children: "Insufficient" })
+        ] }),
+        balanceLabel && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { className: "mt-0.5 font-mono text-xs text-white/55", children: balanceLabel })
       ] })
-    ] }) });
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "shrink-0 text-xxs font-bold uppercase tracking-wider text-white/40", children: route.feeHint })
+  ] });
+  if (displayOnly) {
+    return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "rounded-2xl bg-card/50 px-4 py-3.5", children: body });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
     "button",
@@ -5004,28 +5008,11 @@ function RouteChoiceCard({
       "aria-disabled": disabled,
       title: disabled ? disabledReason : void 0,
       className: cn(
-        "w-full rounded-2xl border p-4 text-left transition-all",
-        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"
+        "w-full rounded-2xl p-4 text-left transition-all",
+        disabled ? "cursor-not-allowed bg-danger/5 opacity-60" : selected ? accentClassName ?? "bg-primary/10" : "bg-white/4 hover:bg-white/6"
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex items-start justify-between gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex min-w-0 items-start gap-3", children: [
-            accountIcon && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "mt-0.5 shrink-0", children: accountIcon }),
-            /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "min-w-0", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex flex-wrap items-center gap-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "text-sm font-bold text-white", children: route.accountTitle }),
-                recommended && !disabled && /* @__PURE__ */ (0, import_jsx_runtime48.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_runtime48.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_runtime48.jsx)("p", { className: "mt-1 text-xs text-white/45", children: route.methodLabel })
-            ] })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex shrink-0 flex-col items-end gap-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "text-xxs font-bold uppercase tracking-wider text-white/35", children: route.feeHint }),
-            balanceLabel && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "font-mono text-xxs text-white/50", children: balanceLabel })
-          ] })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { className: "mt-3 text-xs leading-relaxed text-muted-foreground", children: route.summary }),
+        body,
         disabled && disabledReason && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { className: "mt-2 text-xxs leading-relaxed text-danger/80", children: disabledReason })
       ]
     }

package/dist/web/index.d.cts

@@ -930,6 +930,9 @@ interface WithdrawRouteOption<TAccount extends string = string> {
     accountIcon?: ReactNode;
     /** Optional pre-formatted balance label (e.g. "1.23 BTC available") shown on the card. */
     balanceLabel?: string;
+    /** Optional protocol-tinted classes applied when the card is selected
+     * (e.g. "bg-network-spark/12"). Falls back to the brand primary tint. */
+    accentClassName?: string;
 }
 interface WithdrawRouteSummary {
     method: string;

package/dist/web/index.d.ts

@@ -930,6 +930,9 @@ interface WithdrawRouteOption<TAccount extends string = string> {
     accountIcon?: ReactNode;
     /** Optional pre-formatted balance label (e.g. "1.23 BTC available") shown on the card. */
     balanceLabel?: string;
+    /** Optional protocol-tinted classes applied when the card is selected
+     * (e.g. "bg-network-spark/12"). Falls back to the brand primary tint. */
+    accentClassName?: string;
 }
 interface WithdrawRouteSummary {
     method: string;

package/dist/web/index.js

@@ -4498,16 +4498,17 @@ function WithdrawDestinationInput({
           onChange: (event) => setDestination(event.target.value)
         }
       ),
-      /* @__PURE__ */ jsxs32("div", { className: "absolute right-4 top-1/2 flex -translate-y-1/2 items-center gap-2", children: [
+      /* @__PURE__ */ jsxs32("div", { className: "absolute right-3 top-1/2 flex -translate-y-1/2 items-center gap-1", children: [
         destination && /* @__PURE__ */ jsx45(
           "button",
           {
             type: "button",
+            "aria-label": "Clear",
             onClick: () => {
               setDestination("");
               handleReset();
             },
-            className: "text-xs text-muted-foreground transition-colors hover:text-white",
+            className: "rounded-lg p-2 text-muted-foreground transition-colors hover:text-white",
             children: /* @__PURE__ */ jsx45("span", { className: "material-symbols-outlined text-icon-md", children: "close" })
           }
         ),
@@ -4515,9 +4516,10 @@ function WithdrawDestinationInput({
           "button",
           {
             type: "button",
+            "aria-label": "Paste",
             onClick: handlePaste,
-            className: "rounded-lg bg-white/10 px-2.5 py-1 text-xs font-medium text-primary transition-colors hover:bg-white/20",
-            children: "Paste"
+            className: "rounded-lg bg-white/5 p-2 text-muted-foreground transition-colors hover:text-primary",
+            children: /* @__PURE__ */ jsx45("span", { className: "material-symbols-outlined text-icon-md", children: "content_paste" })
           }
         )
       ] })
@@ -4630,7 +4632,7 @@ function WithdrawAmountInput({
             const value = parseInt(event.target.value, 10);
             if (!Number.isNaN(value)) setWitnessAmountSat(value);
           },
-          className: "w-full rounded-xl border bg-card px-4 py-3 text-sm text-white transition-colors focus:border-primary/50 focus:outline-none"
+          className: "w-full rounded-xl bg-card px-4 py-3 text-sm text-white shadow-inner transition-all focus:outline focus:outline-2 focus:outline-primary/50"
         }
       ),
       /* @__PURE__ */ jsx46("p", { className: "ml-1 text-xs text-muted-foreground", children: "Bitcoin amount sent to create the witness UTXO for the recipient." })
@@ -4642,7 +4644,7 @@ function WithdrawAmountInput({
         {
           type: "button",
           onClick: () => setFeeRate(rate),
-          className: `group relative overflow-hidden rounded-[16px] border px-3 py-3 shadow-sm transition-all active:scale-[0.98] ${feeRate === rate ? "border-primary/40 bg-primary/10" : "border-border bg-card/40 backdrop-blur-xl hover:border-primary/40"}`,
+          className: `group relative overflow-hidden rounded-[16px] px-3 py-3 shadow-sm transition-all active:scale-[0.98] ${feeRate === rate ? "bg-primary/10" : "bg-card/40 backdrop-blur-xl hover:bg-card/60"}`,
           children: [
             /* @__PURE__ */ jsx46(
               "div",
@@ -4674,7 +4676,7 @@ function WithdrawAmountInput({
         rate
       )) })
     ] }),
-    addressType === "rgb" && /* @__PURE__ */ jsxs33("div", { className: "flex items-center justify-between rounded-xl border bg-card p-3", children: [
+    addressType === "rgb" && /* @__PURE__ */ jsxs33("div", { className: "flex items-center justify-between rounded-xl bg-card p-3", children: [
       /* @__PURE__ */ jsxs33("div", { children: [
         /* @__PURE__ */ jsx46("p", { className: "text-sm font-medium text-white", children: "Gift / Donation" }),
         /* @__PURE__ */ jsx46("p", { className: "text-xs text-muted-foreground", children: "Skip amount checks for this transfer" })
@@ -4800,21 +4802,23 @@ function RouteChoiceCard({
   onClick,
   displayOnly
 }) {
-  const { disabled = false, disabledReason, accountIcon, balanceLabel } = route;
-  if (displayOnly) {
-    return /* @__PURE__ */ jsx48("div", { className: "rounded-2xl bg-card/50 px-4 py-3.5", children: /* @__PURE__ */ jsxs35("div", { className: "flex items-center justify-between gap-3", children: [
-      /* @__PURE__ */ jsxs35("div", { className: "flex min-w-0 items-center gap-3", children: [
-        accountIcon && /* @__PURE__ */ jsx48("div", { className: "shrink-0", children: accountIcon }),
-        /* @__PURE__ */ jsxs35("div", { className: "min-w-0", children: [
-          /* @__PURE__ */ jsx48("span", { className: "text-sm font-semibold text-white", children: route.accountTitle }),
-          /* @__PURE__ */ jsx48("p", { className: "mt-0.5 text-xs text-white/45", children: route.methodLabel })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs35("div", { className: "flex shrink-0 flex-col items-end gap-1", children: [
-        /* @__PURE__ */ jsx48("span", { className: "text-xxs font-bold uppercase tracking-wider text-white/35", children: route.feeHint }),
-        balanceLabel && /* @__PURE__ */ jsx48("span", { className: "font-mono text-xxs text-white/50", children: balanceLabel })
+  const { disabled = false, disabledReason, accountIcon, balanceLabel, accentClassName } = route;
+  const body = /* @__PURE__ */ jsxs35("div", { className: "flex items-start justify-between gap-3", children: [
+    /* @__PURE__ */ jsxs35("div", { className: "flex min-w-0 items-start gap-3", children: [
+      accountIcon && /* @__PURE__ */ jsx48("div", { className: "mt-0.5 shrink-0", children: accountIcon }),
+      /* @__PURE__ */ jsxs35("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsxs35("div", { className: "flex flex-wrap items-center gap-2", children: [
+          /* @__PURE__ */ jsx48("span", { className: "text-sm font-bold text-white", children: route.accountTitle }),
+          recommended && !disabled && /* @__PURE__ */ jsx48("span", { className: "rounded-full bg-primary/10 px-2 py-0.5 text-xxs font-bold uppercase tracking-wider text-primary", children: "Recommended" }),
+          disabled && /* @__PURE__ */ jsx48("span", { className: "rounded-full bg-danger/10 px-2 py-0.5 text-xxs font-bold uppercase tracking-wider text-danger", children: "Insufficient" })
+        ] }),
+        balanceLabel && /* @__PURE__ */ jsx48("p", { className: "mt-0.5 font-mono text-xs text-white/55", children: balanceLabel })
       ] })
-    ] }) });
+    ] }),
+    /* @__PURE__ */ jsx48("span", { className: "shrink-0 text-xxs font-bold uppercase tracking-wider text-white/40", children: route.feeHint })
+  ] });
+  if (displayOnly) {
+    return /* @__PURE__ */ jsx48("div", { className: "rounded-2xl bg-card/50 px-4 py-3.5", children: body });
   }
   return /* @__PURE__ */ jsxs35(
     "button",
@@ -4826,28 +4830,11 @@ function RouteChoiceCard({
       "aria-disabled": disabled,
       title: disabled ? disabledReason : void 0,
       className: cn(
-        "w-full rounded-2xl border p-4 text-left transition-all",
-        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"
+        "w-full rounded-2xl p-4 text-left transition-all",
+        disabled ? "cursor-not-allowed bg-danger/5 opacity-60" : selected ? accentClassName ?? "bg-primary/10" : "bg-white/4 hover:bg-white/6"
       ),
       children: [
-        /* @__PURE__ */ jsxs35("div", { className: "flex items-start justify-between gap-3", children: [
-          /* @__PURE__ */ jsxs35("div", { className: "flex min-w-0 items-start gap-3", children: [
-            accountIcon && /* @__PURE__ */ jsx48("div", { className: "mt-0.5 shrink-0", children: accountIcon }),
-            /* @__PURE__ */ jsxs35("div", { className: "min-w-0", children: [
-              /* @__PURE__ */ jsxs35("div", { className: "flex flex-wrap items-center gap-2", children: [
-                /* @__PURE__ */ jsx48("span", { className: "text-sm font-bold text-white", children: route.accountTitle }),
-                recommended && !disabled && /* @__PURE__ */ jsx48("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__ */ jsx48("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__ */ jsx48("p", { className: "mt-1 text-xs text-white/45", children: route.methodLabel })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxs35("div", { className: "flex shrink-0 flex-col items-end gap-1", children: [
-            /* @__PURE__ */ jsx48("span", { className: "text-xxs font-bold uppercase tracking-wider text-white/35", children: route.feeHint }),
-            balanceLabel && /* @__PURE__ */ jsx48("span", { className: "font-mono text-xxs text-white/50", children: balanceLabel })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx48("p", { className: "mt-3 text-xs leading-relaxed text-muted-foreground", children: route.summary }),
+        body,
         disabled && disabledReason && /* @__PURE__ */ jsx48("p", { className: "mt-2 text-xxs leading-relaxed text-danger/80", children: disabledReason })
       ]
     }

package/package.json

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