/**
 * Tour — the walkthrough that introduces a screen one control at a time.
 *
 * An empty state explains a screen before there is anything on it; a tour
 * explains it once there is. It dims everything, cuts a hole around one control
 * and puts a card beside it, then moves the hole to the next control. What
 * makes that work is the hole: a caption alone has to describe where to look,
 * and "the button at the top right" is a sentence people read twice and still
 * get wrong.
 *
 * ```tsx
 * <Tour open={onboarding} onOpenChange={setOnboarding}>
 *   <Tour.Step order={0} title="Your library" description="Everything you save lands here.">
 *     <IconButton icon={<BookmarkIcon />} onPress={openLibrary} />
 *   </Tour.Step>
 *
 *   <Tour.Step order={1} title="Start writing" description="A new note, from anywhere." shape="circle">
 *     <Fab icon={<PlusIcon />} onPress={compose} />
 *   </Tour.Step>
 * </Tour>
 * ```
 *
 * A step wraps the control it is about, so the two live together in the tree
 * and cannot drift apart — a step whose target has been deleted goes with it
 * rather than pointing at empty space. `order` is what puts the steps in a
 * sequence, and it is the author's numbering rather than the tree's, because a
 * walkthrough usually crosses a header, a list and a tab bar in an order the
 * layout knows nothing about.
 *
 * The target is measured in window coordinates each time its step becomes
 * current, and again when the window changes size — a rect measured in portrait
 * describes nothing after a rotation, and a spotlight in the wrong place is
 * worse than none. A target that has scrolled out of view is the one case this
 * cannot fix by itself: bring it back with `onStepChange`, which fires with the
 * step about to be shown.
 *
 * The hole is one path with an even-odd fill — the screen rectangle and the
 * cutout in a single `d`, animated on the UI thread — rather than four views
 * arranged around a gap. Four views cannot have rounded corners between them,
 * and the corner is most of what makes the hole read as *this control* instead
 * of as a rectangle that happens to contain it.
 */
import { type ReactNode } from 'react';
import { type ViewProps } from 'react-native';
export type TourShape = 'rect' | 'circle';
export type TourPlacement = 'top' | 'bottom' | 'auto';
/** The words on the card's controls, for a tour that is not in English. */
export interface TourLabels {
    next?: string;
    back?: string;
    done?: string;
    skip?: string;
    close?: string;
}
export interface TourProps {
    children?: ReactNode;
    /** Whether the walkthrough is running. */
    open?: boolean;
    /** Whether it is running when uncontrolled. */
    defaultOpen?: boolean;
    onOpenChange?: (open: boolean) => void;
    /**
     * The current step's `order`, controlled. Note that this is the author's
     * numbering and not a position in the sequence — the two differ as soon as a
     * step is conditional.
     */
    step?: number;
    /** Where an uncontrolled tour starts. Defaults to the lowest `order`. */
    defaultStep?: number;
    /**
     * Fires with the `order` about to be shown, before it is. This is where a
     * target inside a scroller is brought back into view: the step is measured
     * on the next frame, so a `scrollTo` issued here lands first.
     */
    onStepChange?: (step: number) => void;
    /** The last step was acknowledged. */
    onFinish?: () => void;
    /** The tour was ended early — the skip control, the backdrop, or Android back. */
    onSkip?: () => void;
    /** Room left around every target, in pixels. 8 by default. A step may override it. */
    padding?: number;
    /** Corner radius of a rectangular cutout, in pixels. 12 by default. A step may override it. */
    radius?: number;
    /** Shape of every cutout. A step may override it. */
    shape?: TourShape;
    /**
     * Which side of the target the card prefers. `auto` puts it below when below
     * fits and above when it does not, which is the only behaviour that survives
     * a target near an edge.
     */
    placement?: TourPlacement;
    /** Ending the tour by pressing the dimmed area, or Android back. Default true. */
    dismissible?: boolean;
    /** Show "2 of 5" above the step's title. Default true. */
    showProgress?: boolean;
    /** Show the skip control. Default true. */
    showSkip?: boolean;
    /**
     * Leave the spotlit control pressable.
     *
     * Off by default: a tour is usually read rather than used, and a control that
     * reacts under the dim invites people to start doing the thing before they
     * have been told what it does. Turn it on for the walkthrough that asks you
     * to try the step — the target keeps its own `onPress`, so advancing the tour
     * from it is the app's call.
     */
    interactive?: boolean;
    /**
     * The dim laid over everything outside the cutout. Black at 66% by default —
     * dark enough that the hole reads as the only lit thing, light enough that
     * the screen behind it is still recognisable as the screen you were on.
     */
    overlayColor?: string;
    /** The words on the card's controls. */
    labels?: TourLabels;
    /** Extra classes for the card. */
    cardClassName?: string;
}
declare function TourRoot({ children, open, defaultOpen, onOpenChange, step, defaultStep, onStepChange, onFinish, onSkip, padding, radius, shape, placement, dismissible, showProgress, showSkip, interactive, overlayColor, labels, cardClassName, }: TourProps): import("react").JSX.Element;
declare namespace TourRoot {
    var displayName: string;
}
export interface TourStepProps extends Omit<ViewProps, 'children'> {
    /**
     * Where this step falls in the walkthrough. The author's numbering rather
     * than the tree's, and unique within a tour — two steps sharing an order
     * means one of them replaces the other.
     */
    order: number;
    /** The step's heading. */
    title?: string;
    /** The sentence under it. */
    description?: string;
    /** Shape of this step's cutout, overriding the tour's. */
    shape?: TourShape;
    /** Room around this target, overriding the tour's. */
    padding?: number;
    /** Corner radius of this cutout, overriding the tour's. */
    radius?: number;
    /** Which side of this target the card prefers, overriding the tour's. */
    placement?: TourPlacement;
    className?: string;
    /** The control this step is about. */
    children?: ReactNode;
}
/**
 * Wraps the control a step is about, and is what gets measured.
 *
 * The child is wrapped in a view rather than handed a ref, because the ref has
 * to survive whatever the child is — a button, a card, a tab bar — and only a
 * wrapper we own is guaranteed to be measurable. That wrapper is a plain view
 * with no sizing of its own, so it takes the width its parent gives it: put
 * layout classes on the step rather than on the child, the way you would on any
 * other view in that position.
 *
 * It renders its child and nothing else while the tour is closed, and stays
 * mounted either way — a step is a description of a control that is already on
 * the screen, not something that appears with the walkthrough.
 */
declare function TourStep({ order, title, description, shape, padding, radius, placement, className, children, ...props }: TourStepProps): import("react").JSX.Element;
declare namespace TourStep {
    var displayName: string;
}
export declare const Tour: typeof TourRoot & {
    Step: typeof TourStep;
};
export {};
//# sourceMappingURL=index.d.ts.map