jfs-components 0.1.0 → 0.1.8

package/lib/module/components/DropdownInput/DropdownInput.js

@@ -1,6 +1,6 @@
 "use strict";
 
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { Dimensions, Modal, Platform, Pressable, StyleSheet, Text, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
@@ -16,6 +16,12 @@ const IS_WEB = Platform.OS === 'web';
 // Types
 // ---------------------------------------------------------------------------
 
+/**
+ * Imperative handle exposed via `ref`. Lets the consumer drive the dropdown
+ * from outside — e.g. close it when an Android hardware/system button is
+ * pressed, or open it programmatically from a sibling control.
+ */
+
 // ---------------------------------------------------------------------------
 // Token resolution
 // ---------------------------------------------------------------------------
@@ -119,7 +125,7 @@ function collectOptionsFromChildren(children) {
 // Component
 // ---------------------------------------------------------------------------
 
-function DropdownInput({
+const DropdownInput = /*#__PURE__*/forwardRef(function DropdownInput({
   label,
   placeholder = 'Select an option',
   items,
@@ -150,7 +156,7 @@ function DropdownInput({
   accessibilityHint,
   onFocus,
   onBlur
-}) {
+}, ref) {
   // ---------------- Modes ----------------
   const {
     modes: globalModes
@@ -264,6 +270,32 @@ function DropdownInput({
     measure();
   }, [measure]);
 
+  // ---------------- Imperative handle ----------------
+  useImperativeHandle(ref, () => ({
+    open: () => {
+      if (isDisabled || isReadOnly) return;
+      measure();
+      setOpenState(true);
+    },
+    close: closeMenu,
+    toggle: () => {
+      if (isDisabled || isReadOnly) return;
+      measure();
+      toggleMenu();
+    },
+    focus: () => {
+      ;
+      triggerRef.current?.focus?.();
+    },
+    blur: () => {
+      ;
+      triggerRef.current?.blur?.();
+    },
+    measureInWindow: callback => {
+      triggerRef.current?.measureInWindow(callback);
+    }
+  }), [isDisabled, isReadOnly, measure, setOpenState, closeMenu, toggleMenu]);
+
   // ---------------- Popup positioning ----------------
   const [menuSize, setMenuSize] = useState(null);
   const handleMenuLayout = useCallback(e => {
@@ -531,7 +563,7 @@ function DropdownInput({
       transparent: true,
       statusBarTranslucent: true,
       navigationBarTranslucent: true,
-      animationType: "fade",
+      animationType: "none",
       onRequestClose: closeMenu,
       children: /*#__PURE__*/_jsx(Pressable, {
         style: StyleSheet.absoluteFill,
@@ -558,7 +590,7 @@ function DropdownInput({
       })
     })]
   });
-}
+});
 const webNoOutline = {
   outlineStyle: 'none',
   outlineWidth: 0,

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

@@ -1,6 +1,6 @@
 "use strict";
 
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { forwardRef, useCallback, useMemo, useState } from 'react';
 import { View, Text, TextInput as RNTextInput } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { useTokens } from '../../design-tokens/JFSThemeProvider';
@@ -156,7 +156,7 @@ function firstError(error) {
 // Component
 // ---------------------------------------------------------------------------
 
-function FormField({
+const FormField = /*#__PURE__*/forwardRef(function FormField({
   label,
   placeholder,
   value,
@@ -184,7 +184,7 @@ function FormField({
   accessibilityLabel,
   accessibilityHint,
   testID
-}) {
+}, ref) {
   // -- Form context integration -------------------------------------------
   const formCtx = useFormContext();
   const formError = name && formCtx ? firstError(formCtx.validationErrors[name]) : undefined;
@@ -341,6 +341,7 @@ function FormField({
         importantForAccessibility: "no",
         children: processedLeading
       }), /*#__PURE__*/_jsx(RNTextInput, {
+        ref: ref,
         style: [inputTextStyles, inputTextStyle],
         value: value ?? '',
         onChangeText: handleChangeText,
@@ -370,5 +371,5 @@ function FormField({
       modes: modes
     })]
   });
-}
+});
 export default FormField;

package/lib/module/components/FullscreenModal/FullscreenModal.js

@@ -1,6 +1,6 @@
 "use strict";
 
-import React, { useMemo, useRef } from 'react';
+import React, { useMemo, useRef, useState, useCallback } from 'react';
 import { View, Text, Animated } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
@@ -11,7 +11,7 @@ import Disclaimer from '../Disclaimer/Disclaimer';
 import IconButton from '../IconButton/IconButton';
 import ActionFooter from '../ActionFooter/ActionFooter';
 import Slot from '../Slot/Slot';
-
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // ---------------------------------------------------------------------------
 // Forced modes
 //
@@ -24,7 +24,6 @@ import Slot from '../Slot/Slot';
 // stays hot, and so `cloneChildrenWithModes` can use it as the
 // always-wins `forcedModes` argument.
 // ---------------------------------------------------------------------------
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const FULLSCREEN_MODAL_FORCED_MODES = Object.freeze({
   context5: 'Fullscreen Modal'
 });
@@ -248,7 +247,57 @@ function FullscreenModal({
     useNativeDriver: true
   }), [scrollY]);
   const heroTranslateY = useMemo(() => Animated.multiply(scrollY, -1), [scrollY]);
-  const processedHeroMedia = useMemo(() => heroMedia ? cloneChildrenWithModes(heroMedia, modes, FULLSCREEN_MODAL_FORCED_MODES) : null, [heroMedia, modes]);
+
+  // The hero media is a full-bleed background pinned to the top of the modal.
+  // Its wrapper is absolutely positioned (`top/left/right: 0`) so it never
+  // contributes to scroll height. We measure the modal's own width so we can
+  // give the hero media a DEFINITE { width, height } box (see
+  // `processedHeroMedia` below) — relying on the media's own `width: '100%'` +
+  // `aspectRatio` is unreliable inside an indefinite-height absolute box (RN's
+  // `<Image>` falls back to its intrinsic width and leaves a gap), so we size
+  // it explicitly here instead.
+  const [containerWidth, setContainerWidth] = useState(0);
+  const onContainerLayout = useCallback(e => {
+    const w = e.nativeEvent.layout.width;
+    setContainerWidth(prev => prev !== w ? w : prev);
+  }, []);
+  const processedHeroMedia = useMemo(() => {
+    if (!heroMedia) return null;
+    // Defer rendering the hero until we have measured the modal width. This
+    // matters for image sharpness: React Native decodes a bitmap once, on the
+    // first render, and caches it. If we rendered the media before knowing the
+    // final box, that first decode would be sized/sampled for the wrong box and
+    // the cached (downsampled) bitmap would then just be scaled up — blurry.
+    // Rendering only once the explicit { width, height } box is known means the
+    // very first decode is already full-resolution for the correct box.
+    if (containerWidth <= 0) return null;
+    const withModes = cloneChildrenWithModes(heroMedia, modes, FULLSCREEN_MODAL_FORCED_MODES);
+
+    // Force the hero to fill the modal width edge to edge, top-aligned, with the
+    // height derived from the media's native aspect ratio.
+    //
+    // Why we inject explicit width/height instead of relying on the media's own
+    // `width: '100%'` + `aspectRatio`: the hero wrapper is absolutely positioned
+    // with an INDEFINITE height, and in that layout context React Native's
+    // `<Image>` falls back to its INTRINSIC width (so a 361px-wide asset renders
+    // 361px wide and leaves a gap on the right) rather than stretching to the
+    // parent. By computing `height = containerWidth / ratio` here and passing a
+    // DEFINITE { width, height } box (which makes `<Image>` skip aspectRatio and
+    // cover-fit into that exact box), the hero always fills the width with the
+    // correct ratio-derived height.
+    return React.Children.map(withModes, child => {
+      if (! /*#__PURE__*/React.isValidElement(child)) return child;
+      const props = child.props;
+      const ratio = typeof props.ratio === 'number' && props.ratio > 0 ? props.ratio : undefined;
+      // Only size media that exposes a numeric `ratio` and hasn't already been
+      // given an explicit box by the caller.
+      if (ratio == null || props.width != null || props.height != null) return child;
+      return /*#__PURE__*/React.cloneElement(child, {
+        width: containerWidth,
+        height: containerWidth / ratio
+      });
+    });
+  }, [heroMedia, modes, containerWidth]);
   const processedChildren = useMemo(() => children ? cloneChildrenWithModes(children, modes, FULLSCREEN_MODAL_FORCED_MODES) : null, [children, modes]);
 
   // The hero text region always reserves `heroHeight` and anchors its content
@@ -301,8 +350,18 @@ function FullscreenModal({
   return /*#__PURE__*/_jsxs(View, {
     style: [rootStyle, style],
     testID: testID,
+    onLayout: onContainerLayout,
     children: [processedHeroMedia ? /*#__PURE__*/_jsx(Animated.View, {
-      style: [heroBackgroundStyle, {
+      style: [heroBackgroundStyle,
+      // Give the absolute wrapper a DEFINITE width (the measured modal
+      // width) so the media's `width: '100%'` + `aspectRatio` resolves to
+      // a true edge-to-edge fill with a ratio-derived height, top-aligned.
+      // Before the first layout pass `containerWidth` is 0 — fall back to
+      // stretching via `left/right: 0` so there is no flash of a mis-sized
+      // image.
+      containerWidth > 0 ? {
+        width: containerWidth
+      } : null, {
         transform: [{
           translateY: heroTranslateY
         }]

package/lib/module/components/Image/Image.js

@@ -37,6 +37,7 @@ function Image({
   imageSource,
   ratio = DEFAULT_RATIO,
   resizeMode = 'cover',
+  resizeMethod,
   width,
   height,
   borderRadius,
@@ -47,11 +48,15 @@ function Image({
   loading
 }) {
   const source = useMemo(() => normalizeSource(imageSource), [imageSource]);
+
+  // Explicit { width, height } means a "fill an exact box" layout — typically a
+  // full-bleed hero/background where the asset is high-res and sharpness
+  // matters most. There, default to `'none'` (full-resolution, no pre-decode
+  // downsample) so detail is never thrown away. Aspect-ratio images keep the
+  // memory-safe `'scale'` default. A caller-supplied `resizeMethod` always wins.
+  const isExplicitBox = width != null && height != null;
+  const effectiveResizeMethod = resizeMethod ?? (isExplicitBox ? 'none' : 'scale');
   const layoutStyle = useMemo(() => {
-    // If the caller has fully specified width AND height, they're doing a
-    // non-aspect layout (e.g. "fill the parent") — respect that and skip
-    // `aspectRatio` so it doesn't conflict.
-    const isExplicitBox = width != null && height != null;
     const s = {
       width: width ?? '100%',
       ...(isExplicitBox ? {
@@ -65,7 +70,7 @@ function Image({
     };
     if (borderRadius != null) s.borderRadius = borderRadius;
     return s;
-  }, [ratio, width, height, borderRadius]);
+  }, [ratio, width, height, borderRadius, isExplicitBox]);
   const {
     active: groupActive
   } = useSkeleton();
@@ -96,6 +101,7 @@ function Image({
     source: source,
     style: [layoutStyle, style],
     resizeMode: resizeMode,
+    resizeMethod: effectiveResizeMethod,
     accessibilityLabel: accessibilityLabel,
     accessibilityElementsHidden: accessibilityElementsHidden,
     importantForAccessibility: importantForAccessibility

package/lib/module/components/InputSearch/InputSearch.js

@@ -1,6 +1,6 @@
 "use strict";
 
-import React, { useState } from 'react';
+import React, { forwardRef, useState } from 'react';
 import { View, Text, Pressable } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { EMPTY_MODES } from '../../utils/react-utils';
@@ -48,7 +48,7 @@ function SupportText({
     })]
   });
 }
-export default function InputSearch({
+const InputSearch = /*#__PURE__*/forwardRef(function InputSearch({
   supportText = true,
   supportTextLabel = "Support Text",
   supportTextIcon = "ic_info",
@@ -63,7 +63,7 @@ export default function InputSearch({
   trailing,
   inputStyle,
   ...rest
-}) {
+}, ref) {
   const [isFocused, setIsFocused] = useState(false);
 
   // Hardcode InputState based on the state prop, ignoring any external InputState passed in modes
@@ -118,6 +118,7 @@ export default function InputSearch({
       gap: formFieldGap
     }, containerStyle],
     children: [/*#__PURE__*/_jsx(TextInput, {
+      ref: ref,
       placeholder: placeholder,
       value: value || '',
       onChangeText: onChangeText || (() => {}),
@@ -137,4 +138,5 @@ export default function InputSearch({
       modes: componentModes
     })]
   });
-}
+});
+export default InputSearch;

package/lib/module/components/InstitutionBadge/InstitutionBadge.js

@@ -6,11 +6,10 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider';
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
 import MediaSource from '../../utils/MediaSource';
-
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Default avatar asset (shared with the Avatar component) so that
 // InstitutionBadge has a sensible visual fallback when no `source` is
 // provided in stories or playgrounds.
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const DEFAULT_AVATAR_IMAGE = require('../Avatar/31595e70c4181263f9971590224b12934b280c9b.png');
 const toNumber = (value, fallback) => {
   if (typeof value === 'number') {

package/lib/module/components/LottiePlayer/loadNativeLottieView.js

@@ -6,17 +6,6 @@ import { Text, View } from 'react-native';
 /** Props we forward to the underlying native Lottie view. */
 import { jsx as _jsx } from "react/jsx-runtime";
 const INSTALL_HINT = 'LottiePlayer requires lottie-react-native in your app.\n' + '  npm install lottie-react-native\n' + '  cd ios && pod install';
-
-/**
- * Metro resolves `require('lottie-react-native')` at bundle time even inside
- * try/catch, which breaks apps that import `jfs-components` without having
- * the optional peer installed. Splitting the module id into a runtime string
- * keeps Metro from statically linking it — the native module is loaded only
- * when present in the consumer's node_modules.
- */
-function resolveNativeLottieModuleName() {
-  return ['lottie', '-react', '-native'].join('');
-}
 function LottieUnavailableView({
   style
 }) {
@@ -60,8 +49,14 @@ let cachedView;
 export function getNativeLottieView() {
   if (cachedView !== undefined) return cachedView;
   try {
-    const mod = require(resolveNativeLottieModuleName());
-    cachedView = mod.default ?? LottieUnavailable;
+    // Static require so Metro resolves the module by its build-time numeric id.
+    // A runtime-constructed string path is NOT resolvable by Metro's `require`
+    // (it indexes modules by number, not path), so it would always throw and
+    // fall back to the install hint even when the package is installed. The
+    // dependency stays an *optional* peer: apps that use LottiePlayer install
+    // it; apps that don't simply never import this module.
+    const mod = require('lottie-react-native');
+    cachedView = mod.default ?? mod.LottieView ?? LottieUnavailable;
   } catch {
     cachedView = LottieUnavailable;
   }

package/lib/module/components/MoneyValue/MoneyValue.js

@@ -4,9 +4,8 @@ import React, { useMemo, useEffect, useRef } from 'react';
 import { View, Text, Pressable, Animated } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { EMPTY_MODES } from '../../utils/react-utils';
-
-// Map of common ISO 4217 currency codes to display symbols
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Map of common ISO 4217 currency codes to display symbols
 const CURRENCY_SYMBOLS = {
   INR: '₹',
   USD: '$',

package/lib/module/components/NoteInput/NoteInput.js

@@ -1,15 +1,15 @@
 "use strict";
 
-import React, { useState, useRef } from 'react';
+import React, { forwardRef, useState, useRef } from 'react';
 import { View, TextInput as RNTextInput, Text, Pressable } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
-import { EMPTY_MODES } from '../../utils/react-utils';
+import { EMPTY_MODES, mergeRefs } from '../../utils/react-utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * NoteInput component representing an interactive "Add note" badge style field.
  * Allows the user to click, clears the placeholder text, and shows a blinking cursor when focused.
  */
-export default function NoteInput({
+const NoteInput = /*#__PURE__*/forwardRef(function NoteInput({
   value = '',
   placeholder = 'Add note',
   onChangeText,
@@ -20,7 +20,7 @@ export default function NoteInput({
   onFocus,
   onBlur,
   ...rest
-}) {
+}, ref) {
   const [internalFocused, setInternalFocused] = useState(false);
   const inputRef = useRef(null);
 
@@ -92,7 +92,7 @@ export default function NoteInput({
         importantForAccessibility: "no",
         children: internalFocused ? value || ' ' : value || placeholder
       }), /*#__PURE__*/_jsx(RNTextInput, {
-        ref: inputRef,
+        ref: mergeRefs(inputRef, ref),
         value: value,
         onChangeText: onChangeText,
         placeholder: internalFocused ? '' : placeholder,
@@ -112,4 +112,5 @@ export default function NoteInput({
       })]
     })
   });
-}
+});
+export default NoteInput;

package/lib/module/components/OTP/OTP.js

@@ -7,11 +7,10 @@ import { useTokens } from '../../design-tokens/JFSThemeProvider';
 import SupportText from '../SupportText/SupportText';
 import Button from '../Button/Button';
 import { cloneChildrenWithModes, EMPTY_MODES } from '../../utils/react-utils';
-
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // Default mode overrides for the resend Button. Per design: a small,
 // low-emphasis, neutral-appearance button. Consumers can override any of
 // these via OTPResendConfig.resendButtonModes.
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const DEFAULT_RESEND_BUTTON_MODES = {
   AppearanceBrand: 'Neutral',
   'Button / Size': 'S',

package/lib/module/components/Overlay/Overlay.js

@@ -0,0 +1,87 @@
+"use strict";
+
+import React, { useMemo } from 'react';
+import { Pressable, StyleSheet, View } 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";
+const PLACEMENT_STYLE = {
+  center: {
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  top: {
+    justifyContent: 'flex-start',
+    alignItems: 'stretch'
+  },
+  bottom: {
+    justifyContent: 'flex-end',
+    alignItems: 'stretch'
+  },
+  stretch: {
+    justifyContent: 'center',
+    alignItems: 'stretch'
+  }
+};
+
+/**
+ * Overlay — a token-driven scrim that dims content behind an overlaid surface.
+ *
+ * Renders a semi-transparent backdrop using the `overlay/background` design
+ * token and optionally hosts content (e.g. a modal, sheet or dialog) on top.
+ * Pair it with a `Modal` for true full-screen overlays, or drop it inside any
+ * relatively-positioned container to dim just that region.
+ *
+ * @example
+ * ```tsx
+ * <Overlay modes={modes} onPress={close}>
+ *   <Card>Dialog content</Card>
+ * </Overlay>
+ * ```
+ */
+function Overlay({
+  children,
+  contentPlacement = 'center',
+  onPress,
+  fill = true,
+  modes: propModes = EMPTY_MODES,
+  style,
+  ...rest
+}) {
+  const {
+    modes: globalModes
+  } = useTokens();
+  const modes = useMemo(() => ({
+    ...globalModes,
+    ...propModes
+  }), [globalModes, propModes]);
+  const {
+    containerStyle,
+    processedChildren
+  } = useMemo(() => {
+    const backgroundColor = getVariableByName('overlay/background', modes) ?? 'rgba(0, 0, 0, 0.7)';
+    const container = {
+      backgroundColor,
+      overflow: 'hidden',
+      ...PLACEMENT_STYLE[contentPlacement]
+    };
+    const processed = children ? cloneChildrenWithModes(children, modes) : null;
+    return {
+      containerStyle: container,
+      processedChildren: processed
+    };
+  }, [children, modes, contentPlacement]);
+  return /*#__PURE__*/_jsxs(View, {
+    style: [fill && StyleSheet.absoluteFill, containerStyle, style],
+    accessibilityViewIsModal: true,
+    ...rest,
+    children: [onPress ? /*#__PURE__*/_jsx(Pressable, {
+      style: StyleSheet.absoluteFill,
+      onPress: onPress,
+      accessibilityRole: "button",
+      accessibilityLabel: "Dismiss overlay"
+    }) : null, processedChildren]
+  });
+}
+export default /*#__PURE__*/React.memo(Overlay);