@develemit/web-hooks 0.1.0 → 0.3.0

package/dist/keyboard-inset.cjs

@@ -0,0 +1,113 @@
+"use client";
+"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);
+
+// src/keyboard-inset/index.ts
+var keyboard_inset_exports = {};
+__export(keyboard_inset_exports, {
+  computeKeyboardInset: () => computeKeyboardInset,
+  isEditableElement: () => isEditableElement,
+  useKeyboardInset: () => useKeyboardInset
+});
+module.exports = __toCommonJS(keyboard_inset_exports);
+
+// src/keyboard-inset/use-keyboard-inset.ts
+var import_react = require("react");
+
+// src/keyboard-inset/compute-inset.ts
+var DEFAULT_MIN_INSET = 150;
+function computeKeyboardInset(r) {
+  if (!r.editableFocused) return 0;
+  const occluded = r.layoutHeight - r.visualHeight - r.visualOffsetTop;
+  return occluded >= (r.minInset ?? DEFAULT_MIN_INSET) ? Math.round(occluded) : 0;
+}
+var NON_TEXT_INPUT_TYPES = /* @__PURE__ */ new Set([
+  "button",
+  "checkbox",
+  "radio",
+  "range",
+  "submit",
+  "reset",
+  "file",
+  "color",
+  "image",
+  "hidden"
+]);
+function isEditableElement(el) {
+  if (!el) return false;
+  const tag = el.tagName.toLowerCase();
+  if (tag === "select") return !el.disabled;
+  if (tag === "textarea" || tag === "input") {
+    const field = el;
+    if (field.readOnly || field.disabled) return false;
+    return tag === "textarea" || !NON_TEXT_INPUT_TYPES.has(field.type);
+  }
+  if (el.isContentEditable === true) return true;
+  const attr = el.getAttribute("contenteditable");
+  return attr !== null && attr !== "false";
+}
+
+// src/keyboard-inset/use-keyboard-inset.ts
+function useKeyboardInset({ minInset = DEFAULT_MIN_INSET, enabled = true } = {}) {
+  const [inset, setInset] = (0, import_react.useState)(0);
+  (0, import_react.useEffect)(() => {
+    const vv = typeof window === "undefined" ? null : window.visualViewport;
+    if (!enabled || !vv) {
+      setInset(0);
+      return;
+    }
+    const update = () => setInset(
+      computeKeyboardInset({
+        layoutHeight: window.innerHeight,
+        visualHeight: vv.height,
+        visualOffsetTop: vv.offsetTop,
+        editableFocused: isEditableElement(document.activeElement),
+        minInset
+      })
+    );
+    let frame = 0;
+    const onFocusOut = () => {
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(update);
+    };
+    const onFocusIn = () => {
+      cancelAnimationFrame(frame);
+      update();
+    };
+    vv.addEventListener("resize", update);
+    vv.addEventListener("scroll", update);
+    document.addEventListener("focusin", onFocusIn);
+    document.addEventListener("focusout", onFocusOut);
+    update();
+    return () => {
+      cancelAnimationFrame(frame);
+      vv.removeEventListener("resize", update);
+      vv.removeEventListener("scroll", update);
+      document.removeEventListener("focusin", onFocusIn);
+      document.removeEventListener("focusout", onFocusOut);
+    };
+  }, [enabled, minInset]);
+  return inset;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  computeKeyboardInset,
+  isEditableElement,
+  useKeyboardInset
+});

package/dist/keyboard-inset.d.cts

@@ -0,0 +1,25 @@
+interface UseKeyboardInsetOptions {
+    minInset?: number;
+    enabled?: boolean;
+}
+declare function useKeyboardInset({ minInset, enabled }?: UseKeyboardInsetOptions): number;
+
+interface InsetReading {
+    layoutHeight: number;
+    visualHeight: number;
+    visualOffsetTop: number;
+    editableFocused: boolean;
+    minInset?: number;
+}
+/**
+ * How far the keyboard covers the bottom of the layout viewport. Zero unless a
+ * text field is focused: on newer iPhones the standalone PWA reports a gap
+ * between the layout and visual viewport with no keyboard up, which padded the
+ * composer ~100pt off the bottom of the screen. The smallest iOS keyboard is
+ * well over `minInset`; anything less is viewport noise (home-indicator area,
+ * toolbar, a stale post-dismiss offset).
+ */
+declare function computeKeyboardInset(r: InsetReading): number;
+declare function isEditableElement(el: Element | null | undefined): boolean;
+
+export { type InsetReading, type UseKeyboardInsetOptions, computeKeyboardInset, isEditableElement, useKeyboardInset };

package/dist/keyboard-inset.d.ts

@@ -0,0 +1,25 @@
+interface UseKeyboardInsetOptions {
+    minInset?: number;
+    enabled?: boolean;
+}
+declare function useKeyboardInset({ minInset, enabled }?: UseKeyboardInsetOptions): number;
+
+interface InsetReading {
+    layoutHeight: number;
+    visualHeight: number;
+    visualOffsetTop: number;
+    editableFocused: boolean;
+    minInset?: number;
+}
+/**
+ * How far the keyboard covers the bottom of the layout viewport. Zero unless a
+ * text field is focused: on newer iPhones the standalone PWA reports a gap
+ * between the layout and visual viewport with no keyboard up, which padded the
+ * composer ~100pt off the bottom of the screen. The smallest iOS keyboard is
+ * well over `minInset`; anything less is viewport noise (home-indicator area,
+ * toolbar, a stale post-dismiss offset).
+ */
+declare function computeKeyboardInset(r: InsetReading): number;
+declare function isEditableElement(el: Element | null | undefined): boolean;
+
+export { type InsetReading, type UseKeyboardInsetOptions, computeKeyboardInset, isEditableElement, useKeyboardInset };

package/dist/keyboard-inset.js

@@ -0,0 +1,11 @@
+"use client";
+import {
+  computeKeyboardInset,
+  isEditableElement,
+  useKeyboardInset
+} from "./chunk-TNEJ34T5.js";
+export {
+  computeKeyboardInset,
+  isEditableElement,
+  useKeyboardInset
+};

package/dist/media-query.cjs

@@ -0,0 +1,90 @@
+"use client";
+"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);
+
+// src/media-query/index.ts
+var media_query_exports = {};
+__export(media_query_exports, {
+  COARSE_POINTER_QUERY: () => COARSE_POINTER_QUERY,
+  REDUCED_MOTION_QUERY: () => REDUCED_MOTION_QUERY,
+  useCoarsePointer: () => useCoarsePointer,
+  useMediaQuery: () => useMediaQuery,
+  useReducedMotion: () => useReducedMotion
+});
+module.exports = __toCommonJS(media_query_exports);
+
+// src/media-query/use-media-query.ts
+var import_react = require("react");
+
+// src/media-query/media-query.ts
+var REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+var COARSE_POINTER_QUERY = "(pointer: coarse)";
+var lists = /* @__PURE__ */ new WeakMap();
+function getList(query) {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return null;
+  const owner = window.matchMedia;
+  let byQuery = lists.get(owner);
+  if (!byQuery) {
+    byQuery = /* @__PURE__ */ new Map();
+    lists.set(owner, byQuery);
+  }
+  let list = byQuery.get(query);
+  if (!list) {
+    list = owner.call(window, query);
+    byQuery.set(query, list);
+  }
+  return list;
+}
+function getMatches(query) {
+  return getList(query)?.matches ?? null;
+}
+function subscribe(query, onChange) {
+  const list = getList(query);
+  if (!list) return () => {
+  };
+  if (typeof list.addEventListener === "function") {
+    list.addEventListener("change", onChange);
+    return () => list.removeEventListener("change", onChange);
+  }
+  list.addListener(onChange);
+  return () => list.removeListener(onChange);
+}
+
+// src/media-query/use-media-query.ts
+function useMediaQuery(query, options = {}) {
+  const serverDefault = options.serverDefault ?? false;
+  const subscribeToQuery = (0, import_react.useCallback)((onChange) => subscribe(query, onChange), [query]);
+  const getSnapshot = (0, import_react.useCallback)(() => getMatches(query) ?? serverDefault, [query, serverDefault]);
+  const getServerSnapshot = (0, import_react.useCallback)(() => serverDefault, [serverDefault]);
+  return (0, import_react.useSyncExternalStore)(subscribeToQuery, getSnapshot, getServerSnapshot);
+}
+function useReducedMotion(options) {
+  return useMediaQuery(REDUCED_MOTION_QUERY, options);
+}
+function useCoarsePointer(options) {
+  return useMediaQuery(COARSE_POINTER_QUERY, options);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  COARSE_POINTER_QUERY,
+  REDUCED_MOTION_QUERY,
+  useCoarsePointer,
+  useMediaQuery,
+  useReducedMotion
+});

package/dist/media-query.d.cts

@@ -0,0 +1,12 @@
+interface UseMediaQueryOptions {
+    /** Value on the server, during hydration, and where `matchMedia` is missing. Default `false`. */
+    serverDefault?: boolean;
+}
+declare function useMediaQuery(query: string, options?: UseMediaQueryOptions): boolean;
+declare function useReducedMotion(options?: UseMediaQueryOptions): boolean;
+declare function useCoarsePointer(options?: UseMediaQueryOptions): boolean;
+
+declare const REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+declare const COARSE_POINTER_QUERY = "(pointer: coarse)";
+
+export { COARSE_POINTER_QUERY, REDUCED_MOTION_QUERY, type UseMediaQueryOptions, useCoarsePointer, useMediaQuery, useReducedMotion };

package/dist/media-query.d.ts

@@ -0,0 +1,12 @@
+interface UseMediaQueryOptions {
+    /** Value on the server, during hydration, and where `matchMedia` is missing. Default `false`. */
+    serverDefault?: boolean;
+}
+declare function useMediaQuery(query: string, options?: UseMediaQueryOptions): boolean;
+declare function useReducedMotion(options?: UseMediaQueryOptions): boolean;
+declare function useCoarsePointer(options?: UseMediaQueryOptions): boolean;
+
+declare const REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+declare const COARSE_POINTER_QUERY = "(pointer: coarse)";
+
+export { COARSE_POINTER_QUERY, REDUCED_MOTION_QUERY, type UseMediaQueryOptions, useCoarsePointer, useMediaQuery, useReducedMotion };

package/dist/media-query.js

@@ -0,0 +1,17 @@
+"use client";
+import {
+  useCoarsePointer,
+  useMediaQuery,
+  useReducedMotion
+} from "./chunk-HTVNN2NM.js";
+import {
+  COARSE_POINTER_QUERY,
+  REDUCED_MOTION_QUERY
+} from "./chunk-WVM2LTWQ.js";
+export {
+  COARSE_POINTER_QUERY,
+  REDUCED_MOTION_QUERY,
+  useCoarsePointer,
+  useMediaQuery,
+  useReducedMotion
+};

package/dist/online-status.cjs

@@ -0,0 +1,46 @@
+"use client";
+"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);
+
+// src/online-status/index.ts
+var online_status_exports = {};
+__export(online_status_exports, {
+  useOnlineStatus: () => useOnlineStatus
+});
+module.exports = __toCommonJS(online_status_exports);
+
+// src/online-status/use-online-status.ts
+var import_react = require("react");
+function subscribe(callback) {
+  window.addEventListener("online", callback);
+  window.addEventListener("offline", callback);
+  return () => {
+    window.removeEventListener("online", callback);
+    window.removeEventListener("offline", callback);
+  };
+}
+var getSnapshot = () => navigator.onLine;
+var getServerSnapshot = () => true;
+function useOnlineStatus() {
+  return (0, import_react.useSyncExternalStore)(subscribe, getSnapshot, getServerSnapshot);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useOnlineStatus
+});

package/dist/online-status.d.cts

@@ -0,0 +1,3 @@
+declare function useOnlineStatus(): boolean;
+
+export { useOnlineStatus };

package/dist/online-status.d.ts

@@ -0,0 +1,3 @@
+declare function useOnlineStatus(): boolean;
+
+export { useOnlineStatus };

package/dist/online-status.js

@@ -0,0 +1,7 @@
+"use client";
+import {
+  useOnlineStatus
+} from "./chunk-WXL22EWK.js";
+export {
+  useOnlineStatus
+};

package/dist/outside-press.cjs

@@ -0,0 +1,73 @@
+"use client";
+"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);
+
+// src/outside-press/index.ts
+var outside_press_exports = {};
+__export(outside_press_exports, {
+  isOutside: () => isOutside,
+  isPrimaryPress: () => isPrimaryPress,
+  useOutsidePress: () => useOutsidePress
+});
+module.exports = __toCommonJS(outside_press_exports);
+
+// src/outside-press/outside-press.ts
+function isOutside(target, elements, ignoreSelector) {
+  if (!target) return false;
+  if (!target.isConnected) return false;
+  if (ignoreSelector && isInIgnoredRegion(target, ignoreSelector)) return false;
+  return !elements.some((el) => el?.contains(target));
+}
+function isPrimaryPress(event) {
+  return !(event.pointerType === "mouse" && event.button !== 0);
+}
+function isInIgnoredRegion(target, selector) {
+  const element = target instanceof Element ? target : target.parentElement;
+  return element?.closest(selector) != null;
+}
+
+// src/outside-press/use-outside-press.ts
+var import_react = require("react");
+function useOutsidePress(refs, onOutsidePress, { enabled = true, ignore } = {}) {
+  const refsRef = (0, import_react.useRef)(refs);
+  const handlerRef = (0, import_react.useRef)(onOutsidePress);
+  const ignoreRef = (0, import_react.useRef)(ignore);
+  (0, import_react.useEffect)(() => {
+    ignoreRef.current = ignore;
+    refsRef.current = refs;
+    handlerRef.current = onOutsidePress;
+  });
+  (0, import_react.useEffect)(() => {
+    if (!enabled) return;
+    function onPointerDown(event) {
+      if (!isPrimaryPress(event)) return;
+      const list = Array.isArray(refsRef.current) ? refsRef.current : [refsRef.current];
+      const elements = list.map((ref) => ref.current);
+      if (isOutside(event.target, elements, ignoreRef.current)) handlerRef.current(event);
+    }
+    document.addEventListener("pointerdown", onPointerDown, true);
+    return () => document.removeEventListener("pointerdown", onPointerDown, true);
+  }, [enabled]);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  isOutside,
+  isPrimaryPress,
+  useOutsidePress
+});

package/dist/outside-press.d.cts

@@ -0,0 +1,17 @@
+import { RefObject } from 'react';
+
+declare function isOutside(target: Node | null, elements: (Element | null)[], ignoreSelector?: string | null): boolean;
+declare function isPrimaryPress(event: {
+    button?: number;
+    pointerType?: string;
+}): boolean;
+
+type ElementRef = RefObject<Element | null>;
+interface UseOutsidePressOptions {
+    enabled?: boolean;
+    /** A press inside an element matching this selector counts as inside. */
+    ignore?: string;
+}
+declare function useOutsidePress(refs: ElementRef | ElementRef[], onOutsidePress: (event: PointerEvent) => void, { enabled, ignore }?: UseOutsidePressOptions): void;
+
+export { type UseOutsidePressOptions, isOutside, isPrimaryPress, useOutsidePress };

package/dist/outside-press.d.ts

@@ -0,0 +1,17 @@
+import { RefObject } from 'react';
+
+declare function isOutside(target: Node | null, elements: (Element | null)[], ignoreSelector?: string | null): boolean;
+declare function isPrimaryPress(event: {
+    button?: number;
+    pointerType?: string;
+}): boolean;
+
+type ElementRef = RefObject<Element | null>;
+interface UseOutsidePressOptions {
+    enabled?: boolean;
+    /** A press inside an element matching this selector counts as inside. */
+    ignore?: string;
+}
+declare function useOutsidePress(refs: ElementRef | ElementRef[], onOutsidePress: (event: PointerEvent) => void, { enabled, ignore }?: UseOutsidePressOptions): void;
+
+export { type UseOutsidePressOptions, isOutside, isPrimaryPress, useOutsidePress };

package/dist/outside-press.js

@@ -0,0 +1,11 @@
+"use client";
+import {
+  isOutside,
+  isPrimaryPress,
+  useOutsidePress
+} from "./chunk-DQBKU7HI.js";
+export {
+  isOutside,
+  isPrimaryPress,
+  useOutsidePress
+};