kaleido-ui 0.1.97 → 0.1.99

package/dist/web/index.cjs

@@ -1880,6 +1880,7 @@ function TransactionCard({
   displayAmount,
   unit = "sats",
   subAmount,
+  onSubAmountInfo,
   timestamp,
   onClick,
   className
@@ -1956,7 +1957,26 @@ function TransactionCard({
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-tiny text-muted-foreground font-medium tracking-wide uppercase mt-0.5", children: unit }),
-          subAmount && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-tiny text-muted-foreground/70 font-medium tracking-wide tabular-nums mt-0.5", children: subAmount })
+          subAmount && (onSubAmountInfo ? (
+            // The whole sub-line is the hit target; hover feedback is text
+            // color only (no background), per design.
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+              "button",
+              {
+                type: "button",
+                "aria-label": "What is this value?",
+                onClick: (event) => {
+                  event.stopPropagation();
+                  onSubAmountInfo();
+                },
+                className: "mt-0.5 flex w-full items-center justify-end gap-1 text-tiny text-muted-foreground/70 font-medium tracking-wide tabular-nums transition-colors hover:text-foreground",
+                children: [
+                  subAmount,
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "material-symbols-outlined block", style: { fontSize: "13px" }, children: "info" })
+                ]
+              }
+            )
+          ) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "mt-0.5 flex items-center justify-end gap-1 text-tiny text-muted-foreground/70 font-medium tracking-wide tabular-nums", children: subAmount }))
         ] })
       ]
     }
@@ -4558,6 +4578,7 @@ function ActivityList({
               displayAmount: item.displayAmount,
               unit: item.unit,
               subAmount: item.subAmount,
+              onSubAmountInfo: item.onSubAmountInfo,
               timestamp: item.timestamp,
               onClick: () => onExpandedChange?.(isExpanded ? null : item.id)
             }
@@ -4790,26 +4811,30 @@ function ActivityDetailRow({
   onCopy,
   isCopied
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex items-center gap-3 py-1 last:pb-0", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "shrink-0 text-xxs font-bold uppercase tracking-wider text-muted-foreground", children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { "aria-hidden": true, className: "min-w-4 flex-1 self-center border-b border-dotted border-white/15" }),
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex max-w-[65%] items-center gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "truncate font-mono text-xs font-medium text-white/90", children: value }),
-      onCopy && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-        "button",
-        {
-          type: "button",
-          onClick: (event) => {
-            event.stopPropagation();
-            onCopy();
-          },
-          className: "rounded-md p-1 text-white/30 transition-colors hover:bg-accent hover:text-primary active:scale-95",
-          title: fullValue ? `Copy: ${fullValue}` : "Copy",
-          children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: "14px" }, children: isCopied ? "check" : "content_copy" })
-        }
-      )
+  return (
+    // min-h-8 equalizes text-only rows with taller value content (badges,
+    // pills) so the label-to-label rhythm stays uniform down the list.
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex min-h-8 items-center gap-3 py-1 last:pb-0", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "shrink-0 text-xxs font-bold uppercase tracking-wider text-muted-foreground", children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { "aria-hidden": true, className: "min-w-4 flex-1 self-center border-b border-dotted border-white/15" }),
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex max-w-[65%] items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "truncate font-mono text-xs font-medium text-white/90", children: value }),
+        onCopy && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: (event) => {
+              event.stopPropagation();
+              onCopy();
+            },
+            className: "-my-1 rounded-md p-1 text-white/30 transition-colors hover:bg-accent hover:text-primary active:scale-95",
+            title: fullValue ? `Copy: ${fullValue}` : "Copy",
+            children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: "14px" }, children: isCopied ? "check" : "content_copy" })
+          }
+        )
+      ] })
     ] })
-  ] });
+  );
 }
 
 // src/web/components/withdraw-destination-input.tsx

package/dist/web/index.d.cts

@@ -269,12 +269,15 @@ interface TransactionCardProps {
     /** Secondary amount under the unit — e.g. the sats leg an asset transfer
      * rode on ("588 sats" for an RGB-LN payment or an Arkade asset VTXO). */
     subAmount?: string;
+    /** When set, renders an info affordance next to subAmount (e.g. to open a
+     * modal explaining the carrier UTXO/VTXO value). Click doesn't bubble. */
+    onSubAmountInfo?: () => void;
     /** Unix timestamp in seconds */
     timestamp: number;
     onClick?: () => void;
     className?: string;
 }
-declare function TransactionCard({ direction, status, displayAmount, unit, subAmount, timestamp, onClick, className, }: TransactionCardProps): react_jsx_runtime.JSX.Element;
+declare function TransactionCard({ direction, status, displayAmount, unit, subAmount, onSubAmountInfo, timestamp, onClick, className, }: TransactionCardProps): react_jsx_runtime.JSX.Element;
 
 declare const APP_ICON_NAMES: {
     readonly activity: "history";
@@ -808,6 +811,7 @@ interface ActivityListItem<TData = unknown> {
     /** Secondary amount under the unit (e.g. the sats leg of an asset transfer). */
     subAmount?: string;
     timestamp: number;
+    onSubAmountInfo?: () => void;
     network?: NetworkType;
     label?: string;
     data?: TData;

package/dist/web/index.d.ts

@@ -269,12 +269,15 @@ interface TransactionCardProps {
     /** Secondary amount under the unit — e.g. the sats leg an asset transfer
      * rode on ("588 sats" for an RGB-LN payment or an Arkade asset VTXO). */
     subAmount?: string;
+    /** When set, renders an info affordance next to subAmount (e.g. to open a
+     * modal explaining the carrier UTXO/VTXO value). Click doesn't bubble. */
+    onSubAmountInfo?: () => void;
     /** Unix timestamp in seconds */
     timestamp: number;
     onClick?: () => void;
     className?: string;
 }
-declare function TransactionCard({ direction, status, displayAmount, unit, subAmount, timestamp, onClick, className, }: TransactionCardProps): react_jsx_runtime.JSX.Element;
+declare function TransactionCard({ direction, status, displayAmount, unit, subAmount, onSubAmountInfo, timestamp, onClick, className, }: TransactionCardProps): react_jsx_runtime.JSX.Element;
 
 declare const APP_ICON_NAMES: {
     readonly activity: "history";
@@ -808,6 +811,7 @@ interface ActivityListItem<TData = unknown> {
     /** Secondary amount under the unit (e.g. the sats leg of an asset transfer). */
     subAmount?: string;
     timestamp: number;
+    onSubAmountInfo?: () => void;
     network?: NetworkType;
     label?: string;
     data?: TData;

package/dist/web/index.js

@@ -1692,6 +1692,7 @@ function TransactionCard({
   displayAmount,
   unit = "sats",
   subAmount,
+  onSubAmountInfo,
   timestamp,
   onClick,
   className
@@ -1768,7 +1769,26 @@ function TransactionCard({
             }
           ),
           /* @__PURE__ */ jsx21("p", { className: "text-tiny text-muted-foreground font-medium tracking-wide uppercase mt-0.5", children: unit }),
-          subAmount && /* @__PURE__ */ jsx21("p", { className: "text-tiny text-muted-foreground/70 font-medium tracking-wide tabular-nums mt-0.5", children: subAmount })
+          subAmount && (onSubAmountInfo ? (
+            // The whole sub-line is the hit target; hover feedback is text
+            // color only (no background), per design.
+            /* @__PURE__ */ jsxs10(
+              "button",
+              {
+                type: "button",
+                "aria-label": "What is this value?",
+                onClick: (event) => {
+                  event.stopPropagation();
+                  onSubAmountInfo();
+                },
+                className: "mt-0.5 flex w-full items-center justify-end gap-1 text-tiny text-muted-foreground/70 font-medium tracking-wide tabular-nums transition-colors hover:text-foreground",
+                children: [
+                  subAmount,
+                  /* @__PURE__ */ jsx21("span", { className: "material-symbols-outlined block", style: { fontSize: "13px" }, children: "info" })
+                ]
+              }
+            )
+          ) : /* @__PURE__ */ jsx21("p", { className: "mt-0.5 flex items-center justify-end gap-1 text-tiny text-muted-foreground/70 font-medium tracking-wide tabular-nums", children: subAmount }))
         ] })
       ]
     }
@@ -4376,6 +4396,7 @@ function ActivityList({
               displayAmount: item.displayAmount,
               unit: item.unit,
               subAmount: item.subAmount,
+              onSubAmountInfo: item.onSubAmountInfo,
               timestamp: item.timestamp,
               onClick: () => onExpandedChange?.(isExpanded ? null : item.id)
             }
@@ -4608,26 +4629,30 @@ function ActivityDetailRow({
   onCopy,
   isCopied
 }) {
-  return /* @__PURE__ */ jsxs32("div", { className: "flex items-center gap-3 py-1 last:pb-0", children: [
-    /* @__PURE__ */ jsx45("span", { className: "shrink-0 text-xxs font-bold uppercase tracking-wider text-muted-foreground", children: label }),
-    /* @__PURE__ */ jsx45("span", { "aria-hidden": true, className: "min-w-4 flex-1 self-center border-b border-dotted border-white/15" }),
-    /* @__PURE__ */ jsxs32("div", { className: "flex max-w-[65%] items-center gap-2", children: [
-      /* @__PURE__ */ jsx45("span", { className: "truncate font-mono text-xs font-medium text-white/90", children: value }),
-      onCopy && /* @__PURE__ */ jsx45(
-        "button",
-        {
-          type: "button",
-          onClick: (event) => {
-            event.stopPropagation();
-            onCopy();
-          },
-          className: "rounded-md p-1 text-white/30 transition-colors hover:bg-accent hover:text-primary active:scale-95",
-          title: fullValue ? `Copy: ${fullValue}` : "Copy",
-          children: /* @__PURE__ */ jsx45("span", { className: "material-symbols-outlined", style: { fontSize: "14px" }, children: isCopied ? "check" : "content_copy" })
-        }
-      )
+  return (
+    // min-h-8 equalizes text-only rows with taller value content (badges,
+    // pills) so the label-to-label rhythm stays uniform down the list.
+    /* @__PURE__ */ jsxs32("div", { className: "flex min-h-8 items-center gap-3 py-1 last:pb-0", children: [
+      /* @__PURE__ */ jsx45("span", { className: "shrink-0 text-xxs font-bold uppercase tracking-wider text-muted-foreground", children: label }),
+      /* @__PURE__ */ jsx45("span", { "aria-hidden": true, className: "min-w-4 flex-1 self-center border-b border-dotted border-white/15" }),
+      /* @__PURE__ */ jsxs32("div", { className: "flex max-w-[65%] items-center gap-2", children: [
+        /* @__PURE__ */ jsx45("span", { className: "truncate font-mono text-xs font-medium text-white/90", children: value }),
+        onCopy && /* @__PURE__ */ jsx45(
+          "button",
+          {
+            type: "button",
+            onClick: (event) => {
+              event.stopPropagation();
+              onCopy();
+            },
+            className: "-my-1 rounded-md p-1 text-white/30 transition-colors hover:bg-accent hover:text-primary active:scale-95",
+            title: fullValue ? `Copy: ${fullValue}` : "Copy",
+            children: /* @__PURE__ */ jsx45("span", { className: "material-symbols-outlined", style: { fontSize: "14px" }, children: isCopied ? "check" : "content_copy" })
+          }
+        )
+      ] })
     ] })
-  ] });
+  );
 }
 
 // src/web/components/withdraw-destination-input.tsx

package/package.json

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