@mortenbrudvik/waveui 0.4.0 → 0.7.0

package/dist/components/overlays/TeachingPopover.mjs

@@ -0,0 +1,181 @@
+"use client";
+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 { 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 { 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 * 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}`;
+function u(e) {
+	return "current" in e;
+}
+function d(e) {
+	return e != null && !u(e);
+}
+function f(e) {
+	return e ? u(e) ? e.current : e : null;
+}
+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;
+	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({
+		open: A && L,
+		side: Oe,
+		align: _,
+		offset: 12,
+		arrowRef: q
+	}), Ie = g != null && (!u(g) || B), X = !L || Ie && Fe, Z = A && X, Le = ne(x, U, je, Me);
+	s.useLayoutEffect(() => {
+		G.current = g, K.current = B;
+		let e = f(g);
+		W.current = e, J(e), g != null && u(g) && queueMicrotask(() => {
+			let e = f(G.current);
+			e !== W.current && (W.current = e, J(e));
+			let t = e !== null;
+			t !== K.current && (K.current = t, V(t));
+		});
+	});
+	let Q = () => {
+		Ae(!1), Ce?.();
+	}, { layerId: Re } = oe({
+		open: Z,
+		onDismiss: Q,
+		refs: [U],
+		anchorRef: W,
+		kind: "popover",
+		outsidePress: !1
+	});
+	ue({
+		enabled: Z,
+		container: z,
+		fallback: () => W.current,
+		onlyIfFocusInside: !0
+	});
+	let ze = pe({
+		enabled: Z && L,
+		surface: z,
+		anchorRef: W,
+		getPreviousStop: fe
+	});
+	s.useEffect(() => {
+		Z && z && z.focus({ preventScroll: L });
+	}, [
+		Z,
+		z,
+		L
+	]);
+	let $ = s.useRef(j);
+	if (s.useEffect(() => {
+		$.current !== j && ($.current = j, Z && P !== void 0 && O(`${P}, ${R}`));
+	}, [
+		j,
+		Z,
+		P,
+		R,
+		O
+	]), s.useEffect(() => {
+		M && n("TeachingPopover:activeStep-range", `TeachingPopover: activeStep ${T} is out of range for ${k} steps; showing step ${j + 1}.`);
+	}, [
+		M,
+		T,
+		k,
+		j
+	]), !A || !N) return null;
+	let Be = () => E(j - 1), Ve = () => {
+		I ? Q() : E(j + 1);
+	};
+	return /* @__PURE__ */ c(se, {
+		disabled: !L,
+		layerId: Re,
+		children: /* @__PURE__ */ l("div", {
+			role: "dialog",
+			"aria-labelledby": D,
+			tabIndex: -1,
+			...S,
+			ref: Le,
+			onKeyDown: ee(b, ze),
+			...L ? {
+				"data-side": Y["data-side"],
+				"data-align": Y["data-align"],
+				style: {
+					...y,
+					...Y.style,
+					...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),
+			children: [
+				L && /* @__PURE__ */ c(de, {
+					ref: q,
+					side: Pe,
+					style: Ne,
+					"data-wave-teaching-popover-arrow": ""
+				}),
+				/* @__PURE__ */ c(a, {
+					appearance: "subtle",
+					size: "small",
+					icon: /* @__PURE__ */ c(le, {}),
+					"aria-label": De,
+					className: "absolute end-3 top-3",
+					onClick: Q
+				}),
+				/* @__PURE__ */ l("h3", {
+					id: D,
+					className: "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",
+					children: N.body
+				}),
+				/* @__PURE__ */ l("div", {
+					className: "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")
+						}, 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
+						}), /* @__PURE__ */ c(a, {
+							appearance: "primary",
+							onClick: Ve,
+							children: I ? h?.done ?? ge : h?.next ?? he
+						})]
+					})]
+				})
+			]
+		})
+	});
+};
+m.displayName = "TeachingPopover";
+//#endregion
+export { m as TeachingPopover };
+
+//# sourceMappingURL=TeachingPopover.mjs.map

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

@@ -0,0 +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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"}

package/dist/components/overlays/Tooltip.cjs

@@ -0,0 +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;
+//# sourceMappingURL=Tooltip.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.cjs","names":["React","FOCUSABLE_SELECTOR","getFirstTabbable","joinIds","resolveDeprecatedProp","useControllable","useIsClient","useId","usePopupPosition","useMergedRefs","useEventCallback","unwrapFragment","isCloneableElement","STATE_ARIA","renderTrigger","cn","composeEventHandlers","Portal","require_runtime","require_cn","require_dev","require_composeEventHandlers","require_useEventCallback","require_useControllable","require_useId","require_focus","require_useMergedRefs","require_useIsClient","require_aria","require_useDismiss","require_Portal","require_usePopupPosition","require_renderTrigger","react","react_jsx_runtime","VARIANT_APPEARANCE","appearanceClasses","surfaceClasses","HANDLER_KEY","NAMING_ARIA","isOwnEvent","event","ownEventsOnly","handler","splitProps","childProps","wrapperProps","key","value","props","omit","result","keys","hasIdRef","el","attribute","id","removeIdRef","rest","useRelationshipTarget","appliedRef","relationship","wrapper","wrapperRef","update","applied","target","tooltipId","childIsFallback","observer","Tooltip","appearanceProp","openDelayProp","openProp","appearance","variant","openDelay","delay","open","setOpen","defaultOpen","onOpenChange","isClient","visible","timerRef","surfaceRef","wrapperElementRef","ref","setReference","surfaceElementRef","setFloating","clearTimer","show","hide","scheduleHide","closeDelay","timer","showOnEnter","hideOverPortaledPopup","children","triggerProps","child","className","onMouseEnter","onMouseLeave","onFocus","onBlur","content","floatingProps"],"sources":["../../../src/components/overlays/Tooltip.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { joinIds } from '../../lib/aria';\nimport { resolveDeprecatedProp, warnOnce } from '../../lib/dev';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { FOCUSABLE_SELECTOR, getFirstTabbable } from '../../lib/focus';\nimport {\n  isCloneableElement,\n  renderTrigger,\n  STATE_ARIA,\n  unwrapFragment,\n} from '../../lib/renderTrigger';\nimport type { PopupAlign, PopupSide } from '../../lib/types';\nimport { useControllable } from '../../hooks/useControllable';\nimport { useId } from '../../hooks/useId';\nimport { useIsClient } from '../../hooks/useIsClient';\nimport { useDismiss } from '../../hooks/useDismiss';\nimport { usePopupPosition } from '../../hooks/usePopupPosition';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { useEventCallback } from '../../hooks/useEventCallback';\nimport { Portal } from '../portal/Portal';\n\n/** Color treatment of a tooltip (`TooltipProps.appearance`). */\nexport type TooltipAppearance = 'inverted' | 'normal';\n\n/** Properties for the Tooltip component. */\nexport interface TooltipProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'content'> {\n  /** Content to display inside the tooltip (short, non-interactive text). */\n  content: React.ReactNode;\n  /**\n   * Color treatment: `inverted` (dark surface in the light theme) or `normal` (the page\n   * background with a border).\n   * @default 'inverted'\n   */\n  appearance?: TooltipAppearance;\n  /**\n   * @deprecated Use `appearance` (`'dark'` → `'inverted'`, `'light'` → `'normal'`).\n   */\n  variant?: 'dark' | 'light';\n  /**\n   * Milliseconds before the tooltip appears when the pointer rests on the child or the child\n   * receives keyboard focus (Fluent's `showDelay`; unlike Menu's and Popover's `openDelay`, it\n   * applies to focus too).\n   * @default 200\n   */\n  openDelay?: number;\n  /**\n   * Milliseconds before it hides once the pointer has left the child and the tooltip (Fluent's\n   * `hideDelay`); blur and Escape hide it at once.\n   * @default 100\n   */\n  closeDelay?: number;\n  /** @deprecated Use `openDelay`. */\n  delay?: number;\n  /**\n   * Controlled open state (Fluent's `visible`). The tooltip still asks to open on hover and focus\n   * (after `openDelay`) and to close on leave, blur and Escape through `onOpenChange`. The surface\n   * renders only in the browser: an open tooltip is closed in the server HTML and opens once it\n   * has hydrated.\n   */\n  open?: boolean;\n  /**\n   * Initial open state for uncontrolled usage.\n   * @default false\n   */\n  defaultOpen?: boolean;\n  /**\n   * Called with the new open state when it changes (Fluent's `onVisibleChange`). It has no\n   * `details` argument yet.\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * How the tooltip relates to its child: `description` adds it to the child's\n   * `aria-describedby`; `label` adds it to the child's `aria-labelledby`, naming an icon-only\n   * button.\n   * @default 'description'\n   */\n  relationship?: 'description' | 'label';\n  /**\n   * Side of the target the tooltip opens on. `start`/`end` follow the writing direction; the\n   * tooltip flips to the opposite side when there is not enough room.\n   * @default 'top'\n   */\n  side?: PopupSide;\n  /** Alignment along the target's edge.\n   * @default 'center'\n   */\n  align?: PopupAlign;\n  /**\n   * A single element that triggers the tooltip on hover and focus: it receives the\n   * `aria-describedby`/`aria-labelledby`, plus any `id` and `aria-*` props given to the Tooltip\n   * (a Fragment around one element counts as that element). Other children are wrapped in a\n   * described `<span>` with a development warning, and their first focusable element gets the\n   * relationship.\n   */\n  children: React.ReactElement;\n  /** Ref to the wrapper `<span>` (the positioning anchor). */\n  ref?: React.Ref<HTMLSpanElement>;\n}\n\nconst VARIANT_APPEARANCE: Record<'dark' | 'light', TooltipAppearance> = {\n  dark: 'inverted',\n  light: 'normal',\n};\n\nconst appearanceClasses: Record<TooltipAppearance, string> = {\n  inverted: 'border border-inverted-border bg-inverted text-inverted-foreground',\n  normal: 'border border-border bg-background text-foreground',\n};\n\n/**\n * Transparent `::before` hover bridge across the 8px gap (the positioning offset) on the side that\n * faces the trigger only, so the pointer can move onto the tooltip; the other sides get no bridge,\n * which would otherwise catch hovers and clicks meant for neighbouring controls.\n */\nconst bridgeClasses = [\n  'before:absolute',\n  // Tooltip above the trigger: a strip below it.\n  'data-[side=top]:before:inset-x-0 data-[side=top]:before:top-full data-[side=top]:before:h-2',\n  // Tooltip below the trigger: a strip above it.\n  'data-[side=bottom]:before:inset-x-0 data-[side=bottom]:before:bottom-full data-[side=bottom]:before:h-2',\n  // wave-allow-physical: data-side is the physical side resolved by the positioning\n  'data-[side=left]:before:inset-y-0 data-[side=left]:before:left-full data-[side=left]:before:w-2',\n  // wave-allow-physical: data-side is the physical side resolved by the positioning\n  'data-[side=right]:before:inset-y-0 data-[side=right]:before:right-full data-[side=right]:before:w-2',\n].join(' ');\n\n/**\n * The visual surface: wrapping text, typography reset against the host (header cells, muted\n * panels), and the hover bridge towards the trigger.\n */\nconst surfaceClasses = `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 ${bridgeClasses}`;\n\ntype UnknownProps = Record<string, unknown>;\ntype Relationship = NonNullable<TooltipProps['relationship']>;\n\nconst HANDLER_KEY = /^on[A-Z]/;\n\n/** Naming attributes a generic element such as the fallback `<span>` must not carry. */\nconst NAMING_ARIA = ['aria-label', 'aria-labelledby'] as const;\n\n/**\n * Whether an event reached the wrapper from its own DOM subtree — the child — rather than through\n * a portal: React bubbles events from portaled content (the tooltip surface, a popup the child\n * renders in a portal) through the component tree.\n */\nfunction isOwnEvent(event: React.SyntheticEvent): boolean {\n  return (event.currentTarget as Node).contains(event.target as Node);\n}\n\n/** `handler`, called only for the wrapper's own events (see {@link isOwnEvent}). */\nfunction ownEventsOnly<E extends React.SyntheticEvent>(\n  handler: (event: E) => void,\n): (event: E) => void {\n  return (event) => {\n    if (isOwnEvent(event)) handler(event);\n  };\n}\n\n/**\n * Splits the props the Tooltip receives, from its consumer or from a parent that clones its child\n * (Menu.Trigger, Popover.Trigger, Dialog.Trigger, Field): `id` and `aria-*` describe the element\n * the Tooltip is attached to, so they go to the child; the rest stays on the wrapper `<span>`.\n */\nfunction splitProps(props: UnknownProps): { childProps: UnknownProps; wrapperProps: UnknownProps } {\n  const childProps: UnknownProps = {};\n  const wrapperProps: UnknownProps = {};\n  for (const [key, value] of Object.entries(props)) {\n    if (key === 'id' || key.startsWith('aria-')) childProps[key] = value;\n    else if (HANDLER_KEY.test(key) && typeof value === 'function') {\n      // The wrapper sees the child's events as they bubble, but not those that reach it through\n      // a portal, such as a click on the tooltip surface (it would toggle a parent trigger).\n      wrapperProps[key] = ownEventsOnly(value as (event: React.SyntheticEvent) => void);\n    } else wrapperProps[key] = value;\n  }\n  return { childProps, wrapperProps };\n}\n\nfunction omit(props: UnknownProps, keys: readonly string[]): UnknownProps {\n  const result = { ...props };\n  for (const key of keys) delete result[key];\n  return result;\n}\n\nfunction hasIdRef(el: Element, attribute: string, id: string): boolean {\n  return (el.getAttribute(attribute) ?? '').split(/\\s+/).includes(id);\n}\n\nfunction removeIdRef(el: Element, attribute: string, id: string): void {\n  const rest = (el.getAttribute(attribute) ?? '')\n    .split(/\\s+/)\n    .filter((value) => value && value !== id);\n  if (rest.length > 0) el.setAttribute(attribute, rest.join(' '));\n  else el.removeAttribute(attribute);\n}\n\n/**\n * Makes sure the element people focus carries the tooltip relationship. After each commit, when no\n * focusable element inside the wrapper references `tooltipId` through `attribute` — children in the\n * fallback span, a non-focusable child element, or a child component that drops the prop (a\n * Popover or Dialog root) — the id is added to the first tabbable element inside the wrapper and\n * kept there while the subtree changes; a development warning explains the nesting, except for\n * the fallback span, whose children shape `renderTrigger` already warned about.\n */\nfunction useRelationshipTarget(\n  wrapperRef: React.RefObject<HTMLSpanElement | null>,\n  tooltipId: string,\n  relationship: Relationship,\n  childIsFallback: boolean,\n): void {\n  const appliedRef = React.useRef<{ element: Element; attribute: string } | null>(null);\n  const attribute = relationship === 'label' ? 'aria-labelledby' : 'aria-describedby';\n\n  React.useLayoutEffect(() => {\n    const wrapper = wrapperRef.current;\n    if (!wrapper) return;\n\n    const update = () => {\n      const applied = appliedRef.current;\n      const carriers = Array.from(wrapper.querySelectorAll(`[${attribute}]`)).filter(\n        (el) =>\n          !(applied && applied.element === el && applied.attribute === attribute) &&\n          hasIdRef(el, attribute, tooltipId),\n      );\n      const reached = carriers.some((el) => el.matches(FOCUSABLE_SELECTOR));\n      const target = reached ? null : getFirstTabbable(wrapper);\n      if (applied && (applied.element !== target || applied.attribute !== attribute)) {\n        removeIdRef(applied.element, applied.attribute, tooltipId);\n        appliedRef.current = null;\n      }\n      if (!target) return;\n      if (!hasIdRef(target, attribute, tooltipId)) {\n        target.setAttribute(attribute, joinIds(target.getAttribute(attribute), tooltipId) ?? '');\n      }\n      appliedRef.current = { element: target, attribute };\n      if (!childIsFallback) {\n        warnOnce(\n          'Tooltip:focus-target',\n          `Tooltip: the element that takes focus inside it did not get \\`${attribute}\\` (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>.`,\n        );\n      }\n    };\n\n    update();\n    if (!appliedRef.current || typeof MutationObserver === 'undefined') return;\n    // Keep it on the focusable element when the child replaces it or rewrites the attribute\n    // without the Tooltip re-rendering.\n    const observer = new MutationObserver(update);\n    observer.observe(wrapper, {\n      subtree: true,\n      childList: true,\n      attributes: true,\n      attributeFilter: [attribute],\n    });\n    return () => observer.disconnect();\n  });\n}\n\n/**\n * Shows a short text label or description for its child on hover and keyboard focus.\n *\n * - The text is always present as a hidden `role=\"tooltip\"` element referenced by the child's\n *   `aria-describedby` (or `aria-labelledby` with `relationship=\"label\"`), so screen readers get\n *   it on focus without waiting for the delay; the child's own ids are kept.\n * - The visual surface is rendered in a portal only while visible (it is `aria-hidden`, a copy of\n *   the description), positioned on `side`/`align` with flipping and shifting to stay in view.\n * - It appears `openDelay` after the pointer rests on the child or the child takes keyboard focus,\n *   stays visible while the pointer moves onto it, hides `closeDelay` after the pointer leaves or\n *   immediately on blur, and Escape hides it without closing an enclosing dialog or popover. Focus\n *   and hover inside a popup the child renders in a portal (a DatePicker calendar, a listbox) do\n *   not show it, and the pointer moving onto such a popup hides it.\n * - The open state is uncontrolled by default (`defaultOpen`). With `open` and `onOpenChange`\n *   (Fluent's `visible` and `onVisibleChange`) the parent owns it: hover, focus, leave, blur and\n *   Escape then only ask for a change, and `open` alone shows the surface.\n * - `id` and `aria-*` props given to the Tooltip go to its child, merged with the child's own (the\n *   child's `id` wins, id lists are joined, `aria-expanded`/`aria-controls`/`aria-haspopup` from\n *   the Tooltip win). `className`, `style`, `ref`, `data-*` and event handlers stay on the wrapper\n *   `<span>`; the handlers see the child's events as they bubble, not events from portaled\n *   content such as the tooltip surface or a popup the child renders in a portal (a DatePicker\n *   calendar, a listbox). `onMouseEnter` and `onMouseLeave` are the exception: React fires them\n *   along the component tree, so they also fire when the pointer moves onto or off the tooltip\n *   surface or such a popup. So the Tooltip can sit inside a trigger, and the trigger's\n *   id and state reach the button: `<Menu.Trigger><Tooltip content=\"…\"><Button /></Tooltip>\n *   </Menu.Trigger>` (also `Popover.Trigger`, `Dialog.Trigger`, `Drawer.Trigger`). Around a\n *   trigger works too, since triggers pass `aria-describedby` on to their child.\n * - Wrap the focusable element itself. When the element that takes focus does not get the\n *   relationship (a Popover or Dialog root, a component that drops props, a non-focusable\n *   wrapper element), it is added to the first focusable element inside, with a development\n *   warning.\n *\n * @example\n * <Menu>\n *   <Menu.Trigger>\n *     <Tooltip content=\"Edit, duplicate or delete the item\">\n *       <Button>Actions</Button>\n *     </Tooltip>\n *   </Menu.Trigger>\n *   <Menu.Popover>…</Menu.Popover>\n * </Menu>\n */\nexport const Tooltip = ({\n  content,\n  appearance: appearanceProp,\n  variant,\n  openDelay: openDelayProp,\n  closeDelay = 100,\n  delay,\n  open: openProp,\n  defaultOpen,\n  onOpenChange,\n  relationship = 'description',\n  side = 'top',\n  align = 'center',\n  children,\n  className,\n  onMouseEnter,\n  onMouseLeave,\n  onFocus,\n  onBlur,\n  ref,\n  ...rest\n}: TooltipProps) => {\n  const appearance =\n    resolveDeprecatedProp(\n      'Tooltip',\n      appearanceProp,\n      variant === undefined ? undefined : VARIANT_APPEARANCE[variant],\n      'variant',\n      'appearance',\n    ) ?? 'inverted';\n  const openDelay =\n    resolveDeprecatedProp('Tooltip', openDelayProp, delay, 'delay', 'openDelay') ?? 200;\n  const [open, setOpen] = useControllable(openProp, defaultOpen ?? false, onOpenChange);\n  // The surface lives in a portal, which renders only in the browser: until then (the server HTML,\n  // hydration) the tooltip is closed; the hidden description is rendered either way.\n  const isClient = useIsClient();\n  const visible = open && isClient;\n  const timerRef = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n  const wrapperRef = React.useRef<HTMLSpanElement | null>(null);\n  const surfaceRef = React.useRef<HTMLSpanElement | null>(null);\n  const tooltipId = useId('tooltip');\n\n  // Destructured: react-hooks/refs treats an object whose member is passed to `ref` as a ref.\n  const { setReference, setFloating, floatingProps } = usePopupPosition({\n    open: visible,\n    side,\n    align,\n    offset: 8,\n  });\n  const wrapperElementRef = useMergedRefs<HTMLSpanElement>(ref, wrapperRef, setReference);\n  const surfaceElementRef = useMergedRefs<HTMLSpanElement>(surfaceRef, setFloating);\n\n  // Timer handlers are event callbacks (stable, latest state): they are composed with the\n  // consumer's handlers during render but only run from events and timers.\n  const clearTimer = useEventCallback(() => {\n    if (timerRef.current !== undefined) {\n      clearTimeout(timerRef.current);\n      timerRef.current = undefined;\n    }\n  });\n\n  // show, hide and scheduleHide ask for the new state; a controlled tooltip changes only when the\n  // parent updates `open`.\n  const show = useEventCallback(() => {\n    clearTimer();\n    if (visible) return;\n    if (openDelay <= 0) {\n      setOpen(true);\n      return;\n    }\n    timerRef.current = setTimeout(() => {\n      timerRef.current = undefined;\n      setOpen(true);\n    }, openDelay);\n  });\n\n  const hide = useEventCallback(() => {\n    clearTimer();\n    setOpen(false);\n  });\n\n  // The grace period after the pointer leaves lets it move onto the tooltip.\n  const scheduleHide = useEventCallback(() => {\n    clearTimer();\n    if (!visible) return;\n    timerRef.current = setTimeout(() => {\n      timerRef.current = undefined;\n      setOpen(false);\n    }, closeDelay);\n  });\n\n  // An Escape-only layer while visible: Escape hides the tooltip before any enclosing overlay. The\n  // wrapper is its anchor (its trigger, not its surface): Tab from the child inside a focus trap\n  // moves on from the popover, portal or dialog around the wrapper.\n  useDismiss({\n    open: visible,\n    onDismiss: hide,\n    refs: [wrapperRef, surfaceRef],\n    anchorRef: wrapperRef,\n    kind: 'tooltip',\n    outsidePress: false,\n  });\n\n  React.useEffect(() => {\n    const timer = timerRef;\n    return () => clearTimeout(timer.current);\n  }, []);\n\n  // The tooltip's own reactions ignore a popup the child renders in a portal: its focus and blur\n  // are not the child's, entering it does not show the tooltip, and the pointer moving onto it\n  // (no mouseleave reaches the wrapper then) hides the tooltip, which would cover it. The tooltip\n  // surface itself is portaled too but belongs to the tooltip: it stays hoverable.\n  const showOnEnter = useEventCallback((event: React.MouseEvent<HTMLSpanElement>) => {\n    if (isOwnEvent(event) || surfaceRef.current?.contains(event.target as Node)) show();\n  });\n  const hideOverPortaledPopup = useEventCallback((event: React.MouseEvent<HTMLSpanElement>) => {\n    if (!isOwnEvent(event) && !surfaceRef.current?.contains(event.target as Node)) hide();\n  });\n\n  const { childProps, wrapperProps } = splitProps(rest);\n  const target = unwrapFragment(children);\n  const childIsFallback = !isCloneableElement(target);\n  const attribute = relationship === 'label' ? 'aria-labelledby' : 'aria-describedby';\n  // Props given to the Tooltip come first, as if the child had them; then the tooltip's own id.\n  // The fallback span is a generic element: no state ARIA and no naming on it (the relationship\n  // then reaches its first focusable element through useRelationshipTarget).\n  const triggerProps: UnknownProps = childIsFallback\n    ? omit(childProps, [...STATE_ARIA, ...NAMING_ARIA])\n    : { ...childProps };\n  if (!childIsFallback || relationship === 'description') {\n    triggerProps[attribute] = joinIds(childProps[attribute] as string | undefined, tooltipId);\n  }\n  const child = renderTrigger(target, triggerProps, { componentName: 'Tooltip' });\n  useRelationshipTarget(wrapperRef, tooltipId, relationship, childIsFallback);\n\n  return (\n    <span\n      ref={wrapperElementRef}\n      {...wrapperProps}\n      className={cn('inline-block', className)}\n      onMouseEnter={composeEventHandlers(onMouseEnter, showOnEnter)}\n      onMouseLeave={composeEventHandlers(onMouseLeave, scheduleHide)}\n      onMouseOver={composeEventHandlers(\n        wrapperProps.onMouseOver as React.MouseEventHandler<HTMLSpanElement> | undefined,\n        hideOverPortaledPopup,\n      )}\n      onFocus={ownEventsOnly(composeEventHandlers(onFocus, show))}\n      onBlur={ownEventsOnly(composeEventHandlers(onBlur, hide))}\n    >\n      {child}\n      <span id={tooltipId} role=\"tooltip\" hidden>\n        {content}\n      </span>\n      {visible && (\n        <Portal layer=\"tooltip\">\n          <span\n            ref={surfaceElementRef}\n            aria-hidden=\"true\"\n            data-wave-tooltip-surface=\"\"\n            {...floatingProps}\n            className={cn(surfaceClasses, appearanceClasses[appearance])}\n          >\n            {content}\n          </span>\n        </Portal>\n      )}\n    </span>\n  );\n};\n\nTooltip.displayName = 'Tooltip';\n"],"mappings":"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"}

package/dist/components/overlays/Tooltip.mjs

@@ -0,0 +1,160 @@
+"use client";
+import { cn as e } from "../../lib/cn.mjs";
+import { resolveDeprecatedProp as t, warnOnce as n } from "../../lib/dev.mjs";
+import { composeEventHandlers as r } from "../../lib/composeEventHandlers.mjs";
+import { useEventCallback as i } from "../../hooks/useEventCallback.mjs";
+import { useControllable as a } from "../../hooks/useControllable.mjs";
+import { useId as o } from "../../hooks/useId.mjs";
+import { FOCUSABLE_SELECTOR as s, getFirstTabbable as c } from "../../lib/focus.mjs";
+import { useMergedRefs as l } from "../../hooks/useMergedRefs.mjs";
+import { useIsClient as u } from "../../hooks/useIsClient.mjs";
+import { joinIds as d } from "../../lib/aria.mjs";
+import { useDismiss as ee } from "../../hooks/useDismiss.mjs";
+import { Portal as f } from "../portal/Portal.mjs";
+import { usePopupPosition as p } from "../../hooks/usePopupPosition.mjs";
+import { STATE_ARIA as te, isCloneableElement as ne, renderTrigger as m, unwrapFragment as h } from "../../lib/renderTrigger.mjs";
+import * as g from "react";
+import { jsx as _, jsxs as re } from "react/jsx-runtime";
+//#region src/components/overlays/Tooltip.tsx
+var ie = {
+	dark: "inverted",
+	light: "normal"
+}, ae = {
+	inverted: "border border-inverted-border bg-inverted text-inverted-foreground",
+	normal: "border border-border bg-background text-foreground"
+}, oe = `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]/, se = ["aria-label", "aria-labelledby"];
+function y(e) {
+	return e.currentTarget.contains(e.target);
+}
+function b(e) {
+	return (t) => {
+		y(t) && e(t);
+	};
+}
+function x(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" ? b(i) : i;
+	return {
+		childProps: t,
+		wrapperProps: n
+	};
+}
+function ce(e, t) {
+	let n = { ...e };
+	for (let e of t) delete n[e];
+	return n;
+}
+function S(e, t, n) {
+	return (e.getAttribute(t) ?? "").split(/\s+/).includes(n);
+}
+function C(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 le(e, t, r, i) {
+	let a = g.useRef(null), o = r === "label" ? "aria-labelledby" : "aria-describedby";
+	g.useLayoutEffect(() => {
+		let r = e.current;
+		if (!r) return;
+		let l = () => {
+			let e = a.current, l = Array.from(r.querySelectorAll(`[${o}]`)).filter((n) => !(e && e.element === n && e.attribute === o) && S(n, o, t)).some((e) => e.matches(s)) ? null : c(r);
+			e && (e.element !== l || e.attribute !== o) && (C(e.element, e.attribute, t), a.current = null), l && (S(l, o, t) || l.setAttribute(o, d(l.getAttribute(o), t) ?? ""), a.current = {
+				element: l,
+				attribute: o
+			}, i || n("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 (l(), !a.current || typeof MutationObserver > "u") return;
+		let u = new MutationObserver(l);
+		return u.observe(r, {
+			subtree: !0,
+			childList: !0,
+			attributes: !0,
+			attributeFilter: [o]
+		}), () => u.disconnect();
+	});
+}
+var w = ({ content: n, appearance: s, variant: c, openDelay: v, closeDelay: S = 100, delay: C, open: w, defaultOpen: ue, onOpenChange: de, relationship: T = "description", side: fe = "top", align: E = "center", children: D, className: O, onMouseEnter: k, onMouseLeave: A, onFocus: j, onBlur: M, ref: N, ...P }) => {
+	let F = t("Tooltip", s, c === void 0 ? void 0 : ie[c], "variant", "appearance") ?? "inverted", I = t("Tooltip", v, C, "delay", "openDelay") ?? 200, [L, R] = a(w, ue ?? !1, de), z = u(), B = L && z, V = g.useRef(void 0), H = g.useRef(null), U = g.useRef(null), W = o("tooltip"), { setReference: pe, setFloating: me, floatingProps: he } = p({
+		open: B,
+		side: fe,
+		align: E,
+		offset: 8
+	}), ge = l(N, H, pe), _e = l(U, me), G = i(() => {
+		V.current !== void 0 && (clearTimeout(V.current), V.current = void 0);
+	}), K = i(() => {
+		if (G(), !B) {
+			if (I <= 0) {
+				R(!0);
+				return;
+			}
+			V.current = setTimeout(() => {
+				V.current = void 0, R(!0);
+			}, I);
+		}
+	}), q = i(() => {
+		G(), R(!1);
+	}), ve = i(() => {
+		G(), B && (V.current = setTimeout(() => {
+			V.current = void 0, R(!1);
+		}, S));
+	});
+	ee({
+		open: B,
+		onDismiss: q,
+		refs: [H, U],
+		anchorRef: H,
+		kind: "tooltip",
+		outsidePress: !1
+	}), g.useEffect(() => {
+		let e = V;
+		return () => clearTimeout(e.current);
+	}, []);
+	let ye = i((e) => {
+		(y(e) || U.current?.contains(e.target)) && K();
+	}), be = i((e) => {
+		!y(e) && !U.current?.contains(e.target) && q();
+	}), { childProps: J, wrapperProps: Y } = x(P), X = h(D), Z = !ne(X), Q = T === "label" ? "aria-labelledby" : "aria-describedby", $ = Z ? ce(J, [...te, ...se]) : { ...J };
+	(!Z || T === "description") && ($[Q] = d(J[Q], W));
+	let xe = m(X, $, { componentName: "Tooltip" });
+	return le(H, W, T, Z), /* @__PURE__ */ re("span", {
+		ref: ge,
+		...Y,
+		className: e("inline-block", O),
+		onMouseEnter: r(k, ye),
+		onMouseLeave: r(A, ve),
+		onMouseOver: r(Y.onMouseOver, be),
+		onFocus: b(r(j, K)),
+		onBlur: b(r(M, q)),
+		children: [
+			xe,
+			/* @__PURE__ */ _("span", {
+				id: W,
+				role: "tooltip",
+				hidden: !0,
+				children: n
+			}),
+			B && /* @__PURE__ */ _(f, {
+				layer: "tooltip",
+				children: /* @__PURE__ */ _("span", {
+					ref: _e,
+					"aria-hidden": "true",
+					"data-wave-tooltip-surface": "",
+					...he,
+					className: e(oe, ae[F]),
+					children: n
+				})
+			})
+		]
+	});
+};
+w.displayName = "Tooltip";
+//#endregion
+export { w as Tooltip };
+
+//# sourceMappingURL=Tooltip.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.mjs","names":["useId","useId$1","React","VARIANT_APPEARANCE","appearanceClasses","surfaceClasses","HANDLER_KEY","NAMING_ARIA","isOwnEvent","event","ownEventsOnly","handler","splitProps","childProps","wrapperProps","key","value","props","omit","result","keys","hasIdRef","el","attribute","id","removeIdRef","rest","useRelationshipTarget","appliedRef","relationship","wrapper","wrapperRef","update","applied","target","tooltipId","FOCUSABLE_SELECTOR","getFirstTabbable","joinIds","childIsFallback","warnOnce","observer","Tooltip","appearanceProp","openDelayProp","openProp","appearance","resolveDeprecatedProp","variant","openDelay","delay","open","setOpen","useControllable","defaultOpen","onOpenChange","isClient","useIsClient","visible","timerRef","surfaceRef","usePopupPosition","wrapperElementRef","useMergedRefs","ref","setReference","surfaceElementRef","setFloating","clearTimer","useEventCallback","show","hide","scheduleHide","closeDelay","useDismiss","timer","showOnEnter","hideOverPortaledPopup","unwrapFragment","children","isCloneableElement","triggerProps","STATE_ARIA","child","renderTrigger","cn","className","composeEventHandlers","onMouseEnter","onMouseLeave","onFocus","onBlur","content","Portal","floatingProps"],"sources":["../../../src/components/overlays/Tooltip.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { joinIds } from '../../lib/aria';\nimport { resolveDeprecatedProp, warnOnce } from '../../lib/dev';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { FOCUSABLE_SELECTOR, getFirstTabbable } from '../../lib/focus';\nimport {\n  isCloneableElement,\n  renderTrigger,\n  STATE_ARIA,\n  unwrapFragment,\n} from '../../lib/renderTrigger';\nimport type { PopupAlign, PopupSide } from '../../lib/types';\nimport { useControllable } from '../../hooks/useControllable';\nimport { useId } from '../../hooks/useId';\nimport { useIsClient } from '../../hooks/useIsClient';\nimport { useDismiss } from '../../hooks/useDismiss';\nimport { usePopupPosition } from '../../hooks/usePopupPosition';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { useEventCallback } from '../../hooks/useEventCallback';\nimport { Portal } from '../portal/Portal';\n\n/** Color treatment of a tooltip (`TooltipProps.appearance`). */\nexport type TooltipAppearance = 'inverted' | 'normal';\n\n/** Properties for the Tooltip component. */\nexport interface TooltipProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'content'> {\n  /** Content to display inside the tooltip (short, non-interactive text). */\n  content: React.ReactNode;\n  /**\n   * Color treatment: `inverted` (dark surface in the light theme) or `normal` (the page\n   * background with a border).\n   * @default 'inverted'\n   */\n  appearance?: TooltipAppearance;\n  /**\n   * @deprecated Use `appearance` (`'dark'` → `'inverted'`, `'light'` → `'normal'`).\n   */\n  variant?: 'dark' | 'light';\n  /**\n   * Milliseconds before the tooltip appears when the pointer rests on the child or the child\n   * receives keyboard focus (Fluent's `showDelay`; unlike Menu's and Popover's `openDelay`, it\n   * applies to focus too).\n   * @default 200\n   */\n  openDelay?: number;\n  /**\n   * Milliseconds before it hides once the pointer has left the child and the tooltip (Fluent's\n   * `hideDelay`); blur and Escape hide it at once.\n   * @default 100\n   */\n  closeDelay?: number;\n  /** @deprecated Use `openDelay`. */\n  delay?: number;\n  /**\n   * Controlled open state (Fluent's `visible`). The tooltip still asks to open on hover and focus\n   * (after `openDelay`) and to close on leave, blur and Escape through `onOpenChange`. The surface\n   * renders only in the browser: an open tooltip is closed in the server HTML and opens once it\n   * has hydrated.\n   */\n  open?: boolean;\n  /**\n   * Initial open state for uncontrolled usage.\n   * @default false\n   */\n  defaultOpen?: boolean;\n  /**\n   * Called with the new open state when it changes (Fluent's `onVisibleChange`). It has no\n   * `details` argument yet.\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * How the tooltip relates to its child: `description` adds it to the child's\n   * `aria-describedby`; `label` adds it to the child's `aria-labelledby`, naming an icon-only\n   * button.\n   * @default 'description'\n   */\n  relationship?: 'description' | 'label';\n  /**\n   * Side of the target the tooltip opens on. `start`/`end` follow the writing direction; the\n   * tooltip flips to the opposite side when there is not enough room.\n   * @default 'top'\n   */\n  side?: PopupSide;\n  /** Alignment along the target's edge.\n   * @default 'center'\n   */\n  align?: PopupAlign;\n  /**\n   * A single element that triggers the tooltip on hover and focus: it receives the\n   * `aria-describedby`/`aria-labelledby`, plus any `id` and `aria-*` props given to the Tooltip\n   * (a Fragment around one element counts as that element). Other children are wrapped in a\n   * described `<span>` with a development warning, and their first focusable element gets the\n   * relationship.\n   */\n  children: React.ReactElement;\n  /** Ref to the wrapper `<span>` (the positioning anchor). */\n  ref?: React.Ref<HTMLSpanElement>;\n}\n\nconst VARIANT_APPEARANCE: Record<'dark' | 'light', TooltipAppearance> = {\n  dark: 'inverted',\n  light: 'normal',\n};\n\nconst appearanceClasses: Record<TooltipAppearance, string> = {\n  inverted: 'border border-inverted-border bg-inverted text-inverted-foreground',\n  normal: 'border border-border bg-background text-foreground',\n};\n\n/**\n * Transparent `::before` hover bridge across the 8px gap (the positioning offset) on the side that\n * faces the trigger only, so the pointer can move onto the tooltip; the other sides get no bridge,\n * which would otherwise catch hovers and clicks meant for neighbouring controls.\n */\nconst bridgeClasses = [\n  'before:absolute',\n  // Tooltip above the trigger: a strip below it.\n  'data-[side=top]:before:inset-x-0 data-[side=top]:before:top-full data-[side=top]:before:h-2',\n  // Tooltip below the trigger: a strip above it.\n  'data-[side=bottom]:before:inset-x-0 data-[side=bottom]:before:bottom-full data-[side=bottom]:before:h-2',\n  // wave-allow-physical: data-side is the physical side resolved by the positioning\n  'data-[side=left]:before:inset-y-0 data-[side=left]:before:left-full data-[side=left]:before:w-2',\n  // wave-allow-physical: data-side is the physical side resolved by the positioning\n  'data-[side=right]:before:inset-y-0 data-[side=right]:before:right-full data-[side=right]:before:w-2',\n].join(' ');\n\n/**\n * The visual surface: wrapping text, typography reset against the host (header cells, muted\n * panels), and the hover bridge towards the trigger.\n */\nconst surfaceClasses = `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 ${bridgeClasses}`;\n\ntype UnknownProps = Record<string, unknown>;\ntype Relationship = NonNullable<TooltipProps['relationship']>;\n\nconst HANDLER_KEY = /^on[A-Z]/;\n\n/** Naming attributes a generic element such as the fallback `<span>` must not carry. */\nconst NAMING_ARIA = ['aria-label', 'aria-labelledby'] as const;\n\n/**\n * Whether an event reached the wrapper from its own DOM subtree — the child — rather than through\n * a portal: React bubbles events from portaled content (the tooltip surface, a popup the child\n * renders in a portal) through the component tree.\n */\nfunction isOwnEvent(event: React.SyntheticEvent): boolean {\n  return (event.currentTarget as Node).contains(event.target as Node);\n}\n\n/** `handler`, called only for the wrapper's own events (see {@link isOwnEvent}). */\nfunction ownEventsOnly<E extends React.SyntheticEvent>(\n  handler: (event: E) => void,\n): (event: E) => void {\n  return (event) => {\n    if (isOwnEvent(event)) handler(event);\n  };\n}\n\n/**\n * Splits the props the Tooltip receives, from its consumer or from a parent that clones its child\n * (Menu.Trigger, Popover.Trigger, Dialog.Trigger, Field): `id` and `aria-*` describe the element\n * the Tooltip is attached to, so they go to the child; the rest stays on the wrapper `<span>`.\n */\nfunction splitProps(props: UnknownProps): { childProps: UnknownProps; wrapperProps: UnknownProps } {\n  const childProps: UnknownProps = {};\n  const wrapperProps: UnknownProps = {};\n  for (const [key, value] of Object.entries(props)) {\n    if (key === 'id' || key.startsWith('aria-')) childProps[key] = value;\n    else if (HANDLER_KEY.test(key) && typeof value === 'function') {\n      // The wrapper sees the child's events as they bubble, but not those that reach it through\n      // a portal, such as a click on the tooltip surface (it would toggle a parent trigger).\n      wrapperProps[key] = ownEventsOnly(value as (event: React.SyntheticEvent) => void);\n    } else wrapperProps[key] = value;\n  }\n  return { childProps, wrapperProps };\n}\n\nfunction omit(props: UnknownProps, keys: readonly string[]): UnknownProps {\n  const result = { ...props };\n  for (const key of keys) delete result[key];\n  return result;\n}\n\nfunction hasIdRef(el: Element, attribute: string, id: string): boolean {\n  return (el.getAttribute(attribute) ?? '').split(/\\s+/).includes(id);\n}\n\nfunction removeIdRef(el: Element, attribute: string, id: string): void {\n  const rest = (el.getAttribute(attribute) ?? '')\n    .split(/\\s+/)\n    .filter((value) => value && value !== id);\n  if (rest.length > 0) el.setAttribute(attribute, rest.join(' '));\n  else el.removeAttribute(attribute);\n}\n\n/**\n * Makes sure the element people focus carries the tooltip relationship. After each commit, when no\n * focusable element inside the wrapper references `tooltipId` through `attribute` — children in the\n * fallback span, a non-focusable child element, or a child component that drops the prop (a\n * Popover or Dialog root) — the id is added to the first tabbable element inside the wrapper and\n * kept there while the subtree changes; a development warning explains the nesting, except for\n * the fallback span, whose children shape `renderTrigger` already warned about.\n */\nfunction useRelationshipTarget(\n  wrapperRef: React.RefObject<HTMLSpanElement | null>,\n  tooltipId: string,\n  relationship: Relationship,\n  childIsFallback: boolean,\n): void {\n  const appliedRef = React.useRef<{ element: Element; attribute: string } | null>(null);\n  const attribute = relationship === 'label' ? 'aria-labelledby' : 'aria-describedby';\n\n  React.useLayoutEffect(() => {\n    const wrapper = wrapperRef.current;\n    if (!wrapper) return;\n\n    const update = () => {\n      const applied = appliedRef.current;\n      const carriers = Array.from(wrapper.querySelectorAll(`[${attribute}]`)).filter(\n        (el) =>\n          !(applied && applied.element === el && applied.attribute === attribute) &&\n          hasIdRef(el, attribute, tooltipId),\n      );\n      const reached = carriers.some((el) => el.matches(FOCUSABLE_SELECTOR));\n      const target = reached ? null : getFirstTabbable(wrapper);\n      if (applied && (applied.element !== target || applied.attribute !== attribute)) {\n        removeIdRef(applied.element, applied.attribute, tooltipId);\n        appliedRef.current = null;\n      }\n      if (!target) return;\n      if (!hasIdRef(target, attribute, tooltipId)) {\n        target.setAttribute(attribute, joinIds(target.getAttribute(attribute), tooltipId) ?? '');\n      }\n      appliedRef.current = { element: target, attribute };\n      if (!childIsFallback) {\n        warnOnce(\n          'Tooltip:focus-target',\n          `Tooltip: the element that takes focus inside it did not get \\`${attribute}\\` (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>.`,\n        );\n      }\n    };\n\n    update();\n    if (!appliedRef.current || typeof MutationObserver === 'undefined') return;\n    // Keep it on the focusable element when the child replaces it or rewrites the attribute\n    // without the Tooltip re-rendering.\n    const observer = new MutationObserver(update);\n    observer.observe(wrapper, {\n      subtree: true,\n      childList: true,\n      attributes: true,\n      attributeFilter: [attribute],\n    });\n    return () => observer.disconnect();\n  });\n}\n\n/**\n * Shows a short text label or description for its child on hover and keyboard focus.\n *\n * - The text is always present as a hidden `role=\"tooltip\"` element referenced by the child's\n *   `aria-describedby` (or `aria-labelledby` with `relationship=\"label\"`), so screen readers get\n *   it on focus without waiting for the delay; the child's own ids are kept.\n * - The visual surface is rendered in a portal only while visible (it is `aria-hidden`, a copy of\n *   the description), positioned on `side`/`align` with flipping and shifting to stay in view.\n * - It appears `openDelay` after the pointer rests on the child or the child takes keyboard focus,\n *   stays visible while the pointer moves onto it, hides `closeDelay` after the pointer leaves or\n *   immediately on blur, and Escape hides it without closing an enclosing dialog or popover. Focus\n *   and hover inside a popup the child renders in a portal (a DatePicker calendar, a listbox) do\n *   not show it, and the pointer moving onto such a popup hides it.\n * - The open state is uncontrolled by default (`defaultOpen`). With `open` and `onOpenChange`\n *   (Fluent's `visible` and `onVisibleChange`) the parent owns it: hover, focus, leave, blur and\n *   Escape then only ask for a change, and `open` alone shows the surface.\n * - `id` and `aria-*` props given to the Tooltip go to its child, merged with the child's own (the\n *   child's `id` wins, id lists are joined, `aria-expanded`/`aria-controls`/`aria-haspopup` from\n *   the Tooltip win). `className`, `style`, `ref`, `data-*` and event handlers stay on the wrapper\n *   `<span>`; the handlers see the child's events as they bubble, not events from portaled\n *   content such as the tooltip surface or a popup the child renders in a portal (a DatePicker\n *   calendar, a listbox). `onMouseEnter` and `onMouseLeave` are the exception: React fires them\n *   along the component tree, so they also fire when the pointer moves onto or off the tooltip\n *   surface or such a popup. So the Tooltip can sit inside a trigger, and the trigger's\n *   id and state reach the button: `<Menu.Trigger><Tooltip content=\"…\"><Button /></Tooltip>\n *   </Menu.Trigger>` (also `Popover.Trigger`, `Dialog.Trigger`, `Drawer.Trigger`). Around a\n *   trigger works too, since triggers pass `aria-describedby` on to their child.\n * - Wrap the focusable element itself. When the element that takes focus does not get the\n *   relationship (a Popover or Dialog root, a component that drops props, a non-focusable\n *   wrapper element), it is added to the first focusable element inside, with a development\n *   warning.\n *\n * @example\n * <Menu>\n *   <Menu.Trigger>\n *     <Tooltip content=\"Edit, duplicate or delete the item\">\n *       <Button>Actions</Button>\n *     </Tooltip>\n *   </Menu.Trigger>\n *   <Menu.Popover>…</Menu.Popover>\n * </Menu>\n */\nexport const Tooltip = ({\n  content,\n  appearance: appearanceProp,\n  variant,\n  openDelay: openDelayProp,\n  closeDelay = 100,\n  delay,\n  open: openProp,\n  defaultOpen,\n  onOpenChange,\n  relationship = 'description',\n  side = 'top',\n  align = 'center',\n  children,\n  className,\n  onMouseEnter,\n  onMouseLeave,\n  onFocus,\n  onBlur,\n  ref,\n  ...rest\n}: TooltipProps) => {\n  const appearance =\n    resolveDeprecatedProp(\n      'Tooltip',\n      appearanceProp,\n      variant === undefined ? undefined : VARIANT_APPEARANCE[variant],\n      'variant',\n      'appearance',\n    ) ?? 'inverted';\n  const openDelay =\n    resolveDeprecatedProp('Tooltip', openDelayProp, delay, 'delay', 'openDelay') ?? 200;\n  const [open, setOpen] = useControllable(openProp, defaultOpen ?? false, onOpenChange);\n  // The surface lives in a portal, which renders only in the browser: until then (the server HTML,\n  // hydration) the tooltip is closed; the hidden description is rendered either way.\n  const isClient = useIsClient();\n  const visible = open && isClient;\n  const timerRef = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n  const wrapperRef = React.useRef<HTMLSpanElement | null>(null);\n  const surfaceRef = React.useRef<HTMLSpanElement | null>(null);\n  const tooltipId = useId('tooltip');\n\n  // Destructured: react-hooks/refs treats an object whose member is passed to `ref` as a ref.\n  const { setReference, setFloating, floatingProps } = usePopupPosition({\n    open: visible,\n    side,\n    align,\n    offset: 8,\n  });\n  const wrapperElementRef = useMergedRefs<HTMLSpanElement>(ref, wrapperRef, setReference);\n  const surfaceElementRef = useMergedRefs<HTMLSpanElement>(surfaceRef, setFloating);\n\n  // Timer handlers are event callbacks (stable, latest state): they are composed with the\n  // consumer's handlers during render but only run from events and timers.\n  const clearTimer = useEventCallback(() => {\n    if (timerRef.current !== undefined) {\n      clearTimeout(timerRef.current);\n      timerRef.current = undefined;\n    }\n  });\n\n  // show, hide and scheduleHide ask for the new state; a controlled tooltip changes only when the\n  // parent updates `open`.\n  const show = useEventCallback(() => {\n    clearTimer();\n    if (visible) return;\n    if (openDelay <= 0) {\n      setOpen(true);\n      return;\n    }\n    timerRef.current = setTimeout(() => {\n      timerRef.current = undefined;\n      setOpen(true);\n    }, openDelay);\n  });\n\n  const hide = useEventCallback(() => {\n    clearTimer();\n    setOpen(false);\n  });\n\n  // The grace period after the pointer leaves lets it move onto the tooltip.\n  const scheduleHide = useEventCallback(() => {\n    clearTimer();\n    if (!visible) return;\n    timerRef.current = setTimeout(() => {\n      timerRef.current = undefined;\n      setOpen(false);\n    }, closeDelay);\n  });\n\n  // An Escape-only layer while visible: Escape hides the tooltip before any enclosing overlay. The\n  // wrapper is its anchor (its trigger, not its surface): Tab from the child inside a focus trap\n  // moves on from the popover, portal or dialog around the wrapper.\n  useDismiss({\n    open: visible,\n    onDismiss: hide,\n    refs: [wrapperRef, surfaceRef],\n    anchorRef: wrapperRef,\n    kind: 'tooltip',\n    outsidePress: false,\n  });\n\n  React.useEffect(() => {\n    const timer = timerRef;\n    return () => clearTimeout(timer.current);\n  }, []);\n\n  // The tooltip's own reactions ignore a popup the child renders in a portal: its focus and blur\n  // are not the child's, entering it does not show the tooltip, and the pointer moving onto it\n  // (no mouseleave reaches the wrapper then) hides the tooltip, which would cover it. The tooltip\n  // surface itself is portaled too but belongs to the tooltip: it stays hoverable.\n  const showOnEnter = useEventCallback((event: React.MouseEvent<HTMLSpanElement>) => {\n    if (isOwnEvent(event) || surfaceRef.current?.contains(event.target as Node)) show();\n  });\n  const hideOverPortaledPopup = useEventCallback((event: React.MouseEvent<HTMLSpanElement>) => {\n    if (!isOwnEvent(event) && !surfaceRef.current?.contains(event.target as Node)) hide();\n  });\n\n  const { childProps, wrapperProps } = splitProps(rest);\n  const target = unwrapFragment(children);\n  const childIsFallback = !isCloneableElement(target);\n  const attribute = relationship === 'label' ? 'aria-labelledby' : 'aria-describedby';\n  // Props given to the Tooltip come first, as if the child had them; then the tooltip's own id.\n  // The fallback span is a generic element: no state ARIA and no naming on it (the relationship\n  // then reaches its first focusable element through useRelationshipTarget).\n  const triggerProps: UnknownProps = childIsFallback\n    ? omit(childProps, [...STATE_ARIA, ...NAMING_ARIA])\n    : { ...childProps };\n  if (!childIsFallback || relationship === 'description') {\n    triggerProps[attribute] = joinIds(childProps[attribute] as string | undefined, tooltipId);\n  }\n  const child = renderTrigger(target, triggerProps, { componentName: 'Tooltip' });\n  useRelationshipTarget(wrapperRef, tooltipId, relationship, childIsFallback);\n\n  return (\n    <span\n      ref={wrapperElementRef}\n      {...wrapperProps}\n      className={cn('inline-block', className)}\n      onMouseEnter={composeEventHandlers(onMouseEnter, showOnEnter)}\n      onMouseLeave={composeEventHandlers(onMouseLeave, scheduleHide)}\n      onMouseOver={composeEventHandlers(\n        wrapperProps.onMouseOver as React.MouseEventHandler<HTMLSpanElement> | undefined,\n        hideOverPortaledPopup,\n      )}\n      onFocus={ownEventsOnly(composeEventHandlers(onFocus, show))}\n      onBlur={ownEventsOnly(composeEventHandlers(onBlur, hide))}\n    >\n      {child}\n      <span id={tooltipId} role=\"tooltip\" hidden>\n        {content}\n      </span>\n      {visible && (\n        <Portal layer=\"tooltip\">\n          <span\n            ref={surfaceElementRef}\n            aria-hidden=\"true\"\n            data-wave-tooltip-surface=\"\"\n            {...floatingProps}\n            className={cn(surfaceClasses, appearanceClasses[appearance])}\n          >\n            {content}\n          </span>\n        </Portal>\n      )}\n    </span>\n  );\n};\n\nTooltip.displayName = 'Tooltip';\n"],"mappings":"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"}

package/dist/components/portal/Portal.cjs

@@ -0,0 +1,2 @@
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../hooks/useMergedRefs.cjs"),r=require("../../hooks/useIsClient.cjs"),i=require("../provider/WaveProvider.cjs"),a=require("../../lib/layers.cjs"),o=require("../../hooks/useDirection.cjs"),s=require("../../hooks/useDismiss.cjs");let c=require("react");c=e.__toESM(c,1);let l=require("react/jsx-runtime"),u=require("react-dom");var d=c.createContext(0);d.displayName=`PortalDepthContext`;var f=({children:e,container:f,layer:p=`overlay`,layerId:m,disabled:h=!1,className:g,ref:_})=>{let v=r.useIsClient(),{themeClassName:y,portalContainer:b}=i.useWaveTheme(),x=o.useDirection(),S=c.useContext(d),C=c.useContext(s.DismissLayerContext),w=c.useCallback(e=>{if(e&&C!==null)return a.registerLayerElement(C,e)},[C]),T=n.useMergedRefs(_,w),E=m===void 0?e:(0,l.jsx)(s.DismissLayerProvider,{layerId:m,children:e});if(h)return(0,l.jsx)(l.Fragment,{children:E});if(!v)return null;let D=f??b??document.body;return(0,u.createPortal)((0,l.jsx)(`div`,{ref:T,className:t.cn(`wave-portal`,y,g),dir:x,"data-wave-portal":``,"data-layer":p,style:{position:`relative`,zIndex:`calc(${a.Z_INDEX[p]} + ${S})`},children:(0,l.jsx)(d.Provider,{value:S+1,children:E})}),D)};f.displayName=`Portal`,exports.Portal=f,exports.PortalDepthContext=d;
+//# sourceMappingURL=Portal.cjs.map

package/dist/components/portal/Portal.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Portal.cjs","names":["React","useIsClient","useWaveTheme","useDirection","DismissLayerContext","registerLayerElement","useMergedRefs","DismissLayerProvider","_Fragment","createPortal","cn","Z_INDEX","require_runtime","require_cn","require_useMergedRefs","require_useIsClient","require_WaveProvider","require_layers","require_useDirection","require_useDismiss","react","react_jsx_runtime","react_dom","PortalDepthContext","Portal","isClient","dir","depth","parentLayerId","registerWithParent","el","wrapperRef","ref","content","layerId","children","disabled","target","container","portalContainer","themeClassName","className","layer"],"sources":["../../../src/components/portal/Portal.tsx"],"sourcesContent":["import * as React from 'react';\nimport { createPortal } from 'react-dom';\nimport { cn } from '../../lib/cn';\nimport { Z_INDEX, registerLayerElement } from '../../lib/layers';\nimport { useIsClient } from '../../hooks/useIsClient';\nimport { useDirection } from '../../hooks/useDirection';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { DismissLayerContext, DismissLayerProvider } from '../../hooks/useDismiss';\nimport { useWaveTheme } from '../provider/WaveProvider';\n\n/** Props accepted by {@link Portal}. */\nexport interface PortalProps {\n  /** Content rendered into the portal. */\n  children: React.ReactNode;\n  /** Element to render into. @default WaveProvider `portalContainer`, else `document.body` */\n  container?: HTMLElement | null;\n  /**\n   * Stacking layer: `--wave-z-overlay` (dialogs, popovers, menus, listboxes), `--wave-z-toast`\n   * (above overlays) or `--wave-z-tooltip`. The portal's nesting depth is added.\n   * @default 'overlay'\n   */\n  layer?: 'overlay' | 'toast' | 'tooltip';\n  /**\n   * The dismiss layer of the content (from `useDismiss`). Provided to the children through\n   * `DismissLayerProvider`, so layers opened inside become its descendants.\n   */\n  layerId?: string;\n  /** Render the children inline instead (no portal, no wrapper). @default false */\n  disabled?: boolean;\n  /** Extra classes for the portal wrapper. */\n  className?: string;\n  /** Ref to the portal wrapper `<div>`. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/**\n * Nesting depth of portals: `0` outside any portal; each `Portal` provides `depth + 1` to its\n * children. Portals add it to their z-index so a surface opened from inside another overlay always\n * stacks above it — also when both mount in the same commit.\n */\nexport const PortalDepthContext = React.createContext(0);\nPortalDepthContext.displayName = 'PortalDepthContext';\n\n/**\n * Renders its children into `document.body` (or the WaveProvider `portalContainer`), wrapped in a\n * `<div class=\"wave-portal …\">` that carries the provider's theme classes, direction and font, so\n * portaled overlays look like the rest of the themed tree. The wrapper paints no background.\n *\n * - **Client only, first commit**: nothing is rendered on the server or during hydration (no\n *   mismatch); in every other client render the portal exists in the first commit, so layout\n *   effects and ref callbacks of the content see connected elements.\n * - **Stacking**: `z-index: calc(<layer variable> + depth)`, where depth is the number of portals\n *   it is rendered in, so a surface opened from inside another overlay always stacks above it,\n *   also when both mount in the same commit.\n * - **Layers**: the wrapper is registered with the enclosing dismiss layer (the parent), so presses\n *   and focus inside the portal count as inside that layer; `layerId` is provided only to the\n *   children.\n *\n * Content that must exist on the server or before an overlay opens (tooltip descriptions, closed\n * listboxes) is rendered inline instead.\n */\nexport const Portal = ({\n  children,\n  container,\n  layer = 'overlay',\n  layerId,\n  disabled = false,\n  className,\n  ref,\n}: PortalProps) => {\n  const isClient = useIsClient();\n  const { themeClassName, portalContainer } = useWaveTheme();\n  const dir = useDirection();\n  const depth = React.useContext(PortalDepthContext);\n  const parentLayerId = React.useContext(DismissLayerContext);\n\n  const registerWithParent = React.useCallback(\n    (el: HTMLDivElement | null) => {\n      if (!el || parentLayerId === null) return;\n      return registerLayerElement(parentLayerId, el);\n    },\n    [parentLayerId],\n  );\n  const wrapperRef = useMergedRefs<HTMLDivElement>(ref, registerWithParent);\n\n  const content =\n    layerId === undefined ? (\n      children\n    ) : (\n      <DismissLayerProvider layerId={layerId}>{children}</DismissLayerProvider>\n    );\n\n  if (disabled) return <>{content}</>;\n  if (!isClient) return null;\n\n  const target = container ?? portalContainer ?? document.body;\n\n  return createPortal(\n    <div\n      ref={wrapperRef}\n      className={cn('wave-portal', themeClassName, className)}\n      dir={dir}\n      data-wave-portal=\"\"\n      data-layer={layer}\n      style={{ position: 'relative', zIndex: `calc(${Z_INDEX[layer]} + ${depth})` }}\n    >\n      <PortalDepthContext.Provider value={depth + 1}>{content}</PortalDepthContext.Provider>\n    </div>,\n    target,\n  );\n};\n\nPortal.displayName = 'Portal';\n"],"mappings":"ubAwCA,IAAauB,EAAqBvB,EAAM,cAAc,CAAC,EACvD,EAAmB,YAAc,qBAoBjC,IAAawB,GAAU,CACrB,WACA,YACA,QAAQ,UACR,UACA,WAAW,GACX,YACA,SACiB,CACjB,IAAMC,EAAWxB,EAAAA,YAAY,EACvB,CAAE,iBAAgB,mBAAoBC,EAAAA,aAAa,EACnDwB,EAAMvB,EAAAA,aAAa,EACnBwB,EAAQ3B,EAAM,WAAWuB,CAAkB,EAC3CK,EAAgB5B,EAAM,WAAWI,EAAAA,mBAAmB,EAEpDyB,EAAqB7B,EAAM,YAC9B,GAA8B,CAC7B,GAAK8B,GAAMF,IAAkB,KAC7B,OAAOvB,EAAAA,qBAAqBuB,EAAeE,CAAE,CAC/C,EACA,CAACF,CAAa,CAChB,EACMG,EAAazB,EAAAA,cAA8B0B,EAAKH,CAAkB,EAElEI,EACJC,IAAY,IAAA,GACVC,GAEA,EAAAd,EAAA,IAAA,CAACd,EAAAA,qBAAD,CAA+B,UAAU,UAA+B,CAAA,EAG5E,GAAI6B,EAAU,OAAO,EAAAf,EAAA,IAAA,CAAAb,EAAAA,SAAA,CAAA,SAAGyB,CAAU,CAAA,EAClC,GAAI,CAACR,EAAU,OAAO,KAEtB,IAAMY,EAASC,GAAaC,GAAmB,SAAS,KAExD,OAAA,EAAO9B,EAAAA,aAAAA,EACL,EAAAY,EAAA,IAAA,CAAC,MAAD,CACE,IAAKU,EACL,UAAWrB,EAAAA,GAAG,cAAe8B,EAAgBC,CAAS,EACjD,MACL,mBAAiB,GACjB,aAAYC,EACZ,MAAO,CAAE,SAAU,WAAY,OAAQ,QAAQ/B,EAAAA,QAAQ+B,GAAO,KAAKf,EAAM,EAAG,EAE5E,UAAA,EAAAN,EAAA,IAAA,CAACE,EAAmB,SAApB,CAA6B,MAAOI,EAAQ,EAAI,SAAAM,CAAqC,CAAA,CAClF,CAAA,EACLI,CACF,CACF,EAEA,EAAO,YAAc"}

package/dist/components/portal/Portal.mjs

@@ -0,0 +1,45 @@
+"use client";
+import { cn as e } from "../../lib/cn.mjs";
+import { useMergedRefs as t } from "../../hooks/useMergedRefs.mjs";
+import { useIsClient as n } from "../../hooks/useIsClient.mjs";
+import { useWaveTheme as r } from "../provider/WaveProvider.mjs";
+import { Z_INDEX as i, registerLayerElement as a } from "../../lib/layers.mjs";
+import { useDirection as o } from "../../hooks/useDirection.mjs";
+import { DismissLayerContext as s, DismissLayerProvider as c } from "../../hooks/useDismiss.mjs";
+import * as l from "react";
+import { Fragment as u, jsx as d } from "react/jsx-runtime";
+import { createPortal as f } from "react-dom";
+//#region src/components/portal/Portal.tsx
+var p = l.createContext(0);
+p.displayName = "PortalDepthContext";
+var m = ({ children: m, container: h, layer: g = "overlay", layerId: _, disabled: v = !1, className: y, ref: b }) => {
+	let x = n(), { themeClassName: S, portalContainer: C } = r(), w = o(), T = l.useContext(p), E = l.useContext(s), D = l.useCallback((e) => {
+		if (e && E !== null) return a(E, e);
+	}, [E]), O = t(b, D), k = _ === void 0 ? m : /* @__PURE__ */ d(c, {
+		layerId: _,
+		children: m
+	});
+	if (v) return /* @__PURE__ */ d(u, { children: k });
+	if (!x) return null;
+	let A = h ?? C ?? document.body;
+	return f(/* @__PURE__ */ d("div", {
+		ref: O,
+		className: e("wave-portal", S, y),
+		dir: w,
+		"data-wave-portal": "",
+		"data-layer": g,
+		style: {
+			position: "relative",
+			zIndex: `calc(${i[g]} + ${T})`
+		},
+		children: /* @__PURE__ */ d(p.Provider, {
+			value: T + 1,
+			children: k
+		})
+	}), A);
+};
+m.displayName = "Portal";
+//#endregion
+export { m as Portal, p as PortalDepthContext };
+
+//# sourceMappingURL=Portal.mjs.map