jfs-components 0.1.8 → 0.1.17

package/src/components/ThreadHero/ThreadHero.tsx

@@ -1,7 +1,7 @@
 import React, { isValidElement, cloneElement, type ReactNode } from 'react'
 import { View, Text, type ViewStyle, type TextStyle } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
-import { EMPTY_MODES } from '../../utils/react-utils'
+import { EMPTY_MODES, resolveTruncation } from '../../utils/react-utils'
 import type { Modes } from '../../design-tokens'
 
 export type ThreadHeroProps = {
@@ -17,6 +17,12 @@ export type ThreadHeroProps = {
     modes?: Modes
     /** Optional container style */
     style?: ViewStyle
+    /**
+     * 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
 }
 
 /**
@@ -29,31 +35,32 @@ export default function ThreadHero({
     renderAvatar,
     modes = EMPTY_MODES,
     style,
+    disableTruncation,
 }: ThreadHeroProps) {
     // Container Gaps
-    const containerGap = Number(getVariableByName('threadHero/gap', modes)) || 8
-    const detailsGap = Number(getVariableByName('threadHero/details/gap', modes)) || 2
+    const containerGap = Number(getVariableByName('threadHero/gap', modes))
+    const detailsGap = Number(getVariableByName('threadHero/details/gap', modes))
 
     // Title Styles
-    const titleColor = getVariableByName('threadHero/title/color', modes) || '#191b1e'
-    const titleFontSize = Number(getVariableByName('threadHero/title/fontSize', modes)) || 16
-    const titleFontFamily = getVariableByName('threadHero/title/fontFamily', modes) || 'System'
-    const titleLineHeight = Number(getVariableByName('threadHero/title/lineHeight', modes)) || 20
-    const titleFontWeight = getVariableByName('threadHero/title/fontWeight', modes) || '600'
+    const titleColor = getVariableByName('threadHero/title/color', modes)
+    const titleFontSize = Number(getVariableByName('threadHero/title/fontSize', modes))
+    const titleFontFamily = getVariableByName('threadHero/title/fontFamily', modes)
+    const titleLineHeight = Number(getVariableByName('threadHero/title/lineHeight', modes))
+    const titleFontWeight = getVariableByName('threadHero/title/fontWeight', modes)
 
     // Subtitle Styles
-    const subtitleColor = getVariableByName('threadHero/subtitle/color', modes) || '#5d5d61'
-    const subtitleFontSize = Number(getVariableByName('threadHero/subtitle/fontSize', modes)) || 12
-    const subtitleFontFamily = getVariableByName('threadHero/subtitle/fontFamily', modes) || 'System'
-    const subtitleLineHeight = Number(getVariableByName('threadHero/subtitle/lineHeight', modes)) || 18
-    const subtitleFontWeight = getVariableByName('threadHero/subtitle/fontWeight', modes) || '500'
+    const subtitleColor = getVariableByName('threadHero/subtitle/color', modes)
+    const subtitleFontSize = Number(getVariableByName('threadHero/subtitle/fontSize', modes))
+    const subtitleFontFamily = getVariableByName('threadHero/subtitle/fontFamily', modes)
+    const subtitleLineHeight = Number(getVariableByName('threadHero/subtitle/lineHeight', modes))
+    const subtitleFontWeight = getVariableByName('threadHero/subtitle/fontWeight', modes)
 
     // Caption Styles
-    const captionColor = getVariableByName('threadHero/caption/color', modes) || '#5d5d61'
-    const captionFontSize = Number(getVariableByName('threadHero/caption/fontSize', modes)) || 12
-    const captionFontFamily = getVariableByName('threadHero/caption/fontFamily', modes) || 'System'
-    const captionLineHeight = Number(getVariableByName('threadHero/caption/lineHeight', modes)) || 18
-    const captionFontWeight = getVariableByName('threadHero/caption/fontWeight', modes) || '500'
+    const captionColor = getVariableByName('threadHero/caption/color', modes)
+    const captionFontSize = Number(getVariableByName('threadHero/caption/fontSize', modes))
+    const captionFontFamily = getVariableByName('threadHero/caption/fontFamily', modes)
+    const captionLineHeight = Number(getVariableByName('threadHero/caption/lineHeight', modes))
+    const captionFontWeight = getVariableByName('threadHero/caption/fontWeight', modes)
 
     // Styles
     const containerStyle: ViewStyle = {
@@ -111,13 +118,13 @@ export default function ThreadHero({
                 {avatarContent}
                 {title ? <Text style={titleStyle}>{title}</Text> : null}
                 {subtitle ? (
-                    <Text style={subtitleStyle} numberOfLines={1} ellipsizeMode="tail">
+                    <Text style={subtitleStyle} {...resolveTruncation(disableTruncation, 1, 'tail')}>
                         {subtitle}
                     </Text>
                 ) : null}
             </View>
             {caption ? (
-                <Text style={captionStyle} numberOfLines={1} ellipsizeMode="tail">
+                <Text style={captionStyle} {...resolveTruncation(disableTruncation, 1, 'tail')}>
                     {caption}
                 </Text>
             ) : null}

package/src/components/Title/Title.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { View, Text, type StyleProp, type ViewStyle, type TextStyle } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
-import { EMPTY_MODES } from '../../utils/react-utils'
+import { EMPTY_MODES, resolveTextLayout } from '../../utils/react-utils'
 import type { Modes } from '../../design-tokens'
 
 export type TitleProps = {
@@ -17,6 +17,22 @@ export type TitleProps = {
   /** Optional style overrides for the subtitle text. */
   subtitleStyle?: StyleProp<TextStyle>;
   numberOfLines?: number;
+  /**
+   * When `true`, disables truncation for both the title and subtitle: the
+   * trailing ellipsis (`…`) is never shown and the `numberOfLines` clamp is
+   * ignored. The text is also never shrunk by a tight parent — it keeps its
+   * full intrinsic size and overflows (even breaking the parent layout) rather
+   * than ever clipping into an ellipsis. The text still wraps onto multiple
+   * lines.
+   */
+  disableTruncation?: boolean;
+  /**
+   * When `true`, forces both the title and subtitle onto a single line with no
+   * wrapping (implies {@link disableTruncation}). On web the line overflows
+   * horizontally — brutally breaking the parent layout if it has to — instead
+   * of wrapping or truncating.
+   */
+  singleLine?: boolean;
   accessibilityLabel?: string;
   accessibilityHint?: string;
 } & React.ComponentProps<typeof View>;
@@ -35,6 +51,8 @@ function Title({
   textStyle,
   subtitleStyle,
   numberOfLines,
+  disableTruncation,
+  singleLine,
   accessibilityLabel,
   accessibilityHint,
   ...rest
@@ -43,16 +61,16 @@ function Title({
   const modes = { ...globalModes, ...propModes }
 
   const paddingHorizontal =
-    getVariableByName('title/padding/horizontal', modes) || 16
+    getVariableByName('title/padding/horizontal', modes)
   const paddingVertical =
-    getVariableByName('title/padding/vertical', modes) || 8
-  const gap = getVariableByName('title/gap', modes) || 8
+    getVariableByName('title/padding/vertical', modes)
+  const gap = getVariableByName('title/gap', modes)
 
   const labelColor =
-    getVariableByName('title/label/color', modes) || '#0d0d0f'
-  const fontSize = getVariableByName('title/fontSize', modes) || 26
+    getVariableByName('title/label/color', modes)
+  const fontSize = getVariableByName('title/fontSize', modes)
   const rawLineHeight =
-    getVariableByName('title/lineHeight', modes) || 26
+    getVariableByName('title/lineHeight', modes)
   // The Figma title tokens ship with `lineHeight === fontSize` (26/26). On
   // native (especially Android) that produces a Text box exactly `lineHeight`
   // tall, which clips descenders like p/g/y/q/j at the bottom — particularly
@@ -61,28 +79,28 @@ function Title({
   // the original value is preserved.
   const lineHeight = Math.max(rawLineHeight, Math.ceil(fontSize * 1.2))
   const fontFamily =
-    getVariableByName('title/fontFamily', modes) || 'System'
+    getVariableByName('title/fontFamily', modes)
   const fontWeightRaw =
-    getVariableByName('title/fontWeight', modes) || 900
+    getVariableByName('title/fontWeight', modes)
   const fontWeight =
     typeof fontWeightRaw === 'number'
       ? fontWeightRaw.toString()
       : fontWeightRaw
 
   const subtitleColor =
-    getVariableByName('pageSubtitle/label/color', modes) || '#0d0d0f'
+    getVariableByName('pageSubtitle/label/color', modes)
   const subtitleFontSize =
-    getVariableByName('pageSubtitle/fontSize', modes) || 14
+    getVariableByName('pageSubtitle/fontSize', modes)
   const subtitleRawLineHeight =
-    getVariableByName('pageSubtitle/lineHeight', modes) || 18
+    getVariableByName('pageSubtitle/lineHeight', modes)
   const subtitleLineHeight = Math.max(
     subtitleRawLineHeight,
     Math.ceil(subtitleFontSize * 1.2)
   )
   const subtitleFontFamily =
-    getVariableByName('pageSubtitle/fontFamily', modes) || 'System'
+    getVariableByName('pageSubtitle/fontFamily', modes)
   const subtitleFontWeightRaw =
-    getVariableByName('pageSubtitle/fontWeight', modes) || 500
+    getVariableByName('pageSubtitle/fontWeight', modes)
   const subtitleFontWeight =
     typeof subtitleFontWeightRaw === 'number'
       ? subtitleFontWeightRaw.toString()
@@ -118,6 +136,20 @@ function Title({
     textAlign: TEXT_ALIGN_MAP[textAlign],
   }
 
+  // `style` from the layout helper must be merged AFTER the consumer override
+  // so the brutal overflow / no-wrap behaviour always wins.
+  const { style: titleLayoutStyle, ...titleTruncation } = resolveTextLayout({
+    disableTruncation,
+    singleLine,
+    numberOfLines: numberOfLines !== undefined ? numberOfLines : 1,
+  })
+  // The subtitle has never been line-clamped, so it only picks up the escape
+  // hatches (overflow / single-line) — `numberOfLines` is intentionally omitted.
+  const { style: subtitleLayoutStyle, ...subtitleTruncation } = resolveTextLayout({
+    disableTruncation,
+    singleLine,
+  })
+
   return (
     <View
       style={[containerStyle, style]}
@@ -127,8 +159,8 @@ function Title({
       {...rest}
     >
       <Text
-        style={[titleTextStyle, textStyle]}
-        numberOfLines={numberOfLines !== undefined ? numberOfLines : 1}
+        style={[titleTextStyle, textStyle, titleLayoutStyle]}
+        {...titleTruncation}
         accessibilityElementsHidden={true}
         importantForAccessibility="no"
       >
@@ -136,7 +168,8 @@ function Title({
       </Text>
       {subtitle != null && (
         <Text
-          style={[subtitleTextStyle, subtitleStyle]}
+          style={[subtitleTextStyle, subtitleStyle, subtitleLayoutStyle]}
+          {...subtitleTruncation}
           accessibilityElementsHidden={true}
           importantForAccessibility="no"
         >

package/src/components/Toast/Toast.tsx

@@ -3,7 +3,7 @@ import { StyleSheet, Text, type StyleProp, type ViewStyle } from 'react-native'
 import Animated, { FadeIn, FadeOut, SlideInDown, SlideInUp } from 'react-native-reanimated'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { closeToast, type ToastPlacement } from './useToast'
-import { EMPTY_MODES } from '../../utils/react-utils'
+import { EMPTY_MODES, resolveTruncation } from '../../utils/react-utils'
 import type { Modes } from '../../design-tokens'
 
 export interface ToastProps {
@@ -14,6 +14,12 @@ export interface ToastProps {
   modes?: Modes | undefined
   placement?: ToastPlacement | undefined
   style?: StyleProp<ViewStyle> | undefined
+  /**
+   * 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 ANIMATION_DURATION = 250
@@ -26,6 +32,7 @@ function Toast({
   modes = EMPTY_MODES,
   placement = 'bottom',
   style,
+  disableTruncation,
 }: ToastProps) {
   const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
@@ -37,21 +44,21 @@ function Toast({
     }
   }, [id, timeout])
 
-  const backgroundColor = getVariableByName('toast/background', modes) || '#303338'
-  const foreground = getVariableByName('toast/foreground', modes) || '#ffffff'
-  const fontSize = getVariableByName('toast/fontSize', modes) || 14
-  const fontFamily = getVariableByName('toast/fontFamily', modes) || undefined
-  const fontWeight = getVariableByName('toast/fontWeight', modes) || '500'
-  const lineHeight = getVariableByName('toast/lineHeight', modes) || 18
-  const radius = getVariableByName('toast/radius', modes) || 14
-  const paddingHorizontal = getVariableByName('toast/padding/horizontal', modes) || 16
-  const paddingVertical = getVariableByName('toast/padding/vertical', modes) || 14
-  const gap = getVariableByName('toast/gap', modes) || 8
-  const borderWidth = getVariableByName('toast/border/size', modes) || 1
-  const borderColor = getVariableByName('toast/border/color', modes) || 'rgba(255,255,255,0.1)'
-  const shadowBlurPrimary = getVariableByName('toast/shadow/primary/blur', modes) || 48
-  const shadowOffsetYPrimary = getVariableByName('toast/shadow/primary/offsetY', modes) || 16
-  const shadowColorPrimary = getVariableByName('toast/shadow/primary/color', modes) || 'rgba(13,13,15,0.16)'
+  const backgroundColor = getVariableByName('toast/background', modes)
+  const foreground = getVariableByName('toast/foreground', modes)
+  const fontSize = getVariableByName('toast/fontSize', modes)
+  const fontFamily = getVariableByName('toast/fontFamily', modes)
+  const fontWeight = getVariableByName('toast/fontWeight', modes)
+  const lineHeight = getVariableByName('toast/lineHeight', modes)
+  const radius = getVariableByName('toast/radius', modes)
+  const paddingHorizontal = getVariableByName('toast/padding/horizontal', modes)
+  const paddingVertical = getVariableByName('toast/padding/vertical', modes)
+  const gap = getVariableByName('toast/gap', modes)
+  const borderWidth = getVariableByName('toast/border/size', modes)
+  const borderColor = getVariableByName('toast/border/color', modes)
+  const shadowBlurPrimary = getVariableByName('toast/shadow/primary/blur', modes)
+  const shadowOffsetYPrimary = getVariableByName('toast/shadow/primary/offsetY', modes)
+  const shadowColorPrimary = getVariableByName('toast/shadow/primary/color', modes)
 
   const enterAnimation = placement === 'top'
     ? SlideInUp.duration(ANIMATION_DURATION)
@@ -88,7 +95,7 @@ function Toast({
       accessibilityRole="alert"
       accessibilityLiveRegion="assertive"
     >
-      <Text style={textStyle} numberOfLines={2}>
+      <Text style={textStyle} {...resolveTruncation(disableTruncation, 2)}>
         {title}
       </Text>
     </Animated.View>

package/src/components/Toggle/Toggle.tsx

@@ -2,12 +2,12 @@ import React, { useCallback, useState } from 'react'
 import {
   Pressable,
   View,
-  Platform,
   type StyleProp,
   type ViewStyle,
 } 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'
 
 export interface ToggleProps {
@@ -89,15 +89,10 @@ function Toggle({
     opacity: disabled ? 0.5 : 1,
   }
 
-  const thumbShadow: ViewStyle = Platform.OS === 'web'
-    ? { boxShadow: `${thumbShadowOffsetX}px ${thumbShadowOffsetY}px ${thumbShadowRadius}px 0px ${thumbShadowColor}` } as ViewStyle
-    : {
-      shadowColor: thumbShadowColor as string,
-      shadowOffset: { width: thumbShadowOffsetX as number, height: thumbShadowOffsetY as number },
-      shadowRadius: thumbShadowRadius as number,
-      shadowOpacity: 1,
-      elevation: 4,
-    }
+  const thumbShadow: ViewStyle = boxShadow(
+    `${thumbShadowOffsetX}px ${thumbShadowOffsetY}px ${thumbShadowRadius}px 0px ${thumbShadowColor}`,
+    { elevation: 4 },
+  )
 
   const thumbStyle: ViewStyle = {
     width: thumbSize as number,

package/src/components/Tooltip/Tooltip.tsx

@@ -263,18 +263,18 @@ export function TooltipContent({
   const { width: windowWidth, height: windowHeight } = Dimensions.get('window')
 
   // Tokens
-  const bgColor = (getVariableByName('tooltip/background', modes) as string) || '#0f0d0a'
-  const paddingH = Number(getVariableByName('tooltip/padding/horizontal', modes) || 12)
-  const paddingV = Number(getVariableByName('tooltip/padding/vertical', modes) || 8)
-  const radius = Number(getVariableByName('radius', modes) || 8)
-  const maxWidthToken = Number(getVariableByName('maxWidth', modes) || 280)
-  const arrowWidth = Number(getVariableByName('tooltip/tipItem/width', modes) || 16)
-  const arrowHeight = Number(getVariableByName('tooltip/tipItem/height', modes) || 8)
-  const labelColor = (getVariableByName('tooltip/label/color', modes) as string) || '#ffffff'
-  const fontSize = Number(getVariableByName('tooltip/label/fontSize', modes) || 14)
-  const fontWeight = (getVariableByName('tooltip/label/fontWeight', modes) as string) || '500'
-  const lineHeight = Number(getVariableByName('tooltip/label/lineHeight', modes) || 18)
-  const fontFamily = (getVariableByName('tooltip/lable/fontFamily', modes) as string) || undefined
+  const bgColor = (getVariableByName('tooltip/background', modes) as string)
+  const paddingH = Number(getVariableByName('tooltip/padding/horizontal', modes))
+  const paddingV = Number(getVariableByName('tooltip/padding/vertical', modes))
+  const radius = Number(getVariableByName('radius', modes))
+  const maxWidthToken = Number(getVariableByName('maxWidth', modes))
+  const arrowWidth = Number(getVariableByName('tooltip/tipItem/width', modes))
+  const arrowHeight = Number(getVariableByName('tooltip/tipItem/height', modes))
+  const labelColor = (getVariableByName('tooltip/label/color', modes) as string)
+  const fontSize = Number(getVariableByName('tooltip/label/fontSize', modes))
+  const fontWeight = (getVariableByName('tooltip/label/fontWeight', modes) as string)
+  const lineHeight = Number(getVariableByName('tooltip/label/lineHeight', modes))
+  const fontFamily = (getVariableByName('tooltip/lable/fontFamily', modes) as string)
 
   if (!isVisible) return null
 

package/src/components/TransactionBubble/TransactionBubble.tsx

@@ -4,7 +4,7 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import MoneyValue from '../MoneyValue/MoneyValue'
 import TransactionStatus from '../TransactionStatus/TransactionStatus'
 import NavArrow from '../NavArrow/NavArrow'
-import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import { EMPTY_MODES, cloneChildrenWithModes, resolveTruncation } from '../../utils/react-utils'
 import { usePressableWebSupport, type WebAccessibilityProps } from '../../utils/web-platform-utils'
 import type { Modes } from '../../design-tokens'
 
@@ -23,6 +23,12 @@ export type TransactionBubbleProps = {
   accessibilityLabel?: string
   accessibilityHint?: string
   webAccessibilityProps?: WebAccessibilityProps
+  /**
+   * 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
 } & Omit<PressableProps, 'style' | 'children' | 'onPress'>
 
 /**
@@ -56,6 +62,7 @@ function TransactionBubble({
   accessibilityLabel,
   accessibilityHint,
   webAccessibilityProps,
+  disableTruncation,
   ...rest
 }: TransactionBubbleProps) {
   const resolvedModes = {
@@ -63,21 +70,21 @@ function TransactionBubble({
     'Context3': 'Transaction Bubble',
   }
 
-  const padding = Number(getVariableByName('transactionBubble/padding', resolvedModes)) || 16
-  const radius = Number(getVariableByName('transactionBubble/radius', resolvedModes)) || 23
-  const borderSize = Number(getVariableByName('transactionBubble/border/size', resolvedModes)) || 1
-  const backgroundColor = getVariableByName('transactionBubble/background', resolvedModes) || '#ffffff'
-  const borderColor = getVariableByName('transactionBubble/border/color', resolvedModes) || '#e5e5e5'
-  const bubbleGap = Number(getVariableByName('transactionBubble/gap', resolvedModes)) || 8
-  const moneyValueWrapGap = Number(getVariableByName('transactionBubble/wrap/gap', resolvedModes)) || 8
+  const padding = Number(getVariableByName('transactionBubble/padding', resolvedModes))
+  const radius = Number(getVariableByName('transactionBubble/radius', resolvedModes))
+  const borderSize = Number(getVariableByName('transactionBubble/border/size', resolvedModes))
+  const backgroundColor = getVariableByName('transactionBubble/background', resolvedModes)
+  const borderColor = getVariableByName('transactionBubble/border/color', resolvedModes)
+  const bubbleGap = Number(getVariableByName('transactionBubble/gap', resolvedModes))
+  const moneyValueWrapGap = Number(getVariableByName('transactionBubble/wrap/gap', resolvedModes))
 
-  const descriptionColor = getVariableByName('transactionBubble/description/color', resolvedModes) || '#24262b'
-  const descriptionFontSize = Number(getVariableByName('transactionBubble/description/fontSize', resolvedModes)) || 14
-  const descriptionLineHeight = Number(getVariableByName('transactionBubble/description/lineHeight', resolvedModes)) || 17
-  const descriptionFontFamily = getVariableByName('transactionBubble/description/fontFamily', resolvedModes) || 'JioType Var'
+  const descriptionColor = getVariableByName('transactionBubble/description/color', resolvedModes)
+  const descriptionFontSize = Number(getVariableByName('transactionBubble/description/fontSize', resolvedModes))
+  const descriptionLineHeight = Number(getVariableByName('transactionBubble/description/lineHeight', resolvedModes))
+  const descriptionFontFamily = getVariableByName('transactionBubble/description/fontFamily', resolvedModes)
 
-  const statusWrapGap = Number(getVariableByName('transactionBubble/statusWrap/gap', resolvedModes)) || 4
-  const statusWrapHeight = Number(getVariableByName('transactionBubble/statusWrap/height', resolvedModes)) || 18
+  const statusWrapGap = Number(getVariableByName('transactionBubble/statusWrap/gap', resolvedModes))
+  const statusWrapHeight = Number(getVariableByName('transactionBubble/statusWrap/height', resolvedModes))
 
   const containerStyle: ViewStyle = {
     padding,
@@ -122,7 +129,7 @@ function TransactionBubble({
   const mainContent = (
     <View style={{ gap: bubbleGap }}>
       <View style={{ gap: moneyValueWrapGap }}>
-        <Text style={descriptionStyle} numberOfLines={1}>{description}</Text>
+        <Text style={descriptionStyle} {...resolveTruncation(disableTruncation, 1)}>{description}</Text>
         <MoneyValue value={value} currency={currency} modes={resolvedModes} />
       </View>
       {processedChildren}

package/src/components/TransactionDetails/TransactionDetails.tsx

@@ -52,21 +52,21 @@ function Item({
   const gap = getVariableByName('detailItem/gap', modes) ?? 4
 
   // Label typography tokens
-  const labelColor = getVariableByName('detailItem/label/color', modes) || '#0c0d10'
-  const labelFontSize = getVariableByName('detailItem/label/fontSize', modes) || 14
-  const labelFontFamily = getVariableByName('detailItem/label/fontFamily', modes) || 'System'
-  const labelLineHeight = getVariableByName('detailItem/label/lineHeight', modes) || 17
-  const labelFontWeightRaw = getVariableByName('detailItem/label/fontWeight', modes) || 500
+  const labelColor = getVariableByName('detailItem/label/color', modes)
+  const labelFontSize = getVariableByName('detailItem/label/fontSize', modes)
+  const labelFontFamily = getVariableByName('detailItem/label/fontFamily', modes)
+  const labelLineHeight = getVariableByName('detailItem/label/lineHeight', modes)
+  const labelFontWeightRaw = getVariableByName('detailItem/label/fontWeight', modes)
   const labelFontWeight = typeof labelFontWeightRaw === 'number'
     ? labelFontWeightRaw.toString()
     : labelFontWeightRaw
 
   // Value typography tokens
-  const valueColor = getVariableByName('detailItem/value/color', modes) || '#24262b'
-  const valueFontSize = getVariableByName('detailItem/value/fontSize', modes) || 14
-  const valueFontFamily = getVariableByName('detailItem/value/fontFamily', modes) || 'System'
-  const valueLineHeight = getVariableByName('detailItem/value/lineHeight', modes) || 17
-  const valueFontWeightRaw = getVariableByName('detailItem/value/fontWeight', modes) || 'Medium'
+  const valueColor = getVariableByName('detailItem/value/color', modes)
+  const valueFontSize = getVariableByName('detailItem/value/fontSize', modes)
+  const valueFontFamily = getVariableByName('detailItem/value/fontFamily', modes)
+  const valueLineHeight = getVariableByName('detailItem/value/lineHeight', modes)
+  const valueFontWeightRaw = getVariableByName('detailItem/value/fontWeight', modes)
   const valueFontWeight = typeof valueFontWeightRaw === 'number'
     ? valueFontWeightRaw.toString()
     : valueFontWeightRaw === 'Medium' ? '500' : valueFontWeightRaw

package/src/components/TransactionStatus/TransactionStatus.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { View, Text, type ViewStyle, type TextStyle } from 'react-native'
 import { Svg, Path } 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 type { Modes } from '../../design-tokens'
 
 // --- Internal Icon Component ---
@@ -19,7 +19,7 @@ const StatusIcon = ({
     height = 15,
     color,
 }: StatusIconProps) => {
-    const resolvedColor = color || getVariableByName('transactionStatus/icon/color', modes) || '#F06D0F'
+    const resolvedColor = color || getVariableByName('transactionStatus/icon/color', modes)
 
     return (
         <Svg
@@ -48,6 +48,12 @@ export type TransactionStatusProps = {
     modes?: Modes
     /** Optional container style */
     style?: ViewStyle
+    /**
+     * 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
 }
 
 /**
@@ -58,17 +64,18 @@ export default function TransactionStatus({
     date = '20 Mar 2025',
     modes = EMPTY_MODES,
     style,
+    disableTruncation,
 }: TransactionStatusProps) {
-    const gap = Number(getVariableByName('transactionBubble/statusWrap/gap', modes)) || 4
+    const gap = Number(getVariableByName('transactionBubble/statusWrap/gap', modes))
     // Using 'transactionStatus' tokens for text
-    const textColor = getVariableByName('transactionStatus/color', modes) || '#191b1e'
-    const fontSize = Number(getVariableByName('transactionStatus/fontSize', modes)) || 12
-    const lineHeight = Number(getVariableByName('transactionStatus/lineHeight', modes)) || 16
-    const fontFamily = getVariableByName('transactionStatus/fontFamily', modes) || 'System'
-    const fontWeight = getVariableByName('transactionStatus/fontWeight2', modes) || '500'
+    const textColor = getVariableByName('transactionStatus/color', modes)
+    const fontSize = Number(getVariableByName('transactionStatus/fontSize', modes))
+    const lineHeight = Number(getVariableByName('transactionStatus/lineHeight', modes))
+    const fontFamily = getVariableByName('transactionStatus/fontFamily', modes)
+    const fontWeight = getVariableByName('transactionStatus/fontWeight2', modes)
 
-    const iconColor = getVariableByName('transactionStatus/icon/color', modes) || '#f06d0f'
-    const iconSize = Number(getVariableByName('transactionStatus/iconSize', modes)) || 18
+    const iconColor = getVariableByName('transactionStatus/icon/color', modes)
+    const iconSize = Number(getVariableByName('transactionStatus/iconSize', modes))
 
     const containerStyle: ViewStyle = {
         flexDirection: 'row',
@@ -88,7 +95,7 @@ export default function TransactionStatus({
     return (
         <View style={containerStyle}>
             <StatusIcon width={iconSize} height={iconSize} color={iconColor} modes={modes} />
-            <Text style={textStyle} numberOfLines={1}>
+            <Text style={textStyle} {...resolveTruncation(disableTruncation, 1)}>
                 {status} · {date}
             </Text>
         </View>

package/src/components/UpiHandle/UpiHandle.tsx

@@ -13,7 +13,7 @@ import {
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
-import { EMPTY_MODES } from '../../utils/react-utils'
+import { EMPTY_MODES, resolveTruncation } from '../../utils/react-utils'
 import MediaSource, { type UnifiedSource } from '../../utils/MediaSource'
 import Icon from '../../icons/Icon'
 import type { Modes } from '../../design-tokens'
@@ -52,6 +52,12 @@ type UpiHandleProps = {
   onPress?: () => void;
   onClick?: () => void;
   disabled?: boolean;
+  /**
+   * 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;
 } & Omit<React.ComponentProps<typeof View>, 'style' | 'accessibilityRole' | 'accessibilityLabel' | 'accessibilityHint'>;
 
 interface UpiHandleTokens {
@@ -64,26 +70,26 @@ interface UpiHandleTokens {
 }
 
 function resolveUpiHandleTokens(modes: Modes): UpiHandleTokens {
-  const backgroundColor = (getVariableByName('upiHandle/background', modes) || '#f5f5f5') as string
-  const radius = (getVariableByName('upiHandle/radius', modes) || 99999) as number
-  const paddingLeft = (getVariableByName('upiHandle/padding/left', modes) || 4) as number
-  const paddingRight = (getVariableByName('upiHandle/padding/right', modes) || 14) as number
-  const paddingVertical = (getVariableByName('upiHandle/padding/vertical', modes) || 3) as number
-  const gap = (getVariableByName('upiHandle/gap', modes) || 6) as number
+  const backgroundColor = (getVariableByName('upiHandle/background', modes)) as string
+  const radius = (getVariableByName('upiHandle/radius', modes)) as number
+  const paddingLeft = (getVariableByName('upiHandle/padding/left', modes)) as number
+  const paddingRight = (getVariableByName('upiHandle/padding/right', modes)) as number
+  const paddingVertical = (getVariableByName('upiHandle/padding/vertical', modes)) as number
+  const gap = (getVariableByName('upiHandle/gap', modes)) as number
 
-  const avatarSize = (getVariableByName('upiHandle/image/size', modes) || 23) as number
-  const avatarRadius = (getVariableByName('upiHandle/image/radius', modes) || 99999) as number
+  const avatarSize = (getVariableByName('upiHandle/image/size', modes)) as number
+  const avatarRadius = (getVariableByName('upiHandle/image/radius', modes)) as number
 
-  const labelColor = (getVariableByName('upiHandle/label/color', modes) || '#0d0d0f') as string
-  const labelFontSize = (getVariableByName('upiHandle/label/fontSize', modes) || 12) as number
-  const labelLineHeight = (getVariableByName('upiHandle/label/lineHeight', modes) || 23) as number
-  const labelFontFamily = (getVariableByName('upiHandle/label/fontFamily', modes) || 'System') as string
-  const labelFontWeightRaw = getVariableByName('upiHandle/label/fontWeight', modes) || 500
+  const labelColor = (getVariableByName('upiHandle/label/color', modes)) as string
+  const labelFontSize = (getVariableByName('upiHandle/label/fontSize', modes)) as number
+  const labelLineHeight = (getVariableByName('upiHandle/label/lineHeight', modes)) as number
+  const labelFontFamily = (getVariableByName('upiHandle/label/fontFamily', modes)) as string
+  const labelFontWeightRaw = getVariableByName('upiHandle/label/fontWeight', modes)
   const labelFontWeight =
     typeof labelFontWeightRaw === 'number' ? labelFontWeightRaw.toString() : labelFontWeightRaw
 
-  const iconColor = (getVariableByName('upiHandle/icon/color', modes) || '#0d0d0f') as string
-  const iconSize = (getVariableByName('upiHandle/icon/size', modes) || 12) as number
+  const iconColor = (getVariableByName('upiHandle/icon/color', modes)) as string
+  const iconSize = (getVariableByName('upiHandle/icon/size', modes)) as number
 
   return {
     containerStyle: {
@@ -152,6 +158,7 @@ function UpiHandle({
   onPress,
   onClick,
   disabled,
+  disableTruncation,
   // accessibilityLabel is accepted on the type for API back-compat; the
   // wrapper renders `accessibilityLabel={undefined}` because the inner Text
   // already carries the label.
@@ -240,8 +247,7 @@ function UpiHandle({
       </View>
       <Text
         style={tokens.labelStyle}
-        numberOfLines={1}
-        ellipsizeMode="tail"
+        {...resolveTruncation(disableTruncation, 1, 'tail')}
         accessibilityElementsHidden={true}
         importantForAccessibility="no"
       >