react-simplikit 0.0.52 → 0.1.0

package/dist/mobile/hooks/usePageVisibility/usePageVisibility.d.mts

@@ -0,0 +1,62 @@
+
+//#region src/mobile/hooks/usePageVisibility/usePageVisibility.d.ts
+/**
+ * Page visibility state derived from browser's DocumentVisibilityState.
+ * Excludes 'prerender' as it is deprecated and not used in modern browsers.
+ */
+type VisibilityState = Exclude<DocumentVisibilityState, 'prerender'>;
+/**
+ * Page visibility information
+ */
+type PageVisibility = {
+  /** True if page is currently visible */
+  isVisible: boolean;
+  /** Current visibility state: 'visible' | 'hidden' */
+  visibilityState: VisibilityState;
+};
+/**
+ * @description
+ * `usePageVisibility` is a React hook that detects page visibility changes.
+ * It monitors when the user switches tabs or minimizes the browser using the Page Visibility API.
+ * Useful for pausing/resuming animations, videos, or background tasks.
+ *
+ * **SSR Behavior**: Returns `{ isVisible: true, visibilityState: 'visible' }` during server-side rendering.
+ *
+ * @returns {PageVisibility} Page visibility information
+ * - `isVisible` - True if page is currently visible to the user
+ * - `visibilityState` - Current visibility state: 'visible' | 'hidden'
+ *
+ * @example
+ * function VideoPlayer() {
+ *   const { isVisible } = usePageVisibility();
+ *   const videoRef = useRef<HTMLVideoElement>(null);
+ *
+ *   useEffect(() => {
+ *     if (!videoRef.current) return;
+ *
+ *     // Pause video when tab is hidden
+ *     if (!isVisible) {
+ *       videoRef.current.pause();
+ *     }
+ *   }, [isVisible]);
+ *
+ *   return <video ref={videoRef} src="video.mp4" />;
+ * }
+ *
+ * @example
+ * function Analytics() {
+ *   const { isVisible, visibilityState } = usePageVisibility();
+ *
+ *   useEffect(() => {
+ *     if (visibilityState === 'hidden') {
+ *       // Track when user leaves the page
+ *       analytics.track('page_hidden');
+ *     }
+ *   }, [visibilityState]);
+ *
+ *   return null;
+ * }
+ */
+declare function usePageVisibility(): PageVisibility;
+//#endregion
+export { PageVisibility, VisibilityState, usePageVisibility };

package/dist/mobile/hooks/usePageVisibility/usePageVisibility.mjs

@@ -0,0 +1,73 @@
+"use client";
+import { isServer } from "../../utils/isServer/isServer.mjs";
+import { useEffect, useState } from "react";
+//#region src/mobile/hooks/usePageVisibility/usePageVisibility.ts
+/**
+* @description
+* `usePageVisibility` is a React hook that detects page visibility changes.
+* It monitors when the user switches tabs or minimizes the browser using the Page Visibility API.
+* Useful for pausing/resuming animations, videos, or background tasks.
+*
+* **SSR Behavior**: Returns `{ isVisible: true, visibilityState: 'visible' }` during server-side rendering.
+*
+* @returns {PageVisibility} Page visibility information
+* - `isVisible` - True if page is currently visible to the user
+* - `visibilityState` - Current visibility state: 'visible' | 'hidden'
+*
+* @example
+* function VideoPlayer() {
+*   const { isVisible } = usePageVisibility();
+*   const videoRef = useRef<HTMLVideoElement>(null);
+*
+*   useEffect(() => {
+*     if (!videoRef.current) return;
+*
+*     // Pause video when tab is hidden
+*     if (!isVisible) {
+*       videoRef.current.pause();
+*     }
+*   }, [isVisible]);
+*
+*   return <video ref={videoRef} src="video.mp4" />;
+* }
+*
+* @example
+* function Analytics() {
+*   const { isVisible, visibilityState } = usePageVisibility();
+*
+*   useEffect(() => {
+*     if (visibilityState === 'hidden') {
+*       // Track when user leaves the page
+*       analytics.track('page_hidden');
+*     }
+*   }, [visibilityState]);
+*
+*   return null;
+* }
+*/
+function usePageVisibility() {
+	const [pageVisibility, setPageVisibility] = useState(() => getPageVisibility());
+	useEffect(function handleVisibilityChange() {
+		function updateVisibility() {
+			setPageVisibility(() => getPageVisibility());
+		}
+		document.addEventListener("visibilitychange", updateVisibility);
+		return function cleanup() {
+			document.removeEventListener("visibilitychange", updateVisibility);
+		};
+	}, []);
+	return pageVisibility;
+}
+function getPageVisibility() {
+	if (isServer()) return {
+		isVisible: true,
+		visibilityState: "visible"
+	};
+	const visibilityState = document.visibilityState;
+	return {
+		isVisible: visibilityState === "visible",
+		visibilityState
+	};
+}
+//#endregion
+export { usePageVisibility };

package/dist/mobile/hooks/useSafeAreaInset/useSafeAreaInset.cjs

@@ -0,0 +1,74 @@
+"use client";
+const require_isServer = require("../../utils/isServer/isServer.cjs");
+const require_getSafeAreaInset = require("../../utils/getSafeAreaInset/getSafeAreaInset.cjs");
+let react = require("react");
+//#region src/mobile/hooks/useSafeAreaInset/useSafeAreaInset.ts
+/**
+* @description
+* `useSafeAreaInset` is a React hook that tracks safe area inset changes.
+* It returns the safe area insets that automatically update when the screen
+* orientation changes (e.g., portrait to landscape).
+*
+* Safe area insets account for device-specific UI elements:
+* - **top**: Notch, Dynamic Island, or status bar
+* - **bottom**: Home indicator on Face ID devices
+* - **left/right**: Rounded corners in landscape mode
+*
+* @returns {SafeAreaInset} An object containing safe area insets for all four sides.
+* - top `number` - Top safe area inset in pixels. Accounts for the notch, Dynamic Island, or status bar;
+* - bottom `number` - Bottom safe area inset in pixels. Accounts for the home indicator on Face ID devices;
+* - left `number` - Left safe area inset in pixels. Accounts for rounded corners in landscape mode;
+* - right `number` - Right safe area inset in pixels. Accounts for rounded corners in landscape mode;
+*
+* @example
+* function MyComponent() {
+*   const safeArea = useSafeAreaInset();
+*
+*   return (
+*     <div style={{
+*       paddingTop: safeArea.top,
+*       paddingBottom: safeArea.bottom,
+*       paddingLeft: safeArea.left,
+*       paddingRight: safeArea.right,
+*     }}>
+*       Content that respects safe areas
+*     </div>
+*   );
+* }
+*
+* @example
+* // Automatically updates when screen rotates
+* function RotationAwareHeader() {
+*   const { top, left, right } = useSafeAreaInset();
+*
+*   return (
+*     <header style={{
+*       paddingTop: top,
+*       paddingLeft: left,
+*       paddingRight: right,
+*     }}>
+*       Header content
+*     </header>
+*   );
+* }
+*/
+function useSafeAreaInset() {
+	const [inset, setInset] = (0, react.useState)(() => require_getSafeAreaInset.getSafeAreaInset());
+	const updateInset = (0, react.useCallback)(() => {
+		(0, react.startTransition)(() => {
+			setInset(require_getSafeAreaInset.getSafeAreaInset());
+		});
+	}, []);
+	(0, react.useEffect)(function handleOrientationChange() {
+		if (require_isServer.isServer()) return;
+		window.addEventListener("resize", updateInset);
+		window.addEventListener("orientationchange", updateInset);
+		return function cleanup() {
+			window.removeEventListener("resize", updateInset);
+			window.removeEventListener("orientationchange", updateInset);
+		};
+	}, [updateInset]);
+	return inset;
+}
+//#endregion
+exports.useSafeAreaInset = useSafeAreaInset;

package/dist/mobile/hooks/useSafeAreaInset/useSafeAreaInset.d.cts

@@ -0,0 +1,55 @@
+
+import { SafeAreaInset } from "../../utils/getSafeAreaInset/getSafeAreaInset.cjs";
+//#region src/mobile/hooks/useSafeAreaInset/useSafeAreaInset.d.ts
+/**
+ * @description
+ * `useSafeAreaInset` is a React hook that tracks safe area inset changes.
+ * It returns the safe area insets that automatically update when the screen
+ * orientation changes (e.g., portrait to landscape).
+ *
+ * Safe area insets account for device-specific UI elements:
+ * - **top**: Notch, Dynamic Island, or status bar
+ * - **bottom**: Home indicator on Face ID devices
+ * - **left/right**: Rounded corners in landscape mode
+ *
+ * @returns {SafeAreaInset} An object containing safe area insets for all four sides.
+ * - top `number` - Top safe area inset in pixels. Accounts for the notch, Dynamic Island, or status bar;
+ * - bottom `number` - Bottom safe area inset in pixels. Accounts for the home indicator on Face ID devices;
+ * - left `number` - Left safe area inset in pixels. Accounts for rounded corners in landscape mode;
+ * - right `number` - Right safe area inset in pixels. Accounts for rounded corners in landscape mode;
+ *
+ * @example
+ * function MyComponent() {
+ *   const safeArea = useSafeAreaInset();
+ *
+ *   return (
+ *     <div style={{
+ *       paddingTop: safeArea.top,
+ *       paddingBottom: safeArea.bottom,
+ *       paddingLeft: safeArea.left,
+ *       paddingRight: safeArea.right,
+ *     }}>
+ *       Content that respects safe areas
+ *     </div>
+ *   );
+ * }
+ *
+ * @example
+ * // Automatically updates when screen rotates
+ * function RotationAwareHeader() {
+ *   const { top, left, right } = useSafeAreaInset();
+ *
+ *   return (
+ *     <header style={{
+ *       paddingTop: top,
+ *       paddingLeft: left,
+ *       paddingRight: right,
+ *     }}>
+ *       Header content
+ *     </header>
+ *   );
+ * }
+ */
+declare function useSafeAreaInset(): SafeAreaInset;
+//#endregion
+export { useSafeAreaInset };

package/dist/mobile/hooks/useSafeAreaInset/useSafeAreaInset.d.mts

@@ -0,0 +1,55 @@
+
+import { SafeAreaInset } from "../../utils/getSafeAreaInset/getSafeAreaInset.mjs";
+//#region src/mobile/hooks/useSafeAreaInset/useSafeAreaInset.d.ts
+/**
+ * @description
+ * `useSafeAreaInset` is a React hook that tracks safe area inset changes.
+ * It returns the safe area insets that automatically update when the screen
+ * orientation changes (e.g., portrait to landscape).
+ *
+ * Safe area insets account for device-specific UI elements:
+ * - **top**: Notch, Dynamic Island, or status bar
+ * - **bottom**: Home indicator on Face ID devices
+ * - **left/right**: Rounded corners in landscape mode
+ *
+ * @returns {SafeAreaInset} An object containing safe area insets for all four sides.
+ * - top `number` - Top safe area inset in pixels. Accounts for the notch, Dynamic Island, or status bar;
+ * - bottom `number` - Bottom safe area inset in pixels. Accounts for the home indicator on Face ID devices;
+ * - left `number` - Left safe area inset in pixels. Accounts for rounded corners in landscape mode;
+ * - right `number` - Right safe area inset in pixels. Accounts for rounded corners in landscape mode;
+ *
+ * @example
+ * function MyComponent() {
+ *   const safeArea = useSafeAreaInset();
+ *
+ *   return (
+ *     <div style={{
+ *       paddingTop: safeArea.top,
+ *       paddingBottom: safeArea.bottom,
+ *       paddingLeft: safeArea.left,
+ *       paddingRight: safeArea.right,
+ *     }}>
+ *       Content that respects safe areas
+ *     </div>
+ *   );
+ * }
+ *
+ * @example
+ * // Automatically updates when screen rotates
+ * function RotationAwareHeader() {
+ *   const { top, left, right } = useSafeAreaInset();
+ *
+ *   return (
+ *     <header style={{
+ *       paddingTop: top,
+ *       paddingLeft: left,
+ *       paddingRight: right,
+ *     }}>
+ *       Header content
+ *     </header>
+ *   );
+ * }
+ */
+declare function useSafeAreaInset(): SafeAreaInset;
+//#endregion
+export { useSafeAreaInset };

package/dist/mobile/hooks/useSafeAreaInset/useSafeAreaInset.mjs

@@ -0,0 +1,74 @@
+"use client";
+import { isServer } from "../../utils/isServer/isServer.mjs";
+import { getSafeAreaInset } from "../../utils/getSafeAreaInset/getSafeAreaInset.mjs";
+import { startTransition, useCallback, useEffect, useState } from "react";
+//#region src/mobile/hooks/useSafeAreaInset/useSafeAreaInset.ts
+/**
+* @description
+* `useSafeAreaInset` is a React hook that tracks safe area inset changes.
+* It returns the safe area insets that automatically update when the screen
+* orientation changes (e.g., portrait to landscape).
+*
+* Safe area insets account for device-specific UI elements:
+* - **top**: Notch, Dynamic Island, or status bar
+* - **bottom**: Home indicator on Face ID devices
+* - **left/right**: Rounded corners in landscape mode
+*
+* @returns {SafeAreaInset} An object containing safe area insets for all four sides.
+* - top `number` - Top safe area inset in pixels. Accounts for the notch, Dynamic Island, or status bar;
+* - bottom `number` - Bottom safe area inset in pixels. Accounts for the home indicator on Face ID devices;
+* - left `number` - Left safe area inset in pixels. Accounts for rounded corners in landscape mode;
+* - right `number` - Right safe area inset in pixels. Accounts for rounded corners in landscape mode;
+*
+* @example
+* function MyComponent() {
+*   const safeArea = useSafeAreaInset();
+*
+*   return (
+*     <div style={{
+*       paddingTop: safeArea.top,
+*       paddingBottom: safeArea.bottom,
+*       paddingLeft: safeArea.left,
+*       paddingRight: safeArea.right,
+*     }}>
+*       Content that respects safe areas
+*     </div>
+*   );
+* }
+*
+* @example
+* // Automatically updates when screen rotates
+* function RotationAwareHeader() {
+*   const { top, left, right } = useSafeAreaInset();
+*
+*   return (
+*     <header style={{
+*       paddingTop: top,
+*       paddingLeft: left,
+*       paddingRight: right,
+*     }}>
+*       Header content
+*     </header>
+*   );
+* }
+*/
+function useSafeAreaInset() {
+	const [inset, setInset] = useState(() => getSafeAreaInset());
+	const updateInset = useCallback(() => {
+		startTransition(() => {
+			setInset(getSafeAreaInset());
+		});
+	}, []);
+	useEffect(function handleOrientationChange() {
+		if (isServer()) return;
+		window.addEventListener("resize", updateInset);
+		window.addEventListener("orientationchange", updateInset);
+		return function cleanup() {
+			window.removeEventListener("resize", updateInset);
+			window.removeEventListener("orientationchange", updateInset);
+		};
+	}, [updateInset]);
+	return inset;
+}
+//#endregion
+export { useSafeAreaInset };

package/dist/mobile/hooks/useScrollDirection/useScrollDirection.cjs

@@ -0,0 +1,79 @@
+"use client";
+const require_isServer = require("../../utils/isServer/isServer.cjs");
+let react = require("react");
+//#region src/mobile/hooks/useScrollDirection/useScrollDirection.ts
+/**
+* @description
+* `useScrollDirection` is a React hook that detects scroll direction.
+* It returns scroll direction (up/down) and current scroll position.
+* Throttled by default (50ms) for performance.
+*
+* @param {UseScrollDirectionOptions} [options] - Configuration options.
+* @param {number} [options.throttleMs=50] - Throttle interval in milliseconds.
+* @returns {ScrollDirectionState} Scroll direction state: `direction` (`'up' | 'down' | null`) and `position` (px).
+*
+* @example
+* function Header() {
+*   const { direction, position } = useScrollDirection();
+*
+*   // Hide header on scroll down
+*   const isHidden = direction === 'down' && position > 100;
+*
+*   return (
+*     <header className={isHidden ? 'hidden' : 'visible'}>
+*       My Header
+*     </header>
+*   );
+* }
+*/
+function useScrollDirection(options = {}) {
+	const { throttleMs = 50 } = options;
+	const [scrollInfo, setScrollInfo] = (0, react.useState)({
+		direction: null,
+		position: require_isServer.isServer() ? 0 : window.scrollY
+	});
+	const lastScrollYRef = (0, react.useRef)(require_isServer.isServer() ? 0 : window.scrollY);
+	const throttleTimerRef = (0, react.useRef)(null);
+	const updateScrollDirection = (0, react.useCallback)(({ currentScrollY, lastScrollY }) => {
+		if (currentScrollY > lastScrollY) {
+			setScrollInfo({
+				direction: "down",
+				position: currentScrollY
+			});
+			return;
+		}
+		if (currentScrollY < lastScrollY) {
+			setScrollInfo({
+				direction: "up",
+				position: currentScrollY
+			});
+			return;
+		}
+	}, []);
+	const startThrottle = (0, react.useCallback)(() => {
+		throttleTimerRef.current = setTimeout(function clearThrottle() {
+			throttleTimerRef.current = null;
+		}, throttleMs);
+	}, [throttleMs]);
+	(0, react.useEffect)(function handleScrollDirectionChange() {
+		function handleScroll() {
+			if (throttleTimerRef.current != null) return;
+			const currentScrollY = window.scrollY;
+			const lastScrollY = lastScrollYRef.current;
+			lastScrollYRef.current = currentScrollY;
+			startThrottle();
+			updateScrollDirection({
+				currentScrollY,
+				lastScrollY
+			});
+		}
+		window.addEventListener("scroll", handleScroll, { passive: true });
+		return function cleanup() {
+			window.removeEventListener("scroll", handleScroll);
+			if (throttleTimerRef.current != null) clearTimeout(throttleTimerRef.current);
+		};
+	}, [startThrottle, updateScrollDirection]);
+	return scrollInfo;
+}
+//#endregion
+exports.useScrollDirection = useScrollDirection;

package/dist/mobile/hooks/useScrollDirection/useScrollDirection.d.cts

@@ -0,0 +1,40 @@
+
+//#region src/mobile/hooks/useScrollDirection/useScrollDirection.d.ts
+type ScrollDirection = 'up' | 'down' | null;
+type ScrollDirectionState = {
+  /** Current scroll direction */
+  direction: ScrollDirection;
+  /** Current scroll Y position (px) */
+  position: number;
+};
+type UseScrollDirectionOptions = {
+  /** Throttle interval (ms) - default: 50ms */
+  throttleMs?: number;
+};
+/**
+ * @description
+ * `useScrollDirection` is a React hook that detects scroll direction.
+ * It returns scroll direction (up/down) and current scroll position.
+ * Throttled by default (50ms) for performance.
+ *
+ * @param {UseScrollDirectionOptions} [options] - Configuration options.
+ * @param {number} [options.throttleMs=50] - Throttle interval in milliseconds.
+ * @returns {ScrollDirectionState} Scroll direction state: `direction` (`'up' | 'down' | null`) and `position` (px).
+ *
+ * @example
+ * function Header() {
+ *   const { direction, position } = useScrollDirection();
+ *
+ *   // Hide header on scroll down
+ *   const isHidden = direction === 'down' && position > 100;
+ *
+ *   return (
+ *     <header className={isHidden ? 'hidden' : 'visible'}>
+ *       My Header
+ *     </header>
+ *   );
+ * }
+ */
+declare function useScrollDirection(options?: UseScrollDirectionOptions): ScrollDirectionState;
+//#endregion
+export { useScrollDirection };

package/dist/mobile/hooks/useScrollDirection/useScrollDirection.d.mts

@@ -0,0 +1,40 @@
+
+//#region src/mobile/hooks/useScrollDirection/useScrollDirection.d.ts
+type ScrollDirection = 'up' | 'down' | null;
+type ScrollDirectionState = {
+  /** Current scroll direction */
+  direction: ScrollDirection;
+  /** Current scroll Y position (px) */
+  position: number;
+};
+type UseScrollDirectionOptions = {
+  /** Throttle interval (ms) - default: 50ms */
+  throttleMs?: number;
+};
+/**
+ * @description
+ * `useScrollDirection` is a React hook that detects scroll direction.
+ * It returns scroll direction (up/down) and current scroll position.
+ * Throttled by default (50ms) for performance.
+ *
+ * @param {UseScrollDirectionOptions} [options] - Configuration options.
+ * @param {number} [options.throttleMs=50] - Throttle interval in milliseconds.
+ * @returns {ScrollDirectionState} Scroll direction state: `direction` (`'up' | 'down' | null`) and `position` (px).
+ *
+ * @example
+ * function Header() {
+ *   const { direction, position } = useScrollDirection();
+ *
+ *   // Hide header on scroll down
+ *   const isHidden = direction === 'down' && position > 100;
+ *
+ *   return (
+ *     <header className={isHidden ? 'hidden' : 'visible'}>
+ *       My Header
+ *     </header>
+ *   );
+ * }
+ */
+declare function useScrollDirection(options?: UseScrollDirectionOptions): ScrollDirectionState;
+//#endregion
+export { useScrollDirection };

package/dist/mobile/hooks/useScrollDirection/useScrollDirection.mjs

@@ -0,0 +1,79 @@
+"use client";
+import { isServer } from "../../utils/isServer/isServer.mjs";
+import { useCallback, useEffect, useRef, useState } from "react";
+//#region src/mobile/hooks/useScrollDirection/useScrollDirection.ts
+/**
+* @description
+* `useScrollDirection` is a React hook that detects scroll direction.
+* It returns scroll direction (up/down) and current scroll position.
+* Throttled by default (50ms) for performance.
+*
+* @param {UseScrollDirectionOptions} [options] - Configuration options.
+* @param {number} [options.throttleMs=50] - Throttle interval in milliseconds.
+* @returns {ScrollDirectionState} Scroll direction state: `direction` (`'up' | 'down' | null`) and `position` (px).
+*
+* @example
+* function Header() {
+*   const { direction, position } = useScrollDirection();
+*
+*   // Hide header on scroll down
+*   const isHidden = direction === 'down' && position > 100;
+*
+*   return (
+*     <header className={isHidden ? 'hidden' : 'visible'}>
+*       My Header
+*     </header>
+*   );
+* }
+*/
+function useScrollDirection(options = {}) {
+	const { throttleMs = 50 } = options;
+	const [scrollInfo, setScrollInfo] = useState({
+		direction: null,
+		position: isServer() ? 0 : window.scrollY
+	});
+	const lastScrollYRef = useRef(isServer() ? 0 : window.scrollY);
+	const throttleTimerRef = useRef(null);
+	const updateScrollDirection = useCallback(({ currentScrollY, lastScrollY }) => {
+		if (currentScrollY > lastScrollY) {
+			setScrollInfo({
+				direction: "down",
+				position: currentScrollY
+			});
+			return;
+		}
+		if (currentScrollY < lastScrollY) {
+			setScrollInfo({
+				direction: "up",
+				position: currentScrollY
+			});
+			return;
+		}
+	}, []);
+	const startThrottle = useCallback(() => {
+		throttleTimerRef.current = setTimeout(function clearThrottle() {
+			throttleTimerRef.current = null;
+		}, throttleMs);
+	}, [throttleMs]);
+	useEffect(function handleScrollDirectionChange() {
+		function handleScroll() {
+			if (throttleTimerRef.current != null) return;
+			const currentScrollY = window.scrollY;
+			const lastScrollY = lastScrollYRef.current;
+			lastScrollYRef.current = currentScrollY;
+			startThrottle();
+			updateScrollDirection({
+				currentScrollY,
+				lastScrollY
+			});
+		}
+		window.addEventListener("scroll", handleScroll, { passive: true });
+		return function cleanup() {
+			window.removeEventListener("scroll", handleScroll);
+			if (throttleTimerRef.current != null) clearTimeout(throttleTimerRef.current);
+		};
+	}, [startThrottle, updateScrollDirection]);
+	return scrollInfo;
+}
+//#endregion
+export { useScrollDirection };