@usels/core 0.0.1-beta.3

package/dist/index.d.ts

@@ -0,0 +1,24 @@
+export { AnyFn, Arrayable, Awaitable, DeepMaybeObservable, Fn, MaybeObservable, Pausable, Stoppable, TimerHandle } from './types.js';
+export { get } from './function/get/index.js';
+export { peek } from './function/peek/index.js';
+export { UseSupportedReturn, useSupported } from './function/useSupported/index.js';
+export { UseWhenMountedReturn, useWhenMounted } from './function/useWhenMounted/index.js';
+export { MaybeElement, Ref$, getElement, isRef$, peekElement, useRef$ } from './elements/useRef_/index.js';
+export { UseResizeObserverOptions, UseResizeObserverReturn, useResizeObserver } from './elements/useResizeObserver/index.js';
+export { UseElementSizeOptions, UseElementSizeReturn, useElementSize } from './elements/useElementSize/index.js';
+export { UseElementBoundingOptions, UseElementBoundingReturn, useElementBounding } from './elements/useElementBounding/index.js';
+export { UseMutationObserverOptions, UseMutationObserverReturn, useMutationObserver } from './elements/useMutationObserver/index.js';
+export { UseIntersectionObserverOptions, UseIntersectionObserverReturn, useIntersectionObserver } from './elements/useIntersectionObserver/index.js';
+export { UseElementVisibilityOptions, useElementVisibility } from './elements/useElementVisibility/index.js';
+export { useDocumentVisibility } from './elements/useDocumentVisibility/index.js';
+export { useWindowFocus } from './elements/useWindowFocus/index.js';
+export { UseWindowSizeOptions, UseWindowSizeReturn, useWindowSize } from './elements/useWindowSize/index.js';
+export { useParentElement } from './elements/useParentElement/index.js';
+export { UseMouseInElementOptions, UseMouseInElementReturn, useMouseInElement } from './elements/useMouseInElement/index.js';
+export { ArrivedState, ScrollDirections, UseScrollOptions, UseScrollReturn, useScroll } from './sensors/useScroll/index.js';
+export { useWindowScroll } from './sensors/useWindowScroll/index.js';
+export { GeneralEventListener, useEventListener } from './browser/useEventListener/index.js';
+export { UseMediaQueryOptions, UseMediaQueryReturn, evaluateSSRQuery, useMediaQuery } from './browser/useMediaQuery/index.js';
+export { normalizeTargets } from './shared/normalizeTargets/index.js';
+import '@legendapp/state';
+import 'react';

package/dist/index.js

@@ -0,0 +1,63 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var index_exports = {};
+module.exports = __toCommonJS(index_exports);
+__reExport(index_exports, require("./types"), module.exports);
+__reExport(index_exports, require("./function/get"), module.exports);
+__reExport(index_exports, require("./function/peek"), module.exports);
+__reExport(index_exports, require("./function/useSupported"), module.exports);
+__reExport(index_exports, require("./function/useWhenMounted"), module.exports);
+__reExport(index_exports, require("./elements/useRef$"), module.exports);
+__reExport(index_exports, require("./elements/useResizeObserver"), module.exports);
+__reExport(index_exports, require("./elements/useElementSize"), module.exports);
+__reExport(index_exports, require("./elements/useElementBounding"), module.exports);
+__reExport(index_exports, require("./elements/useMutationObserver"), module.exports);
+__reExport(index_exports, require("./elements/useIntersectionObserver"), module.exports);
+__reExport(index_exports, require("./elements/useElementVisibility"), module.exports);
+__reExport(index_exports, require("./elements/useDocumentVisibility"), module.exports);
+__reExport(index_exports, require("./elements/useWindowFocus"), module.exports);
+__reExport(index_exports, require("./elements/useWindowSize"), module.exports);
+__reExport(index_exports, require("./elements/useParentElement"), module.exports);
+__reExport(index_exports, require("./elements/useMouseInElement"), module.exports);
+__reExport(index_exports, require("./sensors/useScroll"), module.exports);
+__reExport(index_exports, require("./sensors/useWindowScroll"), module.exports);
+__reExport(index_exports, require("./browser/useEventListener"), module.exports);
+__reExport(index_exports, require("./browser/useMediaQuery"), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ...require("./types"),
+  ...require("./function/get"),
+  ...require("./function/peek"),
+  ...require("./function/useSupported"),
+  ...require("./function/useWhenMounted"),
+  ...require("./elements/useRef$"),
+  ...require("./elements/useResizeObserver"),
+  ...require("./elements/useElementSize"),
+  ...require("./elements/useElementBounding"),
+  ...require("./elements/useMutationObserver"),
+  ...require("./elements/useIntersectionObserver"),
+  ...require("./elements/useElementVisibility"),
+  ...require("./elements/useDocumentVisibility"),
+  ...require("./elements/useWindowFocus"),
+  ...require("./elements/useWindowSize"),
+  ...require("./elements/useParentElement"),
+  ...require("./elements/useMouseInElement"),
+  ...require("./sensors/useScroll"),
+  ...require("./sensors/useWindowScroll"),
+  ...require("./browser/useEventListener"),
+  ...require("./browser/useMediaQuery")
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export * from \"./types\";\n\nexport * from \"./function/get\";\nexport * from \"./function/peek\";\nexport * from \"./function/useSupported\";\nexport * from \"./function/useWhenMounted\";\n\nexport * from \"./elements/useRef$\";\nexport * from \"./elements/useResizeObserver\";\nexport * from \"./elements/useElementSize\";\nexport * from \"./elements/useElementBounding\";\nexport * from \"./elements/useMutationObserver\";\nexport * from \"./elements/useIntersectionObserver\";\nexport * from \"./elements/useElementVisibility\";\nexport * from \"./elements/useDocumentVisibility\";\nexport * from \"./elements/useWindowFocus\";\nexport * from \"./elements/useWindowSize\";\nexport * from \"./elements/useParentElement\";\nexport * from \"./elements/useMouseInElement\";\n\nexport * from \"./sensors/useScroll\";\nexport * from \"./sensors/useWindowScroll\";\n\nexport * from \"./browser/useEventListener\";\nexport * from \"./browser/useMediaQuery\";\n"],"mappings":";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,0BAAc,oBAAd;AAEA,0BAAc,2BAFd;AAGA,0BAAc,4BAHd;AAIA,0BAAc,oCAJd;AAKA,0BAAc,sCALd;AAOA,0BAAc,+BAPd;AAQA,0BAAc,yCARd;AASA,0BAAc,sCATd;AAUA,0BAAc,0CAVd;AAWA,0BAAc,2CAXd;AAYA,0BAAc,+CAZd;AAaA,0BAAc,4CAbd;AAcA,0BAAc,6CAdd;AAeA,0BAAc,sCAfd;AAgBA,0BAAc,qCAhBd;AAiBA,0BAAc,wCAjBd;AAkBA,0BAAc,yCAlBd;AAoBA,0BAAc,gCApBd;AAqBA,0BAAc,sCArBd;AAuBA,0BAAc,uCAvBd;AAwBA,0BAAc,oCAxBd;","names":[]}

package/dist/index.mjs

@@ -0,0 +1,22 @@
+export * from "./types";
+export * from "./function/get";
+export * from "./function/peek";
+export * from "./function/useSupported";
+export * from "./function/useWhenMounted";
+export * from "./elements/useRef$";
+export * from "./elements/useResizeObserver";
+export * from "./elements/useElementSize";
+export * from "./elements/useElementBounding";
+export * from "./elements/useMutationObserver";
+export * from "./elements/useIntersectionObserver";
+export * from "./elements/useElementVisibility";
+export * from "./elements/useDocumentVisibility";
+export * from "./elements/useWindowFocus";
+export * from "./elements/useWindowSize";
+export * from "./elements/useParentElement";
+export * from "./elements/useMouseInElement";
+export * from "./sensors/useScroll";
+export * from "./sensors/useWindowScroll";
+export * from "./browser/useEventListener";
+export * from "./browser/useMediaQuery";
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export * from \"./types\";\n\nexport * from \"./function/get\";\nexport * from \"./function/peek\";\nexport * from \"./function/useSupported\";\nexport * from \"./function/useWhenMounted\";\n\nexport * from \"./elements/useRef$\";\nexport * from \"./elements/useResizeObserver\";\nexport * from \"./elements/useElementSize\";\nexport * from \"./elements/useElementBounding\";\nexport * from \"./elements/useMutationObserver\";\nexport * from \"./elements/useIntersectionObserver\";\nexport * from \"./elements/useElementVisibility\";\nexport * from \"./elements/useDocumentVisibility\";\nexport * from \"./elements/useWindowFocus\";\nexport * from \"./elements/useWindowSize\";\nexport * from \"./elements/useParentElement\";\nexport * from \"./elements/useMouseInElement\";\n\nexport * from \"./sensors/useScroll\";\nexport * from \"./sensors/useWindowScroll\";\n\nexport * from \"./browser/useEventListener\";\nexport * from \"./browser/useMediaQuery\";\n"],"mappings":"AAAA,cAAc;AAEd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAEd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAEd,cAAc;AACd,cAAc;AAEd,cAAc;AACd,cAAc;","names":[]}

package/dist/sensors/useScroll/demo.d.mts

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

package/dist/sensors/useScroll/demo.d.ts

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

package/dist/sensors/useScroll/demo.js

@@ -0,0 +1,121 @@
+"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: () => UseScrollDemo
+});
+module.exports = __toCommonJS(demo_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_useRef = require("../../elements/useRef$");
+var import__ = require(".");
+const badge = (active) => ({
+  display: "inline-flex",
+  alignItems: "center",
+  padding: "2px 8px",
+  borderRadius: "4px",
+  fontSize: "12px",
+  fontFamily: "monospace",
+  background: active ? "var(--sl-color-green-low, #f0fdf4)" : "var(--sl-color-gray-5, #f1f5f9)",
+  color: active ? "var(--sl-color-green, #16a34a)" : "var(--sl-color-gray-3, #64748b)",
+  border: `1px solid ${active ? "var(--sl-color-green, #22c55e)" : "var(--sl-color-gray-4, #e2e8f0)"}`,
+  transition: "all 0.15s"
+});
+function UseScrollDemo() {
+  const el$ = (0, import_useRef.useRef$)();
+  const { x$, y$, isScrolling$, arrivedState$, directions$ } = (0, import__.useScroll)(el$);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "10px" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        style: {
+          display: "flex",
+          flexWrap: "wrap",
+          gap: "8px",
+          padding: "8px 12px",
+          borderRadius: "6px",
+          border: "1px solid var(--sl-color-gray-5, #e2e8f0)",
+          background: "var(--sl-color-gray-6, #f8fafc)",
+          fontFamily: "monospace",
+          fontSize: "13px"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+            "x: ",
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: x$.get() })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+            "y: ",
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: y$.get() })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: badge(isScrolling$.get()), children: isScrolling$.get() ? "scrolling" : "idle" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: badge(arrivedState$.top.get()), children: "top" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: badge(arrivedState$.bottom.get()), children: "bottom" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: { color: "var(--sl-color-gray-3, #94a3b8)" }, children: [
+            directions$.top.get() && "\u2191",
+            directions$.bottom.get() && "\u2193",
+            directions$.left.get() && "\u2190",
+            directions$.right.get() && "\u2192"
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        ref: el$,
+        style: {
+          height: "200px",
+          overflowY: "auto",
+          borderRadius: "6px",
+          border: "1px solid var(--sl-color-gray-5, #e2e8f0)",
+          background: "var(--sl-color-gray-7, #fff)"
+        },
+        children: Array.from({ length: 20 }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "div",
+          {
+            style: {
+              padding: "8px 14px",
+              borderBottom: "1px solid var(--sl-color-gray-6, #f1f5f9)",
+              fontSize: "13px",
+              color: "var(--sl-color-gray-2, #475569)",
+              fontFamily: "monospace"
+            },
+            children: [
+              "Item ",
+              i + 1
+            ]
+          },
+          i
+        ))
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "p",
+      {
+        style: {
+          margin: 0,
+          fontSize: "11px",
+          color: "var(--sl-color-gray-3, #94a3b8)"
+        },
+        children: "Scroll inside the box to see x, y, arrivedState, and directions update."
+      }
+    )
+  ] });
+}
+//# sourceMappingURL=demo.js.map

package/dist/sensors/useScroll/demo.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/sensors/useScroll/demo.tsx"],"sourcesContent":["import { useRef$ } from \"../../elements/useRef$\";\nimport { useScroll } from \".\";\n\nconst badge = (active: boolean): React.CSSProperties => ({\n  display: \"inline-flex\",\n  alignItems: \"center\",\n  padding: \"2px 8px\",\n  borderRadius: \"4px\",\n  fontSize: \"12px\",\n  fontFamily: \"monospace\",\n  background: active\n    ? \"var(--sl-color-green-low, #f0fdf4)\"\n    : \"var(--sl-color-gray-5, #f1f5f9)\",\n  color: active\n    ? \"var(--sl-color-green, #16a34a)\"\n    : \"var(--sl-color-gray-3, #64748b)\",\n  border: `1px solid ${active ? \"var(--sl-color-green, #22c55e)\" : \"var(--sl-color-gray-4, #e2e8f0)\"}`,\n  transition: \"all 0.15s\",\n});\n\nexport default function UseScrollDemo() {\n  const el$ = useRef$<HTMLDivElement>();\n  const { x$, y$, isScrolling$, arrivedState$, directions$ } = useScroll(el$);\n\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"10px\" }}>\n      {/* Stats */}\n      <div\n        style={{\n          display: \"flex\",\n          flexWrap: \"wrap\",\n          gap: \"8px\",\n          padding: \"8px 12px\",\n          borderRadius: \"6px\",\n          border: \"1px solid var(--sl-color-gray-5, #e2e8f0)\",\n          background: \"var(--sl-color-gray-6, #f8fafc)\",\n          fontFamily: \"monospace\",\n          fontSize: \"13px\",\n        }}\n      >\n        <span>\n          x: <strong>{x$.get()}</strong>\n        </span>\n        <span>\n          y: <strong>{y$.get()}</strong>\n        </span>\n        <span style={badge(isScrolling$.get())}>\n          {isScrolling$.get() ? \"scrolling\" : \"idle\"}\n        </span>\n        <span style={badge(arrivedState$.top.get())}>top</span>\n        <span style={badge(arrivedState$.bottom.get())}>bottom</span>\n        <span style={{ color: \"var(--sl-color-gray-3, #94a3b8)\" }}>\n          {directions$.top.get() && \"↑\"}\n          {directions$.bottom.get() && \"↓\"}\n          {directions$.left.get() && \"←\"}\n          {directions$.right.get() && \"→\"}\n        </span>\n      </div>\n\n      {/* Scrollable container */}\n      <div\n        ref={el$}\n        style={{\n          height: \"200px\",\n          overflowY: \"auto\",\n          borderRadius: \"6px\",\n          border: \"1px solid var(--sl-color-gray-5, #e2e8f0)\",\n          background: \"var(--sl-color-gray-7, #fff)\",\n        }}\n      >\n        {Array.from({ length: 20 }, (_, i) => (\n          <div\n            key={i}\n            style={{\n              padding: \"8px 14px\",\n              borderBottom: \"1px solid var(--sl-color-gray-6, #f1f5f9)\",\n              fontSize: \"13px\",\n              color: \"var(--sl-color-gray-2, #475569)\",\n              fontFamily: \"monospace\",\n            }}\n          >\n            Item {i + 1}\n          </div>\n        ))}\n      </div>\n\n      <p\n        style={{\n          margin: 0,\n          fontSize: \"11px\",\n          color: \"var(--sl-color-gray-3, #94a3b8)\",\n        }}\n      >\n        Scroll inside the box to see x, y, arrivedState, and directions update.\n      </p>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAwCQ;AAxCR,oBAAwB;AACxB,eAA0B;AAE1B,MAAM,QAAQ,CAAC,YAA0C;AAAA,EACvD,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,cAAc;AAAA,EACd,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,YAAY,SACR,uCACA;AAAA,EACJ,OAAO,SACH,mCACA;AAAA,EACJ,QAAQ,aAAa,SAAS,mCAAmC,iCAAiC;AAAA,EAClG,YAAY;AACd;AAEe,SAAR,gBAAiC;AACtC,QAAM,UAAM,uBAAwB;AACpC,QAAM,EAAE,IAAI,IAAI,cAAc,eAAe,YAAY,QAAI,oBAAU,GAAG;AAE1E,SACE,6CAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,OAAO,GAElE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,UACL,SAAS;AAAA,UACT,UAAU;AAAA,UACV,KAAK;AAAA,UACL,SAAS;AAAA,UACT,cAAc;AAAA,UACd,QAAQ;AAAA,UACR,YAAY;AAAA,UACZ,YAAY;AAAA,UACZ,UAAU;AAAA,QACZ;AAAA,QAEA;AAAA,uDAAC,UAAK;AAAA;AAAA,YACD,4CAAC,YAAQ,aAAG,IAAI,GAAE;AAAA,aACvB;AAAA,UACA,6CAAC,UAAK;AAAA;AAAA,YACD,4CAAC,YAAQ,aAAG,IAAI,GAAE;AAAA,aACvB;AAAA,UACA,4CAAC,UAAK,OAAO,MAAM,aAAa,IAAI,CAAC,GAClC,uBAAa,IAAI,IAAI,cAAc,QACtC;AAAA,UACA,4CAAC,UAAK,OAAO,MAAM,cAAc,IAAI,IAAI,CAAC,GAAG,iBAAG;AAAA,UAChD,4CAAC,UAAK,OAAO,MAAM,cAAc,OAAO,IAAI,CAAC,GAAG,oBAAM;AAAA,UACtD,6CAAC,UAAK,OAAO,EAAE,OAAO,kCAAkC,GACrD;AAAA,wBAAY,IAAI,IAAI,KAAK;AAAA,YACzB,YAAY,OAAO,IAAI,KAAK;AAAA,YAC5B,YAAY,KAAK,IAAI,KAAK;AAAA,YAC1B,YAAY,MAAM,IAAI,KAAK;AAAA,aAC9B;AAAA;AAAA;AAAA,IACF;AAAA,IAGA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,OAAO;AAAA,UACL,QAAQ;AAAA,UACR,WAAW;AAAA,UACX,cAAc;AAAA,UACd,QAAQ;AAAA,UACR,YAAY;AAAA,QACd;AAAA,QAEC,gBAAM,KAAK,EAAE,QAAQ,GAAG,GAAG,CAAC,GAAG,MAC9B;AAAA,UAAC;AAAA;AAAA,YAEC,OAAO;AAAA,cACL,SAAS;AAAA,cACT,cAAc;AAAA,cACd,UAAU;AAAA,cACV,OAAO;AAAA,cACP,YAAY;AAAA,YACd;AAAA,YACD;AAAA;AAAA,cACO,IAAI;AAAA;AAAA;AAAA,UATL;AAAA,QAUP,CACD;AAAA;AAAA,IACH;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,UACL,QAAQ;AAAA,UACR,UAAU;AAAA,UACV,OAAO;AAAA,QACT;AAAA,QACD;AAAA;AAAA,IAED;AAAA,KACF;AAEJ;","names":[]}

package/dist/sensors/useScroll/demo.mjs

@@ -0,0 +1,101 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef$ } from "../../elements/useRef$";
+import { useScroll } from ".";
+const badge = (active) => ({
+  display: "inline-flex",
+  alignItems: "center",
+  padding: "2px 8px",
+  borderRadius: "4px",
+  fontSize: "12px",
+  fontFamily: "monospace",
+  background: active ? "var(--sl-color-green-low, #f0fdf4)" : "var(--sl-color-gray-5, #f1f5f9)",
+  color: active ? "var(--sl-color-green, #16a34a)" : "var(--sl-color-gray-3, #64748b)",
+  border: `1px solid ${active ? "var(--sl-color-green, #22c55e)" : "var(--sl-color-gray-4, #e2e8f0)"}`,
+  transition: "all 0.15s"
+});
+function UseScrollDemo() {
+  const el$ = useRef$();
+  const { x$, y$, isScrolling$, arrivedState$, directions$ } = useScroll(el$);
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "10px" }, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          flexWrap: "wrap",
+          gap: "8px",
+          padding: "8px 12px",
+          borderRadius: "6px",
+          border: "1px solid var(--sl-color-gray-5, #e2e8f0)",
+          background: "var(--sl-color-gray-6, #f8fafc)",
+          fontFamily: "monospace",
+          fontSize: "13px"
+        },
+        children: [
+          /* @__PURE__ */ jsxs("span", { children: [
+            "x: ",
+            /* @__PURE__ */ jsx("strong", { children: x$.get() })
+          ] }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            "y: ",
+            /* @__PURE__ */ jsx("strong", { children: y$.get() })
+          ] }),
+          /* @__PURE__ */ jsx("span", { style: badge(isScrolling$.get()), children: isScrolling$.get() ? "scrolling" : "idle" }),
+          /* @__PURE__ */ jsx("span", { style: badge(arrivedState$.top.get()), children: "top" }),
+          /* @__PURE__ */ jsx("span", { style: badge(arrivedState$.bottom.get()), children: "bottom" }),
+          /* @__PURE__ */ jsxs("span", { style: { color: "var(--sl-color-gray-3, #94a3b8)" }, children: [
+            directions$.top.get() && "\u2191",
+            directions$.bottom.get() && "\u2193",
+            directions$.left.get() && "\u2190",
+            directions$.right.get() && "\u2192"
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: el$,
+        style: {
+          height: "200px",
+          overflowY: "auto",
+          borderRadius: "6px",
+          border: "1px solid var(--sl-color-gray-5, #e2e8f0)",
+          background: "var(--sl-color-gray-7, #fff)"
+        },
+        children: Array.from({ length: 20 }, (_, i) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              padding: "8px 14px",
+              borderBottom: "1px solid var(--sl-color-gray-6, #f1f5f9)",
+              fontSize: "13px",
+              color: "var(--sl-color-gray-2, #475569)",
+              fontFamily: "monospace"
+            },
+            children: [
+              "Item ",
+              i + 1
+            ]
+          },
+          i
+        ))
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "p",
+      {
+        style: {
+          margin: 0,
+          fontSize: "11px",
+          color: "var(--sl-color-gray-3, #94a3b8)"
+        },
+        children: "Scroll inside the box to see x, y, arrivedState, and directions update."
+      }
+    )
+  ] });
+}
+export {
+  UseScrollDemo as default
+};
+//# sourceMappingURL=demo.mjs.map

package/dist/sensors/useScroll/demo.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/sensors/useScroll/demo.tsx"],"sourcesContent":["import { useRef$ } from \"../../elements/useRef$\";\nimport { useScroll } from \".\";\n\nconst badge = (active: boolean): React.CSSProperties => ({\n  display: \"inline-flex\",\n  alignItems: \"center\",\n  padding: \"2px 8px\",\n  borderRadius: \"4px\",\n  fontSize: \"12px\",\n  fontFamily: \"monospace\",\n  background: active\n    ? \"var(--sl-color-green-low, #f0fdf4)\"\n    : \"var(--sl-color-gray-5, #f1f5f9)\",\n  color: active\n    ? \"var(--sl-color-green, #16a34a)\"\n    : \"var(--sl-color-gray-3, #64748b)\",\n  border: `1px solid ${active ? \"var(--sl-color-green, #22c55e)\" : \"var(--sl-color-gray-4, #e2e8f0)\"}`,\n  transition: \"all 0.15s\",\n});\n\nexport default function UseScrollDemo() {\n  const el$ = useRef$<HTMLDivElement>();\n  const { x$, y$, isScrolling$, arrivedState$, directions$ } = useScroll(el$);\n\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"10px\" }}>\n      {/* Stats */}\n      <div\n        style={{\n          display: \"flex\",\n          flexWrap: \"wrap\",\n          gap: \"8px\",\n          padding: \"8px 12px\",\n          borderRadius: \"6px\",\n          border: \"1px solid var(--sl-color-gray-5, #e2e8f0)\",\n          background: \"var(--sl-color-gray-6, #f8fafc)\",\n          fontFamily: \"monospace\",\n          fontSize: \"13px\",\n        }}\n      >\n        <span>\n          x: <strong>{x$.get()}</strong>\n        </span>\n        <span>\n          y: <strong>{y$.get()}</strong>\n        </span>\n        <span style={badge(isScrolling$.get())}>\n          {isScrolling$.get() ? \"scrolling\" : \"idle\"}\n        </span>\n        <span style={badge(arrivedState$.top.get())}>top</span>\n        <span style={badge(arrivedState$.bottom.get())}>bottom</span>\n        <span style={{ color: \"var(--sl-color-gray-3, #94a3b8)\" }}>\n          {directions$.top.get() && \"↑\"}\n          {directions$.bottom.get() && \"↓\"}\n          {directions$.left.get() && \"←\"}\n          {directions$.right.get() && \"→\"}\n        </span>\n      </div>\n\n      {/* Scrollable container */}\n      <div\n        ref={el$}\n        style={{\n          height: \"200px\",\n          overflowY: \"auto\",\n          borderRadius: \"6px\",\n          border: \"1px solid var(--sl-color-gray-5, #e2e8f0)\",\n          background: \"var(--sl-color-gray-7, #fff)\",\n        }}\n      >\n        {Array.from({ length: 20 }, (_, i) => (\n          <div\n            key={i}\n            style={{\n              padding: \"8px 14px\",\n              borderBottom: \"1px solid var(--sl-color-gray-6, #f1f5f9)\",\n              fontSize: \"13px\",\n              color: \"var(--sl-color-gray-2, #475569)\",\n              fontFamily: \"monospace\",\n            }}\n          >\n            Item {i + 1}\n          </div>\n        ))}\n      </div>\n\n      <p\n        style={{\n          margin: 0,\n          fontSize: \"11px\",\n          color: \"var(--sl-color-gray-3, #94a3b8)\",\n        }}\n      >\n        Scroll inside the box to see x, y, arrivedState, and directions update.\n      </p>\n    </div>\n  );\n}\n"],"mappings":"AAwCQ,SACK,KADL;AAxCR,SAAS,eAAe;AACxB,SAAS,iBAAiB;AAE1B,MAAM,QAAQ,CAAC,YAA0C;AAAA,EACvD,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,cAAc;AAAA,EACd,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,YAAY,SACR,uCACA;AAAA,EACJ,OAAO,SACH,mCACA;AAAA,EACJ,QAAQ,aAAa,SAAS,mCAAmC,iCAAiC;AAAA,EAClG,YAAY;AACd;AAEe,SAAR,gBAAiC;AACtC,QAAM,MAAM,QAAwB;AACpC,QAAM,EAAE,IAAI,IAAI,cAAc,eAAe,YAAY,IAAI,UAAU,GAAG;AAE1E,SACE,qBAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,OAAO,GAElE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,UACL,SAAS;AAAA,UACT,UAAU;AAAA,UACV,KAAK;AAAA,UACL,SAAS;AAAA,UACT,cAAc;AAAA,UACd,QAAQ;AAAA,UACR,YAAY;AAAA,UACZ,YAAY;AAAA,UACZ,UAAU;AAAA,QACZ;AAAA,QAEA;AAAA,+BAAC,UAAK;AAAA;AAAA,YACD,oBAAC,YAAQ,aAAG,IAAI,GAAE;AAAA,aACvB;AAAA,UACA,qBAAC,UAAK;AAAA;AAAA,YACD,oBAAC,YAAQ,aAAG,IAAI,GAAE;AAAA,aACvB;AAAA,UACA,oBAAC,UAAK,OAAO,MAAM,aAAa,IAAI,CAAC,GAClC,uBAAa,IAAI,IAAI,cAAc,QACtC;AAAA,UACA,oBAAC,UAAK,OAAO,MAAM,cAAc,IAAI,IAAI,CAAC,GAAG,iBAAG;AAAA,UAChD,oBAAC,UAAK,OAAO,MAAM,cAAc,OAAO,IAAI,CAAC,GAAG,oBAAM;AAAA,UACtD,qBAAC,UAAK,OAAO,EAAE,OAAO,kCAAkC,GACrD;AAAA,wBAAY,IAAI,IAAI,KAAK;AAAA,YACzB,YAAY,OAAO,IAAI,KAAK;AAAA,YAC5B,YAAY,KAAK,IAAI,KAAK;AAAA,YAC1B,YAAY,MAAM,IAAI,KAAK;AAAA,aAC9B;AAAA;AAAA;AAAA,IACF;AAAA,IAGA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,OAAO;AAAA,UACL,QAAQ;AAAA,UACR,WAAW;AAAA,UACX,cAAc;AAAA,UACd,QAAQ;AAAA,UACR,YAAY;AAAA,QACd;AAAA,QAEC,gBAAM,KAAK,EAAE,QAAQ,GAAG,GAAG,CAAC,GAAG,MAC9B;AAAA,UAAC;AAAA;AAAA,YAEC,OAAO;AAAA,cACL,SAAS;AAAA,cACT,cAAc;AAAA,cACd,UAAU;AAAA,cACV,OAAO;AAAA,cACP,YAAY;AAAA,YACd;AAAA,YACD;AAAA;AAAA,cACO,IAAI;AAAA;AAAA;AAAA,UATL;AAAA,QAUP,CACD;AAAA;AAAA,IACH;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,UACL,QAAQ;AAAA,UACR,UAAU;AAAA,UACV,OAAO;AAAA,QACT;AAAA,QACD;AAAA;AAAA,IAED;AAAA,KACF;AAEJ;","names":[]}

package/dist/sensors/useScroll/index.d.mts

@@ -0,0 +1,42 @@
+import { Observable } from '@legendapp/state';
+import { MaybeElement } from '../../elements/useRef_/index.mjs';
+import { MaybeObservable } from '../../types.mjs';
+import 'react';
+
+interface UseScrollOptions {
+    throttle?: number;
+    idle?: number;
+    onStop?: () => void;
+    onError?: (error: unknown) => void;
+    offset?: {
+        left?: number;
+        right?: number;
+        top?: number;
+        bottom?: number;
+    };
+    behavior?: ScrollBehavior;
+    eventListenerOptions?: MaybeObservable<AddEventListenerOptions>;
+}
+interface ArrivedState {
+    left: boolean;
+    right: boolean;
+    top: boolean;
+    bottom: boolean;
+}
+interface ScrollDirections {
+    left: boolean;
+    right: boolean;
+    top: boolean;
+    bottom: boolean;
+}
+interface UseScrollReturn {
+    x$: Observable<number>;
+    y$: Observable<number>;
+    isScrolling$: Observable<boolean>;
+    arrivedState$: Observable<ArrivedState>;
+    directions$: Observable<ScrollDirections>;
+    measure: () => void;
+}
+declare function useScroll(element: MaybeElement, options?: UseScrollOptions): UseScrollReturn;
+
+export { type ArrivedState, type ScrollDirections, type UseScrollOptions, type UseScrollReturn, useScroll };

package/dist/sensors/useScroll/index.d.ts

@@ -0,0 +1,42 @@
+import { Observable } from '@legendapp/state';
+import { MaybeElement } from '../../elements/useRef_/index.js';
+import { MaybeObservable } from '../../types.js';
+import 'react';
+
+interface UseScrollOptions {
+    throttle?: number;
+    idle?: number;
+    onStop?: () => void;
+    onError?: (error: unknown) => void;
+    offset?: {
+        left?: number;
+        right?: number;
+        top?: number;
+        bottom?: number;
+    };
+    behavior?: ScrollBehavior;
+    eventListenerOptions?: MaybeObservable<AddEventListenerOptions>;
+}
+interface ArrivedState {
+    left: boolean;
+    right: boolean;
+    top: boolean;
+    bottom: boolean;
+}
+interface ScrollDirections {
+    left: boolean;
+    right: boolean;
+    top: boolean;
+    bottom: boolean;
+}
+interface UseScrollReturn {
+    x$: Observable<number>;
+    y$: Observable<number>;
+    isScrolling$: Observable<boolean>;
+    arrivedState$: Observable<ArrivedState>;
+    directions$: Observable<ScrollDirections>;
+    measure: () => void;
+}
+declare function useScroll(element: MaybeElement, options?: UseScrollOptions): UseScrollReturn;
+
+export { type ArrivedState, type ScrollDirections, type UseScrollOptions, type UseScrollReturn, useScroll };

package/dist/sensors/useScroll/index.js

@@ -0,0 +1,149 @@
+"use strict";
+"use client";
+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 useScroll_exports = {};
+__export(useScroll_exports, {
+  useScroll: () => useScroll
+});
+module.exports = __toCommonJS(useScroll_exports);
+var import_react = require("@legendapp/state/react");
+var import_react2 = require("react");
+var import_es_toolkit = require("es-toolkit");
+var import_useRef = require("../../elements/useRef$");
+var import_shared = require("../../shared");
+var import_useEventListener = require("../../browser/useEventListener");
+function getScrollValues(el) {
+  if (!el) return { x: 0, y: 0 };
+  if ((0, import_shared.isWindow)(el)) return { x: el.scrollX, y: el.scrollY };
+  if (el instanceof Document)
+    return {
+      x: el.documentElement.scrollLeft,
+      y: el.documentElement.scrollTop
+    };
+  return { x: el.scrollLeft, y: el.scrollTop };
+}
+function getScrollDimensions(el) {
+  if (!el || (0, import_shared.isWindow)(el)) {
+    return {
+      scrollW: document.documentElement.scrollWidth,
+      scrollH: document.documentElement.scrollHeight,
+      clientW: window.innerWidth,
+      clientH: window.innerHeight
+    };
+  }
+  if (el instanceof Document) {
+    const root = el.documentElement;
+    return {
+      scrollW: root.scrollWidth,
+      scrollH: root.scrollHeight,
+      clientW: root.clientWidth,
+      clientH: root.clientHeight
+    };
+  }
+  return {
+    scrollW: el.scrollWidth,
+    scrollH: el.scrollHeight,
+    clientW: el.clientWidth,
+    clientH: el.clientHeight
+  };
+}
+function useScroll(element, options) {
+  const initial = getScrollValues((0, import_useRef.peekElement)(element));
+  const x$ = (0, import_react.useObservable)(initial.x);
+  const y$ = (0, import_react.useObservable)(initial.y);
+  const isScrolling$ = (0, import_react.useObservable)(false);
+  const arrivedState$ = (0, import_react.useObservable)({
+    left: true,
+    right: false,
+    top: true,
+    bottom: false
+  });
+  const directions$ = (0, import_react.useObservable)({
+    left: false,
+    right: false,
+    top: false,
+    bottom: false
+  });
+  const idleTimer = (0, import_react2.useRef)(null);
+  const resetIdle = () => {
+    if (idleTimer.current) clearTimeout(idleTimer.current);
+    isScrolling$.set(true);
+    idleTimer.current = setTimeout(() => {
+      isScrolling$.set(false);
+      options?.onStop?.();
+    }, options?.idle ?? 200);
+  };
+  const measure = () => {
+    const el = (0, import_useRef.peekElement)(element);
+    if (!el) return;
+    const prevX = x$.peek();
+    const prevY = y$.peek();
+    const { x: newX, y: newY } = getScrollValues(el);
+    directions$.assign({
+      left: newX < prevX,
+      right: newX > prevX,
+      top: newY < prevY,
+      bottom: newY > prevY
+    });
+    x$.set(newX);
+    y$.set(newY);
+    const { scrollW, scrollH, clientW, clientH } = getScrollDimensions(el);
+    const maxX = scrollW - clientW;
+    const maxY = scrollH - clientH;
+    const offset = options?.offset ?? {};
+    arrivedState$.assign({
+      left: newX <= (offset.left ?? 0),
+      right: newX >= maxX - (offset.right ?? 0),
+      top: newY <= (offset.top ?? 0),
+      bottom: newY >= maxY - (offset.bottom ?? 0)
+    });
+    resetIdle();
+  };
+  const measureRef = (0, import_react2.useRef)(measure);
+  measureRef.current = measure;
+  const handler = (0, import_react2.useMemo)(() => {
+    const ms = options?.throttle ?? 0;
+    return ms > 0 ? (0, import_es_toolkit.throttle)(() => measureRef.current(), ms) : () => measureRef.current();
+  }, []);
+  (0, import_useEventListener.useEventListener)(
+    element,
+    "scroll",
+    handler,
+    options?.eventListenerOptions ?? { capture: false, passive: true }
+  );
+  (0, import_react.useMount)(() => {
+    measure();
+    return () => {
+      if (idleTimer.current) clearTimeout(idleTimer.current);
+    };
+  });
+  return {
+    x$,
+    y$,
+    isScrolling$,
+    arrivedState$,
+    directions$,
+    measure
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useScroll
+});
+//# sourceMappingURL=index.js.map

package/dist/sensors/useScroll/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/sensors/useScroll/index.ts"],"sourcesContent":["\"use client\";\nimport type { Observable } from \"@legendapp/state\";\nimport { useMount, useObservable } from \"@legendapp/state/react\";\nimport { useMemo, useRef } from \"react\";\nimport { throttle } from \"es-toolkit\";\nimport { type MaybeElement, peekElement } from \"../../elements/useRef$\";\nimport { isWindow } from \"../../shared\";\nimport type { MaybeObservable } from \"../../types\";\nimport { useEventListener } from \"../../browser/useEventListener\";\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\nexport interface UseScrollOptions {\n  throttle?: number;\n  idle?: number;\n  onStop?: () => void;\n  onError?: (error: unknown) => void;\n  offset?: {\n    left?: number;\n    right?: number;\n    top?: number;\n    bottom?: number;\n  };\n  behavior?: ScrollBehavior;\n  eventListenerOptions?: MaybeObservable<AddEventListenerOptions>;\n}\n\nexport interface ArrivedState {\n  left: boolean;\n  right: boolean;\n  top: boolean;\n  bottom: boolean;\n}\n\nexport interface ScrollDirections {\n  left: boolean;\n  right: boolean;\n  top: boolean;\n  bottom: boolean;\n}\n\nexport interface UseScrollReturn {\n  x$: Observable<number>;\n  y$: Observable<number>;\n  isScrolling$: Observable<boolean>;\n  arrivedState$: Observable<ArrivedState>;\n  directions$: Observable<ScrollDirections>;\n  measure: () => void;\n}\n\n// ---------------------------------------------------------------------------\n// Helpers\n// ---------------------------------------------------------------------------\n\nfunction getScrollValues(el: HTMLElement | Document | Window | null): {\n  x: number;\n  y: number;\n} {\n  if (!el) return { x: 0, y: 0 };\n  if (isWindow(el)) return { x: el.scrollX, y: el.scrollY };\n  if (el instanceof Document)\n    return {\n      x: el.documentElement.scrollLeft,\n      y: el.documentElement.scrollTop,\n    };\n  return { x: el.scrollLeft, y: el.scrollTop };\n}\n\nfunction getScrollDimensions(el: HTMLElement | Document | Window | null): {\n  scrollW: number;\n  scrollH: number;\n  clientW: number;\n  clientH: number;\n} {\n  if (!el || isWindow(el)) {\n    return {\n      scrollW: document.documentElement.scrollWidth,\n      scrollH: document.documentElement.scrollHeight,\n      clientW: window.innerWidth,\n      clientH: window.innerHeight,\n    };\n  }\n  if (el instanceof Document) {\n    const root = el.documentElement;\n    return {\n      scrollW: root.scrollWidth,\n      scrollH: root.scrollHeight,\n      clientW: root.clientWidth,\n      clientH: root.clientHeight,\n    };\n  }\n  return {\n    scrollW: el.scrollWidth,\n    scrollH: el.scrollHeight,\n    clientW: el.clientWidth,\n    clientH: el.clientHeight,\n  };\n}\n\n// ---------------------------------------------------------------------------\n// Hook\n// ---------------------------------------------------------------------------\n\nexport function useScroll(\n  element: MaybeElement,\n  options?: UseScrollOptions,\n): UseScrollReturn {\n  const initial = getScrollValues(peekElement(element));\n\n  const x$ = useObservable<number>(initial.x);\n  const y$ = useObservable<number>(initial.y);\n  const isScrolling$ = useObservable<boolean>(false);\n  const arrivedState$ = useObservable<ArrivedState>({\n    left: true,\n    right: false,\n    top: true,\n    bottom: false,\n  });\n  const directions$ = useObservable<ScrollDirections>({\n    left: false,\n    right: false,\n    top: false,\n    bottom: false,\n  });\n\n  const idleTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const resetIdle = () => {\n    if (idleTimer.current) clearTimeout(idleTimer.current);\n    isScrolling$.set(true);\n    idleTimer.current = setTimeout(() => {\n      isScrolling$.set(false);\n      options?.onStop?.();\n    }, options?.idle ?? 200);\n  };\n\n  const measure = () => {\n    const el = peekElement(element);\n    if (!el) return;\n\n    const prevX = x$.peek();\n    const prevY = y$.peek();\n    const { x: newX, y: newY } = getScrollValues(el);\n\n    directions$.assign({\n      left: newX < prevX,\n      right: newX > prevX,\n      top: newY < prevY,\n      bottom: newY > prevY,\n    });\n\n    x$.set(newX);\n    y$.set(newY);\n\n    const { scrollW, scrollH, clientW, clientH } = getScrollDimensions(el);\n    const maxX = scrollW - clientW;\n    const maxY = scrollH - clientH;\n    const offset = options?.offset ?? {};\n\n    arrivedState$.assign({\n      left: newX <= (offset.left ?? 0),\n      right: newX >= maxX - (offset.right ?? 0),\n      top: newY <= (offset.top ?? 0),\n      bottom: newY >= maxY - (offset.bottom ?? 0),\n    });\n\n    resetIdle();\n  };\n\n  const measureRef = useRef(measure);\n  measureRef.current = measure;\n\n  const handler = useMemo(() => {\n    const ms = options?.throttle ?? 0;\n    return ms > 0\n      ? throttle(() => measureRef.current(), ms)\n      : () => measureRef.current();\n  }, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n  useEventListener(element as any, \"scroll\", handler,\n    options?.eventListenerOptions ?? { capture: false, passive: true },\n  );\n\n  useMount(() => {\n    measure();\n    return () => {\n      if (idleTimer.current) clearTimeout(idleTimer.current);\n    };\n  });\n\n  return {\n    x$,\n    y$,\n    isScrolling$,\n    arrivedState$,\n    directions$,\n    measure,\n  };\n}\n"],"mappings":"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","names":["import_react"]}