kaleido-ui 0.1.96 → 0.1.98

package/dist/web/index.cjs

@@ -1879,6 +1879,8 @@ function TransactionCard({
   status,
   displayAmount,
   unit = "sats",
+  subAmount,
+  onSubAmountInfo,
   timestamp,
   onClick,
   className
@@ -1954,7 +1956,23 @@ 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 })
+          /* @__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.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" })
+              }
+            )
+          ] })
         ] })
       ]
     }
@@ -4555,6 +4573,8 @@ function ActivityList({
               status: item.status,
               displayAmount: item.displayAmount,
               unit: item.unit,
+              subAmount: item.subAmount,
+              onSubAmountInfo: item.onSubAmountInfo,
               timestamp: item.timestamp,
               onClick: () => onExpandedChange?.(isExpanded ? null : item.id)
             }
@@ -4800,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

@@ -266,12 +266,18 @@ interface TransactionCardProps {
     displayAmount: string;
     /** Unit label (e.g. "sats", "BTC") */
     unit?: string;
+    /** 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, 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";
@@ -802,7 +808,10 @@ interface ActivityListItem<TData = unknown> {
     status: StatusType;
     displayAmount: string;
     unit?: string;
+    /** 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

@@ -266,12 +266,18 @@ interface TransactionCardProps {
     displayAmount: string;
     /** Unit label (e.g. "sats", "BTC") */
     unit?: string;
+    /** 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, 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";
@@ -802,7 +808,10 @@ interface ActivityListItem<TData = unknown> {
     status: StatusType;
     displayAmount: string;
     unit?: string;
+    /** 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

@@ -1691,6 +1691,8 @@ function TransactionCard({
   status,
   displayAmount,
   unit = "sats",
+  subAmount,
+  onSubAmountInfo,
   timestamp,
   onClick,
   className
@@ -1766,7 +1768,23 @@ function TransactionCard({
               ]
             }
           ),
-          /* @__PURE__ */ jsx21("p", { className: "text-tiny text-muted-foreground font-medium tracking-wide uppercase mt-0.5", children: unit })
+          /* @__PURE__ */ jsx21("p", { className: "text-tiny text-muted-foreground font-medium tracking-wide uppercase mt-0.5", children: unit }),
+          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" })
+              }
+            )
+          ] })
         ] })
       ]
     }
@@ -4373,6 +4391,8 @@ function ActivityList({
               status: item.status,
               displayAmount: item.displayAmount,
               unit: item.unit,
+              subAmount: item.subAmount,
+              onSubAmountInfo: item.onSubAmountInfo,
               timestamp: item.timestamp,
               onClick: () => onExpandedChange?.(isExpanded ? null : item.id)
             }
@@ -4618,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.96",
+  "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",