import * as React from "react";
export type { TopbarItemProp, TopbarItemProp as TopbarItemProps, } from "../../props/components/layout.prop.js";
/**
 * TopbarItem — one interactive cell of a {@link Topbar} slot, shaped like part of the bar.
 *
 * Full bar height, the bar's own hover surface, and the focus mark hosted INSIDE the cell (a
 * full-bleed cell has nothing outside itself to ring, and the bar clips its own overflow). All of
 * that lives in `.ui-topbar-item`; this component only picks the element and the classes.
 *
 * `ui-focus-ring` is the ONE focus source (styles/focus-ring.css) — the cell hosts whatever that
 * file resolves, including nothing at all while the `--focus-outline` switch ships off.
 */
export declare const TopbarItem: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> & {
    hideBelow?: import("../../props/index.js").BreakpointProp;
    icon?: React.ReactNode;
    iconHideFrom?: import("../../props/index.js").BreakpointProp;
    labelHideBelow?: import("../../props/index.js").BreakpointProp;
    badge?: React.ReactNode;
    badgeTone?: import("../../props/components/layout.prop.js").SidebarBadgeToneProp;
    asChild?: boolean;
    children?: React.ReactNode;
    className?: import("../../props/index.js").ClassNameProp;
} & React.RefAttributes<HTMLButtonElement>>;