@onpe/ui 1.0.13 → 1.0.15
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 +433 -91
- package/dist/index.css +1 -1
- package/dist/index.esm.css +1 -1
- package/package.json +114 -114
package/README.md
CHANGED
|
@@ -1,91 +1,433 @@
|
|
|
1
|
-
#
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
```
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
- `
|
|
57
|
-
- `
|
|
58
|
-
- `
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
- **
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
1
|
+
# 🗳️ ONPE UI
|
|
2
|
+
|
|
3
|
+
Librería completa de componentes de interfaz de usuario para aplicaciones de la Oficina Nacional de Procesos Electorales (ONPE) del Perú.
|
|
4
|
+
|
|
5
|
+
## ✨ Características
|
|
6
|
+
|
|
7
|
+
- 🎨 **Colores oficiales de ONPE** - Paleta de colores institucional
|
|
8
|
+
- ⚡ **Tailwind CSS v4** - Framework CSS moderno y eficiente
|
|
9
|
+
- 🔧 **TypeScript** - Tipado estático para mejor desarrollo
|
|
10
|
+
- 📱 **Responsive** - Diseño adaptable a todos los dispositivos
|
|
11
|
+
- 🎯 **Accesible** - Componentes que siguen estándares de accesibilidad
|
|
12
|
+
- 📦 **Tree-shakable** - Solo importa lo que necesitas
|
|
13
|
+
|
|
14
|
+
## 🚀 Instalación
|
|
15
|
+
|
|
16
|
+
```bash
|
|
17
|
+
npm install @onpe/ui
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
## ⚠️ Importante sobre TailwindCSS
|
|
21
|
+
|
|
22
|
+
Esta librería **NO requiere** que instales TailwindCSS en tu proyecto. Los estilos ya están compilados y optimizados. Solo necesitas importar los estilos:
|
|
23
|
+
|
|
24
|
+
```css
|
|
25
|
+
@import "@onpe/ui/styles";
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
Si quieres extender los estilos con tus propias clases de TailwindCSS, entonces sí necesitarías instalar TailwindCSS en tu proyecto.
|
|
29
|
+
|
|
30
|
+
## 📖 Uso Básico
|
|
31
|
+
|
|
32
|
+
### Importar estilos
|
|
33
|
+
|
|
34
|
+
```css
|
|
35
|
+
@import "@onpe/ui/styles";
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
### Usar componentes
|
|
39
|
+
|
|
40
|
+
```tsx
|
|
41
|
+
import { Button } from '@onpe/ui/components';
|
|
42
|
+
|
|
43
|
+
function App() {
|
|
44
|
+
return (
|
|
45
|
+
<div>
|
|
46
|
+
<Button color="primary" title="Votar Ahora" size="normal" />
|
|
47
|
+
<Button color="skyblue" title="Ver Resultados" size="large" />
|
|
48
|
+
</div>
|
|
49
|
+
);
|
|
50
|
+
}
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
## 🎨 Paleta de Colores ONPE
|
|
54
|
+
|
|
55
|
+
### Colores Principales
|
|
56
|
+
- **Azul Principal**: `#003770` - Color institucional principal
|
|
57
|
+
- **Sky Blue**: `#0073cf` - Color secundario
|
|
58
|
+
- **Sky Blue Light**: `#69b2e8` - Color claro
|
|
59
|
+
- **Light Sky Blue**: `#aaeff6` - Color muy claro
|
|
60
|
+
|
|
61
|
+
### Colores de Acento
|
|
62
|
+
- **Amarillo**: `#ffb81c` - Para alertas y destacados
|
|
63
|
+
- **Verde**: `#76bd43` - Para éxito y confirmaciones
|
|
64
|
+
- **Rojo**: `#e3002b` - Para errores y advertencias
|
|
65
|
+
|
|
66
|
+
### Escala de Grises
|
|
67
|
+
- **Dark Gray**: `#4f4f4f` - Texto principal
|
|
68
|
+
- **Gray**: `#bcbcbc` - Texto secundario
|
|
69
|
+
- **Gray Light**: `#bdbdbd` - Texto terciario
|
|
70
|
+
- **Gray Extra Light**: `#f2f2f2` - Fondos suaves
|
|
71
|
+
|
|
72
|
+
## 🧩 Componentes Disponibles
|
|
73
|
+
|
|
74
|
+
### Button
|
|
75
|
+
|
|
76
|
+
Botón versátil con múltiples colores y tamaños.
|
|
77
|
+
|
|
78
|
+
Botón versátil con múltiples variantes y tamaños.
|
|
79
|
+
|
|
80
|
+
```tsx
|
|
81
|
+
import { Button } from '@onpe/ui/components';
|
|
82
|
+
|
|
83
|
+
// Colores disponibles
|
|
84
|
+
<Button color="primary" title="Primario" />
|
|
85
|
+
<Button color="blue" title="Azul" />
|
|
86
|
+
<Button color="skyblue" title="Sky Blue" />
|
|
87
|
+
<Button color="green" title="Verde" />
|
|
88
|
+
<Button color="yellow" title="Amarillo" />
|
|
89
|
+
<Button color="red" title="Rojo" />
|
|
90
|
+
|
|
91
|
+
// Tamaños
|
|
92
|
+
<Button color="primary" title="Pequeño" size="small" />
|
|
93
|
+
<Button color="primary" title="Mediano" size="normal" />
|
|
94
|
+
<Button color="primary" title="Grande" size="large" />
|
|
95
|
+
|
|
96
|
+
// Estados
|
|
97
|
+
<Button color="primary" title="Deshabilitado" disabled />
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
### Props del Button
|
|
101
|
+
|
|
102
|
+
| Prop | Tipo | Default | Descripción |
|
|
103
|
+
|------|------|---------|-------------|
|
|
104
|
+
| `color` | `'primary' \| 'blue' \| 'skyblue' \| 'skyblue-light' \| 'yellow' \| 'light-skyblue' \| 'gray' \| 'gray-light' \| 'gray-extra-light' \| 'red' \| 'dark-gray' \| 'green' \| 'yellow-light'` | `'primary'` | Color del botón |
|
|
105
|
+
| `title` | `string` | - | Texto del botón (requerido) |
|
|
106
|
+
| `size` | `'small' \| 'normal' \| 'large'` | `'normal'` | Tamaño del botón |
|
|
107
|
+
| `disabled` | `boolean` | `false` | Estado deshabilitado |
|
|
108
|
+
| `className` | `string` | - | Clases CSS adicionales |
|
|
109
|
+
|
|
110
|
+
### Modal
|
|
111
|
+
|
|
112
|
+
Componente modal para mostrar contenido en overlay.
|
|
113
|
+
|
|
114
|
+
```tsx
|
|
115
|
+
import { Modal } from '@onpe/ui/components';
|
|
116
|
+
|
|
117
|
+
function App() {
|
|
118
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
119
|
+
|
|
120
|
+
return (
|
|
121
|
+
<Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>
|
|
122
|
+
<h2>Contenido del Modal</h2>
|
|
123
|
+
<p>Este es el contenido del modal.</p>
|
|
124
|
+
</Modal>
|
|
125
|
+
);
|
|
126
|
+
}
|
|
127
|
+
```
|
|
128
|
+
|
|
129
|
+
### Overlay
|
|
130
|
+
|
|
131
|
+
Componente overlay para superponer contenido.
|
|
132
|
+
|
|
133
|
+
```tsx
|
|
134
|
+
import { Overlay } from '@onpe/ui/components';
|
|
135
|
+
|
|
136
|
+
function App() {
|
|
137
|
+
return (
|
|
138
|
+
<Overlay>
|
|
139
|
+
<div>Contenido superpuesto</div>
|
|
140
|
+
</Overlay>
|
|
141
|
+
);
|
|
142
|
+
}
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
### Portal
|
|
146
|
+
|
|
147
|
+
Componente portal para renderizar fuera del DOM padre.
|
|
148
|
+
|
|
149
|
+
```tsx
|
|
150
|
+
import { Portal } from '@onpe/ui/components';
|
|
151
|
+
|
|
152
|
+
function App() {
|
|
153
|
+
return (
|
|
154
|
+
<Portal>
|
|
155
|
+
<div>Contenido renderizado en portal</div>
|
|
156
|
+
</Portal>
|
|
157
|
+
);
|
|
158
|
+
}
|
|
159
|
+
```
|
|
160
|
+
|
|
161
|
+
### Show
|
|
162
|
+
|
|
163
|
+
Componente condicional para mostrar/ocultar contenido.
|
|
164
|
+
|
|
165
|
+
```tsx
|
|
166
|
+
import { Show } from '@onpe/ui/components';
|
|
167
|
+
|
|
168
|
+
function App() {
|
|
169
|
+
const [visible, setVisible] = useState(true);
|
|
170
|
+
|
|
171
|
+
return (
|
|
172
|
+
<Show when={visible}>
|
|
173
|
+
<div>Contenido visible</div>
|
|
174
|
+
</Show>
|
|
175
|
+
);
|
|
176
|
+
}
|
|
177
|
+
```
|
|
178
|
+
|
|
179
|
+
### ModalConfirm
|
|
180
|
+
|
|
181
|
+
Modal de confirmación para acciones importantes.
|
|
182
|
+
|
|
183
|
+
```tsx
|
|
184
|
+
import { ModalConfirm } from '@onpe/ui/components';
|
|
185
|
+
|
|
186
|
+
function App() {
|
|
187
|
+
const [showConfirm, setShowConfirm] = useState(false);
|
|
188
|
+
|
|
189
|
+
return (
|
|
190
|
+
<ModalConfirm
|
|
191
|
+
isOpen={showConfirm}
|
|
192
|
+
onClose={() => setShowConfirm(false)}
|
|
193
|
+
onConfirm={() => {
|
|
194
|
+
// Acción a confirmar
|
|
195
|
+
setShowConfirm(false);
|
|
196
|
+
}}
|
|
197
|
+
title="Confirmar acción"
|
|
198
|
+
message="¿Estás seguro de realizar esta acción?"
|
|
199
|
+
/>
|
|
200
|
+
);
|
|
201
|
+
}
|
|
202
|
+
```
|
|
203
|
+
|
|
204
|
+
### ModalLoading
|
|
205
|
+
|
|
206
|
+
Modal de carga para mostrar estados de procesamiento.
|
|
207
|
+
|
|
208
|
+
```tsx
|
|
209
|
+
import { ModalLoading } from '@onpe/ui/components';
|
|
210
|
+
|
|
211
|
+
function App() {
|
|
212
|
+
const [loading, setLoading] = useState(false);
|
|
213
|
+
|
|
214
|
+
return (
|
|
215
|
+
<ModalLoading
|
|
216
|
+
isOpen={loading}
|
|
217
|
+
message="Procesando información..."
|
|
218
|
+
/>
|
|
219
|
+
);
|
|
220
|
+
}
|
|
221
|
+
```
|
|
222
|
+
|
|
223
|
+
## 🎯 Hooks Disponibles
|
|
224
|
+
|
|
225
|
+
### useDebounce
|
|
226
|
+
|
|
227
|
+
Hook para retrasar la ejecución de funciones.
|
|
228
|
+
|
|
229
|
+
```tsx
|
|
230
|
+
import { useDebounce } from '@onpe/ui/hooks';
|
|
231
|
+
|
|
232
|
+
function SearchComponent() {
|
|
233
|
+
const [query, setQuery] = useState('');
|
|
234
|
+
const debouncedQuery = useDebounce(query, 500);
|
|
235
|
+
|
|
236
|
+
useEffect(() => {
|
|
237
|
+
// Buscar solo después de 500ms sin cambios
|
|
238
|
+
searchAPI(debouncedQuery);
|
|
239
|
+
}, [debouncedQuery]);
|
|
240
|
+
|
|
241
|
+
return (
|
|
242
|
+
<input
|
|
243
|
+
value={query}
|
|
244
|
+
onChange={(e) => setQuery(e.target.value)}
|
|
245
|
+
placeholder="Buscar..."
|
|
246
|
+
/>
|
|
247
|
+
);
|
|
248
|
+
}
|
|
249
|
+
```
|
|
250
|
+
|
|
251
|
+
### useLocalStorage
|
|
252
|
+
|
|
253
|
+
Hook para manejar localStorage de forma reactiva.
|
|
254
|
+
|
|
255
|
+
```tsx
|
|
256
|
+
import { useLocalStorage } from '@onpe/ui/hooks';
|
|
257
|
+
|
|
258
|
+
function SettingsComponent() {
|
|
259
|
+
const [theme, setTheme] = useLocalStorage('theme', 'light');
|
|
260
|
+
|
|
261
|
+
return (
|
|
262
|
+
<select value={theme} onChange={(e) => setTheme(e.target.value)}>
|
|
263
|
+
<option value="light">Claro</option>
|
|
264
|
+
<option value="dark">Oscuro</option>
|
|
265
|
+
</select>
|
|
266
|
+
);
|
|
267
|
+
}
|
|
268
|
+
```
|
|
269
|
+
|
|
270
|
+
## 🎨 Iconos Disponibles
|
|
271
|
+
|
|
272
|
+
La librería incluye una colección completa de iconos organizados por categorías:
|
|
273
|
+
|
|
274
|
+
### Iconos de Acciones
|
|
275
|
+
- Iconos para acciones comunes (editar, eliminar, guardar, etc.)
|
|
276
|
+
|
|
277
|
+
### Iconos de Navegadores
|
|
278
|
+
- Iconos de navegadores web (Chrome, Firefox, Safari, Edge, etc.)
|
|
279
|
+
|
|
280
|
+
### Iconos de Sistemas Operativos
|
|
281
|
+
- Iconos de sistemas operativos (Windows, macOS, Linux, etc.)
|
|
282
|
+
|
|
283
|
+
### Iconos ONPE
|
|
284
|
+
- Iconos específicos de la institución ONPE
|
|
285
|
+
|
|
286
|
+
### Logos
|
|
287
|
+
- Logotipos oficiales y marcas
|
|
288
|
+
|
|
289
|
+
```tsx
|
|
290
|
+
import {
|
|
291
|
+
IconChrome,
|
|
292
|
+
IconFirefox,
|
|
293
|
+
IconSafari,
|
|
294
|
+
IconWindows,
|
|
295
|
+
IconMacOS
|
|
296
|
+
} from '@onpe/ui/icons';
|
|
297
|
+
|
|
298
|
+
function App() {
|
|
299
|
+
return (
|
|
300
|
+
<div>
|
|
301
|
+
<IconChrome className="w-6 h-6" />
|
|
302
|
+
<IconFirefox className="w-6 h-6" />
|
|
303
|
+
<IconSafari className="w-6 h-6" />
|
|
304
|
+
</div>
|
|
305
|
+
);
|
|
306
|
+
}
|
|
307
|
+
```
|
|
308
|
+
|
|
309
|
+
## 🛠️ Utilidades
|
|
310
|
+
|
|
311
|
+
### formatDate
|
|
312
|
+
|
|
313
|
+
Función para formatear fechas según estándares peruanos.
|
|
314
|
+
|
|
315
|
+
```tsx
|
|
316
|
+
import { formatDate } from '@onpe/ui/utils';
|
|
317
|
+
|
|
318
|
+
const fecha = new Date('2024-04-14');
|
|
319
|
+
const fechaFormateada = formatDate(fecha, 'dd/mm/yyyy');
|
|
320
|
+
console.log(fechaFormateada); // "14/04/2024"
|
|
321
|
+
```
|
|
322
|
+
|
|
323
|
+
### validateEmail
|
|
324
|
+
|
|
325
|
+
Función para validar direcciones de correo electrónico.
|
|
326
|
+
|
|
327
|
+
```tsx
|
|
328
|
+
import { validateEmail } from '@onpe/ui/utils';
|
|
329
|
+
|
|
330
|
+
const email = 'usuario@onpe.gob.pe';
|
|
331
|
+
const esValido = validateEmail(email);
|
|
332
|
+
console.log(esValido); // true
|
|
333
|
+
```
|
|
334
|
+
|
|
335
|
+
## 📱 Breakpoints Responsive
|
|
336
|
+
|
|
337
|
+
La librería incluye breakpoints personalizados para ONPE:
|
|
338
|
+
|
|
339
|
+
- `sm`: 640px
|
|
340
|
+
- `md`: 768px
|
|
341
|
+
- `lg`: 1024px
|
|
342
|
+
- `2lg`: 1200px
|
|
343
|
+
- `xl`: 1280px
|
|
344
|
+
- `2xl`: 1536px
|
|
345
|
+
- `3xl`: 1650px
|
|
346
|
+
|
|
347
|
+
```css
|
|
348
|
+
/* Ejemplo de uso */
|
|
349
|
+
@media (min-width: 1200px) {
|
|
350
|
+
.container {
|
|
351
|
+
max-width: 1200px;
|
|
352
|
+
}
|
|
353
|
+
}
|
|
354
|
+
```
|
|
355
|
+
|
|
356
|
+
## 🎨 Clases de Utilidad
|
|
357
|
+
|
|
358
|
+
### Colores de Texto
|
|
359
|
+
```css
|
|
360
|
+
.text-onpe-ui-blue /* Azul principal */
|
|
361
|
+
.text-onpe-ui-skyblue /* Sky blue */
|
|
362
|
+
.text-onpe-ui-yellow /* Amarillo */
|
|
363
|
+
.text-onpe-ui-green /* Verde */
|
|
364
|
+
.text-onpe-ui-red /* Rojo */
|
|
365
|
+
.text-onpe-ui-gray /* Gris */
|
|
366
|
+
.text-onpe-ui-dark-gray /* Gris oscuro */
|
|
367
|
+
```
|
|
368
|
+
|
|
369
|
+
### Colores de Fondo
|
|
370
|
+
```css
|
|
371
|
+
.bg-onpe-ui-blue /* Fondo azul */
|
|
372
|
+
.bg-onpe-ui-skyblue /* Fondo sky blue */
|
|
373
|
+
.bg-onpe-ui-yellow /* Fondo amarillo */
|
|
374
|
+
.bg-onpe-ui-green /* Fondo verde */
|
|
375
|
+
.bg-onpe-ui-red /* Fondo rojo */
|
|
376
|
+
.bg-onpe-ui-gray /* Fondo gris */
|
|
377
|
+
.bg-onpe-ui-gray-light /* Fondo gris claro */
|
|
378
|
+
.bg-onpe-ui-gray-extra-light /* Fondo gris muy claro */
|
|
379
|
+
```
|
|
380
|
+
|
|
381
|
+
## 📋 Versiones
|
|
382
|
+
|
|
383
|
+
- **v1.0.4** - Versión actual
|
|
384
|
+
- Compatible con React 16.8+
|
|
385
|
+
- TailwindCSS v4
|
|
386
|
+
- TypeScript 5.3+
|
|
387
|
+
|
|
388
|
+
## 🔧 Desarrollo
|
|
389
|
+
|
|
390
|
+
### Requisitos
|
|
391
|
+
- Node.js 18+
|
|
392
|
+
- npm 9+
|
|
393
|
+
|
|
394
|
+
### Instalación para desarrollo
|
|
395
|
+
```bash
|
|
396
|
+
git clone https://github.com/ricardosv46/onpe-ui.git
|
|
397
|
+
cd onpe-ui
|
|
398
|
+
npm install
|
|
399
|
+
```
|
|
400
|
+
|
|
401
|
+
### Scripts disponibles
|
|
402
|
+
```bash
|
|
403
|
+
npm run build # Construir para producción
|
|
404
|
+
npm run dev # Desarrollo con watch mode
|
|
405
|
+
npm run storybook # Ver componentes en Storybook
|
|
406
|
+
npm run lint # Verificar código
|
|
407
|
+
npm run lint:fix # Corregir problemas de linting
|
|
408
|
+
npm run type-check # Verificar tipos TypeScript
|
|
409
|
+
```
|
|
410
|
+
|
|
411
|
+
## 📄 Licencia
|
|
412
|
+
|
|
413
|
+
MIT © ONPE - Oficina Nacional de Procesos Electorales
|
|
414
|
+
|
|
415
|
+
## 🤝 Contribuir
|
|
416
|
+
|
|
417
|
+
1. Fork el proyecto
|
|
418
|
+
2. Crea una rama para tu feature (`git checkout -b feature/nueva-funcionalidad`)
|
|
419
|
+
3. Commit tus cambios (`git commit -m 'Agregar nueva funcionalidad'`)
|
|
420
|
+
4. Push a la rama (`git push origin feature/nueva-funcionalidad`)
|
|
421
|
+
5. Abre un Pull Request
|
|
422
|
+
|
|
423
|
+
## 📞 Soporte
|
|
424
|
+
|
|
425
|
+
- 📧 Email: desarrollo@onpe.gob.pe
|
|
426
|
+
- 🐛 Issues: [GitHub Issues](https://github.com/ricardosv46/onpe-ui/issues)
|
|
427
|
+
- 📖 Documentación: [Storybook](https://onpe-ui-components.netlify.app)
|
|
428
|
+
- 🔗 Repositorio: [GitHub](https://github.com/ricardosv46/onpe-ui)
|
|
429
|
+
- 📦 NPM: [@onpe/ui](https://www.npmjs.com/package/@onpe/ui)
|
|
430
|
+
|
|
431
|
+
---
|
|
432
|
+
|
|
433
|
+
**Desarrollado con ❤️ para la democracia peruana** 🇵🇪
|
package/dist/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--
|
|
1
|
+
:root{--blue:#003770;--skyblue:#0073cf;--skyblue-light:#69b2e8;--yellow:#ffb81c;--light-skyblue:#aaeff6;--gray:#bcbcbc;--gray-light:#bdbdbd;--gray-extra-light:#f2f2f2;--red:#e3002b;--dark-gray:#4f4f4f;--green:#76bd43;--yellow-light:#fff1d2}@theme{--color-onpe-ui-blue:var(--blue);--color-onpe-ui-skyblue:var(--skyblue);--color-onpe-ui-skyblue-light:var(--skyblue-light);--color-onpe-ui-yellow:var(--yellow);--color-onpe-ui-light-skyblue:var(--light-skyblue);--color-onpe-ui-gray:var(--gray);--color-onpe-ui-gray-light:var(--gray-light);--color-onpe-ui-gray-extra-light:var(--gray-extra-light);--color-onpe-ui-red:var(--red);--color-onpe-ui-dark-gray:var(--dark-gray);--color-onpe-ui-green:var(--green);--color-onpe-ui-yellow-light:var(--yellow-light)}button{cursor:pointer}@keyframes fastBlink{0%{opacity:1}25%{opacity:.8}50%{opacity:.4}75%{opacity:.8}to{opacity:1}}.fast-blink{animation:fastBlink .8s ease-in-out infinite}.flex{display:flex}.grid{display:grid}.hidden{display:none}.block{display:block}.inline-flex{display:inline-flex}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.place-items-center{place-items:center}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.static{position:static}.top-0{top:0}.top-4{top:1rem}.right-4{right:1rem}.bottom-2{bottom:.5rem}.left-0{left:0}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-50{z-index:50}.z-100{z-index:100}.-z-10{z-index:-10}.w-full{width:100%}.w-16{width:4rem}.w-\[10px\]{width:10px}.w-\[32px\]{width:32px}.w-\[98vw\]{width:98vw}.h-screen{height:100vh}.h-10{height:2.5rem}.h-12{height:3rem}.h-14{height:3.5rem}.h-\[10px\]{height:10px}.h-\[32px\]{height:32px}.max-w-\[95vw\]{max-width:95vw}.max-w-\[200px\]{max-width:200px}.max-w-\[680px\]{max-width:680px}.max-w-full{max-width:100%}.min-w-\[200px\]{min-width:200px}.min-w-\[320px\]{min-width:320px}.max-h-\[90vh\]{max-height:90vh}.p-\[7px\]{padding:7px}.px-1{padding-left:.25rem;padding-right:.25rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-8{padding-left:2rem;padding-right:2rem}.px-32{padding-left:8rem;padding-right:8rem}.py-5{padding-bottom:1.25rem;padding-top:1.25rem}.py-10{padding-bottom:2.5rem;padding-top:2.5rem}.py-16{padding-bottom:4rem;padding-top:4rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-7{margin-top:1.75rem}.mt-10{margin-top:2.5rem}.mt-11{margin-top:2.75rem}.mt-20{margin-top:5rem}.mt-auto{margin-top:auto}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mx-auto{margin-left:auto;margin-right:auto}.-ml-\[16px\]{margin-left:-16px}.-mr-\[16px\]{margin-right:-16px}.-mx-4{margin-left:-1rem;margin-right:-1rem}.-bottom-2{bottom:-.5rem}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.rounded-full{border-radius:9999px}.border{border-width:1px}.border-2{border-width:2px}.border-b-2{border-bottom-width:2px}.border-b-\[9px\]{border-bottom-width:9px}.text-center{text-align:center}.text-sm{font-size:.875rem;line-height:1.25rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem}.text-lg,.text-xl{line-height:1.75rem}.text-xl{font-size:1.25rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-\[28px\]{font-size:28px}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.text-white{color:#fff}.opacity-0{opacity:0}.opacity-100{opacity:1}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}.cursor-pointer{cursor:pointer}.cursor-not-allowed{cursor:not-allowed}.space-y-4>*+*{margin-top:1rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.bg-onpe-ui-blue{background-color:var(--color-onpe-ui-blue)}.bg-onpe-ui-skyblue{background-color:var(--color-onpe-ui-skyblue)}.bg-onpe-ui-skyblue-light{background-color:var(--color-onpe-ui-skyblue-light)}.bg-onpe-ui-yellow{background-color:var(--color-onpe-ui-yellow)}.bg-onpe-ui-light-skyblue{background-color:var(--color-onpe-ui-light-skyblue)}.bg-onpe-ui-gray{background-color:var(--color-onpe-ui-gray)}.bg-onpe-ui-gray-light{background-color:var(--color-onpe-ui-gray-light)}.bg-onpe-ui-gray-extra-light{background-color:var(--color-onpe-ui-gray-extra-light)}.bg-onpe-ui-red{background-color:var(--color-onpe-ui-red)}.bg-onpe-ui-dark-gray{background-color:var(--color-onpe-ui-dark-gray)}.bg-onpe-ui-green{background-color:var(--color-onpe-ui-green)}.bg-onpe-ui-yellow-light{background-color:var(--color-onpe-ui-yellow-light)}.text-onpe-ui-blue{color:var(--color-onpe-ui-blue)}.text-onpe-ui-skyblue{color:var(--color-onpe-ui-skyblue)}.text-onpe-ui-skyblue-light{color:var(--color-onpe-ui-skyblue-light)}.text-onpe-ui-yellow{color:var(--color-onpe-ui-yellow)}.text-onpe-ui-light-skyblue{color:var(--color-onpe-ui-light-skyblue)}.text-onpe-ui-gray{color:var(--color-onpe-ui-gray)}.text-onpe-ui-gray-light{color:var(--color-onpe-ui-gray-light)}.text-onpe-ui-gray-extra-light{color:var(--color-onpe-ui-gray-extra-light)}.text-onpe-ui-red{color:var(--color-onpe-ui-red)}.text-onpe-ui-dark-gray{color:var(--color-onpe-ui-dark-gray)}.text-onpe-ui-green{color:var(--color-onpe-ui-green)}.text-onpe-ui-yellow-light{color:var(--color-onpe-ui-yellow-light)}.hover\:bg-onpe-ui-blue:hover{background-color:var(--color-onpe-ui-blue)}.hover\:bg-onpe-ui-skyblue:hover{background-color:var(--color-onpe-ui-skyblue)}.hover\:bg-onpe-ui-skyblue-light:hover{background-color:var(--color-onpe-ui-skyblue-light)}.hover\:bg-onpe-ui-yellow:hover{background-color:var(--color-onpe-ui-yellow)}.hover\:bg-onpe-ui-light-skyblue:hover{background-color:var(--color-onpe-ui-light-skyblue)}.hover\:bg-onpe-ui-gray:hover{background-color:var(--color-onpe-ui-gray)}.hover\:bg-onpe-ui-gray-light:hover{background-color:var(--color-onpe-ui-gray-light)}.hover\:bg-onpe-ui-gray-extra-light:hover{background-color:var(--color-onpe-ui-gray-extra-light)}.hover\:bg-onpe-ui-red:hover{background-color:var(--color-onpe-ui-red)}.hover\:bg-onpe-ui-dark-gray:hover{background-color:var(--color-onpe-ui-dark-gray)}.hover\:bg-onpe-ui-green:hover{background-color:var(--color-onpe-ui-green)}.hover\:bg-onpe-ui-yellow-light:hover{background-color:var(--color-onpe-ui-yellow-light)}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:bg-onpe-ui-gray:disabled{background-color:var(--color-onpe-ui-gray)}.disabled\:opacity-50:disabled{opacity:.5}.disabled\:hover\:bg-onpe-ui-gray:disabled:hover{background-color:var(--color-onpe-ui-gray)}
|
package/dist/index.esm.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--
|
|
1
|
+
:root{--blue:#003770;--skyblue:#0073cf;--skyblue-light:#69b2e8;--yellow:#ffb81c;--light-skyblue:#aaeff6;--gray:#bcbcbc;--gray-light:#bdbdbd;--gray-extra-light:#f2f2f2;--red:#e3002b;--dark-gray:#4f4f4f;--green:#76bd43;--yellow-light:#fff1d2}@theme{--color-onpe-ui-blue:var(--blue);--color-onpe-ui-skyblue:var(--skyblue);--color-onpe-ui-skyblue-light:var(--skyblue-light);--color-onpe-ui-yellow:var(--yellow);--color-onpe-ui-light-skyblue:var(--light-skyblue);--color-onpe-ui-gray:var(--gray);--color-onpe-ui-gray-light:var(--gray-light);--color-onpe-ui-gray-extra-light:var(--gray-extra-light);--color-onpe-ui-red:var(--red);--color-onpe-ui-dark-gray:var(--dark-gray);--color-onpe-ui-green:var(--green);--color-onpe-ui-yellow-light:var(--yellow-light)}button{cursor:pointer}@keyframes fastBlink{0%{opacity:1}25%{opacity:.8}50%{opacity:.4}75%{opacity:.8}to{opacity:1}}.fast-blink{animation:fastBlink .8s ease-in-out infinite}.flex{display:flex}.grid{display:grid}.hidden{display:none}.block{display:block}.inline-flex{display:inline-flex}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.place-items-center{place-items:center}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.static{position:static}.top-0{top:0}.top-4{top:1rem}.right-4{right:1rem}.bottom-2{bottom:.5rem}.left-0{left:0}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-50{z-index:50}.z-100{z-index:100}.-z-10{z-index:-10}.w-full{width:100%}.w-16{width:4rem}.w-\[10px\]{width:10px}.w-\[32px\]{width:32px}.w-\[98vw\]{width:98vw}.h-screen{height:100vh}.h-10{height:2.5rem}.h-12{height:3rem}.h-14{height:3.5rem}.h-\[10px\]{height:10px}.h-\[32px\]{height:32px}.max-w-\[95vw\]{max-width:95vw}.max-w-\[200px\]{max-width:200px}.max-w-\[680px\]{max-width:680px}.max-w-full{max-width:100%}.min-w-\[200px\]{min-width:200px}.min-w-\[320px\]{min-width:320px}.max-h-\[90vh\]{max-height:90vh}.p-\[7px\]{padding:7px}.px-1{padding-left:.25rem;padding-right:.25rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-8{padding-left:2rem;padding-right:2rem}.px-32{padding-left:8rem;padding-right:8rem}.py-5{padding-bottom:1.25rem;padding-top:1.25rem}.py-10{padding-bottom:2.5rem;padding-top:2.5rem}.py-16{padding-bottom:4rem;padding-top:4rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-7{margin-top:1.75rem}.mt-10{margin-top:2.5rem}.mt-11{margin-top:2.75rem}.mt-20{margin-top:5rem}.mt-auto{margin-top:auto}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mx-auto{margin-left:auto;margin-right:auto}.-ml-\[16px\]{margin-left:-16px}.-mr-\[16px\]{margin-right:-16px}.-mx-4{margin-left:-1rem;margin-right:-1rem}.-bottom-2{bottom:-.5rem}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.rounded-full{border-radius:9999px}.border{border-width:1px}.border-2{border-width:2px}.border-b-2{border-bottom-width:2px}.border-b-\[9px\]{border-bottom-width:9px}.text-center{text-align:center}.text-sm{font-size:.875rem;line-height:1.25rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem}.text-lg,.text-xl{line-height:1.75rem}.text-xl{font-size:1.25rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-\[28px\]{font-size:28px}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.text-white{color:#fff}.opacity-0{opacity:0}.opacity-100{opacity:1}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}.cursor-pointer{cursor:pointer}.cursor-not-allowed{cursor:not-allowed}.space-y-4>*+*{margin-top:1rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.bg-onpe-ui-blue{background-color:var(--color-onpe-ui-blue)}.bg-onpe-ui-skyblue{background-color:var(--color-onpe-ui-skyblue)}.bg-onpe-ui-skyblue-light{background-color:var(--color-onpe-ui-skyblue-light)}.bg-onpe-ui-yellow{background-color:var(--color-onpe-ui-yellow)}.bg-onpe-ui-light-skyblue{background-color:var(--color-onpe-ui-light-skyblue)}.bg-onpe-ui-gray{background-color:var(--color-onpe-ui-gray)}.bg-onpe-ui-gray-light{background-color:var(--color-onpe-ui-gray-light)}.bg-onpe-ui-gray-extra-light{background-color:var(--color-onpe-ui-gray-extra-light)}.bg-onpe-ui-red{background-color:var(--color-onpe-ui-red)}.bg-onpe-ui-dark-gray{background-color:var(--color-onpe-ui-dark-gray)}.bg-onpe-ui-green{background-color:var(--color-onpe-ui-green)}.bg-onpe-ui-yellow-light{background-color:var(--color-onpe-ui-yellow-light)}.text-onpe-ui-blue{color:var(--color-onpe-ui-blue)}.text-onpe-ui-skyblue{color:var(--color-onpe-ui-skyblue)}.text-onpe-ui-skyblue-light{color:var(--color-onpe-ui-skyblue-light)}.text-onpe-ui-yellow{color:var(--color-onpe-ui-yellow)}.text-onpe-ui-light-skyblue{color:var(--color-onpe-ui-light-skyblue)}.text-onpe-ui-gray{color:var(--color-onpe-ui-gray)}.text-onpe-ui-gray-light{color:var(--color-onpe-ui-gray-light)}.text-onpe-ui-gray-extra-light{color:var(--color-onpe-ui-gray-extra-light)}.text-onpe-ui-red{color:var(--color-onpe-ui-red)}.text-onpe-ui-dark-gray{color:var(--color-onpe-ui-dark-gray)}.text-onpe-ui-green{color:var(--color-onpe-ui-green)}.text-onpe-ui-yellow-light{color:var(--color-onpe-ui-yellow-light)}.hover\:bg-onpe-ui-blue:hover{background-color:var(--color-onpe-ui-blue)}.hover\:bg-onpe-ui-skyblue:hover{background-color:var(--color-onpe-ui-skyblue)}.hover\:bg-onpe-ui-skyblue-light:hover{background-color:var(--color-onpe-ui-skyblue-light)}.hover\:bg-onpe-ui-yellow:hover{background-color:var(--color-onpe-ui-yellow)}.hover\:bg-onpe-ui-light-skyblue:hover{background-color:var(--color-onpe-ui-light-skyblue)}.hover\:bg-onpe-ui-gray:hover{background-color:var(--color-onpe-ui-gray)}.hover\:bg-onpe-ui-gray-light:hover{background-color:var(--color-onpe-ui-gray-light)}.hover\:bg-onpe-ui-gray-extra-light:hover{background-color:var(--color-onpe-ui-gray-extra-light)}.hover\:bg-onpe-ui-red:hover{background-color:var(--color-onpe-ui-red)}.hover\:bg-onpe-ui-dark-gray:hover{background-color:var(--color-onpe-ui-dark-gray)}.hover\:bg-onpe-ui-green:hover{background-color:var(--color-onpe-ui-green)}.hover\:bg-onpe-ui-yellow-light:hover{background-color:var(--color-onpe-ui-yellow-light)}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:bg-onpe-ui-gray:disabled{background-color:var(--color-onpe-ui-gray)}.disabled\:opacity-50:disabled{opacity:.5}.disabled\:hover\:bg-onpe-ui-gray:disabled:hover{background-color:var(--color-onpe-ui-gray)}
|
package/package.json
CHANGED
|
@@ -1,114 +1,114 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@onpe/ui",
|
|
3
|
-
"version": "1.0.
|
|
4
|
-
"type": "module",
|
|
5
|
-
"description": "Librería completa de UI para ONPE - Componentes, Hooks, Utils y Librerías",
|
|
6
|
-
"main": "dist/index.js",
|
|
7
|
-
"module": "dist/index.esm.js",
|
|
8
|
-
"types": "dist/index.d.ts",
|
|
9
|
-
"exports": {
|
|
10
|
-
".": {
|
|
11
|
-
"import": "./dist/index.esm.js",
|
|
12
|
-
"require": "./dist/index.js",
|
|
13
|
-
"types": "./dist/index.d.ts"
|
|
14
|
-
},
|
|
15
|
-
"./components": {
|
|
16
|
-
"import": "./dist/components.esm.js",
|
|
17
|
-
"require": "./dist/components.js",
|
|
18
|
-
"types": "./dist/components.d.ts"
|
|
19
|
-
},
|
|
20
|
-
"./hooks": {
|
|
21
|
-
"import": "./dist/hooks.esm.js",
|
|
22
|
-
"require": "./dist/hooks.js",
|
|
23
|
-
"types": "./dist/hooks.d.ts"
|
|
24
|
-
},
|
|
25
|
-
"./utils": {
|
|
26
|
-
"import": "./dist/utils.esm.js",
|
|
27
|
-
"require": "./dist/utils.js",
|
|
28
|
-
"types": "./dist/utils.d.ts"
|
|
29
|
-
},
|
|
30
|
-
"./lib": {
|
|
31
|
-
"import": "./dist/lib.esm.js",
|
|
32
|
-
"require": "./dist/lib.js",
|
|
33
|
-
"types": "./dist/lib.d.ts"
|
|
34
|
-
},
|
|
35
|
-
"./styles": "./dist/index.css"
|
|
36
|
-
},
|
|
37
|
-
"files": [
|
|
38
|
-
"dist",
|
|
39
|
-
"!dist/**/*.stories.*",
|
|
40
|
-
"!dist/**/IconsOverview.*",
|
|
41
|
-
"!dist/**/*.map"
|
|
42
|
-
],
|
|
43
|
-
"scripts": {
|
|
44
|
-
"build": "rollup -c",
|
|
45
|
-
"dev": "rollup -c -w",
|
|
46
|
-
"test": "jest",
|
|
47
|
-
"lint": "eslint src --ext .ts,.tsx",
|
|
48
|
-
"lint:fix": "eslint src --ext .ts,.tsx --fix",
|
|
49
|
-
"type-check": "tsc --noEmit",
|
|
50
|
-
"storybook": "storybook dev -p 6006",
|
|
51
|
-
"build-storybook": "storybook build"
|
|
52
|
-
},
|
|
53
|
-
"keywords": [
|
|
54
|
-
"react",
|
|
55
|
-
"components",
|
|
56
|
-
"hooks",
|
|
57
|
-
"utils",
|
|
58
|
-
"lib",
|
|
59
|
-
"tailwind",
|
|
60
|
-
"ui",
|
|
61
|
-
"typescript",
|
|
62
|
-
"onpe",
|
|
63
|
-
"peru",
|
|
64
|
-
"elecciones"
|
|
65
|
-
],
|
|
66
|
-
"author": "ONPE",
|
|
67
|
-
"license": "MIT",
|
|
68
|
-
"repository": {
|
|
69
|
-
"type": "git",
|
|
70
|
-
"url": "https://github.com/ricardosv46/onpe-ui.git"
|
|
71
|
-
},
|
|
72
|
-
"bugs": {
|
|
73
|
-
"url": "https://github.com/ricardosv46/onpe-ui/issues"
|
|
74
|
-
},
|
|
75
|
-
"homepage": "https://github.com/ricardosv46/onpe-ui#readme",
|
|
76
|
-
"peerDependencies": {
|
|
77
|
-
"react": ">=16.8.0",
|
|
78
|
-
"react-dom": ">=16.8.0"
|
|
79
|
-
},
|
|
80
|
-
"devDependencies": {
|
|
81
|
-
"@rollup/plugin-commonjs": "^25.0.7",
|
|
82
|
-
"@rollup/plugin-node-resolve": "^15.2.3",
|
|
83
|
-
"@rollup/plugin-typescript": "^11.1.5",
|
|
84
|
-
"@storybook/addon-essentials": "^7.6.6",
|
|
85
|
-
"@storybook/addon-interactions": "^7.6.6",
|
|
86
|
-
"@storybook/addon-links": "^7.6.6",
|
|
87
|
-
"@storybook/blocks": "^7.6.6",
|
|
88
|
-
"@storybook/react": "^7.6.6",
|
|
89
|
-
"@storybook/react-vite": "^7.6.6",
|
|
90
|
-
"@storybook/testing-library": "^0.2.2",
|
|
91
|
-
"@tailwindcss/postcss": "^4.1.13",
|
|
92
|
-
"@types/react": "^18.2.45",
|
|
93
|
-
"@types/react-dom": "^18.2.18",
|
|
94
|
-
"@typescript-eslint/eslint-plugin": "^6.14.0",
|
|
95
|
-
"@typescript-eslint/parser": "^6.14.0",
|
|
96
|
-
"autoprefixer": "^10.4.16",
|
|
97
|
-
"eslint": "^8.55.0",
|
|
98
|
-
"eslint-plugin-react": "^7.33.2",
|
|
99
|
-
"eslint-plugin-react-hooks": "^4.6.0",
|
|
100
|
-
"postcss": "^8.4.32",
|
|
101
|
-
"react": "^18.2.0",
|
|
102
|
-
"react-dom": "^18.2.0",
|
|
103
|
-
"rollup": "^4.9.1",
|
|
104
|
-
"rollup-plugin-dts": "^6.1.0",
|
|
105
|
-
"rollup-plugin-peer-deps-external": "^2.2.4",
|
|
106
|
-
"rollup-plugin-postcss": "^4.0.2",
|
|
107
|
-
"storybook": "^7.6.6",
|
|
108
|
-
"tailwindcss": "^4.1.13",
|
|
109
|
-
"typescript": "^5.3.3"
|
|
110
|
-
},
|
|
111
|
-
"dependencies": {
|
|
112
|
-
"clsx": "^2.0.0"
|
|
113
|
-
}
|
|
114
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "@onpe/ui",
|
|
3
|
+
"version": "1.0.15",
|
|
4
|
+
"type": "module",
|
|
5
|
+
"description": "Librería completa de UI para ONPE - Componentes, Hooks, Utils y Librerías",
|
|
6
|
+
"main": "dist/index.js",
|
|
7
|
+
"module": "dist/index.esm.js",
|
|
8
|
+
"types": "dist/index.d.ts",
|
|
9
|
+
"exports": {
|
|
10
|
+
".": {
|
|
11
|
+
"import": "./dist/index.esm.js",
|
|
12
|
+
"require": "./dist/index.js",
|
|
13
|
+
"types": "./dist/index.d.ts"
|
|
14
|
+
},
|
|
15
|
+
"./components": {
|
|
16
|
+
"import": "./dist/components.esm.js",
|
|
17
|
+
"require": "./dist/components.js",
|
|
18
|
+
"types": "./dist/components.d.ts"
|
|
19
|
+
},
|
|
20
|
+
"./hooks": {
|
|
21
|
+
"import": "./dist/hooks.esm.js",
|
|
22
|
+
"require": "./dist/hooks.js",
|
|
23
|
+
"types": "./dist/hooks.d.ts"
|
|
24
|
+
},
|
|
25
|
+
"./utils": {
|
|
26
|
+
"import": "./dist/utils.esm.js",
|
|
27
|
+
"require": "./dist/utils.js",
|
|
28
|
+
"types": "./dist/utils.d.ts"
|
|
29
|
+
},
|
|
30
|
+
"./lib": {
|
|
31
|
+
"import": "./dist/lib.esm.js",
|
|
32
|
+
"require": "./dist/lib.js",
|
|
33
|
+
"types": "./dist/lib.d.ts"
|
|
34
|
+
},
|
|
35
|
+
"./styles": "./dist/index.css"
|
|
36
|
+
},
|
|
37
|
+
"files": [
|
|
38
|
+
"dist",
|
|
39
|
+
"!dist/**/*.stories.*",
|
|
40
|
+
"!dist/**/IconsOverview.*",
|
|
41
|
+
"!dist/**/*.map"
|
|
42
|
+
],
|
|
43
|
+
"scripts": {
|
|
44
|
+
"build": "rollup -c",
|
|
45
|
+
"dev": "rollup -c -w",
|
|
46
|
+
"test": "jest",
|
|
47
|
+
"lint": "eslint src --ext .ts,.tsx",
|
|
48
|
+
"lint:fix": "eslint src --ext .ts,.tsx --fix",
|
|
49
|
+
"type-check": "tsc --noEmit",
|
|
50
|
+
"storybook": "storybook dev -p 6006",
|
|
51
|
+
"build-storybook": "storybook build"
|
|
52
|
+
},
|
|
53
|
+
"keywords": [
|
|
54
|
+
"react",
|
|
55
|
+
"components",
|
|
56
|
+
"hooks",
|
|
57
|
+
"utils",
|
|
58
|
+
"lib",
|
|
59
|
+
"tailwind",
|
|
60
|
+
"ui",
|
|
61
|
+
"typescript",
|
|
62
|
+
"onpe",
|
|
63
|
+
"peru",
|
|
64
|
+
"elecciones"
|
|
65
|
+
],
|
|
66
|
+
"author": "ONPE",
|
|
67
|
+
"license": "MIT",
|
|
68
|
+
"repository": {
|
|
69
|
+
"type": "git",
|
|
70
|
+
"url": "https://github.com/ricardosv46/onpe-ui.git"
|
|
71
|
+
},
|
|
72
|
+
"bugs": {
|
|
73
|
+
"url": "https://github.com/ricardosv46/onpe-ui/issues"
|
|
74
|
+
},
|
|
75
|
+
"homepage": "https://github.com/ricardosv46/onpe-ui#readme",
|
|
76
|
+
"peerDependencies": {
|
|
77
|
+
"react": ">=16.8.0",
|
|
78
|
+
"react-dom": ">=16.8.0"
|
|
79
|
+
},
|
|
80
|
+
"devDependencies": {
|
|
81
|
+
"@rollup/plugin-commonjs": "^25.0.7",
|
|
82
|
+
"@rollup/plugin-node-resolve": "^15.2.3",
|
|
83
|
+
"@rollup/plugin-typescript": "^11.1.5",
|
|
84
|
+
"@storybook/addon-essentials": "^7.6.6",
|
|
85
|
+
"@storybook/addon-interactions": "^7.6.6",
|
|
86
|
+
"@storybook/addon-links": "^7.6.6",
|
|
87
|
+
"@storybook/blocks": "^7.6.6",
|
|
88
|
+
"@storybook/react": "^7.6.6",
|
|
89
|
+
"@storybook/react-vite": "^7.6.6",
|
|
90
|
+
"@storybook/testing-library": "^0.2.2",
|
|
91
|
+
"@tailwindcss/postcss": "^4.1.13",
|
|
92
|
+
"@types/react": "^18.2.45",
|
|
93
|
+
"@types/react-dom": "^18.2.18",
|
|
94
|
+
"@typescript-eslint/eslint-plugin": "^6.14.0",
|
|
95
|
+
"@typescript-eslint/parser": "^6.14.0",
|
|
96
|
+
"autoprefixer": "^10.4.16",
|
|
97
|
+
"eslint": "^8.55.0",
|
|
98
|
+
"eslint-plugin-react": "^7.33.2",
|
|
99
|
+
"eslint-plugin-react-hooks": "^4.6.0",
|
|
100
|
+
"postcss": "^8.4.32",
|
|
101
|
+
"react": "^18.2.0",
|
|
102
|
+
"react-dom": "^18.2.0",
|
|
103
|
+
"rollup": "^4.9.1",
|
|
104
|
+
"rollup-plugin-dts": "^6.1.0",
|
|
105
|
+
"rollup-plugin-peer-deps-external": "^2.2.4",
|
|
106
|
+
"rollup-plugin-postcss": "^4.0.2",
|
|
107
|
+
"storybook": "^7.6.6",
|
|
108
|
+
"tailwindcss": "^4.1.13",
|
|
109
|
+
"typescript": "^5.3.3"
|
|
110
|
+
},
|
|
111
|
+
"dependencies": {
|
|
112
|
+
"clsx": "^2.0.0"
|
|
113
|
+
}
|
|
114
|
+
}
|