kaleido-ui 0.1.97 → 0.1.98

package/dist/web/index.cjs

@@ -1880,6 +1880,7 @@ function TransactionCard({
   displayAmount,
   unit = "sats",
   subAmount,
+  onSubAmountInfo,
   timestamp,
   onClick,
   className
@@ -1956,7 +1957,22 @@ 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 && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("p", { className: "flex items-center justify-end gap-1 text-tiny text-muted-foreground/70 font-medium tracking-wide tabular-nums mt-0.5", children: [
+            subAmount,
+            onSubAmountInfo && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+              "button",
+              {
+                type: "button",
+                "aria-label": "What is this value?",
+                onClick: (event) => {
+                  event.stopPropagation();
+                  onSubAmountInfo();
+                },
+                className: "-my-1 rounded-full p-0.5 text-white/30 transition-colors hover:bg-accent hover:text-primary",
+                children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "material-symbols-outlined block", style: { fontSize: "13px" }, children: "info" })
+              }
+            )
+          ] })
         ] })
       ]
     }
@@ -4558,6 +4574,7 @@ function ActivityList({
               displayAmount: item.displayAmount,
               unit: item.unit,
               subAmount: item.subAmount,
+              onSubAmountInfo: item.onSubAmountInfo,
               timestamp: item.timestamp,
               onClick: () => onExpandedChange?.(isExpanded ? null : item.id)
             }
@@ -4803,7 +4820,7 @@ function ActivityDetailRow({
             event.stopPropagation();
             onCopy();
           },
-          className: "rounded-md p-1 text-white/30 transition-colors hover:bg-accent hover:text-primary active:scale-95",
+          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" })
         }

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,22 @@ 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 && /* @__PURE__ */ jsxs10("p", { className: "flex items-center justify-end gap-1 text-tiny text-muted-foreground/70 font-medium tracking-wide tabular-nums mt-0.5", children: [
+            subAmount,
+            onSubAmountInfo && /* @__PURE__ */ jsx21(
+              "button",
+              {
+                type: "button",
+                "aria-label": "What is this value?",
+                onClick: (event) => {
+                  event.stopPropagation();
+                  onSubAmountInfo();
+                },
+                className: "-my-1 rounded-full p-0.5 text-white/30 transition-colors hover:bg-accent hover:text-primary",
+                children: /* @__PURE__ */ jsx21("span", { className: "material-symbols-outlined block", style: { fontSize: "13px" }, children: "info" })
+              }
+            )
+          ] })
         ] })
       ]
     }
@@ -4376,6 +4392,7 @@ function ActivityList({
               displayAmount: item.displayAmount,
               unit: item.unit,
               subAmount: item.subAmount,
+              onSubAmountInfo: item.onSubAmountInfo,
               timestamp: item.timestamp,
               onClick: () => onExpandedChange?.(isExpanded ? null : item.id)
             }
@@ -4621,7 +4638,7 @@ function ActivityDetailRow({
             event.stopPropagation();
             onCopy();
           },
-          className: "rounded-md p-1 text-white/30 transition-colors hover:bg-accent hover:text-primary active:scale-95",
+          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" })
         }

package/package.json

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