jfs-components 0.1.8 → 0.1.17

package/src/components/OTP/OTP.tsx

@@ -456,19 +456,19 @@ 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) as string) || '#000000'
-    const digitFontSize = Number(getVariableByName('pinSlot/digit/fontSize', modes)) || 24
-    const digitFontFamily = (getVariableByName('pinSlot/digit/fontFamily', modes) as string) || 'JioType Var'
-    const digitLineHeight = Number(getVariableByName('pinSlot/digit/lineHeight', modes)) || 29
-    const digitFontWeight = (getVariableByName('pinSlot/digit/fontWeight', modes) as string) || '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) as string)
+    const digitFontSize = Number(getVariableByName('pinSlot/digit/fontSize', modes))
+    const digitFontFamily = (getVariableByName('pinSlot/digit/fontFamily', modes) as string)
+    const digitLineHeight = Number(getVariableByName('pinSlot/digit/lineHeight', modes))
+    const digitFontWeight = (getVariableByName('pinSlot/digit/fontWeight', modes) as string)
+    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
@@ -478,7 +478,7 @@ function OTP({
             (getVariableByName('PinSlot/underline/color', {
                 ...modes,
                 'Input/PINSlot  States': 'Idle',
-            }) as string) || '#303338',
+            }) as string),
         [modes],
     )
     const activeUnderlineColor = useMemo(
@@ -486,7 +486,7 @@ function OTP({
             (getVariableByName('PinSlot/underline/color', {
                 ...modes,
                 'Input/PINSlot  States': 'Active',
-            }) as string) || '#5d00b5',
+            }) as string),
         [modes],
     )
     const errorUnderlineColor = useMemo(
@@ -494,7 +494,7 @@ function OTP({
             (getVariableByName('PinSlot/underline/color', {
                 ...modes,
                 'Input/PINSlot  States': 'Error',
-            }) as string) || '#d92d20',
+            }) as string),
         [modes],
     )
 

package/src/components/PageHero/PageHero.tsx

@@ -107,47 +107,47 @@ function PageHero({
     [globalModes, propModes]
   )
 
-  const gap = Number(getVariableByName('PageHero/gap', modes)) || 16
+  const gap = Number(getVariableByName('PageHero/gap', modes))
   const paddingHorizontal =
-    Number(getVariableByName('PageHero/padding/horizontal', modes)) || 0
+    Number(getVariableByName('PageHero/padding/horizontal', modes))
 
   const textWrapGap =
-    Number(getVariableByName('PageHero/textWrap/gap', modes)) || 8
+    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 mediaWidth = Number(getVariableByName('media/width', modes))
+  const mediaHeight = Number(getVariableByName('media/height', modes))
 
   const eyebrowColor =
-    getVariableByName('PageHero/eyebrow/color', modes) || '#ffffff'
+    getVariableByName('PageHero/eyebrow/color', modes)
   const eyebrowFontFamily =
-    getVariableByName('PageHero/eyebrow/fontFamily', modes) || 'System'
+    getVariableByName('PageHero/eyebrow/fontFamily', modes)
   const eyebrowFontSize =
-    Number(getVariableByName('PageHero/eyebrow/fontSize', modes)) || 18
+    Number(getVariableByName('PageHero/eyebrow/fontSize', modes))
   const eyebrowFontWeight =
-    getVariableByName('PageHero/eyebrow/fontWeight', modes) || 700
+    getVariableByName('PageHero/eyebrow/fontWeight', modes)
   const eyebrowLineHeight =
-    Number(getVariableByName('PageHero/eyebrow/lineHeight', modes)) || 20
+    Number(getVariableByName('PageHero/eyebrow/lineHeight', modes))
 
   const headlineColor =
-    getVariableByName('PageHero/headline/color', modes) || '#ffffff'
+    getVariableByName('PageHero/headline/color', modes)
   const headlineFontFamily =
-    getVariableByName('PageHero/headline/fontFamily', modes) || 'System'
+    getVariableByName('PageHero/headline/fontFamily', modes)
   const headlineFontSize =
-    Number(getVariableByName('PageHero/headline/fontSize', modes)) || 29
+    Number(getVariableByName('PageHero/headline/fontSize', modes))
   const headlineFontWeight =
-    getVariableByName('PageHero/headline/fontWeight', modes) || 900
+    getVariableByName('PageHero/headline/fontWeight', modes)
   const headlineLineHeight =
-    Number(getVariableByName('PageHero/headline/lineHeight', modes)) || 29
+    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
+    Number(getVariableByName('PageHero/supportingText/lineHeight', modes))
 
   const containerStyle: ViewStyle = {
     flexDirection: 'column',

package/src/components/PaymentFeedback/PaymentFeedback.tsx

@@ -44,33 +44,33 @@ export default function PaymentFeedback({
   const { modes: globalModes } = useTokens()
   const modes = { ...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: ViewStyle = {
     flexDirection: 'column',

package/src/components/Popup/Popup.tsx

@@ -133,7 +133,7 @@ const Popup = forwardRef<PopupRef, PopupProps>(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/src/components/PoweredByLabel/PoweredByLabel.tsx

@@ -9,7 +9,7 @@ import {
 } 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, { type UnifiedSource } from '../../utils/MediaSource'
 import type { Modes } from '../../design-tokens'
 
@@ -65,6 +65,12 @@ export type PoweredByLabelProps = {
      * (which is decorative) does not need to be announced separately.
      */
     accessibilityLabel?: string
+    /**
+     * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+     * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+     * lines as it needs even when horizontal space is tight.
+     */
+    disableTruncation?: boolean
 }
 
 const toNumber = (value: unknown, fallback: number): number => {
@@ -115,6 +121,7 @@ function PoweredByLabel({
     textStyle,
     imageStyle,
     accessibilityLabel,
+    disableTruncation,
 }: PoweredByLabelProps) {
     const { modes: globalModes } = useTokens()
     const modes = useMemo(
@@ -210,7 +217,7 @@ function PoweredByLabel({
                 style={[labelTextStyle, textStyle]}
                 accessibilityElementsHidden={true}
                 importantForAccessibility="no"
-                numberOfLines={1}
+                {...resolveTruncation(disableTruncation, 1)}
             >
                 {label}
             </Text>

package/src/components/ProductMerchandisingCard/ProductMerchandisingCard.tsx

@@ -4,21 +4,31 @@ import {
     Text,
     Pressable,
     StyleSheet,
+    Platform,
+    Image as RNImage,
     type ViewStyle,
     type TextStyle,
     type StyleProp,
     type ImageSourcePropType,
 } 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 type { Modes } from '../../design-tokens'
 
+function normalizeImageSource(
+    src: ImageSourcePropType | string | undefined
+): ImageSourcePropType | undefined {
+    if (src == null) return undefined
+    return typeof src === 'string' ? { uri: src } : src
+}
+
 export interface ProductMerchandisingCardProps {
     /**
      * Background media for the card. Accepts a URL string or any RN
@@ -73,6 +83,12 @@ export interface ProductMerchandisingCardProps {
     style?: StyleProp<ViewStyle>
     /** Accessibility label for the card. */
     accessibilityLabel?: string
+    /**
+     * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+     * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+     * lines as it needs even when horizontal space is tight.
+     */
+    disableTruncation?: boolean
 }
 
 /**
@@ -116,10 +132,15 @@ function ProductMerchandisingCard({
     modes = EMPTY_MODES,
     style,
     accessibilityLabel,
+    disableTruncation,
 }: ProductMerchandisingCardProps) {
-    // 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])
 
@@ -159,23 +180,26 @@ function ProductMerchandisingCard({
           )
         : null
 
+    // The footer "special badge" is now the shared <Badge type="glass">. The
+    // hardcoded literals that defined its look (warm frosted overlay, gentle
+    // 5px blur, 6/2 padding, 4px radius, weight-500 white label) are preserved
+    // 1:1 via the glass overrides + `style`/`labelStyle`, and the optional
+    // `specialBadgeIcon` maps to Badge's `leading` slot — so every existing
+    // instantiation renders byte-for-byte the same as before.
     const footerSpecialBadge =
         specialBadge ??
         (specialBadgeLabel != null ? (
-            <View style={styles.specialBadge}>
-                <GlassFill
-                    tint="light"
-                    intensity={SPECIAL_BADGE_INTENSITY}
-                    overlayColor={SPECIAL_BADGE_BG}
-                    style={styles.specialBadgeFill}
-                />
-                {specialBadgeIcon != null ? (
-                    <View style={styles.specialBadgeIcon}>{specialBadgeIcon}</View>
-                ) : null}
-                <Text style={tokens.specialBadgeText} numberOfLines={1}>
-                    {specialBadgeLabel}
-                </Text>
-            </View>
+            <Badge
+                type="glass"
+                label={specialBadgeLabel}
+                leading={specialBadgeIcon}
+                glassOverlayColor={SPECIAL_BADGE_BG}
+                glassIntensity={SPECIAL_BADGE_INTENSITY}
+                modes={modes}
+                style={styles.specialBadge}
+                labelStyle={tokens.specialBadgeText}
+                {...(disableTruncation != null ? { disableTruncation } : null)}
+            />
         ) : null)
 
     // The Figma CTA uses the brand "Secondary" appearance (purple fill, white
@@ -209,11 +233,49 @@ function ProductMerchandisingCard({
             </View>
 
             <View style={tokens.footer} pointerEvents="box-none">
-                {/* Progressive background blur: clear at the top, ramping to a
-                    soft blur at the bottom (native MaskedView+BlurView / web
-                    backdrop-filter + mask-image). */}
-                <GlassFill tint="dark" intensity={tokens.blurIntensity} progressive />
-                {/* Transparent -> black gradient scrim, identical on all platforms. */}
+                {/* Progressive blur — clear at the top of the footer, ramping to
+                    a soft blur at the bottom. Rather than the unmaintained native
+                    BlurView (which renders as a flat black tint on Android +
+                    Fabric and can hide the image on iOS), we reveal a *blurred
+                    copy of the card's own image* through a vertical gradient
+                    mask. `Image.blurRadius` is a built-in RN prop with a real
+                    Gaussian blur on BOTH iOS and Android and needs no native
+                    module. The blurred copy is pinned to the card's bottom at the
+                    full card height so it lines up pixel-for-pixel with the
+                    full-bleed background, and the mask makes the blur swell in
+                    smoothly toward the bottom (true progressive blur). */}
+                {normalizedImageSource != null ? (
+                    <View style={StyleSheet.absoluteFill} pointerEvents="none">
+                        <MaskedView
+                            style={StyleSheet.absoluteFill}
+                            maskElement={
+                                <Svg width="100%" height="100%">
+                                    <Defs>
+                                        <LinearGradient id={blurMaskId} x1="0" y1="0" x2="0" y2="1">
+                                            <Stop offset="0" stopColor="#000000" stopOpacity={0} />
+                                            <Stop offset="0.35" stopColor="#000000" stopOpacity={0.5} />
+                                            <Stop offset="0.7" stopColor="#000000" stopOpacity={0.92} />
+                                            <Stop offset="1" stopColor="#000000" stopOpacity={1} />
+                                        </LinearGradient>
+                                    </Defs>
+                                    <Rect x="0" y="0" width="100%" height="100%" fill={`url(#${blurMaskId})`} />
+                                </Svg>
+                            }
+                        >
+                            <RNImage
+                                source={normalizedImageSource}
+                                blurRadius={tokens.imageBlurRadius}
+                                resizeMode="cover"
+                                style={{ position: 'absolute', left: 0, right: 0, bottom: 0, width: '100%', height }}
+                            />
+                        </MaskedView>
+                    </View>
+                ) : (
+                    <GlassFill tint="dark" intensity={tokens.blurIntensity} progressive />
+                )}
+                {/* Transparent -> black gradient scrim for text legibility,
+                    identical on all platforms. Kept lighter than a solid fill so
+                    the blurred image stays visible behind the footer text. */}
                 <View style={[StyleSheet.absoluteFill, styles.scrim]} pointerEvents="none">
                     <Svg width="100%" height="100%">
                         <Defs>
@@ -230,11 +292,11 @@ function ProductMerchandisingCard({
 
                 <View style={styles.footerRow}>
                     <View style={tokens.textWrap}>
-                        <Text style={tokens.title} numberOfLines={1}>
+                        <Text style={tokens.title} {...resolveTruncation(disableTruncation, 1)}>
                             {title}
                         </Text>
                         {subtitle != null ? (
-                            <Text style={tokens.subtitle} numberOfLines={1}>
+                            <Text style={tokens.subtitle} {...resolveTruncation(disableTruncation, 1)}>
                                 {subtitle}
                             </Text>
                         ) : null}
@@ -286,6 +348,7 @@ const SPECIAL_BADGE_INTENSITY = 17 // ~5px CSS blur / ~2 native blurAmount
 interface ResolvedTokens {
     radius: number
     blurIntensity: number
+    imageBlurRadius: number
     header: ViewStyle
     footer: ViewStyle
     textWrap: ViewStyle
@@ -331,9 +394,20 @@ function resolveTokens(modes: Modes): ResolvedTokens {
     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)),
+    }) as number
+
     return {
         radius,
         blurIntensity: Math.max(0, Math.min(100, Math.round(blurRadius * BLUR_INTENSITY_FACTOR))),
+        imageBlurRadius,
         header: {
             flexDirection: 'row',
             alignItems: 'flex-start',
@@ -398,22 +472,15 @@ 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/src/components/ProductOverview/ProductOverview.tsx

@@ -8,7 +8,7 @@ import {
     type ImageSourcePropType,
 } 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 type { Modes } from '../../design-tokens'
@@ -47,6 +47,12 @@ export type ProductOverviewProps = {
      * for badges, callouts, etc. Receives the same `modes` as the parent.
      */
     children?: React.ReactNode
+    /**
+     * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+     * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+     * lines as it needs even when horizontal space is tight.
+     */
+    disableTruncation?: boolean
 }
 
 const DEFAULT_STATS: ProductOverviewStat[] = [
@@ -65,6 +71,7 @@ const ProductOverview = ({
     modes = EMPTY_MODES,
     style,
     children,
+    disableTruncation,
 }: ProductOverviewProps) => {
     const padding = (getVariableByName('productOverview/padding', modes) as number | null) ?? 24
     const gap = (getVariableByName('productOverview/gap', modes) as number | null) ?? 12
@@ -220,10 +227,10 @@ const ProductOverview = ({
                                 overflow: 'hidden',
                             }}
                         >
-                            <Text style={statValueStyle} numberOfLines={1}>
+                            <Text style={statValueStyle} {...resolveTruncation(disableTruncation, 1)}>
                                 {stat.value}
                             </Text>
-                            <Text style={statLabelStyle} numberOfLines={1}>
+                            <Text style={statLabelStyle} {...resolveTruncation(disableTruncation, 1)}>
                                 {stat.label}
                             </Text>
                         </View>

package/src/components/ProgressBadge/ProgressBadge.tsx

@@ -8,7 +8,7 @@ import {
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import Icon from '../../icons/Icon'
-import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import { EMPTY_MODES, cloneChildrenWithModes, resolveTruncation } from '../../utils/react-utils'
 import type { Modes } from '../../design-tokens'
 
 export type ProgressBadgeProps = {
@@ -26,6 +26,12 @@ export type ProgressBadgeProps = {
     textStyle?: StyleProp<TextStyle>
     /** Accessibility label for screen readers */
     accessibilityLabel?: string
+    /**
+     * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+     * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+     * lines as it needs even when horizontal space is tight.
+     */
+    disableTruncation?: boolean
 } & React.ComponentProps<typeof View>
 
 /**
@@ -51,13 +57,14 @@ function ProgressBadge({
     style,
     textStyle: textStyleOverride,
     accessibilityLabel,
+    disableTruncation,
     ...rest
 }: ProgressBadgeProps) {
     // Resolve layout tokens
     const backgroundColor =
-        getVariableByName('progressBadge/background', modes) || '#ffffff'
+        getVariableByName('progressBadge/background', modes)
     const progressColor =
-        getVariableByName('progressBadge/progress/color', modes) || '#ebebed'
+        getVariableByName('progressBadge/progress/color', modes)
     const gap = getVariableByName('progressBadge/gap', modes) ?? 12
     const paddingHorizontal =
         getVariableByName('progressBadge/padding/horizontal', modes) ?? 16
@@ -69,7 +76,7 @@ function ProgressBadge({
 
     // Resolve typography tokens
     const fontFamily =
-        getVariableByName('progressBadge/fontFamily', modes) || 'JioType_Var:Medium'
+        getVariableByName('progressBadge/fontFamily', modes)
     const fontWeightRaw = getVariableByName('progressBadge/fontWeight', modes) ?? 500
     const fontWeight =
         typeof fontWeightRaw === 'number'
@@ -78,11 +85,11 @@ function ProgressBadge({
     const fontSize = getVariableByName('progressBadge/fontSize', modes) ?? 14
     const lineHeight = getVariableByName('progressBadge/lineHeight', modes) ?? 17
     const textColor =
-        getVariableByName('progressBadge/foreground', modes) || '#000000'
+        getVariableByName('progressBadge/foreground', modes)
 
     // Resolve icon tokens
     const iconColor =
-        getVariableByName('progressBadge/icon/color', modes) || '#f50030'
+        getVariableByName('progressBadge/icon/color', modes)
     const iconSize = getVariableByName('progressBadge/icon/size', modes) ?? 18
 
     const containerStyle: ViewStyle = {
@@ -158,8 +165,7 @@ function ProgressBadge({
                 ) : null}
                 <Text
                     style={[textStyle, textStyleOverride]}
-                    numberOfLines={1}
-                    ellipsizeMode="tail"
+                    {...resolveTruncation(disableTruncation, 1, 'tail')}
                     accessibilityElementsHidden={true}
                     importantForAccessibility="no"
                 >

package/src/components/ProjectionMarker/ProjectionMarker.tsx

@@ -7,7 +7,7 @@ import {
   type TextStyle,
 } 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 type { Modes } from '../../design-tokens'
 import Divider from '../Divider/Divider'
 
@@ -61,6 +61,12 @@ export type ProjectionMarkerProps = {
   rateStyle?: StyleProp<TextStyle>
   /** Accessibility label for the whole marker. */
   accessibilityLabel?: string
+  /**
+   * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+   * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+   * lines as it needs even when horizontal space is tight.
+   */
+  disableTruncation?: boolean
 }
 
 const isTextValue = (value: React.ReactNode): value is string | number =>
@@ -106,6 +112,7 @@ function ProjectionMarker({
   durationStyle,
   rateStyle,
   accessibilityLabel,
+  disableTruncation,
 }: ProjectionMarkerProps) {
   const titleColor =
     (getVariableByName('projectionMarker/title/color', modes) as string | null) ?? '#000000'
@@ -169,7 +176,7 @@ function ProjectionMarker({
     if (value === null || value === undefined) return null
     if (isTextValue(value)) {
       return (
-        <Text style={[titleTextStyle, overrideStyle]} numberOfLines={1}>
+        <Text style={[titleTextStyle, overrideStyle]} {...resolveTruncation(disableTruncation, 1)}>
           {value}
         </Text>
       )