@vitus-labs/hooks 2.0.0-alpha.9 → 2.0.0-beta.1

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

@@ -0,0 +1,435 @@
+import { context, get, throttle } from "@vitus-labs/core";
+import { useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { AccessibilityInfo, Appearance, Dimensions } from "react-native";
+
+//#region src/useBreakpoint.native.ts
+/**
+* Returns the name of the currently active breakpoint from the
+* unistyle/core theme context (e.g. `"xs"`, `"md"`, `"lg"`).
+*
+* Uses React Native's `Dimensions` API instead of `matchMedia`.
+*/
+const useBreakpoint = () => {
+	const breakpoints = useContext(context)?.theme?.breakpoints;
+	const sorted = useMemo(() => {
+		if (!breakpoints) return [];
+		return Object.entries(breakpoints).sort(([, a], [, b]) => a - b);
+	}, [breakpoints]);
+	const getMatch = useCallback((width) => {
+		let match = sorted[0]?.[0];
+		for (const [name, min] of sorted) if (width >= min) match = name;
+		return match;
+	}, [sorted]);
+	const [current, setCurrent] = useState(() => {
+		if (sorted.length === 0) return void 0;
+		return getMatch(Dimensions.get("window").width);
+	});
+	useEffect(() => {
+		if (sorted.length === 0) return void 0;
+		const sub = Dimensions.addEventListener("change", ({ window }) => {
+			setCurrent(getMatch(window.width));
+		});
+		return () => sub.remove();
+	}, [sorted, getMatch]);
+	return current;
+};
+
+//#endregion
+//#region src/useColorScheme.native.ts
+const toScheme = (value) => value === "dark" ? "dark" : "light";
+/**
+* Returns the user's preferred color scheme (`"light"` or `"dark"`).
+* Uses React Native's `Appearance` API and subscribes to changes.
+*/
+const useColorScheme = () => {
+	const [scheme, setScheme] = useState(() => toScheme(Appearance.getColorScheme()));
+	useEffect(() => {
+		const sub = Appearance.addChangeListener(({ colorScheme }) => {
+			setScheme(toScheme(colorScheme));
+		});
+		return () => sub.remove();
+	}, []);
+	return scheme;
+};
+
+//#endregion
+//#region src/useControllableState.ts
+/**
+* Unified controlled/uncontrolled state pattern.
+* When `value` is provided the component is controlled; otherwise
+* internal state is used with `defaultValue` as the initial value.
+* The `onChange` callback fires in both modes.
+*/
+const useControllableState = ({ value, defaultValue, onChange }) => {
+	const [internal, setInternal] = useState(defaultValue);
+	const onChangeRef = useRef(onChange);
+	onChangeRef.current = onChange;
+	const isControlled = value !== void 0;
+	const current = isControlled ? value : internal;
+	return [current, useCallback((next) => {
+		const nextValue = typeof next === "function" ? next(current) : next;
+		if (!isControlled) setInternal(nextValue);
+		onChangeRef.current?.(nextValue);
+	}, [current, isControlled])];
+};
+
+//#endregion
+//#region src/useDebouncedCallback.ts
+/**
+* Returns a stable debounced version of the callback.
+* The returned function has `.cancel()` and `.flush()` methods.
+* Always calls the latest callback (no stale closures).
+* Cleans up on unmount.
+*/
+const useDebouncedCallback = (callback, delay) => {
+	const callbackRef = useRef(callback);
+	callbackRef.current = callback;
+	const timerRef = useRef(null);
+	const lastArgsRef = useRef(null);
+	const cancel = useCallback(() => {
+		if (timerRef.current != null) {
+			clearTimeout(timerRef.current);
+			timerRef.current = null;
+		}
+		lastArgsRef.current = null;
+	}, []);
+	const flush = useCallback(() => {
+		if (timerRef.current != null && lastArgsRef.current != null) {
+			clearTimeout(timerRef.current);
+			timerRef.current = null;
+			callbackRef.current(...lastArgsRef.current);
+			lastArgsRef.current = null;
+		}
+	}, []);
+	useEffect(() => cancel, [cancel]);
+	const debounced = useCallback((...args) => {
+		lastArgsRef.current = args;
+		if (timerRef.current != null) clearTimeout(timerRef.current);
+		timerRef.current = setTimeout(() => {
+			timerRef.current = null;
+			callbackRef.current(...args);
+			lastArgsRef.current = null;
+		}, delay);
+	}, [delay]);
+	return Object.assign(debounced, {
+		cancel,
+		flush
+	});
+};
+
+//#endregion
+//#region src/useDebouncedValue.ts
+/**
+* Returns a debounced version of the value that only updates
+* after `delay` ms of inactivity.
+*
+* @example
+* ```ts
+* const [search, setSearch] = useState('')
+* const debouncedSearch = useDebouncedValue(search, 300)
+* ```
+*/
+const useDebouncedValue = (value, delay) => {
+	const [debounced, setDebounced] = useState(value);
+	useEffect(() => {
+		const id = setTimeout(() => setDebounced(value), delay);
+		return () => clearTimeout(id);
+	}, [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
+/**
+* Declarative `setInterval` with auto-cleanup.
+* Pass `null` as `delay` to pause the interval.
+* Always calls the latest callback (no stale closures).
+*/
+const useInterval = (callback, delay) => {
+	const callbackRef = useRef(callback);
+	callbackRef.current = callback;
+	useEffect(() => {
+		if (delay === null) return void 0;
+		const id = setInterval(() => callbackRef.current(), delay);
+		return () => clearInterval(id);
+	}, [delay]);
+};
+
+//#endregion
+//#region src/useIsomorphicLayoutEffect.ts
+/**
+* `useLayoutEffect` on the client, `useEffect` on the server.
+* Avoids the React SSR warning about useLayoutEffect.
+*/
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+
+//#endregion
+//#region src/useKeyboard.native.ts
+/**
+* No-op on React Native. Physical keyboard events are not reliably
+* available across all RN platforms. Use `TextInput.onKeyPress` or
+* a hardware keyboard library for specific use cases.
+*/
+const useKeyboard = () => {};
+
+//#endregion
+//#region src/useLatest.ts
+/**
+* Returns a ref that always holds the latest value.
+* Useful to avoid stale closures in callbacks and effects.
+*/
+const useLatest = (value) => {
+	const ref = useRef(value);
+	ref.current = value;
+	return ref;
+};
+
+//#endregion
+//#region src/useMergedRef.ts
+/**
+* Merges multiple refs (callback or object) into a single stable callback ref.
+* Handles null, callback refs, and object refs with `.current`.
+*/
+const useMergedRef = (...refs) => {
+	return useCallback((node) => {
+		for (const ref of refs) {
+			if (!ref) continue;
+			if (typeof ref === "function") ref(node);
+			else ref.current = node;
+		}
+	}, refs);
+};
+
+//#endregion
+//#region src/usePrevious.ts
+/**
+* Returns the value from the previous render.
+* Returns `undefined` on the first render.
+*/
+const usePrevious = (value) => {
+	const ref = useRef(void 0);
+	useEffect(() => {
+		ref.current = value;
+	});
+	return ref.current;
+};
+
+//#endregion
+//#region src/useReducedMotion.native.ts
+/**
+* Returns `true` when the user prefers reduced motion.
+* Uses React Native's `AccessibilityInfo.isReduceMotionEnabled()`.
+*/
+const useReducedMotion = () => {
+	const [reduced, setReduced] = useState(false);
+	useEffect(() => {
+		AccessibilityInfo.isReduceMotionEnabled().then(setReduced);
+		const sub = AccessibilityInfo.addEventListener("reduceMotionChanged", setReduced);
+		return () => sub.remove();
+	}, []);
+	return reduced;
+};
+
+//#endregion
+//#region src/useRootSize.ts
+/**
+* Returns `rootSize` from the theme context along with
+* `pxToRem` and `remToPx` conversion utilities.
+*
+* Defaults to `16` when no Provider is mounted.
+*/
+const useRootSize = () => {
+	const rootSize = useContext(context)?.theme?.rootSize ?? 16;
+	return useMemo(() => ({
+		rootSize,
+		pxToRem: (px) => `${px / rootSize}rem`,
+		remToPx: (rem) => rem * rootSize
+	}), [rootSize]);
+};
+
+//#endregion
+//#region src/useSpacing.ts
+/**
+* Returns a `spacing(n)` function that computes spacing values
+* based on `rootSize` from the theme.
+*
+* @param base - Base spacing unit in px (defaults to `rootSize / 2`, i.e. 8px)
+*
+* @example
+* ```ts
+* const spacing = useSpacing()
+* spacing(1)  // "8px"
+* spacing(2)  // "16px"
+* spacing(0.5) // "4px"
+* ```
+*/
+const useSpacing = (base) => {
+	const { rootSize } = useRootSize();
+	const unit = base ?? rootSize / 2;
+	return useMemo(() => (multiplier) => `${unit * multiplier}px`, [unit]);
+};
+
+//#endregion
+//#region src/useThemeValue.ts
+/**
+* Deep-reads a value from the current theme by dot-separated path.
+*
+* @example
+* ```ts
+* const primary = useThemeValue<string>('colors.primary')
+* const columns = useThemeValue<number>('grid.columns')
+* ```
+*/
+const useThemeValue = (path) => {
+	const theme = useContext(context)?.theme;
+	if (!theme) return void 0;
+	return get(theme, path);
+};
+
+//#endregion
+//#region src/useThrottledCallback.ts
+/**
+* Returns a stable throttled version of the callback.
+* Uses `throttle` from `@vitus-labs/core`.
+* Always calls the latest callback (no stale closures).
+* Cleans up on unmount.
+*/
+const useThrottledCallback = (callback, delay) => {
+	const callbackRef = useRef(callback);
+	callbackRef.current = callback;
+	const throttled = useMemo(() => throttle((...args) => callbackRef.current(...args), delay), [delay]);
+	useEffect(() => () => throttled.cancel(), [throttled]);
+	return throttled;
+};
+
+//#endregion
+//#region src/useTimeout.ts
+/**
+* Declarative `setTimeout` with auto-cleanup.
+* Pass `null` as `delay` to disable. Returns `reset` and `clear` controls.
+* Always calls the latest callback (no stale closures).
+*/
+const useTimeout = (callback, delay) => {
+	const callbackRef = useRef(callback);
+	callbackRef.current = callback;
+	const timerRef = useRef(null);
+	const clear = useCallback(() => {
+		if (timerRef.current != null) {
+			clearTimeout(timerRef.current);
+			timerRef.current = null;
+		}
+	}, []);
+	const reset = useCallback(() => {
+		clear();
+		if (delay !== null) timerRef.current = setTimeout(() => {
+			timerRef.current = null;
+			callbackRef.current();
+		}, delay);
+	}, [delay, clear]);
+	useEffect(() => {
+		reset();
+		return clear;
+	}, [reset, clear]);
+	return {
+		reset,
+		clear
+	};
+};
+
+//#endregion
+//#region src/useToggle.ts
+/**
+* Boolean state with `toggle`, `setTrue`, and `setFalse` helpers.
+* Returns `[value, toggle, setTrue, setFalse]`.
+*/
+const useToggle = (initial = false) => {
+	const [value, setValue] = useState(initial);
+	return [
+		value,
+		useCallback(() => setValue((v) => !v), []),
+		useCallback(() => setValue(true), []),
+		useCallback(() => setValue(false), [])
+	];
+};
+
+//#endregion
+//#region src/useUpdateEffect.ts
+/**
+* Like `useEffect` but skips the initial mount — only fires on updates.
+*/
+const useUpdateEffect = (effect, deps) => {
+	const mounted = useRef(false);
+	useEffect(() => {
+		if (!mounted.current) {
+			mounted.current = true;
+			return;
+		}
+		return effect();
+	}, deps);
+};
+
+//#endregion
+//#region src/useWindowResize.native.ts
+/**
+* Tracks the React Native window dimensions.
+* Uses `Dimensions` API instead of `window.innerWidth/innerHeight`.
+* The `throttleDelay` parameter is accepted for API compat but not used
+* (RN dimension events fire infrequently).
+*/
+const useWindowResize = ({ onChange } = {}, { width, height } = {}) => {
+	const [windowSize, setWindowSize] = useState(() => {
+		const dim = Dimensions.get("window");
+		return {
+			width: width ?? dim.width,
+			height: height ?? dim.height
+		};
+	});
+	const onChangeRef = useRef(onChange);
+	onChangeRef.current = onChange;
+	useEffect(() => {
+		const sub = Dimensions.addEventListener("change", ({ window }) => {
+			const sizes = {
+				width: window.width,
+				height: window.height
+			};
+			setWindowSize(sizes);
+			onChangeRef.current?.(sizes);
+		});
+		return () => sub.remove();
+	}, []);
+	return windowSize;
+};
+
+//#endregion
+export { useBreakpoint, useColorScheme, useControllableState, useDebouncedCallback, useDebouncedValue, useFocus, useHover, 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.0.0-alpha.9+f2f47db",
+  "version": "2.0.0-beta.1",
   "license": "MIT",
   "author": "Vit Bokisch <vit@bokisch.cz>",
   "maintainers": [
@@ -10,10 +10,13 @@
   "sideEffects": false,
   "exports": {
     "source": "./src/index.ts",
+    "react-native": "./lib/vitus-labs-hooks.native.js",
     "import": "./lib/index.js",
     "types": "./lib/index.d.ts"
   },
   "types": "./lib/index.d.ts",
+  "react-native": "./lib/vitus-labs-hooks.native.js",
+  "main": "./lib/index.js",
   "files": [
     "lib",
     "!lib/**/*.map",
@@ -31,7 +34,8 @@
     "test:coverage": "vitest run --coverage",
     "test:watch": "vitest",
     "cover": "coveralls < .coverage/lcov.info",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "version": "node ../../scripts/sync-peer-deps.mjs"
   },
   "publishConfig": {
     "access": "public"
@@ -48,14 +52,20 @@
     "node": ">= 18"
   },
   "peerDependencies": {
-    "@vitus-labs/core": "^1.4.0",
-    "react": ">= 19"
+    "@vitus-labs/core": "2.0.0-beta.1",
+    "react": ">= 19",
+    "react-native": ">= 0.76"
   },
-  "devDependencies": {
-    "@vitus-labs/core": "2.0.0-alpha.9+f2f47db",
-    "@vitus-labs/tools-rolldown": "^1.6.0",
-    "@vitus-labs/tools-storybook": "^1.6.0",
-    "@vitus-labs/tools-typescript": "^1.6.0"
+  "peerDependenciesMeta": {
+    "react-native": {
+      "optional": true
+    }
   },
-  "gitHead": "f2f47db887d6a846ee5f9e96f290c59cdde4772a"
+  "devDependencies": {
+    "@vitus-labs/core": "workspace:*",
+    "@vitus-labs/tools-rolldown": "2.2.0",
+    "@vitus-labs/tools-storybook": "2.2.0",
+    "@vitus-labs/tools-typescript": "2.1.0",
+    "react-native": ">=0.84.1"
+  }
 }

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2023-present Vit Bokisch
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.