react-native-better-html 1.0.25 → 1.0.27

package/dist/index.js

@@ -37,6 +37,7 @@ __export(index_exports, {
   Icon: () => Icon_default,
   Image: () => Image_default,
   InputField: () => InputField_default,
+  Label: () => Label_default,
   ListItem: () => ListItem_default,
   Loader: () => Loader_default,
   ScreenHolder: () => ScreenHolder_default,
@@ -47,38 +48,38 @@ __export(index_exports, {
   alertControls: () => alertControls,
   alertsPlugin: () => alertsPlugin,
   asyncStoragePlugin: () => asyncStoragePlugin,
-  colorThemeControls: () => import_react_better_core18.colorThemeControls,
-  countries: () => import_react_better_core18.countries,
-  darkenColor: () => import_react_better_core18.darkenColor,
+  colorThemeControls: () => import_react_better_core19.colorThemeControls,
+  countries: () => import_react_better_core19.countries,
+  darkenColor: () => import_react_better_core19.darkenColor,
   defaultAlertsPluginOptions: () => defaultAlertsPluginOptions,
   defaultAsyncStoragePluginOptions: () => defaultAsyncStoragePluginOptions,
-  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,
+  desaturateColor: () => import_react_better_core19.desaturateColor,
+  eventPreventDefault: () => import_react_better_core19.eventPreventDefault,
+  eventPreventStop: () => import_react_better_core19.eventPreventStop,
+  eventStopPropagation: () => import_react_better_core19.eventStopPropagation,
+  formatPhoneNumber: () => import_react_better_core19.formatPhoneNumber,
   generateAsyncStorage: () => generateAsyncStorage,
-  generateRandomString: () => import_react_better_core18.generateRandomString,
+  generateRandomString: () => import_react_better_core19.generateRandomString,
   getFormErrorObject: () => getFormErrorObject,
-  getPluralWord: () => import_react_better_core18.getPluralWord,
-  lightenColor: () => import_react_better_core18.lightenColor,
-  loaderControls: () => import_react_better_core18.loaderControls,
+  getPluralWord: () => import_react_better_core19.getPluralWord,
+  lightenColor: () => import_react_better_core19.lightenColor,
+  loaderControls: () => import_react_better_core19.loaderControls,
   pressStrength: () => pressStrength,
-  saturateColor: () => import_react_better_core18.saturateColor,
+  saturateColor: () => import_react_better_core19.saturateColor,
   useAlertControls: () => useAlertControls,
   useBetterComponentsContext: () => useBetterComponentsContext,
-  useBooleanState: () => import_react_better_core18.useBooleanState,
-  useDebounceState: () => import_react_better_core18.useDebounceState,
+  useBooleanState: () => import_react_better_core19.useBooleanState,
+  useDebounceState: () => import_react_better_core19.useDebounceState,
   useDevice: () => useDevice,
   useEventEmitter: () => useEventEmitter,
   useForm: () => useForm,
   useKeyboard: () => useKeyboard,
-  useLoader: () => import_react_better_core18.useLoader,
-  useLoaderControls: () => import_react_better_core18.useLoaderControls,
-  useTheme: () => import_react_better_core18.useTheme
+  useLoader: () => import_react_better_core19.useLoader,
+  useLoaderControls: () => import_react_better_core19.useLoaderControls,
+  useTheme: () => import_react_better_core19.useTheme
 });
 module.exports = __toCommonJS(index_exports);
-var import_react_better_core18 = require("react-better-core");
+var import_react_better_core19 = require("react-better-core");
 
 // src/components/BetterComponentsProvider.tsx
 var import_react12 = require("react");
@@ -516,13 +517,15 @@ function useForm(options) {
           setFieldValue(field, value);
         }
       } : {
+        required: requiredFields?.includes(field),
         isChecked: values[field],
+        errorMessage: errors[field],
         onChange: (value) => {
           setFieldValue(field, value);
         }
       };
     },
-    [values, setFieldValue]
+    [values, setFieldValue, errors, requiredFields]
   );
   const reset = (0, import_react.useCallback)(() => {
     setValues(defaultValues);
@@ -537,7 +540,9 @@ function useForm(options) {
     return Object.keys(validationErrors).length === 0;
   }, [validate, values]);
   const canSubmit = (0, import_react.useMemo)(() => {
-    const requiredFieldsHaveValues = requiredFields?.every((field) => values[field] !== void 0 && values[field] !== "") ?? true;
+    const requiredFieldsHaveValues = requiredFields?.every(
+      (field) => values[field] !== void 0 && values[field] !== "" && values[field] !== false
+    ) ?? true;
     return isValid && requiredFieldsHaveValues;
   }, [isValid, requiredFields]);
   return {
@@ -1647,11 +1652,24 @@ function generateAsyncStorage() {
   };
 }
 
-// src/components/ScreenHolder.tsx
+// src/components/Label.tsx
 var import_react13 = require("react");
-var import_react_native8 = require("react-native");
 var import_react_better_core12 = require("react-better-core");
 var import_jsx_runtime11 = require("react/jsx-runtime");
+function Label({ text, required, isError }) {
+  const theme2 = (0, import_react_better_core12.useTheme)();
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(View_default, { isRow: true, alignItems: "center", gap: 2, children: [
+    text && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Text_default, { fontSize: 14, color: isError ? theme2.colors.error : theme2.colors.textSecondary, children: text }),
+    required && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Text_default, { color: theme2.colors.error, children: "*" })
+  ] });
+}
+var Label_default = (0, import_react13.memo)(Label);
+
+// src/components/ScreenHolder.tsx
+var import_react14 = require("react");
+var import_react_native8 = require("react-native");
+var import_react_better_core13 = require("react-better-core");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var ScreenHolderComponent = ({
   noScroll,
   noSideSpace,
@@ -1669,17 +1687,17 @@ var ScreenHolderComponent = ({
   withNoHeader,
   children
 }) => {
-  const theme2 = (0, import_react_better_core12.useTheme)();
+  const theme2 = (0, import_react_better_core13.useTheme)();
   const device = useDevice();
   const keyboard = useKeyboard();
-  const [isRefreshing, setIsRefreshing] = (0, import_react_better_core12.useBooleanState)();
-  const keyboardAvoidingViewStyle = (0, import_react13.useMemo)(
+  const [isRefreshing, setIsRefreshing] = (0, import_react_better_core13.useBooleanState)();
+  const keyboardAvoidingViewStyle = (0, import_react14.useMemo)(
     () => ({
       flex: 1
     }),
     []
   );
-  const onRefreshElement = (0, import_react13.useCallback)(() => {
+  const onRefreshElement = (0, import_react14.useCallback)(() => {
     setIsRefreshing.setTrue();
     onRefresh?.();
     setTimeout(() => {
@@ -1687,7 +1705,7 @@ var ScreenHolderComponent = ({
       onRefreshEnd?.();
     }, refreshTimeout * 1e3);
   }, [onRefresh, onRefreshEnd, refreshTimeout]);
-  const content = /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  const content = /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     View_default,
     {
       flex: 1,
@@ -1698,21 +1716,21 @@ var ScreenHolderComponent = ({
     }
   );
   const withRefresh = onRefresh || onRefreshEnd;
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(View_default, { flex: 1, backgroundColor: backgroundColor ?? theme2.colors.backgroundBase, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(View_default, { flex: 1, backgroundColor: backgroundColor ?? theme2.colors.backgroundBase, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
     import_react_native8.KeyboardAvoidingView,
     {
       style: keyboardAvoidingViewStyle,
       keyboardVerticalOffset: keyboardVerticalOffset ?? (withNoHeader ? import_react_native8.Platform.OS === "ios" ? 0 : theme2.styles.gap : keepFooterOnKeyboardOpened ? import_react_native8.Platform.OS === "ios" ? device.safeArea.afterCalculations.bottom : theme2.styles.gap : void 0),
       behavior: import_react_native8.Platform.OS === "ios" ? "padding" : "height",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(View_default, { flex: 1, children: noScroll ? content : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(View_default, { flex: 1, children: noScroll ? content : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           import_react_native8.ScrollView,
           {
-            refreshControl: withRefresh ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native8.RefreshControl, { refreshing: isRefreshing, onRefresh: onRefreshElement }) : void 0,
+            refreshControl: withRefresh ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native8.RefreshControl, { refreshing: isRefreshing, onRefresh: onRefreshElement }) : void 0,
             children: content
           }
         ) }),
-        keepFooterOnKeyboardOpened || (import_react_native8.Platform.OS === "ios" ? !keyboard.willOpen : !keyboard.isOpened) ? footer && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(View_default, { children: footer }) : !withNoHeader && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        keepFooterOnKeyboardOpened || (import_react_native8.Platform.OS === "ios" ? !keyboard.willOpen : !keyboard.isOpened) ? footer && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(View_default, { children: footer }) : !withNoHeader && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           View_default,
           {
             width: "100%",
@@ -1730,10 +1748,10 @@ ScreenHolderComponent.footer = function Footer({
   withNoHeader,
   children
 }) {
-  const theme2 = (0, import_react_better_core12.useTheme)();
+  const theme2 = (0, import_react_better_core13.useTheme)();
   const device = useDevice();
   const keyboard = useKeyboard();
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     View_default,
     {
       backgroundColor: backgroundColor ?? theme2.colors.backgroundBase,
@@ -1744,17 +1762,17 @@ ScreenHolderComponent.footer = function Footer({
     }
   );
 };
-var ScreenHolder = (0, import_react13.memo)(ScreenHolderComponent);
+var ScreenHolder = (0, import_react14.memo)(ScreenHolderComponent);
 ScreenHolder.footer = ScreenHolderComponent.footer;
 var ScreenHolder_default = ScreenHolder;
 
 // src/components/InputField.tsx
-var import_react14 = require("react");
+var import_react15 = require("react");
 var import_react_native9 = require("react-native");
 var import_datetimepicker = __toESM(require("@react-native-community/datetimepicker"));
-var import_react_better_core13 = require("react-better-core");
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var InputFieldComponent = (0, import_react14.forwardRef)(
+var import_react_better_core14 = require("react-better-core");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var InputFieldComponent = (0, import_react15.forwardRef)(
   ({
     flex,
     placeholder,
@@ -1805,12 +1823,12 @@ var InputFieldComponent = (0, import_react14.forwardRef)(
     onPressEnter,
     ...props
   }, ref) => {
-    const theme2 = (0, import_react_better_core13.useTheme)();
-    const { colorTheme } = (0, import_react_better_core13.useBetterCoreContext)();
-    const textInputRef = (0, import_react14.useRef)(null);
-    const [internalValue, setInternalValue] = (0, import_react14.useState)(value?.toString() || defaultValue || "");
-    const [internalDateValue, setInternalDateValue] = (0, import_react14.useState)();
-    const [isFocused, setIsFocused] = (0, import_react_better_core13.useBooleanState)();
+    const theme2 = (0, import_react_better_core14.useTheme)();
+    const { colorTheme } = (0, import_react_better_core14.useBetterCoreContext)();
+    const textInputRef = (0, import_react15.useRef)(null);
+    const [internalValue, setInternalValue] = (0, import_react15.useState)(value?.toString() || defaultValue || "");
+    const [internalDateValue, setInternalDateValue] = (0, import_react15.useState)();
+    const [isFocused, setIsFocused] = (0, import_react_better_core14.useBooleanState)();
     const isIOSDateTime = import_react_native9.Platform.OS === "ios" && (type === "date" || type === "time");
     const iconSize = 16;
     const iconPadding = onPressRightIcon ? theme2.styles.gap : 0;
@@ -1819,14 +1837,14 @@ var InputFieldComponent = (0, import_react14.forwardRef)(
     const readyPaddingHorizontal = paddingHorizontal ?? theme2.styles.space;
     const readyPaddingVertical = paddingVertical ? parseFloat(paddingVertical.toString()) : (theme2.styles.space + theme2.styles.gap) / 2;
     const readyHeight = height ?? isIOSDateTime ? void 0 : borderWidth + readyPaddingVertical + lineHeight + readyPaddingVertical + borderWidth + (import_react_native9.Platform.OS === "android" ? 2 : 0);
-    const onValueChangeRNDateTimePicker = (0, import_react14.useCallback)(
+    const onValueChangeRNDateTimePicker = (0, import_react15.useCallback)(
       (event, data) => {
         setInternalDateValue(data);
         onChange?.(data?.toISOString() ?? "");
       },
       [onChange]
     );
-    const onPressInputField = (0, import_react14.useCallback)(
+    const onPressInputField = (0, import_react15.useCallback)(
       (event) => {
         onPress?.(event);
         if (type === "date" || type === "time") {
@@ -1854,22 +1872,22 @@ var InputFieldComponent = (0, import_react14.forwardRef)(
       },
       [onPress, type, internalDateValue, onValueChangeRNDateTimePicker]
     );
-    const onFocusElement = (0, import_react14.useCallback)((event) => {
+    const onFocusElement = (0, import_react15.useCallback)((event) => {
       setIsFocused.setTrue();
       onFocus?.(event);
     }, []);
-    const onBlurElement = (0, import_react14.useCallback)((event) => {
+    const onBlurElement = (0, import_react15.useCallback)((event) => {
       setIsFocused.setFalse();
       onBlur?.(event);
     }, []);
-    const onChangeText = (0, import_react14.useCallback)(
+    const onChangeText = (0, import_react15.useCallback)(
       (text) => {
         setInternalValue(text);
         onChange?.(text);
       },
       [onChange]
     );
-    const textInputStyle = (0, import_react14.useMemo)(
+    const textInputStyle = (0, import_react15.useMemo)(
       () => ({
         flex: 1,
         fontSize,
@@ -1894,14 +1912,14 @@ var InputFieldComponent = (0, import_react14.forwardRef)(
         rightIcon
       ]
     );
-    const rnDateTimePickerStyle = (0, import_react14.useMemo)(
+    const rnDateTimePickerStyle = (0, import_react15.useMemo)(
       () => ({
         flex: iOSDateTimeFullSize ? 1 : void 0,
         marginLeft: -8 + (iOSDateTimeFullSize ? 0 : theme2.styles.space)
       }),
       [iOSDateTimeFullSize]
     );
-    (0, import_react14.useEffect)(() => {
+    (0, import_react15.useEffect)(() => {
       if (value === void 0) return;
       setInternalValue(value.toString());
       try {
@@ -1909,7 +1927,7 @@ var InputFieldComponent = (0, import_react14.forwardRef)(
       } catch (error) {
       }
     }, [value]);
-    (0, import_react14.useEffect)(() => {
+    (0, import_react15.useEffect)(() => {
       if (type !== "date" && type !== "time") return;
       const date = internalDateValue?.toISOString().split("T")[0] ?? "";
       const hours = internalDateValue ? internalDateValue.getHours().toString() : "00";
@@ -1918,17 +1936,14 @@ var InputFieldComponent = (0, import_react14.forwardRef)(
         type === "date" ? date : internalDateValue ? `${hours.length === 1 ? `0${hours}` : hours}:${minutes.length === 1 ? `0${minutes}` : minutes}` : ""
       );
     }, [internalDateValue]);
-    (0, import_react14.useImperativeHandle)(ref, () => {
+    (0, import_react15.useImperativeHandle)(ref, () => {
       return textInputRef.current;
     }, []);
     const withPressInputField = !!onPress || type === "date" || type === "time";
-    const prefixSuffixBackgroundColor = colorTheme === "light" ? (0, import_react_better_core13.darkenColor)(theme2.colors.backgroundContent, 0.03) : (0, import_react_better_core13.lightenColor)(theme2.colors.backgroundContent, 0.1);
-    const labelComponent = label && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(View_default, { isRow: true, alignItems: "center", gap: 2, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Text_default, { fontSize: 14, color: isError ? theme2.colors.error : theme2.colors.textSecondary, children: label }),
-      required && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Text_default, { color: theme2.colors.error, children: "*" })
-    ] });
+    const prefixSuffixBackgroundColor = colorTheme === "light" ? (0, import_react_better_core14.darkenColor)(theme2.colors.backgroundContent, 0.03) : (0, import_react_better_core14.lightenColor)(theme2.colors.backgroundContent, 0.1);
+    const labelComponent = label ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Label_default, { text: label, isError, required }) : void 0;
     const borderColor = isFocused ? theme2.colors.primary : isError ? theme2.colors.error : theme2.colors.border;
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
       Animate_default.View,
       {
         flex,
@@ -1938,8 +1953,8 @@ var InputFieldComponent = (0, import_react14.forwardRef)(
         ...props,
         children: [
           isIOSDateTime && !iOSDateTimeFullSize ? void 0 : labelComponent,
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(View_default, { isRow: true, position: "relative", alignItems: "center", height: readyHeight, children: [
-            prefix && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(View_default, { isRow: true, position: "relative", alignItems: "center", height: readyHeight, children: [
+            prefix && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
               View_default,
               {
                 isRow: true,
@@ -1957,8 +1972,8 @@ var InputFieldComponent = (0, import_react14.forwardRef)(
                 zIndex: 1,
                 onPress: onPressPrefix,
                 children: [
-                  typeof prefix === "string" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Text_default, { fontWeight: 700, lineHeight, children: prefix }) : prefix,
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                  typeof prefix === "string" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Text_default, { fontWeight: 700, lineHeight, children: prefix }) : prefix,
+                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                     Animate_default.View,
                     {
                       position: "absolute",
@@ -1973,9 +1988,9 @@ var InputFieldComponent = (0, import_react14.forwardRef)(
                 ]
               }
             ),
-            isIOSDateTime ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+            isIOSDateTime ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
               !iOSDateTimeFullSize ? labelComponent : void 0,
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 import_datetimepicker.default,
                 {
                   value: internalDateValue ?? /* @__PURE__ */ new Date(),
@@ -1987,7 +2002,7 @@ var InputFieldComponent = (0, import_react14.forwardRef)(
                   onValueChange: onValueChangeRNDateTimePicker
                 }
               )
-            ] }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
               View_default,
               {
                 flex: 1,
@@ -1998,7 +2013,7 @@ var InputFieldComponent = (0, import_react14.forwardRef)(
                 borderBottomRightRadius: suffix ? 0 : theme2.styles.borderRadius,
                 pressStrength: 1,
                 onPress: import_react_native9.Platform.OS === "android" ? editable === false || withPressInputField ? onPressInputField : void 0 : void 0,
-                children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
                   Animate_default.View,
                   {
                     position: "relative",
@@ -2016,7 +2031,7 @@ var InputFieldComponent = (0, import_react14.forwardRef)(
                     animateBorderColor: borderColor,
                     overflow: "hidden",
                     children: [
-                      leftIcon && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                      leftIcon && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                         Icon_default,
                         {
                           position: "absolute",
@@ -2029,7 +2044,7 @@ var InputFieldComponent = (0, import_react14.forwardRef)(
                           onPress: onPressLeftIcon
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                         import_react_native9.TextInput,
                         {
                           style: textInputStyle,
@@ -2062,7 +2077,7 @@ var InputFieldComponent = (0, import_react14.forwardRef)(
                           ref: textInputRef
                         }
                       ),
-                      rightIcon && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                      rightIcon && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                         Icon_default,
                         {
                           position: "absolute",
@@ -2080,7 +2095,7 @@ var InputFieldComponent = (0, import_react14.forwardRef)(
                 )
               }
             ),
-            suffix && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+            suffix && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
               View_default,
               {
                 isRow: true,
@@ -2098,8 +2113,8 @@ var InputFieldComponent = (0, import_react14.forwardRef)(
                 zIndex: 1,
                 onPress: onPressSuffix,
                 children: [
-                  typeof suffix === "string" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Text_default, { fontWeight: 700, lineHeight, children: suffix }) : suffix,
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                  typeof suffix === "string" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Text_default, { fontWeight: 700, lineHeight, children: suffix }) : suffix,
+                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                     Animate_default.View,
                     {
                       position: "absolute",
@@ -2115,7 +2130,7 @@ var InputFieldComponent = (0, import_react14.forwardRef)(
               }
             )
           ] }),
-          infoMessage && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          infoMessage && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             Animate_default.Text,
             {
               fontSize: 14,
@@ -2127,7 +2142,7 @@ var InputFieldComponent = (0, import_react14.forwardRef)(
               children: infoMessage
             }
           ),
-          errorMessage && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          errorMessage && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             Animate_default.Text,
             {
               fontSize: 14,
@@ -2144,8 +2159,8 @@ var InputFieldComponent = (0, import_react14.forwardRef)(
     );
   }
 );
-InputFieldComponent.email = (0, import_react14.forwardRef)(function Email(props, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+InputFieldComponent.email = (0, import_react15.forwardRef)(function Email(props, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     InputFieldComponent,
     {
       placeholder: "your@email.here",
@@ -2158,17 +2173,17 @@ InputFieldComponent.email = (0, import_react14.forwardRef)(function Email(props,
     }
   );
 });
-InputFieldComponent.password = (0, import_react14.forwardRef)(function Password(props, ref) {
-  const inputFieldRef = (0, import_react14.useRef)(null);
-  const [showPassword, setShowPassword] = (0, import_react_better_core13.useBooleanState)();
-  const onPressEye = (0, import_react14.useCallback)(() => {
+InputFieldComponent.password = (0, import_react15.forwardRef)(function Password(props, ref) {
+  const inputFieldRef = (0, import_react15.useRef)(null);
+  const [showPassword, setShowPassword] = (0, import_react_better_core14.useBooleanState)();
+  const onPressEye = (0, import_react15.useCallback)(() => {
     setShowPassword.toggle();
     inputFieldRef.current?.focus();
   }, []);
-  (0, import_react14.useImperativeHandle)(ref, () => {
+  (0, import_react15.useImperativeHandle)(ref, () => {
     return inputFieldRef.current;
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     InputFieldComponent,
     {
       secureTextEntry: !showPassword,
@@ -2183,12 +2198,12 @@ InputFieldComponent.password = (0, import_react14.forwardRef)(function Password(
     }
   );
 });
-InputFieldComponent.search = (0, import_react14.forwardRef)(function Search(props, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(InputFieldComponent, { placeholder: "Search...", leftIcon: "magnifyingGlass", ...props, ref });
+InputFieldComponent.search = (0, import_react15.forwardRef)(function Search(props, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(InputFieldComponent, { placeholder: "Search...", leftIcon: "magnifyingGlass", ...props, ref });
 });
-InputFieldComponent.code = (0, import_react14.forwardRef)(function Password2({ isSmall, ...props }, ref) {
-  const theme2 = (0, import_react_better_core13.useTheme)();
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+InputFieldComponent.code = (0, import_react15.forwardRef)(function Password2({ isSmall, ...props }, ref) {
+  const theme2 = (0, import_react_better_core14.useTheme)();
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     InputFieldComponent,
     {
       flex: 1,
@@ -2203,7 +2218,7 @@ InputFieldComponent.code = (0, import_react14.forwardRef)(function Password2({ i
     }
   );
 });
-var InputField = (0, import_react14.memo)(InputFieldComponent);
+var InputField = (0, import_react15.memo)(InputFieldComponent);
 InputField.email = InputFieldComponent.email;
 InputField.password = InputFieldComponent.password;
 InputField.search = InputFieldComponent.search;
@@ -2211,32 +2226,32 @@ InputField.code = InputFieldComponent.code;
 var InputField_default = InputField;
 
 // src/components/Switch.tsx
-var import_react15 = require("react");
+var import_react16 = require("react");
 var import_react_native10 = require("react-native");
-var import_react_better_core14 = require("react-better-core");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_react_better_core15 = require("react-better-core");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function Switch({ isEnabled, defaultIsEnabled, disabled, onChange }) {
-  const theme2 = (0, import_react_better_core14.useTheme)();
-  const [enabled, setEnabled] = (0, import_react_better_core14.useBooleanState)(isEnabled ?? defaultIsEnabled);
-  const onPressElement = (0, import_react15.useCallback)(() => {
+  const theme2 = (0, import_react_better_core15.useTheme)();
+  const [enabled, setEnabled] = (0, import_react_better_core15.useBooleanState)(isEnabled ?? defaultIsEnabled);
+  const onPressElement = (0, import_react16.useCallback)(() => {
     onChange?.(!enabled);
     setEnabled.toggle();
   }, [onChange, enabled]);
-  const trackColor = (0, import_react15.useMemo)(
+  const trackColor = (0, import_react16.useMemo)(
     () => ({
       false: theme2.colors.border,
       true: theme2.colors.primary
     }),
     [theme2.colors]
   );
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.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_runtime13.jsx)(
+  return import_react_native10.Platform.OS === "ios" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     import_react_native10.Switch,
     {
       trackColor,
@@ -2245,7 +2260,7 @@ function Switch({ isEnabled, defaultIsEnabled, disabled, onChange }) {
       value: enabled,
       disabled
     }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  ) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     View_default,
     {
       width: holderWidth,
@@ -2253,7 +2268,7 @@ function Switch({ isEnabled, defaultIsEnabled, disabled, onChange }) {
       pressStrength: pressStrength().p05,
       disabled,
       onPress: !disabled ? onPressElement : void 0,
-      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         Animate_default.View,
         {
           width: "100%",
@@ -2263,7 +2278,7 @@ function Switch({ isEnabled, defaultIsEnabled, disabled, onChange }) {
           animateBackgroundColor: enabled ? theme2.colors.primary : theme2.colors.border,
           initialOpacity: 1,
           animateOpacity: disabled ? 0.6 : 1,
-          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             Animate_default.View,
             {
               width: ballSize,
@@ -2283,25 +2298,35 @@ function Switch({ isEnabled, defaultIsEnabled, disabled, onChange }) {
     }
   );
 }
-var Switch_default = (0, import_react15.memo)(Switch);
+var Switch_default = (0, import_react16.memo)(Switch);
 
 // src/components/CheckBox.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 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 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)(() => {
+var import_react_better_core16 = require("react-better-core");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function CheckBox({
+  isChecked,
+  defaultIsChecked,
+  size = 36,
+  text,
+  required,
+  disabled,
+  infoMessage,
+  errorMessage,
+  onChange
+}) {
+  const theme2 = (0, import_react_better_core16.useTheme)();
+  const [checked, setChecked] = (0, import_react_better_core16.useBooleanState)(isChecked ?? defaultIsChecked);
+  const onPressElement = (0, import_react17.useCallback)(() => {
     onChange?.(!checked);
     setChecked.toggle();
   }, [onChange, checked]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (isChecked === void 0) return;
     setChecked.setState(isChecked);
   }, [isChecked]);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  const checkBox = /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     View_default,
     {
       width: size,
@@ -2309,7 +2334,7 @@ function CheckBox({ isChecked, defaultIsChecked, size = 36, disabled, onChange }
       pressStrength: pressStrength().p05,
       disabled,
       onPress: !disabled ? onPressElement : void 0,
-      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         Animate_default.View,
         {
           width: "100%",
@@ -2322,7 +2347,7 @@ function CheckBox({ isChecked, defaultIsChecked, size = 36, disabled, onChange }
           animateBorderColor: checked ? theme2.colors.primary : theme2.colors.border,
           initialOpacity: 1,
           animateOpacity: disabled ? 0.6 : 1,
-          children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             Animate_default.View,
             {
               width: "100%",
@@ -2334,7 +2359,7 @@ function CheckBox({ isChecked, defaultIsChecked, size = 36, disabled, onChange }
               transitionStiffness: 230,
               initialScale: 0,
               animateScale: checked ? 1 : 0,
-              children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                 Icon_default,
                 {
                   name: "check",
@@ -2349,17 +2374,60 @@ function CheckBox({ isChecked, defaultIsChecked, size = 36, disabled, onChange }
       )
     }
   );
+  return text ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(View_default, { gap: theme2.styles.gap / 3, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(View_default, { isRow: true, alignItems: "center", gap: theme2.styles.gap, children: [
+      checkBox,
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        View_default,
+        {
+          width: "100%",
+          flexShrink: 1,
+          pressType: "opacity",
+          pressStrength: pressStrength().p3,
+          onPress: !disabled ? onPressElement : void 0,
+          children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Animate_default.View, { initialOpacity: 1, animateOpacity: disabled ? 0.6 : 1, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(View_default, { isRow: true, alignItems: "flex-start", gap: 2, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(View_default, { flexShrink: 1, children: typeof text === "string" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Text_default, { children: text }) : text }),
+            required && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Label_default, { required: true })
+          ] }) })
+        }
+      )
+    ] }),
+    infoMessage && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      Animate_default.Text,
+      {
+        fontSize: 14,
+        color: theme2.colors.textSecondary,
+        initialHeight: 0,
+        initialOpacity: 0,
+        animateHeight: 17,
+        animateOpacity: 1,
+        children: infoMessage
+      }
+    ),
+    errorMessage && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      Animate_default.Text,
+      {
+        fontSize: 14,
+        color: theme2.colors.error,
+        initialHeight: 0,
+        initialOpacity: 0,
+        animateHeight: 17,
+        animateOpacity: 1,
+        children: errorMessage
+      }
+    )
+  ] }) : checkBox;
 }
-var CheckBox_default = (0, import_react16.memo)(CheckBox);
+var CheckBox_default = (0, import_react17.memo)(CheckBox);
 
 // src/components/StatusBar.tsx
-var import_react17 = require("react");
-var import_react_better_core16 = require("react-better-core");
+var import_react18 = require("react");
+var import_react_better_core17 = require("react-better-core");
 var import_react_native12 = require("react-native");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = 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)(
+  const theme2 = (0, import_react_better_core17.useTheme)();
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     import_react_native12.StatusBar,
     {
       backgroundColor: darkStatusBar ? theme2.colors.backgroundSecondary : void 0,
@@ -2368,12 +2436,12 @@ function StatusBar({ darkStatusBar, hidden, barStyle, androidBarStyle, iOSBarSty
     }
   );
 }
-var StatusBar_default = (0, import_react17.memo)(StatusBar);
+var StatusBar_default = (0, import_react18.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");
+var import_react19 = require("react");
+var import_react_better_core18 = require("react-better-core");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function ListItem({
   icon,
   iconIOS,
@@ -2391,10 +2459,10 @@ function ListItem({
   checkBoxIsChecked,
   checkBoxOnChange
 }) {
-  const theme2 = (0, import_react_better_core17.useTheme)();
+  const theme2 = (0, import_react_better_core18.useTheme)();
   const device = useDevice();
   const sideSpace = theme2.styles.space;
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     View_default,
     {
       width: insideScreenHolder ? device.windowDimensions.width : "100%",
@@ -2404,15 +2472,15 @@ function ListItem({
       paddingHorizontal: sideSpace,
       pressStrength: pressStrength().p05,
       onPress,
-      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 })
+      children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(View_default, { isRow: true, alignItems: "center", gap: theme2.styles.space, children: [
+        icon && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Icon_default, { name: icon, nameIOS: iconIOS, size: 22, color: theme2.colors.primary }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(View_default, { flex: 1, flexDirection: "row", alignItems: "center", gap: theme2.styles.gap, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(View_default, { flex: 1, children: [
+          title && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Text_default, { fontSize: 20, fontWeight: 700, children: title }),
+          description && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Text_default.body, { selectable: descriptionSelectable, children: description })
         ] }) }),
-        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)(
+        rightElement ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_jsx_runtime17.Fragment, { children: rightValue !== void 0 || rightElement === "arrow" ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(View_default, { isRow: true, alignItems: "center", gap: theme2.styles.gap / 2, children: [
+          rightValue !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Text_default, { fontSize: 14, fontWeight: 700, selectable: rightValueSelectable, children: rightValue }),
+          rightElement === "arrow" && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
             Icon_default,
             {
               name: "chevronRight",
@@ -2420,12 +2488,12 @@ function ListItem({
               color: rightValue !== void 0 ? theme2.colors.textPrimary : theme2.colors.textSecondary
             }
           )
-        ] }) : 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
+        ] }) : rightElement === "switch" ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Switch_default, { isEnabled: switchIsEnabled, onChange: switchOnChange }) : rightElement === "checkBox" ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CheckBox_default, { isChecked: checkBoxIsChecked, onChange: checkBoxOnChange }) : void 0 }) : void 0
       ] })
     }
   );
 }
-var ListItem_default = (0, import_react18.memo)(ListItem);
+var ListItem_default = (0, import_react19.memo)(ListItem);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Animate,
@@ -2435,6 +2503,7 @@ var ListItem_default = (0, import_react18.memo)(ListItem);
   Icon,
   Image,
   InputField,
+  Label,
   ListItem,
   Loader,
   ScreenHolder,