import { type HTMLAttributes } from "react";
import { type ListItemChildrenProps, type ListItemHeight } from "./types.js";
declare module "react" {
    interface CSSProperties {
        "--rmd-list-item-keyline"?: string | number;
        "--rmd-list-item-padding-h"?: string | number;
        "--rmd-list-item-padding-v"?: string | number;
        "--rmd-list-item-height"?: string | number;
        "--rmd-list-item-medium-height"?: string | number;
        "--rmd-list-item-large-height"?: string | number;
        "--rmd-list-item-extra-large-height"?: string | number;
        "--rmd-list-item-multiline-clamp"?: string | number;
        "--rmd-list-item-multiline-height"?: string | number;
        "--rmd-list-item-media-size"?: string | number;
        "--rmd-list-item-media-spacing"?: string | number;
        "--rmd-list-item-text-multiline-height"?: string | number;
    }
}
/**
 * @remarks \@since 6.0.0 Renamed `threeLines` to `multiline` since it can
 * support more than three lines of text.
 */
export interface ListItemProps extends HTMLAttributes<HTMLLIElement>, ListItemChildrenProps {
    /**
     * @defaultValue `"button"`
     */
    role?: HTMLAttributes<HTMLLIElement>["role"];
    /**
     * @defaultValue `disabled ? -1 : 0`
     */
    tabIndex?: number;
    /**
     * @see {@link ListItemHeight}
     * @defaultValue `"auto"`
     */
    height?: ListItemHeight;
    /**
     * @defaultValue `false`
     */
    multiline?: boolean;
    /**
     * @defaultValue `false`
     */
    disabled?: boolean;
    /**
     * Note: This does nothing if the `disabled` prop is not enabled.
     *
     * @defaultValue `false`
     * @remarks \@since 2.4.3
     */
    disabledOpacity?: boolean;
    /**
     * Set this to `false` if the list item should not gain the interaction
     * states: hover, focus, press, etc. This is kind of like being disabled
     * without the disabled styles being applied.
     *
     * @defaultValue `role === "presentation"`
     */
    presentational?: boolean;
}
/**
 * **Client Component**
 *
 * The `ListItem` is used to create a clickable/focusable button within a
 * `List` and removes the normal `<li>` styles.
 *
 * @example
 * Simple Example
 * ```tsx
 * import { List, ListItem } from "@react-md/core";
 * import type { ReactElement  } from "react";
 *
 * function Example(): ReactElement {
 *   return (
 *     <List>
 *       <ListItem
 *         onClick={() => {
 *           // do something
 *         }}
 *       >
 *         Item 1
 *       </ListItem>
 *       <ListItem
 *         onClick={() => {
 *           // do something
 *         }}
 *         secondaryText={<span>Some <strong>additional</strong> content.</span>}
 *       >
 *         Item 2
 *       </ListItem>
 *     </List>
 *   );
 *   );
 * }
 * ```
 *
 * @example
 * Applying Addons Example
 * ```tsx
 * import { List, ListItem } from "@react-md/core";
 * import FavoriteIcon from "@react-md/material-icons/FavoriteIcon";
 * import type { ReactElement  } from "react";
 *
 * function Example(): ReactElement {
 *   return (
 *     <List>
 *       <ListItem leftAddon={<FavoriteIcon />}>
 *         Item 1
 *       </ListItem>
 *       <ListItem rightAddon={<FavoriteIcon />}>
 *         Item 2
 *       </ListItem>
 *       <ListItem
 *         leftAddon={<FavoriteIcon />}
 *         rightAddon={<img alt="" src="/some-image.png" />}
 *         rightAddonType="media"
 *       >
 *         Item 3
 *       </ListItem>
 *     </List>
 *   );
 *   );
 * }
 * ```
 */
export declare const ListItem: import("react").ForwardRefExoticComponent<ListItemProps & import("react").RefAttributes<HTMLLIElement>>;
