@mantine/core 9.6.3 → 9.7.0

package/esm/components/Tour/TourBeaconPositioned.mjs

@@ -0,0 +1,46 @@
+"use client";
+import { UnstyledButton } from "../UnstyledButton/UnstyledButton.mjs";
+import { pressAwareAutoUpdate } from "./press-aware-auto-update.mjs";
+import { useTargetElement } from "./use-target-rect.mjs";
+import { useEffect, useRef } from "react";
+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/TourBeaconPositioned.tsx
+function TourBeaconPositioned({ target, onClick, ariaLabel, className, style, pulseStyles, withInitialFocus, onInitialFocus }) {
+	const element = useTargetElement(target);
+	const buttonRef = useRef(null);
+	const { refs, floatingStyles } = useFloating({
+		elements: { reference: element },
+		placement: "top-end",
+		whileElementsMounted: pressAwareAutoUpdate,
+		middleware: [offset({
+			mainAxis: -4,
+			crossAxis: -4
+		})]
+	});
+	const mergedRef = useMergedRef(refs.setFloating, buttonRef);
+	useEffect(() => {
+		if (withInitialFocus && buttonRef.current) {
+			buttonRef.current.focus({ preventScroll: true });
+			onInitialFocus?.();
+		}
+	}, [withInitialFocus, element]);
+	if (!element) return null;
+	return /* @__PURE__ */ jsx(UnstyledButton, {
+		ref: mergedRef,
+		role: "button",
+		"aria-label": ariaLabel,
+		className,
+		style: {
+			...style,
+			...floatingStyles
+		},
+		onClick,
+		children: /* @__PURE__ */ jsx("span", { ...pulseStyles })
+	});
+}
+//#endregion
+export { TourBeaconPositioned };
+
+//# sourceMappingURL=TourBeaconPositioned.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TourBeaconPositioned.mjs","names":[],"sources":["../../../src/components/Tour/TourBeaconPositioned.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport { offset, useFloating } from '@floating-ui/react';\nimport { useMergedRef } from '@mantine/hooks';\nimport { UnstyledButton } from '../UnstyledButton';\nimport { pressAwareAutoUpdate } from './press-aware-auto-update';\nimport { useTargetElement, type TourTarget } from './use-target-rect';\n\ninterface TourBeaconPositionedProps {\n  target: TourTarget;\n  onClick: () => void;\n  ariaLabel: string;\n  className?: string;\n  style?: React.CSSProperties;\n  pulseStyles?: Record<string, unknown>;\n  withInitialFocus?: boolean;\n  onInitialFocus?: () => void;\n}\n\nexport function TourBeaconPositioned({\n  target,\n  onClick,\n  ariaLabel,\n  className,\n  style,\n  pulseStyles,\n  withInitialFocus,\n  onInitialFocus,\n}: TourBeaconPositionedProps) {\n  const element = useTargetElement(target);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n\n  const { refs, floatingStyles } = useFloating({\n    elements: { reference: element },\n    placement: 'top-end',\n    whileElementsMounted: pressAwareAutoUpdate,\n    middleware: [offset({ mainAxis: -4, crossAxis: -4 })],\n  });\n\n  const mergedRef = useMergedRef(refs.setFloating, buttonRef);\n\n  useEffect(() => {\n    if (withInitialFocus && buttonRef.current) {\n      buttonRef.current.focus({ preventScroll: true });\n      onInitialFocus?.();\n    }\n  }, [withInitialFocus, element]);\n\n  if (!element) {\n    return null;\n  }\n\n  return (\n    <UnstyledButton\n      ref={mergedRef}\n      role=\"button\"\n      aria-label={ariaLabel}\n      className={className}\n      style={{ ...style, ...floatingStyles }}\n      onClick={onClick}\n    >\n      <span {...pulseStyles} />\n    </UnstyledButton>\n  );\n}\n"],"mappings":";;;;;;;;;AAkBA,SAAgB,qBAAqB,EACnC,QACA,SACA,WACA,WACA,OACA,aACA,kBACA,kBAC4B;CAC5B,MAAM,UAAU,iBAAiB,MAAM;CACvC,MAAM,YAAY,OAA0B,IAAI;CAEhD,MAAM,EAAE,MAAM,mBAAmB,YAAY;EAC3C,UAAU,EAAE,WAAW,QAAQ;EAC/B,WAAW;EACX,sBAAsB;EACtB,YAAY,CAAC,OAAO;GAAE,UAAU;GAAI,WAAW;EAAG,CAAC,CAAC;CACtD,CAAC;CAED,MAAM,YAAY,aAAa,KAAK,aAAa,SAAS;CAE1D,gBAAgB;EACd,IAAI,oBAAoB,UAAU,SAAS;GACzC,UAAU,QAAQ,MAAM,EAAE,eAAe,KAAK,CAAC;GAC/C,iBAAiB;EACnB;CACF,GAAG,CAAC,kBAAkB,OAAO,CAAC;CAE9B,IAAI,CAAC,SACH,OAAO;CAGT,OACE,oBAAC,gBAAD;EACE,KAAK;EACL,MAAK;EACL,cAAY;EACD;EACX,OAAO;GAAE,GAAG;GAAO,GAAG;EAAe;EAC5B;EAET,UAAA,oBAAC,QAAD,EAAM,GAAI,YAAc,CAAA;CACV,CAAA;AAEpB"}

package/esm/components/Tour/TourBody/TourBody.mjs

@@ -0,0 +1,37 @@
+"use client";
+import { useProps } from "../../../core/MantineProvider/use-props/use-props.mjs";
+import { factory } from "../../../core/factory/factory.mjs";
+import { Box } from "../../../core/Box/Box.mjs";
+import { useTourContext } from "../Tour.context.mjs";
+import Tour_module_default from "../Tour.module.mjs";
+import { useEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region packages/@mantine/core/src/components/Tour/TourBody/TourBody.tsx
+const defaultProps = {};
+const TourBody = factory((_props) => {
+	const { children, classNames, className, style, styles, vars, id, ...others } = useProps("TourBody", defaultProps, _props);
+	const ctx = useTourContext();
+	const { registerBody } = ctx;
+	const resolvedId = id ?? ctx.bodyId;
+	useEffect(() => {
+		registerBody(resolvedId);
+		return () => registerBody(null);
+	}, [registerBody, resolvedId]);
+	return /* @__PURE__ */ jsx(Box, {
+		id: resolvedId,
+		...ctx.getStyles("body", {
+			className,
+			classNames,
+			style,
+			styles
+		}),
+		...others,
+		children
+	});
+});
+TourBody.classes = Tour_module_default;
+TourBody.displayName = "@mantine/core/TourBody";
+//#endregion
+export { TourBody };
+
+//# sourceMappingURL=TourBody.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TourBody.mjs","names":["classes"],"sources":["../../../../src/components/Tour/TourBody/TourBody.tsx"],"sourcesContent":["import { useEffect } from 'react';\nimport {\n  Box,\n  BoxProps,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  useProps,\n} from '../../../core';\nimport { useTourContext } from '../Tour.context';\nimport classes from '../Tour.module.css';\n\nexport type TourBodyStylesNames = 'body';\n\nexport interface TourBodyProps\n  extends BoxProps, CompoundStylesApiProps<TourBodyFactory>, ElementProps<'div'> {}\n\nexport type TourBodyFactory = Factory<{\n  props: TourBodyProps;\n  ref: HTMLDivElement;\n  stylesNames: TourBodyStylesNames;\n  compound: true;\n}>;\n\nconst defaultProps: Partial<TourBodyProps> = {};\n\nexport const TourBody = factory<TourBodyFactory>((_props) => {\n  const props = useProps('TourBody', defaultProps, _props);\n  const { children, classNames, className, style, styles, vars, id, ...others } = props;\n  const ctx = useTourContext();\n  const { registerBody } = ctx;\n  const resolvedId = id ?? ctx.bodyId;\n\n  useEffect(() => {\n    registerBody(resolvedId);\n    return () => registerBody(null);\n  }, [registerBody, resolvedId]);\n\n  return (\n    <Box\n      id={resolvedId}\n      {...ctx.getStyles('body', { className, classNames, style, styles })}\n      {...others}\n    >\n      {children}\n    </Box>\n  );\n});\n\nTourBody.classes = classes;\nTourBody.displayName = '@mantine/core/TourBody';\n\nexport namespace TourBody {\n  export type Props = TourBodyProps;\n}\n"],"mappings":";;;;;;;;;AAyBA,MAAM,eAAuC,CAAC;AAE9C,MAAa,WAAW,SAA0B,WAAW;CAE3D,MAAM,EAAE,UAAU,YAAY,WAAW,OAAO,QAAQ,MAAM,IAAI,GAAG,WADvD,SAAS,YAAY,cAAc,MACmC;CACpF,MAAM,MAAM,eAAe;CAC3B,MAAM,EAAE,iBAAiB;CACzB,MAAM,aAAa,MAAM,IAAI;CAE7B,gBAAgB;EACd,aAAa,UAAU;EACvB,aAAa,aAAa,IAAI;CAChC,GAAG,CAAC,cAAc,UAAU,CAAC;CAE7B,OACE,oBAAC,KAAD;EACE,IAAI;EACJ,GAAI,IAAI,UAAU,QAAQ;GAAE;GAAW;GAAY;GAAO;EAAO,CAAC;EAClE,GAAI;EAEH;CACE,CAAA;AAET,CAAC;AAED,SAAS,UAAUA;AACnB,SAAS,cAAc"}

package/esm/components/Tour/TourCloseButton/TourCloseButton.mjs

@@ -0,0 +1,26 @@
+"use client";
+import { useProps } from "../../../core/MantineProvider/use-props/use-props.mjs";
+import { CloseButton } from "../../CloseButton/CloseButton.mjs";
+import { useTourContext } from "../Tour.context.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region packages/@mantine/core/src/components/Tour/TourCloseButton/TourCloseButton.tsx
+const defaultProps = {};
+function TourCloseButton(_props) {
+	const { onClick, ...others } = useProps("TourCloseButton", defaultProps, _props);
+	const ctx = useTourContext();
+	if (!ctx.withCloseButton) return null;
+	return /* @__PURE__ */ jsx(CloseButton, {
+		"aria-label": ctx.labels.close,
+		...ctx.getStyles("closeButton"),
+		onClick: (event) => {
+			ctx.close();
+			onClick?.(event);
+		},
+		...others
+	});
+}
+TourCloseButton.displayName = "@mantine/core/TourCloseButton";
+//#endregion
+export { TourCloseButton };
+
+//# sourceMappingURL=TourCloseButton.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TourCloseButton.mjs","names":[],"sources":["../../../../src/components/Tour/TourCloseButton/TourCloseButton.tsx"],"sourcesContent":["import { useProps } from '../../../core';\nimport { CloseButton, type __CloseButtonProps } from '../../CloseButton';\nimport { useTourContext } from '../Tour.context';\n\nexport interface TourCloseButtonProps extends __CloseButtonProps {\n  /** Called when the close button is clicked */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\n}\n\nconst defaultProps: Partial<TourCloseButtonProps> = {};\n\nexport function TourCloseButton(_props: TourCloseButtonProps) {\n  const props = useProps('TourCloseButton', defaultProps, _props);\n  const { onClick, ...others } = props;\n  const ctx = useTourContext();\n\n  if (!ctx.withCloseButton) {\n    return null;\n  }\n\n  return (\n    <CloseButton\n      aria-label={ctx.labels.close}\n      {...ctx.getStyles('closeButton')}\n      onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n        ctx.close();\n        onClick?.(event);\n      }}\n      {...others}\n    />\n  );\n}\n\nTourCloseButton.displayName = '@mantine/core/TourCloseButton';\n\nexport namespace TourCloseButton {\n  export type Props = TourCloseButtonProps;\n}\n"],"mappings":";;;;;;AASA,MAAM,eAA8C,CAAC;AAErD,SAAgB,gBAAgB,QAA8B;CAE5D,MAAM,EAAE,SAAS,GAAG,WADN,SAAS,mBAAmB,cAAc,MACrB;CACnC,MAAM,MAAM,eAAe;CAE3B,IAAI,CAAC,IAAI,iBACP,OAAO;CAGT,OACE,oBAAC,aAAD;EACE,cAAY,IAAI,OAAO;EACvB,GAAI,IAAI,UAAU,aAAa;EAC/B,UAAU,UAA+C;GACvD,IAAI,MAAM;GACV,UAAU,KAAK;EACjB;EACA,GAAI;CACL,CAAA;AAEL;AAEA,gBAAgB,cAAc"}

package/esm/components/Tour/TourNavigation/TourNavigation.mjs

@@ -0,0 +1,63 @@
+"use client";
+import { useProps } from "../../../core/MantineProvider/use-props/use-props.mjs";
+import { Box } from "../../../core/Box/Box.mjs";
+import { Group } from "../../Group/Group.mjs";
+import { Button } from "../../Button/Button.mjs";
+import { useTourContext } from "../Tour.context.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/@mantine/core/src/components/Tour/TourNavigation/TourNavigation.tsx
+const defaultProps = {};
+function TourNavigation(_props) {
+	const { ...others } = useProps("TourNavigation", defaultProps, _props);
+	const ctx = useTourContext();
+	const isFirstStep = ctx.step === 0;
+	const isLastStep = ctx.step === ctx.stepsCount - 1;
+	return /* @__PURE__ */ jsx(Box, {
+		...ctx.getStyles("navigation"),
+		...others,
+		children: /* @__PURE__ */ jsxs(Group, {
+			justify: "space-between",
+			wrap: "nowrap",
+			children: [
+				/* @__PURE__ */ jsx(Button, {
+					variant: "default",
+					onClick: ctx.close,
+					size: "compact-sm",
+					...ctx.getStyles("navigationButton"),
+					children: ctx.labels.skip
+				}),
+				/* @__PURE__ */ jsx(Box, {
+					component: "span",
+					"aria-live": "polite",
+					...ctx.getStyles("stepCounter"),
+					children: ctx.labels.stepCounter(ctx.step + 1, ctx.stepsCount)
+				}),
+				/* @__PURE__ */ jsxs(Group, {
+					gap: "xs",
+					wrap: "nowrap",
+					children: [!isFirstStep && /* @__PURE__ */ jsx(Button, {
+						variant: "default",
+						onClick: () => ctx.setStep(ctx.step - 1),
+						size: "compact-sm",
+						...ctx.getStyles("navigationButton"),
+						children: ctx.labels.back
+					}), /* @__PURE__ */ jsx(Button, {
+						onClick: () => {
+							if (isLastStep) ctx.close();
+							else ctx.setStep(ctx.step + 1);
+						},
+						size: "compact-sm",
+						color: ctx.color,
+						...ctx.getStyles("navigationButton"),
+						children: isLastStep ? ctx.labels.close : ctx.labels.next
+					})]
+				})
+			]
+		})
+	});
+}
+TourNavigation.displayName = "@mantine/core/TourNavigation";
+//#endregion
+export { TourNavigation };
+
+//# sourceMappingURL=TourNavigation.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TourNavigation.mjs","names":[],"sources":["../../../../src/components/Tour/TourNavigation/TourNavigation.tsx"],"sourcesContent":["import { Box, useProps } from '../../../core';\nimport { Button } from '../../Button';\nimport { Group } from '../../Group';\nimport { useTourContext } from '../Tour.context';\n\nexport interface TourNavigationProps {\n  /** Called when the navigation container is clicked (fires for clicks on any of its buttons and the step counter) */\n  onClick?: React.MouseEventHandler<HTMLDivElement>;\n}\n\nconst defaultProps: Partial<TourNavigationProps> = {};\n\nexport function TourNavigation(_props: TourNavigationProps) {\n  const props = useProps('TourNavigation', defaultProps, _props);\n  const { ...others } = props;\n  const ctx = useTourContext();\n  const isFirstStep = ctx.step === 0;\n  const isLastStep = ctx.step === ctx.stepsCount - 1;\n\n  return (\n    <Box {...ctx.getStyles('navigation')} {...others}>\n      <Group justify=\"space-between\" wrap=\"nowrap\">\n        <Button\n          variant=\"default\"\n          onClick={ctx.close}\n          size=\"compact-sm\"\n          {...ctx.getStyles('navigationButton')}\n        >\n          {ctx.labels.skip}\n        </Button>\n\n        <Box component=\"span\" aria-live=\"polite\" {...ctx.getStyles('stepCounter')}>\n          {ctx.labels.stepCounter(ctx.step + 1, ctx.stepsCount)}\n        </Box>\n\n        <Group gap=\"xs\" wrap=\"nowrap\">\n          {!isFirstStep && (\n            <Button\n              variant=\"default\"\n              onClick={() => ctx.setStep(ctx.step - 1)}\n              size=\"compact-sm\"\n              {...ctx.getStyles('navigationButton')}\n            >\n              {ctx.labels.back}\n            </Button>\n          )}\n          <Button\n            onClick={() => {\n              if (isLastStep) {\n                ctx.close();\n              } else {\n                ctx.setStep(ctx.step + 1);\n              }\n            }}\n            size=\"compact-sm\"\n            color={ctx.color}\n            {...ctx.getStyles('navigationButton')}\n          >\n            {isLastStep ? ctx.labels.close : ctx.labels.next}\n          </Button>\n        </Group>\n      </Group>\n    </Box>\n  );\n}\n\nTourNavigation.displayName = '@mantine/core/TourNavigation';\n\nexport namespace TourNavigation {\n  export type Props = TourNavigationProps;\n}\n"],"mappings":";;;;;;;;AAUA,MAAM,eAA6C,CAAC;AAEpD,SAAgB,eAAe,QAA6B;CAE1D,MAAM,EAAE,GAAG,WADG,SAAS,kBAAkB,cAAc,MAC7B;CAC1B,MAAM,MAAM,eAAe;CAC3B,MAAM,cAAc,IAAI,SAAS;CACjC,MAAM,aAAa,IAAI,SAAS,IAAI,aAAa;CAEjD,OACE,oBAAC,KAAD;EAAK,GAAI,IAAI,UAAU,YAAY;EAAG,GAAI;EACxC,UAAA,qBAAC,OAAD;GAAO,SAAQ;GAAgB,MAAK;GAApC,UAAA;IACE,oBAAC,QAAD;KACE,SAAQ;KACR,SAAS,IAAI;KACb,MAAK;KACL,GAAI,IAAI,UAAU,kBAAkB;KAEnC,UAAA,IAAI,OAAO;IACN,CAAA;IAER,oBAAC,KAAD;KAAK,WAAU;KAAO,aAAU;KAAS,GAAI,IAAI,UAAU,aAAa;KACrE,UAAA,IAAI,OAAO,YAAY,IAAI,OAAO,GAAG,IAAI,UAAU;IACjD,CAAA;IAEL,qBAAC,OAAD;KAAO,KAAI;KAAK,MAAK;KAArB,UAAA,CACG,CAAC,eACA,oBAAC,QAAD;MACE,SAAQ;MACR,eAAe,IAAI,QAAQ,IAAI,OAAO,CAAC;MACvC,MAAK;MACL,GAAI,IAAI,UAAU,kBAAkB;MAEnC,UAAA,IAAI,OAAO;KACN,CAAA,GAEV,oBAAC,QAAD;MACE,eAAe;OACb,IAAI,YACF,IAAI,MAAM;YAEV,IAAI,QAAQ,IAAI,OAAO,CAAC;MAE5B;MACA,MAAK;MACL,OAAO,IAAI;MACX,GAAI,IAAI,UAAU,kBAAkB;MAEnC,UAAA,aAAa,IAAI,OAAO,QAAQ,IAAI,OAAO;KACtC,CAAA,CACH;;GACF;;CACJ,CAAA;AAET;AAEA,eAAe,cAAc"}

package/esm/components/Tour/TourOverlay/TourOverlay.mjs

@@ -0,0 +1,70 @@
+"use client";
+import { useProps } from "../../../core/MantineProvider/use-props/use-props.mjs";
+import { getOverlayHitPath } from "../get-overlay-hit-path.mjs";
+import { useTourContext } from "../Tour.context.mjs";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/@mantine/core/src/components/Tour/TourOverlay/TourOverlay.tsx
+const defaultProps = {};
+function TourOverlay(_props) {
+	const { targetRect, color, withInteraction, onClick } = useProps("TourOverlay", defaultProps, _props);
+	const ctx = useTourContext();
+	const maskId = useId();
+	const resolvedColor = color || "var(--tour-overlay-color, rgba(0, 0, 0, 0.5))";
+	const padding = ctx.spotlightPadding;
+	const radius = ctx.spotlightRadius ?? 4;
+	const interactive = withInteraction || ctx.withOverlayInteraction;
+	if (!ctx.withOverlay) return null;
+	return /* @__PURE__ */ jsxs("svg", {
+		...ctx.getStyles("overlay"),
+		role: "presentation",
+		width: "100%",
+		height: "100%",
+		"data-with-overlay-interaction": interactive || void 0,
+		onMouseDown: (event) => event.preventDefault(),
+		onClick: (event) => {
+			if (ctx.closeOnOverlayClick) ctx.close();
+			onClick?.(event);
+		},
+		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 - padding,
+					y: targetRect.top - padding,
+					width: targetRect.width + padding * 2,
+					height: targetRect.height + padding * 2,
+					rx: radius,
+					ry: radius,
+					fill: "black",
+					...ctx.getStyles("spotlight")
+				})]
+			}) }),
+			/* @__PURE__ */ jsx("rect", {
+				x: "0",
+				y: "0",
+				width: "100%",
+				height: "100%",
+				style: { fill: resolvedColor },
+				mask: `url(#${maskId})`
+			}),
+			interactive && /* @__PURE__ */ jsx("path", {
+				d: getOverlayHitPath(targetRect, padding, radius),
+				fillRule: "evenodd",
+				fill: "transparent",
+				style: { pointerEvents: "auto" }
+			})
+		]
+	});
+}
+TourOverlay.displayName = "@mantine/core/TourOverlay";
+//#endregion
+export { TourOverlay };
+
+//# sourceMappingURL=TourOverlay.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TourOverlay.mjs","names":[],"sources":["../../../../src/components/Tour/TourOverlay/TourOverlay.tsx"],"sourcesContent":["import { useId } from 'react';\nimport { useProps } from '../../../core';\nimport { getOverlayHitPath } from '../get-overlay-hit-path';\nimport { useTourContext } from '../Tour.context';\n\nexport interface TourOverlayProps {\n  /** Rectangle describing the target element position */\n  targetRect?: { top: number; left: number; width: number; height: number } | null;\n\n  /** Overlay fill color */\n  color?: string;\n\n  /** Whether pointer events pass through the spotlight cutout to the target element, the rest of the overlay keeps blocking clicks */\n  withInteraction?: boolean;\n\n  /** Called when the overlay is clicked */\n  onClick?: React.MouseEventHandler<SVGSVGElement>;\n}\n\nconst defaultProps: Partial<TourOverlayProps> = {};\n\nexport function TourOverlay(_props: TourOverlayProps) {\n  const props = useProps('TourOverlay', defaultProps, _props);\n  const { targetRect, color, withInteraction, onClick } = props;\n\n  const ctx = useTourContext();\n  const maskId = useId();\n  const resolvedColor = color || 'var(--tour-overlay-color, rgba(0, 0, 0, 0.5))';\n  const padding = ctx.spotlightPadding;\n  const radius = ctx.spotlightRadius ?? 4;\n  const interactive = withInteraction || ctx.withOverlayInteraction;\n\n  if (!ctx.withOverlay) {\n    return null;\n  }\n\n  return (\n    <svg\n      {...ctx.getStyles('overlay')}\n      role=\"presentation\"\n      width=\"100%\"\n      height=\"100%\"\n      data-with-overlay-interaction={interactive || undefined}\n      onMouseDown={(event) => event.preventDefault()}\n      onClick={(event) => {\n        if (ctx.closeOnOverlayClick) {\n          ctx.close();\n        }\n        onClick?.(event);\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 - padding}\n              y={targetRect.top - padding}\n              width={targetRect.width + padding * 2}\n              height={targetRect.height + padding * 2}\n              rx={radius}\n              ry={radius}\n              fill=\"black\"\n              {...ctx.getStyles('spotlight')}\n            />\n          )}\n        </mask>\n      </defs>\n      <rect\n        x=\"0\"\n        y=\"0\"\n        width=\"100%\"\n        height=\"100%\"\n        style={{ fill: resolvedColor }}\n        mask={`url(#${maskId})`}\n      />\n      {interactive && (\n        <path\n          d={getOverlayHitPath(targetRect, padding, radius)}\n          fillRule=\"evenodd\"\n          fill=\"transparent\"\n          style={{ pointerEvents: 'auto' }}\n        />\n      )}\n    </svg>\n  );\n}\n\nTourOverlay.displayName = '@mantine/core/TourOverlay';\n\nexport namespace TourOverlay {\n  export type Props = TourOverlayProps;\n}\n"],"mappings":";;;;;;;AAmBA,MAAM,eAA0C,CAAC;AAEjD,SAAgB,YAAY,QAA0B;CAEpD,MAAM,EAAE,YAAY,OAAO,iBAAiB,YAD9B,SAAS,eAAe,cAAc,MACQ;CAE5D,MAAM,MAAM,eAAe;CAC3B,MAAM,SAAS,MAAM;CACrB,MAAM,gBAAgB,SAAS;CAC/B,MAAM,UAAU,IAAI;CACpB,MAAM,SAAS,IAAI,mBAAmB;CACtC,MAAM,cAAc,mBAAmB,IAAI;CAE3C,IAAI,CAAC,IAAI,aACP,OAAO;CAGT,OACE,qBAAC,OAAD;EACE,GAAI,IAAI,UAAU,SAAS;EAC3B,MAAK;EACL,OAAM;EACN,QAAO;EACP,iCAA+B,eAAe,KAAA;EAC9C,cAAc,UAAU,MAAM,eAAe;EAC7C,UAAU,UAAU;GAClB,IAAI,IAAI,qBACN,IAAI,MAAM;GAEZ,UAAU,KAAK;EACjB;EAZF,UAAA;GAcE,oBAAC,QAAD,EAAA,UACE,qBAAC,QAAD;IAAM,IAAI;IAAV,UAAA,CACE,oBAAC,QAAD;KAAM,GAAE;KAAI,GAAE;KAAI,OAAM;KAAO,QAAO;KAAO,MAAK;IAAS,CAAA,GAC1D,cACC,oBAAC,QAAD;KACE,GAAG,WAAW,OAAO;KACrB,GAAG,WAAW,MAAM;KACpB,OAAO,WAAW,QAAQ,UAAU;KACpC,QAAQ,WAAW,SAAS,UAAU;KACtC,IAAI;KACJ,IAAI;KACJ,MAAK;KACL,GAAI,IAAI,UAAU,WAAW;IAC9B,CAAA,CAEC;GACF,CAAA,EAAA,CAAA;GACN,oBAAC,QAAD;IACE,GAAE;IACF,GAAE;IACF,OAAM;IACN,QAAO;IACP,OAAO,EAAE,MAAM,cAAc;IAC7B,MAAM,QAAQ,OAAO;GACtB,CAAA;GACA,eACC,oBAAC,QAAD;IACE,GAAG,kBAAkB,YAAY,SAAS,MAAM;IAChD,UAAS;IACT,MAAK;IACL,OAAO,EAAE,eAAe,OAAO;GAChC,CAAA;EAEA;;AAET;AAEA,YAAY,cAAc"}

package/esm/components/Tour/TourRoot/TourRoot.mjs

@@ -0,0 +1,125 @@
+"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 { TourProvider, defaultLabels } from "../Tour.context.mjs";
+import Tour_module_default from "../Tour.module.mjs";
+import { useTourState } from "../use-tour-state.mjs";
+import { useCallback, useId, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region packages/@mantine/core/src/components/Tour/TourRoot/TourRoot.tsx
+const defaultProps = {
+	active: false,
+	withOverlay: true,
+	withOverlayInteraction: false,
+	withCloseButton: true,
+	withKeyboardNavigation: true,
+	spotlightPadding: 8,
+	closeOnEscape: true,
+	closeOnOverlayClick: false,
+	withinPortal: true,
+	zIndex: 1e4,
+	transitionProps: {
+		duration: 200,
+		transition: "fade"
+	},
+	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 TourRoot = factory((_props) => {
+	const props = useProps("TourRoot", defaultProps, _props);
+	const { classNames, className, style, styles, unstyled, vars, active, stepsCount, onClose, step: stepProp, defaultStep, onStepChange, onStepOpen, onStepClose, withOverlay, withOverlayInteraction, withCloseButton, withKeyboardNavigation, spotlightPadding, spotlightRadius, closeOnEscape, closeOnOverlayClick, labels: labelsProp, withinPortal, portalProps, zIndex, transitionProps, overlayColor, tooltipShadow, color, children, attributes, ...others } = props;
+	const labels = {
+		...defaultLabels,
+		...labelsProp
+	};
+	const id = useId();
+	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 { currentStep, setStep, close, targetRef } = useTourState({
+		active,
+		onClose,
+		step: stepProp,
+		defaultStep,
+		onStepChange,
+		onStepOpen: (index) => onStepOpen?.(index),
+		onStepClose: (index) => onStepClose?.(index),
+		mode: "guided",
+		stepsCount,
+		closeOnEscape,
+		withKeyboardNavigation
+	});
+	const setTargetElement = useCallback((element) => {
+		targetRef.current = element;
+	}, [targetRef]);
+	const getStyles = useStyles({
+		name: "Tour",
+		classes: Tour_module_default,
+		props,
+		className,
+		style,
+		classNames,
+		styles,
+		unstyled,
+		attributes,
+		vars,
+		varsResolver
+	});
+	if (!active) return null;
+	return /* @__PURE__ */ jsx(TourProvider, {
+		value: {
+			getStyles,
+			step: currentStep,
+			setStep,
+			stepsCount,
+			close,
+			withOverlay,
+			withOverlayInteraction,
+			withCloseButton,
+			spotlightPadding,
+			spotlightRadius: spotlightRadius ?? 4,
+			closeOnOverlayClick,
+			transitionProps,
+			color,
+			labels,
+			titleId,
+			bodyId,
+			titleMounted,
+			bodyMounted,
+			registerTitle,
+			registerBody,
+			setTargetElement
+		},
+		children: /* @__PURE__ */ jsx(OptionalPortal, {
+			...portalProps,
+			withinPortal,
+			children: /* @__PURE__ */ jsx(Box, {
+				...getStyles("root"),
+				...others,
+				children
+			})
+		})
+	});
+});
+TourRoot.displayName = "@mantine/core/TourRoot";
+//#endregion
+export { TourRoot };
+
+//# sourceMappingURL=TourRoot.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TourRoot.mjs","names":[],"sources":["../../../../src/components/Tour/TourRoot/TourRoot.tsx"],"sourcesContent":["import { useCallback, useId, useState } from 'react';\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 { OptionalPortal, type PortalProps } from '../../Portal';\nimport type { TransitionOverride } from '../../Transition';\nimport type { TourStylesNames, TourCssVariables } from '../Tour';\nimport { defaultLabels, TourLabels, TourProvider } from '../Tour.context';\nimport { useTourState } from '../use-tour-state';\nimport classes from '../Tour.module.css';\n\nexport interface TourRootProps\n  extends BoxProps, StylesApiProps<TourRootFactory>, ElementProps<'div'> {\n  /** Whether the tour is active @default false */\n  active?: boolean;\n\n  /** Total number of steps, used by `Tour.Navigation` and keyboard navigation to detect the last step */\n  stepsCount: number;\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  /** Whether `Tour.Overlay` is rendered @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 `Tour.CloseButton` is rendered @default true */\n  withCloseButton?: boolean;\n\n  /** Whether arrow keys navigate between steps @default true */\n  withKeyboardNavigation?: boolean;\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  /** Default transition props of `Tour.Tooltip` @default { duration: 200, transition: 'fade' } */\n  transitionProps?: TransitionOverride;\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 `Tour.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 content: `Tour.Overlay`, `Tour.Tooltip`, `Tour.Beacon` and other compound components */\n  children?: React.ReactNode;\n}\n\nexport type TourRootFactory = Factory<{\n  props: TourRootProps;\n  ref: HTMLDivElement;\n  stylesNames: TourStylesNames;\n  vars: TourCssVariables;\n}>;\n\nconst defaultProps = {\n  active: false,\n  withOverlay: true,\n  withOverlayInteraction: false,\n  withCloseButton: true,\n  withKeyboardNavigation: true,\n  spotlightPadding: 8,\n  closeOnEscape: true,\n  closeOnOverlayClick: false,\n  withinPortal: true,\n  zIndex: 10000,\n  transitionProps: { duration: 200, transition: 'fade' },\n  overlayColor: 'rgba(0, 0, 0, 0.5)',\n} satisfies Partial<TourRootProps>;\n\nconst varsResolver = createVarsResolver<TourRootFactory>(\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\nexport const TourRoot = factory<TourRootFactory>((_props) => {\n  const props = useProps('TourRoot', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    active,\n    stepsCount,\n    onClose,\n    step: stepProp,\n    defaultStep,\n    onStepChange,\n    onStepOpen,\n    onStepClose,\n    withOverlay,\n    withOverlayInteraction,\n    withCloseButton,\n    withKeyboardNavigation,\n    spotlightPadding,\n    spotlightRadius,\n    closeOnEscape,\n    closeOnOverlayClick,\n    labels: labelsProp,\n    withinPortal,\n    portalProps,\n    zIndex,\n    transitionProps,\n    overlayColor,\n    tooltipShadow,\n    color,\n    children,\n    attributes,\n    ...others\n  } = props;\n\n  const labels: TourLabels = { ...defaultLabels, ...labelsProp };\n  const id = useId();\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\n  const { currentStep, setStep, close, targetRef } = useTourState({\n    active,\n    onClose,\n    step: stepProp,\n    defaultStep,\n    onStepChange,\n    onStepOpen: (index) => onStepOpen?.(index),\n    onStepClose: (index) => onStepClose?.(index),\n    mode: 'guided',\n    stepsCount,\n    closeOnEscape,\n    withKeyboardNavigation,\n  });\n\n  const setTargetElement = useCallback(\n    (element: HTMLElement | null) => {\n      targetRef.current = element;\n    },\n    [targetRef]\n  );\n\n  const getStyles = useStyles<TourRootFactory>({\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  if (!active) {\n    return null;\n  }\n\n  return (\n    <TourProvider\n      value={{\n        getStyles,\n        step: currentStep,\n        setStep,\n        stepsCount,\n        close,\n        withOverlay: withOverlay!,\n        withOverlayInteraction: withOverlayInteraction!,\n        withCloseButton: withCloseButton!,\n        spotlightPadding: spotlightPadding!,\n        spotlightRadius: spotlightRadius ?? 4,\n        closeOnOverlayClick: closeOnOverlayClick!,\n        transitionProps,\n        color,\n        labels,\n        titleId,\n        bodyId,\n        titleMounted,\n        bodyMounted,\n        registerTitle,\n        registerBody,\n        setTargetElement,\n      }}\n    >\n      <OptionalPortal {...portalProps} withinPortal={withinPortal}>\n        <Box {...getStyles('root')} {...others}>\n          {children}\n        </Box>\n      </OptionalPortal>\n    </TourProvider>\n  );\n});\n\nTourRoot.displayName = '@mantine/core/TourRoot';\n\nexport namespace TourRoot {\n  export type Props = TourRootProps;\n}\n"],"mappings":";;;;;;;;;;;;;;;AA2GA,MAAM,eAAe;CACnB,QAAQ;CACR,aAAa;CACb,wBAAwB;CACxB,iBAAiB;CACjB,wBAAwB;CACxB,kBAAkB;CAClB,eAAe;CACf,qBAAqB;CACrB,cAAc;CACd,QAAQ;CACR,iBAAiB;EAAE,UAAU;EAAK,YAAY;CAAO;CACrD,cAAc;AAChB;AAEA,MAAM,eAAe,oBAClB,OAAO,EAAE,QAAQ,cAAc,eAAe,aAAa,EAC1D,MAAM;CACJ,gBAAgB,QAAQ,cAAc,OAAO,KAAK,IAAI,KAAA;CACtD,kBAAkB,QAAQ,SAAS;CACnC,wBAAwB;CACxB,yBAAyB,KAAA;CACzB,yBAAyB,UAAU,aAAa;CAChD,sBAAsB,KAAA;CACtB,uBAAuB,KAAA;AACzB,EACF,EACF;AAEA,MAAa,WAAW,SAA0B,WAAW;CAC3D,MAAM,QAAQ,SAAS,YAAY,cAAc,MAAM;CACvD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,QACA,YACA,SACA,MAAM,UACN,aACA,cACA,YACA,aACA,aACA,wBACA,iBACA,wBACA,kBACA,iBACA,eACA,qBACA,QAAQ,YACR,cACA,aACA,QACA,iBACA,cACA,eACA,OACA,UACA,YACA,GAAG,WACD;CAEJ,MAAM,SAAqB;EAAE,GAAG;EAAe,GAAG;CAAW;CAC7D,MAAM,KAAK,MAAM;CACjB,MAAM,CAAC,mBAAmB,iBAAiB,SAAwB,IAAI;CACvE,MAAM,CAAC,kBAAkB,gBAAgB,SAAwB,IAAI;CACrE,MAAM,UAAU,qBAAqB,GAAG,GAAG;CAC3C,MAAM,SAAS,oBAAoB,GAAG,GAAG;CACzC,MAAM,eAAe,sBAAsB;CAC3C,MAAM,cAAc,qBAAqB;CAEzC,MAAM,EAAE,aAAa,SAAS,OAAO,cAAc,aAAa;EAC9D;EACA;EACA,MAAM;EACN;EACA;EACA,aAAa,UAAU,aAAa,KAAK;EACzC,cAAc,UAAU,cAAc,KAAK;EAC3C,MAAM;EACN;EACA;EACA;CACF,CAAC;CAED,MAAM,mBAAmB,aACtB,YAAgC;EAC/B,UAAU,UAAU;CACtB,GACA,CAAC,SAAS,CACZ;CAEA,MAAM,YAAY,UAA2B;EAC3C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,IAAI,CAAC,QACH,OAAO;CAGT,OACE,oBAAC,cAAD;EACE,OAAO;GACL;GACA,MAAM;GACN;GACA;GACA;GACa;GACW;GACP;GACC;GAClB,iBAAiB,mBAAmB;GACf;GACrB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,UAAA,oBAAC,gBAAD;GAAgB,GAAI;GAA2B;GAC7C,UAAA,oBAAC,KAAD;IAAK,GAAI,UAAU,MAAM;IAAG,GAAI;IAC7B;GACE,CAAA;EACS,CAAA;CACJ,CAAA;AAElB,CAAC;AAED,SAAS,cAAc"}

package/esm/components/Tour/TourStep/TourStep.mjs

@@ -0,0 +1,10 @@
+"use client";
+//#region packages/@mantine/core/src/components/Tour/TourStep/TourStep.tsx
+function TourStep(_props) {
+	return null;
+}
+TourStep.displayName = "@mantine/core/TourStep";
+//#endregion
+export { TourStep };
+
+//# sourceMappingURL=TourStep.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TourStep.mjs","names":[],"sources":["../../../../src/components/Tour/TourStep/TourStep.tsx"],"sourcesContent":["import type { FloatingPosition } from '../../../utils/Floating';\n\nexport interface TourStepProps {\n  /** CSS selector or ref to the target element. Selectors are resolved again when the element mounts later, refs are resolved once when the step activates – use a selector for elements that are not mounted yet. */\n  target?: string | React.RefObject<HTMLElement | null>;\n\n  /** Step title */\n  title?: React.ReactNode;\n\n  /** Step body content */\n  children?: React.ReactNode;\n\n  /** Called when this step becomes active */\n  onStepOpen?: () => void;\n\n  /** Called when this step is deactivated */\n  onStepClose?: () => void;\n\n  /** Tooltip position relative to the target element @default 'bottom' */\n  position?: FloatingPosition;\n\n  /** Whether to display the overlay for this step (per-step override) */\n  withOverlay?: boolean;\n\n  /** Padding around the spotlight cutout in px (per-step override) */\n  spotlightPadding?: number;\n\n  /** Border radius of the spotlight cutout in px (per-step override) */\n  spotlightRadius?: number;\n\n  /** Whether to display a beacon for this step (per-step override) */\n  withBeacon?: boolean;\n}\n\nexport function TourStep(_props: TourStepProps): React.ReactElement | null {\n  return null;\n}\n\nTourStep.displayName = '@mantine/core/TourStep';\n\nexport namespace TourStep {\n  export type Props = TourStepProps;\n}\n"],"mappings":";;AAkCA,SAAgB,SAAS,QAAkD;CACzE,OAAO;AACT;AAEA,SAAS,cAAc"}

package/esm/components/Tour/TourTitle/TourTitle.mjs

@@ -0,0 +1,38 @@
+"use client";
+import { useProps } from "../../../core/MantineProvider/use-props/use-props.mjs";
+import { factory } from "../../../core/factory/factory.mjs";
+import { Box } from "../../../core/Box/Box.mjs";
+import { useTourContext } from "../Tour.context.mjs";
+import Tour_module_default from "../Tour.module.mjs";
+import { useEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region packages/@mantine/core/src/components/Tour/TourTitle/TourTitle.tsx
+const defaultProps = {};
+const TourTitle = factory((_props) => {
+	const { children, classNames, className, style, styles, vars, id, ...others } = useProps("TourTitle", defaultProps, _props);
+	const ctx = useTourContext();
+	const { registerTitle } = ctx;
+	const resolvedId = id ?? ctx.titleId;
+	useEffect(() => {
+		registerTitle(resolvedId);
+		return () => registerTitle(null);
+	}, [registerTitle, resolvedId]);
+	return /* @__PURE__ */ jsx(Box, {
+		component: "h3",
+		id: resolvedId,
+		...ctx.getStyles("title", {
+			className,
+			classNames,
+			style,
+			styles
+		}),
+		...others,
+		children
+	});
+});
+TourTitle.classes = Tour_module_default;
+TourTitle.displayName = "@mantine/core/TourTitle";
+//#endregion
+export { TourTitle };
+
+//# sourceMappingURL=TourTitle.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TourTitle.mjs","names":["classes"],"sources":["../../../../src/components/Tour/TourTitle/TourTitle.tsx"],"sourcesContent":["import { useEffect } from 'react';\nimport {\n  Box,\n  BoxProps,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  useProps,\n} from '../../../core';\nimport { useTourContext } from '../Tour.context';\nimport classes from '../Tour.module.css';\n\nexport type TourTitleStylesNames = 'title';\n\nexport interface TourTitleProps\n  extends BoxProps, CompoundStylesApiProps<TourTitleFactory>, ElementProps<'h3'> {}\n\nexport type TourTitleFactory = Factory<{\n  props: TourTitleProps;\n  ref: HTMLHeadingElement;\n  stylesNames: TourTitleStylesNames;\n  compound: true;\n}>;\n\nconst defaultProps: Partial<TourTitleProps> = {};\n\nexport const TourTitle = factory<TourTitleFactory>((_props) => {\n  const props = useProps('TourTitle', defaultProps, _props);\n  const { children, classNames, className, style, styles, vars, id, ...others } = props;\n  const ctx = useTourContext();\n  const { registerTitle } = ctx;\n  const resolvedId = id ?? ctx.titleId;\n\n  useEffect(() => {\n    registerTitle(resolvedId);\n    return () => registerTitle(null);\n  }, [registerTitle, resolvedId]);\n\n  return (\n    <Box\n      component=\"h3\"\n      id={resolvedId}\n      {...ctx.getStyles('title', { className, classNames, style, styles })}\n      {...others}\n    >\n      {children}\n    </Box>\n  );\n});\n\nTourTitle.classes = classes;\nTourTitle.displayName = '@mantine/core/TourTitle';\n\nexport namespace TourTitle {\n  export type Props = TourTitleProps;\n}\n"],"mappings":";;;;;;;;;AAyBA,MAAM,eAAwC,CAAC;AAE/C,MAAa,YAAY,SAA2B,WAAW;CAE7D,MAAM,EAAE,UAAU,YAAY,WAAW,OAAO,QAAQ,MAAM,IAAI,GAAG,WADvD,SAAS,aAAa,cAAc,MACkC;CACpF,MAAM,MAAM,eAAe;CAC3B,MAAM,EAAE,kBAAkB;CAC1B,MAAM,aAAa,MAAM,IAAI;CAE7B,gBAAgB;EACd,cAAc,UAAU;EACxB,aAAa,cAAc,IAAI;CACjC,GAAG,CAAC,eAAe,UAAU,CAAC;CAE9B,OACE,oBAAC,KAAD;EACE,WAAU;EACV,IAAI;EACJ,GAAI,IAAI,UAAU,SAAS;GAAE;GAAW;GAAY;GAAO;EAAO,CAAC;EACnE,GAAI;EAEH;CACE,CAAA;AAET,CAAC;AAED,UAAU,UAAUA;AACpB,UAAU,cAAc"}

package/esm/components/Tour/TourTooltip/TourTooltip.mjs

@@ -0,0 +1,87 @@
+"use client";
+import { useProps } from "../../../core/MantineProvider/use-props/use-props.mjs";
+import { factory } from "../../../core/factory/factory.mjs";
+import { Box } from "../../../core/Box/Box.mjs";
+import { useDirection } from "../../../core/DirectionProvider/DirectionProvider.mjs";
+import { getFloatingPosition } from "../../../utils/Floating/get-floating-position/get-floating-position.mjs";
+import { Transition } from "../../Transition/Transition.mjs";
+import { FocusTrap } from "../../FocusTrap/FocusTrap.mjs";
+import { useTourContext } from "../Tour.context.mjs";
+import { pressAwareAutoUpdate } from "../press-aware-auto-update.mjs";
+import Tour_module_default from "../Tour.module.mjs";
+import { useTooltipAutoFocus } from "../use-tooltip-auto-focus.mjs";
+import { useEffect } from "react";
+import { useMergedRef } from "@mantine/hooks";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { flip, offset, shift, useFloating } from "@floating-ui/react";
+//#region packages/@mantine/core/src/components/Tour/TourTooltip/TourTooltip.tsx
+const defaultProps = { position: "bottom" };
+const TourTooltip = factory((_props) => {
+	const { classNames, className, style, styles, vars, targetElement, position, mounted, transitionProps, children, ref, role, tabIndex, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...others } = useProps("TourTooltip", defaultProps, _props);
+	const ctx = useTourContext();
+	const { dir } = useDirection();
+	const { setTargetElement } = ctx;
+	useEffect(() => {
+		setTargetElement(targetElement ?? null);
+		return () => setTargetElement(null);
+	}, [targetElement, setTargetElement]);
+	const { refs, floatingStyles } = useFloating({
+		elements: { reference: targetElement },
+		placement: getFloatingPosition(dir, position),
+		whileElementsMounted: pressAwareAutoUpdate,
+		middleware: [
+			offset(12),
+			flip(),
+			shift({ padding: 8 })
+		]
+	});
+	const trapActive = !!mounted && ctx.withOverlay && !ctx.withOverlayInteraction;
+	const autoFocusRef = useTooltipAutoFocus({
+		autoFocus: !!mounted && !trapActive,
+		opened: !!mounted,
+		step: ctx.step
+	});
+	const transition = {
+		...ctx.transitionProps,
+		...transitionProps
+	};
+	const mergedRef = useMergedRef(refs.setFloating, autoFocusRef, ref);
+	const tooltipStyles = ctx.getStyles("tooltip", {
+		className,
+		classNames,
+		style,
+		styles
+	});
+	return /* @__PURE__ */ jsx(Transition, {
+		mounted: !!mounted,
+		duration: transition.duration ?? 200,
+		transition: transition.transition ?? "fade",
+		timingFunction: transition.timingFunction,
+		children: (transitionStyles) => /* @__PURE__ */ jsx(FocusTrap, {
+			active: trapActive,
+			innerRef: mergedRef,
+			children: /* @__PURE__ */ jsxs(Box, {
+				role: role ?? "dialog",
+				tabIndex: tabIndex ?? -1,
+				"aria-labelledby": ariaLabelledBy ?? (ctx.titleMounted ? ctx.titleId : void 0),
+				"aria-label": ariaLabel ?? (ctx.titleMounted ? void 0 : ctx.labels.stepCounter(ctx.step + 1, ctx.stepsCount)),
+				"aria-describedby": ariaDescribedBy ?? (ctx.bodyMounted ? ctx.bodyId : void 0),
+				...tooltipStyles,
+				"data-centered": !targetElement || void 0,
+				style: {
+					...tooltipStyles.style,
+					...targetElement ? floatingStyles : {},
+					...transitionStyles
+				},
+				...others,
+				children: [trapActive && /* @__PURE__ */ jsx(FocusTrap.InitialFocus, {}), children]
+			})
+		})
+	});
+});
+TourTooltip.classes = Tour_module_default;
+TourTooltip.displayName = "@mantine/core/TourTooltip";
+//#endregion
+export { TourTooltip };
+
+//# sourceMappingURL=TourTooltip.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TourTooltip.mjs","names":["classes"],"sources":["../../../../src/components/Tour/TourTooltip/TourTooltip.tsx"],"sourcesContent":["import { useEffect } from 'react';\nimport { flip, offset, shift, useFloating } from '@floating-ui/react';\nimport { useMergedRef } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  useDirection,\n  useProps,\n} from '../../../core';\nimport { getFloatingPosition, type FloatingPosition } from '../../../utils/Floating';\nimport { FocusTrap } from '../../FocusTrap';\nimport { Transition, type TransitionOverride } from '../../Transition';\nimport { pressAwareAutoUpdate } from '../press-aware-auto-update';\nimport { useTourContext } from '../Tour.context';\nimport { useTooltipAutoFocus } from '../use-tooltip-auto-focus';\nimport classes from '../Tour.module.css';\n\nexport type TourTooltipStylesNames = 'tooltip';\n\nexport interface TourTooltipProps\n  extends BoxProps, CompoundStylesApiProps<TourTooltipFactory>, ElementProps<'div'> {\n  /** Target element to position against */\n  targetElement?: HTMLElement | null;\n\n  /** Tooltip position @default 'bottom' */\n  position?: FloatingPosition;\n\n  /** Whether the tooltip is visible */\n  mounted?: boolean;\n\n  /** Transition props for the tooltip, merged with `transitionProps` of `Tour.Root` */\n  transitionProps?: TransitionOverride;\n}\n\nexport type TourTooltipFactory = Factory<{\n  props: TourTooltipProps;\n  ref: HTMLDivElement;\n  stylesNames: TourTooltipStylesNames;\n  compound: true;\n}>;\n\nconst defaultProps: Partial<TourTooltipProps> = {\n  position: 'bottom',\n};\n\nexport const TourTooltip = factory<TourTooltipFactory>((_props) => {\n  const props = useProps('TourTooltip', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    vars,\n    targetElement,\n    position,\n    mounted,\n    transitionProps,\n    children,\n    ref,\n    role,\n    tabIndex,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    ...others\n  } = props;\n\n  const ctx = useTourContext();\n  const { dir } = useDirection();\n  const { setTargetElement } = ctx;\n\n  useEffect(() => {\n    setTargetElement(targetElement ?? null);\n    return () => setTargetElement(null);\n  }, [targetElement, setTargetElement]);\n\n  const { refs, floatingStyles } = useFloating({\n    elements: { reference: targetElement },\n    placement: getFloatingPosition(dir, position!),\n    whileElementsMounted: pressAwareAutoUpdate,\n    middleware: [offset(12), flip(), shift({ padding: 8 })],\n  });\n\n  const trapActive = !!mounted && ctx.withOverlay && !ctx.withOverlayInteraction;\n  const autoFocusRef = useTooltipAutoFocus({\n    autoFocus: !!mounted && !trapActive,\n    opened: !!mounted,\n    step: ctx.step,\n  });\n  const transition = { ...ctx.transitionProps, ...transitionProps };\n  const mergedRef = useMergedRef(refs.setFloating, autoFocusRef, ref);\n  const tooltipStyles = ctx.getStyles('tooltip', { className, classNames, style, styles });\n\n  return (\n    <Transition\n      mounted={!!mounted}\n      duration={transition.duration ?? 200}\n      transition={transition.transition ?? 'fade'}\n      timingFunction={transition.timingFunction}\n    >\n      {(transitionStyles) => (\n        <FocusTrap active={trapActive} innerRef={mergedRef}>\n          <Box\n            role={role ?? 'dialog'}\n            tabIndex={tabIndex ?? -1}\n            aria-labelledby={ariaLabelledBy ?? (ctx.titleMounted ? ctx.titleId : undefined)}\n            aria-label={\n              ariaLabel ??\n              (ctx.titleMounted ? undefined : ctx.labels.stepCounter(ctx.step + 1, ctx.stepsCount))\n            }\n            aria-describedby={ariaDescribedBy ?? (ctx.bodyMounted ? ctx.bodyId : undefined)}\n            {...tooltipStyles}\n            data-centered={!targetElement || undefined}\n            style={{\n              ...tooltipStyles.style,\n              ...(targetElement ? floatingStyles : {}),\n              ...transitionStyles,\n            }}\n            {...others}\n          >\n            {trapActive && <FocusTrap.InitialFocus />}\n            {children}\n          </Box>\n        </FocusTrap>\n      )}\n    </Transition>\n  );\n});\n\nTourTooltip.classes = classes;\nTourTooltip.displayName = '@mantine/core/TourTooltip';\n\nexport namespace TourTooltip {\n  export type Props = TourTooltipProps;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AA6CA,MAAM,eAA0C,EAC9C,UAAU,SACZ;AAEA,MAAa,cAAc,SAA6B,WAAW;CAEjE,MAAM,EACJ,YACA,WACA,OACA,QACA,MACA,eACA,UACA,SACA,iBACA,UACA,KACA,MACA,UACA,cAAc,WACd,mBAAmB,gBACnB,oBAAoB,iBACpB,GAAG,WAlBS,SAAS,eAAe,cAAc,MAmB5C;CAER,MAAM,MAAM,eAAe;CAC3B,MAAM,EAAE,QAAQ,aAAa;CAC7B,MAAM,EAAE,qBAAqB;CAE7B,gBAAgB;EACd,iBAAiB,iBAAiB,IAAI;EACtC,aAAa,iBAAiB,IAAI;CACpC,GAAG,CAAC,eAAe,gBAAgB,CAAC;CAEpC,MAAM,EAAE,MAAM,mBAAmB,YAAY;EAC3C,UAAU,EAAE,WAAW,cAAc;EACrC,WAAW,oBAAoB,KAAK,QAAS;EAC7C,sBAAsB;EACtB,YAAY;GAAC,OAAO,EAAE;GAAG,KAAK;GAAG,MAAM,EAAE,SAAS,EAAE,CAAC;EAAC;CACxD,CAAC;CAED,MAAM,aAAa,CAAC,CAAC,WAAW,IAAI,eAAe,CAAC,IAAI;CACxD,MAAM,eAAe,oBAAoB;EACvC,WAAW,CAAC,CAAC,WAAW,CAAC;EACzB,QAAQ,CAAC,CAAC;EACV,MAAM,IAAI;CACZ,CAAC;CACD,MAAM,aAAa;EAAE,GAAG,IAAI;EAAiB,GAAG;CAAgB;CAChE,MAAM,YAAY,aAAa,KAAK,aAAa,cAAc,GAAG;CAClE,MAAM,gBAAgB,IAAI,UAAU,WAAW;EAAE;EAAW;EAAY;EAAO;CAAO,CAAC;CAEvF,OACE,oBAAC,YAAD;EACE,SAAS,CAAC,CAAC;EACX,UAAU,WAAW,YAAY;EACjC,YAAY,WAAW,cAAc;EACrC,gBAAgB,WAAW;EAEzB,WAAA,qBACA,oBAAC,WAAD;GAAW,QAAQ;GAAY,UAAU;GACvC,UAAA,qBAAC,KAAD;IACE,MAAM,QAAQ;IACd,UAAU,YAAY;IACtB,mBAAiB,mBAAmB,IAAI,eAAe,IAAI,UAAU,KAAA;IACrE,cACE,cACC,IAAI,eAAe,KAAA,IAAY,IAAI,OAAO,YAAY,IAAI,OAAO,GAAG,IAAI,UAAU;IAErF,oBAAkB,oBAAoB,IAAI,cAAc,IAAI,SAAS,KAAA;IACrE,GAAI;IACJ,iBAAe,CAAC,iBAAiB,KAAA;IACjC,OAAO;KACL,GAAG,cAAc;KACjB,GAAI,gBAAgB,iBAAiB,CAAC;KACtC,GAAG;IACL;IACA,GAAI;IAhBN,UAAA,CAkBG,cAAc,oBAAC,UAAU,cAAX,CAAyB,CAAA,GACvC,QACE;;EACI,CAAA;CAEH,CAAA;AAEhB,CAAC;AAED,YAAY,UAAUA;AACtB,YAAY,cAAc"}

package/esm/components/Tour/get-overlay-hit-path.mjs

@@ -0,0 +1,17 @@
+"use client";
+//#region packages/@mantine/core/src/components/Tour/get-overlay-hit-path.ts
+const OVERLAY_EXTENT = 1e5;
+function getOverlayHitPath(targetRect, padding, radius) {
+	const outer = `M-100000 -100000H${OVERLAY_EXTENT}V${OVERLAY_EXTENT}H-100000Z`;
+	if (!targetRect) return outer;
+	const x = targetRect.left - padding;
+	const y = targetRect.top - padding;
+	const w = targetRect.width + padding * 2;
+	const h = targetRect.height + padding * 2;
+	const r = Math.max(0, Math.min(radius, w / 2, h / 2));
+	return `${outer}M${x + r} ${y}H${x + w - r}A${r} ${r} 0 0 1 ${x + w} ${y + r}V${y + h - r}A${r} ${r} 0 0 1 ${x + w - r} ${y + h}H${x + r}A${r} ${r} 0 0 1 ${x} ${y + h - r}V${y + r}A${r} ${r} 0 0 1 ${x + r} ${y}Z`;
+}
+//#endregion
+export { getOverlayHitPath };
+
+//# sourceMappingURL=get-overlay-hit-path.mjs.map

package/esm/components/Tour/get-overlay-hit-path.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-overlay-hit-path.mjs","names":[],"sources":["../../../src/components/Tour/get-overlay-hit-path.ts"],"sourcesContent":["import type { TargetRect } from './use-target-rect';\n\nconst OVERLAY_EXTENT = 100000;\n\nexport function getOverlayHitPath(\n  targetRect: TargetRect | null | undefined,\n  padding: number,\n  radius: number\n) {\n  const outer = `M${-OVERLAY_EXTENT} ${-OVERLAY_EXTENT}H${OVERLAY_EXTENT}V${OVERLAY_EXTENT}H${-OVERLAY_EXTENT}Z`;\n\n  if (!targetRect) {\n    return outer;\n  }\n\n  const x = targetRect.left - padding;\n  const y = targetRect.top - padding;\n  const w = targetRect.width + padding * 2;\n  const h = targetRect.height + padding * 2;\n  const r = Math.max(0, Math.min(radius, w / 2, h / 2));\n\n  return (\n    `${outer}M${x + r} ${y}H${x + w - r}A${r} ${r} 0 0 1 ${x + w} ${y + r}` +\n    `V${y + h - r}A${r} ${r} 0 0 1 ${x + w - r} ${y + h}` +\n    `H${x + r}A${r} ${r} 0 0 1 ${x} ${y + h - r}` +\n    `V${y + r}A${r} ${r} 0 0 1 ${x + r} ${y}Z`\n  );\n}\n"],"mappings":";;AAEA,MAAM,iBAAiB;AAEvB,SAAgB,kBACd,YACA,SACA,QACA;CACA,MAAM,QAAQ,oBAA0C,eAAe,GAAG,eAAe;CAEzF,IAAI,CAAC,YACH,OAAO;CAGT,MAAM,IAAI,WAAW,OAAO;CAC5B,MAAM,IAAI,WAAW,MAAM;CAC3B,MAAM,IAAI,WAAW,QAAQ,UAAU;CACvC,MAAM,IAAI,WAAW,SAAS,UAAU;CACxC,MAAM,IAAI,KAAK,IAAI,GAAG,KAAK,IAAI,QAAQ,IAAI,GAAG,IAAI,CAAC,CAAC;CAEpD,OACE,GAAG,MAAM,GAAG,IAAI,EAAE,GAAG,EAAE,GAAG,IAAI,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,IAAI,EAAE,GAAG,IAAI,EAAA,GAChE,IAAI,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,IAAI,IAAI,EAAE,GAAG,IAAI,EAAA,GAC9C,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,IAAI,IAAI,EAAA,GACtC,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,IAAI,EAAE,GAAG,EAAE;AAE5C"}