@hoddy-ui/core 2.5.49 → 2.5.53

package/src/Components/TextField.tsx

@@ -14,371 +14,80 @@ import {
   ms,
   verticalScale,
 } from "react-native-size-matters";
-import { useColors } from "../hooks";
+import { useColors, useTheme } from "../hooks";
 import { TextFieldProps } from "../types";
 import { getFontFamily } from "../utility";
 import SelectMenu from "./SelectMenu";
 import Typography from "./Typography";
 
-const TextField: React.FC<TextFieldProps> = ({
-  label,
-  keyboardType,
-  variant,
-  color = "primary",
-  value,
-  type,
-  placeholder = "",
-  helperText,
-  onChangeText,
-  onSubmitEditing = () => {},
-  onFocus = () => {},
-  onBlur = () => {},
-  error,
-  start,
-  size = "normal",
-  rounded,
-  disabled = false,
-  style = {},
-  inputStyles = {},
-  gutterBottom = 0,
-  end,
-  options,
-  selectMenuProps,
-  ...props
-}) => {
-  const colors = useColors();
-  const [focused, setFocused] = useState(false);
-  const [datePickerVisible, setDatePickerVisible] = useState(false);
-  const isDate = type === "date";
-  const height =
-    moderateScale(variant === "text" ? 50 : 45) *
-    (size === "large" ? 1.2 : size === "small" ? 0.8 : 1);
+export type TextFieldLabelVariant = "floating" | "external";
 
-  const labelAnim = useRef(
-    new Animated.Value(height / moderateScale(variant === "text" ? 2.5 : 3.2)),
-  ).current;
+export interface TextFieldBaseProps extends TextFieldProps {
+  labelVariant: TextFieldLabelVariant;
+}
 
-  React.useEffect(() => {
-    if (focused || value) {
-      Animated.timing(labelAnim, {
-        toValue: verticalScale(variant === "text" ? 2 : 4),
-        duration: 300,
-        useNativeDriver: false,
-      }).start();
-    } else {
-      Animated.timing(labelAnim, {
-        toValue: height / moderateScale(variant === "text" ? 2.5 : 3.2),
-        duration: 300,
-        useNativeDriver: false,
-      }).start();
-    }
-  }, [focused, value]);
-  const styles: any = ScaledSheet.create({
-    root: {
-      marginBottom: ms(gutterBottom),
-      width: "100%",
-      ...style,
-    },
-    container: {
-      height: height,
-      overflow: "hidden",
-
-      backgroundColor:
-        variant === "outlined" || variant === "text"
-          ? "#fff0"
-          : focused
-            ? colors.white[3]
-            : colors.white[4],
-      flexDirection: "row",
-      borderColor: error
-        ? colors.error.main
-        : focused
-          ? colors[color].main
-          : colors.textSecondary.main,
-      borderWidth: error ? 1 : variant === "outlined" ? (focused ? 2 : 0.5) : 0,
-      borderBottomWidth: variant === "text" ? 0.5 : undefined,
-      width: "100%",
-      borderRadius: variant === "text" ? 0 : rounded ? 30 : 7,
-      alignItems: "center",
-      ...inputStyles,
-    },
-    input: {
-      fontSize: "14@s",
-      flex: 1,
-      alignSelf: "stretch",
-      paddingLeft: variant === "text" ? 0 : moderateScale(15),
-      paddingRight: moderateScale(10),
-      paddingTop: "11@vs",
-      fontFamily: getFontFamily(400),
-      color: colors.black[1],
-      zIndex: 10,
-      // backgroundColor: "#284",
-    },
-    inputText: {
-      fontSize: "14@ms",
-      flex: 1,
-      paddingLeft: variant === "text" ? 0 : moderateScale(15),
-      paddingTop: "13@ms",
-    },
-    dateContent: {
-      flexDirection: "row",
-      alignItems: "center",
-      flex: 1,
-      paddingLeft: variant === "text" ? 0 : moderateScale(15),
-      paddingRight: moderateScale(10),
-      paddingTop: variant === "text" ? ms(13) : ms(12),
-    },
-    dateText: {
-      fontSize: "14@ms",
-      flex: 1,
-    },
-    datePlaceholder: {
-      color: colors.textSecondary.main,
-    },
-    label: {
-      fontFamily: getFontFamily(400),
-      position: "absolute",
-      left: variant === "text" ? 0 : moderateScale(15),
-      fontSize: focused || value ? "10@s" : "13@s",
-      color: focused ? colors[color].main : colors.textSecondary.main,
-    },
-    helperText: {
-      paddingHorizontal: "15@s",
-      flex: 1,
-      color: focused ? colors[color].dark : colors.textSecondary.main,
-      paddingTop: "4@ms",
-    },
-    error: {
-      paddingLeft: 10,
-      paddingRight: 10,
-      paddingTop: 5,
-      flexDirection: "row",
-      alignItems: "center",
-    },
-    errorText: {
-      fontSize: 12,
-      marginLeft: 10,
-    },
-  });
-  const formProps: any =
-    type === "email"
-      ? {
-          textContentType: "emailAddress",
-          keyboardType: "email-address",
-          autoCapitalize: "none",
-          autoCompleteType: "email",
-        }
-      : type === "number"
+const formPropsFromType = (
+  type: TextFieldProps["type"],
+  showPassword: boolean,
+): Record<string, unknown> =>
+  type === "email"
+    ? {
+        textContentType: "emailAddress",
+        keyboardType: "email-address",
+        autoCapitalize: "none",
+        autoCompleteType: "email",
+      }
+    : type === "number"
+      ? { keyboardType: "numeric" }
+      : type === "tel"
         ? {
-            keyboardType: "numeric",
+            textContentType: "telephoneNumber",
+            keyboardType: "phone-pad",
           }
-        : type === "tel"
+        : type === "search"
           ? {
-              textContentType: "telephoneNumber",
-              keyboardType: "phone-pad",
+              keyboardType: "web-search",
+              returnKeyType: "search",
+              autoCapitalize: "none",
             }
-          : type === "search"
+          : type === "password"
             ? {
-                keyboardType: "web-search",
-                returnKeyType: "search",
+                secureTextEntry: !showPassword,
+                autoCompleteType: "password",
                 autoCapitalize: "none",
+                textContentType: "password",
               }
-            : type === "password"
-              ? {
-                  secureTextEntry: true,
-                  autoCompleteType: "password",
-                  autoCapitalize: "none",
-                  textContentType: "password",
-                }
-              : {};
-  const parseDateValue = () => {
-    if (!value) return new Date();
-    if (value instanceof Date) return value;
-    const parts = `${value}`.split("/");
-    if (parts.length === 3) {
-      const [day, month, year] = parts;
-      const parsed = new Date(
-        parseInt(year, 10),
-        parseInt(month, 10) - 1,
-        parseInt(day, 10),
-      );
-      if (!isNaN(parsed.getTime())) return parsed;
-    }
-    const fallback = new Date(value);
-    return isNaN(fallback.getTime()) ? new Date() : fallback;
-  };
-
-  const handleDateConfirm = (date: Date) => {
-    const day = date.getDate();
-    const month = date.getMonth() + 1;
-    const year = date.getFullYear();
-    const dateString = `${day}/${month}/${year}`;
-    onChangeText?.(dateString);
-    setDatePickerVisible(false);
-  };
-
-  const handleContainerPress = () => {
-    if (disabled) return;
-    setFocused(true);
-    if (isDate) {
-      onFocus();
-      setDatePickerVisible(true);
-    }
-  };
-  return (
-    <>
-      <View style={styles.root}>
-        <TouchableOpacity
-          onPress={handleContainerPress}
-          style={styles.container}
-        >
-          <Animated.Text style={{ ...styles.label, top: labelAnim }}>
-            {label}
-          </Animated.Text>
-          {start}
-          {options ? (
-            <View
-              style={{ flex: 1, alignItems: "center", flexDirection: "row" }}
-            >
-              {options.find((cur) => cur.value === value)?.start && (
-                <View
-                  style={{
-                    paddingTop: variant !== "outlined" ? ms(13) : 0,
-                    paddingRight: 10,
-                  }}
-                >
-                  {options.find((cur) => cur.value === value)?.start}
-                </View>
-              )}
+            : {};
 
-              <Typography style={styles.inputText}>
-                {options.find((cur) => cur.value === value)?.label}
-              </Typography>
-            </View>
-          ) : isDate ? (
-            <View style={styles.dateContent}>
-              <Typography
-                style={[
-                  styles.dateText,
-                  !value ? styles.datePlaceholder : undefined,
-                ]}
-                color={value ? "dark" : "textSecondary"}
-              >
-                {value || placeholder}
-              </Typography>
-              <View style={{ marginLeft: 8 }}>
-                {end ?? (
-                  <Ionicons
-                    name="calendar-outline"
-                    size={22}
-                    color={colors.textSecondary.main}
-                  />
-                )}
-              </View>
-            </View>
-          ) : (
-            <TextInput
-              onFocus={() => {
-                onFocus();
-                setFocused(true);
-              }}
-              onBlur={() => {
-                onBlur();
-                setFocused(false);
-              }}
-              value={value}
-              onChangeText={onChangeText}
-              keyboardType={keyboardType}
-              editable={!disabled}
-              selectTextOnFocus={!disabled}
-              onSubmitEditing={onSubmitEditing}
-              placeholderTextColor={colors.textSecondary.main}
-              {...formProps}
-              {...props}
-              style={styles.input}
-            />
-          )}
-          {end && (
-            <View
-              style={{
-                marginRight: 20,
-                paddingTop: variant === "text" ? ms(13) : 0,
-              }}
-            >
-              {end}
-            </View>
-          )}
-          {options && (
-            <View
-              style={{
-                marginRight: variant === "text" ? 0 : 20,
-                paddingTop: variant === "text" ? ms(13) : 0,
-              }}
-            >
-              <Ionicons
-                name="chevron-down"
-                color={colors.textSecondary.main}
-                size={24}
-              />
-            </View>
-          )}
-        </TouchableOpacity>
-        {helperText && (
-          <Typography
-            color="textSecondary"
-            style={styles.helperText}
-            variant="caption"
-          >
-            {helperText}
-          </Typography>
-        )}
-        {error && (
-          <View style={styles.error}>
-            <MaterialIcons name="error" color={colors.error.main} size={16} />
-            <Typography style={styles.errorText} color="error">
-              {error}
-            </Typography>
-          </View>
-        )}
-      </View>
-      {options && (
-        <SelectMenu
-          options={options}
-          value={value}
-          open={focused}
-          onClose={() => setFocused(false)}
-          label={label}
-          helperText={helperText}
-          onChange={onChangeText!}
-          {...selectMenuProps}
-        />
-      )}
-      {isDate && (
-        <DateTimePickerModal
-          isVisible={datePickerVisible}
-          mode="date"
-          date={parseDateValue()}
-          onConfirm={handleDateConfirm}
-          onCancel={() => {
-            setDatePickerVisible(false);
-            setFocused(false);
-          }}
-        />
-      )}
-    </>
-  );
-};
+function parseDateValue(value: unknown): Date {
+  if (!value) return new Date();
+  if (value instanceof Date) return value;
+  const isoParts = `${value}`.split("-");
+  if (isoParts.length === 3) {
+    const [year, month, day] = isoParts;
+    const parsed = new Date(
+      parseInt(year, 10),
+      parseInt(month, 10) - 1,
+      parseInt(day, 10),
+    );
+    if (!isNaN(parsed.getTime())) return parsed;
+  }
+  const fallback = new Date(value as string);
+  return isNaN(fallback.getTime()) ? new Date() : fallback;
+}
 
-export const TextField2 = React.forwardRef<TextInput, TextFieldProps>(
+export const TextFieldBase = React.forwardRef<TextInput, TextFieldBaseProps>(
   (
     {
       label,
       labelProps,
+      labelVariant,
       keyboardType,
+      variant = "outlined",
       color = "primary",
       value,
       type,
-      placeholder,
+      placeholder = "",
       helperText,
       onChangeText,
       onSubmitEditing = () => {},
@@ -386,99 +95,204 @@ export const TextField2 = React.forwardRef<TextInput, TextFieldProps>(
       onBlur = () => {},
       error,
       start,
+      size = "normal",
       rounded,
       disabled = false,
       style = {},
       inputStyles = {},
-      gutterBottom = 8,
+      gutterBottom,
       end,
       options,
       multiline,
       selectMenuProps,
+      labelAlwaysOpen,
       ...props
     },
     ref,
   ) => {
     const colors = useColors();
+    const theme = useTheme();
     const [focused, _setFocused] = useState(false);
     const [showPassword, setShowPassword] = useState(false);
     const [datePickerVisible, setDatePickerVisible] = useState(false);
     const isDate = type === "date";
 
-    const height = moderateScale(
+    const setFocused = (next: boolean) => {
+      if (options && next) {
+        Keyboard.dismiss();
+        setTimeout(() => _setFocused(next), 100);
+      } else {
+        _setFocused(next);
+      }
+    };
+
+    const isFloating = labelVariant === "floating";
+    const labelOpen = labelAlwaysOpen || focused || value;
+
+    const baseHeight = moderateScale(
       multiline ? 50 + (props.numberOfLines || 1) * 18 : 50,
     );
+    const sizeMultiplier = isFloating
+      ? size === "large"
+        ? 1.2
+        : size === "small"
+          ? 0.8
+          : 1
+      : 1;
+    const height = baseHeight * sizeMultiplier;
 
-    const setFocused = (value: boolean) => {
-      if (options && value) {
-        Keyboard.dismiss();
-        setTimeout(() => {
-          _setFocused(value);
-        }, 100);
+    const labelAnim = useRef(
+      new Animated.Value(
+        height / moderateScale(variant === "text" ? 2.5 : 3.2),
+      ),
+    ).current;
+
+    React.useEffect(() => {
+      if (!isFloating) return;
+      if (labelOpen) {
+        Animated.timing(labelAnim, {
+          toValue: verticalScale(variant === "text" ? 2 : 4),
+          duration: 300,
+          useNativeDriver: false,
+        }).start();
       } else {
-        _setFocused(value);
+        Animated.timing(labelAnim, {
+          toValue: height / moderateScale(variant === "text" ? 2.5 : 3.2),
+          duration: 300,
+          useNativeDriver: false,
+        }).start();
+      }
+    }, [isFloating, labelOpen, variant, height]);
+
+    const formProps = formPropsFromType(type, showPassword);
+
+    const handleDateConfirm = (date: Date) => {
+      const year = date.getFullYear();
+      const month = `${date.getMonth() + 1}`.padStart(2, "0");
+      const day = `${date.getDate()}`.padStart(2, "0");
+      onChangeText?.(`${year}-${month}-${day}`);
+      setDatePickerVisible(false);
+      setFocused(false);
+    };
+
+    const handleContainerPress = () => {
+      if (disabled) return;
+      setFocused(true);
+      if (isDate) {
+        onFocus();
+        setDatePickerVisible(true);
       }
     };
 
+    const inputPadding =
+      variant === "text" ? 0 : moderateScale(isFloating ? 15 : 10);
+    const containerBorderRadius =
+      variant === "text" ? 0 : rounded ? 30 : isFloating ? 7 : 10;
+    const datePlaceholderColor = colors.textSecondary.light;
+
     const styles: any = ScaledSheet.create({
       root: {
-        marginBottom: ms(gutterBottom),
+        marginBottom: ms(gutterBottom ?? (isFloating ? 0 : 8)),
+        width: "100%",
         ...style,
       },
       container: {
         height: height,
         overflow: "hidden",
         flexDirection: "row",
+        backgroundColor:
+          variant === "outlined" || variant === "text"
+            ? "#fff0"
+            : focused
+              ? colors.white[2] + "dd"
+              : colors.white[2],
         borderColor: error
           ? colors.error.main
-          : focused
-            ? colors[color].main
-            : colors.white[4],
-        borderWidth: error ? 1 : focused ? 2 : 1,
+          : isFloating && focused && variant === "contained"
+            ? colors[color].light
+            : focused
+              ? colors[color].main
+              : colors.textSecondary.main,
+        borderWidth: error
+          ? 1
+          : isFloating && focused && variant === "contained"
+            ? 1
+            : variant === "outlined"
+              ? focused
+                ? 2
+                : 0.5
+              : 0,
+        borderBottomWidth: variant === "text" ? 0.5 : undefined,
         width: "100%",
-        borderRadius: rounded ? 30 : 10,
+        borderRadius: containerBorderRadius,
         alignItems: multiline ? "flex-start" : "center",
         paddingVertical: multiline ? 10 : 0,
         ...inputStyles,
       },
       input: {
-        fontSize: "14@s",
+        fontSize: "14@ms",
         flex: 1,
         alignSelf: "stretch",
-        paddingLeft: moderateScale(10),
+        padding: 0,
+        paddingLeft: inputPadding,
+        lineHeight: "18@ms",
         paddingRight: moderateScale(10),
-        color: colors.dark.main,
+        ...(isFloating
+          ? { marginTop: "13@ms", fontFamily: getFontFamily(400) }
+          : {}),
+        color: disabled ? colors.textSecondary.main : colors.dark.main,
         zIndex: 10,
-        // backgroundColor: "#284",
       },
       inputText: {
         fontSize: "14@ms",
-        color: colors.dark.main,
-        paddingLeft: moderateScale(10),
-      },
-      placeholder: {
-        fontSize: "14@ms",
-        color: colors.textSecondary.light,
-        paddingLeft: moderateScale(10),
+        flex: 1,
+        paddingLeft: inputPadding,
+        ...(isFloating ? { paddingTop: "13@ms" } : {}),
       },
       dateContent: {
         flexDirection: "row",
         alignItems: "center",
         flex: 1,
-        paddingHorizontal: moderateScale(10),
-        paddingTop: multiline ? 4 : 0,
-      },
-      dateText: {
-        fontSize: "14@ms",
-        flex: 1,
-      },
-      datePlaceholder: {
-        color: colors.textSecondary.light,
+        paddingLeft: inputPadding,
+        paddingRight: moderateScale(10),
+        paddingTop: isFloating
+          ? variant === "text"
+            ? ms(13)
+            : ms(12)
+          : multiline
+            ? 4
+            : 0,
       },
-      label: {},
+      dateText: { fontSize: "14@ms", flex: 1 },
+      datePlaceholder: { color: datePlaceholderColor },
+      ...(isFloating
+        ? {
+            contentWrapper: { flex: 1, position: "relative" as const },
+            label: {
+              fontFamily: getFontFamily(400),
+              position: "absolute",
+              left: inputPadding,
+              fontSize: labelOpen ? "10@ms" : "13@ms",
+              color: error
+                ? colors.error.main
+                : focused
+                  ? theme === "dark"
+                    ? colors[color].light
+                    : colors[color].main
+                  : colors.textSecondary.main,
+            },
+          }
+        : {}),
       helperText: {
-        paddingHorizontal: "15@s",
-        color: focused ? colors[color].dark : "#fffa",
+        paddingHorizontal: "15@ms",
+        flex: 1,
+        color: error
+          ? colors.error.main
+          : focused
+            ? theme === "dark"
+              ? colors[color].light
+              : colors[color].main
+            : colors.textSecondary.main,
         paddingTop: "4@ms",
       },
       error: {
@@ -488,100 +302,160 @@ export const TextField2 = React.forwardRef<TextInput, TextFieldProps>(
         flexDirection: "row",
         alignItems: "center",
       },
-      errorText: {
-        fontSize: 12,
-        marginLeft: 10,
+      errorText: { fontSize: 12, marginLeft: 10, fontWeight: "400" },
+      placeholder: {
+        fontSize: "14@ms",
+        color: colors.textSecondary.light,
+        paddingLeft: inputPadding,
       },
     });
-    const formProps: any =
-      type === "email"
-        ? {
-            textContentType: "emailAddress",
-            keyboardType: "email-address",
-            autoCapitalize: "none",
-            autoCompleteType: "email",
-          }
-        : type === "number"
-          ? {
-              keyboardType: "numeric",
-            }
-          : type === "tel"
-            ? {
-                textContentType: "telephoneNumber",
-                keyboardType: "phone-pad",
-              }
-            : type === "search"
-              ? {
-                  keyboardType: "web-search",
-                  returnKeyType: "search",
-                  autoCapitalize: "none",
-                }
-              : type === "password"
-                ? {
-                    secureTextEntry: !showPassword,
-                    autoCompleteType: "password",
-                    autoCapitalize: "none",
-                    textContentType: "password",
-                  }
-                : {};
-    const parseDateValue = () => {
-      if (!value) return new Date();
-      if (value instanceof Date) return value;
-      const parts = `${value}`.split("/");
-      if (parts.length === 3) {
-        const [day, month, year] = parts;
-        const parsed = new Date(
-          parseInt(year, 10),
-          parseInt(month, 10) - 1,
-          parseInt(day, 10),
-        );
-        if (!isNaN(parsed.getTime())) return parsed;
-      }
-      const fallback = new Date(value);
-      return isNaN(fallback.getTime()) ? new Date() : fallback;
-    };
 
-    const handleDateConfirm = (date: Date) => {
-      const day = date.getDate();
-      const month = date.getMonth() + 1;
-      const year = date.getFullYear();
-      const dateString = `${day}/${month}/${year}`;
-      onChangeText?.(dateString);
-      setDatePickerVisible(false);
-    };
+    const selectedOption = options?.find((cur) => cur.value === value);
+    const showPasswordToggle =
+      type === "password" && !end && !options && !isDate;
 
-    const handleContainerPress = () => {
-      if (disabled) return;
-      setFocused(true);
-      if (isDate) {
-        onFocus();
-        setDatePickerVisible(true);
-      }
-    };
     return (
       <>
         <View style={styles.root}>
-          {label && (
+          {isFloating ? null : label != null && label !== "" ? (
             <Typography
               variant="body2"
-              color="textSecondary"
+              color={error ? "error" : "textSecondary"}
               gutterBottom={7}
               {...labelProps}
             >
               {label}
             </Typography>
-          )}
+          ) : null}
           <TouchableOpacity
             onPress={handleContainerPress}
             style={styles.container}
+            activeOpacity={1}
           >
-            <View style={{ marginTop: multiline ? 5 : 0 }}>{start}</View>
-
-            {options ? (
+            <View style={{ marginTop: multiline && !isFloating ? 5 : 0 }}>
+              {start}
+            </View>
+            {isFloating ? (
+              <View style={styles.contentWrapper}>
+                {label != null && label !== "" ? (
+                  <Animated.Text
+                    style={{ ...styles.label, top: labelAnim }}
+                    pointerEvents="none"
+                  >
+                    {label}
+                  </Animated.Text>
+                ) : null}
+                {options ? (
+                  <View
+                    style={{
+                      flex: 1,
+                      alignItems: "center",
+                      flexDirection: "row",
+                    }}
+                  >
+                    {isFloating && selectedOption?.start ? (
+                      <View
+                        style={{
+                          paddingTop: variant !== "outlined" ? ms(13) : 0,
+                          paddingRight: 10,
+                        }}
+                      >
+                        {selectedOption.start}
+                      </View>
+                    ) : null}
+                    {selectedOption ? (
+                      <Typography style={styles.inputText}>
+                        {selectedOption.label}
+                      </Typography>
+                    ) : (
+                      !isFloating && (
+                        <Typography style={styles.placeholder}>
+                          {placeholder}
+                        </Typography>
+                      )
+                    )}
+                    {isFloating ? (
+                      <View
+                        style={{
+                          marginRight: variant === "text" ? 0 : 20,
+                          paddingTop: variant === "text" ? ms(13) : 0,
+                        }}
+                      >
+                        <Ionicons
+                          name="chevron-down"
+                          color={colors.textSecondary.main}
+                          size={24}
+                        />
+                      </View>
+                    ) : (
+                      <Ionicons
+                        name="chevron-down"
+                        size={24}
+                        style={{ marginLeft: "auto", marginRight: 15 }}
+                        color={colors.dark.light}
+                      />
+                    )}
+                  </View>
+                ) : isDate ? (
+                  <View style={styles.dateContent}>
+                    <Typography
+                      style={[
+                        styles.dateText,
+                        !value ? styles.datePlaceholder : undefined,
+                      ]}
+                      color={value ? "dark" : "textSecondary"}
+                    >
+                      {value || placeholder}
+                    </Typography>
+                    <View style={{ marginLeft: 8 }}>
+                      {end ?? (
+                        <Ionicons
+                          name="calendar-outline"
+                          size={22}
+                          color={colors.textSecondary.main}
+                        />
+                      )}
+                    </View>
+                  </View>
+                ) : (
+                  <TextInput
+                    ref={ref}
+                    onFocus={() => {
+                      onFocus();
+                      setFocused(true);
+                    }}
+                    onBlur={() => {
+                      onBlur();
+                      setFocused(false);
+                    }}
+                    value={value}
+                    onChangeText={onChangeText}
+                    key={
+                      type === "password"
+                        ? showPassword
+                          ? "show"
+                          : "hide"
+                        : undefined
+                    }
+                    keyboardType={keyboardType}
+                    placeholderTextColor={colors.textSecondary.light}
+                    editable={!disabled}
+                    placeholder={labelOpen ? placeholder : ""}
+                    selectTextOnFocus={!disabled}
+                    onSubmitEditing={onSubmitEditing}
+                    multiline={multiline}
+                    textAlignVertical={multiline ? "top" : "center"}
+                    {...formProps}
+                    {...props}
+                    style={styles.input}
+                  />
+                )}
+              </View>
+            ) : options ? (
               <>
-                {value ? (
+                {selectedOption ? (
                   <Typography style={styles.inputText}>
-                    {options.find((cur) => cur.value === value)?.label}
+                    {selectedOption.label}
                   </Typography>
                 ) : (
                   <Typography style={styles.placeholder}>
@@ -629,7 +503,13 @@ export const TextField2 = React.forwardRef<TextInput, TextFieldProps>(
                 }}
                 value={value}
                 onChangeText={onChangeText}
-                key={showPassword ? "show" : "hide"}
+                key={
+                  type === "password"
+                    ? showPassword
+                      ? "show"
+                      : "hide"
+                    : undefined
+                }
                 keyboardType={keyboardType}
                 placeholderTextColor={colors.textSecondary.light}
                 editable={!disabled}
@@ -637,61 +517,53 @@ export const TextField2 = React.forwardRef<TextInput, TextFieldProps>(
                 selectTextOnFocus={!disabled}
                 onSubmitEditing={onSubmitEditing}
                 multiline={multiline}
-                extAlignVertical={multiline ? "top" : "center"}
+                textAlignVertical={multiline ? "top" : "center"}
                 {...formProps}
                 {...props}
                 style={styles.input}
               />
             )}
-
-            {end ? (
-              <View style={{ marginRight: 20 }}>{end}</View>
-            ) : (
-              type === "password" && (
-                <TouchableOpacity
-                  style={{ marginRight: 20 }}
-                  onPress={() => setShowPassword(!showPassword)}
-                >
-                  <Ionicons
-                    name={showPassword ? "eye-outline" : "eye-off-outline"}
-                    size={24}
-                    color={colors.textSecondary.main}
-                  />
-                </TouchableOpacity>
-              )
-            )}
+            {end && !options ? (
+              <View
+                style={{
+                  marginRight: 20,
+                  paddingTop: isFloating && variant === "text" ? ms(13) : 0,
+                }}
+              >
+                {end}
+              </View>
+            ) : showPasswordToggle ? (
+              <TouchableOpacity
+                style={{ marginRight: 20 }}
+                onPress={() => setShowPassword(!showPassword)}
+              >
+                <Ionicons
+                  name={showPassword ? "eye-outline" : "eye-off-outline"}
+                  size={24}
+                  color={colors.textSecondary.main}
+                />
+              </TouchableOpacity>
+            ) : null}
           </TouchableOpacity>
-          {helperText && (
-            <Typography
-              color="textSecondary"
-              style={styles.helperText}
-              variant="caption"
-            >
+          {helperText ? (
+            <Typography style={styles.helperText} variant="caption">
               {helperText}
             </Typography>
-          )}
-          {error && (
+          ) : null}
+          {error ? (
             <View style={styles.error}>
               <MaterialIcons name="error" color={colors.error.main} size={16} />
-              <Typography style={styles.errorText} color="error">
+              <Typography
+                style={styles.errorText}
+                color="error"
+                fontWeight={400}
+              >
                 {error}
               </Typography>
             </View>
-          )}
+          ) : null}
         </View>
-        {isDate && (
-          <DateTimePickerModal
-            isVisible={datePickerVisible}
-            mode="date"
-            date={parseDateValue()}
-            onConfirm={handleDateConfirm}
-            onCancel={() => {
-              setDatePickerVisible(false);
-              setFocused(false);
-            }}
-          />
-        )}
-        {options && (
+        {options ? (
           <SelectMenu
             options={options}
             value={value}
@@ -702,10 +574,49 @@ export const TextField2 = React.forwardRef<TextInput, TextFieldProps>(
             onChange={onChangeText!}
             {...selectMenuProps}
           />
-        )}
+        ) : null}
+        {isDate ? (
+          <DateTimePickerModal
+            isVisible={datePickerVisible}
+            mode="date"
+            date={parseDateValue(value)}
+            onConfirm={handleDateConfirm}
+            onCancel={() => {
+              setDatePickerVisible(false);
+              setFocused(false);
+            }}
+          />
+        ) : null}
       </>
     );
   },
 );
 
+TextFieldBase.displayName = "TextFieldBase";
+
+const TextField = React.forwardRef<TextInput, TextFieldProps>((props, ref) => (
+  <TextFieldBase
+    {...props}
+    ref={ref}
+    labelVariant="floating"
+    gutterBottom={props.gutterBottom ?? 0}
+    placeholder={props.placeholder ?? ""}
+  />
+));
+
+TextField.displayName = "TextField";
+
+export const TextField2 = React.forwardRef<TextInput, TextFieldProps>(
+  (props, ref) => (
+    <TextFieldBase
+      {...props}
+      ref={ref}
+      labelVariant="external"
+      gutterBottom={props.gutterBottom ?? 8}
+    />
+  ),
+);
+
+TextField2.displayName = "TextField2";
+
 export default TextField;