@sector.siit/mlz-components 1.0.10 → 1.0.11

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 +95 -15
  2. package/dist/index.esm.js +2 -0
  3. package/dist/index.esm.js.map +1 -1
  4. package/dist/index.js +2 -0
  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,6 +43,86 @@ bun add @sector.siit/mlz-components
43
43
 
44
44
  ## 🎯 Uso Básico
45
45
 
46
+ ### En React / Vite
47
+
48
+ ```tsx
49
+ import { Button } from '@sector.siit/mlz-components';
50
+ import '@sector.siit/mlz-components/styles.css';
51
+
52
+ function App() {
53
+ return (
54
+ <Button variant="primary" size="md">
55
+ ¡Hola Mundo!
56
+ </Button>
57
+ );
58
+ }
59
+ ```
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
+
124
+ ### En React / Vite
125
+
46
126
  ```tsx
47
127
  import { Button } from '@sector.siit/mlz-components';
48
128
 
@@ -115,13 +195,13 @@ Un componente de botón versatil con múltiples variantes y tamaños.
115
195
 
116
196
  #### Props
117
197
 
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 |
198
+ | Prop | Tipo | Default | Descripción |
199
+ | ---------- | -------------------------------------------------------- | ----------- | ------------------------- |
200
+ | `variant` | `'primary' \| 'secondary' \| 'outline-solid' \| 'ghost'` | `'primary'` | Variante visual del botón |
201
+ | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Tamaño del botón |
202
+ | `children` | `React.ReactNode` | - | Contenido del botón |
203
+ | `disabled` | `boolean` | `false` | Estado deshabilitado |
204
+ | `onClick` | `(event: MouseEvent) => void` | - | Función de click |
125
205
 
126
206
  #### Ejemplos
127
207
 
@@ -147,14 +227,14 @@ Componente de input con validación, estados y personalización completa.
147
227
 
148
228
  #### Props
149
229
 
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 |
230
+ | Prop | Tipo | Default | Descripción |
231
+ | ------------ | ----------------------------------- | ----------- | --------------------------------------- |
232
+ | `variant` | `'default' \| 'error' \| 'success'` | `'default'` | Estado visual del input |
233
+ | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Tamaño del input |
234
+ | `label` | `string` | - | Texto del label |
235
+ | `helperText` | `string` | - | Texto de ayuda |
236
+ | `errorText` | `string` | - | Texto de error (sobrescribe helperText) |
237
+ | `fullWidth` | `boolean` | `false` | Si el input ocupa todo el ancho |
158
238
 
159
239
  #### Ejemplos
160
240
 
package/dist/index.esm.js CHANGED
@@ -1,3 +1,5 @@
1
+ 'use client';
2
+
1
3
  import require$$0, { createContext, useContext, useState, useCallback } from 'react';
2
4
  import toast from 'react-hot-toast';
3
5
  export { Toaster, toast } from 'react-hot-toast';