jfs-components 0.1.8 → 0.1.17

package/lib/module/components/CardFeedback/CardFeedback.js

@@ -26,11 +26,11 @@ export function CardFeedback({
     ...propModes
   };
   // Container Tokens
-  const backgroundColor = getVariableByName('cardFeedback/background', modes) || '#dbf0d9';
-  const radius = parseFloat(getVariableByName('cardFeedback/radius', modes) || '12');
-  const gap = parseFloat(getVariableByName('cardFeedback/gap', modes) || '8');
-  const paddingHorizontal = parseFloat(getVariableByName('cardFeedback/padding/horizontal', modes) || '12');
-  const paddingVertical = parseFloat(getVariableByName('cardFeedback/padding/vertical', modes) || '12');
+  const backgroundColor = getVariableByName('cardFeedback/background', modes);
+  const radius = parseFloat(getVariableByName('cardFeedback/radius', modes));
+  const gap = parseFloat(getVariableByName('cardFeedback/gap', modes));
+  const paddingHorizontal = parseFloat(getVariableByName('cardFeedback/padding/horizontal', modes));
+  const paddingVertical = parseFloat(getVariableByName('cardFeedback/padding/vertical', modes));
   const containerStyle = {
     backgroundColor,
     borderRadius: radius,
@@ -69,7 +69,7 @@ export function Icon({
 }) {
   const context = useContext(CardFeedbackContext);
   const modes = propModes || context.modes || {};
-  const size = parseFloat(getVariableByName('cardFeedback/icon/size', modes) || '20');
+  const size = parseFloat(getVariableByName('cardFeedback/icon/size', modes));
   // Color for the icon itself
   const color = getVariableByName('appearanceFeedback/cardFeedback/icon/color', modes);
   console.log(color);
@@ -115,7 +115,7 @@ export function Content({
 }) {
   const context = useContext(CardFeedbackContext);
   const modes = propModes || context.modes || {};
-  const gap = parseFloat(getVariableByName('cardFeedback/text/gap', modes) || '8');
+  const gap = parseFloat(getVariableByName('cardFeedback/text/gap', modes));
 
   // Pass modes to children (Title, Body, etc.)
   const childrenWithModes = React.Children.map(children, child => {
@@ -149,11 +149,11 @@ export function Title({
 }) {
   const context = useContext(CardFeedbackContext);
   const modes = propModes || context.modes || {};
-  const color = getVariableByName('cardFeedback/title/color', modes) || '#0f0d0a';
-  const fontSize = parseFloat(getVariableByName('cardFeedback/title/fontSize', modes) || '14');
-  const fontFamily = getVariableByName('cardFeedback/title/fontFamily', modes) || 'JioType Var';
-  const lineHeight = parseFloat(getVariableByName('cardFeedback/title/lineHeight', modes) || '17');
-  const fontWeight = getVariableByName('cardFeedback/title/fontWeight', modes) || '500';
+  const color = getVariableByName('cardFeedback/title/color', modes);
+  const fontSize = parseFloat(getVariableByName('cardFeedback/title/fontSize', modes));
+  const fontFamily = getVariableByName('cardFeedback/title/fontFamily', modes);
+  const lineHeight = parseFloat(getVariableByName('cardFeedback/title/lineHeight', modes));
+  const fontWeight = getVariableByName('cardFeedback/title/fontWeight', modes);
   const textStyle = {
     color,
     fontSize,
@@ -178,11 +178,11 @@ export function Body({
 }) {
   const context = useContext(CardFeedbackContext);
   const modes = propModes || context.modes || {};
-  const color = getVariableByName('cardFeedback/body/color', modes) || '#1f1a14';
-  const fontSize = parseFloat(getVariableByName('cardFeedback/body/fontSize', modes) || '12');
-  const fontFamily = getVariableByName('cardFeedback/body/fontFamily', modes) || 'JioType Var';
-  const lineHeight = parseFloat(getVariableByName('cardFeedback/body/lineHeight', modes) || '16');
-  const fontWeight = getVariableByName('cardFeedback/body/fontWeight', modes) || '400';
+  const color = getVariableByName('cardFeedback/body/color', modes);
+  const fontSize = parseFloat(getVariableByName('cardFeedback/body/fontSize', modes));
+  const fontFamily = getVariableByName('cardFeedback/body/fontFamily', modes);
+  const lineHeight = parseFloat(getVariableByName('cardFeedback/body/lineHeight', modes));
+  const fontWeight = getVariableByName('cardFeedback/body/fontWeight', modes);
   const textStyle = {
     color,
     fontSize,
@@ -207,7 +207,7 @@ export function Action({
 }) {
   const context = useContext(CardFeedbackContext);
   const modes = propModes || context.modes || {};
-  const gap = parseFloat(getVariableByName('cardFeedback/actionSlot/gap', modes) || '0');
+  const gap = parseFloat(getVariableByName('cardFeedback/actionSlot/gap', modes));
 
   // "Maximise existing component usage" -> Pass modes to children (Buttons)
   const childrenWithModes = React.Children.map(children, child => {

package/lib/module/components/CardFinancialCondition/CardFinancialCondition.js

@@ -30,26 +30,26 @@ const toFontWeight = (value, fallback) => {
   return fallback;
 };
 function resolveCardFinancialConditionTokens(modes) {
-  const background = getVariableByName('financialConditionCard/background', modes) || '#ffffff';
+  const background = getVariableByName('financialConditionCard/background', modes);
   const radius = toNumber(getVariableByName('financialConditionCard/radius', modes), 16);
   const paddingH = toNumber(getVariableByName('financialConditionCard/padding/horizontal', modes), 16);
   const paddingV = toNumber(getVariableByName('financialConditionCard/padding/vertical', modes), 16);
   const gap = toNumber(getVariableByName('financialConditionCard/gap', modes), 8);
   const headerGap = toNumber(getVariableByName('financialConditionCard/header/gap', modes), 16);
   const textContentGap = toNumber(getVariableByName('financialConditionCard/textContent/gap', modes), 8);
-  const titleColor = getVariableByName('financialConditionCard/title/color', modes) || '#0c0d10';
+  const titleColor = getVariableByName('financialConditionCard/title/color', modes);
   const titleFontSize = toNumber(getVariableByName('financialConditionCard/title/fontSize', modes), 16);
-  const titleFontFamily = getVariableByName('financialConditionCard/title/fontFamily', modes) || 'JioType Var';
+  const titleFontFamily = getVariableByName('financialConditionCard/title/fontFamily', modes);
   const titleLineHeight = toNumber(getVariableByName('financialConditionCard/title/lineHeight', modes), 18);
   const titleFontWeight = toFontWeight(getVariableByName('financialConditionCard/title/fontWeight', modes), '700');
-  const bodyColor = getVariableByName('financialConditionCard/body/color', modes) || '#0c0d10';
+  const bodyColor = getVariableByName('financialConditionCard/body/color', modes);
   const bodyFontSize = toNumber(getVariableByName('financialConditionCard/body/fontSize', modes), 14);
-  const bodyFontFamily = getVariableByName('financialConditionCard/body/fontFamily', modes) || 'JioType Var';
+  const bodyFontFamily = getVariableByName('financialConditionCard/body/fontFamily', modes);
   const bodyLineHeight = toNumber(getVariableByName('financialConditionCard/body/lineHeight', modes), 17);
   const bodyFontWeight = toFontWeight(getVariableByName('financialConditionCard/body/fontWeight', modes), '400');
-  const nudgeBodyColor = getVariableByName('nudge/body/color', modes) || '#1a1c1f';
+  const nudgeBodyColor = getVariableByName('nudge/body/color', modes);
   const nudgeBodyFontSize = toNumber(getVariableByName('nudge/body/fontSize', modes), 12);
-  const nudgeBodyFontFamily = getVariableByName('nudge/body/fontFamily', modes) || 'JioType Var';
+  const nudgeBodyFontFamily = getVariableByName('nudge/body/fontFamily', modes);
   const nudgeBodyLineHeight = toNumber(getVariableByName('nudge/body/lineHeight', modes), 16);
   const nudgeBodyFontWeight = toFontWeight(getVariableByName('nudge/body/fontWeight', modes), '500');
   return {

package/lib/module/components/CardInsight/CardInsight.js

@@ -31,12 +31,13 @@ function CardInsight({
   style
 }) {
   const background = getVariableByName('cardInsight/background', modes) ?? '#ffffff';
-  const radius = getVariableByName('cardInsight/radius', modes) ?? 16;
+  const radius = getVariableByName('cardInsight/radius', modes) ?? 12;
+  const borderWidth = getVariableByName('cardInsight/borderWidth', modes) ?? 1;
+  const borderColor = getVariableByName('cardInsight/border/color', modes) ?? '#ffffff';
   const paddingHorizontal = getVariableByName('cardInsight/padding/horizontal', modes) ?? 12;
   const paddingVertical = getVariableByName('cardInsight/padding/vertical', modes) ?? 16;
   const gap = getVariableByName('cardInsight/gap', modes) ?? 12;
   const contentGap = getVariableByName('cardInsight/contentGap', modes) ?? 8;
-  const width = getVariableByName('cardInsight/width', modes) ?? 356;
   const slotBackground = getVariableByName('cardInsight/slot/background', modes) ?? '#ffffff';
   const headerGap = getVariableByName('cardInsight/header/gap', modes) ?? 8;
   const textGap = getVariableByName('cardInsight/text/gap', modes) ?? 4;
@@ -66,6 +67,7 @@ function CardInsight({
   const renderSlot = () => {
     if (!children) {
       return /*#__PURE__*/_jsx(SavingsGoalSummary, {
+        label: "Credit usage",
         modes: modes
       });
     }
@@ -101,9 +103,10 @@ function CardInsight({
   const showDivider = footerNode !== null && divider !== false && divider !== null;
   return /*#__PURE__*/_jsxs(View, {
     style: [{
-      width,
       backgroundColor: background,
       borderRadius: radius,
+      borderWidth,
+      borderColor,
       paddingHorizontal,
       paddingVertical,
       gap,

package/lib/module/components/Carousel/Carousel.js

@@ -35,16 +35,18 @@ export function Carousel({
   loop = true,
   gap: gapProp,
   itemWidth: itemWidthProp,
+  paddingHorizontal: paddingHorizontalProp,
+  paddingVertical: paddingVerticalProp,
   onIndexChange,
   style
 }) {
   // ---- Token resolution ----
-  const tokenGap = parseFloat(getVariableByName('carousel/gap', modes) || '12');
+  const tokenGap = parseFloat(getVariableByName('carousel/gap', modes));
   const gap = gapProp ?? tokenGap;
-  const containerPaddingH = parseFloat(getVariableByName('carousel/padding/horizontal', modes) || '0');
-  const containerPaddingV = parseFloat(getVariableByName('carousel/padding/vertical', modes) || '0');
+  const containerPaddingH = parseFloat(getVariableByName('carousel/padding/horizontal', modes));
+  const containerPaddingV = parseFloat(getVariableByName('carousel/padding/vertical', modes));
   // Outer container max height per Figma (`carousel/maxHeight`).
-  const maxHeight = parseFloat(getVariableByName('carousel/maxHeight', modes) || '280');
+  const maxHeight = parseFloat(getVariableByName('carousel/maxHeight', modes));
   // Spacing between the cards row and the pagination dots uses `carousel/gap`.
   const paginationOffset = gap;
 
@@ -155,12 +157,16 @@ export function Carousel({
   }), [modes, activeIndex, totalItems, goTo, goNext, goPrev]);
 
   // ---- 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 = {
-    paddingVertical: containerPaddingV,
+    paddingVertical: effectivePaddingV,
     maxHeight
   };
   const contentContainerStyle = {
-    paddingHorizontal: containerPaddingH * 2,
+    paddingHorizontal: effectivePaddingH,
     gap,
     // Align items to the start so snap works correctly
     alignItems: 'flex-start'
@@ -266,12 +272,12 @@ export function Pagination({
 
   // 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');
-  const dotActiveWidth = parseFloat(getVariableByName('carousel/pagination/indicator/activeWidth', modes) || '16');
-  const dotGap = parseFloat(getVariableByName('carousel/pagination/gap', modes) || '4');
-  const dotColor = getVariableByName('carousel/pagination/indicator/inactiveColor', modes) || 'rgba(0,0,0,0.3)';
-  const dotActiveColor = getVariableByName('carousel/pagination/indicator/activeColor', modes) || '#170d0a';
-  const dotRadius = parseFloat(getVariableByName('carousel/pagination/indicator/radius', modes) || '9999');
+  const dotSize = parseFloat(getVariableByName('carousel/pagination/indicator/size', modes));
+  const dotActiveWidth = parseFloat(getVariableByName('carousel/pagination/indicator/activeWidth', modes));
+  const dotGap = parseFloat(getVariableByName('carousel/pagination/gap', modes));
+  const dotColor = getVariableByName('carousel/pagination/indicator/inactiveColor', modes);
+  const dotActiveColor = getVariableByName('carousel/pagination/indicator/activeColor', modes);
+  const dotRadius = parseFloat(getVariableByName('carousel/pagination/indicator/radius', modes));
   const containerStyle = {
     flexDirection: 'row',
     justifyContent: 'center',

package/lib/module/components/CarouselCardAccounts/CarouselCardAccounts.js

@@ -0,0 +1,71 @@
+"use strict";
+
+import React from 'react';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { EMPTY_MODES } from '../../utils/react-utils';
+import Carousel from '../Carousel/Carousel';
+
+// Figma reference width for a single Account Card slot (`Carousel / Card Accounts`).
+import { jsx as _jsx } from "react/jsx-runtime";
+const DEFAULT_ITEM_WIDTH = 125;
+const toNumber = (value, fallback) => {
+  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;
+};
+/**
+ * `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
+}) {
+  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 /*#__PURE__*/_jsx(Carousel, {
+    modes: modes,
+    itemWidth: itemWidth,
+    gap: gap,
+    showPagination: showPagination,
+    loop: loop,
+    autoPlay: false,
+    paddingHorizontal: paddingHorizontal,
+    paddingVertical: paddingVertical,
+    ...(onIndexChange ? {
+      onIndexChange
+    } : {}),
+    style: style,
+    children: children
+  });
+}
+export default /*#__PURE__*/React.memo(CarouselCardAccounts);

package/lib/module/components/Checkbox/Checkbox.js

@@ -5,6 +5,7 @@ import { Pressable, Platform, View } 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 { boxShadow } from '../../utils/shadow';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Tracks whether the last user interaction was a keyboard event (Tab).
@@ -97,7 +98,7 @@ const Checkbox = /*#__PURE__*/forwardRef(function Checkbox({
   } = useFocusVisible();
   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)';
   const hoverStroke = getVariableByName('checkbox/hover/stroke/color', modes) ?? '#666666';
@@ -223,12 +224,4 @@ const Checkbox = /*#__PURE__*/forwardRef(function Checkbox({
     })
   });
 });
-function boxShadow(value) {
-  if (Platform.OS === 'web') {
-    return {
-      boxShadow: value
-    };
-  }
-  return {};
-}
 export default Checkbox;

package/lib/module/components/ChipGroup/ChipGroup.js

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

package/lib/module/components/ChipSelect/ChipSelect.js

@@ -27,23 +27,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 = {

package/lib/module/components/CircularProgressBar/CircularProgressBar.js

@@ -5,7 +5,7 @@ import { StyleSheet, Text, View } from 'react-native';
 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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const STROKE_WIDTH_RATIO = 8 / 60;
@@ -30,8 +30,11 @@ const toFontWeight = (value, fallback) => {
   return fallback;
 };
 const getStrokeColor = (style, fallback) => {
+  // `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' ? flattened.backgroundColor : fallback;
+  return typeof flattened?.backgroundColor === 'string' ? flattened.backgroundColor : fallback;
 };
 function CircularProgressBar({
   value = 70,
@@ -45,6 +48,7 @@ function CircularProgressBar({
   valueStyle,
   supportTextStyle,
   accessibilityLabel,
+  disableTruncation,
   ...rest
 }) {
   const {
@@ -72,13 +76,13 @@ function CircularProgressBar({
   const radius = Math.max(0, (size - strokeWidth) / 2);
   const center = size / 2;
   const circumference = 2 * Math.PI * radius;
-  const trackColor = getStrokeColor(trackStyle, getVariableByName('circularProgressBar/track/color', trackModes) || '#ebebed');
-  const progressColor = getStrokeColor(progressStyle, getVariableByName('circularProgressBar/progress/color', modes) || '#25ab21');
-  const iconColor = getVariableByName('circularProgressBar/icon/color', modes) || '#666666';
+  const trackColor = getStrokeColor(trackStyle, getVariableByName('circularProgressBar/track/color', trackModes));
+  const progressColor = getStrokeColor(progressStyle, getVariableByName('circularProgressBar/progress/color', modes));
+  const iconColor = getVariableByName('circularProgressBar/icon/color', modes);
   const iconSize = toNumber(getVariableByName('circularProgressBar/icon/size', modes), 24);
-  const foreground = getVariableByName('circularProgressBar/foreground', modes) || '#0d0d0f';
+  const foreground = getVariableByName('circularProgressBar/foreground', modes);
   const fontSize = toNumber(getVariableByName('circularProgressBar/value/fontSize', modes), 18);
-  const fontFamily = getVariableByName('circularProgressBar/fontFamily', modes) || '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');
   const supportFontSize = toNumber(getVariableByName('circularProgressBar/supportText/fontSize', modes), 11);
@@ -169,11 +173,11 @@ function CircularProgressBar({
       pointerEvents: "none",
       children: [hasSupportText ? /*#__PURE__*/_jsx(Text, {
         style: [computedSupportTextStyle, supportTextStyle],
-        numberOfLines: 1,
+        ...resolveTruncation(disableTruncation, 1),
         children: supportText
       }) : null, /*#__PURE__*/_jsx(Text, {
         style: [computedValueStyle, valueStyle],
-        numberOfLines: 1,
+        ...resolveTruncation(disableTruncation, 1),
         children: displayValue
       })]
     }) : /*#__PURE__*/_jsx(IconMinus, {

package/lib/module/components/CircularProgressBarDoted/CircularProgressBarDoted.js

@@ -4,7 +4,7 @@ import React, { useMemo, useState } from 'react';
 import { Pressable, StyleSheet, Text, View } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { useTokens } from '../../design-tokens/JFSThemeProvider';
-import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
+import { EMPTY_MODES, cloneChildrenWithModes, resolveTruncation } from '../../utils/react-utils';
 import { IconChevronright } from '../../icons/components/IconChevronright';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const DEFAULT_DOT_COUNT = 24;
@@ -31,7 +31,7 @@ const toFontWeight = (value, fallback) => {
 };
 const getBackgroundColor = (style, fallback) => {
   const flattened = StyleSheet.flatten(style);
-  return typeof flattened.backgroundColor === 'string' ? flattened.backgroundColor : fallback;
+  return flattened && typeof flattened.backgroundColor === 'string' ? flattened.backgroundColor : fallback;
 };
 function CircularProgressBarDoted({
   value = 72,
@@ -54,6 +54,7 @@ function CircularProgressBarDoted({
   scoreLabelStyle,
   tierLabelStyle,
   accessibilityLabel,
+  disableTruncation,
   onLayout,
   ...rest
 }) {
@@ -74,26 +75,26 @@ function CircularProgressBarDoted({
   const outerDotSize = dotSize;
   const ringSize = layoutSize;
   const ringRadius = Math.max(0, (ringSize - outerDotSize) / 2);
-  const trackDotColor = getBackgroundColor(trackDotStyle, getVariableByName('circularProgressBarDoted/trackDot/bg', modes) || '#ebebed');
-  const progressDotColor = getBackgroundColor(progressDotStyle, getVariableByName('circularProgressBarDoted/progressDot/bg', modes) || '#25ab21');
+  const trackDotColor = getBackgroundColor(trackDotStyle, getVariableByName('circularProgressBarDoted/trackDot/bg', modes));
+  const progressDotColor = getBackgroundColor(progressDotStyle, getVariableByName('circularProgressBarDoted/progressDot/bg', modes));
   const contentGap = toNumber(getVariableByName('circularProgressBarDoted/gap', modes), 12);
   const scoreTierGap = toNumber(getVariableByName('circularProgressBarDoted/scoreTier/gap', modes), 6);
   const scoreTierWidth = toNumber(getVariableByName('circularProgressBarDoted/scoreTier/width', modes), 116);
   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) || 'JioType Var';
-  const labelColor = getVariableByName('circularProgressBarDoted/label/color', modes) || '#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) || '#080d1a';
+  const scoreColor = getVariableByName('circularProgressBarDoted/scoreLabel/color', modes);
   const scoreFontSize = toNumber(getVariableByName('circularProgressBarDoted/scoreLabel/fontSize', modes), 56);
-  const scoreFontFamily = getVariableByName('circularProgressBarDoted/scoreLabel/fontFamily', modes) || '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) || '#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) || '#303338';
+  const iconColor = getVariableByName('circularProgressBarDoted/icon/color', modes);
   const iconSize = toNumber(getVariableByName('circularProgressBarDoted/icon/size', modes), 24);
   const dots = useMemo(() => Array.from({
     length: resolvedDotCount
@@ -188,7 +189,7 @@ function CircularProgressBarDoted({
   };
   const trendContent = /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Text, {
-      numberOfLines: 1,
+      ...resolveTruncation(disableTruncation, 1),
       style: [computedTierLabelStyle, tierLabelStyle],
       children: tierLabel
     }), showChevron ? /*#__PURE__*/_jsx(IconChevronright, {

package/lib/module/components/CircularRating/CircularRating.js

@@ -5,7 +5,7 @@ import { Text, View } from 'react-native';
 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 { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
@@ -33,9 +33,9 @@ function resolveCircularRatingTokens(modes) {
   const padding = toNumber(getVariableByName('circularRating/padding', modes), 10);
   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), '400');
   return {
@@ -65,7 +65,7 @@ function resolveCircularRatingTokens(modes) {
       lineHeight: footerTextLineHeight,
       textAlign: 'center'
     },
-    footerIconColor: getVariableByName('circularRating/footer/icon/color', modes) || '#1a1c1f',
+    footerIconColor: getVariableByName('circularRating/footer/icon/color', modes),
     footerIconSize: toNumber(getVariableByName('circularRating/footer/icon/size', modes), 16)
   };
 }
@@ -90,6 +90,7 @@ function CircularRating({
   footerTextStyle,
   nudgeStyle,
   accessibilityLabel,
+  disableTruncation,
   ...rest
 }) {
   const {
@@ -129,7 +130,7 @@ function CircularRating({
       style: [tokens.footerStyle, footerStyle],
       children: processedFooterSlot || /*#__PURE__*/_jsxs(_Fragment, {
         children: [/*#__PURE__*/_jsx(Text, {
-          numberOfLines: 1,
+          ...resolveTruncation(disableTruncation, 1),
           style: [tokens.footerTextStyle, footerTextStyle],
           children: footerText
         }), showFooterIcon ? /*#__PURE__*/_jsx(Icon, {

package/lib/module/components/ClusterBubble/ClusterBubble.js

@@ -4,7 +4,7 @@ import React, { useMemo, useState } from 'react';
 import { Pressable, StyleSheet, Text, View } 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';
 
 /** Where the value/label text sits relative to the circle. */
 
@@ -83,7 +83,8 @@ function ClusterBubble({
   circleStyle,
   style,
   modes: propModes = EMPTY_MODES,
-  accessibilityLabel
+  accessibilityLabel,
+  disableTruncation
 }) {
   const {
     modes: globalModes
@@ -130,7 +131,7 @@ function ClusterBubble({
     if (typeof node === 'string' || typeof node === 'number') {
       return /*#__PURE__*/_jsx(Text, {
         style: [baseStyle, override],
-        numberOfLines: 2,
+        ...resolveTruncation(disableTruncation, 2),
         children: node
       });
     }