npm package: @ingeniacode/ui-kit
Description: Librería de componentes UI para landing pages de Infinitum. Construida con Angular 15 y Tailwind CSS, compatible con Angular 15 y 16.
Latest version: 0.0.3

# @ingeniacode/ui-kit

Librería de componentes UI para landing pages de Infinitum. Construida con Angular 15 y Tailwind CSS, compatible con Angular 15 y 16.

## Instalación

```bash
npm install @ingeniacode/ui-kit
```

> ⚠️ Si instalas desde un tarball local (desarrollo), usa siempre el `.tgz` generado con `npm pack` — **nunca** `file:` directo, ya que causa conflictos de instancias de Angular.

```bash
npm install --legacy-peer-deps /ruta/UiKit/dist/ingenia-ui-kit/ingeniacode-ui-kit-x.x.x.tgz
```

---

## Configuración de estilos

La librería incluye su propio CSS compilado con Tailwind (sin prefijo, sin preflight). Impórtalo **una sola vez** en el `styles.css` global de tu proyecto:

```css
@import "@ingeniacode/ui-kit/assets/styles.css";
```

> No es necesario tener Tailwind instalado en el proyecto consumidor.

---

## Uso

### En un NgModule

```typescript
import { IngeniaUiKitModule } from '@ingeniacode/ui-kit';

@NgModule({
  imports: [IngeniaUiKitModule]
})
export class MiModule {}
```

### En un componente standalone (Angular 14+)

```typescript
import { IngeniaUiKitModule } from '@ingeniacode/ui-kit';

@Component({
  standalone: true,
  imports: [CommonModule, IngeniaUiKitModule],
  // ...
})
export class MiComponente {}
```

---

## Theming — personalización de color

Los componentes UI (`ingenia-button`, `ingenia-input`, `ingenia-select`, `ingenia-range`, `ingenia-radio`, `ingenia-checkbox`) usan **CSS custom properties** para el color de acento. El color por defecto es indigo (`#4f46e5`), pero puedes cambiarlo a cualquier color de marca sin recompilar la librería.

### Variables disponibles

| Variable               | Valor por defecto | Uso                                      |
|------------------------|-------------------|------------------------------------------|
| `--ing-accent`         | `#4f46e5`         | Color principal (fondo filled, borde, texto) |
| `--ing-accent-hover`   | `#4338ca`         | Color al hacer hover en filled            |
| `--ing-accent-light`   | `#eef2ff`         | Fondo suave (hover en outlined/ghost)     |
| `--ing-accent-mid`     | `#818cf8`         | Borde en estado focus de inputs           |
| `--ing-accent-ring`    | `0 0 0 3px rgba(129,140,248,0.15)` | Box-shadow de focus |

### Cambio global — toda la app

En el `styles.css` de tu proyecto (después del `@import` de la librería):

```css
@import "@ingeniacode/ui-kit/assets/styles.css";

:root {
  --ing-accent:       #059669;  /* verde esmeralda */
  --ing-accent-hover: #047857;
  --ing-accent-light: #ecfdf5;
  --ing-accent-mid:   #34d399;
}
```

### Cambio por sección — scope local

Puedes aislar el color a un contenedor concreto usando la propiedad `style`:

```html
<!-- Botones con color rosa solo en esta sección -->
<div style="--ing-accent: #db2777; --ing-accent-hover: #be185d; --ing-accent-light: #fdf2f8">
  <ingenia-button variant="filled">Comprar ahora</ingenia-button>
  <ingenia-button variant="outlined">Ver detalles</ingenia-button>
</div>
```

O en Angular con binding:

```typescript
themeVars = { '--ing-accent': '#ea580c', '--ing-accent-hover': '#c2410c', '--ing-accent-light': '#fff7ed' };
```
```html
<div [ngStyle]="themeVars">
  <ingenia-button>Reservar</ingenia-button>
</div>
```

### Paletas de ejemplo

```css
/* Indigo (por defecto) */
--ing-accent: #4f46e5; --ing-accent-hover: #4338ca; --ing-accent-light: #eef2ff; --ing-accent-mid: #818cf8;

/* Verde esmeralda */
--ing-accent: #059669; --ing-accent-hover: #047857; --ing-accent-light: #ecfdf5; --ing-accent-mid: #34d399;

/* Rosa */
--ing-accent: #db2777; --ing-accent-hover: #be185d; --ing-accent-light: #fdf2f8; --ing-accent-mid: #f472b6;

/* Naranja */
--ing-accent: #ea580c; --ing-accent-hover: #c2410c; --ing-accent-light: #fff7ed; --ing-accent-mid: #fb923c;

/* Azul */
--ing-accent: #2563eb; --ing-accent-hover: #1d4ed8; --ing-accent-light: #eff6ff; --ing-accent-mid: #60a5fa;
```

---

## Componentes

| Selector                      | Tipo `section`       | Input `[data]`               |
|-------------------------------|----------------------|------------------------------|
| `<ingenia-hero>`              | `hero`               | `HeroSection`                |
| `<ingenia-banner>`            | `banner`             | `BannerSection`              |
| `<ingenia-text>`              | `text`               | `TextSection`                |
| `<ingenia-text-block>`        | `text_block`         | `TextBlockSection`           |
| `<ingenia-video>`             | `video`              | `VideoSection`               |
| `<ingenia-gallery>`           | `image_gallery`      | `ImageGallerySection`        |
| `<ingenia-image-carousel>`    | `image_carousel`     | `ImageCarouselSection`       |
| `<ingenia-video-carousel>`    | `video_carousel`     | `VideoCarouselSection`       |
| `<ingenia-features>`          | `features`           | `FeaturesSection`            |
| `<ingenia-testimonials>`      | `testimonials`       | `TestimonialsSection`        |
| `<ingenia-faq>`               | `faq`                | `FaqSection`                 |
| `<ingenia-cta>`               | `cta`                | `CtaSection`                 |
| `<ingenia-countdown>`         | `countdown`          | `CountdownSection`           |
| `<ingenia-contact-form>`      | `contact_form`       | `ContactFormSection`         |
| `<ingenia-categories-grid>`   | `categories_grid`    | `CategoriesGridSection`      |
| `<ingenia-featured-products>` | `featured_products`  | `FeaturedProductsSection`    |
| `<ingenia-social-feed>`       | `social_feed`        | `SocialFeedSection`          |
| `<ingenia-spacer>`            | `spacer`             | `SpacerSection`              |

### Ejemplo — landing page dinámica

```html
<ng-container *ngFor="let section of landing.sections">
  <ng-container [ngSwitch]="section.type">
    <ingenia-hero              *ngSwitchCase="'hero'"              [data]="section"></ingenia-hero>
    <ingenia-banner            *ngSwitchCase="'banner'"            [data]="section"></ingenia-banner>
    <ingenia-text              *ngSwitchCase="'text'"              [data]="section"></ingenia-text>
    <ingenia-text-block        *ngSwitchCase="'text_block'"        [data]="section"></ingenia-text-block>
    <ingenia-video             *ngSwitchCase="'video'"             [data]="section"></ingenia-video>
    <ingenia-gallery           *ngSwitchCase="'image_gallery'"     [data]="section"></ingenia-gallery>
    <ingenia-features          *ngSwitchCase="'features'"          [data]="section"></ingenia-features>
    <ingenia-testimonials      *ngSwitchCase="'testimonials'"      [data]="section"></ingenia-testimonials>
    <ingenia-faq               *ngSwitchCase="'faq'"               [data]="section"></ingenia-faq>
    <ingenia-cta               *ngSwitchCase="'cta'"               [data]="section"></ingenia-cta>
    <ingenia-countdown         *ngSwitchCase="'countdown'"         [data]="section"></ingenia-countdown>
    <ingenia-contact-form      *ngSwitchCase="'contact_form'"      [data]="section"></ingenia-contact-form>
    <ingenia-categories-grid   *ngSwitchCase="'categories_grid'"   [data]="section"></ingenia-categories-grid>
    <ingenia-featured-products *ngSwitchCase="'featured_products'" [data]="section"></ingenia-featured-products>
    <ingenia-social-feed       *ngSwitchCase="'social_feed'"       [data]="section"></ingenia-social-feed>
    <ingenia-spacer            *ngSwitchCase="'spacer'"            [data]="section"></ingenia-spacer>
  </ng-container>
</ng-container>
```

---

## Desarrollo

### Requisitos
- Node 18+
- Angular CLI 15

### Comandos

```bash
# Servidor de desarrollo (demo app)
npm start

# Build completo: librería + CSS compilado + tarball
npm run build:lib
```

### Flujo de publicación

```bash
# 1. Actualiza la versión
npm version patch   # 0.0.1 → 0.0.2
npm version minor   # 0.0.1 → 0.1.0

# 2. Build completo
npm run build:lib
# Genera: dist/ingenia-ui-kit/ingeniacode-ui-kit-x.x.x.tgz

# 3a. Publicar en npm
cd dist/ingenia-ui-kit
npm publish --access public --otp=XXXXXX

# 3b. O instalar localmente en otro proyecto
npm install --legacy-peer-deps /ruta/dist/ingenia-ui-kit/ingeniacode-ui-kit-x.x.x.tgz
```

### Estructura del proyecto

```
UiKit/
├── projects/
│   ├── ingenia-ui-kit/          # Librería fuente
│   │   ├── src/lib/             # Componentes
│   │   ├── src/styles.css       # Entry CSS para Tailwind
│   │   ├── assets/styles.css    # CSS compilado (generado por build:lib)
│   │   └── ng-package.json
│   └── demo/                    # App de demostración
├── dist/ingenia-ui-kit/         # Build output
└── tailwind.config.js
```

---

## Compatibilidad

| Angular | Compatible |
|---------|------------|
| 15.x    | ✅         |
| 16.x    | ✅         |