@g-components/ui

🎨 Librería completa de componentes UI construida con Lit. Instala todos los componentes de @g-components en un solo paquete.

✨ Componentes incluidos

• lit-text - Componente de texto con etiquetas HTML dinámicas y tamaños predefinidos
• lit-button - Botón personalizable con variantes (primary, secondary, danger)
• lit-image - Componente de imagen con tamaños predefinidos y object-fit
• lit-card - Tarjeta para contenido estructurado

📦 Instalación

npm install @g-components/ui

pnpm add @g-components/ui

yarn add @g-components/ui

🚀 Uso

Importar todos los componentes

import '@g-components/ui';

Esto registra automáticamente todos los componentes y los hace disponibles en tu HTML.

Uso en HTML

<!-- Texto con tamaños -->
<lit-text content="Título principal" size="3xl" tag-html="h1"></lit-text>

<!-- Botones -->
<lit-button text="Guardar" variant="primary"></lit-button>
<lit-button text="Cancelar" variant="secondary"></lit-button>

<!-- Imágenes -->
<lit-image src="/photo.jpg" alt="Foto" size="l" fit="cover"></lit-image>

<!-- Tarjetas -->
<lit-card>
  <h2>Card Title</h2>
  <p>Card content goes here</p>
</lit-card>

Importar componentes individuales (tree-shaking)

Si solo necesitas algunos componentes específicos:

import '@g-components/lit-text';
import '@g-components/lit-button';
// Solo importa los que necesites

Uso programático

import { LitText, LitButton, LitImage, LitCard } from '@g-components/ui';

// Crear componentes programáticamente
const button = document.createElement('lit-button');
button.text = 'Click me';
button.variant = 'primary';
document.body.appendChild(button);

📖 Componentes

lit-text

Renderiza texto con etiquetas HTML dinámicas y tamaños predefinidos.

<lit-text tag-html="h1" content="Título" size="3xl"></lit-text>
<lit-text tag-html="p" content="Párrafo" size="m"></lit-text>

Propiedades:

• tag-html: h1, h2, h3, h4, h5, h6, p, span, strong, em, small
• content: Contenido de texto
• size: 3xs, 2xs, xs, s, m, l, xl, 2xl, 3xl

Ver documentación completa →

lit-button

Botón personalizable con variantes y eventos.

<lit-button text="Guardar" variant="primary"></lit-button>
<lit-button text="Eliminar" variant="danger" disabled></lit-button>

Propiedades:

• text: Texto del botón
• variant: primary, secondary, danger
• disabled: boolean

Eventos:

• button-click: Se dispara al hacer clic

Ver documentación completa →

lit-image

Componente de imagen con tamaños predefinidos y control de object-fit.

<lit-image src="/photo.jpg" alt="Foto" size="l" fit="cover"></lit-image>

Propiedades:

• src: URL de la imagen
• alt: Texto alternativo
• size: 3xs, 2xs, xs, s, m, l, xl, 2xl, 3xl
• fit: cover, contain, fill, none, scale-down

Ver documentación completa →

lit-card

Tarjeta para contenido estructurado.

<lit-card>
  <h2>Card Title</h2>
  <p>Card content</p>
</lit-card>

Ver documentación completa →

🔧 Uso con frameworks

React

import '@g-components/ui';

function App() {
  return (
    <div>
      <lit-text tag-html="h1" content="Hello" size="3xl" />
      <lit-button text="Click me" variant="primary" />
      <lit-image src="/photo.jpg" size="l" fit="cover" />
    </div>
  );
}

Vue

<template>
  <div>
    <lit-text tag-html="h1" content="Hello" size="3xl" />
    <lit-button text="Click me" variant="primary" />
    <lit-image src="/photo.jpg" size="l" fit="cover" />
  </div>
</template>

<script>
import '@g-components/ui';

export default {
  name: 'App'
}
</script>

Angular

// app.module.ts
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import '@g-components/ui';

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

<!-- component.html -->
<lit-text tag-html="h1" content="Hello" size="3xl"></lit-text>
<lit-button text="Click me" variant="primary"></lit-button>

⚠️ Nota: Los ejemplos de frameworks son referencias teóricas y aún no han sido probados en proyectos reales. Si encuentras algún problema, por favor reporta un issue.

📦 Tamaño del paquete

Este es un meta-paquete que agrupa todos los componentes. El tamaño total depende de qué componentes uses:

• lit-text: ~1.94 kB
• lit-button: ~2.5 kB
• lit-image: ~2.31 kB
• lit-card: ~1.5 kB

Total: ~8 kB (gzip) si usas todos los componentes.

Lit es una peer dependency, por lo que no se duplicará si ya lo tienes en tu proyecto.

♿ Accesibilidad

Todos los componentes están diseñados con accesibilidad en mente:

• ✅ HTML semántico
• ✅ Soporte para lectores de pantalla
• ✅ Navegación por teclado
• ✅ Contraste de colores WCAG AA

🌐 Compatibilidad

• ✅ Chrome/Edge 67+
• ✅ Firefox 63+
• ✅ Safari 13.1+
• ✅ Opera 54+

📄 Licencia

MIT

🔗 Enlaces

• Repositorio GitHub
• Reportar issues
• npm package
• Documentación de componentes individuales

💡 Contribuir

¿Encontraste un bug o tienes una idea? Abre un issue o envía un pull request.