import React from 'react';
import type { StyleProp, View, ViewStyle } from 'react-native';
import type { ThemeVars } from '@coinbase/cds-common/core/theme';
import type { SharedProps } from '@coinbase/cds-common/types/SharedProps';
import { type BoxProps } from '../layout/Box';
import type { PositionStyles } from '../styles/styleProps';
export type PageHeaderBaseProps = SharedProps &
  PositionStyles & {
    /**
     * Optional. Accepts a ReactNode. Used for placing primary content on the left side of the page header, such as a header title, logo, or icon button.
     */
    start?: React.ReactNode;
    /**
     * Optional. Accepts a ReactNode. Intended for content on the right side of the header, such as action buttons or icons.
     * In modal usage, elements like a close button should be included to facilitate modal dismissal.
     */
    end?: React.ReactNode;
    /**
     * Optional. Accepts a ReactNode. Intended for main title within the Page Header or for secondary content in the center of the header, like a navigation stepper or search bar.
     */
    title?: React.ReactNode;
    /**
     * Set the background color of the box.
     */
    background?: ThemeVars.Color;
  };
export type PageHeaderProps = PageHeaderBaseProps &
  BoxProps & {
    /** Custom styles for individual elements of the PageHeader component */
    styles?: {
      /** Root element */
      root?: StyleProp<ViewStyle>;
      /** Start element */
      start?: StyleProp<ViewStyle>;
      /** End element */
      end?: StyleProp<ViewStyle>;
      /** Title element */
      title?: StyleProp<ViewStyle>;
    };
  };
export declare const PageHeader: React.MemoExoticComponent<
  ({
    ref,
    ..._props
  }: PageHeaderProps & {
    ref?: React.Ref<View>;
  }) => import('react/jsx-runtime').JSX.Element
>;
//# sourceMappingURL=PageHeader.d.ts.map