import { TNode, Value } from '@tempots/dom';
import { ControlSize } from '../theme/types';
/**
 * Represents a single item in the breadcrumb navigation trail.
 */
export interface BreadcrumbItem {
    /** Display text for the breadcrumb item. */
    label: string;
    /** Optional URL for navigation (renders as `<a>` if provided). */
    href?: string;
    /** Optional click handler (renders as `<button>` if provided without href). */
    onClick?: () => void;
    /** Optional Iconify icon name (e.g., `'mdi:home'`). */
    icon?: string;
    /** Whether this item represents the current page. @default false */
    current?: boolean;
}
/**
 * Configuration options for the {@link Breadcrumbs} component.
 */
export interface BreadcrumbsOptions {
    /** Array of breadcrumb items to display. */
    items: Value<BreadcrumbItem[]>;
    /**
     * Separator character or string displayed between items.
     * @default '›'
     */
    separator?: Value<string>;
    /**
     * Maximum number of items to display. When exceeded, middle items
     * are collapsed into an ellipsis ("...").
     * @default undefined
     */
    maxItems?: Value<number>;
    /**
     * Size of the breadcrumb text and icons.
     * @default 'md'
     */
    size?: Value<ControlSize>;
}
/**
 * Navigation breadcrumbs component that displays a hierarchical trail of links
 * leading to the current page.
 *
 * Breadcrumbs help users understand their location within a site hierarchy and
 * provide a convenient way to navigate back to parent pages. The component supports
 * collapsing middle items when the trail becomes too long, and can display icons
 * alongside labels.
 *
 * Each item can be rendered as:
 * - An anchor (`<a>`) if `href` is provided
 * - A button (`<button>`) if `onClick` is provided
 * - A plain span (`<span>`) if neither is provided
 *
 * The last item is automatically marked with `aria-current="page"` if its `current`
 * property is true, indicating the current page to screen readers.
 *
 * @param options - Configuration for items, separator, max items, and size
 * @returns A `<nav>` element containing the breadcrumb trail
 *
 * @example
 * ```typescript
 * Breadcrumbs({
 *   items: [
 *     { label: 'Home', href: '/', icon: 'mdi:home' },
 *     { label: 'Products', href: '/products' },
 *     { label: 'Electronics', href: '/products/electronics' },
 *     { label: 'Laptop', current: true }
 *   ]
 * })
 * ```
 *
 * @example
 * ```typescript
 * // With max items to collapse long trails
 * Breadcrumbs({
 *   items: longItemsList,
 *   maxItems: 3,
 *   separator: '>',
 *   size: 'sm'
 * })
 * ```
 *
 * @example
 * ```typescript
 * // With click handlers instead of links
 * Breadcrumbs({
 *   items: [
 *     { label: 'Home', onClick: () => navigate('/') },
 *     { label: 'Settings', onClick: () => navigate('/settings') },
 *     { label: 'Profile', current: true }
 *   ]
 * })
 * ```
 */
export declare function Breadcrumbs({ items, separator, maxItems, size, }: BreadcrumbsOptions): TNode;