@arco-design/mobile-react 2.28.2 → 2.29.0

package/esm/skeleton/style/index.less

@@ -0,0 +1,147 @@
+@import '../../../style/mixin.less';
+
+.@{prefix}-skeleton {
+    position: relative;
+    .use-var(color, skeleton-gradient-animation-color);
+}
+
+.@{prefix}-skeleton-title {
+    .use-var(height, skeleton-title-height);
+}
+
+.@{prefix}-skeleton-paragraph {
+    &-line {
+        width: 100%;
+        .use-var(height, skeleton-paragraph-height);
+    }
+
+    &-line + &-line {
+        .use-var(margin-top, skeleton-paragraph-margin-top);
+    }
+}
+
+.@{prefix}-skeleton-avatar.@{prefix}-skeleton-item {
+    .use-var(width, skeleton-avatar-size);
+    .use-var(height, skeleton-avatar-size);
+    border-radius: 100%;
+    transform: translateZ(0);
+}
+
+.@{prefix}-skeleton-content {
+    width: 100%;
+
+    .@{prefix}-skeleton-title + .@{prefix}-skeleton-paragraph {
+        .use-var(margin-top, skeleton-large-gutter);
+    }
+}
+
+.@{prefix}-skeleton-with-avatar {
+    display: flex;
+    align-items: flex-start;
+
+    .@{prefix}-skeleton-avatar {
+        flex: none;
+    }
+
+    .@{prefix}-skeleton-content {
+        .@{prefix}-skeleton-title {
+            .use-var(margin-top, skeleton-medium-gutter);
+        }
+    }
+
+    .@{prefix}-skeleton-avatar + .@{prefix}-skeleton-content {
+        .use-var-with-rtl(margin-left, skeleton-medium-gutter);
+    }
+}
+
+.@{prefix}-skeleton-grid {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+
+    &-item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+    &-icon {
+        .use-var(width, skeleton-grid-icon-size);
+        .use-var(height, skeleton-grid-icon-size);
+    }
+    &-text {
+        .use-var(margin-top, skeleton-medium-gutter);
+        .use-var(width, skeleton-grid-text-width);
+        .use-var(height, skeleton-grid-text-height);
+    }
+}
+
+.@{prefix}-skeleton-node {
+    display: inline-block;
+}
+
+.@{prefix}-skeleton-item {
+    position: relative;
+    overflow: hidden;
+    .use-var(border-radius, skeleton-border-radius);
+    .use-var(background-color, skeleton-background-color);
+}
+
+.@{prefix}-skeleton-animation-item {
+    position: absolute;
+    width: 100vw;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background-image: linear-gradient(
+        90deg,
+        rgba(255, 255, 255, 0) 35%,
+        currentColor 50%,
+        rgba(255, 255, 255, 0) 65%
+    );
+    transform-origin: top left;
+    animation-name: skeleton-gradient;
+    animation-iteration-count: infinite;
+    .use-var(animation-timing-function, skeleton-gradient-animation-timing-function);
+    .use-var(animation-duration, skeleton-gradient-animation-duration);
+    [dir="rtl"] & {
+        animation-name: skeleton-gradient-reverse;
+    }
+}
+.@{prefix}-skeleton-animation-breath {
+    animation: skeleton-breath linear infinite;
+    .use-var(animation-duration, skeleton-breath-animation-duration);
+}
+
+@keyframes skeleton-gradient {
+    0% {
+        transform: translateX(-65%) skewX(-45deg);
+    }
+
+    100% {
+        transform: translateX(135%) skewX(-45deg);
+    }
+}
+
+@keyframes skeleton-gradient-reverse {
+    0% {
+        transform: translateX(65%) skewX(45deg);
+    }
+
+    100% {
+        transform: translateX(-135%) skewX(45deg);
+    }
+}
+
+@keyframes skeleton-breath {
+    0% {
+        opacity: 1;
+    }
+
+    50% {
+        .use-var(opacity, skeleton-breath-opacity);
+    }
+
+    100% {
+        opacity: 1;
+    }
+}

package/esm/skeleton/type.d.ts

@@ -0,0 +1,104 @@
+/// <reference types="react" />
+import { BaseProps, SimpleBaseProps } from '../_helpers';
+export interface SkeletonProps extends SimpleBaseProps {
+    /**
+     * 是否显示标题占位图
+     * @en Show title placeholder
+     * @default true
+     */
+    title?: boolean | SkeletonTitleProps;
+    /**
+     * 是否显示段落占位图
+     * @en Show paragraph placeholder
+     * @default true
+     */
+    paragraph?: boolean | SkeletonParagraphProps;
+    /**
+     * 是否显示头像占位图
+     * @en Show Avatar placeholder
+     * @default false
+     */
+    avatar?: boolean | SkeletonAvatarProps;
+    /**
+     * 是否显示金刚位占位图（如该参数非空时，默认展示四列金刚位，且不展示标题/段落/头像占位符）
+     * @en Show Grid placeholder. When it's value is present, the paragraph, avatar or title placeholder will not be displayed, and four columns will be displayed by default
+     * @default false
+     */
+    grid?: boolean | SkeletonGridProps;
+    /**
+     * 是否展示动画效果
+     * @en Show loading effect
+     * @default true
+     */
+    showAnimation?: boolean;
+    /**
+     * 加载动画效果，可选“扫光”、“呼吸”两种效果
+     * @en Animation of loading effect, 'gradient' and 'breath' effects are optional
+     * @default "gradient"
+     */
+    animation?: 'gradient' | 'breath';
+    /**
+     * 扫光动效高光颜色
+     * @en Highlight color of gradient animation
+     * @default "rgba(0, 0, 0, 0.04)"
+     */
+    animationGradientColor?: string;
+    /**
+     * 占位块背景色
+     * @en Background color of skeleton item
+     * @default "#F7F8FA"
+     */
+    backgroundColor?: string;
+    /**
+     * 子元素
+     * @en Children element
+     * @default null
+     */
+    children?: React.ReactNode;
+}
+export interface SkeletonTitleProps extends SimpleBaseProps {
+    /**
+     * 标题占位图宽度
+     * @en The width of title
+     * @default "40%"
+     */
+    width?: number | string;
+}
+export interface SkeletonParagraphProps extends SimpleBaseProps {
+    /**
+     * 段落占位图的行数
+     * @en Number of lines for paragraph
+     * @default 3
+     */
+    rows?: number;
+    /**
+     * 段落占位图宽度，若为数组格式对应每行宽度，否则表示最后一行的宽度
+     * @en The width of paragraph. If width is an Array, it corresponds to the width of each line, otherwise it indicates the width of the last line
+     * @default "60%"
+     */
+    width?: number | string | Array<number | string>;
+}
+export interface SkeletonAvatarProps extends SimpleBaseProps {
+}
+export interface SkeletonGridProps extends SimpleBaseProps {
+    /**
+     * 金刚位列数
+     * @en columns of grid
+     * @default 4
+     */
+    columns?: number;
+}
+export interface SkeletonNodeProps extends BaseProps {
+}
+export interface SkeletonRef {
+    /**
+     * 最外层 DOM 元素
+     * @en The outer DOM element of the component
+     */
+    dom: HTMLDivElement | null;
+}
+export interface SkeletonContextParams {
+    backgroundColor?: string;
+    showAnimation: boolean;
+    animation: SkeletonProps['animation'];
+}

package/esm/skeleton/type.js

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

package/esm/style.d.ts

@@ -44,6 +44,7 @@ import './pull-refresh/style';
 import './radio/style';
 import './rate/style';
 import './search-bar/style';
+import './skeleton/style';
 import './show-monitor/style';
 import './slider/style';
 import './stepper/style';

package/esm/style.js

@@ -44,6 +44,7 @@ import './pull-refresh/style';
 import './radio/style';
 import './rate/style';
 import './search-bar/style';
+import './skeleton/style';
 import './show-monitor/style';
 import './slider/style';
 import './stepper/style';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@arco-design/mobile-react",
-    "version": "2.28.2",
+    "version": "2.29.0",
     "description": "",
     "main": "cjs/index.js",
     "module": "esm/index.js",
@@ -15,7 +15,7 @@
     "author": "taoyiyue@bytedance.com",
     "license": "ISC",
     "dependencies": {
-        "@arco-design/mobile-utils": "2.16.2",
+        "@arco-design/mobile-utils": "2.16.3",
         "@arco-design/transformable": "^1.0.0",
         "lodash.throttle": "^4.1.1",
         "resize-observer-polyfill": "^1.5.1"
@@ -49,5 +49,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "f923a5d573d8af95e6b158614f8e7d8184afc481"
+    "gitHead": "8fbc59117b0d240f4faeee45daca1489803ab78a"
 }

package/tokens/app/arcodesign/default/css-variables.less

@@ -793,4 +793,20 @@
     --divider-right-width: ~`pxtorem(28)`;
     --divider-content-padding: ~`pxtorem(12)`;
     --divider-padding: ~`pxtorem(16)`;
+    --skeleton-border-radius: ~`pxtorem(0)`;
+    --skeleton-background-color: #F2F3F5;
+    --skeleton-gradient-animation-color: rgba(255, 255, 255, 0.6);
+    --skeleton-breath-opacity: 0.4;
+    --skeleton-gradient-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
+    --skeleton-gradient-animation-duration: 1.5s;
+    --skeleton-breath-animation-duration: 1.5s;
+    --skeleton-title-height: ~`pxtorem(16)`;
+    --skeleton-paragraph-height: ~`pxtorem(16)`;
+    --skeleton-paragraph-margin-top: ~`pxtorem(12)`;
+    --skeleton-avatar-size: ~`pxtorem(32)`;
+    --skeleton-grid-icon-size: ~`pxtorem(32)`;
+    --skeleton-grid-text-width: ~`pxtorem(64)`;
+    --skeleton-grid-text-height: ~`pxtorem(16)`;
+    --skeleton-medium-gutter: ~`pxtorem(8)`;
+    --skeleton-large-gutter: ~`pxtorem(20)`;
 }

package/tokens/app/arcodesign/default/index.d.ts

@@ -792,6 +792,22 @@ export interface ArcodesignToken extends Record<string, string> {
     'divider-right-width': string;
     'divider-content-padding': string;
     'divider-padding': string;
+    'skeleton-border-radius': string;
+    'skeleton-background-color': string;
+    'skeleton-gradient-animation-color': string;
+    'skeleton-breath-opacity': string;
+    'skeleton-gradient-animation-timing-function': string;
+    'skeleton-gradient-animation-duration': string;
+    'skeleton-breath-animation-duration': string;
+    'skeleton-title-height': string;
+    'skeleton-paragraph-height': string;
+    'skeleton-paragraph-margin-top': string;
+    'skeleton-avatar-size': string;
+    'skeleton-grid-icon-size': string;
+    'skeleton-grid-text-width': string;
+    'skeleton-grid-text-height': string;
+    'skeleton-medium-gutter': string;
+    'skeleton-large-gutter': string;
 }
 declare const tokens: ArcodesignToken;
 export default tokens;

package/tokens/app/arcodesign/default/index.js

@@ -803,7 +803,23 @@ var tokens = {
   "divider-left-width": "0.56rem",
   "divider-right-width": "0.56rem",
   "divider-content-padding": "0.24rem",
-  "divider-padding": "0.32rem"
+  "divider-padding": "0.32rem",
+  "skeleton-border-radius": "0",
+  "skeleton-background-color": "#F2F3F5",
+  "skeleton-gradient-animation-color": "rgba(255, 255, 255, 0.6)",
+  "skeleton-breath-opacity": "0.4",
+  "skeleton-gradient-animation-timing-function": "cubic-bezier(0.42, 0, 0.58, 1)",
+  "skeleton-gradient-animation-duration": "1.5s",
+  "skeleton-breath-animation-duration": "1.5s",
+  "skeleton-title-height": "0.32rem",
+  "skeleton-paragraph-height": "0.32rem",
+  "skeleton-paragraph-margin-top": "0.24rem",
+  "skeleton-avatar-size": "0.64rem",
+  "skeleton-grid-icon-size": "0.64rem",
+  "skeleton-grid-text-width": "1.28rem",
+  "skeleton-grid-text-height": "0.32rem",
+  "skeleton-medium-gutter": "0.16rem",
+  "skeleton-large-gutter": "0.4rem"
 };
 var _default = tokens;
 exports["default"] = _default;

package/tokens/app/arcodesign/default/index.json

@@ -6629,6 +6629,196 @@
             "en": "Size of the rounded corners of the square SearchBar"
         }
     },
+    "skeletonAvatarSize": {
+        "cssKey": "skeleton-avatar-size",
+        "desc": "骨架屏头像大小",
+        "override": "",
+        "value": "~`pxtorem(32)`",
+        "jsValue": "@getRem@32",
+        "staticValue": "0.64rem",
+        "localeDesc": {
+            "ch": "骨架屏头像大小",
+            "en": "Skeleton avatar size"
+        }
+    },
+    "skeletonBackgroundColor": {
+        "cssKey": "skeleton-background-color",
+        "desc": "骨架屏元素背景色",
+        "override": "",
+        "value": "#F2F3F5",
+        "jsValue": "#F2F3F5",
+        "staticValue": "#F2F3F5",
+        "localeDesc": {
+            "ch": "骨架屏元素背景色",
+            "en": "Skeleton element background color"
+        }
+    },
+    "skeletonBorderRadius": {
+        "cssKey": "skeleton-border-radius",
+        "desc": "骨架屏元素圆角",
+        "override": "",
+        "value": "~`pxtorem(0)`",
+        "jsValue": "@getRem@0",
+        "staticValue": "0",
+        "localeDesc": {
+            "ch": "骨架屏元素圆角",
+            "en": "Skeleton element border radius"
+        }
+    },
+    "skeletonBreathAnimationDuration": {
+        "cssKey": "skeleton-breath-animation-duration",
+        "desc": "骨架屏呼吸动效时间",
+        "override": "",
+        "value": "1.5s",
+        "jsValue": "1.5s",
+        "staticValue": "1.5s",
+        "localeDesc": {
+            "ch": "骨架屏呼吸动效时间",
+            "en": "Skeleton element breath animation duration"
+        }
+    },
+    "skeletonBreathOpacity": {
+        "cssKey": "skeleton-breath-opacity",
+        "desc": "骨架屏呼吸动效透明度",
+        "override": "",
+        "value": "0.4",
+        "jsValue": "0.4",
+        "staticValue": "0.4",
+        "localeDesc": {
+            "ch": "骨架屏呼吸动效透明度",
+            "en": "Skeleton element breath animation opacity"
+        }
+    },
+    "skeletonGradientAnimationColor": {
+        "cssKey": "skeleton-gradient-animation-color",
+        "desc": "骨架屏扫光动效高亮色",
+        "override": "",
+        "value": "rgba(255, 255, 255, 0.6)",
+        "jsValue": "rgba(255, 255, 255, 0.6)",
+        "staticValue": "rgba(255, 255, 255, 0.6)",
+        "localeDesc": {
+            "ch": "骨架屏扫光动效高亮色",
+            "en": "Skeleton element gradient animation highlight color"
+        }
+    },
+    "skeletonGradientAnimationDuration": {
+        "cssKey": "skeleton-gradient-animation-duration",
+        "desc": "骨架屏扫光动效时间",
+        "override": "",
+        "value": "1.5s",
+        "jsValue": "1.5s",
+        "staticValue": "1.5s",
+        "localeDesc": {
+            "ch": "骨架屏扫光动效时间",
+            "en": "Skeleton element gradient animation duration"
+        }
+    },
+    "skeletonGradientAnimationTimingFunction": {
+        "cssKey": "skeleton-gradient-animation-timing-function",
+        "desc": "骨架屏扫光动效曲线",
+        "override": "",
+        "value": "cubic-bezier(0.42, 0, 0.58, 1)",
+        "jsValue": "cubic-bezier(0.42, 0, 0.58, 1)",
+        "staticValue": "cubic-bezier(0.42, 0, 0.58, 1)",
+        "localeDesc": {
+            "ch": "骨架屏扫光动效曲线",
+            "en": "Skeleton element gradient animation timing function"
+        }
+    },
+    "skeletonGridIconSize": {
+        "cssKey": "skeleton-grid-icon-size",
+        "desc": "骨架屏金刚位图标区宽度",
+        "override": "",
+        "value": "~`pxtorem(32)`",
+        "jsValue": "@getRem@32",
+        "staticValue": "0.64rem",
+        "localeDesc": {
+            "ch": "骨架屏金刚位图标区宽度",
+            "en": "Skeleton grid item icon width"
+        }
+    },
+    "skeletonGridTextHeight": {
+        "cssKey": "skeleton-grid-text-height",
+        "desc": "骨架屏金刚位文字区高度",
+        "override": "",
+        "value": "~`pxtorem(16)`",
+        "jsValue": "@getRem@16",
+        "staticValue": "0.32rem",
+        "localeDesc": {
+            "ch": "骨架屏金刚位文字区高度",
+            "en": "Skeleton grid item text height"
+        }
+    },
+    "skeletonGridTextWidth": {
+        "cssKey": "skeleton-grid-text-width",
+        "desc": "骨架屏金刚位文字区宽度",
+        "override": "",
+        "value": "~`pxtorem(64)`",
+        "jsValue": "@getRem@64",
+        "staticValue": "1.28rem",
+        "localeDesc": {
+            "ch": "骨架屏金刚位文字区宽度",
+            "en": "Skeleton grid item text width"
+        }
+    },
+    "skeletonLargeGutter": {
+        "cssKey": "skeleton-large-gutter",
+        "desc": "骨架屏元素外边距，大尺寸",
+        "override": "",
+        "value": "~`pxtorem(20)`",
+        "jsValue": "@getRem@20",
+        "staticValue": "0.4rem",
+        "localeDesc": {
+            "ch": "骨架屏元素外边距，大尺寸"
+        }
+    },
+    "skeletonMediumGutter": {
+        "cssKey": "skeleton-medium-gutter",
+        "desc": "骨架屏元素外边距，中尺寸",
+        "override": "",
+        "value": "~`pxtorem(8)`",
+        "jsValue": "@getRem@8",
+        "staticValue": "0.16rem",
+        "localeDesc": {
+            "ch": "骨架屏元素外边距，中尺寸"
+        }
+    },
+    "skeletonParagraphHeight": {
+        "cssKey": "skeleton-paragraph-height",
+        "desc": "骨架屏段落行高度",
+        "override": "",
+        "value": "~`pxtorem(16)`",
+        "jsValue": "@getRem@16",
+        "staticValue": "0.32rem",
+        "localeDesc": {
+            "ch": "骨架屏段落行高度",
+            "en": "Skeleton paragraph line height"
+        }
+    },
+    "skeletonParagraphMarginTop": {
+        "cssKey": "skeleton-paragraph-margin-top",
+        "desc": "骨架屏各段落行间距",
+        "override": "",
+        "value": "~`pxtorem(12)`",
+        "jsValue": "@getRem@12",
+        "staticValue": "0.24rem",
+        "localeDesc": {
+            "ch": "骨架屏各段落行间距",
+            "en": "Margin top between skeleton paragraph lines"
+        }
+    },
+    "skeletonTitleHeight": {
+        "cssKey": "skeleton-title-height",
+        "desc": "骨架屏标题高度",
+        "override": "",
+        "value": "~`pxtorem(16)`",
+        "jsValue": "@getRem@16",
+        "staticValue": "0.32rem",
+        "localeDesc": {
+            "ch": "骨架屏标题高度",
+            "en": "Skeleton title height"
+        }
+    },
     "sliderHasMarkPaddingBottom": {
         "cssKey": "slider-has-mark-padding-bottom",
         "desc": "slider 有标记时的底部内边距",

package/tokens/app/arcodesign/default/index.less

@@ -792,4 +792,20 @@
 @divider-right-width: ~`pxtorem(28)`;
 @divider-content-padding: ~`pxtorem(12)`;
 @divider-padding: ~`pxtorem(16)`;
+@skeleton-border-radius: ~`pxtorem(0)`;
+@skeleton-background-color: #F2F3F5;
+@skeleton-gradient-animation-color: rgba(255, 255, 255, 0.6);
+@skeleton-breath-opacity: 0.4;
+@skeleton-gradient-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
+@skeleton-gradient-animation-duration: 1.5s;
+@skeleton-breath-animation-duration: 1.5s;
+@skeleton-title-height: ~`pxtorem(16)`;
+@skeleton-paragraph-height: ~`pxtorem(16)`;
+@skeleton-paragraph-margin-top: ~`pxtorem(12)`;
+@skeleton-avatar-size: ~`pxtorem(32)`;
+@skeleton-grid-icon-size: ~`pxtorem(32)`;
+@skeleton-grid-text-width: ~`pxtorem(64)`;
+@skeleton-grid-text-height: ~`pxtorem(16)`;
+@skeleton-medium-gutter: ~`pxtorem(8)`;
+@skeleton-large-gutter: ~`pxtorem(20)`;
 

package/umd/grid/style/css/index.css

@@ -113,3 +113,7 @@
   display: none;
   /* Chrome Safari */
 }
+.arco-grid .arco-image-picker {
+  width: 100%;
+  /* 兼容grid和image-picker组合使用 */
+}

package/umd/grid/style/index.less

@@ -101,3 +101,9 @@
 .@{prefix}-grid.sliding::-webkit-scrollbar {
     display: none; /* Chrome Safari */
 }
+
+.@{prefix}-grid {
+    .@{prefix}-image-picker {
+        width: 100%; /* 兼容grid和image-picker组合使用 */
+    }
+}

package/umd/index.d.ts

@@ -43,6 +43,7 @@ export { default as PullRefresh } from './pull-refresh';
 export { default as Radio } from './radio';
 export { default as Rate } from './rate';
 export { default as SearchBar } from './search-bar';
+export { default as Skeleton } from './skeleton';
 export { default as ShowMonitor } from './show-monitor';
 export { default as Slider } from './slider';
 export { default as Stepper } from './stepper';

package/umd/index.js

@@ -1,22 +1,22 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "./tabs", "./sticky", "./load-more", "./cell", "./action-sheet", "./avatar", "./badge", "./button", "./carousel", "./checkbox", "./circle-progress", "./collapse", "./context-provider", "./count-down", "./date-picker", "./dialog", "./divider", "./dropdown", "./dropdown-menu", "./ellipsis", "./form", "./grid", "./image", "./image-picker", "./image-preview", "./index-bar", "./input", "./keyboard", "./loading", "./masking", "./nav-bar", "./notice-bar", "./notify", "./pagination", "./picker", "./picker-view", "./popover", "./popup", "./popup-swiper", "./portal", "./progress", "./pull-refresh", "./radio", "./rate", "./search-bar", "./show-monitor", "./slider", "./stepper", "./steps", "./swipe-action", "./swipe-load", "./switch", "./tab-bar", "./tag", "./textarea", "./toast", "./transition"], factory);
+    define(["exports", "./tabs", "./sticky", "./load-more", "./cell", "./action-sheet", "./avatar", "./badge", "./button", "./carousel", "./checkbox", "./circle-progress", "./collapse", "./context-provider", "./count-down", "./date-picker", "./dialog", "./divider", "./dropdown", "./dropdown-menu", "./ellipsis", "./form", "./grid", "./image", "./image-picker", "./image-preview", "./index-bar", "./input", "./keyboard", "./loading", "./masking", "./nav-bar", "./notice-bar", "./notify", "./pagination", "./picker", "./picker-view", "./popover", "./popup", "./popup-swiper", "./portal", "./progress", "./pull-refresh", "./radio", "./rate", "./search-bar", "./skeleton", "./show-monitor", "./slider", "./stepper", "./steps", "./swipe-action", "./swipe-load", "./switch", "./tab-bar", "./tag", "./textarea", "./toast", "./transition"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("./tabs"), require("./sticky"), require("./load-more"), require("./cell"), require("./action-sheet"), require("./avatar"), require("./badge"), require("./button"), require("./carousel"), require("./checkbox"), require("./circle-progress"), require("./collapse"), require("./context-provider"), require("./count-down"), require("./date-picker"), require("./dialog"), require("./divider"), require("./dropdown"), require("./dropdown-menu"), require("./ellipsis"), require("./form"), require("./grid"), require("./image"), require("./image-picker"), require("./image-preview"), require("./index-bar"), require("./input"), require("./keyboard"), require("./loading"), require("./masking"), require("./nav-bar"), require("./notice-bar"), require("./notify"), require("./pagination"), require("./picker"), require("./picker-view"), require("./popover"), require("./popup"), require("./popup-swiper"), require("./portal"), require("./progress"), require("./pull-refresh"), require("./radio"), require("./rate"), require("./search-bar"), require("./show-monitor"), require("./slider"), require("./stepper"), require("./steps"), require("./swipe-action"), require("./swipe-load"), require("./switch"), require("./tab-bar"), require("./tag"), require("./textarea"), require("./toast"), require("./transition"));
+    factory(exports, require("./tabs"), require("./sticky"), require("./load-more"), require("./cell"), require("./action-sheet"), require("./avatar"), require("./badge"), require("./button"), require("./carousel"), require("./checkbox"), require("./circle-progress"), require("./collapse"), require("./context-provider"), require("./count-down"), require("./date-picker"), require("./dialog"), require("./divider"), require("./dropdown"), require("./dropdown-menu"), require("./ellipsis"), require("./form"), require("./grid"), require("./image"), require("./image-picker"), require("./image-preview"), require("./index-bar"), require("./input"), require("./keyboard"), require("./loading"), require("./masking"), require("./nav-bar"), require("./notice-bar"), require("./notify"), require("./pagination"), require("./picker"), require("./picker-view"), require("./popover"), require("./popup"), require("./popup-swiper"), require("./portal"), require("./progress"), require("./pull-refresh"), require("./radio"), require("./rate"), require("./search-bar"), require("./skeleton"), require("./show-monitor"), require("./slider"), require("./stepper"), require("./steps"), require("./swipe-action"), require("./swipe-load"), require("./switch"), require("./tab-bar"), require("./tag"), require("./textarea"), require("./toast"), require("./transition"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.tabs, global.sticky, global.loadMore, global.cell, global.actionSheet, global.avatar, global.badge, global.button, global.carousel, global.checkbox, global.circleProgress, global.collapse, global.contextProvider, global.countDown, global.datePicker, global.dialog, global.divider, global.dropdown, global.dropdownMenu, global.ellipsis, global.form, global.grid, global.image, global.imagePicker, global.imagePreview, global.indexBar, global.input, global.keyboard, global.loading, global.masking, global.navBar, global.noticeBar, global.notify, global.pagination, global.picker, global.pickerView, global.popover, global.popup, global.popupSwiper, global.portal, global.progress, global.pullRefresh, global.radio, global.rate, global.searchBar, global.showMonitor, global.slider, global.stepper, global.steps, global.swipeAction, global.swipeLoad, global._switch, global.tabBar, global.tag, global.textarea, global.toast, global.transition);
+    factory(mod.exports, global.tabs, global.sticky, global.loadMore, global.cell, global.actionSheet, global.avatar, global.badge, global.button, global.carousel, global.checkbox, global.circleProgress, global.collapse, global.contextProvider, global.countDown, global.datePicker, global.dialog, global.divider, global.dropdown, global.dropdownMenu, global.ellipsis, global.form, global.grid, global.image, global.imagePicker, global.imagePreview, global.indexBar, global.input, global.keyboard, global.loading, global.masking, global.navBar, global.noticeBar, global.notify, global.pagination, global.picker, global.pickerView, global.popover, global.popup, global.popupSwiper, global.portal, global.progress, global.pullRefresh, global.radio, global.rate, global.searchBar, global.skeleton, global.showMonitor, global.slider, global.stepper, global.steps, global.swipeAction, global.swipeLoad, global._switch, global.tabBar, global.tag, global.textarea, global.toast, global.transition);
     global.index = mod.exports;
   }
-})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _tabs, _sticky, _loadMore, _cell, _actionSheet, _avatar, _badge, _button, _carousel, _checkbox, _circleProgress, _collapse, _contextProvider, _countDown, _datePicker, _dialog, _divider, _dropdown, _dropdownMenu, _ellipsis, _form, _grid, _image, _imagePicker, _imagePreview, _indexBar, _input, _keyboard, _loading, _masking, _navBar, _noticeBar, _notify, _pagination, _picker, _pickerView, _popover, _popup, _popupSwiper, _portal, _progress, _pullRefresh, _radio, _rate, _searchBar, _showMonitor, _slider, _stepper, _steps, _swipeAction, _swipeLoad, _switch, _tabBar, _tag, _textarea, _toast, _transition) {
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _tabs, _sticky, _loadMore, _cell, _actionSheet, _avatar, _badge, _button, _carousel, _checkbox, _circleProgress, _collapse, _contextProvider, _countDown, _datePicker, _dialog, _divider, _dropdown, _dropdownMenu, _ellipsis, _form, _grid, _image, _imagePicker, _imagePreview, _indexBar, _input, _keyboard, _loading, _masking, _navBar, _noticeBar, _notify, _pagination, _picker, _pickerView, _popover, _popup, _popupSwiper, _portal, _progress, _pullRefresh, _radio, _rate, _searchBar, _skeleton, _showMonitor, _slider, _stepper, _steps, _swipeAction, _swipeLoad, _switch, _tabBar, _tag, _textarea, _toast, _transition) {
   "use strict";
 
   var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
   _exports.__esModule = true;
-  _exports.Transition = _exports.Toast = _exports.Textarea = _exports.Tag = _exports.Tabs = _exports.TabBar = _exports.Switch = _exports.SwipeLoad = _exports.SwipeAction = _exports.Sticky = _exports.Steps = _exports.Stepper = _exports.Slider = _exports.ShowMonitor = _exports.SearchBar = _exports.Rate = _exports.Radio = _exports.PullRefresh = _exports.Progress = _exports.Portal = _exports.PopupSwiper = _exports.Popup = _exports.Popover = _exports.PickerView = _exports.Picker = _exports.Pagination = _exports.Notify = _exports.NoticeBar = _exports.NavBar = _exports.Masking = _exports.Loading = _exports.LoadMore = _exports.Keyboard = _exports.Input = _exports.IndexBar = _exports.ImagePreview = _exports.ImagePicker = _exports.Image = _exports.Grid = _exports.Form = _exports.Ellipsis = _exports.DropdownMenu = _exports.Dropdown = _exports.Divider = _exports.Dialog = _exports.DatePicker = _exports.CountDown = _exports.ContextProvider = _exports.Collapse = _exports.CircleProgress = _exports.Checkbox = _exports.Cell = _exports.Carousel = _exports.Button = _exports.Badge = _exports.Avatar = _exports.ActionSheet = void 0;
+  _exports.Transition = _exports.Toast = _exports.Textarea = _exports.Tag = _exports.Tabs = _exports.TabBar = _exports.Switch = _exports.SwipeLoad = _exports.SwipeAction = _exports.Sticky = _exports.Steps = _exports.Stepper = _exports.Slider = _exports.Skeleton = _exports.ShowMonitor = _exports.SearchBar = _exports.Rate = _exports.Radio = _exports.PullRefresh = _exports.Progress = _exports.Portal = _exports.PopupSwiper = _exports.Popup = _exports.Popover = _exports.PickerView = _exports.Picker = _exports.Pagination = _exports.Notify = _exports.NoticeBar = _exports.NavBar = _exports.Masking = _exports.Loading = _exports.LoadMore = _exports.Keyboard = _exports.Input = _exports.IndexBar = _exports.ImagePreview = _exports.ImagePicker = _exports.Image = _exports.Grid = _exports.Form = _exports.Ellipsis = _exports.DropdownMenu = _exports.Dropdown = _exports.Divider = _exports.Dialog = _exports.DatePicker = _exports.CountDown = _exports.ContextProvider = _exports.Collapse = _exports.CircleProgress = _exports.Checkbox = _exports.Cell = _exports.Carousel = _exports.Button = _exports.Badge = _exports.Avatar = _exports.ActionSheet = void 0;
   _tabs = _interopRequireDefault(_tabs);
   _exports.Tabs = _tabs.default;
   _sticky = _interopRequireDefault(_sticky);
@@ -107,6 +107,8 @@
   _exports.Rate = _rate.default;
   _searchBar = _interopRequireDefault(_searchBar);
   _exports.SearchBar = _searchBar.default;
+  _skeleton = _interopRequireDefault(_skeleton);
+  _exports.Skeleton = _skeleton.default;
   _showMonitor = _interopRequireDefault(_showMonitor);
   _exports.ShowMonitor = _showMonitor.default;
   _slider = _interopRequireDefault(_slider);