jfs-components 0.1.2 → 0.1.12

package/lib/module/components/Section/Section.js

@@ -8,7 +8,7 @@ import NavArrow from '../NavArrow/NavArrow';
 import IconCapsule from '../IconCapsule/IconCapsule';
 import ListItem from '../ListItem/ListItem';
 import { usePressableWebSupport } from '../../utils/web-platform-utils';
-import { EMPTY_MODES, cloneChildrenWithModes, flattenChildren } from '../../utils/react-utils';
+import { EMPTY_MODES, cloneChildrenWithModes, flattenChildren, resolveTruncation } from '../../utils/react-utils';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // Match Button: delay the press visual on iOS so a scroll-cancelled touch
 // never applies the "pressed" style. See Button.tsx for the rationale.
@@ -374,6 +374,7 @@ function Section({
   accessibilityLabel: _accessibilityLabel,
   accessibilityHint,
   webAccessibilityProps,
+  disableTruncation,
   ...rest
 }) {
   // Focus and hover are still mirrored in React because they are visible,
@@ -409,7 +410,7 @@ function Section({
       style: headerWrapStyle,
       children: [/*#__PURE__*/_jsx(Text, {
         style: tokens.titleStyle,
-        numberOfLines: 1,
+        ...resolveTruncation(disableTruncation, 1),
         accessibilityElementsHidden: true,
         importantForAccessibility: "no",
         children: title
@@ -419,7 +420,7 @@ function Section({
       })]
     }), showSupportText && /*#__PURE__*/_jsx(Text, {
       style: tokens.supportTextStyle,
-      numberOfLines: 2,
+      ...resolveTruncation(disableTruncation, 2),
       accessibilityElementsHidden: true,
       importantForAccessibility: "no",
       children: supportText

package/lib/module/components/Slider/Slider.js

@@ -0,0 +1,469 @@
+"use strict";
+
+import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { View, Text, PanResponder, Platform } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { EMPTY_MODES, resolveTruncation } from '../../utils/react-utils';
+
+/**
+ * Imperative handle exposed via `ref`. The primary way to read a slider's value
+ * is still the controlled `value` + `onChange` pair (each `<Slider />` reports
+ * its own value, so multiple sliders are disambiguated by their own handlers).
+ * The ref is a convenience for reading the latest value on demand (e.g. on a
+ * button press) or imperatively nudging an uncontrolled slider.
+ *
+ * @example
+ * const slider = useRef<SliderHandle>(null)
+ * slider.current?.setValue(50)
+ * const v = slider.current?.getValue()
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const clamp = (n, min, max) => Math.min(Math.max(n, min), max);
+const asNum = (raw, fallback) => {
+  const n = typeof raw === 'number' ? raw : parseFloat(raw);
+  return Number.isFinite(n) ? n : fallback;
+};
+const asStr = (raw, fallback) => raw != null ? String(raw) : fallback;
+
+// The unfilled track is rendered at a lighter emphasis in the design.
+const TRACK_EMPHASIS = {
+  Emphasis: 'Low'
+};
+
+/**
+ * Slider — Figma node 5373:446 ("Slider").
+ *
+ * A horizontal, single-thumb slider driven entirely by design tokens. It maps a
+ * numeric range (`minValue`–`maxValue`) onto a track with a filled indicator, a
+ * draggable handle, a value bubble pinned above the handle, and optional min/max
+ * labels beneath the track. Built on `PanResponder` so the one code path works
+ * on iOS, Android and the web.
+ *
+ * The design only labels the range bounds, but a slider's purpose is to bind a
+ * value — so the live value is surfaced through the bubble (formatted via
+ * `formatOptions` / `formatValue`) and reported through `onChange` /
+ * `onChangeEnd`. Supports controlled and uncontrolled usage, web keyboard
+ * control, and an imperative {@link SliderHandle} `ref` for on-demand reads.
+ */
+const Slider = /*#__PURE__*/forwardRef(function Slider({
+  value: controlledValue,
+  defaultValue,
+  onChange,
+  onChangeEnd,
+  minValue = 0,
+  maxValue = 100,
+  step = 1,
+  isDisabled = false,
+  formatOptions,
+  locale,
+  formatValue,
+  renderTooltip,
+  alwaysShowTooltip = true,
+  showLabels = true,
+  minLabel,
+  maxLabel,
+  width = '100%',
+  modes = EMPTY_MODES,
+  style,
+  accessibilityLabel,
+  disableTruncation
+}, ref) {
+  const tokens = useMemo(() => resolveTokens(modes), [modes]);
+  const isControlled = controlledValue !== undefined;
+  const [internalValue, setInternalValue] = useState(() => clamp(defaultValue ?? minValue, minValue, maxValue));
+  const rawValue = isControlled ? controlledValue : internalValue;
+  const currentValue = clamp(rawValue, minValue, maxValue);
+  const [trackWidth, setTrackWidth] = useState(0);
+  const [tooltipWidth, setTooltipWidth] = useState(0);
+  const [isDragging, setIsDragging] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+  const quantize = useCallback(v => {
+    if (!step || step <= 0) return clamp(v, minValue, maxValue);
+    const stepped = Math.round((v - minValue) / step) * step + minValue;
+    // Round away float dust introduced by the division (e.g. 0.30000000000004).
+    const decimals = (String(step).split('.')[1] || '').length;
+    const fixed = decimals > 0 ? Number(stepped.toFixed(decimals)) : stepped;
+    return clamp(fixed, minValue, maxValue);
+  }, [minValue, maxValue, step]);
+
+  // Keep the latest interactive config in a ref so the PanResponder (created
+  // once) always reads fresh values without being recreated mid-gesture.
+  const interaction = useRef({
+    trackWidth,
+    minValue,
+    maxValue,
+    isDisabled,
+    isControlled,
+    quantize,
+    onChange,
+    onChangeEnd
+  });
+  interaction.current = {
+    trackWidth,
+    minValue,
+    maxValue,
+    isDisabled,
+    isControlled,
+    quantize,
+    onChange,
+    onChangeEnd
+  };
+  const lastValueRef = useRef(currentValue);
+  lastValueRef.current = currentValue;
+  const commit = useCallback((next, isFinal) => {
+    const {
+      isControlled: ctrl,
+      onChange: change,
+      onChangeEnd: changeEnd
+    } = interaction.current;
+    const changed = next !== lastValueRef.current;
+    lastValueRef.current = next;
+    if (changed) {
+      if (!ctrl) setInternalValue(next);
+      change?.(next);
+    }
+    if (isFinal) changeEnd?.(next);
+  }, []);
+  const valueFromX = useCallback(x => {
+    const {
+      trackWidth: w,
+      minValue: min,
+      maxValue: max,
+      quantize: q
+    } = interaction.current;
+    if (w <= 0) return lastValueRef.current;
+    const ratio = clamp(x / w, 0, 1);
+    return q(min + ratio * (max - min));
+  }, []);
+  const panResponder = useRef(PanResponder.create({
+    onStartShouldSetPanResponder: () => !interaction.current.isDisabled,
+    onMoveShouldSetPanResponder: () => !interaction.current.isDisabled,
+    onPanResponderGrant: e => {
+      if (interaction.current.isDisabled) return;
+      setIsDragging(true);
+      commit(valueFromX(e.nativeEvent.locationX), false);
+    },
+    onPanResponderMove: e => {
+      if (interaction.current.isDisabled) return;
+      commit(valueFromX(e.nativeEvent.locationX), false);
+    },
+    onPanResponderRelease: e => {
+      setIsDragging(false);
+      if (interaction.current.isDisabled) return;
+      commit(valueFromX(e.nativeEvent.locationX), true);
+    },
+    onPanResponderTerminate: () => {
+      setIsDragging(false);
+      if (interaction.current.isDisabled) return;
+      commit(lastValueRef.current, true);
+    }
+  })).current;
+
+  // Keyboard support (web). Arrow/Page keys nudge, Home/End jump to bounds.
+  const handleKeyDown = useCallback(e => {
+    if (isDisabled) return;
+    const big = Math.max(step, (maxValue - minValue) / 10);
+    let next = null;
+    switch (e.key) {
+      case 'ArrowRight':
+      case 'ArrowUp':
+        next = quantize(currentValue + step);
+        break;
+      case 'ArrowLeft':
+      case 'ArrowDown':
+        next = quantize(currentValue - step);
+        break;
+      case 'PageUp':
+        next = quantize(currentValue + big);
+        break;
+      case 'PageDown':
+        next = quantize(currentValue - big);
+        break;
+      case 'Home':
+        next = minValue;
+        break;
+      case 'End':
+        next = maxValue;
+        break;
+      default:
+        return;
+    }
+    e.preventDefault?.();
+    commit(next, true);
+  }, [isDisabled, step, minValue, maxValue, currentValue, quantize, commit]);
+  const handleAccessibilityAction = useCallback(event => {
+    if (isDisabled) return;
+    const name = event.nativeEvent.actionName;
+    if (name === 'increment') commit(quantize(currentValue + step), true);else if (name === 'decrement') commit(quantize(currentValue - step), true);
+  }, [isDisabled, step, currentValue, quantize, commit]);
+  useImperativeHandle(ref, () => ({
+    getValue: () => lastValueRef.current,
+    setValue: v => commit(quantize(v), true),
+    increment: by => commit(quantize(lastValueRef.current + (by ?? step)), true),
+    decrement: by => commit(quantize(lastValueRef.current - (by ?? step)), true)
+  }), [quantize, commit, step]);
+  const defaultFormat = useCallback(v => {
+    try {
+      return new Intl.NumberFormat(locale, formatOptions).format(v);
+    } catch {
+      return String(v);
+    }
+  }, [locale, formatOptions]);
+  const format = formatValue ?? defaultFormat;
+  const ratio = maxValue > minValue ? (currentValue - minValue) / (maxValue - minValue) : 0;
+  const percent = clamp(ratio, 0, 1) * 100;
+  const handleSize = tokens.handleSize;
+  // The bubble floats (absolutely positioned, no reserved layout space). When
+  // `alwaysShowTooltip` is false it only appears while interacting: dragging on
+  // any platform, or hovering on web. Lifting the finger clears `isDragging`,
+  // so the bubble disappears immediately on touch release.
+  const showTooltip = alwaysShowTooltip || isDragging || isHovered;
+  const onTrackLayout = useCallback(e => {
+    setTrackWidth(e.nativeEvent.layout.width);
+  }, []);
+  const onTooltipLayout = useCallback(e => {
+    setTooltipWidth(e.nativeEvent.layout.width);
+  }, []);
+  const valueText = format(currentValue);
+  const tooltipNode = showTooltip ? /*#__PURE__*/_jsxs(View, {
+    onLayout: onTooltipLayout,
+    style: [styles.tooltip, {
+      backgroundColor: tokens.tooltipBackground,
+      paddingHorizontal: tokens.tooltipPaddingH,
+      paddingVertical: tokens.tooltipPaddingV,
+      borderRadius: tokens.tooltipRadius,
+      maxWidth: tokens.tooltipMaxWidth,
+      bottom: handleSize + tokens.tooltipWrapGap,
+      // Pinned to the value point on the full-width track area (not
+      // the tiny handle-width thumb). An absolute child with only
+      // `left` set is clamped by Yoga to `parentWidth - left`, so
+      // parenting it to the 20px thumb collapsed the text to ~0px
+      // and rendered an empty bubble on device. Centre via translate.
+      left: `${percent}%`,
+      transform: [{
+        translateX: -tooltipWidth / 2
+      }]
+    }],
+    pointerEvents: "none",
+    children: [renderTooltip ? renderTooltip(currentValue) : /*#__PURE__*/_jsx(Text, {
+      style: tokens.tooltipLabel,
+      ...resolveTruncation(disableTruncation, 1),
+      children: valueText
+    }), /*#__PURE__*/_jsx(View, {
+      style: [styles.tip, {
+        bottom: -tokens.tipHeight
+      }],
+      pointerEvents: "none",
+      children: /*#__PURE__*/_jsx(Svg, {
+        width: tokens.tipWidth,
+        height: tokens.tipHeight,
+        viewBox: `0 0 ${tokens.tipWidth} ${tokens.tipHeight}`,
+        children: /*#__PURE__*/_jsx(Path, {
+          d: `M0 0 L${tokens.tipWidth / 2} ${tokens.tipHeight} L${tokens.tipWidth} 0 Z`,
+          fill: tokens.tooltipBackground
+        })
+      })
+    })]
+  }) : null;
+  return /*#__PURE__*/_jsxs(View, {
+    style: [{
+      width,
+      gap: tokens.gap,
+      paddingTop: tokens.paddingTop,
+      paddingBottom: tokens.paddingBottom,
+      paddingLeft: tokens.paddingLeft,
+      paddingRight: tokens.paddingRight,
+      opacity: isDisabled ? 0.5 : 1
+    }, style],
+    accessibilityLabel: accessibilityLabel,
+    children: [/*#__PURE__*/_jsxs(View, {
+      ...panResponder.panHandlers,
+      onLayout: onTrackLayout,
+      style: [styles.trackArea, {
+        height: handleSize
+      }],
+      accessible: true,
+      accessibilityRole: "adjustable",
+      accessibilityLabel: accessibilityLabel,
+      accessibilityValue: {
+        min: minValue,
+        max: maxValue,
+        now: currentValue,
+        text: valueText
+      },
+      accessibilityState: {
+        disabled: isDisabled
+      },
+      accessibilityActions: [{
+        name: 'increment'
+      }, {
+        name: 'decrement'
+      }],
+      onAccessibilityAction: handleAccessibilityAction,
+      focusable: !isDisabled,
+      ...(Platform.OS === 'web' ? {
+        onKeyDown: handleKeyDown,
+        tabIndex: isDisabled ? -1 : 0,
+        onMouseEnter: () => !isDisabled && setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false)
+      } : {}),
+      children: [/*#__PURE__*/_jsx(View, {
+        style: {
+          height: tokens.trackHeight,
+          borderRadius: tokens.trackRadius,
+          backgroundColor: tokens.trackBackground
+        }
+      }), /*#__PURE__*/_jsx(View, {
+        pointerEvents: "none",
+        style: {
+          position: 'absolute',
+          left: 0,
+          top: (handleSize - tokens.indicatorHeight) / 2,
+          height: tokens.indicatorHeight,
+          width: `${percent}%`,
+          borderRadius: tokens.indicatorRadius,
+          backgroundColor: tokens.indicatorBackground
+        }
+      }), /*#__PURE__*/_jsx(View, {
+        pointerEvents: "none",
+        style: {
+          position: 'absolute',
+          top: 0,
+          left: `${percent}%`,
+          width: handleSize,
+          height: handleSize,
+          transform: [{
+            translateX: -handleSize / 2
+          }]
+        },
+        children: /*#__PURE__*/_jsx(View, {
+          style: {
+            width: handleSize,
+            height: handleSize,
+            borderRadius: tokens.handleRadius,
+            backgroundColor: tokens.handleBackground
+          }
+        })
+      }), tooltipNode]
+    }), showLabels ? /*#__PURE__*/_jsxs(View, {
+      style: styles.labelWrap,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: tokens.label,
+        children: minLabel ?? format(minValue)
+      }), /*#__PURE__*/_jsx(Text, {
+        style: tokens.label,
+        children: maxLabel ?? format(maxValue)
+      })]
+    }) : null]
+  });
+});
+function resolveTokens(modes) {
+  // NOTE: token names are passed as string literals DIRECTLY to
+  // getVariableByName so the `extract-component-tokens` script can statically
+  // collect them for the generated docs. Do not refactor into a helper that
+  // receives the name as a variable.
+  const gap = asNum(getVariableByName('slider/gap', modes), 16);
+  const paddingTop = asNum(getVariableByName('slider/padding/top', modes), 8);
+  const paddingBottom = asNum(getVariableByName('slider/padding/bottom', modes), 0);
+  const paddingLeft = asNum(getVariableByName('slider/padding/left', modes), 0);
+  const paddingRight = asNum(getVariableByName('slider/padding/right', modes), 0);
+  const trackHeight = asNum(getVariableByName('slider/track/height', modes), 4);
+  const trackRadius = asNum(getVariableByName('slider/track/radius', modes), 999);
+  // The unfilled track uses a lighter emphasis in the design; consumer modes
+  // still win over the baked-in `Emphasis: Low`.
+  const trackBackground = asStr(getVariableByName('slider/track/background', {
+    ...TRACK_EMPHASIS,
+    ...modes
+  }), '#fde8c9');
+  const indicatorHeight = asNum(getVariableByName('slider/indicator/height', modes), 4);
+  const indicatorRadius = asNum(getVariableByName('slider/indicator/radius', modes), 999);
+  const indicatorBackground = asStr(getVariableByName('slider/indicator/background', modes), '#f7ab21');
+  const handleSize = asNum(getVariableByName('slider/handle/size', modes), 20);
+  const handleRadius = asNum(getVariableByName('slider/handle/radius', modes), 999999);
+  const handleBackground = asStr(getVariableByName('slider/handle/background', modes), '#f7ab21');
+  const tooltipWrapGap = asNum(getVariableByName('slider/tooltipWrap/gap', modes), 12);
+  const tooltipBackground = asStr(getVariableByName('tooltip/background', modes), '#0f0d0a');
+  const tooltipPaddingH = asNum(getVariableByName('tooltip/padding/horizontal', modes), 12);
+  const tooltipPaddingV = asNum(getVariableByName('tooltip/padding/vertical', modes), 8);
+  const tooltipRadius = asNum(getVariableByName('radius', modes), 8);
+  const tooltipMaxWidth = asNum(getVariableByName('maxWidth', modes), 280);
+  const tipWidth = asNum(getVariableByName('tooltip/tipItem/width', modes), 16);
+  const tipHeight = asNum(getVariableByName('tooltip/tipItem/height', modes), 8);
+  const tooltipLabelColor = asStr(getVariableByName('tooltip/label/color', modes), '#ffffff');
+  const tooltipLabelSize = asNum(getVariableByName('tooltip/label/fontSize', modes), 14);
+  const tooltipLabelFamily = asStr(getVariableByName('tooltip/lable/fontFamily', modes), 'JioType Var');
+  const tooltipLabelLineHeight = asNum(getVariableByName('tooltip/label/lineHeight', modes), 18);
+  const tooltipLabelWeight = asStr(getVariableByName('tooltip/label/fontWeight', modes), '500');
+  const labelColor = asStr(getVariableByName('text/foreground', modes), '#000000');
+  const labelSize = asNum(getVariableByName('text/fontSize', modes), 14);
+  const labelFamily = asStr(getVariableByName('text/fontFamily', modes), 'JioType Var');
+  const labelLineHeight = asNum(getVariableByName('text/lineHeight', modes), 20);
+  const labelWeight = asStr(getVariableByName('text/fontWeight', modes), '500');
+  const labelLetterSpacing = asNum(getVariableByName('text/letterSpacing', modes), -0.5);
+  return {
+    gap,
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    trackHeight,
+    trackRadius,
+    trackBackground,
+    indicatorHeight,
+    indicatorRadius,
+    indicatorBackground,
+    handleSize,
+    handleRadius,
+    handleBackground,
+    tooltipWrapGap,
+    tooltipBackground,
+    tooltipPaddingH,
+    tooltipPaddingV,
+    tooltipRadius,
+    tooltipMaxWidth,
+    tooltipLineHeight: tooltipLabelLineHeight,
+    tipWidth,
+    tipHeight,
+    tooltipLabel: {
+      color: tooltipLabelColor,
+      fontSize: tooltipLabelSize,
+      fontFamily: tooltipLabelFamily,
+      lineHeight: tooltipLabelLineHeight,
+      fontWeight: tooltipLabelWeight,
+      includeFontPadding: false
+    },
+    label: {
+      color: labelColor,
+      fontSize: labelSize,
+      fontFamily: labelFamily,
+      lineHeight: labelLineHeight,
+      fontWeight: labelWeight,
+      letterSpacing: labelLetterSpacing,
+      includeFontPadding: false
+    }
+  };
+}
+const styles = {
+  trackArea: {
+    width: '100%',
+    justifyContent: 'center',
+    position: 'relative'
+  },
+  labelWrap: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+    width: '100%'
+  },
+  tooltip: {
+    position: 'absolute',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  tip: {
+    position: 'absolute',
+    alignSelf: 'center'
+  }
+};
+export default Slider;

package/lib/module/components/Stack/Stack.js

@@ -0,0 +1,81 @@
+"use strict";
+
+import React, { useMemo } from 'react';
+import { View } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { useTokens } from '../../design-tokens/JFSThemeProvider';
+import { cloneChildrenWithModes, EMPTY_MODES, injectChildStyle } from '../../utils/react-utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * 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 = EMPTY_MODES,
+  style,
+  ...rest
+}) {
+  const {
+    modes: globalModes
+  } = useTokens();
+  const modes = useMemo(() => ({
+    ...globalModes,
+    ...propModes
+  }), [globalModes, propModes]);
+  const {
+    containerStyle,
+    processedChildren
+  } = useMemo(() => {
+    const gap = 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 ? cloneChildrenWithModes(children, modes) : null;
+    const processed = stretchCrossAxis && moded ? injectChildStyle(moded, {
+      alignSelf: 'stretch'
+    }) : moded;
+    return {
+      containerStyle: container,
+      processedChildren: processed
+    };
+  }, [children, modes, layoutDirection, alignCrossAxis, justifyMainAxis, equalHeight, fillWidth]);
+  return /*#__PURE__*/_jsx(View, {
+    style: [containerStyle, style],
+    ...rest,
+    children: processedChildren
+  });
+}
+export default /*#__PURE__*/React.memo(Stack);

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

@@ -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,