PressableFeedback

Camada de resposta ao toque: ondulação, destaque, segurar para confirmar e progresso.

O PressableFeedback (do HeroUI Pro) acrescenta uma resposta visual ao pressionar a qualquer elemento clicável. Ele não desenha o controle: entra como filho de um Button, de um ItemCard ou de um elemento próprio e escolhe um de quatro efeitos. É um complemento; o controle por baixo continua sendo o botão ou o link.

import { PressableFeedback } from "@rastreio-x/ui";

Ondulação

PressableFeedback.Ripple espalha uma ondulação a partir do ponto do toque e mostra um tom leve ao passar o ponteiro. Fica dentro do Button, antes do rótulo.

Destaque

PressableFeedback.Highlight ilumina o fundo do elemento sob o ponteiro e durante o toque, sem ondulação. É o efeito do Admin em linhas e cartões clicáveis.

Segurar para confirmar

PressableFeedback.HoldConfirm revela um preenchimento enquanto a pessoa segura; ao completar o tempo (duration, 2000 ms por padrão), chama onComplete. Soltar antes devolve o preenchimento. O conteúdo vai duas vezes: dentro do HoldConfirm (a versão sobre o preenchimento, com a cor do texto de cima) e depois como o rótulo normal.

Rascunhos removidos: 0

Direção do preenchimento

sweep escolhe de onde o preenchimento cresce: right (padrão), left, up ou down.

Progresso

PressableFeedback.ProgressFeedback enche a barra depois de um clique, sem exigir que a pessoa segure. Quando acaba, chama onComplete e, depois de resetDelay (1500 ms), volta ao início (autoReset).

Pedidos de teste enviados: 0

Desabilitado

Com o controle desabilitado, nenhum efeito aparece.

No Admin

Em Pedidos, Suporte e Domínios, cada linha clicável é um ItemCard com PressableFeedback.Highlight. O botão ou link vem do ItemCard; o destaque só responde ao ponteiro e ao teclado.

Anatomia

O componente é um conjunto de camadas que se posicionam dentro do elemento pressionável. Use uma por elemento.

PressableFeedback
├── PressableFeedback.Highlight
├── PressableFeedback.HoldConfirm
├── PressableFeedback.ProgressFeedback
└── PressableFeedback.Ripple

Parte	Efeito	Quando usar
`PressableFeedback.Ripple`	Ondulação do ponto do toque.	Botões.
`PressableFeedback.Highlight`	Fundo iluminado.	Linhas e cartões clicáveis.
`PressableFeedback.HoldConfirm`	Preenchimento enquanto segura.	Ação rara e arriscada.
`PressableFeedback.ProgressFeedback`	Barra que enche depois do clique.	Ação com espera curta.

Propriedades

Raiz (PressableFeedback):

PressableFeedback
Prop	Tipo	Padrão	Descrição
`children`*	`React.ReactNode`	-	Conteúdo do componente.
`className`	`string`	-	Classes CSS aplicadas ao elemento.
`isDisabled`	`boolean`	-	Desabilita o componente: sem foco, clique nem envio.
`render`	`DOMRenderFunction<E, undefined>`	-	Troca o elemento DOM padrão por outro, mantendo o comportamento e as props do componente.
`style`	`React.JSX.IntrinsicElements[E]['style']`	-	Estilos em linha aplicados ao elemento.

Ondulação (PressableFeedback.Ripple):

PressableFeedback.Ripple
Prop	Tipo	Padrão	Descrição
`className`	`string`	-	Classes CSS aplicadas ao elemento.
`duration`	`number`	`150`	Duração em milissegundos.
`easing`	`'cubic-bezier(0.2, 0, 0, 1)'`	-	Easing function for the ripple animation.
`hoverOpacity`	`number`	`0.08`	Opacity of the hover state.
`isDisabled`	`boolean`	-	Desabilita o componente: sem foco, clique nem envio.
`minimumPressDuration`	`number`	`225`	Minimum press duration in ms.
`pressedOpacity`	`number`	`0.12`	Opacity of the pressed state.
`style`	`React.CSSProperties`	-	Estilos em linha aplicados ao elemento.
`touchDelay`	`number`	`150`	Delay in ms before touch ripple starts.

Destaque (PressableFeedback.Highlight):

PressableFeedback.Highlight
Prop	Tipo	Padrão	Descrição
`children`	`React.ReactNode`	-	Conteúdo do componente.
`className`	`string`	-	Classes CSS aplicadas ao elemento.
`style`	`React.CSSProperties`	-	Estilos em linha aplicados ao elemento.

Segurar para confirmar (PressableFeedback.HoldConfirm):

PressableFeedback.HoldConfirm
Prop	Tipo	Padrão	Descrição
`children`	`React.ReactNode`	-	Conteúdo do componente.
`className`	`string`	-	Classes CSS aplicadas ao elemento.
`duration`	`number`	`2000`	Duração em milissegundos.
`isDisabled`	`boolean`	-	Desabilita o componente: sem foco, clique nem envio.
`onComplete`	`(() => void)`	-	Chamada quando a ação é concluída.
`releaseDuration`	`number`	`200`	Duration in ms for the snap-back animation on release.
`resetOnComplete`	`boolean`	`true`	Whether to reset the overlay after the hold completes.
`style`	`React.CSSProperties`	-	Estilos em linha aplicados ao elemento.
`sweep`	`HoldConfirmSweep`	`"right"`	Which edge the clip-path reveal sweeps toward.

Progresso (PressableFeedback.ProgressFeedback):

PressableFeedback.ProgressFeedback
Prop	Tipo	Padrão	Descrição
`autoReset`	`boolean`	`true`	Whether to automatically reset after completing.
`children`	`React.ReactNode`	-	Conteúdo do componente.
`className`	`string`	-	Classes CSS aplicadas ao elemento.
`duration`	`number`	`2000`	Duração em milissegundos.
`isDisabled`	`boolean`	-	Desabilita o componente: sem foco, clique nem envio.
`onComplete`	`(() => void)`	-	Chamada quando a ação é concluída.
`onReset`	`(() => void)`	-	Chamada ao redefinir o formulário.
`releaseDuration`	`number`	`300`	Duration in ms for the snap-back animation on reset.
`resetDelay`	`number`	`1500`	Delay in ms before resetting after completion.
`style`	`React.CSSProperties`	-	Estilos em linha aplicados ao elemento.
`sweep`	`ProgressFeedbackSweep`	`"right"`	Which edge the clip-path reveal sweeps toward.

Animações

CSS
indicativo

Todo o componente é movimento: a ondulação se expande (150 ms por padrão), o destaque aparece sob o ponteiro, e o HoldConfirm e o ProgressFeedback revelam o preenchimento por clip-path no tempo de duration. A folha global da fachada reduz transições CSS a 0,01 ms com prefers-reduced-motion; o Pro não documenta um tratamento próprio para esses efeitos, então teste o fluxo com movimento reduzido. Em qualquer caso o rótulo precisa dizer o gesto ("Segurar para Remover") e o resultado precisa aparecer em texto.

Acessibilidade

O efeito é só visual: o elemento por baixo (button, a) mantém o papel, o nome e o foco por teclado.
HoldConfirm exige manter o ponteiro pressionado, um gesto difícil por teclado e para quem tem pouca precisão motora. Nunca o use como única forma de concluir uma ação importante; ofereça também um diálogo de confirmação.
Anuncie o resultado: o contador do demo usa role="status".
Não passe só pela cor: o rótulo diz o que o botão faz.

Boas práticas

Faça

Um efeito por elemento: Highlight em linhas, Ripple em botões, HoldConfirm só para ação rara.

Evite

Empilhar Ripple e Highlight no mesmo botão, ou usar HoldConfirm para uma ação do dia a dia.

Use Highlight em listas clicáveis; ele é mais discreto que a ondulação.
Prefira AlertDialog para confirmar destruição; reserve HoldConfirm para atalhos de quem já sabe.
Em HoldConfirm e ProgressFeedback, mantenha duration entre 800 e 2000 ms.
Repita o texto do botão dentro do HoldConfirm e do ProgressFeedback, ou o rótulo some quando o preenchimento chega.

Relacionados

Button que recebe o Ripple e o Highlight.
AlertDialog para confirmar ações destrutivas.
Tooltip para explicar botões só de ícone.