/**
 * @file NavIcon.tsx
 * @input Uses React, HTMLAttributes, ReactNode
 * @output Exports NavIcon component and NavIconProps
 * @position Shared circular icon container for navigation headers (TopNav, PageNav)
 *
 * SYNC: When modified, update these files to stay in sync:
 * - /packages/core/src/NavIcon/NavIcon.doc.mjs
 * - /packages/core/src/NavIcon/NavIcon.test.tsx
 * - /packages/core/src/NavIcon/index.ts
 * - /apps/storybook/stories/TopNav.stories.tsx
 * - /packages/cli/assets/templates/blocks/components/NavIcon/NavIconShowcase.tsx
 */
import type { ReactNode } from 'react';
import type { BaseProps } from '../BaseProps';
export interface NavIconProps extends BaseProps<HTMLSpanElement> {
    /** Ref forwarded to the root element */
    ref?: React.Ref<HTMLSpanElement>;
    /**
     * The icon element to render inside the circular background.
     * Should be an Icon or similar icon component.
     */
    icon: ReactNode;
}
/**
 * Circular icon container for navigation headers.
 *
 * Wraps an icon with a circular accent-colored background, suitable for
 * use as a logo in top navigation or side navigation title areas.
 *
 * @example
 * ```
 * import {HomeIcon} from '@heroicons/react/24/solid';
 * <TopNavHeading
 *   heading="Dashboard"
 *   logo={<NavIcon icon={<HomeIcon style={{width: 16, height: 16}} />} />}
 * />
 * <PageNavHeader
 *   icon={<NavIcon icon={<HomeIcon style={{width: 16, height: 16}} />} />}
 *   heading="My App"
 * />
 * ```
 */
export declare function NavIcon({ icon, xstyle, className, style, ref, ...props }: NavIconProps): import("react").JSX.Element;
export declare namespace NavIcon {
    var displayName: string;
}
//# sourceMappingURL=NavIcon.d.ts.map