@dropi/react-native-design-system 0.2.11 → 0.2.12

package/lib/molecules/InputField/BaseInput.d.ts

@@ -0,0 +1,14 @@
+import { TextInput, KeyboardTypeOptions, TextInputProps } from "react-native";
+import { IconName } from "dropi-lib-icons";
+export declare const BaseInput: import("react").ForwardRefExoticComponent<TextInputProps & {
+    type?: KeyboardTypeOptions;
+    preIcon?: IconName;
+    label?: string;
+    helper?: string;
+    placeholder?: string;
+    tooltip?: string;
+    value: string;
+    hasError: boolean;
+    errorMessage?: string;
+    isFocus: boolean;
+} & import("react").RefAttributes<TextInput>>;

package/lib/molecules/InputField/BaseInput.js

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BaseInput = void 0;
+var _reactNative = require("react-native");
+var _molecules = require("./molecules");
+var _styles = _interopRequireDefault(require("./styles"));
+var _react = require("react");
+var _constants = require("../../constants");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const BaseInput = exports.BaseInput = /*#__PURE__*/(0, _react.forwardRef)(({
+  type = "default",
+  preIcon,
+  label,
+  helper,
+  placeholder,
+  tooltip,
+  value,
+  hasError,
+  errorMessage,
+  isFocus,
+  /** TextInput props */
+  ...rest
+}, ref) => {
+  const getBorderColor = () => {
+    if (hasError) {
+      return _constants.colors["Error-500"].light;
+    }
+    if (isFocus) {
+      return _constants.colors["Info-500"].light;
+    }
+    return _constants.colors["Gray-200"].light;
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: _styles.default.fieldContainer,
+    children: [label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_molecules.InputLabel, {
+      text: label
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: [_styles.default.searchbarContainer, {
+        borderColor: getBorderColor()
+      }],
+      children: [preIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_molecules.InputIcon, {
+        icon: preIcon
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [_styles.default.searchContainer, {
+          marginLeft: preIcon ? _constants.spacing["size-2"] : 0
+        }],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+          ref: ref,
+          style: _styles.default.usernameInput,
+          placeholder: placeholder,
+          placeholderTextColor: _constants.colors["Gray-500"].light,
+          value: value,
+          keyboardType: type,
+          ...rest
+        })
+      })]
+    }), helper && !hasError && /*#__PURE__*/(0, _jsxRuntime.jsx)(_molecules.InputHelper, {
+      helperText: helper
+    }), hasError && errorMessage && /*#__PURE__*/(0, _jsxRuntime.jsx)(_molecules.InputError, {
+      errorMessage: errorMessage
+    })]
+  });
+});

package/lib/molecules/InputField/EmailInput.d.ts

@@ -0,0 +1,14 @@
+import { IconName } from "dropi-lib-icons";
+type InputProps = {
+    preIcon?: IconName;
+    helper?: string;
+    tooltip?: string;
+    value: string;
+    onChange: (value: string) => void;
+    hasError: boolean;
+    errorMessage?: string;
+    readOnly: boolean;
+};
+export declare const validateEmail: (value: string) => boolean;
+export declare const EmailInput: ({ preIcon, helper, tooltip, value, onChange, hasError, errorMessage, readOnly, }: InputProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/molecules/InputField/EmailInput.js

@@ -0,0 +1,77 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.validateEmail = exports.EmailInput = void 0;
+var _BaseInput = require("./BaseInput");
+var _react = require("react");
+var _jsxRuntime = require("react/jsx-runtime");
+const validateEmail = value => {
+  // Regular expression for validating email addresses
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  return emailRegex.test(value);
+};
+exports.validateEmail = validateEmail;
+const EmailInput = ({
+  preIcon,
+  helper,
+  tooltip,
+  value,
+  onChange,
+  hasError,
+  errorMessage,
+  readOnly
+}) => {
+  const [incorrectEmail, setIncorrectEmail] = (0, _react.useState)(false);
+  const [focus, setFocus] = (0, _react.useState)(false);
+  const [wasVisited, setWasVisited] = (0, _react.useState)(false);
+  const onFocus = () => {
+    setFocus(true);
+  };
+  const onBlur = () => {
+    setFocus(false);
+    if (!wasVisited) {
+      setWasVisited(true);
+      if (!validateEmail(value)) {
+        setIncorrectEmail(true);
+      }
+    }
+  };
+  const getErrorMessage = () => {
+    if (hasError) {
+      return errorMessage;
+    }
+    if (incorrectEmail) {
+      return "Ingresa un correo electrónico válido";
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_BaseInput.BaseInput, {
+    type: "email-address",
+    label: "Correo electrónico",
+    placeholder: "Ingresa tu correo electrónico",
+    value: value,
+    preIcon: preIcon,
+    helper: helper,
+    tooltip: tooltip,
+    onChangeText: text => {
+      onChange(text);
+      if (wasVisited) {
+        if (validateEmail(value)) {
+          setIncorrectEmail(false);
+        } else {
+          setIncorrectEmail(true);
+        }
+      }
+    },
+    hasError: hasError || incorrectEmail,
+    errorMessage: getErrorMessage(),
+    autoCorrect: false,
+    autoCapitalize: "none",
+    readOnly: readOnly,
+    onBlur: onBlur,
+    onFocus: onFocus,
+    isFocus: focus
+  });
+};
+exports.EmailInput = EmailInput;

package/lib/molecules/InputField/Input.d.ts

@@ -0,0 +1,26 @@
+type InputType = "text" | "number" | "email" | "password";
+type InputFactoryProps = {
+    type: InputType;
+};
+export declare const Input: ({ type, ...props }: InputFactoryProps) => import("react").ForwardRefExoticComponent<import("react-native").TextInputProps & {
+    type?: import("react-native").KeyboardTypeOptions;
+    preIcon?: import("dropi-lib-icons").IconName;
+    label?: string;
+    helper?: string;
+    placeholder?: string;
+    tooltip?: string;
+    value: string;
+    hasError: boolean;
+    errorMessage?: string;
+    isFocus: boolean;
+} & import("react").RefAttributes<import("react-native").TextInput>> | (({ preIcon, helper, tooltip, value, onChange, hasError, errorMessage, readOnly, }: {
+    preIcon?: import("dropi-lib-icons").IconName;
+    helper?: string;
+    tooltip?: string;
+    value: string;
+    onChange: (value: string) => void;
+    hasError: boolean;
+    errorMessage?: string;
+    readOnly: boolean;
+}) => import("react/jsx-runtime").JSX.Element);
+export {};

package/lib/molecules/InputField/Input.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Input = void 0;
+var _BaseInput = require("./BaseInput");
+var _EmailInput = require("./EmailInput");
+// import { PasswordInput } from "./PasswordInput"
+
+const InputComponents = {
+  text: _BaseInput.BaseInput,
+  number: _BaseInput.BaseInput,
+  email: _EmailInput.EmailInput,
+  password: _EmailInput.EmailInput
+};
+const Input = ({
+  type,
+  ...props
+}) => {
+  return InputComponents[type];
+};
+exports.Input = Input;

package/lib/molecules/InputField/PasswordInput.d.ts

@@ -0,0 +1,11 @@
+import { TextInput, TextInputProps } from "react-native";
+import { IconName } from "dropi-lib-icons";
+export declare const PasswordInput: import("react").ForwardRefExoticComponent<TextInputProps & {
+    preIcon?: IconName;
+    helper?: string;
+    tooltip?: string;
+    value: string;
+    onChangeFunction: (value: string) => void;
+    hasError: boolean;
+    errorMessage?: string;
+} & import("react").RefAttributes<TextInput>>;

package/lib/molecules/InputField/PasswordInput.js

@@ -0,0 +1,97 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PasswordInput = void 0;
+var _reactNative = require("react-native");
+var _constants = require("./../../constants");
+var _molecules = require("./molecules");
+var _styles = _interopRequireDefault(require("./styles"));
+var _react = require("react");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const PasswordInput = exports.PasswordInput = /*#__PURE__*/(0, _react.forwardRef)(({
+  preIcon,
+  helper,
+  tooltip,
+  value,
+  onChangeFunction,
+  hasError,
+  errorMessage,
+  /** TextInput props */
+  ...rest
+}, ref) => {
+  const [passwordVisibility, setPasswordVisibility] = (0, _react.useState)(false);
+  const [incorrectPasswordLength, setIncorrectPasswordLength] = (0, _react.useState)(false);
+  const [focus, setFocus] = (0, _react.useState)(false);
+  const [wasVisited, setWasVisited] = (0, _react.useState)(false);
+  const onFocus = () => {
+    setFocus(true);
+  };
+  const onBlur = () => {
+    setFocus(false);
+    if (!wasVisited) {
+      setWasVisited(true);
+      if (value.length < 4) {
+        setIncorrectPasswordLength(true);
+      }
+    }
+  };
+  const getBorderColor = () => {
+    if (hasError || incorrectPasswordLength) {
+      return _constants.colors["Error-500"].light;
+    }
+    if (focus) {
+      return _constants.colors["Info-500"].light;
+    }
+    return _constants.colors["Gray-200"].light;
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: _styles.default.fieldContainer,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_molecules.InputLabel, {
+      text: "Contraseña"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: [_styles.default.searchbarContainer, {
+        borderColor: getBorderColor()
+      }],
+      children: [preIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_molecules.InputIcon, {
+        icon: preIcon
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [_styles.default.searchContainer, {
+          marginLeft: preIcon ? _constants.spacing["size-2"] : 0
+        }],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+          ref: ref,
+          style: _styles.default.usernameInput,
+          placeholder: "Ingresa tu contraseña",
+          placeholderTextColor: _constants.colors["Gray-500"].light,
+          value: value,
+          secureTextEntry: !passwordVisibility,
+          onChangeText: text => {
+            onChangeFunction(text);
+            if (wasVisited) {
+              if (text.length < 4) {
+                setIncorrectPasswordLength(true);
+              } else {
+                setIncorrectPasswordLength(false);
+              }
+            }
+          },
+          onFocus: onFocus,
+          onBlur: onBlur,
+          ...rest
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_molecules.InputIcon, {
+        icon: passwordVisibility ? "eye-crossed" : "eye",
+        onClick: () => setPasswordVisibility(!passwordVisibility)
+      })]
+    }), helper && !hasError && /*#__PURE__*/(0, _jsxRuntime.jsx)(_molecules.InputHelper, {
+      helperText: helper
+    }), incorrectPasswordLength && /*#__PURE__*/(0, _jsxRuntime.jsx)(_molecules.InputError, {
+      errorMessage: "La contraseña debe tener al menos 4 caracteres"
+    }), hasError && errorMessage && /*#__PURE__*/(0, _jsxRuntime.jsx)(_molecules.InputError, {
+      errorMessage: errorMessage
+    })]
+  });
+});

package/lib/molecules/InputField/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./EmailInput";
+export * from "./PasswordInput";

package/lib/molecules/InputField/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _EmailInput = require("./EmailInput");
+Object.keys(_EmailInput).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _EmailInput[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _EmailInput[key];
+    }
+  });
+});
+var _PasswordInput = require("./PasswordInput");
+Object.keys(_PasswordInput).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _PasswordInput[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _PasswordInput[key];
+    }
+  });
+});

package/lib/molecules/InputField/molecules/InputError.d.ts

@@ -0,0 +1,5 @@
+type ErrorProps = {
+    errorMessage: string;
+};
+export declare const InputError: ({ errorMessage }: ErrorProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/molecules/InputField/molecules/InputError.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InputError = void 0;
+var _reactNative = _interopRequireDefault(require("dropi-lib-icons/react-native"));
+var _reactNative2 = require("react-native");
+var _constants = require("../../../constants");
+var _atoms = require("../../../atoms");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const InputError = ({
+  errorMessage
+}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative2.View, {
+  style: styles.errorContainer,
+  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative2.View, {
+    style: styles.errorIcon,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.default, {
+      name: "warning-circle-outline",
+      size: _constants.sizes["s"],
+      color: _constants.colors["Error-500"].light
+    })
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.Body, {
+    type: "s-regular",
+    style: styles.errorText,
+    children: errorMessage
+  })]
+});
+exports.InputError = InputError;
+const styles = _reactNative2.StyleSheet.create({
+  errorContainer: {
+    marginTop: _constants.spacing["size-2"],
+    flexDirection: "row",
+    width: "100%"
+  },
+  errorIcon: {
+    alignItems: "center",
+    paddingTop: _constants.spacing["size-1"]
+  },
+  errorText: {
+    color: _constants.colors["Error-500"].light,
+    marginLeft: _constants.spacing["size-1"],
+    flex: 1
+  }
+});

package/lib/molecules/InputField/molecules/InputHelper.d.ts

@@ -0,0 +1,5 @@
+type HelperProps = {
+    helperText: string;
+};
+export declare const InputHelper: ({ helperText }: HelperProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/molecules/InputField/molecules/InputHelper.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InputHelper = void 0;
+var _reactNative = require("react-native");
+var _atoms = require("../../../atoms");
+var _constants = require("../../../constants");
+var _jsxRuntime = require("react/jsx-runtime");
+const InputHelper = ({
+  helperText
+}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+  style: {
+    marginTop: _constants.spacing["size-2"]
+  },
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.Body, {
+    type: "s-regular",
+    style: {
+      color: _constants.colors["Gray-600"].light
+    },
+    children: helperText
+  })
+});
+exports.InputHelper = InputHelper;

package/lib/molecules/InputField/molecules/InputIcon.d.ts

@@ -0,0 +1,7 @@
+import { IconName } from "dropi-lib-icons";
+type IconProps = {
+    icon: IconName;
+    onClick?: () => void;
+};
+export declare const InputIcon: ({ icon, onClick }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/molecules/InputField/molecules/InputIcon.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InputIcon = void 0;
+var _reactNative = _interopRequireDefault(require("dropi-lib-icons/react-native"));
+var _reactNative2 = require("react-native");
+var _constants = require("../../../constants");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const InputIcon = ({
+  icon,
+  onClick
+}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative2.TouchableOpacity, {
+  style: styles.userAvatarContainer,
+  onPress: onClick,
+  activeOpacity: onClick ? 0 : 1,
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.default, {
+    name: icon,
+    size: _constants.sizes["xl"],
+    color: _constants.colors["Gray-400"].light
+  })
+});
+exports.InputIcon = InputIcon;
+const styles = _reactNative2.StyleSheet.create({
+  userAvatarContainer: {
+    justifyContent: "center",
+    alignItems: "center"
+  }
+});

package/lib/molecules/InputField/molecules/InputLabel.d.ts

@@ -0,0 +1,5 @@
+type LabelProps = {
+    text: string;
+};
+export declare const InputLabel: ({ text }: LabelProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/molecules/InputField/molecules/InputLabel.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InputLabel = void 0;
+var _atoms = require("../../../atoms");
+var _constants = require("../../../constants");
+var _jsxRuntime = require("react/jsx-runtime");
+const InputLabel = ({
+  text
+}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.Body, {
+  type: "m-regular",
+  style: {
+    color: _constants.colors["Gray-600"].light
+  },
+  children: text
+});
+exports.InputLabel = InputLabel;

package/lib/molecules/InputField/molecules/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./InputLabel";
+export * from "./InputIcon";
+export * from "./InputHelper";
+export * from "./InputError";

package/lib/molecules/InputField/molecules/index.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _InputLabel = require("./InputLabel");
+Object.keys(_InputLabel).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _InputLabel[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _InputLabel[key];
+    }
+  });
+});
+var _InputIcon = require("./InputIcon");
+Object.keys(_InputIcon).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _InputIcon[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _InputIcon[key];
+    }
+  });
+});
+var _InputHelper = require("./InputHelper");
+Object.keys(_InputHelper).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _InputHelper[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _InputHelper[key];
+    }
+  });
+});
+var _InputError = require("./InputError");
+Object.keys(_InputError).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _InputError[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _InputError[key];
+    }
+  });
+});

package/lib/molecules/InputField/styles.d.ts

@@ -0,0 +1,27 @@
+declare const _default: {
+    fieldContainer: {
+        marginBottom: number;
+        width: "100%";
+    };
+    searchbarContainer: {
+        width: "100%";
+        borderRadius: number;
+        borderWidth: number;
+        justifyContent: "space-between";
+        flexDirection: "row";
+        marginTop: number;
+        height: number;
+        paddingHorizontal: number;
+        paddingVertical: number;
+    };
+    searchContainer: {
+        flex: number;
+        justifyContent: "center";
+    };
+    usernameInput: {
+        fontWeight: "400";
+        color: "#475066";
+        fontSize: number;
+    };
+};
+export default _default;

package/lib/molecules/InputField/styles.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _constants = require("./../../constants");
+var _reactNative = require("react-native");
+var _default = exports.default = _reactNative.StyleSheet.create({
+  fieldContainer: {
+    marginBottom: _constants.spacing["size-4"],
+    width: "100%"
+  },
+  searchbarContainer: {
+    width: "100%",
+    borderRadius: _constants.radius["border-2"],
+    borderWidth: 1,
+    justifyContent: "space-between",
+    flexDirection: "row",
+    marginTop: _constants.spacing["size-2"],
+    height: 48,
+    paddingHorizontal: _constants.spacing["size-3"],
+    paddingVertical: _constants.spacing["size-2"]
+  },
+  searchContainer: {
+    flex: 1,
+    justifyContent: "center"
+  },
+  usernameInput: {
+    fontWeight: _constants.weights.regular,
+    color: _constants.colors["Gray-600"].light,
+    fontSize: _constants.sizes.s
+  }
+});

package/lib/molecules/index.d.ts

@@ -1,7 +1,8 @@
-export * from './Alert';
-export * from './EmptyState';
-export * from './RadioButtons';
-export * from './Search';
-export * from './Tooltip';
-export * from './Toasts';
-export * from './Tags';
+export * from "./Alert";
+export * from "./EmptyState";
+export * from "./RadioButtons";
+export * from "./Search";
+export * from "./Tooltip";
+export * from "./Toasts";
+export * from "./Tags";
+export * from "./InputField";

package/lib/molecules/index.js

@@ -79,4 +79,15 @@ Object.keys(_Tags).forEach(function (key) {
       return _Tags[key];
     }
   });
+});
+var _InputField = require("./InputField");
+Object.keys(_InputField).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _InputField[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _InputField[key];
+    }
+  });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dropi/react-native-design-system",
-  "version": "0.2.11",
+  "version": "0.2.12",
   "description": "A React Native package built from scratch",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -20,12 +20,12 @@
   ],
   "license": "MIT",
   "peerDependencies": {
-    "react": ">=19.0.0",
-    "react-native": ">=0.79.5",
-    "dropi-lib-icons": ">=1.2.5",
+    "dropi-lib-icons": ">=1.3.4",
+    "expo-constants": ">=17.1.7",
     "expo-image": ">=2.4.0",
     "lottie-react-native": ">=7.2.2",
-    "expo-constants": ">=17.1.7"
+    "react": ">=19.0.0",
+    "react-native": ">=0.79.5"
   },
   "devDependencies": {
     "@babel/cli": "^7.28.3",
@@ -34,12 +34,12 @@
     "@babel/preset-react": "^7.28.5",
     "@babel/preset-typescript": "^7.28.5",
     "@types/react": "^19.2.3",
-    "react": "^19.2.0",
-    "react-native": "^0.82.1",
-    "typescript": "^5.6.0",
-    "dropi-lib-icons": "^1.2.5",
+    "dropi-lib-icons": "^1.3.4",
+    "expo-constants": ">=17.1.7",
     "expo-image": ">=2.4.0",
     "lottie-react-native": ">=7.2.2",
-    "expo-constants": ">=17.1.7"
+    "react": "^19.2.0",
+    "react-native": "^0.82.1",
+    "typescript": "^5.6.0"
   }
 }