import React from 'react';
import type { ThemeVars } from '@coinbase/cds-common/core/theme';
import { type HStackProps } from '../layout/HStack';
export declare const TopNavBarContext: React.Context<{
  isWithinTopNavBar: boolean;
}>;
export type NavBarStartProps = Omit<HStackProps, 'children'> & {
  children?: React.ReactNode;
  /**
   * The space after the children node
   * When the component collapses, the gap between nav start and nav children also collapses,
   * and the nav bar middle content can expand to the start of the nav bar
   * @default 1
   */
  paddingEnd?: ThemeVars.Space;
};
export type NavBarEndProps = Omit<HStackProps, 'children'> & {
  children?: React.ReactNode;
  /**
   * The space before the children node
   * When the component collapses, the gap between nav end and nav children also collapses,
   * and the nav bar middle content can expand to the end of the nav bar
   * @default 1
   */
  paddingStart?: ThemeVars.Space;
};
export type NavigationBarBaseProps = {
  start?: React.ReactNode;
  end?: React.ReactNode;
  /**
   * The bottom content. Use to render tabs
   */
  bottom?: React.ReactNode;
  /**
   * The middle content. Use the children to render the page title
   */
  children?: React.ReactNode;
  /**
   * Accessibility label for the nav bar
   */
  accessibilityLabel?: string;
  /**
   * @default 2
   */
  paddingX?: ThemeVars.Space;
  /**
   * @default 2
   */
  paddingTop?: ThemeVars.Space;
  paddingBottom?: ThemeVars.Space;
  /**
   * The gap between the bottom content and the top nav bar
   * @default 2
   */
  columnGap?: ThemeVars.Space;
  /**
   * The gap between the start, middle (children), and end elements
   * @default 0
   */
  rowGap?: ThemeVars.Space;
};
export type NavigationBarProps = NavigationBarBaseProps;
export declare const NavBarStart: React.MemoExoticComponent<
  ({
    children,
    flexBasis,
    flexGrow,
    flexShrink,
    justifyContent,
    paddingEnd,
    ...props
  }: NavBarStartProps) => import('react/jsx-runtime').JSX.Element
>;
export declare const NavBarEnd: React.MemoExoticComponent<
  ({
    children,
    flexBasis,
    flexGrow,
    flexShrink,
    justifyContent,
    paddingStart,
    ...props
  }: NavBarEndProps) => import('react/jsx-runtime').JSX.Element
>;
export declare const TopNavBar: React.MemoExoticComponent<
  (_props: NavigationBarProps) => import('react/jsx-runtime').JSX.Element
>;
//# sourceMappingURL=TopNavBar.d.ts.map