react-native-better-html 1.0.16 → 1.0.17

package/dist/index.d.mts

@@ -3,7 +3,7 @@ export { AnyOtherString, AssetName, AssetsConfig, Color, ColorName, ColorTheme,
 import * as react from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react_native from 'react-native';
-import { ViewStyle, GestureResponderEvent, ViewProps as ViewProps$1, TextInput, TextStyle, FocusEvent, NativeSyntheticEvent, NativeTouchEvent, TextInputSubmitEditingEvent, TextProps as TextProps$1, ColorValue, ImageSourcePropType, ImageProps as ImageProps$1, ImageStyle, StatusBar as StatusBar$1 } from 'react-native';
+import { ViewStyle, GestureResponderEvent, ViewProps as ViewProps$1, TextInput, TextStyle, NativeSyntheticEvent, NativeTouchEvent, FocusEvent, TextInputSubmitEditingEvent, TextProps as TextProps$1, ColorValue, ImageSourcePropType, ImageProps as ImageProps$1, ImageStyle, StatusBar as StatusBar$1 } from 'react-native';
 import { SymbolView } from 'expo-symbols';
 import { EaseFunction, PropsTransforms } from '@legendapp/motion';
 
@@ -31,7 +31,7 @@ type BetterComponentsProviderProps = BetterProviderCommonProps & {
     config?: BetterComponentsProviderConfig;
 };
 declare function BetterComponentsProvider({ config, ...props }: BetterComponentsProviderProps): react_jsx_runtime.JSX.Element;
-declare const _default$1: react.MemoExoticComponent<typeof BetterComponentsProvider>;
+declare const _default$2: react.MemoExoticComponent<typeof BetterComponentsProvider>;
 
 type ComponentStyle<Style extends ViewStyle = ViewStyle> = OmitProps<Style, "shadowOffset" | ComponentExcludeMarginProps | ComponentExcludePaddingProps> & {
     shadowOffsetWidth?: number;
@@ -83,6 +83,7 @@ type IconProps = {
     color?: string;
 } & OmitProps<ViewProps, "width" | "height" | "pressType">;
 declare function Icon({ name, nameIOS, size, color, ...props }: IconProps): react_jsx_runtime.JSX.Element;
+declare const _default$1: react.MemoExoticComponent<typeof Icon>;
 
 type InputFieldProps = {
     flex?: ViewStyle["flex"];
@@ -132,8 +133,10 @@ type InputFieldProps = {
     numberOfLines?: number;
     leftIcon?: IconProps["name"];
     leftIconIOS?: IconProps["nameIOS"];
+    onPressLeftIcon?: (event: NativeSyntheticEvent<NativeTouchEvent>) => void;
     rightIcon?: IconProps["name"];
     rightIconIOS?: IconProps["nameIOS"];
+    onPressRightIcon?: (event: NativeSyntheticEvent<NativeTouchEvent>) => void;
     onFocus?: (event: FocusEvent) => void;
     onBlur?: (event: FocusEvent) => void;
     onChange?: (text: string) => void;
@@ -214,6 +217,10 @@ declare function useForm<FormFields extends Record<string | number, FormFieldVal
     isValid: boolean;
     canSubmit: boolean;
 };
+declare function useEventEmitter(): {
+    emit: <Params>(eventName: string, params?: Params) => void;
+    listen: <Params>(eventName: string, callback?: (params?: Params) => void) => react_native.EmitterSubscription;
+};
 
 declare const getFormErrorObject: <FormFields extends ReturnType<typeof useForm>["values"]>(formValues: FormFields) => PartialRecord<keyof FormFields, string>;
 
@@ -421,7 +428,8 @@ type ImageComponentType = {
         /** @default 50 */
         size?: number;
         letters?: string;
-        backgroundColor?: string;
+        color?: ColorValue;
+        backgroundColor?: ColorValue;
     }) => React.ReactElement;
 };
 declare const ImageComponent: ImageComponentType;
@@ -445,4 +453,4 @@ type AsyncStoragePluginOptions = {};
 declare const defaultAsyncStoragePluginOptions: Required<AsyncStoragePluginOptions>;
 declare const asyncStoragePlugin: BetterComponentsPluginConstructor<AsyncStoragePluginOptions>;
 
-export { Animate, type AnimateTextProps, type AnimateViewProps, type AppConfig, type AsyncStoragePluginOptions, type BetterComponentsConfig, type BetterComponentsPlugin, _default$1 as BetterComponentsProvider, type BetterComponentsProviderConfig, Button, type ButtonProps, type ComponentMarginProps, type ComponentPaddingProps, type FooterProps, Icon, type IconProps, Image, type ImageProps, InputField, type InputFieldProps, type InputFieldRef, Loader, type LoaderProps, type LoaderSize, type PluginName, ScreenHolder, type ScreenHolderProps, _default as StatusBar, type StatusBarProps, Text, type TextProps, View, type ViewProps, asyncStoragePlugin, defaultAsyncStoragePluginOptions, generateAsyncStorage, getFormErrorObject, pressStrength, useBetterComponentsContext, useDevice, useForm, useKeyboard };
+export { Animate, type AnimateTextProps, type AnimateViewProps, type AppConfig, type AsyncStoragePluginOptions, type BetterComponentsConfig, type BetterComponentsPlugin, _default$2 as BetterComponentsProvider, type BetterComponentsProviderConfig, Button, type ButtonProps, type ComponentMarginProps, type ComponentPaddingProps, type FooterProps, _default$1 as Icon, type IconProps, Image, type ImageProps, InputField, type InputFieldProps, type InputFieldRef, Loader, type LoaderProps, type LoaderSize, type PluginName, ScreenHolder, type ScreenHolderProps, _default as StatusBar, type StatusBarProps, Text, type TextProps, View, type ViewProps, asyncStoragePlugin, defaultAsyncStoragePluginOptions, generateAsyncStorage, getFormErrorObject, pressStrength, useBetterComponentsContext, useDevice, useEventEmitter, useForm, useKeyboard };

package/dist/index.d.ts

@@ -3,7 +3,7 @@ export { AnyOtherString, AssetName, AssetsConfig, Color, ColorName, ColorTheme,
 import * as react from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react_native from 'react-native';
-import { ViewStyle, GestureResponderEvent, ViewProps as ViewProps$1, TextInput, TextStyle, FocusEvent, NativeSyntheticEvent, NativeTouchEvent, TextInputSubmitEditingEvent, TextProps as TextProps$1, ColorValue, ImageSourcePropType, ImageProps as ImageProps$1, ImageStyle, StatusBar as StatusBar$1 } from 'react-native';
+import { ViewStyle, GestureResponderEvent, ViewProps as ViewProps$1, TextInput, TextStyle, NativeSyntheticEvent, NativeTouchEvent, FocusEvent, TextInputSubmitEditingEvent, TextProps as TextProps$1, ColorValue, ImageSourcePropType, ImageProps as ImageProps$1, ImageStyle, StatusBar as StatusBar$1 } from 'react-native';
 import { SymbolView } from 'expo-symbols';
 import { EaseFunction, PropsTransforms } from '@legendapp/motion';
 
@@ -31,7 +31,7 @@ type BetterComponentsProviderProps = BetterProviderCommonProps & {
     config?: BetterComponentsProviderConfig;
 };
 declare function BetterComponentsProvider({ config, ...props }: BetterComponentsProviderProps): react_jsx_runtime.JSX.Element;
-declare const _default$1: react.MemoExoticComponent<typeof BetterComponentsProvider>;
+declare const _default$2: react.MemoExoticComponent<typeof BetterComponentsProvider>;
 
 type ComponentStyle<Style extends ViewStyle = ViewStyle> = OmitProps<Style, "shadowOffset" | ComponentExcludeMarginProps | ComponentExcludePaddingProps> & {
     shadowOffsetWidth?: number;
@@ -83,6 +83,7 @@ type IconProps = {
     color?: string;
 } & OmitProps<ViewProps, "width" | "height" | "pressType">;
 declare function Icon({ name, nameIOS, size, color, ...props }: IconProps): react_jsx_runtime.JSX.Element;
+declare const _default$1: react.MemoExoticComponent<typeof Icon>;
 
 type InputFieldProps = {
     flex?: ViewStyle["flex"];
@@ -132,8 +133,10 @@ type InputFieldProps = {
     numberOfLines?: number;
     leftIcon?: IconProps["name"];
     leftIconIOS?: IconProps["nameIOS"];
+    onPressLeftIcon?: (event: NativeSyntheticEvent<NativeTouchEvent>) => void;
     rightIcon?: IconProps["name"];
     rightIconIOS?: IconProps["nameIOS"];
+    onPressRightIcon?: (event: NativeSyntheticEvent<NativeTouchEvent>) => void;
     onFocus?: (event: FocusEvent) => void;
     onBlur?: (event: FocusEvent) => void;
     onChange?: (text: string) => void;
@@ -214,6 +217,10 @@ declare function useForm<FormFields extends Record<string | number, FormFieldVal
     isValid: boolean;
     canSubmit: boolean;
 };
+declare function useEventEmitter(): {
+    emit: <Params>(eventName: string, params?: Params) => void;
+    listen: <Params>(eventName: string, callback?: (params?: Params) => void) => react_native.EmitterSubscription;
+};
 
 declare const getFormErrorObject: <FormFields extends ReturnType<typeof useForm>["values"]>(formValues: FormFields) => PartialRecord<keyof FormFields, string>;
 
@@ -421,7 +428,8 @@ type ImageComponentType = {
         /** @default 50 */
         size?: number;
         letters?: string;
-        backgroundColor?: string;
+        color?: ColorValue;
+        backgroundColor?: ColorValue;
     }) => React.ReactElement;
 };
 declare const ImageComponent: ImageComponentType;
@@ -445,4 +453,4 @@ type AsyncStoragePluginOptions = {};
 declare const defaultAsyncStoragePluginOptions: Required<AsyncStoragePluginOptions>;
 declare const asyncStoragePlugin: BetterComponentsPluginConstructor<AsyncStoragePluginOptions>;
 
-export { Animate, type AnimateTextProps, type AnimateViewProps, type AppConfig, type AsyncStoragePluginOptions, type BetterComponentsConfig, type BetterComponentsPlugin, _default$1 as BetterComponentsProvider, type BetterComponentsProviderConfig, Button, type ButtonProps, type ComponentMarginProps, type ComponentPaddingProps, type FooterProps, Icon, type IconProps, Image, type ImageProps, InputField, type InputFieldProps, type InputFieldRef, Loader, type LoaderProps, type LoaderSize, type PluginName, ScreenHolder, type ScreenHolderProps, _default as StatusBar, type StatusBarProps, Text, type TextProps, View, type ViewProps, asyncStoragePlugin, defaultAsyncStoragePluginOptions, generateAsyncStorage, getFormErrorObject, pressStrength, useBetterComponentsContext, useDevice, useForm, useKeyboard };
+export { Animate, type AnimateTextProps, type AnimateViewProps, type AppConfig, type AsyncStoragePluginOptions, type BetterComponentsConfig, type BetterComponentsPlugin, _default$2 as BetterComponentsProvider, type BetterComponentsProviderConfig, Button, type ButtonProps, type ComponentMarginProps, type ComponentPaddingProps, type FooterProps, _default$1 as Icon, type IconProps, Image, type ImageProps, InputField, type InputFieldProps, type InputFieldRef, Loader, type LoaderProps, type LoaderSize, type PluginName, ScreenHolder, type ScreenHolderProps, _default as StatusBar, type StatusBarProps, Text, type TextProps, View, type ViewProps, asyncStoragePlugin, defaultAsyncStoragePluginOptions, generateAsyncStorage, getFormErrorObject, pressStrength, useBetterComponentsContext, useDevice, useEventEmitter, useForm, useKeyboard };

package/dist/index.js

@@ -63,6 +63,7 @@ __export(index_exports, {
   useBooleanState: () => import_react_better_core12.useBooleanState,
   useDebounceState: () => import_react_better_core12.useDebounceState,
   useDevice: () => useDevice,
+  useEventEmitter: () => useEventEmitter,
   useForm: () => useForm,
   useKeyboard: () => useKeyboard,
   useLoader: () => import_react_better_core12.useLoader,
@@ -84,6 +85,26 @@ var theme = {};
 
 // src/constants/icons.ts
 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,
@@ -597,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) => {
@@ -1281,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,
@@ -1295,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,
@@ -1332,26 +1370,38 @@ function Icon({ name, nameIOS, size = 16, color, ...props }) {
         `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, height: size, 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,
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    View_default,
     {
-      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,
+      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,
         {
-          ...path,
-          fill: type === "fill" ? svgColor : void 0,
-          stroke: type === "stroke" ? svgColor : void 0,
-          key: path.d
+          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 = Icon;
+var Icon_default = (0, import_react10.memo)(Icon);
 
 // src/components/InputField.tsx
 var import_react12 = require("react");
@@ -1395,8 +1445,10 @@ var InputFieldComponent = (0, import_react12.forwardRef)(
     numberOfLines = 2,
     leftIcon,
     leftIconIOS,
+    onPressLeftIcon,
     rightIcon,
     rightIconIOS,
+    onPressRightIcon,
     paddingHorizontal,
     paddingVertical,
     onFocus,
@@ -1416,6 +1468,7 @@ var InputFieldComponent = (0, import_react12.forwardRef)(
     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;
@@ -1614,11 +1667,13 @@ var InputFieldComponent = (0, import_react12.forwardRef)(
                         Icon_default,
                         {
                           position: "absolute",
-                          left: iconSideSpace,
+                          left: iconSideSpace - iconPadding,
                           name: leftIcon,
                           nameIOS: leftIconIOS,
                           size: iconSize,
-                          pointerEvents: "box-none"
+                          pointerEvents: !onPressLeftIcon ? "box-none" : void 0,
+                          padding: iconPadding,
+                          onPress: onPressLeftIcon
                         }
                       ),
                       /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
@@ -1658,11 +1713,13 @@ var InputFieldComponent = (0, import_react12.forwardRef)(
                         Icon_default,
                         {
                           position: "absolute",
-                          right: iconSideSpace,
+                          right: iconSideSpace - iconPadding,
                           name: rightIcon,
                           nameIOS: rightIconIOS,
                           size: iconSize,
-                          pointerEvents: "box-none"
+                          pointerEvents: !onPressRightIcon ? "box-none" : void 0,
+                          padding: iconPadding,
+                          onPress: onPressRightIcon
                         }
                       )
                     ]
@@ -1740,16 +1797,31 @@ InputFieldComponent.email = (0, import_react12.forwardRef)(function Email(props,
   );
 });
 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
     }
   );
 });
@@ -1845,6 +1917,7 @@ var asyncStoragePlugin = (options) => ({
   useBooleanState,
   useDebounceState,
   useDevice,
+  useEventEmitter,
   useForm,
   useKeyboard,
   useLoader,