jfs-components 0.0.86 → 0.0.95

package/CHANGELOG.md

@@ -4,6 +4,14 @@ All notable changes to this project are documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
+## [0.0.95] - 2026-06-04
+
+- Added `Icon` — token-driven design-system icon primitive (`iconName`, `source`, `children` slot); exported from the package barrel.
+- `FullscreenModal` — `heroMedia` is now a full-bleed continuous background behind hero + body; foreground scrolls over it; defaults `Page type` to `JioPlus`; transparent body (removed solid `backgroundColor`).
+- Added `src/assets.d.ts` for TypeScript `require()` of image assets.
+
+---
+
 ## [0.0.86] - 2026-06-04
 
 - Added `AllocationComparisonChart` — vertical pill bars comparing current vs recommended allocation with optional baseline overlay and dashed marker.

package/lib/commonjs/assets.d.js

@@ -0,0 +1 @@
+"use strict";

package/lib/commonjs/components/FullscreenModal/FullscreenModal.js

@@ -33,6 +33,19 @@ const FULLSCREEN_MODAL_FORCED_MODES = Object.freeze({
   context5: 'Fullscreen Modal'
 });
 
+// ---------------------------------------------------------------------------
+// Default modes
+//
+// A FullscreenModal is a "JioPlus" surface, so it defaults the `Page type`
+// collection to `'JioPlus'`. Unlike the forced modes above this IS
+// overridable — it is applied before the caller's `modes`, so passing
+// `modes={{ 'Page type': 'SubPage' }}` still wins. Frozen for stable identity
+// (keeps the token resolver's per-modes cache hot).
+// ---------------------------------------------------------------------------
+const FULLSCREEN_MODAL_DEFAULT_MODES = Object.freeze({
+  'Page type': 'JioPlus'
+});
+
 // ---------------------------------------------------------------------------
 // Hero text — the eyebrow / headline / supporting / price block. Built inline
 // (rather than reusing <PageHero>) so we can render BOTH a supporting
@@ -132,12 +145,21 @@ function HeroText({
  * That mode is cascaded into `children`, the footer, and the hero text via
  * `cloneChildrenWithModes` / the merged `modes` object.
  *
- * ### Hero
- * The `heroMedia` is rendered full modal width inside the scroll body and
- * takes its height from its own aspect ratio. The hero text (eyebrow /
- * headline / supporting / price) is overlaid on top, anchored to the bottom.
- * The whole hero scrolls together with the rest of the content — there is no
- * parallax effect.
+ * ### Background media
+ * The `heroMedia` is a single full-bleed background pinned to the top of the
+ * modal at the full width and its own natural aspect ratio. It lives at the
+ * ROOT — behind both the scrolling content and the (transparent) footer — so
+ * it fills the whole surface and is NEVER clipped to the content height. It
+ * also contributes ZERO scroll height: the scroll extent is driven purely by
+ * the in-flow foreground (hero text + `children`), so the number of body
+ * elements dictates how far the surface scrolls. It still scrolls in lockstep
+ * WITH the content (the background is translated by the scroll offset), so the
+ * content reads as sitting ON one continuous image that moves with it — there
+ * is no parallax and no separate solid body box.
+ *
+ * Pass a background sized to the full width at its natural ratio
+ * (e.g. `<Image imageSource={bg} ratio={1080 / 4140} />`). Use an asset at
+ * least as tall as the surface so it covers the full modal.
  *
  * @component
  * @example
@@ -147,7 +169,7 @@ function HeroText({
  *   headline="Get more from your money."
  *   supportingText="JioFinance+ is your upgraded financial experience…"
  *   priceText="₹999/year · ₹0 until 2027"
- *   heroMedia={<Image imageSource={hero} ratio={3 / 4} />}
+ *   heroMedia={<Image imageSource={hero} ratio={1080 / 4140} />}
  *   primaryActionLabel="Upgrade for free"
  *   disclaimer="By upgrading, we'll check your eligibility with Experian."
  *   onPrimaryAction={() => upgrade()}
@@ -172,7 +194,6 @@ function FullscreenModal({
   primaryActionLabel = 'Upgrade for free',
   onPrimaryAction,
   disclaimer = "By upgrading, we'll check your eligibility with Experian.",
-  backgroundColor = '#0f0d0a',
   children,
   modes: propModes = _reactUtils.EMPTY_MODES,
   style,
@@ -183,31 +204,56 @@ function FullscreenModal({
     modes: globalModes
   } = (0, _JFSThemeProvider.useTokens)();
 
-  // context5 is appended last so it always wins, regardless of what the
-  // caller (or the global theme) passes.
+  // Merge order (low → high priority):
+  //   global theme → component defaults (Page type: JioPlus) → caller modes →
+  //   forced modes (context5). So `Page type` defaults to JioPlus but the
+  //   caller can override it, while `context5` always wins. This single `modes`
+  //   object is what cascades to the body, hero media, and the ActionFooter.
   const modes = (0, _react.useMemo)(() => ({
     ...globalModes,
+    ...FULLSCREEN_MODAL_DEFAULT_MODES,
     ...propModes,
     ...FULLSCREEN_MODAL_FORCED_MODES
   }), [globalModes, propModes]);
   const rootGap = Number((0, _figmaVariablesResolver.getVariableByName)('fullScreenModal/gap', modes)) || 16;
+
+  // Drives the background's parallax-free sync with the scroll. The hero media
+  // lives at the ROOT (so it is never clipped to the content height and sits
+  // behind the transparent footer), but we translate it up by the exact scroll
+  // offset so it moves in lockstep with the content — i.e. it scrolls WITH the
+  // body without ever contributing to the scroll height.
+  const scrollY = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  const onScroll = (0, _react.useMemo)(() => _reactNative.Animated.event([{
+    nativeEvent: {
+      contentOffset: {
+        y: scrollY
+      }
+    }
+  }], {
+    useNativeDriver: true
+  }), [scrollY]);
+  const heroTranslateY = (0, _react.useMemo)(() => _reactNative.Animated.multiply(scrollY, -1), [scrollY]);
   const processedHeroMedia = (0, _react.useMemo)(() => heroMedia ? (0, _reactUtils.cloneChildrenWithModes)(heroMedia, modes, FULLSCREEN_MODAL_FORCED_MODES) : null, [heroMedia, modes]);
   const processedChildren = (0, _react.useMemo)(() => children ? (0, _reactUtils.cloneChildrenWithModes)(children, modes, FULLSCREEN_MODAL_FORCED_MODES) : null, [children, modes]);
 
-  // No-media fallback: without hero media the text region needs an explicit
-  // resting height (driven by `heroHeight`) so the hero still has presence.
-  const heroTextFallbackStyle = (0, _react.useMemo)(() => ({
+  // The hero text region always reserves `heroHeight` and anchors its content
+  // to the bottom, so the eyebrow/headline block sits in the lower part of the
+  // first screenful — over the background media when present, in flow
+  // otherwise.
+  const heroTextRegionStyle = (0, _react.useMemo)(() => ({
     minHeight: heroHeight,
     justifyContent: 'flex-end',
     paddingHorizontal: 16,
     paddingBottom: 16
   }), [heroHeight]);
+
+  // Body is intentionally transparent — the background media shows through
+  // behind it. There is no solid "body box" stacked on top of the image.
   const bodyStyle = (0, _react.useMemo)(() => [{
-    backgroundColor,
     gap: rootGap,
     paddingTop: rootGap,
     paddingBottom: 24
-  }, contentContainerStyle], [backgroundColor, rootGap, contentContainerStyle]);
+  }, contentContainerStyle], [rootGap, contentContainerStyle]);
   const heroTextNode = /*#__PURE__*/(0, _jsxRuntime.jsx)(HeroText, {
     eyebrow: eyebrow,
     headline: headline,
@@ -216,22 +262,6 @@ function FullscreenModal({
     modes: modes
   });
 
-  // The hero scrolls inline with the body (no parallax). When media is present
-  // it is laid out full modal width and takes its height from its own aspect
-  // ratio; the hero text is overlaid on top, anchored to the bottom. Without
-  // media the text simply renders in flow at the fallback height.
-  const hero = processedHeroMedia ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: heroMediaContainerStyle,
-    children: [processedHeroMedia, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: heroTextOverlayStyle,
-      pointerEvents: "box-none",
-      children: heroTextNode
-    })]
-  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: heroTextFallbackStyle,
-    children: heroTextNode
-  });
-
   // Footer: a fully custom node, or the default Button + Disclaimer column.
   let footerContent = null;
   if (footer) {
@@ -254,22 +284,36 @@ function FullscreenModal({
     });
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: [rootStyle, {
-      backgroundColor
-    }, style],
+    style: [rootStyle, style],
     testID: testID,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
+    children: [processedHeroMedia ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+      style: [heroBackgroundStyle, {
+        transform: [{
+          translateY: heroTranslateY
+        }]
+      }],
+      pointerEvents: "none",
+      children: processedHeroMedia
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.ScrollView, {
       style: scrollViewStyle,
       contentContainerStyle: scrollContentStyle,
-      showsVerticalScrollIndicator: false
+      showsVerticalScrollIndicator: false,
+      onScroll: onScroll,
+      scrollEventThrottle: 16
       // Tap an input in the body and it focuses on the FIRST tap, even when
       // the keyboard is already open (default 'never' eats that tap).
       ,
       keyboardShouldPersistTaps: "handled",
-      children: [hero, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: bodyStyle,
-        children: processedChildren
-      })]
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: foregroundFlowStyle,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: heroTextRegionStyle,
+          children: heroTextNode
+        }), processedChildren ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: bodyStyle,
+          children: processedChildren
+        }) : null]
+      })
     }), footerContent ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ActionFooter.default, {
       modes: modes,
       children: footerContent
@@ -305,16 +349,19 @@ const closeButtonStyle = {
   top: 12,
   right: 12
 };
-// Full-width hero wrapper; height comes from the media's own aspect ratio.
-const heroMediaContainerStyle = {
-  width: '100%',
-  position: 'relative'
+// Root-level full-bleed background media. Pinned to the top at full modal
+// width; the media inside keeps its own natural aspect ratio (only `top` is
+// pinned — no `bottom`/`overflow` clip), so it is NEVER cut to the content
+// height and fills the surface behind the scrolling content and the footer.
+// Living outside the ScrollView, it adds nothing to the scroll height.
+const heroBackgroundStyle = {
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  right: 0
 };
-// Hero text overlaid on the media, anchored to the bottom edge.
-const heroTextOverlayStyle = {
-  ..._reactNative.StyleSheet.absoluteFillObject,
-  justifyContent: 'flex-end',
-  paddingHorizontal: 16,
-  paddingBottom: 16
+// The foreground always flows normally — its content drives the scroll height.
+const foregroundFlowStyle = {
+  width: '100%'
 };
 var _default = exports.default = FullscreenModal;

package/lib/commonjs/components/Icon/Icon.js

@@ -0,0 +1,112 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+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 _Icon = _interopRequireDefault(require("../../icons/Icon"));
+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); }
+function resolveIconTokens(modes) {
+  const iconColor = (0, _figmaVariablesResolver.getVariableByName)('icon/color', modes) || '#ad8444';
+  const iconSize = (0, _figmaVariablesResolver.getVariableByName)('icon/size', modes) || 18;
+  const paddingLeft = (0, _figmaVariablesResolver.getVariableByName)('icon/padding/left', modes) || 0;
+  const paddingTop = (0, _figmaVariablesResolver.getVariableByName)('icon/padding/top', modes) || 0;
+  const paddingRight = (0, _figmaVariablesResolver.getVariableByName)('icon/padding/right', modes) || 0;
+  const paddingBottom = (0, _figmaVariablesResolver.getVariableByName)('icon/padding/bottom', modes) || 0;
+  return {
+    containerStyle: {
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      overflow: 'hidden',
+      paddingLeft,
+      paddingTop,
+      paddingRight,
+      paddingBottom
+    },
+    iconColor,
+    iconSize
+  };
+}
+
+/**
+ * Icon component — a design-token-driven wrapper around a single glyph.
+ *
+ * It mirrors the Figma "Icon" component: a padded, centered container whose
+ * color and size are resolved from the `icon/*` design tokens via `modes`.
+ * The glyph itself can be supplied three ways, in order of precedence:
+ *
+ *  1. `children` — a real slot for any node (custom SVG component, nested
+ *     `Icon`, etc.). `modes` cascade into the slot automatically.
+ *  2. `iconName` — a registry icon in the `ic_something` format.
+ *  3. `source` — a {@link UnifiedSource} fallback (remote URI, inline SVG XML,
+ *     `require()` asset, SVG component, or React element), tinted with the
+ *     mode-resolved icon color.
+ *
+ * `color` and `size` props let consumers override the token values per
+ * instance without touching `modes`.
+ *
+ * @example
+ * ```tsx
+ * // Built-in registry icon (default path).
+ * <Icon iconName="ic_card" modes={{ 'Color Mode': 'Light' }} />
+ *
+ * // Per-instance overrides.
+ * <Icon iconName="ic_ccv" color="#5c00b5" size={24} />
+ *
+ * // Fallback to an external source when the name isn't in the registry.
+ * <Icon source="https://cdn.example.com/glyph.svg" />
+ *
+ * // Slot: render any node as the icon.
+ * <Icon><BrandLogo /></Icon>
+ * ```
+ */
+function Icon({
+  iconName,
+  source,
+  children,
+  color,
+  size,
+  modes: propModes = _reactUtils.EMPTY_MODES,
+  style: styleProp,
+  ...rest
+}) {
+  const {
+    modes: globalModes
+  } = (0, _JFSThemeProvider.useTokens)();
+  const modes = (0, _react.useMemo)(() => globalModes === _reactUtils.EMPTY_MODES && propModes === _reactUtils.EMPTY_MODES ? _reactUtils.EMPTY_MODES : {
+    ...globalModes,
+    ...propModes
+  }, [globalModes, propModes]);
+  const tokens = (0, _react.useMemo)(() => resolveIconTokens(modes), [modes]);
+  const composedStyle = (0, _react.useMemo)(() => styleProp ? [tokens.containerStyle, styleProp] : tokens.containerStyle, [tokens.containerStyle, styleProp]);
+  const hasSlot = _react.default.Children.count(children) > 0;
+
+  // Only fall back to the default glyph when nothing at all is provided so an
+  // explicit `source` (without an `iconName`) isn't shadowed by `ic_card`.
+  const resolvedName = iconName ?? (source === undefined ? 'ic_card' : undefined);
+  const iconColor = color ?? tokens.iconColor;
+  const iconSize = size ?? tokens.iconSize;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: composedStyle,
+    ...rest,
+    children: hasSlot ? (0, _reactUtils.cloneChildrenWithModes)(children, modes) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+      name: resolvedName,
+      ...(source !== undefined ? {
+        source
+      } : {}),
+      size: iconSize,
+      color: iconColor,
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no"
+    })
+  });
+}
+var _default = exports.default = /*#__PURE__*/_react.default.memo(Icon);

package/lib/commonjs/components/index.js

@@ -363,6 +363,12 @@ Object.defineProperty(exports, "HoldingsCard", {
     return _HoldingsCard.default;
   }
 });
+Object.defineProperty(exports, "Icon", {
+  enumerable: true,
+  get: function () {
+    return _Icon.default;
+  }
+});
 Object.defineProperty(exports, "IconButton", {
   enumerable: true,
   get: function () {
@@ -892,6 +898,7 @@ var _MonthlyStatusGrid = _interopRequireWildcard(require("./MonthlyStatusGrid/Mo
 var _Gauge = _interopRequireDefault(require("./Gauge/Gauge"));
 var _HoldingsCard = _interopRequireDefault(require("./HoldingsCard/HoldingsCard"));
 var _HStack = _interopRequireDefault(require("./HStack/HStack"));
+var _Icon = _interopRequireDefault(require("./Icon/Icon"));
 var _IconButton = _interopRequireDefault(require("./IconButton/IconButton"));
 var _IconCapsule = _interopRequireDefault(require("./IconCapsule/IconCapsule"));
 var _Image = _interopRequireDefault(require("./Image/Image"));