@dropi/react-native-design-system 0.2.21 → 0.2.23

package/README.md

@@ -34,10 +34,13 @@ El **Design System de Dropi** para aplicaciones **React Native**. Este paquete r
 
 - [🧪 Moléculas](#moléculas)
   - [Alert](#alert)
+  - [Bottom Sheet](#bottom-sheet)
+  - [Chip](#chip)
   - [Empty State](#empty-state)
   - [Radio Buttons](#radio-buttons)
     - [Title Description](#title-description)
   - [Search](#search)
+  - [Select](#select)
   - [Tooltip](#tooltip)
   - [Tags](#tags)
     - [Order Tag](#order-tag)
@@ -449,6 +452,224 @@ import { Alert } from "@dropi/react-native-design-system";
 
  ```
 
+## Chip
+
+El `Chip` es un componente compacto utilizado para mostrar **etiquetas, identificadores o categorías** de manera visual. Combina texto, íconos opcionales y un estilo diferenciado por variantes (`primary` / `tertiary`) para adaptarse a distintos contextos. Además, puede configurarse como **descartable** (`isDismissable`), mostrando un ícono de cierre que ejecuta una acción personalizada. Es ideal para mostrar información resumida como IDs de producto, estados, tags o filtros activos.
+
+### 📦 Importación:
+```Typescript
+import { Chip } from "@dropi/react-native-design-system";
+```
+
+### ⚙️ Props:
+| Prop           | Tipo                       | Descripción                                                                  |
+| :------------- | :------------------------- | :--------------------------------------------------------------------------- |
+| variant        | 'primary' \| 'tertiary'    | *(Opcional)* Define el estilo visual. Por defecto es `'tertiary'`.           |
+| preIcon        | IconName                   | *(Opcional)* Ícono que aparece antes del texto.                              |
+| label          | string                     | Texto que se muestra en el chip.                                             |
+| isDismissable  | boolean                    | *(Opcional)* Muestra un ícono de cierre (`cross-circle`) a la derecha.       |
+| onDismiss      | () => void                 | *(Opcional)* Callback ejecutado al presionar el ícono de cierre.             |
+
+### 🧩 Ejemplos de uso:
+```Typescript
+<Chip label="ID: 12345" variant="tertiary" />
+
+<Chip
+  label="VARIABLE"
+  variant="primary"
+/>
+
+<Chip
+  label="Promo activa"
+  variant="primary"
+  preIcon="tag-outline"
+/>
+
+<Chip
+  label="Filtro aplicado"
+  variant="tertiary"
+  isDismissable
+  onDismiss={() => console.log("Filtro eliminado")}
+/>
+```
+
+## Bottom Sheet
+
+El `BottomSheetComponent` es un modal que se desliza desde la parte inferior de la pantalla, diseñado para mostrar contenido contextual sin interrumpir completamente la experiencia del usuario. Incluye un **backdrop semitransparente**, un **header con título opcional y botón de cierre**, soporte para **footer personalizado** y **snap points configurables** para controlar las alturas disponibles del sheet. El componente expone métodos imperativos (`present`, `close`, `dismiss`) mediante `forwardRef`, permitiendo un control programático completo desde el componente padre. Internamente usa `@gorhom/bottom-sheet` y mantiene la coherencia visual con los tokens del design system.
+
+### 📦 Importación:
+```Typescript
+import { BottomSheetComponent, BottomSheetComponentRef } from "@dropi/react-native-design-system";
+```
+
+### ⚙️ Props:
+| Prop         | Tipo           | Descripción                                                                    |
+| :----------- | :------------- | :----------------------------------------------------------------------------- |
+| children     | ReactNode      | Contenido principal que se muestra dentro del bottom sheet.                    |
+| footer       | ReactNode      | *(Opcional)* Contenido del footer fijo en la parte inferior del sheet.         |
+| title        | string         | *(Opcional)* Título mostrado en el header. Si no se provee, solo se muestra el botón de cierre. |
+| snapPoints   | string[]       | *(Opcional)* Array de alturas disponibles (ej: `['50%', '90%']`). Por defecto: `['70%', '90%']`. |
+| onDismiss    | () => void     | *(Opcional)* Callback ejecutado cuando el sheet se cierra completamente.       |
+| ref          | BottomSheetComponentRef | Referencia para controlar el sheet imperativamente (`present`, `close`, `dismiss`). |
+
+### 🔧 Métodos expuestos (via ref):
+| Método      | Descripción                                                                    |
+| :---------- | :----------------------------------------------------------------------------- |
+| present()   | Abre el bottom sheet desde la parte inferior.                                  |
+| close()     | Cierra el sheet de forma animada.                                              |
+| dismiss()   | Descarta el sheet inmediatamente.                                              |
+
+### 🧩 Ejemplos de uso:
+```Typescript
+import { useRef } from 'react';
+import { Button, View } from 'react-native';
+import { BottomSheetComponent, BottomSheetComponentRef, Body, DefaultButton } from '@dropi/react-native-design-system';
+
+const MyScreen = () => {
+  const bottomSheetRef = useRef<BottomSheetComponentRef>(null);
+
+  return (
+    <View>
+      <Button 
+        title="Abrir opciones" 
+        onPress={() => bottomSheetRef.current?.present()} 
+      />
+
+      <BottomSheetComponent
+        ref={bottomSheetRef}
+        title="Opciones de envío"
+        snapPoints={['50%', '80%']}
+        onDismiss={() => console.log('Sheet cerrado')}
+      >
+        <View style={{ padding: 20 }}>
+          <Body type="m-regular">Selecciona tu método de envío preferido</Body>
+        </View>
+      </BottomSheetComponent>
+    </View>
+  );
+};
+
+// Con footer personalizado
+<BottomSheetComponent
+  ref={sheetRef}
+  title="Confirmar pedido"
+  footer={
+    <DefaultButton
+      label="Confirmar"
+      variant="primary"
+      size="normal"
+      onPress={handleConfirm}
+    />
+  }
+>
+  <Body type="m-regular">Revisa los detalles antes de continuar</Body>
+</BottomSheetComponent>
+
+// Sin título (solo botón de cierre)
+<BottomSheetComponent
+  ref={sheetRef}
+  snapPoints={['40%']}
+>
+  <Body type="m-regular">Contenido simple sin título</Body>
+</BottomSheetComponent>
+```
+
+## Select
+
+El `Select` es un componente de selección que muestra un campo tipo dropdown con un **bottom sheet modal** para elegir entre múltiples opciones. Incluye soporte para **label**, **placeholder**, **helper text**, **estados de error** y **validación con bordes dinámicos**. El usuario puede explorar las opciones en un modal con scroll, seleccionar una de manera temporal (draft) y confirmar el cambio presionando el botón "Guardar" del footer, que solo se habilita si hubo cambios. Internamente usa `TitleDescription` para renderizar cada opción y `BottomSheetComponent` para la interfaz modal.
+
+### 📦 Importación:
+```Typescript
+import { Select, SelectOption } from "@dropi/react-native-design-system";
+```
+
+### ⚙️ Props:
+| Prop          | Tipo                  | Descripción                                                                      |
+| :------------ | :-------------------- | :------------------------------------------------------------------------------- |
+| options       | SelectOption[]        | Array de opciones disponibles. Cada una tiene `label` y `value`.                 |
+| value         | SelectOption \| null  | *(Opcional)* Opción actualmente seleccionada.                                    |
+| onChange      | (option: SelectOption) => void | Callback ejecutado cuando el usuario confirma una nueva selección.      |
+| label         | string                | *(Opcional)* Etiqueta que aparece sobre el campo.                                |
+| placeholder   | string                | *(Opcional)* Texto mostrado cuando no hay selección. Por defecto: `'Seleccionar'`. |
+| helper        | string                | *(Opcional)* Texto de ayuda bajo el campo (no se muestra si hay error).          |
+| hasError      | boolean               | *(Opcional)* Indica si el campo tiene un error. Cambia el color del borde.       |
+| errorMessage  | string                | *(Opcional)* Mensaje de error mostrado con ícono.                                |
+| title         | string                | *(Opcional)* Título del bottom sheet. Si no se provee, usa `label` o "Seleccionar". |
+| disabled      | boolean               | *(Opcional)* Desactiva el campo y reduce la opacidad.                            |
+
+### 🔧 Tipo SelectOption:
+```Typescript
+type SelectOption = {
+  label: string
+  value: string | number
+}
+```
+
+### 🧩 Ejemplos de uso:
+```Typescript
+import { useState } from 'react';
+import { Select, SelectOption } from '@dropi/react-native-design-system';
+
+const MyForm = () => {
+  const [country, setCountry] = useState<SelectOption | null>(null);
+
+  const countries: SelectOption[] = [
+    { label: 'Colombia', value: 'CO' },
+    { label: 'México', value: 'MX' },
+    { label: 'Argentina', value: 'AR' },
+  ];
+
+  return (
+    <Select
+      label="País"
+      placeholder="Selecciona tu país"
+      options={countries}
+      value={country}
+      onChange={setCountry}
+    />
+  );
+};
+
+// Con helper text
+<Select
+  label="Método de pago"
+  placeholder="Selecciona un método"
+  options={paymentMethods}
+  value={selectedMethod}
+  onChange={setSelectedMethod}
+  helper="Puedes cambiar esto más tarde"
+/>
+
+// Con estado de error
+<Select
+  label="Ciudad"
+  placeholder="Selecciona tu ciudad"
+  options={cities}
+  value={selectedCity}
+  onChange={setSelectedCity}
+  hasError={!selectedCity}
+  errorMessage="Debes seleccionar una ciudad"
+/>
+
+// Con título personalizado en el modal
+<Select
+  label="Categoría"
+  title="Elige una categoría de producto"
+  options={categories}
+  value={category}
+  onChange={setCategory}
+/>
+
+// Deshabilitado
+<Select
+  label="Región"
+  options={regions}
+  value={region}
+  onChange={setRegion}
+  disabled={true}
+/>
+```
+
 ## 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.

package/package.json

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