adverich-kun-ui

KunUI

Una librería de componentes Vue.js 3 con Tailwind CSS, ligera y fácil de usar.

Para desarrolladores de la librería: Consulta AGENTS.md para documentación interna y guías de desarrollo.

Instalación

pnpm add adverich-kun-ui

Uso

Importación global

// main.js
import { createApp } from 'vue'
import KunUI from 'adverich-kun-ui'
import 'adverich-kun-ui/dist/adverich-kun-ui.css'

const app = createApp(App)
app.use(KunUI)

Importación individual

import { KunBtn, KunTextField, KunDialog } from 'adverich-kun-ui'
import 'adverich-kun-ui/dist/adverich-kun-ui.css'

Componentes disponibles

Formularios

• KunBtn - Botón con múltiples variantes
• KunTextField - Campo de texto
• KunTextarea - Área de texto
• KunNumberField - Campo numérico
• KunCheckbox - Checkbox
• KunSwitch - Switch/Toggle
• KunRadio - Radio button
• KunRadioGroup - Grupo de radio buttons
• KunSelect - Selector
• KunAutocomplete - Autocompletado
• KunFileInput - Input de archivos
• KunCurrency - Campo de moneda
• KunDatePicker - Selector de fecha
• KunColorPicker - Selector de color con transparencia y reset
• KunSlider - Slider/Rango
• KunForm - Contenedor de formulario

Layout

• KunContainer - Contenedor
• KunRow - Fila (grid)
• KunCol - Columna (grid)
• KunDivider - Divisor
• KunSpacer - Espaciador

Navegación

• KunAppbar - Barra de aplicación
• KunAppbarTitle - Título de appbar
• KunDrawer - Drawer/Panel lateral
• KunToolbar - Barra de herramientas
• KunToolbarTitle - Título de toolbar
• KunToolbarItems - Items de toolbar
• KunTabs - Pestañas
• KunTab - Pestaña individual
• KunTabWindow - Ventana de pestaña
• KunMenu - Menú desplegable

Superposición

• KunDialog - Diálogo modal
• KunTooltip - Tooltip
• KunAlert - Alerta/Notificación

Datos

• KunTable - Tabla con funcionalidades avanzadas
• KunVirtualScroller - Scroll virtualizado
• KunInfiniteScroll - Scroll infinito
• KunRelationMatrix - Matriz de relaciones
• KunDragAndDrop - Lista/grid sortable data-first (HTML5)
• KunDragAndDropItem - Ítem draggable
• KunDragAndDropHandle - Agarre de arrastre

Listas

• KunList - Lista
• KunListItem - Item de lista
• KunListGroup - Grupo de lista colapsable
• KunListSubheader - Subtítulo de lista
• KunListImg - Imagen de lista
• KunListItemTitle - Título de item
• KunListItemText - Texto de item
• KunListItemSubtitle - Subtítulo de item
• KunListItemAvatar - Avatar de item
• KunListItemAction - Acción de item

Visualización

• KunCard - Tarjeta
• KunCardTitle - Título de tarjeta
• KunCardSubtitle - Subtítulo de tarjeta
• KunCardText - Texto de tarjeta
• KunCardActions - Acciones de tarjeta
• KunCardItem - Item de tarjeta
• KunAvatar - Avatar
• KunBadge - Badge/Insignia
• KunIcon - Ícono
• KunChip - Chip/Etiqueta
• KunClock - Reloj
• KunSkeleton - Skeleton loader
• KunLoaderCircular - Loader circular

Backgrounds utilitarios

La librería ahora incluye fondos globales listos para usar en contenedores, shells o layouts, con nombres más descriptivos de la tonalidad NeoPos:

• bg-neopos-ice-grid - Cian frío con grilla pizarra de 26px
• bg-neopos-mist-grid - Azul neblina más suave, abierta y liviana con grilla de 32px
• bg-neopos-blueprint-grid - Azul técnico más marcado con grilla compacta de 18px
• bg-neopos-aurora-grid - Glow cian + índigo con doble radial y grilla de 24px

Ejemplo:

<template>
  <section class="bg-neopos-ice-grid min-h-dvh">
    <RouterView />
  </section>
</template>

Las cuatro clases adaptan automáticamente el patrón cuando existe .dark en un ancestro.

Requisitos

• Vue 3.5+
• Tailwind CSS 4.0+

Desarrollo (contribuir)

Si quieres contribuir al desarrollo de KunUI:

# Clonar el repositorio
git clone https://github.com/adverich/KunUi.git
cd KunUi

# Instalar dependencias (requiere pnpm)
pnpm install

# Iniciar servidor de desarrollo
pnpm run dev

# Build para producción
pnpm run build

Importante: Este proyecto utiliza pnpm como gestor de paquetes. No uses npm ni yarn.

Licencia

MIT