import { CSSProperties, MouseEvent, ReactNode } from 'react';
import { IconContent } from '../types/icon.types.js';
import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types.js';
export interface BreadcrumbItem {
    id?: string;
    label: ReactNode;
    href?: string;
    icon?: IconContent;
    onClick?: (event: MouseEvent) => void;
    disabled?: boolean;
}
export type BreadcrumbSlots = 'root' | 'list' | 'item' | 'link' | 'icon' | 'separator' | 'current' | 'ellipsis' | 'hiddenList' | 'hiddenItem';
/** Text Breadcrumb renders of its own, for translating it. */
export interface BreadcrumbLabels {
    /** Button that reveals the collapsed middle items, and its tooltip. */
    showHidden?: string;
}
export interface BreadcrumbProps extends HtmlProps {
    items: BreadcrumbItem[];
    separator?: ReactNode;
    /**
     * When set, and `items.length` exceeds this, collapses the middle items behind a clickable
     * ellipsis. The ellipsis itself counts as one of the visible slots — e.g. `maxItems={3}` shows
     * the first item, the ellipsis, and the last item.
     */
    maxItems?: number;
    className?: string;
    style?: CSSProperties;
    classNames?: SlotClassNames<BreadcrumbSlots>;
    styles?: SlotStyles<BreadcrumbSlots>;
    /** Overrides the text Breadcrumb renders of its own. Merged per key. */
    labels?: BreadcrumbLabels;
}