jfs-components 0.1.18 → 0.1.19

package/lib/typescript/src/components/Card/Card.d.ts

@@ -29,6 +29,15 @@ export interface CardProps {
      * Style overrides for the card container.
      */
     style?: StyleProp<ViewStyle>;
+    /**
+     * Press handler for the whole card. When set, the card becomes pressable
+     * (rendered through a `Pressable` with `accessibilityRole="button"`).
+     */
+    onPress?: () => void;
+    /** Disable interaction when `onPress` is set. */
+    disabled?: boolean;
+    /** Accessibility label forwarded to the pressable wrapper. */
+    accessibilityLabel?: string;
 }
 /**
  * Card component implementation from Figma node 765:6186.
@@ -45,7 +54,7 @@ export interface CardProps {
  * </Card>
  * ```
  */
-export declare function Card({ header, media, children, modes, mediaAspectRatio, style, }: CardProps): import("react/jsx-runtime").JSX.Element;
+export declare function Card({ header, media, children, modes, mediaAspectRatio, style, onPress, disabled, accessibilityLabel, }: CardProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Card {
     var Title: ({ children, style, modes: propModes }: CardTextProps) => import("react/jsx-runtime").JSX.Element;
     var SupportText: ({ children, style, modes: propModes }: CardTextProps) => import("react/jsx-runtime").JSX.Element;

package/lib/typescript/src/components/CardFeedback/CardFeedback.d.ts

@@ -14,13 +14,22 @@ export interface CardFeedbackProps {
      * Style overrides for the card container.
      */
     style?: StyleProp<ViewStyle>;
+    /**
+     * Press handler for the whole card. When set, the card becomes pressable
+     * (rendered through a `Pressable` with `accessibilityRole="button"`).
+     */
+    onPress?: () => void;
+    /** Disable interaction when `onPress` is set. */
+    disabled?: boolean;
+    /** Accessibility label forwarded to the pressable wrapper. */
+    accessibilityLabel?: string;
 }
 /**
  * CardFeedback component from Figma node 1280:4481.
  *
  * Used for status updates, warnings, or feedback.
  */
-export declare function CardFeedback({ children, modes: propModes, style, }: CardFeedbackProps): import("react/jsx-runtime").JSX.Element;
+export declare function CardFeedback({ children, modes: propModes, style, onPress, disabled, accessibilityLabel, }: CardFeedbackProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace CardFeedback {
     var Icon: typeof import("./CardFeedback").Icon;
     var Content: typeof import("./CardFeedback").Content;

package/lib/typescript/src/components/CardInsight/CardInsight.d.ts

@@ -32,6 +32,15 @@ export type CardInsightProps = {
     modes?: Modes;
     /** Override container styles. */
     style?: StyleProp<ViewStyle>;
+    /**
+     * Press handler for the whole card. When set, the card becomes pressable
+     * (rendered through a `Pressable` with `accessibilityRole="button"`).
+     */
+    onPress?: () => void;
+    /** Disable interaction when `onPress` is set. */
+    disabled?: boolean;
+    /** Accessibility label forwarded to the pressable wrapper (defaults to `title`). */
+    accessibilityLabel?: string;
 };
 /**
  * `CardInsight` renders a single insight card composed of:
@@ -44,6 +53,6 @@ export type CardInsightProps = {
  * @component
  * @param {CardInsightProps} props
  */
-declare function CardInsight({ title, subtitle, badge, children, footer, divider, modes, style, }: CardInsightProps): import("react/jsx-runtime").JSX.Element;
+declare function CardInsight({ title, subtitle, badge, children, footer, divider, modes, style, onPress, disabled, accessibilityLabel, }: CardInsightProps): import("react/jsx-runtime").JSX.Element;
 export default CardInsight;
 //# sourceMappingURL=CardInsight.d.ts.map

package/lib/typescript/src/components/CardProviderInfo/CardProviderInfo.d.ts

@@ -12,6 +12,15 @@ export type CardProviderInfoProps = {
     modes?: Modes;
     /** Override container styles. */
     style?: StyleProp<ViewStyle>;
+    /**
+     * Press handler for the whole card. When set, the card becomes pressable
+     * (rendered through a `Pressable` with `accessibilityRole="button"`).
+     */
+    onPress?: () => void;
+    /** Disable interaction when `onPress` is set. */
+    disabled?: boolean;
+    /** Accessibility label forwarded to the pressable wrapper (defaults to `label`). */
+    accessibilityLabel?: string;
 };
 /**
  * CardProviderInfo displays a product header (ProductLabel) followed by a
@@ -20,6 +29,6 @@ export type CardProviderInfoProps = {
  * @component
  * @param {CardProviderInfoProps} props
  */
-declare function CardProviderInfo({ label, imageSource, children, modes, style, }: CardProviderInfoProps): import("react/jsx-runtime").JSX.Element;
+declare function CardProviderInfo({ label, imageSource, children, modes, style, onPress, disabled, accessibilityLabel, }: CardProviderInfoProps): import("react/jsx-runtime").JSX.Element;
 export default CardProviderInfo;
 //# sourceMappingURL=CardProviderInfo.d.ts.map

package/lib/typescript/src/components/DebitCard/DebitCard.d.ts

@@ -22,7 +22,16 @@ export type DebitCardProps = {
     modes?: Modes;
     /** Container style overrides */
     style?: StyleProp<ViewStyle>;
+    /**
+     * Press handler for the whole card. When set, the card becomes pressable
+     * (rendered through a `Pressable` with `accessibilityRole="button"`).
+     */
+    onPress?: () => void;
+    /** Disable interaction when `onPress` is set. */
+    disabled?: boolean;
+    /** Accessibility label forwarded to the pressable wrapper. */
+    accessibilityLabel?: string;
 };
-declare function DebitCard({ cardholderName, cardNumber, expireDate, bankName, cardType, cardArtSource, bankLogoSlot, providerLogoSlot, modes: propModes, style, }: DebitCardProps): import("react/jsx-runtime").JSX.Element;
+declare function DebitCard({ cardholderName, cardNumber, expireDate, bankName, cardType, cardArtSource, bankLogoSlot, providerLogoSlot, modes: propModes, style, onPress, disabled, accessibilityLabel, }: DebitCardProps): import("react/jsx-runtime").JSX.Element;
 export default DebitCard;
 //# sourceMappingURL=DebitCard.d.ts.map

package/lib/typescript/src/components/MediaCard/MediaCard.d.ts

@@ -33,6 +33,15 @@ export interface MediaCardProps {
      * Style overrides for the card container.
      */
     style?: StyleProp<ViewStyle>;
+    /**
+     * Press handler for the whole card. When set, the card becomes pressable
+     * (rendered through a `Pressable` with `accessibilityRole="button"`).
+     */
+    onPress?: () => void;
+    /** Disable interaction when `onPress` is set. */
+    disabled?: boolean;
+    /** Accessibility label forwarded to the pressable wrapper. */
+    accessibilityLabel?: string;
 }
 /**
  * MediaCard component implementation from Figma node 1241:4140.
@@ -52,7 +61,7 @@ export interface MediaCardProps {
  *    interactive elements inside the overlays without the wrapper itself
  *    capturing them.
  */
-export declare function MediaCard({ imageSource, ratio, media, children, modes, style, }: MediaCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function MediaCard({ imageSource, ratio, media, children, modes, style, onPress, disabled, accessibilityLabel, }: MediaCardProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace MediaCard {
     var Header: typeof import("./MediaCard").Header;
     var Title: typeof import("./MediaCard").Title;

package/lib/typescript/src/components/RechargeCard/RechargeCard.d.ts

@@ -42,10 +42,19 @@ export type RechargeCardProps = {
      */
     modes?: Modes;
     style?: ViewStyle;
+    /**
+     * Press handler for the whole card. When set, the card becomes pressable
+     * (rendered through a `Pressable` with `accessibilityRole="button"`).
+     */
+    onPress?: () => void;
+    /** Disable interaction when `onPress` is set. */
+    disabled?: boolean;
+    /** Accessibility label forwarded to the pressable wrapper (defaults to `title`). */
+    accessibilityLabel?: string;
 };
 /**
  * RechargeCard component implementation from Figma node 2235:937.
  * Displays a recharge plan with price, validity, data, and subscription details.
  */
-export default function RechargeCard({ title, price, validity, data, disclaimer, subscriptionContent, actions, modes, style, }: RechargeCardProps): import("react/jsx-runtime").JSX.Element;
+export default function RechargeCard({ title, price, validity, data, disclaimer, subscriptionContent, actions, modes, style, onPress, disabled, accessibilityLabel, }: RechargeCardProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=RechargeCard.d.ts.map

package/lib/typescript/src/components/TestimonialsCard/TestimonialsCard.d.ts

@@ -29,6 +29,13 @@ export type TestimonialsCardProps = {
      * from the title and body.
      */
     accessibilityLabel?: string;
+    /**
+     * Press handler for the whole card. When set, the card becomes pressable
+     * (rendered through a `Pressable` with `accessibilityRole="button"`).
+     */
+    onPress?: () => void;
+    /** Disable interaction when `onPress` is set. */
+    disabled?: boolean;
 };
 /**
  * TestimonialsCard renders a compact, fixed-width card with a circular avatar,
@@ -46,7 +53,7 @@ export type TestimonialsCardProps = {
  * />
  * ```
  */
-declare function TestimonialsCard({ title, body, modes, style, avatarProps, accessibilityLabel, }: TestimonialsCardProps): import("react/jsx-runtime").JSX.Element;
+declare function TestimonialsCard({ title, body, modes, style, avatarProps, accessibilityLabel, onPress, disabled, }: TestimonialsCardProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof TestimonialsCard>;
 export default _default;
 //# sourceMappingURL=TestimonialsCard.d.ts.map

package/lib/typescript/src/icons/registry.d.ts

@@ -4,7 +4,7 @@
  * Auto-generated from SVG files in src/icons/
  * DO NOT EDIT MANUALLY - Run "npm run icons:generate" to regenerate
  *
- * Generated: 2026-06-29T08:47:00.741Z
+ * Generated: 2026-06-29T11:40:01.320Z
  */
 export declare const iconRegistry: Record<string, {
     path: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jfs-components",
-  "version": "0.1.18",
+  "version": "0.1.19",
   "description": "React Native Jio Finance Components Library",
   "author": "sunshuaiqi@gmail.com",
   "license": "MIT",

package/src/components/Card/Card.tsx

@@ -1,5 +1,5 @@
 import React, { createContext, useContext, isValidElement, cloneElement, useMemo } from 'react';
-import { View, Text, StyleSheet, type ViewStyle, type TextStyle, type StyleProp } from 'react-native';
+import { View, Text, Pressable, type ViewStyle, type TextStyle, type StyleProp } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { EMPTY_MODES } from '../../utils/react-utils';
 import type { Modes } from '../../design-tokens'
@@ -39,6 +39,15 @@ export interface CardProps {
      * Style overrides for the card container.
      */
     style?: StyleProp<ViewStyle>;
+    /**
+     * Press handler for the whole card. When set, the card becomes pressable
+     * (rendered through a `Pressable` with `accessibilityRole="button"`).
+     */
+    onPress?: () => void;
+    /** Disable interaction when `onPress` is set. */
+    disabled?: boolean;
+    /** Accessibility label forwarded to the pressable wrapper. */
+    accessibilityLabel?: string;
 }
 
 /**
@@ -63,6 +72,9 @@ export function Card({
     modes = EMPTY_MODES,
     mediaAspectRatio = 154 / 116,
     style,
+    onPress,
+    disabled,
+    accessibilityLabel,
 }: CardProps) {
     // Resolve Card Container Tokens
     const backgroundColor = getVariableByName('card/background/color', modes);
@@ -124,23 +136,42 @@ export function Card({
         paddingVertical: contentPaddingVertical,
     };
 
+    const content = (
+        <>
+            {header && (
+                <View style={headerWrapperStyle}>
+                    {headerWithModes}
+                </View>
+            )}
+            {media && (
+                <View style={mediaWrapperStyle}>
+                    {mediaWithModes}
+                </View>
+            )}
+            <View style={contentWrapperStyle}>
+                {children}
+            </View>
+        </>
+    );
+
     return (
         <CardContext.Provider value={{ modes }}>
-            <View style={[containerStyle, style]}>
-                {header && (
-                    <View style={headerWrapperStyle}>
-                        {headerWithModes}
-                    </View>
-                )}
-                {media && (
-                    <View style={mediaWrapperStyle}>
-                        {mediaWithModes}
-                    </View>
-                )}
-                <View style={contentWrapperStyle}>
-                    {children}
+            {onPress ? (
+                <Pressable
+                    style={[containerStyle, style]}
+                    onPress={onPress}
+                    disabled={disabled}
+                    accessibilityRole="button"
+                    accessibilityLabel={accessibilityLabel}
+                    accessibilityState={{ disabled: !!disabled }}
+                >
+                    {content}
+                </Pressable>
+            ) : (
+                <View style={[containerStyle, style]} accessibilityLabel={accessibilityLabel}>
+                    {content}
                 </View>
-            </View>
+            )}
         </CardContext.Provider>
     );
 }

package/src/components/CardFeedback/CardFeedback.tsx

@@ -1,5 +1,5 @@
 import React, { createContext, useContext, isValidElement, cloneElement } from 'react';
-import { View, Text, StyleSheet, type ViewStyle, type TextStyle, type StyleProp, Image } from 'react-native';
+import { View, Text, Pressable, type ViewStyle, type TextStyle, type StyleProp, Image } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import IconComponent from '../../icons/Icon';
 import type { Modes } from '../../design-tokens'
@@ -22,6 +22,15 @@ export interface CardFeedbackProps {
      * Style overrides for the card container.
      */
     style?: StyleProp<ViewStyle>;
+    /**
+     * Press handler for the whole card. When set, the card becomes pressable
+     * (rendered through a `Pressable` with `accessibilityRole="button"`).
+     */
+    onPress?: () => void;
+    /** Disable interaction when `onPress` is set. */
+    disabled?: boolean;
+    /** Accessibility label forwarded to the pressable wrapper. */
+    accessibilityLabel?: string;
 }
 
 /**
@@ -33,6 +42,9 @@ export function CardFeedback({
     children,
     modes: propModes,
     style,
+    onPress,
+    disabled,
+    accessibilityLabel,
 }: CardFeedbackProps) {
     const modes = {
         'Appearance.System': 'positive',
@@ -61,9 +73,22 @@ export function CardFeedback({
 
     return (
         <CardFeedbackContext.Provider value={{ modes }}>
-            <View style={[containerStyle, style]}>
-                {children}
-            </View>
+            {onPress ? (
+                <Pressable
+                    style={[containerStyle, style]}
+                    onPress={onPress}
+                    disabled={disabled}
+                    accessibilityRole="button"
+                    accessibilityLabel={accessibilityLabel}
+                    accessibilityState={{ disabled: !!disabled }}
+                >
+                    {children}
+                </Pressable>
+            ) : (
+                <View style={[containerStyle, style]} accessibilityLabel={accessibilityLabel}>
+                    {children}
+                </View>
+            )}
         </CardFeedbackContext.Provider>
     );
 }

package/src/components/CardInsight/CardInsight.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import {
     View,
     Text,
+    Pressable,
     type StyleProp,
     type ViewStyle,
     type TextStyle,
@@ -45,6 +46,15 @@ export type CardInsightProps = {
     modes?: Modes
     /** Override container styles. */
     style?: StyleProp<ViewStyle>
+    /**
+     * Press handler for the whole card. When set, the card becomes pressable
+     * (rendered through a `Pressable` with `accessibilityRole="button"`).
+     */
+    onPress?: () => void
+    /** Disable interaction when `onPress` is set. */
+    disabled?: boolean
+    /** Accessibility label forwarded to the pressable wrapper (defaults to `title`). */
+    accessibilityLabel?: string
 }
 
 /**
@@ -67,6 +77,9 @@ function CardInsight({
     divider,
     modes = EMPTY_MODES,
     style,
+    onPress,
+    disabled,
+    accessibilityLabel,
 }: CardInsightProps) {
     const background =
         (getVariableByName('cardInsight/background', modes) as string | null) ?? '#ffffff'
@@ -160,23 +173,20 @@ function CardInsight({
     const footerNode = renderFooter()
     const showDivider = footerNode !== null && divider !== false && divider !== null
 
-    return (
-        <View
-            style={[
-                {
-                    backgroundColor: background,
-                    borderRadius: radius,
-                    borderWidth,
-                    borderColor,
-                    paddingHorizontal,
-                    paddingVertical,
-                    gap,
-                    overflow: 'hidden',
-                    alignItems: 'stretch',
-                },
-                style,
-            ]}
-        >
+    const containerStyle: ViewStyle = {
+        backgroundColor: background,
+        borderRadius: radius,
+        borderWidth,
+        borderColor,
+        paddingHorizontal,
+        paddingVertical,
+        gap,
+        overflow: 'hidden',
+        alignItems: 'stretch',
+    }
+
+    const content = (
+        <>
             <View
                 style={{
                     flexDirection: 'row',
@@ -237,6 +247,27 @@ function CardInsight({
             {showDivider ? renderDivider() : null}
 
             {footerNode}
+        </>
+    )
+
+    if (onPress) {
+        return (
+            <Pressable
+                style={[containerStyle, style]}
+                onPress={onPress}
+                disabled={disabled}
+                accessibilityRole="button"
+                accessibilityLabel={accessibilityLabel ?? title}
+                accessibilityState={{ disabled: !!disabled }}
+            >
+                {content}
+            </Pressable>
+        )
+    }
+
+    return (
+        <View style={[containerStyle, style]} accessibilityLabel={accessibilityLabel}>
+            {content}
         </View>
     )
 }

package/src/components/CardProviderInfo/CardProviderInfo.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { View, type ViewStyle, type StyleProp, type ImageSourcePropType } from 'react-native'
+import { View, Pressable, type ViewStyle, type StyleProp, type ImageSourcePropType } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import ProductLabel from '../ProductLabel/ProductLabel'
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
@@ -16,6 +16,15 @@ export type CardProviderInfoProps = {
   modes?: Modes
   /** Override container styles. */
   style?: StyleProp<ViewStyle>
+  /**
+   * Press handler for the whole card. When set, the card becomes pressable
+   * (rendered through a `Pressable` with `accessibilityRole="button"`).
+   */
+  onPress?: () => void
+  /** Disable interaction when `onPress` is set. */
+  disabled?: boolean
+  /** Accessibility label forwarded to the pressable wrapper (defaults to `label`). */
+  accessibilityLabel?: string
 }
 
 /**
@@ -31,6 +40,9 @@ function CardProviderInfo({
   children,
   modes = EMPTY_MODES,
   style,
+  onPress,
+  disabled,
+  accessibilityLabel,
 }: CardProviderInfoProps) {
   const background = getVariableByName('card/providerInfo/background', modes) ?? '#fef4e5'
   const border = getVariableByName('card/providerInfo/border', modes) ?? '#fef4e5'
@@ -59,8 +71,8 @@ function CardProviderInfo({
     rows.push(childArray.slice(i, i + 2))
   }
 
-  return (
-    <View style={[containerStyle, style]}>
+  const content = (
+    <>
       <ProductLabel label={label} imageSource={imageSource} modes={modes} />
       {childArray.length > 0 && (
         <View style={{ rowGap: gridGapNum }}>
@@ -75,6 +87,27 @@ function CardProviderInfo({
           ))}
         </View>
       )}
+    </>
+  )
+
+  if (onPress) {
+    return (
+      <Pressable
+        style={[containerStyle, style]}
+        onPress={onPress}
+        disabled={disabled}
+        accessibilityRole="button"
+        accessibilityLabel={accessibilityLabel ?? label}
+        accessibilityState={{ disabled: !!disabled }}
+      >
+        {content}
+      </Pressable>
+    )
+  }
+
+  return (
+    <View style={[containerStyle, style]} accessibilityLabel={accessibilityLabel}>
+      {content}
     </View>
   )
 }

package/src/components/DebitCard/DebitCard.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { View, Text, Image, type ViewStyle, type TextStyle, type ImageStyle, type StyleProp, type ImageSourcePropType } from 'react-native'
+import { View, Text, Image, Pressable, type ViewStyle, type TextStyle, type ImageStyle, type StyleProp, type ImageSourcePropType } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import { cloneChildrenWithModes, EMPTY_MODES } from '../../utils/react-utils'
@@ -28,6 +28,15 @@ export type DebitCardProps = {
     modes?: Modes;
     /** Container style overrides */
     style?: StyleProp<ViewStyle>;
+    /**
+     * Press handler for the whole card. When set, the card becomes pressable
+     * (rendered through a `Pressable` with `accessibilityRole="button"`).
+     */
+    onPress?: () => void;
+    /** Disable interaction when `onPress` is set. */
+    disabled?: boolean;
+    /** Accessibility label forwarded to the pressable wrapper. */
+    accessibilityLabel?: string;
 };
 
 function DebitCard({
@@ -41,6 +50,9 @@ function DebitCard({
     providerLogoSlot,
     modes: propModes = EMPTY_MODES,
     style,
+    onPress,
+    disabled,
+    accessibilityLabel,
 }: DebitCardProps) {
     const { modes: globalModes } = useTokens()
     const modes = { ...globalModes, ...propModes }
@@ -149,8 +161,8 @@ function DebitCard({
         return cardArtSource
     }, [cardArtSource])
 
-    return (
-        <View style={[containerStyle, style]}>
+    const content = (
+        <>
             <View style={headerStyle}>
                 <View style={headerLeftStyle}>
                     {bankLogoSlot ? cloneChildrenWithModes(bankLogoSlot, modes) : null}
@@ -179,6 +191,27 @@ function DebitCard({
                     <Text style={textStyle}>{expireDate}</Text>
                 </View>
             </View>
+        </>
+    )
+
+    if (onPress) {
+        return (
+            <Pressable
+                style={[containerStyle, style]}
+                onPress={onPress}
+                disabled={disabled}
+                accessibilityRole="button"
+                accessibilityLabel={accessibilityLabel ?? `${bankName} ${cardType} ${cardNumber}`}
+                accessibilityState={{ disabled: !!disabled }}
+            >
+                {content}
+            </Pressable>
+        )
+    }
+
+    return (
+        <View style={[containerStyle, style]} accessibilityLabel={accessibilityLabel}>
+            {content}
         </View>
     )
 }

package/src/components/MediaCard/MediaCard.tsx

@@ -1,5 +1,5 @@
 import React, { createContext, useContext } from 'react'
-import { View, Text, StyleSheet, type ViewStyle, type TextStyle, type StyleProp, type ImageSourcePropType } from 'react-native'
+import { View, Text, Pressable, StyleSheet, type ViewStyle, type TextStyle, type StyleProp, type ImageSourcePropType } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import Image from '../Image/Image'
 import GlassFill, { type GlassTint } from '../../utils/GlassFill/GlassFill'
@@ -40,6 +40,15 @@ export interface MediaCardProps {
      * Style overrides for the card container.
      */
     style?: StyleProp<ViewStyle>
+    /**
+     * Press handler for the whole card. When set, the card becomes pressable
+     * (rendered through a `Pressable` with `accessibilityRole="button"`).
+     */
+    onPress?: () => void
+    /** Disable interaction when `onPress` is set. */
+    disabled?: boolean
+    /** Accessibility label forwarded to the pressable wrapper. */
+    accessibilityLabel?: string
 }
 
 /**
@@ -67,6 +76,9 @@ export function MediaCard({
     children,
     modes = EMPTY_MODES,
     style,
+    onPress,
+    disabled,
+    accessibilityLabel,
 }: MediaCardProps) {
     const radius = parseFloat(getVariableByName('cardMedia/radius', modes))
 
@@ -88,16 +100,35 @@ export function MediaCard({
         ) : null
     )
 
+    const content = (
+        <>
+            {background}
+            {children != null ? (
+                <View style={StyleSheet.absoluteFill} pointerEvents="box-none">
+                    {children}
+                </View>
+            ) : null}
+        </>
+    )
+
     return (
         <MediaCardContext.Provider value={{ modes }}>
-            <View style={[containerStyle, style]}>
-                {background}
-                {children != null ? (
-                    <View style={StyleSheet.absoluteFill} pointerEvents="box-none">
-                        {children}
-                    </View>
-                ) : null}
-            </View>
+            {onPress ? (
+                <Pressable
+                    style={[containerStyle, style]}
+                    onPress={onPress}
+                    disabled={disabled}
+                    accessibilityRole="button"
+                    accessibilityLabel={accessibilityLabel}
+                    accessibilityState={{ disabled: !!disabled }}
+                >
+                    {content}
+                </Pressable>
+            ) : (
+                <View style={[containerStyle, style]} accessibilityLabel={accessibilityLabel}>
+                    {content}
+                </View>
+            )}
         </MediaCardContext.Provider>
     )
 }