@stanfordspezi/spezi-web-design-system/dist/src/components/Popover/Popover.d.ts

Stanford Biodesign Digital Health Spezi Web Design System

import { Popover as PopoverPrimitive } from 'radix-ui';
import { ComponentProps } from 'react';
/**
 * Root component for the Popover.
 * Controls the open state of the popover.
 *
 * Built on top of [Radix UI Popover](https://www.radix-ui.com/primitives/docs/components/popover).
 */
export declare const PopoverRoot: import('react').FC<PopoverPrimitive.PopoverProps>;
/**
 * Element that triggers the popover to open when interacted with.
 *
 * Can be used to wrap any interactive element that should activate the popover.
 */
export declare const PopoverTrigger: import('react').ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;
/**
 * Visual arrow element that points to the trigger.
 *
 * Can be used to visually connect the popover to its trigger element.
 */
export declare const PopoverArrow: import('react').ForwardRefExoticComponent<PopoverPrimitive.PopoverArrowProps & import('react').RefAttributes<SVGSVGElement>>;
/**
 * Container for popover heading elements.
 *
 * Typically contains PopoverTitle and/or PopoverDescription components.
 * Provides consistent spacing and alignment for header content.
 *
 * @example
 * ```tsx
 * <PopoverHeader>
 *   <PopoverTitle>Settings</PopoverTitle>
 *   <PopoverDescription>Configure your preferences</PopoverDescription>
 * </PopoverHeader>
 * ```
 */
export declare const PopoverHeader: ({ className, ...props }: ComponentProps<"div">) => import("react").JSX.Element;
/**
 * Displays the main heading of the popover content with appropriate styling.
 * Typically used within PopoverHeader.
 *
 * @example
 * ```tsx
 * <PopoverTitle>Account Settings</PopoverTitle>
 * ```
 */
export declare const PopoverTitle: ({ className, ...props }: ComponentProps<"h6">) => import("react").JSX.Element;
/**
 * Provides additional context or explanation below the PopoverTitle.
 * Rendered with muted styling to create visual hierarchy.
 *
 * @example
 * ```tsx
 * <PopoverDescription>Manage your account settings and preferences</PopoverDescription>
 * ```
 */
export declare const PopoverDescription: ({ className, ...props }: ComponentProps<"h6">) => import("react").JSX.Element;
/**
 * Close button component for the popover with an X icon.
 *
 * Positioned in the top-right corner of the popover by default.
 *
 * @example
 * ```tsx
 * <PopoverContent>
 *   <PopoverCloseX />
 *   <PopoverHeader>
 *     <PopoverTitle>Settings</PopoverTitle>
 *   </PopoverHeader>
 * </PopoverContent>
 * ```
 */
export declare const PopoverCloseX: ({ className, ...props }: ComponentProps<typeof PopoverPrimitive.Close>) => import("react").JSX.Element;
type PopoverContentProps = ComponentProps<typeof PopoverPrimitive.Content> & {
    /**
     * Whether to show an arrow pointing to the trigger.
     */
    arrow?: boolean;
};
/**
 * Main content container for the Popover.
 *
 * Handles portal, arrow support, styling and animations.
 *
 * @example
 * ```tsx
 * <PopoverContent>
 *   <PopoverHeader>
 *     <PopoverTitle>Settings</PopoverTitle>
 *     <PopoverDescription>Configure your account</PopoverDescription>
 *   </PopoverHeader>
 *   <PopoverCloseX />
 * </PopoverContent>
 * ```
 */
export declare const PopoverContent: ({ className, children, align, sideOffset, arrow, ...props }: PopoverContentProps) => import("react").JSX.Element;
export {};