UNPKG

@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
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 {};