@seace/ui

Librería de componentes UI para proyectos SEACE, construida con Angular y Tailwind CSS.

Instalación

npm install @seace/ui

Requisitos

• Angular 21+
• Tailwind CSS 3+

Configuración

1. Registra los iconos en tu componente raíz

import { Component, inject, OnInit } from '@angular/core';
import { IconRegistry, ICONS_SYSTEM } from '@seace/ui';

@Component({ selector: 'app-root', ... })
export class AppComponent implements OnInit {
  #registry = inject(IconRegistry);

  ngOnInit() {
    this.#registry.registerCategory(ICONS_SYSTEM);
    // Agrega más categorías según necesites
  }
}

2. Configura Tailwind para incluir las clases de la librería

// tailwind.config.js
module.exports = {
  content: [
    './src/**/*.{html,ts}',
    './node_modules/@seace/ui/**/*.mjs',
  ],
};

Componentes

Badge

<ui-badge color="primary" variant="ghost">Pendiente</ui-badge>
<ui-badge color="success" variant="filled" icon="check">Aprobado</ui-badge>
<ui-badge color="danger" variant="outlined" size="sm">Rechazado</ui-badge>

| Input | Tipo | Default | Descripción | |-------|------|---------|-------------| | color | BadgeColor | primary | Color semántico o decorativo | | variant | filled \| outlined \| ghost | ghost | Estilo visual | | size | sm \| md \| lg | md | Tamaño | | icon | string \| null | null | Nombre del icono | | iconPosition | left \| right | left | Posición del icono |

Icon

<ui-icon name="check_circle" [size]="24" />

| Input | Tipo | Default | Descripción | |-------|------|---------|-------------| | name | string | — | Nombre del icono (requerido) | | size | number | 24 | Tamaño en px |

Iconos disponibles

La librería incluye 1151 iconos organizados en categorías:

import { 
  ICONS_SYSTEM,
  ICONS_ARROWS,
  ICONS_CHART,
  ICONS_DOCUMENTS,
  // ...
} from '@seace/ui';

Licencia

UNLICENSED — uso interno SEACE/OSCE.