react-native-better-html 1.0.17 → 1.0.18

package/dist/index.d.mts

@@ -31,7 +31,7 @@ type BetterComponentsProviderProps = BetterProviderCommonProps & {
     config?: BetterComponentsProviderConfig;
 };
 declare function BetterComponentsProvider({ config, ...props }: BetterComponentsProviderProps): react_jsx_runtime.JSX.Element;
-declare const _default$2: react.MemoExoticComponent<typeof BetterComponentsProvider>;
+declare const _default$4: react.MemoExoticComponent<typeof BetterComponentsProvider>;
 
 type ComponentStyle<Style extends ViewStyle = ViewStyle> = OmitProps<Style, "shadowOffset" | ComponentExcludeMarginProps | ComponentExcludePaddingProps> & {
     shadowOffsetWidth?: number;
@@ -75,15 +75,16 @@ declare const View: typeof ViewComponent & {
     box: typeof ViewComponent.box;
 };
 
+type IconNameIOS = React.ComponentProps<typeof SymbolView>["name"];
 type IconProps = {
     name: IconName | AnyOtherString;
-    nameIOS?: React.ComponentProps<typeof SymbolView>["name"];
+    nameIOS?: IconNameIOS;
     /** @default 16 */
     size?: number;
     color?: string;
 } & OmitProps<ViewProps, "width" | "height" | "pressType">;
 declare function Icon({ name, nameIOS, size, color, ...props }: IconProps): react_jsx_runtime.JSX.Element;
-declare const _default$1: react.MemoExoticComponent<typeof Icon>;
+declare const _default$3: react.MemoExoticComponent<typeof Icon>;
 
 type InputFieldProps = {
     flex?: ViewStyle["flex"];
@@ -107,7 +108,6 @@ type InputFieldProps = {
     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 */
@@ -164,6 +164,16 @@ declare const InputField: typeof InputFieldComponent & {
     code: typeof InputFieldComponent.code;
 };
 
+type SwitchProps = {
+    isEnabled?: boolean;
+    defaultIsEnabled?: boolean;
+    /** @default false */
+    disabled?: boolean;
+    onChange?: (isEnabled: boolean) => void;
+};
+declare function Switch({ isEnabled, defaultIsEnabled, disabled, onChange }: SwitchProps): react_jsx_runtime.JSX.Element;
+declare const _default$2: react.MemoExoticComponent<typeof Switch>;
+
 declare function useDevice(): {
     safeArea: {
         /** @description The safe area insets after calculations. Recommended to use this instead of the raw insets. */
@@ -207,6 +217,7 @@ declare function useForm<FormFields extends Record<string | number, FormFieldVal
     setFieldValue: <FieldName extends keyof FormFields>(field: FieldName, value: FormFields[FieldName] | undefined) => void;
     setFieldsValue: (values: Partial<FormFields>) => void;
     getInputFieldProps: <FieldName extends keyof FormFields>(field: FieldName) => ComponentPropWithRef<InputFieldRef, InputFieldProps>;
+    getSwitchProps: <FieldName extends keyof FormFields>(field: FieldName, insideListItem?: boolean) => SwitchProps;
     focusField: (field: keyof FormFields) => void;
     inputFieldRefs: Record<keyof FormFields, TextInput | undefined>;
     validate: () => {};
@@ -447,10 +458,28 @@ type StatusBarProps = {
     iOSBarStyle?: React.ComponentProps<typeof StatusBar$1>["barStyle"];
 };
 declare function StatusBar({ darkStatusBar, hidden, barStyle, androidBarStyle, iOSBarStyle }: StatusBarProps): react_jsx_runtime.JSX.Element;
-declare const _default: react.MemoExoticComponent<typeof StatusBar>;
+declare const _default$1: react.MemoExoticComponent<typeof StatusBar>;
+
+type ListItemProps = {
+    icon?: IconName | AnyOtherString;
+    iconIOS?: IconNameIOS;
+    title?: string;
+    description?: string;
+    rightElement?: "arrow" | "switch";
+    /** @default theme.colors.backgroundBase */
+    backgroundColor?: ViewProps["backgroundColor"];
+    /** @default false */
+    insideScreenHolder?: boolean;
+    onPress?: () => void;
+    rightArrowValue?: string | number;
+    switchIsEnabled?: boolean;
+    switchOnChange?: (isEnabled: boolean) => void;
+};
+declare function ListItem({ icon, iconIOS, title, description, rightElement, backgroundColor, insideScreenHolder, onPress, rightArrowValue, switchIsEnabled, switchOnChange, }: ListItemProps): react_jsx_runtime.JSX.Element;
+declare const _default: react.MemoExoticComponent<typeof ListItem>;
 
 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$2 as BetterComponentsProvider, type BetterComponentsProviderConfig, Button, type ButtonProps, type ComponentMarginProps, type ComponentPaddingProps, type FooterProps, _default$1 as Icon, type IconProps, Image, type ImageProps, InputField, type InputFieldProps, type InputFieldRef, Loader, type LoaderProps, type LoaderSize, type PluginName, ScreenHolder, type ScreenHolderProps, _default as StatusBar, type StatusBarProps, Text, type TextProps, View, type ViewProps, asyncStoragePlugin, defaultAsyncStoragePluginOptions, generateAsyncStorage, getFormErrorObject, pressStrength, useBetterComponentsContext, useDevice, useEventEmitter, useForm, useKeyboard };
+export { Animate, type AnimateTextProps, type AnimateViewProps, type AppConfig, type AsyncStoragePluginOptions, type BetterComponentsConfig, type BetterComponentsPlugin, _default$4 as BetterComponentsProvider, type BetterComponentsProviderConfig, Button, type ButtonProps, type ComponentMarginProps, type ComponentPaddingProps, type FooterProps, _default$3 as Icon, type IconNameIOS, type IconProps, Image, type ImageProps, InputField, type InputFieldProps, type InputFieldRef, _default as ListItem, type ListItemProps, Loader, type LoaderProps, type LoaderSize, type PluginName, ScreenHolder, type ScreenHolderProps, _default$1 as StatusBar, type StatusBarProps, _default$2 as Switch, type SwitchProps, Text, type TextProps, View, type ViewProps, asyncStoragePlugin, defaultAsyncStoragePluginOptions, generateAsyncStorage, getFormErrorObject, pressStrength, useBetterComponentsContext, useDevice, useEventEmitter, useForm, useKeyboard };

package/dist/index.d.ts

@@ -31,7 +31,7 @@ type BetterComponentsProviderProps = BetterProviderCommonProps & {
     config?: BetterComponentsProviderConfig;
 };
 declare function BetterComponentsProvider({ config, ...props }: BetterComponentsProviderProps): react_jsx_runtime.JSX.Element;
-declare const _default$2: react.MemoExoticComponent<typeof BetterComponentsProvider>;
+declare const _default$4: react.MemoExoticComponent<typeof BetterComponentsProvider>;
 
 type ComponentStyle<Style extends ViewStyle = ViewStyle> = OmitProps<Style, "shadowOffset" | ComponentExcludeMarginProps | ComponentExcludePaddingProps> & {
     shadowOffsetWidth?: number;
@@ -75,15 +75,16 @@ declare const View: typeof ViewComponent & {
     box: typeof ViewComponent.box;
 };
 
+type IconNameIOS = React.ComponentProps<typeof SymbolView>["name"];
 type IconProps = {
     name: IconName | AnyOtherString;
-    nameIOS?: React.ComponentProps<typeof SymbolView>["name"];
+    nameIOS?: IconNameIOS;
     /** @default 16 */
     size?: number;
     color?: string;
 } & OmitProps<ViewProps, "width" | "height" | "pressType">;
 declare function Icon({ name, nameIOS, size, color, ...props }: IconProps): react_jsx_runtime.JSX.Element;
-declare const _default$1: react.MemoExoticComponent<typeof Icon>;
+declare const _default$3: react.MemoExoticComponent<typeof Icon>;
 
 type InputFieldProps = {
     flex?: ViewStyle["flex"];
@@ -107,7 +108,6 @@ type InputFieldProps = {
     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 */
@@ -164,6 +164,16 @@ declare const InputField: typeof InputFieldComponent & {
     code: typeof InputFieldComponent.code;
 };
 
+type SwitchProps = {
+    isEnabled?: boolean;
+    defaultIsEnabled?: boolean;
+    /** @default false */
+    disabled?: boolean;
+    onChange?: (isEnabled: boolean) => void;
+};
+declare function Switch({ isEnabled, defaultIsEnabled, disabled, onChange }: SwitchProps): react_jsx_runtime.JSX.Element;
+declare const _default$2: react.MemoExoticComponent<typeof Switch>;
+
 declare function useDevice(): {
     safeArea: {
         /** @description The safe area insets after calculations. Recommended to use this instead of the raw insets. */
@@ -207,6 +217,7 @@ declare function useForm<FormFields extends Record<string | number, FormFieldVal
     setFieldValue: <FieldName extends keyof FormFields>(field: FieldName, value: FormFields[FieldName] | undefined) => void;
     setFieldsValue: (values: Partial<FormFields>) => void;
     getInputFieldProps: <FieldName extends keyof FormFields>(field: FieldName) => ComponentPropWithRef<InputFieldRef, InputFieldProps>;
+    getSwitchProps: <FieldName extends keyof FormFields>(field: FieldName, insideListItem?: boolean) => SwitchProps;
     focusField: (field: keyof FormFields) => void;
     inputFieldRefs: Record<keyof FormFields, TextInput | undefined>;
     validate: () => {};
@@ -447,10 +458,28 @@ type StatusBarProps = {
     iOSBarStyle?: React.ComponentProps<typeof StatusBar$1>["barStyle"];
 };
 declare function StatusBar({ darkStatusBar, hidden, barStyle, androidBarStyle, iOSBarStyle }: StatusBarProps): react_jsx_runtime.JSX.Element;
-declare const _default: react.MemoExoticComponent<typeof StatusBar>;
+declare const _default$1: react.MemoExoticComponent<typeof StatusBar>;
+
+type ListItemProps = {
+    icon?: IconName | AnyOtherString;
+    iconIOS?: IconNameIOS;
+    title?: string;
+    description?: string;
+    rightElement?: "arrow" | "switch";
+    /** @default theme.colors.backgroundBase */
+    backgroundColor?: ViewProps["backgroundColor"];
+    /** @default false */
+    insideScreenHolder?: boolean;
+    onPress?: () => void;
+    rightArrowValue?: string | number;
+    switchIsEnabled?: boolean;
+    switchOnChange?: (isEnabled: boolean) => void;
+};
+declare function ListItem({ icon, iconIOS, title, description, rightElement, backgroundColor, insideScreenHolder, onPress, rightArrowValue, switchIsEnabled, switchOnChange, }: ListItemProps): react_jsx_runtime.JSX.Element;
+declare const _default: react.MemoExoticComponent<typeof ListItem>;
 
 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$2 as BetterComponentsProvider, type BetterComponentsProviderConfig, Button, type ButtonProps, type ComponentMarginProps, type ComponentPaddingProps, type FooterProps, _default$1 as Icon, type IconProps, Image, type ImageProps, InputField, type InputFieldProps, type InputFieldRef, Loader, type LoaderProps, type LoaderSize, type PluginName, ScreenHolder, type ScreenHolderProps, _default as StatusBar, type StatusBarProps, Text, type TextProps, View, type ViewProps, asyncStoragePlugin, defaultAsyncStoragePluginOptions, generateAsyncStorage, getFormErrorObject, pressStrength, useBetterComponentsContext, useDevice, useEventEmitter, useForm, useKeyboard };
+export { Animate, type AnimateTextProps, type AnimateViewProps, type AppConfig, type AsyncStoragePluginOptions, type BetterComponentsConfig, type BetterComponentsPlugin, _default$4 as BetterComponentsProvider, type BetterComponentsProviderConfig, Button, type ButtonProps, type ComponentMarginProps, type ComponentPaddingProps, type FooterProps, _default$3 as Icon, type IconNameIOS, type IconProps, Image, type ImageProps, InputField, type InputFieldProps, type InputFieldRef, _default as ListItem, type ListItemProps, Loader, type LoaderProps, type LoaderSize, type PluginName, ScreenHolder, type ScreenHolderProps, _default$1 as StatusBar, type StatusBarProps, _default$2 as Switch, type SwitchProps, Text, type TextProps, View, type ViewProps, asyncStoragePlugin, defaultAsyncStoragePluginOptions, generateAsyncStorage, getFormErrorObject, pressStrength, useBetterComponentsContext, useDevice, useEventEmitter, useForm, useKeyboard };

package/dist/index.js

@@ -36,42 +36,44 @@ __export(index_exports, {
   Icon: () => Icon_default,
   Image: () => Image_default,
   InputField: () => InputField_default,
+  ListItem: () => ListItem_default,
   Loader: () => Loader_default,
   ScreenHolder: () => ScreenHolder_default,
   StatusBar: () => StatusBar_default,
+  Switch: () => Switch_default,
   Text: () => Text_default,
   View: () => View_default,
   asyncStoragePlugin: () => asyncStoragePlugin,
-  colorThemeControls: () => import_react_better_core12.colorThemeControls,
-  countries: () => import_react_better_core12.countries,
-  darkenColor: () => import_react_better_core12.darkenColor,
+  colorThemeControls: () => import_react_better_core14.colorThemeControls,
+  countries: () => import_react_better_core14.countries,
+  darkenColor: () => import_react_better_core14.darkenColor,
   defaultAsyncStoragePluginOptions: () => defaultAsyncStoragePluginOptions,
-  desaturateColor: () => import_react_better_core12.desaturateColor,
-  eventPreventDefault: () => import_react_better_core12.eventPreventDefault,
-  eventPreventStop: () => import_react_better_core12.eventPreventStop,
-  eventStopPropagation: () => import_react_better_core12.eventStopPropagation,
-  formatPhoneNumber: () => import_react_better_core12.formatPhoneNumber,
+  desaturateColor: () => import_react_better_core14.desaturateColor,
+  eventPreventDefault: () => import_react_better_core14.eventPreventDefault,
+  eventPreventStop: () => import_react_better_core14.eventPreventStop,
+  eventStopPropagation: () => import_react_better_core14.eventStopPropagation,
+  formatPhoneNumber: () => import_react_better_core14.formatPhoneNumber,
   generateAsyncStorage: () => generateAsyncStorage,
-  generateRandomString: () => import_react_better_core12.generateRandomString,
+  generateRandomString: () => import_react_better_core14.generateRandomString,
   getFormErrorObject: () => getFormErrorObject,
-  getPluralWord: () => import_react_better_core12.getPluralWord,
-  lightenColor: () => import_react_better_core12.lightenColor,
-  loaderControls: () => import_react_better_core12.loaderControls,
+  getPluralWord: () => import_react_better_core14.getPluralWord,
+  lightenColor: () => import_react_better_core14.lightenColor,
+  loaderControls: () => import_react_better_core14.loaderControls,
   pressStrength: () => pressStrength,
-  saturateColor: () => import_react_better_core12.saturateColor,
+  saturateColor: () => import_react_better_core14.saturateColor,
   useBetterComponentsContext: () => useBetterComponentsContext,
-  useBooleanState: () => import_react_better_core12.useBooleanState,
-  useDebounceState: () => import_react_better_core12.useDebounceState,
+  useBooleanState: () => import_react_better_core14.useBooleanState,
+  useDebounceState: () => import_react_better_core14.useDebounceState,
   useDevice: () => useDevice,
   useEventEmitter: () => useEventEmitter,
   useForm: () => useForm,
   useKeyboard: () => useKeyboard,
-  useLoader: () => import_react_better_core12.useLoader,
-  useLoaderControls: () => import_react_better_core12.useLoaderControls,
-  useTheme: () => import_react_better_core12.useTheme
+  useLoader: () => import_react_better_core14.useLoader,
+  useLoaderControls: () => import_react_better_core14.useLoaderControls,
+  useTheme: () => import_react_better_core14.useTheme
 });
 module.exports = __toCommonJS(index_exports);
-var import_react_better_core12 = require("react-better-core");
+var import_react_better_core14 = require("react-better-core");
 
 // src/components/BetterComponentsProvider.tsx
 var import_react = require("react");
@@ -584,6 +586,22 @@ function useForm(options) {
     },
     [values, setFieldValue, errors, requiredFields, additional, onSubmitFunction]
   );
+  const getSwitchProps = (0, import_react2.useCallback)(
+    (field, insideListItem) => {
+      return insideListItem ? {
+        switchIsEnabled: values[field],
+        switchOnChange: (value) => {
+          setFieldValue(field, value);
+        }
+      } : {
+        isEnabled: values[field],
+        onChange: (value) => {
+          setFieldValue(field, value);
+        }
+      };
+    },
+    [values, setFieldValue]
+  );
   const reset = (0, import_react2.useCallback)(() => {
     setValues(defaultValues);
     setErrors({});
@@ -607,6 +625,7 @@ function useForm(options) {
     setFieldValue,
     setFieldsValue,
     getInputFieldProps,
+    getSwitchProps,
     focusField,
     inputFieldRefs: inputFieldRefs.current,
     validate: validateForm,
@@ -1428,7 +1447,7 @@ var InputFieldComponent = (0, import_react12.forwardRef)(
     autoCapitalize,
     autoComplete,
     autoCorrect,
-    keyboardAppearance = "default",
+    keyboardAppearance,
     keyboardType,
     secureTextEntry,
     returnKeyLabel,
@@ -1632,6 +1651,7 @@ var InputFieldComponent = (0, import_react12.forwardRef)(
                   mode: type,
                   display: iOSDateTimeFullSize ? type === "date" ? "inline" : "spinner" : "default",
                   accentColor: theme2.colors.primary,
+                  themeVariant: colorTheme === "dark" ? "dark" : "light",
                   style: rnDateTimePickerStyle,
                   onChange: onChangeRNDateTimePicker
                 }
@@ -1694,7 +1714,7 @@ var InputFieldComponent = (0, import_react12.forwardRef)(
                           readOnly: !editable || disabled || type === "date" || type === "time",
                           textAlign,
                           editable: !disabled,
-                          keyboardAppearance,
+                          keyboardAppearance: keyboardAppearance ?? colorTheme === "dark" ? "dark" : "light",
                           keyboardType,
                           cursorColor: theme2.colors.primary,
                           selectionColor: theme2.colors.primary,
@@ -1852,23 +1872,148 @@ InputField.search = InputFieldComponent.search;
 InputField.code = InputFieldComponent.code;
 var InputField_default = InputField;
 
-// src/components/StatusBar.tsx
+// src/components/Switch.tsx
 var import_react13 = require("react");
-var import_react_better_core11 = require("react-better-core");
 var import_react_native10 = require("react-native");
+var import_react_better_core11 = require("react-better-core");
 var import_jsx_runtime11 = require("react/jsx-runtime");
-function StatusBar({ darkStatusBar, hidden, barStyle, androidBarStyle, iOSBarStyle }) {
+function Switch({ isEnabled, defaultIsEnabled, disabled, onChange }) {
   const theme2 = (0, import_react_better_core11.useTheme)();
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-    import_react_native10.StatusBar,
+  const [enabled, setEnabled] = (0, import_react_better_core11.useBooleanState)(isEnabled ?? defaultIsEnabled);
+  const onPressElement = (0, import_react13.useCallback)(() => {
+    onChange?.(!enabled);
+    setEnabled.toggle();
+  }, [onChange, enabled]);
+  const trackColor = (0, import_react13.useMemo)(
+    () => ({
+      false: theme2.colors.border,
+      true: theme2.colors.primary
+    }),
+    [theme2.colors]
+  );
+  (0, import_react13.useEffect)(() => {
+    if (isEnabled === void 0) return;
+    setEnabled.setState(isEnabled);
+  }, [isEnabled]);
+  const ballSize = 26;
+  const ballGap = 3;
+  const holderWidth = ballSize * 2.1;
+  return import_react_native10.Platform.OS === "ios" ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    import_react_native10.Switch,
+    {
+      trackColor,
+      ios_backgroundColor: theme2.colors.border,
+      onValueChange: onPressElement,
+      value: enabled,
+      disabled
+    }
+  ) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    View_default,
+    {
+      width: holderWidth,
+      borderRadius: 999,
+      pressStrength: pressStrength().p05,
+      disabled,
+      onPress: !disabled ? onPressElement : void 0,
+      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        Animate_default.View,
+        {
+          width: "100%",
+          height: ballGap + ballSize + ballGap,
+          borderRadius: 999,
+          initialOpacity: 1,
+          animateOpacity: disabled ? 0.6 : 1,
+          initialBackgroundColor: theme2.colors.border,
+          animateBackgroundColor: enabled ? theme2.colors.primary : theme2.colors.border,
+          children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            Animate_default.View,
+            {
+              width: ballSize,
+              height: ballSize,
+              top: ballGap,
+              borderRadius: 999,
+              backgroundColor: theme2.colors.backgroundContent,
+              initialX: ballGap,
+              animateX: enabled ? holderWidth - ballGap - ballSize : ballGap
+            }
+          )
+        }
+      )
+    }
+  );
+}
+var Switch_default = (0, import_react13.memo)(Switch);
+
+// src/components/StatusBar.tsx
+var import_react14 = require("react");
+var import_react_better_core12 = require("react-better-core");
+var import_react_native11 = require("react-native");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function StatusBar({ darkStatusBar, hidden, barStyle, androidBarStyle, iOSBarStyle }) {
+  const theme2 = (0, import_react_better_core12.useTheme)();
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    import_react_native11.StatusBar,
     {
       backgroundColor: darkStatusBar ? theme2.colors.backgroundSecondary : void 0,
-      barStyle: barStyle ?? (import_react_native10.Platform.OS === "android" ? androidBarStyle : iOSBarStyle),
+      barStyle: barStyle ?? (import_react_native11.Platform.OS === "android" ? androidBarStyle : iOSBarStyle),
       hidden
     }
   );
 }
-var StatusBar_default = (0, import_react13.memo)(StatusBar);
+var StatusBar_default = (0, import_react14.memo)(StatusBar);
+
+// src/components/ListItem.tsx
+var import_react15 = require("react");
+var import_react_better_core13 = require("react-better-core");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function ListItem({
+  icon,
+  iconIOS,
+  title,
+  description,
+  rightElement,
+  backgroundColor,
+  insideScreenHolder,
+  onPress,
+  rightArrowValue,
+  switchIsEnabled,
+  switchOnChange
+}) {
+  const theme2 = (0, import_react_better_core13.useTheme)();
+  const device = useDevice();
+  const sideSpace = theme2.styles.space;
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    View_default,
+    {
+      width: insideScreenHolder ? device.windowDimensions.width : "100%",
+      backgroundColor: backgroundColor ?? theme2.colors.backgroundBase,
+      marginHorizontal: insideScreenHolder ? -sideSpace : void 0,
+      paddingVertical: theme2.styles.gap,
+      paddingHorizontal: sideSpace,
+      pressStrength: pressStrength().p05,
+      onPress,
+      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(View_default, { isRow: true, alignItems: "center", gap: theme2.styles.space, children: [
+        icon && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon_default, { name: icon, nameIOS: iconIOS, size: 22, color: theme2.colors.primary }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(View_default, { flex: 1, flexDirection: "row", alignItems: "center", gap: theme2.styles.gap, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(View_default, { flex: 1, children: [
+          title && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Text_default, { fontSize: 20, fontWeight: 700, children: title }),
+          description && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Text_default.body, { children: description })
+        ] }) }),
+        rightElement ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children: rightElement === "arrow" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(View_default, { isRow: true, alignItems: "center", gap: theme2.styles.gap / 2, children: [
+          rightArrowValue !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Text_default, { fontSize: 14, fontWeight: 700, children: rightArrowValue }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            Icon_default,
+            {
+              name: "chevronRight",
+              nameIOS: "chevron.right",
+              color: rightArrowValue !== void 0 ? theme2.colors.textPrimary : theme2.colors.textSecondary
+            }
+          )
+        ] }) : rightElement === "switch" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Switch_default, { isEnabled: switchIsEnabled, onChange: switchOnChange }) : void 0 }) : void 0
+      ] })
+    }
+  );
+}
+var ListItem_default = (0, import_react15.memo)(ListItem);
 
 // src/plugins/asyncStorage.ts
 var defaultAsyncStoragePluginOptions = {};
@@ -1890,9 +2035,11 @@ var asyncStoragePlugin = (options) => ({
   Icon,
   Image,
   InputField,
+  ListItem,
   Loader,
   ScreenHolder,
   StatusBar,
+  Switch,
   Text,
   View,
   asyncStoragePlugin,