react-native-better-html 1.0.2 → 1.0.4

package/dist/index.mjs

@@ -0,0 +1,1343 @@
+// src/index.ts
+import {
+  useTheme as useTheme9,
+  useLoader as useLoader2,
+  useLoaderControls,
+  countries,
+  lightenColor as lightenColor2,
+  darkenColor as darkenColor2,
+  saturateColor,
+  desaturateColor,
+  generateRandomString,
+  formatPhoneNumber,
+  eventPreventDefault,
+  eventStopPropagation,
+  eventPreventStop,
+  getPluralWord,
+  useBooleanState as useBooleanState5,
+  useDebounceState,
+  loaderControls,
+  colorThemeControls
+} from "react-better-core";
+
+// src/components/BetterComponentsProvider.tsx
+import { createContext, memo, useContext, useEffect, useMemo } from "react";
+import {
+  useBooleanState,
+  BetterCoreProvider,
+  useBetterCoreContext
+} from "react-better-core";
+
+// src/constants/app.ts
+var appConfig = {};
+
+// src/constants/theme.ts
+var theme = {};
+
+// src/constants/icons.ts
+var icons = {};
+
+// src/constants/assets.ts
+var assets = {};
+
+// src/components/BetterComponentsProvider.tsx
+import { Fragment, jsx } from "react/jsx-runtime";
+var betterComponentsContext = createContext(void 0);
+var externalBetterCoreContextValue;
+var externalBetterComponentsContextValue;
+var useBetterComponentsContext = () => {
+  const coreContext = useBetterCoreContext();
+  const context = useContext(betterComponentsContext);
+  if (context === void 0)
+    throw new Error(
+      "`useBetterComponentsContext()` must be used within a `<BetterComponentsProvider>`. Make sure to add one at the root of your component tree."
+    );
+  const { plugins, componentsState, ...rest } = context;
+  return {
+    ...coreContext,
+    ...rest
+  };
+};
+function BetterComponentsProviderInternalContent({ children }) {
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
+function BetterComponentsProviderInternal({
+  config,
+  plugins,
+  children
+}) {
+  const betterCoreContext = useBetterCoreContext();
+  const [sideMenuIsCollapsed, setSideMenuIsCollapsed] = useBooleanState();
+  const [sideMenuIsOpenMobile, setSideMenuIsOpenMobile] = useBooleanState();
+  const readyConfig = useMemo(
+    () => ({
+      app: {
+        ...appConfig,
+        ...config?.app
+      },
+      sideMenuIsCollapsed,
+      setSideMenuIsCollapsed,
+      sideMenuIsOpenMobile,
+      setSideMenuIsOpenMobile,
+      plugins: plugins ?? [],
+      componentsState: {}
+    }),
+    [config, sideMenuIsCollapsed, sideMenuIsOpenMobile, plugins]
+  );
+  useEffect(() => {
+    if (!plugins) return;
+    plugins.forEach((plugin) => {
+      plugin.initialize?.();
+    });
+  }, []);
+  externalBetterCoreContextValue = betterCoreContext;
+  externalBetterComponentsContextValue = readyConfig;
+  return /* @__PURE__ */ jsx(betterComponentsContext.Provider, { value: readyConfig, children: /* @__PURE__ */ jsx(BetterComponentsProviderInternalContent, { children }) });
+}
+function BetterComponentsProvider({ config, ...props }) {
+  const coreConfig = useMemo(
+    () => ({
+      theme: {
+        ...theme,
+        ...config?.theme
+      },
+      // colorTheme: config?.colorTheme ?? (localStorage.getItem("theme") === "dark" ? "dark" : "light"),
+      colorTheme: config?.colorTheme ?? "light",
+      icons: {
+        ...icons,
+        ...config?.icons
+      },
+      assets: {
+        ...assets,
+        ...config?.assets
+      },
+      loaders: config?.loaders
+    }),
+    [config]
+  );
+  const componentsConfig = useMemo(
+    () => ({
+      app: config?.app
+    }),
+    [config]
+  );
+  return /* @__PURE__ */ jsx(BetterCoreProvider, { config: coreConfig, children: /* @__PURE__ */ jsx(BetterComponentsProviderInternal, { config: componentsConfig, ...props }) });
+}
+var BetterComponentsProvider_default = memo(BetterComponentsProvider);
+
+// src/utils/variableFunctions.ts
+var checkBetterCoreContextValue = (value, functionsName) => {
+  if (value === void 0) {
+    throw new Error(
+      `\`${functionsName}()\` must be used within a \`<BetterCoreProvider>\`. Make sure to add one at the root of your component tree.`
+    );
+  }
+  return value !== void 0;
+};
+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
+  };
+};
+
+// src/utils/hooks.ts
+import { useEffect as useEffect2, useMemo as useMemo2, useState } from "react";
+import { Dimensions, Keyboard } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useBooleanState as useBooleanState2, useTheme } from "react-better-core";
+
+// src/constants/css.ts
+var cssProps = /* @__PURE__ */ new Set([
+  "aligncontent",
+  "alignitems",
+  "alignself",
+  "aspectratio",
+  "borderbottomwidth",
+  "borderendwidth",
+  "borderleftwidth",
+  "borderrightwidth",
+  "borderstartwidth",
+  "bordertopwidth",
+  "borderwidth",
+  "bottom",
+  "boxsizing",
+  "display",
+  "end",
+  "flex",
+  "flexbasis",
+  "flexdirection",
+  "rowgap",
+  "gap",
+  "columngap",
+  "flexgrow",
+  "flexshrink",
+  "flexwrap",
+  "height",
+  "justifycontent",
+  "left",
+  "margin",
+  "marginbottom",
+  "marginend",
+  "marginhorizontal",
+  "marginleft",
+  "marginright",
+  "marginstart",
+  "margintop",
+  "marginvertical",
+  "maxheight",
+  "maxwidth",
+  "minheight",
+  "minwidth",
+  "overflow",
+  "padding",
+  "paddingbottom",
+  "paddingend",
+  "paddinghorizontal",
+  "paddingleft",
+  "paddingright",
+  "paddingstart",
+  "paddingtop",
+  "paddingvertical",
+  "position",
+  "right",
+  "start",
+  "top",
+  "width",
+  "zindex",
+  "direction",
+  "inset",
+  "insetblock",
+  "insetblockend",
+  "insetblockstart",
+  "insetinline",
+  "insetinlineend",
+  "insetinlinestart",
+  "marginblock",
+  "marginblockend",
+  "marginblockstart",
+  "margininline",
+  "margininlineend",
+  "margininlinestart",
+  "paddingblock",
+  "paddingblockend",
+  "paddingblockstart",
+  "paddinginline",
+  "paddinginlineend",
+  "paddinginlinestart",
+  "shadowcolor",
+  "shadowoffset",
+  "shadowopacity",
+  "shadowradius",
+  "transform",
+  "transformorigin",
+  "transformmatrix",
+  "rotation",
+  "scalex",
+  "scaley",
+  "translatex",
+  "translatey",
+  "backfacevisibility",
+  "backgroundcolor",
+  "borderblockcolor",
+  "borderblockendcolor",
+  "borderblockstartcolor",
+  "borderbottomcolor",
+  "borderbottomendradius",
+  "borderbottomleftradius",
+  "borderbottomrightradius",
+  "borderbottomstartradius",
+  "bordercolor",
+  "bordercurve",
+  "borderendcolor",
+  "borderendendradius",
+  "borderendstartradius",
+  "borderleftcolor",
+  "borderradius",
+  "borderrightcolor",
+  "borderstartcolor",
+  "borderstartendradius",
+  "borderstartstartradius",
+  "borderstyle",
+  "bordertopcolor",
+  "bordertopendradius",
+  "bordertopleftradius",
+  "bordertoprightradius",
+  "bordertopstartradius",
+  "outlinecolor",
+  "outlineoffset",
+  "outlinestyle",
+  "outlinewidth",
+  "opacity",
+  "elevation",
+  "pointerevents",
+  "isolation",
+  "cursor",
+  "boxshadow",
+  "filter",
+  "mixblendmode",
+  "fontvariant",
+  "textdecorationcolor",
+  "textdecorationstyle",
+  "writingdirection",
+  "textalignvertical",
+  "verticalalign",
+  "includefontpadding",
+  "color",
+  "fontfamily",
+  "fontsize",
+  "fontstyle",
+  "fontweight",
+  "letterspacing",
+  "lineheight",
+  "textalign",
+  "textdecorationline",
+  "textdecorationstyle",
+  "textdecorationcolor",
+  "textshadowcolor",
+  "textshadowoffset",
+  "textshadowradius",
+  "texttransform",
+  "userselect"
+]);
+var animateProps = /* @__PURE__ */ new Set([
+  "x",
+  "y",
+  "scale",
+  "scaleX",
+  "scaleY",
+  "skewX",
+  "skewY",
+  "perspective",
+  "rotate",
+  "rotateX",
+  "rotateY",
+  "rotateZ",
+  "matrix"
+]);
+var animateTransitionProps = /* @__PURE__ */ new Set([
+  "type",
+  "ease",
+  "easing",
+  "duration",
+  "delay",
+  "type",
+  "friction",
+  "tension",
+  "speed",
+  "bounciness",
+  "stiffness",
+  "damping",
+  "mass",
+  "overshootClamping",
+  "restDisplacementThreshold",
+  "restSpeedThreshold",
+  "velocity",
+  "loop"
+]);
+
+// src/utils/hooks.ts
+function useDevice() {
+  const theme2 = useTheme();
+  const safeAreaInsets = useSafeAreaInsets();
+  const screenDimensions = Dimensions.get("screen");
+  const windowDimensions = Dimensions.get("window");
+  const isSmallDevice = windowDimensions.height <= 700;
+  return {
+    safeArea: {
+      ...safeAreaInsets,
+      /** @description The safe area insets after calculations. Recommended to use this instead of the raw insets. */
+      afterCalculations: {
+        top: safeAreaInsets.top < 25 ? 32 : safeAreaInsets.top < 40 ? 40 : safeAreaInsets.top,
+        bottom: (safeAreaInsets.bottom === 0 ? theme2.styles.space : safeAreaInsets.bottom) + (isSmallDevice ? 0 : theme2.styles.space * 2),
+        left: safeAreaInsets.left,
+        right: safeAreaInsets.right
+      }
+    },
+    /** @description The dimensions of the device screen. */
+    screenDimensions,
+    /** @description The dimensions of the app window. */
+    windowDimensions,
+    /** @description Whether the device is small. */
+    isSmallDevice
+  };
+}
+function useKeyboard() {
+  const [keyboardOpened, setKeyboardOpened] = useBooleanState2();
+  const [keyboardWillOpen, setKeyboardWillOpen] = useBooleanState2();
+  const [keyboardHeight, setKeyboardHeight] = useState(0);
+  useEffect2(() => {
+    const keyboardDidShow = (event) => {
+      setKeyboardOpened.setTrue();
+      setKeyboardHeight(event.endCoordinates.height);
+    };
+    const keyboardDidHide = () => {
+      setKeyboardOpened.setFalse();
+      setKeyboardHeight(0);
+    };
+    const willShowSubscription = Keyboard.addListener("keyboardWillShow", setKeyboardWillOpen.setTrue);
+    const willHideSubscription = Keyboard.addListener("keyboardWillHide", setKeyboardWillOpen.setFalse);
+    const didShowSubscription = Keyboard.addListener("keyboardDidShow", keyboardDidShow);
+    const didHideSubscription = 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 useMemo2(() => {
+    const style = {};
+    const withPrefixStyle = {};
+    const restProps = {};
+    for (const key in props) {
+      const keyName = key;
+      if (cssProps.has(keyName.toLowerCase())) {
+        style[keyName] = props[keyName];
+      } else if (keyName.startsWith(prefix) && (cssProps.has(keyName.slice(prefix.length).toLowerCase()) || animateProps.has(keyName.slice(prefix.length).toLowerCase()) || animateTransitionProps.has(keyName.slice(prefix.length).toLowerCase()))) {
+        const realKey = `${keyName.slice(prefix.length, prefix.length + 1).toLowerCase()}${keyName.slice(
+          prefix.length + 1
+        )}`;
+        withPrefixStyle[realKey] = props[keyName];
+      } else {
+        restProps[keyName] = props[keyName];
+      }
+    }
+    return {
+      style,
+      withPrefixStyle,
+      restProps
+    };
+  }, [props, prefix]);
+}
+
+// src/utils/asyncStorage.ts
+import NativeAsyncStorage from "@react-native-async-storage/async-storage";
+function generateAsyncStorage() {
+  return {
+    setItem: async (name, value) => {
+      if (value) await NativeAsyncStorage.setItem(name.toString(), JSON.stringify(value));
+      else await NativeAsyncStorage.removeItem(name.toString());
+    },
+    getItem: async (name) => {
+      const item = await NativeAsyncStorage.getItem(name.toString());
+      if (item === null) return void 0;
+      try {
+        return JSON.parse(item);
+      } catch (error) {
+        return void 0;
+      }
+    },
+    removeItem: async (name) => {
+      await NativeAsyncStorage.removeItem(name.toString());
+    },
+    removeAllItems: () => {
+      NativeAsyncStorage.clear();
+    }
+  };
+}
+
+// src/components/View.tsx
+import { memo as memo2, useMemo as useMemo3 } from "react";
+import {
+  View as NativeView,
+  Platform,
+  TouchableHighlight,
+  TouchableNativeFeedback,
+  TouchableOpacity
+} from "react-native";
+import { useTheme as useTheme2 } from "react-better-core";
+import { Fragment as Fragment2, jsx as jsx2 } from "react/jsx-runtime";
+var touchableHighlightStyleMoveToContent = [
+  "backgroundColor",
+  "padding",
+  "paddingTop",
+  "paddingBottom",
+  "paddingLeft",
+  "paddingRight",
+  "paddingHorizontal",
+  "paddingVertical",
+  "borderWidth",
+  "borderTopWidth",
+  "borderBottomWidth",
+  "borderLeftWidth",
+  "borderRightWidth",
+  "borderColor",
+  "borderTopColor",
+  "borderBottomColor",
+  "borderLeftColor",
+  "borderRightColor"
+];
+var touchableNativeFeedbackStyleMoveToHolder = [
+  "width",
+  "height",
+  "margin",
+  "marginTop",
+  "marginBottom",
+  "marginLeft",
+  "marginRight",
+  "marginHorizontal",
+  "marginVertical"
+];
+function alphaToHex(alpha) {
+  const clamped = Math.min(1, Math.max(0, alpha));
+  const value = Math.round(clamped * 255);
+  return value.toString(16).padStart(2, "0");
+}
+var ViewComponent = function View({
+  isRow,
+  value,
+  disabled,
+  pressType = "highlight",
+  pressStrength: pressStrength2 = 0.8,
+  onPress,
+  onPressIn,
+  onPressOut,
+  onLongPress,
+  onPressWithValue,
+  children,
+  ...props
+}) {
+  const theme2 = useTheme2();
+  const style = useMemo3(
+    () => ({
+      flexDirection: isRow ? "row" : "column",
+      ...props,
+      ...props.shadowOffsetWidth !== void 0 || props.shadowOffsetHeight !== void 0 ? {
+        shadowOffset: {
+          width: props.shadowOffsetWidth ?? 0,
+          height: props.shadowOffsetHeight ?? 0
+        }
+      } : {}
+    }),
+    [isRow, props]
+  );
+  const touchableHighlightStyle = useMemo3(
+    () => ({
+      ...style,
+      ...touchableHighlightStyleMoveToContent.reduce((previousValue, currentValue) => {
+        if (currentValue === "shadowOffsetWidth" || currentValue === "shadowOffsetHeight")
+          previousValue.shadowOffset = void 0;
+        else previousValue[currentValue] = void 0;
+        return previousValue;
+      }, {})
+    }),
+    [style]
+  );
+  const touchableHighlightContentProps = useMemo3(
+    () => touchableHighlightStyleMoveToContent.reduce((previousValue, currentValue) => {
+      previousValue[currentValue] = props[currentValue];
+      return previousValue;
+    }, {}),
+    [props]
+  );
+  const touchableNativeFeedbackHolderStyle = useMemo3(
+    () => touchableNativeFeedbackStyleMoveToHolder.reduce((previousValue, currentValue) => {
+      previousValue[currentValue] = props[currentValue];
+      return previousValue;
+    }, {}),
+    [props]
+  );
+  const touchableNativeFeedbackContentStyle = useMemo3(
+    () => ({
+      ...style,
+      ...touchableNativeFeedbackStyleMoveToHolder.reduce(
+        (previousValue, currentValue) => {
+          if (currentValue === "shadowOffsetWidth" || currentValue === "shadowOffsetHeight")
+            previousValue.shadowOffset = void 0;
+          else previousValue[currentValue] = void 0;
+          return previousValue;
+        },
+        {}
+      )
+    }),
+    [style]
+  );
+  const pressEvents = useMemo3(
+    () => !disabled ? {
+      onPress: (event) => {
+        onPress?.(event);
+        if (value !== void 0) onPressWithValue?.(value);
+      },
+      onPressIn,
+      onPressOut,
+      onLongPress
+    } : {},
+    [disabled, onPress, onPressIn, onPressOut, onLongPress, onPressWithValue, value]
+  );
+  const androidBoxShadow = Platform.OS === "android" ? props.shadowOffsetWidth !== void 0 || props.shadowOffsetHeight !== void 0 ? `${props.shadowOffsetWidth ?? 0}px ${props.shadowOffsetHeight ?? 0}px ${props.shadowRadius}px ${props.shadowColor?.toString() ?? "#000000"}` : void 0 : void 0;
+  const isPressable = onPress || onPressIn || onPressOut || onLongPress || onPressWithValue;
+  return isPressable ? pressType === "opacity" ? /* @__PURE__ */ jsx2(
+    TouchableOpacity,
+    {
+      style,
+      activeOpacity: pressStrength2,
+      boxShadow: androidBoxShadow,
+      ...pressEvents,
+      ...props,
+      children
+    }
+  ) : pressType === "highlight" ? Platform.OS === "ios" ? /* @__PURE__ */ jsx2(
+    TouchableHighlight,
+    {
+      activeOpacity: pressStrength2,
+      underlayColor: theme2.colors.textPrimary,
+      style: touchableHighlightStyle,
+      ...pressEvents,
+      ...props,
+      children: /* @__PURE__ */ jsx2(
+        ViewComponent,
+        {
+          width: "100%",
+          borderRadius: props.borderRadius,
+          borderTopLeftRadius: props.borderTopLeftRadius,
+          borderTopRightRadius: props.borderTopRightRadius,
+          borderBottomLeftRadius: props.borderBottomLeftRadius,
+          borderBottomRightRadius: props.borderBottomRightRadius,
+          ...touchableHighlightContentProps,
+          children
+        }
+      )
+    }
+  ) : Platform.OS === "android" ? /* @__PURE__ */ jsx2(
+    ViewComponent,
+    {
+      ...touchableNativeFeedbackHolderStyle,
+      borderRadius: props.borderRadius,
+      borderTopLeftRadius: props.borderTopLeftRadius,
+      borderTopRightRadius: props.borderTopRightRadius,
+      borderBottomLeftRadius: props.borderBottomLeftRadius,
+      borderBottomRightRadius: props.borderBottomRightRadius,
+      boxShadow: androidBoxShadow,
+      overflow: "hidden",
+      pointerEvents: "box-none",
+      children: /* @__PURE__ */ jsx2(
+        TouchableNativeFeedback,
+        {
+          ...pressEvents,
+          ...props,
+          background: TouchableNativeFeedback.Ripple(
+            `${theme2.colors.textPrimary}${alphaToHex(1 - pressStrength2)}`,
+            false
+          ),
+          useForeground: true,
+          touchSoundDisabled: true,
+          children: /* @__PURE__ */ jsx2(ViewComponent, { flex: 1, ...touchableNativeFeedbackContentStyle, children })
+        }
+      )
+    }
+  ) : /* @__PURE__ */ jsx2(Fragment2, {}) : /* @__PURE__ */ jsx2(Fragment2, {}) : /* @__PURE__ */ jsx2(NativeView, { boxShadow: androidBoxShadow, style, ...props, children });
+};
+ViewComponent.box = function Box({ withShadow, ...props }) {
+  const theme2 = useTheme2();
+  const shadowProps = useMemo3(
+    () => withShadow ? {
+      shadowOpacity: 0.2,
+      shadowOffsetHeight: 10,
+      shadowRadius: 10,
+      shadowColor: Platform.OS === "android" ? "#00000020" : void 0
+    } : {},
+    []
+  );
+  return /* @__PURE__ */ jsx2(
+    ViewComponent,
+    {
+      width: "100%",
+      backgroundColor: theme2.colors.backgroundContent,
+      borderWidth: 1,
+      borderColor: theme2.colors.border,
+      borderRadius: theme2.styles.borderRadius,
+      paddingHorizontal: theme2.styles.space,
+      paddingVertical: theme2.styles.gap,
+      ...shadowProps,
+      ...props
+    }
+  );
+};
+var View2 = memo2(ViewComponent);
+View2.box = ViewComponent.box;
+var View_default = View2;
+
+// src/components/Text.tsx
+import { memo as memo3, useMemo as useMemo4 } from "react";
+import { Text as NativeText } from "react-native";
+import { useTheme as useTheme3 } from "react-better-core";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var TextComponent = function Text({ selectionColor, children, ...props }) {
+  const theme2 = useTheme3();
+  const style = useMemo4(
+    () => ({
+      fontSize: 16,
+      color: theme2.colors.textPrimary,
+      ...props
+    }),
+    [theme2, props]
+  );
+  return /* @__PURE__ */ jsx3(NativeText, { selectionColor: selectionColor ?? theme2.colors.primary, style, ...props, children });
+};
+TextComponent.title = function Title(props) {
+  return /* @__PURE__ */ jsx3(TextComponent, { fontSize: 32, fontWeight: 700, ...props });
+};
+TextComponent.subtitle = function Subtitle(props) {
+  return /* @__PURE__ */ jsx3(TextComponent, { fontSize: 24, fontWeight: 700, ...props });
+};
+TextComponent.body = function Body(props) {
+  const theme2 = useTheme3();
+  return /* @__PURE__ */ jsx3(TextComponent, { color: theme2.colors.textSecondary, ...props });
+};
+TextComponent.caption = function Caption(props) {
+  const theme2 = useTheme3();
+  return /* @__PURE__ */ jsx3(TextComponent, { fontSize: 14, color: theme2.colors.textSecondary, ...props });
+};
+TextComponent.unknown = function Unknown(props) {
+  const theme2 = useTheme3();
+  return /* @__PURE__ */ jsx3(TextComponent, { fontStyle: "italic", textAlign: "center", color: theme2.colors.textSecondary, ...props });
+};
+var Text2 = memo3(TextComponent);
+Text2.title = TextComponent.title;
+Text2.subtitle = TextComponent.subtitle;
+Text2.body = TextComponent.body;
+Text2.caption = TextComponent.caption;
+Text2.unknown = TextComponent.unknown;
+var Text_default = Text2;
+
+// src/components/Button.tsx
+import { memo as memo6 } from "react";
+import { Platform as Platform2 } from "react-native";
+import { useLoader, useTheme as useTheme5 } from "react-better-core";
+
+// src/components/Animate.tsx
+import { memo as memo4, useMemo as useMemo5 } from "react";
+import { Motion } from "@legendapp/motion";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var defaultTransitionDuration = 0.15 * 1e3;
+var Animate = {
+  View: memo4(function View3({ transformOriginX, transformOriginY, children, ...props }) {
+    const initialProps = useComponentPropsGrouper(props, "initial");
+    const animateProps2 = useComponentPropsGrouper(props, "animate");
+    const whileTapProps = useComponentPropsGrouper(props, "whileTap");
+    const transitionProps = useComponentPropsGrouper(props, "transition");
+    const transition = useMemo5(
+      () => ({
+        type: "timing",
+        duration: defaultTransitionDuration,
+        ...transitionProps.withPrefixStyle
+      }),
+      [transitionProps.withPrefixStyle]
+    );
+    const transformOrigin = useMemo5(
+      () => transformOriginX !== void 0 || transformOriginY !== void 0 ? {
+        x: transformOriginX ?? 0,
+        y: transformOriginY ?? 0
+      } : void 0,
+      [transformOriginX, transformOriginY]
+    );
+    const content = /* @__PURE__ */ jsx4(
+      Motion.View,
+      {
+        style: initialProps.style,
+        initial: initialProps.withPrefixStyle,
+        animate: animateProps2.withPrefixStyle,
+        transition,
+        whileTap: whileTapProps.withPrefixStyle,
+        transformOrigin,
+        children
+      }
+    );
+    return Object.keys(whileTapProps.withPrefixStyle).length > 0 ? /* @__PURE__ */ jsx4(Motion.Pressable, { children: content }) : content;
+  }),
+  Text: memo4(function Text3({ transformOriginX, transformOriginY, children, ...props }) {
+    const initialProps = useComponentPropsGrouper(props, "initial");
+    const animateProps2 = useComponentPropsGrouper(props, "animate");
+    const whileTapProps = useComponentPropsGrouper(props, "whileTap");
+    const transitionProps = useComponentPropsGrouper(props, "transition");
+    const transition = useMemo5(
+      () => ({
+        type: "timing",
+        duration: defaultTransitionDuration,
+        ...transitionProps.withPrefixStyle
+      }),
+      [transitionProps.withPrefixStyle]
+    );
+    const transformOrigin = useMemo5(
+      () => transformOriginX !== void 0 || transformOriginY !== void 0 ? {
+        x: transformOriginX ?? 0,
+        y: transformOriginY ?? 0
+      } : void 0,
+      [transformOriginX, transformOriginY]
+    );
+    const content = /* @__PURE__ */ jsx4(
+      Motion.Text,
+      {
+        style: initialProps.style,
+        initial: initialProps.withPrefixStyle,
+        animate: animateProps2.withPrefixStyle,
+        transition,
+        whileTap: whileTapProps.withPrefixStyle,
+        transformOrigin,
+        children
+      }
+    );
+    return Object.keys(whileTapProps.withPrefixStyle).length > 0 ? /* @__PURE__ */ jsx4(Motion.Pressable, { children: content }) : content;
+  })
+};
+var Animate_default = Animate;
+
+// src/components/Loader.tsx
+import { memo as memo5 } from "react";
+import { ActivityIndicator } from "react-native";
+import { useTheme as useTheme4 } from "react-better-core";
+import { jsx as jsx5, jsxs } from "react/jsx-runtime";
+var LoaderComponent = function Loader({ size = "small", color, ...props }) {
+  const theme2 = useTheme4();
+  return /* @__PURE__ */ jsx5(View_default, { ...props, children: /* @__PURE__ */ jsx5(ActivityIndicator, { size, color: color ?? theme2.colors.textPrimary }) });
+};
+LoaderComponent.box = function Box2({ text = "Loading...", size = "large", color, ...props }) {
+  const theme2 = useTheme4();
+  return /* @__PURE__ */ jsxs(
+    View_default,
+    {
+      width: "100%",
+      alignItems: "center",
+      gap: theme2.styles.gap,
+      marginVertical: theme2.styles.space,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx5(Loader2, { size, color }),
+        text && /* @__PURE__ */ jsx5(Text_default, { textAlign: "center", color: color ?? theme2.colors.textSecondary, children: text })
+      ]
+    }
+  );
+};
+LoaderComponent.text = function LoaderText({ text = "Loading...", size, color, ...props }) {
+  const theme2 = useTheme4();
+  return /* @__PURE__ */ jsxs(
+    View_default,
+    {
+      isRow: true,
+      alignItems: "center",
+      justifyContent: "center",
+      gap: theme2.styles.gap,
+      marginVertical: theme2.styles.space,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx5(Loader2, { size, color }),
+        text && /* @__PURE__ */ jsx5(Text_default, { textAlign: "center", color: color ?? theme2.colors.textSecondary, children: text })
+      ]
+    }
+  );
+};
+var Loader2 = memo5(LoaderComponent);
+Loader2.box = LoaderComponent.box;
+Loader2.text = LoaderComponent.text;
+var Loader_default = Loader2;
+
+// src/components/Button.tsx
+import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+var ButtonComponent = function Button({
+  text,
+  textFontSize = 16,
+  textFontWeight = 700,
+  textDecorationLine,
+  textColor,
+  icon,
+  iconPosition = "left",
+  iconColor,
+  iconSize,
+  image,
+  imagePosition = "left",
+  imageWidth,
+  imageHeight,
+  loaderName,
+  isLoading,
+  isSmall,
+  animateOpacity,
+  flex,
+  alignSelf,
+  disabled,
+  ...props
+}) {
+  const theme2 = useTheme5();
+  const isLoadingLoader = useLoader(loaderName);
+  const isLoadingElement = isLoading || isLoadingLoader;
+  const isDisabled = disabled || isLoadingElement;
+  const lineHeight = 20;
+  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__ */ jsx6(
+    Animate_default.View,
+    {
+      position: "relative",
+      flex,
+      alignSelf: alignSelf ?? (isSmall === "left" ? "flex-start" : isSmall === "right" ? "flex-end" : isSmall === "center" ? "center" : isSmall ? "baseline" : void 0),
+      initialOpacity: 1,
+      animateOpacity: animateOpacity ?? (disabled ? 0.6 : 1),
+      children: /* @__PURE__ */ jsxs2(
+        View_default,
+        {
+          position: "relative",
+          width: !isSmall ? "100%" : void 0,
+          height: Platform2.OS === "android" ? buttonHeight : void 0,
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: theme2.colors.primary,
+          borderRadius: theme2.styles.borderRadius,
+          paddingVertical,
+          paddingHorizontal,
+          disabled: isDisabled,
+          ...props,
+          children: [
+            /* @__PURE__ */ jsx6(Animate_default.View, { initialOpacity: 1, animateOpacity: isLoadingElement ? 0 : 1, children: text && /* @__PURE__ */ jsx6(
+              Text_default,
+              {
+                fontSize: textFontSize,
+                fontWeight: textFontWeight,
+                textDecorationLine,
+                textDecorationColor: color,
+                textAlign: "center",
+                lineHeight,
+                color,
+                children: text
+              }
+            ) }),
+            /* @__PURE__ */ jsx6(
+              Animate_default.View,
+              {
+                position: "absolute",
+                width: "100%",
+                height: buttonHeight,
+                left: paddingHorizontal,
+                alignItems: "center",
+                justifyContent: "center",
+                initialOpacity: 0,
+                animateOpacity: isLoadingElement ? 1 : 0,
+                children: /* @__PURE__ */ jsx6(Loader_default, { color })
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+ButtonComponent.secondary = function Secondary(props) {
+  const theme2 = useTheme5();
+  return /* @__PURE__ */ jsx6(
+    ButtonComponent,
+    {
+      backgroundColor: theme2.colors.backgroundContent,
+      borderWidth: 1,
+      borderColor: theme2.colors.border,
+      textColor: theme2.colors.textPrimary,
+      pressStrength: pressStrength().z05,
+      animateOpacity: props.disabled ? 0.4 : 1,
+      ...props
+    }
+  );
+};
+ButtonComponent.destructive = function Destructive(props) {
+  const theme2 = useTheme5();
+  return /* @__PURE__ */ jsx6(ButtonComponent, { backgroundColor: theme2.colors.error, ...props });
+};
+ButtonComponent.text = function ButtonText(props) {
+  const theme2 = useTheme5();
+  return /* @__PURE__ */ jsx6(
+    ButtonComponent,
+    {
+      width: "auto",
+      textColor: theme2.colors.textPrimary,
+      textDecorationLine: "underline",
+      backgroundColor: "transparent",
+      paddingHorizontal: theme2.styles.space,
+      paddingVertical: theme2.styles.gap,
+      isSmall: true,
+      pressType: "opacity",
+      ...props
+    }
+  );
+};
+var Button2 = memo6(ButtonComponent);
+Button2.secondary = ButtonComponent.secondary;
+Button2.destructive = ButtonComponent.destructive;
+Button2.text = ButtonComponent.text;
+var Button_default = Button2;
+
+// src/components/ScreenHolder.tsx
+import { memo as memo7, useCallback, useMemo as useMemo6 } from "react";
+import { KeyboardAvoidingView, Platform as Platform3, RefreshControl, ScrollView } from "react-native";
+import { useBooleanState as useBooleanState3, useTheme as useTheme6 } from "react-better-core";
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+var ScreenHolderComponent = ({
+  noScroll,
+  noSideSpace,
+  refreshTimeout = 1,
+  onRefresh,
+  onRefreshEnd,
+  backgroundColor,
+  insideTopSafeArea,
+  insideBottomSafeArea,
+  bottomSpace = 0,
+  footer,
+  keepFooterOnKeyboardOpened,
+  children
+}) => {
+  const theme2 = useTheme6();
+  const device = useDevice();
+  const keyboard = useKeyboard();
+  const [isRefreshing, setIsRefreshing] = useBooleanState3();
+  const keyboardAvoidingViewStyle = useMemo6(
+    () => ({
+      flex: 1
+    }),
+    []
+  );
+  const onRefreshElement = useCallback(() => {
+    setIsRefreshing.setTrue();
+    onRefresh?.();
+    setTimeout(() => {
+      setIsRefreshing.setFalse();
+      onRefreshEnd?.();
+    }, refreshTimeout * 1e3);
+  }, [onRefresh, onRefreshEnd, refreshTimeout]);
+  const content = /* @__PURE__ */ jsx7(
+    View_default,
+    {
+      flex: 1,
+      paddingHorizontal: !noSideSpace ? theme2.styles.space : void 0,
+      paddingTop: theme2.styles.gap + (insideTopSafeArea ? device.safeArea.afterCalculations.top : 0),
+      paddingBottom: Platform3.OS === "ios" && keyboard.isOpened ? device.safeArea.afterCalculations.top : bottomSpace + (insideBottomSafeArea ? device.safeArea.afterCalculations.bottom : 0),
+      children
+    }
+  );
+  const withRefresh = onRefresh || onRefreshEnd;
+  return /* @__PURE__ */ jsx7(View_default, { flex: 1, backgroundColor: backgroundColor ?? theme2.colors.backgroundBase, children: /* @__PURE__ */ jsxs3(
+    KeyboardAvoidingView,
+    {
+      style: keyboardAvoidingViewStyle,
+      keyboardVerticalOffset: keepFooterOnKeyboardOpened ? Platform3.OS === "ios" ? device.safeArea.afterCalculations.bottom : theme2.styles.gap : void 0,
+      behavior: Platform3.OS === "ios" ? "padding" : "height",
+      children: [
+        /* @__PURE__ */ jsx7(View_default, { flex: 1, children: noScroll ? content : /* @__PURE__ */ jsx7(
+          ScrollView,
+          {
+            refreshControl: withRefresh ? /* @__PURE__ */ jsx7(RefreshControl, { refreshing: isRefreshing, onRefresh: onRefreshElement }) : void 0,
+            children: content
+          }
+        ) }),
+        keepFooterOnKeyboardOpened || (Platform3.OS === "ios" ? !keyboard.willOpen : !keyboard.isOpened) ? footer && /* @__PURE__ */ jsx7(View_default, { children: footer }) : /* @__PURE__ */ jsx7(View_default, { width: "100%", height: device.safeArea.afterCalculations.bottom })
+      ]
+    }
+  ) });
+};
+ScreenHolderComponent.footer = function Footer({
+  noSideSpace,
+  backgroundColor,
+  insideBottomSafeArea,
+  children
+}) {
+  const theme2 = useTheme6();
+  const device = useDevice();
+  return /* @__PURE__ */ jsx7(
+    View_default,
+    {
+      backgroundColor: backgroundColor ?? theme2.colors.backgroundBase,
+      paddingHorizontal: !noSideSpace ? theme2.styles.space : void 0,
+      paddingTop: theme2.styles.gap,
+      paddingBottom: insideBottomSafeArea ? device.safeArea.afterCalculations.bottom : void 0,
+      children
+    }
+  );
+};
+var ScreenHolder = memo7(ScreenHolderComponent);
+ScreenHolder.footer = ScreenHolderComponent.footer;
+var ScreenHolder_default = ScreenHolder;
+
+// src/components/Image.tsx
+import { memo as memo8, useEffect as useEffect3, useMemo as useMemo7 } from "react";
+import { useBetterCoreContext as useBetterCoreContext2, useTheme as useTheme7 } from "react-better-core";
+import {
+  Image as NativeImage
+} from "react-native";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var ImageComponent = function Image({ name, source, withDevFittingMode, ...props }) {
+  const { assets: assets2 } = useBetterCoreContext2();
+  const style = useMemo7(
+    () => ({
+      width: 100,
+      height: 100,
+      ...withDevFittingMode ? {
+        borderWidth: 1,
+        borderColor: "#eb39f7"
+      } : {},
+      ...props
+    }),
+    [withDevFittingMode, props]
+  );
+  useEffect3(() => {
+    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__ */ jsx8(NativeImage, { source: name ? assets2[name.toString()] : source, style, ...props });
+};
+ImageComponent.profileImage = function ProfileImage({ size = 50, letters, backgroundColor, ...props }) {
+  const theme2 = useTheme7();
+  return letters ? /* @__PURE__ */ jsx8(
+    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__ */ jsx8(Text_default, { fontSize: size / 2.5, fontWeight: 700, marginTop: 1, children: letters.toUpperCase().slice(0, 2) })
+    }
+  ) : /* @__PURE__ */ jsx8(
+    ImageComponent,
+    {
+      width: size,
+      height: size,
+      borderWidth: 1,
+      borderColor: theme2.colors.border,
+      borderRadius: 999,
+      objectFit: "cover",
+      ...props
+    }
+  );
+};
+var Image2 = memo8(ImageComponent);
+Image2.profileImage = ImageComponent.profileImage;
+var Image_default = Image2;
+
+// src/components/InputField.tsx
+import { forwardRef, memo as memo9, useCallback as useCallback2, useImperativeHandle, useMemo as useMemo8 } from "react";
+import { TextInput } from "react-native";
+import {
+  darkenColor,
+  lightenColor,
+  useBetterCoreContext as useBetterCoreContext3,
+  useBooleanState as useBooleanState4,
+  useTheme as useTheme8
+} from "react-better-core";
+import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+var InputFieldComponent = forwardRef(
+  ({
+    placeholder,
+    prefix,
+    suffix,
+    defaultValue,
+    editable = true,
+    autoFocus,
+    autoCapitalize,
+    autoComplete,
+    autoCorrect,
+    keyboardAppearance = "default",
+    keyboardType,
+    secureTextEntry,
+    onFocus,
+    onBlur
+  }, ref) => {
+    const theme2 = useTheme8();
+    const { colorTheme } = useBetterCoreContext3();
+    const [isFocused, setIsFocused] = useBooleanState4();
+    const paddingHorizontal = theme2.styles.space;
+    const paddingVertical = (theme2.styles.space + theme2.styles.gap) / 2;
+    const onFocusElement = useCallback2((event) => {
+      setIsFocused.setTrue();
+      onFocus?.(event);
+    }, []);
+    const onBlurElement = useCallback2((event) => {
+      setIsFocused.setFalse();
+      onBlur?.(event);
+    }, []);
+    const textInputStyle = useMemo8(
+      () => ({
+        flex: 1,
+        fontSize: 16,
+        lineHeight: 20,
+        color: theme2.colors.textPrimary,
+        paddingHorizontal,
+        paddingVertical
+      }),
+      [theme2.colors, paddingHorizontal, paddingVertical]
+    );
+    useImperativeHandle(
+      ref,
+      () => {
+        return {};
+      },
+      []
+    );
+    const prefixSuffixBackgroundColor = colorTheme === "light" ? darkenColor(theme2.colors.backgroundContent, 0.03) : lightenColor(theme2.colors.backgroundContent, 0.1);
+    return /* @__PURE__ */ jsxs4(View_default, { isRow: true, position: "relative", alignItems: "center", children: [
+      prefix && /* @__PURE__ */ jsx9(
+        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__ */ jsx9(Text_default, { fontWeight: 700, children: prefix })
+        }
+      ),
+      /* @__PURE__ */ jsx9(
+        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__ */ jsx9(
+            TextInput,
+            {
+              style: textInputStyle,
+              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
+            }
+          )
+        }
+      ),
+      suffix && /* @__PURE__ */ jsx9(
+        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__ */ jsx9(Text_default, { fontWeight: 700, children: suffix })
+        }
+      )
+    ] });
+  }
+);
+InputFieldComponent.email = forwardRef(function Email(props, ref) {
+  return /* @__PURE__ */ jsx9(
+    InputFieldComponent,
+    {
+      placeholder: "your@email.here",
+      autoComplete: "email",
+      keyboardType: "email-address",
+      autoCapitalize: "none",
+      autoCorrect: false,
+      ...props,
+      ref
+    }
+  );
+});
+InputFieldComponent.password = forwardRef(function Password(props, ref) {
+  return /* @__PURE__ */ jsx9(
+    InputFieldComponent,
+    {
+      secureTextEntry: true,
+      placeholder: "******",
+      autoCapitalize: "none",
+      autoComplete: "password",
+      autoCorrect: false,
+      ...props,
+      ref
+    }
+  );
+});
+var InputField = memo9(InputFieldComponent);
+InputField.email = InputFieldComponent.email;
+InputField.password = InputFieldComponent.password;
+var InputField_default = InputField;
+
+// src/plugins/asyncStorage.ts
+var defaultAsyncStoragePluginOptions = {};
+var asyncStoragePlugin = (options) => ({
+  name: "asyncStorage",
+  initialize: () => {
+    console.log("asyncStorage plugin initialized");
+  },
+  getConfig: () => ({
+    ...defaultAsyncStoragePluginOptions,
+    ...options
+  })
+});
+export {
+  Animate_default as Animate,
+  BetterComponentsProvider_default as BetterComponentsProvider,
+  Button_default as Button,
+  Image_default as Image,
+  InputField_default as InputField,
+  Loader_default as Loader,
+  ScreenHolder_default as ScreenHolder,
+  Text_default as Text,
+  View_default as View,
+  asyncStoragePlugin,
+  colorThemeControls,
+  countries,
+  darkenColor2 as darkenColor,
+  defaultAsyncStoragePluginOptions,
+  desaturateColor,
+  eventPreventDefault,
+  eventPreventStop,
+  eventStopPropagation,
+  formatPhoneNumber,
+  generateAsyncStorage,
+  generateRandomString,
+  getPluralWord,
+  lightenColor2 as lightenColor,
+  loaderControls,
+  pressStrength,
+  saturateColor,
+  useBetterComponentsContext,
+  useBooleanState5 as useBooleanState,
+  useDebounceState,
+  useDevice,
+  useKeyboard,
+  useLoader2 as useLoader,
+  useLoaderControls,
+  useTheme9 as useTheme
+};
+//# sourceMappingURL=index.mjs.map