import * as React from 'react';
import { type RenderProp } from '../../internal/render-seam';
/**
 * STYLED FROM THE FIGMA ATOM, not from maker-ds. `.breadcrumb` draws a bare 12/18 trail with 4px
 * round separators and no chrome at all — no padding, no rounded backgrounds, no accent inks. See
 * `scripts/figma/bindings/breadcrumb.json`. maker-ds supplied the structure and semantics; the look
 * is Figma's.
 *
 * A trail link, inked `--color-text-muted-figma` — Figma's own `color/gray/gray-400`, which is
 * **5.33:1 on Figma's page and passes AA**. This was `--color-text-secondary` (#c5d0e3, 12.46:1)
 * because the binding declined gray-400 for measuring 3.63:1 *carried onto a white page*; rule 3
 * removed the white page, so the literal ports and the substitution is void.
 *
 * The rule appears on hover so the affordance is not carried by ink alone once pointed at.
 *
 * `outline outline-transparent` rather than `outline-none`: the ring is present and merely
 * invisible, so it survives forced-colours mode, where `none` would leave a keyboard user with no
 * focus indicator at all.
 */
declare const breadcrumbLinkStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
/**
 * The rule under a link's label, transparent at rest. Figma draws no underline in any state, but
 * a link needs an affordance beyond its ink, and this is the one maker-ds used.
 */
declare const breadcrumbLinkLabelStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
/**
 * The current page, and the one thing here that is genuinely NOT in Figma.
 *
 * The atom inks all three items identically at `gray-400`, so the page you are on is conveyed by
 * nothing at all, and `aria-current` is invisible to a sighted user. That is a **gap** — Figma
 * specifies no current item, rather than specifying one that fails — so rule 2 applies: derive from
 * other designs *in Figma*, never invent.
 *
 * Both cues are derived, and both now come from the same file:
 *
 *   - **The ink** is `color/brand/white`, which is the atom's own second colour. It is what
 *     `.breadcrumb` already paints its separator dots, so nothing is imported to use it here.
 *   - **The weight** is Semibold, and `.tab-item` is the precedent: Figma moves that atom's label
 *     from Book to `Paragraph/small-semibold` for exactly this job, marking the selected one of a
 *     row of peers. Weight is also the cue that keeps this out of WCAG 1.4.1, since ink alone would
 *     convey "you are here" by hue.
 *
 * maker-ds's filled chip is still not used: the atom has no padding and no shape to fill.
 */
declare const breadcrumbCurrentStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
/** The overflow trigger. Same interaction vocabulary as a link. */
declare const breadcrumbOverflowTriggerStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
/**
 * The separator: a 4px round dot in `color/brand/white`, which is Figma's, verified from the atom's
 * exported SVG (`<circle r="2" fill="white"/>`) and not only from the variable table.
 *
 * PREVIOUSLY STEPPED DOWN TO THE MUTED ROLE, on the argument that white at 19.37:1 against items at
 * 5.33:1 is "decoration outranking content". That describes Figma's drawing accurately and is still
 * a **preference**, not a conflict — no WCAG clause requires decoration to be dimmer than the text
 * it separates, and 1.4.11 is satisfied either way. Rule 1 governs a preference: Figma wins, so the
 * dot is white and nothing is logged.
 *
 * Decorative in the accessibility tree regardless — `aria-hidden`, with the `<ol>` carrying the
 * ordering — so its ratio is recorded rather than required.
 */
declare const breadcrumbSeparatorStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
/** Overflow menu rows, for a caller composing a collapsed trail. See the `Collapsed` story. */
declare const breadcrumbOverflowItemStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
export interface BreadcrumbProps extends React.HTMLAttributes<HTMLElement> {
    /**
     * Accessible name for the `<nav>` landmark. A landmark with no name is indistinguishable from
     * the page's other navigations.
     * @default "breadcrumb"
     */
    navLabel?: string;
    children?: React.ReactNode;
}
/**
 * A breadcrumb trail: where the current page sits in the hierarchy, and the ancestors to get back
 * out.
 *
 * **Composed, not configured.** The parts follow shadcn/ui's Base UI flavour exactly —
 * `Breadcrumb` › `BreadcrumbList` › `BreadcrumbItem` › `BreadcrumbLink` | `BreadcrumbPage`, with
 * `BreadcrumbSeparator` between items and `BreadcrumbEllipsis` for a collapsed middle.
 *
 * THIS REPLACES AN `items`-AND-`cloneElement` DESIGN, and the reason is worth keeping. The
 * previous root read `React.Children.toArray(children)`, then re-emitted every child with injected
 * `first`, `last` and `separator` props — so a caller could not render one crumb differently, wrap
 * a crumb in anything, or interleave a node of their own, because the root would either drop it or
 * rewrite it. `first`/`last`/`separator` were documented as "set by `Breadcrumb`. Not part of the
 * public API", which is the tell: props that exist only because the parent rewrites its children.
 *
 * `maxVisibleItems` went with it. It collapsed the middle of a long trail into a portalled menu,
 * and it was **maker-ds's invention rather than the design authority's** — `.breadcrumb` in Figma
 * has no overflow behaviour at all, only `Number` variants that are the same frame with later
 * items switched off (`scripts/figma/bindings/breadcrumb.json`). Automatic collapsing needs child
 * inspection to work, so it cannot survive a composed API; a caller who wants it composes
 * `BreadcrumbEllipsis` with a `Menu`, which is what the `Collapsed` story shows and what shadcn
 * documents.
 *
 * The separators are `aria-hidden` decoration and the ordering is structural, carried by the
 * `<ol>` rather than implied by them.
 *
 * @example
 * <Breadcrumb>
 *   <BreadcrumbList>
 *     <BreadcrumbItem>
 *       <BreadcrumbLink render={<Link href="/" />}>Home</BreadcrumbLink>
 *     </BreadcrumbItem>
 *     <BreadcrumbSeparator />
 *     <BreadcrumbItem>
 *       <BreadcrumbPage>Services</BreadcrumbPage>
 *     </BreadcrumbItem>
 *   </BreadcrumbList>
 * </Breadcrumb>
 */
export declare const Breadcrumb: React.ForwardRefExoticComponent<BreadcrumbProps & React.RefAttributes<HTMLElement>>;
export type BreadcrumbListProps = React.OlHTMLAttributes<HTMLOListElement>;
/** The ordered list. The `<ol>` is what carries the hierarchy; separators are decoration. */
export declare const BreadcrumbList: React.ForwardRefExoticComponent<BreadcrumbListProps & React.RefAttributes<HTMLOListElement>>;
export type BreadcrumbItemProps = React.LiHTMLAttributes<HTMLLIElement>;
/** One step in the trail. Holds a `BreadcrumbLink` or a `BreadcrumbPage`. */
export declare const BreadcrumbItem: React.ForwardRefExoticComponent<BreadcrumbItemProps & React.RefAttributes<HTMLLIElement>>;
/** What the `render` function form is told about the link. */
export interface BreadcrumbLinkRenderState {
    inactive: boolean;
}
export interface BreadcrumbLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
    /**
     * Render as a different element — a routing library's link, typically. Base UI's convention and
     * shadcn's documented escape hatch: `render={<Link href="/" />}`.
     */
    render?: RenderProp<BreadcrumbLinkRenderState>;
    /**
     * Present in the trail but not navigable — an ancestor the user cannot reach. `aria-disabled`
     * rather than removal, so the hierarchy stays legible.
     */
    inactive?: boolean;
    children: React.ReactNode;
}
/**
 * A navigable ancestor.
 *
 * `inactive` is kept from the previous API because it is **state, not composition**: it describes
 * this link, and no arrangement of parts expresses "in the trail but unreachable".
 */
export declare const BreadcrumbLink: React.ForwardRefExoticComponent<BreadcrumbLinkProps & React.RefAttributes<HTMLAnchorElement>>;
export type BreadcrumbPageProps = React.HTMLAttributes<HTMLSpanElement>;
/**
 * The current page. Never a link — linking a page to itself is a dead control, and `aria-current`
 * is what tells a screen reader where it is.
 *
 * Semibold, and that is the non-chromatic half of "you are here". Figma inks every item the same,
 * which would leave the current page conveyed by nothing; taking only the stronger ink would leave
 * it conveyed by hue alone, which WCAG 1.4.1 prohibits.
 */
export declare const BreadcrumbPage: React.ForwardRefExoticComponent<BreadcrumbPageProps & React.RefAttributes<HTMLSpanElement>>;
export interface BreadcrumbSeparatorProps extends React.LiHTMLAttributes<HTMLLIElement> {
    /** A character or node instead of Figma's 4px dot. */
    children?: React.ReactNode;
}
/**
 * Decoration between steps, hidden from assistive technology: announcing "slash" between every
 * crumb is noise, and the `<ol>` already carries the ordering.
 *
 * An `<li>` rather than a `<span>`, because it is a child of the list and a non-`li` child of an
 * `<ol>` is invalid.
 */
export declare const BreadcrumbSeparator: React.ForwardRefExoticComponent<BreadcrumbSeparatorProps & React.RefAttributes<HTMLLIElement>>;
export interface BreadcrumbEllipsisProps extends React.HTMLAttributes<HTMLSpanElement> {
    /**
     * Accessible name, since the glyph itself is hidden.
     * @default "More breadcrumb items"
     */
    label?: string;
}
/**
 * A collapsed middle.
 *
 * Renders the glyph `aria-hidden` with a visually hidden label beside it, so the control has an
 * accessible name that contains no punctuation to announce. Composing it with a `Menu` is what
 * makes it interactive — see the `Collapsed` story — because which items collapse, and whether
 * they open a menu at all, is the caller's decision rather than this component's.
 */
export declare const BreadcrumbEllipsis: React.ForwardRefExoticComponent<BreadcrumbEllipsisProps & React.RefAttributes<HTMLSpanElement>>;
export { breadcrumbLinkStyles, breadcrumbLinkLabelStyles, breadcrumbCurrentStyles, breadcrumbOverflowTriggerStyles, breadcrumbSeparatorStyles, breadcrumbOverflowItemStyles, };
//# sourceMappingURL=breadcrumb.d.ts.map