@sector.siit/mlz-components 1.0.10 → 1.0.12

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 (74) hide show
  1. package/README.md +82 -15
  2. package/dist/index.esm.js +24 -1394
  3. package/dist/index.esm.js.map +1 -1
  4. package/dist/index.js +34 -1404
  5. package/dist/index.js.map +1 -1
  6. package/dist/styles.css +1 -1
  7. package/package.json +9 -4
  8. package/dist/components/Button/Button.d.ts +0 -18
  9. package/dist/components/Button/Button.d.ts.map +0 -1
  10. package/dist/components/Button/Button.stories.d.ts +0 -15
  11. package/dist/components/Button/Button.stories.d.ts.map +0 -1
  12. package/dist/components/Button/index.d.ts +0 -3
  13. package/dist/components/Button/index.d.ts.map +0 -1
  14. package/dist/components/Checkbox/Checkbox.d.ts +0 -21
  15. package/dist/components/Checkbox/Checkbox.d.ts.map +0 -1
  16. package/dist/components/Checkbox/Checkbox.stories.d.ts +0 -10
  17. package/dist/components/Checkbox/Checkbox.stories.d.ts.map +0 -1
  18. package/dist/components/Checkbox/index.d.ts +0 -2
  19. package/dist/components/Checkbox/index.d.ts.map +0 -1
  20. package/dist/components/FileInput/FileInput.d.ts +0 -17
  21. package/dist/components/FileInput/FileInput.d.ts.map +0 -1
  22. package/dist/components/FileInput/FileInput.stories.d.ts +0 -11
  23. package/dist/components/FileInput/FileInput.stories.d.ts.map +0 -1
  24. package/dist/components/FileInput/index.d.ts +0 -2
  25. package/dist/components/FileInput/index.d.ts.map +0 -1
  26. package/dist/components/Icons/Check.d.ts +0 -3
  27. package/dist/components/Icons/Check.d.ts.map +0 -1
  28. package/dist/components/Icons/CheckBlue.d.ts +0 -3
  29. package/dist/components/Icons/CheckBlue.d.ts.map +0 -1
  30. package/dist/components/Icons/CheckCircle.d.ts +0 -3
  31. package/dist/components/Icons/CheckCircle.d.ts.map +0 -1
  32. package/dist/components/Icons/ErrorCircle.d.ts +0 -3
  33. package/dist/components/Icons/ErrorCircle.d.ts.map +0 -1
  34. package/dist/components/Icons/InfoCircle.d.ts +0 -3
  35. package/dist/components/Icons/InfoCircle.d.ts.map +0 -1
  36. package/dist/components/Icons/Paperclip.d.ts +0 -3
  37. package/dist/components/Icons/Paperclip.d.ts.map +0 -1
  38. package/dist/components/Icons/WarningTriangle.d.ts +0 -3
  39. package/dist/components/Icons/WarningTriangle.d.ts.map +0 -1
  40. package/dist/components/Input/Input.d.ts +0 -23
  41. package/dist/components/Input/Input.d.ts.map +0 -1
  42. package/dist/components/Input/Input.stories.d.ts +0 -13
  43. package/dist/components/Input/Input.stories.d.ts.map +0 -1
  44. package/dist/components/Input/index.d.ts +0 -3
  45. package/dist/components/Input/index.d.ts.map +0 -1
  46. package/dist/components/Switch/Switch.d.ts +0 -12
  47. package/dist/components/Switch/Switch.d.ts.map +0 -1
  48. package/dist/components/Switch/Switch.stories.d.ts +0 -11
  49. package/dist/components/Switch/Switch.stories.d.ts.map +0 -1
  50. package/dist/components/Switch/index.d.ts +0 -2
  51. package/dist/components/Switch/index.d.ts.map +0 -1
  52. package/dist/components/TextArea/TextArea.d.ts +0 -22
  53. package/dist/components/TextArea/TextArea.d.ts.map +0 -1
  54. package/dist/components/TextArea/TextArea.stories.d.ts +0 -12
  55. package/dist/components/TextArea/TextArea.stories.d.ts.map +0 -1
  56. package/dist/components/TextArea/index.d.ts +0 -2
  57. package/dist/components/TextArea/index.d.ts.map +0 -1
  58. package/dist/components/Toast/Toast.d.ts +0 -10
  59. package/dist/components/Toast/Toast.d.ts.map +0 -1
  60. package/dist/components/Toast/Toast.stories.d.ts +0 -12
  61. package/dist/components/Toast/Toast.stories.d.ts.map +0 -1
  62. package/dist/components/Toast/ToastProvider.d.ts +0 -20
  63. package/dist/components/Toast/ToastProvider.d.ts.map +0 -1
  64. package/dist/components/Toast/index.d.ts +0 -5
  65. package/dist/components/Toast/index.d.ts.map +0 -1
  66. package/dist/components/Toast/toastHelpers.d.ts +0 -14
  67. package/dist/components/Toast/toastHelpers.d.ts.map +0 -1
  68. package/dist/components/UserCard/UserCard.d.ts +0 -8
  69. package/dist/components/UserCard/UserCard.d.ts.map +0 -1
  70. package/dist/components/UserCard/UserCard.stories.d.ts +0 -7
  71. package/dist/components/UserCard/UserCard.stories.d.ts.map +0 -1
  72. package/dist/components/UserCard/index.d.ts +0 -3
  73. package/dist/components/UserCard/index.d.ts.map +0 -1
  74. package/dist/index.d.ts.map +0 -1
package/README.md CHANGED
@@ -43,8 +43,11 @@ bun add @sector.siit/mlz-components
43
43
 
44
44
  ## 🎯 Uso Básico
45
45
 
46
+ ### En React / Vite
47
+
46
48
  ```tsx
47
49
  import { Button } from '@sector.siit/mlz-components';
50
+ import '@sector.siit/mlz-components/styles.css';
48
51
 
49
52
  function App() {
50
53
  return (
@@ -55,6 +58,69 @@ function App() {
55
58
  }
56
59
  ```
57
60
 
61
+ ### En Next.js 13+ (App Router)
62
+
63
+ Los componentes están configurados con `"use client"` y funcionan directamente en Next.js:
64
+
65
+ ```tsx
66
+ // app/page.tsx
67
+ import { Button } from '@sector.siit/mlz-components';
68
+ import '@sector.siit/mlz-components/styles.css';
69
+
70
+ export default function Home() {
71
+ return (
72
+ <main>
73
+ <Button variant="primary" size="md">
74
+ ¡Hola Mundo!
75
+ </Button>
76
+ </main>
77
+ );
78
+ }
79
+ ```
80
+
81
+ #### Configuración de Tailwind en Next.js
82
+
83
+ Si usas Tailwind CSS en tu proyecto Next.js, asegúrate de incluir los componentes en tu `tailwind.config.js`:
84
+
85
+ ```js
86
+ /** @type {import('tailwindcss').Config} */
87
+ module.exports = {
88
+ content: [
89
+ './pages/**/*.{js,ts,jsx,tsx,mdx}',
90
+ './components/**/*.{js,ts,jsx,tsx,mdx}',
91
+ './app/**/*.{js,ts,jsx,tsx,mdx}',
92
+ './node_modules/@sector.siit/mlz-components/dist/**/*.{js,jsx}',
93
+ ],
94
+ theme: {
95
+ extend: {},
96
+ },
97
+ plugins: [],
98
+ }
99
+ ```
100
+
101
+ #### Importar Variables CSS
102
+
103
+ Para personalizar los componentes, importa el archivo de variables en tu layout principal:
104
+
105
+ ```tsx
106
+ // app/layout.tsx
107
+ import '@sector.siit/mlz-components/styles.css';
108
+ import '@sector.siit/mlz-components/variables.css';
109
+ import './globals.css';
110
+
111
+ export default function RootLayout({
112
+ children,
113
+ }: {
114
+ children: React.ReactNode;
115
+ }) {
116
+ return (
117
+ <html lang="es">
118
+ <body>{children}</body>
119
+ </html>
120
+ );
121
+ }
122
+ ```
123
+
58
124
  ## 🎨 Personalización con Variables CSS
59
125
 
60
126
  La librería utiliza variables CSS que puedes sobrescribir en tu proyecto:
@@ -115,13 +181,13 @@ Un componente de botón versatil con múltiples variantes y tamaños.
115
181
 
116
182
  #### Props
117
183
 
118
- | Prop | Tipo | Default | Descripción |
119
- |------|------|---------|-------------|
120
- | `variant` | `'primary' \| 'secondary' \| 'outline-solid' \| 'ghost'` | `'primary'` | Variante visual del botón |
121
- | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Tamaño del botón |
122
- | `children` | `React.ReactNode` | - | Contenido del botón |
123
- | `disabled` | `boolean` | `false` | Estado deshabilitado |
124
- | `onClick` | `(event: MouseEvent) => void` | - | Función de click |
184
+ | Prop | Tipo | Default | Descripción |
185
+ | ---------- | -------------------------------------------------------- | ----------- | ------------------------- |
186
+ | `variant` | `'primary' \| 'secondary' \| 'outline-solid' \| 'ghost'` | `'primary'` | Variante visual del botón |
187
+ | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Tamaño del botón |
188
+ | `children` | `React.ReactNode` | - | Contenido del botón |
189
+ | `disabled` | `boolean` | `false` | Estado deshabilitado |
190
+ | `onClick` | `(event: MouseEvent) => void` | - | Función de click |
125
191
 
126
192
  #### Ejemplos
127
193
 
@@ -147,14 +213,14 @@ Componente de input con validación, estados y personalización completa.
147
213
 
148
214
  #### Props
149
215
 
150
- | Prop | Tipo | Default | Descripción |
151
- |------|------|---------|-------------|
152
- | `variant` | `'default' \| 'error' \| 'success'` | `'default'` | Estado visual del input |
153
- | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Tamaño del input |
154
- | `label` | `string` | - | Texto del label |
155
- | `helperText` | `string` | - | Texto de ayuda |
156
- | `errorText` | `string` | - | Texto de error (sobrescribe helperText) |
157
- | `fullWidth` | `boolean` | `false` | Si el input ocupa todo el ancho |
216
+ | Prop | Tipo | Default | Descripción |
217
+ | ------------ | ----------------------------------- | ----------- | --------------------------------------- |
218
+ | `variant` | `'default' \| 'error' \| 'success'` | `'default'` | Estado visual del input |
219
+ | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Tamaño del input |
220
+ | `label` | `string` | - | Texto del label |
221
+ | `helperText` | `string` | - | Texto de ayuda |
222
+ | `errorText` | `string` | - | Texto de error (sobrescribe helperText) |
223
+ | `fullWidth` | `boolean` | `false` | Si el input ocupa todo el ancho |
158
224
 
159
225
  #### Ejemplos
160
226
 
@@ -295,6 +361,7 @@ git push origin main # 🚀 Publica a NPM + GitHub Release
295
361
 
296
362
  - [🛠️ Developer Guide](./docs/DEVELOPER.md) - Guía completa para desarrolladores
297
363
  - [🚀 CI/CD Documentation](./docs/CI-CD.md) - Sistema de deployments automatizados
364
+ - [⚡ Next.js Integration Guide](./docs/NEXTJS_GUIDE.md) - Guía completa para usar en Next.js
298
365
 
299
366
  ## 👥 Contributors
300
367