react-native-better-html 1.0.8 → 1.0.10

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, ImageSourcePropType, ImageProps as ImageProps$1, ImageStyle, TextInput, FocusEvent } from 'react-native';
+import { ViewStyle, GestureResponderEvent, ViewProps as ViewProps$1, TextProps as TextProps$1, TextStyle, ColorValue, ImageSourcePropType, ImageProps as ImageProps$1, ImageStyle, TextInput, FocusEvent, NativeSyntheticEvent, NativeTouchEvent, TextInputSubmitEditingEvent } from 'react-native';
 import { EaseFunction, PropsTransforms } from '@legendapp/motion';
 
 type AppConfig = {};
@@ -30,7 +30,7 @@ type BetterComponentsProviderProps = BetterProviderCommonProps & {
     config?: BetterComponentsProviderConfig;
 };
 declare function BetterComponentsProvider({ config, ...props }: BetterComponentsProviderProps): react_jsx_runtime.JSX.Element;
-declare const _default: react.MemoExoticComponent<typeof BetterComponentsProvider>;
+declare const _default$1: react.MemoExoticComponent<typeof BetterComponentsProvider>;
 
 type ComponentStyle<Style extends ViewStyle = ViewStyle> = OmitProps<Style, "shadowOffset" | ComponentExcludeMarginProps | ComponentExcludePaddingProps> & {
     shadowOffsetWidth?: number;
@@ -332,24 +332,46 @@ type InputFieldProps = {
     keyboardType?: React.ComponentProps<typeof TextInput>["keyboardType"];
     /** @default false */
     secureTextEntry?: boolean;
+    returnKeyLabel?: React.ComponentProps<typeof TextInput>["enterKeyHint"];
+    returnKeyType?: React.ComponentProps<typeof TextInput>["returnKeyType"];
+    height?: number;
+    /** @default 16 */
+    fontSize?: number;
+    /** @default 400 */
+    fontWeight?: TextStyle["fontWeight"];
+    /** @default 20 */
+    lineHeight?: number;
+    textAlign?: React.ComponentProps<typeof TextInput>["textAlign"];
     onFocus?: (event: FocusEvent) => void;
     onBlur?: (event: FocusEvent) => void;
     onChange?: (text: string) => void;
-};
-type InputFieldRef = {};
+    onPress?: (event: NativeSyntheticEvent<NativeTouchEvent>) => void;
+    onPressEnter?: (event: TextInputSubmitEditingEvent) => void;
+} & Pick<ComponentPaddingProps, "paddingHorizontal" | "paddingVertical">;
+type InputFieldRef = TextInput;
 type InputFieldComponentType = {
-    (props: ComponentPropWithRef<InputFieldRef, InputFieldProps>): React.ReactElement;
-    email: (props: ComponentPropWithRef<InputFieldRef, InputFieldProps>) => React.ReactElement;
-    password: (props: ComponentPropWithRef<InputFieldRef, InputFieldProps>) => React.ReactElement;
+    (props: ComponentPropWithRef<TextInput, InputFieldProps>): React.ReactElement;
+    email: (props: ComponentPropWithRef<TextInput, InputFieldProps>) => React.ReactElement;
+    password: (props: ComponentPropWithRef<TextInput, InputFieldProps>) => React.ReactElement;
+    code: (props: ComponentPropWithRef<TextInput, InputFieldProps>) => React.ReactElement;
 };
 declare const InputFieldComponent: InputFieldComponentType;
 declare const InputField: typeof InputFieldComponent & {
     email: typeof InputFieldComponent.email;
     password: typeof InputFieldComponent.password;
+    code: typeof InputFieldComponent.code;
+};
+
+type StatusBarProps = {
+    darkStatusBar?: boolean;
+    /** @default false */
+    hidden?: boolean;
 };
+declare function StatusBar({ darkStatusBar, hidden }: StatusBarProps): react_jsx_runtime.JSX.Element;
+declare const _default: react.MemoExoticComponent<typeof StatusBar>;
 
 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, 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 };
+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, 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, 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, ImageSourcePropType, ImageProps as ImageProps$1, ImageStyle, TextInput, FocusEvent } from 'react-native';
+import { ViewStyle, GestureResponderEvent, ViewProps as ViewProps$1, TextProps as TextProps$1, TextStyle, ColorValue, ImageSourcePropType, ImageProps as ImageProps$1, ImageStyle, TextInput, FocusEvent, NativeSyntheticEvent, NativeTouchEvent, TextInputSubmitEditingEvent } from 'react-native';
 import { EaseFunction, PropsTransforms } from '@legendapp/motion';
 
 type AppConfig = {};
@@ -30,7 +30,7 @@ type BetterComponentsProviderProps = BetterProviderCommonProps & {
     config?: BetterComponentsProviderConfig;
 };
 declare function BetterComponentsProvider({ config, ...props }: BetterComponentsProviderProps): react_jsx_runtime.JSX.Element;
-declare const _default: react.MemoExoticComponent<typeof BetterComponentsProvider>;
+declare const _default$1: react.MemoExoticComponent<typeof BetterComponentsProvider>;
 
 type ComponentStyle<Style extends ViewStyle = ViewStyle> = OmitProps<Style, "shadowOffset" | ComponentExcludeMarginProps | ComponentExcludePaddingProps> & {
     shadowOffsetWidth?: number;
@@ -332,24 +332,46 @@ type InputFieldProps = {
     keyboardType?: React.ComponentProps<typeof TextInput>["keyboardType"];
     /** @default false */
     secureTextEntry?: boolean;
+    returnKeyLabel?: React.ComponentProps<typeof TextInput>["enterKeyHint"];
+    returnKeyType?: React.ComponentProps<typeof TextInput>["returnKeyType"];
+    height?: number;
+    /** @default 16 */
+    fontSize?: number;
+    /** @default 400 */
+    fontWeight?: TextStyle["fontWeight"];
+    /** @default 20 */
+    lineHeight?: number;
+    textAlign?: React.ComponentProps<typeof TextInput>["textAlign"];
     onFocus?: (event: FocusEvent) => void;
     onBlur?: (event: FocusEvent) => void;
     onChange?: (text: string) => void;
-};
-type InputFieldRef = {};
+    onPress?: (event: NativeSyntheticEvent<NativeTouchEvent>) => void;
+    onPressEnter?: (event: TextInputSubmitEditingEvent) => void;
+} & Pick<ComponentPaddingProps, "paddingHorizontal" | "paddingVertical">;
+type InputFieldRef = TextInput;
 type InputFieldComponentType = {
-    (props: ComponentPropWithRef<InputFieldRef, InputFieldProps>): React.ReactElement;
-    email: (props: ComponentPropWithRef<InputFieldRef, InputFieldProps>) => React.ReactElement;
-    password: (props: ComponentPropWithRef<InputFieldRef, InputFieldProps>) => React.ReactElement;
+    (props: ComponentPropWithRef<TextInput, InputFieldProps>): React.ReactElement;
+    email: (props: ComponentPropWithRef<TextInput, InputFieldProps>) => React.ReactElement;
+    password: (props: ComponentPropWithRef<TextInput, InputFieldProps>) => React.ReactElement;
+    code: (props: ComponentPropWithRef<TextInput, InputFieldProps>) => React.ReactElement;
 };
 declare const InputFieldComponent: InputFieldComponentType;
 declare const InputField: typeof InputFieldComponent & {
     email: typeof InputFieldComponent.email;
     password: typeof InputFieldComponent.password;
+    code: typeof InputFieldComponent.code;
+};
+
+type StatusBarProps = {
+    darkStatusBar?: boolean;
+    /** @default false */
+    hidden?: boolean;
 };
+declare function StatusBar({ darkStatusBar, hidden }: StatusBarProps): react_jsx_runtime.JSX.Element;
+declare const _default: react.MemoExoticComponent<typeof StatusBar>;
 
 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, 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 };
+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, 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, pressStrength, useBetterComponentsContext, useDevice, useKeyboard };

package/dist/index.js

@@ -37,36 +37,37 @@ __export(index_exports, {
   InputField: () => InputField_default,
   Loader: () => Loader_default,
   ScreenHolder: () => ScreenHolder_default,
+  StatusBar: () => StatusBar_default,
   Text: () => Text_default,
   View: () => View_default,
   asyncStoragePlugin: () => asyncStoragePlugin,
-  colorThemeControls: () => import_react_better_core10.colorThemeControls,
-  countries: () => import_react_better_core10.countries,
-  darkenColor: () => import_react_better_core10.darkenColor,
+  colorThemeControls: () => import_react_better_core11.colorThemeControls,
+  countries: () => import_react_better_core11.countries,
+  darkenColor: () => import_react_better_core11.darkenColor,
   defaultAsyncStoragePluginOptions: () => defaultAsyncStoragePluginOptions,
-  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,
+  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,
   generateAsyncStorage: () => generateAsyncStorage,
-  generateRandomString: () => import_react_better_core10.generateRandomString,
-  getPluralWord: () => import_react_better_core10.getPluralWord,
-  lightenColor: () => import_react_better_core10.lightenColor,
-  loaderControls: () => import_react_better_core10.loaderControls,
+  generateRandomString: () => import_react_better_core11.generateRandomString,
+  getPluralWord: () => import_react_better_core11.getPluralWord,
+  lightenColor: () => import_react_better_core11.lightenColor,
+  loaderControls: () => import_react_better_core11.loaderControls,
   pressStrength: () => pressStrength,
-  saturateColor: () => import_react_better_core10.saturateColor,
+  saturateColor: () => import_react_better_core11.saturateColor,
   useBetterComponentsContext: () => useBetterComponentsContext,
-  useBooleanState: () => import_react_better_core10.useBooleanState,
-  useDebounceState: () => import_react_better_core10.useDebounceState,
+  useBooleanState: () => import_react_better_core11.useBooleanState,
+  useDebounceState: () => import_react_better_core11.useDebounceState,
   useDevice: () => useDevice,
   useKeyboard: () => useKeyboard,
-  useLoader: () => import_react_better_core10.useLoader,
-  useLoaderControls: () => import_react_better_core10.useLoaderControls,
-  useTheme: () => import_react_better_core10.useTheme
+  useLoader: () => import_react_better_core11.useLoader,
+  useLoaderControls: () => import_react_better_core11.useLoaderControls,
+  useTheme: () => import_react_better_core11.useTheme
 });
 module.exports = __toCommonJS(index_exports);
-var import_react_better_core10 = require("react-better-core");
+var import_react_better_core11 = require("react-better-core");
 
 // src/components/BetterComponentsProvider.tsx
 var import_react = require("react");
@@ -1193,19 +1194,30 @@ var InputFieldComponent = (0, import_react10.forwardRef)(
     keyboardAppearance = "default",
     keyboardType,
     secureTextEntry,
+    returnKeyLabel,
+    returnKeyType,
+    height,
+    fontSize = 16,
+    fontWeight = 400,
+    lineHeight = 20,
+    textAlign,
+    paddingHorizontal,
+    paddingVertical,
     onFocus,
     onBlur,
-    onChange
+    onChange,
+    onPress,
+    onPressEnter
   }, 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 [isFocused, setIsFocused] = (0, import_react_better_core9.useBooleanState)();
     const borderWidth = 1;
-    const lineHeight = 20;
-    const paddingHorizontal = theme2.styles.space;
-    const paddingVertical = (theme2.styles.space + theme2.styles.gap) / 2;
-    const height = borderWidth + paddingVertical + lineHeight + paddingVertical + borderWidth;
+    const readyPaddingHorizontal = paddingHorizontal ?? theme2.styles.space;
+    const readyPaddingVertical = paddingVertical ? parseFloat(paddingVertical.toString()) : (theme2.styles.space + theme2.styles.gap) / 2;
+    const readyHeight = height ?? borderWidth + readyPaddingVertical + lineHeight + readyPaddingVertical + borderWidth;
     const onFocusElement = (0, import_react10.useCallback)((event) => {
       setIsFocused.setTrue();
       onFocus?.(event);
@@ -1224,13 +1236,14 @@ var InputFieldComponent = (0, import_react10.forwardRef)(
     const textInputStyle = (0, import_react10.useMemo)(
       () => ({
         flex: 1,
-        fontSize: 16,
+        fontSize,
+        fontWeight,
         lineHeight,
         color: theme2.colors.textPrimary,
-        paddingHorizontal,
-        paddingVertical
+        paddingHorizontal: readyPaddingHorizontal,
+        paddingVertical: readyPaddingVertical
       }),
-      [theme2.colors, lineHeight, paddingHorizontal, paddingVertical]
+      [theme2.colors, fontSize, fontWeight, lineHeight, readyPaddingHorizontal, readyPaddingVertical]
     );
     (0, import_react10.useEffect)(() => {
       if (value === void 0) return;
@@ -1239,12 +1252,12 @@ var InputFieldComponent = (0, import_react10.forwardRef)(
     (0, import_react10.useImperativeHandle)(
       ref,
       () => {
-        return {};
+        return textInputRef.current;
       },
       []
     );
     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", height, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(View_default, { isRow: true, position: "relative", alignItems: "center", flex: 1, height: readyHeight, children: [
       prefix && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         View_default,
         {
@@ -1257,7 +1270,7 @@ var InputFieldComponent = (0, import_react10.forwardRef)(
           borderTopLeftRadius: theme2.styles.borderRadius,
           borderBottomLeftRadius: theme2.styles.borderRadius,
           borderColor: theme2.colors.border,
-          paddingHorizontal,
+          paddingHorizontal: readyPaddingHorizontal,
           children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text_default, { fontWeight: 700, children: prefix })
         }
       ),
@@ -1286,7 +1299,11 @@ var InputFieldComponent = (0, import_react10.forwardRef)(
               autoFocus,
               placeholder,
               placeholderTextColor: theme2.colors.textSecondary + "80",
+              enterKeyHint: returnKeyLabel,
+              returnKeyType,
+              onSubmitEditing: onPressEnter,
               readOnly: !editable,
+              textAlign,
               keyboardAppearance,
               keyboardType,
               cursorColor: theme2.colors.primary,
@@ -1294,7 +1311,9 @@ var InputFieldComponent = (0, import_react10.forwardRef)(
               secureTextEntry,
               onFocus: onFocusElement,
               onBlur: onBlurElement,
-              onChangeText
+              onChangeText,
+              onPress,
+              ref: textInputRef
             }
           )
         }
@@ -1311,7 +1330,7 @@ var InputFieldComponent = (0, import_react10.forwardRef)(
           borderTopRightRadius: theme2.styles.borderRadius,
           borderBottomRightRadius: theme2.styles.borderRadius,
           borderColor: theme2.colors.border,
-          paddingHorizontal,
+          paddingHorizontal: readyPaddingHorizontal,
           children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text_default, { fontWeight: 700, children: suffix })
         }
       )
@@ -1346,11 +1365,44 @@ InputFieldComponent.password = (0, import_react10.forwardRef)(function Password(
     }
   );
 });
+InputFieldComponent.code = (0, import_react10.forwardRef)(function Password2(props, ref) {
+  const theme2 = (0, import_react_better_core9.useTheme)();
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    InputFieldComponent,
+    {
+      fontSize: 42,
+      fontWeight: 900,
+      lineHeight: 50,
+      paddingVertical: theme2.styles.space * 2,
+      textAlign: "center",
+      ...props,
+      ref
+    }
+  );
+});
 var InputField = (0, import_react10.memo)(InputFieldComponent);
 InputField.email = InputFieldComponent.email;
 InputField.password = InputFieldComponent.password;
+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");
+function StatusBar({ darkStatusBar, hidden }) {
+  const theme2 = (0, import_react_better_core10.useTheme)();
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    import_react_native9.StatusBar,
+    {
+      backgroundColor: darkStatusBar ? theme2.colors.backgroundSecondary : void 0,
+      hidden
+    }
+  );
+}
+var StatusBar_default = (0, import_react11.memo)(StatusBar);
+
 // src/plugins/asyncStorage.ts
 var defaultAsyncStoragePluginOptions = {};
 var asyncStoragePlugin = (options) => ({
@@ -1372,6 +1424,7 @@ var asyncStoragePlugin = (options) => ({
   InputField,
   Loader,
   ScreenHolder,
+  StatusBar,
   Text,
   View,
   asyncStoragePlugin,