jfs-components 0.0.77 → 0.0.78

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

@@ -8,24 +8,42 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function StepLabel({
   title = 'Stepper Item',
   supportingText,
+  metaText,
+  subtitle = true,
+  meta = true,
   modes = EMPTY_MODES,
   style
 }) {
-  // Title styles
   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';
 
-  // Subtitle styles
-  const subtitleColor = getVariableByName('steperItem/subtitle/color', modes) || '#3d4047';
-  const subtitleFontSize = Number(getVariableByName('steperItem/subtitle/fontSize', modes)) || 12;
-  const subtitleFontFamily = getVariableByName('steperItem/subtitle/fontFamily', modes) || undefined;
-  const subtitleLineHeight = Number(getVariableByName('steperItem/subtitle/lineHeight', modes)) || 16;
-  const subtitleFontWeight = getVariableByName('steperItem/subtitle/fontWeight', modes) || '400';
-
-  // Layout gap
+  // The Subtitle (supportingText) and Meta both default to the "Neutral"
+  // AppearanceBrand. A caller-supplied `AppearanceBrand` still wins (it is
+  // spread after the default), so each remains overridable. The Title keeps
+  // its own appearance resolution.
+  const subtitleModes = {
+    AppearanceBrand: 'Neutral',
+    ...modes
+  };
+  const metaModes = {
+    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;
+  // 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 titleStyle = {
     color: titleColor,
@@ -41,6 +59,15 @@ export function StepLabel({
     fontWeight: subtitleFontWeight,
     lineHeight: subtitleLineHeight
   };
+  const metaStyle = {
+    color: metaColor,
+    fontSize: metaFontSize,
+    fontFamily: metaFontFamily,
+    fontWeight: metaFontWeight,
+    lineHeight: metaLineHeight
+  };
+  const showSubtitle = subtitle && !!supportingText;
+  const showMeta = meta && !!metaText;
   return /*#__PURE__*/_jsxs(View, {
     style: [{
       gap: textGap,
@@ -49,9 +76,12 @@ export function StepLabel({
     children: [/*#__PURE__*/_jsx(Text, {
       style: titleStyle,
       children: title
-    }), supportingText ? /*#__PURE__*/_jsx(Text, {
+    }), showSubtitle ? /*#__PURE__*/_jsx(Text, {
       style: subtitleStyle,
       children: supportingText
+    }) : null, showMeta ? /*#__PURE__*/_jsx(Text, {
+      style: metaStyle,
+      children: metaText
     }) : null]
   });
 }

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

@@ -13,7 +13,6 @@ export default function Stepper({
   modes = EMPTY_MODES,
   style
 }) {
-  // Stepper container styles
   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;
@@ -23,25 +22,24 @@ export default function Stepper({
     gap,
     ...style
   };
-
-  // Inject index and connectorStyle logic into Step children
   const steps = React.Children.toArray(children);
-  const childrenWithProps = steps.map((child, index) => {
-    if (/*#__PURE__*/React.isValidElement(child)) {
-      const isLast = index === steps.length - 1;
-      return /*#__PURE__*/React.cloneElement(child, {
-        index,
-        modes,
-        // Pass modes down
-        connectorStyle: isLast ? {
-          display: 'none'
-        } : undefined
-      });
-    }
-    return child;
+  const stepsWithProps = steps.map((child, stepIndex) => {
+    if (! /*#__PURE__*/React.isValidElement(child)) return child;
+    const isLast = stepIndex === steps.length - 1;
+    const childProps = child.props || {};
+    const childModes = childProps.modes ? {
+      ...modes,
+      ...childProps.modes
+    } : modes;
+    return /*#__PURE__*/React.cloneElement(child, {
+      ...childProps,
+      index: childProps.index ?? stepIndex,
+      modes: childModes,
+      showLine: childProps.showLine !== undefined ? childProps.showLine : !isLast
+    });
   });
   return /*#__PURE__*/_jsx(View, {
     style: containerStyle,
-    children: childrenWithProps
+    children: stepsWithProps
   });
 }

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

@@ -0,0 +1,481 @@
+"use strict";
+
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Platform, Pressable, Text, TextInput as RNTextInput, View } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { useTokens } from '../../design-tokens/JFSThemeProvider';
+import { EMPTY_MODES } from '../../utils/react-utils';
+import SupportText from '../SupportText/SupportText';
+import Dropdown, { DropdownItem } from '../Dropdown/Dropdown';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const IS_WEB = 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 useMemo(() => {
+    const labelColor = getVariableByName('formField/label/color', modes) || '#000000';
+    const labelFontFamily = getVariableByName('formField/label/fontFamily', modes) || 'JioType Var';
+    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 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 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';
+    return {
+      labelColor,
+      labelFontFamily,
+      labelFontSize,
+      labelLineHeight,
+      labelFontWeight,
+      gap,
+      inputPaddingH,
+      inputGap,
+      inputRadius,
+      inputBorderSize,
+      inputBackground,
+      inputBorderColor,
+      inputFontSize,
+      inputLineHeight,
+      inputFontFamily,
+      inputFontWeight,
+      inputTextColor
+    };
+  }, [modes]);
+}
+function useDropdownItemTextTokens(modes) {
+  return useMemo(() => {
+    const foreground = getVariableByName('dropdownItem/foreground', modes) || '#000000';
+    const fontFamily = getVariableByName('dropdownItem/fontFamily', modes) || 'JioType Var';
+    const fontSize = toNumber(getVariableByName('dropdownItem/fontSize', modes), 16);
+    const lineHeight = toNumber(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 = EMPTY_MODES,
+  style,
+  inputStyle,
+  inputTextStyle,
+  menuStyle,
+  accessibilityLabel,
+  accessibilityHint,
+  onFocus,
+  onBlur,
+  testID
+}) {
+  // ---------------- Modes ----------------
+  const {
+    modes: globalModes
+  } = useTokens();
+  const baseModes = useMemo(() => ({
+    ...globalModes,
+    ...propModes
+  }), [globalModes, propModes]);
+  const interactive = !isDisabled && !isReadOnly;
+
+  // ---------------- Query state ----------------
+  const isControlledInput = inputValue !== undefined;
+  const [internalInput, setInternalInput] = useState(defaultInputValue);
+  const query = isControlledInput ? inputValue : internalInput;
+
+  // ---------------- Selected value state ----------------
+  const isControlledValue = value !== undefined;
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const currentValue = isControlledValue ? value : internalValue;
+
+  // ---------------- Open state ----------------
+  const isControlledOpen = open !== undefined;
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const [isFocused, setIsFocused] = useState(false);
+  const setOpenState = useCallback(next => {
+    if (!isControlledOpen) setInternalOpen(next);
+    onOpenChange?.(next);
+  }, [isControlledOpen, onOpenChange]);
+
+  // ---------------- Suggestions ----------------
+  const normalizedItems = useMemo(() => (items ?? []).map(normalizeItem), [items]);
+  const suggestions = 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 = 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 = useRef(null);
+  const blurTimer = useRef(null);
+  const clearBlurTimer = useCallback(() => {
+    if (blurTimer.current) {
+      clearTimeout(blurTimer.current);
+      blurTimer.current = null;
+    }
+  }, []);
+  useEffect(() => () => clearBlurTimer(), [clearBlurTimer]);
+  const setQuery = useCallback(text => {
+    if (!isControlledInput) setInternalInput(text);
+    onInputChange?.(text);
+  }, [isControlledInput, onInputChange]);
+  const handleChangeText = 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 = 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 = useCallback(e => {
+    clearBlurTimer();
+    setIsFocused(true);
+    if (!isControlledOpen) setInternalOpen(true);
+    onFocus?.(e);
+  }, [clearBlurTimer, isControlledOpen, onFocus]);
+  const handleBlur = 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 = useRef(null);
+  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 = useCallback(optLabel => {
+    const trimmed = query.trim();
+    if (!highlightMatch || trimmed.length === 0) {
+      return /*#__PURE__*/_jsx(Text, {
+        style: itemBaseTextStyle,
+        children: optLabel
+      });
+    }
+    const idx = optLabel.toLowerCase().indexOf(trimmed.toLowerCase());
+    if (idx < 0) {
+      return /*#__PURE__*/_jsx(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__*/_jsxs(Text, {
+      style: itemBaseTextStyle,
+      children: [before, /*#__PURE__*/_jsx(Text, {
+        style: {
+          fontWeight: '700'
+        },
+        children: match
+      }), after]
+    });
+  }, [query, highlightMatch, itemBaseTextStyle]);
+
+  // ---------------- Render ----------------
+  return /*#__PURE__*/_jsxs(View, {
+    ref: rootRef,
+    style: [wrapperStyle, style],
+    pointerEvents: isDisabled ? 'none' : 'auto',
+    testID: testID,
+    children: [label != null && /*#__PURE__*/_jsxs(View, {
+      style: styles.labelRow,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: labelTextStyle,
+        children: label
+      }), isRequired && /*#__PURE__*/_jsx(Text, {
+        style: requiredIndicatorStyle,
+        children: " *"
+      })]
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.anchor,
+      children: [/*#__PURE__*/_jsx(Pressable, {
+        style: [inputRowStyle, inputStyle],
+        onPress: () => inputRef.current?.focus(),
+        accessible: false,
+        children: /*#__PURE__*/_jsx(RNTextInput, {
+          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__*/_jsx(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__*/_jsx(Dropdown, {
+          modes: modes,
+          maxHeight: menuMaxHeight,
+          style: menuStyle,
+          accessibilityLabel: `${resolvedA11yLabel} suggestions`,
+          children: hasSuggestions ? suggestions.map(opt => {
+            const isSelected = opt.value === currentValue;
+            return /*#__PURE__*/_jsx(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__*/_jsx(View, {
+            style: styles.emptyRow,
+            children: /*#__PURE__*/_jsx(Text, {
+              style: [itemBaseTextStyle, {
+                color: placeholderColor
+              }],
+              children: emptyMessage
+            })
+          })
+        })
+      })]
+    }), supportLabel != null && supportLabel !== '' && /*#__PURE__*/_jsx(SupportText, {
+      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
+  }
+};
+export default SuggestiveSearch;

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

@@ -1,6 +1,6 @@
 "use strict";
 
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { Pressable, View, TextInput as RNTextInput } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import Icon from '../../icons/Icon';
@@ -114,6 +114,11 @@ function TextInput({
   // Track focus state to hide placeholder when focused
   const [isFocused, setIsFocused] = useState(false);
   const [isHovered, setIsHovered] = 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 = useRef(null);
 
   // Resolve container tokens
   const backgroundColor = getVariableByName('textInput/background', modes) || '#f5f5f5';
@@ -207,12 +212,22 @@ function TextInput({
   return /*#__PURE__*/_jsxs(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__*/_jsx(View, {
       accessibilityElementsHidden: true,
       importantForAccessibility: "no",
       children: processedLeading
     }), /*#__PURE__*/_jsx(RNTextInput, {
+      ref: inputRef,
       accessibilityLabel: undefined,
       accessibilityHint: accessibilityHint,
       placeholder: displayPlaceholder,

package/lib/module/components/Title/Title.js

@@ -35,13 +35,21 @@ function Title({
   const gap = getVariableByName('title/gap', modes) || 8;
   const labelColor = getVariableByName('title/label/color', modes) || '#0d0d0f';
   const fontSize = getVariableByName('title/fontSize', modes) || 26;
-  const lineHeight = getVariableByName('title/lineHeight', modes) || 26;
+  const rawLineHeight = 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 = getVariableByName('title/fontFamily', modes) || 'System';
   const fontWeightRaw = getVariableByName('title/fontWeight', modes) || 900;
   const fontWeight = typeof fontWeightRaw === 'number' ? fontWeightRaw.toString() : fontWeightRaw;
   const subtitleColor = getVariableByName('pageSubtitle/label/color', modes) || '#0d0d0f';
   const subtitleFontSize = getVariableByName('pageSubtitle/fontSize', modes) || 14;
-  const subtitleLineHeight = getVariableByName('pageSubtitle/lineHeight', modes) || 18;
+  const subtitleRawLineHeight = getVariableByName('pageSubtitle/lineHeight', modes) || 18;
+  const subtitleLineHeight = Math.max(subtitleRawLineHeight, Math.ceil(subtitleFontSize * 1.2));
   const subtitleFontFamily = getVariableByName('pageSubtitle/fontFamily', modes) || 'System';
   const subtitleFontWeightRaw = getVariableByName('pageSubtitle/fontWeight', modes) || 500;
   const subtitleFontWeight = typeof subtitleFontWeightRaw === 'number' ? subtitleFontWeightRaw.toString() : subtitleFontWeightRaw;