@jbpark/use-hooks 2.10.0 → 3.0.0

package/dist/hooks/use-responsive-size.mjs

@@ -1,5 +1,5 @@
 import useDebounce from "./use-debounce.mjs";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 
 //#region src/hooks/use-responsive-size.ts
 const BREAKPOINTS = {
@@ -28,76 +28,92 @@ const getBreakpointInfo = (width) => {
 		"2xl": width >= BREAKPOINTS["2xl"]
 	};
 };
+const breakpointEqual = (a, b) => a.current === b.current && a.xs === b.xs && a.sm === b.sm && a.md === b.md && a.lg === b.lg && a.xl === b.xl && a["2xl"] === b["2xl"];
+const measureTarget = (target) => ({
+	width: target.offsetWidth,
+	height: target.offsetHeight
+});
+const measureViewport = () => ({
+	width: window.innerWidth,
+	height: window.innerHeight
+});
 const useResponsiveSize = (options) => {
-	const { delay = 100, container } = options || {};
+	const { delay = 100, container, viewport = false } = options || {};
+	const [element, setElement] = useState(null);
 	const [size, setSize] = useState({
 		width: 0,
 		height: 0
 	});
-	const [breakpoint, setBreakpoint] = useState({
-		current: "xs",
-		xs: true,
-		sm: false,
-		md: false,
-		lg: false,
-		xl: false,
-		"2xl": false
+	const [breakpoint, setBreakpoint] = useState(() => getBreakpointInfo(0));
+	const observerRef = useRef(null);
+	const latestRef = useRef({
+		width: 0,
+		height: 0
 	});
-	const [debouncedSize, setDebouncedSize] = useState({
+	const committedRef = useRef({
 		width: 0,
 		height: 0
 	});
-	const [element, setElement] = useState(null);
-	const observerRef = useRef(null);
 	const ref = useCallback((node) => {
 		setElement(node);
 	}, []);
-	useDebounce(() => {
-		setDebouncedSize(size);
-	}, { delay }, [size]);
-	useEffect(() => {
-		const updateSize = () => {
-			const target = container ?? element ?? document.body;
-			if (!target) return;
-			const { offsetWidth, offsetHeight } = target;
-			setSize((prev) => {
-				if (prev.width !== offsetWidth || prev.height !== offsetHeight) return {
-					width: offsetWidth,
-					height: offsetHeight
-				};
-				return prev;
-			});
-			setBreakpoint((prev) => {
-				const next = getBreakpointInfo(offsetWidth);
-				if (prev.current !== next.current) return next;
-				return prev;
-			});
-		};
-		const connect = () => {
+	const commit = useCallback(() => {
+		const next = latestRef.current;
+		if (committedRef.current.width === next.width && committedRef.current.height === next.height) return;
+		committedRef.current = next;
+		setSize(next);
+		const nextBreakpoint = getBreakpointInfo(next.width);
+		setBreakpoint((prev) => breakpointEqual(prev, nextBreakpoint) ? prev : nextBreakpoint);
+	}, []);
+	const debouncedCommit = useDebounce(commit, {
+		delay,
+		autoInvoke: false
+	});
+	useLayoutEffect(() => {
+		const measured = viewport ? measureViewport() : (() => {
 			const target = container ?? element ?? document.body;
-			if (!target) return;
-			updateSize();
-			if (observerRef.current) observerRef.current.disconnect();
-			observerRef.current = new ResizeObserver(() => {
-				requestAnimationFrame(() => {
-					updateSize();
-				});
+			return target ? measureTarget(target) : null;
+		})();
+		if (!measured) return;
+		latestRef.current = measured;
+		commit();
+	}, [
+		container,
+		element,
+		viewport,
+		commit
+	]);
+	useEffect(() => {
+		if (viewport) {
+			const onResize = () => {
+				latestRef.current = measureViewport();
+				debouncedCommit();
+			};
+			window.addEventListener("resize", onResize);
+			return () => window.removeEventListener("resize", onResize);
+		}
+		const target = container ?? element ?? document.body;
+		if (!target) return;
+		if (observerRef.current) observerRef.current.disconnect();
+		observerRef.current = new ResizeObserver(() => {
+			requestAnimationFrame(() => {
+				latestRef.current = measureTarget(target);
+				debouncedCommit();
 			});
-			observerRef.current.observe(target);
-		};
-		const disconnect = () => {
-			if (observerRef.current) {
-				observerRef.current.disconnect();
-				observerRef.current = null;
-			}
-		};
-		connect();
+		});
+		observerRef.current.observe(target);
 		return () => {
-			disconnect();
+			observerRef.current?.disconnect();
+			observerRef.current = null;
 		};
-	}, [container, element]);
+	}, [
+		container,
+		element,
+		viewport,
+		debouncedCommit
+	]);
 	return {
-		size: debouncedSize,
+		size,
 		breakpoint,
 		ref
 	};

package/dist/hooks/use-responsive-size.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-responsive-size.mjs","names":[],"sources":["../../src/hooks/use-responsive-size.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\nimport useDebounce from './use-debounce';\n\ntype Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n\ninterface BreakpointInfo {\n  current: Breakpoint;\n  xs: boolean;\n  sm: boolean;\n  md: boolean;\n  lg: boolean;\n  xl: boolean;\n  '2xl': boolean;\n}\n\ninterface Options {\n  delay?: number;\n  container?: HTMLElement | null;\n}\n\nconst BREAKPOINTS = {\n  xs: 0, // < 640px\n  sm: 640, // >= 640px\n  md: 768, // >= 768px\n  lg: 1024, // >= 1024px\n  xl: 1280, // >= 1280px\n  '2xl': 1536, // >= 1536px\n} as const;\n\nconst getBreakpointInfo = (width: number): BreakpointInfo => {\n  let current: Breakpoint = 'xs';\n\n  if (width >= BREAKPOINTS['2xl']) {\n    current = '2xl';\n  } else if (width >= BREAKPOINTS.xl) {\n    current = 'xl';\n  } else if (width >= BREAKPOINTS.lg) {\n    current = 'lg';\n  } else if (width >= BREAKPOINTS.md) {\n    current = 'md';\n  } else if (width >= BREAKPOINTS.sm) {\n    current = 'sm';\n  } else {\n    current = 'xs';\n  }\n\n  return {\n    current,\n    xs: width < BREAKPOINTS.sm,\n    sm: width >= BREAKPOINTS.sm && width < BREAKPOINTS.md,\n    md: width >= BREAKPOINTS.md && width < BREAKPOINTS.lg,\n    lg: width >= BREAKPOINTS.lg && width < BREAKPOINTS.xl,\n    xl: width >= BREAKPOINTS.xl && width < BREAKPOINTS['2xl'],\n    '2xl': width >= BREAKPOINTS['2xl'],\n  };\n};\n\nconst useResponsiveSize = <T extends HTMLElement>(options?: Options) => {\n  const { delay = 100, container } = options || {};\n  const [size, setSize] = useState({ width: 0, height: 0 });\n  const [breakpoint, setBreakpoint] = useState<BreakpointInfo>({\n    current: 'xs',\n    xs: true,\n    sm: false,\n    md: false,\n    lg: false,\n    xl: false,\n    '2xl': false,\n  });\n\n  const [debouncedSize, setDebouncedSize] = useState({ width: 0, height: 0 });\n\n  const [element, setElement] = useState<T | null>(null);\n  const observerRef = useRef<ResizeObserver | null>(null);\n\n  const ref = useCallback((node: T | null) => {\n    setElement(node);\n  }, []);\n\n  useDebounce(\n    () => {\n      setDebouncedSize(size);\n    },\n    { delay },\n    [size],\n  );\n\n  useEffect(() => {\n    const updateSize = () => {\n      const target = container ?? element ?? document.body;\n\n      if (!target) {\n        return;\n      }\n\n      const { offsetWidth, offsetHeight } = target;\n\n      setSize(prev => {\n        if (prev.width !== offsetWidth || prev.height !== offsetHeight) {\n          return { width: offsetWidth, height: offsetHeight };\n        }\n        return prev;\n      });\n\n      setBreakpoint(prev => {\n        const next = getBreakpointInfo(offsetWidth);\n        if (prev.current !== next.current) {\n          return next;\n        }\n        return prev;\n      });\n    };\n\n    const connect = () => {\n      const target = container ?? element ?? document.body;\n\n      if (!target) {\n        return;\n      }\n\n      updateSize();\n\n      if (observerRef.current) {\n        observerRef.current.disconnect();\n      }\n\n      observerRef.current = new ResizeObserver(() => {\n        requestAnimationFrame(() => {\n          updateSize();\n        });\n      });\n\n      observerRef.current.observe(target);\n    };\n\n    const disconnect = () => {\n      if (observerRef.current) {\n        observerRef.current.disconnect();\n        observerRef.current = null;\n      }\n    };\n\n    connect();\n\n    return () => {\n      disconnect();\n    };\n  }, [container, element]);\n\n  return {\n    size: debouncedSize,\n    breakpoint,\n    ref,\n  };\n};\n\nexport default useResponsiveSize;\n"],"mappings":";;;;AAqBA,MAAM,cAAc;CAClB,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;CACR;AAED,MAAM,qBAAqB,UAAkC;CAC3D,IAAI,UAAsB;AAE1B,KAAI,SAAS,YAAY,OACvB,WAAU;UACD,SAAS,YAAY,GAC9B,WAAU;UACD,SAAS,YAAY,GAC9B,WAAU;UACD,SAAS,YAAY,GAC9B,WAAU;UACD,SAAS,YAAY,GAC9B,WAAU;KAEV,WAAU;AAGZ,QAAO;EACL;EACA,IAAI,QAAQ,YAAY;EACxB,IAAI,SAAS,YAAY,MAAM,QAAQ,YAAY;EACnD,IAAI,SAAS,YAAY,MAAM,QAAQ,YAAY;EACnD,IAAI,SAAS,YAAY,MAAM,QAAQ,YAAY;EACnD,IAAI,SAAS,YAAY,MAAM,QAAQ,YAAY;EACnD,OAAO,SAAS,YAAY;EAC7B;;AAGH,MAAM,qBAA4C,YAAsB;CACtE,MAAM,EAAE,QAAQ,KAAK,cAAc,WAAW,EAAE;CAChD,MAAM,CAAC,MAAM,WAAW,SAAS;EAAE,OAAO;EAAG,QAAQ;EAAG,CAAC;CACzD,MAAM,CAAC,YAAY,iBAAiB,SAAyB;EAC3D,SAAS;EACT,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,OAAO;EACR,CAAC;CAEF,MAAM,CAAC,eAAe,oBAAoB,SAAS;EAAE,OAAO;EAAG,QAAQ;EAAG,CAAC;CAE3E,MAAM,CAAC,SAAS,cAAc,SAAmB,KAAK;CACtD,MAAM,cAAc,OAA8B,KAAK;CAEvD,MAAM,MAAM,aAAa,SAAmB;AAC1C,aAAW,KAAK;IACf,EAAE,CAAC;AAEN,mBACQ;AACJ,mBAAiB,KAAK;IAExB,EAAE,OAAO,EACT,CAAC,KAAK,CACP;AAED,iBAAgB;EACd,MAAM,mBAAmB;GACvB,MAAM,SAAS,aAAa,WAAW,SAAS;AAEhD,OAAI,CAAC,OACH;GAGF,MAAM,EAAE,aAAa,iBAAiB;AAEtC,YAAQ,SAAQ;AACd,QAAI,KAAK,UAAU,eAAe,KAAK,WAAW,aAChD,QAAO;KAAE,OAAO;KAAa,QAAQ;KAAc;AAErD,WAAO;KACP;AAEF,kBAAc,SAAQ;IACpB,MAAM,OAAO,kBAAkB,YAAY;AAC3C,QAAI,KAAK,YAAY,KAAK,QACxB,QAAO;AAET,WAAO;KACP;;EAGJ,MAAM,gBAAgB;GACpB,MAAM,SAAS,aAAa,WAAW,SAAS;AAEhD,OAAI,CAAC,OACH;AAGF,eAAY;AAEZ,OAAI,YAAY,QACd,aAAY,QAAQ,YAAY;AAGlC,eAAY,UAAU,IAAI,qBAAqB;AAC7C,gCAA4B;AAC1B,iBAAY;MACZ;KACF;AAEF,eAAY,QAAQ,QAAQ,OAAO;;EAGrC,MAAM,mBAAmB;AACvB,OAAI,YAAY,SAAS;AACvB,gBAAY,QAAQ,YAAY;AAChC,gBAAY,UAAU;;;AAI1B,WAAS;AAET,eAAa;AACX,eAAY;;IAEb,CAAC,WAAW,QAAQ,CAAC;AAExB,QAAO;EACL,MAAM;EACN;EACA;EACD"}
+{"version":3,"file":"use-responsive-size.mjs","names":[],"sources":["../../src/hooks/use-responsive-size.ts"],"sourcesContent":["import {\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport useDebounce from './use-debounce';\n\ntype Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n\ninterface BreakpointInfo {\n  current: Breakpoint;\n  xs: boolean;\n  sm: boolean;\n  md: boolean;\n  lg: boolean;\n  xl: boolean;\n  '2xl': boolean;\n}\n\ninterface Options {\n  delay?: number;\n  container?: HTMLElement | null;\n  // Measure the viewport (window.innerWidth/innerHeight) instead of an\n  // element/document.body. Useful when no `container`/ref is attached and\n  // the breakpoint should reflect the viewport rather than document.body's\n  // box, which can diverge from it if body has margin/transform.\n  viewport?: boolean;\n}\n\nconst BREAKPOINTS = {\n  xs: 0, // < 640px\n  sm: 640, // >= 640px\n  md: 768, // >= 768px\n  lg: 1024, // >= 1024px\n  xl: 1280, // >= 1280px\n  '2xl': 1536, // >= 1536px\n} as const;\n\nconst getBreakpointInfo = (width: number): BreakpointInfo => {\n  let current: Breakpoint = 'xs';\n\n  if (width >= BREAKPOINTS['2xl']) {\n    current = '2xl';\n  } else if (width >= BREAKPOINTS.xl) {\n    current = 'xl';\n  } else if (width >= BREAKPOINTS.lg) {\n    current = 'lg';\n  } else if (width >= BREAKPOINTS.md) {\n    current = 'md';\n  } else if (width >= BREAKPOINTS.sm) {\n    current = 'sm';\n  } else {\n    current = 'xs';\n  }\n\n  return {\n    current,\n    xs: width < BREAKPOINTS.sm,\n    sm: width >= BREAKPOINTS.sm && width < BREAKPOINTS.md,\n    md: width >= BREAKPOINTS.md && width < BREAKPOINTS.lg,\n    lg: width >= BREAKPOINTS.lg && width < BREAKPOINTS.xl,\n    xl: width >= BREAKPOINTS.xl && width < BREAKPOINTS['2xl'],\n    '2xl': width >= BREAKPOINTS['2xl'],\n  };\n};\n\nconst breakpointEqual = (a: BreakpointInfo, b: BreakpointInfo) =>\n  a.current === b.current &&\n  a.xs === b.xs &&\n  a.sm === b.sm &&\n  a.md === b.md &&\n  a.lg === b.lg &&\n  a.xl === b.xl &&\n  a['2xl'] === b['2xl'];\n\nconst measureTarget = (target: HTMLElement) => ({\n  width: target.offsetWidth,\n  height: target.offsetHeight,\n});\n\nconst measureViewport = () => ({\n  width: window.innerWidth,\n  height: window.innerHeight,\n});\n\nconst useResponsiveSize = <T extends HTMLElement>(options?: Options) => {\n  const { delay = 100, container, viewport = false } = options || {};\n\n  const [element, setElement] = useState<T | null>(null);\n  const [size, setSize] = useState({ width: 0, height: 0 });\n  const [breakpoint, setBreakpoint] = useState<BreakpointInfo>(() =>\n    getBreakpointInfo(0),\n  );\n\n  const observerRef = useRef<ResizeObserver | null>(null);\n  const latestRef = useRef({ width: 0, height: 0 });\n  const committedRef = useRef({ width: 0, height: 0 });\n\n  const ref = useCallback((node: T | null) => {\n    setElement(node);\n  }, []);\n\n  // `size` and `breakpoint` are always committed together here, so\n  // consumers never observe one reflecting a newer measurement than the\n  // other.\n  const commit = useCallback(() => {\n    const next = latestRef.current;\n\n    if (\n      committedRef.current.width === next.width &&\n      committedRef.current.height === next.height\n    ) {\n      return;\n    }\n\n    committedRef.current = next;\n    setSize(next);\n\n    const nextBreakpoint = getBreakpointInfo(next.width);\n    setBreakpoint(prev =>\n      breakpointEqual(prev, nextBreakpoint) ? prev : nextBreakpoint,\n    );\n  }, []);\n\n  // Manual invocation only (`autoInvoke: false`) — reuses useDebounce's\n  // debounced-callback machinery instead of duplicating it here.\n  const debouncedCommit = useDebounce(commit, { delay, autoInvoke: false });\n\n  // Measure synchronously before paint so the very first render reflects\n  // the real size/breakpoint instead of the `{0,0}`/`xs` placeholder —\n  // only later updates (from the observer/listener below) go through the\n  // debounced path.\n  useLayoutEffect(() => {\n    const measured = viewport\n      ? measureViewport()\n      : (() => {\n          const target = container ?? element ?? document.body;\n          return target ? measureTarget(target) : null;\n        })();\n\n    if (!measured) {\n      return;\n    }\n\n    latestRef.current = measured;\n    commit();\n  }, [container, element, viewport, commit]);\n\n  useEffect(() => {\n    if (viewport) {\n      const onResize = () => {\n        latestRef.current = measureViewport();\n        debouncedCommit();\n      };\n\n      window.addEventListener('resize', onResize);\n      return () => window.removeEventListener('resize', onResize);\n    }\n\n    const target = container ?? element ?? document.body;\n\n    if (!target) {\n      return;\n    }\n\n    if (observerRef.current) {\n      observerRef.current.disconnect();\n    }\n\n    observerRef.current = new ResizeObserver(() => {\n      requestAnimationFrame(() => {\n        latestRef.current = measureTarget(target);\n        debouncedCommit();\n      });\n    });\n\n    observerRef.current.observe(target);\n\n    return () => {\n      observerRef.current?.disconnect();\n      observerRef.current = null;\n    };\n  }, [container, element, viewport, debouncedCommit]);\n\n  return {\n    size,\n    breakpoint,\n    ref,\n  };\n};\n\nexport default useResponsiveSize;\n"],"mappings":"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"}

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"}