import React from 'react';
import type { ReactNode } from 'react';
import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
import type { ElevationLevels } from '@coinbase/cds-common/types/ElevationLevels';
import { type DrawerBaseProps, type DrawerProps, type DrawerRefBaseProps } from '../drawer/Drawer';
export type TrayRenderChildren = (args: { handleClose: () => void }) => React.ReactNode;
export type TrayBaseProps = Omit<DrawerBaseProps, 'pin' | 'children'> & {
  /** Component to render as the Tray content */
  children?: React.ReactNode | TrayRenderChildren;
  /** Component to render as the Tray header */
  header?: React.ReactNode | TrayRenderChildren;
  /**
   * Elevation level for the header area (includes title and header content).
   * Use this to add a drop shadow below the header when content is scrolled.
   */
  headerElevation?: ElevationLevels;
  /** Component to render as the Tray footer */
  footer?: React.ReactNode | TrayRenderChildren;
  /**
   * Optional callback that, if provided, will be triggered when the Tray is toggled open/ closed
   * If used for analytics, context ('visible' | 'hidden') can be bundled with the event info to track whether the
   * multiselect was toggled into or out of view
   */
  onVisibilityChange?: (context: 'visible' | 'hidden') => void;
  /** Text or ReactNode for optional Tray title */
  title?: React.ReactNode;
};
export type TrayProps = TrayBaseProps &
  Omit<DrawerProps, 'pin' | 'children'> & {
    pin?: DrawerProps['pin'];
    styles?: DrawerProps['styles'] & {
      /** Content area element */
      content?: StyleProp<ViewStyle>;
      /** Header section element */
      header?: StyleProp<ViewStyle>;
      /** Title text element */
      title?: StyleProp<TextStyle>;
    };
  };
export declare const TrayContext: React.Context<{
  verticalDrawerPercentageOfView: number;
  titleHeight: number;
}>;
export declare const Tray: React.NamedExoticComponent<
  Omit<DrawerBaseProps, 'children' | 'pin'> & {
    /** Component to render as the Tray content */
    children?: React.ReactNode | TrayRenderChildren;
    /** Component to render as the Tray header */
    header?: React.ReactNode | TrayRenderChildren;
    /**
     * Elevation level for the header area (includes title and header content).
     * Use this to add a drop shadow below the header when content is scrolled.
     */
    headerElevation?: ElevationLevels;
    /** Component to render as the Tray footer */
    footer?: React.ReactNode | TrayRenderChildren;
    /**
     * Optional callback that, if provided, will be triggered when the Tray is toggled open/ closed
     * If used for analytics, context ('visible' | 'hidden') can be bundled with the event info to track whether the
     * multiselect was toggled into or out of view
     */
    onVisibilityChange?: (context: 'visible' | 'hidden') => void;
    /** Text or ReactNode for optional Tray title */
    title?: React.ReactNode;
  } & Omit<DrawerProps, 'children' | 'pin'> & {
      pin?: DrawerProps['pin'];
      styles?: DrawerProps['styles'] & {
        /** Content area element */
        content?: StyleProp<ViewStyle>;
        /** Header section element */
        header?: StyleProp<ViewStyle>;
        /** Title text element */
        title?: StyleProp<TextStyle>;
      };
    } & {
      ref?: React.Ref<DrawerRefBaseProps>;
    }
>;
/**
 * @deprecated Redundant component. This will be removed in a future major release.
 * @deprecationExpectedRemoval v9
 */
export declare const TrayStickyFooter: ({
  children,
}: {
  children: ReactNode;
}) => import('react/jsx-runtime').JSX.Element;
//# sourceMappingURL=Tray.d.ts.map