jfs-components 0.1.8 → 0.1.17

package/src/components/Carousel/Carousel.tsx

@@ -65,6 +65,16 @@ export interface CarouselProps {
   gap?: number
   /** Width of each carousel item. When undefined, items take full container width. */
   itemWidth?: number
+  /**
+   * Explicit horizontal padding (px) for the scroll content. When provided it
+   * overrides the token-derived padding verbatim — the built-in `carousel/
+   * padding/horizontal × 2` "peek" multiplier is NOT applied. Use this for
+   * presets (e.g. the account-card strip) whose own tokens define a flush,
+   * non-peeking layout.
+   */
+  paddingHorizontal?: number
+  /** Explicit vertical padding (px) for the outer container. Overrides `carousel/padding/vertical`. */
+  paddingVertical?: number
 
   /** Called when the active index changes. */
   onIndexChange?: (index: number) => void
@@ -85,27 +95,29 @@ export function Carousel({
   loop = true,
   gap: gapProp,
   itemWidth: itemWidthProp,
+  paddingHorizontal: paddingHorizontalProp,
+  paddingVertical: paddingVerticalProp,
 
   onIndexChange,
   style,
 }: CarouselProps) {
   // ---- Token resolution ----
   const tokenGap = parseFloat(
-    getVariableByName('carousel/gap', modes) || '12',
+    getVariableByName('carousel/gap', modes),
   )
   const gap = gapProp ?? tokenGap
 
 
 
   const containerPaddingH = parseFloat(
-    getVariableByName('carousel/padding/horizontal', modes) || '0',
+    getVariableByName('carousel/padding/horizontal', modes),
   )
   const containerPaddingV = parseFloat(
-    getVariableByName('carousel/padding/vertical', modes) || '0',
+    getVariableByName('carousel/padding/vertical', modes),
   )
   // Outer container max height per Figma (`carousel/maxHeight`).
   const maxHeight = parseFloat(
-    getVariableByName('carousel/maxHeight', modes) || '280',
+    getVariableByName('carousel/maxHeight', modes),
   )
   // Spacing between the cards row and the pagination dots uses `carousel/gap`.
   const paginationOffset = gap
@@ -254,13 +266,18 @@ export function Carousel({
   )
 
   // ---- Render ----
+  // Explicit padding props win verbatim; otherwise fall back to the
+  // token-derived values (horizontal keeps its legacy ×2 "peek" multiplier).
+  const effectivePaddingH = paddingHorizontalProp ?? containerPaddingH 
+  const effectivePaddingV = paddingVerticalProp ?? containerPaddingV
+
   const outerStyle: ViewStyle = {
-    paddingVertical: containerPaddingV,
+    paddingVertical: effectivePaddingV,
     maxHeight,
   }
 
   const contentContainerStyle: ViewStyle = {
-    paddingHorizontal: containerPaddingH * 2,
+    paddingHorizontal: effectivePaddingH,
     gap,
     // Align items to the start so snap works correctly
     alignItems: 'flex-start',
@@ -372,26 +389,26 @@ export function Pagination({ modes: propModes, style }: PaginationProps) {
   // Token resolution for dots — matches Figma tokens
   // (carousel/pagination/gap, carousel/pagination/indicator/{activeColor,inactiveColor,radius,size,activeWidth}).
   const dotSize = parseFloat(
-    getVariableByName('carousel/pagination/indicator/size', modes) || '6',
+    getVariableByName('carousel/pagination/indicator/size', modes),
   )
   const dotActiveWidth = parseFloat(
-    getVariableByName('carousel/pagination/indicator/activeWidth', modes) || '16',
+    getVariableByName('carousel/pagination/indicator/activeWidth', modes),
   )
   const dotGap = parseFloat(
-    getVariableByName('carousel/pagination/gap', modes) || '4',
+    getVariableByName('carousel/pagination/gap', modes),
   )
   const dotColor =
     (getVariableByName(
       'carousel/pagination/indicator/inactiveColor',
       modes,
-    ) as string) || 'rgba(0,0,0,0.3)'
+    ) as string)
   const dotActiveColor =
     (getVariableByName(
       'carousel/pagination/indicator/activeColor',
       modes,
-    ) as string) || '#170d0a'
+    ) as string)
   const dotRadius = parseFloat(
-    getVariableByName('carousel/pagination/indicator/radius', modes) || '9999',
+    getVariableByName('carousel/pagination/indicator/radius', modes),
   )
 
   const containerStyle: ViewStyle = {

package/src/components/CarouselCardAccounts/CarouselCardAccounts.tsx

@@ -0,0 +1,113 @@
+import React from 'react'
+import type { StyleProp, ViewStyle } from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { EMPTY_MODES } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
+import Carousel from '../Carousel/Carousel'
+
+// Figma reference width for a single Account Card slot (`Carousel / Card Accounts`).
+const DEFAULT_ITEM_WIDTH = 125
+
+const toNumber = (value: unknown, fallback: number): number => {
+  if (typeof value === 'number') return Number.isFinite(value) ? value : fallback
+  if (typeof value === 'string') {
+    const parsed = parseFloat(value)
+    return Number.isFinite(parsed) ? parsed : fallback
+  }
+  return fallback
+}
+
+export interface CarouselCardAccountsProps {
+  /**
+   * The account cards to render — this is the slot. Pass any number of
+   * `AccountCard` elements (or any node). Each becomes one horizontally
+   * scrollable, snap-aligned item. `modes` are forwarded to every child.
+   */
+  children?: React.ReactNode
+  /** Design-token modes (e.g. `{ 'Color Mode': 'Light' }`). */
+  modes?: Modes
+  /**
+   * Width of each card slot in px. Defaults to the Figma reference width
+   * (`125`). Combined with `gap` this drives the per-card snap interval.
+   */
+  itemWidth?: number
+  /**
+   * Gap between cards in px. Resolved from the `carouselCardAccounts/gap`
+   * token (default `8`) when omitted.
+   */
+  gap?: number
+  /**
+   * Show the pagination dots. Defaults to `false` — the account strip is a
+   * flush, free-scrolling row rather than a paged hero carousel.
+   */
+  showPagination?: boolean
+  /** Loop back to the first card after the last. Default: `false`. */
+  loop?: boolean
+  /** Called when the active (snapped) card index changes. */
+  onIndexChange?: (index: number) => void
+  /** Style override for the outermost container. */
+  style?: StyleProp<ViewStyle>
+}
+
+/**
+ * `CarouselCardAccounts` — a horizontally scrollable strip of compact
+ * `AccountCard`s (the Figma "Carousel / Card Accounts" component).
+ *
+ * It is a thin, opinionated preset over the shared {@link Carousel} scroll
+ * engine — so the snap/scroll/modes-cascade behaviour is **not** duplicated.
+ * Its niche is the account-selection strip: fixed-width card slots, flush
+ * (no peek) padding, per-card snapping, and no pagination by default.
+ *
+ * The cards are a real slot: pass any number of `AccountCard` children
+ * (typically a list of `connected` cards followed by a single `add` card).
+ *
+ * @example
+ * <CarouselCardAccounts modes={modes}>
+ *   <AccountCard title="Personal account" subtitle="**** 5651" imageSource={art} />
+ *   <AccountCard title="Salary account" subtitle="**** 1180" imageSource={art} />
+ *   <AccountCard state="add" title="Add a card" onPress={openLinkFlow} />
+ * </CarouselCardAccounts>
+ */
+function CarouselCardAccounts({
+  children,
+  modes = EMPTY_MODES,
+  itemWidth = DEFAULT_ITEM_WIDTH,
+  gap: gapProp,
+  showPagination = false,
+  loop = false,
+  onIndexChange,
+  style,
+}: CarouselCardAccountsProps) {
+  const gap = gapProp ?? toNumber(getVariableByName('carouselCardAccounts/gap', modes), 8)
+
+  // Outer-container padding is driven by the design's own tokens
+  // (`carouselCardAccounts/padding/*`) rather than the generic `carousel/*`
+  // padding, matching the Figma "Carousel / Card Accounts" frame.
+  const paddingHorizontal = toNumber(
+    getVariableByName('carouselCardAccounts/padding/horizontal', modes),
+    0,
+  )
+  const paddingVertical = toNumber(
+    getVariableByName('carouselCardAccounts/padding/vertical', modes),
+    0,
+  )
+
+  return (
+    <Carousel
+      modes={modes}
+      itemWidth={itemWidth}
+      gap={gap}
+      showPagination={showPagination}
+      loop={loop}
+      autoPlay={false}
+      paddingHorizontal={paddingHorizontal}
+      paddingVertical={paddingVertical}
+      {...(onIndexChange ? { onIndexChange } : {})}
+      style={style}
+    >
+      {children}
+    </Carousel>
+  )
+}
+
+export default React.memo(CarouselCardAccounts)

package/src/components/Checkbox/Checkbox.tsx

@@ -9,6 +9,7 @@ import {
 import Svg, { Path } from 'react-native-svg'
 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'
 
 /**
@@ -116,7 +117,7 @@ const Checkbox = forwardRef<View, CheckboxProps>(function Checkbox({
 
   const size = getVariableByName('checkbox/size', modes) ?? 18
   const radius = getVariableByName('checkbox/radius', modes) ?? 4
-  const strokeWidth = getVariableByName('strokeWidth', modes) ?? 1
+  const strokeWidth = 1
 
   const idleStroke = getVariableByName('checkbox/idle/stroke/color', modes) ?? '#666666'
   const hoverFill = getVariableByName('checkbox/hover/fill/color', modes) ?? 'rgba(0,0,0,0.1)'
@@ -256,11 +257,4 @@ const Checkbox = forwardRef<View, CheckboxProps>(function Checkbox({
   )
 })
 
-function boxShadow(value: string): ViewStyle {
-  if (Platform.OS === 'web') {
-    return { boxShadow: value } as ViewStyle
-  }
-  return {}
-}
-
 export default Checkbox

package/src/components/ChipGroup/ChipGroup.tsx

@@ -36,7 +36,7 @@ function ChipGroup({
     testID,
 }: ChipGroupProps) {
     // --- Token Resolution ---
-    const gap = parseInt(getVariableByName('chipGroup/gap', modes), 10) || 8;
+    const gap = parseInt(getVariableByName('chipGroup/gap', modes), 10);
 
     // --- Styles ---
     const containerStyle: ViewStyle = {

package/src/components/ChipSelect/ChipSelect.tsx

@@ -60,23 +60,23 @@ function ChipSelect({
     };
 
     // --- Token Resolution ---
-    const gap = parseInt(getVariableByName('chipSelect/gap', resolvedModes), 10) || 4;
-    const paddingHorizontal = parseInt(getVariableByName('chipSelect/padding/horizontal', resolvedModes), 10) || 16;
-    const paddingVertical = parseInt(getVariableByName('chipSelect/padding/vertical', resolvedModes), 10) || 0;
-    const radius = parseInt(getVariableByName('chipSelect/radius', resolvedModes), 10) || 999;
+    const gap = parseInt(getVariableByName('chipSelect/gap', resolvedModes), 10);
+    const paddingHorizontal = parseInt(getVariableByName('chipSelect/padding/horizontal', resolvedModes), 10);
+    const paddingVertical = parseInt(getVariableByName('chipSelect/padding/vertical', resolvedModes), 10);
+    const radius = parseInt(getVariableByName('chipSelect/radius', resolvedModes), 10);
 
     // Background
-    const backgroundColor = getVariableByName('chipSelect/background', resolvedModes) || '#f5f5f5';
+    const backgroundColor = getVariableByName('chipSelect/background', resolvedModes);
 
     // Text Styles
-    const textColor = getVariableByName('chipSelect/foreground', resolvedModes) || '#0d0d0f';
-    const fontSize = parseInt(getVariableByName('chipSelect/fontSize', resolvedModes), 10) || 14;
-    const fontFamily = getVariableByName('chipSelect/fontFamily', resolvedModes) || 'JioType Var';
-    const lineHeight = parseInt(getVariableByName('chipSelect/lineHeight', resolvedModes), 10) || 32;
-    const fontWeight = getVariableByName('chipSelect/fontWeight', resolvedModes) || '700';
+    const textColor = getVariableByName('chipSelect/foreground', resolvedModes);
+    const fontSize = parseInt(getVariableByName('chipSelect/fontSize', resolvedModes), 10);
+    const fontFamily = getVariableByName('chipSelect/fontFamily', resolvedModes);
+    const lineHeight = parseInt(getVariableByName('chipSelect/lineHeight', resolvedModes), 10);
+    const fontWeight = getVariableByName('chipSelect/fontWeight', resolvedModes);
 
     // Icon Styles
-    const iconSize = parseInt(getVariableByName('chipSelect/icon/size', resolvedModes), 10) || 16;
+    const iconSize = parseInt(getVariableByName('chipSelect/icon/size', resolvedModes), 10);
 
     // --- Styles ---
     const containerStyle: ViewStyle = {

package/src/components/CircularProgressBar/CircularProgressBar.tsx

@@ -3,7 +3,7 @@ import { StyleSheet, Text, View, type StyleProp, type TextStyle, type ViewStyle
 import Svg, { Circle } from 'react-native-svg'
 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 { IconMinus } from '../../icons/components/IconMinus'
 import type { Modes } from '../../design-tokens'
 
@@ -40,6 +40,12 @@ export type CircularProgressBarProps = CircularProgressBarBaseProps & {
   supportTextStyle?: StyleProp<TextStyle>
   /** Accessibility label for the whole progress component. */
   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 STROKE_WIDTH_RATIO = 8 / 60
@@ -72,8 +78,11 @@ const toFontWeight = (value: unknown, fallback: TextStyle['fontWeight']) => {
 }
 
 const getStrokeColor = (style: StyleProp<ViewStyle>, fallback: string) => {
+  // `StyleSheet.flatten(undefined)` returns `undefined`, so guard before
+  // reading `backgroundColor` — otherwise omitting the optional style prop
+  // crashes with "Cannot read property 'backgroundColor' of undefined".
   const flattened = StyleSheet.flatten(style)
-  return typeof flattened.backgroundColor === 'string'
+  return typeof flattened?.backgroundColor === 'string'
     ? flattened.backgroundColor
     : fallback
 }
@@ -90,6 +99,7 @@ function CircularProgressBar({
   valueStyle,
   supportTextStyle,
   accessibilityLabel,
+  disableTruncation,
   ...rest
 }: CircularProgressBarProps) {
   const { modes: globalModes } = useTokens()
@@ -116,18 +126,18 @@ function CircularProgressBar({
 
   const trackColor = getStrokeColor(
     trackStyle,
-    getVariableByName('circularProgressBar/track/color', trackModes) as string || '#ebebed'
+    getVariableByName('circularProgressBar/track/color', trackModes)
   )
   const progressColor = getStrokeColor(
     progressStyle,
-    getVariableByName('circularProgressBar/progress/color', modes) as string || '#25ab21'
+    getVariableByName('circularProgressBar/progress/color', modes)
   )
-  const iconColor = getVariableByName('circularProgressBar/icon/color', modes) as string || '#666666'
+  const iconColor = getVariableByName('circularProgressBar/icon/color', modes)
   const iconSize = toNumber(getVariableByName('circularProgressBar/icon/size', modes), 24)
 
-  const foreground = getVariableByName('circularProgressBar/foreground', modes) as string || '#0d0d0f'
+  const foreground = getVariableByName('circularProgressBar/foreground', modes)
   const fontSize = toNumber(getVariableByName('circularProgressBar/value/fontSize', modes), 18)
-  const fontFamily = getVariableByName('circularProgressBar/fontFamily', modes) as string || 'JioType Var'
+  const fontFamily = getVariableByName('circularProgressBar/fontFamily', modes)
   const lineHeight = toNumber(getVariableByName('circularProgressBar/value/lineHeight', modes), 21)
   const fontWeight = toFontWeight(getVariableByName('circularProgressBar/value/fontWeight', modes), '700')
 
@@ -232,11 +242,11 @@ function CircularProgressBar({
       {isActive ? (
         <View style={textStackStyle} pointerEvents="none">
           {hasSupportText ? (
-            <Text style={[computedSupportTextStyle, supportTextStyle]} numberOfLines={1}>
+            <Text style={[computedSupportTextStyle, supportTextStyle]} {...resolveTruncation(disableTruncation, 1)}>
               {supportText}
             </Text>
           ) : null}
-          <Text style={[computedValueStyle, valueStyle]} numberOfLines={1}>
+          <Text style={[computedValueStyle, valueStyle]} {...resolveTruncation(disableTruncation, 1)}>
             {displayValue}
           </Text>
         </View>

package/src/components/CircularProgressBarDoted/CircularProgressBarDoted.tsx

@@ -11,7 +11,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 { IconChevronright } from '../../icons/components/IconChevronright'
 import type { Modes } from '../../design-tokens'
 
@@ -58,6 +58,12 @@ export type CircularProgressBarDotedProps = CircularProgressBarDotedBaseProps &
   tierLabelStyle?: StyleProp<TextStyle>
   /** Accessibility label for the whole progress component. */
   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 DEFAULT_DOT_COUNT = 24
@@ -92,7 +98,7 @@ const toFontWeight = (value: unknown, fallback: TextStyle['fontWeight']) => {
 
 const getBackgroundColor = (style: StyleProp<ViewStyle>, fallback: string) => {
   const flattened = StyleSheet.flatten(style)
-  return typeof flattened.backgroundColor === 'string'
+  return flattened && typeof flattened.backgroundColor === 'string'
     ? flattened.backgroundColor
     : fallback
 }
@@ -118,6 +124,7 @@ function CircularProgressBarDoted({
   scoreLabelStyle,
   tierLabelStyle,
   accessibilityLabel,
+  disableTruncation,
   onLayout,
   ...rest
 }: CircularProgressBarDotedProps) {
@@ -140,11 +147,11 @@ function CircularProgressBarDoted({
 
   const trackDotColor = getBackgroundColor(
     trackDotStyle,
-    getVariableByName('circularProgressBarDoted/trackDot/bg', modes) as string || '#ebebed'
+    getVariableByName('circularProgressBarDoted/trackDot/bg', modes)
   )
   const progressDotColor = getBackgroundColor(
     progressDotStyle,
-    getVariableByName('circularProgressBarDoted/progressDot/bg', modes) as string || '#25ab21'
+    getVariableByName('circularProgressBarDoted/progressDot/bg', modes)
   )
 
   const contentGap = toNumber(getVariableByName('circularProgressBarDoted/gap', modes), 12)
@@ -153,21 +160,21 @@ function CircularProgressBarDoted({
   const scoreTrendGap = toNumber(getVariableByName('circularProgressBarDoted/scoreTrend/gap', modes), 2)
   const scoreTrendHeight = toNumber(getVariableByName('circularProgressBarDoted/scoreTrend/height', modes), 24)
 
-  const typographyFontFamily = getVariableByName('Typography/Font Family', modes) as string || 'JioType Var'
-  const labelColor = getVariableByName('circularProgressBarDoted/label/color', modes) as string || '#080d1a'
+  const typographyFontFamily = getVariableByName('Typography/Font Family', modes)
+  const labelColor = getVariableByName('circularProgressBarDoted/label/color', modes)
   const labelFontSize = toNumber(getVariableByName('Typography/Size/Body/XS', modes), 12)
   const labelFontWeight = toFontWeight(getVariableByName('Typography/Font Weight/Body Low (Regular)', modes), '400')
 
-  const scoreColor = getVariableByName('circularProgressBarDoted/scoreLabel/color', modes) as string || '#080d1a'
+  const scoreColor = getVariableByName('circularProgressBarDoted/scoreLabel/color', modes)
   const scoreFontSize = toNumber(getVariableByName('circularProgressBarDoted/scoreLabel/fontSize', modes), 56)
-  const scoreFontFamily = getVariableByName('circularProgressBarDoted/scoreLabel/fontFamily', modes) as string || 'JioType Var'
+  const scoreFontFamily = getVariableByName('circularProgressBarDoted/scoreLabel/fontFamily', modes)
   const scoreLineHeight = toNumber(getVariableByName('circularProgressBarDoted/scoreLabel/lineHeight', modes), 56)
   const scoreFontWeight = toFontWeight(getVariableByName('circularProgressBarDoted/scoreLabel/fontWeight', modes), '900')
 
-  const tierColor = getVariableByName('circularProgressBarDoted/tierLabel/color', modes) as string || '#080d1a'
+  const tierColor = getVariableByName('circularProgressBarDoted/tierLabel/color', modes)
   const tierFontSize = toNumber(getVariableByName('Typography/Size/Body/M', modes), 16)
   const tierFontWeight = toFontWeight(getVariableByName('Typography/Font Weight/Body High', modes), '700')
-  const iconColor = getVariableByName('circularProgressBarDoted/icon/color', modes) as string || '#303338'
+  const iconColor = getVariableByName('circularProgressBarDoted/icon/color', modes)
   const iconSize = toNumber(getVariableByName('circularProgressBarDoted/icon/size', modes), 24)
 
   const dots = useMemo(
@@ -277,7 +284,7 @@ function CircularProgressBarDoted({
 
   const trendContent = (
     <>
-      <Text numberOfLines={1} style={[computedTierLabelStyle, tierLabelStyle]}>
+      <Text {...resolveTruncation(disableTruncation, 1)} style={[computedTierLabelStyle, tierLabelStyle]}>
         {tierLabel}
       </Text>
       {showChevron ? (

package/src/components/CircularRating/CircularRating.tsx

@@ -9,7 +9,7 @@ import {
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import Icon from '../../icons/Icon'
-import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import { EMPTY_MODES, cloneChildrenWithModes, resolveTruncation } from '../../utils/react-utils'
 import CircularProgressBarDoted from '../CircularProgressBarDoted/CircularProgressBarDoted'
 import Nudge from '../Nudge/Nudge'
 import type { Modes } from '../../design-tokens'
@@ -57,6 +57,12 @@ export type CircularRatingProps = CircularRatingBaseProps & {
   nudgeStyle?: StyleProp<ViewStyle>
   /** Accessibility label for the whole component. */
   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
 }
 
 interface CircularRatingTokens {
@@ -99,9 +105,9 @@ function resolveCircularRatingTokens(modes: Modes): CircularRatingTokens {
 
   const footerGap = toNumber(getVariableByName('circularRating/footer/gap', modes), 4)
   const footerHeight = toNumber(getVariableByName('circularRating/footer/height', modes), 16)
-  const footerTextColor = getVariableByName('circularRating/footer/text/color', modes) || '#0d0d0f'
+  const footerTextColor = getVariableByName('circularRating/footer/text/color', modes)
   const footerTextFontSize = toNumber(getVariableByName('circularRating/footer/text/fontSize', modes), 12)
-  const footerTextFontFamily = getVariableByName('circularRating/footer/text/fontFamily', modes) || 'JioType Var'
+  const footerTextFontFamily = getVariableByName('circularRating/footer/text/fontFamily', modes)
   const footerTextLineHeight = toNumber(getVariableByName('circularRating/footer/text/lineHeight', modes), 16)
   const footerTextFontWeight = toFontWeight(
     getVariableByName('circularRating/footer/text/fontWeight', modes),
@@ -135,7 +141,7 @@ function resolveCircularRatingTokens(modes: Modes): CircularRatingTokens {
       lineHeight: footerTextLineHeight,
       textAlign: 'center',
     },
-    footerIconColor: (getVariableByName('circularRating/footer/icon/color', modes) || '#1a1c1f') as string,
+    footerIconColor: (getVariableByName('circularRating/footer/icon/color', modes)) as string,
     footerIconSize: toNumber(getVariableByName('circularRating/footer/icon/size', modes), 16),
   }
 }
@@ -161,6 +167,7 @@ function CircularRating({
   footerTextStyle,
   nudgeStyle,
   accessibilityLabel,
+  disableTruncation,
   ...rest
 }: CircularRatingProps) {
   const { modes: globalModes } = useTokens()
@@ -207,7 +214,7 @@ function CircularRating({
       <View style={[tokens.footerStyle, footerStyle]}>
         {processedFooterSlot || (
           <>
-            <Text numberOfLines={1} style={[tokens.footerTextStyle, footerTextStyle]}>
+            <Text {...resolveTruncation(disableTruncation, 1)} style={[tokens.footerTextStyle, footerTextStyle]}>
               {footerText}
             </Text>
             {showFooterIcon ? (

package/src/components/ClusterBubble/ClusterBubble.tsx

@@ -11,7 +11,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 type { Modes } from '../../design-tokens'
 
 /** Where the value/label text sits relative to the circle. */
@@ -76,6 +76,12 @@ export type ClusterBubbleProps = {
     modes?: Modes
     /** Accessibility label. Defaults to a `value + label` composite. */
     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 DEFAULT_FILL = '#5d00b5'
@@ -149,6 +155,7 @@ function ClusterBubble({
     style,
     modes: propModes = EMPTY_MODES,
     accessibilityLabel,
+    disableTruncation,
 }: ClusterBubbleProps) {
     const { modes: globalModes } = useTokens()
     const modes = useMemo(() => ({ ...globalModes, ...propModes }), [globalModes, propModes])
@@ -207,7 +214,7 @@ function ClusterBubble({
         if (node === undefined || node === null || node === false) return null
         if (typeof node === 'string' || typeof node === 'number') {
             return (
-                <Text style={[baseStyle, override]} numberOfLines={2}>
+                <Text style={[baseStyle, override]} {...resolveTruncation(disableTruncation, 2)}>
                     {node}
                 </Text>
             )