@hoddy-ui/next 2.0.26 → 2.0.28

package/dist/index.d.mts

@@ -11,6 +11,7 @@ type extraColorTypes = {
             light?: string;
             dark?: string;
             text?: string;
+            [key: number]: string;
         };
     };
     light?: {
@@ -19,6 +20,7 @@ type extraColorTypes = {
             light?: string;
             dark?: string;
             text?: string;
+            [key: number]: string;
         };
     };
 };
@@ -160,6 +162,7 @@ interface PopupProps {
     children: ReactNode;
     open: boolean;
     onClose?: () => void;
+    style?: ViewStyle;
 }
 interface SpinnerProps {
     label?: string;
@@ -197,7 +200,7 @@ interface TypographyProps extends TextProps {
     children: ReactNode;
     color?: colorTypes | (string & {});
     style?: TextStyle | ViewStyle;
-    textCase?: "capitalize" | "uppercase" | "lowercase" | null;
+    textCase?: "capitalize" | "uppercase" | "lowercase" | undefined;
     variant?: "caption" | "body1" | "body2" | "h6" | "h5" | "h4" | "h3" | "h2" | "h1";
     align?: "center" | "left" | "right";
     gutterBottom?: number;
@@ -313,6 +316,10 @@ declare const OTPInput: FC<OTPInputProps>;
 
 declare const useColors: () => {
     white: {
+        main?: string | undefined;
+        light?: string | undefined;
+        dark?: string | undefined;
+        text?: string | undefined;
         1: string;
         2: string;
         3: string;
@@ -320,6 +327,10 @@ declare const useColors: () => {
         5: string;
     };
     black: {
+        main?: string | undefined;
+        light?: string | undefined;
+        dark?: string | undefined;
+        text?: string | undefined;
         1: string;
         2: string;
         3: string;
@@ -388,6 +399,10 @@ declare const useColors: () => {
     };
 } | {
     white: {
+        main?: string | undefined;
+        light?: string | undefined;
+        dark?: string | undefined;
+        text?: string | undefined;
         1: string;
         2: string;
         3: string;
@@ -395,6 +410,10 @@ declare const useColors: () => {
         5: string;
     };
     black: {
+        main?: string | undefined;
+        light?: string | undefined;
+        dark?: string | undefined;
+        text?: string | undefined;
         1: string;
         2: string;
         3: string;
@@ -463,6 +482,10 @@ declare const useColors: () => {
     };
 } | {
     white: {
+        main?: string | undefined;
+        light?: string | undefined;
+        dark?: string | undefined;
+        text?: string | undefined;
         1: string;
         2: string;
         3: string;
@@ -470,6 +493,10 @@ declare const useColors: () => {
         5: string;
     };
     black: {
+        main?: string | undefined;
+        light?: string | undefined;
+        dark?: string | undefined;
+        text?: string | undefined;
         1: string;
         2: string;
         3: string;

package/dist/index.d.ts

@@ -11,6 +11,7 @@ type extraColorTypes = {
             light?: string;
             dark?: string;
             text?: string;
+            [key: number]: string;
         };
     };
     light?: {
@@ -19,6 +20,7 @@ type extraColorTypes = {
             light?: string;
             dark?: string;
             text?: string;
+            [key: number]: string;
         };
     };
 };
@@ -160,6 +162,7 @@ interface PopupProps {
     children: ReactNode;
     open: boolean;
     onClose?: () => void;
+    style?: ViewStyle;
 }
 interface SpinnerProps {
     label?: string;
@@ -197,7 +200,7 @@ interface TypographyProps extends TextProps {
     children: ReactNode;
     color?: colorTypes | (string & {});
     style?: TextStyle | ViewStyle;
-    textCase?: "capitalize" | "uppercase" | "lowercase" | null;
+    textCase?: "capitalize" | "uppercase" | "lowercase" | undefined;
     variant?: "caption" | "body1" | "body2" | "h6" | "h5" | "h4" | "h3" | "h2" | "h1";
     align?: "center" | "left" | "right";
     gutterBottom?: number;
@@ -313,6 +316,10 @@ declare const OTPInput: FC<OTPInputProps>;
 
 declare const useColors: () => {
     white: {
+        main?: string | undefined;
+        light?: string | undefined;
+        dark?: string | undefined;
+        text?: string | undefined;
         1: string;
         2: string;
         3: string;
@@ -320,6 +327,10 @@ declare const useColors: () => {
         5: string;
     };
     black: {
+        main?: string | undefined;
+        light?: string | undefined;
+        dark?: string | undefined;
+        text?: string | undefined;
         1: string;
         2: string;
         3: string;
@@ -388,6 +399,10 @@ declare const useColors: () => {
     };
 } | {
     white: {
+        main?: string | undefined;
+        light?: string | undefined;
+        dark?: string | undefined;
+        text?: string | undefined;
         1: string;
         2: string;
         3: string;
@@ -395,6 +410,10 @@ declare const useColors: () => {
         5: string;
     };
     black: {
+        main?: string | undefined;
+        light?: string | undefined;
+        dark?: string | undefined;
+        text?: string | undefined;
         1: string;
         2: string;
         3: string;
@@ -463,6 +482,10 @@ declare const useColors: () => {
     };
 } | {
     white: {
+        main?: string | undefined;
+        light?: string | undefined;
+        dark?: string | undefined;
+        text?: string | undefined;
         1: string;
         2: string;
         3: string;
@@ -470,6 +493,10 @@ declare const useColors: () => {
         5: string;
     };
     black: {
+        main?: string | undefined;
+        light?: string | undefined;
+        dark?: string | undefined;
+        text?: string | undefined;
         1: string;
         2: string;
         3: string;

package/dist/index.js

@@ -69,61 +69,65 @@ var setExtraColors = (c) => extraColors = c;
 function colors(theme) {
   const lightColors = {
     white: {
-      1: "#fff",
+      1: "#ffffff",
       2: "#f7f7f7",
-      3: "#eee",
-      4: "#ddd",
-      5: "#bbb"
+      3: "#eeeeee",
+      4: "#dddddd",
+      5: "#bbbbbb",
+      ...extraColors?.light?.white
     },
     black: {
-      1: "#888",
-      2: "#777",
-      3: "#555",
-      4: "#333",
-      5: "#000"
+      1: "#888888",
+      2: "#777777",
+      3: "#555555",
+      4: "#333333",
+      5: "#000000",
+      ...extraColors?.light?.black
     }
   };
   const darkColors = {
     black: {
-      1: "#fff",
+      1: "#ffffff",
       2: "#f7f7f7",
-      3: "#eee",
-      4: "#ddd",
-      5: "#aaa"
+      3: "#eeeeee",
+      4: "#dddddd",
+      5: "#aaaaaa",
+      ...extraColors?.dark?.black
     },
     white: {
-      1: "#000",
-      2: "#222",
-      3: "#333",
-      4: "#444",
-      5: "#555"
+      1: "#060606",
+      2: "#222222",
+      3: "#333333",
+      4: "#444444",
+      5: "#555555",
+      ...extraColors?.dark?.white
     },
     dark: {
       main: "#f2f3f4",
-      light: "#fff",
-      dark: "#ddd",
-      text: "#000",
+      light: "#ffffff",
+      dark: "#dddddd",
+      text: "#000000",
       ...extraColors?.dark?.dark
     },
     light: {
-      main: "#111",
-      light: "#555",
-      dark: "#333",
-      text: "#fff",
+      main: "#111111",
+      light: "#555555",
+      dark: "#333333",
+      text: "#ffffff",
       ...extraColors?.dark?.light
     },
     textSecondary: {
-      main: "#666",
-      light: "#777",
-      dark: "#444",
-      text: "#fff",
+      main: "#666666",
+      light: "#777777",
+      dark: "#444444",
+      text: "#ffffff",
       ...extraColors?.dark?.textSecondary
     },
     primary: {
-      main: "#f80",
-      light: "#FEFFD3",
-      dark: "#fa0",
-      text: "#fff",
+      main: "#ff8800",
+      light: "#feffd3",
+      dark: "#ffaa00",
+      text: "#ffffff",
       ...extraColors?.light?.primary,
       ...extraColors?.dark?.primary
     }
@@ -132,73 +136,73 @@ function colors(theme) {
   return {
     ...extraColors[theme],
     primary: {
-      main: "#f80",
-      light: "#FEFFD3",
-      dark: "#fa0",
-      text: "#fff",
+      main: "#ff8800",
+      light: "#feffd3",
+      dark: "#ffaa00",
+      text: "#ffffff",
       ...extraColors?.light?.primary
     },
     secondary: {
-      main: "#f11",
-      light: "#f43",
-      dark: "#d00",
-      text: "#fff",
+      main: "#ff1111",
+      light: "#ff4433",
+      dark: "#dd0000",
+      text: "#ffffff",
       ...extraColors?.light?.secondary
     },
     light: {
-      main: "#fff",
-      light: "#fff",
-      dark: "#ddd",
-      text: "#000",
+      main: "#ffffff",
+      light: "#ffffff",
+      dark: "#dddddd",
+      text: "#000000",
       ...extraColors?.light?.light
     },
     dark: {
-      main: "#000",
-      light: "#777",
-      dark: "#111",
-      text: "#fff",
+      main: "#000000",
+      light: "#777777",
+      dark: "#111111",
+      text: "#ffffff",
       ...extraColors?.light?.dark
     },
     textSecondary: {
-      main: "#aaa",
-      light: "#bbb",
-      dark: "#777",
-      text: "#123",
+      main: "#aaaaaa",
+      light: "#bbbbbb",
+      dark: "#777777",
+      text: "#112233",
       ...extraColors?.light?.textSecondary
     },
     blue: {
-      main: "#09F",
-      light: "#39f",
-      dark: "#028",
-      text: "#fff",
+      main: "#0099ff",
+      light: "#3399ff",
+      dark: "#002288",
+      text: "#ffffff",
       ...extraColors?.light?.blue
     },
     info: {
-      main: "#09f",
-      light: "#3af",
-      dark: "#08a",
-      text: "#fff",
+      main: "#0099ff",
+      light: "#33aaff",
+      dark: "#0088aa",
+      text: "#ffffff",
       ...extraColors?.light?.info
     },
     success: {
-      main: "#0a4",
-      text: "#fff",
-      light: "#5c3",
-      dark: "#062",
+      main: "#00aa44",
+      text: "#ffffff",
+      light: "#55cc33",
+      dark: "#006622",
       ...extraColors?.light?.success
     },
     warning: {
-      main: "#fa2",
-      light: "#fc7",
-      dark: "#f90",
-      text: "#fff",
+      main: "#ffaa22",
+      light: "#ffcc77",
+      dark: "#ff9900",
+      text: "#ffffff",
       ...extraColors?.light?.warning
     },
     error: {
-      main: "#D22",
-      text: "#fff",
-      light: "#f43",
-      dark: "#a20",
+      main: "#dd2222",
+      text: "#ffffff",
+      light: "#ff4433",
+      dark: "#aa2200",
       ...extraColors?.light?.error
     },
     ...dynamicColors
@@ -246,6 +250,7 @@ var NavigationBar = __toESM(require("expo-navigation-bar"));
 var SystemUI = __toESM(require("expo-system-ui"));
 var import_react3 = __toESM(require("react"));
 var import_react_native3 = require("react-native");
+var import_react_native_safe_area_context2 = require("react-native-safe-area-context");
 
 // ../src/Components/FlashMessage.tsx
 var import_react2 = __toESM(require("react"));
@@ -293,8 +298,8 @@ var Typography = (0, import_react.forwardRef)(
         textTransform: textCase,
         alignItems: "center",
         textAlign: align,
-        fontWeight: fontWeight.toString(),
-        fontFamily: fontFamily || getConfig().DEFAULT_FONT_FAMILY || "System"
+        fontWeight,
+        fontFamily: fontFamily || getConfig().DEFAULT_FONT_FAMILY || void 0
         // Use custom font if provided, else default
       }
     });
@@ -375,24 +380,10 @@ var FlashMessage = () => {
 var FlashMessage_default = FlashMessage;
 
 // ../src/theme/index.tsx
-var import_react_native_safe_area_context2 = require("react-native-safe-area-context");
 var UIThemeContext = (0, import_react3.createContext)({
   themeState: { mode: "default", value: "light" }
 });
 function themeReducer(state, { type, payload }) {
-  if (payload === "dark" || type === "dark") {
-    SystemUI.setBackgroundColorAsync("#000000");
-    if (import_react_native3.Platform.OS === "android") {
-      NavigationBar.setButtonStyleAsync("light");
-      NavigationBar.setBackgroundColorAsync("#000000");
-    }
-  } else {
-    SystemUI.setBackgroundColorAsync("#ffffff");
-    if (import_react_native3.Platform.OS === "android") {
-      NavigationBar.setButtonStyleAsync("dark");
-      NavigationBar.setBackgroundColorAsync("#fff");
-    }
-  }
   switch (type) {
     case "dark":
       return { mode: "dark", value: "dark" };
@@ -404,6 +395,24 @@ function themeReducer(state, { type, payload }) {
       return state;
   }
 }
+var ConfigureSystemUI = () => {
+  const theme = useTheme();
+  const colors2 = useColors();
+  (0, import_react3.useEffect)(() => {
+    if (colors2) {
+      SystemUI.setBackgroundColorAsync(colors2.white[1]);
+      if (import_react_native3.Platform.OS === "android") {
+        NavigationBar.setBackgroundColorAsync(colors2.white[1]);
+        if (theme === "dark") {
+          NavigationBar.setButtonStyleAsync("light");
+        } else {
+          NavigationBar.setButtonStyleAsync("dark");
+        }
+      }
+    }
+  }, [colors2, theme]);
+  return /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null);
+};
 var UIThemeProvider = ({ children }) => {
   const [themeState, themeDispatch] = (0, import_react3.useReducer)(themeReducer, {
     mode: "default",
@@ -439,7 +448,8 @@ var UIThemeProvider = ({ children }) => {
       }
     },
     children,
-    /* @__PURE__ */ import_react3.default.createElement(FlashMessage_default, null)
+    /* @__PURE__ */ import_react3.default.createElement(FlashMessage_default, null),
+    /* @__PURE__ */ import_react3.default.createElement(ConfigureSystemUI, null)
   ));
 };
 
@@ -454,6 +464,7 @@ var useTheme = () => {
 };
 var useNavScreenOptions = (type) => {
   const colors2 = useColors();
+  const theme = useTheme();
   const options = {
     stack: {
       headerShown: false,
@@ -473,7 +484,7 @@ var useNavScreenOptions = (type) => {
       headerShown: false,
       headerTintColor: colors2.dark.main,
       tabBarStyle: {
-        borderTopColor: colors2.white[3],
+        borderTopColor: theme === "dark" ? colors2.light.main : colors2.white[2],
         borderTopWidth: 1,
         // shadowColor: "#000",
         // shadowOffset: { height: -3, width: 0 },
@@ -726,7 +737,7 @@ var Button = (0, import_react8.forwardRef)(
         alignItems: "center",
         alignSelf: "flex-start",
         justifyContent: "center",
-        backgroundColor: variant === "text" || variant === "outlined" ? null : translucent ? translucent === "dark" ? colors2.white[3] + "2" : colors2.black[3] + "2" : loading ? colors2[color].light : disabled ? colors2.white[4] : colors2[color].main,
+        backgroundColor: variant === "text" || variant === "outlined" ? null : translucent ? translucent === "dark" ? colors2.white[3] + "22" : colors2.black[3] + "22" : loading ? colors2[color].light : disabled ? colors2.white[4] : colors2[color].main,
         borderRadius: rounded ? 30 : 10,
         elevation: variant === "text" ? 0 : elevation,
         paddingVertical: size === "small" ? 8 : size === "large" ? "15@ms" : "13@ms",
@@ -877,8 +888,10 @@ var Popup = ({
   children,
   open,
   onClose = () => {
-  }
+  },
+  style
 }) => {
+  const theme = useTheme();
   const colors2 = useColors();
   const [show, setShow] = (0, import_react11.useState)(open);
   const [showSecondary, setShowSecondary] = (0, import_react11.useState)(false);
@@ -898,12 +911,13 @@ var Popup = ({
     },
     container: {
       paddingBottom: sheet ? "30@ms" : 0,
-      backgroundColor: colors2.white[2],
+      backgroundColor: theme === "dark" ? "#111" : colors2.white[2],
       borderTopLeftRadius: 20,
       borderTopRightRadius: 20,
       borderBottomRightRadius: sheet ? 0 : 20,
       borderBottomLeftRadius: sheet ? 0 : 20,
-      width: "100%"
+      width: "100%",
+      ...style
     },
     content: {
       paddingHorizontal: bare ? void 0 : "10@ms"
@@ -1182,7 +1196,7 @@ var ListItem = ({
       flexDirection: "row",
       alignItems: "center",
       paddingHorizontal: "10@s",
-      borderBottomColor: colors2.white[4],
+      borderBottomColor: colors2.white[2],
       borderBottomWidth: divider ? 1 : 0,
       paddingVertical: "10@vs"
     }
@@ -1261,7 +1275,7 @@ var SelectMenu = ({
       {
         style: {
           ...styles2.option,
-          backgroundColor: item.value === value ? colors2.blue.light + "2" : colors2.white[2]
+          backgroundColor: item.value === value ? colors2.blue.light + "22" : colors2.white[2]
         },
         onPress: () => {
           onChange(item.value);
@@ -1750,11 +1764,6 @@ var TextField_default = TextField;
 // ../src/Components/Locator.tsx
 var Location = __toESM(require("expo-location"));
 var import_react_native_size_matters15 = require("react-native-size-matters");
-setTimeout(() => {
-  const { GOOGLE_MAP_API_KEY } = getConfig();
-  if (GOOGLE_MAP_API_KEY)
-    Location.setGoogleApiKey(GOOGLE_MAP_API_KEY);
-}, 500);
 var getPredictionsFromCoords = async (coords) => {
   const { GOOGLE_MAP_API_KEY } = getConfig();
   if (!GOOGLE_MAP_API_KEY)
@@ -2004,7 +2013,7 @@ var Spinner = ({
       alignItems: "center",
       justifyContent: "center",
       position: fullscreen ? "absolute" : "relative",
-      backgroundColor: fullscreen ? colors2.white[1] + "d" : void 0,
+      backgroundColor: fullscreen ? colors2.white[1] + "dd" : void 0,
       ...style
     },
     content: {
@@ -2041,6 +2050,36 @@ var OTPInput = ({
     () => Array(length).fill(0).map((_) => import_react20.default.createRef()),
     [length]
   );
+  console.log("v", value);
+  const onChangeHandler = (val, index) => {
+    if (value.length >= length && val.length > 0)
+      return;
+    if (val.length > 1) {
+      console.log("reached", val);
+      const digits = val.replace(/\D/g, "").slice(0, length);
+      onChange(digits);
+      if (digits.length === length) {
+        inputRefs[length - 1].current?.focus();
+      }
+      return;
+    }
+    if (val.length === 0) {
+      const newValue2 = value.slice(0, index) + value.slice(index + 1);
+      onChange(newValue2);
+      if (index > 0) {
+        inputRefs[index - 1].current?.focus();
+      }
+      return;
+    }
+    const digit = val.replace(/\D/g, "").slice(0, 1);
+    if (!digit)
+      return;
+    const newValue = value.slice(0, index) + digit + value.slice(index + 1);
+    onChange(newValue);
+    if (index < length - 1) {
+      inputRefs[index + 1].current?.focus();
+    }
+  };
   const colors2 = useColors();
   const styles2 = import_react_native_size_matters19.ScaledSheet.create({
     root: {},
@@ -2063,27 +2102,7 @@ var OTPInput = ({
     import_react_native22.TextInput,
     {
       ref: inputRefs[index],
-      onChangeText: (val) => {
-        if (val.length === 1) {
-          if (index !== length - 1)
-            inputRefs[index + 1].current?.focus();
-          let text = value;
-          text = text.slice(0, index) + val + text.slice(index + 1);
-          onChange(text);
-        } else if (val.length === 0) {
-          if (index !== 0) {
-            inputRefs[index - 1].current?.focus();
-            let text = value;
-            text = text.slice(0, index);
-            onChange(text);
-          } else
-            onChange("");
-        } else {
-          let text = val.replace(/\D/g, "").slice(0, length);
-          onChange(text);
-          inputRefs[text.length < length - 1 ? text.length : length - 1]?.current?.focus();
-        }
-      },
+      onChangeText: (val) => onChangeHandler(val, index),
       value: value[index] || "",
       blurOnSubmit: false,
       keyboardType: "number-pad",