@buun_group/brutalist-ui/dist/react/popover/Popover.d.ts

A brutalist-styled component library

/**
 * @module Popover
 * @description A floating content component that displays rich content in a portal overlay. Features intelligent positioning, focus management, and keyboard navigation with customizable trigger behaviors.
 */
import React, { CSSProperties } from 'react';
/**
 * Available positions for the popover relative to its trigger element
 */
export type PopoverPosition = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end' | 'auto';
/**
 * Available trigger behaviors for showing the popover
 */
export type PopoverTrigger = 'click' | 'focus' | 'manual';
/**
 * Props for the Popover component
 */
export interface PopoverProps {
    /**
     * The trigger element that will show the popover when interacted with
     */
    children: React.ReactElement;
    /**
     * The content to display inside the popover (for simple usage without sub-components)
     */
    content?: React.ReactNode;
    /**
     * Position of the popover relative to the trigger element
     * @default 'bottom'
     */
    position?: PopoverPosition;
    /**
     * How the popover should be triggered to show/hide
     * @default 'click'
     */
    trigger?: PopoverTrigger;
    /**
     * Whether the popover is currently visible (controlled mode)
     */
    open?: boolean;
    /**
     * Callback function called when the popover visibility changes
     */
    onOpenChange?: (open: boolean) => void;
    /**
     * Whether the popover should close when clicking outside of it
     * @default true
     */
    closeOnClickOutside?: boolean;
    /**
     * Whether the popover should close when pressing the Escape key
     * @default true
     */
    closeOnEscape?: boolean;
    /**
     * Whether to show an arrow pointing from the popover to the trigger
     * @default true
     */
    showArrow?: boolean;
    /**
     * Additional CSS classes to apply to the popover
     */
    className?: string;
    /**
     * Custom styles to apply to the popover
     */
    style?: CSSProperties;
    /**
     * Whether the popover trigger is disabled
     * @default false
     */
    disabled?: boolean;
    /**
     * Maximum width of the popover in pixels
     * @default 400
     */
    maxWidth?: number;
    /**
     * Whether to automatically focus the first focusable element when opened
     * @default true
     */
    autoFocus?: boolean;
    /**
     * CSS selector for the element that should receive initial focus
     */
    initialFocus?: string;
}
interface PopoverContextValue {
    close: () => void;
}
export declare const Popover: React.FC<PopoverProps> & {
    Content: typeof PopoverContent;
    Header: typeof PopoverHeader;
    Body: typeof PopoverBody;
    Footer: typeof PopoverFooter;
};
export declare const PopoverContent: React.FC<{
    children: React.ReactNode;
    className?: string;
    style?: CSSProperties;
}>;
export declare const PopoverHeader: React.FC<{
    children: React.ReactNode;
    className?: string;
    style?: CSSProperties;
}>;
export declare const PopoverBody: React.FC<{
    children: React.ReactNode;
    className?: string;
    style?: CSSProperties;
}>;
export declare const PopoverFooter: React.FC<{
    children: React.ReactNode;
    className?: string;
    style?: CSSProperties;
}>;
export declare const usePopover: () => PopoverContextValue;
export {};