jfs-components 0.1.17 → 0.1.19

package/lib/module/utils/GlassFill/GlassFill.js

@@ -3,7 +3,6 @@
 import React, { useId } from 'react';
 import { View, StyleSheet, Platform, UIManager } from 'react-native';
 import { BlurView } from '@react-native-community/blur';
-import MaskedView from '@react-native-masked-view/masked-view';
 import Svg, { Defs, LinearGradient, Stop, Rect } from 'react-native-svg';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const DEFAULT_FALLBACK_DARK = '#1414174a';
@@ -14,32 +13,30 @@ const DEFAULT_FALLBACK_LIGHT = '#ffffff66';
 const NATIVE_BLUR_NAME = Platform.OS === 'android' ? 'AndroidBlurView' : 'BlurView';
 
 /**
- * Alpha stop on a layer's vertical reveal mask. `offset` is the vertical
- * position (0 = top of the surface, 1 = bottom); `opacity` is the mask alpha
- * there (0 = layer hidden / fully clear, 1 = layer fully applied).
+ * Alpha stop on the no-native-blur fallback gradient. `offset` is the vertical
+ * position (0 = top of the surface, 1 = bottom); `opacity` is the tint alpha
+ * there (0 = fully clear, 1 = full fallback color).
  *
- * Using several stops (rather than a single linear 0 → 1 ramp) lets each layer
- * EASE in, so the blur swells smoothly toward the bottom instead of appearing
- * along a hard horizontal seam. That soft S-curve is what gives the surface its
- * "glass" feel rather than a flat translucent panel.
+ * Using several stops (rather than a single linear 0 → 1 ramp) eases the tint
+ * in, so it swells smoothly toward the bottom instead of along a hard seam —
+ * the soft S-curve that gives the surface its "glass" feel.
  */
 
 /**
- * A single layer of the progressive ramp.
- *  - `stops` describe how this layer is revealed from top to bottom.
- *  - `amount` is this layer's share (0–1) of the max `blurAmount`.
+ * A single bottom-anchored band of the progressive blur stack.
+ *  - `start` is where the band begins, as a fraction from the top (0 = covers
+ *    the whole surface, 0.8 = only the bottom 20%). Each band runs from `start`
+ *    to the bottom.
+ *  - `amount` is the band's own blur strength as a share (0–1) of the peak.
  *
- * We stack just TWO layers on both platforms: a faint base blur that covers
- * most of the footer and a slightly stronger accent concentrated near the
- * bottom. Keeping the overlap shallow avoids compounding the dark tint of
- * multiple `BlurView`s (which is what made the earlier 3-layer ramp read as a
- * heavy block), while still giving a genuine variable-radius result — the blur
- * radius grows toward the bottom where the two layers overlap.
+ * Because each `BlurView` re-blurs everything rendered behind it, the bands
+ * COMPOUND where they overlap (toward the bottom), so the effective radius grows
+ * downward without any masking. The top region is covered only by the first,
+ * faint band; the bottom is covered by all of them.
  */
 
-// Base reveal: a faint trace of blur begins near the very top and grows
-// steadily downward, so the upper half still carries visible glass rather than
-// snapping clear. Also reused for the no-native-blur fallback scrim.
+// Eased tint ramp for the no-native-blur fallback scrim. A faint trace begins
+// near the very top and grows steadily downward.
 const BASE_MASK_STOPS = [{
   offset: 0.0,
   opacity: 0
@@ -56,26 +53,26 @@ const BASE_MASK_STOPS = [{
   offset: 1.0,
   opacity: 1
 }];
-const PROGRESSIVE_LAYERS = [{
-  amount: 0.65,
-  stops: BASE_MASK_STOPS
-},
-// Accent: the strongest blur, gathering over the lower portion for depth.
-{
-  amount: 1.0,
-  stops: [{
-    offset: 0.0,
-    opacity: 0
-  }, {
-    offset: 0.3,
-    opacity: 0.15
-  }, {
-    offset: 0.65,
-    opacity: 0.65
-  }, {
-    offset: 1.0,
-    opacity: 1
-  }]
+
+// Bottom-anchored blur bands (top → bottom). The first band is faint and covers
+// the whole surface so the top reads as barely-there glass; each subsequent band
+// starts lower and adds strength, compounding toward the bottom for a smooth
+// variable-radius result. Quadrature of these shares lands the bottom at ~peak.
+const PROGRESSIVE_BANDS = [{
+  start: 0.0,
+  amount: 0.18
+}, {
+  start: 0.3,
+  amount: 0.28
+}, {
+  start: 0.52,
+  amount: 0.38
+}, {
+  start: 0.7,
+  amount: 0.5
+}, {
+  start: 0.84,
+  amount: 0.6
 }];
 
 /**
@@ -108,13 +105,14 @@ const NATIVE_BLUR_SUPPORTED = (() => {
 })();
 
 /**
- * Vertical alpha-gradient mask drawn with `react-native-svg`. `MaskedView`
- * reveals its child in proportion to this mask's alpha, so feeding it an eased
- * multi-stop gradient makes the layer's blur swell in smoothly from top to
- * bottom instead of along a hard seam.
+ * Vertical color-gradient scrim drawn with `react-native-svg` — used as the
+ * no-native-blur fallback. Paints `color` at the eased per-stop alpha so the
+ * tint swells smoothly from clear (top) to full (bottom), exactly mirroring the
+ * old `MaskedView`-over-solid-color fallback but with no native-view masking.
  */
-function GradientMask({
+function GradientScrim({
   id,
+  color,
   stops
 }) {
   return /*#__PURE__*/_jsxs(Svg, {
@@ -129,7 +127,7 @@ function GradientMask({
         y2: "1",
         children: stops.map((s, i) => /*#__PURE__*/_jsx(Stop, {
           offset: s.offset,
-          stopColor: "#000000",
+          stopColor: color,
           stopOpacity: s.opacity
         }, i))
       })
@@ -194,38 +192,37 @@ function GlassFill({
       return /*#__PURE__*/_jsx(View, {
         style: [StyleSheet.absoluteFill, style],
         pointerEvents: "none",
-        children: /*#__PURE__*/_jsx(MaskedView, {
-          style: StyleSheet.absoluteFill,
-          maskElement: /*#__PURE__*/_jsx(GradientMask, {
-            id: `${maskId}-fb`,
-            stops: BASE_MASK_STOPS
-          }),
-          children: /*#__PURE__*/_jsx(View, {
-            style: [StyleSheet.absoluteFill, {
-              backgroundColor: fallbackColor
-            }]
-          })
+        children: /*#__PURE__*/_jsx(GradientScrim, {
+          id: `${maskId}-fb`,
+          color: fallbackColor,
+          stops: BASE_MASK_STOPS
         })
       });
     }
     return /*#__PURE__*/_jsx(View, {
       style: [StyleSheet.absoluteFill, style],
       pointerEvents: "none",
-      children: PROGRESSIVE_LAYERS.map((layer, i) => {
-        const amount = Math.max(1, Math.round(peakBlur * layer.amount));
-        return /*#__PURE__*/_jsx(MaskedView, {
-          style: StyleSheet.absoluteFill,
-          maskElement: /*#__PURE__*/_jsx(GradientMask, {
-            id: `${maskId}-${i}`,
-            stops: layer.stops
-          }),
-          children: /*#__PURE__*/_jsx(BlurView, {
-            style: StyleSheet.absoluteFill,
-            blurType: blurType,
-            blurAmount: amount,
-            reducedTransparencyFallbackColor: fallbackColor
-          })
-        }, i);
+      children: PROGRESSIVE_BANDS.map((band, i) => {
+        const amount = Math.max(1, Math.round(peakBlur * band.amount));
+        return (
+          /*#__PURE__*/
+          // Each band is clipped to start at `band.start` and run to
+          // the bottom; its `BlurView` blurs the content (and any
+          // lower bands) behind it, so the radius compounds downward.
+          _jsx(View, {
+            style: [StyleSheet.absoluteFill, {
+              top: `${band.start * 100}%`,
+              overflow: 'hidden'
+            }],
+            pointerEvents: "none",
+            children: /*#__PURE__*/_jsx(BlurView, {
+              style: StyleSheet.absoluteFill,
+              blurType: blurType,
+              blurAmount: amount,
+              reducedTransparencyFallbackColor: fallbackColor
+            })
+          }, i)
+        );
       })
     });
   }

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-26T16:43:17.033Z
+ * Generated: 2026-06-29T11:40:01.320Z
  */
 export declare const iconRegistry: Record<string, {
     path: string;

package/lib/typescript/src/utils/GlassFill/GlassFill.d.ts

@@ -25,10 +25,17 @@ export interface GlassFillProps {
     /**
      * Render a *progressive* (variable) blur instead of a uniform one: fully
      * clear at the top, easing into a soft blur toward the bottom. Implemented
-     * by stacking two `MaskedView` + `BlurView` layers (a faint base + a
-     * slightly stronger accent near the bottom), each revealed via an eased
-     * multi-stop SVG gradient mask so the blur swells smoothly rather than
-     * along a hard seam. Works on iOS and Android with no extra native module.
+     * mask-free by stacking several bottom-anchored `BlurView` "bands": each
+     * band is clipped to start a little lower than the last, and because a
+     * `BlurView` blurs whatever is rendered behind it, the bands COMPOUND toward
+     * the bottom (a lower band re-blurs the already-blurred output above it) so
+     * the effective radius swells smoothly downward. This deliberately avoids
+     * masking a native view — the old implementation wrapped each `BlurView` in
+     * `@react-native-masked-view/masked-view`, a legacy Paper component that
+     * resolves to a plain object (crashing "Element type is invalid") under the
+     * New Architecture interop. Works on iOS and Android with no extra native
+     * module. When the native blur isn't linked at all, falls back to a pure
+     * `react-native-svg` gradient scrim (see below).
      */
     progressive?: boolean;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jfs-components",
-  "version": "0.1.17",
+  "version": "0.1.19",
   "description": "React Native Jio Finance Components Library",
   "author": "sunshuaiqi@gmail.com",
   "license": "MIT",
@@ -83,7 +83,6 @@
     "@expo/metro-runtime": "^6.1.2",
     "@gorhom/bottom-sheet": "5.2.6",
     "@react-native-async-storage/async-storage": "^2.2.0",
-    "@react-native-masked-view/masked-view": "^0.3.2",
     "@shopify/flash-list": "^2.2.0",
     "ajv": "^8.17.1",
     "ajv-keywords": "^5.1.0",

package/src/components/AvatarGroup/AvatarGroup.tsx

@@ -1,7 +1,6 @@
-import React from 'react';
+import React, { useId } from 'react';
 import { View, Platform, type ViewStyle } from 'react-native';
-import MaskedView from '@react-native-masked-view/masked-view';
-import Svg, { Path } from 'react-native-svg';
+import Svg, { Defs, Mask, Path, ForeignObject } from 'react-native-svg';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { EMPTY_MODES, flattenChildren } from '../../utils/react-utils';
 import type { Modes } from '../../design-tokens'
@@ -13,6 +12,11 @@ type AvatarGroupProps = {
 } & React.ComponentProps<typeof View>;
 
 function AvatarGroup({ modes = EMPTY_MODES, children, style, ...rest }: AvatarGroupProps) {
+    // Stable, collision-free base for the per-avatar SVG mask ids so multiple
+    // groups on one screen (and multiple avatars in a group) never clash.
+    const rawId = useId();
+    const maskBaseId = `avatargroup-mask-${rawId.replace(/[^a-zA-Z0-9_-]/g, '')}`;
+
     const gap = getVariableByName('avatarGroup/gap', modes);
 
 
@@ -43,7 +47,11 @@ function AvatarGroup({ modes = EMPTY_MODES, children, style, ...rest }: AvatarGr
     const holeRadius = effectiveRadius + borderSizeInt;
     const holeCenter = { x: nextAvatarX + r, y: r };
 
-    // Native Mask Path
+    // Native mask path: the full avatar square MINUS a circular hole where the
+    // next (overlapping) avatar sits. Drawn as a single `evenodd` path so the
+    // hole is cut out of the square. Filled WHITE because react-native-svg's
+    // `<Mask>` is a *luminance* mask (white = visible, black/absent = hidden) —
+    // the inverse of the old `@react-native-masked-view` alpha convention.
     const rectPath = `M 0 0 h ${avatarSizeInt} v ${avatarSizeInt} h -${avatarSizeInt} z`;
     const circlePath = `M ${holeCenter.x},${holeCenter.y} m -${holeRadius},0 a ${holeRadius},${holeRadius} 0 1,0 ${holeRadius * 2},0 a ${holeRadius},${holeRadius} 0 1,0 -${holeRadius * 2},0`;
     const maskPath = `${rectPath} ${circlePath}`;
@@ -101,23 +109,41 @@ function AvatarGroup({ modes = EMPTY_MODES, children, style, ...rest }: AvatarGr
                     );
                 }
 
-                // Native MaskedView
+                // Native: mask the avatar with react-native-svg instead of the
+                // unmaintained `@react-native-masked-view/masked-view`, whose
+                // legacy `requireNativeComponent('RNCMaskedView')` resolves to a
+                // plain object (crashing "Element type is invalid") under the New
+                // Architecture interop. react-native-svg ships a Fabric/codegen
+                // `<Mask>` + `<ForeignObject>` that resolves on both architectures;
+                // the avatar is hosted inside the `<ForeignObject>` and revealed
+                // through the luminance mask.
+                const maskId = `${maskBaseId}-${index}`;
                 return (
                     <View key={index} style={wrapperStyle}>
-                        <MaskedView
-                            style={{ flex: 1, height: '100%' }}
-                            maskElement={
-                                <Svg height="100%" width="100%" viewBox={`0 0 ${avatarSizeInt} ${avatarSizeInt}`}>
-                                    <Path
-                                        d={maskPath}
-                                        fill="black"
-                                        fillRule="evenodd"
-                                    />
-                                </Svg>
-                            }
+                        <Svg
+                            height="100%"
+                            width="100%"
+                            viewBox={`0 0 ${avatarSizeInt} ${avatarSizeInt}`}
                         >
-                            {clonedChild}
-                        </MaskedView>
+                            <Defs>
+                                <Mask
+                                    id={maskId}
+                                    maskUnits="userSpaceOnUse"
+                                    maskContentUnits="userSpaceOnUse"
+                                >
+                                    <Path d={maskPath} fill="white" fillRule="evenodd" />
+                                </Mask>
+                            </Defs>
+                            <ForeignObject
+                                x="0"
+                                y="0"
+                                width={avatarSizeInt}
+                                height={avatarSizeInt}
+                                mask={`url(#${maskId})`}
+                            >
+                                {clonedChild}
+                            </ForeignObject>
+                        </Svg>
                     </View>
                 );
             })}

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