@arcblock/ux 2.9.23 → 2.9.24

package/es/Colors/themes/temp.js

@@ -25,6 +25,7 @@ const colors = {
   // border
   strokeBorderBase: 'rgba(229, 231, 235, 1)',
   strokeBorderStrong: 'rgba(209, 213, 219, 1)',
+  strokeSep: 'rgba(229, 231, 235, 1)',
   lineStep: 'rgba(18, 22, 24, 0.06)',
   lineBorderStrong: 'rgba(18, 22, 24, 0.12)',
   lineBorderBase: 'rgba(18, 22, 24, 0.06)',

package/es/Empty/index.js

@@ -1,9 +1,10 @@
 import PropTypes from 'prop-types';
+import { Box } from '@mui/material';
 import EmptyIcon from '@arcblock/icons/lib/EmptyIcon';
 import { styled } from '../Theme';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const Wrapper = styled('div')`
+const Wrapper = styled(Box)`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -45,7 +46,7 @@ function Empty({
         color
       },
       className: "empty-icon"
-    }), /*#__PURE__*/_jsx("div", {
+    }), /*#__PURE__*/_jsx(Box, {
       className: "empty-content",
       children: children
     })]

package/es/RelativeTime/index.js

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import dayjs from 'dayjs';
 import 'dayjs/locale/zh-cn';
-import Tooltip from '@mui/material/Tooltip';
+import { Tooltip } from '@mui/material';
 import localizedFormat from 'dayjs/plugin/localizedFormat';
 import utc from 'dayjs/plugin/utc';
 import timezone from 'dayjs/plugin/timezone';
@@ -41,6 +41,7 @@ export default function RelativeTime({
   to,
   type,
   tz,
+  relativeRange,
   ...rest
 }) {
   if (!value) {
@@ -51,18 +52,24 @@ export default function RelativeTime({
   if (tz) {
     datetime.tz(tz);
   }
+  const absoluteString = formatToDatetime(value, {
+    locale: localeOption,
+    tz
+  });
   let relativeString;
   if (from) {
     relativeString = datetime.from(from, withoutSuffix);
   } else if (to) {
     relativeString = datetime.to(to, withoutSuffix);
-  } else {
+  } else if (relativeRange) {
+    const diffTime = datetime.diff(dayjs());
+    if (Math.abs(diffTime) > relativeRange) {
+      relativeString = absoluteString;
+    }
+  }
+  if (!relativeString) {
     relativeString = datetime.fromNow(withoutSuffix);
   }
-  const absoluteString = formatToDatetime(value, {
-    locale: localeOption,
-    tz
-  });
   let innerContent = relativeString;
   let popContent = absoluteString;
   if (type === 'absolute') {
@@ -86,7 +93,8 @@ RelativeTime.propTypes = {
   from: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   to: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   type: PropTypes.oneOf(['relative', 'absolute']),
-  tz: PropTypes.string
+  tz: PropTypes.string,
+  relativeRange: PropTypes.number
 };
 RelativeTime.defaultProps = {
   locale: 'en',
@@ -94,5 +102,6 @@ RelativeTime.defaultProps = {
   from: '',
   to: '',
   type: 'relative',
-  tz: undefined
+  tz: undefined,
+  relativeRange: undefined
 };

package/es/Success/index.js

@@ -0,0 +1,175 @@
+import PropTypes from 'prop-types';
+import { Box } from '@mui/material';
+
+// FIXME: @zhanghan 目前无法适配各种 size，后续优化
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function Success({
+  size,
+  backgroundColor,
+  borderWidth
+}) {
+  const contentSize = size - borderWidth * 2;
+  return /*#__PURE__*/_jsxs(Box, {
+    className: "check-icon",
+    sx: {
+      width: contentSize,
+      height: contentSize,
+      position: 'relative',
+      borderRadius: '100%',
+      '&, *, *::before, *::after': {
+        boxSizing: 'content-box !important'
+      },
+      border: theme => `${borderWidth}px solid ${theme.palette.success.main}`,
+      '&::before, &::after': {
+        content: '""',
+        height: '125%',
+        position: 'absolute',
+        background: backgroundColor,
+        transform: 'rotate(-45deg)'
+      },
+      '&::before': {
+        top: `${borderWidth / 2 + 1}px`,
+        left: `-${borderWidth / 2}px`,
+        width: `calc(32.5% + ${borderWidth}px)`,
+        transformOrigin: '100% 50%',
+        borderRadius: '100% 0 0 100%'
+      },
+      '&::after': {
+        top: 0,
+        left: '37.5%',
+        width: `calc(70% + ${borderWidth}px)`,
+        transformOrigin: '0 50%',
+        borderRadius: '0 100% 100% 0',
+        animation: 'rotate-circle 4.25s ease-in'
+      },
+      '.icon-line': {
+        height: `${borderWidth + 1}px`,
+        backgroundColor: theme => theme.palette.success.main,
+        display: 'block',
+        borderRadius: '100vw',
+        position: 'absolute',
+        zIndex: 10
+      },
+      '@keyframes rotate-circle': {
+        '0%': {
+          transform: 'rotate(-45deg)'
+        },
+        '5%': {
+          transform: 'rotate(-45deg)'
+        },
+        '12%': {
+          transform: 'rotate(-405deg)'
+        },
+        '100%': {
+          transform: 'rotate(-405deg)'
+        }
+      }
+    },
+    children: [/*#__PURE__*/_jsx(Box, {
+      component: "span",
+      className: "icon-line line-tip",
+      sx: {
+        top: '57.5%',
+        left: '17.5%',
+        width: '31.25%',
+        transform: 'rotate(45deg)',
+        animation: 'icon-line-tip 0.75s',
+        '@keyframes icon-line-tip': {
+          '0%': {
+            width: '0',
+            left: '1px',
+            top: '23.75%'
+          },
+          '54%': {
+            width: '0',
+            left: '1px',
+            top: '23.75%'
+          },
+          '70%': {
+            width: '62.5%',
+            left: '-10%',
+            top: '46.25%'
+          },
+          '84%': {
+            width: '21.25%',
+            left: '26.25%',
+            top: '60%'
+          },
+          '100%': {
+            width: '31.25',
+            left: '17.5%',
+            top: '56.25%'
+          }
+        }
+      }
+    }), /*#__PURE__*/_jsx(Box, {
+      component: "span",
+      className: "icon-line line-long",
+      sx: {
+        top: '47.5%',
+        right: '10%',
+        width: '58.75%',
+        transform: 'rotate(-45deg)',
+        animation: 'icon-line-long 0.75s',
+        '@keyframes icon-line-long': {
+          '0%': {
+            width: '0',
+            right: '57.5%',
+            top: '67.5%'
+          },
+          '65%': {
+            width: '0',
+            right: '57.5%',
+            top: '67.5%'
+          },
+          '84%': {
+            width: '68.75%',
+            right: '0px',
+            top: '43.75%'
+          },
+          '100%': {
+            width: '58.75%',
+            right: '10%',
+            top: '47.5%'
+          }
+        }
+      }
+    }), /*#__PURE__*/_jsx(Box, {
+      className: "icon-circle",
+      sx: {
+        top: `-${borderWidth}px`,
+        left: `-${borderWidth}px`,
+        zIndex: 10,
+        width: contentSize,
+        height: contentSize,
+        borderRadius: '100%',
+        position: 'absolute',
+        boxSizing: 'contentBox',
+        border: `${borderWidth}px solid rgba(76, 175, 80, 0.5)`
+      }
+    }), /*#__PURE__*/_jsx(Box, {
+      className: "icon-fix",
+      sx: {
+        top: `calc(8% - ${Math.sqrt(borderWidth)}px)`,
+        width: borderWidth + 1,
+        left: `calc(32% - ${Math.sqrt(borderWidth)}px)`,
+        zIndex: 1,
+        height: contentSize + borderWidth * 2,
+        position: 'absolute',
+        transform: 'rotate(-45deg)',
+        backgroundColor
+      }
+    })]
+  });
+}
+Success.propTypes = {
+  size: PropTypes.number,
+  borderWidth: PropTypes.number,
+  backgroundColor: PropTypes.string
+};
+Success.defaultProps = {
+  size: 64,
+  borderWidth: 4,
+  backgroundColor: 'white'
+};

package/es/Tabs/index.js

@@ -83,12 +83,81 @@ CardTabs.propTypes = {
   current: PropTypes.string.isRequired,
   onChange: PropTypes.func.isRequired
 };
+function LineTabs({
+  tabs,
+  current,
+  onChange,
+  ...rest
+}) {
+  return /*#__PURE__*/_jsx(MuiTabs, {
+    scrollButtons: "auto",
+    value: current,
+    onChange: (_, newValue) => onChange(newValue),
+    ...rest,
+    variant: "scrollable",
+    sx: {
+      minHeight: 'auto',
+      '.MuiTabs-scrollButtons.Mui-disabled': {
+        opacity: 0.3,
+        cursor: 'not-allowed',
+        pointerEvents: 'auto'
+      },
+      '.MuiTabs-scroller': {
+        '&::after': {
+          content: '""',
+          display: 'block',
+          width: '100%',
+          height: '1px',
+          backgroundColor: colors.strokeBorderStrong,
+          bottom: 0
+        }
+      },
+      '.MuiTabs-flexContainer': {
+        display: 'inline-flex',
+        columnGap: 2.5,
+        px: 0,
+        pb: 0.5
+      },
+      '.MuiTab-root': {
+        border: '1px solid transparent',
+        minHeight: 'auto',
+        lineHeight: 1,
+        py: 1,
+        px: 0,
+        color: colors.foregroundsFgSubtile,
+        fontSize: '14px',
+        fontWeight: 500,
+        textTransform: 'capitalize',
+        minWidth: 'auto',
+        '&.Mui-selected, &:hover': {
+          color: colors.foregroundsFgBase
+        }
+      },
+      '.MuiTabs-indicator': {
+        height: '1px',
+        backgroundColor: colors.foregroundsFgBase
+      },
+      ...rest.sx
+    },
+    children: tabs.map(x => /*#__PURE__*/_jsx(MuiTab, {
+      className: classes.tab,
+      value: x.value,
+      label: x.label,
+      icon: x.icon || null
+    }, x.value))
+  });
+}
+LineTabs.propTypes = {
+  tabs: PropTypes.array.isRequired,
+  current: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired
+};
 
 /**
  * @typedef {import('@mui/material').TabsProps & {
  *  tabs: string[];
  *  onChange: (value) => {};
- *  variant: 'card' | 'fullWidth' | 'scrollable' | 'standard'
+ *  variant: 'line' | 'card' | 'fullWidth' | 'scrollable' | 'standard'
  * }} TabsProps
  */
 
@@ -106,6 +175,15 @@ export default function Tabs({
 }) {
   if (rest.variant === 'card') {
     return /*#__PURE__*/_jsx(CardTabs, {
+      ...rest,
+      tabs: tabs,
+      current: current,
+      onChange: onChange
+    });
+  }
+  if (rest.variant === 'line') {
+    return /*#__PURE__*/_jsx(LineTabs, {
+      ...rest,
       tabs: tabs,
       current: current,
       onChange: onChange

package/lib/Colors/themes/temp.js

@@ -31,6 +31,7 @@ const colors = {
   // border
   strokeBorderBase: 'rgba(229, 231, 235, 1)',
   strokeBorderStrong: 'rgba(209, 213, 219, 1)',
+  strokeSep: 'rgba(229, 231, 235, 1)',
   lineStep: 'rgba(18, 22, 24, 0.06)',
   lineBorderStrong: 'rgba(18, 22, 24, 0.12)',
   lineBorderBase: 'rgba(18, 22, 24, 0.06)',

package/lib/Empty/index.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _material = require("@mui/material");
 var _EmptyIcon = _interopRequireDefault(require("@arcblock/icons/lib/EmptyIcon"));
 var _Theme = require("../Theme");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -19,7 +20,7 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-const Wrapper = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n  height: 100%;\n  min-height: 100px;\n  color: #999;\n  .empty-icon {\n    margin: 10px 0;\n  }\n"])));
+const Wrapper = (0, _Theme.styled)(_material.Box)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n  height: 100%;\n  min-height: 100px;\n  color: #999;\n  .empty-icon {\n    margin: 10px 0;\n  }\n"])));
 
 /**
  * Empty component to display empty state
@@ -50,7 +51,7 @@ function Empty(_ref) {
         color
       },
       className: "empty-icon"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
       className: "empty-content",
       children: children
     })]

package/lib/RelativeTime/index.js

@@ -8,14 +8,14 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _relativeTime = _interopRequireDefault(require("dayjs/plugin/relativeTime"));
 var _dayjs = _interopRequireDefault(require("dayjs"));
 require("dayjs/locale/zh-cn");
-var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
+var _material = require("@mui/material");
 var _localizedFormat = _interopRequireDefault(require("dayjs/plugin/localizedFormat"));
 var _utc = _interopRequireDefault(require("dayjs/plugin/utc"));
 var _timezone = _interopRequireDefault(require("dayjs/plugin/timezone"));
 var _updateLocale = _interopRequireDefault(require("dayjs/plugin/updateLocale"));
 var _Util = require("../Util");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["value", "locale", "withoutSuffix", "from", "to", "type", "tz"];
+const _excluded = ["value", "locale", "withoutSuffix", "from", "to", "type", "tz", "relativeRange"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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; }
@@ -56,7 +56,8 @@ function RelativeTime(_ref) {
       from,
       to,
       type,
-      tz
+      tz,
+      relativeRange
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
   if (!value) {
@@ -67,25 +68,31 @@ function RelativeTime(_ref) {
   if (tz) {
     datetime.tz(tz);
   }
+  const absoluteString = (0, _Util.formatToDatetime)(value, {
+    locale: localeOption,
+    tz
+  });
   let relativeString;
   if (from) {
     relativeString = datetime.from(from, withoutSuffix);
   } else if (to) {
     relativeString = datetime.to(to, withoutSuffix);
-  } else {
+  } else if (relativeRange) {
+    const diffTime = datetime.diff((0, _dayjs.default)());
+    if (Math.abs(diffTime) > relativeRange) {
+      relativeString = absoluteString;
+    }
+  }
+  if (!relativeString) {
     relativeString = datetime.fromNow(withoutSuffix);
   }
-  const absoluteString = (0, _Util.formatToDatetime)(value, {
-    locale: localeOption,
-    tz
-  });
   let innerContent = relativeString;
   let popContent = absoluteString;
   if (type === 'absolute') {
     innerContent = absoluteString;
     popContent = relativeString;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
     title: popContent,
     placement: "top-end",
     enterTouchDelay: 0,
@@ -101,7 +108,8 @@ RelativeTime.propTypes = {
   from: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
   to: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
   type: _propTypes.default.oneOf(['relative', 'absolute']),
-  tz: _propTypes.default.string
+  tz: _propTypes.default.string,
+  relativeRange: _propTypes.default.number
 };
 RelativeTime.defaultProps = {
   locale: 'en',
@@ -109,5 +117,6 @@ RelativeTime.defaultProps = {
   from: '',
   to: '',
   type: 'relative',
-  tz: undefined
+  tz: undefined,
+  relativeRange: undefined
 };

package/lib/Success/index.js

@@ -0,0 +1,181 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Success;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _material = require("@mui/material");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+// FIXME: @zhanghan 目前无法适配各种 size，后续优化
+function Success(_ref) {
+  let {
+    size,
+    backgroundColor,
+    borderWidth
+  } = _ref;
+  const contentSize = size - borderWidth * 2;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+    className: "check-icon",
+    sx: {
+      width: contentSize,
+      height: contentSize,
+      position: 'relative',
+      borderRadius: '100%',
+      '&, *, *::before, *::after': {
+        boxSizing: 'content-box !important'
+      },
+      border: theme => "".concat(borderWidth, "px solid ").concat(theme.palette.success.main),
+      '&::before, &::after': {
+        content: '""',
+        height: '125%',
+        position: 'absolute',
+        background: backgroundColor,
+        transform: 'rotate(-45deg)'
+      },
+      '&::before': {
+        top: "".concat(borderWidth / 2 + 1, "px"),
+        left: "-".concat(borderWidth / 2, "px"),
+        width: "calc(32.5% + ".concat(borderWidth, "px)"),
+        transformOrigin: '100% 50%',
+        borderRadius: '100% 0 0 100%'
+      },
+      '&::after': {
+        top: 0,
+        left: '37.5%',
+        width: "calc(70% + ".concat(borderWidth, "px)"),
+        transformOrigin: '0 50%',
+        borderRadius: '0 100% 100% 0',
+        animation: 'rotate-circle 4.25s ease-in'
+      },
+      '.icon-line': {
+        height: "".concat(borderWidth + 1, "px"),
+        backgroundColor: theme => theme.palette.success.main,
+        display: 'block',
+        borderRadius: '100vw',
+        position: 'absolute',
+        zIndex: 10
+      },
+      '@keyframes rotate-circle': {
+        '0%': {
+          transform: 'rotate(-45deg)'
+        },
+        '5%': {
+          transform: 'rotate(-45deg)'
+        },
+        '12%': {
+          transform: 'rotate(-405deg)'
+        },
+        '100%': {
+          transform: 'rotate(-405deg)'
+        }
+      }
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+      component: "span",
+      className: "icon-line line-tip",
+      sx: {
+        top: '57.5%',
+        left: '17.5%',
+        width: '31.25%',
+        transform: 'rotate(45deg)',
+        animation: 'icon-line-tip 0.75s',
+        '@keyframes icon-line-tip': {
+          '0%': {
+            width: '0',
+            left: '1px',
+            top: '23.75%'
+          },
+          '54%': {
+            width: '0',
+            left: '1px',
+            top: '23.75%'
+          },
+          '70%': {
+            width: '62.5%',
+            left: '-10%',
+            top: '46.25%'
+          },
+          '84%': {
+            width: '21.25%',
+            left: '26.25%',
+            top: '60%'
+          },
+          '100%': {
+            width: '31.25',
+            left: '17.5%',
+            top: '56.25%'
+          }
+        }
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+      component: "span",
+      className: "icon-line line-long",
+      sx: {
+        top: '47.5%',
+        right: '10%',
+        width: '58.75%',
+        transform: 'rotate(-45deg)',
+        animation: 'icon-line-long 0.75s',
+        '@keyframes icon-line-long': {
+          '0%': {
+            width: '0',
+            right: '57.5%',
+            top: '67.5%'
+          },
+          '65%': {
+            width: '0',
+            right: '57.5%',
+            top: '67.5%'
+          },
+          '84%': {
+            width: '68.75%',
+            right: '0px',
+            top: '43.75%'
+          },
+          '100%': {
+            width: '58.75%',
+            right: '10%',
+            top: '47.5%'
+          }
+        }
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+      className: "icon-circle",
+      sx: {
+        top: "-".concat(borderWidth, "px"),
+        left: "-".concat(borderWidth, "px"),
+        zIndex: 10,
+        width: contentSize,
+        height: contentSize,
+        borderRadius: '100%',
+        position: 'absolute',
+        boxSizing: 'contentBox',
+        border: "".concat(borderWidth, "px solid rgba(76, 175, 80, 0.5)")
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+      className: "icon-fix",
+      sx: {
+        top: "calc(8% - ".concat(Math.sqrt(borderWidth), "px)"),
+        width: borderWidth + 1,
+        left: "calc(32% - ".concat(Math.sqrt(borderWidth), "px)"),
+        zIndex: 1,
+        height: contentSize + borderWidth * 2,
+        position: 'absolute',
+        transform: 'rotate(-45deg)',
+        backgroundColor
+      }
+    })]
+  });
+}
+Success.propTypes = {
+  size: _propTypes.default.number,
+  borderWidth: _propTypes.default.number,
+  backgroundColor: _propTypes.default.string
+};
+Success.defaultProps = {
+  size: 64,
+  borderWidth: 4,
+  backgroundColor: 'white'
+};

package/lib/Tabs/index.js

@@ -10,7 +10,8 @@ var _Colors = require("../Colors");
 var _Theme = require("../Theme");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["tabs", "current", "onChange"],
-  _excluded2 = ["tabs", "current", "onChange"];
+  _excluded2 = ["tabs", "current", "onChange"],
+  _excluded3 = ["tabs", "current", "onChange"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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; }
@@ -102,12 +103,81 @@ CardTabs.propTypes = {
   current: _propTypes.default.string.isRequired,
   onChange: _propTypes.default.func.isRequired
 };
+function LineTabs(_ref3) {
+  let {
+      tabs,
+      current,
+      onChange: _onChange2
+    } = _ref3,
+    rest = _objectWithoutProperties(_ref3, _excluded2);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tabs, _objectSpread(_objectSpread({
+    scrollButtons: "auto",
+    value: current,
+    onChange: (_, newValue) => _onChange2(newValue)
+  }, rest), {}, {
+    variant: "scrollable",
+    sx: _objectSpread({
+      minHeight: 'auto',
+      '.MuiTabs-scrollButtons.Mui-disabled': {
+        opacity: 0.3,
+        cursor: 'not-allowed',
+        pointerEvents: 'auto'
+      },
+      '.MuiTabs-scroller': {
+        '&::after': {
+          content: '""',
+          display: 'block',
+          width: '100%',
+          height: '1px',
+          backgroundColor: _Colors.temp.strokeBorderStrong,
+          bottom: 0
+        }
+      },
+      '.MuiTabs-flexContainer': {
+        display: 'inline-flex',
+        columnGap: 2.5,
+        px: 0,
+        pb: 0.5
+      },
+      '.MuiTab-root': {
+        border: '1px solid transparent',
+        minHeight: 'auto',
+        lineHeight: 1,
+        py: 1,
+        px: 0,
+        color: _Colors.temp.foregroundsFgSubtile,
+        fontSize: '14px',
+        fontWeight: 500,
+        textTransform: 'capitalize',
+        minWidth: 'auto',
+        '&.Mui-selected, &:hover': {
+          color: _Colors.temp.foregroundsFgBase
+        }
+      },
+      '.MuiTabs-indicator': {
+        height: '1px',
+        backgroundColor: _Colors.temp.foregroundsFgBase
+      }
+    }, rest.sx),
+    children: tabs.map(x => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tab, {
+      className: classes.tab,
+      value: x.value,
+      label: x.label,
+      icon: x.icon || null
+    }, x.value))
+  }));
+}
+LineTabs.propTypes = {
+  tabs: _propTypes.default.array.isRequired,
+  current: _propTypes.default.string.isRequired,
+  onChange: _propTypes.default.func.isRequired
+};
 
 /**
  * @typedef {import('@mui/material').TabsProps & {
  *  tabs: string[];
  *  onChange: (value) => {};
- *  variant: 'card' | 'fullWidth' | 'scrollable' | 'standard'
+ *  variant: 'line' | 'card' | 'fullWidth' | 'scrollable' | 'standard'
  * }} TabsProps
  */
 
@@ -117,25 +187,32 @@ CardTabs.propTypes = {
  * @return {import('react').ReactNode}
  */
 
-function Tabs(_ref3) {
+function Tabs(_ref4) {
   let {
       tabs,
       current,
-      onChange: _onChange2
-    } = _ref3,
-    rest = _objectWithoutProperties(_ref3, _excluded2);
+      onChange: _onChange3
+    } = _ref4,
+    rest = _objectWithoutProperties(_ref4, _excluded3);
   if (rest.variant === 'card') {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(CardTabs, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(CardTabs, _objectSpread(_objectSpread({}, rest), {}, {
       tabs: tabs,
       current: current,
-      onChange: _onChange2
-    });
+      onChange: _onChange3
+    }));
+  }
+  if (rest.variant === 'line') {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(LineTabs, _objectSpread(_objectSpread({}, rest), {}, {
+      tabs: tabs,
+      current: current,
+      onChange: _onChange3
+    }));
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledMuiTabs, _objectSpread(_objectSpread({
     scrollButtons: "auto",
     variant: "scrollable",
     value: current,
-    onChange: (_, newValue) => _onChange2(newValue),
+    onChange: (_, newValue) => _onChange3(newValue),
     indicatorColor: "primary"
   }, rest), {}, {
     className: [classes.tabs, rest.className || ''].join(' '),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.9.23",
+  "version": "2.9.24",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -279,6 +279,10 @@
       "import": "./es/SplitButton/index.js",
       "require": "./lib/SplitButton/index.js"
     },
+    "./lib/Success": {
+      "import": "./es/Success/index.js",
+      "require": "./lib/Success/index.js"
+    },
     "./lib/Switch": {
       "import": "./es/Switch/index.js",
       "require": "./lib/Switch/index.js"
@@ -348,12 +352,12 @@
   "peerDependencies": {
     "react": ">=18.1.0"
   },
-  "gitHead": "83609a54526c180ff8aabb3950505da36de7ef4a",
+  "gitHead": "94aad922389471c9ed9f66528b8a712cfd02edbc",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.9.23",
-    "@arcblock/nft-display": "^2.9.23",
-    "@arcblock/react-hooks": "^2.9.23",
+    "@arcblock/icons": "^2.9.24",
+    "@arcblock/nft-display": "^2.9.24",
+    "@arcblock/react-hooks": "^2.9.24",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",

package/src/Colors/themes/temp.js

@@ -29,6 +29,7 @@ const colors = {
   // border
   strokeBorderBase: 'rgba(229, 231, 235, 1)',
   strokeBorderStrong: 'rgba(209, 213, 219, 1)',
+  strokeSep: 'rgba(229, 231, 235, 1)',
   lineStep: 'rgba(18, 22, 24, 0.06)',
   lineBorderStrong: 'rgba(18, 22, 24, 0.12)',
   lineBorderBase: 'rgba(18, 22, 24, 0.06)',

package/src/Empty/index.js

@@ -1,8 +1,9 @@
 import PropTypes from 'prop-types';
+import { Box } from '@mui/material';
 import EmptyIcon from '@arcblock/icons/lib/EmptyIcon';
 import { styled } from '../Theme';
 
-const Wrapper = styled('div')`
+const Wrapper = styled(Box)`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -33,7 +34,7 @@ function Empty({ color, size, children, ...rest }) {
   return (
     <Wrapper {...rest}>
       <EmptyIcon style={{ width: size, height: size, color }} className="empty-icon" />
-      <div className="empty-content">{children}</div>
+      <Box className="empty-content">{children}</Box>
     </Wrapper>
   );
 }

package/src/RelativeTime/index.js

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import dayjs from 'dayjs';
 import 'dayjs/locale/zh-cn';
-import Tooltip from '@mui/material/Tooltip';
+import { Tooltip } from '@mui/material';
 import localizedFormat from 'dayjs/plugin/localizedFormat';
 import utc from 'dayjs/plugin/utc';
 import timezone from 'dayjs/plugin/timezone';
@@ -34,7 +34,7 @@ dayjs.updateLocale('zh-cn', {
 });
 setDateTool(dayjs);
 
-export default function RelativeTime({ value, locale, withoutSuffix, from, to, type, tz, ...rest }) {
+export default function RelativeTime({ value, locale, withoutSuffix, from, to, type, tz, relativeRange, ...rest }) {
   if (!value) {
     return '-';
   }
@@ -46,17 +46,24 @@ export default function RelativeTime({ value, locale, withoutSuffix, from, to, t
     datetime.tz(tz);
   }
 
+  const absoluteString = formatToDatetime(value, { locale: localeOption, tz });
+
   let relativeString;
 
   if (from) {
     relativeString = datetime.from(from, withoutSuffix);
   } else if (to) {
     relativeString = datetime.to(to, withoutSuffix);
-  } else {
-    relativeString = datetime.fromNow(withoutSuffix);
+  } else if (relativeRange) {
+    const diffTime = datetime.diff(dayjs());
+    if (Math.abs(diffTime) > relativeRange) {
+      relativeString = absoluteString;
+    }
   }
 
-  const absoluteString = formatToDatetime(value, { locale: localeOption, tz });
+  if (!relativeString) {
+    relativeString = datetime.fromNow(withoutSuffix);
+  }
 
   let innerContent = relativeString;
   let popContent = absoluteString;
@@ -81,6 +88,7 @@ RelativeTime.propTypes = {
   to: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   type: PropTypes.oneOf(['relative', 'absolute']),
   tz: PropTypes.string,
+  relativeRange: PropTypes.number,
 };
 
 RelativeTime.defaultProps = {
@@ -90,4 +98,5 @@ RelativeTime.defaultProps = {
   to: '',
   type: 'relative',
   tz: undefined,
+  relativeRange: undefined,
 };

package/src/Success/index.jsx

@@ -0,0 +1,176 @@
+import PropTypes from 'prop-types';
+import { Box } from '@mui/material';
+
+// FIXME: @zhanghan 目前无法适配各种 size，后续优化
+export default function Success({ size, backgroundColor, borderWidth }) {
+  const contentSize = size - borderWidth * 2;
+
+  return (
+    <Box
+      className="check-icon"
+      sx={{
+        width: contentSize,
+        height: contentSize,
+        position: 'relative',
+        borderRadius: '100%',
+        '&, *, *::before, *::after': {
+          boxSizing: 'content-box !important',
+        },
+        border: (theme) => `${borderWidth}px solid ${theme.palette.success.main}`,
+        '&::before, &::after': {
+          content: '""',
+          height: '125%',
+          position: 'absolute',
+          background: backgroundColor,
+          transform: 'rotate(-45deg)',
+        },
+        '&::before': {
+          top: `${borderWidth / 2 + 1}px`,
+          left: `-${borderWidth / 2}px`,
+          width: `calc(32.5% + ${borderWidth}px)`,
+          transformOrigin: '100% 50%',
+          borderRadius: '100% 0 0 100%',
+        },
+        '&::after': {
+          top: 0,
+          left: '37.5%',
+          width: `calc(70% + ${borderWidth}px)`,
+          transformOrigin: '0 50%',
+          borderRadius: '0 100% 100% 0',
+          animation: 'rotate-circle 4.25s ease-in',
+        },
+        '.icon-line': {
+          height: `${borderWidth + 1}px`,
+          backgroundColor: (theme) => theme.palette.success.main,
+          display: 'block',
+          borderRadius: '100vw',
+          position: 'absolute',
+          zIndex: 10,
+        },
+        '@keyframes rotate-circle': {
+          '0%': {
+            transform: 'rotate(-45deg)',
+          },
+          '5%': {
+            transform: 'rotate(-45deg)',
+          },
+          '12%': {
+            transform: 'rotate(-405deg)',
+          },
+          '100%': {
+            transform: 'rotate(-405deg)',
+          },
+        },
+      }}>
+      <Box
+        component="span"
+        className="icon-line line-tip"
+        sx={{
+          top: '57.5%',
+          left: '17.5%',
+          width: '31.25%',
+          transform: 'rotate(45deg)',
+          animation: 'icon-line-tip 0.75s',
+          '@keyframes icon-line-tip': {
+            '0%': {
+              width: '0',
+              left: '1px',
+              top: '23.75%',
+            },
+            '54%': {
+              width: '0',
+              left: '1px',
+              top: '23.75%',
+            },
+            '70%': {
+              width: '62.5%',
+              left: '-10%',
+              top: '46.25%',
+            },
+            '84%': {
+              width: '21.25%',
+              left: '26.25%',
+              top: '60%',
+            },
+            '100%': {
+              width: '31.25',
+              left: '17.5%',
+              top: '56.25%',
+            },
+          },
+        }}
+      />
+      <Box
+        component="span"
+        className="icon-line line-long"
+        sx={{
+          top: '47.5%',
+          right: '10%',
+          width: '58.75%',
+          transform: 'rotate(-45deg)',
+          animation: 'icon-line-long 0.75s',
+          '@keyframes icon-line-long': {
+            '0%': {
+              width: '0',
+              right: '57.5%',
+              top: '67.5%',
+            },
+            '65%': {
+              width: '0',
+              right: '57.5%',
+              top: '67.5%',
+            },
+            '84%': {
+              width: '68.75%',
+              right: '0px',
+              top: '43.75%',
+            },
+            '100%': {
+              width: '58.75%',
+              right: '10%',
+              top: '47.5%',
+            },
+          },
+        }}
+      />
+      <Box
+        className="icon-circle"
+        sx={{
+          top: `-${borderWidth}px`,
+          left: `-${borderWidth}px`,
+          zIndex: 10,
+          width: contentSize,
+          height: contentSize,
+          borderRadius: '100%',
+          position: 'absolute',
+          boxSizing: 'contentBox',
+          border: `${borderWidth}px solid rgba(76, 175, 80, 0.5)`,
+        }}
+      />
+      <Box
+        className="icon-fix"
+        sx={{
+          top: `calc(8% - ${Math.sqrt(borderWidth)}px)`,
+          width: borderWidth + 1,
+          left: `calc(32% - ${Math.sqrt(borderWidth)}px)`,
+          zIndex: 1,
+          height: contentSize + borderWidth * 2,
+          position: 'absolute',
+          transform: 'rotate(-45deg)',
+          backgroundColor,
+        }}
+      />
+    </Box>
+  );
+}
+
+Success.propTypes = {
+  size: PropTypes.number,
+  borderWidth: PropTypes.number,
+  backgroundColor: PropTypes.string,
+};
+Success.defaultProps = {
+  size: 64,
+  borderWidth: 4,
+  backgroundColor: 'white',
+};

package/src/Tabs/index.jsx

@@ -82,11 +82,76 @@ CardTabs.propTypes = {
   onChange: PropTypes.func.isRequired,
 };
 
+function LineTabs({ tabs, current, onChange, ...rest }) {
+  return (
+    <MuiTabs
+      scrollButtons="auto"
+      value={current}
+      onChange={(_, newValue) => onChange(newValue)}
+      {...rest}
+      variant="scrollable"
+      sx={{
+        minHeight: 'auto',
+        '.MuiTabs-scrollButtons.Mui-disabled': {
+          opacity: 0.3,
+          cursor: 'not-allowed',
+          pointerEvents: 'auto',
+        },
+        '.MuiTabs-scroller': {
+          '&::after': {
+            content: '""',
+            display: 'block',
+            width: '100%',
+            height: '1px',
+            backgroundColor: colors.strokeBorderStrong,
+            bottom: 0,
+          },
+        },
+        '.MuiTabs-flexContainer': {
+          display: 'inline-flex',
+          columnGap: 2.5,
+          px: 0,
+          pb: 0.5,
+        },
+        '.MuiTab-root': {
+          border: '1px solid transparent',
+          minHeight: 'auto',
+          lineHeight: 1,
+          py: 1,
+          px: 0,
+          color: colors.foregroundsFgSubtile,
+          fontSize: '14px',
+          fontWeight: 500,
+          textTransform: 'capitalize',
+          minWidth: 'auto',
+          '&.Mui-selected, &:hover': {
+            color: colors.foregroundsFgBase,
+          },
+        },
+        '.MuiTabs-indicator': {
+          height: '1px',
+          backgroundColor: colors.foregroundsFgBase,
+        },
+        ...rest.sx,
+      }}>
+      {tabs.map((x) => (
+        <MuiTab className={classes.tab} key={x.value} value={x.value} label={x.label} icon={x.icon || null} />
+      ))}
+    </MuiTabs>
+  );
+}
+
+LineTabs.propTypes = {
+  tabs: PropTypes.array.isRequired,
+  current: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+};
+
 /**
  * @typedef {import('@mui/material').TabsProps & {
  *  tabs: string[];
  *  onChange: (value) => {};
- *  variant: 'card' | 'fullWidth' | 'scrollable' | 'standard'
+ *  variant: 'line' | 'card' | 'fullWidth' | 'scrollable' | 'standard'
  * }} TabsProps
  */
 
@@ -98,7 +163,11 @@ CardTabs.propTypes = {
 
 export default function Tabs({ tabs, current, onChange, ...rest }) {
   if (rest.variant === 'card') {
-    return <CardTabs tabs={tabs} current={current} onChange={onChange} />;
+    return <CardTabs {...rest} tabs={tabs} current={current} onChange={onChange} />;
+  }
+
+  if (rest.variant === 'line') {
+    return <LineTabs {...rest} tabs={tabs} current={current} onChange={onChange} />;
   }
 
   return (