@journ/lift 0.1.1 → 0.2.0

package/README.md

@@ -1,6 +1,6 @@
 # @journ/lift
 
-React hooks for state and timing, built on fitter-happier. No DOM access, so they work in PWAs, React Native and Wails desktop apps alike.
+React hooks for state, timing and browser APIs, built on fitter-happier. Hooks marked * read `window`, `document` or `navigator` and need a browser; the others run anywhere React does.
 
 ## Install
 
@@ -11,7 +11,8 @@ pnpm add @journ/lift react
 ## Usage
 
 ```tsx
-import { useControllableState, useDebouncedValue, useDraft } from '@journ/lift'
+import { useControllableState } from '@journ/lift/use-controllable-state'
+import { useDebouncedValue } from '@journ/lift/use-debounced-value'
 
 function Toggle(props: { pressed?: boolean; defaultPressed?: boolean; onPressedChange?: (pressed: boolean) => void }) {
 	const [pressed, setPressed] = useControllableState(
@@ -32,10 +33,39 @@ function Search({ query }: { query: string }) {
 }
 ```
 
-| Entry                                | Exports                                                                |
-| ------------------------------------ | ---------------------------------------------------------------------- |
-| `@journ/lift/use-controllable-state` | `useControllableState(value, defaultValue, onChange)`                  |
-| `@journ/lift/use-debounced-value`    | `useDebouncedValue(value, delay)`                                      |
-| `@journ/lift/use-draft`              | `useDraft`: text typed freely that becomes a value on commit           |
-| `@journ/lift/required-context`       | `createRequiredContext(owner)`: a context whose hook throws outside it |
-| `@journ/lift/prefers-reduced-motion` | `prefersReducedMotion()`                                               |
+| Entry                                   | Exports                                                                | Notes                                                                     |
+| --------------------------------------- | ---------------------------------------------------------------------- | ------------------------------------------------------------------------- |
+| `@journ/lift/use-battery`               | `useBattery()`                                                         | Battery level and charging state *                                        |
+| `@journ/lift/use-browser`               | `useBrowser()`, `getBrowserVersion()`                                  | The detected browser and its major version *                              |
+| `@journ/lift/use-callback-ref`          | `useCallbackRef(fn)`                                                   | A stable callback that always calls the latest `fn`                       |
+| `@journ/lift/use-controllable-state`    | `useControllableState(value, defaultValue, onChange)`                  |                                                                           |
+| `@journ/lift/use-debounce-state`        | `useDebouncedState(initial, wait, options)`                            | State whose setter debounces updates *                                    |
+| `@journ/lift/use-debounced-callback`    | `useDebouncedCallback(fn, delayOrOptions)`                             | A debounced `fn` with `flush`, `cancel` and `isPending` *                 |
+| `@journ/lift/use-debounced-value`       | `useDebouncedValue(value, delay)`                                      |                                                                           |
+| `@journ/lift/use-did-update`            | `useDidUpdate(effect, deps)`                                           | An effect that skips the first run                                        |
+| `@journ/lift/use-disclosure`            | `useDisclosure(initial, options)`                                      | Open, close and toggle state with `onOpen` and `onClose`                  |
+| `@journ/lift/use-draft`                 | `useDraft`                                                             | Text typed freely that becomes a value on commit                          |
+| `@journ/lift/use-haptic`                | `useHaptic`, `useHapticsConfirm`, `useHapticsError`, `supportsHaptics` | Vibration and iOS haptic feedback *                                       |
+| `@journ/lift/use-headroom`              | `useHeadroom(options)`                                                 | Pinned state and scroll progress for a header that hides on scroll down * |
+| `@journ/lift/use-idle-queue`            | `useIdleQueue(options)`                                                | A queue that runs tasks while the browser is idle *                       |
+| `@journ/lift/use-intersection-observer` | `useIntersectionObserver(options)`                                     | Whether an element intersects the viewport *                              |
+| `@journ/lift/use-isomorphic-effect`     | `useIsomorphicEffect`                                                  | `useLayoutEffect` in the browser, `useEffect` on the server *             |
+| `@journ/lift/use-keybindings`           | `useKeybindings(map, target, options)`                                 | Keyboard shortcuts and key sequences *                                    |
+| `@journ/lift/use-local-storage`         | `useLocalStorage`, `useSessionStorage`                                 | State synced with web storage *                                           |
+| `@journ/lift/use-logger`                | `useLogger(name, props)`                                               | Logs mount, update and unmount                                            |
+| `@journ/lift/use-long-press`            | `useLongPress(onLongPress, disabled)`                                  | Pointer handlers that fire after a 500 ms hold                            |
+| `@journ/lift/use-map`                   | `useMap(entries)`                                                      | A `Map` that re-renders on change                                         |
+| `@journ/lift/use-measure`               | `useMeasure()`                                                         | Element width and height *                                                |
+| `@journ/lift/use-media-query`           | `useMediaQuery(query)`, `useBreakpoint(name)`, `breakpoints`           | A media query match *                                                     |
+| `@journ/lift/use-mouse`                 | `useMouse(options)`, `useMousePosition()`                              | Pointer position, relative to an element or the window *                  |
+| `@journ/lift/use-network`               | `useNetwork()`                                                         | Online state and connection details *                                     |
+| `@journ/lift/use-page-leave`            | `usePageLeave(fn)`                                                     | Calls `fn` when the pointer leaves the page *                             |
+| `@journ/lift/use-pagination`            | `usePagination(options)`, `DOTS`                                       | Page ranges with siblings and boundaries                                  |
+| `@journ/lift/use-reduced-motion`        | `useReducedMotion()`                                                   | The `prefers-reduced-motion` media query *                                |
+| `@journ/lift/use-scroll-direction`      | `useScrollDirection()`                                                 | `up`, `down` or `unknown` *                                               |
+| `@journ/lift/use-uncontrolled`          | `useUncontrolled(options)`                                             | Controlled or uncontrolled value with a change handler                    |
+| `@journ/lift/use-validated-state`       | `useValidatedState(initial, validate)`                                 | A value with its validity and last valid value                            |
+| `@journ/lift/use-window-event`          | `useWindowEvent(type, listener, options)`                              | A window event listener that never goes stale *                           |
+| `@journ/lift/use-window-scroll`         | `useWindowScroll()`                                                    | Window scroll position and a smooth `scrollTo` *                          |
+| `@journ/lift/required-context`          | `createRequiredContext(owner)`                                         | a context whose hook throws outside it                                    |
+| `@journ/lift/prefers-reduced-motion`    | `prefersReducedMotion()`                                               |                                                                           |

package/dist/env-C0PNnbwt.js

@@ -0,0 +1,4 @@
+//#region src/lib/env.ts
+const isServerSide = () => typeof window === "undefined";
+//#endregion
+export { isServerSide as t };

package/dist/logger-Dse1660l.js

@@ -0,0 +1,33 @@
+//#region src/lib/logger.ts
+const isProduction = () => {
+	const env = import.meta.env;
+	if (typeof env?.PROD === "boolean") return env.PROD;
+	return globalThis.process?.env?.NODE_ENV === "production";
+};
+const createLogger = () => {
+	const shouldLog = (level) => {
+		if (isProduction()) return level === "error";
+		return true;
+	};
+	const error = (...args) => {
+		if (shouldLog("error")) console.error(...args);
+	};
+	const warn = (...args) => {
+		if (shouldLog("warn")) console.warn(...args);
+	};
+	const info = (...args) => {
+		if (shouldLog("info")) console.info(...args);
+	};
+	const log = (...args) => {
+		if (shouldLog("log")) console.log(...args);
+	};
+	return {
+		error,
+		warn,
+		info,
+		log
+	};
+};
+const logger = createLogger();
+//#endregion
+export { logger as t };

package/dist/prefers-reduced-motion.d.ts

@@ -1,3 +1,4 @@
 //#region src/prefers-reduced-motion.d.ts
-export declare function prefersReducedMotion(): boolean;
-//#endregion
+declare const prefersReducedMotion: () => boolean;
+//#endregion
+export { prefersReducedMotion };

package/dist/prefers-reduced-motion.js

@@ -1,6 +1,4 @@
 //#region src/prefers-reduced-motion.ts
-function prefersReducedMotion() {
-	return typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches === true;
-}
+const prefersReducedMotion = () => typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches === true;
 //#endregion
 export { prefersReducedMotion };

package/dist/required-context.d.ts

@@ -4,5 +4,6 @@ import { Context } from "react";
  * A context that parts must be rendered inside of. The hook throws a clear error
  * naming the owner, so a part used on its own fails loudly instead of rendering wrong.
  */
-export declare function createRequiredContext<T>(owner: string): readonly [Context<T | null>, () => T];
-//#endregion
+declare const createRequiredContext: <T>(owner: string) => readonly [Context<T | null>, () => T];
+//#endregion
+export { createRequiredContext };

package/dist/required-context.js

@@ -4,7 +4,7 @@ import { createContext, use } from "react";
 * A context that parts must be rendered inside of. The hook throws a clear error
 * naming the owner, so a part used on its own fails loudly instead of rendering wrong.
 */
-function createRequiredContext(owner) {
+const createRequiredContext = (owner) => {
 	const RequiredContext = createContext(null);
 	const useRequired = () => {
 		const value = use(RequiredContext);
@@ -12,6 +12,6 @@ function createRequiredContext(owner) {
 		return value;
 	};
 	return [RequiredContext, useRequired];
-}
+};
 //#endregion
 export { createRequiredContext };

package/dist/try-catch-D4d3N9_W.js

@@ -0,0 +1,29 @@
+//#region src/lib/try-catch.ts
+const tryCatch = async (promise) => {
+	try {
+		return {
+			success: true,
+			data: await promise
+		};
+	} catch (error) {
+		return {
+			success: false,
+			error
+		};
+	}
+};
+const tryCatchSync = (fn) => {
+	try {
+		return {
+			success: true,
+			data: fn()
+		};
+	} catch (error) {
+		return {
+			success: false,
+			error
+		};
+	}
+};
+//#endregion
+export { tryCatchSync as n, tryCatch as t };

package/dist/types-p0KNRcj3.d.ts

@@ -0,0 +1,4 @@
+//#region src/lib/types.d.ts
+type ANY = any;
+//#endregion
+export { ANY as t };

package/dist/use-battery.d.ts

@@ -0,0 +1,12 @@
+//#region src/use-battery.d.ts
+type BatteryState = {
+  supported: boolean;
+  loading: boolean;
+  level: number | null;
+  charging: boolean | null;
+  chargingTime: number | null;
+  dischargingTime: number | null;
+};
+declare const useBattery: () => BatteryState;
+//#endregion
+export { type BatteryState, useBattery };

package/dist/use-battery.js

@@ -0,0 +1,64 @@
+import { t as tryCatch } from "./try-catch-D4d3N9_W.js";
+import { useEffect, useState, useSyncExternalStore } from "react";
+//#region src/use-battery.ts
+const BATTERY_EVENTS = [
+	"levelchange",
+	"chargingchange",
+	"chargingtimechange",
+	"dischargingtimechange"
+];
+const INITIAL_STATE = {
+	supported: true,
+	loading: true,
+	level: null,
+	charging: null,
+	chargingTime: null,
+	dischargingTime: null
+};
+const UNSUPPORTED_STATE = {
+	...INITIAL_STATE,
+	supported: false,
+	loading: false
+};
+const readBattery = (battery) => ({
+	supported: true,
+	loading: false,
+	level: battery.level,
+	charging: battery.charging,
+	chargingTime: battery.chargingTime,
+	dischargingTime: battery.dischargingTime
+});
+const subscribeNever = () => () => {};
+const hasBatteryApi = () => "getBattery" in navigator;
+const useBattery = () => {
+	const supported = useSyncExternalStore(subscribeNever, hasBatteryApi, () => true);
+	const [state, setState] = useState(INITIAL_STATE);
+	useEffect(() => {
+		const nav = navigator;
+		if (!nav.getBattery) return;
+		const getBattery = nav.getBattery.bind(nav);
+		let cancelled = false;
+		let detach = () => {};
+		tryCatch(new Promise((resolve) => resolve(getBattery()))).then((result) => {
+			if (cancelled) return;
+			if (!result.success) {
+				setState(UNSUPPORTED_STATE);
+				return;
+			}
+			const battery = result.data;
+			const update = () => setState(readBattery(battery));
+			update();
+			for (const event of BATTERY_EVENTS) battery.addEventListener(event, update);
+			detach = () => {
+				for (const event of BATTERY_EVENTS) battery.removeEventListener(event, update);
+			};
+		});
+		return () => {
+			cancelled = true;
+			detach();
+		};
+	}, []);
+	return supported ? state : UNSUPPORTED_STATE;
+};
+//#endregion
+export { useBattery };

package/dist/use-browser.d.ts

@@ -0,0 +1,6 @@
+//#region src/use-browser.d.ts
+type Browser = "undetermined" | "chrome" | "firefox" | "safari" | "edge" | "opera" | "ie" | "other";
+declare const getBrowserVersion: () => string | null;
+declare const useBrowser: () => Browser;
+//#endregion
+export { type Browser, getBrowserVersion, useBrowser };

package/dist/use-browser.js

@@ -0,0 +1,51 @@
+import { t as isServerSide } from "./env-C0PNnbwt.js";
+import { useSyncExternalStore } from "react";
+//#region src/use-browser.ts
+const matchers = [
+	{
+		browser: "edge",
+		detect: /Edge\/([0-9]+)/i,
+		version: /Edge\/([0-9]+)/i
+	},
+	{
+		browser: "chrome",
+		detect: /(?!Chrom.*OPR)Chrom(?:e|ium)\/([0-9]+)/i,
+		version: /Chrom(?:e|ium)\/([0-9]+)/i
+	},
+	{
+		browser: "firefox",
+		detect: /Firefox\/([0-9]+)/i,
+		version: /Firefox\/([0-9]+)/i
+	},
+	{
+		browser: "safari",
+		detect: /^((?!chrome|android).)*safari/i,
+		version: /Version\/([0-9]+)/i
+	},
+	{
+		browser: "opera",
+		detect: /(OPR|Opera)\/([0-9]+)/i,
+		version: /(?:OPR|Opera)\/([0-9]+)/i
+	},
+	{
+		browser: "ie",
+		detect: /MSIE|Trident/i,
+		version: /(?:MSIE |rv:)([0-9]+)/i
+	}
+];
+const detectBrowser = (userAgent) => matchers.find(({ detect }) => detect.test(userAgent));
+const getBrowser = () => {
+	if (isServerSide()) return "undetermined";
+	return detectBrowser(window.navigator.userAgent)?.browser ?? "other";
+};
+const getBrowserVersion = () => {
+	if (isServerSide()) return null;
+	const { userAgent } = window.navigator;
+	const matcher = detectBrowser(userAgent);
+	return matcher ? userAgent.match(matcher.version)?.[1] ?? null : null;
+};
+const subscribe = () => () => {};
+const getServerSnapshot = () => "undetermined";
+const useBrowser = () => useSyncExternalStore(subscribe, getBrowser, getServerSnapshot);
+//#endregion
+export { getBrowserVersion, useBrowser };

package/dist/use-callback-ref.d.ts

@@ -0,0 +1,5 @@
+import { t as ANY } from "./types-p0KNRcj3.js";
+//#region src/use-callback-ref.d.ts
+declare const useCallbackRef: <T extends (...args: ANY[]) => ANY>(callback: T | undefined) => T;
+//#endregion
+export { useCallbackRef };

package/dist/use-callback-ref.js

@@ -0,0 +1,11 @@
+import { useEffect, useMemo, useRef } from "react";
+//#region src/use-callback-ref.ts
+const useCallbackRef = (callback) => {
+	const callbackRef = useRef(callback);
+	useEffect(() => {
+		callbackRef.current = callback;
+	});
+	return useMemo(() => ((...args) => callbackRef.current?.(...args)), []);
+};
+//#endregion
+export { useCallbackRef };

package/dist/use-controllable-state.d.ts

@@ -3,5 +3,6 @@
  * State that the caller may own. `value` undefined means uncontrolled: the hook
  * keeps the state and still reports every change through `onChange`.
  */
-export declare function useControllableState<T>(value: T | null | undefined, defaultValue: T | null, onChange?: (value: T) => void): readonly [T | null, (next: T) => void];
-//#endregion
+declare const useControllableState: <T>(value: T | null | undefined, defaultValue: T | null, onChange?: (value: T) => void) => readonly [T | null, (next: T) => void];
+//#endregion
+export { useControllableState };

package/dist/use-controllable-state.js

@@ -1,17 +1,19 @@
+import { useCallbackRef } from "./use-callback-ref.js";
 import { useCallback, useState } from "react";
 //#region src/use-controllable-state.ts
 /**
 * State that the caller may own. `value` undefined means uncontrolled: the hook
 * keeps the state and still reports every change through `onChange`.
 */
-function useControllableState(value, defaultValue, onChange) {
+const useControllableState = (value, defaultValue, onChange) => {
 	const [uncontrolled, setUncontrolled] = useState(defaultValue);
 	const controlled = value !== void 0;
+	const reportChange = useCallbackRef(onChange);
 	const setValue = useCallback((next) => {
 		if (!controlled) setUncontrolled(next);
-		onChange?.(next);
-	}, [controlled, onChange]);
+		reportChange(next);
+	}, [controlled, reportChange]);
 	return [controlled ? value : uncontrolled, setValue];
-}
+};
 //#endregion
 export { useControllableState };

package/dist/use-debounce-state.d.ts

@@ -0,0 +1,9 @@
+import { SetStateAction } from "react";
+//#region src/use-debounce-state.d.ts
+type UseDebouncedStateOptions = {
+  leading?: boolean;
+};
+type UseDebouncedStateReturnValue<T> = [T, (newValue: SetStateAction<T>) => void];
+declare const useDebouncedState: <T = unknown>(defaultValue: T, wait: number, { leading }?: UseDebouncedStateOptions) => UseDebouncedStateReturnValue<T>;
+//#endregion
+export { useDebouncedState };

package/dist/use-debounce-state.js

@@ -0,0 +1,28 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+//#region src/use-debounce-state.ts
+const useDebouncedState = (defaultValue, wait, { leading = false } = {}) => {
+	const [value, setValue] = useState(defaultValue);
+	const timeoutRef = useRef(void 0);
+	const leadingRef = useRef(true);
+	const cancel = useCallback(() => window.clearTimeout(timeoutRef.current), []);
+	useEffect(() => cancel, [cancel]);
+	return [value, useCallback((newValue) => {
+		cancel();
+		if (leadingRef.current && leading) {
+			setValue(newValue);
+			timeoutRef.current = window.setTimeout(() => {
+				leadingRef.current = true;
+			}, wait);
+		} else timeoutRef.current = window.setTimeout(() => {
+			leadingRef.current = true;
+			setValue(newValue);
+		}, wait);
+		leadingRef.current = false;
+	}, [
+		leading,
+		cancel,
+		wait
+	])];
+};
+//#endregion
+export { useDebouncedState };

package/dist/use-debounced-callback.d.ts

@@ -0,0 +1,16 @@
+import { t as ANY } from "./types-p0KNRcj3.js";
+//#region src/use-debounced-callback.d.ts
+type UseDebouncedCallbackOptions = {
+  delay: number;
+  flushOnUnmount?: boolean;
+  leading?: boolean;
+  maxWait?: number;
+};
+type UseDebouncedCallbackReturnValue<T extends (...args: ANY[]) => ANY> = ((...args: Parameters<T>) => void) & {
+  flush: () => void;
+  cancel: () => void;
+  isPending: () => boolean;
+};
+declare const useDebouncedCallback: <T extends (...args: ANY[]) => ANY>(callback: T, options: number | UseDebouncedCallbackOptions) => UseDebouncedCallbackReturnValue<T>;
+//#endregion
+export { type UseDebouncedCallbackOptions, type UseDebouncedCallbackReturnValue, useDebouncedCallback };

package/dist/use-debounced-callback.js

@@ -0,0 +1,68 @@
+import { useCallbackRef } from "./use-callback-ref.js";
+import { useEffect, useMemo } from "react";
+//#region src/use-debounced-callback.ts
+const createDebounced = (run, { delay, leading, maxWait }) => {
+	let debounceTimer;
+	let maxWaitTimer;
+	let latestArgs;
+	let isFirstCall = true;
+	let pending = false;
+	const cancel = () => {
+		window.clearTimeout(debounceTimer);
+		window.clearTimeout(maxWaitTimer);
+		debounceTimer = void 0;
+		maxWaitTimer = void 0;
+		isFirstCall = true;
+		pending = false;
+	};
+	const flush = () => {
+		if (pending && debounceTimer !== void 0 && latestArgs) {
+			const args = latestArgs;
+			cancel();
+			run(...args);
+		}
+	};
+	const startMaxWait = () => {
+		if (maxWait !== void 0 && maxWaitTimer === void 0) maxWaitTimer = window.setTimeout(flush, maxWait);
+	};
+	const debounced = (...args) => {
+		window.clearTimeout(debounceTimer);
+		latestArgs = args;
+		const isLeadingCall = leading && isFirstCall;
+		isFirstCall = false;
+		if (isLeadingCall) {
+			run(...args);
+			debounceTimer = window.setTimeout(cancel, delay);
+		} else {
+			pending = true;
+			debounceTimer = window.setTimeout(leading ? cancel : flush, delay);
+		}
+		startMaxWait();
+	};
+	return Object.assign(debounced, {
+		flush,
+		cancel,
+		isPending: () => pending
+	});
+};
+const useDebouncedCallback = (callback, options) => {
+	const { delay, flushOnUnmount = false, leading = false, maxWait } = typeof options === "number" ? { delay: options } : options;
+	const handleCallback = useCallbackRef(callback);
+	const debounced = useMemo(() => createDebounced(handleCallback, {
+		delay,
+		leading,
+		maxWait
+	}), [
+		handleCallback,
+		delay,
+		leading,
+		maxWait
+	]);
+	useEffect(() => () => {
+		if (flushOnUnmount) debounced.flush();
+		else debounced.cancel();
+	}, [debounced, flushOnUnmount]);
+	return debounced;
+};
+//#endregion
+export { useDebouncedCallback };

package/dist/use-debounced-value.d.ts

@@ -1,3 +1,4 @@
 //#region src/use-debounced-value.d.ts
-export declare function useDebouncedValue<T>(value: T, delay: number): T;
-//#endregion
+declare const useDebouncedValue: <T>(value: T, delay: number) => T;
+//#endregion
+export { useDebouncedValue };

package/dist/use-debounced-value.js

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
-import { debounce } from "@journ/fitter-happier";
+import { debounce } from "@journ/fitter-happier/debounce";
 //#region src/use-debounced-value.ts
-function useDebouncedValue(value, delay) {
+const useDebouncedValue = (value, delay) => {
 	const [debounced, setDebounced] = useState(value);
 	useEffect(() => {
 		const update = debounce(setDebounced, delay);
@@ -9,6 +9,6 @@ function useDebouncedValue(value, delay) {
 		return update.cancel;
 	}, [value, delay]);
 	return debounced;
-}
+};
 //#endregion
 export { useDebouncedValue };

package/dist/use-did-update.d.ts

@@ -0,0 +1,5 @@
+import { DependencyList, EffectCallback } from "react";
+//#region src/use-did-update.d.ts
+declare const useDidUpdate: (fn: EffectCallback, dependencies?: DependencyList) => void;
+//#endregion
+export { useDidUpdate };

package/dist/use-did-update.js

@@ -0,0 +1,24 @@
+import { useEffect, useRef } from "react";
+//#region src/use-did-update.ts
+const dependenciesChanged = (previous, next) => previous.length !== next.length || next.some((dep, index) => !Object.is(dep, previous[index]));
+const useDidUpdate = (fn, dependencies) => {
+	const mounted = useRef(false);
+	const previousRender = useRef(null);
+	const previousDependencies = useRef(void 0);
+	const render = {};
+	useEffect(() => {
+		const isSameRender = previousRender.current === render;
+		const previous = previousDependencies.current;
+		previousRender.current = render;
+		previousDependencies.current = dependencies;
+		if (!mounted.current) {
+			mounted.current = true;
+			return;
+		}
+		if (isSameRender) return;
+		if (dependencies && previous && !dependenciesChanged(previous, dependencies)) return;
+		return fn();
+	}, dependencies);
+};
+//#endregion
+export { useDidUpdate };

package/dist/use-disclosure.d.ts

@@ -0,0 +1,15 @@
+//#region src/use-disclosure.d.ts
+type UseDisclosureOptions = {
+  onOpen?: () => void;
+  onClose?: () => void;
+};
+type UseDisclosureHandlers = {
+  set: (value: boolean) => void;
+  open: () => void;
+  close: () => void;
+  toggle: () => void;
+};
+type UseDisclosureReturnValue = [boolean, UseDisclosureHandlers];
+declare const useDisclosure: (initialState?: boolean, { onOpen, onClose }?: UseDisclosureOptions) => UseDisclosureReturnValue;
+//#endregion
+export { type UseDisclosureHandlers, type UseDisclosureOptions, type UseDisclosureReturnValue, useDisclosure };

package/dist/use-disclosure.js

@@ -0,0 +1,16 @@
+import { useDidUpdate } from "./use-did-update.js";
+import { useCallback, useEffectEvent, useState } from "react";
+//#region src/use-disclosure.ts
+const useDisclosure = (initialState = false, { onOpen, onClose } = {}) => {
+	const [opened, setOpened] = useState(initialState);
+	const notify = useEffectEvent((isOpen) => isOpen ? onOpen?.() : onClose?.());
+	useDidUpdate(() => notify(opened), [opened]);
+	return [opened, {
+		open: useCallback(() => setOpened(true), []),
+		close: useCallback(() => setOpened(false), []),
+		toggle: useCallback(() => setOpened((current) => !current), []),
+		set: setOpened
+	}];
+};
+//#endregion
+export { useDisclosure };

package/dist/use-draft.d.ts

@@ -1,20 +1,21 @@
 //#region src/use-draft.d.ts
-export interface UseDraftOptions<T> {
+type UseDraftOptions<T> = {
   value: T;
   format: (value: T) => string;
   /** Return undefined to reject the text, which keeps the old value. */
   parse: (text: string) => T | undefined;
   onCommit: (value: T) => void;
-}
-export interface Draft {
+};
+type Draft = {
   text: string;
   edit: (text: string) => void;
   discard: () => void;
   commit: () => void;
-}
+};
 /**
  * Text that is typed freely and only turns into a value on commit. While not
  * editing it shows `format(value)`.
  */
-export declare function useDraft<T>({ value, format, parse, onCommit }: UseDraftOptions<T>): Draft;
-//#endregion
+declare const useDraft: <T>({ value, format, parse, onCommit }: UseDraftOptions<T>) => Draft;
+//#endregion
+export { type Draft, type UseDraftOptions, useDraft };

package/dist/use-draft.js

@@ -4,7 +4,7 @@ import { useState } from "react";
 * Text that is typed freely and only turns into a value on commit. While not
 * editing it shows `format(value)`.
 */
-function useDraft({ value, format, parse, onCommit }) {
+const useDraft = ({ value, format, parse, onCommit }) => {
 	const [draft, setDraft] = useState(null);
 	return {
 		text: draft ?? format(value),
@@ -16,6 +16,6 @@ function useDraft({ value, format, parse, onCommit }) {
 			setDraft(null);
 		}
 	};
-}
+};
 //#endregion
 export { useDraft };