@dev-tcloud/tcloud-ui 6.15.0 → 6.18.0

package/docs/tcloud-ui-table.md

@@ -0,0 +1,96 @@
+# TCloud UI Table
+
+Componente Angular standalone que encapsula uma tabela estilizada com projeção de conteúdo, suporte a tabela zebrada e classe responsiva para adaptação em telas menores.
+
+## Características
+
+- ✅ Projeção via `ng-content` para `<thead>` e `<tbody>` usando seletores `tc-thead` e `tc-tbody`
+- ✅ Habilita classe responsiva opcional (`tc-table-responsive`) para melhor visualização em mobile
+- ✅ Suporte a linhas zebradas (`tc-table-striped`) configurável por input
+- ✅ Standalone, mas também exportado pelo `TCloudUiModule`
+
+## Instalação
+
+Importe o módulo agregador:
+
+```typescript
+import { TCloudUiModule } from 'projects/tcloud-ui/src/public-api';
+
+@NgModule({
+  imports: [TCloudUiModule]
+})
+export class MyModule {}
+```
+
+Ou importe apenas o componente standalone:
+
+```typescript
+import { TCloudUiTableComponent } from 'projects/tcloud-ui/src/lib/_modules/tcloud-ui-table/tcloud-ui-table.component';
+
+@Component({
+  standalone: true,
+  imports: [TCloudUiTableComponent]
+})
+export class MyStandaloneComponent {}
+```
+
+## Uso Básico
+
+```html
+<tcloud-ui-table>
+  <thead tc-thead>
+    <tr>
+      <th>Nome</th>
+      <th>Email</th>
+    </tr>
+  </thead>
+  <tbody tc-tbody>
+    <tr>
+      <td>Ana</td>
+      <td>ana@email.com</td>
+    </tr>
+    <tr>
+      <td>Bruno</td>
+      <td>bruno@email.com</td>
+    </tr>
+  </tbody>
+</tcloud-ui-table>
+```
+
+## Uso Avançado
+
+Tabela responsiva, com linhas zebradas e labels de dados para mobile:
+
+```html
+<tcloud-ui-table [responsive]="true" [striped]="true">
+  <thead tc-thead>
+    <tr>
+      <th TCalign="start">Nome</th>
+      <th TCalign="end">Email</th>
+      <th>Status</th>
+    </tr>
+  </thead>
+  <tbody tc-tbody>
+    <tr>
+      <td TCalign="start" tc-data-label="Nome">Info</td>
+      <td TCalign="end" tc-data-label="Email">info@email.com</td>
+      <td tc-data-label="Status">Ativo</td>
+    </tr>
+  </tbody>
+</tcloud-ui-table>
+```
+
+## API
+
+### Componente: `tcloud-ui-table`
+
+#### Inputs
+
+| Propriedade | Tipo | Padrão | Descrição | Obrigatório |
+|-------------|------|--------|-----------|-------------|
+| `responsive` | `boolean` | `true` | Adiciona classe responsiva para melhorar exibição em telas pequenas. | ❌ |
+| `striped` | `boolean` | `false` | Ativa listras alternadas nas linhas da tabela. | ❌ |
+
+#### Outputs
+
+Nenhum output público disponível.

package/docs/tcloud-ui-tag.md

@@ -0,0 +1,379 @@
+# Tag
+
+## Características
+
+O componente `tcloud-ui-tag` é um componente versátil para exibir tags/badges customizáveis com suporte a múltiplas cores, variantes (filled/outline), tamanhos (sm/md/lg) e formatos (rectangle/pill). Ideal para categorizar informações, indicar status ou destacar conteúdo importante.
+
+## Instalação
+
+Para utilizar o componente Tag, importe o módulo `TCloudUiModule`:
+
+```typescript
+import { TCloudUiModule } from '@tcloud-ui/lib';
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  standalone: true,
+  imports: [TCloudUiModule],
+  template: `<tcloud-ui-tag ...>Texto da Tag</tcloud-ui-tag>`
+})
+export class ExampleComponent {}
+```
+
+Ou importe diretamente o componente e a enum de cores:
+
+```typescript
+import { TCloudUiTagComponent, TagColorsEnum } from '@tcloud-ui/lib';
+
+@Component({
+  selector: 'app-example',
+  standalone: true,
+  imports: [TCloudUiTagComponent],
+  template: `<tcloud-ui-tag ...>Texto da Tag</tcloud-ui-tag>`
+})
+export class ExampleComponent {}
+```
+
+## Propriedades (API)
+
+### Inputs
+
+| Nome | Tipo | Descrição | Valor Default |
+|------|------|-----------|---------------|
+| `size` | `'sm' \| 'md' \| 'lg' \| 'regular'` | Tamanho da tag | `'md'` |
+| `color` | `TagColorsEnum \| string` | Cor da tag (veja enum abaixo) | `'primary-500'` |
+| `variant` | `'filled' \| 'outline' \| ''` | Estilo visual da tag | `'filled'` |
+| `shape` | `'pill' \| 'rectangle'` | Formato da tag | `'rectangle'` |
+| `fullWidth` | `boolean` | Se a tag ocupa toda a largura do container | `false` |
+
+### Enum de Cores Disponíveis
+
+```typescript
+export enum TagColorsEnum {
+  'neutral-50', 'neutral-100', 'neutral-200', 'neutral-300', 'neutral-400',
+  'neutral-500', 'neutral-600', 'neutral-700', 'neutral-800', 'neutral-900',
+  'primary-300', 'primary-400', 'primary-500', 'primary-600', 'primary-700',
+  'danger-300', 'danger-400', 'danger-500',
+  'alert-300', 'alert-400', 'alert-500',
+  'info-300', 'info-400', 'info-500',
+  'success-300', 'success-400', 'success-500'
+}
+```
+
+## Exemplos de Uso
+
+### Uso Básico
+
+```typescript
+import { Component } from '@angular/core';
+import { TCloudUiModule } from '@tcloud-ui/lib';
+
+@Component({
+  selector: 'app-basic-tag',
+  standalone: true,
+  imports: [TCloudUiModule],
+  template: `
+    <tcloud-ui-tag>Informação</tcloud-ui-tag>
+    <tcloud-ui-tag [color]="'danger-500'">Erro</tcloud-ui-tag>
+    <tcloud-ui-tag [color]="'success-500'">Sucesso</tcloud-ui-tag>
+  `
+})
+export class BasicTagComponent {}
+```
+
+### Tags com Diferentes Tamanhos
+
+```typescript
+import { Component } from '@angular/core';
+import { TCloudUiModule } from '@tcloud-ui/lib';
+
+@Component({
+  selector: 'app-sizes-tag',
+  standalone: true,
+  imports: [TCloudUiModule],
+  template: `
+    <div class="container">
+      <tcloud-ui-tag size="sm">Pequeno</tcloud-ui-tag>
+      <tcloud-ui-tag size="md">Médio</tcloud-ui-tag>
+      <tcloud-ui-tag size="lg">Grande</tcloud-ui-tag>
+    </div>
+  `,
+  styles: [`
+    .container {
+      display: flex;
+      gap: 1rem;
+      align-items: center;
+    }
+  `]
+})
+export class SizesTagComponent {}
+```
+
+### Variantes Filled e Outline
+
+```typescript
+import { Component } from '@angular/core';
+import { TCloudUiModule } from '@tcloud-ui/lib';
+
+@Component({
+  selector: 'app-variants-tag',
+  standalone: true,
+  imports: [TCloudUiModule],
+  template: `
+    <div>
+      <div class="group">
+        <h4>Variante Filled (preenchida)</h4>
+        <tcloud-ui-tag variant="filled" [color]="'primary-500'">Primária</tcloud-ui-tag>
+        <tcloud-ui-tag variant="filled" [color]="'success-500'">Sucesso</tcloud-ui-tag>
+        <tcloud-ui-tag variant="filled" [color]="'danger-500'">Perigo</tcloud-ui-tag>
+      </div>
+
+      <div class="group">
+        <h4>Variante Outline (só contorno)</h4>
+        <tcloud-ui-tag variant="outline" [color]="'primary-500'">Primária</tcloud-ui-tag>
+        <tcloud-ui-tag variant="outline" [color]="'success-500'">Sucesso</tcloud-ui-tag>
+        <tcloud-ui-tag variant="outline" [color]="'danger-500'">Perigo</tcloud-ui-tag>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .group {
+      display: flex;
+      gap: 0.5rem;
+      margin-bottom: 1rem;
+      align-items: center;
+    }
+  `]
+})
+export class VariantsTagComponent {}
+```
+
+### Formatos Pill e Rectangle
+
+```typescript
+import { Component } from '@angular/core';
+import { TCloudUiModule } from '@tcloud-ui/lib';
+
+@Component({
+  selector: 'app-shapes-tag',
+  standalone: true,
+  imports: [TCloudUiModule],
+  template: `
+    <div class="container">
+      <div class="group">
+        <h4>Rectangle (padrão)</h4>
+        <tcloud-ui-tag shape="rectangle">Normal</tcloud-ui-tag>
+      </div>
+      
+      <div class="group">
+        <h4>Pill (arredondado)</h4>
+        <tcloud-ui-tag shape="pill">Arredondado</tcloud-ui-tag>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .container {
+      display: flex;
+      gap: 2rem;
+    }
+    .group h4 {
+      margin-bottom: 0.5rem;
+    }
+  `]
+})
+export class ShapesTagComponent {}
+```
+
+### Tags para Status
+
+```typescript
+import { Component } from '@angular/core';
+import { TCloudUiModule } from '@tcloud-ui/lib';
+
+@Component({
+  selector: 'app-status-tags',
+  standalone: true,
+  imports: [TCloudUiModule],
+  template: `
+    <div class="container">
+      <div class="item">
+        <p>Status: Ativo</p>
+        <tcloud-ui-tag [color]="'success-500'" shape="pill">✓ Ativo</tcloud-ui-tag>
+      </div>
+
+      <div class="item">
+        <p>Status: Pendente</p>
+        <tcloud-ui-tag [color]="'alert-500'" shape="pill">⏱ Pendente</tcloud-ui-tag>
+      </div>
+
+      <div class="item">
+        <p>Status: Inativo</p>
+        <tcloud-ui-tag [color]="'neutral-500'" shape="pill">✗ Inativo</tcloud-ui-tag>
+      </div>
+
+      <div class="item">
+        <p>Status: Erro</p>
+        <tcloud-ui-tag [color]="'danger-500'" shape="pill">✗ Erro</tcloud-ui-tag>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .container {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      gap: 1.5rem;
+    }
+    .item p {
+      margin: 0 0 0.5rem 0;
+      font-weight: 500;
+    }
+  `]
+})
+export class StatusTagsComponent {}
+```
+
+### Cores Disponíveis
+
+```typescript
+import { Component } from '@angular/core';
+import { TCloudUiModule } from '@tcloud-ui/lib';
+
+@Component({
+  selector: 'app-color-palette',
+  standalone: true,
+  imports: [TCloudUiModule],
+  template: `
+    <div class="color-grid">
+      <!-- Neutras -->
+      <div>
+        <h5>Neutras</h5>
+        <tcloud-ui-tag [color]="'neutral-300'">neutral-300</tcloud-ui-tag>
+        <tcloud-ui-tag [color]="'neutral-500'">neutral-500</tcloud-ui-tag>
+        <tcloud-ui-tag [color]="'neutral-700'">neutral-700</tcloud-ui-tag>
+      </div>
+
+      <!-- Primárias -->
+      <div>
+        <h5>Primárias</h5>
+        <tcloud-ui-tag [color]="'primary-300'">primary-300</tcloud-ui-tag>
+        <tcloud-ui-tag [color]="'primary-500'">primary-500</tcloud-ui-tag>
+        <tcloud-ui-tag [color]="'primary-700'">primary-700</tcloud-ui-tag>
+      </div>
+
+      <!-- Danger -->
+      <div>
+        <h5>Risco/Erro</h5>
+        <tcloud-ui-tag [color]="'danger-300'">danger-300</tcloud-ui-tag>
+        <tcloud-ui-tag [color]="'danger-500'">danger-500</tcloud-ui-tag>
+      </div>
+
+      <!-- Success -->
+      <div>
+        <h5>Sucesso</h5>
+        <tcloud-ui-tag [color]="'success-300'">success-300</tcloud-ui-tag>
+        <tcloud-ui-tag [color]="'success-500'">success-500</tcloud-ui-tag>
+      </div>
+
+      <!-- Info -->
+      <div>
+        <h5>Informação</h5>
+        <tcloud-ui-tag [color]="'info-300'">info-300</tcloud-ui-tag>
+        <tcloud-ui-tag [color]="'info-500'">info-500</tcloud-ui-tag>
+      </div>
+
+      <!-- Alert -->
+      <div>
+        <h5>Alerta</h5>
+        <tcloud-ui-tag [color]="'alert-300'">alert-300</tcloud-ui-tag>
+        <tcloud-ui-tag [color]="'alert-500'">alert-500</tcloud-ui-tag>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .color-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      gap: 1.5rem;
+    }
+    .color-grid div {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+    }
+    .color-grid h5 {
+      margin: 0 0 0.5rem 0;
+      font-size: 0.875rem;
+      font-weight: 600;
+      color: var(--c-neutral-600);
+    }
+  `]
+})
+export class ColorPaletteComponent {}
+```
+
+### Tags de Categoria
+
+```typescript
+import { Component } from '@angular/core';
+import { TCloudUiModule } from '@tcloud-ui/lib';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-category-tags',
+  standalone: true,
+  imports: [CommonModule, TCloudUiModule],
+  template: `
+    <div class="categories">
+      <h4>Categorias de Produto</h4>
+      <div class="tag-list">
+        <tcloud-ui-tag 
+          *ngFor="let category of categories"
+          [color]="category.color"
+          shape="pill"
+          variant="filled"
+        >
+          {{ category.label }}
+        </tcloud-ui-tag>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .categories {
+      padding: 1rem;
+    }
+    .tag-list {
+      display: flex;
+      gap: 0.5rem;
+      flex-wrap: wrap;
+    }
+  `]
+})
+export class CategoryTagsComponent {
+  categories = [
+    { label: 'Eletrônicos', color: 'primary-500' },
+    { label: 'Livros', color: 'info-500' },
+    { label: 'Roupas', color: 'alert-500' },
+    { label: 'Alimentos', color: 'success-500' },
+    { label: 'Beleza', color: 'primary-300' }
+  ];
+}
+```
+
+## Notas de Implementação
+
+- O componente usa Angular signals (input) para reatividade
+- As cores são combinadas dinamicamente usando interpolação de classes CSS
+- O componente suporta `<ng-content>` para conteúdo flexível
+- O `:host` display é `block`, permitindo controle de layout
+- As variantes filled e outline combinam cores de background e texto de forma dinâmica
+- O formato pill usa `border-radius: var(--bor-radius-pill)` para arredondamento máximo
+- Tags preenchem a largura do container quando `fullWidth=true`
+
+## Casos de Uso
+
+- Indicar status (ativo/inativo, sucesso/erro)
+- Categorizar conteúdo (tags de artikel, labels de categoria)
+- Destacar informações importantes (badges, notificações)
+- Mostrar tecnologias ou skills (em profiles)
+- Filtros visuais em listas

package/docs/tcloud-ui-tc-badge.md

@@ -0,0 +1,168 @@
+# Layout — `.tc-badge`
+
+## Características
+
+- Labels coloridas para indicar status, categorias e metadados inline.
+- Seis variantes semânticas: `primary`, `success`, `danger`, `alert`, `info` e `neutral`.
+- Dois estilos visuais: **filled** (padrão — fundo suave com borda) e **solid** (fundo cheio) via `.tc-badge-solid`.
+- Três tamanhos: `tc-badge-sm`, padrão e `tc-badge-lg`.
+- Estado desabilitado via `.tc-badge-disabled` — reduz opacidade e bloqueia interação.
+- Cores baseadas nos tokens `--c-*` do design system — adapta-se automaticamente ao dark mode.
+- Não há componente Angular envolvido — as classes são aplicadas diretamente em `<span>` ou qualquer tag inline.
+
+## Instalação
+
+As classes são fornecidas pelo stylesheet global do projeto. Nenhuma importação de módulo Angular é necessária.
+Certifique-se de que o stylesheet principal do `tcloud-ui` está incluído na aplicação:
+
+```ts
+// angular.json — styles
+"styles": [
+  "projects/tcloud-ui/assets/scss/tcloud-ui.scss"
+]
+```
+
+---
+
+## API — Classes
+
+### Variantes de cor
+
+| Classe completa | Tokens usados | Uso recomendado |
+|---|---|---|
+| `tc-badge tc-badge-primary` | `--c-primary-300 / 400 / 700` | Informação principal — identificação de categoria |
+| `tc-badge tc-badge-success` | `--c-success-300 / 400 / 700` | Confirmação — status ativo, aprovado, concluído |
+| `tc-badge tc-badge-danger` | `--c-danger-300 / 400 / 700` | Alerta crítico — erro, expirado, rejeitado |
+| `tc-badge tc-badge-alert` | `--c-alert-300 / 400 / 700` | Atenção — pendente, em revisão |
+| `tc-badge tc-badge-info` | `--c-info-300 / 400 / 700` | Informativo — novidade, dica |
+| `tc-badge tc-badge-neutral` | `--c-neutral-200 / 300 / 600` | Neutro — rascunho, inativo |
+
+---
+
+### Estilo solid — `.tc-badge-solid`
+
+Adicione `.tc-badge-solid` junto à classe de cor para obter fundo cheio em vez do estilo suave padrão.
+
+```html
+<span class="tc-badge tc-badge-solid tc-badge-primary">Label</span>
+```
+
+---
+
+### Tamanhos
+
+| Modificador | `padding` | `font-size` |
+|---|---|---|
+| `tc-badge-sm` | `1px 7px` | `0.6875rem` |
+| *(padrão)* | `2px 10px` | `0.75rem` |
+| `tc-badge-lg` | `4px 14px` | `0.875rem` |
+
+---
+
+### Estado desabilitado — `.tc-badge-disabled`
+
+Aplique `.tc-badge-disabled` para reduzir a opacidade e bloquear interação do usuário. Compatível com todas as variantes de cor.
+
+---
+
+## Exemplos de Uso
+
+### Uso Básico
+
+```html
+<!-- Filled (padrão) -->
+<span class="tc-badge tc-badge-primary">Primary</span>
+<span class="tc-badge tc-badge-success">Ativo</span>
+<span class="tc-badge tc-badge-danger">Expirado</span>
+<span class="tc-badge tc-badge-alert">Pendente</span>
+<span class="tc-badge tc-badge-info">Novidade</span>
+<span class="tc-badge tc-badge-neutral">Rascunho</span>
+
+<!-- Solid (fundo cheio) -->
+<span class="tc-badge tc-badge-solid tc-badge-primary">Design</span>
+<span class="tc-badge tc-badge-solid tc-badge-success">Frontend</span>
+
+<!-- Tamanhos -->
+<span class="tc-badge tc-badge-primary tc-badge-sm">Pequeno</span>
+<span class="tc-badge tc-badge-primary">Padrão</span>
+<span class="tc-badge tc-badge-primary tc-badge-lg">Grande</span>
+
+<!-- Desabilitado -->
+<span class="tc-badge tc-badge-primary tc-badge-disabled">Desabilitado</span>
+```
+
+---
+
+### Uso Avançado
+
+#### Status de pedido em tabela
+
+```html
+<table>
+  <tbody>
+    <tr>
+      <td>Pedido #1042</td>
+      <td><span class="tc-badge tc-badge-alert">Pendente</span></td>
+    </tr>
+    <tr>
+      <td>Pedido #1043</td>
+      <td><span class="tc-badge tc-badge-primary">Em análise</span></td>
+    </tr>
+    <tr>
+      <td>Pedido #1044</td>
+      <td><span class="tc-badge tc-badge-success">Aprovado</span></td>
+    </tr>
+    <tr>
+      <td>Pedido #1045</td>
+      <td><span class="tc-badge tc-badge-danger">Cancelado</span></td>
+    </tr>
+  </tbody>
+</table>
+```
+
+#### Categorias com solid em lista de cards
+
+```html
+<div class="card">
+  <h4 class="tc-title">Componente de Botão</h4>
+  <div style="display: flex; gap: 6px; margin-top: 8px;">
+    <span class="tc-badge tc-badge-solid tc-badge-primary">Design</span>
+    <span class="tc-badge tc-badge-solid tc-badge-success">Frontend</span>
+    <span class="tc-badge tc-badge-solid tc-badge-info">Documentado</span>
+  </div>
+</div>
+```
+
+#### Badge dinâmico com Angular — class binding
+
+```html
+<span
+  class="tc-badge"
+  [ngClass]="{
+    'tc-badge-success': status === 'ativo',
+    'tc-badge-danger':  status === 'inativo',
+    'tc-badge-alert':   status === 'pendente',
+    'tc-badge-neutral': status === 'rascunho'
+  }"
+>
+  {{ status | titlecase }}
+</span>
+```
+
+```ts
+export class ExampleComponent {
+  status: 'ativo' | 'inativo' | 'pendente' | 'rascunho' = 'pendente';
+}
+```
+
+#### Badge para contagem (notificações)
+
+```html
+<div style="position: relative; display: inline-flex;">
+  <button class="tc-btn tc-btn-outline-neutral">Notificações</button>
+  <span class="tc-badge tc-badge-solid tc-badge-danger tc-badge-sm"
+        style="position: absolute; top: -6px; right: -6px;">
+    3
+  </span>
+</div>
+```