From 4a5fb3bf71ad0b7906aab8f74387aca915040aa6 Mon Sep 17 00:00:00 2001
From: Ravi Kiran <ravikiranvm@gmail.com>
Date: Thu, 30 Jul 2026 15:26:31 +0530
Subject: [PATCH 1/2] Add secondary value slot to OverviewCard

Widen the value prop to ReactNode and add an optional secondaryValue
rendered baseline-aligned to its right, so consumers can attach compact
supplementary content (e.g. secondary amounts) or tooltip-wrapped values
without changing the card's layout when the slot is unused.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../components/overview-card/overview-card.tsx    | 10 ++++++++--
 .../overview-card/overview-card.stories.tsx       | 15 +++++++++++++++
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/packages/ui-components/src/components/overview-card/overview-card.tsx b/packages/ui-components/src/components/overview-card/overview-card.tsx
index fffb0f254e..332d453cd8 100644
--- a/packages/ui-components/src/components/overview-card/overview-card.tsx
+++ b/packages/ui-components/src/components/overview-card/overview-card.tsx
@@ -4,7 +4,9 @@ import { cn } from '../../lib/cn';
 type OverviewCardProps = {
   title: string;
   icon: ReactNode;
-  value: string | number;
+  value: ReactNode;
+  /** Rendered baseline-aligned to the right of the value (e.g. secondary currency amounts). */
+  secondaryValue?: ReactNode;
   bottomLineText?: string;
   onClick?: () => void;
   iconWrapperClassName?: string;
@@ -16,6 +18,7 @@ const OverviewCard = ({
   title,
   icon,
   value,
+  secondaryValue,
   bottomLineText,
   onClick,
   iconWrapperClassName,
@@ -45,7 +48,10 @@ const OverviewCard = ({
         {title}
       </span>
     </div>
-    <p className="font-bold text-[32px]/[32px] text-foreground">{value}</p>
+    <div className="flex items-baseline gap-2 flex-wrap">
+      <p className="font-bold text-[32px]/[32px] text-foreground">{value}</p>
+      {secondaryValue}
+    </div>
     {bottomLineText && (
       <p className="font-normal text-sm text-gray-400">{bottomLineText}</p>
     )}
diff --git a/packages/ui-components/src/stories/overview-card/overview-card.stories.tsx b/packages/ui-components/src/stories/overview-card/overview-card.stories.tsx
index a474d62f25..96204f593a 100644
--- a/packages/ui-components/src/stories/overview-card/overview-card.stories.tsx
+++ b/packages/ui-components/src/stories/overview-card/overview-card.stories.tsx
@@ -67,3 +67,18 @@ export const CustomIconWrapperClassName: Story = {
     iconWrapperClassName: 'bg-green-400',
   },
 };
+
+/**
+ * Card with a secondary value rendered baseline-aligned next to the main value
+ * (e.g. remaining currency amounts for a multi-currency total).
+ */
+export const WithSecondaryValue: Story = {
+  args: {
+    value: '$12.4K',
+    secondaryValue: (
+      <span className="text-xs font-medium text-muted-foreground">
+        + €3.1K · £980
+      </span>
+    ),
+  },
+};

From aaad5004507a3f356c7ab82248d8c45f0892db7d Mon Sep 17 00:00:00 2001
From: Ravi Kiran <ravikiranvm@gmail.com>
Date: Thu, 30 Jul 2026 15:34:59 +0530
Subject: [PATCH 2/2] Render the value slot in a div instead of a p
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The value prop accepts any ReactNode, and a p element only permits
phrasing content — a block child would be invalid HTML.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../src/components/overview-card/overview-card.tsx           | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/ui-components/src/components/overview-card/overview-card.tsx b/packages/ui-components/src/components/overview-card/overview-card.tsx
index 332d453cd8..913663d4c0 100644
--- a/packages/ui-components/src/components/overview-card/overview-card.tsx
+++ b/packages/ui-components/src/components/overview-card/overview-card.tsx
@@ -49,7 +49,10 @@ const OverviewCard = ({
       </span>
     </div>
     <div className="flex items-baseline gap-2 flex-wrap">
-      <p className="font-bold text-[32px]/[32px] text-foreground">{value}</p>
+      {/* div, not p: value is a ReactNode and may legally contain non-phrasing content */}
+      <div className="font-bold text-[32px]/[32px] text-foreground">
+        {value}
+      </div>
       {secondaryValue}
     </div>
     {bottomLineText && (