shineout 0.0.1-alpha.1

package/esm/icon/icon.js

@@ -0,0 +1,29 @@
+"use strict";
+
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = icon;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _base = require("@sheinx/base");
+var _shineoutStyle = require("@sheinx/shineout-style");
+var _jsxRuntime = require("react/jsx-runtime");
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var jssStyle = {
+  icon: _shineoutStyle.useIconStyle
+};
+function icon() {
+  var Comp = _base.makeIcon.apply(void 0, arguments);
+  var ShineoutIcon = function ShineoutIcon(props) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, _objectSpread(_objectSpread({}, props), {}, {
+      jssStyle: jssStyle
+    }));
+  };
+  ShineoutIcon.displayName = 'ShineoutIcon';
+  return ShineoutIcon;
+}

package/esm/icon/icon.type.d.ts

@@ -0,0 +1,2 @@
+import { IconCompProps as UiIconCompProps } from '@sheinx/base';
+export declare type IconCompProps = Omit<UiIconCompProps, 'jssStyle'>;

package/esm/icon/icon.type.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/esm/icon/index.d.ts

@@ -0,0 +1,2 @@
+import Icon from './icon';
+export default Icon;

package/esm/icon/index.js

@@ -0,0 +1,10 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _icon = _interopRequireDefault(require("./icon"));
+var _default = _icon.default;
+exports.default = _default;

package/esm/icon/interface.d.ts

@@ -0,0 +1 @@
+export type { IconCompProps as ComProps } from './icon.type';

package/esm/icon/interface.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/esm/image/__example__/s-001-base.d.ts

@@ -0,0 +1,9 @@
+/**
+ * cn - 基本用法
+ *    --基础 Image 用法
+ * en - Base
+ *    --Base Image
+ */
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+export default _default;

package/esm/image/__example__/s-001-base.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ = require("../..");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * cn - 基本用法
+ *    --基础 Image 用法
+ * en - Base
+ *    --Base Image
+ */
+var _default = function _default() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Image, {
+      fit: "fill",
+      width: 128,
+      height: 128,
+      target: "_modal",
+      src: "https://raw.githubusercontent.com/sheinsight/shineout-static/main/shineout-next/images/image/s-01.png",
+      href: "https://raw.githubusercontent.com/sheinsight/shineout-static/main/shineout-next/images/image/s-01.png"
+    })
+  });
+};
+exports.default = _default;

package/esm/image/__example__/s-002-status.d.ts

@@ -0,0 +1,9 @@
+/**
+ * cn - 不同状态
+ *    -- 图片在加载过程中，会有不同的状态。不同状态下的 Image 展现形式不同
+ * en - Status
+ *    -- Image has different status when loading.
+ */
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+export default _default;

package/esm/image/__example__/s-002-status.js

@@ -0,0 +1,38 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ = require("../..");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * cn - 不同状态
+ *    -- 图片在加载过程中，会有不同的状态。不同状态下的 Image 展现形式不同
+ * en - Status
+ *    -- Image has different status when loading.
+ */
+var _default = function _default() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    style: {
+      gap: 8,
+      display: 'flex'
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Image, {
+      fit: "fill",
+      width: 128,
+      height: 128,
+      target: "_modal",
+      src: "https://raw.githubusercontent.com/sheinsight/shineout-static/main/shineout-next/images/image/s-01.png",
+      href: "https://raw.githubusercontent.com/sheinsight/shineout-static/main/shineout-next/images/image/s-01.png"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Image, {
+      fit: "fill",
+      width: 128,
+      height: 128,
+      src: "error"
+    })]
+  });
+};
+exports.default = _default;

package/esm/image/__example__/s-003-custom.d.ts

@@ -0,0 +1,13 @@
+/**
+ * cn -
+ *    -- 支持自定义渲染不同状态下的内容：
+ *    -- 1、通过设置 `error` 属性自定义渲染加载失败时的内容
+ *    -- 2、通过设置 `placeholder` 属性用于自定义渲染加载中时的占位符内容
+ * en -
+ *    -- Custom rendering of content in different states:
+ *    -- 1. `error` is used to customize the content when loading fails.
+ *    -- 2. `placeholder` is used to customize the placeholder content when loading.
+ */
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+export default _default;

package/esm/image/__example__/s-003-custom.js

@@ -0,0 +1,93 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ = require("../..");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * cn -
+ *    -- 支持自定义渲染不同状态下的内容：
+ *    -- 1、通过设置 `error` 属性自定义渲染加载失败时的内容
+ *    -- 2、通过设置 `placeholder` 属性用于自定义渲染加载中时的占位符内容
+ * en -
+ *    -- Custom rendering of content in different states:
+ *    -- 1. `error` is used to customize the content when loading fails.
+ *    -- 2. `placeholder` is used to customize the placeholder content when loading.
+ */
+var _default = function _default() {
+  var renderIcon = function renderIcon() {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M6.67122 2C7.4076 2 8.00456 2.59695 8.00456 3.33333C8.00456 3.50839 7.97008 3.68173 7.90311 3.84347L7.42418 5L8.6665 6.91387L7.18965 9.80933L8.04044 12.2235C8.2852 12.918 7.92059 13.6794 7.22608 13.9242C7.08371 13.9744 6.93386 14 6.78291 14H1.99984C1.26346 14 0.666504 13.403 0.666504 12.6667V3.33333C0.666504 2.59695 1.26346 2 1.99984 2H6.67122ZM13.9998 2C14.7362 2 15.3332 2.59695 15.3332 3.33333V12.6667C15.3332 13.403 14.7362 14 13.9998 14H10.7806C10.2061 14 9.69625 13.6321 9.51521 13.0869L8.42684 9.80933L9.81843 6.66667L8.6665 5L9.10115 3.04409C9.23672 2.43404 9.7778 2 10.4027 2H13.9998ZM4.13693 9.53628L1.99984 11.664V12C1.99984 12.3682 2.29831 12.6667 2.6665 12.6667H5.84111C6.2093 12.6667 6.50778 12.3682 6.50778 12C6.50778 11.9245 6.49497 11.8496 6.46988 11.7784L5.86317 10.058L5.1383 9.48081C4.83888 9.24225 4.40817 9.26611 4.13693 9.53628ZM10.2945 8.88333L9.95912 9.64247C9.89202 9.79403 9.88378 9.96515 9.93601 10.1225L10.6292 12.2101C10.7197 12.4827 10.9747 12.6667 11.2619 12.6667H13.3332C13.7014 12.6667 13.9998 12.3682 13.9998 12V11.7053L10.2945 8.88333ZM13.3332 3.33333H10.9377C10.6251 3.33333 10.3545 3.55045 10.2868 3.85556L10.1579 4.43666C10.1177 4.61775 10.1548 4.8074 10.2602 4.96002L11.1278 6.21597C11.2597 6.40688 11.2829 6.65263 11.1889 6.86479L10.8145 7.70933L13.9998 10.1347V4C13.9998 3.63181 13.7014 3.33333 13.3332 3.33333ZM5.69471 3.33333H2.6665C2.29831 3.33333 1.99984 3.63181 1.99984 4V10.0933L4.13693 7.96532C4.40817 7.69516 4.83888 7.6713 5.1383 7.90986L6.03493 8.62424C6.0979 8.67442 6.16629 8.71346 6.23767 8.7416L6.95367 7.33688C7.06186 7.1247 7.04864 6.87093 6.919 6.67114L6.11482 5.43183C5.99536 5.24774 5.97415 5.01664 6.05812 4.81387L6.29761 4.23555C6.43549 3.90258 6.27735 3.52087 5.94438 3.38298C5.86522 3.3502 5.78038 3.33333 5.69471 3.33333ZM3.99984 4C4.73621 4 5.33317 4.59696 5.33317 5.33333C5.33317 6.0697 4.73621 6.66667 3.99984 6.66667C3.26347 6.66667 2.6665 6.0697 2.6665 5.33333C2.6665 4.59696 3.26347 4 3.99984 4ZM3.99984 5.14286C3.89463 5.14286 3.80936 5.22813 3.80936 5.33333C3.80936 5.43854 3.89463 5.52381 3.99984 5.52381C4.10504 5.52381 4.19031 5.43854 4.19031 5.33333C4.19031 5.22813 4.10504 5.14286 3.99984 5.14286Z",
+        fill: "#B3B7C1"
+      })
+    });
+  };
+  var renderError = function renderError() {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      style: {
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        flexDirection: 'column',
+        fontSize: 12,
+        color: '#666C7C'
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: renderIcon()
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: "Error"
+      })]
+    });
+  };
+  var renderPlaceholder = function renderPlaceholder() {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: {
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        fontSize: 12,
+        color: '#666C7C'
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: "\u75AF\u72C2\u52A0\u8F7D\u4E2D..."
+      })
+    });
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    style: {
+      gap: 8,
+      display: 'flex'
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Image, {
+      fit: "fill",
+      width: 128,
+      height: 128,
+      target: "_modal",
+      placeholder: renderPlaceholder(),
+      src: "https://raw.githubusercontent.com/sheinsight/shineout-static/main/shineout-next/images/image/s-01.png"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Image, {
+      fit: "fill",
+      width: 128,
+      height: 128,
+      src: "error",
+      error: renderError()
+    })]
+  });
+};
+exports.default = _default;

package/esm/image/__example__/s-004-shape.d.ts

@@ -0,0 +1,10 @@
+/**
+ * cn - 图片形状
+ *    -- Image 可以设置不同的形状
+ *    -- 内置三种不同的形状：圆形模式 circle、圆角模式 rounded、带边框模式 thumbnail
+ * en - Shape
+ *    -- Image can be set to different shapes.
+ */
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+export default _default;

package/esm/image/__example__/s-004-shape.js

@@ -0,0 +1,45 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ = require("../..");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * cn - 图片形状
+ *    -- Image 可以设置不同的形状
+ *    -- 内置三种不同的形状：圆形模式 circle、圆角模式 rounded、带边框模式 thumbnail
+ * en - Shape
+ *    -- Image can be set to different shapes.
+ */
+var _default = function _default() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    style: {
+      gap: 8,
+      display: 'flex'
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Image, {
+      shape: "rounded",
+      fit: "fill",
+      width: 128,
+      height: 128,
+      src: "https://raw.githubusercontent.com/sheinsight/shineout-static/main/shineout-next/images/image/s-01.png"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Image, {
+      shape: "circle",
+      fit: "fill",
+      width: 128,
+      height: 128,
+      src: "https://raw.githubusercontent.com/sheinsight/shineout-static/main/shineout-next/images/image/s-01.png"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Image, {
+      shape: "thumbnail",
+      fit: "fill",
+      width: 128,
+      height: 128,
+      src: "https://raw.githubusercontent.com/sheinsight/shineout-static/main/shineout-next/images/image/s-01.png"
+    })]
+  });
+};
+exports.default = _default;

package/esm/image/__example__/s-005-fit.d.ts

@@ -0,0 +1,11 @@
+/**
+ * cn - 填充方式
+ *    -- Image 四种不同的图片填充方式：
+ *    -- fill 填充整个容器、center 剧中、fit 原图、stretch 拉伸
+ * en - Fit
+ *    -- Image has four different fill modes:
+ *    -- fill, center, fit, stretch.
+ */
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+export default _default;

package/esm/image/__example__/s-005-fit.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.array.map.js");
+var _react = _interopRequireDefault(require("react"));
+var _ = require("../..");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * cn - 填充方式
+ *    -- Image 四种不同的图片填充方式：
+ *    -- fill 填充整个容器、center 剧中、fit 原图、stretch 拉伸
+ * en - Fit
+ *    -- Image has four different fill modes:
+ *    -- fill, center, fit, stretch.
+ */
+var _default = function _default() {
+  var fit = ['fill', 'center', 'fit', 'stretch'];
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: {
+      gap: 8,
+      display: 'flex'
+    },
+    children: fit.map(function (item, index) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        style: {
+          display: 'flex',
+          flexDirection: 'column'
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Image, {
+          fit: item,
+          width: 128,
+          height: 128,
+          src: "https://raw.githubusercontent.com/sheinsight/shineout-static/main/shineout-next/images/image/s-01.png"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          style: {
+            textAlign: 'center',
+            color: '#141737',
+            fontSize: 12,
+            marginTop: 5
+          },
+          children: item
+        })]
+      }, index);
+    })
+  });
+};
+exports.default = _default;

package/esm/image/__example__/s-006-target.d.ts

@@ -0,0 +1,10 @@
+/**
+ * cn - 打开方式
+ *    -- Image 通过配置 `target` 属性实现四种打开方式：
+ *    -- _modal 通过弹层打开预览、_blank 通过新窗口打开预览、_self 通过当前窗口打开预览、_download 下载图片
+ * en - Target
+ *    -- Image has four open modes: _modal open preview through layer, _blank open preview through new window, _self open preview through current window, _download download image.
+ */
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+export default _default;

package/esm/image/__example__/s-006-target.js

@@ -0,0 +1,58 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.array.map.js");
+var _react = _interopRequireDefault(require("react"));
+var _ = require("../..");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * cn - 打开方式
+ *    -- Image 通过配置 `target` 属性实现四种打开方式：
+ *    -- _modal 通过弹层打开预览、_blank 通过新窗口打开预览、_self 通过当前窗口打开预览、_download 下载图片
+ * en - Target
+ *    -- Image has four open modes: _modal open preview through layer, _blank open preview through new window, _self open preview through current window, _download download image.
+ */
+var _default = function _default() {
+  var images = [{
+    src: 'https://raw.githubusercontent.com/sheinsight/shineout-static/main/shineout-next/images/image/s-01.png',
+    target: '_modal'
+  }, {
+    src: 'https://raw.githubusercontent.com/sheinsight/shineout-static/main/shineout-next/images/image/s-01.png',
+    target: '_blank'
+  }, {
+    src: 'https://raw.githubusercontent.com/sheinsight/shineout-static/main/shineout-next/images/image/s-01.png',
+    target: '_self'
+  }, {
+    src: 'static/image/s-01.png',
+    target: '_download'
+  }];
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: {
+      gap: 8,
+      display: 'flex'
+    },
+    children: images.map(function (item, index) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Image, {
+          fit: "fill",
+          width: 128,
+          height: 128,
+          target: item.target,
+          src: item.src,
+          href: item.src
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          style: {
+            fontSize: 12,
+            textAlign: 'center'
+          },
+          children: item.target
+        })]
+      }, index);
+    })
+  });
+};
+exports.default = _default;

package/esm/image/__example__/s-007-group-1.d.ts

@@ -0,0 +1,13 @@
+/**
+ * cn - 图片组
+ *    -- Image 支持一组图片的展示
+ *    -- 通过设置 `pile` 属性折叠图片，通过设置 `showCount` 展示图片数量
+ *    -- 注意，showCount 属性仅在 pile 属性为 true 时生效。开启 pile 属性后，图片组将默认开启 _modal 模式预览
+ * en - Group
+ *    -- Image supports a group of images.
+ *    -- Set the `pile` property to fold the images, and set the `showCount` property to show the number of images.
+ *    -- Note that the showCount property only takes effect when the pile property is true. After the pile property is turned on, the image group will default to preview in _modal mode.
+ */
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+export default _default;

package/esm/image/__example__/s-007-group-1.js

@@ -0,0 +1,60 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.array.map.js");
+var _react = _interopRequireDefault(require("react"));
+var _ = require("../..");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * cn - 图片组
+ *    -- Image 支持一组图片的展示
+ *    -- 通过设置 `pile` 属性折叠图片，通过设置 `showCount` 展示图片数量
+ *    -- 注意，showCount 属性仅在 pile 属性为 true 时生效。开启 pile 属性后，图片组将默认开启 _modal 模式预览
+ * en - Group
+ *    -- Image supports a group of images.
+ *    -- Set the `pile` property to fold the images, and set the `showCount` property to show the number of images.
+ *    -- Note that the showCount property only takes effect when the pile property is true. After the pile property is turned on, the image group will default to preview in _modal mode.
+ */
+var _default = function _default() {
+  var images = ['https://raw.githubusercontent.com/sheinsight/shineout-static/main/shineout-next/images/image/s-01.png', 'https://raw.githubusercontent.com/sheinsight/shineout-static/main/shineout-next/images/image/s-02.png', 'https://raw.githubusercontent.com/sheinsight/shineout-static/main/shineout-next/images/image/s-03.png', 'https://raw.githubusercontent.com/sheinsight/shineout-static/main/shineout-next/images/image/s-04.png', 'https://raw.githubusercontent.com/sheinsight/shineout-static/main/shineout-next/images/image/s-05.png'];
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    style: {
+      gap: 16,
+      width: '100%',
+      display: 'flex'
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Image.Group, {
+      fit: "fill",
+      target: "_modal",
+      pile: true,
+      lazy: true,
+      children: images.map(function (item, index) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Image, {
+          width: 128,
+          height: 128,
+          src: item,
+          href: item
+        }, index);
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Image.Group, {
+      fit: "fill",
+      target: "_modal",
+      pile: true,
+      showCount: true,
+      lazy: true,
+      children: images.map(function (item, index) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Image, {
+          width: 128,
+          height: 128,
+          src: item,
+          href: item
+        }, index);
+      })
+    })]
+  });
+};
+exports.default = _default;

package/esm/image/__example__/s-007-group-2.d.ts

@@ -0,0 +1,9 @@
+/**
+ * cn -
+ *    -- Image 支持平铺展示一组图片
+ * en -
+ *    -- Image supports tiled display of a group of images.
+ */
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+export default _default;

package/esm/image/__example__/s-007-group-2.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.array.map.js");
+var _react = _interopRequireDefault(require("react"));
+var _ = require("../..");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * cn -
+ *    -- Image 支持平铺展示一组图片
+ * en -
+ *    -- Image supports tiled display of a group of images.
+ */
+var _default = function _default() {
+  var images = ['https://raw.githubusercontent.com/sheinsight/shineout-static/main/shineout-next/images/image/s-01.png', 'https://raw.githubusercontent.com/sheinsight/shineout-static/main/shineout-next/images/image/s-02.png', 'https://raw.githubusercontent.com/sheinsight/shineout-static/main/shineout-next/images/image/s-03.png', 'https://raw.githubusercontent.com/sheinsight/shineout-static/main/shineout-next/images/image/s-04.png', 'https://raw.githubusercontent.com/sheinsight/shineout-static/main/shineout-next/images/image/s-05.png'];
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: {
+      gap: 8,
+      display: 'flex'
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Image.Group, {
+      fit: "fill",
+      target: "_modal",
+      children: images.map(function (item, index) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Image, {
+          width: 128,
+          height: 128,
+          src: item,
+          href: item
+        }, index);
+      })
+    })
+  });
+};
+exports.default = _default;

package/esm/image/__example__/s-008-lazy-1.d.ts

@@ -0,0 +1,9 @@
+/**
+ * cn - 懒加载
+ *    -- Image 通过配置 `lazy` 属性开启懒加载模式
+ * en - Lazy
+ *    -- Image enables lazy loading mode by configuring the `lazy` property.
+ */
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+export default _default;

package/esm/image/__example__/s-008-lazy-1.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.array.map.js");
+var _react = _interopRequireDefault(require("react"));
+var _ = require("../..");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * cn - 懒加载
+ *    -- Image 通过配置 `lazy` 属性开启懒加载模式
+ * en - Lazy
+ *    -- Image enables lazy loading mode by configuring the `lazy` property.
+ */
+var _default = function _default() {
+  var images = [{
+    src: 'https://raw.githubusercontent.com/sheinsight/shineout-static/main/shineout-next/images/image/s-01.png',
+    target: '_modal'
+  }, {
+    src: 'https://raw.githubusercontent.com/sheinsight/shineout-static/main/shineout-next/images/image/s-02.png',
+    target: '_blank'
+  }, {
+    src: 'https://raw.githubusercontent.com/sheinsight/shineout-static/main/shineout-next/images/image/s-03.png',
+    target: '_self'
+  }, {
+    src: 'https://raw.githubusercontent.com/sheinsight/shineout-static/main/shineout-next/images/image/s-04.png',
+    target: '_download'
+  }];
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: images.map(function (item, index) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Image, {
+        lazy: true,
+        fit: "fill",
+        width: 845,
+        height: 528,
+        src: item.src
+      }, index);
+    })
+  });
+};
+exports.default = _default;

package/esm/image/__example__/s-008-lazy-2.d.ts

@@ -0,0 +1,9 @@
+/**
+ * cn -
+ *    -- 通过配置 `container` 对指定容器下的 Image 进行懒加载
+ * en -
+ *    -- Set `container` to lazy load Image in the specified container.
+ */
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+export default _default;