react-native-better-html 1.0.24 → 1.0.25

package/dist/index.d.mts

@@ -50,7 +50,7 @@ type BetterComponentsProviderProps = BetterProviderCommonProps & {
     config?: BetterComponentsProviderConfig;
 };
 declare function BetterComponentsProvider({ config, ...props }: BetterComponentsProviderProps): react_jsx_runtime.JSX.Element;
-declare const _default$4: react.MemoExoticComponent<typeof BetterComponentsProvider>;
+declare const _default$5: react.MemoExoticComponent<typeof BetterComponentsProvider>;
 
 type ComponentStyle<Style extends ViewStyle = ViewStyle> = OmitProps<Style, "shadowOffset" | ComponentExcludeMarginProps | ComponentExcludePaddingProps> & {
     shadowOffsetWidth?: number;
@@ -107,7 +107,7 @@ type IconProps = {
     color?: ColorValue;
 } & OmitProps<ViewProps, "width" | "height" | "pressType">;
 declare function Icon({ name, nameIOS, size, color, ...props }: IconProps): react_jsx_runtime.JSX.Element;
-declare const _default$3: react.MemoExoticComponent<typeof Icon>;
+declare const _default$4: react.MemoExoticComponent<typeof Icon>;
 
 type InputFieldProps = {
     flex?: ViewStyle["flex"];
@@ -195,7 +195,19 @@ type SwitchProps = {
     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 const _default$3: react.MemoExoticComponent<typeof Switch>;
+
+type CheckBoxProps = {
+    isChecked?: boolean;
+    defaultIsChecked?: boolean;
+    /** @default 36 */
+    size?: number;
+    /** @default false */
+    disabled?: boolean;
+    onChange?: (isChecked: boolean) => void;
+};
+declare function CheckBox({ isChecked, defaultIsChecked, size, disabled, onChange }: CheckBoxProps): react_jsx_runtime.JSX.Element;
+declare const _default$2: react.MemoExoticComponent<typeof CheckBox>;
 
 declare function useDevice(): {
     safeArea: {
@@ -241,6 +253,7 @@ declare function useForm<FormFields extends Record<string | number, FormFieldVal
     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;
+    getCheckBoxProps: <FieldName extends keyof FormFields>(field: FieldName, insideListItem?: boolean) => CheckBoxProps;
     focusField: (field: keyof FormFields) => void;
     inputFieldRefs: Record<keyof FormFields, TextInput | undefined>;
     validate: () => {};
@@ -501,7 +514,7 @@ type ListItemProps = {
     title?: string;
     description?: string;
     descriptionSelectable?: boolean;
-    rightElement?: "arrow" | "switch";
+    rightElement?: "arrow" | "switch" | "checkBox";
     /** @default theme.colors.backgroundBase */
     backgroundColor?: ViewProps["backgroundColor"];
     /** @default false */
@@ -511,8 +524,10 @@ type ListItemProps = {
     rightValueSelectable?: boolean;
     switchIsEnabled?: boolean;
     switchOnChange?: (isEnabled: boolean) => void;
+    checkBoxIsChecked?: boolean;
+    checkBoxOnChange?: (isChecked: boolean) => void;
 };
-declare function ListItem({ icon, iconIOS, title, description, descriptionSelectable, rightElement, backgroundColor, insideScreenHolder, onPress, rightValue, rightValueSelectable, switchIsEnabled, switchOnChange, }: ListItemProps): react_jsx_runtime.JSX.Element;
+declare function ListItem({ icon, iconIOS, title, description, descriptionSelectable, rightElement, backgroundColor, insideScreenHolder, onPress, rightValue, rightValueSelectable, switchIsEnabled, switchOnChange, checkBoxIsChecked, checkBoxOnChange, }: ListItemProps): react_jsx_runtime.JSX.Element;
 declare const _default: react.MemoExoticComponent<typeof ListItem>;
 
 type AlertsPluginOptions = {
@@ -531,4 +546,4 @@ type AsyncStoragePluginOptions = {};
 declare const defaultAsyncStoragePluginOptions: Required<AsyncStoragePluginOptions>;
 declare const asyncStoragePlugin: BetterComponentsPluginConstructor<AsyncStoragePluginOptions>;
 
-export { type AlertsPluginOptions, 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, alertControls, alertsPlugin, asyncStoragePlugin, defaultAlertsPluginOptions, defaultAsyncStoragePluginOptions, generateAsyncStorage, getFormErrorObject, pressStrength, useAlertControls, useBetterComponentsContext, useDevice, useEventEmitter, useForm, useKeyboard };
+export { type AlertsPluginOptions, Animate, type AnimateTextProps, type AnimateViewProps, type AppConfig, type AsyncStoragePluginOptions, type BetterComponentsConfig, type BetterComponentsPlugin, _default$5 as BetterComponentsProvider, type BetterComponentsProviderConfig, Button, type ButtonProps, _default$2 as CheckBox, type CheckBoxProps, type ComponentMarginProps, type ComponentPaddingProps, type FooterProps, _default$4 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$3 as Switch, type SwitchProps, Text, type TextProps, View, type ViewProps, alertControls, alertsPlugin, asyncStoragePlugin, defaultAlertsPluginOptions, defaultAsyncStoragePluginOptions, generateAsyncStorage, getFormErrorObject, pressStrength, useAlertControls, useBetterComponentsContext, useDevice, useEventEmitter, useForm, useKeyboard };

package/dist/index.d.ts

@@ -50,7 +50,7 @@ type BetterComponentsProviderProps = BetterProviderCommonProps & {
     config?: BetterComponentsProviderConfig;
 };
 declare function BetterComponentsProvider({ config, ...props }: BetterComponentsProviderProps): react_jsx_runtime.JSX.Element;
-declare const _default$4: react.MemoExoticComponent<typeof BetterComponentsProvider>;
+declare const _default$5: react.MemoExoticComponent<typeof BetterComponentsProvider>;
 
 type ComponentStyle<Style extends ViewStyle = ViewStyle> = OmitProps<Style, "shadowOffset" | ComponentExcludeMarginProps | ComponentExcludePaddingProps> & {
     shadowOffsetWidth?: number;
@@ -107,7 +107,7 @@ type IconProps = {
     color?: ColorValue;
 } & OmitProps<ViewProps, "width" | "height" | "pressType">;
 declare function Icon({ name, nameIOS, size, color, ...props }: IconProps): react_jsx_runtime.JSX.Element;
-declare const _default$3: react.MemoExoticComponent<typeof Icon>;
+declare const _default$4: react.MemoExoticComponent<typeof Icon>;
 
 type InputFieldProps = {
     flex?: ViewStyle["flex"];
@@ -195,7 +195,19 @@ type SwitchProps = {
     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 const _default$3: react.MemoExoticComponent<typeof Switch>;
+
+type CheckBoxProps = {
+    isChecked?: boolean;
+    defaultIsChecked?: boolean;
+    /** @default 36 */
+    size?: number;
+    /** @default false */
+    disabled?: boolean;
+    onChange?: (isChecked: boolean) => void;
+};
+declare function CheckBox({ isChecked, defaultIsChecked, size, disabled, onChange }: CheckBoxProps): react_jsx_runtime.JSX.Element;
+declare const _default$2: react.MemoExoticComponent<typeof CheckBox>;
 
 declare function useDevice(): {
     safeArea: {
@@ -241,6 +253,7 @@ declare function useForm<FormFields extends Record<string | number, FormFieldVal
     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;
+    getCheckBoxProps: <FieldName extends keyof FormFields>(field: FieldName, insideListItem?: boolean) => CheckBoxProps;
     focusField: (field: keyof FormFields) => void;
     inputFieldRefs: Record<keyof FormFields, TextInput | undefined>;
     validate: () => {};
@@ -501,7 +514,7 @@ type ListItemProps = {
     title?: string;
     description?: string;
     descriptionSelectable?: boolean;
-    rightElement?: "arrow" | "switch";
+    rightElement?: "arrow" | "switch" | "checkBox";
     /** @default theme.colors.backgroundBase */
     backgroundColor?: ViewProps["backgroundColor"];
     /** @default false */
@@ -511,8 +524,10 @@ type ListItemProps = {
     rightValueSelectable?: boolean;
     switchIsEnabled?: boolean;
     switchOnChange?: (isEnabled: boolean) => void;
+    checkBoxIsChecked?: boolean;
+    checkBoxOnChange?: (isChecked: boolean) => void;
 };
-declare function ListItem({ icon, iconIOS, title, description, descriptionSelectable, rightElement, backgroundColor, insideScreenHolder, onPress, rightValue, rightValueSelectable, switchIsEnabled, switchOnChange, }: ListItemProps): react_jsx_runtime.JSX.Element;
+declare function ListItem({ icon, iconIOS, title, description, descriptionSelectable, rightElement, backgroundColor, insideScreenHolder, onPress, rightValue, rightValueSelectable, switchIsEnabled, switchOnChange, checkBoxIsChecked, checkBoxOnChange, }: ListItemProps): react_jsx_runtime.JSX.Element;
 declare const _default: react.MemoExoticComponent<typeof ListItem>;
 
 type AlertsPluginOptions = {
@@ -531,4 +546,4 @@ type AsyncStoragePluginOptions = {};
 declare const defaultAsyncStoragePluginOptions: Required<AsyncStoragePluginOptions>;
 declare const asyncStoragePlugin: BetterComponentsPluginConstructor<AsyncStoragePluginOptions>;
 
-export { type AlertsPluginOptions, 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, alertControls, alertsPlugin, asyncStoragePlugin, defaultAlertsPluginOptions, defaultAsyncStoragePluginOptions, generateAsyncStorage, getFormErrorObject, pressStrength, useAlertControls, useBetterComponentsContext, useDevice, useEventEmitter, useForm, useKeyboard };
+export { type AlertsPluginOptions, Animate, type AnimateTextProps, type AnimateViewProps, type AppConfig, type AsyncStoragePluginOptions, type BetterComponentsConfig, type BetterComponentsPlugin, _default$5 as BetterComponentsProvider, type BetterComponentsProviderConfig, Button, type ButtonProps, _default$2 as CheckBox, type CheckBoxProps, type ComponentMarginProps, type ComponentPaddingProps, type FooterProps, _default$4 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$3 as Switch, type SwitchProps, Text, type TextProps, View, type ViewProps, alertControls, alertsPlugin, asyncStoragePlugin, defaultAlertsPluginOptions, defaultAsyncStoragePluginOptions, generateAsyncStorage, getFormErrorObject, pressStrength, useAlertControls, useBetterComponentsContext, useDevice, useEventEmitter, useForm, useKeyboard };

package/dist/index.js

@@ -33,6 +33,7 @@ __export(index_exports, {
   Animate: () => Animate_default,
   BetterComponentsProvider: () => BetterComponentsProvider_default,
   Button: () => Button_default,
+  CheckBox: () => CheckBox_default,
   Icon: () => Icon_default,
   Image: () => Image_default,
   InputField: () => InputField_default,
@@ -46,38 +47,38 @@ __export(index_exports, {
   alertControls: () => alertControls,
   alertsPlugin: () => alertsPlugin,
   asyncStoragePlugin: () => asyncStoragePlugin,
-  colorThemeControls: () => import_react_better_core17.colorThemeControls,
-  countries: () => import_react_better_core17.countries,
-  darkenColor: () => import_react_better_core17.darkenColor,
+  colorThemeControls: () => import_react_better_core18.colorThemeControls,
+  countries: () => import_react_better_core18.countries,
+  darkenColor: () => import_react_better_core18.darkenColor,
   defaultAlertsPluginOptions: () => defaultAlertsPluginOptions,
   defaultAsyncStoragePluginOptions: () => defaultAsyncStoragePluginOptions,
-  desaturateColor: () => import_react_better_core17.desaturateColor,
-  eventPreventDefault: () => import_react_better_core17.eventPreventDefault,
-  eventPreventStop: () => import_react_better_core17.eventPreventStop,
-  eventStopPropagation: () => import_react_better_core17.eventStopPropagation,
-  formatPhoneNumber: () => import_react_better_core17.formatPhoneNumber,
+  desaturateColor: () => import_react_better_core18.desaturateColor,
+  eventPreventDefault: () => import_react_better_core18.eventPreventDefault,
+  eventPreventStop: () => import_react_better_core18.eventPreventStop,
+  eventStopPropagation: () => import_react_better_core18.eventStopPropagation,
+  formatPhoneNumber: () => import_react_better_core18.formatPhoneNumber,
   generateAsyncStorage: () => generateAsyncStorage,
-  generateRandomString: () => import_react_better_core17.generateRandomString,
+  generateRandomString: () => import_react_better_core18.generateRandomString,
   getFormErrorObject: () => getFormErrorObject,
-  getPluralWord: () => import_react_better_core17.getPluralWord,
-  lightenColor: () => import_react_better_core17.lightenColor,
-  loaderControls: () => import_react_better_core17.loaderControls,
+  getPluralWord: () => import_react_better_core18.getPluralWord,
+  lightenColor: () => import_react_better_core18.lightenColor,
+  loaderControls: () => import_react_better_core18.loaderControls,
   pressStrength: () => pressStrength,
-  saturateColor: () => import_react_better_core17.saturateColor,
+  saturateColor: () => import_react_better_core18.saturateColor,
   useAlertControls: () => useAlertControls,
   useBetterComponentsContext: () => useBetterComponentsContext,
-  useBooleanState: () => import_react_better_core17.useBooleanState,
-  useDebounceState: () => import_react_better_core17.useDebounceState,
+  useBooleanState: () => import_react_better_core18.useBooleanState,
+  useDebounceState: () => import_react_better_core18.useDebounceState,
   useDevice: () => useDevice,
   useEventEmitter: () => useEventEmitter,
   useForm: () => useForm,
   useKeyboard: () => useKeyboard,
-  useLoader: () => import_react_better_core17.useLoader,
-  useLoaderControls: () => import_react_better_core17.useLoaderControls,
-  useTheme: () => import_react_better_core17.useTheme
+  useLoader: () => import_react_better_core18.useLoader,
+  useLoaderControls: () => import_react_better_core18.useLoaderControls,
+  useTheme: () => import_react_better_core18.useTheme
 });
 module.exports = __toCommonJS(index_exports);
-var import_react_better_core17 = require("react-better-core");
+var import_react_better_core18 = require("react-better-core");
 
 // src/components/BetterComponentsProvider.tsx
 var import_react12 = require("react");
@@ -507,6 +508,22 @@ function useForm(options) {
     },
     [values, setFieldValue]
   );
+  const getCheckBoxProps = (0, import_react.useCallback)(
+    (field, insideListItem) => {
+      return insideListItem ? {
+        checkBoxIsChecked: values[field],
+        checkBoxOnChange: (value) => {
+          setFieldValue(field, value);
+        }
+      } : {
+        isChecked: values[field],
+        onChange: (value) => {
+          setFieldValue(field, value);
+        }
+      };
+    },
+    [values, setFieldValue]
+  );
   const reset = (0, import_react.useCallback)(() => {
     setValues(defaultValues);
     setErrors({});
@@ -531,6 +548,7 @@ function useForm(options) {
     setFieldsValue,
     getInputFieldProps,
     getSwitchProps,
+    getCheckBoxProps,
     focusField,
     inputFieldRefs: inputFieldRefs.current,
     validate: validateForm,
@@ -2241,10 +2259,10 @@ function Switch({ isEnabled, defaultIsEnabled, disabled, onChange }) {
           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,
+          initialOpacity: 1,
+          animateOpacity: disabled ? 0.6 : 1,
           children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             Animate_default.View,
             {
@@ -2252,6 +2270,9 @@ function Switch({ isEnabled, defaultIsEnabled, disabled, onChange }) {
               height: ballSize,
               top: ballGap,
               borderRadius: 999,
+              transitionType: "spring",
+              transitionDamping: 20,
+              transitionStiffness: 230,
               backgroundColor: theme2.colors.backgroundContent,
               initialX: ballGap,
               animateX: enabled ? holderWidth - ballGap - ballSize : ballGap
@@ -2264,28 +2285,95 @@ function Switch({ isEnabled, defaultIsEnabled, disabled, onChange }) {
 }
 var Switch_default = (0, import_react15.memo)(Switch);
 
-// src/components/StatusBar.tsx
+// src/components/CheckBox.tsx
 var import_react16 = require("react");
-var import_react_better_core15 = require("react-better-core");
 var import_react_native11 = require("react-native");
+var import_react_better_core15 = require("react-better-core");
 var import_jsx_runtime14 = require("react/jsx-runtime");
-function StatusBar({ darkStatusBar, hidden, barStyle, androidBarStyle, iOSBarStyle }) {
+function CheckBox({ isChecked, defaultIsChecked, size = 36, disabled, onChange }) {
   const theme2 = (0, import_react_better_core15.useTheme)();
+  const [checked, setChecked] = (0, import_react_better_core15.useBooleanState)(isChecked ?? defaultIsChecked);
+  const onPressElement = (0, import_react16.useCallback)(() => {
+    onChange?.(!checked);
+    setChecked.toggle();
+  }, [onChange, checked]);
+  (0, import_react16.useEffect)(() => {
+    if (isChecked === void 0) return;
+    setChecked.setState(isChecked);
+  }, [isChecked]);
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-    import_react_native11.StatusBar,
+    View_default,
     {
-      backgroundColor: darkStatusBar ? theme2.colors.backgroundSecondary : void 0,
-      barStyle: barStyle ?? (import_react_native11.Platform.OS === "android" ? androidBarStyle : iOSBarStyle),
-      hidden
+      width: size,
+      borderRadius: theme2.styles.borderRadius,
+      pressStrength: pressStrength().p05,
+      disabled,
+      onPress: !disabled ? onPressElement : void 0,
+      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        Animate_default.View,
+        {
+          width: "100%",
+          height: size,
+          borderWidth: 1,
+          borderRadius: theme2.styles.borderRadius,
+          initialBackgroundColor: theme2.colors.backgroundContent,
+          animateBackgroundColor: checked ? theme2.colors.primary : theme2.colors.backgroundContent,
+          initialBorderColor: theme2.colors.border,
+          animateBorderColor: checked ? theme2.colors.primary : theme2.colors.border,
+          initialOpacity: 1,
+          animateOpacity: disabled ? 0.6 : 1,
+          children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            Animate_default.View,
+            {
+              width: "100%",
+              height: "100%",
+              alignItems: "center",
+              justifyContent: "center",
+              transitionType: "spring",
+              transitionDamping: 20,
+              transitionStiffness: 230,
+              initialScale: 0,
+              animateScale: checked ? 1 : 0,
+              children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                Icon_default,
+                {
+                  name: "check",
+                  nameIOS: "checkmark",
+                  size: size * (import_react_native11.Platform.OS === "ios" ? 0.5 : 0.6),
+                  color: theme2.colors.base
+                }
+              )
+            }
+          )
+        }
+      )
     }
   );
 }
-var StatusBar_default = (0, import_react16.memo)(StatusBar);
+var CheckBox_default = (0, import_react16.memo)(CheckBox);
 
-// src/components/ListItem.tsx
+// src/components/StatusBar.tsx
 var import_react17 = require("react");
 var import_react_better_core16 = require("react-better-core");
+var import_react_native12 = require("react-native");
 var import_jsx_runtime15 = require("react/jsx-runtime");
+function StatusBar({ darkStatusBar, hidden, barStyle, androidBarStyle, iOSBarStyle }) {
+  const theme2 = (0, import_react_better_core16.useTheme)();
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    import_react_native12.StatusBar,
+    {
+      backgroundColor: darkStatusBar ? theme2.colors.backgroundSecondary : void 0,
+      barStyle: barStyle ?? (import_react_native12.Platform.OS === "android" ? androidBarStyle : iOSBarStyle),
+      hidden
+    }
+  );
+}
+var StatusBar_default = (0, import_react17.memo)(StatusBar);
+
+// src/components/ListItem.tsx
+var import_react18 = require("react");
+var import_react_better_core17 = require("react-better-core");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function ListItem({
   icon,
   iconIOS,
@@ -2299,12 +2387,14 @@ function ListItem({
   rightValue,
   rightValueSelectable,
   switchIsEnabled,
-  switchOnChange
+  switchOnChange,
+  checkBoxIsChecked,
+  checkBoxOnChange
 }) {
-  const theme2 = (0, import_react_better_core16.useTheme)();
+  const theme2 = (0, import_react_better_core17.useTheme)();
   const device = useDevice();
   const sideSpace = theme2.styles.space;
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     View_default,
     {
       width: insideScreenHolder ? device.windowDimensions.width : "100%",
@@ -2314,15 +2404,15 @@ function ListItem({
       paddingHorizontal: sideSpace,
       pressStrength: pressStrength().p05,
       onPress,
-      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(View_default, { isRow: true, alignItems: "center", gap: theme2.styles.space, children: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon_default, { name: icon, nameIOS: iconIOS, size: 22, color: theme2.colors.primary }),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(View_default, { flex: 1, flexDirection: "row", alignItems: "center", gap: theme2.styles.gap, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(View_default, { flex: 1, children: [
-          title && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Text_default, { fontSize: 20, fontWeight: 700, children: title }),
-          description && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Text_default.body, { selectable: descriptionSelectable, children: description })
+      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(View_default, { isRow: true, alignItems: "center", gap: theme2.styles.space, children: [
+        icon && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon_default, { name: icon, nameIOS: iconIOS, size: 22, color: theme2.colors.primary }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(View_default, { flex: 1, flexDirection: "row", alignItems: "center", gap: theme2.styles.gap, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(View_default, { flex: 1, children: [
+          title && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Text_default, { fontSize: 20, fontWeight: 700, children: title }),
+          description && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Text_default.body, { selectable: descriptionSelectable, children: description })
         ] }) }),
-        rightElement ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, { children: rightValue !== void 0 || rightElement === "arrow" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(View_default, { isRow: true, alignItems: "center", gap: theme2.styles.gap / 2, children: [
-          rightValue !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Text_default, { fontSize: 14, fontWeight: 700, selectable: rightValueSelectable, children: rightValue }),
-          rightElement === "arrow" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        rightElement ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, { children: rightValue !== void 0 || rightElement === "arrow" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(View_default, { isRow: true, alignItems: "center", gap: theme2.styles.gap / 2, children: [
+          rightValue !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Text_default, { fontSize: 14, fontWeight: 700, selectable: rightValueSelectable, children: rightValue }),
+          rightElement === "arrow" && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             Icon_default,
             {
               name: "chevronRight",
@@ -2330,17 +2420,18 @@ function ListItem({
               color: rightValue !== void 0 ? theme2.colors.textPrimary : theme2.colors.textSecondary
             }
           )
-        ] }) : rightElement === "switch" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Switch_default, { isEnabled: switchIsEnabled, onChange: switchOnChange }) : void 0 }) : void 0
+        ] }) : rightElement === "switch" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Switch_default, { isEnabled: switchIsEnabled, onChange: switchOnChange }) : rightElement === "checkBox" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CheckBox_default, { isChecked: checkBoxIsChecked, onChange: checkBoxOnChange }) : void 0 }) : void 0
       ] })
     }
   );
 }
-var ListItem_default = (0, import_react17.memo)(ListItem);
+var ListItem_default = (0, import_react18.memo)(ListItem);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Animate,
   BetterComponentsProvider,
   Button,
+  CheckBox,
   Icon,
   Image,
   InputField,