jfs-components 0.0.62 → 0.0.64

package/lib/commonjs/components/Carousel/Carousel.js

@@ -10,6 +10,7 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _reactUtils = require("../../utils/react-utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 // ---------------------------------------------------------------------------
@@ -17,7 +18,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 // ---------------------------------------------------------------------------
 
 const CarouselContext = /*#__PURE__*/(0, _react.createContext)({
-  modes: {},
+  modes: _reactUtils.EMPTY_MODES,
   activeIndex: 0,
   totalItems: 0,
   goTo: () => {},
@@ -35,7 +36,7 @@ const CarouselContext = /*#__PURE__*/(0, _react.createContext)({
 
 function Carousel({
   children,
-  modes = {},
+  modes = _reactUtils.EMPTY_MODES,
   autoPlay = false,
   autoPlayInterval = 4000,
   showPagination = true,

package/lib/commonjs/components/Checkbox/Checkbox.js

@@ -8,6 +8,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _reactNativeSvg = _interopRequireWildcard(require("react-native-svg"));
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _reactUtils = require("../../utils/react-utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 /**
@@ -63,7 +64,7 @@ function Checkbox({
   defaultChecked = false,
   onValueChange,
   disabled = false,
-  modes = {},
+  modes = _reactUtils.EMPTY_MODES,
   style,
   accessibilityLabel
 }) {

package/lib/commonjs/components/ChipGroup/ChipGroup.js

@@ -16,7 +16,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  */
 function ChipGroup({
   children,
-  modes = {},
+  modes = _reactUtils.EMPTY_MODES,
   style,
   testID
 }) {

package/lib/commonjs/components/ChipSelect/ChipSelect.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _reactUtils = require("../../utils/react-utils");
 var _Icon = _interopRequireDefault(require("../../icons/Icon"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -18,7 +19,7 @@ function ChipSelect({
   label = 'Date',
   active = false,
   icon = 'ic_calendar_week',
-  modes = {},
+  modes = _reactUtils.EMPTY_MODES,
   style,
   labelSlot,
   onPress

package/lib/commonjs/components/DebitCard/DebitCard.js

@@ -21,7 +21,7 @@ function DebitCard({
   cardArtSource = defaultCardArt,
   bankLogoSlot,
   providerLogoSlot,
-  modes: propModes = {},
+  modes: propModes = _reactUtils.EMPTY_MODES,
   style
 }) {
   const {

package/lib/commonjs/components/Disclaimer/Disclaimer.js

@@ -8,6 +8,7 @@ var _react = _interopRequireDefault(require("react"));
 var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
 var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
+var _reactUtils = require("../../utils/react-utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
@@ -33,7 +34,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  */
 function Disclaimer({
   disclaimer = 'All financial services are provided by Jio Payments Bank Pvt. Ltd.',
-  modes: propModes = {},
+  modes: propModes = _reactUtils.EMPTY_MODES,
   style,
   textStyle,
   accessibilityLabel,

package/lib/commonjs/components/Divider/Divider.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _reactUtils = require("../../utils/react-utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
@@ -36,7 +37,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  */
 function Divider({
   direction = 'horizontal',
-  modes = {},
+  modes = _reactUtils.EMPTY_MODES,
   style,
   accessibilityLabel = undefined
 }) {

package/lib/commonjs/components/Drawer/Drawer.js

@@ -9,6 +9,7 @@ var _reactNative = require("react-native");
 var _reactNativeGestureHandler = require("react-native-gesture-handler");
 var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _reactUtils = require("../../utils/react-utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const AnimatedScrollView = _reactNativeReanimated.default.createAnimatedComponent(_reactNativeGestureHandler.ScrollView);
@@ -49,7 +50,7 @@ function rubberBand(value, min, max, friction = 0.55) {
  * Uses react-native-gesture-handler and react-native-reanimated.
  */
 function Drawer({
-  modes = {},
+  modes = _reactUtils.EMPTY_MODES,
   style,
   title,
   header,
@@ -130,7 +131,17 @@ function Drawer({
   const updateMode = (0, _react.useCallback)(newMode => {
     setMode(newMode);
   }, []);
-  const gesture = _reactNativeGestureHandler.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 = _reactNativeGestureHandler.Gesture.Pan().simultaneousWithExternalGesture(scrollRef).activeOffsetY([-10, 10]).failOffsetX([-16, 16]).onStart(() => {
     context.value = {
       y: translateY.value
     };
@@ -139,6 +150,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.
@@ -250,71 +271,108 @@ function Drawer({
   const titleWeight = (0, _figmaVariablesResolver.getVariableByName)('drawer/title/fontWeight', modes) || '700';
   const titleLineHeight = (0, _figmaVariablesResolver.getVariableByName)('drawer/title/lineHeight', modes) || 17;
   const titlePaddingBottom = (0, _figmaVariablesResolver.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 = (0, _figmaVariablesResolver.getVariableByName)('drawer/shadow/primary/offsetX', modes) ?? 0;
+  const shadowPrimaryOffsetY = (0, _figmaVariablesResolver.getVariableByName)('drawer/shadow/primary/offsetY', modes) ?? 16;
+  const shadowPrimaryBlur = (0, _figmaVariablesResolver.getVariableByName)('drawer/shadow/primary/blur', modes) ?? 48;
+  const shadowPrimaryColor = (0, _figmaVariablesResolver.getVariableByName)('drawer/shadow/primary/color', modes) ?? 'rgba(12, 13, 16, 0.16)';
+  const shadowSecondaryOffsetX = (0, _figmaVariablesResolver.getVariableByName)('drawer/shadow/secondary/offsetX', modes) ?? 0;
+  const shadowSecondaryColor = (0, _figmaVariablesResolver.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 = _reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.GestureHandlerRootView, {
     style: [styles.host, style],
     pointerEvents: "box-none",
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector, {
       gesture: gesture,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeReanimated.default.View, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.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,
         ...(_reactNative.Platform.OS === 'web' ? {
           accessibilityRole: 'dialog'
         } : undefined),
         accessibilityLabel: undefined,
         accessibilityHint: accessibilityHint || 'Swipe up to expand, swipe down to collapse',
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: [styles.handleArea, !title && !header && {
-            paddingBottom: 0
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: [styles.sheetInner, {
+            borderTopLeftRadius: radius,
+            borderTopRightRadius: radius,
+            paddingLeft,
+            paddingRight,
+            paddingBottom,
+            rowGap: drawerGap
           }],
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: [styles.handleArea, !title && !header && {
+              paddingBottom: 0
+            }],
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+              style: [{
+                backgroundColor: handleColor,
+                width: handleWidth,
+                height: handleHeight,
+                borderRadius: handleRadius
+              }]
+            })
+          }), header, title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
             style: [{
-              backgroundColor: handleColor,
-              width: handleWidth,
-              height: handleHeight,
-              borderRadius: handleRadius
-            }]
-          })
-        }), header, title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [{
-            color: titleColor,
-            fontSize: titleSize,
-            fontWeight: titleWeight,
-            lineHeight: titleLineHeight,
-            marginBottom: titlePaddingBottom
-          }],
-          children: title
-        }), /*#__PURE__*/(0, _jsxRuntime.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: (0, _reactNativeReanimated.useAnimatedScrollHandler)(event => {
-            scrollY.value = event.contentOffset.y;
-          }),
-          scrollEventThrottle: 16,
-          children: children
-        })]
+              color: titleColor,
+              fontSize: titleSize,
+              fontWeight: titleWeight,
+              lineHeight: titleLineHeight,
+              marginBottom: titlePaddingBottom
+            }],
+            children: title
+          }), /*#__PURE__*/(0, _jsxRuntime.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: (0, _reactNativeReanimated.useAnimatedScrollHandler)(event => {
+              scrollY.value = event.contentOffset.y;
+            }),
+            scrollEventThrottle: 16,
+            children: children
+          })]
+        })
       })
     })
   });
@@ -332,7 +390,10 @@ const styles = _reactNative.StyleSheet.create({
   sheet: {
     width: '100%',
     position: 'absolute',
-    top: 0,
+    top: 0
+  },
+  sheetInner: {
+    flex: 1,
     overflow: 'hidden'
   },
   handleArea: {

package/lib/commonjs/components/EmptyState/EmptyState.js

@@ -10,6 +10,7 @@ var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resol
 var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
 var _IconCapsule = _interopRequireDefault(require("../IconCapsule/IconCapsule"));
 var _Button = _interopRequireDefault(require("../Button/Button"));
+var _reactUtils = require("../../utils/react-utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
@@ -24,7 +25,7 @@ function EmptyState({
   showDescription = true,
   iconSlot,
   buttonSlot,
-  modes: propModes = {},
+  modes: propModes = _reactUtils.EMPTY_MODES,
   style,
   testID
 }) {

package/lib/commonjs/components/FilterBar/FilterBar.js

@@ -37,7 +37,7 @@ function FilterBar({
   onChangeText,
   children,
   renderInput,
-  modes = {},
+  modes = _reactUtils.EMPTY_MODES,
   style,
   accessibilityLabel,
   accessibilityHint,

package/lib/commonjs/components/Form/Form.js

@@ -9,6 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
 var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
+var _reactUtils = require("../../utils/react-utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const FormContext = /*#__PURE__*/(0, _react.createContext)(null);
@@ -19,7 +20,7 @@ function Form({
   children,
   validationErrors: externalErrors,
   onSubmit,
-  modes: propModes = {},
+  modes: propModes = _reactUtils.EMPTY_MODES,
   style,
   accessibilityLabel,
   testID

package/lib/commonjs/components/FormField/FormField.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _reactUtils = require("../../utils/react-utils");
 var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
 var _TextInput = _interopRequireDefault(require("../TextInput/TextInput"));
 var _SupportText = _interopRequireDefault(require("../SupportText/SupportText"));
@@ -20,7 +21,7 @@ function useFormField(props) {
     isInvalid = false,
     supportText,
     errorMessage,
-    modes: propModes = {},
+    modes: propModes = _reactUtils.EMPTY_MODES,
     onFocus,
     onBlur
   } = props;
@@ -146,7 +147,7 @@ function FormField({
   isInvalid = false,
   supportText,
   errorMessage,
-  modes = {},
+  modes = _reactUtils.EMPTY_MODES,
   style,
   onFocus,
   onBlur,

package/lib/commonjs/components/HStack/HStack.js

@@ -21,7 +21,7 @@ const HStack = ({
   wrap,
   reverse = false,
   as,
-  modes: propModes = {},
+  modes: propModes = _reactUtils.EMPTY_MODES,
   style,
   ...rest
 }) => {

package/lib/commonjs/components/HoldingsCard/HoldingsCard.js

@@ -8,6 +8,7 @@ var _react = _interopRequireDefault(require("react"));
 var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
 var _RadioButton = _interopRequireDefault(require("../RadioButton/RadioButton"));
+var _reactUtils = require("../../utils/react-utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const GRID_COLUMNS = 3;
@@ -36,7 +37,7 @@ function HoldingsCard({
   selected = false,
   disabled = false,
   onPress,
-  modes = {},
+  modes = _reactUtils.EMPTY_MODES,
   style,
   testID
 }) {