jfs-components 0.1.17 → 0.1.19

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

package/src/components/ProductMerchandisingCard/ProductMerchandisingCard.tsx

@@ -4,15 +4,21 @@ import {
     Text,
     Pressable,
     StyleSheet,
-    Platform,
-    Image as RNImage,
     type ViewStyle,
     type TextStyle,
     type StyleProp,
     type ImageSourcePropType,
 } from 'react-native'
-import MaskedView from '@react-native-masked-view/masked-view'
-import Svg, { Defs, LinearGradient, Stop, Rect } from 'react-native-svg'
+import Svg, {
+    Defs,
+    LinearGradient,
+    Stop,
+    Rect,
+    Mask,
+    Filter,
+    FeGaussianBlur,
+    Image as SvgImage,
+} from 'react-native-svg'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { EMPTY_MODES, resolveTruncation } from '../../utils/react-utils'
 import Avatar from '../Avatar/Avatar'
@@ -138,7 +144,9 @@ function ProductMerchandisingCard({
     const rawId = 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 = useMemo(() => normalizeImageSource(imageSource), [imageSource])
 
@@ -234,41 +242,65 @@ function ProductMerchandisingCard({
 
             <View style={tokens.footer} pointerEvents="box-none">
                 {/* Progressive blur — clear at the top of the footer, ramping to
-                    a soft blur at the bottom. Rather than the unmaintained native
-                    BlurView (which renders as a flat black tint on Android +
-                    Fabric and can hide the image on iOS), we reveal a *blurred
-                    copy of the card's own image* through a vertical gradient
-                    mask. `Image.blurRadius` is a built-in RN prop with a real
-                    Gaussian blur on BOTH iOS and Android and needs no native
-                    module. The blurred copy is pinned to the card's bottom at the
-                    full card height so it lines up pixel-for-pixel with the
-                    full-bleed background, and the mask makes the blur swell in
-                    smoothly toward the bottom (true progressive blur). */}
+                    a soft blur at the bottom. We reveal a *blurred copy of the
+                    card's own image* through a vertical gradient mask, rendered
+                    entirely with `react-native-svg` (a Fabric/codegen-correct
+                    native module that resolves on both the Old and New
+                    architectures). The SVG `<Image>` is blurred by an
+                    `<FeGaussianBlur>` filter (identical, resolution-independent
+                    Gaussian on iOS, Android AND web) and revealed by a luminance
+                    `<Mask>` fed a vertical gradient, so the blur swells in
+                    smoothly toward the bottom. This deliberately avoids the
+                    unmaintained `@react-native-masked-view/masked-view` (a legacy
+                    Paper component that resolves to a plain object — and crashes
+                    "Element type is invalid" — under the New Architecture interop)
+                    and the flaky native `BlurView`. Because the mask is fully
+                    transparent at the top, any minor crop mismatch between this
+                    cover-fitted copy and the full-bleed background is invisible:
+                    where they could differ, the blurred layer isn't drawn. */}
                 {normalizedImageSource != null ? (
                     <View style={StyleSheet.absoluteFill} pointerEvents="none">
-                        <MaskedView
-                            style={StyleSheet.absoluteFill}
-                            maskElement={
-                                <Svg width="100%" height="100%">
-                                    <Defs>
-                                        <LinearGradient id={blurMaskId} x1="0" y1="0" x2="0" y2="1">
-                                            <Stop offset="0" stopColor="#000000" stopOpacity={0} />
-                                            <Stop offset="0.35" stopColor="#000000" stopOpacity={0.5} />
-                                            <Stop offset="0.7" stopColor="#000000" stopOpacity={0.92} />
-                                            <Stop offset="1" stopColor="#000000" stopOpacity={1} />
-                                        </LinearGradient>
-                                    </Defs>
-                                    <Rect x="0" y="0" width="100%" height="100%" fill={`url(#${blurMaskId})`} />
-                                </Svg>
-                            }
-                        >
-                            <RNImage
-                                source={normalizedImageSource}
-                                blurRadius={tokens.imageBlurRadius}
-                                resizeMode="cover"
-                                style={{ position: 'absolute', left: 0, right: 0, bottom: 0, width: '100%', height }}
+                        <Svg width="100%" height="100%">
+                            <Defs>
+                                <Filter
+                                    id={blurFilterId}
+                                    x="-15%"
+                                    y="-15%"
+                                    width="130%"
+                                    height="130%"
+                                >
+                                    <FeGaussianBlur
+                                        stdDeviation={tokens.imageBlurStdDeviation}
+                                        edgeMode="duplicate"
+                                    />
+                                </Filter>
+                                <LinearGradient id={blurGradientId} x1="0" y1="0" x2="0" y2="1">
+                                    <Stop offset="0" stopColor="#ffffff" stopOpacity={0} />
+                                    <Stop offset="0.35" stopColor="#ffffff" stopOpacity={0.5} />
+                                    <Stop offset="0.7" stopColor="#ffffff" stopOpacity={0.92} />
+                                    <Stop offset="1" stopColor="#ffffff" stopOpacity={1} />
+                                </LinearGradient>
+                                <Mask id={blurMaskId}>
+                                    <Rect
+                                        x="0"
+                                        y="0"
+                                        width="100%"
+                                        height="100%"
+                                        fill={`url(#${blurGradientId})`}
+                                    />
+                                </Mask>
+                            </Defs>
+                            <SvgImage
+                                href={normalizedImageSource as any}
+                                x="0"
+                                y="0"
+                                width="100%"
+                                height="100%"
+                                preserveAspectRatio="xMidYMid slice"
+                                filter={`url(#${blurFilterId})`}
+                                mask={`url(#${blurMaskId})`}
                             />
-                        </MaskedView>
+                        </Svg>
                     </View>
                 ) : (
                     <GlassFill tint="dark" intensity={tokens.blurIntensity} progressive />
@@ -348,7 +380,7 @@ const SPECIAL_BADGE_INTENSITY = 17 // ~5px CSS blur / ~2 native blurAmount
 interface ResolvedTokens {
     radius: number
     blurIntensity: number
-    imageBlurRadius: number
+    imageBlurStdDeviation: number
     header: ViewStyle
     footer: ViewStyle
     textWrap: ViewStyle
@@ -394,20 +426,17 @@ function resolveTokens(modes: Modes): ResolvedTokens {
     const sbFamily = asStr(getVariableByName('productMerchandisingcard/specialbadge/text/fontfamily', modes), 'JioType Var')
     const sbWeight = asStr(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 = 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)),
-    }) as number
+    // 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/src/components/RechargeCard/RechargeCard.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { View, Text, type ViewStyle } from 'react-native';
+import { View, Text, Pressable, type ViewStyle } from 'react-native';
 import ButtonGroup from '../ButtonGroup/ButtonGroup';
 import AvatarGroup from '../AvatarGroup/AvatarGroup';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
@@ -65,6 +65,15 @@ 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;
 };
 
 /**
@@ -81,6 +90,9 @@ export default function RechargeCard({
     actions,
     modes = EMPTY_MODES,
     style,
+    onPress,
+    disabled,
+    accessibilityLabel,
 }: RechargeCardProps) {
     // Container Tokens (defaults mirror Figma node 2235:937).
     const backgroundColor = getVariableByName('rechargeCard/background', modes);
@@ -132,18 +144,20 @@ export default function RechargeCard({
     const hasSubscriptions = React.Children.count(subscriptionContent) > 0;
 
 
-    return (
-        <View style={[{
-            backgroundColor,
-            paddingHorizontal,
-            paddingVertical,
-            gap,
-            borderRadius: radius,
-            borderWidth: strokeWidth,
-            borderColor: strokeColor,
-            minWidth,
-            alignItems: 'flex-start',
-        }, style]}>
+    const containerStyle: ViewStyle = {
+        backgroundColor,
+        paddingHorizontal,
+        paddingVertical,
+        gap,
+        borderRadius: radius,
+        borderWidth: strokeWidth,
+        borderColor: strokeColor,
+        minWidth,
+        alignItems: 'flex-start',
+    };
+
+    const content = (
+        <>
             {/* Header */}
             <View style={{ gap: headerGap, alignItems: 'flex-start' }}>
                 <Text style={{
@@ -244,6 +258,27 @@ export default function RechargeCard({
             <ButtonGroup modes={{ ...DEFAULT_BUTTON_GROUP_MODES, ...modes }}>
                 {actions}
             </ButtonGroup>
+        </>
+    );
+
+    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>
     );
 }