forlogic-core 3.0.10 → 4.0.0

package/docs/design-system/navigation.md

@@ -1,609 +0,0 @@
-<!-- ⚠️ 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"
-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. O item selecionado é destacado por background (accent), fonte medium e borda esquerda na cor primary. A prop `showCheck` (opcional) adiciona um ícone de check à esquerda do item selecionado.
-
-**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. |
-| `showCheck` | `boolean` | false | Exibe o ícone de check à esquerda do item selecionado. Quando false, o item selecionado é destacado apenas pelo background, fonte medium e borda esquerda primary. |
-| `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 
-- ,
-        
-- rounded-lg
-- hover:border-primary
-- transition-colors
-- ,
-        
-- Combobox
-- showCheck
-
-> 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`
-
----