react-native-better-html 1.0.14 → 1.0.16

package/dist/index.mjs

@@ -1,6 +1,6 @@
 // src/index.ts
 import {
-  useTheme as useTheme10,
+  useTheme as useTheme11,
   useLoader as useLoader2,
   useLoaderControls,
   countries,
@@ -35,7 +35,18 @@ var appConfig = {};
 var theme = {};
 
 // src/constants/icons.ts
-var icons = {};
+var icons = {
+  magnifyingGlass: {
+    width: 512,
+    height: 512,
+    paths: [
+      {
+        d: "M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z",
+        type: "fill"
+      }
+    ]
+  }
+};
 
 // src/constants/assets.ts
 var assets = {};
@@ -137,10 +148,10 @@ var checkBetterCoreContextValue = (value, functionsName) => {
 var pressStrength = () => {
   if (!checkBetterCoreContextValue(externalBetterCoreContextValue, "pressStrength")) return void 0;
   return {
-    z05: externalBetterCoreContextValue.colorTheme === "dark" ? 0.85 : 0.95,
-    z1: externalBetterCoreContextValue.colorTheme === "dark" ? 0.6 : 0.8,
-    z2: externalBetterCoreContextValue.colorTheme === "dark" ? 0.5 : 0.7,
-    z3: externalBetterCoreContextValue.colorTheme === "dark" ? 0.4 : 0.6
+    p05: externalBetterCoreContextValue.colorTheme === "dark" ? 0.85 : 0.95,
+    p1: externalBetterCoreContextValue.colorTheme === "dark" ? 0.6 : 0.8,
+    p2: externalBetterCoreContextValue.colorTheme === "dark" ? 0.5 : 0.7,
+    p3: externalBetterCoreContextValue.colorTheme === "dark" ? 0.4 : 0.6
   };
 };
 
@@ -654,7 +665,8 @@ var ViewComponent = function View({
           previousValue.shadowOffset = void 0;
         else previousValue[currentValue] = void 0;
         return previousValue;
-      }, {})
+      }, {}),
+      width: props.width !== "100%" ? props.width : void 0
     }),
     [style]
   );
@@ -1066,7 +1078,7 @@ ButtonComponent.secondary = function Secondary(props) {
       borderWidth: 1,
       borderColor: theme2.colors.border,
       textColor: theme2.colors.textPrimary,
-      pressStrength: pressStrength().z05,
+      pressStrength: pressStrength().p05,
       animateOpacity: props.disabled ? 0.4 : 1,
       ...props
     }
@@ -1262,19 +1274,58 @@ var Image2 = memo8(ImageComponent);
 Image2.profileImage = ImageComponent.profileImage;
 var Image_default = Image2;
 
+// src/components/Icon.tsx
+import { useEffect as useEffect4 } from "react";
+import { Platform as Platform4 } from "react-native";
+import { Path, Svg } from "react-native-svg";
+import { useBetterCoreContext as useBetterCoreContext3, useTheme as useTheme8 } from "react-better-core";
+import { SymbolView } from "expo-symbols";
+import { jsx as jsx9 } from "react/jsx-runtime";
+import { createElement } from "react";
+function Icon({ name, nameIOS, size = 16, color, ...props }) {
+  const theme2 = useTheme8();
+  const { icons: icons2 } = useBetterCoreContext3();
+  const svgColor = color ?? theme2.colors.textPrimary;
+  useEffect4(() => {
+    if (!icons2[name.toString()])
+      console.warn(
+        `The icon \`${name}\` you are trying to use does not exist. Make sure to add it to the \`icons\` object in \`<BetterComponentsProvider>\` config value prop.`
+      );
+  }, [icons2, name]);
+  return /* @__PURE__ */ jsx9(View_default, { width: size, height: size, pressType: "opacity", pressStrength: pressStrength().p2, ...props, children: Platform4.OS === "ios" && nameIOS ? /* @__PURE__ */ jsx9(SymbolView, { name: nameIOS, tintColor: svgColor, size }) : /* @__PURE__ */ jsx9(
+    Svg,
+    {
+      width: size,
+      height: size,
+      viewBox: `0 0 ${icons2[name.toString()]?.width ?? 0} ${icons2[name.toString()]?.height ?? 0}`,
+      fill: "none",
+      children: icons2[name.toString()]?.paths.map(({ type, ...path }) => /* @__PURE__ */ createElement(
+        Path,
+        {
+          ...path,
+          fill: type === "fill" ? svgColor : void 0,
+          stroke: type === "stroke" ? svgColor : void 0,
+          key: path.d
+        }
+      ))
+    }
+  ) });
+}
+var Icon_default = Icon;
+
 // src/components/InputField.tsx
 import {
   forwardRef,
   memo as memo9,
   useCallback as useCallback3,
-  useEffect as useEffect4,
+  useEffect as useEffect5,
   useImperativeHandle,
   useMemo as useMemo8,
   useRef as useRef2,
   useState as useState2
 } from "react";
 import {
-  Platform as Platform4,
+  Platform as Platform5,
   TextInput as TextInput2
 } from "react-native";
 import RNDateTimePicker, {
@@ -1283,13 +1334,14 @@ import RNDateTimePicker, {
 import {
   darkenColor,
   lightenColor,
-  useBetterCoreContext as useBetterCoreContext3,
+  useBetterCoreContext as useBetterCoreContext4,
   useBooleanState as useBooleanState4,
-  useTheme as useTheme8
+  useTheme as useTheme9
 } from "react-better-core";
-import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
 var InputFieldComponent = forwardRef(
   ({
+    flex,
     placeholder,
     type = "text",
     iOSDateTimeFullSize,
@@ -1321,6 +1373,10 @@ var InputFieldComponent = forwardRef(
     maxLength,
     multiline,
     numberOfLines = 2,
+    leftIcon,
+    leftIconIOS,
+    rightIcon,
+    rightIconIOS,
     paddingHorizontal,
     paddingVertical,
     onFocus,
@@ -1329,19 +1385,22 @@ var InputFieldComponent = forwardRef(
     onPress,
     onPressPrefix,
     onPressSuffix,
-    onPressEnter
+    onPressEnter,
+    ...props
   }, ref) => {
-    const theme2 = useTheme8();
-    const { colorTheme } = useBetterCoreContext3();
+    const theme2 = useTheme9();
+    const { colorTheme } = useBetterCoreContext4();
     const textInputRef = useRef2(null);
     const [internalValue, setInternalValue] = useState2(value?.toString() || defaultValue || "");
     const [internalDateValue, setInternalDateValue] = useState2();
     const [isFocused, setIsFocused] = useBooleanState4();
-    const isIOSDateTime = Platform4.OS === "ios" && (type === "date" || type === "time");
+    const isIOSDateTime = Platform5.OS === "ios" && (type === "date" || type === "time");
+    const iconSize = 16;
+    const iconSideSpace = theme2.styles.space;
     const borderWidth = 1;
     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 + (Platform4.OS === "android" ? 2 : 0);
+    const readyHeight = height ?? isIOSDateTime ? void 0 : borderWidth + readyPaddingVertical + lineHeight + readyPaddingVertical + borderWidth + (Platform5.OS === "android" ? 2 : 0);
     const onChangeRNDateTimePicker = useCallback3(
       (event, data) => {
         setInternalDateValue(data);
@@ -1353,7 +1412,7 @@ var InputFieldComponent = forwardRef(
       (event) => {
         onPress?.(event);
         if (type === "date" || type === "time") {
-          if (Platform4.OS === "android") {
+          if (Platform5.OS === "android") {
             DateTimePickerAndroid.open({
               value: internalDateValue ?? /* @__PURE__ */ new Date(),
               is24Hour: true,
@@ -1371,7 +1430,7 @@ var InputFieldComponent = forwardRef(
               },
               onChange: onChangeRNDateTimePicker
             });
-          } else if (Platform4.OS === "ios") {
+          } else if (Platform5.OS === "ios") {
           }
         }
       },
@@ -1399,10 +1458,23 @@ var InputFieldComponent = forwardRef(
         fontWeight,
         lineHeight,
         color: theme2.colors.textPrimary,
+        paddingLeft: leftIcon ? iconSideSpace + iconSize + iconSideSpace : void 0,
+        paddingRight: rightIcon ? iconSideSpace + iconSize + iconSideSpace : void 0,
         paddingHorizontal: readyPaddingHorizontal,
         paddingVertical: readyPaddingVertical
       }),
-      [theme2.colors, fontSize, fontWeight, lineHeight, readyPaddingHorizontal, readyPaddingVertical]
+      [
+        theme2.colors,
+        fontSize,
+        fontWeight,
+        lineHeight,
+        readyPaddingHorizontal,
+        readyPaddingVertical,
+        iconSideSpace,
+        iconSize,
+        leftIcon,
+        rightIcon
+      ]
     );
     const rnDateTimePickerStyle = useMemo8(
       () => ({
@@ -1411,7 +1483,7 @@ var InputFieldComponent = forwardRef(
       }),
       [iOSDateTimeFullSize]
     );
-    useEffect4(() => {
+    useEffect5(() => {
       if (value === void 0) return;
       setInternalValue(value.toString());
       try {
@@ -1419,7 +1491,7 @@ var InputFieldComponent = forwardRef(
       } catch (error) {
       }
     }, [value]);
-    useEffect4(() => {
+    useEffect5(() => {
       if (type !== "date" && type !== "time") return;
       const date = internalDateValue?.toISOString().split("T")[0] ?? "";
       const hours = internalDateValue ? internalDateValue.getHours().toString() : "00";
@@ -1438,20 +1510,21 @@ 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__ */ jsxs4(View_default, { isRow: true, alignItems: "center", gap: 2, children: [
-      /* @__PURE__ */ jsx9(Text_default, { fontSize: 14, color: isError ? theme2.colors.error : theme2.colors.textSecondary, children: label }),
-      required && /* @__PURE__ */ jsx9(Text_default, { color: theme2.colors.error, children: "*" })
+      /* @__PURE__ */ jsx10(Text_default, { fontSize: 14, color: isError ? theme2.colors.error : theme2.colors.textSecondary, children: label }),
+      required && /* @__PURE__ */ jsx10(Text_default, { color: theme2.colors.error, children: "*" })
     ] });
     return /* @__PURE__ */ jsxs4(
       Animate_default.View,
       {
-        flex: 1,
+        flex,
         gap: theme2.styles.gap / 3,
         initialOpacity: 1,
         animateOpacity: disabled ? 0.6 : 1,
+        ...props,
         children: [
           isIOSDateTime && !iOSDateTimeFullSize ? void 0 : labelComponent,
-          /* @__PURE__ */ jsxs4(View_default, { isRow: true, position: "relative", alignItems: "center", flex: 1, height: readyHeight, children: [
-            prefix && /* @__PURE__ */ jsx9(
+          /* @__PURE__ */ jsxs4(View_default, { isRow: true, position: "relative", alignItems: "center", height: readyHeight, children: [
+            prefix && /* @__PURE__ */ jsx10(
               View_default,
               {
                 isRow: true,
@@ -1466,12 +1539,12 @@ var InputFieldComponent = forwardRef(
                 borderColor: theme2.colors.border,
                 paddingHorizontal: readyPaddingHorizontal,
                 onPress: onPressPrefix,
-                children: typeof prefix === "string" ? /* @__PURE__ */ jsx9(
+                children: typeof prefix === "string" ? /* @__PURE__ */ jsx10(
                   Text_default,
                   {
                     fontWeight: 700,
                     lineHeight,
-                    marginTop: Platform4.OS === "ios" && onPressPrefix ? readyPaddingVertical : void 0,
+                    marginTop: Platform5.OS === "ios" && onPressPrefix ? readyPaddingVertical : void 0,
                     children: prefix
                   }
                 ) : prefix
@@ -1479,7 +1552,7 @@ var InputFieldComponent = forwardRef(
             ),
             isIOSDateTime ? /* @__PURE__ */ jsxs4(Fragment3, { children: [
               !iOSDateTimeFullSize ? labelComponent : void 0,
-              /* @__PURE__ */ jsx9(
+              /* @__PURE__ */ jsx10(
                 RNDateTimePicker,
                 {
                   value: internalDateValue ?? /* @__PURE__ */ new Date(),
@@ -1490,7 +1563,7 @@ var InputFieldComponent = forwardRef(
                   onChange: onChangeRNDateTimePicker
                 }
               )
-            ] }) : /* @__PURE__ */ jsx9(
+            ] }) : /* @__PURE__ */ jsx10(
               View_default,
               {
                 flex: 1,
@@ -1500,11 +1573,13 @@ var InputFieldComponent = forwardRef(
                 borderTopRightRadius: suffix ? 0 : theme2.styles.borderRadius,
                 borderBottomRightRadius: suffix ? 0 : theme2.styles.borderRadius,
                 pressStrength: 1,
-                onPress: Platform4.OS === "android" ? editable === false || withPressInputField ? onPressInputField : void 0 : void 0,
-                children: /* @__PURE__ */ jsx9(
+                onPress: Platform5.OS === "android" ? editable === false || withPressInputField ? onPressInputField : void 0 : void 0,
+                children: /* @__PURE__ */ jsxs4(
                   Animate_default.View,
                   {
+                    position: "relative",
                     flex: 1,
+                    justifyContent: "center",
                     backgroundColor: theme2.colors.backgroundContent,
                     borderTopLeftRadius: prefix ? 0 : theme2.styles.borderRadius,
                     borderBottomLeftRadius: prefix ? 0 : theme2.styles.borderRadius,
@@ -1514,44 +1589,68 @@ var InputFieldComponent = forwardRef(
                     initialBorderColor: theme2.colors.border,
                     animateBorderColor: isFocused ? theme2.colors.primary : isError ? theme2.colors.error : theme2.colors.border,
                     overflow: "hidden",
-                    children: /* @__PURE__ */ jsx9(
-                      TextInput2,
-                      {
-                        style: textInputStyle,
-                        value: internalValue,
-                        defaultValue,
-                        autoCapitalize,
-                        autoComplete,
-                        autoCorrect,
-                        autoFocus,
-                        placeholder: placeholder ?? label,
-                        placeholderTextColor: theme2.colors.textSecondary + "80",
-                        enterKeyHint: returnKeyLabel,
-                        returnKeyType,
-                        onSubmitEditing: onPressEnter,
-                        readOnly: !editable || disabled || type === "date" || type === "time",
-                        textAlign,
-                        editable: !disabled,
-                        keyboardAppearance,
-                        keyboardType,
-                        cursorColor: theme2.colors.primary,
-                        selectionColor: theme2.colors.primary,
-                        secureTextEntry,
-                        onFocus: onFocusElement,
-                        onBlur: onBlurElement,
-                        onChangeText,
-                        maxLength,
-                        multiline,
-                        numberOfLines,
-                        onPress: withPressInputField ? onPressInputField : void 0,
-                        ref: textInputRef
-                      }
-                    )
+                    children: [
+                      leftIcon && /* @__PURE__ */ jsx10(
+                        Icon_default,
+                        {
+                          position: "absolute",
+                          left: iconSideSpace,
+                          name: leftIcon,
+                          nameIOS: leftIconIOS,
+                          size: iconSize,
+                          pointerEvents: "box-none"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx10(
+                        TextInput2,
+                        {
+                          style: textInputStyle,
+                          value: internalValue,
+                          defaultValue,
+                          autoCapitalize,
+                          autoComplete,
+                          autoCorrect,
+                          autoFocus,
+                          placeholder: placeholder ?? label,
+                          placeholderTextColor: theme2.colors.textSecondary + "80",
+                          enterKeyHint: returnKeyLabel,
+                          returnKeyType,
+                          onSubmitEditing: onPressEnter,
+                          readOnly: !editable || disabled || type === "date" || type === "time",
+                          textAlign,
+                          editable: !disabled,
+                          keyboardAppearance,
+                          keyboardType,
+                          cursorColor: theme2.colors.primary,
+                          selectionColor: theme2.colors.primary,
+                          secureTextEntry,
+                          onFocus: onFocusElement,
+                          onBlur: onBlurElement,
+                          onChangeText,
+                          maxLength,
+                          multiline,
+                          numberOfLines,
+                          onPress: withPressInputField ? onPressInputField : void 0,
+                          ref: textInputRef
+                        }
+                      ),
+                      rightIcon && /* @__PURE__ */ jsx10(
+                        Icon_default,
+                        {
+                          position: "absolute",
+                          right: iconSideSpace,
+                          name: rightIcon,
+                          nameIOS: rightIconIOS,
+                          size: iconSize,
+                          pointerEvents: "box-none"
+                        }
+                      )
+                    ]
                   }
                 )
               }
             ),
-            suffix && /* @__PURE__ */ jsx9(
+            suffix && /* @__PURE__ */ jsx10(
               View_default,
               {
                 isRow: true,
@@ -1565,19 +1664,19 @@ var InputFieldComponent = forwardRef(
                 borderColor: theme2.colors.border,
                 paddingHorizontal: readyPaddingHorizontal,
                 onPress: onPressSuffix,
-                children: typeof suffix === "string" ? /* @__PURE__ */ jsx9(
+                children: typeof suffix === "string" ? /* @__PURE__ */ jsx10(
                   Text_default,
                   {
                     fontWeight: 700,
                     lineHeight,
-                    marginTop: Platform4.OS === "ios" && onPressSuffix ? readyPaddingVertical : void 0,
+                    marginTop: Platform5.OS === "ios" && onPressSuffix ? readyPaddingVertical : void 0,
                     children: suffix
                   }
                 ) : suffix
               }
             )
           ] }),
-          infoMessage && /* @__PURE__ */ jsx9(
+          infoMessage && /* @__PURE__ */ jsx10(
             Animate_default.Text,
             {
               fontSize: 14,
@@ -1589,7 +1688,7 @@ var InputFieldComponent = forwardRef(
               children: infoMessage
             }
           ),
-          errorMessage && /* @__PURE__ */ jsx9(
+          errorMessage && /* @__PURE__ */ jsx10(
             Animate_default.Text,
             {
               fontSize: 14,
@@ -1607,7 +1706,7 @@ var InputFieldComponent = forwardRef(
   }
 );
 InputFieldComponent.email = forwardRef(function Email(props, ref) {
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     InputFieldComponent,
     {
       placeholder: "your@email.here",
@@ -1621,7 +1720,7 @@ InputFieldComponent.email = forwardRef(function Email(props, ref) {
   );
 });
 InputFieldComponent.password = forwardRef(function Password(props, ref) {
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     InputFieldComponent,
     {
       secureTextEntry: true,
@@ -1634,11 +1733,15 @@ InputFieldComponent.password = forwardRef(function Password(props, ref) {
     }
   );
 });
+InputFieldComponent.search = forwardRef(function Search(props, ref) {
+  return /* @__PURE__ */ jsx10(InputFieldComponent, { placeholder: "Search...", leftIcon: "magnifyingGlass", ...props, ref });
+});
 InputFieldComponent.code = forwardRef(function Password2({ isSmall, ...props }, ref) {
-  const theme2 = useTheme8();
-  return /* @__PURE__ */ jsx9(
+  const theme2 = useTheme9();
+  return /* @__PURE__ */ jsx10(
     InputFieldComponent,
     {
+      flex: 1,
       fontSize: isSmall ? 36 : 42,
       fontWeight: 900,
       lineHeight: isSmall ? 42 : 50,
@@ -1653,21 +1756,22 @@ InputFieldComponent.code = forwardRef(function Password2({ isSmall, ...props },
 var InputField = memo9(InputFieldComponent);
 InputField.email = InputFieldComponent.email;
 InputField.password = InputFieldComponent.password;
+InputField.search = InputFieldComponent.search;
 InputField.code = InputFieldComponent.code;
 var InputField_default = InputField;
 
 // src/components/StatusBar.tsx
 import { memo as memo10 } from "react";
-import { useTheme as useTheme9 } from "react-better-core";
-import { StatusBar as NativeStatusBar, Platform as Platform5 } from "react-native";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { useTheme as useTheme10 } from "react-better-core";
+import { StatusBar as NativeStatusBar, Platform as Platform6 } from "react-native";
+import { jsx as jsx11 } from "react/jsx-runtime";
 function StatusBar({ darkStatusBar, hidden, barStyle, androidBarStyle, iOSBarStyle }) {
-  const theme2 = useTheme9();
-  return /* @__PURE__ */ jsx10(
+  const theme2 = useTheme10();
+  return /* @__PURE__ */ jsx11(
     NativeStatusBar,
     {
       backgroundColor: darkStatusBar ? theme2.colors.backgroundSecondary : void 0,
-      barStyle: barStyle ?? (Platform5.OS === "android" ? androidBarStyle : iOSBarStyle),
+      barStyle: barStyle ?? (Platform6.OS === "android" ? androidBarStyle : iOSBarStyle),
       hidden
     }
   );
@@ -1690,6 +1794,7 @@ export {
   Animate_default as Animate,
   BetterComponentsProvider_default as BetterComponentsProvider,
   Button_default as Button,
+  Icon_default as Icon,
   Image_default as Image,
   InputField_default as InputField,
   Loader_default as Loader,
@@ -1723,6 +1828,6 @@ export {
   useKeyboard,
   useLoader2 as useLoader,
   useLoaderControls,
-  useTheme10 as useTheme
+  useTheme11 as useTheme
 };
 //# sourceMappingURL=index.mjs.map