angular-visuals 0.1.0

package/README.md

@@ -0,0 +1,200 @@
+# Angular Visuals
+
+Angular Visuals é uma biblioteca de componentes standalone para Angular, criada para aplicações que precisam de uma base visual consistente sem abrir mão da composição nativa do framework.
+
+A biblioteca oferece estilos modernos baseados em uma paleta de cores inspirada no Tailwind, tokens CSS para temas claro e escuro, componentes reutilizáveis para formulários, layout, navegação, feedback e mídia, além de um registro interno de ícones SVG.
+
+> O pacote ainda está em desenvolvimento e será publicado futuramente no npm. Os comandos abaixo mostram o fluxo de instalação planejado.
+
+## Instalação
+
+Depois da publicação, instale a biblioteca e suas dependências peer:
+
+```bash
+npm install angular-visuals
+```
+
+A biblioteca usa Angular e Angular CDK como `peerDependencies`. Em uma aplicação Angular compatível, importe os estilos globais uma única vez, por exemplo em `src/styles.css`:
+
+```css
+@import "angular-visuals/styles/angular-visuals.css";
+```
+
+## Configuração
+
+Registre `provideAngularVisuals` no `ApplicationConfig`. `mode` aceita `light`, `dark` ou `system`, e `defaultVariant` define a variante de cor padrão dos componentes:
+
+```ts
+import { ApplicationConfig } from '@angular/core';
+import { provideAngularVisuals } from 'angular-visuals';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideAngularVisuals({
+      theme: {
+        mode: 'system',
+        defaultVariant: 'orange',
+      },
+    }),
+  ],
+};
+```
+
+Os componentes são standalone e podem ser importados diretamente no componente consumidor:
+
+```ts
+import { Component } from '@angular/core';
+import { AvBadge, AvButton, AvIcon, AvInput } from 'angular-visuals';
+
+@Component({
+  standalone: true,
+  imports: [AvBadge, AvButton, AvIcon, AvInput],
+  template: `
+    <button av-button variant="orange" icon="check">Salvar</button>
+    <span av-badge variant="green">Ativo</span>
+    <av-input label="Nome" placeholder="Digite seu nome" />
+  `,
+})
+export class ExampleComponent {}
+```
+
+## Componentes disponíveis
+
+| Categoria | Componentes |
+| --- | --- |
+| Base | `AvBadge`, `AvButton`, `AvIcon` |
+| Formulários | `AvForm`, `AvInput`, `AvSelect`, `AvMultiSelect`, `AvCheckbox`, `AvCurrencyInput`, `AvDateTimePicker`, `AvSwitch`, `AvSlider`, `AvFileUpload`, `AvTextArea` |
+| Layout e dados | `AvGrid`, `AvTable`, `AvPaginator` |
+| Navegação | `AvSidenav`, `AvNavLink`, `AvDropdown`, `AvTabs`, `AvTab`, `AvStepper`, `AvStep` |
+| Feedback | `AvProgressBar`, `AvProgressBarCircle` |
+| Mídia | `AvCarousel`, `AvCarouselItem` |
+| Overlay | `AvTooltip` |
+| Primitives | `AvText` |
+
+### Primitives
+
+`AvText` exibe texto com transições `fade` e `slide`. É útil para nomes de arquivos, contadores, mensagens curtas e estados de carregamento:
+`AvStack` — layout vertical.
+`AvInline` — layout horizontal.
+`AvCluster` — layout inline com wrap para ações e tags.
+`AvDivider` — separador para menus, diálogos e layouts.
+
+
+```html
+<av-text [text]="status" animation="fade" />
+```
+
+### Navegação lateral
+
+`AvSidenav` cria uma navegação lateral responsiva. Abaixo do breakpoint configurado, ele entra em modo drawer; para habilitar abrir e fechar, use `toggleable` e passe um botão com `#toggleTrigger`.
+
+```html
+<button #toggleTrigger type="button" av-button icon="menu">Menu</button>
+
+<av-sidenav toggleable [toggleTrigger]="toggleTrigger" variant="orange">
+  <av-nav-link label="Início" icon="search" href="/" active />
+  <av-nav-link label="Agenda" icon="calendar_today" href="/agenda" badge="3" />
+
+  <av-dropdown label="Financeiro" icon="payments">
+    <av-nav-link label="Receitas" href="/financeiro/receitas" />
+    <av-nav-link label="Despesas" href="/financeiro/despesas" />
+  </av-dropdown>
+</av-sidenav>
+```
+
+## Serviços
+
+### `ThemeService`
+
+Controla o tema em runtime. O modo `system` acompanha a preferência de tema do sistema e a biblioteca aplica `data-av-theme="light"` ou `data-av-theme="dark"` no elemento raiz do documento.
+
+```ts
+import { Component, inject } from '@angular/core';
+import { ThemeService } from 'angular-visuals';
+
+@Component({
+  template: `
+    <button type="button" (click)="useLight()">Claro</button>
+    <button type="button" (click)="useDark()">Escuro</button>
+    <button type="button" (click)="useSystem()">Sistema</button>
+  `,
+})
+export class ThemeControls {
+  private readonly theme = inject(ThemeService);
+
+  useLight() { this.theme.setMode('light'); }
+  useDark() { this.theme.setMode('dark'); }
+  useSystem() { this.theme.setMode('system'); }
+}
+```
+
+### `AvIconRegistry`
+
+O registro já inclui os ícones padrão e loaders animados da biblioteca. Também é possível registrar SVGs próprios em runtime, consultar um ícone ou obter um catálogo completo:
+
+> **Atenção:** ícones registrados são renderizados automaticamente com `1em × 1em`, relativo ao `font-size` herdado.
+
+```ts
+import { inject } from '@angular/core';
+import { AvIconRegistry } from 'angular-visuals';
+
+const iconRegistry = inject(AvIconRegistry);
+
+iconRegistry.registerIcon('custom-icon', '<svg viewBox="0 0 24 24">...</svg>');
+
+const icon = iconRegistry.getIcon('custom-icon');
+const iconNames = iconRegistry.getIconNames();
+const icons = iconRegistry.getIcons(); // { name, svg }[]
+```
+
+Depois de registrado, o ícone pode ser usado pelos componentes que aceitam nome de ícone, como `AvIcon` e `AvButton`:
+
+```html
+<span av-icon name="custom-icon"></span>
+<button av-button icon="custom-icon">Ação</button>
+```
+
+## Roadmap
+### Fase 1: Feedback e primitives
+
+1. `AvSpinner` — loading indeterminado simples.
+2. `AvSkeleton` — estado de carregamento reutilizável.
+3. `AvAlert` — feedback com `variant`, `appearance` e `AvIcon`.
+4. `AvEmptyState` — estado vazio para tabelas, selects, árvores e outras telas.
+9. `AvVisuallyHidden` — conteúdo visualmente oculto para acessibilidade.
+
+
+
+10. `AvToast` — feedback temporário em overlay.
+11. `ToastService` — API programática para exibir toasts.
+12. `AvDialog` — base para overlays complexos.
+13. `AvPopover` — conteúdo contextual usando a infraestrutura de overlay.
+14. `AvDrawer` — variação estrutural de diálogo.
+
+### Fase 3: Componentes básicos
+
+15. `AvAccordion` — conteúdo expansível.
+16. `AvBreadcrumb` — navegação hierárquica.
+17. `AvRadioGroup` e `AvRadio` — controles de seleção única para completar os forms.
+
+### Fase 4: Componentes compostos
+
+18. `AvCombobox` — input, overlay, seleção e busca.
+19. `AvDateRangePicker` — evolução do `AvDateTimePicker`.
+20. `AvDataTable` — tabela com ordenação, filtros, seleção, loading, estado vazio e paginação.
+
+### Fase 5: Componentes avançados
+
+21. `AvTimeline` — visualização de eventos em sequência.
+22. `AvTreeView` — árvore com seleção, expansão e teclado.
+23. `AvCommandPalette` — busca e navegação por teclado composta por diálogo, input, ícones e estado vazio.
+24. `AvIconPicker` — catálogo de ícones usando registry, combobox, grid e popover.
+
+### Fase 6: Conveniências
+
+25. `AvHeading` — tipografia semântica conveniente.
+26. `AvBox` — primitive de composição para casos simples.
+27. `AvCenter` — centralização de conteúdo.
+28. `AvSpacer` — espaçamento explícito em layouts.
+
+Componentes adicionais que podem entrar antes da versão `1.0`, conforme as necessidades dos consumidores: `AvAvatar`, `AvChip` ou `AvTag`, `AvButtonGroup`, `AvInputGroup` e `AvKbd`.

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "angular-visuals",
+  "version": "0.1.0",
+  "description": "Angular UI component library with theming, animations and SVG icons.",
+  "license": "MIT",
+  "keywords": [
+    "angular",
+    "ui",
+    "components",
+    "design-system",
+    "angular-components"
+  ],
+  "sideEffects": [
+    "src/styles/angular-visuals.css"
+  ],
+  "peerDependencies": {
+    "@angular/common": ">=21.0.0",
+    "@angular/core": ">=21.0.0",
+    "@angular/cdk": ">=21.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "files": [
+    "src/styles"
+  ],
+  "exports": {
+    "./styles/angular-visuals.css": "./src/styles/angular-visuals.css",
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/angular-visuals.d.ts",
+      "default": "./fesm2022/angular-visuals.mjs"
+    }
+  },
+  "module": "fesm2022/angular-visuals.mjs",
+  "typings": "types/angular-visuals.d.ts",
+  "type": "module"
+}

package/src/styles/angular-visuals.css

@@ -0,0 +1,55 @@
+@import "./palette.css";
+@import "./animations.css";
+@import "./typography.css";
+@import "./theme.css";
+
+
+
+.bg-content {
+  background-color: var(--av-color-bg);
+  color: var(--av-color-text);
+  transition:
+    background-color 150ms ease,
+    color 150ms ease;
+}
+
+html,
+body {
+  width: 100dvw;
+  height: 100dvh;
+}
+
+*::-webkit-scrollbar {
+  display: none;
+  width: 2px;
+  height: 2px;
+}
+
+*::-webkit-scrollbar-track {
+  background: var(--av-primary-200);
+  border-radius: 3px;
+}
+
+*::-webkit-scrollbar-thumb {
+  background: var(--av-primary-300);
+  border-radius: 3px;
+}
+
+[data-av-theme="dark"] {
+  *::-webkit-scrollbar-track {
+    background: var(--av-primary-950);
+    border-radius: 3px;
+  }
+
+  *::-webkit-scrollbar-thumb {
+    background: var(--av-primary-900);
+    border-radius: 3px;
+  }
+
+}
+
+@supports not selector(::-webkit-scrollbar) {
+  body {
+    scrollbar-color: var(--av-primary-900) var(--av-primary-950);
+  }
+}

package/src/styles/palette.css

@@ -0,0 +1,291 @@
+:root {
+  /* Black & White */
+  --av-black: #000000;
+  --av-white: #ffffff;
+
+  /* Slate */
+  --av-slate-50: #f8fafc;
+  --av-slate-100: #f1f5f9;
+  --av-slate-200: #e2e8f0;
+  --av-slate-300: #cbd5e1;
+  --av-slate-400: #94a3b8;
+  --av-slate-500: #64748b;
+  --av-slate-600: #475569;
+  --av-slate-700: #334155;
+  --av-slate-800: #1e293b;
+  --av-slate-900: #0f172a;
+  --av-slate-950: #020617;
+
+  /* Gray */
+  --av-gray-50: #f9fafb;
+  --av-gray-100: #f3f4f6;
+  --av-gray-200: #e5e7eb;
+  --av-gray-300: #d1d5db;
+  --av-gray-400: #9ca3af;
+  --av-gray-500: #6b7280;
+  --av-gray-600: #4b5563;
+  --av-gray-700: #374151;
+  --av-gray-800: #1f2937;
+  --av-gray-900: #111827;
+  --av-gray-950: #030712;
+
+  /* Zinc */
+  --av-zinc-50: #fafafa;
+  --av-zinc-100: #f4f4f5;
+  --av-zinc-200: #e4e4e7;
+  --av-zinc-300: #d4d4d8;
+  --av-zinc-400: #a1a1aa;
+  --av-zinc-500: #71717a;
+  --av-zinc-600: #52525b;
+  --av-zinc-700: #3f3f46;
+  --av-zinc-800: #27272a;
+  --av-zinc-900: #18181b;
+  --av-zinc-950: #09090b;
+
+  /* Neutral */
+  --av-neutral-50: #fafafa;
+  --av-neutral-100: #f5f5f5;
+  --av-neutral-200: #e5e5e5;
+  --av-neutral-300: #d4d4d4;
+  --av-neutral-400: #a3a3a3;
+  --av-neutral-500: #737373;
+  --av-neutral-600: #525252;
+  --av-neutral-700: #404040;
+  --av-neutral-800: #262626;
+  --av-neutral-900: #171717;
+  --av-neutral-950: #0a0a0a;
+
+  /* Stone */
+  --av-stone-50: #fafaf9;
+  --av-stone-100: #f5f5f4;
+  --av-stone-200: #e7e5e4;
+  --av-stone-300: #d6d3d1;
+  --av-stone-400: #a8a29e;
+  --av-stone-500: #78716c;
+  --av-stone-600: #57534e;
+  --av-stone-700: #44403c;
+  --av-stone-800: #292524;
+  --av-stone-900: #1c1917;
+  --av-stone-950: #0c0a09;
+
+  /* Red */
+  --av-red-50: #fef2f2;
+  --av-red-100: #fee2e2;
+  --av-red-200: #fecaca;
+  --av-red-300: #fca5a5;
+  --av-red-400: #f87171;
+  --av-red-500: #ef4444;
+  --av-red-600: #dc2626;
+  --av-red-700: #b91c1c;
+  --av-red-800: #991b1b;
+  --av-red-900: #7f1d1d;
+  --av-red-950: #450a0a;
+
+  /* Orange */
+  --av-orange-50: #fff7ed;
+  --av-orange-100: #ffedd5;
+  --av-orange-200: #fed7aa;
+  --av-orange-300: #fdba74;
+  --av-orange-400: #fb923c;
+  --av-orange-500: #f97316;
+  --av-orange-600: #ea580c;
+  --av-orange-700: #c2410c;
+  --av-orange-800: #9a3412;
+  --av-orange-900: #7c2d12;
+  --av-orange-950: #431407;
+
+  /* Amber */
+  --av-amber-50: #fffbeb;
+  --av-amber-100: #fef3c7;
+  --av-amber-200: #fde68a;
+  --av-amber-300: #fcd34d;
+  --av-amber-400: #fbbf24;
+  --av-amber-500: #f59e0b;
+  --av-amber-600: #d97706;
+  --av-amber-700: #b45309;
+  --av-amber-800: #92400e;
+  --av-amber-900: #78350f;
+  --av-amber-950: #451a03;
+
+  /* Yellow */
+  --av-yellow-50: #fefce8;
+  --av-yellow-100: #fef9c3;
+  --av-yellow-200: #fef08a;
+  --av-yellow-300: #fde047;
+  --av-yellow-400: #facc15;
+  --av-yellow-500: #eab308;
+  --av-yellow-600: #ca8a04;
+  --av-yellow-700: #a16207;
+  --av-yellow-800: #854d0e;
+  --av-yellow-900: #713f12;
+  --av-yellow-950: #422006;
+
+  /* Lime */
+  --av-lime-50: #f7fee7;
+  --av-lime-100: #ecfccb;
+  --av-lime-200: #d9f99d;
+  --av-lime-300: #bef264;
+  --av-lime-400: #a3e635;
+  --av-lime-500: #84cc16;
+  --av-lime-600: #65a30d;
+  --av-lime-700: #4d7c0f;
+  --av-lime-800: #3f6212;
+  --av-lime-900: #365314;
+  --av-lime-950: #1a2e05;
+
+  /* Green */
+  --av-green-50: #f0fdf4;
+  --av-green-100: #dcfce7;
+  --av-green-200: #bbf7d0;
+  --av-green-300: #86efac;
+  --av-green-400: #4ade80;
+  --av-green-500: #22c55e;
+  --av-green-600: #16a34a;
+  --av-green-700: #15803d;
+  --av-green-800: #166534;
+  --av-green-900: #14532d;
+  --av-green-950: #052e16;
+
+  /* Emerald */
+  --av-emerald-50: #ecfdf5;
+  --av-emerald-100: #d1fae5;
+  --av-emerald-200: #a7f3d0;
+  --av-emerald-300: #6ee7b7;
+  --av-emerald-400: #34d399;
+  --av-emerald-500: #10b981;
+  --av-emerald-600: #059669;
+  --av-emerald-700: #047857;
+  --av-emerald-800: #065f46;
+  --av-emerald-900: #064e3b;
+  --av-emerald-950: #022c22;
+
+  /* Teal */
+  --av-teal-50: #f0fdfa;
+  --av-teal-100: #ccfbf1;
+  --av-teal-200: #99f6e4;
+  --av-teal-300: #5eead4;
+  --av-teal-400: #2dd4bf;
+  --av-teal-500: #14b8a6;
+  --av-teal-600: #0d9488;
+  --av-teal-700: #0f766e;
+  --av-teal-800: #115e59;
+  --av-teal-900: #134e4a;
+  --av-teal-950: #042f2e;
+
+  /* Cyan */
+  --av-cyan-50: #ecfeff;
+  --av-cyan-100: #cffafe;
+  --av-cyan-200: #a5f3fc;
+  --av-cyan-300: #67e8f9;
+  --av-cyan-400: #22d3ee;
+  --av-cyan-500: #06b6d4;
+  --av-cyan-600: #0891b2;
+  --av-cyan-700: #0e7490;
+  --av-cyan-800: #155e75;
+  --av-cyan-900: #164e63;
+  --av-cyan-950: #083344;
+
+  /* Sky */
+  --av-sky-50: #f0f9ff;
+  --av-sky-100: #e0f2fe;
+  --av-sky-200: #bae6fd;
+  --av-sky-300: #7dd3fc;
+  --av-sky-400: #38bdf8;
+  --av-sky-500: #0ea5e9;
+  --av-sky-600: #0284c7;
+  --av-sky-700: #0369a1;
+  --av-sky-800: #075985;
+  --av-sky-900: #0c4a6e;
+  --av-sky-950: #082f49;
+
+  /* Blue */
+  --av-blue-50: #eff6ff;
+  --av-blue-100: #dbeafe;
+  --av-blue-200: #bfdbfe;
+  --av-blue-300: #93c5fd;
+  --av-blue-400: #60a5fa;
+  --av-blue-500: #3b82f6;
+  --av-blue-600: #2563eb;
+  --av-blue-700: #1d4ed8;
+  --av-blue-800: #1e40af;
+  --av-blue-900: #1e3a8a;
+  --av-blue-950: #172554;
+
+  /* Indigo */
+  --av-indigo-50: #eef2ff;
+  --av-indigo-100: #e0e7ff;
+  --av-indigo-200: #c7d2fe;
+  --av-indigo-300: #a5b4fc;
+  --av-indigo-400: #818cf8;
+  --av-indigo-500: #6366f1;
+  --av-indigo-600: #4f46e5;
+  --av-indigo-700: #4338ca;
+  --av-indigo-800: #3730a3;
+  --av-indigo-900: #312e81;
+  --av-indigo-950: #1e1b4b;
+
+  /* Violet */
+  --av-violet-50: #f5f3ff;
+  --av-violet-100: #ede9fe;
+  --av-violet-200: #ddd6fe;
+  --av-violet-300: #c4b5fd;
+  --av-violet-400: #a78bfa;
+  --av-violet-500: #8b5cf6;
+  --av-violet-600: #7c3aed;
+  --av-violet-700: #6d28d9;
+  --av-violet-800: #5b21b6;
+  --av-violet-900: #4c1d95;
+  --av-violet-950: #2e1065;
+
+  /* Purple */
+  --av-purple-50: #faf5ff;
+  --av-purple-100: #f3e8ff;
+  --av-purple-200: #e9d5ff;
+  --av-purple-300: #d8b4fe;
+  --av-purple-400: #c084fc;
+  --av-purple-500: #a855f7;
+  --av-purple-600: #9333ea;
+  --av-purple-700: #7e22ce;
+  --av-purple-800: #6b21a8;
+  --av-purple-900: #581c87;
+  --av-purple-950: #3b0764;
+
+  /* Fuchsia */
+  --av-fuchsia-50: #fdf4ff;
+  --av-fuchsia-100: #fae8ff;
+  --av-fuchsia-200: #f5d0fe;
+  --av-fuchsia-300: #f0abfc;
+  --av-fuchsia-400: #e879f9;
+  --av-fuchsia-500: #d946ef;
+  --av-fuchsia-600: #c026d3;
+  --av-fuchsia-700: #a21caf;
+  --av-fuchsia-800: #86198f;
+  --av-fuchsia-900: #701a75;
+  --av-fuchsia-950: #4a044e;
+
+  /* Pink */
+  --av-pink-50: #fdf2f8;
+  --av-pink-100: #fce7f3;
+  --av-pink-200: #fbcfe8;
+  --av-pink-300: #f472b6;
+  --av-pink-400: #f472b6;
+  --av-pink-500: #ec4899;
+  --av-pink-600: #db2777;
+  --av-pink-700: #be185d;
+  --av-pink-800: #9d174d;
+  --av-pink-900: #831843;
+  --av-pink-950: #500724;
+
+  /* Rose */
+  --av-rose-50: #fff1f2;
+  --av-rose-100: #ffe4e6;
+  --av-rose-200: #fecdd3;
+  --av-rose-300: #fda4af;
+  --av-rose-400: #fb7185;
+  --av-rose-500: #f43f5e;
+  --av-rose-600: #e11d48;
+  --av-rose-700: #be123c;
+  --av-rose-800: #9f1239;
+  --av-rose-900: #881337;
+  --av-rose-950: #4c0519;
+}

package/src/styles/theme.css

@@ -0,0 +1,50 @@
+:root,
+:root[data-av-theme="light"] {
+  color-scheme: light;
+
+  --av-color-bg: var(--av-neutral-50);
+  --av-color-surface: var(--av-white);
+  --av-color-surface-muted: var(--av-slate-100);
+  --av-color-surface-raised: var(--av-white);
+
+  --av-color-text: var(--av-slate-900);
+  --av-color-text-muted: var(--av-slate-600);
+  --av-color-text-subtle: var(--av-slate-400);
+  --av-color-text-inverse: var(--av-white);
+
+  --av-color-border: var(--av-slate-300);
+  --av-color-border-soft: var(--av-slate-200);
+  --av-color-border-hover: var(--av-slate-400);
+
+  --av-color-danger: var(--av-red-500);
+  --av-color-danger-text: var(--av-red-800);
+  --av-color-danger-soft: var(--av-red-50);
+
+  --av-shadow-raised: 0 20px 25px -5px rgb(15 23 42 / .10), 0 8px 10px -6px rgb(15 23 42 / .10);
+  --av-shadow-control: 0 1px 2px rgb(15 23 42 / .06);
+}
+
+:root[data-av-theme="dark"] {
+  color-scheme: dark;
+
+  --av-color-bg: var(--av-neutral-950);
+  --av-color-surface: var(--av-neutral-900);
+  --av-color-surface-muted: var(--av-neutral-800);
+  --av-color-surface-raised: var(--av-neutral-900);
+
+  --av-color-text: var(--av-neutral-100);
+  --av-color-text-muted: var(--av-neutral-400);
+  --av-color-text-subtle: var(--av-neutral-500);
+  --av-color-text-inverse: var(--av-neutral-950);
+
+  --av-color-border: var(--av-neutral-700);
+  --av-color-border-soft: var(--av-neutral-800);
+  --av-color-border-hover: var(--av-neutral-600);
+
+  --av-color-danger: var(--av-red-400);
+  --av-color-danger-text: var(--av-red-200);
+  --av-color-danger-soft: rgb(127 29 29 / .18);
+
+  --av-shadow-raised: 0 22px 40px rgb(0 0 0 / .46), 0 8px 16px rgb(0 0 0 / .28);
+  --av-shadow-control: 0 1px 2px rgb(0 0 0 / .24);
+}

package/src/styles/typography.css

@@ -0,0 +1,94 @@
+:root {
+  --av-radius-xs: 0.125rem;
+  --av-radius-sm: 0.25rem;
+  --av-radius-md: 0.375rem;
+  --av-radius-lg: 0.5rem;
+  --av-radius-xl: 0.75rem;
+  --av-radius-full: calc(infinity * 1px);
+
+  --av-gap-xs: 0.5rem;   /* 8px  (Tailwind gap-2) */
+  --av-gap-sm: 0.75rem;  /* 12px (Tailwind gap-3) */
+  --av-gap-md: 1rem;     /* 16px (Tailwind gap-4) */
+  --av-gap-lg: 1.5rem;   /* 24px (Tailwind gap-6) */
+  --av-gap-xl: 2rem;     /* 32px (Tailwind gap-8) */
+
+  /* Tamanhos para Avatars (Largura x Altura) */
+  --av-avatar-xs: 1.5rem;   /* 24px  (Tailwind w-6 h-6) */
+  --av-avatar-sm: 2rem;     /* 32px  (Tailwind w-8 h-8) */
+  --av-avatar-md: 2.5rem;   /* 40px  (Tailwind w-10 h-10 - Padrão do mercado) */
+  --av-avatar-lg: 3rem;     /* 48px  (Tailwind w-12 h-12) */
+  --av-avatar-xl: 4rem;     /* 64px  (Tailwind w-16 h-16) */
+
+  /* Tamanho de Fonte (Para Avatars com Iniciais) */
+  --av-avatar-text-xs: 0.75rem;  /* 12px */
+  --av-avatar-text-sm: 0.875rem; /* 14px */
+  --av-avatar-text-md: 1rem;     /* 16px */
+  --av-avatar-text-lg: 1.125rem; /* 18px */
+  --av-avatar-text-xl: 1.5rem;   /* 24px */
+}
+
+.av-text-xs {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+
+.av-text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.av-text-base {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
+.av-text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+
+.av-text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
+.av-text-2xl {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+
+.av-text-3xl {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+}
+
+.av-text-4xl {
+  font-size: 2.25rem;
+  line-height: 2.5rem;
+}
+
+.av-text-5xl {
+  font-size: 3rem;
+  line-height: 1;
+}
+
+.av-text-6xl {
+  font-size: 3.75rem;
+  line-height: 1;
+}
+
+.av-text-7xl {
+  font-size: 4.5rem;
+  line-height: 1;
+}
+
+.av-text-8xl {
+  font-size: 6rem;
+  line-height: 1;
+}
+
+.av-text-9xl {
+  font-size: 8rem;
+  line-height: 1;
+}