import { type ReactNode } from 'react';
import { type ListItemIconButtonProps } from './IconButton';
import { type ListItemCheckboxProps } from './Checkbox';
import { type ListItemNavigationProps } from './Navigation';
import { type ListItemButtonProps } from './Button';
import { type ListItemRadioProps } from './Radio';
import { type ListItemSwitchProps } from './Switch';
export type ListItemTypes = 'non-interactive' | 'navigation' | 'radio' | 'checkbox' | 'switch' | 'button' | 'icon-button';
export type ListItemControlProps = ListItemNavigationProps | ListItemCheckboxProps | ListItemButtonProps | ListItemIconButtonProps | ListItemRadioProps | ListItemSwitchProps;
export type ListItemProps = {
    as?: 'li' | 'div';
    /**
     * Swaps vertical hierarchy of title and subtitle and their corresponding right values.
     */
    inverted?: boolean;
    /**
     * Disables the control and renders the ListItem in greyscale and with slightly decreased opacity.
     */
    disabled?: boolean;
    /**
     * If set, it'll extend the `disabled` state, overriding existing or injecting uniquely styled prompt with the message provided via this prop. <br />
     * **NB:** This message cannot house more than **1** link or inline button.<br />
     * **NB:** It must be used together with `disabled` prop and will be disregarded otherwise.
     */
    disabledPromptMessage?: ReactNode;
    /**
     * Highlights the list item as an action to be taken or already taken. <br />
     */
    spotlight?: 'active' | 'inactive';
    title: ReactNode;
    subtitle?: ReactNode;
    /**
     * Requires `<ListItem.AdditionalInfo />` component as a sole child. <br />
     * Can be only rendered if `subtitle` is also provided.
     */
    additionalInfo?: ReactNode;
    valueTitle?: ReactNode;
    valueSubtitle?: ReactNode;
    /**
     * Requires one of the following as a sole child: <br />
     * `<ListItem.AvatarView />`,
     * `<ListItem.AvatarLayout />` or
     * `<ListItem.Image />`
     */
    media?: ReactNode;
    /**
     * Requires one of the following as a sole child: <br/>
     * `<ListItem.Button />`, <br/>
     * `<ListItem.Checkbox />`, <br/>
     * `<ListItem.IconButton />`, <br/>
     * `<ListItem.Navigation />`, <br/>
     * `<ListItem.Radio />`, or
     * `<ListItem.Switch />`
     */
    control?: ReactNode;
    /**
     * Requires `<ListItem.Prompt />` component as a sole child.
     */
    prompt?: ReactNode;
    className?: string;
    /**
     * A number between `0–100` which resolves to a `fr` value of a `grid-template-columns` declaration. E.g. `valueColumnWidth={25}` will result in a `75fr 25fr`. <br />
     * Controls the width ratio of left side content (title and subtitle) to the right side content.
     */
    valueColumnWidth?: number;
    id?: string;
};
/**
 * @see [Design documentation](https://wise.design/components/list-item)
 * @see [Storybook documentation](https://storybook.wise.design/?path=/docs/content-listitem--docs)
 */
export declare const ListItem: {
    ({ as: ListItemElement, title, subtitle, additionalInfo, prompt, inverted, media, spotlight, valueTitle, valueSubtitle, control, disabled, disabledPromptMessage, className, valueColumnWidth, id, }: ListItemProps): import("react").JSX.Element;
    Image: {
        ({ alt, size, className, ...props }: import("./Image").ListItemImageProps): import("react").JSX.Element;
        displayName: string;
    };
    AvatarView: {
        ({ className, size, ...props }: import("./AvatarView").ListItemAvatarViewProps): import("react").JSX.Element;
        displayName: string;
    };
    AvatarLayout: {
        ({ className, size, ...props }: import("./AvatarLayout").ListItemAvatarLayoutProps): import("react").JSX.Element;
        displayName: string;
    };
    AdditionalInfo: {
        ({ children, action }: import("./AdditionalInfo").ListItemAdditionalInfoProps): import("react").JSX.Element;
        displayName: string;
    };
    Checkbox: {
        (props: ListItemCheckboxProps): import("react").JSX.Element;
        displayName: string;
    };
    Radio: {
        (props: ListItemRadioProps): import("react").JSX.Element;
        displayName: string;
    };
    IconButton: {
        ({ priority, "aria-label": ariaLabel, ...props }: ListItemIconButtonProps): import("react").JSX.Element;
        displayName: string;
    };
    Navigation: {
        ({ href, ...props }: ListItemNavigationProps): import("react").JSX.Element;
        displayName: string;
    };
    Button: {
        ({ priority, partiallyInteractive, ...props }: ListItemButtonProps): import("react").JSX.Element;
        displayName: string;
    };
    Switch: {
        (props: ListItemSwitchProps): import("react").JSX.Element;
        displayName: string;
    };
    Prompt: {
        ({ sentiment, mediaLabel, children, }: import("./Prompt").ListItemPromptProps): import("react").JSX.Element;
        displayName: string;
    };
};
export default ListItem;
//# sourceMappingURL=ListItem.d.ts.map