@chrisdesign95/nova-iris-ui

Librería de componentes Angular 21 (standalone, Signals, OnPush y compatible con zoneless) con tokens CSS --nv-* en Light y Dark. Los componentes siguen el diseño de Figma component-ui.

Versión 0.x: la API puede cambiar entre versiones menores.

Versión local: 0.7.0 (v0.7.0). El flujo de publicación compila antes de ejecutar las pruebas para resolver los entry points desde un dist actualizado.

Instalación

npm install @chrisdesign95/nova-iris-ui

Peer dependencies: @angular/core, @angular/common y @angular/forms ^21.2.0.

Estilos y tema

Carga los tokens una sola vez en los estilos globales de la aplicación (angular.json):

"styles": ["node_modules/@chrisdesign95/nova-iris-ui/styles/tokens.css"]

Light es el tema por defecto. Para usar Dark, pon data-theme="dark" en <html>; también funcionan temas anidados en cualquier elemento. La librería no incluye ningún servicio de tema ni detecta prefers-color-scheme.

• Light: colores y medidas verificados en Figma component-ui, con Primary Violet.
• Dark: propuesta propia de NOVA IRIS UI; no existe en Figma.

Componentes

Cada componente es un secondary entry point, así que solo se incluye lo que importas.

| Selector | Import | Descripción | |---|---|---| | <nv-button> | @chrisdesign95/nova-iris-ui/button | Botón nativo: variantes primary, secondary, outline, ghost y destructive; tamaños sm, md y lg; contenido label, icon-label e icon-only; estados disabled y loading. | | <nv-input> | @chrisdesign95/nova-iris-ui/input | Campo de texto con etiqueta, ayuda y error accesibles. Compatible con Reactive Forms, ngModel y [(value)]. | | <nv-tag> | @chrisdesign95/nova-iris-ui/tag | Etiqueta outline o soft, con 5 severidades. Informativa; con interactive se convierte en botón. | | <nv-badge> | @chrisdesign95/nova-iris-ui/badge | Indicador solid: contador (count) o punto (dot). | | <nv-chip> | @chrisdesign95/nova-iris-ui/chip | Botón de alternancia con aria-pressed y [(selected)]. | | <nv-avatar> | @chrisdesign95/nova-iris-ui/avatar | Iniciales o icono, con estado de presencia. | | <nv-textarea> | @chrisdesign95/nova-iris-ui/textarea | Área de texto con etiqueta, ayuda, error y contador n/max. Compatible con Reactive Forms, ngModel y [(value)]. | | <nv-checkbox> | @chrisdesign95/nova-iris-ui/checkbox | Checkbox nativo con estado indeterminado, etiqueta, descripción y Forms/CVA. | | <nv-radio> | @chrisdesign95/nova-iris-ui/radio | Radio nativo con selección por grupo, navegación por teclado y Forms/CVA. | | <nv-switch> | @chrisdesign95/nova-iris-ui/switch | Alternancia booleana con semántica switch, etiqueta, descripción y Forms/CVA. | | <nv-select> | @chrisdesign95/nova-iris-ui/select | Selección única con búsqueda opcional, teclado, Forms/CVA y [(value)]. | | <nv-multi-select> | @chrisdesign95/nova-iris-ui/multi-select | Selección múltiple con búsqueda, Forms/CVA y Tags; maxVisibleTags de 1 a 5 (predeterminado 2), con +N para excedentes. | | <nv-date-picker> | @chrisdesign95/nova-iris-ui/date-picker | Selector de fecha single, multiple o range, con Forms/CVA, límites, localización, teclado y calendarios de mes/año. |

import { Component } from '@angular/core';
import { NvButton } from '@chrisdesign95/nova-iris-ui/button';

@Component({
  selector: 'app-demo',
  imports: [NvButton],
  template: `<nv-button variant="primary" size="md" (click)="save()">Guardar</nv-button>`,
})
export class Demo {
  save() {}
}

Todos los componentes públicos usan el prefijo nv- y los tokens el prefijo --nv-.

Iconos

La librería no incluye iconos ni depende de ningún proveedor. Registra un resolver que traduzca nombres semánticos a clases CSS; tú cargas el CSS de iconos (por ejemplo Font Awesome Free alojado en tu aplicación):

import { provideNvIcons } from '@chrisdesign95/nova-iris-ui';

provideNvIcons((name) => ({ save: 'fa-solid fa-floppy-disk' })[name as 'save'] ?? '');

<nv-button content="icon-label" icon="save">Guardar</nv-button>
<nv-button content="icon-only" icon="save" ariaLabel="Guardar" />

El resolver devuelve clases CSS, nunca HTML ni SVG. Un botón icon-only exige ariaLabel o ariaLabelledby.

Notas y límites conocidos

• Los componentes con elemento nativo interno (nv-button, nv-input, nv-chip) reenvían al nativo los atributos de formulario y ARIA mediante inputs; el host <nv-*> no equivale a un <button> o <input> HTML.
• Un [attr.aria-label] escrito en el host no llega al elemento nativo: usa el input ariaLabel.
• La fuente Inter no se distribuye; sin ella se usa system-ui, sans-serif.
• El anillo de foco (2px, color primary) no procede de Figma: es una decisión de diseño de NOVA IRIS UI.
• Avatar, Icon y Remove del Chip quedan pendientes.
• Los días y controles de cabecera del Date Picker usan radio circular por una desviación aprobada de Figma; la actualización del diseño está pendiente.

Licencia

UNLICENSED: uso personal del autor, todos los derechos reservados. No se concede permiso de uso, copia ni redistribución. Ver LICENSE.