@dropi/react-native-design-system 0.1.15 → 0.1.17

package/README.md

@@ -1,6 +1,3 @@
-# 
-- 
-
 El **Design System de Dropi** para aplicaciones **React Native**. Este paquete reúne la base visual y funcional de nuestros productos móviles, ofreciendo **tokens de diseño, componentes reutilizables y patrones consistentes** para mantener la coherencia en la experiencia de usuario. Su objetivo es simplificar el desarrollo, acelerar la implementación de interfaces y garantizar que cada proyecto Dropi mantenga una identidad visual sólida y escalable.
 # Tokens
 ## Radius
@@ -326,4 +323,123 @@ import { TextButton } from "@dropi/react-native-design-system";
   onPress={() => console.log("Eliminar presionado")}
 />
 
+```
+# Moléculas
+## 🚨 Alert
+
+El componente Alert muestra un mensaje contextual acompañado de un ícono y colores que representan su nivel de severidad. Está diseñado para comunicar información relevante al usuario: advertencias, errores, confirmaciones o simples avisos informativos.
+
+Cada variante (info, warning, error, success) aplica automáticamente colores de fondo, borde e ícono usando el sistema de tokens (colors, sizes, radius, spacing). Además, permite incluir un botón de acción secundaria y un botón de cierre opcional.
+
+## 📦 Importación:
+```
+import { Alert } from "@dropi/react-native-design-system";
+
+```
+## ⚙️ Props:
+```
+| Prop            | Tipo                                               | Descripción                                                         |
+|---------------- |--------------------------------------------------- |---------------------------------------------------------------------|
+| `message`       | `string`                                           | Texto principal que describe la alerta.                             |
+| `variant`       | `'info' \| 'warning' \| 'error' \| 'success'`      | Define los colores, ícono y estilo visual general.                  |
+| `buttonLabel`   | `string`                                           | Texto del botón opcional dentro de la alerta.                       |
+| `onButtonPress` | `() => void`                                       | Acción ejecutada al presionar el botón opcional.                    |
+| `onClosePress`  | `() => void`                                       | Acción ejecutada al presionar el botón de cierre (`close-small`).   |
+
+```
+
+## 🧩 Ejemplos de uso:
+```Typescript
+<Alert
+  message="Tu información ha sido guardada correctamente."
+  variant="success"
+  onClosePress={() => console.log("Cerrar alerta")}
+/>
+
+<Alert
+  message="No pudimos procesar tu solicitud."
+  variant="error"
+  buttonLabel="Reintentar"
+  onButtonPress={() => console.log("Reintentar")}
+  onClosePress={() => console.log("Cerrar")}
+ />
+
+ ```
+
+ ## Empty State
+
+El EmptyState es un componente visual diseñado para mostrar pantallas vacías en escenarios donde no hay datos disponibles, ocurrió un estado inicial o se requiere una primera acción del usuario. Puede incluir una imagen, un título opcional, un mensaje descriptivo y un botón configurable. Mantiene una composición centrada y un diseño minimalista, usando automáticamente tamaños distintos para tablet gracias a isTablet.
+
+## 📦 Importación:
+```
+import { EmptyState } from "@dropi/react-native-design-system";
+```
+
+## ⚙️ Props:
+```
+| Prop            | Tipo                      | Descripción                                                          |
+| ---------------- | ------------------------ | -------------------------------------------------------------------- |
+| `imageSource`    | `string \| number`       | Imagen opcional (URL o require local) mostrada en la parte superior. |
+| `title`          | `string`                 | Título corto que introduce el estado vacío.                          |
+| `message`        | `string` (obligatorio)   | Texto principal explicando el estado.                                |
+| `buttonLabel`    | `string`                 | Texto del botón opcional.                                            |
+| `onButtonPress`  | `() => void`             | Callback del botón. Si existe, el botón se muestra.                  |
+```
+
+## 🧩 Ejemplos de uso:
+
+```
+<EmptyState
+  imageSource={require("../../assets/empty-orders.png")}
+  title="Sin pedidos todavía"
+  message="Cuando tengas pedidos activos aparecerán aquí."
+/>
+
+<EmptyState
+  imageSource="https://example.com/empty.png"
+  message="Aún no has guardado favoritos."
+  buttonLabel="Explorar productos"
+  onButtonPress={() => console.log("Ir a explorar")}
+/>
+```
+
+## 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:
+```
+import { TitleDescription } from "@dropi/react-native-design-system";
+```
+
+## ⚙️ Props:
+```
+| Prop           | Tipo                     | Descripción                                                                    |
+| -------------- | ------------------------ | ------------------------------------------------------------------------------ |
+| `title`        | `string`                 | Título principal de la opción.                                                 |
+| `label`        | `string`                 | Texto descriptivo o subtítulo opcional.                                        |
+| `imageSource`  | `string | number`        | Imagen opcional (URL o require local) que acompaña la opción.                  |
+| `isActive`     | `boolean`                | Indica si la opción está seleccionada. Cambia estilos y muestra el inner dot.  |
+| `isDisabled`   | `boolean`                | Desactiva la interacción y reduce opacidad.                                    |
+| `...rest`      | `TouchableOpacityProps`  | Props adicionales del contenedor presionable.                                  |
+```
+
+## 🧩 Ejemplos de uso:
+```
+<TitleDescription
+  title="Domicilio"
+  label="Entrega en tu dirección registrada"
+  imageSource={require("../../assets/location.png")}
+  isActive={selected === "home"}
+  onPress={() => setSelected("home")}
+/>
+
+<TitleDescription
+  title="Punto de recogida"
+  label="Elige una tienda cercana"
+  imageSource="https://example.com/pickup.png"
+  isActive={false}
+  isDisabled={true}
+/>
 ```

package/lib/molecules/EmptyState/EmptyState.js

@@ -8,6 +8,7 @@ var _reactNative = require("react-native");
 var _expoImage = require("expo-image");
 var _constants = require("../../constants");
 var _atoms = require("../../atoms");
+var _utils = require("../../utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const EmptyState = ({
   imageSource,
@@ -17,40 +18,21 @@ const EmptyState = ({
   onButtonPress
 }) => {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: {
-      paddingVertical: _constants.spacing['size-4']
-    },
+    style: styles.container,
     children: [imageSource && /*#__PURE__*/(0, _jsxRuntime.jsx)(_expoImage.Image, {
-      source: imageSource
-      //TODO: change hardcoded sizes
-      ,
-      style: {
-        width: 51,
-        height: 48,
-        alignSelf: 'center',
-        marginBottom: _constants.spacing['size-4']
-      },
+      source: imageSource,
+      style: styles.image,
       contentFit: "contain"
     }), title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.Body, {
       type: "l-medium",
-      style: {
-        color: _constants.colors['Gray-700'].light,
-        textAlign: 'center',
-        marginBottom: _constants.spacing['size-2']
-      },
+      style: styles.title,
       children: title
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.Body, {
       type: "m-regular",
-      style: {
-        color: _constants.colors['Gray-500'].light,
-        textAlign: 'center'
-      },
+      style: styles.message,
       children: message
     }), buttonLabel && onButtonPress && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: {
-        marginTop: 24,
-        alignItems: 'center'
-      },
+      style: styles.buttonContainer,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.DefaultButton, {
         label: buttonLabel,
         onPress: onButtonPress,
@@ -60,4 +42,28 @@ const EmptyState = ({
     })]
   });
 };
-exports.EmptyState = EmptyState;
+exports.EmptyState = EmptyState;
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    paddingVertical: _constants.spacing['size-4']
+  },
+  image: {
+    width: !_utils.isTablet ? 51 : 72,
+    height: !_utils.isTablet ? 48 : 68,
+    alignSelf: 'center',
+    marginBottom: _constants.spacing['size-4']
+  },
+  title: {
+    color: _constants.colors['Gray-700'].light,
+    textAlign: 'center',
+    marginBottom: _constants.spacing['size-2']
+  },
+  message: {
+    color: _constants.colors['Gray-500'].light,
+    textAlign: 'center'
+  },
+  buttonContainer: {
+    marginTop: _constants.spacing['size-5'],
+    alignItems: 'center'
+  }
+});

package/lib/molecules/RadioButtons/TitleDescription/TitleDescription.js

@@ -10,6 +10,16 @@ var _utils = require("../../../utils");
 var _constants = require("../../../constants");
 var _atoms = require("../../../atoms");
 var _jsxRuntime = require("react/jsx-runtime");
+const OptionSelector = ({
+  isActive
+}) => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: isActive ? styles.selectedOptionSelector : styles.optionSelector,
+    children: isActive && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.innerSelector
+    })
+  });
+};
 const TitleDescription = ({
   title,
   label,
@@ -18,50 +28,29 @@ const TitleDescription = ({
   isDisabled,
   ...rest
 }) => {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: isActive ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.selectedOption,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.selectedOptionSelector,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: styles.innerSelector
-        })
-      }), imageSource && /*#__PURE__*/(0, _jsxRuntime.jsx)(_expoImage.Image, {
-        source: imageSource,
-        style: styles.image
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.textContainer,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.Body, {
-          type: "m-regular",
-          style: styles.optionText,
-          children: title
-        }), label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.Body, {
-          type: "s-regular",
-          style: styles.optionText,
-          children: label
-        })]
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+    style: [isActive ? styles.selectedOption : styles.option, {
+      opacity: isDisabled ? 0.5 : 1
+    }],
+    disabled: isActive || isDisabled,
+    ...rest,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(OptionSelector, {
+      isActive: isActive
+    }), imageSource && /*#__PURE__*/(0, _jsxRuntime.jsx)(_expoImage.Image, {
+      source: imageSource,
+      style: styles.image
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.textContainer,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.Body, {
+        type: "m-regular",
+        style: styles.titleText,
+        children: title
+      }), label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.Body, {
+        type: "s-regular",
+        style: styles.optionText,
+        children: label
       })]
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-      style: styles.option,
-      ...rest,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.optionSelector
-      }), imageSource && /*#__PURE__*/(0, _jsxRuntime.jsx)(_expoImage.Image, {
-        source: imageSource,
-        style: styles.image
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.textContainer,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.Body, {
-          type: "m-regular",
-          style: styles.optionText,
-          children: title
-        }), label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.Body, {
-          type: "s-regular",
-          style: styles.optionText,
-          children: label
-        })]
-      })]
-    })
+    })]
   });
 };
 exports.TitleDescription = TitleDescription;
@@ -110,18 +99,18 @@ const styles = _reactNative.StyleSheet.create({
     backgroundColor: _constants.colors["Primary-500"].light
   },
   image: {
-    width: 32,
-    height: 32,
+    width: !_utils.isTablet ? 32 : 32 * 1.5,
+    height: !_utils.isTablet ? 32 : 32 * 1.5,
     marginRight: _constants.spacing['size-3'],
     borderRadius: _constants.radius.circle
   },
   textContainer: {
     flexDirection: 'column'
   },
-  optionText: {
+  titleText: {
     color: _constants.colors['Gray-700'].light
   },
-  labelTaxt: {
+  optionText: {
     color: _constants.colors['Gray-600'].light
   }
 });

package/package.json

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