jfs-components 0.1.17 → 0.1.19

package/CHANGELOG.md

@@ -4,6 +4,21 @@ All notable changes to this project are documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
+## [0.1.19] - 2026-06-29
+
+- Card components — optional `onPress` handler added to `Card`, `CardInsight`, `CardProviderInfo`, `MediaCard`, `DebitCard`, `CardFeedback`, `RechargeCard`, and `TestimonialsCard`. When set, the card renders through a `Pressable` with `accessibilityRole="button"`, optional `disabled`, and a pressed-state opacity feedback; when omitted, behaviour is unchanged.
+
+---
+
+## [0.1.18] - 2026-06-29
+
+- **Fix:** Remove `@react-native-masked-view/masked-view` — fixes `Element type is invalid` crash on New Architecture (`ProductMerchandisingCard` image cards, `AvatarGroup`, `GlassFill` progressive blur). All masking now uses `react-native-svg` (no new peer deps; consumers can drop `masked-view` if added as a workaround).
+- `ProductMerchandisingCard` — footer image blur via SVG `FeGaussianBlur` + gradient mask (cross-platform, no per-platform `blurRadius` tuning).
+- `AvatarGroup` — overlap cutout via SVG `Mask` + `ForeignObject`.
+- `GlassFill` — progressive blur via stacked `BlurView` bands; no-native-blur fallback uses SVG gradient scrim.
+
+---
+
 ## [0.1.16] - 2026-06-26
 
 - Added `CarouselCardAccounts` — horizontally scrollable account-card strip built on `Carousel` with token-driven gap and snap-aligned card slots.

package/lib/commonjs/components/AvatarGroup/AvatarGroup.js

@@ -4,21 +4,23 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
-var _maskedView = _interopRequireDefault(require("@react-native-masked-view/masked-view"));
 var _reactNativeSvg = _interopRequireWildcard(require("react-native-svg"));
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
 var _reactUtils = require("../../utils/react-utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function AvatarGroup({
   modes = _reactUtils.EMPTY_MODES,
   children,
   style,
   ...rest
 }) {
+  // 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 = (0, _react.useId)();
+  const maskBaseId = `avatargroup-mask-${rawId.replace(/[^a-zA-Z0-9_-]/g, '')}`;
   const gap = (0, _figmaVariablesResolver.getVariableByName)('avatarGroup/gap', modes);
   const avatarSize = (0, _figmaVariablesResolver.getVariableByName)('avatar/size', modes);
   const avatarRadius = (0, _figmaVariablesResolver.getVariableByName)('avatar/radius', modes);
@@ -47,7 +49,11 @@ function AvatarGroup({
     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}`;
@@ -105,25 +111,40 @@ function AvatarGroup({
         }, index);
       }
 
-      // 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 /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: wrapperStyle,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_maskedView.default, {
-          style: {
-            flex: 1,
-            height: '100%'
-          },
-          maskElement: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.default, {
-            height: "100%",
-            width: "100%",
-            viewBox: `0 0 ${avatarSizeInt} ${avatarSizeInt}`,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Path, {
-              d: maskPath,
-              fill: "black",
-              fillRule: "evenodd"
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.default, {
+          height: "100%",
+          width: "100%",
+          viewBox: `0 0 ${avatarSizeInt} ${avatarSizeInt}`,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Defs, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Mask, {
+              id: maskId,
+              maskUnits: "userSpaceOnUse",
+              maskContentUnits: "userSpaceOnUse",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Path, {
+                d: maskPath,
+                fill: "white",
+                fillRule: "evenodd"
+              })
             })
-          }),
-          children: clonedChild
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.ForeignObject, {
+            x: "0",
+            y: "0",
+            width: avatarSizeInt,
+            height: avatarSizeInt,
+            mask: `url(#${maskId})`,
+            children: clonedChild
+          })]
         })
       }, index);
     })

package/lib/commonjs/components/Card/Card.js

@@ -38,7 +38,10 @@ function Card({
   children,
   modes = _reactUtils.EMPTY_MODES,
   mediaAspectRatio = 154 / 116,
-  style
+  style,
+  onPress,
+  disabled,
+  accessibilityLabel
 }) {
   // Resolve Card Container Tokens
   const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('card/background/color', modes);
@@ -102,22 +105,36 @@ function Card({
     paddingHorizontal: contentPaddingHorizontal,
     paddingVertical: contentPaddingVertical
   };
+  const content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [header && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: headerWrapperStyle,
+      children: headerWithModes
+    }), media && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: mediaWrapperStyle,
+      children: mediaWithModes
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: contentWrapperStyle,
+      children: children
+    })]
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(CardContext.Provider, {
     value: {
       modes
     },
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    children: onPress ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+      style: [containerStyle, style],
+      onPress: onPress,
+      disabled: disabled,
+      accessibilityRole: "button",
+      accessibilityLabel: accessibilityLabel,
+      accessibilityState: {
+        disabled: !!disabled
+      },
+      children: content
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: [containerStyle, style],
-      children: [header && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: headerWrapperStyle,
-        children: headerWithModes
-      }), media && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: mediaWrapperStyle,
-        children: mediaWithModes
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: contentWrapperStyle,
-        children: children
-      })]
+      accessibilityLabel: accessibilityLabel,
+      children: content
     })
   });
 }

package/lib/commonjs/components/CardFeedback/CardFeedback.js

@@ -29,7 +29,10 @@ const CardFeedbackContext = /*#__PURE__*/(0, _react.createContext)({});
 function CardFeedback({
   children,
   modes: propModes,
-  style
+  style,
+  onPress,
+  disabled,
+  accessibilityLabel
 }) {
   const modes = {
     'Appearance.System': 'positive',
@@ -58,8 +61,19 @@ function CardFeedback({
     value: {
       modes
     },
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    children: onPress ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+      style: [containerStyle, style],
+      onPress: onPress,
+      disabled: disabled,
+      accessibilityRole: "button",
+      accessibilityLabel: accessibilityLabel,
+      accessibilityState: {
+        disabled: !!disabled
+      },
+      children: children
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: [containerStyle, style],
+      accessibilityLabel: accessibilityLabel,
       children: children
     })
   });

package/lib/commonjs/components/CardInsight/CardInsight.js

@@ -33,7 +33,10 @@ function CardInsight({
   footer,
   divider,
   modes = _reactUtils.EMPTY_MODES,
-  style
+  style,
+  onPress,
+  disabled,
+  accessibilityLabel
 }) {
   const background = (0, _figmaVariablesResolver.getVariableByName)('cardInsight/background', modes) ?? '#ffffff';
   const radius = (0, _figmaVariablesResolver.getVariableByName)('cardInsight/radius', modes) ?? 12;
@@ -106,18 +109,18 @@ function CardInsight({
   };
   const footerNode = renderFooter();
   const showDivider = footerNode !== null && divider !== false && divider !== null;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: [{
-      backgroundColor: background,
-      borderRadius: radius,
-      borderWidth,
-      borderColor,
-      paddingHorizontal,
-      paddingVertical,
-      gap,
-      overflow: 'hidden',
-      alignItems: 'stretch'
-    }, style],
+  const containerStyle = {
+    backgroundColor: background,
+    borderRadius: radius,
+    borderWidth,
+    borderColor,
+    paddingHorizontal,
+    paddingVertical,
+    gap,
+    overflow: 'hidden',
+    alignItems: 'stretch'
+  };
+  const content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: {
         flexDirection: 'row',
@@ -165,5 +168,23 @@ function CardInsight({
       children: renderSlot()
     }), showDivider ? renderDivider() : null, footerNode]
   });
+  if (onPress) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+      style: [containerStyle, style],
+      onPress: onPress,
+      disabled: disabled,
+      accessibilityRole: "button",
+      accessibilityLabel: accessibilityLabel ?? title,
+      accessibilityState: {
+        disabled: !!disabled
+      },
+      children: content
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [containerStyle, style],
+    accessibilityLabel: accessibilityLabel,
+    children: content
+  });
 }
 var _default = exports.default = CardInsight;

package/lib/commonjs/components/CardProviderInfo/CardProviderInfo.js

@@ -23,7 +23,10 @@ function CardProviderInfo({
   imageSource,
   children,
   modes = _reactUtils.EMPTY_MODES,
-  style
+  style,
+  onPress,
+  disabled,
+  accessibilityLabel
 }) {
   const background = (0, _figmaVariablesResolver.getVariableByName)('card/providerInfo/background', modes) ?? '#fef4e5';
   const border = (0, _figmaVariablesResolver.getVariableByName)('card/providerInfo/border', modes) ?? '#fef4e5';
@@ -48,8 +51,7 @@ function CardProviderInfo({
   for (let i = 0; i < childArray.length; i += 2) {
     rows.push(childArray.slice(i, i + 2));
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: [containerStyle, style],
+  const content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ProductLabel.default, {
       label: label,
       imageSource: imageSource,
@@ -72,5 +74,23 @@ function CardProviderInfo({
       }, i))
     })]
   });
+  if (onPress) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+      style: [containerStyle, style],
+      onPress: onPress,
+      disabled: disabled,
+      accessibilityRole: "button",
+      accessibilityLabel: accessibilityLabel ?? label,
+      accessibilityState: {
+        disabled: !!disabled
+      },
+      children: content
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [containerStyle, style],
+    accessibilityLabel: accessibilityLabel,
+    children: content
+  });
 }
 var _default = exports.default = CardProviderInfo;

package/lib/commonjs/components/DebitCard/DebitCard.js

@@ -22,7 +22,10 @@ function DebitCard({
   bankLogoSlot,
   providerLogoSlot,
   modes: propModes = _reactUtils.EMPTY_MODES,
-  style
+  style,
+  onPress,
+  disabled,
+  accessibilityLabel
 }) {
   const {
     modes: globalModes
@@ -121,8 +124,7 @@ function DebitCard({
     };
     return cardArtSource;
   }, [cardArtSource]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: [containerStyle, style],
+  const content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: headerStyle,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
@@ -162,5 +164,23 @@ function DebitCard({
       })]
     })]
   });
+  if (onPress) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+      style: [containerStyle, style],
+      onPress: onPress,
+      disabled: disabled,
+      accessibilityRole: "button",
+      accessibilityLabel: accessibilityLabel ?? `${bankName} ${cardType} ${cardNumber}`,
+      accessibilityState: {
+        disabled: !!disabled
+      },
+      children: content
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [containerStyle, style],
+    accessibilityLabel: accessibilityLabel,
+    children: content
+  });
 }
 var _default = exports.default = DebitCard;

package/lib/commonjs/components/MediaCard/MediaCard.js

@@ -44,7 +44,10 @@ function MediaCard({
   media,
   children,
   modes = _reactUtils.EMPTY_MODES,
-  style
+  style,
+  onPress,
+  disabled,
+  accessibilityLabel
 }) {
   const radius = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardMedia/radius', modes));
   const containerStyle = {
@@ -59,17 +62,31 @@ function MediaCard({
     accessibilityElementsHidden: true,
     importantForAccessibility: "no"
   }) : null);
+  const content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [background, children != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: _reactNative.StyleSheet.absoluteFill,
+      pointerEvents: "box-none",
+      children: children
+    }) : null]
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(MediaCardContext.Provider, {
     value: {
       modes
     },
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    children: onPress ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+      style: [containerStyle, style],
+      onPress: onPress,
+      disabled: disabled,
+      accessibilityRole: "button",
+      accessibilityLabel: accessibilityLabel,
+      accessibilityState: {
+        disabled: !!disabled
+      },
+      children: content
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: [containerStyle, style],
-      children: [background, children != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: _reactNative.StyleSheet.absoluteFill,
-        pointerEvents: "box-none",
-        children: children
-      }) : null]
+      accessibilityLabel: accessibilityLabel,
+      children: content
     })
   });
 }

package/lib/commonjs/components/ProductMerchandisingCard/ProductMerchandisingCard.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
-var _maskedView = _interopRequireDefault(require("@react-native-masked-view/masked-view"));
 var _reactNativeSvg = _interopRequireWildcard(require("react-native-svg"));
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
 var _reactUtils = require("../../utils/react-utils");
@@ -71,7 +70,9 @@ function ProductMerchandisingCard({
   const rawId = (0, _react.useId)();
   const safeId = rawId.replace(/[^a-zA-Z0-9_-]/g, '');
   const scrimId = `pmc-footer-scrim-${safeId}`;
+  const blurGradientId = `pmc-footer-blurgrad-${safeId}`;
   const blurMaskId = `pmc-footer-blurmask-${safeId}`;
+  const blurFilterId = `pmc-footer-blurfilter-${safeId}`;
   const normalizedImageSource = (0, _react.useMemo)(() => normalizeImageSource(imageSource), [imageSource]);
   const tokens = (0, _react.useMemo)(() => resolveTokens(modes), [modes]);
   const containerStyle = {
@@ -165,57 +166,63 @@ function ProductMerchandisingCard({
       children: [normalizedImageSource != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: _reactNative.StyleSheet.absoluteFill,
         pointerEvents: "none",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_maskedView.default, {
-          style: _reactNative.StyleSheet.absoluteFill,
-          maskElement: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.default, {
-            width: "100%",
-            height: "100%",
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Defs, {
-              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.LinearGradient, {
-                id: blurMaskId,
-                x1: "0",
-                y1: "0",
-                x2: "0",
-                y2: "1",
-                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Stop, {
-                  offset: "0",
-                  stopColor: "#000000",
-                  stopOpacity: 0
-                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Stop, {
-                  offset: "0.35",
-                  stopColor: "#000000",
-                  stopOpacity: 0.5
-                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Stop, {
-                  offset: "0.7",
-                  stopColor: "#000000",
-                  stopOpacity: 0.92
-                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Stop, {
-                  offset: "1",
-                  stopColor: "#000000",
-                  stopOpacity: 1
-                })]
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.default, {
+          width: "100%",
+          height: "100%",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.Defs, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Filter, {
+              id: blurFilterId,
+              x: "-15%",
+              y: "-15%",
+              width: "130%",
+              height: "130%",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.FeGaussianBlur, {
+                stdDeviation: tokens.imageBlurStdDeviation,
+                edgeMode: "duplicate"
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.LinearGradient, {
+              id: blurGradientId,
+              x1: "0",
+              y1: "0",
+              x2: "0",
+              y2: "1",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Stop, {
+                offset: "0",
+                stopColor: "#ffffff",
+                stopOpacity: 0
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Stop, {
+                offset: "0.35",
+                stopColor: "#ffffff",
+                stopOpacity: 0.5
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Stop, {
+                offset: "0.7",
+                stopColor: "#ffffff",
+                stopOpacity: 0.92
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Stop, {
+                offset: "1",
+                stopColor: "#ffffff",
+                stopOpacity: 1
+              })]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Mask, {
+              id: blurMaskId,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Rect, {
+                x: "0",
+                y: "0",
+                width: "100%",
+                height: "100%",
+                fill: `url(#${blurGradientId})`
               })
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Rect, {
-              x: "0",
-              y: "0",
-              width: "100%",
-              height: "100%",
-              fill: `url(#${blurMaskId})`
             })]
-          }),
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
-            source: normalizedImageSource,
-            blurRadius: tokens.imageBlurRadius,
-            resizeMode: "cover",
-            style: {
-              position: 'absolute',
-              left: 0,
-              right: 0,
-              bottom: 0,
-              width: '100%',
-              height
-            }
-          })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Image, {
+            href: normalizedImageSource,
+            x: "0",
+            y: "0",
+            width: "100%",
+            height: "100%",
+            preserveAspectRatio: "xMidYMid slice",
+            filter: `url(#${blurFilterId})`,
+            mask: `url(#${blurMaskId})`
+          })]
         })
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_GlassFill.default, {
         tint: "dark",
@@ -334,19 +341,16 @@ function resolveTokens(modes) {
   const sbFamily = asStr((0, _figmaVariablesResolver.getVariableByName)('productMerchandisingcard/specialbadge/text/fontfamily', modes), 'JioType Var');
   const sbWeight = asStr((0, _figmaVariablesResolver.getVariableByName)('productMerchandisingcard/specialbadge/text/fontweight', modes), '500');
 
-  // `Image.blurRadius` is interpreted differently per platform — iOS applies a
-  // strong Gaussian while Android's IterativeBoxBlur is gentler at the same
-  // numeric radius — so we tune each platform to land on the same perceived
-  // "minimal" frosted strength as the Figma design.
-  const imageBlurRadius = _reactNative.Platform.select({
-    ios: Math.max(6, Math.round(blurRadius * 0.5)),
-    android: Math.max(12, Math.round(blurRadius * 0.95)),
-    default: Math.max(8, Math.round(blurRadius * 0.6))
-  });
+  // SVG `<FeGaussianBlur stdDeviation>` is resolution-independent and renders
+  // an identical Gaussian on iOS, Android and web — so unlike the old
+  // `Image.blurRadius` path it needs no per-platform tuning. `stdDeviation` is
+  // roughly half a perceptual "blur radius", so we scale the `blur/minimal`
+  // token down to land on the same subtle frosted strength as the design.
+  const imageBlurStdDeviation = Math.max(4, Math.round(blurRadius * 0.35));
   return {
     radius,
     blurIntensity: Math.max(0, Math.min(100, Math.round(blurRadius * BLUR_INTENSITY_FACTOR))),
-    imageBlurRadius,
+    imageBlurStdDeviation,
     header: {
       flexDirection: 'row',
       alignItems: 'flex-start',

package/lib/commonjs/components/RechargeCard/RechargeCard.js

@@ -41,7 +41,10 @@ function RechargeCard({
   subscriptionContent,
   actions,
   modes = _reactUtils.EMPTY_MODES,
-  style
+  style,
+  onPress,
+  disabled,
+  accessibilityLabel
 }) {
   // Container Tokens (defaults mirror Figma node 2235:937).
   const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('rechargeCard/background', modes);
@@ -90,18 +93,18 @@ function RechargeCard({
   // Pass modes to subscription children (e.g. AvatarGroup)
   // Now encapsulated, so we just pass children to AvatarGroup
   const hasSubscriptions = _react.default.Children.count(subscriptionContent) > 0;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: [{
-      backgroundColor,
-      paddingHorizontal,
-      paddingVertical,
-      gap,
-      borderRadius: radius,
-      borderWidth: strokeWidth,
-      borderColor: strokeColor,
-      minWidth,
-      alignItems: 'flex-start'
-    }, style],
+  const containerStyle = {
+    backgroundColor,
+    paddingHorizontal,
+    paddingVertical,
+    gap,
+    borderRadius: radius,
+    borderWidth: strokeWidth,
+    borderColor: strokeColor,
+    minWidth,
+    alignItems: 'flex-start'
+  };
+  const content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: {
         gap: headerGap,
@@ -217,4 +220,22 @@ function RechargeCard({
       children: actions
     })]
   });
+  if (onPress) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+      style: [containerStyle, style],
+      onPress: onPress,
+      disabled: disabled,
+      accessibilityRole: "button",
+      accessibilityLabel: accessibilityLabel ?? title,
+      accessibilityState: {
+        disabled: !!disabled
+      },
+      children: content
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [containerStyle, style],
+    accessibilityLabel: accessibilityLabel,
+    children: content
+  });
 }