ywana-core8 0.1.84 → 0.1.85

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 (72) hide show
  1. package/__previewjs__/Wrapper.tsx +8 -5
  2. package/build-doc.sh +10 -0
  3. package/dist/index.cjs +418 -118
  4. package/dist/index.cjs.map +1 -1
  5. package/dist/index.css +294 -94
  6. package/dist/index.css.map +1 -1
  7. package/dist/index.modern.js +418 -119
  8. package/dist/index.modern.js.map +1 -1
  9. package/dist/index.umd.js +420 -120
  10. package/dist/index.umd.js.map +1 -1
  11. package/doc/README.md +196 -0
  12. package/doc/craco.config.js +31 -0
  13. package/doc/generate-examples.cjs +310 -0
  14. package/doc/package-lock.json +17298 -0
  15. package/doc/package.json +33 -0
  16. package/doc/public/index.html +22 -0
  17. package/doc/src/App.css +171 -0
  18. package/doc/src/App.js +214 -0
  19. package/doc/src/components/ExamplePage.js +104 -0
  20. package/doc/src/components/WelcomePage.js +84 -0
  21. package/doc/src/examples/button.example.js +47 -0
  22. package/doc/src/examples/input.example.js +91 -0
  23. package/doc/src/index.css +237 -0
  24. package/doc/src/index.js +11 -0
  25. package/package.json +9 -2
  26. package/preview.config.js +38 -0
  27. package/src/html/accordion.example.js +2 -2
  28. package/src/html/actions-cell.css +108 -0
  29. package/src/html/actions-cell.example.js +587 -0
  30. package/src/html/actions-cell.js +260 -0
  31. package/src/html/checkbox.example.js +2 -2
  32. package/src/html/chip.example.js +2 -2
  33. package/src/html/color.example.js +2 -2
  34. package/src/html/form.example.js +2 -2
  35. package/src/html/header2.example.js +2 -2
  36. package/src/html/index.js +1 -0
  37. package/src/html/menu.css +9 -2
  38. package/src/html/menu.js +14 -2
  39. package/src/html/progress.example.js +2 -2
  40. package/src/html/property.example.js +2 -2
  41. package/src/html/radio.example.js +2 -2
  42. package/src/html/switch.example.js +2 -2
  43. package/src/html/tab.example.js +2 -2
  44. package/src/html/table.css +47 -1
  45. package/src/html/table.example.js +1012 -0
  46. package/src/html/table.js +12 -7
  47. package/src/html/table2-actions-test.js +138 -0
  48. package/src/html/table2.css +40 -3
  49. package/src/html/table2.example.js +330 -0
  50. package/src/html/table2.js +56 -13
  51. package/src/html/tokenfield.example.js +2 -2
  52. package/src/widgets/calendar/Calendar.js +1 -1
  53. /package/{ACCORDION_EVALUATION.md → doc/evalulations/ACCORDION_EVALUATION.md} +0 -0
  54. /package/{CHECKBOX_EVALUATION.md → doc/evalulations/CHECKBOX_EVALUATION.md} +0 -0
  55. /package/{CHIP_EVALUATION.md → doc/evalulations/CHIP_EVALUATION.md} +0 -0
  56. /package/{COLOR_EVALUATION.md → doc/evalulations/COLOR_EVALUATION.md} +0 -0
  57. /package/{COMPONENTS_EVALUATION.md → doc/evalulations/COMPONENTS_EVALUATION.md} +0 -0
  58. /package/{FORM_EVALUATION.md → doc/evalulations/FORM_EVALUATION.md} +0 -0
  59. /package/{HEADER_EVALUATION.md → doc/evalulations/HEADER_EVALUATION.md} +0 -0
  60. /package/{ICON_EVALUATION.md → doc/evalulations/ICON_EVALUATION.md} +0 -0
  61. /package/{LIST_EVALUATION.md → doc/evalulations/LIST_EVALUATION.md} +0 -0
  62. /package/{PROGRESS_EVALUATION.md → doc/evalulations/PROGRESS_EVALUATION.md} +0 -0
  63. /package/{RADIO_EVALUATION.md → doc/evalulations/RADIO_EVALUATION.md} +0 -0
  64. /package/{RADIO_VISUAL_FIX.md → doc/evalulations/RADIO_VISUAL_FIX.md} +0 -0
  65. /package/{SECTION_IMPROVEMENTS.md → doc/evalulations/SECTION_IMPROVEMENTS.md} +0 -0
  66. /package/{SWITCH_EVALUATION.md → doc/evalulations/SWITCH_EVALUATION.md} +0 -0
  67. /package/{SWITCH_VISUAL_FIX.md → doc/evalulations/SWITCH_VISUAL_FIX.md} +0 -0
  68. /package/{TAB_EVALUATION.md → doc/evalulations/TAB_EVALUATION.md} +0 -0
  69. /package/{TEXTFIELD_EVALUATION.md → doc/evalulations/TEXTFIELD_EVALUATION.md} +0 -0
  70. /package/{TOOLTIP_FIX.md → doc/evalulations/TOOLTIP_FIX.md} +0 -0
  71. /package/{TREE_EVALUATION.md → doc/evalulations/TREE_EVALUATION.md} +0 -0
  72. /package/src/incubator/{PDFViewer.js → pdfViewer.js} +0 -0
package/doc/package.json ADDED
@@ -0,0 +1,33 @@
1
+ {
2
+ "name": "doc",
3
+ "version": "1.0.0",
4
+ "description": "Este directorio contiene la documentación interactiva de todos los componentes de Ywana Core8, implementada como un sitio web estático con React.",
5
+ "main": "index.js",
6
+ "scripts": {
7
+ "start": "react-scripts start",
8
+ "build": "react-scripts build",
9
+ "test": "react-scripts test",
10
+ "eject": "react-scripts eject"
11
+ },
12
+ "keywords": [],
13
+ "author": "",
14
+ "license": "ISC",
15
+ "dependencies": {
16
+ "react": "^19.1.1",
17
+ "react-dom": "^19.1.1",
18
+ "react-scripts": "^5.0.1",
19
+ "ywana-core8": "^0.1.84"
20
+ },
21
+ "browserslist": {
22
+ "production": [
23
+ ">0.2%",
24
+ "not dead",
25
+ "not op_mini all"
26
+ ],
27
+ "development": [
28
+ "last 1 chrome version",
29
+ "last 1 firefox version",
30
+ "last 1 safari version"
31
+ ]
32
+ }
33
+ }
package/doc/public/index.html ADDED
@@ -0,0 +1,22 @@
1
+ <!DOCTYPE html>
2
+ <html lang="es">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
7
+ <meta name="theme-color" content="#000000" />
8
+ <meta name="description" content="Documentación interactiva de Ywana Core8" />
9
+
10
+ <!-- Material Icons -->
11
+ <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
12
+
13
+ <!-- Google Fonts -->
14
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
15
+
16
+ <title>Ywana Core8 - Documentación</title>
17
+ </head>
18
+ <body>
19
+ <noscript>Necesitas habilitar JavaScript para ejecutar esta aplicación.</noscript>
20
+ <div id="root"></div>
21
+ </body>
22
+ </html>
package/doc/src/App.css ADDED
@@ -0,0 +1,171 @@
1
+ /* Estilos específicos para la aplicación */
2
+ .App {
3
+ text-align: center;
4
+ }
5
+
6
+ /* Estilos para páginas de ejemplo */
7
+ .example-page {
8
+ max-width: 1200px;
9
+ margin: 0 auto;
10
+ padding: 2rem;
11
+ }
12
+
13
+ .content-header {
14
+ margin-bottom: 3rem;
15
+ text-align: left;
16
+ }
17
+
18
+ .content-header h1 {
19
+ font-size: 2.5rem;
20
+ font-weight: 700;
21
+ color: var(--text-primary);
22
+ margin-bottom: 1rem;
23
+ }
24
+
25
+ .content-header p {
26
+ font-size: 1.125rem;
27
+ color: var(--text-secondary);
28
+ max-width: 600px;
29
+ }
30
+
31
+ .breadcrumb {
32
+ display: flex;
33
+ align-items: center;
34
+ gap: 0.5rem;
35
+ color: var(--text-secondary);
36
+ font-size: 0.875rem;
37
+ margin-bottom: 1rem;
38
+ }
39
+
40
+ .breadcrumb .material-icons {
41
+ font-size: 1rem;
42
+ }
43
+
44
+ /* Estilos para la página de bienvenida */
45
+ .welcome-page {
46
+ max-width: 800px;
47
+ margin: 0 auto;
48
+ padding: 3rem 2rem;
49
+ text-align: center;
50
+ }
51
+
52
+ .welcome-hero {
53
+ margin-bottom: 4rem;
54
+ }
55
+
56
+ .welcome-hero h1 {
57
+ font-size: 3.5rem;
58
+ font-weight: 800;
59
+ background: linear-gradient(135deg, var(--primary-color), #8b5cf6);
60
+ -webkit-background-clip: text;
61
+ -webkit-text-fill-color: transparent;
62
+ background-clip: text;
63
+ margin-bottom: 1.5rem;
64
+ }
65
+
66
+ .welcome-hero p {
67
+ font-size: 1.25rem;
68
+ color: var(--text-secondary);
69
+ max-width: 600px;
70
+ margin: 0 auto;
71
+ line-height: 1.7;
72
+ }
73
+
74
+ .welcome-features {
75
+ display: grid;
76
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
77
+ gap: 2rem;
78
+ margin-bottom: 4rem;
79
+ }
80
+
81
+ .feature-card {
82
+ background: var(--surface-color);
83
+ border: 1px solid var(--border-color);
84
+ border-radius: var(--radius-lg);
85
+ padding: 2rem;
86
+ text-align: center;
87
+ box-shadow: var(--shadow-sm);
88
+ transition: all 0.2s ease;
89
+ }
90
+
91
+ .feature-card:hover {
92
+ box-shadow: var(--shadow-md);
93
+ transform: translateY(-2px);
94
+ }
95
+
96
+ .feature-icon {
97
+ width: 3rem;
98
+ height: 3rem;
99
+ background: linear-gradient(135deg, var(--primary-color), #8b5cf6);
100
+ border-radius: 50%;
101
+ display: flex;
102
+ align-items: center;
103
+ justify-content: center;
104
+ margin: 0 auto 1rem;
105
+ color: white;
106
+ }
107
+
108
+ .feature-card h3 {
109
+ font-size: 1.25rem;
110
+ font-weight: 600;
111
+ color: var(--text-primary);
112
+ margin-bottom: 0.5rem;
113
+ }
114
+
115
+ .feature-card p {
116
+ color: var(--text-secondary);
117
+ font-size: 0.875rem;
118
+ line-height: 1.6;
119
+ }
120
+
121
+ .welcome-stats {
122
+ display: grid;
123
+ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
124
+ gap: 2rem;
125
+ background: var(--surface-color);
126
+ border: 1px solid var(--border-color);
127
+ border-radius: var(--radius-lg);
128
+ padding: 2rem;
129
+ box-shadow: var(--shadow-sm);
130
+ }
131
+
132
+ .stat-item {
133
+ text-align: center;
134
+ }
135
+
136
+ .stat-number {
137
+ font-size: 2rem;
138
+ font-weight: 700;
139
+ color: var(--primary-color);
140
+ display: block;
141
+ }
142
+
143
+ .stat-label {
144
+ font-size: 0.875rem;
145
+ color: var(--text-secondary);
146
+ text-transform: uppercase;
147
+ letter-spacing: 0.05em;
148
+ }
149
+
150
+ /* Responsive */
151
+ @media (max-width: 768px) {
152
+ .welcome-hero h1 {
153
+ font-size: 2.5rem;
154
+ }
155
+
156
+ .welcome-features {
157
+ grid-template-columns: 1fr;
158
+ }
159
+
160
+ .welcome-stats {
161
+ grid-template-columns: repeat(2, 1fr);
162
+ }
163
+
164
+ .example-page {
165
+ padding: 1rem;
166
+ }
167
+
168
+ .content-header h1 {
169
+ font-size: 2rem;
170
+ }
171
+ }
package/doc/src/App.js ADDED
@@ -0,0 +1,214 @@
1
+ import React from 'react';
2
+ import { Site, Page } from 'ywana-core8';
3
+ import './App.css';
4
+
5
+ // Importar componentes de ejemplo
6
+ import WelcomePage from './components/WelcomePage';
7
+ import ExamplePage from './components/ExamplePage';
8
+
9
+ // Configuración de ejemplos
10
+ const EXAMPLES_CONFIG = [
11
+ {
12
+ id: 'button-examples',
13
+ title: 'Button',
14
+ description: 'Componente de botón con diferentes variantes y estados',
15
+ category: 'Inputs',
16
+ icon: 'smart_button',
17
+ file: 'button.example.js'
18
+ },
19
+ {
20
+ id: 'input-examples',
21
+ title: 'Input',
22
+ description: 'Campos de entrada de texto con validación y estados',
23
+ category: 'Inputs',
24
+ icon: 'input',
25
+ file: 'input.example.js'
26
+ },
27
+ {
28
+ id: 'select-examples',
29
+ title: 'Select',
30
+ description: 'Componente de selección con opciones múltiples',
31
+ category: 'Inputs',
32
+ icon: 'arrow_drop_down_circle',
33
+ file: 'select.example.js'
34
+ },
35
+ {
36
+ id: 'checkbox-examples',
37
+ title: 'Checkbox',
38
+ description: 'Casillas de verificación con estados personalizados',
39
+ category: 'Inputs',
40
+ icon: 'check_box',
41
+ file: 'checkbox.example.js'
42
+ },
43
+ {
44
+ id: 'radio-examples',
45
+ title: 'Radio',
46
+ description: 'Botones de radio para selección única',
47
+ category: 'Inputs',
48
+ icon: 'radio_button_checked',
49
+ file: 'radio.example.js'
50
+ },
51
+ {
52
+ id: 'textarea-examples',
53
+ title: 'Textarea',
54
+ description: 'Área de texto multilínea con redimensionamiento',
55
+ category: 'Inputs',
56
+ icon: 'notes',
57
+ file: 'textarea.example.js'
58
+ },
59
+ {
60
+ id: 'switch-examples',
61
+ title: 'Switch',
62
+ description: 'Interruptores de encendido/apagado',
63
+ category: 'Inputs',
64
+ icon: 'toggle_on',
65
+ file: 'switch.example.js'
66
+ },
67
+ {
68
+ id: 'slider-examples',
69
+ title: 'Slider',
70
+ description: 'Control deslizante para selección de valores',
71
+ category: 'Inputs',
72
+ icon: 'tune',
73
+ file: 'slider.example.js'
74
+ },
75
+ {
76
+ id: 'card-examples',
77
+ title: 'Card',
78
+ description: 'Tarjetas de contenido con diferentes layouts',
79
+ category: 'Layout',
80
+ icon: 'credit_card',
81
+ file: 'card.example.js'
82
+ },
83
+ {
84
+ id: 'modal-examples',
85
+ title: 'Modal',
86
+ description: 'Ventanas modales y diálogos',
87
+ category: 'Layout',
88
+ icon: 'open_in_new',
89
+ file: 'modal.example.js'
90
+ },
91
+ {
92
+ id: 'tabs-examples',
93
+ title: 'Tabs',
94
+ description: 'Pestañas para organizar contenido',
95
+ category: 'Layout',
96
+ icon: 'tab',
97
+ file: 'tabs.example.js'
98
+ },
99
+ {
100
+ id: 'accordion-examples',
101
+ title: 'Accordion',
102
+ description: 'Paneles expandibles para contenido',
103
+ category: 'Layout',
104
+ icon: 'expand_more',
105
+ file: 'accordion.example.js'
106
+ },
107
+ {
108
+ id: 'table-examples',
109
+ title: 'Table',
110
+ description: 'Tablas de datos con ordenamiento y filtros',
111
+ category: 'Data',
112
+ icon: 'table_chart',
113
+ file: 'table.example.js'
114
+ },
115
+ {
116
+ id: 'list-examples',
117
+ title: 'List',
118
+ description: 'Listas de elementos con diferentes estilos',
119
+ category: 'Data',
120
+ icon: 'list',
121
+ file: 'list.example.js'
122
+ },
123
+ {
124
+ id: 'pagination-examples',
125
+ title: 'Pagination',
126
+ description: 'Controles de paginación para datos',
127
+ category: 'Data',
128
+ icon: 'last_page',
129
+ file: 'pagination.example.js'
130
+ },
131
+ {
132
+ id: 'alert-examples',
133
+ title: 'Alert',
134
+ description: 'Alertas y notificaciones para el usuario',
135
+ category: 'Feedback',
136
+ icon: 'notification_important',
137
+ file: 'alert.example.js'
138
+ },
139
+ {
140
+ id: 'toast-examples',
141
+ title: 'Toast',
142
+ description: 'Notificaciones temporales tipo toast',
143
+ category: 'Feedback',
144
+ icon: 'campaign',
145
+ file: 'toast.example.js'
146
+ },
147
+ {
148
+ id: 'progress-examples',
149
+ title: 'Progress',
150
+ description: 'Barras de progreso y indicadores de carga',
151
+ category: 'Feedback',
152
+ icon: 'progress_activity',
153
+ file: 'progress.example.js'
154
+ },
155
+ {
156
+ id: 'spinner-examples',
157
+ title: 'Spinner',
158
+ description: 'Indicadores de carga giratorios',
159
+ category: 'Feedback',
160
+ icon: 'refresh',
161
+ file: 'spinner.example.js'
162
+ },
163
+ {
164
+ id: 'tooltip-examples',
165
+ title: 'Tooltip',
166
+ description: 'Información contextual en hover',
167
+ category: 'Feedback',
168
+ icon: 'help',
169
+ file: 'tooltip.example.js'
170
+ },
171
+ {
172
+ id: 'badge-examples',
173
+ title: 'Badge',
174
+ description: 'Etiquetas y badges informativos',
175
+ category: 'Feedback',
176
+ icon: 'label',
177
+ file: 'badge.example.js'
178
+ }
179
+ ];
180
+
181
+ function App() {
182
+ return (
183
+ <Site
184
+ icon="widgets"
185
+ title="Ywana Core8"
186
+ init="welcome"
187
+ >
188
+ {/* Página de bienvenida */}
189
+ <Page
190
+ id="welcome"
191
+ title="Bienvenida"
192
+ icon="home"
193
+ section="Overview"
194
+ >
195
+ <WelcomePage />
196
+ </Page>
197
+
198
+ {/* Páginas de ejemplos */}
199
+ {EXAMPLES_CONFIG.map(example => (
200
+ <Page
201
+ key={example.id}
202
+ id={example.id}
203
+ title={example.title}
204
+ icon={example.icon}
205
+ section={example.category}
206
+ >
207
+ <ExamplePage example={example} />
208
+ </Page>
209
+ ))}
210
+ </Site>
211
+ );
212
+ }
213
+
214
+ export default App;
package/doc/src/components/ExamplePage.js ADDED
@@ -0,0 +1,104 @@
1
+ import React, { useState, useEffect } from 'react';
2
+
3
+ const CATEGORIES = {
4
+ 'Inputs': { icon: 'input' },
5
+ 'Layout': { icon: 'view_quilt' },
6
+ 'Data': { icon: 'table_chart' },
7
+ 'Feedback': { icon: 'feedback' }
8
+ };
9
+
10
+ const ExamplePage = ({ example }) => {
11
+ const [ExampleComponent, setExampleComponent] = useState(null);
12
+ const [loading, setLoading] = useState(true);
13
+ const [error, setError] = useState(null);
14
+
15
+ useEffect(() => {
16
+ const loadExample = async () => {
17
+ try {
18
+ setLoading(true);
19
+ setError(null);
20
+
21
+ // Intentar cargar el componente de ejemplo dinámicamente
22
+ // Esto asume que los archivos de ejemplo están en la carpeta examples/
23
+ const componentName = example.file.replace('.example.js', '');
24
+ const modulePath = `../examples/${componentName}.example.js`;
25
+
26
+ try {
27
+ const module = await import(modulePath);
28
+ const Component = module.default || module[Object.keys(module)[0]];
29
+
30
+ if (Component) {
31
+ setExampleComponent(() => Component);
32
+ } else {
33
+ throw new Error('No se encontró el componente exportado');
34
+ }
35
+ } catch (importError) {
36
+ console.warn(`No se pudo cargar ${modulePath}:`, importError);
37
+
38
+ // Fallback: crear un componente placeholder
39
+ const PlaceholderComponent = () => (
40
+ <div className="example-placeholder">
41
+ <div className="placeholder-icon">
42
+ <span className="material-icons">{example.icon}</span>
43
+ </div>
44
+ <h3>{example.title}</h3>
45
+ <p>{example.description}</p>
46
+ <div className="placeholder-note">
47
+ <span className="material-icons">info</span>
48
+ <span>Ejemplo en desarrollo - Archivo: {example.file}</span>
49
+ </div>
50
+ </div>
51
+ );
52
+
53
+ setExampleComponent(() => PlaceholderComponent);
54
+ }
55
+ } catch (err) {
56
+ console.error('Error loading example:', err);
57
+ setError(err.message);
58
+ } finally {
59
+ setLoading(false);
60
+ }
61
+ };
62
+
63
+ loadExample();
64
+ }, [example]);
65
+
66
+ if (loading) {
67
+ return (
68
+ <div className="example-loading">
69
+ <div className="loading-spinner"></div>
70
+ <p>Cargando ejemplo...</p>
71
+ </div>
72
+ );
73
+ }
74
+
75
+ if (error) {
76
+ return (
77
+ <div className="example-error">
78
+ <span className="material-icons">error</span>
79
+ <p>Error al cargar el ejemplo: {error}</p>
80
+ </div>
81
+ );
82
+ }
83
+
84
+ return (
85
+ <div className="example-page">
86
+ <div className="content-header">
87
+ <div className="breadcrumb">
88
+ <span className="material-icons">{CATEGORIES[example.category]?.icon}</span>
89
+ <span>{example.category}</span>
90
+ <span className="material-icons">chevron_right</span>
91
+ <span>{example.title}</span>
92
+ </div>
93
+ <h1>{example.title}</h1>
94
+ <p>{example.description}</p>
95
+ </div>
96
+
97
+ <div className="example-container">
98
+ {ExampleComponent && <ExampleComponent />}
99
+ </div>
100
+ </div>
101
+ );
102
+ };
103
+
104
+ export default ExamplePage;
package/doc/src/components/WelcomePage.js ADDED
@@ -0,0 +1,84 @@
1
+ import React from 'react';
2
+
3
+ const WelcomePage = () => {
4
+ return (
5
+ <div className="welcome-page">
6
+ <div className="welcome-hero">
7
+ <h1>Ywana Core8</h1>
8
+ <p>
9
+ Una biblioteca completa de componentes React diseñados para crear
10
+ interfaces de usuario modernas, accesibles y altamente funcionales.
11
+ Explora nuestra colección de componentes y descubre cómo pueden
12
+ acelerar tu desarrollo.
13
+ </p>
14
+ </div>
15
+
16
+ <div className="welcome-features">
17
+ <div className="feature-card">
18
+ <div className="feature-icon">
19
+ <span className="material-icons">palette</span>
20
+ </div>
21
+ <h3>Diseño Moderno</h3>
22
+ <p>
23
+ Componentes con un diseño limpio y moderno que se adaptan
24
+ a cualquier proyecto.
25
+ </p>
26
+ </div>
27
+
28
+ <div className="feature-card">
29
+ <div className="feature-icon">
30
+ <span className="material-icons">accessibility</span>
31
+ </div>
32
+ <h3>Accesible</h3>
33
+ <p>
34
+ Todos los componentes siguen las mejores prácticas de
35
+ accesibilidad web (WCAG).
36
+ </p>
37
+ </div>
38
+
39
+ <div className="feature-card">
40
+ <div className="feature-icon">
41
+ <span className="material-icons">tune</span>
42
+ </div>
43
+ <h3>Personalizable</h3>
44
+ <p>
45
+ Fácil personalización con CSS variables y props
46
+ configurables.
47
+ </p>
48
+ </div>
49
+
50
+ <div className="feature-card">
51
+ <div className="feature-icon">
52
+ <span className="material-icons">speed</span>
53
+ </div>
54
+ <h3>Optimizado</h3>
55
+ <p>
56
+ Componentes ligeros y optimizados para el mejor
57
+ rendimiento.
58
+ </p>
59
+ </div>
60
+ </div>
61
+
62
+ <div className="welcome-stats">
63
+ <div className="stat-item">
64
+ <span className="stat-number">20+</span>
65
+ <span className="stat-label">Componentes</span>
66
+ </div>
67
+ <div className="stat-item">
68
+ <span className="stat-number">4</span>
69
+ <span className="stat-label">Categorías</span>
70
+ </div>
71
+ <div className="stat-item">
72
+ <span className="stat-number">100%</span>
73
+ <span className="stat-label">TypeScript</span>
74
+ </div>
75
+ <div className="stat-item">
76
+ <span className="stat-number">∞</span>
77
+ <span className="stat-label">Posibilidades</span>
78
+ </div>
79
+ </div>
80
+ </div>
81
+ );
82
+ };
83
+
84
+ export default WelcomePage;
package/doc/src/examples/button.example.js ADDED
@@ -0,0 +1,47 @@
1
+ import React from 'react';
2
+ import { Button } from 'ywana-core8/html';
3
+
4
+ const ButtonExamples = () => {
5
+ return (
6
+ <div className="examples-grid">
7
+ <div className="example-section">
8
+ <h3>Variantes Básicas</h3>
9
+ <div className="example-row">
10
+ <Button>Primario</Button>
11
+ <Button variant="secondary">Secundario</Button>
12
+ <Button variant="outline">Outline</Button>
13
+ <Button variant="ghost">Ghost</Button>
14
+ </div>
15
+ </div>
16
+
17
+ <div className="example-section">
18
+ <h3>Tamaños</h3>
19
+ <div className="example-row">
20
+ <Button size="small">Pequeño</Button>
21
+ <Button size="medium">Mediano</Button>
22
+ <Button size="large">Grande</Button>
23
+ </div>
24
+ </div>
25
+
26
+ <div className="example-section">
27
+ <h3>Estados</h3>
28
+ <div className="example-row">
29
+ <Button>Normal</Button>
30
+ <Button disabled>Deshabilitado</Button>
31
+ <Button loading>Cargando</Button>
32
+ </div>
33
+ </div>
34
+
35
+ <div className="example-section">
36
+ <h3>Con Iconos</h3>
37
+ <div className="example-row">
38
+ <Button icon="add">Agregar</Button>
39
+ <Button icon="delete" variant="outline">Eliminar</Button>
40
+ <Button icon="save" iconPosition="right">Guardar</Button>
41
+ </div>
42
+ </div>
43
+ </div>
44
+ );
45
+ };
46
+
47
+ export default ButtonExamples;