@woovi/ui 6.6.2 → 6.7.0

package/dist/llms.txt

@@ -21,7 +21,7 @@ pnpm add @woovi/ui
 ## Dependencias
 
 - React 18+
-- Material-UI (MUI) v7+
+- Material-UI (MUI) v5+
 - TypeScript
 
 ---
@@ -31,14 +31,37 @@ pnpm add @woovi/ui
 Componentes para exibir fotos de perfil e grupos de usuarios.
 
 ```tsx
-import { Avatar } from '@woovi/ui';
+import { Avatar, AvatarGroup, AvatarGroupArray, AvatarGroupSelectedAll } from '@woovi/ui';
 
 // Avatar simples
 <Avatar src="https://example.com/photo.jpg" alt="User" />
 
+// Grupo de avatars
+<AvatarGroup max={4}>
+  <Avatar src="/user1.jpg" />
+  <Avatar src="/user2.jpg" />
+  <Avatar src="/user3.jpg" />
+</AvatarGroup>
 ```
 
 - Avatar: https://storybook.woovi.design/?path=/docs/components-avatar-avatar--docs
+- AvatarGroup: https://storybook.woovi.design/?path=/docs/components-avatar-avatargroup--docs
+- AvatarGroupArray: https://storybook.woovi.design/?path=/docs/components-avatar-avatargrouparray--docs
+- AvatarGroupSelectedAll: https://storybook.woovi.design/?path=/docs/components-avatar-avatargroupselectedall--docs
+
+## Auth
+
+Componentes de autenticacao e login.
+
+```tsx
+import { LoginWrapper } from '@woovi/ui';
+
+<LoginWrapper>
+  <YourLoginForm />
+</LoginWrapper>
+```
+
+- LoginWrapper: https://storybook.woovi.design/?path=/docs/components-auth-loginwrapper--docs
 
 ## Banner
 
@@ -47,23 +70,16 @@ Componentes para exibir mensagens de alerta, erro e informacoes.
 ```tsx
 import { Banner, BannerError, BannerInfos } from '@woovi/ui';
 
-// Banner generico (conteudo via children)
-<Banner variant="solid" color="info">Informacao importante</Banner>
+// Banner generico
+<Banner variant="info" message="Informacao importante" />
 
-// Banner de erro (recebe array de mensagens)
-<BannerError
-  errors={["Ocorreu um erro ao processar"]}
-  callbackOnClose={() => {}}
-/>
+// Banner de erro
+<BannerError message="Ocorreu um erro ao processar" />
 
-// Banner informativo com detalhes (tabela de erros/informacoes)
+// Banner informativo com detalhes
 <BannerInfos
-  errors={data}
-  columns={[{ field: 'name', headerName: 'Nome' }]}
-  titleHeader="Atencao"
-  onClose={() => {}}
-  refColumn={{ field: 'id', headerName: 'ID' }}
-  isOpen={true}
+  title="Atencao"
+  description="Sua sessao expira em 5 minutos"
 />
 ```
 
@@ -92,8 +108,8 @@ import {
 <ActionButton label="Salvar" loading={isLoading} />
 <ActionButton label="Criar" icon="add" />
 
-// Botao de copiar (children e o label do botao)
-<CopyButton value="texto-para-copiar">Copiar Chave</CopyButton>
+// Botao de copiar
+<CopyButton text="Texto para copiar" />
 
 // Botao de perigo/exclusao
 <DangerButton label="Excluir" onClick={handleDelete} />
@@ -157,10 +173,13 @@ Containers para exibir conteudo em formato de cartao.
 import {
   Card,
   CardActions,
+  CardBasicContext,
   CardContent,
   CardCopy,
   CardForm,
+  CardList,
   CardSelectable,
+  CardSkeleton,
   CardStep,
   CardWithActions,
   CardWithIcon,
@@ -194,22 +213,28 @@ import {
 
 // Card selecionavel
 <CardSelectable
-  isSelected={isSelected}
+  selected={isSelected}
   onClick={() => setSelected(!isSelected)}
 >
   Conteudo selecionavel
 </CardSelectable>
 
 // Card de copia (para chaves Pix, etc)
-<CardCopy content="chave-pix@email.com" />
+<CardCopy value="chave-pix@email.com" />
+
+// Card skeleton para loading
+<CardSkeleton />
 ```
 
 - Card: https://storybook.woovi.design/?path=/docs/components-card-card--docs
 - CardActions: https://storybook.woovi.design/?path=/docs/components-card-cardactions--docs
+- CardBasicContext: https://storybook.woovi.design/?path=/docs/components-card-cardbasiccontext--docs
 - CardContent: https://storybook.woovi.design/?path=/docs/components-card-cardcontent--docs
 - CardCopy: https://storybook.woovi.design/?path=/docs/components-card-cardcopy--docs
 - CardForm: https://storybook.woovi.design/?path=/docs/components-card-cardform--docs
+- CardList: https://storybook.woovi.design/?path=/docs/components-card-cardlist--docs
 - CardSelectable: https://storybook.woovi.design/?path=/docs/components-card-cardselectable--docs
+- CardSkeleton: https://storybook.woovi.design/?path=/docs/components-card-cardskeleton--docs
 - CardStep: https://storybook.woovi.design/?path=/docs/components-card-cardstep--docs
 - CardWithActions: https://storybook.woovi.design/?path=/docs/components-card-cardwithactions--docs
 - CardWithIcon: https://storybook.woovi.design/?path=/docs/components-card-cardwithicon--docs
@@ -227,10 +252,8 @@ import { CardAnalytics, CardAnalyticsSmall } from '@woovi/ui';
 <CardAnalytics
   title="Total de Vendas"
   value="R$ 15.000,00"
-  total="150 transacoes"
-  color="success"
-  loading={false}
-  onClick={() => navigate('/sales')}
+  change="+12%"
+  trend="up"
 />
 
 // Versao compacta
@@ -249,12 +272,13 @@ import { CardAnalytics, CardAnalyticsSmall } from '@woovi/ui';
 Sistema de grid para organizar cards em layout responsivo.
 
 ```tsx
-import { CardGrid, CardField, Grid } from '@woovi/ui';
+import { CardGrid, CardField, CardFieldCentered, Grid } from '@woovi/ui';
 
 // Grid de cards
 <CardGrid>
   <CardField label="Nome" value="Joao Silva" />
   <CardField label="Email" value="joao@email.com" />
+  <CardFieldCentered label="Status" value="Ativo" />
 </CardGrid>
 
 // Grid generico
@@ -266,6 +290,7 @@ import { CardGrid, CardField, Grid } from '@woovi/ui';
 ```
 
 - CardField: https://storybook.woovi.design/?path=/docs/components-cardgrid-cardfield--docs
+- CardFieldCentered: https://storybook.woovi.design/?path=/docs/components-cardgrid-cardfieldcentered--docs
 - CardGrid: https://storybook.woovi.design/?path=/docs/components-cardgrid-cardgrid--docs
 - Grid: https://storybook.woovi.design/?path=/docs/components-cardgrid-grid--docs
 
@@ -324,6 +349,7 @@ Componentes expansiveis para organizar conteudo em secoes.
 import {
   Collapse,
   Collapsible,
+  CollapsibleActions,
   CollapsibleStep,
   CollapsibleTree,
   LeafCollapsible
@@ -334,6 +360,14 @@ import {
   <p>Conteudo expandido</p>
 </Collapsible>
 
+// Collapsible com acoes
+<CollapsibleActions
+  title="Configuracoes"
+  actions={<ActionButton label="Editar" />}
+>
+  <p>Conteudo com acoes</p>
+</CollapsibleActions>
+
 // Collapsible em etapas
 <CollapsibleStep step={1} title="Primeira etapa">
   <p>Conteudo da etapa</p>
@@ -349,20 +383,36 @@ import {
 
 - Collapse: https://storybook.woovi.design/?path=/docs/components-collapsible-collapse--docs
 - Collapsible: https://storybook.woovi.design/?path=/docs/components-collapsible-collapsible--docs
+- CollapsibleActions: https://storybook.woovi.design/?path=/docs/components-collapsible-collapsibleactions--docs
+- CollapsibleInfinityActions: https://storybook.woovi.design/?path=/docs/components-collapsible-collapsibleinfinityactions--docs
 - CollapsibleStep: https://storybook.woovi.design/?path=/docs/components-collapsible-collapsiblestep--docs
 - CollapsibleStepHeader: https://storybook.woovi.design/?path=/docs/components-collapsible-collapsiblestepheader--docs
 - CollapsibleTree: https://storybook.woovi.design/?path=/docs/components-collapsible-collapsibletree--docs
 - LeafCollapsible: https://storybook.woovi.design/?path=/docs/components-collapsible-leafcollapsible--docs
+- TransparencyCollapsibleWrapper: https://storybook.woovi.design/?path=/docs/components-collapsible-transparencycollapsiblewrapper--docs
+
+## Company
+
+Componentes relacionados a empresa/marca.
+
+```tsx
+import { CompanyLogo } from '@woovi/ui';
+
+<CompanyLogo name="Empresa XYZ" logo="/logo.png" />
+```
+
+- CompanyLogo: https://storybook.woovi.design/?path=/docs/components-company-companylogo--docs
 
 ## Content
 
 Componentes para estruturar conteudo e texto.
 
 ```tsx
-import { Content, ActionMargin } from '@woovi/ui';
+import { Content, ActionMargin, ActionMarginText, IntroText } from '@woovi/ui';
 
 // Container de conteudo
 <Content>
+  <IntroText>Bem-vindo ao painel</IntroText>
   <p>Seu conteudo aqui</p>
 </Content>
 
@@ -370,10 +420,17 @@ import { Content, ActionMargin } from '@woovi/ui';
 <ActionMargin>
   <ActionButton label="Salvar" />
 </ActionMargin>
+
+// Texto com margem de acao
+<ActionMarginText>
+  Clique no botao abaixo para continuar
+</ActionMarginText>
 ```
 
 - ActionMargin: https://storybook.woovi.design/?path=/docs/components-content-actionmargin--docs
+- ActionMarginText: https://storybook.woovi.design/?path=/docs/components-content-actionmargintext--docs
 - Content: https://storybook.woovi.design/?path=/docs/components-content-content--docs
+- IntroText: https://storybook.woovi.design/?path=/docs/components-content-introtext--docs
 
 ## Countdown
 
@@ -411,28 +468,6 @@ import { DataGrid, DataGridLoading, DataGridDetailContainer } from '@woovi/ui';
   onRowClick={(row) => console.log(row)}
 />
 
-// DataGrid com exportacao CSV habilitada
-<DataGrid
-  columns={columns}
-  rows={data}
-  exportTable
-/>
-
-// DataGrid com zebra rows
-<DataGrid
-  columns={columns}
-  rows={data}
-  zebraRow
-/>
-
-// DataGrid com rowHref (funcao que recebe row e retorna href)
-<DataGrid
-  columns={columns}
-  rows={data}
-  rowAnchor
-  rowHref={(row) => `/details/${row.id}`}
-/>
-
 // Estado de loading
 <DataGridLoading columns={3} rows={5} />
 ```
@@ -473,7 +508,7 @@ openDialog({
 Paineis laterais deslizantes.
 
 ```tsx
-import { DrawerCard, DrawerResponsiveWrapper } from '@woovi/ui';
+import { DrawerCard, DrawerResponsiveWrapper, SwipeableDrawer } from '@woovi/ui';
 
 // Drawer com card
 <DrawerCard open={isOpen} onClose={handleClose}>
@@ -484,17 +519,28 @@ import { DrawerCard, DrawerResponsiveWrapper } from '@woovi/ui';
 <DrawerResponsiveWrapper open={isOpen} onClose={handleClose}>
   <p>Conteudo adaptativo</p>
 </DrawerResponsiveWrapper>
+
+// Drawer com suporte a swipe
+<SwipeableDrawer open={isOpen} onClose={handleClose}>
+  <p>Arraste para fechar</p>
+</SwipeableDrawer>
 ```
 
 - DrawerCard: https://storybook.woovi.design/?path=/docs/components-drawer-drawercard--docs
 - DrawerResponsiveWrapper: https://storybook.woovi.design/?path=/docs/components-drawer-drawerresponsivewrapper--docs
+- SwipeableDrawer: https://storybook.woovi.design/?path=/docs/components-drawer-swipeabledrawer--docs
 
 ## Error
 
 Componentes para tratamento e exibicao de erros.
 
 ```tsx
-import { ErrorView } from '@woovi/ui';
+import { ErrorBoundaryWithRetry, ErrorView } from '@woovi/ui';
+
+// Error boundary com retry
+<ErrorBoundaryWithRetry>
+  <ComponentQuePodeFalhar />
+</ErrorBoundaryWithRetry>
 
 // Visualizacao de erro
 <ErrorView
@@ -504,8 +550,30 @@ import { ErrorView } from '@woovi/ui';
 />
 ```
 
+- ErrorBoundaryWithRetry: https://storybook.woovi.design/?path=/docs/components-error-errorboundarywithretry--docs
 - ErrorView: https://storybook.woovi.design/?path=/docs/components-error-errorview--docs
 
+## File
+
+Componentes para upload e manipulacao de arquivos.
+
+```tsx
+import { FileDrop, Icon } from '@woovi/ui';
+
+// Area de drop de arquivos
+<FileDrop
+  onDrop={(files) => handleFiles(files)}
+  accept={{ 'image/*': ['.png', '.jpg'] }}
+/>
+
+// Icone Material
+<Icon name="upload" />
+```
+
+- FileDrop: https://storybook.woovi.design/?path=/docs/components-file-filedrop--docs
+- IconButton: https://storybook.woovi.design/?path=/docs/components-file-iconbutton--docs
+- MaterialIcon: https://storybook.woovi.design/?path=/docs/components-file-materialicon--docs
+
 ## Filter
 
 Sistema de filtros para busca e filtragem de dados.
@@ -561,7 +629,7 @@ import { SectionHeading } from '@woovi/ui';
 Utilitarios de layout e espacamento.
 
 ```tsx
-import { Divider, HorizontalStack } from '@woovi/ui';
+import { Divider, HorizontalStack, HoverPopper } from '@woovi/ui';
 
 // Divisor
 <Divider />
@@ -571,20 +639,26 @@ import { Divider, HorizontalStack } from '@woovi/ui';
   <ActionButton label="Botao 1" />
   <ActionButton label="Botao 2" />
 </HorizontalStack>
+
+// Popper ao passar o mouse
+<HoverPopper content="Tooltip detalhado">
+  <span>Passe o mouse</span>
+</HoverPopper>
 ```
 
 - Divider: https://storybook.woovi.design/?path=/docs/components-helpers-divider--docs
 - HorizontalStack: https://storybook.woovi.design/?path=/docs/components-helpers-horizontalstack--docs
+- HoverPopper: https://storybook.woovi.design/?path=/docs/components-helpers-hoverpopper--docs
 
 ## Import
 
 Componentes para importacao de arquivos (CSV, XLSX).
 
 ```tsx
-import { DropzoneFile } from '@woovi/ui';
+import { Dropzone, DropzoneFile } from '@woovi/ui';
 
 // Dropzone para upload
-<DropzoneFile
+<Dropzone
   onDrop={(files) => handleImport(files)}
   accept={{ 'text/csv': ['.csv'], 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': ['.xlsx'] }}
 >
@@ -592,6 +666,7 @@ import { DropzoneFile } from '@woovi/ui';
 </Dropzone>
 ```
 
+- Dropzone: https://storybook.woovi.design/?path=/docs/components-import-dropzone--docs
 - DropzoneFile: https://storybook.woovi.design/?path=/docs/components-import-dropzonefile--docs
 
 ## Layout
@@ -599,17 +674,24 @@ import { DropzoneFile } from '@woovi/ui';
 Componentes para estrutura de pagina.
 
 ```tsx
-import { LayoutRoot, LayoutWrapper } from '@woovi/ui';
+import { LayoutRoot, LayoutWrapper, LayoutWrapperFluid } from '@woovi/ui';
 
+// Layout raiz da aplicacao
 <LayoutRoot>
   <LayoutWrapper>
     <Content />
   </LayoutWrapper>
 </LayoutRoot>
+
+// Layout fluido (sem max-width)
+<LayoutWrapperFluid>
+  <Content />
+</LayoutWrapperFluid>
 ```
 
 - LayoutRoot: https://storybook.woovi.design/?path=/docs/components-layoutroot--docs
 - LayoutWrapper: https://storybook.woovi.design/?path=/docs/components-layoutwrapper-layoutwrapper--docs
+- LayoutWrapperFluid: https://storybook.woovi.design/?path=/docs/components-layoutwrapper-layoutwrapperfluid--docs
 
 ## Link
 
@@ -636,16 +718,20 @@ import { Link, WooviLink } from '@woovi/ui';
 Logotipos da Woovi e OpenPix.
 
 ```tsx
-import { Logo, WooviLogo } from '@woovi/ui';
+import { Logo, WooviLogo, OpenPixLogoColor } from '@woovi/ui';
 
 // Logo generico
 <Logo src="/logo.png" alt="Empresa" />
 
 // Logo Woovi
 <WooviLogo width={150} />
+
+// Logo OpenPix colorido
+<OpenPixLogoColor width={120} />
 ```
 
 - Logo: https://storybook.woovi.design/?path=/docs/components-logo--docs
+- OpenPixLogoColor: https://storybook.woovi.design/?path=/docs/components-logo-openpixlogocolor--docs
 - WooviLogo: https://storybook.woovi.design/?path=/docs/components-logo-woovilogo--docs
 
 ## MUI
@@ -667,39 +753,33 @@ import { BoxFlex, Typography } from '@woovi/ui';
 
 ## MultiFactor
 
-Componentes de autenticacao multi-fator para verificacao segura de usuarios.
+Componentes de autenticacao multi-fator para pagamentos.
 
 ```tsx
 import {
-  MultiFactorConfirmModal,
+  MultiFactorPixPaymentView,
   MultiFactorPixPaymentMatch,
   MultiFactorPixPaymentMismatch,
-  MultiFactorPixPaymentView
+  MultiFactorConfirmModal
 } from '@woovi/ui';
 
-// Modal de confirmacao MFA (suporta TOTP, WhatsApp/SMS e email)
-<MultiFactorConfirmModal
-  title="Confirm your identity"
-  isOpen={isOpen}
+// View de pagamento multi-fator
+<MultiFactorPixPaymentView
+  amount={5000}
   onConfirm={handleConfirm}
-  handleOpenChange={handleClose}
-  email="user@example.com"
 />
 
-// Verificacao PIX com sucesso (CPF corresponde)
-<MultiFactorPixPaymentMatch amount={0.01} />
+// Confirmacao de match
+<MultiFactorPixPaymentMatch />
 
-// Verificacao PIX com falha (CPF nao corresponde)
-<MultiFactorPixPaymentMismatch amount={0.01} />
-
-// View do QR Code PIX para verificacao
-<MultiFactorPixPaymentView
-  pixAuthentication={{ brCode: '...', taxID: '...' }}
-  onGetResult={handleGetResult}
+// Modal de confirmacao MFA
+<MultiFactorConfirmModal
+  open={isOpen}
+  onConfirm={handleMFA}
+  onClose={handleClose}
 />
 ```
 
-- MultiFactorConfirmModal: https://storybook.woovi.design/?path=/docs/components-multifactor-multifactorconfirmmodal--docs
 - MultiFactorPixPaymentMatch: https://storybook.woovi.design/?path=/docs/components-multifactor-multifactorpixpaymentmatch--docs
 - MultiFactorPixPaymentMismatch: https://storybook.woovi.design/?path=/docs/components-multifactor-multifactorpixpaymentmismatch--docs
 - MultiFactorPixPaymentView: https://storybook.woovi.design/?path=/docs/components-multifactor-multifactorpixpaymentview--docs
@@ -835,7 +915,7 @@ import { ContentBoundary } from '@woovi/ui';
 Componentes com integracao de rotas.
 
 ```tsx
-import { RoutedTabs } from '@woovi/ui';
+import { RoutedTabs, TabbedContent } from '@woovi/ui';
 
 // Tabs com rotas
 <RoutedTabs
@@ -845,16 +925,25 @@ import { RoutedTabs } from '@woovi/ui';
     { label: 'Configuracoes', path: '/settings' },
   ]}
 />
+
+// Conteudo com tabs
+<TabbedContent
+  tabs={[
+    { label: 'Tab 1', content: <Content1 /> },
+    { label: 'Tab 2', content: <Content2 /> },
+  ]}
+/>
 ```
 
 - RoutedTabs: https://storybook.woovi.design/?path=/docs/components-routed-routedtabs--docs
+- TabbedContent: https://storybook.woovi.design/?path=/docs/components-routed-tabbedcontent--docs
 
 ## ScreenHeader
 
 Cabecalhos de tela para dashboards.
 
 ```tsx
-import { ScreenHeaderUI, ScreenHeaderCard } from '@woovi/ui';
+import { ScreenHeaderUI, ScreenHeaderCard, ScreenHeaderUIResponsive } from '@woovi/ui';
 
 // Header de tela
 <ScreenHeaderUI
@@ -865,10 +954,17 @@ import { ScreenHeaderUI, ScreenHeaderCard } from '@woovi/ui';
 
 // Header em card
 <ScreenHeaderCard title="Configuracoes" />
+
+// Header responsivo
+<ScreenHeaderUIResponsive
+  title="Pagamentos"
+  backHref="/home"
+/>
 ```
 
 - ScreenHeaderUI: https://storybook.woovi.design/?path=/docs/components-screenheader-screenheaderui--docs
 - ScreenHeaderCard: https://storybook.woovi.design/?path=/docs/components-screenheadercard-screenheadercard--docs
+- ScreenHeaderUIResponsive: https://storybook.woovi.design/?path=/docs/components-screenheaderresponsive-screenheaderuiresponsive--docs
 
 ## Search
 
@@ -877,13 +973,10 @@ Campos de busca.
 ```tsx
 import { GlobalSearchField, SearchField } from '@woovi/ui';
 
-// Campo de busca global (controlled component)
+// Campo de busca global
 <GlobalSearchField
-  value={search}
-  onChange={(e) => setSearch(e.target.value)}
-  variant="primary"
-  onDebounceApplied={(value, event) => handleSearch(value)}
-  fullWidth={false}
+  placeholder="Buscar transacoes..."
+  onSearch={(query) => handleSearch(query)}
 />
 
 // Campo de busca simples
@@ -901,7 +994,7 @@ import { GlobalSearchField, SearchField } from '@woovi/ui';
 Componentes de selecao.
 
 ```tsx
-import { Select } from '@woovi/ui';
+import { Select, SelectAll } from '@woovi/ui';
 
 // Select basico
 <Select
@@ -913,9 +1006,18 @@ import { Select } from '@woovi/ui';
     { value: 'inactive', label: 'Inativo' },
   ]}
 />
+
+// Select com opcao "Todos"
+<SelectAll
+  label="Filtrar por"
+  value={filter}
+  onChange={setFilter}
+  options={options}
+/>
 ```
 
 - Select: https://storybook.woovi.design/?path=/docs/components-select-select--docs
+- SelectAll: https://storybook.woovi.design/?path=/docs/components-select-selectall--docs
 
 ## Sidebar
 
@@ -977,6 +1079,23 @@ import { LedgerStatementText, TransactionTypeText } from '@woovi/ui';
 - LedgerStatementText: https://storybook.woovi.design/?path=/docs/components-statement-ledgerstatementtext--docs
 - TransactionTypeText: https://storybook.woovi.design/?path=/docs/components-statement-transactiontypetext--docs
 
+## Stepper
+
+Componente de progresso em etapas.
+
+```tsx
+import { Step, Stepper } from '@woovi/ui';
+
+<Stepper activeStep={1}>
+  <Step label="Dados pessoais" />
+  <Step label="Endereco" />
+  <Step label="Confirmacao" />
+</Stepper>
+```
+
+- Step: https://storybook.woovi.design/?path=/docs/components-step--docs
+- Stepper: https://storybook.woovi.design/?path=/docs/components-stepper-stepper--docs
+
 ## SwipeableDialog
 
 Dialog com suporte a gestos de swipe para mobile.
@@ -1007,47 +1126,24 @@ import {
 
 ## Table
 
-Componentes de tabela, listas virtualizadas, alternancia de visualizacao e parser EMV.
+Componentes de tabela e listas virtualizadas.
 
 ```tsx
-import {
-  CardListVirtualized,
-  CardListLoading,
-  CardColumn,
-  TableToggleViewModel,
-  TablePixEMV
-} from '@woovi/ui';
+import { CardListVirtualized, CardListLoading } from '@woovi/ui';
 
 // Lista virtualizada para grandes conjuntos de dados
 <CardListVirtualized
-  columns={columns}
-  data={rows}
-  onScrollToBottom={handleLoadMore}
-  cardListDefaultHeight="300px"
+  items={transactions}
+  renderItem={(item) => <TransactionCard data={item} />}
+  height={600}
 />
 
 // Estado de loading
-<CardListLoading columns={columns} size={5} />
-
-// Card individual com colunas (usado internamente pela lista virtualizada)
-<CardColumn
-  columns={columns}
-  row={{ id: 1, name: 'John', email: 'john@example.com' }}
-  onCardClick={(card, event) => handleClick(card)}
-/>
-
-// Toggle entre visualizacao tabela e card
-<TableToggleViewModel />
-
-// Tabela de dados EMV de QR Code Pix (com linhas expansiveis para tags aninhadas)
-<TablePixEMV emv="00020126580014br.gov.bcb.pix0136..." />
+<CardListLoading count={5} />
 ```
 
-- CardColumn: https://storybook.woovi.design/?path=/docs/components-table-cardcolumn--docs
 - CardListLoading: https://storybook.woovi.design/?path=/docs/components-table-cardlistloading--docs
 - CardListVirtualized: https://storybook.woovi.design/?path=/docs/components-table-cardlistvirtualized--docs
-- TableToggleViewModel: https://storybook.woovi.design/?path=/docs/components-table-tabletoggleviewmodel--docs
-- TablePixEMV: https://storybook.woovi.design/?path=/docs/components-table-tablepixemv--docs
 
 ## Tag
 
@@ -1057,8 +1153,10 @@ Componentes de tag e status.
 import {
   Tag,
   TagsContainer,
+  TagWebhookStatus,
   CashbackTagStatus,
   TransactionTagStatus,
+  TransactionTagEntryType
 } from '@woovi/ui';
 
 // Tag simples
@@ -1072,21 +1170,25 @@ import {
 </TagsContainer>
 
 // Tags de status especificos
+<TagWebhookStatus status="active" />
 <CashbackTagStatus status="pending" />
 <TransactionTagStatus status="completed" />
+<TransactionTagEntryType type="credit" />
 ```
 
 - Tag: https://storybook.woovi.design/?path=/docs/components-tag-tag--docs
 - TagsContainer: https://storybook.woovi.design/?path=/docs/components-tag-tagscontainer--docs
+- TagWebhookStatus: https://storybook.woovi.design/?path=/docs/components-tagwebhookstatus--docs
 - CashbackTagStatus: https://storybook.woovi.design/?path=/docs/components-cashbacktagstatus--docs
 - TransactionTagStatus: https://storybook.woovi.design/?path=/docs/components-transactiontagstatus--docs
+- TransactionTagEntryType: https://storybook.woovi.design/?path=/docs/components-transactiontagentrytype--docs
 
 ## Term
 
 Componentes de termos e condicoes.
 
 ```tsx
-import { Terms, TermsLink } from '@woovi/ui';
+import { Terms, TermsLink, TermsModal } from '@woovi/ui';
 
 // Checkbox de termos
 <Terms
@@ -1096,6 +1198,13 @@ import { Terms, TermsLink } from '@woovi/ui';
 
 // Link para termos
 <TermsLink href="/terms">Termos de Uso</TermsLink>
+
+// Modal de termos
+<TermsModal
+  open={showTerms}
+  onAccept={handleAccept}
+  onClose={() => setShowTerms(false)}
+/>
 ```
 
 - Terms: https://storybook.woovi.design/?path=/docs/components-term-terms--docs
@@ -1165,19 +1274,53 @@ Componentes utilitarios diversos.
 ```tsx
 import {
   BackButton,
+  Badge,
+  Circle,
+  CircleButton,
+  Column,
   CopyInput,
+  EmptyMessage,
   EncryptedText,
   FloatingMenu,
+  LinearProgress,
   Loading,
+  OverflowDiv,
+  ProgressBar,
+  QuestionTooltip,
   Row,
+  SafeTextTooltip,
+  ToggleButtonGroup
 } from '@woovi/ui';
 
 // Botao voltar
 <BackButton onClick={() => navigate(-1)} />
 
+// Badge de notificacao
+<Badge count={5}>
+  <Icon name="notifications" />
+</Badge>
+
+// Circulo decorativo
+<Circle color="primary" size={40} />
+
+// Botao circular
+<CircleButton icon="add" onClick={handleAdd} />
+
+// Layout em coluna
+<Column gap={2}>
+  <Item1 />
+  <Item2 />
+</Column>
+
 // Input com botao de copiar
 <CopyInput value="texto-para-copiar" />
 
+// Mensagem de estado vazio
+<EmptyMessage
+  title="Nenhuma transacao"
+  description="Suas transacoes aparecerao aqui"
+/>
+
 // Texto criptografado (ex: CPF mascarado)
 <EncryptedText value="123.456.789-00" />
 
@@ -1189,23 +1332,64 @@ import {
   ]}
 />
 
+// Barra de progresso linear
+<LinearProgress value={75} />
+
 // Loading spinner
 <Loading />
 <Loading size="small" />
 
+// Div com overflow controlado
+<OverflowDiv maxHeight={200}>
+  <LongContent />
+</OverflowDiv>
+
+// Barra de progresso
+<ProgressBar value={50} max={100} />
+
+// Tooltip com icone de interrogacao
+<QuestionTooltip>
+  Explicacao detalhada aqui
+</QuestionTooltip>
+
 // Layout em linha
 <Row gap={2}>
   <Item1 />
   <Item2 />
 </Row>
+
+// Tooltip com texto truncado seguro
+<SafeTextTooltip text="Texto muito longo que sera truncado..." />
+
+// Grupo de botoes toggle
+<ToggleButtonGroup
+  value={view}
+  onChange={setView}
+  options={[
+    { value: 'list', label: 'Lista' },
+    { value: 'grid', label: 'Grid' },
+  ]}
+/>
 ```
 
 - BackButton: https://storybook.woovi.design/?path=/docs/components-backbutton--docs
+- Badge: https://storybook.woovi.design/?path=/docs/components-badge--docs
+- Circle: https://storybook.woovi.design/?path=/docs/components-circle--docs
+- CircleButton: https://storybook.woovi.design/?path=/docs/components-circlebutton--docs
+- Column: https://storybook.woovi.design/?path=/docs/components-column--docs
 - CopyInput: https://storybook.woovi.design/?path=/docs/components-copyinput--docs
+- EmptyMessage: https://storybook.woovi.design/?path=/docs/components-emptymessage--docs
 - EncryptedText: https://storybook.woovi.design/?path=/docs/components-encryptedtext--docs
 - FloatingMenu: https://storybook.woovi.design/?path=/docs/components-floatingmenu--docs
+- LinearProgress: https://storybook.woovi.design/?path=/docs/components-linearprogress--docs
 - Loading: https://storybook.woovi.design/?path=/docs/components-loading--docs
+- OverflowDiv: https://storybook.woovi.design/?path=/docs/components-overflowdiv--docs
+- ProgressBar: https://storybook.woovi.design/?path=/docs/components-progressbar--docs
+- QuestionTooltip: https://storybook.woovi.design/?path=/docs/components-questiontooltip--docs
 - Row: https://storybook.woovi.design/?path=/docs/components-row--docs
+- SafeTextTooltip: https://storybook.woovi.design/?path=/docs/components-safetexttooltip--docs
+- ToggleButtonGroup: https://storybook.woovi.design/?path=/docs/components-togglebuttongroup--docs
+- UnsupportedBrowserWarning: https://storybook.woovi.design/?path=/docs/components-unsupportedbrowser-unsupportedbrowserwarning--docs
 - WindowPopper: https://storybook.woovi.design/?path=/docs/components-windowpopper-windowpopper--docs
 
 ---
@@ -1269,8 +1453,8 @@ function App() {
           <CardAnalytics
             title="Total Recebido"
             value="R$ 15.000,00"
-            total="150 transacoes"
-            color="success"
+            change="+12%"
+            trend="up"
           />
 
           <Card>