jfs-components 0.1.8 → 0.1.17

package/lib/module/components/ThreadHero/ThreadHero.js

@@ -3,7 +3,7 @@
 import React, { isValidElement, cloneElement } from 'react';
 import { View, Text } 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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * ThreadHero component displaying a central identity with avatar, title, subtitle, and caption.
@@ -14,32 +14,33 @@ export default function ThreadHero({
   caption,
   renderAvatar,
   modes = EMPTY_MODES,
-  style
+  style,
+  disableTruncation
 }) {
   // 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 = {
@@ -95,14 +96,12 @@ export default function ThreadHero({
         children: title
       }) : null, subtitle ? /*#__PURE__*/_jsx(Text, {
         style: subtitleStyle,
-        numberOfLines: 1,
-        ellipsizeMode: "tail",
+        ...resolveTruncation(disableTruncation, 1, 'tail'),
         children: subtitle
       }) : null]
     }), caption ? /*#__PURE__*/_jsx(Text, {
       style: captionStyle,
-      numberOfLines: 1,
-      ellipsizeMode: "tail",
+      ...resolveTruncation(disableTruncation, 1, 'tail'),
       children: caption
     }) : null]
   });

package/lib/module/components/Title/Title.js

@@ -4,7 +4,7 @@ import React from 'react';
 import { View, Text } 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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const TEXT_ALIGN_MAP = {
   Left: 'left',
@@ -19,6 +19,8 @@ function Title({
   textStyle,
   subtitleStyle,
   numberOfLines,
+  disableTruncation,
+  singleLine,
   accessibilityLabel,
   accessibilityHint,
   ...rest
@@ -30,12 +32,12 @@ function Title({
     ...globalModes,
     ...propModes
   };
-  const paddingHorizontal = getVariableByName('title/padding/horizontal', modes) || 16;
-  const paddingVertical = getVariableByName('title/padding/vertical', modes) || 8;
-  const gap = getVariableByName('title/gap', modes) || 8;
-  const labelColor = getVariableByName('title/label/color', modes) || '#0d0d0f';
-  const fontSize = getVariableByName('title/fontSize', modes) || 26;
-  const rawLineHeight = getVariableByName('title/lineHeight', modes) || 26;
+  const paddingHorizontal = getVariableByName('title/padding/horizontal', modes);
+  const paddingVertical = getVariableByName('title/padding/vertical', modes);
+  const gap = getVariableByName('title/gap', modes);
+  const labelColor = getVariableByName('title/label/color', modes);
+  const fontSize = getVariableByName('title/fontSize', modes);
+  const rawLineHeight = 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
@@ -43,15 +45,15 @@ function Title({
   // always fit. When a downstream token already provides adequate leading,
   // the original value is preserved.
   const lineHeight = Math.max(rawLineHeight, Math.ceil(fontSize * 1.2));
-  const fontFamily = getVariableByName('title/fontFamily', modes) || 'System';
-  const fontWeightRaw = getVariableByName('title/fontWeight', modes) || 900;
+  const fontFamily = getVariableByName('title/fontFamily', modes);
+  const fontWeightRaw = getVariableByName('title/fontWeight', modes);
   const fontWeight = typeof fontWeightRaw === 'number' ? fontWeightRaw.toString() : fontWeightRaw;
-  const subtitleColor = getVariableByName('pageSubtitle/label/color', modes) || '#0d0d0f';
-  const subtitleFontSize = getVariableByName('pageSubtitle/fontSize', modes) || 14;
-  const subtitleRawLineHeight = getVariableByName('pageSubtitle/lineHeight', modes) || 18;
+  const subtitleColor = getVariableByName('pageSubtitle/label/color', modes);
+  const subtitleFontSize = getVariableByName('pageSubtitle/fontSize', modes);
+  const subtitleRawLineHeight = getVariableByName('pageSubtitle/lineHeight', modes);
   const subtitleLineHeight = Math.max(subtitleRawLineHeight, Math.ceil(subtitleFontSize * 1.2));
-  const subtitleFontFamily = getVariableByName('pageSubtitle/fontFamily', modes) || 'System';
-  const subtitleFontWeightRaw = getVariableByName('pageSubtitle/fontWeight', modes) || 500;
+  const subtitleFontFamily = getVariableByName('pageSubtitle/fontFamily', modes);
+  const subtitleFontWeightRaw = getVariableByName('pageSubtitle/fontWeight', modes);
   const subtitleFontWeight = typeof subtitleFontWeightRaw === 'number' ? subtitleFontWeightRaw.toString() : subtitleFontWeightRaw;
   const containerStyle = {
     flexDirection: 'column',
@@ -80,6 +82,26 @@ function Title({
     flexShrink: 1,
     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 /*#__PURE__*/_jsxs(View, {
     style: [containerStyle, style],
     accessibilityRole: "header",
@@ -87,13 +109,14 @@ function Title({
     accessibilityHint: accessibilityHint,
     ...rest,
     children: [/*#__PURE__*/_jsx(Text, {
-      style: [titleTextStyle, textStyle],
-      numberOfLines: numberOfLines !== undefined ? numberOfLines : 1,
+      style: [titleTextStyle, textStyle, titleLayoutStyle],
+      ...titleTruncation,
       accessibilityElementsHidden: true,
       importantForAccessibility: "no",
       children: title
     }), subtitle != null && /*#__PURE__*/_jsx(Text, {
-      style: [subtitleTextStyle, subtitleStyle],
+      style: [subtitleTextStyle, subtitleStyle, subtitleLayoutStyle],
+      ...subtitleTruncation,
       accessibilityElementsHidden: true,
       importantForAccessibility: "no",
       children: subtitle

package/lib/module/components/Toast/Toast.js

@@ -5,7 +5,7 @@ import { StyleSheet, Text } from 'react-native';
 import Animated, { FadeOut, SlideInDown, SlideInUp } from 'react-native-reanimated';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { closeToast } from './useToast';
-import { EMPTY_MODES } from '../../utils/react-utils';
+import { EMPTY_MODES, resolveTruncation } from '../../utils/react-utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 const ANIMATION_DURATION = 250;
 function Toast({
@@ -15,7 +15,8 @@ function Toast({
   onClose,
   modes = EMPTY_MODES,
   placement = 'bottom',
-  style
+  style,
+  disableTruncation
 }) {
   const timerRef = useRef(null);
   useEffect(() => {
@@ -25,21 +26,21 @@ function Toast({
       if (timerRef.current) clearTimeout(timerRef.current);
     };
   }, [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) : SlideInDown.duration(ANIMATION_DURATION);
   const containerStyle = {
     backgroundColor,
@@ -73,7 +74,7 @@ function Toast({
     accessibilityLiveRegion: "assertive",
     children: /*#__PURE__*/_jsx(Text, {
       style: textStyle,
-      numberOfLines: 2,
+      ...resolveTruncation(disableTruncation, 2),
       children: title
     })
   });

package/lib/module/components/Toggle/Toggle.js

@@ -1,9 +1,10 @@
 "use strict";
 
 import React, { useCallback, useState } from 'react';
-import { Pressable, View, Platform } from 'react-native';
+import { Pressable, View } from 'react-native';
 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";
 /**
  * Toggle (switch) component that maps directly to the Figma design using design tokens.
@@ -61,18 +62,9 @@ function Toggle({
     alignItems: isOn ? 'flex-end' : 'flex-start',
     opacity: disabled ? 0.5 : 1
   };
-  const thumbShadow = Platform.OS === 'web' ? {
-    boxShadow: `${thumbShadowOffsetX}px ${thumbShadowOffsetY}px ${thumbShadowRadius}px 0px ${thumbShadowColor}`
-  } : {
-    shadowColor: thumbShadowColor,
-    shadowOffset: {
-      width: thumbShadowOffsetX,
-      height: thumbShadowOffsetY
-    },
-    shadowRadius: thumbShadowRadius,
-    shadowOpacity: 1,
+  const thumbShadow = boxShadow(`${thumbShadowOffsetX}px ${thumbShadowOffsetY}px ${thumbShadowRadius}px 0px ${thumbShadowColor}`, {
     elevation: 4
-  };
+  });
   const thumbStyle = {
     width: thumbSize,
     height: thumbSize,

package/lib/module/components/Tooltip/Tooltip.js

@@ -185,18 +185,18 @@ export function TooltipContent({
   } = Dimensions.get('window');
 
   // Tokens
-  const bgColor = getVariableByName('tooltip/background', modes) || '#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) || '#ffffff';
-  const fontSize = Number(getVariableByName('tooltip/label/fontSize', modes) || 14);
-  const fontWeight = getVariableByName('tooltip/label/fontWeight', modes) || '500';
-  const lineHeight = Number(getVariableByName('tooltip/label/lineHeight', modes) || 18);
-  const fontFamily = getVariableByName('tooltip/lable/fontFamily', modes) || undefined;
+  const bgColor = getVariableByName('tooltip/background', modes);
+  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);
+  const fontSize = Number(getVariableByName('tooltip/label/fontSize', modes));
+  const fontWeight = getVariableByName('tooltip/label/fontWeight', modes);
+  const lineHeight = Number(getVariableByName('tooltip/label/lineHeight', modes));
+  const fontFamily = getVariableByName('tooltip/lable/fontFamily', modes);
   if (!isVisible) return null;
 
   // Calculation Logic

package/lib/module/components/TransactionBubble/TransactionBubble.js

@@ -6,7 +6,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 } from '../../utils/web-platform-utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
@@ -40,25 +40,26 @@ function TransactionBubble({
   accessibilityLabel,
   accessibilityHint,
   webAccessibilityProps,
+  disableTruncation,
   ...rest
 }) {
   const resolvedModes = {
     ...modes,
     '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 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 statusWrapGap = Number(getVariableByName('transactionBubble/statusWrap/gap', resolvedModes)) || 4;
-  const statusWrapHeight = Number(getVariableByName('transactionBubble/statusWrap/height', resolvedModes)) || 18;
+  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);
+  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));
+  const statusWrapHeight = Number(getVariableByName('transactionBubble/statusWrap/height', resolvedModes));
   const containerStyle = {
     padding,
     borderRadius: radius,
@@ -109,7 +110,7 @@ function TransactionBubble({
       },
       children: [/*#__PURE__*/_jsx(Text, {
         style: descriptionStyle,
-        numberOfLines: 1,
+        ...resolveTruncation(disableTruncation, 1),
         children: description
       }), /*#__PURE__*/_jsx(MoneyValue, {
         value: value,

package/lib/module/components/TransactionDetails/TransactionDetails.js

@@ -35,19 +35,19 @@ 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;
   const containerStyle = {
     flexDirection: 'column',

package/lib/module/components/TransactionStatus/TransactionStatus.js

@@ -4,7 +4,7 @@ import React from 'react';
 import { View, Text } 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';
 
 // --- Internal Icon Component ---
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -14,7 +14,7 @@ const StatusIcon = ({
   height = 15,
   color
 }) => {
-  const resolvedColor = color || getVariableByName('transactionStatus/icon/color', modes) || '#F06D0F';
+  const resolvedColor = color || getVariableByName('transactionStatus/icon/color', modes);
   return /*#__PURE__*/_jsx(Svg, {
     width: width,
     height: height,
@@ -37,17 +37,18 @@ export default function TransactionStatus({
   status = 'Expired',
   date = '20 Mar 2025',
   modes = EMPTY_MODES,
-  style
+  style,
+  disableTruncation
 }) {
-  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 iconColor = getVariableByName('transactionStatus/icon/color', modes) || '#f06d0f';
-  const iconSize = Number(getVariableByName('transactionStatus/iconSize', modes)) || 18;
+  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);
+  const iconSize = Number(getVariableByName('transactionStatus/iconSize', modes));
   const containerStyle = {
     flexDirection: 'row',
     alignItems: 'center',
@@ -70,7 +71,7 @@ export default function TransactionStatus({
       modes: modes
     }), /*#__PURE__*/_jsxs(Text, {
       style: textStyle,
-      numberOfLines: 1,
+      ...resolveTruncation(disableTruncation, 1),
       children: [status, " \xB7 ", date]
     })]
   });

package/lib/module/components/UpiHandle/UpiHandle.js

@@ -4,7 +4,7 @@ import React, { useCallback, useMemo, useRef, useState } from 'react';
 import { Pressable, View, Text, Platform } 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 from '../../utils/MediaSource';
 import Icon from '../../icons/Icon';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
@@ -24,22 +24,22 @@ const focusOverlayStyle = {
   borderColor: '#222'
 };
 function resolveUpiHandleTokens(modes) {
-  const backgroundColor = getVariableByName('upiHandle/background', modes) || '#f5f5f5';
-  const radius = getVariableByName('upiHandle/radius', modes) || 99999;
-  const paddingLeft = getVariableByName('upiHandle/padding/left', modes) || 4;
-  const paddingRight = getVariableByName('upiHandle/padding/right', modes) || 14;
-  const paddingVertical = getVariableByName('upiHandle/padding/vertical', modes) || 3;
-  const gap = getVariableByName('upiHandle/gap', modes) || 6;
-  const avatarSize = getVariableByName('upiHandle/image/size', modes) || 23;
-  const avatarRadius = getVariableByName('upiHandle/image/radius', modes) || 99999;
-  const labelColor = getVariableByName('upiHandle/label/color', modes) || '#0d0d0f';
-  const labelFontSize = getVariableByName('upiHandle/label/fontSize', modes) || 12;
-  const labelLineHeight = getVariableByName('upiHandle/label/lineHeight', modes) || 23;
-  const labelFontFamily = getVariableByName('upiHandle/label/fontFamily', modes) || 'System';
-  const labelFontWeightRaw = getVariableByName('upiHandle/label/fontWeight', modes) || 500;
+  const backgroundColor = getVariableByName('upiHandle/background', modes);
+  const radius = getVariableByName('upiHandle/radius', modes);
+  const paddingLeft = getVariableByName('upiHandle/padding/left', modes);
+  const paddingRight = getVariableByName('upiHandle/padding/right', modes);
+  const paddingVertical = getVariableByName('upiHandle/padding/vertical', modes);
+  const gap = getVariableByName('upiHandle/gap', modes);
+  const avatarSize = getVariableByName('upiHandle/image/size', modes);
+  const avatarRadius = getVariableByName('upiHandle/image/radius', modes);
+  const labelColor = getVariableByName('upiHandle/label/color', modes);
+  const labelFontSize = getVariableByName('upiHandle/label/fontSize', modes);
+  const labelLineHeight = getVariableByName('upiHandle/label/lineHeight', modes);
+  const labelFontFamily = getVariableByName('upiHandle/label/fontFamily', modes);
+  const labelFontWeightRaw = getVariableByName('upiHandle/label/fontWeight', modes);
   const labelFontWeight = typeof labelFontWeightRaw === 'number' ? labelFontWeightRaw.toString() : labelFontWeightRaw;
-  const iconColor = getVariableByName('upiHandle/icon/color', modes) || '#0d0d0f';
-  const iconSize = getVariableByName('upiHandle/icon/size', modes) || 12;
+  const iconColor = getVariableByName('upiHandle/icon/color', modes);
+  const iconSize = getVariableByName('upiHandle/icon/size', modes);
   return {
     containerStyle: {
       flexDirection: 'row',
@@ -107,6 +107,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.
@@ -169,8 +170,7 @@ function UpiHandle({
       })
     }), /*#__PURE__*/_jsx(Text, {
       style: tokens.labelStyle,
-      numberOfLines: 1,
-      ellipsizeMode: "tail",
+      ...resolveTruncation(disableTruncation, 1, 'tail'),
       accessibilityElementsHidden: true,
       importantForAccessibility: "no",
       children: label

package/lib/module/components/index.js

@@ -16,6 +16,7 @@ export { default as Card } from './Card/Card';
 export { default as CardAdvisory } from './CardAdvisory/CardAdvisory';
 export { default as CardBankAccount } from './CardBankAccount/CardBankAccount';
 export { default as Carousel } from './Carousel/Carousel';
+export { default as CarouselCardAccounts } from './CarouselCardAccounts/CarouselCardAccounts';
 export { default as Checkbox } from './Checkbox/Checkbox';
 export { default as CheckboxItem } from './CheckboxItem/CheckboxItem';
 export { default as CheckboxGroup } from './CheckboxGroup/CheckboxGroup';
@@ -70,9 +71,11 @@ export { default as Numpad } from './Numpad/Numpad';
 export { default as Overlay } from './Overlay/Overlay';
 export { default as Title } from './Title/Title';
 export { default as Screen } from './Screen/Screen';
+export { default as ScrollArea } from './ScrollArea/ScrollArea';
 export { default as Section } from './Section/Section';
 export { default as Slider } from './Slider/Slider';
 export { default as Slot } from './Slot/Slot';
+export { default as Stack } from './Stack/Stack';
 export { default as Spinner } from './Spinner/Spinner';
 export { default as Stepper } from './Stepper/Stepper';
 export { Step } from './Stepper/Step';
@@ -127,6 +130,7 @@ export { default as Popup } from './Popup/Popup';
 export { default as PortfolioHero } from './PortfolioHero/PortfolioHero';
 export { default as PlanComparisonCard } from './PlanComparisonCard/PlanComparisonCard';
 export { default as CompareTable } from './CompareTable/CompareTable';
+export { default as Table, TableHeader, TableHeaderCell, TableBody, TableRow, TableCell } from './Table/Table';
 export { default as PoweredByLabel } from './PoweredByLabel/PoweredByLabel';
 export { default as ProductLabel } from './ProductLabel/ProductLabel';
 export { default as ProductMerchandisingCard } from './ProductMerchandisingCard/ProductMerchandisingCard';