react-native-better-html 1.0.23 → 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,
@@ -512,6 +529,8 @@ import { useTheme as useTheme2 } from "react-better-core";
 import { Fragment, jsx } from "react/jsx-runtime";
 var touchableHighlightStyleMoveToContent = [
   "width",
+  "alignItems",
+  "justifyContent",
   "backgroundColor",
   "padding",
   "paddingTop",
@@ -1883,6 +1902,7 @@ var InputFieldComponent = forwardRef(
       /* @__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 borderColor = isFocused ? theme2.colors.primary : isError ? theme2.colors.error : theme2.colors.border;
     return /* @__PURE__ */ jsxs6(
       Animate_default.View,
       {
@@ -1894,10 +1914,11 @@ var InputFieldComponent = forwardRef(
         children: [
           isIOSDateTime && !iOSDateTimeFullSize ? void 0 : labelComponent,
           /* @__PURE__ */ jsxs6(View_default, { isRow: true, position: "relative", alignItems: "center", height: readyHeight, children: [
-            prefix && /* @__PURE__ */ jsx12(
+            prefix && /* @__PURE__ */ jsxs6(
               View_default,
               {
                 isRow: true,
+                position: "relative",
                 height: "100%",
                 backgroundColor: prefixSuffixBackgroundColor,
                 alignItems: "center",
@@ -1908,16 +1929,23 @@ var InputFieldComponent = forwardRef(
                 borderBottomLeftRadius: theme2.styles.borderRadius,
                 borderColor: theme2.colors.border,
                 paddingHorizontal: readyPaddingHorizontal,
+                zIndex: 1,
                 onPress: onPressPrefix,
-                children: typeof prefix === "string" ? /* @__PURE__ */ jsx12(
-                  Text_default,
-                  {
-                    fontWeight: 700,
-                    lineHeight,
-                    marginTop: Platform5.OS === "ios" && onPressPrefix ? readyPaddingVertical : void 0,
-                    children: prefix
-                  }
-                ) : prefix
+                children: [
+                  typeof prefix === "string" ? /* @__PURE__ */ jsx12(Text_default, { fontWeight: 700, lineHeight, children: prefix }) : prefix,
+                  /* @__PURE__ */ jsx12(
+                    Animate_default.View,
+                    {
+                      position: "absolute",
+                      top: 0,
+                      right: -1,
+                      width: 1,
+                      height: "100%",
+                      initialBackgroundColor: theme2.colors.border,
+                      animateBackgroundColor: borderColor
+                    }
+                  )
+                ]
               }
             ),
             isIOSDateTime ? /* @__PURE__ */ jsxs6(Fragment4, { children: [
@@ -1952,13 +1980,15 @@ var InputFieldComponent = forwardRef(
                     flex: 1,
                     justifyContent: "center",
                     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,
+                    borderTopLeftRadius: prefix ? 2 : theme2.styles.borderRadius,
+                    borderBottomLeftRadius: prefix ? 2 : theme2.styles.borderRadius,
+                    borderTopRightRadius: suffix ? 2 : theme2.styles.borderRadius,
+                    borderBottomRightRadius: suffix ? 2 : theme2.styles.borderRadius,
                     borderWidth,
+                    marginLeft: prefix ? -2 : 0,
+                    marginRight: suffix ? -2 : 0,
                     initialBorderColor: theme2.colors.border,
-                    animateBorderColor: isFocused ? theme2.colors.primary : isError ? theme2.colors.error : theme2.colors.border,
+                    animateBorderColor: borderColor,
                     overflow: "hidden",
                     children: [
                       leftIcon && /* @__PURE__ */ jsx12(
@@ -2025,29 +2055,38 @@ var InputFieldComponent = forwardRef(
                 )
               }
             ),
-            suffix && /* @__PURE__ */ jsx12(
+            suffix && /* @__PURE__ */ jsxs6(
               View_default,
               {
                 isRow: true,
+                position: "relative",
                 height: "100%",
                 backgroundColor: prefixSuffixBackgroundColor,
                 alignItems: "center",
+                justifyContent: "center",
                 borderWidth,
                 borderLeftWidth: 0,
                 borderTopRightRadius: theme2.styles.borderRadius,
                 borderBottomRightRadius: theme2.styles.borderRadius,
                 borderColor: theme2.colors.border,
                 paddingHorizontal: readyPaddingHorizontal,
+                zIndex: 1,
                 onPress: onPressSuffix,
-                children: typeof suffix === "string" ? /* @__PURE__ */ jsx12(
-                  Text_default,
-                  {
-                    fontWeight: 700,
-                    lineHeight,
-                    marginTop: Platform5.OS === "ios" && onPressSuffix ? readyPaddingVertical : void 0,
-                    children: suffix
-                  }
-                ) : suffix
+                children: [
+                  typeof suffix === "string" ? /* @__PURE__ */ jsx12(Text_default, { fontWeight: 700, lineHeight, children: suffix }) : suffix,
+                  /* @__PURE__ */ jsx12(
+                    Animate_default.View,
+                    {
+                      position: "absolute",
+                      top: 0,
+                      left: -1,
+                      width: 1,
+                      height: "100%",
+                      initialBackgroundColor: theme2.colors.border,
+                      animateBackgroundColor: borderColor
+                    }
+                  )
+                ]
               }
             )
           ] }),
@@ -2195,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,
             {
@@ -2206,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
@@ -2218,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,
@@ -2253,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%",
@@ -2269,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",
@@ -2284,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,
@@ -2327,7 +2439,7 @@ export {
   saturateColor,
   useAlertControls,
   useBetterComponentsContext,
-  useBooleanState6 as useBooleanState,
+  useBooleanState7 as useBooleanState,
   useDebounceState,
   useDevice,
   useEventEmitter,
@@ -2335,6 +2447,6 @@ export {
   useKeyboard,
   useLoader2 as useLoader,
   useLoaderControls,
-  useTheme15 as useTheme
+  useTheme16 as useTheme
 };
 //# sourceMappingURL=index.mjs.map