donghy 0.0.1

package/dist/esm/components/display/image/Image.js

@@ -0,0 +1,479 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { forwardRef, useState, useCallback, useEffect, useRef, useContext, createContext } from 'react';
+import { useEscapeKey } from "../../shared/hooks/useEscapeKey";
+import styles from "./Image.module.css";
+
+/**
+ * 图片语义化 DOM 节点
+ */
+
+/**
+ * 图片预览配置
+ */
+
+/**
+ * 图片组件属性
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function getSemantic(part, defaultClass, classNamesProp, stylesProp) {
+  var classExtra = classNamesProp === null || classNamesProp === void 0 ? void 0 : classNamesProp[part];
+  var styleExtra = stylesProp === null || stylesProp === void 0 ? void 0 : stylesProp[part];
+  return {
+    className: [defaultClass, classExtra].filter(Boolean).join(' '),
+    style: styleExtra || {}
+  };
+}
+var ZOOM_IN_SVG = /*#__PURE__*/_jsx("svg", {
+  viewBox: "0 0 24 24",
+  width: "16",
+  height: "16",
+  fill: "currentColor",
+  children: /*#__PURE__*/_jsx("path", {
+    d: "M15.5 14h-.79l-.28-.27A6.47 6.47 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zM12 10h-2v2h-1v-2H7V9h2V7h1v2h2v1z"
+  })
+});
+var ZOOM_OUT_SVG = /*#__PURE__*/_jsx("svg", {
+  viewBox: "0 0 24 24",
+  width: "16",
+  height: "16",
+  fill: "currentColor",
+  children: /*#__PURE__*/_jsx("path", {
+    d: "M15.5 14h-.79l-.28-.27A6.47 6.47 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zM7 9h5v1H7z"
+  })
+});
+var ROTATE_LEFT_SVG = /*#__PURE__*/_jsx("svg", {
+  viewBox: "0 0 24 24",
+  width: "16",
+  height: "16",
+  fill: "currentColor",
+  children: /*#__PURE__*/_jsx("path", {
+    d: "M7.11 8.53L5.7 7.11C4.8 8.27 4.24 9.61 4.07 11h2.02c.14-.87.49-1.72 1.02-2.47zM6.09 13H4.07c.17 1.39.72 2.73 1.62 3.89l1.41-1.42c-.52-.75-.87-1.59-1.01-2.47zm1.01 5.32c1.16.9 2.51 1.44 3.9 1.61V17.9c-.87-.15-1.71-.49-2.46-1.03L7.1 18.32zM13 4.07V1L8.45 5.55 13 10V6.09c2.84.48 5 2.94 5 5.91s-2.16 5.43-5 5.91v2.02c3.95-.49 7-3.85 7-7.93s-3.05-7.44-7-7.93z"
+  })
+});
+var ROTATE_RIGHT_SVG = /*#__PURE__*/_jsx("svg", {
+  viewBox: "0 0 24 24",
+  width: "16",
+  height: "16",
+  fill: "currentColor",
+  children: /*#__PURE__*/_jsx("path", {
+    d: "M16.89 8.53c.53.75.88 1.6 1.02 2.47h2.02c-.17-1.39-.72-2.73-1.62-3.89l-1.42 1.42zm1.02 4.47c-.14.87-.49 1.72-1.02 2.47l1.41 1.41c.9-1.16 1.45-2.5 1.62-3.89h-2.01zM13 17.9v2.02c1.39-.17 2.74-.71 3.9-1.61l-1.44-1.44c-.75.54-1.59.89-2.46 1.03zm-5.9-1.01c.75.53 1.6.88 2.47 1.02V17.9c-.87-.14-1.71-.49-2.46-1.03L7.1 16.89zM15.55 5.55L11 1v3.07C7.05 4.56 4 7.92 4 12s3.05 7.44 7 7.93v-2.02c-2.84-.48-5-2.94-5-5.91s2.16-5.43 5-5.91V10l4.55-4.45z"
+  })
+});
+var FLIP_H_SVG = /*#__PURE__*/_jsx("svg", {
+  viewBox: "0 0 24 24",
+  width: "16",
+  height: "16",
+  fill: "currentColor",
+  children: /*#__PURE__*/_jsx("path", {
+    d: "M15 21h2v-2h-2v2zm4-12h2V7h-2v2zm0 8h2v-2h-2v2zm-8 4h2V3h-2v18zm8-12h2v-2h-2v2zm0-8v2h2V3h-2zm-4 18h2v-2h-2v2zm0-16h2V3h-2v2zM3 21h2V3H3v18zm4 0h2v-2H7v2zm0-8h2v-2H7v2zm0-8h2V3H7v2z"
+  })
+});
+var RESET_SVG = /*#__PURE__*/_jsx("svg", {
+  viewBox: "0 0 24 24",
+  width: "16",
+  height: "16",
+  fill: "currentColor",
+  children: /*#__PURE__*/_jsx("path", {
+    d: "M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z"
+  })
+});
+var CLOSE_SVG = /*#__PURE__*/_jsx("svg", {
+  viewBox: "0 0 24 24",
+  width: "20",
+  height: "20",
+  fill: "currentColor",
+  children: /*#__PURE__*/_jsx("path", {
+    d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+  })
+});
+var PREV_SVG = /*#__PURE__*/_jsx("svg", {
+  viewBox: "0 0 24 24",
+  width: "20",
+  height: "20",
+  fill: "currentColor",
+  children: /*#__PURE__*/_jsx("path", {
+    d: "M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
+  })
+});
+var NEXT_SVG = /*#__PURE__*/_jsx("svg", {
+  viewBox: "0 0 24 24",
+  width: "20",
+  height: "20",
+  fill: "currentColor",
+  children: /*#__PURE__*/_jsx("path", {
+    d: "M8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z"
+  })
+});
+var DEFAULT_PREVIEW_STATE = {
+  visible: false,
+  scale: 1,
+  rotate: 0,
+  flipH: false,
+  flipV: false,
+  translateX: 0,
+  translateY: 0
+};
+var GroupContext = /*#__PURE__*/createContext(null);
+function PreviewOverlay(_ref) {
+  var _previewConfig$scaleS, _previewConfig$minSca, _previewConfig$maxSca, _previewConfig$movabl, _previewConfig$closeI;
+  var src = _ref.src,
+    previewConfig = _ref.previewConfig,
+    onClose = _ref.onClose,
+    groupInfo = _ref.groupInfo;
+  var _useState = useState(DEFAULT_PREVIEW_STATE),
+    _useState2 = _slicedToArray(_useState, 2),
+    state = _useState2[0],
+    setState = _useState2[1];
+  var dragRef = useRef(null);
+  var scaleStep = (_previewConfig$scaleS = previewConfig.scaleStep) !== null && _previewConfig$scaleS !== void 0 ? _previewConfig$scaleS : 0.5;
+  var minScale = (_previewConfig$minSca = previewConfig.minScale) !== null && _previewConfig$minSca !== void 0 ? _previewConfig$minSca : 1;
+  var maxScale = (_previewConfig$maxSca = previewConfig.maxScale) !== null && _previewConfig$maxSca !== void 0 ? _previewConfig$maxSca : 50;
+  var movable = (_previewConfig$movabl = previewConfig.movable) !== null && _previewConfig$movabl !== void 0 ? _previewConfig$movabl : true;
+  var resetTransform = useCallback(function () {
+    setState(function (s) {
+      return _objectSpread(_objectSpread({}, s), {}, {
+        scale: 1,
+        rotate: 0,
+        flipH: false,
+        flipV: false,
+        translateX: 0,
+        translateY: 0
+      });
+    });
+  }, []);
+  var zoomIn = useCallback(function () {
+    setState(function (s) {
+      return _objectSpread(_objectSpread({}, s), {}, {
+        scale: Math.min(s.scale + scaleStep, maxScale)
+      });
+    });
+  }, [scaleStep, maxScale]);
+  var zoomOut = useCallback(function () {
+    setState(function (s) {
+      return _objectSpread(_objectSpread({}, s), {}, {
+        scale: Math.max(s.scale - scaleStep, minScale)
+      });
+    });
+  }, [scaleStep, minScale]);
+  var rotateLeft = useCallback(function () {
+    setState(function (s) {
+      return _objectSpread(_objectSpread({}, s), {}, {
+        rotate: s.rotate - 90
+      });
+    });
+  }, []);
+  var rotateRight = useCallback(function () {
+    setState(function (s) {
+      return _objectSpread(_objectSpread({}, s), {}, {
+        rotate: s.rotate + 90
+      });
+    });
+  }, []);
+  var flipH = useCallback(function () {
+    setState(function (s) {
+      return _objectSpread(_objectSpread({}, s), {}, {
+        flipH: !s.flipH
+      });
+    });
+  }, []);
+  useEscapeKey(onClose);
+  var handleKeyDown = useCallback(function (e) {
+    if (e.key === 'ArrowLeft' && groupInfo) {
+      var prev = groupInfo.currentIndex - 1;
+      if (prev >= 0) {
+        groupInfo.onNavigate(prev);
+        resetTransform();
+      }
+    } else if (e.key === 'ArrowRight' && groupInfo) {
+      var next = groupInfo.currentIndex + 1;
+      if (next < groupInfo.urls.length) {
+        groupInfo.onNavigate(next);
+        resetTransform();
+      }
+    }
+  }, [groupInfo, resetTransform]);
+  useEffect(function () {
+    document.addEventListener('keydown', handleKeyDown);
+    document.body.style.overflow = 'hidden';
+    return function () {
+      document.removeEventListener('keydown', handleKeyDown);
+      document.body.style.overflow = '';
+    };
+  }, [handleKeyDown]);
+  var handleMaskClick = useCallback(function (e) {
+    if (e.target === e.currentTarget) onClose();
+  }, [onClose]);
+  var handleMouseDown = useCallback(function (e) {
+    if (!movable || state.scale <= 1) return;
+    e.preventDefault();
+    dragRef.current = {
+      startX: e.clientX,
+      startY: e.clientY,
+      originX: state.translateX,
+      originY: state.translateY
+    };
+    var handleMouseMove = function handleMouseMove(ev) {
+      if (!dragRef.current) return;
+      var dx = ev.clientX - dragRef.current.startX;
+      var dy = ev.clientY - dragRef.current.startY;
+      setState(function (s) {
+        return _objectSpread(_objectSpread({}, s), {}, {
+          translateX: dragRef.current.originX + dx,
+          translateY: dragRef.current.originY + dy
+        });
+      });
+    };
+    var handleMouseUp = function handleMouseUp() {
+      dragRef.current = null;
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('mouseup', handleMouseUp);
+    };
+    window.addEventListener('mousemove', handleMouseMove);
+    window.addEventListener('mouseup', handleMouseUp);
+  }, [movable, state.scale, state.translateX, state.translateY]);
+  var imgTransform = ["scale(".concat(state.flipH ? -state.scale : state.scale, ", ").concat(state.flipV ? -state.scale : state.scale, ")"), "rotate(".concat(state.rotate, "deg)"), "translate(".concat(state.translateX, "px, ").concat(state.translateY, "px)")].join(' ');
+  var defaultActions = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx("button", {
+      className: styles.previewAction,
+      onClick: zoomOut,
+      type: "button",
+      "aria-label": "Zoom out",
+      children: ZOOM_OUT_SVG
+    }), /*#__PURE__*/_jsx("button", {
+      className: styles.previewAction,
+      onClick: zoomIn,
+      type: "button",
+      "aria-label": "Zoom in",
+      children: ZOOM_IN_SVG
+    }), /*#__PURE__*/_jsx("button", {
+      className: styles.previewAction,
+      onClick: rotateLeft,
+      type: "button",
+      "aria-label": "Rotate left",
+      children: ROTATE_LEFT_SVG
+    }), /*#__PURE__*/_jsx("button", {
+      className: styles.previewAction,
+      onClick: rotateRight,
+      type: "button",
+      "aria-label": "Rotate right",
+      children: ROTATE_RIGHT_SVG
+    }), /*#__PURE__*/_jsx("button", {
+      className: styles.previewAction,
+      onClick: flipH,
+      type: "button",
+      "aria-label": "Flip horizontal",
+      children: FLIP_H_SVG
+    }), /*#__PURE__*/_jsx("button", {
+      className: styles.previewAction,
+      onClick: resetTransform,
+      type: "button",
+      "aria-label": "Reset",
+      children: RESET_SVG
+    })]
+  });
+  var actionsNode = previewConfig.actionsRender ? previewConfig.actionsRender(defaultActions, _objectSpread(_objectSpread({}, state), {}, {
+    src: src
+  })) : defaultActions;
+  return /*#__PURE__*/_jsxs("div", {
+    className: styles.previewRoot,
+    "data-open": "true",
+    "data-preview": true,
+    children: [/*#__PURE__*/_jsx("div", {
+      className: styles.previewMask,
+      onClick: handleMaskClick
+    }), groupInfo && groupInfo.urls.length > 1 && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx("button", {
+        className: [styles.previewArrow, styles.previewArrowLeft].join(' '),
+        onClick: function onClick() {
+          if (groupInfo.currentIndex > 0) {
+            groupInfo.onNavigate(groupInfo.currentIndex - 1);
+            resetTransform();
+          }
+        },
+        type: "button",
+        "aria-label": "Previous image",
+        style: {
+          opacity: groupInfo.currentIndex > 0 ? 1 : 0.3
+        },
+        children: PREV_SVG
+      }), /*#__PURE__*/_jsx("button", {
+        className: [styles.previewArrow, styles.previewArrowRight].join(' '),
+        onClick: function onClick() {
+          if (groupInfo.currentIndex < groupInfo.urls.length - 1) {
+            groupInfo.onNavigate(groupInfo.currentIndex + 1);
+            resetTransform();
+          }
+        },
+        type: "button",
+        "aria-label": "Next image",
+        style: {
+          opacity: groupInfo.currentIndex < groupInfo.urls.length - 1 ? 1 : 0.3
+        },
+        children: NEXT_SVG
+      })]
+    }), /*#__PURE__*/_jsx("div", {
+      className: styles.previewBody,
+      children: /*#__PURE__*/_jsx("img", {
+        className: styles.previewImg,
+        src: src,
+        alt: "Preview",
+        style: {
+          transform: imgTransform
+        },
+        onMouseDown: handleMouseDown,
+        draggable: false
+      })
+    }), /*#__PURE__*/_jsxs("div", {
+      className: styles.previewActions,
+      children: [actionsNode, groupInfo && groupInfo.urls.length > 1 && /*#__PURE__*/_jsxs("span", {
+        className: styles.previewCount,
+        children: [groupInfo.currentIndex + 1, " / ", groupInfo.urls.length]
+      })]
+    }), /*#__PURE__*/_jsx("button", {
+      className: styles.previewClose,
+      onClick: onClose,
+      type: "button",
+      "aria-label": "Close preview",
+      children: (_previewConfig$closeI = previewConfig.closeIcon) !== null && _previewConfig$closeI !== void 0 ? _previewConfig$closeI : CLOSE_SVG
+    })]
+  });
+}
+var Image = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var src = _ref2.src,
+    alt = _ref2.alt,
+    width = _ref2.width,
+    height = _ref2.height,
+    fallback = _ref2.fallback,
+    placeholder = _ref2.placeholder,
+    _ref2$preview = _ref2.preview,
+    preview = _ref2$preview === void 0 ? true : _ref2$preview,
+    onError = _ref2.onError,
+    classNamesProp = _ref2.classNames,
+    stylesProp = _ref2.styles,
+    className = _ref2.className,
+    style = _ref2.style,
+    children = _ref2.children;
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    loaded = _useState4[0],
+    setLoaded = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    error = _useState6[0],
+    setError = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    previewOpen = _useState8[0],
+    setPreviewOpen = _useState8[1];
+  var groupContext = useContext(GroupContext);
+  var registeredIndex = useRef(null);
+  var previewConfig = typeof preview === 'boolean' ? {
+    open: undefined
+  } : preview;
+  var isPreviewEnabled = typeof preview === 'boolean' ? preview : true;
+  var previewSrc = previewConfig.src || src || '';
+  useEffect(function () {
+    if (src && groupContext) {
+      registeredIndex.current = groupContext.register(src);
+    }
+  }, [src, groupContext]);
+  useEffect(function () {
+    setLoaded(false);
+    setError(false);
+  }, [src]);
+  var handleLoad = useCallback(function () {
+    setLoaded(true);
+  }, []);
+  var handleError = useCallback(function (e) {
+    setError(true);
+    onError === null || onError === void 0 || onError(e.nativeEvent);
+  }, [onError]);
+  var handlePreviewOpen = useCallback(function () {
+    if (!isPreviewEnabled) return;
+    if (groupContext && registeredIndex.current !== null) {
+      groupContext.preview(registeredIndex.current);
+    } else {
+      var _previewConfig$onChan;
+      setPreviewOpen(true);
+      (_previewConfig$onChan = previewConfig.onChange) === null || _previewConfig$onChan === void 0 || _previewConfig$onChan.call(previewConfig, true);
+    }
+  }, [isPreviewEnabled, groupContext, previewConfig]);
+  var handlePreviewClose = useCallback(function () {
+    var _previewConfig$onChan2;
+    setPreviewOpen(false);
+    (_previewConfig$onChan2 = previewConfig.onChange) === null || _previewConfig$onChan2 === void 0 || _previewConfig$onChan2.call(previewConfig, false);
+  }, [previewConfig]);
+  var rootSemantic = getSemantic('root', styles.root, classNamesProp, stylesProp);
+  var imageSemantic = getSemantic('image', styles.img, classNamesProp, stylesProp);
+  var coverSemantic = getSemantic('cover', styles.cover, classNamesProp, stylesProp);
+  var rootClass = [rootSemantic.className, className].filter(Boolean).join(' ');
+  var rootStyle = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, rootSemantic.style), style), width !== undefined ? {
+    width: width
+  } : {}), height !== undefined ? {
+    height: height
+  } : {});
+  var displaySrc = error && fallback ? fallback : src;
+  var isPlaceholderObject = _typeof(placeholder) === 'object' && placeholder !== null && 'progress' in placeholder;
+  var placeholderEl = isPlaceholderObject ? null : placeholder;
+  var progressConfig = isPlaceholderObject ? placeholder.progress : null;
+  var showPlaceholder = !loaded && !error && src;
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs("div", {
+      ref: ref,
+      className: rootClass,
+      style: rootStyle,
+      "data-image": true,
+      children: [showPlaceholder && /*#__PURE__*/_jsx("div", {
+        className: styles.placeholder,
+        "data-hidden": loaded || error ? 'true' : undefined,
+        children: progressConfig ? /*#__PURE__*/_jsx("div", {
+          className: styles.progressWrapper,
+          children: /*#__PURE__*/_jsx("div", {
+            className: styles.progressBar,
+            children: /*#__PURE__*/_jsx("div", {
+              className: styles.progressFill,
+              style: {
+                width: _typeof(progressConfig) === 'object' && 'percent' in progressConfig ? "".concat(progressConfig.percent, "%") : '0%'
+              }
+            })
+          })
+        }) : placeholderEl
+      }), displaySrc && /*#__PURE__*/_jsx("img", {
+        className: imageSemantic.className,
+        style: imageSemantic.style,
+        src: displaySrc,
+        alt: alt,
+        onLoad: handleLoad,
+        onError: handleError,
+        "data-loading": !loaded ? 'true' : undefined,
+        "data-loaded": loaded ? 'true' : undefined
+      }), isPreviewEnabled && loaded && /*#__PURE__*/_jsx("div", {
+        className: coverSemantic.className,
+        style: coverSemantic.style,
+        onClick: handlePreviewOpen,
+        "data-cover": true,
+        children: ZOOM_IN_SVG
+      }), children]
+    }), isPreviewEnabled && previewOpen && !groupContext && /*#__PURE__*/_jsx(PreviewOverlay, {
+      src: previewSrc,
+      previewConfig: previewConfig,
+      onClose: handlePreviewClose
+    })]
+  });
+});
+Image.displayName = 'Image';
+export { Image, PreviewOverlay, GroupContext };
+export default Image;

package/dist/esm/components/display/image/Image.module.css

@@ -0,0 +1,223 @@
+.root {
+  position: relative;
+  display: inline-block;
+  overflow: hidden;
+  border-radius: var(--nv-radius-small, 4px);
+}
+
+.img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: opacity var(--nv-motion-duration-normal, 0.25s) var(--nv-motion-easing-default, cubic-bezier(0.4, 0, 0.2, 1));
+}
+
+.img[data-loading='true'] {
+  opacity: 0;
+}
+
+.img[data-loaded='true'] {
+  opacity: 1;
+}
+
+.cover {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0);
+  color: var(--nv-color-text-inverse, #fff);
+  cursor: pointer;
+  transition: background var(--nv-motion-duration-fast, 0.15s) var(--nv-motion-easing-default, cubic-bezier(0.4, 0, 0.2, 1));
+  pointer-events: none;
+  opacity: 0;
+}
+
+.root:hover .cover {
+  background: rgba(0, 0, 0, 0.35);
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.placeholder {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--nv-color-bg-secondary, #f5f5f5);
+  color: var(--nv-color-text-tertiary, rgba(0, 0, 0, 0.25));
+  font-size: 24px;
+}
+
+.placeholder[data-hidden='true'] {
+  display: none;
+}
+
+.progressWrapper {
+  width: 60%;
+}
+
+.progressBar {
+  width: 100%;
+  height: 3px;
+  background: rgba(0, 0, 0, 0.06);
+  border-radius: 2px;
+  overflow: hidden;
+}
+
+.progressFill {
+  height: 100%;
+  background: var(--nv-color-primary, #1677ff);
+  border-radius: 2px;
+  transition: width var(--nv-motion-duration-fast, 0.15s) var(--nv-motion-easing-default, cubic-bezier(0.4, 0, 0.2, 1));
+}
+
+.previewRoot {
+  position: fixed;
+  inset: 0;
+  z-index: var(--nv-z-index-popup, 1000);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.previewRoot[data-open='false'] {
+  display: none;
+}
+
+.previewMask {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.85);
+  animation: fadeIn var(--nv-motion-duration-fast, 0.15s) var(--nv-motion-easing-default, cubic-bezier(0.4, 0, 0.2, 1));
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.previewBody {
+  position: relative;
+  z-index: 1;
+  max-width: 90vw;
+  max-height: 90vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  user-select: none;
+}
+
+.previewImg {
+  max-width: 90vw;
+  max-height: 80vh;
+  object-fit: contain;
+  transition: transform var(--nv-motion-duration-normal, 0.25s) var(--nv-motion-easing-default, cubic-bezier(0.4, 0, 0.2, 1));
+  cursor: grab;
+}
+
+.previewImg:active {
+  cursor: grabbing;
+}
+
+.previewActions {
+  position: absolute;
+  bottom: 24px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  background: rgba(0, 0, 0, 0.5);
+  border-radius: var(--nv-radius-middle, 8px);
+  backdrop-filter: blur(8px);
+}
+
+.previewAction {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: none;
+  border-radius: var(--nv-radius-small, 4px);
+  background: transparent;
+  color: var(--nv-color-text-inverse, #fff);
+  cursor: pointer;
+  font-size: 16px;
+  transition: background var(--nv-motion-duration-fast, 0.15s) var(--nv-motion-easing-default, cubic-bezier(0.4, 0, 0.2, 1));
+}
+
+.previewAction:hover {
+  background: rgba(255, 255, 255, 0.15);
+}
+
+.previewClose {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  z-index: 2;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border: none;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--nv-color-text-inverse, #fff);
+  cursor: pointer;
+  font-size: 20px;
+  transition: background var(--nv-motion-duration-fast, 0.15s) var(--nv-motion-easing-default, cubic-bezier(0.4, 0, 0.2, 1));
+}
+
+.previewClose:hover {
+  background: rgba(255, 255, 255, 0.25);
+}
+
+.previewArrow {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 2;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border: none;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--nv-color-text-inverse, #fff);
+  cursor: pointer;
+  font-size: 20px;
+  transition: background var(--nv-motion-duration-fast, 0.15s) var(--nv-motion-easing-default, cubic-bezier(0.4, 0, 0.2, 1));
+}
+
+.previewArrow:hover {
+  background: rgba(255, 255, 255, 0.25);
+}
+
+.previewArrowLeft {
+  left: 16px;
+}
+
+.previewArrowRight {
+  right: 16px;
+}
+
+.previewCount {
+  color: var(--nv-color-text-inverse, #fff);
+  font-size: var(--nv-font-size-sm, 12px);
+  padding: 0 8px;
+  white-space: nowrap;
+}