fix(blade): expose card event type (#1993)

.changeset/gentle-boxes-divide.md

@@ -0,0 +1,5 @@
+---
+"@razorpay/blade": patch
+---
+
+fix(blade): expose card event type

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
    *

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);
         }}

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';