@dev-tcloud/tcloud-ui 6.14.3 → 6.17.0

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

@@ -0,0 +1,139 @@
+# Tipografia — Utilitários de Texto
+
+## Características
+
+- Sistema de classes utilitárias para estilização de texto, sem dependência de componente Angular — aplicáveis diretamente em qualquer tag HTML.
+- Classes de **tamanho** prefixadas com `.f-*` (ex: `.f-16`), cobrindo da escala micro (0.5rem) ao display grande (3.5rem).
+- Classes de **peso** prefixadas com `.font-*` (ex: `.font-bold`), mapeando os cinco níveis tipográficos do projeto.
+- Classes de **cor** seguindo o padrão `.text-{cor}-{tom}` (ex: `.text-neutral-700`), vinculadas aos tokens CSS de design.
+- Não há componente Angular envolvido — as classes são fornecidas pelo stylesheet global do projeto e aplicadas diretamente no HTML.
+
+## 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 Utilitárias
+
+### Tags e classes padrão recomendadas
+
+| Tag HTML | Classes recomendadas | Uso |
+|---|---|---|
+| `<p>` | `f-16 font-regular` | Parágrafo — corpo de texto principal |
+| `<label>` | `f-14 font-semibold` | Rótulo de campo — formulários e inputs |
+| `<span>` | `f-16 font-regular` | Texto inline — destaques dentro de parágrafo |
+| `<small>` | `f-12 font-regular` | Texto auxiliar — legendas, dicas, metadados |
+| `<strong>` | `f-16 font-bold` | Ênfase forte — palavras-chave em negrito |
+| `<em>` | `f-16 font-regular` | Ênfase suave — citações e termos técnicos |
+| `<code>` | `f-14 font-regular` | Código inline — nomes de classes e variáveis |
+
+---
+
+### Tamanhos — `.f-*`
+
+| Classe | Valor | Uso recomendado |
+|---|---|---|
+| `.f-08` | `0.5rem` | Micro — badges, tooltips |
+| `.f-10` | `0.625rem` | Extra-pequeno — carimbo, meta |
+| `.f-12` | `0.75rem` | Pequeno — legenda, auxiliar |
+| `.f-14` | `0.875rem` | Base — labels, inputs |
+| `.f-16` | `1rem` | Padrão — corpo de texto |
+| `.f-20` | `1.25rem` | Médio — subtítulos de bloco |
+| `.f-24` | `1.5rem` | Grande — leads, destaques |
+| `.f-32` | `2rem` | Extra-grande — headings de seção |
+| `.f-40` | `2.5rem` | Título — pages principais |
+| `.f-48` | `3rem` | Display — hero sections |
+| `.f-56` | `3.5rem` | Display grande — landing pages |
+
+---
+
+### Pesos — `.font-*`
+
+| Classe | `font-weight` | Uso recomendado |
+|---|---|---|
+| `.font-light` | `200` | Fino — decorativo, grandes tamanhos |
+| `.font-regular` | `300` | Regular — corpo de texto padrão |
+| `.font-semibold` | `400` | Semi-negrito — labels e botões |
+| `.font-bold` | `500` | Negrito — títulos e destaques |
+| `.font-black` | `600` | Extra-negrito — impacto visual |
+
+---
+
+### Cores de texto — `.text-{cor}-{tom}`
+
+| Classe | Token CSS | Uso recomendado |
+|---|---|---|
+| `.text-neutral-700` | `--c-neutral-700` | Texto principal — padrão do body |
+| `.text-neutral-500` | `--c-neutral-500` | Texto secundário — descrições, labels |
+| `.text-neutral-400` | `--c-neutral-400` | Texto desabilitado / placeholder |
+| `.text-primary-500` | `--c-primary-500` | Texto de ação / links primários |
+| `.text-primary-600` | `--c-primary-600` | Texto primário com mais contraste |
+| `.text-danger-500` | `--c-danger-500` | Erro — mensagens de validação |
+| `.text-alert-500` | `--c-alert-500` | Aviso — atenção do usuário |
+| `.text-success-500` | `--c-success-500` | Sucesso — confirmações e feedback |
+| `.text-info-500` | `--c-info-500` | Informação — dicas e contexto |
+
+---
+
+## Exemplos de Uso
+
+### Uso Básico
+
+```html
+<!-- Parágrafo padrão -->
+<p class="f-16 font-regular text-neutral-700">Texto corrido do parágrafo.</p>
+
+<!-- Rótulo de campo de formulário -->
+<label class="f-14 font-semibold text-neutral-700">Nome completo</label>
+
+<!-- Texto auxiliar / legenda -->
+<small class="f-12 font-regular text-neutral-500">Última atualização: hoje</small>
+
+<!-- Código inline -->
+<code class="f-14 font-regular text-primary-500">.tc-btn-primary</code>
+```
+
+---
+
+### Uso Avançado
+
+#### Hierarquia tipográfica combinada
+
+```html
+<p class="f-16 font-regular text-neutral-700">
+  Parágrafo padrão com <strong class="font-bold">negrito</strong>
+  e <em class="font-regular text-neutral-500">itálico suave</em>.
+</p>
+```
+
+#### Feedback semântico por cor
+
+```html
+<p class="f-16 font-regular text-danger-500">Mensagem de erro — campo obrigatório.</p>
+<p class="f-16 font-regular text-success-500">Operação realizada com sucesso.</p>
+<p class="f-16 font-regular text-alert-500">Atenção: verifique os dados antes de continuar.</p>
+<p class="f-16 font-regular text-info-500">Dica: este campo aceita CPF ou CNPJ.</p>
+```
+
+#### Escala de display para headings
+
+```html
+<p class="f-40 font-bold text-neutral-700">Título principal da página</p>
+<p class="f-24 font-semibold text-neutral-700">Subtítulo de seção</p>
+<p class="f-16 font-regular text-neutral-500">Descrição de apoio ao conteúdo.</p>
+```
+
+#### Texto desabilitado / placeholder
+
+```html
+<span class="f-14 font-regular text-neutral-400">Nenhum item selecionado</span>
+```

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

@@ -0,0 +1,118 @@
+# Tipografia — `.tc-title`
+
+## Características
+
+- Classe tipográfica aplicada às tags `h1`–`h6` para padronizar a hierarquia visual de títulos no projeto.
+- Cada nível herda automaticamente a cor do tema via `var(--c-neutral-700)`, adaptando-se a temas claro e escuro.
+- Remove margem padrão do browser e define `line-height` compacto para títulos.
+- Herda a fonte definida no `body`, mantendo consistência com o design system.
+- Não há componente Angular envolvido — `.tc-title` é uma classe CSS global aplicada diretamente nas tags de heading.
+
+## Instalação
+
+A classe é fornecida 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 — Variantes por Tag
+
+| Tag | `font-size` | `font-weight` | `letter-spacing` | Uso recomendado |
+|---|---|---|---|---|
+| `h1` | `2.5rem` | `700` | `-0.03em` | Título principal de página |
+| `h2` | `2rem` | `700` | `-0.02em` | Título de seção |
+| `h3` | `1.5rem` | `600` | `-0.01em` | Subtítulo de seção |
+| `h4` | `1.25rem` | `600` | `0` | Título de bloco / card |
+| `h5` | `1rem` | `600` | `0` | Título de grupo interno |
+| `h6` | `0.875rem` | `600` | `0.01em` | Label de categoria (uppercase) |
+
+---
+
+## Propriedades comuns a todas as variantes
+
+| Propriedade CSS | Valor | Descrição |
+|---|---|---|
+| `color` | `var(--c-neutral-700)` | Cor adaptável ao tema claro/escuro |
+| `line-height` | `1.2` | Altura de linha compacta para títulos |
+| `margin` | `0` | Remove margem padrão do browser |
+| `font-family` | `inherit` | Herda a fonte definida no `body` |
+
+---
+
+## Exemplos de Uso
+
+### Uso Básico
+
+```html
+<h1 class="tc-title">Título principal</h1>
+<h2 class="tc-title">Título de seção</h2>
+<h3 class="tc-title">Subtítulo</h3>
+<h4 class="tc-title">Título de card</h4>
+<h5 class="tc-title">Título interno</h5>
+<h6 class="tc-title">Label de categoria</h6>
+```
+
+---
+
+### Uso Avançado
+
+#### Hierarquia de página completa
+
+```html
+<h1 class="tc-title">Gestão de Usuários</h1>
+<p class="f-16 font-regular text-neutral-500">Gerencie os usuários e permissões do sistema.</p>
+
+<section>
+  <h2 class="tc-title">Usuários ativos</h2>
+
+  <div>
+    <h3 class="tc-title">Filtros</h3>
+    <!-- conteúdo de filtros -->
+  </div>
+
+  <div>
+    <h3 class="tc-title">Resultados</h3>
+    <!-- listagem -->
+  </div>
+</section>
+```
+
+#### Título em card
+
+```html
+<div class="tc-card">
+  <h4 class="tc-title">Resumo financeiro</h4>
+  <p class="f-14 font-regular text-neutral-500">Período: abril 2026</p>
+</div>
+```
+
+#### Combinação com classes de cor utilitárias
+
+```html
+<!-- Título com cor semântica de alerta -->
+<h3 class="tc-title text-danger-500">Atenção: ação irreversível</h3>
+
+<!-- Título com cor primária para destaque -->
+<h2 class="tc-title text-primary-500">Novo recurso disponível</h2>
+```
+
+#### Label de categoria com `h6`
+
+```html
+<h6 class="tc-title">Informações pessoais</h6>
+<div>
+  <!-- campos do formulário -->
+</div>
+
+<h6 class="tc-title">Endereço</h6>
+<div>
+  <!-- campos de endereço -->
+</div>
+```

package/docs/tcloud-ui-tcloud-form.md

@@ -0,0 +1,55 @@
+# Tcloud Form
+
+## Características
+
+A diretiva `tcloudForm` aplica classes CSS dinâmicas a elementos de formulário com base no layout ativo do sistema. Quando o layout é `modern`, a diretiva remove classes legadas (`form-control`, `tc-form-control`) e aplica a classe `tc-rev-input-control`. Suporta a opção `fullWidth` para expandir o input em toda a largura disponível. No layout `classic`, a diretiva não realiza alterações.
+
+## Instalação
+
+Importe o `TCloudUiModule` ou a diretiva standalone `TCloudUiFormDirective`:
+
+```typescript
+import { TCloudUiModule } from 'tcloud-ui';
+// ou
+import { TCloudUiFormDirective } from 'tcloud-ui';
+```
+
+## API
+
+### Inputs
+
+| Nome        | Tipo      | Descrição                                                       | Valor Default |
+| ----------- | --------- | --------------------------------------------------------------- | ------------- |
+| `fullWidth` | `boolean` | Adiciona a classe `tc-rev-input-control--full-width` ao elemento. | `false`       |
+
+## Exemplos de Uso
+
+### Uso Básico
+
+```html
+<input type="text" tcloudForm placeholder="Input com tcloudForm" />
+```
+
+### Uso Avançado
+
+Input com largura total:
+
+```html
+<input type="text" tcloudForm [fullWidth]="true" placeholder="Input full width" />
+```
+
+Aplicando em um select:
+
+```html
+<select tcloudForm>
+  <option value="">Selecione...</option>
+  <option value="1">Opção 1</option>
+  <option value="2">Opção 2</option>
+</select>
+```
+
+Aplicando em um textarea:
+
+```html
+<textarea tcloudForm [fullWidth]="true" placeholder="Descrição..."></textarea>
+```

package/docs/tcloud-ui-toast.md

@@ -0,0 +1,83 @@
+# TCloud UI Toast
+
+Componente Angular standalone para exibir notificações breves com ícone e conteúdo projetado, suportando tamanhos e variações de cor.
+
+## Características
+
+- ✅ Inputs reativos (`input()`) para `type`, `size` e `fullWidth`
+- ✅ Suporte a quatro tipos: `info`, `success`, `alert`, `danger`
+- ✅ Três tamanhos: `sm`, `md`, `lg`, ajustando padding e tipografia
+- ✅ Área de ícone e conteúdo via projeção (`[icon]` e conteúdo padrão)
+- ✅ Opcionais: expandir conteúdo com `fullWidth`
+- ✅ Standalone e 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 { TCloudUiToastComponent } from 'projects/tcloud-ui/src/lib/_modules/tcloud-ui-toast/tcloud-ui-toast.component';
+
+@Component({
+  standalone: true,
+  imports: [TCloudUiToastComponent]
+})
+export class MyStandaloneComponent {}
+```
+
+## Uso Básico
+
+```html
+<tcloud-ui-toast type="success" size="lg">
+  <i class="fas fa-circle-check" icon></i>
+  Operação concluída com sucesso.
+</tcloud-ui-toast>
+```
+
+## Uso Avançado
+
+Controle de largura e tipo dinâmicos:
+
+```typescript
+export class ToastDemoComponent {
+  toastType: 'info' | 'success' | 'alert' | 'danger' = 'info';
+  isFullWidth = true;
+}
+```
+
+```html
+<tcloud-ui-toast
+  [type]="toastType"
+  size="md"
+  [fullWidth]="isFullWidth">
+  <span icon>ℹ️</span>
+  Atualize os campos pendentes antes de prosseguir.
+</tcloud-ui-toast>
+```
+
+## API
+
+### Componente: `tcloud-ui-toast`
+
+#### Inputs
+
+| Nome | Tipo | Descrição | Valor Default |
+|------|------|-----------|---------------|
+| `type` | `'info' \| 'success' \| 'alert' \| 'danger'` | Define a paleta da notificação. | `'info'` |
+| `size` | `'sm' \| 'md' \| 'lg'` | Ajusta padding e tipografia. | `'md'` |
+| `fullWidth` | `boolean` | Faz o conteúdo ocupar todo o espaço restante na linha. | `false` |
+
+#### Outputs
+
+Nenhum output público disponível.

package/docs/tcloud-ui-tooltip.md

@@ -0,0 +1,88 @@
+# TCloud UI Tooltip
+
+Diretiva Angular standalone para exibir tooltips posicionados em quatro direções, suportando disparo por hover ou clique e atualização dinâmica de conteúdo.
+
+## Características
+
+- ✅ Suporte a modos `hover` (padrão) e `click`, com fechamento por clique externo
+- ✅ Posicionamento automático em `top`, `bottom`, `left` ou `right`, recalculado ao abrir/atualizar
+- ✅ Conteúdo aceita texto ou HTML; atualização em tempo real quando o tooltip já está visível
+- ✅ Marcações leves: adiciona elementos no `document.body` e remove ao sair/fechar
+- ✅ Disponível via `TCloudUiModule` ou importável como diretiva standalone
+
+## 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 a diretiva standalone:
+
+```typescript
+import { TCloudUiTooltipDirective } from 'projects/tcloud-ui/src/lib/_directives/tooltip/tooltip.directive';
+
+@Component({
+  standalone: true,
+  imports: [TCloudUiTooltipDirective]
+})
+export class MyStandaloneComponent {}
+```
+
+## Uso Básico
+
+```html
+<span TCtooltip="Tooltip TOP" TCdirection="top">Topo</span>
+<span TCtooltip="Tooltip RIGHT" TCdirection="right">Direita</span>
+<span TCtooltip="Tooltip BOTTOM" TCdirection="bottom">Base</span>
+<span TCtooltip="Tooltip LEFT" TCdirection="left">Esquerda</span>
+```
+
+## Uso Avançado
+
+Tooltip acionado por clique com conteúdo carregado de forma assíncrona:
+
+```typescript
+export class TooltipDemoComponent {
+  tooltipContent = '';
+
+  loadTooltip() {
+    this.tooltipContent = "<i class='fa fa-spinner fa-spin'></i>";
+    setTimeout(() => {
+      this.tooltipContent = 'Tooltip carregado!';
+    }, 3000);
+  }
+}
+```
+
+```html
+<span
+  [TCtooltip]="tooltipContent"
+  TCdirection="top"
+  tooltipMode="click"
+  (click)="loadTooltip()">
+  Clique para abrir
+</span>
+```
+
+## API
+
+### Diretiva: `TCtooltip`
+
+#### Inputs
+
+| Nome | Tipo | Descrição | Valor Default |
+|------|------|-----------|---------------|
+| `TCtooltip` | `string | HTMLElement | TemplateRef | any` | Conteúdo exibido no tooltip; aceita texto ou HTML. | `''` |
+| `TCdirection` | `'top' | 'bottom' | 'left' | 'right'` | Direção de exibição do tooltip. | `'top'` |
+| `tooltipMode` | `'hover' | 'click'` | Define se o tooltip abre ao passar o mouse ou ao clicar. | `'hover'` |
+
+#### Outputs
+
+Nenhum output público disponível.