import * as react from 'react';
import { ReactNode, HTMLAttributes } from 'react';

interface TopNavItem {
    label: ReactNode;
    /** Omit when `items` is set — a group trigger isn't itself a direct link. */
    href?: string;
    /** Renders the row as a `<button>` instead of a link — e.g. sign out. Ignored if `href` is set. */
    onClick?: () => void;
    active?: boolean;
    external?: boolean;
    /** Shown in flyout/dropdown and mobile rows. Not rendered in the top bar itself. */
    icon?: ReactNode;
    /** Child links shown in a flyout (desktop) / accordion (mobile). One level of nesting. */
    items?: TopNavItem[];
}
/** A labeled group of rows appended to the mobile menu, below nav items/actions —
 *  e.g. "recent stores" or an account section. Renders with the same row styling
 *  as nav item dropdowns, so ad-hoc consumer markup doesn't drift from the system. */
interface TopNavSection {
    label?: ReactNode;
    items: TopNavItem[];
    /** Collapse behind the label as a tap-to-expand accordion, same as flyout groups — keeps a mobile
     *  sheet with several sections from turning into a wall of rows. Default `true`. Has no effect
     *  without `label` (there'd be nothing to tap). */
    collapsible?: boolean;
    /** Start expanded when `collapsible`. Default `false` — collapsed, matching flyout groups. */
    defaultOpen?: boolean;
}
/** A single account/user menu, rendered from one data structure on both surfaces:
 *  a `DropdownMenu` next to the desktop actions, and appended to the mobile sheet's
 *  sections (same row styling, right alongside any `mobileMenuSections`). Keeps a
 *  desktop dropdown and its mobile equivalent from drifting out of sync — the two
 *  were previously always hand-duplicated by consumers. */
interface TopNavUserMenu {
    /** Desktop dropdown trigger content — e.g. an avatar + name. Wrapped in a focusable button. */
    trigger: ReactNode;
    /** Accessible label for the trigger button. Defaults to `'User menu'`. */
    triggerLabel?: string;
    /** Same shape as `mobileMenuSections` — rendered as `DropdownMenuLabel`/`DropdownMenuItem` groups on desktop. */
    sections: TopNavSection[];
    /** Position within the desktop actions cluster, relative to `actions`. Default `'end'` (after). */
    placement?: 'start' | 'end';
}
type TopNavMaxWidth = 'default' | 'wide' | 'full' | false;
type TopNavActionMobile = 'inline' | 'menu' | 'hidden';
interface TopNavActionProps {
    children: ReactNode;
    /** Mobile placement; desktop always shows in the actions cluster. Default `menu`. */
    mobile?: TopNavActionMobile;
}
declare function TopNavAction({ children }: TopNavActionProps): react.JSX.Element;
declare namespace TopNavAction {
    var displayName: string;
}
interface TopNavProps extends Omit<HTMLAttributes<HTMLElement>, 'defaultValue' | 'dir'> {
    projectName: ReactNode;
    homeHref?: string;
    navItems?: TopNavItem[];
    actions?: ReactNode;
    sticky?: boolean;
    /** Constrain inner content width; `false` keeps full-bleed (default). */
    maxWidth?: TopNavMaxWidth;
    /** Screen reader title for the mobile menu dialog. */
    mobileMenuTitle?: string;
    /** Labeled row groups appended below nav items/actions (e.g. recent items, account links) — styled consistently with the rest of the menu. Rendered before `userMenu`'s sections, then `mobileMenuExtra`. */
    mobileMenuSections?: TopNavSection[];
    /** Freeform slot rendered at the bottom of the mobile nav sheet, below nav items, actions, `mobileMenuSections`, and `userMenu`'s sections, separated by a divider. Consumer controls all markup. */
    mobileMenuExtra?: ReactNode;
    /** A single account/user menu rendered from one data structure — a `DropdownMenu` next to the desktop actions, and appended to the mobile sheet's sections. See `TopNavUserMenu`. */
    userMenu?: TopNavUserMenu;
}
declare const TopNav: react.ForwardRefExoticComponent<TopNavProps & react.RefAttributes<HTMLElement>>;

export { TopNav, TopNavAction, type TopNavActionMobile, type TopNavActionProps, type TopNavItem, type TopNavMaxWidth, type TopNavProps, type TopNavSection, type TopNavUserMenu };