/**
 * Copyright 2021, SumUp Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
import { type ReactNode, type ButtonHTMLAttributes, type AnchorHTMLAttributes, type HTMLAttributes } from 'react';
import { type IconComponentType } from '@sumup-oss/icons';
import type { ClickEvent } from '../../types/events.js';
type Variant = 'action' | 'navigation';
interface BaseProps {
    /**
     * Choose between 'action' and 'navigation' variant. Default: 'action'.
     * The `navigation` variant renders a chevron in the trailing section.
     */
    variant?: Variant;
    /**
     * Display a leading component.
     * Pass an icon from `@sumup-oss/icons` or a custom component.
     */
    leadingComponent?: IconComponentType | ReactNode;
    /**
     * Display a main label.
     */
    label: ReactNode;
    /**
     * Display a details line below the main label.
     */
    details?: ReactNode;
    /**
     * Display a trailing label.
     * If using the `navigation` variant, the chevron icon will be center aligned with this label.
     */
    trailingLabel?: string | ReactNode;
    /**
     * Display a trailing details label.
     */
    trailingDetails?: string | ReactNode;
    /**
     * Display a custom trailing component.
     * If using the `navigation` variant, the chevron icon will be center aligned with this component.
     */
    trailingComponent?: ReactNode;
    /**
     * Visually mark the list item as selected.
     */
    selected?: boolean;
    /**
     * Visually and functionally disable the list item.
     */
    disabled?: boolean;
    /**
     * Function that is called when the list item is clicked.
     */
    onClick?: (event: ClickEvent) => void;
    /**
     * Link to another part of the application or external page.
     */
    href?: string;
}
type DivElProps = Omit<HTMLAttributes<HTMLDivElement>, 'onClick'>;
type LinkElProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'onClick'>;
type ButtonElProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'>;
export type ListItemProps = BaseProps & DivElProps & LinkElProps & ButtonElProps;
/**
 * The ListItem component enables the user to render a list item with various
 * textual and visual elements.
 */
export declare const ListItem: import("react").ForwardRefExoticComponent<BaseProps & DivElProps & LinkElProps & ButtonElProps & import("react").RefAttributes<HTMLDivElement & HTMLAnchorElement & HTMLButtonElement>>;
export {};