@marsaude/sira-components

Biblioteca de componentes Angular do Design System Sira — Mar Saúde.

Instalação

npm install @marsaude/sira-components

Configuração

Adicione o import global de estilos no styles.scss da sua aplicação:

@use '@marsaude/sira-components/styles';

Uso

Todos os componentes são standalone. Importe apenas o que precisar:

import { Component } from '@angular/core';
import { ButtonComponent, SectionComponent, SectionHeadingComponent } from '@marsaude/sira-components';

@Component({
  standalone: true,
  imports: [ButtonComponent, SectionComponent, SectionHeadingComponent],
  template: `
    <div siraSection>
      <div siraSectionHeading title="Minha seção"></div>
      <button siraButton variant="primary">Ação principal</button>
    </div>
  `
})
export class ExampleComponent {}

Para projetos com NgModule, use o módulo agrupador:

import { SiraUiModule } from '@marsaude/sira-components';

@NgModule({
  imports: [SiraUiModule]
})
export class AppModule {}

Componentes disponíveis

Layout

• SectionComponent — div[siraSection]
• SectionHeadingComponent — div[siraSectionHeading]
• SectionBodyComponent — div[siraSectionBody]
• HighlightSessionComponent — div[siraHighlightSession]
• NavbarComponent — <navbar>

Cards

• CardComponent — div[siraCard]
• CardBodyComponent — div[siraCardBody]
• CardActionComponent — div[siraCardAction]
• CardImageComponent — div[siraCardImage]
• NavCardComponent — a[siraNavCard] / button[siraNavCard]
• TileCardComponent — a[siraTileCard] / button[siraTileCard]

Formulários

• TextFieldComponent — <sira-text-field> / <sira-form-field>
• TextareaFieldComponent — <sira-textarea-field>
• SiraInputDirective — input[siraInput] / textarea[siraInput]

Interativos

• ButtonComponent — button[siraButton] / a[siraButton]
• QuickButtonComponent — button[siraQuickButton] / a[siraQuickButton]
• AlertComponent — div[siraAlert]
• BadgeComponent — span[siraBadge]

Listas

• ListComponent — ul[siraList]
• ListItemComponent — li[siraListItem] / a[siraListItem]
• ListActionComponent — a[siraListAction] / button[siraListAction]
• ListActionOutlineComponent — li[siraListActionOutline]

Diretivas utilitárias

• ElementSpacingDirective — [elementSpacing]
• TextStyleDirective — [textStyle]

Documentação completa

Consulte o Storybook para exemplos interativos e a API detalhada de cada componente.