@poly-ds/angular

Componentes da design system poly-ds para Angular — gerados a partir de uma fonte única em Mitosis (@poly-ds/source), mais alguns adapters escritos à mão onde o gerador não alcança (runtime de tema, posicionamento flutuante, ControlValueAccessor para Input/Select).

Requer @angular/core, @angular/common e @angular/forms >=18 (standalone, API de signals) e o CSS de @poly-ds/styles.

Instalação

npm install @poly-ds/angular @poly-ds/styles @poly-ds/theme-manager @poly-ds/tokens

Uso mínimo

// main.ts
import '@poly-ds/styles';
import { provideDsTheme } from '@poly-ds/angular';
import { bootstrapApplication } from '@angular/platform-browser';
import { THEMES } from '@poly-ds/tokens';
import { AppComponent } from './app.component';

bootstrapApplication(AppComponent, {
  providers: [provideDsTheme({ themes: THEMES, defaultTheme: 'default' })],
}).catch((err) => console.error(err));

// app.component.ts
import { Component } from '@angular/core';
import { Button } from '@poly-ds/angular';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [Button],
  template: `<ds-button variant="primary">Salvar</ds-button>`,
})
export class AppComponent {}

provideDsTheme é opcional — só necessário para o service ThemeService (inject(ThemeService)). Sem ele, os componentes funcionam normalmente lendo os atributos data-ds-* já presentes no documento.

Input e Select implementam ControlValueAccessor — formControlName/ [formControl]/[(ngModel)] funcionam além do [(value)] nativo. Os demais controles (Checkbox, RadioGroup, Switch, Textarea) ainda só têm [(value)]/ [(checked)] — ver docs/COMPONENTES.md.

Componentes

19 componentes: Button, Input, Select, Checkbox, RadioGroup, Switch, Textarea, Label, FormField, Badge, Card, Skeleton, Avatar, Tooltip, Popover, Dialog, Tabs, Accordion e Table (+ TableRow/TableCell/TableHeaderCell). API completa, com as diferenças de idioma entre React/Vue/Angular, em docs/COMPONENTES.md; guia de instalação e primeiro uso em docs/COMECANDO.md.