antd-mobile 5.0.0-rc.2 → 5.0.0-rc.23

package/cjs/utils/use-should-render.js

@@ -8,7 +8,7 @@ exports.useShouldRender = useShouldRender;
 var _useInitialized = require("./use-initialized");
 
 function useShouldRender(active, forceRender, destroyOnClose) {
-  var initialized = (0, _useInitialized.useInitialized)(active);
+  const initialized = (0, _useInitialized.useInitialized)(active);
   if (forceRender) return true;
   if (active) return true;
   if (!initialized) return false;

package/cjs/utils/use-tab-list-scroll.d.ts

@@ -1,5 +1,5 @@
 import { RefObject } from 'react';
-export declare const useTabListScroll: (targetRef: RefObject<HTMLElement>, activeIndex: number) => {
+export declare const useTabListScroll: (targetRef: RefObject<HTMLElement>, activeIndex: number | undefined) => {
     scrollLeft: import("@react-spring/web").SpringValue<number>;
     animate: (immediate?: boolean) => void;
 };

package/cjs/utils/use-tab-list-scroll.js

@@ -15,53 +15,47 @@ var _bound = require("./bound");
 
 var _ahooks = require("ahooks");
 
-var useTabListScroll = function useTabListScroll(targetRef, activeIndex) {
-  var _useSpring = (0, _web.useSpring)(function () {
-    return {
-      scrollLeft: 0,
-      config: {
-        tension: 300,
-        clamp: true
-      }
-    };
-  }),
-      scrollLeft = _useSpring[0].scrollLeft,
-      api = _useSpring[1];
-
-  function animate(immediate) {
-    if (immediate === void 0) {
-      immediate = false;
+const useTabListScroll = (targetRef, activeIndex) => {
+  const [{
+    scrollLeft
+  }, api] = (0, _web.useSpring)(() => ({
+    scrollLeft: 0,
+    config: {
+      tension: 300,
+      clamp: true
     }
+  }));
 
-    var container = targetRef.current;
+  function animate(immediate = false) {
+    const container = targetRef.current;
     if (!container) return;
-    if (!activeIndex) return;
-    var activeTabWrapper = container.children.item(activeIndex);
-    var activeTab = activeTabWrapper.children.item(0);
-    var activeTabLeft = activeTab.offsetLeft;
-    var activeTabWidth = activeTab.offsetWidth;
-    var containerWidth = container.offsetWidth;
-    var containerScrollWidth = container.scrollWidth;
-    var containerScrollLeft = container.scrollLeft;
-    var maxScrollDistance = containerScrollWidth - containerWidth;
+    if (activeIndex === undefined) return;
+    const activeTabWrapper = container.children.item(activeIndex);
+    const activeTab = activeTabWrapper.children.item(0);
+    const activeTabLeft = activeTab.offsetLeft;
+    const activeTabWidth = activeTab.offsetWidth;
+    const containerWidth = container.offsetWidth;
+    const containerScrollWidth = container.scrollWidth;
+    const containerScrollLeft = container.scrollLeft;
+    const maxScrollDistance = containerScrollWidth - containerWidth;
     if (maxScrollDistance <= 0) return;
-    var nextScrollLeft = (0, _bound.bound)(activeTabLeft - (containerWidth - activeTabWidth) / 2, 0, containerScrollWidth - containerWidth);
+    const nextScrollLeft = (0, _bound.bound)(activeTabLeft - (containerWidth - activeTabWidth) / 2, 0, containerScrollWidth - containerWidth);
     api.start({
       scrollLeft: nextScrollLeft,
       from: {
         scrollLeft: containerScrollLeft
       },
-      immediate: immediate
+      immediate
     });
   }
 
-  (0, _react.useLayoutEffect)(function () {
+  (0, _react.useLayoutEffect)(() => {
     animate(true);
   }, []);
-  (0, _ahooks.useUpdateLayoutEffect)(function () {
+  (0, _ahooks.useUpdateLayoutEffect)(() => {
     animate();
   }, [activeIndex]);
-  (0, _useMutationEffect.useMutationEffect)(function () {
+  (0, _useMutationEffect.useMutationEffect)(() => {
     animate(true);
   }, targetRef, {
     subtree: true,
@@ -69,8 +63,8 @@ var useTabListScroll = function useTabListScroll(targetRef, activeIndex) {
     characterData: true
   });
   return {
-    scrollLeft: scrollLeft,
-    animate: animate
+    scrollLeft,
+    animate
   };
 };
 

package/cjs/utils/use-touch.js

@@ -7,7 +7,7 @@ exports.useTouch = useTouch;
 
 var _react = require("react");
 
-var MIN_DISTANCE = 10;
+const MIN_DISTANCE = 10;
 
 function getDirection(x, y) {
   if (x > y && x > MIN_DISTANCE) {
@@ -22,23 +22,19 @@ function getDirection(x, y) {
 }
 
 function useTouch() {
-  var startX = (0, _react.useRef)(0);
-  var startY = (0, _react.useRef)(0);
-  var deltaX = (0, _react.useRef)(0);
-  var deltaY = (0, _react.useRef)(0);
-  var offsetX = (0, _react.useRef)(0);
-  var offsetY = (0, _react.useRef)(0);
-  var direction = (0, _react.useRef)('');
+  const startX = (0, _react.useRef)(0);
+  const startY = (0, _react.useRef)(0);
+  const deltaX = (0, _react.useRef)(0);
+  const deltaY = (0, _react.useRef)(0);
+  const offsetX = (0, _react.useRef)(0);
+  const offsetY = (0, _react.useRef)(0);
+  const direction = (0, _react.useRef)('');
 
-  var isVertical = function isVertical() {
-    return direction.current === 'vertical';
-  };
+  const isVertical = () => direction.current === 'vertical';
 
-  var isHorizontal = function isHorizontal() {
-    return direction.current === 'horizontal';
-  };
+  const isHorizontal = () => direction.current === 'horizontal';
 
-  var reset = function reset() {
+  const reset = () => {
     deltaX.current = 0;
     deltaY.current = 0;
     offsetX.current = 0;
@@ -46,14 +42,14 @@ function useTouch() {
     direction.current = '';
   };
 
-  var start = function start(event) {
+  const start = event => {
     reset();
     startX.current = event.touches[0].clientX;
     startY.current = event.touches[0].clientY;
   };
 
-  var move = function move(event) {
-    var touch = event.touches[0]; // Fix: Safari back will set clientX to negative number
+  const move = event => {
+    const touch = event.touches[0]; // Fix: Safari back will set clientX to negative number
 
     deltaX.current = touch.clientX < 0 ? 0 : touch.clientX - startX.current;
     deltaY.current = touch.clientY - startY.current;
@@ -66,17 +62,17 @@ function useTouch() {
   };
 
   return {
-    move: move,
-    start: start,
-    reset: reset,
-    startX: startX,
-    startY: startY,
-    deltaX: deltaX,
-    deltaY: deltaY,
-    offsetX: offsetX,
-    offsetY: offsetY,
-    direction: direction,
-    isVertical: isVertical,
-    isHorizontal: isHorizontal
+    move,
+    start,
+    reset,
+    startX,
+    startY,
+    deltaX,
+    deltaY,
+    offsetX,
+    offsetY,
+    direction,
+    isVertical,
+    isHorizontal
   };
 }

package/cjs/utils/with-default-props.js

@@ -11,17 +11,17 @@ var _assignWith = _interopRequireDefault(require("lodash/assignWith"));
 
 var _isUndefined = _interopRequireDefault(require("lodash/isUndefined"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function mergeProps() {
+function mergeProps(...items) {
   function customizer(objValue, srcValue) {
-    return (0, _isUndefined["default"])(srcValue) ? objValue : srcValue;
+    return (0, _isUndefined.default)(srcValue) ? objValue : srcValue;
   }
 
-  var ret = (0, _assign["default"])({}, arguments.length <= 0 ? undefined : arguments[0]);
+  let ret = (0, _assign.default)({}, items[0]);
 
-  for (var i = 1; i < arguments.length; i++) {
-    ret = (0, _assignWith["default"])(ret, i < 0 || arguments.length <= i ? undefined : arguments[i], customizer);
+  for (let i = 1; i < items.length; i++) {
+    ret = (0, _assignWith.default)(ret, items[i], customizer);
   }
 
   return ret;

package/cjs/utils/with-stop-propagation.js

@@ -7,58 +7,17 @@ exports.withStopPropagation = withStopPropagation;
 
 var _react = _interopRequireDefault(require("react"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _createForOfIteratorHelperLoose(o, allowArrayLike) {
-  var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
-  if (it) return (it = it.call(o)).next.bind(it);
-
-  if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
-    if (it) o = it;
-    var i = 0;
-    return function () {
-      if (i >= o.length) return {
-        done: true
-      };
-      return {
-        done: false,
-        value: o[i++]
-      };
-    };
-  }
-
-  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-
-  for (var i = 0, arr2 = new Array(len); i < len; i++) {
-    arr2[i] = arr[i];
-  }
-
-  return arr2;
-}
-
-var eventToPropRecord = {
+const eventToPropRecord = {
   'click': 'onClick'
 };
 
 function withStopPropagation(events, element) {
-  var props = Object.assign({}, element.props);
+  const props = Object.assign({}, element.props);
 
-  var _loop = function _loop() {
-    var key = _step.value;
-    var prop = eventToPropRecord[key];
+  for (const key of events) {
+    const prop = eventToPropRecord[key];
 
     props[prop] = function (e) {
       var _a, _b;
@@ -66,11 +25,7 @@ function withStopPropagation(events, element) {
       e.stopPropagation();
       (_b = (_a = element.props)[prop]) === null || _b === void 0 ? void 0 : _b.call(_a, e);
     };
-  };
-
-  for (var _iterator = _createForOfIteratorHelperLoose(events), _step; !(_step = _iterator()).done;) {
-    _loop();
   }
 
-  return /*#__PURE__*/_react["default"].cloneElement(element, props);
+  return _react.default.cloneElement(element, props);
 }

package/es/components/action-sheet/action-sheet.css

@@ -21,7 +21,6 @@
 .adm-action-sheet-button-item {
   padding: 14px;
   text-align: center;
-  border-radius: 0;
 }
 .adm-action-sheet-button-item-name {
   color: var(--adm-color-text);

package/es/components/action-sheet/action-sheet.js

@@ -6,8 +6,8 @@ import Popup from '../popup';
 import Button from '../button';
 import { renderToBody } from '../../utils/render-to-body';
 import SafeArea from '../safe-area';
-var classPrefix = "adm-action-sheet";
-var defaultProps = {
+const classPrefix = `adm-action-sheet`;
+const defaultProps = {
   visible: false,
   actions: [],
   cancelText: '',
@@ -15,11 +15,11 @@ var defaultProps = {
   closeOnMaskClick: true,
   safeArea: true
 };
-export var ActionSheet = function ActionSheet(p) {
-  var props = mergeProps(defaultProps, p);
-  return /*#__PURE__*/React.createElement(Popup, {
+export const ActionSheet = p => {
+  const props = mergeProps(defaultProps, p);
+  return React.createElement(Popup, {
     visible: props.visible,
-    onMaskClick: function onMaskClick() {
+    onMaskClick: () => {
       var _a, _b;
 
       (_a = props.onMaskClick) === null || _a === void 0 ? void 0 : _a.call(props);
@@ -29,66 +29,63 @@ export var ActionSheet = function ActionSheet(p) {
       }
     },
     afterClose: props.afterClose,
-    className: classPrefix + "-popup",
+    className: `${classPrefix}-popup`,
     getContainer: props.getContainer
-  }, withNativeProps(props, /*#__PURE__*/React.createElement("div", {
+  }, withNativeProps(props, React.createElement("div", {
     className: classPrefix
-  }, props.extra && /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-extra"
-  }, props.extra), /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-button-list"
-  }, props.actions.map(function (action, index) {
-    var _classNames;
-
-    return /*#__PURE__*/React.createElement("div", {
-      key: action.key,
-      className: classPrefix + "-button-item-wrapper"
-    }, /*#__PURE__*/React.createElement(Button, {
-      block: true,
-      fill: 'none',
-      disabled: action.disabled,
-      onClick: function onClick() {
-        var _a, _b, _c;
+  }, props.extra && React.createElement("div", {
+    className: `${classPrefix}-extra`
+  }, props.extra), React.createElement("div", {
+    className: `${classPrefix}-button-list`
+  }, props.actions.map((action, index) => React.createElement("div", {
+    key: action.key,
+    className: `${classPrefix}-button-item-wrapper`
+  }, React.createElement(Button, {
+    block: true,
+    fill: 'none',
+    shape: 'rectangular',
+    disabled: action.disabled,
+    onClick: () => {
+      var _a, _b, _c;
 
-        (_a = action.onClick) === null || _a === void 0 ? void 0 : _a.call(action);
-        (_b = props.onAction) === null || _b === void 0 ? void 0 : _b.call(props, action, index);
+      (_a = action.onClick) === null || _a === void 0 ? void 0 : _a.call(action);
+      (_b = props.onAction) === null || _b === void 0 ? void 0 : _b.call(props, action, index);
 
-        if (props.closeOnAction) {
-          (_c = props.onClose) === null || _c === void 0 ? void 0 : _c.call(props);
-        }
-      },
-      className: classNames(classPrefix + "-button-item", (_classNames = {}, _classNames[classPrefix + "-button-item-danger"] = action.danger, _classNames))
-    }, /*#__PURE__*/React.createElement("div", {
-      className: classPrefix + "-button-item-name"
-    }, action.text), action.description && /*#__PURE__*/React.createElement("div", {
-      className: classPrefix + "-button-item-description"
-    }, action.description)));
-  })), props.cancelText && /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-cancel"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-button-item-wrapper"
-  }, /*#__PURE__*/React.createElement(Button, {
+      if (props.closeOnAction) {
+        (_c = props.onClose) === null || _c === void 0 ? void 0 : _c.call(props);
+      }
+    },
+    className: classNames(`${classPrefix}-button-item`, {
+      [`${classPrefix}-button-item-danger`]: action.danger
+    })
+  }, React.createElement("div", {
+    className: `${classPrefix}-button-item-name`
+  }, action.text), action.description && React.createElement("div", {
+    className: `${classPrefix}-button-item-description`
+  }, action.description))))), props.cancelText && React.createElement("div", {
+    className: `${classPrefix}-cancel`
+  }, React.createElement("div", {
+    className: `${classPrefix}-button-item-wrapper`
+  }, React.createElement(Button, {
     block: true,
     fill: 'none',
-    className: classPrefix + "-button-item",
-    onClick: function onClick() {
+    shape: 'rectangular',
+    className: `${classPrefix}-button-item`,
+    onClick: () => {
       var _a;
 
       (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
     }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-button-item-name"
-  }, props.cancelText)))), props.safeArea && /*#__PURE__*/React.createElement(SafeArea, {
+  }, React.createElement("div", {
+    className: `${classPrefix}-button-item-name`
+  }, props.cancelText)))), props.safeArea && React.createElement(SafeArea, {
     position: 'bottom'
   }))));
 };
 export function showActionSheet(props) {
-  var Wrapper = /*#__PURE__*/forwardRef(function (_, ref) {
-    var _useState = useState(false),
-        visible = _useState[0],
-        setVisible = _useState[1];
-
-    useEffect(function () {
+  const Wrapper = forwardRef((_, ref) => {
+    const [visible, setVisible] = useState(false);
+    useEffect(() => {
       setVisible(true);
     }, []);
 
@@ -99,15 +96,13 @@ export function showActionSheet(props) {
       setVisible(false);
     }
 
-    useImperativeHandle(ref, function () {
-      return {
-        close: handleClose
-      };
-    });
-    return /*#__PURE__*/React.createElement(ActionSheet, Object.assign({}, props, {
+    useImperativeHandle(ref, () => ({
+      close: handleClose
+    }));
+    return React.createElement(ActionSheet, Object.assign({}, props, {
       visible: visible,
       onClose: handleClose,
-      afterClose: function afterClose() {
+      afterClose: () => {
         var _a;
 
         (_a = props.afterClose) === null || _a === void 0 ? void 0 : _a.call(props);
@@ -115,12 +110,12 @@ export function showActionSheet(props) {
       }
     }));
   });
-  var ref = /*#__PURE__*/createRef();
-  var unmount = renderToBody( /*#__PURE__*/React.createElement(Wrapper, {
+  const ref = createRef();
+  const unmount = renderToBody(React.createElement(Wrapper, {
     ref: ref
   }));
   return {
-    close: function close() {
+    close: () => {
       var _a;
 
       (_a = ref.current) === null || _a === void 0 ? void 0 : _a.close();

package/es/components/auto-center/auto-center.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { withNativeProps } from '../../utils/native-props';
-var classPrefix = 'adm-auto-center';
-export var AutoCenter = function AutoCenter(props) {
-  return withNativeProps(props, /*#__PURE__*/React.createElement("div", {
+const classPrefix = 'adm-auto-center';
+export const AutoCenter = props => {
+  return withNativeProps(props, React.createElement("div", {
     className: classPrefix
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-content"
+  }, React.createElement("div", {
+    className: `${classPrefix}-content`
   }, props.children)));
 };

package/es/components/avatar/avatar.css

@@ -0,0 +1,14 @@
+.adm-avatar {
+  --size: var(--adm-avatar-size, 44px);
+  --border-radius: var(--adm-avatar-border-radius, 4px);
+  border-radius: var(--border-radius);
+}
+.adm-avatar.adm-image {
+  --width: var(--size);
+  --height: var(--size);
+}
+.adm-avatar-fallback {
+  height: 100%;
+  width: 100%;
+  display: block;
+}

package/es/components/avatar/avatar.d.ts

@@ -0,0 +1,9 @@
+import { FC, ReactNode } from 'react';
+import { NativeProps } from '../../utils/native-props';
+import { ImageProps } from '../image';
+export declare type AvatarProps = {
+    src: string;
+    fallback?: ReactNode;
+    fit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
+} & Pick<ImageProps, 'alt' | 'lazy' | 'onClick' | 'onError'> & NativeProps<'--size' | '--border-radius'>;
+export declare const Avatar: FC<AvatarProps>;

package/es/components/avatar/avatar.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { withNativeProps } from '../../utils/native-props';
+import { Image } from '../../index';
+import { mergeProps } from '../../utils/with-default-props';
+import { Fallback } from './fallback';
+const classPrefix = 'adm-avatar';
+const defaultProps = {
+  fallback: React.createElement(Fallback, null),
+  fit: 'cover'
+};
+export const Avatar = p => {
+  const props = mergeProps(defaultProps, p);
+  return withNativeProps(props, React.createElement(Image, {
+    className: classPrefix,
+    src: props.src,
+    fallback: props.fallback,
+    placeholder: props.fallback,
+    alt: props.alt,
+    lazy: props.lazy,
+    onClick: props.onClick,
+    onError: props.onError
+  }));
+};

package/es/components/avatar/fallback.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const Fallback: React.MemoExoticComponent<() => JSX.Element>;

package/es/components/avatar/fallback.js

@@ -0,0 +1,39 @@
+import React, { memo } from 'react';
+export const Fallback = memo(() => React.createElement("svg", {
+  className: 'adm-avatar-fallback',
+  width: '88px',
+  height: '88px',
+  viewBox: '0 0 88 88',
+  version: '1.1'
+}, React.createElement("title", null, "\u7F16\u7EC4 3"), React.createElement("defs", null, React.createElement("polygon", {
+  id: 'path-1',
+  points: '0 0 88 0 88 88 0 88'
+})), React.createElement("g", {
+  id: '\u9875\u9762-1',
+  stroke: 'none',
+  strokeWidth: '1',
+  fill: 'none',
+  fillRule: 'evenodd'
+}, React.createElement("g", {
+  id: '\u8BED\u96C0',
+  transform: 'translate(-495.000000, -71.000000)'
+}, React.createElement("g", {
+  id: '\u7F16\u7EC4-3',
+  transform: 'translate(495.000000, 71.000000)'
+}, React.createElement("mask", {
+  id: 'mask-2',
+  fill: 'white'
+}, React.createElement("use", {
+  xlinkHref: '#path-1'
+})), React.createElement("use", {
+  id: 'Mask',
+  fill: '#EEEEEE',
+  fillRule: 'nonzero',
+  xlinkHref: '#path-1'
+}), React.createElement("path", {
+  d: 'M44.5707528,16 L43.4292117,16 L42.9575197,16.0086403 L42.9575195,16.0086403 C36.5215787,16.2615464 31.4341803,21.5678078 31.4344832,28.0273864 L31.4344832,34.7776551 L31.4495601,35.3716788 L31.4495593,35.3716628 C31.599687,38.5368723 32.9422041,41.5269327 35.2058513,43.7376716 L38.2147759,46.6775505 L38.4086219,46.8913989 C38.7747759,47.3385365 38.9750835,47.9001589 38.9750835,48.4833848 L38.9750835,48.8938006 L38.9556989,49.1897326 L38.9556989,49.1897325 C38.8577746,49.9812662 38.3754713,50.67284 37.667703,51.036605 L18.7375269,60.7440265 L18.4101421,60.9276334 L18.4101423,60.9276333 C16.9141658,61.8418636 16.0009389,63.4714674 16,65.2283758 L16,66.070809 L16.0129231,66.3948217 C16.1766149,68.4123376 17.860922,70 19.91569,70 L68.0843101,70 L68.08431,70 C70.2460467,70 71.9988087,68.243122 72,66.0751224 L72,65.2326893 C72,63.3382982 70.9446194,61.6037466 69.2624598,60.7440295 L50.3322837,51.036608 L50.3322835,51.0366079 C49.5291218,50.6249082 49.0240448,49.7962466 49.024903,48.8916436 L49.024903,48.4812278 C49.024903,47.8029608 49.3005955,47.1527756 49.7852106,46.6775603 L52.7941352,43.7376813 L52.7941354,43.7376811 C55.204308,41.3832325 56.5636029,38.151975 56.5633606,34.7776456 L56.5633606,28.0273769 L56.5633606,28.0273774 C56.5633606,21.3848531 51.1940878,16 44.5707524,16 L44.5707528,16 Z',
+  id: '\u5F62\u72B6',
+  fill: '#CCCCCC',
+  fillRule: 'nonzero',
+  mask: 'url(#mask-2)'
+}))))));

package/es/components/avatar/index.d.ts

@@ -0,0 +1,4 @@
+import './avatar.less';
+import { Avatar } from './avatar';
+export type { AvatarProps } from './avatar';
+export default Avatar;

package/es/components/avatar/index.js

@@ -0,0 +1,3 @@
+import "./avatar.css";
+import { Avatar } from './avatar';
+export default Avatar;

package/es/components/badge/badge.css

@@ -3,20 +3,25 @@
   position: relative;
 }
 .adm-badge {
-  display: inline-block;
-  color: #fff;
-  font-weight: normal;
-  text-align: center;
+  display: inline-flex;
   vertical-align: middle;
-  box-sizing: border-box;
-  min-width: 16px;
+  box-sizing: content-box;
   border-radius: 100px;
-  padding: 0 4px;
-  font-size: 9px;
-  line-height: 1.2;
-  white-space: nowrap;
+  background-color: var(--color);
   --right: 0;
   --top: 0;
+  --color: var(--adm-badge-color, #ff411c);
+}
+.adm-badge-content {
+  color: #fff;
+  box-sizing: border-box;
+  min-width: 8px;
+  padding: 1px 4px;
+  font-size: 9px;
+  line-height: 12px;
+  white-space: nowrap;
+  font-weight: normal;
+  text-align: center;
 }
 .adm-badge-fixed {
   position: absolute;
@@ -30,3 +35,6 @@
   height: 10px;
   border-radius: 5px;
 }
+.adm-badge-bordered {
+  border: solid 1px var(--adm-color-white);
+}

package/es/components/badge/badge.d.ts

@@ -4,5 +4,6 @@ export declare const dot: unique symbol;
 export declare type BadgeProps = {
     content?: React.ReactNode | typeof dot;
     color?: string;
-} & NativeProps<'--right' | '--top'>;
+    bordered?: boolean;
+} & NativeProps<'--right' | '--top' | '--color'>;
 export declare const Badge: FC<BadgeProps>;