npm package: @marsaude/sira-components
Description: ```markdown # Sira UI Components (@marsaude/sira-components)
Latest version: 1.8.4

```markdown
# Sira UI Components (@marsaude/sira-components)

Biblioteca de componentes Angular reutilizáveis para o Design System Sira.

## 🛠️ Build e Desenvolvimento

Para compilar a biblioteca localmente:

```bash
# Compilar uma vez
ng build @marsaude/sira-components

# Compilar em modo "watch" (recompila ao salvar arquivos)
ng build @marsaude/sira-components --watch

```

Os arquivos compilados serão gerados na pasta `dist/marsaude/sira-components`.

---

## 📦 Instalação

### Via NPM (Recomendado)

Para instalar a versão mais recente publicada no registro:

```bash
npm install @marsaude/sira-components

```

*Caso tenha conflitos de versão do Angular, use:*

```bash
npm install @marsaude/sira-components --legacy-peer-deps

```

### Via Arquivo Local (Para testes antes de publicar)

Se você gerou um arquivo `.tgz` localmente (`npm pack`), instale assim:

```bash
npm install ./caminho/para/dist/marsaude/sira-components/marsaude-sira-components-1.0.X.tgz

```

---

## 🚀 Como Usar

### 1. Importar no Componente (Standalone)

Importe os componentes diretamente no `imports` do seu componente Angular:

```typescript
import { Component } from '@angular/core';
import { HighlightSectionComponent, NavCardComponent } from '@marsaude/sira-components';

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [HighlightSectionComponent, NavCardComponent],
  template: `
    <div siraAlert theme="info" title="Bem-vindo">
      Componentes carregados com sucesso!
    </div>
  `
})
export class HomeComponent {}

```

### 2. Importar os Estilos (SCSS)

Para que os componentes tenham a aparência correta, adicione o import global no seu arquivo `styles.scss` da aplicação:

```scss
/* No arquivo src/styles.scss */
@import '@marsaude/sira-components/styles';

```

---

## ☁️ Publicação no NPM

### Pré-requisitos

Certifique-se de que você está logado ou com o token configurado.

### Passo a Passo para Publicar

1. **Atualize a versão:**
```bash
# Opções: patch (1.0.0 -> 1.0.1), minor (1.0.0 -> 1.1.0) ou major (1.0.0 -> 2.0.0)
cd projects/marsaude/sira-components
npm version patch
cd ../../..

```


2. **Faça o Build:**
```bash
ng build @marsaude/sira-components

```


3. **Publique:**
```bash
cd dist/marsaude/sira-components
npm publish --access public

```



---

## 🔑 Renovação do Token de Acesso (Granular Token)

Utilizamos **Granular Access Tokens** para publicar sem precisar digitar OTP (2FA) a cada comando. Esses tokens expiram e precisam ser renovados periodicamente.

### Quando o token expirar (Erro 401/403 no publish):

1. Acesse [npmjs.com](https://www.npmjs.com/) e faça login.
2. Clique na **Foto de Perfil** > **Access Tokens**.
3. Clique em **Generate New Token** > **Granular Access Token**.
4. Configure assim:
* **Name:** "Computador [Seu Nome] - Publish"
* **Expiration:** 90 dias (ou Custom)
* **Permissions:**
* Packages and scopes: Selecione `@marsaude` (ou sua organização).
* Permissions: **Read and write**.


* **✅ Bypass 2FA requirements:** **Marque esta opção** (obrigatório para publish direto sem digitar código OTP).


5. Clique em **Generate Token** e copie o código (`npm_...`).

### Atualizar no computador local:

No terminal, rode o comando abaixo substituindo pelo novo token:

```bash
npm config set //registry.npmjs.org/:_authToken=npm_seu_novo_token_aqui

```

Pronto! Você pode voltar a publicar normalmente.

```

```