jfs-components 0.1.18 → 0.1.19

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

package/src/components/TestimonialsCard/TestimonialsCard.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import {
   View,
   Text,
+  Pressable,
   type ViewStyle,
   type TextStyle,
   type StyleProp,
@@ -38,6 +39,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
 }
 
 /**
@@ -63,6 +71,8 @@ function TestimonialsCard({
   style,
   avatarProps,
   accessibilityLabel,
+  onPress,
+  disabled,
 }: TestimonialsCardProps) {
   // Container tokens
   const background = getVariableByName('testimonialsCard/background', modes) ?? '#ffffff'
@@ -127,12 +137,8 @@ function TestimonialsCard({
   const resolvedAccessibilityLabel =
     accessibilityLabel ?? `Testimonial${title ? ` from ${title}` : ''}${body ? `: ${body}` : ''}`
 
-  return (
-    <View
-      style={[containerStyle, style]}
-      accessibilityRole="text"
-      accessibilityLabel={resolvedAccessibilityLabel}
-    >
+  const content = (
+    <>
       <Avatar
         style="Image"
         modes={avatarModes}
@@ -150,6 +156,31 @@ function TestimonialsCard({
           </Text>
         )}
       </View>
+    </>
+  )
+
+  if (onPress) {
+    return (
+      <Pressable
+        style={[containerStyle, style]}
+        onPress={onPress}
+        disabled={disabled}
+        accessibilityRole="button"
+        accessibilityLabel={resolvedAccessibilityLabel}
+        accessibilityState={{ disabled: !!disabled }}
+      >
+        {content}
+      </Pressable>
+    )
+  }
+
+  return (
+    <View
+      style={[containerStyle, style]}
+      accessibilityRole="text"
+      accessibilityLabel={resolvedAccessibilityLabel}
+    >
+      {content}
     </View>
   )
 }

package/src/icons/registry.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-29T08:47:00.741Z
+ * Generated: 2026-06-29T11:40:01.320Z
  */
 
 // Icon name to SVG data mapping