jfs-components 0.0.77 → 0.0.79

package/lib/module/components/ExpandableCheckbox/ExpandableCheckbox.js

@@ -0,0 +1,161 @@
+"use strict";
+
+import React, { useCallback, useMemo, useState } from 'react';
+import { View, Text } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { EMPTY_MODES } from '../../utils/react-utils';
+import Checkbox from '../Checkbox/Checkbox';
+import Button from '../Button/Button';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Default modes applied to the inner toggle `Button`. These resolve the
+ * tertiary-style pill in the Figma reference (small, transparent background,
+ * brand purple foreground). Any value supplied via the consumer `modes` prop
+ * takes precedence over these defaults.
+ */
+const BUTTON_DEFAULT_MODES = {
+  'Button / Size': 'XS',
+  AppearanceBrand: 'Secondary',
+  Emphasis: 'Low'
+};
+
+/**
+ * ExpandableCheckbox composes a `Checkbox`, a long-form label and a
+ * "Read more" / "Read less" toggle. Mirrors the Figma "Expandable Checkbox"
+ * component with two states:
+ *
+ *  - **Idle (collapsed)** — checkbox + truncated label + toggle button arranged
+ *    in a horizontal row (cross-axis centered).
+ *  - **Open (expanded)** — checkbox + full multi-line label, with the toggle
+ *    button right-aligned beneath the row.
+ *
+ * The checkbox and the toggle button have independent press handlers — pressing
+ * the toggle does not affect the checked state, and toggling the checkbox does
+ * not collapse / expand the row.
+ *
+ * @component
+ * @param {ExpandableCheckboxProps} props
+ *
+ * @example
+ * ```tsx
+ * <ExpandableCheckbox
+ *   label="By checking this box, I (a) acknowledge and (b) agree to the full terms…"
+ *   defaultChecked
+ *   onValueChange={setAccepted}
+ *   modes={{ 'Color Mode': 'Light' }}
+ * />
+ * ```
+ */
+function ExpandableCheckbox({
+  label = '',
+  checked: controlledChecked,
+  defaultChecked = false,
+  onValueChange,
+  expanded: controlledExpanded,
+  defaultExpanded = false,
+  onExpandedChange,
+  disabled = false,
+  readMoreLabel = 'Read more',
+  readLessLabel = 'Read less',
+  collapsedLines = 1,
+  modes = EMPTY_MODES,
+  style,
+  labelStyle,
+  accessibilityLabel
+}) {
+  const isCheckedControlled = controlledChecked !== undefined;
+  const [internalChecked, setInternalChecked] = useState(defaultChecked);
+  const isChecked = isCheckedControlled ? controlledChecked : internalChecked;
+  const isExpandedControlled = controlledExpanded !== undefined;
+  const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);
+  const isExpanded = isExpandedControlled ? controlledExpanded : internalExpanded;
+  const handleToggleChecked = useCallback(next => {
+    if (disabled) return;
+    if (!isCheckedControlled) setInternalChecked(next);
+    onValueChange?.(next);
+  }, [disabled, isCheckedControlled, onValueChange]);
+  const handleToggleExpanded = useCallback(() => {
+    if (disabled) return;
+    const next = !isExpanded;
+    if (!isExpandedControlled) setInternalExpanded(next);
+    onExpandedChange?.(next);
+  }, [disabled, isExpanded, isExpandedControlled, onExpandedChange]);
+  const gap = getVariableByName('expandableCheckbox/gap', modes) ?? 8;
+  const rowGap = getVariableByName('checkboxItem/gap', modes) ?? 8;
+  const rowPaddingHorizontal = getVariableByName('checkboxItem/padding/horizontal', modes) ?? 0;
+  const rowPaddingVertical = getVariableByName('checkboxItem/padding/vertical', modes) ?? 0;
+  const labelColor = getVariableByName('checkboxItem/foreground', modes) ?? '#1a1c1f';
+  const labelFontFamily = getVariableByName('checkboxItem/label/fontFamily', modes) ?? 'JioType Var';
+  const labelFontSize = getVariableByName('checkboxItem/label/fontSize', modes) ?? 14;
+  const labelLineHeight = getVariableByName('checkboxItem/label/lineHeight', modes) ?? 19;
+  const labelFontWeightRaw = getVariableByName('checkboxItem/label/fontWeight', modes) ?? 400;
+  const labelFontWeight = String(labelFontWeightRaw);
+  const containerStyle = useMemo(() => ({
+    flexDirection: isExpanded ? 'column' : 'row',
+    alignItems: isExpanded ? 'flex-end' : 'center',
+    gap,
+    width: '100%',
+    ...(disabled ? {
+      opacity: 0.6
+    } : null)
+  }), [isExpanded, gap, disabled]);
+  const rowStyle = useMemo(() => ({
+    flex: isExpanded ? undefined : 1,
+    alignSelf: isExpanded ? 'stretch' : 'auto',
+    minWidth: 0,
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: rowGap,
+    paddingHorizontal: rowPaddingHorizontal,
+    paddingVertical: rowPaddingVertical
+  }), [isExpanded, rowGap, rowPaddingHorizontal, rowPaddingVertical]);
+  const resolvedLabelStyle = useMemo(() => ({
+    flex: 1,
+    minWidth: 0,
+    color: labelColor,
+    fontFamily: labelFontFamily,
+    fontSize: labelFontSize,
+    lineHeight: labelLineHeight,
+    fontWeight: labelFontWeight
+  }), [labelColor, labelFontFamily, labelFontSize, labelLineHeight, labelFontWeight]);
+  const buttonModes = useMemo(() => ({
+    ...BUTTON_DEFAULT_MODES,
+    ...modes
+  }), [modes]);
+  const a11yLabel = accessibilityLabel ?? (typeof label === 'string' ? label : undefined);
+  const buttonLabel = isExpanded ? readLessLabel : readMoreLabel;
+  const labelNumberOfLinesProps = !isExpanded && collapsedLines > 0 ? {
+    numberOfLines: collapsedLines,
+    ellipsizeMode: 'tail'
+  } : null;
+  return /*#__PURE__*/_jsxs(View, {
+    style: [containerStyle, style],
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: rowStyle,
+      children: [/*#__PURE__*/_jsx(Checkbox, {
+        checked: isChecked,
+        disabled: disabled,
+        onValueChange: handleToggleChecked,
+        modes: modes,
+        ...(a11yLabel !== undefined ? {
+          accessibilityLabel: a11yLabel
+        } : {})
+      }), /*#__PURE__*/_jsx(Text, {
+        style: [resolvedLabelStyle, labelStyle],
+        selectable: false,
+        ...(labelNumberOfLinesProps ?? {}),
+        children: label
+      })]
+    }), /*#__PURE__*/_jsx(Button, {
+      label: buttonLabel,
+      onPress: handleToggleExpanded,
+      disabled: disabled,
+      modes: buttonModes,
+      accessibilityLabel: buttonLabel,
+      accessibilityState: {
+        expanded: isExpanded
+      }
+    })]
+  });
+}
+export default ExpandableCheckbox;

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

@@ -1,7 +1,7 @@
 "use strict";
 
-import React, { useCallback, useMemo, useState } from 'react';
-import { View, Text, TextInput as RNTextInput } from 'react-native';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import { View, Text, Pressable, TextInput as RNTextInput } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { useTokens } from '../../design-tokens/JFSThemeProvider';
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
@@ -202,6 +202,16 @@ function FormField({
   const [isFocused, setIsFocused] = useState(false);
   const interactive = !isDisabled && !isReadOnly;
 
+  // Ref to the native input so tapping anywhere in the input row (padding,
+  // leading/trailing gutters) focuses it on the FIRST tap — fixing the Android
+  // "two taps to open the keyboard" issue caused by the row intercepting the
+  // initial touch.
+  const inputRef = useRef(null);
+  const focusInput = useCallback(() => {
+    if (!interactive) return;
+    inputRef.current?.focus();
+  }, [interactive]);
+
   // FormField States cascade — error > read only/disabled > active (focused) > idle.
   // Disabled maps to "Read Only" since there is no dedicated disabled mode and
   // the visual treatment is closest. This is only the DEFAULT — an explicit
@@ -334,13 +344,16 @@ function FormField({
         style: requiredIndicatorStyle,
         children: " *"
       })]
-    }), /*#__PURE__*/_jsxs(View, {
+    }), /*#__PURE__*/_jsxs(Pressable, {
       style: [inputRowStyle, inputStyle],
+      onPress: focusInput,
+      accessible: false,
       children: [processedLeading != null && /*#__PURE__*/_jsx(View, {
         accessibilityElementsHidden: true,
         importantForAccessibility: "no",
         children: processedLeading
       }), /*#__PURE__*/_jsx(RNTextInput, {
+        ref: inputRef,
         style: [inputTextStyles, inputTextStyle],
         value: value ?? '',
         onChangeText: handleChangeText,

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

@@ -0,0 +1,348 @@
+"use strict";
+
+import React, { useMemo } from 'react';
+import { View, Text, ScrollView } from 'react-native';
+import Animated, { Extrapolation, interpolate, useAnimatedScrollHandler, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { useTokens } from '../../design-tokens/JFSThemeProvider';
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
+import Button from '../Button/Button';
+import Disclaimer from '../Disclaimer/Disclaimer';
+import IconButton from '../IconButton/IconButton';
+import ActionFooter from '../ActionFooter/ActionFooter';
+import Slot from '../Slot/Slot';
+
+// ---------------------------------------------------------------------------
+// Forced modes
+//
+// `FullscreenModal` always themes itself with the `context5: 'Fullscreen Modal'`
+// collection mode. This is what flips the section / list-item / hero text
+// tokens to their white-on-dark values (see the Figma "Fullscreen Modal"
+// context). It is intentionally NON-overridable: callers can pass any other
+// modes (Color Mode, AppearanceBrand, …) but never context5. The frozen
+// object keeps its identity stable so the token resolver's per-modes cache
+// 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'
+});
+
+// Reanimated-driven ScrollView so the parallax handler runs on the UI thread.
+// Module scope so the wrapped component identity is stable across renders.
+const AnimatedScrollView = Animated.createAnimatedComponent(ScrollView);
+
+// Parallax tuning. The hero collapses by HEIGHT only as the user scrolls up —
+// its full width is preserved and the media keeps a fixed aspect ratio (it is
+// cropped, never scaled or squished, like a `cover` background). When no
+// explicit `heroMinHeight` is given, the hero collapses to this fraction of
+// its resting height.
+const HERO_MIN_HEIGHT_RATIO = 0.45;
+
+// ---------------------------------------------------------------------------
+// Hero text — the eyebrow / headline / supporting / price block. Built inline
+// (rather than reusing <PageHero>) so we can render BOTH a supporting
+// paragraph AND a price line with the exact PageHero token gaps, and overlay
+// it on the parallax media without PageHero's media/button scaffolding.
+// ---------------------------------------------------------------------------
+
+function HeroText({
+  eyebrow,
+  headline,
+  supportingText,
+  priceText,
+  modes
+}) {
+  const styles = useMemo(() => {
+    const gap = Number(getVariableByName('PageHero/gap', modes)) || 16;
+    const textWrapGap = Number(getVariableByName('PageHero/textWrap/gap', modes)) || 8;
+    const eyebrowStyle = {
+      color: getVariableByName('PageHero/eyebrow/color', modes) || '#ffffff',
+      fontFamily: getVariableByName('PageHero/eyebrow/fontFamily', modes) || 'System',
+      fontSize: Number(getVariableByName('PageHero/eyebrow/fontSize', modes)) || 18,
+      fontWeight: String(getVariableByName('PageHero/eyebrow/fontWeight', modes) || 700),
+      lineHeight: Number(getVariableByName('PageHero/eyebrow/lineHeight', modes)) || 20,
+      textAlign: 'center'
+    };
+    const headlineStyle = {
+      color: getVariableByName('PageHero/headline/color', modes) || '#ffffff',
+      fontFamily: getVariableByName('PageHero/headline/fontFamily', modes) || 'System',
+      fontSize: Number(getVariableByName('PageHero/headline/fontSize', modes)) || 29,
+      fontWeight: String(getVariableByName('PageHero/headline/fontWeight', modes) || 900),
+      lineHeight: Number(getVariableByName('PageHero/headline/lineHeight', modes)) || 29,
+      textAlign: 'center',
+      width: '100%'
+    };
+    const supportingTextStyle = {
+      color: getVariableByName('PageHero/supportingText/color', modes) || '#ffffff',
+      fontFamily: getVariableByName('PageHero/supportingText/fontFamily', modes) || 'System',
+      fontSize: Number(getVariableByName('PageHero/supportingText/fontSize', modes)) || 12,
+      fontWeight: String(getVariableByName('PageHero/supportingText/fontWeight', modes) || 500),
+      lineHeight: Number(getVariableByName('PageHero/supportingText/lineHeight', modes)) || 16,
+      textAlign: 'center'
+    };
+    const priceTextStyle = {
+      color: getVariableByName('PageHero/body/color', modes) || '#ffffff',
+      fontFamily: getVariableByName('PageHero/body/fontFamily', modes) || 'System',
+      fontSize: Number(getVariableByName('PageHero/body/fontSize', modes)) || 12,
+      fontWeight: String(getVariableByName('PageHero/body/fontWeight', modes) || 500),
+      lineHeight: Number(getVariableByName('PageHero/body/lineHeight', modes)) || 16,
+      textAlign: 'center'
+    };
+    return {
+      container: {
+        width: '100%',
+        alignItems: 'center',
+        gap
+      },
+      textWrap: {
+        width: '100%',
+        alignItems: 'center',
+        gap: textWrapGap
+      },
+      eyebrowStyle,
+      headlineStyle,
+      supportingTextStyle,
+      priceTextStyle
+    };
+  }, [modes]);
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.container,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.textWrap,
+      children: [eyebrow ? /*#__PURE__*/_jsx(Text, {
+        style: styles.eyebrowStyle,
+        children: eyebrow
+      }) : null, headline ? /*#__PURE__*/_jsx(Text, {
+        style: styles.headlineStyle,
+        children: headline
+      }) : null]
+    }), supportingText ? /*#__PURE__*/_jsx(Text, {
+      style: styles.supportingTextStyle,
+      children: supportingText
+    }) : null, priceText ? /*#__PURE__*/_jsx(Text, {
+      style: styles.priceTextStyle,
+      children: priceText
+    }) : null]
+  });
+}
+
+/**
+ * FullscreenModal — a full-screen takeover surface with a parallax media hero,
+ * a scrollable body, a floating close button, and a sticky `ActionFooter`.
+ *
+ * The component always themes itself with `context5: 'Fullscreen Modal'`
+ * (non-overridable) so every nested component (Section, ListItem, Button,
+ * Disclaimer, …) resolves the white-on-dark "fullscreen modal" token values.
+ * That mode is cascaded into `children`, the footer, and the hero text via
+ * `cloneChildrenWithModes` / the merged `modes` object.
+ *
+ * ### Parallax
+ * As the user scrolls up, the hero collapses by **height only** (from
+ * `heroHeight` to `heroMinHeight`) — its **full width is always preserved**.
+ * The `heroMedia` is pinned to the top at a fixed size and `cover`-cropped by
+ * the collapsing clip, so it keeps a perfect aspect ratio the whole time
+ * (never scaled or squished). Because it collapses slower than the content
+ * scrolls, the media lags behind for the parallax depth cue. Disable with
+ * `parallax={false}`.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <FullscreenModal
+ *   eyebrow="Upgrade to JioFinance+"
+ *   headline="Get more from your money."
+ *   supportingText="JioFinance+ is your upgraded financial experience…"
+ *   priceText="₹999/year · ₹0 until 2027"
+ *   heroMedia={<LottiePlayer source={hero} size={{ width: 360, height: 420 }} />}
+ *   primaryActionLabel="Upgrade for free"
+ *   disclaimer="By upgrading, we'll check your eligibility with Experian."
+ *   onPrimaryAction={() => upgrade()}
+ *   onClose={() => navigation.goBack()}
+ * >
+ *   <Section title="Key Benefits" slotDirection="column" slot={…} />
+ *   <Section title="Compare plans" slotDirection="column" slot={…} />
+ * </FullscreenModal>
+ * ```
+ */
+function FullscreenModal({
+  eyebrow = 'Upgrade to JioFinance+',
+  headline = 'Get more from your money.',
+  supportingText = 'JioFinance+ is your upgraded financial experience, designed to work harder in the background so your money works smarter in real life.',
+  priceText = '₹999/year · ₹0 until 2027',
+  heroMedia,
+  heroHeight = 420,
+  heroMinHeight,
+  parallax = true,
+  showClose = true,
+  onClose,
+  closeAccessibilityLabel = 'Close',
+  footer,
+  primaryActionLabel = 'Upgrade for free',
+  onPrimaryAction,
+  disclaimer = "By upgrading, we'll check your eligibility with Experian.",
+  backgroundColor = '#0f0d0a',
+  children,
+  modes: propModes = EMPTY_MODES,
+  style,
+  contentContainerStyle,
+  testID
+}) {
+  const {
+    modes: globalModes
+  } = useTokens();
+
+  // context5 is appended last so it always wins, regardless of what the
+  // caller (or the global theme) passes.
+  const modes = useMemo(() => ({
+    ...globalModes,
+    ...propModes,
+    ...FULLSCREEN_MODAL_FORCED_MODES
+  }), [globalModes, propModes]);
+  const rootGap = Number(getVariableByName('fullScreenModal/gap', modes)) || 16;
+  const minHeight = heroMinHeight ?? Math.round(heroHeight * HERO_MIN_HEIGHT_RATIO);
+  const scrollY = useSharedValue(0);
+  const onScroll = useAnimatedScrollHandler(event => {
+    scrollY.value = event.contentOffset.y;
+  });
+
+  // Collapse the hero by HEIGHT only as the user scrolls up. The clip's width
+  // never changes and the media inside is pinned full-size at the top, so the
+  // art is cropped (cover) rather than scaled or narrowed — it keeps a perfect
+  // aspect ratio the whole time. Pull-down (negative offset) is clamped, so the
+  // hero never grows past its resting height.
+  const heroAnimatedStyle = useAnimatedStyle(() => {
+    const height = interpolate(scrollY.value, [0, heroHeight], [heroHeight, minHeight], Extrapolation.CLAMP);
+    return {
+      height
+    };
+  });
+  const processedHeroMedia = useMemo(() => heroMedia ? cloneChildrenWithModes(heroMedia, modes, FULLSCREEN_MODAL_FORCED_MODES) : null, [heroMedia, modes]);
+  const processedChildren = useMemo(() => children ? cloneChildrenWithModes(children, modes, FULLSCREEN_MODAL_FORCED_MODES) : null, [children, modes]);
+
+  // The clip is full-width and top-pinned; its height is what animates. Width
+  // is intentionally never animated.
+  const heroClipBaseStyle = useMemo(() => ({
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    overflow: 'hidden'
+  }), []);
+
+  // The media sits at a fixed full-size box pinned to the top of the clip, so
+  // the collapsing clip crops it from the bottom (cover) instead of resizing
+  // it. Full width, fixed height — a perfect, constant aspect ratio.
+  const heroMediaWrapStyle = useMemo(() => ({
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    height: heroHeight,
+    alignItems: 'stretch'
+  }), [heroHeight]);
+  const heroTextRegionStyle = useMemo(() => ({
+    height: heroHeight,
+    justifyContent: 'flex-end',
+    paddingHorizontal: 16,
+    paddingBottom: 16
+  }), [heroHeight]);
+  const bodyStyle = useMemo(() => [{
+    backgroundColor,
+    gap: rootGap,
+    paddingTop: rootGap,
+    paddingBottom: 24
+  }, contentContainerStyle], [backgroundColor, rootGap, contentContainerStyle]);
+  const heroClip = /*#__PURE__*/_jsx(Animated.View, {
+    style: [heroClipBaseStyle, parallax ? heroAnimatedStyle : {
+      height: heroHeight
+    }],
+    pointerEvents: "none",
+    children: /*#__PURE__*/_jsx(View, {
+      style: heroMediaWrapStyle,
+      children: processedHeroMedia
+    })
+  });
+
+  // Footer: a fully custom node, or the default Button + Disclaimer column.
+  let footerContent = null;
+  if (footer) {
+    footerContent = footer;
+  } else if (primaryActionLabel) {
+    footerContent = /*#__PURE__*/_jsxs(Slot, {
+      layoutDirection: "vertical",
+      modes: modes,
+      children: [/*#__PURE__*/_jsx(Button, {
+        label: primaryActionLabel,
+        modes: modes,
+        style: fullWidthStyle,
+        ...(onPrimaryAction ? {
+          onPress: onPrimaryAction
+        } : {})
+      }), disclaimer ? /*#__PURE__*/_jsx(Disclaimer, {
+        disclaimer: disclaimer,
+        modes: modes
+      }) : null]
+    });
+  }
+  return /*#__PURE__*/_jsxs(View, {
+    style: [rootStyle, {
+      backgroundColor
+    }, style],
+    testID: testID,
+    children: [processedHeroMedia ? heroClip : null, /*#__PURE__*/_jsxs(AnimatedScrollView, {
+      style: scrollViewStyle,
+      contentContainerStyle: scrollContentStyle,
+      showsVerticalScrollIndicator: false,
+      onScroll: onScroll,
+      scrollEventThrottle: 16,
+      children: [/*#__PURE__*/_jsx(View, {
+        style: heroTextRegionStyle,
+        children: /*#__PURE__*/_jsx(HeroText, {
+          eyebrow: eyebrow,
+          headline: headline,
+          supportingText: supportingText,
+          priceText: priceText,
+          modes: modes
+        })
+      }), /*#__PURE__*/_jsx(View, {
+        style: bodyStyle,
+        children: processedChildren
+      })]
+    }), footerContent ? /*#__PURE__*/_jsx(ActionFooter, {
+      modes: modes,
+      children: footerContent
+    }) : null, showClose ? /*#__PURE__*/_jsx(IconButton, {
+      iconName: "ic_close",
+      modes: modes,
+      accessibilityLabel: closeAccessibilityLabel,
+      style: closeButtonStyle,
+      ...(onClose ? {
+        onPress: onClose
+      } : {})
+    }) : null]
+  });
+}
+
+// Module-scope style constants — never re-allocated per render.
+const rootStyle = {
+  flex: 1,
+  width: '100%',
+  position: 'relative'
+};
+const scrollViewStyle = {
+  flex: 1
+};
+const scrollContentStyle = {
+  flexGrow: 1
+};
+const fullWidthStyle = {
+  width: '100%'
+};
+const closeButtonStyle = {
+  position: 'absolute',
+  top: 12,
+  right: 12
+};
+export default FullscreenModal;