jfs-components 0.1.50 → 0.1.54

package/lib/commonjs/components/HelloJioInput/HelloJioInput.js

@@ -16,13 +16,21 @@ 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); }
 const IS_WEB = _reactNative.Platform.OS === 'web';
-const STATE_COLLECTION = 'HelloJioInput State';
+/** Figma collection name — must match `figma-modes.generated.ts` exactly. */
+const STATE_COLLECTION = 'Hello Jio Input State';
 
 /** Default IconButton modes matching the Figma send control. */
 const DEFAULT_SEND_BUTTON_MODES = Object.freeze({
   AppearanceBrand: 'Primary',
   'Button / Size': 'S'
 });
+
+/**
+ * Figma `Hello Jio Input State` only exposes Idle | Active. The component-set
+ * variant IdleJioPlus is glass chrome on top of Idle tokens — never a mode
+ * value for this collection.
+ */
+
 const toNumber = (value, fallback) => {
   if (typeof value === 'number') {
     return Number.isFinite(value) ? value : fallback;
@@ -38,6 +46,29 @@ const toFontWeight = (value, fallback) => {
   if (typeof value === 'string') return value;
   return fallback;
 };
+
+/** True when a CSS/RN color string already carries a non-opaque alpha channel. */
+const hasAlphaChannel = color => {
+  const trimmed = color.trim();
+  if (/^#[0-9a-fA-F]{8}$/.test(trimmed)) {
+    const alpha = parseInt(trimmed.slice(7, 9), 16);
+    return alpha < 255;
+  }
+  if (/^#[0-9a-fA-F]{4}$/.test(trimmed)) {
+    const alphaNibble = parseInt(trimmed.slice(3, 4), 16);
+    return alphaNibble < 15;
+  }
+  const func = trimmed.match(/^(rgba|hsla)\(/i);
+  if (func) {
+    const parts = trimmed.slice(trimmed.indexOf('(') + 1, -1).split(',');
+    if (parts.length === 4) {
+      const alpha = Number(parts[3].trim());
+      return Number.isFinite(alpha) && alpha < 1;
+    }
+  }
+  return false;
+};
+
 /**
  * Fallback values from the Figma `HelloJioInput` component when local token
  * JSON has not been synced yet. Mode-driven `getVariableByName` wins when
@@ -57,14 +88,11 @@ const STATE_FALLBACKS = {
     iconColor: '#24262b'
   },
   IdleJioPlus: {
-    // Glass fill. In Figma the IdleJioPlus surface resolves
-    // `helloJioInput/background` under the `Page type = JioPlus` variable mode,
-    // which yields a TRANSLUCENT light fill (not the opaque `#f5f5f5` the
-    // MainPage mode gives). Painted over the backdrop blur, an opaque value
-    // would read as a solid bar and hide the blur entirely — so, matching the
-    // translucent glass fallbacks the sibling GlassFill consumers use
-    // (FavoriteToggle `#ffffff33`, NumberPagination `rgba(141,141,141,0.4)`),
-    // this fallback carries alpha so the frost tints the blurred content.
+    // Frosted IdleJioPlus fill. Figma paints `helloJioInput/background` over
+    // `glass/minimal` blur; the synced token is often opaque `#f5f5f5`, which
+    // would hide the blur. Match sibling GlassFill consumers (FavoriteToggle
+    // `#ffffff33`, NumberPagination `rgba(141,141,141,0.4)`) with alpha so the
+    // frost tints the blurred content.
     background: '#f5f5f566',
     borderColor: '#f5f5f5',
     labelColor: '#545961',
@@ -94,6 +122,11 @@ function resolveHelloJioInputTokens(modes, visualState) {
   const blurMinimal = toNumber((0, _figmaVariablesResolver.getVariableByName)('blur/minimal', modes), 29);
   const blurIntensity = Math.max(0, Math.min(100, Math.round(blurMinimal)));
   const useGlass = visualState === 'IdleJioPlus';
+
+  // Figma IdleJioPlus paints `helloJioInput/background` over `glass/minimal`
+  // blur. The exported token is often opaque `#f5f5f5` (alpha lost in sync),
+  // which would fully hide the blur — keep a translucent frost when needed.
+  const glassOverlay = useGlass ? hasAlphaChannel(background) ? background : STATE_FALLBACKS.IdleJioPlus.background : background;
   return {
     containerStyle: {
       position: 'relative',
@@ -139,7 +172,8 @@ function resolveHelloJioInputTokens(modes, visualState) {
     iconColor,
     iconSize,
     blurIntensity,
-    useGlass
+    useGlass,
+    glassOverlay
   };
 }
 
@@ -186,12 +220,21 @@ const HelloJioInput = /*#__PURE__*/(0, _react.forwardRef)(function HelloJioInput
   const [uncontrolledValue, setUncontrolledValue] = (0, _react.useState)(defaultValue);
   const isControlled = value !== undefined;
   const currentValue = isControlled ? value : uncontrolledValue;
+
+  // Component-set visual vs token mode:
+  //  - Idle / Active map 1:1 onto `Hello Jio Input State`
+  //  - IdleJioPlus is Figma chrome (glass) on Idle tokens — never pass
+  //    "IdleJioPlus" into the state collection (that mode does not exist)
   const visualState = isFocused ? 'Active' : jioPlus ? 'IdleJioPlus' : 'Idle';
+  const tokenState = isFocused ? 'Active' : 'Idle';
   const modes = (0, _react.useMemo)(() => ({
     ...globalModes,
     ...propModes,
-    [STATE_COLLECTION]: visualState
-  }), [globalModes, propModes, visualState]);
+    [STATE_COLLECTION]: tokenState
+  }), [globalModes, propModes, tokenState]);
+
+  // Defaults first; caller/`modes` may still override Size/Appearance.
+  // Custom chrome that must ignore parent modes belongs in `trailing`.
   const sendButtonModes = (0, _react.useMemo)(() => ({
     ...DEFAULT_SEND_BUTTON_MODES,
     ...modes
@@ -239,12 +282,11 @@ const HelloJioInput = /*#__PURE__*/(0, _react.forwardRef)(function HelloJioInput
   const containerStyleArray = [tokens.containerStyle, hoverStyle, disabled ? {
     opacity: 0.5
   } : null, style];
-  const glassOverlay = (0, _figmaVariablesResolver.getVariableByName)('helloJioInput/background', modes) ?? STATE_FALLBACKS.IdleJioPlus.background;
   const inner = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [tokens.useGlass ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_GlassFill.default, {
       tint: "light",
       intensity: tokens.blurIntensity,
-      overlayColor: glassOverlay,
+      overlayColor: tokens.glassOverlay,
       androidTintWash: false
     }) : null, processedLeading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       accessibilityElementsHidden: true,

package/lib/commonjs/components/IconCapsule/IconCapsule.js

@@ -50,7 +50,7 @@ function resolveIconCapsuleTokens(modes) {
  * @param {Object} props - Component props
  * @param {string} [props.iconName="ic_card"] - The name of the icon to display from the icon registry
  * @param {UnifiedSource} [props.source] - Fallback source (remote URI, inline SVG XML, `require()` asset, SVG React component, or React element). Used when `iconName` is missing or unknown. Tinted with the mode-resolved icon color so it follows design tokens just like a built-in icon.
- * @param {Object} [props.modes={}] - Mode configuration for design tokens (e.g., {"Appearance": "Primary"})
+ * @param {Object} [props.modes={}] - Mode configuration for design tokens (e.g., {"AppearanceBrand": "Primary"})
  * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers
  * @param {string} [props.accessibilityRole] - Accessibility role (defaults to "image" for decorative icons)
  *

package/lib/commonjs/components/MetricData/MetricData.js

@@ -4,15 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+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 _Icon = _interopRequireDefault(require("../Icon/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); }
 const LINE_HEIGHT_RATIO = 1.2;
-const ICON_SIZE = 18;
 // Figma renders the value-row icon with no surrounding padding; the shared Icon
 // component pulls padding from `icon/padding/*` tokens, so we zero it here.
 const ICON_PADDING_RESET = {
@@ -25,9 +25,10 @@ const ICON_PADDING_RESET = {
  * MetricData — a compact, centered metric block.
  *
  * Stacks a small `title`, a prominent `value` (with an optional leading
- * `icon`), and a muted `caption`. Typography, colours, gaps and padding all
- * resolve from the `metricdata/*` design tokens. `title`, `caption` and `icon`
- * are optional; only `value` is shown by default.
+ * `icon` in a `value wrap` row), and a muted `caption`. Typography, colours,
+ * gaps and padding resolve from the `metricdata/*` design tokens; the leading
+ * glyph uses `icon/*`. `title`, `caption` and `icon` are optional — omit
+ * `icon` to keep the legacy text-only layout.
  *
  * @example
  * ```tsx
@@ -47,10 +48,16 @@ function MetricData({
   captionStyle,
   accessibilityLabel
 }) {
+  // Figma's Metricdata instance seeds Secondary on the nested Icon so the
+  // default glyph is brand purple (`#5d00b5`). Caller `modes` still win.
+  const iconModes = (0, _react.useMemo)(() => ({
+    AppearanceBrand: 'Secondary',
+    ...modes
+  }), [modes]);
   const titleColor = (0, _figmaVariablesResolver.getVariableByName)('metricdata/title/color', modes) ?? '#000000';
   const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('metricdata/title/fontfamily', modes) ?? 'JioType Var';
   const titleFontSize = (0, _figmaVariablesResolver.getVariableByName)('metricdata/title/fontsize', modes) ?? 12;
-  const titleFontWeight = String((0, _figmaVariablesResolver.getVariableByName)('metricdata/title/fontweight', modes) ?? 400);
+  const titleFontWeight = String((0, _figmaVariablesResolver.getVariableByName)('metricdata/title/fontweight', modes) ?? 500);
   const valueColor = (0, _figmaVariablesResolver.getVariableByName)('metricdata/value/color', modes) ?? '#000000';
   const valueFontFamily = (0, _figmaVariablesResolver.getVariableByName)('metricdata/value/fontfamily', modes) ?? 'JioType Var';
   const valueFontSize = (0, _figmaVariablesResolver.getVariableByName)('metricdata/value/fontsize', modes) ?? 20;
@@ -58,11 +65,16 @@ function MetricData({
   const captionColor = (0, _figmaVariablesResolver.getVariableByName)('metricdata/caption/color', modes) ?? '#777777';
   const captionFontFamily = (0, _figmaVariablesResolver.getVariableByName)('metricdata/caption/fontfamily', modes) ?? 'JioType Var';
   const captionFontSize = (0, _figmaVariablesResolver.getVariableByName)('metricdata/caption/fontsize', modes) ?? 12;
-  const captionFontWeight = String((0, _figmaVariablesResolver.getVariableByName)('metricdata/caption/fontweight', modes) ?? 500);
+  const captionFontWeight = String((0, _figmaVariablesResolver.getVariableByName)('metricdata/caption/fontweight', modes) ?? 400);
   const gap = (0, _figmaVariablesResolver.getVariableByName)('metricdata/gap', modes) ?? 4;
   const valueWrapGap = (0, _figmaVariablesResolver.getVariableByName)('metricdata/valueWrap/gap', modes) ?? 4;
   const paddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('metricdata/padding/horizontal', modes) ?? 10;
   const paddingVertical = (0, _figmaVariablesResolver.getVariableByName)('metricdata/padding/vertical', modes) ?? 10;
+
+  // Resolve via getVariableByName so extract-tokens picks up the new bindings;
+  // Icon reads the same tokens when color/size props are omitted.
+  const iconColor = (0, _figmaVariablesResolver.getVariableByName)('icon/color', iconModes) ?? '#5d00b5';
+  const iconSize = (0, _figmaVariablesResolver.getVariableByName)('icon/size', iconModes) ?? 18;
   const containerStyle = {
     flexDirection: 'column',
     alignItems: 'center',
@@ -97,11 +109,12 @@ function MetricData({
   };
   const iconNode = icon == null ? null : typeof icon === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
     iconName: icon,
-    size: ICON_SIZE,
-    color: valueColor,
-    modes: modes,
+    size: iconSize,
+    color: iconColor,
+    modes: iconModes,
     style: ICON_PADDING_RESET
-  }) : icon;
+  }) : (0, _reactUtils.cloneChildrenWithModes)(icon, iconModes);
+  const showValueWrap = iconNode != null || value !== undefined;
   const resolvedLabel = accessibilityLabel ?? ([title, typeof value === 'string' ? value : undefined, caption].filter(Boolean).join(', ') || undefined);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: [containerStyle, style],
@@ -112,7 +125,7 @@ function MetricData({
     children: [title !== undefined && title !== '' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: [titleTextStyle, titleStyle],
       children: title
-    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    }) : null, showValueWrap ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: {
         flexDirection: 'row',
         alignItems: 'center',
@@ -123,7 +136,7 @@ function MetricData({
         style: [valueTextStyle, valueStyle],
         children: value
       }) : value]
-    }), caption !== undefined && caption !== '' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+    }) : null, caption !== undefined && caption !== '' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: [captionTextStyle, captionStyle],
       children: caption
     }) : null]

package/lib/commonjs/components/MoneyValue/MoneyValue.js

@@ -181,7 +181,7 @@ function MoneyValue({
   }, [focused, cursorOpacity]);
 
   // Keyboard avoidance — lift the component when the keyboard would cover it.
-  // Follows the same pattern as ActionFooter (uses Keyboard.addListener).
+  // Uses Keyboard.addListener + measureInWindow overlap math (field-local).
   // Resets when editing ends or the keyboard hides.
   const rootRef = (0, _react.useRef)(null);
   const keyboardLift = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;

package/lib/commonjs/components/Nudge/Nudge.js

@@ -21,7 +21,7 @@ function toFontWeight(value, fallback) {
 }
 function resolveNudgeTokens(modes) {
   const background = (0, _figmaVariablesResolver.getVariableByName)('nudge/background', modes);
-  const radius = (0, _figmaVariablesResolver.getVariableByName)('nudge/radius', modes);
+  const radius = (0, _figmaVariablesResolver.getVariableByName)('nudge/borderRadius', modes);
   const paddingH = (0, _figmaVariablesResolver.getVariableByName)('nudge/padding/horizontal', modes);
   const paddingV = (0, _figmaVariablesResolver.getVariableByName)('nudge/padding/vertical', modes);
   const gap = (0, _figmaVariablesResolver.getVariableByName)('nudge/gap', modes);

package/lib/commonjs/components/PdpCcCard/PdpCcCard.js

@@ -13,12 +13,13 @@ var _Divider = _interopRequireDefault(require("../Divider/Divider"));
 var _Button = _interopRequireDefault(require("../Button/Button"));
 var _Image = _interopRequireDefault(require("../Image/Image"));
 var _Icon = _interopRequireDefault(require("../Icon/Icon"));
+var _MetricData = _interopRequireDefault(require("../MetricData/MetricData"));
 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); }
 /**
  * A single metric column inside the card's stats row: a small title, a bold
- * value and an optional muted caption.
+ * value (optionally preceded by an icon) and an optional muted caption.
  */
 
 /**
@@ -31,8 +32,9 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  *    `imageSource` for the default image or `media` for a full slot override.
  *  - **Title** — a centered headline + subtitle rendered through the shared
  *    {@link Title} component (`title/*`, `pageSubtitle/*` tokens).
- *  - **Metrics** — a row of {@link PdpCcCardMetric} columns (title / value /
- *    caption) separated by vertical `Divider`s (`metricdata/*` tokens).
+ *  - **Metrics** — a row of {@link PdpCcCardMetric} columns composed via
+ *    {@link MetricData} (title / optional icon + value / caption) separated by
+ *    vertical `Divider`s (`metricdata/*`, `icon/*` tokens).
  *  - **CTA** — a small tonal {@link Button} (`Button / Size: S`,
  *    `AppearanceBrand: Secondary`, `Emphasis: Medium`) with a leading icon.
  *
@@ -84,12 +86,16 @@ function PdpCcCard({
   const ctaNode = button ? (0, _reactUtils.cloneChildrenWithModes)(button, ctaModes) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
     label: buttonLabel,
     modes: ctaModes,
-    onPress: onButtonPress,
-    leading: buttonIcon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
-      iconName: buttonIcon,
-      size: tokens.buttonIconSize,
-      color: buttonForeground
-    }) : undefined
+    ...(onButtonPress !== undefined ? {
+      onPress: onButtonPress
+    } : null),
+    ...(buttonIcon ? {
+      leading: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+        iconName: buttonIcon,
+        size: tokens.buttonIconSize,
+        color: buttonForeground
+      })
+    } : null)
   });
   const content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
@@ -100,9 +106,15 @@ function PdpCcCard({
       subtitle: subtitle,
       textAlign: "Center",
       modes: modes,
-      numberOfLines: numberOfLines,
-      disableTruncation: disableTruncation,
-      singleLine: singleLine
+      ...(numberOfLines !== undefined ? {
+        numberOfLines
+      } : null),
+      ...(disableTruncation !== undefined ? {
+        disableTruncation
+      } : null),
+      ...(singleLine !== undefined ? {
+        singleLine
+      } : null)
     }), metrics.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: styles.metricsRow,
       children: metrics.map((metric, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.default.Fragment, {
@@ -110,9 +122,21 @@ function PdpCcCard({
           direction: "vertical",
           modes: modes,
           style: styles.metricDivider
-        }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(Metricdata, {
-          metric: metric,
-          tokens: tokens
+        }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_MetricData.default, {
+          ...(metric.title !== undefined ? {
+            title: metric.title
+          } : null),
+          ...(metric.value !== undefined ? {
+            value: metric.value
+          } : null),
+          ...(metric.caption !== undefined ? {
+            caption: metric.caption
+          } : null),
+          ...(metric.icon !== undefined ? {
+            icon: metric.icon
+          } : null),
+          modes: modes,
+          style: styles.metricCell
         })]
       }, index))
     }) : null, showButton ? ctaNode : null]
@@ -139,29 +163,6 @@ function PdpCcCard({
   });
 }
 
-// ---------------------------------------------------------------------------
-// Metricdata — internal metric column (Figma node 5352:256)
-// ---------------------------------------------------------------------------
-
-function Metricdata({
-  metric,
-  tokens
-}) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: tokens.metric,
-    children: [metric.title != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: tokens.metricTitle,
-      children: metric.title
-    }) : null, metric.value != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: tokens.metricValue,
-      children: metric.value
-    }) : null, metric.caption != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: tokens.metricCaption,
-      children: metric.caption
-    }) : null]
-  });
-}
-
 // ---------------------------------------------------------------------------
 // Tokens / static styles
 // ---------------------------------------------------------------------------
@@ -184,21 +185,6 @@ function resolveTokens(modes) {
   const gap = asNum((0, _figmaVariablesResolver.getVariableByName)('PDPcccard/gap', modes), 12);
   const imageRadius = asNum((0, _figmaVariablesResolver.getVariableByName)('image/radius', modes), 8);
   const buttonIconSize = asNum((0, _figmaVariablesResolver.getVariableByName)('button/iconSize', modes), 16);
-  const metricGap = asNum((0, _figmaVariablesResolver.getVariableByName)('metricdata/gap', modes), 4);
-  const metricPadH = asNum((0, _figmaVariablesResolver.getVariableByName)('metricdata/padding/horizontal', modes), 10);
-  const metricPadV = asNum((0, _figmaVariablesResolver.getVariableByName)('metricdata/padding/vertical', modes), 10);
-  const titleColor = asStr((0, _figmaVariablesResolver.getVariableByName)('metricdata/title/color', modes), '#000000');
-  const titleSize = asNum((0, _figmaVariablesResolver.getVariableByName)('metricdata/title/fontsize', modes), 12);
-  const titleFamily = asStr((0, _figmaVariablesResolver.getVariableByName)('metricdata/title/fontfamily', modes), 'JioType Var');
-  const titleWeight = asStr((0, _figmaVariablesResolver.getVariableByName)('metricdata/title/fontweight', modes), '400');
-  const valueColor = asStr((0, _figmaVariablesResolver.getVariableByName)('metricdata/value/color', modes), '#000000');
-  const valueSize = asNum((0, _figmaVariablesResolver.getVariableByName)('metricdata/value/fontsize', modes), 20);
-  const valueFamily = asStr((0, _figmaVariablesResolver.getVariableByName)('metricdata/value/fontfamily', modes), 'JioType Var');
-  const valueWeight = asStr((0, _figmaVariablesResolver.getVariableByName)('metricdata/value/fontweight', modes), '700');
-  const captionColor = asStr((0, _figmaVariablesResolver.getVariableByName)('metricdata/caption/color', modes), '#777777');
-  const captionSize = asNum((0, _figmaVariablesResolver.getVariableByName)('metricdata/caption/fontsize', modes), 12);
-  const captionFamily = asStr((0, _figmaVariablesResolver.getVariableByName)('metricdata/caption/fontfamily', modes), 'JioType Var');
-  const captionWeight = asStr((0, _figmaVariablesResolver.getVariableByName)('metricdata/caption/fontweight', modes), '500');
   return {
     container: {
       backgroundColor: background,
@@ -210,52 +196,19 @@ function resolveTokens(modes) {
       justifyContent: 'center'
     },
     imageRadius,
-    buttonIconSize,
-    metric: {
-      flex: 1,
-      gap: metricGap,
-      paddingHorizontal: metricPadH,
-      paddingVertical: metricPadV,
-      alignItems: 'center',
-      justifyContent: 'center'
-    },
-    metricTitle: {
-      color: titleColor,
-      fontSize: titleSize,
-      fontFamily: titleFamily,
-      fontWeight: titleWeight,
-      lineHeight: Math.round(titleSize * 1.2),
-      textAlign: 'center',
-      includeFontPadding: false
-    },
-    metricValue: {
-      color: valueColor,
-      fontSize: valueSize,
-      fontFamily: valueFamily,
-      fontWeight: valueWeight,
-      lineHeight: Math.round(valueSize * 1.2),
-      textAlign: 'center',
-      includeFontPadding: false
-    },
-    metricCaption: {
-      color: captionColor,
-      fontSize: captionSize,
-      fontFamily: captionFamily,
-      fontWeight: captionWeight,
-      lineHeight: Math.round(captionSize * 1.2),
-      textAlign: 'center',
-      includeFontPadding: false
-    }
+    buttonIconSize
   };
 }
 const DEFAULT_METRICS = [{
   title: 'Title',
   value: 'Value',
-  caption: 'caption'
+  caption: 'caption',
+  icon: 'ic_card'
 }, {
   title: 'Title',
   value: 'Value',
-  caption: 'caption'
+  caption: 'caption',
+  icon: 'ic_card'
 }];
 const styles = _reactNative.StyleSheet.create({
   mediaSlot: {
@@ -268,6 +221,9 @@ const styles = _reactNative.StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'stretch'
   },
+  metricCell: {
+    flex: 1
+  },
   metricDivider: {
     alignSelf: 'center',
     height: '70%'

package/lib/commonjs/components/PlanComparisonCard/PlanComparisonCard.js

@@ -44,6 +44,10 @@ const DEFAULT_ROWS = [{
   label: 'Bonus JioGold',
   showInfo: true,
   values: [false, '1%']
+}, {
+  label: 'Bonus JioSilver',
+  showInfo: true,
+  values: [false, '1%']
 }];
 
 /** Keeps every text layer on a single line. */
@@ -68,13 +72,15 @@ const planColumnStyle = {
  * current plan against one or more alternative plans across a set of feature
  * rows. Implementation of Figma node `4498:2968` (`PlanComparisonCard`).
  *
- * Columns use a 1.8fr / 1fr flex ratio (label vs plan), matching the Figma grid.
+ * Structure: header (from `columns`) + Slot (default table from `rows`, or
+ * custom `children`). Columns use a 1.8fr / 1fr flex ratio (label vs plan).
  *
  * @component
  */
 function PlanComparisonCard({
   columns = DEFAULT_COLUMNS,
   rows = DEFAULT_ROWS,
+  children,
   modes = _reactUtils.EMPTY_MODES,
   style
 }) {
@@ -171,6 +177,50 @@ function PlanComparisonCard({
     }
     return (0, _reactUtils.cloneChildrenWithModes)(value, modes);
   };
+  const defaultTable = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: {
+      width: '100%',
+      backgroundColor: tableBackground,
+      borderWidth: tableBorderSize,
+      borderColor: tableBorderColor,
+      borderRadius: tableRadius,
+      overflow: 'hidden'
+    },
+    children: rows.map((row, rowIndex) => {
+      const isLast = rowIndex === rows.length - 1;
+      const showInfo = row.showInfo || row.onInfoPress != null;
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: [rowStyle, {
+          borderBottomWidth: isLast ? 0 : cellBorderSize,
+          borderBottomColor: cellBorderColor
+        }],
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: [labelColumnStyle, labelCellStyle],
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: labelTextStyle,
+            children: row.label
+          }), showInfo && (row.onInfoPress ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+            onPress: row.onInfoPress,
+            accessibilityRole: "button",
+            accessibilityLabel: `More information about ${row.label}`,
+            hitSlop: 8,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+              name: "ic_info",
+              size: iconSize,
+              color: iconColor
+            })
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+            name: "ic_info",
+            size: iconSize,
+            color: iconColor
+          }))]
+        }), columns.map((column, colIndex) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: [planColumnStyle, valueCellStyle],
+          children: renderValue(row.values?.[colIndex], `${rowIndex}-${colIndex}`)
+        }, column.label ?? colIndex))]
+      }, row.key ?? `${row.label}-${rowIndex}`);
+    })
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: [{
       gap,
@@ -189,50 +239,7 @@ function PlanComparisonCard({
           children: column.label
         })
       }, column.label ?? index))]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: {
-        width: '100%',
-        backgroundColor: tableBackground,
-        borderWidth: tableBorderSize,
-        borderColor: tableBorderColor,
-        borderRadius: tableRadius,
-        overflow: 'hidden'
-      },
-      children: rows.map((row, rowIndex) => {
-        const isLast = rowIndex === rows.length - 1;
-        const showInfo = row.showInfo || row.onInfoPress != null;
-        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: [rowStyle, {
-            borderBottomWidth: isLast ? 0 : cellBorderSize,
-            borderBottomColor: cellBorderColor
-          }],
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: [labelColumnStyle, labelCellStyle],
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: labelTextStyle,
-              children: row.label
-            }), showInfo && (row.onInfoPress ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
-              onPress: row.onInfoPress,
-              accessibilityRole: "button",
-              accessibilityLabel: `More information about ${row.label}`,
-              hitSlop: 8,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
-                name: "ic_info",
-                size: iconSize,
-                color: iconColor
-              })
-            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
-              name: "ic_info",
-              size: iconSize,
-              color: iconColor
-            }))]
-          }), columns.map((column, colIndex) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            style: [planColumnStyle, valueCellStyle],
-            children: renderValue(row.values?.[colIndex], `${rowIndex}-${colIndex}`)
-          }, column.label ?? colIndex))]
-        }, row.key ?? `${row.label}-${rowIndex}`);
-      })
-    })]
+    }), children != null ? (0, _reactUtils.cloneChildrenWithModes)(children, modes) : defaultTable]
   });
 }
 var _default = exports.default = PlanComparisonCard;

package/lib/commonjs/components/PortfolioHero/PortfolioHero.js

@@ -18,7 +18,7 @@ function PortfolioHero({
   value = '12,000.11',
   currency = '₹',
   modes = {
-    Context3: 'Balance'
+    Context3: 'Balance & Cards'
   },
   children,
   style

package/lib/commonjs/components/Slider/Slider.js

@@ -391,9 +391,9 @@ function resolveTokens(modes) {
   const tooltipBackground = asStr((0, _figmaVariablesResolver.getVariableByName)('tooltip/background', modes), '#0f0d0a');
   const tooltipPaddingH = asNum((0, _figmaVariablesResolver.getVariableByName)('tooltip/padding/horizontal', modes), 12);
   const tooltipPaddingV = asNum((0, _figmaVariablesResolver.getVariableByName)('tooltip/padding/vertical', modes), 8);
-  // Not yet in Coin Variables export (Figma still binds bare local radius/maxWidth).
-  const tooltipRadius = asNum((0, _figmaVariablesResolver.getVariableByName)('tooltip/radius', modes), 8);
-  const tooltipMaxWidth = asNum((0, _figmaVariablesResolver.getVariableByName)('tooltip/maxWidth', modes), 280);
+  // Figma Tooltip binds bare local `radius` / `maxWidth` (not tooltip/*).
+  const tooltipRadius = Number((0, _figmaVariablesResolver.getVariableByName)('radius', modes));
+  const tooltipMaxWidth = Number((0, _figmaVariablesResolver.getVariableByName)('maxWidth', modes));
   const tipWidth = asNum((0, _figmaVariablesResolver.getVariableByName)('tooltip/tipItem/width', modes), 16);
   const tipHeight = asNum((0, _figmaVariablesResolver.getVariableByName)('tooltip/tipItem/height', modes), 8);
   const tooltipLabelColor = asStr((0, _figmaVariablesResolver.getVariableByName)('tooltip/label/color', modes), '#ffffff');