jfs-components 0.1.2 → 0.1.12

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

@@ -101,7 +101,7 @@ function makePlaceholderColor(color, opacity = 0.5) {
   // Fallback: return original color
   return color;
 }
-function TextInput({
+const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)(function TextInput({
   placeholder = '',
   value = '',
   onChangeText,
@@ -116,7 +116,7 @@ function TextInput({
   accessibilityLabel,
   accessibilityHint,
   ...rest
-}) {
+}, ref) {
   // Track focus state to hide placeholder when focused
   const [isFocused, setIsFocused] = (0, _react.useState)(false);
   const [isHovered, setIsHovered] = (0, _react.useState)(false);
@@ -172,7 +172,15 @@ 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,
@@ -231,7 +239,7 @@ function TextInput({
       importantForAccessibility: "no",
       children: processedLeading
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
-      ref: inputRef,
+      ref: (0, _reactUtils.mergeRefs)(inputRef, ref),
       accessibilityLabel: undefined,
       accessibilityHint: accessibilityHint,
       placeholder: displayPlaceholder,
@@ -264,7 +272,7 @@ function TextInput({
     style: containerStyleArray,
     children: inner
   });
-}
+});
 
 /**
  * TextInput.Search component that mirrors the Figma "textInput.search" component.
@@ -286,7 +294,7 @@ function TextInput({
  * @param {Object} [props.rest] - Additional props passed to the underlying TextInput
  */
 
-function TextInputSearch({
+const TextInputSearch = /*#__PURE__*/(0, _react.forwardRef)(function TextInputSearch({
   placeholder = 'Search',
   value = '',
   onChangeText,
@@ -299,7 +307,7 @@ function TextInputSearch({
   onFocus,
   onBlur,
   ...rest
-}) {
+}, ref) {
   // Resolve icon tokens for default search icon
   const iconColor = (0, _figmaVariablesResolver.getVariableByName)('textInput/icon/color', modes) || '#24262b';
   const iconSize = (0, _figmaVariablesResolver.getVariableByName)('textInput/icon/size', modes) || 18;
@@ -336,10 +344,15 @@ function TextInputSearch({
     textInputProps.accessibilityHint = accessibilityHint;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(TextInput, {
+    ref: ref,
     ...textInputProps
   });
-}
+});
+
+// Attach Search as a property of TextInput using namespace pattern. The base
+// component is created via forwardRef, so we compose the static onto a typed
+// alias to keep `TextInput.Search` strongly typed.
 
-// Attach Search as a property of TextInput using namespace pattern
+const TextInput = TextInputBase;
 TextInput.Search = TextInputSearch;
 var _default = exports.default = TextInput;

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

@@ -0,0 +1,119 @@
+"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 _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); }
+/**
+ * A single coloured run inside a {@link TextSegment}. Each run can carry its own
+ * `modes`, so individual fragments of the same paragraph can resolve different
+ * design tokens (most commonly a different `text/foreground` colour) while still
+ * flowing — and wrapping — inline as one continuous line of text.
+ */
+
+const TEXT_ALIGN_MAP = {
+  Left: 'left',
+  Center: 'center'
+};
+
+/**
+ * Resolves the `text/*` design tokens for a given modes object into an RN
+ * `TextStyle`. Shared by the outer paragraph and every inline run so a run that
+ * only overrides colour still inherits the family/size/weight/spacing.
+ */
+function resolveTextStyle(modes) {
+  return {
+    color: (0, _figmaVariablesResolver.getVariableByName)('text/foreground', modes) ?? '#000000',
+    fontFamily: (0, _figmaVariablesResolver.getVariableByName)('text/fontFamily', modes) ?? 'JioType',
+    fontSize: (0, _figmaVariablesResolver.getVariableByName)('text/fontSize', modes) ?? 14,
+    fontWeight: String((0, _figmaVariablesResolver.getVariableByName)('text/fontWeight', modes) ?? '500'),
+    lineHeight: (0, _figmaVariablesResolver.getVariableByName)('text/lineHeight', modes) ?? 20,
+    letterSpacing: (0, _figmaVariablesResolver.getVariableByName)('text/letterSpacing', modes) ?? -0.5
+  };
+}
+
+/**
+ * TextSegment — composes several differently-styled text runs into a single
+ * paragraph that wraps as one continuous line.
+ *
+ * On the web you would reach for `<span>`s inside a `<p>`; the React Native
+ * equivalent is nesting `<Text>` inside a parent `<Text>`. That nesting is the
+ * whole trick: sibling `<View>`s would lay out as flex blocks and break onto
+ * rigid rows, but nested `<Text>` nodes flow inline and wrap naturally at word
+ * boundaries — exactly like a real paragraph — while each nested run keeps its
+ * own colour/weight resolved from its own `modes`.
+ *
+ * Two equivalent ways to author content:
+ *  - **`segments` prop** — declarative array of `{ text, modes }` runs.
+ *  - **`children`** — pass library `Text` elements (or strings); the parent
+ *    `modes` cascade down and each child may override its own.
+ *
+ * @example Data-driven
+ * ```tsx
+ * <TextSegment
+ *   segments={[
+ *     { text: 'Upsell message ' },
+ *     { text: 'JioFinance+', modes: { 'Text Appearance': 'Primary' } },
+ *   ]}
+ * />
+ * ```
+ *
+ * @example Compositional
+ * ```tsx
+ * <TextSegment numberOfLines={2}>
+ *   <Text>Pay with </Text>
+ *   <Text modes={{ 'Text Appearance': 'Primary' }}>JioFinance+</Text>
+ *   <Text> and earn rewards on every transaction.</Text>
+ * </TextSegment>
+ * ```
+ */
+function TextSegment({
+  segments,
+  children,
+  textAlign = 'Left',
+  numberOfLines,
+  disableTruncation,
+  modes = _reactUtils.EMPTY_MODES,
+  style
+}) {
+  const baseStyle = (0, _react.useMemo)(() => ({
+    ...resolveTextStyle(modes),
+    textAlign: TEXT_ALIGN_MAP[textAlign]
+  }), [modes, textAlign]);
+
+  // children win over `segments` so the compositional API can always override.
+  const hasChildren = children !== undefined && children !== null && children !== false;
+  const renderedSegments = (0, _react.useMemo)(() => {
+    if (hasChildren || !segments?.length) return null;
+    return segments.map((run, index) => {
+      // Parent modes first, then the run's own modes override them — mirrors the
+      // merge order used by `cloneChildrenWithModes` for the children API.
+      const runModes = run.modes ? {
+        ...modes,
+        ...run.modes
+      } : modes;
+      const runStyle = run.modes ? resolveTextStyle(runModes) : undefined;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [runStyle, run.style],
+        children: run.text
+      }, index);
+    });
+  }, [segments, hasChildren, modes]);
+
+  // The cascade: every child (and its descendants) receives the parent modes so
+  // nested library `Text` runs resolve their tokens against the same baseline,
+  // while still honouring any per-child `modes` override.
+  const content = hasChildren ? (0, _reactUtils.cloneChildrenWithModes)(children, modes) : renderedSegments;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+    style: [baseStyle, style],
+    ...(0, _reactUtils.resolveTruncation)(disableTruncation, numberOfLines),
+    children: content
+  });
+}
+var _default = exports.default = /*#__PURE__*/_react.default.memo(TextSegment);

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