jfs-components 0.1.8 → 0.1.17

package/lib/module/components/OTP/OTP.js

@@ -319,18 +319,18 @@ function OTP({
   }, [isDisabled]);
 
   // --- Token resolution (state-independent tokens resolved once) ---
-  const otpGap = Number(getVariableByName('otp/gap', modes)) || 36;
-  const otpPaddingH = Number(getVariableByName('otp/padding/horizontal', modes)) || 8;
-  const otpPaddingV = Number(getVariableByName('otp/padding/vertical', modes)) || 8;
-  const slotWidth = Number(getVariableByName('pinSlot/width', modes)) || 48;
-  const slotGap = Number(getVariableByName('pinSlot/gap', modes)) || 8;
-  const digitColor = getVariableByName('pinSlot/digit/color', modes) || '#000000';
-  const digitFontSize = Number(getVariableByName('pinSlot/digit/fontSize', modes)) || 24;
-  const digitFontFamily = getVariableByName('pinSlot/digit/fontFamily', modes) || 'JioType Var';
-  const digitLineHeight = Number(getVariableByName('pinSlot/digit/lineHeight', modes)) || 29;
-  const digitFontWeight = getVariableByName('pinSlot/digit/fontWeight', modes) || '500';
-  const underlineHeight = Number(getVariableByName('pinSlot/underline/height', modes)) || 2;
-  const underlineRadius = Number(getVariableByName('pinSlot/underline/radius', modes)) || 1;
+  const otpGap = Number(getVariableByName('otp/gap', modes));
+  const otpPaddingH = Number(getVariableByName('otp/padding/horizontal', modes));
+  const otpPaddingV = Number(getVariableByName('otp/padding/vertical', modes));
+  const slotWidth = Number(getVariableByName('pinSlot/width', modes));
+  const slotGap = Number(getVariableByName('pinSlot/gap', modes));
+  const digitColor = getVariableByName('pinSlot/digit/color', modes);
+  const digitFontSize = Number(getVariableByName('pinSlot/digit/fontSize', modes));
+  const digitFontFamily = getVariableByName('pinSlot/digit/fontFamily', modes);
+  const digitLineHeight = Number(getVariableByName('pinSlot/digit/lineHeight', modes));
+  const digitFontWeight = getVariableByName('pinSlot/digit/fontWeight', modes);
+  const underlineHeight = Number(getVariableByName('pinSlot/underline/height', modes));
+  const underlineRadius = Number(getVariableByName('pinSlot/underline/radius', modes));
 
   // --- Resolve the three underline colors ONCE per render. We then
   // animate between idle ↔ active per-slot using interpolation; the
@@ -338,15 +338,15 @@ function OTP({
   const idleUnderlineColor = useMemo(() => getVariableByName('PinSlot/underline/color', {
     ...modes,
     'Input/PINSlot  States': 'Idle'
-  }) || '#303338', [modes]);
+  }), [modes]);
   const activeUnderlineColor = useMemo(() => getVariableByName('PinSlot/underline/color', {
     ...modes,
     'Input/PINSlot  States': 'Active'
-  }) || '#5d00b5', [modes]);
+  }), [modes]);
   const errorUnderlineColor = useMemo(() => getVariableByName('PinSlot/underline/color', {
     ...modes,
     'Input/PINSlot  States': 'Error'
-  }) || '#d92d20', [modes]);
+  }), [modes]);
 
   // --- Per-slot underline highlight animations ---
   //

package/lib/module/components/PageHero/PageHero.js

@@ -58,31 +58,31 @@ function PageHero({
     ...globalModes,
     ...propModes
   }), [globalModes, propModes]);
-  const gap = Number(getVariableByName('PageHero/gap', modes)) || 16;
-  const paddingHorizontal = Number(getVariableByName('PageHero/padding/horizontal', modes)) || 0;
-  const textWrapGap = Number(getVariableByName('PageHero/textWrap/gap', modes)) || 8;
+  const gap = Number(getVariableByName('PageHero/gap', modes));
+  const paddingHorizontal = Number(getVariableByName('PageHero/padding/horizontal', modes));
+  const textWrapGap = Number(getVariableByName('PageHero/textWrap/gap', modes));
 
   // Media slot box — matches the 117×117 frame in Figma (node 4540:7845).
   // Tokens fall back to 117 when not defined in the variables collection,
   // so the layout stays stable on consumers that haven't tokenized this yet.
-  const mediaWidth = Number(getVariableByName('media/width', modes)) || 117;
-  const mediaHeight = Number(getVariableByName('media/height', modes)) || 117;
-  const eyebrowColor = getVariableByName('PageHero/eyebrow/color', modes) || '#ffffff';
-  const eyebrowFontFamily = getVariableByName('PageHero/eyebrow/fontFamily', modes) || 'System';
-  const eyebrowFontSize = Number(getVariableByName('PageHero/eyebrow/fontSize', modes)) || 18;
-  const eyebrowFontWeight = getVariableByName('PageHero/eyebrow/fontWeight', modes) || 700;
-  const eyebrowLineHeight = Number(getVariableByName('PageHero/eyebrow/lineHeight', modes)) || 20;
-  const headlineColor = getVariableByName('PageHero/headline/color', modes) || '#ffffff';
-  const headlineFontFamily = getVariableByName('PageHero/headline/fontFamily', modes) || 'System';
-  const headlineFontSize = Number(getVariableByName('PageHero/headline/fontSize', modes)) || 29;
-  const headlineFontWeight = getVariableByName('PageHero/headline/fontWeight', modes) || 900;
-  const headlineLineHeight = Number(getVariableByName('PageHero/headline/lineHeight', modes)) || 29;
+  const mediaWidth = Number(getVariableByName('media/width', modes));
+  const mediaHeight = Number(getVariableByName('media/height', modes));
+  const eyebrowColor = getVariableByName('PageHero/eyebrow/color', modes);
+  const eyebrowFontFamily = getVariableByName('PageHero/eyebrow/fontFamily', modes);
+  const eyebrowFontSize = Number(getVariableByName('PageHero/eyebrow/fontSize', modes));
+  const eyebrowFontWeight = getVariableByName('PageHero/eyebrow/fontWeight', modes);
+  const eyebrowLineHeight = Number(getVariableByName('PageHero/eyebrow/lineHeight', modes));
+  const headlineColor = getVariableByName('PageHero/headline/color', modes);
+  const headlineFontFamily = getVariableByName('PageHero/headline/fontFamily', modes);
+  const headlineFontSize = Number(getVariableByName('PageHero/headline/fontSize', modes));
+  const headlineFontWeight = getVariableByName('PageHero/headline/fontWeight', modes);
+  const headlineLineHeight = Number(getVariableByName('PageHero/headline/lineHeight', modes));
 
   // Only `lineHeight` is tokenized for the supporting text in the Figma source.
   // Color, font size and weight are inline literals in the design (12px medium
   // white) — we mirror that here so the visual stays faithful when no token
   // exists.
-  const supportingTextLineHeight = Number(getVariableByName('PageHero/supportingText/lineHeight', modes)) || 16;
+  const supportingTextLineHeight = Number(getVariableByName('PageHero/supportingText/lineHeight', modes));
   const containerStyle = {
     flexDirection: 'column',
     alignItems: 'center',

package/lib/module/components/PaymentFeedback/PaymentFeedback.js

@@ -25,29 +25,29 @@ export default function PaymentFeedback({
     ...globalModes,
     ...propModes
   };
-  const containerGap = Number(getVariableByName('paymnetFeedback/container/gap', modes)) || 46;
-  const messageGap = Number(getVariableByName('paymnetFeedback/message/gap', modes)) || 12;
-  const titleColor = getVariableByName('paymnetFeedback/title/color', modes) || '#0d0d0f';
-  const titleFontSize = Number(getVariableByName('paymnetFeedback/title/fontSize', modes)) || 36;
-  const titleFontFamily = getVariableByName('paymnetFeedback/title/fontFamily', modes) || 'JioType Var';
-  const titleLineHeight = Number(getVariableByName('paymnetFeedback/title/lineHeight', modes)) || 36;
-  const titleFontWeight = getVariableByName('paymnetFeedback/title/fontWeight', modes) || '900';
-  const subtitleColor = getVariableByName('paymnetFeedback/subtitle/color', modes) || '#24262b';
-  const subtitleFontSize = Number(getVariableByName('paymnetFeedback/subtitle/fontSize', modes)) || 16;
-  const subtitleFontFamily = getVariableByName('paymnetFeedback/subtitle/fontFamily', modes) || 'JioType Var';
-  const subtitleLineHeight = Number(getVariableByName('paymnetFeedback/subtitle/lineHeight', modes)) || 19;
-  const subtitleFontWeight = getVariableByName('paymnetFeedback/subtitle/fontWeight', modes) || '500';
-  const bodyColor = getVariableByName('paymnetFeedback/body/color', modes) || '#24262b';
-  const bodyFontSize = Number(getVariableByName('paymnetFeedback/body/fontSize', modes)) || 14;
-  const bodyFontFamily = getVariableByName('paymnetFeedback/body/fontFamily', modes) || 'JioType Var';
-  const bodyLineHeight = Number(getVariableByName('paymnetFeedback/body/lineHeight', modes)) || 17;
-  const bodyFontWeight = getVariableByName('paymnetFeedback/body/fontWeight', modes) || '500';
-  const detailsColor = getVariableByName('paymnetFeedback/details/color', modes) || '#24262b';
-  const detailsFontSize = Number(getVariableByName('paymnetFeedback/details/fontSize', modes)) || 14;
-  const detailsFontFamily = getVariableByName('paymnetFeedback/details/fontFamily', modes) || 'JioType Var';
-  const detailsLineHeight = Number(getVariableByName('paymnetFeedback/details/lineHeight', modes)) || 17;
-  const detailsFontWeight = getVariableByName('paymnetFeedback/details/fontWeight', modes) || '500';
-  const detailsParagraphSpacing = Number(getVariableByName('paymnetFeedback/details/paragraphSpacing', modes)) || 4;
+  const containerGap = Number(getVariableByName('paymnetFeedback/container/gap', modes));
+  const messageGap = Number(getVariableByName('paymnetFeedback/message/gap', modes));
+  const titleColor = getVariableByName('paymnetFeedback/title/color', modes);
+  const titleFontSize = Number(getVariableByName('paymnetFeedback/title/fontSize', modes));
+  const titleFontFamily = getVariableByName('paymnetFeedback/title/fontFamily', modes);
+  const titleLineHeight = Number(getVariableByName('paymnetFeedback/title/lineHeight', modes));
+  const titleFontWeight = getVariableByName('paymnetFeedback/title/fontWeight', modes);
+  const subtitleColor = getVariableByName('paymnetFeedback/subtitle/color', modes);
+  const subtitleFontSize = Number(getVariableByName('paymnetFeedback/subtitle/fontSize', modes));
+  const subtitleFontFamily = getVariableByName('paymnetFeedback/subtitle/fontFamily', modes);
+  const subtitleLineHeight = Number(getVariableByName('paymnetFeedback/subtitle/lineHeight', modes));
+  const subtitleFontWeight = getVariableByName('paymnetFeedback/subtitle/fontWeight', modes);
+  const bodyColor = getVariableByName('paymnetFeedback/body/color', modes);
+  const bodyFontSize = Number(getVariableByName('paymnetFeedback/body/fontSize', modes));
+  const bodyFontFamily = getVariableByName('paymnetFeedback/body/fontFamily', modes);
+  const bodyLineHeight = Number(getVariableByName('paymnetFeedback/body/lineHeight', modes));
+  const bodyFontWeight = getVariableByName('paymnetFeedback/body/fontWeight', modes);
+  const detailsColor = getVariableByName('paymnetFeedback/details/color', modes);
+  const detailsFontSize = Number(getVariableByName('paymnetFeedback/details/fontSize', modes));
+  const detailsFontFamily = getVariableByName('paymnetFeedback/details/fontFamily', modes);
+  const detailsLineHeight = Number(getVariableByName('paymnetFeedback/details/lineHeight', modes));
+  const detailsFontWeight = getVariableByName('paymnetFeedback/details/fontWeight', modes);
+  const detailsParagraphSpacing = Number(getVariableByName('paymnetFeedback/details/paragraphSpacing', modes));
   const containerStyle = {
     flexDirection: 'column',
     alignItems: 'center',

package/lib/module/components/Popup/Popup.js

@@ -83,7 +83,7 @@ const Popup = /*#__PURE__*/forwardRef(function Popup({
     });
     return () => anim.stop();
   }, [isOpen, modalVisible, slideY, backdropAnim, maxBackdropOpacity, animationDuration]);
-  const background = getVariableByName('popup/background', modes) || '#ffffff';
+  const background = getVariableByName('popup/background', modes);
   const paddingH = getVariableByName('popup/padding/horizontal', modes) ?? 0;
   const paddingTopVal = getVariableByName('popup/padding/top', modes) ?? 0;
   const paddingBottomVal = getVariableByName('popup/padding/bottom', modes) ?? 24;

package/lib/module/components/PoweredByLabel/PoweredByLabel.js

@@ -4,7 +4,7 @@ import React, { useMemo } from 'react';
 import { Text, View } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { useTokens } from '../../design-tokens/JFSThemeProvider';
-import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
+import { EMPTY_MODES, cloneChildrenWithModes, resolveTruncation } from '../../utils/react-utils';
 import MediaSource from '../../utils/MediaSource';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Default bundled FINVU brand logo, matching the Figma reference so the
@@ -56,7 +56,8 @@ function PoweredByLabel({
   style,
   textStyle,
   imageStyle,
-  accessibilityLabel
+  accessibilityLabel,
+  disableTruncation
 }) {
   const {
     modes: globalModes
@@ -121,7 +122,7 @@ function PoweredByLabel({
       style: [labelTextStyle, textStyle],
       accessibilityElementsHidden: true,
       importantForAccessibility: "no",
-      numberOfLines: 1,
+      ...resolveTruncation(disableTruncation, 1),
       children: label
     }), renderImage()]
   });

package/lib/module/components/ProductMerchandisingCard/ProductMerchandisingCard.js

@@ -1,16 +1,23 @@
 "use strict";
 
 import React, { useId, useMemo } from 'react';
-import { View, Text, Pressable, StyleSheet } from 'react-native';
+import { View, Text, Pressable, StyleSheet, Platform, Image as RNImage } from 'react-native';
+import MaskedView from '@react-native-masked-view/masked-view';
 import Svg, { Defs, LinearGradient, Stop, Rect } from 'react-native-svg';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
-import { EMPTY_MODES } from '../../utils/react-utils';
+import { EMPTY_MODES, resolveTruncation } from '../../utils/react-utils';
 import Avatar from '../Avatar/Avatar';
 import Badge from '../Badge/Badge';
 import Button from '../Button/Button';
 import Image from '../Image/Image';
-import GlassFill from './GlassFill';
+import GlassFill from '../../utils/GlassFill/GlassFill';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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
@@ -51,11 +58,15 @@ function ProductMerchandisingCard({
   height = 223,
   modes = 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 = 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 = useMemo(() => normalizeImageSource(imageSource), [imageSource]);
   const tokens = useMemo(() => resolveTokens(modes), [modes]);
   const containerStyle = {
     height,
@@ -92,21 +103,25 @@ function ProductMerchandisingCard({
     monogram: avatarMonogram,
     modes: avatarModes
   }) : null;
-  const footerSpecialBadge = specialBadge ?? (specialBadgeLabel != null ? /*#__PURE__*/_jsxs(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__*/_jsx(Badge, {
+    type: "glass",
+    label: specialBadgeLabel,
+    leading: specialBadgeIcon,
+    glassOverlayColor: SPECIAL_BADGE_BG,
+    glassIntensity: SPECIAL_BADGE_INTENSITY,
+    modes: modes,
     style: styles.specialBadge,
-    children: [/*#__PURE__*/_jsx(GlassFill, {
-      tint: "light",
-      intensity: SPECIAL_BADGE_INTENSITY,
-      overlayColor: SPECIAL_BADGE_BG,
-      style: styles.specialBadgeFill
-    }), specialBadgeIcon != null ? /*#__PURE__*/_jsx(View, {
-      style: styles.specialBadgeIcon,
-      children: specialBadgeIcon
-    }) : null, /*#__PURE__*/_jsx(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
@@ -141,7 +156,62 @@ function ProductMerchandisingCard({
     }), /*#__PURE__*/_jsxs(View, {
       style: tokens.footer,
       pointerEvents: "box-none",
-      children: [/*#__PURE__*/_jsx(GlassFill, {
+      children: [normalizedImageSource != null ? /*#__PURE__*/_jsx(View, {
+        style: StyleSheet.absoluteFill,
+        pointerEvents: "none",
+        children: /*#__PURE__*/_jsx(MaskedView, {
+          style: StyleSheet.absoluteFill,
+          maskElement: /*#__PURE__*/_jsxs(Svg, {
+            width: "100%",
+            height: "100%",
+            children: [/*#__PURE__*/_jsx(Defs, {
+              children: /*#__PURE__*/_jsxs(LinearGradient, {
+                id: blurMaskId,
+                x1: "0",
+                y1: "0",
+                x2: "0",
+                y2: "1",
+                children: [/*#__PURE__*/_jsx(Stop, {
+                  offset: "0",
+                  stopColor: "#000000",
+                  stopOpacity: 0
+                }), /*#__PURE__*/_jsx(Stop, {
+                  offset: "0.35",
+                  stopColor: "#000000",
+                  stopOpacity: 0.5
+                }), /*#__PURE__*/_jsx(Stop, {
+                  offset: "0.7",
+                  stopColor: "#000000",
+                  stopOpacity: 0.92
+                }), /*#__PURE__*/_jsx(Stop, {
+                  offset: "1",
+                  stopColor: "#000000",
+                  stopOpacity: 1
+                })]
+              })
+            }), /*#__PURE__*/_jsx(Rect, {
+              x: "0",
+              y: "0",
+              width: "100%",
+              height: "100%",
+              fill: `url(#${blurMaskId})`
+            })]
+          }),
+          children: /*#__PURE__*/_jsx(RNImage, {
+            source: normalizedImageSource,
+            blurRadius: tokens.imageBlurRadius,
+            resizeMode: "cover",
+            style: {
+              position: 'absolute',
+              left: 0,
+              right: 0,
+              bottom: 0,
+              width: '100%',
+              height
+            }
+          })
+        })
+      }) : /*#__PURE__*/_jsx(GlassFill, {
         tint: "dark",
         intensity: tokens.blurIntensity,
         progressive: true
@@ -182,11 +252,11 @@ function ProductMerchandisingCard({
           style: tokens.textWrap,
           children: [/*#__PURE__*/_jsx(Text, {
             style: tokens.title,
-            numberOfLines: 1,
+            ...resolveTruncation(disableTruncation, 1),
             children: title
           }), subtitle != null ? /*#__PURE__*/_jsx(Text, {
             style: tokens.subtitle,
-            numberOfLines: 1,
+            ...resolveTruncation(disableTruncation, 1),
             children: subtitle
           }) : null]
         }), footerCta]
@@ -257,9 +327,20 @@ function resolveTokens(modes) {
   const sbSize = asNum(getVariableByName('productMerchandisingcard/specialbadge/text/fontsize', modes), 12);
   const sbFamily = asStr(getVariableByName('productMerchandisingcard/specialbadge/text/fontfamily', modes), 'JioType Var');
   const sbWeight = asStr(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 = 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',
@@ -323,23 +404,16 @@ const styles = 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/module/components/ProductOverview/ProductOverview.js

@@ -3,7 +3,7 @@
 import React from 'react';
 import { View, Text } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
-import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
+import { EMPTY_MODES, cloneChildrenWithModes, resolveTruncation } from '../../utils/react-utils';
 import Image from '../Image/Image';
 import ProductLabel from '../ProductLabel/ProductLabel';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
@@ -24,7 +24,8 @@ const ProductOverview = ({
   stats = DEFAULT_STATS,
   modes = EMPTY_MODES,
   style,
-  children
+  children,
+  disableTruncation
 }) => {
   const padding = getVariableByName('productOverview/padding', modes) ?? 24;
   const gap = getVariableByName('productOverview/gap', modes) ?? 12;
@@ -128,11 +129,11 @@ const ProductOverview = ({
         },
         children: [/*#__PURE__*/_jsx(Text, {
           style: statValueStyle,
-          numberOfLines: 1,
+          ...resolveTruncation(disableTruncation, 1),
           children: stat.value
         }), /*#__PURE__*/_jsx(Text, {
           style: statLabelStyle,
-          numberOfLines: 1,
+          ...resolveTruncation(disableTruncation, 1),
           children: stat.label
         })]
       }, `${stat.label}-${index}`))

package/lib/module/components/ProgressBadge/ProgressBadge.js

@@ -4,7 +4,7 @@ import React from 'react';
 import { View, Text } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import Icon from '../../icons/Icon';
-import { EMPTY_MODES } from '../../utils/react-utils';
+import { EMPTY_MODES, resolveTruncation } from '../../utils/react-utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * ProgressBadge component that displays an icon, text, and an internal progress bar.
@@ -29,11 +29,12 @@ function ProgressBadge({
   style,
   textStyle: textStyleOverride,
   accessibilityLabel,
+  disableTruncation,
   ...rest
 }) {
   // Resolve layout tokens
-  const backgroundColor = getVariableByName('progressBadge/background', modes) || '#ffffff';
-  const progressColor = getVariableByName('progressBadge/progress/color', modes) || '#ebebed';
+  const backgroundColor = getVariableByName('progressBadge/background', modes);
+  const progressColor = getVariableByName('progressBadge/progress/color', modes);
   const gap = getVariableByName('progressBadge/gap', modes) ?? 12;
   const paddingHorizontal = getVariableByName('progressBadge/padding/horizontal', modes) ?? 16;
   const paddingVertical = getVariableByName('progressBadge/padding/vertical', modes) ?? 6;
@@ -41,15 +42,15 @@ function ProgressBadge({
   const descriptionGap = getVariableByName('progressBadge/description/gap', modes) ?? 8;
 
   // Resolve typography tokens
-  const fontFamily = getVariableByName('progressBadge/fontFamily', modes) || 'JioType_Var:Medium';
+  const fontFamily = getVariableByName('progressBadge/fontFamily', modes);
   const fontWeightRaw = getVariableByName('progressBadge/fontWeight', modes) ?? 500;
   const fontWeight = typeof fontWeightRaw === 'number' ? fontWeightRaw.toString() : fontWeightRaw;
   const fontSize = getVariableByName('progressBadge/fontSize', modes) ?? 14;
   const lineHeight = getVariableByName('progressBadge/lineHeight', modes) ?? 17;
-  const textColor = getVariableByName('progressBadge/foreground', modes) || '#000000';
+  const textColor = getVariableByName('progressBadge/foreground', modes);
 
   // Resolve icon tokens
-  const iconColor = getVariableByName('progressBadge/icon/color', modes) || '#f50030';
+  const iconColor = getVariableByName('progressBadge/icon/color', modes);
   const iconSize = getVariableByName('progressBadge/icon/size', modes) ?? 18;
   const containerStyle = {
     backgroundColor,
@@ -114,8 +115,7 @@ function ProgressBadge({
         importantForAccessibility: "no"
       }) : null, /*#__PURE__*/_jsx(Text, {
         style: [textStyle, textStyleOverride],
-        numberOfLines: 1,
-        ellipsizeMode: "tail",
+        ...resolveTruncation(disableTruncation, 1, 'tail'),
         accessibilityElementsHidden: true,
         importantForAccessibility: "no",
         children: taskName

package/lib/module/components/ProjectionMarker/ProjectionMarker.js

@@ -3,7 +3,7 @@
 import React from 'react';
 import { View, Text } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
-import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
+import { EMPTY_MODES, cloneChildrenWithModes, resolveTruncation } from '../../utils/react-utils';
 import Divider from '../Divider/Divider';
 
 /**
@@ -53,7 +53,8 @@ function ProjectionMarker({
   badgeStyle,
   durationStyle,
   rateStyle,
-  accessibilityLabel
+  accessibilityLabel,
+  disableTruncation
 }) {
   const titleColor = getVariableByName('projectionMarker/title/color', modes) ?? '#000000';
   const titleFontFamily = getVariableByName('projectionMarker/title/fontfamily', modes) ?? 'JioType Var';
@@ -85,7 +86,7 @@ function ProjectionMarker({
     if (isTextValue(value)) {
       return /*#__PURE__*/_jsx(Text, {
         style: [titleTextStyle, overrideStyle],
-        numberOfLines: 1,
+        ...resolveTruncation(disableTruncation, 1),
         children: value
       });
     }

package/lib/module/components/Radio/Radio.js

@@ -1,9 +1,10 @@
 "use strict";
 
 import React, { forwardRef, useState } from 'react';
-import { Pressable, View, Platform } from 'react-native';
+import { Pressable, View } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { EMPTY_MODES } from '../../utils/react-utils';
+import { boxShadow } from '../../utils/shadow';
 
 // ---------------------------------------------------------------------------
 // Props
@@ -27,9 +28,9 @@ export const Radio = /*#__PURE__*/forwardRef(function Radio({
   const [pressed, setPressed] = useState(false);
 
   // ---- Dimensions ----
-  const widthStr = getVariableByName('radio/width', modes) || '18';
-  const heightStr = getVariableByName('radio/height', modes) || '18';
-  const selectorSizeStr = getVariableByName('radio/selector/size', modes) || '10';
+  const widthStr = getVariableByName('radio/width', modes);
+  const heightStr = getVariableByName('radio/height', modes);
+  const selectorSizeStr = getVariableByName('radio/selector/size', modes);
   const width = parseFloat(widthStr?.toString() || '18');
   const height = parseFloat(heightStr?.toString() || '18');
   const selectorSize = parseFloat(selectorSizeStr?.toString() || '10');
@@ -66,7 +67,7 @@ export const Radio = /*#__PURE__*/forwardRef(function Radio({
   // ---- Colors & Border ----
 
   const resolveColor = (path, fallback) => {
-    return getVariableByName(path, modes) || fallback;
+    return getVariableByName(path, modes);
   };
 
   // Background Color
@@ -120,10 +121,9 @@ export const Radio = /*#__PURE__*/forwardRef(function Radio({
     backgroundColor,
     justifyContent: 'center',
     alignItems: 'center',
-    // Web shadow (ring)
-    ...(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 ? boxShadow(`0px 0px 0px ${shadowSize}px ${shadowColor}`) : {})
   };
   const selectorStyle = {
     width: selectorSize,