@usels/core 0.0.1-beta.3

package/dist/elements/useIntersectionObserver/index.d.ts

@@ -0,0 +1,47 @@
+import { Observable } from '@legendapp/state';
+import { DeepMaybeObservable } from '../../types.js';
+import { MaybeElement } from '../useRef_/index.js';
+import 'react';
+
+interface UseIntersectionObserverOptions {
+    /** Whether to start observing immediately on mount. Default: true */
+    immediate?: boolean;
+    /** The element or document used as the viewport. Default: browser viewport */
+    root?: MaybeElement;
+    /** Margin around the root. Accepts CSS-style values. Default: "0px" */
+    rootMargin?: string;
+    /** Threshold(s) at which to trigger the callback. Default: 0 */
+    threshold?: number | number[];
+}
+interface UseIntersectionObserverReturn {
+    isSupported$: Observable<boolean>;
+    isActive$: Observable<boolean>;
+    stop: () => void;
+    pause: () => void;
+    resume: () => void;
+}
+/**
+ * Reactive wrapper around the IntersectionObserver API.
+ * Observes one or more elements for intersection changes with pause/resume/stop support.
+ *
+ * @param target - Element(s) to observe: Ref$, Observable, raw Element, or array of these
+ * @param callback - Called when intersection state changes
+ * @param options - IntersectionObserver options plus an `immediate` flag
+ * @returns `{ isSupported$, isActive$, pause, resume, stop }`
+ *
+ * @example
+ * ```tsx
+ * const el$ = useRef$<HTMLDivElement>();
+ * const { isActive$, pause, resume } = useIntersectionObserver(
+ *   el$,
+ *   (entries) => {
+ *     entries.forEach(entry => console.log(entry.isIntersecting));
+ *   },
+ *   { threshold: 0.5 },
+ * );
+ * return <div ref={el$} />;
+ * ```
+ */
+declare function useIntersectionObserver(target: MaybeElement | MaybeElement[], callback: IntersectionObserverCallback, options?: DeepMaybeObservable<UseIntersectionObserverOptions>): UseIntersectionObserverReturn;
+
+export { type UseIntersectionObserverOptions, type UseIntersectionObserverReturn, useIntersectionObserver };

package/dist/elements/useIntersectionObserver/index.js

@@ -0,0 +1,111 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useIntersectionObserver_exports = {};
+__export(useIntersectionObserver_exports, {
+  useIntersectionObserver: () => useIntersectionObserver
+});
+module.exports = __toCommonJS(useIntersectionObserver_exports);
+var import_react = require("@legendapp/state/react");
+var import_react2 = require("react");
+var import_useMayObservableOptions = require("../../function/useMayObservableOptions");
+var import_shared = require("../../shared");
+var import_useResizeObserver = require("../useResizeObserver");
+var import_get = require("../../function/get");
+function useIntersectionObserver(target, callback, options) {
+  const opts$ = (0, import_useMayObservableOptions.useMayObservableOptions)(
+    options,
+    {
+      immediate: "peek",
+      threshold: "peek",
+      root: "get.element",
+      rootMargin: (value) => (0, import_get.get)(value)
+    }
+  );
+  const isSupported$ = (0, import_react.useObservable)(
+    typeof IntersectionObserver !== "undefined"
+  );
+  const isActive$ = (0, import_react.useObservable)(opts$.immediate.peek() !== false);
+  const observerRef = (0, import_react2.useRef)(null);
+  const stoppedRef = (0, import_react2.useRef)(false);
+  const mountedRef = (0, import_react2.useRef)(false);
+  const cleanup = () => {
+    observerRef.current?.disconnect();
+    observerRef.current = null;
+  };
+  const setup = () => {
+    if (!isSupported$.peek() || !isActive$.peek()) return;
+    cleanup();
+    const rawRoot = opts$.root.peek();
+    const root = rawRoot == null ? rawRoot : (() => {
+      const el = rawRoot.valueOf();
+      return (0, import_shared.isWindow)(el) ? null : el;
+    })();
+    observerRef.current = new IntersectionObserver(callback, {
+      root: root ?? void 0,
+      rootMargin: opts$.rootMargin.peek(),
+      threshold: opts$.threshold.peek() ?? 0
+    });
+    const targets = (0, import_useResizeObserver.normalizeTargets)(target);
+    targets.forEach((el) => observerRef.current?.observe(el));
+  };
+  (0, import_react2.useEffect)(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+      cleanup();
+    };
+  }, []);
+  (0, import_react.useObserveEffect)((e) => {
+    e.onCleanup = cleanup;
+    const root = opts$.root.get();
+    opts$.rootMargin.get();
+    isActive$.get();
+    (0, import_useResizeObserver.normalizeTargets)(target);
+    if (stoppedRef.current) return;
+    if (root === null) return;
+    setup();
+  });
+  const pause = () => {
+    if (!mountedRef.current) return;
+    cleanup();
+    isActive$.set(false);
+  };
+  const resume = () => {
+    if (stoppedRef.current || !mountedRef.current) return;
+    isActive$.set(true);
+  };
+  const stop = () => {
+    if (!mountedRef.current) return;
+    stoppedRef.current = true;
+    cleanup();
+    isActive$.set(false);
+  };
+  return {
+    isSupported$,
+    isActive$,
+    stop,
+    pause,
+    resume
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useIntersectionObserver
+});
+//# sourceMappingURL=index.js.map

package/dist/elements/useIntersectionObserver/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/useIntersectionObserver/index.ts"],"sourcesContent":["import type { Observable } from \"@legendapp/state\";\nimport { useObservable, useObserveEffect } from \"@legendapp/state/react\";\nimport { useEffect, useRef } from \"react\";\nimport { useMayObservableOptions } from \"../../function/useMayObservableOptions\";\nimport type { DeepMaybeObservable, MaybeObservable } from \"../../types\";\nimport { isWindow } from \"../../shared\";\nimport type { MaybeElement } from \"../useRef$\";\nimport { normalizeTargets } from \"../useResizeObserver\";\nimport { get } from \"../../function/get\";\n\nexport interface UseIntersectionObserverOptions {\n  /** Whether to start observing immediately on mount. Default: true */\n  immediate?: boolean;\n  /** The element or document used as the viewport. Default: browser viewport */\n  root?: MaybeElement;\n  /** Margin around the root. Accepts CSS-style values. Default: \"0px\" */\n  rootMargin?: string;\n  /** Threshold(s) at which to trigger the callback. Default: 0 */\n  threshold?: number | number[];\n}\n\nexport interface UseIntersectionObserverReturn {\n  isSupported$: Observable<boolean>;\n  isActive$: Observable<boolean>;\n  stop: () => void;\n  pause: () => void;\n  resume: () => void;\n}\n\n/**\n * Reactive wrapper around the IntersectionObserver API.\n * Observes one or more elements for intersection changes with pause/resume/stop support.\n *\n * @param target - Element(s) to observe: Ref$, Observable, raw Element, or array of these\n * @param callback - Called when intersection state changes\n * @param options - IntersectionObserver options plus an `immediate` flag\n * @returns `{ isSupported$, isActive$, pause, resume, stop }`\n *\n * @example\n * ```tsx\n * const el$ = useRef$<HTMLDivElement>();\n * const { isActive$, pause, resume } = useIntersectionObserver(\n *   el$,\n *   (entries) => {\n *     entries.forEach(entry => console.log(entry.isIntersecting));\n *   },\n *   { threshold: 0.5 },\n * );\n * return <div ref={el$} />;\n * ```\n */\nexport function useIntersectionObserver(\n  target: MaybeElement | MaybeElement[],\n  callback: IntersectionObserverCallback,\n  options?: DeepMaybeObservable<UseIntersectionObserverOptions>,\n): UseIntersectionObserverReturn {\n  const opts$ = useMayObservableOptions<UseIntersectionObserverOptions>(\n    options,\n    {\n      immediate: \"peek\",\n      threshold: \"peek\",\n      root: \"get.element\",\n      rootMargin: (value) => get(value as MaybeObservable<string | undefined>),\n    },\n  );\n  const isSupported$ = useObservable<boolean>(\n    typeof IntersectionObserver !== \"undefined\",\n  );\n  const isActive$ = useObservable<boolean>(opts$.immediate.peek() !== false);\n  const observerRef = useRef<IntersectionObserver | null>(null);\n  const stoppedRef = useRef(false);\n  const mountedRef = useRef(false);\n\n  const cleanup = () => {\n    observerRef.current?.disconnect();\n    observerRef.current = null;\n  };\n\n  const setup = () => {\n    if (!isSupported$.peek() || !isActive$.peek()) return;\n    cleanup();\n\n    const rawRoot = opts$.root.peek();\n    const root =\n      rawRoot == null\n        ? (rawRoot as null | undefined)\n        : (() => {\n            const el = (\n              rawRoot as unknown as { valueOf(): HTMLElement | Document }\n            ).valueOf();\n            return isWindow(el as unknown) ? null : el;\n          })();\n\n    observerRef.current = new IntersectionObserver(callback, {\n      root: root ?? undefined,\n      rootMargin: opts$.rootMargin.peek() as string | undefined,\n      threshold: (opts$.threshold.peek() as number | number[] | undefined) ?? 0,\n    });\n\n    const targets = normalizeTargets(target);\n    targets.forEach((el) => observerRef.current?.observe(el));\n  };\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useEffect(() => {\n    mountedRef.current = true;\n    return () => {\n      mountedRef.current = false;\n      cleanup();\n    };\n  }, []);\n\n  useObserveEffect((e) => {\n    e.onCleanup = cleanup;\n    const root = opts$.root.get();\n    opts$.rootMargin.get();\n    isActive$.get();\n    normalizeTargets(target);\n    if (stoppedRef.current) return;\n    if (root === null) return;\n    setup();\n  });\n\n  const pause = () => {\n    if (!mountedRef.current) return;\n    cleanup();\n    isActive$.set(false);\n  };\n\n  const resume = () => {\n    if (stoppedRef.current || !mountedRef.current) return;\n    isActive$.set(true);\n  };\n\n  const stop = () => {\n    if (!mountedRef.current) return;\n    stoppedRef.current = true;\n    cleanup();\n    isActive$.set(false);\n  };\n\n  return {\n    isSupported$,\n    isActive$,\n    stop,\n    pause,\n    resume,\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAgD;AAChD,IAAAA,gBAAkC;AAClC,qCAAwC;AAExC,oBAAyB;AAEzB,+BAAiC;AACjC,iBAAoB;AA2Cb,SAAS,wBACd,QACA,UACA,SAC+B;AAC/B,QAAM,YAAQ;AAAA,IACZ;AAAA,IACA;AAAA,MACE,WAAW;AAAA,MACX,WAAW;AAAA,MACX,MAAM;AAAA,MACN,YAAY,CAAC,cAAU,gBAAI,KAA4C;AAAA,IACzE;AAAA,EACF;AACA,QAAM,mBAAe;AAAA,IACnB,OAAO,yBAAyB;AAAA,EAClC;AACA,QAAM,gBAAY,4BAAuB,MAAM,UAAU,KAAK,MAAM,KAAK;AACzE,QAAM,kBAAc,sBAAoC,IAAI;AAC5D,QAAM,iBAAa,sBAAO,KAAK;AAC/B,QAAM,iBAAa,sBAAO,KAAK;AAE/B,QAAM,UAAU,MAAM;AACpB,gBAAY,SAAS,WAAW;AAChC,gBAAY,UAAU;AAAA,EACxB;AAEA,QAAM,QAAQ,MAAM;AAClB,QAAI,CAAC,aAAa,KAAK,KAAK,CAAC,UAAU,KAAK,EAAG;AAC/C,YAAQ;AAER,UAAM,UAAU,MAAM,KAAK,KAAK;AAChC,UAAM,OACJ,WAAW,OACN,WACA,MAAM;AACL,YAAM,KACJ,QACA,QAAQ;AACV,iBAAO,wBAAS,EAAa,IAAI,OAAO;AAAA,IAC1C,GAAG;AAET,gBAAY,UAAU,IAAI,qBAAqB,UAAU;AAAA,MACvD,MAAM,QAAQ;AAAA,MACd,YAAY,MAAM,WAAW,KAAK;AAAA,MAClC,WAAY,MAAM,UAAU,KAAK,KAAuC;AAAA,IAC1E,CAAC;AAED,UAAM,cAAU,2CAAiB,MAAM;AACvC,YAAQ,QAAQ,CAAC,OAAO,YAAY,SAAS,QAAQ,EAAE,CAAC;AAAA,EAC1D;AAGA,+BAAU,MAAM;AACd,eAAW,UAAU;AACrB,WAAO,MAAM;AACX,iBAAW,UAAU;AACrB,cAAQ;AAAA,IACV;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,qCAAiB,CAAC,MAAM;AACtB,MAAE,YAAY;AACd,UAAM,OAAO,MAAM,KAAK,IAAI;AAC5B,UAAM,WAAW,IAAI;AACrB,cAAU,IAAI;AACd,mDAAiB,MAAM;AACvB,QAAI,WAAW,QAAS;AACxB,QAAI,SAAS,KAAM;AACnB,UAAM;AAAA,EACR,CAAC;AAED,QAAM,QAAQ,MAAM;AAClB,QAAI,CAAC,WAAW,QAAS;AACzB,YAAQ;AACR,cAAU,IAAI,KAAK;AAAA,EACrB;AAEA,QAAM,SAAS,MAAM;AACnB,QAAI,WAAW,WAAW,CAAC,WAAW,QAAS;AAC/C,cAAU,IAAI,IAAI;AAAA,EACpB;AAEA,QAAM,OAAO,MAAM;AACjB,QAAI,CAAC,WAAW,QAAS;AACzB,eAAW,UAAU;AACrB,YAAQ;AACR,cAAU,IAAI,KAAK;AAAA,EACrB;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":["import_react"]}

package/dist/elements/useIntersectionObserver/index.mjs

@@ -0,0 +1,87 @@
+import { useObservable, useObserveEffect } from "@legendapp/state/react";
+import { useEffect, useRef } from "react";
+import { useMayObservableOptions } from "../../function/useMayObservableOptions";
+import { isWindow } from "../../shared";
+import { normalizeTargets } from "../useResizeObserver";
+import { get } from "../../function/get";
+function useIntersectionObserver(target, callback, options) {
+  const opts$ = useMayObservableOptions(
+    options,
+    {
+      immediate: "peek",
+      threshold: "peek",
+      root: "get.element",
+      rootMargin: (value) => get(value)
+    }
+  );
+  const isSupported$ = useObservable(
+    typeof IntersectionObserver !== "undefined"
+  );
+  const isActive$ = useObservable(opts$.immediate.peek() !== false);
+  const observerRef = useRef(null);
+  const stoppedRef = useRef(false);
+  const mountedRef = useRef(false);
+  const cleanup = () => {
+    observerRef.current?.disconnect();
+    observerRef.current = null;
+  };
+  const setup = () => {
+    if (!isSupported$.peek() || !isActive$.peek()) return;
+    cleanup();
+    const rawRoot = opts$.root.peek();
+    const root = rawRoot == null ? rawRoot : (() => {
+      const el = rawRoot.valueOf();
+      return isWindow(el) ? null : el;
+    })();
+    observerRef.current = new IntersectionObserver(callback, {
+      root: root ?? void 0,
+      rootMargin: opts$.rootMargin.peek(),
+      threshold: opts$.threshold.peek() ?? 0
+    });
+    const targets = normalizeTargets(target);
+    targets.forEach((el) => observerRef.current?.observe(el));
+  };
+  useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+      cleanup();
+    };
+  }, []);
+  useObserveEffect((e) => {
+    e.onCleanup = cleanup;
+    const root = opts$.root.get();
+    opts$.rootMargin.get();
+    isActive$.get();
+    normalizeTargets(target);
+    if (stoppedRef.current) return;
+    if (root === null) return;
+    setup();
+  });
+  const pause = () => {
+    if (!mountedRef.current) return;
+    cleanup();
+    isActive$.set(false);
+  };
+  const resume = () => {
+    if (stoppedRef.current || !mountedRef.current) return;
+    isActive$.set(true);
+  };
+  const stop = () => {
+    if (!mountedRef.current) return;
+    stoppedRef.current = true;
+    cleanup();
+    isActive$.set(false);
+  };
+  return {
+    isSupported$,
+    isActive$,
+    stop,
+    pause,
+    resume
+  };
+}
+export {
+  useIntersectionObserver
+};
+//# sourceMappingURL=index.mjs.map

package/dist/elements/useIntersectionObserver/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/useIntersectionObserver/index.ts"],"sourcesContent":["import type { Observable } from \"@legendapp/state\";\nimport { useObservable, useObserveEffect } from \"@legendapp/state/react\";\nimport { useEffect, useRef } from \"react\";\nimport { useMayObservableOptions } from \"../../function/useMayObservableOptions\";\nimport type { DeepMaybeObservable, MaybeObservable } from \"../../types\";\nimport { isWindow } from \"../../shared\";\nimport type { MaybeElement } from \"../useRef$\";\nimport { normalizeTargets } from \"../useResizeObserver\";\nimport { get } from \"../../function/get\";\n\nexport interface UseIntersectionObserverOptions {\n  /** Whether to start observing immediately on mount. Default: true */\n  immediate?: boolean;\n  /** The element or document used as the viewport. Default: browser viewport */\n  root?: MaybeElement;\n  /** Margin around the root. Accepts CSS-style values. Default: \"0px\" */\n  rootMargin?: string;\n  /** Threshold(s) at which to trigger the callback. Default: 0 */\n  threshold?: number | number[];\n}\n\nexport interface UseIntersectionObserverReturn {\n  isSupported$: Observable<boolean>;\n  isActive$: Observable<boolean>;\n  stop: () => void;\n  pause: () => void;\n  resume: () => void;\n}\n\n/**\n * Reactive wrapper around the IntersectionObserver API.\n * Observes one or more elements for intersection changes with pause/resume/stop support.\n *\n * @param target - Element(s) to observe: Ref$, Observable, raw Element, or array of these\n * @param callback - Called when intersection state changes\n * @param options - IntersectionObserver options plus an `immediate` flag\n * @returns `{ isSupported$, isActive$, pause, resume, stop }`\n *\n * @example\n * ```tsx\n * const el$ = useRef$<HTMLDivElement>();\n * const { isActive$, pause, resume } = useIntersectionObserver(\n *   el$,\n *   (entries) => {\n *     entries.forEach(entry => console.log(entry.isIntersecting));\n *   },\n *   { threshold: 0.5 },\n * );\n * return <div ref={el$} />;\n * ```\n */\nexport function useIntersectionObserver(\n  target: MaybeElement | MaybeElement[],\n  callback: IntersectionObserverCallback,\n  options?: DeepMaybeObservable<UseIntersectionObserverOptions>,\n): UseIntersectionObserverReturn {\n  const opts$ = useMayObservableOptions<UseIntersectionObserverOptions>(\n    options,\n    {\n      immediate: \"peek\",\n      threshold: \"peek\",\n      root: \"get.element\",\n      rootMargin: (value) => get(value as MaybeObservable<string | undefined>),\n    },\n  );\n  const isSupported$ = useObservable<boolean>(\n    typeof IntersectionObserver !== \"undefined\",\n  );\n  const isActive$ = useObservable<boolean>(opts$.immediate.peek() !== false);\n  const observerRef = useRef<IntersectionObserver | null>(null);\n  const stoppedRef = useRef(false);\n  const mountedRef = useRef(false);\n\n  const cleanup = () => {\n    observerRef.current?.disconnect();\n    observerRef.current = null;\n  };\n\n  const setup = () => {\n    if (!isSupported$.peek() || !isActive$.peek()) return;\n    cleanup();\n\n    const rawRoot = opts$.root.peek();\n    const root =\n      rawRoot == null\n        ? (rawRoot as null | undefined)\n        : (() => {\n            const el = (\n              rawRoot as unknown as { valueOf(): HTMLElement | Document }\n            ).valueOf();\n            return isWindow(el as unknown) ? null : el;\n          })();\n\n    observerRef.current = new IntersectionObserver(callback, {\n      root: root ?? undefined,\n      rootMargin: opts$.rootMargin.peek() as string | undefined,\n      threshold: (opts$.threshold.peek() as number | number[] | undefined) ?? 0,\n    });\n\n    const targets = normalizeTargets(target);\n    targets.forEach((el) => observerRef.current?.observe(el));\n  };\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useEffect(() => {\n    mountedRef.current = true;\n    return () => {\n      mountedRef.current = false;\n      cleanup();\n    };\n  }, []);\n\n  useObserveEffect((e) => {\n    e.onCleanup = cleanup;\n    const root = opts$.root.get();\n    opts$.rootMargin.get();\n    isActive$.get();\n    normalizeTargets(target);\n    if (stoppedRef.current) return;\n    if (root === null) return;\n    setup();\n  });\n\n  const pause = () => {\n    if (!mountedRef.current) return;\n    cleanup();\n    isActive$.set(false);\n  };\n\n  const resume = () => {\n    if (stoppedRef.current || !mountedRef.current) return;\n    isActive$.set(true);\n  };\n\n  const stop = () => {\n    if (!mountedRef.current) return;\n    stoppedRef.current = true;\n    cleanup();\n    isActive$.set(false);\n  };\n\n  return {\n    isSupported$,\n    isActive$,\n    stop,\n    pause,\n    resume,\n  };\n}\n"],"mappings":"AACA,SAAS,eAAe,wBAAwB;AAChD,SAAS,WAAW,cAAc;AAClC,SAAS,+BAA+B;AAExC,SAAS,gBAAgB;AAEzB,SAAS,wBAAwB;AACjC,SAAS,WAAW;AA2Cb,SAAS,wBACd,QACA,UACA,SAC+B;AAC/B,QAAM,QAAQ;AAAA,IACZ;AAAA,IACA;AAAA,MACE,WAAW;AAAA,MACX,WAAW;AAAA,MACX,MAAM;AAAA,MACN,YAAY,CAAC,UAAU,IAAI,KAA4C;AAAA,IACzE;AAAA,EACF;AACA,QAAM,eAAe;AAAA,IACnB,OAAO,yBAAyB;AAAA,EAClC;AACA,QAAM,YAAY,cAAuB,MAAM,UAAU,KAAK,MAAM,KAAK;AACzE,QAAM,cAAc,OAAoC,IAAI;AAC5D,QAAM,aAAa,OAAO,KAAK;AAC/B,QAAM,aAAa,OAAO,KAAK;AAE/B,QAAM,UAAU,MAAM;AACpB,gBAAY,SAAS,WAAW;AAChC,gBAAY,UAAU;AAAA,EACxB;AAEA,QAAM,QAAQ,MAAM;AAClB,QAAI,CAAC,aAAa,KAAK,KAAK,CAAC,UAAU,KAAK,EAAG;AAC/C,YAAQ;AAER,UAAM,UAAU,MAAM,KAAK,KAAK;AAChC,UAAM,OACJ,WAAW,OACN,WACA,MAAM;AACL,YAAM,KACJ,QACA,QAAQ;AACV,aAAO,SAAS,EAAa,IAAI,OAAO;AAAA,IAC1C,GAAG;AAET,gBAAY,UAAU,IAAI,qBAAqB,UAAU;AAAA,MACvD,MAAM,QAAQ;AAAA,MACd,YAAY,MAAM,WAAW,KAAK;AAAA,MAClC,WAAY,MAAM,UAAU,KAAK,KAAuC;AAAA,IAC1E,CAAC;AAED,UAAM,UAAU,iBAAiB,MAAM;AACvC,YAAQ,QAAQ,CAAC,OAAO,YAAY,SAAS,QAAQ,EAAE,CAAC;AAAA,EAC1D;AAGA,YAAU,MAAM;AACd,eAAW,UAAU;AACrB,WAAO,MAAM;AACX,iBAAW,UAAU;AACrB,cAAQ;AAAA,IACV;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,mBAAiB,CAAC,MAAM;AACtB,MAAE,YAAY;AACd,UAAM,OAAO,MAAM,KAAK,IAAI;AAC5B,UAAM,WAAW,IAAI;AACrB,cAAU,IAAI;AACd,qBAAiB,MAAM;AACvB,QAAI,WAAW,QAAS;AACxB,QAAI,SAAS,KAAM;AACnB,UAAM;AAAA,EACR,CAAC;AAED,QAAM,QAAQ,MAAM;AAClB,QAAI,CAAC,WAAW,QAAS;AACzB,YAAQ;AACR,cAAU,IAAI,KAAK;AAAA,EACrB;AAEA,QAAM,SAAS,MAAM;AACnB,QAAI,WAAW,WAAW,CAAC,WAAW,QAAS;AAC/C,cAAU,IAAI,IAAI;AAAA,EACpB;AAEA,QAAM,OAAO,MAAM;AACjB,QAAI,CAAC,WAAW,QAAS;AACzB,eAAW,UAAU;AACrB,YAAQ;AACR,cAAU,IAAI,KAAK;AAAA,EACrB;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":[]}

package/dist/elements/useMouseInElement/demo.d.mts

@@ -0,0 +1,5 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare function UseMouseInElementDemo(): react_jsx_runtime.JSX.Element;
+
+export { UseMouseInElementDemo as default };

package/dist/elements/useMouseInElement/demo.d.ts

@@ -0,0 +1,5 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare function UseMouseInElementDemo(): react_jsx_runtime.JSX.Element;
+
+export { UseMouseInElementDemo as default };

package/dist/elements/useMouseInElement/demo.js

@@ -0,0 +1,103 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var demo_exports = {};
+__export(demo_exports, {
+  default: () => UseMouseInElementDemo
+});
+module.exports = __toCommonJS(demo_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_useRef = require("../useRef$");
+var import__ = require(".");
+function UseMouseInElementDemo() {
+  const el$ = (0, import_useRef.useRef$)();
+  const { elementX$, elementY$, isOutside$, elementWidth$, elementHeight$, x$, y$: _y$ } = (0, import__.useMouseInElement)(el$);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "12px" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gridTemplateColumns: "repeat(3, 1fr)",
+          gap: "6px",
+          fontFamily: "monospace",
+          fontSize: "13px",
+          padding: "10px 14px",
+          background: "var(--sl-color-gray-6, #f1f5f9)",
+          borderRadius: "6px"
+        },
+        children: [
+          ["elementX", `${Math.round(elementX$.get())}px`],
+          ["elementY", `${Math.round(elementY$.get())}px`],
+          ["isOutside", String(isOutside$.get())],
+          ["width", `${Math.round(elementWidth$.get())}px`],
+          ["height", `${Math.round(elementHeight$.get())}px`],
+          ["x (global)", `${Math.round(x$.get())}px`]
+        ].map(([label, val]) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+          label,
+          ": ",
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: val })
+        ] }, label))
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        ref: el$,
+        style: {
+          position: "relative",
+          width: "100%",
+          height: "160px",
+          border: "1px solid var(--sl-color-gray-5, #cbd5e1)",
+          borderRadius: "6px",
+          overflow: "hidden",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          userSelect: "none",
+          fontFamily: "monospace",
+          fontSize: "13px",
+          color: "var(--sl-color-gray-3, #94a3b8)",
+          cursor: "crosshair"
+        },
+        children: [
+          "move your mouse here",
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                left: elementX$.get(),
+                top: elementY$.get(),
+                width: "10px",
+                height: "10px",
+                borderRadius: "50%",
+                background: "var(--sl-color-accent, #818cf8)",
+                transform: "translate(-50%, -50%)",
+                pointerEvents: "none",
+                opacity: isOutside$.get() ? 0 : 1,
+                transition: "opacity 0.15s"
+              }
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+//# sourceMappingURL=demo.js.map

package/dist/elements/useMouseInElement/demo.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/useMouseInElement/demo.tsx"],"sourcesContent":["import { useRef$ } from \"../useRef$\";\nimport { useMouseInElement } from \".\";\n\nexport default function UseMouseInElementDemo() {\n  const el$ = useRef$<HTMLDivElement>();\n  const { elementX$, elementY$, isOutside$, elementWidth$, elementHeight$, x$, y$: _y$ } =\n    useMouseInElement(el$);\n\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"12px\" }}>\n      {/* Stats readout */}\n      <div\n        style={{\n          display: \"grid\",\n          gridTemplateColumns: \"repeat(3, 1fr)\",\n          gap: \"6px\",\n          fontFamily: \"monospace\",\n          fontSize: \"13px\",\n          padding: \"10px 14px\",\n          background: \"var(--sl-color-gray-6, #f1f5f9)\",\n          borderRadius: \"6px\",\n        }}\n      >\n        {(\n          [\n            [\"elementX\", `${Math.round(elementX$.get())}px`],\n            [\"elementY\", `${Math.round(elementY$.get())}px`],\n            [\"isOutside\", String(isOutside$.get())],\n            [\"width\", `${Math.round(elementWidth$.get())}px`],\n            [\"height\", `${Math.round(elementHeight$.get())}px`],\n            [\"x (global)\", `${Math.round(x$.get())}px`],\n          ] as [string, string][]\n        ).map(([label, val]) => (\n          <span key={label}>\n            {label}: <strong>{val}</strong>\n          </span>\n        ))}\n      </div>\n\n      {/* Hover target with tracking dot */}\n      <div\n        ref={el$}\n        style={{\n          position: \"relative\",\n          width: \"100%\",\n          height: \"160px\",\n          border: \"1px solid var(--sl-color-gray-5, #cbd5e1)\",\n          borderRadius: \"6px\",\n          overflow: \"hidden\",\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          userSelect: \"none\",\n          fontFamily: \"monospace\",\n          fontSize: \"13px\",\n          color: \"var(--sl-color-gray-3, #94a3b8)\",\n          cursor: \"crosshair\",\n        }}\n      >\n        move your mouse here\n        <div\n          style={{\n            position: \"absolute\",\n            left: elementX$.get(),\n            top: elementY$.get(),\n            width: \"10px\",\n            height: \"10px\",\n            borderRadius: \"50%\",\n            background: \"var(--sl-color-accent, #818cf8)\",\n            transform: \"translate(-50%, -50%)\",\n            pointerEvents: \"none\",\n            opacity: isOutside$.get() ? 0 : 1,\n            transition: \"opacity 0.15s\",\n          }}\n        />\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAiCU;AAjCV,oBAAwB;AACxB,eAAkC;AAEnB,SAAR,wBAAyC;AAC9C,QAAM,UAAM,uBAAwB;AACpC,QAAM,EAAE,WAAW,WAAW,YAAY,eAAe,gBAAgB,IAAI,IAAI,IAAI,QACnF,4BAAkB,GAAG;AAEvB,SACE,6CAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,OAAO,GAElE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,UACL,SAAS;AAAA,UACT,qBAAqB;AAAA,UACrB,KAAK;AAAA,UACL,YAAY;AAAA,UACZ,UAAU;AAAA,UACV,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,cAAc;AAAA,QAChB;AAAA,QAGE;AAAA,UACE,CAAC,YAAY,GAAG,KAAK,MAAM,UAAU,IAAI,CAAC,CAAC,IAAI;AAAA,UAC/C,CAAC,YAAY,GAAG,KAAK,MAAM,UAAU,IAAI,CAAC,CAAC,IAAI;AAAA,UAC/C,CAAC,aAAa,OAAO,WAAW,IAAI,CAAC,CAAC;AAAA,UACtC,CAAC,SAAS,GAAG,KAAK,MAAM,cAAc,IAAI,CAAC,CAAC,IAAI;AAAA,UAChD,CAAC,UAAU,GAAG,KAAK,MAAM,eAAe,IAAI,CAAC,CAAC,IAAI;AAAA,UAClD,CAAC,cAAc,GAAG,KAAK,MAAM,GAAG,IAAI,CAAC,CAAC,IAAI;AAAA,QAC5C,EACA,IAAI,CAAC,CAAC,OAAO,GAAG,MAChB,6CAAC,UACE;AAAA;AAAA,UAAM;AAAA,UAAE,4CAAC,YAAQ,eAAI;AAAA,aADb,KAEX,CACD;AAAA;AAAA,IACH;AAAA,IAGA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,OAAO;AAAA,UACL,UAAU;AAAA,UACV,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,QAAQ;AAAA,UACR,cAAc;AAAA,UACd,UAAU;AAAA,UACV,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,gBAAgB;AAAA,UAChB,YAAY;AAAA,UACZ,YAAY;AAAA,UACZ,UAAU;AAAA,UACV,OAAO;AAAA,UACP,QAAQ;AAAA,QACV;AAAA,QACD;AAAA;AAAA,UAEC;AAAA,YAAC;AAAA;AAAA,cACC,OAAO;AAAA,gBACL,UAAU;AAAA,gBACV,MAAM,UAAU,IAAI;AAAA,gBACpB,KAAK,UAAU,IAAI;AAAA,gBACnB,OAAO;AAAA,gBACP,QAAQ;AAAA,gBACR,cAAc;AAAA,gBACd,YAAY;AAAA,gBACZ,WAAW;AAAA,gBACX,eAAe;AAAA,gBACf,SAAS,WAAW,IAAI,IAAI,IAAI;AAAA,gBAChC,YAAY;AAAA,cACd;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/elements/useMouseInElement/demo.mjs

@@ -0,0 +1,83 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef$ } from "../useRef$";
+import { useMouseInElement } from ".";
+function UseMouseInElementDemo() {
+  const el$ = useRef$();
+  const { elementX$, elementY$, isOutside$, elementWidth$, elementHeight$, x$, y$: _y$ } = useMouseInElement(el$);
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "12px" }, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gridTemplateColumns: "repeat(3, 1fr)",
+          gap: "6px",
+          fontFamily: "monospace",
+          fontSize: "13px",
+          padding: "10px 14px",
+          background: "var(--sl-color-gray-6, #f1f5f9)",
+          borderRadius: "6px"
+        },
+        children: [
+          ["elementX", `${Math.round(elementX$.get())}px`],
+          ["elementY", `${Math.round(elementY$.get())}px`],
+          ["isOutside", String(isOutside$.get())],
+          ["width", `${Math.round(elementWidth$.get())}px`],
+          ["height", `${Math.round(elementHeight$.get())}px`],
+          ["x (global)", `${Math.round(x$.get())}px`]
+        ].map(([label, val]) => /* @__PURE__ */ jsxs("span", { children: [
+          label,
+          ": ",
+          /* @__PURE__ */ jsx("strong", { children: val })
+        ] }, label))
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: el$,
+        style: {
+          position: "relative",
+          width: "100%",
+          height: "160px",
+          border: "1px solid var(--sl-color-gray-5, #cbd5e1)",
+          borderRadius: "6px",
+          overflow: "hidden",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          userSelect: "none",
+          fontFamily: "monospace",
+          fontSize: "13px",
+          color: "var(--sl-color-gray-3, #94a3b8)",
+          cursor: "crosshair"
+        },
+        children: [
+          "move your mouse here",
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                left: elementX$.get(),
+                top: elementY$.get(),
+                width: "10px",
+                height: "10px",
+                borderRadius: "50%",
+                background: "var(--sl-color-accent, #818cf8)",
+                transform: "translate(-50%, -50%)",
+                pointerEvents: "none",
+                opacity: isOutside$.get() ? 0 : 1,
+                transition: "opacity 0.15s"
+              }
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+export {
+  UseMouseInElementDemo as default
+};
+//# sourceMappingURL=demo.mjs.map

package/dist/elements/useMouseInElement/demo.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/useMouseInElement/demo.tsx"],"sourcesContent":["import { useRef$ } from \"../useRef$\";\nimport { useMouseInElement } from \".\";\n\nexport default function UseMouseInElementDemo() {\n  const el$ = useRef$<HTMLDivElement>();\n  const { elementX$, elementY$, isOutside$, elementWidth$, elementHeight$, x$, y$: _y$ } =\n    useMouseInElement(el$);\n\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"12px\" }}>\n      {/* Stats readout */}\n      <div\n        style={{\n          display: \"grid\",\n          gridTemplateColumns: \"repeat(3, 1fr)\",\n          gap: \"6px\",\n          fontFamily: \"monospace\",\n          fontSize: \"13px\",\n          padding: \"10px 14px\",\n          background: \"var(--sl-color-gray-6, #f1f5f9)\",\n          borderRadius: \"6px\",\n        }}\n      >\n        {(\n          [\n            [\"elementX\", `${Math.round(elementX$.get())}px`],\n            [\"elementY\", `${Math.round(elementY$.get())}px`],\n            [\"isOutside\", String(isOutside$.get())],\n            [\"width\", `${Math.round(elementWidth$.get())}px`],\n            [\"height\", `${Math.round(elementHeight$.get())}px`],\n            [\"x (global)\", `${Math.round(x$.get())}px`],\n          ] as [string, string][]\n        ).map(([label, val]) => (\n          <span key={label}>\n            {label}: <strong>{val}</strong>\n          </span>\n        ))}\n      </div>\n\n      {/* Hover target with tracking dot */}\n      <div\n        ref={el$}\n        style={{\n          position: \"relative\",\n          width: \"100%\",\n          height: \"160px\",\n          border: \"1px solid var(--sl-color-gray-5, #cbd5e1)\",\n          borderRadius: \"6px\",\n          overflow: \"hidden\",\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          userSelect: \"none\",\n          fontFamily: \"monospace\",\n          fontSize: \"13px\",\n          color: \"var(--sl-color-gray-3, #94a3b8)\",\n          cursor: \"crosshair\",\n        }}\n      >\n        move your mouse here\n        <div\n          style={{\n            position: \"absolute\",\n            left: elementX$.get(),\n            top: elementY$.get(),\n            width: \"10px\",\n            height: \"10px\",\n            borderRadius: \"50%\",\n            background: \"var(--sl-color-accent, #818cf8)\",\n            transform: \"translate(-50%, -50%)\",\n            pointerEvents: \"none\",\n            opacity: isOutside$.get() ? 0 : 1,\n            transition: \"opacity 0.15s\",\n          }}\n        />\n      </div>\n    </div>\n  );\n}\n"],"mappings":"AAiCU,SACW,KADX;AAjCV,SAAS,eAAe;AACxB,SAAS,yBAAyB;AAEnB,SAAR,wBAAyC;AAC9C,QAAM,MAAM,QAAwB;AACpC,QAAM,EAAE,WAAW,WAAW,YAAY,eAAe,gBAAgB,IAAI,IAAI,IAAI,IACnF,kBAAkB,GAAG;AAEvB,SACE,qBAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,OAAO,GAElE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,UACL,SAAS;AAAA,UACT,qBAAqB;AAAA,UACrB,KAAK;AAAA,UACL,YAAY;AAAA,UACZ,UAAU;AAAA,UACV,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,cAAc;AAAA,QAChB;AAAA,QAGE;AAAA,UACE,CAAC,YAAY,GAAG,KAAK,MAAM,UAAU,IAAI,CAAC,CAAC,IAAI;AAAA,UAC/C,CAAC,YAAY,GAAG,KAAK,MAAM,UAAU,IAAI,CAAC,CAAC,IAAI;AAAA,UAC/C,CAAC,aAAa,OAAO,WAAW,IAAI,CAAC,CAAC;AAAA,UACtC,CAAC,SAAS,GAAG,KAAK,MAAM,cAAc,IAAI,CAAC,CAAC,IAAI;AAAA,UAChD,CAAC,UAAU,GAAG,KAAK,MAAM,eAAe,IAAI,CAAC,CAAC,IAAI;AAAA,UAClD,CAAC,cAAc,GAAG,KAAK,MAAM,GAAG,IAAI,CAAC,CAAC,IAAI;AAAA,QAC5C,EACA,IAAI,CAAC,CAAC,OAAO,GAAG,MAChB,qBAAC,UACE;AAAA;AAAA,UAAM;AAAA,UAAE,oBAAC,YAAQ,eAAI;AAAA,aADb,KAEX,CACD;AAAA;AAAA,IACH;AAAA,IAGA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,OAAO;AAAA,UACL,UAAU;AAAA,UACV,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,QAAQ;AAAA,UACR,cAAc;AAAA,UACd,UAAU;AAAA,UACV,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,gBAAgB;AAAA,UAChB,YAAY;AAAA,UACZ,YAAY;AAAA,UACZ,UAAU;AAAA,UACV,OAAO;AAAA,UACP,QAAQ;AAAA,QACV;AAAA,QACD;AAAA;AAAA,UAEC;AAAA,YAAC;AAAA;AAAA,cACC,OAAO;AAAA,gBACL,UAAU;AAAA,gBACV,MAAM,UAAU,IAAI;AAAA,gBACpB,KAAK,UAAU,IAAI;AAAA,gBACnB,OAAO;AAAA,gBACP,QAAQ;AAAA,gBACR,cAAc;AAAA,gBACd,YAAY;AAAA,gBACZ,WAAW;AAAA,gBACX,eAAe;AAAA,gBACf,SAAS,WAAW,IAAI,IAAI,IAAI;AAAA,gBAChC,YAAY;AAAA,cACd;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/elements/useMouseInElement/index.d.mts

@@ -0,0 +1,56 @@
+import { Observable } from '@legendapp/state';
+import { DeepMaybeObservable } from '../../types.mjs';
+import { MaybeElement } from '../useRef_/index.mjs';
+import 'react';
+
+interface UseMouseInElementOptions {
+    /** Also update elementX/Y when mouse is outside the element. Default: true */
+    handleOutside?: boolean;
+    /** Re-calculate on window scroll. Default: true */
+    windowScroll?: boolean;
+    /** Re-calculate on window resize. Default: true */
+    windowResize?: boolean;
+}
+interface UseMouseInElementReturn {
+    /** Mouse X position relative to the element */
+    elementX$: Observable<number>;
+    /** Mouse Y position relative to the element */
+    elementY$: Observable<number>;
+    /** Element's absolute X position on the page */
+    elementPositionX$: Observable<number>;
+    /** Element's absolute Y position on the page */
+    elementPositionY$: Observable<number>;
+    /** Element width */
+    elementWidth$: Observable<number>;
+    /** Element height */
+    elementHeight$: Observable<number>;
+    /** Whether the mouse is outside the element */
+    isOutside$: Observable<boolean>;
+    /** Global mouse X (clientX) */
+    x$: Observable<number>;
+    /** Global mouse Y (clientY) */
+    y$: Observable<number>;
+    /** Stop all observers and event listeners */
+    stop: () => void;
+}
+/**
+ * Tracks whether the mouse cursor is inside a DOM element and calculates
+ * the cursor position relative to that element.
+ *
+ * Observes mousemove, document mouseleave, ResizeObserver, MutationObserver
+ * (style/class changes), window scroll, and resize.
+ *
+ * @param target - Element to observe: Ref$, Observable<OpaqueObject<Element>|null>, Document, Window, or null
+ * @param options - Configuration options
+ * @returns Reactive mouse position values relative to the element, plus a manual `stop()` function
+ *
+ * @example
+ * ```tsx
+ * const el$ = useRef$<HTMLDivElement>();
+ * const { elementX$, elementY$, isOutside$ } = useMouseInElement(el$);
+ * return <div ref={el$} />;
+ * ```
+ */
+declare function useMouseInElement(target: MaybeElement, options?: DeepMaybeObservable<UseMouseInElementOptions>): UseMouseInElementReturn;
+
+export { type UseMouseInElementOptions, type UseMouseInElementReturn, useMouseInElement };

package/dist/elements/useMouseInElement/index.d.ts

@@ -0,0 +1,56 @@
+import { Observable } from '@legendapp/state';
+import { DeepMaybeObservable } from '../../types.js';
+import { MaybeElement } from '../useRef_/index.js';
+import 'react';
+
+interface UseMouseInElementOptions {
+    /** Also update elementX/Y when mouse is outside the element. Default: true */
+    handleOutside?: boolean;
+    /** Re-calculate on window scroll. Default: true */
+    windowScroll?: boolean;
+    /** Re-calculate on window resize. Default: true */
+    windowResize?: boolean;
+}
+interface UseMouseInElementReturn {
+    /** Mouse X position relative to the element */
+    elementX$: Observable<number>;
+    /** Mouse Y position relative to the element */
+    elementY$: Observable<number>;
+    /** Element's absolute X position on the page */
+    elementPositionX$: Observable<number>;
+    /** Element's absolute Y position on the page */
+    elementPositionY$: Observable<number>;
+    /** Element width */
+    elementWidth$: Observable<number>;
+    /** Element height */
+    elementHeight$: Observable<number>;
+    /** Whether the mouse is outside the element */
+    isOutside$: Observable<boolean>;
+    /** Global mouse X (clientX) */
+    x$: Observable<number>;
+    /** Global mouse Y (clientY) */
+    y$: Observable<number>;
+    /** Stop all observers and event listeners */
+    stop: () => void;
+}
+/**
+ * Tracks whether the mouse cursor is inside a DOM element and calculates
+ * the cursor position relative to that element.
+ *
+ * Observes mousemove, document mouseleave, ResizeObserver, MutationObserver
+ * (style/class changes), window scroll, and resize.
+ *
+ * @param target - Element to observe: Ref$, Observable<OpaqueObject<Element>|null>, Document, Window, or null
+ * @param options - Configuration options
+ * @returns Reactive mouse position values relative to the element, plus a manual `stop()` function
+ *
+ * @example
+ * ```tsx
+ * const el$ = useRef$<HTMLDivElement>();
+ * const { elementX$, elementY$, isOutside$ } = useMouseInElement(el$);
+ * return <div ref={el$} />;
+ * ```
+ */
+declare function useMouseInElement(target: MaybeElement, options?: DeepMaybeObservable<UseMouseInElementOptions>): UseMouseInElementReturn;
+
+export { type UseMouseInElementOptions, type UseMouseInElementReturn, useMouseInElement };