react-native-better-html 1.0.15 → 1.0.17

package/dist/index.js

@@ -33,6 +33,7 @@ __export(index_exports, {
   Animate: () => Animate_default,
   BetterComponentsProvider: () => BetterComponentsProvider_default,
   Button: () => Button_default,
+  Icon: () => Icon_default,
   Image: () => Image_default,
   InputField: () => InputField_default,
   Loader: () => Loader_default,
@@ -41,35 +42,36 @@ __export(index_exports, {
   Text: () => Text_default,
   View: () => View_default,
   asyncStoragePlugin: () => asyncStoragePlugin,
-  colorThemeControls: () => import_react_better_core11.colorThemeControls,
-  countries: () => import_react_better_core11.countries,
-  darkenColor: () => import_react_better_core11.darkenColor,
+  colorThemeControls: () => import_react_better_core12.colorThemeControls,
+  countries: () => import_react_better_core12.countries,
+  darkenColor: () => import_react_better_core12.darkenColor,
   defaultAsyncStoragePluginOptions: () => defaultAsyncStoragePluginOptions,
-  desaturateColor: () => import_react_better_core11.desaturateColor,
-  eventPreventDefault: () => import_react_better_core11.eventPreventDefault,
-  eventPreventStop: () => import_react_better_core11.eventPreventStop,
-  eventStopPropagation: () => import_react_better_core11.eventStopPropagation,
-  formatPhoneNumber: () => import_react_better_core11.formatPhoneNumber,
+  desaturateColor: () => import_react_better_core12.desaturateColor,
+  eventPreventDefault: () => import_react_better_core12.eventPreventDefault,
+  eventPreventStop: () => import_react_better_core12.eventPreventStop,
+  eventStopPropagation: () => import_react_better_core12.eventStopPropagation,
+  formatPhoneNumber: () => import_react_better_core12.formatPhoneNumber,
   generateAsyncStorage: () => generateAsyncStorage,
-  generateRandomString: () => import_react_better_core11.generateRandomString,
+  generateRandomString: () => import_react_better_core12.generateRandomString,
   getFormErrorObject: () => getFormErrorObject,
-  getPluralWord: () => import_react_better_core11.getPluralWord,
-  lightenColor: () => import_react_better_core11.lightenColor,
-  loaderControls: () => import_react_better_core11.loaderControls,
+  getPluralWord: () => import_react_better_core12.getPluralWord,
+  lightenColor: () => import_react_better_core12.lightenColor,
+  loaderControls: () => import_react_better_core12.loaderControls,
   pressStrength: () => pressStrength,
-  saturateColor: () => import_react_better_core11.saturateColor,
+  saturateColor: () => import_react_better_core12.saturateColor,
   useBetterComponentsContext: () => useBetterComponentsContext,
-  useBooleanState: () => import_react_better_core11.useBooleanState,
-  useDebounceState: () => import_react_better_core11.useDebounceState,
+  useBooleanState: () => import_react_better_core12.useBooleanState,
+  useDebounceState: () => import_react_better_core12.useDebounceState,
   useDevice: () => useDevice,
+  useEventEmitter: () => useEventEmitter,
   useForm: () => useForm,
   useKeyboard: () => useKeyboard,
-  useLoader: () => import_react_better_core11.useLoader,
-  useLoaderControls: () => import_react_better_core11.useLoaderControls,
-  useTheme: () => import_react_better_core11.useTheme
+  useLoader: () => import_react_better_core12.useLoader,
+  useLoaderControls: () => import_react_better_core12.useLoaderControls,
+  useTheme: () => import_react_better_core12.useTheme
 });
 module.exports = __toCommonJS(index_exports);
-var import_react_better_core11 = require("react-better-core");
+var import_react_better_core12 = require("react-better-core");
 
 // src/components/BetterComponentsProvider.tsx
 var import_react = require("react");
@@ -82,7 +84,38 @@ var appConfig = {};
 var theme = {};
 
 // src/constants/icons.ts
-var icons = {};
+var icons = {
+  eye: {
+    width: 576,
+    height: 512,
+    paths: [
+      {
+        d: "M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z",
+        type: "fill"
+      }
+    ]
+  },
+  eyeDashed: {
+    width: 640,
+    height: 512,
+    paths: [
+      {
+        d: "M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zM223.1 149.5C248.6 126.2 282.7 112 320 112c79.5 0 144 64.5 144 144c0 24.9-6.3 48.3-17.4 68.7L408 294.5c8.4-19.3 10.6-41.4 4.8-63.3c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3c0 10.2-2.4 19.8-6.6 28.3l-90.3-70.8zM373 389.9c-16.4 6.5-34.3 10.1-53 10.1c-79.5 0-144-64.5-144-144c0-6.9 .5-13.6 1.4-20.2L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5L373 389.9z",
+        type: "fill"
+      }
+    ]
+  },
+  magnifyingGlass: {
+    width: 512,
+    height: 512,
+    paths: [
+      {
+        d: "M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z",
+        type: "fill"
+      }
+    ]
+  }
+};
 
 // src/constants/assets.ts
 var assets = {};
@@ -184,10 +217,10 @@ var checkBetterCoreContextValue = (value, functionsName) => {
 var pressStrength = () => {
   if (!checkBetterCoreContextValue(externalBetterCoreContextValue, "pressStrength")) return void 0;
   return {
-    z05: externalBetterCoreContextValue.colorTheme === "dark" ? 0.85 : 0.95,
-    z1: externalBetterCoreContextValue.colorTheme === "dark" ? 0.6 : 0.8,
-    z2: externalBetterCoreContextValue.colorTheme === "dark" ? 0.5 : 0.7,
-    z3: externalBetterCoreContextValue.colorTheme === "dark" ? 0.4 : 0.6
+    p05: externalBetterCoreContextValue.colorTheme === "dark" ? 0.85 : 0.95,
+    p1: externalBetterCoreContextValue.colorTheme === "dark" ? 0.6 : 0.8,
+    p2: externalBetterCoreContextValue.colorTheme === "dark" ? 0.5 : 0.7,
+    p3: externalBetterCoreContextValue.colorTheme === "dark" ? 0.4 : 0.6
   };
 };
 
@@ -585,6 +618,17 @@ function useForm(options) {
     canSubmit
   };
 }
+function useEventEmitter() {
+  return {
+    emit: (eventName, params) => {
+      import_react_native.DeviceEventEmitter.emit(eventName, params);
+    },
+    listen: (eventName, callback = () => {
+    }) => {
+      return import_react_native.DeviceEventEmitter.addListener(eventName, callback);
+    }
+  };
+}
 
 // src/utils/functions.ts
 var getFormErrorObject = (formValues) => {
@@ -695,7 +739,8 @@ var ViewComponent = function View({
           previousValue.shadowOffset = void 0;
         else previousValue[currentValue] = void 0;
         return previousValue;
-      }, {})
+      }, {}),
+      width: props.width !== "100%" ? props.width : void 0
     }),
     [style]
   );
@@ -1107,7 +1152,7 @@ ButtonComponent.secondary = function Secondary(props) {
       borderWidth: 1,
       borderColor: theme2.colors.border,
       textColor: theme2.colors.textPrimary,
-      pressStrength: pressStrength().z05,
+      pressStrength: pressStrength().p05,
       animateOpacity: props.disabled ? 0.4 : 1,
       ...props
     }
@@ -1268,7 +1313,13 @@ var ImageComponent = function Image({ name, source, withDevFittingMode, ...props
   }, [assets2, name]);
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native7.Image, { source: name ? assets2[name.toString()] : source, style, ...props });
 };
-ImageComponent.profileImage = function ProfileImage({ size = 50, letters, backgroundColor, ...props }) {
+ImageComponent.profileImage = function ProfileImage({
+  size = 50,
+  letters,
+  color,
+  backgroundColor,
+  ...props
+}) {
   const theme2 = (0, import_react_better_core8.useTheme)();
   return letters ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     View_default,
@@ -1282,7 +1333,7 @@ ImageComponent.profileImage = function ProfileImage({ size = 50, letters, backgr
       alignItems: "center",
       justifyContent: "center",
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text_default, { fontSize: size / 2.5, fontWeight: 700, marginTop: 1, children: letters.toUpperCase().slice(0, 2) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text_default, { fontSize: size / 2.5, fontWeight: 700, color: color ?? theme2.colors.textPrimary, marginTop: 1, children: letters.toUpperCase().slice(0, 2) })
     }
   ) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     ImageComponent,
@@ -1301,13 +1352,64 @@ var Image2 = (0, import_react9.memo)(ImageComponent);
 Image2.profileImage = ImageComponent.profileImage;
 var Image_default = Image2;
 
-// src/components/InputField.tsx
+// src/components/Icon.tsx
 var import_react10 = require("react");
 var import_react_native8 = require("react-native");
-var import_datetimepicker = __toESM(require("@react-native-community/datetimepicker"));
+var import_react_native_svg = require("react-native-svg");
 var import_react_better_core9 = require("react-better-core");
+var import_expo_symbols = require("expo-symbols");
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var InputFieldComponent = (0, import_react10.forwardRef)(
+var import_react11 = require("react");
+function Icon({ name, nameIOS, size = 16, color, ...props }) {
+  const theme2 = (0, import_react_better_core9.useTheme)();
+  const { icons: icons2 } = (0, import_react_better_core9.useBetterCoreContext)();
+  const svgColor = color ?? theme2.colors.textPrimary;
+  (0, import_react10.useEffect)(() => {
+    if (!icons2[name.toString()])
+      console.warn(
+        `The icon \`${name}\` you are trying to use does not exist. Make sure to add it to the \`icons\` object in \`<BetterComponentsProvider>\` config value prop.`
+      );
+  }, [icons2, name]);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    View_default,
+    {
+      width: size + (parseFloat(props.padding?.toString() ?? "0") ?? 0) + (parseFloat(props.paddingHorizontal?.toString() ?? "0") ?? 0),
+      height: size + (parseFloat(props.padding?.toString() ?? "0") ?? 0) + (parseFloat(props.paddingVertical?.toString() ?? "0") ?? 0),
+      alignItems: "center",
+      justifyContent: "center",
+      pressType: "opacity",
+      pressStrength: pressStrength().p2,
+      ...props,
+      children: import_react_native8.Platform.OS === "ios" && nameIOS ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_expo_symbols.SymbolView, { name: nameIOS, tintColor: svgColor, size }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        import_react_native_svg.Svg,
+        {
+          width: size,
+          height: size,
+          viewBox: `0 0 ${icons2[name.toString()]?.width ?? 0} ${icons2[name.toString()]?.height ?? 0}`,
+          fill: "none",
+          children: icons2[name.toString()]?.paths.map(({ type, ...path }) => /* @__PURE__ */ (0, import_react11.createElement)(
+            import_react_native_svg.Path,
+            {
+              ...path,
+              fill: type === "fill" ? svgColor : void 0,
+              stroke: type === "stroke" ? svgColor : void 0,
+              key: path.d
+            }
+          ))
+        }
+      )
+    }
+  );
+}
+var Icon_default = (0, import_react10.memo)(Icon);
+
+// src/components/InputField.tsx
+var import_react12 = require("react");
+var import_react_native9 = require("react-native");
+var import_datetimepicker = __toESM(require("@react-native-community/datetimepicker"));
+var import_react_better_core10 = require("react-better-core");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var InputFieldComponent = (0, import_react12.forwardRef)(
   ({
     flex,
     placeholder,
@@ -1341,6 +1443,12 @@ var InputFieldComponent = (0, import_react10.forwardRef)(
     maxLength,
     multiline,
     numberOfLines = 2,
+    leftIcon,
+    leftIconIOS,
+    onPressLeftIcon,
+    rightIcon,
+    rightIconIOS,
+    onPressRightIcon,
     paddingHorizontal,
     paddingVertical,
     onFocus,
@@ -1352,29 +1460,32 @@ var InputFieldComponent = (0, import_react10.forwardRef)(
     onPressEnter,
     ...props
   }, ref) => {
-    const theme2 = (0, import_react_better_core9.useTheme)();
-    const { colorTheme } = (0, import_react_better_core9.useBetterCoreContext)();
-    const textInputRef = (0, import_react10.useRef)(null);
-    const [internalValue, setInternalValue] = (0, import_react10.useState)(value?.toString() || defaultValue || "");
-    const [internalDateValue, setInternalDateValue] = (0, import_react10.useState)();
-    const [isFocused, setIsFocused] = (0, import_react_better_core9.useBooleanState)();
-    const isIOSDateTime = import_react_native8.Platform.OS === "ios" && (type === "date" || type === "time");
+    const theme2 = (0, import_react_better_core10.useTheme)();
+    const { colorTheme } = (0, import_react_better_core10.useBetterCoreContext)();
+    const textInputRef = (0, import_react12.useRef)(null);
+    const [internalValue, setInternalValue] = (0, import_react12.useState)(value?.toString() || defaultValue || "");
+    const [internalDateValue, setInternalDateValue] = (0, import_react12.useState)();
+    const [isFocused, setIsFocused] = (0, import_react_better_core10.useBooleanState)();
+    const isIOSDateTime = import_react_native9.Platform.OS === "ios" && (type === "date" || type === "time");
+    const iconSize = 16;
+    const iconPadding = onPressRightIcon ? theme2.styles.gap : 0;
+    const iconSideSpace = theme2.styles.space;
     const borderWidth = 1;
     const readyPaddingHorizontal = paddingHorizontal ?? theme2.styles.space;
     const readyPaddingVertical = paddingVertical ? parseFloat(paddingVertical.toString()) : (theme2.styles.space + theme2.styles.gap) / 2;
-    const readyHeight = height ?? isIOSDateTime ? void 0 : borderWidth + readyPaddingVertical + lineHeight + readyPaddingVertical + borderWidth + (import_react_native8.Platform.OS === "android" ? 2 : 0);
-    const onChangeRNDateTimePicker = (0, import_react10.useCallback)(
+    const readyHeight = height ?? isIOSDateTime ? void 0 : borderWidth + readyPaddingVertical + lineHeight + readyPaddingVertical + borderWidth + (import_react_native9.Platform.OS === "android" ? 2 : 0);
+    const onChangeRNDateTimePicker = (0, import_react12.useCallback)(
       (event, data) => {
         setInternalDateValue(data);
         onChange?.(data?.toISOString() ?? "");
       },
       [onChange]
     );
-    const onPressInputField = (0, import_react10.useCallback)(
+    const onPressInputField = (0, import_react12.useCallback)(
       (event) => {
         onPress?.(event);
         if (type === "date" || type === "time") {
-          if (import_react_native8.Platform.OS === "android") {
+          if (import_react_native9.Platform.OS === "android") {
             import_datetimepicker.DateTimePickerAndroid.open({
               value: internalDateValue ?? /* @__PURE__ */ new Date(),
               is24Hour: true,
@@ -1392,47 +1503,60 @@ var InputFieldComponent = (0, import_react10.forwardRef)(
               },
               onChange: onChangeRNDateTimePicker
             });
-          } else if (import_react_native8.Platform.OS === "ios") {
+          } else if (import_react_native9.Platform.OS === "ios") {
           }
         }
       },
       [onPress, type, internalDateValue, onChangeRNDateTimePicker]
     );
-    const onFocusElement = (0, import_react10.useCallback)((event) => {
+    const onFocusElement = (0, import_react12.useCallback)((event) => {
       setIsFocused.setTrue();
       onFocus?.(event);
     }, []);
-    const onBlurElement = (0, import_react10.useCallback)((event) => {
+    const onBlurElement = (0, import_react12.useCallback)((event) => {
       setIsFocused.setFalse();
       onBlur?.(event);
     }, []);
-    const onChangeText = (0, import_react10.useCallback)(
+    const onChangeText = (0, import_react12.useCallback)(
       (text) => {
         setInternalValue(text);
         onChange?.(text);
       },
       [onChange]
     );
-    const textInputStyle = (0, import_react10.useMemo)(
+    const textInputStyle = (0, import_react12.useMemo)(
       () => ({
         flex: 1,
         fontSize,
         fontWeight,
         lineHeight,
         color: theme2.colors.textPrimary,
+        paddingLeft: leftIcon ? iconSideSpace + iconSize + iconSideSpace : void 0,
+        paddingRight: rightIcon ? iconSideSpace + iconSize + iconSideSpace : void 0,
         paddingHorizontal: readyPaddingHorizontal,
         paddingVertical: readyPaddingVertical
       }),
-      [theme2.colors, fontSize, fontWeight, lineHeight, readyPaddingHorizontal, readyPaddingVertical]
+      [
+        theme2.colors,
+        fontSize,
+        fontWeight,
+        lineHeight,
+        readyPaddingHorizontal,
+        readyPaddingVertical,
+        iconSideSpace,
+        iconSize,
+        leftIcon,
+        rightIcon
+      ]
     );
-    const rnDateTimePickerStyle = (0, import_react10.useMemo)(
+    const rnDateTimePickerStyle = (0, import_react12.useMemo)(
       () => ({
         flex: iOSDateTimeFullSize ? 1 : void 0,
         marginLeft: -8 + (iOSDateTimeFullSize ? 0 : theme2.styles.space)
       }),
       [iOSDateTimeFullSize]
     );
-    (0, import_react10.useEffect)(() => {
+    (0, import_react12.useEffect)(() => {
       if (value === void 0) return;
       setInternalValue(value.toString());
       try {
@@ -1440,7 +1564,7 @@ var InputFieldComponent = (0, import_react10.forwardRef)(
       } catch (error) {
       }
     }, [value]);
-    (0, import_react10.useEffect)(() => {
+    (0, import_react12.useEffect)(() => {
       if (type !== "date" && type !== "time") return;
       const date = internalDateValue?.toISOString().split("T")[0] ?? "";
       const hours = internalDateValue ? internalDateValue.getHours().toString() : "00";
@@ -1449,7 +1573,7 @@ var InputFieldComponent = (0, import_react10.forwardRef)(
         type === "date" ? date : internalDateValue ? `${hours.length === 1 ? `0${hours}` : hours}:${minutes.length === 1 ? `0${minutes}` : minutes}` : ""
       );
     }, [internalDateValue]);
-    (0, import_react10.useImperativeHandle)(
+    (0, import_react12.useImperativeHandle)(
       ref,
       () => {
         return textInputRef.current;
@@ -1457,12 +1581,12 @@ var InputFieldComponent = (0, import_react10.forwardRef)(
       []
     );
     const withPressInputField = !!onPress || type === "date" || type === "time";
-    const prefixSuffixBackgroundColor = colorTheme === "light" ? (0, import_react_better_core9.darkenColor)(theme2.colors.backgroundContent, 0.03) : (0, import_react_better_core9.lightenColor)(theme2.colors.backgroundContent, 0.1);
-    const labelComponent = label && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(View_default, { isRow: true, alignItems: "center", gap: 2, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text_default, { fontSize: 14, color: isError ? theme2.colors.error : theme2.colors.textSecondary, children: label }),
-      required && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text_default, { color: theme2.colors.error, children: "*" })
+    const prefixSuffixBackgroundColor = colorTheme === "light" ? (0, import_react_better_core10.darkenColor)(theme2.colors.backgroundContent, 0.03) : (0, import_react_better_core10.lightenColor)(theme2.colors.backgroundContent, 0.1);
+    const labelComponent = label && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(View_default, { isRow: true, alignItems: "center", gap: 2, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text_default, { fontSize: 14, color: isError ? theme2.colors.error : theme2.colors.textSecondary, children: label }),
+      required && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text_default, { color: theme2.colors.error, children: "*" })
     ] });
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
       Animate_default.View,
       {
         flex,
@@ -1472,8 +1596,8 @@ var InputFieldComponent = (0, import_react10.forwardRef)(
         ...props,
         children: [
           isIOSDateTime && !iOSDateTimeFullSize ? void 0 : labelComponent,
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(View_default, { isRow: true, position: "relative", alignItems: "center", height: readyHeight, children: [
-            prefix && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(View_default, { isRow: true, position: "relative", alignItems: "center", height: readyHeight, children: [
+            prefix && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
               View_default,
               {
                 isRow: true,
@@ -1488,20 +1612,20 @@ var InputFieldComponent = (0, import_react10.forwardRef)(
                 borderColor: theme2.colors.border,
                 paddingHorizontal: readyPaddingHorizontal,
                 onPress: onPressPrefix,
-                children: typeof prefix === "string" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                children: typeof prefix === "string" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                   Text_default,
                   {
                     fontWeight: 700,
                     lineHeight,
-                    marginTop: import_react_native8.Platform.OS === "ios" && onPressPrefix ? readyPaddingVertical : void 0,
+                    marginTop: import_react_native9.Platform.OS === "ios" && onPressPrefix ? readyPaddingVertical : void 0,
                     children: prefix
                   }
                 ) : prefix
               }
             ),
-            isIOSDateTime ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+            isIOSDateTime ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
               !iOSDateTimeFullSize ? labelComponent : void 0,
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                 import_datetimepicker.default,
                 {
                   value: internalDateValue ?? /* @__PURE__ */ new Date(),
@@ -1512,7 +1636,7 @@ var InputFieldComponent = (0, import_react10.forwardRef)(
                   onChange: onChangeRNDateTimePicker
                 }
               )
-            ] }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
               View_default,
               {
                 flex: 1,
@@ -1522,11 +1646,13 @@ var InputFieldComponent = (0, import_react10.forwardRef)(
                 borderTopRightRadius: suffix ? 0 : theme2.styles.borderRadius,
                 borderBottomRightRadius: suffix ? 0 : theme2.styles.borderRadius,
                 pressStrength: 1,
-                onPress: import_react_native8.Platform.OS === "android" ? editable === false || withPressInputField ? onPressInputField : void 0 : void 0,
-                children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                onPress: import_react_native9.Platform.OS === "android" ? editable === false || withPressInputField ? onPressInputField : void 0 : void 0,
+                children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                   Animate_default.View,
                   {
+                    position: "relative",
                     flex: 1,
+                    justifyContent: "center",
                     backgroundColor: theme2.colors.backgroundContent,
                     borderTopLeftRadius: prefix ? 0 : theme2.styles.borderRadius,
                     borderBottomLeftRadius: prefix ? 0 : theme2.styles.borderRadius,
@@ -1536,44 +1662,72 @@ var InputFieldComponent = (0, import_react10.forwardRef)(
                     initialBorderColor: theme2.colors.border,
                     animateBorderColor: isFocused ? theme2.colors.primary : isError ? theme2.colors.error : theme2.colors.border,
                     overflow: "hidden",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                      import_react_native8.TextInput,
-                      {
-                        style: textInputStyle,
-                        value: internalValue,
-                        defaultValue,
-                        autoCapitalize,
-                        autoComplete,
-                        autoCorrect,
-                        autoFocus,
-                        placeholder: placeholder ?? label,
-                        placeholderTextColor: theme2.colors.textSecondary + "80",
-                        enterKeyHint: returnKeyLabel,
-                        returnKeyType,
-                        onSubmitEditing: onPressEnter,
-                        readOnly: !editable || disabled || type === "date" || type === "time",
-                        textAlign,
-                        editable: !disabled,
-                        keyboardAppearance,
-                        keyboardType,
-                        cursorColor: theme2.colors.primary,
-                        selectionColor: theme2.colors.primary,
-                        secureTextEntry,
-                        onFocus: onFocusElement,
-                        onBlur: onBlurElement,
-                        onChangeText,
-                        maxLength,
-                        multiline,
-                        numberOfLines,
-                        onPress: withPressInputField ? onPressInputField : void 0,
-                        ref: textInputRef
-                      }
-                    )
+                    children: [
+                      leftIcon && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                        Icon_default,
+                        {
+                          position: "absolute",
+                          left: iconSideSpace - iconPadding,
+                          name: leftIcon,
+                          nameIOS: leftIconIOS,
+                          size: iconSize,
+                          pointerEvents: !onPressLeftIcon ? "box-none" : void 0,
+                          padding: iconPadding,
+                          onPress: onPressLeftIcon
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                        import_react_native9.TextInput,
+                        {
+                          style: textInputStyle,
+                          value: internalValue,
+                          defaultValue,
+                          autoCapitalize,
+                          autoComplete,
+                          autoCorrect,
+                          autoFocus,
+                          placeholder: placeholder ?? label,
+                          placeholderTextColor: theme2.colors.textSecondary + "80",
+                          enterKeyHint: returnKeyLabel,
+                          returnKeyType,
+                          onSubmitEditing: onPressEnter,
+                          readOnly: !editable || disabled || type === "date" || type === "time",
+                          textAlign,
+                          editable: !disabled,
+                          keyboardAppearance,
+                          keyboardType,
+                          cursorColor: theme2.colors.primary,
+                          selectionColor: theme2.colors.primary,
+                          secureTextEntry,
+                          onFocus: onFocusElement,
+                          onBlur: onBlurElement,
+                          onChangeText,
+                          maxLength,
+                          multiline,
+                          numberOfLines,
+                          onPress: withPressInputField ? onPressInputField : void 0,
+                          ref: textInputRef
+                        }
+                      ),
+                      rightIcon && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                        Icon_default,
+                        {
+                          position: "absolute",
+                          right: iconSideSpace - iconPadding,
+                          name: rightIcon,
+                          nameIOS: rightIconIOS,
+                          size: iconSize,
+                          pointerEvents: !onPressRightIcon ? "box-none" : void 0,
+                          padding: iconPadding,
+                          onPress: onPressRightIcon
+                        }
+                      )
+                    ]
                   }
                 )
               }
             ),
-            suffix && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            suffix && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
               View_default,
               {
                 isRow: true,
@@ -1587,19 +1741,19 @@ var InputFieldComponent = (0, import_react10.forwardRef)(
                 borderColor: theme2.colors.border,
                 paddingHorizontal: readyPaddingHorizontal,
                 onPress: onPressSuffix,
-                children: typeof suffix === "string" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                children: typeof suffix === "string" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                   Text_default,
                   {
                     fontWeight: 700,
                     lineHeight,
-                    marginTop: import_react_native8.Platform.OS === "ios" && onPressSuffix ? readyPaddingVertical : void 0,
+                    marginTop: import_react_native9.Platform.OS === "ios" && onPressSuffix ? readyPaddingVertical : void 0,
                     children: suffix
                   }
                 ) : suffix
               }
             )
           ] }),
-          infoMessage && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          infoMessage && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             Animate_default.Text,
             {
               fontSize: 14,
@@ -1611,7 +1765,7 @@ var InputFieldComponent = (0, import_react10.forwardRef)(
               children: infoMessage
             }
           ),
-          errorMessage && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          errorMessage && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             Animate_default.Text,
             {
               fontSize: 14,
@@ -1628,8 +1782,8 @@ var InputFieldComponent = (0, import_react10.forwardRef)(
     );
   }
 );
-InputFieldComponent.email = (0, import_react10.forwardRef)(function Email(props, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+InputFieldComponent.email = (0, import_react12.forwardRef)(function Email(props, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     InputFieldComponent,
     {
       placeholder: "your@email.here",
@@ -1642,23 +1796,41 @@ InputFieldComponent.email = (0, import_react10.forwardRef)(function Email(props,
     }
   );
 });
-InputFieldComponent.password = (0, import_react10.forwardRef)(function Password(props, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+InputFieldComponent.password = (0, import_react12.forwardRef)(function Password(props, ref) {
+  const inputFieldRef = (0, import_react12.useRef)(null);
+  const [showPassword, setShowPassword] = (0, import_react_better_core10.useBooleanState)();
+  const onPressEye = (0, import_react12.useCallback)(() => {
+    setShowPassword.toggle();
+    inputFieldRef.current?.focus();
+  }, []);
+  (0, import_react12.useImperativeHandle)(
+    ref,
+    () => {
+      return inputFieldRef.current;
+    },
+    []
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     InputFieldComponent,
     {
-      secureTextEntry: true,
+      secureTextEntry: !showPassword,
       placeholder: "******",
       autoCapitalize: "none",
       autoComplete: "password",
       autoCorrect: false,
+      rightIcon: showPassword ? "eyeDashed" : "eye",
+      onPressRightIcon: onPressEye,
       ...props,
-      ref
+      ref: inputFieldRef
     }
   );
 });
-InputFieldComponent.code = (0, import_react10.forwardRef)(function Password2({ isSmall, ...props }, ref) {
-  const theme2 = (0, import_react_better_core9.useTheme)();
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+InputFieldComponent.search = (0, import_react12.forwardRef)(function Search(props, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(InputFieldComponent, { placeholder: "Search...", leftIcon: "magnifyingGlass", ...props, ref });
+});
+InputFieldComponent.code = (0, import_react12.forwardRef)(function Password2({ isSmall, ...props }, ref) {
+  const theme2 = (0, import_react_better_core10.useTheme)();
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     InputFieldComponent,
     {
       flex: 1,
@@ -1673,29 +1845,30 @@ InputFieldComponent.code = (0, import_react10.forwardRef)(function Password2({ i
     }
   );
 });
-var InputField = (0, import_react10.memo)(InputFieldComponent);
+var InputField = (0, import_react12.memo)(InputFieldComponent);
 InputField.email = InputFieldComponent.email;
 InputField.password = InputFieldComponent.password;
+InputField.search = InputFieldComponent.search;
 InputField.code = InputFieldComponent.code;
 var InputField_default = InputField;
 
 // src/components/StatusBar.tsx
-var import_react11 = require("react");
-var import_react_better_core10 = require("react-better-core");
-var import_react_native9 = require("react-native");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_react13 = require("react");
+var import_react_better_core11 = require("react-better-core");
+var import_react_native10 = require("react-native");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function StatusBar({ darkStatusBar, hidden, barStyle, androidBarStyle, iOSBarStyle }) {
-  const theme2 = (0, import_react_better_core10.useTheme)();
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-    import_react_native9.StatusBar,
+  const theme2 = (0, import_react_better_core11.useTheme)();
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    import_react_native10.StatusBar,
     {
       backgroundColor: darkStatusBar ? theme2.colors.backgroundSecondary : void 0,
-      barStyle: barStyle ?? (import_react_native9.Platform.OS === "android" ? androidBarStyle : iOSBarStyle),
+      barStyle: barStyle ?? (import_react_native10.Platform.OS === "android" ? androidBarStyle : iOSBarStyle),
       hidden
     }
   );
 }
-var StatusBar_default = (0, import_react11.memo)(StatusBar);
+var StatusBar_default = (0, import_react13.memo)(StatusBar);
 
 // src/plugins/asyncStorage.ts
 var defaultAsyncStoragePluginOptions = {};
@@ -1714,6 +1887,7 @@ var asyncStoragePlugin = (options) => ({
   Animate,
   BetterComponentsProvider,
   Button,
+  Icon,
   Image,
   InputField,
   Loader,
@@ -1743,6 +1917,7 @@ var asyncStoragePlugin = (options) => ({
   useBooleanState,
   useDebounceState,
   useDevice,
+  useEventEmitter,
   useForm,
   useKeyboard,
   useLoader,