/**
 * @file TourStep.tsx
 * @input Uses React, Popover/Button/Text/Heading/Stack from @astryxdesign/core, TourContext
 * @output Exports TourStep component and TourStepProps
 * @position Lab experiment (facebook/astryx#4239); a single spotlight step in a Tour
 *
 * A TourStep highlights a target element and renders a callout anchored to it,
 * with a heading, body, optional step progress ("2 of 5"), and back / next /
 * close controls. It registers with the parent `<Tour>` on mount (so step
 * order follows the children) and only renders its callout while it is the
 * active step. Anchoring + the callout surface reuse the core `Popover`
 * (`anchorRef` → the step's target), so positioning, top-layer rendering, and
 * dismiss semantics come from the existing layer system rather than a bespoke
 * implementation.
 *
 * The highlight is drawn as a separate overlay tracking the target's box — the
 * consumer's element is never restyled, so there is no cascade fight with the
 * target's own styles. That overlay is promoted into the browser TOP LAYER
 * (via the popover API, like the rest of the layer system) so it sits above
 * page content without any hardcoded z-index; the callout is promoted after
 * it, so the callout stays above the highlight. Because it is promoted in
 * place (not portaled out of the tree), it stays inside the consumer's Theme
 * subtree and inherits theme tokens — including a scoped/nested theme's accent
 * for the ring. Dimming is an opt-in spotlight cutout (dims around the target,
 * not over it) rather than a flat scrim.
 *
 * SYNC: When modified, update these files to stay in sync:
 * - /packages/lab/src/Tour/Tour.tsx
 * - /packages/lab/src/Tour/TourContext.ts
 * - /packages/lab/src/Tour/Tour.doc.mjs (props table, features)
 * - /packages/lab/src/Tour/Tour.test.tsx (tests for new/changed behavior)
 * - /packages/lab/src/Tour/index.ts (exports if types change)
 */
import { type ReactNode } from 'react';
import type { LayerAlignment, LayerPlacement } from '@astryxdesign/core/Layer';
export interface TourStepProps {
    /**
     * Ref to the element this step points at. The callout anchors to it (like a
     * Popover trigger); it must be a `<button>` or `[role="button"]` element,
     * matching Popover's `anchorRef` contract. Accepts a ref to any HTMLElement
     * subtype (e.g. `useRef<HTMLButtonElement>(null)`).
     */
    targetRef: React.RefObject<HTMLElement | null>;
    /** Step heading. */
    heading: ReactNode;
    /** Step body content. */
    children?: ReactNode;
    /**
     * Which side of the target the callout sits on.
     * @default 'below'
     */
    placement?: LayerPlacement;
    /**
     * How the callout aligns along the placement side — e.g. with `placement="below"`,
     * `start` left-aligns it under the target, `center` centers it, `end` right-aligns it.
     * @default 'start'
     */
    alignment?: LayerAlignment;
    /** Test id applied to the callout content. */
    'data-testid'?: string;
}
/**
 * A single spotlight step within a `<Tour>`. Renders its callout only while
 * active.
 *
 * @example
 * ```
 * <TourStep targetRef={saveRef} heading="Save your work">
 *   Changes save automatically.
 * </TourStep>
 * ```
 */
export declare function TourStep({ targetRef, heading, children, placement, alignment, 'data-testid': testId, }: TourStepProps): import("react").JSX.Element | null;
export declare namespace TourStep {
    var displayName: string;
}
//# sourceMappingURL=TourStep.d.ts.map