From b425607072eff990176845368cc5c4538f69f31a Mon Sep 17 00:00:00 2001
From: jihadMo <jihadMo@users.noreply.github.com>
Date: Fri, 7 Aug 2026 08:51:56 +0100
Subject: [PATCH] fix(ui): forward native section props in Card component and
 add unit test (#11620)

---
 packages/ui/src/Card.test.tsx |  8 ++++++++
 packages/ui/src/Card.tsx      | 19 ++++++++++++++-----
 2 files changed, 22 insertions(+), 5 deletions(-)
 create mode 100644 packages/ui/src/Card.test.tsx

diff --git a/packages/ui/src/Card.test.tsx b/packages/ui/src/Card.test.tsx
new file mode 100644
index 00000000000..85ad255ec08
--- /dev/null
+++ b/packages/ui/src/Card.test.tsx
@@ -0,0 +1,8 @@
+import Card from './Card';
+
+describe('Card UI Component', () => {
+  it('should export Card component accepting native HTML section props', () => {
+    expect(Card).toBeDefined();
+    expect(typeof Card).toBe('function');
+  });
+});
diff --git a/packages/ui/src/Card.tsx b/packages/ui/src/Card.tsx
index 0c8512bbf78..d3c4bd32d26 100644
--- a/packages/ui/src/Card.tsx
+++ b/packages/ui/src/Card.tsx
@@ -1,10 +1,19 @@
-import React from "react";
+import React from 'react';
+
+export interface CardProps extends React.HTMLAttributes<HTMLElement> {
+  title?: string;
+  children: React.ReactNode;
+}
+
+export function Card({ title, children, className = '', style, ...rest }: CardProps) {
+  const defaultClassName = `border border-gray-200 dark:border-gray-800 rounded-lg p-4 bg-white dark:bg-gray-900 ${className}`.trim();
 
-export function Card({ title, children }: { title: string; children: React.ReactNode }) {
   return (
-    <section style={{ border: "1px solid #ddd", borderRadius: 8, padding: "1rem" }}>
-      <h3>{title}</h3>
-      <div>{children}</div>
+    <section className={defaultClassName} style={style} {...rest}>
+      {title && <h3 className="text-lg font-semibold mb-2">{title}</h3>}
+      {children}
     </section>
   );
 }
+
+export default Card;