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

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/Tags/DefaultTag/DefaultTag.d.ts

@@ -0,0 +1,11 @@
+import { IconName } from 'dropi-lib-icons';
+type TagType = 'primary' | 'secondary';
+type TagState = 'default' | 'success' | 'info' | 'warning' | 'red' | 'neutral';
+interface Props {
+    type: TagType;
+    label: string;
+    state?: TagState;
+    icon?: IconName;
+}
+export declare const DefaultTag: ({ type, label, state, icon }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/molecules/Tags/DefaultTag/DefaultTag.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DefaultTag = void 0;
+var _reactNative = require("react-native");
+var _constants = require("../../../constants");
+var _atoms = require("../../../atoms");
+var _reactNative2 = _interopRequireDefault(require("dropi-lib-icons/react-native"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const TAG_BACKGROUND_COLORS = {
+  primary: {
+    default: _constants.colors['Primary-500'].light,
+    success: _constants.colors['Success-500'].light,
+    info: _constants.colors['Info-500'].light,
+    warning: _constants.colors['Warning-500'].light,
+    red: _constants.colors['Error-500'].light,
+    neutral: _constants.colors['Gray-500'].light
+  },
+  secondary: {
+    default: _constants.colors['Primary-100'].light,
+    success: _constants.colors['Success-50'].light,
+    info: _constants.colors['Info-50'].light,
+    warning: _constants.colors['Warning-50'].light,
+    red: _constants.colors['Error-50'].light,
+    neutral: _constants.colors['Gray-50'].light
+  }
+};
+const getBackgroundColor = (type, state) => {
+  return TAG_BACKGROUND_COLORS[type][state];
+};
+const DefaultTag = ({
+  type,
+  label,
+  state = 'default',
+  icon
+}) => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [styles.container, {
+      backgroundColor: getBackgroundColor(type, state)
+    }],
+    children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative2.default, {
+      name: icon,
+      size: _constants.sizes.s,
+      color: type === 'primary' ? _constants.colors['White'].light : getBackgroundColor('primary', state),
+      style: {
+        marginRight: 4
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_atoms.Body, {
+      numberOfLines: 1,
+      type: "s-medium",
+      style: {
+        color: type === 'primary' ? _constants.colors['White'].light : getBackgroundColor('primary', state)
+      },
+      children: [" ", label, " "]
+    })]
+  });
+};
+exports.DefaultTag = DefaultTag;
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    paddingVertical: 4,
+    paddingHorizontal: 8,
+    borderRadius: _constants.radius["border-5"],
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    maxWidth: 160,
+    alignSelf: 'flex-start'
+  }
+});

package/lib/molecules/Tags/DefaultTag/index.d.ts

@@ -0,0 +1 @@
+export * from './DefaultTag';

package/lib/molecules/Tags/DefaultTag/index.js

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

package/lib/molecules/Tags/OrderTag/OrderTag.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    status: string;
+    limitedWidth?: boolean;
+}
+export declare const OrderTag: ({ status, limitedWidth }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/molecules/Tags/OrderTag/OrderTag.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.OrderTag = void 0;
+var _reactNative = require("react-native");
+var _constants = require("../../../constants");
+var _atoms = require("../../../atoms");
+var _jsxRuntime = require("react/jsx-runtime");
+const STATUS_BACKGROUND_COLORS = {
+  'ENTREGADO': _constants.colors['Success-700'].light,
+  'EN TRANSITO': _constants.colors['Success-600'].light,
+  'GUIA_GENERADA': _constants.colors['Info-500'].light,
+  'RECOGIDO POR DROPI': _constants.colors['Info-700'].light,
+  'ENTREGADO A TRANSPORTADORA': _constants.colors['Success-400'].light,
+  'PENDIENTE': _constants.colors['Warning-600'].light,
+  'PENDIENTE CONFIRMACION': _constants.colors['Warning-500'].light,
+  'NOVEDAD': _constants.colors['Error-600'].light,
+  'DEVOLUCION': _constants.colors['Error-800'].light,
+  'CANCELADO': _constants.colors['Gray-400'].light
+};
+const getBackgroundColor = status => {
+  return STATUS_BACKGROUND_COLORS[status] || _constants.colors.Black.light;
+};
+const OrderTag = ({
+  status,
+  limitedWidth = false
+}) => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [styles.orderStatusTag, {
+      backgroundColor: getBackgroundColor(status),
+      maxWidth: limitedWidth ? 112 : '100%'
+    }],
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.Body, {
+      type: "xs-medium",
+      numberOfLines: 1,
+      style: styles.statusText,
+      children: status
+    })
+  });
+};
+exports.OrderTag = OrderTag;
+const styles = _reactNative.StyleSheet.create({
+  orderStatusTag: {
+    maxWidth: 112,
+    borderRadius: _constants.radius["border-5"],
+    paddingHorizontal: _constants.spacing['size-2'],
+    paddingVertical: _constants.spacing['size-1'],
+    alignSelf: 'flex-start'
+  },
+  statusText: {
+    color: _constants.colors.White.light,
+    textAlign: 'center'
+  }
+});

package/lib/molecules/Tags/OrderTag/index.d.ts

@@ -0,0 +1 @@
+export * from './OrderTag';

package/lib/molecules/Tags/OrderTag/index.js

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

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

@@ -0,0 +1,2 @@
+export * from './DefaultTag';
+export * from './OrderTag';

package/lib/molecules/Tags/index.js

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

package/lib/molecules/Toasts/FeedbackToast/FeedbackToast.js

@@ -81,7 +81,8 @@ const FeedbackToast = exports.FeedbackToast = /*#__PURE__*/(0, _react.forwardRef
       style: {
         flexDirection: 'row',
         flex: 1,
-        paddingVertical: _constants.spacing['size-4']
+        paddingVertical: _constants.spacing['size-4'],
+        justifyContent: 'space-between'
       },
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: {

package/lib/molecules/index.d.ts

@@ -4,3 +4,4 @@ export * from './RadioButtons';
 export * from './Search';
 export * from './Tooltip';
 export * from './Toasts';
+export * from './Tags';

package/lib/molecules/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dropi/react-native-design-system",
-  "version": "0.2.9",
+  "version": "0.2.11",
   "description": "A React Native package built from scratch",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",