@gfazioli/mantine-onboarding-tour
Version:
A Mantine 9 onboarding tour component with focus-reveal overlays, cutout highlights, step-by-step popover navigation, and compound components for guided user experiences.
24 lines (23 loc) • 1.5 kB
TypeScript
import { ElementProps, OverlayProps, TransitionOverride } from '@mantine/core';
import { OnboardingTourFocusRevealFocusedMode } from '../OnboardingTourFocusReveal/focus-reveal-modes';
import { ResponsivePopoverProps } from '../OnboardingTourFocusReveal/OnboardingTourFocusReveal';
interface OnboardingTourFocusRevealGroupContextValue {
/** Asking for */
setRequestOverlay?: (value: boolean) => void;
setMeInViewport?: (uuid: string, visible: boolean) => void;
/** FocusReveal mode/effects when focused */
focusedMode?: OnboardingTourFocusRevealFocusedMode;
/** Indicator if element should be revealed */
withReveal?: boolean;
/** Will render overlay if set to `true` */
withOverlay?: boolean;
/** Props passed down to `Overlay` component */
overlayProps?: OverlayProps & ElementProps<'div'>;
/** Props passed down to the `Transition` component that used to animate the Overlay, use to configure duration and animation type, `{ duration: 150, transition: 'fade' }` by default */
transitionProps?: TransitionOverride;
/** Props passed down to the `Popover` component. Position, offset, width, and arrowSize accept responsive objects. */
popoverProps?: ResponsivePopoverProps;
}
export declare const OnboardingTourFocusRevealGroupProvider: import("react").Provider<OnboardingTourFocusRevealGroupContextValue | null>;
export declare function useOnboardingTourFocusRevealGroupContext(): OnboardingTourFocusRevealGroupContextValue | null;
export {};