@buun_group/brutalist-ui/dist/react/hover-card/HoverCard.d.ts

A brutalist-styled component library

/**
 * @module HoverCard
 * @description A card component that appears on hover to display additional information. Features automatic positioning, customizable delays, and support for rich content.
 */
import React, { ReactNode, CSSProperties } from 'react';
/**
 * Props for the HoverCard component
 */
export interface HoverCardProps {
    /**
     * The trigger and content elements
     */
    children: ReactNode;
    /**
     * Additional CSS class name for styling
     */
    className?: string;
    /**
     * Custom styles to apply to the hover card
     */
    style?: CSSProperties;
    /**
     * Default open state when uncontrolled
     * @default false
     */
    defaultOpen?: boolean;
    /**
     * Controlled open state
     */
    open?: boolean;
    /**
     * Callback fired when the hover card opens or closes
     */
    onOpenChange?: (open: boolean) => void;
    /**
     * Delay in milliseconds before showing the card
     * @default 700
     */
    openDelay?: number;
    /**
     * Delay in milliseconds before hiding the card
     * @default 300
     */
    closeDelay?: number;
}
/**
 * A card that appears on hover to display additional information.
 * Useful for providing context without cluttering the interface.
 *
 * @example
 * ```tsx
 * <HoverCard>
 *   <HoverCard.Trigger asChild>
 *     <span>@username</span>
 *   </HoverCard.Trigger>
 *   <HoverCard.Content>
 *     <div>
 *       <h4>User Profile</h4>
 *       <p>Additional user information...</p>
 *     </div>
 *   </HoverCard.Content>
 * </HoverCard>
 * ```
 */
export declare const HoverCard: React.FC<HoverCardProps> & {
    Trigger: typeof HoverCardTrigger;
    Content: typeof HoverCardContent;
};
/**
 * Props for the HoverCard.Trigger component
 */
export interface HoverCardTriggerProps {
    /**
     * The element that triggers the hover card
     */
    children: ReactNode;
    /**
     * Whether to render as a child element instead of wrapping in a div
     * @default false
     */
    asChild?: boolean;
    /**
     * Additional CSS class name for styling
     */
    className?: string;
    /**
     * Custom styles to apply to the trigger
     */
    style?: CSSProperties;
}
/**
 * The trigger area for the hover card.
 * Shows the card content on hover or focus.
 */
declare const HoverCardTrigger: React.ForwardRefExoticComponent<HoverCardTriggerProps & React.RefAttributes<HTMLDivElement>>;
/**
 * Props for the HoverCard.Content component
 */
export interface HoverCardContentProps {
    /**
     * The content to display in the hover card
     */
    children: ReactNode;
    /**
     * Additional CSS class name for styling
     */
    className?: string;
    /**
     * Custom styles to apply to the content
     */
    style?: CSSProperties;
    /**
     * The preferred side to position the card
     * @default 'bottom'
     */
    side?: 'top' | 'right' | 'bottom' | 'left';
    /**
     * How to align the card relative to the trigger
     * @default 'center'
     */
    align?: 'start' | 'center' | 'end';
    /**
     * Distance in pixels from the trigger
     * @default 8
     */
    sideOffset?: number;
    /**
     * Offset along the alignment axis
     * @default 0
     */
    alignOffset?: number;
    /**
     * Boundary to check for collisions
     * @default 'viewport'
     */
    collisionBoundary?: 'viewport' | 'parent' | HTMLElement;
    /**
     * Whether to hide when the trigger is detached
     * @default true
     */
    hideWhenDetached?: boolean;
    /**
     * Whether to apply the brutalist shadow effect
     * @default true
     */
    brutalistShadow?: boolean;
}
/**
 * The content of the hover card.
 * Positioned automatically with collision detection.
 */
declare const HoverCardContent: React.ForwardRefExoticComponent<HoverCardContentProps & React.RefAttributes<HTMLDivElement>>;
export { HoverCardTrigger, HoverCardContent };