import React from "react";
import type { IconColorNames, IconNames } from "@jobber/design";
export interface BaseListItemProps {
    /**
     * The ID of the list item. This is important for React to handle efficient
     * re-rendering of list items.
     */
    readonly id: number | string;
}
export interface ListItemProps extends BaseListItemProps {
    /**
     * Subdued text under the `content` prop.
     */
    readonly caption?: string;
    /**
     * List item content. This accepts a string for a simple content and an array
     * for a multi line content.
     * This supports basic markdown node types such as `_italic_` and `**bold**`.
     */
    readonly content?: string | string[];
    /**
     * Shows an icon on the left side of the contents.
     */
    readonly icon?: IconNames;
    /**
     * Changes the color of the icons.
     */
    readonly iconColor?: IconColorNames;
    /**
     * Highlights the list item with the lightest green icon. This communicates
     * that the line item needs attention.
     */
    readonly isActive?: boolean;
    /**
     * This determines how and when to group the list items
     */
    readonly section?: string;
    /**
     * Adds a heading.
     */
    readonly title?: string;
    /**
     * This turns the list item into a clickable link.
     */
    readonly url?: string;
    /**
     * A numeric value of a row. This always shows up in the right side of the row
     * with a text aligned to the right.
     */
    readonly value?: string;
    /**
     * Callback when a list item gets clicked.
     */
    onClick?(event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>): void;
}
export declare function ListItem<T extends BaseListItemProps = ListItemProps>(props: T & ListItemProps & {
    readonly customRenderItem?: (item: T) => React.ReactNode;
    readonly customItemStyles?: boolean;
}): React.JSX.Element;