@loke/design-system/dist/components/dropdown-menu/dropdown-menu.d.mts

A design system with individually importable components

import * as DropdownMenuPrimitive from "@loke/ui/dropdown-menu";
import type { ComponentProps } from "react";
/**
 * DropdownMenu component for displaying a menu of options
 *
 * The DropdownMenu component provides a way to show a list of options or actions in a compact, expandable format. It's typically triggered by a button and can contain various types of menu items, including nested submenus.
 *
 * Key features:
 * - Customizable trigger element
 * - Support for standard menu items, checkboxes, and radio buttons
 * - Nested submenus for hierarchical options
 * - Keyboard navigation support
 * - Customizable styling through className props
 *
 * Usage considerations:
 * - Use for presenting a list of actions or options related to a specific context
 * - Ensure menu items are clearly labeled and logically grouped
 * - Consider the number of items and use separators or groups to improve readability
 * - Implement keyboard navigation for accessibility
 */
declare function DropdownMenu({ ...props }: ComponentProps<typeof DropdownMenuPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
/**
 * DropdownMenuPortal component for rendering menu content in a portal.
 *
 * This component renders its children into a React portal, ensuring the dropdown
 * content appears above other page content and outside the normal DOM hierarchy.
 * Useful for avoiding overflow or z-index issues with parent containers.
 */
declare function DropdownMenuPortal({ ...props }: ComponentProps<typeof DropdownMenuPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
/**
 * DropdownMenuTrigger component for opening the dropdown menu
 *
 * This component renders a button that toggles the visibility of the associated DropdownMenuContent when clicked. It automatically handles the open/close state of the dropdown menu.
 */
declare function DropdownMenuTrigger({ ...props }: ComponentProps<typeof DropdownMenuPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
/**
 * DropdownMenuContent component for rendering the main dropdown menu content.
 *
 * This component is responsible for displaying the options within the dropdown menu. It handles layout, positioning, and any interactive items contained within the menu, such as buttons or links.
 */
declare function DropdownMenuContent({ className, align, sideOffset, matchTriggerWidth, ...props }: ComponentProps<typeof DropdownMenuPrimitive.Content> & {
    matchTriggerWidth?: boolean;
}): import("react/jsx-runtime").JSX.Element;
/**
 * DropdownMenuGroup component for grouping related menu items.
 *
 * This component provides a semantic grouping for related dropdown menu items.
 * It helps organize menu content and can be used with DropdownMenuLabel to
 * provide a heading for the group. Groups improve accessibility by allowing
 * screen readers to announce related items together.
 */
declare function DropdownMenuGroup({ ...props }: ComponentProps<typeof DropdownMenuPrimitive.Group>): import("react/jsx-runtime").JSX.Element;
/**
 * DropdownMenuItem component for rendering a clickable menu item.
 *
 * This component represents an individual actionable item within the dropdown menu.
 * It supports keyboard navigation, focus states, and can be styled with variants.
 *
 * @param inset - When true, adds left padding to align with checkbox/radio items
 * @param variant - Visual variant: "default" for standard items, "destructive" for dangerous actions
 */
declare function DropdownMenuItem({ className, inset, variant, ...props }: ComponentProps<typeof DropdownMenuPrimitive.Item> & {
    inset?: boolean;
    variant?: "default" | "destructive";
}): import("react/jsx-runtime").JSX.Element;
/**
 * DropdownMenuCheckboxItem component for rendering a toggleable checkbox menu item.
 *
 * This component renders a menu item with a checkbox indicator, allowing users
 * to toggle options on and off. The checked state is displayed with a checkmark icon.
 * Ideal for settings or preferences that can be independently enabled or disabled.
 *
 * @param checked - The controlled checked state of the checkbox
 * @param inset - When true, adds left padding to align with other inset items
 */
declare function DropdownMenuCheckboxItem({ className, children, checked, inset, ...props }: ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem> & {
    inset?: boolean;
}): import("react/jsx-runtime").JSX.Element;
/**
 * DropdownMenuRadioGroup component for grouping radio items in the dropdown menu.
 *
 * This component renders a group of radio buttons within the dropdown menu, allowing users to select one option from a set.
 * It automatically manages the selection state of the radio buttons and ensures only one option can be selected at a time.
 */
declare function DropdownMenuRadioGroup({ ...props }: ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>): import("react/jsx-runtime").JSX.Element;
/**
 * DropdownMenuRadioItem component for rendering a selectable radio menu item.
 *
 * This component renders a menu item that functions as a radio button within a
 * DropdownMenuRadioGroup. Only one radio item can be selected at a time within
 * the group. The selected state is displayed with a checkmark icon.
 *
 * @param inset - When true, adds left padding to align with other inset items
 */
declare function DropdownMenuRadioItem({ className, children, inset, ...props }: ComponentProps<typeof DropdownMenuPrimitive.RadioItem> & {
    inset?: boolean;
}): import("react/jsx-runtime").JSX.Element;
/**
 * DropdownMenuLabel component for rendering a non-interactive label within the menu.
 *
 * This component displays a text label that describes a group of menu items.
 * It is styled differently from actionable items and cannot be selected or focused.
 * Use it to provide context or headings for groups of related menu items.
 *
 * @param inset - When true, adds left padding to align with checkbox/radio items
 */
declare function DropdownMenuLabel({ className, inset, ...props }: ComponentProps<typeof DropdownMenuPrimitive.Label> & {
    inset?: boolean;
}): import("react/jsx-runtime").JSX.Element;
/**
 * DropdownMenuSeparator component for visually separating groups of menu items.
 *
 * This component renders a horizontal line that creates visual separation between
 * sections of the dropdown menu. Use it to organize related items into distinct
 * groups and improve the overall readability of the menu.
 */
declare function DropdownMenuSeparator({ className, ...props }: ComponentProps<typeof DropdownMenuPrimitive.Separator>): import("react/jsx-runtime").JSX.Element;
/**
 * DropdownMenuShortcut component for displaying keyboard shortcut hints.
 *
 * This component renders a keyboard shortcut hint aligned to the right side
 * of a menu item. It uses muted styling to be visually secondary to the main
 * menu item text. Use it to inform users of available keyboard shortcuts.
 */
declare function DropdownMenuShortcut({ className, ...props }: ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
/**
 * DropdownMenuSub component for rendering a nested dropdown menu.
 *
 * This component provides functionality for creating a nested dropdown menu within a parent dropdown. It manages the open and close states of the submenu, allowing users to navigate through multiple levels of dropdown options.
 */
declare function DropdownMenuSub({ ...props }: ComponentProps<typeof DropdownMenuPrimitive.Sub>): import("react/jsx-runtime").JSX.Element;
/**
 * DropdownMenuSubTrigger component for opening a nested dropdown menu.
 *
 * This component renders an interactive element that triggers the display of a nested submenu when clicked or hovered over.
 * It is used in conjunction with `DropdownMenuSub` to allow for hierarchical dropdown navigation.
 */
declare function DropdownMenuSubTrigger({ className, inset, children, ...props }: ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
    inset?: boolean;
}): import("react/jsx-runtime").JSX.Element;
/**
 * DropdownMenuSubContent component for displaying the content of a nested dropdown menu.
 *
 * This component renders the content of a nested dropdown submenu. It appears when the `DropdownMenuSubTrigger` is activated and allows users to interact with deeper menu options.
 */
declare function DropdownMenuSubContent({ className, ...props }: ComponentProps<typeof DropdownMenuPrimitive.SubContent>): import("react/jsx-runtime").JSX.Element;
export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, };