@fringeworks/react-defer-rendering 0.8.0

package/useDeferUntilScrolled/useDeferUntilScrolled.cjs

@@ -0,0 +1,94 @@
+'use client';
+
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
+const require_useDeferUntilTrue_useDeferUntilTrue = require('../useDeferUntilTrue/useDeferUntilTrue.cjs');
+require('../useDeferUntilTrue/index.cjs');
+let _fringeworks_react_utils_hooks_useIsMounted = require("@fringeworks/react-utils/hooks/useIsMounted");
+_fringeworks_react_utils_hooks_useIsMounted = require_runtime.__toESM(_fringeworks_react_utils_hooks_useIsMounted, 1);
+let react = require("react");
+let _fringeworks_utils_timer_debounce = require("@fringeworks/utils/timer/debounce");
+_fringeworks_utils_timer_debounce = require_runtime.__toESM(_fringeworks_utils_timer_debounce, 1);
+
+//#region src/useDeferUntilScrolled/useDeferUntilScrolled.tsx
+/**
+* 縦または横スクロール位置に基づいて描画を遅延させるhook
+* @param target 描画対象のノード
+* @param elementRef 基準となる要素の参照（参照自体がnull/undefinedの場合は待たずに描画する）
+* @param options オプション
+* @returns state（'pending', 'ready'）と状態に応じたノード
+*/
+function useDeferUntilScrolled(target, elementRef, options = {}) {
+	const defaultRootRef = (0, react.useRef)(null);
+	const { rootRef = defaultRootRef, rootMargin = 0, detectionDelay = 100, preserveOnceReady, direction = "vertical", initialCondition = false, ...opts } = options;
+	const [condition, setCondition] = (0, react.useState)(!elementRef || initialCondition);
+	const isMounted = (0, _fringeworks_react_utils_hooks_useIsMounted.default)();
+	const isFirstRun = (0, react.useRef)(true);
+	(0, react.useEffect)(() => {
+		const isFirst = isFirstRun.current;
+		isFirstRun.current = false;
+		if (!elementRef) {
+			setCondition(true);
+			return;
+		}
+		if (!isFirst) setCondition(false);
+		const element = elementRef.current;
+		if (!element) return;
+		const container = rootRef.current;
+		const scrollTarget = container ?? window;
+		const getRootBounds = () => {
+			if (container) {
+				const rect = container.getBoundingClientRect();
+				const top = rect.top + container.clientTop;
+				const left = rect.left + container.clientLeft;
+				return {
+					top,
+					left,
+					bottom: top + container.clientHeight,
+					right: left + container.clientWidth
+				};
+			}
+			const viewport = document.documentElement;
+			return {
+				top: 0,
+				left: 0,
+				bottom: viewport.clientHeight,
+				right: viewport.clientWidth
+			};
+		};
+		const checkVisible = () => {
+			const rect = element.getBoundingClientRect();
+			const bounds = getRootBounds();
+			return direction === "vertical" ? rect.top - rootMargin < bounds.bottom && rect.bottom + rootMargin >= bounds.top : rect.left - rootMargin < bounds.right && rect.right + rootMargin >= bounds.left;
+		};
+		if (checkVisible()) {
+			setCondition(true);
+			if (preserveOnceReady) return;
+		}
+		const debouncedHandleScroll = (0, _fringeworks_utils_timer_debounce.default)(() => {
+			if (!isMounted()) return;
+			const isVisible = checkVisible();
+			setCondition(isVisible);
+			if (preserveOnceReady && isVisible) scrollTarget.removeEventListener("scroll", debouncedHandleScroll);
+		}, detectionDelay);
+		scrollTarget.addEventListener("scroll", debouncedHandleScroll, { passive: true });
+		return () => {
+			debouncedHandleScroll.cancel();
+			scrollTarget.removeEventListener("scroll", debouncedHandleScroll);
+		};
+	}, [
+		elementRef,
+		elementRef?.current,
+		rootRef.current,
+		rootMargin,
+		detectionDelay,
+		direction,
+		preserveOnceReady
+	]);
+	return require_useDeferUntilTrue_useDeferUntilTrue(target, condition, {
+		preserveOnceReady,
+		...opts
+	});
+}
+
+//#endregion
+module.exports = useDeferUntilScrolled;

package/useDeferUntilScrolled/useDeferUntilScrolled.d.cts

@@ -0,0 +1,14 @@
+import { DeferRenderingResult } from "../types.cjs";
+import { UseDeferUntilScrolledOptions } from "./types.cjs";
+import { ReactNode, RefObject } from "react";
+
+//#region src/useDeferUntilScrolled/useDeferUntilScrolled.d.ts
+/**
+ * 縦または横スクロール位置に基づいて描画を遅延させるhook
+ * @param target 描画対象のノード
+ * @param elementRef 基準となる要素の参照（参照自体がnull/undefinedの場合は待たずに描画する）
+ * @param options オプション
+ * @returns state（'pending', 'ready'）と状態に応じたノード
+ */
+declare function useDeferUntilScrolled<T extends ReactNode, P extends ReactNode = ReactNode>(target: T, elementRef: RefObject<HTMLElement | null | undefined> | null | undefined, options?: UseDeferUntilScrolledOptions<P>): DeferRenderingResult<T | P>;
+export = useDeferUntilScrolled;

package/useDeferUntilScrolled/useDeferUntilScrolled.d.mts

@@ -0,0 +1,15 @@
+import { DeferRenderingResult } from "../types.mjs";
+import { UseDeferUntilScrolledOptions } from "./types.mjs";
+import { ReactNode, RefObject } from "react";
+
+//#region src/useDeferUntilScrolled/useDeferUntilScrolled.d.ts
+/**
+ * 縦または横スクロール位置に基づいて描画を遅延させるhook
+ * @param target 描画対象のノード
+ * @param elementRef 基準となる要素の参照（参照自体がnull/undefinedの場合は待たずに描画する）
+ * @param options オプション
+ * @returns state（'pending', 'ready'）と状態に応じたノード
+ */
+declare function useDeferUntilScrolled<T extends ReactNode, P extends ReactNode = ReactNode>(target: T, elementRef: RefObject<HTMLElement | null | undefined> | null | undefined, options?: UseDeferUntilScrolledOptions<P>): DeferRenderingResult<T | P>;
+//#endregion
+export { useDeferUntilScrolled as default };

package/useDeferUntilScrolled/useDeferUntilScrolled.mjs

@@ -0,0 +1,91 @@
+'use client';
+
+import useDeferUntilTrue from "../useDeferUntilTrue/useDeferUntilTrue.mjs";
+import "../useDeferUntilTrue/index.mjs";
+import useIsMounted from "@fringeworks/react-utils/hooks/useIsMounted";
+import { useEffect, useRef, useState } from "react";
+import debounce from "@fringeworks/utils/timer/debounce";
+
+//#region src/useDeferUntilScrolled/useDeferUntilScrolled.tsx
+/**
+* 縦または横スクロール位置に基づいて描画を遅延させるhook
+* @param target 描画対象のノード
+* @param elementRef 基準となる要素の参照（参照自体がnull/undefinedの場合は待たずに描画する）
+* @param options オプション
+* @returns state（'pending', 'ready'）と状態に応じたノード
+*/
+function useDeferUntilScrolled(target, elementRef, options = {}) {
+	const defaultRootRef = useRef(null);
+	const { rootRef = defaultRootRef, rootMargin = 0, detectionDelay = 100, preserveOnceReady, direction = "vertical", initialCondition = false, ...opts } = options;
+	const [condition, setCondition] = useState(!elementRef || initialCondition);
+	const isMounted = useIsMounted();
+	const isFirstRun = useRef(true);
+	useEffect(() => {
+		const isFirst = isFirstRun.current;
+		isFirstRun.current = false;
+		if (!elementRef) {
+			setCondition(true);
+			return;
+		}
+		if (!isFirst) setCondition(false);
+		const element = elementRef.current;
+		if (!element) return;
+		const container = rootRef.current;
+		const scrollTarget = container ?? window;
+		const getRootBounds = () => {
+			if (container) {
+				const rect = container.getBoundingClientRect();
+				const top = rect.top + container.clientTop;
+				const left = rect.left + container.clientLeft;
+				return {
+					top,
+					left,
+					bottom: top + container.clientHeight,
+					right: left + container.clientWidth
+				};
+			}
+			const viewport = document.documentElement;
+			return {
+				top: 0,
+				left: 0,
+				bottom: viewport.clientHeight,
+				right: viewport.clientWidth
+			};
+		};
+		const checkVisible = () => {
+			const rect = element.getBoundingClientRect();
+			const bounds = getRootBounds();
+			return direction === "vertical" ? rect.top - rootMargin < bounds.bottom && rect.bottom + rootMargin >= bounds.top : rect.left - rootMargin < bounds.right && rect.right + rootMargin >= bounds.left;
+		};
+		if (checkVisible()) {
+			setCondition(true);
+			if (preserveOnceReady) return;
+		}
+		const debouncedHandleScroll = debounce(() => {
+			if (!isMounted()) return;
+			const isVisible = checkVisible();
+			setCondition(isVisible);
+			if (preserveOnceReady && isVisible) scrollTarget.removeEventListener("scroll", debouncedHandleScroll);
+		}, detectionDelay);
+		scrollTarget.addEventListener("scroll", debouncedHandleScroll, { passive: true });
+		return () => {
+			debouncedHandleScroll.cancel();
+			scrollTarget.removeEventListener("scroll", debouncedHandleScroll);
+		};
+	}, [
+		elementRef,
+		elementRef?.current,
+		rootRef.current,
+		rootMargin,
+		detectionDelay,
+		direction,
+		preserveOnceReady
+	]);
+	return useDeferUntilTrue(target, condition, {
+		preserveOnceReady,
+		...opts
+	});
+}
+
+//#endregion
+export { useDeferUntilScrolled as default };

package/useDeferUntilTimeout/index.cjs

@@ -0,0 +1,5 @@
+'use client';
+
+const require_useDeferUntilTimeout_useDeferUntilTimeout = require('./useDeferUntilTimeout.cjs');
+
+module.exports = require_useDeferUntilTimeout_useDeferUntilTimeout;

package/useDeferUntilTimeout/index.d.cts

@@ -0,0 +1,3 @@
+import { UseDeferUntilTimeoutOptions } from "./types.cjs";
+import useDeferUntilTimeout from "./useDeferUntilTimeout.cjs";
+export { type UseDeferUntilTimeoutOptions, useDeferUntilTimeout as default };

package/useDeferUntilTimeout/index.d.mts

@@ -0,0 +1,3 @@
+import { UseDeferUntilTimeoutOptions } from "./types.mjs";
+import useDeferUntilTimeout from "./useDeferUntilTimeout.mjs";
+export { type UseDeferUntilTimeoutOptions, useDeferUntilTimeout as default };

package/useDeferUntilTimeout/index.mjs

@@ -0,0 +1,5 @@
+'use client';
+
+import useDeferUntilTimeout from "./useDeferUntilTimeout.mjs";
+
+export { useDeferUntilTimeout as default };

package/useDeferUntilTimeout/types.d.cts

@@ -0,0 +1,7 @@
+import { UseDeferUntilTrueOptions } from "../useDeferUntilTrue/types.cjs";
+import { ReactNode } from "react";
+
+//#region src/useDeferUntilTimeout/types.d.ts
+type UseDeferUntilTimeoutOptions<P extends ReactNode = ReactNode> = UseDeferUntilTrueOptions<P>;
+//#endregion
+export { UseDeferUntilTimeoutOptions };

package/useDeferUntilTimeout/types.d.mts

@@ -0,0 +1,7 @@
+import { UseDeferUntilTrueOptions } from "../useDeferUntilTrue/types.mjs";
+import { ReactNode } from "react";
+
+//#region src/useDeferUntilTimeout/types.d.ts
+type UseDeferUntilTimeoutOptions<P extends ReactNode = ReactNode> = UseDeferUntilTrueOptions<P>;
+//#endregion
+export { UseDeferUntilTimeoutOptions };

package/useDeferUntilTimeout/types.mjs

@@ -0,0 +1 @@
+export {  };

package/useDeferUntilTimeout/useDeferUntilTimeout.cjs

@@ -0,0 +1,40 @@
+'use client';
+
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
+const require_useDeferUntilTrue_useDeferUntilTrue = require('../useDeferUntilTrue/useDeferUntilTrue.cjs');
+require('../useDeferUntilTrue/index.cjs');
+let _fringeworks_react_utils_hooks_useIsMounted = require("@fringeworks/react-utils/hooks/useIsMounted");
+_fringeworks_react_utils_hooks_useIsMounted = require_runtime.__toESM(_fringeworks_react_utils_hooks_useIsMounted, 1);
+let react = require("react");
+let _fringeworks_utils_timer_setTimeoutExtended = require("@fringeworks/utils/timer/setTimeoutExtended");
+_fringeworks_utils_timer_setTimeoutExtended = require_runtime.__toESM(_fringeworks_utils_timer_setTimeoutExtended, 1);
+
+//#region src/useDeferUntilTimeout/useDeferUntilTimeout.tsx
+/**
+* 指定の時間が経過するまで描画を遅延させるhook
+* @param target 描画対象のノード
+* @param defer 遅延させる時間(ms)（null/undefinedの場合は待たずに描画する）
+* @param options オプション
+* @returns state（'pending', 'ready'）と状態に応じたノード
+*/
+function useDeferUntilTimeout(target, defer, options = {}) {
+	const [condition, setCondition] = (0, react.useState)(defer == null || defer <= 0);
+	const isMounted = (0, _fringeworks_react_utils_hooks_useIsMounted.default)();
+	(0, react.useEffect)(() => {
+		if (defer == null || defer <= 0) {
+			setCondition(true);
+			return;
+		}
+		setCondition(false);
+		const cancel = (0, _fringeworks_utils_timer_setTimeoutExtended.default)(() => {
+			if (isMounted()) setCondition(true);
+		}, defer);
+		return () => {
+			cancel();
+		};
+	}, [defer]);
+	return require_useDeferUntilTrue_useDeferUntilTrue(target, condition, options);
+}
+
+//#endregion
+module.exports = useDeferUntilTimeout;

package/useDeferUntilTimeout/useDeferUntilTimeout.d.cts

@@ -0,0 +1,14 @@
+import { DeferRenderingResult } from "../types.cjs";
+import { UseDeferUntilTimeoutOptions } from "./types.cjs";
+import { ReactNode } from "react";
+
+//#region src/useDeferUntilTimeout/useDeferUntilTimeout.d.ts
+/**
+ * 指定の時間が経過するまで描画を遅延させるhook
+ * @param target 描画対象のノード
+ * @param defer 遅延させる時間(ms)（null/undefinedの場合は待たずに描画する）
+ * @param options オプション
+ * @returns state（'pending', 'ready'）と状態に応じたノード
+ */
+declare function useDeferUntilTimeout<T extends ReactNode, P extends ReactNode = ReactNode>(target: T, defer: number | null | undefined, options?: UseDeferUntilTimeoutOptions<P>): DeferRenderingResult<T | P>;
+export = useDeferUntilTimeout;

package/useDeferUntilTimeout/useDeferUntilTimeout.d.mts

@@ -0,0 +1,15 @@
+import { DeferRenderingResult } from "../types.mjs";
+import { UseDeferUntilTimeoutOptions } from "./types.mjs";
+import { ReactNode } from "react";
+
+//#region src/useDeferUntilTimeout/useDeferUntilTimeout.d.ts
+/**
+ * 指定の時間が経過するまで描画を遅延させるhook
+ * @param target 描画対象のノード
+ * @param defer 遅延させる時間(ms)（null/undefinedの場合は待たずに描画する）
+ * @param options オプション
+ * @returns state（'pending', 'ready'）と状態に応じたノード
+ */
+declare function useDeferUntilTimeout<T extends ReactNode, P extends ReactNode = ReactNode>(target: T, defer: number | null | undefined, options?: UseDeferUntilTimeoutOptions<P>): DeferRenderingResult<T | P>;
+//#endregion
+export { useDeferUntilTimeout as default };

package/useDeferUntilTimeout/useDeferUntilTimeout.mjs

@@ -0,0 +1,37 @@
+'use client';
+
+import useDeferUntilTrue from "../useDeferUntilTrue/useDeferUntilTrue.mjs";
+import "../useDeferUntilTrue/index.mjs";
+import useIsMounted from "@fringeworks/react-utils/hooks/useIsMounted";
+import { useEffect, useState } from "react";
+import setTimeoutExtended from "@fringeworks/utils/timer/setTimeoutExtended";
+
+//#region src/useDeferUntilTimeout/useDeferUntilTimeout.tsx
+/**
+* 指定の時間が経過するまで描画を遅延させるhook
+* @param target 描画対象のノード
+* @param defer 遅延させる時間(ms)（null/undefinedの場合は待たずに描画する）
+* @param options オプション
+* @returns state（'pending', 'ready'）と状態に応じたノード
+*/
+function useDeferUntilTimeout(target, defer, options = {}) {
+	const [condition, setCondition] = useState(defer == null || defer <= 0);
+	const isMounted = useIsMounted();
+	useEffect(() => {
+		if (defer == null || defer <= 0) {
+			setCondition(true);
+			return;
+		}
+		setCondition(false);
+		const cancel = setTimeoutExtended(() => {
+			if (isMounted()) setCondition(true);
+		}, defer);
+		return () => {
+			cancel();
+		};
+	}, [defer]);
+	return useDeferUntilTrue(target, condition, options);
+}
+
+//#endregion
+export { useDeferUntilTimeout as default };

package/useDeferUntilTrue/index.cjs

@@ -0,0 +1,5 @@
+'use client';
+
+const require_useDeferUntilTrue_useDeferUntilTrue = require('./useDeferUntilTrue.cjs');
+
+module.exports = require_useDeferUntilTrue_useDeferUntilTrue;

package/useDeferUntilTrue/index.d.cts

@@ -0,0 +1,3 @@
+import { UseDeferUntilTrueOptions } from "./types.cjs";
+import useDeferUntilTrue from "./useDeferUntilTrue.cjs";
+export { type UseDeferUntilTrueOptions, useDeferUntilTrue as default };

package/useDeferUntilTrue/index.d.mts

@@ -0,0 +1,3 @@
+import { UseDeferUntilTrueOptions } from "./types.mjs";
+import useDeferUntilTrue from "./useDeferUntilTrue.mjs";
+export { type UseDeferUntilTrueOptions, useDeferUntilTrue as default };

package/useDeferUntilTrue/index.mjs

@@ -0,0 +1,5 @@
+'use client';
+
+import useDeferUntilTrue from "./useDeferUntilTrue.mjs";
+
+export { useDeferUntilTrue as default };

package/useDeferUntilTrue/types.d.cts

@@ -0,0 +1,7 @@
+import { DeferRenderingOptionsBase } from "../types.cjs";
+import { ReactNode } from "react";
+
+//#region src/useDeferUntilTrue/types.d.ts
+type UseDeferUntilTrueOptions<P extends ReactNode = ReactNode> = DeferRenderingOptionsBase<P>;
+//#endregion
+export { UseDeferUntilTrueOptions };

package/useDeferUntilTrue/types.d.mts

@@ -0,0 +1,7 @@
+import { DeferRenderingOptionsBase } from "../types.mjs";
+import { ReactNode } from "react";
+
+//#region src/useDeferUntilTrue/types.d.ts
+type UseDeferUntilTrueOptions<P extends ReactNode = ReactNode> = DeferRenderingOptionsBase<P>;
+//#endregion
+export { UseDeferUntilTrueOptions };

package/useDeferUntilTrue/types.mjs

@@ -0,0 +1 @@
+export {  };

package/useDeferUntilTrue/useDeferUntilTrue.cjs

@@ -0,0 +1,20 @@
+'use client';
+
+const require_constants = require('../constants.cjs');
+const require_useDeferUntilReady_useDeferUntilReady = require('../useDeferUntilReady/useDeferUntilReady.cjs');
+require('../useDeferUntilReady/index.cjs');
+
+//#region src/useDeferUntilTrue/useDeferUntilTrue.tsx
+/**
+* 条件がtrueになるまで描画を遅延させるhook
+* @param target 描画対象のノード
+* @param condition 条件
+* @param options オプション
+* @returns state（'pending', 'ready'）と状態に応じたノード
+*/
+function useDeferUntilTrue(target, condition, options = {}) {
+	return require_useDeferUntilReady_useDeferUntilReady(target, condition ? require_constants.RenderingState.ready : require_constants.RenderingState.pending, options);
+}
+
+//#endregion
+module.exports = useDeferUntilTrue;

package/useDeferUntilTrue/useDeferUntilTrue.d.cts

@@ -0,0 +1,14 @@
+import { DeferRenderingResult } from "../types.cjs";
+import { UseDeferUntilTrueOptions } from "./types.cjs";
+import { ReactNode } from "react";
+
+//#region src/useDeferUntilTrue/useDeferUntilTrue.d.ts
+/**
+ * 条件がtrueになるまで描画を遅延させるhook
+ * @param target 描画対象のノード
+ * @param condition 条件
+ * @param options オプション
+ * @returns state（'pending', 'ready'）と状態に応じたノード
+ */
+declare function useDeferUntilTrue<T extends ReactNode, P extends ReactNode = ReactNode>(target: T, condition: boolean | null | undefined, options?: UseDeferUntilTrueOptions<P>): DeferRenderingResult<T | P>;
+export = useDeferUntilTrue;

package/useDeferUntilTrue/useDeferUntilTrue.d.mts

@@ -0,0 +1,15 @@
+import { DeferRenderingResult } from "../types.mjs";
+import { UseDeferUntilTrueOptions } from "./types.mjs";
+import { ReactNode } from "react";
+
+//#region src/useDeferUntilTrue/useDeferUntilTrue.d.ts
+/**
+ * 条件がtrueになるまで描画を遅延させるhook
+ * @param target 描画対象のノード
+ * @param condition 条件
+ * @param options オプション
+ * @returns state（'pending', 'ready'）と状態に応じたノード
+ */
+declare function useDeferUntilTrue<T extends ReactNode, P extends ReactNode = ReactNode>(target: T, condition: boolean | null | undefined, options?: UseDeferUntilTrueOptions<P>): DeferRenderingResult<T | P>;
+//#endregion
+export { useDeferUntilTrue as default };

package/useDeferUntilTrue/useDeferUntilTrue.mjs

@@ -0,0 +1,20 @@
+'use client';
+
+import { RenderingState } from "../constants.mjs";
+import useDeferUntilReady from "../useDeferUntilReady/useDeferUntilReady.mjs";
+import "../useDeferUntilReady/index.mjs";
+
+//#region src/useDeferUntilTrue/useDeferUntilTrue.tsx
+/**
+* 条件がtrueになるまで描画を遅延させるhook
+* @param target 描画対象のノード
+* @param condition 条件
+* @param options オプション
+* @returns state（'pending', 'ready'）と状態に応じたノード
+*/
+function useDeferUntilTrue(target, condition, options = {}) {
+	return useDeferUntilReady(target, condition ? RenderingState.ready : RenderingState.pending, options);
+}
+
+//#endregion
+export { useDeferUntilTrue as default };

package/useDeferUntilWebFontReady/index.cjs

@@ -0,0 +1,5 @@
+'use client';
+
+const require_useDeferUntilWebFontReady_useDeferUntilWebFontReady = require('./useDeferUntilWebFontReady.cjs');
+
+module.exports = require_useDeferUntilWebFontReady_useDeferUntilWebFontReady;

package/useDeferUntilWebFontReady/index.d.cts

@@ -0,0 +1,3 @@
+import { UseDeferUntilWebFontReadyOptions, WebFont, WebFontTarget, WebFontTargets } from "./types.cjs";
+import useDeferUntilWebFontReady from "./useDeferUntilWebFontReady.cjs";
+export { type UseDeferUntilWebFontReadyOptions, type WebFont, type WebFontTarget, type WebFontTargets, useDeferUntilWebFontReady as default };

package/useDeferUntilWebFontReady/index.d.mts

@@ -0,0 +1,3 @@
+import { UseDeferUntilWebFontReadyOptions, WebFont, WebFontTarget, WebFontTargets } from "./types.mjs";
+import useDeferUntilWebFontReady from "./useDeferUntilWebFontReady.mjs";
+export { type UseDeferUntilWebFontReadyOptions, type WebFont, type WebFontTarget, type WebFontTargets, useDeferUntilWebFontReady as default };

package/useDeferUntilWebFontReady/index.mjs

@@ -0,0 +1,5 @@
+'use client';
+
+import useDeferUntilWebFontReady from "./useDeferUntilWebFontReady.mjs";
+
+export { useDeferUntilWebFontReady as default };

package/useDeferUntilWebFontReady/types.d.cts

@@ -0,0 +1,49 @@
+import { RenderingState } from "../constants.cjs";
+import { UseDeferUntilReadyOptions } from "../useDeferUntilReady/types.cjs";
+import { ReactNode } from "react";
+import { WebFontMatchOptions } from "@fringeworks/web-font-observer";
+
+//#region src/useDeferUntilWebFontReady/types.d.ts
+/**
+ * 太さ等を指定して待つWebフォント
+ */
+type WebFont = WebFontMatchOptions & {
+  /**
+   * フォントファミリー
+   */
+  family: string;
+};
+/**
+ * 待つWebフォント\
+ * フォントファミリーのみで良い場合は文字列で指定できる
+ */
+type WebFontTarget = string | WebFont;
+/**
+ * 待つWebフォントの指定\
+ * 複数のWebフォントを待つ場合は配列で指定する。配列内のnull/undefinedは無視される
+ */
+type WebFontTargets = WebFontTarget | readonly (WebFontTarget | null | undefined)[];
+type UseDeferUntilWebFontReadyOptions<P extends ReactNode = ReactNode, E extends ReactNode = ReactNode> = UseDeferUntilReadyOptions<P, E> & {
+  /**
+   * Webフォントが利用可能にならなかった場合に失敗とみなすまでの時間（ミリ秒）\
+   * Webフォントごとに適用されるが、すべて並行して待つため実質的に全体の待ち時間となる\
+   * デフォルトはブラウザがWebフォントを待つ時間（block period）の推奨値と同じ3000ms
+   * @default 3000
+   */
+  timeout?: number;
+  /**
+   * Webフォントをロードする関数\
+   * 完了後にWebフォントの確認が行われる。待つWebフォントが変わった時のみ呼ばれる
+   * @param signal 待機が不要になった時に中断されるAbortSignal
+   * @returns
+   */
+  loader?: (signal: AbortSignal) => Promise<void>;
+  /**
+   * SSR時など、実際のWebフォント読み込み状態を判定できない環境での初期状態\
+   * デフォルトは'pending'
+   * @default 'pending'
+   */
+  initialState?: RenderingState;
+};
+//#endregion
+export { UseDeferUntilWebFontReadyOptions, WebFont, WebFontTarget, WebFontTargets };

package/useDeferUntilWebFontReady/types.d.mts

@@ -0,0 +1,49 @@
+import { RenderingState } from "../constants.mjs";
+import { UseDeferUntilReadyOptions } from "../useDeferUntilReady/types.mjs";
+import { ReactNode } from "react";
+import { WebFontMatchOptions } from "@fringeworks/web-font-observer";
+
+//#region src/useDeferUntilWebFontReady/types.d.ts
+/**
+ * 太さ等を指定して待つWebフォント
+ */
+type WebFont = WebFontMatchOptions & {
+  /**
+   * フォントファミリー
+   */
+  family: string;
+};
+/**
+ * 待つWebフォント\
+ * フォントファミリーのみで良い場合は文字列で指定できる
+ */
+type WebFontTarget = string | WebFont;
+/**
+ * 待つWebフォントの指定\
+ * 複数のWebフォントを待つ場合は配列で指定する。配列内のnull/undefinedは無視される
+ */
+type WebFontTargets = WebFontTarget | readonly (WebFontTarget | null | undefined)[];
+type UseDeferUntilWebFontReadyOptions<P extends ReactNode = ReactNode, E extends ReactNode = ReactNode> = UseDeferUntilReadyOptions<P, E> & {
+  /**
+   * Webフォントが利用可能にならなかった場合に失敗とみなすまでの時間（ミリ秒）\
+   * Webフォントごとに適用されるが、すべて並行して待つため実質的に全体の待ち時間となる\
+   * デフォルトはブラウザがWebフォントを待つ時間（block period）の推奨値と同じ3000ms
+   * @default 3000
+   */
+  timeout?: number;
+  /**
+   * Webフォントをロードする関数\
+   * 完了後にWebフォントの確認が行われる。待つWebフォントが変わった時のみ呼ばれる
+   * @param signal 待機が不要になった時に中断されるAbortSignal
+   * @returns
+   */
+  loader?: (signal: AbortSignal) => Promise<void>;
+  /**
+   * SSR時など、実際のWebフォント読み込み状態を判定できない環境での初期状態\
+   * デフォルトは'pending'
+   * @default 'pending'
+   */
+  initialState?: RenderingState;
+};
+//#endregion
+export { UseDeferUntilWebFontReadyOptions, WebFont, WebFontTarget, WebFontTargets };

package/useDeferUntilWebFontReady/types.mjs

@@ -0,0 +1 @@
+export {  };