react-native-better-html 1.0.24 → 1.0.26

package/dist/index.mjs

@@ -1,6 +1,6 @@
 // src/index.ts
 import {
-  useTheme as useTheme15,
+  useTheme as useTheme17,
   useLoader as useLoader2,
   useLoaderControls,
   countries,
@@ -14,7 +14,7 @@ import {
   eventStopPropagation,
   eventPreventStop,
   getPluralWord,
-  useBooleanState as useBooleanState6,
+  useBooleanState as useBooleanState7,
   useDebounceState,
   loaderControls,
   colorThemeControls
@@ -452,6 +452,22 @@ function useForm(options) {
     },
     [values, setFieldValue]
   );
+  const getCheckBoxProps = 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 = useCallback(() => {
     setValues(defaultValues);
     setErrors({});
@@ -476,6 +492,7 @@ function useForm(options) {
     setFieldsValue,
     getInputFieldProps,
     getSwitchProps,
+    getCheckBoxProps,
     focusField,
     inputFieldRefs: inputFieldRefs.current,
     validate: validateForm,
@@ -1585,11 +1602,24 @@ function generateAsyncStorage() {
   };
 }
 
+// src/components/Label.tsx
+import { memo as memo11 } from "react";
+import { useTheme as useTheme10 } from "react-better-core";
+import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+function Label({ text, required, isError }) {
+  const theme2 = useTheme10();
+  return /* @__PURE__ */ jsxs5(View_default, { isRow: true, alignItems: "center", gap: 2, children: [
+    text && /* @__PURE__ */ jsx11(Text_default, { fontSize: 14, color: isError ? theme2.colors.error : theme2.colors.textSecondary, children: text }),
+    required && /* @__PURE__ */ jsx11(Text_default, { color: theme2.colors.error, children: "*" })
+  ] });
+}
+var Label_default = memo11(Label);
+
 // src/components/ScreenHolder.tsx
-import { memo as memo11, useCallback as useCallback5, useMemo as useMemo8 } from "react";
+import { memo as memo12, useCallback as useCallback5, useMemo as useMemo8 } from "react";
 import { KeyboardAvoidingView, Platform as Platform4, RefreshControl, ScrollView } from "react-native";
-import { useBooleanState as useBooleanState3, useTheme as useTheme10 } from "react-better-core";
-import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+import { useBooleanState as useBooleanState3, useTheme as useTheme11 } from "react-better-core";
+import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
 var ScreenHolderComponent = ({
   noScroll,
   noSideSpace,
@@ -1607,7 +1637,7 @@ var ScreenHolderComponent = ({
   withNoHeader,
   children
 }) => {
-  const theme2 = useTheme10();
+  const theme2 = useTheme11();
   const device = useDevice();
   const keyboard = useKeyboard();
   const [isRefreshing, setIsRefreshing] = useBooleanState3();
@@ -1625,7 +1655,7 @@ var ScreenHolderComponent = ({
       onRefreshEnd?.();
     }, refreshTimeout * 1e3);
   }, [onRefresh, onRefreshEnd, refreshTimeout]);
-  const content = /* @__PURE__ */ jsx11(
+  const content = /* @__PURE__ */ jsx12(
     View_default,
     {
       flex: 1,
@@ -1636,21 +1666,21 @@ var ScreenHolderComponent = ({
     }
   );
   const withRefresh = onRefresh || onRefreshEnd;
-  return /* @__PURE__ */ jsx11(View_default, { flex: 1, backgroundColor: backgroundColor ?? theme2.colors.backgroundBase, children: /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsx12(View_default, { flex: 1, backgroundColor: backgroundColor ?? theme2.colors.backgroundBase, children: /* @__PURE__ */ jsxs6(
     KeyboardAvoidingView,
     {
       style: keyboardAvoidingViewStyle,
       keyboardVerticalOffset: keyboardVerticalOffset ?? (withNoHeader ? Platform4.OS === "ios" ? 0 : theme2.styles.gap : keepFooterOnKeyboardOpened ? Platform4.OS === "ios" ? device.safeArea.afterCalculations.bottom : theme2.styles.gap : void 0),
       behavior: Platform4.OS === "ios" ? "padding" : "height",
       children: [
-        /* @__PURE__ */ jsx11(View_default, { flex: 1, children: noScroll ? content : /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx12(View_default, { flex: 1, children: noScroll ? content : /* @__PURE__ */ jsx12(
           ScrollView,
           {
-            refreshControl: withRefresh ? /* @__PURE__ */ jsx11(RefreshControl, { refreshing: isRefreshing, onRefresh: onRefreshElement }) : void 0,
+            refreshControl: withRefresh ? /* @__PURE__ */ jsx12(RefreshControl, { refreshing: isRefreshing, onRefresh: onRefreshElement }) : void 0,
             children: content
           }
         ) }),
-        keepFooterOnKeyboardOpened || (Platform4.OS === "ios" ? !keyboard.willOpen : !keyboard.isOpened) ? footer && /* @__PURE__ */ jsx11(View_default, { children: footer }) : !withNoHeader && /* @__PURE__ */ jsx11(
+        keepFooterOnKeyboardOpened || (Platform4.OS === "ios" ? !keyboard.willOpen : !keyboard.isOpened) ? footer && /* @__PURE__ */ jsx12(View_default, { children: footer }) : !withNoHeader && /* @__PURE__ */ jsx12(
           View_default,
           {
             width: "100%",
@@ -1668,10 +1698,10 @@ ScreenHolderComponent.footer = function Footer({
   withNoHeader,
   children
 }) {
-  const theme2 = useTheme10();
+  const theme2 = useTheme11();
   const device = useDevice();
   const keyboard = useKeyboard();
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12(
     View_default,
     {
       backgroundColor: backgroundColor ?? theme2.colors.backgroundBase,
@@ -1682,14 +1712,14 @@ ScreenHolderComponent.footer = function Footer({
     }
   );
 };
-var ScreenHolder = memo11(ScreenHolderComponent);
+var ScreenHolder = memo12(ScreenHolderComponent);
 ScreenHolder.footer = ScreenHolderComponent.footer;
 var ScreenHolder_default = ScreenHolder;
 
 // src/components/InputField.tsx
 import {
   forwardRef,
-  memo as memo12,
+  memo as memo13,
   useCallback as useCallback6,
   useEffect as useEffect6,
   useImperativeHandle,
@@ -1709,9 +1739,9 @@ import {
   lightenColor,
   useBetterCoreContext as useBetterCoreContext4,
   useBooleanState as useBooleanState4,
-  useTheme as useTheme11
+  useTheme as useTheme12
 } from "react-better-core";
-import { Fragment as Fragment4, jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
 var InputFieldComponent = forwardRef(
   ({
     flex,
@@ -1763,7 +1793,7 @@ var InputFieldComponent = forwardRef(
     onPressEnter,
     ...props
   }, ref) => {
-    const theme2 = useTheme11();
+    const theme2 = useTheme12();
     const { colorTheme } = useBetterCoreContext4();
     const textInputRef = useRef3(null);
     const [internalValue, setInternalValue] = useState3(value?.toString() || defaultValue || "");
@@ -1881,12 +1911,9 @@ var InputFieldComponent = forwardRef(
     }, []);
     const withPressInputField = !!onPress || type === "date" || type === "time";
     const prefixSuffixBackgroundColor = colorTheme === "light" ? darkenColor(theme2.colors.backgroundContent, 0.03) : lightenColor(theme2.colors.backgroundContent, 0.1);
-    const labelComponent = label && /* @__PURE__ */ jsxs6(View_default, { isRow: true, alignItems: "center", gap: 2, children: [
-      /* @__PURE__ */ jsx12(Text_default, { fontSize: 14, color: isError ? theme2.colors.error : theme2.colors.textSecondary, children: label }),
-      required && /* @__PURE__ */ jsx12(Text_default, { color: theme2.colors.error, children: "*" })
-    ] });
+    const labelComponent = label ? /* @__PURE__ */ jsx13(Label_default, { text: label, isError, required }) : void 0;
     const borderColor = isFocused ? theme2.colors.primary : isError ? theme2.colors.error : theme2.colors.border;
-    return /* @__PURE__ */ jsxs6(
+    return /* @__PURE__ */ jsxs7(
       Animate_default.View,
       {
         flex,
@@ -1896,8 +1923,8 @@ var InputFieldComponent = forwardRef(
         ...props,
         children: [
           isIOSDateTime && !iOSDateTimeFullSize ? void 0 : labelComponent,
-          /* @__PURE__ */ jsxs6(View_default, { isRow: true, position: "relative", alignItems: "center", height: readyHeight, children: [
-            prefix && /* @__PURE__ */ jsxs6(
+          /* @__PURE__ */ jsxs7(View_default, { isRow: true, position: "relative", alignItems: "center", height: readyHeight, children: [
+            prefix && /* @__PURE__ */ jsxs7(
               View_default,
               {
                 isRow: true,
@@ -1915,8 +1942,8 @@ var InputFieldComponent = forwardRef(
                 zIndex: 1,
                 onPress: onPressPrefix,
                 children: [
-                  typeof prefix === "string" ? /* @__PURE__ */ jsx12(Text_default, { fontWeight: 700, lineHeight, children: prefix }) : prefix,
-                  /* @__PURE__ */ jsx12(
+                  typeof prefix === "string" ? /* @__PURE__ */ jsx13(Text_default, { fontWeight: 700, lineHeight, children: prefix }) : prefix,
+                  /* @__PURE__ */ jsx13(
                     Animate_default.View,
                     {
                       position: "absolute",
@@ -1931,9 +1958,9 @@ var InputFieldComponent = forwardRef(
                 ]
               }
             ),
-            isIOSDateTime ? /* @__PURE__ */ jsxs6(Fragment4, { children: [
+            isIOSDateTime ? /* @__PURE__ */ jsxs7(Fragment4, { children: [
               !iOSDateTimeFullSize ? labelComponent : void 0,
-              /* @__PURE__ */ jsx12(
+              /* @__PURE__ */ jsx13(
                 RNDateTimePicker,
                 {
                   value: internalDateValue ?? /* @__PURE__ */ new Date(),
@@ -1945,7 +1972,7 @@ var InputFieldComponent = forwardRef(
                   onValueChange: onValueChangeRNDateTimePicker
                 }
               )
-            ] }) : /* @__PURE__ */ jsx12(
+            ] }) : /* @__PURE__ */ jsx13(
               View_default,
               {
                 flex: 1,
@@ -1956,7 +1983,7 @@ var InputFieldComponent = forwardRef(
                 borderBottomRightRadius: suffix ? 0 : theme2.styles.borderRadius,
                 pressStrength: 1,
                 onPress: Platform5.OS === "android" ? editable === false || withPressInputField ? onPressInputField : void 0 : void 0,
-                children: /* @__PURE__ */ jsxs6(
+                children: /* @__PURE__ */ jsxs7(
                   Animate_default.View,
                   {
                     position: "relative",
@@ -1974,7 +2001,7 @@ var InputFieldComponent = forwardRef(
                     animateBorderColor: borderColor,
                     overflow: "hidden",
                     children: [
-                      leftIcon && /* @__PURE__ */ jsx12(
+                      leftIcon && /* @__PURE__ */ jsx13(
                         Icon_default,
                         {
                           position: "absolute",
@@ -1987,7 +2014,7 @@ var InputFieldComponent = forwardRef(
                           onPress: onPressLeftIcon
                         }
                       ),
-                      /* @__PURE__ */ jsx12(
+                      /* @__PURE__ */ jsx13(
                         TextInput2,
                         {
                           style: textInputStyle,
@@ -2020,7 +2047,7 @@ var InputFieldComponent = forwardRef(
                           ref: textInputRef
                         }
                       ),
-                      rightIcon && /* @__PURE__ */ jsx12(
+                      rightIcon && /* @__PURE__ */ jsx13(
                         Icon_default,
                         {
                           position: "absolute",
@@ -2038,7 +2065,7 @@ var InputFieldComponent = forwardRef(
                 )
               }
             ),
-            suffix && /* @__PURE__ */ jsxs6(
+            suffix && /* @__PURE__ */ jsxs7(
               View_default,
               {
                 isRow: true,
@@ -2056,8 +2083,8 @@ var InputFieldComponent = forwardRef(
                 zIndex: 1,
                 onPress: onPressSuffix,
                 children: [
-                  typeof suffix === "string" ? /* @__PURE__ */ jsx12(Text_default, { fontWeight: 700, lineHeight, children: suffix }) : suffix,
-                  /* @__PURE__ */ jsx12(
+                  typeof suffix === "string" ? /* @__PURE__ */ jsx13(Text_default, { fontWeight: 700, lineHeight, children: suffix }) : suffix,
+                  /* @__PURE__ */ jsx13(
                     Animate_default.View,
                     {
                       position: "absolute",
@@ -2073,7 +2100,7 @@ var InputFieldComponent = forwardRef(
               }
             )
           ] }),
-          infoMessage && /* @__PURE__ */ jsx12(
+          infoMessage && /* @__PURE__ */ jsx13(
             Animate_default.Text,
             {
               fontSize: 14,
@@ -2085,7 +2112,7 @@ var InputFieldComponent = forwardRef(
               children: infoMessage
             }
           ),
-          errorMessage && /* @__PURE__ */ jsx12(
+          errorMessage && /* @__PURE__ */ jsx13(
             Animate_default.Text,
             {
               fontSize: 14,
@@ -2103,7 +2130,7 @@ var InputFieldComponent = forwardRef(
   }
 );
 InputFieldComponent.email = forwardRef(function Email(props, ref) {
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13(
     InputFieldComponent,
     {
       placeholder: "your@email.here",
@@ -2126,7 +2153,7 @@ InputFieldComponent.password = forwardRef(function Password(props, ref) {
   useImperativeHandle(ref, () => {
     return inputFieldRef.current;
   }, []);
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13(
     InputFieldComponent,
     {
       secureTextEntry: !showPassword,
@@ -2142,11 +2169,11 @@ InputFieldComponent.password = forwardRef(function Password(props, ref) {
   );
 });
 InputFieldComponent.search = forwardRef(function Search(props, ref) {
-  return /* @__PURE__ */ jsx12(InputFieldComponent, { placeholder: "Search...", leftIcon: "magnifyingGlass", ...props, ref });
+  return /* @__PURE__ */ jsx13(InputFieldComponent, { placeholder: "Search...", leftIcon: "magnifyingGlass", ...props, ref });
 });
 InputFieldComponent.code = forwardRef(function Password2({ isSmall, ...props }, ref) {
-  const theme2 = useTheme11();
-  return /* @__PURE__ */ jsx12(
+  const theme2 = useTheme12();
+  return /* @__PURE__ */ jsx13(
     InputFieldComponent,
     {
       flex: 1,
@@ -2161,7 +2188,7 @@ InputFieldComponent.code = forwardRef(function Password2({ isSmall, ...props },
     }
   );
 });
-var InputField = memo12(InputFieldComponent);
+var InputField = memo13(InputFieldComponent);
 InputField.email = InputFieldComponent.email;
 InputField.password = InputFieldComponent.password;
 InputField.search = InputFieldComponent.search;
@@ -2169,12 +2196,12 @@ InputField.code = InputFieldComponent.code;
 var InputField_default = InputField;
 
 // src/components/Switch.tsx
-import { memo as memo13, useCallback as useCallback7, useEffect as useEffect7, useMemo as useMemo10 } from "react";
+import { memo as memo14, useCallback as useCallback7, useEffect as useEffect7, useMemo as useMemo10 } from "react";
 import { Switch as NativeSwitch, Platform as Platform6 } from "react-native";
-import { useBooleanState as useBooleanState5, useTheme as useTheme12 } from "react-better-core";
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { useBooleanState as useBooleanState5, useTheme as useTheme13 } from "react-better-core";
+import { jsx as jsx14 } from "react/jsx-runtime";
 function Switch({ isEnabled, defaultIsEnabled, disabled, onChange }) {
-  const theme2 = useTheme12();
+  const theme2 = useTheme13();
   const [enabled, setEnabled] = useBooleanState5(isEnabled ?? defaultIsEnabled);
   const onPressElement = useCallback7(() => {
     onChange?.(!enabled);
@@ -2194,7 +2221,7 @@ function Switch({ isEnabled, defaultIsEnabled, disabled, onChange }) {
   const ballSize = 26;
   const ballGap = 3;
   const holderWidth = ballSize * 2.1;
-  return Platform6.OS === "ios" ? /* @__PURE__ */ jsx13(
+  return Platform6.OS === "ios" ? /* @__PURE__ */ jsx14(
     NativeSwitch,
     {
       trackColor,
@@ -2203,7 +2230,7 @@ function Switch({ isEnabled, defaultIsEnabled, disabled, onChange }) {
       value: enabled,
       disabled
     }
-  ) : /* @__PURE__ */ jsx13(
+  ) : /* @__PURE__ */ jsx14(
     View_default,
     {
       width: holderWidth,
@@ -2211,23 +2238,26 @@ function Switch({ isEnabled, defaultIsEnabled, disabled, onChange }) {
       pressStrength: pressStrength().p05,
       disabled,
       onPress: !disabled ? onPressElement : void 0,
-      children: /* @__PURE__ */ jsx13(
+      children: /* @__PURE__ */ jsx14(
         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__ */ jsx13(
+          initialOpacity: 1,
+          animateOpacity: disabled ? 0.6 : 1,
+          children: /* @__PURE__ */ jsx14(
             Animate_default.View,
             {
               width: ballSize,
               height: ballSize,
               top: ballGap,
               borderRadius: 999,
+              transitionType: "spring",
+              transitionDamping: 20,
+              transitionStiffness: 230,
               backgroundColor: theme2.colors.backgroundContent,
               initialX: ballGap,
               animateX: enabled ? holderWidth - ballGap - ballSize : ballGap
@@ -2238,30 +2268,122 @@ function Switch({ isEnabled, defaultIsEnabled, disabled, onChange }) {
     }
   );
 }
-var Switch_default = memo13(Switch);
+var Switch_default = memo14(Switch);
+
+// src/components/CheckBox.tsx
+import { memo as memo15, useCallback as useCallback8, useEffect as useEffect8 } from "react";
+import { Platform as Platform7 } from "react-native";
+import { useBooleanState as useBooleanState6, useTheme as useTheme14 } from "react-better-core";
+import { Fragment as Fragment5, jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
+function CheckBox({
+  isChecked,
+  defaultIsChecked,
+  size = 36,
+  text,
+  required,
+  disabled,
+  onChange
+}) {
+  const theme2 = useTheme14();
+  const [checked, setChecked] = useBooleanState6(isChecked ?? defaultIsChecked);
+  const onPressElement = useCallback8(() => {
+    onChange?.(!checked);
+    setChecked.toggle();
+  }, [onChange, checked]);
+  useEffect8(() => {
+    if (isChecked === void 0) return;
+    setChecked.setState(isChecked);
+  }, [isChecked]);
+  const checkBox = /* @__PURE__ */ jsx15(
+    View_default,
+    {
+      width: size,
+      borderRadius: theme2.styles.borderRadius,
+      pressStrength: pressStrength().p05,
+      disabled,
+      onPress: !disabled ? onPressElement : void 0,
+      children: /* @__PURE__ */ jsx15(
+        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__ */ jsx15(
+            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__ */ jsx15(
+                Icon_default,
+                {
+                  name: "check",
+                  nameIOS: "checkmark",
+                  size: size * (Platform7.OS === "ios" ? 0.5 : 0.6),
+                  color: theme2.colors.base
+                }
+              )
+            }
+          )
+        }
+      )
+    }
+  );
+  return text ? /* @__PURE__ */ jsx15(Fragment5, { children: /* @__PURE__ */ jsxs8(View_default, { isRow: true, alignItems: "center", gap: theme2.styles.gap, children: [
+    checkBox,
+    /* @__PURE__ */ jsx15(
+      View_default,
+      {
+        width: "100%",
+        flexShrink: 1,
+        pressType: "opacity",
+        pressStrength: pressStrength().p3,
+        onPress: onPressElement,
+        children: /* @__PURE__ */ jsxs8(View_default, { isRow: true, alignItems: "flex-start", gap: 2, children: [
+          /* @__PURE__ */ jsx15(View_default, { flexShrink: 1, children: typeof text === "string" ? /* @__PURE__ */ jsx15(Text_default, { children: text }) : text }),
+          required && /* @__PURE__ */ jsx15(Label_default, { required: true })
+        ] })
+      }
+    )
+  ] }) }) : checkBox;
+}
+var CheckBox_default = memo15(CheckBox);
 
 // src/components/StatusBar.tsx
-import { memo as memo14 } from "react";
-import { useTheme as useTheme13 } from "react-better-core";
-import { StatusBar as NativeStatusBar, Platform as Platform7 } from "react-native";
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { memo as memo16 } from "react";
+import { useTheme as useTheme15 } from "react-better-core";
+import { StatusBar as NativeStatusBar, Platform as Platform8 } from "react-native";
+import { jsx as jsx16 } from "react/jsx-runtime";
 function StatusBar({ darkStatusBar, hidden, barStyle, androidBarStyle, iOSBarStyle }) {
-  const theme2 = useTheme13();
-  return /* @__PURE__ */ jsx14(
+  const theme2 = useTheme15();
+  return /* @__PURE__ */ jsx16(
     NativeStatusBar,
     {
       backgroundColor: darkStatusBar ? theme2.colors.backgroundSecondary : void 0,
-      barStyle: barStyle ?? (Platform7.OS === "android" ? androidBarStyle : iOSBarStyle),
+      barStyle: barStyle ?? (Platform8.OS === "android" ? androidBarStyle : iOSBarStyle),
       hidden
     }
   );
 }
-var StatusBar_default = memo14(StatusBar);
+var StatusBar_default = memo16(StatusBar);
 
 // src/components/ListItem.tsx
-import { memo as memo15 } from "react";
-import { useTheme as useTheme14 } from "react-better-core";
-import { Fragment as Fragment5, jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
+import { memo as memo17 } from "react";
+import { useTheme as useTheme16 } from "react-better-core";
+import { Fragment as Fragment6, jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
 function ListItem({
   icon,
   iconIOS,
@@ -2275,12 +2397,14 @@ function ListItem({
   rightValue,
   rightValueSelectable,
   switchIsEnabled,
-  switchOnChange
+  switchOnChange,
+  checkBoxIsChecked,
+  checkBoxOnChange
 }) {
-  const theme2 = useTheme14();
+  const theme2 = useTheme16();
   const device = useDevice();
   const sideSpace = theme2.styles.space;
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx17(
     View_default,
     {
       width: insideScreenHolder ? device.windowDimensions.width : "100%",
@@ -2290,15 +2414,15 @@ function ListItem({
       paddingHorizontal: sideSpace,
       pressStrength: pressStrength().p05,
       onPress,
-      children: /* @__PURE__ */ jsxs7(View_default, { isRow: true, alignItems: "center", gap: theme2.styles.space, children: [
-        icon && /* @__PURE__ */ jsx15(Icon_default, { name: icon, nameIOS: iconIOS, size: 22, color: theme2.colors.primary }),
-        /* @__PURE__ */ jsx15(View_default, { flex: 1, flexDirection: "row", alignItems: "center", gap: theme2.styles.gap, children: /* @__PURE__ */ jsxs7(View_default, { flex: 1, children: [
-          title && /* @__PURE__ */ jsx15(Text_default, { fontSize: 20, fontWeight: 700, children: title }),
-          description && /* @__PURE__ */ jsx15(Text_default.body, { selectable: descriptionSelectable, children: description })
+      children: /* @__PURE__ */ jsxs9(View_default, { isRow: true, alignItems: "center", gap: theme2.styles.space, children: [
+        icon && /* @__PURE__ */ jsx17(Icon_default, { name: icon, nameIOS: iconIOS, size: 22, color: theme2.colors.primary }),
+        /* @__PURE__ */ jsx17(View_default, { flex: 1, flexDirection: "row", alignItems: "center", gap: theme2.styles.gap, children: /* @__PURE__ */ jsxs9(View_default, { flex: 1, children: [
+          title && /* @__PURE__ */ jsx17(Text_default, { fontSize: 20, fontWeight: 700, children: title }),
+          description && /* @__PURE__ */ jsx17(Text_default.body, { selectable: descriptionSelectable, children: description })
         ] }) }),
-        rightElement ? /* @__PURE__ */ jsx15(Fragment5, { children: rightValue !== void 0 || rightElement === "arrow" ? /* @__PURE__ */ jsxs7(View_default, { isRow: true, alignItems: "center", gap: theme2.styles.gap / 2, children: [
-          rightValue !== void 0 && /* @__PURE__ */ jsx15(Text_default, { fontSize: 14, fontWeight: 700, selectable: rightValueSelectable, children: rightValue }),
-          rightElement === "arrow" && /* @__PURE__ */ jsx15(
+        rightElement ? /* @__PURE__ */ jsx17(Fragment6, { children: rightValue !== void 0 || rightElement === "arrow" ? /* @__PURE__ */ jsxs9(View_default, { isRow: true, alignItems: "center", gap: theme2.styles.gap / 2, children: [
+          rightValue !== void 0 && /* @__PURE__ */ jsx17(Text_default, { fontSize: 14, fontWeight: 700, selectable: rightValueSelectable, children: rightValue }),
+          rightElement === "arrow" && /* @__PURE__ */ jsx17(
             Icon_default,
             {
               name: "chevronRight",
@@ -2306,19 +2430,21 @@ function ListItem({
               color: rightValue !== void 0 ? theme2.colors.textPrimary : theme2.colors.textSecondary
             }
           )
-        ] }) : rightElement === "switch" ? /* @__PURE__ */ jsx15(Switch_default, { isEnabled: switchIsEnabled, onChange: switchOnChange }) : void 0 }) : void 0
+        ] }) : rightElement === "switch" ? /* @__PURE__ */ jsx17(Switch_default, { isEnabled: switchIsEnabled, onChange: switchOnChange }) : rightElement === "checkBox" ? /* @__PURE__ */ jsx17(CheckBox_default, { isChecked: checkBoxIsChecked, onChange: checkBoxOnChange }) : void 0 }) : void 0
       ] })
     }
   );
 }
-var ListItem_default = memo15(ListItem);
+var ListItem_default = memo17(ListItem);
 export {
   Animate_default as Animate,
   BetterComponentsProvider_default as BetterComponentsProvider,
   Button_default as Button,
+  CheckBox_default as CheckBox,
   Icon_default as Icon,
   Image_default as Image,
   InputField_default as InputField,
+  Label_default as Label,
   ListItem_default as ListItem,
   Loader_default as Loader,
   ScreenHolder_default as ScreenHolder,
@@ -2349,7 +2475,7 @@ export {
   saturateColor,
   useAlertControls,
   useBetterComponentsContext,
-  useBooleanState6 as useBooleanState,
+  useBooleanState7 as useBooleanState,
   useDebounceState,
   useDevice,
   useEventEmitter,
@@ -2357,6 +2483,6 @@ export {
   useKeyboard,
   useLoader2 as useLoader,
   useLoaderControls,
-  useTheme15 as useTheme
+  useTheme17 as useTheme
 };
 //# sourceMappingURL=index.mjs.map