jfs-components 0.1.2 → 0.1.12

package/lib/commonjs/components/ProductMerchandisingCard/ProductMerchandisingCard.js

@@ -0,0 +1,427 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _maskedView = _interopRequireDefault(require("@react-native-masked-view/masked-view"));
+var _reactNativeSvg = _interopRequireWildcard(require("react-native-svg"));
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _reactUtils = require("../../utils/react-utils");
+var _Avatar = _interopRequireDefault(require("../Avatar/Avatar"));
+var _Badge = _interopRequireDefault(require("../Badge/Badge"));
+var _Button = _interopRequireDefault(require("../Button/Button"));
+var _Image = _interopRequireDefault(require("../Image/Image"));
+var _GlassFill = _interopRequireDefault(require("../../utils/GlassFill/GlassFill"));
+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 normalizeImageSource(src) {
+  if (src == null) return undefined;
+  return typeof src === 'string' ? {
+    uri: src
+  } : src;
+}
+/**
+ * ProductMerchandisingCard — a full-bleed image card (Figma node 5277:317)
+ * with a top header (avatar + badge) and a bottom **glass footer** that
+ * combines a real native background blur with a transparent→black gradient
+ * scrim for legible text over any image.
+ *
+ * Glass footer implementation (works on iOS, Android and Web):
+ *  - **iOS / Android:** `<GlassFill>` wraps `@react-native-community/blur`'s
+ *    `BlurView` — iOS gets a real `UIVisualEffectView` (live OS blur),
+ *    Android gets the community `RealtimeBlurView` with a tinted scrim
+ *    fallback. The native-only module is isolated in `GlassFill.tsx`.
+ *  - **Web:** the platform-extension `GlassFill.web.tsx` renders a translucent
+ *    `View` with `backdrop-filter: blur()` — Metro picks the right file so the
+ *    web bundle never imports the native blur module.
+ *  - The gradient scrim is drawn with `react-native-svg` (one renderer for all
+ *    platforms) so the fade is identical everywhere.
+ *
+ * The blur strength is driven by the Figma `blur/minimal` token, mapped to the
+ * `GlassFill` 0–100 intensity scale the same way `MediaCard` does.
+ */
+function ProductMerchandisingCard({
+  imageSource,
+  title = 'Title',
+  subtitle = 'Subtitle',
+  badgeLabel,
+  badge,
+  showAvatar = true,
+  avatarSource,
+  avatarMonogram,
+  avatar,
+  specialBadgeLabel,
+  specialBadgeIcon,
+  specialBadge,
+  ctaLabel = 'CTA',
+  onCtaPress,
+  cta,
+  onPress,
+  height = 223,
+  modes = _reactUtils.EMPTY_MODES,
+  style,
+  accessibilityLabel,
+  disableTruncation
+}) {
+  // Unique gradient ids so multiple cards on one (web) document never collide.
+  const rawId = (0, _react.useId)();
+  const safeId = rawId.replace(/[^a-zA-Z0-9_-]/g, '');
+  const scrimId = `pmc-footer-scrim-${safeId}`;
+  const blurMaskId = `pmc-footer-blurmask-${safeId}`;
+  const normalizedImageSource = (0, _react.useMemo)(() => normalizeImageSource(imageSource), [imageSource]);
+  const tokens = (0, _react.useMemo)(() => resolveTokens(modes), [modes]);
+  const containerStyle = {
+    height,
+    borderRadius: tokens.radius,
+    overflow: 'hidden',
+    position: 'relative',
+    flexDirection: 'column',
+    justifyContent: 'space-between'
+  };
+
+  // Header avatar defaults to the design's 36px (Avatar Size = M). A
+  // consumer-supplied `modes['Avatar Size']` still wins via spread order.
+  const avatarModes = (0, _react.useMemo)(() => ({
+    'Avatar Size': 'M',
+    ...modes
+  }), [modes]);
+
+  // The Figma node renders the header badge with the brand "Secondary"
+  // appearance at "Medium" emphasis (lilac fill + dark label). These are set
+  // as defaults so the card matches the design out of the box; a
+  // consumer-supplied `modes` value still wins via spread order.
+  const badgeModes = (0, _react.useMemo)(() => ({
+    AppearanceBrand: 'Secondary',
+    Emphasis: 'Medium',
+    ...modes
+  }), [modes]);
+  const headerBadge = badge ?? (badgeLabel != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Badge.default, {
+    label: badgeLabel,
+    modes: badgeModes
+  }) : null);
+  const headerAvatar = showAvatar ? avatar ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
+    style: avatarSource ? 'Image' : avatarMonogram ? 'Monogram' : 'Image',
+    imageSource: avatarSource,
+    monogram: avatarMonogram,
+    modes: avatarModes
+  }) : null;
+
+  // The footer "special badge" is now the shared <Badge type="glass">. The
+  // hardcoded literals that defined its look (warm frosted overlay, gentle
+  // 5px blur, 6/2 padding, 4px radius, weight-500 white label) are preserved
+  // 1:1 via the glass overrides + `style`/`labelStyle`, and the optional
+  // `specialBadgeIcon` maps to Badge's `leading` slot — so every existing
+  // instantiation renders byte-for-byte the same as before.
+  const footerSpecialBadge = specialBadge ?? (specialBadgeLabel != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Badge.default, {
+    type: "glass",
+    label: specialBadgeLabel,
+    leading: specialBadgeIcon,
+    glassOverlayColor: SPECIAL_BADGE_BG,
+    glassIntensity: SPECIAL_BADGE_INTENSITY,
+    modes: modes,
+    style: styles.specialBadge,
+    labelStyle: tokens.specialBadgeText,
+    ...(disableTruncation != null ? {
+      disableTruncation
+    } : null)
+  }) : null);
+
+  // The Figma CTA uses the brand "Secondary" appearance (purple fill, white
+  // label) at the small size. Defaults match the design; consumer `modes`
+  // win via spread order.
+  const ctaModes = (0, _react.useMemo)(() => ({
+    'Button / Size': 'S',
+    AppearanceBrand: 'Secondary',
+    ...modes
+  }), [modes]);
+  const footerCta = cta ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+    label: ctaLabel,
+    modes: ctaModes,
+    onPress: onCtaPress
+  });
+  const content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [imageSource != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.default, {
+      imageSource: imageSource,
+      style: _reactNative.StyleSheet.absoluteFillObject,
+      width: "100%",
+      height: height,
+      resizeMode: "cover",
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no"
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: tokens.header,
+      pointerEvents: "box-none",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.avatarContainer,
+        children: headerAvatar
+      }), headerBadge]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: tokens.footer,
+      pointerEvents: "box-none",
+      children: [normalizedImageSource != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: _reactNative.StyleSheet.absoluteFill,
+        pointerEvents: "none",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_maskedView.default, {
+          style: _reactNative.StyleSheet.absoluteFill,
+          maskElement: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.default, {
+            width: "100%",
+            height: "100%",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Defs, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.LinearGradient, {
+                id: blurMaskId,
+                x1: "0",
+                y1: "0",
+                x2: "0",
+                y2: "1",
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Stop, {
+                  offset: "0",
+                  stopColor: "#000000",
+                  stopOpacity: 0
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Stop, {
+                  offset: "0.35",
+                  stopColor: "#000000",
+                  stopOpacity: 0.5
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Stop, {
+                  offset: "0.7",
+                  stopColor: "#000000",
+                  stopOpacity: 0.92
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Stop, {
+                  offset: "1",
+                  stopColor: "#000000",
+                  stopOpacity: 1
+                })]
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Rect, {
+              x: "0",
+              y: "0",
+              width: "100%",
+              height: "100%",
+              fill: `url(#${blurMaskId})`
+            })]
+          }),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
+            source: normalizedImageSource,
+            blurRadius: tokens.imageBlurRadius,
+            resizeMode: "cover",
+            style: {
+              position: 'absolute',
+              left: 0,
+              right: 0,
+              bottom: 0,
+              width: '100%',
+              height
+            }
+          })
+        })
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_GlassFill.default, {
+        tint: "dark",
+        intensity: tokens.blurIntensity,
+        progressive: true
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [_reactNative.StyleSheet.absoluteFill, styles.scrim],
+        pointerEvents: "none",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.default, {
+          width: "100%",
+          height: "100%",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Defs, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.LinearGradient, {
+              id: scrimId,
+              x1: "0",
+              y1: "0",
+              x2: "0",
+              y2: "1",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Stop, {
+                offset: "0.018",
+                stopColor: "#000000",
+                stopOpacity: 0
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Stop, {
+                offset: "0.974",
+                stopColor: "#000000",
+                stopOpacity: 1
+              })]
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Rect, {
+            x: "0",
+            y: "0",
+            width: "100%",
+            height: "100%",
+            fill: `url(#${scrimId})`
+          })]
+        })
+      }), footerSpecialBadge, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.footerRow,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: tokens.textWrap,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: tokens.title,
+            ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
+            children: title
+          }), subtitle != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: tokens.subtitle,
+            ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
+            children: subtitle
+          }) : null]
+        }), footerCta]
+      })]
+    })]
+  });
+  if (onPress) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+      style: ({
+        pressed
+      }) => [containerStyle, pressed ? styles.pressed : null, style],
+      accessibilityRole: "button",
+      accessibilityLabel: accessibilityLabel ?? title,
+      onPress: onPress,
+      children: content
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [containerStyle, style],
+    accessibilityLabel: accessibilityLabel,
+    children: content
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Tokens / static styles
+// ---------------------------------------------------------------------------
+
+// Figma footer backdrop-blur token (`blur/minimal`). The footer uses a
+// *progressive* blur, so this maps the token to the intensity at the BOTTOM of
+// the ramp (the strongest point); the upper part fades to fully clear. Kept
+// intentionally small to match the design's subtle "minimal" blur.
+const BLUR_INTENSITY_FACTOR = 1.0;
+
+// Special badge ("frosted" pill) — values are literals in the Figma node
+// (no dedicated tokens): bg rgba(255,245,229,0.15), 5px backdrop blur.
+const SPECIAL_BADGE_BG = 'rgba(255,245,229,0.15)';
+const SPECIAL_BADGE_INTENSITY = 17; // ~5px CSS blur / ~2 native blurAmount
+
+function asNum(raw, fallback) {
+  const n = typeof raw === 'number' ? raw : parseFloat(raw);
+  return Number.isFinite(n) ? n : fallback;
+}
+function asStr(raw, fallback) {
+  return raw != null ? String(raw) : fallback;
+}
+function resolveTokens(modes) {
+  // NOTE: token names are passed as string literals DIRECTLY to
+  // getVariableByName so the `extract-component-tokens` script can statically
+  // collect them for the generated docs. Do not refactor these into a helper
+  // that receives the name as a variable.
+  const radius = asNum((0, _figmaVariablesResolver.getVariableByName)('productMerchandisingcard/radius', modes), 12);
+  const headerPadH = asNum((0, _figmaVariablesResolver.getVariableByName)('productMerchandisingcard/header/padding/horizontal', modes), 12);
+  const headerPadV = asNum((0, _figmaVariablesResolver.getVariableByName)('productMerchandisingcard/header/padding/vertical', modes), 12);
+  const footerGap = asNum((0, _figmaVariablesResolver.getVariableByName)('productMerchandisingcard/footer/gap', modes), 8);
+  const footerPadH = asNum((0, _figmaVariablesResolver.getVariableByName)('productMerchandisingcard/footer/padding/horizontal', modes), 16);
+  const footerPadV = asNum((0, _figmaVariablesResolver.getVariableByName)('productMerchandisingcard/footer/padding/vertical', modes), 16);
+  const textGap = asNum((0, _figmaVariablesResolver.getVariableByName)('productMerchandisingcard/footer/text/gap', modes), 2);
+  const blurRadius = asNum((0, _figmaVariablesResolver.getVariableByName)('blur/minimal', modes), 29);
+  const titleColor = asStr((0, _figmaVariablesResolver.getVariableByName)('productMerchandisingcard/footer/title/font/color', modes), '#ffffff');
+  const titleSize = asNum((0, _figmaVariablesResolver.getVariableByName)('productMerchandisingcard/footer/title/fontsize', modes), 14);
+  const titleFamily = asStr((0, _figmaVariablesResolver.getVariableByName)('productMerchandisingcard/footer/title/fontfamily', modes), 'JioType Var');
+  const titleWeight = asStr((0, _figmaVariablesResolver.getVariableByName)('productMerchandisingcard/footer/title/fontweight', modes), '700');
+  const subtitleColor = asStr((0, _figmaVariablesResolver.getVariableByName)('productMerchandisingcard/footer/subtitle/font/color', modes), '#c5bcb5');
+  const subtitleSize = asNum((0, _figmaVariablesResolver.getVariableByName)('productMerchandisingcard/footer/subtitle/fontsize', modes), 12);
+  const subtitleFamily = asStr((0, _figmaVariablesResolver.getVariableByName)('productMerchandisingcard/footer/subtitle/fontfamily', modes), 'JioType Var');
+  const subtitleWeight = asStr((0, _figmaVariablesResolver.getVariableByName)('productMerchandisingcard/footer/subtitle/fontweight', modes), '400');
+  const sbSize = asNum((0, _figmaVariablesResolver.getVariableByName)('productMerchandisingcard/specialbadge/text/fontsize', modes), 12);
+  const sbFamily = asStr((0, _figmaVariablesResolver.getVariableByName)('productMerchandisingcard/specialbadge/text/fontfamily', modes), 'JioType Var');
+  const sbWeight = asStr((0, _figmaVariablesResolver.getVariableByName)('productMerchandisingcard/specialbadge/text/fontweight', modes), '500');
+
+  // `Image.blurRadius` is interpreted differently per platform — iOS applies a
+  // strong Gaussian while Android's IterativeBoxBlur is gentler at the same
+  // numeric radius — so we tune each platform to land on the same perceived
+  // "minimal" frosted strength as the Figma design.
+  const imageBlurRadius = _reactNative.Platform.select({
+    ios: Math.max(6, Math.round(blurRadius * 0.5)),
+    android: Math.max(12, Math.round(blurRadius * 0.95)),
+    default: Math.max(8, Math.round(blurRadius * 0.6))
+  });
+  return {
+    radius,
+    blurIntensity: Math.max(0, Math.min(100, Math.round(blurRadius * BLUR_INTENSITY_FACTOR))),
+    imageBlurRadius,
+    header: {
+      flexDirection: 'row',
+      alignItems: 'flex-start',
+      justifyContent: 'space-between',
+      paddingHorizontal: headerPadH,
+      paddingVertical: headerPadV,
+      zIndex: 1
+    },
+    footer: {
+      paddingHorizontal: footerPadH,
+      paddingVertical: footerPadV,
+      gap: footerGap,
+      overflow: 'hidden',
+      zIndex: 2
+    },
+    textWrap: {
+      flex: 1,
+      gap: textGap,
+      justifyContent: 'center'
+    },
+    title: {
+      color: titleColor,
+      fontSize: titleSize,
+      fontFamily: titleFamily,
+      fontWeight: titleWeight,
+      lineHeight: Math.round(titleSize * 1.2),
+      includeFontPadding: false
+    },
+    subtitle: {
+      color: subtitleColor,
+      fontSize: subtitleSize,
+      fontFamily: subtitleFamily,
+      fontWeight: subtitleWeight,
+      lineHeight: Math.round(subtitleSize * 1.2),
+      includeFontPadding: false
+    },
+    specialBadgeText: {
+      color: '#ffffff',
+      fontSize: sbSize,
+      fontFamily: sbFamily,
+      fontWeight: sbWeight,
+      lineHeight: Math.round(sbSize * 1.2),
+      includeFontPadding: false
+    }
+  };
+}
+const styles = _reactNative.StyleSheet.create({
+  avatarContainer: {
+    flexShrink: 1,
+    justifyContent: 'center'
+  },
+  footerRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: 8
+  },
+  scrim: {
+    // The footer node sits at 90% opacity in Figma; applying it to the
+    // scrim (not the content) keeps the title/CTA crisp while preserving
+    // the intended fade strength.
+    opacity: 0.9
+  },
+  // Overrides layered on top of <Badge type="glass">. Badge already supplies
+  // the row layout + 4px gap (when a leading icon is present), `overflow:
+  // 'hidden'`, `alignSelf: 'flex-start'` and `alignItems: 'center'`; these
+  // pin the special badge's literal Figma box (6/2 padding, 4px radius)
+  // regardless of the badge size tokens resolved by the active modes.
+  specialBadge: {
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    borderRadius: 4
+  },
+  pressed: {
+    opacity: 0.92
+  }
+});
+var _default = exports.default = ProductMerchandisingCard;

package/lib/commonjs/components/ProductOverview/ProductOverview.js

@@ -29,7 +29,8 @@ const ProductOverview = ({
   stats = DEFAULT_STATS,
   modes = _reactUtils.EMPTY_MODES,
   style,
-  children
+  children,
+  disableTruncation
 }) => {
   const padding = (0, _figmaVariablesResolver.getVariableByName)('productOverview/padding', modes) ?? 24;
   const gap = (0, _figmaVariablesResolver.getVariableByName)('productOverview/gap', modes) ?? 12;
@@ -133,11 +134,11 @@ const ProductOverview = ({
         },
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: statValueStyle,
-          numberOfLines: 1,
+          ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
           children: stat.value
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: statLabelStyle,
-          numberOfLines: 1,
+          ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
           children: stat.label
         })]
       }, `${stat.label}-${index}`))

package/lib/commonjs/components/ProgressBadge/ProgressBadge.js

@@ -34,6 +34,7 @@ function ProgressBadge({
   style,
   textStyle: textStyleOverride,
   accessibilityLabel,
+  disableTruncation,
   ...rest
 }) {
   // Resolve layout tokens
@@ -119,8 +120,7 @@ function ProgressBadge({
         importantForAccessibility: "no"
       }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: [textStyle, textStyleOverride],
-        numberOfLines: 1,
-        ellipsizeMode: "tail",
+        ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1, 'tail'),
         accessibilityElementsHidden: true,
         importantForAccessibility: "no",
         children: taskName

package/lib/commonjs/components/ProjectionMarker/ProjectionMarker.js

@@ -0,0 +1,162 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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 _Divider = _interopRequireDefault(require("../Divider/Divider"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * A value rendered at either end of the marker. A `string`/`number` is rendered
+ * with the built-in title typography; any other `ReactNode` (e.g. a
+ * `MoneyValue`) is rendered as-is so consumers can fully control presentation.
+ */
+
+const isTextValue = value => typeof value === 'string' || typeof value === 'number';
+
+/**
+ * ProjectionMarker renders a start value and an end value connected to a
+ * centered badge that summarizes the projection (e.g. a tenure and interest
+ * rate). It mirrors the Figma `projectionMarker` component and is commonly used
+ * inside "Potential returns" style cards.
+ *
+ * @example
+ * ```tsx
+ * <ProjectionMarker
+ *   startValue="₹1,00,000"
+ *   endValue="₹1,25,101"
+ *   duration="1Y 10M"
+ *   rate="@ 8.25 %"
+ * />
+ * ```
+ *
+ * @example Custom end values via MoneyValue
+ * ```tsx
+ * <ProjectionMarker
+ *   startValue={<MoneyValue value="1,00,000" />}
+ *   endValue={<MoneyValue value="1,25,101" />}
+ *   duration="1Y 10M"
+ *   rate="@ 8.25 %"
+ * />
+ * ```
+ */
+function ProjectionMarker({
+  startValue = '₹1,00,000',
+  endValue = '₹1,25,101',
+  duration = '1Y 10M',
+  rate = '@ 8.25 %',
+  showConnectors = true,
+  modes = _reactUtils.EMPTY_MODES,
+  style,
+  startValueStyle,
+  endValueStyle,
+  badgeStyle,
+  durationStyle,
+  rateStyle,
+  accessibilityLabel,
+  disableTruncation
+}) {
+  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('projectionMarker/title/color', modes) ?? '#000000';
+  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('projectionMarker/title/fontfamily', modes) ?? 'JioType Var';
+  const titleFontSize = (0, _figmaVariablesResolver.getVariableByName)('projectionMarker/title/fontsize', modes) ?? 14;
+  const titleFontWeight = String((0, _figmaVariablesResolver.getVariableByName)('projectionMarker/title/fontweight', modes) ?? 600);
+  const durationColor = (0, _figmaVariablesResolver.getVariableByName)('projectionMarker/duration/color', modes) ?? '#000000';
+  const durationFontFamily = (0, _figmaVariablesResolver.getVariableByName)('projectionMarker/duration/fontfamily', modes) ?? 'JioType Var';
+  const durationFontSize = (0, _figmaVariablesResolver.getVariableByName)('projectionMarker/duration/fontsize', modes) ?? 12;
+  const durationFontWeight = String((0, _figmaVariablesResolver.getVariableByName)('projectionMarker/duration/fontweight', modes) ?? 500);
+  const rateColor = (0, _figmaVariablesResolver.getVariableByName)('projectionMarker/rate/color', modes) ?? '#6b6b6b';
+  const rateFontFamily = (0, _figmaVariablesResolver.getVariableByName)('metricdata/rate/fontfamily', modes) ?? 'JioType Var';
+  const rateFontSize = (0, _figmaVariablesResolver.getVariableByName)('metricdata/rate/fontsize', modes) ?? 11;
+  const rateFontWeight = String((0, _figmaVariablesResolver.getVariableByName)('metricdata/rate/fontweight', modes) ?? 400);
+  const badgeBg = (0, _figmaVariablesResolver.getVariableByName)('projectionMarker/durationWrap/bg/color', modes) ?? '#f5f5f5';
+  const badgeBorderColor = (0, _figmaVariablesResolver.getVariableByName)('projectionMarker/durationWrap/border/color', modes) ?? '#ebebed';
+  const badgeBorderWidth = (0, _figmaVariablesResolver.getVariableByName)('metricdata/durationWrap/stroke', modes) ?? 1;
+  const badgeRadius = (0, _figmaVariablesResolver.getVariableByName)('metricdata/durationWrap/radius', modes) ?? 8;
+  const badgePaddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('metricdata/durationWrap/padding/horizontal', modes) ?? 16;
+  const badgePaddingVertical = (0, _figmaVariablesResolver.getVariableByName)('metricdata/durationWrap/padding/vertical', modes) ?? 8;
+  const titleTextStyle = {
+    color: titleColor,
+    fontFamily: titleFontFamily,
+    fontSize: titleFontSize,
+    fontWeight: titleFontWeight,
+    lineHeight: titleFontSize * 1.3
+  };
+  const renderEndValue = (value, overrideStyle) => {
+    if (value === null || value === undefined) return null;
+    if (isTextValue(value)) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [titleTextStyle, overrideStyle],
+        ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
+        children: value
+      });
+    }
+    return (0, _reactUtils.cloneChildrenWithModes)(value, modes);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [styles.container, style],
+    accessibilityRole: "summary",
+    accessibilityLabel: accessibilityLabel,
+    children: [renderEndValue(startValue, startValueStyle), showConnectors && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
+      direction: "horizontal",
+      modes: modes,
+      style: styles.connector
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: [styles.badge, {
+        backgroundColor: badgeBg,
+        borderColor: badgeBorderColor,
+        borderWidth: badgeBorderWidth,
+        borderRadius: badgeRadius,
+        paddingHorizontal: badgePaddingHorizontal,
+        paddingVertical: badgePaddingVertical
+      }, badgeStyle],
+      children: [duration !== null && duration !== undefined ? isTextValue(duration) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [{
+          color: durationColor,
+          fontFamily: durationFontFamily,
+          fontSize: durationFontSize,
+          fontWeight: durationFontWeight,
+          lineHeight: durationFontSize * 1.2,
+          textAlign: 'center'
+        }, durationStyle],
+        children: duration
+      }) : (0, _reactUtils.cloneChildrenWithModes)(duration, modes) : null, rate !== null && rate !== undefined ? isTextValue(rate) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [{
+          color: rateColor,
+          fontFamily: rateFontFamily,
+          fontSize: rateFontSize,
+          fontWeight: rateFontWeight,
+          lineHeight: rateFontSize * 1.3,
+          textAlign: 'center'
+        }, rateStyle],
+        children: rate
+      }) : (0, _reactUtils.cloneChildrenWithModes)(rate, modes) : null]
+    }), showConnectors && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
+      direction: "horizontal",
+      modes: modes,
+      style: styles.connector
+    }), renderEndValue(endValue, endValueStyle)]
+  });
+}
+const styles = {
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    width: '100%'
+  },
+  connector: {
+    flex: 1,
+    alignSelf: 'center',
+    marginHorizontal: 16
+  },
+  badge: {
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+};
+var _default = exports.default = ProjectionMarker;

package/lib/commonjs/components/Radio/Radio.js

@@ -3,8 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Radio = Radio;
-exports.default = void 0;
+exports.default = exports.Radio = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
@@ -19,14 +18,14 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 // Radio
 // ---------------------------------------------------------------------------
 
-function Radio({
+const Radio = exports.Radio = /*#__PURE__*/(0, _react.forwardRef)(function Radio({
   selected = false,
   disabled = false,
   onPress,
   modes = _reactUtils.EMPTY_MODES,
   style,
   testID
-}) {
+}, ref) {
   // ---- Refs & State ----
   const [hovered, setHovered] = (0, _react.useState)(false);
   const [focused, setFocused] = (0, _react.useState)(false);
@@ -174,6 +173,7 @@ function Radio({
     (0, _figmaVariablesResolver.getVariableByName)('radio/disabledSelected/border/color');
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+    ref: ref,
     testID: testID,
     disabled: disabled,
     onPress: onPress,
@@ -190,5 +190,5 @@ function Radio({
       style: selectorStyle
     })
   });
-}
+});
 var _default = exports.default = Radio;