jfs-components 0.0.84 → 0.0.86

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

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
-var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
 var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
 var _reactUtils = require("../../utils/react-utils");
@@ -34,22 +33,11 @@ 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 = _reactNativeReanimated.default.createAnimatedComponent(_reactNative.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.
+// it on the hero media without PageHero's media/button scaffolding.
 // ---------------------------------------------------------------------------
 
 function HeroText({
@@ -134,8 +122,9 @@ function HeroText({
 }
 
 /**
- * FullscreenModal — a full-screen takeover surface with a parallax media hero,
- * a scrollable body, a floating close button, and a sticky `ActionFooter`.
+ * FullscreenModal — a full-screen takeover surface with a full-bleed 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,
@@ -143,14 +132,12 @@ function HeroText({
  * 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}`.
+ * ### 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.
  *
  * @component
  * @example
@@ -160,7 +147,7 @@ function HeroText({
  *   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 }} />}
+ *   heroMedia={<Image imageSource={hero} ratio={3 / 4} />}
  *   primaryActionLabel="Upgrade for free"
  *   disclaimer="By upgrading, we'll check your eligibility with Experian."
  *   onPrimaryAction={() => upgrade()}
@@ -178,8 +165,6 @@ function FullscreenModal({
   priceText = '₹999/year · ₹0 until 2027',
   heroMedia,
   heroHeight = 420,
-  heroMinHeight,
-  parallax = true,
   showClose = true,
   onClose,
   closeAccessibilityLabel = 'Close',
@@ -206,49 +191,13 @@ function FullscreenModal({
     ...FULLSCREEN_MODAL_FORCED_MODES
   }), [globalModes, propModes]);
   const rootGap = Number((0, _figmaVariablesResolver.getVariableByName)('fullScreenModal/gap', modes)) || 16;
-  const minHeight = heroMinHeight ?? Math.round(heroHeight * HERO_MIN_HEIGHT_RATIO);
-  const scrollY = (0, _reactNativeReanimated.useSharedValue)(0);
-  const onScroll = (0, _reactNativeReanimated.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 = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
-    const height = (0, _reactNativeReanimated.interpolate)(scrollY.value, [0, heroHeight], [heroHeight, minHeight], _reactNativeReanimated.Extrapolation.CLAMP);
-    return {
-      height
-    };
-  });
   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]);
 
-  // The clip is full-width and top-pinned; its height is what animates. Width
-  // is intentionally never animated.
-  const heroClipBaseStyle = (0, _react.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 = (0, _react.useMemo)(() => ({
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    height: heroHeight,
-    alignItems: 'stretch'
-  }), [heroHeight]);
-  const heroTextRegionStyle = (0, _react.useMemo)(() => ({
-    height: heroHeight,
+  // 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)(() => ({
+    minHeight: heroHeight,
     justifyContent: 'flex-end',
     paddingHorizontal: 16,
     paddingBottom: 16
@@ -259,15 +208,28 @@ function FullscreenModal({
     paddingTop: rootGap,
     paddingBottom: 24
   }, contentContainerStyle], [backgroundColor, rootGap, contentContainerStyle]);
-  const heroClip = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
-    style: [heroClipBaseStyle, parallax ? heroAnimatedStyle : {
-      height: heroHeight
-    }],
-    pointerEvents: "none",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: heroMediaWrapStyle,
-      children: processedHeroMedia
-    })
+  const heroTextNode = /*#__PURE__*/(0, _jsxRuntime.jsx)(HeroText, {
+    eyebrow: eyebrow,
+    headline: headline,
+    supportingText: supportingText,
+    priceText: priceText,
+    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.
@@ -296,26 +258,15 @@ function FullscreenModal({
       backgroundColor
     }, style],
     testID: testID,
-    children: [processedHeroMedia ? heroClip : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(AnimatedScrollView, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
       style: scrollViewStyle,
       contentContainerStyle: scrollContentStyle,
-      showsVerticalScrollIndicator: false,
-      onScroll: onScroll,
-      scrollEventThrottle: 16
+      showsVerticalScrollIndicator: false
       // 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: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: heroTextRegionStyle,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(HeroText, {
-          eyebrow: eyebrow,
-          headline: headline,
-          supportingText: supportingText,
-          priceText: priceText,
-          modes: modes
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      children: [hero, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: bodyStyle,
         children: processedChildren
       })]
@@ -354,4 +305,16 @@ 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'
+};
+// Hero text overlaid on the media, anchored to the bottom edge.
+const heroTextOverlayStyle = {
+  ..._reactNative.StyleSheet.absoluteFillObject,
+  justifyContent: 'flex-end',
+  paddingHorizontal: 16,
+  paddingBottom: 16
+};
 var _default = exports.default = FullscreenModal;

package/lib/commonjs/components/MetricLegendItem/MetricLegendItem.js

@@ -22,6 +22,7 @@ function MetricLegendItem({
   label = 'Current (4 months)',
   value,
   indicatorColor,
+  indicatorShape = 'dot',
   modes = _reactUtils.EMPTY_MODES,
   style,
   indicatorStyle,
@@ -54,7 +55,12 @@ function MetricLegendItem({
     }, style],
     accessibilityRole: "text",
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: [{
+      style: [indicatorShape === 'line' ? {
+        width: indicatorSize * 2,
+        height: Math.max(2, Math.round(indicatorSize / 4)),
+        borderRadius: indicatorRadius,
+        backgroundColor: indicatorBg
+      } : {
         width: indicatorSize,
         height: indicatorSize,
         borderRadius: indicatorRadius,

package/lib/commonjs/components/index.js

@@ -33,6 +33,12 @@ Object.defineProperty(exports, "ActionTile", {
     return _ActionTile.default;
   }
 });
+Object.defineProperty(exports, "AllocationComparisonChart", {
+  enumerable: true,
+  get: function () {
+    return _AllocationComparisonChart.default;
+  }
+});
 Object.defineProperty(exports, "AmountInput", {
   enumerable: true,
   get: function () {
@@ -45,6 +51,12 @@ Object.defineProperty(exports, "AppBar", {
     return _AppBar.default;
   }
 });
+Object.defineProperty(exports, "AreaLineChart", {
+  enumerable: true,
+  get: function () {
+    return _AreaLineChart.default;
+  }
+});
 Object.defineProperty(exports, "Attached", {
   enumerable: true,
   get: function () {
@@ -93,6 +105,12 @@ Object.defineProperty(exports, "BrandChip", {
     return _BrandChip.default;
   }
 });
+Object.defineProperty(exports, "BubbleChart", {
+  enumerable: true,
+  get: function () {
+    return _BubbleChart.default;
+  }
+});
 Object.defineProperty(exports, "Button", {
   enumerable: true,
   get: function () {
@@ -213,6 +231,12 @@ Object.defineProperty(exports, "CircularRating", {
     return _CircularRating.default;
   }
 });
+Object.defineProperty(exports, "ClusterBubble", {
+  enumerable: true,
+  get: function () {
+    return _ClusterBubble.default;
+  }
+});
 Object.defineProperty(exports, "CoverageBarComparison", {
   enumerable: true,
   get: function () {
@@ -801,6 +825,12 @@ Object.defineProperty(exports, "closeToast", {
     return _useToast.closeToast;
   }
 });
+Object.defineProperty(exports, "useChart", {
+  enumerable: true,
+  get: function () {
+    return _AreaLineChart.useChart;
+  }
+});
 Object.defineProperty(exports, "useFormContext", {
   enumerable: true,
   get: function () {
@@ -857,6 +887,7 @@ var _CircularProgressBarDoted = _interopRequireDefault(require("./CircularProgre
 var _CircularRating = _interopRequireDefault(require("./CircularRating/CircularRating"));
 var _CoverageRing = _interopRequireDefault(require("./CoverageRing/CoverageRing"));
 var _CoverageBarComparison = _interopRequireDefault(require("./CoverageBarComparison/CoverageBarComparison"));
+var _AllocationComparisonChart = _interopRequireDefault(require("./AllocationComparisonChart/AllocationComparisonChart"));
 var _MonthlyStatusGrid = _interopRequireWildcard(require("./MonthlyStatusGrid/MonthlyStatusGrid"));
 var _Gauge = _interopRequireDefault(require("./Gauge/Gauge"));
 var _HoldingsCard = _interopRequireDefault(require("./HoldingsCard/HoldingsCard"));
@@ -916,6 +947,9 @@ var _RadioButton = _interopRequireDefault(require("./RadioButton/RadioButton"));
 var _RechargeCard = _interopRequireDefault(require("./RechargeCard/RechargeCard"));
 var _SavingsGoalSummary = _interopRequireDefault(require("./SavingsGoalSummary/SavingsGoalSummary"));
 var _DonutChart = _interopRequireWildcard(require("./DonutChart/DonutChart"));
+var _AreaLineChart = _interopRequireWildcard(require("./AreaLineChart/AreaLineChart"));
+var _ClusterBubble = _interopRequireDefault(require("./ClusterBubble/ClusterBubble"));
+var _BubbleChart = _interopRequireDefault(require("./BubbleChart/BubbleChart"));
 var _DonutChartSummary = _interopRequireDefault(require("./DonutChartSummary/DonutChartSummary"));
 var _RangeTrack = _interopRequireDefault(require("./RangeTrack/RangeTrack"));
 var _SegmentedTrack = _interopRequireWildcard(require("./SegmentedTrack/SegmentedTrack"));