@hoddy-ui/next 2.5.87 → 2.5.89

package/dist/index.mjs

@@ -1584,7 +1584,11 @@ var TextFieldBase = React15.forwardRef(
     const isFloating = labelVariant === "floating";
     const hasPlaceholder = placeholder != null && String(placeholder).trim() !== "";
     const labelOpen = focused || value || isFloating && hasPlaceholder;
-    const height2 = isFloating ? moderateScale2(variant === "text" ? 50 : 45) * (size === "large" ? 1.2 : size === "small" ? 0.8 : 1) : moderateScale2(multiline ? 50 + (props.numberOfLines || 1) * 18 : 50);
+    const baseHeight = moderateScale2(
+      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 = useRef2(
       new Animated3.Value(
         height2 / moderateScale2(variant === "text" ? 2.5 : 3.2)
@@ -1627,8 +1631,7 @@ var TextFieldBase = React15.forwardRef(
     };
     const inputPadding = variant === "text" ? 0 : moderateScale2(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 = ScaledSheet12.create({
       root: {
         marginBottom: ms7(gutterBottom ?? (isFloating ? 0 : 8)),
@@ -1639,9 +1642,9 @@ var TextFieldBase = React15.forwardRef(
         height: height2,
         overflow: "hidden",
         flexDirection: "row",
-        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,
+        backgroundColor: variant === "outlined" || variant === "text" ? "#fff0" : focused ? colors2.white[2] + "dd" : colors2.white[2],
+        borderColor: error ? colors2.error.main : isFloating && focused && variant === "contained" ? colors2[color].light : focused ? colors2[color].main : colors2.textSecondary.main,
+        borderWidth: error ? 1 : isFloating && focused && variant === "contained" ? 1 : variant === "outlined" ? focused ? 2 : 0.5 : 0,
         borderBottomWidth: variant === "text" ? 0.5 : void 0,
         width: "100%",
         borderRadius: containerBorderRadius,
@@ -1676,10 +1679,11 @@ var TextFieldBase = React15.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 : moderateScale2(15),
+          left: inputPadding,
           fontSize: labelOpen ? "10@s" : "13@s",
           color: focused ? colors2[color].main : colors2.textSecondary.main
         }
@@ -1687,7 +1691,7 @@ var TextFieldBase = React15.forwardRef(
       helperText: {
         paddingHorizontal: "15@s",
         flex: 1,
-        color: focused ? colors2[color].dark : helperTextUnfocusedColor,
+        color: focused ? colors2[color].main : colors2.textSecondary.main,
         paddingTop: "4@ms"
       },
       error: {
@@ -1722,16 +1726,22 @@ var TextFieldBase = React15.forwardRef(
         style: styles.container,
         activeOpacity: 1
       },
-      isFloating && label != null && label !== "" ? /* @__PURE__ */ React15.createElement(Animated3.Text, { style: { ...styles.label, top: labelAnim } }, label) : null,
       /* @__PURE__ */ React15.createElement(View10, { style: { marginTop: multiline && !isFloating ? 5 : 0 } }, start),
-      options ? /* @__PURE__ */ React15.createElement(
+      isFloating ? /* @__PURE__ */ React15.createElement(View10, { style: styles.contentWrapper }, label != null && label !== "" ? /* @__PURE__ */ React15.createElement(
+        Animated3.Text,
+        {
+          style: { ...styles.label, top: labelAnim },
+          pointerEvents: "none"
+        },
+        label
+      ) : null, options ? /* @__PURE__ */ React15.createElement(
         View10,
         {
-          style: isFloating ? {
+          style: {
             flex: 1,
             alignItems: "center",
             flexDirection: "row"
-          } : void 0
+          }
         },
         isFloating && selectedOption?.start ? /* @__PURE__ */ React15.createElement(
           View10,
@@ -1802,7 +1812,59 @@ var TextFieldBase = React15.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__ */ React15.createElement(React15.Fragment, null, selectedOption ? /* @__PURE__ */ React15.createElement(Typography_default, { style: styles.inputText }, selectedOption.label) : /* @__PURE__ */ React15.createElement(Typography_default, { style: styles.placeholder }, placeholder), /* @__PURE__ */ React15.createElement(
+        Ionicons4,
+        {
+          name: "chevron-down",
+          size: 24,
+          style: { marginLeft: "auto", marginRight: 15 },
+          color: colors2.dark.light
+        }
+      )) : isDate ? /* @__PURE__ */ React15.createElement(View10, { style: styles.dateContent }, /* @__PURE__ */ React15.createElement(
+        Typography_default,
+        {
+          style: [
+            styles.dateText,
+            !value ? styles.datePlaceholder : void 0
+          ],
+          color: value ? "dark" : "textSecondary"
+        },
+        value || placeholder
+      ), /* @__PURE__ */ React15.createElement(View10, { style: { marginLeft: 8 } }, end ?? /* @__PURE__ */ React15.createElement(
+        Ionicons4,
+        {
+          name: "calendar-outline",
+          size: 22,
+          color: colors2.textSecondary.main
+        }
+      ))) : /* @__PURE__ */ React15.createElement(
+        TextInput2,
+        {
+          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,
@@ -1838,15 +1900,7 @@ var TextFieldBase = React15.forwardRef(
           }
         )
       ) : null
-    ), helperText ? /* @__PURE__ */ React15.createElement(
-      Typography_default,
-      {
-        color: "textSecondary",
-        style: styles.helperText,
-        variant: "caption"
-      },
-      helperText
-    ) : null, error ? /* @__PURE__ */ React15.createElement(View10, { style: styles.error }, /* @__PURE__ */ React15.createElement(MaterialIcons5, { name: "error", color: colors2.error.main, size: 16 }), /* @__PURE__ */ React15.createElement(Typography_default, { style: styles.errorText, color: "error" }, error)) : null), options ? /* @__PURE__ */ React15.createElement(
+    ), helperText ? /* @__PURE__ */ React15.createElement(Typography_default, { style: styles.helperText, variant: "caption" }, helperText) : null, error ? /* @__PURE__ */ React15.createElement(View10, { style: styles.error }, /* @__PURE__ */ React15.createElement(MaterialIcons5, { name: "error", color: colors2.error.main, size: 16 }), /* @__PURE__ */ React15.createElement(Typography_default, { style: styles.errorText, color: "error" }, error)) : null), options ? /* @__PURE__ */ React15.createElement(
       SelectMenu_default,
       {
         options,