import type { ComponentProps, CSSProperties, ElementType, ReactNode } from 'react';
import type { Badge } from '../../../../components/Badges/Badge';
import type { ItemType, PinUnPinType } from '../../types';
type ItemProps = {
    children?: ReactNode;
    /**
     * Sets a category icon on the left of the item
     */
    categoryIcon?: ReactNode;
    /**
     * The label of the item that will be shown.
     * It is also used as the key for pinning.
     */
    label: string;
    /**
     * It will be added after the label when you want to have complementory information with the label
     */
    labelDescription?: ReactNode;
    /**
     * It should be a unique id and will be used for pin/unpin and show/hide feature.
     */
    id: string;
    /**
     * Text shown under the label with a lighter color and smaller font size
     */
    subLabel?: string;
    /**
     * Badge is added on the right of the item. It is hidden on hover if pinned
     * feature is enabled
     */
    badgeText?: string;
    /**
     * Defined the sentiment of the badge according to Badge component from
     * `@ultraviolet/ui`
     */
    badgeSentiment?: ComponentProps<typeof Badge>['sentiment'];
    href?: HTMLAnchorElement['href'];
    target?: HTMLAnchorElement['target'];
    rel?: HTMLAnchorElement['rel'];
    /**
     * This function will be triggered on click of the item. If the item is expandable
     * toggle will be passed with it.
     */
    onToggle?: (toggle: boolean) => void;
    onClickPinUnpin?: (parameters: PinUnPinType) => void;
    /**
     * This prop is used to control if the item is expanded or collapsed
     */
    toggle?: boolean;
    /**
     * Set this to true if your current page is this item.
     */
    active?: boolean;
    /**
     * If you want to remove pin button on your item use this prop
     */
    noPinButton?: boolean;
    /**
     * You don't need to use this prop it's used internally to control the type of the item
     */
    type?: ItemType;
    /**
     * You don't need to use this prop it's used internally for pinned item to be reorganized with drag and drop
     */
    index?: number;
    /**
     * When the item has href it becomes a link if not it is a button.
     * When using an external routing tool you might need to remove both of them and use
     * a non focusable element. This option allows you to choose the tag of the
     * item.
     */
    as?: ElementType;
    /**
     * Use this prop if you want to remove the expand behavior when the item
     * has sub items.
     */
    noExpand?: boolean;
    /**
     * When set to true, the item is still visible even when `showHide='hide'` (NavigationProvider)
     */
    alwaysVisible?: boolean;
    disabled?: boolean;
    'data-testid'?: string;
    style?: CSSProperties;
};
export declare const Item: import("react").MemoExoticComponent<({ children, categoryIcon, label, labelDescription, subLabel, badgeText, badgeSentiment, href, target, rel, onToggle, onClickPinUnpin, toggle, active, noPinButton, type, as, disabled, noExpand, index, id, 'data-testid': dataTestId, style, alwaysVisible, }: ItemProps) => import("react").JSX.Element | null>;
export {};
//# sourceMappingURL=Item.d.ts.map