From 3ac92ae4bfd3147975e152984019120cf9875a11 Mon Sep 17 00:00:00 2001
From: Anurag Hazra <anurag.hazra@razorpay.com>
Date: Wed, 24 Jan 2024 14:40:14 +0530
Subject: [PATCH] fix(blade): expose card event type (#1993)

---
 .changeset/gentle-boxes-divide.md                      | 5 +++++
 packages/blade/src/components/Card/Card.tsx            | 9 ++++++++-
 packages/blade/src/components/Card/CardRoot.native.tsx | 4 ++--
 packages/blade/src/components/Card/types.ts            | 3 ++-
 4 files changed, 17 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/gentle-boxes-divide.md

diff --git a/.changeset/gentle-boxes-divide.md b/.changeset/gentle-boxes-divide.md
new file mode 100644
index 00000000000..a73057e8d8e
--- /dev/null
+++ b/.changeset/gentle-boxes-divide.md
@@ -0,0 +1,5 @@
+---
+"@razorpay/blade": patch
+---
+
+fix(blade): expose card event type
diff --git a/packages/blade/src/components/Card/Card.tsx b/packages/blade/src/components/Card/Card.tsx
index 12a8bb03a7e..f497d6c974e 100644
--- a/packages/blade/src/components/Card/Card.tsx
+++ b/packages/blade/src/components/Card/Card.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import type { GestureResponderEvent } from 'react-native';
 import { CardSurface } from './CardSurface';
 import { CardProvider, useVerifyInsideCard } from './CardContext';
 import { LinkOverlay } from './LinkOverlay';
@@ -17,6 +18,7 @@ import type { SurfaceLevels } from '~tokens/theme/theme';
 import type { BoxProps } from '~components/Box';
 import { makeAccessible } from '~utils/makeAccessible';
 import { useVerifyAllowedChildren } from '~utils/useVerifyAllowedChildren/useVerifyAllowedChildren';
+import type { Platform } from '~utils';
 import { isReactNative } from '~utils';
 
 export const ComponentIds = {
@@ -134,7 +136,12 @@ export type CardProps = {
   /**
    * Callback triggered when the card is clicked
    */
-  onClick?: () => void;
+  onClick?: (
+    event: Platform.Select<{
+      web: React.MouseEvent;
+      native: GestureResponderEvent;
+    }>,
+  ) => void;
   /**
    * Sets the HTML element for the Card
    *
diff --git a/packages/blade/src/components/Card/CardRoot.native.tsx b/packages/blade/src/components/Card/CardRoot.native.tsx
index 9b4d2076a9f..1db40c7083e 100644
--- a/packages/blade/src/components/Card/CardRoot.native.tsx
+++ b/packages/blade/src/components/Card/CardRoot.native.tsx
@@ -71,9 +71,9 @@ const CardRoot = ({
           selected: isSelected,
         })}
         style={styles}
-        onPressIn={() => {
+        onPressIn={(event) => {
           if (onClick) {
-            onClick();
+            onClick(event);
           }
           setIsPressed(true);
         }}
diff --git a/packages/blade/src/components/Card/types.ts b/packages/blade/src/components/Card/types.ts
index 0d44b4ef330..d38d7f950eb 100644
--- a/packages/blade/src/components/Card/types.ts
+++ b/packages/blade/src/components/Card/types.ts
@@ -1,10 +1,11 @@
+import type { CardProps } from './Card';
 import type { BaseBoxProps } from '~components/Box/BaseBox';
 
 type CardRootProps = {
   isSelected?: boolean;
   isFocused?: boolean;
   shouldScaleOnHover?: boolean;
-  onClick?: () => void;
+  onClick?: CardProps['onClick'];
   children?: React.ReactNode;
   href?: string;
   as?: 'label';