@vibehooks/react 0.0.1

package/dist/useCameraCapture.js

@@ -0,0 +1,116 @@
+import * as React from "react";
+
+//#region src/useCameraCapture.ts
+function createExternalStore(getSnapshot) {
+	const listeners = /* @__PURE__ */ new Set();
+	return {
+		getSnapshot,
+		notify() {
+			listeners.forEach((l) => l());
+		},
+		subscribe(listener) {
+			listeners.add(listener);
+			return () => listeners.delete(listener);
+		}
+	};
+}
+/**
+* Unopinionated, SSR-safe React hook for capturing still photos from the user's camera using getUserMedia and Canvas.
+*
+* @example
+* ```tsx
+* const { videoRef, requestPermission, capture } = useCameraCapture();
+* ```
+*/
+function useCameraCapture(options = {}) {
+	const { onCapture, width = 320 } = options;
+	const output = {
+		quality: options.format?.quality ?? .8,
+		type: options.format?.type ?? "image/png"
+	};
+	const videoRef = React.useRef(null);
+	const canvasRef = React.useRef(null);
+	const imageRef = React.useRef(null);
+	const streamRef = React.useRef(null);
+	const streamingRef = React.useRef(false);
+	const heightRef = React.useRef(0);
+	const isBrowser = typeof window !== "undefined";
+	const permissionStoreRef = React.useRef(createExternalStore(() => !!streamRef.current));
+	const streamingStoreRef = React.useRef(createExternalStore(() => streamingRef.current));
+	const requestPermission = React.useCallback(async () => {
+		if (!isBrowser) return false;
+		if (!navigator.mediaDevices?.getUserMedia) return false;
+		try {
+			const stream = await navigator.mediaDevices.getUserMedia({
+				audio: false,
+				video: true
+			});
+			streamRef.current = stream;
+			permissionStoreRef.current.notify();
+			const video = videoRef.current;
+			if (!video) return false;
+			video.srcObject = stream;
+			await video.play();
+			if (!streamingRef.current) {
+				const { videoHeight, videoWidth } = video;
+				heightRef.current = videoHeight / (videoWidth / width);
+				video.width = width;
+				video.height = heightRef.current;
+				const canvas = canvasRef.current;
+				if (canvas) {
+					canvas.width = width;
+					canvas.height = heightRef.current;
+				}
+				streamingRef.current = true;
+				streamingStoreRef.current.notify();
+			}
+			return true;
+		} catch {
+			return false;
+		}
+	}, [isBrowser, width]);
+	const capture = React.useCallback(() => {
+		const video = videoRef.current;
+		const canvas = canvasRef.current;
+		const image = imageRef.current;
+		if (!video || !canvas || !streamingRef.current) return null;
+		const context = canvas.getContext("2d");
+		if (!context) return null;
+		canvas.width = width;
+		canvas.height = heightRef.current;
+		context.drawImage(video, 0, 0, width, heightRef.current);
+		const dataUrl = canvas.toDataURL(output.type, output.quality);
+		image?.setAttribute("src", dataUrl);
+		if (onCapture) canvas.toBlob((blob) => {
+			if (blob) onCapture(dataUrl, blob);
+		}, output.type, output.quality);
+		return dataUrl;
+	}, [
+		onCapture,
+		width,
+		output.quality,
+		output.type
+	]);
+	const stop = React.useCallback(() => {
+		streamRef.current?.getTracks().forEach((track) => track.stop());
+		streamRef.current = null;
+		streamingRef.current = false;
+		permissionStoreRef.current.notify();
+		streamingStoreRef.current.notify();
+	}, []);
+	const usePermission = () => React.useSyncExternalStore(permissionStoreRef.current.subscribe, permissionStoreRef.current.getSnapshot, () => false);
+	const useStreaming = () => React.useSyncExternalStore(streamingStoreRef.current.subscribe, streamingStoreRef.current.getSnapshot, () => false);
+	return {
+		canvasRef,
+		capture,
+		imageRef,
+		requestPermission,
+		stop,
+		usePermission,
+		useStreaming,
+		videoRef
+	};
+}
+
+//#endregion
+export { useCameraCapture };

package/dist/useCookies.d.ts

@@ -0,0 +1,42 @@
+//#region src/useCookies.d.ts
+interface UseCookieOptions {
+  domain?: string;
+  expires?: Date;
+  maxAge?: number;
+  path?: string;
+  sameSite?: 'strict' | 'lax' | 'none';
+  secure?: boolean;
+}
+interface UseCookieReturn {
+  /**
+   * Reads a cookie value.
+   */
+  get: (name: string) => string | null;
+  /**
+   * Reads all cookies as a key-value map.
+   */
+  getAll: () => Record<string, string>;
+  /**
+   * Removes a cookie.
+   */
+  remove: (name: string, options?: UseCookieOptions) => void;
+  /**
+   * Sets a cookie value.
+   */
+  set: (name: string, value: string, options?: UseCookieOptions) => void;
+}
+/**
+ * `useCookies` is a React hook that provides unopinionated access to document cookies.
+ * This hook does not sync cookies to React state and does not perform encoding beyond basic string handling.
+ *
+ * @example
+ * ```tsx
+ *  const cookies = useCookies();
+ * cookies.set('token', 'abc', { secure: true });
+ * const token = cookies.get('token');
+ * ```
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Cookie_Store_API
+ */
+declare function useCookies(): UseCookieReturn;
+//#endregion
+export { useCookies };

package/dist/useCookies.js

@@ -0,0 +1,61 @@
+import * as React from "react";
+
+//#region src/useCookies.ts
+/**
+* `useCookies` is a React hook that provides unopinionated access to document cookies.
+* This hook does not sync cookies to React state and does not perform encoding beyond basic string handling.
+*
+* @example
+* ```tsx
+*  const cookies = useCookies();
+* cookies.set('token', 'abc', { secure: true });
+* const token = cookies.get('token');
+* ```
+* @see https://developer.mozilla.org/en-US/docs/Web/API/Cookie_Store_API
+*/
+function useCookies() {
+	const isSupported = typeof document !== "undefined" && typeof document.cookie !== "undefined";
+	const get = React.useCallback((name) => {
+		if (!isSupported) return null;
+		const cookies = document.cookie.split("; ");
+		for (const cookie of cookies) {
+			const [key, ...rest] = cookie.split("=");
+			if (key === name) return decodeURIComponent(rest.join("="));
+		}
+		return null;
+	}, [isSupported]);
+	const set = React.useCallback((name, value, options = {}) => {
+		if (!isSupported) return;
+		let cookie = `${name}=${encodeURIComponent(value)}`;
+		if (options.maxAge !== void 0) cookie += `; max-age=${options.maxAge}`;
+		if (options.expires !== void 0) cookie += `; expires=${options.expires.toUTCString()}`;
+		if (options.path) cookie += `; path=${options.path}`;
+		if (options.domain) cookie += `; domain=${options.domain}`;
+		if (options.secure) cookie += "; secure";
+		if (options.sameSite) cookie += `; samesite=${options.sameSite}`;
+		document.cookie = cookie;
+	}, [isSupported]);
+	const remove = React.useCallback((name, options = {}) => {
+		set(name, "", {
+			...options,
+			maxAge: 0
+		});
+	}, [set]);
+	return {
+		get,
+		getAll: React.useCallback(() => {
+			if (!isSupported) return {};
+			return document.cookie.split("; ").filter(Boolean).reduce((acc, cookie) => {
+				const [key, ...rest] = cookie.split("=");
+				if (!key) return acc;
+				acc[key] = decodeURIComponent(rest.join("="));
+				return acc;
+			}, {});
+		}, [isSupported]),
+		remove,
+		set
+	};
+}
+
+//#endregion
+export { useCookies };

package/dist/useCopyToClipboard.d.ts

@@ -0,0 +1,22 @@
+//#region src/useCopyToClipboard.d.ts
+interface CopyToClipboardReturn {
+  copyToClipboard: (text: string) => Promise<void>;
+  textCopied: string | null;
+}
+/**
+ * `useCopyToClipboard` provides a safe way to copy text to the clipboard
+ * using the Clipboard API.
+ *
+ * @example
+ * ```tsx
+ * const { textCopied, copyToClipboard } = useCopyToClipboard();
+ *
+ * <button onClick={() => copyToClipboard('Hello!')}>
+ *  Copy
+ * </button>
+ * ```
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API
+ */
+declare function useCopyToClipboard(): CopyToClipboardReturn;
+//#endregion
+export { useCopyToClipboard };

package/dist/useCopyToClipboard.js

@@ -0,0 +1,31 @@
+import * as React from "react";
+
+//#region src/useCopyToClipboard.ts
+/**
+* `useCopyToClipboard` provides a safe way to copy text to the clipboard
+* using the Clipboard API.
+*
+* @example
+* ```tsx
+* const { textCopied, copyToClipboard } = useCopyToClipboard();
+*
+* <button onClick={() => copyToClipboard('Hello!')}>
+*  Copy
+* </button>
+* ```
+* @see https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API
+*/
+function useCopyToClipboard() {
+	const [textCopied, setTextCopied] = React.useState(null);
+	return {
+		copyToClipboard: React.useCallback(async (text) => {
+			if (!navigator?.clipboard?.writeText) throw new Error("Clipboard API not available.");
+			await navigator.clipboard.writeText(text);
+			setTextCopied(text);
+		}, []),
+		textCopied
+	};
+}
+
+//#endregion
+export { useCopyToClipboard };

package/dist/useCountDown.d.ts

@@ -0,0 +1,80 @@
+//#region src/useCountDown.d.ts
+type CountDownStatus = 'start' | 'running' | 'paused' | 'completed';
+interface CountDownOptions {
+  /**
+   * The interval en milliseconds between each tick.
+   */
+  interval?: number;
+  /**
+   * A callback to be called when the countdown ends.
+   */
+  onComplete?: () => void;
+  /**
+   * A callback to be called on each tick.
+   */
+  onTick?: (time: number) => void;
+}
+interface CountDown {
+  /**
+   * The end time of the countdown in milliseconds.
+   */
+  endTime: number;
+  /**
+   *
+   */
+  options?: CountDownOptions;
+  /**
+   * Whether to start the countdown on mount. Default: false.
+   */
+  startOnMount?: boolean;
+}
+interface CountDownControlls {
+  /**
+   * Increments the countdown by a given amount of time in milliseconds.
+   */
+  increment: (ms?: number) => void;
+  /**
+   *  Pauses the countdown.
+   */
+  pause: () => void;
+  /**
+   * Resets the countdown.
+   */
+  reset: () => void;
+  /**
+   * Resumes the countdown
+   */
+  resume: () => void;
+  /**
+   * Starts the countdown.
+   */
+  start: () => void;
+}
+interface CountDownReturn {
+  /**
+   * Stable references to control functions.
+   */
+  controls: CountDownControlls;
+  /**
+   * Remaining time in milliseconds.
+   * Will be `0` when the countdown has completed.
+   */
+  count: number | null;
+  /**
+   * Indicates the status of the countdown.
+   */
+  status: CountDownStatus;
+}
+/**
+ * `useCountDown` is a controllable countdown hook based on an absolute end timestamp.
+ * It uses a reference timestamp approach to prevent time drift commonly association with simple `setInterval` forcing.
+ *
+ * @see https://developer.mozilla.org/es/docs/Web/API/Window/setInterval
+ */
+declare function useCountDown({
+  endTime,
+  options,
+  startOnMount
+}: CountDown): CountDownReturn;
+//#endregion
+export { useCountDown };

package/dist/useCountDown.js

@@ -0,0 +1,106 @@
+import * as React from "react";
+
+//#region src/useCountDown.ts
+/**
+* `useCountDown` is a controllable countdown hook based on an absolute end timestamp.
+* It uses a reference timestamp approach to prevent time drift commonly association with simple `setInterval` forcing.
+*
+* @see https://developer.mozilla.org/es/docs/Web/API/Window/setInterval
+*/
+function useCountDown({ endTime, options, startOnMount = false }) {
+	const intervalValue = options?.interval ?? 1e3;
+	const initialDurationRef = React.useRef(endTime - Date.now());
+	const endTimeRef = React.useRef(startOnMount ? Date.now() + initialDurationRef.current : 0);
+	const completedRef = React.useRef(false);
+	const remainingAtPauseRef = React.useRef(initialDurationRef.current);
+	const intervalIdRef = React.useRef(null);
+	const optionsRef = React.useRef(options);
+	React.useEffect(() => {
+		optionsRef.current = options;
+	}, [options]);
+	const [count, setCount] = React.useState(initialDurationRef.current);
+	const [status, setStatus] = React.useState(startOnMount ? "running" : "start");
+	const clearTimer = React.useCallback(() => {
+		if (intervalIdRef.current !== null) {
+			clearInterval(intervalIdRef.current);
+			intervalIdRef.current = null;
+		}
+	}, []);
+	const tick = React.useCallback(() => {
+		const remaining = Math.max(endTimeRef.current - Date.now(), 0);
+		optionsRef.current?.onTick?.(remaining);
+		setCount(remaining);
+		if (remaining <= 0 && !completedRef.current) {
+			completedRef.current = true;
+			clearTimer();
+			setStatus("completed");
+			optionsRef.current?.onComplete?.();
+		}
+	}, [clearTimer]);
+	const pause = React.useCallback(() => {
+		if (status !== "running") return;
+		clearTimer();
+		remainingAtPauseRef.current = Math.max(endTimeRef.current - Date.now(), 0);
+		setStatus("paused");
+	}, [status, clearTimer]);
+	const resume = React.useCallback(() => {
+		if (status !== "paused") return;
+		endTimeRef.current = Date.now() + remainingAtPauseRef.current;
+		setStatus("running");
+	}, [status]);
+	const reset = React.useCallback(() => {
+		clearTimer();
+		completedRef.current = false;
+		remainingAtPauseRef.current = initialDurationRef.current;
+		setCount(initialDurationRef.current);
+		setStatus("start");
+	}, [clearTimer]);
+	const increment = React.useCallback((ms) => {
+		if (!ms || ms <= 0 || completedRef.current) return;
+		endTimeRef.current += ms;
+		if (status === "paused") {
+			remainingAtPauseRef.current += ms;
+			setCount(remainingAtPauseRef.current);
+		}
+	}, [status]);
+	const start = React.useCallback(() => {
+		if (status !== "start") return;
+		endTimeRef.current = Date.now() + remainingAtPauseRef.current;
+		setStatus("running");
+	}, [status]);
+	React.useEffect(() => {
+		if (status !== "running") {
+			clearTimer();
+			return;
+		}
+		completedRef.current = false;
+		tick();
+		intervalIdRef.current = setInterval(tick, intervalValue);
+		return clearTimer;
+	}, [
+		status,
+		intervalValue,
+		tick,
+		clearTimer
+	]);
+	return {
+		controls: React.useMemo(() => ({
+			increment,
+			pause,
+			reset,
+			resume,
+			start
+		}), [
+			start,
+			pause,
+			resume,
+			reset,
+			increment
+		]),
+		count,
+		status
+	};
+}
+
+//#endregion
+export { useCountDown };

package/dist/useDebouncedState.d.ts

@@ -0,0 +1,47 @@
+import * as React from "react";
+
+//#region src/useDebouncedState.d.ts
+interface UseDebouncedStateOptions {
+  /**
+   * Delay in milliseconds before the debounced value is updated.
+   */
+  delay: number;
+}
+interface UseDebouncedStateReturn<T> {
+  /**
+   * The debounced value, updated after the specified delay.
+   */
+  debouncedValue: T;
+  /**
+   * State setter for the inmediate value.
+   */
+  setValue: React.Dispatch<React.SetStateAction<T>>;
+  /**
+   * The inmediate (non-debounced) value.
+   */
+  value: T;
+}
+/**
+ * `useDebouncedState` is a React hook that manages a state value and exposes a debounced version of it.
+ * The debounced value is updated only after the specified delay has elapsed since the last change to the inmediate value.
+ *
+ * @example
+ * ```tsx
+ * const { value, debouncedValue, setValue } = useDebouncedState('', {
+ * delay: 400,
+ * });
+ * React.useEffect(() => {
+ *   if (!debouncedValue) return;
+ *   search(debouncedValue);
+ * }, [debouncedValue]);
+ * return (
+ *   <input
+ *     value={value}
+ *     onChange={(e) => setValue(e.target.value)}
+ *   />
+ * );
+ * ```
+ */
+declare function useDebouncedState<T>(initialValue: T, options: UseDebouncedStateOptions): UseDebouncedStateReturn<T>;
+//#endregion
+export { useDebouncedState };

package/dist/useDebouncedState.js

@@ -0,0 +1,47 @@
+import * as React from "react";
+
+//#region src/useDebouncedState.ts
+/**
+* `useDebouncedState` is a React hook that manages a state value and exposes a debounced version of it.
+* The debounced value is updated only after the specified delay has elapsed since the last change to the inmediate value.
+*
+* @example
+* ```tsx
+* const { value, debouncedValue, setValue } = useDebouncedState('', {
+* delay: 400,
+* });
+* React.useEffect(() => {
+*   if (!debouncedValue) return;
+*   search(debouncedValue);
+* }, [debouncedValue]);
+* return (
+*   <input
+*     value={value}
+*     onChange={(e) => setValue(e.target.value)}
+*   />
+* );
+* ```
+*/
+function useDebouncedState(initialValue, options) {
+	const { delay } = options;
+	const [value, setValue] = React.useState(initialValue);
+	const [debouncedValue, setDebouncedValue] = React.useState(initialValue);
+	const timeoutRef = React.useRef(null);
+	React.useEffect(() => {
+		if (timeoutRef.current) clearTimeout(timeoutRef.current);
+		timeoutRef.current = setTimeout(() => {
+			setDebouncedValue(value);
+		}, delay);
+		return () => {
+			if (timeoutRef.current) clearTimeout(timeoutRef.current);
+		};
+	}, [value, delay]);
+	return {
+		debouncedValue,
+		setValue,
+		value
+	};
+}
+
+//#endregion
+export { useDebouncedState };

package/dist/useExternalNotifications.d.ts

@@ -0,0 +1,36 @@
+//#region src/useExternalNotifications.d.ts
+interface NotificationPayload extends NotificationOptions {
+  createdAt: number;
+  id?: string;
+  title: string;
+}
+interface UseExternalNotificationReturn {
+  isSupported: boolean;
+  notifications: NotificationPayload[] | null;
+  notify: (notification: Omit<NotificationPayload, 'createdAt'>) => void;
+  permission: NotificationPermission;
+  requestPermission: () => Promise<NotificationPermission>;
+}
+/**
+ * `useExternalNotifications` is React hook for consuming and emitting external notifications using a global store.
+ * It is thinking for events outside the normal cycle of React:
+ *
+ * @example
+ * ```tsx
+ * function NotificationCenter() {
+ *   const { notifications } = useExternalNotification();
+ *
+ *   return (
+ *     <ul>
+ *       {notifications.map(n => (
+ *         <li key={n.id}>{n.title}</li>
+ *       ))}
+ *     </ul>
+ *   );
+ * }
+ * ```
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Notification
+ */
+declare function useExternalNotifications(): UseExternalNotificationReturn;
+//#endregion
+export { useExternalNotifications };

package/dist/useExternalNotifications.js

@@ -0,0 +1,100 @@
+import * as React from "react";
+
+//#region src/useExternalNotifications.ts
+let notifications = [];
+const listeners = /* @__PURE__ */ new Set();
+let isListening = false;
+function emit() {
+	listeners.forEach((listener) => listener());
+}
+function onStorageEvent(event) {
+	if (event.key !== "notifications") return;
+	try {
+		const next = JSON.parse(event.newValue ?? "[]");
+		if (Object.is(next, notifications)) return;
+		notifications = next;
+		emit();
+	} catch {}
+}
+function suscribe(listener) {
+	listeners.add(listener);
+	if (!isListening && typeof window !== "undefined") {
+		window.addEventListener("storage", onStorageEvent);
+		isListening = true;
+	}
+	return () => {
+		listeners.delete(listener);
+		if (listeners.size === 0 && isListening) {
+			window.removeEventListener("storage", onStorageEvent);
+			isListening = false;
+		}
+	};
+}
+function getSnapshot() {
+	return notifications;
+}
+const notificationStore = {
+	getSnapshot,
+	push(notification) {
+		notifications = [...notifications, notification];
+		localStorage.setItem("notifications", JSON.stringify(notifications));
+		emit();
+	},
+	suscribe
+};
+/**
+* `useExternalNotifications` is React hook for consuming and emitting external notifications using a global store.
+* It is thinking for events outside the normal cycle of React:
+*
+* @example
+* ```tsx
+* function NotificationCenter() {
+*   const { notifications } = useExternalNotification();
+*
+*   return (
+*     <ul>
+*       {notifications.map(n => (
+*         <li key={n.id}>{n.title}</li>
+*       ))}
+*     </ul>
+*   );
+* }
+* ```
+* @see https://developer.mozilla.org/en-US/docs/Web/API/Notification
+*/
+function useExternalNotifications() {
+	const notifications$1 = React.useSyncExternalStore(notificationStore.suscribe, notificationStore.getSnapshot, () => null);
+	const isSupported = typeof window !== "undefined" && "Notification" in window;
+	const permission = isSupported ? Notification.permission : "denied";
+	const requestPermission = React.useCallback(async () => {
+		if (!isSupported) return "denied";
+		return await Notification.requestPermission();
+	}, [isSupported]);
+	return {
+		isSupported,
+		notifications: notifications$1,
+		notify: React.useCallback((notification) => {
+			const payload = {
+				...notification,
+				createdAt: Date.now()
+			};
+			notificationStore.push(payload);
+			if (!isSupported || permission !== "granted") return;
+			const options = {
+				...notification.badge !== void 0 && { badge: notification.badge },
+				...notification.body !== void 0 && { body: notification.body },
+				...notification.data !== void 0 && { data: notification.data },
+				...notification.dir !== void 0 && { dir: notification.dir },
+				...notification.icon !== void 0 && { icon: notification.icon },
+				...notification.lang !== void 0 && { lang: notification.lang },
+				...notification.requireInteraction !== void 0 && { requireInteraction: notification.requireInteraction }
+			};
+			new Notification(payload.title, options);
+		}, [isSupported, permission]),
+		permission,
+		requestPermission
+	};
+}
+
+//#endregion
+export { useExternalNotifications };