@hoddy-ui/next 2.5.87 → 2.5.88

package/dist/index.js

@@ -1619,7 +1619,11 @@ var TextFieldBase = import_react16.default.forwardRef(
     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 baseHeight = (0, import_react_native_size_matters13.moderateScale)(
+      multiline ? 50 + (props.numberOfLines || 1) * 18 : 50
+    );
+    const sizeMultiplier = isFloating ? size === "large" ? 1.2 : size === "small" ? 0.8 : 1 : 1;
+    const height2 = baseHeight * sizeMultiplier;
     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)
@@ -1662,8 +1666,7 @@ var TextFieldBase = import_react16.default.forwardRef(
     };
     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 datePlaceholderColor = colors2.textSecondary.light;
     const styles = import_react_native_size_matters13.ScaledSheet.create({
       root: {
         marginBottom: (0, import_react_native_size_matters13.ms)(gutterBottom ?? (isFloating ? 0 : 8)),
@@ -1711,10 +1714,11 @@ var TextFieldBase = import_react16.default.forwardRef(
       dateText: { fontSize: "14@ms", flex: 1 },
       datePlaceholder: { color: datePlaceholderColor },
       ...isFloating ? {
+        contentWrapper: { flex: 1, position: "relative" },
         label: {
           fontFamily: getFontFamily(400),
           position: "absolute",
-          left: variant === "text" ? 0 : (0, import_react_native_size_matters13.moderateScale)(15),
+          left: inputPadding,
           fontSize: labelOpen ? "10@s" : "13@s",
           color: focused ? colors2[color].main : colors2.textSecondary.main
         }
@@ -1722,7 +1726,7 @@ var TextFieldBase = import_react16.default.forwardRef(
       helperText: {
         paddingHorizontal: "15@s",
         flex: 1,
-        color: focused ? colors2[color].dark : helperTextUnfocusedColor,
+        color: focused ? colors2[color].dark : colors2.textSecondary.main,
         paddingTop: "4@ms"
       },
       error: {
@@ -1757,16 +1761,22 @@ var TextFieldBase = import_react16.default.forwardRef(
         style: styles.container,
         activeOpacity: 1
       },
-      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(
+      isFloating ? /* @__PURE__ */ import_react16.default.createElement(import_react_native16.View, { style: styles.contentWrapper }, label != null && label !== "" ? /* @__PURE__ */ import_react16.default.createElement(
+        import_react_native16.Animated.Text,
+        {
+          style: { ...styles.label, top: labelAnim },
+          pointerEvents: "none"
+        },
+        label
+      ) : null, options ? /* @__PURE__ */ import_react16.default.createElement(
         import_react_native16.View,
         {
-          style: isFloating ? {
+          style: {
             flex: 1,
             alignItems: "center",
             flexDirection: "row"
-          } : void 0
+          }
         },
         isFloating && selectedOption?.start ? /* @__PURE__ */ import_react16.default.createElement(
           import_react_native16.View,
@@ -1837,7 +1847,59 @@ var TextFieldBase = import_react16.default.forwardRef(
           onChangeText,
           key: type === "password" ? showPassword ? "show" : "hide" : void 0,
           keyboardType,
-          placeholderTextColor: isFloating ? colors2.textSecondary.main : colors2.textSecondary.light,
+          placeholderTextColor: colors2.textSecondary.light,
+          editable: !disabled,
+          placeholder,
+          selectTextOnFocus: !disabled,
+          onSubmitEditing,
+          multiline,
+          textAlignVertical: multiline ? "top" : "center",
+          ...formProps,
+          ...props,
+          style: styles.input
+        }
+      )) : options ? /* @__PURE__ */ import_react16.default.createElement(import_react16.default.Fragment, null, selectedOption ? /* @__PURE__ */ import_react16.default.createElement(Typography_default, { style: styles.inputText }, selectedOption.label) : /* @__PURE__ */ import_react16.default.createElement(Typography_default, { style: styles.placeholder }, placeholder), /* @__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: [
+            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,
+        {
+          ref,
+          onFocus: () => {
+            onFocus();
+            setFocused(true);
+          },
+          onBlur: () => {
+            onBlur();
+            setFocused(false);
+          },
+          value,
+          onChangeText,
+          key: type === "password" ? showPassword ? "show" : "hide" : void 0,
+          keyboardType,
+          placeholderTextColor: colors2.textSecondary.light,
           editable: !disabled,
           placeholder,
           selectTextOnFocus: !disabled,
@@ -1873,15 +1935,7 @@ var TextFieldBase = import_react16.default.forwardRef(
           }
         )
       ) : null
-    ), helperText ? /* @__PURE__ */ import_react16.default.createElement(
-      Typography_default,
-      {
-        color: "textSecondary",
-        style: styles.helperText,
-        variant: "caption"
-      },
-      helperText
-    ) : 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(
+    ), helperText ? /* @__PURE__ */ import_react16.default.createElement(Typography_default, { style: styles.helperText, variant: "caption" }, helperText) : 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,