@hoddy-ui/core 2.5.47 → 2.5.49

package/next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hoddy-ui/next",
-  "version": "2.5.77",
+  "version": "2.5.81",
   "description": "Core rich react native components written in typescript, with support for expo-router",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -20,6 +20,7 @@
   "peerDependencies": {
     "@expo/vector-icons": ">=13.0.0",
     "@react-native-async-storage/async-storage": ">=1.18.1",
+    "@react-native-community/datetimepicker": "8.4.4",
     "@types/react": ">=18.2.6",
     "@types/react-native": ">=0.72.0",
     "expo-haptics": ">=12.4.0",
@@ -29,6 +30,7 @@
     "expo-system-ui": ">=2.2.1",
     "react": ">=18.2.0",
     "react-native": ">=0.71.8",
+    "react-native-modal-datetime-picker": "^15.0.0",
     "react-native-reanimated": ">=3.17.4",
     "react-native-safe-area-context": ">=4.5.3",
     "typescript": ">=5.0.4"
@@ -41,7 +43,7 @@
     "kinghoddy"
   ],
   "dependencies": {
-    "react-native-size-matters": "^0.4.0"
+    "react-native-size-matters": "^0.4.2"
   },
   "devDependencies": {
     "tsup": "^7.2.0"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hoddy-ui/core",
-  "version": "2.5.47",
+  "version": "2.5.49",
   "description": "Core rich react native components written in typescript",
   "main": "index.ts",
   "repository": {
@@ -14,6 +14,7 @@
   "peerDependencies": {
     "@expo/vector-icons": ">=13.0.0",
     "@react-native-async-storage/async-storage": ">=1.18.1",
+    "@react-native-community/datetimepicker": "8.4.4",
     "@react-navigation/native": ">=6.1.6",
     "@types/react": ">=18.2.6",
     "@types/react-native": ">=0.72.0",
@@ -23,6 +24,7 @@
     "expo-system-ui": ">=2.2.1",
     "react": ">=18.2.0",
     "react-native": ">=0.71.8",
+    "react-native-modal-datetime-picker": "^15.0.0",
     "react-native-reanimated": ">=3.17.4",
     "react-native-safe-area-context": ">=4.5.3",
     "typescript": ">=5.0.4"
@@ -39,6 +41,5 @@
   },
   "publishConfig": {
     "access": "public"
-  },
-  "devDependencies": {}
+  }
 }

package/src/Components/FlashMessage.tsx

@@ -102,6 +102,8 @@ const FlashMessage: React.FC = () => {
     };
   });
 
+  const textColor = type === "default" ? "#fff" : colors[type].text;
+
   const styles = ScaledSheet.create({
     root: {
       position: "absolute",
@@ -110,7 +112,7 @@ const FlashMessage: React.FC = () => {
       left: 0,
       paddingTop: top + 10,
       paddingHorizontal: "15@ms",
-      backgroundColor: colors[type].main,
+      backgroundColor: type === "default" ? "#333" : colors[type].main,
       width: "100%",
       borderBottomLeftRadius: 10,
       borderBottomRightRadius: 10,
@@ -140,14 +142,12 @@ const FlashMessage: React.FC = () => {
                 variant="h6"
                 fontWeight={600}
                 gutterBottom={3}
-                style={{ color: "#fff" }}
+                color={textColor}
               >
                 {message?.title}
               </Typography>
             )}
-            <Typography style={{ color: "#fff" }}>
-              {message?.message}
-            </Typography>
+            <Typography color={textColor}>{message?.message}</Typography>
           </View>
           {/* <MaterialIcons color="#fff" size={36} name="error-outline" /> */}
         </View>

package/src/Components/TextField.tsx

@@ -7,6 +7,7 @@ import {
   TouchableOpacity,
   View,
 } from "react-native";
+import DateTimePickerModal from "react-native-modal-datetime-picker";
 import {
   ScaledSheet,
   moderateScale,
@@ -26,6 +27,7 @@ const TextField: React.FC<TextFieldProps> = ({
   color = "primary",
   value,
   type,
+  placeholder = "",
   helperText,
   onChangeText,
   onSubmitEditing = () => {},
@@ -46,12 +48,14 @@ const TextField: React.FC<TextFieldProps> = ({
 }) => {
   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);
 
   const labelAnim = useRef(
-    new Animated.Value(height / moderateScale(variant === "text" ? 2.5 : 3.2))
+    new Animated.Value(height / moderateScale(variant === "text" ? 2.5 : 3.2)),
   ).current;
 
   React.useEffect(() => {
@@ -83,14 +87,14 @@ const TextField: React.FC<TextFieldProps> = ({
         variant === "outlined" || variant === "text"
           ? "#fff0"
           : focused
-          ? colors.white[3]
-          : colors.white[4],
+            ? colors.white[3]
+            : colors.white[4],
       flexDirection: "row",
       borderColor: error
         ? colors.error.main
         : focused
-        ? colors[color].main
-        : colors.textSecondary.main,
+          ? colors[color].main
+          : colors.textSecondary.main,
       borderWidth: error ? 1 : variant === "outlined" ? (focused ? 2 : 0.5) : 0,
       borderBottomWidth: variant === "text" ? 0.5 : undefined,
       width: "100%",
@@ -116,6 +120,21 @@ const TextField: React.FC<TextFieldProps> = ({
       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",
@@ -150,33 +169,67 @@ const TextField: React.FC<TextFieldProps> = ({
           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",
-        }
-      : {};
+        ? {
+            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 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={() => setFocused(true)}
+          onPress={handleContainerPress}
           style={styles.container}
         >
           <Animated.Text style={{ ...styles.label, top: labelAnim }}>
@@ -202,6 +255,27 @@ const TextField: React.FC<TextFieldProps> = ({
                 {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={() => {
@@ -279,6 +353,18 @@ const TextField: React.FC<TextFieldProps> = ({
           {...selectMenuProps}
         />
       )}
+      {isDate && (
+        <DateTimePickerModal
+          isVisible={datePickerVisible}
+          mode="date"
+          date={parseDateValue()}
+          onConfirm={handleDateConfirm}
+          onCancel={() => {
+            setDatePickerVisible(false);
+            setFocused(false);
+          }}
+        />
+      )}
     </>
   );
 };
@@ -292,6 +378,7 @@ export const TextField2 = React.forwardRef<TextInput, TextFieldProps>(
       color = "primary",
       value,
       type,
+      placeholder,
       helperText,
       onChangeText,
       onSubmitEditing = () => {},
@@ -304,21 +391,22 @@ export const TextField2 = React.forwardRef<TextInput, TextFieldProps>(
       style = {},
       inputStyles = {},
       gutterBottom = 8,
-      placeholder,
       end,
       options,
       multiline,
       selectMenuProps,
       ...props
     },
-    ref
+    ref,
   ) => {
     const colors = useColors();
     const [focused, _setFocused] = useState(false);
     const [showPassword, setShowPassword] = useState(false);
+    const [datePickerVisible, setDatePickerVisible] = useState(false);
+    const isDate = type === "date";
 
     const height = moderateScale(
-      multiline ? 50 + (props.numberOfLines || 1) * 18 : 50
+      multiline ? 50 + (props.numberOfLines || 1) * 18 : 50,
     );
 
     const setFocused = (value: boolean) => {
@@ -344,8 +432,8 @@ export const TextField2 = React.forwardRef<TextInput, TextFieldProps>(
         borderColor: error
           ? colors.error.main
           : focused
-          ? colors[color].main
-          : colors.white[4],
+            ? colors[color].main
+            : colors.white[4],
         borderWidth: error ? 1 : focused ? 2 : 1,
         width: "100%",
         borderRadius: rounded ? 30 : 10,
@@ -373,6 +461,20 @@ export const TextField2 = React.forwardRef<TextInput, TextFieldProps>(
         color: colors.textSecondary.light,
         paddingLeft: moderateScale(10),
       },
+      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,
+      },
       label: {},
       helperText: {
         paddingHorizontal: "15@s",
@@ -400,28 +502,62 @@ export const TextField2 = React.forwardRef<TextInput, TextFieldProps>(
             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",
-          }
-        : {};
+          ? {
+              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 handleContainerPress = () => {
+      if (disabled) return;
+      setFocused(true);
+      if (isDate) {
+        onFocus();
+        setDatePickerVisible(true);
+      }
+    };
     return (
       <>
         <View style={styles.root}>
@@ -436,7 +572,7 @@ export const TextField2 = React.forwardRef<TextInput, TextFieldProps>(
             </Typography>
           )}
           <TouchableOpacity
-            onPress={() => setFocused(true)}
+            onPress={handleContainerPress}
             style={styles.container}
           >
             <View style={{ marginTop: multiline ? 5 : 0 }}>{start}</View>
@@ -459,6 +595,27 @@ export const TextField2 = React.forwardRef<TextInput, TextFieldProps>(
                   color={colors.dark.light}
                 />
               </>
+            ) : 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}
@@ -522,6 +679,18 @@ export const TextField2 = React.forwardRef<TextInput, TextFieldProps>(
             </View>
           )}
         </View>
+        {isDate && (
+          <DateTimePickerModal
+            isVisible={datePickerVisible}
+            mode="date"
+            date={parseDateValue()}
+            onConfirm={handleDateConfirm}
+            onCancel={() => {
+              setDatePickerVisible(false);
+              setFocused(false);
+            }}
+          />
+        )}
         {options && (
           <SelectMenu
             options={options}
@@ -536,7 +705,7 @@ export const TextField2 = React.forwardRef<TextInput, TextFieldProps>(
         )}
       </>
     );
-  }
+  },
 );
 
 export default TextField;

package/src/types.ts

@@ -113,7 +113,7 @@ export interface FlashMessageProps {
   title?: string;
   actions?: Array<{ title: string; onPress?: () => void }>;
   duration?: number;
-  type?: "success" | "warning" | "error";
+  type?: "success" | "warning" | "error" | "info" | "default";
 }
 export interface LinkButtonProps {
   title: string;
@@ -236,7 +236,14 @@ export 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;
@@ -265,15 +272,15 @@ export interface TypographyProps extends TextProps {
   textCase?: "capitalize" | "uppercase" | "lowercase" | undefined;
   lineHeight?: number;
   variant?:
-    | "caption"
-    | "body1"
-    | "body2"
-    | "h6"
-    | "h5"
-    | "h4"
-    | "h3"
-    | "h2"
-    | "h1";
+  | "caption"
+  | "body1"
+  | "body2"
+  | "h6"
+  | "h5"
+  | "h4"
+  | "h3"
+  | "h2"
+  | "h1";
   align?: "center" | "left" | "right";
   gutterBottom?: number;
   numberOfLines?: number;
@@ -352,36 +359,36 @@ interface BaseAnimatorProps {
 // Type-specific animation props using discriminated unions
 export type AnimatorProps =
   | (BaseAnimatorProps & {
-      type: "fade";
-      // No additional props for fade animation
-    })
+    type: "fade";
+    // No additional props for fade animation
+  })
   | (BaseAnimatorProps & {
-      type: "grow";
-      initialScale?: number;
-    })
+    type: "grow";
+    initialScale?: number;
+  })
   | (BaseAnimatorProps & {
-      type: "slide";
-      direction?: "up" | "down" | "left" | "right";
-      initialValue?: number;
-    })
+    type: "slide";
+    direction?: "up" | "down" | "left" | "right";
+    initialValue?: number;
+  })
   | (BaseAnimatorProps & {
-      type: "blink";
-      blinkDuration?: number;
-      minOpacity?: number;
-      maxOpacity?: number;
-    })
+    type: "blink";
+    blinkDuration?: number;
+    minOpacity?: number;
+    maxOpacity?: number;
+  })
   | (BaseAnimatorProps & {
-      type: "float";
-      closeDuration?: number;
-      floatDistance?: number;
-      floatDuration?: number;
-    })
+    type: "float";
+    closeDuration?: number;
+    floatDistance?: number;
+    floatDuration?: number;
+  })
   | (BaseAnimatorProps & {
-      type: "roll";
-      initialTranslateY?: number;
-      initialRotate?: string;
-    })
+    type: "roll";
+    initialTranslateY?: number;
+    initialRotate?: string;
+  })
   | (BaseAnimatorProps & {
-      type: "thrownup";
-      // No additional props for thrownup animation
-    });
+    type: "thrownup";
+    // No additional props for thrownup animation
+  });