npm package: @ivokonstantinow/vue-ui-library
Description: Biblioteca moderna de componentes Vue 3: Button, Navbar, Hero
Author: Ivo Konstantinow
Latest version: 0.1.1

🎨 Una biblioteca moderna de componentes Vue 3 reutilizables y accesibles.

## 🚀 Instalación
```bash
npm install @ivokonstantinow/vue-ui-library
```

## 📖 Uso Rápido
```vue
<script setup>
import { Button, Navbar, Hero } from '@ivokonstantinow/vue-ui-library'
import '@ivokonstantinow/vue-ui-library/dist/vue-ui-library.css'
</script>

<template>
  <Navbar logo-text="Mi App" :links="navLinks" />
  
  <Hero
    title="Bienvenido"
    subtitle="Construye interfaces increíbles"
  >
    <template #actions>
      <Button variant="primary" size="large">
        Comenzar
      </Button>
    </template>
  </Hero>
</template>
```

## 🎨 Componentes

### Button
Botón reutilizable con múltiples variantes perfecto para CTAs.

**Props:**
- `variant`: `'primary'` | `'secondary'` | `'danger'` (default: `'primary'`)
- `size`: `'small'` | `'medium'` | `'large'` (default: `'medium'`)
- `disabled`: `boolean` (default: `false`)

**Ejemplo:**
```vue
<Button variant="primary" size="large" @click="handleClick">
  Call to Action →
</Button>
```

---

### Navbar
Barra de navegación responsive con logo a la izquierda y links al centro.

**Props:**
- `logoText`: Texto del logo (String)
- `logoSrc`: URL de imagen del logo (String)
- `logoAlt`: Alt text para la imagen (String)
- `logoLink`: URL del link del logo (String, default: `'/'`)
- `links`: Array de links con formato `[{ label, href, active }]`
- `variant`: `'default'` | `'transparent'` | `'dark'` (default: `'default'`)
- `sticky`: Navbar fijo al hacer scroll (Boolean)
- `hideMenuToggle`: Ocultar botón de menú móvil (Boolean)

**Slots:**
- `logo`: Slot personalizado para el logo
- `nav`: Slot personalizado para la navegación
- `actions`: Slot para acciones/botones a la derecha
- `mobile-actions`: Slot para acciones en menú móvil

**Eventos:**
- `link-click`: Emitido al hacer click en un link `{ link, event }`

**Ejemplo:**
```vue
<Navbar
  logo-text="Brand"
  :links="[
    { label: 'Inicio', href: '/', active: true },
    { label: 'Productos', href: '/productos' },
    { label: 'Contacto', href: '/contacto' }
  ]"
  variant="default"
  sticky
  @link-click="handleNavClick"
>
  <template #actions>
    <Button size="small" variant="secondary">Login</Button>
    <Button size="small" variant="primary">Registrarse</Button>
  </template>
</Navbar>
```

---

### Hero
Sección hero full-screen con múltiples variantes y slots flexibles.

**Props:**
- `title`: Título principal (String)
- `subtitle`: Subtítulo descriptivo (String)
- `pretitle`: Texto pequeño sobre el título (String)
- `variant`: `'default'` | `'gradient'` | `'dark'` | `'image'` (default: `'default'`)
- `align`: `'left'` | `'center'` | `'right'` (default: `'center'`)
- `fullHeight`: Hero a pantalla completa (Boolean, default: `true`)
- `minHeight`: Altura mínima (String, default: `'100vh'`)
- `backgroundImage`: URL de imagen de fondo (String)
- `backgroundGradient`: CSS gradient personalizado (String)
- `backgroundColor`: Color de fondo (String)
- `overlay`: Agregar overlay oscuro sobre la imagen (Boolean)
- `overlayOpacity`: Opacidad del overlay 0-1 (Number, default: `0.5`)
- `showScrollIndicator`: Mostrar indicador de scroll (Boolean)

**Slots:**
- `pretitle`: Slot personalizado para pretitle
- `title`: Slot personalizado para título
- `subtitle`: Slot personalizado para subtítulo
- `actions`: Slot para botones CTA
- `media`: Slot para imagen/video a la derecha

**Ejemplo básico:**
```vue
<Hero
  variant="gradient"
  title="Construye el Futuro"
  subtitle="Componentes modernos para aplicaciones Vue 3"
  align="center"
>
  <template #actions>
    <Button variant="secondary" size="large">Comenzar Gratis</Button>
    <Button variant="primary" size="large">Ver Demo</Button>
  </template>
</Hero>
```

**Ejemplo con imagen de fondo:**
```vue
<Hero
  variant="image"
  title="Bienvenido"
  subtitle="Tu éxito comienza aquí"
  background-image="https://example.com/hero-bg.jpg"
  overlay
  :overlay-opacity="0.6"
  show-scroll-indicator
>
  <template #actions>
    <Button variant="primary" size="large">Explorar →</Button>
  </template>
</Hero>
```

---

## 🎨 Personalización con Design Tokens

Sobrescribí los design tokens CSS para personalizar el look:
```css
:root {
  /* Colores */
  --color-primary: #8b5cf6;
  --color-primary-hover: #7c3aed;
  
  /* Tipografía */
  --font-size-xl: 1.5rem;
  --font-weight-bold: 700;
  
  /* Espaciado */
  --spacing-lg: 2rem;
  
  /* Border radius */
  --radius-md: 12px;
}
```

## 📦 Tamaño del Bundle

Gracias al tree-shaking, solo pagas por lo que usas:

- Button solo: ~2KB (gzipped)
- Navbar solo: ~3KB (gzipped)
- Hero solo: ~3KB (gzipped)
- Todo junto: ~9KB (gzipped)

## 📝 Licencia

MIT © Ivo Konstantinow

## 🔗 Links

- [npm package](https://www.npmjs.com/package/@ivokonstantinow/vue-ui-library)
- [GitHub](https://github.com/ivokonstantinow/vue-ui-library)