import React from 'react';
import { type StyleProp, View, type ViewStyle } from 'react-native';
import type { TourOptions } from '@coinbase/cds-common/tour/useTour';
import type { SharedAccessibilityProps } from '@coinbase/cds-common/types/SharedAccessibilityProps';
import type { SharedProps } from '@coinbase/cds-common/types/SharedProps';
import {
  type AutoPlacementOptions,
  type Coords,
  type OffsetOptions,
  type Placement,
  type ShiftOptions,
} from '@floating-ui/core';
export type TourStepArrowComponentProps = {
  arrow?: Partial<Coords> & {
    centerOffset: number;
    alignmentOffset?: number;
  };
  placement: Placement;
  style?: StyleProp<ViewStyle>;
};
export type TourStepArrowComponent = (
  props: TourStepArrowComponentProps & {
    ref?: React.Ref<any>;
  },
) => React.ReactNode;
export type TourMaskComponentProps = {
  /**
   * The active TourStep's target element.
   */
  activeTourStepTarget: View;
  /**
   * 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 = (props: TourMaskComponentProps) => React.ReactNode;
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;
    /** Custom styles for individual elements of the Tour component */
    styles?: {
      /** Root element */
      root?: StyleProp<ViewStyle>;
      /** The opaque overlay/mask that emphasizes current step */
      mask?: StyleProp<ViewStyle>;
      /** A step's arrow element */
      stepArrow?: StyleProp<ViewStyle>;
      /** A step element's positioned container */
      stepContainer?: StyleProp<ViewStyle>;
    };
  };
export type TourProps<TourStepId extends string = string> = TourBaseProps<TourStepId>;
type TourFC = <TourStepId extends string = string>(props: TourProps<TourStepId>) => React.ReactNode;
export declare const Tour: TourFC;
export {};
//# sourceMappingURL=Tour.d.ts.map