@jbpark/use-hooks 2.11.0 → 3.0.0

package/dist/hooks/use-key-press.mjs

@@ -0,0 +1,63 @@
+import { useEffect, useRef } from "react";
+
+//#region src/hooks/use-key-press.ts
+const isMac = () => typeof navigator !== "undefined" && /Mac|iPhone|iPad|iPod/.test(navigator.userAgent);
+const parseCombo = (combo) => {
+	const parts = combo.split("+").map((part) => part.trim().toLowerCase());
+	const key = parts[parts.length - 1] ?? "";
+	const modifiers = parts.slice(0, -1);
+	let ctrl = modifiers.includes("ctrl");
+	let meta = modifiers.includes("meta") || modifiers.includes("cmd");
+	const shift = modifiers.includes("shift");
+	const alt = modifiers.includes("alt") || modifiers.includes("option");
+	if (modifiers.includes("mod")) if (isMac()) meta = true;
+	else ctrl = true;
+	return {
+		key,
+		ctrl,
+		meta,
+		shift,
+		alt
+	};
+};
+const matchesCombo = (event, combo) => event.key.toLowerCase() === combo.key && event.ctrlKey === combo.ctrl && event.metaKey === combo.meta && event.shiftKey === combo.shift && event.altKey === combo.alt;
+const resolveTarget = (target) => {
+	if (!target) return typeof window === "undefined" ? null : window;
+	return "current" in target ? target.current : target;
+};
+const useKeyPress = (combo, handler, options = {}) => {
+	const { target, enabled = true, preventDefault = false, ignore } = options;
+	const handlerRef = useRef(handler);
+	useEffect(() => {
+		handlerRef.current = handler;
+	});
+	const combos = Array.isArray(combo) ? combo : [combo];
+	const parsedCombos = combos.map(parseCombo);
+	useEffect(() => {
+		if (!enabled) return;
+		const resolvedTarget = resolveTarget(target);
+		if (!resolvedTarget) return;
+		const onKeyDown = (event) => {
+			const keyboardEvent = event;
+			const eventTarget = keyboardEvent.target;
+			if (ignore && eventTarget?.closest(ignore)) return;
+			if (!parsedCombos.some((parsed) => matchesCombo(keyboardEvent, parsed))) return;
+			if (preventDefault) keyboardEvent.preventDefault();
+			handlerRef.current(keyboardEvent);
+		};
+		resolvedTarget.addEventListener("keydown", onKeyDown);
+		return () => {
+			resolvedTarget.removeEventListener("keydown", onKeyDown);
+		};
+	}, [
+		enabled,
+		combos.join(","),
+		target,
+		preventDefault,
+		ignore
+	]);
+};
+
+//#endregion
+export { useKeyPress as default };
+//# sourceMappingURL=use-key-press.mjs.map

package/dist/hooks/use-key-press.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-key-press.mjs","names":[],"sources":["../../src/hooks/use-key-press.ts"],"sourcesContent":["import { type RefObject, useEffect, useRef } from 'react';\n\ntype KeyPressTarget =\n  | RefObject<HTMLElement | null>\n  | Window\n  | Document\n  | HTMLElement\n  | null\n  | undefined;\n\ninterface Options {\n  target?: KeyPressTarget;\n  enabled?: boolean;\n  preventDefault?: boolean;\n  // CSS selector — a keydown whose target is inside a matching element is\n  // ignored (e.g. don't hijack Cmd+Z while the user is typing in a code\n  // editor that has its own undo).\n  ignore?: string;\n}\n\ninterface ParsedCombo {\n  key: string;\n  ctrl: boolean;\n  meta: boolean;\n  shift: boolean;\n  alt: boolean;\n}\n\nconst isMac = () =>\n  typeof navigator !== 'undefined' &&\n  /Mac|iPhone|iPad|iPod/.test(navigator.userAgent);\n\n// `mod` normalizes to the platform's usual \"primary\" modifier (Cmd on\n// macOS, Ctrl elsewhere) so a single combo string covers both without the\n// caller branching on platform themselves.\nconst parseCombo = (combo: string): ParsedCombo => {\n  const parts = combo.split('+').map(part => part.trim().toLowerCase());\n  const key = parts[parts.length - 1] ?? '';\n  const modifiers = parts.slice(0, -1);\n\n  let ctrl = modifiers.includes('ctrl');\n  let meta = modifiers.includes('meta') || modifiers.includes('cmd');\n  const shift = modifiers.includes('shift');\n  const alt = modifiers.includes('alt') || modifiers.includes('option');\n\n  if (modifiers.includes('mod')) {\n    if (isMac()) {\n      meta = true;\n    } else {\n      ctrl = true;\n    }\n  }\n\n  return { key, ctrl, meta, shift, alt };\n};\n\n// Modifiers not named in the combo are required to be *absent*, not just\n// ignored — otherwise 'mod+z' and 'mod+shift+z' registered as separate\n// bindings (the exact motivating case for this hook) would both fire on\n// the same Cmd+Shift+Z keypress instead of only the latter.\nconst matchesCombo = (event: KeyboardEvent, combo: ParsedCombo) =>\n  event.key.toLowerCase() === combo.key &&\n  event.ctrlKey === combo.ctrl &&\n  event.metaKey === combo.meta &&\n  event.shiftKey === combo.shift &&\n  event.altKey === combo.alt;\n\nconst resolveTarget = (target: KeyPressTarget): EventTarget | null => {\n  if (!target) {\n    return typeof window === 'undefined' ? null : window;\n  }\n  return 'current' in target ? target.current : target;\n};\n\nconst useKeyPress = (\n  combo: string | string[],\n  handler: (event: KeyboardEvent) => void,\n  options: Options = {},\n) => {\n  const { target, enabled = true, preventDefault = false, ignore } = options;\n\n  const handlerRef = useRef(handler);\n\n  useEffect(() => {\n    handlerRef.current = handler;\n  });\n\n  const combos = Array.isArray(combo) ? combo : [combo];\n  const parsedCombos = combos.map(parseCombo);\n  // `combos` is typically a fresh array literal at the call site — depend\n  // on a stable string proxy instead so this doesn't tear down and\n  // re-register the listener on every render. `target` itself (a\n  // RefObject, or window/document/an element variable) is normally\n  // already stable across renders, so it's used directly below.\n  const comboKey = combos.join(',');\n\n  useEffect(() => {\n    if (!enabled) {\n      return;\n    }\n\n    const resolvedTarget = resolveTarget(target);\n\n    if (!resolvedTarget) {\n      return;\n    }\n\n    const onKeyDown = (event: Event) => {\n      const keyboardEvent = event as KeyboardEvent;\n      const eventTarget = keyboardEvent.target as HTMLElement | null;\n\n      if (ignore && eventTarget?.closest(ignore)) {\n        return;\n      }\n\n      if (!parsedCombos.some(parsed => matchesCombo(keyboardEvent, parsed))) {\n        return;\n      }\n\n      if (preventDefault) {\n        keyboardEvent.preventDefault();\n      }\n\n      handlerRef.current(keyboardEvent);\n    };\n\n    resolvedTarget.addEventListener('keydown', onKeyDown);\n\n    return () => {\n      resolvedTarget.removeEventListener('keydown', onKeyDown);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [enabled, comboKey, target, preventDefault, ignore]);\n};\n\nexport default useKeyPress;\n"],"mappings":";;;AA4BA,MAAM,cACJ,OAAO,cAAc,eACrB,uBAAuB,KAAK,UAAU,UAAU;AAKlD,MAAM,cAAc,UAA+B;CACjD,MAAM,QAAQ,MAAM,MAAM,IAAI,CAAC,KAAI,SAAQ,KAAK,MAAM,CAAC,aAAa,CAAC;CACrE,MAAM,MAAM,MAAM,MAAM,SAAS,MAAM;CACvC,MAAM,YAAY,MAAM,MAAM,GAAG,GAAG;CAEpC,IAAI,OAAO,UAAU,SAAS,OAAO;CACrC,IAAI,OAAO,UAAU,SAAS,OAAO,IAAI,UAAU,SAAS,MAAM;CAClE,MAAM,QAAQ,UAAU,SAAS,QAAQ;CACzC,MAAM,MAAM,UAAU,SAAS,MAAM,IAAI,UAAU,SAAS,SAAS;AAErE,KAAI,UAAU,SAAS,MAAM,CAC3B,KAAI,OAAO,CACT,QAAO;KAEP,QAAO;AAIX,QAAO;EAAE;EAAK;EAAM;EAAM;EAAO;EAAK;;AAOxC,MAAM,gBAAgB,OAAsB,UAC1C,MAAM,IAAI,aAAa,KAAK,MAAM,OAClC,MAAM,YAAY,MAAM,QACxB,MAAM,YAAY,MAAM,QACxB,MAAM,aAAa,MAAM,SACzB,MAAM,WAAW,MAAM;AAEzB,MAAM,iBAAiB,WAA+C;AACpE,KAAI,CAAC,OACH,QAAO,OAAO,WAAW,cAAc,OAAO;AAEhD,QAAO,aAAa,SAAS,OAAO,UAAU;;AAGhD,MAAM,eACJ,OACA,SACA,UAAmB,EAAE,KAClB;CACH,MAAM,EAAE,QAAQ,UAAU,MAAM,iBAAiB,OAAO,WAAW;CAEnE,MAAM,aAAa,OAAO,QAAQ;AAElC,iBAAgB;AACd,aAAW,UAAU;GACrB;CAEF,MAAM,SAAS,MAAM,QAAQ,MAAM,GAAG,QAAQ,CAAC,MAAM;CACrD,MAAM,eAAe,OAAO,IAAI,WAAW;AAQ3C,iBAAgB;AACd,MAAI,CAAC,QACH;EAGF,MAAM,iBAAiB,cAAc,OAAO;AAE5C,MAAI,CAAC,eACH;EAGF,MAAM,aAAa,UAAiB;GAClC,MAAM,gBAAgB;GACtB,MAAM,cAAc,cAAc;AAElC,OAAI,UAAU,aAAa,QAAQ,OAAO,CACxC;AAGF,OAAI,CAAC,aAAa,MAAK,WAAU,aAAa,eAAe,OAAO,CAAC,CACnE;AAGF,OAAI,eACF,eAAc,gBAAgB;AAGhC,cAAW,QAAQ,cAAc;;AAGnC,iBAAe,iBAAiB,WAAW,UAAU;AAErD,eAAa;AACX,kBAAe,oBAAoB,WAAW,UAAU;;IAGzD;EAAC;EAtCa,OAAO,KAAK,IAAI;EAsCV;EAAQ;EAAgB;EAAO,CAAC"}

package/dist/hooks/use-merged-ref.d.mts

@@ -0,0 +1,8 @@
+import { RefObject } from "react";
+
+//#region src/hooks/use-merged-ref.d.ts
+type MergeableRef<T> = ((node: T | null) => void | (() => void)) | RefObject<T | null> | null | undefined;
+declare const useMergedRef: <T>(...refs: MergeableRef<T>[]) => (node: T | null) => (() => void) | undefined;
+//#endregion
+export { useMergedRef };
+//# sourceMappingURL=use-merged-ref.d.mts.map

package/dist/hooks/use-merged-ref.mjs

@@ -0,0 +1,25 @@
+import { useCallback } from "react";
+
+//#region src/hooks/use-merged-ref.ts
+const useMergedRef = (...refs) => {
+	return useCallback((node) => {
+		const cleanups = [];
+		refs.forEach((ref) => {
+			if (!ref) return;
+			if (typeof ref === "function") {
+				const cleanup = ref(node);
+				if (typeof cleanup === "function") cleanups.push(cleanup);
+				return;
+			}
+			ref.current = node;
+		});
+		if (cleanups.length === 0) return;
+		return () => {
+			cleanups.forEach((cleanup) => cleanup());
+		};
+	}, refs);
+};
+
+//#endregion
+export { useMergedRef as default };
+//# sourceMappingURL=use-merged-ref.mjs.map

package/dist/hooks/use-merged-ref.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-merged-ref.mjs","names":[],"sources":["../../src/hooks/use-merged-ref.ts"],"sourcesContent":["import { type RefObject, useCallback } from 'react';\n\ntype MergeableRef<T> =\n  | ((node: T | null) => void | (() => void))\n  | RefObject<T | null>\n  | null\n  | undefined;\n\n// Merges any number of refs (forwarded function refs, RefObjects, or\n// either left null/undefined) into one callback ref that updates all of\n// them. Collects React 19's optional per-ref cleanup return values and\n// runs them together when the node detaches.\nconst useMergedRef = <T>(...refs: MergeableRef<T>[]) => {\n  return useCallback((node: T | null) => {\n    const cleanups: (() => void)[] = [];\n\n    refs.forEach(ref => {\n      if (!ref) {\n        return;\n      }\n\n      if (typeof ref === 'function') {\n        const cleanup = ref(node);\n\n        if (typeof cleanup === 'function') {\n          cleanups.push(cleanup);\n        }\n        return;\n      }\n\n      ref.current = node;\n    });\n\n    if (cleanups.length === 0) {\n      return;\n    }\n\n    return () => {\n      cleanups.forEach(cleanup => cleanup());\n    };\n    // The number of refs passed at a given call site is stable across\n    // renders even though this array literal isn't — same pattern every\n    // ref-merging hook of this shape relies on.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, refs);\n};\n\nexport default useMergedRef;\n"],"mappings":";;;AAYA,MAAM,gBAAmB,GAAG,SAA4B;AACtD,QAAO,aAAa,SAAmB;EACrC,MAAM,WAA2B,EAAE;AAEnC,OAAK,SAAQ,QAAO;AAClB,OAAI,CAAC,IACH;AAGF,OAAI,OAAO,QAAQ,YAAY;IAC7B,MAAM,UAAU,IAAI,KAAK;AAEzB,QAAI,OAAO,YAAY,WACrB,UAAS,KAAK,QAAQ;AAExB;;AAGF,OAAI,UAAU;IACd;AAEF,MAAI,SAAS,WAAW,EACtB;AAGF,eAAa;AACX,YAAS,SAAQ,YAAW,SAAS,CAAC;;IAMvC,KAAK"}

package/dist/hooks/use-mutation-observer.d.mts

@@ -0,0 +1,11 @@
+import { RefObject } from "react";
+
+//#region src/hooks/use-mutation-observer.d.ts
+type Target<T extends Node> = RefObject<T | null> | T | null | undefined;
+interface Options extends MutationObserverInit {
+  enabled?: boolean;
+}
+declare const useMutationObserver: <T extends Node>(target: Target<T>, callback: MutationCallback, options?: Options) => void;
+//#endregion
+export { useMutationObserver };
+//# sourceMappingURL=use-mutation-observer.d.mts.map

package/dist/hooks/use-mutation-observer.mjs

@@ -0,0 +1,33 @@
+import { useEffect, useRef } from "react";
+
+//#region src/hooks/use-mutation-observer.ts
+const resolveTarget = (target) => {
+	if (!target) return null;
+	return "current" in target ? target.current : target;
+};
+const useMutationObserver = (target, callback, options = {}) => {
+	const { enabled = true, ...mutationOptions } = options;
+	const callbackRef = useRef(callback);
+	useEffect(() => {
+		callbackRef.current = callback;
+	});
+	useEffect(() => {
+		const node = resolveTarget(target);
+		if (!enabled || !node || typeof MutationObserver === "undefined") return;
+		const observer = new MutationObserver((mutations, obs) => {
+			callbackRef.current(mutations, obs);
+		});
+		observer.observe(node, mutationOptions);
+		return () => {
+			observer.disconnect();
+		};
+	}, [
+		target,
+		enabled,
+		JSON.stringify(mutationOptions)
+	]);
+};
+
+//#endregion
+export { useMutationObserver as default };
+//# sourceMappingURL=use-mutation-observer.mjs.map

package/dist/hooks/use-mutation-observer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-mutation-observer.mjs","names":[],"sources":["../../src/hooks/use-mutation-observer.ts"],"sourcesContent":["import { type RefObject, useEffect, useRef } from 'react';\n\ntype Target<T extends Node> = RefObject<T | null> | T | null | undefined;\n\ninterface Options extends MutationObserverInit {\n  enabled?: boolean;\n}\n\nconst resolveTarget = <T extends Node>(target: Target<T>): T | null => {\n  if (!target) {\n    return null;\n  }\n  return 'current' in target ? target.current : target;\n};\n\n// Takes the target directly (a RefObject, or a plain Node like\n// document.head that isn't behind any React ref at all) rather than\n// producing its own — this and useResizeObserver together replace the\n// ResizeObserver+MutationObserver pair live-editor's iframe hand-rolls\n// for auto-sizing its preview content.\nconst useMutationObserver = <T extends Node>(\n  target: Target<T>,\n  callback: MutationCallback,\n  options: Options = {},\n) => {\n  const { enabled = true, ...mutationOptions } = options;\n\n  const callbackRef = useRef(callback);\n\n  useEffect(() => {\n    callbackRef.current = callback;\n  });\n\n  // `mutationOptions` is typically a fresh object literal at the call\n  // site — serialize it into a stable key instead of depending on the\n  // object itself, which would tear down and recreate the observer on\n  // every render.\n  const optionsKey = JSON.stringify(mutationOptions);\n\n  useEffect(() => {\n    const node = resolveTarget(target);\n\n    if (!enabled || !node || typeof MutationObserver === 'undefined') {\n      return;\n    }\n\n    const observer = new MutationObserver((mutations, obs) => {\n      callbackRef.current(mutations, obs);\n    });\n\n    observer.observe(node, mutationOptions);\n\n    return () => {\n      observer.disconnect();\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [target, enabled, optionsKey]);\n};\n\nexport default useMutationObserver;\n"],"mappings":";;;AAQA,MAAM,iBAAiC,WAAgC;AACrE,KAAI,CAAC,OACH,QAAO;AAET,QAAO,aAAa,SAAS,OAAO,UAAU;;AAQhD,MAAM,uBACJ,QACA,UACA,UAAmB,EAAE,KAClB;CACH,MAAM,EAAE,UAAU,MAAM,GAAG,oBAAoB;CAE/C,MAAM,cAAc,OAAO,SAAS;AAEpC,iBAAgB;AACd,cAAY,UAAU;GACtB;AAQF,iBAAgB;EACd,MAAM,OAAO,cAAc,OAAO;AAElC,MAAI,CAAC,WAAW,CAAC,QAAQ,OAAO,qBAAqB,YACnD;EAGF,MAAM,WAAW,IAAI,kBAAkB,WAAW,QAAQ;AACxD,eAAY,QAAQ,WAAW,IAAI;IACnC;AAEF,WAAS,QAAQ,MAAM,gBAAgB;AAEvC,eAAa;AACX,YAAS,YAAY;;IAGtB;EAAC;EAAQ;EAnBO,KAAK,UAAU,gBAAgB;EAmBlB,CAAC"}

package/dist/hooks/use-previous.d.mts

@@ -0,0 +1,5 @@
+//#region src/hooks/use-previous.d.ts
+declare const usePrevious: <T>(value: T) => T | undefined;
+//#endregion
+export { usePrevious };
+//# sourceMappingURL=use-previous.d.mts.map

package/dist/hooks/use-previous.mjs

@@ -0,0 +1,14 @@
+import { useEffect, useRef } from "react";
+
+//#region src/hooks/use-previous.ts
+const usePrevious = (value) => {
+	const ref = useRef(void 0);
+	useEffect(() => {
+		ref.current = value;
+	});
+	return ref.current;
+};
+
+//#endregion
+export { usePrevious as default };
+//# sourceMappingURL=use-previous.mjs.map

package/dist/hooks/use-previous.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-previous.mjs","names":[],"sources":["../../src/hooks/use-previous.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\n// Returns the value from the *previous* render. Updated in an effect\n// (which runs after render/paint) rather than during render, so the\n// current render still reads whatever was current one render ago.\nconst usePrevious = <T>(value: T): T | undefined => {\n  const ref = useRef<T | undefined>(undefined);\n\n  useEffect(() => {\n    ref.current = value;\n  });\n\n  return ref.current;\n};\n\nexport default usePrevious;\n"],"mappings":";;;AAKA,MAAM,eAAkB,UAA4B;CAClD,MAAM,MAAM,OAAsB,OAAU;AAE5C,iBAAgB;AACd,MAAI,UAAU;GACd;AAEF,QAAO,IAAI"}

package/dist/hooks/use-resize-observer.d.mts

@@ -0,0 +1,12 @@
+//#region src/hooks/use-resize-observer.d.ts
+interface Size {
+  width: number;
+  height: number;
+}
+interface Options {
+  box?: ResizeObserverBoxOptions;
+}
+declare const useResizeObserver: <T extends Element = Element>(options?: Options) => [(node: T | null) => void, Size | null];
+//#endregion
+export { useResizeObserver };
+//# sourceMappingURL=use-resize-observer.d.mts.map

package/dist/hooks/use-resize-observer.mjs

@@ -0,0 +1,29 @@
+import { useCallback, useRef, useState } from "react";
+
+//#region src/hooks/use-resize-observer.ts
+const useResizeObserver = (options) => {
+	const [size, setSize] = useState(null);
+	const observerRef = useRef(null);
+	return [useCallback((node) => {
+		if (observerRef.current) {
+			observerRef.current.disconnect();
+			observerRef.current = null;
+		}
+		if (!node || typeof ResizeObserver === "undefined") return;
+		const box = options?.box ?? "content-box";
+		const observer = new ResizeObserver(([entry]) => {
+			if (!entry) return;
+			const [{ inlineSize, blockSize }] = box === "border-box" ? entry.borderBoxSize : entry.contentBoxSize;
+			setSize({
+				width: inlineSize,
+				height: blockSize
+			});
+		});
+		observer.observe(node, { box });
+		observerRef.current = observer;
+	}, []), size];
+};
+
+//#endregion
+export { useResizeObserver as default };
+//# sourceMappingURL=use-resize-observer.mjs.map

package/dist/hooks/use-resize-observer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-resize-observer.mjs","names":[],"sources":["../../src/hooks/use-resize-observer.ts"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\n\ninterface Size {\n  width: number;\n  height: number;\n}\n\ninterface Options {\n  box?: ResizeObserverBoxOptions;\n}\n\n// The unprocessed version of useResponsiveSize/useElementScroll/\n// useElementPosition — those each return values shaped for their own\n// purpose (breakpoints, scroll position, a viewport-relative DOMRect).\n// This one just reports an element's own width/height.\nconst useResizeObserver = <T extends Element = Element>(\n  options?: Options,\n): [(node: T | null) => void, Size | null] => {\n  const [size, setSize] = useState<Size | null>(null);\n  const observerRef = useRef<ResizeObserver | null>(null);\n\n  // Same convention as useIntersectionObserver: `options` is typically a\n  // fresh object literal at the call site, so it isn't a dependency here\n  // — that would tear down and recreate the observer on every render. The\n  // ref callback only re-runs when the observed node itself changes,\n  // capturing whatever `options` was current at that time.\n  const ref = useCallback((node: T | null) => {\n    if (observerRef.current) {\n      observerRef.current.disconnect();\n      observerRef.current = null;\n    }\n\n    if (!node || typeof ResizeObserver === 'undefined') {\n      return;\n    }\n\n    const box = options?.box ?? 'content-box';\n\n    const observer = new ResizeObserver(([entry]) => {\n      if (!entry) {\n        return;\n      }\n\n      const [{ inlineSize, blockSize }] =\n        box === 'border-box' ? entry.borderBoxSize : entry.contentBoxSize;\n\n      setSize({ width: inlineSize, height: blockSize });\n    });\n\n    observer.observe(node, { box });\n    observerRef.current = observer;\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  return [ref, size];\n};\n\nexport default useResizeObserver;\n"],"mappings":";;;AAeA,MAAM,qBACJ,YAC4C;CAC5C,MAAM,CAAC,MAAM,WAAW,SAAsB,KAAK;CACnD,MAAM,cAAc,OAA8B,KAAK;AAmCvD,QAAO,CA5BK,aAAa,SAAmB;AAC1C,MAAI,YAAY,SAAS;AACvB,eAAY,QAAQ,YAAY;AAChC,eAAY,UAAU;;AAGxB,MAAI,CAAC,QAAQ,OAAO,mBAAmB,YACrC;EAGF,MAAM,MAAM,SAAS,OAAO;EAE5B,MAAM,WAAW,IAAI,gBAAgB,CAAC,WAAW;AAC/C,OAAI,CAAC,MACH;GAGF,MAAM,CAAC,EAAE,YAAY,eACnB,QAAQ,eAAe,MAAM,gBAAgB,MAAM;AAErD,WAAQ;IAAE,OAAO;IAAY,QAAQ;IAAW,CAAC;IACjD;AAEF,WAAS,QAAQ,MAAM,EAAE,KAAK,CAAC;AAC/B,cAAY,UAAU;IAErB,EAAE,CAAC,EAEO,KAAK"}

package/dist/hooks/use-scroll-to-elements.d.mts

@@ -1,13 +1,15 @@
-import * as react from "react";
+import { RefObject } from "react";
 
 //#region src/hooks/use-scroll-to-elements.d.ts
+type ElementKey = string;
+type ScrollContainer = HTMLElement | RefObject<HTMLElement | null> | null;
 interface Options extends ScrollIntoViewOptions {
   offset?: number;
+  container?: ScrollContainer;
 }
-declare const useScrollToElements: (options?: Options) => {
-  elementRefs: react.RefObject<(HTMLElement | null)[]>;
-  setElementRef: (element: HTMLElement | null, index: number) => void;
-  scrollToElement: (index: number) => void;
+declare const useScrollToElements: (defaultOptions?: Options) => {
+  register: (key: ElementKey) => (node: HTMLElement | null) => void;
+  scrollTo: (key: ElementKey, options?: Options) => void;
 };
 //#endregion
 export { useScrollToElements };

package/dist/hooks/use-scroll-to-elements.mjs

@@ -1,37 +1,62 @@
 import { useCallback, useEffect, useRef } from "react";
 
 //#region src/hooks/use-scroll-to-elements.ts
-const useScrollToElements = (options) => {
-	const elementRefs = useRef([]);
-	const optionsRef = useRef(options);
+const resolveContainer = (container) => {
+	if (!container) return null;
+	return "current" in container ? container.current : container;
+};
+const useScrollToElements = (defaultOptions) => {
+	const elementsRef = useRef(/* @__PURE__ */ new Map());
+	const registerCallbacksRef = useRef(/* @__PURE__ */ new Map());
+	const defaultOptionsRef = useRef(defaultOptions);
 	useEffect(() => {
-		optionsRef.current = options;
+		defaultOptionsRef.current = defaultOptions;
 	});
-	const scrollToElement = useCallback((index) => {
-		const element = elementRefs.current[index];
-		if (!element) return;
-		const { offset, ...scrollIntoViewOptions } = optionsRef.current ?? {};
-		if (offset != null) {
-			const top = element.getBoundingClientRect().top + window.scrollY - offset;
-			window.scrollTo({
-				top,
-				behavior: scrollIntoViewOptions.behavior || "smooth"
-			});
-			return;
-		}
-		element.scrollIntoView({
-			behavior: "smooth",
-			block: "start",
-			inline: "start",
-			...scrollIntoViewOptions
-		});
-	}, []);
 	return {
-		elementRefs,
-		setElementRef: useCallback((element, index) => {
-			elementRefs.current[index] = element;
+		register: useCallback((key) => {
+			let callback = registerCallbacksRef.current.get(key);
+			if (!callback) {
+				callback = (node) => {
+					if (node) elementsRef.current.set(key, node);
+					else elementsRef.current.delete(key);
+				};
+				registerCallbacksRef.current.set(key, callback);
+			}
+			return callback;
 		}, []),
-		scrollToElement
+		scrollTo: useCallback((key, options) => {
+			const element = elementsRef.current.get(key);
+			if (!element) return;
+			const { offset, container, ...scrollIntoViewOptions } = {
+				...defaultOptionsRef.current,
+				...options
+			};
+			if (offset != null) {
+				const containerElement = resolveContainer(container ?? null);
+				if (containerElement) {
+					const containerRect = containerElement.getBoundingClientRect();
+					const elementRect = element.getBoundingClientRect();
+					const top = containerElement.scrollTop + (elementRect.top - containerRect.top) - offset;
+					containerElement.scrollTo({
+						top,
+						behavior: scrollIntoViewOptions.behavior || "smooth"
+					});
+					return;
+				}
+				const top = element.getBoundingClientRect().top + window.scrollY - offset;
+				window.scrollTo({
+					top,
+					behavior: scrollIntoViewOptions.behavior || "smooth"
+				});
+				return;
+			}
+			element.scrollIntoView({
+				behavior: "smooth",
+				block: "start",
+				inline: "start",
+				...scrollIntoViewOptions
+			});
+		}, [])
 	};
 };
 

package/dist/hooks/use-scroll-to-elements.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-scroll-to-elements.mjs","names":[],"sources":["../../src/hooks/use-scroll-to-elements.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\n\ninterface Options extends ScrollIntoViewOptions {\n  offset?: number;\n}\n\nconst useScrollToElements = (options?: Options) => {\n  const elementRefs = useRef<(HTMLElement | null)[]>([]);\n  // `options` is almost always an inline object literal at the call site,\n  // so depending on it directly would recreate `scrollToElement` on every\n  // render — read the latest value from a ref instead.\n  const optionsRef = useRef(options);\n\n  useEffect(() => {\n    optionsRef.current = options;\n  });\n\n  const scrollToElement = useCallback((index: number) => {\n    const element = elementRefs.current[index];\n\n    if (!element) {\n      return;\n    }\n\n    const { offset, ...scrollIntoViewOptions } = optionsRef.current ?? {};\n\n    // With an offset, `scrollIntoView` and `scrollTo` would both animate\n    // the same scroll, fighting each other and settling in the wrong\n    // place — use `scrollTo` alone, computed from the element's position\n    // before any scrolling starts (not after `scrollIntoView`, where the\n    // rect would reflect a mid-animation position).\n    if (offset != null) {\n      const top = element.getBoundingClientRect().top + window.scrollY - offset;\n\n      window.scrollTo({\n        top,\n        behavior: scrollIntoViewOptions.behavior || 'smooth',\n      });\n      return;\n    }\n\n    element.scrollIntoView({\n      behavior: 'smooth',\n      block: 'start',\n      inline: 'start',\n      ...scrollIntoViewOptions,\n    });\n  }, []);\n\n  const setElementRef = useCallback(\n    (element: HTMLElement | null, index: number) => {\n      elementRefs.current[index] = element;\n    },\n    [],\n  );\n\n  return { elementRefs, setElementRef, scrollToElement };\n};\n\nexport default useScrollToElements;\n"],"mappings":";;;AAMA,MAAM,uBAAuB,YAAsB;CACjD,MAAM,cAAc,OAA+B,EAAE,CAAC;CAItD,MAAM,aAAa,OAAO,QAAQ;AAElC,iBAAgB;AACd,aAAW,UAAU;GACrB;CAEF,MAAM,kBAAkB,aAAa,UAAkB;EACrD,MAAM,UAAU,YAAY,QAAQ;AAEpC,MAAI,CAAC,QACH;EAGF,MAAM,EAAE,QAAQ,GAAG,0BAA0B,WAAW,WAAW,EAAE;AAOrE,MAAI,UAAU,MAAM;GAClB,MAAM,MAAM,QAAQ,uBAAuB,CAAC,MAAM,OAAO,UAAU;AAEnE,UAAO,SAAS;IACd;IACA,UAAU,sBAAsB,YAAY;IAC7C,CAAC;AACF;;AAGF,UAAQ,eAAe;GACrB,UAAU;GACV,OAAO;GACP,QAAQ;GACR,GAAG;GACJ,CAAC;IACD,EAAE,CAAC;AASN,QAAO;EAAE;EAAa,eAPA,aACnB,SAA6B,UAAkB;AAC9C,eAAY,QAAQ,SAAS;KAE/B,EAAE,CACH;EAEoC;EAAiB"}
+{"version":3,"file":"use-scroll-to-elements.mjs","names":[],"sources":["../../src/hooks/use-scroll-to-elements.ts"],"sourcesContent":["import { type RefObject, useCallback, useEffect, useRef } from 'react';\n\ntype ElementKey = string;\n\ntype ScrollContainer = HTMLElement | RefObject<HTMLElement | null> | null;\n\ninterface Options extends ScrollIntoViewOptions {\n  offset?: number;\n  // Element to scroll instead of `window` when `offset` is set — e.g. a\n  // modal's own scrollable body. `scrollIntoView` (the no-offset path)\n  // already finds its nearest scrollable ancestor on its own and doesn't\n  // need this.\n  container?: ScrollContainer;\n}\n\nconst resolveContainer = (container: ScrollContainer): HTMLElement | null => {\n  if (!container) {\n    return null;\n  }\n  return 'current' in container ? container.current : container;\n};\n\nconst useScrollToElements = (defaultOptions?: Options) => {\n  const elementsRef = useRef(new Map<ElementKey, HTMLElement>());\n  const registerCallbacksRef = useRef(\n    new Map<ElementKey, (node: HTMLElement | null) => void>(),\n  );\n\n  // `defaultOptions` is almost always an inline object literal at the call\n  // site, so depending on it directly would recreate `scrollTo` on every\n  // render — read the latest value from a ref instead.\n  const defaultOptionsRef = useRef(defaultOptions);\n\n  useEffect(() => {\n    defaultOptionsRef.current = defaultOptions;\n  });\n\n  // Returns a stable callback per key so React doesn't detach/reattach the\n  // ref (and thrash the Map) on every render — only a genuine unmount\n  // (node === null) removes the entry.\n  const register = useCallback((key: ElementKey) => {\n    let callback = registerCallbacksRef.current.get(key);\n\n    if (!callback) {\n      callback = (node: HTMLElement | null) => {\n        if (node) {\n          elementsRef.current.set(key, node);\n        } else {\n          elementsRef.current.delete(key);\n        }\n      };\n      registerCallbacksRef.current.set(key, callback);\n    }\n\n    return callback;\n  }, []);\n\n  const scrollTo = useCallback((key: ElementKey, options?: Options) => {\n    const element = elementsRef.current.get(key);\n\n    if (!element) {\n      return;\n    }\n\n    const { offset, container, ...scrollIntoViewOptions } = {\n      ...defaultOptionsRef.current,\n      ...options,\n    };\n\n    // With an offset, `scrollIntoView` and `scrollTo` would both animate\n    // the same scroll, fighting each other and settling in the wrong\n    // place — use `scrollTo` alone, computed from the element's position\n    // before any scrolling starts (not after `scrollIntoView`, where the\n    // rect would reflect a mid-animation position).\n    if (offset != null) {\n      const containerElement = resolveContainer(container ?? null);\n\n      if (containerElement) {\n        const containerRect = containerElement.getBoundingClientRect();\n        const elementRect = element.getBoundingClientRect();\n        const top =\n          containerElement.scrollTop +\n          (elementRect.top - containerRect.top) -\n          offset;\n\n        containerElement.scrollTo({\n          top,\n          behavior: scrollIntoViewOptions.behavior || 'smooth',\n        });\n        return;\n      }\n\n      const top = element.getBoundingClientRect().top + window.scrollY - offset;\n\n      window.scrollTo({\n        top,\n        behavior: scrollIntoViewOptions.behavior || 'smooth',\n      });\n      return;\n    }\n\n    element.scrollIntoView({\n      behavior: 'smooth',\n      block: 'start',\n      inline: 'start',\n      ...scrollIntoViewOptions,\n    });\n  }, []);\n\n  return { register, scrollTo };\n};\n\nexport default useScrollToElements;\n"],"mappings":";;;AAeA,MAAM,oBAAoB,cAAmD;AAC3E,KAAI,CAAC,UACH,QAAO;AAET,QAAO,aAAa,YAAY,UAAU,UAAU;;AAGtD,MAAM,uBAAuB,mBAA6B;CACxD,MAAM,cAAc,uBAAO,IAAI,KAA8B,CAAC;CAC9D,MAAM,uBAAuB,uBAC3B,IAAI,KAAqD,CAC1D;CAKD,MAAM,oBAAoB,OAAO,eAAe;AAEhD,iBAAgB;AACd,oBAAkB,UAAU;GAC5B;AA0EF,QAAO;EAAE,UArEQ,aAAa,QAAoB;GAChD,IAAI,WAAW,qBAAqB,QAAQ,IAAI,IAAI;AAEpD,OAAI,CAAC,UAAU;AACb,gBAAY,SAA6B;AACvC,SAAI,KACF,aAAY,QAAQ,IAAI,KAAK,KAAK;SAElC,aAAY,QAAQ,OAAO,IAAI;;AAGnC,yBAAqB,QAAQ,IAAI,KAAK,SAAS;;AAGjD,UAAO;KACN,EAAE,CAAC;EAsDa,UApDF,aAAa,KAAiB,YAAsB;GACnE,MAAM,UAAU,YAAY,QAAQ,IAAI,IAAI;AAE5C,OAAI,CAAC,QACH;GAGF,MAAM,EAAE,QAAQ,WAAW,GAAG,0BAA0B;IACtD,GAAG,kBAAkB;IACrB,GAAG;IACJ;AAOD,OAAI,UAAU,MAAM;IAClB,MAAM,mBAAmB,iBAAiB,aAAa,KAAK;AAE5D,QAAI,kBAAkB;KACpB,MAAM,gBAAgB,iBAAiB,uBAAuB;KAC9D,MAAM,cAAc,QAAQ,uBAAuB;KACnD,MAAM,MACJ,iBAAiB,aAChB,YAAY,MAAM,cAAc,OACjC;AAEF,sBAAiB,SAAS;MACxB;MACA,UAAU,sBAAsB,YAAY;MAC7C,CAAC;AACF;;IAGF,MAAM,MAAM,QAAQ,uBAAuB,CAAC,MAAM,OAAO,UAAU;AAEnE,WAAO,SAAS;KACd;KACA,UAAU,sBAAsB,YAAY;KAC7C,CAAC;AACF;;AAGF,WAAQ,eAAe;IACrB,UAAU;IACV,OAAO;IACP,QAAQ;IACR,GAAG;IACJ,CAAC;KACD,EAAE,CAAC;EAEuB"}

package/dist/hooks/use-throttle.d.mts

@@ -1,5 +1,9 @@
 //#region src/hooks/use-throttle.d.ts
-declare const useThrottle: <T>(value: T, delay?: number) => T;
+interface Options {
+  leading?: boolean;
+  trailing?: boolean;
+}
+declare const useThrottle: <T>(value: T, delay?: number, options?: Options) => T;
 //#endregion
 export { useThrottle };
 //# sourceMappingURL=use-throttle.d.mts.map

package/dist/hooks/use-throttle.mjs

@@ -1,39 +1,13 @@
-import { useEffect, useRef, useState } from "react";
+import useThrottledCallback from "./use-throttled-callback.mjs";
+import { useEffect, useState } from "react";
 
 //#region src/hooks/use-throttle.ts
-const useThrottle = (value, delay = 100) => {
+const useThrottle = (value, delay = 100, options = {}) => {
 	const [throttledValue, setThrottledValue] = useState(value);
-	const lastExecutedRef = useRef(0);
-	const timeoutRef = useRef(null);
-	const latestValueRef = useRef(value);
+	const throttledSetValue = useThrottledCallback(setThrottledValue, delay, options);
 	useEffect(() => {
-		latestValueRef.current = value;
-	}, [value]);
-	useEffect(() => {
-		const now = Date.now();
-		const elapsed = now - lastExecutedRef.current;
-		if (elapsed >= delay) {
-			if (timeoutRef.current) {
-				clearTimeout(timeoutRef.current);
-				timeoutRef.current = null;
-			}
-			lastExecutedRef.current = now;
-			setThrottledValue(latestValueRef.current);
-			return;
-		}
-		const remaining = delay - elapsed;
-		if (timeoutRef.current) clearTimeout(timeoutRef.current);
-		timeoutRef.current = setTimeout(() => {
-			lastExecutedRef.current = Date.now();
-			setThrottledValue(latestValueRef.current);
-		}, remaining);
-		return () => {
-			if (timeoutRef.current) {
-				clearTimeout(timeoutRef.current);
-				timeoutRef.current = null;
-			}
-		};
-	}, [value, delay]);
+		throttledSetValue(value);
+	}, [value, throttledSetValue]);
 	return throttledValue;
 };
 

package/dist/hooks/use-throttle.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-throttle.mjs","names":[],"sources":["../../src/hooks/use-throttle.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nconst useThrottle = <T>(value: T, delay = 100): T => {\n  const [throttledValue, setThrottledValue] = useState(value);\n  const lastExecutedRef = useRef(0);\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const latestValueRef = useRef(value);\n\n  useEffect(() => {\n    latestValueRef.current = value;\n  }, [value]);\n\n  useEffect(() => {\n    const now = Date.now();\n    const elapsed = now - lastExecutedRef.current;\n\n    if (elapsed >= delay) {\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current);\n        timeoutRef.current = null;\n      }\n\n      lastExecutedRef.current = now;\n      setThrottledValue(latestValueRef.current);\n      return;\n    }\n\n    const remaining = delay - elapsed;\n\n    if (timeoutRef.current) {\n      clearTimeout(timeoutRef.current);\n    }\n\n    timeoutRef.current = setTimeout(() => {\n      lastExecutedRef.current = Date.now();\n      setThrottledValue(latestValueRef.current);\n    }, remaining);\n\n    return () => {\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current);\n        timeoutRef.current = null;\n      }\n    };\n  }, [value, delay]);\n\n  return throttledValue;\n};\n\nexport default useThrottle;\n"],"mappings":";;;AAEA,MAAM,eAAkB,OAAU,QAAQ,QAAW;CACnD,MAAM,CAAC,gBAAgB,qBAAqB,SAAS,MAAM;CAC3D,MAAM,kBAAkB,OAAO,EAAE;CACjC,MAAM,aAAa,OAA6C,KAAK;CACrE,MAAM,iBAAiB,OAAO,MAAM;AAEpC,iBAAgB;AACd,iBAAe,UAAU;IACxB,CAAC,MAAM,CAAC;AAEX,iBAAgB;EACd,MAAM,MAAM,KAAK,KAAK;EACtB,MAAM,UAAU,MAAM,gBAAgB;AAEtC,MAAI,WAAW,OAAO;AACpB,OAAI,WAAW,SAAS;AACtB,iBAAa,WAAW,QAAQ;AAChC,eAAW,UAAU;;AAGvB,mBAAgB,UAAU;AAC1B,qBAAkB,eAAe,QAAQ;AACzC;;EAGF,MAAM,YAAY,QAAQ;AAE1B,MAAI,WAAW,QACb,cAAa,WAAW,QAAQ;AAGlC,aAAW,UAAU,iBAAiB;AACpC,mBAAgB,UAAU,KAAK,KAAK;AACpC,qBAAkB,eAAe,QAAQ;KACxC,UAAU;AAEb,eAAa;AACX,OAAI,WAAW,SAAS;AACtB,iBAAa,WAAW,QAAQ;AAChC,eAAW,UAAU;;;IAGxB,CAAC,OAAO,MAAM,CAAC;AAElB,QAAO"}
+{"version":3,"file":"use-throttle.mjs","names":[],"sources":["../../src/hooks/use-throttle.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport useThrottledCallback from './use-throttled-callback';\n\ninterface Options {\n  leading?: boolean;\n  trailing?: boolean;\n}\n\nconst useThrottle = <T>(value: T, delay = 100, options: Options = {}): T => {\n  const [throttledValue, setThrottledValue] = useState(value);\n\n  const throttledSetValue = useThrottledCallback(\n    setThrottledValue,\n    delay,\n    options,\n  );\n\n  useEffect(() => {\n    throttledSetValue(value);\n    // `throttledSetValue`'s identity is stable for the lifetime of the\n    // component (see useThrottledCallback), so listing it here doesn't\n    // cause any extra re-runs beyond `value` actually changing.\n  }, [value, throttledSetValue]);\n\n  return throttledValue;\n};\n\nexport default useThrottle;\n"],"mappings":";;;;AASA,MAAM,eAAkB,OAAU,QAAQ,KAAK,UAAmB,EAAE,KAAQ;CAC1E,MAAM,CAAC,gBAAgB,qBAAqB,SAAS,MAAM;CAE3D,MAAM,oBAAoB,qBACxB,mBACA,OACA,QACD;AAED,iBAAgB;AACd,oBAAkB,MAAM;IAIvB,CAAC,OAAO,kBAAkB,CAAC;AAE9B,QAAO"}

package/dist/hooks/use-throttled-callback.d.mts

@@ -0,0 +1,12 @@
+//#region src/hooks/use-throttled-callback.d.ts
+interface Options {
+  leading?: boolean;
+  trailing?: boolean;
+}
+declare const useThrottledCallback: <Args extends unknown[]>(callback: (...args: Args) => void, delay?: number, {
+  leading,
+  trailing
+}?: Options) => (...args: Args) => void;
+//#endregion
+export { useThrottledCallback };
+//# sourceMappingURL=use-throttled-callback.d.mts.map

package/dist/hooks/use-throttled-callback.mjs

@@ -0,0 +1,54 @@
+import { useEffect, useRef } from "react";
+
+//#region src/hooks/use-throttled-callback.ts
+const useThrottledCallback = (callback, delay = 100, { leading = true, trailing = true } = {}) => {
+	const callbackRef = useRef(callback);
+	const delayRef = useRef(delay);
+	const leadingRef = useRef(leading);
+	const trailingRef = useRef(trailing);
+	useEffect(() => {
+		callbackRef.current = callback;
+		delayRef.current = delay;
+		leadingRef.current = leading;
+		trailingRef.current = trailing;
+	});
+	const lastExecutedRef = useRef(null);
+	const timeoutRef = useRef(null);
+	const lastArgsRef = useRef(null);
+	const stableThrottledCallback = useRef(null);
+	if (!stableThrottledCallback.current) {
+		const invoke = () => {
+			lastExecutedRef.current = Date.now();
+			timeoutRef.current = null;
+			if (lastArgsRef.current) callbackRef.current(...lastArgsRef.current);
+		};
+		stableThrottledCallback.current = (...args) => {
+			lastArgsRef.current = args;
+			const now = Date.now();
+			const elapsed = lastExecutedRef.current === null ? Infinity : now - lastExecutedRef.current;
+			if (elapsed >= delayRef.current) {
+				if (timeoutRef.current) {
+					clearTimeout(timeoutRef.current);
+					timeoutRef.current = null;
+				}
+				if (leadingRef.current) invoke();
+				else {
+					lastExecutedRef.current = now;
+					if (trailingRef.current) timeoutRef.current = setTimeout(invoke, delayRef.current);
+				}
+				return;
+			}
+			if (trailingRef.current && !timeoutRef.current) timeoutRef.current = setTimeout(invoke, delayRef.current - elapsed);
+		};
+	}
+	useEffect(() => {
+		return () => {
+			if (timeoutRef.current) clearTimeout(timeoutRef.current);
+		};
+	}, []);
+	return stableThrottledCallback.current;
+};
+
+//#endregion
+export { useThrottledCallback as default };
+//# sourceMappingURL=use-throttled-callback.mjs.map

package/dist/hooks/use-throttled-callback.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-throttled-callback.mjs","names":[],"sources":["../../src/hooks/use-throttled-callback.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\ninterface Options {\n  leading?: boolean;\n  trailing?: boolean;\n}\n\n// Invokes `callback` at most once per `delay`ms, regardless of how often\n// the returned function is called — the callback-shaped counterpart to\n// useThrottle (which throttles a value). `leading` fires on the first call\n// of a burst immediately; `trailing` schedules one more call (with\n// whatever args arrived last) at the end of the window if calls kept\n// coming. Both default to true, matching useThrottle's fixed behavior.\nconst useThrottledCallback = <Args extends unknown[]>(\n  callback: (...args: Args) => void,\n  delay = 100,\n  { leading = true, trailing = true }: Options = {},\n) => {\n  const callbackRef = useRef(callback);\n  const delayRef = useRef(delay);\n  const leadingRef = useRef(leading);\n  const trailingRef = useRef(trailing);\n\n  useEffect(() => {\n    callbackRef.current = callback;\n    delayRef.current = delay;\n    leadingRef.current = leading;\n    trailingRef.current = trailing;\n  });\n\n  const lastExecutedRef = useRef<number | null>(null);\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const lastArgsRef = useRef<Args | null>(null);\n\n  const stableThrottledCallback = useRef<((...args: Args) => void) | null>(\n    null,\n  );\n\n  if (!stableThrottledCallback.current) {\n    const invoke = () => {\n      lastExecutedRef.current = Date.now();\n      timeoutRef.current = null;\n\n      if (lastArgsRef.current) {\n        callbackRef.current(...lastArgsRef.current);\n      }\n    };\n\n    stableThrottledCallback.current = (...args: Args) => {\n      lastArgsRef.current = args;\n\n      const now = Date.now();\n      const elapsed =\n        lastExecutedRef.current === null\n          ? Infinity\n          : now - lastExecutedRef.current;\n\n      if (elapsed >= delayRef.current) {\n        if (timeoutRef.current) {\n          clearTimeout(timeoutRef.current);\n          timeoutRef.current = null;\n        }\n\n        if (leadingRef.current) {\n          invoke();\n        } else {\n          lastExecutedRef.current = now;\n\n          if (trailingRef.current) {\n            timeoutRef.current = setTimeout(invoke, delayRef.current);\n          }\n        }\n        return;\n      }\n\n      if (trailingRef.current && !timeoutRef.current) {\n        timeoutRef.current = setTimeout(invoke, delayRef.current - elapsed);\n      }\n    };\n  }\n\n  useEffect(() => {\n    return () => {\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current);\n      }\n    };\n  }, []);\n\n  return stableThrottledCallback.current;\n};\n\nexport default useThrottledCallback;\n"],"mappings":";;;AAaA,MAAM,wBACJ,UACA,QAAQ,KACR,EAAE,UAAU,MAAM,WAAW,SAAkB,EAAE,KAC9C;CACH,MAAM,cAAc,OAAO,SAAS;CACpC,MAAM,WAAW,OAAO,MAAM;CAC9B,MAAM,aAAa,OAAO,QAAQ;CAClC,MAAM,cAAc,OAAO,SAAS;AAEpC,iBAAgB;AACd,cAAY,UAAU;AACtB,WAAS,UAAU;AACnB,aAAW,UAAU;AACrB,cAAY,UAAU;GACtB;CAEF,MAAM,kBAAkB,OAAsB,KAAK;CACnD,MAAM,aAAa,OAA6C,KAAK;CACrE,MAAM,cAAc,OAAoB,KAAK;CAE7C,MAAM,0BAA0B,OAC9B,KACD;AAED,KAAI,CAAC,wBAAwB,SAAS;EACpC,MAAM,eAAe;AACnB,mBAAgB,UAAU,KAAK,KAAK;AACpC,cAAW,UAAU;AAErB,OAAI,YAAY,QACd,aAAY,QAAQ,GAAG,YAAY,QAAQ;;AAI/C,0BAAwB,WAAW,GAAG,SAAe;AACnD,eAAY,UAAU;GAEtB,MAAM,MAAM,KAAK,KAAK;GACtB,MAAM,UACJ,gBAAgB,YAAY,OACxB,WACA,MAAM,gBAAgB;AAE5B,OAAI,WAAW,SAAS,SAAS;AAC/B,QAAI,WAAW,SAAS;AACtB,kBAAa,WAAW,QAAQ;AAChC,gBAAW,UAAU;;AAGvB,QAAI,WAAW,QACb,SAAQ;SACH;AACL,qBAAgB,UAAU;AAE1B,SAAI,YAAY,QACd,YAAW,UAAU,WAAW,QAAQ,SAAS,QAAQ;;AAG7D;;AAGF,OAAI,YAAY,WAAW,CAAC,WAAW,QACrC,YAAW,UAAU,WAAW,QAAQ,SAAS,UAAU,QAAQ;;;AAKzE,iBAAgB;AACd,eAAa;AACX,OAAI,WAAW,QACb,cAAa,WAAW,QAAQ;;IAGnC,EAAE,CAAC;AAEN,QAAO,wBAAwB"}

package/dist/hooks/use-timeout.d.mts

@@ -0,0 +1,8 @@
+//#region src/hooks/use-timeout.d.ts
+declare const useTimeout: (callback: () => void, delay: number | null) => {
+  reset: () => void;
+  clear: () => void;
+};
+//#endregion
+export { useTimeout };
+//# sourceMappingURL=use-timeout.d.mts.map

package/dist/hooks/use-timeout.mjs

@@ -0,0 +1,38 @@
+import { useCallback, useEffect, useRef } from "react";
+
+//#region src/hooks/use-timeout.ts
+const useTimeout = (callback, delay) => {
+	const callbackRef = useRef(callback);
+	const delayRef = useRef(delay);
+	const timeoutRef = useRef(null);
+	useEffect(() => {
+		callbackRef.current = callback;
+		delayRef.current = delay;
+	});
+	const clear = useCallback(() => {
+		if (timeoutRef.current !== null) {
+			clearTimeout(timeoutRef.current);
+			timeoutRef.current = null;
+		}
+	}, []);
+	const reset = useCallback(() => {
+		clear();
+		if (delayRef.current === null) return;
+		timeoutRef.current = setTimeout(() => {
+			timeoutRef.current = null;
+			callbackRef.current();
+		}, delayRef.current);
+	}, [clear]);
+	useEffect(() => {
+		reset();
+		return clear;
+	}, [delay]);
+	return {
+		reset,
+		clear
+	};
+};
+
+//#endregion
+export { useTimeout as default };
+//# sourceMappingURL=use-timeout.mjs.map

package/dist/hooks/use-timeout.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-timeout.mjs","names":[],"sources":["../../src/hooks/use-timeout.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\n\n// `delay === null` means inactive (no timer scheduled) — `0` is a valid,\n// distinct delay, same rule useRecursiveTimeout uses. A bare `if (!delay)`\n// guard (as opposed to `if (delay === null)`) is the classic bug this\n// hook exists to avoid: it silently no-ops for a delay of 0 too.\nconst useTimeout = (callback: () => void, delay: number | null) => {\n  const callbackRef = useRef(callback);\n  const delayRef = useRef(delay);\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  useEffect(() => {\n    callbackRef.current = callback;\n    delayRef.current = delay;\n  });\n\n  const clear = useCallback(() => {\n    if (timeoutRef.current !== null) {\n      clearTimeout(timeoutRef.current);\n      timeoutRef.current = null;\n    }\n  }, []);\n\n  // Restarts the timer from now, using whatever `delay` is current —\n  // e.g. a toast's auto-dismiss timer that should start over each time\n  // the user hovers away from it.\n  const reset = useCallback(() => {\n    clear();\n\n    if (delayRef.current === null) {\n      return;\n    }\n\n    timeoutRef.current = setTimeout(() => {\n      timeoutRef.current = null;\n      callbackRef.current();\n    }, delayRef.current);\n  }, [clear]);\n\n  useEffect(() => {\n    reset();\n    return clear;\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [delay]);\n\n  return { reset, clear };\n};\n\nexport default useTimeout;\n"],"mappings":";;;AAMA,MAAM,cAAc,UAAsB,UAAyB;CACjE,MAAM,cAAc,OAAO,SAAS;CACpC,MAAM,WAAW,OAAO,MAAM;CAC9B,MAAM,aAAa,OAA6C,KAAK;AAErE,iBAAgB;AACd,cAAY,UAAU;AACtB,WAAS,UAAU;GACnB;CAEF,MAAM,QAAQ,kBAAkB;AAC9B,MAAI,WAAW,YAAY,MAAM;AAC/B,gBAAa,WAAW,QAAQ;AAChC,cAAW,UAAU;;IAEtB,EAAE,CAAC;CAKN,MAAM,QAAQ,kBAAkB;AAC9B,SAAO;AAEP,MAAI,SAAS,YAAY,KACvB;AAGF,aAAW,UAAU,iBAAiB;AACpC,cAAW,UAAU;AACrB,eAAY,SAAS;KACpB,SAAS,QAAQ;IACnB,CAAC,MAAM,CAAC;AAEX,iBAAgB;AACd,SAAO;AACP,SAAO;IAEN,CAAC,MAAM,CAAC;AAEX,QAAO;EAAE;EAAO;EAAO"}

package/dist/hooks/use-toggle.d.mts

@@ -0,0 +1,5 @@
+//#region src/hooks/use-toggle.d.ts
+declare const useToggle: (initial?: boolean) => [boolean, () => void, (value: boolean) => void];
+//#endregion
+export { useToggle };
+//# sourceMappingURL=use-toggle.d.mts.map

package/dist/hooks/use-toggle.mjs

@@ -0,0 +1,17 @@
+import { useCallback, useState } from "react";
+
+//#region src/hooks/use-toggle.ts
+const useToggle = (initial = false) => {
+	const [value, setValue] = useState(initial);
+	return [
+		value,
+		useCallback(() => {
+			setValue((prev) => !prev);
+		}, []),
+		setValue
+	];
+};
+
+//#endregion
+export { useToggle as default };
+//# sourceMappingURL=use-toggle.mjs.map

package/dist/hooks/use-toggle.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-toggle.mjs","names":[],"sources":["../../src/hooks/use-toggle.ts"],"sourcesContent":["import { useCallback, useState } from 'react';\n\nconst useToggle = (\n  initial = false,\n): [boolean, () => void, (value: boolean) => void] => {\n  const [value, setValue] = useState(initial);\n\n  const toggle = useCallback(() => {\n    setValue(prev => !prev);\n  }, []);\n\n  return [value, toggle, setValue];\n};\n\nexport default useToggle;\n"],"mappings":";;;AAEA,MAAM,aACJ,UAAU,UAC0C;CACpD,MAAM,CAAC,OAAO,YAAY,SAAS,QAAQ;AAM3C,QAAO;EAAC;EAJO,kBAAkB;AAC/B,aAAS,SAAQ,CAAC,KAAK;KACtB,EAAE,CAAC;EAEiB;EAAS"}