@onpe/ui 1.0.12 → 1.0.13

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.
Files changed (4) hide show
  1. package/README.md +58 -400
  2. package/dist/index.css +1 -1
  3. package/dist/index.esm.css +1 -1
  4. package/package.json +1 -1
package/README.md CHANGED
@@ -1,433 +1,91 @@
1
- # 🗳️ ONPE UI
1
+ # 🎨 ONPE UI - Librería de Componentes
2
2
 
3
- Librería completa de componentes de interfaz de usuario para aplicaciones de la Oficina Nacional de Procesos Electorales (ONPE) del Perú.
3
+ ## 🚀 **Cómo Usar**
4
4
 
5
- ## ✨ Características
5
+ ```javascript
6
+ // Importar estilos (con prefijos para evitar conflictos)
7
+ import '@onpe/ui/styles';
6
8
 
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
- }
9
+ // Importar componentes
10
+ import { Button, Modal, ModalConfirm } from '@onpe/ui/components';
221
11
  ```
222
12
 
223
- ## 🎯 Hooks Disponibles
224
-
225
- ### useDebounce
226
-
227
- Hook para retrasar la ejecución de funciones.
13
+ ## 🎯 **Componentes Disponibles**
228
14
 
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
- }
15
+ ```jsx
16
+ import {
17
+ Button,
18
+ Modal,
19
+ ModalConfirm,
20
+ ModalLoading,
21
+ BrowserIncompatible,
22
+ Overlay,
23
+ Portal,
24
+ Show
25
+ } from '@onpe/ui/components';
249
26
  ```
250
27
 
251
- ### useLocalStorage
252
-
253
- Hook para manejar localStorage de forma reactiva.
28
+ ## 🎨 **Ejemplo de Uso**
254
29
 
255
- ```tsx
256
- import { useLocalStorage } from '@onpe/ui/hooks';
30
+ ```jsx
31
+ import '@onpe/ui/styles';
32
+ import { Button, ModalConfirm } from '@onpe/ui/components';
257
33
 
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() {
34
+ function MyApp() {
299
35
  return (
300
36
  <div>
301
- <IconChrome className="w-6 h-6" />
302
- <IconFirefox className="w-6 h-6" />
303
- <IconSafari className="w-6 h-6" />
37
+ <Button color="blue" title="Mi Botón ONPE" />
38
+
39
+ <ModalConfirm
40
+ isOpen={true}
41
+ title="Confirmar"
42
+ message="¿Estás seguro?"
43
+ onConfirm={() => console.log('OK')}
44
+ onCancel={() => console.log('Cancel')}
45
+ />
304
46
  </div>
305
47
  );
306
48
  }
307
49
  ```
308
50
 
309
- ## 🛠️ Utilidades
310
-
311
- ### formatDate
51
+ ## 🎨 **Colores Disponibles**
312
52
 
313
- Función para formatear fechas según estándares peruanos.
53
+ - `blue` - Azul principal ONPE
54
+ - `skyblue` - Azul cielo
55
+ - `yellow` - Amarillo ONPE
56
+ - `red` - Rojo ONPE
57
+ - `green` - Verde ONPE
58
+ - `gray` - Gris ONPE
314
59
 
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
- ```
60
+ ## ✅ **Sin Conflictos**
322
61
 
323
- ### validateEmail
62
+ Esta librería usa **prefijos** para evitar conflictos con proyectos que ya tienen Tailwind CSS:
324
63
 
325
- Función para validar direcciones de correo electrónico.
64
+ - **Tu proyecto:** Usa clases normales (`bg-blue-500`, `text-white`)
65
+ - **ONPE UI:** Usa clases con prefijo (`onpe-bg-onpe-ui-blue`, `onpe-text-white`)
326
66
 
327
- ```tsx
328
- import { validateEmail } from '@onpe/ui/utils';
67
+ ## 🚀 **Desarrollo**
329
68
 
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
- ```
69
+ ```bash
70
+ # Instalar dependencias
71
+ npm install
355
72
 
356
- ## 🎨 Clases de Utilidad
73
+ # Desarrollo
74
+ npm run dev
357
75
 
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
- ```
76
+ # Build
77
+ npm run build
368
78
 
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 */
79
+ # Storybook
80
+ npm run storybook
379
81
  ```
380
82
 
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
- ```
83
+ ## 📦 **Instalación**
400
84
 
401
- ### Scripts disponibles
402
85
  ```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
86
+ npm install @onpe/ui
409
87
  ```
410
88
 
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
- ---
89
+ ## 🎉 **Resultado**
432
90
 
433
- **Desarrollado con ❤️ para la democracia peruana** 🇵🇪
91
+ ¡Puedes usar ONPE UI en cualquier proyecto sin que se afecten los estilos existentes!
package/dist/index.css CHANGED
@@ -1 +1 @@
1
- /*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.-z-10{z-index:-10}.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}.container{width:100%}.mx-auto{margin-inline:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.h-\[10px\]{height:10px}.h-\[32px\]{height:32px}.h-screen{height:100vh}.max-h-\[90vh\]{max-height:90vh}.min-h-screen{min-height:100vh}.w-\[10px\]{width:10px}.w-\[32px\]{width:32px}.w-\[98vw\]{width:98vw}.w-full{width:100%}.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}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.list-inside{list-style-position:inside}.list-decimal{list-style-type:decimal}.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))}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-wrap{flex-wrap:wrap}.place-items-center{place-items:center}.items-center{align-items:center}.justify-center{justify-content:center}.overflow-y-auto{overflow-y:auto}.rounded-full{border-radius:calc(infinity * 1px)}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-b-2{border-bottom-style:var(--tw-border-style);border-bottom-width:2px}.bg-onpe-ui-blue,.bg-onpe-ui-blue\/80{background-color:var(--color-onpe-ui-blue);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-blue) 80%,transparent)}}.bg-onpe-ui-dark-gray,.bg-onpe-ui-dark-gray\/80{background-color:var(--color-onpe-ui-dark-gray);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-dark-gray) 80%,transparent)}}.bg-onpe-ui-gray{background-color:var(--color-onpe-ui-gray)}.bg-onpe-ui-gray-extra-light,.bg-onpe-ui-gray-extra-light\/80{background-color:var(--color-onpe-ui-gray-extra-light);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-gray-extra-light) 80%,transparent)}}.bg-onpe-ui-gray-light,.bg-onpe-ui-gray-light\/80{background-color:var(--color-onpe-ui-gray-light);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-gray-light) 80%,transparent)}}.bg-onpe-ui-gray\/80{background-color:var(--color-onpe-ui-gray);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-gray) 80%,transparent)}}.bg-onpe-ui-green,.bg-onpe-ui-green\/80{background-color:var(--color-onpe-ui-green);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-green) 80%,transparent)}}.bg-onpe-ui-light-skyblue,.bg-onpe-ui-light-skyblue\/80{background-color:var(--color-onpe-ui-light-skyblue);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-light-skyblue) 80%,transparent)}}.bg-onpe-ui-red,.bg-onpe-ui-red\/80{background-color:var(--color-onpe-ui-red);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-red) 80%,transparent)}}.bg-onpe-ui-skyblue{background-color:var(--color-onpe-ui-skyblue)}.bg-onpe-ui-skyblue-light,.bg-onpe-ui-skyblue-light\/80{background-color:var(--color-onpe-ui-skyblue-light);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-skyblue-light) 80%,transparent)}}.bg-onpe-ui-skyblue\/80{background-color:var(--color-onpe-ui-skyblue);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-skyblue) 80%,transparent)}}.bg-onpe-ui-yellow{background-color:var(--color-onpe-ui-yellow)}.bg-onpe-ui-yellow-light,.bg-onpe-ui-yellow-light\/80{background-color:var(--color-onpe-ui-yellow-light);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-yellow-light) 80%,transparent)}}.bg-onpe-ui-yellow\/80{background-color:var(--color-onpe-ui-yellow);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-yellow) 80%,transparent)}}.p-\[7px\]{padding:7px}.text-center{text-align:center}.text-onpe-ui-blue{color:var(--color-onpe-ui-blue)}.text-onpe-ui-dark-gray{color:var(--color-onpe-ui-dark-gray)}.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-green{color:var(--color-onpe-ui-green)}.text-onpe-ui-red{color:var(--color-onpe-ui-red)}.text-onpe-ui-skyblue{color:var(--color-onpe-ui-skyblue)}.text-onpe-ui-yellow{color:var(--color-onpe-ui-yellow)}.opacity-0{opacity:0}.opacity-25{opacity:25%}.opacity-50{opacity:50%}.opacity-75{opacity:75%}.opacity-100{opacity:100%}.transition-all{transition-duration:var(--tw-duration,0s);transition-property:all;transition-timing-function:var(--tw-ease,ease)}.transition-colors{transition-duration:var(--tw-duration,0s);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,ease)}.duration-300{--tw-duration:300ms;transition-duration:.3s}.duration-500{--tw-duration:500ms;transition-duration:.5s}.hover\:bg-onpe-ui-blue{&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-blue)}}}.hover\:bg-onpe-ui-blue\/80{&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-blue);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-blue) 80%,transparent)}}}}.hover\:bg-onpe-ui-dark-gray{&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-dark-gray)}}}.hover\:bg-onpe-ui-gray-extra-light{&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-gray-extra-light)}}}.hover\:bg-onpe-ui-gray\/80{&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-gray);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-gray) 80%,transparent)}}}}.hover\:bg-onpe-ui-green{&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-green)}}}.hover\:bg-onpe-ui-green\/80{&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-green);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-green) 80%,transparent)}}}}.hover\:bg-onpe-ui-light-skyblue{&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-light-skyblue)}}}.hover\:bg-onpe-ui-red{&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-red)}}}.hover\:bg-onpe-ui-red\/80{&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-red);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-red) 80%,transparent)}}}}.hover\:bg-onpe-ui-skyblue{&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-skyblue)}}}.hover\:bg-onpe-ui-skyblue\/80{&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-skyblue);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-skyblue) 80%,transparent)}}}}.focus\:ring-2{&:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}.focus\:ring-offset-2{&:focus{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}}.focus\:outline-none{&:focus{--tw-outline-style:none;outline-style:none}}.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:50%}}.disabled\:hover\:bg-onpe-ui-gray{&:disabled{&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-gray)}}}}: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}:host,:root{--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}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-duration{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@layer properties{@supports ((-webkit-hyphens:none) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-duration:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}
1
+ :root{--onpe-blue:#003770;--onpe-skyblue:#0073cf;--onpe-skyblue-light:#69b2e8;--onpe-yellow:#ffb81c;--onpe-light-skyblue:#aaeff6;--onpe-gray:#bcbcbc;--onpe-gray-light:#bdbdbd;--onpe-gray-extra-light:#f2f2f2;--onpe-red:#e3002b;--onpe-dark-gray:#4f4f4f;--onpe-green:#76bd43;--onpe-yellow-light:#fff1d2}.onpe-bg-onpe-ui-blue{background-color:var(--onpe-blue)}.onpe-bg-onpe-ui-skyblue{background-color:var(--onpe-skyblue)}.onpe-bg-onpe-ui-skyblue-light{background-color:var(--onpe-skyblue-light)}.onpe-bg-onpe-ui-yellow{background-color:var(--onpe-yellow)}.onpe-bg-onpe-ui-light-skyblue{background-color:var(--onpe-light-skyblue)}.onpe-bg-onpe-ui-gray{background-color:var(--onpe-gray)}.onpe-bg-onpe-ui-gray-light{background-color:var(--onpe-gray-light)}.onpe-bg-onpe-ui-gray-extra-light{background-color:var(--onpe-gray-extra-light)}.onpe-bg-onpe-ui-red{background-color:var(--onpe-red)}.onpe-bg-onpe-ui-dark-gray{background-color:var(--onpe-dark-gray)}.onpe-bg-onpe-ui-green{background-color:var(--onpe-green)}.onpe-bg-onpe-ui-yellow-light{background-color:var(--onpe-yellow-light)}.onpe-text-white{color:#fff}.onpe-text-onpe-ui-blue{color:var(--onpe-blue)}.onpe-text-onpe-ui-dark-gray{color:var(--onpe-dark-gray)}.onpe-h-10{height:2.5rem}.onpe-h-12{height:3rem}.onpe-h-14{height:3.5rem}.onpe-text-sm{font-size:.875rem}.onpe-text-base{font-size:1rem}.onpe-text-lg{font-size:1.125rem}.onpe-flex{display:flex}.onpe-justify-center{justify-content:center}.onpe-items-center{align-items:center}.onpe-cursor-pointer{cursor:pointer}.onpe-cursor-not-allowed{cursor:not-allowed}.onpe-font-semibold{font-weight:600}.onpe-min-w-\[200px\]{min-width:200px}.onpe-transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.onpe-duration-300{transition-duration:.3s}.onpe-ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.onpe-disabled\:onpe-cursor-not-allowed:disabled{cursor:not-allowed}.onpe-disabled\:hover\:onpe-bg-onpe-ui-gray:disabled:hover,.onpe-disabled\:onpe-bg-onpe-ui-gray:disabled{background-color:var(--onpe-gray)}.onpe-md\:hover\:onpe-bg-onpe-ui-blue\/30:hover{background-color:rgba(0,55,112,.3)}.onpe-md\:hover\:onpe-bg-onpe-ui-skyblue\/30:hover{background-color:rgba(0,115,207,.3)}.onpe-md\:hover\:onpe-bg-onpe-ui-skyblue-light\/30:hover{background-color:rgba(105,178,232,.3)}.onpe-md\:hover\:onpe-bg-onpe-ui-yellow\/30:hover{background-color:rgba(255,184,28,.3)}.onpe-md\:hover\:onpe-bg-onpe-ui-light-skyblue\/30:hover{background-color:rgba(170,239,246,.3)}.onpe-md\:hover\:onpe-bg-onpe-ui-gray-light\/30:hover,.onpe-md\:hover\:onpe-bg-onpe-ui-gray\/30:hover{background-color:hsla(0,0%,74%,.3)}.onpe-md\:hover\:onpe-bg-onpe-ui-gray-extra-light\/30:hover{background-color:hsla(0,0%,95%,.3)}.onpe-md\:hover\:onpe-bg-onpe-ui-red\/30:hover{background-color:rgba(227,0,43,.3)}.onpe-md\:hover\:onpe-bg-onpe-ui-dark-gray\/30:hover{background-color:rgba(79,79,79,.3)}.onpe-md\:hover\:onpe-bg-onpe-ui-green\/30:hover{background-color:rgba(118,189,67,.3)}.onpe-md\:hover\:onpe-bg-onpe-ui-yellow-light\/30:hover{background-color:rgba(255,241,210,.3)}.onpe-ui-button{cursor:pointer}@keyframes onpe-fastBlink{0%{opacity:1}25%{opacity:.8}50%{opacity:.4}75%{opacity:.8}to{opacity:1}}.onpe-ui-fast-blink{animation:onpe-fastBlink .8s ease-in-out infinite}.onpe-ui-container{padding:16px}.onpe-ui-card{background-color:#fff;border-radius:8px;box-shadow:0 4px 6px -1px rgba(0,0,0,.1);padding:16px}.onpe-ui-text-primary{color:var(--onpe-blue)}.onpe-ui-text-secondary{color:var(--onpe-dark-gray)}.onpe-ui-bg-primary{background-color:var(--onpe-blue)}.onpe-ui-bg-secondary{background-color:var(--onpe-skyblue)}
package/dist/index.esm.css CHANGED
@@ -1 +1 @@
1
- /*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.-z-10{z-index:-10}.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}.container{width:100%}.mx-auto{margin-inline:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.h-\[10px\]{height:10px}.h-\[32px\]{height:32px}.h-screen{height:100vh}.max-h-\[90vh\]{max-height:90vh}.min-h-screen{min-height:100vh}.w-\[10px\]{width:10px}.w-\[32px\]{width:32px}.w-\[98vw\]{width:98vw}.w-full{width:100%}.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}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.list-inside{list-style-position:inside}.list-decimal{list-style-type:decimal}.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))}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-wrap{flex-wrap:wrap}.place-items-center{place-items:center}.items-center{align-items:center}.justify-center{justify-content:center}.overflow-y-auto{overflow-y:auto}.rounded-full{border-radius:calc(infinity * 1px)}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-b-2{border-bottom-style:var(--tw-border-style);border-bottom-width:2px}.bg-onpe-ui-blue,.bg-onpe-ui-blue\/80{background-color:var(--color-onpe-ui-blue);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-blue) 80%,transparent)}}.bg-onpe-ui-dark-gray,.bg-onpe-ui-dark-gray\/80{background-color:var(--color-onpe-ui-dark-gray);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-dark-gray) 80%,transparent)}}.bg-onpe-ui-gray{background-color:var(--color-onpe-ui-gray)}.bg-onpe-ui-gray-extra-light,.bg-onpe-ui-gray-extra-light\/80{background-color:var(--color-onpe-ui-gray-extra-light);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-gray-extra-light) 80%,transparent)}}.bg-onpe-ui-gray-light,.bg-onpe-ui-gray-light\/80{background-color:var(--color-onpe-ui-gray-light);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-gray-light) 80%,transparent)}}.bg-onpe-ui-gray\/80{background-color:var(--color-onpe-ui-gray);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-gray) 80%,transparent)}}.bg-onpe-ui-green,.bg-onpe-ui-green\/80{background-color:var(--color-onpe-ui-green);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-green) 80%,transparent)}}.bg-onpe-ui-light-skyblue,.bg-onpe-ui-light-skyblue\/80{background-color:var(--color-onpe-ui-light-skyblue);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-light-skyblue) 80%,transparent)}}.bg-onpe-ui-red,.bg-onpe-ui-red\/80{background-color:var(--color-onpe-ui-red);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-red) 80%,transparent)}}.bg-onpe-ui-skyblue{background-color:var(--color-onpe-ui-skyblue)}.bg-onpe-ui-skyblue-light,.bg-onpe-ui-skyblue-light\/80{background-color:var(--color-onpe-ui-skyblue-light);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-skyblue-light) 80%,transparent)}}.bg-onpe-ui-skyblue\/80{background-color:var(--color-onpe-ui-skyblue);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-skyblue) 80%,transparent)}}.bg-onpe-ui-yellow{background-color:var(--color-onpe-ui-yellow)}.bg-onpe-ui-yellow-light,.bg-onpe-ui-yellow-light\/80{background-color:var(--color-onpe-ui-yellow-light);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-yellow-light) 80%,transparent)}}.bg-onpe-ui-yellow\/80{background-color:var(--color-onpe-ui-yellow);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-yellow) 80%,transparent)}}.p-\[7px\]{padding:7px}.text-center{text-align:center}.text-onpe-ui-blue{color:var(--color-onpe-ui-blue)}.text-onpe-ui-dark-gray{color:var(--color-onpe-ui-dark-gray)}.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-green{color:var(--color-onpe-ui-green)}.text-onpe-ui-red{color:var(--color-onpe-ui-red)}.text-onpe-ui-skyblue{color:var(--color-onpe-ui-skyblue)}.text-onpe-ui-yellow{color:var(--color-onpe-ui-yellow)}.opacity-0{opacity:0}.opacity-25{opacity:25%}.opacity-50{opacity:50%}.opacity-75{opacity:75%}.opacity-100{opacity:100%}.transition-all{transition-duration:var(--tw-duration,0s);transition-property:all;transition-timing-function:var(--tw-ease,ease)}.transition-colors{transition-duration:var(--tw-duration,0s);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,ease)}.duration-300{--tw-duration:300ms;transition-duration:.3s}.duration-500{--tw-duration:500ms;transition-duration:.5s}.hover\:bg-onpe-ui-blue{&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-blue)}}}.hover\:bg-onpe-ui-blue\/80{&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-blue);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-blue) 80%,transparent)}}}}.hover\:bg-onpe-ui-dark-gray{&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-dark-gray)}}}.hover\:bg-onpe-ui-gray-extra-light{&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-gray-extra-light)}}}.hover\:bg-onpe-ui-gray\/80{&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-gray);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-gray) 80%,transparent)}}}}.hover\:bg-onpe-ui-green{&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-green)}}}.hover\:bg-onpe-ui-green\/80{&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-green);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-green) 80%,transparent)}}}}.hover\:bg-onpe-ui-light-skyblue{&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-light-skyblue)}}}.hover\:bg-onpe-ui-red{&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-red)}}}.hover\:bg-onpe-ui-red\/80{&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-red);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-red) 80%,transparent)}}}}.hover\:bg-onpe-ui-skyblue{&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-skyblue)}}}.hover\:bg-onpe-ui-skyblue\/80{&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-skyblue);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-skyblue) 80%,transparent)}}}}.focus\:ring-2{&:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}.focus\:ring-offset-2{&:focus{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}}.focus\:outline-none{&:focus{--tw-outline-style:none;outline-style:none}}.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:50%}}.disabled\:hover\:bg-onpe-ui-gray{&:disabled{&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-gray)}}}}: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}:host,:root{--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}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-duration{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@layer properties{@supports ((-webkit-hyphens:none) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-duration:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}
1
+ :root{--onpe-blue:#003770;--onpe-skyblue:#0073cf;--onpe-skyblue-light:#69b2e8;--onpe-yellow:#ffb81c;--onpe-light-skyblue:#aaeff6;--onpe-gray:#bcbcbc;--onpe-gray-light:#bdbdbd;--onpe-gray-extra-light:#f2f2f2;--onpe-red:#e3002b;--onpe-dark-gray:#4f4f4f;--onpe-green:#76bd43;--onpe-yellow-light:#fff1d2}.onpe-bg-onpe-ui-blue{background-color:var(--onpe-blue)}.onpe-bg-onpe-ui-skyblue{background-color:var(--onpe-skyblue)}.onpe-bg-onpe-ui-skyblue-light{background-color:var(--onpe-skyblue-light)}.onpe-bg-onpe-ui-yellow{background-color:var(--onpe-yellow)}.onpe-bg-onpe-ui-light-skyblue{background-color:var(--onpe-light-skyblue)}.onpe-bg-onpe-ui-gray{background-color:var(--onpe-gray)}.onpe-bg-onpe-ui-gray-light{background-color:var(--onpe-gray-light)}.onpe-bg-onpe-ui-gray-extra-light{background-color:var(--onpe-gray-extra-light)}.onpe-bg-onpe-ui-red{background-color:var(--onpe-red)}.onpe-bg-onpe-ui-dark-gray{background-color:var(--onpe-dark-gray)}.onpe-bg-onpe-ui-green{background-color:var(--onpe-green)}.onpe-bg-onpe-ui-yellow-light{background-color:var(--onpe-yellow-light)}.onpe-text-white{color:#fff}.onpe-text-onpe-ui-blue{color:var(--onpe-blue)}.onpe-text-onpe-ui-dark-gray{color:var(--onpe-dark-gray)}.onpe-h-10{height:2.5rem}.onpe-h-12{height:3rem}.onpe-h-14{height:3.5rem}.onpe-text-sm{font-size:.875rem}.onpe-text-base{font-size:1rem}.onpe-text-lg{font-size:1.125rem}.onpe-flex{display:flex}.onpe-justify-center{justify-content:center}.onpe-items-center{align-items:center}.onpe-cursor-pointer{cursor:pointer}.onpe-cursor-not-allowed{cursor:not-allowed}.onpe-font-semibold{font-weight:600}.onpe-min-w-\[200px\]{min-width:200px}.onpe-transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.onpe-duration-300{transition-duration:.3s}.onpe-ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.onpe-disabled\:onpe-cursor-not-allowed:disabled{cursor:not-allowed}.onpe-disabled\:hover\:onpe-bg-onpe-ui-gray:disabled:hover,.onpe-disabled\:onpe-bg-onpe-ui-gray:disabled{background-color:var(--onpe-gray)}.onpe-md\:hover\:onpe-bg-onpe-ui-blue\/30:hover{background-color:rgba(0,55,112,.3)}.onpe-md\:hover\:onpe-bg-onpe-ui-skyblue\/30:hover{background-color:rgba(0,115,207,.3)}.onpe-md\:hover\:onpe-bg-onpe-ui-skyblue-light\/30:hover{background-color:rgba(105,178,232,.3)}.onpe-md\:hover\:onpe-bg-onpe-ui-yellow\/30:hover{background-color:rgba(255,184,28,.3)}.onpe-md\:hover\:onpe-bg-onpe-ui-light-skyblue\/30:hover{background-color:rgba(170,239,246,.3)}.onpe-md\:hover\:onpe-bg-onpe-ui-gray-light\/30:hover,.onpe-md\:hover\:onpe-bg-onpe-ui-gray\/30:hover{background-color:hsla(0,0%,74%,.3)}.onpe-md\:hover\:onpe-bg-onpe-ui-gray-extra-light\/30:hover{background-color:hsla(0,0%,95%,.3)}.onpe-md\:hover\:onpe-bg-onpe-ui-red\/30:hover{background-color:rgba(227,0,43,.3)}.onpe-md\:hover\:onpe-bg-onpe-ui-dark-gray\/30:hover{background-color:rgba(79,79,79,.3)}.onpe-md\:hover\:onpe-bg-onpe-ui-green\/30:hover{background-color:rgba(118,189,67,.3)}.onpe-md\:hover\:onpe-bg-onpe-ui-yellow-light\/30:hover{background-color:rgba(255,241,210,.3)}.onpe-ui-button{cursor:pointer}@keyframes onpe-fastBlink{0%{opacity:1}25%{opacity:.8}50%{opacity:.4}75%{opacity:.8}to{opacity:1}}.onpe-ui-fast-blink{animation:onpe-fastBlink .8s ease-in-out infinite}.onpe-ui-container{padding:16px}.onpe-ui-card{background-color:#fff;border-radius:8px;box-shadow:0 4px 6px -1px rgba(0,0,0,.1);padding:16px}.onpe-ui-text-primary{color:var(--onpe-blue)}.onpe-ui-text-secondary{color:var(--onpe-dark-gray)}.onpe-ui-bg-primary{background-color:var(--onpe-blue)}.onpe-ui-bg-secondary{background-color:var(--onpe-skyblue)}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@onpe/ui",
3
- "version": "1.0.12",
3
+ "version": "1.0.13",
4
4
  "type": "module",
5
5
  "description": "Librería completa de UI para ONPE - Componentes, Hooks, Utils y Librerías",
6
6
  "main": "dist/index.js",