@woovi/ui 6.3.5 → 6.3.7

package/dist/llms.txt

@@ -0,0 +1,1474 @@
+# Woovi UI - Component Library
+
+> 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
+Pacote NPM: @woovi/ui
+
+---
+
+## Instalacao
+
+```bash
+npm install @woovi/ui
+# ou
+yarn add @woovi/ui
+# ou
+pnpm add @woovi/ui
+```
+
+## Dependencias
+
+- React 18+
+- Material-UI (MUI) v5+
+- TypeScript
+
+---
+
+## Avatar
+
+Componentes para exibir fotos de perfil e grupos de usuarios.
+
+```tsx
+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
+
+Componentes para exibir mensagens de alerta, erro e informacoes.
+
+```tsx
+import { Banner, BannerError, BannerInfos } from '@woovi/ui';
+
+// Banner generico
+<Banner variant="info" message="Informacao importante" />
+
+// Banner de erro
+<BannerError message="Ocorreu um erro ao processar" />
+
+// Banner informativo com detalhes
+<BannerInfos
+  title="Atencao"
+  description="Sua sessao expira em 5 minutos"
+/>
+```
+
+- Banner: https://storybook.woovi.design/?path=/docs/components-banner-banner--docs
+- BannerError: https://storybook.woovi.design/?path=/docs/components-banner-bannererror--docs
+- BannerInfos: https://storybook.woovi.design/?path=/docs/components-banner-bannerinfos--docs
+
+## Buttons
+
+Botoes para acoes, copiar, pagamentos e menus.
+
+```tsx
+import {
+  ActionButton,
+  ButtonMenu,
+  ButtonMenuItem,
+  CopyButton,
+  DangerButton,
+  PayWithPixButton,
+  ResponsiveSplitButton,
+  SplitButton
+} from '@woovi/ui';
+
+// Botao de acao primario
+<ActionButton label="Salvar" onClick={handleSave} />
+<ActionButton label="Salvar" loading={isLoading} />
+<ActionButton label="Criar" icon="add" />
+
+// Botao de copiar
+<CopyButton text="Texto para copiar" />
+
+// Botao de perigo/exclusao
+<DangerButton label="Excluir" onClick={handleDelete} />
+
+// Menu de botoes
+<ButtonMenu label="Opcoes">
+  <ButtonMenuItem onClick={handleEdit}>Editar</ButtonMenuItem>
+  <ButtonMenuItem onClick={handleDelete}>Excluir</ButtonMenuItem>
+</ButtonMenu>
+
+// Botao de pagamento Pix
+<PayWithPixButton onClick={handlePixPayment} />
+
+// Split button com opcoes
+<SplitButton
+  options={[
+    { label: 'Acao 1', onClick: () => {} },
+    { label: 'Acao 2', onClick: () => {} },
+  ]}
+/>
+```
+
+- ActionButton: https://storybook.woovi.design/?path=/docs/components-buttons-actionbutton--docs
+- ButtonMenu: https://storybook.woovi.design/?path=/docs/components-buttons-buttonmenu--docs
+- CopyButton: https://storybook.woovi.design/?path=/docs/components-buttons-copybutton--docs
+- DangerButton: https://storybook.woovi.design/?path=/docs/components-buttons-dangerbutton--docs
+- PayWithPixButton: https://storybook.woovi.design/?path=/docs/components-buttons-paywithpixbutton--docs
+- ResponsiveSplitButton: https://storybook.woovi.design/?path=/docs/components-buttons-responsivesplitbutton--docs
+- SplitButton: https://storybook.woovi.design/?path=/docs/components-buttons-splitbutton--docs
+
+### ClickPix Buttons
+
+Botoes especificos para pagamentos via Pix com um clique.
+
+```tsx
+import {
+  ClickPixButton,
+  DonateClickPixButton,
+  DonateWithClickButton
+} from '@woovi/ui';
+
+// Botao ClickPix padrao
+<ClickPixButton onClick={handleClickPix} />
+
+// Botao de doacao ClickPix
+<DonateClickPixButton amount={1000} correlationID="donation-123" />
+
+// Botao de doacao com click
+<DonateWithClickButton />
+```
+
+- ClickPixButton: https://storybook.woovi.design/?path=/docs/components-buttons-clickpix-clickpixbutton--docs
+- DonateClickPixButton: https://storybook.woovi.design/?path=/docs/components-buttons-clickpix-donateclickpixbutton--docs
+- DonateWithClickButton: https://storybook.woovi.design/?path=/docs/components-buttons-clickpix-donatewithclickbutton--docs
+
+## Card
+
+Containers para exibir conteudo em formato de cartao.
+
+```tsx
+import {
+  Card,
+  CardActions,
+  CardBasicContext,
+  CardContent,
+  CardCopy,
+  CardForm,
+  CardList,
+  CardSelectable,
+  CardSkeleton,
+  CardStep,
+  CardWithActions,
+  CardWithIcon,
+  CardWithLink,
+  CardWithLinkSkeleton
+} from '@woovi/ui';
+
+// Card basico
+<Card>
+  <CardContent>
+    <h2>Titulo do Card</h2>
+    <p>Conteudo do card</p>
+  </CardContent>
+  <CardActions>
+    <ActionButton label="Acao" />
+  </CardActions>
+</Card>
+
+// Card com icone
+<CardWithIcon
+  icon="payment"
+  title="Pagamentos"
+  description="Gerencie seus pagamentos"
+/>
+
+// Card com link
+<CardWithLink
+  title="Ver detalhes"
+  href="/details"
+/>
+
+// Card selecionavel
+<CardSelectable
+  selected={isSelected}
+  onClick={() => setSelected(!isSelected)}
+>
+  Conteudo selecionavel
+</CardSelectable>
+
+// Card de copia (para chaves Pix, etc)
+<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
+- CardWithLink: https://storybook.woovi.design/?path=/docs/components-card-cardwithlink--docs
+- CardWithLinkSkeleton: https://storybook.woovi.design/?path=/docs/components-card-cardwithlinkskeleton--docs
+
+## CardAnalytics
+
+Componentes para exibir metricas e dados analiticos.
+
+```tsx
+import { CardAnalytics, CardAnalyticsSmall } from '@woovi/ui';
+
+// Card de metricas
+<CardAnalytics
+  title="Total de Vendas"
+  value="R$ 15.000,00"
+  change="+12%"
+  trend="up"
+/>
+
+// Versao compacta
+<CardAnalyticsSmall
+  label="Conversao"
+  value="3.2%"
+/>
+```
+
+- CardAnalytics: https://storybook.woovi.design/?path=/docs/components-cardanalytics-cardanalytics--docs
+- CardAnalyticsSkeleton: https://storybook.woovi.design/?path=/docs/components-cardanalytics-cardanalyticsskeleton--docs
+- CardAnalyticsSmall: https://storybook.woovi.design/?path=/docs/components-cardanalytics-cardanalyticssmall--docs
+
+## CardGrid
+
+Sistema de grid para organizar cards em layout responsivo.
+
+```tsx
+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
+<Grid columns={3} gap={2}>
+  <Card>Item 1</Card>
+  <Card>Item 2</Card>
+  <Card>Item 3</Card>
+</Grid>
+```
+
+- 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
+
+## CardWithImage
+
+Card com suporte a imagens.
+
+```tsx
+import { CardWithImage } from '@woovi/ui';
+
+<CardWithImage
+  image="/product.jpg"
+  title="Produto"
+  description="Descricao do produto"
+/>
+```
+
+- CardWithImage: https://storybook.woovi.design/?path=/docs/components-cardwithimage-cardwithimage--docs
+
+## ClickPix
+
+Componentes da marca ClickPix para pagamentos instantaneos.
+
+```tsx
+import { ClickPixButton, ClickPixLogo } from '@woovi/ui';
+
+// Logo ClickPix
+<ClickPixLogo width={120} />
+
+// Botao ClickPix
+<ClickPixButton variant="primary" onClick={handlePay} />
+```
+
+- ClickPixButton: https://storybook.woovi.design/?path=/docs/components-clickpix-clickpixbutton--docs
+- ClickPixLogo: https://storybook.woovi.design/?path=/docs/components-clickpix-clickpixlogo--docs
+
+## Code
+
+Componente para exibir blocos de codigo.
+
+```tsx
+import { Code } from '@woovi/ui';
+
+<Code language="javascript">
+  {`const pix = await woovi.createCharge({ value: 1000 });`}
+</Code>
+```
+
+- Code: https://storybook.woovi.design/?path=/docs/components-code-code--docs
+
+## Collapsible
+
+Componentes expansiveis para organizar conteudo em secoes.
+
+```tsx
+import {
+  Collapse,
+  Collapsible,
+  CollapsibleActions,
+  CollapsibleStep,
+  CollapsibleTree,
+  LeafCollapsible
+} from '@woovi/ui';
+
+// Collapsible simples
+<Collapsible title="Ver mais detalhes">
+  <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>
+</CollapsibleStep>
+
+// Arvore collapsible
+<CollapsibleTree>
+  <LeafCollapsible title="Item pai">
+    <LeafCollapsible title="Item filho" />
+  </LeafCollapsible>
+</CollapsibleTree>
+```
+
+- 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, ActionMarginText, IntroText } from '@woovi/ui';
+
+// Container de conteudo
+<Content>
+  <IntroText>Bem-vindo ao painel</IntroText>
+  <p>Seu conteudo aqui</p>
+</Content>
+
+// Margem para acoes
+<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
+
+Componentes de contagem regressiva para expiracoes de pagamento.
+
+```tsx
+import { Countdown } from '@woovi/ui';
+
+// Contagem regressiva para expiracao de cobranca Pix
+<Countdown
+  expiresAt={new Date('2024-12-31T23:59:59')}
+  onExpire={() => console.log('Expirado!')}
+/>
+```
+
+- Countdown: https://storybook.woovi.design/?path=/docs/components-countdown-countdown--docs
+- ShowCounter: https://storybook.woovi.design/?path=/docs/components-countdown-showcounter--docs
+
+## DataGrid
+
+Tabelas de dados avancadas com suporte a paginacao, ordenacao e filtros.
+
+```tsx
+import { DataGrid, DataGridLoading, DataGridDetailContainer } from '@woovi/ui';
+
+// DataGrid basico
+<DataGrid
+  columns={[
+    { field: 'id', headerName: 'ID', width: 90 },
+    { field: 'name', headerName: 'Nome', width: 150 },
+    { field: 'status', headerName: 'Status', width: 110 },
+  ]}
+  rows={data}
+  loading={isLoading}
+  onRowClick={(row) => console.log(row)}
+/>
+
+// Estado de loading
+<DataGridLoading columns={3} rows={5} />
+```
+
+- DataGrid: https://storybook.woovi.design/?path=/docs/components-datagrid-datagrid--docs
+- DataGridDetailContainer: https://storybook.woovi.design/?path=/docs/components-datagrid-datagriddetailcontainer--docs
+- DataGridLoading: https://storybook.woovi.design/?path=/docs/components-datagrid-datagridloading--docs
+
+## Dialog
+
+Sistema de modais e dialogos.
+
+```tsx
+import { DialogProvider, useDialog } from '@woovi/ui';
+
+// Provider no root da aplicacao
+<DialogProvider>
+  <App />
+</DialogProvider>
+
+// Hook para abrir dialogos
+const { openDialog, closeDialog } = useDialog();
+
+openDialog({
+  title: 'Confirmar acao',
+  content: 'Deseja continuar?',
+  actions: [
+    { label: 'Cancelar', onClick: closeDialog },
+    { label: 'Confirmar', onClick: handleConfirm },
+  ],
+});
+```
+
+- DialogProvider: https://storybook.woovi.design/?path=/docs/components-dialog-dialogprovider--docs
+
+## Drawer
+
+Paineis laterais deslizantes.
+
+```tsx
+import { DrawerCard, DrawerResponsiveWrapper, SwipeableDrawer } from '@woovi/ui';
+
+// Drawer com card
+<DrawerCard open={isOpen} onClose={handleClose}>
+  <CardContent>Conteudo do drawer</CardContent>
+</DrawerCard>
+
+// Drawer responsivo (lateral em desktop, bottom sheet em mobile)
+<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 { ErrorBoundaryWithRetry, ErrorView } from '@woovi/ui';
+
+// Error boundary com retry
+<ErrorBoundaryWithRetry>
+  <ComponentQuePodeFalhar />
+</ErrorBoundaryWithRetry>
+
+// Visualizacao de erro
+<ErrorView
+  title="Algo deu errado"
+  message="Nao foi possivel carregar os dados"
+  onRetry={handleRetry}
+/>
+```
+
+- 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.
+
+```tsx
+import { Filter, FilterRelayFormik } from '@woovi/ui';
+
+// Filtro basico
+<Filter
+  filters={[
+    { field: 'status', label: 'Status', options: ['Ativo', 'Inativo'] },
+    { field: 'date', label: 'Data', type: 'date' },
+  ]}
+  onFilter={(values) => handleFilter(values)}
+/>
+```
+
+- Filter: https://storybook.woovi.design/?path=/docs/components-filter-filter--docs
+
+## Form
+
+Componentes de formulario.
+
+```tsx
+import { FieldRow } from '@woovi/ui';
+
+// Linha de campo de formulario
+<FieldRow label="Email" required>
+  <input type="email" />
+</FieldRow>
+```
+
+- FieldRow: https://storybook.woovi.design/?path=/docs/components-form-fieldrow--docs
+
+## Heading
+
+Cabecalhos e titulos de secao.
+
+```tsx
+import { SectionHeading } from '@woovi/ui';
+
+<SectionHeading
+  title="Transacoes"
+  subtitle="Ultimas 30 dias"
+  action={<ActionButton label="Ver todas" />}
+/>
+```
+
+- SectionHeading: https://storybook.woovi.design/?path=/docs/components-heading-sectionheading--docs
+
+## Helpers
+
+Utilitarios de layout e espacamento.
+
+```tsx
+import { Divider, HorizontalStack, HoverPopper } from '@woovi/ui';
+
+// Divisor
+<Divider />
+
+// Stack horizontal
+<HorizontalStack spacing={2}>
+  <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 { Dropzone, DropzoneFile } from '@woovi/ui';
+
+// Dropzone para upload
+<Dropzone
+  onDrop={(files) => handleImport(files)}
+  accept={{ 'text/csv': ['.csv'], 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': ['.xlsx'] }}
+>
+  Arraste arquivos CSV ou XLSX aqui
+</Dropzone>
+```
+
+- Dropzone: https://storybook.woovi.design/?path=/docs/components-import-dropzone--docs
+- DropzoneFile: https://storybook.woovi.design/?path=/docs/components-import-dropzonefile--docs
+
+## Layout
+
+Componentes para estrutura de pagina.
+
+```tsx
+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
+
+Componentes de navegacao e links.
+
+```tsx
+import { Link, WooviLink } from '@woovi/ui';
+
+// Link interno
+<Link href="/dashboard">Ir para Dashboard</Link>
+
+// Link externo
+<Link href="https://woovi.com" external>Woovi</Link>
+
+// Link estilizado Woovi
+<WooviLink href="/pricing">Ver precos</WooviLink>
+```
+
+- Link: https://storybook.woovi.design/?path=/docs/components-link--docs
+- WooviLink: https://storybook.woovi.design/?path=/docs/components-link-woovilink--docs
+
+## Logo
+
+Logotipos da Woovi e OpenPix.
+
+```tsx
+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
+
+Componentes baseados no Material-UI customizados.
+
+```tsx
+import { BoxFlex, Typography } from '@woovi/ui';
+
+// Box flexbox
+<BoxFlex gap={2} alignItems="center">
+  <Typography variant="h6">Titulo</Typography>
+  <Typography variant="body1">Texto</Typography>
+</BoxFlex>
+```
+
+- BoxFlex: https://storybook.woovi.design/?path=/docs/components-mui-boxflex--docs
+- Typography: https://storybook.woovi.design/?path=/docs/components-mui-typography--docs
+
+## MultiFactor
+
+Componentes de autenticacao multi-fator para pagamentos.
+
+```tsx
+import {
+  MultiFactorPixPaymentView,
+  MultiFactorPixPaymentMatch,
+  MultiFactorPixPaymentMismatch,
+  MultiFactorConfirmModal
+} from '@woovi/ui';
+
+// View de pagamento multi-fator
+<MultiFactorPixPaymentView
+  amount={5000}
+  onConfirm={handleConfirm}
+/>
+
+// Confirmacao de match
+<MultiFactorPixPaymentMatch />
+
+// Modal de confirmacao MFA
+<MultiFactorConfirmModal
+  open={isOpen}
+  onConfirm={handleMFA}
+  onClose={handleClose}
+/>
+```
+
+- 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
+
+## OpenPix
+
+Componentes especificos do ecossistema OpenPix.
+
+```tsx
+import { ChargeTagStatus, PixTransactionTypeTag, QRCodeWrapper } from '@woovi/ui';
+
+// Tag de status de cobranca
+<ChargeTagStatus status="COMPLETED" />
+<ChargeTagStatus status="PENDING" />
+<ChargeTagStatus status="EXPIRED" />
+
+// Tag de tipo de transacao Pix
+<PixTransactionTypeTag type="PAYMENT" />
+<PixTransactionTypeTag type="WITHDRAWAL" />
+
+// Wrapper para QR Code Pix
+<QRCodeWrapper
+  value="00020126580014br.gov.bcb.pix..."
+  size={256}
+/>
+```
+
+- ChargeTagStatus: https://storybook.woovi.design/?path=/docs/components-openpix-chargetagstatus--docs
+- PixTransactionTypeTag: https://storybook.woovi.design/?path=/docs/components-openpix-pixtransactiontypetag--docs
+- QrCodeWrapper: https://storybook.woovi.design/?path=/docs/components-openpix-qrcodewrapper--docs
+
+## PaymentLinkRow
+
+Componente para exibir links de pagamento em listas.
+
+```tsx
+import { PaymentLinkRow } from '@woovi/ui';
+
+<PaymentLinkRow
+  title="Pagamento #123"
+  value={5000}
+  status="pending"
+  href="/payments/123"
+/>
+```
+
+- PaymentLinkRow: https://storybook.woovi.design/?path=/docs/components-paymentlinkrow-paymentlinkrow--docs
+
+## PinInput
+
+Campos de entrada para PIN e codigos de verificacao.
+
+```tsx
+import { PinInput, PinInputFormik } from '@woovi/ui';
+
+// Pin input standalone
+<PinInput
+  length={6}
+  onChange={(value) => setPin(value)}
+/>
+
+// Pin input com Formik
+<PinInputFormik name="verificationCode" length={4} />
+```
+
+- PinInput: https://storybook.woovi.design/?path=/docs/components-pininput-pininput--docs
+- PinInputFormik: https://storybook.woovi.design/?path=/docs/components-pininput-pininputformik--docs
+
+## RadioCard
+
+Card selecionavel estilo radio button.
+
+```tsx
+import { RadioCard } from '@woovi/ui';
+
+<RadioCard
+  selected={selectedOption === 'pix'}
+  onClick={() => setSelectedOption('pix')}
+  title="Pix"
+  description="Pagamento instantaneo"
+  icon="pix"
+/>
+```
+
+- RadioCard: https://storybook.woovi.design/?path=/docs/components-radiocard-radiocard--docs
+
+## RewardTicket
+
+Componente para exibir tickets de recompensa/cashback.
+
+```tsx
+import { RewardTicket } from '@woovi/ui';
+
+<RewardTicket
+  value={500}
+  description="Cashback de 5%"
+/>
+```
+
+- RewardTicket: https://storybook.woovi.design/?path=/docs/components-rewardticket-rewardticket--docs
+
+## Ribbon
+
+Faixa decorativa para destacar elementos.
+
+```tsx
+import { Ribbon } from '@woovi/ui';
+
+<Card>
+  <Ribbon label="Novo" color="primary" />
+  <CardContent>Conteudo</CardContent>
+</Card>
+```
+
+- Ribbon: https://storybook.woovi.design/?path=/docs/components-ribbon-ribbon--docs
+
+## Root
+
+Componentes de estrutura raiz da aplicacao.
+
+```tsx
+import { ContentBoundary } from '@woovi/ui';
+
+<ContentBoundary>
+  <YourAppContent />
+</ContentBoundary>
+```
+
+- ContentBoundary: https://storybook.woovi.design/?path=/docs/components-root-contentboundary--docs
+
+## Routed
+
+Componentes com integracao de rotas.
+
+```tsx
+import { RoutedTabs, TabbedContent } from '@woovi/ui';
+
+// Tabs com rotas
+<RoutedTabs
+  tabs={[
+    { label: 'Visao Geral', path: '/overview' },
+    { label: 'Transacoes', path: '/transactions' },
+    { 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, ScreenHeaderUIResponsive } from '@woovi/ui';
+
+// Header de tela
+<ScreenHeaderUI
+  title="Dashboard"
+  subtitle="Visao geral das suas transacoes"
+  actions={<ActionButton label="Exportar" />}
+/>
+
+// 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
+
+Campos de busca.
+
+```tsx
+import { GlobalSearchField, SearchField } from '@woovi/ui';
+
+// Campo de busca global
+<GlobalSearchField
+  placeholder="Buscar transacoes..."
+  onSearch={(query) => handleSearch(query)}
+/>
+
+// Campo de busca simples
+<SearchField
+  value={search}
+  onChange={(e) => setSearch(e.target.value)}
+/>
+```
+
+- GlobalSearchField: https://storybook.woovi.design/?path=/docs/components-search-globalsearchfield--docs
+- SearchField: https://storybook.woovi.design/?path=/docs/components-searchfield--docs
+
+## Select
+
+Componentes de selecao.
+
+```tsx
+import { Select, SelectAll } from '@woovi/ui';
+
+// Select basico
+<Select
+  label="Status"
+  value={status}
+  onChange={setStatus}
+  options={[
+    { value: 'active', label: 'Ativo' },
+    { 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
+
+Sistema de navegacao lateral.
+
+```tsx
+import { Sidebar, SidebarGroup, SidebarItem, SidebarMenuList } from '@woovi/ui';
+
+<Sidebar>
+  <SidebarGroup title="Principal">
+    <SidebarItem icon="dashboard" label="Dashboard" href="/" />
+    <SidebarItem icon="payment" label="Pagamentos" href="/payments" />
+  </SidebarGroup>
+  <SidebarGroup title="Configuracoes">
+    <SidebarItem icon="settings" label="Conta" href="/settings" />
+  </SidebarGroup>
+</Sidebar>
+```
+
+- Sidebar: https://storybook.woovi.design/?path=/docs/components-sidebar-sidebar--docs
+- Group: https://storybook.woovi.design/?path=/docs/components-sidebar-group--docs
+- Item: https://storybook.woovi.design/?path=/docs/components-sidebar-item--docs
+- MenuList: https://storybook.woovi.design/?path=/docs/components-sidebar-menulist--docs
+
+## Snackbar
+
+Notificacoes toast.
+
+```tsx
+import { useSnackbar } from '@woovi/ui';
+
+const { showSnackbar } = useSnackbar();
+
+// Mostrar notificacao
+showSnackbar('Operacao realizada com sucesso!', { variant: 'success' });
+showSnackbar('Erro ao processar', { variant: 'error' });
+showSnackbar('Atencao!', { variant: 'warning' });
+```
+
+- Snackbar: https://storybook.woovi.design/?path=/docs/components-snackbar-snackbar--docs
+- CloseSnack: https://storybook.woovi.design/?path=/docs/components-snackbar-closesnack--docs
+
+## Statement
+
+Componentes para extrato e historico de transacoes.
+
+```tsx
+import { LedgerStatementText, TransactionTypeText } from '@woovi/ui';
+
+// Texto de extrato
+<LedgerStatementText type="credit" value={1000} />
+<LedgerStatementText type="debit" value={-500} />
+
+// Texto de tipo de transacao
+<TransactionTypeText type="PIX_RECEIVED" />
+<TransactionTypeText type="PIX_SENT" />
+```
+
+- 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.
+
+```tsx
+import {
+  SwipeableDialog,
+  SwipeableDialogContent,
+  SwipeableDialogTitle,
+  SwipeableDialogActions,
+  SwipeableModal
+} from '@woovi/ui';
+
+<SwipeableDialog open={isOpen} onClose={handleClose}>
+  <SwipeableDialogTitle>Confirmar</SwipeableDialogTitle>
+  <SwipeableDialogContent>
+    Deseja continuar com esta acao?
+  </SwipeableDialogContent>
+  <SwipeableDialogActions>
+    <ActionButton label="Cancelar" onClick={handleClose} />
+    <ActionButton label="Confirmar" onClick={handleConfirm} />
+  </SwipeableDialogActions>
+</SwipeableDialog>
+```
+
+- SwipeableDialog: https://storybook.woovi.design/?path=/docs/components-swipeabledialog-swipeabledialog--docs
+- SwipeableModal: https://storybook.woovi.design/?path=/docs/components-swipeablemodal-swipeablemodal--docs
+
+## Table
+
+Componentes de tabela e listas virtualizadas.
+
+```tsx
+import { CardListVirtualized, CardListLoading } from '@woovi/ui';
+
+// Lista virtualizada para grandes conjuntos de dados
+<CardListVirtualized
+  items={transactions}
+  renderItem={(item) => <TransactionCard data={item} />}
+  height={600}
+/>
+
+// Estado de loading
+<CardListLoading count={5} />
+```
+
+- CardListLoading: https://storybook.woovi.design/?path=/docs/components-table-cardlistloading--docs
+- CardListVirtualized: https://storybook.woovi.design/?path=/docs/components-table-cardlistvirtualized--docs
+
+## Tag
+
+Componentes de tag e status.
+
+```tsx
+import {
+  Tag,
+  TagsContainer,
+  TagWebhookStatus,
+  CashbackTagStatus,
+  TransactionTagStatus,
+  TransactionTagEntryType
+} from '@woovi/ui';
+
+// Tag simples
+<Tag label="Pix" color="primary" />
+<Tag label="Novo" color="success" />
+
+// Container de tags
+<TagsContainer>
+  <Tag label="Tag 1" />
+  <Tag label="Tag 2" />
+</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, TermsModal } from '@woovi/ui';
+
+// Checkbox de termos
+<Terms
+  checked={accepted}
+  onChange={setAccepted}
+/>
+
+// 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
+- TermsLink: https://storybook.woovi.design/?path=/docs/components-term-termslink--docs
+
+## Text
+
+Componentes de texto.
+
+```tsx
+import { TextMultiline } from '@woovi/ui';
+
+<TextMultiline text="Texto com\\nmultiplas\\nlinhas" />
+```
+
+- TextMultiline: https://storybook.woovi.design/?path=/docs/components-text-textmultiline--docs
+
+## Theme
+
+Sistema de temas e dark mode.
+
+```tsx
+import { ThemeProvider, useThemeMode } from '@woovi/ui';
+
+// Provider de tema
+<ThemeProvider>
+  <App />
+</ThemeProvider>
+
+// Hook para alternar tema
+const { mode, toggleMode } = useThemeMode();
+
+<button onClick={toggleMode}>
+  Tema atual: {mode}
+</button>
+```
+
+- ThemeProvider: https://storybook.woovi.design/?path=/docs/components-themeprovider--docs
+
+## Timeline
+
+Linha do tempo para historico de eventos.
+
+```tsx
+import { Timeline, TimelineItem } from '@woovi/ui';
+
+<Timeline>
+  <TimelineItem
+    title="Pagamento recebido"
+    date="2024-01-15 10:30"
+    status="success"
+  />
+  <TimelineItem
+    title="Cobranca criada"
+    date="2024-01-15 10:00"
+    status="info"
+  />
+</Timeline>
+```
+
+- Timeline: https://storybook.woovi.design/?path=/docs/components-timeline-timeline--docs
+
+## Utility Components
+
+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" />
+
+// Menu flutuante
+<FloatingMenu
+  items={[
+    { label: 'Editar', onClick: handleEdit },
+    { label: 'Excluir', onClick: handleDelete },
+  ]}
+/>
+
+// 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
+
+---
+
+## Exemplo Completo
+
+```tsx
+import {
+  ThemeProvider,
+  LayoutRoot,
+  LayoutWrapper,
+  Sidebar,
+  SidebarGroup,
+  SidebarItem,
+  ScreenHeaderUI,
+  Card,
+  CardContent,
+  CardAnalytics,
+  DataGrid,
+  ActionButton,
+  ChargeTagStatus,
+  useSnackbar,
+} from '@woovi/ui';
+
+function App() {
+  const { showSnackbar } = useSnackbar();
+
+  const columns = [
+    { field: 'id', headerName: 'ID', width: 100 },
+    { field: 'customer', headerName: 'Cliente', width: 200 },
+    { field: 'amount', headerName: 'Valor', width: 150 },
+    {
+      field: 'status',
+      headerName: 'Status',
+      width: 120,
+      renderCell: (params) => <ChargeTagStatus status={params.value} />
+    },
+  ];
+
+  return (
+    <ThemeProvider>
+      <LayoutRoot>
+        <Sidebar>
+          <SidebarGroup title="Menu">
+            <SidebarItem icon="dashboard" label="Dashboard" href="/" />
+            <SidebarItem icon="payment" label="Cobrancas" href="/charges" />
+          </SidebarGroup>
+        </Sidebar>
+
+        <LayoutWrapper>
+          <ScreenHeaderUI
+            title="Dashboard"
+            actions={
+              <ActionButton
+                label="Nova Cobranca"
+                onClick={() => showSnackbar('Cobranca criada!')}
+              />
+            }
+          />
+
+          <CardAnalytics
+            title="Total Recebido"
+            value="R$ 15.000,00"
+            change="+12%"
+            trend="up"
+          />
+
+          <Card>
+            <CardContent>
+              <DataGrid columns={columns} rows={data} />
+            </CardContent>
+          </Card>
+        </LayoutWrapper>
+      </LayoutRoot>
+    </ThemeProvider>
+  );
+}
+```
+
+---
+
+Gerado automaticamente para integracao com LLMs.