react-native-better-html 1.0.3 → 1.0.5

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, TextProps as TextProps$1, TextStyle, ColorValue } from 'react-native';
+import { ViewStyle, GestureResponderEvent, ViewProps as ViewProps$1, TextProps as TextProps$1, TextStyle, ColorValue, ImageSourcePropType, ImageProps as ImageProps$1, ImageStyle, TextInput, FocusEvent } from 'react-native';
 import { EaseFunction, PropsTransforms } from '@legendapp/motion';
 
 type AppConfig = {};
@@ -40,6 +40,9 @@ type ComponentMarginProps = Pick<ComponentStyle, "margin" | "marginTop" | "margi
 type ComponentExcludeMarginProps = "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginStart" | "marginEnd";
 type ComponentPaddingProps = Pick<ComponentStyle, "padding" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingVertical" | "paddingHorizontal">;
 type ComponentExcludePaddingProps = "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingStart" | "paddingEnd";
+type ComponentPropWithRef<ComponentRef, ComponentProps> = ComponentProps & {
+    ref?: React.Ref<ComponentRef>;
+};
 
 declare const pressStrength: () => Record<"z05" | "z1" | "z2" | "z3", number>;
 
@@ -64,6 +67,11 @@ declare function useDevice(): {
     /** @description Whether the device is small. */
     isSmallDevice: boolean;
 };
+declare function useKeyboard(): {
+    isOpened: boolean;
+    willOpen: boolean;
+    height: number;
+};
 
 declare function generateAsyncStorage<AsyncStorage extends object>(): {
     setItem: <StorageName extends keyof AsyncStorage>(name: StorageName, value: AsyncStorage[StorageName]) => void;
@@ -258,6 +266,8 @@ type ScreenHolderProps = {
     /** @default 0 */
     bottomSpace?: number;
     footer?: React.ReactNode;
+    /** @default false */
+    keepFooterOnKeyboardOpened?: boolean;
     children?: React.ReactNode;
 };
 type ScreenHolderComponentType = {
@@ -278,8 +288,63 @@ declare const ScreenHolder: typeof ScreenHolderComponent & {
     footer: typeof ScreenHolderComponent.footer;
 };
 
+type ImageProps = {
+    name?: AssetName | AnyOtherString;
+    source?: ImageSourcePropType;
+    /** @default false */
+    withDevFittingMode?: boolean;
+} & OmitProps<ImageProps$1, "source"> & ComponentStyle<ImageStyle>;
+type ImageComponentType = {
+    (props: ImageProps): React.ReactElement;
+    profileImage: (props: OmitProps<ImageProps, "width" | "height"> & {
+        /** @default 50 */
+        size?: number;
+        letters?: string;
+        backgroundColor?: string;
+    }) => React.ReactElement;
+};
+declare const ImageComponent: ImageComponentType;
+/** @description size is set to 100x100 by default */
+declare const Image: typeof ImageComponent & {
+    profileImage: typeof ImageComponent.profileImage;
+};
+
+type InputFieldProps = {
+    placeholder?: string;
+    prefix?: string;
+    suffix?: string;
+    defaultValue?: string;
+    value?: string | number;
+    /** @default true */
+    editable?: boolean;
+    /** @default false */
+    autoFocus?: boolean;
+    autoCapitalize?: React.ComponentProps<typeof TextInput>["autoCapitalize"];
+    autoComplete?: React.ComponentProps<typeof TextInput>["autoComplete"];
+    autoCorrect?: React.ComponentProps<typeof TextInput>["autoCorrect"];
+    /** @default "default" */
+    keyboardAppearance?: React.ComponentProps<typeof TextInput>["keyboardAppearance"];
+    keyboardType?: React.ComponentProps<typeof TextInput>["keyboardType"];
+    /** @default false */
+    secureTextEntry?: boolean;
+    onFocus?: (event: FocusEvent) => void;
+    onBlur?: (event: FocusEvent) => void;
+    onChange?: (text: string) => void;
+};
+type InputFieldRef = {};
+type InputFieldComponentType = {
+    (props: ComponentPropWithRef<InputFieldRef, InputFieldProps>): React.ReactElement;
+    email: (props: ComponentPropWithRef<InputFieldRef, InputFieldProps>) => React.ReactElement;
+    password: (props: ComponentPropWithRef<InputFieldRef, InputFieldProps>) => React.ReactElement;
+};
+declare const InputFieldComponent: InputFieldComponentType;
+declare const InputField: typeof InputFieldComponent & {
+    email: typeof InputFieldComponent.email;
+    password: typeof InputFieldComponent.password;
+};
+
 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 as BetterComponentsProvider, type BetterComponentsProviderConfig, Button, type ButtonProps, type ComponentMarginProps, type ComponentPaddingProps, type FooterProps, Loader, type LoaderProps, type LoaderSize, type PluginName, ScreenHolder, type ScreenHolderProps, Text, type TextProps, View, type ViewProps, asyncStoragePlugin, defaultAsyncStoragePluginOptions, generateAsyncStorage, pressStrength, useBetterComponentsContext, useDevice };
+export { Animate, type AnimateTextProps, type AnimateViewProps, type AppConfig, type AsyncStoragePluginOptions, type BetterComponentsConfig, type BetterComponentsPlugin, _default as BetterComponentsProvider, type BetterComponentsProviderConfig, Button, type ButtonProps, type ComponentMarginProps, type ComponentPaddingProps, type FooterProps, Image, type ImageProps, InputField, type InputFieldProps, Loader, type LoaderProps, type LoaderSize, type PluginName, ScreenHolder, type ScreenHolderProps, Text, type TextProps, View, type ViewProps, asyncStoragePlugin, defaultAsyncStoragePluginOptions, generateAsyncStorage, pressStrength, useBetterComponentsContext, useDevice, 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, TextProps as TextProps$1, TextStyle, ColorValue } from 'react-native';
+import { ViewStyle, GestureResponderEvent, ViewProps as ViewProps$1, TextProps as TextProps$1, TextStyle, ColorValue, ImageSourcePropType, ImageProps as ImageProps$1, ImageStyle, TextInput, FocusEvent } from 'react-native';
 import { EaseFunction, PropsTransforms } from '@legendapp/motion';
 
 type AppConfig = {};
@@ -40,6 +40,9 @@ type ComponentMarginProps = Pick<ComponentStyle, "margin" | "marginTop" | "margi
 type ComponentExcludeMarginProps = "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginStart" | "marginEnd";
 type ComponentPaddingProps = Pick<ComponentStyle, "padding" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingVertical" | "paddingHorizontal">;
 type ComponentExcludePaddingProps = "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingStart" | "paddingEnd";
+type ComponentPropWithRef<ComponentRef, ComponentProps> = ComponentProps & {
+    ref?: React.Ref<ComponentRef>;
+};
 
 declare const pressStrength: () => Record<"z05" | "z1" | "z2" | "z3", number>;
 
@@ -64,6 +67,11 @@ declare function useDevice(): {
     /** @description Whether the device is small. */
     isSmallDevice: boolean;
 };
+declare function useKeyboard(): {
+    isOpened: boolean;
+    willOpen: boolean;
+    height: number;
+};
 
 declare function generateAsyncStorage<AsyncStorage extends object>(): {
     setItem: <StorageName extends keyof AsyncStorage>(name: StorageName, value: AsyncStorage[StorageName]) => void;
@@ -258,6 +266,8 @@ type ScreenHolderProps = {
     /** @default 0 */
     bottomSpace?: number;
     footer?: React.ReactNode;
+    /** @default false */
+    keepFooterOnKeyboardOpened?: boolean;
     children?: React.ReactNode;
 };
 type ScreenHolderComponentType = {
@@ -278,8 +288,63 @@ declare const ScreenHolder: typeof ScreenHolderComponent & {
     footer: typeof ScreenHolderComponent.footer;
 };
 
+type ImageProps = {
+    name?: AssetName | AnyOtherString;
+    source?: ImageSourcePropType;
+    /** @default false */
+    withDevFittingMode?: boolean;
+} & OmitProps<ImageProps$1, "source"> & ComponentStyle<ImageStyle>;
+type ImageComponentType = {
+    (props: ImageProps): React.ReactElement;
+    profileImage: (props: OmitProps<ImageProps, "width" | "height"> & {
+        /** @default 50 */
+        size?: number;
+        letters?: string;
+        backgroundColor?: string;
+    }) => React.ReactElement;
+};
+declare const ImageComponent: ImageComponentType;
+/** @description size is set to 100x100 by default */
+declare const Image: typeof ImageComponent & {
+    profileImage: typeof ImageComponent.profileImage;
+};
+
+type InputFieldProps = {
+    placeholder?: string;
+    prefix?: string;
+    suffix?: string;
+    defaultValue?: string;
+    value?: string | number;
+    /** @default true */
+    editable?: boolean;
+    /** @default false */
+    autoFocus?: boolean;
+    autoCapitalize?: React.ComponentProps<typeof TextInput>["autoCapitalize"];
+    autoComplete?: React.ComponentProps<typeof TextInput>["autoComplete"];
+    autoCorrect?: React.ComponentProps<typeof TextInput>["autoCorrect"];
+    /** @default "default" */
+    keyboardAppearance?: React.ComponentProps<typeof TextInput>["keyboardAppearance"];
+    keyboardType?: React.ComponentProps<typeof TextInput>["keyboardType"];
+    /** @default false */
+    secureTextEntry?: boolean;
+    onFocus?: (event: FocusEvent) => void;
+    onBlur?: (event: FocusEvent) => void;
+    onChange?: (text: string) => void;
+};
+type InputFieldRef = {};
+type InputFieldComponentType = {
+    (props: ComponentPropWithRef<InputFieldRef, InputFieldProps>): React.ReactElement;
+    email: (props: ComponentPropWithRef<InputFieldRef, InputFieldProps>) => React.ReactElement;
+    password: (props: ComponentPropWithRef<InputFieldRef, InputFieldProps>) => React.ReactElement;
+};
+declare const InputFieldComponent: InputFieldComponentType;
+declare const InputField: typeof InputFieldComponent & {
+    email: typeof InputFieldComponent.email;
+    password: typeof InputFieldComponent.password;
+};
+
 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 as BetterComponentsProvider, type BetterComponentsProviderConfig, Button, type ButtonProps, type ComponentMarginProps, type ComponentPaddingProps, type FooterProps, Loader, type LoaderProps, type LoaderSize, type PluginName, ScreenHolder, type ScreenHolderProps, Text, type TextProps, View, type ViewProps, asyncStoragePlugin, defaultAsyncStoragePluginOptions, generateAsyncStorage, pressStrength, useBetterComponentsContext, useDevice };
+export { Animate, type AnimateTextProps, type AnimateViewProps, type AppConfig, type AsyncStoragePluginOptions, type BetterComponentsConfig, type BetterComponentsPlugin, _default as BetterComponentsProvider, type BetterComponentsProviderConfig, Button, type ButtonProps, type ComponentMarginProps, type ComponentPaddingProps, type FooterProps, Image, type ImageProps, InputField, type InputFieldProps, Loader, type LoaderProps, type LoaderSize, type PluginName, ScreenHolder, type ScreenHolderProps, Text, type TextProps, View, type ViewProps, asyncStoragePlugin, defaultAsyncStoragePluginOptions, generateAsyncStorage, pressStrength, useBetterComponentsContext, useDevice, useKeyboard };

package/dist/index.js

@@ -33,37 +33,40 @@ __export(index_exports, {
   Animate: () => Animate_default,
   BetterComponentsProvider: () => BetterComponentsProvider_default,
   Button: () => Button_default,
+  Image: () => Image_default,
+  InputField: () => InputField_default,
   Loader: () => Loader_default,
   ScreenHolder: () => ScreenHolder_default,
   Text: () => Text_default,
   View: () => View_default,
   asyncStoragePlugin: () => asyncStoragePlugin,
-  colorThemeControls: () => import_react_better_core8.colorThemeControls,
-  countries: () => import_react_better_core8.countries,
-  darkenColor: () => import_react_better_core8.darkenColor,
+  colorThemeControls: () => import_react_better_core10.colorThemeControls,
+  countries: () => import_react_better_core10.countries,
+  darkenColor: () => import_react_better_core10.darkenColor,
   defaultAsyncStoragePluginOptions: () => defaultAsyncStoragePluginOptions,
-  desaturateColor: () => import_react_better_core8.desaturateColor,
-  eventPreventDefault: () => import_react_better_core8.eventPreventDefault,
-  eventPreventStop: () => import_react_better_core8.eventPreventStop,
-  eventStopPropagation: () => import_react_better_core8.eventStopPropagation,
-  formatPhoneNumber: () => import_react_better_core8.formatPhoneNumber,
+  desaturateColor: () => import_react_better_core10.desaturateColor,
+  eventPreventDefault: () => import_react_better_core10.eventPreventDefault,
+  eventPreventStop: () => import_react_better_core10.eventPreventStop,
+  eventStopPropagation: () => import_react_better_core10.eventStopPropagation,
+  formatPhoneNumber: () => import_react_better_core10.formatPhoneNumber,
   generateAsyncStorage: () => generateAsyncStorage,
-  generateRandomString: () => import_react_better_core8.generateRandomString,
-  getPluralWord: () => import_react_better_core8.getPluralWord,
-  lightenColor: () => import_react_better_core8.lightenColor,
-  loaderControls: () => import_react_better_core8.loaderControls,
+  generateRandomString: () => import_react_better_core10.generateRandomString,
+  getPluralWord: () => import_react_better_core10.getPluralWord,
+  lightenColor: () => import_react_better_core10.lightenColor,
+  loaderControls: () => import_react_better_core10.loaderControls,
   pressStrength: () => pressStrength,
-  saturateColor: () => import_react_better_core8.saturateColor,
+  saturateColor: () => import_react_better_core10.saturateColor,
   useBetterComponentsContext: () => useBetterComponentsContext,
-  useBooleanState: () => import_react_better_core8.useBooleanState,
-  useDebounceState: () => import_react_better_core8.useDebounceState,
+  useBooleanState: () => import_react_better_core10.useBooleanState,
+  useDebounceState: () => import_react_better_core10.useDebounceState,
   useDevice: () => useDevice,
-  useLoader: () => import_react_better_core8.useLoader,
-  useLoaderControls: () => import_react_better_core8.useLoaderControls,
-  useTheme: () => import_react_better_core8.useTheme
+  useKeyboard: () => useKeyboard,
+  useLoader: () => import_react_better_core10.useLoader,
+  useLoaderControls: () => import_react_better_core10.useLoaderControls,
+  useTheme: () => import_react_better_core10.useTheme
 });
 module.exports = __toCommonJS(index_exports);
-var import_react_better_core8 = require("react-better-core");
+var import_react_better_core10 = require("react-better-core");
 
 // src/components/BetterComponentsProvider.tsx
 var import_react = require("react");
@@ -406,6 +409,36 @@ function useDevice() {
     isSmallDevice
   };
 }
+function useKeyboard() {
+  const [keyboardOpened, setKeyboardOpened] = (0, import_react_better_core2.useBooleanState)();
+  const [keyboardWillOpen, setKeyboardWillOpen] = (0, import_react_better_core2.useBooleanState)();
+  const [keyboardHeight, setKeyboardHeight] = (0, import_react2.useState)(0);
+  (0, import_react2.useEffect)(() => {
+    const keyboardDidShow = (event) => {
+      setKeyboardOpened.setTrue();
+      setKeyboardHeight(event.endCoordinates.height);
+    };
+    const keyboardDidHide = () => {
+      setKeyboardOpened.setFalse();
+      setKeyboardHeight(0);
+    };
+    const willShowSubscription = import_react_native.Keyboard.addListener("keyboardWillShow", setKeyboardWillOpen.setTrue);
+    const willHideSubscription = import_react_native.Keyboard.addListener("keyboardWillHide", setKeyboardWillOpen.setFalse);
+    const didShowSubscription = import_react_native.Keyboard.addListener("keyboardDidShow", keyboardDidShow);
+    const didHideSubscription = import_react_native.Keyboard.addListener("keyboardDidHide", keyboardDidHide);
+    return () => {
+      willShowSubscription.remove();
+      willHideSubscription.remove();
+      didShowSubscription.remove();
+      didHideSubscription.remove();
+    };
+  }, []);
+  return {
+    isOpened: keyboardOpened,
+    willOpen: keyboardWillOpen,
+    height: keyboardHeight
+  };
+}
 function useComponentPropsGrouper(props, prefix) {
   return (0, import_react2.useMemo)(() => {
     const style = {};
@@ -718,6 +751,7 @@ var Text_default = Text2;
 
 // src/components/Button.tsx
 var import_react7 = require("react");
+var import_react_native5 = require("react-native");
 var import_react_better_core6 = require("react-better-core");
 
 // src/components/Animate.tsx
@@ -879,6 +913,7 @@ var ButtonComponent = function Button({
   const color = textColor ?? theme2.colors.base;
   const paddingVertical = props.paddingVertical ? parseFloat(props.paddingVertical.toString()) : theme2.styles.space;
   const paddingHorizontal = props.paddingHorizontal ? parseFloat(props.paddingHorizontal.toString()) : theme2.styles.space + theme2.styles.gap;
+  const buttonHeight = paddingVertical + lineHeight + paddingVertical;
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     Animate_default.View,
     {
@@ -892,6 +927,7 @@ var ButtonComponent = function Button({
         {
           position: "relative",
           width: !isSmall ? "100%" : void 0,
+          height: import_react_native5.Platform.OS === "android" ? buttonHeight : void 0,
           alignItems: "center",
           justifyContent: "center",
           backgroundColor: theme2.colors.primary,
@@ -919,7 +955,7 @@ var ButtonComponent = function Button({
               {
                 position: "absolute",
                 width: "100%",
-                height: paddingVertical + lineHeight + paddingVertical,
+                height: buttonHeight,
                 left: paddingHorizontal,
                 alignItems: "center",
                 justifyContent: "center",
@@ -978,7 +1014,7 @@ var Button_default = Button2;
 
 // src/components/ScreenHolder.tsx
 var import_react8 = require("react");
-var import_react_native5 = require("react-native");
+var import_react_native6 = require("react-native");
 var import_react_better_core7 = require("react-better-core");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var ScreenHolderComponent = ({
@@ -992,11 +1028,19 @@ var ScreenHolderComponent = ({
   insideBottomSafeArea,
   bottomSpace = 0,
   footer,
+  keepFooterOnKeyboardOpened,
   children
 }) => {
   const theme2 = (0, import_react_better_core7.useTheme)();
   const device = useDevice();
+  const keyboard = useKeyboard();
   const [isRefreshing, setIsRefreshing] = (0, import_react_better_core7.useBooleanState)();
+  const keyboardAvoidingViewStyle = (0, import_react8.useMemo)(
+    () => ({
+      flex: 1
+    }),
+    []
+  );
   const onRefreshElement = (0, import_react8.useCallback)(() => {
     setIsRefreshing.setTrue();
     onRefresh?.();
@@ -1011,21 +1055,29 @@ var ScreenHolderComponent = ({
       flex: 1,
       paddingHorizontal: !noSideSpace ? theme2.styles.space : void 0,
       paddingTop: theme2.styles.gap + (insideTopSafeArea ? device.safeArea.afterCalculations.top : 0),
-      paddingBottom: bottomSpace + (insideBottomSafeArea ? device.safeArea.afterCalculations.bottom : 0),
+      paddingBottom: import_react_native6.Platform.OS === "ios" && keyboard.isOpened ? device.safeArea.afterCalculations.top : bottomSpace + (insideBottomSafeArea ? device.safeArea.afterCalculations.bottom : 0),
       children
     }
   );
   const withRefresh = onRefresh || onRefreshEnd;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(View_default, { flex: 1, backgroundColor: backgroundColor ?? theme2.colors.backgroundBase, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(View_default, { flex: 1, children: noScroll ? content : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      import_react_native5.ScrollView,
-      {
-        refreshControl: withRefresh ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native5.RefreshControl, { refreshing: isRefreshing, onRefresh: onRefreshElement }) : void 0,
-        children: content
-      }
-    ) }),
-    footer && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(View_default, { children: footer })
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(View_default, { flex: 1, backgroundColor: backgroundColor ?? theme2.colors.backgroundBase, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    import_react_native6.KeyboardAvoidingView,
+    {
+      style: keyboardAvoidingViewStyle,
+      keyboardVerticalOffset: keepFooterOnKeyboardOpened ? import_react_native6.Platform.OS === "ios" ? device.safeArea.afterCalculations.bottom : theme2.styles.gap : void 0,
+      behavior: import_react_native6.Platform.OS === "ios" ? "padding" : "height",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(View_default, { flex: 1, children: noScroll ? content : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          import_react_native6.ScrollView,
+          {
+            refreshControl: withRefresh ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native6.RefreshControl, { refreshing: isRefreshing, onRefresh: onRefreshElement }) : void 0,
+            children: content
+          }
+        ) }),
+        keepFooterOnKeyboardOpened || (import_react_native6.Platform.OS === "ios" ? !keyboard.willOpen : !keyboard.isOpened) ? footer && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(View_default, { children: footer }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(View_default, { width: "100%", height: device.safeArea.afterCalculations.bottom })
+      ]
+    }
+  ) });
 };
 ScreenHolderComponent.footer = function Footer({
   noSideSpace,
@@ -1050,6 +1102,242 @@ var ScreenHolder = (0, import_react8.memo)(ScreenHolderComponent);
 ScreenHolder.footer = ScreenHolderComponent.footer;
 var ScreenHolder_default = ScreenHolder;
 
+// src/components/Image.tsx
+var import_react9 = require("react");
+var import_react_better_core8 = require("react-better-core");
+var import_react_native7 = require("react-native");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var ImageComponent = function Image({ name, source, withDevFittingMode, ...props }) {
+  const { assets: assets2 } = (0, import_react_better_core8.useBetterCoreContext)();
+  const style = (0, import_react9.useMemo)(
+    () => ({
+      width: 100,
+      height: 100,
+      ...withDevFittingMode ? {
+        borderWidth: 1,
+        borderColor: "#eb39f7"
+      } : {},
+      ...props
+    }),
+    [withDevFittingMode, props]
+  );
+  (0, import_react9.useEffect)(() => {
+    if (!name) return;
+    if (!assets2[name.toString()])
+      console.warn(
+        `The asset \`${name}\` you are trying to use does not exist. Make sure to add it to the \`assets\` object in \`<BetterComponentsProvider>\` config value prop.`
+      );
+  }, [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 }) {
+  const theme2 = (0, import_react_better_core8.useTheme)();
+  return letters ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    View_default,
+    {
+      width: size,
+      height: size,
+      backgroundColor: backgroundColor ?? theme2.colors.backgroundSecondary,
+      borderWidth: 1,
+      borderColor: theme2.colors.border,
+      borderRadius: 999,
+      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) })
+    }
+  ) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    ImageComponent,
+    {
+      width: size,
+      height: size,
+      borderWidth: 1,
+      borderColor: theme2.colors.border,
+      borderRadius: 999,
+      objectFit: "cover",
+      ...props
+    }
+  );
+};
+var Image2 = (0, import_react9.memo)(ImageComponent);
+Image2.profileImage = ImageComponent.profileImage;
+var Image_default = Image2;
+
+// src/components/InputField.tsx
+var import_react10 = require("react");
+var import_react_native8 = require("react-native");
+var import_react_better_core9 = require("react-better-core");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var InputFieldComponent = (0, import_react10.forwardRef)(
+  ({
+    placeholder,
+    prefix,
+    suffix,
+    defaultValue,
+    value,
+    editable = true,
+    autoFocus,
+    autoCapitalize,
+    autoComplete,
+    autoCorrect,
+    keyboardAppearance = "default",
+    keyboardType,
+    secureTextEntry,
+    onFocus,
+    onBlur,
+    onChange
+  }, ref) => {
+    const theme2 = (0, import_react_better_core9.useTheme)();
+    const { colorTheme } = (0, import_react_better_core9.useBetterCoreContext)();
+    const [internalValue, setInternalValue] = (0, import_react10.useState)(value?.toString() || defaultValue || "");
+    const [isFocused, setIsFocused] = (0, import_react_better_core9.useBooleanState)();
+    const paddingHorizontal = theme2.styles.space;
+    const paddingVertical = (theme2.styles.space + theme2.styles.gap) / 2;
+    const onFocusElement = (0, import_react10.useCallback)((event) => {
+      setIsFocused.setTrue();
+      onFocus?.(event);
+    }, []);
+    const onBlurElement = (0, import_react10.useCallback)((event) => {
+      setIsFocused.setFalse();
+      onBlur?.(event);
+    }, []);
+    const onChangeText = (0, import_react10.useCallback)(
+      (text) => {
+        setInternalValue(text);
+        onChange?.(text);
+      },
+      [onChange]
+    );
+    const textInputStyle = (0, import_react10.useMemo)(
+      () => ({
+        flex: 1,
+        fontSize: 16,
+        lineHeight: 20,
+        color: theme2.colors.textPrimary,
+        paddingHorizontal,
+        paddingVertical
+      }),
+      [theme2.colors, paddingHorizontal, paddingVertical]
+    );
+    (0, import_react10.useEffect)(() => {
+      if (value === void 0) return;
+      setInternalValue(value.toString());
+    }, [value]);
+    (0, import_react10.useImperativeHandle)(
+      ref,
+      () => {
+        return {};
+      },
+      []
+    );
+    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);
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(View_default, { isRow: true, position: "relative", alignItems: "center", children: [
+      prefix && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        View_default,
+        {
+          isRow: true,
+          height: "100%",
+          backgroundColor: prefixSuffixBackgroundColor,
+          alignItems: "center",
+          borderWidth: 1,
+          borderRightWidth: 0,
+          borderTopLeftRadius: theme2.styles.borderRadius,
+          borderBottomLeftRadius: theme2.styles.borderRadius,
+          borderColor: theme2.colors.border,
+          paddingHorizontal,
+          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text_default, { fontWeight: 700, children: prefix })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        Animate_default.View,
+        {
+          flex: 1,
+          backgroundColor: theme2.colors.backgroundContent,
+          borderTopLeftRadius: prefix ? 0 : theme2.styles.borderRadius,
+          borderBottomLeftRadius: prefix ? 0 : theme2.styles.borderRadius,
+          borderTopRightRadius: suffix ? 0 : theme2.styles.borderRadius,
+          borderBottomRightRadius: suffix ? 0 : theme2.styles.borderRadius,
+          borderWidth: 1,
+          initialBorderColor: theme2.colors.border,
+          animateBorderColor: isFocused ? theme2.colors.primary : 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,
+              placeholderTextColor: theme2.colors.textSecondary + "80",
+              readOnly: !editable,
+              keyboardAppearance,
+              keyboardType,
+              cursorColor: theme2.colors.primary,
+              selectionColor: theme2.colors.primary,
+              secureTextEntry,
+              onFocus: onFocusElement,
+              onBlur: onBlurElement,
+              onChangeText
+            }
+          )
+        }
+      ),
+      suffix && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        View_default,
+        {
+          isRow: true,
+          height: "100%",
+          backgroundColor: prefixSuffixBackgroundColor,
+          alignItems: "center",
+          borderWidth: 1,
+          borderLeftWidth: 0,
+          borderTopRightRadius: theme2.styles.borderRadius,
+          borderBottomRightRadius: theme2.styles.borderRadius,
+          borderColor: theme2.colors.border,
+          paddingHorizontal,
+          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text_default, { fontWeight: 700, children: suffix })
+        }
+      )
+    ] });
+  }
+);
+InputFieldComponent.email = (0, import_react10.forwardRef)(function Email(props, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    InputFieldComponent,
+    {
+      placeholder: "your@email.here",
+      autoComplete: "email",
+      keyboardType: "email-address",
+      autoCapitalize: "none",
+      autoCorrect: false,
+      ...props,
+      ref
+    }
+  );
+});
+InputFieldComponent.password = (0, import_react10.forwardRef)(function Password(props, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    InputFieldComponent,
+    {
+      secureTextEntry: true,
+      placeholder: "******",
+      autoCapitalize: "none",
+      autoComplete: "password",
+      autoCorrect: false,
+      ...props,
+      ref
+    }
+  );
+});
+var InputField = (0, import_react10.memo)(InputFieldComponent);
+InputField.email = InputFieldComponent.email;
+InputField.password = InputFieldComponent.password;
+var InputField_default = InputField;
+
 // src/plugins/asyncStorage.ts
 var defaultAsyncStoragePluginOptions = {};
 var asyncStoragePlugin = (options) => ({
@@ -1067,6 +1355,8 @@ var asyncStoragePlugin = (options) => ({
   Animate,
   BetterComponentsProvider,
   Button,
+  Image,
+  InputField,
   Loader,
   ScreenHolder,
   Text,
@@ -1092,6 +1382,7 @@ var asyncStoragePlugin = (options) => ({
   useBooleanState,
   useDebounceState,
   useDevice,
+  useKeyboard,
   useLoader,
   useLoaderControls,
   useTheme