@loke/design-system/dist/components/popover/popover.d.ts

A design system with individually importable components

import * as PopoverPrimitive from "@loke/ui/popover";
import type { ComponentProps } from "react";
/**
 * Popover component for displaying floating content.
 *
 * Provides a way to show additional content in a floating panel when a user interacts
 * with a trigger element. Commonly used for secondary information, forms, or temporary
 * actions that don't require a full page or modal.
 *
 * Key features:
 * - Triggerable content panel that appears over other content
 * - Optional modal mode to focus user attention
 * - Focus management for accessibility
 * - Controlled or uncontrolled state management
 * - Flexible positioning options
 * - Built-in keyboard navigation and dismissal
 */
declare function Popover({ ...props }: ComponentProps<typeof PopoverPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
/**
 * PopoverTrigger component for opening the popover.
 *
 * Renders a button that toggles the popover's open state when clicked.
 * Automatically handles the aria attributes required for accessibility.
 */
declare function PopoverTrigger({ ...props }: ComponentProps<typeof PopoverPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
/**
 * PopoverContent component with default styling.
 *
 * Styled version of the popover content primitive with animations and theme-consistent design.
 * Renders inside a portal to avoid layout issues.
 *
 * @param matchTriggerWidth - When true, constrains the popover width to match the trigger element.
 */
declare function PopoverContent({ className, align, sideOffset, matchTriggerWidth, ...props }: ComponentProps<typeof PopoverPrimitive.Content> & {
    /** Make the size of the popover the same as the width of the trigger. */
    matchTriggerWidth?: boolean;
}): import("react/jsx-runtime").JSX.Element;
/**
 * PopoverAnchor component for custom anchor positioning.
 *
 * Creates a custom anchor point for the popover content, allowing you to
 * position the popover relative to any element, not just the trigger.
 */
declare function PopoverAnchor({ ...props }: ComponentProps<typeof PopoverPrimitive.Anchor>): import("react/jsx-runtime").JSX.Element;
/** Header section for popover content, providing a flex column layout for title and description. */
declare function PopoverHeader({ className, ...props }: ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
/** Title element for the popover header, rendered with medium font weight. */
declare function PopoverTitle({ className, ...props }: ComponentProps<"h2">): import("react/jsx-runtime").JSX.Element;
/** Description element for the popover header, rendered in muted foreground. */
declare function PopoverDescription({ className, ...props }: ComponentProps<"p">): import("react/jsx-runtime").JSX.Element;
export { Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, };