@mantine/core 9.6.3 → 9.7.0

package/esm/components/Tooltip/Tooltip.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.mjs","names":["classes"],"sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import { cloneElement, useEffect, useRef } from 'react';\nimport cx from 'clsx';\nimport { useMergedRef } from '@mantine/hooks';\nimport {\n  Box,\n  createVarsResolver,\n  factory,\n  Factory,\n  getDefaultZIndex,\n  getRadius,\n  getRefProp,\n  getSingleElementChild,\n  useDirection,\n  useProps,\n  useStyles,\n} from '../../core';\nimport {\n  ArrowPosition,\n  FloatingArrow,\n  FloatingAxesOffsets,\n  FloatingPosition,\n  FloatingStrategy,\n  getArrowMergeDropdownStyles,\n  getFloatingPosition,\n} from '../../utils/Floating';\nimport { OptionalPortal } from '../Portal';\nimport { getTransitionProps, Transition, TransitionOverride } from '../Transition';\nimport { TooltipBaseProps, TooltipCssVariables, TooltipStylesNames } from './Tooltip.types';\nimport { TooltipFloating, type TooltipFloatingProps } from './TooltipFloating/TooltipFloating';\nimport {\n  TooltipGroup,\n  type TooltipGroupProps,\n  type TooltipGroupContextValue,\n} from './TooltipGroup/TooltipGroup';\nimport { useTooltip } from './use-tooltip';\nimport classes from './Tooltip.module.css';\nexport interface TooltipProps extends TooltipBaseProps {\n  /** Called when tooltip position changes */\n  onPositionChange?: (position: FloatingPosition) => void;\n\n  /** Open delay in ms */\n  openDelay?: number;\n\n  /** Close delay in ms @default 0 */\n  closeDelay?: number;\n\n  /** Controlled opened state */\n  opened?: boolean;\n\n  /** Uncontrolled tooltip initial opened state */\n  defaultOpened?: boolean;\n\n  /** Space between target element and tooltip in px @default 5 */\n  offset?: number | FloatingAxesOffsets;\n\n  /** If set, the tooltip has an arrow @default false */\n  withArrow?: boolean;\n\n  /** Arrow size in px @default 4 */\n  arrowSize?: number;\n\n  /** Arrow offset in px @default 5 */\n  arrowOffset?: number;\n\n  /** Arrow `border-radius` in px @default 0 */\n  arrowRadius?: number;\n\n  /** Arrow position relative to the tooltip @default side */\n  arrowPosition?: ArrowPosition;\n\n  /** Props passed down to the `Transition` component that used to animate tooltip presence, use to configure duration and animation type @default { duration: 100, transition: 'fade' } */\n  transitionProps?: TransitionOverride;\n\n  /** Determines which events will be used to show tooltip @default { hover: true, focus: false, touch: false } */\n  events?: { hover: boolean; focus: boolean; touch: boolean };\n\n  /** If set, the tooltip stays open while the pointer is over it @default false */\n  interactive?: boolean;\n\n  /** Must be set if the tooltip target is an inline element */\n  inline?: boolean;\n\n  /** If set, the tooltip is not unmounted from the DOM when hidden, `display: none` styles are applied instead */\n  keepMounted?: boolean;\n\n  /** Changes floating ui [position strategy](https://floating-ui.com/docs/usefloating#strategy) @default 'absolute' */\n  floatingStrategy?: FloatingStrategy;\n\n  /** If set, adjusts text color based on background color for `filled` variant */\n  autoContrast?: boolean;\n\n  /** Selector, ref of an element or element itself that should be used for positioning */\n  target?: React.RefObject<HTMLElement | null> | HTMLElement | null | string;\n}\n\nexport type TooltipFactory = Factory<{\n  props: TooltipProps;\n  ref: HTMLDivElement;\n  stylesNames: TooltipStylesNames;\n  vars: TooltipCssVariables;\n  staticComponents: {\n    Floating: typeof TooltipFloating;\n    Group: typeof TooltipGroup;\n  };\n}>;\n\nconst defaultProps = {\n  position: 'top',\n  refProp: 'ref',\n  withinPortal: true,\n  arrowSize: 4,\n  arrowOffset: 5,\n  arrowRadius: 0,\n  arrowPosition: 'side',\n  offset: 5,\n  transitionProps: { duration: 100, transition: 'fade' },\n  events: { hover: true, focus: false, touch: false },\n  zIndex: getDefaultZIndex('popover'),\n  middlewares: { flip: true, shift: true, inline: false },\n} satisfies Partial<TooltipProps>;\n\nconst varsResolver = createVarsResolver<TooltipFactory>(\n  (theme, { radius, color, variant, autoContrast }) => {\n    const colors = theme.variantColorResolver({\n      theme,\n      color: color || theme.primaryColor,\n      autoContrast,\n      variant: variant || 'filled',\n    });\n\n    return {\n      tooltip: {\n        '--tooltip-radius': radius === undefined ? undefined : getRadius(radius),\n        '--tooltip-bg': color ? colors.background : undefined,\n        '--tooltip-color': color ? colors.color : undefined,\n      },\n    };\n  }\n);\n\nexport const Tooltip = factory<TooltipFactory>((_props) => {\n  const props = useProps('Tooltip', defaultProps, _props);\n  const {\n    children,\n    position,\n    refProp,\n    label,\n    openDelay,\n    closeDelay,\n    onPositionChange,\n    opened,\n    defaultOpened,\n    withinPortal,\n    radius,\n    color,\n    classNames,\n    styles,\n    unstyled,\n    style,\n    className,\n    withArrow,\n    arrowSize,\n    arrowOffset,\n    arrowRadius,\n    arrowPosition,\n    offset,\n    transitionProps,\n    multiline,\n    events,\n    interactive,\n    zIndex,\n    disabled,\n    onClick,\n    onMouseEnter,\n    onMouseLeave,\n    inline,\n    variant,\n    keepMounted,\n    vars,\n    portalProps,\n    mod,\n    floatingStrategy,\n    middlewares,\n    autoContrast,\n    attributes,\n    target,\n    ref,\n    ...others\n  } = props;\n\n  const { dir } = useDirection();\n  const arrowRef = useRef<HTMLDivElement>(null);\n\n  const tooltip = useTooltip({\n    position: getFloatingPosition(dir, position),\n    closeDelay,\n    openDelay,\n    onPositionChange,\n    opened,\n    defaultOpened,\n    events,\n    interactive,\n    arrowRef,\n    arrowOffset,\n    offset: typeof offset === 'number' ? offset + (withArrow ? arrowSize / 2 : 0) : offset,\n    inline,\n    strategy: floatingStrategy,\n    middlewares,\n  });\n\n  useEffect(() => {\n    const targetNode =\n      target instanceof HTMLElement\n        ? target\n        : typeof target === 'string'\n          ? document.querySelector(target)\n          : target?.current || null;\n\n    if (targetNode) {\n      tooltip.reference(targetNode);\n    }\n  }, [target, tooltip]);\n\n  const getStyles = useStyles<TooltipFactory>({\n    name: 'Tooltip',\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    rootSelector: 'tooltip',\n    vars,\n    varsResolver,\n  });\n\n  const child = getSingleElementChild(children);\n  if (!target && !child) {\n    throw new Error(\n      '[@mantine/core] Tooltip component children should be an element or a component that accepts ref, fragments, strings, numbers and other primitive values are not supported'\n    );\n  }\n\n  const tooltipStyles = getStyles('tooltip');\n  const interactiveMod = interactive && !disabled && !!tooltip.opened;\n  const mergeStyles =\n    arrowPosition === 'merge' && withArrow\n      ? getArrowMergeDropdownStyles({ position: tooltip.placement, dir })\n      : undefined;\n\n  if (target) {\n    const transition = getTransitionProps(transitionProps, { duration: 100, transition: 'fade' });\n    return (\n      <>\n        <OptionalPortal {...portalProps} withinPortal={withinPortal}>\n          <Transition\n            {...transition}\n            keepMounted={keepMounted}\n            mounted={!disabled && !!tooltip.opened}\n            duration={tooltip.isGroupPhase ? 10 : transition.duration}\n          >\n            {(transitionStyles) => (\n              <Box\n                {...others}\n                data-fixed={floatingStrategy === 'fixed' || undefined}\n                variant={variant}\n                mod={[{ multiline, interactive: interactiveMod }, mod]}\n                {...tooltipStyles}\n                {...tooltip.getFloatingProps({\n                  ref: tooltip.floating,\n                  className: tooltipStyles.className,\n                  style: {\n                    ...tooltipStyles.style,\n                    ...transitionStyles,\n                    ...mergeStyles,\n                    zIndex: zIndex as React.CSSProperties['zIndex'],\n                    top: tooltip.y ?? 0,\n                    left: tooltip.x ?? 0,\n                  },\n                })}\n              >\n                {label}\n                <FloatingArrow\n                  ref={arrowRef}\n                  arrowX={tooltip.arrowX}\n                  arrowY={tooltip.arrowY}\n                  visible={withArrow}\n                  position={tooltip.placement}\n                  arrowSize={arrowSize!}\n                  arrowOffset={arrowOffset!}\n                  arrowRadius={arrowRadius!}\n                  arrowPosition={arrowPosition!}\n                  {...getStyles('arrow')}\n                />\n              </Box>\n            )}\n          </Transition>\n        </OptionalPortal>\n      </>\n    );\n  }\n\n  // fallback to children-based approach\n  const childProps = child!.props as any;\n  const targetRef = useMergedRef(tooltip.reference, getRefProp(child), ref);\n  const transition = getTransitionProps(transitionProps, { duration: 100, transition: 'fade' });\n\n  return (\n    <>\n      <OptionalPortal {...portalProps} withinPortal={withinPortal}>\n        <Transition\n          {...transition}\n          keepMounted={keepMounted}\n          mounted={!disabled && !!tooltip.opened}\n          duration={tooltip.isGroupPhase ? 10 : transition.duration}\n        >\n          {(transitionStyles) => (\n            <Box\n              {...others}\n              data-fixed={floatingStrategy === 'fixed' || undefined}\n              variant={variant}\n              mod={[{ multiline, interactive: interactiveMod }, mod]}\n              {...tooltip.getFloatingProps({\n                ref: tooltip.floating,\n                className: getStyles('tooltip').className,\n                style: {\n                  ...getStyles('tooltip').style,\n                  ...transitionStyles,\n                  ...mergeStyles,\n                  zIndex: zIndex as React.CSSProperties['zIndex'],\n                  top: tooltip.y ?? 0,\n                  left: tooltip.x ?? 0,\n                },\n              })}\n            >\n              {label}\n              <FloatingArrow\n                ref={arrowRef}\n                arrowX={tooltip.arrowX}\n                arrowY={tooltip.arrowY}\n                visible={withArrow}\n                position={tooltip.placement}\n                arrowSize={arrowSize}\n                arrowOffset={arrowOffset}\n                arrowRadius={arrowRadius}\n                arrowPosition={arrowPosition}\n                {...getStyles('arrow')}\n              />\n            </Box>\n          )}\n        </Transition>\n      </OptionalPortal>\n\n      {cloneElement(\n        child!,\n        tooltip.getReferenceProps({\n          onClick,\n          onMouseEnter,\n          onMouseLeave,\n          onMouseMove: props.onMouseMove,\n          onPointerDown: props.onPointerDown,\n          onPointerEnter: props.onPointerEnter,\n          ...childProps,\n          className: cx(className, childProps.className),\n          [refProp]: targetRef,\n        })\n      )}\n    </>\n  );\n});\n\nTooltip.classes = classes;\nTooltip.varsResolver = varsResolver;\nTooltip.displayName = '@mantine/core/Tooltip';\nTooltip.Floating = TooltipFloating;\nTooltip.Group = TooltipGroup;\n\nexport namespace Tooltip {\n  export type Props = TooltipProps;\n  export type Factory = TooltipFactory;\n  export type CssVariables = TooltipCssVariables;\n  export type StylesNames = TooltipStylesNames;\n\n  export namespace Group {\n    export type Props = TooltipGroupProps;\n    export type ContextValue = TooltipGroupContextValue;\n  }\n\n  export namespace Floating {\n    export type Props = TooltipFloatingProps;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"Tooltip.mjs","names":["classes"],"sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import { cloneElement, useEffect, useRef } from 'react';\nimport cx from 'clsx';\nimport { useMergedRef } from '@mantine/hooks';\nimport {\n  Box,\n  createVarsResolver,\n  factory,\n  Factory,\n  getDefaultZIndex,\n  getRadius,\n  getRefProp,\n  getSingleElementChild,\n  useDirection,\n  useProps,\n  useStyles,\n} from '../../core';\nimport {\n  ArrowPosition,\n  FloatingArrow,\n  FloatingAxesOffsets,\n  FloatingPosition,\n  FloatingStrategy,\n  getArrowMergeDropdownStyles,\n  getFloatingPosition,\n} from '../../utils/Floating';\nimport { OptionalPortal } from '../Portal';\nimport { getTransitionProps, Transition, TransitionOverride } from '../Transition';\nimport { TooltipBaseProps, TooltipCssVariables, TooltipStylesNames } from './Tooltip.types';\nimport { TooltipFloating, type TooltipFloatingProps } from './TooltipFloating/TooltipFloating';\nimport {\n  TooltipGroup,\n  type TooltipGroupProps,\n  type TooltipGroupContextValue,\n} from './TooltipGroup/TooltipGroup';\nimport { useTooltip } from './use-tooltip';\nimport classes from './Tooltip.module.css';\nexport interface TooltipProps extends TooltipBaseProps {\n  /** Called when tooltip position changes */\n  onPositionChange?: (position: FloatingPosition) => void;\n\n  /** Open delay in ms */\n  openDelay?: number;\n\n  /** Close delay in ms @default 0 */\n  closeDelay?: number;\n\n  /** Controlled opened state */\n  opened?: boolean;\n\n  /** Uncontrolled tooltip initial opened state */\n  defaultOpened?: boolean;\n\n  /** Space between target element and tooltip in px @default 5 */\n  offset?: number | FloatingAxesOffsets;\n\n  /** If set, the tooltip has an arrow @default false */\n  withArrow?: boolean;\n\n  /** Arrow size in px @default 4 */\n  arrowSize?: number;\n\n  /** Arrow offset in px @default 5 */\n  arrowOffset?: number;\n\n  /** Arrow `border-radius` in px @default 0 */\n  arrowRadius?: number;\n\n  /** Arrow position relative to the tooltip @default side */\n  arrowPosition?: ArrowPosition;\n\n  /** Props passed down to the `Transition` component that used to animate tooltip presence, use to configure duration and animation type @default { duration: 100, transition: 'fade' } */\n  transitionProps?: TransitionOverride;\n\n  /** Determines which events will be used to show tooltip @default { hover: true, focus: false, touch: false } */\n  events?: { hover: boolean; focus: boolean; touch: boolean };\n\n  /** If set, the tooltip stays open while the pointer is over it @default false */\n  interactive?: boolean;\n\n  /** Must be set if the tooltip target is an inline element */\n  inline?: boolean;\n\n  /** If set, the tooltip is not unmounted from the DOM when hidden, `display: none` styles are applied instead */\n  keepMounted?: boolean;\n\n  /** Changes floating ui [position strategy](https://floating-ui.com/docs/usefloating#strategy) @default 'absolute' */\n  floatingStrategy?: FloatingStrategy;\n\n  /** If set, adjusts text color based on background color for `filled` variant */\n  autoContrast?: boolean;\n\n  /** Selector, ref of an element or element itself that should be used for positioning */\n  target?: React.RefObject<HTMLElement | null> | HTMLElement | null | string;\n\n  /** If set, the tooltip is hidden when the target element is removed from the DOM, hidden with `display: none` or scrolled out of the visible area. Has no effect on `Tooltip.Floating` @default true */\n  hideDetached?: boolean;\n}\n\nexport type TooltipFactory = Factory<{\n  props: TooltipProps;\n  ref: HTMLDivElement;\n  stylesNames: TooltipStylesNames;\n  vars: TooltipCssVariables;\n  staticComponents: {\n    Floating: typeof TooltipFloating;\n    Group: typeof TooltipGroup;\n  };\n}>;\n\nconst defaultProps = {\n  position: 'top',\n  refProp: 'ref',\n  withinPortal: true,\n  arrowSize: 4,\n  arrowOffset: 5,\n  arrowRadius: 0,\n  arrowPosition: 'side',\n  offset: 5,\n  transitionProps: { duration: 100, transition: 'fade' },\n  events: { hover: true, focus: false, touch: false },\n  zIndex: getDefaultZIndex('popover'),\n  middlewares: { flip: true, shift: true, inline: false },\n  hideDetached: true,\n} satisfies Partial<TooltipProps>;\n\nconst varsResolver = createVarsResolver<TooltipFactory>(\n  (theme, { radius, color, variant, autoContrast }) => {\n    const colors = theme.variantColorResolver({\n      theme,\n      color: color || theme.primaryColor,\n      autoContrast,\n      variant: variant || 'filled',\n    });\n\n    return {\n      tooltip: {\n        '--tooltip-radius': radius === undefined ? undefined : getRadius(radius),\n        '--tooltip-bg': color ? colors.background : undefined,\n        '--tooltip-color': color ? colors.color : undefined,\n      },\n    };\n  }\n);\n\nexport const Tooltip = factory<TooltipFactory>((_props) => {\n  const props = useProps('Tooltip', defaultProps, _props);\n  const {\n    children,\n    position,\n    refProp,\n    label,\n    openDelay,\n    closeDelay,\n    onPositionChange,\n    opened,\n    defaultOpened,\n    withinPortal,\n    radius,\n    color,\n    classNames,\n    styles,\n    unstyled,\n    style,\n    className,\n    withArrow,\n    arrowSize,\n    arrowOffset,\n    arrowRadius,\n    arrowPosition,\n    offset,\n    transitionProps,\n    multiline,\n    events,\n    interactive,\n    zIndex,\n    disabled,\n    onClick,\n    onMouseEnter,\n    onMouseLeave,\n    inline,\n    variant,\n    keepMounted,\n    vars,\n    portalProps,\n    mod,\n    floatingStrategy,\n    middlewares,\n    autoContrast,\n    attributes,\n    target,\n    hideDetached,\n    ref,\n    ...others\n  } = props;\n\n  const { dir } = useDirection();\n  const arrowRef = useRef<HTMLDivElement>(null);\n\n  const tooltip = useTooltip({\n    position: getFloatingPosition(dir, position),\n    closeDelay,\n    openDelay,\n    onPositionChange,\n    opened,\n    defaultOpened,\n    events,\n    interactive,\n    arrowRef,\n    arrowOffset,\n    offset: typeof offset === 'number' ? offset + (withArrow ? arrowSize / 2 : 0) : offset,\n    inline,\n    strategy: floatingStrategy,\n    middlewares,\n    hideDetached,\n  });\n\n  useEffect(() => {\n    const targetNode =\n      target instanceof HTMLElement\n        ? target\n        : typeof target === 'string'\n          ? document.querySelector(target)\n          : target?.current || null;\n\n    if (targetNode) {\n      tooltip.reference(targetNode);\n    }\n  }, [target, tooltip]);\n\n  const getStyles = useStyles<TooltipFactory>({\n    name: 'Tooltip',\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    rootSelector: 'tooltip',\n    vars,\n    varsResolver,\n  });\n\n  const child = getSingleElementChild(children);\n  if (!target && !child) {\n    throw new Error(\n      '[@mantine/core] Tooltip component children should be an element or a component that accepts ref, fragments, strings, numbers and other primitive values are not supported'\n    );\n  }\n\n  const tooltipStyles = getStyles('tooltip');\n  const interactiveMod = interactive && !disabled && !!tooltip.opened;\n  const mergeStyles =\n    arrowPosition === 'merge' && withArrow\n      ? getArrowMergeDropdownStyles({ position: tooltip.placement, dir })\n      : undefined;\n\n  if (target) {\n    const transition = getTransitionProps(transitionProps, { duration: 100, transition: 'fade' });\n    return (\n      <>\n        <OptionalPortal {...portalProps} withinPortal={withinPortal}>\n          <Transition\n            {...transition}\n            keepMounted={keepMounted}\n            mounted={!disabled && !!tooltip.opened}\n            duration={tooltip.isGroupPhase ? 10 : transition.duration}\n          >\n            {(transitionStyles) => (\n              <Box\n                {...others}\n                data-fixed={floatingStrategy === 'fixed' || undefined}\n                variant={variant}\n                mod={[{ multiline, interactive: interactiveMod }, mod]}\n                {...tooltipStyles}\n                {...tooltip.getFloatingProps({\n                  ref: tooltip.floating,\n                  className: tooltipStyles.className,\n                  style: {\n                    ...tooltipStyles.style,\n                    ...transitionStyles,\n                    ...mergeStyles,\n                    zIndex: zIndex as React.CSSProperties['zIndex'],\n                    top: tooltip.y ?? 0,\n                    left: tooltip.x ?? 0,\n                    ...(tooltip.referenceHidden ? { display: 'none' } : null),\n                  },\n                })}\n              >\n                {label}\n                <FloatingArrow\n                  ref={arrowRef}\n                  arrowX={tooltip.arrowX}\n                  arrowY={tooltip.arrowY}\n                  visible={withArrow}\n                  position={tooltip.placement}\n                  arrowSize={arrowSize!}\n                  arrowOffset={arrowOffset!}\n                  arrowRadius={arrowRadius!}\n                  arrowPosition={arrowPosition!}\n                  {...getStyles('arrow')}\n                />\n              </Box>\n            )}\n          </Transition>\n        </OptionalPortal>\n      </>\n    );\n  }\n\n  // fallback to children-based approach\n  const childProps = child!.props as any;\n  const targetRef = useMergedRef(tooltip.reference, getRefProp(child), ref);\n  const transition = getTransitionProps(transitionProps, { duration: 100, transition: 'fade' });\n\n  return (\n    <>\n      <OptionalPortal {...portalProps} withinPortal={withinPortal}>\n        <Transition\n          {...transition}\n          keepMounted={keepMounted}\n          mounted={!disabled && !!tooltip.opened}\n          duration={tooltip.isGroupPhase ? 10 : transition.duration}\n        >\n          {(transitionStyles) => (\n            <Box\n              {...others}\n              data-fixed={floatingStrategy === 'fixed' || undefined}\n              variant={variant}\n              mod={[{ multiline, interactive: interactiveMod }, mod]}\n              {...tooltip.getFloatingProps({\n                ref: tooltip.floating,\n                className: getStyles('tooltip').className,\n                style: {\n                  ...getStyles('tooltip').style,\n                  ...transitionStyles,\n                  ...mergeStyles,\n                  zIndex: zIndex as React.CSSProperties['zIndex'],\n                  top: tooltip.y ?? 0,\n                  left: tooltip.x ?? 0,\n                  ...(tooltip.referenceHidden ? { display: 'none' } : null),\n                },\n              })}\n            >\n              {label}\n              <FloatingArrow\n                ref={arrowRef}\n                arrowX={tooltip.arrowX}\n                arrowY={tooltip.arrowY}\n                visible={withArrow}\n                position={tooltip.placement}\n                arrowSize={arrowSize}\n                arrowOffset={arrowOffset}\n                arrowRadius={arrowRadius}\n                arrowPosition={arrowPosition}\n                {...getStyles('arrow')}\n              />\n            </Box>\n          )}\n        </Transition>\n      </OptionalPortal>\n\n      {cloneElement(\n        child!,\n        tooltip.getReferenceProps({\n          onClick,\n          onMouseEnter,\n          onMouseLeave,\n          onMouseMove: props.onMouseMove,\n          onPointerDown: props.onPointerDown,\n          onPointerEnter: props.onPointerEnter,\n          ...childProps,\n          className: cx(className, childProps.className),\n          [refProp]: targetRef,\n        })\n      )}\n    </>\n  );\n});\n\nTooltip.classes = classes;\nTooltip.varsResolver = varsResolver;\nTooltip.displayName = '@mantine/core/Tooltip';\nTooltip.Floating = TooltipFloating;\nTooltip.Group = TooltipGroup;\n\nexport namespace Tooltip {\n  export type Props = TooltipProps;\n  export type Factory = TooltipFactory;\n  export type CssVariables = TooltipCssVariables;\n  export type StylesNames = TooltipStylesNames;\n\n  export namespace Group {\n    export type Props = TooltipGroupProps;\n    export type ContextValue = TooltipGroupContextValue;\n  }\n\n  export namespace Floating {\n    export type Props = TooltipFloatingProps;\n  }\n}\n"],"mappings":"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"}

package/esm/components/Tooltip/use-tooltip.mjs

@@ -1,8 +1,9 @@
 "use client";
+import { useMantineEnv } from "../../core/MantineProvider/Mantine.context.mjs";
 import { TooltipGroupContext } from "./TooltipGroup/TooltipGroup.mjs";
 import { use, useCallback, useRef, useState } from "react";
 import { useId as useId$1, useIsomorphicEffect } from "@mantine/hooks";
-import { arrow, autoUpdate, flip, inline, offset, safePolygon, shift, useDelayGroup, useDismiss, useFloating, useFocus, useHover, useInteractions, useRole } from "@floating-ui/react";
+import { arrow, autoUpdate, flip, hide, inline, offset, safePolygon, shift, useDelayGroup, useDismiss, useFloating, useFocus, useHover, useInteractions, useRole } from "@floating-ui/react";
 //#region packages/@mantine/core/src/components/Tooltip/use-tooltip.ts
 function getDefaultMiddlewares(middlewares) {
 	if (middlewares === void 0) return {
@@ -16,7 +17,7 @@ function getDefaultMiddlewares(middlewares) {
 }
 function getTooltipMiddlewares(settings) {
 	const middlewaresOptions = getDefaultMiddlewares(settings.middlewares);
-	const middlewares = [offset(settings.offset)];
+	const middlewares = [offset(settings.offset), hide()];
 	if (middlewaresOptions.shift) middlewares.push(shift(typeof middlewaresOptions.shift === "boolean" ? { padding: 8 } : {
 		padding: 8,
 		...middlewaresOptions.shift
@@ -35,11 +36,12 @@ function useTooltip(settings) {
 	const opened = typeof settings.opened === "boolean" ? settings.opened : uncontrolledOpened;
 	const withinGroup = use(TooltipGroupContext).withinGroup;
 	const uid = useId$1();
+	const env = useMantineEnv();
 	const onChange = useCallback((_opened) => {
 		setUncontrolledOpened(_opened);
 		if (_opened) setCurrentId(uid);
 	}, [uid]);
-	const { x, y, context, refs, placement, middlewareData: { arrow: { x: arrowX, y: arrowY } = {} } } = useFloating({
+	const { x, y, context, refs, placement, middlewareData: { arrow: { x: arrowX, y: arrowY } = {}, hide: hideData } } = useFloating({
 		strategy: settings.strategy,
 		placement: settings.position,
 		open: opened,
@@ -84,7 +86,8 @@ function useTooltip(settings) {
 		getReferenceProps,
 		isGroupPhase,
 		opened,
-		placement
+		placement,
+		referenceHidden: settings.hideDetached && env !== "test" ? hideData?.referenceHidden : false
 	};
 }
 //#endregion

package/esm/components/Tooltip/use-tooltip.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-tooltip.mjs","names":["useId"],"sources":["../../../src/components/Tooltip/use-tooltip.ts"],"sourcesContent":["import { use, useCallback, useRef, useState } from 'react';\nimport {\n  arrow,\n  autoUpdate,\n  flip,\n  inline,\n  offset,\n  safePolygon,\n  shift,\n  useDelayGroup,\n  useDismiss,\n  useFloating,\n  useFocus,\n  useHover,\n  useInteractions,\n  useRole,\n  type Middleware,\n} from '@floating-ui/react';\nimport { useId, useIsomorphicEffect } from '@mantine/hooks';\nimport { FloatingAxesOffsets, FloatingPosition, FloatingStrategy } from '../../utils/Floating';\nimport { type TooltipMiddlewares } from './Tooltip.types';\nimport { TooltipGroupContext } from './TooltipGroup/TooltipGroup';\n\ninterface UseTooltip {\n  position: FloatingPosition;\n  closeDelay?: number;\n  openDelay?: number;\n  onPositionChange?: (position: FloatingPosition) => void;\n  opened?: boolean;\n  defaultOpened?: boolean;\n  offset: number | FloatingAxesOffsets;\n  arrowRef?: React.RefObject<HTMLDivElement | null>;\n  arrowOffset?: number;\n  events?: { hover: boolean; focus: boolean; touch: boolean };\n  interactive?: boolean;\n  inline?: boolean;\n  strategy?: FloatingStrategy;\n  middlewares?: TooltipMiddlewares;\n}\n\nfunction getDefaultMiddlewares(middlewares: TooltipMiddlewares | undefined): TooltipMiddlewares {\n  if (middlewares === undefined) {\n    return { shift: true, flip: true };\n  }\n\n  const result = { ...middlewares };\n  if (middlewares.shift === undefined) {\n    result.shift = true;\n  }\n\n  if (middlewares.flip === undefined) {\n    result.flip = true;\n  }\n\n  return result;\n}\n\nfunction getTooltipMiddlewares(settings: UseTooltip) {\n  const middlewaresOptions = getDefaultMiddlewares(settings.middlewares);\n  const middlewares: Middleware[] = [offset(settings.offset)];\n\n  if (middlewaresOptions.shift) {\n    middlewares.push(\n      shift(\n        typeof middlewaresOptions.shift === 'boolean'\n          ? { padding: 8 }\n          : { padding: 8, ...middlewaresOptions.shift }\n      )\n    );\n  }\n\n  if (middlewaresOptions.flip) {\n    middlewares.push(\n      typeof middlewaresOptions.flip === 'boolean' ? flip() : flip(middlewaresOptions.flip)\n    );\n  }\n\n  middlewares.push(arrow({ element: settings.arrowRef!, padding: settings.arrowOffset }));\n\n  if (middlewaresOptions.inline) {\n    middlewares.push(\n      typeof middlewaresOptions.inline === 'boolean' ? inline() : inline(middlewaresOptions.inline)\n    );\n  } else if (settings.inline) {\n    middlewares.push(inline());\n  }\n\n  return middlewares;\n}\n\nexport function useTooltip(settings: UseTooltip) {\n  const [uncontrolledOpened, setUncontrolledOpened] = useState(settings.defaultOpened);\n  const controlled = typeof settings.opened === 'boolean';\n  const opened = controlled ? settings.opened : uncontrolledOpened;\n  const withinGroup = use(TooltipGroupContext).withinGroup;\n  const uid = useId();\n\n  const onChange = useCallback(\n    (_opened: boolean) => {\n      setUncontrolledOpened(_opened);\n\n      if (_opened) {\n        setCurrentId(uid);\n      }\n    },\n    [uid]\n  );\n\n  const {\n    x,\n    y,\n    context,\n    refs,\n    placement,\n    middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },\n  } = useFloating({\n    strategy: settings.strategy,\n    placement: settings.position,\n    open: opened,\n    onOpenChange: onChange,\n    middleware: getTooltipMiddlewares(settings),\n    whileElementsMounted: autoUpdate,\n  });\n\n  const { delay: groupDelay, currentId, setCurrentId } = useDelayGroup(context, { id: uid });\n\n  const { getReferenceProps, getFloatingProps } = useInteractions([\n    useHover(context, {\n      enabled: settings.events?.hover,\n      delay: withinGroup ? groupDelay : { open: settings.openDelay, close: settings.closeDelay },\n      mouseOnly: !settings.events?.touch,\n      handleClose: settings.interactive ? safePolygon() : null,\n    }),\n    useFocus(context, { enabled: settings.events?.focus, visibleOnly: true }),\n    useRole(context, { role: 'tooltip' }),\n    // Cannot be used with controlled tooltip, page jumps\n    useDismiss(context, { enabled: typeof settings.opened === 'undefined' }),\n  ]);\n\n  const previousPlacementRef = useRef(placement);\n  useIsomorphicEffect(() => {\n    if (previousPlacementRef.current !== placement) {\n      previousPlacementRef.current = placement;\n      settings.onPositionChange?.(placement);\n    }\n  }, [placement]);\n\n  const isGroupPhase = opened && currentId && currentId !== uid;\n\n  return {\n    x,\n    y,\n    arrowX,\n    arrowY,\n    reference: refs.setReference,\n    floating: refs.setFloating,\n    getFloatingProps,\n    getReferenceProps,\n    isGroupPhase,\n    opened,\n    placement,\n  };\n}\n"],"mappings":";;;;;;AAwCA,SAAS,sBAAsB,aAAiE;CAC9F,IAAI,gBAAgB,KAAA,GAClB,OAAO;EAAE,OAAO;EAAM,MAAM;CAAK;CAGnC,MAAM,SAAS,EAAE,GAAG,YAAY;CAChC,IAAI,YAAY,UAAU,KAAA,GACxB,OAAO,QAAQ;CAGjB,IAAI,YAAY,SAAS,KAAA,GACvB,OAAO,OAAO;CAGhB,OAAO;AACT;AAEA,SAAS,sBAAsB,UAAsB;CACnD,MAAM,qBAAqB,sBAAsB,SAAS,WAAW;CACrE,MAAM,cAA4B,CAAC,OAAO,SAAS,MAAM,CAAC;CAE1D,IAAI,mBAAmB,OACrB,YAAY,KACV,MACE,OAAO,mBAAmB,UAAU,YAChC,EAAE,SAAS,EAAE,IACb;EAAE,SAAS;EAAG,GAAG,mBAAmB;CAAM,CAChD,CACF;CAGF,IAAI,mBAAmB,MACrB,YAAY,KACV,OAAO,mBAAmB,SAAS,YAAY,KAAK,IAAI,KAAK,mBAAmB,IAAI,CACtF;CAGF,YAAY,KAAK,MAAM;EAAE,SAAS,SAAS;EAAW,SAAS,SAAS;CAAY,CAAC,CAAC;CAEtF,IAAI,mBAAmB,QACrB,YAAY,KACV,OAAO,mBAAmB,WAAW,YAAY,OAAO,IAAI,OAAO,mBAAmB,MAAM,CAC9F;MACK,IAAI,SAAS,QAClB,YAAY,KAAK,OAAO,CAAC;CAG3B,OAAO;AACT;AAEA,SAAgB,WAAW,UAAsB;CAC/C,MAAM,CAAC,oBAAoB,yBAAyB,SAAS,SAAS,aAAa;CAEnF,MAAM,SADa,OAAO,SAAS,WAAW,YAClB,SAAS,SAAS;CAC9C,MAAM,cAAc,IAAI,mBAAmB,CAAC,CAAC;CAC7C,MAAM,MAAMA,QAAM;CAElB,MAAM,WAAW,aACd,YAAqB;EACpB,sBAAsB,OAAO;EAE7B,IAAI,SACF,aAAa,GAAG;CAEpB,GACA,CAAC,GAAG,CACN;CAEA,MAAM,EACJ,GACA,GACA,SACA,MACA,WACA,gBAAgB,EAAE,OAAO,EAAE,GAAG,QAAQ,GAAG,WAAW,CAAC,QACnD,YAAY;EACd,UAAU,SAAS;EACnB,WAAW,SAAS;EACpB,MAAM;EACN,cAAc;EACd,YAAY,sBAAsB,QAAQ;EAC1C,sBAAsB;CACxB,CAAC;CAED,MAAM,EAAE,OAAO,YAAY,WAAW,iBAAiB,cAAc,SAAS,EAAE,IAAI,IAAI,CAAC;CAEzF,MAAM,EAAE,mBAAmB,qBAAqB,gBAAgB;EAC9D,SAAS,SAAS;GAChB,SAAS,SAAS,QAAQ;GAC1B,OAAO,cAAc,aAAa;IAAE,MAAM,SAAS;IAAW,OAAO,SAAS;GAAW;GACzF,WAAW,CAAC,SAAS,QAAQ;GAC7B,aAAa,SAAS,cAAc,YAAY,IAAI;EACtD,CAAC;EACD,SAAS,SAAS;GAAE,SAAS,SAAS,QAAQ;GAAO,aAAa;EAAK,CAAC;EACxE,QAAQ,SAAS,EAAE,MAAM,UAAU,CAAC;EAEpC,WAAW,SAAS,EAAE,SAAS,OAAO,SAAS,WAAW,YAAY,CAAC;CACzE,CAAC;CAED,MAAM,uBAAuB,OAAO,SAAS;CAC7C,0BAA0B;EACxB,IAAI,qBAAqB,YAAY,WAAW;GAC9C,qBAAqB,UAAU;GAC/B,SAAS,mBAAmB,SAAS;EACvC;CACF,GAAG,CAAC,SAAS,CAAC;CAEd,MAAM,eAAe,UAAU,aAAa,cAAc;CAE1D,OAAO;EACL;EACA;EACA;EACA;EACA,WAAW,KAAK;EAChB,UAAU,KAAK;EACf;EACA;EACA;EACA;EACA;CACF;AACF"}
+{"version":3,"file":"use-tooltip.mjs","names":["useId"],"sources":["../../../src/components/Tooltip/use-tooltip.ts"],"sourcesContent":["import { use, useCallback, useRef, useState } from 'react';\nimport {\n  arrow,\n  autoUpdate,\n  flip,\n  hide,\n  inline,\n  offset,\n  safePolygon,\n  shift,\n  useDelayGroup,\n  useDismiss,\n  useFloating,\n  useFocus,\n  useHover,\n  useInteractions,\n  useRole,\n  type Middleware,\n} from '@floating-ui/react';\nimport { useId, useIsomorphicEffect } from '@mantine/hooks';\nimport { useMantineEnv } from '../../core';\nimport { FloatingAxesOffsets, FloatingPosition, FloatingStrategy } from '../../utils/Floating';\nimport { type TooltipMiddlewares } from './Tooltip.types';\nimport { TooltipGroupContext } from './TooltipGroup/TooltipGroup';\n\ninterface UseTooltip {\n  position: FloatingPosition;\n  closeDelay?: number;\n  openDelay?: number;\n  onPositionChange?: (position: FloatingPosition) => void;\n  opened?: boolean;\n  defaultOpened?: boolean;\n  offset: number | FloatingAxesOffsets;\n  arrowRef?: React.RefObject<HTMLDivElement | null>;\n  arrowOffset?: number;\n  events?: { hover: boolean; focus: boolean; touch: boolean };\n  interactive?: boolean;\n  inline?: boolean;\n  strategy?: FloatingStrategy;\n  middlewares?: TooltipMiddlewares;\n  hideDetached?: boolean;\n}\n\nfunction getDefaultMiddlewares(middlewares: TooltipMiddlewares | undefined): TooltipMiddlewares {\n  if (middlewares === undefined) {\n    return { shift: true, flip: true };\n  }\n\n  const result = { ...middlewares };\n  if (middlewares.shift === undefined) {\n    result.shift = true;\n  }\n\n  if (middlewares.flip === undefined) {\n    result.flip = true;\n  }\n\n  return result;\n}\n\nfunction getTooltipMiddlewares(settings: UseTooltip) {\n  const middlewaresOptions = getDefaultMiddlewares(settings.middlewares);\n  const middlewares: Middleware[] = [offset(settings.offset), hide()];\n\n  if (middlewaresOptions.shift) {\n    middlewares.push(\n      shift(\n        typeof middlewaresOptions.shift === 'boolean'\n          ? { padding: 8 }\n          : { padding: 8, ...middlewaresOptions.shift }\n      )\n    );\n  }\n\n  if (middlewaresOptions.flip) {\n    middlewares.push(\n      typeof middlewaresOptions.flip === 'boolean' ? flip() : flip(middlewaresOptions.flip)\n    );\n  }\n\n  middlewares.push(arrow({ element: settings.arrowRef!, padding: settings.arrowOffset }));\n\n  if (middlewaresOptions.inline) {\n    middlewares.push(\n      typeof middlewaresOptions.inline === 'boolean' ? inline() : inline(middlewaresOptions.inline)\n    );\n  } else if (settings.inline) {\n    middlewares.push(inline());\n  }\n\n  return middlewares;\n}\n\nexport function useTooltip(settings: UseTooltip) {\n  const [uncontrolledOpened, setUncontrolledOpened] = useState(settings.defaultOpened);\n  const controlled = typeof settings.opened === 'boolean';\n  const opened = controlled ? settings.opened : uncontrolledOpened;\n  const withinGroup = use(TooltipGroupContext).withinGroup;\n  const uid = useId();\n  const env = useMantineEnv();\n\n  const onChange = useCallback(\n    (_opened: boolean) => {\n      setUncontrolledOpened(_opened);\n\n      if (_opened) {\n        setCurrentId(uid);\n      }\n    },\n    [uid]\n  );\n\n  const {\n    x,\n    y,\n    context,\n    refs,\n    placement,\n    middlewareData: { arrow: { x: arrowX, y: arrowY } = {}, hide: hideData },\n  } = useFloating({\n    strategy: settings.strategy,\n    placement: settings.position,\n    open: opened,\n    onOpenChange: onChange,\n    middleware: getTooltipMiddlewares(settings),\n    whileElementsMounted: autoUpdate,\n  });\n\n  const { delay: groupDelay, currentId, setCurrentId } = useDelayGroup(context, { id: uid });\n\n  const { getReferenceProps, getFloatingProps } = useInteractions([\n    useHover(context, {\n      enabled: settings.events?.hover,\n      delay: withinGroup ? groupDelay : { open: settings.openDelay, close: settings.closeDelay },\n      mouseOnly: !settings.events?.touch,\n      handleClose: settings.interactive ? safePolygon() : null,\n    }),\n    useFocus(context, { enabled: settings.events?.focus, visibleOnly: true }),\n    useRole(context, { role: 'tooltip' }),\n    // Cannot be used with controlled tooltip, page jumps\n    useDismiss(context, { enabled: typeof settings.opened === 'undefined' }),\n  ]);\n\n  const previousPlacementRef = useRef(placement);\n  useIsomorphicEffect(() => {\n    if (previousPlacementRef.current !== placement) {\n      previousPlacementRef.current = placement;\n      settings.onPositionChange?.(placement);\n    }\n  }, [placement]);\n\n  const isGroupPhase = opened && currentId && currentId !== uid;\n\n  return {\n    x,\n    y,\n    arrowX,\n    arrowY,\n    reference: refs.setReference,\n    floating: refs.setFloating,\n    getFloatingProps,\n    getReferenceProps,\n    isGroupPhase,\n    opened,\n    placement,\n    referenceHidden: settings.hideDetached && env !== 'test' ? hideData?.referenceHidden : false,\n  };\n}\n"],"mappings":";;;;;;;AA2CA,SAAS,sBAAsB,aAAiE;CAC9F,IAAI,gBAAgB,KAAA,GAClB,OAAO;EAAE,OAAO;EAAM,MAAM;CAAK;CAGnC,MAAM,SAAS,EAAE,GAAG,YAAY;CAChC,IAAI,YAAY,UAAU,KAAA,GACxB,OAAO,QAAQ;CAGjB,IAAI,YAAY,SAAS,KAAA,GACvB,OAAO,OAAO;CAGhB,OAAO;AACT;AAEA,SAAS,sBAAsB,UAAsB;CACnD,MAAM,qBAAqB,sBAAsB,SAAS,WAAW;CACrE,MAAM,cAA4B,CAAC,OAAO,SAAS,MAAM,GAAG,KAAK,CAAC;CAElE,IAAI,mBAAmB,OACrB,YAAY,KACV,MACE,OAAO,mBAAmB,UAAU,YAChC,EAAE,SAAS,EAAE,IACb;EAAE,SAAS;EAAG,GAAG,mBAAmB;CAAM,CAChD,CACF;CAGF,IAAI,mBAAmB,MACrB,YAAY,KACV,OAAO,mBAAmB,SAAS,YAAY,KAAK,IAAI,KAAK,mBAAmB,IAAI,CACtF;CAGF,YAAY,KAAK,MAAM;EAAE,SAAS,SAAS;EAAW,SAAS,SAAS;CAAY,CAAC,CAAC;CAEtF,IAAI,mBAAmB,QACrB,YAAY,KACV,OAAO,mBAAmB,WAAW,YAAY,OAAO,IAAI,OAAO,mBAAmB,MAAM,CAC9F;MACK,IAAI,SAAS,QAClB,YAAY,KAAK,OAAO,CAAC;CAG3B,OAAO;AACT;AAEA,SAAgB,WAAW,UAAsB;CAC/C,MAAM,CAAC,oBAAoB,yBAAyB,SAAS,SAAS,aAAa;CAEnF,MAAM,SADa,OAAO,SAAS,WAAW,YAClB,SAAS,SAAS;CAC9C,MAAM,cAAc,IAAI,mBAAmB,CAAC,CAAC;CAC7C,MAAM,MAAMA,QAAM;CAClB,MAAM,MAAM,cAAc;CAE1B,MAAM,WAAW,aACd,YAAqB;EACpB,sBAAsB,OAAO;EAE7B,IAAI,SACF,aAAa,GAAG;CAEpB,GACA,CAAC,GAAG,CACN;CAEA,MAAM,EACJ,GACA,GACA,SACA,MACA,WACA,gBAAgB,EAAE,OAAO,EAAE,GAAG,QAAQ,GAAG,WAAW,CAAC,GAAG,MAAM,eAC5D,YAAY;EACd,UAAU,SAAS;EACnB,WAAW,SAAS;EACpB,MAAM;EACN,cAAc;EACd,YAAY,sBAAsB,QAAQ;EAC1C,sBAAsB;CACxB,CAAC;CAED,MAAM,EAAE,OAAO,YAAY,WAAW,iBAAiB,cAAc,SAAS,EAAE,IAAI,IAAI,CAAC;CAEzF,MAAM,EAAE,mBAAmB,qBAAqB,gBAAgB;EAC9D,SAAS,SAAS;GAChB,SAAS,SAAS,QAAQ;GAC1B,OAAO,cAAc,aAAa;IAAE,MAAM,SAAS;IAAW,OAAO,SAAS;GAAW;GACzF,WAAW,CAAC,SAAS,QAAQ;GAC7B,aAAa,SAAS,cAAc,YAAY,IAAI;EACtD,CAAC;EACD,SAAS,SAAS;GAAE,SAAS,SAAS,QAAQ;GAAO,aAAa;EAAK,CAAC;EACxE,QAAQ,SAAS,EAAE,MAAM,UAAU,CAAC;EAEpC,WAAW,SAAS,EAAE,SAAS,OAAO,SAAS,WAAW,YAAY,CAAC;CACzE,CAAC;CAED,MAAM,uBAAuB,OAAO,SAAS;CAC7C,0BAA0B;EACxB,IAAI,qBAAqB,YAAY,WAAW;GAC9C,qBAAqB,UAAU;GAC/B,SAAS,mBAAmB,SAAS;EACvC;CACF,GAAG,CAAC,SAAS,CAAC;CAEd,MAAM,eAAe,UAAU,aAAa,cAAc;CAE1D,OAAO;EACL;EACA;EACA;EACA;EACA,WAAW,KAAK;EAChB,UAAU,KAAK;EACf;EACA;EACA;EACA;EACA;EACA,iBAAiB,SAAS,gBAAgB,QAAQ,SAAS,UAAU,kBAAkB;CACzF;AACF"}

package/esm/components/Tour/Tour.context.mjs

@@ -0,0 +1,22 @@
+"use client";
+import { createContext, use } from "react";
+//#region packages/@mantine/core/src/components/Tour/Tour.context.ts
+const defaultLabels = {
+	skip: "Skip",
+	back: "Back",
+	next: "Next",
+	close: "Close",
+	stepCounter: (current, total) => `${current} of ${total}`,
+	beacon: "Start tour"
+};
+const TourContext = createContext(null);
+function useTourContext() {
+	const ctx = use(TourContext);
+	if (ctx === null) throw new Error("Tour component was not found in tree");
+	return ctx;
+}
+const TourProvider = TourContext.Provider;
+//#endregion
+export { TourContext, TourProvider, defaultLabels, useTourContext };
+
+//# sourceMappingURL=Tour.context.mjs.map

package/esm/components/Tour/Tour.context.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tour.context.mjs","names":[],"sources":["../../../src/components/Tour/Tour.context.ts"],"sourcesContent":["import { createContext, use } from 'react';\nimport type { GetStylesApi, MantineColor } from '../../core';\nimport type { TransitionOverride } from '../Transition';\nimport type { TourFactory } from './Tour';\nimport type { TourRootFactory } from './TourRoot/TourRoot';\n\nexport interface TourLabels {\n  /** Label for the skip button @default \"Skip\" */\n  skip: string;\n\n  /** Label for the back button @default \"Back\" */\n  back: string;\n\n  /** Label for the next button @default \"Next\" */\n  next: string;\n\n  /** Label for the close/finish button @default \"Close\" */\n  close: string;\n\n  /** Function that returns step counter text @default (current, total) => `${current} of ${total}` */\n  stepCounter: (current: number, total: number) => string;\n\n  /** Label for the beacon button, the step title is appended when it is a string @default \"Start tour\" */\n  beacon: string;\n}\n\nexport const defaultLabels: TourLabels = {\n  skip: 'Skip',\n  back: 'Back',\n  next: 'Next',\n  close: 'Close',\n  stepCounter: (current, total) => `${current} of ${total}`,\n  beacon: 'Start tour',\n};\n\nexport interface TourContextValue {\n  /** Returns styles for the given selector */\n  getStyles: GetStylesApi<TourFactory & TourRootFactory>;\n\n  /** Current active step index */\n  step: number;\n\n  /** Sets the active step index */\n  setStep: (step: number) => void;\n\n  /** Total number of steps */\n  stepsCount: number;\n\n  /** Closes the tour */\n  close: () => void;\n\n  /** Whether `Tour.Overlay` is rendered */\n  withOverlay: boolean;\n\n  /** Whether pointer events pass through the spotlight cutout to the target element */\n  withOverlayInteraction: boolean;\n\n  /** Whether `Tour.CloseButton` is rendered */\n  withCloseButton: boolean;\n\n  /** Key of `theme.colors` or any valid CSS color passed to `Tour.Navigation` next button */\n  color?: MantineColor;\n\n  /** Padding around the spotlight cutout in px */\n  spotlightPadding: number;\n\n  /** Border radius of the spotlight cutout in px */\n  spotlightRadius: number;\n\n  /** Whether clicking the overlay closes the tour */\n  closeOnOverlayClick: boolean;\n\n  /** Default transition props of `Tour.Tooltip` */\n  transitionProps: TransitionOverride | undefined;\n\n  /** Labels for tour UI elements */\n  labels: TourLabels;\n\n  /** Id of the mounted `Tour.Title` (or the generated fallback), referenced by the tooltip `aria-labelledby` */\n  titleId: string;\n\n  /** Id of the mounted `Tour.Body` (or the generated fallback), referenced by the tooltip `aria-describedby` */\n  bodyId: string;\n\n  /** Whether `Tour.Title` is currently mounted */\n  titleMounted: boolean;\n\n  /** Whether `Tour.Body` is currently mounted */\n  bodyMounted: boolean;\n\n  /** Registers the id of the mounted `Tour.Title`, `null` when it unmounts */\n  registerTitle: (id: string | null) => void;\n\n  /** Registers the id of the mounted `Tour.Body`, `null` when it unmounts */\n  registerBody: (id: string | null) => void;\n\n  /** Registers the current step target element, used to skip arrow hotkeys fired from inside it */\n  setTargetElement: (element: HTMLElement | null) => void;\n}\n\nexport const TourContext = createContext<TourContextValue | null>(null);\n\nexport function useTourContext() {\n  const ctx = use(TourContext);\n\n  if (ctx === null) {\n    throw new Error('Tour component was not found in tree');\n  }\n\n  return ctx;\n}\n\nexport const TourProvider = TourContext.Provider;\n"],"mappings":";;;AA0BA,MAAa,gBAA4B;CACvC,MAAM;CACN,MAAM;CACN,MAAM;CACN,OAAO;CACP,cAAc,SAAS,UAAU,GAAG,QAAQ,MAAM;CAClD,QAAQ;AACV;AAmEA,MAAa,cAAc,cAAuC,IAAI;AAEtE,SAAgB,iBAAiB;CAC/B,MAAM,MAAM,IAAI,WAAW;CAE3B,IAAI,QAAQ,MACV,MAAM,IAAI,MAAM,sCAAsC;CAGxD,OAAO;AACT;AAEA,MAAa,eAAe,YAAY"}

package/esm/components/Tour/Tour.mjs

@@ -0,0 +1,283 @@
+"use client";
+import { getShadow } from "../../core/utils/get-size/get-size.mjs";
+import { createVarsResolver } from "../../core/styles-api/create-vars-resolver/create-vars-resolver.mjs";
+import { getThemeColor } from "../../core/MantineProvider/color-functions/get-theme-color/get-theme-color.mjs";
+import { useProps } from "../../core/MantineProvider/use-props/use-props.mjs";
+import { useStyles } from "../../core/styles-api/use-styles/use-styles.mjs";
+import { factory } from "../../core/factory/factory.mjs";
+import { Box } from "../../core/Box/Box.mjs";
+import { OptionalPortal } from "../Portal/OptionalPortal.mjs";
+import { Transition } from "../Transition/Transition.mjs";
+import { FocusTrap } from "../FocusTrap/FocusTrap.mjs";
+import { getOverlayHitPath } from "./get-overlay-hit-path.mjs";
+import { TourProvider, defaultLabels } from "./Tour.context.mjs";
+import Tour_module_default from "./Tour.module.mjs";
+import { TourBeacon } from "./TourBeacon/TourBeacon.mjs";
+import { TourBeaconPositioned } from "./TourBeaconPositioned.mjs";
+import { TourBody } from "./TourBody/TourBody.mjs";
+import { TourCloseButton } from "./TourCloseButton/TourCloseButton.mjs";
+import { TourNavigation } from "./TourNavigation/TourNavigation.mjs";
+import { TourOverlay } from "./TourOverlay/TourOverlay.mjs";
+import { TourRoot } from "./TourRoot/TourRoot.mjs";
+import { TourStep } from "./TourStep/TourStep.mjs";
+import { TourTitle } from "./TourTitle/TourTitle.mjs";
+import { useTooltipAutoFocus } from "./use-tooltip-auto-focus.mjs";
+import { TourTooltip } from "./TourTooltip/TourTooltip.mjs";
+import { useTour } from "./use-tour.mjs";
+import { useEffect, useId, useRef, useState } from "react";
+import { useMergedRef } from "@mantine/hooks";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/@mantine/core/src/components/Tour/Tour.tsx
+const defaultProps = {
+	active: false,
+	mode: "guided",
+	withOverlay: true,
+	withOverlayInteraction: false,
+	withCloseButton: true,
+	withKeyboardNavigation: true,
+	withScrollIntoView: true,
+	spotlightPadding: 8,
+	closeOnEscape: true,
+	closeOnOverlayClick: false,
+	withinPortal: true,
+	zIndex: 1e4,
+	transitionProps: {
+		duration: 200,
+		transition: "pop"
+	},
+	maxWidth: 360,
+	stepTransitionDuration: 300,
+	overlayColor: "rgba(0, 0, 0, 0.5)"
+};
+const varsResolver = createVarsResolver((theme, { zIndex, overlayColor, tooltipShadow, color }) => ({ root: {
+	"--tour-color": color ? getThemeColor(color, theme) : void 0,
+	"--tour-z-index": zIndex?.toString(),
+	"--tour-overlay-color": overlayColor,
+	"--tour-tooltip-radius": void 0,
+	"--tour-tooltip-shadow": getShadow(tooltipShadow),
+	"--tour-beacon-size": void 0,
+	"--tour-beacon-color": void 0
+} }));
+const noop = () => {};
+function getBeaconLabel(label, title) {
+	return typeof title === "string" || typeof title === "number" ? `${label}: ${title}` : label;
+}
+const Tour = factory((_props) => {
+	const props = useProps("Tour", defaultProps, _props);
+	const { classNames, className, style, styles, unstyled, vars, active, onClose, step: stepProp, defaultStep, onStepChange, onStepOpen, onStepClose, mode, withOverlay, withOverlayInteraction, withCloseButton, withKeyboardNavigation, withScrollIntoView, scrollToHandler, spotlightPadding, spotlightRadius, closeOnEscape, closeOnOverlayClick, labels: labelsProp, withinPortal, portalProps, zIndex, transitionProps, stepTransitionDuration, maxWidth, overlayColor, tooltipShadow, color, children, attributes, ...others } = props;
+	const labels = {
+		...defaultLabels,
+		...labelsProp
+	};
+	const spotlightPaddingValue = spotlightPadding;
+	const id = useId();
+	const maskId = `${id}-mask`;
+	const [registeredTitleId, registerTitle] = useState(null);
+	const [registeredBodyId, registerBody] = useState(null);
+	const titleId = registeredTitleId ?? `${id}-title`;
+	const bodyId = registeredBodyId ?? `${id}-body`;
+	const titleMounted = registeredTitleId !== null;
+	const bodyMounted = registeredBodyId !== null;
+	const beaconToFocusRef = useRef(null);
+	const { steps, setStep, beaconOpenStep, openBeaconStep, close, displayStep, displayStepIndex, targetRect, floatingStyles, floatingRefs, isCentered, constrainedWidth, stepMoving, showTooltip, clearExitedTarget } = useTour({
+		active,
+		onClose,
+		step: stepProp,
+		defaultStep,
+		onStepChange,
+		onStepOpen,
+		onStepClose,
+		mode,
+		withKeyboardNavigation,
+		withScrollIntoView,
+		scrollToHandler,
+		closeOnEscape,
+		maxWidth,
+		stepTransitionDuration,
+		children,
+		stepComponent: TourStep
+	});
+	useEffect(() => {
+		if (!active) beaconToFocusRef.current = null;
+	}, [active]);
+	const resolvedSpotlightPadding = displayStep?.spotlightPadding ?? spotlightPaddingValue;
+	const resolvedSpotlightRadius = displayStep?.spotlightRadius ?? spotlightRadius ?? 4;
+	const resolvedWithOverlay = displayStep?.withOverlay ?? withOverlay;
+	const focusTrapActive = showTooltip && mode === "guided" && !!resolvedWithOverlay && !withOverlayInteraction;
+	const autoFocusRef = useTooltipAutoFocus({
+		autoFocus: showTooltip && !focusTrapActive,
+		opened: showTooltip,
+		step: displayStepIndex
+	});
+	const tooltipMergedRef = useMergedRef(floatingRefs.setFloating, autoFocusRef);
+	const getStyles = useStyles({
+		name: "Tour",
+		classes: Tour_module_default,
+		props,
+		className,
+		style,
+		classNames,
+		styles,
+		unstyled,
+		attributes,
+		vars,
+		varsResolver
+	});
+	return /* @__PURE__ */ jsx(TourProvider, {
+		value: {
+			getStyles,
+			step: displayStepIndex,
+			setStep,
+			stepsCount: steps.length,
+			close,
+			withOverlay: !!resolvedWithOverlay,
+			withOverlayInteraction,
+			withCloseButton,
+			spotlightPadding: resolvedSpotlightPadding,
+			spotlightRadius: resolvedSpotlightRadius,
+			closeOnOverlayClick,
+			transitionProps,
+			color,
+			labels,
+			titleId,
+			bodyId,
+			titleMounted,
+			bodyMounted,
+			registerTitle,
+			registerBody,
+			setTargetElement: noop
+		},
+		children: /* @__PURE__ */ jsx(OptionalPortal, {
+			...portalProps,
+			withinPortal,
+			children: /* @__PURE__ */ jsxs(Box, {
+				...getStyles("root"),
+				...others,
+				children: [
+					resolvedWithOverlay && /* @__PURE__ */ jsx(Transition, {
+						mounted: showTooltip,
+						duration: transitionProps?.duration ?? 200,
+						transition: "fade",
+						children: (overlayStyles) => /* @__PURE__ */ jsxs("svg", {
+							...getStyles("overlay"),
+							role: "presentation",
+							width: "100%",
+							height: "100%",
+							style: overlayStyles,
+							"data-with-overlay-interaction": withOverlayInteraction || void 0,
+							onMouseDown: (event) => event.preventDefault(),
+							onClick: () => {
+								if (closeOnOverlayClick) close();
+							},
+							children: [
+								/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("mask", {
+									id: maskId,
+									children: [/* @__PURE__ */ jsx("rect", {
+										x: "0",
+										y: "0",
+										width: "100%",
+										height: "100%",
+										fill: "white"
+									}), targetRect && /* @__PURE__ */ jsx("rect", {
+										x: targetRect.left - resolvedSpotlightPadding,
+										y: targetRect.top - resolvedSpotlightPadding,
+										width: targetRect.width + resolvedSpotlightPadding * 2,
+										height: targetRect.height + resolvedSpotlightPadding * 2,
+										rx: resolvedSpotlightRadius,
+										ry: resolvedSpotlightRadius,
+										fill: "black",
+										...getStyles("spotlight", { style: stepMoving ? { transition: "all 150ms ease" } : void 0 })
+									})]
+								}) }),
+								/* @__PURE__ */ jsx("rect", {
+									x: "0",
+									y: "0",
+									width: "100%",
+									height: "100%",
+									style: { fill: "var(--tour-overlay-color)" },
+									mask: `url(#${maskId})`
+								}),
+								withOverlayInteraction && /* @__PURE__ */ jsx("path", {
+									d: getOverlayHitPath(targetRect, resolvedSpotlightPadding, resolvedSpotlightRadius),
+									fillRule: "evenodd",
+									fill: "transparent",
+									style: { pointerEvents: "auto" }
+								})
+							]
+						})
+					}),
+					active && mode === "beacon" && beaconOpenStep === null && steps.map((stepData, index) => {
+						if (stepData.withBeacon === false) return null;
+						return /* @__PURE__ */ jsx(TourBeaconPositioned, {
+							target: stepData.target,
+							onClick: () => {
+								beaconToFocusRef.current = index;
+								openBeaconStep(index);
+							},
+							ariaLabel: getBeaconLabel(labels.beacon, stepData.title),
+							withInitialFocus: beaconToFocusRef.current === index,
+							onInitialFocus: () => {
+								beaconToFocusRef.current = null;
+							},
+							pulseStyles: getStyles("beaconPulse"),
+							...getStyles("beacon")
+						}, index);
+					}),
+					/* @__PURE__ */ jsx(Transition, {
+						mounted: showTooltip && !!displayStep,
+						duration: transitionProps?.duration ?? 200,
+						transition: transitionProps?.transition ?? "pop",
+						onExited: clearExitedTarget,
+						timingFunction: transitionProps?.timingFunction,
+						children: ({ transitionProperty, transitionDuration, transitionTimingFunction, ...transitionStyles }) => /* @__PURE__ */ jsx(FocusTrap, {
+							active: focusTrapActive,
+							innerRef: tooltipMergedRef,
+							children: /* @__PURE__ */ jsxs(Box, {
+								...getStyles("tooltip"),
+								role: "dialog",
+								tabIndex: -1,
+								"aria-labelledby": titleMounted ? titleId : void 0,
+								"aria-label": titleMounted ? void 0 : labels.stepCounter(displayStepIndex + 1, steps.length),
+								"aria-describedby": bodyMounted ? bodyId : void 0,
+								"data-centered": isCentered || void 0,
+								style: {
+									...getStyles("tooltip").style,
+									...isCentered ? {} : floatingStyles,
+									...transitionStyles,
+									width: isCentered ? maxWidth : constrainedWidth,
+									transition: [...transitionProperty ? transitionProperty.split(",").map((prop) => `${prop.trim()} ${transitionDuration} ${transitionTimingFunction || "ease"}`) : [], ...stepMoving ? [
+										"top",
+										"left",
+										"translate"
+									].map((prop) => `${prop} ${stepTransitionDuration}ms cubic-bezier(0.16, 1, 0.3, 1)`) : []].join(", ")
+								},
+								children: [
+									focusTrapActive && /* @__PURE__ */ jsx(FocusTrap.InitialFocus, {}),
+									withCloseButton && /* @__PURE__ */ jsx(TourCloseButton, {}),
+									displayStep?.title && /* @__PURE__ */ jsx(TourTitle, { children: displayStep.title }),
+									displayStep?.children && /* @__PURE__ */ jsx(TourBody, { children: displayStep.children }),
+									/* @__PURE__ */ jsx(TourNavigation, {})
+								]
+							})
+						})
+					})
+				]
+			})
+		})
+	});
+});
+Tour.classes = Tour_module_default;
+Tour.displayName = "@mantine/core/Tour";
+Tour.Root = TourRoot;
+Tour.Step = TourStep;
+Tour.Overlay = TourOverlay;
+Tour.Tooltip = TourTooltip;
+Tour.Title = TourTitle;
+Tour.Body = TourBody;
+Tour.CloseButton = TourCloseButton;
+Tour.Navigation = TourNavigation;
+Tour.Beacon = TourBeacon;
+//#endregion
+export { Tour };
+
+//# sourceMappingURL=Tour.mjs.map

package/esm/components/Tour/Tour.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tour.mjs","names":["classes"],"sources":["../../../src/components/Tour/Tour.tsx"],"sourcesContent":["import { useEffect, useId, useRef, useState } from 'react';\nimport { useMergedRef } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getShadow,\n  getThemeColor,\n  MantineColor,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { FocusTrap } from '../FocusTrap';\nimport { OptionalPortal, type PortalProps } from '../Portal';\nimport { Transition, type TransitionOverride } from '../Transition';\nimport { getOverlayHitPath } from './get-overlay-hit-path';\nimport { defaultLabels, TourLabels, TourProvider } from './Tour.context';\nimport { TourBeacon, type TourBeaconProps } from './TourBeacon/TourBeacon';\nimport { TourBeaconPositioned } from './TourBeaconPositioned';\nimport { TourBody, type TourBodyProps } from './TourBody/TourBody';\nimport { TourCloseButton, type TourCloseButtonProps } from './TourCloseButton/TourCloseButton';\nimport { TourNavigation, type TourNavigationProps } from './TourNavigation/TourNavigation';\nimport { TourOverlay, type TourOverlayProps } from './TourOverlay/TourOverlay';\nimport { TourRoot, type TourRootProps } from './TourRoot/TourRoot';\nimport { TourStep, type TourStepProps } from './TourStep/TourStep';\nimport { TourTitle, type TourTitleProps } from './TourTitle/TourTitle';\nimport { TourTooltip, type TourTooltipProps } from './TourTooltip/TourTooltip';\nimport { useTooltipAutoFocus } from './use-tooltip-auto-focus';\nimport { useTour } from './use-tour';\nimport classes from './Tour.module.css';\n\nexport type TourStylesNames =\n  | 'root'\n  | 'overlay'\n  | 'spotlight'\n  | 'tooltip'\n  | 'title'\n  | 'body'\n  | 'navigation'\n  | 'closeButton'\n  | 'stepCounter'\n  | 'beacon'\n  | 'beaconPulse'\n  | 'navigationButton';\n\nexport type TourCssVariables = {\n  root:\n    | '--tour-z-index'\n    | '--tour-overlay-color'\n    | '--tour-tooltip-radius'\n    | '--tour-tooltip-shadow'\n    | '--tour-beacon-size'\n    | '--tour-beacon-color'\n    | '--tour-color';\n};\n\nexport interface TourProps extends BoxProps, StylesApiProps<TourFactory>, ElementProps<'div'> {\n  /** Whether the tour is active @default false */\n  active?: boolean;\n\n  /** Called when the tour is closed */\n  onClose?: () => void;\n\n  /** Controlled current step index */\n  step?: number;\n\n  /** Uncontrolled default step index @default 0 */\n  defaultStep?: number;\n\n  /** Called when step changes */\n  onStepChange?: (step: number) => void;\n\n  /** Called when a step opens */\n  onStepOpen?: (step: number) => void;\n\n  /** Called when a step closes */\n  onStepClose?: (step: number) => void;\n\n  /** Tour mode @default \"guided\" */\n  mode?: 'guided' | 'beacon';\n\n  /** Whether to display the overlay @default true */\n  withOverlay?: boolean;\n\n  /** Whether pointer events pass through the spotlight cutout to the target element, the rest of the overlay keeps blocking clicks @default false */\n  withOverlayInteraction?: boolean;\n\n  /** Whether to display the close button @default true */\n  withCloseButton?: boolean;\n\n  /** Whether keyboard navigation is enabled in guided mode @default true */\n  withKeyboardNavigation?: boolean;\n\n  /** Whether to scroll target elements into view @default true */\n  withScrollIntoView?: boolean;\n\n  /** Custom scroll handler */\n  scrollToHandler?: (element: HTMLElement) => void;\n\n  /** Padding around the spotlight cutout in px @default 8 */\n  spotlightPadding?: number;\n\n  /** Border radius of the spotlight cutout in px @default 4 */\n  spotlightRadius?: number;\n\n  /** Whether pressing Escape closes the tour @default true */\n  closeOnEscape?: boolean;\n\n  /** Whether clicking the overlay closes the tour, with `withOverlayInteraction` only clicks outside the spotlight cutout close it @default false */\n  closeOnOverlayClick?: boolean;\n\n  /** Labels for tour UI elements */\n  labels?: Partial<TourLabels>;\n\n  /** Whether to render inside a portal @default true */\n  withinPortal?: boolean;\n\n  /** Props passed to the Portal component */\n  portalProps?: Omit<PortalProps, 'children'>;\n\n  /** z-index of the tour @default 10000 */\n  zIndex?: string | number;\n\n  /** Transition props for the tooltip @default { duration: 200, transition: 'pop' } */\n  transitionProps?: TransitionOverride;\n\n  /** Duration of the tooltip position transition between steps in ms @default 300 */\n  stepTransitionDuration?: number;\n\n  /** Max width of the tooltip, tooltip always takes this width if viewport allows @default 360 */\n  maxWidth?: number;\n\n  /** Tour step overlay color @default \"rgba(0, 0, 0, 0.5)\" */\n  overlayColor?: string;\n\n  /** Key of `theme.colors` or any valid CSS color, controls beacon color and `Tour.Navigation` next button color @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Key of `theme.shadows` or any valid CSS box-shadow value, controls the tooltip shadow @default 'md' */\n  tooltipShadow?: string;\n\n  /** Tour steps – `Tour.Step` elements must be direct children (arrays are supported, Fragments and wrapper components are not) */\n  children?: React.ReactNode;\n}\n\nexport type TourFactory = Factory<{\n  props: TourProps;\n  ref: HTMLDivElement;\n  stylesNames: TourStylesNames;\n  vars: TourCssVariables;\n  staticComponents: {\n    Root: typeof TourRoot;\n    Step: typeof TourStep;\n    Overlay: typeof TourOverlay;\n    Tooltip: typeof TourTooltip;\n    Title: typeof TourTitle;\n    Body: typeof TourBody;\n    Navigation: typeof TourNavigation;\n    Beacon: typeof TourBeacon;\n    CloseButton: typeof TourCloseButton;\n  };\n}>;\n\nconst defaultProps = {\n  active: false,\n  mode: 'guided',\n  withOverlay: true,\n  withOverlayInteraction: false,\n  withCloseButton: true,\n  withKeyboardNavigation: true,\n  withScrollIntoView: true,\n  spotlightPadding: 8,\n  closeOnEscape: true,\n  closeOnOverlayClick: false,\n  withinPortal: true,\n  zIndex: 10000,\n  transitionProps: { duration: 200, transition: 'pop' },\n  maxWidth: 360,\n  stepTransitionDuration: 300,\n  overlayColor: 'rgba(0, 0, 0, 0.5)',\n} satisfies Partial<TourProps>;\n\nconst varsResolver = createVarsResolver<TourFactory>(\n  (theme, { zIndex, overlayColor, tooltipShadow, color }) => ({\n    root: {\n      '--tour-color': color ? getThemeColor(color, theme) : undefined,\n      '--tour-z-index': zIndex?.toString(),\n      '--tour-overlay-color': overlayColor,\n      '--tour-tooltip-radius': undefined,\n      '--tour-tooltip-shadow': getShadow(tooltipShadow),\n      '--tour-beacon-size': undefined,\n      '--tour-beacon-color': undefined,\n    },\n  })\n);\n\nconst noop = () => {};\n\nfunction getBeaconLabel(label: string, title: React.ReactNode) {\n  return typeof title === 'string' || typeof title === 'number' ? `${label}: ${title}` : label;\n}\n\nexport const Tour = factory<TourFactory>((_props) => {\n  const props = useProps('Tour', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    active,\n    onClose,\n    step: stepProp,\n    defaultStep,\n    onStepChange,\n    onStepOpen,\n    onStepClose,\n    mode,\n    withOverlay,\n    withOverlayInteraction,\n    withCloseButton,\n    withKeyboardNavigation,\n    withScrollIntoView,\n    scrollToHandler,\n    spotlightPadding,\n    spotlightRadius,\n    closeOnEscape,\n    closeOnOverlayClick,\n    labels: labelsProp,\n    withinPortal,\n    portalProps,\n    zIndex,\n    transitionProps,\n    stepTransitionDuration,\n    maxWidth,\n    overlayColor,\n    tooltipShadow,\n    color,\n    children,\n    attributes,\n    ...others\n  } = props;\n\n  const labels: TourLabels = { ...defaultLabels, ...labelsProp };\n  const spotlightPaddingValue = spotlightPadding!;\n  const id = useId();\n  const maskId = `${id}-mask`;\n  const [registeredTitleId, registerTitle] = useState<string | null>(null);\n  const [registeredBodyId, registerBody] = useState<string | null>(null);\n  const titleId = registeredTitleId ?? `${id}-title`;\n  const bodyId = registeredBodyId ?? `${id}-body`;\n  const titleMounted = registeredTitleId !== null;\n  const bodyMounted = registeredBodyId !== null;\n  const beaconToFocusRef = useRef<number | null>(null);\n\n  const {\n    steps,\n    setStep,\n    beaconOpenStep,\n    openBeaconStep,\n    close,\n    displayStep,\n    displayStepIndex,\n    targetRect,\n    floatingStyles,\n    floatingRefs,\n    isCentered,\n    constrainedWidth,\n    stepMoving,\n    showTooltip,\n    clearExitedTarget,\n  } = useTour({\n    active,\n    onClose,\n    step: stepProp,\n    defaultStep,\n    onStepChange,\n    onStepOpen,\n    onStepClose,\n    mode,\n    withKeyboardNavigation,\n    withScrollIntoView,\n    scrollToHandler,\n    closeOnEscape,\n    maxWidth,\n    stepTransitionDuration,\n    children,\n    stepComponent: TourStep,\n  });\n\n  useEffect(() => {\n    if (!active) {\n      beaconToFocusRef.current = null;\n    }\n  }, [active]);\n\n  const resolvedSpotlightPadding = displayStep?.spotlightPadding ?? spotlightPaddingValue;\n  const resolvedSpotlightRadius = displayStep?.spotlightRadius ?? spotlightRadius ?? 4;\n  const resolvedWithOverlay = displayStep?.withOverlay ?? withOverlay;\n  const focusTrapActive =\n    showTooltip && mode === 'guided' && !!resolvedWithOverlay && !withOverlayInteraction;\n\n  const autoFocusRef = useTooltipAutoFocus({\n    autoFocus: showTooltip && !focusTrapActive,\n    opened: showTooltip,\n    step: displayStepIndex,\n  });\n  const tooltipMergedRef = useMergedRef(floatingRefs.setFloating, autoFocusRef);\n\n  const getStyles = useStyles<TourFactory>({\n    name: 'Tour',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  return (\n    <TourProvider\n      value={{\n        getStyles,\n        step: displayStepIndex,\n        setStep,\n        stepsCount: steps.length,\n        close,\n        withOverlay: !!resolvedWithOverlay,\n        withOverlayInteraction: withOverlayInteraction!,\n        withCloseButton: withCloseButton!,\n        spotlightPadding: resolvedSpotlightPadding,\n        spotlightRadius: resolvedSpotlightRadius,\n        closeOnOverlayClick: closeOnOverlayClick!,\n        transitionProps,\n        color,\n        labels,\n        titleId,\n        bodyId,\n        titleMounted,\n        bodyMounted,\n        registerTitle,\n        registerBody,\n        setTargetElement: noop,\n      }}\n    >\n      <OptionalPortal {...portalProps} withinPortal={withinPortal}>\n        <Box {...getStyles('root')} {...others}>\n          {resolvedWithOverlay && (\n            <Transition\n              mounted={showTooltip}\n              duration={transitionProps?.duration ?? 200}\n              transition=\"fade\"\n            >\n              {(overlayStyles) => (\n                <svg\n                  {...getStyles('overlay')}\n                  role=\"presentation\"\n                  width=\"100%\"\n                  height=\"100%\"\n                  style={overlayStyles}\n                  data-with-overlay-interaction={withOverlayInteraction || undefined}\n                  onMouseDown={(event) => event.preventDefault()}\n                  onClick={() => {\n                    if (closeOnOverlayClick) {\n                      close();\n                    }\n                  }}\n                >\n                  <defs>\n                    <mask id={maskId}>\n                      <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"white\" />\n                      {targetRect && (\n                        <rect\n                          x={targetRect.left - resolvedSpotlightPadding}\n                          y={targetRect.top - resolvedSpotlightPadding}\n                          width={targetRect.width + resolvedSpotlightPadding * 2}\n                          height={targetRect.height + resolvedSpotlightPadding * 2}\n                          rx={resolvedSpotlightRadius}\n                          ry={resolvedSpotlightRadius}\n                          fill=\"black\"\n                          {...getStyles('spotlight', {\n                            style: stepMoving ? { transition: 'all 150ms ease' } : undefined,\n                          })}\n                        />\n                      )}\n                    </mask>\n                  </defs>\n                  <rect\n                    x=\"0\"\n                    y=\"0\"\n                    width=\"100%\"\n                    height=\"100%\"\n                    style={{ fill: 'var(--tour-overlay-color)' }}\n                    mask={`url(#${maskId})`}\n                  />\n                  {withOverlayInteraction && (\n                    <path\n                      d={getOverlayHitPath(\n                        targetRect,\n                        resolvedSpotlightPadding,\n                        resolvedSpotlightRadius\n                      )}\n                      fillRule=\"evenodd\"\n                      fill=\"transparent\"\n                      style={{ pointerEvents: 'auto' }}\n                    />\n                  )}\n                </svg>\n              )}\n            </Transition>\n          )}\n\n          {active &&\n            mode === 'beacon' &&\n            beaconOpenStep === null &&\n            steps.map((stepData, index) => {\n              if (stepData.withBeacon === false) {\n                return null;\n              }\n              return (\n                <TourBeaconPositioned\n                  key={index}\n                  target={stepData.target}\n                  onClick={() => {\n                    beaconToFocusRef.current = index;\n                    openBeaconStep(index);\n                  }}\n                  ariaLabel={getBeaconLabel(labels.beacon, stepData.title)}\n                  withInitialFocus={beaconToFocusRef.current === index}\n                  onInitialFocus={() => {\n                    beaconToFocusRef.current = null;\n                  }}\n                  pulseStyles={getStyles('beaconPulse')}\n                  {...getStyles('beacon')}\n                />\n              );\n            })}\n\n          <Transition\n            mounted={showTooltip && !!displayStep}\n            duration={transitionProps?.duration ?? 200}\n            transition={transitionProps?.transition ?? 'pop'}\n            onExited={clearExitedTarget}\n            timingFunction={transitionProps?.timingFunction}\n          >\n            {({\n              transitionProperty,\n              transitionDuration,\n              transitionTimingFunction,\n              ...transitionStyles\n            }) => (\n              <FocusTrap active={focusTrapActive} innerRef={tooltipMergedRef}>\n                <Box\n                  {...getStyles('tooltip')}\n                  role=\"dialog\"\n                  tabIndex={-1}\n                  aria-labelledby={titleMounted ? titleId : undefined}\n                  aria-label={\n                    titleMounted\n                      ? undefined\n                      : labels.stepCounter(displayStepIndex + 1, steps.length)\n                  }\n                  aria-describedby={bodyMounted ? bodyId : undefined}\n                  data-centered={isCentered || undefined}\n                  style={{\n                    ...getStyles('tooltip').style,\n                    ...(isCentered ? {} : floatingStyles),\n                    ...transitionStyles,\n                    width: isCentered ? maxWidth : constrainedWidth,\n                    transition: [\n                      ...(transitionProperty\n                        ? transitionProperty\n                            .split(',')\n                            .map(\n                              (prop: string) =>\n                                `${prop.trim()} ${transitionDuration} ${transitionTimingFunction || 'ease'}`\n                            )\n                        : []),\n                      ...(stepMoving\n                        ? ['top', 'left', 'translate'].map(\n                            (prop) =>\n                              `${prop} ${stepTransitionDuration}ms cubic-bezier(0.16, 1, 0.3, 1)`\n                          )\n                        : []),\n                    ].join(', '),\n                  }}\n                >\n                  {focusTrapActive && <FocusTrap.InitialFocus />}\n                  {withCloseButton && <TourCloseButton />}\n                  {displayStep?.title && <TourTitle>{displayStep.title}</TourTitle>}\n                  {displayStep?.children && <TourBody>{displayStep.children}</TourBody>}\n                  <TourNavigation />\n                </Box>\n              </FocusTrap>\n            )}\n          </Transition>\n        </Box>\n      </OptionalPortal>\n    </TourProvider>\n  );\n});\n\nTour.classes = classes;\nTour.displayName = '@mantine/core/Tour';\nTour.Root = TourRoot;\nTour.Step = TourStep;\nTour.Overlay = TourOverlay;\nTour.Tooltip = TourTooltip;\nTour.Title = TourTitle;\nTour.Body = TourBody;\nTour.CloseButton = TourCloseButton;\nTour.Navigation = TourNavigation;\nTour.Beacon = TourBeacon;\n\nexport namespace Tour {\n  export type Props = TourProps;\n  export type StylesNames = TourStylesNames;\n  export type CssVariables = TourCssVariables;\n  export type Factory = TourFactory;\n\n  export namespace Root {\n    export type Props = TourRootProps;\n  }\n\n  export namespace Step {\n    export type Props = TourStepProps;\n  }\n\n  export namespace Overlay {\n    export type Props = TourOverlayProps;\n  }\n\n  export namespace Tooltip {\n    export type Props = TourTooltipProps;\n  }\n\n  export namespace Title {\n    export type Props = TourTitleProps;\n  }\n\n  export namespace Body {\n    export type Props = TourBodyProps;\n  }\n\n  export namespace CloseButton {\n    export type Props = TourCloseButtonProps;\n  }\n\n  export namespace Navigation {\n    export type Props = TourNavigationProps;\n  }\n\n  export namespace Beacon {\n    export type Props = TourBeaconProps;\n  }\n}\n"],"mappings":"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"}

package/esm/components/Tour/Tour.module.mjs

@@ -0,0 +1,19 @@
+"use client";
+//#region packages/@mantine/core/src/components/Tour/Tour.module.css
+var Tour_module_default = {
+	"root": "m_23880f17",
+	"overlay": "m_43070dfb",
+	"tooltip": "m_401e99ae",
+	"title": "m_4d935ac3",
+	"body": "m_2380c7d7",
+	"navigation": "m_f5605c89",
+	"closeButton": "m_324c9375",
+	"stepCounter": "m_66c6e5bb",
+	"beacon": "m_45dfa139",
+	"beaconPulse": "m_af9f65e0",
+	"tour-beacon-pulse": "m_b83bf210"
+};
+//#endregion
+export { Tour_module_default as default };
+
+//# sourceMappingURL=Tour.module.mjs.map

package/esm/components/Tour/Tour.module.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tour.module.mjs","names":[],"sources":["../../../src/components/Tour/Tour.module.css"],"sourcesContent":[".root {\n  position: fixed;\n  inset: 0;\n  pointer-events: none;\n  z-index: var(--tour-z-index);\n}\n\n.overlay {\n  position: fixed;\n  inset: 0;\n  pointer-events: auto;\n\n  &:where([data-with-overlay-interaction]) {\n    pointer-events: none;\n  }\n}\n\n.tooltip {\n  position: absolute;\n  pointer-events: auto;\n  padding: var(--mantine-spacing-md);\n  border-radius: var(--tour-tooltip-radius, var(--mantine-radius-default));\n  box-shadow: var(--tour-tooltip-shadow, var(--mantine-shadow-md));\n  z-index: 1;\n  box-sizing: border-box;\n\n  @mixin where-light {\n    background-color: var(--mantine-color-white);\n    border: 1px solid var(--mantine-color-gray-3);\n  }\n\n  @mixin where-dark {\n    background-color: var(--mantine-color-dark-7);\n    border: 1px solid var(--mantine-color-dark-4);\n  }\n\n  &:where([data-centered]) {\n    position: fixed;\n    top: 50%;\n    left: 50%;\n    translate: -50% -50%;\n    max-width: calc(100% - 16px);\n  }\n}\n\n.title {\n  margin: 0;\n  font-weight: 600;\n  font-size: var(--mantine-font-size-md);\n  line-height: 1.4;\n  margin-bottom: var(--mantine-spacing-xs);\n}\n\n.body {\n  font-size: var(--mantine-font-size-sm);\n  line-height: 1.55;\n}\n\n.navigation {\n  margin-top: var(--mantine-spacing-md);\n}\n\n.closeButton {\n  position: absolute;\n  top: var(--mantine-spacing-xs);\n  right: var(--mantine-spacing-xs);\n\n  /* stylelint-disable-next-line selector-type-no-unknown */\n  :where([dir='rtl']) & {\n    right: auto;\n    left: var(--mantine-spacing-xs);\n  }\n}\n\n.stepCounter {\n  font-size: var(--mantine-font-size-sm);\n\n  @mixin where-light {\n    color: var(--mantine-color-gray-6);\n  }\n\n  @mixin where-dark {\n    color: var(--mantine-color-dark-2);\n  }\n}\n\n.beacon {\n  position: absolute;\n  pointer-events: auto;\n  width: var(--tour-beacon-size, 12px);\n  height: var(--tour-beacon-size, 12px);\n  border-radius: 50%;\n  background-color: var(\n    --tour-beacon-color,\n    var(--tour-color, var(--mantine-primary-color-filled))\n  );\n  border: 0;\n  padding: 0;\n  cursor: pointer;\n  z-index: 1;\n}\n\n.beaconPulse {\n  position: absolute;\n  inset: calc(var(--tour-beacon-size, 12px) * -0.35);\n  border-radius: 50%;\n  background-color: var(\n    --tour-beacon-color,\n    var(--tour-color, var(--mantine-primary-color-filled))\n  );\n  opacity: 0.3;\n  animation: tour-beacon-pulse 1.5s ease-in-out infinite;\n}\n\n@keyframes tour-beacon-pulse {\n  0%,\n  100% {\n    transform: scale(0.8);\n    opacity: 0.3;\n  }\n\n  50% {\n    transform: scale(1);\n    opacity: 0;\n  }\n}\n"],"mappings":""}

package/esm/components/Tour/TourBeacon/TourBeacon.mjs

@@ -0,0 +1,54 @@
+"use client";
+import { useProps } from "../../../core/MantineProvider/use-props/use-props.mjs";
+import { factory } from "../../../core/factory/factory.mjs";
+import { useDirection } from "../../../core/DirectionProvider/DirectionProvider.mjs";
+import { UnstyledButton } from "../../UnstyledButton/UnstyledButton.mjs";
+import { getFloatingPosition } from "../../../utils/Floating/get-floating-position/get-floating-position.mjs";
+import { useTourContext } from "../Tour.context.mjs";
+import { pressAwareAutoUpdate } from "../press-aware-auto-update.mjs";
+import { useTargetElement } from "../use-target-rect.mjs";
+import Tour_module_default from "../Tour.module.mjs";
+import { useMergedRef } from "@mantine/hooks";
+import { jsx } from "react/jsx-runtime";
+import { offset, useFloating } from "@floating-ui/react";
+//#region packages/@mantine/core/src/components/Tour/TourBeacon/TourBeacon.tsx
+const defaultProps = {};
+const TourBeacon = factory((_props) => {
+	const { classNames, className, style, styles, vars, target, onClick, ref, role: _role, "aria-label": ariaLabel, ...others } = useProps("TourBeacon", defaultProps, _props);
+	const ctx = useTourContext();
+	const { dir } = useDirection();
+	const element = useTargetElement(target);
+	const { refs, floatingStyles } = useFloating({
+		elements: { reference: element },
+		placement: getFloatingPosition(dir, "right-start"),
+		whileElementsMounted: pressAwareAutoUpdate,
+		middleware: [offset(8)]
+	});
+	const mergedRef = useMergedRef(refs.setFloating, ref);
+	const beaconStyles = ctx.getStyles("beacon", {
+		className,
+		classNames,
+		style,
+		styles
+	});
+	if (!element) return null;
+	return /* @__PURE__ */ jsx(UnstyledButton, {
+		ref: mergedRef,
+		role: "button",
+		"aria-label": ariaLabel || ctx.labels.beacon,
+		...beaconStyles,
+		style: {
+			...beaconStyles.style,
+			...floatingStyles
+		},
+		onClick,
+		...others,
+		children: /* @__PURE__ */ jsx("span", { ...ctx.getStyles("beaconPulse") })
+	});
+});
+TourBeacon.classes = Tour_module_default;
+TourBeacon.displayName = "@mantine/core/TourBeacon";
+//#endregion
+export { TourBeacon };
+
+//# sourceMappingURL=TourBeacon.mjs.map

package/esm/components/Tour/TourBeacon/TourBeacon.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TourBeacon.mjs","names":["classes"],"sources":["../../../../src/components/Tour/TourBeacon/TourBeacon.tsx"],"sourcesContent":["import { offset, useFloating } from '@floating-ui/react';\nimport { useMergedRef } from '@mantine/hooks';\nimport {\n  BoxProps,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  useDirection,\n  useProps,\n} from '../../../core';\nimport { getFloatingPosition } from '../../../utils/Floating';\nimport { UnstyledButton } from '../../UnstyledButton';\nimport { pressAwareAutoUpdate } from '../press-aware-auto-update';\nimport { useTourContext } from '../Tour.context';\nimport { useTargetElement } from '../use-target-rect';\nimport classes from '../Tour.module.css';\n\nexport type TourBeaconStylesNames = 'beacon' | 'beaconPulse';\n\nexport interface TourBeaconProps\n  extends BoxProps, CompoundStylesApiProps<TourBeaconFactory>, ElementProps<'button'> {\n  /** CSS selector or ref to the target element */\n  target?: string | React.RefObject<HTMLElement | null>;\n\n  /** Called when the beacon is clicked */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\n}\n\nexport type TourBeaconFactory = Factory<{\n  props: TourBeaconProps;\n  ref: HTMLButtonElement;\n  stylesNames: TourBeaconStylesNames;\n  compound: true;\n}>;\n\nconst defaultProps: Partial<TourBeaconProps> = {};\n\nexport const TourBeacon = factory<TourBeaconFactory>((_props) => {\n  const props = useProps('TourBeacon', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    vars,\n    target,\n    onClick,\n    ref,\n    role: _role,\n    'aria-label': ariaLabel,\n    ...others\n  } = props;\n\n  const ctx = useTourContext();\n  const { dir } = useDirection();\n  const element = useTargetElement(target);\n\n  const { refs, floatingStyles } = useFloating({\n    elements: { reference: element },\n    placement: getFloatingPosition(dir, 'right-start'),\n    whileElementsMounted: pressAwareAutoUpdate,\n    middleware: [offset(8)],\n  });\n\n  const mergedRef = useMergedRef(refs.setFloating, ref);\n  const beaconStyles = ctx.getStyles('beacon', { className, classNames, style, styles });\n\n  if (!element) {\n    return null;\n  }\n\n  return (\n    <UnstyledButton\n      ref={mergedRef}\n      role=\"button\"\n      aria-label={ariaLabel || ctx.labels.beacon}\n      {...beaconStyles}\n      style={{\n        ...beaconStyles.style,\n        ...floatingStyles,\n      }}\n      onClick={onClick}\n      {...others}\n    >\n      <span {...ctx.getStyles('beaconPulse')} />\n    </UnstyledButton>\n  );\n});\n\nTourBeacon.classes = classes;\nTourBeacon.displayName = '@mantine/core/TourBeacon';\n\nexport namespace TourBeacon {\n  export type Props = TourBeaconProps;\n}\n"],"mappings":";;;;;;;;;;;;;;AAoCA,MAAM,eAAyC,CAAC;AAEhD,MAAa,aAAa,SAA4B,WAAW;CAE/D,MAAM,EACJ,YACA,WACA,OACA,QACA,MACA,QACA,SACA,KACA,MAAM,OACN,cAAc,WACd,GAAG,WAZS,SAAS,cAAc,cAAc,MAa3C;CAER,MAAM,MAAM,eAAe;CAC3B,MAAM,EAAE,QAAQ,aAAa;CAC7B,MAAM,UAAU,iBAAiB,MAAM;CAEvC,MAAM,EAAE,MAAM,mBAAmB,YAAY;EAC3C,UAAU,EAAE,WAAW,QAAQ;EAC/B,WAAW,oBAAoB,KAAK,aAAa;EACjD,sBAAsB;EACtB,YAAY,CAAC,OAAO,CAAC,CAAC;CACxB,CAAC;CAED,MAAM,YAAY,aAAa,KAAK,aAAa,GAAG;CACpD,MAAM,eAAe,IAAI,UAAU,UAAU;EAAE;EAAW;EAAY;EAAO;CAAO,CAAC;CAErF,IAAI,CAAC,SACH,OAAO;CAGT,OACE,oBAAC,gBAAD;EACE,KAAK;EACL,MAAK;EACL,cAAY,aAAa,IAAI,OAAO;EACpC,GAAI;EACJ,OAAO;GACL,GAAG,aAAa;GAChB,GAAG;EACL;EACS;EACT,GAAI;EAEJ,UAAA,oBAAC,QAAD,EAAM,GAAI,IAAI,UAAU,aAAa,EAAI,CAAA;CAC3B,CAAA;AAEpB,CAAC;AAED,WAAW,UAAUA;AACrB,WAAW,cAAc"}