jfs-components 0.1.2 → 0.1.12

package/lib/commonjs/components/Section/Section.js

@@ -380,6 +380,7 @@ function Section({
   accessibilityLabel: _accessibilityLabel,
   accessibilityHint,
   webAccessibilityProps,
+  disableTruncation,
   ...rest
 }) {
   // Focus and hover are still mirrored in React because they are visible,
@@ -415,7 +416,7 @@ function Section({
       style: headerWrapStyle,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: tokens.titleStyle,
-        numberOfLines: 1,
+        ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
         accessibilityElementsHidden: true,
         importantForAccessibility: "no",
         children: title
@@ -425,7 +426,7 @@ function Section({
       })]
     }), showSupportText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: tokens.supportTextStyle,
-      numberOfLines: 2,
+      ...(0, _reactUtils.resolveTruncation)(disableTruncation, 2),
       accessibilityElementsHidden: true,
       importantForAccessibility: "no",
       children: supportText

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

@@ -0,0 +1,474 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _reactNativeSvg = _interopRequireWildcard(require("react-native-svg"));
+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); }
+/**
+ * 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()
+ */
+
+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__*/(0, _react.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 = _reactUtils.EMPTY_MODES,
+  style,
+  accessibilityLabel,
+  disableTruncation
+}, ref) {
+  const tokens = (0, _react.useMemo)(() => resolveTokens(modes), [modes]);
+  const isControlled = controlledValue !== undefined;
+  const [internalValue, setInternalValue] = (0, _react.useState)(() => clamp(defaultValue ?? minValue, minValue, maxValue));
+  const rawValue = isControlled ? controlledValue : internalValue;
+  const currentValue = clamp(rawValue, minValue, maxValue);
+  const [trackWidth, setTrackWidth] = (0, _react.useState)(0);
+  const [tooltipWidth, setTooltipWidth] = (0, _react.useState)(0);
+  const [isDragging, setIsDragging] = (0, _react.useState)(false);
+  const [isHovered, setIsHovered] = (0, _react.useState)(false);
+  const quantize = (0, _react.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 = (0, _react.useRef)({
+    trackWidth,
+    minValue,
+    maxValue,
+    isDisabled,
+    isControlled,
+    quantize,
+    onChange,
+    onChangeEnd
+  });
+  interaction.current = {
+    trackWidth,
+    minValue,
+    maxValue,
+    isDisabled,
+    isControlled,
+    quantize,
+    onChange,
+    onChangeEnd
+  };
+  const lastValueRef = (0, _react.useRef)(currentValue);
+  lastValueRef.current = currentValue;
+  const commit = (0, _react.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 = (0, _react.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 = (0, _react.useRef)(_reactNative.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 = (0, _react.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 = (0, _react.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]);
+  (0, _react.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 = (0, _react.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 = (0, _react.useCallback)(e => {
+    setTrackWidth(e.nativeEvent.layout.width);
+  }, []);
+  const onTooltipLayout = (0, _react.useCallback)(e => {
+    setTooltipWidth(e.nativeEvent.layout.width);
+  }, []);
+  const valueText = format(currentValue);
+  const tooltipNode = showTooltip ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: tokens.tooltipLabel,
+      ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
+      children: valueText
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.tip, {
+        bottom: -tokens.tipHeight
+      }],
+      pointerEvents: "none",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.default, {
+        width: tokens.tipWidth,
+        height: tokens.tipHeight,
+        viewBox: `0 0 ${tokens.tipWidth} ${tokens.tipHeight}`,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Path, {
+          d: `M0 0 L${tokens.tipWidth / 2} ${tokens.tipHeight} L${tokens.tipWidth} 0 Z`,
+          fill: tokens.tooltipBackground
+        })
+      })
+    })]
+  }) : null;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.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__*/(0, _jsxRuntime.jsxs)(_reactNative.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,
+      ...(_reactNative.Platform.OS === 'web' ? {
+        onKeyDown: handleKeyDown,
+        tabIndex: isDisabled ? -1 : 0,
+        onMouseEnter: () => !isDisabled && setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false)
+      } : {}),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: {
+          height: tokens.trackHeight,
+          borderRadius: tokens.trackRadius,
+          backgroundColor: tokens.trackBackground
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        pointerEvents: "none",
+        style: {
+          position: 'absolute',
+          top: 0,
+          left: `${percent}%`,
+          width: handleSize,
+          height: handleSize,
+          transform: [{
+            translateX: -handleSize / 2
+          }]
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: {
+            width: handleSize,
+            height: handleSize,
+            borderRadius: tokens.handleRadius,
+            backgroundColor: tokens.handleBackground
+          }
+        })
+      }), tooltipNode]
+    }), showLabels ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.labelWrap,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: tokens.label,
+        children: minLabel ?? format(minValue)
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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((0, _figmaVariablesResolver.getVariableByName)('slider/gap', modes), 16);
+  const paddingTop = asNum((0, _figmaVariablesResolver.getVariableByName)('slider/padding/top', modes), 8);
+  const paddingBottom = asNum((0, _figmaVariablesResolver.getVariableByName)('slider/padding/bottom', modes), 0);
+  const paddingLeft = asNum((0, _figmaVariablesResolver.getVariableByName)('slider/padding/left', modes), 0);
+  const paddingRight = asNum((0, _figmaVariablesResolver.getVariableByName)('slider/padding/right', modes), 0);
+  const trackHeight = asNum((0, _figmaVariablesResolver.getVariableByName)('slider/track/height', modes), 4);
+  const trackRadius = asNum((0, _figmaVariablesResolver.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((0, _figmaVariablesResolver.getVariableByName)('slider/track/background', {
+    ...TRACK_EMPHASIS,
+    ...modes
+  }), '#fde8c9');
+  const indicatorHeight = asNum((0, _figmaVariablesResolver.getVariableByName)('slider/indicator/height', modes), 4);
+  const indicatorRadius = asNum((0, _figmaVariablesResolver.getVariableByName)('slider/indicator/radius', modes), 999);
+  const indicatorBackground = asStr((0, _figmaVariablesResolver.getVariableByName)('slider/indicator/background', modes), '#f7ab21');
+  const handleSize = asNum((0, _figmaVariablesResolver.getVariableByName)('slider/handle/size', modes), 20);
+  const handleRadius = asNum((0, _figmaVariablesResolver.getVariableByName)('slider/handle/radius', modes), 999999);
+  const handleBackground = asStr((0, _figmaVariablesResolver.getVariableByName)('slider/handle/background', modes), '#f7ab21');
+  const tooltipWrapGap = asNum((0, _figmaVariablesResolver.getVariableByName)('slider/tooltipWrap/gap', modes), 12);
+  const tooltipBackground = asStr((0, _figmaVariablesResolver.getVariableByName)('tooltip/background', modes), '#0f0d0a');
+  const tooltipPaddingH = asNum((0, _figmaVariablesResolver.getVariableByName)('tooltip/padding/horizontal', modes), 12);
+  const tooltipPaddingV = asNum((0, _figmaVariablesResolver.getVariableByName)('tooltip/padding/vertical', modes), 8);
+  const tooltipRadius = asNum((0, _figmaVariablesResolver.getVariableByName)('radius', modes), 8);
+  const tooltipMaxWidth = asNum((0, _figmaVariablesResolver.getVariableByName)('maxWidth', modes), 280);
+  const tipWidth = asNum((0, _figmaVariablesResolver.getVariableByName)('tooltip/tipItem/width', modes), 16);
+  const tipHeight = asNum((0, _figmaVariablesResolver.getVariableByName)('tooltip/tipItem/height', modes), 8);
+  const tooltipLabelColor = asStr((0, _figmaVariablesResolver.getVariableByName)('tooltip/label/color', modes), '#ffffff');
+  const tooltipLabelSize = asNum((0, _figmaVariablesResolver.getVariableByName)('tooltip/label/fontSize', modes), 14);
+  const tooltipLabelFamily = asStr((0, _figmaVariablesResolver.getVariableByName)('tooltip/lable/fontFamily', modes), 'JioType Var');
+  const tooltipLabelLineHeight = asNum((0, _figmaVariablesResolver.getVariableByName)('tooltip/label/lineHeight', modes), 18);
+  const tooltipLabelWeight = asStr((0, _figmaVariablesResolver.getVariableByName)('tooltip/label/fontWeight', modes), '500');
+  const labelColor = asStr((0, _figmaVariablesResolver.getVariableByName)('text/foreground', modes), '#000000');
+  const labelSize = asNum((0, _figmaVariablesResolver.getVariableByName)('text/fontSize', modes), 14);
+  const labelFamily = asStr((0, _figmaVariablesResolver.getVariableByName)('text/fontFamily', modes), 'JioType Var');
+  const labelLineHeight = asNum((0, _figmaVariablesResolver.getVariableByName)('text/lineHeight', modes), 20);
+  const labelWeight = asStr((0, _figmaVariablesResolver.getVariableByName)('text/fontWeight', modes), '500');
+  const labelLetterSpacing = asNum((0, _figmaVariablesResolver.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'
+  }
+};
+var _default = exports.default = Slider;

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

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

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

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

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

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