import { default as React } from 'react';
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
/**
* A dropdown menu component that displays a menu when triggered.
* Based on Radix UI's Dropdown Menu primitive.
*
* @example
* ```tsx
* // Simple dropdown with button trigger
* function SimpleDropdown() {
* return (
*
*
*
*
*
* My Account
*
* Profile
* Settings
* Logout
*
*
* );
* }
* ```
*
* @example
* ```tsx
* // Advanced dropdown with custom trigger and multiple sections
* function UserProfileDropdown() {
* return (
*
*
*
*
*
*
*
*
*
*
*
* Company Name
*
*
*
*
* Help Center
*
*
*
* Account
*
* Manage Account
*
*
* Sign Out
*
*
*
*
* );
* }
* ```
*/
declare const DropdownMenu: React.FC;
/**
* The trigger element for the dropdown menu.
* Can be used with the `asChild` prop to use a custom element as the trigger.
*
* @example
* ```tsx
* // With Button component
*
*
*
* ```
*
* @example
* ```tsx
* // With custom div
*
*
*
* Options
*
*
* ```
*/
declare const DropdownMenuTrigger: React.ForwardRefExoticComponent>;
/**
* Groups dropdown menu items together.
* Useful for organizing related menu items.
*
* @example
* ```tsx
*
* Profile
* Settings
* Preferences
*
* ```
*/
declare const DropdownMenuGroup: React.ForwardRefExoticComponent>;
/**
* Portals the dropdown menu content into the body.
*
* @example
* ```tsx
*
*
* Item 1
* Item 2
*
*
* ```
*/
declare const DropdownMenuPortal: React.FC;
/**
* Creates a submenu within a dropdown menu.
* Useful for nested navigation.
*
* @example
* ```tsx
*
* More Options
*
* Preferences
* Notifications
*
*
* ```
*/
declare const DropdownMenuSub: React.FC;
/**
* A group of radio items within the dropdown menu.
* Used when only one option can be selected at a time.
*
* @example
* ```tsx
*
* Top
* Right
* Bottom
* Left
*
* ```
*/
declare const DropdownMenuRadioGroup: React.ForwardRefExoticComponent>;
/**
* Trigger for a submenu within a dropdown menu.
* Displays a chevron icon to indicate that it opens a submenu.
*
* @param {boolean} inset - Whether to add padding on the left side
* @param {React.ReactNode} children - The content of the trigger
*
* @example
* ```tsx
*
* More Options
*
* Submenu Item
*
*
* ```
*/
declare const DropdownMenuSubTrigger: React.FC & {
inset?: boolean;
}>;
/**
* Content for a submenu within a dropdown menu.
* Appears when the submenu trigger is clicked.
*
* @example
* ```tsx
*
* More Options
*
* Submenu Item 1
* Submenu Item 2
*
*
* ```
*/
declare const DropdownMenuSubContent: React.FC>;
/**
* Dropdown menu content component that displays the dropdown items.
* This is the container for all dropdown menu items and sections.
*
* @param {"start" | "center" | "end"} align - Alignment of the dropdown content relative to the trigger
* @param {number} sideOffset - Distance between the trigger and the content
*
* @example
* ```tsx
*
*
*
*
*
* My Account
*
* Profile
* Logout
*
*
* ```
*/
declare const DropdownMenuContent: React.FC & {
align?: 'start' | 'center' | 'end';
}>;
/**
* Interactive item within a dropdown menu.
* Can be clicked to perform an action.
*
* @param {boolean} inset - Whether to add padding on the left side
* @param {boolean} disabled - Whether the item is disabled
*
* @example
* ```tsx
*
* Profile
*
* ```
*
* @example
* ```tsx
* // With icon
*
* Sign Out
*
*
* ```
*/
declare const DropdownMenuItem: React.FC & {
inset?: boolean;
}>;
/**
* Checkbox item within a dropdown menu.
* Can be checked or unchecked.
*
* @param {boolean} checked - Whether the checkbox is checked
* @param {boolean} disabled - Whether the checkbox is disabled
* @param {React.ReactNode} children - The content of the checkbox item
*
* @example
* ```tsx
*
* Show Status
*
* ```
*/
declare const DropdownMenuCheckboxItem: React.FC>;
/**
* Radio item within a dropdown menu radio group.
* Only one item in a group can be selected.
*
* @param {string} value - The value of the radio item
* @param {React.ReactNode} children - The content of the radio item
*
* @example
* ```tsx
*
* Top
* Right
* Bottom
* Left
*
* ```
*/
declare const DropdownMenuRadioItem: React.FC>;
/**
* Label for a section in a dropdown menu.
* Used to group related items.
*
* @param {boolean} inset - Whether to add padding on the left side
* @param {React.ReactNode} children - The content of the label
*
* @example
* ```tsx
*
* My Account
*
* ```
*
* @example
* ```tsx
* // Simple text label
* Account Settings
* ```
*/
declare const DropdownMenuLabel: React.FC & {
inset?: boolean;
}>;
/**
* Separator line between dropdown menu items or sections.
*
* @example
* ```tsx
*
* Account
* Profile
*
* Logout
*
* ```
*/
declare const DropdownMenuSeparator: React.FC>;
/**
* Displays keyboard shortcuts next to dropdown menu items.
* Typically shown on the right side of menu items.
*
* @param {string} className - Additional CSS classes
*
* @example
* ```tsx
*
* Copy
* ⌘C
*
* ```
*/
declare const DropdownMenuShortcut: {
({ className, ...props }: React.HTMLAttributes): import("react/jsx-runtime").JSX.Element;
displayName: string;
};
export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuGroup, DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuRadioGroup, };