jfs-components 0.1.18 → 0.1.19

package/lib/module/components/Card/Card.js

@@ -1,10 +1,10 @@
 "use strict";
 
 import React, { createContext, useContext, isValidElement, cloneElement } 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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Context to share 'modes' with child components like Card.Title and Card.SupportText.
  * This ensures that nested components can resolve their tokens correctly without 
@@ -32,7 +32,10 @@ export function Card({
   children,
   modes = EMPTY_MODES,
   mediaAspectRatio = 154 / 116,
-  style
+  style,
+  onPress,
+  disabled,
+  accessibilityLabel
 }) {
   // Resolve Card Container Tokens
   const backgroundColor = getVariableByName('card/background/color', modes);
@@ -96,22 +99,36 @@ export function Card({
     paddingHorizontal: contentPaddingHorizontal,
     paddingVertical: contentPaddingVertical
   };
+  const content = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [header && /*#__PURE__*/_jsx(View, {
+      style: headerWrapperStyle,
+      children: headerWithModes
+    }), media && /*#__PURE__*/_jsx(View, {
+      style: mediaWrapperStyle,
+      children: mediaWithModes
+    }), /*#__PURE__*/_jsx(View, {
+      style: contentWrapperStyle,
+      children: children
+    })]
+  });
   return /*#__PURE__*/_jsx(CardContext.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: [header && /*#__PURE__*/_jsx(View, {
-        style: headerWrapperStyle,
-        children: headerWithModes
-      }), media && /*#__PURE__*/_jsx(View, {
-        style: mediaWrapperStyle,
-        children: mediaWithModes
-      }), /*#__PURE__*/_jsx(View, {
-        style: contentWrapperStyle,
-        children: children
-      })]
+      accessibilityLabel: accessibilityLabel,
+      children: content
     })
   });
 }

package/lib/module/components/CardFeedback/CardFeedback.js

@@ -1,7 +1,7 @@
 "use strict";
 
 import React, { createContext, useContext, isValidElement, cloneElement } from 'react';
-import { View, Text } from 'react-native';
+import { View, Text, Pressable } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import IconComponent from '../../icons/Icon';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -17,7 +17,10 @@ const CardFeedbackContext = /*#__PURE__*/createContext({});
 export function CardFeedback({
   children,
   modes: propModes,
-  style
+  style,
+  onPress,
+  disabled,
+  accessibilityLabel
 }) {
   const modes = {
     'Appearance.System': 'positive',
@@ -46,8 +49,19 @@ export function CardFeedback({
     value: {
       modes
     },
-    children: /*#__PURE__*/_jsx(View, {
+    children: onPress ? /*#__PURE__*/_jsx(Pressable, {
+      style: [containerStyle, style],
+      onPress: onPress,
+      disabled: disabled,
+      accessibilityRole: "button",
+      accessibilityLabel: accessibilityLabel,
+      accessibilityState: {
+        disabled: !!disabled
+      },
+      children: children
+    }) : /*#__PURE__*/_jsx(View, {
       style: [containerStyle, style],
+      accessibilityLabel: accessibilityLabel,
       children: children
     })
   });

package/lib/module/components/CardInsight/CardInsight.js

@@ -1,14 +1,14 @@
 "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, cloneChildrenWithModes } from '../../utils/react-utils';
 import Badge from '../Badge/Badge';
 import Divider from '../Divider/Divider';
 import Nudge from '../Nudge/Nudge';
 import SavingsGoalSummary from '../SavingsGoalSummary/SavingsGoalSummary';
-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";
 /**
  * `CardInsight` renders a single insight card composed of:
  *
@@ -28,7 +28,10 @@ function CardInsight({
   footer,
   divider,
   modes = EMPTY_MODES,
-  style
+  style,
+  onPress,
+  disabled,
+  accessibilityLabel
 }) {
   const background = getVariableByName('cardInsight/background', modes) ?? '#ffffff';
   const radius = getVariableByName('cardInsight/radius', modes) ?? 12;
@@ -101,18 +104,18 @@ function CardInsight({
   };
   const footerNode = renderFooter();
   const showDivider = footerNode !== null && divider !== false && divider !== null;
-  return /*#__PURE__*/_jsxs(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__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs(View, {
       style: {
         flexDirection: 'row',
@@ -160,5 +163,23 @@ function CardInsight({
       children: renderSlot()
     }), showDivider ? renderDivider() : null, footerNode]
   });
+  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
+  });
 }
 export default CardInsight;

package/lib/module/components/CardProviderInfo/CardProviderInfo.js

@@ -1,11 +1,11 @@
 "use strict";
 
 import React from 'react';
-import { View } from 'react-native';
+import { View, Pressable } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import ProductLabel from '../ProductLabel/ProductLabel';
 import { EMPTY_MODES, cloneChildrenWithModes } 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";
 /**
  * CardProviderInfo displays a product header (ProductLabel) followed by a
  * 2-column grid of children (typically StatItem instances).
@@ -18,7 +18,10 @@ function CardProviderInfo({
   imageSource,
   children,
   modes = EMPTY_MODES,
-  style
+  style,
+  onPress,
+  disabled,
+  accessibilityLabel
 }) {
   const background = getVariableByName('card/providerInfo/background', modes) ?? '#fef4e5';
   const border = getVariableByName('card/providerInfo/border', modes) ?? '#fef4e5';
@@ -43,8 +46,7 @@ function CardProviderInfo({
   for (let i = 0; i < childArray.length; i += 2) {
     rows.push(childArray.slice(i, i + 2));
   }
-  return /*#__PURE__*/_jsxs(View, {
-    style: [containerStyle, style],
+  const content = /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(ProductLabel, {
       label: label,
       imageSource: imageSource,
@@ -67,5 +69,23 @@ function CardProviderInfo({
       }, i))
     })]
   });
+  if (onPress) {
+    return /*#__PURE__*/_jsx(Pressable, {
+      style: [containerStyle, style],
+      onPress: onPress,
+      disabled: disabled,
+      accessibilityRole: "button",
+      accessibilityLabel: accessibilityLabel ?? label,
+      accessibilityState: {
+        disabled: !!disabled
+      },
+      children: content
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    style: [containerStyle, style],
+    accessibilityLabel: accessibilityLabel,
+    children: content
+  });
 }
 export default CardProviderInfo;

package/lib/module/components/DebitCard/DebitCard.js

@@ -1,11 +1,11 @@
 "use strict";
 
 import React from 'react';
-import { View, Text, Image } from 'react-native';
+import { View, Text, Image, Pressable } 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';
-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";
 const defaultCardArt = require('./cf64a67d5075caa8924d20b4e4e650d47b3ee08b.png');
 function DebitCard({
   cardholderName = 'Shruti Shukla',
@@ -17,7 +17,10 @@ function DebitCard({
   bankLogoSlot,
   providerLogoSlot,
   modes: propModes = EMPTY_MODES,
-  style
+  style,
+  onPress,
+  disabled,
+  accessibilityLabel
 }) {
   const {
     modes: globalModes
@@ -116,8 +119,7 @@ function DebitCard({
     };
     return cardArtSource;
   }, [cardArtSource]);
-  return /*#__PURE__*/_jsxs(View, {
-    style: [containerStyle, style],
+  const content = /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs(View, {
       style: headerStyle,
       children: [/*#__PURE__*/_jsxs(View, {
@@ -157,5 +159,23 @@ function DebitCard({
       })]
     })]
   });
+  if (onPress) {
+    return /*#__PURE__*/_jsx(Pressable, {
+      style: [containerStyle, style],
+      onPress: onPress,
+      disabled: disabled,
+      accessibilityRole: "button",
+      accessibilityLabel: accessibilityLabel ?? `${bankName} ${cardType} ${cardNumber}`,
+      accessibilityState: {
+        disabled: !!disabled
+      },
+      children: content
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    style: [containerStyle, style],
+    accessibilityLabel: accessibilityLabel,
+    children: content
+  });
 }
 export default DebitCard;

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/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%',