@vitus-labs/hooks 2.6.1 → 2.7.0

package/README.md

@@ -1,6 +1,6 @@
 # @vitus-labs/hooks
 
-28 React hooks for UI interactions, state management, DOM observation, accessibility, and theming. 2.15KB gzipped.
+28 React hooks for UI interactions, state management, DOM observation, accessibility, and theming. ~3.4 KB gzipped.
 
 [![npm](https://img.shields.io/npm/v/@vitus-labs/hooks)](https://www.npmjs.com/package/@vitus-labs/hooks)
 [![license](https://img.shields.io/npm/l/@vitus-labs/hooks)](https://github.com/vitus-labs/ui-system/blob/main/LICENSE)

package/lib/index.d.ts

@@ -1,4 +1,4 @@
-import { DependencyList, EffectCallback, Ref, useLayoutEffect } from "react";
+import { DependencyList, EffectCallback, Ref, RefObject, useLayoutEffect } from "react";
 
 //#region src/useBreakpoint.d.ts
 type UseBreakpoint = () => string | undefined;
@@ -47,6 +47,24 @@ type UseControllableState = <T>(options: UseControllableStateOptions<T>) => [T,
  */
 declare const useControllableState: UseControllableState;
 //#endregion
+//#region src/useCopyToClipboard.d.ts
+type UseCopyToClipboardReturn = readonly [copied: boolean, copy: (text: string) => Promise<boolean>, reset: () => void];
+type UseCopyToClipboard = (resetMs?: number) => UseCopyToClipboardReturn;
+/**
+ * Copy text to the clipboard with a transient "copied" flag (auto-resets
+ * after `resetMs`, default 2000). Falls back to the legacy
+ * `document.execCommand('copy')` path on browsers without the async
+ * Clipboard API (or when invoked outside a user gesture / on an HTTP
+ * origin where the API rejects).
+ *
+ * @example
+ * ```tsx
+ * const [copied, copy] = useCopyToClipboard()
+ * <button onClick={() => copy('hello')}>{copied ? '✓ Copied' : 'Copy'}</button>
+ * ```
+ */
+declare const useCopyToClipboard: UseCopyToClipboard;
+//#endregion
 //#region src/useDebouncedCallback.d.ts
 type DebouncedFn<T extends (...args: any[]) => any> = {
   (...args: Parameters<T>): void;
@@ -88,6 +106,28 @@ type UseElementSize = () => [(node: Element | null) => void, Size];
  */
 declare const useElementSize: UseElementSize;
 //#endregion
+//#region src/useEventListener.d.ts
+type EventTargetLike = EventTarget | {
+  current: EventTarget | null;
+} | null;
+type UseEventListener = <K extends keyof WindowEventMap>(event: K, handler: (e: WindowEventMap[K]) => void, target?: EventTargetLike, options?: AddEventListenerOptions | boolean) => void;
+/**
+ * Subscribe to a DOM event with the right typing and cleanup. The
+ * handler is captured via a ref so the registered listener stays stable
+ * even when consumers pass a fresh closure each render — no re-attach
+ * thrash.
+ *
+ * `target` defaults to `window` and may also be a ref (the ref is read
+ * lazily inside the effect so it can change between renders).
+ *
+ * @example
+ * ```ts
+ * useEventListener('keydown', (e) => { if (e.key === 'Escape') onClose() })
+ * useEventListener('click', onClickOutside, popoverRef)
+ * ```
+ */
+declare const useEventListener: UseEventListener;
+//#endregion
 //#region src/useFocus.d.ts
 type UseFocus = (initialValue?: boolean) => {
   focused: boolean;
@@ -97,18 +137,36 @@ type UseFocus = (initialValue?: boolean) => {
 /**
  * Simple focus-state hook that returns a boolean plus stable
  * `onFocus`/`onBlur` handlers ready to spread onto an element.
+ *
+ * **Web only.** Not re-exported on React Native — RN's `onFocus`/`onBlur`
+ * only exist on focusable components (TextInput, Pressable) and the
+ * shape varies enough that a single generic hook is misleading. Use the
+ * RN component's own focus props directly.
  */
 declare const useFocus: UseFocus;
 //#endregion
 //#region src/useFocusTrap.d.ts
+type UseFocusTrapOptions = {
+  /**
+   * If true, on enable: move focus to the first focusable element inside
+   * the container (or the container itself when none exist). Restores focus
+   * to the previously-active element on disable. Default `true`.
+   */
+  autoFocus?: boolean;
+};
 type UseFocusTrap = (ref: {
   current: HTMLElement | null;
-}, enabled?: boolean) => void;
+}, enabled?: boolean, options?: UseFocusTrapOptions) => void;
 /**
  * Traps keyboard focus within the referenced container.
  * Tab and Shift+Tab cycle through focusable elements inside.
  * Useful for modals, dialogs, and dropdown menus.
  *
+ * With `autoFocus` (default `true`), focus moves INTO the container on
+ * enable and is restored to the previously-focused element on disable —
+ * matching the Dialog WAI-ARIA pattern. Pair with `useScrollLock` for full
+ * modal a11y.
+ *
  * Focusable elements are cached and only re-queried when DOM mutations
  * inside the container add/remove nodes — not on every Tab keypress.
  */
@@ -123,6 +181,10 @@ type UseHover = (initialValue?: boolean) => {
 /**
  * Simple hover-state hook that returns a boolean plus stable
  * `onMouseEnter`/`onMouseLeave` handlers ready to spread onto an element.
+ *
+ * **Web only.** Not re-exported on React Native — `onMouseEnter`/
+ * `onMouseLeave` are never fired by any RN component. For RN hover state
+ * use Pressable's `onHoverIn` / `onHoverOut` props directly.
  */
 declare const useHover: UseHover;
 //#endregion
@@ -180,6 +242,23 @@ type UseLatest = <T>(value: T) => {
  */
 declare const useLatest: UseLatest;
 //#endregion
+//#region src/useLocalStorage.d.ts
+type UseLocalStorage = <T>(key: string, initialValue: T) => [T, (value: T | ((prev: T) => T)) => void, () => void];
+/**
+ * State synced with `localStorage`. SSR-safe (returns `initialValue` on
+ * the server) and tolerant of private-mode / quota-exceeded errors.
+ *
+ * Returns `[value, setValue, remove]`. `setValue` accepts either a new
+ * value or an updater function; `remove` clears the entry and resets the
+ * in-memory state to `initialValue`.
+ *
+ * @example
+ * ```ts
+ * const [theme, setTheme, clear] = useLocalStorage('theme', 'dark')
+ * ```
+ */
+declare const useLocalStorage: UseLocalStorage;
+//#endregion
 //#region src/useMediaQuery.d.ts
 type UseMediaQuery = (query: string) => boolean;
 /**
@@ -212,6 +291,27 @@ type UseReducedMotion = () => boolean;
  */
 declare const useReducedMotion: UseReducedMotion;
 //#endregion
+//#region src/useResizeObserver.d.ts
+type UseResizeObserver = (ref: RefObject<HTMLElement | null>) => DOMRectReadOnly | null;
+/**
+ * Returns the latest `contentRect` of the referenced element via a
+ * shared `ResizeObserver`. Reads `null` until the first observation.
+ * Safe to render with — uses state so the component re-renders when
+ * dimensions change.
+ *
+ * Lower-level than `useElementSize` (which returns `{width, height}`
+ * numbers); this hook exposes the full DOMRect so consumers can read
+ * top/left for absolute positioning.
+ *
+ * @example
+ * ```tsx
+ * const ref = useRef<HTMLDivElement>(null)
+ * const rect = useResizeObserver(ref)
+ * return <div ref={ref}>w: {rect?.width ?? 0}</div>
+ * ```
+ */
+declare const useResizeObserver: UseResizeObserver;
+//#endregion
 //#region src/useRootSize.d.ts
 type RootSizeResult = {
   rootSize: number;
@@ -324,5 +424,5 @@ type UseWindowResize = (params?: Partial<{
  */
 declare const useWindowResize: UseWindowResize;
 //#endregion
-export { type UseBreakpoint, type UseClickOutside, type UseColorScheme, type UseControllableState, type UseDebouncedCallback, type UseDebouncedValue, type UseElementSize, type UseFocus, type UseFocusTrap, type UseHover, type UseIntersection, type UseInterval, type UseIsomorphicLayoutEffect, type UseKeyboard, type UseLatest, type UseMediaQuery, type UseMergedRef, type UsePrevious, type UseReducedMotion, type UseRootSize, type UseScrollLock, type UseSpacing, type UseThemeValue, type UseThrottledCallback, type UseTimeout, type UseToggle, type UseUpdateEffect, type UseWindowResize, useBreakpoint, useClickOutside, useColorScheme, useControllableState, useDebouncedCallback, useDebouncedValue, useElementSize, useFocus, useFocusTrap, useHover, useIntersection, useInterval, useIsomorphicLayoutEffect, useKeyboard, useLatest, useMediaQuery, useMergedRef, usePrevious, useReducedMotion, useRootSize, useScrollLock, useSpacing, useThemeValue, useThrottledCallback, useTimeout, useToggle, useUpdateEffect, useWindowResize };
+export { type UseBreakpoint, type UseClickOutside, type UseColorScheme, type UseControllableState, type UseCopyToClipboard, type UseDebouncedCallback, type UseDebouncedValue, type UseElementSize, type UseEventListener, type UseFocus, type UseFocusTrap, type UseHover, type UseIntersection, type UseInterval, type UseIsomorphicLayoutEffect, type UseKeyboard, type UseLatest, type UseLocalStorage, type UseMediaQuery, type UseMergedRef, type UsePrevious, type UseReducedMotion, type UseResizeObserver, type UseRootSize, type UseScrollLock, type UseSpacing, type UseThemeValue, type UseThrottledCallback, type UseTimeout, type UseToggle, type UseUpdateEffect, type UseWindowResize, useBreakpoint, useClickOutside, useColorScheme, useControllableState, useCopyToClipboard, useDebouncedCallback, useDebouncedValue, useElementSize, useEventListener, useFocus, useFocusTrap, useHover, useIntersection, useInterval, useIsomorphicLayoutEffect, useKeyboard, useLatest, useLocalStorage, useMediaQuery, useMergedRef, usePrevious, useReducedMotion, useResizeObserver, useRootSize, useScrollLock, useSpacing, useThemeValue, useThrottledCallback, useTimeout, useToggle, useUpdateEffect, useWindowResize };
 //# sourceMappingURL=index2.d.ts.map

package/lib/index.js

@@ -15,7 +15,12 @@ const useBreakpoint = () => {
 	const breakpoints = useContext(context)?.theme?.breakpoints;
 	const sorted = useMemo(() => {
 		if (!breakpoints) return [];
-		return Object.entries(breakpoints).sort(([, a], [, b]) => a - b);
+		const tuples = [];
+		for (const name in breakpoints) {
+			const value = breakpoints[name];
+			if (typeof value === "number") tuples.push([name, value]);
+		}
+		return tuples.sort(([, a], [, b]) => a - b);
 	}, [breakpoints]);
 	const [current, setCurrent] = useState(() => {
 		if (sorted.length === 0) return void 0;
@@ -122,6 +127,71 @@ const useControllableState = ({ value, defaultValue, onChange }) => {
 	}, [current, isControlled])];
 };
 
+//#endregion
+//#region src/useCopyToClipboard.ts
+/**
+* Copy text to the clipboard with a transient "copied" flag (auto-resets
+* after `resetMs`, default 2000). Falls back to the legacy
+* `document.execCommand('copy')` path on browsers without the async
+* Clipboard API (or when invoked outside a user gesture / on an HTTP
+* origin where the API rejects).
+*
+* @example
+* ```tsx
+* const [copied, copy] = useCopyToClipboard()
+* <button onClick={() => copy('hello')}>{copied ? '✓ Copied' : 'Copy'}</button>
+* ```
+*/
+const useCopyToClipboard = (resetMs = 2e3) => {
+	const [copied, setCopied] = useState(false);
+	const timerRef = useRef(null);
+	const reset = useCallback(() => {
+		if (timerRef.current !== null) {
+			clearTimeout(timerRef.current);
+			timerRef.current = null;
+		}
+		setCopied(false);
+	}, []);
+	const copy = useCallback(async (text) => {
+		let ok = false;
+		try {
+			if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
+				await navigator.clipboard.writeText(text);
+				ok = true;
+			} else if (typeof document !== "undefined") {
+				const ta = document.createElement("textarea");
+				ta.value = text;
+				ta.setAttribute("readonly", "");
+				ta.style.position = "absolute";
+				ta.style.left = "-9999px";
+				document.body.appendChild(ta);
+				ta.select();
+				ok = document.execCommand?.("copy") === true;
+				document.body.removeChild(ta);
+			}
+		} catch {
+			ok = false;
+		}
+		if (ok) {
+			setCopied(true);
+			if (timerRef.current !== null) clearTimeout(timerRef.current);
+			if (resetMs > 0) timerRef.current = setTimeout(() => {
+				timerRef.current = null;
+				setCopied(false);
+			}, resetMs);
+		}
+		return ok;
+	}, [resetMs]);
+	useEffect(() => () => {
+		if (timerRef.current !== null) clearTimeout(timerRef.current);
+	}, []);
+	return [
+		copied,
+		copy,
+		reset
+	];
+};
+
 //#endregion
 //#region src/useDebouncedCallback.ts
 /**
@@ -224,11 +294,56 @@ const useElementSize = () => {
 	}, []), size];
 };
 
+//#endregion
+//#region src/useEventListener.ts
+/**
+* Subscribe to a DOM event with the right typing and cleanup. The
+* handler is captured via a ref so the registered listener stays stable
+* even when consumers pass a fresh closure each render — no re-attach
+* thrash.
+*
+* `target` defaults to `window` and may also be a ref (the ref is read
+* lazily inside the effect so it can change between renders).
+*
+* @example
+* ```ts
+* useEventListener('keydown', (e) => { if (e.key === 'Escape') onClose() })
+* useEventListener('click', onClickOutside, popoverRef)
+* ```
+*/
+const useEventListener = (event, handler, target, options) => {
+	const handlerRef = useRef(handler);
+	handlerRef.current = handler;
+	useEffect(() => {
+		if (typeof window === "undefined") return void 0;
+		const node = resolveTarget(target);
+		if (!node || typeof node.addEventListener !== "function") return void 0;
+		const listener = (e) => handlerRef.current(e);
+		node.addEventListener(event, listener, options);
+		return () => node.removeEventListener(event, listener, options);
+	}, [
+		event,
+		target,
+		options
+	]);
+};
+const resolveTarget = (target) => {
+	if (target === void 0) return typeof window === "undefined" ? null : window;
+	if (target === null) return null;
+	if ("current" in target) return target.current;
+	return target;
+};
+
 //#endregion
 //#region src/useFocus.ts
 /**
 * Simple focus-state hook that returns a boolean plus stable
 * `onFocus`/`onBlur` handlers ready to spread onto an element.
+*
+* **Web only.** Not re-exported on React Native — RN's `onFocus`/`onBlur`
+* only exist on focusable components (TextInput, Pressable) and the
+* shape varies enough that a single generic hook is misleading. Use the
+* RN component's own focus props directly.
 */
 const useFocus = (initial = false) => {
 	const [focused, setFocused] = useState(initial);
@@ -241,28 +356,44 @@ const useFocus = (initial = false) => {
 
 //#endregion
 //#region src/useFocusTrap.ts
-const FOCUSABLE = "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])";
-const wrapFocus = (e, target) => {
-	if (!target) return;
-	e.preventDefault();
-	target.focus();
-};
+const FOCUSABLE = [
+	"a[href]",
+	"button:not([disabled])",
+	"input:not([disabled])",
+	"select:not([disabled])",
+	"textarea:not([disabled])",
+	"[contenteditable]:not([contenteditable=\"false\"])",
+	"video[controls]",
+	"audio[controls]",
+	"summary",
+	"[tabindex]:not([tabindex=\"-1\"])"
+].join(",");
+const isTabbable = (el) => el.getAttribute("aria-disabled") !== "true";
 /**
 * Traps keyboard focus within the referenced container.
 * Tab and Shift+Tab cycle through focusable elements inside.
 * Useful for modals, dialogs, and dropdown menus.
 *
+* With `autoFocus` (default `true`), focus moves INTO the container on
+* enable and is restored to the previously-focused element on disable —
+* matching the Dialog WAI-ARIA pattern. Pair with `useScrollLock` for full
+* modal a11y.
+*
 * Focusable elements are cached and only re-queried when DOM mutations
 * inside the container add/remove nodes — not on every Tab keypress.
 */
-const useFocusTrap = (ref, enabled = true) => {
+const useFocusTrap = (ref, enabled = true, options) => {
+	const autoFocus = options?.autoFocus !== false;
 	useEffect(() => {
 		if (!enabled) return void 0;
 		const container = ref.current;
 		if (!container) return void 0;
-		let focusable = null;
+		let focusable = [];
 		const refresh = () => {
-			focusable = container.querySelectorAll(FOCUSABLE);
+			const all = container.querySelectorAll(FOCUSABLE);
+			const result = [];
+			for (const el of all) if (isTabbable(el)) result.push(el);
+			focusable = result;
 		};
 		refresh();
 		const observer = new MutationObserver(refresh);
@@ -270,20 +401,41 @@ const useFocusTrap = (ref, enabled = true) => {
 			childList: true,
 			subtree: true
 		});
+		const prevFocus = document.activeElement;
+		if (autoFocus) if (focusable.length > 0) focusable[0].focus();
+		else {
+			if (container.tabIndex < 0) container.tabIndex = -1;
+			container.focus();
+		}
 		const handler = (e) => {
-			if (e.key !== "Tab" || !focusable || focusable.length === 0) return;
+			if (e.key !== "Tab" || focusable.length === 0) return;
 			const first = focusable[0];
 			const last = focusable[focusable.length - 1];
 			const active = document.activeElement;
-			if (e.shiftKey && active === first) wrapFocus(e, last);
-			else if (!e.shiftKey && active === last) wrapFocus(e, first);
+			if (active && !container.contains(active)) {
+				e.preventDefault();
+				first.focus();
+				return;
+			}
+			if (e.shiftKey && active === first) {
+				e.preventDefault();
+				last.focus();
+			} else if (!e.shiftKey && active === last) {
+				e.preventDefault();
+				first.focus();
+			}
 		};
 		document.addEventListener("keydown", handler);
 		return () => {
 			observer.disconnect();
 			document.removeEventListener("keydown", handler);
+			if (autoFocus && prevFocus && typeof prevFocus.focus === "function") prevFocus.focus();
 		};
-	}, [ref, enabled]);
+	}, [
+		ref,
+		enabled,
+		autoFocus
+	]);
 };
 
 //#endregion
@@ -291,6 +443,10 @@ const useFocusTrap = (ref, enabled = true) => {
 /**
 * Simple hover-state hook that returns a boolean plus stable
 * `onMouseEnter`/`onMouseLeave` handlers ready to spread onto an element.
+*
+* **Web only.** Not re-exported on React Native — `onMouseEnter`/
+* `onMouseLeave` are never fired by any RN component. For RN hover state
+* use Pressable's `onHoverIn` / `onHoverOut` props directly.
 */
 const useHover = (initial = false) => {
 	const [hover, handleHover] = useState(initial);
@@ -394,6 +550,69 @@ const useLatest = (value) => {
 	return ref;
 };
 
+//#endregion
+//#region src/useLocalStorage.ts
+const IS_SERVER = typeof window === "undefined";
+/**
+* State synced with `localStorage`. SSR-safe (returns `initialValue` on
+* the server) and tolerant of private-mode / quota-exceeded errors.
+*
+* Returns `[value, setValue, remove]`. `setValue` accepts either a new
+* value or an updater function; `remove` clears the entry and resets the
+* in-memory state to `initialValue`.
+*
+* @example
+* ```ts
+* const [theme, setTheme, clear] = useLocalStorage('theme', 'dark')
+* ```
+*/
+const useLocalStorage = (key, initialValue) => {
+	const [value, setValue] = useState(() => {
+		if (IS_SERVER) return initialValue;
+		try {
+			const raw = window.localStorage.getItem(key);
+			return raw === null ? initialValue : JSON.parse(raw);
+		} catch {
+			return initialValue;
+		}
+	});
+	const update = useCallback((next) => {
+		setValue((prev) => {
+			const resolved = typeof next === "function" ? next(prev) : next;
+			if (!IS_SERVER) try {
+				window.localStorage.setItem(key, JSON.stringify(resolved));
+			} catch {}
+			return resolved;
+		});
+	}, [key]);
+	const remove = useCallback(() => {
+		if (!IS_SERVER) try {
+			window.localStorage.removeItem(key);
+		} catch {}
+		setValue(initialValue);
+	}, [initialValue, key]);
+	useEffect(() => {
+		if (IS_SERVER) return void 0;
+		const onStorage = (e) => {
+			if (e.key !== key || e.storageArea !== window.localStorage) return;
+			if (e.newValue === null) {
+				setValue(initialValue);
+				return;
+			}
+			try {
+				setValue(JSON.parse(e.newValue));
+			} catch {}
+		};
+		window.addEventListener("storage", onStorage);
+		return () => window.removeEventListener("storage", onStorage);
+	}, [key, initialValue]);
+	return [
+		value,
+		update,
+		remove
+	];
+};
+
 //#endregion
 //#region src/useMergedRef.ts
 /**
@@ -432,6 +651,41 @@ const usePrevious = (value) => {
 */
 const useReducedMotion = () => useMediaQuery("(prefers-reduced-motion: reduce)");
 
+//#endregion
+//#region src/useResizeObserver.ts
+/**
+* Returns the latest `contentRect` of the referenced element via a
+* shared `ResizeObserver`. Reads `null` until the first observation.
+* Safe to render with — uses state so the component re-renders when
+* dimensions change.
+*
+* Lower-level than `useElementSize` (which returns `{width, height}`
+* numbers); this hook exposes the full DOMRect so consumers can read
+* top/left for absolute positioning.
+*
+* @example
+* ```tsx
+* const ref = useRef<HTMLDivElement>(null)
+* const rect = useResizeObserver(ref)
+* return <div ref={ref}>w: {rect?.width ?? 0}</div>
+* ```
+*/
+const useResizeObserver = (ref) => {
+	const [rect, setRect] = useState(null);
+	useEffect(() => {
+		if (typeof ResizeObserver === "undefined") return void 0;
+		const node = ref.current;
+		if (!node) return void 0;
+		const observer = new ResizeObserver((entries) => {
+			const entry = entries[0];
+			if (entry) setRect(entry.contentRect);
+		});
+		observer.observe(node);
+		return () => observer.disconnect();
+	}, [ref]);
+	return rect;
+};
+
 //#endregion
 //#region src/useRootSize.ts
 /**
@@ -632,5 +886,5 @@ const useWindowResize = ({ throttleDelay = 200, onChange } = {}, { width = 0, he
 };
 
 //#endregion
-export { useBreakpoint, useClickOutside, useColorScheme, useControllableState, useDebouncedCallback, useDebouncedValue, useElementSize, useFocus, useFocusTrap, useHover, useIntersection, useInterval, useIsomorphicLayoutEffect, useKeyboard, useLatest, useMediaQuery, useMergedRef, usePrevious, useReducedMotion, useRootSize, useScrollLock, useSpacing, useThemeValue, useThrottledCallback, useTimeout, useToggle, useUpdateEffect, useWindowResize };
+export { useBreakpoint, useClickOutside, useColorScheme, useControllableState, useCopyToClipboard, useDebouncedCallback, useDebouncedValue, useElementSize, useEventListener, useFocus, useFocusTrap, useHover, useIntersection, useInterval, useIsomorphicLayoutEffect, useKeyboard, useLatest, useLocalStorage, useMediaQuery, useMergedRef, usePrevious, useReducedMotion, useResizeObserver, useRootSize, useScrollLock, useSpacing, useThemeValue, useThrottledCallback, useTimeout, useToggle, useUpdateEffect, useWindowResize };
 //# sourceMappingURL=index.js.map

package/lib/vitus-labs-hooks.native.js

@@ -13,7 +13,12 @@ const useBreakpoint = () => {
 	const breakpoints = useContext(context)?.theme?.breakpoints;
 	const sorted = useMemo(() => {
 		if (!breakpoints) return [];
-		return Object.entries(breakpoints).sort(([, a], [, b]) => a - b);
+		const tuples = [];
+		for (const name in breakpoints) {
+			const value = breakpoints[name];
+			if (typeof value === "number") tuples.push([name, value]);
+		}
+		return tuples.sort(([, a], [, b]) => a - b);
 	}, [breakpoints]);
 	const getMatch = useCallback((width) => {
 		let match = sorted[0]?.[0];
@@ -138,36 +143,6 @@ const useDebouncedValue = (value, delay) => {
 	return debounced;
 };
 
-//#endregion
-//#region src/useFocus.ts
-/**
-* Simple focus-state hook that returns a boolean plus stable
-* `onFocus`/`onBlur` handlers ready to spread onto an element.
-*/
-const useFocus = (initial = false) => {
-	const [focused, setFocused] = useState(initial);
-	return {
-		focused,
-		onFocus: useCallback(() => setFocused(true), []),
-		onBlur: useCallback(() => setFocused(false), [])
-	};
-};
-
-//#endregion
-//#region src/useHover.ts
-/**
-* Simple hover-state hook that returns a boolean plus stable
-* `onMouseEnter`/`onMouseLeave` handlers ready to spread onto an element.
-*/
-const useHover = (initial = false) => {
-	const [hover, handleHover] = useState(initial);
-	return {
-		hover,
-		onMouseEnter: useCallback(() => handleHover(true), []),
-		onMouseLeave: useCallback(() => handleHover(false), [])
-	};
-};
-
 //#endregion
 //#region src/useInterval.ts
 /**
@@ -431,5 +406,5 @@ const useWindowResize = ({ onChange } = {}, { width, height } = {}) => {
 };
 
 //#endregion
-export { useBreakpoint, useColorScheme, useControllableState, useDebouncedCallback, useDebouncedValue, useFocus, useHover, useInterval, useIsomorphicLayoutEffect, useKeyboard, useLatest, useMergedRef, usePrevious, useReducedMotion, useRootSize, useSpacing, useThemeValue, useThrottledCallback, useTimeout, useToggle, useUpdateEffect, useWindowResize };
+export { useBreakpoint, useColorScheme, useControllableState, useDebouncedCallback, useDebouncedValue, useInterval, useIsomorphicLayoutEffect, useKeyboard, useLatest, useMergedRef, usePrevious, useReducedMotion, useRootSize, useSpacing, useThemeValue, useThrottledCallback, useTimeout, useToggle, useUpdateEffect, useWindowResize };
 //# sourceMappingURL=vitus-labs-hooks.native.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitus-labs/hooks",
-  "version": "2.6.1",
+  "version": "2.7.0",
   "license": "MIT",
   "author": "Vit Bokisch <vit@bokisch.cz>",
   "maintainers": [
@@ -51,7 +51,7 @@
     "node": ">= 18"
   },
   "peerDependencies": {
-    "@vitus-labs/core": "^2.6.1",
+    "@vitus-labs/core": "^2.7.0",
     "react": ">= 19",
     "react-native": ">= 0.76"
   },
@@ -62,9 +62,9 @@
   },
   "devDependencies": {
     "@vitus-labs/core": "workspace:*",
-    "@vitus-labs/tools-rolldown": "2.3.1",
-    "@vitus-labs/tools-storybook": "2.3.1",
-    "@vitus-labs/tools-typescript": "2.3.1",
+    "@vitus-labs/tools-rolldown": "2.5.0",
+    "@vitus-labs/tools-storybook": "2.5.0",
+    "@vitus-labs/tools-typescript": "2.5.0",
     "react-native": ">=0.84.1"
   }
 }