import React from 'react';
import type {
  TourOptions,
  TourScrollOptions,
  TourStepArrowComponent,
} from '@coinbase/cds-common/tour/useTour';
import type { Rect, SharedProps } from '@coinbase/cds-common/types';
import type { SharedAccessibilityProps } from '@coinbase/cds-common/types/SharedAccessibilityProps';
import {
  type AutoPlacementOptions,
  type OffsetOptions,
  type ShiftOptions,
} from '@floating-ui/react-dom';
export type TourMaskComponentProps = {
  /**
   * Rect of the active TourStep's target element.
   */
  activeTourStepTargetRect: Rect;
  /**
   * Padding to add around the edges of the TourOverlay's content mask.
   */
  padding?: string | number;
  /**
   * Corner radius for the TourOverlay's content mask. Uses SVG rect element's `rx` and `ry`
   * attributes https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/rx.
   */
  borderRadius?: string | number;
};
export type TourMaskComponent = React.FC<TourMaskComponentProps>;
export type TourBaseProps<TourStepId extends string = string> = SharedProps &
  TourOptions<TourStepId> &
  Pick<SharedAccessibilityProps, 'accessibilityLabel' | 'accessibilityLabelledBy' | 'id'> & {
    children?: React.ReactNode;
    /**
     * The Component to render as a tour overlay and mask.
     * @default DefaultTourMask
     */
    TourMaskComponent?: TourMaskComponent;
    /**
     * The default Component to render for each TourStep arrow element.
     * @default DefaultTourStepArrow
     */
    TourStepArrowComponent?: TourStepArrowComponent;
    /**
     * Hide overlay when tour is active
     */
    hideOverlay?: boolean;
    /**
     * Configures `@floating-ui` offset options for Tour Step component. See https://floating-ui.com/docs/offset.
     */
    tourStepOffset?: OffsetOptions;
    /**
     * Configures `@floating-ui` autoPlacement options for Tour Step component. See https://floating-ui.com/docs/autoplacement.
     * @default 24
     */
    tourStepAutoPlacement?: AutoPlacementOptions;
    /**
     * Configures `@floating-ui` shift options for Tour Step component. See https://floating-ui.com/docs/shift.
     */
    tourStepShift?: ShiftOptions;
    /**
     * Padding to add around the edges of the TourMask's content mask.
     */
    tourMaskPadding?: string | number;
    /**
     * Corner radius for the TourMask's content mask. Uses SVG rect element's `rx` and `ry`
     * attributes https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/rx.
     */
    tourMaskBorderRadius?: string | number;
    /**
     * Controls the scrolling behavior and margins when calling element.scrollTo() to scroll to an active TourStep target.
     */
    scrollOptions?: TourScrollOptions;
    /**
     * @danger This disables React portal integration. Use this with caution.
     */
    disablePortal?: boolean;
    /**
     * Disable automatically scrolling to active elements.
     */
    disableAutoScroll?: boolean;
  };
export type TourProps<TourStepId extends string = string> = TourBaseProps<TourStepId> & {};
export type TourFC = <TourStepId extends string = string>(
  props: TourProps<TourStepId>,
) => React.ReactNode;
export declare const Tour: TourFC;
//# sourceMappingURL=Tour.d.ts.map