npm - @luis-angel-martin-dzul/input-styles - Versions diffs - 0.0.23 → 0.0.25 - Mend

@luis-angel-martin-dzul/input-styles 0.0.23 → 0.0.25

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 (5) hide show

package/README.md CHANGED Viewed

@@ -1,1002 +1,1041 @@
-# 📦 Input Style
-**Librería de componentes y formularios Vue 3**
-Incluye componentes de inputs, selects, botones, paginación y más, estilizados con TailwindCSS y listos para producción.
-------
-![Última actualización](https://img.shields.io/badge/Actualizado-28%20de%20Junio%20del%2026-blue)
-![Versión](https://img.shields.io/badge/versión-0.0.20-indigo)
-------
-# 📦 Instalación
-La librería se distribuye mediante **npm**:
-```
-npm install @luis-angel-martin-dzul/input-styles
-```
-------
-# 🚀 Uso en Vue + Vite
-En `main.js` o `main.ts`:
-```js
-import { createApp } from 'vue'
-import App from './App.vue'
-import '@luis-angel-martin-dzul/input-styles/style.css'
-import InputStyle from '@luis-angel-martin-dzul/input-styles'
-const app = createApp(App)
-app.use(InputStyle)
-app.mount('#app')
-```
-Al instalar el plugin se registran automáticamente todos los componentes y las siguientes **propiedades globales** (disponibles en cualquier componente con la Options API):
-| Propiedad global | Equivale a | Descripción |
-| ---------------- | ---------- | ----------- |
-| `$alertstyle` | `AlertStyle` | Notificaciones tipo toast (ver [AlertStyle](#alertstyle-notificaciones-tipo-toast)). |
-| `$dialogstyle` | `DialogStyle` | Diálogos de confirmación / info / carga (ver [DialogStyle](#dialogstyle-diálogos-modales)). |
-| `$utilstyle` | `UtilStyle` | Utilidades internas (ej: generación de UUID). |
-------
-# Estilos default
-Para cargar correctamente los estilos debes realizar algo como lo siguiente:
-Agrega el @source para indicar que el componente requiere de tailwindcss
-```css
-@import "tailwindcss";
-@source "../node_modules/@luis-angel-martin-dzul/input-styles/**/*"
-```
-# 🎨 Estilos personalizados (Style Registry)
-La librería expone un sistema de **tokens de estilo configurables** que permite cambiar la apariencia de todos los componentes desde un solo lugar, sin necesidad de modificar el código fuente.
-Los estilos se configuran **antes de montar la app**, importando `configureStyles` directamente.
-## Opción A — vía `app.use` (recomendado)
-```js
-import VueInputYuc from '@luis-angel-martin-dzul/input-styles'
-app.use(VueInputYuc, {
-  styles: {
-    INPUT_BASE: 'w-full px-0 py-2 bg-transparent border-b focus:outline-none ...',
-    ICON_VALID:  'text-emerald-500',
-    // solo los tok ens que quieras cambiar
-  }
-})
-```
-## Opción B — importación directa
-```js
-import { configureStyles } from '@luis-angel-martin-dzul/input-styles'
-configureStyles({
-  LOADER_ARC_STROKE: '#3B82F6',
-  REQUIRED_ASTERISK: 'text-red-500',
-})
-```
-⚠️ `configureStyles()` debe llamarse **antes** de que los componentes se monten. Los cambios no son reactivos después del montaje inicial.
-------
-## 📋 Referencia completa de tokens
-### Tokens auxiliares de label
-_Afecta: todos los componentes que tienen `label` o `description`_
-Estos tokens controlan partes individuales del label y del texto descriptivo. Al sobrescribir uno, las funciones `inputLabelClass`, `inputCheckLabelClass` e `inputDescriptionClass` lo recogen automáticamente **sin necesidad de sobreescribir la función entera**.
-| Token | Tipo | Default | Descripción |
-| ----- | ---- | ------- | ----------- |
-| `INPUT_BASE_TITLE` | `string` | `'block text-sm font-medium'` | Clases estructurales del `<label>` de inputs de texto. |
-| `INPUT_CHECK_BASE_TITLE` | `string` | `'block text-sm font-medium'` | Clases estructurales del `<label>` de checkbox, radio y switch. |
-| `LABEL_DISABLED_STATIC` | `string` | `'text-gray-400'` | Color del label y descripción cuando el campo está deshabilitado. |
-| `LABEL_ENABLED_STATIC` | `string` | `'text-gray-700'` | Color del label cuando el campo está habilitado. |
-```js
-configureStyles({
-    LABEL_DISABLED_STATIC: 'text-gray-400',
-    LABEL_ENABLED_STATIC:  'text-gray-900',
-    INPUT_BASE_TITLE:      'block font-semibold mb-1 text-sm',
-})
-```
----
-### Inputs de texto
-_Afecta: `InputTextStyle`, `InputNumberStyle`, `InputPasswordStyle`, `TextAreaStyle`, `InputDateStyle`, `InputDateTimeStyle`, `InputTimeStyle`, `SelectStyle`_
-| Token | Tipo | Default | Descripción |
-| ----- | ---- | ------- | ----------- |
-| `INPUT_BASE` | `string` | `'w-full text-gray-800 bg-white px-3 py-1.5 rounded border ...'` | Clases base del `<input>`. No incluye borde ni ring (eso lo maneja `inputValidateClass`). |
-| `inputValidateClass` | `function(validate)` | Ver abajo | Retorna las clases de borde y ring según el estado de validación. `validate`: `true` / `false` / `null`. |
-| `inputLabelClass` | `function(disabled)` | Ver abajo | Retorna las clases del `<label>`. Internamente usa `INPUT_BASE_TITLE`, `LABEL_DISABLED_STATIC` y `LABEL_ENABLED_STATIC`. |
-| `inputDescriptionClass` | `function(validate, alignRight?)` | Ver abajo | Retorna las clases del texto de descripción. Internamente usa `ICON_VALID`, `ICON_INVALID` y `LABEL_DISABLED_STATIC`. |
-> 💡 Si solo quieres cambiar un color de validación, basta con sobrescribir `ICON_INVALID` o `ICON_VALID` — `inputDescriptionClass` los recoge automáticamente.
-```js
-configureStyles({
-    ICON_INVALID: 'text-red-500',
-    ICON_VALID:   'text-emerald-500',
-})
-// Override completo de las funciones (cuando necesitas control total)
-configureStyles({
-    inputValidateClass: (validate) => {
-        if (validate === false) return 'border-red-500 focus:ring-red-200'
-        if (validate === true)  return 'border-emerald-500 focus:ring-emerald-200'
-        return 'border-gray-200 focus:ring-indigo-200'
-    },
-    inputLabelClass: (disabled) => ['block font-bold mb-2', disabled ? 'text-gray-400' : 'text-gray-900'],
-    inputDescriptionClass: (validate, alignRight = true) => [
-        'block w-full text-sm',
-        alignRight && 'text-right',
-        validate === false ? 'text-red-500' : validate === true ? 'text-emerald-500' : 'text-gray-500',
-    ],
-})
-```
----
-### Select
-_Afecta: `SelectStyle`_
-| Token | Tipo | Default | Descripción |
-| ----- | ---- | ------- | ----------- |
-| `SELECT_DISABLED` | `string` | `'w-full px-3 py-1.5 rounded bg-gray-100 ...'` | Clases del input en estado disabled. |
-| `SELECT_DROPDOWN` | `string` | `'absolute z-20 w-full bg-white border ...'` | Clases del contenedor `<ul>` del dropdown. |
-| `SELECT_OPTION_BASE` | `string` | `'px-3 py-1 cursor-pointer text-md'` | Clases base de cada `<li>` del dropdown. |
-| `selectOptionClass` | `function(isSelected, isHighlighted)` | Ver abajo | Retorna clases dinámicas por opción según su estado. |
-| `SELECT_OPTGROUP` | `string` | `'px-2 pt-1 pb-0.5 text-xs font-semibold uppercase ...'` | Clases del encabezado de un grupo de opciones (`optgroup`). |
-| `SELECT_EMPTY` | `string` | `'px-3 py-1 text-gray-400 cursor-not-allowed'` | Clases del mensaje "Sin registros". |
-```js
-configureStyles({
-    selectOptionClass: (isSelected, isHighlighted) => {
-        if (isSelected)    return 'bg-indigo-100 text-indigo-900 font-medium'
-        if (isHighlighted) return 'bg-indigo-50 text-gray-900'
-        return 'hover:bg-indigo-50 text-gray-800'
-    },
-})
-```
----
-### Checkbox, Radio y Switch
-_Afecta: `InputCheckStyle`, `InputRadioStyle`, `InputSwitchStyle`_
-| Token | Tipo | Default | Descripción |
-| ----- | ---- | ------- | ----------- |
-| `inputCheckLabelClass` | `function(disabled)` | Ver abajo | Clases del label de checks. |
-| `CHECK_BOX_BASE` | `string` | `'w-5 h-5 flex items-center justify-center rounded border-2 transition'` | Estructura base del cuadro del checkbox. |
-| `RADIO_BASE` | `string` | `'w-5 h-5 flex items-center justify-center rounded-full transition'` | Estructura base del círculo del radio. |
-| `SWITCH_BASE` | `string` | `'w-10 h-5 relative flex items-center rounded-full transition border-2'` | Estructura base de la pista del switch. |
-| `checkBoxClass` | `function(model, disabled)` | Ver abajo | Clases de color del checkbox según estado activo/disabled. |
-| `radioClass` | `function(model, disabled)` | Ver abajo | Clases de color del radio button según estado. |
-| `switchClass` | `function(model, disabled)` | Ver abajo | Clases de color de la pista del switch. |
-| `switchDotClass` | `function(model, disabled)` | Ver abajo | Clases de color de la bola interior del switch. |
-```js
-configureStyles({
-    checkBoxClass: (model, disabled) => {
-        if (disabled) return model
-            ? 'bg-indigo-200 border-indigo-200 cursor-not-allowed'
-            : 'bg-gray-100 border-gray-200 cursor-not-allowed'
-        return model
-            ? 'bg-indigo-500 border-indigo-500 peer-focus:ring-2 peer-focus:ring-indigo-200'
-            : 'bg-white border-gray-300 peer-focus:ring-2 peer-focus:ring-indigo-200'
-    },
-})
-```
----
-### Paginación
-_Afecta: `PaginationStyle`_
-| Token | Tipo | Default | Descripción |
-| ----- | ---- | ------- | ----------- |
-| `PAGINATION_NAV_PREV` | `string` | `'bg-white hover:bg-indigo-50 border ...'` | Clases del botón de página anterior. |
-| `PAGINATION_NAV_NEXT` | `string` | `'bg-white hover:bg-indigo-50 border ...'` | Clases del botón de página siguiente. |
-| `PAGINATION_PAGE_BASE` | `string` | `'border px-2.5 py-2 cursor-pointer w-8 relative'` | Clases base de cada botón de página. |
-| `paginationPageClass` | `function(page, actualPage, index)` | Ver abajo | Retorna clases dinámicas por botón de página. |
-| `PAGINATION_SUMMARY` | `string` | `'text-sm text-gray-700'` | Clases del texto de resumen de registros. |
----
-### Loader
-_Afecta: `LoaderStyle`_
-| Token | Tipo | Default | Descripción |
-| ----- | ---- | ------- | ----------- |
-| `LOADER_ARC_STROKE` | `string` | `'#6366F1'` | Color hex del arco animado del loader (indigo-500). |
-| `LOADER_MESSAGE` | `string` | `'text-gray-600 text-lg font-medium'` | Clases del mensaje de carga. |
----
-### Iconos y asterisco de requerido
-_Afecta: todos los componentes con `required` o iconos de validación_
-| Token | Tipo | Default | Descripción |
-| ----- | ---- | ------- | ----------- |
-| `REQUIRED_ASTERISK` | `string` | `'text-red-500'` | Clase de color del asterisco `*` en campos requeridos. |
-| `ICON_VALID` | `string` | `'text-emerald-500'` | Clase de color del ícono de validación correcta. |
-| `ICON_INVALID` | `string` | `'text-red-500'` | Clase de color del ícono de validación errónea. |
-| `ICON_STATIC` | `string` | `'text-indigo-400'` | Clase de color de los íconos estáticos (reloj, calendario, ojo, chevron). |
-| `ICON_SIZE_STATIC` | `string` | `'w-5 h-5'` | Clases de tamaño de todos los íconos. |
----
-### File Upload y Download
-_Afecta: `InputFileUploadStyle`, `InputFileDownloadStyle`_
-| Token | Tipo | Default | Descripción |
-| ----- | ---- | ------- | ----------- |
-| `FILE_BUTTON_BASE` | `string` | `'flex items-center justify-center gap-3 px-4 py-2 border-2 rounded-xl ...'` | Clases estructurales del botón (compartido entre upload y download). |
-| `FILE_BUTTON_ACTIVE` | `string` | `'border-gray-200 bg-white text-gray-700 hover:border-indigo-400 ...'` | Clases del botón en estado normal/activo. |
-| `FILE_BUTTON_DISABLED` | `string` | `'border-gray-200 bg-gray-100 text-gray-400'` | Clases del botón en estado disabled. |
-| `FILE_ICON_BG` | `string` | `'bg-indigo-300'` | Fondo del círculo de ícono en estado activo. |
-| `FILE_ICON_BG_COMPLETE` | `string` | `'bg-emerald-500'` | Fondo del círculo de ícono cuando la descarga está completa. |
-| `FILE_ICON_BG_DISABLED` | `string` | `'bg-gray-300'` | Fondo del círculo de ícono en estado disabled. |
----
-### Time Picker
-_Afecta: `InputTimeStyle`_
-| Token | Tipo | Default | Descripción |
-| ----- | ---- | ------- | ----------- |
-| `TIME_PICKER_WRAPPER` | `string` | `'absolute z-20 left-0 top-full rounded-lg bg-white'` | Contenedor flotante del picker. |
-| `TIME_PICKER_CONTAINER` | `string` | `'border border-gray-300 rounded-lg p-3'` | Borde interior del picker. |
-| `TIME_PICKER_COLUMN` | `string` | `'h-48 overflow-y-auto border border-gray-200 rounded-md ...'` | Columna scrollable de horas/minutos. |
-| `TIME_PICKER_AMPM_COLUMN` | `string` | `'h-48 overflow-y-auto border border-gray-200 rounded-md ...'` | Columna scrollable AM/PM. |
-| `TIME_PICKER_COLUMN_LABEL` | `string` | `'block text-xs font-medium text-gray-500 mb-1 text-center'` | Label de cada columna ("Hora", "Minuto", "AM/PM"). |
-| `TIME_PICKER_ITEM` | `string` | `'px-3 py-1 text-center cursor-pointer hover:bg-indigo-50 ...'` | Fila base de cada ítem del picker. |
-| `timePickerItemClass` | `function(isActive)` | Ver abajo | Clases dinámicas de cada ítem según si está seleccionado. |
-------
-# 🧩 Componentes
-## Props comunes
-La mayoría de los componentes comparten las siguientes props:
-| Prop | Tipo | Default | Descripción |
-| ---- | ---- | ------- | ----------- |
-| `modelValue` | `String \| Number \| Boolean` | — | Valor del campo (v-model). |
-| `label` | `String` | `''` | Texto del label del campo. |
-| `description` | `String` | `''` | Texto de ayuda debajo del campo. Cambia de color según el estado de validación. |
-| `placeholder` | `String` | `''` | Placeholder del input. |
-| `disabled` | `Boolean` | `false` | Deshabilita el campo. |
-| `required` | `Boolean` | `false` | Marca el campo como requerido (muestra asterisco `*`). |
-| `validate` | `Boolean \| null` | `null` | Estado de validación: `true` = válido, `false` = inválido, `null` = sin estado. |
-| `mclass` | `String` | `null` | Clases CSS adicionales aplicadas directamente al elemento del input. |
-## Eventos comunes
-| Evento | Payload | Descripción |
-| ------ | ------- | ----------- |
-| `update:modelValue` | `value` | Se dispara al cambiar el valor (permite `v-model`). |
-| `change` | `value` | Se dispara al cambiar el valor. |
-| `blur` | `event` | Se dispara al perder el foco. |
-------
-## InputTextStyle
-Input de texto genérico. Soporta tipos `text`, `email`, `search`, `tel`, `url` y `number`.
-```vue
-<InputTextStyle
-    v-model="nombre"
-    label="Nombre"
-    placeholder="Escribe tu nombre"
-    :required="true"
-    :validate="validate"
-    description="Campo requerido"
-/>
-```
-| Prop | Tipo | Default | Descripción |
-| ---- | ---- | ------- | ----------- |
-| `modelValue` | `String \| Number` | `''` | Valor del campo. |
-| `label` | `String` | `''` | |
-| `description` | `String` | `''` | |
-| `placeholder` | `String` | `''` | |
-| `type` | `String` | `'text'` | Tipo del input: `text`, `email`, `search`, `tel`, `url`, `number`. |
-| `maxlength` | `String` | `null` | Longitud máxima de caracteres. |
-| `minlength` | `String` | `null` | Longitud mínima de caracteres. |
-| `min` | `String` | `null` | Valor mínimo (solo cuando `type="number"`, aplicado al perder el foco). |
-| `max` | `String` | `null` | Valor máximo (solo cuando `type="number"`, aplicado al perder el foco). |
-| `disabled` | `Boolean` | `false` | |
-| `required` | `Boolean` | `false` | |
-| `validate` | `Boolean \| null` | `null` | |
-| `mclass` | `String` | `null` | |
-------
-## InputNumberStyle
-Input numérico con control preciso de dígitos, decimales, rango y formato de visualización. El valor se emite siempre como string numérico limpio (ej: `"1234.56"`). Al perder el foco se formatea con `toLocaleString`.
-```vue
-<InputNumberStyle
-    v-model="monto"
-    label="Monto"
-    numeric="10,2"
-    min="0"
-    max="9999999999"
-    :required="true"
-    :validate="validate"
-/>
-```
-| Prop | Tipo | Default | Descripción |
-| ---- | ---- | ------- | ----------- |
-| `modelValue` | `String \| Number` | `''` | Valor del campo. |
-| `label` | `String` | `''` | |
-| `description` | `String` | `''` | |
-| `placeholder` | `String` | `''` | |
-| `numeric` | `String` | `null` | Formato tipo SQL: `"10,2"` → 10 dígitos enteros, 2 decimales. Si se omite, usa `10,2` por defecto. |
-| `min` | `String` | `null` | Valor mínimo (aplicado al perder el foco). Si es `null` o negativo, permite negativos. |
-| `max` | `String` | `null` | Valor máximo (aplicado al perder el foco). |
-| `disabled` | `Boolean` | `false` | |
-| `required` | `Boolean` | `false` | |
-| `validate` | `Boolean \| null` | `null` | |
-| `mclass` | `String` | `null` | |
-**Comportamiento:**
-- Puedes escribir `0` y luego `.` para empezar los decimales: el punto se conserva a la espera de los dígitos decimales (solo si los decimales están activados en `numeric`).
-- Al **enfocar** el campo, si el valor es `0` (o está vacío) se limpia, para que al escribir reemplaces el valor en lugar de anteponerlo.
-- Al **perder el foco**, si el campo queda vacío o en `0`, se conserva el valor `0` formateado (ej: `"0.00"`), aplicando además los límites `min`/`max`.
-**Navegación por teclado:**
-- `↑` / `↓` — aumentar/disminuir el valor en unidades, respetando `min`/`max`.
-------
-## InputPasswordStyle
-Input de contraseña con toggle para mostrar/ocultar el texto.
-```vue
-<InputPasswordStyle
-    v-model="password"
-    label="Contraseña"
-    placeholder="Mínimo 8 caracteres"
-    :required="true"
-    :validate="validate"
-/>
-```
-| Prop | Tipo | Default | Descripción |
-| ---- | ---- | ------- | ----------- |
-| `modelValue` | `String \| Number` | `''` | Valor del campo. |
-| `label` | `String` | `''` | |
-| `description` | `String` | `''` | |
-| `placeholder` | `String` | `''` | |
-| `maxlength` | `String` | `null` | Longitud máxima. |
-| `disabled` | `Boolean` | `false` | |
-| `required` | `Boolean` | `false` | |
-| `validate` | `Boolean \| null` | `null` | |
-| `mclass` | `String` | `null` | |
-------
-## TextAreaStyle
-Área de texto multi-línea.
-```vue
-<TextAreaStyle
-    v-model="comentario"
-    label="Comentario"
-    placeholder="Escribe aquí..."
-    row="5"
-    :maxlength="500"
-    :validate="validate"
-/>
-```
-| Prop | Tipo | Default | Descripción |
-| ---- | ---- | ------- | ----------- |
-| `modelValue` | `String` | `''` | Valor del campo. |
-| `label` | `String` | `''` | |
-| `description` | `String` | `''` | |
-| `placeholder` | `String` | `''` | |
-| `row` | `String` | `'3'` | Número de filas visibles del textarea. |
-| `maxlength` | `String` | `null` | Longitud máxima de caracteres. |
-| `disabled` | `Boolean` | `false` | |
-| `required` | `Boolean` | `false` | |
-| `validate` | `Boolean \| null` | `null` | |
-| `mclass` | `String` | `null` | |
-------
-## SelectStyle
-Select personalizado con dropdown, navegación por teclado y búsqueda por tipeo. El dropdown se posiciona automáticamente arriba o abajo según el espacio disponible.
-```vue
-<SelectStyle
-    v-model="pais"
-    label="País"
-    :list="paises"
-    return-value="value"
-    :required="true"
-    :validate="validate"
-/>
-```
-```js
-// Formato del array `list` — lista plana
-const paises = [
-    { value: 1, text: 'México' },
-    { value: 2, text: 'España' },
-    { value: 3, text: 'Argentina' },
-]
-// El `value` es opcional: si se omite, se usa el `text` como valor
-const colores = [
-    { text: 'Rojo' },
-    { text: 'Verde' },
-]
-// Lista agrupada — cada grupo tiene un `label` y sus `options`
-const ubicaciones = [
-    { label: 'América', options: [{ value: 1, text: 'México' }, { value: 2, text: 'Argentina' }] },
-    { label: 'Europa',  options: [{ value: 3, text: 'España' }, { value: 4, text: 'Francia' }] },
-]
-```
-| Prop | Tipo | Default | Descripción |
-| ---- | ---- | ------- | ----------- |
-| `modelValue` | `String \| Number \| Object` | — | Valor seleccionado. |
-| `list` | `Array` | `[]` | Array de opciones. Acepta lista plana `{ value, text }` o agrupada `{ label, options: [...] }`. El `value` es opcional: si se omite, se usa el `text` como valor. |
-| `returnValue` | `String` | `'value'` | Qué se emite al seleccionar: `'value'` (item.value), `'text'` (item.text) u `'object'` (el item completo). |
-| `label` | `String` | `''` | |
-| `description` | `String` | `''` | |
-| `wrapOptions` | `Boolean` | `false` | `true` = permite que el texto de cada opción haga salto de línea; `false` = lo trunca con elipsis. |
-| `disabled` | `Boolean` | `false` | |
-| `required` | `Boolean` | `false` | |
-| `validate` | `Boolean \| null` | `null` | |
-| `mclass` | `String` | `null` | |
-**Navegación por teclado:**
-- `↑` / `↓` — navegar opciones
-- `Enter` — seleccionar la opción resaltada
-- `Escape` — cerrar el dropdown
-- Tipear letras — búsqueda inmediata en la lista
-------
-## InputCheckStyle
-Checkbox estilizado con label y descripción.
-```vue
-<InputCheckStyle
-    v-model="aceptaTerminos"
-    label="Acepto los términos y condiciones"
-    :required="true"
-/>
-```
-| Prop | Tipo | Default | Descripción |
-| ---- | ---- | ------- | ----------- |
-| `modelValue` | `Boolean` | `false` | Estado del checkbox. |
-| `label` | `String` | `''` | |
-| `description` | `String` | `''` | |
-| `disabled` | `Boolean` | `false` | |
-| `required` | `Boolean` | `false` | |
-| `validate` | `Boolean \| null` | `null` | |
-| `mclass` | `String` | `null` | Clases adicionales del cuadro del checkbox. |
-------
-## InputRadioStyle
-Radio button estilizado con label y descripción.
-```vue
-<InputRadioStyle
-    v-model="opcionA"
-    label="Opción A"
-/>
-```
-| Prop | Tipo | Default | Descripción |
-| ---- | ---- | ------- | ----------- |
-| `modelValue` | `Boolean` | `false` | Estado del radio. |
-| `label` | `String` | `''` | |
-| `description` | `String` | `''` | |
-| `disabled` | `Boolean` | `false` | |
-| `required` | `Boolean` | `false` | |
-| `validate` | `Boolean \| null` | `null` | |
-| `mclass` | `String` | `null` | Clases adicionales del círculo del radio. |
-------
-## InputSwitchStyle
-Toggle switch estilizado.
-```vue
-<InputSwitchStyle
-    v-model="activo"
-    label="Activar notificaciones"
-/>
-```
-| Prop | Tipo | Default | Descripción |
-| ---- | ---- | ------- | ----------- |
-| `modelValue` | `Boolean` | `false` | Estado del switch. |
-| `label` | `String` | `''` | |
-| `description` | `String` | `''` | |
-| `disabled` | `Boolean` | `false` | |
-| `required` | `Boolean` | `false` | |
-| `validate` | `Boolean \| null` | `null` | |
-| `mclass` | `String` | `null` | Clases adicionales de la pista del switch. |
-------
-## InputDateStyle
-Selector de fecha con máscara `dd/mm/aaaa`, navegación por teclado entre secciones y calendario visual nativo (sin dependencias externas). El valor se emite en formato `YYYY-MM-DD`.
-El calendario incluye vistas de días, meses y años, y un botón **Hoy** para navegar rápidamente a la fecha actual.
-```vue
-<InputDateStyle
-    v-model="fechaNacimiento"
-    label="Fecha de nacimiento"
-    min="1900-01-01"
-    max="2100-12-31"
-    :validate="validate"
-/>
-```
-| Prop | Tipo | Default | Descripción |
-| ---- | ---- | ------- | ----------- |
-| `modelValue` | `String \| Date` | — | Valor de la fecha en formato `YYYY-MM-DD` o `Date`. |
-| `label` | `String` | `''` | |
-| `description` | `String` | `''` | |
-| `min` | `String` | `'1900-01-01'` | Fecha mínima seleccionable en el calendario (formato `YYYY-MM-DD`). |
-| `max` | `String` | `'2100-12-31'` | Fecha máxima seleccionable en el calendario (formato `YYYY-MM-DD`). |
-| `disabledDates` | `Array` | `[]` | Fechas deshabilitadas. Array de strings `'YYYY-MM-DD'` o objetos `Date`. |
-| `disabled` | `Boolean` | `false` | |
-| `readonly` | `Boolean` | `false` | Solo lectura: muestra el valor pero bloquea la edición por teclado. |
-| `required` | `Boolean` | `false` | |
-| `validate` | `Boolean \| null` | `null` | |
-| `mclass` | `String` | `null` | |
-**Valor emitido:** `'YYYY-MM-DD'` (string) o `''` si la fecha es inválida o está vacía.
-**Navegación por teclado:**
-- Escribe los dígitos y el foco avanza automáticamente entre día → mes → año
-- `↑` / `↓` — incrementar/decrementar la sección activa (la fecha resultante se ajusta a los límites `min`/`max`)
-- `←` / `→` — mover entre secciones
-- `Tab` / `Shift + Tab` — mover entre secciones (al llegar al extremo, el foco sale del campo)
-- `Backspace` / `Delete` — limpiar la sección activa
-- Clic en el ícono 📅 — abre/cierra el calendario visual
-------
-## InputTimeStyle
-Selector de hora con picker de columnas scrollables. Soporta formato 12h (AM/PM) o 24h. El valor se emite en formato `HH:mm`.
-```vue
-<InputTimeStyle
-    v-model="horaInicio"
-    label="Hora de inicio"
-    min="08:00"
-    max="18:00"
-    :is24h="true"
-    :validate="validate"
-/>
-```
-| Prop | Tipo | Default | Descripción |
-| ---- | ---- | ------- | ----------- |
-| `modelValue` | `String` | — | Valor de la hora en formato `HH:mm`. |
-| `label` | `String` | `''` | |
-| `description` | `String` | `''` | |
-| `min` | `String` | `null` | Hora mínima (ej: `'08:00'`). |
-| `max` | `String` | `null` | Hora máxima (ej: `'18:00'`). |
-| `is24h` | `Boolean` | `false` | `true` = formato 24h, `false` = formato 12h con selector AM/PM. |
-| `disabled` | `Boolean` | `false` | |
-| `required` | `Boolean` | `false` | |
-| `validate` | `Boolean \| null` | `null` | |
-| `mclass` | `String` | `null` | |
-**Valor emitido:** `'HH:mm'` en formato 24h siempre, independientemente del modo de visualización.
-------
-## InputDateTimeStyle
-Selector combinado de fecha y hora con máscara `dd/mm/aaaa hh:mm` (o `dd/mm/aaaa hh:mm a.m.` en modo 12h), calendario visual nativo y picker de columnas scrollables para la hora. El valor se emite en formato `YYYY-MM-DDTHH:mm:00.000`.
-```vue
-<InputDateTimeStyle
-    v-model="fechaHora"
-    label="Fecha y hora"
-    min="2000-01-01"
-    max="2100-12-31"
-    :is24h="true"
-    :validate="validate"
-/>
-```
-| Prop | Tipo | Default | Descripción |
-| ---- | ---- | ------- | ----------- |
-| `modelValue` | `String \| Date` | — | Valor en formato `YYYY-MM-DDTHH:mm:00.000` o `Date`. |
-| `label` | `String` | `''` | |
-| `description` | `String` | `''` | |
-| `min` | `String` | `'1900-01-01'` | Fecha mínima seleccionable (formato `YYYY-MM-DD`). |
-| `max` | `String` | `'2100-12-31'` | Fecha máxima seleccionable (formato `YYYY-MM-DD`). |
-| `disabledDates` | `Array` | `[]` | Fechas deshabilitadas. Array de strings `'YYYY-MM-DD'` o `Date`. |
-| `is24h` | `Boolean` | `false` | `true` = formato 24h, `false` = formato 12h con selector a.m./p.m. |
-| `disabled` | `Boolean` | `false` | |
-| `readonly` | `Boolean` | `false` | Solo lectura. |
-| `required` | `Boolean` | `false` | |
-| `validate` | `Boolean \| null` | `null` | |
-| `mclass` | `String` | `null` | |
-**Valor emitido:** `'YYYY-MM-DDTHH:mm:00.000'` (string) o `''` si la fecha/hora es inválida o está vacía.
-**Comportamiento del picker:**
-- El calendario permanece abierto al seleccionar la fecha, para que puedas ajustar también la hora.
-- El selector de hora embebido en el picker usa las mismas columnas scrollables que `InputTimeStyle`.
-- Botón **Ahora** — establece la fecha y hora actuales de un solo clic.
-**Navegación por teclado:**
-- Escribe los dígitos y el foco avanza automáticamente: día → mes → año → hora → minuto → a.m./p.m.
-- `↑` / `↓` — incrementar/decrementar la sección activa (la fecha se ajusta a los límites `min`/`max`)
-- `←` / `→` — mover entre secciones
-- `Tab` / `Shift + Tab` — mover entre secciones (al llegar al extremo, el foco sale del campo)
-- `Backspace` / `Delete` — limpiar la sección activa
-- `a` / `p` — cambiar entre a.m. y p.m. (solo modo 12h)
-- Clic en el ícono 📅 — abre/cierra el picker
-------
-## InputFileUploadStyle
-Botón para adjuntar archivos con validación de tamaño y formato.
-```vue
-<InputFileUploadStyle
-    v-model="archivo"
-    :formats="['pdf', 'docx']"
-    max-size-m-b="10"
-    :state="uploadState"
-/>
-```
-| Prop | Tipo | Default | Descripción |
-| ---- | ---- | ------- | ----------- |
-| `modelValue` | `File` | `null` | Archivo seleccionado. |
-| `disabled` | `Boolean` | `false` | Deshabilita el botón. |
-| `formats` | `Array` | `[]` | Extensiones permitidas (ej: `['pdf', 'xlsx', 'png']`). Array vacío = todos los formatos. |
-| `maxSizeMB` | `String \| Number` | `5` | Tamaño máximo del archivo en MB. |
-| `state` | `String` | `'uphold'` | Estado del botón: `'uphold'` (normal) o `'loader'` (cargando, muestra spinner). |
-| `delay` | `String` | `'1.5'` | Segundos de bloqueo del botón tras un clic, para evitar doble envío. |
-**Eventos:**
-- `update:modelValue` — emite el `File` seleccionado, o `null` si el archivo no es válido.
-- `change` — igual que `update:modelValue`.
-El componente valida automáticamente el tamaño y el formato, mostrando un mensaje de error inline si la validación falla.
-------
-## InputFileDownloadStyle
-Botón para descargar archivos con tres estados visuales.
-```vue
-<InputFileDownloadStyle
-    :state="downloadState"
-    :disabled="false"
-    @click="descargarArchivo"
-/>
-```
-| Prop | Tipo | Default | Descripción |
-| ---- | ---- | ------- | ----------- |
-| `disabled` | `Boolean` | `false` | Deshabilita el botón. |
-| `state` | `String` | `'download'` | Estado: `'download'` (normal), `'loader'` (descargando, spinner), `'complete'` (completado, check verde). |
-| `delay` | `String` | `'1.5'` | Segundos de bloqueo del botón tras un clic. |
-**Eventos:**
-- `click` — se dispara al hacer clic (solo si no está deshabilitado).
-------
-## ButtonStyle
-Botón genérico con bloqueo automático anti-doble-clic.
-```vue
-<ButtonStyle
-    class="px-4 py-2 bg-indigo-500 text-white rounded"
-    :disabled="cargando"
-    @click="guardar"
->
-    Guardar
-</ButtonStyle>
-```
-| Prop | Tipo | Default | Descripción |
-| ---- | ---- | ------- | ----------- |
-| `type` | `String` | `'button'` | Tipo del botón: `'button'` o `'submit'`. |
-| `class` | `String` | `''` | Clases CSS del botón (TailwindCSS). |
-| `disabled` | `Boolean` | `false` | Deshabilita el botón. |
-| `delay` | `String` | `'1.5'` | Segundos de bloqueo automático tras hacer clic (anti-doble-clic). |
-**Eventos:**
-- `click` — se dispara al hacer clic (solo si no está deshabilitado ni en periodo de bloqueo).
-Acepta contenido mediante `<slot>` (texto, íconos, etc.).
-------
-## LoaderStyle
-Indicador de carga circular animado.
-```vue
-<LoaderStyle message="Procesando datos..." />
-```
-| Prop | Tipo | Default | Descripción |
-| ---- | ---- | ------- | ----------- |
-| `message` | `String` | `'Cargando...'` | Texto que se muestra debajo del arco animado. |
-El color del arco se controla con el token `LOADER_ARC_STROKE`.
-------
-## PaginationStyle
-Paginador con navegación anterior/siguiente, botones de página y resumen de registros.
-```vue
-<PaginationStyle
-    :total-pages="totalPaginas"
-    :actual-page="paginaActual"
-    :records="totalRegistros"
-    :limit="registrosPorPagina"
-    :summary="true"
-    @page="cambiarPagina"
-/>
-```
-| Prop | Tipo | Default | Descripción |
-| ---- | ---- | ------- | ----------- |
-| `totalPages` | `Number` | `0` | Total de páginas. |
-| `actualPage` | `Number` | `1` | Página actualmente activa. |
-| `records` | `Number` | `0` | Total de registros (para el resumen). |
-| `limit` | `Number` | `0` | Registros por página (para calcular el rango del resumen). |
-| `summary` | `Boolean` | `false` | `true` = muestra el texto "Mostrando X - Y de Z". |
-**Eventos:**
-- `page` — emite el número de página a la que se desea navegar.
-El paginador muestra hasta 7 botones con elipsis (`...`) inteligentes cuando hay más páginas.
-------
-## ModalStyle
-Ventana modal con `Teleport` al `body`, animaciones de entrada/salida, bloqueo del scroll de fondo y cierre por tecla `Escape`. El estado de apertura se controla con `v-model`.
-```vue
-<ButtonStyle @click="showModal = true">Abrir modal</ButtonStyle>
-<ModalStyle v-model="showModal" title="Detalles" size="lg">
-    <p>Contenido del modal...</p>
-    <template #footer="{ close }">
-        <div class="flex justify-end gap-2">
-            <ButtonStyle class="px-4 py-2 border rounded" @click="close">Cerrar</ButtonStyle>
-        </div>
-    </template>
-</ModalStyle>
-```
-| Prop | Tipo | Default | Descripción |
-| ---- | ---- | ------- | ----------- |
-| `modelValue` | `Boolean` | `false` | Controla la visibilidad del modal (`v-model`). |
-| `title` | `String` | `'Sin titulo asignado'` | Título mostrado en el header (si no se usa el slot `title`). |
-| `size` | `String` | `'lg'` | Ancho máximo: `'sm'`, `'md'`, `'lg'`, `'xl'`, `'2xl'`, `'3xl'`, `'4xl'`, `'5xl'`, `'full'`. |
-| `showCloseButton` | `Boolean` | `true` | Muestra el botón `✕` de cierre en el header. |
-| `closeOnEscape` | `Boolean` | `true` | Permite cerrar el modal con la tecla `Escape`. |
-| `closeOnOverlayClick` | `Boolean` | `true` | Permite cerrar el modal al hacer clic en el fondo. |
-**Slots:**
-- `title` — reemplaza el título del header.
-- *default* — contenido principal. Recibe `{ close }` para cerrar desde dentro.
-- `footer` — pie del modal (solo se renderiza si se provee). Recibe `{ close }`.
-**Eventos:**
-- `update:modelValue` — emite `false` al cerrarse.
-------
-## AlertStyle (notificaciones tipo toast)
-Utilidad JavaScript (no es un componente) para mostrar notificaciones flotantes que se auto-descartan. Disponible como propiedad global `$alertstyle` tras instalar el plugin, o mediante importación directa.
-```js
-// Vía global property (Options API)
-this.$alertstyle.success('Guardado', 'Los cambios se guardaron correctamente')
-// Vía importación directa
-import { AlertStyle } from '@luis-angel-martin-dzul/input-styles'
-AlertStyle.error('Error', 'No se pudo completar la operación')
-```
-| Método | Parámetros | Descripción |
-| ------ | ---------- | ----------- |
-| `success(title, message?)` | `String, String` | Notificación verde de éxito. |
-| `error(title, message?)` | `String, String` | Notificación roja de error. |
-| `warning(title, message?)` | `String, String` | Notificación de advertencia. |
-| `info(title, message?)` | `String, String` | Notificación informativa. |
-| `neutral(title, message?)` | `String, String` | Notificación neutral. |
-Cada notificación se cierra automáticamente a los 4 segundos o manualmente con su botón `×`.
-------
-## DialogStyle (diálogos modales)
-Utilidad JavaScript para diálogos de confirmación, información y carga, con interfaz fluida (encadenable). Disponible como global `$dialogstyle` o por importación directa.
-```js
-// Confirmación
-this.$dialogstyle.confirm('¿Eliminar registro?', 'Esta acción no se puede deshacer')
-    .onAccept(() => eliminar())
-    .onCancel(() => console.log('Cancelado'))
-// Información (un solo botón)
-this.$dialogstyle.info('Operación completada')
-    .onConfirm(() => console.log('Aceptado'))
-// Carga (bloqueante, se cierra manualmente)
-const loader = this.$dialogstyle.loading('Procesando...', 'Espere un momento')
-loader.updateMessage('Casi listo...')
-loader.close()
-```
-| Método | Retorna | Descripción |
-| ------ | ------- | ----------- |
-| `confirm(title, description?)` | controlador con `.onAccept(cb)` / `.onCancel(cb)` | Diálogo con botones Aceptar / Cancelar. |
-| `info(title, description?)` | controlador con `.onConfirm(cb)` | Diálogo informativo con un solo botón Aceptar. |
-| `loading(title, description?)` | `{ close, updateTitle, updateMessage }` | Diálogo de carga con spinner; se cierra con `.close()`. |
-| `finish(immediate?)` | `Promise` | Cierra el diálogo abierto manualmente. |
-> 💡 La tecla `Escape` no cierra el diálogo (hace una animación de "shake"), para forzar una decisión explícita del usuario.
-------
-## Ejemplo de uso completo
-```vue
-<template>
-    <div class="p-6 space-y-4 max-w-md">
-        <InputTextStyle
-            v-model="form.nombre"
-            label="Nombre completo"
-            placeholder="Ej: Juan Pérez"
-            :required="true"
-            :validate="validaciones.nombre"
-        />
-        <InputNumberStyle
-            v-model="form.monto"
-            label="Monto"
-            numeric="10,2"
-            min="0"
-            :validate="validaciones.monto"
-        />
-        <InputPasswordStyle
-            v-model="form.password"
-            label="Contraseña"
-            :required="true"
-            :validate="validaciones.password"
-        />
-        <SelectStyle
-            v-model="form.pais"
-            label="País"
-            :list="paises"
-            return-value="value"
-            :validate="validaciones.pais"
-        />
-        <InputDateStyle
-            v-model="form.fecha"
-            label="Fecha"
-            :validate="validaciones.fecha"
-        />
-        <InputDateTimeStyle
-            v-model="form.fechaHora"
-            label="Fecha y hora"
-            :is24h="true"
-            :validate="validaciones.fechaHora"
-        />
-        <InputTimeStyle
-            v-model="form.hora"
-            label="Hora"
-            :is24h="true"
-        />
-        <InputCheckStyle
-            v-model="form.acepta"
-            label="Acepto los términos"
-            :required="true"
-        />
-        <ButtonStyle
-            class="w-full px-4 py-2 bg-indigo-500 text-white rounded hover:bg-indigo-600"
-            @click="enviar"
-        >
-            Enviar
-        </ButtonStyle>
-    </div>
-</template>
-<script setup>
-import { ref } from 'vue'
-import {
-    InputTextStyle, InputNumberStyle, InputPasswordStyle,
-    SelectStyle, InputDateStyle, InputDateTimeStyle, InputTimeStyle,
-    InputCheckStyle, ButtonStyle
-} from '@luis-angel-martin-dzul/input-styles'
-const form = ref({
-    nombre: '', monto: '', password: '',
-    pais: null, fecha: '', fechaHora: '', hora: '', acepta: false
-})
-const validaciones = ref({
-    nombre: null, monto: null, password: null,
-    pais: null, fecha: null, fechaHora: null
-})
-const paises = [
-    { value: 1, text: 'México' },
-    { value: 2, text: 'España' },
-]
-function enviar() {
-    validaciones.value.nombre = form.value.nombre.length > 0
-    // ... resto de validaciones
-}
-</script>
-```
+# 📦 Input Style
+**Librería de componentes y formularios Vue 3**
+Incluye componentes de inputs, selects, botones, paginación y más, estilizados con TailwindCSS y listos para producción.
+------
+![Última actualización](https://img.shields.io/badge/Actualizado-28%20de%20Junio%20del%2026-blue)
+![Versión](https://img.shields.io/badge/versión-0.0.20-indigo)
+------
+# 📦 Instalación
+La librería se distribuye mediante **npm**:
+```
+npm install @luis-angel-martin-dzul/input-styles
+```
+------
+# 🚀 Uso en Vue + Vite
+En `main.js` o `main.ts`:
+```js
+import { createApp } from 'vue'
+import App from './App.vue'
+import '@luis-angel-martin-dzul/input-styles/style.css'
+import InputStyle from '@luis-angel-martin-dzul/input-styles'
+const app = createApp(App)
+app.use(InputStyle)
+app.mount('#app')
+```
+Al instalar el plugin se registran automáticamente todos los componentes y las siguientes **propiedades globales** (disponibles en cualquier componente con la Options API):
+| Propiedad global | Equivale a | Descripción |
+| ---------------- | ---------- | ----------- |
+| `$alertstyle` | `AlertStyle` | Notificaciones tipo toast (ver [AlertStyle](#alertstyle-notificaciones-tipo-toast)). |
+| `$dialogstyle` | `DialogStyle` | Diálogos de confirmación / info / carga (ver [DialogStyle](#dialogstyle-diálogos-modales)). |
+| `$utilstyle` | `UtilStyle` | Utilidades internas (ej: generación de UUID). |
+------
+# Estilos default
+Para cargar correctamente los estilos debes realizar algo como lo siguiente:
+Agrega el @source para indicar que el componente requiere de tailwindcss
+```css
+@import "tailwindcss";
+@source "../node_modules/@luis-angel-martin-dzul/input-styles/**/*"
+```
+# 🎨 Estilos personalizados (Style Registry)
+La librería expone un sistema de **tokens de estilo configurables** que permite cambiar la apariencia de todos los componentes desde un solo lugar, sin necesidad de modificar el código fuente.
+Los estilos se configuran **antes de montar la app**, importando `configureStyles` directamente.
+## Opción A — vía `app.use` (recomendado)
+```js
+import VueInputYuc from '@luis-angel-martin-dzul/input-styles'
+app.use(VueInputYuc, {
+  styles: {
+    INPUT_BASE: 'w-full px-0 py-2 bg-transparent border-b focus:outline-none ...',
+    ICON_VALID:  'text-emerald-500',
+    // solo los tok ens que quieras cambiar
+  }
+})
+```
+## Opción B — importación directa
+```js
+import { configureStyles } from '@luis-angel-martin-dzul/input-styles'
+configureStyles({
+  LOADER_ARC_STROKE: '#3B82F6',
+  REQUIRED_ASTERISK: 'text-red-500',
+})
+```
+⚠️ `configureStyles()` debe llamarse **antes** de que los componentes se monten. Los cambios no son reactivos después del montaje inicial.
+------
+## 📋 Referencia completa de tokens
+### Tokens auxiliares de label
+_Afecta: todos los componentes que tienen `label` o `description`_
+Estos tokens controlan partes individuales del label y del texto descriptivo. Al sobrescribir uno, las funciones `inputLabelClass`, `inputCheckLabelClass` e `inputDescriptionClass` lo recogen automáticamente **sin necesidad de sobreescribir la función entera**.
+| Token | Tipo | Default | Descripción |
+| ----- | ---- | ------- | ----------- |
+| `INPUT_BASE_TITLE` | `string` | `'block text-sm font-medium'` | Clases estructurales del `<label>` de inputs de texto. |
+| `INPUT_CHECK_BASE_TITLE` | `string` | `'block text-sm font-medium'` | Clases estructurales del `<label>` de checkbox, radio y switch. |
+| `LABEL_DISABLED_STATIC` | `string` | `'text-gray-400'` | Color del label y descripción cuando el campo está deshabilitado. |
+| `LABEL_ENABLED_STATIC` | `string` | `'text-gray-700'` | Color del label cuando el campo está habilitado. |
+```js
+configureStyles({
+    LABEL_DISABLED_STATIC: 'text-gray-400',
+    LABEL_ENABLED_STATIC:  'text-gray-900',
+    INPUT_BASE_TITLE:      'block font-semibold mb-1 text-sm',
+})
+```
+---
+### Inputs de texto
+_Afecta: `InputTextStyle`, `InputNumberStyle`, `InputPasswordStyle`, `TextAreaStyle`, `InputDateStyle`, `InputDateTimeStyle`, `InputTimeStyle`, `SelectStyle`_
+| Token | Tipo | Default | Descripción |
+| ----- | ---- | ------- | ----------- |
+| `INPUT_BASE` | `string` | `'w-full text-gray-800 bg-white px-3 py-1.5 rounded border ...'` | Clases base del `<input>`. No incluye borde ni ring (eso lo maneja `inputValidateClass`). |
+| `inputValidateClass` | `function(validate)` | Ver abajo | Retorna las clases de borde y ring según el estado de validación. `validate`: `true` / `false` / `null`. |
+| `inputLabelClass` | `function(disabled)` | Ver abajo | Retorna las clases del `<label>`. Internamente usa `INPUT_BASE_TITLE`, `LABEL_DISABLED_STATIC` y `LABEL_ENABLED_STATIC`. |
+| `inputDescriptionClass` | `function(validate, alignRight?)` | Ver abajo | Retorna las clases del texto de descripción. Internamente usa `ICON_VALID`, `ICON_INVALID` y `LABEL_DISABLED_STATIC`. |
+> 💡 Si solo quieres cambiar un color de validación, basta con sobrescribir `ICON_INVALID` o `ICON_VALID` — `inputDescriptionClass` los recoge automáticamente.
+```js
+configureStyles({
+    ICON_INVALID: 'text-red-500',
+    ICON_VALID:   'text-emerald-500',
+})
+// Override completo de las funciones (cuando necesitas control total)
+configureStyles({
+    inputValidateClass: (validate) => {
+        if (validate === false) return 'border-red-500 focus:ring-red-200'
+        if (validate === true)  return 'border-emerald-500 focus:ring-emerald-200'
+        return 'border-gray-200 focus:ring-indigo-200'
+    },
+    inputLabelClass: (disabled) => ['block font-bold mb-2', disabled ? 'text-gray-400' : 'text-gray-900'],
+    inputDescriptionClass: (validate, alignRight = true) => [
+        'block w-full text-sm',
+        alignRight && 'text-right',
+        validate === false ? 'text-red-500' : validate === true ? 'text-emerald-500' : 'text-gray-500',
+    ],
+})
+```
+---
+### Select
+_Afecta: `SelectStyle`_
+| Token | Tipo | Default | Descripción |
+| ----- | ---- | ------- | ----------- |
+| `SELECT_DISABLED` | `string` | `'w-full px-3 py-1.5 rounded bg-gray-100 ...'` | Clases del input en estado disabled. |
+| `SELECT_DROPDOWN` | `string` | `'absolute z-20 w-full bg-white border ...'` | Clases del contenedor `<ul>` del dropdown. |
+| `SELECT_OPTION_BASE` | `string` | `'px-3 py-1 cursor-pointer text-md'` | Clases base de cada `<li>` del dropdown. |
+| `selectOptionClass` | `function(isSelected, isHighlighted)` | Ver abajo | Retorna clases dinámicas por opción según su estado. |
+| `SELECT_OPTGROUP` | `string` | `'px-2 pt-1 pb-0.5 text-xs font-semibold uppercase ...'` | Clases del encabezado de un grupo de opciones (`optgroup`). |
+| `SELECT_EMPTY` | `string` | `'px-3 py-1 text-gray-400 cursor-not-allowed'` | Clases del mensaje "Sin registros". |
+```js
+configureStyles({
+    selectOptionClass: (isSelected, isHighlighted) => {
+        if (isSelected)    return 'bg-indigo-100 text-indigo-900 font-medium'
+        if (isHighlighted) return 'bg-indigo-50 text-gray-900'
+        return 'hover:bg-indigo-50 text-gray-800'
+    },
+})
+```
+---
+### Checkbox, Radio y Switch
+_Afecta: `InputCheckStyle`, `InputRadioStyle`, `InputSwitchStyle`_
+| Token | Tipo | Default | Descripción |
+| ----- | ---- | ------- | ----------- |
+| `inputCheckLabelClass` | `function(disabled)` | Ver abajo | Clases del label de checks. |
+| `CHECK_BOX_BASE` | `string` | `'w-5 h-5 flex items-center justify-center rounded border-2 transition'` | Estructura base del cuadro del checkbox. |
+| `RADIO_BASE` | `string` | `'w-5 h-5 flex items-center justify-center rounded-full transition'` | Estructura base del círculo del radio. |
+| `SWITCH_BASE` | `string` | `'w-10 h-5 relative flex items-center rounded-full transition border-2'` | Estructura base de la pista del switch. |
+| `checkBoxClass` | `function(model, disabled)` | Ver abajo | Clases de color del checkbox según estado activo/disabled. |
+| `radioClass` | `function(model, disabled)` | Ver abajo | Clases de color del radio button según estado. |
+| `switchClass` | `function(model, disabled)` | Ver abajo | Clases de color de la pista del switch. |
+| `switchDotClass` | `function(model, disabled)` | Ver abajo | Clases de color de la bola interior del switch. |
+```js
+configureStyles({
+    checkBoxClass: (model, disabled) => {
+        if (disabled) return model
+            ? 'bg-indigo-200 border-indigo-200 cursor-not-allowed'
+            : 'bg-gray-100 border-gray-200 cursor-not-allowed'
+        return model
+            ? 'bg-indigo-500 border-indigo-500 peer-focus:ring-2 peer-focus:ring-indigo-200'
+            : 'bg-white border-gray-300 peer-focus:ring-2 peer-focus:ring-indigo-200'
+    },
+})
+```
+---
+### Paginación
+_Afecta: `PaginationStyle`_
+| Token | Tipo | Default | Descripción |
+| ----- | ---- | ------- | ----------- |
+| `PAGINATION_NAV_PREV` | `string` | `'bg-white hover:bg-indigo-50 border ...'` | Clases del botón de página anterior. |
+| `PAGINATION_NAV_NEXT` | `string` | `'bg-white hover:bg-indigo-50 border ...'` | Clases del botón de página siguiente. |
+| `PAGINATION_PAGE_BASE` | `string` | `'border px-2.5 py-2 cursor-pointer w-8 relative'` | Clases base de cada botón de página. |
+| `paginationPageClass` | `function(page, actualPage, index)` | Ver abajo | Retorna clases dinámicas por botón de página. |
+| `PAGINATION_SUMMARY` | `string` | `'text-sm text-gray-700'` | Clases del texto de resumen de registros. |
+---
+### Loader
+_Afecta: `LoaderStyle`_
+| Token | Tipo | Default | Descripción |
+| ----- | ---- | ------- | ----------- |
+| `LOADER_ARC_STROKE` | `string` | `'#6366F1'` | Color hex del arco animado del loader (indigo-500). |
+| `LOADER_MESSAGE` | `string` | `'text-gray-600 text-lg font-medium'` | Clases del mensaje de carga. |
+---
+### Iconos y asterisco de requerido
+_Afecta: todos los componentes con `required` o iconos de validación_
+| Token | Tipo | Default | Descripción |
+| ----- | ---- | ------- | ----------- |
+| `REQUIRED_ASTERISK` | `string` | `'text-red-500'` | Clase de color del asterisco `*` en campos requeridos. |
+| `ICON_VALID` | `string` | `'text-emerald-500'` | Clase de color del ícono de validación correcta. |
+| `ICON_INVALID` | `string` | `'text-red-500'` | Clase de color del ícono de validación errónea. |
+| `ICON_STATIC` | `string` | `'text-indigo-400'` | Clase de color de los íconos estáticos (reloj, calendario, ojo, chevron). |
+| `ICON_SIZE_STATIC` | `string` | `'w-5 h-5'` | Clases de tamaño de todos los íconos. |
+---
+### File Upload y Download
+_Afecta: `InputFileUploadStyle`, `InputFileDownloadStyle`_
+| Token | Tipo | Default | Descripción |
+| ----- | ---- | ------- | ----------- |
+| `FILE_BUTTON_BASE` | `string` | `'flex items-center justify-center gap-3 px-4 py-2 border-2 rounded-xl ...'` | Clases estructurales del botón (compartido entre upload y download). |
+| `FILE_BUTTON_ACTIVE` | `string` | `'border-gray-200 bg-white text-gray-700 hover:border-indigo-400 ...'` | Clases del botón en estado normal/activo. |
+| `FILE_BUTTON_DISABLED` | `string` | `'border-gray-200 bg-gray-100 text-gray-400'` | Clases del botón en estado disabled. |
+| `FILE_ICON_BG` | `string` | `'bg-indigo-300'` | Fondo del círculo de ícono en estado activo. |
+| `FILE_ICON_BG_COMPLETE` | `string` | `'bg-emerald-500'` | Fondo del círculo de ícono cuando la descarga está completa. |
+| `FILE_ICON_BG_DISABLED` | `string` | `'bg-gray-300'` | Fondo del círculo de ícono en estado disabled. |
+---
+### Time Picker
+_Afecta: `InputTimeStyle`_
+| Token | Tipo | Default | Descripción |
+| ----- | ---- | ------- | ----------- |
+| `TIME_PICKER_WRAPPER` | `string` | `'absolute z-20 left-0 top-full rounded-lg bg-white'` | Contenedor flotante del picker. |
+| `TIME_PICKER_CONTAINER` | `string` | `'border border-gray-300 rounded-lg p-3'` | Borde interior del picker. |
+| `TIME_PICKER_COLUMN` | `string` | `'h-48 overflow-y-auto border border-gray-200 rounded-md ...'` | Columna scrollable de horas/minutos. |
+| `TIME_PICKER_AMPM_COLUMN` | `string` | `'h-48 overflow-y-auto border border-gray-200 rounded-md ...'` | Columna scrollable AM/PM. |
+| `TIME_PICKER_COLUMN_LABEL` | `string` | `'block text-xs font-medium text-gray-500 mb-1 text-center'` | Label de cada columna ("Hora", "Minuto", "AM/PM"). |
+| `TIME_PICKER_ITEM` | `string` | `'px-3 py-1 text-center cursor-pointer hover:bg-indigo-50 ...'` | Fila base de cada ítem del picker. |
+| `timePickerItemClass` | `function(isActive)` | Ver abajo | Clases dinámicas de cada ítem según si está seleccionado. |
+------
+# 🧩 Componentes
+## Props comunes
+La mayoría de los componentes comparten las siguientes props:
+| Prop | Tipo | Default | Descripción |
+| ---- | ---- | ------- | ----------- |
+| `modelValue` | `String \| Number \| Boolean` | — | Valor del campo (v-model). |
+| `label` | `String` | `''` | Texto del label del campo. |
+| `description` | `String` | `''` | Texto de ayuda debajo del campo. Cambia de color según el estado de validación. |
+| `placeholder` | `String` | `''` | Placeholder del input. |
+| `disabled` | `Boolean` | `false` | Deshabilita el campo. |
+| `required` | `Boolean` | `false` | Marca el campo como requerido (muestra asterisco `*`). |
+| `validate` | `Boolean \| null` | `null` | Estado de validación: `true` = válido, `false` = inválido, `null` = sin estado. |
+| `mclass` | `String` | `null` | Clases CSS adicionales aplicadas directamente al elemento del input. |
+## Eventos comunes
+| Evento | Payload | Descripción |
+| ------ | ------- | ----------- |
+| `update:modelValue` | `value` | Se dispara al cambiar el valor (permite `v-model`). |
+| `change` | `value` | Se dispara al cambiar el valor. |
+| `blur` | `event` | Se dispara al perder el foco. |
+------
+## InputTextStyle
+Input de texto genérico. Soporta tipos `text`, `email`, `search`, `tel`, `url` y `number`.
+```vue
+<InputTextStyle
+    v-model="nombre"
+    label="Nombre"
+    placeholder="Escribe tu nombre"
+    :required="true"
+    :validate="validate"
+    description="Campo requerido"
+/>
+```
+| Prop | Tipo | Default | Descripción |
+| ---- | ---- | ------- | ----------- |
+| `modelValue` | `String \| Number` | `''` | Valor del campo. |
+| `label` | `String` | `''` | |
+| `description` | `String` | `''` | |
+| `placeholder` | `String` | `''` | |
+| `type` | `String` | `'text'` | Tipo del input: `text`, `email`, `search`, `tel`, `url`, `number`. |
+| `maxlength` | `String` | `null` | Longitud máxima de caracteres. |
+| `minlength` | `String` | `null` | Longitud mínima de caracteres. |
+| `min` | `String` | `null` | Valor mínimo (solo cuando `type="number"`, aplicado al perder el foco). |
+| `max` | `String` | `null` | Valor máximo (solo cuando `type="number"`, aplicado al perder el foco). |
+| `disabled` | `Boolean` | `false` | |
+| `required` | `Boolean` | `false` | |
+| `validate` | `Boolean \| null` | `null` | |
+| `mclass` | `String` | `null` | |
+------
+## InputNumberStyle
+Input numérico con control preciso de dígitos, decimales, rango y formato de visualización. El valor se emite siempre como string numérico limpio (ej: `"1234.56"`). Al perder el foco se formatea con `toLocaleString`.
+```vue
+<InputNumberStyle
+    v-model="monto"
+    label="Monto"
+    numeric="10,2"
+    min="0"
+    max="9999999999"
+    :required="true"
+    :validate="validate"
+/>
+```
+| Prop | Tipo | Default | Descripción |
+| ---- | ---- | ------- | ----------- |
+| `modelValue` | `String \| Number` | `''` | Valor del campo. |
+| `label` | `String` | `''` | |
+| `description` | `String` | `''` | |
+| `placeholder` | `String` | `''` | |
+| `numeric` | `String` | `null` | Formato tipo SQL: `"10,2"` → 10 dígitos enteros, 2 decimales. Si se omite, usa `10,2` por defecto. |
+| `min` | `String` | `null` | Valor mínimo (aplicado al perder el foco). Si es `null` o negativo, permite negativos. |
+| `max` | `String` | `null` | Valor máximo (aplicado al perder el foco). |
+| `disabled` | `Boolean` | `false` | |
+| `required` | `Boolean` | `false` | |
+| `validate` | `Boolean \| null` | `null` | |
+| `mclass` | `String` | `null` | |
+**Comportamiento:**
+- Incluye botones **caret ▲ / ▼** alineados a la izquierda del campo para aumentar/disminuir el valor en unidades (respetando `min`/`max`). No tienen separador y usan el color global de los iconos (`ICON_STATIC`).
+- Si **mantienes presionado** un botón, tras una breve pausa el valor cambia de forma **continua** hasta soltar.
+- Puedes escribir `0` y luego `.` para empezar los decimales: el punto se conserva a la espera de los dígitos decimales (solo si los decimales están activados en `numeric`).
+- Al **enfocar** el campo, si el valor es `0` (o está vacío) se limpia, para que al escribir reemplaces el valor en lugar de anteponerlo.
+- Al **perder el foco**, si el campo queda vacío o en `0`, se conserva el valor `0` formateado (ej: `"0.00"`), aplicando además los límites `min`/`max`.
+**Navegación por teclado:**
+- `↑` / `↓` — aumentar/disminuir el valor en unidades, respetando `min`/`max`.
+------
+## InputPasswordStyle
+Input de contraseña con toggle para mostrar/ocultar el texto.
+```vue
+<InputPasswordStyle
+    v-model="password"
+    label="Contraseña"
+    placeholder="Mínimo 8 caracteres"
+    :required="true"
+    :validate="validate"
+/>
+```
+| Prop | Tipo | Default | Descripción |
+| ---- | ---- | ------- | ----------- |
+| `modelValue` | `String \| Number` | `''` | Valor del campo. |
+| `label` | `String` | `''` | |
+| `description` | `String` | `''` | |
+| `placeholder` | `String` | `''` | |
+| `maxlength` | `String` | `null` | Longitud máxima. |
+| `disabled` | `Boolean` | `false` | |
+| `required` | `Boolean` | `false` | |
+| `validate` | `Boolean \| null` | `null` | |
+| `mclass` | `String` | `null` | |
+------
+## TextAreaStyle
+Área de texto multi-línea.
+```vue
+<TextAreaStyle
+    v-model="comentario"
+    label="Comentario"
+    placeholder="Escribe aquí..."
+    row="5"
+    :maxlength="500"
+    :validate="validate"
+/>
+```
+| Prop | Tipo | Default | Descripción |
+| ---- | ---- | ------- | ----------- |
+| `modelValue` | `String` | `''` | Valor del campo. |
+| `label` | `String` | `''` | |
+| `description` | `String` | `''` | |
+| `placeholder` | `String` | `''` | |
+| `row` | `String` | `'3'` | Número de filas visibles del textarea. |
+| `maxlength` | `String` | `null` | Longitud máxima de caracteres. |
+| `disabled` | `Boolean` | `false` | |
+| `required` | `Boolean` | `false` | |
+| `validate` | `Boolean \| null` | `null` | |
+| `mclass` | `String` | `null` | |
+------
+## SelectStyle
+Select personalizado con dropdown, navegación por teclado y búsqueda por tipeo. El dropdown se posiciona automáticamente arriba o abajo según el espacio disponible.
+```vue
+<SelectStyle
+    v-model="pais"
+    label="País"
+    :list="paises"
+    return-value="value"
+    :required="true"
+    :validate="validate"
+/>
+```
+```js
+// Formato del array `list` — lista plana
+const paises = [
+    { value: 1, text: 'México' },
+    { value: 2, text: 'España' },
+    { value: 3, text: 'Argentina' },
+]
+// El `value` es opcional: si se omite, se usa el `text` como valor
+const colores = [
+    { text: 'Rojo' },
+    { text: 'Verde' },
+]
+// Lista agrupada — cada grupo tiene un `label` y sus `options`
+const ubicaciones = [
+    { label: 'América', options: [{ value: 1, text: 'México' }, { value: 2, text: 'Argentina' }] },
+    { label: 'Europa',  options: [{ value: 3, text: 'España' }, { value: 4, text: 'Francia' }] },
+]
+```
+| Prop | Tipo | Default | Descripción |
+| ---- | ---- | ------- | ----------- |
+| `modelValue` | `String \| Number \| Object` | — | Valor seleccionado. |
+| `list` | `Array` | `[]` | Array de opciones. Acepta lista plana `{ value, text }` o agrupada `{ label, options: [...] }`. El `value` es opcional: si se omite, se usa el `text` como valor. |
+| `returnValue` | `String` | `'value'` | Qué se emite al seleccionar: `'value'` (item.value), `'text'` (item.text) u `'object'` (el item completo). |
+| `label` | `String` | `''` | |
+| `description` | `String` | `''` | |
+| `wrapOptions` | `Boolean` | `false` | `true` = permite que el texto de cada opción haga salto de línea; `false` = lo trunca con elipsis. |
+| `disabled` | `Boolean` | `false` | |
+| `required` | `Boolean` | `false` | |
+| `validate` | `Boolean \| null` | `null` | |
+| `mclass` | `String` | `null` | |
+**Navegación por teclado:**
+- `↑` / `↓` — navegar opciones
+- `Enter` — seleccionar la opción resaltada
+- `Escape` — cerrar el dropdown
+- Tipear letras — búsqueda inmediata en la lista
+------
+## InputCheckStyle
+Checkbox estilizado con label y descripción.
+```vue
+<InputCheckStyle
+    v-model="aceptaTerminos"
+    label="Acepto los términos y condiciones"
+    :required="true"
+/>
+```
+| Prop | Tipo | Default | Descripción |
+| ---- | ---- | ------- | ----------- |
+| `modelValue` | `Boolean` | `false` | Estado del checkbox. |
+| `label` | `String` | `''` | |
+| `description` | `String` | `''` | |
+| `disabled` | `Boolean` | `false` | |
+| `required` | `Boolean` | `false` | |
+| `validate` | `Boolean \| null` | `null` | |
+| `mclass` | `String` | `null` | Clases adicionales del cuadro del checkbox. |
+------
+## InputRadioStyle
+Radio button estilizado con label y descripción.
+```vue
+<InputRadioStyle
+    v-model="opcionA"
+    label="Opción A"
+/>
+```
+| Prop | Tipo | Default | Descripción |
+| ---- | ---- | ------- | ----------- |
+| `modelValue` | `Boolean` | `false` | Estado del radio. |
+| `label` | `String` | `''` | |
+| `description` | `String` | `''` | |
+| `disabled` | `Boolean` | `false` | |
+| `required` | `Boolean` | `false` | |
+| `validate` | `Boolean \| null` | `null` | |
+| `mclass` | `String` | `null` | Clases adicionales del círculo del radio. |
+------
+## InputSwitchStyle
+Toggle switch estilizado.
+```vue
+<InputSwitchStyle
+    v-model="activo"
+    label="Activar notificaciones"
+/>
+```
+| Prop | Tipo | Default | Descripción |
+| ---- | ---- | ------- | ----------- |
+| `modelValue` | `Boolean` | `false` | Estado del switch. |
+| `label` | `String` | `''` | |
+| `description` | `String` | `''` | |
+| `disabled` | `Boolean` | `false` | |
+| `required` | `Boolean` | `false` | |
+| `validate` | `Boolean \| null` | `null` | |
+| `mclass` | `String` | `null` | Clases adicionales de la pista del switch. |
+------
+## InputDateStyle
+Selector de fecha con máscara `dd/mm/aaaa`, navegación por teclado entre secciones y calendario visual nativo (sin dependencias externas). El valor se emite en formato `YYYY-MM-DD`.
+El calendario incluye vistas de días, meses y años, y un botón **Hoy** para navegar rápidamente a la fecha actual.
+```vue
+<InputDateStyle
+    v-model="fechaNacimiento"
+    label="Fecha de nacimiento"
+    min="1900-01-01"
+    max="2100-12-31"
+    :validate="validate"
+/>
+```
+| Prop | Tipo | Default | Descripción |
+| ---- | ---- | ------- | ----------- |
+| `modelValue` | `String \| Date` | — | Valor de la fecha en formato `YYYY-MM-DD` o `Date`. |
+| `label` | `String` | `''` | |
+| `description` | `String` | `''` | |
+| `min` | `String` | `'1900-01-01'` | Fecha mínima seleccionable en el calendario (formato `YYYY-MM-DD`). |
+| `max` | `String` | `'2100-12-31'` | Fecha máxima seleccionable en el calendario (formato `YYYY-MM-DD`). |
+| `disabledDates` | `Array` | `[]` | Fechas deshabilitadas. Array de strings `'YYYY-MM-DD'` o objetos `Date`. |
+| `disabled` | `Boolean` | `false` | |
+| `readonly` | `Boolean` | `false` | Solo lectura: muestra el valor pero bloquea la edición por teclado. |
+| `required` | `Boolean` | `false` | |
+| `validate` | `Boolean \| null` | `null` | |
+| `mclass` | `String` | `null` | |
+**Valor emitido:** `'YYYY-MM-DD'` (string) o `''` si la fecha es inválida o está vacía.
+**Navegación por teclado:**
+- Escribe los dígitos y el foco avanza automáticamente entre día → mes → año
+- `↑` / `↓` — incrementar/decrementar la sección activa (la fecha resultante se ajusta a los límites `min`/`max`)
+- `←` / `→` — mover entre secciones
+- `Tab` / `Shift + Tab` — mover entre secciones (al llegar al extremo, el foco sale del campo)
+- `Backspace` / `Delete` — limpiar la sección activa
+- Clic en el ícono 📅 — abre/cierra el calendario visual
+------
+## InputTimeStyle
+Selector de hora con picker de columnas scrollables. Soporta formato 12h (AM/PM) o 24h. El valor se emite en formato `HH:mm`.
+```vue
+<InputTimeStyle
+    v-model="horaInicio"
+    label="Hora de inicio"
+    min="08:00"
+    max="18:00"
+    :is24h="true"
+    :validate="validate"
+/>
+```
+| Prop | Tipo | Default | Descripción |
+| ---- | ---- | ------- | ----------- |
+| `modelValue` | `String` | — | Valor de la hora en formato `HH:mm`. |
+| `label` | `String` | `''` | |
+| `description` | `String` | `''` | |
+| `min` | `String` | `null` | Hora mínima (ej: `'08:00'`). |
+| `max` | `String` | `null` | Hora máxima (ej: `'18:00'`). |
+| `is24h` | `Boolean` | `false` | `true` = formato 24h, `false` = formato 12h con selector AM/PM. |
+| `disabled` | `Boolean` | `false` | |
+| `required` | `Boolean` | `false` | |
+| `validate` | `Boolean \| null` | `null` | |
+| `mclass` | `String` | `null` | |
+**Valor emitido:** `'HH:mm'` en formato 24h siempre, independientemente del modo de visualización.
+------
+## InputDateTimeStyle
+Selector combinado de fecha y hora con máscara `dd/mm/aaaa hh:mm` (o `dd/mm/aaaa hh:mm a.m.` en modo 12h), calendario visual nativo y picker de columnas scrollables para la hora. El valor se emite en formato `YYYY-MM-DDTHH:mm:00.000`.
+```vue
+<InputDateTimeStyle
+    v-model="fechaHora"
+    label="Fecha y hora"
+    min="2000-01-01"
+    max="2100-12-31"
+    :is24h="true"
+    :validate="validate"
+/>
+```
+| Prop | Tipo | Default | Descripción |
+| ---- | ---- | ------- | ----------- |
+| `modelValue` | `String \| Date` | — | Valor en formato `YYYY-MM-DDTHH:mm:00.000` o `Date`. |
+| `label` | `String` | `''` | |
+| `description` | `String` | `''` | |
+| `min` | `String` | `'1900-01-01'` | Fecha mínima seleccionable (formato `YYYY-MM-DD`). |
+| `max` | `String` | `'2100-12-31'` | Fecha máxima seleccionable (formato `YYYY-MM-DD`). |
+| `disabledDates` | `Array` | `[]` | Fechas deshabilitadas. Array de strings `'YYYY-MM-DD'` o `Date`. |
+| `is24h` | `Boolean` | `false` | `true` = formato 24h, `false` = formato 12h con selector a.m./p.m. |
+| `disabled` | `Boolean` | `false` | |
+| `readonly` | `Boolean` | `false` | Solo lectura. |
+| `required` | `Boolean` | `false` | |
+| `validate` | `Boolean \| null` | `null` | |
+| `mclass` | `String` | `null` | |
+**Valor emitido:** `'YYYY-MM-DDTHH:mm:00.000'` (string) o `''` si la fecha/hora es inválida o está vacía.
+**Comportamiento del picker:**
+- El calendario permanece abierto al seleccionar la fecha, para que puedas ajustar también la hora.
+- El selector de hora embebido en el picker usa las mismas columnas scrollables que `InputTimeStyle`.
+- Botón **Ahora** — establece la fecha y hora actuales de un solo clic.
+**Navegación por teclado:**
+- Escribe los dígitos y el foco avanza automáticamente: día → mes → año → hora → minuto → a.m./p.m.
+- `↑` / `↓` — incrementar/decrementar la sección activa (la fecha se ajusta a los límites `min`/`max`)
+- `←` / `→` — mover entre secciones
+- `Tab` / `Shift + Tab` — mover entre secciones (al llegar al extremo, el foco sale del campo)
+- `Backspace` / `Delete` — limpiar la sección activa
+- `a` / `p` — cambiar entre a.m. y p.m. (solo modo 12h)
+- Clic en el ícono 📅 — abre/cierra el picker
+------
+## InputFileUploadStyle
+Botón para adjuntar archivos con validación de tamaño y formato.
+```vue
+<InputFileUploadStyle
+    v-model="archivo"
+    :formats="['pdf', 'docx']"
+    max-size-m-b="10"
+    :state="uploadState"
+/>
+```
+| Prop | Tipo | Default | Descripción |
+| ---- | ---- | ------- | ----------- |
+| `modelValue` | `File` | `null` | Archivo seleccionado. |
+| `disabled` | `Boolean` | `false` | Deshabilita el botón. |
+| `formats` | `Array` | `[]` | Extensiones permitidas (ej: `['pdf', 'xlsx', 'png']`). Array vacío = todos los formatos. |
+| `maxSizeMB` | `String \| Number` | `5` | Tamaño máximo del archivo en MB. |
+| `state` | `String` | `'uphold'` | Estado del botón: `'uphold'` (normal) o `'loader'` (cargando, muestra spinner). |
+| `delay` | `String` | `'1.5'` | Segundos de bloqueo del botón tras un clic, para evitar doble envío. |
+**Eventos:**
+- `update:modelValue` — emite el `File` seleccionado, o `null` si el archivo no es válido.
+- `change` — igual que `update:modelValue`.
+El componente valida automáticamente el tamaño y el formato, mostrando un mensaje de error inline si la validación falla.
+------
+## InputFileDownloadStyle
+Botón para descargar archivos con tres estados visuales.
+```vue
+<InputFileDownloadStyle
+    :state="downloadState"
+    :disabled="false"
+    @click="descargarArchivo"
+/>
+```
+| Prop | Tipo | Default | Descripción |
+| ---- | ---- | ------- | ----------- |
+| `disabled` | `Boolean` | `false` | Deshabilita el botón. |
+| `state` | `String` | `'download'` | Estado: `'download'` (normal), `'loader'` (descargando, spinner), `'complete'` (completado, check verde). |
+| `delay` | `String` | `'1.5'` | Segundos de bloqueo del botón tras un clic. |
+**Eventos:**
+- `click` — se dispara al hacer clic (solo si no está deshabilitado).
+------
+## ButtonStyle
+Botón genérico con bloqueo automático anti-doble-clic.
+```vue
+<ButtonStyle
+    class="px-4 py-2 bg-indigo-500 text-white rounded"
+    :disabled="cargando"
+    @click="guardar"
+>
+    Guardar
+</ButtonStyle>
+```
+| Prop | Tipo | Default | Descripción |
+| ---- | ---- | ------- | ----------- |
+| `type` | `String` | `'button'` | Tipo del botón: `'button'` o `'submit'`. |
+| `class` | `String` | `''` | Clases CSS del botón (TailwindCSS). |
+| `disabled` | `Boolean` | `false` | Deshabilita el botón. |
+| `delay` | `String` | `'1.5'` | Segundos de bloqueo automático tras hacer clic (anti-doble-clic). |
+**Eventos:**
+- `click` — se dispara al hacer clic (solo si no está deshabilitado ni en periodo de bloqueo).
+Acepta contenido mediante `<slot>` (texto, íconos, etc.).
+------
+## LoaderStyle
+Indicador de carga circular animado.
+```vue
+<LoaderStyle message="Procesando datos..." />
+```
+| Prop | Tipo | Default | Descripción |
+| ---- | ---- | ------- | ----------- |
+| `message` | `String` | `'Cargando...'` | Texto que se muestra debajo del arco animado. |
+El color del arco se controla con el token `LOADER_ARC_STROKE`.
+------
+## PaginationStyle
+Paginador con navegación anterior/siguiente, botones de página y resumen de registros.
+```vue
+<PaginationStyle
+    :total-pages="totalPaginas"
+    :actual-page="paginaActual"
+    :records="totalRegistros"
+    :limit="registrosPorPagina"
+    :summary="true"
+    @page="cambiarPagina"
+/>
+```
+| Prop | Tipo | Default | Descripción |
+| ---- | ---- | ------- | ----------- |
+| `totalPages` | `Number` | `0` | Total de páginas. |
+| `actualPage` | `Number` | `1` | Página actualmente activa. |
+| `records` | `Number` | `0` | Total de registros (para el resumen). |
+| `limit` | `Number` | `0` | Registros por página (para calcular el rango del resumen). |
+| `summary` | `Boolean` | `false` | `true` = muestra el texto "Mostrando X - Y de Z". |
+**Eventos:**
+- `page` — emite el número de página a la que se desea navegar.
+El paginador muestra hasta 7 botones con elipsis (`...`) inteligentes cuando hay más páginas.
+------
+## ModalStyle
+Ventana modal con `Teleport` al `body`, animaciones de entrada/salida, bloqueo del scroll de fondo y cierre por tecla `Escape`. El estado de apertura se controla con `v-model`.
+```vue
+<ButtonStyle @click="showModal = true">Abrir modal</ButtonStyle>
+<ModalStyle v-model="showModal" title="Detalles" size="lg">
+    <p>Contenido del modal...</p>
+    <template #footer="{ close }">
+        <div class="flex justify-end gap-2">
+            <ButtonStyle class="px-4 py-2 border rounded" @click="close">Cerrar</ButtonStyle>
+        </div>
+    </template>
+</ModalStyle>
+```
+| Prop | Tipo | Default | Descripción |
+| ---- | ---- | ------- | ----------- |
+| `modelValue` | `Boolean` | `false` | Controla la visibilidad del modal (`v-model`). |
+| `title` | `String` | `'Sin titulo asignado'` | Título mostrado en el header (si no se usa el slot `title`). |
+| `size` | `String` | `'lg'` | Ancho máximo: `'sm'`, `'md'`, `'lg'`, `'xl'`, `'2xl'`, `'3xl'`, `'4xl'`, `'5xl'`, `'full'`. |
+| `showCloseButton` | `Boolean` | `true` | Muestra el botón `✕` de cierre en el header. |
+| `closeOnEscape` | `Boolean` | `true` | Permite cerrar el modal con la tecla `Escape`. |
+| `closeOnOverlayClick` | `Boolean` | `true` | Permite cerrar el modal al hacer clic en el fondo. |
+**Slots:**
+- `title` — reemplaza el título del header.
+- *default* — contenido principal. Recibe `{ close }` para cerrar desde dentro.
+- `footer` — pie del modal (solo se renderiza si se provee). Recibe `{ close }`.
+**Eventos:**
+- `update:modelValue` — emite `false` al cerrarse.
+------
+## AlertStyle (notificaciones tipo toast)
+Utilidad JavaScript (no es un componente) para mostrar notificaciones flotantes que se auto-descartan. Disponible como propiedad global `$alertstyle` tras instalar el plugin, o mediante importación directa.
+```js
+// Vía global property (Options API)
+this.$alertstyle.success('Guardado', 'Los cambios se guardaron correctamente')
+// Vía importación directa
+import { AlertStyle } from '@luis-angel-martin-dzul/input-styles'
+AlertStyle.error('Error', 'No se pudo completar la operación')
+```
+| Método | Parámetros | Descripción |
+| ------ | ---------- | ----------- |
+| `success(title, message?)` | `String, String` | Notificación verde de éxito. |
+| `error(title, message?)` | `String, String` | Notificación roja de error. |
+| `warning(title, message?)` | `String, String` | Notificación de advertencia. |
+| `info(title, message?)` | `String, String` | Notificación informativa. |
+| `neutral(title, message?)` | `String, String` | Notificación neutral. |
+Cada notificación se cierra automáticamente a los 4 segundos o manualmente con su botón `×`.
+------
+## DialogStyle (diálogos modales)
+Utilidad JavaScript para diálogos de confirmación, información y carga, con interfaz fluida (encadenable). Disponible como global `$dialogstyle` o por importación directa.
+```js
+// Confirmación
+this.$dialogstyle.confirm('¿Eliminar registro?', 'Esta acción no se puede deshacer')
+    .onAccept(() => eliminar())
+    .onCancel(() => console.log('Cancelado'))
+// Información (un solo botón)
+this.$dialogstyle.info('Operación completada')
+    .onConfirm(() => console.log('Aceptado'))
+// Carga (bloqueante, se cierra manualmente)
+const loader = this.$dialogstyle.loading('Procesando...', 'Espere un momento')
+loader.updateMessage('Casi listo...')
+loader.close()
+```
+| Método | Retorna | Descripción |
+| ------ | ------- | ----------- |
+| `confirm(title, description?)` | controlador con `.onAccept(cb)` / `.onCancel(cb)` | Diálogo con botones Aceptar / Cancelar. |
+| `info(title, description?)` | controlador con `.onConfirm(cb)` | Diálogo informativo con un solo botón Aceptar. |
+| `loading(title, description?)` | `{ close, updateTitle, updateMessage }` | Diálogo de carga con spinner; se cierra con `.close()`. |
+| `finish(immediate?)` | `Promise` | Cierra el diálogo abierto manualmente. |
+> 💡 La tecla `Escape` no cierra el diálogo (hace una animación de "shake"), para forzar una decisión explícita del usuario.
+------
+## UtilStyle (utilidades)
+Clase con métodos estáticos de utilidad (formateo, validaciones, manejo de archivos, etc.). Disponible como propiedad global `$utilstyle` tras instalar el plugin, o mediante importación directa.
+```js
+// Vía global property (Options API)
+this.$utilstyle.formatMoney(1234.5)
+// Vía importación directa
+import { UtilStyle } from '@luis-angel-martin-dzul/input-styles'
+UtilStyle.getUUID()
+```
+| Método | Parámetros | Descripción |
+| ------ | ---------- | ----------- |
+| `getUUID()` | — | Genera un UUID v4 (usa `crypto.randomUUID` con fallback manual). |
+| `formatMoney(valor, dollar?, digit?)` | `Number, String, Number` | Formatea un número como moneda (ej: `$1,234.56`). |
+| `formatNumber(valor, digit?)` | `Number, Number` | Formatea un número con separadores de miles y decimales fijos. |
+| `formatDateShort(dateString)` | `String` | Fecha en formato corto en español (ej: `9 jul 2026`). |
+| `formatDateLong(dateString)` | `String` | Fecha en formato largo en español (ej: `9 de julio de 2026`). |
+| `getDateTimeNow()` | — | Fecha y hora actual (zona `America/Mexico_City`) en formato `YYYY-MM-DDTHH:mm:ss`. |
+| `blockKeyNumber(event)` | `Event` | Bloquea las teclas `e`, `E`, `+`, `-` en un `@keydown`. |
+| `blockKeys(event, keys)` | `Event, Array` | Bloquea las teclas indicadas en un `@keydown`. |
+| `validateTel(value, required?)` | `String, Boolean` | Valida un teléfono con formato `999 9 99 99 99`. Acepta prefijo de región opcional `+XXX 999 9 99 99 99` (XXX = 1 a 3 dígitos). Retorna `true` o mensaje de error. |
+| `validateEmail(value, required?)` | `String, Boolean` | Valida un correo con las condiciones mínimas `xx@xx.x`. Retorna `true` o mensaje de error. |
+| `validateFileExtension(file, allowedExtensions?)` | `File, Array` | Valida la extensión del archivo. Retorna `true` o mensaje de error. |
+| `validateFileType(file, allowedTypes?)` | `File, Array` | Valida el MIME type del archivo. Retorna `true` o mensaje de error. |
+| `validateFileSize(file, maxSizeMB?)` | `File, Number` | Valida el tamaño del archivo. Retorna `true` o mensaje de error. |
+| `downloadBlob(blobData, fileName?, mimeType?)` | `Blob, String, String` | Descarga un blob como archivo. |
+| `fileToBase64(file)` | `File` | Convierte un `File` a base64 (async, retorna `Promise`). |
+| `base64ToBlob(base64, mimeType?)` | `String, String` | Convierte una cadena base64 a `Blob`. |
+| `base64ToFile(base64, fileName?, mimeType?)` | `String, String, String` | Convierte una cadena base64 a `File`. |
+> 💡 Los métodos de validación (`validateTel`, `validateEmail`, `validateFile*`) devuelven `true` si el valor es válido, o un `String` con el mensaje de error si no lo es.
+------
+## Ejemplo de uso completo
+```vue
+<template>
+    <div class="p-6 space-y-4 max-w-md">
+        <InputTextStyle
+            v-model="form.nombre"
+            label="Nombre completo"
+            placeholder="Ej: Juan Pérez"
+            :required="true"
+            :validate="validaciones.nombre"
+        />
+        <InputNumberStyle
+            v-model="form.monto"
+            label="Monto"
+            numeric="10,2"
+            min="0"
+            :validate="validaciones.monto"
+        />
+        <InputPasswordStyle
+            v-model="form.password"
+            label="Contraseña"
+            :required="true"
+            :validate="validaciones.password"
+        />
+        <SelectStyle
+            v-model="form.pais"
+            label="País"
+            :list="paises"
+            return-value="value"
+            :validate="validaciones.pais"
+        />
+        <InputDateStyle
+            v-model="form.fecha"
+            label="Fecha"
+            :validate="validaciones.fecha"
+        />
+        <InputDateTimeStyle
+            v-model="form.fechaHora"
+            label="Fecha y hora"
+            :is24h="true"
+            :validate="validaciones.fechaHora"
+        />
+        <InputTimeStyle
+            v-model="form.hora"
+            label="Hora"
+            :is24h="true"
+        />
+        <InputCheckStyle
+            v-model="form.acepta"
+            label="Acepto los términos"
+            :required="true"
+        />
+        <ButtonStyle
+            class="w-full px-4 py-2 bg-indigo-500 text-white rounded hover:bg-indigo-600"
+            @click="enviar"
+        >
+            Enviar
+        </ButtonStyle>
+    </div>
+</template>
+<script setup>
+import { ref } from 'vue'
+import {
+    InputTextStyle, InputNumberStyle, InputPasswordStyle,
+    SelectStyle, InputDateStyle, InputDateTimeStyle, InputTimeStyle,
+    InputCheckStyle, ButtonStyle
+} from '@luis-angel-martin-dzul/input-styles'
+const form = ref({
+    nombre: '', monto: '', password: '',
+    pais: null, fecha: '', fechaHora: '', hora: '', acepta: false
+})
+const validaciones = ref({
+    nombre: null, monto: null, password: null,
+    pais: null, fecha: null, fechaHora: null
+})
+const paises = [
+    { value: 1, text: 'México' },
+    { value: 2, text: 'España' },
+]
+function enviar() {
+    validaciones.value.nombre = form.value.nombre.length > 0
+    // ... resto de validaciones
+}
+</script>
+```