@sector.siit/mlz-components 1.0.9 → 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 (75) hide show
  1. package/README.md +95 -15
  2. package/dist/index.d.ts +39 -39
  3. package/dist/index.esm.js +6 -4
  4. package/dist/index.esm.js.map +1 -1
  5. package/dist/index.js +6 -4
  6. package/dist/index.js.map +1 -1
  7. package/dist/styles.css +1 -1
  8. package/package.json +9 -4
  9. package/dist/components/Button/Button.d.ts +0 -18
  10. package/dist/components/Button/Button.d.ts.map +0 -1
  11. package/dist/components/Button/Button.stories.d.ts +0 -15
  12. package/dist/components/Button/Button.stories.d.ts.map +0 -1
  13. package/dist/components/Button/index.d.ts +0 -3
  14. package/dist/components/Button/index.d.ts.map +0 -1
  15. package/dist/components/Checkbox/Checkbox.d.ts +0 -21
  16. package/dist/components/Checkbox/Checkbox.d.ts.map +0 -1
  17. package/dist/components/Checkbox/Checkbox.stories.d.ts +0 -10
  18. package/dist/components/Checkbox/Checkbox.stories.d.ts.map +0 -1
  19. package/dist/components/Checkbox/index.d.ts +0 -2
  20. package/dist/components/Checkbox/index.d.ts.map +0 -1
  21. package/dist/components/FileInput/FileInput.d.ts +0 -17
  22. package/dist/components/FileInput/FileInput.d.ts.map +0 -1
  23. package/dist/components/FileInput/FileInput.stories.d.ts +0 -11
  24. package/dist/components/FileInput/FileInput.stories.d.ts.map +0 -1
  25. package/dist/components/FileInput/index.d.ts +0 -2
  26. package/dist/components/FileInput/index.d.ts.map +0 -1
  27. package/dist/components/Icons/Check.d.ts +0 -3
  28. package/dist/components/Icons/Check.d.ts.map +0 -1
  29. package/dist/components/Icons/CheckBlue.d.ts +0 -3
  30. package/dist/components/Icons/CheckBlue.d.ts.map +0 -1
  31. package/dist/components/Icons/CheckCircle.d.ts +0 -3
  32. package/dist/components/Icons/CheckCircle.d.ts.map +0 -1
  33. package/dist/components/Icons/ErrorCircle.d.ts +0 -3
  34. package/dist/components/Icons/ErrorCircle.d.ts.map +0 -1
  35. package/dist/components/Icons/InfoCircle.d.ts +0 -3
  36. package/dist/components/Icons/InfoCircle.d.ts.map +0 -1
  37. package/dist/components/Icons/Paperclip.d.ts +0 -3
  38. package/dist/components/Icons/Paperclip.d.ts.map +0 -1
  39. package/dist/components/Icons/WarningTriangle.d.ts +0 -3
  40. package/dist/components/Icons/WarningTriangle.d.ts.map +0 -1
  41. package/dist/components/Input/Input.d.ts +0 -23
  42. package/dist/components/Input/Input.d.ts.map +0 -1
  43. package/dist/components/Input/Input.stories.d.ts +0 -13
  44. package/dist/components/Input/Input.stories.d.ts.map +0 -1
  45. package/dist/components/Input/index.d.ts +0 -3
  46. package/dist/components/Input/index.d.ts.map +0 -1
  47. package/dist/components/Switch/Switch.d.ts +0 -12
  48. package/dist/components/Switch/Switch.d.ts.map +0 -1
  49. package/dist/components/Switch/Switch.stories.d.ts +0 -11
  50. package/dist/components/Switch/Switch.stories.d.ts.map +0 -1
  51. package/dist/components/Switch/index.d.ts +0 -2
  52. package/dist/components/Switch/index.d.ts.map +0 -1
  53. package/dist/components/TextArea/TextArea.d.ts +0 -22
  54. package/dist/components/TextArea/TextArea.d.ts.map +0 -1
  55. package/dist/components/TextArea/TextArea.stories.d.ts +0 -12
  56. package/dist/components/TextArea/TextArea.stories.d.ts.map +0 -1
  57. package/dist/components/TextArea/index.d.ts +0 -2
  58. package/dist/components/TextArea/index.d.ts.map +0 -1
  59. package/dist/components/Toast/Toast.d.ts +0 -10
  60. package/dist/components/Toast/Toast.d.ts.map +0 -1
  61. package/dist/components/Toast/Toast.stories.d.ts +0 -12
  62. package/dist/components/Toast/Toast.stories.d.ts.map +0 -1
  63. package/dist/components/Toast/ToastProvider.d.ts +0 -20
  64. package/dist/components/Toast/ToastProvider.d.ts.map +0 -1
  65. package/dist/components/Toast/index.d.ts +0 -5
  66. package/dist/components/Toast/index.d.ts.map +0 -1
  67. package/dist/components/Toast/toastHelpers.d.ts +0 -14
  68. package/dist/components/Toast/toastHelpers.d.ts.map +0 -1
  69. package/dist/components/UserCard/UserCard.d.ts +0 -8
  70. package/dist/components/UserCard/UserCard.d.ts.map +0 -1
  71. package/dist/components/UserCard/UserCard.stories.d.ts +0 -7
  72. package/dist/components/UserCard/UserCard.stories.d.ts.map +0 -1
  73. package/dist/components/UserCard/index.d.ts +0 -3
  74. package/dist/components/UserCard/index.d.ts.map +0 -1
  75. 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.d.ts CHANGED
@@ -40,6 +40,45 @@ interface HelperTextProp extends React.HTMLAttributes<HTMLParagraphElement> {
40
40
  }
41
41
  declare const Input: React.FC<InputProps>;
42
42
 
43
+ type ToastVariant$1 = "success" | "info" | "warning" | "error";
44
+ interface ToastProps {
45
+ title: string;
46
+ description?: string;
47
+ variant?: ToastVariant$1;
48
+ onClose?: () => void;
49
+ }
50
+ declare const Toast: React$2.FC<ToastProps>;
51
+
52
+ interface ToastItem extends Omit<ToastProps, "onClose"> {
53
+ id: string;
54
+ duration?: number;
55
+ }
56
+ interface ToastContextType {
57
+ toasts: ToastItem[];
58
+ showToast: (toast: Omit<ToastItem, "id">) => string;
59
+ removeToast: (id: string) => void;
60
+ clearToasts: () => void;
61
+ }
62
+ declare const useToast: () => ToastContextType;
63
+ interface ToastProviderProps {
64
+ children: React$2.ReactNode;
65
+ position?: "top-right" | "top-left" | "bottom-right" | "bottom-left" | "top-center" | "bottom-center";
66
+ }
67
+ declare const ToastProvider: React$2.FC<ToastProviderProps>;
68
+
69
+ type ToastVariant = "success" | "info" | "warning" | "error";
70
+ interface ToastOptions {
71
+ title: string;
72
+ description?: string;
73
+ variant?: ToastVariant;
74
+ duration?: number;
75
+ }
76
+ declare const showToast: ({ title, description, variant, duration, }: ToastOptions) => string;
77
+ declare const toastSuccess: (title: string, description?: string, duration?: number) => string;
78
+ declare const toastInfo: (title: string, description?: string, duration?: number) => string;
79
+ declare const toastWarning: (title: string, description?: string, duration?: number) => string;
80
+ declare const toastError: (title: string, description?: string, duration?: number) => string;
81
+
43
82
  interface StandardLonghandProperties<TLength = (string & {}) | 0, TTime = string & {}> {
44
83
  /**
45
84
  * The **`accent-color`** CSS property sets the accent color for user-interface controls generated by some elements.
@@ -14828,43 +14867,4 @@ interface UserCardProps {
14828
14867
  }
14829
14868
  declare function UserCard({ name, email, changeUser, editUser }: UserCardProps): JSX$1.Element;
14830
14869
 
14831
- type ToastVariant$1 = "success" | "info" | "warning" | "error";
14832
- interface ToastProps {
14833
- title: string;
14834
- description?: string;
14835
- variant?: ToastVariant$1;
14836
- onClose?: () => void;
14837
- }
14838
- declare const Toast: React$2.FC<ToastProps>;
14839
-
14840
- interface ToastItem extends Omit<ToastProps, "onClose"> {
14841
- id: string;
14842
- duration?: number;
14843
- }
14844
- interface ToastContextType {
14845
- toasts: ToastItem[];
14846
- showToast: (toast: Omit<ToastItem, "id">) => string;
14847
- removeToast: (id: string) => void;
14848
- clearToasts: () => void;
14849
- }
14850
- declare const useToast: () => ToastContextType;
14851
- interface ToastProviderProps {
14852
- children: React$2.ReactNode;
14853
- position?: "top-right" | "top-left" | "bottom-right" | "bottom-left" | "top-center" | "bottom-center";
14854
- }
14855
- declare const ToastProvider: React$2.FC<ToastProviderProps>;
14856
-
14857
- type ToastVariant = "success" | "info" | "warning" | "error";
14858
- interface ToastOptions {
14859
- title: string;
14860
- description?: string;
14861
- variant?: ToastVariant;
14862
- duration?: number;
14863
- }
14864
- declare const showToast: ({ title, description, variant, duration, }: ToastOptions) => string;
14865
- declare const toastSuccess: (title: string, description?: string, duration?: number) => string;
14866
- declare const toastInfo: (title: string, description?: string, duration?: number) => string;
14867
- declare const toastWarning: (title: string, description?: string, duration?: number) => string;
14868
- declare const toastError: (title: string, description?: string, duration?: number) => string;
14869
-
14870
14870
  export { Button, type ButtonProps, Input, type InputProps, Toast, type ToastOptions, type ToastProps, ToastProvider, type ToastVariant$1 as ToastVariant, UserCard, type UserCardProps, showToast, toastError, toastInfo, toastSuccess, toastWarning, useToast };
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';
@@ -1422,10 +1424,6 @@ const Input = ({ labelProps, helperTextProps, containerProps, errorText, helperT
1422
1424
  return (jsxRuntimeExports.jsxs("div", { className: classes.containerStyle, children: [jsxRuntimeExports.jsx("label", { ...labelProps, className: classes.labelStyle, children: label }), jsxRuntimeExports.jsx("input", { ...props, disabled: disabled, placeholder: placeholder, className: classes.inputStyle }), checkedIcon && (jsxRuntimeExports.jsx("div", { className: "absolute right-4 top-1/2 -translate-y-1/2", children: jsxRuntimeExports.jsx(CheckIcon, {}) })), jsxRuntimeExports.jsx("p", { ...helperTextProps, className: classes.helperTextStyle, children: errorText ? errorText : helperText })] }));
1423
1425
  };
1424
1426
 
1425
- function UserCard({ name, email, changeUser, editUser }) {
1426
- return (jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsx("h2", { children: name }), jsxRuntimeExports.jsx("p", { children: email }), jsxRuntimeExports.jsx("button", { type: "button", onClick: changeUser, children: "Change User" }), jsxRuntimeExports.jsx("button", { type: "button", onClick: editUser, children: "Edit User" })] }));
1427
- }
1428
-
1429
1427
  const CheckCircleIcon = (props) => (jsxRuntimeExports.jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: jsxRuntimeExports.jsx("path", { d: "M8.6 14.6L15.65 7.55L14.25 6.15L8.6 11.8L5.75 8.95L4.35 10.35L8.6 14.6ZM10 20C8.61667 20 7.31667 19.7375 6.1 19.2125C4.88333 18.6875 3.825 17.975 2.925 17.075C2.025 16.175 1.3125 15.1167 0.7875 13.9C0.2625 12.6833 0 11.3833 0 10C0 8.61667 0.2625 7.31667 0.7875 6.1C1.3125 4.88333 2.025 3.825 2.925 2.925C3.825 2.025 4.88333 1.3125 6.1 0.7875C7.31667 0.2625 8.61667 0 10 0C11.3833 0 12.6833 0.2625 13.9 0.7875C15.1167 1.3125 16.175 2.025 17.075 2.925C17.975 3.825 18.6875 4.88333 19.2125 6.1C19.7375 7.31667 20 8.61667 20 10C20 11.3833 19.7375 12.6833 19.2125 13.9C18.6875 15.1167 17.975 16.175 17.075 17.075C16.175 17.975 15.1167 18.6875 13.9 19.2125C12.6833 19.7375 11.3833 20 10 20ZM10 18C12.2333 18 14.125 17.225 15.675 15.675C17.225 14.125 18 12.2333 18 10C18 7.76667 17.225 5.875 15.675 4.325C14.125 2.775 12.2333 2 10 2C7.76667 2 5.875 2.775 4.325 4.325C2.775 5.875 2 7.76667 2 10C2 12.2333 2.775 14.125 4.325 15.675C5.875 17.225 7.76667 18 10 18Z", fill: "currentColor" }) }));
1430
1428
 
1431
1429
  const ErrorCircleIcon = (props) => (jsxRuntimeExports.jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [jsxRuntimeExports.jsx("circle", { cx: "10", cy: "10", r: "10", fill: "currentColor" }), jsxRuntimeExports.jsx("path", { d: "M7 7L13 13M13 7L7 13", stroke: "white", strokeWidth: "2", strokeLinecap: "round" })] }));
@@ -1630,5 +1628,9 @@ const toastInfo = (title, description, duration) => showToast({ title, descripti
1630
1628
  const toastWarning = (title, description, duration) => showToast({ title, description, variant: "warning", duration });
1631
1629
  const toastError = (title, description, duration) => showToast({ title, description, variant: "error", duration });
1632
1630
 
1631
+ function UserCard({ name, email, changeUser, editUser }) {
1632
+ return (jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsx("h2", { children: name }), jsxRuntimeExports.jsx("p", { children: email }), jsxRuntimeExports.jsx("button", { type: "button", onClick: changeUser, children: "Change User" }), jsxRuntimeExports.jsx("button", { type: "button", onClick: editUser, children: "Edit User" })] }));
1633
+ }
1634
+
1633
1635
  export { Button, Input, Toast, ToastProvider, UserCard, showToast, toastError, toastInfo, toastSuccess, toastWarning, useToast };
1634
1636
  //# sourceMappingURL=index.esm.js.map