ywana-core8 0.1.103 → 0.2.1

package/src/html/textfield2.example.js.backup

@@ -1,1370 +0,0 @@
-import React, { useState } from 'react'
-import { TextField2, TextArea2, PasswordField2, DropDown2, DateRange2 } from './textfield2'
-
-/**
- * Ejemplos de uso de los componentes TextField2 mejorados
- */
-export const TextField2Examples = () => {
-    const [formData, setFormData] = useState({})
-    const [validationErrors, setValidationErrors] = useState({})
-
-    const handleFieldChange = (id, value) => {
-        setFormData(prev => ({
-            ...prev,
-            [id]: value
-        }))
-    }
-
-    const handleValidation = (id, isValid, message) => {
-        setValidationErrors(prev => ({
-            ...prev,
-            [id]: isValid ? null : message
-        }))
-    }
-
-    // Validaciones personalizadas
-    const validateEmail = (value) => {
-        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
-        return {
-            valid: emailRegex.test(value),
-            message: emailRegex.test(value) ? '' : 'Please enter a valid email address'
-        }
-    }
-
-    const validatePassword = (value) => {
-        const hasLength = value.length >= 8
-        const hasUpper = /[A-Z]/.test(value)
-        const hasLower = /[a-z]/.test(value)
-        const hasNumber = /\d/.test(value)
-        
-        const valid = hasLength && hasUpper && hasLower && hasNumber
-        let message = ''
-        
-        if (!valid) {
-            const missing = []
-            if (!hasLength) missing.push('8+ characters')
-            if (!hasUpper) missing.push('uppercase letter')
-            if (!hasLower) missing.push('lowercase letter')
-            if (!hasNumber) missing.push('number')
-            message = `Password must contain: ${missing.join(', ')}`
-        }
-        
-        return { valid, message }
-    }
-
-    const validatePhone = (value) => {
-        const phoneRegex = /^\+?[\d\s\-\(\)]{10,}$/
-        return phoneRegex.test(value)
-    }
-
-    // Opciones para dropdowns
-    const countryOptions = [
-        { value: 'us', label: 'United States', icon: 'flag' },
-        { value: 'ca', label: 'Canada', icon: 'flag' },
-        { value: 'mx', label: 'Mexico', icon: 'flag' },
-        { value: 'uk', label: 'United Kingdom', icon: 'flag' },
-        { value: 'de', label: 'Germany', icon: 'flag' },
-        { value: 'fr', label: 'France', icon: 'flag' },
-        { value: 'es', label: 'Spain', icon: 'flag' },
-        { value: 'it', label: 'Italy', icon: 'flag' }
-    ]
-
-    const skillOptions = [
-        { value: 'react', label: 'React', category: 'Frontend' },
-        { value: 'vue', label: 'Vue.js', category: 'Frontend' },
-        { value: 'angular', label: 'Angular', category: 'Frontend' },
-        { value: 'nodejs', label: 'Node.js', category: 'Backend' },
-        { value: 'python', label: 'Python', category: 'Backend' },
-        { value: 'java', label: 'Java', category: 'Backend' },
-        { value: 'docker', label: 'Docker', category: 'DevOps' },
-        { value: 'kubernetes', label: 'Kubernetes', category: 'DevOps' }
-    ]
-
-    const priorityOptions = [
-        { value: 'low', label: 'Low Priority', icon: 'arrow_downward' },
-        { value: 'medium', label: 'Medium Priority', icon: 'remove' },
-        { value: 'high', label: 'High Priority', icon: 'arrow_upward' },
-        { value: 'urgent', label: 'Urgent', icon: 'warning' }
-    ]
-
-    return (
-        <div style={{ padding: '2rem', maxWidth: '1200px', maxHeight: '100vh', overflow: 'auto' }}>
-            <h1>Ejemplos de Componentes TextField2 Mejorados</h1>
-            
-            <div style={{ 
-                background: '#f8f9fa', 
-                padding: '1rem', 
-                borderRadius: '8px',
-                marginBottom: '2rem',
-                border: '1px solid #e9ecef'
-            }}>
-                <h3>✅ Mejoras Implementadas:</h3>
-                <ul>
-                    <li>🛡️ <strong>Validación robusta</strong> - PropTypes, validación personalizable, mensajes de error</li>
-                    <li>♿ <strong>Accesibilidad completa</strong> - ARIA, roles, live regions, soporte de teclado</li>
-                    <li>📝 <strong>Documentación completa</strong> - PropTypes detallados y ejemplos</li>
-                    <li>🎯 <strong>Estados avanzados</strong> - disabled, error, focused, invalid, readonly</li>
-                    <li>🎨 <strong>CSS mejorado</strong> - Altura automática, responsive, temas</li>
-                    <li>⚡ <strong>Debouncing</strong> - Control de frecuencia de onChange</li>
-                    <li>🔧 <strong>Componentes especializados</strong> - TextField2, TextArea2, PasswordField2, DropDown2, DateRange2</li>
-                    <li>🧪 <strong>Pruebas exhaustivas</strong> - 39 pruebas que cubren toda la funcionalidad</li>
-                </ul>
-            </div>
-
-            {/* Comparación de Estilos */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>🎨 Comparación de Estilos: Normal vs Outlined</h3>
-                <div style={{
-                    background: '#fff',
-                    padding: '1.5rem',
-                    borderRadius: '8px',
-                    border: '1px solid #ddd'
-                }}>
-                    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '2rem' }}>
-                        <div>
-                            <h4 style={{
-                                background: '#e3f2fd',
-                                padding: '0.5rem',
-                                borderRadius: '4px',
-                                textAlign: 'center',
-                                margin: '0 0 1rem 0'
-                            }}>
-                                📝 Estilo NORMAL (default)
-                            </h4>
-                            <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
-                                <TextField2
-                                    id="normalBasic"
-                                    label="Campo Normal"
-                                    placeholder="Placeholder text"
-                                    value={formData.normalBasic || ''}
-                                    onChange={handleFieldChange}
-                                    helperText="Estilo normal con underline"
-                                />
-
-                                <TextField2
-                                    id="normalWithValue"
-                                    label="Con Valor"
-                                    value="Texto de ejemplo"
-                                    onChange={handleFieldChange}
-                                    helperText="Campo normal con valor"
-                                />
-
-                                <TextField2
-                                    id="normalRequired"
-                                    label="Campo Requerido"
-                                    placeholder="Campo obligatorio"
-                                    value={formData.normalRequired || ''}
-                                    required={true}
-                                    onChange={handleFieldChange}
-                                    helperText="Campo requerido estilo normal"
-                                />
-                            </div>
-                        </div>
-
-                        <div>
-                            <h4 style={{
-                                background: '#f3e5f5',
-                                padding: '0.5rem',
-                                borderRadius: '4px',
-                                textAlign: 'center',
-                                margin: '0 0 1rem 0'
-                            }}>
-                                🔲 Estilo OUTLINED
-                            </h4>
-                            <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
-                                <TextField2
-                                    id="outlinedBasic"
-                                    label="Campo Outlined"
-                                    placeholder="Placeholder text"
-                                    value={formData.outlinedBasic || ''}
-                                    outlined={true}
-                                    onChange={handleFieldChange}
-                                    helperText="Estilo outlined con borde"
-                                />
-
-                                <TextField2
-                                    id="outlinedWithValue"
-                                    label="Con Valor"
-                                    value="Texto de ejemplo"
-                                    outlined={true}
-                                    onChange={handleFieldChange}
-                                    helperText="Campo outlined con valor"
-                                />
-
-                                <TextField2
-                                    id="outlinedRequired"
-                                    label="Campo Requerido"
-                                    placeholder="Campo obligatorio"
-                                    value={formData.outlinedRequired || ''}
-                                    required={true}
-                                    outlined={true}
-                                    onChange={handleFieldChange}
-                                    helperText="Campo requerido estilo outlined"
-                                />
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </section>
-
-            {/* Tipos de Input - Normal */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>📝 Tipos de Input - Estilo NORMAL</h3>
-                <div style={{
-                    background: '#fff',
-                    padding: '1.5rem',
-                    borderRadius: '8px',
-                    border: '1px solid #ddd',
-                    display: 'grid',
-                    gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
-                    gap: '1rem'
-                }}>
-                    <TextField2
-                        id="textNormal"
-                        type="text"
-                        label="Texto"
-                        placeholder="Ingresa texto"
-                        value={formData.textNormal || ''}
-                        onChange={handleFieldChange}
-                        helperText="Tipo: text (normal)"
-                    />
-
-                    <TextField2
-                        id="emailNormal"
-                        type="email"
-                        label="Email"
-                        placeholder="usuario@ejemplo.com"
-                        value={formData.emailNormal || ''}
-                        validation={validateEmail}
-                        onChange={handleFieldChange}
-                        onValidation={handleValidation}
-                        helperText="Tipo: email (normal)"
-                    />
-
-                    <TextField2
-                        id="passwordNormal"
-                        type="password"
-                        label="Contraseña"
-                        placeholder="Contraseña segura"
-                        value={formData.passwordNormal || ''}
-                        onChange={handleFieldChange}
-                        helperText="Tipo: password (normal)"
-                    />
-
-                    <TextField2
-                        id="telNormal"
-                        type="tel"
-                        label="Teléfono"
-                        placeholder="+34 123 456 789"
-                        value={formData.telNormal || ''}
-                        onChange={handleFieldChange}
-                        helperText="Tipo: tel (normal)"
-                    />
-
-                    <TextField2
-                        id="urlNormal"
-                        type="url"
-                        label="Sitio Web"
-                        placeholder="https://ejemplo.com"
-                        value={formData.urlNormal || ''}
-                        onChange={handleFieldChange}
-                        helperText="Tipo: url (normal)"
-                    />
-
-                    <TextField2
-                        id="numberNormal"
-                        type="number"
-                        label="Número"
-                        placeholder="123"
-                        value={formData.numberNormal || ''}
-                        min="0"
-                        max="999"
-                        onChange={handleFieldChange}
-                        helperText="Tipo: number (normal)"
-                    />
-
-                    <TextField2
-                        id="dateNormal"
-                        type="date"
-                        label="Fecha"
-                        value={formData.dateNormal || ''}
-                        onChange={handleFieldChange}
-                        helperText="Tipo: date (normal)"
-                    />
-
-                    <TextField2
-                        id="timeNormal"
-                        type="time"
-                        label="Hora"
-                        value={formData.timeNormal || ''}
-                        onChange={handleFieldChange}
-                        helperText="Tipo: time (normal)"
-                    />
-
-                    <TextField2
-                        id="searchNormal"
-                        type="search"
-                        label="Búsqueda"
-                        placeholder="Buscar..."
-                        value={formData.searchNormal || ''}
-                        onChange={handleFieldChange}
-                        helperText="Tipo: search (normal)"
-                    />
-                </div>
-            </section>
-
-            {/* Tipos de Input - Outlined */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>🔲 Tipos de Input - Estilo OUTLINED</h3>
-                <div style={{
-                    background: '#fff',
-                    padding: '1.5rem',
-                    borderRadius: '8px',
-                    border: '1px solid #ddd',
-                    display: 'grid',
-                    gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
-                    gap: '1rem'
-                }}>
-                    <TextField2
-                        id="textOutlined"
-                        type="text"
-                        label="Texto"
-                        placeholder="Ingresa texto"
-                        value={formData.textOutlined || ''}
-                        outlined={true}
-                        onChange={handleFieldChange}
-                        helperText="Tipo: text (outlined)"
-                    />
-
-                    <TextField2
-                        id="emailOutlined"
-                        type="email"
-                        label="Email"
-                        placeholder="usuario@ejemplo.com"
-                        value={formData.emailOutlined || ''}
-                        outlined={true}
-                        validation={validateEmail}
-                        onChange={handleFieldChange}
-                        onValidation={handleValidation}
-                        helperText="Tipo: email (outlined)"
-                    />
-
-                    <TextField2
-                        id="passwordOutlined"
-                        type="password"
-                        label="Contraseña"
-                        placeholder="Contraseña segura"
-                        value={formData.passwordOutlined || ''}
-                        outlined={true}
-                        onChange={handleFieldChange}
-                        helperText="Tipo: password (outlined)"
-                    />
-
-                    <TextField2
-                        id="telOutlined"
-                        type="tel"
-                        label="Teléfono"
-                        placeholder="+34 123 456 789"
-                        value={formData.telOutlined || ''}
-                        outlined={true}
-                        onChange={handleFieldChange}
-                        helperText="Tipo: tel (outlined)"
-                    />
-
-                    <TextField2
-                        id="urlOutlined"
-                        type="url"
-                        label="Sitio Web"
-                        placeholder="https://ejemplo.com"
-                        value={formData.urlOutlined || ''}
-                        outlined={true}
-                        onChange={handleFieldChange}
-                        helperText="Tipo: url (outlined)"
-                    />
-
-                    <TextField2
-                        id="numberOutlined"
-                        type="number"
-                        label="Número"
-                        placeholder="123"
-                        value={formData.numberOutlined || ''}
-                        outlined={true}
-                        min="0"
-                        max="999"
-                        onChange={handleFieldChange}
-                        helperText="Tipo: number (outlined)"
-                    />
-
-                    <TextField2
-                        id="dateOutlined"
-                        type="date"
-                        label="Fecha"
-                        value={formData.dateOutlined || ''}
-                        outlined={true}
-                        onChange={handleFieldChange}
-                        helperText="Tipo: date (outlined)"
-                    />
-
-                    <TextField2
-                        id="timeOutlined"
-                        type="time"
-                        label="Hora"
-                        value={formData.timeOutlined || ''}
-                        outlined={true}
-                        onChange={handleFieldChange}
-                        helperText="Tipo: time (outlined)"
-                    />
-
-                    <TextField2
-                        id="searchOutlined"
-                        type="search"
-                        label="Búsqueda"
-                        placeholder="Buscar..."
-                        value={formData.searchOutlined || ''}
-                        outlined={true}
-                        onChange={handleFieldChange}
-                        helperText="Tipo: search (outlined)"
-                    />
-                </div>
-            </section>
-
-            {/* PasswordField2 - Normal */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>🔐 PasswordField2 - Estilo NORMAL</h3>
-                <div style={{
-                    background: '#fff',
-                    padding: '1.5rem',
-                    borderRadius: '8px',
-                    border: '1px solid #ddd',
-                    display: 'grid',
-                    gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
-                    gap: '1rem'
-                }}>
-                    <PasswordField2
-                        id="passwordNormal"
-                        label="Contraseña"
-                        placeholder="Contraseña segura"
-                        value={formData.passwordNormal || ''}
-                        required={true}
-                        validation={validatePassword}
-                        onChange={handleFieldChange}
-                        onValidation={handleValidation}
-                        helperText="Estilo normal - 8+ chars, mayús, minús, número"
-                        autoComplete="new-password"
-                    />
-
-                    <PasswordField2
-                        id="confirmPasswordNormal"
-                        label="Confirmar Contraseña"
-                        placeholder="Confirma tu contraseña"
-                        value={formData.confirmPasswordNormal || ''}
-                        required={true}
-                        validation={(value) => value === formData.passwordNormal}
-                        error={formData.confirmPasswordNormal && formData.confirmPasswordNormal !== formData.passwordNormal ? 'Las contraseñas no coinciden' : ''}
-                        onChange={handleFieldChange}
-                        helperText="Estilo normal - Debe coincidir"
-                        autoComplete="new-password"
-                    />
-
-                    <PasswordField2
-                        id="currentPasswordNormal"
-                        label="Contraseña Actual"
-                        placeholder="Tu contraseña actual"
-                        value={formData.currentPasswordNormal || ''}
-                        onChange={handleFieldChange}
-                        helperText="Estilo normal - Contraseña existente"
-                        autoComplete="current-password"
-                    />
-                </div>
-            </section>
-
-            {/* PasswordField2 - Outlined */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>🔐 PasswordField2 - Estilo OUTLINED</h3>
-                <div style={{
-                    background: '#fff',
-                    padding: '1.5rem',
-                    borderRadius: '8px',
-                    border: '1px solid #ddd',
-                    display: 'grid',
-                    gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
-                    gap: '1rem'
-                }}>
-                    <PasswordField2
-                        id="passwordOutlined"
-                        label="Contraseña"
-                        placeholder="Contraseña segura"
-                        value={formData.passwordOutlined || ''}
-                        required={true}
-                        outlined={true}
-                        validation={validatePassword}
-                        onChange={handleFieldChange}
-                        onValidation={handleValidation}
-                        helperText="Estilo outlined - 8+ chars, mayús, minús, número"
-                        autoComplete="new-password"
-                    />
-
-                    <PasswordField2
-                        id="confirmPasswordOutlined"
-                        label="Confirmar Contraseña"
-                        placeholder="Confirma tu contraseña"
-                        value={formData.confirmPasswordOutlined || ''}
-                        required={true}
-                        outlined={true}
-                        validation={(value) => value === formData.passwordOutlined}
-                        error={formData.confirmPasswordOutlined && formData.confirmPasswordOutlined !== formData.passwordOutlined ? 'Las contraseñas no coinciden' : ''}
-                        onChange={handleFieldChange}
-                        helperText="Estilo outlined - Debe coincidir"
-                        autoComplete="new-password"
-                    />
-
-                    <PasswordField2
-                        id="currentPasswordOutlined"
-                        label="Contraseña Actual"
-                        placeholder="Tu contraseña actual"
-                        value={formData.currentPasswordOutlined || ''}
-                        outlined={true}
-                        onChange={handleFieldChange}
-                        helperText="Estilo outlined - Contraseña existente"
-                        autoComplete="current-password"
-                    />
-                </div>
-            </section>
-
-            {/* TextArea2 - Normal */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>📝 TextArea2 - Estilo NORMAL</h3>
-                <div style={{
-                    background: '#fff',
-                    padding: '1.5rem',
-                    borderRadius: '8px',
-                    border: '1px solid #ddd'
-                }}>
-                    <div style={{ display: 'grid', gap: '1rem' }}>
-                        <TextArea2
-                            id="bioNormal"
-                            label="Biografía"
-                            placeholder="Cuéntanos sobre ti..."
-                            value={formData.bioNormal || ''}
-                            rows={4}
-                            maxLength={500}
-                            onChange={handleFieldChange}
-                            helperText={`Estilo normal - ${(formData.bioNormal || '').length}/500 caracteres`}
-                        />
-
-                        <TextArea2
-                            id="commentsNormal"
-                            label="Comentarios Adicionales"
-                            placeholder="Información adicional..."
-                            value={formData.commentsNormal || ''}
-                            rows={3}
-                            onChange={handleFieldChange}
-                            helperText="Estilo normal - Campo opcional"
-                        />
-
-                        <TextArea2
-                            id="descriptionNormal"
-                            label="Descripción del Proyecto"
-                            placeholder="Describe tu proyecto en detalle..."
-                            value={formData.descriptionNormal || ''}
-                            rows={5}
-                            required={true}
-                            onChange={handleFieldChange}
-                            helperText="Estilo normal - Campo requerido"
-                        />
-                    </div>
-                </div>
-            </section>
-
-            {/* TextArea2 - Outlined */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>📝 TextArea2 - Estilo OUTLINED</h3>
-                <div style={{
-                    background: '#fff',
-                    padding: '1.5rem',
-                    borderRadius: '8px',
-                    border: '1px solid #ddd'
-                }}>
-                    <div style={{ display: 'grid', gap: '1rem' }}>
-                        <TextArea2
-                            id="bioOutlined"
-                            label="Biografía"
-                            placeholder="Cuéntanos sobre ti..."
-                            value={formData.bioOutlined || ''}
-                            rows={4}
-                            maxLength={500}
-                            outlined={true}
-                            onChange={handleFieldChange}
-                            helperText={`Estilo outlined - ${(formData.bioOutlined || '').length}/500 caracteres`}
-                        />
-
-                        <TextArea2
-                            id="commentsOutlined"
-                            label="Comentarios Adicionales"
-                            placeholder="Información adicional..."
-                            value={formData.commentsOutlined || ''}
-                            rows={3}
-                            outlined={true}
-                            onChange={handleFieldChange}
-                            helperText="Estilo outlined - Campo opcional"
-                        />
-
-                        <TextArea2
-                            id="descriptionOutlined"
-                            label="Descripción del Proyecto"
-                            placeholder="Describe tu proyecto en detalle..."
-                            value={formData.descriptionOutlined || ''}
-                            rows={5}
-                            required={true}
-                            outlined={true}
-                            onChange={handleFieldChange}
-                            helperText="Estilo outlined - Campo requerido"
-                        />
-
-                        <TextArea2
-                            id="feedbackOutlined"
-                            label="Feedback"
-                            placeholder="Comparte tu opinión..."
-                            value={formData.feedbackOutlined || ''}
-                            rows={6}
-                            outlined={true}
-                            maxLength={1000}
-                            onChange={handleFieldChange}
-                            helperText={`Estilo outlined - ${(formData.feedbackOutlined || '').length}/1000 caracteres`}
-                        />
-                    </div>
-                </div>
-            </section>
-
-            {/* DropDown2 - Normal */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>📋 DropDown2 - Estilo NORMAL</h3>
-                <div style={{
-                    background: '#fff',
-                    padding: '1.5rem',
-                    borderRadius: '8px',
-                    border: '1px solid #ddd',
-                    display: 'grid',
-                    gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
-                    gap: '1rem'
-                }}>
-                    <DropDown2
-                        id="countryNormal"
-                        label="País"
-                        placeholder="Selecciona tu país"
-                        options={countryOptions}
-                        value={formData.countryNormal || ''}
-                        searchable={true}
-                        clearable={true}
-                        onChange={handleFieldChange}
-                        helperText="Estilo normal - Búsqueda habilitada"
-                    />
-
-                    <DropDown2
-                        id="skillsNormal"
-                        label="Habilidades"
-                        placeholder="Selecciona tus habilidades"
-                        options={skillOptions}
-                        value={formData.skillsNormal || []}
-                        multiple={true}
-                        searchable={true}
-                        clearable={true}
-                        groupBy="category"
-                        onChange={handleFieldChange}
-                        helperText="Estilo normal - Selección múltiple con agrupación"
-                    />
-
-                    <DropDown2
-                        id="priorityNormal"
-                        label="Nivel de Prioridad"
-                        placeholder="Selecciona prioridad"
-                        options={priorityOptions}
-                        value={formData.priorityNormal || ''}
-                        onChange={handleFieldChange}
-                        helperText="Estilo normal - Opciones con iconos"
-                    />
-
-                    <DropDown2
-                        id="statusNormal"
-                        label="Estado"
-                        placeholder="Selecciona estado"
-                        options={[
-                            { value: 'active', label: 'Activo' },
-                            { value: 'inactive', label: 'Inactivo' },
-                            { value: 'pending', label: 'Pendiente' },
-                            { value: 'suspended', label: 'Suspendido' }
-                        ]}
-                        value={formData.statusNormal || ''}
-                        required={true}
-                        onChange={handleFieldChange}
-                        helperText="Estilo normal - Campo requerido"
-                    />
-                </div>
-            </section>
-
-            {/* DropDown2 - Outlined */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>📋 DropDown2 - Estilo OUTLINED</h3>
-                <div style={{
-                    background: '#fff',
-                    padding: '1.5rem',
-                    borderRadius: '8px',
-                    border: '1px solid #ddd',
-                    display: 'grid',
-                    gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
-                    gap: '1rem'
-                }}>
-                    <DropDown2
-                        id="countryOutlined"
-                        label="País"
-                        placeholder="Selecciona tu país"
-                        options={countryOptions}
-                        value={formData.countryOutlined || ''}
-                        outlined={true}
-                        searchable={true}
-                        clearable={true}
-                        onChange={handleFieldChange}
-                        helperText="Estilo outlined - Búsqueda habilitada"
-                    />
-
-                    <DropDown2
-                        id="skillsOutlined"
-                        label="Habilidades"
-                        placeholder="Selecciona tus habilidades"
-                        options={skillOptions}
-                        value={formData.skillsOutlined || []}
-                        multiple={true}
-                        outlined={true}
-                        searchable={true}
-                        clearable={true}
-                        groupBy="category"
-                        onChange={handleFieldChange}
-                        helperText="Estilo outlined - Selección múltiple con agrupación"
-                    />
-
-                    <DropDown2
-                        id="priorityOutlined"
-                        label="Nivel de Prioridad"
-                        placeholder="Selecciona prioridad"
-                        options={priorityOptions}
-                        value={formData.priorityOutlined || ''}
-                        outlined={true}
-                        onChange={handleFieldChange}
-                        helperText="Estilo outlined - Opciones con iconos"
-                    />
-
-                    <DropDown2
-                        id="statusOutlined"
-                        label="Estado"
-                        placeholder="Selecciona estado"
-                        options={[
-                            { value: 'active', label: 'Activo' },
-                            { value: 'inactive', label: 'Inactivo' },
-                            { value: 'pending', label: 'Pendiente' },
-                            { value: 'suspended', label: 'Suspendido' }
-                        ]}
-                        value={formData.statusOutlined || ''}
-                        required={true}
-                        outlined={true}
-                        onChange={handleFieldChange}
-                        helperText="Estilo outlined - Campo requerido"
-                    />
-
-                    <DropDown2
-                        id="categoryOutlined"
-                        label="Categoría"
-                        placeholder="Selecciona categoría"
-                        options={[
-                            { value: 'tech', label: 'Tecnología', category: 'Trabajo' },
-                            { value: 'design', label: 'Diseño', category: 'Trabajo' },
-                            { value: 'marketing', label: 'Marketing', category: 'Trabajo' },
-                            { value: 'sports', label: 'Deportes', category: 'Personal' },
-                            { value: 'music', label: 'Música', category: 'Personal' },
-                            { value: 'travel', label: 'Viajes', category: 'Personal' }
-                        ]}
-                        value={formData.categoryOutlined || ''}
-                        outlined={true}
-                        searchable={true}
-                        groupBy="category"
-                        onChange={handleFieldChange}
-                        helperText="Estilo outlined - Con agrupación personalizada"
-                    />
-                </div>
-            </section>
-
-            {/* DateRange2 - Normal */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>📅 DateRange2 - Estilo NORMAL</h3>
-                <div style={{
-                    background: '#fff',
-                    padding: '1.5rem',
-                    borderRadius: '8px',
-                    border: '1px solid #ddd',
-                    display: 'grid',
-                    gridTemplateColumns: 'repeat(auto-fit, minmax(400px, 1fr))',
-                    gap: '1rem'
-                }}>
-                    <DateRange2
-                        id="projectDatesNormal"
-                        label="Duración del Proyecto"
-                        value={formData.projectDatesNormal || {}}
-                        required={true}
-                        minDate="2024-01-01"
-                        maxDate="2025-12-31"
-                        onChange={handleFieldChange}
-                        onValidation={handleValidation}
-                        helperText="Estilo normal - Fechas de inicio y fin del proyecto"
-                    />
-
-                    <DateRange2
-                        id="vacationDatesNormal"
-                        label="Período de Vacaciones"
-                        value={formData.vacationDatesNormal || {}}
-                        onChange={handleFieldChange}
-                        helperText="Estilo normal - Fechas de vacaciones opcionales"
-                    />
-                </div>
-            </section>
-
-            {/* DateRange2 - Outlined */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>📅 DateRange2 - Estilo OUTLINED</h3>
-                <div style={{
-                    background: '#fff',
-                    padding: '1.5rem',
-                    borderRadius: '8px',
-                    border: '1px solid #ddd',
-                    display: 'grid',
-                    gridTemplateColumns: 'repeat(auto-fit, minmax(400px, 1fr))',
-                    gap: '1rem'
-                }}>
-                    <DateRange2
-                        id="projectDatesOutlined"
-                        label="Duración del Proyecto"
-                        value={formData.projectDatesOutlined || {}}
-                        outlined={true}
-                        required={true}
-                        minDate="2024-01-01"
-                        maxDate="2025-12-31"
-                        onChange={handleFieldChange}
-                        onValidation={handleValidation}
-                        helperText="Estilo outlined - Fechas de inicio y fin del proyecto"
-                    />
-
-                    <DateRange2
-                        id="vacationDatesOutlined"
-                        label="Período de Vacaciones"
-                        value={formData.vacationDatesOutlined || {}}
-                        outlined={true}
-                        onChange={handleFieldChange}
-                        helperText="Estilo outlined - Fechas de vacaciones opcionales"
-                    />
-
-                    <DateRange2
-                        id="eventDatesOutlined"
-                        label="Fechas del Evento"
-                        value={formData.eventDatesOutlined || {}}
-                        outlined={true}
-                        required={true}
-                        onChange={handleFieldChange}
-                        helperText="Estilo outlined - Fechas de inicio y fin del evento"
-                    />
-                </div>
-            </section>
-
-            {/* Estados Especiales - Normal */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>⚙️ Estados Especiales - Estilo NORMAL</h3>
-                <div style={{
-                    background: '#fff',
-                    padding: '1.5rem',
-                    borderRadius: '8px',
-                    border: '1px solid #ddd',
-                    display: 'grid',
-                    gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
-                    gap: '1rem'
-                }}>
-                    <TextField2
-                        id="disabledFieldNormal"
-                        label="Campo Deshabilitado"
-                        value="No se puede editar"
-                        disabled={true}
-                        helperText="Estilo normal - Campo deshabilitado"
-                    />
-
-                    <TextField2
-                        id="readOnlyFieldNormal"
-                        label="Campo Solo Lectura"
-                        value="Valor de solo lectura"
-                        readOnly={true}
-                        helperText="Estilo normal - Campo de solo lectura"
-                    />
-
-                    <TextField2
-                        id="errorFieldNormal"
-                        label="Campo con Error"
-                        value="Valor inválido"
-                        error="Este campo tiene un error"
-                        helperText="Estilo normal - Campo con error"
-                    />
-
-                    <TextField2
-                        id="debouncedFieldNormal"
-                        label="Campo con Debounce"
-                        placeholder="Escribe para ver el debouncing..."
-                        value={formData.debouncedFieldNormal || ''}
-                        debounceMs={500}
-                        onChange={handleFieldChange}
-                        helperText="Estilo normal - Cambios con debounce de 500ms"
-                    />
-
-                    <TextField2
-                        id="requiredFieldNormal"
-                        label="Campo Requerido"
-                        placeholder="Este campo es obligatorio"
-                        value={formData.requiredFieldNormal || ''}
-                        required={true}
-                        onChange={handleFieldChange}
-                        helperText="Estilo normal - Campo obligatorio"
-                    />
-
-                    <TextField2
-                        id="maxLengthFieldNormal"
-                        label="Campo con Límite"
-                        placeholder="Máximo 50 caracteres"
-                        value={formData.maxLengthFieldNormal || ''}
-                        maxLength={50}
-                        onChange={handleFieldChange}
-                        helperText={`Estilo normal - ${(formData.maxLengthFieldNormal || '').length}/50 caracteres`}
-                    />
-                </div>
-            </section>
-
-            {/* Estados Especiales - Outlined */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>⚙️ Estados Especiales - Estilo OUTLINED</h3>
-                <div style={{
-                    background: '#fff',
-                    padding: '1.5rem',
-                    borderRadius: '8px',
-                    border: '1px solid #ddd',
-                    display: 'grid',
-                    gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
-                    gap: '1rem'
-                }}>
-                    <TextField2
-                        id="disabledFieldOutlined"
-                        label="Campo Deshabilitado"
-                        value="No se puede editar"
-                        disabled={true}
-                        outlined={true}
-                        helperText="Estilo outlined - Campo deshabilitado"
-                    />
-
-                    <TextField2
-                        id="readOnlyFieldOutlined"
-                        label="Campo Solo Lectura"
-                        value="Valor de solo lectura"
-                        readOnly={true}
-                        outlined={true}
-                        helperText="Estilo outlined - Campo de solo lectura"
-                    />
-
-                    <TextField2
-                        id="errorFieldOutlined"
-                        label="Campo con Error"
-                        value="Valor inválido"
-                        outlined={true}
-                        error="Este campo tiene un error"
-                        helperText="Estilo outlined - Campo con error"
-                    />
-
-                    <TextField2
-                        id="debouncedFieldOutlined"
-                        label="Campo con Debounce"
-                        placeholder="Escribe para ver el debouncing..."
-                        value={formData.debouncedFieldOutlined || ''}
-                        outlined={true}
-                        debounceMs={500}
-                        onChange={handleFieldChange}
-                        helperText="Estilo outlined - Cambios con debounce de 500ms"
-                    />
-
-                    <TextField2
-                        id="requiredFieldOutlined"
-                        label="Campo Requerido"
-                        placeholder="Este campo es obligatorio"
-                        value={formData.requiredFieldOutlined || ''}
-                        required={true}
-                        outlined={true}
-                        onChange={handleFieldChange}
-                        helperText="Estilo outlined - Campo obligatorio"
-                    />
-
-                    <TextField2
-                        id="maxLengthFieldOutlined"
-                        label="Campo con Límite"
-                        placeholder="Máximo 50 caracteres"
-                        value={formData.maxLengthFieldOutlined || ''}
-                        maxLength={50}
-                        outlined={true}
-                        onChange={handleFieldChange}
-                        helperText={`Estilo outlined - ${(formData.maxLengthFieldOutlined || '').length}/50 caracteres`}
-                    />
-
-                    <TextField2
-                        id="validationFieldOutlined"
-                        label="Campo con Validación"
-                        placeholder="Solo números"
-                        value={formData.validationFieldOutlined || ''}
-                        outlined={true}
-                        validation={(value) => /^\d*$/.test(value)}
-                        onChange={handleFieldChange}
-                        onValidation={handleValidation}
-                        helperText="Estilo outlined - Solo acepta números"
-                    />
-
-                    <TextField2
-                        id="autoCompleteFieldOutlined"
-                        label="Campo con AutoComplete"
-                        placeholder="Ingresa tu email"
-                        value={formData.autoCompleteFieldOutlined || ''}
-                        outlined={true}
-                        type="email"
-                        autoComplete="email"
-                        onChange={handleFieldChange}
-                        helperText="Estilo outlined - Con autocompletado"
-                    />
-                </div>
-            </section>
-
-            {/* Validación Avanzada */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>🔍 Validación Avanzada y Casos Especiales</h3>
-                <div style={{
-                    background: '#fff',
-                    padding: '1.5rem',
-                    borderRadius: '8px',
-                    border: '1px solid #ddd',
-                    display: 'grid',
-                    gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
-                    gap: '1rem'
-                }}>
-                    <TextField2
-                        id="emailValidation"
-                        type="email"
-                        label="Email con Validación"
-                        placeholder="usuario@dominio.com"
-                        value={formData.emailValidation || ''}
-                        outlined={true}
-                        validation={validateEmail}
-                        onChange={handleFieldChange}
-                        onValidation={handleValidation}
-                        helperText="Validación en tiempo real de email"
-                    />
-
-                    <PasswordField2
-                        id="passwordValidation"
-                        label="Contraseña Segura"
-                        placeholder="Contraseña compleja"
-                        value={formData.passwordValidation || ''}
-                        outlined={true}
-                        validation={validatePassword}
-                        onChange={handleFieldChange}
-                        onValidation={handleValidation}
-                        helperText="8+ chars, mayús, minús, número"
-                    />
-
-                    <TextField2
-                        id="phoneValidation"
-                        type="tel"
-                        label="Teléfono con Validación"
-                        placeholder="+34 123 456 789"
-                        value={formData.phoneValidation || ''}
-                        outlined={true}
-                        validation={validatePhone}
-                        onChange={handleFieldChange}
-                        onValidation={handleValidation}
-                        helperText="Formato internacional válido"
-                    />
-
-                    <TextField2
-                        id="customValidation"
-                        label="Validación Personalizada"
-                        placeholder="Solo letras y espacios"
-                        value={formData.customValidation || ''}
-                        outlined={true}
-                        validation={(value) => {
-                            const isValid = /^[a-zA-ZáéíóúÁÉÍÓÚñÑ\s]*$/.test(value)
-                            return {
-                                valid: isValid,
-                                message: isValid ? '' : 'Solo se permiten letras y espacios'
-                            }
-                        }}
-                        onChange={handleFieldChange}
-                        onValidation={handleValidation}
-                        helperText="Validación de solo letras"
-                    />
-
-                    <TextField2
-                        id="rangeValidation"
-                        type="number"
-                        label="Número en Rango"
-                        placeholder="Entre 1 y 100"
-                        value={formData.rangeValidation || ''}
-                        outlined={true}
-                        min="1"
-                        max="100"
-                        validation={(value) => {
-                            const num = parseInt(value)
-                            const isValid = !isNaN(num) && num >= 1 && num <= 100
-                            return {
-                                valid: isValid,
-                                message: isValid ? '' : 'El número debe estar entre 1 y 100'
-                            }
-                        }}
-                        onChange={handleFieldChange}
-                        onValidation={handleValidation}
-                        helperText="Número entre 1 y 100"
-                    />
-
-                    <TextField2
-                        id="asyncValidation"
-                        label="Validación Asíncrona"
-                        placeholder="Simula validación en servidor"
-                        value={formData.asyncValidation || ''}
-                        outlined={true}
-                        debounceMs={1000}
-                        validation={(value) => {
-                            // Simular validación asíncrona
-                            return new Promise((resolve) => {
-                                setTimeout(() => {
-                                    const isValid = value.length >= 3 && !value.includes('admin')
-                                    resolve({
-                                        valid: isValid,
-                                        message: isValid ? 'Disponible' : 'No disponible o muy corto'
-                                    })
-                                }, 500)
-                            })
-                        }}
-                        onChange={handleFieldChange}
-                        onValidation={handleValidation}
-                        helperText="Validación con delay (simula servidor)"
-                    />
-                </div>
-            </section>
-
-            {/* Casos de Uso Reales */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>🏢 Casos de Uso Reales</h3>
-                <div style={{
-                    background: '#fff',
-                    padding: '1.5rem',
-                    borderRadius: '8px',
-                    border: '1px solid #ddd'
-                }}>
-                    <h4>Formulario de Registro de Usuario</h4>
-                    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '1rem', marginBottom: '2rem' }}>
-                        <TextField2
-                            id="userFirstName"
-                            label="Nombre"
-                            placeholder="Tu nombre"
-                            value={formData.userFirstName || ''}
-                            required={true}
-                            outlined={true}
-                            onChange={handleFieldChange}
-                            autoComplete="given-name"
-                        />
-
-                        <TextField2
-                            id="userLastName"
-                            label="Apellidos"
-                            placeholder="Tus apellidos"
-                            value={formData.userLastName || ''}
-                            required={true}
-                            outlined={true}
-                            onChange={handleFieldChange}
-                            autoComplete="family-name"
-                        />
-
-                        <TextField2
-                            id="userEmail"
-                            type="email"
-                            label="Email"
-                            placeholder="tu@email.com"
-                            value={formData.userEmail || ''}
-                            required={true}
-                            outlined={true}
-                            validation={validateEmail}
-                            onChange={handleFieldChange}
-                            onValidation={handleValidation}
-                            autoComplete="email"
-                        />
-
-                        <PasswordField2
-                            id="userPassword"
-                            label="Contraseña"
-                            placeholder="Contraseña segura"
-                            value={formData.userPassword || ''}
-                            required={true}
-                            outlined={true}
-                            validation={validatePassword}
-                            onChange={handleFieldChange}
-                            onValidation={handleValidation}
-                            autoComplete="new-password"
-                        />
-                    </div>
-
-                    <h4>Información de Contacto</h4>
-                    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '1rem', marginBottom: '2rem' }}>
-                        <TextField2
-                            id="contactPhone"
-                            type="tel"
-                            label="Teléfono"
-                            placeholder="+34 123 456 789"
-                            value={formData.contactPhone || ''}
-                            outlined={true}
-                            validation={validatePhone}
-                            onChange={handleFieldChange}
-                            onValidation={handleValidation}
-                            autoComplete="tel"
-                        />
-
-                        <TextField2
-                            id="contactAddress"
-                            label="Dirección"
-                            placeholder="Calle, número, ciudad"
-                            value={formData.contactAddress || ''}
-                            outlined={true}
-                            onChange={handleFieldChange}
-                            autoComplete="street-address"
-                        />
-
-                        <DropDown2
-                            id="contactCountry"
-                            label="País"
-                            placeholder="Selecciona tu país"
-                            options={countryOptions}
-                            value={formData.contactCountry || ''}
-                            outlined={true}
-                            searchable={true}
-                            onChange={handleFieldChange}
-                        />
-                    </div>
-
-                    <h4>Información Adicional</h4>
-                    <div style={{ display: 'grid', gap: '1rem' }}>
-                        <TextArea2
-                            id="userBio"
-                            label="Biografía"
-                            placeholder="Cuéntanos sobre ti..."
-                            value={formData.userBio || ''}
-                            outlined={true}
-                            rows={4}
-                            maxLength={500}
-                            onChange={handleFieldChange}
-                            helperText={`${(formData.userBio || '').length}/500 caracteres`}
-                        />
-
-                        <DropDown2
-                            id="userSkills"
-                            label="Habilidades"
-                            placeholder="Selecciona tus habilidades"
-                            options={skillOptions}
-                            value={formData.userSkills || []}
-                            multiple={true}
-                            outlined={true}
-                            searchable={true}
-                            groupBy="category"
-                            onChange={handleFieldChange}
-                        />
-                    </div>
-                </div>
-            </section>
-
-            {/* Estado actual del formulario */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>📊 Estado Actual del Formulario</h3>
-                <div style={{ 
-                    background: '#f8f9fa', 
-                    padding: '1rem', 
-                    borderRadius: '4px',
-                    border: '1px solid #dee2e6'
-                }}>
-                    <h4>Datos:</h4>
-                    <pre style={{ 
-                        background: '#ffffff', 
-                        padding: '1rem', 
-                        borderRadius: '4px',
-                        fontSize: '0.8rem',
-                        overflow: 'auto',
-                        maxHeight: '200px'
-                    }}>
-                        {JSON.stringify(formData, null, 2)}
-                    </pre>
-                    
-                    <h4>Errores de Validación:</h4>
-                    <pre style={{ 
-                        background: '#ffffff', 
-                        padding: '1rem', 
-                        borderRadius: '4px',
-                        fontSize: '0.8rem',
-                        overflow: 'auto',
-                        maxHeight: '100px'
-                    }}>
-                        {JSON.stringify(Object.fromEntries(
-                            Object.entries(validationErrors).filter(([_, error]) => error)
-                        ), null, 2)}
-                    </pre>
-                </div>
-            </section>
-
-            {/* Comparación antes/después */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>Comparación: TextField Original vs TextField2</h3>
-                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
-                    <div style={{ 
-                        background: '#ffebee', 
-                        padding: '1rem', 
-                        borderRadius: '4px',
-                        border: '1px solid #ffcdd2'
-                    }}>
-                        <h4>❌ TextField Original</h4>
-                        <ul>
-                            <li>Sin PropTypes</li>
-                            <li>Sin accesibilidad</li>
-                            <li>Manipulación directa del DOM</li>
-                            <li>CSS con altura fija</li>
-                            <li>Sin validación integrada</li>
-                            <li>Sin debouncing</li>
-                            <li>Sin estados de error</li>
-                            <li>DropDown complejo y frágil</li>
-                            <li>DateRange básico</li>
-                        </ul>
-                    </div>
-                    <div style={{ 
-                        background: '#e8f5e8', 
-                        padding: '1rem', 
-                        borderRadius: '4px',
-                        border: '1px solid #c8e6c9'
-                    }}>
-                        <h4>✅ TextField2 Mejorado</h4>
-                        <ul>
-                            <li>PropTypes completos</li>
-                            <li>Accesibilidad total (WCAG 2.1 AA)</li>
-                            <li>Sin manipulación directa del DOM</li>
-                            <li>CSS con altura automática</li>
-                            <li>Validación personalizable</li>
-                            <li>Debouncing configurable</li>
-                            <li>Estados completos de error</li>
-                            <li>DropDown2 robusto y accesible</li>
-                            <li>DateRange2 con validación</li>
-                        </ul>
-                    </div>
-                </div>
-            </section>
-        </div>
-    )
-}
-
-export default TextField2Examples