import { ButtonProps } from "../Button/Button.js";
import "../Button/index.js";
import { FC, HTMLAttributes } from "react";

//#region src/components/DropDown/index.d.ts
/**
 * Props for the DropDown component
 */
interface DropDownProps extends HTMLAttributes<HTMLDivElement> {
  /**
   * Unique identifier that links the trigger and panel for accessibility.
   * This is used to generate proper ARIA attributes.
   * @example "user-menu"
   * @example "language-selector"
   */
  identifier: string;
}
type DropDownType = FC<DropDownProps> & {
  Trigger: FC<TriggerProps>;
  Panel: FC<PanelProps>;
};
/**
 * DropDown Component
 *
 * A compound component that provides dropdown/popover functionality with flexible trigger mechanisms.
 * Supports hover, focus, and controlled visibility states with proper accessibility features.
 *
 * @example
 * ```tsx
 * // Basic hover dropdown
 * <DropDown identifier="menu">
 *   <DropDown.Trigger identifier="menu">
 *     Open Menu
 *   </DropDown.Trigger>
 *   <DropDown.Panel identifier="menu" isOverable>
 *     <div>Menu content</div>
 *   </DropDown.Panel>
 * </DropDown>
 *
 * // Focus-based dropdown for accessibility
 * <DropDown identifier="accessible-menu">
 *   <DropDown.Trigger identifier="accessible-menu">
 *     Keyboard Accessible Menu
 *   </DropDown.Trigger>
 *   <DropDown.Panel identifier="accessible-menu" isFocusable>
 *     <div>Accessible content</div>
 *   </DropDown.Panel>
 * </DropDown>
 *
 * // Controlled dropdown
 * <DropDown identifier="controlled">
 *   <DropDown.Trigger identifier="controlled">
 *     Controlled Menu
 *   </DropDown.Trigger>
 *   <DropDown.Panel identifier="controlled" isHidden={!isOpen}>
 *     <div>Controlled content</div>
 *   </DropDown.Panel>
 * </DropDown>
 * ```
 *
 * @component
 * @accessibility
 * - Uses proper ARIA attributes (aria-haspopup, aria-labelledby, etc.)
 * - Supports keyboard navigation with focus management
 * - Screen reader compatible with proper role and labeling
 * - Maintains focus trap within dropdown when needed
 */
declare const DropDown: DropDownType;
/**
 * Props for the DropDown.Trigger component
 */
interface TriggerProps extends Partial<ButtonProps> {
  /**
   * Unique identifier that matches the parent DropDown identifier
   * @example "user-menu"
   */
  identifier: string;
}
/**
 * Alignment options for the dropdown panel relative to the trigger
 */
declare enum DropDownAlign {
  /** Align panel to the start (left in LTR, right in RTL) of the trigger */
  START = "start",
  /** Align panel to the end (right in LTR, left in RTL) of the trigger */
  END = "end",
}
/**
 * Props for the DropDown.Panel component
 */
interface PanelProps extends HTMLAttributes<HTMLDivElement> {
  /**
   * Whether the panel should be visible when the trigger is focused.
   * Enables keyboard accessibility for the dropdown.
   * @default false
   */
  isFocusable?: boolean;
  /**
   * Controls panel visibility explicitly.
   * - `true`: Panel is hidden
   * - `false`: Panel is visible
   * - `undefined`: Panel visibility controlled by hover/focus states
   * @default undefined
   */
  isHidden?: boolean;
  /**
   * Whether the panel should be visible when hovering over the trigger.
   * Provides quick access via mouse interaction.
   * @default false
   */
  isOverable?: boolean;
  /**
   * Unique identifier that matches the parent DropDown identifier
   * @example "user-menu"
   */
  identifier: string;
  /**
   * Horizontal alignment of the panel relative to the trigger
   * @default DropDownAlign.START
   */
  align?: DropDownAlign | `${DropDownAlign}`;
}
//#endregion
export { DropDown, DropDownAlign, DropDownProps, DropDownType, PanelProps, TriggerProps };
//# sourceMappingURL=index.d.ts.map