@hoddy-ui/core 2.5.46 → 2.5.48

package/next/dist/index.d.mts

@@ -54,6 +54,7 @@ interface AvatarProps {
     source?: any;
     size?: number;
     style?: ViewStyle;
+    icon?: ReactNode;
 }
 interface ButtonProps {
     color?: colorTypes;
@@ -88,7 +89,7 @@ interface FlashMessageProps {
         onPress?: () => void;
     }>;
     duration?: number;
-    type?: "success" | "warning" | "error";
+    type?: "success" | "warning" | "error" | "info" | "default";
 }
 interface LinkButtonProps {
     title: string;
@@ -205,7 +206,7 @@ interface TextFieldProps extends TextInputProps {
     variant?: "outlined" | "text" | "contained";
     color?: colorTypes;
     size?: "small" | "normal" | "large";
-    type?: "email" | "tel" | "password" | "text" | "number" | "search";
+    type?: "email" | "tel" | "password" | "text" | "number" | "search" | "date";
     helperText?: string;
     value: any;
     start?: ReactNode;

package/next/dist/index.d.ts

@@ -54,6 +54,7 @@ interface AvatarProps {
     source?: any;
     size?: number;
     style?: ViewStyle;
+    icon?: ReactNode;
 }
 interface ButtonProps {
     color?: colorTypes;
@@ -88,7 +89,7 @@ interface FlashMessageProps {
         onPress?: () => void;
     }>;
     duration?: number;
-    type?: "success" | "warning" | "error";
+    type?: "success" | "warning" | "error" | "info" | "default";
 }
 interface LinkButtonProps {
     title: string;
@@ -205,7 +206,7 @@ interface TextFieldProps extends TextInputProps {
     variant?: "outlined" | "text" | "contained";
     color?: colorTypes;
     size?: "small" | "normal" | "large";
-    type?: "email" | "tel" | "password" | "text" | "number" | "search";
+    type?: "email" | "tel" | "password" | "text" | "number" | "search" | "date";
     helperText?: string;
     value: any;
     start?: ReactNode;

package/next/dist/index.js

@@ -315,7 +315,7 @@ var Typography = (0, import_react.forwardRef)(
     const config2 = getConfig();
     const customFontSizes = config2.TYPOGRAPHY?.fontSizes;
     const baseFontSize = customFontSizes?.[variant] ?? DEFAULT_FONT_SIZES[variant];
-    const f = fontSize || baseFontSize;
+    const f = fontSize || style?.fontSize || baseFontSize;
     const lh = lineHeight || f * 1.2;
     const styles = import_react_native.StyleSheet.create({
       text: {
@@ -411,6 +411,7 @@ var FlashMessage = () => {
       opacity: opacity.value
     };
   });
+  const textColor = type === "default" ? "#fff" : colors2[type].text;
   const styles = import_react_native_size_matters2.ScaledSheet.create({
     root: {
       position: "absolute",
@@ -419,7 +420,7 @@ var FlashMessage = () => {
       left: 0,
       paddingTop: top + 10,
       paddingHorizontal: "15@ms",
-      backgroundColor: colors2[type].main,
+      backgroundColor: type === "default" ? "#333" : colors2[type].main,
       width: "100%",
       borderBottomLeftRadius: 10,
       borderBottomRightRadius: 10,
@@ -443,10 +444,10 @@ var FlashMessage = () => {
       variant: "h6",
       fontWeight: 600,
       gutterBottom: 3,
-      style: { color: "#fff" }
+      color: textColor
     },
     message?.title
-  ), /* @__PURE__ */ import_react2.default.createElement(Typography_default, { style: { color: "#fff" } }, message?.message)))), message?.actions?.map((cur, i) => /* @__PURE__ */ import_react2.default.createElement(
+  ), /* @__PURE__ */ import_react2.default.createElement(Typography_default, { color: textColor }, message?.message)))), message?.actions?.map((cur, i) => /* @__PURE__ */ import_react2.default.createElement(
     import_react_native2.TouchableOpacity,
     {
       key: i,
@@ -703,7 +704,8 @@ var Avatar = ({
   variant = "contained",
   source,
   size = 48,
-  style = {}
+  style = {},
+  icon
 }) => {
   const colors2 = useColors();
   const [imageError, setImageError] = (0, import_react7.useState)(false);
@@ -733,7 +735,7 @@ var Avatar = ({
       source,
       onError: () => setImageError(true)
     }
-  ) : label ? /* @__PURE__ */ import_react7.default.createElement(Typography_default, { style: { color: colors2[color].text } }, label[0]) : /* @__PURE__ */ import_react7.default.createElement(import_vector_icons2.AntDesign, { name: "user", color: "#fff", size: Math.round(size / 1.5) }));
+  ) : label ? /* @__PURE__ */ import_react7.default.createElement(Typography_default, { style: { color: colors2[color].text } }, label[0]) : icon ? icon : /* @__PURE__ */ import_react7.default.createElement(import_vector_icons2.Ionicons, { name: "person", color: "#fff", size: Math.round(size / 1.5) }));
 };
 var Avatar_default = Avatar;
 
@@ -1401,6 +1403,7 @@ var import_vector_icons8 = require("@expo/vector-icons");
 var import_react16 = __toESM(require("react"));
 var import_react_native16 = require("react-native");
 var import_react_native_size_matters13 = require("react-native-size-matters");
+var import_react_native_modal_datetime_picker = __toESM(require("react-native-modal-datetime-picker"));
 
 // ../src/Components/SelectMenu.tsx
 var import_vector_icons7 = require("@expo/vector-icons");
@@ -1535,6 +1538,7 @@ var TextField = ({
   color = "primary",
   value,
   type,
+  placeholder = "",
   helperText,
   onChangeText,
   onSubmitEditing = () => {
@@ -1558,6 +1562,8 @@ var TextField = ({
 }) => {
   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))
@@ -1614,6 +1620,21 @@ var TextField = ({
       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",
@@ -1659,10 +1680,46 @@ var TextField = ({
     autoCapitalize: "none",
     textContentType: "password"
   } : {};
+  const parseDateValue = () => {
+    if (!value)
+      return /* @__PURE__ */ 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()) ? /* @__PURE__ */ new Date() : fallback;
+  };
+  const handleDateConfirm = (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 /* @__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: () => setFocused(true),
+      onPress: handleContainerPress,
       style: styles.container
     },
     /* @__PURE__ */ import_react16.default.createElement(import_react_native16.Animated.Text, { style: { ...styles.label, top: labelAnim } }, label),
@@ -1683,7 +1740,24 @@ var TextField = ({
         options.find((cur) => cur.value === value)?.start
       ),
       /* @__PURE__ */ import_react16.default.createElement(Typography_default, { style: styles.inputText }, options.find((cur) => cur.value === value)?.label)
-    ) : /* @__PURE__ */ import_react16.default.createElement(
+    ) : 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: () => {
@@ -1753,6 +1827,18 @@ var TextField = ({
       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(
@@ -1763,6 +1849,7 @@ var TextField2 = import_react16.default.forwardRef(
     color = "primary",
     value,
     type,
+    placeholder,
     helperText,
     onChangeText,
     onSubmitEditing = () => {
@@ -1778,7 +1865,6 @@ var TextField2 = import_react16.default.forwardRef(
     style = {},
     inputStyles = {},
     gutterBottom = 8,
-    placeholder,
     end,
     options,
     multiline,
@@ -1788,6 +1874,8 @@ var TextField2 = import_react16.default.forwardRef(
     const colors2 = useColors();
     const [focused, _setFocused] = (0, import_react16.useState)(false);
     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
     );
@@ -1838,6 +1926,20 @@ var TextField2 = import_react16.default.forwardRef(
         color: colors2.textSecondary.light,
         paddingLeft: (0, import_react_native_size_matters13.moderateScale)(10)
       },
+      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
+      },
       label: {},
       helperText: {
         paddingHorizontal: "15@s",
@@ -1876,6 +1978,42 @@ var TextField2 = import_react16.default.forwardRef(
       autoCapitalize: "none",
       textContentType: "password"
     } : {};
+    const parseDateValue = () => {
+      if (!value)
+        return /* @__PURE__ */ 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()) ? /* @__PURE__ */ new Date() : fallback;
+    };
+    const handleDateConfirm = (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 /* @__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(
       Typography_default,
       {
@@ -1888,7 +2026,7 @@ var TextField2 = import_react16.default.forwardRef(
     ), /* @__PURE__ */ import_react16.default.createElement(
       import_react_native16.TouchableOpacity,
       {
-        onPress: () => setFocused(true),
+        onPress: handleContainerPress,
         style: styles.container
       },
       /* @__PURE__ */ import_react16.default.createElement(import_react_native16.View, { style: { marginTop: multiline ? 5 : 0 } }, start),
@@ -1900,7 +2038,24 @@ var TextField2 = import_react16.default.forwardRef(
           style: { marginLeft: "auto", marginRight: 15 },
           color: colors2.dark.light
         }
-      )) : /* @__PURE__ */ import_react16.default.createElement(
+      )) : 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,