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

package/README.md

@@ -35,8 +35,15 @@ El **Design System de Dropi** para aplicaciones **React Native**. Este paquete r
 - [🧪 Moléculas](#moléculas)
   - [Alert](#alert)
   - [Empty State](#empty-state)
-  - [Title Description](#title-description)
+  - [Radio Buttons](#radio-buttons)
+    - [Title Description](#title-description)
+  - [Search](#search)
   - [Tooltip](#tooltip)
+  - [Tags](#tags)
+    - [Order Tag](#order-tag)
+    - [Default Tag](#default-tag)
+  - [Toasts](#toasts)
+    - [Feedback Toast](#feedback-toast)
 
 # Instalación
 
@@ -478,17 +485,86 @@ import { EmptyState } from "@dropi/react-native-design-system";
 />
 ```
 
-## Title Description
+## Search
+
+El `Search` es un componente de campo de búsqueda diseñado para filtrar contenido de manera interactiva. Incluye un ícono de búsqueda a la izquierda, un campo de texto editable y un botón de limpieza que aparece automáticamente cuando hay texto ingresado. Utiliza `forwardRef` para exponer la referencia del `TextInput` nativo, permitiendo control programático del foco y otras funcionalidades del input. El componente mantiene una apariencia limpia y consistente usando los tokens `colors`, `radius`, `sizes` y `spacing` del design system.
+
+### 📦 Importación:
+```Typescript
+import { Search } from "@dropi/react-native-design-system";
+```
+
+### ⚙️ Props:
+| Prop          | Tipo                    | Descripción                                                                        |
+| :------------ | :---------------------- | :--------------------------------------------------------------------------------- |
+| filterText    | string                  | Valor actual del texto de búsqueda.                                                |
+| setFilterText | (text: string) => void  | Callback para actualizar el valor del texto.                                       |
+| placeholder   | string                  | *(Opcional)* Texto placeholder. Por defecto es "Buscar".                           |
+| ref           | TextInput               | Referencia al TextInput nativo para control programático.                          |
+| ...rest       | TextInputProps          | Cualquier prop nativa del componente TextInput de React Native.                    |
+
+### 🧩 Ejemplos de uso:
+```Typescript
+import { useRef, useState } from 'react';
+import { TextInput } from 'react-native';
+import { Search } from '@dropi/react-native-design-system';
+
+const MyComponent = () => {
+  const [searchText, setSearchText] = useState('');
+  const searchRef = useRef<TextInput>(null);
+
+  const handleFocusSearch = () => {
+    searchRef.current?.focus();
+  };
+
+  return (
+    <Search
+      ref={searchRef}
+      filterText={searchText}
+      setFilterText={setSearchText}
+      placeholder="Buscar productos"
+    />
+  );
+};
+
+// Uso básico
+<Search
+  filterText={query}
+  setFilterText={setQuery}
+/>
+
+// Con placeholder personalizado
+<Search
+  filterText={searchValue}
+  setFilterText={setSearchValue}
+  placeholder="Buscar por nombre o código"
+/>
+
+// Con props adicionales de TextInput
+<Search
+  ref={inputRef}
+  filterText={filter}
+  setFilterText={setFilter}
+  placeholder="Filtrar resultados"
+  autoFocus
+  returnKeyType="search"
+  onSubmitEditing={handleSearch}
+/>
+```
+
+## Radio Buttons
+
+### Title Description
 
 El TitleDescription es un componente de selección diseñado para mostrar opciones con un título principal, una descripción opcional, una imagen y un indicador visual circular que refleja si la opción está activa. Es ideal para flujos donde el usuario debe elegir entre varias alternativas.
 Adapta automáticamente tamaños en tablets usando isTablet, mantiene una disposición horizontal limpia y un estilo consistente con el design system.
 
-### 📦 Importación:
+#### 📦 Importación:
 ```Typescript
 import { TitleDescription } from "@dropi/react-native-design-system";
 ```
 
-### ⚙️ Props:
+#### ⚙️ Props:
 | Prop           | Tipo                     | Descripción                                                                    |
 | :------------- | :------------------------ | :-----------------------------------------------------------------------------|
 | title          | string                   | Título principal de la opción.                                                 |
@@ -499,7 +575,7 @@ import { TitleDescription } from "@dropi/react-native-design-system";
 | ...rest        | TouchableOpacityProps    | Props adicionales del contenedor presionable.                                  |
 
 
-### 🧩 Ejemplos de uso:
+#### 🧩 Ejemplos de uso:
 ```Typescript
 <TitleDescription
   title="Domicilio"
@@ -561,4 +637,209 @@ import { TitleDescription } from "@dropi/react-native-design-system";
     </Body>
 </Tooltip>
 
+```
+
+## Tags
+
+### Order Tag
+
+El `OrderTag` es un componente visual diseñado para mostrar el estado actual de un pedido mediante una etiqueta con codificación cromática. Cada estado de pedido se representa con un color específico del sistema, facilitando la identificación rápida del estado sin necesidad de leer el texto completo. El componente es compacto, puede limitar su ancho para contextos reducidos, y utiliza los tokens `colors`, `radius` y `spacing` para mantener consistencia visual con el resto del design system.
+
+### 📦 Importación:
+```Typescript
+import { OrderTag } from "@dropi/react-native-design-system";
+```
+
+### ⚙️ Props:
+| Prop           | Tipo                 | Descripción                                                                              |
+| :------------- | :------------------- | :--------------------------------------------------------------------------------------- |
+| status         | string               | Estado del pedido que determina el color y texto de la etiqueta.                         |
+| limitedWidth   | boolean              | *(Opcional)* Limita el ancho máximo a 112px. Por defecto es `false` (ancho completo).    |
+
+### 📋 Estados disponibles:
+| Estado                        | Color                     |
+| :---------------------------- | :------------------------ |
+| ENTREGADO                     | Success-700               |
+| EN TRANSITO                   | Success-600               |
+| GUIA_GENERADA                 | Info-500                  |
+| RECOGIDO POR DROPI            | Info-700                  |
+| ENTREGADO A TRANSPORTADORA    | Success-400               |
+| PENDIENTE                     | Warning-600               |
+| PENDIENTE CONFIRMACION        | Warning-500               |
+| NOVEDAD                       | Error-600                 |
+| DEVOLUCION                    | Error-800                 |
+| CANCELADO                     | Gray-400                  |
+
+*Cualquier estado no listado mostrará un fondo negro por defecto.*
+
+### 🧩 Ejemplos de uso:
+```Typescript
+<OrderTag status="ENTREGADO" />
+
+<OrderTag 
+  status="EN TRANSITO" 
+  limitedWidth={true} 
+/>
+
+<OrderTag status="PENDIENTE CONFIRMACION" />
+
+<OrderTag 
+  status="NOVEDAD" 
+  limitedWidth={false} 
+/>
+```
+
+### Default Tag
+
+El `DefaultTag` es un componente de etiqueta versátil diseñado para categorizar, destacar o marcar contenido dentro de la interfaz. Ofrece dos variantes visuales (`primary` y `secondary`) y seis estados semánticos (`default`, `success`, `info`, `warning`, `red`, `neutral`) que determinan su esquema de color. Además, permite incluir un ícono opcional para reforzar visualmente el significado de la etiqueta. El componente limita su ancho máximo a 160px y se autoajusta al inicio del contenedor, utilizando los tokens `colors`, `radius` y `sizes` para mantener coherencia con el design system.
+
+#### 📦 Importación:
+```Typescript
+import { DefaultTag } from "@dropi/react-native-design-system";
+```
+
+#### ⚙️ Props:
+| Prop    | Tipo                                                                          | Descripción                                                                        |
+| :------ | :---------------------------------------------------------------------------- | :--------------------------------------------------------------------------------- |
+| type    | 'primary' \| 'secondary'                                                      | Define la variante visual del tag (colores sólidos o suaves).                      |
+| label   | string                                                                        | Texto visible dentro de la etiqueta.                                               |
+| state   | 'default' \| 'success' \| 'info' \| 'warning' \| 'red' \| 'neutral'           | *(Opcional)* Estado semántico que determina el color. Por defecto es `'default'`.  |
+| icon    | IconName                                                                      | *(Opcional)* Ícono que aparece antes del texto.                                    |
+
+#### 🎨 Estados y colores:
+
+**Primary (fondo sólido, texto blanco):**
+| Estado   | Color de fondo |
+| :------- | :------------- |
+| default  | Primary-500    |
+| success  | Success-500    |
+| info     | Info-500       |
+| warning  | Warning-500    |
+| red      | Error-500      |
+| neutral  | Gray-500       |
+
+**Secondary (fondo suave, texto del color primario del estado):**
+| Estado   | Color de fondo | Color de texto  |
+| :------- | :------------- | :-------------- |
+| default  | Primary-100    | Primary-500     |
+| success  | Success-50     | Success-500     |
+| info     | Info-50        | Info-500        |
+| warning  | Warning-50     | Warning-500     |
+| red      | Error-50       | Error-500       |
+| neutral  | Gray-50        | Gray-500        |
+
+#### 🧩 Ejemplos de uso:
+```Typescript
+<DefaultTag 
+  type="primary" 
+  label="Nuevo" 
+  state="default" 
+/>
+
+<DefaultTag 
+  type="secondary" 
+  label="Aprobado" 
+  state="success" 
+  icon="check-circle"
+/>
+
+<DefaultTag 
+  type="primary" 
+  label="Urgente" 
+  state="warning" 
+  icon="alert-triangle"
+/>
+
+<DefaultTag 
+  type="secondary" 
+  label="Información" 
+  state="info" 
+/>
+```
+
+## Toasts
+
+### Feedback Toast
+
+El `FeedbackToast` es un componente de notificación temporal que aparece desde la parte superior de la pantalla para comunicar el resultado de una acción o mostrar información importante al usuario. Incluye una animación Lottie contextual, una banda lateral de color semántico y botón de cierre. El componente se anima automáticamente al mostrarse con un efecto de "rebote" y puede cerrarse manualmente o mediante programación. Utiliza `forwardRef` para exponer métodos imperativos que permiten controlar su comportamiento desde componentes padres.
+
+#### 📦 Importación:
+```Typescript
+import { FeedbackToast } from "@dropi/react-native-design-system";
+```
+
+#### ⚙️ Props:
+| Prop          | Tipo                                         | Descripción                                                                            |
+| :------------ | :------------------------------------------- | :------------------------------------------------------------------------------------- |
+| type          | 'success' \| 'error' \| 'warning' \| 'info'  | Define el tipo de notificación, determina color de banda y animación Lottie.           |
+| title         | string                                       | *(Opcional)* Título principal del toast.                                               |
+| message       | string                                       | *(Opcional)* Mensaje descriptivo del toast.                                            |
+| setShowToast  | (show: boolean) => void                      | Callback para controlar la visibilidad del toast desde el componente padre.            |
+| ref           | ToastRef                                     | Referencia que expone el método `animateOut()` para cerrar el toast programáticamente. |
+
+#### 🎨 Tipos y sus características:
+| Tipo     | Color de banda | Animación Lottie    |
+| :------- | :------------- | :------------------ |
+| success  | Success-500    | afirmacion.json     |
+| error    | Error-500      | buscando.json       |
+| warning  | Warning-500    | alerta.json         |
+| info     | Info-500       | pregunta.json       |
+
+#### 🧩 Ejemplos de uso:
+```Typescript
+import { useRef, useState } from 'react';
+import { FeedbackToast, ToastRef } from '@dropi/react-native-design-system';
+
+const MyComponent = () => {
+  const [showToast, setShowToast] = useState(false);
+  const toastRef = useRef<ToastRef>(null);
+
+  const handleSuccess = () => {
+    setShowToast(true);
+  };
+
+  const handleCloseToast = () => {
+    toastRef.current?.animateOut();
+  };
+
+  return (
+    <>
+      {showToast && (
+        <FeedbackToast
+          ref={toastRef}
+          type="success"
+          title="¡Operación exitosa!"
+          message="Los cambios se guardaron correctamente"
+          setShowToast={setShowToast}
+        />
+      )}
+    </>
+  );
+};
+
+// Toast de error sin título
+<FeedbackToast
+  ref={toastRef}
+  type="error"
+  message="No se pudo completar la operación"
+  setShowToast={setShowToast}
+/>
+
+// Toast de advertencia
+<FeedbackToast
+  ref={toastRef}
+  type="warning"
+  title="Atención"
+  message="Esta acción no se puede deshacer"
+  setShowToast={setShowToast}
+/>
+
+// Toast informativo
+<FeedbackToast
+  ref={toastRef}
+  type="info"
+  title="Información"
+  message="Hay una nueva actualización disponible"
+  setShowToast={setShowToast}
+/>
 ```

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.10",
+  "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"
   }
 }