jfs-components 0.1.17 → 0.1.19

package/lib/module/components/MediaCard/MediaCard.js

@@ -1,12 +1,12 @@
 "use strict";
 
 import React, { createContext, useContext } from 'react';
-import { View, Text, StyleSheet } from 'react-native';
+import { View, Text, Pressable, StyleSheet } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import Image from '../Image/Image';
 import GlassFill from '../../utils/GlassFill/GlassFill';
 import { EMPTY_MODES } from '../../utils/react-utils';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const MediaCardContext = /*#__PURE__*/createContext({});
 /**
  * MediaCard component implementation from Figma node 1241:4140.
@@ -32,7 +32,10 @@ export function MediaCard({
   media,
   children,
   modes = EMPTY_MODES,
-  style
+  style,
+  onPress,
+  disabled,
+  accessibilityLabel
 }) {
   const radius = parseFloat(getVariableByName('cardMedia/radius', modes));
   const containerStyle = {
@@ -47,17 +50,31 @@ export function MediaCard({
     accessibilityElementsHidden: true,
     importantForAccessibility: "no"
   }) : null);
+  const content = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [background, children != null ? /*#__PURE__*/_jsx(View, {
+      style: StyleSheet.absoluteFill,
+      pointerEvents: "box-none",
+      children: children
+    }) : null]
+  });
   return /*#__PURE__*/_jsx(MediaCardContext.Provider, {
     value: {
       modes
     },
-    children: /*#__PURE__*/_jsxs(View, {
+    children: onPress ? /*#__PURE__*/_jsx(Pressable, {
+      style: [containerStyle, style],
+      onPress: onPress,
+      disabled: disabled,
+      accessibilityRole: "button",
+      accessibilityLabel: accessibilityLabel,
+      accessibilityState: {
+        disabled: !!disabled
+      },
+      children: content
+    }) : /*#__PURE__*/_jsx(View, {
       style: [containerStyle, style],
-      children: [background, children != null ? /*#__PURE__*/_jsx(View, {
-        style: StyleSheet.absoluteFill,
-        pointerEvents: "box-none",
-        children: children
-      }) : null]
+      accessibilityLabel: accessibilityLabel,
+      children: content
     })
   });
 }

package/lib/module/components/ProductMerchandisingCard/ProductMerchandisingCard.js

@@ -1,9 +1,8 @@
 "use strict";
 
 import React, { useId, useMemo } from 'react';
-import { View, Text, Pressable, StyleSheet, Platform, Image as RNImage } from 'react-native';
-import MaskedView from '@react-native-masked-view/masked-view';
-import Svg, { Defs, LinearGradient, Stop, Rect } from 'react-native-svg';
+import { View, Text, Pressable, StyleSheet } from 'react-native';
+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';
@@ -65,7 +64,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]);
   const tokens = useMemo(() => resolveTokens(modes), [modes]);
   const containerStyle = {
@@ -159,57 +160,63 @@ function ProductMerchandisingCard({
       children: [normalizedImageSource != null ? /*#__PURE__*/_jsx(View, {
         style: StyleSheet.absoluteFill,
         pointerEvents: "none",
-        children: /*#__PURE__*/_jsx(MaskedView, {
-          style: StyleSheet.absoluteFill,
-          maskElement: /*#__PURE__*/_jsxs(Svg, {
-            width: "100%",
-            height: "100%",
-            children: [/*#__PURE__*/_jsx(Defs, {
-              children: /*#__PURE__*/_jsxs(LinearGradient, {
-                id: blurMaskId,
-                x1: "0",
-                y1: "0",
-                x2: "0",
-                y2: "1",
-                children: [/*#__PURE__*/_jsx(Stop, {
-                  offset: "0",
-                  stopColor: "#000000",
-                  stopOpacity: 0
-                }), /*#__PURE__*/_jsx(Stop, {
-                  offset: "0.35",
-                  stopColor: "#000000",
-                  stopOpacity: 0.5
-                }), /*#__PURE__*/_jsx(Stop, {
-                  offset: "0.7",
-                  stopColor: "#000000",
-                  stopOpacity: 0.92
-                }), /*#__PURE__*/_jsx(Stop, {
-                  offset: "1",
-                  stopColor: "#000000",
-                  stopOpacity: 1
-                })]
+        children: /*#__PURE__*/_jsxs(Svg, {
+          width: "100%",
+          height: "100%",
+          children: [/*#__PURE__*/_jsxs(Defs, {
+            children: [/*#__PURE__*/_jsx(Filter, {
+              id: blurFilterId,
+              x: "-15%",
+              y: "-15%",
+              width: "130%",
+              height: "130%",
+              children: /*#__PURE__*/_jsx(FeGaussianBlur, {
+                stdDeviation: tokens.imageBlurStdDeviation,
+                edgeMode: "duplicate"
+              })
+            }), /*#__PURE__*/_jsxs(LinearGradient, {
+              id: blurGradientId,
+              x1: "0",
+              y1: "0",
+              x2: "0",
+              y2: "1",
+              children: [/*#__PURE__*/_jsx(Stop, {
+                offset: "0",
+                stopColor: "#ffffff",
+                stopOpacity: 0
+              }), /*#__PURE__*/_jsx(Stop, {
+                offset: "0.35",
+                stopColor: "#ffffff",
+                stopOpacity: 0.5
+              }), /*#__PURE__*/_jsx(Stop, {
+                offset: "0.7",
+                stopColor: "#ffffff",
+                stopOpacity: 0.92
+              }), /*#__PURE__*/_jsx(Stop, {
+                offset: "1",
+                stopColor: "#ffffff",
+                stopOpacity: 1
+              })]
+            }), /*#__PURE__*/_jsx(Mask, {
+              id: blurMaskId,
+              children: /*#__PURE__*/_jsx(Rect, {
+                x: "0",
+                y: "0",
+                width: "100%",
+                height: "100%",
+                fill: `url(#${blurGradientId})`
               })
-            }), /*#__PURE__*/_jsx(Rect, {
-              x: "0",
-              y: "0",
-              width: "100%",
-              height: "100%",
-              fill: `url(#${blurMaskId})`
             })]
-          }),
-          children: /*#__PURE__*/_jsx(RNImage, {
-            source: normalizedImageSource,
-            blurRadius: tokens.imageBlurRadius,
-            resizeMode: "cover",
-            style: {
-              position: 'absolute',
-              left: 0,
-              right: 0,
-              bottom: 0,
-              width: '100%',
-              height
-            }
-          })
+          }), /*#__PURE__*/_jsx(SvgImage, {
+            href: normalizedImageSource,
+            x: "0",
+            y: "0",
+            width: "100%",
+            height: "100%",
+            preserveAspectRatio: "xMidYMid slice",
+            filter: `url(#${blurFilterId})`,
+            mask: `url(#${blurMaskId})`
+          })]
         })
       }) : /*#__PURE__*/_jsx(GlassFill, {
         tint: "dark",
@@ -328,19 +335,16 @@ function resolveTokens(modes) {
   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))
-  });
+  // 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/module/components/RechargeCard/RechargeCard.js

@@ -1,13 +1,13 @@
 "use strict";
 
 import React from 'react';
-import { View, Text } from 'react-native';
+import { View, Text, Pressable } from 'react-native';
 import ButtonGroup from '../ButtonGroup/ButtonGroup';
 import AvatarGroup from '../AvatarGroup/AvatarGroup';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { EMPTY_MODES } from '../../utils/react-utils';
 import MoneyValue from '../MoneyValue/MoneyValue';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // Defaults applied to the inner ButtonGroup so the card matches Figma out of
 // the box. They are spread *before* the caller's `modes` so any consumer can
 // override an individual key (e.g. swap the size to "M").
@@ -36,7 +36,10 @@ export default function RechargeCard({
   subscriptionContent,
   actions,
   modes = EMPTY_MODES,
-  style
+  style,
+  onPress,
+  disabled,
+  accessibilityLabel
 }) {
   // Container Tokens (defaults mirror Figma node 2235:937).
   const backgroundColor = getVariableByName('rechargeCard/background', modes);
@@ -85,18 +88,18 @@ export default function RechargeCard({
   // Pass modes to subscription children (e.g. AvatarGroup)
   // Now encapsulated, so we just pass children to AvatarGroup
   const hasSubscriptions = React.Children.count(subscriptionContent) > 0;
-  return /*#__PURE__*/_jsxs(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__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs(View, {
       style: {
         gap: headerGap,
@@ -212,4 +215,22 @@ export default function RechargeCard({
       children: actions
     })]
   });
+  if (onPress) {
+    return /*#__PURE__*/_jsx(Pressable, {
+      style: [containerStyle, style],
+      onPress: onPress,
+      disabled: disabled,
+      accessibilityRole: "button",
+      accessibilityLabel: accessibilityLabel ?? title,
+      accessibilityState: {
+        disabled: !!disabled
+      },
+      children: content
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    style: [containerStyle, style],
+    accessibilityLabel: accessibilityLabel,
+    children: content
+  });
 }

package/lib/module/components/TestimonialsCard/TestimonialsCard.js

@@ -1,11 +1,11 @@
 "use strict";
 
 import React from 'react';
-import { View, Text } from 'react-native';
+import { View, Text, Pressable } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { EMPTY_MODES } from '../../utils/react-utils';
 import Avatar from '../Avatar/Avatar';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /**
  * TestimonialsCard renders a compact, fixed-width card with a circular avatar,
  * a bold title, and a body paragraph. It is typically used inside a horizontal
@@ -28,7 +28,9 @@ function TestimonialsCard({
   modes = EMPTY_MODES,
   style,
   avatarProps,
-  accessibilityLabel
+  accessibilityLabel,
+  onPress,
+  disabled
 }) {
   // Container tokens
   const background = getVariableByName('testimonialsCard/background', modes) ?? '#ffffff';
@@ -84,10 +86,7 @@ function TestimonialsCard({
     ...(avatarProps?.modes || {})
   };
   const resolvedAccessibilityLabel = accessibilityLabel ?? `Testimonial${title ? ` from ${title}` : ''}${body ? `: ${body}` : ''}`;
-  return /*#__PURE__*/_jsxs(View, {
-    style: [containerStyle, style],
-    accessibilityRole: "text",
-    accessibilityLabel: resolvedAccessibilityLabel,
+  const content = /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Avatar, {
       style: "Image",
       modes: avatarModes,
@@ -107,6 +106,25 @@ function TestimonialsCard({
       })]
     })]
   });
+  if (onPress) {
+    return /*#__PURE__*/_jsx(Pressable, {
+      style: [containerStyle, style],
+      onPress: onPress,
+      disabled: disabled,
+      accessibilityRole: "button",
+      accessibilityLabel: resolvedAccessibilityLabel,
+      accessibilityState: {
+        disabled: !!disabled
+      },
+      children: content
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    style: [containerStyle, style],
+    accessibilityRole: "text",
+    accessibilityLabel: resolvedAccessibilityLabel,
+    children: content
+  });
 }
 const textContainerStyle = {
   width: '100%',