jfs-components 0.1.12 → 0.1.18

package/src/components/ProductMerchandisingCard/ProductMerchandisingCard.tsx

@@ -4,15 +4,21 @@ 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 Svg, {
+    Defs,
+    LinearGradient,
+    Stop,
+    Rect,
+    Mask,
+    Filter,
+    FeGaussianBlur,
+    Image as SvgImage,
+} from 'react-native-svg'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { EMPTY_MODES, resolveTruncation } from '../../utils/react-utils'
 import Avatar from '../Avatar/Avatar'
@@ -138,7 +144,9 @@ function ProductMerchandisingCard({
     const rawId = useId()
     const safeId = rawId.replace(/[^a-zA-Z0-9_-]/g, '')
     const scrimId = `pmc-footer-scrim-${safeId}`
+    const blurGradientId = `pmc-footer-blurgrad-${safeId}`
     const blurMaskId = `pmc-footer-blurmask-${safeId}`
+    const blurFilterId = `pmc-footer-blurfilter-${safeId}`
 
     const normalizedImageSource = useMemo(() => normalizeImageSource(imageSource), [imageSource])
 
@@ -234,41 +242,65 @@ function ProductMerchandisingCard({
 
             <View style={tokens.footer} pointerEvents="box-none">
                 {/* 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). */}
+                    a soft blur at the bottom. We reveal a *blurred copy of the
+                    card's own image* through a vertical gradient mask, rendered
+                    entirely with `react-native-svg` (a Fabric/codegen-correct
+                    native module that resolves on both the Old and New
+                    architectures). The SVG `<Image>` is blurred by an
+                    `<FeGaussianBlur>` filter (identical, resolution-independent
+                    Gaussian on iOS, Android AND web) and revealed by a luminance
+                    `<Mask>` fed a vertical gradient, so the blur swells in
+                    smoothly toward the bottom. This deliberately avoids the
+                    unmaintained `@react-native-masked-view/masked-view` (a legacy
+                    Paper component that resolves to a plain object — and crashes
+                    "Element type is invalid" — under the New Architecture interop)
+                    and the flaky native `BlurView`. Because the mask is fully
+                    transparent at the top, any minor crop mismatch between this
+                    cover-fitted copy and the full-bleed background is invisible:
+                    where they could differ, the blurred layer isn't drawn. */}
                 {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 }}
+                        <Svg width="100%" height="100%">
+                            <Defs>
+                                <Filter
+                                    id={blurFilterId}
+                                    x="-15%"
+                                    y="-15%"
+                                    width="130%"
+                                    height="130%"
+                                >
+                                    <FeGaussianBlur
+                                        stdDeviation={tokens.imageBlurStdDeviation}
+                                        edgeMode="duplicate"
+                                    />
+                                </Filter>
+                                <LinearGradient id={blurGradientId} x1="0" y1="0" x2="0" y2="1">
+                                    <Stop offset="0" stopColor="#ffffff" stopOpacity={0} />
+                                    <Stop offset="0.35" stopColor="#ffffff" stopOpacity={0.5} />
+                                    <Stop offset="0.7" stopColor="#ffffff" stopOpacity={0.92} />
+                                    <Stop offset="1" stopColor="#ffffff" stopOpacity={1} />
+                                </LinearGradient>
+                                <Mask id={blurMaskId}>
+                                    <Rect
+                                        x="0"
+                                        y="0"
+                                        width="100%"
+                                        height="100%"
+                                        fill={`url(#${blurGradientId})`}
+                                    />
+                                </Mask>
+                            </Defs>
+                            <SvgImage
+                                href={normalizedImageSource as any}
+                                x="0"
+                                y="0"
+                                width="100%"
+                                height="100%"
+                                preserveAspectRatio="xMidYMid slice"
+                                filter={`url(#${blurFilterId})`}
+                                mask={`url(#${blurMaskId})`}
                             />
-                        </MaskedView>
+                        </Svg>
                     </View>
                 ) : (
                     <GlassFill tint="dark" intensity={tokens.blurIntensity} progressive />
@@ -348,7 +380,7 @@ const SPECIAL_BADGE_INTENSITY = 17 // ~5px CSS blur / ~2 native blurAmount
 interface ResolvedTokens {
     radius: number
     blurIntensity: number
-    imageBlurRadius: number
+    imageBlurStdDeviation: number
     header: ViewStyle
     footer: ViewStyle
     textWrap: ViewStyle
@@ -394,20 +426,17 @@ 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
+    // SVG `<FeGaussianBlur stdDeviation>` is resolution-independent and renders
+    // an identical Gaussian on iOS, Android and web — so unlike the old
+    // `Image.blurRadius` path it needs no per-platform tuning. `stdDeviation` is
+    // roughly half a perceptual "blur radius", so we scale the `blur/minimal`
+    // token down to land on the same subtle frosted strength as the design.
+    const imageBlurStdDeviation = Math.max(4, Math.round(blurRadius * 0.35))
 
     return {
         radius,
         blurIntensity: Math.max(0, Math.min(100, Math.round(blurRadius * BLUR_INTENSITY_FACTOR))),
-        imageBlurRadius,
+        imageBlurStdDeviation,
         header: {
             flexDirection: 'row',
             alignItems: 'flex-start',

package/src/components/ProgressBadge/ProgressBadge.tsx

@@ -62,9 +62,9 @@ function ProgressBadge({
 }: 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
@@ -76,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'
@@ -85,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 = {

package/src/components/Radio/Radio.tsx

@@ -3,13 +3,13 @@ import {
     Pressable,
     View,
     StyleSheet,
-    Platform,
     ViewStyle,
     DimensionValue,
     StyleProp,
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { EMPTY_MODES } from '../../utils/react-utils'
+import { boxShadow } from '../../utils/shadow'
 import type { Modes } from '../../design-tokens'
 
 // ---------------------------------------------------------------------------
@@ -61,9 +61,9 @@ export const Radio = forwardRef<View, RadioProps>(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')
@@ -101,7 +101,7 @@ export const Radio = forwardRef<View, RadioProps>(function Radio({
     // ---- Colors & Border ----
 
     const resolveColor = (path: string, fallback: string) => {
-        return getVariableByName(path, modes) || fallback
+        return getVariableByName(path, modes)
     }
 
     // Background Color
@@ -155,10 +155,9 @@ export const Radio = forwardRef<View, RadioProps>(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: ViewStyle = {

package/src/components/RechargeCard/RechargeCard.tsx

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

package/src/components/SavingsGoalSummary/SavingsGoalSummary.tsx

@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react'
 import {
     View,
+    Text,
     type StyleProp,
     type ViewStyle,
     type TextStyle,
@@ -8,7 +9,6 @@ import {
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
 import { formatIndianNumber } from '../../utils/number-utils'
-import Title from '../Title/Title'
 import LinearProgress from '../LinearProgress/LinearProgress'
 import MetricLegendItem from '../MetricLegendItem/MetricLegendItem'
 import type { Modes } from '../../design-tokens'
@@ -40,6 +40,14 @@ export type SavingsGoalSummaryItem = {
 }
 
 export type SavingsGoalSummaryProps = {
+    /**
+     * Optional caption rendered directly above the percentage value
+     * (e.g. `"Credit usage"`), matching the Figma `savingsGoalSummary/label`
+     * slot. Pass a string for token-styled text, or any `ReactNode` for full
+     * control. Omit (the default) to hide it — preserving the original
+     * value-only layout for existing callers.
+     */
+    label?: React.ReactNode
     /**
      * Currency symbol (e.g. `'₹'`, `'$'`) prefixed to every legend value.
      * Defaults to `'₹'`. The symbol is rendered as part of the formatted
@@ -82,6 +90,8 @@ export type SavingsGoalSummaryProps = {
      * computed from `current` / `target` and cannot be replaced.
      */
     titleStyle?: StyleProp<TextStyle>
+    /** Override styles for the `label` caption text (string labels only). */
+    labelStyle?: StyleProp<TextStyle>
     /** Override the inner legend container styles. */
     legendStyle?: StyleProp<ViewStyle>
 }
@@ -122,6 +132,7 @@ const DEFAULT_TARGET: SavingsGoalSummaryItem = {
  * @param {SavingsGoalSummaryProps} props
  */
 function SavingsGoalSummary({
+    label,
     currency = '₹',
     current = DEFAULT_CURRENT,
     target = DEFAULT_TARGET,
@@ -129,6 +140,7 @@ function SavingsGoalSummary({
     modes = EMPTY_MODES,
     style,
     titleStyle,
+    labelStyle,
     legendStyle,
 }: SavingsGoalSummaryProps) {
     // Merge caller modes on top of the defaults so callers can override
@@ -182,6 +194,66 @@ function SavingsGoalSummary({
     const legendGap =
         (getVariableByName('savingsGoalSummary/legend/gap', mergedModes) as number | null) ?? 16
 
+    // Percentage value typography — driven by the dedicated
+    // `savingsGoalSummary/value/*` tokens (Figma 29 / 900) rather than the
+    // generic `Title` tokens, so the value matches the design exactly.
+    const valueFontSize =
+        (getVariableByName('savingsGoalSummary/value/fontSize', mergedModes) as number | null) ?? 29
+    const valueFontFamily =
+        (getVariableByName('savingsGoalSummary/value/fontFamily', mergedModes) as string | null) ??
+        'JioType Var'
+    const valueRawLineHeight =
+        (getVariableByName('savingsGoalSummary/value/lineHeight', mergedModes) as number | null) ?? 29
+    // The value tokens ship with `lineHeight === fontSize` (29/29); clamp to
+    // ~1.2x so descenders never clip on native (same guard `Title` uses).
+    const valueLineHeight = Math.max(valueRawLineHeight, Math.ceil(valueFontSize * 1.2))
+    const valueFontWeight = String(
+        getVariableByName('savingsGoalSummary/value/fontWeight', mergedModes) ?? 900,
+    ) as TextStyle['fontWeight']
+    const valueColor =
+        (getVariableByName('savingsGoalSummary/value/color', mergedModes) as string | null) ??
+        '#0d0d0f'
+
+    // Caption ("Credit usage") typography — `savingsGoalSummary/label/*`
+    // (Figma 12 / 400). Only rendered when a `label` is supplied.
+    const labelFontSize =
+        (getVariableByName('savingsGoalSummary/label/fontSize', mergedModes) as number | null) ?? 12
+    const labelFontFamily =
+        (getVariableByName('savingsGoalSummary/label/fontFamily', mergedModes) as string | null) ??
+        'JioType Var'
+    const labelLineHeight =
+        (getVariableByName('savingsGoalSummary/label/lineHeight', mergedModes) as number | null) ?? 16
+    const labelFontWeight = String(
+        getVariableByName('savingsGoalSummary/label/fontWeight', mergedModes) ?? 400,
+    ) as TextStyle['fontWeight']
+    const labelColor =
+        (getVariableByName('savingsGoalSummary/label/color', mergedModes) as string | null) ??
+        '#0d0d0f'
+
+    const labelNode =
+        label == null || label === false ? null : typeof label === 'string' ? (
+            <Text
+                style={[
+                    {
+                        color: labelColor,
+                        fontFamily: labelFontFamily,
+                        fontSize: labelFontSize,
+                        lineHeight: labelLineHeight,
+                        fontWeight: labelFontWeight,
+                        width: '100%',
+                    },
+                    labelStyle,
+                ]}
+            >
+                {label}
+            </Text>
+        ) : (
+            (() => {
+                const processed = cloneChildrenWithModes(label, mergedModes)
+                return processed.length === 1 ? processed[0] : processed
+            })()
+        )
+
     const customLegend = children
         ? cloneChildrenWithModes(children, mergedModes)
         : null
@@ -220,14 +292,32 @@ function SavingsGoalSummary({
                 },
                 style,
             ]}
-            accessibilityLabel={`Savings goal progress, ${percentageLabel}`}
+            accessibilityLabel={
+                typeof label === 'string'
+                    ? `${label}, ${percentageLabel}`
+                    : `Savings goal progress, ${percentageLabel}`
+            }
         >
-            <Title
-                title={percentageLabel}
-                modes={mergedModes}
-                style={TITLE_CONTAINER_STYLE}
-                textStyle={titleStyle}
-            />
+            <View style={HEADER_GROUP_STYLE}>
+                {labelNode}
+                <Text
+                    style={[
+                        {
+                            color: valueColor,
+                            fontFamily: valueFontFamily,
+                            fontSize: valueFontSize,
+                            lineHeight: valueLineHeight,
+                            fontWeight: valueFontWeight,
+                            width: '100%',
+                        },
+                        titleStyle,
+                    ]}
+                    accessibilityElementsHidden={true}
+                    importantForAccessibility="no"
+                >
+                    {percentageLabel}
+                </Text>
+            </View>
 
             <LinearProgress value={resolvedProgress} modes={mergedModes} />
 
@@ -260,11 +350,13 @@ function formatLegendValue(value: number | undefined, currency: string): string
     return formatIndianNumber(value, { prefix: currency })
 }
 
-// Neutralise the `Title` component's default page-level padding so it sits
-// flush inside the summary card (the parent container owns spacing via `gap`).
-const TITLE_CONTAINER_STYLE: ViewStyle = {
-    paddingHorizontal: 0,
-    paddingVertical: 0,
+// Groups the optional caption ("Credit usage") tightly above the percentage
+// value. The parent container owns the larger spacing to the bar via `gap`,
+// so this only needs the small label→value gap.
+const HEADER_GROUP_STYLE: ViewStyle = {
+    width: '100%',
+    gap: 2,
+    alignItems: 'flex-start',
 }
 
 export default SavingsGoalSummary