/** * HoverCard - a non-modal preview surface that opens when the user hovers or * focuses a trigger and closes when they leave or blur it. Built on the same * `Floating` portal + positioning machinery as Popover (anchored below the * trigger, portalled into the nearest `[data-vf-ui]`/`[data-vf-chat]` token * scope, dismisses on outside-click / `Escape`), but opens on hover intent * instead of click. Ideal for rich previews - a user card on a `@mention`, a * repo card on a link. Skinned entirely with veryfront theme tokens. * * `openDelay` / `closeDelay` gate the hover transitions so brief pointer passes * don't flicker the card, and moving the pointer from the trigger onto the card * keeps it open. Keyboard users get the card immediately on focus, and it * closes on blur. * * @example * ```tsx * * * @koji * * *
* Koji * Design systems *
*
*
* ``` * * @module react/components/ui/hover-card */ import * as React from "react"; /** Props accepted by ``. */ export interface HoverCardProps { /** The trigger and content parts to compose. */ children: React.ReactNode; /** Controlled open state (pair with `onOpenChange`). */ open?: boolean; /** Initial open state when uncontrolled. @default false */ defaultOpen?: boolean; /** Fires when the open state changes (hover/focus in, leave/blur out). */ onOpenChange?: (open: boolean) => void; /** Delay in ms before the card opens after pointer enter. @default 700 */ openDelay?: number; /** Delay in ms before the card closes after pointer leave. @default 300 */ closeDelay?: number; } /** * HoverCard root - owns open state and the hover/focus timers. Renders no node * of its own; the positioning anchor is the trigger element, carried on context. */ export declare function HoverCard({ children, open, defaultOpen, onOpenChange, openDelay, closeDelay, }: HoverCardProps): React.ReactElement; /** Props accepted by ``. */ export interface HoverCardTriggerProps extends React.ButtonHTMLAttributes { /** Render as a Slot, merging the trigger behaviour onto the child element. */ asChild?: boolean; /** React 19: ref is a regular prop; forwarded to the anchor node. */ ref?: React.Ref; } /** * Trigger - carries the positioning-anchor ref and the hover/focus intent. * Opens the card on pointer enter (after `openDelay`) or immediately on focus; * closes it on pointer leave (after `closeDelay`) or on blur. `asChild` merges * the behaviour onto the child element, which must forward `ref` to its DOM node * (a child that drops `ref` leaves the card unanchored - `Floating` warns). */ export declare function HoverCardTrigger({ children, asChild, ref, onMouseEnter, onMouseLeave, onFocus, onBlur, ...props }: HoverCardTriggerProps): React.ReactElement; /** Props accepted by ``. */ export interface HoverCardContentProps extends React.HTMLAttributes { /** Horizontal alignment relative to the trigger. @default "start" */ align?: "start" | "end"; /** Consumer ref for the surface node (forwarded through `Floating`). */ ref?: React.Ref; } /** * HoverCard surface - the portalled floating card, rendered while open. Non-modal * (no `role="dialog"`, no focus trap): it's a supplementary preview, so the * trigger keeps focus. Keeps itself open while the pointer is over it and closes * shortly after the pointer leaves. Base classes mirror Popover's surface. */ export declare function HoverCardContent({ children, className, align, ref, onMouseEnter, onMouseLeave, ...props }: HoverCardContentProps): React.ReactElement | null; //# sourceMappingURL=hover-card.d.ts.map