kaleido-ui 0.1.16 → 0.1.18

package/dist/web/index.cjs

@@ -504,7 +504,12 @@ function Icon2({
     "span",
     {
       className: cn(
-        "material-symbols-outlined",
+        // `inline-flex items-center justify-center leading-none` keeps the
+        // glyph centered inside its own box rather than drifting on the
+        // parent's text baseline. Without this, a Material-Symbols span
+        // sitting next to an <img>-based icon in a flex row renders a few
+        // pixels lower because the glyph adopts the surrounding line-height.
+        "material-symbols-outlined inline-flex items-center justify-center leading-none align-middle",
         filled && "filled",
         sizeClasses[size],
         className
@@ -4137,7 +4142,7 @@ function RouteChoiceCard({
   recommended,
   onClick
 }) {
-  const { disabled = false, disabledReason } = route;
+  const { disabled = false, disabledReason, accountIcon, balanceLabel } = route;
   return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
     "button",
     {
@@ -4153,15 +4158,21 @@ function RouteChoiceCard({
       ),
       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 && !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.jsxs)("div", { className: "flex min-w-0 items-start gap-3", children: [
+            accountIcon && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "mt-0.5 shrink-0", children: accountIcon }),
+            /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex flex-wrap items-center gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "text-sm font-bold text-white", children: route.accountTitle }),
+                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.jsxs)("div", { className: "flex shrink-0 flex-col items-end gap-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "text-xxs font-bold uppercase tracking-wider text-white/35", children: route.feeHint }),
+            balanceLabel && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "font-mono text-xxs text-white/50", children: balanceLabel })
+          ] })
         ] }),
         /* @__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 })

package/dist/web/index.d.cts

@@ -808,6 +808,10 @@ interface WithdrawRouteOption<TAccount extends string = string> {
     disabled?: boolean;
     /** Short reason shown under the disabled card. Pair with `disabled`. */
     disabledReason?: string;
+    /** Optional account/protocol logo rendered on the left of the card (e.g. NetworkBadge). */
+    accountIcon?: ReactNode;
+    /** Optional pre-formatted balance label (e.g. "1.23 BTC available") shown on the card. */
+    balanceLabel?: string;
 }
 interface WithdrawRouteSummary {
     method: string;

package/dist/web/index.d.ts

@@ -808,6 +808,10 @@ interface WithdrawRouteOption<TAccount extends string = string> {
     disabled?: boolean;
     /** Short reason shown under the disabled card. Pair with `disabled`. */
     disabledReason?: string;
+    /** Optional account/protocol logo rendered on the left of the card (e.g. NetworkBadge). */
+    accountIcon?: ReactNode;
+    /** Optional pre-formatted balance label (e.g. "1.23 BTC available") shown on the card. */
+    balanceLabel?: string;
 }
 interface WithdrawRouteSummary {
     method: string;

package/dist/web/index.js

@@ -343,7 +343,12 @@ function Icon2({
     "span",
     {
       className: cn(
-        "material-symbols-outlined",
+        // `inline-flex items-center justify-center leading-none` keeps the
+        // glyph centered inside its own box rather than drifting on the
+        // parent's text baseline. Without this, a Material-Symbols span
+        // sitting next to an <img>-based icon in a flex row renders a few
+        // pixels lower because the glyph adopts the surrounding line-height.
+        "material-symbols-outlined inline-flex items-center justify-center leading-none align-middle",
         filled && "filled",
         sizeClasses[size],
         className
@@ -3982,7 +3987,7 @@ function RouteChoiceCard({
   recommended,
   onClick
 }) {
-  const { disabled = false, disabledReason } = route;
+  const { disabled = false, disabledReason, accountIcon, balanceLabel } = route;
   return /* @__PURE__ */ jsxs33(
     "button",
     {
@@ -3998,15 +4003,21 @@ function RouteChoiceCard({
       ),
       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 && !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__ */ jsxs33("div", { className: "flex min-w-0 items-start gap-3", children: [
+            accountIcon && /* @__PURE__ */ jsx45("div", { className: "mt-0.5 shrink-0", children: accountIcon }),
+            /* @__PURE__ */ jsxs33("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsxs33("div", { className: "flex flex-wrap items-center gap-2", children: [
+                /* @__PURE__ */ jsx45("span", { className: "text-sm font-bold text-white", children: route.accountTitle }),
+                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__ */ jsxs33("div", { className: "flex shrink-0 flex-col items-end gap-1", children: [
+            /* @__PURE__ */ jsx45("span", { className: "text-xxs font-bold uppercase tracking-wider text-white/35", children: route.feeHint }),
+            balanceLabel && /* @__PURE__ */ jsx45("span", { className: "font-mono text-xxs text-white/50", children: balanceLabel })
+          ] })
         ] }),
         /* @__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 })

package/package.json

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