feat: default error icon

Author: wonderlul

src/components/TextField/TextField.tsx

@@ -14,6 +14,7 @@ import {
 
 import { useTextField } from './logic';
 import { $addendumStyle } from './styles';
+import TextFieldErrorIcon from './TextFieldErrorIcon';
 import type { InternalTheme, ThemeProp } from '../../types';
 
 export type TextFieldVariant = 'filled' | 'outlined';
@@ -306,14 +307,16 @@ function TextField(props: TextFieldProps) {
           )}
         </View>
 
-        {!!TrailingAccessory && (
+        {TrailingAccessory ? (
           <TrailingAccessory
             style={$trailingAccessoryStyles}
             status={status}
             editable={!disabled}
             multiline={!!textInputProps.multiline}
           />
-        )}
+        ) : hasError ? (
+          <TextFieldErrorIcon style={$trailingAccessoryStyles} theme={theme} />
+        ) : null}
       </View>
 
       <View style={$addendumStyle}>

src/components/TextField/TextFieldErrorIcon.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { StyleProp, View, ViewStyle } from 'react-native';
+
+import { ACCESSORY_SIZE, ERROR_ICON_SIZE } from './constants';
+import { useInternalTheme } from '../../core/theming';
+import type { ThemeProp } from '../../types';
+import Icon from '../Icon';
+
+interface TextFieldErrorIconProps {
+  style?: StyleProp<ViewStyle>;
+  theme?: ThemeProp;
+}
+
+const TextFieldErrorIcon = ({
+  style: $wrapperStyle,
+  theme: themeOverride,
+}: TextFieldErrorIconProps) => {
+  const theme = useInternalTheme(themeOverride);
+
+  const $circleStyle: ViewStyle = {
+    width: ACCESSORY_SIZE,
+    height: ACCESSORY_SIZE,
+    borderRadius: ACCESSORY_SIZE / 2,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: theme.colors.error,
+  };
+
+  return (
+    <View style={$wrapperStyle}>
+      <View style={$circleStyle}>
+        <Icon
+          source="exclamation-thick"
+          size={ERROR_ICON_SIZE}
+          color={theme.colors.onError}
+        />
+      </View>
+    </View>
+  );
+};
+
+export default TextFieldErrorIcon;

src/components/TextField/constants.ts

@@ -21,6 +21,8 @@ export const ACCESSORY_SIZE = 24;
 export const PREFIX_END_PADDING = 2;
 export const SUFFIX_START_PADDING = 2;
 
+export const ERROR_ICON_SIZE = 16;
+
 // ===============
 // TYPOGRAPHY
 // ===============