import React from 'react';
import type { PinningDirection, SharedAccessibilityProps } from '@coinbase/cds-common';
import type { StylesAndClassNames } from '../../types';
import { type FocusTrapProps } from '../FocusTrap';
/**
 * Static class names for Tray component parts.
 * Use these selectors to target specific elements with CSS.
 */
export declare const trayClassNames: {
  /** Root container element */
  readonly root: 'cds-Tray';
  /** Overlay backdrop element */
  readonly overlay: 'cds-Tray-overlay';
  /** Animated sliding container element */
  readonly container: 'cds-Tray-container';
  /** Header section element */
  readonly header: 'cds-Tray-header';
  /** Title text element */
  readonly title: 'cds-Tray-title';
  /** Content area element */
  readonly content: 'cds-Tray-content';
  /** Handle bar container element, only rendered when showHandleBar is true and pin is "bottom" */
  readonly handleBar: 'cds-Tray-handleBar';
  /** Handle bar indicator element, only rendered when showHandleBar is true and pin is "bottom" */
  readonly handleBarHandle: 'cds-Tray-handleBarHandle';
  /** Close button element */
  readonly closeButton: 'cds-Tray-closeButton';
};
export type TrayRenderChildren = React.FC<{
  handleClose: () => void;
}>;
export type TrayBaseProps = Pick<
  FocusTrapProps,
  'focusTabIndexElements' | 'disableArrowKeyNavigation'
> & {
  children?: React.ReactNode | TrayRenderChildren;
  /** ReactNode to render as the Drawer header. Can be a ReactNode or a function that receives { handleClose }. */
  header?: React.ReactNode | TrayRenderChildren;
  /** ReactNode to render as the Drawer footer. Can be a ReactNode or a function that receives { handleClose }. */
  footer?: React.ReactNode | TrayRenderChildren;
  /** HTML ID for the tray */
  id?: string;
  /**
   * Pin the tray to one side of the screen
   * @default 'bottom'
   */
  pin?: PinningDirection;
  /** Callback fired when the overlay is pressed, or swipe to close */
  onBlur?: () => void;
  /** Action that will happen when tray is dismissed */
  onClose?: () => void;
  /** Action that will happen when tray is dismissed */
  onCloseComplete: () => void;
  /** Callback fired when the open animation completes. */
  onOpenComplete?: () => void;
  /**
   * 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;
  /**
   * Prevents a user from dismissing the tray by pressing the overlay or swiping
   * @note hides closeButton when `true`
   */
  preventDismiss?: boolean;
  /**
   * Hide the close icon on the top right.
   * @default `true` when handlebar is shown, false otherwise.
   */
  hideCloseButton?: boolean;
  /**
   * WAI-ARIA Roles
   * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles
   */
  role?: Extract<React.AriaRole, 'dialog' | 'alertdialog'>;
  /** Text or ReactNode for optional Tray title */
  title?: React.ReactNode;
  /**
   * Allow user of component to define maximum percentage of screen that can be taken up by the Drawer when pinned to the bottom or top.
   * @note not used when `pin` is `"left"` or `"right"`.
   * @example if you want a Drawer to take up 50% of the screen, you would pass a value of `"50%"`
   * @default "85%"
   */
  verticalDrawerPercentageOfView?: string;
  /** z-index for the tray overlay */
  zIndex?: number;
  /**
   * When true, the tray will use opacity animation instead of transform animation.
   * This is useful for supporting reduced motion for accessibility.
   */
  reduceMotion?: boolean;
  /**
   * If `true`, the focus trap will restore focus to the previously focused element when it unmounts.
   * @default true
   */
  restoreFocusOnUnmount?: boolean;
  /**
   * Sets an accessible label for the close button.
   * On web, maps to `aria-label` and defines a string value that labels an interactive element.
   * On mobile, VoiceOver will read this string when a user selects the associated element.
   * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label
   * @link https://reactnative.dev/docs/accessibility#accessibilitylabel
   */
  closeAccessibilityLabel?: SharedAccessibilityProps['accessibilityLabel'];
  /**
   * Sets an accessible hint or description for the close button.
   * On web, maps to `aria-describedby` and lists the id(s) of the element(s) that describe the element on which the attribute is set.
   * On mobile, a string that helps users understand what will happen when they perform an action on the accessibility element
   * when that result is not clear from the accessibility label.
   * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby
   * @link https://reactnative.dev/docs/accessibility#accessibilityhint
   */
  closeAccessibilityHint?: SharedAccessibilityProps['accessibilityHint'];
  /**
   * Show a handle bar indicator at the top of the tray.
   * The handle bar is positioned inside the tray content area.
   * @note only appears when `pin="bottom"`.
   *
   * When enabled, the handle bar provides swipe-to-dismiss functionality (drag down to close)
   * and is keyboard accessible (Tab to focus, Enter/Space to close).
   * The close button is hidden by default when the handle bar is shown.
   */
  showHandleBar?: boolean;
} & Pick<SharedAccessibilityProps, 'accessibilityLabel' | 'accessibilityLabelledBy'>;
export type TrayProps = TrayBaseProps & StylesAndClassNames<typeof trayClassNames>;
export type TrayRefProps = {
  close: () => void;
};
export declare const Tray: React.MemoExoticComponent<
  React.ForwardRefExoticComponent<
    Pick<FocusTrapProps, 'disableArrowKeyNavigation' | 'focusTabIndexElements'> & {
      children?: React.ReactNode | TrayRenderChildren;
      /** ReactNode to render as the Drawer header. Can be a ReactNode or a function that receives { handleClose }. */
      header?: React.ReactNode | TrayRenderChildren;
      /** ReactNode to render as the Drawer footer. Can be a ReactNode or a function that receives { handleClose }. */
      footer?: React.ReactNode | TrayRenderChildren;
      /** HTML ID for the tray */
      id?: string;
      /**
       * Pin the tray to one side of the screen
       * @default 'bottom'
       */
      pin?: PinningDirection;
      /** Callback fired when the overlay is pressed, or swipe to close */
      onBlur?: () => void;
      /** Action that will happen when tray is dismissed */
      onClose?: () => void;
      /** Action that will happen when tray is dismissed */
      onCloseComplete: () => void;
      /** Callback fired when the open animation completes. */
      onOpenComplete?: () => void;
      /**
       * 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;
      /**
       * Prevents a user from dismissing the tray by pressing the overlay or swiping
       * @note hides closeButton when `true`
       */
      preventDismiss?: boolean;
      /**
       * Hide the close icon on the top right.
       * @default `true` when handlebar is shown, false otherwise.
       */
      hideCloseButton?: boolean;
      /**
       * WAI-ARIA Roles
       * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles
       */
      role?: Extract<React.AriaRole, 'dialog' | 'alertdialog'>;
      /** Text or ReactNode for optional Tray title */
      title?: React.ReactNode;
      /**
       * Allow user of component to define maximum percentage of screen that can be taken up by the Drawer when pinned to the bottom or top.
       * @note not used when `pin` is `"left"` or `"right"`.
       * @example if you want a Drawer to take up 50% of the screen, you would pass a value of `"50%"`
       * @default "85%"
       */
      verticalDrawerPercentageOfView?: string;
      /** z-index for the tray overlay */
      zIndex?: number;
      /**
       * When true, the tray will use opacity animation instead of transform animation.
       * This is useful for supporting reduced motion for accessibility.
       */
      reduceMotion?: boolean;
      /**
       * If `true`, the focus trap will restore focus to the previously focused element when it unmounts.
       * @default true
       */
      restoreFocusOnUnmount?: boolean;
      /**
       * Sets an accessible label for the close button.
       * On web, maps to `aria-label` and defines a string value that labels an interactive element.
       * On mobile, VoiceOver will read this string when a user selects the associated element.
       * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label
       * @link https://reactnative.dev/docs/accessibility#accessibilitylabel
       */
      closeAccessibilityLabel?: SharedAccessibilityProps['accessibilityLabel'];
      /**
       * Sets an accessible hint or description for the close button.
       * On web, maps to `aria-describedby` and lists the id(s) of the element(s) that describe the element on which the attribute is set.
       * On mobile, a string that helps users understand what will happen when they perform an action on the accessibility element
       * when that result is not clear from the accessibility label.
       * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby
       * @link https://reactnative.dev/docs/accessibility#accessibilityhint
       */
      closeAccessibilityHint?: SharedAccessibilityProps['accessibilityHint'];
      /**
       * Show a handle bar indicator at the top of the tray.
       * The handle bar is positioned inside the tray content area.
       * @note only appears when `pin="bottom"`.
       *
       * When enabled, the handle bar provides swipe-to-dismiss functionality (drag down to close)
       * and is keyboard accessible (Tab to focus, Enter/Space to close).
       * The close button is hidden by default when the handle bar is shown.
       */
      showHandleBar?: boolean;
    } & Pick<SharedAccessibilityProps, 'accessibilityLabel' | 'accessibilityLabelledBy'> &
      StylesAndClassNames<{
        /** Root container element */
        readonly root: 'cds-Tray';
        /** Overlay backdrop element */
        readonly overlay: 'cds-Tray-overlay';
        /** Animated sliding container element */
        readonly container: 'cds-Tray-container';
        /** Header section element */
        readonly header: 'cds-Tray-header';
        /** Title text element */
        readonly title: 'cds-Tray-title';
        /** Content area element */
        readonly content: 'cds-Tray-content';
        /** Handle bar container element, only rendered when showHandleBar is true and pin is "bottom" */
        readonly handleBar: 'cds-Tray-handleBar';
        /** Handle bar indicator element, only rendered when showHandleBar is true and pin is "bottom" */
        readonly handleBarHandle: 'cds-Tray-handleBarHandle';
        /** Close button element */
        readonly closeButton: 'cds-Tray-closeButton';
      }> &
      React.RefAttributes<TrayRefProps>
  >
>;
//# sourceMappingURL=Tray.d.ts.map