feat: api unification for status handling

Author: wonderlul

example/src/Examples/TextFieldExample.tsx

@@ -82,14 +82,6 @@ const TextFieldDemo = ({ variant }: TextFieldDemoProps) => {
   const setModifier = (key: keyof DemoModifiers, text: string) =>
     setModifiers((prev) => ({ ...prev, [key]: text }));
 
-  const status =
-    controls.error || controls.disabled
-      ? [
-          ...(controls.error ? (['error'] as const) : []),
-          ...(controls.disabled ? (['disabled'] as const) : []),
-        ]
-      : undefined;
-
   const LeadingIcon = React.useCallback(
     (props: TextFieldAccessoryProps) => (
       <TextField.Icon {...props} icon="magnify" />
@@ -143,7 +135,8 @@ const TextFieldDemo = ({ variant }: TextFieldDemoProps) => {
         label={modifiers.label || undefined}
         placeholder={modifiers.placeholder || undefined}
         supportingText={modifiers.helperText || undefined}
-        status={status}
+        error={controls.error}
+        editable={!controls.disabled}
         value={value}
         onChangeText={setValue}
         multiline={controls.multiline}

src/components/TextField/TextField.tsx

@@ -23,13 +23,11 @@ import type { InternalTheme, ThemeProp } from '../../types';
 
 export type TextFieldVariant = 'filled' | 'outlined';
 
-export type TextFieldStatus = 'error' | 'disabled' | ('error' | 'disabled')[];
-
 export interface TextFieldAccessoryProps {
   style: StyleProp<ViewStyle>;
   multiline: boolean;
-  editable: boolean;
-  status?: TextFieldStatus;
+  disabled: boolean;
+  error: boolean;
 }
 
 export type TextFieldSharedApi = {
@@ -123,10 +121,9 @@ export interface TextFieldProps extends TextInputProps {
    */
   variant?: TextFieldVariant;
   /**
-   * A style modifier for different input states. Accepts an array so both
-   * `'error'` and `'disabled'` can be active simultaneously.
+   * When `true`, the field uses error styling and validation semantics (`aria-invalid`).
    */
-  status?: TextFieldStatus;
+  error?: boolean;
   /**
    * The label text to display above the input.
    */
@@ -137,7 +134,7 @@ export interface TextFieldProps extends TextInputProps {
   labelProps?: TextProps;
   /**
    * Supporting text to display below the input (Material Design 3). When
-   * `status` is `error`, this text is styled as an error message.
+   * `error` is `true`, this text is styled as an error message.
    */
   supportingText?: string;
   /**
@@ -213,10 +210,10 @@ export interface TextFieldProps extends TextInputProps {
  *     <TextField.Icon {...props} icon="magnify" />
  *   );
  *
- *   const ClearAccessory = ({ style, editable }) => (
+ *   const ClearAccessory = ({ style, disabled }) => (
  *     <Pressable
  *       style={style}
- *       disabled={!editable}
+ *       disabled={disabled}
  *       onPress={() => setText('')}
  *       accessibilityRole="button"
  *       accessibilityLabel="Clear text"
@@ -245,7 +242,7 @@ function TextField(props: TextFieldProps) {
   /* eslint-disable @typescript-eslint/no-unused-vars -- peel TextField-only props before TextInput spread */
   const {
     ref,
-    status,
+    error,
     label,
     supportingText,
     supportingTextProps,
@@ -345,8 +342,8 @@ function TextField(props: TextFieldProps) {
         {!!LeadingAccessory && (
           <LeadingAccessory
             style={$leadingAccessoryStyles}
-            status={status}
-            editable={!disabled}
+            error={hasError}
+            disabled={disabled}
             multiline={!!textInputProps.multiline}
           />
         )}
@@ -363,7 +360,6 @@ function TextField(props: TextFieldProps) {
             aria-disabled={disabled}
             aria-invalid={hasError}
             ref={input}
-            editable={!disabled}
             onFocus={onFocusHandler}
             onBlur={onBlurHandler}
             selectionColor={$selectionColor}
@@ -384,8 +380,8 @@ function TextField(props: TextFieldProps) {
         {TrailingAccessory ? (
           <TrailingAccessory
             style={$trailingAccessoryStyles}
-            status={status}
-            editable={!disabled}
+            error={hasError}
+            disabled={disabled}
             multiline={!!textInputProps.multiline}
           />
         ) : hasError ? (

src/components/TextField/TextFieldIcon.tsx

@@ -7,7 +7,7 @@ import type { IconSource } from '../Icon';
 import { ACCESSORY_SIZE } from './constants';
 import { $iconStyle, $iconWrapperStyle } from './styles';
 import type { TextFieldAccessoryProps } from './TextField';
-import { getIconColor, parseStatus } from './utils';
+import { getIconColor } from './utils';
 import IconButton from '../IconButton/IconButton';
 
 export interface TextFieldIconProps extends TextFieldAccessoryProps {
@@ -74,26 +74,24 @@ const TextFieldIcon = ({
   color,
   size,
   style,
-  status,
-  editable,
+  error,
+  disabled,
   accessibility,
   theme: themeOverride,
   onPress,
 }: TextFieldIconProps) => {
   const theme = useInternalTheme(themeOverride);
 
-  const { hasError, disabled } = parseStatus(status);
-
   const iconSize = size ?? ACCESSORY_SIZE;
 
   const iconColor = getIconColor({
     theme,
     color,
-    hasError,
+    hasError: error,
     disabled,
   });
 
-  const onPressHandler = editable ? onPress : undefined;
+  const onPressHandler = disabled ? undefined : onPress;
 
   return (
     <View style={[$iconWrapperStyle, style]}>
@@ -103,7 +101,6 @@ const TextFieldIcon = ({
         size={iconSize}
         style={$iconStyle}
         onPress={onPressHandler}
-        disabled={!editable}
         {...accessibility}
       />
     </View>

src/components/TextField/logic.ts

@@ -30,7 +30,7 @@ import type {
   TextFieldProps,
   TextFieldSharedApi,
 } from './TextField';
-import { getAccentColors, parseStatus } from './utils';
+import { getAccentColors } from './utils';
 import { useInternalTheme } from '../../core/theming';
 
 export const useTextField = (props: TextFieldProps): TextFieldHookReturn => {
@@ -59,9 +59,9 @@ export const useTextField = (props: TextFieldProps): TextFieldHookReturn => {
   // =======================
 
   const { isRTL } = I18nManager.getConstants();
-  const { hasError, disabled: isDisabled } = parseStatus(props.status);
-  const disabled = props.editable === false || isDisabled;
+  const disabled = props.editable === false;
   const isFloating = isFocused || !!props.value;
+  const hasError = !!props.error;
   const hasAccessory = isRTL ? !!props.EndAccessory : !!props.StartAccessory;
   const hasPrefix = !!props.prefix && isFloating;
   const hasSuffix = !!props.suffix && isFloating;

src/components/TextField/utils.ts

@@ -18,24 +18,10 @@ import {
 import type {
   TextFieldProps,
   TextFieldSharedApi,
-  TextFieldStatus,
   SharedTextFieldStyleData,
 } from './TextField';
 import type { InternalTheme } from '../../types';
 
-export const parseStatus = (
-  status: TextFieldStatus | undefined
-): { hasError: boolean; disabled: boolean } => {
-  if (!status) return { hasError: false, disabled: false };
-
-  const list = typeof status === 'string' ? [status] : status;
-
-  return {
-    hasError: list.includes('error'),
-    disabled: list.includes('disabled'),
-  };
-};
-
 export const getAccentColors = ({
   theme,
   hasError,