@sector.siit/mlz-components 1.0.30 → 1.0.31

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 +40 -6
  2. package/dist/theme.css +42 -40
  3. package/package.json +1 -3
  4. package/dist/variables.css +0 -59
package/README.md CHANGED
@@ -78,9 +78,46 @@ export default function Home() {
78
78
  }
79
79
  ```
80
80
 
81
- #### Configuración de Tailwind en Next.js
81
+ #### Configuración de Estilos en Next.js
82
82
 
83
- Si usas Tailwind CSS en tu proyecto Next.js, asegúrate de incluir los componentes en tu `tailwind.config.js`:
83
+ ##### Opción 1: Con Tailwind v4 y Tokens de Color (Recomendado)
84
+
85
+ Si usas **Tailwind CSS v4**, configura tu `app/globals.css` de esta forma para obtener autocompletado de clases como `bg-primary-600`, `text-semantic-error-600`:
86
+
87
+ ```css
88
+ /* app/globals.css */
89
+ @import "tailwindcss";
90
+
91
+ @theme {
92
+ @import "@sector.siit/mlz-components/theme.css";
93
+ }
94
+
95
+ @import "@sector.siit/mlz-components/styles.css";
96
+ ```
97
+
98
+ Esto te permite usar las clases de color personalizadas de mlz-components:
99
+
100
+ ```tsx
101
+ <div className="bg-primary-600 text-white">
102
+ <p className="text-semantic-error-600">Error</p>
103
+ </div>
104
+ ```
105
+
106
+ ##### Opción 2: Solo Estilos (Sin Tokens de Tailwind)
107
+
108
+ Si solo necesitas que los componentes funcionen sin las clases personalizadas:
109
+
110
+ ```css
111
+ /* app/globals.css */
112
+ @import "tailwindcss";
113
+ @import "@sector.siit/mlz-components/styles.css";
114
+ ```
115
+
116
+ Los componentes funcionarán perfectamente, pero no tendrás autocompletado para clases como `bg-primary-600`.
117
+
118
+ ##### Opción 3: Tailwind v3 o anterior
119
+
120
+ Si usas **Tailwind CSS v3**, necesitas incluir los componentes en tu `tailwind.config.js`:
84
121
 
85
122
  ```js
86
123
  /** @type {import('tailwindcss').Config} */
@@ -98,14 +135,11 @@ module.exports = {
98
135
  }
99
136
  ```
100
137
 
101
- #### Importar Variables CSS
102
-
103
- Para personalizar los componentes, importa el archivo de variables en tu layout principal:
138
+ Y en tu layout:
104
139
 
105
140
  ```tsx
106
141
  // app/layout.tsx
107
142
  import '@sector.siit/mlz-components/styles.css';
108
- import '@sector.siit/mlz-components/variables.css';
109
143
  import './globals.css';
110
144
 
111
145
  export default function RootLayout({
package/dist/theme.css CHANGED
@@ -13,48 +13,50 @@
13
13
  */
14
14
 
15
15
  /* Colores primarios como theme tokens */
16
- --color-primary-50: var(--mlz-primary-50, #eff6ff);
17
- --color-primary-100: var(--mlz-primary-100, #E5F0F9);
18
- --color-primary-200: var(--mlz-primary-200, #bfdbfe);
19
- --color-primary-300: var(--mlz-primary-300, #94C6E5);
20
- --color-primary-400: var(--mlz-primary-400, #5BA8D5);
21
- --color-primary-500: var(--mlz-primary-500, #3b82f6);
22
- --color-primary-600: var(--mlz-primary-600, #236999);
23
- --color-primary-700: var(--mlz-primary-700, #1d4ed8);
24
- --color-primary-800: var(--mlz-primary-800, #1e40af);
25
- --color-primary-900: var(--mlz-primary-900, #1e3a8a);
26
- --color-primary-950: var(--mlz-primary-950, #172554);
16
+ @theme{
17
+ --color-primary-50: var(--mlz-primary-50, #eff6ff);
18
+ --color-primary-100: var(--mlz-primary-100, #E5F0F9);
19
+ --color-primary-200: var(--mlz-primary-200, #bfdbfe);
20
+ --color-primary-300: var(--mlz-primary-300, #94C6E5);
21
+ --color-primary-400: var(--mlz-primary-400, #5BA8D5);
22
+ --color-primary-500: var(--mlz-primary-500, #3b82f6);
23
+ --color-primary-600: var(--mlz-primary-600, #236999);
24
+ --color-primary-700: var(--mlz-primary-700, #1d4ed8);
25
+ --color-primary-800: var(--mlz-primary-800, #1e40af);
26
+ --color-primary-900: var(--mlz-primary-900, #1e3a8a);
27
+ --color-primary-950: var(--mlz-primary-950, #172554);
27
28
 
28
- --color-semantic-info: var(--mlz-semantic-info, #006EFF);
29
- --color-semantic-error-600: var(--mlz-semantic-error-600, #EF284C);
30
- --color-semantic-success: var(--mlz-semantic-success, #1D9C48);
29
+ --color-semantic-info: var(--mlz-semantic-info, #006EFF);
30
+ --color-semantic-error-600: var(--mlz-semantic-error-600, #EF284C);
31
+ --color-semantic-success: var(--mlz-semantic-success, #1D9C48);
31
32
 
32
- --color-secondary-50: var(--mlz-secondary-50, #f8fafc);
33
- --color-secondary-100: var(--mlz-secondary-100, #f1f5f9);
34
- --color-secondary-200: var(--mlz-secondary-200, #e2e8f0);
35
- --color-secondary-300: var(--mlz-secondary-300, #cbd5e1);
36
- --color-secondary-400: var(--mlz-secondary-400, #94a3b8);
37
- --color-secondary-500: var(--mlz-secondary-500, #64748b);
38
- --color-secondary-600: var(--mlz-secondary-600, #475569);
39
- --color-secondary-700: var(--mlz-secondary-700, #334155);
40
- --color-secondary-800: var(--mlz-secondary-800, #1e293b);
41
- --color-secondary-900: var(--mlz-secondary-900, #0f172a);
42
- --color-secondary-950: var(--mlz-secondary-950, #020617);
33
+ --color-secondary-50: var(--mlz-secondary-50, #f8fafc);
34
+ --color-secondary-100: var(--mlz-secondary-100, #f1f5f9);
35
+ --color-secondary-200: var(--mlz-secondary-200, #e2e8f0);
36
+ --color-secondary-300: var(--mlz-secondary-300, #cbd5e1);
37
+ --color-secondary-400: var(--mlz-secondary-400, #94a3b8);
38
+ --color-secondary-500: var(--mlz-secondary-500, #64748b);
39
+ --color-secondary-600: var(--mlz-secondary-600, #475569);
40
+ --color-secondary-700: var(--mlz-secondary-700, #334155);
41
+ --color-secondary-800: var(--mlz-secondary-800, #1e293b);
42
+ --color-secondary-900: var(--mlz-secondary-900, #0f172a);
43
+ --color-secondary-950: var(--mlz-secondary-950, #020617);
43
44
 
44
- --spacing-mlz-xs: var(--mlz-spacing-xs, 0.25rem);
45
- --spacing-mlz-sm: var(--mlz-spacing-sm, 0.5rem);
46
- --spacing-mlz-md: var(--mlz-spacing-md, 1rem);
47
- --spacing-mlz-lg: var(--mlz-spacing-lg, 1.5rem);
48
- --spacing-mlz-xl: var(--mlz-spacing-xl, 2rem);
49
- --spacing-mlz-2xl: var(--mlz-spacing-2xl, 3rem);
45
+ --spacing-mlz-xs: var(--mlz-spacing-xs, 0.25rem);
46
+ --spacing-mlz-sm: var(--mlz-spacing-sm, 0.5rem);
47
+ --spacing-mlz-md: var(--mlz-spacing-md, 1rem);
48
+ --spacing-mlz-lg: var(--mlz-spacing-lg, 1.5rem);
49
+ --spacing-mlz-xl: var(--mlz-spacing-xl, 2rem);
50
+ --spacing-mlz-2xl: var(--mlz-spacing-2xl, 3rem);
50
51
 
51
- --radius-mlz-sm: var(--mlz-border-radius-sm, 0.25rem);
52
- --radius-mlz-md: var(--mlz-border-radius-md, 0.375rem);
53
- --radius-mlz-lg: var(--mlz-border-radius-lg, 0.5rem);
54
- --radius-mlz-xl: var(--mlz-border-radius-xl, 0.75rem);
52
+ --radius-mlz-sm: var(--mlz-border-radius-sm, 0.25rem);
53
+ --radius-mlz-md: var(--mlz-border-radius-md, 0.375rem);
54
+ --radius-mlz-lg: var(--mlz-border-radius-lg, 0.5rem);
55
+ --radius-mlz-xl: var(--mlz-border-radius-xl, 0.75rem);
55
56
 
56
- --text-mlz-xs: var(--mlz-font-size-xs, 0.75rem);
57
- --text-mlz-sm: var(--mlz-font-size-sm, 0.875rem);
58
- --text-mlz-base: var(--mlz-font-size-base, 1rem);
59
- --text-mlz-lg: var(--mlz-font-size-lg, 1.125rem);
60
- --text-mlz-xl: var(--mlz-font-size-xl, 1.25rem);
57
+ --text-mlz-xs: var(--mlz-font-size-xs, 0.75rem);
58
+ --text-mlz-sm: var(--mlz-font-size-sm, 0.875rem);
59
+ --text-mlz-base: var(--mlz-font-size-base, 1rem);
60
+ --text-mlz-lg: var(--mlz-font-size-lg, 1.125rem);
61
+ --text-mlz-xl: var(--mlz-font-size-xl, 1.25rem);
62
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sector.siit/mlz-components",
3
- "version": "1.0.30",
3
+ "version": "1.0.31",
4
4
  "type": "module",
5
5
  "description": "Una librería de componentes React con Tailwind CSS y variables CSS customizables",
6
6
  "main": "dist/index.js",
@@ -13,9 +13,7 @@
13
13
  "require": "./dist/index.js"
14
14
  },
15
15
  "./styles.css": "./dist/styles.css",
16
- "./variables.css": "./dist/variables.css",
17
16
  "./theme.css": "./dist/theme.css",
18
- "./dist/variables.css": "./dist/variables.css",
19
17
  "./dist/theme.css": "./dist/theme.css"
20
18
  },
21
19
  "sideEffects": [
package/dist/variables.css DELETED
@@ -1,59 +0,0 @@
1
- /* Variables CSS de mlz-components */
2
- :root {
3
- /* Colores primarios */
4
- --mlz-primary-50: #eff6ff;
5
- --mlz-primary-100: #E5F0F9;
6
- --mlz-primary-200: #bfdbfe;
7
- --mlz-primary-300: #94C6E5;
8
- --mlz-primary-400: #5BA8D5;
9
- --mlz-primary-500: #3b82f6;
10
- --mlz-primary-600: #236999;
11
- --mlz-primary-700: #1d4ed8;
12
- --mlz-primary-800: #1e40af;
13
- --mlz-primary-900: #1e3a8a;
14
- --mlz-primary-950: #172554;
15
-
16
- --mlz-semantic-info: #006EFF;
17
- --mlz-semantic-error-600: #EF284C;
18
- --mlz-semantic-success: #1D9C48;
19
-
20
- /* Colores secundarios */
21
- --mlz-secondary-50: #f8fafc;
22
- --mlz-secondary-100: #f1f5f9;
23
- --mlz-secondary-200: #e2e8f0;
24
- --mlz-secondary-300: #cbd5e1;
25
- --mlz-secondary-400: #94a3b8;
26
- --mlz-secondary-500: #64748b;
27
- --mlz-secondary-600: #475569;
28
- --mlz-secondary-700: #334155;
29
- --mlz-secondary-800: #1e293b;
30
- --mlz-secondary-900: #0f172a;
31
- --mlz-secondary-950: #020617;
32
-
33
- /* Variables específicas para Input */
34
- --mlz-input-border-color: #d1d5db;
35
- --mlz-input-label-color: #374151;
36
- --mlz-input-helper-color: #6b7280;
37
- }
38
-
39
- .mlz-label-textarea {
40
- font-family: var(--font-geometria, "Geometria", sans-serif);
41
- font-weight: 700;
42
- font-style: normal;
43
- font-size: 16px;
44
- line-height: 100%;
45
- letter-spacing: 0%;
46
- vertical-align: middle;
47
- }
48
-
49
- .mlz-error-color {
50
- color: var(--mlz-semantic-error-600, #EF284C);
51
- }
52
-
53
- .mlz-error-border {
54
- border-color: var(--mlz-semantic-error-600, #EF284C);
55
- }
56
-
57
- .mlz-error-bg {
58
- background-color: var(--mlz-semantic-error-600, #EF284C);
59
- }