@buun_group/brutalist-ui/dist/react/dropdown/Dropdown.d.ts

A brutalist-styled component library

/**
 * @module Dropdown
 * @description A dropdown menu component triggered by user interaction. Features automatic positioning, keyboard navigation, and flexible content with support for icons and shortcuts.
 */
import React, { HTMLAttributes, CSSProperties } from 'react';
export type DropdownPosition = 'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
/**
 * Props for the Dropdown component
 */
export interface DropdownProps {
    /**
     * The trigger element and menu content
     */
    children: React.ReactNode;
    /**
     * Controlled open state
     */
    open?: boolean;
    /**
     * Callback fired when the dropdown opens or closes
     */
    onOpenChange?: (open: boolean) => void;
    /**
     * Position of the dropdown relative to the trigger
     * @default 'bottom'
     */
    position?: DropdownPosition;
    /**
     * Distance in pixels from the trigger
     * @default 8
     */
    offset?: number;
    /**
     * Whether to close the dropdown when an item is clicked
     * @default true
     */
    closeOnItemClick?: boolean;
    /**
     * Whether to close when clicking outside the dropdown
     * @default true
     */
    closeOnClickOutside?: boolean;
    /**
     * Whether to close when pressing the Escape key
     * @default true
     */
    closeOnEscape?: boolean;
    /**
     * Additional CSS class name for styling
     */
    className?: string;
    /**
     * Custom styles to apply to the dropdown
     */
    style?: CSSProperties;
}
interface DropdownContextValue {
    close: () => void;
    closeOnItemClick: boolean;
}
/**
 * A dropdown menu triggered by user interaction.
 * Provides automatic positioning and keyboard navigation.
 *
 * @example
 * ```tsx
 * <Dropdown>
 *   <button>Options</button>
 *   <Dropdown.Menu>
 *     <Dropdown.Item icon={<EditIcon />}>Edit</Dropdown.Item>
 *     <Dropdown.Item icon={<CopyIcon />}>Duplicate</Dropdown.Item>
 *     <Dropdown.Separator />
 *     <Dropdown.Item destructive>Delete</Dropdown.Item>
 *   </Dropdown.Menu>
 * </Dropdown>
 * ```
 */
export declare const Dropdown: React.FC<DropdownProps> & {
    Menu: typeof DropdownMenu;
    Item: typeof DropdownItem;
    Separator: typeof DropdownSeparator;
    Label: typeof DropdownLabel;
};
/**
 * Container for dropdown menu items.
 * Must be a direct child of the Dropdown component.
 */
export declare const DropdownMenu: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
    style?: CSSProperties;
} & React.RefAttributes<HTMLDivElement>>;
/**
 * Props for the Dropdown.Item component
 */
interface DropdownItemProps extends HTMLAttributes<HTMLDivElement> {
    /**
     * Whether the item is disabled and cannot be selected
     * @default false
     */
    disabled?: boolean;
    /**
     * Whether the item represents a destructive action (shown in red)
     * @default false
     */
    destructive?: boolean;
    /**
     * Icon to display before the item text
     */
    icon?: React.ReactNode;
    /**
     * Keyboard shortcut to display on the right
     */
    shortcut?: string;
    /**
     * Custom styles to apply to the item
     */
    style?: CSSProperties;
}
/**
 * Individual item within the dropdown menu.
 * Supports icons, shortcuts, and various states.
 */
export declare const DropdownItem: React.ForwardRefExoticComponent<DropdownItemProps & React.RefAttributes<HTMLDivElement>>;
/**
 * Visual separator between dropdown items or groups.
 */
export declare const DropdownSeparator: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
    style?: CSSProperties;
} & React.RefAttributes<HTMLDivElement>>;
/**
 * Label for grouping dropdown items.
 * Non-interactive and used for organizational purposes.
 */
export declare const DropdownLabel: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
    style?: CSSProperties;
} & React.RefAttributes<HTMLDivElement>>;
export declare const useDropdown: () => DropdownContextValue;
export {};