@ariakit/react-components 0.1.0

package/dist/hovercard/hovercard-heading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hovercard-heading.js","names":[],"sources":["../../src/hovercard/hovercard-heading.tsx"],"sourcesContent":["import { createElement, createHook, forwardRef } from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport type { ElementType } from \"react\";\nimport type { PopoverHeadingOptions } from \"../popover/popover-heading.tsx\";\nimport { usePopoverHeading } from \"../popover/popover-heading.tsx\";\nimport type { HovercardStore } from \"./hovercard-store.ts\";\n\nconst TagName = \"h1\" satisfies ElementType;\ntype TagName = typeof TagName;\n\n/**\n * Returns props to create a `HovercardHeading` component. This hook must be\n * used in a component that's wrapped with `Hovercard` so the `aria-labelledby`\n * prop is properly set on the hovercard element.\n * @see https://ariakit.com/components/hovercard\n * @example\n * ```jsx\n * // This component must be wrapped with Hovercard\n * const props = useHovercardHeading();\n * <Role {...props}>Heading</Role>\n * ```\n */\nexport const useHovercardHeading = createHook<TagName, HovercardHeadingOptions>(\n  function useHovercardHeading(props) {\n    props = usePopoverHeading(props);\n    return props;\n  },\n);\n\n/**\n * Renders a heading in a hovercard. This component must be wrapped within\n * [`Hovercard`](https://ariakit.com/reference/hovercard) so the\n * `aria-labelledby` prop is properly set on the content element.\n * @see https://ariakit.com/components/hovercard\n * @example\n * ```jsx {3}\n * <HovercardProvider>\n *   <Hovercard>\n *     <HovercardHeading>Heading</HovercardHeading>\n *   </Hovercard>\n * </HovercardProvider>\n * ```\n */\nexport const HovercardHeading = forwardRef(function HovercardHeading(\n  props: HovercardHeadingProps,\n) {\n  const htmlProps = useHovercardHeading(props);\n  return createElement(TagName, htmlProps);\n});\n\nexport interface HovercardHeadingOptions<\n  T extends ElementType = TagName,\n> extends PopoverHeadingOptions<T> {\n  /**\n   * Object returned by the\n   * [`useHovercardStore`](https://ariakit.com/reference/use-hovercard-store)\n   * hook. If not provided, the closest\n   * [`Hovercard`](https://ariakit.com/reference/hovercard) or\n   * [`HovercardProvider`](https://ariakit.com/reference/hovercard-provider)\n   * components' context will be used.\n   */\n  store?: HovercardStore;\n}\n\nexport type HovercardHeadingProps<T extends ElementType = TagName> = Props<\n  T,\n  HovercardHeadingOptions<T>\n>;\n"],"mappings":";;;;;;;;;;;;;;;;;MAwBI,sBAA0B,WAAK,SAAA,oBAAA,OAAA;CAC/B,QAAO,kBAAA,KAAA;CAEX,OAAA;;;;;;;;;;;;;;;;MAoBE,mBAAqB,WADH,SAAA,iBACqB,OAAA;CACxC,OAAA,cAAA,SAAA,oBAAA,KAAA,CAAA"}

package/dist/hovercard/hovercard-provider.d.ts

@@ -0,0 +1,23 @@
+import { i as HovercardStoreProps } from "../hovercard-store-gIeoQEn_.js";
+import { ReactNode } from "react";
+
+//#region src/hovercard/hovercard-provider.d.ts
+/**
+ * Provides a hovercard store to
+ * [Hovercard](https://ariakit.com/components/hovercard) components.
+ * @see https://ariakit.com/components/hovercard
+ * @example
+ * ```jsx
+ * <HovercardProvider timeout={250}>
+ *   <HovercardAnchor />
+ *   <Hovercard />
+ * </HovercardProvider>
+ * ```
+ */
+declare function HovercardProvider(props?: HovercardProviderProps): import("react/jsx-runtime").JSX.Element;
+interface HovercardProviderProps extends HovercardStoreProps {
+  children?: ReactNode;
+}
+//#endregion
+export { HovercardProvider, HovercardProviderProps };
+//# sourceMappingURL=hovercard-provider.d.ts.map

package/dist/hovercard/hovercard-provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hovercard-provider.d.ts","names":["ReactNode","HovercardStoreProps","HovercardProvider","HovercardProviderProps","props","JSX","Element","children"],"sources":["../../src/hovercard/hovercard-provider.d.ts"],"mappings":";;;;;;AAcA;;;;;;;;;AAAkH;iBAA1FE,iBAAAA,CAAkBE,KAAAA,GAAQD,sBAAsB,+BAA+BE,GAAAA,CAAIC,OAAAA;AAAAA,UAC1FH,sBAAAA,SAA+BF,mBAAmB;EAC/DM,QAAAA,GAAWP,SAAAA;AAAAA"}

package/dist/hovercard/hovercard-provider.js

@@ -0,0 +1,27 @@
+"use client";
+import { HovercardContextProvider } from "./hovercard-context.js";
+import { useHovercardStore } from "./hovercard-store.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/hovercard/hovercard-provider.tsx
+/**
+* Provides a hovercard store to
+* [Hovercard](https://ariakit.com/components/hovercard) components.
+* @see https://ariakit.com/components/hovercard
+* @example
+* ```jsx
+* <HovercardProvider timeout={250}>
+*   <HovercardAnchor />
+*   <Hovercard />
+* </HovercardProvider>
+* ```
+*/
+function HovercardProvider(props = {}) {
+	return /* @__PURE__ */ jsx(HovercardContextProvider, {
+		value: useHovercardStore(props),
+		children: props.children
+	});
+}
+//#endregion
+export { HovercardProvider };
+
+//# sourceMappingURL=hovercard-provider.js.map

package/dist/hovercard/hovercard-provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hovercard-provider.js","names":[],"sources":["../../src/hovercard/hovercard-provider.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { HovercardContextProvider } from \"./hovercard-context.tsx\";\nimport type { HovercardStoreProps } from \"./hovercard-store.ts\";\nimport { useHovercardStore } from \"./hovercard-store.ts\";\n\n/**\n * Provides a hovercard store to\n * [Hovercard](https://ariakit.com/components/hovercard) components.\n * @see https://ariakit.com/components/hovercard\n * @example\n * ```jsx\n * <HovercardProvider timeout={250}>\n *   <HovercardAnchor />\n *   <Hovercard />\n * </HovercardProvider>\n * ```\n */\nexport function HovercardProvider(props: HovercardProviderProps = {}) {\n  const store = useHovercardStore(props);\n  return (\n    <HovercardContextProvider value={store}>\n      {props.children}\n    </HovercardContextProvider>\n  );\n}\n\nexport interface HovercardProviderProps extends HovercardStoreProps {\n  children?: ReactNode;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;SAoBI,kBAAA,QAAC,CAAA,GAAA;QAFW,oBAAkB,0BAEO;2BAC5B,KAAA;EACiB,UAAA,MAAA;CAE9B,CAAA"}

package/dist/hovercard/hovercard-store.d.ts

@@ -0,0 +1,2 @@
+import { a as HovercardStoreState, i as HovercardStoreProps, n as HovercardStoreFunctions, o as useHovercardStore, r as HovercardStoreOptions, s as useHovercardStoreProps, t as HovercardStore } from "../hovercard-store-gIeoQEn_.js";
+export { HovercardStore, HovercardStoreFunctions, HovercardStoreOptions, HovercardStoreProps, HovercardStoreState, useHovercardStore, useHovercardStoreProps };

package/dist/hovercard/hovercard-store.js

@@ -0,0 +1,31 @@
+"use client";
+import { usePopoverStoreProps } from "../popover/popover-store.js";
+import { useStore, useStoreProps } from "@ariakit/react-store";
+import * as Core from "@ariakit/components/hovercard/hovercard-store";
+//#region src/hovercard/hovercard-store.ts
+function useHovercardStoreProps(store, update, props) {
+	useStoreProps(store, props, "timeout");
+	useStoreProps(store, props, "showTimeout");
+	useStoreProps(store, props, "hideTimeout");
+	return usePopoverStoreProps(store, update, props);
+}
+/**
+* Creates a hovercard store to control the state of
+* [Hovercard](https://ariakit.com/reference/hovercard) components.
+* @see https://ariakit.com/components/hovercard
+* @example
+* ```jsx
+* const hovercard = useHovercardStore({ placement: "top" });
+*
+* <HovercardAnchor store={hovercard}>@username</HovercardAnchor>
+* <Hovercard store={hovercard}>Details</Hovercard>
+* ```
+*/
+function useHovercardStore(props = {}) {
+	const [store, update] = useStore(Core.createHovercardStore, props);
+	return useHovercardStoreProps(store, update, props);
+}
+//#endregion
+export { useHovercardStore, useHovercardStoreProps };
+
+//# sourceMappingURL=hovercard-store.js.map

package/dist/hovercard/hovercard-store.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hovercard-store.js","names":[],"sources":["../../src/hovercard/hovercard-store.ts"],"sourcesContent":["import * as Core from \"@ariakit/components/hovercard/hovercard-store\";\nimport { useStore, useStoreProps } from \"@ariakit/react-store\";\nimport type { Store } from \"@ariakit/react-store\";\nimport type {\n  PopoverStoreFunctions,\n  PopoverStoreOptions,\n  PopoverStoreState,\n} from \"../popover/popover-store.ts\";\nimport { usePopoverStoreProps } from \"../popover/popover-store.ts\";\n\nexport function useHovercardStoreProps<T extends Core.HovercardStore>(\n  store: T,\n  update: () => void,\n  props: HovercardStoreProps,\n) {\n  useStoreProps(store, props, \"timeout\");\n  useStoreProps(store, props, \"showTimeout\");\n  useStoreProps(store, props, \"hideTimeout\");\n  return usePopoverStoreProps(store, update, props);\n}\n\n/**\n * Creates a hovercard store to control the state of\n * [Hovercard](https://ariakit.com/reference/hovercard) components.\n * @see https://ariakit.com/components/hovercard\n * @example\n * ```jsx\n * const hovercard = useHovercardStore({ placement: \"top\" });\n *\n * <HovercardAnchor store={hovercard}>@username</HovercardAnchor>\n * <Hovercard store={hovercard}>Details</Hovercard>\n * ```\n */\nexport function useHovercardStore(\n  props: HovercardStoreProps = {},\n): HovercardStore {\n  const [store, update] = useStore(Core.createHovercardStore, props);\n  return useHovercardStoreProps(store, update, props);\n}\n\nexport interface HovercardStoreState\n  extends Core.HovercardStoreState, PopoverStoreState {}\n\nexport interface HovercardStoreFunctions\n  extends\n    Omit<Core.HovercardStoreFunctions, \"disclosure\">,\n    PopoverStoreFunctions {}\n\nexport interface HovercardStoreOptions\n  extends Omit<Core.HovercardStoreOptions, \"disclosure\">, PopoverStoreOptions {}\n\nexport interface HovercardStoreProps\n  extends HovercardStoreOptions, Omit<Core.HovercardStoreProps, \"disclosure\"> {}\n\nexport interface HovercardStore\n  extends\n    HovercardStoreFunctions,\n    Omit<Store<Core.HovercardStore>, \"disclosure\"> {}\n"],"mappings":";;;;;SAeE,uBAA4B,OAAS,QAAA,OAAA;CACrC,cAAc,OAAO,OAAO,SAAA;CAC5B,cAAc,OAAO,OAAO,aAAa;CACzC,cAAO,OAAA,OAAqB,aAAO;CACrC,OAAA,qBAAA,OAAA,QAAA,KAAA;;;;;;;;;;;;;;SAiBS,kBAAiB,QAAS,CAAA,GAAK;CACtC,MAAA,CAAO,OAAA,UAAA,SAAuB,KAAO,sBAAa,KAAA;CACpD,OAAA,uBAAA,OAAA,QAAA,KAAA"}

package/dist/hovercard/hovercard.d.ts

@@ -0,0 +1,80 @@
+import { n as PopoverOptions } from "../popover-CCqiRKqg.js";
+import { t as HovercardStore } from "../hovercard-store-gIeoQEn_.js";
+import { Props } from "@ariakit/react-utils";
+import { ElementType } from "react";
+import { BooleanOrCallback } from "@ariakit/utils";
+
+//#region src/hovercard/hovercard.d.ts
+declare const TagName = "div";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `Hovercard` component.
+ * @see https://ariakit.com/components/hovercard
+ * @example
+ * ```jsx
+ * const store = useHovercardStore();
+ * const props = useHovercard({ store });
+ * <HovercardAnchor store={store}>@username</HovercardAnchor>
+ * <Role {...props}>Details</Role>
+ * ```
+ */
+declare const useHovercard: import("@ariakit/react-utils").Hook<"div", HovercardOptions<"div">>;
+/**
+ * Renders a hovercard element, which is a popover that's usually made visible
+ * by hovering the mouse cursor over a
+ * [`HovercardAnchor`](https://ariakit.com/reference/hovercard-anchor).
+ * @see https://ariakit.com/components/hovercard
+ * @example
+ * ```jsx {3}
+ * <HovercardProvider>
+ *   <HovercardAnchor>@username</HovercardAnchor>
+ *   <Hovercard>Details</Hovercard>
+ * </HovercardProvider>
+ * ```
+ */
+declare const Hovercard: (props: HovercardProps<"div">) => import("react/jsx-runtime").JSX.Element | null;
+interface HovercardOptions<T extends ElementType = TagName> extends PopoverOptions<T> {
+  /**
+   * Object returned by the
+   * [`useHovercardStore`](https://ariakit.com/reference/use-hovercard-store)
+   * hook. If not provided, the closest
+   * [`HovercardProvider`](https://ariakit.com/reference/hovercard-provider)
+   * component's context will be used.
+   */
+  store?: HovercardStore;
+  /**
+   * Determines whether the popover should hide when the mouse leaves the
+   * popover or the anchor element and there's no _hover intent_, meaning, the
+   * mouse isn't moving toward the popover.
+   *
+   * This can be either a boolean or a callback receiving the mouse move event
+   * that initiated the behavior. The callback should return a boolean.
+   *
+   * **Note**: This behavior won't be triggered when the popover or any of its
+   * descendants are in focus.
+   * @default true
+   */
+  hideOnHoverOutside?: BooleanOrCallback<MouseEvent>;
+  /**
+   * Determines if the pointer events outside of the popover and its anchor
+   * element should be disabled during _hover intent_, that is, when the mouse
+   * is moving toward the popover.
+   *
+   * This is required as these external events may trigger focus on other
+   * elements and close the popover while the user is attempting to hover over
+   * it.
+   *
+   * This can be either a boolean or a callback receiving the mouse event
+   * happening during hover intent. The callback should return a boolean.
+   * @default true
+   */
+  disablePointerEventsOnApproach?: BooleanOrCallback<MouseEvent>;
+  /**
+   * @default false
+   */
+  modal?: PopoverOptions<T>["modal"];
+}
+type HovercardProps<T extends ElementType = TagName> = Props<T, HovercardOptions<T>>;
+//#endregion
+export { Hovercard, HovercardOptions, HovercardProps, useHovercard };
+//# sourceMappingURL=hovercard.d.ts.map

package/dist/hovercard/hovercard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hovercard.d.ts","names":["Props","BooleanOrCallback","ElementType","PopoverOptions","HovercardStore","TagName","useHovercard","HovercardOptions","Hook","Hovercard","HovercardProps","props","JSX","Element","T","MouseEvent","store","hideOnHoverOutside","disablePointerEventsOnApproach","modal"],"sources":["../../src/hovercard/hovercard.d.ts"],"mappings":";;;;;;;cAKcK,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAF8B;;;;AACtC;AAAA;;;;AACQ;AAY7B;AAd2D,cActCC,YAAAA,iCAA6CE,IAAAA,QAAYD,gBAAgB;;;AAAA;AAc9F;;;;;;;;;AAAyG;cAApFE,SAAAA,GAAYE,KAAAA,EAAOD,cAAc,wCAAwCE,GAAAA,CAAIC,OAAAA;AAAAA,UACjFN,gBAAAA,WAA2BL,WAAAA,GAAcG,OAAAA,UAAiBF,cAAAA,CAAeW,CAAAA;EAAzDA;;;;;;;EAQ7BE,KAAAA,GAAQZ,cAAAA;EA2ByBH;;;;;;;;;;;;EAdjCgB,kBAAAA,GAAqBhB,iBAAAA,CAAkBc,UAAAA;EAAvCE;;;;;;;;;;AAkBwB;AAE5B;;EANIC,8BAAAA,GAAiCjB,iBAAAA,CAAkBc,UAAAA;EAMlBb;;;EAFjCiB,KAAAA,GAAQhB,cAAAA,CAAeW,CAAAA;AAAAA;AAAAA,KAEfJ,cAAAA,WAAyBR,WAAAA,GAAcG,OAAAA,IAAWL,KAAAA,CAAMc,CAAAA,EAAGP,gBAAAA,CAAiBO,CAAAA"}

package/dist/hovercard/hovercard.js

@@ -0,0 +1,240 @@
+"use client";
+import { createDialogComponent } from "../dialog/dialog.js";
+import { usePopover } from "../popover/popover.js";
+import { HovercardScopedContextProvider, useHovercardProviderContext } from "./hovercard-context.js";
+import { getElementPolygon, getEventPoint, isPointInPolygon } from "./utils/polygon.js";
+import { createElement, createHook, forwardRef, useBooleanEvent, useEvent, useIsMouseMoving, useLiveRef, useMergeRefs, usePortalRef, useSafeLayoutEffect, useWrapElement } from "@ariakit/react-utils";
+import { addGlobalEventListener, chain, contains, hasFocusWithin, invariant, isFalsyBooleanCallback } from "@ariakit/utils";
+import { createContext, useCallback, useContext, useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useStoreState } from "@ariakit/react-store";
+import { sync } from "@ariakit/store";
+//#region src/hovercard/hovercard.tsx
+const TagName = "div";
+function isMovingOnHovercard(target, card, anchor, nested) {
+	if (hasFocusWithin(card)) return true;
+	if (!target) return false;
+	if (contains(card, target)) return true;
+	if (anchor && contains(anchor, target)) return true;
+	if (nested?.some((card) => isMovingOnHovercard(target, card, anchor))) return true;
+	return false;
+}
+function useAutoFocusOnHide({ store, ...props }) {
+	const [autoFocusOnHide, setAutoFocusOnHide] = useState(false);
+	const mounted = useStoreState(store, "mounted");
+	useEffect(() => {
+		if (!mounted) setAutoFocusOnHide(false);
+	}, [mounted]);
+	const onFocusProp = props.onFocus;
+	const onFocus = useEvent((event) => {
+		onFocusProp?.(event);
+		if (event.defaultPrevented) return;
+		setAutoFocusOnHide(true);
+	});
+	const finalFocusRef = useRef(null);
+	useEffect(() => {
+		return sync(store, ["anchorElement"], (state) => {
+			finalFocusRef.current = state.anchorElement;
+		});
+	}, [store]);
+	props = {
+		autoFocusOnHide,
+		finalFocus: finalFocusRef,
+		...props,
+		onFocus
+	};
+	return props;
+}
+const NestedHovercardContext = createContext(null);
+/**
+* Returns props to create a `Hovercard` component.
+* @see https://ariakit.com/components/hovercard
+* @example
+* ```jsx
+* const store = useHovercardStore();
+* const props = useHovercard({ store });
+* <HovercardAnchor store={store}>@username</HovercardAnchor>
+* <Role {...props}>Details</Role>
+* ```
+*/
+const useHovercard = createHook(function useHovercard({ store, modal = false, portal = modal, hideOnEscape = true, hideOnHoverOutside = true, disablePointerEventsOnApproach = !!hideOnHoverOutside, ...props }) {
+	const context = useHovercardProviderContext();
+	store = store || context;
+	invariant(store, "Hovercard must receive a `store` prop or be wrapped in a HovercardProvider component.");
+	const ref = useRef(null);
+	const [nestedHovercards, setNestedHovercards] = useState([]);
+	const hideTimeoutRef = useRef(0);
+	const enterPointRef = useRef(null);
+	const { portalRef, domReady } = usePortalRef(portal, props.portalRef);
+	const isMouseMoving = useIsMouseMoving();
+	const mayHideOnHoverOutside = !!hideOnHoverOutside;
+	const hideOnHoverOutsideProp = useBooleanEvent(hideOnHoverOutside);
+	const mayDisablePointerEvents = !!disablePointerEventsOnApproach;
+	const disablePointerEventsProp = useBooleanEvent(disablePointerEventsOnApproach);
+	const open = useStoreState(store, "open");
+	const mounted = useStoreState(store, "mounted");
+	useEffect(() => {
+		if (!domReady) return;
+		if (!mounted) return;
+		if (!mayHideOnHoverOutside && !mayDisablePointerEvents) return;
+		const element = ref.current;
+		if (!element) return;
+		const onMouseMove = (event) => {
+			if (!store) return;
+			if (!isMouseMoving()) return;
+			const { anchorElement, hideTimeout, timeout } = store.getState();
+			const enterPoint = enterPointRef.current;
+			const [target] = event.composedPath();
+			const anchor = anchorElement;
+			if (isMovingOnHovercard(target, element, anchor, nestedHovercards)) {
+				enterPointRef.current = target && anchor && contains(anchor, target) ? getEventPoint(event) : null;
+				window.clearTimeout(hideTimeoutRef.current);
+				hideTimeoutRef.current = 0;
+				return;
+			}
+			if (hideTimeoutRef.current) return;
+			if (enterPoint) {
+				const currentPoint = getEventPoint(event);
+				if (isPointInPolygon(currentPoint, getElementPolygon(element, enterPoint))) {
+					enterPointRef.current = currentPoint;
+					if (!disablePointerEventsProp(event)) return;
+					event.preventDefault();
+					event.stopPropagation();
+					return;
+				}
+			}
+			if (!hideOnHoverOutsideProp(event)) return;
+			hideTimeoutRef.current = window.setTimeout(() => {
+				hideTimeoutRef.current = 0;
+				store?.hide();
+			}, hideTimeout ?? timeout);
+		};
+		return chain(addGlobalEventListener("mousemove", onMouseMove, true), () => clearTimeout(hideTimeoutRef.current));
+	}, [
+		store,
+		isMouseMoving,
+		domReady,
+		mounted,
+		mayHideOnHoverOutside,
+		mayDisablePointerEvents,
+		nestedHovercards,
+		disablePointerEventsProp,
+		hideOnHoverOutsideProp
+	]);
+	useEffect(() => {
+		if (!domReady) return;
+		if (!mounted) return;
+		if (!mayDisablePointerEvents) return;
+		const disableEvent = (event) => {
+			const element = ref.current;
+			if (!element) return;
+			const enterPoint = enterPointRef.current;
+			if (!enterPoint) return;
+			const polygon = getElementPolygon(element, enterPoint);
+			if (isPointInPolygon(getEventPoint(event), polygon)) {
+				if (!disablePointerEventsProp(event)) return;
+				event.preventDefault();
+				event.stopPropagation();
+			}
+		};
+		return chain(addGlobalEventListener("mouseenter", disableEvent, true), addGlobalEventListener("mouseover", disableEvent, true), addGlobalEventListener("mouseout", disableEvent, true), addGlobalEventListener("mouseleave", disableEvent, true));
+	}, [
+		domReady,
+		mounted,
+		mayDisablePointerEvents,
+		disablePointerEventsProp
+	]);
+	useEffect(() => {
+		if (!domReady) return;
+		if (open) return;
+		store?.setAutoFocusOnShow(false);
+	}, [
+		store,
+		domReady,
+		open
+	]);
+	const openRef = useLiveRef(open);
+	useEffect(() => {
+		if (!domReady) return;
+		return () => {
+			if (!openRef.current) store?.setAutoFocusOnShow(false);
+		};
+	}, [store, domReady]);
+	const registerOnParent = useContext(NestedHovercardContext);
+	useSafeLayoutEffect(() => {
+		if (modal) return;
+		if (!portal) return;
+		if (!mounted) return;
+		if (!domReady) return;
+		const element = ref.current;
+		if (!element) return;
+		return registerOnParent?.(element);
+	}, [
+		modal,
+		portal,
+		mounted,
+		domReady
+	]);
+	const registerNestedHovercard = useCallback((element) => {
+		setNestedHovercards((prevElements) => [...prevElements, element]);
+		const parentUnregister = registerOnParent?.(element);
+		return () => {
+			setNestedHovercards((prevElements) => prevElements.filter((item) => item !== element));
+			parentUnregister?.();
+		};
+	}, [registerOnParent]);
+	props = useWrapElement(props, (element) => /* @__PURE__ */ jsx(HovercardScopedContextProvider, {
+		value: store,
+		children: /* @__PURE__ */ jsx(NestedHovercardContext.Provider, {
+			value: registerNestedHovercard,
+			children: element
+		})
+	}), [store, registerNestedHovercard]);
+	props = {
+		...props,
+		ref: useMergeRefs(ref, props.ref)
+	};
+	props = useAutoFocusOnHide({
+		store,
+		...props
+	});
+	const autoFocusOnShow = useStoreState(store, (state) => modal || state.autoFocusOnShow);
+	props = usePopover({
+		store,
+		modal,
+		portal,
+		autoFocusOnShow,
+		...props,
+		portalRef,
+		hideOnEscape(event) {
+			if (isFalsyBooleanCallback(hideOnEscape, event)) return false;
+			requestAnimationFrame(() => {
+				requestAnimationFrame(() => {
+					store?.hide();
+				});
+			});
+			return true;
+		}
+	});
+	return props;
+});
+/**
+* Renders a hovercard element, which is a popover that's usually made visible
+* by hovering the mouse cursor over a
+* [`HovercardAnchor`](https://ariakit.com/reference/hovercard-anchor).
+* @see https://ariakit.com/components/hovercard
+* @example
+* ```jsx {3}
+* <HovercardProvider>
+*   <HovercardAnchor>@username</HovercardAnchor>
+*   <Hovercard>Details</Hovercard>
+* </HovercardProvider>
+* ```
+*/
+const Hovercard = createDialogComponent(forwardRef(function Hovercard(props) {
+	return createElement(TagName, useHovercard(props));
+}), useHovercardProviderContext);
+//#endregion
+export { Hovercard, useHovercard };
+
+//# sourceMappingURL=hovercard.js.map

package/dist/hovercard/hovercard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hovercard.js","names":[],"sources":["../../src/hovercard/hovercard.tsx"],"sourcesContent":["import { useStoreState } from \"@ariakit/react-store\";\nimport {\n  useBooleanEvent,\n  useEvent,\n  useIsMouseMoving,\n  useLiveRef,\n  useMergeRefs,\n  usePortalRef,\n  useSafeLayoutEffect,\n  useWrapElement,\n  createElement,\n  createHook,\n  forwardRef,\n} from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport { sync } from \"@ariakit/store\";\nimport {\n  contains,\n  addGlobalEventListener,\n  hasFocusWithin,\n  chain,\n  invariant,\n  isFalsyBooleanCallback,\n} from \"@ariakit/utils\";\nimport type { BooleanOrCallback } from \"@ariakit/utils\";\nimport type { ElementType, FocusEvent } from \"react\";\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { createDialogComponent } from \"../dialog/dialog.tsx\";\nimport type { PopoverOptions } from \"../popover/popover.tsx\";\nimport { usePopover } from \"../popover/popover.tsx\";\nimport {\n  HovercardScopedContextProvider,\n  useHovercardProviderContext,\n} from \"./hovercard-context.tsx\";\nimport type { HovercardStore } from \"./hovercard-store.ts\";\nimport type { Point } from \"./utils/polygon.ts\";\nimport {\n  getElementPolygon,\n  getEventPoint,\n  isPointInPolygon,\n} from \"./utils/polygon.ts\";\n\nconst TagName = \"div\" satisfies ElementType;\ntype TagName = typeof TagName;\ntype HTMLType = HTMLElementTagNameMap[TagName];\n\nfunction isMovingOnHovercard(\n  target: Node | null | undefined,\n  card: HTMLElement,\n  anchor: HTMLElement | null,\n  nested?: HTMLElement[],\n) {\n  // The hovercard element has focus so we should keep it visible.\n  if (hasFocusWithin(card)) return true;\n  if (!target) return false;\n  // The mouse is moving on an element inside the hovercard.\n  if (contains(card, target)) return true;\n  // The mouse is moving on an element inside the anchor element.\n  if (anchor && contains(anchor, target)) return true;\n  // The mouse is moving on an element inside a nested hovercard.\n  if (nested?.some((card) => isMovingOnHovercard(target, card, anchor))) {\n    return true;\n  }\n  return false;\n}\n\n// When the hovercard element has focus, we should move focus back to the anchor\n// element when the hovercard gets hidden (or unmounted).\nfunction useAutoFocusOnHide({\n  store,\n  ...props\n}: HovercardProps & { store: HovercardStore }) {\n  const [autoFocusOnHide, setAutoFocusOnHide] = useState(false);\n  const mounted = useStoreState(store, \"mounted\");\n\n  // Resets autoFocusOnHide\n  useEffect(() => {\n    if (!mounted) {\n      setAutoFocusOnHide(false);\n    }\n  }, [mounted]);\n\n  const onFocusProp = props.onFocus;\n\n  const onFocus = useEvent((event: FocusEvent<HTMLType>) => {\n    onFocusProp?.(event);\n    if (event.defaultPrevented) return;\n    setAutoFocusOnHide(true);\n  });\n\n  // TODO: Maybe use state.anchorElement directly?\n  const finalFocusRef = useRef<HTMLElement | null>(null);\n\n  useEffect(() => {\n    return sync(store, [\"anchorElement\"], (state) => {\n      finalFocusRef.current = state.anchorElement;\n    });\n  }, [store]);\n\n  props = {\n    autoFocusOnHide,\n    finalFocus: finalFocusRef,\n    ...props,\n    onFocus,\n  };\n\n  return props;\n}\n\nconst NestedHovercardContext = createContext<\n  ((element: HTMLElement) => () => void) | null\n>(null);\n\n/**\n * Returns props to create a `Hovercard` component.\n * @see https://ariakit.com/components/hovercard\n * @example\n * ```jsx\n * const store = useHovercardStore();\n * const props = useHovercard({ store });\n * <HovercardAnchor store={store}>@username</HovercardAnchor>\n * <Role {...props}>Details</Role>\n * ```\n */\nexport const useHovercard = createHook<TagName, HovercardOptions>(\n  function useHovercard({\n    store,\n    modal = false,\n    portal = modal,\n    hideOnEscape = true,\n    hideOnHoverOutside = true,\n    disablePointerEventsOnApproach = !!hideOnHoverOutside,\n    ...props\n  }) {\n    const context = useHovercardProviderContext();\n    store = store || context;\n\n    invariant(\n      store,\n      process.env.NODE_ENV !== \"production\" &&\n        \"Hovercard must receive a `store` prop or be wrapped in a HovercardProvider component.\",\n    );\n\n    const ref = useRef<HTMLType>(null);\n    const [nestedHovercards, setNestedHovercards] = useState<HTMLElement[]>([]);\n    const hideTimeoutRef = useRef(0);\n    const enterPointRef = useRef<Point | null>(null);\n    const { portalRef, domReady } = usePortalRef(portal, props.portalRef);\n\n    const isMouseMoving = useIsMouseMoving();\n\n    const mayHideOnHoverOutside = !!hideOnHoverOutside;\n    const hideOnHoverOutsideProp = useBooleanEvent(hideOnHoverOutside);\n    const mayDisablePointerEvents = !!disablePointerEventsOnApproach;\n    const disablePointerEventsProp = useBooleanEvent(\n      disablePointerEventsOnApproach,\n    );\n\n    const open = useStoreState(store, \"open\");\n    const mounted = useStoreState(store, \"mounted\");\n\n    // Checks whether the mouse is moving toward the hovercard. If not, hide the\n    // card after a short delay (hideTimeout).\n    useEffect(() => {\n      if (!domReady) return;\n      if (!mounted) return;\n      if (!mayHideOnHoverOutside && !mayDisablePointerEvents) return;\n      const element = ref.current;\n      if (!element) return;\n      const onMouseMove = (event: MouseEvent) => {\n        if (!store) return;\n        if (!isMouseMoving()) return;\n        const { anchorElement, hideTimeout, timeout } = store.getState();\n        const enterPoint = enterPointRef.current;\n        const [target] = event.composedPath() as Node[];\n        const anchor = anchorElement;\n        // Checks whether the hovercard element has focus or the mouse is moving\n        // through valid hovercard elements.\n        if (isMovingOnHovercard(target, element, anchor, nestedHovercards)) {\n          // While the mouse is moving over the anchor element while the hover\n          // card is open, keep track of the mouse position so we can use the\n          // last point before the mouse leaves the anchor element.\n          enterPointRef.current =\n            target && anchor && contains(anchor, target)\n              ? getEventPoint(event)\n              : null;\n          window.clearTimeout(hideTimeoutRef.current);\n          hideTimeoutRef.current = 0;\n          return;\n        }\n        // If there's already a scheduled timeout to hide the hovercard, we do\n        // nothing.\n        if (hideTimeoutRef.current) return;\n        // Enter point will be null when the user hovers over the hovercard\n        // element.\n        if (enterPoint) {\n          const currentPoint = getEventPoint(event);\n          const polygon = getElementPolygon(element, enterPoint);\n          // If the current event's mouse position is inside the transit\n          // polygon, this means that the mouse is moving toward the hover card,\n          // so we disable this event. This is necessary because the mousemove\n          // event may trigger focus on other elements and close the hovercard.\n          if (isPointInPolygon(currentPoint, polygon)) {\n            // Refreshes the enter point.\n            enterPointRef.current = currentPoint;\n            if (!disablePointerEventsProp(event)) return;\n            event.preventDefault();\n            event.stopPropagation();\n            return;\n          }\n        }\n        if (!hideOnHoverOutsideProp(event)) return;\n        // Otherwise, hide the hovercard after a short delay (hideTimeout).\n        hideTimeoutRef.current = window.setTimeout(() => {\n          hideTimeoutRef.current = 0;\n          store?.hide();\n        }, hideTimeout ?? timeout);\n      };\n      return chain(addGlobalEventListener(\"mousemove\", onMouseMove, true), () =>\n        clearTimeout(hideTimeoutRef.current),\n      );\n    }, [\n      store,\n      isMouseMoving,\n      domReady,\n      mounted,\n      mayHideOnHoverOutside,\n      mayDisablePointerEvents,\n      nestedHovercards,\n      disablePointerEventsProp,\n      hideOnHoverOutsideProp,\n    ]);\n\n    // Disable mouse events while the mouse is moving toward the hovercard. This\n    // is necessary because these events may trigger focus on other elements and\n    // close the hovercard while the user is moving the mouse toward it.\n    useEffect(() => {\n      if (!domReady) return;\n      if (!mounted) return;\n      if (!mayDisablePointerEvents) return;\n      const disableEvent = (event: MouseEvent) => {\n        const element = ref.current;\n        if (!element) return;\n        const enterPoint = enterPointRef.current;\n        if (!enterPoint) return;\n        const polygon = getElementPolygon(element, enterPoint);\n        if (isPointInPolygon(getEventPoint(event), polygon)) {\n          if (!disablePointerEventsProp(event)) return;\n          event.preventDefault();\n          event.stopPropagation();\n        }\n      };\n      return chain(\n        // Note: we may need to add pointer events here in the future.\n        addGlobalEventListener(\"mouseenter\", disableEvent, true),\n        addGlobalEventListener(\"mouseover\", disableEvent, true),\n        addGlobalEventListener(\"mouseout\", disableEvent, true),\n        addGlobalEventListener(\"mouseleave\", disableEvent, true),\n      );\n    }, [domReady, mounted, mayDisablePointerEvents, disablePointerEventsProp]);\n\n    // The autoFocusOnShow state will be set to true when the hovercard\n    // disclosure element is clicked. We have to reset it to false when the\n    // hovercard element gets hidden.\n    useEffect(() => {\n      if (!domReady) return;\n      if (open) return;\n      store?.setAutoFocusOnShow(false);\n    }, [store, domReady, open]);\n\n    // On unmount as well.\n    const openRef = useLiveRef(open);\n    useEffect(() => {\n      if (!domReady) return;\n      return () => {\n        // oxlint-disable-next-line exhaustive-deps\n        if (!openRef.current) {\n          store?.setAutoFocusOnShow(false);\n        }\n      };\n      // This cleanup intentionally reads the live ref so it can observe the\n      // latest open state at unmount time.\n      // oxlint-disable-next-line exhaustive-deps\n    }, [store, domReady]);\n\n    const registerOnParent = useContext(NestedHovercardContext);\n\n    // Register the hovercard as a nested hovercard on the parent hovercard if\n    // it's not a modal, is portal and is mounted. We don't need to register\n    // non-portal hovercards because they will be captured by the contains\n    // function in the isMovingOnHovercard function above. This must be a layout\n    // effect so we don't lose mouse move events right after the nested\n    // hovercard has been mounted (for example, a submenu that's overlapping its\n    // menu button and we keep moving the mouse while the submenu is due to\n    // open).\n    useSafeLayoutEffect(() => {\n      if (modal) return;\n      if (!portal) return;\n      if (!mounted) return;\n      if (!domReady) return;\n      const element = ref.current;\n      if (!element) return;\n      return registerOnParent?.(element);\n    }, [modal, portal, mounted, domReady]);\n\n    const registerNestedHovercard = useCallback(\n      (element: any) => {\n        setNestedHovercards((prevElements) => [...prevElements, element]);\n        const parentUnregister = registerOnParent?.(element);\n        return () => {\n          setNestedHovercards((prevElements) =>\n            prevElements.filter((item) => item !== element),\n          );\n          parentUnregister?.();\n        };\n      },\n      [registerOnParent],\n    );\n\n    props = useWrapElement(\n      props,\n      (element) => (\n        <HovercardScopedContextProvider value={store}>\n          <NestedHovercardContext.Provider value={registerNestedHovercard}>\n            {element}\n          </NestedHovercardContext.Provider>\n        </HovercardScopedContextProvider>\n      ),\n      [store, registerNestedHovercard],\n    );\n\n    props = {\n      ...props,\n      ref: useMergeRefs(ref, props.ref),\n    };\n\n    props = useAutoFocusOnHide({ store, ...props });\n\n    // If the hovercard is modal, we should always autoFocus on show.\n    const autoFocusOnShow = useStoreState(\n      store,\n      (state) => modal || state.autoFocusOnShow,\n    );\n\n    props = usePopover({\n      store,\n      modal,\n      portal,\n      autoFocusOnShow,\n      ...props,\n      portalRef,\n      hideOnEscape(event) {\n        if (isFalsyBooleanCallback(hideOnEscape, event)) return false;\n        // Hide again on the next frame to avoid the popover being shown again\n        // when the user presses the escape key and trigger focusVisible on the\n        // anchor element (which is the case of tooltip anchor).\n        requestAnimationFrame(() => {\n          requestAnimationFrame(() => {\n            store?.hide();\n          });\n        });\n        return true;\n      },\n    });\n\n    return props;\n  },\n);\n\n/**\n * Renders a hovercard element, which is a popover that's usually made visible\n * by hovering the mouse cursor over a\n * [`HovercardAnchor`](https://ariakit.com/reference/hovercard-anchor).\n * @see https://ariakit.com/components/hovercard\n * @example\n * ```jsx {3}\n * <HovercardProvider>\n *   <HovercardAnchor>@username</HovercardAnchor>\n *   <Hovercard>Details</Hovercard>\n * </HovercardProvider>\n * ```\n */\nexport const Hovercard = createDialogComponent(\n  forwardRef(function Hovercard(props: HovercardProps) {\n    const htmlProps = useHovercard(props);\n    return createElement(TagName, htmlProps);\n  }),\n  useHovercardProviderContext,\n);\n\nexport interface HovercardOptions<\n  T extends ElementType = TagName,\n> extends PopoverOptions<T> {\n  /**\n   * Object returned by the\n   * [`useHovercardStore`](https://ariakit.com/reference/use-hovercard-store)\n   * hook. If not provided, the closest\n   * [`HovercardProvider`](https://ariakit.com/reference/hovercard-provider)\n   * component's context will be used.\n   */\n  store?: HovercardStore;\n  /**\n   * Determines whether the popover should hide when the mouse leaves the\n   * popover or the anchor element and there's no _hover intent_, meaning, the\n   * mouse isn't moving toward the popover.\n   *\n   * This can be either a boolean or a callback receiving the mouse move event\n   * that initiated the behavior. The callback should return a boolean.\n   *\n   * **Note**: This behavior won't be triggered when the popover or any of its\n   * descendants are in focus.\n   * @default true\n   */\n  hideOnHoverOutside?: BooleanOrCallback<MouseEvent>;\n  /**\n   * Determines if the pointer events outside of the popover and its anchor\n   * element should be disabled during _hover intent_, that is, when the mouse\n   * is moving toward the popover.\n   *\n   * This is required as these external events may trigger focus on other\n   * elements and close the popover while the user is attempting to hover over\n   * it.\n   *\n   * This can be either a boolean or a callback receiving the mouse event\n   * happening during hover intent. The callback should return a boolean.\n   * @default true\n   */\n  disablePointerEventsOnApproach?: BooleanOrCallback<MouseEvent>;\n  /**\n   * @default false\n   */\n  modal?: PopoverOptions<T>[\"modal\"];\n}\n\nexport type HovercardProps<T extends ElementType = TagName> = Props<\n  T,\n  HovercardOptions<T>\n>;\n"],"mappings":"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"}

package/dist/hovercard/utils/debug-polygon.d.ts

@@ -0,0 +1,7 @@
+import { Polygon } from "./polygon.js";
+
+//#region src/hovercard/utils/debug-polygon.d.ts
+declare function debugPolygon(polygon: Polygon): HTMLElement | null;
+//#endregion
+export { debugPolygon };
+//# sourceMappingURL=debug-polygon.d.ts.map

package/dist/hovercard/utils/debug-polygon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"debug-polygon.d.ts","names":["Polygon","debugPolygon","HTMLElement","polygon"],"sources":["../../../src/hovercard/utils/debug-polygon.d.ts"],"mappings":";;;iBACwBC,YAAAA,CAAaE,OAAAA,EAASH,OAAAA,GAAUE,WAAW"}

package/dist/hovercard/utils/debug-polygon.js

@@ -0,0 +1,33 @@
+"use client";
+//#region src/hovercard/utils/debug-polygon.ts
+function getPolygon() {
+	const id = "debug-polygon";
+	const existingPolygon = document.getElementById(id);
+	if (existingPolygon) return existingPolygon;
+	const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+	svg.style.top = "0";
+	svg.style.left = "0";
+	svg.style.width = "100%";
+	svg.style.height = "100%";
+	svg.style.fill = "green";
+	svg.style.opacity = "0.2";
+	svg.style.position = "fixed";
+	svg.style.pointerEvents = "none";
+	svg.style.zIndex = "999999";
+	const polygon = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
+	polygon.setAttribute("id", id);
+	polygon.setAttribute("points", "0,0 0,0");
+	svg.appendChild(polygon);
+	document.body.appendChild(svg);
+	return polygon;
+}
+function debugPolygon(polygon) {
+	const polygonElement = getPolygon();
+	const points = polygon.map((point) => point.join(",")).join(" ");
+	polygonElement.setAttribute("points", points);
+	return polygonElement.parentElement;
+}
+//#endregion
+export { debugPolygon };
+
+//# sourceMappingURL=debug-polygon.js.map

package/dist/hovercard/utils/debug-polygon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"debug-polygon.js","names":[],"sources":["../../../src/hovercard/utils/debug-polygon.ts"],"sourcesContent":["/* istanbul ignore file */\nimport type { Polygon } from \"./polygon.ts\";\n\nfunction getPolygon() {\n  const id = \"debug-polygon\";\n  const existingPolygon = document.getElementById(id);\n  if (existingPolygon) {\n    return existingPolygon;\n  }\n  const svg = document.createElementNS(\"http://www.w3.org/2000/svg\", \"svg\");\n  svg.style.top = \"0\";\n  svg.style.left = \"0\";\n  svg.style.width = \"100%\";\n  svg.style.height = \"100%\";\n  svg.style.fill = \"green\";\n  svg.style.opacity = \"0.2\";\n  svg.style.position = \"fixed\";\n  svg.style.pointerEvents = \"none\";\n  svg.style.zIndex = \"999999\";\n  const polygon = document.createElementNS(\n    \"http://www.w3.org/2000/svg\",\n    \"polygon\",\n  );\n  polygon.setAttribute(\"id\", id);\n  polygon.setAttribute(\"points\", \"0,0 0,0\");\n  svg.appendChild(polygon);\n  document.body.appendChild(svg);\n  return polygon;\n}\n\nexport function debugPolygon(polygon: Polygon) {\n  const polygonElement = getPolygon();\n  const points = polygon.map((point) => point.join(\",\")).join(\" \");\n  polygonElement.setAttribute(\"points\", points);\n  // Return SVG element\n  return polygonElement.parentElement;\n}\n"],"mappings":";;SAIQ,aAAK;CACX,MAAM,KAAA;CACN,MAAI,kBACF,SAAO,eAAA,EAAA;CAET,IAAA,iBAAqB,OAAA;CACrB,MAAI,MAAM,SAAM,gBAAA,8BAAA,KAAA;CAChB,IAAI,MAAM,MAAA;CACV,IAAI,MAAM,OAAA;CACV,IAAI,MAAM,QAAA;CACV,IAAI,MAAM,SAAO;CACjB,IAAI,MAAM,OAAA;CACV,IAAI,MAAM,UAAA;CACV,IAAI,MAAM,WAAA;CACV,IAAI,MAAM,gBAAS;CACnB,IAAA,MAAM,SAAU;CAIhB,MAAA,UAAQ,SAAa,gBAAQ,8BAAA,SAAA;CAC7B,QAAQ,aAAa,MAAA,EAAA;CACrB,QAAI,aAAY,UAAO,SAAA;CACvB,IAAA,YAAc,OAAA;CACd,SAAO,KAAA,YAAA,GAAA;CACT,OAAA;AAEA;SACQ,aAAA,SAAiB;CACvB,MAAM,iBAAiB,WAAK;CAC5B,MAAA,SAAe,QAAA,KAAa,UAAU,MAAM,KAAA,GAAA,CAAA,EAAA,KAAA,GAAA;CAE5C,eAAO,aAAe,UAAA,MAAA;CACxB,OAAA,eAAA"}

package/dist/hovercard/utils/polygon.d.ts

@@ -0,0 +1,9 @@
+//#region src/hovercard/utils/polygon.d.ts
+type Point = [number, number];
+type Polygon = Point[];
+declare function getEventPoint(event: MouseEvent): Point;
+declare function isPointInPolygon(point: Point, polygon: Polygon): boolean;
+declare function getElementPolygon(element: Element, enterPoint: Point): Point[];
+//#endregion
+export { Point, Polygon, getElementPolygon, getEventPoint, isPointInPolygon };
+//# sourceMappingURL=polygon.d.ts.map

package/dist/hovercard/utils/polygon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"polygon.d.ts","names":["Point","Polygon","getEventPoint","MouseEvent","event","isPointInPolygon","point","polygon","getElementPolygon","Element","element","enterPoint"],"sources":["../../../src/hovercard/utils/polygon.d.ts"],"mappings":";KAAYA,KAAAA;AAAAA,KACAC,OAAAA,GAAUD,KAAK;AAAA,iBACHE,aAAAA,CAAcE,KAAAA,EAAOD,UAAAA,GAAaH,KAAK;AAAA,iBACvCK,gBAAAA,CAAiBC,KAAAA,EAAON,KAAAA,EAAOO,OAAAA,EAASN,OAAO;AAAA,iBAC/CO,iBAAAA,CAAkBE,OAAAA,EAASD,OAAAA,EAASE,UAAAA,EAAYX,KAAAA,GAAQA,KAAAA"}

package/dist/hovercard/utils/polygon.js

@@ -0,0 +1,70 @@
+"use client";
+//#region src/hovercard/utils/polygon.ts
+function getEventPoint(event) {
+	return [event.clientX, event.clientY];
+}
+function isPointInPolygon(point, polygon) {
+	const [x, y] = point;
+	let inside = false;
+	const length = polygon.length;
+	for (let l = length, i = 0, j = l - 1; i < l; j = i++) {
+		const currentPoint = polygon[i];
+		const previousPoint = polygon[j];
+		const vertexPoint = polygon[j === 0 ? l - 1 : j - 1];
+		if (currentPoint == null) return false;
+		if (previousPoint == null) return false;
+		if (vertexPoint == null) return false;
+		const [xi, yi] = currentPoint;
+		const [xj, yj] = previousPoint;
+		const [, vy] = vertexPoint;
+		const where = (yi - yj) * (x - xi) - (xi - xj) * (y - yi);
+		if (yj < yi) {
+			if (y >= yj && y < yi) {
+				if (where === 0) return true;
+				if (where > 0) if (y === yj) {
+					if (y > vy) inside = !inside;
+				} else inside = !inside;
+			}
+		} else if (yi < yj) {
+			if (y > yi && y <= yj) {
+				if (where === 0) return true;
+				if (where < 0) if (y === yj) {
+					if (y < vy) inside = !inside;
+				} else inside = !inside;
+			}
+		} else if (y === yi && (x >= xj && x <= xi || x >= xi && x <= xj)) return true;
+	}
+	return inside;
+}
+function getEnterPointPlacement(enterPoint, rect) {
+	const { top, right, bottom, left } = rect;
+	const [x, y] = enterPoint;
+	return [x < left ? "left" : x > right ? "right" : null, y < top ? "top" : y > bottom ? "bottom" : null];
+}
+function getElementPolygon(element, enterPoint) {
+	const rect = element.getBoundingClientRect();
+	const { top, right, bottom, left } = rect;
+	const [x, y] = getEnterPointPlacement(enterPoint, rect);
+	const polygon = [enterPoint];
+	if (x) {
+		if (y !== "top") polygon.push([x === "left" ? left : right, top]);
+		polygon.push([x === "left" ? right : left, top]);
+		polygon.push([x === "left" ? right : left, bottom]);
+		if (y !== "bottom") polygon.push([x === "left" ? left : right, bottom]);
+	} else if (y === "top") {
+		polygon.push([left, top]);
+		polygon.push([left, bottom]);
+		polygon.push([right, bottom]);
+		polygon.push([right, top]);
+	} else {
+		polygon.push([left, bottom]);
+		polygon.push([left, top]);
+		polygon.push([right, top]);
+		polygon.push([right, bottom]);
+	}
+	return polygon;
+}
+//#endregion
+export { getElementPolygon, getEventPoint, isPointInPolygon };
+
+//# sourceMappingURL=polygon.js.map

package/dist/hovercard/utils/polygon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"polygon.js","names":[],"sources":["../../../src/hovercard/utils/polygon.ts"],"sourcesContent":["export type Point = [number, number];\nexport type Polygon = Point[];\n\nexport function getEventPoint(event: MouseEvent): Point {\n  return [event.clientX, event.clientY];\n}\n\n// Based on https://github.com/metafloor/pointinpoly\nexport function isPointInPolygon(point: Point, polygon: Polygon) {\n  const [x, y] = point;\n  let inside = false;\n  const length = polygon.length;\n  for (let l = length, i = 0, j = l - 1; i < l; j = i++) {\n    const currentPoint = polygon[i];\n    const previousPoint = polygon[j];\n    const vertexPoint = polygon[j === 0 ? l - 1 : j - 1];\n    if (currentPoint == null) return false;\n    if (previousPoint == null) return false;\n    if (vertexPoint == null) return false;\n    const [xi, yi] = currentPoint;\n    const [xj, yj] = previousPoint;\n    const [, vy] = vertexPoint;\n    const where = (yi - yj) * (x - xi) - (xi - xj) * (y - yi);\n    if (yj < yi) {\n      if (y >= yj && y < yi) {\n        // point on the line\n        if (where === 0) return true;\n        if (where > 0) {\n          if (y === yj) {\n            // ray intersects vertex\n            if (y > vy) {\n              inside = !inside;\n            }\n          } else {\n            inside = !inside;\n          }\n        }\n      }\n    } else if (yi < yj) {\n      if (y > yi && y <= yj) {\n        // point on the line\n        if (where === 0) return true;\n        if (where < 0) {\n          if (y === yj) {\n            // ray intersects vertex\n            if (y < vy) {\n              inside = !inside;\n            }\n          } else {\n            inside = !inside;\n          }\n        }\n      }\n    } else if (y === yi && ((x >= xj && x <= xi) || (x >= xi && x <= xj))) {\n      // point on horizontal edge\n      return true;\n    }\n  }\n  return inside;\n}\n\nfunction getEnterPointPlacement(enterPoint: Point, rect: DOMRect) {\n  const { top, right, bottom, left } = rect;\n  const [x, y] = enterPoint;\n  const placementX = x < left ? \"left\" : x > right ? \"right\" : null;\n  const placementY = y < top ? \"top\" : y > bottom ? \"bottom\" : null;\n  return [placementX, placementY] as const;\n}\n\nexport function getElementPolygon(element: Element, enterPoint: Point) {\n  const rect = element.getBoundingClientRect();\n  const { top, right, bottom, left } = rect;\n  const [x, y] = getEnterPointPlacement(enterPoint, rect);\n  const polygon = [enterPoint];\n  if (x) {\n    if (y !== \"top\") {\n      polygon.push([x === \"left\" ? left : right, top]);\n    }\n    polygon.push([x === \"left\" ? right : left, top]);\n    polygon.push([x === \"left\" ? right : left, bottom]);\n    if (y !== \"bottom\") {\n      polygon.push([x === \"left\" ? left : right, bottom]);\n    }\n  } else if (y === \"top\") {\n    polygon.push([left, top]);\n    polygon.push([left, bottom]);\n    polygon.push([right, bottom]);\n    polygon.push([right, top]);\n  } else {\n    polygon.push([left, bottom]);\n    polygon.push([left, top]);\n    polygon.push([right, top]);\n    polygon.push([right, bottom]);\n  }\n  return polygon;\n}\n"],"mappings":";;SAIU,cAAM,OAAe;CAC/B,OAAA,CAAA,MAAA,SAAA,MAAA,OAAA;AAGA;SACS,iBAAQ,OAAA,SAAA;CACf,MAAI,CAAA,GAAA,KAAS;CACb,IAAA,SAAM;CACN,MAAK,SAAQ,QAAQ;MACnB,IAAM,IAAA,QAAA,IAAe,GAAA,IAAQ,IAAA,GAAA,IAAA,GAAA,IAAA,KAAA;EAC7B,MAAM,eAAA,QAAgB;EACtB,MAAM,gBAAc,QAAQ;EAC5B,MAAI,cAAgB,QAAM,MAAO,IAAA,IAAA,IAAA,IAAA;EACjC,IAAI,gBAAA,MAAiB,OAAM;EAC3B,IAAI,iBAAe,MAAM,OAAO;EAChC,IAAA,eAAiB,MAAA,OAAA;EACjB,MAAM,CAAC,IAAI,MAAM;EACjB,MAAM,CAAA,IAAG,MAAM;EACf,MAAM,GAAA,MAAS;EACf,MAAI,SACF,KAAA,OAAA,IAAA,OAAA,KAAA,OAAA,IAAA;WAAI;OAEF,KAAI,MAAU,IAAG,IAAA;IACjB,IAAI,UAAQ,GACV,OAAI;gBAEM,GACN,IAAA,MAAU,IACZ;SAAA,IAEA,IAAA,SAAU,CAAA;IAAA,OAGhB,SAAA,CAAA;;SAEI,IAAI,KAAM;OAEZ,IAAI,MAAA,KAAa,IAAA;IACjB,IAAI,UAAQ,GACV,OAAI;gBAEM,GACN,IAAA,MAAU,IACZ;SAAA,IAEA,IAAA,SAAU,CAAA;IAAA,OAGhB,SAAA,CAAA;;SAKJ,IAAA,MAAA,OAAA,KAAA,MAAA,KAAA,MAAA,KAAA,MAAA,KAAA,KAAA,OAAA;CACA;CACF,OAAA;AAEA;SACU,uBAAoB,YAAS,MAAA;CACrC,MAAM,EAAC,KAAG,OAAK,QAAA,SAAA;CAGf,MAAA,CAAO,GAFY,KAAI;CAGzB,OAAA,CAAA,IAAA,OAAA,SAAA,IAAA,QAAA,UAAA,MAAA,IAAA,MAAA,QAAA,IAAA,SAAA,WAAA,IAAA;AAEA;SACQ,kBAAe,SAAA,YAAsB;CAC3C,MAAM,OAAO,QAAO,sBAAiB;CACrC,MAAM,EAAC,KAAG,OAAK,QAAA,SAAA;CACf,MAAM,CAAA,GAAA,KAAA,uBAAqB,YAAA,IAAA;CAC3B,MAAI,UAAG,CAAA,UAAA;KACL,GAAI;EAGJ,IAAA,MAAQ,OAAM,QAAM,KAAS,CAAA,MAAQ,SAAS,OAAC,OAAA,GAAA,CAAA;EAC/C,QAAQ,KAAK,CAAC,MAAM,SAAS,QAAQ,MAAM,GAAA,CAAA;EAC3C,QAAI,KAAM,CAAA,MACR,SAAQ,QAAM,MAAM,MAAS,CAAA;EAEjC,IAAA,MAAW,UAAM,QAAO,KAAA,CAAA,MAAA,SAAA,OAAA,OAAA,MAAA,CAAA;QACtB,IAAQ,MAAM,OAAS;EACvB,QAAQ,KAAK,CAAC,MAAM,GAAA,CAAA;EACpB,QAAQ,KAAK,CAAC,MAAA,MAAO,CAAM;EAC3B,QAAQ,KAAK,CAAC,OAAO,MAAI,CAAA;EAC3B,QAAO,KAAA,CAAA,OAAA,GAAA,CAAA;QACL;EACA,QAAQ,KAAK,CAAC,MAAM,MAAI,CAAA;EACxB,QAAQ,KAAK,CAAC,MAAA,GAAO,CAAG;EACxB,QAAQ,KAAK,CAAC,OAAO,GAAA,CAAA;EACvB,QAAA,KAAA,CAAA,OAAA,MAAA,CAAA;CACA;CACF,OAAA"}