jfs-components 0.1.8 → 0.1.12

package/lib/commonjs/components/Slider/Slider.js

@@ -71,7 +71,8 @@ const Slider = /*#__PURE__*/(0, _react.forwardRef)(function Slider({
   width = '100%',
   modes = _reactUtils.EMPTY_MODES,
   style,
-  accessibilityLabel
+  accessibilityLabel,
+  disableTruncation
 }, ref) {
   const tokens = (0, _react.useMemo)(() => resolveTokens(modes), [modes]);
   const isControlled = controlledValue !== undefined;
@@ -252,7 +253,7 @@ const Slider = /*#__PURE__*/(0, _react.forwardRef)(function Slider({
     pointerEvents: "none",
     children: [renderTooltip ? renderTooltip(currentValue) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: tokens.tooltipLabel,
-      numberOfLines: 1,
+      ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
       children: valueText
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: [styles.tip, {

package/lib/commonjs/components/Stack/Stack.js

@@ -0,0 +1,86 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
+var _reactUtils = require("../../utils/react-utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * Stack — a token-driven layout container for grouped content.
+ *
+ * Use `Stack` instead of a raw `View` when you need a vertical or horizontal
+ * stack with design-token gap spacing and automatic `modes` propagation to
+ * children. Typical usage is nesting a column of actions inside a
+ * direction-locked parent such as `ActionFooter`:
+ *
+ * @example
+ * ```tsx
+ * <ActionFooter modes={modes}>
+ *   <Stack layoutDirection="vertical" modes={modes}>
+ *     <Button label="Continue" modes={primaryModes} />
+ *     <Disclaimer disclaimer="Terms apply." modes={modes} />
+ *   </Stack>
+ * </ActionFooter>
+ * ```
+ *
+ * @remarks
+ * Previously named `Slot`. The `Slot` export is preserved as a deprecated alias
+ * for backward compatibility.
+ */
+function Stack({
+  children,
+  layoutDirection = 'vertical',
+  alignCrossAxis,
+  justifyMainAxis,
+  equalHeight = false,
+  fillWidth = false,
+  modes: propModes = _reactUtils.EMPTY_MODES,
+  style,
+  ...rest
+}) {
+  const {
+    modes: globalModes
+  } = (0, _JFSThemeProvider.useTokens)();
+  const modes = (0, _react.useMemo)(() => ({
+    ...globalModes,
+    ...propModes
+  }), [globalModes, propModes]);
+  const {
+    containerStyle,
+    processedChildren
+  } = (0, _react.useMemo)(() => {
+    const gap = (0, _figmaVariablesResolver.getVariableByName)('slot/gap', modes) ?? 8;
+    const isHorizontal = layoutDirection === 'horizontal';
+
+    // Cross-axis stretch maps to "equal height" for a row and "fill width" for a
+    // column. Honour whichever flag matches the active direction.
+    const stretchCrossAxis = isHorizontal ? equalHeight : fillWidth;
+    const container = {
+      flexDirection: isHorizontal ? 'row' : 'column',
+      alignItems: stretchCrossAxis ? 'stretch' : alignCrossAxis ?? (isHorizontal ? 'flex-start' : 'stretch'),
+      justifyContent: justifyMainAxis ?? (isHorizontal ? 'center' : undefined),
+      alignSelf: 'stretch',
+      gap
+    };
+    const moded = children ? (0, _reactUtils.cloneChildrenWithModes)(children, modes) : null;
+    const processed = stretchCrossAxis && moded ? (0, _reactUtils.injectChildStyle)(moded, {
+      alignSelf: 'stretch'
+    }) : moded;
+    return {
+      containerStyle: container,
+      processedChildren: processed
+    };
+  }, [children, modes, layoutDirection, alignCrossAxis, justifyMainAxis, equalHeight, fillWidth]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [containerStyle, style],
+    ...rest,
+    children: processedChildren
+  });
+}
+var _default = exports.default = /*#__PURE__*/_react.default.memo(Stack);

package/lib/commonjs/components/SuggestiveSearch/SuggestiveSearch.js

@@ -312,7 +312,16 @@ function SuggestiveSearch({
     color: tokens.inputTextColor,
     fontFamily: tokens.inputFontFamily,
     fontSize: tokens.inputFontSize,
-    lineHeight: tokens.inputLineHeight,
+    // iOS-only quirk: a single-line RNTextInput with `lineHeight` (45) far
+    // larger than `fontSize` (16) sinks the text to the bottom of the box
+    // instead of centering — iOS puts all the extra space ABOVE the glyphs.
+    // The row already owns the 45px height via `minHeight` + centering, so
+    // omit lineHeight on iOS (UITextField centers natively) and keep the
+    // token value on Android/Web where it renders correctly. Same fix as
+    // FormField — see facebook/react-native#39145 / #28012.
+    ...(_reactNative.Platform.OS === 'ios' ? null : {
+      lineHeight: tokens.inputLineHeight
+    }),
     fontWeight: tokens.inputFontWeight,
     padding: 0,
     margin: 0,

package/lib/commonjs/components/SummaryTile/SummaryTile.js

@@ -34,7 +34,8 @@ function SummaryTile({
   style,
   titleStyle,
   descriptionStyle,
-  accessibilityLabel
+  accessibilityLabel,
+  disableTruncation
 }) {
   const containerGap = (0, _figmaVariablesResolver.getVariableByName)('summaryTile/gap', modes) ?? 8;
   const containerPadding = (0, _figmaVariablesResolver.getVariableByName)('summaryTile/padding', modes) ?? 0;
@@ -100,7 +101,7 @@ function SummaryTile({
         },
         children: [title ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: [titleTextStyle, titleStyle],
-          numberOfLines: 1,
+          ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
           children: title
         }) : null, showIndicator ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_StrengthIndicator.default, {
           confidence: confidence,

package/lib/commonjs/components/Table/Table.js

@@ -0,0 +1,324 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TableBody = TableBody;
+exports.TableCell = TableCell;
+exports.TableHeader = TableHeader;
+exports.TableHeaderCell = TableHeaderCell;
+exports.TableRow = TableRow;
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _reactUtils = require("../../utils/react-utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/* -------------------------------------------------------------------------------------------------
+ * Shared types & token resolution
+ * -----------------------------------------------------------------------------------------------*/
+
+/** Resolved styling for a header cell and a body cell, derived from design tokens. */
+
+const toWeight = w => typeof w === 'number' ? `${w}` : w;
+
+/**
+ * Resolve every token the table family needs in one place. Sub-components call
+ * this with their cascaded `modes` so they render correctly both inside a
+ * `Table` and when used standalone. Fallbacks mirror the Figma node values
+ * (`tableCell/*`, `tableHeader/*`) so the component is faithful even before the
+ * tokens are published to the local store.
+ */
+function resolveTableTokens(modes) {
+  const headerFontFamily = (0, _figmaVariablesResolver.getVariableByName)('tableHeader/label/fontfamily', modes) ?? 'JioType Var';
+  const headerFontSize = (0, _figmaVariablesResolver.getVariableByName)('tableHeader/label/fontsize', modes) ?? 14;
+  const headerFontWeight = (0, _figmaVariablesResolver.getVariableByName)('tableHeader/label/fontweight', modes) ?? 600;
+  const cellFontFamily = (0, _figmaVariablesResolver.getVariableByName)('tableCell/label/fontfamily', modes) ?? 'JioType Var';
+  const cellFontSize = (0, _figmaVariablesResolver.getVariableByName)('tableCell/label/fontsize', modes) ?? 14;
+  const cellFontWeight = (0, _figmaVariablesResolver.getVariableByName)('tableCell/label/fontweight', modes) ?? 400;
+  return {
+    headerBg: (0, _figmaVariablesResolver.getVariableByName)('tableHeader/background/color', modes) ?? '#f5f5f5',
+    headerPaddingH: (0, _figmaVariablesResolver.getVariableByName)('tableHeader/padding/horizontal', modes) ?? 12,
+    headerPaddingV: (0, _figmaVariablesResolver.getVariableByName)('tableHeader/padding/vertical', modes) ?? 12,
+    headerText: {
+      color: (0, _figmaVariablesResolver.getVariableByName)('tableHeader/label/color', modes) ?? '#000000',
+      fontFamily: headerFontFamily,
+      fontSize: headerFontSize,
+      fontWeight: toWeight(headerFontWeight),
+      lineHeight: 20
+    },
+    cellBg: (0, _figmaVariablesResolver.getVariableByName)('tableCell/background/color', modes) ?? '#ffffff',
+    cellPaddingH: (0, _figmaVariablesResolver.getVariableByName)('tableCell/padding/horizontal', modes) ?? 12,
+    cellPaddingV: (0, _figmaVariablesResolver.getVariableByName)('tableCell/padding/vertical', modes) ?? 12,
+    cellText: {
+      color: (0, _figmaVariablesResolver.getVariableByName)('tableCell/label/color', modes) ?? '#000000',
+      fontFamily: cellFontFamily,
+      fontSize: cellFontSize,
+      fontWeight: toWeight(cellFontWeight),
+      lineHeight: 20
+    },
+    borderColor: (0, _figmaVariablesResolver.getVariableByName)('tableCell/border/color', modes) ?? '#eeeeee',
+    borderSize: (0, _figmaVariablesResolver.getVariableByName)('tableCell/border/size', modes) ?? 1
+  };
+}
+const alignToJustify = align => align === 'center' ? 'center' : align === 'right' ? 'flex-end' : 'flex-start';
+
+/** Renders text children through the resolved label style; passes elements through untouched. */
+function renderCellContent(children, textStyle, align, modes) {
+  if (children == null || children === false) return null;
+  if (typeof children === 'string' || typeof children === 'number') {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [textStyle, {
+        textAlign: align
+      }],
+      children: children
+    });
+  }
+  return (0, _reactUtils.cloneChildrenWithModes)(children, modes);
+}
+
+/* -------------------------------------------------------------------------------------------------
+ * Table.Cell — body cell (Figma `table-cell`, node 603:23)
+ * -----------------------------------------------------------------------------------------------*/
+
+/**
+ * A single body cell. White background with a bottom + right divider, matching
+ * the Figma `table-cell` sub-component. String/number children are rendered
+ * with the token label style; any element is rendered as-is.
+ */
+function TableCell({
+  children,
+  align = 'left',
+  width,
+  flex = 1,
+  isLastColumn = false,
+  isLastRow = false,
+  modes = _reactUtils.EMPTY_MODES,
+  style
+}) {
+  const t = resolveTableTokens(modes);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [{
+      backgroundColor: t.cellBg,
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: alignToJustify(align),
+      paddingHorizontal: t.cellPaddingH,
+      paddingVertical: t.cellPaddingV,
+      borderColor: t.borderColor,
+      borderBottomWidth: isLastRow ? 0 : t.borderSize,
+      borderRightWidth: isLastColumn ? 0 : t.borderSize,
+      ...(width != null ? {
+        width
+      } : {
+        flex,
+        minWidth: 0
+      })
+    }, style],
+    children: renderCellContent(children, t.cellText, align, modes)
+  });
+}
+
+/* -------------------------------------------------------------------------------------------------
+ * Table.HeaderCell — header cell (Figma `table header wrap`, node 603:21)
+ * -----------------------------------------------------------------------------------------------*/
+
+/**
+ * A single header cell. Muted background with the bold token label style,
+ * matching the Figma `table header wrap` sub-component. Header cells carry no
+ * dividers; the header row draws a single bottom divider beneath them.
+ */
+function TableHeaderCell({
+  children,
+  align = 'left',
+  width,
+  flex = 1,
+  modes = _reactUtils.EMPTY_MODES,
+  style
+}) {
+  const t = resolveTableTokens(modes);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [{
+      backgroundColor: t.headerBg,
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: alignToJustify(align),
+      paddingHorizontal: t.headerPaddingH,
+      paddingVertical: t.headerPaddingV,
+      ...(width != null ? {
+        width
+      } : {
+        flex,
+        minWidth: 0
+      })
+    }, style],
+    children: renderCellContent(children, t.headerText, align, modes)
+  });
+}
+
+/* -------------------------------------------------------------------------------------------------
+ * Table.Header — row of header cells with a bottom divider
+ * -----------------------------------------------------------------------------------------------*/
+
+function TableHeader({
+  children,
+  modes = _reactUtils.EMPTY_MODES,
+  style
+}) {
+  const t = resolveTableTokens(modes);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [{
+      flexDirection: 'row',
+      width: '100%',
+      borderBottomWidth: t.borderSize,
+      borderBottomColor: t.borderColor
+    }, style],
+    children: (0, _reactUtils.cloneChildrenWithModes)(children, modes)
+  });
+}
+
+/* -------------------------------------------------------------------------------------------------
+ * Table.Row — row of body cells
+ * -----------------------------------------------------------------------------------------------*/
+
+function TableRow({
+  children,
+  onPress,
+  modes = _reactUtils.EMPTY_MODES,
+  style
+}) {
+  const rowStyle = {
+    flexDirection: 'row',
+    width: '100%'
+  };
+  const content = (0, _reactUtils.cloneChildrenWithModes)(children, modes);
+  if (onPress) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+      onPress: onPress,
+      accessibilityRole: "button",
+      style: ({
+        pressed
+      }) => [rowStyle, pressed ? {
+        opacity: 0.6
+      } : null, style],
+      children: content
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [rowStyle, style],
+    children: content
+  });
+}
+
+/* -------------------------------------------------------------------------------------------------
+ * Table.Body — column container for rows
+ * -----------------------------------------------------------------------------------------------*/
+
+function TableBody({
+  children,
+  modes = _reactUtils.EMPTY_MODES,
+  style
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [{
+      width: '100%'
+    }, style],
+    children: (0, _reactUtils.cloneChildrenWithModes)(children, modes)
+  });
+}
+
+/* -------------------------------------------------------------------------------------------------
+ * Table — root (Figma `Table`, node 5732:3710)
+ * -----------------------------------------------------------------------------------------------*/
+
+/**
+ * Column definition for the data-driven `Table` API. `T` is the shape of one
+ * row record.
+ */
+
+/**
+ * Table renders structured rows and columns. It supports two complementary
+ * usage styles that share the same token-driven styling:
+ *
+ * 1. **Data-driven** (recommended): pass `columns` + `data`. The header and body
+ *    are built for you, columns stay aligned, and per-column `align`/`width`/
+ *    `flex`/`render` give full control.
+ *
+ * 2. **Composition**: pass `Table.Header` / `Table.Body` / `Table.Row` /
+ *    `Table.Cell` / `Table.HeaderCell` as children for bespoke layouts. These
+ *    sub-components are also exported standalone.
+ *
+ * Implementation of Figma node `5732:3710` (`Table`) with sub-components
+ * `603:23` (`table-cell`) and `603:21` (`table header wrap`).
+ *
+ * @component
+ */
+function Table({
+  columns,
+  data,
+  children,
+  showHeader = true,
+  getRowKey,
+  onRowPress,
+  scrollable = false,
+  accessibilityLabel,
+  modes = _reactUtils.EMPTY_MODES,
+  style
+}) {
+  const isComposition = children != null;
+  const body = isComposition ? (0, _reactUtils.cloneChildrenWithModes)(children, modes) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [showHeader && columns && columns.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(TableHeader, {
+      modes: modes,
+      children: columns.map(col => /*#__PURE__*/(0, _jsxRuntime.jsx)(TableHeaderCell, {
+        align: col.headerAlign ?? col.align ?? 'left',
+        width: col.width,
+        flex: col.flex ?? 1,
+        modes: modes,
+        children: col.header ?? col.key
+      }, col.key))
+    }), columns && data && data.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(TableBody, {
+      modes: modes,
+      children: data.map((row, rowIndex) => {
+        const isLastRow = rowIndex === data.length - 1;
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(TableRow, {
+          onPress: onRowPress ? () => onRowPress(row, rowIndex) : undefined,
+          modes: modes,
+          children: columns.map((col, colIndex) => /*#__PURE__*/(0, _jsxRuntime.jsx)(TableCell, {
+            align: col.align ?? 'left',
+            width: col.width,
+            flex: col.flex ?? 1,
+            isLastColumn: colIndex === columns.length - 1,
+            isLastRow: isLastRow,
+            modes: modes,
+            children: col.render ? col.render(row, rowIndex) : row[col.key]
+          }, col.key))
+        }, getRowKey?.(row, rowIndex) ?? rowIndex);
+      })
+    })]
+  });
+  const container = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    accessibilityRole: _reactNative.Platform.OS === 'web' ? 'table' : undefined,
+    accessibilityLabel: accessibilityLabel,
+    style: [{
+      overflow: 'hidden'
+    }, !scrollable && {
+      width: '100%'
+    }, style],
+    children: body
+  });
+  if (scrollable) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+      horizontal: true,
+      showsHorizontalScrollIndicator: false,
+      children: container
+    });
+  }
+  return container;
+}
+Table.Header = TableHeader;
+Table.HeaderCell = TableHeaderCell;
+Table.Body = TableBody;
+Table.Row = TableRow;
+Table.Cell = TableCell;
+var _default = exports.default = Table;

package/lib/commonjs/components/Text/Text.js

@@ -23,6 +23,7 @@ function Text({
   modes = _reactUtils.EMPTY_MODES,
   style,
   numberOfLines,
+  disableTruncation,
   loading,
   skeletonWidth,
   skeletonLines
@@ -75,7 +76,7 @@ function Text({
   const content = children !== undefined && children !== null && children !== false ? children : text !== undefined ? text : 'Korem ipsum ';
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
     style: [textStyle, style],
-    numberOfLines: numberOfLines,
+    ...(0, _reactUtils.resolveTruncation)(disableTruncation, numberOfLines),
     children: content
   });
 }

package/lib/commonjs/components/TextInput/TextInput.js

@@ -172,7 +172,15 @@ const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)(function TextInput({
     flex: 1,
     color: textColor,
     fontSize,
-    lineHeight,
+    // iOS-only quirk: a single-line RNTextInput with an explicit `lineHeight`
+    // larger than `fontSize` puts all the extra space ABOVE the glyphs, so the
+    // text/placeholder sits below center (iOS native font-metrics bug — see
+    // facebook/react-native#39145 / #28012). The container centers via
+    // `alignItems: 'center'` + `minHeight`, so omit lineHeight on iOS
+    // (UITextField centers natively) and keep it on Android/Web where it's fine.
+    ...(_reactNative.Platform.OS === 'ios' ? null : {
+      lineHeight
+    }),
     fontFamily,
     fontWeight,
     padding: 0,

package/lib/commonjs/components/TextSegment/TextSegment.js

@@ -78,6 +78,7 @@ function TextSegment({
   children,
   textAlign = 'Left',
   numberOfLines,
+  disableTruncation,
   modes = _reactUtils.EMPTY_MODES,
   style
 }) {
@@ -111,7 +112,7 @@ function TextSegment({
   const content = hasChildren ? (0, _reactUtils.cloneChildrenWithModes)(children, modes) : renderedSegments;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
     style: [baseStyle, style],
-    numberOfLines: numberOfLines,
+    ...(0, _reactUtils.resolveTruncation)(disableTruncation, numberOfLines),
     children: content
   });
 }

package/lib/commonjs/components/ThreadHero/ThreadHero.js

@@ -19,7 +19,8 @@ function ThreadHero({
   caption,
   renderAvatar,
   modes = _reactUtils.EMPTY_MODES,
-  style
+  style,
+  disableTruncation
 }) {
   // Container Gaps
   const containerGap = Number((0, _figmaVariablesResolver.getVariableByName)('threadHero/gap', modes)) || 8;
@@ -100,14 +101,12 @@ function ThreadHero({
         children: title
       }) : null, subtitle ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: subtitleStyle,
-        numberOfLines: 1,
-        ellipsizeMode: "tail",
+        ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1, 'tail'),
         children: subtitle
       }) : null]
     }), caption ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: captionStyle,
-      numberOfLines: 1,
-      ellipsizeMode: "tail",
+      ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1, 'tail'),
       children: caption
     }) : null]
   });

package/lib/commonjs/components/Title/Title.js

@@ -24,6 +24,7 @@ function Title({
   textStyle,
   subtitleStyle,
   numberOfLines,
+  disableTruncation,
   accessibilityLabel,
   accessibilityHint,
   ...rest
@@ -93,7 +94,7 @@ function Title({
     ...rest,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: [titleTextStyle, textStyle],
-      numberOfLines: numberOfLines !== undefined ? numberOfLines : 1,
+      ...(0, _reactUtils.resolveTruncation)(disableTruncation, numberOfLines !== undefined ? numberOfLines : 1),
       accessibilityElementsHidden: true,
       importantForAccessibility: "no",
       children: title

package/lib/commonjs/components/Toast/Toast.js

@@ -20,7 +20,8 @@ function Toast({
   onClose,
   modes = _reactUtils.EMPTY_MODES,
   placement = 'bottom',
-  style
+  style,
+  disableTruncation
 }) {
   const timerRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(() => {
@@ -78,7 +79,7 @@ function Toast({
     accessibilityLiveRegion: "assertive",
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: textStyle,
-      numberOfLines: 2,
+      ...(0, _reactUtils.resolveTruncation)(disableTruncation, 2),
       children: title
     })
   });

package/lib/commonjs/components/TransactionBubble/TransactionBubble.js

@@ -45,6 +45,7 @@ function TransactionBubble({
   accessibilityLabel,
   accessibilityHint,
   webAccessibilityProps,
+  disableTruncation,
   ...rest
 }) {
   const resolvedModes = {
@@ -114,7 +115,7 @@ function TransactionBubble({
       },
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: descriptionStyle,
-        numberOfLines: 1,
+        ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
         children: description
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_MoneyValue.default, {
         value: value,

package/lib/commonjs/components/TransactionStatus/TransactionStatus.js

@@ -42,7 +42,8 @@ function TransactionStatus({
   status = 'Expired',
   date = '20 Mar 2025',
   modes = _reactUtils.EMPTY_MODES,
-  style
+  style,
+  disableTruncation
 }) {
   const gap = Number((0, _figmaVariablesResolver.getVariableByName)('transactionBubble/statusWrap/gap', modes)) || 4;
   // Using 'transactionStatus' tokens for text
@@ -75,7 +76,7 @@ function TransactionStatus({
       modes: modes
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
       style: textStyle,
-      numberOfLines: 1,
+      ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
       children: [status, " \xB7 ", date]
     })]
   });

package/lib/commonjs/components/UpiHandle/UpiHandle.js

@@ -113,6 +113,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.
@@ -175,8 +176,7 @@ function UpiHandle({
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: tokens.labelStyle,
-      numberOfLines: 1,
-      ellipsizeMode: "tail",
+      ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1, 'tail'),
       accessibilityElementsHidden: true,
       importantForAccessibility: "no",
       children: label