neogestify-ui-components 2.3.1 → 2.3.3
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 +19 -25
- package/dist/components/ElementLibraryBuilder/index.js.map +1 -1
- package/dist/components/ElementLibraryBuilder/index.mjs.map +1 -1
- package/dist/components/VenueMapEditor/index.js.map +1 -1
- package/dist/components/VenueMapEditor/index.mjs.map +1 -1
- package/dist/components/alerts/index.js.map +1 -1
- package/dist/components/alerts/index.mjs.map +1 -1
- package/dist/components/html/index.js.map +1 -1
- package/dist/components/html/index.mjs.map +1 -1
- package/dist/components/icons/index.d.mts +14 -1
- package/dist/components/icons/index.d.ts +14 -1
- package/dist/components/icons/index.js +70 -0
- package/dist/components/icons/index.js.map +1 -1
- package/dist/components/icons/index.mjs +64 -1
- package/dist/components/icons/index.mjs.map +1 -1
- package/dist/context/theme/index.js.map +1 -1
- package/dist/context/theme/index.mjs.map +1 -1
- package/dist/index.d.mts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +70 -0
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +64 -1
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
- package/src/components/icons/icons.tsx +248 -116
package/README.md
CHANGED
|
@@ -46,6 +46,14 @@ En tu archivo CSS principal (por ejemplo `src/index.css`):
|
|
|
46
46
|
@import "tailwindcss";
|
|
47
47
|
|
|
48
48
|
@source "../node_modules/neogestify-ui-components/src";
|
|
49
|
+
|
|
50
|
+
@theme {
|
|
51
|
+
/* Configuración de dark mode para Tailwind v4 */
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
@variant dark (&:where(.dark, .dark *)) {
|
|
55
|
+
/* Variante dark mode */
|
|
56
|
+
}
|
|
49
57
|
```
|
|
50
58
|
|
|
51
59
|
**Agrega este script a tu index.html**
|
|
@@ -91,6 +99,7 @@ import {
|
|
|
91
99
|
AlertaAdvertencia,
|
|
92
100
|
AlertaConfirmacion,
|
|
93
101
|
AlertaToast,
|
|
102
|
+
AlertaInfo,
|
|
94
103
|
InfoAlert,
|
|
95
104
|
// Theme
|
|
96
105
|
ThemeProvider,
|
|
@@ -579,7 +588,7 @@ Props:
|
|
|
579
588
|
|
|
580
589
|
## Iconos SVG
|
|
581
590
|
|
|
582
|
-
La biblioteca incluye más de
|
|
591
|
+
La biblioteca incluye más de 80 iconos SVG:
|
|
583
592
|
|
|
584
593
|
```tsx
|
|
585
594
|
import {
|
|
@@ -626,6 +635,7 @@ function MiComponente() {
|
|
|
626
635
|
- IconErase, IconDuplicate, IconWall, IconDownload, IconUpload
|
|
627
636
|
- IconPolygon, IconLayers
|
|
628
637
|
- ChevronDownIcon, SortAscIcon, SortDescIcon, SortBothIcon
|
|
638
|
+
- FingerPrintIcon, PasswordIcon, ShareIcon, QRIcon
|
|
629
639
|
|
|
630
640
|
---
|
|
631
641
|
|
|
@@ -725,32 +735,17 @@ Alerta({
|
|
|
725
735
|
|
|
726
736
|
## InfoAlert (Componente)
|
|
727
737
|
|
|
728
|
-
|
|
738
|
+
Botón con ícono de interrogación que dispara un popup informativo con SweetAlert2 al hacer click:
|
|
729
739
|
|
|
730
740
|
```tsx
|
|
731
741
|
import { InfoAlert } from 'neogestify-ui-components';
|
|
732
742
|
|
|
733
|
-
<InfoAlert
|
|
734
|
-
Este es un mensaje informativo
|
|
735
|
-
</InfoAlert>
|
|
736
|
-
|
|
737
|
-
<InfoAlert type="success">
|
|
738
|
-
Operación exitosa
|
|
739
|
-
</InfoAlert>
|
|
740
|
-
|
|
741
|
-
<InfoAlert type="warning">
|
|
742
|
-
Advertencia importante
|
|
743
|
-
</InfoAlert>
|
|
744
|
-
|
|
745
|
-
<InfoAlert type="error">
|
|
746
|
-
Ha ocurrido un error
|
|
747
|
-
</InfoAlert>
|
|
743
|
+
<InfoAlert title="Info" text="Este es un mensaje informativo" />
|
|
748
744
|
```
|
|
749
745
|
|
|
750
746
|
Props:
|
|
751
|
-
- `
|
|
752
|
-
- `
|
|
753
|
-
- `className`: Clases adicionales
|
|
747
|
+
- `title`: Título del popup (string, requerido)
|
|
748
|
+
- `text`: Mensaje del popup (string, requerido)
|
|
754
749
|
|
|
755
750
|
---
|
|
756
751
|
|
|
@@ -1306,12 +1301,11 @@ ui-components/
|
|
|
1306
1301
|
|
|
1307
1302
|
## Modo Oscuro
|
|
1308
1303
|
|
|
1309
|
-
Los componentes soportan modo oscuro automáticamente usando las clases `dark:` de Tailwind.
|
|
1304
|
+
Los componentes soportan modo oscuro automáticamente usando las clases `dark:` de Tailwind. Si usas Tailwind v4, asegúrate de tener la variante configurada en tu CSS principal (ver [Configuración](#configuración)):
|
|
1310
1305
|
|
|
1311
|
-
```
|
|
1312
|
-
|
|
1313
|
-
|
|
1314
|
-
darkMode: 'class',
|
|
1306
|
+
```css
|
|
1307
|
+
@variant dark (&:where(.dark, .dark *)) {
|
|
1308
|
+
/* Variante dark mode */
|
|
1315
1309
|
}
|
|
1316
1310
|
```
|
|
1317
1311
|
|