intimacao-original.docx
Documento de origem · DOCX · 248 KB
DisponívelRevisão do clienteAtualizado conforme o Design System v1.0
Biblioteca de interface
Catálogo de componentes
Referência viva para validar a identidade visual, comparar estados e acompanhar a evolução dos componentes antes do desenvolvimento dos fluxos da aplicação.
- Componentes
- 44
- Tema
- Claro
- Versão
- 1.0
Fundamentos visuais
Referências globais de cor, arredondamento e elevação.
Cores semânticas
Tokens oficiais em OKLCH. O nome descreve a função, não a aparência.
Background
--backgroundCard
--cardPrimary
--primarySecondary
--secondaryMuted
--mutedAccent
--accentDestructive
--destructiveSidebar
--sidebar-backgroundSéries de gráfico
chart-1 a chart-5
Arredondamento
Raios moderados preservam a sobriedade da interface.
smmdlgxlElevação
Bordas separam; sombras discretas comunicam elevação.
Card
shadow-cardPopover
shadow-popoverTypography
Hierarquia reutilizável para títulos, conteúdo, labels, metadados e números.
Variantes semânticas
Cada papel combina hierarquia, peso e cor sem alterar a semântica do elemento HTML escolhido.
Page title
text-2xl · semibold · foreground
Gestão de intimações
Section title
text-lg · semibold · foreground
Processos aguardando revisão
Card title
text-base · semibold · foreground
Detalhes do processo
Body
text-sm · normal · foreground
Revise os dados antes de autorizar o protocolo.
Label
text-sm · medium · foreground
Helper
text-sm · normal · muted-foreground
Use o número completo, incluindo os dígitos verificadores.
Metadata
text-xs · normal · muted-foreground
Numeric
text-2xl · semibold · tabular-nums
Tamanhos
A escala aprovada pode substituir o tamanho padrão de qualquer variante.
Intimação recebida
Extra pequeno · text-xs
Intimação recebida
Pequeno · text-sm
Intimação recebida
Base · text-base
Intimação recebida
Grande · text-lg
Intimação recebida
Destaque · text-2xl
Semântica e API nativa
A prop as preserva títulos, labels e demais atributos nativos relevantes.
Label associado ao campo; texto auxiliar com contraste próprio.
Truncamento e quebra de linha
Comportamentos determinísticos para células compactas, identificadores longos e larguras móveis.
Quebra normal
Informações operacionais se adaptam naturalmente à largura disponível.
Sem quebra
Status: em revisão
Truncado em uma linha
Petição intermediária com pedido de tutela de urgência
Quebra de palavra
5001234562026821000150012345620268210001
Quebra em qualquer ponto
documento-revisado-versao-final-assinada-digitalmente.docx
Icon
Ícones Lucide normalizados para navegação, ações, feedback e indicadores.
Variantes
Cores semânticas distinguem hierarquia e significado sem substituir o texto.
Default
text-foreground
Muted
text-muted-foreground
Accent
text-accent-foreground
Success
text-chart-3
Destructive
text-destructive
Tamanhos
A escala mantém os traços Lucide consistentes entre tabelas, controles e navegação.
Extra pequeno
size-3
Pequeno
size-4
Médio
size-5
Grande
size-6
Contextos de uso
Navegação, ação, feedback e indicador usam o mesmo componente e sempre mantêm texto de apoio.
Navegação
Visão geral
Ação
Baixar documento
Feedback
Protocolo concluído
Indicador
Documento anexado
Estados herdados do componente pai
Passe o mouse, navegue com Tab e pressione os controles: foco, hover, active e disabled pertencem ao pai.
Default
Hover, foco e active
Active selecionado
Disabled
Acessibilidade
Ícones decorativos ficam fora da árvore acessível; ícones informativos recebem nome sem se tornarem controles.
Decorativo por padrão
O SVG usa aria-hidden e o significado permanece no texto visível.
Informativo, sem interação
O SVG usa role img e nome acessível; controles icon-only devem nomear o próprio elemento pai.
Brand Lockup
Identidade oficial do escritório para login, sidebar e navegação móvel.
Variantes
O monograma oficial é preservado sem redesenho e combinado ao nome conforme o contexto.
Rafael MenezesAdvocaciaFull
Login e superfícies claras
Mark
Espaços compactos
Rafael MenezesTamanhos
Três escalas atendem navegação compacta, uso padrão e apresentação institucional.
Rafael MenezesAdvocaciaPequeno
size-8
Rafael MenezesAdvocaciaMédio
size-10
Rafael MenezesAdvocaciaGrande
size-14
Aplicações
A mesma API cobre login, sidebar e navegação móvel sem duplicar a composição.
Rafael MenezesAdvocaciaRafael MenezesEstado e acessibilidade
A marca é estática por padrão; quando funciona como link, recebe foco visível e nome acessível.
Estática
Rafael MenezesAdvocaciaO monograma é decorativo porque o nome completo já está visível.
Link para o início
A variante isolada usa texto alternativo e o link expõe foco ao navegar com Tab.
Badge
Categoria, papel, contagem pequena e informação de contexto não interativa.
Variantes
Cada badge combina rótulo e ícone para que o significado não dependa somente da cor.
AdministrativoDocumentoRevisão humanaConcluídoFalha no envio
Tamanhos
Sm concentra informações em tabelas; md é o padrão para detalhes e filtros.
Pequeno
h-5
Médio
h-6
Badge removível
O badge permanece informativo; a remoção é um botão separado, com nome acessível, Tooltip, foco e alvo de toque de 40 px.
Responsável: Rafael Menezes
Uso responsivo
Badges preservam o conteúdo em linhas compactas e quebram com o conjunto quando a largura é limitada.
Processo 5001234-56ContenciosoDocumento validado
Card
Agrupamento de informações, formulários administrativos e blocos de detalhe.
Variantes
Cada card reúne um único assunto. A borda é padrão; elevação é reservada para superfícies destacadas.
Card padrão
Agrupa informações relacionadas com borda e superfície card.
Card elevado
Usa sombra discreta quando existe elevação real na interface.
Card muted
Separa contexto auxiliar sem competir com o conteúdo principal.
Com ícone
O ícone contextual fica no cabeçalho e não substitui o título.
Composição
Cabeçalho, conteúdo e rodapé organizam detalhes e ações administrativas sem cards aninhados.
Peça para revisão
Processo 5001234-56. Revise o documento antes de autorizar o protocolo.
Revisão humana
Documento gerado e pronto para conferência.
Estados interativos
Somente cards interativos recebem hover e foco. Selecione uma opção com mouse, Tab, Enter ou Espaço.
Opção selecionada: Revisão assistida.
Alert
Avisos persistentes para informação, risco, confirmação e falha dentro da tela.
Variantes
Avisos persistentes usam título, texto e ícone para não depender somente da cor.
Informação operacional
O protocolo será enviado quando a sessão EPROC estiver ativa.
Revisão necessária
Confirme os dados da peça antes de autorizar o protocolo.
Documento validado
A versão revisada está pronta para a próxima etapa.
Envio não concluído
Não foi possível acessar o EPROC. Tente novamente.
Tamanhos
Compact atende avisos locais; default comporta explicações persistentes dentro da tela.
Compact
Uma atualização está disponível.
Default
A autorização do protocolo registra a conferência do advogado responsável e libera a peça para a fila da sessão.
Fechamento opcional
O botão de fechar é um controle independente, com Tooltip, nome acessível e foco visível.
Prazo próximo
Este processo vence amanhã às 18h. Priorize a revisão.
Mensagem assíncrona
O Spinner identifica a espera e respeita a redução de movimento; o estado é controlado sem backend.
Validando documento
Aguarde enquanto verificamos os requisitos para o protocolo.
Field
Composição acessível de label, controle, descrição, obrigatoriedade e validação.
Vertical e obrigatório
O layout padrão mantém label visível, associação programática e indicação textual de obrigatoriedade.
Este nome será exibido nas tarefas atribuídas ao usuário.
Horizontal em telas amplas
No mobile o conteúdo permanece empilhado; a organização lateral só é aplicada em larguras médias ou maiores.
Utilize o identificador completo informado pelo tribunal.
Validação e estados
O erro usa aria-invalid, mensagem corretiva e ícone; a confirmação só aparece quando agrega segurança ao fluxo.
Informe um e-mail institucional válido, como nome@escritorio.com.br.
Endereço confirmado para notificações importantes.
Reative a conta para permitir alterações neste campo.
Agrupamento
FieldSet e FieldLegend agrupam controles relacionados para leitores de tela e navegação por teclado.
Input
Entrada textual para login, busca, cadastro e informações operacionais.
Variantes
As variantes reservam espaço para ícones sem ocultar labels ou alterar a API nativa do input.
Informe um e-mail institucional completo.
Tamanhos
Compact atende filtros e tabelas; default é o tamanho padrão para formulários.
Estados
Use Tab para verificar o foco visível. Disabled e read-only mantêm seu significado além da mudança de cor.
Navegue até o campo com Tab.
Uso responsivo
Campos ocupam a largura disponível no mobile e preservam densidade adequada em telas amplas.
Select
Seleção de status, papel, responsável e opções de filtro.
Variantes
O chevron é fornecido automaticamente; ícones nas opções reforçam o significado quando agregam contexto.
Status selecionado: Aguardando revisão.
Selecione um papel para criar o usuário.
Tamanhos
Compact usa h-9 em filtros; default usa h-10 em formulários.
Estados e teclado
Abra com Enter ou Espaço, percorra as opções com as setas e confirme com Enter.
Uso responsivo
O trigger ocupa a largura disponível no mobile, mantendo o menu alinhado ao controle.
Checkbox
Seleção de registros e ações em lote com estados claro, parcial e desabilitado.
Variantes e estados
A área de toque é de 44 px no mobile. Use Tab e Espaço para verificar foco e alternância.
Este registro não pode ser programado nesta etapa.
Seleção em tabela
A variante table mantém 40 px de alvo em desktop e 44 px no mobile. O cabeçalho fica indeterminado quando apenas parte dos registros está selecionada.
1 de 3 registros selecionados.
Uso responsivo
O controle visual permanece size-4; o espaçamento do container preserva toque confortável sem aumentar a densidade da tabela.
Switch
Alternância acessível para propriedades reversíveis de usuários, como conta ativa.
Variantes e tamanhos
Use default para propriedades gerais e compact em linhas densas. Os controles preservam área de toque mínima de 40 px.
Conta ativa para novos acessos.
Preferência secundária.
Uso em listagens administrativas.
Controle de menor densidade visual.
Estados interativos
Use Tab e Espaço para alternar o controle e verificar o foco visível. O estado é anunciado por posição e por texto, não apenas por cor.
Ativa e disponível para acesso.
Estado atual: Ativada
A conta não pode ser alterada durante uma atualização crítica.
Uso permitido
Switches representam propriedades reversíveis, como a situação de uma conta. Não use este controle para ativar o modo autônomo: essa decisão exige confirmação explícita.
Para ações administrativas de impacto, utilize um botão seguido de Alert Dialog com o resumo da responsabilidade.
File Upload
Reenvio acessível do documento DOCX revisado antes da autorização de protocolo.
Variantes
O botão é o padrão em qualquer viewport. A dropzone aparece somente no desktop como melhoria progressiva e mantém o botão no mobile.
Button
Documento DOCX
Nenhum arquivo selecionado.
Dropzone responsiva
DOCX de até 20 MB
Estados
Todos os estados são determinísticos e independem de backend. Uploading bloqueia nova seleção e remoção para evitar ações duplicadas.
Idle
Documento DOCX
Arquivo selecionado
contestacao-revisada.docx
1.7 MB
Uploading
contestacao-revisada.docx
1.7 MB
Enviando documento64%
Success
contestacao-revisada.docx
1.7 MB · Enviado
Tipo inválido
contestacao-revisada.pdf
903 KB
Selecione um documento no formato DOCX.
Tamanho excedido
processo-completo.docx
27 MB
O arquivo excede o tamanho máximo permitido.
Erro de upload
contestacao-revisada.docx
1.7 MB
Não foi possível enviar o arquivo. Tente novamente.
Disabled
contestacao-revisada.docx
1.7 MB
Acessibilidade e uso
O input nativo preserva teclado e leitor de tela; mensagens de erro são associadas ao campo e anunciadas. Ícones são decorativos e o nome do arquivo permanece em texto.
Tab abre o foco visível.
Enter ou Espaço abre o seletor.
Arrastar é opcional, nunca obrigatório.
Dialog
Formulários curtos, edição administrativa e conteúdo que não exige navegação.
Variantes
Cada cenário abre separadamente. O foco fica contido no diálogo e retorna ao gatilho após o fechamento.
Tamanhos
Small atende mensagens curtas, Medium é o padrão e Large acomoda formulários com mais contexto.
Envio crítico
O estado submitting bloqueia Escape, clique no overlay, botão de fechar e cancelamento até a operação terminar.
Interação e acessibilidade
Opening e closing usam transições curtas com redução de movimento; título e descrição são anunciados, e o botão icon-only possui nome acessível e Tooltip.
Escape fecha quando permitido.
Tab permanece no diálogo.
Foco retorna ao gatilho.
Alert Dialog
Confirmação explícita para ações de risco ou responsabilidade jurídica.
Variantes
Ícone, título e texto reforçam a consequência sem depender apenas da cor. Cada confirmação abre isoladamente.
Confirmação assíncrona
A primeira tentativa demonstra erro e mantém o diálogo aberto. Tentar novamente confirma a ação; durante loading, cancelamento e ações duplicadas ficam bloqueados.
Nenhuma autorização registrada nesta demonstração.
Aplicações e acessibilidade
O componente atende autorizar protocolo, programar em lote, ativar modo autônomo e desativar usuário. O foco inicial vai para Cancelar e permanece contido no alerta.
Autorizar protocolo
Programar em lote
Ativar modo autônomo
Desativar usuário
Sheet
Painel lateral para navegação mobile e central de notificações.
Variantes
Left atende a navegação mobile; right apresenta notificações. Ambos mantêm focus trap, Escape e retorno de foco ao gatilho.
Estados do conteúdo
Loading, empty e error têm cenários independentes e não dependem de backend. Feche um painel antes de abrir o seguinte.
Comportamento responsivo
No mobile, o painel usa quase toda a largura disponível. A partir de sm, fica limitado a sm:max-w-sm; abertura e fechamento respeitam movimento reduzido.
Menu identifica navegação.
Bell identifica notificações.
Fechar possui nome e Tooltip.
Tooltip
Nomeia controles icon-only e esclarece ações compactas por hover ou foco.
Uso em controles compactos
A variante única usa primary e primary-foreground. Passe o cursor ou navegue com Tab para revelar o conteúdo.
Estados e acessibilidade
Hidden é o estado inicial. Visible é acionado por hover ou foco após um delay curto de 300 ms; Escape fecha o conteúdo e devolve o foco ao gatilho.
Conteúdo curto, sem ações internas.
Gatilhos icon-only mantêm aria-label.
A animação é removida quando o movimento reduzido é preferido.
Toast / Sonner
Feedback transitório de operações concluídas, em andamento ou com falha.
Variantes
Os feedbacks são transitórios, anunciam seu conteúdo e incluem ícone e texto para não depender somente de cor.
Promise e estados
Este cenário controlado demonstra entering, loading e success. Use o botão de fechar ou aguarde a duração padrão para dismissed.
O mesmo toast evolui de loading para success sem duplicar mensagens.
Ação e responsividade
O erro oferece “Tentar novamente” como ação opcional. Os toasts respeitam a largura disponível e aparecem em pilha no canto inferior direito.
Close disponível por teclado e ponteiro.
Ações são opcionais e claramente rotuladas.
O indicador de loading respeita redução de movimento.
Spinner
Indicador de espera curta em botões, campos e ações assíncronas.
Tamanhos
Use o menor tamanho que preserve legibilidade: xs e sm para controles compactos; md e lg para áreas de conteúdo.
xs
sm
md
lg
Variantes e contexto
Current herda a cor do contexto; muted reduz a ênfase; inverse mantém contraste dentro de ações primárias.
Current
Muted
Inverse
Ação em andamento
Durante a espera, o botão preserva o texto, bloqueia ações duplicadas e expõe aria-busy. A região de status anuncia o progresso.
Carregando documentos...
Movimento reduzido
O Spinner é exclusivamente um estado de loading. A rotação é removida quando a pessoa prefere movimento reduzido, mantendo o indicador visível.
O ícone mantém forma e contraste mesmo sem animação.
Skeleton
Placeholder de carregamento inicial que preserva a estrutura do conteúdo.
Variantes
Os placeholders seguem a estrutura do conteúdo que será exibido, reduzindo mudanças de layout durante o carregamento inicial.
Text
Card
Table row
Detail
Substituição pelo conteúdo
Alterne o cenário para conferir a substituição direta do loading, com região marcada como ocupada enquanto os dados não estão disponíveis.
Carregando processo...
Movimento reduzido
O pulso é removido para pessoas que preferem movimento reduzido; o contraste e o espaço reservado permanecem visíveis.
Skeleton representa somente loading e é removido assim que o conteúdo real estiver disponível.
Progress
Progresso determinado para upload e avanços acompanhados de valor textual.
Estados e variantes
O progresso é determinado e inclui porcentagem visível. Complete usa success; erro combina destructive com texto e ícone.
Zero0%
Em andamento54%
Completo100%
Upload concluído.
Erro54%
Envio interrompido. Tente novamente.
Tamanhos
Sm atende áreas compactas; md cria ênfase suficiente para upload e qualidade sem aumentar excessivamente a densidade.
Sm
Md
Cenário controlado
Os controles reproduzem zero, avanço, completo e erro sem backend. O valor é exposto pelo componente Radix e pelo texto visível.
Reenvio do documento0%
App Shell
Estrutura responsiva para sidebar, cabeçalho mobile, conteúdo e notificações.
Estrutura responsiva
Abaixo de lg, a sidebar dá lugar à barra superior e ao Sheet. Em telas amplas, a navegação permanece fixa na superfície carvão. Os rótulos são apenas ilustrativos enquanto a navegação definitiva está pendente.
Rafael MenezesAdvocaciaVisão geral
Operação jurídica
Estrutura preparada para os módulos que ainda serão definidos.
Revisões pendentes
Conteúdo ilustrativo do shell.
Protocolos recentes
Conteúdo ilustrativo do shell.
Variante mobile exercitável
O modo forçado permite testar a navegação aberta e fechada mesmo em desktop. Menu e notificações preservam alvos de 44 px, nome acessível, foco e Tooltip.
Rafael MenezesAdvocaciaVisão geral
Operação jurídica
Estrutura preparada para os módulos que ainda serão definidos.
Revisões pendentes
Conteúdo ilustrativo do shell.
Protocolos recentes
Conteúdo ilustrativo do shell.
Sidebar
Navegação principal responsiva com estados expandido, recolhido e mobile.
Expanded, collapsed e mobile-sheet
A demonstração responde à viewport. Em desktop, alterne entre expandida e recolhida; em mobile, o mesmo gatilho abre um Sheet com focus trap. Os módulos são ilustrativos porque os rótulos finais permanecem pendentes.
Rafael MenezesNavegação principal
Sidebar responsiva
Use o controle no cabeçalho ou pressione Ctrl/⌘ + B. Em mobile, ele abre a navegação como Sheet.
Estado ativo
Champagne contido, texto e aria-current.
Modo recolhido
Ícones mantêm Tooltip e alvo de 40 px.
Estados e acessibilidade
Itens oferecem default, hover, focus-visible e active. O item atual combina cor, texto e aria-current; labels recolhidas permanecem disponíveis em Tooltip.
Alvos possuem no mínimo 40 px.
Ctrl/⌘ + B alterna a navegação.
O foco retorna ao gatilho ao fechar.
Page Header
Título, descrição, breadcrumb e ação principal responsivos para cada página.
Default e sem ação
Título, descrição e breadcrumb compõem a hierarquia da página. Em telas somente de consulta, o cabeçalho não reserva espaço para ações.
Intimações recebidas
Acompanhe as comunicações importadas do EPROC e identifique as que exigem revisão.
With-actions
Ações ficam alinhadas ao conteúdo em telas amplas e ocupam toda a largura no mobile. O ícone Lucide reforça a ação principal sem substituir seu texto.
Usuários
Administre as pessoas autorizadas a acessar a operação jurídica.
Compact
A variante compacta reduz título e espaçamentos para contextos densos, preservando descrição e sem adicionar ícone decorativo ao título.
Detalhes do processo
Processo 5001234-56.2026.8.21.0001
Loading via Skeleton
O estado mantém a estrutura do cabeçalho, informa aria-busy e bloqueia a exposição prematura do conteúdo. O controle abaixo alterna o cenário sem depender de backend.
Carregando cabeçalho da página...
Data Toolbar
Busca, filtros por critérios operacionais e limpeza para listagens de dados.
Default: empty e filter-active
Digite uma busca ou selecione status e responsável. O contador e a ação de limpeza aparecem somente quando existe um critério ativo.
Compact e searching
A densidade compacta reduz os espaços entre controles. O Spinner e a mensagem ao vivo sinalizam uma busca assíncrona sem bloquear novos critérios.
Stacked-mobile e no-results
Busca, filtros e limpeza permanecem empilhados até lg. A ausência de resultados é comunicada por texto, sem depender somente de cor.
Disabled
Durante uma atualização crítica, o fieldset desabilita busca, filtros e ações como uma única unidade sem remover seu contexto.
Responsive Data Table
Tabela compacta no desktop e lista estruturada no mobile, com sorting, seleção e ações.
Standard: populated, hover e sorted
Ordene por processo, parte ou prazo. No desktop, os controles ficam no cabeçalho; no mobile, aparecem antes da lista estruturada.
Ordenar:
| Status | Responsável | |||
|---|---|---|---|---|
5001234-56.2026.8.21.0001 | Comercial Aurora Ltda. | Em análise | 30/09/2026 | Rafael Menezes |
5019876-12.2026.8.21.0001 | Marina Oliveira | Revisão humana | 02/10/2026 | Equipe jurídica |
5034567-89.2026.8.21.0001 | Indústria Vale Sul S.A. | Peça pronta | 05/10/2026 | Rafael Menezes |
5001234-56.2026.8.21.0001
- Parte
- Comercial Aurora Ltda.
- Status
- Em análise
- Prazo
- 30/09/2026
- Responsável
- Rafael Menezes
5019876-12.2026.8.21.0001
- Parte
- Marina Oliveira
- Status
- Revisão humana
- Prazo
- 02/10/2026
- Responsável
- Equipe jurídica
5034567-89.2026.8.21.0001
- Parte
- Indústria Vale Sul S.A.
- Status
- Peça pronta
- Prazo
- 05/10/2026
- Responsável
- Rafael Menezes
Selectable e row-selected
A seleção usa Checkbox com estado parcial no cabeçalho. O registro selecionado combina contorno, fundo e controle marcado, sem depender somente de cor.
Ordenar:
| Status | Responsável | ||||
|---|---|---|---|---|---|
5001234-56.2026.8.21.0001 | Comercial Aurora Ltda. | Em análise | 30/09/2026 | Rafael Menezes | |
5019876-12.2026.8.21.0001 | Marina Oliveira | Revisão humana | 02/10/2026 | Equipe jurídica |
5001234-56.2026.8.21.0001
- Parte
- Comercial Aurora Ltda.
- Status
- Em análise
- Prazo
- 30/09/2026
- Responsável
- Rafael Menezes
5019876-12.2026.8.21.0001
- Parte
- Marina Oliveira
- Status
- Revisão humana
- Prazo
- 02/10/2026
- Responsável
- Equipe jurídica
Actionable
Cada registro oferece um menu secundário com Ellipsis, nome acessível e Tooltip real. O menu funciona por clique, foco e teclado.
Ordenar:
| Status | Responsável | Ações | |||
|---|---|---|---|---|---|
5001234-56.2026.8.21.0001 | Comercial Aurora Ltda. | Em análise | 30/09/2026 | Rafael Menezes | |
5019876-12.2026.8.21.0001 | Marina Oliveira | Revisão humana | 02/10/2026 | Equipe jurídica |
5001234-56.2026.8.21.0001
- Parte
- Comercial Aurora Ltda.
- Status
- Em análise
- Prazo
- 30/09/2026
- Responsável
- Rafael Menezes
5019876-12.2026.8.21.0001
- Parte
- Marina Oliveira
- Status
- Revisão humana
- Prazo
- 02/10/2026
- Responsável
- Equipe jurídica
Loading, empty, filtered-empty, error e pagination-loading
Os botões alternam cenários determinísticos sem backend. Loading preserva a estrutura; os estados vazios são distintos; erro permite tentar novamente; atualização de página mantém os registros visíveis.
| Status | Responsável |
|---|
Carregando Estados da listagem de intimações...
Pagination
Navegação acessível entre páginas de registros com versões numerada e compacta.
Numbered: desktop
A navegação numerada mantém a página atual identificada por aria-current, além de fundo e contorno. Use Tab para conferir o foco visível.
Página atual: 4
Previous-next: mobile
Em telas estreitas, os controles mantêm texto e ícone, em vez da sequência numérica. O cenário inicia na primeira página para demonstrar o limite desabilitado.
Página 1 de 3
Tamanhos e loading
O tamanho sm é compacto no desktop e preserva alvo de toque de 40 px no mobile. Durante a atualização, controles ficam indisponíveis e o estado é anunciado.
sm
md
Controles disponíveis
Bulk Action Bar
Ações permitidas sobre múltiplas peças selecionadas, com elegibilidade e feedback operacional.
Estados operacionais
Alterne os estados sem backend. Sem seleção, o componente não ocupa espaço; processamento bloqueia ações duplicadas e mantém o texto da ação estável.
6 peças selecionadas
Inline desktop e sticky mobile
No desktop, a barra permanece compacta junto à listagem. No mobile, ocupa toda a largura disponível, empilha as ações e permanece visível na base durante a rolagem.
inline-desktop
3 peças selecionadas
sticky-mobile
5 peças selecionadas
3 elegíveis e 2 inelegíveis
Itens inelegíveis permanecerão sem alteração.
Empty State
Orientação contextual para listas vazias, sem resultados, notificações ou trabalho pendente.
Variantes compactas
As quatro variantes usam texto explícito e ícone Lucide contextual em superfície muted. Nenhuma ação é sugerida quando não existe um próximo passo real.
first-use
Nenhum documento disponível
Os documentos vinculados ao processo aparecerão aqui quando estiverem disponíveis.
no-results
Nenhum resultado encontrado
Não há registros correspondentes aos critérios de busca informados.
no-notifications
Nenhuma notificação
Novos avisos e atualizações aparecerão nesta área.
no-pending-work
Nenhuma pendência
Todas as peças que exigiam atenção já foram encaminhadas.
Tamanho page com ação contextual
A ação aparece somente porque remover os filtros é um próximo passo disponível e diretamente relacionado ao estado sem resultados.
Nenhuma intimação encontrada
Revise os filtros aplicados ou limpe todos para consultar a lista completa.
Error State
Falhas de carregamento locais ou de página, com nova tentativa e orientação de suporte.
Estados interativos
Alterne entre erro, nova tentativa e falha persistente. O retrying usa Spinner, anuncia a atualização e bloqueia novas tentativas.
Não foi possível carregar as intimações
Verifique sua conexão e tente carregar os registros novamente.
Inline
Para falhas restritas a uma região pequena, o conteúdo permanece compacto e a ação ocupa a largura disponível no mobile.
inline
Falha ao atualizar esta seção
Os demais dados da página continuam disponíveis.
Page e orientação de suporte
Uma falha persistente de página substitui a ação repetida por orientação clara para informar a equipe responsável.
page
O sistema continua indisponível
Não foi possível recuperar os dados após novas tentativas.
Informe a equipe responsável e aguarde antes de repetir a operação.
Key-Value List
Metadados estruturados de processo, partes, prazo e responsável sem aparência de formulário.
Stacked e valores ausentes
Labels e valores mantêm semântica de lista de descrição. Campos sem conteúdo exibem “Não informado” em vez de ficarem vazios.
stacked
- Processo
- 5001234-56.2026.8.21.0001
- Parte
- Comercial Aurora Ltda.
- Prazo
- 30/09/2026 às 18:00
- Vara
- Não informado
Two-column responsiva
A lista usa duas colunas apenas em telas amplas e retorna automaticamente para uma coluna no mobile. Ícones aparecem somente em prazo e documento.
two-column
- Processo
- 5001234-56.2026.8.21.0001
- Parte
- Comercial Aurora Ltda.
- Prazo
- 30/09/2026 às 18:00
- Responsável
- Rafael Menezes
- Documento principal
- Intimação eletrônica
- Vara
- Não informado
Compact e loading
A versão compacta reduz o espaçamento para áreas densas. O Skeleton preserva a estrutura e a região informa quando os detalhes estão sendo carregados.
Carregando detalhes
Status Badge
Tradução visual dos estados técnicos do fluxo jurídico para linguagem compreensível.
Variantes semânticas
Cada variante traduz uma etapa do fluxo em linguagem direta. Atenção, sucesso e falha sempre incluem ícone, para que o significado não dependa somente da cor.
neutral
Recebidaprocessing
Em análiseattention
Revisão humanaready
Peça prontasuccess
Protocoladafailure
FalhaMapeamento completo
Todos os 11 estados técnicos previstos possuem rótulo compreensível e apresentação determinística. O tamanho sm atende tabelas e md atende detalhes.
sm · tabelas
RecebidaEm análiseRevisão humanaPeça prontaAutorizadaProgramadaAguardando protocoloProtocolandoProtocoladaFalhaResultado inconclusivo
md · detalhes
RecebidaEm análiseRevisão humanaPeça prontaAutorizadaProgramadaAguardando protocoloProtocolandoProtocoladaFalhaResultado inconclusivo
Explicação opcional
Quando o estado exigir contexto adicional, o badge recebe foco e apresenta Tooltip real por teclado ou hover. Sem explicação, permanece apenas informativo.
Resultado inconclusivoFalhaProtocolada
Deadline Indicator
Prazos processuais com data, tempo restante e estados semânticos independentes da regra de criticidade.
Variantes
A regra de negócio informa normal, approaching ou critical. Ausência e vencimento são derivados diretamente da data, sempre com texto e ícone além da cor.
normal
Prazo em andamentoapproaching
Prazo se aproximandocritical
Prazo críticoexpired
Prazo vencidounknown
Prazo não informadoTamanhos responsivos
Inline acompanha texto, table preserva densidade em listagens e detail apresenta título, data absoluta e tempo restante.
inline
Prazo:
table
detail
Prazo críticoAtualização temporal
O relógio controlado demonstra a atualização sem alterar limites de criticidade. Ao ultrapassar a data, o componente muda diretamente para expired.
Prazo crítico
Document Item
Metadados e download de documentos, peças e comprovantes nos diferentes estados do fluxo.
Tipos de documento
As cinco variantes identificam origem, minuta, versão aprovada, PDF e comprovante. A versão aprovada recebe ícone próprio, sem sugerir visualização ou edição online.
minuta-contestacao-v2.docx
Minuta · DOCX · 284 KB · v2
Disponívelcontestacao-aprovada.docx
Versão aprovada · DOCX · 312 KB · v3
Disponíveldecisao-judicial.pdf
Documento PDF · PDF · 1,2 MB
Disponívelcomprovante-protocolo.pdf
Comprovante · PDF · 96 KB
DisponívelEstados operacionais
Alterne cenários determinísticos. Downloading e processing bloqueiam ações; failed permite tentar novamente; superseded aponta para a versão atual.
contestacao-aprovada-v3.docx
Versão aprovada · DOCX · 312 KB · atualizada em 28/09/2026
DisponívelCompact e default
Compact atende listas com ação icon-only acessível e Tooltip real. Default amplia metadados e usa ação textual em detalhes, com largura integral no mobile.
compact
recibo-protocolo.pdf
Comprovante · PDF · 96 KB
Disponíveldefault
intimacao-eletronica.docx
Documento de origem · DOCX · 184 KB · recebida em 27/09/2026
DisponívelReview Workspace
Superfície independente para contexto, dados, documentos, revisão e decisão jurídica.
Fluxo e estados
Os oito estados são determinísticos. Autorizar e programar atualizam o cenário; ações permanecem bloqueadas até o estado permitido.
Espaço de revisão jurídica
Contestação à cobrança indevida
Intimação recebida no EPROC TJ/RS em 27 de setembro de 2026.
Contexto da intimação
A parte autora foi intimada para apresentar contestação e documentos complementares. A minuta foi gerada a partir da petição inicial e das informações cadastradas no processo.
Dados do processo
- Processo
- 5001842-18.2026.8.21.0001
- Órgão julgador
- 3ª Vara Cível de Porto Alegre
- Partes
- Almeida Comércio Ltda. × Cooperativa Sul
- Responsável
- Rafael Menezes
- Prazo
- 30/09/2026 às 18:00
Documento de origem
intimacao-eletronica.docx
Documento de origem · DOCX · 184 KB · recebida em 27/09/2026
DisponívelPeça gerada
contestacao-gerada-v2.docx
Minuta · DOCX · 284 KB · gerada em 28/09/2026
DisponívelReenviar versão revisada
Opcional. Envie somente um arquivo DOCX após revisar a peça.
Documento DOCX
Revisão humana necessária
Confira o contexto, os dados do processo e a peça gerada antes de decidir.
Variantes
Review required reúne conferência, download e reenvio; ready to schedule libera programação; read-only completed preserva o registro sem edição.
review-required
Espaço de revisão jurídica
Contestação à cobrança indevida
Intimação recebida no EPROC TJ/RS em 27 de setembro de 2026.
Contexto da intimação
A parte autora foi intimada para apresentar contestação e documentos complementares. A minuta foi gerada a partir da petição inicial e das informações cadastradas no processo.
Dados do processo
- Processo
- 5001842-18.2026.8.21.0001
- Órgão julgador
- 3ª Vara Cível de Porto Alegre
- Partes
- Almeida Comércio Ltda. × Cooperativa Sul
- Responsável
- Rafael Menezes
- Prazo
- 30/09/2026 às 18:00
Documento de origem
intimacao-eletronica.docx
Documento de origem · DOCX · 184 KB · recebida em 27/09/2026
DisponívelPeça gerada
contestacao-gerada-v2.docx
Minuta · DOCX · 284 KB · gerada em 28/09/2026
DisponívelReenviar versão revisada
Opcional. Envie somente um arquivo DOCX após revisar a peça.
contestacao-revisada-v3.docx
311 KB · Enviado
Revisão concluída
A versão revisada está pronta. Autorize somente após conferir o conteúdo final.
ready-to-schedule
Espaço de revisão jurídica
Contestação à cobrança indevida
Intimação recebida no EPROC TJ/RS em 27 de setembro de 2026.
Contexto da intimação
A parte autora foi intimada para apresentar contestação e documentos complementares. A minuta foi gerada a partir da petição inicial e das informações cadastradas no processo.
Dados do processo
- Processo
- 5001842-18.2026.8.21.0001
- Órgão julgador
- 3ª Vara Cível de Porto Alegre
- Partes
- Almeida Comércio Ltda. × Cooperativa Sul
- Responsável
- Rafael Menezes
- Prazo
- 30/09/2026 às 18:00
Documento de origem
intimacao-eletronica.docx
Documento de origem · DOCX · 184 KB · recebida em 27/09/2026
DisponívelPeça gerada
contestacao-gerada-v2.docx
Versão aprovada · DOCX · 284 KB · gerada em 28/09/2026
DisponívelPeça autorizada
A responsabilidade jurídica foi confirmada e a peça pode ser programada.
read-only-completed
Espaço de revisão jurídica
Contestação à cobrança indevida
Intimação recebida no EPROC TJ/RS em 27 de setembro de 2026.
Contexto da intimação
A parte autora foi intimada para apresentar contestação e documentos complementares. A minuta foi gerada a partir da petição inicial e das informações cadastradas no processo.
Dados do processo
- Processo
- 5001842-18.2026.8.21.0001
- Órgão julgador
- 3ª Vara Cível de Porto Alegre
- Partes
- Almeida Comércio Ltda. × Cooperativa Sul
- Responsável
- Rafael Menezes
- Prazo
- 30/09/2026 às 18:00
Documento de origem
intimacao-eletronica.docx
Documento de origem · DOCX · 184 KB · recebida em 27/09/2026
DisponívelPeça gerada
contestacao-gerada-v2.docx
Versão aprovada · DOCX · 284 KB · gerada em 28/09/2026
DisponívelPeça programada
A peça foi colocada na fila e aguardará a próxima sessão de protocolo.
Comportamento responsivo e acessível
A superfície permanece independente do host: ocupa a largura disponível, usa duas colunas somente em telas amplas e empilha seções e ações no mobile. Estados são anunciados por texto e ícone, sem depender apenas de cor.
Navegue pelos controles com Tab para verificar foco visível, ações bloqueadas e seleção anunciada por aria-pressed.
Filing Action Panel
Ação permitida para a peça, com impacto explícito e confirmação da responsabilidade jurídica.
Estados interativos
Cada ação abre confirmação com responsabilidade e quantidade. Durante submitting, fechamento e envio duplicado ficam bloqueados; error mantém contexto para nova tentativa.
Autorizar para protocolo
Confirme que a peça foi revisada antes de liberar o protocolo.
Variantes
Authorize cobre a decisão jurídica individual; schedule single e schedule batch programam a fila; read-only preserva o resultado sem oferecer ação.
Autorizar para protocolo
Confirme que a peça foi revisada antes de liberar o protocolo.
Programar peça
Inclua a peça autorizada na fila da próxima sessão de protocolo.
Programar peças selecionadas
Inclua todas as peças elegíveis na fila da próxima sessão de protocolo.
12 peças elegíveis
Ação de protocolo concluída
Este registro está disponível somente para consulta.
1 peça programada para a próxima sessão.
Tamanhos
Inline atende composições compactas; card apresenta contexto completo; sticky mobile permanece acessível junto à base da viewport e volta ao fluxo normal no desktop.
inline
Programar peça
Inclua a peça autorizada na fila da próxima sessão de protocolo.
card
Autorizar para protocolo
Confirme que a peça foi revisada antes de liberar o protocolo.
A peça precisa de revisão humana antes da autorização.
sticky-mobile
Programar peças selecionadas
Inclua todas as peças elegíveis na fila da próxima sessão de protocolo.
4 peças elegíveis
Responsabilidade e acessibilidade
O Alert Dialog apresenta consequência, quantidade e responsabilidade antes da confirmação. O foco fica contido, retorna ao gatilho ao fechar e as ações ocupam largura integral no mobile.
Abra uma confirmação e navegue com Tab. Cancelar recebe foco seguro; Enter confirma; Escape fecha apenas quando não há envio crítico.
Activity Timeline
Trilha cronológica de recebimento, análise, geração, revisão, autorização e protocolo.
Estados do histórico
Alterne loading, histórico preenchido, evento com falha, evento atual e recorte truncado. O estado não depende somente de cor.
Intimação recebida do EPROC
Recebimento
Os documentos do processo foram importados e vinculados à intimação.
Análise processual concluída
Análise
O contexto e os dados necessários para elaboração foram identificados.
Minuta da contestação gerada
Geração da peça
A versão inicial ficou disponível para revisão humana.
Revisão humana concluída
Revisão humana
A versão revisada substituiu a minuta inicial.
Responsável: Rafael Menezes
Aguardando sessão de protocolo
Programação · Evento atual
A peça está programada e pronta para a próxima sessão.
Variantes
Compact reduz a densidade e omite descrições; detailed mantém contexto, responsável e horário para auditoria.
compact
Intimação recebida do EPROC
Recebimento
Análise processual concluída
Análise
Minuta da contestação gerada
Geração da peça
Revisão humana concluída
Revisão humana
detailed
Minuta da contestação gerada
Geração da peça
A versão inicial ficou disponível para revisão humana.
Revisão humana concluída
Revisão humana
A versão revisada substituiu a minuta inicial.
Responsável: Rafael Menezes
Aguardando sessão de protocolo
Programação · Evento atual
A peça está programada e pronta para a próxima sessão.
Responsividade e acessibilidade
Horários migram para uma linha própria no mobile. A ordem permanece cronológica, eventos atuais usam status textual e falhas são anunciadas como alerta.
Cada evento combina ícone semântico, título e horário. O botão do histórico truncado possui foco visível e alvo de toque adequado.
Notification Center
Central lateral de notificações com contagem de não lidas, filtros e ação de leitura em massa.
Estados e filtros
Alterne cenários determinísticos e abra a central. Em all, itens lidos permanecem no histórico; em unread, all-read substitui somente o recorte vazio.
O trigger obtém a contagem diretamente do Center. O conteúdo é um slot composto com o Notification Item real.
Variantes
all lista todas as notificações; unread inicia no recorte de não lidas. Ambos usam o mesmo Sheet lateral e uma única fonte de contagem.
Responsividade e acessibilidade
No mobile o painel usa quase toda a largura; a partir de sm fica limitado a sm:max-w-sm. O Sheet preserva focus trap, Escape, overlay e retorno de foco ao gatilho.
A contagem do trigger e dos filtros vem do mesmo contexto.
Loading, empty e error não dependem de backend.
A ação em massa só existe quando possui callback real.
Notification Item
Notificação com contexto, horário, estado de leitura e destino relacionado.
Variantes
Ícone, rótulo semântico e conteúdo distinguem informação, ação necessária, prazo, sucesso e falha sem depender somente de cor.
Estados interativos
Unread combina texto e ponto; updating bloqueia seleção e anuncia processamento; disabled informa que o destino está indisponível.
Tamanhos e destinos
Compact atende listas densas; default amplia o contexto. Link preserva a API nativa, button executa seleção e article permanece informativo.
compact · link navegável
Prazo processual amanhãNão lidaAbra o processo para conferir o prazo registrado.Prazodefault · informativo
Foco e acessibilidade
Itens navegáveis recebem hover e foco visível. Ícones são decorativos, horários usam time e estados bloqueados permanecem textualmente identificados.
Navegue com Tab até o exemplo link para verificar o foco. O estado não lido é anunciado como texto e não apenas pelo destaque visual.
Login Form
Autenticação acessível de usuários previamente cadastrados, com validação e feedback completo.
Estados e interação
Selecione um cenário ou envie o formulário preenchido para acompanhar a transição até a autenticação.
Rafael MenezesAdvocaciaAcesse sua conta
Use as credenciais fornecidas pelo administrador.
Composição e acessibilidade
Card limitado no desktop e fluido no mobile, sem cadastro, convite ou recuperação de senha.
Campos
Labels visíveis, obrigatórios e associados aos controles.
Erros
Mensagens corretivas ligadas por aria-describedby.
Senha
Alternância nomeada, pressionável e acompanhada de Tooltip.
Envio
Spinner, aria-busy e bloqueio contra ações duplicadas.
User Management Form
Criação e edição acessível de usuários, papéis configuráveis e estado de acesso da conta.
Variantes e estados
Cada botão abre isoladamente o formulário real em Dialog. Criar e editar compartilham a mesma estrutura, com conteúdo e ação contextualizados.
Composição e acessibilidade
A composição usa os componentes aprovados e mantém papéis configuráveis enquanto os perfis definitivos não forem formalizados.
Responsivo
Fullscreen no mobile e Dialog amplo no desktop.
Validação
Erros corretivos vinculados aos respectivos controles.
Operação
Validação e envio bloqueiam fechamento e ações duplicadas.
Conta
Acesso ativo ou suspenso é comunicado também por texto.
Quality Gate Panel
Evolução da amostra de qualidade e controle explícito da elegibilidade para o modo autônomo.
Variantes e estados
Selecione um cenário. A variante elegível permite abrir a confirmação; a ativação simulada só ocorre depois da decisão explícita.
Coleta da amostra em andamento
As peças revisadas estão formando a base necessária para avaliar a operação autônoma.
Amostra revisada
64/100
Índice de qualidade
92,2%
Meta de ativação
90%
Progresso da amostra
64%
Faltam 36 peças para completar a amostra.
Tamanhos
Default acomoda contexto e ação; compact preserva os indicadores essenciais em regiões mais densas.
Coleta da amostra em andamento
As peças revisadas estão formando a base necessária para avaliar a operação autônoma.
Amostra revisada
42/100
Índice de qualidade
91,3%
Meta de ativação
90%
Progresso da amostra
42%
Faltam 58 peças para completar a amostra.
Marco de qualidade ainda não atingido
Continue a revisão humana até que a amostra alcance o índice mínimo definido.
Amostra revisada
100/100
Qualidade / meta
84,8%/90%
Progresso da amostra
100%
O índice atual está 5,2 pontos percentuais abaixo da meta.
Regra e acessibilidade
Amostra, índice, meta e situação permanecem legíveis sem depender apenas da cor.
Elegibilidade
90% habilita a decisão, mas não ativa o modo.
Confirmação
A ativação exige Alert Dialog e foco contido.
Operação
Loading bloqueia repetição e respeita movimento reduzido.