jfs-components 0.0.62 → 0.0.64

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

@@ -4,7 +4,7 @@ import React from 'react';
 import { View } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import ProductLabel from '../ProductLabel/ProductLabel';
-import { cloneChildrenWithModes } from '../../utils/react-utils';
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * CardProviderInfo displays a product header (ProductLabel) followed by a
@@ -17,7 +17,7 @@ function CardProviderInfo({
   label = 'Gold',
   imageSource,
   children,
-  modes = {},
+  modes = EMPTY_MODES,
   style
 }) {
   const background = getVariableByName('card/providerInfo/background', modes) ?? '#fef4e5';

package/lib/module/components/Carousel/Carousel.js

@@ -3,13 +3,14 @@
 import React, { createContext, useContext, useRef, useState, useEffect, useCallback, useMemo } from 'react';
 import { View, ScrollView, Animated, Pressable } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { EMPTY_MODES } from '../../utils/react-utils';
 
 // ---------------------------------------------------------------------------
 // Context
 // ---------------------------------------------------------------------------
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const CarouselContext = /*#__PURE__*/createContext({
-  modes: {},
+  modes: EMPTY_MODES,
   activeIndex: 0,
   totalItems: 0,
   goTo: () => {},
@@ -27,7 +28,7 @@ const CarouselContext = /*#__PURE__*/createContext({
 
 export function Carousel({
   children,
-  modes = {},
+  modes = EMPTY_MODES,
   autoPlay = false,
   autoPlayInterval = 4000,
   showPagination = true,

package/lib/module/components/Checkbox/Checkbox.js

@@ -4,6 +4,7 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { Pressable, Platform } from 'react-native';
 import Svg, { Path } from 'react-native-svg';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { EMPTY_MODES } from '../../utils/react-utils';
 
 /**
  * Tracks whether the last user interaction was a keyboard event (Tab).
@@ -60,7 +61,7 @@ function Checkbox({
   defaultChecked = false,
   onValueChange,
   disabled = false,
-  modes = {},
+  modes = EMPTY_MODES,
   style,
   accessibilityLabel
 }) {

package/lib/module/components/ChipGroup/ChipGroup.js

@@ -3,7 +3,7 @@
 import React from 'react';
 import { View } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
-import { flattenChildren } from '../../utils/react-utils';
+import { EMPTY_MODES, flattenChildren } from '../../utils/react-utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * ChipGroup component that handles layout and spacing for ChipSelect components.
@@ -11,7 +11,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  */
 function ChipGroup({
   children,
-  modes = {},
+  modes = EMPTY_MODES,
   style,
   testID
 }) {

package/lib/module/components/ChipSelect/ChipSelect.js

@@ -3,6 +3,7 @@
 import React from 'react';
 import { Text, TouchableOpacity } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { EMPTY_MODES } from '../../utils/react-utils';
 import Icon from '../../icons/Icon';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
@@ -13,7 +14,7 @@ function ChipSelect({
   label = 'Date',
   active = false,
   icon = 'ic_calendar_week',
-  modes = {},
+  modes = EMPTY_MODES,
   style,
   labelSlot,
   onPress

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

@@ -4,7 +4,7 @@ import React from 'react';
 import { View, Text, Image } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { useTokens } from '../../design-tokens/JFSThemeProvider';
-import { cloneChildrenWithModes } from '../../utils/react-utils';
+import { cloneChildrenWithModes, EMPTY_MODES } from '../../utils/react-utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const defaultCardArt = require('./cf64a67d5075caa8924d20b4e4e650d47b3ee08b.png');
 function DebitCard({
@@ -16,7 +16,7 @@ function DebitCard({
   cardArtSource = defaultCardArt,
   bankLogoSlot,
   providerLogoSlot,
-  modes: propModes = {},
+  modes: propModes = EMPTY_MODES,
   style
 }) {
   const {

package/lib/module/components/Disclaimer/Disclaimer.js

@@ -4,6 +4,7 @@ import React from 'react';
 import { View, Text } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { useTokens } from '../../design-tokens/JFSThemeProvider';
+import { EMPTY_MODES } from '../../utils/react-utils';
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 /**
  * Disclaimer text block that mirrors the Figma "Disclaimer" component.
@@ -28,7 +29,7 @@ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
  */
 function Disclaimer({
   disclaimer = 'All financial services are provided by Jio Payments Bank Pvt. Ltd.',
-  modes: propModes = {},
+  modes: propModes = EMPTY_MODES,
   style,
   textStyle,
   accessibilityLabel,

package/lib/module/components/Divider/Divider.js

@@ -3,6 +3,7 @@
 import React from 'react';
 import { View } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { EMPTY_MODES } from '../../utils/react-utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Divider component that renders a horizontal or vertical separator line.
@@ -31,7 +32,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  */
 function Divider({
   direction = 'horizontal',
-  modes = {},
+  modes = EMPTY_MODES,
   style,
   accessibilityLabel = undefined
 }) {

package/lib/module/components/Drawer/Drawer.js

@@ -5,6 +5,7 @@ import { Platform, StyleSheet, Text, useWindowDimensions, View } from 'react-nat
 import { Gesture, GestureDetector, GestureHandlerRootView, ScrollView } from 'react-native-gesture-handler';
 import Animated, { runOnJS, useAnimatedProps, useAnimatedScrollHandler, useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
 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";
 const AnimatedScrollView = Animated.createAnimatedComponent(ScrollView);
 
@@ -44,7 +45,7 @@ function rubberBand(value, min, max, friction = 0.55) {
  * Uses react-native-gesture-handler and react-native-reanimated.
  */
 function Drawer({
-  modes = {},
+  modes = EMPTY_MODES,
   style,
   title,
   header,
@@ -125,7 +126,17 @@ function Drawer({
   const updateMode = useCallback(newMode => {
     setMode(newMode);
   }, []);
-  const gesture = Gesture.Pan().simultaneousWithExternalGesture(scrollRef).activeOffsetY([-5, 5]).activeOffsetX([-5, 5]).onStart(() => {
+
+  // Gesture policy:
+  //  • activeOffsetY: require a clear *vertical* drag (10px) before this
+  //    pan claims the gesture.  Matches typical iOS scroll activation feel.
+  //  • failOffsetX:  if the finger crosses ~16px horizontally *before* we
+  //    activate, surrender the gesture entirely so any horizontal child
+  //    (FlatList horizontal, swiper, slider, etc.) can scroll cleanly
+  //    without the drawer also translating on Y.
+  //  • simultaneousWithExternalGesture(scrollRef): cooperate with the
+  //    drawer's own internal vertical ScrollView for nested scrolling.
+  const gesture = Gesture.Pan().simultaneousWithExternalGesture(scrollRef).activeOffsetY([-10, 10]).failOffsetX([-16, 16]).onStart(() => {
     context.value = {
       y: translateY.value
     };
@@ -134,6 +145,16 @@ function Drawer({
     prevAtTop.value = scrollY.value <= 1;
     scrollTopTranslationOffset.value = 0;
   }).onUpdate(event => {
+    // Defense-in-depth: even after vertical activation, if the *current*
+    // motion is dominantly horizontal (e.g., the user activated with a
+    // small Y nudge and then curved into a horizontal swipe on a child
+    // carousel), don't translate the drawer this frame.  failOffsetX
+    // already prevents activation in pure-horizontal swipes; this guards
+    // the diagonal-then-horizontal case.
+    if (Math.abs(event.translationX) > Math.abs(event.translationY) * 1.5) {
+      return;
+    }
+
     // Logic for nested scrolling:
     // If we are at the expanded position (minTranslateY) AND content is
     // scrolled down (scrollY > 0), let the ScrollView handle the gesture.
@@ -245,71 +266,108 @@ function Drawer({
   const titleWeight = getVariableByName('drawer/title/fontWeight', modes) || '700';
   const titleLineHeight = getVariableByName('drawer/title/lineHeight', modes) || 17;
   const titlePaddingBottom = getVariableByName('drawer/titleWrap/padding/bottom', modes) || 8;
+
+  // Drop shadow — Figma layers two shadows (primary + secondary) sharing
+  // the same offsetY/blur but with their own offsetX and color.
+  const shadowPrimaryOffsetX = getVariableByName('drawer/shadow/primary/offsetX', modes) ?? 0;
+  const shadowPrimaryOffsetY = getVariableByName('drawer/shadow/primary/offsetY', modes) ?? 16;
+  const shadowPrimaryBlur = getVariableByName('drawer/shadow/primary/blur', modes) ?? 48;
+  const shadowPrimaryColor = getVariableByName('drawer/shadow/primary/color', modes) ?? 'rgba(12, 13, 16, 0.16)';
+  const shadowSecondaryOffsetX = getVariableByName('drawer/shadow/secondary/offsetX', modes) ?? 0;
+  const shadowSecondaryColor = getVariableByName('drawer/shadow/secondary/color', modes) ?? 'rgba(12, 13, 16, 0.12)';
+
+  // Cross-platform shadow style. Web supports stacking two shadows via
+  // boxShadow. iOS only supports a single native shadow per view, so we
+  // apply the more prominent (primary) one. Android uses elevation.
+  const shadowStyle = Platform.select({
+    web: {
+      boxShadow: `${shadowSecondaryOffsetX}px ${shadowPrimaryOffsetY}px ${shadowPrimaryBlur}px 0px ${shadowSecondaryColor}, ` + `${shadowPrimaryOffsetX}px ${shadowPrimaryOffsetY}px ${shadowPrimaryBlur}px 0px ${shadowPrimaryColor}`
+    },
+    ios: {
+      shadowColor: shadowPrimaryColor,
+      shadowOffset: {
+        width: shadowPrimaryOffsetX,
+        height: shadowPrimaryOffsetY
+      },
+      shadowOpacity: 1,
+      shadowRadius: shadowPrimaryBlur / 2
+    },
+    android: {
+      elevation: 16
+    },
+    default: {}
+  });
   const defaultAccessibilityLabel = accessibilityLabel || title || 'Drawer';
   return /*#__PURE__*/_jsx(GestureHandlerRootView, {
     style: [styles.host, style],
     pointerEvents: "box-none",
     children: /*#__PURE__*/_jsx(GestureDetector, {
       gesture: gesture,
-      children: /*#__PURE__*/_jsxs(Animated.View, {
+      children: /*#__PURE__*/_jsx(Animated.View, {
         style: [styles.sheet, {
           // Constraint the height strictly to the expanded height
           // This ensures the ScrollView has a finite frame to scroll within
           height: expandedHeight,
           backgroundColor,
           borderTopLeftRadius: radius,
-          borderTopRightRadius: radius,
-          paddingLeft,
-          paddingRight,
-          paddingBottom,
-          rowGap: drawerGap
-        }, sheetStyle, animatedStyle],
+          borderTopRightRadius: radius
+        }, shadowStyle, sheetStyle, animatedStyle],
         accessible: true,
         ...(Platform.OS === 'web' ? {
           accessibilityRole: 'dialog'
         } : undefined),
         accessibilityLabel: undefined,
         accessibilityHint: accessibilityHint || 'Swipe up to expand, swipe down to collapse',
-        children: [/*#__PURE__*/_jsx(View, {
-          style: [styles.handleArea, !title && !header && {
-            paddingBottom: 0
+        children: /*#__PURE__*/_jsxs(View, {
+          style: [styles.sheetInner, {
+            borderTopLeftRadius: radius,
+            borderTopRightRadius: radius,
+            paddingLeft,
+            paddingRight,
+            paddingBottom,
+            rowGap: drawerGap
           }],
-          children: /*#__PURE__*/_jsx(View, {
+          children: [/*#__PURE__*/_jsx(View, {
+            style: [styles.handleArea, !title && !header && {
+              paddingBottom: 0
+            }],
+            children: /*#__PURE__*/_jsx(View, {
+              style: [{
+                backgroundColor: handleColor,
+                width: handleWidth,
+                height: handleHeight,
+                borderRadius: handleRadius
+              }]
+            })
+          }), header, title && /*#__PURE__*/_jsx(Text, {
             style: [{
-              backgroundColor: handleColor,
-              width: handleWidth,
-              height: handleHeight,
-              borderRadius: handleRadius
-            }]
-          })
-        }), header, title && /*#__PURE__*/_jsx(Text, {
-          style: [{
-            color: titleColor,
-            fontSize: titleSize,
-            fontWeight: titleWeight,
-            lineHeight: titleLineHeight,
-            marginBottom: titlePaddingBottom
-          }],
-          children: title
-        }), /*#__PURE__*/_jsx(AnimatedScrollView, {
-          ref: scrollRef,
-          style: [styles.content, contentStyle],
-          contentContainerStyle: [{
-            paddingBottom: paddingBottom + bottomInset,
-            gap: drawerGap,
-            flexDirection: 'column',
-            alignItems: 'stretch'
-          }, contentContainerStyle],
-          showsVerticalScrollIndicator: showsVerticalScrollIndicator,
-          animatedProps: animatedScrollProps,
-          alwaysBounceVertical: false,
-          overScrollMode: "always",
-          onScroll: useAnimatedScrollHandler(event => {
-            scrollY.value = event.contentOffset.y;
-          }),
-          scrollEventThrottle: 16,
-          children: children
-        })]
+              color: titleColor,
+              fontSize: titleSize,
+              fontWeight: titleWeight,
+              lineHeight: titleLineHeight,
+              marginBottom: titlePaddingBottom
+            }],
+            children: title
+          }), /*#__PURE__*/_jsx(AnimatedScrollView, {
+            ref: scrollRef,
+            style: [styles.content, contentStyle],
+            contentContainerStyle: [{
+              paddingBottom: paddingBottom + bottomInset,
+              gap: drawerGap,
+              flexDirection: 'column',
+              alignItems: 'stretch'
+            }, contentContainerStyle],
+            showsVerticalScrollIndicator: showsVerticalScrollIndicator,
+            animatedProps: animatedScrollProps,
+            alwaysBounceVertical: false,
+            overScrollMode: "always",
+            onScroll: useAnimatedScrollHandler(event => {
+              scrollY.value = event.contentOffset.y;
+            }),
+            scrollEventThrottle: 16,
+            children: children
+          })]
+        })
       })
     })
   });
@@ -327,7 +385,10 @@ const styles = StyleSheet.create({
   sheet: {
     width: '100%',
     position: 'absolute',
-    top: 0,
+    top: 0
+  },
+  sheetInner: {
+    flex: 1,
     overflow: 'hidden'
   },
   handleArea: {

package/lib/module/components/EmptyState/EmptyState.js

@@ -6,6 +6,7 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider';
 import IconCapsule from '../IconCapsule/IconCapsule';
 import Button from '../Button/Button';
+import { EMPTY_MODES } from '../../utils/react-utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * EmptyState component that displays an icon, title, description and an action button.
@@ -18,7 +19,7 @@ function EmptyState({
   showDescription = true,
   iconSlot,
   buttonSlot,
-  modes: propModes = {},
+  modes: propModes = EMPTY_MODES,
   style,
   testID
 }) {

package/lib/module/components/FilterBar/FilterBar.js

@@ -4,7 +4,7 @@ import React, { useState } from 'react';
 import { View } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import TextInput from '../TextInput/TextInput';
-import { cloneChildrenWithModes } from '../../utils/react-utils';
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * FilterBar component that mirrors the Figma "filterBar" component.
@@ -31,7 +31,7 @@ function FilterBar({
   onChangeText,
   children,
   renderInput,
-  modes = {},
+  modes = EMPTY_MODES,
   style,
   accessibilityLabel,
   accessibilityHint,

package/lib/module/components/Form/Form.js

@@ -4,6 +4,7 @@ import React, { createContext, useContext, useState, useMemo, useCallback } from
 import { View } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { useTokens } from '../../design-tokens/JFSThemeProvider';
+import { EMPTY_MODES } from '../../utils/react-utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 const FormContext = /*#__PURE__*/createContext(null);
 export function useFormContext() {
@@ -13,7 +14,7 @@ function Form({
   children,
   validationErrors: externalErrors,
   onSubmit,
-  modes: propModes = {},
+  modes: propModes = EMPTY_MODES,
   style,
   accessibilityLabel,
   testID

package/lib/module/components/FormField/FormField.js

@@ -3,6 +3,7 @@
 import React, { useState, useMemo, useCallback } from 'react';
 import { View, Text } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { EMPTY_MODES } from '../../utils/react-utils';
 import { useTokens } from '../../design-tokens/JFSThemeProvider';
 import TextInput from '../TextInput/TextInput';
 import SupportText from '../SupportText/SupportText';
@@ -14,7 +15,7 @@ function useFormField(props) {
     isInvalid = false,
     supportText,
     errorMessage,
-    modes: propModes = {},
+    modes: propModes = EMPTY_MODES,
     onFocus,
     onBlur
   } = props;
@@ -140,7 +141,7 @@ function FormField({
   isInvalid = false,
   supportText,
   errorMessage,
-  modes = {},
+  modes = EMPTY_MODES,
   style,
   onFocus,
   onBlur,

package/lib/module/components/HStack/HStack.js

@@ -4,7 +4,7 @@ import React from 'react';
 import { View } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { useTokens } from '../../design-tokens/JFSThemeProvider';
-import { cloneChildrenWithModes } from '../../utils/react-utils';
+import { cloneChildrenWithModes, EMPTY_MODES } from '../../utils/react-utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * HStack component for horizontal layout using design token spacing.
@@ -16,7 +16,7 @@ export const HStack = ({
   wrap,
   reverse = false,
   as,
-  modes: propModes = {},
+  modes: propModes = EMPTY_MODES,
   style,
   ...rest
 }) => {

package/lib/module/components/HoldingsCard/HoldingsCard.js

@@ -4,6 +4,7 @@ import React from 'react';
 import { View, Text, Pressable, Image } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import RadioButton from '../RadioButton/RadioButton';
+import { EMPTY_MODES } from '../../utils/react-utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const GRID_COLUMNS = 3;
 const GRID_COLUMN_GAP = 12;
@@ -31,7 +32,7 @@ export default function HoldingsCard({
   selected = false,
   disabled = false,
   onPress,
-  modes = {},
+  modes = EMPTY_MODES,
   style,
   testID
 }) {