jfs-components 0.0.74 → 0.0.78

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

@@ -0,0 +1,487 @@
+"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 _SupportText = _interopRequireDefault(require("../SupportText/SupportText"));
+var _Dropdown = _interopRequireWildcard(require("../Dropdown/Dropdown"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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); }
+const IS_WEB = _reactNative.Platform.OS === 'web';
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+/**
+ * Suggestions accept either a bare string (used as both value and label) or a
+ * full `{ value, label }` option object for richer data.
+ */
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function toNumber(value, fallback) {
+  if (typeof value === 'number' && Number.isFinite(value)) return value;
+  if (typeof value === 'string') {
+    const parsed = parseFloat(value);
+    if (Number.isFinite(parsed)) return parsed;
+  }
+  return fallback;
+}
+function normalizeItem(item) {
+  if (typeof item === 'string') return {
+    value: item,
+    label: item
+  };
+  return item;
+}
+const defaultFilter = (query, option) => option.label.toLowerCase().includes(query.toLowerCase());
+
+// ---------------------------------------------------------------------------
+// Token resolution
+// ---------------------------------------------------------------------------
+
+function useFormFieldTokens(modes) {
+  return (0, _react.useMemo)(() => {
+    const labelColor = (0, _figmaVariablesResolver.getVariableByName)('formField/label/color', modes) || '#000000';
+    const labelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('formField/label/fontFamily', modes) || 'JioType Var';
+    const labelFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('formField/label/fontSize', modes), 14);
+    const labelLineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('formField/label/lineHeight', modes), 17);
+    const labelFontWeight = (0, _figmaVariablesResolver.getVariableByName)('formField/label/fontWeight', modes) || '500';
+    const gap = toNumber((0, _figmaVariablesResolver.getVariableByName)('formField/gap', modes), 8);
+    const inputPaddingH = toNumber((0, _figmaVariablesResolver.getVariableByName)('formField/input/padding/horizontal', modes), 12);
+    const inputGap = toNumber((0, _figmaVariablesResolver.getVariableByName)('formField/input/gap', modes), 8);
+    const inputRadius = toNumber((0, _figmaVariablesResolver.getVariableByName)('formField/input/radius', modes), 8);
+    const inputBorderSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('formField/input/border/size', modes), 1.5);
+    const inputBackground = (0, _figmaVariablesResolver.getVariableByName)('formField/input/background', modes) || '#ffffff';
+    const inputBorderColor = (0, _figmaVariablesResolver.getVariableByName)('formField/input/border/color', modes) || '#b5b6b7';
+    const inputFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('formField/input/label/fontSize', modes), 16);
+    const inputLineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('formField/input/label/lineHeight', modes), 45);
+    const inputFontFamily = (0, _figmaVariablesResolver.getVariableByName)('formField/input/label/fontFamily', modes) || 'JioType Var';
+    const inputFontWeight = (0, _figmaVariablesResolver.getVariableByName)('formField/input/label/fontWeight', modes) || '400';
+    const inputTextColor = (0, _figmaVariablesResolver.getVariableByName)('formField/input/label/color', modes) || '#24262b';
+    return {
+      labelColor,
+      labelFontFamily,
+      labelFontSize,
+      labelLineHeight,
+      labelFontWeight,
+      gap,
+      inputPaddingH,
+      inputGap,
+      inputRadius,
+      inputBorderSize,
+      inputBackground,
+      inputBorderColor,
+      inputFontSize,
+      inputLineHeight,
+      inputFontFamily,
+      inputFontWeight,
+      inputTextColor
+    };
+  }, [modes]);
+}
+function useDropdownItemTextTokens(modes) {
+  return (0, _react.useMemo)(() => {
+    const foreground = (0, _figmaVariablesResolver.getVariableByName)('dropdownItem/foreground', modes) || '#000000';
+    const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('dropdownItem/fontFamily', modes) || 'JioType Var';
+    const fontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('dropdownItem/fontSize', modes), 16);
+    const lineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('dropdownItem/lineHeight', modes), 19);
+    return {
+      foreground,
+      fontFamily,
+      fontSize,
+      lineHeight
+    };
+  }, [modes]);
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+function SuggestiveSearch({
+  label,
+  placeholder = 'Search',
+  items,
+  inputValue,
+  defaultInputValue = '',
+  onInputChange,
+  value,
+  defaultValue = null,
+  onValueChange,
+  filter = defaultFilter,
+  minChars = 1,
+  maxResults,
+  highlightMatch = true,
+  emptyMessage,
+  renderItem,
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  menuMaxHeight = 240,
+  menuOffset = 6,
+  isRequired = false,
+  isDisabled = false,
+  isInvalid = false,
+  isReadOnly = false,
+  supportText,
+  errorMessage,
+  modes: propModes = _reactUtils.EMPTY_MODES,
+  style,
+  inputStyle,
+  inputTextStyle,
+  menuStyle,
+  accessibilityLabel,
+  accessibilityHint,
+  onFocus,
+  onBlur,
+  testID
+}) {
+  // ---------------- Modes ----------------
+  const {
+    modes: globalModes
+  } = (0, _JFSThemeProvider.useTokens)();
+  const baseModes = (0, _react.useMemo)(() => ({
+    ...globalModes,
+    ...propModes
+  }), [globalModes, propModes]);
+  const interactive = !isDisabled && !isReadOnly;
+
+  // ---------------- Query state ----------------
+  const isControlledInput = inputValue !== undefined;
+  const [internalInput, setInternalInput] = (0, _react.useState)(defaultInputValue);
+  const query = isControlledInput ? inputValue : internalInput;
+
+  // ---------------- Selected value state ----------------
+  const isControlledValue = value !== undefined;
+  const [internalValue, setInternalValue] = (0, _react.useState)(defaultValue);
+  const currentValue = isControlledValue ? value : internalValue;
+
+  // ---------------- Open state ----------------
+  const isControlledOpen = open !== undefined;
+  const [internalOpen, setInternalOpen] = (0, _react.useState)(defaultOpen);
+  const [isFocused, setIsFocused] = (0, _react.useState)(false);
+  const setOpenState = (0, _react.useCallback)(next => {
+    if (!isControlledOpen) setInternalOpen(next);
+    onOpenChange?.(next);
+  }, [isControlledOpen, onOpenChange]);
+
+  // ---------------- Suggestions ----------------
+  const normalizedItems = (0, _react.useMemo)(() => (items ?? []).map(normalizeItem), [items]);
+  const suggestions = (0, _react.useMemo)(() => {
+    const trimmed = query.trim();
+    if (trimmed.length < minChars) return [];
+    const matched = normalizedItems.filter(opt => filter(query, opt));
+    return maxResults != null ? matched.slice(0, maxResults) : matched;
+  }, [normalizedItems, query, minChars, filter, maxResults]);
+  const hasSuggestions = suggestions.length > 0;
+  const showEmpty = Boolean(emptyMessage && query.trim().length >= minChars && !hasSuggestions);
+  const hasMenuContent = hasSuggestions || showEmpty;
+
+  // Resolved open state: an explicit `open` prop wins; otherwise the dropdown
+  // tracks the internal "wants suggestions" flag (set on focus / typing,
+  // cleared on blur / select). Blur and outside-press handle dismissal, so we
+  // intentionally do NOT gate on `isFocused` here — that would suppress
+  // `defaultOpen` on mount.
+  const isOpen = interactive && (isControlledOpen ? Boolean(open) : internalOpen) && hasMenuContent;
+
+  // ---------------- Token modes (state cascade) ----------------
+  const modes = (0, _react.useMemo)(() => ({
+    ...baseModes,
+    'FormField States': isInvalid ? 'Error' : isReadOnly || isDisabled ? 'Read Only' : isFocused ? 'Active' : baseModes['FormField States'] || 'Idle'
+  }), [baseModes, isInvalid, isReadOnly, isDisabled, isFocused]);
+  const tokens = useFormFieldTokens(modes);
+  const itemTextTokens = useDropdownItemTextTokens(modes);
+
+  // ---------------- Handlers ----------------
+  const inputRef = (0, _react.useRef)(null);
+  const blurTimer = (0, _react.useRef)(null);
+  const clearBlurTimer = (0, _react.useCallback)(() => {
+    if (blurTimer.current) {
+      clearTimeout(blurTimer.current);
+      blurTimer.current = null;
+    }
+  }, []);
+  (0, _react.useEffect)(() => () => clearBlurTimer(), [clearBlurTimer]);
+  const setQuery = (0, _react.useCallback)(text => {
+    if (!isControlledInput) setInternalInput(text);
+    onInputChange?.(text);
+  }, [isControlledInput, onInputChange]);
+  const handleChangeText = (0, _react.useCallback)(text => {
+    setQuery(text);
+    // Typing invalidates a prior selection unless the text still
+    // exactly matches the selected option's label.
+    if (currentValue != null) {
+      const selected = normalizedItems.find(o => o.value === currentValue);
+      if (!selected || selected.label !== text) {
+        if (!isControlledValue) setInternalValue(null);
+        onValueChange?.(null);
+      }
+    }
+    if (!isControlledOpen) setInternalOpen(true);
+  }, [setQuery, currentValue, normalizedItems, isControlledValue, onValueChange, isControlledOpen]);
+  const handleSelect = (0, _react.useCallback)(selectedValue => {
+    clearBlurTimer();
+    const option = normalizedItems.find(o => o.value === selectedValue);
+    if (!option || option.disabled) return;
+    setQuery(option.label);
+    if (!isControlledValue) setInternalValue(option.value);
+    onValueChange?.(option.value, option);
+    setOpenState(false);
+    inputRef.current?.blur();
+  }, [clearBlurTimer, normalizedItems, setQuery, isControlledValue, onValueChange, setOpenState]);
+  const handleFocus = (0, _react.useCallback)(e => {
+    clearBlurTimer();
+    setIsFocused(true);
+    if (!isControlledOpen) setInternalOpen(true);
+    onFocus?.(e);
+  }, [clearBlurTimer, isControlledOpen, onFocus]);
+  const handleBlur = (0, _react.useCallback)(e => {
+    // Delay closing so a suggestion press (which blurs the input first
+    // on web) still registers before the list unmounts.
+    clearBlurTimer();
+    blurTimer.current = setTimeout(() => {
+      setIsFocused(false);
+      if (!isControlledOpen) setInternalOpen(false);
+    }, 120);
+    onBlur?.(e);
+  }, [clearBlurTimer, isControlledOpen, onBlur]);
+
+  // ---------------- Web outside-press to close ----------------
+  const rootRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    if (!IS_WEB || !isOpen) return;
+    const handler = e => {
+      const node = rootRef.current;
+      if (node?.contains && !node.contains(e.target)) {
+        clearBlurTimer();
+        setIsFocused(false);
+        if (!isControlledOpen) setInternalOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, [isOpen, isControlledOpen, clearBlurTimer]);
+
+  // ---------------- Styles ----------------
+  const labelTextStyle = {
+    color: tokens.labelColor,
+    fontFamily: tokens.labelFontFamily,
+    fontSize: tokens.labelFontSize,
+    lineHeight: tokens.labelLineHeight,
+    fontWeight: tokens.labelFontWeight
+  };
+  const requiredIndicatorStyle = {
+    ...labelTextStyle,
+    color: '#d93d3d'
+  };
+  const wrapperStyle = {
+    gap: tokens.gap,
+    opacity: isDisabled ? 0.5 : 1,
+    width: '100%',
+    position: 'relative',
+    // Keep the dropdown above sibling content when it overflows the field.
+    zIndex: isOpen ? 1000 : undefined
+  };
+  const inputRowStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: tokens.inputBackground,
+    borderColor: tokens.inputBorderColor,
+    borderWidth: tokens.inputBorderSize,
+    borderStyle: 'solid',
+    borderRadius: tokens.inputRadius,
+    paddingHorizontal: tokens.inputPaddingH,
+    paddingVertical: 0,
+    gap: tokens.inputGap,
+    minHeight: tokens.inputLineHeight,
+    width: '100%'
+  };
+  const inputTextStyles = {
+    flex: 1,
+    color: tokens.inputTextColor,
+    fontFamily: tokens.inputFontFamily,
+    fontSize: tokens.inputFontSize,
+    lineHeight: tokens.inputLineHeight,
+    fontWeight: tokens.inputFontWeight,
+    padding: 0,
+    margin: 0,
+    ...(IS_WEB ? {
+      outlineStyle: 'none',
+      outlineWidth: 0,
+      outlineColor: 'transparent'
+    } : {})
+  };
+  const placeholderColor = '#888a8d';
+  const itemBaseTextStyle = {
+    flex: 1,
+    color: itemTextTokens.foreground,
+    fontFamily: itemTextTokens.fontFamily,
+    fontSize: itemTextTokens.fontSize,
+    lineHeight: itemTextTokens.lineHeight,
+    fontWeight: '400'
+  };
+
+  // ---------------- Support text ----------------
+  const supportStatus = isInvalid ? 'Error' : 'Neutral';
+  const supportLabel = isInvalid && errorMessage ? errorMessage : supportText;
+
+  // ---------------- Accessibility ----------------
+  const resolvedA11yLabel = accessibilityLabel || label || placeholder || 'Search';
+  const a11yProps = {
+    accessibilityRole: IS_WEB ? undefined : 'search',
+    accessibilityLabel: resolvedA11yLabel,
+    accessibilityState: {
+      disabled: isDisabled,
+      expanded: isOpen
+    }
+  };
+  if (accessibilityHint) a11yProps.accessibilityHint = accessibilityHint;
+
+  // ---------------- Suggestion highlight ----------------
+  const renderHighlighted = (0, _react.useCallback)(optLabel => {
+    const trimmed = query.trim();
+    if (!highlightMatch || trimmed.length === 0) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: itemBaseTextStyle,
+        children: optLabel
+      });
+    }
+    const idx = optLabel.toLowerCase().indexOf(trimmed.toLowerCase());
+    if (idx < 0) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: itemBaseTextStyle,
+        children: optLabel
+      });
+    }
+    const before = optLabel.slice(0, idx);
+    const match = optLabel.slice(idx, idx + trimmed.length);
+    const after = optLabel.slice(idx + trimmed.length);
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+      style: itemBaseTextStyle,
+      children: [before, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: {
+          fontWeight: '700'
+        },
+        children: match
+      }), after]
+    });
+  }, [query, highlightMatch, itemBaseTextStyle]);
+
+  // ---------------- Render ----------------
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    ref: rootRef,
+    style: [wrapperStyle, style],
+    pointerEvents: isDisabled ? 'none' : 'auto',
+    testID: testID,
+    children: [label != null && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.labelRow,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: labelTextStyle,
+        children: label
+      }), isRequired && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: requiredIndicatorStyle,
+        children: " *"
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.anchor,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+        style: [inputRowStyle, inputStyle],
+        onPress: () => inputRef.current?.focus(),
+        accessible: false,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+          ref: inputRef,
+          style: [inputTextStyles, inputTextStyle],
+          value: query,
+          onChangeText: handleChangeText,
+          onFocus: handleFocus,
+          onBlur: handleBlur,
+          placeholder: placeholder,
+          placeholderTextColor: placeholderColor,
+          editable: interactive,
+          autoCapitalize: "none",
+          autoComplete: "off",
+          autoCorrect: false,
+          ...a11yProps,
+          ...(IS_WEB ? {
+            accessibilityRole: 'search',
+            'aria-autocomplete': 'list',
+            'aria-expanded': isOpen
+          } : {})
+        })
+      }), isOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [styles.popup, {
+          top: '100%',
+          marginTop: menuOffset
+        }]
+        // Keep taps from dismissing the keyboard before the
+        // item's press handler runs on native.
+        ,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default, {
+          modes: modes,
+          maxHeight: menuMaxHeight,
+          style: menuStyle,
+          accessibilityLabel: `${resolvedA11yLabel} suggestions`,
+          children: hasSuggestions ? suggestions.map(opt => {
+            const isSelected = opt.value === currentValue;
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.DropdownItem, {
+              value: opt.value,
+              selected: isSelected,
+              disabled: opt.disabled ?? false,
+              onPress: handleSelect,
+              modes: modes,
+              children: renderItem ? renderItem(opt, {
+                query,
+                isSelected
+              }) : renderHighlighted(opt.label)
+            }, `sg-${opt.value}`);
+          }) : showEmpty && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: styles.emptyRow,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: [itemBaseTextStyle, {
+                color: placeholderColor
+              }],
+              children: emptyMessage
+            })
+          })
+        })
+      })]
+    }), supportLabel != null && supportLabel !== '' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SupportText.default, {
+      label: supportLabel,
+      status: supportStatus,
+      modes: modes
+    })]
+  });
+}
+const styles = {
+  labelRow: {
+    flexDirection: 'row',
+    alignItems: 'baseline'
+  },
+  anchor: {
+    position: 'relative',
+    width: '100%',
+    zIndex: 1
+  },
+  popup: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    zIndex: 1000
+  },
+  emptyRow: {
+    paddingHorizontal: 12,
+    paddingVertical: 12
+  }
+};
+var _default = exports.default = SuggestiveSearch;

package/lib/commonjs/components/Text/Text.js

@@ -8,6 +8,8 @@ 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 _Skeleton = _interopRequireDefault(require("../../skeleton/Skeleton"));
+var _SkeletonGroup = require("../../skeleton/SkeletonGroup");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const TEXT_ALIGN_MAP = {
@@ -20,7 +22,10 @@ function Text({
   textAlign = 'Left',
   modes = _reactUtils.EMPTY_MODES,
   style,
-  numberOfLines
+  numberOfLines,
+  loading,
+  skeletonWidth,
+  skeletonLines
 }) {
   const foreground = (0, _figmaVariablesResolver.getVariableByName)('text/foreground', modes) ?? '#000000';
   const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('text/fontFamily', modes) ?? 'JioType';
@@ -28,6 +33,31 @@ function Text({
   const fontWeight = (0, _figmaVariablesResolver.getVariableByName)('text/fontWeight', modes) ?? '500';
   const lineHeight = (0, _figmaVariablesResolver.getVariableByName)('text/lineHeight', modes) ?? 20;
   const letterSpacing = (0, _figmaVariablesResolver.getVariableByName)('text/letterSpacing', modes) ?? -0.5;
+
+  // Skeleton short-circuit. The hook is always called (stable order); the
+  // surrounding group's `active` flag is the default, but an explicit
+  // `loading` prop overrides both directions.
+  const {
+    active: groupActive
+  } = (0, _SkeletonGroup.useSkeleton)();
+  const isLoading = loading ?? groupActive;
+  if (isLoading) {
+    const resolvedFontSize = fontSize;
+    const resolvedLineHeight = lineHeight;
+    const lines = Math.max(1, skeletonLines ?? numberOfLines ?? 1);
+    // Heuristic width based on the actual content length so the placeholder
+    // visually matches what's about to load. Capped to a reasonable lower
+    // bound so very short labels still produce a visible block.
+    const contentLength = typeof children === 'string' ? children.length : typeof text === 'string' ? text.length : 12;
+    const charWidth = resolvedFontSize * 0.55;
+    const computedWidth = Math.max(charWidth * 4, contentLength * charWidth);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, {
+      kind: "text",
+      width: skeletonWidth ?? computedWidth,
+      height: resolvedLineHeight * lines,
+      modes: modes
+    });
+  }
   const textStyle = {
     color: foreground,
     fontFamily: fontFamily,

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

@@ -118,6 +118,11 @@ function TextInput({
   // Track focus state to hide placeholder when focused
   const [isFocused, setIsFocused] = (0, _react.useState)(false);
   const [isHovered, setIsHovered] = (0, _react.useState)(false);
+  // Ref to the underlying native input so a tap anywhere inside the Pressable
+  // wrapper can programmatically focus it. Without this, on Android the
+  // wrapping Pressable becomes the touch responder on the first tap and the
+  // native input only gains focus on the *second* tap.
+  const inputRef = (0, _react.useRef)(null);
 
   // Resolve container tokens
   const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('textInput/background', modes) || '#f5f5f5';
@@ -211,12 +216,22 @@ function TextInput({
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
     style: [containerStyle, focusContainerStyle, hoverStyle, style],
     onHoverIn: () => setIsHovered(true),
-    onHoverOut: () => setIsHovered(false),
+    onHoverOut: () => setIsHovered(false)
+    // Forward taps on the wrapper (padding, leading icon gutter, etc.) to the
+    // native input. This guarantees the keyboard opens on the FIRST tap on
+    // Android instead of requiring a second tap.
+    ,
+    onPress: () => inputRef.current?.focus()
+    // The native input is the real accessible element; don't add a redundant
+    // focusable node for screen readers.
+    ,
+    accessible: false,
     children: [processedLeading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       accessibilityElementsHidden: true,
       importantForAccessibility: "no",
       children: processedLeading
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+      ref: inputRef,
       accessibilityLabel: undefined,
       accessibilityHint: accessibilityHint,
       placeholder: displayPlaceholder,

package/lib/commonjs/components/Title/Title.js

@@ -40,13 +40,21 @@ function Title({
   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 lineHeight = (0, _figmaVariablesResolver.getVariableByName)('title/lineHeight', modes) || 26;
+  const rawLineHeight = (0, _figmaVariablesResolver.getVariableByName)('title/lineHeight', modes) || 26;
+  // 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
+  // noticeable with `numberOfLines={1}`. Clamp to ~1.2x fontSize so descenders
+  // 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 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 subtitleLineHeight = (0, _figmaVariablesResolver.getVariableByName)('pageSubtitle/lineHeight', modes) || 18;
+  const subtitleRawLineHeight = (0, _figmaVariablesResolver.getVariableByName)('pageSubtitle/lineHeight', modes) || 18;
+  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 subtitleFontWeight = typeof subtitleFontWeightRaw === 'number' ? subtitleFontWeightRaw.toString() : subtitleFontWeightRaw;