xxf_react 0.7.7 → 0.8.2

package/dist/layout/image/XImage.d.ts

@@ -1,19 +1,42 @@
-import { ImageProps } from "next/image";
-import React, { ReactNode } from "react";
-export interface XImageProps extends ImageProps {
-    /** 图片加载失败时显示的备用图片 URL 或自定义组件
-     * 可选:urlPlaceholder函数来生成失败的占位图
-     */
-    fallback?: string | ReactNode;
-}
+import React from "react";
+import type { XImageProps } from "./XImage.types";
 /**
- * 增强的 Image 组件，支持加载失败时显示备用图片或自定义组件
- * @param src - 图片地址
- * @param fallback - 加载失败时显示的备用图片 URL 或 ReactNode,可选:urlPlaceholder函数来生成失败的占位图
- * @param onError - 加载失败回调
- * @param className - 样式类名
- * @param props - 其他 Next.js Image 支持的属性
+ * 生产级图片组件
+ *
+ * 基于 next/image 实现，支持：
+ * - 双层渲染：placeholder 先加载，主图加载完成后 blur 过渡
+ * - 自动图片优化（Next.js 内置）
+ * - 错误处理 + 自动重试
+ * - fallback 备用图/组件
+ *
+ * @example
+ * ```tsx
+ * // 基础用法
+ * <XImage src="/photo.jpg" alt="Photo" width={400} height={300} />
+ *
+ * // 带 placeholder 模糊过渡（推荐使用小尺寸缩略图，如 w=20）
+ * <XImage
+ *   src="/photo.jpg?w=800"
+ *   placeholder="/photo.jpg?w=20"
+ *   width={400}
+ *   height={300}
+ * />
+ *
+ * // 带错误处理和重试
+ * <XImage
+ *   src="/photo.jpg"
+ *   fallback="/fallback.jpg"
+ *   retryCount={2}
+ *   retryDelay={1000}
+ * />
+ *
+ * // 自定义占位组件
+ * <XImage
+ *   src="/photo.jpg"
+ *   placeholder={<Skeleton className="w-full h-full" />}
+ * />
+ * ```
  */
-export declare function XImage({ src, fallback, onError, ...props }: XImageProps): React.JSX.Element;
+export declare const XImage: React.NamedExoticComponent<XImageProps & React.RefAttributes<HTMLDivElement | HTMLImageElement>>;
 export default XImage;
 //# sourceMappingURL=XImage.d.ts.map

package/dist/layout/image/XImage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"XImage.d.ts","sourceRoot":"","sources":["../../../src/layout/image/XImage.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAC,UAAU,EAAC,MAAM,YAAY,CAAC;AAC7C,OAAO,KAAK,EAAE,EAAsB,SAAS,EAAC,MAAM,OAAO,CAAC;AAE5D,MAAM,WAAW,WAAY,SAAQ,UAAU;IAC3C;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACjC;AAED;;;;;;;GAOG;AACH,wBAAgB,MAAM,CAAC,EACI,GAAG,EACH,QAAQ,EACR,OAAO,EACP,GAAG,KAAK,EACX,EAAE,WAAW,qBAkDpC;AAED,eAAe,MAAM,CAAC"}
+{"version":3,"file":"XImage.d.ts","sourceRoot":"","sources":["../../../src/layout/image/XImage.tsx"],"names":[],"mappings":"AAEA,OAAO,KAQN,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,WAAW,EAAgB,MAAM,gBAAgB,CAAC;AAmBhE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,eAAO,MAAM,MAAM,kGA4TlB,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/layout/image/XImage.js

@@ -1,45 +1,256 @@
 "use client";
+import React, { useState, useEffect, useCallback, useRef, forwardRef, memo, useMemo, } from "react";
 import Image from "next/image";
-import React, { useState, useEffect } from "react";
+// ============================================================================
+// 常量定义
+// ============================================================================
+/** 过渡动画时长 */
+const TRANSITION_DURATION = "0.3s";
+/** 占位图模糊程度 */
+const PLACEHOLDER_BLUR = "20px";
+/** 占位图放大比例（防止模糊边缘露出） */
+const PLACEHOLDER_SCALE = 1.1;
+// ============================================================================
+// 组件实现
+// ============================================================================
 /**
- * 增强的 Image 组件，支持加载失败时显示备用图片或自定义组件
- * @param src - 图片地址
- * @param fallback - 加载失败时显示的备用图片 URL 或 ReactNode,可选:urlPlaceholder函数来生成失败的占位图
- * @param onError - 加载失败回调
- * @param className - 样式类名
- * @param props - 其他 Next.js Image 支持的属性
+ * 生产级图片组件
+ *
+ * 基于 next/image 实现，支持：
+ * - 双层渲染：placeholder 先加载，主图加载完成后 blur 过渡
+ * - 自动图片优化（Next.js 内置）
+ * - 错误处理 + 自动重试
+ * - fallback 备用图/组件
+ *
+ * @example
+ * ```tsx
+ * // 基础用法
+ * <XImage src="/photo.jpg" alt="Photo" width={400} height={300} />
+ *
+ * // 带 placeholder 模糊过渡（推荐使用小尺寸缩略图，如 w=20）
+ * <XImage
+ *   src="/photo.jpg?w=800"
+ *   placeholder="/photo.jpg?w=20"
+ *   width={400}
+ *   height={300}
+ * />
+ *
+ * // 带错误处理和重试
+ * <XImage
+ *   src="/photo.jpg"
+ *   fallback="/fallback.jpg"
+ *   retryCount={2}
+ *   retryDelay={1000}
+ * />
+ *
+ * // 自定义占位组件
+ * <XImage
+ *   src="/photo.jpg"
+ *   placeholder={<Skeleton className="w-full h-full" />}
+ * />
+ * ```
  */
-export function XImage({ src, fallback, onError, ...props }) {
-    const [imgSrc, setImgSrc] = useState(src);
+export const XImage = memo(forwardRef(function XImage({ 
+// -------- XImage 扩展属性 --------
+placeholder, fallback, retryCount = 0, retryDelay = 1000, onStatusChange, wrapperProps, wrapperClassName, 
+// -------- next/image 常用属性（需要特殊处理） --------
+src, alt = "", fill, style, className, onLoad, onError, 
+// -------- next/image 其余属性（透传） --------
+...imageProps }, ref) {
+    // ========================================================================
+    // 解析 placeholder 类型
+    // ========================================================================
+    const placeholderSrc = typeof placeholder === "string" ? placeholder : undefined;
+    const placeholderElement = typeof placeholder !== "string" ? placeholder : undefined;
+    const hasPlaceholder = Boolean(placeholderSrc || placeholderElement);
+    // ========================================================================
+    // 状态管理
+    // ========================================================================
+    const [currentSrc, setCurrentSrc] = useState(src);
+    const [status, setStatus] = useState("idle");
     const [hasError, setHasError] = useState(false);
+    const [retryAttempt, setRetryAttempt] = useState(0);
+    const [isLoaded, setIsLoaded] = useState(false);
+    // ========================================================================
+    // Refs
+    // ========================================================================
+    const wrapperRef = useRef(null);
+    const mainImageRef = useRef(null);
+    const retryTimerRef = useRef(null);
+    // 使用 ref 存储回调，避免 useCallback 依赖问题
+    const callbacksRef = useRef({ onStatusChange, onLoad, onError });
+    callbacksRef.current = { onStatusChange, onLoad, onError };
+    // ========================================================================
+    // 状态更新辅助函数
+    // ========================================================================
+    const updateStatus = useCallback((newStatus) => {
+        var _a, _b;
+        setStatus(newStatus);
+        (_b = (_a = callbacksRef.current).onStatusChange) === null || _b === void 0 ? void 0 : _b.call(_a, newStatus);
+    }, []);
+    // ========================================================================
     // src 变化时重置状态
+    // ========================================================================
     useEffect(() => {
-        setImgSrc(src);
+        setCurrentSrc(src);
         setHasError(false);
-    }, [src]);
-    const handleError = (e) => {
-        if (fallback && !hasError) {
-            setHasError(true);
-            // 如果 fallback 是字符串（URL），则切换图片源
-            if (typeof fallback === "string") {
-                setImgSrc(fallback);
-                return; // fallback 切换时不触发 onError，等 fallback 也失败再触发
+        setRetryAttempt(0);
+        setIsLoaded(false);
+        updateStatus("loading");
+        // 清理重试定时器
+        if (retryTimerRef.current) {
+            clearTimeout(retryTimerRef.current);
+            retryTimerRef.current = null;
+        }
+    }, [src, updateStatus]);
+    // 组件卸载时清理定时器
+    useEffect(() => {
+        return () => {
+            if (retryTimerRef.current) {
+                clearTimeout(retryTimerRef.current);
+            }
+        };
+    }, []);
+    // ========================================================================
+    // ref 转发：将内部 img 元素暴露给外部
+    // ========================================================================
+    useEffect(() => {
+        if (!ref || !wrapperRef.current)
+            return;
+        // 获取主图 img 元素（双层渲染时取第二个，单层取第一个）
+        const imgs = wrapperRef.current.querySelectorAll("img");
+        const targetImg = imgs.length > 1 ? imgs[1] : imgs[0];
+        if (targetImg) {
+            if (typeof ref === "function") {
+                ref(targetImg);
+            }
+            else {
+                ref.current = targetImg;
             }
         }
-        onError === null || onError === void 0 ? void 0 : onError(e);
-    };
-    // fallback 是 ReactNode 且已出错，用容器包裹并应用样式属性
+    }, [ref, isLoaded]); // isLoaded 变化时重新获取，确保 img 已渲染
+    // ========================================================================
+    // 事件处理
+    // ========================================================================
+    /**
+     * 主图加载成功
+     */
+    const handleLoad = useCallback((e) => {
+        var _a, _b;
+        setIsLoaded(true);
+        updateStatus("loaded");
+        (_b = (_a = callbacksRef.current).onLoad) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+    }, [updateStatus]);
+    /**
+     * 主图加载失败 - 处理重试和 fallback 逻辑
+     */
+    const handleError = useCallback((e) => {
+        setRetryAttempt((currentRetry) => {
+            // 还有重试次数，延迟后重试
+            if (currentRetry < retryCount) {
+                retryTimerRef.current = setTimeout(() => {
+                    // 添加时间戳绕过缓存
+                    const srcStr = typeof src === "string" ? src : "";
+                    const separator = srcStr.includes("?") ? "&" : "?";
+                    setCurrentSrc(`${srcStr}${separator}_retry=${Date.now()}`);
+                }, retryDelay);
+                return currentRetry + 1;
+            }
+            // 重试耗尽，尝试 fallback
+            setHasError((currentHasError) => {
+                var _a, _b;
+                if (fallback && !currentHasError) {
+                    if (typeof fallback === "string") {
+                        setCurrentSrc(fallback);
+                        return true;
+                    }
+                    // fallback 是 ReactNode，标记错误状态
+                    updateStatus("error");
+                    return true;
+                }
+                // 无 fallback 或已经在 fallback 状态，触发错误回调
+                updateStatus("error");
+                (_b = (_a = callbacksRef.current).onError) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+                return currentHasError;
+            });
+            return currentRetry;
+        });
+    }, [retryCount, retryDelay, src, fallback, updateStatus]);
+    // ========================================================================
+    // 合并 wrapperProps 的 ref
+    // ========================================================================
+    const mergedWrapperRef = useCallback((node) => {
+        wrapperRef.current = node;
+        // 调用用户传入的 ref
+        const userRef = wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.ref;
+        if (userRef) {
+            if (typeof userRef === "function") {
+                userRef(node);
+            }
+            else {
+                userRef.current = node;
+            }
+        }
+    }, [wrapperProps]);
+    // ========================================================================
+    // 计算样式（使用 useMemo 避免重复创建对象）
+    // ========================================================================
+    /** 容器样式 */
+    const wrapperStyle = useMemo(() => ({
+        position: "relative",
+        display: "inline-block",
+        overflow: "hidden",
+        ...wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.style,
+    }), [wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.style]);
+    /** 占位图样式（带 blur 效果） */
+    const placeholderStyle = useMemo(() => ({
+        ...style,
+        position: "absolute",
+        inset: 0,
+        width: "100%",
+        height: "100%",
+        transition: `opacity ${TRANSITION_DURATION} ease-in-out, filter ${TRANSITION_DURATION} ease-in-out`,
+        opacity: isLoaded ? 0 : 1,
+        filter: isLoaded ? "blur(0px)" : `blur(${PLACEHOLDER_BLUR})`,
+        transform: `scale(${PLACEHOLDER_SCALE})`,
+        pointerEvents: "none", // 防止占位图拦截事件
+    }), [style, isLoaded]);
+    /** 主图样式（加载完成后显示） */
+    const mainImageStyle = useMemo(() => ({
+        ...style,
+        position: "absolute",
+        inset: 0,
+        width: "100%",
+        height: "100%",
+        transition: `opacity ${TRANSITION_DURATION} ease-in-out`,
+        opacity: isLoaded ? 1 : 0,
+    }), [style, isLoaded]);
+    // ========================================================================
+    // 渲染
+    // ========================================================================
+    // 错误状态 + ReactNode fallback
     if (hasError && fallback && typeof fallback !== "string") {
-        const width = typeof props.width === "number" ? props.width : props.width ? Number(props.width) : undefined;
-        const height = typeof props.height === "number" ? props.height : props.height ? Number(props.height) : undefined;
-        return (React.createElement("div", { className: props.className, style: {
-                width,
-                height,
-                position: props.fill ? "absolute" : undefined,
-                inset: props.fill ? 0 : undefined,
-                ...props.style,
-            } }, fallback));
+        return (React.createElement("div", { ref: ref, className: wrapperClassName || className, style: { ...wrapperStyle, ...style }, ...wrapperProps }, fallback));
+    }
+    // 有 placeholder（URL 或 ReactElement）：双层渲染
+    if (hasPlaceholder) {
+        return (React.createElement("div", { ...wrapperProps, ref: mergedWrapperRef, className: wrapperClassName, style: wrapperStyle },
+            placeholderSrc ? (
+            // URL 占位图：使用 next/image，priority 立即加载
+            React.createElement(Image, { src: placeholderSrc, alt: "" // 占位图不需要 alt（屏幕阅读器跳过）
+                , fill: true, priority: true, unoptimized: true, className: className, style: placeholderStyle, sizes: imageProps.sizes })) : (
+            // ReactElement 占位组件（如 Skeleton）
+            React.createElement("div", { style: {
+                    position: "absolute",
+                    inset: 0,
+                    transition: `opacity ${TRANSITION_DURATION} ease-in-out`,
+                    opacity: isLoaded ? 0 : 1,
+                    pointerEvents: "none",
+                } }, placeholderElement)),
+            React.createElement(Image, { ...imageProps, ref: mainImageRef, src: currentSrc, alt: alt, fill: true, className: className, style: mainImageStyle, onLoad: handleLoad, onError: handleError })));
     }
-    return (React.createElement(Image, { ...props, src: imgSrc, onError: handleError }));
-}
+    // 无 placeholder：单层渲染
+    return (React.createElement("div", { ...wrapperProps, ref: mergedWrapperRef, className: wrapperClassName, style: wrapperStyle },
+        React.createElement(Image, { ...imageProps, ref: mainImageRef, src: currentSrc, alt: alt, fill: fill, className: className, style: style, onLoad: handleLoad, onError: handleError })));
+}));
 export default XImage;

package/dist/layout/image/XImage.types.d.ts

@@ -0,0 +1,110 @@
+import type { ImageProps } from "next/image";
+import type { ReactElement, ReactNode } from "react";
+/**
+ * 图片加载状态
+ *
+ * - `idle`: 初始状态（未开始加载）
+ * - `loading`: 加载中
+ * - `loaded`: 加载成功
+ * - `error`: 加载失败（重试耗尽且无 fallback）
+ */
+export type XImageStatus = "idle" | "loading" | "loaded" | "error";
+/**
+ * XImage 组件 Props
+ *
+ * 继承 next/image 的所有属性，扩展双层渲染和错误处理能力。
+ *
+ * ## 性能建议
+ *
+ * 1. **placeholder 使用小尺寸缩略图**：推荐 20-40px 宽度，体积 < 1KB
+ *    ```tsx
+ *    <XImage
+ *      src="/photo.jpg?w=800"
+ *      placeholder="/photo.jpg?w=20"
+ *    />
+ *    ```
+ *
+ * 2. **首屏图片使用 priority**：跳过懒加载
+ *    ```tsx
+ *    <XImage src="/hero.jpg" priority />
+ *    ```
+ *
+ * 3. **设置正确的 sizes**：避免加载过大图片
+ *    ```tsx
+ *    <XImage
+ *      src="/photo.jpg"
+ *      sizes="(max-width: 768px) 100vw, 50vw"
+ *    />
+ *    ```
+ */
+export interface XImageProps extends Omit<ImageProps, "placeholder" | "ref"> {
+    /**
+     * 占位内容（用于双层渲染 + blur 过渡）
+     *
+     * - `string`: 占位图片 URL（推荐使用小尺寸缩略图）
+     * - `ReactElement`: 自定义占位组件（如 Skeleton）
+     *
+     * @example
+     * ```tsx
+     * // URL 占位图（推荐）
+     * <XImage src="/photo.jpg" placeholder="/photo-tiny.jpg" />
+     *
+     * // 自定义 Skeleton
+     * <XImage src="/photo.jpg" placeholder={<Skeleton />} />
+     * ```
+     */
+    placeholder?: string | ReactElement | null;
+    /**
+     * 加载失败时显示的备用内容
+     *
+     * - `string`: 备用图片 URL（会尝试加载）
+     * - `ReactNode`: 自定义错误展示组件
+     *
+     * @example
+     * ```tsx
+     * // 备用图片
+     * <XImage src="/photo.jpg" fallback="/fallback.jpg" />
+     *
+     * // 自定义错误组件
+     * <XImage src="/photo.jpg" fallback={<ErrorPlaceholder />} />
+     * ```
+     */
+    fallback?: string | ReactNode;
+    /**
+     * 加载失败后的重试次数
+     *
+     * @default 0
+     */
+    retryCount?: number;
+    /**
+     * 重试间隔（毫秒）
+     *
+     * @default 1000
+     */
+    retryDelay?: number;
+    /**
+     * 加载状态变化回调
+     *
+     * @example
+     * ```tsx
+     * <XImage
+     *   src="/photo.jpg"
+     *   onStatusChange={(status) => console.log('Status:', status)}
+     * />
+     * ```
+     */
+    onStatusChange?: (status: XImageStatus) => void;
+    /**
+     * 传递给包裹 div 元素的属性
+     *
+     * 用于自定义容器的事件处理、数据属性等
+     */
+    wrapperProps?: React.HTMLAttributes<HTMLDivElement>;
+    /**
+     * 包裹元素的类名
+     *
+     * 与 className 区分：className 应用于 img，wrapperClassName 应用于外层 div
+     */
+    wrapperClassName?: string;
+}
+//# sourceMappingURL=XImage.types.d.ts.map

package/dist/layout/image/XImage.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"XImage.types.d.ts","sourceRoot":"","sources":["../../../src/layout/image/XImage.types.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAErD;;;;;;;GAOG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEnE;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,UAAU,EAAE,aAAa,GAAG,KAAK,CAAC;IACxE;;;;;;;;;;;;;;OAcG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,YAAY,GAAG,IAAI,CAAC;IAE3C;;;;;;;;;;;;;;OAcG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAE9B;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;;;;;;;;OAUG;IACH,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;IAEhD;;;;OAIG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;IAEpD;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC7B"}

package/dist/layout/image/XImage.types.js

@@ -0,0 +1,2 @@
+"use client";
+export {};

package/dist/layout/image/index.d.ts

@@ -0,0 +1,3 @@
+export { XImage, default as XImageDefault } from "./XImage";
+export type { XImageProps, XImageStatus } from "./XImage.types";
+//# sourceMappingURL=index.d.ts.map

package/dist/layout/image/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/layout/image/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,UAAU,CAAC;AAG5D,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/layout/image/index.js

@@ -0,0 +1,3 @@
+"use client";
+// ============ 组件导出 ============
+export { XImage, default as XImageDefault } from "./XImage";

package/dist/layout/index.d.ts

@@ -3,7 +3,7 @@ export * from './resize/core/SizedLayoutContext';
 export * from './resize/core/ResizeObserverHook';
 export * from './resize/impl/SizedContainer';
 export * from './resize/impl/SizedLayout';
-export * from './image/XImage';
+export * from './image';
 export * from './visibility/ElementVisibilityHooks';
 export * from './virtualized/VirtualizedConfig';
 export * from './hover/XHover';

package/dist/layout/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/layout/index.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAA;AAC9C,cAAc,kCAAkC,CAAA;AAChD,cAAc,kCAAkC,CAAA;AAChD,cAAc,8BAA8B,CAAA;AAC5C,cAAc,2BAA2B,CAAA;AACzC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,qCAAqC,CAAA;AACnD,cAAc,iCAAiC,CAAA;AAC/C,cAAc,gBAAgB,CAAA;AAC9B,cAAc,kBAAkB,CAAA;AAChC,cAAc,oBAAoB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/layout/index.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAA;AAC9C,cAAc,kCAAkC,CAAA;AAChD,cAAc,kCAAkC,CAAA;AAChD,cAAc,8BAA8B,CAAA;AAC5C,cAAc,2BAA2B,CAAA;AACzC,cAAc,SAAS,CAAA;AACvB,cAAc,qCAAqC,CAAA;AACnD,cAAc,iCAAiC,CAAA;AAC/C,cAAc,gBAAgB,CAAA;AAC9B,cAAc,kBAAkB,CAAA;AAChC,cAAc,oBAAoB,CAAA"}

package/dist/layout/index.js

@@ -3,7 +3,7 @@ export * from './resize/core/SizedLayoutContext';
 export * from './resize/core/ResizeObserverHook';
 export * from './resize/impl/SizedContainer';
 export * from './resize/impl/SizedLayout';
-export * from './image/XImage';
+export * from './image';
 export * from './visibility/ElementVisibilityHooks';
 export * from './virtualized/VirtualizedConfig';
 export * from './hover/XHover';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xxf_react",
-  "version": "0.7.7",
+  "version": "0.8.2",
   "private": false,
   "type": "module",
   "main": "dist/index.js",
@@ -70,7 +70,8 @@
     "build": "tsc"
   },
   "peerDependencies": {
-    "react": ">=18"
+    "react": ">=18",
+    "next": ">=13"
   },
   "dependencies": {
     "@microsoft/fetch-event-source": "^2.0.1",