@develemit/web-hooks 0.1.0 → 0.2.0

package/dist/debounce.cjs

@@ -0,0 +1,96 @@
+"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/debounce/index.ts
+var debounce_exports = {};
+__export(debounce_exports, {
+  createDebouncer: () => createDebouncer,
+  useDebouncedCallback: () => useDebouncedCallback,
+  useDebouncedValue: () => useDebouncedValue
+});
+module.exports = __toCommonJS(debounce_exports);
+
+// src/debounce/debouncer.ts
+function createDebouncer(getFn, getMs) {
+  let timer;
+  let pending;
+  function clear() {
+    if (timer !== void 0) clearTimeout(timer);
+    timer = void 0;
+    pending = void 0;
+  }
+  function run() {
+    const args = pending;
+    clear();
+    if (args) getFn()(...args);
+  }
+  return {
+    call(...args) {
+      if (timer !== void 0) clearTimeout(timer);
+      pending = args;
+      timer = setTimeout(run, getMs());
+    },
+    cancel: clear,
+    flush() {
+      if (pending) run();
+    },
+    isPending: () => pending !== void 0
+  };
+}
+
+// src/debounce/use-debounced-value.ts
+var import_react = require("react");
+function useDebouncedValue(value, ms) {
+  const [debounced, setDebounced] = (0, import_react.useState)(value);
+  (0, import_react.useEffect)(() => {
+    const timer = setTimeout(() => setDebounced(value), ms);
+    return () => clearTimeout(timer);
+  }, [value, ms]);
+  return debounced;
+}
+
+// src/debounce/use-debounced-callback.ts
+var import_react2 = require("react");
+function useDebouncedCallback(fn, ms) {
+  const fnRef = (0, import_react2.useRef)(fn);
+  const msRef = (0, import_react2.useRef)(ms);
+  (0, import_react2.useEffect)(() => {
+    fnRef.current = fn;
+    msRef.current = ms;
+  });
+  const [debounced] = (0, import_react2.useState)(() => {
+    const debouncer = createDebouncer(
+      () => fnRef.current,
+      () => msRef.current
+    );
+    return Object.assign((...args) => debouncer.call(...args), {
+      cancel: debouncer.cancel,
+      flush: debouncer.flush
+    });
+  });
+  (0, import_react2.useEffect)(() => () => debounced.cancel(), [debounced]);
+  return debounced;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  createDebouncer,
+  useDebouncedCallback,
+  useDebouncedValue
+});

package/dist/debounce.d.cts

@@ -0,0 +1,21 @@
+interface Debouncer<Args extends unknown[]> {
+    call(...args: Args): void;
+    cancel(): void;
+    /** Runs the pending call right now; does nothing when none is pending. */
+    flush(): void;
+    isPending(): boolean;
+}
+/** `getFn` and `getMs` are read at call time, so the latest values always win. */
+declare function createDebouncer<Args extends unknown[]>(getFn: () => (...args: Args) => void, getMs: () => number): Debouncer<Args>;
+
+declare function useDebouncedValue<T>(value: T, ms: number): T;
+
+interface DebouncedCallback<Args extends unknown[]> {
+    (...args: Args): void;
+    cancel(): void;
+    flush(): void;
+}
+/** The returned function keeps one identity for the life of the component. */
+declare function useDebouncedCallback<Args extends unknown[]>(fn: (...args: Args) => void, ms: number): DebouncedCallback<Args>;
+
+export { type DebouncedCallback, type Debouncer, createDebouncer, useDebouncedCallback, useDebouncedValue };

package/dist/debounce.d.ts

@@ -0,0 +1,21 @@
+interface Debouncer<Args extends unknown[]> {
+    call(...args: Args): void;
+    cancel(): void;
+    /** Runs the pending call right now; does nothing when none is pending. */
+    flush(): void;
+    isPending(): boolean;
+}
+/** `getFn` and `getMs` are read at call time, so the latest values always win. */
+declare function createDebouncer<Args extends unknown[]>(getFn: () => (...args: Args) => void, getMs: () => number): Debouncer<Args>;
+
+declare function useDebouncedValue<T>(value: T, ms: number): T;
+
+interface DebouncedCallback<Args extends unknown[]> {
+    (...args: Args): void;
+    cancel(): void;
+    flush(): void;
+}
+/** The returned function keeps one identity for the life of the component. */
+declare function useDebouncedCallback<Args extends unknown[]>(fn: (...args: Args) => void, ms: number): DebouncedCallback<Args>;
+
+export { type DebouncedCallback, type Debouncer, createDebouncer, useDebouncedCallback, useDebouncedValue };

package/dist/debounce.js

@@ -0,0 +1,11 @@
+"use client";
+import {
+  createDebouncer,
+  useDebouncedCallback,
+  useDebouncedValue
+} from "./chunk-IWQDAJEP.js";
+export {
+  createDebouncer,
+  useDebouncedCallback,
+  useDebouncedValue
+};

package/dist/drawer-swipe.js

@@ -1,105 +1,16 @@
 "use client";
-
-// src/drawer-swipe/swipe-intent.ts
-var BACK_ZONE_PX = 60;
-var FORWARD_ZONE_PX = 30;
-var OPEN_DISTANCE_PX = 80;
-var CLOSE_DISTANCE_PX = 60;
-var VERTICAL_CANCEL_PX = 40;
-var MAX_SWIPE_DURATION_MS = 450;
-var HORIZONTAL_DOMINANCE = 1.5;
-function isInOpenZone(x, viewportWidth) {
-  return x > BACK_ZONE_PX && x < viewportWidth - FORWARD_ZONE_PX;
-}
-function resolveSwipeIntent(start, end, drawerOpen, viewportWidth) {
-  const dx = end.x - start.x;
-  const dy = end.y - start.y;
-  if (end.time - start.time > MAX_SWIPE_DURATION_MS) return null;
-  if (Math.abs(dx) < Math.abs(dy) * HORIZONTAL_DOMINANCE) return null;
-  if (drawerOpen) {
-    return dx <= -CLOSE_DISTANCE_PX ? "close" : null;
-  }
-  if (dx < OPEN_DISTANCE_PX) return null;
-  return isInOpenZone(start.x, viewportWidth) ? "open" : null;
-}
-function isInsideHorizontalScroller(target) {
-  let node = target instanceof Element ? target : null;
-  while (node && node !== document.body) {
-    const { overflowX } = window.getComputedStyle(node);
-    if ((overflowX === "auto" || overflowX === "scroll") && node.scrollWidth > node.clientWidth) {
-      return true;
-    }
-    node = node.parentElement;
-  }
-  return false;
-}
-
-// src/drawer-swipe/use-drawer-swipe.ts
-import { useEffect, useRef } from "react";
-function isWideViewport(maxViewportWidth) {
-  return window.matchMedia(`(min-width: ${maxViewportWidth}px)`).matches;
-}
-function useDrawerSwipe({
-  drawerOpen,
-  onOpen,
-  onClose,
-  enabled = true,
-  maxViewportWidth = 768
-}) {
-  const start = useRef(null);
-  const handlers = useRef({ drawerOpen, onOpen, onClose, maxViewportWidth });
-  handlers.current = { drawerOpen, onOpen, onClose, maxViewportWidth };
-  useEffect(() => {
-    if (!enabled) return;
-    function handleStart(event) {
-      start.current = null;
-      if (event.touches.length !== 1) return;
-      if (isWideViewport(handlers.current.maxViewportWidth)) return;
-      if (!handlers.current.drawerOpen && isInsideHorizontalScroller(event.target)) {
-        return;
-      }
-      const touch = event.touches[0];
-      if (!touch) return;
-      start.current = { x: touch.clientX, y: touch.clientY, time: Date.now() };
-    }
-    function handleMove(event) {
-      const origin = start.current;
-      const touch = event.touches[0];
-      if (!origin || !touch) return;
-      if (Math.abs(touch.clientY - origin.y) > VERTICAL_CANCEL_PX) {
-        start.current = null;
-      }
-    }
-    function handleEnd(event) {
-      const origin = start.current;
-      start.current = null;
-      const touch = event.changedTouches[0];
-      if (!origin || !touch) return;
-      const { drawerOpen: drawerOpen2, onOpen: onOpen2, onClose: onClose2 } = handlers.current;
-      const intent = resolveSwipeIntent(
-        origin,
-        { x: touch.clientX, y: touch.clientY, time: Date.now() },
-        drawerOpen2,
-        window.innerWidth
-      );
-      if (intent === "open") onOpen2();
-      if (intent === "close") onClose2();
-    }
-    function handleCancel() {
-      start.current = null;
-    }
-    document.addEventListener("touchstart", handleStart, { passive: true });
-    document.addEventListener("touchmove", handleMove, { passive: true });
-    document.addEventListener("touchend", handleEnd, { passive: true });
-    document.addEventListener("touchcancel", handleCancel, { passive: true });
-    return () => {
-      document.removeEventListener("touchstart", handleStart);
-      document.removeEventListener("touchmove", handleMove);
-      document.removeEventListener("touchend", handleEnd);
-      document.removeEventListener("touchcancel", handleCancel);
-    };
-  }, [enabled]);
-}
+import {
+  BACK_ZONE_PX,
+  CLOSE_DISTANCE_PX,
+  FORWARD_ZONE_PX,
+  MAX_SWIPE_DURATION_MS,
+  OPEN_DISTANCE_PX,
+  VERTICAL_CANCEL_PX,
+  isInOpenZone,
+  isInsideHorizontalScroller,
+  resolveSwipeIntent,
+  useDrawerSwipe
+} from "./chunk-OZ4PU4E3.js";
 export {
   BACK_ZONE_PX,
   CLOSE_DISTANCE_PX,

package/dist/escape.cjs

@@ -35,6 +35,7 @@ function useEscape(onEscape, active = true) {
   (0, import_react.useEffect)(() => {
     if (!active) return;
     function onKeyDown(event) {
+      if (event.isComposing || event.keyCode === 229) return;
       if (event.key === "Escape") handlerRef.current();
     }
     document.addEventListener("keydown", onKeyDown);

package/dist/escape.js

@@ -1,21 +1,7 @@
 "use client";
-
-// src/escape/use-escape.ts
-import { useEffect, useRef } from "react";
-function useEscape(onEscape, active = true) {
-  const handlerRef = useRef(onEscape);
-  useEffect(() => {
-    handlerRef.current = onEscape;
-  });
-  useEffect(() => {
-    if (!active) return;
-    function onKeyDown(event) {
-      if (event.key === "Escape") handlerRef.current();
-    }
-    document.addEventListener("keydown", onKeyDown);
-    return () => document.removeEventListener("keydown", onKeyDown);
-  }, [active]);
-}
+import {
+  useEscape
+} from "./chunk-S4YKMGQE.js";
 export {
   useEscape
 };

package/dist/focus-trap.cjs

@@ -58,6 +58,9 @@ function useFocusTrap(containerRef, {
   if (active && !openerRef.current && typeof document !== "undefined") {
     openerRef.current = document.activeElement;
   }
+  (0, import_react.useEffect)(() => {
+    if (!active) openerRef.current = null;
+  }, [active]);
   (0, import_react.useEffect)(() => {
     const container = containerRef.current;
     if (!active || !container) return;
@@ -94,7 +97,6 @@ function useFocusTrap(containerRef, {
       document.removeEventListener("keydown", onKeyDown);
       activeTraps.splice(activeTraps.indexOf(token), 1);
       const opener = returnFocusRef?.current ?? openerRef.current;
-      openerRef.current = null;
       if (restoreFocus && opener?.isConnected) opener.focus();
     };
   }, [active, containerRef, initialFocusRef, returnFocusRef, restoreFocus]);

package/dist/focus-trap.js

@@ -1,76 +1,10 @@
 "use client";
-
-// src/focus-trap/focusables.ts
-var FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
-function focusableWithin(container) {
-  return Array.from(
-    container.querySelectorAll(FOCUSABLE_SELECTOR)
-  ).filter((el) => !el.closest("[hidden], [inert]"));
-}
-function nextFocusTarget(items, current, shiftKey, container) {
-  const first = items[0];
-  const last = items[items.length - 1];
-  if (!first || !last) return null;
-  if (!current || !container.contains(current)) return shiftKey ? last : first;
-  if (shiftKey && (current === first || current === container)) return last;
-  if (!shiftKey && current === last) return first;
-  return null;
-}
-
-// src/focus-trap/use-focus-trap.ts
-import { useEffect, useRef } from "react";
-var activeTraps = [];
-function useFocusTrap(containerRef, {
-  active,
-  initialFocusRef,
-  returnFocusRef,
-  restoreFocus = true
-}) {
-  const openerRef = useRef(null);
-  if (active && !openerRef.current && typeof document !== "undefined") {
-    openerRef.current = document.activeElement;
-  }
-  useEffect(() => {
-    const container = containerRef.current;
-    if (!active || !container) return;
-    const token = {};
-    activeTraps.push(token);
-    if (!container.contains(document.activeElement)) {
-      const target = initialFocusRef?.current ?? focusableWithin(container)[0] ?? container;
-      if (target === container && !container.hasAttribute("tabindex")) {
-        container.setAttribute("tabindex", "-1");
-      }
-      target.focus();
-    }
-    function onKeyDown(event) {
-      if (event.key !== "Tab" || !container) return;
-      if (activeTraps[activeTraps.length - 1] !== token) return;
-      const items = focusableWithin(container);
-      if (items.length === 0) {
-        event.preventDefault();
-        return;
-      }
-      const target = nextFocusTarget(
-        items,
-        document.activeElement,
-        event.shiftKey,
-        container
-      );
-      if (target) {
-        event.preventDefault();
-        target.focus();
-      }
-    }
-    document.addEventListener("keydown", onKeyDown);
-    return () => {
-      document.removeEventListener("keydown", onKeyDown);
-      activeTraps.splice(activeTraps.indexOf(token), 1);
-      const opener = returnFocusRef?.current ?? openerRef.current;
-      openerRef.current = null;
-      if (restoreFocus && opener?.isConnected) opener.focus();
-    };
-  }, [active, containerRef, initialFocusRef, returnFocusRef, restoreFocus]);
-}
+import {
+  FOCUSABLE_SELECTOR,
+  focusableWithin,
+  nextFocusTarget,
+  useFocusTrap
+} from "./chunk-DNU57XEJ.js";
 export {
   FOCUSABLE_SELECTOR,
   focusableWithin,

package/dist/hotkey.cjs

@@ -0,0 +1,127 @@
+"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/hotkey/index.ts
+var hotkey_exports = {};
+__export(hotkey_exports, {
+  detectApple: () => detectApple,
+  isEditableTarget: () => isEditableTarget,
+  matchHotkey: () => matchHotkey,
+  parseHotkey: () => parseHotkey,
+  useHotkey: () => useHotkey
+});
+module.exports = __toCommonJS(hotkey_exports);
+
+// src/hotkey/parse-hotkey.ts
+var KEY_ALIASES = {
+  esc: "escape",
+  space: " ",
+  plus: "+",
+  up: "arrowup",
+  down: "arrowdown",
+  left: "arrowleft",
+  right: "arrowright"
+};
+function parseHotkey(combo) {
+  const parsed = { key: "", mod: false, ctrl: false, meta: false, alt: false, shift: false };
+  const parts = combo.trim().toLowerCase().split(/\+(?=.)/);
+  for (const part of parts) {
+    const token = part.trim();
+    if (token === "mod" || token === "ctrl" || token === "meta" || token === "alt" || token === "shift") {
+      parsed[token] = true;
+    } else {
+      parsed.key = KEY_ALIASES[token] ?? token;
+    }
+  }
+  if (!parsed.key) throw new Error(`Invalid hotkey "${combo}": no key`);
+  return parsed;
+}
+
+// src/hotkey/match-hotkey.ts
+var CODE_FOR_SYMBOL = {
+  "/": "Slash",
+  ".": "Period",
+  ",": "Comma",
+  ";": "Semicolon",
+  "'": "Quote",
+  "[": "BracketLeft",
+  "]": "BracketRight",
+  "\\": "Backslash",
+  "-": "Minus",
+  "=": "Equal",
+  "`": "Backquote"
+};
+function physicalCode(key) {
+  if (/^[a-z]$/.test(key)) return `Key${key.toUpperCase()}`;
+  if (/^[0-9]$/.test(key)) return `Digit${key}`;
+  return CODE_FOR_SYMBOL[key] ?? null;
+}
+function keyMatches(event, parsed) {
+  if (event.key.toLowerCase() === parsed.key) return true;
+  return parsed.shift && physicalCode(parsed.key) === event.code;
+}
+function matchHotkey(event, combo, isApple) {
+  const parsed = typeof combo === "string" ? parseHotkey(combo) : combo;
+  const wantMeta = parsed.meta || parsed.mod && isApple;
+  const wantCtrl = parsed.ctrl || parsed.mod && !isApple;
+  return event.metaKey === wantMeta && event.ctrlKey === wantCtrl && event.altKey === parsed.alt && event.shiftKey === parsed.shift && keyMatches(event, parsed);
+}
+function detectApple(nav) {
+  if (!nav) return false;
+  const platform = nav.userAgentData?.platform || nav.platform || "";
+  return /mac|iphone|ipad|ipod/i.test(platform);
+}
+function isEditableTarget(target) {
+  const el = target;
+  if (!el || typeof el.tagName !== "string") return false;
+  const tag = el.tagName.toLowerCase();
+  return tag === "input" || tag === "textarea" || tag === "select" || el.isContentEditable === true;
+}
+
+// src/hotkey/use-hotkey.ts
+var import_react = require("react");
+function useHotkey(combo, onHotkey, options = {}) {
+  const { enabled = true, allowInInputs = false, preventDefault = true } = options;
+  const handlerRef = (0, import_react.useRef)(onHotkey);
+  (0, import_react.useEffect)(() => {
+    handlerRef.current = onHotkey;
+  });
+  (0, import_react.useEffect)(() => {
+    if (!enabled) return;
+    const parsed = parseHotkey(combo);
+    function onKeyDown(event) {
+      if (event.isComposing || event.keyCode === 229) return;
+      if (!allowInInputs && isEditableTarget(event.target)) return;
+      if (!matchHotkey(event, parsed, detectApple(navigator))) return;
+      if (preventDefault) event.preventDefault();
+      handlerRef.current(event);
+    }
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [combo, enabled, allowInInputs, preventDefault]);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  detectApple,
+  isEditableTarget,
+  matchHotkey,
+  parseHotkey,
+  useHotkey
+});

package/dist/hotkey.d.cts

@@ -0,0 +1,31 @@
+interface ParsedHotkey {
+    key: string;
+    mod: boolean;
+    ctrl: boolean;
+    meta: boolean;
+    alt: boolean;
+    shift: boolean;
+}
+declare function parseHotkey(combo: string): ParsedHotkey;
+
+type KeyEventLike = Pick<KeyboardEvent, 'key' | 'code' | 'ctrlKey' | 'metaKey' | 'altKey' | 'shiftKey'>;
+/** `isApple` decides what `mod` means: Cmd on Apple devices, Ctrl elsewhere. */
+declare function matchHotkey(event: KeyEventLike, combo: string | ParsedHotkey, isApple: boolean): boolean;
+interface NavigatorLike {
+    platform?: string;
+    userAgentData?: {
+        platform?: string;
+    };
+}
+/** iPad in desktop mode reports MacIntel, so it counts as Apple. */
+declare function detectApple(nav: NavigatorLike | undefined): boolean;
+declare function isEditableTarget(target: EventTarget | null): boolean;
+
+interface UseHotkeyOptions {
+    enabled?: boolean;
+    allowInInputs?: boolean;
+    preventDefault?: boolean;
+}
+declare function useHotkey(combo: string, onHotkey: (event: KeyboardEvent) => void, options?: UseHotkeyOptions): void;
+
+export { type ParsedHotkey, type UseHotkeyOptions, detectApple, isEditableTarget, matchHotkey, parseHotkey, useHotkey };

package/dist/hotkey.d.ts

@@ -0,0 +1,31 @@
+interface ParsedHotkey {
+    key: string;
+    mod: boolean;
+    ctrl: boolean;
+    meta: boolean;
+    alt: boolean;
+    shift: boolean;
+}
+declare function parseHotkey(combo: string): ParsedHotkey;
+
+type KeyEventLike = Pick<KeyboardEvent, 'key' | 'code' | 'ctrlKey' | 'metaKey' | 'altKey' | 'shiftKey'>;
+/** `isApple` decides what `mod` means: Cmd on Apple devices, Ctrl elsewhere. */
+declare function matchHotkey(event: KeyEventLike, combo: string | ParsedHotkey, isApple: boolean): boolean;
+interface NavigatorLike {
+    platform?: string;
+    userAgentData?: {
+        platform?: string;
+    };
+}
+/** iPad in desktop mode reports MacIntel, so it counts as Apple. */
+declare function detectApple(nav: NavigatorLike | undefined): boolean;
+declare function isEditableTarget(target: EventTarget | null): boolean;
+
+interface UseHotkeyOptions {
+    enabled?: boolean;
+    allowInInputs?: boolean;
+    preventDefault?: boolean;
+}
+declare function useHotkey(combo: string, onHotkey: (event: KeyboardEvent) => void, options?: UseHotkeyOptions): void;
+
+export { type ParsedHotkey, type UseHotkeyOptions, detectApple, isEditableTarget, matchHotkey, parseHotkey, useHotkey };

package/dist/hotkey.js

@@ -0,0 +1,15 @@
+"use client";
+import {
+  detectApple,
+  isEditableTarget,
+  matchHotkey,
+  parseHotkey,
+  useHotkey
+} from "./chunk-NKLEB5TR.js";
+export {
+  detectApple,
+  isEditableTarget,
+  matchHotkey,
+  parseHotkey,
+  useHotkey
+};