react-native-better-html 1.0.24 → 1.0.25

package/dist/index.mjs

@@ -1,6 +1,6 @@
 // src/index.ts
 import {
-  useTheme as useTheme15,
+  useTheme as useTheme16,
   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,
@@ -2217,10 +2234,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__ */ jsx13(
             Animate_default.View,
             {
@@ -2228,6 +2245,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
@@ -2240,28 +2260,95 @@ function Switch({ isEnabled, defaultIsEnabled, disabled, onChange }) {
 }
 var Switch_default = memo13(Switch);
 
-// 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";
+// src/components/CheckBox.tsx
+import { memo as memo14, useCallback as useCallback8, useEffect as useEffect8 } from "react";
+import { Platform as Platform7 } from "react-native";
+import { useBooleanState as useBooleanState6, useTheme as useTheme13 } from "react-better-core";
 import { jsx as jsx14 } from "react/jsx-runtime";
-function StatusBar({ darkStatusBar, hidden, barStyle, androidBarStyle, iOSBarStyle }) {
+function CheckBox({ isChecked, defaultIsChecked, size = 36, disabled, onChange }) {
   const theme2 = useTheme13();
+  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]);
   return /* @__PURE__ */ jsx14(
+    View_default,
+    {
+      width: size,
+      borderRadius: theme2.styles.borderRadius,
+      pressStrength: pressStrength().p05,
+      disabled,
+      onPress: !disabled ? onPressElement : void 0,
+      children: /* @__PURE__ */ jsx14(
+        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__ */ jsx14(
+            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__ */ jsx14(
+                Icon_default,
+                {
+                  name: "check",
+                  nameIOS: "checkmark",
+                  size: size * (Platform7.OS === "ios" ? 0.5 : 0.6),
+                  color: theme2.colors.base
+                }
+              )
+            }
+          )
+        }
+      )
+    }
+  );
+}
+var CheckBox_default = memo14(CheckBox);
+
+// src/components/StatusBar.tsx
+import { memo as memo15 } from "react";
+import { useTheme as useTheme14 } from "react-better-core";
+import { StatusBar as NativeStatusBar, Platform as Platform8 } from "react-native";
+import { jsx as jsx15 } from "react/jsx-runtime";
+function StatusBar({ darkStatusBar, hidden, barStyle, androidBarStyle, iOSBarStyle }) {
+  const theme2 = useTheme14();
+  return /* @__PURE__ */ jsx15(
     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 = memo15(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 memo16 } from "react";
+import { useTheme as useTheme15 } from "react-better-core";
+import { Fragment as Fragment5, jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
 function ListItem({
   icon,
   iconIOS,
@@ -2275,12 +2362,14 @@ function ListItem({
   rightValue,
   rightValueSelectable,
   switchIsEnabled,
-  switchOnChange
+  switchOnChange,
+  checkBoxIsChecked,
+  checkBoxOnChange
 }) {
-  const theme2 = useTheme14();
+  const theme2 = useTheme15();
   const device = useDevice();
   const sideSpace = theme2.styles.space;
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16(
     View_default,
     {
       width: insideScreenHolder ? device.windowDimensions.width : "100%",
@@ -2291,14 +2380,14 @@ function ListItem({
       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 })
+        icon && /* @__PURE__ */ jsx16(Icon_default, { name: icon, nameIOS: iconIOS, size: 22, color: theme2.colors.primary }),
+        /* @__PURE__ */ jsx16(View_default, { flex: 1, flexDirection: "row", alignItems: "center", gap: theme2.styles.gap, children: /* @__PURE__ */ jsxs7(View_default, { flex: 1, children: [
+          title && /* @__PURE__ */ jsx16(Text_default, { fontSize: 20, fontWeight: 700, children: title }),
+          description && /* @__PURE__ */ jsx16(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__ */ jsx16(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__ */ jsx16(Text_default, { fontSize: 14, fontWeight: 700, selectable: rightValueSelectable, children: rightValue }),
+          rightElement === "arrow" && /* @__PURE__ */ jsx16(
             Icon_default,
             {
               name: "chevronRight",
@@ -2306,16 +2395,17 @@ 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__ */ jsx16(Switch_default, { isEnabled: switchIsEnabled, onChange: switchOnChange }) : rightElement === "checkBox" ? /* @__PURE__ */ jsx16(CheckBox_default, { isChecked: checkBoxIsChecked, onChange: checkBoxOnChange }) : void 0 }) : void 0
       ] })
     }
   );
 }
-var ListItem_default = memo15(ListItem);
+var ListItem_default = memo16(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,
@@ -2349,7 +2439,7 @@ export {
   saturateColor,
   useAlertControls,
   useBetterComponentsContext,
-  useBooleanState6 as useBooleanState,
+  useBooleanState7 as useBooleanState,
   useDebounceState,
   useDevice,
   useEventEmitter,
@@ -2357,6 +2447,6 @@ export {
   useKeyboard,
   useLoader2 as useLoader,
   useLoaderControls,
-  useTheme15 as useTheme
+  useTheme16 as useTheme
 };
 //# sourceMappingURL=index.mjs.map