import { PopoverDOM as DriverPopoverDOM, State as DriverState, AllowedButtons, DriveStep, DriverHook } from 'driver.js';
export type PopoverDOM = DriverPopoverDOM;
export type OnboardingState = DriverState;
type DriverCallbackOptions = Parameters<DriverHook>[2];
type OnboardingPopoverContent = {
    /**
     * Title text to be shown.
     *
     * You can use HTML here, but maybe you shouldn't.
     */
    title?: string;
    /**
     * Description text to be shown.
     *
     * You can use HTML here, but maybe you shouldn't.
     */
    description?: string;
    /**
     * The position of the popover relative to the target element.
     *
     * @default 'left'
     */
    side?: 'top' | 'right' | 'bottom' | 'left' | 'over';
    /**
     * Where the popover is anchored to the target element.
     *
     * @default 'start'
     */
    align?: 'start' | 'center' | 'end';
    /**
     * The buttons that should be shown in the popover - for this step only.
     *
     * When highlighting a single element (there is just a single step), there are no buttons by default. When
     * showing a step of a multi-step tour, all buttons are shown by default.
     *
     * The "close" button is a simple "X" in the popover.
     * The "previous" and "next" buttons are actual text buttons. can define the text contents of those buttons via
     * the {@link prevBtnText}, {@link nextBtnText} and {@link doneBtnText} properties.
     *
     * This overrides the showButtons array on the {@link OnboardingOptions}.
     */
    showButtons?: AllowedButtons[];
    /**
     * The buttons that should be disabled in the popover - for this step only.
     *
     * This is useful when you want to show some of the buttons, but disable them anyway.
     *
     * This overrides the disableButtons array on the {@link OnboardingOptions}.
     */
    disableButtons?: AllowedButtons[];
    /**
     * Whether to disable interaction with the highlighted element.
     *
     * @default false
     */
    disableActiveInteraction?: boolean;
    /**
     * Custom class to add to the popover element.
     *
     * This can be used to style the popover.
     */
    popoverClass?: string;
    /**
     * Text to use for the "previous" button - specific for this step only.
     *
     * This overrides the prevBtnText on the {@link OnboardingOptions}.
     */
    prevBtnText?: string;
    /**
     * Text to use for the "next" button - specific for this step only.
     *
     * This overrides the nextBtnText on the {@link OnboardingOptions}.
     */
    nextBtnText?: string;
    /**
     * Text to use for the "done" (a.k.a. the final "next") button - specific for this step only.
     *
     * This overrides the doneBtnText on the {@link OnboardingOptions}.
     */
    doneBtnText?: string;
};
/**
 * Describes a single step in an Onboarding Tour.
 *
 * Is based on the underlying {@link DriveStep driver.js step configuration object}.
 *
 * @see https://driverjs.com/docs/configuration
 */
export type OnboardingStep = DriveStep & {
    /**
     * The target element to highlight.
     *
     * This can be a DOM element (ref), a function that returns a DOM element, or a CSS selector (most likely, you want
     * to go with a selector as it's the easiest one to implement).
     *
     * If this is a selector, the first matching element will be highlighted.
     *
     * If no element is given, the popover will simply be centered on the screen.
     *
     * @example '[data-onboarding-walkthrough-step="2"]'
     */
    element?: string | Element;
    /**
     * Defines the content and appearance of the popover.
     */
    popover: OnboardingPopoverContent;
    /**
     * Callback triggered when the highlighting is about to become visible.
     *
     * @param element The target DOM element of the step.
     * @param step The {@link DriveStep driver.js step object} configured for the step.
     * @param opts The configuration options and current state of the driver object as well as the driver object itself.
     */
    onHighlightStarted?: (element: Element | undefined, step: OnboardingStep, opts: DriverCallbackOptions) => void;
    /**
     * Callback triggered when the highlight is visible.
     *
     * @param element The target DOM element of the step.
     * @param step The {@link DriveStep driver.js step object} configured for the step.
     * @param opts The configuration options and current state of the driver object as well as the driver object itself.
     */
    onHighlighted?: (element: Element | undefined, step: OnboardingStep, opts: DriverCallbackOptions) => void;
    /**
     * Callback triggered when the highlight is about to become invisible.
     *
     * @param element The target DOM element of the step.
     * @param step The {@link DriveStep driver.js step object} configured for the step.
     * @param opts The configuration options and current state of the driver object as well as the driver object itself.
     */
    onDeselected?: (element: Element | undefined, step: OnboardingStep, opts: DriverCallbackOptions) => void;
};
type OnboardingOptions = {
    /**
     * Array of steps to highlight.
     *
     * You should pass this when you want to set up a tour.
     */
    steps?: OnboardingStep[];
    /**
     * Array of buttons to show in the popover.
     *
     * When highlighting a single element (there is just a single step), there are no buttons by default. When showing
     * a step of a multi-step tour, all buttons are shown by default.
     *
     * The `close` button is a simple "X" in the popover.
     *
     * The `previous` and `next` buttons are actual text buttons. You can define the text contents of those buttons via
     * the {@link prevBtnText}, {@link nextBtnText} and {@link doneBtnText} properties.
     *
     * Defaults to ["next", "previous", "close"] for product tours and [] for single element highlighting.
     *
     * @default '["next", "previous", "close"]'
     */
    showButtons?: AllowedButtons[];
    /**
     * The buttons that should be disabled in popovers.
     *
     * This is useful when you want to show some of the buttons, but disable them anyway.
     */
    disableButtons?: AllowedButtons[];
    /**
     * Text to use for the "previous" button.
     *
     * @default 'Previous'
     */
    prevBtnText?: string;
    /**
     * Text to use for the "next" button.
     *
     * @default 'Next'
     */
    nextBtnText?: string;
    /**
     * Text to use for the "done" (a.k.a. the final "next") button.
     *
     * When given, this overrides the {@link nextBtnText} in the final popover of a tour.
     *
     * @default 'Done'
     */
    doneBtnText?: string;
    /**
     * Indicates whether to show progress in the onboarding popover.
     *
     * @default true
     */
    showProgress?: boolean;
    /**
     * Whether to allow closing the popover by clicking on the backdrop.
     *
     * This should be disabled during a tour to ensure the user completes the tour, but can be enabled on the last step.
     *
     * @default false
     */
    allowClose?: boolean;
    /**
     * Distance between the highlighted element and the cutout.
     *
     * @default 10
     */
    stagePadding?: number;
    /**
     * Radius of the cutout around the highlighted element.
     *
     * @default 5
     */
    stageRadius?: number;
    /**
     * Whether to allow keyboard navigation.
     *
     * @default true
     */
    allowKeyboardControl?: boolean;
    /**
     * Whether to disable interaction with the highlighted element.
     * Can be configured at the step level as well.
     *
     * @default false
     */
    disableActiveInteraction?: boolean;
    /**
     * Option to disable the backdrop. Note, the backdrop element is still there but with 100% opacity
     * and the close on the backdrop is disabled.
     *
     * @default false
     */
    noBackdrop?: boolean;
    /**
     * Additional classes set on the popover itself.
     */
    popoverClass?: string;
    /**
     * Callback triggered when an onboarding popover renders.
     *
     * @param element The target DOM element of the step.
     * @param opts The configuration options and current state of the driver object as well as the driver object itself.
     */
    onPopoverRender?: (popover: PopoverDOM, opts: OnboardingState) => void;
    /**
     * Callback triggered when the onboarding tour is destroyed.
     */
    onDestroyed?: () => void;
};
export declare const useOnboardingTour: (params: OnboardingOptions) => {
    run: () => void;
    destroy: () => void;
    onboardingState: () => any;
    refresh: () => void;
    isActive: () => boolean;
    moveNext: () => void;
    movePrevious: () => void;
    moveTo: (stepNumber: number) => void;
    hasNextStep: () => boolean;
    hasPreviousStep: () => boolean;
    isFirstStep: () => boolean;
    isLastStep: () => boolean;
    getActiveIndex: () => number | undefined;
};
type OnboardingTipOptions = {
    allowClose?: boolean;
    stagePadding?: number;
    stageRadius?: number;
    noBackdrop?: boolean;
};
/**
 * Note: please use the {@link import('../components/onboarding/OnboardingTip')#default OnboardingTip} instead of this
 * hook!
 *
 * This is kept only for future development of driver.js with the hope to solve the global driver styling issue and to
 * eventually replace the OnboardingTooltip also with driver.js.
 *
 * @experimental
 */
export declare const useOnboardingTip: (options?: OnboardingTipOptions) => {
    highlight: (step: OnboardingStep) => void;
    destroy: () => void;
    refresh: () => void;
    isActive: () => boolean;
};
export {};
