import * as react16 from "react";
import { DetailedHTMLProps, FC, HTMLAttributes } from "react";

//#region src/components/Popover/static.d.ts

/**
 * Props for the main Popover component
 * Extends HTMLDivElement attributes for full DOM compatibility
 */
type PopoverProps = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
  /** Unique identifier linking the trigger to its popover content for accessibility */
  identifier: string;
};
/**
 * Composite type for the Popover component with Detail subcomponent
 * Allows for Popover.Detail usage pattern
 */
type PopoverType = FC<PopoverProps> & {
  Detail: FC<DetailProps>;
};
/**
 * Horizontal alignment options for popover positioning
 */
declare enum PopoverXAlign {
  /** Align popover to start (left) of trigger */
  START = "start",
  /** Align popover to end (right) of trigger */
  END = "end",
}
/**
 * Vertical alignment options for popover positioning
 */
declare enum PopoverYAlign {
  /** Position popover below the trigger */
  BELOW = "bellow",
  /** Position popover above the trigger */
  ABOVE = "above",
}
/**
 * Popover Component
 *
 * A versatile popover container that displays contextual content when triggered by hover
 * or focus interactions. Built with accessibility in mind and supports multiple positioning
 * options with smooth animations.
 *
 * Features:
 * - Hover and focus-based triggering
 * - Multiple positioning options (above/below, start/end)
 * - Accessibility compliant with ARIA attributes
 * - Smooth animations with configurable delays
 * - Optional directional arrows
 * - Automatic z-index management
 * - Responsive design support
 *
 * Architecture:
 * - Main Popover acts as trigger container
 * - Popover.Detail renders the actual popover content
 * - Uses CSS groups for coordinated hover/focus states
 * - Unique identifier system prevents conflicts
 *
 * @example
 * Basic hover popover:
 * ```jsx
 * <Popover identifier="help-tooltip">
 *   <button>Need Help?</button>
 *
 *   <Popover.Detail identifier="help-tooltip">
 *     <div>This is helpful information!</div>
 *   </Popover.Detail>
 * </Popover>
 * ```
 *
 * @example
 * Focus-triggered popover:
 * ```jsx
 * <Popover identifier="focus-menu">
 *   <input placeholder="Focus me" />
 *
 *   <Popover.Detail
 *     identifier="focus-menu"
 *     isFocusable
 *     isOverable={false}
 *   >
 *     <div>Focus-only menu content</div>
 *   </Popover.Detail>
 * </Popover>
 * ```
 *
 * @example
 * Positioned popover with custom alignment:
 * ```jsx
 * <Popover identifier="positioned">
 *   <span>Hover me</span>
 *
 *   <Popover.Detail
 *     identifier="positioned"
 *     xAlign={PopoverXAlign.END}
 *     yAlign={PopoverYAlign.ABOVE}
 *     displayArrow={false}
 *   >
 *     <div>Above and right-aligned</div>
 *   </Popover.Detail>
 * </Popover>
 * ```
 *
 * Accessibility Features:
 * - Proper ARIA labeling and relationships
 * - Keyboard navigation support
 * - Screen reader compatibility
 * - Focus management
 *
 * Performance Considerations:
 * - CSS-only animations for smooth transitions
 * - Efficient group-based state management
 * - Minimal DOM updates during interactions
 *
 * @param props - Popover component props
 * @returns Trigger container with popover functionality
 */
declare const PopoverStatic: PopoverType;
/**
 * Props for the Popover.Detail component
 * Extends HTMLDivElement attributes for styling flexibility
 */
type DetailProps = HTMLAttributes<HTMLDivElement> & {
  /** Whether the popover responds to focus events on the trigger */
  isFocusable?: boolean;
  /** Controls visibility state - undefined allows automatic hover/focus control */
  isHidden?: boolean;
  /** Whether the popover responds to hover events on the trigger */
  isOverable?: boolean;
  /** Unique identifier matching the trigger's identifier for accessibility */
  identifier: string;
  /** Horizontal positioning relative to trigger */
  xAlign?: PopoverXAlign | `${PopoverXAlign}`;
  /** Vertical positioning relative to trigger */
  yAlign?: PopoverYAlign | `${PopoverYAlign}`;
  /** Whether to display the directional arrow indicator */
  displayArrow?: boolean;
};
/**
 * Popover Detail Component
 *
 * The actual popover content container with advanced positioning, animation, and
 * accessibility features. Automatically manages visibility based on trigger interactions.
 *
 * Features:
 * - Precise positioning with alignment options
 * - Smooth fade and slide animations
 * - Configurable directional arrows
 * - Hover and focus interaction support
 * - Accessibility-compliant ARIA attributes
 * - High z-index for overlay behavior
 * - Automatic visibility management
 *
 * Positioning System:
 * - X-axis: START (left-aligned) or END (right-aligned)
 * - Y-axis: BELOW (underneath) or ABOVE (on top)
 * - Automatic spacing with 1rem gap from trigger
 * - Responsive minimum width matching trigger
 *
 * Arrow Indicators:
 * - CSS-generated triangular arrows
 * - Positioned based on alignment settings
 * - Points toward trigger for visual connection
 * - Can be disabled for clean, minimal appearance
 *
 * Animation Behavior:
 * - Starts invisible with opacity: 0
 * - Smooth 400ms transitions with easing
 * - 800ms delay for hover states (prevents flicker)
 * - Immediate hiding when trigger loses focus/hover
 *
 * @example
 * Rich content popover:
 * ```jsx
 * <Popover.Detail identifier="rich-content">
 *   <div className="p-4">
 *     <h3>Popover Title</h3>
 *     <p>Detailed information with multiple paragraphs.</p>
 *     <button>Action Button</button>
 *   </div>
 * </Popover.Detail>
 * ```
 *
 * @example
 * Menu-style popover:
 * ```jsx
 * <Popover.Detail
 *   identifier="context-menu"
 *   displayArrow={false}
 *   xAlign={PopoverXAlign.END}
 * >
 *   <ul className="py-2">
 *     <li><button className="w-full px-4 py-2">Edit</button></li>
 *     <li><button className="w-full px-4 py-2">Delete</button></li>
 *   </ul>
 * </Popover.Detail>
 * ```
 *
 * @param props - Popover Detail component props
 * @returns Positioned popover content with animations and accessibility
 */
declare const Detail: react16.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
  /** Whether the popover responds to focus events on the trigger */
  isFocusable?: boolean;
  /** Controls visibility state - undefined allows automatic hover/focus control */
  isHidden?: boolean;
  /** Whether the popover responds to hover events on the trigger */
  isOverable?: boolean;
  /** Unique identifier matching the trigger's identifier for accessibility */
  identifier: string;
  /** Horizontal positioning relative to trigger */
  xAlign?: PopoverXAlign | `${PopoverXAlign}`;
  /** Vertical positioning relative to trigger */
  yAlign?: PopoverYAlign | `${PopoverYAlign}`;
  /** Whether to display the directional arrow indicator */
  displayArrow?: boolean;
} & react16.RefAttributes<HTMLDivElement>>;
//#endregion
export { Detail, DetailProps, PopoverProps, PopoverStatic, PopoverType, PopoverXAlign, PopoverYAlign };
//# sourceMappingURL=static.d.ts.map