@usels/core 0.0.1

package/README.md

@@ -0,0 +1,21 @@
+# @usels/core
+
+Utility functions for Legend-State and general TypeScript/JavaScript development.
+
+## Installation
+
+```bash
+npm install @usels/core
+```
+
+## Features
+
+- **Type-safe utilities** - Full TypeScript support with type guards
+- **Observable utilities** - MaybeObservable pattern for flexible value handling
+- **Tree-shakeable** - Only import what you need
+- **Zero dependencies** - Lightweight and fast (Legend-State is a peer dependency)
+- **ESM & CJS** - Support for both module systems
+
+## License
+
+MIT

package/dist/browser/useEventListener/index.d.mts

@@ -0,0 +1,56 @@
+import { Observable } from '@legendapp/state';
+import { MaybeElement } from '../../elements/useRef_/index.mjs';
+import { Arrayable, MaybeObservable } from '../../types.mjs';
+import 'react';
+
+interface GeneralEventListener<E = Event> {
+    (evt: E): void;
+}
+/**
+ * Register using addEventListener on mounted, and removeEventListener
+ * automatically on unmounted.
+ *
+ * Overload 1: Omitted target — defaults to `window`.
+ */
+declare function useEventListener<E extends keyof WindowEventMap>(event: Arrayable<E>, listener: Arrayable<(ev: WindowEventMap[E]) => any>, options?: MaybeObservable<boolean | AddEventListenerOptions>): () => void;
+/**
+ * Register using addEventListener on mounted, and removeEventListener
+ * automatically on unmounted.
+ *
+ * Overload 2: Explicit `Window` target.
+ */
+declare function useEventListener<E extends keyof WindowEventMap>(target: Window, event: Arrayable<E>, listener: Arrayable<(ev: WindowEventMap[E]) => any>, options?: MaybeObservable<boolean | AddEventListenerOptions>): () => void;
+/**
+ * Register using addEventListener on mounted, and removeEventListener
+ * automatically on unmounted.
+ *
+ * Overload 3: Explicit `Document` target.
+ */
+declare function useEventListener<E extends keyof DocumentEventMap>(target: Document, event: Arrayable<E>, listener: Arrayable<(ev: DocumentEventMap[E]) => any>, options?: MaybeObservable<boolean | AddEventListenerOptions>): () => void;
+/**
+ * Register using addEventListener on mounted, and removeEventListener
+ * automatically on unmounted.
+ *
+ * Overload 4: `MaybeElement` target — supports Ref$, Observable<OpaqueObject<Element>>,
+ * Document, Window, or an array of those (Legend-State reactive).
+ * Raw HTMLElement is excluded — use Ref$ or Observable<OpaqueObject<Element>> instead.
+ */
+declare function useEventListener<E extends keyof HTMLElementEventMap>(target: MaybeElement | MaybeElement[] | null | undefined, event: Arrayable<E>, listener: Arrayable<(ev: HTMLElementEventMap[E]) => any>, options?: MaybeObservable<boolean | AddEventListenerOptions>): () => void;
+/**
+ * Register using addEventListener on mounted, and removeEventListener
+ * automatically on unmounted.
+ *
+ * Overload 5: Observable<EventTarget> — reactive target (e.g.
+ * Observable<MediaQueryList>, Ref$<HTMLElement>, etc.).
+ * The observer re-fires whenever the observable value changes.
+ */
+declare function useEventListener<EventType = Event>(target: Observable<any>, event: Arrayable<string>, listener: Arrayable<GeneralEventListener<EventType>>, options?: MaybeObservable<boolean | AddEventListenerOptions>): () => void;
+/**
+ * Register using addEventListener on mounted, and removeEventListener
+ * automatically on unmounted.
+ *
+ * Overload 6: Generic `EventTarget` fallback.
+ */
+declare function useEventListener<EventType = Event>(target: EventTarget | null | undefined, event: Arrayable<string>, listener: Arrayable<GeneralEventListener<EventType>>, options?: MaybeObservable<boolean | AddEventListenerOptions>): () => void;
+
+export { type GeneralEventListener, useEventListener };

package/dist/browser/useEventListener/index.d.ts

@@ -0,0 +1,56 @@
+import { Observable } from '@legendapp/state';
+import { MaybeElement } from '../../elements/useRef_/index.js';
+import { Arrayable, MaybeObservable } from '../../types.js';
+import 'react';
+
+interface GeneralEventListener<E = Event> {
+    (evt: E): void;
+}
+/**
+ * Register using addEventListener on mounted, and removeEventListener
+ * automatically on unmounted.
+ *
+ * Overload 1: Omitted target — defaults to `window`.
+ */
+declare function useEventListener<E extends keyof WindowEventMap>(event: Arrayable<E>, listener: Arrayable<(ev: WindowEventMap[E]) => any>, options?: MaybeObservable<boolean | AddEventListenerOptions>): () => void;
+/**
+ * Register using addEventListener on mounted, and removeEventListener
+ * automatically on unmounted.
+ *
+ * Overload 2: Explicit `Window` target.
+ */
+declare function useEventListener<E extends keyof WindowEventMap>(target: Window, event: Arrayable<E>, listener: Arrayable<(ev: WindowEventMap[E]) => any>, options?: MaybeObservable<boolean | AddEventListenerOptions>): () => void;
+/**
+ * Register using addEventListener on mounted, and removeEventListener
+ * automatically on unmounted.
+ *
+ * Overload 3: Explicit `Document` target.
+ */
+declare function useEventListener<E extends keyof DocumentEventMap>(target: Document, event: Arrayable<E>, listener: Arrayable<(ev: DocumentEventMap[E]) => any>, options?: MaybeObservable<boolean | AddEventListenerOptions>): () => void;
+/**
+ * Register using addEventListener on mounted, and removeEventListener
+ * automatically on unmounted.
+ *
+ * Overload 4: `MaybeElement` target — supports Ref$, Observable<OpaqueObject<Element>>,
+ * Document, Window, or an array of those (Legend-State reactive).
+ * Raw HTMLElement is excluded — use Ref$ or Observable<OpaqueObject<Element>> instead.
+ */
+declare function useEventListener<E extends keyof HTMLElementEventMap>(target: MaybeElement | MaybeElement[] | null | undefined, event: Arrayable<E>, listener: Arrayable<(ev: HTMLElementEventMap[E]) => any>, options?: MaybeObservable<boolean | AddEventListenerOptions>): () => void;
+/**
+ * Register using addEventListener on mounted, and removeEventListener
+ * automatically on unmounted.
+ *
+ * Overload 5: Observable<EventTarget> — reactive target (e.g.
+ * Observable<MediaQueryList>, Ref$<HTMLElement>, etc.).
+ * The observer re-fires whenever the observable value changes.
+ */
+declare function useEventListener<EventType = Event>(target: Observable<any>, event: Arrayable<string>, listener: Arrayable<GeneralEventListener<EventType>>, options?: MaybeObservable<boolean | AddEventListenerOptions>): () => void;
+/**
+ * Register using addEventListener on mounted, and removeEventListener
+ * automatically on unmounted.
+ *
+ * Overload 6: Generic `EventTarget` fallback.
+ */
+declare function useEventListener<EventType = Event>(target: EventTarget | null | undefined, event: Arrayable<string>, listener: Arrayable<GeneralEventListener<EventType>>, options?: MaybeObservable<boolean | AddEventListenerOptions>): () => void;
+
+export { type GeneralEventListener, useEventListener };

package/dist/browser/useEventListener/index.js

@@ -0,0 +1,112 @@
+"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 useEventListener_exports = {};
+__export(useEventListener_exports, {
+  useEventListener: () => useEventListener
+});
+module.exports = __toCommonJS(useEventListener_exports);
+var import_state = require("@legendapp/state");
+var import_react = require("@legendapp/state/react");
+var import_react2 = require("react");
+var import_useRef = require("../../elements/useRef$");
+var import_normalizeTargets = require("../../shared/normalizeTargets");
+var import_get = require("../../function/get");
+var import_utils = require("../../shared/utils");
+function isEventNameArg(v) {
+  if (typeof v === "string") return true;
+  if (Array.isArray(v)) {
+    const nonNull = v.filter((item) => item != null);
+    return nonNull.length > 0 && nonNull.every((item) => typeof item === "string");
+  }
+  return false;
+}
+function useEventListener(...args) {
+  const hasTarget = !isEventNameArg(args[0]);
+  const rawTarget = hasTarget ? args[0] : void 0;
+  const rawEvent = hasTarget ? args[1] : args[0];
+  const rawListener = hasTarget ? args[2] : args[1];
+  const rawOptions = hasTarget ? args[3] : args[2];
+  const listenersRef = (0, import_react2.useRef)((0, import_utils.toArray)(rawListener));
+  listenersRef.current = (0, import_utils.toArray)(rawListener);
+  const forwarder = (0, import_react2.useRef)((ev) => {
+    listenersRef.current.forEach((l) => l(ev));
+  });
+  const optionsRef = (0, import_react2.useRef)(rawOptions);
+  optionsRef.current = rawOptions;
+  const mounted$ = (0, import_react.useObservable)(false);
+  const cleanupsRef = (0, import_react2.useRef)([]);
+  (0, import_react.useObserve)(() => {
+    cleanupsRef.current.forEach((fn2) => fn2());
+    cleanupsRef.current = [];
+    if (!mounted$.get()) return;
+    const targets = (() => {
+      if (!hasTarget) {
+        return typeof window !== "undefined" ? [window] : [];
+      }
+      if (rawTarget == null) return [];
+      const items = Array.isArray(rawTarget) ? rawTarget : [rawTarget];
+      return items.flatMap((item) => {
+        if (item == null) return [];
+        if ((0, import_useRef.isRef$)(item)) {
+          return (0, import_normalizeTargets.normalizeTargets)([item]);
+        }
+        if ((0, import_state.isObservable)(item)) {
+          const val = item.get();
+          if (val == null) return [];
+          const target = typeof val.valueOf === "function" ? val.valueOf() ?? val : val;
+          if (typeof target.addEventListener === "function") {
+            return [target];
+          }
+          return [];
+        }
+        return [item];
+      });
+    })();
+    if (!targets.length) return;
+    const events = (0, import_utils.toArray)(rawEvent);
+    if (!events.length || !listenersRef.current.length) return;
+    const resolvedOpts = (0, import_get.get)(optionsRef.current);
+    const opts = typeof resolvedOpts === "object" && resolvedOpts !== null ? { ...resolvedOpts } : resolvedOpts;
+    const fn = forwarder.current;
+    cleanupsRef.current = targets.flatMap(
+      (el) => events.map((event) => {
+        el.addEventListener(event, fn, opts);
+        return () => el.removeEventListener(event, fn, opts);
+      })
+    );
+  });
+  (0, import_react2.useEffect)(() => {
+    mounted$.set(true);
+    return () => {
+      mounted$.set(false);
+      cleanupsRef.current.forEach((fn) => fn());
+      cleanupsRef.current = [];
+    };
+  }, []);
+  return () => {
+    cleanupsRef.current.forEach((fn) => fn());
+    cleanupsRef.current = [];
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useEventListener
+});
+//# sourceMappingURL=index.js.map

package/dist/browser/useEventListener/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/browser/useEventListener/index.ts"],"sourcesContent":["\"use client\";\nimport { isObservable, type Observable } from \"@legendapp/state\";\nimport { useObservable, useObserve } from \"@legendapp/state/react\";\nimport { useEffect, useRef } from \"react\";\nimport { isRef$, type MaybeElement } from \"../../elements/useRef$\";\nimport { normalizeTargets } from \"../../shared/normalizeTargets\";\nimport { get } from \"../../function/get\";\nimport type { Arrayable, MaybeObservable } from \"../../types\";\nimport { toArray } from \"../../shared/utils\";\n\n/**\n * Returns true if the value looks like an event name argument (string or\n * array of strings), meaning no explicit target was provided.\n */\nfunction isEventNameArg(v: unknown): boolean {\n  if (typeof v === \"string\") return true;\n  if (Array.isArray(v)) {\n    const nonNull = v.filter((item) => item != null);\n    return (\n      nonNull.length > 0 && nonNull.every((item) => typeof item === \"string\")\n    );\n  }\n  return false;\n}\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\nexport interface GeneralEventListener<E = Event> {\n  (evt: E): void;\n}\n\n// ---------------------------------------------------------------------------\n// Overloads\n// ---------------------------------------------------------------------------\n\n/**\n * Register using addEventListener on mounted, and removeEventListener\n * automatically on unmounted.\n *\n * Overload 1: Omitted target — defaults to `window`.\n */\nexport function useEventListener<E extends keyof WindowEventMap>(\n  event: Arrayable<E>,\n  listener: Arrayable<(ev: WindowEventMap[E]) => any>,\n  options?: MaybeObservable<boolean | AddEventListenerOptions>,\n): () => void;\n\n/**\n * Register using addEventListener on mounted, and removeEventListener\n * automatically on unmounted.\n *\n * Overload 2: Explicit `Window` target.\n */\nexport function useEventListener<E extends keyof WindowEventMap>(\n  target: Window,\n  event: Arrayable<E>,\n  listener: Arrayable<(ev: WindowEventMap[E]) => any>,\n  options?: MaybeObservable<boolean | AddEventListenerOptions>,\n): () => void;\n\n/**\n * Register using addEventListener on mounted, and removeEventListener\n * automatically on unmounted.\n *\n * Overload 3: Explicit `Document` target.\n */\nexport function useEventListener<E extends keyof DocumentEventMap>(\n  target: Document,\n  event: Arrayable<E>,\n  listener: Arrayable<(ev: DocumentEventMap[E]) => any>,\n  options?: MaybeObservable<boolean | AddEventListenerOptions>,\n): () => void;\n\n/**\n * Register using addEventListener on mounted, and removeEventListener\n * automatically on unmounted.\n *\n * Overload 4: `MaybeElement` target — supports Ref$, Observable<OpaqueObject<Element>>,\n * Document, Window, or an array of those (Legend-State reactive).\n * Raw HTMLElement is excluded — use Ref$ or Observable<OpaqueObject<Element>> instead.\n */\nexport function useEventListener<E extends keyof HTMLElementEventMap>(\n  target: MaybeElement | MaybeElement[] | null | undefined,\n  event: Arrayable<E>,\n  listener: Arrayable<(ev: HTMLElementEventMap[E]) => any>,\n  options?: MaybeObservable<boolean | AddEventListenerOptions>,\n): () => void;\n\n/**\n * Register using addEventListener on mounted, and removeEventListener\n * automatically on unmounted.\n *\n * Overload 5: Observable<EventTarget> — reactive target (e.g.\n * Observable<MediaQueryList>, Ref$<HTMLElement>, etc.).\n * The observer re-fires whenever the observable value changes.\n */\nexport function useEventListener<EventType = Event>(\n  target: Observable<any>,\n  event: Arrayable<string>,\n  listener: Arrayable<GeneralEventListener<EventType>>,\n  options?: MaybeObservable<boolean | AddEventListenerOptions>,\n): () => void;\n\n/**\n * Register using addEventListener on mounted, and removeEventListener\n * automatically on unmounted.\n *\n * Overload 6: Generic `EventTarget` fallback.\n */\nexport function useEventListener<EventType = Event>(\n  target: EventTarget | null | undefined,\n  event: Arrayable<string>,\n  listener: Arrayable<GeneralEventListener<EventType>>,\n  options?: MaybeObservable<boolean | AddEventListenerOptions>,\n): () => void;\n\n// ---------------------------------------------------------------------------\n// Implementation\n// ---------------------------------------------------------------------------\n\nexport function useEventListener(...args: any[]): () => void {\n  // Detect whether first arg is an event name (no target) or a target.\n  // Mirrors VueUse's firstParamTargets check.\n  const hasTarget = !isEventNameArg(args[0]);\n\n  const rawTarget: unknown = hasTarget ? args[0] : undefined;\n  const rawEvent: Arrayable<string> = hasTarget ? args[1] : args[0];\n  const rawListener: Arrayable<(...a: any[]) => any> = hasTarget\n    ? args[2]\n    : args[1];\n  const rawOptions: MaybeObservable<boolean | AddEventListenerOptions> | undefined = hasTarget\n    ? args[3]\n    : args[2];\n\n  // Always keep the latest listeners in a ref so that the forwarder always\n  // calls the current listeners, even after re-renders change the functions.\n  const listenersRef = useRef(toArray(rawListener));\n  listenersRef.current = toArray(rawListener);\n\n  // Stable forwarder — one function reference per hook instance, created once.\n  const forwarder = useRef((ev: Event) => {\n    listenersRef.current.forEach((l) => l(ev));\n  });\n\n  // Options ref prevents recreating listeners when only options change.\n  const optionsRef = useRef(rawOptions);\n  optionsRef.current = rawOptions;\n\n  // Observable mount flag — lets useObserve react when component mounts.\n  const mounted$ = useObservable(false);\n\n  // Array of removeEventListener thunks for the currently active registrations.\n  const cleanupsRef = useRef<Array<() => void>>([]);\n\n  // Single reactive observer: re-runs whenever mounted$ changes OR any\n  // observable target changes. Reading .get() inside this callback registers\n  // reactive dependencies, so listener setup/teardown is always in sync.\n  useObserve(() => {\n    // Teardown previous registrations before re-registering.\n    cleanupsRef.current.forEach((fn) => fn());\n    cleanupsRef.current = [];\n\n    // Only register listeners while the component is mounted.\n    if (!mounted$.get()) return;\n\n    // Resolve targets inline — reading .get() on observable targets registers\n    // them as reactive dependencies for this observer.\n    const targets: EventTarget[] = (() => {\n      if (!hasTarget) {\n        return typeof window !== \"undefined\" ? [window] : [];\n      }\n      if (rawTarget == null) return [];\n\n      const items: unknown[] = Array.isArray(rawTarget)\n        ? rawTarget\n        : [rawTarget];\n      return items.flatMap((item): EventTarget[] => {\n        if (item == null) return [];\n        // Ref$ references — normalizeTargets handles OpaqueObject.valueOf() unwrapping.\n        if (isRef$(item)) {\n          return normalizeTargets([item as MaybeElement]) as EventTarget[];\n        }\n        // Observable targets — .get() unwraps and registers reactive dependency.\n        // Supports Element, Document, MediaQueryList, or any EventTarget.\n        if (isObservable(item)) {\n          const val = (item as { get: () => unknown }).get();\n          if (val == null) return [];\n          // Unwrap OpaqueObject created by ObservableHint.opaque (has custom valueOf).\n          const target =\n            typeof (val as any).valueOf === \"function\"\n              ? ((val as any).valueOf() as unknown) ?? val\n              : val;\n          // Duck-type check: works with real EventTargets and test mocks alike.\n          if (typeof (target as any).addEventListener === \"function\") {\n            return [target as EventTarget];\n          }\n          return [];\n        }\n        // Raw EventTarget (Window, Document — stable singletons)\n        return [item as EventTarget];\n      });\n    })();\n\n    if (!targets.length) return;\n\n    const events = toArray(rawEvent);\n    if (!events.length || !listenersRef.current.length) return;\n\n    const resolvedOpts = get(optionsRef.current);\n    const opts =\n      typeof resolvedOpts === \"object\" && resolvedOpts !== null\n        ? { ...resolvedOpts }\n        : resolvedOpts;\n\n    const fn = forwarder.current;\n    cleanupsRef.current = targets.flatMap((el) =>\n      events.map((event) => {\n        el.addEventListener(event, fn, opts);\n        return () => el.removeEventListener(event, fn, opts);\n      }),\n    );\n  });\n\n  // useEffect manages mount state only — no setup logic here.\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useEffect(() => {\n    mounted$.set(true);\n    return () => {\n      mounted$.set(false);\n      cleanupsRef.current.forEach((fn) => fn());\n      cleanupsRef.current = [];\n    };\n  }, []);\n\n  // Return a manual cleanup function for imperative removal.\n  return () => {\n    cleanupsRef.current.forEach((fn) => fn());\n    cleanupsRef.current = [];\n  };\n}\n"],"mappings":"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","names":["import_react","fn"]}

package/dist/browser/useEventListener/index.mjs

@@ -0,0 +1,88 @@
+"use client";
+import { isObservable } from "@legendapp/state";
+import { useObservable, useObserve } from "@legendapp/state/react";
+import { useEffect, useRef } from "react";
+import { isRef$ } from "../../elements/useRef$";
+import { normalizeTargets } from "../../shared/normalizeTargets";
+import { get } from "../../function/get";
+import { toArray } from "../../shared/utils";
+function isEventNameArg(v) {
+  if (typeof v === "string") return true;
+  if (Array.isArray(v)) {
+    const nonNull = v.filter((item) => item != null);
+    return nonNull.length > 0 && nonNull.every((item) => typeof item === "string");
+  }
+  return false;
+}
+function useEventListener(...args) {
+  const hasTarget = !isEventNameArg(args[0]);
+  const rawTarget = hasTarget ? args[0] : void 0;
+  const rawEvent = hasTarget ? args[1] : args[0];
+  const rawListener = hasTarget ? args[2] : args[1];
+  const rawOptions = hasTarget ? args[3] : args[2];
+  const listenersRef = useRef(toArray(rawListener));
+  listenersRef.current = toArray(rawListener);
+  const forwarder = useRef((ev) => {
+    listenersRef.current.forEach((l) => l(ev));
+  });
+  const optionsRef = useRef(rawOptions);
+  optionsRef.current = rawOptions;
+  const mounted$ = useObservable(false);
+  const cleanupsRef = useRef([]);
+  useObserve(() => {
+    cleanupsRef.current.forEach((fn2) => fn2());
+    cleanupsRef.current = [];
+    if (!mounted$.get()) return;
+    const targets = (() => {
+      if (!hasTarget) {
+        return typeof window !== "undefined" ? [window] : [];
+      }
+      if (rawTarget == null) return [];
+      const items = Array.isArray(rawTarget) ? rawTarget : [rawTarget];
+      return items.flatMap((item) => {
+        if (item == null) return [];
+        if (isRef$(item)) {
+          return normalizeTargets([item]);
+        }
+        if (isObservable(item)) {
+          const val = item.get();
+          if (val == null) return [];
+          const target = typeof val.valueOf === "function" ? val.valueOf() ?? val : val;
+          if (typeof target.addEventListener === "function") {
+            return [target];
+          }
+          return [];
+        }
+        return [item];
+      });
+    })();
+    if (!targets.length) return;
+    const events = toArray(rawEvent);
+    if (!events.length || !listenersRef.current.length) return;
+    const resolvedOpts = get(optionsRef.current);
+    const opts = typeof resolvedOpts === "object" && resolvedOpts !== null ? { ...resolvedOpts } : resolvedOpts;
+    const fn = forwarder.current;
+    cleanupsRef.current = targets.flatMap(
+      (el) => events.map((event) => {
+        el.addEventListener(event, fn, opts);
+        return () => el.removeEventListener(event, fn, opts);
+      })
+    );
+  });
+  useEffect(() => {
+    mounted$.set(true);
+    return () => {
+      mounted$.set(false);
+      cleanupsRef.current.forEach((fn) => fn());
+      cleanupsRef.current = [];
+    };
+  }, []);
+  return () => {
+    cleanupsRef.current.forEach((fn) => fn());
+    cleanupsRef.current = [];
+  };
+}
+export {
+  useEventListener
+};
+//# sourceMappingURL=index.mjs.map

package/dist/browser/useEventListener/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/browser/useEventListener/index.ts"],"sourcesContent":["\"use client\";\nimport { isObservable, type Observable } from \"@legendapp/state\";\nimport { useObservable, useObserve } from \"@legendapp/state/react\";\nimport { useEffect, useRef } from \"react\";\nimport { isRef$, type MaybeElement } from \"../../elements/useRef$\";\nimport { normalizeTargets } from \"../../shared/normalizeTargets\";\nimport { get } from \"../../function/get\";\nimport type { Arrayable, MaybeObservable } from \"../../types\";\nimport { toArray } from \"../../shared/utils\";\n\n/**\n * Returns true if the value looks like an event name argument (string or\n * array of strings), meaning no explicit target was provided.\n */\nfunction isEventNameArg(v: unknown): boolean {\n  if (typeof v === \"string\") return true;\n  if (Array.isArray(v)) {\n    const nonNull = v.filter((item) => item != null);\n    return (\n      nonNull.length > 0 && nonNull.every((item) => typeof item === \"string\")\n    );\n  }\n  return false;\n}\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\nexport interface GeneralEventListener<E = Event> {\n  (evt: E): void;\n}\n\n// ---------------------------------------------------------------------------\n// Overloads\n// ---------------------------------------------------------------------------\n\n/**\n * Register using addEventListener on mounted, and removeEventListener\n * automatically on unmounted.\n *\n * Overload 1: Omitted target — defaults to `window`.\n */\nexport function useEventListener<E extends keyof WindowEventMap>(\n  event: Arrayable<E>,\n  listener: Arrayable<(ev: WindowEventMap[E]) => any>,\n  options?: MaybeObservable<boolean | AddEventListenerOptions>,\n): () => void;\n\n/**\n * Register using addEventListener on mounted, and removeEventListener\n * automatically on unmounted.\n *\n * Overload 2: Explicit `Window` target.\n */\nexport function useEventListener<E extends keyof WindowEventMap>(\n  target: Window,\n  event: Arrayable<E>,\n  listener: Arrayable<(ev: WindowEventMap[E]) => any>,\n  options?: MaybeObservable<boolean | AddEventListenerOptions>,\n): () => void;\n\n/**\n * Register using addEventListener on mounted, and removeEventListener\n * automatically on unmounted.\n *\n * Overload 3: Explicit `Document` target.\n */\nexport function useEventListener<E extends keyof DocumentEventMap>(\n  target: Document,\n  event: Arrayable<E>,\n  listener: Arrayable<(ev: DocumentEventMap[E]) => any>,\n  options?: MaybeObservable<boolean | AddEventListenerOptions>,\n): () => void;\n\n/**\n * Register using addEventListener on mounted, and removeEventListener\n * automatically on unmounted.\n *\n * Overload 4: `MaybeElement` target — supports Ref$, Observable<OpaqueObject<Element>>,\n * Document, Window, or an array of those (Legend-State reactive).\n * Raw HTMLElement is excluded — use Ref$ or Observable<OpaqueObject<Element>> instead.\n */\nexport function useEventListener<E extends keyof HTMLElementEventMap>(\n  target: MaybeElement | MaybeElement[] | null | undefined,\n  event: Arrayable<E>,\n  listener: Arrayable<(ev: HTMLElementEventMap[E]) => any>,\n  options?: MaybeObservable<boolean | AddEventListenerOptions>,\n): () => void;\n\n/**\n * Register using addEventListener on mounted, and removeEventListener\n * automatically on unmounted.\n *\n * Overload 5: Observable<EventTarget> — reactive target (e.g.\n * Observable<MediaQueryList>, Ref$<HTMLElement>, etc.).\n * The observer re-fires whenever the observable value changes.\n */\nexport function useEventListener<EventType = Event>(\n  target: Observable<any>,\n  event: Arrayable<string>,\n  listener: Arrayable<GeneralEventListener<EventType>>,\n  options?: MaybeObservable<boolean | AddEventListenerOptions>,\n): () => void;\n\n/**\n * Register using addEventListener on mounted, and removeEventListener\n * automatically on unmounted.\n *\n * Overload 6: Generic `EventTarget` fallback.\n */\nexport function useEventListener<EventType = Event>(\n  target: EventTarget | null | undefined,\n  event: Arrayable<string>,\n  listener: Arrayable<GeneralEventListener<EventType>>,\n  options?: MaybeObservable<boolean | AddEventListenerOptions>,\n): () => void;\n\n// ---------------------------------------------------------------------------\n// Implementation\n// ---------------------------------------------------------------------------\n\nexport function useEventListener(...args: any[]): () => void {\n  // Detect whether first arg is an event name (no target) or a target.\n  // Mirrors VueUse's firstParamTargets check.\n  const hasTarget = !isEventNameArg(args[0]);\n\n  const rawTarget: unknown = hasTarget ? args[0] : undefined;\n  const rawEvent: Arrayable<string> = hasTarget ? args[1] : args[0];\n  const rawListener: Arrayable<(...a: any[]) => any> = hasTarget\n    ? args[2]\n    : args[1];\n  const rawOptions: MaybeObservable<boolean | AddEventListenerOptions> | undefined = hasTarget\n    ? args[3]\n    : args[2];\n\n  // Always keep the latest listeners in a ref so that the forwarder always\n  // calls the current listeners, even after re-renders change the functions.\n  const listenersRef = useRef(toArray(rawListener));\n  listenersRef.current = toArray(rawListener);\n\n  // Stable forwarder — one function reference per hook instance, created once.\n  const forwarder = useRef((ev: Event) => {\n    listenersRef.current.forEach((l) => l(ev));\n  });\n\n  // Options ref prevents recreating listeners when only options change.\n  const optionsRef = useRef(rawOptions);\n  optionsRef.current = rawOptions;\n\n  // Observable mount flag — lets useObserve react when component mounts.\n  const mounted$ = useObservable(false);\n\n  // Array of removeEventListener thunks for the currently active registrations.\n  const cleanupsRef = useRef<Array<() => void>>([]);\n\n  // Single reactive observer: re-runs whenever mounted$ changes OR any\n  // observable target changes. Reading .get() inside this callback registers\n  // reactive dependencies, so listener setup/teardown is always in sync.\n  useObserve(() => {\n    // Teardown previous registrations before re-registering.\n    cleanupsRef.current.forEach((fn) => fn());\n    cleanupsRef.current = [];\n\n    // Only register listeners while the component is mounted.\n    if (!mounted$.get()) return;\n\n    // Resolve targets inline — reading .get() on observable targets registers\n    // them as reactive dependencies for this observer.\n    const targets: EventTarget[] = (() => {\n      if (!hasTarget) {\n        return typeof window !== \"undefined\" ? [window] : [];\n      }\n      if (rawTarget == null) return [];\n\n      const items: unknown[] = Array.isArray(rawTarget)\n        ? rawTarget\n        : [rawTarget];\n      return items.flatMap((item): EventTarget[] => {\n        if (item == null) return [];\n        // Ref$ references — normalizeTargets handles OpaqueObject.valueOf() unwrapping.\n        if (isRef$(item)) {\n          return normalizeTargets([item as MaybeElement]) as EventTarget[];\n        }\n        // Observable targets — .get() unwraps and registers reactive dependency.\n        // Supports Element, Document, MediaQueryList, or any EventTarget.\n        if (isObservable(item)) {\n          const val = (item as { get: () => unknown }).get();\n          if (val == null) return [];\n          // Unwrap OpaqueObject created by ObservableHint.opaque (has custom valueOf).\n          const target =\n            typeof (val as any).valueOf === \"function\"\n              ? ((val as any).valueOf() as unknown) ?? val\n              : val;\n          // Duck-type check: works with real EventTargets and test mocks alike.\n          if (typeof (target as any).addEventListener === \"function\") {\n            return [target as EventTarget];\n          }\n          return [];\n        }\n        // Raw EventTarget (Window, Document — stable singletons)\n        return [item as EventTarget];\n      });\n    })();\n\n    if (!targets.length) return;\n\n    const events = toArray(rawEvent);\n    if (!events.length || !listenersRef.current.length) return;\n\n    const resolvedOpts = get(optionsRef.current);\n    const opts =\n      typeof resolvedOpts === \"object\" && resolvedOpts !== null\n        ? { ...resolvedOpts }\n        : resolvedOpts;\n\n    const fn = forwarder.current;\n    cleanupsRef.current = targets.flatMap((el) =>\n      events.map((event) => {\n        el.addEventListener(event, fn, opts);\n        return () => el.removeEventListener(event, fn, opts);\n      }),\n    );\n  });\n\n  // useEffect manages mount state only — no setup logic here.\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useEffect(() => {\n    mounted$.set(true);\n    return () => {\n      mounted$.set(false);\n      cleanupsRef.current.forEach((fn) => fn());\n      cleanupsRef.current = [];\n    };\n  }, []);\n\n  // Return a manual cleanup function for imperative removal.\n  return () => {\n    cleanupsRef.current.forEach((fn) => fn());\n    cleanupsRef.current = [];\n  };\n}\n"],"mappings":"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","names":["fn"]}

package/dist/browser/useMediaQuery/demo.d.mts

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

package/dist/browser/useMediaQuery/demo.d.ts

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

package/dist/browser/useMediaQuery/demo.js

@@ -0,0 +1,83 @@
+"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: () => UseMediaQueryDemo
+});
+module.exports = __toCommonJS(demo_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import__ = require(".");
+var import_react = require("@legendapp/state/react");
+const row = {
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "start",
+  gap: "10px",
+  padding: "8px 14px",
+  borderRadius: "6px",
+  border: "1px solid var(--sl-color-gray-5, #e2e8f0)",
+  background: "var(--sl-color-gray-6, #f8fafc)",
+  margin: 0
+};
+const label = {
+  color: "var(--sl-color-gray-3, #64748b)",
+  fontSize: "12px"
+};
+const value = {
+  fontFamily: "monospace",
+  fontSize: "13px",
+  fontWeight: "bold",
+  color: "var(--sl-color-text, #0f172a)"
+};
+function UseMediaQueryDemo() {
+  const isLargeScreen$ = (0, import__.useMediaQuery)("(min-width: 1024px)");
+  const prefersDark$ = (0, import__.useMediaQuery)("(prefers-color-scheme: dark)");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "8px",
+        fontFamily: "monospace",
+        fontSize: "13px"
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Computed, { children: () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "div",
+        {
+          style: {
+            display: "flex",
+            gap: "10px"
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: row, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: label, children: "isLargeScreen" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: value, children: String(isLargeScreen$.get()) })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: row, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: label, children: "prefersDark" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: value, children: String(prefersDark$.get()) })
+            ] })
+          ]
+        }
+      ) })
+    }
+  );
+}
+//# sourceMappingURL=demo.js.map

package/dist/browser/useMediaQuery/demo.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/browser/useMediaQuery/demo.tsx"],"sourcesContent":["import { useMediaQuery } from \".\";\nimport { Computed } from \"@legendapp/state/react\";\n\nconst row: React.CSSProperties = {\n  display: \"inline-flex\",\n  alignItems: \"center\",\n  justifyContent: \"start\",\n  gap: \"10px\",\n  padding: \"8px 14px\",\n  borderRadius: \"6px\",\n  border: \"1px solid var(--sl-color-gray-5, #e2e8f0)\",\n  background: \"var(--sl-color-gray-6, #f8fafc)\",\n  margin: 0,\n};\n\nconst label: React.CSSProperties = {\n  color: \"var(--sl-color-gray-3, #64748b)\",\n  fontSize: \"12px\",\n};\n\nconst value: React.CSSProperties = {\n  fontFamily: \"monospace\",\n  fontSize: \"13px\",\n  fontWeight: \"bold\",\n  color: \"var(--sl-color-text, #0f172a)\",\n};\n\nexport default function UseMediaQueryDemo() {\n  const isLargeScreen$ = useMediaQuery(\"(min-width: 1024px)\");\n  const prefersDark$ = useMediaQuery(\"(prefers-color-scheme: dark)\");\n\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        flexDirection: \"column\",\n        gap: \"8px\",\n        fontFamily: \"monospace\",\n        fontSize: \"13px\",\n      }}\n    >\n      <Computed>\n        {() => (\n          <div\n            style={{\n              display: \"flex\",\n              gap: \"10px\",\n            }}\n          >\n            <div style={row}>\n              <span style={label}>isLargeScreen</span>\n              <span style={value}>{String(isLargeScreen$.get())}</span>\n            </div>\n            <div style={row}>\n              <span style={label}>prefersDark</span>\n              <span style={value}>{String(prefersDark$.get())}</span>\n            </div>\n          </div>\n        )}\n      </Computed>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAiDY;AAjDZ,eAA8B;AAC9B,mBAAyB;AAEzB,MAAM,MAA2B;AAAA,EAC/B,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,KAAK;AAAA,EACL,SAAS;AAAA,EACT,cAAc;AAAA,EACd,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,QAAQ;AACV;AAEA,MAAM,QAA6B;AAAA,EACjC,OAAO;AAAA,EACP,UAAU;AACZ;AAEA,MAAM,QAA6B;AAAA,EACjC,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,OAAO;AACT;AAEe,SAAR,oBAAqC;AAC1C,QAAM,qBAAiB,wBAAc,qBAAqB;AAC1D,QAAM,mBAAe,wBAAc,8BAA8B;AAEjE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,SAAS;AAAA,QACT,eAAe;AAAA,QACf,KAAK;AAAA,QACL,YAAY;AAAA,QACZ,UAAU;AAAA,MACZ;AAAA,MAEA,sDAAC,yBACE,gBACC;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,YACL,SAAS;AAAA,YACT,KAAK;AAAA,UACP;AAAA,UAEA;AAAA,yDAAC,SAAI,OAAO,KACV;AAAA,0DAAC,UAAK,OAAO,OAAO,2BAAa;AAAA,cACjC,4CAAC,UAAK,OAAO,OAAQ,iBAAO,eAAe,IAAI,CAAC,GAAE;AAAA,eACpD;AAAA,YACA,6CAAC,SAAI,OAAO,KACV;AAAA,0DAAC,UAAK,OAAO,OAAO,yBAAW;AAAA,cAC/B,4CAAC,UAAK,OAAO,OAAQ,iBAAO,aAAa,IAAI,CAAC,GAAE;AAAA,eAClD;AAAA;AAAA;AAAA,MACF,GAEJ;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/browser/useMediaQuery/demo.mjs

@@ -0,0 +1,63 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMediaQuery } from ".";
+import { Computed } from "@legendapp/state/react";
+const row = {
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "start",
+  gap: "10px",
+  padding: "8px 14px",
+  borderRadius: "6px",
+  border: "1px solid var(--sl-color-gray-5, #e2e8f0)",
+  background: "var(--sl-color-gray-6, #f8fafc)",
+  margin: 0
+};
+const label = {
+  color: "var(--sl-color-gray-3, #64748b)",
+  fontSize: "12px"
+};
+const value = {
+  fontFamily: "monospace",
+  fontSize: "13px",
+  fontWeight: "bold",
+  color: "var(--sl-color-text, #0f172a)"
+};
+function UseMediaQueryDemo() {
+  const isLargeScreen$ = useMediaQuery("(min-width: 1024px)");
+  const prefersDark$ = useMediaQuery("(prefers-color-scheme: dark)");
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "8px",
+        fontFamily: "monospace",
+        fontSize: "13px"
+      },
+      children: /* @__PURE__ */ jsx(Computed, { children: () => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            display: "flex",
+            gap: "10px"
+          },
+          children: [
+            /* @__PURE__ */ jsxs("div", { style: row, children: [
+              /* @__PURE__ */ jsx("span", { style: label, children: "isLargeScreen" }),
+              /* @__PURE__ */ jsx("span", { style: value, children: String(isLargeScreen$.get()) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { style: row, children: [
+              /* @__PURE__ */ jsx("span", { style: label, children: "prefersDark" }),
+              /* @__PURE__ */ jsx("span", { style: value, children: String(prefersDark$.get()) })
+            ] })
+          ]
+        }
+      ) })
+    }
+  );
+}
+export {
+  UseMediaQueryDemo as default
+};
+//# sourceMappingURL=demo.mjs.map

package/dist/browser/useMediaQuery/demo.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/browser/useMediaQuery/demo.tsx"],"sourcesContent":["import { useMediaQuery } from \".\";\nimport { Computed } from \"@legendapp/state/react\";\n\nconst row: React.CSSProperties = {\n  display: \"inline-flex\",\n  alignItems: \"center\",\n  justifyContent: \"start\",\n  gap: \"10px\",\n  padding: \"8px 14px\",\n  borderRadius: \"6px\",\n  border: \"1px solid var(--sl-color-gray-5, #e2e8f0)\",\n  background: \"var(--sl-color-gray-6, #f8fafc)\",\n  margin: 0,\n};\n\nconst label: React.CSSProperties = {\n  color: \"var(--sl-color-gray-3, #64748b)\",\n  fontSize: \"12px\",\n};\n\nconst value: React.CSSProperties = {\n  fontFamily: \"monospace\",\n  fontSize: \"13px\",\n  fontWeight: \"bold\",\n  color: \"var(--sl-color-text, #0f172a)\",\n};\n\nexport default function UseMediaQueryDemo() {\n  const isLargeScreen$ = useMediaQuery(\"(min-width: 1024px)\");\n  const prefersDark$ = useMediaQuery(\"(prefers-color-scheme: dark)\");\n\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        flexDirection: \"column\",\n        gap: \"8px\",\n        fontFamily: \"monospace\",\n        fontSize: \"13px\",\n      }}\n    >\n      <Computed>\n        {() => (\n          <div\n            style={{\n              display: \"flex\",\n              gap: \"10px\",\n            }}\n          >\n            <div style={row}>\n              <span style={label}>isLargeScreen</span>\n              <span style={value}>{String(isLargeScreen$.get())}</span>\n            </div>\n            <div style={row}>\n              <span style={label}>prefersDark</span>\n              <span style={value}>{String(prefersDark$.get())}</span>\n            </div>\n          </div>\n        )}\n      </Computed>\n    </div>\n  );\n}\n"],"mappings":"AAiDY,SACE,KADF;AAjDZ,SAAS,qBAAqB;AAC9B,SAAS,gBAAgB;AAEzB,MAAM,MAA2B;AAAA,EAC/B,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,KAAK;AAAA,EACL,SAAS;AAAA,EACT,cAAc;AAAA,EACd,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,QAAQ;AACV;AAEA,MAAM,QAA6B;AAAA,EACjC,OAAO;AAAA,EACP,UAAU;AACZ;AAEA,MAAM,QAA6B;AAAA,EACjC,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,OAAO;AACT;AAEe,SAAR,oBAAqC;AAC1C,QAAM,iBAAiB,cAAc,qBAAqB;AAC1D,QAAM,eAAe,cAAc,8BAA8B;AAEjE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,SAAS;AAAA,QACT,eAAe;AAAA,QACf,KAAK;AAAA,QACL,YAAY;AAAA,QACZ,UAAU;AAAA,MACZ;AAAA,MAEA,8BAAC,YACE,gBACC;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,YACL,SAAS;AAAA,YACT,KAAK;AAAA,UACP;AAAA,UAEA;AAAA,iCAAC,SAAI,OAAO,KACV;AAAA,kCAAC,UAAK,OAAO,OAAO,2BAAa;AAAA,cACjC,oBAAC,UAAK,OAAO,OAAQ,iBAAO,eAAe,IAAI,CAAC,GAAE;AAAA,eACpD;AAAA,YACA,qBAAC,SAAI,OAAO,KACV;AAAA,kCAAC,UAAK,OAAO,OAAO,yBAAW;AAAA,cAC/B,oBAAC,UAAK,OAAO,OAAQ,iBAAO,aAAa,IAAI,CAAC,GAAE;AAAA,eAClD;AAAA;AAAA;AAAA,MACF,GAEJ;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/browser/useMediaQuery/index.d.mts

@@ -0,0 +1,11 @@
+import { Observable } from '@legendapp/state';
+import { MaybeObservable } from '../../types.mjs';
+
+declare function evaluateSSRQuery(query: string, ssrWidth: number): boolean;
+interface UseMediaQueryOptions {
+    ssrWidth?: number;
+}
+type UseMediaQueryReturn = Observable<boolean>;
+declare function useMediaQuery(query: MaybeObservable<string>, options?: UseMediaQueryOptions): UseMediaQueryReturn;
+
+export { type UseMediaQueryOptions, type UseMediaQueryReturn, evaluateSSRQuery, useMediaQuery };

package/dist/browser/useMediaQuery/index.d.ts

@@ -0,0 +1,11 @@
+import { Observable } from '@legendapp/state';
+import { MaybeObservable } from '../../types.js';
+
+declare function evaluateSSRQuery(query: string, ssrWidth: number): boolean;
+interface UseMediaQueryOptions {
+    ssrWidth?: number;
+}
+type UseMediaQueryReturn = Observable<boolean>;
+declare function useMediaQuery(query: MaybeObservable<string>, options?: UseMediaQueryOptions): UseMediaQueryReturn;
+
+export { type UseMediaQueryOptions, type UseMediaQueryReturn, evaluateSSRQuery, useMediaQuery };