{"version":3,"file":"tour-content.cjs","sources":["../../../components/tour/tour-content.tsx"],"sourcesContent":["'use client';\n\nimport { Popover as PopoverPrimitive } from '@base-ui/react';\nimport { cx } from 'class-variance-authority';\nimport {\n  type CSSProperties,\n  type ReactNode,\n  useEffect,\n  useMemo,\n  useRef\n} from 'react';\nimport styles from './tour.module.css';\nimport { useTourContext } from './tour-context';\nimport { TourDefaultLayout } from './tour-parts';\nimport type { TourAlign, TourRenderProps, TourSide } from './types';\n\nexport interface TourContentProps {\n  /**\n   * Default side of the target to place the card on; steps can override.\n   * @default 'bottom'\n   */\n  side?: TourSide;\n  /** Default alignment against the target; steps can override. @default 'center' */\n  align?: TourAlign;\n  /** Default distance to the target in pixels; steps can override. @default 12 */\n  sideOffset?: number;\n  /** Whether to render the pointing arrow. @default false */\n  showArrow?: boolean;\n  className?: string;\n  style?: CSSProperties;\n  /**\n   * Card content: static nodes or a render function receiving the active\n   * step. Defaults to the standard layout built from `Tour.Title`,\n   * `Tour.Description`, `Tour.Progress` and the navigation buttons.\n   */\n  children?: ReactNode | ((props: TourRenderProps) => ReactNode);\n}\n\nexport function TourContent({\n  side = 'bottom',\n  align = 'center',\n  sideOffset = 12,\n  showArrow = false,\n  className,\n  style,\n  children\n}: TourContentProps) {\n  const {\n    popoverOpen,\n    anchor,\n    step,\n    steps,\n    index,\n    status,\n    actions,\n    transition,\n    revealed\n  } = useTourContext('Tour.Content');\n  const detached = step != null && step.target == null;\n  const popupRef = useRef<HTMLDivElement>(null);\n\n  const visible = transition !== 'fade' || revealed;\n\n  const centerAnchor = useMemo(\n    () => ({\n      getBoundingClientRect: () =>\n        DOMRect.fromRect({\n          x: window.innerWidth / 2,\n          y: window.innerHeight / 2,\n          width: 0,\n          height: 0\n        })\n    }),\n    []\n  );\n\n  const spotlightClicks = step?.spotlightClicks ?? false;\n  // biome-ignore lint/correctness/useExhaustiveDependencies: `index` is intentional — re-running on step change is how the card refocuses.\n  useEffect(() => {\n    if (!popoverOpen || !visible || spotlightClicks) return;\n    popupRef.current?.focus({ preventScroll: true });\n  }, [popoverOpen, visible, index, spotlightClicks]);\n\n  const renderProps: TourRenderProps | null = step\n    ? {\n        step,\n        index,\n        totalSteps: steps.length,\n        isFirstStep: index <= 0,\n        isLastStep: index >= steps.length - 1,\n        status,\n        actions\n      }\n    : null;\n\n  return (\n    <PopoverPrimitive.Root\n      open={popoverOpen}\n      modal={false}\n      onOpenChange={(nextOpen, eventDetails) => {\n        if (nextOpen) return;\n        // Tours are persistent — only Escape dismisses, not outside press/focus.\n        if (eventDetails.reason === 'escape-key') actions.stop();\n      }}\n    >\n      <PopoverPrimitive.Portal>\n        <PopoverPrimitive.Positioner\n          data-slot='tour-positioner'\n          anchor={detached ? centerAnchor : anchor}\n          side={step?.side ?? (detached ? 'top' : side)}\n          align={step?.align ?? align}\n          sideOffset={step?.sideOffset ?? sideOffset}\n          collisionPadding={12}\n          className={styles.positioner}\n          data-transition={transition}\n        >\n          <PopoverPrimitive.Popup\n            ref={popupRef}\n            data-slot='tour-content'\n            className={cx(styles.popup, className)}\n            style={style}\n            data-detached={detached || undefined}\n            data-transition={transition}\n            data-visible={visible ? 'true' : 'false'}\n          >\n            {showArrow && !detached && (\n              <PopoverPrimitive.Arrow\n                data-slot='tour-arrow'\n                className={styles.arrow}\n              >\n                <svg\n                  xmlns='http://www.w3.org/2000/svg'\n                  width='10'\n                  height='6'\n                  viewBox='0 0 10 6'\n                  fill='none'\n                  aria-hidden='true'\n                >\n                  <path\n                    d='M4.84682 5.97543L0 0H10L5.15318 5.97543C5.07309 6.07419 4.92691 6.07419 4.84682 5.97543Z'\n                    fill='currentColor'\n                  />\n                </svg>\n              </PopoverPrimitive.Arrow>\n            )}\n            {renderProps && (\n              <div\n                key={index}\n                data-slot='tour-step-content'\n                className={styles.stepContent}\n              >\n                {typeof children === 'function'\n                  ? children(renderProps)\n                  : (children ?? <TourDefaultLayout />)}\n              </div>\n            )}\n          </PopoverPrimitive.Popup>\n        </PopoverPrimitive.Positioner>\n      </PopoverPrimitive.Portal>\n    </PopoverPrimitive.Root>\n  );\n}\n\nTourContent.displayName = 'Tour.Content';\n"],"names":[],"mappings":";;;;;;;;;;;AAsCM;;;AAqBJ;AAEA;AAEA;AAEI;AAEI;AACA;AACA;AACA;;;AAMR;;;AAGE;;;;;AAKA;;;;;AAKI;;;AAGD;;;AAQC;;;AAEA;;AACF;AAiDY;AACA;AAQlB;AAEA;;"}