forlogic-core 2.0.2 → 2.0.4

package/docs/design-system/navigation.md

@@ -0,0 +1,599 @@
+<!-- ⚠️ ARQUIVO GERADO AUTOMATICAMENTE — NÃO EDITAR MANUALMENTE -->
+<!-- Fonte: src/design-system/docs/ | Regenerar: npx tsx scripts/generate-ds-docs.ts -->
+
+# Navegação
+
+Categoria: **Navegação** | 8 componentes
+
+### Breadcrumb
+
+Exibe o caminho até o recurso atual usando uma hierarquia de links.
+
+**Uso:**
+```tsx
+import { Link } from "react-router-dom"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "forlogic-core"
+
+// ✅ CORRETO: Usar asChild + Link para navegação SPA
+<Breadcrumb>
+  <BreadcrumbList>
+    <BreadcrumbItem>
+      <BreadcrumbLink asChild>
+        <Link to="/">Home</Link>
+      </BreadcrumbLink>
+    </BreadcrumbItem>
+    <BreadcrumbSeparator />
+    <BreadcrumbItem>
+      <BreadcrumbLink asChild>
+        <Link to="/componentes">Componentes</Link>
+      </BreadcrumbLink>
+    </BreadcrumbItem>
+    <BreadcrumbSeparator />
+    <BreadcrumbItem>
+      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+    </BreadcrumbItem>
+  </BreadcrumbList>
+</Breadcrumb>
+
+// ❌ ERRADO: Usar href diretamente (causa reload da página)
+<BreadcrumbLink href="/componentes">Componentes</BreadcrumbLink>
+```
+
+**Props:**
+| Prop | Tipo | Padrão | Descrição |
+|------|------|--------|-----------|
+| `Breadcrumb` | `nav` | - | Elemento raiz do breadcrumb. Renderiza um elemento nav com aria-label= |
+| `BreadcrumbList` | `ol` | - | Lista ordenada que contém os itens do breadcrumb. |
+| `BreadcrumbItem` | `li` | - | Item individual do breadcrumb. |
+| `BreadcrumbLink` | `a` | - | Link clicável do breadcrumb. Use asChild + Link para navegação SPA. |
+| `asChild` | `boolean` | false | Permite compor com Link do React Router para navegação SPA. |
+| `BreadcrumbPage` | `span` | - | Representa a página atual (não clicável). Possui aria-current= |
+| `BreadcrumbSeparator` | `li` | ChevronRight | Separador visual entre itens do breadcrumb. |
+| `BreadcrumbEllipsis` | `span` | - | Indica itens ocultos (reticências). Usado para breadcrumbs colapsados. |
+
+**Exemplos:**
+```tsx
+import { Link } from
+```
+```tsx
+<Breadcrumb>
+  <BreadcrumbList>
+    <BreadcrumbItem>
+      <BreadcrumbLink asChild>
+        <Link to=
+```
+
+**Acessibilidade:**
+- Usa elemento nav com aria-label=
+-  para identificação por leitores de tela.
+- Estrutura HTML semântica com lista ordenada (ol > li).
+- Página atual marcada com aria-current=
+-  e aria-disabled=
+- .
+- Separadores marcados com role=
+-  e aria-hidden=
+- .
+- BreadcrumbEllipsis inclui texto sr-only 
+-  para leitores de tela.
+- Links navegáveis por teclado com foco visível.
+- Segue padrão WAI-ARIA Breadcrumb.
+
+**Notas:**
+- ⚠️ OBRIGATÓRIO: Use asChild + Link do React Router para navegação SPA sem reload.
+- Use BreadcrumbPage para o item final (página atual) em vez de BreadcrumbLink.
+- Considere colapsar itens intermediários em telas menores usando BreadcrumbEllipsis.
+- Evite usar href diretamente - causa reload completo da página.
+
+> Fonte: `src\design-system\docs\components\BreadcrumbDoc.tsx`
+
+---
+
+### Context Menu
+
+Exibe um menu ao usuário — como um conjunto de ações ou funções — acionado por um clique com o botão direito do mouse.
+
+**Uso:**
+```tsx
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuTrigger,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+} from "forlogic-core"
+
+<ContextMenu>
+  <ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed">
+    Clique com o botão direito aqui
+  </ContextMenuTrigger>
+  <ContextMenuContent className="w-64">
+    <ContextMenuItem inset>
+      Voltar
+      <ContextMenuShortcut>⌘[</ContextMenuShortcut>
+    </ContextMenuItem>
+    <ContextMenuItem inset disabled>
+      Avançar
+      <ContextMenuShortcut>⌘]</ContextMenuShortcut>
+    </ContextMenuItem>
+    <ContextMenuItem inset>
+      Recarregar
+      <ContextMenuShortcut>⌘R</ContextMenuShortcut>
+    </ContextMenuItem>
+    <ContextMenuSub>
+      <ContextMenuSubTrigger inset>Mais Ferramentas</ContextMenuSubTrigger>
+      <ContextMenuSubContent className="w-48">
+        <ContextMenuItem>
+          Salvar Página Como...
+          <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>
+        </ContextMenuItem>
+        <ContextMenuItem>Criar Atalho...</ContextMenuItem>
+        <ContextMenuItem>Nomear Janela...</ContextMenuItem>
+        <ContextMenuSeparator />
+        <ContextMenuItem>Ferramentas do Desenvolvedor</ContextMenuItem>
+      </ContextMenuSubContent>
+    </ContextMenuSub>
+    <ContextMenuSeparator />
+    <ContextMenuCheckboxItem checked>
+      Mostrar Barra de Favoritos
+      <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>
+    </ContextMenuCheckboxItem>
+    <ContextMenuCheckboxItem>Mostrar URLs Completas</ContextMenuCheckboxItem>
+    <ContextMenuSeparator />
+    <ContextMenuRadioGroup value="pedro">
+      <ContextMenuLabel inset>Pessoas</ContextMenuLabel>
+      <ContextMenuRadioItem value="pedro">Pedro Duarte</ContextMenuRadioItem>
+      <ContextMenuRadioItem value="colm">Colm Tuite</ContextMenuRadioItem>
+    </ContextMenuRadioGroup>
+  </ContextMenuContent>
+</ContextMenu>
+```
+
+**Props:**
+| Prop | Tipo | Padrão | Descrição |
+|------|------|--------|-----------|
+| `ContextMenu` | `Component` | - | Componente raiz que envolve o trigger e o conteúdo do menu. |
+| `ContextMenuTrigger` | `Component` | - | Área que detecta o clique com botão direito para abrir o menu. Aceita asChild. |
+| `ContextMenuContent` | `Component` | - | Container para os itens do menu. Aceita alignOffset, sideOffset e className. |
+| `ContextMenuItem` | `Component` | - | Item básico do menu. Aceita inset, disabled e onSelect. |
+| `ContextMenuCheckboxItem` | `Component` | - | Item com checkbox. Aceita checked, onCheckedChange e disabled. |
+| `ContextMenuRadioGroup` | `Component` | - | Agrupa radio items. Aceita value e onValueChange. |
+| `ContextMenuRadioItem` | `Component` | - | Item de seleção única dentro de um RadioGroup. Requer value. |
+| `ContextMenuLabel` | `Component` | - | Rótulo não interativo para agrupar itens. Aceita inset. |
+| `ContextMenuSeparator` | `Component` | - | Linha divisória visual entre grupos de itens. |
+| `ContextMenuShortcut` | `Component` | - | Exibe atalho de teclado alinhado à direita do item. |
+| `ContextMenuSub` | `Component` | - | Container para submenu aninhado. |
+| `ContextMenuSubTrigger` | `Component` | - | Item que abre um submenu ao hover ou foco. Aceita inset. |
+| `ContextMenuSubContent` | `Component` | - | Conteúdo do submenu aninhado. |
+| `ContextMenuGroup` | `Component` | - | Agrupa itens relacionados para organização semântica. |
+
+**Acessibilidade:**
+- Abre com clique do botão direito ou tecla de menu de contexto (Shift+F10 ou tecla Menu)
+- Navegação completa por teclado usando setas direcionais
+- Enter ou Espaço para selecionar item focado
+- Escape fecha o menu e retorna foco ao elemento anterior
+- Suporte completo a WAI-ARIA com roles menu, menuitem, menuitemcheckbox e menuitemradio
+- Submenus acessíveis via seta direita (abrir) e seta esquerda (fechar)
+- Type-ahead: digitar caracteres foca no item correspondente
+- Foco visual claro nos itens durante navegação por teclado
+
+> Fonte: `src\design-system\docs\components\ContextMenuDoc.tsx`
+
+---
+
+### Dropdown Menu
+
+Exibe um menu ao usuário — como um conjunto de ações ou funções — acionado por um botão ou elemento interativo.
+
+**Uso:**
+```tsx
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  Button
+} from "forlogic-core"
+import { User, Settings, LogOut, ChevronDown } from "lucide-react"
+
+<DropdownMenu>
+  <DropdownMenuTrigger asChild>
+    <Button variant="outline">
+      Abrir Menu
+      <ChevronDown className="ml-2 h-4 w-4" />
+    </Button>
+  </DropdownMenuTrigger>
+  <DropdownMenuContent className="w-56">
+    <DropdownMenuLabel>Minha Conta</DropdownMenuLabel>
+    <DropdownMenuSeparator />
+    <DropdownMenuGroup>
+      <DropdownMenuItem>
+        <User className="mr-2 h-4 w-4" />
+        <span>Perfil</span>
+        <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
+      </DropdownMenuItem>
+      <DropdownMenuItem>
+        <Settings className="mr-2 h-4 w-4" />
+        <span>Configurações</span>
+      </DropdownMenuItem>
+    </DropdownMenuGroup>
+    <DropdownMenuSeparator />
+    <DropdownMenuItem>
+      <LogOut className="mr-2 h-4 w-4" />
+      <span>Sair</span>
+    </DropdownMenuItem>
+  </DropdownMenuContent>
+</DropdownMenu>
+```
+
+**Props:**
+| Prop | Tipo | Padrão | Descrição |
+|------|------|--------|-----------|
+| `DropdownMenu` | `Component` | - | Componente raiz que envolve o trigger e o conteúdo do menu. |
+| `DropdownMenuTrigger` | `Component` | - | Elemento que dispara a abertura do menu. Use asChild para renderizar um elemento personalizado. |
+| `DropdownMenuContent` | `Component` | - | Container para os itens do menu. Aceita align, sideOffset e className. |
+| `DropdownMenuItem` | `Component` | - | Item básico do menu. Aceita inset, disabled e onSelect. |
+| `DropdownMenuCheckboxItem` | `Component` | - | Item com checkbox. Aceita checked e onCheckedChange. |
+| `DropdownMenuRadioGroup` | `Component` | - | Agrupa radio items. Aceita value e onValueChange. |
+| `DropdownMenuRadioItem` | `Component` | - | Item de seleção única dentro de um RadioGroup. Requer value. |
+| `DropdownMenuLabel` | `Component` | - | Rótulo não interativo para agrupar itens. Aceita inset. |
+| `DropdownMenuSeparator` | `Component` | - | Linha divisória visual entre grupos de itens. |
+| `DropdownMenuShortcut` | `Component` | - | Exibe atalho de teclado alinhado à direita do item. |
+| `DropdownMenuGroup` | `Component` | - | Agrupa itens relacionados para organização semântica. |
+| `DropdownMenuSub` | `Component` | - | Container para submenu aninhado. |
+| `DropdownMenuSubTrigger` | `Component` | - | Item que abre um submenu ao hover ou foco. |
+| `DropdownMenuSubContent` | `Component` | - | Conteúdo do submenu aninhado. |
+| `DisabledMenuItem` | `Component` | - | Item desabilitado com tooltip explicativo. Aceita disabledReason para exibir motivo do bloqueio. |
+
+**Acessibilidade:**
+- Abre com clique, Enter ou Espaço no trigger
+- Navegação completa por teclado usando setas direcionais
+- Enter ou Espaço para selecionar item focado
+- Escape fecha o menu e retorna foco ao trigger
+- Tab navega para fora do menu (fechando-o)
+- Suporte completo a WAI-ARIA com roles menu, menuitem, menuitemcheckbox e menuitemradio
+- Submenus acessíveis via seta direita (abrir) e seta esquerda (fechar)
+- Type-ahead: digitar caracteres foca no item correspondente
+- Itens desabilitados exibem tooltip explicativo no hover
+
+> Fonte: `src\design-system\docs\components\DropdownMenuDoc.tsx`
+
+---
+
+### Menubar
+
+Barra de menu horizontal com submenus, checkboxes e radio items. Ideal para barras de navegação de aplicações desktop-like, seguindo padrões de aplicações nativas.
+
+**Uso:**
+```tsx
+import {
+  Menubar,
+  MenubarContent,
+  MenubarItem,
+  MenubarMenu,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarTrigger,
+  MenubarCheckboxItem,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+} from "forlogic-core"
+
+// Exemplo básico
+<Menubar>
+  <MenubarMenu>
+    <MenubarTrigger>Arquivo</MenubarTrigger>
+    <MenubarContent>
+      <MenubarItem>
+        Novo <MenubarShortcut>⌘N</MenubarShortcut>
+      </MenubarItem>
+      <MenubarItem>Abrir</MenubarItem>
+      <MenubarSeparator />
+      <MenubarItem>Sair</MenubarItem>
+    </MenubarContent>
+  </MenubarMenu>
+</Menubar>
+
+// Com checkbox items
+const [showBar, setShowBar] = useState(true);
+
+<MenubarCheckboxItem 
+  checked={showBar} 
+  onCheckedChange={setShowBar}
+>
+  Mostrar Barra
+</MenubarCheckboxItem>
+
+// Com radio group
+const [theme, setTheme] = useState("light");
+
+<MenubarRadioGroup value={theme} onValueChange={setTheme}>
+  <MenubarRadioItem value="light">Claro</MenubarRadioItem>
+  <MenubarRadioItem value="dark">Escuro</MenubarRadioItem>
+</MenubarRadioGroup>
+
+// Com submenus
+<MenubarSub>
+  <MenubarSubTrigger>Exportar</MenubarSubTrigger>
+  <MenubarSubContent>
+    <MenubarItem>PDF</MenubarItem>
+    <MenubarItem>Word</MenubarItem>
+  </MenubarSubContent>
+</MenubarSub>
+```
+
+**Props:**
+| Prop | Tipo | Padrão | Descrição |
+|------|------|--------|-----------|
+| `Menubar` | `ReactNode` | - | Container principal da barra de menu. |
+| `MenubarMenu` | `ReactNode` | - | Agrupa um trigger e seu conteúdo. |
+| `MenubarTrigger` | `ReactNode` | - | Botão que abre o menu dropdown. |
+| `MenubarContent` | `ReactNode` | - | Container do conteúdo do menu dropdown. |
+| `MenubarItem` | `ReactNode` | - | Item clicável do menu. Aceita prop  |
+| `MenubarShortcut` | `string` | - | Exibe atalho de teclado ao lado do item. |
+| `MenubarSeparator` | `-` | - | Linha separadora entre grupos de itens. |
+| `MenubarCheckboxItem` | `ReactNode` | - | Item com checkbox. Props: checked, onCheckedChange. |
+| `MenubarRadioGroup` | `ReactNode` | - | Container para radio items. Props: value, onValueChange. |
+| `MenubarRadioItem` | `ReactNode` | - | Item de radio dentro do RadioGroup. Prop: value. |
+| `MenubarSub` | `ReactNode` | - | Container para submenu aninhado. |
+| `MenubarSubTrigger` | `ReactNode` | - | Trigger que abre o submenu. |
+| `MenubarSubContent` | `ReactNode` | - | Conteúdo do submenu. |
+
+**Exemplos:**
+```tsx
+<Menubar>
+  <MenubarMenu>
+    <MenubarTrigger>Arquivo</MenubarTrigger>
+    <MenubarContent>
+      <MenubarItem>Novo</MenubarItem>
+      <MenubarItem>Abrir</MenubarItem>
+      <MenubarSeparator />
+      <MenubarItem>Salvar</MenubarItem>
+    </MenubarContent>
+  </MenubarMenu>
+  <MenubarMenu>
+    <MenubarTrigger>Editar</MenubarTrigger>
+    <MenubarContent>
+      <MenubarItem>Desfazer</MenubarItem>
+      <MenubarItem>Refazer</MenubarItem>
+    </MenubarContent>
+  </MenubarMenu>
+</Menubar>
+```
+```tsx
+<Menubar>
+  <MenubarMenu>
+    <MenubarTrigger>Editar</MenubarTrigger>
+    <MenubarContent>
+      <MenubarItem>
+        Desfazer <MenubarShortcut>⌘Z</MenubarShortcut>
+      </MenubarItem>
+      <MenubarItem>
+        Refazer <MenubarShortcut>⇧⌘Z</MenubarShortcut>
+      </MenubarItem>
+      <MenubarSeparator />
+      <MenubarItem>
+        Recortar <MenubarShortcut>⌘X</MenubarShortcut>
+      </MenubarItem>
+      <MenubarItem>
+        Copiar <MenubarShortcut>⌘C</MenubarShortcut>
+      </MenubarItem>
+      <MenubarItem>
+        Colar <MenubarShortcut>⌘V</MenubarShortcut>
+      </MenubarItem>
+    </MenubarContent>
+  </MenubarMenu>
+</Menubar>
+```
+
+**Acessibilidade:**
+- Navegação completa por teclado (setas, Enter, Escape, Tab)
+- Segue padrão WAI-ARIA de menubar
+- Submenus acessíveis via seta direita/esquerda
+- Gerenciamento de foco automático
+- Suporte a leitor de tela com roles apropriados
+- Escape fecha o menu atual e retorna foco ao trigger
+
+**Notas:**
+- Use MenubarSeparator para agrupar visualmente itens relacionados
+- MenubarShortcut é apenas visual - implemente os atalhos separadamente
+- Submenus podem ser aninhados em múltiplos níveis
+- Use 
+-  em MenubarItem quando precisar alinhar com CheckboxItems/RadioItems
+- Para menus contextuais (clique direito), use ContextMenu ao invés de Menubar
+
+> Fonte: `src\design-system\docs\components\MenubarDoc.tsx`
+
+---
+
+### Navigation Menu
+
+*Documentação não extraída automaticamente. Consulte o Design System interativo em `/ds`.*
+
+---
+
+### Pagination
+
+Barra de paginação completa com seletor de itens por página e controles de navegação.
+
+**Uso:**
+```tsx
+import { Pagination } from "forlogic-core/crud"
+
+<Pagination
+  currentPage={1}
+  totalPages={10}
+  totalItems={100}
+  itemsPerPage={10}
+  onPageChange={(page) => setPage(page)}
+  onItemsPerPageChange={(limit) => setLimit(limit)}
+  variant="full"
+/>
+```
+
+**Props:**
+| Prop | Tipo | Padrão | Descrição |
+|------|------|--------|-----------|
+| `currentPage` | `number` | - | Página atual (1-indexed) |
+| `totalPages` | `number` | - | Número total de páginas |
+| `totalItems` | `number` | - | Número total de itens |
+| `itemsPerPage` | `number` | - | Quantidade de itens por página |
+| `onPageChange` | `(page: number) => void` | - | Callback ao mudar de página |
+| `onItemsPerPageChange` | `(limit: number) => void` | - | Callback ao mudar itens por página |
+
+**Exemplos:**
+```tsx
+<Pagination
+  currentPage={1}
+  totalPages={2}
+  totalItems={15}
+  itemsPerPage={10}
+  onPageChange={setPage}
+  onItemsPerPageChange={setItemsPerPage}
+  variant=
+```
+```tsx
+<Pagination
+  currentPage={3}
+  totalPages={25}
+  totalItems={250}
+  itemsPerPage={10}
+  onPageChange={setPage}
+  onItemsPerPageChange={setItemsPerPage}
+  variant=
+```
+
+**Acessibilidade:**
+- Navegável por teclado
+- Labels ARIA apropriados
+- Indicação visual da página atual
+- Botões desabilitados quando não aplicável
+- Amigável para leitores de tela
+
+> Fonte: `src\design-system\docs\components\PaginationDoc.tsx`
+
+---
+
+### Select
+
+Exibe uma lista de opções para o usuário escolher—acionada por um botão.
+
+**Uso:**
+```tsx
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "forlogic-core"
+
+<Select>
+  <SelectTrigger className="w-[180px]">
+    <SelectValue placeholder="Theme" />
+  </SelectTrigger>
+  <SelectContent>
+    <SelectItem value="light">Light</SelectItem>
+    <SelectItem value="dark">Dark</SelectItem>
+  </SelectContent>
+</Select>
+```
+
+**Props:**
+| Prop | Tipo | Padrão | Descrição |
+|------|------|--------|-----------|
+| `defaultValue` | `string` | - | O valor selecionado padrão. |
+| `value` | `string` | - | O valor selecionado controlado. |
+| `onValueChange` | `(value: string) => void` | - | Manipulador de evento quando o valor muda. |
+| `disabled` | `boolean` | false | Se o select está desabilitado. |
+| `container (SelectContent)` | `HTMLElement` | - | Container HTML para portal (útil dentro de Dialog). |
+| `collisionBoundary (SelectContent)` | `HTMLElement` | - | Elemento para detecção de colisão de posicionamento. |
+
+**Acessibilidade:**
+- Navegação completa por teclado
+- Busca por digitação antecipada
+- Segue o padrão de listbox WAI-ARIA
+- Anúncios para leitores de tela
+
+**Notas:**
+- 💡 Use 
+-  e 
+-  quando o Select estiver dentro de um Dialog para evitar problemas de scroll
+- 💡 Para seleção com busca, considere usar 
+-  ao invés de 
+
+> Fonte: `src\design-system\docs\components\SelectDoc.tsx`
+
+---
+
+### Tabs & TabPageLayout
+
+Componentes de navegação em abas. Tabs para conteúdo simples e TabPageLayout para páginas completas com header fixo e scroll.
+
+**Uso:**
+```tsx
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "forlogic-core"
+
+<Tabs defaultValue="account">
+  <TabsList>
+    <TabsTrigger value="account">Conta</TabsTrigger>
+    <TabsTrigger value="password">Senha</TabsTrigger>
+  </TabsList>
+  <TabsContent value="account">
+    Faça alterações na sua conta aqui.
+  </TabsContent>
+  <TabsContent value="password">
+    Altere sua senha aqui.
+  </TabsContent>
+</Tabs>
+```
+
+**Props:**
+| Prop | Tipo | Padrão | Descrição |
+|------|------|--------|-----------|
+| `defaultValue` | `string` | - | O valor da aba que deve estar ativa por padrão. |
+| `value` | `string` | - | O valor controlado da aba ativa. |
+| `onValueChange` | `(value: string) => void` | - | Manipulador de evento quando a aba ativa muda. |
+| `TabPageHeader.title` | `string | ReactNode` | - | Título do header. |
+| `TabPageHeader.description` | `string` | - | Descrição opcional. |
+| `TabPageHeader.actions` | `ReactNode` | - | Ações (botões) do header. |
+
+**Acessibilidade:**
+- Navegação completa por teclado (teclas de seta para navegar entre abas)
+- Segue o padrão WAI-ARIA de tabs
+- Gerenciamento adequado de foco
+- Anúncios para leitores de tela
+
+**Notas:**
+- **Tabs** é ideal para alternar entre visualizações simples
+- **TabPageLayout** é ideal para páginas dentro de tabs com header fixo e scroll
+- TabPageLayout inclui separador automático e scroll area
+- Para barras de menu estilo desktop, veja o componente **Menubar**
+
+> Fonte: `src\design-system\docs\components\TabsDoc.tsx`
+
+---