import { default as React, HTMLProps, ReactNode } from 'react';
import { ElementDensity, ElementFocusEffect, ElementFont, ElementSelectedEffect, ElementShape, ElementTouchEffect, SurfaceColor } from '../../utils';
import { MenuVariant } from '../menu/menu';
/**
 * Visual variant of a ListItem.
 *
 * Inherited from {@link MenuVariant}.
 *
 * @category ListItem
 */
export type ListItemVariant = MenuVariant;
/**
 * Defines the behavioral type of a ListItem.
 *
 * - `item` – simple action item
 * - `checkbox` – toggleable multiple-selection item
 * - `radio` – mutually exclusive selection item
 * - `option` – selectable option item
 *
 * @category ListItem
 */
export type ListItemType = 'item' | 'checkbox' | 'radio' | 'option';
/**
 * Change event payload for selectable menu items
 * (checkbox, radio and option).
 *
 * @category ListItem
 */
export interface ListItemChangeEvent {
    /** Checkbox or radio checked state. */
    checked?: boolean;
    /** Item name identifier. */
    name?: string;
    /** Selection state for option items. */
    selected?: boolean;
    /** Item value identifier. */
    value?: string;
}
/**
 * Props for the {@link ListItem} component.
 *
 * @category ListItem
 */
export interface ListItemProps extends Omit<HTMLProps<HTMLDivElement>, 'ref' | 'onChange'> {
    /** Marks item as active (roving focus). */
    active?: boolean;
    /** Badge content rendered at the end. */
    badge?: ReactNode;
    /** Checked state for checkbox or radio items. */
    checked?: boolean;
    /** Icon shown when item is checked. */
    checkedIcon?: ReactNode;
    /** Item content or nested submenu. */
    children?: ReactNode;
    /** Base surface color of the item. */
    color?: SurfaceColor;
    /** Density preset controlling spacing. */
    density?: ElementDensity;
    /** Secondary description text. */
    description?: string;
    /** Text color of the description. */
    descriptionColor?: SurfaceColor;
    /** Font token applied to the description text. */
    descriptionFont?: ElementFont;
    /** Disables interactions and focus. */
    disabled?: boolean;
    /** Icon rendered at the end (alias for `trailing`). */
    endIcon?: ReactNode;
    /** Whether a nested submenu is expanded. */
    expanded?: boolean;
    /** Reserves leading slot even without an icon. */
    fixedLeading?: boolean;
    /** Visual focus effects applied when active. */
    focusEffects?: ElementFocusEffect[];
    /** Forces focus-visible styling. */
    focusVisible?: boolean;
    /** Alias for labelFont. */
    font?: ElementFont;
    /** Enables horizontal layout mode. */
    horizontal?: boolean;
    /** Icon rendered at the start (alias for `leading`). */
    icon?: ReactNode;
    /** Primary label text. */
    label?: string;
    /** Text color of the label. */
    labelColor?: SurfaceColor;
    /** Font token applied to the label text. */
    labelFont?: ElementFont;
    /** Custom leading content. */
    leading?: ReactNode;
    /** Item name used in change events. */
    name?: string;
    /** Change handler for checkbox, radio and option items. */
    onChange?: (e: ListItemChangeEvent) => void;
    /** Click handler for action items. */
    onClick?: React.MouseEventHandler<HTMLDivElement>;
    /** Selected state for option items. */
    selected?: boolean;
    /** Background color used when selected. */
    selectedColor?: SurfaceColor;
    /** Visual effects applied when selected. */
    selectedEffects?: ElementSelectedEffect[];
    /** Shape token applied to the item. */
    shape?: ElementShape;
    /** Keyboard shortcut label. */
    shortcut?: string;
    /** Text color of the shortcut label. */
    shortcutColor?: SurfaceColor;
    /** Font token applied to the shortcut text. */
    shortcutFont?: ElementFont;
    /** Overrides automatic text color. */
    textColor?: SurfaceColor;
    /** Touch and click feedback effects. */
    touchEffects?: ElementTouchEffect[];
    /** Custom trailing content. */
    trailing?: ReactNode;
    /** Item behavior type. */
    type?: ListItemType;
    /** Icon shown when item is unchecked. */
    uncheckedIcon?: ReactNode;
    /** Item value used in change events. */
    value?: string;
    /** Visual variant inherited from Menu. */
    variant?: ListItemVariant;
}
/**
 * Internal props injected by Menu.
 *
 * @internal
 * @category ListItem
 */
export interface ListItemInternalProps {
    /** Disables pointer and keyboard interactions. */
    __interactionsDisabled?: boolean;
    /** Item index inside the parent menu. */
    __index?: number;
    /** Index exposed for DOM queries. */
    'data-menu-index'?: number;
    /** ARIA role family inherited from parent container. */
    roleFamily?: 'menu' | 'listbox' | 'command' | 'toolbar';
}
/**
 * **ListItem** - single interactive item inside a {@link Menu}.
 *
 * Represents an action, checkbox, radio item or selectable option.
 * Supports icons, badges, shortcuts, descriptions and nested submenus.
 *
 * Keyboard interaction and focus are handled by the parent Menu.
 *
 * @param props
 *
 * @example
 * ```tsx
 * <ListItem label="Open" onClick={handleOpen} />
 * ```
 *
 * @example
 * ```tsx
 * <ListItem
 *   type="checkbox"
 *   label="Show grid"
 *   checked={enabled}
 *   onChange={() => setEnabled(v => !v)}
 * />
 * ```
 *
 * @example
 * ```tsx
 * <ListItem label="More">
 *   <Menu>
 *     <ListItem label="Sub item" />
 *   </Menu>
 * </ListItem>
 * ```
 * @function
 * @category ListItem
 */
export declare const ListItem: React.ForwardRefExoticComponent<ListItemProps & ListItemInternalProps & React.RefAttributes<HTMLDivElement>>;