@mortenbrudvik/waveui 0.7.0 → 0.9.0

package/dist/components/overlays/TeachingPopover.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TeachingPopover.cjs","names":["resolveDeprecatedProp","useControllable","useId","useAnnounce","React","usePopupPosition","useMergedRefs","useDismiss","usePopoverTabOrder","getTabbableThrough","Portal","composeEventHandlers","cn","focusRing","PopoverBeak","Button","DismissIcon","forcedColors","focusableDisabledProps","preventIfDisabled","require_runtime","require_cn","require_dev","require_composeEventHandlers","require_useControllable","require_useId","require_useMergedRefs","require_aria","require_useAnnounce","require_useDismiss","require_Portal","require_styles","require_Button","require_icons","require_usePopupPosition","require_useRestoreFocus","require_Popover_shared","react","react_jsx_runtime","DEFAULT_BACK_LABEL","DEFAULT_NEXT_LABEL","DEFAULT_DONE_LABEL","defaultStepLabel","index","count","isRefObject","target","isElementTarget","resolveTarget","clampStep","step","TeachingPopover","activeStepProp","openProp","rest","controlledStep","currentStep","initialStep","defaultActiveStep","defaultCurrentStep","rawStep","setStep","onStepChange","open","setOpen","defaultOpen","onOpenChange","titleId","announce","steps","shown","outOfRange","stepTitle","isFirst","isLast","hasTarget","stepPosition","labels","surface","setSurface","targetResolved","setTargetResolved","elementAvailable","surfaceRef","targetRef","targetPropRef","availabilityRef","arrowRef","placedSide","targetAvailable","anchorReady","isPositioned","visible","elementRef","ref","setFloating","element","setReference","latest","available","dismiss","onDismiss","onSurfaceKeyDown","announcedIndexRef","handleBack","handleNext","onKeyDown","floatingProps","style","className","arrowStyles","closeLabel","i"],"sources":["../../../src/components/overlays/TeachingPopover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { resolveDeprecatedProp, warnOnce } from '../../lib/dev';\nimport { focusableDisabledProps, preventIfDisabled } from '../../lib/aria';\nimport { DismissIcon } from '../../lib/icons';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { focusRing, forcedColors } from '../../lib/styles';\nimport type { PopupAlign, PopupSide } from '../../lib/types';\nimport { useControllable } from '../../hooks/useControllable';\nimport { useId } from '../../hooks/useId';\nimport { useDismiss } from '../../hooks/useDismiss';\nimport { useRestoreFocus } from '../../hooks/useRestoreFocus';\nimport { usePopupPosition } from '../../hooks/usePopupPosition';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { useAnnounce } from '../../hooks/useAnnounce';\nimport { Button } from '../button/Button';\nimport { Portal } from '../portal/Portal';\nimport { getTabbableThrough, PopoverBeak, usePopoverTabOrder } from './Popover.shared';\n\n/** Defines a single step in a teaching popover sequence. */\nexport interface TeachingPopoverStep {\n  /** Title text for the step. */\n  title: string;\n  /** Body content for the step. */\n  body: React.ReactNode;\n}\n\n/** The built-in text of a TeachingPopover, for localization (see `TeachingPopoverProps.labels`). */\nexport interface TeachingPopoverLabels {\n  /** Text of the Back button.\n   * @default 'Back'\n   */\n  back?: string;\n  /** Text of the Next button.\n   * @default 'Next'\n   */\n  next?: string;\n  /** Text of the button that replaces Next on the last step.\n   * @default 'Done'\n   */\n  done?: string;\n  /**\n   * The position of the step at `index` (zero-based, like `activeStep`) out of `count` steps. It\n   * follows the step title, after a comma, in the visually hidden part of the heading and in the\n   * announcement of a step change.\n   * @default (index, count) => `step ${index + 1} of ${count}`\n   */\n  step?: (index: number, count: number) => string;\n}\n\nconst DEFAULT_BACK_LABEL = 'Back';\nconst DEFAULT_NEXT_LABEL = 'Next';\nconst DEFAULT_DONE_LABEL = 'Done';\nconst defaultStepLabel = (index: number, count: number) => `step ${index + 1} of ${count}`;\n\n/** Properties for the TeachingPopover component. */\nexport interface TeachingPopoverProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Steps to display in the teaching popover (a readonly array is accepted). */\n  steps: readonly TeachingPopoverStep[];\n  /**\n   * Controlled index of the displayed step. Out-of-range values are clamped to the first or last\n   * step (with a development warning).\n   */\n  activeStep?: number;\n  /** Initial step index for uncontrolled usage.\n   * @default 0\n   */\n  defaultActiveStep?: number;\n  /** @deprecated Use `activeStep`. */\n  currentStep?: number;\n  /** @deprecated Use `defaultActiveStep`. */\n  defaultCurrentStep?: number;\n  /** Called with the requested step index when Next or Back is activated. */\n  onStepChange?: (step: number) => void;\n  /** Called when the popover is dismissed with Close, Done or Escape. */\n  onDismiss?: () => void;\n  /** Controlled visibility of the teaching popover. */\n  open?: boolean;\n  /** Initial visibility for uncontrolled usage.\n   * @default true\n   */\n  defaultOpen?: boolean;\n  /** Called with `false` when Close, Done or Escape dismisses the popover. */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * Accessible name of the built-in Close button (an icon-only button). Localize it with the\n   * page's language.\n   * @default 'Close'\n   */\n  closeLabel?: string;\n  /**\n   * Text of the Back, Next and Done buttons and the wording of the step position (“step 2 of 3”),\n   * for localization. Unset members keep their English defaults.\n   */\n  labels?: TeachingPopoverLabels;\n  /**\n   * The element the popover points at (a ref or the element). When given, the popover is\n   * rendered in a portal, positioned next to it with a beak, and flips or shifts to stay in view;\n   * without it (`undefined`) the popover renders inline where it is placed (0.4 behaviour).\n   * While the target is `null` or has not been positioned against yet (an element held in state\n   * that is not set yet, a ref that is not attached), the popover stays hidden: it is not\n   * shown, takes no focus, announces no step change and does not handle Escape until it can\n   * point at the target. It hides the same way when the target goes away later and shows again\n   * when a target returns.\n   *\n   * An element (for example one held in state through a callback ref) is followed as soon as the\n   * prop changes. A ref cannot be observed, so it is read after each render of the popover is\n   * committed, wherever the target is in the tree: an element attaching to or detaching from the\n   * ref is noticed the next time the popover renders (for example when the parent that mounts or\n   * unmounts the target re-renders it), not in a commit that does not render the popover. A\n   * memoized popover whose target mounts or unmounts in another subtree therefore stays hidden,\n   * or keeps pointing at the removed element, until it renders again. A newly passed ref keeps\n   * the previous visibility until it has been read, so a tour can move between attached refs\n   * (`target={step === 0 ? aRef : bRef}`) without hiding, and a switch to a ref that is not\n   * attached hides the popover right after that commit. Pass the element held in state when the\n   * target can mount or unmount without the popover re-rendering.\n   */\n  target?: React.RefObject<HTMLElement | null> | HTMLElement | null;\n  /** Side of the `target` to open on; `start`/`end` follow the writing direction.\n   * @default 'bottom'\n   */\n  side?: PopupSide;\n  /** Alignment along the `target`'s edge.\n   * @default 'center'\n   */\n  align?: PopupAlign;\n  /** Ref to the popover surface (`role=\"dialog\"`). */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\nfunction isRefObject(\n  target: NonNullable<TeachingPopoverProps['target']>,\n): target is React.RefObject<HTMLElement | null> {\n  return 'current' in target;\n}\n\nfunction isElementTarget(target: TeachingPopoverProps['target']): target is HTMLElement {\n  return target != null && !isRefObject(target);\n}\n\nfunction resolveTarget(target: TeachingPopoverProps['target']): HTMLElement | null {\n  if (!target) return null;\n  return isRefObject(target) ? target.current : target;\n}\n\nfunction clampStep(step: number, count: number): number {\n  if (!Number.isFinite(step)) return 0;\n  return Math.min(Math.max(Math.trunc(step), 0), count - 1);\n}\n\n/**\n * A step-by-step onboarding popover (a non-modal `role=\"dialog\"`) with Back/Next (Done on the\n * last step) and Close.\n *\n * - Visibility is controllable: `open`/`defaultOpen` (default `true`)/`onOpenChange`; Close, Done\n *   and Escape (anywhere in the document) dismiss it and call `onDismiss`.\n * - The step is controllable with `activeStep`/`defaultActiveStep`/`onStepChange` and clamped to\n *   the available steps. The heading carries a visually hidden “step n of m”, the new step is\n *   announced politely, and Back stays focusable (`aria-disabled`) on the first step.\n * - The built-in text is English: `labels` localizes Back, Next, Done and the step position, and\n *   `closeLabel` the Close button.\n * - Focus moves to the popover when it opens and returns to the element that had it when it\n *   closes (with `target`, to the target when nothing had focus, e.g. a tour opened on page load).\n * - With `target`, the popover is portaled and positioned next to that element with a beak (it\n *   inherits the surface colors); it stays hidden while the target is `null`, not positioned yet or\n *   no longer mounted (a ref target is read after each render of the popover; see `target`).\n * - With `target`, the keyboard order treats the popover as if it followed the target: Tab past\n *   its last button continues after the target, Shift+Tab from its first button (or from the\n *   popover itself) returns to the target (for a target outside the Tab order, to the last control\n *   inside it, else to the control before it), Tab from there enters the popover, and Shift+Tab\n *   from the control after the target enters it at its last button. Tab from the last control of\n *   the page moves past the popover (it was visited after the target), and Shift+Tab from outside\n *   the page reaches the page's last control first, so a lap visits it once and Tab never cycles.\n *   With no control at or before the target, the popover is reached where it is portaled, at the\n *   end of the page: Tab from the page's last control and Shift+Tab from outside the page enter\n *   it.\n */\nexport const TeachingPopover = ({\n  steps,\n  activeStep: activeStepProp,\n  defaultActiveStep,\n  currentStep,\n  defaultCurrentStep,\n  onStepChange,\n  onDismiss,\n  open: openProp,\n  defaultOpen,\n  onOpenChange,\n  closeLabel = 'Close',\n  labels,\n  target,\n  side = 'bottom',\n  align = 'center',\n  className,\n  style,\n  onKeyDown,\n  ref,\n  ...rest\n}: TeachingPopoverProps) => {\n  const controlledStep = resolveDeprecatedProp(\n    'TeachingPopover',\n    activeStepProp,\n    currentStep,\n    'currentStep',\n    'activeStep',\n  );\n  const initialStep =\n    resolveDeprecatedProp(\n      'TeachingPopover',\n      defaultActiveStep,\n      defaultCurrentStep,\n      'defaultCurrentStep',\n      'defaultActiveStep',\n    ) ?? 0;\n  const [rawStep, setStep] = useControllable(controlledStep, initialStep, onStepChange);\n  const [open, setOpen] = useControllable(openProp, defaultOpen ?? true, onOpenChange);\n  const titleId = useId('teaching-popover-title');\n  const announce = useAnnounce();\n\n  const count = steps.length;\n  const shown = open && count > 0;\n  const index = count > 0 ? clampStep(rawStep, count) : 0;\n  const outOfRange = count > 0 && index !== rawStep;\n  const step = count > 0 ? steps[index] : undefined;\n  const stepTitle = step?.title;\n  const isFirst = index === 0;\n  const isLast = index === count - 1;\n  const hasTarget = target !== undefined;\n  const stepPosition = count > 0 ? (labels?.step ?? defaultStepLabel)(index, count) : '';\n\n  const [surface, setSurface] = React.useState<HTMLDivElement | null>(null);\n  // Whether `target` pointed at an element when it was last read. An element (or `null`) is known\n  // during render and is mirrored here right away (C-HOOKS: adjust state during render). A ref\n  // cannot be read during render, React does not re-render when it attaches or detaches, and\n  // floating-ui keeps `isPositioned` after `setReference(null)`, so the layout effect below reads\n  // a ref after each commit and mirrors it here through a deferred update (C-HOOKS). Until that\n  // update has read a newly passed ref, the ref keeps this last known availability: moving between\n  // attached refs (a multi-target tour) or passing a new ref object on every render never hides\n  // the popover, and a switch to a ref that is not attached hides it once the update lands.\n  const [targetResolved, setTargetResolved] = React.useState(() => isElementTarget(target));\n  const elementAvailable = target === null ? false : isElementTarget(target) ? true : undefined;\n  if (elementAvailable !== undefined && elementAvailable !== targetResolved) {\n    setTargetResolved(elementAvailable);\n  }\n  const surfaceRef = React.useRef<HTMLDivElement | null>(null);\n  const targetRef = React.useRef<HTMLElement | null>(null);\n  // The latest `target` prop and committed availability, read by the deferred update so that the\n  // newest target and attachment win and an unchanged resolution sets no state.\n  const targetPropRef = React.useRef(target);\n  const availabilityRef = React.useRef(targetResolved);\n  const arrowRef = React.useRef<HTMLDivElement | null>(null);\n\n  // Destructured: react-hooks/refs treats an object whose member is passed to `ref` as a ref.\n  const {\n    setReference,\n    setFloating,\n    floatingProps,\n    arrowStyles,\n    side: placedSide,\n    isPositioned,\n  } = usePopupPosition({ open: shown && hasTarget, side, align, offset: 12, arrowRef });\n  // An anchored popover is shown only while it points at a resolved target: otherwise the surface\n  // is rendered (so it can be measured) but hidden, unfocused, silent and without an Escape layer.\n  const targetAvailable = target != null && (isRefObject(target) ? targetResolved : true);\n  const anchorReady = !hasTarget || (targetAvailable && isPositioned);\n  const visible = shown && anchorReady;\n  const elementRef = useMergedRefs<HTMLDivElement>(ref, surfaceRef, setSurface, setFloating);\n\n  // Point the positioning at the target after every commit. A ref is read once more when the whole\n  // commit is done (the C-HOOKS deferred-update pattern): a target that comes after the popover in\n  // the tree attaches its ref after this effect has run. That update re-reads the latest target,\n  // and only a changed element or availability updates the reference or the state.\n  React.useLayoutEffect(() => {\n    targetPropRef.current = target;\n    availabilityRef.current = targetResolved;\n    const element = resolveTarget(target);\n    targetRef.current = element;\n    setReference(element);\n    if (target == null || !isRefObject(target)) return;\n    queueMicrotask(() => {\n      const latest = resolveTarget(targetPropRef.current);\n      if (latest !== targetRef.current) {\n        targetRef.current = latest;\n        setReference(latest);\n      }\n      const available = latest !== null;\n      if (available !== availabilityRef.current) {\n        availabilityRef.current = available;\n        setTargetResolved(available);\n      }\n    });\n  });\n\n  const dismiss = () => {\n    setOpen(false);\n    onDismiss?.();\n  };\n\n  const { layerId } = useDismiss({\n    open: visible,\n    onDismiss: dismiss,\n    refs: [surfaceRef],\n    anchorRef: targetRef,\n    kind: 'popover',\n    outsidePress: false,\n  });\n\n  useRestoreFocus({\n    enabled: visible,\n    container: surface,\n    fallback: () => targetRef.current,\n    onlyIfFocusInside: true,\n  });\n\n  // Portaled next to a target: the keyboard order of the popover placed right after the target.\n  const onSurfaceKeyDown = usePopoverTabOrder({\n    enabled: visible && hasTarget,\n    surface,\n    anchorRef: targetRef,\n    getPreviousStop: getTabbableThrough,\n  });\n\n  // Move focus into the popover when it becomes visible (and when a new surface mounts).\n  React.useEffect(() => {\n    if (visible && surface) surface.focus({ preventScroll: hasTarget });\n  }, [visible, surface, hasTarget]);\n\n  // Announce the new step politely after a step change (not on mount, and not while hidden: the\n  // heading, which carries the step position, is read when the popover shows and takes focus).\n  const announcedIndexRef = React.useRef(index);\n  React.useEffect(() => {\n    if (announcedIndexRef.current === index) return;\n    announcedIndexRef.current = index;\n    if (visible && stepTitle !== undefined) {\n      announce(`${stepTitle}, ${stepPosition}`);\n    }\n  }, [index, visible, stepTitle, stepPosition, announce]);\n\n  React.useEffect(() => {\n    if (!outOfRange) return;\n    warnOnce(\n      'TeachingPopover:activeStep-range',\n      `TeachingPopover: activeStep ${rawStep} is out of range for ${count} steps; showing step ${index + 1}.`,\n    );\n  }, [outOfRange, rawStep, count, index]);\n\n  if (!shown || !step) return null;\n\n  const handleBack = () => setStep(index - 1);\n  const handleNext = () => {\n    if (isLast) dismiss();\n    else setStep(index + 1);\n  };\n\n  return (\n    <Portal disabled={!hasTarget} layerId={layerId}>\n      <div\n        role=\"dialog\"\n        aria-labelledby={titleId}\n        tabIndex={-1}\n        {...rest}\n        ref={elementRef}\n        onKeyDown={composeEventHandlers(onKeyDown, onSurfaceKeyDown)}\n        {...(hasTarget\n          ? {\n              'data-side': floatingProps['data-side'],\n              'data-align': floatingProps['data-align'],\n              style: {\n                ...style,\n                ...floatingProps.style,\n                ...(anchorReady ? undefined : { visibility: 'hidden' as const }),\n              },\n            }\n          : { style })}\n        className={cn(\n          'relative w-80 rounded-md border border-border bg-background p-5 text-foreground shadow-8',\n          focusRing,\n          className,\n        )}\n      >\n        {hasTarget && (\n          <PopoverBeak\n            ref={arrowRef}\n            side={placedSide}\n            style={arrowStyles}\n            data-wave-teaching-popover-arrow=\"\"\n          />\n        )}\n\n        <Button\n          appearance=\"subtle\"\n          size=\"small\"\n          icon={<DismissIcon />}\n          aria-label={closeLabel}\n          className=\"absolute end-3 top-3\"\n          onClick={dismiss}\n        />\n\n        <h3 id={titleId} className=\"mb-2 pe-8 text-subtitle-1 font-semibold text-foreground\">\n          {step.title}\n          <span className=\"sr-only\">{`, ${stepPosition}`}</span>\n        </h3>\n\n        <div className=\"mb-4 text-body-1 text-muted-foreground\">{step.body}</div>\n\n        <div className=\"flex items-center justify-between gap-2\">\n          <div aria-hidden=\"true\" className=\"flex items-center gap-1.5\">\n            {steps.map((_, i) => (\n              <span\n                key={i}\n                data-wave-teaching-popover-dot=\"\"\n                aria-current={i === index ? 'step' : undefined}\n                className={cn(\n                  'h-1.5 rounded-full transition-[width,background-color] motion-reduce:transition-none',\n                  i === index\n                    ? cn('w-4 bg-primary', forcedColors.fill)\n                    : 'w-1.5 bg-stroke-accessible forced-colors:bg-[CanvasText] forced-colors:forced-color-adjust-none',\n                )}\n              />\n            ))}\n          </div>\n\n          <div className=\"flex items-center gap-2\">\n            {count > 1 && (\n              <Button\n                {...focusableDisabledProps(isFirst)}\n                onClick={preventIfDisabled(isFirst, handleBack)}\n              >\n                {labels?.back ?? DEFAULT_BACK_LABEL}\n              </Button>\n            )}\n            <Button appearance=\"primary\" onClick={handleNext}>\n              {isLast ? (labels?.done ?? DEFAULT_DONE_LABEL) : (labels?.next ?? DEFAULT_NEXT_LABEL)}\n            </Button>\n          </div>\n        </div>\n      </div>\n    </Portal>\n  );\n};\nTeachingPopover.displayName = 'TeachingPopover';\n"],"mappings":"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"}
+{"version":3,"file":"TeachingPopover.cjs","names":["resolveDeprecatedProp","useControllable","useId","useAnnounce","React","usePopupPosition","useMergedRefs","useDismiss","usePopoverTabOrder","getTabbableThrough","Portal","composeEventHandlers","cn","teachingPopoverClassNames","focusRing","PopoverBeak","Button","DismissIcon","forcedColors","focusableDisabledProps","preventIfDisabled","require_runtime","require_cn","require_dev","require_composeEventHandlers","require_classNames","require_useControllable","require_useId","require_useMergedRefs","require_aria","require_useAnnounce","require_useDismiss","require_Portal","require_styles","require_Button","require_icons","require_usePopupPosition","require_useRestoreFocus","require_Popover_shared","react","react_jsx_runtime","DEFAULT_BACK_LABEL","DEFAULT_NEXT_LABEL","DEFAULT_DONE_LABEL","defaultStepLabel","index","count","isRefObject","target","isElementTarget","resolveTarget","clampStep","step","TeachingPopover","activeStepProp","openProp","rest","controlledStep","currentStep","initialStep","defaultActiveStep","defaultCurrentStep","rawStep","setStep","onStepChange","open","setOpen","defaultOpen","onOpenChange","titleId","announce","steps","shown","outOfRange","stepTitle","isFirst","isLast","hasTarget","stepPosition","labels","surface","setSurface","targetResolved","setTargetResolved","elementAvailable","surfaceRef","targetRef","targetPropRef","availabilityRef","arrowRef","placedSide","targetAvailable","anchorReady","isPositioned","visible","elementRef","ref","setFloating","element","setReference","latest","available","dismiss","onDismiss","onSurfaceKeyDown","announcedIndexRef","handleBack","handleNext","onKeyDown","floatingProps","style","className","arrowStyles","closeLabel","i"],"sources":["../../../src/components/overlays/TeachingPopover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { teachingPopoverClassNames } from '../../lib/classNames';\nimport { resolveDeprecatedProp, warnOnce } from '../../lib/dev';\nimport { focusableDisabledProps, preventIfDisabled } from '../../lib/aria';\nimport { DismissIcon } from '../../lib/icons';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { focusRing, forcedColors } from '../../lib/styles';\nimport type { PopupAlign, PopupSide } from '../../lib/types';\nimport { useControllable } from '../../hooks/useControllable';\nimport { useId } from '../../hooks/useId';\nimport { useDismiss } from '../../hooks/useDismiss';\nimport { useRestoreFocus } from '../../hooks/useRestoreFocus';\nimport { usePopupPosition } from '../../hooks/usePopupPosition';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { useAnnounce } from '../../hooks/useAnnounce';\nimport { Button } from '../button/Button';\nimport { Portal } from '../portal/Portal';\nimport { getTabbableThrough, PopoverBeak, usePopoverTabOrder } from './Popover.shared';\n\n/** Defines a single step in a teaching popover sequence. */\nexport interface TeachingPopoverStep {\n  /** Title text for the step. */\n  title: string;\n  /** Body content for the step. */\n  body: React.ReactNode;\n}\n\n/** The built-in text of a TeachingPopover, for localization (see `TeachingPopoverProps.labels`). */\nexport interface TeachingPopoverLabels {\n  /** Text of the Back button.\n   * @default 'Back'\n   */\n  back?: string;\n  /** Text of the Next button.\n   * @default 'Next'\n   */\n  next?: string;\n  /** Text of the button that replaces Next on the last step.\n   * @default 'Done'\n   */\n  done?: string;\n  /**\n   * The position of the step at `index` (zero-based, like `activeStep`) out of `count` steps. It\n   * follows the step title, after a comma, in the visually hidden part of the heading and in the\n   * announcement of a step change.\n   * @default (index, count) => `step ${index + 1} of ${count}`\n   */\n  step?: (index: number, count: number) => string;\n}\n\nconst DEFAULT_BACK_LABEL = 'Back';\nconst DEFAULT_NEXT_LABEL = 'Next';\nconst DEFAULT_DONE_LABEL = 'Done';\nconst defaultStepLabel = (index: number, count: number) => `step ${index + 1} of ${count}`;\n\n/** Properties for the TeachingPopover component. */\nexport interface TeachingPopoverProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Steps to display in the teaching popover (a readonly array is accepted). */\n  steps: readonly TeachingPopoverStep[];\n  /**\n   * Controlled index of the displayed step. Out-of-range values are clamped to the first or last\n   * step (with a development warning).\n   */\n  activeStep?: number;\n  /** Initial step index for uncontrolled usage.\n   * @default 0\n   */\n  defaultActiveStep?: number;\n  /** @deprecated Use `activeStep`. */\n  currentStep?: number;\n  /** @deprecated Use `defaultActiveStep`. */\n  defaultCurrentStep?: number;\n  /** Called with the requested step index when Next or Back is activated. */\n  onStepChange?: (step: number) => void;\n  /** Called when the popover is dismissed with Close, Done or Escape. */\n  onDismiss?: () => void;\n  /** Controlled visibility of the teaching popover. */\n  open?: boolean;\n  /** Initial visibility for uncontrolled usage.\n   * @default true\n   */\n  defaultOpen?: boolean;\n  /** Called with `false` when Close, Done or Escape dismisses the popover. */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * Accessible name of the built-in Close button (an icon-only button). Localize it with the\n   * page's language.\n   * @default 'Close'\n   */\n  closeLabel?: string;\n  /**\n   * Text of the Back, Next and Done buttons and the wording of the step position (“step 2 of 3”),\n   * for localization. Unset members keep their English defaults.\n   */\n  labels?: TeachingPopoverLabels;\n  /**\n   * The element the popover points at (a ref or the element). When given, the popover is\n   * rendered in a portal, positioned next to it with a beak, and flips or shifts to stay in view;\n   * without it (`undefined`) the popover renders inline where it is placed (0.4 behaviour).\n   * While the target is `null` or has not been positioned against yet (an element held in state\n   * that is not set yet, a ref that is not attached), the popover stays hidden: it is not\n   * shown, takes no focus, announces no step change and does not handle Escape until it can\n   * point at the target. It hides the same way when the target goes away later and shows again\n   * when a target returns.\n   *\n   * An element (for example one held in state through a callback ref) is followed as soon as the\n   * prop changes. A ref cannot be observed, so it is read after each render of the popover is\n   * committed, wherever the target is in the tree: an element attaching to or detaching from the\n   * ref is noticed the next time the popover renders (for example when the parent that mounts or\n   * unmounts the target re-renders it), not in a commit that does not render the popover. A\n   * memoized popover whose target mounts or unmounts in another subtree therefore stays hidden,\n   * or keeps pointing at the removed element, until it renders again. A newly passed ref keeps\n   * the previous visibility until it has been read, so a tour can move between attached refs\n   * (`target={step === 0 ? aRef : bRef}`) without hiding, and a switch to a ref that is not\n   * attached hides the popover right after that commit. Pass the element held in state when the\n   * target can mount or unmount without the popover re-rendering.\n   */\n  target?: React.RefObject<HTMLElement | null> | HTMLElement | null;\n  /** Side of the `target` to open on; `start`/`end` follow the writing direction.\n   * @default 'bottom'\n   */\n  side?: PopupSide;\n  /** Alignment along the `target`'s edge.\n   * @default 'center'\n   */\n  align?: PopupAlign;\n  /** Ref to the popover surface (`role=\"dialog\"`). */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\nfunction isRefObject(\n  target: NonNullable<TeachingPopoverProps['target']>,\n): target is React.RefObject<HTMLElement | null> {\n  return 'current' in target;\n}\n\nfunction isElementTarget(target: TeachingPopoverProps['target']): target is HTMLElement {\n  return target != null && !isRefObject(target);\n}\n\nfunction resolveTarget(target: TeachingPopoverProps['target']): HTMLElement | null {\n  if (!target) return null;\n  return isRefObject(target) ? target.current : target;\n}\n\nfunction clampStep(step: number, count: number): number {\n  if (!Number.isFinite(step)) return 0;\n  return Math.min(Math.max(Math.trunc(step), 0), count - 1);\n}\n\n/**\n * A step-by-step onboarding popover (a non-modal `role=\"dialog\"`) with Back/Next (Done on the\n * last step) and Close.\n *\n * - Visibility is controllable: `open`/`defaultOpen` (default `true`)/`onOpenChange`; Close, Done\n *   and Escape (anywhere in the document) dismiss it and call `onDismiss`.\n * - The step is controllable with `activeStep`/`defaultActiveStep`/`onStepChange` and clamped to\n *   the available steps. The heading carries a visually hidden “step n of m”, the new step is\n *   announced politely, and Back stays focusable (`aria-disabled`) on the first step.\n * - The built-in text is English: `labels` localizes Back, Next, Done and the step position, and\n *   `closeLabel` the Close button.\n * - Focus moves to the popover when it opens and returns to the element that had it when it\n *   closes (with `target`, to the target when nothing had focus, e.g. a tour opened on page load).\n * - With `target`, the popover is portaled and positioned next to that element with a beak (it\n *   inherits the surface colors); it stays hidden while the target is `null`, not positioned yet or\n *   no longer mounted (a ref target is read after each render of the popover; see `target`).\n * - With `target`, the keyboard order treats the popover as if it followed the target: Tab past\n *   its last button continues after the target, Shift+Tab from its first button (or from the\n *   popover itself) returns to the target (for a target outside the Tab order, to the last control\n *   inside it, else to the control before it), Tab from there enters the popover, and Shift+Tab\n *   from the control after the target enters it at its last button. Tab from the last control of\n *   the page moves past the popover (it was visited after the target), and Shift+Tab from outside\n *   the page reaches the page's last control first, so a lap visits it once and Tab never cycles.\n *   With no control at or before the target, the popover is reached where it is portaled, at the\n *   end of the page: Tab from the page's last control and Shift+Tab from outside the page enter\n *   it.\n */\nexport const TeachingPopover = ({\n  steps,\n  activeStep: activeStepProp,\n  defaultActiveStep,\n  currentStep,\n  defaultCurrentStep,\n  onStepChange,\n  onDismiss,\n  open: openProp,\n  defaultOpen,\n  onOpenChange,\n  closeLabel = 'Close',\n  labels,\n  target,\n  side = 'bottom',\n  align = 'center',\n  className,\n  style,\n  onKeyDown,\n  ref,\n  ...rest\n}: TeachingPopoverProps) => {\n  const controlledStep = resolveDeprecatedProp(\n    'TeachingPopover',\n    activeStepProp,\n    currentStep,\n    'currentStep',\n    'activeStep',\n  );\n  const initialStep =\n    resolveDeprecatedProp(\n      'TeachingPopover',\n      defaultActiveStep,\n      defaultCurrentStep,\n      'defaultCurrentStep',\n      'defaultActiveStep',\n    ) ?? 0;\n  const [rawStep, setStep] = useControllable(controlledStep, initialStep, onStepChange);\n  const [open, setOpen] = useControllable(openProp, defaultOpen ?? true, onOpenChange);\n  const titleId = useId('teaching-popover-title');\n  const announce = useAnnounce();\n\n  const count = steps.length;\n  const shown = open && count > 0;\n  const index = count > 0 ? clampStep(rawStep, count) : 0;\n  const outOfRange = count > 0 && index !== rawStep;\n  const step = count > 0 ? steps[index] : undefined;\n  const stepTitle = step?.title;\n  const isFirst = index === 0;\n  const isLast = index === count - 1;\n  const hasTarget = target !== undefined;\n  const stepPosition = count > 0 ? (labels?.step ?? defaultStepLabel)(index, count) : '';\n\n  const [surface, setSurface] = React.useState<HTMLDivElement | null>(null);\n  // Whether `target` pointed at an element when it was last read. An element (or `null`) is known\n  // during render and is mirrored here right away (C-HOOKS: adjust state during render). A ref\n  // cannot be read during render, React does not re-render when it attaches or detaches, and\n  // floating-ui keeps `isPositioned` after `setReference(null)`, so the layout effect below reads\n  // a ref after each commit and mirrors it here through a deferred update (C-HOOKS). Until that\n  // update has read a newly passed ref, the ref keeps this last known availability: moving between\n  // attached refs (a multi-target tour) or passing a new ref object on every render never hides\n  // the popover, and a switch to a ref that is not attached hides it once the update lands.\n  const [targetResolved, setTargetResolved] = React.useState(() => isElementTarget(target));\n  const elementAvailable = target === null ? false : isElementTarget(target) ? true : undefined;\n  if (elementAvailable !== undefined && elementAvailable !== targetResolved) {\n    setTargetResolved(elementAvailable);\n  }\n  const surfaceRef = React.useRef<HTMLDivElement | null>(null);\n  const targetRef = React.useRef<HTMLElement | null>(null);\n  // The latest `target` prop and committed availability, read by the deferred update so that the\n  // newest target and attachment win and an unchanged resolution sets no state.\n  const targetPropRef = React.useRef(target);\n  const availabilityRef = React.useRef(targetResolved);\n  const arrowRef = React.useRef<HTMLDivElement | null>(null);\n\n  // Destructured: react-hooks/refs treats an object whose member is passed to `ref` as a ref.\n  const {\n    setReference,\n    setFloating,\n    floatingProps,\n    arrowStyles,\n    side: placedSide,\n    isPositioned,\n  } = usePopupPosition({ open: shown && hasTarget, side, align, offset: 12, arrowRef });\n  // An anchored popover is shown only while it points at a resolved target: otherwise the surface\n  // is rendered (so it can be measured) but hidden, unfocused, silent and without an Escape layer.\n  const targetAvailable = target != null && (isRefObject(target) ? targetResolved : true);\n  const anchorReady = !hasTarget || (targetAvailable && isPositioned);\n  const visible = shown && anchorReady;\n  const elementRef = useMergedRefs<HTMLDivElement>(ref, surfaceRef, setSurface, setFloating);\n\n  // Point the positioning at the target after every commit. A ref is read once more when the whole\n  // commit is done (the C-HOOKS deferred-update pattern): a target that comes after the popover in\n  // the tree attaches its ref after this effect has run. That update re-reads the latest target,\n  // and only a changed element or availability updates the reference or the state.\n  React.useLayoutEffect(() => {\n    targetPropRef.current = target;\n    availabilityRef.current = targetResolved;\n    const element = resolveTarget(target);\n    targetRef.current = element;\n    setReference(element);\n    if (target == null || !isRefObject(target)) return;\n    queueMicrotask(() => {\n      const latest = resolveTarget(targetPropRef.current);\n      if (latest !== targetRef.current) {\n        targetRef.current = latest;\n        setReference(latest);\n      }\n      const available = latest !== null;\n      if (available !== availabilityRef.current) {\n        availabilityRef.current = available;\n        setTargetResolved(available);\n      }\n    });\n  });\n\n  const dismiss = () => {\n    setOpen(false);\n    onDismiss?.();\n  };\n\n  const { layerId } = useDismiss({\n    open: visible,\n    onDismiss: dismiss,\n    refs: [surfaceRef],\n    anchorRef: targetRef,\n    kind: 'popover',\n    outsidePress: false,\n  });\n\n  useRestoreFocus({\n    enabled: visible,\n    container: surface,\n    fallback: () => targetRef.current,\n    onlyIfFocusInside: true,\n  });\n\n  // Portaled next to a target: the keyboard order of the popover placed right after the target.\n  const onSurfaceKeyDown = usePopoverTabOrder({\n    enabled: visible && hasTarget,\n    surface,\n    anchorRef: targetRef,\n    getPreviousStop: getTabbableThrough,\n  });\n\n  // Move focus into the popover when it becomes visible (and when a new surface mounts).\n  React.useEffect(() => {\n    if (visible && surface) surface.focus({ preventScroll: hasTarget });\n  }, [visible, surface, hasTarget]);\n\n  // Announce the new step politely after a step change (not on mount, and not while hidden: the\n  // heading, which carries the step position, is read when the popover shows and takes focus).\n  const announcedIndexRef = React.useRef(index);\n  React.useEffect(() => {\n    if (announcedIndexRef.current === index) return;\n    announcedIndexRef.current = index;\n    if (visible && stepTitle !== undefined) {\n      announce(`${stepTitle}, ${stepPosition}`);\n    }\n  }, [index, visible, stepTitle, stepPosition, announce]);\n\n  React.useEffect(() => {\n    if (!outOfRange) return;\n    warnOnce(\n      'TeachingPopover:activeStep-range',\n      `TeachingPopover: activeStep ${rawStep} is out of range for ${count} steps; showing step ${index + 1}.`,\n    );\n  }, [outOfRange, rawStep, count, index]);\n\n  if (!shown || !step) return null;\n\n  const handleBack = () => setStep(index - 1);\n  const handleNext = () => {\n    if (isLast) dismiss();\n    else setStep(index + 1);\n  };\n\n  return (\n    <Portal disabled={!hasTarget} layerId={layerId}>\n      <div\n        role=\"dialog\"\n        aria-labelledby={titleId}\n        tabIndex={-1}\n        {...rest}\n        ref={elementRef}\n        onKeyDown={composeEventHandlers(onKeyDown, onSurfaceKeyDown)}\n        {...(hasTarget\n          ? {\n              'data-side': floatingProps['data-side'],\n              'data-align': floatingProps['data-align'],\n              style: {\n                ...style,\n                ...floatingProps.style,\n                ...(anchorReady ? undefined : { visibility: 'hidden' as const }),\n              },\n            }\n          : { style })}\n        className={cn(\n          teachingPopoverClassNames.root,\n          'relative w-80 rounded-md border border-border bg-background p-5 text-foreground shadow-8',\n          focusRing,\n          className,\n        )}\n      >\n        {hasTarget && (\n          <PopoverBeak\n            ref={arrowRef}\n            side={placedSide}\n            style={arrowStyles}\n            data-wave-teaching-popover-arrow=\"\"\n            className={teachingPopoverClassNames.beak}\n          />\n        )}\n\n        <Button\n          appearance=\"subtle\"\n          size=\"small\"\n          icon={<DismissIcon />}\n          aria-label={closeLabel}\n          className={cn(teachingPopoverClassNames.closeButton, 'absolute end-3 top-3')}\n          onClick={dismiss}\n        />\n\n        <h3\n          id={titleId}\n          className={cn(\n            teachingPopoverClassNames.title,\n            'mb-2 pe-8 text-subtitle-1 font-semibold text-foreground',\n          )}\n        >\n          {step.title}\n          <span className=\"sr-only\">{`, ${stepPosition}`}</span>\n        </h3>\n\n        <div\n          className={cn(teachingPopoverClassNames.body, 'mb-4 text-body-1 text-muted-foreground')}\n        >\n          {step.body}\n        </div>\n\n        <div\n          className={cn(\n            teachingPopoverClassNames.footer,\n            'flex items-center justify-between gap-2',\n          )}\n        >\n          <div aria-hidden=\"true\" className=\"flex items-center gap-1.5\">\n            {steps.map((_, i) => (\n              <span\n                key={i}\n                data-wave-teaching-popover-dot=\"\"\n                aria-current={i === index ? 'step' : undefined}\n                className={cn(\n                  teachingPopoverClassNames.dot,\n                  'h-1.5 rounded-full transition-[width,background-color] motion-reduce:transition-none',\n                  i === index\n                    ? cn('w-4 bg-primary', forcedColors.fill)\n                    : 'w-1.5 bg-stroke-accessible forced-colors:bg-[CanvasText] forced-colors:forced-color-adjust-none',\n                )}\n              />\n            ))}\n          </div>\n\n          <div className=\"flex items-center gap-2\">\n            {count > 1 && (\n              <Button\n                {...focusableDisabledProps(isFirst)}\n                className={teachingPopoverClassNames.backButton}\n                onClick={preventIfDisabled(isFirst, handleBack)}\n              >\n                {labels?.back ?? DEFAULT_BACK_LABEL}\n              </Button>\n            )}\n            <Button\n              appearance=\"primary\"\n              className={teachingPopoverClassNames.nextButton}\n              onClick={handleNext}\n            >\n              {isLast ? (labels?.done ?? DEFAULT_DONE_LABEL) : (labels?.next ?? DEFAULT_NEXT_LABEL)}\n            </Button>\n          </div>\n        </div>\n      </div>\n    </Portal>\n  );\n};\nTeachingPopover.displayName = 'TeachingPopover';\n"],"mappings":"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"}

package/dist/components/overlays/TeachingPopover.mjs

@@ -2,23 +2,24 @@
 import { cn as e } from "../../lib/cn.mjs";
 import { resolveDeprecatedProp as t, warnOnce as n } from "../../lib/dev.mjs";
 import { composeEventHandlers as ee } from "../../lib/composeEventHandlers.mjs";
-import { useControllable as r } from "../../hooks/useControllable.mjs";
+import { teachingPopoverClassNames as r } from "../../lib/classNames.mjs";
+import { useControllable as i } from "../../hooks/useControllable.mjs";
 import { useId as te } from "../../hooks/useId.mjs";
 import { useMergedRefs as ne } from "../../hooks/useMergedRefs.mjs";
 import { focusableDisabledProps as re, preventIfDisabled as ie } from "../../lib/aria.mjs";
 import { useAnnounce as ae } from "../../hooks/useAnnounce.mjs";
 import { useDismiss as oe } from "../../hooks/useDismiss.mjs";
 import { Portal as se } from "../portal/Portal.mjs";
-import { focusRing as i, forcedColors as ce } from "../../lib/styles.mjs";
+import { focusRing as ce, forcedColors as le } from "../../lib/styles.mjs";
 import { Button as a } from "../button/Button.mjs";
-import { DismissIcon as le } from "../../lib/icons.mjs";
-import { usePopupPosition as o } from "../../hooks/usePopupPosition.mjs";
-import { useRestoreFocus as ue } from "../../hooks/useRestoreFocus.mjs";
-import { PopoverBeak as de, getTabbableThrough as fe, usePopoverTabOrder as pe } from "./Popover.shared.mjs";
+import { DismissIcon as o } from "../../lib/icons.mjs";
+import { usePopupPosition as ue } from "../../hooks/usePopupPosition.mjs";
+import { useRestoreFocus as de } from "../../hooks/useRestoreFocus.mjs";
+import { PopoverBeak as fe, getTabbableThrough as pe, usePopoverTabOrder as me } from "./Popover.shared.mjs";
 import * as s from "react";
 import { jsx as c, jsxs as l } from "react/jsx-runtime";
 //#region src/components/overlays/TeachingPopover.tsx
-var me = "Back", he = "Next", ge = "Done", _e = (e, t) => `step ${e + 1} of ${t}`;
+var he = "Back", ge = "Next", _e = "Done", ve = (e, t) => `step ${e + 1} of ${t}`;
 function u(e) {
 	return "current" in e;
 }
@@ -31,16 +32,16 @@ function f(e) {
 function p(e, t) {
 	return Number.isFinite(e) ? Math.min(Math.max(Math.trunc(e), 0), t - 1) : 0;
 }
-var m = ({ steps: m, activeStep: ve, defaultActiveStep: ye, currentStep: be, defaultCurrentStep: xe, onStepChange: Se, onDismiss: Ce, open: we, defaultOpen: Te, onOpenChange: Ee, closeLabel: De = "Close", labels: h, target: g, side: Oe = "bottom", align: _ = "center", className: v, style: y, onKeyDown: b, ref: x, ...S }) => {
-	let C = t("TeachingPopover", ve, be, "currentStep", "activeStep"), w = t("TeachingPopover", ye, xe, "defaultCurrentStep", "defaultActiveStep") ?? 0, [T, E] = r(C, w, Se), [ke, Ae] = r(we, Te ?? !0, Ee), D = te("teaching-popover-title"), O = ae(), k = m.length, A = ke && k > 0, j = k > 0 ? p(T, k) : 0, M = k > 0 && j !== T, N = k > 0 ? m[j] : void 0, P = N?.title, F = j === 0, I = j === k - 1, L = g !== void 0, R = k > 0 ? (h?.step ?? _e)(j, k) : "", [z, je] = s.useState(null), [B, V] = s.useState(() => d(g)), H = g === null ? !1 : d(g) ? !0 : void 0;
+var m = ({ steps: m, activeStep: ye, defaultActiveStep: be, currentStep: xe, defaultCurrentStep: Se, onStepChange: Ce, onDismiss: we, open: Te, defaultOpen: Ee, onOpenChange: De, closeLabel: Oe = "Close", labels: h, target: g, side: ke = "bottom", align: _ = "center", className: v, style: y, onKeyDown: b, ref: x, ...S }) => {
+	let C = t("TeachingPopover", ye, xe, "currentStep", "activeStep"), w = t("TeachingPopover", be, Se, "defaultCurrentStep", "defaultActiveStep") ?? 0, [T, E] = i(C, w, Ce), [Ae, je] = i(Te, Ee ?? !0, De), D = te("teaching-popover-title"), O = ae(), k = m.length, A = Ae && k > 0, j = k > 0 ? p(T, k) : 0, M = k > 0 && j !== T, N = k > 0 ? m[j] : void 0, P = N?.title, F = j === 0, I = j === k - 1, L = g !== void 0, R = k > 0 ? (h?.step ?? ve)(j, k) : "", [z, Me] = s.useState(null), [B, V] = s.useState(() => d(g)), H = g === null ? !1 : d(g) ? !0 : void 0;
 	H !== void 0 && H !== B && V(H);
-	let U = s.useRef(null), W = s.useRef(null), G = s.useRef(g), K = s.useRef(B), q = s.useRef(null), { setReference: J, setFloating: Me, floatingProps: Y, arrowStyles: Ne, side: Pe, isPositioned: Fe } = o({
+	let U = s.useRef(null), W = s.useRef(null), G = s.useRef(g), K = s.useRef(B), q = s.useRef(null), { setReference: J, setFloating: Ne, floatingProps: Y, arrowStyles: Pe, side: Fe, isPositioned: Ie } = ue({
 		open: A && L,
-		side: Oe,
+		side: ke,
 		align: _,
 		offset: 12,
 		arrowRef: q
-	}), Ie = g != null && (!u(g) || B), X = !L || Ie && Fe, Z = A && X, Le = ne(x, U, je, Me);
+	}), Le = g != null && (!u(g) || B), X = !L || Le && Ie, Z = A && X, Re = ne(x, U, Me, Ne);
 	s.useLayoutEffect(() => {
 		G.current = g, K.current = B;
 		let e = f(g);
@@ -52,8 +53,8 @@ var m = ({ steps: m, activeStep: ve, defaultActiveStep: ye, currentStep: be, def
 		});
 	});
 	let Q = () => {
-		Ae(!1), Ce?.();
-	}, { layerId: Re } = oe({
+		je(!1), we?.();
+	}, { layerId: ze } = oe({
 		open: Z,
 		onDismiss: Q,
 		refs: [U],
@@ -61,17 +62,17 @@ var m = ({ steps: m, activeStep: ve, defaultActiveStep: ye, currentStep: be, def
 		kind: "popover",
 		outsidePress: !1
 	});
-	ue({
+	de({
 		enabled: Z,
 		container: z,
 		fallback: () => W.current,
 		onlyIfFocusInside: !0
 	});
-	let ze = pe({
+	let Be = me({
 		enabled: Z && L,
 		surface: z,
 		anchorRef: W,
-		getPreviousStop: fe
+		getPreviousStop: pe
 	});
 	s.useEffect(() => {
 		Z && z && z.focus({ preventScroll: L });
@@ -97,19 +98,19 @@ var m = ({ steps: m, activeStep: ve, defaultActiveStep: ye, currentStep: be, def
 		k,
 		j
 	]), !A || !N) return null;
-	let Be = () => E(j - 1), Ve = () => {
+	let Ve = () => E(j - 1), He = () => {
 		I ? Q() : E(j + 1);
 	};
 	return /* @__PURE__ */ c(se, {
 		disabled: !L,
-		layerId: Re,
+		layerId: ze,
 		children: /* @__PURE__ */ l("div", {
 			role: "dialog",
 			"aria-labelledby": D,
 			tabIndex: -1,
 			...S,
-			ref: Le,
-			onKeyDown: ee(b, ze),
+			ref: Re,
+			onKeyDown: ee(b, Be),
 			...L ? {
 				"data-side": Y["data-side"],
 				"data-align": Y["data-align"],
@@ -119,54 +120,57 @@ var m = ({ steps: m, activeStep: ve, defaultActiveStep: ye, currentStep: be, def
 					...X ? void 0 : { visibility: "hidden" }
 				}
 			} : { style: y },
-			className: e("relative w-80 rounded-md border border-border bg-background p-5 text-foreground shadow-8", i, v),
+			className: e(r.root, "relative w-80 rounded-md border border-border bg-background p-5 text-foreground shadow-8", ce, v),
 			children: [
-				L && /* @__PURE__ */ c(de, {
+				L && /* @__PURE__ */ c(fe, {
 					ref: q,
-					side: Pe,
-					style: Ne,
-					"data-wave-teaching-popover-arrow": ""
+					side: Fe,
+					style: Pe,
+					"data-wave-teaching-popover-arrow": "",
+					className: r.beak
 				}),
 				/* @__PURE__ */ c(a, {
 					appearance: "subtle",
 					size: "small",
-					icon: /* @__PURE__ */ c(le, {}),
-					"aria-label": De,
-					className: "absolute end-3 top-3",
+					icon: /* @__PURE__ */ c(o, {}),
+					"aria-label": Oe,
+					className: e(r.closeButton, "absolute end-3 top-3"),
 					onClick: Q
 				}),
 				/* @__PURE__ */ l("h3", {
 					id: D,
-					className: "mb-2 pe-8 text-subtitle-1 font-semibold text-foreground",
+					className: e(r.title, "mb-2 pe-8 text-subtitle-1 font-semibold text-foreground"),
 					children: [N.title, /* @__PURE__ */ c("span", {
 						className: "sr-only",
 						children: `, ${R}`
 					})]
 				}),
 				/* @__PURE__ */ c("div", {
-					className: "mb-4 text-body-1 text-muted-foreground",
+					className: e(r.body, "mb-4 text-body-1 text-muted-foreground"),
 					children: N.body
 				}),
 				/* @__PURE__ */ l("div", {
-					className: "flex items-center justify-between gap-2",
+					className: e(r.footer, "flex items-center justify-between gap-2"),
 					children: [/* @__PURE__ */ c("div", {
 						"aria-hidden": "true",
 						className: "flex items-center gap-1.5",
 						children: m.map((t, n) => /* @__PURE__ */ c("span", {
 							"data-wave-teaching-popover-dot": "",
 							"aria-current": n === j ? "step" : void 0,
-							className: e("h-1.5 rounded-full transition-[width,background-color] motion-reduce:transition-none", n === j ? e("w-4 bg-primary", ce.fill) : "w-1.5 bg-stroke-accessible forced-colors:bg-[CanvasText] forced-colors:forced-color-adjust-none")
+							className: e(r.dot, "h-1.5 rounded-full transition-[width,background-color] motion-reduce:transition-none", n === j ? e("w-4 bg-primary", le.fill) : "w-1.5 bg-stroke-accessible forced-colors:bg-[CanvasText] forced-colors:forced-color-adjust-none")
 						}, n))
 					}), /* @__PURE__ */ l("div", {
 						className: "flex items-center gap-2",
 						children: [k > 1 && /* @__PURE__ */ c(a, {
 							...re(F),
-							onClick: ie(F, Be),
-							children: h?.back ?? me
+							className: r.backButton,
+							onClick: ie(F, Ve),
+							children: h?.back ?? he
 						}), /* @__PURE__ */ c(a, {
 							appearance: "primary",
-							onClick: Ve,
-							children: I ? h?.done ?? ge : h?.next ?? he
+							className: r.nextButton,
+							onClick: He,
+							children: I ? h?.done ?? _e : h?.next ?? ge
 						})]
 					})]
 				})

package/dist/components/overlays/TeachingPopover.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TeachingPopover.mjs","names":["useId","useId$1","React","DEFAULT_BACK_LABEL","DEFAULT_NEXT_LABEL","DEFAULT_DONE_LABEL","defaultStepLabel","index","count","isRefObject","target","isElementTarget","resolveTarget","clampStep","step","TeachingPopover","activeStepProp","openProp","rest","controlledStep","resolveDeprecatedProp","currentStep","initialStep","defaultActiveStep","defaultCurrentStep","rawStep","setStep","useControllable","onStepChange","open","setOpen","defaultOpen","onOpenChange","titleId","announce","useAnnounce","steps","shown","outOfRange","stepTitle","isFirst","isLast","hasTarget","stepPosition","labels","surface","setSurface","targetResolved","setTargetResolved","elementAvailable","surfaceRef","targetRef","targetPropRef","availabilityRef","arrowRef","placedSide","usePopupPosition","targetAvailable","anchorReady","isPositioned","visible","elementRef","useMergedRefs","ref","setFloating","element","setReference","latest","available","dismiss","onDismiss","useDismiss","onSurfaceKeyDown","usePopoverTabOrder","getTabbableThrough","announcedIndexRef","warnOnce","handleBack","handleNext","Portal","composeEventHandlers","onKeyDown","floatingProps","style","cn","focusRing","className","PopoverBeak","arrowStyles","Button","DismissIcon","closeLabel","i","forcedColors","focusableDisabledProps","preventIfDisabled"],"sources":["../../../src/components/overlays/TeachingPopover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { resolveDeprecatedProp, warnOnce } from '../../lib/dev';\nimport { focusableDisabledProps, preventIfDisabled } from '../../lib/aria';\nimport { DismissIcon } from '../../lib/icons';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { focusRing, forcedColors } from '../../lib/styles';\nimport type { PopupAlign, PopupSide } from '../../lib/types';\nimport { useControllable } from '../../hooks/useControllable';\nimport { useId } from '../../hooks/useId';\nimport { useDismiss } from '../../hooks/useDismiss';\nimport { useRestoreFocus } from '../../hooks/useRestoreFocus';\nimport { usePopupPosition } from '../../hooks/usePopupPosition';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { useAnnounce } from '../../hooks/useAnnounce';\nimport { Button } from '../button/Button';\nimport { Portal } from '../portal/Portal';\nimport { getTabbableThrough, PopoverBeak, usePopoverTabOrder } from './Popover.shared';\n\n/** Defines a single step in a teaching popover sequence. */\nexport interface TeachingPopoverStep {\n  /** Title text for the step. */\n  title: string;\n  /** Body content for the step. */\n  body: React.ReactNode;\n}\n\n/** The built-in text of a TeachingPopover, for localization (see `TeachingPopoverProps.labels`). */\nexport interface TeachingPopoverLabels {\n  /** Text of the Back button.\n   * @default 'Back'\n   */\n  back?: string;\n  /** Text of the Next button.\n   * @default 'Next'\n   */\n  next?: string;\n  /** Text of the button that replaces Next on the last step.\n   * @default 'Done'\n   */\n  done?: string;\n  /**\n   * The position of the step at `index` (zero-based, like `activeStep`) out of `count` steps. It\n   * follows the step title, after a comma, in the visually hidden part of the heading and in the\n   * announcement of a step change.\n   * @default (index, count) => `step ${index + 1} of ${count}`\n   */\n  step?: (index: number, count: number) => string;\n}\n\nconst DEFAULT_BACK_LABEL = 'Back';\nconst DEFAULT_NEXT_LABEL = 'Next';\nconst DEFAULT_DONE_LABEL = 'Done';\nconst defaultStepLabel = (index: number, count: number) => `step ${index + 1} of ${count}`;\n\n/** Properties for the TeachingPopover component. */\nexport interface TeachingPopoverProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Steps to display in the teaching popover (a readonly array is accepted). */\n  steps: readonly TeachingPopoverStep[];\n  /**\n   * Controlled index of the displayed step. Out-of-range values are clamped to the first or last\n   * step (with a development warning).\n   */\n  activeStep?: number;\n  /** Initial step index for uncontrolled usage.\n   * @default 0\n   */\n  defaultActiveStep?: number;\n  /** @deprecated Use `activeStep`. */\n  currentStep?: number;\n  /** @deprecated Use `defaultActiveStep`. */\n  defaultCurrentStep?: number;\n  /** Called with the requested step index when Next or Back is activated. */\n  onStepChange?: (step: number) => void;\n  /** Called when the popover is dismissed with Close, Done or Escape. */\n  onDismiss?: () => void;\n  /** Controlled visibility of the teaching popover. */\n  open?: boolean;\n  /** Initial visibility for uncontrolled usage.\n   * @default true\n   */\n  defaultOpen?: boolean;\n  /** Called with `false` when Close, Done or Escape dismisses the popover. */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * Accessible name of the built-in Close button (an icon-only button). Localize it with the\n   * page's language.\n   * @default 'Close'\n   */\n  closeLabel?: string;\n  /**\n   * Text of the Back, Next and Done buttons and the wording of the step position (“step 2 of 3”),\n   * for localization. Unset members keep their English defaults.\n   */\n  labels?: TeachingPopoverLabels;\n  /**\n   * The element the popover points at (a ref or the element). When given, the popover is\n   * rendered in a portal, positioned next to it with a beak, and flips or shifts to stay in view;\n   * without it (`undefined`) the popover renders inline where it is placed (0.4 behaviour).\n   * While the target is `null` or has not been positioned against yet (an element held in state\n   * that is not set yet, a ref that is not attached), the popover stays hidden: it is not\n   * shown, takes no focus, announces no step change and does not handle Escape until it can\n   * point at the target. It hides the same way when the target goes away later and shows again\n   * when a target returns.\n   *\n   * An element (for example one held in state through a callback ref) is followed as soon as the\n   * prop changes. A ref cannot be observed, so it is read after each render of the popover is\n   * committed, wherever the target is in the tree: an element attaching to or detaching from the\n   * ref is noticed the next time the popover renders (for example when the parent that mounts or\n   * unmounts the target re-renders it), not in a commit that does not render the popover. A\n   * memoized popover whose target mounts or unmounts in another subtree therefore stays hidden,\n   * or keeps pointing at the removed element, until it renders again. A newly passed ref keeps\n   * the previous visibility until it has been read, so a tour can move between attached refs\n   * (`target={step === 0 ? aRef : bRef}`) without hiding, and a switch to a ref that is not\n   * attached hides the popover right after that commit. Pass the element held in state when the\n   * target can mount or unmount without the popover re-rendering.\n   */\n  target?: React.RefObject<HTMLElement | null> | HTMLElement | null;\n  /** Side of the `target` to open on; `start`/`end` follow the writing direction.\n   * @default 'bottom'\n   */\n  side?: PopupSide;\n  /** Alignment along the `target`'s edge.\n   * @default 'center'\n   */\n  align?: PopupAlign;\n  /** Ref to the popover surface (`role=\"dialog\"`). */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\nfunction isRefObject(\n  target: NonNullable<TeachingPopoverProps['target']>,\n): target is React.RefObject<HTMLElement | null> {\n  return 'current' in target;\n}\n\nfunction isElementTarget(target: TeachingPopoverProps['target']): target is HTMLElement {\n  return target != null && !isRefObject(target);\n}\n\nfunction resolveTarget(target: TeachingPopoverProps['target']): HTMLElement | null {\n  if (!target) return null;\n  return isRefObject(target) ? target.current : target;\n}\n\nfunction clampStep(step: number, count: number): number {\n  if (!Number.isFinite(step)) return 0;\n  return Math.min(Math.max(Math.trunc(step), 0), count - 1);\n}\n\n/**\n * A step-by-step onboarding popover (a non-modal `role=\"dialog\"`) with Back/Next (Done on the\n * last step) and Close.\n *\n * - Visibility is controllable: `open`/`defaultOpen` (default `true`)/`onOpenChange`; Close, Done\n *   and Escape (anywhere in the document) dismiss it and call `onDismiss`.\n * - The step is controllable with `activeStep`/`defaultActiveStep`/`onStepChange` and clamped to\n *   the available steps. The heading carries a visually hidden “step n of m”, the new step is\n *   announced politely, and Back stays focusable (`aria-disabled`) on the first step.\n * - The built-in text is English: `labels` localizes Back, Next, Done and the step position, and\n *   `closeLabel` the Close button.\n * - Focus moves to the popover when it opens and returns to the element that had it when it\n *   closes (with `target`, to the target when nothing had focus, e.g. a tour opened on page load).\n * - With `target`, the popover is portaled and positioned next to that element with a beak (it\n *   inherits the surface colors); it stays hidden while the target is `null`, not positioned yet or\n *   no longer mounted (a ref target is read after each render of the popover; see `target`).\n * - With `target`, the keyboard order treats the popover as if it followed the target: Tab past\n *   its last button continues after the target, Shift+Tab from its first button (or from the\n *   popover itself) returns to the target (for a target outside the Tab order, to the last control\n *   inside it, else to the control before it), Tab from there enters the popover, and Shift+Tab\n *   from the control after the target enters it at its last button. Tab from the last control of\n *   the page moves past the popover (it was visited after the target), and Shift+Tab from outside\n *   the page reaches the page's last control first, so a lap visits it once and Tab never cycles.\n *   With no control at or before the target, the popover is reached where it is portaled, at the\n *   end of the page: Tab from the page's last control and Shift+Tab from outside the page enter\n *   it.\n */\nexport const TeachingPopover = ({\n  steps,\n  activeStep: activeStepProp,\n  defaultActiveStep,\n  currentStep,\n  defaultCurrentStep,\n  onStepChange,\n  onDismiss,\n  open: openProp,\n  defaultOpen,\n  onOpenChange,\n  closeLabel = 'Close',\n  labels,\n  target,\n  side = 'bottom',\n  align = 'center',\n  className,\n  style,\n  onKeyDown,\n  ref,\n  ...rest\n}: TeachingPopoverProps) => {\n  const controlledStep = resolveDeprecatedProp(\n    'TeachingPopover',\n    activeStepProp,\n    currentStep,\n    'currentStep',\n    'activeStep',\n  );\n  const initialStep =\n    resolveDeprecatedProp(\n      'TeachingPopover',\n      defaultActiveStep,\n      defaultCurrentStep,\n      'defaultCurrentStep',\n      'defaultActiveStep',\n    ) ?? 0;\n  const [rawStep, setStep] = useControllable(controlledStep, initialStep, onStepChange);\n  const [open, setOpen] = useControllable(openProp, defaultOpen ?? true, onOpenChange);\n  const titleId = useId('teaching-popover-title');\n  const announce = useAnnounce();\n\n  const count = steps.length;\n  const shown = open && count > 0;\n  const index = count > 0 ? clampStep(rawStep, count) : 0;\n  const outOfRange = count > 0 && index !== rawStep;\n  const step = count > 0 ? steps[index] : undefined;\n  const stepTitle = step?.title;\n  const isFirst = index === 0;\n  const isLast = index === count - 1;\n  const hasTarget = target !== undefined;\n  const stepPosition = count > 0 ? (labels?.step ?? defaultStepLabel)(index, count) : '';\n\n  const [surface, setSurface] = React.useState<HTMLDivElement | null>(null);\n  // Whether `target` pointed at an element when it was last read. An element (or `null`) is known\n  // during render and is mirrored here right away (C-HOOKS: adjust state during render). A ref\n  // cannot be read during render, React does not re-render when it attaches or detaches, and\n  // floating-ui keeps `isPositioned` after `setReference(null)`, so the layout effect below reads\n  // a ref after each commit and mirrors it here through a deferred update (C-HOOKS). Until that\n  // update has read a newly passed ref, the ref keeps this last known availability: moving between\n  // attached refs (a multi-target tour) or passing a new ref object on every render never hides\n  // the popover, and a switch to a ref that is not attached hides it once the update lands.\n  const [targetResolved, setTargetResolved] = React.useState(() => isElementTarget(target));\n  const elementAvailable = target === null ? false : isElementTarget(target) ? true : undefined;\n  if (elementAvailable !== undefined && elementAvailable !== targetResolved) {\n    setTargetResolved(elementAvailable);\n  }\n  const surfaceRef = React.useRef<HTMLDivElement | null>(null);\n  const targetRef = React.useRef<HTMLElement | null>(null);\n  // The latest `target` prop and committed availability, read by the deferred update so that the\n  // newest target and attachment win and an unchanged resolution sets no state.\n  const targetPropRef = React.useRef(target);\n  const availabilityRef = React.useRef(targetResolved);\n  const arrowRef = React.useRef<HTMLDivElement | null>(null);\n\n  // Destructured: react-hooks/refs treats an object whose member is passed to `ref` as a ref.\n  const {\n    setReference,\n    setFloating,\n    floatingProps,\n    arrowStyles,\n    side: placedSide,\n    isPositioned,\n  } = usePopupPosition({ open: shown && hasTarget, side, align, offset: 12, arrowRef });\n  // An anchored popover is shown only while it points at a resolved target: otherwise the surface\n  // is rendered (so it can be measured) but hidden, unfocused, silent and without an Escape layer.\n  const targetAvailable = target != null && (isRefObject(target) ? targetResolved : true);\n  const anchorReady = !hasTarget || (targetAvailable && isPositioned);\n  const visible = shown && anchorReady;\n  const elementRef = useMergedRefs<HTMLDivElement>(ref, surfaceRef, setSurface, setFloating);\n\n  // Point the positioning at the target after every commit. A ref is read once more when the whole\n  // commit is done (the C-HOOKS deferred-update pattern): a target that comes after the popover in\n  // the tree attaches its ref after this effect has run. That update re-reads the latest target,\n  // and only a changed element or availability updates the reference or the state.\n  React.useLayoutEffect(() => {\n    targetPropRef.current = target;\n    availabilityRef.current = targetResolved;\n    const element = resolveTarget(target);\n    targetRef.current = element;\n    setReference(element);\n    if (target == null || !isRefObject(target)) return;\n    queueMicrotask(() => {\n      const latest = resolveTarget(targetPropRef.current);\n      if (latest !== targetRef.current) {\n        targetRef.current = latest;\n        setReference(latest);\n      }\n      const available = latest !== null;\n      if (available !== availabilityRef.current) {\n        availabilityRef.current = available;\n        setTargetResolved(available);\n      }\n    });\n  });\n\n  const dismiss = () => {\n    setOpen(false);\n    onDismiss?.();\n  };\n\n  const { layerId } = useDismiss({\n    open: visible,\n    onDismiss: dismiss,\n    refs: [surfaceRef],\n    anchorRef: targetRef,\n    kind: 'popover',\n    outsidePress: false,\n  });\n\n  useRestoreFocus({\n    enabled: visible,\n    container: surface,\n    fallback: () => targetRef.current,\n    onlyIfFocusInside: true,\n  });\n\n  // Portaled next to a target: the keyboard order of the popover placed right after the target.\n  const onSurfaceKeyDown = usePopoverTabOrder({\n    enabled: visible && hasTarget,\n    surface,\n    anchorRef: targetRef,\n    getPreviousStop: getTabbableThrough,\n  });\n\n  // Move focus into the popover when it becomes visible (and when a new surface mounts).\n  React.useEffect(() => {\n    if (visible && surface) surface.focus({ preventScroll: hasTarget });\n  }, [visible, surface, hasTarget]);\n\n  // Announce the new step politely after a step change (not on mount, and not while hidden: the\n  // heading, which carries the step position, is read when the popover shows and takes focus).\n  const announcedIndexRef = React.useRef(index);\n  React.useEffect(() => {\n    if (announcedIndexRef.current === index) return;\n    announcedIndexRef.current = index;\n    if (visible && stepTitle !== undefined) {\n      announce(`${stepTitle}, ${stepPosition}`);\n    }\n  }, [index, visible, stepTitle, stepPosition, announce]);\n\n  React.useEffect(() => {\n    if (!outOfRange) return;\n    warnOnce(\n      'TeachingPopover:activeStep-range',\n      `TeachingPopover: activeStep ${rawStep} is out of range for ${count} steps; showing step ${index + 1}.`,\n    );\n  }, [outOfRange, rawStep, count, index]);\n\n  if (!shown || !step) return null;\n\n  const handleBack = () => setStep(index - 1);\n  const handleNext = () => {\n    if (isLast) dismiss();\n    else setStep(index + 1);\n  };\n\n  return (\n    <Portal disabled={!hasTarget} layerId={layerId}>\n      <div\n        role=\"dialog\"\n        aria-labelledby={titleId}\n        tabIndex={-1}\n        {...rest}\n        ref={elementRef}\n        onKeyDown={composeEventHandlers(onKeyDown, onSurfaceKeyDown)}\n        {...(hasTarget\n          ? {\n              'data-side': floatingProps['data-side'],\n              'data-align': floatingProps['data-align'],\n              style: {\n                ...style,\n                ...floatingProps.style,\n                ...(anchorReady ? undefined : { visibility: 'hidden' as const }),\n              },\n            }\n          : { style })}\n        className={cn(\n          'relative w-80 rounded-md border border-border bg-background p-5 text-foreground shadow-8',\n          focusRing,\n          className,\n        )}\n      >\n        {hasTarget && (\n          <PopoverBeak\n            ref={arrowRef}\n            side={placedSide}\n            style={arrowStyles}\n            data-wave-teaching-popover-arrow=\"\"\n          />\n        )}\n\n        <Button\n          appearance=\"subtle\"\n          size=\"small\"\n          icon={<DismissIcon />}\n          aria-label={closeLabel}\n          className=\"absolute end-3 top-3\"\n          onClick={dismiss}\n        />\n\n        <h3 id={titleId} className=\"mb-2 pe-8 text-subtitle-1 font-semibold text-foreground\">\n          {step.title}\n          <span className=\"sr-only\">{`, ${stepPosition}`}</span>\n        </h3>\n\n        <div className=\"mb-4 text-body-1 text-muted-foreground\">{step.body}</div>\n\n        <div className=\"flex items-center justify-between gap-2\">\n          <div aria-hidden=\"true\" className=\"flex items-center gap-1.5\">\n            {steps.map((_, i) => (\n              <span\n                key={i}\n                data-wave-teaching-popover-dot=\"\"\n                aria-current={i === index ? 'step' : undefined}\n                className={cn(\n                  'h-1.5 rounded-full transition-[width,background-color] motion-reduce:transition-none',\n                  i === index\n                    ? cn('w-4 bg-primary', forcedColors.fill)\n                    : 'w-1.5 bg-stroke-accessible forced-colors:bg-[CanvasText] forced-colors:forced-color-adjust-none',\n                )}\n              />\n            ))}\n          </div>\n\n          <div className=\"flex items-center gap-2\">\n            {count > 1 && (\n              <Button\n                {...focusableDisabledProps(isFirst)}\n                onClick={preventIfDisabled(isFirst, handleBack)}\n              >\n                {labels?.back ?? DEFAULT_BACK_LABEL}\n              </Button>\n            )}\n            <Button appearance=\"primary\" onClick={handleNext}>\n              {isLast ? (labels?.done ?? DEFAULT_DONE_LABEL) : (labels?.next ?? DEFAULT_NEXT_LABEL)}\n            </Button>\n          </div>\n        </div>\n      </div>\n    </Portal>\n  );\n};\nTeachingPopover.displayName = 'TeachingPopover';\n"],"mappings":"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"}
+{"version":3,"file":"TeachingPopover.mjs","names":["useId","useId$1","React","DEFAULT_BACK_LABEL","DEFAULT_NEXT_LABEL","DEFAULT_DONE_LABEL","defaultStepLabel","index","count","isRefObject","target","isElementTarget","resolveTarget","clampStep","step","TeachingPopover","activeStepProp","openProp","rest","controlledStep","resolveDeprecatedProp","currentStep","initialStep","defaultActiveStep","defaultCurrentStep","rawStep","setStep","useControllable","onStepChange","open","setOpen","defaultOpen","onOpenChange","titleId","announce","useAnnounce","steps","shown","outOfRange","stepTitle","isFirst","isLast","hasTarget","stepPosition","labels","surface","setSurface","targetResolved","setTargetResolved","elementAvailable","surfaceRef","targetRef","targetPropRef","availabilityRef","arrowRef","placedSide","usePopupPosition","targetAvailable","anchorReady","isPositioned","visible","elementRef","useMergedRefs","ref","setFloating","element","setReference","latest","available","dismiss","onDismiss","useDismiss","onSurfaceKeyDown","usePopoverTabOrder","getTabbableThrough","announcedIndexRef","warnOnce","handleBack","handleNext","Portal","composeEventHandlers","onKeyDown","floatingProps","style","cn","teachingPopoverClassNames","focusRing","className","PopoverBeak","arrowStyles","Button","DismissIcon","closeLabel","i","forcedColors","focusableDisabledProps","preventIfDisabled"],"sources":["../../../src/components/overlays/TeachingPopover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { teachingPopoverClassNames } from '../../lib/classNames';\nimport { resolveDeprecatedProp, warnOnce } from '../../lib/dev';\nimport { focusableDisabledProps, preventIfDisabled } from '../../lib/aria';\nimport { DismissIcon } from '../../lib/icons';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { focusRing, forcedColors } from '../../lib/styles';\nimport type { PopupAlign, PopupSide } from '../../lib/types';\nimport { useControllable } from '../../hooks/useControllable';\nimport { useId } from '../../hooks/useId';\nimport { useDismiss } from '../../hooks/useDismiss';\nimport { useRestoreFocus } from '../../hooks/useRestoreFocus';\nimport { usePopupPosition } from '../../hooks/usePopupPosition';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { useAnnounce } from '../../hooks/useAnnounce';\nimport { Button } from '../button/Button';\nimport { Portal } from '../portal/Portal';\nimport { getTabbableThrough, PopoverBeak, usePopoverTabOrder } from './Popover.shared';\n\n/** Defines a single step in a teaching popover sequence. */\nexport interface TeachingPopoverStep {\n  /** Title text for the step. */\n  title: string;\n  /** Body content for the step. */\n  body: React.ReactNode;\n}\n\n/** The built-in text of a TeachingPopover, for localization (see `TeachingPopoverProps.labels`). */\nexport interface TeachingPopoverLabels {\n  /** Text of the Back button.\n   * @default 'Back'\n   */\n  back?: string;\n  /** Text of the Next button.\n   * @default 'Next'\n   */\n  next?: string;\n  /** Text of the button that replaces Next on the last step.\n   * @default 'Done'\n   */\n  done?: string;\n  /**\n   * The position of the step at `index` (zero-based, like `activeStep`) out of `count` steps. It\n   * follows the step title, after a comma, in the visually hidden part of the heading and in the\n   * announcement of a step change.\n   * @default (index, count) => `step ${index + 1} of ${count}`\n   */\n  step?: (index: number, count: number) => string;\n}\n\nconst DEFAULT_BACK_LABEL = 'Back';\nconst DEFAULT_NEXT_LABEL = 'Next';\nconst DEFAULT_DONE_LABEL = 'Done';\nconst defaultStepLabel = (index: number, count: number) => `step ${index + 1} of ${count}`;\n\n/** Properties for the TeachingPopover component. */\nexport interface TeachingPopoverProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Steps to display in the teaching popover (a readonly array is accepted). */\n  steps: readonly TeachingPopoverStep[];\n  /**\n   * Controlled index of the displayed step. Out-of-range values are clamped to the first or last\n   * step (with a development warning).\n   */\n  activeStep?: number;\n  /** Initial step index for uncontrolled usage.\n   * @default 0\n   */\n  defaultActiveStep?: number;\n  /** @deprecated Use `activeStep`. */\n  currentStep?: number;\n  /** @deprecated Use `defaultActiveStep`. */\n  defaultCurrentStep?: number;\n  /** Called with the requested step index when Next or Back is activated. */\n  onStepChange?: (step: number) => void;\n  /** Called when the popover is dismissed with Close, Done or Escape. */\n  onDismiss?: () => void;\n  /** Controlled visibility of the teaching popover. */\n  open?: boolean;\n  /** Initial visibility for uncontrolled usage.\n   * @default true\n   */\n  defaultOpen?: boolean;\n  /** Called with `false` when Close, Done or Escape dismisses the popover. */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * Accessible name of the built-in Close button (an icon-only button). Localize it with the\n   * page's language.\n   * @default 'Close'\n   */\n  closeLabel?: string;\n  /**\n   * Text of the Back, Next and Done buttons and the wording of the step position (“step 2 of 3”),\n   * for localization. Unset members keep their English defaults.\n   */\n  labels?: TeachingPopoverLabels;\n  /**\n   * The element the popover points at (a ref or the element). When given, the popover is\n   * rendered in a portal, positioned next to it with a beak, and flips or shifts to stay in view;\n   * without it (`undefined`) the popover renders inline where it is placed (0.4 behaviour).\n   * While the target is `null` or has not been positioned against yet (an element held in state\n   * that is not set yet, a ref that is not attached), the popover stays hidden: it is not\n   * shown, takes no focus, announces no step change and does not handle Escape until it can\n   * point at the target. It hides the same way when the target goes away later and shows again\n   * when a target returns.\n   *\n   * An element (for example one held in state through a callback ref) is followed as soon as the\n   * prop changes. A ref cannot be observed, so it is read after each render of the popover is\n   * committed, wherever the target is in the tree: an element attaching to or detaching from the\n   * ref is noticed the next time the popover renders (for example when the parent that mounts or\n   * unmounts the target re-renders it), not in a commit that does not render the popover. A\n   * memoized popover whose target mounts or unmounts in another subtree therefore stays hidden,\n   * or keeps pointing at the removed element, until it renders again. A newly passed ref keeps\n   * the previous visibility until it has been read, so a tour can move between attached refs\n   * (`target={step === 0 ? aRef : bRef}`) without hiding, and a switch to a ref that is not\n   * attached hides the popover right after that commit. Pass the element held in state when the\n   * target can mount or unmount without the popover re-rendering.\n   */\n  target?: React.RefObject<HTMLElement | null> | HTMLElement | null;\n  /** Side of the `target` to open on; `start`/`end` follow the writing direction.\n   * @default 'bottom'\n   */\n  side?: PopupSide;\n  /** Alignment along the `target`'s edge.\n   * @default 'center'\n   */\n  align?: PopupAlign;\n  /** Ref to the popover surface (`role=\"dialog\"`). */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\nfunction isRefObject(\n  target: NonNullable<TeachingPopoverProps['target']>,\n): target is React.RefObject<HTMLElement | null> {\n  return 'current' in target;\n}\n\nfunction isElementTarget(target: TeachingPopoverProps['target']): target is HTMLElement {\n  return target != null && !isRefObject(target);\n}\n\nfunction resolveTarget(target: TeachingPopoverProps['target']): HTMLElement | null {\n  if (!target) return null;\n  return isRefObject(target) ? target.current : target;\n}\n\nfunction clampStep(step: number, count: number): number {\n  if (!Number.isFinite(step)) return 0;\n  return Math.min(Math.max(Math.trunc(step), 0), count - 1);\n}\n\n/**\n * A step-by-step onboarding popover (a non-modal `role=\"dialog\"`) with Back/Next (Done on the\n * last step) and Close.\n *\n * - Visibility is controllable: `open`/`defaultOpen` (default `true`)/`onOpenChange`; Close, Done\n *   and Escape (anywhere in the document) dismiss it and call `onDismiss`.\n * - The step is controllable with `activeStep`/`defaultActiveStep`/`onStepChange` and clamped to\n *   the available steps. The heading carries a visually hidden “step n of m”, the new step is\n *   announced politely, and Back stays focusable (`aria-disabled`) on the first step.\n * - The built-in text is English: `labels` localizes Back, Next, Done and the step position, and\n *   `closeLabel` the Close button.\n * - Focus moves to the popover when it opens and returns to the element that had it when it\n *   closes (with `target`, to the target when nothing had focus, e.g. a tour opened on page load).\n * - With `target`, the popover is portaled and positioned next to that element with a beak (it\n *   inherits the surface colors); it stays hidden while the target is `null`, not positioned yet or\n *   no longer mounted (a ref target is read after each render of the popover; see `target`).\n * - With `target`, the keyboard order treats the popover as if it followed the target: Tab past\n *   its last button continues after the target, Shift+Tab from its first button (or from the\n *   popover itself) returns to the target (for a target outside the Tab order, to the last control\n *   inside it, else to the control before it), Tab from there enters the popover, and Shift+Tab\n *   from the control after the target enters it at its last button. Tab from the last control of\n *   the page moves past the popover (it was visited after the target), and Shift+Tab from outside\n *   the page reaches the page's last control first, so a lap visits it once and Tab never cycles.\n *   With no control at or before the target, the popover is reached where it is portaled, at the\n *   end of the page: Tab from the page's last control and Shift+Tab from outside the page enter\n *   it.\n */\nexport const TeachingPopover = ({\n  steps,\n  activeStep: activeStepProp,\n  defaultActiveStep,\n  currentStep,\n  defaultCurrentStep,\n  onStepChange,\n  onDismiss,\n  open: openProp,\n  defaultOpen,\n  onOpenChange,\n  closeLabel = 'Close',\n  labels,\n  target,\n  side = 'bottom',\n  align = 'center',\n  className,\n  style,\n  onKeyDown,\n  ref,\n  ...rest\n}: TeachingPopoverProps) => {\n  const controlledStep = resolveDeprecatedProp(\n    'TeachingPopover',\n    activeStepProp,\n    currentStep,\n    'currentStep',\n    'activeStep',\n  );\n  const initialStep =\n    resolveDeprecatedProp(\n      'TeachingPopover',\n      defaultActiveStep,\n      defaultCurrentStep,\n      'defaultCurrentStep',\n      'defaultActiveStep',\n    ) ?? 0;\n  const [rawStep, setStep] = useControllable(controlledStep, initialStep, onStepChange);\n  const [open, setOpen] = useControllable(openProp, defaultOpen ?? true, onOpenChange);\n  const titleId = useId('teaching-popover-title');\n  const announce = useAnnounce();\n\n  const count = steps.length;\n  const shown = open && count > 0;\n  const index = count > 0 ? clampStep(rawStep, count) : 0;\n  const outOfRange = count > 0 && index !== rawStep;\n  const step = count > 0 ? steps[index] : undefined;\n  const stepTitle = step?.title;\n  const isFirst = index === 0;\n  const isLast = index === count - 1;\n  const hasTarget = target !== undefined;\n  const stepPosition = count > 0 ? (labels?.step ?? defaultStepLabel)(index, count) : '';\n\n  const [surface, setSurface] = React.useState<HTMLDivElement | null>(null);\n  // Whether `target` pointed at an element when it was last read. An element (or `null`) is known\n  // during render and is mirrored here right away (C-HOOKS: adjust state during render). A ref\n  // cannot be read during render, React does not re-render when it attaches or detaches, and\n  // floating-ui keeps `isPositioned` after `setReference(null)`, so the layout effect below reads\n  // a ref after each commit and mirrors it here through a deferred update (C-HOOKS). Until that\n  // update has read a newly passed ref, the ref keeps this last known availability: moving between\n  // attached refs (a multi-target tour) or passing a new ref object on every render never hides\n  // the popover, and a switch to a ref that is not attached hides it once the update lands.\n  const [targetResolved, setTargetResolved] = React.useState(() => isElementTarget(target));\n  const elementAvailable = target === null ? false : isElementTarget(target) ? true : undefined;\n  if (elementAvailable !== undefined && elementAvailable !== targetResolved) {\n    setTargetResolved(elementAvailable);\n  }\n  const surfaceRef = React.useRef<HTMLDivElement | null>(null);\n  const targetRef = React.useRef<HTMLElement | null>(null);\n  // The latest `target` prop and committed availability, read by the deferred update so that the\n  // newest target and attachment win and an unchanged resolution sets no state.\n  const targetPropRef = React.useRef(target);\n  const availabilityRef = React.useRef(targetResolved);\n  const arrowRef = React.useRef<HTMLDivElement | null>(null);\n\n  // Destructured: react-hooks/refs treats an object whose member is passed to `ref` as a ref.\n  const {\n    setReference,\n    setFloating,\n    floatingProps,\n    arrowStyles,\n    side: placedSide,\n    isPositioned,\n  } = usePopupPosition({ open: shown && hasTarget, side, align, offset: 12, arrowRef });\n  // An anchored popover is shown only while it points at a resolved target: otherwise the surface\n  // is rendered (so it can be measured) but hidden, unfocused, silent and without an Escape layer.\n  const targetAvailable = target != null && (isRefObject(target) ? targetResolved : true);\n  const anchorReady = !hasTarget || (targetAvailable && isPositioned);\n  const visible = shown && anchorReady;\n  const elementRef = useMergedRefs<HTMLDivElement>(ref, surfaceRef, setSurface, setFloating);\n\n  // Point the positioning at the target after every commit. A ref is read once more when the whole\n  // commit is done (the C-HOOKS deferred-update pattern): a target that comes after the popover in\n  // the tree attaches its ref after this effect has run. That update re-reads the latest target,\n  // and only a changed element or availability updates the reference or the state.\n  React.useLayoutEffect(() => {\n    targetPropRef.current = target;\n    availabilityRef.current = targetResolved;\n    const element = resolveTarget(target);\n    targetRef.current = element;\n    setReference(element);\n    if (target == null || !isRefObject(target)) return;\n    queueMicrotask(() => {\n      const latest = resolveTarget(targetPropRef.current);\n      if (latest !== targetRef.current) {\n        targetRef.current = latest;\n        setReference(latest);\n      }\n      const available = latest !== null;\n      if (available !== availabilityRef.current) {\n        availabilityRef.current = available;\n        setTargetResolved(available);\n      }\n    });\n  });\n\n  const dismiss = () => {\n    setOpen(false);\n    onDismiss?.();\n  };\n\n  const { layerId } = useDismiss({\n    open: visible,\n    onDismiss: dismiss,\n    refs: [surfaceRef],\n    anchorRef: targetRef,\n    kind: 'popover',\n    outsidePress: false,\n  });\n\n  useRestoreFocus({\n    enabled: visible,\n    container: surface,\n    fallback: () => targetRef.current,\n    onlyIfFocusInside: true,\n  });\n\n  // Portaled next to a target: the keyboard order of the popover placed right after the target.\n  const onSurfaceKeyDown = usePopoverTabOrder({\n    enabled: visible && hasTarget,\n    surface,\n    anchorRef: targetRef,\n    getPreviousStop: getTabbableThrough,\n  });\n\n  // Move focus into the popover when it becomes visible (and when a new surface mounts).\n  React.useEffect(() => {\n    if (visible && surface) surface.focus({ preventScroll: hasTarget });\n  }, [visible, surface, hasTarget]);\n\n  // Announce the new step politely after a step change (not on mount, and not while hidden: the\n  // heading, which carries the step position, is read when the popover shows and takes focus).\n  const announcedIndexRef = React.useRef(index);\n  React.useEffect(() => {\n    if (announcedIndexRef.current === index) return;\n    announcedIndexRef.current = index;\n    if (visible && stepTitle !== undefined) {\n      announce(`${stepTitle}, ${stepPosition}`);\n    }\n  }, [index, visible, stepTitle, stepPosition, announce]);\n\n  React.useEffect(() => {\n    if (!outOfRange) return;\n    warnOnce(\n      'TeachingPopover:activeStep-range',\n      `TeachingPopover: activeStep ${rawStep} is out of range for ${count} steps; showing step ${index + 1}.`,\n    );\n  }, [outOfRange, rawStep, count, index]);\n\n  if (!shown || !step) return null;\n\n  const handleBack = () => setStep(index - 1);\n  const handleNext = () => {\n    if (isLast) dismiss();\n    else setStep(index + 1);\n  };\n\n  return (\n    <Portal disabled={!hasTarget} layerId={layerId}>\n      <div\n        role=\"dialog\"\n        aria-labelledby={titleId}\n        tabIndex={-1}\n        {...rest}\n        ref={elementRef}\n        onKeyDown={composeEventHandlers(onKeyDown, onSurfaceKeyDown)}\n        {...(hasTarget\n          ? {\n              'data-side': floatingProps['data-side'],\n              'data-align': floatingProps['data-align'],\n              style: {\n                ...style,\n                ...floatingProps.style,\n                ...(anchorReady ? undefined : { visibility: 'hidden' as const }),\n              },\n            }\n          : { style })}\n        className={cn(\n          teachingPopoverClassNames.root,\n          'relative w-80 rounded-md border border-border bg-background p-5 text-foreground shadow-8',\n          focusRing,\n          className,\n        )}\n      >\n        {hasTarget && (\n          <PopoverBeak\n            ref={arrowRef}\n            side={placedSide}\n            style={arrowStyles}\n            data-wave-teaching-popover-arrow=\"\"\n            className={teachingPopoverClassNames.beak}\n          />\n        )}\n\n        <Button\n          appearance=\"subtle\"\n          size=\"small\"\n          icon={<DismissIcon />}\n          aria-label={closeLabel}\n          className={cn(teachingPopoverClassNames.closeButton, 'absolute end-3 top-3')}\n          onClick={dismiss}\n        />\n\n        <h3\n          id={titleId}\n          className={cn(\n            teachingPopoverClassNames.title,\n            'mb-2 pe-8 text-subtitle-1 font-semibold text-foreground',\n          )}\n        >\n          {step.title}\n          <span className=\"sr-only\">{`, ${stepPosition}`}</span>\n        </h3>\n\n        <div\n          className={cn(teachingPopoverClassNames.body, 'mb-4 text-body-1 text-muted-foreground')}\n        >\n          {step.body}\n        </div>\n\n        <div\n          className={cn(\n            teachingPopoverClassNames.footer,\n            'flex items-center justify-between gap-2',\n          )}\n        >\n          <div aria-hidden=\"true\" className=\"flex items-center gap-1.5\">\n            {steps.map((_, i) => (\n              <span\n                key={i}\n                data-wave-teaching-popover-dot=\"\"\n                aria-current={i === index ? 'step' : undefined}\n                className={cn(\n                  teachingPopoverClassNames.dot,\n                  'h-1.5 rounded-full transition-[width,background-color] motion-reduce:transition-none',\n                  i === index\n                    ? cn('w-4 bg-primary', forcedColors.fill)\n                    : 'w-1.5 bg-stroke-accessible forced-colors:bg-[CanvasText] forced-colors:forced-color-adjust-none',\n                )}\n              />\n            ))}\n          </div>\n\n          <div className=\"flex items-center gap-2\">\n            {count > 1 && (\n              <Button\n                {...focusableDisabledProps(isFirst)}\n                className={teachingPopoverClassNames.backButton}\n                onClick={preventIfDisabled(isFirst, handleBack)}\n              >\n                {labels?.back ?? DEFAULT_BACK_LABEL}\n              </Button>\n            )}\n            <Button\n              appearance=\"primary\"\n              className={teachingPopoverClassNames.nextButton}\n              onClick={handleNext}\n            >\n              {isLast ? (labels?.done ?? DEFAULT_DONE_LABEL) : (labels?.next ?? DEFAULT_NEXT_LABEL)}\n            </Button>\n          </div>\n        </div>\n      </div>\n    </Portal>\n  );\n};\nTeachingPopover.displayName = 'TeachingPopover';\n"],"mappings":"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"}

package/dist/components/overlays/Tooltip.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/dev.cjs"),r=require("../../lib/composeEventHandlers.cjs"),i=require("../../hooks/useEventCallback.cjs"),a=require("../../hooks/useControllable.cjs"),o=require("../../hooks/useId.cjs"),s=require("../../lib/focus.cjs"),c=require("../../hooks/useMergedRefs.cjs"),l=require("../../hooks/useIsClient.cjs"),u=require("../../lib/aria.cjs"),d=require("../../hooks/useDismiss.cjs"),ee=require("../portal/Portal.cjs"),f=require("../../hooks/usePopupPosition.cjs"),p=require("../../lib/renderTrigger.cjs");let m=require("react");m=e.__toESM(m,1);let h=require("react/jsx-runtime");var te={dark:`inverted`,light:`normal`},g={inverted:`border border-inverted-border bg-inverted text-inverted-foreground`,normal:`border border-border bg-background text-foreground`},_=`max-w-60 whitespace-normal break-words rounded px-3 py-1.5 text-caption-1 font-normal normal-case tracking-normal text-start shadow-8 ${[`before:absolute`,`data-[side=top]:before:inset-x-0 data-[side=top]:before:top-full data-[side=top]:before:h-2`,`data-[side=bottom]:before:inset-x-0 data-[side=bottom]:before:bottom-full data-[side=bottom]:before:h-2`,`data-[side=left]:before:inset-y-0 data-[side=left]:before:left-full data-[side=left]:before:w-2`,`data-[side=right]:before:inset-y-0 data-[side=right]:before:right-full data-[side=right]:before:w-2`].join(` `)}`,v=/^on[A-Z]/,y=[`aria-label`,`aria-labelledby`];function b(e){return e.currentTarget.contains(e.target)}function x(e){return t=>{b(t)&&e(t)}}function S(e){let t={},n={};for(let[r,i]of Object.entries(e))r===`id`||r.startsWith(`aria-`)?t[r]=i:n[r]=v.test(r)&&typeof i==`function`?x(i):i;return{childProps:t,wrapperProps:n}}function ne(e,t){let n={...e};for(let e of t)delete n[e];return n}function C(e,t,n){return(e.getAttribute(t)??``).split(/\s+/).includes(n)}function w(e,t,n){let r=(e.getAttribute(t)??``).split(/\s+/).filter(e=>e&&e!==n);r.length>0?e.setAttribute(t,r.join(` `)):e.removeAttribute(t)}function re(e,t,r,i){let a=m.useRef(null),o=r===`label`?`aria-labelledby`:`aria-describedby`;m.useLayoutEffect(()=>{let r=e.current;if(!r)return;let c=()=>{let e=a.current,c=Array.from(r.querySelectorAll(`[${o}]`)).filter(n=>!(e&&e.element===n&&e.attribute===o)&&C(n,o,t)).some(e=>e.matches(s.FOCUSABLE_SELECTOR))?null:s.getFirstTabbable(r);e&&(e.element!==c||e.attribute!==o)&&(w(e.element,e.attribute,t),a.current=null),c&&(C(c,o,t)||c.setAttribute(o,u.joinIds(c.getAttribute(o),t)??``),a.current={element:c,attribute:o},i||n.warnOnce(`Tooltip:focus-target`,`Tooltip: the element that takes focus inside it did not get \`${o}\` (the child is not focusable, or is a component, such as a Popover or Dialog root, that does not pass the prop on), so it was added to the first focusable element inside. Put the Tooltip directly around the focusable element, e.g. <Popover.Trigger><Tooltip content="…"><Button /></Tooltip></Popover.Trigger>.`))};if(c(),!a.current||typeof MutationObserver>`u`)return;let l=new MutationObserver(c);return l.observe(r,{subtree:!0,childList:!0,attributes:!0,attributeFilter:[o]}),()=>l.disconnect()})}var T=({content:e,appearance:s,variant:v,openDelay:C,closeDelay:w=100,delay:T,open:E,defaultOpen:D,onOpenChange:O,relationship:k=`description`,side:ie=`top`,align:ae=`center`,children:oe,className:se,onMouseEnter:ce,onMouseLeave:A,onFocus:j,onBlur:M,ref:N,...P})=>{let F=n.resolveDeprecatedProp(`Tooltip`,s,v===void 0?void 0:te[v],`variant`,`appearance`)??`inverted`,I=n.resolveDeprecatedProp(`Tooltip`,C,T,`delay`,`openDelay`)??200,[L,R]=a.useControllable(E,D??!1,O),z=l.useIsClient(),B=L&&z,V=m.useRef(void 0),H=m.useRef(null),U=m.useRef(null),W=o.useId(`tooltip`),{setReference:le,setFloating:ue,floatingProps:de}=f.usePopupPosition({open:B,side:ie,align:ae,offset:8}),fe=c.useMergedRefs(N,H,le),pe=c.useMergedRefs(U,ue),G=i.useEventCallback(()=>{V.current!==void 0&&(clearTimeout(V.current),V.current=void 0)}),K=i.useEventCallback(()=>{if(G(),!B){if(I<=0){R(!0);return}V.current=setTimeout(()=>{V.current=void 0,R(!0)},I)}}),q=i.useEventCallback(()=>{G(),R(!1)}),me=i.useEventCallback(()=>{G(),B&&(V.current=setTimeout(()=>{V.current=void 0,R(!1)},w))});d.useDismiss({open:B,onDismiss:q,refs:[H,U],anchorRef:H,kind:`tooltip`,outsidePress:!1}),m.useEffect(()=>{let e=V;return()=>clearTimeout(e.current)},[]);let he=i.useEventCallback(e=>{(b(e)||U.current?.contains(e.target))&&K()}),ge=i.useEventCallback(e=>{!b(e)&&!U.current?.contains(e.target)&&q()}),{childProps:J,wrapperProps:Y}=S(P),X=p.unwrapFragment(oe),Z=!p.isCloneableElement(X),Q=k===`label`?`aria-labelledby`:`aria-describedby`,$=Z?ne(J,[...p.STATE_ARIA,...y]):{...J};(!Z||k===`description`)&&($[Q]=u.joinIds(J[Q],W));let _e=p.renderTrigger(X,$,{componentName:`Tooltip`});return re(H,W,k,Z),(0,h.jsxs)(`span`,{ref:fe,...Y,className:t.cn(`inline-block`,se),onMouseEnter:r.composeEventHandlers(ce,he),onMouseLeave:r.composeEventHandlers(A,me),onMouseOver:r.composeEventHandlers(Y.onMouseOver,ge),onFocus:x(r.composeEventHandlers(j,K)),onBlur:x(r.composeEventHandlers(M,q)),children:[_e,(0,h.jsx)(`span`,{id:W,role:`tooltip`,hidden:!0,children:e}),B&&(0,h.jsx)(ee.Portal,{layer:`tooltip`,children:(0,h.jsx)(`span`,{ref:pe,"aria-hidden":`true`,"data-wave-tooltip-surface":``,...de,className:t.cn(_,g[F]),children:e})})]})};T.displayName=`Tooltip`,exports.Tooltip=T;
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/dev.cjs"),r=require("../../lib/composeEventHandlers.cjs"),i=require("../../lib/classNames.cjs"),a=require("../../hooks/useEventCallback.cjs"),o=require("../../hooks/useControllable.cjs"),s=require("../../hooks/useId.cjs"),c=require("../../lib/focus.cjs"),l=require("../../hooks/useMergedRefs.cjs"),ee=require("../../hooks/useIsClient.cjs"),u=require("../../lib/aria.cjs"),d=require("../../hooks/useDismiss.cjs"),f=require("../portal/Portal.cjs"),p=require("../../hooks/usePopupPosition.cjs"),m=require("../../lib/renderTrigger.cjs");let h=require("react");h=e.__toESM(h,1);let g=require("react/jsx-runtime");var te={dark:`inverted`,light:`normal`},_={inverted:`border border-inverted-border bg-inverted text-inverted-foreground`,normal:`border border-border bg-background text-foreground`},v=`max-w-60 whitespace-normal break-words rounded px-3 py-1.5 text-caption-1 font-normal normal-case tracking-normal text-start shadow-8 ${[`before:absolute`,`data-[side=top]:before:inset-x-0 data-[side=top]:before:top-full data-[side=top]:before:h-2`,`data-[side=bottom]:before:inset-x-0 data-[side=bottom]:before:bottom-full data-[side=bottom]:before:h-2`,`data-[side=left]:before:inset-y-0 data-[side=left]:before:left-full data-[side=left]:before:w-2`,`data-[side=right]:before:inset-y-0 data-[side=right]:before:right-full data-[side=right]:before:w-2`].join(` `)}`,y=/^on[A-Z]/,b=[`aria-label`,`aria-labelledby`];function x(e){return e.currentTarget.contains(e.target)}function S(e){return t=>{x(t)&&e(t)}}function ne(e){let t={},n={};for(let[r,i]of Object.entries(e))r===`id`||r.startsWith(`aria-`)?t[r]=i:n[r]=y.test(r)&&typeof i==`function`?S(i):i;return{childProps:t,wrapperProps:n}}function re(e,t){let n={...e};for(let e of t)delete n[e];return n}function C(e,t,n){return(e.getAttribute(t)??``).split(/\s+/).includes(n)}function w(e,t,n){let r=(e.getAttribute(t)??``).split(/\s+/).filter(e=>e&&e!==n);r.length>0?e.setAttribute(t,r.join(` `)):e.removeAttribute(t)}function ie(e,t,r,i){let a=h.useRef(null),o=r===`label`?`aria-labelledby`:`aria-describedby`;h.useLayoutEffect(()=>{let r=e.current;if(!r)return;let s=()=>{let e=a.current,s=Array.from(r.querySelectorAll(`[${o}]`)).filter(n=>!(e&&e.element===n&&e.attribute===o)&&C(n,o,t)).some(e=>e.matches(c.FOCUSABLE_SELECTOR))?null:c.getFirstTabbable(r);e&&(e.element!==s||e.attribute!==o)&&(w(e.element,e.attribute,t),a.current=null),s&&(C(s,o,t)||s.setAttribute(o,u.joinIds(s.getAttribute(o),t)??``),a.current={element:s,attribute:o},i||n.warnOnce(`Tooltip:focus-target`,`Tooltip: the element that takes focus inside it did not get \`${o}\` (the child is not focusable, or is a component, such as a Popover or Dialog root, that does not pass the prop on), so it was added to the first focusable element inside. Put the Tooltip directly around the focusable element, e.g. <Popover.Trigger><Tooltip content="…"><Button /></Tooltip></Popover.Trigger>.`))};if(s(),!a.current||typeof MutationObserver>`u`)return;let l=new MutationObserver(s);return l.observe(r,{subtree:!0,childList:!0,attributes:!0,attributeFilter:[o]}),()=>l.disconnect()})}var T=({content:e,appearance:c,variant:y,openDelay:C,closeDelay:w=100,delay:T,open:E,defaultOpen:D,onOpenChange:ae,relationship:O=`description`,side:oe=`top`,align:se=`center`,children:ce,className:le,onMouseEnter:k,onMouseLeave:A,onFocus:j,onBlur:M,ref:N,...P})=>{let F=n.resolveDeprecatedProp(`Tooltip`,c,y===void 0?void 0:te[y],`variant`,`appearance`)??`inverted`,I=n.resolveDeprecatedProp(`Tooltip`,C,T,`delay`,`openDelay`)??200,[L,R]=o.useControllable(E,D??!1,ae),z=ee.useIsClient(),B=L&&z,V=h.useRef(void 0),H=h.useRef(null),U=h.useRef(null),W=s.useId(`tooltip`),{setReference:ue,setFloating:de,floatingProps:fe}=p.usePopupPosition({open:B,side:oe,align:se,offset:8}),pe=l.useMergedRefs(N,H,ue),me=l.useMergedRefs(U,de),G=a.useEventCallback(()=>{V.current!==void 0&&(clearTimeout(V.current),V.current=void 0)}),K=a.useEventCallback(()=>{if(G(),!B){if(I<=0){R(!0);return}V.current=setTimeout(()=>{V.current=void 0,R(!0)},I)}}),q=a.useEventCallback(()=>{G(),R(!1)}),he=a.useEventCallback(()=>{G(),B&&(V.current=setTimeout(()=>{V.current=void 0,R(!1)},w))});d.useDismiss({open:B,onDismiss:q,refs:[H,U],anchorRef:H,kind:`tooltip`,outsidePress:!1}),h.useEffect(()=>{let e=V;return()=>clearTimeout(e.current)},[]);let ge=a.useEventCallback(e=>{(x(e)||U.current?.contains(e.target))&&K()}),_e=a.useEventCallback(e=>{!x(e)&&!U.current?.contains(e.target)&&q()}),{childProps:J,wrapperProps:Y}=ne(P),X=m.unwrapFragment(ce),Z=!m.isCloneableElement(X),Q=O===`label`?`aria-labelledby`:`aria-describedby`,$=Z?re(J,[...m.STATE_ARIA,...b]):{...J};(!Z||O===`description`)&&($[Q]=u.joinIds(J[Q],W));let ve=m.renderTrigger(X,$,{componentName:`Tooltip`});return ie(H,W,O,Z),(0,g.jsxs)(`span`,{ref:pe,...Y,className:t.cn(i.tooltipClassNames.root,`inline-block`,le),onMouseEnter:r.composeEventHandlers(k,ge),onMouseLeave:r.composeEventHandlers(A,he),onMouseOver:r.composeEventHandlers(Y.onMouseOver,_e),onFocus:S(r.composeEventHandlers(j,K)),onBlur:S(r.composeEventHandlers(M,q)),children:[ve,(0,g.jsx)(`span`,{id:W,role:`tooltip`,hidden:!0,children:e}),B&&(0,g.jsx)(f.Portal,{layer:`tooltip`,children:(0,g.jsx)(`span`,{ref:me,"aria-hidden":`true`,"data-wave-tooltip-surface":``,...fe,className:t.cn(i.tooltipClassNames.content,v,_[F]),children:e})})]})};T.displayName=`Tooltip`,exports.Tooltip=T;
 //# sourceMappingURL=Tooltip.cjs.map