jfs-components 0.1.8 → 0.1.17

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 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");
@@ -13,10 +14,16 @@ 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("./GlassFill"));
+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
@@ -57,11 +64,15 @@ function ProductMerchandisingCard({
   height = 223,
   modes = _reactUtils.EMPTY_MODES,
   style,
-  accessibilityLabel
+  accessibilityLabel,
+  disableTruncation
 }) {
-  // Unique gradient id so multiple cards on one (web) document never collide.
+  // Unique gradient ids so multiple cards on one (web) document never collide.
   const rawId = (0, _react.useId)();
-  const scrimId = `pmc-footer-scrim-${rawId.replace(/[^a-zA-Z0-9_-]/g, '')}`;
+  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,
@@ -98,21 +109,25 @@ function ProductMerchandisingCard({
     monogram: avatarMonogram,
     modes: avatarModes
   }) : null;
-  const footerSpecialBadge = specialBadge ?? (specialBadgeLabel != null ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+
+  // 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,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GlassFill.default, {
-      tint: "light",
-      intensity: SPECIAL_BADGE_INTENSITY,
-      overlayColor: SPECIAL_BADGE_BG,
-      style: styles.specialBadgeFill
-    }), specialBadgeIcon != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: styles.specialBadgeIcon,
-      children: specialBadgeIcon
-    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: tokens.specialBadgeText,
-      numberOfLines: 1,
-      children: specialBadgeLabel
-    })]
+    labelStyle: tokens.specialBadgeText,
+    ...(disableTruncation != null ? {
+      disableTruncation
+    } : null)
   }) : null);
 
   // The Figma CTA uses the brand "Secondary" appearance (purple fill, white
@@ -147,7 +162,62 @@ function ProductMerchandisingCard({
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: tokens.footer,
       pointerEvents: "box-none",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GlassFill.default, {
+      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
@@ -188,11 +258,11 @@ function ProductMerchandisingCard({
           style: tokens.textWrap,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
             style: tokens.title,
-            numberOfLines: 1,
+            ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
             children: title
           }), subtitle != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
             style: tokens.subtitle,
-            numberOfLines: 1,
+            ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
             children: subtitle
           }) : null]
         }), footerCta]
@@ -263,9 +333,20 @@ function resolveTokens(modes) {
   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',
@@ -329,23 +410,16 @@ const styles = _reactNative.StyleSheet.create({
     // 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: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 4,
     paddingHorizontal: 6,
     paddingVertical: 2,
-    borderRadius: 4,
-    overflow: 'hidden',
-    alignSelf: 'flex-start'
-  },
-  specialBadgeFill: {
     borderRadius: 4
   },
-  specialBadgeIcon: {
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
   pressed: {
     opacity: 0.92
   }

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,11 +34,12 @@ function ProgressBadge({
   style,
   textStyle: textStyleOverride,
   accessibilityLabel,
+  disableTruncation,
   ...rest
 }) {
   // Resolve layout tokens
-  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('progressBadge/background', modes) || '#ffffff';
-  const progressColor = (0, _figmaVariablesResolver.getVariableByName)('progressBadge/progress/color', modes) || '#ebebed';
+  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('progressBadge/background', modes);
+  const progressColor = (0, _figmaVariablesResolver.getVariableByName)('progressBadge/progress/color', modes);
   const gap = (0, _figmaVariablesResolver.getVariableByName)('progressBadge/gap', modes) ?? 12;
   const paddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('progressBadge/padding/horizontal', modes) ?? 16;
   const paddingVertical = (0, _figmaVariablesResolver.getVariableByName)('progressBadge/padding/vertical', modes) ?? 6;
@@ -46,15 +47,15 @@ function ProgressBadge({
   const descriptionGap = (0, _figmaVariablesResolver.getVariableByName)('progressBadge/description/gap', modes) ?? 8;
 
   // Resolve typography tokens
-  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('progressBadge/fontFamily', modes) || 'JioType_Var:Medium';
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('progressBadge/fontFamily', modes);
   const fontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('progressBadge/fontWeight', modes) ?? 500;
   const fontWeight = typeof fontWeightRaw === 'number' ? fontWeightRaw.toString() : fontWeightRaw;
   const fontSize = (0, _figmaVariablesResolver.getVariableByName)('progressBadge/fontSize', modes) ?? 14;
   const lineHeight = (0, _figmaVariablesResolver.getVariableByName)('progressBadge/lineHeight', modes) ?? 17;
-  const textColor = (0, _figmaVariablesResolver.getVariableByName)('progressBadge/foreground', modes) || '#000000';
+  const textColor = (0, _figmaVariablesResolver.getVariableByName)('progressBadge/foreground', modes);
 
   // Resolve icon tokens
-  const iconColor = (0, _figmaVariablesResolver.getVariableByName)('progressBadge/icon/color', modes) || '#f50030';
+  const iconColor = (0, _figmaVariablesResolver.getVariableByName)('progressBadge/icon/color', modes);
   const iconSize = (0, _figmaVariablesResolver.getVariableByName)('progressBadge/icon/size', modes) ?? 18;
   const containerStyle = {
     backgroundColor,
@@ -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

@@ -58,7 +58,8 @@ function ProjectionMarker({
   badgeStyle,
   durationStyle,
   rateStyle,
-  accessibilityLabel
+  accessibilityLabel,
+  disableTruncation
 }) {
   const titleColor = (0, _figmaVariablesResolver.getVariableByName)('projectionMarker/title/color', modes) ?? '#000000';
   const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('projectionMarker/title/fontfamily', modes) ?? 'JioType Var';
@@ -90,7 +91,7 @@ function ProjectionMarker({
     if (isTextValue(value)) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: [titleTextStyle, overrideStyle],
-        numberOfLines: 1,
+        ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
         children: value
       });
     }

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

@@ -8,6 +8,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
 var _reactUtils = require("../../utils/react-utils");
+var _shadow = require("../../utils/shadow");
 var _jsxRuntime = require("react/jsx-runtime");
 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); }
 // ---------------------------------------------------------------------------
@@ -32,9 +33,9 @@ const Radio = exports.Radio = /*#__PURE__*/(0, _react.forwardRef)(function Radio
   const [pressed, setPressed] = (0, _react.useState)(false);
 
   // ---- Dimensions ----
-  const widthStr = (0, _figmaVariablesResolver.getVariableByName)('radio/width', modes) || '18';
-  const heightStr = (0, _figmaVariablesResolver.getVariableByName)('radio/height', modes) || '18';
-  const selectorSizeStr = (0, _figmaVariablesResolver.getVariableByName)('radio/selector/size', modes) || '10';
+  const widthStr = (0, _figmaVariablesResolver.getVariableByName)('radio/width', modes);
+  const heightStr = (0, _figmaVariablesResolver.getVariableByName)('radio/height', modes);
+  const selectorSizeStr = (0, _figmaVariablesResolver.getVariableByName)('radio/selector/size', modes);
   const width = parseFloat(widthStr?.toString() || '18');
   const height = parseFloat(heightStr?.toString() || '18');
   const selectorSize = parseFloat(selectorSizeStr?.toString() || '10');
@@ -71,7 +72,7 @@ const Radio = exports.Radio = /*#__PURE__*/(0, _react.forwardRef)(function Radio
   // ---- Colors & Border ----
 
   const resolveColor = (path, fallback) => {
-    return (0, _figmaVariablesResolver.getVariableByName)(path, modes) || fallback;
+    return (0, _figmaVariablesResolver.getVariableByName)(path, modes);
   };
 
   // Background Color
@@ -125,10 +126,9 @@ const Radio = exports.Radio = /*#__PURE__*/(0, _react.forwardRef)(function Radio
     backgroundColor,
     justifyContent: 'center',
     alignItems: 'center',
-    // Web shadow (ring)
-    ...(_reactNative.Platform.OS === 'web' && shadowSize > 0 ? {
-      boxShadow: `0px 0px 0px ${shadowSize}px ${shadowColor}`
-    } : {})
+    // Focus/selected glow ring. Rendered via the unified boxShadow helper
+    // so it works on web + RN 0.76+ and degrades gracefully on older RN.
+    ...(shadowSize > 0 ? (0, _shadow.boxShadow)(`0px 0px 0px ${shadowSize}px ${shadowColor}`) : {})
   };
   const selectorStyle = {
     width: selectorSize,

package/lib/commonjs/components/RechargeCard/RechargeCard.js

@@ -44,47 +44,47 @@ function RechargeCard({
   style
 }) {
   // Container Tokens (defaults mirror Figma node 2235:937).
-  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('rechargeCard/background', modes) || '#ffffff';
-  const paddingHorizontal = parseInt((0, _figmaVariablesResolver.getVariableByName)('rechargeCard/padding/horizontal', modes) || 16, 10);
-  const paddingVertical = parseInt((0, _figmaVariablesResolver.getVariableByName)('rechargeCard/padding/vertical', modes) || 20, 10);
-  const gap = parseInt((0, _figmaVariablesResolver.getVariableByName)('rechargeCard/gap', modes) || 20, 10);
-  const radius = parseInt((0, _figmaVariablesResolver.getVariableByName)('rechargeCard/radius', modes) || 20, 10);
-  const minWidth = parseInt((0, _figmaVariablesResolver.getVariableByName)('rechargeCard/minWidth', modes) || 312, 10);
-  const strokeWidth = parseInt((0, _figmaVariablesResolver.getVariableByName)('rechargeCard/strokeWidth', modes) || 1, 10);
-  const strokeColor = (0, _figmaVariablesResolver.getVariableByName)('rechargeCard/stroke/color', modes) || '#ebebed';
+  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('rechargeCard/background', modes);
+  const paddingHorizontal = parseInt((0, _figmaVariablesResolver.getVariableByName)('rechargeCard/padding/horizontal', modes), 10);
+  const paddingVertical = parseInt((0, _figmaVariablesResolver.getVariableByName)('rechargeCard/padding/vertical', modes), 10);
+  const gap = parseInt((0, _figmaVariablesResolver.getVariableByName)('rechargeCard/gap', modes), 10);
+  const radius = parseInt((0, _figmaVariablesResolver.getVariableByName)('rechargeCard/radius', modes), 10);
+  const minWidth = parseInt((0, _figmaVariablesResolver.getVariableByName)('rechargeCard/minWidth', modes), 10);
+  const strokeWidth = parseInt((0, _figmaVariablesResolver.getVariableByName)('rechargeCard/strokeWidth', modes), 10);
+  const strokeColor = (0, _figmaVariablesResolver.getVariableByName)('rechargeCard/stroke/color', modes);
 
   // Header Tokens
-  const headerGap = parseInt((0, _figmaVariablesResolver.getVariableByName)('rechargeCard/header/gap', modes) || 4, 10);
-  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('rechargeCard/title/color', modes) || '#000000';
-  const titleFontSize = parseInt((0, _figmaVariablesResolver.getVariableByName)('rechargeCard/title/fontSize', modes) || 12, 10);
-  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('rechargeCard/title/fontFamily', modes) || 'JioType Var';
-  const titleLineHeight = parseInt((0, _figmaVariablesResolver.getVariableByName)('rechargeCard/title/lineHeight', modes) || 14, 10);
-  const titleFontWeight = (0, _figmaVariablesResolver.getVariableByName)('rechargeCard/title/fontWeight', modes) || '700';
+  const headerGap = parseInt((0, _figmaVariablesResolver.getVariableByName)('rechargeCard/header/gap', modes), 10);
+  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('rechargeCard/title/color', modes);
+  const titleFontSize = parseInt((0, _figmaVariablesResolver.getVariableByName)('rechargeCard/title/fontSize', modes), 10);
+  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('rechargeCard/title/fontFamily', modes);
+  const titleLineHeight = parseInt((0, _figmaVariablesResolver.getVariableByName)('rechargeCard/title/lineHeight', modes), 10);
+  const titleFontWeight = (0, _figmaVariablesResolver.getVariableByName)('rechargeCard/title/fontWeight', modes);
 
   // Specs Tokens
-  const specsGap = parseInt((0, _figmaVariablesResolver.getVariableByName)('rechargeCard/specs/gap', modes) || 0, 10);
-  const specItemGap = parseInt((0, _figmaVariablesResolver.getVariableByName)('rechargeCard/specItem/gap', modes) || 4, 10);
+  const specsGap = parseInt((0, _figmaVariablesResolver.getVariableByName)('rechargeCard/specs/gap', modes), 10);
+  const specItemGap = parseInt((0, _figmaVariablesResolver.getVariableByName)('rechargeCard/specItem/gap', modes), 10);
 
   // Spec Label Tokens
-  const specLabelColor = (0, _figmaVariablesResolver.getVariableByName)('rechargeCard/specItem/label/color', modes) || '#000000';
-  const specLabelFontSize = parseInt((0, _figmaVariablesResolver.getVariableByName)('rechargeCard/specItem/label/fontSize', modes) || 12, 10);
-  const specLabelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('rechargeCard/specItem/label/fontFamily', modes) || 'JioType Var';
-  const specLabelLineHeight = parseInt((0, _figmaVariablesResolver.getVariableByName)('rechargeCard/specItem/label/lineHeight', modes) || 14, 10);
-  const specLabelFontWeight = (0, _figmaVariablesResolver.getVariableByName)('rechargeCard/specItem/label/fontWeight', modes) || '500';
+  const specLabelColor = (0, _figmaVariablesResolver.getVariableByName)('rechargeCard/specItem/label/color', modes);
+  const specLabelFontSize = parseInt((0, _figmaVariablesResolver.getVariableByName)('rechargeCard/specItem/label/fontSize', modes), 10);
+  const specLabelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('rechargeCard/specItem/label/fontFamily', modes);
+  const specLabelLineHeight = parseInt((0, _figmaVariablesResolver.getVariableByName)('rechargeCard/specItem/label/lineHeight', modes), 10);
+  const specLabelFontWeight = (0, _figmaVariablesResolver.getVariableByName)('rechargeCard/specItem/label/fontWeight', modes);
 
   // Spec Value Tokens
-  const specValueColor = (0, _figmaVariablesResolver.getVariableByName)('rechargeCard/specItem/value/color', modes) || '#000000';
-  const specValueFontSize = parseInt((0, _figmaVariablesResolver.getVariableByName)('rechargeCard/specItem/value/fontSize', modes) || 14, 10);
-  const specValueFontFamily = (0, _figmaVariablesResolver.getVariableByName)('rechargeCard/specItem/value/fontFamily', modes) || 'JioType Var';
-  const specValueLineHeight = parseInt((0, _figmaVariablesResolver.getVariableByName)('rechargeCard/specItem/value/lineHeight', modes) || 17, 10);
-  const specValueFontWeight = (0, _figmaVariablesResolver.getVariableByName)('rechargeCard/specItem/value/fontWeight', modes) || '500';
+  const specValueColor = (0, _figmaVariablesResolver.getVariableByName)('rechargeCard/specItem/value/color', modes);
+  const specValueFontSize = parseInt((0, _figmaVariablesResolver.getVariableByName)('rechargeCard/specItem/value/fontSize', modes), 10);
+  const specValueFontFamily = (0, _figmaVariablesResolver.getVariableByName)('rechargeCard/specItem/value/fontFamily', modes);
+  const specValueLineHeight = parseInt((0, _figmaVariablesResolver.getVariableByName)('rechargeCard/specItem/value/lineHeight', modes), 10);
+  const specValueFontWeight = (0, _figmaVariablesResolver.getVariableByName)('rechargeCard/specItem/value/fontWeight', modes);
 
   // Disclaimer Tokens
-  const disclaimerColor = (0, _figmaVariablesResolver.getVariableByName)('rechargeCard/disclaimer/color', modes) || '#000000';
-  const disclaimerFontSize = parseInt((0, _figmaVariablesResolver.getVariableByName)('rechargeCard/disclaimer/fontSize', modes) || 10, 10);
-  const disclaimerFontFamily = (0, _figmaVariablesResolver.getVariableByName)('rechargeCard/disclaimer/fontFamily', modes) || 'JioType Var';
-  const disclaimerLineHeight = parseInt((0, _figmaVariablesResolver.getVariableByName)('rechargeCard/disclaimer/lineHeight', modes) || 13, 10);
-  const disclaimerFontWeight = (0, _figmaVariablesResolver.getVariableByName)('rechargeCard/disclaimer/fontWeight', modes) || '400';
+  const disclaimerColor = (0, _figmaVariablesResolver.getVariableByName)('rechargeCard/disclaimer/color', modes);
+  const disclaimerFontSize = parseInt((0, _figmaVariablesResolver.getVariableByName)('rechargeCard/disclaimer/fontSize', modes), 10);
+  const disclaimerFontFamily = (0, _figmaVariablesResolver.getVariableByName)('rechargeCard/disclaimer/fontFamily', modes);
+  const disclaimerLineHeight = parseInt((0, _figmaVariablesResolver.getVariableByName)('rechargeCard/disclaimer/lineHeight', modes), 10);
+  const disclaimerFontWeight = (0, _figmaVariablesResolver.getVariableByName)('rechargeCard/disclaimer/fontWeight', modes);
   const resolveFontWeight = weight => typeof weight === 'number' ? weight.toString() : weight;
 
   // Pass modes to subscription children (e.g. AvatarGroup)

package/lib/commonjs/components/SavingsGoalSummary/SavingsGoalSummary.js

@@ -9,7 +9,6 @@ var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
 var _reactUtils = require("../../utils/react-utils");
 var _numberUtils = require("../../utils/number-utils");
-var _Title = _interopRequireDefault(require("../Title/Title"));
 var _LinearProgress = _interopRequireDefault(require("../LinearProgress/LinearProgress"));
 var _MetricLegendItem = _interopRequireDefault(require("../MetricLegendItem/MetricLegendItem"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -63,6 +62,7 @@ const DEFAULT_TARGET = {
  * @param {SavingsGoalSummaryProps} props
  */
 function SavingsGoalSummary({
+  label,
   currency = '₹',
   current = DEFAULT_CURRENT,
   target = DEFAULT_TARGET,
@@ -70,6 +70,7 @@ function SavingsGoalSummary({
   modes = _reactUtils.EMPTY_MODES,
   style,
   titleStyle,
+  labelStyle,
   legendStyle
 }) {
   // Merge caller modes on top of the defaults so callers can override
@@ -117,6 +118,40 @@ function SavingsGoalSummary({
   const percentageLabel = `${Math.round(resolvedProgress * 100)}%`;
   const gap = (0, _figmaVariablesResolver.getVariableByName)('savingsGoalSummary/gap', mergedModes) ?? 23;
   const legendGap = (0, _figmaVariablesResolver.getVariableByName)('savingsGoalSummary/legend/gap', mergedModes) ?? 16;
+
+  // Percentage value typography — driven by the dedicated
+  // `savingsGoalSummary/value/*` tokens (Figma 29 / 900) rather than the
+  // generic `Title` tokens, so the value matches the design exactly.
+  const valueFontSize = (0, _figmaVariablesResolver.getVariableByName)('savingsGoalSummary/value/fontSize', mergedModes) ?? 29;
+  const valueFontFamily = (0, _figmaVariablesResolver.getVariableByName)('savingsGoalSummary/value/fontFamily', mergedModes) ?? 'JioType Var';
+  const valueRawLineHeight = (0, _figmaVariablesResolver.getVariableByName)('savingsGoalSummary/value/lineHeight', mergedModes) ?? 29;
+  // The value tokens ship with `lineHeight === fontSize` (29/29); clamp to
+  // ~1.2x so descenders never clip on native (same guard `Title` uses).
+  const valueLineHeight = Math.max(valueRawLineHeight, Math.ceil(valueFontSize * 1.2));
+  const valueFontWeight = String((0, _figmaVariablesResolver.getVariableByName)('savingsGoalSummary/value/fontWeight', mergedModes) ?? 900);
+  const valueColor = (0, _figmaVariablesResolver.getVariableByName)('savingsGoalSummary/value/color', mergedModes) ?? '#0d0d0f';
+
+  // Caption ("Credit usage") typography — `savingsGoalSummary/label/*`
+  // (Figma 12 / 400). Only rendered when a `label` is supplied.
+  const labelFontSize = (0, _figmaVariablesResolver.getVariableByName)('savingsGoalSummary/label/fontSize', mergedModes) ?? 12;
+  const labelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('savingsGoalSummary/label/fontFamily', mergedModes) ?? 'JioType Var';
+  const labelLineHeight = (0, _figmaVariablesResolver.getVariableByName)('savingsGoalSummary/label/lineHeight', mergedModes) ?? 16;
+  const labelFontWeight = String((0, _figmaVariablesResolver.getVariableByName)('savingsGoalSummary/label/fontWeight', mergedModes) ?? 400);
+  const labelColor = (0, _figmaVariablesResolver.getVariableByName)('savingsGoalSummary/label/color', mergedModes) ?? '#0d0d0f';
+  const labelNode = label == null || label === false ? null : typeof label === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+    style: [{
+      color: labelColor,
+      fontFamily: labelFontFamily,
+      fontSize: labelFontSize,
+      lineHeight: labelLineHeight,
+      fontWeight: labelFontWeight,
+      width: '100%'
+    }, labelStyle],
+    children: label
+  }) : (() => {
+    const processed = (0, _reactUtils.cloneChildrenWithModes)(label, mergedModes);
+    return processed.length === 1 ? processed[0] : processed;
+  })();
   const customLegend = children ? (0, _reactUtils.cloneChildrenWithModes)(children, mergedModes) : null;
   const defaultLegend = !customLegend && (current || target) ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [current && /*#__PURE__*/(0, _jsxRuntime.jsx)(_MetricLegendItem.default, {
@@ -139,12 +174,22 @@ function SavingsGoalSummary({
       gap,
       alignItems: 'stretch'
     }, style],
-    accessibilityLabel: `Savings goal progress, ${percentageLabel}`,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Title.default, {
-      title: percentageLabel,
-      modes: mergedModes,
-      style: TITLE_CONTAINER_STYLE,
-      textStyle: titleStyle
+    accessibilityLabel: typeof label === 'string' ? `${label}, ${percentageLabel}` : `Savings goal progress, ${percentageLabel}`,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: HEADER_GROUP_STYLE,
+      children: [labelNode, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [{
+          color: valueColor,
+          fontFamily: valueFontFamily,
+          fontSize: valueFontSize,
+          lineHeight: valueLineHeight,
+          fontWeight: valueFontWeight,
+          width: '100%'
+        }, titleStyle],
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no",
+        children: percentageLabel
+      })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinearProgress.default, {
       value: resolvedProgress,
       modes: mergedModes
@@ -172,10 +217,12 @@ function formatLegendValue(value, currency) {
   });
 }
 
-// Neutralise the `Title` component's default page-level padding so it sits
-// flush inside the summary card (the parent container owns spacing via `gap`).
-const TITLE_CONTAINER_STYLE = {
-  paddingHorizontal: 0,
-  paddingVertical: 0
+// Groups the optional caption ("Credit usage") tightly above the percentage
+// value. The parent container owns the larger spacing to the bar via `gap`,
+// so this only needs the small label→value gap.
+const HEADER_GROUP_STYLE = {
+  width: '100%',
+  gap: 2,
+  alignItems: 'flex-start'
 };
 var _default = exports.default = SavingsGoalSummary;