@hoddy-ui/next 2.5.86 → 2.5.87

package/dist/index.js

@@ -52,6 +52,7 @@ __export(next_exports, {
   Spinner: () => Spinner_default,
   TextField: () => TextField_default,
   TextField2: () => TextField2,
+  TextFieldBase: () => TextFieldBase,
   Typography: () => Typography_default,
   UIThemeContext: () => UIThemeContext,
   UIThemeProvider: () => UIThemeProvider,
@@ -1532,325 +1533,54 @@ var SelectMenu = ({
 var SelectMenu_default = SelectMenu;
 
 // ../src/Components/TextField.tsx
-var TextField = ({
-  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 colors2 = useColors();
-  const [focused, setFocused] = (0, import_react16.useState)(false);
-  const [datePickerVisible, setDatePickerVisible] = (0, import_react16.useState)(false);
-  const isDate = type === "date";
-  const height2 = (0, import_react_native_size_matters13.moderateScale)(variant === "text" ? 50 : 45) * (size === "large" ? 1.2 : size === "small" ? 0.8 : 1);
-  const labelAnim = (0, import_react16.useRef)(
-    new import_react_native16.Animated.Value(height2 / (0, import_react_native_size_matters13.moderateScale)(variant === "text" ? 2.5 : 3.2))
-  ).current;
-  import_react16.default.useEffect(() => {
-    if (focused || value) {
-      import_react_native16.Animated.timing(labelAnim, {
-        toValue: (0, import_react_native_size_matters13.verticalScale)(variant === "text" ? 2 : 4),
-        duration: 300,
-        useNativeDriver: false
-      }).start();
-    } else {
-      import_react_native16.Animated.timing(labelAnim, {
-        toValue: height2 / (0, import_react_native_size_matters13.moderateScale)(variant === "text" ? 2.5 : 3.2),
-        duration: 300,
-        useNativeDriver: false
-      }).start();
-    }
-  }, [focused, value]);
-  const styles = import_react_native_size_matters13.ScaledSheet.create({
-    root: {
-      marginBottom: (0, import_react_native_size_matters13.ms)(gutterBottom),
-      width: "100%",
-      ...style
-    },
-    container: {
-      height: height2,
-      overflow: "hidden",
-      backgroundColor: variant === "outlined" || variant === "text" ? "#fff0" : focused ? colors2.white[3] : colors2.white[4],
-      flexDirection: "row",
-      borderColor: error ? colors2.error.main : focused ? colors2[color].main : colors2.textSecondary.main,
-      borderWidth: error ? 1 : variant === "outlined" ? focused ? 2 : 0.5 : 0,
-      borderBottomWidth: variant === "text" ? 0.5 : void 0,
-      width: "100%",
-      borderRadius: variant === "text" ? 0 : rounded ? 30 : 7,
-      alignItems: "center",
-      ...inputStyles
-    },
-    input: {
-      fontSize: "14@s",
-      flex: 1,
-      alignSelf: "stretch",
-      paddingLeft: variant === "text" ? 0 : (0, import_react_native_size_matters13.moderateScale)(15),
-      paddingRight: (0, import_react_native_size_matters13.moderateScale)(10),
-      paddingTop: "11@vs",
-      fontFamily: getFontFamily(400),
-      color: disabled ? colors2.textSecondary.main : colors2.dark.main,
-      zIndex: 10
-      // backgroundColor: "#284",
-    },
-    inputText: {
-      fontSize: "14@ms",
-      flex: 1,
-      paddingLeft: variant === "text" ? 0 : (0, import_react_native_size_matters13.moderateScale)(15),
-      paddingTop: "13@ms"
-    },
-    dateContent: {
-      flexDirection: "row",
-      alignItems: "center",
-      flex: 1,
-      paddingLeft: variant === "text" ? 0 : (0, import_react_native_size_matters13.moderateScale)(15),
-      paddingRight: (0, import_react_native_size_matters13.moderateScale)(10),
-      paddingTop: variant === "text" ? (0, import_react_native_size_matters13.ms)(13) : (0, import_react_native_size_matters13.ms)(12)
-    },
-    dateText: {
-      fontSize: "14@ms",
-      flex: 1
-    },
-    datePlaceholder: {
-      color: colors2.textSecondary.main
-    },
-    label: {
-      fontFamily: getFontFamily(400),
-      position: "absolute",
-      left: variant === "text" ? 0 : (0, import_react_native_size_matters13.moderateScale)(15),
-      fontSize: focused || value ? "10@s" : "13@s",
-      color: focused ? colors2[color].main : colors2.textSecondary.main
-    },
-    helperText: {
-      paddingHorizontal: "15@s",
-      flex: 1,
-      color: focused ? colors2[color].dark : colors2.textSecondary.main,
-      paddingTop: "4@ms"
-    },
-    error: {
-      paddingLeft: 10,
-      paddingRight: 10,
-      paddingTop: 5,
-      flexDirection: "row",
-      alignItems: "center"
-    },
-    errorText: {
-      fontSize: 12,
-      marginLeft: 10
-    }
-  });
-  const formProps = 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: true,
-    autoCompleteType: "password",
-    autoCapitalize: "none",
-    textContentType: "password"
-  } : {};
-  const parseDateValue = () => {
-    if (!value)
-      return /* @__PURE__ */ 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);
-    return isNaN(fallback.getTime()) ? /* @__PURE__ */ new Date() : fallback;
-  };
-  const handleDateConfirm = (date) => {
-    const year = date.getFullYear();
-    const month = `${date.getMonth() + 1}`.padStart(2, "0");
-    const day = `${date.getDate()}`.padStart(2, "0");
-    const dateString = `${year}-${month}-${day}`;
-    onChangeText?.(dateString);
-    setDatePickerVisible(false);
-  };
-  const handleContainerPress = () => {
-    if (disabled)
-      return;
-    setFocused(true);
-    if (isDate) {
-      onFocus();
-      setDatePickerVisible(true);
-    }
-  };
-  return /* @__PURE__ */ import_react16.default.createElement(import_react16.default.Fragment, null, /* @__PURE__ */ import_react16.default.createElement(import_react_native16.View, { style: styles.root }, /* @__PURE__ */ import_react16.default.createElement(
-    import_react_native16.TouchableOpacity,
-    {
-      onPress: handleContainerPress,
-      style: styles.container
-    },
-    /* @__PURE__ */ import_react16.default.createElement(import_react_native16.Animated.Text, { style: { ...styles.label, top: labelAnim } }, label),
-    start,
-    options ? /* @__PURE__ */ import_react16.default.createElement(
-      import_react_native16.View,
-      {
-        style: { flex: 1, alignItems: "center", flexDirection: "row" }
-      },
-      options.find((cur) => cur.value === value)?.start && /* @__PURE__ */ import_react16.default.createElement(
-        import_react_native16.View,
-        {
-          style: {
-            paddingTop: variant !== "outlined" ? (0, import_react_native_size_matters13.ms)(13) : 0,
-            paddingRight: 10
-          }
-        },
-        options.find((cur) => cur.value === value)?.start
-      ),
-      /* @__PURE__ */ import_react16.default.createElement(Typography_default, { style: styles.inputText }, options.find((cur) => cur.value === value)?.label)
-    ) : isDate ? /* @__PURE__ */ import_react16.default.createElement(import_react_native16.View, { style: styles.dateContent }, /* @__PURE__ */ import_react16.default.createElement(
-      Typography_default,
-      {
-        style: [
-          styles.dateText,
-          !value ? styles.datePlaceholder : void 0
-        ],
-        color: value ? "dark" : "textSecondary"
-      },
-      value || placeholder
-    ), /* @__PURE__ */ import_react16.default.createElement(import_react_native16.View, { style: { marginLeft: 8 } }, end ?? /* @__PURE__ */ import_react16.default.createElement(
-      import_vector_icons8.Ionicons,
-      {
-        name: "calendar-outline",
-        size: 22,
-        color: colors2.textSecondary.main
-      }
-    ))) : /* @__PURE__ */ import_react16.default.createElement(
-      import_react_native16.TextInput,
-      {
-        onFocus: () => {
-          onFocus();
-          setFocused(true);
-        },
-        onBlur: () => {
-          onBlur();
-          setFocused(false);
-        },
-        value,
-        onChangeText,
-        keyboardType,
-        editable: !disabled,
-        selectTextOnFocus: !disabled,
-        onSubmitEditing,
-        placeholderTextColor: colors2.textSecondary.main,
-        ...formProps,
-        ...props,
-        style: styles.input
-      }
-    ),
-    end && /* @__PURE__ */ import_react16.default.createElement(
-      import_react_native16.View,
-      {
-        style: {
-          marginRight: 20,
-          paddingTop: variant === "text" ? (0, import_react_native_size_matters13.ms)(13) : 0
-        }
-      },
-      end
-    ),
-    options && /* @__PURE__ */ import_react16.default.createElement(
-      import_react_native16.View,
-      {
-        style: {
-          marginRight: variant === "text" ? 0 : 20,
-          paddingTop: variant === "text" ? (0, import_react_native_size_matters13.ms)(13) : 0
-        }
-      },
-      /* @__PURE__ */ import_react16.default.createElement(
-        import_vector_icons8.Ionicons,
-        {
-          name: "chevron-down",
-          color: colors2.textSecondary.main,
-          size: 24
-        }
-      )
-    )
-  ), helperText && /* @__PURE__ */ import_react16.default.createElement(
-    Typography_default,
-    {
-      color: "textSecondary",
-      style: styles.helperText,
-      variant: "caption"
-    },
-    helperText
-  ), error && /* @__PURE__ */ import_react16.default.createElement(import_react_native16.View, { style: styles.error }, /* @__PURE__ */ import_react16.default.createElement(import_vector_icons8.MaterialIcons, { name: "error", color: colors2.error.main, size: 16 }), /* @__PURE__ */ import_react16.default.createElement(Typography_default, { style: styles.errorText, color: "error" }, error))), options && /* @__PURE__ */ import_react16.default.createElement(
-    SelectMenu_default,
-    {
-      options,
-      value,
-      open: focused,
-      onClose: () => setFocused(false),
-      label,
-      helperText,
-      onChange: onChangeText,
-      ...selectMenuProps
-    }
-  ), isDate && /* @__PURE__ */ import_react16.default.createElement(
-    import_react_native_modal_datetime_picker.default,
-    {
-      isVisible: datePickerVisible,
-      mode: "date",
-      date: parseDateValue(),
-      onConfirm: handleDateConfirm,
-      onCancel: () => {
-        setDatePickerVisible(false);
-        setFocused(false);
-      }
-    }
-  ));
-};
-var TextField2 = import_react16.default.forwardRef(
+var formPropsFromType = (type, showPassword) => 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"
+} : {};
+function parseDateValue(value) {
+  if (!value)
+    return /* @__PURE__ */ 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);
+  return isNaN(fallback.getTime()) ? /* @__PURE__ */ new Date() : fallback;
+}
+var TextFieldBase = import_react16.default.forwardRef(
   ({
     label,
     labelProps,
+    labelVariant,
     keyboardType,
+    variant = "outlined",
     color = "primary",
     value,
     type,
-    placeholder,
+    placeholder = "",
     helperText,
     onChangeText,
     onSubmitEditing = () => {
@@ -1861,11 +1591,12 @@ var TextField2 = import_react16.default.forwardRef(
     },
     error,
     start,
+    size = "normal",
     rounded,
     disabled = false,
     style = {},
     inputStyles = {},
-    gutterBottom = 8,
+    gutterBottom,
     end,
     options,
     multiline,
@@ -1877,32 +1608,78 @@ var TextField2 = import_react16.default.forwardRef(
     const [showPassword, setShowPassword] = (0, import_react16.useState)(false);
     const [datePickerVisible, setDatePickerVisible] = (0, import_react16.useState)(false);
     const isDate = type === "date";
-    const height2 = (0, import_react_native_size_matters13.moderateScale)(
-      multiline ? 50 + (props.numberOfLines || 1) * 18 : 50
-    );
-    const setFocused = (value2) => {
-      if (options && value2) {
+    const setFocused = (next) => {
+      if (options && next) {
         import_react_native16.Keyboard.dismiss();
-        setTimeout(() => {
-          _setFocused(value2);
-        }, 100);
+        setTimeout(() => _setFocused(next), 100);
       } else {
-        _setFocused(value2);
+        _setFocused(next);
       }
     };
+    const isFloating = labelVariant === "floating";
+    const hasPlaceholder = placeholder != null && String(placeholder).trim() !== "";
+    const labelOpen = focused || value || isFloating && hasPlaceholder;
+    const height2 = isFloating ? (0, import_react_native_size_matters13.moderateScale)(variant === "text" ? 50 : 45) * (size === "large" ? 1.2 : size === "small" ? 0.8 : 1) : (0, import_react_native_size_matters13.moderateScale)(multiline ? 50 + (props.numberOfLines || 1) * 18 : 50);
+    const labelAnim = (0, import_react16.useRef)(
+      new import_react_native16.Animated.Value(
+        height2 / (0, import_react_native_size_matters13.moderateScale)(variant === "text" ? 2.5 : 3.2)
+      )
+    ).current;
+    import_react16.default.useEffect(() => {
+      if (!isFloating)
+        return;
+      if (labelOpen) {
+        import_react_native16.Animated.timing(labelAnim, {
+          toValue: (0, import_react_native_size_matters13.verticalScale)(variant === "text" ? 2 : 4),
+          duration: 300,
+          useNativeDriver: false
+        }).start();
+      } else {
+        import_react_native16.Animated.timing(labelAnim, {
+          toValue: height2 / (0, import_react_native_size_matters13.moderateScale)(variant === "text" ? 2.5 : 3.2),
+          duration: 300,
+          useNativeDriver: false
+        }).start();
+      }
+    }, [isFloating, labelOpen, variant, height2]);
+    const formProps = formPropsFromType(type, showPassword);
+    const handleDateConfirm = (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 : (0, import_react_native_size_matters13.moderateScale)(isFloating ? 15 : 10);
+    const containerBorderRadius = variant === "text" ? 0 : rounded ? 30 : isFloating ? 7 : 10;
+    const datePlaceholderColor = isFloating ? colors2.textSecondary.main : colors2.textSecondary.light;
+    const helperTextUnfocusedColor = isFloating ? colors2.textSecondary.main : "#fffa";
     const styles = import_react_native_size_matters13.ScaledSheet.create({
       root: {
-        marginBottom: (0, import_react_native_size_matters13.ms)(gutterBottom),
+        marginBottom: (0, import_react_native_size_matters13.ms)(gutterBottom ?? (isFloating ? 0 : 8)),
+        width: "100%",
         ...style
       },
       container: {
         height: height2,
         overflow: "hidden",
         flexDirection: "row",
-        borderColor: error ? colors2.error.main : focused ? colors2[color].main : colors2.white[4],
-        borderWidth: error ? 1 : focused ? 2 : 1,
+        backgroundColor: variant === "outlined" || variant === "text" ? "#fff0" : focused ? colors2.white[3] : colors2.white[2],
+        borderColor: error ? colors2.error.main : focused ? colors2[color].main : colors2.textSecondary.main,
+        borderWidth: error ? 1 : variant === "outlined" ? focused ? 2 : 0.5 : 0,
+        borderBottomWidth: variant === "text" ? 0.5 : void 0,
         width: "100%",
-        borderRadius: rounded ? 30 : 10,
+        borderRadius: containerBorderRadius,
         alignItems: multiline ? "flex-start" : "center",
         paddingVertical: multiline ? 10 : 0,
         ...inputStyles
@@ -1911,40 +1688,41 @@ var TextField2 = import_react16.default.forwardRef(
         fontSize: "14@s",
         flex: 1,
         alignSelf: "stretch",
-        paddingLeft: (0, import_react_native_size_matters13.moderateScale)(10),
+        paddingLeft: inputPadding,
         paddingRight: (0, import_react_native_size_matters13.moderateScale)(10),
+        ...isFloating ? { paddingTop: "11@vs", fontFamily: getFontFamily(400) } : {},
         color: disabled ? colors2.textSecondary.main : colors2.dark.main,
         zIndex: 10
-        // backgroundColor: "#284",
       },
       inputText: {
         fontSize: "14@ms",
-        color: colors2.dark.main,
-        paddingLeft: (0, import_react_native_size_matters13.moderateScale)(10)
-      },
-      placeholder: {
-        fontSize: "14@ms",
-        color: colors2.textSecondary.light,
-        paddingLeft: (0, import_react_native_size_matters13.moderateScale)(10)
+        flex: 1,
+        paddingLeft: inputPadding,
+        ...isFloating ? { paddingTop: "13@ms" } : {}
       },
       dateContent: {
         flexDirection: "row",
         alignItems: "center",
         flex: 1,
-        paddingHorizontal: (0, import_react_native_size_matters13.moderateScale)(10),
-        paddingTop: multiline ? 4 : 0
-      },
-      dateText: {
-        fontSize: "14@ms",
-        flex: 1
-      },
-      datePlaceholder: {
-        color: colors2.textSecondary.light
+        paddingLeft: inputPadding,
+        paddingRight: (0, import_react_native_size_matters13.moderateScale)(10),
+        paddingTop: isFloating ? variant === "text" ? (0, import_react_native_size_matters13.ms)(13) : (0, import_react_native_size_matters13.ms)(12) : multiline ? 4 : 0
       },
-      label: {},
+      dateText: { fontSize: "14@ms", flex: 1 },
+      datePlaceholder: { color: datePlaceholderColor },
+      ...isFloating ? {
+        label: {
+          fontFamily: getFontFamily(400),
+          position: "absolute",
+          left: variant === "text" ? 0 : (0, import_react_native_size_matters13.moderateScale)(15),
+          fontSize: labelOpen ? "10@s" : "13@s",
+          color: focused ? colors2[color].main : colors2.textSecondary.main
+        }
+      } : {},
       helperText: {
         paddingHorizontal: "15@s",
-        color: focused ? colors2[color].dark : "#fffa",
+        flex: 1,
+        color: focused ? colors2[color].dark : helperTextUnfocusedColor,
         paddingTop: "4@ms"
       },
       error: {
@@ -1954,69 +1732,16 @@ var TextField2 = import_react16.default.forwardRef(
         flexDirection: "row",
         alignItems: "center"
       },
-      errorText: {
-        fontSize: 12,
-        marginLeft: 10
+      errorText: { fontSize: 12, marginLeft: 10 },
+      placeholder: {
+        fontSize: "14@ms",
+        color: colors2.textSecondary.light,
+        paddingLeft: inputPadding
       }
     });
-    const formProps = 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 /* @__PURE__ */ 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);
-      return isNaN(fallback.getTime()) ? /* @__PURE__ */ new Date() : fallback;
-    };
-    const handleDateConfirm = (date) => {
-      const year = date.getFullYear();
-      const month = `${date.getMonth() + 1}`.padStart(2, "0");
-      const day = `${date.getDate()}`.padStart(2, "0");
-      const dateString = `${year}-${month}-${day}`;
-      onChangeText?.(dateString);
-      setDatePickerVisible(false);
-      setFocused(false);
-    };
-    const handleContainerPress = () => {
-      if (disabled)
-        return;
-      setFocused(true);
-      if (isDate) {
-        onFocus();
-        setDatePickerVisible(true);
-      }
-    };
-    return /* @__PURE__ */ import_react16.default.createElement(import_react16.default.Fragment, null, /* @__PURE__ */ import_react16.default.createElement(import_react_native16.View, { style: styles.root }, label && /* @__PURE__ */ import_react16.default.createElement(
+    const selectedOption = options?.find((cur) => cur.value === value);
+    const showPasswordToggle = type === "password" && !end && !options && !isDate;
+    return /* @__PURE__ */ import_react16.default.createElement(import_react16.default.Fragment, null, /* @__PURE__ */ import_react16.default.createElement(import_react_native16.View, { style: styles.root }, isFloating ? null : label != null && label !== "" ? /* @__PURE__ */ import_react16.default.createElement(
       Typography_default,
       {
         variant: "body2",
@@ -2025,22 +1750,61 @@ var TextField2 = import_react16.default.forwardRef(
         ...labelProps
       },
       label
-    ), /* @__PURE__ */ import_react16.default.createElement(
+    ) : null, /* @__PURE__ */ import_react16.default.createElement(
       import_react_native16.TouchableOpacity,
       {
         onPress: handleContainerPress,
-        style: styles.container
+        style: styles.container,
+        activeOpacity: 1
       },
-      /* @__PURE__ */ import_react16.default.createElement(import_react_native16.View, { style: { marginTop: multiline ? 5 : 0 } }, start),
-      options ? /* @__PURE__ */ import_react16.default.createElement(import_react16.default.Fragment, null, value ? /* @__PURE__ */ import_react16.default.createElement(Typography_default, { style: styles.inputText }, options.find((cur) => cur.value === value)?.label) : /* @__PURE__ */ import_react16.default.createElement(Typography_default, { style: styles.placeholder }, placeholder), /* @__PURE__ */ import_react16.default.createElement(
-        import_vector_icons8.Ionicons,
+      isFloating && label != null && label !== "" ? /* @__PURE__ */ import_react16.default.createElement(import_react_native16.Animated.Text, { style: { ...styles.label, top: labelAnim } }, label) : null,
+      /* @__PURE__ */ import_react16.default.createElement(import_react_native16.View, { style: { marginTop: multiline && !isFloating ? 5 : 0 } }, start),
+      options ? /* @__PURE__ */ import_react16.default.createElement(
+        import_react_native16.View,
         {
-          name: "chevron-down",
-          size: 24,
-          style: { marginLeft: "auto", marginRight: 15 },
-          color: colors2.dark.light
-        }
-      )) : isDate ? /* @__PURE__ */ import_react16.default.createElement(import_react_native16.View, { style: styles.dateContent }, /* @__PURE__ */ import_react16.default.createElement(
+          style: isFloating ? {
+            flex: 1,
+            alignItems: "center",
+            flexDirection: "row"
+          } : void 0
+        },
+        isFloating && selectedOption?.start ? /* @__PURE__ */ import_react16.default.createElement(
+          import_react_native16.View,
+          {
+            style: {
+              paddingTop: variant !== "outlined" ? (0, import_react_native_size_matters13.ms)(13) : 0,
+              paddingRight: 10
+            }
+          },
+          selectedOption.start
+        ) : null,
+        selectedOption ? /* @__PURE__ */ import_react16.default.createElement(Typography_default, { style: styles.inputText }, selectedOption.label) : !isFloating && /* @__PURE__ */ import_react16.default.createElement(Typography_default, { style: styles.placeholder }, placeholder),
+        isFloating ? /* @__PURE__ */ import_react16.default.createElement(
+          import_react_native16.View,
+          {
+            style: {
+              marginRight: variant === "text" ? 0 : 20,
+              paddingTop: variant === "text" ? (0, import_react_native_size_matters13.ms)(13) : 0
+            }
+          },
+          /* @__PURE__ */ import_react16.default.createElement(
+            import_vector_icons8.Ionicons,
+            {
+              name: "chevron-down",
+              color: colors2.textSecondary.main,
+              size: 24
+            }
+          )
+        ) : /* @__PURE__ */ import_react16.default.createElement(
+          import_vector_icons8.Ionicons,
+          {
+            name: "chevron-down",
+            size: 24,
+            style: { marginLeft: "auto", marginRight: 15 },
+            color: colors2.dark.light
+          }
+        )
+      ) : isDate ? /* @__PURE__ */ import_react16.default.createElement(import_react_native16.View, { style: styles.dateContent }, /* @__PURE__ */ import_react16.default.createElement(
         Typography_default,
         {
           style: [
@@ -2071,21 +1835,30 @@ var TextField2 = import_react16.default.forwardRef(
           },
           value,
           onChangeText,
-          key: showPassword ? "show" : "hide",
+          key: type === "password" ? showPassword ? "show" : "hide" : void 0,
           keyboardType,
-          placeholderTextColor: colors2.textSecondary.light,
+          placeholderTextColor: isFloating ? colors2.textSecondary.main : colors2.textSecondary.light,
           editable: !disabled,
           placeholder,
           selectTextOnFocus: !disabled,
           onSubmitEditing,
           multiline,
-          extAlignVertical: multiline ? "top" : "center",
+          textAlignVertical: multiline ? "top" : "center",
           ...formProps,
           ...props,
           style: styles.input
         }
       ),
-      end ? /* @__PURE__ */ import_react16.default.createElement(import_react_native16.View, { style: { marginRight: 20 } }, end) : type === "password" && /* @__PURE__ */ import_react16.default.createElement(
+      end && !options ? /* @__PURE__ */ import_react16.default.createElement(
+        import_react_native16.View,
+        {
+          style: {
+            marginRight: 20,
+            paddingTop: isFloating && variant === "text" ? (0, import_react_native_size_matters13.ms)(13) : 0
+          }
+        },
+        end
+      ) : showPasswordToggle ? /* @__PURE__ */ import_react16.default.createElement(
         import_react_native16.TouchableOpacity,
         {
           style: { marginRight: 20 },
@@ -2099,8 +1872,8 @@ var TextField2 = import_react16.default.forwardRef(
             color: colors2.textSecondary.main
           }
         )
-      )
-    ), helperText && /* @__PURE__ */ import_react16.default.createElement(
+      ) : null
+    ), helperText ? /* @__PURE__ */ import_react16.default.createElement(
       Typography_default,
       {
         color: "textSecondary",
@@ -2108,7 +1881,7 @@ var TextField2 = import_react16.default.forwardRef(
         variant: "caption"
       },
       helperText
-    ), error && /* @__PURE__ */ import_react16.default.createElement(import_react_native16.View, { style: styles.error }, /* @__PURE__ */ import_react16.default.createElement(import_vector_icons8.MaterialIcons, { name: "error", color: colors2.error.main, size: 16 }), /* @__PURE__ */ import_react16.default.createElement(Typography_default, { style: styles.errorText, color: "error" }, error))), options && /* @__PURE__ */ import_react16.default.createElement(
+    ) : null, error ? /* @__PURE__ */ import_react16.default.createElement(import_react_native16.View, { style: styles.error }, /* @__PURE__ */ import_react16.default.createElement(import_vector_icons8.MaterialIcons, { name: "error", color: colors2.error.main, size: 16 }), /* @__PURE__ */ import_react16.default.createElement(Typography_default, { style: styles.errorText, color: "error" }, error)) : null), options ? /* @__PURE__ */ import_react16.default.createElement(
       SelectMenu_default,
       {
         options,
@@ -2120,21 +1893,45 @@ var TextField2 = import_react16.default.forwardRef(
         onChange: onChangeText,
         ...selectMenuProps
       }
-    ), isDate && /* @__PURE__ */ import_react16.default.createElement(
+    ) : null, isDate ? /* @__PURE__ */ import_react16.default.createElement(
       import_react_native_modal_datetime_picker.default,
       {
         isVisible: datePickerVisible,
         mode: "date",
-        date: parseDateValue(),
+        date: parseDateValue(value),
         onConfirm: handleDateConfirm,
         onCancel: () => {
           setDatePickerVisible(false);
           setFocused(false);
         }
       }
-    ));
+    ) : null);
   }
 );
+TextFieldBase.displayName = "TextFieldBase";
+var TextField = import_react16.default.forwardRef((props, ref) => /* @__PURE__ */ import_react16.default.createElement(
+  TextFieldBase,
+  {
+    ...props,
+    ref,
+    labelVariant: "floating",
+    gutterBottom: props.gutterBottom ?? 0,
+    placeholder: props.placeholder ?? ""
+  }
+));
+TextField.displayName = "TextField";
+var TextField2 = import_react16.default.forwardRef(
+  (props, ref) => /* @__PURE__ */ import_react16.default.createElement(
+    TextFieldBase,
+    {
+      ...props,
+      ref,
+      labelVariant: "external",
+      gutterBottom: props.gutterBottom ?? 8
+    }
+  )
+);
+TextField2.displayName = "TextField2";
 var TextField_default = TextField;
 
 // ../src/Components/Locator.tsx
@@ -3053,6 +2850,7 @@ var next_default = HoddyUI;
   Spinner,
   TextField,
   TextField2,
+  TextFieldBase,
   Typography,
   UIThemeContext,
   UIThemeProvider,