ui-next-library/README.md

Biblioteca de componentes UI para Next.js

# UI Next Library

Biblioteca de componentes React para proyectos Next.js con Tailwind CSS.

## Instalación

```bash
npm install ui-next-library
```

## Componentes disponibles

### Text

Componente de entrada de texto simple con soporte para iconos.

```jsx
import { Text } from 'ui-next-library';
import { FaUser } from 'react-icons/fa';

function MyComponent() {
  const [value, setValue] = useState('');
  
  return (
    <Text
      value={value}
      onChange={(e) => setValue(e.target.value)}
      placeholder="Ingresa texto"
      Icon={FaUser}
      iconPosition="left" // o "right"
    />
  );
}
```

#### Props

| Prop | Tipo | Default | Descripción |
|------|------|---------|-------------|
| value | string | - | Valor del input |
| placeholder | string | "" | Texto de placeholder |
| type | string | "text" | Tipo de input (text, password, etc.) |
| disabled | boolean | false | Deshabilita el input |
| readOnly | boolean | false | Hace el input de solo lectura |
| required | boolean | false | Marca el input como requerido |
| id | string | "" | ID del input |
| name | string | "" | Nombre del input |
| Icon | Component | null | Componente de icono (react-icons) |
| iconPosition | string | "left" | Posición del icono ("left" o "right") |
| iconClassName | string | "" | Clases adicionales para el icono |
| className | string | "" | Clases adicionales para el input |
| onChange | function | null | Función que se ejecuta al cambiar el valor |
| onBlur | function | null | Función que se ejecuta al perder el foco |
| onFocus | function | null | Función que se ejecuta al obtener el foco |
| onKeyDown | function | null | Función que se ejecuta al presionar una tecla |

### Email

Componente de entrada de correo electrónico con validación.

```jsx
import { Email } from 'ui-next-library';

function MyComponent() {
  const [email, setEmail] = useState('');
  
  return (
    <Email
      value={email}
      onChange={(e) => setEmail(e.target.value)}
      placeholder="ejemplo@correo.com"
    />
  );
}
```

#### Props

Hereda todas las props de Text y añade:

| Prop | Tipo | Default | Descripción |
|------|------|---------|-------------|
| Icon | Component | FaEnvelope | Icono por defecto |
| placeholder | string | "ejemplo@correo.com" | Placeholder por defecto |

### Password

Componente de entrada de contraseña con soporte para mostrar/ocultar la contraseña.

```jsx
import { Password } from 'ui-next-library';

function MyComponent() {
  const [password, setPassword] = useState('');
  
  return (
    <Password
      value={password}
      onChange={(e) => setPassword(e.target.value)}
      placeholder="Contraseña"
      requireValidation={true} // Activar validación interna
    />
  );
}
```

#### Props

Hereda todas las props de Text y añade:

| Prop | Tipo | Default | Descripción |
|------|------|---------|-------------|
| Icon | Component | FaLock | Icono por defecto |
| showPasswordIcon | boolean | true | Muestra/oculta el icono para ver la contraseña |
| placeholder | string | "Contraseña" | Placeholder por defecto |
| requireValidation | boolean | false | Activa la validación interna (mayúsculas y números) |
| customValidationMessage | string | "Debe incluir mayúsculas, números y caracteres especiales" | Mensaje de validación personalizado |

### Submit

Botón de envío para formularios con soporte para estados de carga.

```jsx
import { Submit } from 'ui-next-library';

function MyComponent() {
  const [isLoading, setIsLoading] = useState(false);
  
  const handleSubmit = async (e) => {
    e.preventDefault();
    setIsLoading(true);
    // Lógica de envío
    await submitData();
    setIsLoading(false);
  };
  
  return (
    <form onSubmit={handleSubmit}>
      {/* Campos del formulario */}
      <Submit 
        isLoading={isLoading}
        fullWidth
        color="blue"
        height="2.5rem" // Control de altura personalizada
      >
        Enviar formulario
      </Submit>
    </form>
  );
}
```

#### Props

| Prop | Tipo | Default | Descripción |
|------|------|---------|-------------|
| children | ReactNode | "Enviar" | Contenido del botón |
| type | string | "submit" | Tipo de botón |
| disabled | boolean | false | Deshabilita el botón |
| isLoading | boolean | false | Muestra estado de carga |
| loadingText | string | "Procesando..." | Texto durante la carga |
| showLoadingIcon | boolean | true | Muestra el icono de carga |
| loadingIcon | Component | null | Componente personalizado para el icono de carga |
| color | string | "blue" | Color del botón (blue, green, red, gray) |
| size | string | "md" | Tamaño del botón (sm, md, lg) |
| height | string | null | Altura personalizada (ejemplo: "2rem", "40px") |
| fullWidth | boolean | false | Usar ancho completo |
| className | string | "" | Clases adicionales |
| onClick | function | null | Función que se ejecuta al hacer clic |

## Desarrollo

```bash
# Instalar dependencias
npm install

# Iniciar servidor de desarrollo
npm run dev

# Construir la biblioteca
npm run build

# Publicar una nueva versión
npm run release:patch # o release:minor, release:major
```

## Licencia

MIT