forlogic-core 2.1.4 → 2.1.5

package/docs/design-system/navigation.md

@@ -11,38 +11,38 @@ 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)
+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>
 ```
 
@@ -63,10 +63,10 @@ import {
 import { Link } from
 ```
 ```tsx
-<Breadcrumb>
-  <BreadcrumbList>
-    <BreadcrumbItem>
-      <BreadcrumbLink asChild>
+<Breadcrumb>
+  <BreadcrumbList>
+    <BreadcrumbItem>
+      <BreadcrumbLink asChild>
         <Link to=
 ```
 
@@ -91,7 +91,7 @@ import { Link } from
 - 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`
+> Fonte: `src/design-system/docs/components/BreadcrumbDoc.tsx`
 
 ---
 
@@ -101,65 +101,65 @@ Exibe um menu ao usuário — como um conjunto de ações ou funções — acion
 
 **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>
+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>
 ```
 
@@ -191,7 +191,7 @@ import {
 - 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`
+> Fonte: `src/design-system/docs/components/ContextMenuDoc.tsx`
 
 ---
 
@@ -201,49 +201,49 @@ Exibe um menu ao usuário — como um conjunto de ações ou funções — acion
 
 **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>
+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>
 ```
 
@@ -277,7 +277,7 @@ import { User, Settings, LogOut, ChevronDown } from "lucide-react"
 - Type-ahead: digitar caracteres foca no item correspondente
 - Itens desabilitados exibem tooltip explicativo no hover
 
-> Fonte: `src\design-system\docs\components\DropdownMenuDoc.tsx`
+> Fonte: `src/design-system/docs/components/DropdownMenuDoc.tsx`
 
 ---
 
@@ -287,62 +287,62 @@ Barra de menu horizontal com submenus, checkboxes e radio items. Ideal para barr
 
 **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>
+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>
 ```
 
@@ -365,48 +365,48 @@ const [theme, setTheme] = useState("light");
 
 **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>
+  <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>
+  <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>
 ```
 
@@ -426,7 +426,7 @@ const [theme, setTheme] = useState("light");
 -  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`
+> Fonte: `src/design-system/docs/components/MenubarDoc.tsx`
 
 ---
 
@@ -438,63 +438,9 @@ const [theme, setTheme] = useState("light");
 
 ### 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
+Componente de paginação padronizado com layout de 3 colunas, seletor de itens por página e navegação completa.
 
-> Fonte: `src\design-system\docs\components\PaginationDoc.tsx`
+> Fonte: `src/design-system/docs/components/crud/PaginationDoc.tsx`
 
 ---
 
@@ -504,22 +450,22 @@ 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>
+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>
 ```
 
@@ -545,13 +491,13 @@ import {
 -  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
 
-> Fonte: `src\design-system\docs\components\SelectDoc.tsx`
+> Fonte: `src/design-system/docs/components/SelectDoc.tsx`
 
 ---
 
@@ -561,19 +507,19 @@ Componentes de navegação em abas. Tabs para conteúdo simples e TabPageLayout
 
 **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>
+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>
 ```
 
@@ -599,6 +545,6 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "forlogic-core"
 - 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`
+> Fonte: `src/design-system/docs/components/TabsDoc.tsx`
 
 ---