Capas

HoverCard

Una vista previa rica al pasar el mouse o con foco de teclado: perfiles, vistas previas de enlaces, definiciones.

import { HoverCard } from '@alea/ui';

Ejemplos

Vista previa de perfil

Pasa el mouse o enfoca el nombre; entra a la tarjeta para mantenerla abierta.

Built by Ale Vasquez in Caracas.

Tokens

Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.

Space

--alea-space-4…

Shadow

--alea-shadow-pop…

Component

--alea-glass-blur…
--alea-glass-rim…
--alea-glass-saturate…
--alea-glass-tint…

Props

`HoverCard` props

Una vista previa rica con hover o foco de teclado, a la que se puede entrar.

Prop	Tipo	Por defecto	Descripción
`children`obligatoria	`ReactNode`	-	La tarjeta: una vista previa de un perfil, una página, una definición. Que sea complementaria: la misma información debe poder abrirse de otra forma.
`trigger`obligatoria	`ReactNode`	-	El enlace o elemento sobre el que se pasa el mouse o se enfoca.
`closeDelay`	`number`	`200`	ms antes de cerrarse cuando el puntero sale. Por defecto 200.
`motion`	`MotionProp`	-	Cómo entra y sale el popup: un preset (fade, scale, pop, slide-down, blur...), false para ninguno, u opciones.
`openDelay`	`number`	`500`	ms antes de abrirse. Por defecto 500.
`placement`	`"start" \| "end" \| "bottom" \| "top"`	`'bottom'`	top, bottom (por defecto), start o end.

Especificaciones

Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.

Variantes: placementstartendbottomtop
Motion: Acepta una prop motion para su entrada y salida.
Oscuro y claro: Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
Clases para estilos: .alea-hovercard-trigger.alea-hovercard

Abre con foco además de hover, y el contenido se enlaza como descripción del disparador.
Se puede mover el puntero dentro de la tarjeta; Escape la cierra.
Que sea complementaria: en pantallas táctiles no hay hover.

Teclado

Tecla	Acción
`Tab`	Enfocar el disparador la abre
`Escape`	Lo cierra

Qué hacer y qué evitar

Hacer

Que sea complementaria: la misma información debe poder abrirse con un clic.
Retrásala (500 ms) para que no aparezca cuando el puntero pasa de largo.

Evitar

No pongas acciones necesarias solo en una hover card.
No la uses en pantallas pensadas para lo táctil.