jfs-components 0.1.18 → 0.1.23

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/components/index.ts

@@ -36,6 +36,7 @@ export { default as FullscreenModal, type FullscreenModalProps } from './Fullscr
 export { default as Form, type FormProps } from './Form/Form';
 export { useFormContext } from './Form/Form';
 export { default as FormField, type FormFieldProps, type FormFieldType } from './FormField/FormField';
+export { default as ContentSheet, type ContentSheetProps } from './ContentSheet/ContentSheet';
 export { default as CircularProgressBar, type CircularProgressBarProps } from './CircularProgressBar/CircularProgressBar'
 export { default as CircularProgressBarDoted, type CircularProgressBarDotedProps } from './CircularProgressBarDoted/CircularProgressBarDoted'
 export { default as CircularRating, type CircularRatingProps } from './CircularRating/CircularRating'
@@ -45,6 +46,7 @@ export { default as ComparisonBar, type ComparisonBarProps, type ComparisonBarIt
 export { default as AllocationComparisonChart, type AllocationComparisonChartProps, type AllocationSegment } from './AllocationComparisonChart/AllocationComparisonChart'
 export { default as MonthlyStatusGrid, CalendarGlyph, type MonthlyStatusGridProps, type MonthlyStatusGridMonth, type MonthlyStatus, type CalendarGlyphProps } from './MonthlyStatusGrid/MonthlyStatusGrid'
 export { default as Gauge, type GaugeProps } from './Gauge/Gauge';
+export { default as HeroSection, type HeroSectionProps } from './HeroSection/HeroSection';
 export { default as HoldingsCard, type HoldingsCardProps } from './HoldingsCard/HoldingsCard';
 export { default as HStack, type HStackProps } from './HStack/HStack';
 export { default as Icon, type IconProps } from './Icon/Icon';
@@ -52,6 +54,7 @@ export { default as IconButton } from './IconButton/IconButton';
 export { default as IconCapsule } from './IconCapsule/IconCapsule';
 export { default as Image, type ImageProps } from './Image/Image';
 export { default as LazyList } from './LazyList/LazyList';
+export { default as Link, type LinkProps } from './Link/Link';
 export { default as LinearMeter, type LinearMeterProps } from './LinearMeter/LinearMeter';
 export { default as LinearProgress, type LinearProgressProps } from './LinearProgress/LinearProgress';
 export { default as ListGroup } from './ListGroup/ListGroup';