@dropi/react-native-design-system 0.1.18 → 0.1.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +10 -20
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -33,12 +33,12 @@ yarn add dropi-lib-icons expo-image
|
|
|
33
33
|
## 2️⃣ Instalación del Design System
|
|
34
34
|
### Usando npm
|
|
35
35
|
```sh
|
|
36
|
-
npm install @
|
|
36
|
+
npm install @dropireact-native-design-system
|
|
37
37
|
```
|
|
38
38
|
|
|
39
39
|
### Usando yarn
|
|
40
40
|
```sh
|
|
41
|
-
yarn add @
|
|
41
|
+
yarn add @dropi/react-native-design-system
|
|
42
42
|
```
|
|
43
43
|
|
|
44
44
|
## 3️⃣ Configuración adicional según tu entorno
|
|
@@ -59,8 +59,7 @@ Instala manualmente si no lo tienes:
|
|
|
59
59
|
npm install expo-image
|
|
60
60
|
```
|
|
61
61
|
|
|
62
|
-
|
|
63
|
-
<summary style="font-size: 2em; font-weight: 700;">Tokens</summary>
|
|
62
|
+
# Tokens
|
|
64
63
|
|
|
65
64
|
## Radius
|
|
66
65
|
Tokens de radio de borde utilizados en todos los componentes para mantener una coherencia visual en las esquinas redondeadas.
|
|
@@ -164,14 +163,12 @@ De esta forma, el sistema puede alternar entre temas sin perder coherencia crom
|
|
|
164
163
|
| Info | Se usa para mostrar información contextual o mensajes neutrales. |
|
|
165
164
|
| Warning | Señala advertencias, riesgos o acciones pendientes.
|
|
166
165
|
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
<details>
|
|
170
|
-
<summary style="font-size: 2em; font-weight: 700;">Átomos</summary>
|
|
171
|
-
<details>
|
|
172
|
-
<summary style="font-size: 2em; font-weight: 700; margin-left: 1rem;">Textos</summary>
|
|
166
|
+
# Átomos
|
|
167
|
+
## Textos
|
|
173
168
|
|
|
174
169
|
## Body
|
|
170
|
+
Body es el componente tipográfico principal del sistema de diseño.
|
|
171
|
+
Está pensado para manejar el texto estándar de la aplicación, incluyendo descripciones, párrafos, mensajes y contenido general.
|
|
175
172
|
|
|
176
173
|
```Typescript
|
|
177
174
|
import { Body } from '@dropi/react-native-design-system';
|
|
@@ -252,10 +249,8 @@ import { Label } from '@dropi/react-native-design-system';
|
|
|
252
249
|
|
|
253
250
|
<Label type="s" style={{ color: '#999' }}>En proceso</Label>
|
|
254
251
|
```
|
|
255
|
-
</details>
|
|
256
252
|
|
|
257
|
-
|
|
258
|
-
<summary style="font-size: 2em; font-weight: 700; margin-left: 1rem;">Botones</summary>
|
|
253
|
+
## Botones
|
|
259
254
|
|
|
260
255
|
## Default Button:
|
|
261
256
|
El componente `DefaultButton` es el botón base del sistema de diseño. Está diseñado para ser **consistente, flexible y accesible**, permitiendo manejar variaciones visuales (`variant`), tamaños (`size`), e iconos opcionales antes o después del texto. Además, integra estados de desactivación y carga sin perder la coherencia visual.
|
|
@@ -370,11 +365,8 @@ import { TextButton } from "@dropi/react-native-design-system";
|
|
|
370
365
|
/>
|
|
371
366
|
|
|
372
367
|
```
|
|
373
|
-
</details>
|
|
374
|
-
</details>
|
|
375
368
|
|
|
376
|
-
|
|
377
|
-
<summary style="font-size: 2em; font-weight: 700;">Moléculas</summary>
|
|
369
|
+
## Moléculas
|
|
378
370
|
|
|
379
371
|
## 🚨 Alert
|
|
380
372
|
|
|
@@ -533,6 +525,4 @@ import { TitleDescription } from "@dropi/react-native-design-system";
|
|
|
533
525
|
</Body>
|
|
534
526
|
</Tooltip>
|
|
535
527
|
|
|
536
|
-
```
|
|
537
|
-
|
|
538
|
-
</details>
|
|
528
|
+
```
|