jfs-components 0.1.8 → 0.1.17

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,8 @@ function Text({
   modes = _reactUtils.EMPTY_MODES,
   style,
   numberOfLines,
+  disableTruncation,
+  singleLine,
   loading,
   skeletonWidth,
   skeletonLines
@@ -73,9 +75,20 @@ function Text({
   // still renders something visible when no content is supplied via either
   // route.
   const content = children !== undefined && children !== null && children !== false ? children : text !== undefined ? text : 'Korem ipsum ';
+
+  // Layout `style` is merged after the consumer `style` so the brutal overflow
+  // / no-wrap behaviour always wins.
+  const {
+    style: layoutStyle,
+    ...truncation
+  } = (0, _reactUtils.resolveTextLayout)({
+    disableTruncation,
+    singleLine,
+    numberOfLines
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-    style: [textStyle, style],
-    numberOfLines: numberOfLines,
+    style: [textStyle, style, layoutStyle],
+    ...truncation,
     children: content
   });
 }

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

@@ -126,26 +126,26 @@ const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)(function TextInput({
   const inputRef = (0, _react.useRef)(null);
 
   // Resolve container tokens
-  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('textInput/background', modes) || '#f5f5f5';
-  const borderColor = (0, _figmaVariablesResolver.getVariableByName)('textInput/border/color', modes) || '#f5f5f5';
-  const paddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('textInput/horizontal/padding', modes) || 14;
-  const paddingVertical = (0, _figmaVariablesResolver.getVariableByName)('textInput/vertical/padding', modes) || 14;
-  const radius = (0, _figmaVariablesResolver.getVariableByName)('textInput/radius', modes) || 99999;
+  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('textInput/background', modes);
+  const borderColor = (0, _figmaVariablesResolver.getVariableByName)('textInput/border/color', modes);
+  const paddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('textInput/horizontal/padding', modes);
+  const paddingVertical = (0, _figmaVariablesResolver.getVariableByName)('textInput/vertical/padding', modes);
+  const radius = (0, _figmaVariablesResolver.getVariableByName)('textInput/radius', modes);
 
   // Resolve text input typography tokens
-  const textColor = (0, _figmaVariablesResolver.getVariableByName)('textInput/label/color', modes) || '#24262b';
-  const fontSize = (0, _figmaVariablesResolver.getVariableByName)('textInput/fontSize', modes) || 14;
-  const lineHeight = (0, _figmaVariablesResolver.getVariableByName)('textInput/lineHeight', modes) || 18;
-  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('textInput/fontFamily', modes) || 'System';
-  const fontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('textInput/fontWeight', modes) || 400;
+  const textColor = (0, _figmaVariablesResolver.getVariableByName)('textInput/label/color', modes);
+  const fontSize = (0, _figmaVariablesResolver.getVariableByName)('textInput/fontSize', modes);
+  const lineHeight = (0, _figmaVariablesResolver.getVariableByName)('textInput/lineHeight', modes);
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('textInput/fontFamily', modes);
+  const fontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('textInput/fontWeight', modes);
   const fontWeight = typeof fontWeightRaw === 'number' ? fontWeightRaw.toString() : fontWeightRaw;
 
   // Create placeholder color (lighter/more transparent version of text color)
   const placeholderColor = makePlaceholderColor(textColor, 0.6);
 
   // Resolve icon tokens (for default icon rendering if needed)
-  const iconColor = (0, _figmaVariablesResolver.getVariableByName)('textInput/icon/color', modes) || '#24262b';
-  const iconSize = (0, _figmaVariablesResolver.getVariableByName)('textInput/icon/size', modes) || 18;
+  const iconColor = (0, _figmaVariablesResolver.getVariableByName)('textInput/icon/color', modes);
+  const iconSize = (0, _figmaVariablesResolver.getVariableByName)('textInput/icon/size', modes);
 
   // Convert radius to React Native format (if 99999, use a large value for fully rounded)
   const borderRadius = radius === 99999 ? 99999 : radius;
@@ -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,
@@ -301,8 +309,8 @@ const TextInputSearch = /*#__PURE__*/(0, _react.forwardRef)(function TextInputSe
   ...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;
+  const iconColor = (0, _figmaVariablesResolver.getVariableByName)('textInput/icon/color', modes);
+  const iconSize = (0, _figmaVariablesResolver.getVariableByName)('textInput/icon/size', modes);
 
   // Use provided leading or default to search icon
   const defaultLeading = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {

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

@@ -78,6 +78,8 @@ function TextSegment({
   children,
   textAlign = 'Left',
   numberOfLines,
+  disableTruncation,
+  singleLine,
   modes = _reactUtils.EMPTY_MODES,
   style
 }) {
@@ -109,9 +111,20 @@ function TextSegment({
   // 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;
+
+  // Layout `style` is merged after the consumer `style` so the brutal overflow
+  // / no-wrap behaviour always wins.
+  const {
+    style: layoutStyle,
+    ...truncation
+  } = (0, _reactUtils.resolveTextLayout)({
+    disableTruncation,
+    singleLine,
+    numberOfLines
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-    style: [baseStyle, style],
-    numberOfLines: numberOfLines,
+    style: [baseStyle, style, layoutStyle],
+    ...truncation,
     children: content
   });
 }

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

@@ -19,32 +19,33 @@ function ThreadHero({
   caption,
   renderAvatar,
   modes = _reactUtils.EMPTY_MODES,
-  style
+  style,
+  disableTruncation
 }) {
   // Container Gaps
-  const containerGap = Number((0, _figmaVariablesResolver.getVariableByName)('threadHero/gap', modes)) || 8;
-  const detailsGap = Number((0, _figmaVariablesResolver.getVariableByName)('threadHero/details/gap', modes)) || 2;
+  const containerGap = Number((0, _figmaVariablesResolver.getVariableByName)('threadHero/gap', modes));
+  const detailsGap = Number((0, _figmaVariablesResolver.getVariableByName)('threadHero/details/gap', modes));
 
   // Title Styles
-  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('threadHero/title/color', modes) || '#191b1e';
-  const titleFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('threadHero/title/fontSize', modes)) || 16;
-  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('threadHero/title/fontFamily', modes) || 'System';
-  const titleLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('threadHero/title/lineHeight', modes)) || 20;
-  const titleFontWeight = (0, _figmaVariablesResolver.getVariableByName)('threadHero/title/fontWeight', modes) || '600';
+  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('threadHero/title/color', modes);
+  const titleFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('threadHero/title/fontSize', modes));
+  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('threadHero/title/fontFamily', modes);
+  const titleLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('threadHero/title/lineHeight', modes));
+  const titleFontWeight = (0, _figmaVariablesResolver.getVariableByName)('threadHero/title/fontWeight', modes);
 
   // Subtitle Styles
-  const subtitleColor = (0, _figmaVariablesResolver.getVariableByName)('threadHero/subtitle/color', modes) || '#5d5d61';
-  const subtitleFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('threadHero/subtitle/fontSize', modes)) || 12;
-  const subtitleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('threadHero/subtitle/fontFamily', modes) || 'System';
-  const subtitleLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('threadHero/subtitle/lineHeight', modes)) || 18;
-  const subtitleFontWeight = (0, _figmaVariablesResolver.getVariableByName)('threadHero/subtitle/fontWeight', modes) || '500';
+  const subtitleColor = (0, _figmaVariablesResolver.getVariableByName)('threadHero/subtitle/color', modes);
+  const subtitleFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('threadHero/subtitle/fontSize', modes));
+  const subtitleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('threadHero/subtitle/fontFamily', modes);
+  const subtitleLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('threadHero/subtitle/lineHeight', modes));
+  const subtitleFontWeight = (0, _figmaVariablesResolver.getVariableByName)('threadHero/subtitle/fontWeight', modes);
 
   // Caption Styles
-  const captionColor = (0, _figmaVariablesResolver.getVariableByName)('threadHero/caption/color', modes) || '#5d5d61';
-  const captionFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('threadHero/caption/fontSize', modes)) || 12;
-  const captionFontFamily = (0, _figmaVariablesResolver.getVariableByName)('threadHero/caption/fontFamily', modes) || 'System';
-  const captionLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('threadHero/caption/lineHeight', modes)) || 18;
-  const captionFontWeight = (0, _figmaVariablesResolver.getVariableByName)('threadHero/caption/fontWeight', modes) || '500';
+  const captionColor = (0, _figmaVariablesResolver.getVariableByName)('threadHero/caption/color', modes);
+  const captionFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('threadHero/caption/fontSize', modes));
+  const captionFontFamily = (0, _figmaVariablesResolver.getVariableByName)('threadHero/caption/fontFamily', modes);
+  const captionLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('threadHero/caption/lineHeight', modes));
+  const captionFontWeight = (0, _figmaVariablesResolver.getVariableByName)('threadHero/caption/fontWeight', modes);
 
   // Styles
   const containerStyle = {
@@ -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,8 @@ function Title({
   textStyle,
   subtitleStyle,
   numberOfLines,
+  disableTruncation,
+  singleLine,
   accessibilityLabel,
   accessibilityHint,
   ...rest
@@ -35,12 +37,12 @@ function Title({
     ...globalModes,
     ...propModes
   };
-  const paddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('title/padding/horizontal', modes) || 16;
-  const paddingVertical = (0, _figmaVariablesResolver.getVariableByName)('title/padding/vertical', modes) || 8;
-  const gap = (0, _figmaVariablesResolver.getVariableByName)('title/gap', modes) || 8;
-  const labelColor = (0, _figmaVariablesResolver.getVariableByName)('title/label/color', modes) || '#0d0d0f';
-  const fontSize = (0, _figmaVariablesResolver.getVariableByName)('title/fontSize', modes) || 26;
-  const rawLineHeight = (0, _figmaVariablesResolver.getVariableByName)('title/lineHeight', modes) || 26;
+  const paddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('title/padding/horizontal', modes);
+  const paddingVertical = (0, _figmaVariablesResolver.getVariableByName)('title/padding/vertical', modes);
+  const gap = (0, _figmaVariablesResolver.getVariableByName)('title/gap', modes);
+  const labelColor = (0, _figmaVariablesResolver.getVariableByName)('title/label/color', modes);
+  const fontSize = (0, _figmaVariablesResolver.getVariableByName)('title/fontSize', modes);
+  const rawLineHeight = (0, _figmaVariablesResolver.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
@@ -48,15 +50,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 = (0, _figmaVariablesResolver.getVariableByName)('title/fontFamily', modes) || 'System';
-  const fontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('title/fontWeight', modes) || 900;
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('title/fontFamily', modes);
+  const fontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('title/fontWeight', modes);
   const fontWeight = typeof fontWeightRaw === 'number' ? fontWeightRaw.toString() : fontWeightRaw;
-  const subtitleColor = (0, _figmaVariablesResolver.getVariableByName)('pageSubtitle/label/color', modes) || '#0d0d0f';
-  const subtitleFontSize = (0, _figmaVariablesResolver.getVariableByName)('pageSubtitle/fontSize', modes) || 14;
-  const subtitleRawLineHeight = (0, _figmaVariablesResolver.getVariableByName)('pageSubtitle/lineHeight', modes) || 18;
+  const subtitleColor = (0, _figmaVariablesResolver.getVariableByName)('pageSubtitle/label/color', modes);
+  const subtitleFontSize = (0, _figmaVariablesResolver.getVariableByName)('pageSubtitle/fontSize', modes);
+  const subtitleRawLineHeight = (0, _figmaVariablesResolver.getVariableByName)('pageSubtitle/lineHeight', modes);
   const subtitleLineHeight = Math.max(subtitleRawLineHeight, Math.ceil(subtitleFontSize * 1.2));
-  const subtitleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('pageSubtitle/fontFamily', modes) || 'System';
-  const subtitleFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('pageSubtitle/fontWeight', modes) || 500;
+  const subtitleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('pageSubtitle/fontFamily', modes);
+  const subtitleFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('pageSubtitle/fontWeight', modes);
   const subtitleFontWeight = typeof subtitleFontWeightRaw === 'number' ? subtitleFontWeightRaw.toString() : subtitleFontWeightRaw;
   const containerStyle = {
     flexDirection: 'column',
@@ -85,6 +87,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
+  } = (0, _reactUtils.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
+  } = (0, _reactUtils.resolveTextLayout)({
+    disableTruncation,
+    singleLine
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: [containerStyle, style],
     accessibilityRole: "header",
@@ -92,13 +114,14 @@ function Title({
     accessibilityHint: accessibilityHint,
     ...rest,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: [titleTextStyle, textStyle],
-      numberOfLines: numberOfLines !== undefined ? numberOfLines : 1,
+      style: [titleTextStyle, textStyle, titleLayoutStyle],
+      ...titleTruncation,
       accessibilityElementsHidden: true,
       importantForAccessibility: "no",
       children: title
     }), subtitle != null && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: [subtitleTextStyle, subtitleStyle],
+      style: [subtitleTextStyle, subtitleStyle, subtitleLayoutStyle],
+      ...subtitleTruncation,
       accessibilityElementsHidden: true,
       importantForAccessibility: "no",
       children: subtitle