jfs-components 0.1.8 → 0.1.17

package/lib/module/components/Stepper/StepLabel.js

@@ -14,11 +14,11 @@ export function StepLabel({
   modes = EMPTY_MODES,
   style
 }) {
-  const titleColor = getVariableByName('steperItem/title/color', modes) || '#0d0d0f';
-  const titleFontSize = Number(getVariableByName('steperItem/title/fontSize', modes)) || 14;
-  const titleFontFamily = getVariableByName('steperItem/title/fontFamily', modes) || undefined;
-  const titleLineHeight = Number(getVariableByName('steperItem/title/lineHeight', modes)) || 18;
-  const titleFontWeight = getVariableByName('steperItem/title/fontWeight', modes) || '700';
+  const titleColor = getVariableByName('steperItem/title/color', modes);
+  const titleFontSize = Number(getVariableByName('steperItem/title/fontSize', modes));
+  const titleFontFamily = getVariableByName('steperItem/title/fontFamily', modes);
+  const titleLineHeight = Number(getVariableByName('steperItem/title/lineHeight', modes));
+  const titleFontWeight = getVariableByName('steperItem/title/fontWeight', modes);
 
   // The Subtitle (supportingText) and Meta both default to the "Neutral"
   // AppearanceBrand. A caller-supplied `AppearanceBrand` still wins (it is
@@ -32,19 +32,19 @@ export function StepLabel({
     AppearanceBrand: 'Neutral',
     ...modes
   };
-  const subtitleColor = getVariableByName('steperItem/subtitle/color', subtitleModes) || '#3d4047';
-  const subtitleFontSize = Number(getVariableByName('steperItem/subtitle/fontSize', subtitleModes)) || 12;
-  const subtitleFontFamily = getVariableByName('steperItem/subtitle/fontFamily', subtitleModes) || undefined;
-  const subtitleLineHeight = Number(getVariableByName('steperItem/subtitle/lineHeight', subtitleModes)) || 16;
-  const subtitleFontWeight = getVariableByName('steperItem/subtitle/fontWeight', subtitleModes) || '400';
-  const metaColor = getVariableByName('steperItem/meta/color', metaModes) || '#f7ab21';
-  const metaFontSize = Number(getVariableByName('steperItem/meta/fontSize', metaModes)) || 10;
+  const subtitleColor = getVariableByName('steperItem/subtitle/color', subtitleModes);
+  const subtitleFontSize = Number(getVariableByName('steperItem/subtitle/fontSize', subtitleModes));
+  const subtitleFontFamily = getVariableByName('steperItem/subtitle/fontFamily', subtitleModes);
+  const subtitleLineHeight = Number(getVariableByName('steperItem/subtitle/lineHeight', subtitleModes));
+  const subtitleFontWeight = getVariableByName('steperItem/subtitle/fontWeight', subtitleModes);
+  const metaColor = getVariableByName('steperItem/meta/color', metaModes);
+  const metaFontSize = Number(getVariableByName('steperItem/meta/fontSize', metaModes));
   // The Figma variable is authored as "fontFamily Copy" (with a space + suffix).
   // Match the literal Figma name to avoid a missing-variable warning.
-  const metaFontFamily = getVariableByName('steperItem/meta/fontFamily Copy', metaModes) || undefined;
-  const metaLineHeight = Number(getVariableByName('steperItem/meta/lineHeight', metaModes)) || 12;
-  const metaFontWeight = getVariableByName('steperItem/meta/fontWeight', metaModes) || '700';
-  const textGap = Number(getVariableByName('steperItem/textWrap/gap', modes)) || 2;
+  const metaFontFamily = getVariableByName('steperItem/meta/fontFamily Copy', metaModes);
+  const metaLineHeight = Number(getVariableByName('steperItem/meta/lineHeight', metaModes));
+  const metaFontWeight = getVariableByName('steperItem/meta/fontWeight', metaModes);
+  const textGap = Number(getVariableByName('steperItem/textWrap/gap', modes));
   const titleStyle = {
     color: titleColor,
     fontSize: titleFontSize,

package/lib/module/components/Stepper/Stepper.js

@@ -13,9 +13,9 @@ export default function Stepper({
   modes = EMPTY_MODES,
   style
 }) {
-  const paddingHorizontal = Number(getVariableByName('stepper/padding/horizontal', modes)) || 8;
-  const paddingVertical = Number(getVariableByName('stepper/padding/vertical', modes)) || 0;
-  const gap = Number(getVariableByName('stepper/gap', modes)) || 2;
+  const paddingHorizontal = Number(getVariableByName('stepper/padding/horizontal', modes));
+  const paddingVertical = Number(getVariableByName('stepper/padding/vertical', modes));
+  const gap = Number(getVariableByName('stepper/gap', modes));
   const containerStyle = {
     paddingHorizontal,
     paddingVertical,

package/lib/module/components/SuggestiveSearch/SuggestiveSearch.js

@@ -46,23 +46,23 @@ const defaultFilter = (query, option) => option.label.toLowerCase().includes(que
 
 function useFormFieldTokens(modes) {
   return useMemo(() => {
-    const labelColor = getVariableByName('formField/label/color', modes) || '#000000';
-    const labelFontFamily = getVariableByName('formField/label/fontFamily', modes) || 'JioType Var';
+    const labelColor = getVariableByName('formField/label/color', modes);
+    const labelFontFamily = getVariableByName('formField/label/fontFamily', modes);
     const labelFontSize = toNumber(getVariableByName('formField/label/fontSize', modes), 14);
     const labelLineHeight = toNumber(getVariableByName('formField/label/lineHeight', modes), 17);
-    const labelFontWeight = getVariableByName('formField/label/fontWeight', modes) || '500';
+    const labelFontWeight = getVariableByName('formField/label/fontWeight', modes);
     const gap = toNumber(getVariableByName('formField/gap', modes), 8);
     const inputPaddingH = toNumber(getVariableByName('formField/input/padding/horizontal', modes), 12);
     const inputGap = toNumber(getVariableByName('formField/input/gap', modes), 8);
     const inputRadius = toNumber(getVariableByName('formField/input/radius', modes), 8);
     const inputBorderSize = toNumber(getVariableByName('formField/input/border/size', modes), 1.5);
-    const inputBackground = getVariableByName('formField/input/background', modes) || '#ffffff';
-    const inputBorderColor = getVariableByName('formField/input/border/color', modes) || '#b5b6b7';
+    const inputBackground = getVariableByName('formField/input/background', modes);
+    const inputBorderColor = getVariableByName('formField/input/border/color', modes);
     const inputFontSize = toNumber(getVariableByName('formField/input/label/fontSize', modes), 16);
     const inputLineHeight = toNumber(getVariableByName('formField/input/label/lineHeight', modes), 45);
-    const inputFontFamily = getVariableByName('formField/input/label/fontFamily', modes) || 'JioType Var';
-    const inputFontWeight = getVariableByName('formField/input/label/fontWeight', modes) || '400';
-    const inputTextColor = getVariableByName('formField/input/label/color', modes) || '#24262b';
+    const inputFontFamily = getVariableByName('formField/input/label/fontFamily', modes);
+    const inputFontWeight = getVariableByName('formField/input/label/fontWeight', modes);
+    const inputTextColor = getVariableByName('formField/input/label/color', modes);
     return {
       labelColor,
       labelFontFamily,
@@ -86,8 +86,8 @@ function useFormFieldTokens(modes) {
 }
 function useDropdownItemTextTokens(modes) {
   return useMemo(() => {
-    const foreground = getVariableByName('dropdownItem/foreground', modes) || '#000000';
-    const fontFamily = getVariableByName('dropdownItem/fontFamily', modes) || 'JioType Var';
+    const foreground = getVariableByName('dropdownItem/foreground', modes);
+    const fontFamily = getVariableByName('dropdownItem/fontFamily', modes);
     const fontSize = toNumber(getVariableByName('dropdownItem/fontSize', modes), 16);
     const lineHeight = toNumber(getVariableByName('dropdownItem/lineHeight', modes), 19);
     return {
@@ -306,7 +306,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.
+    ...(Platform.OS === 'ios' ? null : {
+      lineHeight: tokens.inputLineHeight
+    }),
     fontWeight: tokens.inputFontWeight,
     padding: 0,
     margin: 0,

package/lib/module/components/SummaryTile/SummaryTile.js

@@ -3,7 +3,7 @@
 import React from 'react';
 import { View, Text, Pressable } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
-import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
+import { EMPTY_MODES, cloneChildrenWithModes, resolveTruncation } from '../../utils/react-utils';
 import Button from '../Button/Button';
 import NavArrow from '../NavArrow/NavArrow';
 import StrengthIndicator from '../StrengthIndicator/StrengthIndicator';
@@ -29,7 +29,8 @@ function SummaryTile({
   style,
   titleStyle,
   descriptionStyle,
-  accessibilityLabel
+  accessibilityLabel,
+  disableTruncation
 }) {
   const containerGap = getVariableByName('summaryTile/gap', modes) ?? 8;
   const containerPadding = getVariableByName('summaryTile/padding', modes) ?? 0;
@@ -95,7 +96,7 @@ function SummaryTile({
         },
         children: [title ? /*#__PURE__*/_jsx(Text, {
           style: [titleTextStyle, titleStyle],
-          numberOfLines: 1,
+          ...resolveTruncation(disableTruncation, 1),
           children: title
         }) : null, showIndicator ? /*#__PURE__*/_jsx(StrengthIndicator, {
           confidence: confidence,

package/lib/module/components/SupportText/SupportText.js

@@ -32,12 +32,12 @@ function SupportText({
   };
 
   // --- Token Resolution ---
-  const gap = parseInt(getVariableByName('supportText/gap', modes), 10) || 4;
-  const textColor = getVariableByName('supportText/foreground', modes) || '#0c0d10';
-  const fontFamily = getVariableByName('supportText/fontFamily', modes) || 'JioType Var';
-  const fontSize = parseInt(getVariableByName('supportText/fontSize', modes), 10) || 12;
-  const lineHeight = parseInt(getVariableByName('supportText/lineHeight', modes), 10) || 16;
-  const fontWeight = getVariableByName('supportText/fontWeight', modes) || '500';
+  const gap = parseInt(getVariableByName('supportText/gap', modes), 10);
+  const textColor = getVariableByName('supportText/foreground', modes);
+  const fontFamily = getVariableByName('supportText/fontFamily', modes);
+  const fontSize = parseInt(getVariableByName('supportText/fontSize', modes), 10);
+  const lineHeight = parseInt(getVariableByName('supportText/lineHeight', modes), 10);
+  const fontWeight = getVariableByName('supportText/fontWeight', modes);
 
   // --- Styles ---
   const containerStyle = {

package/lib/module/components/SupportText/SupportTextIcon.js

@@ -21,14 +21,14 @@ function SupportTextIcon({
   const iconName = STATUS_ICON_MAP[status] || 'ic_info';
 
   // Resolve icon size
-  const size = parseInt(getVariableByName('supportText/icon/size', modes), 10) || 16;
+  const size = parseInt(getVariableByName('supportText/icon/size', modes), 10);
 
   // Resolve icon color
   // Assuming supportText/foreground applies to icon as well, or there might be specific icon color tokens.
   // Using supportText/foreground as default based on common patterns if no specific icon token.
   // If specific tokens exist like 'supportText/icon/color', they should be used.
   // Detailed variables only showed supportText/foreground.
-  const color = getVariableByName('supportText/foreground', modes) || '#0c0d10';
+  const color = getVariableByName('supportText/foreground', modes);
   return /*#__PURE__*/_jsx(View, {
     style: style,
     children: /*#__PURE__*/_jsx(Icon, {

package/lib/module/components/Table/Table.js

@@ -0,0 +1,315 @@
+"use strict";
+
+import React from 'react';
+import { View, Text, Pressable, ScrollView, Platform } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
+
+/* -------------------------------------------------------------------------------------------------
+ * Shared types & token resolution
+ * -----------------------------------------------------------------------------------------------*/
+
+/** Resolved styling for a header cell and a body cell, derived from design tokens. */
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+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 = getVariableByName('tableHeader/label/fontfamily', modes) ?? 'JioType Var';
+  const headerFontSize = getVariableByName('tableHeader/label/fontsize', modes) ?? 14;
+  const headerFontWeight = getVariableByName('tableHeader/label/fontweight', modes) ?? 600;
+  const cellFontFamily = getVariableByName('tableCell/label/fontfamily', modes) ?? 'JioType Var';
+  const cellFontSize = getVariableByName('tableCell/label/fontsize', modes) ?? 14;
+  const cellFontWeight = getVariableByName('tableCell/label/fontweight', modes) ?? 400;
+  return {
+    headerBg: getVariableByName('tableHeader/background/color', modes) ?? '#f5f5f5',
+    headerPaddingH: getVariableByName('tableHeader/padding/horizontal', modes) ?? 12,
+    headerPaddingV: getVariableByName('tableHeader/padding/vertical', modes) ?? 12,
+    headerText: {
+      color: getVariableByName('tableHeader/label/color', modes) ?? '#000000',
+      fontFamily: headerFontFamily,
+      fontSize: headerFontSize,
+      fontWeight: toWeight(headerFontWeight),
+      lineHeight: 20
+    },
+    cellBg: getVariableByName('tableCell/background/color', modes) ?? '#ffffff',
+    cellPaddingH: getVariableByName('tableCell/padding/horizontal', modes) ?? 12,
+    cellPaddingV: getVariableByName('tableCell/padding/vertical', modes) ?? 12,
+    cellText: {
+      color: getVariableByName('tableCell/label/color', modes) ?? '#000000',
+      fontFamily: cellFontFamily,
+      fontSize: cellFontSize,
+      fontWeight: toWeight(cellFontWeight),
+      lineHeight: 20
+    },
+    borderColor: getVariableByName('tableCell/border/color', modes) ?? '#eeeeee',
+    borderSize: 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__*/_jsx(Text, {
+      style: [textStyle, {
+        textAlign: align
+      }],
+      children: children
+    });
+  }
+  return 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 = EMPTY_MODES,
+  style
+}) {
+  const t = resolveTableTokens(modes);
+  return /*#__PURE__*/_jsx(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 = EMPTY_MODES,
+  style
+}) {
+  const t = resolveTableTokens(modes);
+  return /*#__PURE__*/_jsx(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 = EMPTY_MODES,
+  style
+}) {
+  const t = resolveTableTokens(modes);
+  return /*#__PURE__*/_jsx(View, {
+    style: [{
+      flexDirection: 'row',
+      width: '100%',
+      borderBottomWidth: t.borderSize,
+      borderBottomColor: t.borderColor
+    }, style],
+    children: cloneChildrenWithModes(children, modes)
+  });
+}
+
+/* -------------------------------------------------------------------------------------------------
+ * Table.Row — row of body cells
+ * -----------------------------------------------------------------------------------------------*/
+
+function TableRow({
+  children,
+  onPress,
+  modes = EMPTY_MODES,
+  style
+}) {
+  const rowStyle = {
+    flexDirection: 'row',
+    width: '100%'
+  };
+  const content = cloneChildrenWithModes(children, modes);
+  if (onPress) {
+    return /*#__PURE__*/_jsx(Pressable, {
+      onPress: onPress,
+      accessibilityRole: "button",
+      style: ({
+        pressed
+      }) => [rowStyle, pressed ? {
+        opacity: 0.6
+      } : null, style],
+      children: content
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    style: [rowStyle, style],
+    children: content
+  });
+}
+
+/* -------------------------------------------------------------------------------------------------
+ * Table.Body — column container for rows
+ * -----------------------------------------------------------------------------------------------*/
+
+function TableBody({
+  children,
+  modes = EMPTY_MODES,
+  style
+}) {
+  return /*#__PURE__*/_jsx(View, {
+    style: [{
+      width: '100%'
+    }, style],
+    children: 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 = EMPTY_MODES,
+  style
+}) {
+  const isComposition = children != null;
+  const body = isComposition ? cloneChildrenWithModes(children, modes) : /*#__PURE__*/_jsxs(_Fragment, {
+    children: [showHeader && columns && columns.length > 0 && /*#__PURE__*/_jsx(TableHeader, {
+      modes: modes,
+      children: columns.map(col => /*#__PURE__*/_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__*/_jsx(TableBody, {
+      modes: modes,
+      children: data.map((row, rowIndex) => {
+        const isLastRow = rowIndex === data.length - 1;
+        return /*#__PURE__*/_jsx(TableRow, {
+          onPress: onRowPress ? () => onRowPress(row, rowIndex) : undefined,
+          modes: modes,
+          children: columns.map((col, colIndex) => /*#__PURE__*/_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__*/_jsx(View, {
+    accessibilityRole: Platform.OS === 'web' ? 'table' : undefined,
+    accessibilityLabel: accessibilityLabel,
+    style: [{
+      overflow: 'hidden'
+    }, !scrollable && {
+      width: '100%'
+    }, style],
+    children: body
+  });
+  if (scrollable) {
+    return /*#__PURE__*/_jsx(ScrollView, {
+      horizontal: true,
+      showsHorizontalScrollIndicator: false,
+      children: container
+    });
+  }
+  return container;
+}
+Table.Header = TableHeader;
+Table.HeaderCell = TableHeaderCell;
+Table.Body = TableBody;
+Table.Row = TableRow;
+Table.Cell = TableCell;
+export { TableHeader, TableHeaderCell, TableBody, TableRow, TableCell };
+export default Table;

package/lib/module/components/Text/Text.js

@@ -3,7 +3,7 @@
 import React from 'react';
 import { Text as RNText } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
-import { EMPTY_MODES } from '../../utils/react-utils';
+import { EMPTY_MODES, resolveTextLayout } from '../../utils/react-utils';
 import Skeleton from '../../skeleton/Skeleton';
 import { useSkeleton } from '../../skeleton/SkeletonGroup';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -18,6 +18,8 @@ function Text({
   modes = EMPTY_MODES,
   style,
   numberOfLines,
+  disableTruncation,
+  singleLine,
   loading,
   skeletonWidth,
   skeletonLines
@@ -68,9 +70,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
+  } = resolveTextLayout({
+    disableTruncation,
+    singleLine,
+    numberOfLines
+  });
   return /*#__PURE__*/_jsx(RNText, {
-    style: [textStyle, style],
-    numberOfLines: numberOfLines,
+    style: [textStyle, style, layoutStyle],
+    ...truncation,
     children: content
   });
 }

package/lib/module/components/TextInput/TextInput.js

@@ -120,26 +120,26 @@ const TextInputBase = /*#__PURE__*/forwardRef(function TextInput({
   const inputRef = useRef(null);
 
   // Resolve container tokens
-  const backgroundColor = getVariableByName('textInput/background', modes) || '#f5f5f5';
-  const borderColor = getVariableByName('textInput/border/color', modes) || '#f5f5f5';
-  const paddingHorizontal = getVariableByName('textInput/horizontal/padding', modes) || 14;
-  const paddingVertical = getVariableByName('textInput/vertical/padding', modes) || 14;
-  const radius = getVariableByName('textInput/radius', modes) || 99999;
+  const backgroundColor = getVariableByName('textInput/background', modes);
+  const borderColor = getVariableByName('textInput/border/color', modes);
+  const paddingHorizontal = getVariableByName('textInput/horizontal/padding', modes);
+  const paddingVertical = getVariableByName('textInput/vertical/padding', modes);
+  const radius = getVariableByName('textInput/radius', modes);
 
   // Resolve text input typography tokens
-  const textColor = getVariableByName('textInput/label/color', modes) || '#24262b';
-  const fontSize = getVariableByName('textInput/fontSize', modes) || 14;
-  const lineHeight = getVariableByName('textInput/lineHeight', modes) || 18;
-  const fontFamily = getVariableByName('textInput/fontFamily', modes) || 'System';
-  const fontWeightRaw = getVariableByName('textInput/fontWeight', modes) || 400;
+  const textColor = getVariableByName('textInput/label/color', modes);
+  const fontSize = getVariableByName('textInput/fontSize', modes);
+  const lineHeight = getVariableByName('textInput/lineHeight', modes);
+  const fontFamily = getVariableByName('textInput/fontFamily', modes);
+  const fontWeightRaw = 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 = getVariableByName('textInput/icon/color', modes) || '#24262b';
-  const iconSize = getVariableByName('textInput/icon/size', modes) || 18;
+  const iconColor = getVariableByName('textInput/icon/color', modes);
+  const iconSize = 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;
@@ -166,7 +166,15 @@ const TextInputBase = /*#__PURE__*/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.
+    ...(Platform.OS === 'ios' ? null : {
+      lineHeight
+    }),
     fontFamily,
     fontWeight,
     padding: 0,
@@ -295,8 +303,8 @@ const TextInputSearch = /*#__PURE__*/forwardRef(function TextInputSearch({
   ...rest
 }, ref) {
   // Resolve icon tokens for default search icon
-  const iconColor = getVariableByName('textInput/icon/color', modes) || '#24262b';
-  const iconSize = getVariableByName('textInput/icon/size', modes) || 18;
+  const iconColor = getVariableByName('textInput/icon/color', modes);
+  const iconSize = getVariableByName('textInput/icon/size', modes);
 
   // Use provided leading or default to search icon
   const defaultLeading = /*#__PURE__*/_jsx(Icon, {

package/lib/module/components/TextSegment/TextSegment.js

@@ -3,7 +3,7 @@
 import React, { useMemo } from 'react';
 import { Text as RNText } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
-import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
+import { EMPTY_MODES, cloneChildrenWithModes, resolveTextLayout } from '../../utils/react-utils';
 
 /**
  * A single coloured run inside a {@link TextSegment}. Each run can carry its own
@@ -73,6 +73,8 @@ function TextSegment({
   children,
   textAlign = 'Left',
   numberOfLines,
+  disableTruncation,
+  singleLine,
   modes = EMPTY_MODES,
   style
 }) {
@@ -104,9 +106,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 ? 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
+  } = resolveTextLayout({
+    disableTruncation,
+    singleLine,
+    numberOfLines
+  });
   return /*#__PURE__*/_jsx(RNText, {
-    style: [baseStyle, style],
-    numberOfLines: numberOfLines,
+    style: [baseStyle, style, layoutStyle],
+    ...truncation,
     children: content
   });
 }