@woovi/ui 6.9.4 → 6.9.6

package/dist/llms.txt

@@ -2,13 +2,13 @@
 
 > Biblioteca de componentes React da Woovi para construir interfaces de pagamento e dashboards financeiros.
 
-Documentacao: https://storybook.woovi.design
-Repositorio: https://github.com/woovi/woovi-ui
+Documentação: https://storybook.woovi.design
+Repositório: https://github.com/woovi/woovi-ui
 Pacote NPM: @woovi/ui
 
 ---
 
-## Instalacao
+## Instalação
 
 ```bash
 npm install @woovi/ui
@@ -18,7 +18,7 @@ yarn add @woovi/ui
 pnpm add @woovi/ui
 ```
 
-## Dependencias
+## Dependências
 
 - React 18+
 - Material-UI (MUI) v7+
@@ -28,7 +28,7 @@ pnpm add @woovi/ui
 
 ## Avatar
 
-Componentes para exibir fotos de perfil e grupos de usuarios.
+Componentes para exibir fotos de perfil e grupos de usuários.
 
 ```tsx
 import { Avatar } from '@woovi/ui';
@@ -42,13 +42,13 @@ import { Avatar } from '@woovi/ui';
 
 ## Banner
 
-Componentes para exibir mensagens de alerta, erro e informacoes.
+Componentes para exibir mensagens de alerta, erro e informações.
 
 ```tsx
 import { Banner, BannerError, BannerInfos } from '@woovi/ui';
 
-// Banner generico (conteudo via children)
-<Banner variant="solid" color="info">Informacao importante</Banner>
+// Banner genérico (conteúdo via children)
+<Banner variant="solid" color="info">Informação importante</Banner>
 
 // Banner de erro (recebe array de mensagens)
 <BannerError
@@ -56,11 +56,11 @@ import { Banner, BannerError, BannerInfos } from '@woovi/ui';
   callbackOnClose={() => {}}
 />
 
-// Banner informativo com detalhes (tabela de erros/informacoes)
+// Banner informativo com detalhes (tabela de erros/informações)
 <BannerInfos
   errors={data}
   columns={[{ field: 'name', headerName: 'Nome' }]}
-  titleHeader="Atencao"
+  titleHeader="Atenção"
   onClose={() => {}}
   refColumn={{ field: 'id', headerName: 'ID' }}
   isOpen={true}
@@ -73,7 +73,7 @@ import { Banner, BannerError, BannerInfos } from '@woovi/ui';
 
 ## Buttons
 
-Botoes para acoes, copiar, pagamentos e menus.
+Botões para ações, copiar, pagamentos e menus.
 
 ```tsx
 import {
@@ -87,31 +87,31 @@ import {
   SplitButton
 } from '@woovi/ui';
 
-// Botao de acao primario
+// Botão de ação primário
 <ActionButton label="Salvar" onClick={handleSave} />
 <ActionButton label="Salvar" loading={isLoading} />
 <ActionButton label="Criar" icon="add" />
 
-// Botao de copiar (children e o label do botao)
+// Botão de copiar (children é o label do botão)
 <CopyButton value="texto-para-copiar">Copiar Chave</CopyButton>
 
-// Botao de perigo/exclusao
+// Botão de perigo/exclusão
 <DangerButton label="Excluir" onClick={handleDelete} />
 
-// Menu de botoes
-<ButtonMenu label="Opcoes">
+// Menu de botões
+<ButtonMenu label="Opções">
   <ButtonMenuItem onClick={handleEdit}>Editar</ButtonMenuItem>
   <ButtonMenuItem onClick={handleDelete}>Excluir</ButtonMenuItem>
 </ButtonMenu>
 
-// Botao de pagamento Pix
+// Botão de pagamento Pix
 <PayWithPixButton onClick={handlePixPayment} />
 
-// Split button com opcoes
+// Split button com opções
 <SplitButton
   options={[
-    { label: 'Acao 1', onClick: () => {} },
-    { label: 'Acao 2', onClick: () => {} },
+    { label: 'Ação 1', onClick: () => {} },
+    { label: 'Ação 2', onClick: () => {} },
   ]}
 />
 ```
@@ -126,7 +126,7 @@ import {
 
 ### ClickPix Buttons
 
-Botoes especificos para pagamentos via Pix com um clique.
+Botões específicos para pagamentos via Pix com um clique.
 
 ```tsx
 import {
@@ -135,13 +135,13 @@ import {
   DonateWithClickButton
 } from '@woovi/ui';
 
-// Botao ClickPix padrao
+// Botão ClickPix padrão
 <ClickPixButton onClick={handleClickPix} />
 
-// Botao de doacao ClickPix
+// Botão de doação ClickPix
 <DonateClickPixButton amount={1000} correlationID="donation-123" />
 
-// Botao de doacao com click
+// Botão de doação com click
 <DonateWithClickButton />
 ```
 
@@ -151,7 +151,7 @@ import {
 
 ## Card
 
-Containers para exibir conteudo em formato de cartao.
+Containers para exibir conteúdo em formato de cartão.
 
 ```tsx
 import {
@@ -168,18 +168,18 @@ import {
   CardWithLinkSkeleton
 } from '@woovi/ui';
 
-// Card basico
+// Card básico
 <Card>
   <CardContent>
-    <h2>Titulo do Card</h2>
-    <p>Conteudo do card</p>
+    <h2>Título do Card</h2>
+    <p>Conteúdo do card</p>
   </CardContent>
   <CardActions>
-    <ActionButton label="Acao" />
+    <ActionButton label="Ação" />
   </CardActions>
 </Card>
 
-// Card com icone
+// Card com ícone
 <CardWithIcon
   icon="payment"
   title="Pagamentos"
@@ -192,15 +192,15 @@ import {
   href="/details"
 />
 
-// Card selecionavel
+// Card selecionável
 <CardSelectable
   isSelected={isSelected}
   onClick={() => setSelected(!isSelected)}
 >
-  Conteudo selecionavel
+  Conteúdo selecionável
 </CardSelectable>
 
-// Card de copia (para chaves Pix, etc)
+// Card de cópia (para chaves Pix, etc)
 <CardCopy content="chave-pix@email.com" />
 ```
 
@@ -218,24 +218,24 @@ import {
 
 ## CardAnalytics
 
-Componentes para exibir metricas e dados analiticos.
+Componentes para exibir métricas e dados analíticos.
 
 ```tsx
 import { CardAnalytics, CardAnalyticsSmall } from '@woovi/ui';
 
-// Card de metricas
+// Card de métricas
 <CardAnalytics
   title="Total de Vendas"
   value="R$ 15.000,00"
-  total="150 transacoes"
+  total="150 transações"
   color="success"
   loading={false}
   onClick={() => navigate('/sales')}
 />
 
-// Versao compacta
+// Versão compacta
 <CardAnalyticsSmall
-  label="Conversao"
+  label="Conversão"
   value="3.2%"
 />
 ```
@@ -253,11 +253,11 @@ import { CardGrid, CardField, Grid } from '@woovi/ui';
 
 // Grid de cards
 <CardGrid>
-  <CardField label="Nome" value="Joao Silva" />
+  <CardField label="Nome" value="João Silva" />
   <CardField label="Email" value="joao@email.com" />
 </CardGrid>
 
-// Grid generico
+// Grid genérico
 <Grid columns={3} gap={2}>
   <Card>Item 1</Card>
   <Card>Item 2</Card>
@@ -279,7 +279,7 @@ import { CardWithImage } from '@woovi/ui';
 <CardWithImage
   image="/product.jpg"
   title="Produto"
-  description="Descricao do produto"
+  description="Descrição do produto"
 />
 ```
 
@@ -287,7 +287,7 @@ import { CardWithImage } from '@woovi/ui';
 
 ## ClickPix
 
-Componentes da marca ClickPix para pagamentos instantaneos.
+Componentes da marca ClickPix para pagamentos instantâneos.
 
 ```tsx
 import { ClickPixButton, ClickPixLogo } from '@woovi/ui';
@@ -295,7 +295,7 @@ import { ClickPixButton, ClickPixLogo } from '@woovi/ui';
 // Logo ClickPix
 <ClickPixLogo width={120} />
 
-// Botao ClickPix
+// Botão ClickPix
 <ClickPixButton variant="primary" onClick={handlePay} />
 ```
 
@@ -304,7 +304,7 @@ import { ClickPixButton, ClickPixLogo } from '@woovi/ui';
 
 ## Code
 
-Componente para exibir blocos de codigo.
+Componente para exibir blocos de código.
 
 ```tsx
 import { Code } from '@woovi/ui';
@@ -318,7 +318,7 @@ import { Code } from '@woovi/ui';
 
 ## Collapsible
 
-Componentes expansiveis para organizar conteudo em secoes.
+Componentes expansíveis para organizar conteúdo em seções.
 
 ```tsx
 import {
@@ -331,15 +331,15 @@ import {
 
 // Collapsible simples
 <Collapsible title="Ver mais detalhes">
-  <p>Conteudo expandido</p>
+  <p>Conteúdo expandido</p>
 </Collapsible>
 
 // Collapsible em etapas
 <CollapsibleStep step={1} title="Primeira etapa">
-  <p>Conteudo da etapa</p>
+  <p>Conteúdo da etapa</p>
 </CollapsibleStep>
 
-// Arvore collapsible
+// Árvore collapsible
 <CollapsibleTree>
   <LeafCollapsible title="Item pai">
     <LeafCollapsible title="Item filho" />
@@ -356,17 +356,17 @@ import {
 
 ## Content
 
-Componentes para estruturar conteudo e texto.
+Componentes para estruturar conteúdo e texto.
 
 ```tsx
 import { Content, ActionMargin } from '@woovi/ui';
 
-// Container de conteudo
+// Container de conteúdo
 <Content>
-  <p>Seu conteudo aqui</p>
+  <p>Seu conteúdo aqui</p>
 </Content>
 
-// Margem para acoes
+// Margem para ações
 <ActionMargin>
   <ActionButton label="Salvar" />
 </ActionMargin>
@@ -377,12 +377,12 @@ import { Content, ActionMargin } from '@woovi/ui';
 
 ## Countdown
 
-Componentes de contagem regressiva para expiracoes de pagamento.
+Componentes de contagem regressiva para expirações de pagamento.
 
 ```tsx
 import { Countdown } from '@woovi/ui';
 
-// Contagem regressiva para expiracao de cobranca Pix
+// Contagem regressiva para expiração de cobrança Pix
 <Countdown
   expiresAt={new Date('2024-12-31T23:59:59')}
   onExpire={() => console.log('Expirado!')}
@@ -394,12 +394,12 @@ import { Countdown } from '@woovi/ui';
 
 ## DataGrid
 
-Tabelas de dados avancadas com suporte a paginacao, ordenacao e filtros.
+Tabelas de dados avançadas com suporte a paginação, ordenação e filtros.
 
 ```tsx
 import { DataGrid, DataGridLoading, DataGridDetailContainer } from '@woovi/ui';
 
-// DataGrid basico
+// DataGrid básico
 <DataGrid
   columns={[
     { field: 'id', headerName: 'ID', width: 90 },
@@ -411,7 +411,7 @@ import { DataGrid, DataGridLoading, DataGridDetailContainer } from '@woovi/ui';
   onRowClick={(row) => console.log(row)}
 />
 
-// DataGrid com exportacao CSV habilitada
+// DataGrid com exportação CSV habilitada
 <DataGrid
   columns={columns}
   rows={data}
@@ -425,7 +425,7 @@ import { DataGrid, DataGridLoading, DataGridDetailContainer } from '@woovi/ui';
   zebraRow
 />
 
-// DataGrid com rowHref (funcao que recebe row e retorna href)
+// DataGrid com rowHref (função que recebe row e retorna href)
 <DataGrid
   columns={columns}
   rows={data}
@@ -443,21 +443,21 @@ import { DataGrid, DataGridLoading, DataGridDetailContainer } from '@woovi/ui';
 
 ## Dialog
 
-Sistema de modais e dialogos.
+Sistema de modais e diálogos.
 
 ```tsx
 import { DialogProvider, useDialog } from '@woovi/ui';
 
-// Provider no root da aplicacao
+// Provider no root da aplicação
 <DialogProvider>
   <App />
 </DialogProvider>
 
-// Hook para abrir dialogos
+// Hook para abrir diálogos
 const { openDialog, closeDialog } = useDialog();
 
 openDialog({
-  title: 'Confirmar acao',
+  title: 'Confirmar ação',
   content: 'Deseja continuar?',
   actions: [
     { label: 'Cancelar', onClick: closeDialog },
@@ -470,36 +470,97 @@ openDialog({
 
 ## Drawer
 
-Paineis laterais deslizantes.
+Painéis laterais deslizantes.
 
 ```tsx
 import { DrawerCard, DrawerResponsiveWrapper } from '@woovi/ui';
 
 // Drawer com card
 <DrawerCard open={isOpen} onClose={handleClose}>
-  <CardContent>Conteudo do drawer</CardContent>
+  <CardContent>Conteúdo do drawer</CardContent>
 </DrawerCard>
 
 // Drawer responsivo (lateral em desktop, bottom sheet em mobile)
 <DrawerResponsiveWrapper open={isOpen} onClose={handleClose}>
-  <p>Conteudo adaptativo</p>
+  <p>Conteúdo adaptativo</p>
 </DrawerResponsiveWrapper>
 ```
 
 - DrawerCard: https://storybook.woovi.design/?path=/docs/components-drawer-drawercard--docs
 - DrawerResponsiveWrapper: https://storybook.woovi.design/?path=/docs/components-drawer-drawerresponsivewrapper--docs
 
+## EmptyState
+
+Componente para exibir estados vazios — listas sem resultados, telas sem dados ou seções aguardando uma ação do usuário. Suporta até dois botões de ação: `primaryButton` (contained) e `secondaryButton` (outlined), exibidos lado a lado.
+
+```tsx
+import { EmptyState } from '@woovi/ui';
+
+// Estado vazio com defaults (ícone, título e descrição padrão)
+<EmptyState />
+
+// Com botão primário (contained)
+<EmptyState
+  title="Nenhum resultado encontrado."
+  description="Convide um usuário ou limpe o filtro de pesquisa."
+  primaryButton={{
+    label: "Convidar usuário",
+    onClick: () => handleInvite(),
+  }}
+/>
+
+// Com botão secundário (outlined)
+<EmptyState
+  title="Nenhum resultado encontrado."
+  description="Volte para a tela anterior ou ajuste os filtros."
+  secondaryButton={{
+    label: "Voltar",
+    onClick: () => handleBack(),
+  }}
+/>
+
+// Com ambos os botões (secundário à esquerda, primário à direita)
+<EmptyState
+  title="Nenhuma cobrança ainda"
+  description="Crie sua primeira cobrança Pix ou importe um arquivo CSV."
+  secondaryButton={{
+    label: "Importar CSV",
+    onClick: () => handleImport(),
+  }}
+  primaryButton={{
+    label: "Criar cobrança",
+    onClick: () => handleCreate(),
+  }}
+/>
+
+// Sem botões (cada botão só é renderizado se label E onClick forem fornecidos)
+<EmptyState
+  title="Lista vazia"
+  description="Você ainda não possui itens cadastrados."
+/>
+
+// Com ícone customizado
+<EmptyState
+  icon={<MyCustomIcon />}
+  title="Busca personalizada"
+  description="Você pode passar qualquer ReactNode como ícone."
+  primaryButton={{ label: "Tentar novamente", onClick: () => retry() }}
+/>
+```
+
+- EmptyState: https://storybook.woovi.design/?path=/docs/components-emptystate-emptystate--docs
+
 ## Error
 
-Componentes para tratamento e exibicao de erros.
+Componentes para tratamento e exibição de erros.
 
 ```tsx
 import { ErrorView } from '@woovi/ui';
 
-// Visualizacao de erro
+// Visualização de erro
 <ErrorView
   title="Algo deu errado"
-  message="Nao foi possivel carregar os dados"
+  message="Não foi possível carregar os dados"
   onRetry={handleRetry}
 />
 ```
@@ -513,7 +574,7 @@ Sistema de filtros para busca e filtragem de dados.
 ```tsx
 import { Filter, FilterRelayFormik } from '@woovi/ui';
 
-// Filtro basico
+// Filtro básico
 <Filter
   filters={[
     { field: 'status', label: 'Status', options: ['Ativo', 'Inativo'] },
@@ -527,12 +588,12 @@ import { Filter, FilterRelayFormik } from '@woovi/ui';
 
 ## Form
 
-Componentes de formulario.
+Componentes de formulário.
 
 ```tsx
 import { FieldRow } from '@woovi/ui';
 
-// Linha de campo de formulario
+// Linha de campo de formulário
 <FieldRow label="Email" required>
   <input type="email" />
 </FieldRow>
@@ -542,14 +603,14 @@ import { FieldRow } from '@woovi/ui';
 
 ## Heading
 
-Cabecalhos e titulos de secao.
+Cabeçalhos e títulos de seção.
 
 ```tsx
 import { SectionHeading } from '@woovi/ui';
 
 <SectionHeading
-  title="Transacoes"
-  subtitle="Ultimas 30 dias"
+  title="Transações"
+  subtitle="Últimas 30 dias"
   action={<ActionButton label="Ver todas" />}
 />
 ```
@@ -558,7 +619,7 @@ import { SectionHeading } from '@woovi/ui';
 
 ## Helpers
 
-Utilitarios de layout e espacamento.
+Utilitários de layout e espaçamento.
 
 ```tsx
 import { Divider, HorizontalStack } from '@woovi/ui';
@@ -568,8 +629,8 @@ import { Divider, HorizontalStack } from '@woovi/ui';
 
 // Stack horizontal
 <HorizontalStack spacing={2}>
-  <ActionButton label="Botao 1" />
-  <ActionButton label="Botao 2" />
+  <ActionButton label="Botão 1" />
+  <ActionButton label="Botão 2" />
 </HorizontalStack>
 ```
 
@@ -578,7 +639,7 @@ import { Divider, HorizontalStack } from '@woovi/ui';
 
 ## Import
 
-Componentes para importacao de arquivos (CSV, XLSX).
+Componentes para importação de arquivos (CSV, XLSX).
 
 ```tsx
 import { DropzoneFile } from '@woovi/ui';
@@ -596,7 +657,7 @@ import { DropzoneFile } from '@woovi/ui';
 
 ## Layout
 
-Componentes para estrutura de pagina.
+Componentes para estrutura de página.
 
 ```tsx
 import { LayoutRoot, LayoutWrapper } from '@woovi/ui';
@@ -613,7 +674,7 @@ import { LayoutRoot, LayoutWrapper } from '@woovi/ui';
 
 ## Link
 
-Componentes de navegacao e links.
+Componentes de navegação e links.
 
 ```tsx
 import { Link, WooviLink } from '@woovi/ui';
@@ -625,7 +686,7 @@ import { Link, WooviLink } from '@woovi/ui';
 <Link href="https://woovi.com" external>Woovi</Link>
 
 // Link estilizado Woovi
-<WooviLink href="/pricing">Ver precos</WooviLink>
+<WooviLink href="/pricing">Ver preços</WooviLink>
 ```
 
 - Link: https://storybook.woovi.design/?path=/docs/components-link--docs
@@ -638,7 +699,7 @@ Logotipos da Woovi e OpenPix.
 ```tsx
 import { Logo, WooviLogo } from '@woovi/ui';
 
-// Logo generico
+// Logo genérico
 <Logo src="/logo.png" alt="Empresa" />
 
 // Logo Woovi
@@ -657,7 +718,7 @@ import { BoxFlex, Typography } from '@woovi/ui';
 
 // Box flexbox
 <BoxFlex gap={2} alignItems="center">
-  <Typography variant="h6">Titulo</Typography>
+  <Typography variant="h6">Título</Typography>
   <Typography variant="body1">Texto</Typography>
 </BoxFlex>
 ```
@@ -667,7 +728,7 @@ import { BoxFlex, Typography } from '@woovi/ui';
 
 ## MultiFactor
 
-Componentes de autenticacao multi-fator para verificacao segura de usuarios.
+Componentes de autenticação multi-fator para verificação segura de usuários.
 
 ```tsx
 import {
@@ -677,7 +738,7 @@ import {
   MultiFactorPixPaymentView
 } from '@woovi/ui';
 
-// Modal de confirmacao MFA (suporta TOTP, WhatsApp/SMS e email)
+// Modal de confirmação MFA (suporta TOTP, WhatsApp/SMS e email)
 <MultiFactorConfirmModal
   title="Confirm your identity"
   isOpen={isOpen}
@@ -686,13 +747,13 @@ import {
   email="user@example.com"
 />
 
-// Verificacao PIX com sucesso (CPF corresponde)
+// Verificação PIX com sucesso (CPF corresponde)
 <MultiFactorPixPaymentMatch amount={0.01} />
 
-// Verificacao PIX com falha (CPF nao corresponde)
+// Verificação PIX com falha (CPF não corresponde)
 <MultiFactorPixPaymentMismatch amount={0.01} />
 
-// View do QR Code PIX para verificacao
+// View do QR Code PIX para verificação
 <MultiFactorPixPaymentView
   pixAuthentication={{ brCode: '...', taxID: '...' }}
   onGetResult={handleGetResult}
@@ -706,17 +767,17 @@ import {
 
 ## OpenPix
 
-Componentes especificos do ecossistema OpenPix.
+Componentes específicos do ecossistema OpenPix.
 
 ```tsx
 import { ChargeTagStatus, PixTransactionTypeTag, QRCodeWrapper } from '@woovi/ui';
 
-// Tag de status de cobranca
+// Tag de status de cobrança
 <ChargeTagStatus status="COMPLETED" />
 <ChargeTagStatus status="PENDING" />
 <ChargeTagStatus status="EXPIRED" />
 
-// Tag de tipo de transacao Pix
+// Tag de tipo de transação Pix
 <PixTransactionTypeTag type="PAYMENT" />
 <PixTransactionTypeTag type="WITHDRAWAL" />
 
@@ -750,7 +811,7 @@ import { PaymentLinkRow } from '@woovi/ui';
 
 ## PinInput
 
-Campos de entrada para PIN e codigos de verificacao.
+Campos de entrada para PIN e códigos de verificação.
 
 ```tsx
 import { PinInput, PinInputFormik } from '@woovi/ui';
@@ -770,7 +831,7 @@ import { PinInput, PinInputFormik } from '@woovi/ui';
 
 ## RadioCard
 
-Card selecionavel estilo radio button.
+Card selecionável estilo radio button.
 
 ```tsx
 import { RadioCard } from '@woovi/ui';
@@ -779,7 +840,7 @@ import { RadioCard } from '@woovi/ui';
   selected={selectedOption === 'pix'}
   onClick={() => setSelectedOption('pix')}
   title="Pix"
-  description="Pagamento instantaneo"
+  description="Pagamento instantâneo"
   icon="pix"
 />
 ```
@@ -810,7 +871,7 @@ import { Ribbon } from '@woovi/ui';
 
 <Card>
   <Ribbon label="Novo" color="primary" />
-  <CardContent>Conteudo</CardContent>
+  <CardContent>Conteúdo</CardContent>
 </Card>
 ```
 
@@ -818,7 +879,7 @@ import { Ribbon } from '@woovi/ui';
 
 ## Root
 
-Componentes de estrutura raiz da aplicacao.
+Componentes de estrutura raiz da aplicação.
 
 ```tsx
 import { ContentBoundary } from '@woovi/ui';
@@ -832,7 +893,7 @@ import { ContentBoundary } from '@woovi/ui';
 
 ## Routed
 
-Componentes com integracao de rotas.
+Componentes com integração de rotas.
 
 ```tsx
 import { RoutedTabs } from '@woovi/ui';
@@ -840,9 +901,9 @@ import { RoutedTabs } from '@woovi/ui';
 // Tabs com rotas
 <RoutedTabs
   tabs={[
-    { label: 'Visao Geral', path: '/overview' },
-    { label: 'Transacoes', path: '/transactions' },
-    { label: 'Configuracoes', path: '/settings' },
+    { label: 'Visão Geral', path: '/overview' },
+    { label: 'Transações', path: '/transactions' },
+    { label: 'Configurações', path: '/settings' },
   ]}
 />
 ```
@@ -851,7 +912,7 @@ import { RoutedTabs } from '@woovi/ui';
 
 ## ScreenHeader
 
-Cabecalhos de tela para dashboards.
+Cabeçalhos de tela para dashboards.
 
 ```tsx
 import { ScreenHeaderUI, ScreenHeaderCard } from '@woovi/ui';
@@ -859,12 +920,12 @@ import { ScreenHeaderUI, ScreenHeaderCard } from '@woovi/ui';
 // Header de tela
 <ScreenHeaderUI
   title="Dashboard"
-  subtitle="Visao geral das suas transacoes"
+  subtitle="Visão geral das suas transações"
   actions={<ActionButton label="Exportar" />}
 />
 
 // Header em card
-<ScreenHeaderCard title="Configuracoes" />
+<ScreenHeaderCard title="Configurações" />
 ```
 
 - ScreenHeaderUI: https://storybook.woovi.design/?path=/docs/components-screenheader-screenheaderui--docs
@@ -898,12 +959,12 @@ import { GlobalSearchField, SearchField } from '@woovi/ui';
 
 ## Select
 
-Componentes de selecao.
+Componentes de seleção.
 
 ```tsx
 import { Select } from '@woovi/ui';
 
-// Select basico
+// Select básico
 <Select
   label="Status"
   value={status}
@@ -919,7 +980,7 @@ import { Select } from '@woovi/ui';
 
 ## Sidebar
 
-Sistema de navegacao lateral.
+Sistema de navegação lateral.
 
 ```tsx
 import { Sidebar, SidebarGroup, SidebarItem, SidebarMenuList } from '@woovi/ui';
@@ -929,7 +990,7 @@ import { Sidebar, SidebarGroup, SidebarItem, SidebarMenuList } from '@woovi/ui';
     <SidebarItem icon="dashboard" label="Dashboard" href="/" />
     <SidebarItem icon="payment" label="Pagamentos" href="/payments" />
   </SidebarGroup>
-  <SidebarGroup title="Configuracoes">
+  <SidebarGroup title="Configurações">
     <SidebarItem icon="settings" label="Conta" href="/settings" />
   </SidebarGroup>
 </Sidebar>
@@ -942,17 +1003,17 @@ import { Sidebar, SidebarGroup, SidebarItem, SidebarMenuList } from '@woovi/ui';
 
 ## Snackbar
 
-Notificacoes toast.
+Notificações toast.
 
 ```tsx
 import { useSnackbar } from '@woovi/ui';
 
 const { showSnackbar } = useSnackbar();
 
-// Mostrar notificacao
-showSnackbar('Operacao realizada com sucesso!', { variant: 'success' });
+// Mostrar notificação
+showSnackbar('Operação realizada com sucesso!', { variant: 'success' });
 showSnackbar('Erro ao processar', { variant: 'error' });
-showSnackbar('Atencao!', { variant: 'warning' });
+showSnackbar('Atenção!', { variant: 'warning' });
 ```
 
 - Snackbar: https://storybook.woovi.design/?path=/docs/components-snackbar-snackbar--docs
@@ -960,7 +1021,7 @@ showSnackbar('Atencao!', { variant: 'warning' });
 
 ## Statement
 
-Componentes para extrato e historico de transacoes.
+Componentes para extrato e histórico de transações.
 
 ```tsx
 import { LedgerStatementText, TransactionTypeText } from '@woovi/ui';
@@ -969,7 +1030,7 @@ import { LedgerStatementText, TransactionTypeText } from '@woovi/ui';
 <LedgerStatementText type="credit" value={1000} />
 <LedgerStatementText type="debit" value={-500} />
 
-// Texto de tipo de transacao
+// Texto de tipo de transação
 <TransactionTypeText type="PIX_RECEIVED" />
 <TransactionTypeText type="PIX_SENT" />
 ```
@@ -993,7 +1054,7 @@ import {
 <SwipeableDialog open={isOpen} onClose={handleClose}>
   <SwipeableDialogTitle>Confirmar</SwipeableDialogTitle>
   <SwipeableDialogContent>
-    Deseja continuar com esta acao?
+    Deseja continuar com esta ação?
   </SwipeableDialogContent>
   <SwipeableDialogActions>
     <ActionButton label="Cancelar" onClick={handleClose} />
@@ -1007,7 +1068,7 @@ import {
 
 ## Table
 
-Componentes de tabela, listas virtualizadas, alternancia de visualizacao e parser EMV.
+Componentes de tabela, listas virtualizadas, alternância de visualização e parser EMV.
 
 ```tsx
 import {
@@ -1036,10 +1097,10 @@ import {
   onCardClick={(card, event) => handleClick(card)}
 />
 
-// Toggle entre visualizacao tabela e card
+// Toggle entre visualização tabela e card
 <TableToggleViewModel />
 
-// Tabela de dados EMV de QR Code Pix (com linhas expansiveis para tags aninhadas)
+// Tabela de dados EMV de QR Code Pix (com linhas expansíveis para tags aninhadas)
 <TablePixEMV emv="00020126580014br.gov.bcb.pix0136..." />
 ```
 
@@ -1051,20 +1112,20 @@ import {
 
 ## MuiTable
 
-Tabela MUI com paginação, seleção de linhas e multiplos tipos de celula. Substitui o pacote `@woovi/table` (descontinuado). Use com `useRelayPagination` de `@woovi/hooks` para consumers Relay.
+Tabela MUI com paginação, seleção de linhas e múltiplos tipos de célula. Substitui o pacote `@woovi/table` (descontinuado). Use com `useRelayPagination` de `@woovi/hooks` para consumers Relay.
 
 ```tsx
 import { Table, TableRelayPagination, CELL_TYPES, useTableProps } from '@woovi/ui';
 import type { TableColumn } from '@woovi/ui';
 import { useRelayPagination } from '@woovi/hooks';
 
-// Definicao de colunas
+// Definição de colunas
 const columns: TableColumn<User>[] = [
   { property: 'name',      type: CELL_TYPES.STRING,   header: { label: 'Nome' } },
   { property: 'email',     type: CELL_TYPES.STRING,   header: { label: 'E-mail' } },
   { property: 'amount',    type: CELL_TYPES.CURRENCY, header: { label: 'Saldo' } },
   { property: 'createdAt', type: CELL_TYPES.DATETIME, header: { label: 'Data' } },
-  // Renderizacao customizada
+  // Renderização customizada
   {
     property: 'status',
     header: { label: 'Status' },
@@ -1077,7 +1138,7 @@ const columns: TableColumn<User>[] = [
     header: { label: 'ID' },
     getClickPath: (value) => `/transactions/${value}`,
   },
-  // Menu de acoes
+  // Menu de ações
   {
     property: 'id',
     type: CELL_TYPES.ACTIONS,
@@ -1089,7 +1150,7 @@ const columns: TableColumn<User>[] = [
   },
 ];
 
-// Table simples (dados em memoria)
+// Table simples (dados em memória)
 const { isLoading, quantityPerPage, setQuantityPerPage } = useTableProps();
 <Table
   columns={columns}
@@ -1150,7 +1211,7 @@ import {
   <Tag label="Tag 2" />
 </TagsContainer>
 
-// Tags de status especificos
+// Tags de status específicos
 <CashbackTagStatus status="pending" />
 <TransactionTagStatus status="completed" />
 ```
@@ -1162,7 +1223,7 @@ import {
 
 ## Term
 
-Componentes de termos e condicoes.
+Componentes de termos e condições.
 
 ```tsx
 import { Terms, TermsLink } from '@woovi/ui';
@@ -1187,7 +1248,7 @@ Componentes de texto.
 ```tsx
 import { TextMultiline } from '@woovi/ui';
 
-<TextMultiline text="Texto com\\nmultiplas\\nlinhas" />
+<TextMultiline text="Texto com\\nmúltiplas\\nlinhas" />
 ```
 
 - TextMultiline: https://storybook.woovi.design/?path=/docs/components-text-textmultiline--docs
@@ -1216,7 +1277,7 @@ const { mode, toggleMode } = useThemeMode();
 
 ## Timeline
 
-Linha do tempo para historico de eventos.
+Linha do tempo para histórico de eventos.
 
 ```tsx
 import { Timeline, TimelineItem } from '@woovi/ui';
@@ -1228,7 +1289,7 @@ import { Timeline, TimelineItem } from '@woovi/ui';
     status="success"
   />
   <TimelineItem
-    title="Cobranca criada"
+    title="Cobrança criada"
     date="2024-01-15 10:00"
     status="info"
   />
@@ -1239,18 +1300,18 @@ import { Timeline, TimelineItem } from '@woovi/ui';
 
 ## User
 
-Componentes para exibir informacoes de usuarios.
+Componentes para exibir informações de usuários.
 
 ```tsx
 import { UserChip } from '@woovi/ui';
 
-// Chip de usuario com avatar e nome
+// Chip de usuário com avatar e nome
 <UserChip label="João Silva" name="João Silva" />
 
-// Chip de usuario com CPF (formatado automaticamente)
+// Chip de usuário com CPF (formatado automaticamente)
 <UserChip label="12345678909" name="Maria Souza" />
 
-// Chip de usuario com email
+// Chip de usuário com email
 <UserChip label="user@woovi.com" name="User Woovi" />
 ```
 
@@ -1258,7 +1319,7 @@ import { UserChip } from '@woovi/ui';
 
 ## Utility Components
 
-Componentes utilitarios diversos.
+Componentes utilitários diversos.
 
 ```tsx
 import {
@@ -1270,10 +1331,10 @@ import {
   Row,
 } from '@woovi/ui';
 
-// Botao voltar
+// Botão voltar
 <BackButton onClick={() => navigate(-1)} />
 
-// Input com botao de copiar
+// Input com botão de copiar
 <CopyInput value="texto-para-copiar" />
 
 // Texto criptografado (ex: CPF mascarado)
@@ -1349,7 +1410,7 @@ function App() {
         <Sidebar>
           <SidebarGroup title="Menu">
             <SidebarItem icon="dashboard" label="Dashboard" href="/" />
-            <SidebarItem icon="payment" label="Cobrancas" href="/charges" />
+            <SidebarItem icon="payment" label="Cobranças" href="/charges" />
           </SidebarGroup>
         </Sidebar>
 
@@ -1358,8 +1419,8 @@ function App() {
             title="Dashboard"
             actions={
               <ActionButton
-                label="Nova Cobranca"
-                onClick={() => showSnackbar('Cobranca criada!')}
+                label="Nova Cobrança"
+                onClick={() => showSnackbar('Cobrança criada!')}
               />
             }
           />
@@ -1367,7 +1428,7 @@ function App() {
           <CardAnalytics
             title="Total Recebido"
             value="R$ 15.000,00"
-            total="150 transacoes"
+            total="150 transações"
             color="success"
           />
 
@@ -1385,4 +1446,4 @@ function App() {
 
 ---
 
-Gerado automaticamente para integracao com LLMs.
+Gerado automaticamente para integração com LLMs.