jfs-components 0.0.73 → 0.0.77

package/src/components/FormField/FormField.tsx

@@ -1,263 +1,590 @@
-import React, { useState, useMemo, useCallback } from 'react'
-import { View, Text, type StyleProp, type ViewStyle, type TextStyle } from 'react-native'
+import React, { useCallback, useMemo, useState } from 'react'
+import {
+  View,
+  Text,
+  TextInput as RNTextInput,
+  type StyleProp,
+  type TextInputProps as RNTextInputProps,
+  type TextStyle,
+  type ViewStyle,
+} from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
-import { EMPTY_MODES } from '../../utils/react-utils'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
-import TextInput from '../TextInput/TextInput'
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
 import SupportText from '../SupportText/SupportText'
 import type { SupportTextStatus } from '../SupportText/SupportTextIcon'
+import Icon from '../../icons/Icon'
+import { useFormContext } from '../Form/Form'
 
-export type FormFieldType = 'text' | 'password' | 'email' | 'search'
+export type FormFieldType = 'text' | 'password' | 'email' | 'search' | 'number' | 'phone' | 'url'
 
 export type FormFieldProps = {
-  label?: string | undefined;
-  placeholder?: string | undefined;
-  value?: string | undefined;
-  onChangeText?: ((text: string) => void) | undefined;
-  type?: FormFieldType | undefined;
-
-  leading?: React.ReactNode;
-  trailing?: React.ReactNode;
-  leadingIconName?: string | undefined;
-
-  isRequired?: boolean | undefined;
-  isDisabled?: boolean | undefined;
-  isInvalid?: boolean | undefined;
-
-  supportText?: string | undefined;
-  errorMessage?: string | undefined;
-
-  modes?: Record<string, any> | undefined;
-  style?: StyleProp<ViewStyle>;
-
-  onFocus?: ((e: any) => void) | undefined;
-  onBlur?: ((e: any) => void) | undefined;
-  accessibilityLabel?: string | undefined;
-  accessibilityHint?: string | undefined;
-};
-
-function useFormField(props: FormFieldProps) {
-  const {
-    type = 'text',
-    isDisabled = false,
-    isInvalid = false,
-    supportText,
-    errorMessage,
-    modes: propModes = EMPTY_MODES,
-    onFocus,
-    onBlur,
-  } = props
+  /** Label rendered above the input. */
+  label?: string
+  /** Placeholder text shown when the input is empty. */
+  placeholder?: string
+  /** Current value of the input (controlled). */
+  value?: string
+  /** Called when the input text changes. */
+  onChangeText?: (text: string) => void
+  /**
+   * Logical input type. Mapped to keyboard, secure entry and capitalization.
+   * @default 'text'
+   */
+  type?: FormFieldType
+  /**
+   * Field name. When used inside `<Form>`, this is the key used to look up
+   * server-side `validationErrors` and to notify the form when the value
+   * changes so the error can clear.
+   */
+  name?: string
+  /**
+   * Optional element rendered before the input text (Figma slot "start").
+   * No leading element is rendered by default — the Figma FormField design
+   * does not include one.
+   */
+  leading?: React.ReactNode
+  /**
+   * Optional element rendered after the input text (Figma slot "end").
+   * Typically used for an inline button (e.g. "Apply", "Show") or a status
+   * icon.
+   */
+  trailing?: React.ReactNode
+  /**
+   * Convenience prop to render a built-in icon as the leading element.
+   * Ignored when `leading` is provided. Defaults to `undefined` — meaning
+   * no leading icon, matching the Figma design.
+   */
+  leadingIconName?: string
+  /** Shows a required asterisk next to the label. */
+  isRequired?: boolean
+  /** Disables interaction and dims the field. Resolves to "Read Only" state. */
+  isDisabled?: boolean
+  /** Marks the field as invalid and shows `errorMessage`. */
+  isInvalid?: boolean
+  /**
+   * Renders the field in read-only mode (non-interactive but not dimmed).
+   * Resolves to the "Read Only" state.
+   */
+  isReadOnly?: boolean
+  /** Helper text displayed below the input. */
+  supportText?: string
+  /** Replaces `supportText` when `isInvalid` is true. */
+  errorMessage?: string
+  /** Maximum number of characters accepted. */
+  maxLength?: number
+  /** When true, focuses the input on mount. */
+  autoFocus?: boolean
+  /** Modes for design token resolution. */
+  modes?: Record<string, any>
+  /** Style overrides for the outermost wrapper. */
+  style?: StyleProp<ViewStyle>
+  /** Style overrides for the input row container. */
+  inputStyle?: StyleProp<ViewStyle>
+  /** Style overrides for the input text. */
+  inputTextStyle?: StyleProp<TextStyle>
+  /** Called when the input receives focus. */
+  onFocus?: RNTextInputProps['onFocus']
+  /** Called when the input loses focus. */
+  onBlur?: RNTextInputProps['onBlur']
+  /** Called when the user submits the input (e.g. presses return). */
+  onSubmitEditing?: RNTextInputProps['onSubmitEditing']
+  /** Accessibility label. Defaults to `label` or `placeholder`. */
+  accessibilityLabel?: string
+  /** Accessibility hint. */
+  accessibilityHint?: string
+  /** Test identifier. */
+  testID?: string
+}
 
-  const { modes: globalModes } = useTokens()
-  const baseModes = useMemo(
-    () => ({ ...globalModes, ...propModes }),
-    [globalModes, propModes],
-  )
+// ---------------------------------------------------------------------------
+// Token resolution
+// ---------------------------------------------------------------------------
 
-  const [isFocused, setIsFocused] = useState(false)
+function toNumber(value: unknown, fallback: number): number {
+  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 toFontWeight(value: unknown, fallback: TextStyle['fontWeight']): TextStyle['fontWeight'] {
+  if (typeof value === 'number') return value.toString() as TextStyle['fontWeight']
+  if (typeof value === 'string' && value.length > 0) return value as TextStyle['fontWeight']
+  return fallback
+}
+
+function useFormFieldTokens(modes: Record<string, any>) {
+  return useMemo(() => {
+    // Wrapper
+    const gap = toNumber(getVariableByName('formField/gap', modes), 8)
+
+    // Label (Figma: 14/17 medium, color #0c0d10)
+    const labelColor =
+      (getVariableByName('formField/label/color', modes) as string) || '#0c0d10'
+    const labelFontFamily =
+      (getVariableByName('formField/label/fontFamily', modes) as string) ||
+      'JioType Var'
+    const labelFontSize = toNumber(
+      getVariableByName('formField/label/fontSize', modes),
+      14,
+    )
+    const labelLineHeight = toNumber(
+      getVariableByName('formField/label/lineHeight', modes),
+      17,
+    )
+    const labelFontWeight = toFontWeight(
+      getVariableByName('formField/label/fontWeight', modes),
+      '500',
+    )
+
+    // Input row (Figma: 12 px padding-h, 8 px gap, 8 px radius, 1 px border)
+    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,
+    )
+
+    // Input text (Figma: 16/45 regular)
+    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) as string) ||
+      'JioType Var'
+    const inputFontWeight = toFontWeight(
+      getVariableByName('formField/input/label/fontWeight', modes),
+      '400',
+    )
+
+    const inputBackground =
+      (getVariableByName('formField/input/background', modes) as string) ||
+      '#ffffff'
+    const inputBorderColor =
+      (getVariableByName('formField/input/border/color', modes) as string) ||
+      '#b5b6b7'
 
-  // Merge FormField States collection based on focus
-  const modes = useMemo(() => ({
-    ...baseModes,
-    'FormField States': isFocused ? 'Active' : 'Idle',
-  }), [baseModes, isFocused])
-
-  // -- Label tokens (from "FormField / Output" collection) --
-  const labelColor = getVariableByName('formField/label/color', modes) || '#0c0d10'
-  const labelFontFamily = getVariableByName('formField/label/fontFamily', modes) || 'JioType Var'
-  const labelFontSize = parseInt(getVariableByName('formField/label/fontSize', modes), 10) || 14
-  const labelLineHeight = parseInt(getVariableByName('formField/label/lineHeight', modes), 10) || 17
-  const labelFontWeight = getVariableByName('formField/label/fontWeight', modes) || '500'
-  const gap = parseInt(getVariableByName('formField/gap', modes), 10) || 8
-
-  // -- Input tokens (from "FormField / Output" + "FormField States" collections) --
-  const inputPaddingH = parseInt(getVariableByName('formField/input/padding/horizontal', modes), 10) || 12
-  const inputGap = parseInt(getVariableByName('formField/input/gap', modes), 10) || 8
-  const inputRadius = parseInt(getVariableByName('formField/input/radius', modes), 10) || 8
-  const inputBackground = getVariableByName('formField/input/background', modes) || '#ffffff'
-  const inputFontSize = parseInt(getVariableByName('formField/input/label/fontSize', modes), 10) || 16
-  const inputLineHeight = parseInt(getVariableByName('formField/input/label/lineHeight', modes), 10) || 45
-  const inputFontFamily = getVariableByName('formField/input/label/fontFamily', modes) || 'JioType Var'
-  const inputFontWeight = getVariableByName('formField/input/label/fontWeight', modes) || '400'
-  const inputTextColor = getVariableByName('states/formField/input/label/color', modes)
-    || getVariableByName('formField/input/label/color', modes)
-    || '#24262b'
-  const inputBorderColor = getVariableByName('states/formField/input/border/color', modes)
-    || getVariableByName('formField/input/border/color', modes)
-    || '#b5b6b7'
-  const inputBorderSize = parseInt(getVariableByName('formField/input/border/size', modes), 10) || 1
-
-  // -- Styles --
-  const labelStyle: TextStyle = useMemo(() => ({
-    color: labelColor,
-    fontFamily: labelFontFamily,
-    fontSize: labelFontSize,
-    lineHeight: labelLineHeight,
-    fontWeight: labelFontWeight as TextStyle['fontWeight'],
-  }), [labelColor, labelFontFamily, labelFontSize, labelLineHeight, labelFontWeight])
-
-  const wrapperStyle: ViewStyle = useMemo(() => ({
-    gap,
-    opacity: isDisabled ? 0.5 : 1,
-  }), [gap, isDisabled])
-
-  const requiredIndicatorStyle: TextStyle = useMemo(() => ({
-    color: '#d93d3d',
-    fontFamily: labelFontFamily,
-    fontSize: labelFontSize,
-    lineHeight: labelLineHeight,
-    fontWeight: labelFontWeight as TextStyle['fontWeight'],
-  }), [labelFontFamily, labelFontSize, labelLineHeight, labelFontWeight])
-
-  // Style overrides for the input row, sourced from formField/input/* tokens
-  const inputContainerStyle: ViewStyle = useMemo(() => ({
-    backgroundColor: inputBackground,
-    borderColor: inputBorderColor,
-    borderWidth: inputBorderSize,
-    borderRadius: inputRadius,
-    paddingHorizontal: inputPaddingH,
-    paddingVertical: 0,
-    gap: inputGap,
-  }), [inputBackground, inputBorderColor, inputBorderSize, inputRadius, inputPaddingH, inputGap])
-
-  const inputTextStyle: TextStyle = useMemo(() => ({
-    color: inputTextColor,
-    fontSize: inputFontSize,
-    lineHeight: inputLineHeight,
-    fontFamily: inputFontFamily,
-    fontWeight: inputFontWeight as TextStyle['fontWeight'],
-  }), [inputTextColor, inputFontSize, inputLineHeight, inputFontFamily, inputFontWeight])
-
-  // -- Support text logic --
-  const supportStatus: SupportTextStatus = isInvalid ? 'Error' : 'Neutral'
-  const supportLabel = isInvalid && errorMessage ? errorMessage : supportText
-
-  // -- Input type derived props --
-  const secureTextEntry = type === 'password'
-  const keyboardType = type === 'email' ? 'email-address' as const : 'default' as const
-  const autoCapitalize = (type === 'email' || type === 'password') ? 'none' as const : 'sentences' as const
-
-  // -- Event handlers --
-  const handleFocus = useCallback((e: any) => {
-    setIsFocused(true)
-    onFocus?.(e)
-  }, [onFocus])
-
-  const handleBlur = useCallback((e: any) => {
-    setIsFocused(false)
-    onBlur?.(e)
-  }, [onBlur])
-
-  return {
-    modes,
-    labelStyle,
-    wrapperStyle,
-    requiredIndicatorStyle,
-    inputContainerStyle,
-    inputTextStyle,
-    supportStatus,
-    supportLabel,
-    secureTextEntry,
-    keyboardType,
-    autoCapitalize,
-    handleFocus,
-    handleBlur,
+    if (__DEV__) {
+      console.warn('[FormField] border color (modes changed)', {
+        'FormField States': modes['FormField States'],
+        inputBorderColor,
+        'formField/input/border/color': getVariableByName(
+          'formField/input/border/color',
+          modes,
+        ),
+      })
+    }
+
+    const inputTextColor =
+      (getVariableByName('formField/input/label/color', modes) as string) ||
+      '#24262b'
+
+    return {
+      gap,
+      labelColor,
+      labelFontFamily,
+      labelFontSize,
+      labelLineHeight,
+      labelFontWeight,
+      inputPaddingH,
+      inputGap,
+      inputRadius,
+      inputBorderSize,
+      inputFontSize,
+      inputLineHeight,
+      inputFontFamily,
+      inputFontWeight,
+      inputBackground,
+      inputBorderColor,
+      inputTextColor,
+    }
+  }, [modes])
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+type DerivedTypeProps = {
+  secureTextEntry: boolean
+  keyboardType: RNTextInputProps['keyboardType']
+  autoCapitalize: RNTextInputProps['autoCapitalize']
+  autoComplete: RNTextInputProps['autoComplete']
+  textContentType: RNTextInputProps['textContentType']
+}
+
+function deriveTypeProps(type: FormFieldType): DerivedTypeProps {
+  switch (type) {
+    case 'password':
+      return {
+        secureTextEntry: true,
+        keyboardType: 'default',
+        autoCapitalize: 'none',
+        autoComplete: 'password',
+        textContentType: 'password',
+      }
+    case 'email':
+      return {
+        secureTextEntry: false,
+        keyboardType: 'email-address',
+        autoCapitalize: 'none',
+        autoComplete: 'email',
+        textContentType: 'emailAddress',
+      }
+    case 'number':
+      return {
+        secureTextEntry: false,
+        keyboardType: 'numeric',
+        autoCapitalize: 'none',
+        autoComplete: 'off',
+        textContentType: 'none',
+      }
+    case 'phone':
+      return {
+        secureTextEntry: false,
+        keyboardType: 'phone-pad',
+        autoCapitalize: 'none',
+        autoComplete: 'tel',
+        textContentType: 'telephoneNumber',
+      }
+    case 'url':
+      return {
+        secureTextEntry: false,
+        keyboardType: 'url',
+        autoCapitalize: 'none',
+        autoComplete: 'url',
+        textContentType: 'URL',
+      }
+    case 'search':
+      return {
+        secureTextEntry: false,
+        keyboardType: 'default',
+        autoCapitalize: 'none',
+        autoComplete: 'off',
+        textContentType: 'none',
+      }
+    case 'text':
+    default:
+      return {
+        secureTextEntry: false,
+        keyboardType: 'default',
+        autoCapitalize: 'sentences',
+        autoComplete: 'off',
+        textContentType: 'none',
+      }
   }
 }
 
+function firstError(error: string | string[] | undefined): string | undefined {
+  if (!error) return undefined
+  if (Array.isArray(error)) return error[0]
+  return error
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
 function FormField({
   label,
   placeholder,
-  value = '',
+  value,
   onChangeText,
   type = 'text',
+  name,
   leading,
   trailing,
   leadingIconName,
   isRequired = false,
   isDisabled = false,
   isInvalid = false,
+  isReadOnly = false,
   supportText,
   errorMessage,
-  modes = EMPTY_MODES,
+  maxLength,
+  autoFocus = false,
+  modes: propModes = EMPTY_MODES,
   style,
+  inputStyle,
+  inputTextStyle,
   onFocus,
   onBlur,
+  onSubmitEditing,
   accessibilityLabel,
   accessibilityHint,
+  testID,
 }: FormFieldProps) {
-  const {
-    modes: resolvedModes,
-    labelStyle,
-    wrapperStyle,
-    requiredIndicatorStyle,
-    inputContainerStyle,
-    inputTextStyle,
-    supportStatus,
-    supportLabel,
-    secureTextEntry,
-    keyboardType,
-    autoCapitalize,
-    handleFocus,
-    handleBlur,
-  } = useFormField({
-    type,
-    isDisabled,
-    isInvalid,
-    supportText,
-    errorMessage,
-    modes,
-    onFocus,
-    onBlur,
-  })
-
-  const resolvedA11yLabel = accessibilityLabel || label || placeholder || 'Form field'
+  // -- Form context integration -------------------------------------------
+  const formCtx = useFormContext()
+  const formError =
+    name && formCtx ? firstError(formCtx.validationErrors[name]) : undefined
+  const resolvedIsInvalid = isInvalid || Boolean(formError)
+  const resolvedErrorMessage = errorMessage ?? formError
+
+  // -- Mode resolution ----------------------------------------------------
+  const { modes: globalModes } = useTokens()
+  const baseModes = useMemo(
+    () => ({ ...globalModes, ...propModes }),
+    [globalModes, propModes],
+  )
+
+  const [isFocused, setIsFocused] = useState(false)
+  const interactive = !isDisabled && !isReadOnly
+
+  // FormField States cascade — error > read only/disabled > active (focused) > idle.
+  // Disabled maps to "Read Only" since there is no dedicated disabled mode and
+  // the visual treatment is closest. This is only the DEFAULT — an explicit
+  // `modes['FormField States']` passed in via props or the global theme
+  // always wins so consumers can force a state (e.g. for documentation).
+  const derivedStateMode: 'Idle' | 'Active' | 'Read Only' | 'Error' = useMemo(() => {
+    if (resolvedIsInvalid) return 'Error'
+    if (isReadOnly || isDisabled) return 'Read Only'
+    if (isFocused) return 'Active'
+    return 'Idle'
+  }, [resolvedIsInvalid, isReadOnly, isDisabled, isFocused])
+
+  const modes = useMemo(() => {
+    const explicitStateMode = baseModes['FormField States'] as
+      | 'Idle'
+      | 'Active'
+      | 'Read Only'
+      | 'Error'
+      | undefined
+    const stateMode = explicitStateMode ?? derivedStateMode
+
+    const explicitStatus = baseModes.Status as string | undefined
+    // Default SupportText token mode is Auto (Figma resolves foreground from
+    // context). Pass modes={{ Status: 'Error' }} etc. to override.
+    const status = explicitStatus ?? 'Auto'
+
+    return {
+      ...baseModes,
+      'FormField States': stateMode,
+      Status: status,
+    }
+  }, [baseModes, derivedStateMode])
+
+  const tokens = useFormFieldTokens(modes)
+
+  // -- Type-derived input props ------------------------------------------
+  const typeProps = useMemo(() => deriveTypeProps(type), [type])
+
+  // -- Event handlers ----------------------------------------------------
+  const handleFocus = useCallback<NonNullable<RNTextInputProps['onFocus']>>(
+    (e) => {
+      setIsFocused(true)
+      onFocus?.(e)
+    },
+    [onFocus],
+  )
+
+  const handleBlur = useCallback<NonNullable<RNTextInputProps['onBlur']>>(
+    (e) => {
+      setIsFocused(false)
+      onBlur?.(e)
+    },
+    [onBlur],
+  )
+
+  const handleChangeText = useCallback(
+    (next: string) => {
+      onChangeText?.(next)
+      if (name && formCtx) formCtx.onFieldChange(name)
+    },
+    [onChangeText, name, formCtx],
+  )
+
+  // -- Styles ------------------------------------------------------------
+  const wrapperStyle: ViewStyle = useMemo(
+    () => ({
+      gap: tokens.gap,
+      opacity: isDisabled ? 0.5 : 1,
+    }),
+    [tokens.gap, isDisabled],
+  )
+
+  const labelRowStyle: ViewStyle = useMemo(
+    () => ({ flexDirection: 'row', alignItems: 'baseline' }),
+    [],
+  )
+
+  const labelTextStyle: TextStyle = useMemo(
+    () => ({
+      color: tokens.labelColor,
+      fontFamily: tokens.labelFontFamily,
+      fontSize: tokens.labelFontSize,
+      lineHeight: tokens.labelLineHeight,
+      fontWeight: tokens.labelFontWeight,
+    }),
+    [
+      tokens.labelColor,
+      tokens.labelFontFamily,
+      tokens.labelFontSize,
+      tokens.labelLineHeight,
+      tokens.labelFontWeight,
+    ],
+  )
+
+  const requiredIndicatorStyle: TextStyle = useMemo(
+    () => ({ ...labelTextStyle, color: '#d93d3d' }),
+    [labelTextStyle],
+  )
+
+  const inputRowStyle: ViewStyle = useMemo(
+    () => ({
+      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%',
+    }),
+    [
+      tokens.inputBackground,
+      tokens.inputBorderColor,
+      tokens.inputBorderSize,
+      tokens.inputRadius,
+      tokens.inputPaddingH,
+      tokens.inputGap,
+      tokens.inputLineHeight,
+    ],
+  )
+
+  const inputTextStyles: TextStyle = useMemo(
+    () => ({
+      flex: 1,
+      color: tokens.inputTextColor,
+      fontFamily: tokens.inputFontFamily,
+      fontSize: tokens.inputFontSize,
+      lineHeight: tokens.inputLineHeight,
+      fontWeight: tokens.inputFontWeight,
+      padding: 0,
+      margin: 0,
+      // Remove the default web focus ring; the input row's border acts as the
+      // focus indicator via the FormField States cascade.
+      outlineStyle: 'none' as TextStyle['outlineStyle'],
+      outlineWidth: 0,
+      outlineColor: 'transparent',
+    }),
+    [
+      tokens.inputTextColor,
+      tokens.inputFontFamily,
+      tokens.inputFontSize,
+      tokens.inputLineHeight,
+      tokens.inputFontWeight,
+    ],
+  )
+
+  const placeholderColor = useMemo(() => {
+    // Slightly muted version of the resolved text color, mirroring the
+    // sibling TextInput behavior.
+    const c = tokens.inputTextColor
+    if (typeof c !== 'string') return undefined
+    if (c.startsWith('rgb(')) {
+      return c.replace('rgb(', 'rgba(').replace(')', ', 0.55)')
+    }
+    return '#888a8d'
+  }, [tokens.inputTextColor])
+
+  // -- Slots --------------------------------------------------------------
+  const leadingElement = leading ?? (leadingIconName
+    ? <Icon name={leadingIconName} size={20} color={tokens.inputTextColor} />
+    : null)
+  const processedLeading = leadingElement
+    ? cloneChildrenWithModes(leadingElement, modes)
+    : null
+  const processedTrailing = trailing
+    ? cloneChildrenWithModes(trailing, modes)
+    : null
+
+  // -- Support text -------------------------------------------------------
+  const supportStatus: SupportTextStatus = resolvedIsInvalid ? 'Error' : 'Neutral'
+  const supportLabel =
+    resolvedIsInvalid && resolvedErrorMessage ? resolvedErrorMessage : supportText
+
+  // -- Accessibility ------------------------------------------------------
+  const resolvedA11yLabel =
+    accessibilityLabel || label || placeholder || 'Form field'
 
   return (
     <View
       style={[wrapperStyle, style]}
       pointerEvents={isDisabled ? 'none' : 'auto'}
-      accessible={true}
-      accessibilityRole="none"
-      accessibilityLabel={resolvedA11yLabel}
-      accessibilityState={{
-        disabled: isDisabled,
-      }}
+      testID={testID}
+      accessible={false}
     >
       {label != null && (
-        <View style={{ flexDirection: 'row', alignItems: 'baseline' }}>
-          <Text style={labelStyle}>{label}</Text>
-          {isRequired && (
-            <Text style={requiredIndicatorStyle}> *</Text>
-          )}
+        <View style={labelRowStyle}>
+          <Text style={labelTextStyle}>{label}</Text>
+          {isRequired && <Text style={requiredIndicatorStyle}> *</Text>}
         </View>
       )}
 
-      <TextInput
-        placeholder={placeholder || ''}
-        value={value}
-        {...(onChangeText ? { onChangeText } : {})}
-        leading={leading}
-        trailing={trailing}
-        leadingIconName={leadingIconName || 'ic_search'}
-        modes={resolvedModes}
-        style={inputContainerStyle}
-        inputStyle={inputTextStyle}
-        onFocus={handleFocus}
-        onBlur={handleBlur}
-        secureTextEntry={secureTextEntry}
-        keyboardType={keyboardType}
-        autoCapitalize={autoCapitalize}
-        editable={!isDisabled}
-        accessibilityLabel={resolvedA11yLabel}
-        accessibilityHint={accessibilityHint || ''}
-      />
-
-      {supportLabel != null && (
+      <View style={[inputRowStyle, inputStyle]}>
+        {processedLeading != null && (
+          <View
+            accessibilityElementsHidden
+            importantForAccessibility="no"
+          >
+            {processedLeading}
+          </View>
+        )}
+        <RNTextInput
+          style={[inputTextStyles, inputTextStyle]}
+          value={value ?? ''}
+          onChangeText={handleChangeText}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          onSubmitEditing={onSubmitEditing}
+          placeholder={placeholder ?? ''}
+          placeholderTextColor={placeholderColor}
+          editable={interactive}
+          maxLength={maxLength}
+          autoFocus={autoFocus}
+          secureTextEntry={typeProps.secureTextEntry}
+          keyboardType={typeProps.keyboardType}
+          autoCapitalize={typeProps.autoCapitalize}
+          autoComplete={typeProps.autoComplete}
+          textContentType={typeProps.textContentType}
+          accessibilityLabel={resolvedA11yLabel}
+          accessibilityHint={accessibilityHint}
+        />
+        {processedTrailing != null && (
+          <View
+            accessibilityElementsHidden
+            importantForAccessibility="no"
+          >
+            {processedTrailing}
+          </View>
+        )}
+      </View>
+
+      {supportLabel != null && supportLabel !== '' && (
         <SupportText
           label={supportLabel}
           status={supportStatus}
-          modes={resolvedModes}
+          modes={modes}
         />
       )}
     </View>