@chaoswise/ui 3.0.22 → 3.1.0

package/lib/Antd5/skeleton/style/index.js

@@ -47,7 +47,7 @@ var genSkeletonElementAvatar = function genSkeletonElementAvatar(token) {
     controlHeight = token.controlHeight,
     controlHeightLG = token.controlHeightLG,
     controlHeightSM = token.controlHeightSM;
-  return _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(skeletonAvatarCls), _objectSpread({
+  return _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, skeletonAvatarCls, _objectSpread({
     display: 'inline-block',
     verticalAlign: 'top',
     background: gradientFromColor
@@ -63,7 +63,7 @@ var genSkeletonElementInput = function genSkeletonElementInput(token) {
     controlHeightSM = token.controlHeightSM,
     gradientFromColor = token.gradientFromColor,
     calc = token.calc;
-  return _defineProperty(_defineProperty(_defineProperty({}, "".concat(skeletonInputCls), _objectSpread({
+  return _defineProperty(_defineProperty(_defineProperty({}, skeletonInputCls, _objectSpread({
     display: 'inline-block',
     verticalAlign: 'top',
     background: gradientFromColor,
@@ -81,11 +81,11 @@ var genSkeletonElementImage = function genSkeletonElementImage(token) {
     gradientFromColor = token.gradientFromColor,
     borderRadiusSM = token.borderRadiusSM,
     calc = token.calc;
-  return _defineProperty(_defineProperty({}, "".concat(skeletonImageCls), _objectSpread(_objectSpread({
-    display: 'flex',
+  return _defineProperty(_defineProperty({}, skeletonImageCls, _objectSpread(_objectSpread({
+    display: 'inline-flex',
     alignItems: 'center',
     justifyContent: 'center',
-    verticalAlign: 'top',
+    verticalAlign: 'middle',
     background: gradientFromColor,
     borderRadius: borderRadiusSM
   }, genSkeletonElementImageSize(calc(imageSizeBase).mul(2).equal())), {}, _defineProperty(_defineProperty(_defineProperty({}, "".concat(skeletonImageCls, "-path"), {
@@ -123,7 +123,7 @@ var genSkeletonElementButton = function genSkeletonElementButton(token) {
     controlHeightSM = token.controlHeightSM,
     gradientFromColor = token.gradientFromColor,
     calc = token.calc;
-  return _objectSpread(_objectSpread(_objectSpread(_defineProperty({}, "".concat(skeletonButtonCls), _objectSpread({
+  return _objectSpread(_objectSpread(_objectSpread(_defineProperty({}, skeletonButtonCls, _objectSpread({
     display: 'inline-block',
     verticalAlign: 'top',
     background: gradientFromColor,
@@ -153,14 +153,14 @@ var genBaseStyle = function genBaseStyle(token) {
     paragraphLiHeight = token.paragraphLiHeight,
     controlHeightXS = token.controlHeightXS,
     paragraphMarginTop = token.paragraphMarginTop;
-  return _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(componentCls), _defineProperty(_defineProperty(_defineProperty({
+  return _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, componentCls, _defineProperty(_defineProperty(_defineProperty({
     display: 'table',
     width: '100%'
   }, "".concat(componentCls, "-header"), _defineProperty(_defineProperty(_defineProperty(_defineProperty({
     display: 'table-cell',
     paddingInlineEnd: padding,
     verticalAlign: 'top'
-  }, "".concat(skeletonAvatarCls), _objectSpread({
+  }, skeletonAvatarCls, _objectSpread({
     display: 'inline-block',
     verticalAlign: 'top',
     background: gradientFromColor
@@ -170,14 +170,14 @@ var genBaseStyle = function genBaseStyle(token) {
     display: 'table-cell',
     width: '100%',
     verticalAlign: 'top'
-  }, "".concat(skeletonTitleCls), _defineProperty({
+  }, skeletonTitleCls, _defineProperty({
     width: '100%',
     height: titleHeight,
     background: gradientFromColor,
     borderRadius: blockRadius
   }, "+ ".concat(skeletonParagraphCls), {
     marginBlockStart: controlHeightSM
-  })), "".concat(skeletonParagraphCls), {
+  })), skeletonParagraphCls, {
     padding: 0,
     '> li': {
       width: '100%',
@@ -193,7 +193,7 @@ var genBaseStyle = function genBaseStyle(token) {
     width: '61%'
   })), "&-round ".concat(componentCls, "-content"), _defineProperty({}, "".concat(skeletonTitleCls, ", ").concat(skeletonParagraphCls, " > li"), {
     borderRadius: borderRadius
-  }))), "".concat(componentCls, "-with-avatar ").concat(componentCls, "-content"), _defineProperty({}, "".concat(skeletonTitleCls), _defineProperty({
+  }))), "".concat(componentCls, "-with-avatar ").concat(componentCls, "-content"), _defineProperty({}, skeletonTitleCls, _defineProperty({
     marginBlockStart: marginSM
   }, "+ ".concat(skeletonParagraphCls), {
     marginBlockStart: paragraphMarginTop
@@ -202,9 +202,9 @@ var genBaseStyle = function genBaseStyle(token) {
     width: 'auto'
   }, genSkeletonElementButton(token)), genSkeletonElementAvatar(token)), genSkeletonElementInput(token)), genSkeletonElementImage(token))), "".concat(componentCls).concat(componentCls, "-block"), _defineProperty(_defineProperty({
     width: '100%'
-  }, "".concat(skeletonButtonCls), {
+  }, skeletonButtonCls, {
     width: '100%'
-  }), "".concat(skeletonInputCls), {
+  }), skeletonInputCls, {
     width: '100%'
   })), "".concat(componentCls).concat(componentCls, "-active"), _defineProperty({}, "\n        ".concat(skeletonTitleCls, ",\n        ").concat(skeletonParagraphCls, " > li,\n        ").concat(skeletonAvatarCls, ",\n        ").concat(skeletonButtonCls, ",\n        ").concat(skeletonInputCls, ",\n        ").concat(skeletonImageCls, "\n      "), _objectSpread({}, genSkeletonColor(token))));
 };

package/lib/Antd5/slider/Context.js

@@ -0,0 +1,4 @@
+import { createContext } from 'react';
+/** @private Internal context. Do not use in your production. */
+var SliderInternalContext = /*#__PURE__*/createContext({});
+export default SliderInternalContext;

package/lib/Antd5/slider/SliderTooltip.js

@@ -11,8 +11,10 @@ import raf from 'rc-util/lib/raf';
 import { composeRef } from 'rc-util/lib/ref';
 import Tooltip from '../tooltip';
 var SliderTooltip = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var open = props.open;
+  var open = props.open,
+    draggingDelete = props.draggingDelete;
   var innerRef = useRef(null);
+  var mergedOpen = open && !draggingDelete;
   var rafRef = useRef(null);
   function cancelKeepAlign() {
     raf.cancel(rafRef.current);
@@ -26,16 +28,18 @@ var SliderTooltip = /*#__PURE__*/React.forwardRef(function (props, ref) {
     });
   }
   React.useEffect(function () {
-    if (open) {
+    if (mergedOpen) {
       keepAlign();
     } else {
       cancelKeepAlign();
     }
     return cancelKeepAlign;
-  }, [open, props.title]);
-  return _jsx(Tooltip, _objectSpread({
+  }, [mergedOpen, props.title]);
+  return _jsx(Tooltip, _objectSpread(_objectSpread({
     ref: composeRef(innerRef, ref)
-  }, props));
+  }, props), {}, {
+    open: mergedOpen
+  }));
 });
 if (process.env.NODE_ENV !== 'production') {
   SliderTooltip.displayName = 'SliderTooltip';

package/lib/Antd5/slider/index.js

@@ -1,5 +1,5 @@
-var _excluded = ["prefixCls", "range", "className", "rootClassName", "style", "disabled", "tooltipPrefixCls", "tipFormatter", "tooltipVisible", "getTooltipPopupContainer", "tooltipPlacement", "tooltip", "onChangeComplete"];
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["prefixCls", "range", "className", "rootClassName", "style", "disabled", "tooltipPrefixCls", "tipFormatter", "tooltipVisible", "getTooltipPopupContainer", "tooltipPlacement", "tooltip", "onChangeComplete"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -24,6 +24,7 @@ import { ConfigContext } from '../config-provider';
 import DisabledContext from '../config-provider/DisabledContext';
 import SliderTooltip from './SliderTooltip';
 import useStyle from './style';
+import SliderInternalContext from './Context';
 import useRafLock from './useRafLock';
 function getTipFormatter(tipFormatter, legacyTipFormatter) {
   if (tipFormatter || tipFormatter === null) {
@@ -54,12 +55,18 @@ var Slider = /*#__PURE__*/React.forwardRef(function (props, ref) {
     restProps = _objectWithoutProperties(props, _excluded);
   var vertical = props.vertical;
   var _React$useContext = React.useContext(ConfigContext),
-    direction = _React$useContext.direction,
+    contextDirection = _React$useContext.direction,
     slider = _React$useContext.slider,
     getPrefixCls = _React$useContext.getPrefixCls,
     getPopupContainer = _React$useContext.getPopupContainer;
   var contextDisabled = React.useContext(DisabledContext);
   var mergedDisabled = disabled !== null && disabled !== void 0 ? disabled : contextDisabled;
+  // ============================= Context ==============================
+  var _React$useContext2 = React.useContext(SliderInternalContext),
+    contextHandleRender = _React$useContext2.handleRender,
+    internalContextDirection = _React$useContext2.direction;
+  var mergedDirection = internalContextDirection || contextDirection;
+  var isRTL = mergedDirection === 'rtl';
   // =============================== Open ===============================
   var _useRafLock = useRafLock(),
     _useRafLock2 = _slicedToArray(_useRafLock, 2),
@@ -95,7 +102,7 @@ var Slider = /*#__PURE__*/React.forwardRef(function (props, ref) {
     if (!vert) {
       return 'top';
     }
-    return direction === 'rtl' ? 'left' : 'right';
+    return isRTL ? 'left' : 'right';
   };
   // ============================== Style ===============================
   var prefixCls = getPrefixCls('slider', customizePrefixCls);
@@ -104,22 +111,11 @@ var Slider = /*#__PURE__*/React.forwardRef(function (props, ref) {
     wrapCSSVar = _useStyle2[0],
     hashId = _useStyle2[1],
     cssVarCls = _useStyle2[2];
-  var cls = classNames(className, slider === null || slider === void 0 ? void 0 : slider.className, rootClassName, _defineProperty(_defineProperty({}, "".concat(prefixCls, "-rtl"), direction === 'rtl'), "".concat(prefixCls, "-lock"), dragging), hashId, cssVarCls);
+  var cls = classNames(className, slider === null || slider === void 0 ? void 0 : slider.className, rootClassName, _defineProperty(_defineProperty({}, "".concat(prefixCls, "-rtl"), isRTL), "".concat(prefixCls, "-lock"), dragging), hashId, cssVarCls);
   // make reverse default on rtl direction
-  if (direction === 'rtl' && !restProps.vertical) {
+  if (isRTL && !restProps.vertical) {
     restProps.reverse = !restProps.reverse;
   }
-  // ============================= Multiple =============================
-  // Range config
-  var _React$useMemo = React.useMemo(function () {
-      if (!range) {
-        return [false];
-      }
-      return _typeof(range) === 'object' ? [true, range.draggableTrack] : [true, false];
-    }, [range]),
-    _React$useMemo2 = _slicedToArray(_React$useMemo, 2),
-    mergedRange = _React$useMemo2[0],
-    draggableTrack = _React$useMemo2[1];
   // ============================= Warning ==============================
   // Warning for deprecated usage
   if (process.env.NODE_ENV !== 'production') {
@@ -145,38 +141,43 @@ var Slider = /*#__PURE__*/React.forwardRef(function (props, ref) {
       document.removeEventListener('mouseup', onMouseUp);
     };
   }, []);
-  var useActiveTooltipHandle = mergedRange && !lockOpen;
-  var handleRender = function handleRender(node, info) {
+  var useActiveTooltipHandle = range && !lockOpen;
+  var handleRender = contextHandleRender || function (node, info) {
     var index = info.index;
     var nodeProps = node.props;
+    function proxyEvent(eventName, event, triggerRestPropsEvent) {
+      var _nodeProps$eventName;
+      if (triggerRestPropsEvent) {
+        var _restProps$eventName;
+        (_restProps$eventName = restProps[eventName]) === null || _restProps$eventName === void 0 || _restProps$eventName.call(restProps, event);
+      }
+      (_nodeProps$eventName = nodeProps[eventName]) === null || _nodeProps$eventName === void 0 || _nodeProps$eventName.call(nodeProps, event);
+    }
     var passedProps = _objectSpread(_objectSpread({}, nodeProps), {}, {
       onMouseEnter: function onMouseEnter(e) {
-        var _nodeProps$onMouseEnt;
         setHoverOpen(true);
-        (_nodeProps$onMouseEnt = nodeProps.onMouseEnter) === null || _nodeProps$onMouseEnt === void 0 || _nodeProps$onMouseEnt.call(nodeProps, e);
+        proxyEvent('onMouseEnter', e);
       },
       onMouseLeave: function onMouseLeave(e) {
-        var _nodeProps$onMouseLea;
         setHoverOpen(false);
-        (_nodeProps$onMouseLea = nodeProps.onMouseLeave) === null || _nodeProps$onMouseLea === void 0 || _nodeProps$onMouseLea.call(nodeProps, e);
+        proxyEvent('onMouseLeave', e);
       },
       onMouseDown: function onMouseDown(e) {
-        var _nodeProps$onMouseDow;
         setFocusOpen(true);
         setDragging(true);
-        (_nodeProps$onMouseDow = nodeProps.onMouseDown) === null || _nodeProps$onMouseDow === void 0 || _nodeProps$onMouseDow.call(nodeProps, e);
+        proxyEvent('onMouseDown', e);
       },
       onFocus: function onFocus(e) {
-        var _restProps$onFocus, _nodeProps$onFocus;
+        var _restProps$onFocus;
         setFocusOpen(true);
         (_restProps$onFocus = restProps.onFocus) === null || _restProps$onFocus === void 0 || _restProps$onFocus.call(restProps, e);
-        (_nodeProps$onFocus = nodeProps.onFocus) === null || _nodeProps$onFocus === void 0 || _nodeProps$onFocus.call(nodeProps, e);
+        proxyEvent('onFocus', e, true);
       },
       onBlur: function onBlur(e) {
-        var _restProps$onBlur, _nodeProps$onBlur;
+        var _restProps$onBlur;
         setFocusOpen(false);
         (_restProps$onBlur = restProps.onBlur) === null || _restProps$onBlur === void 0 || _restProps$onBlur.call(restProps, e);
-        (_nodeProps$onBlur = nodeProps.onBlur) === null || _nodeProps$onBlur === void 0 || _nodeProps$onBlur.call(nodeProps, e);
+        proxyEvent('onBlur', e, true);
       }
     });
     var cloneNode = /*#__PURE__*/React.cloneElement(node, passedProps);
@@ -209,7 +210,8 @@ var Slider = /*#__PURE__*/React.forwardRef(function (props, ref) {
       placement: getTooltipPlacement(tooltipPlacement !== null && tooltipPlacement !== void 0 ? tooltipPlacement : legacyTooltipPlacement, vertical),
       key: "tooltip",
       overlayClassName: "".concat(prefixCls, "-tooltip"),
-      getPopupContainer: getTooltipPopupContainer || legacyGetTooltipPopupContainer || getPopupContainer
+      getPopupContainer: getTooltipPopupContainer || legacyGetTooltipPopupContainer || getPopupContainer,
+      draggingDelete: info.draggingDelete
     }), cloneNode);
   } : undefined;
   // ============================== Render ==============================
@@ -218,8 +220,7 @@ var Slider = /*#__PURE__*/React.forwardRef(function (props, ref) {
   // @ts-ignore
   _jsx(RcSlider, _objectSpread(_objectSpread({}, restProps), {}, {
     step: restProps.step,
-    range: mergedRange,
-    draggableTrack: draggableTrack,
+    range: range,
     className: cls,
     style: mergedStyle,
     disabled: mergedDisabled,

package/lib/Antd5/slider/style/index.js

@@ -19,24 +19,32 @@ var genBaseStyle = function genBaseStyle(token) {
     marginPart = token.marginPart,
     colorFillContentHover = token.colorFillContentHover,
     handleColorDisabled = token.handleColorDisabled,
-    calc = token.calc;
+    calc = token.calc,
+    handleSize = token.handleSize,
+    handleSizeHover = token.handleSizeHover,
+    handleActiveColor = token.handleActiveColor,
+    handleActiveOutlineColor = token.handleActiveOutlineColor,
+    handleLineWidth = token.handleLineWidth,
+    handleLineWidthHover = token.handleLineWidthHover,
+    motionDurationMid = token.motionDurationMid;
   return _defineProperty({}, componentCls, _objectSpread(_objectSpread({}, resetComponent(token)), {}, (_objectSpread2 = {
     position: 'relative',
     height: controlSize,
     margin: "".concat(unit(marginPart), " ").concat(unit(marginFull)),
     padding: 0,
     cursor: 'pointer',
-    touchAction: 'none'
-  }, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_objectSpread2, "&-vertical", {
-    margin: "".concat(unit(marginFull), " ").concat(unit(marginPart))
-  }), "".concat(componentCls, "-rail"), {
+    touchAction: 'none',
+    '&-vertical': {
+      margin: "".concat(unit(marginFull), " ").concat(unit(marginPart))
+    }
+  }, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_objectSpread2, "".concat(componentCls, "-rail"), {
     position: 'absolute',
     backgroundColor: token.railBg,
     borderRadius: token.borderRadiusXS,
-    transition: "background-color ".concat(token.motionDurationMid)
+    transition: "background-color ".concat(motionDurationMid)
   }), "".concat(componentCls, "-track,").concat(componentCls, "-tracks"), {
     position: 'absolute',
-    transition: "background-color ".concat(token.motionDurationMid)
+    transition: "background-color ".concat(motionDurationMid)
   }), "".concat(componentCls, "-track"), {
     backgroundColor: token.trackBg,
     borderRadius: token.borderRadiusXS
@@ -51,22 +59,27 @@ var genBaseStyle = function genBaseStyle(token) {
   }), "".concat(componentCls, "-dot"), {
     borderColor: colorFillContentHover
   }), "".concat(componentCls, "-handle::after"), {
-    boxShadow: "0 0 0 ".concat(unit(token.handleLineWidth), " ").concat(token.colorPrimaryBorderHover)
+    boxShadow: "0 0 0 ".concat(unit(handleLineWidth), " ").concat(token.colorPrimaryBorderHover)
   }), "".concat(componentCls, "-dot-active"), {
     borderColor: token.dotActiveBorderColor
   })), "".concat(componentCls, "-handle"), {
     position: 'absolute',
-    width: token.handleSize,
-    height: token.handleSize,
+    width: handleSize,
+    height: handleSize,
     outline: 'none',
+    userSelect: 'none',
+    // Dragging status
+    '&-dragging-delete': {
+      opacity: 0
+    },
     // 扩大选区
     '&::before': {
       content: '""',
       position: 'absolute',
-      insetInlineStart: calc(token.handleLineWidth).mul(-1).equal(),
-      insetBlockStart: calc(token.handleLineWidth).mul(-1).equal(),
-      width: calc(token.handleSize).add(calc(token.handleLineWidth).mul(2)).equal(),
-      height: calc(token.handleSize).add(calc(token.handleLineWidth).mul(2)).equal(),
+      insetInlineStart: calc(handleLineWidth).mul(-1).equal(),
+      insetBlockStart: calc(handleLineWidth).mul(-1).equal(),
+      width: calc(handleSize).add(calc(handleLineWidth).mul(2)).equal(),
+      height: calc(handleSize).add(calc(handleLineWidth).mul(2)).equal(),
       backgroundColor: 'transparent'
     },
     '&::after': {
@@ -74,36 +87,36 @@ var genBaseStyle = function genBaseStyle(token) {
       position: 'absolute',
       insetBlockStart: 0,
       insetInlineStart: 0,
-      width: token.handleSize,
-      height: token.handleSize,
+      width: handleSize,
+      height: handleSize,
       backgroundColor: token.colorBgElevated,
-      boxShadow: "0 0 0 ".concat(unit(token.handleLineWidth), " ").concat(token.handleColor),
+      boxShadow: "0 0 0 ".concat(unit(handleLineWidth), " ").concat(token.handleColor),
+      outline: "0px solid transparent",
       borderRadius: '50%',
       cursor: 'pointer',
-      transition: "\n            inset-inline-start ".concat(token.motionDurationMid, ",\n            inset-block-start ").concat(token.motionDurationMid, ",\n            width ").concat(token.motionDurationMid, ",\n            height ").concat(token.motionDurationMid, ",\n            box-shadow ").concat(token.motionDurationMid, "\n          ")
+      transition: "\n            inset-inline-start ".concat(motionDurationMid, ",\n            inset-block-start ").concat(motionDurationMid, ",\n            width ").concat(motionDurationMid, ",\n            height ").concat(motionDurationMid, ",\n            box-shadow ").concat(motionDurationMid, ",\n            outline ").concat(motionDurationMid, "\n          ")
     },
     '&:hover, &:active, &:focus': {
       '&::before': {
-        // -(
-        //   (token.handleSizeHover - token.handleSize) / 2 +
-        //   token.handleLineWidthHover
-        // ),
-        insetInlineStart: calc(token.handleSizeHover).sub(token.handleSize).div(2).add(token.handleLineWidthHover).mul(-1).equal(),
-        insetBlockStart: calc(token.handleSizeHover).sub(token.handleSize).div(2).add(token.handleLineWidthHover).mul(-1).equal(),
-        width: calc(token.handleSizeHover).add(calc(token.handleLineWidthHover).mul(2)).equal(),
-        height: calc(token.handleSizeHover).add(calc(token.handleLineWidthHover).mul(2)).equal()
+        insetInlineStart: calc(handleSizeHover).sub(handleSize).div(2).add(handleLineWidthHover).mul(-1).equal(),
+        insetBlockStart: calc(handleSizeHover).sub(handleSize).div(2).add(handleLineWidthHover).mul(-1).equal(),
+        width: calc(handleSizeHover).add(calc(handleLineWidthHover).mul(2)).equal(),
+        height: calc(handleSizeHover).add(calc(handleLineWidthHover).mul(2)).equal()
       },
       '&::after': {
-        boxShadow: "0 0 0 ".concat(unit(token.handleLineWidthHover), " ").concat(token.handleActiveColor),
-        width: token.handleSizeHover,
-        height: token.handleSizeHover,
-        insetInlineStart: token.calc(token.handleSize).sub(token.handleSizeHover).div(2).equal(),
-        insetBlockStart: token.calc(token.handleSize).sub(token.handleSizeHover).div(2).equal()
+        boxShadow: "0 0 0 ".concat(unit(handleLineWidthHover), " ").concat(handleActiveColor),
+        outline: "6px solid ".concat(handleActiveOutlineColor),
+        width: handleSizeHover,
+        height: handleSizeHover,
+        insetInlineStart: token.calc(handleSize).sub(handleSizeHover).div(2).equal(),
+        insetBlockStart: token.calc(handleSize).sub(handleSizeHover).div(2).equal()
       }
     }
-  }), "&-lock ".concat(componentCls, "-handle"), _defineProperty({}, "&::before, &::after", {
-    transition: 'none'
-  })), "".concat(componentCls, "-mark"), {
+  }), "&-lock ".concat(componentCls, "-handle"), {
+    '&::before, &::after': {
+      transition: 'none'
+    }
+  }), "".concat(componentCls, "-mark"), {
     position: 'absolute',
     fontSize: token.fontSize
   }), "".concat(componentCls, "-mark-text"), {
@@ -117,16 +130,16 @@ var genBaseStyle = function genBaseStyle(token) {
     '&-active': {
       color: token.colorText
     }
-  }), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_objectSpread2, "".concat(componentCls, "-step"), {
+  }), "".concat(componentCls, "-step"), {
     position: 'absolute',
     background: 'transparent',
     pointerEvents: 'none'
-  }), "".concat(componentCls, "-dot"), {
+  }), _defineProperty(_defineProperty(_defineProperty(_objectSpread2, "".concat(componentCls, "-dot"), {
     position: 'absolute',
     width: dotSize,
     height: dotSize,
     backgroundColor: token.colorBgElevated,
-    border: "".concat(unit(token.handleLineWidth), " solid ").concat(token.dotBorderColor),
+    border: "".concat(unit(handleLineWidth), " solid ").concat(token.dotBorderColor),
     borderRadius: '50%',
     cursor: 'pointer',
     transition: "border-color ".concat(token.motionDurationSlow),
@@ -148,9 +161,9 @@ var genBaseStyle = function genBaseStyle(token) {
   }), "".concat(componentCls, "-handle::after"), {
     backgroundColor: token.colorBgElevated,
     cursor: 'not-allowed',
-    width: token.handleSize,
-    height: token.handleSize,
-    boxShadow: "0 0 0 ".concat(unit(token.handleLineWidth), " ").concat(handleColorDisabled),
+    width: handleSize,
+    height: handleSize,
+    boxShadow: "0 0 0 ".concat(unit(handleLineWidth), " ").concat(handleColorDisabled),
     insetInlineStart: 0,
     insetBlockStart: 0
   }), "\n          ".concat(componentCls, "-mark-text,\n          ").concat(componentCls, "-dot\n        "), {
@@ -215,7 +228,9 @@ export var prepareComponentToken = function prepareComponentToken(token) {
   var controlSize = token.controlHeightLG / 4;
   var controlSizeHover = token.controlHeightSM / 2;
   var handleLineWidth = token.lineWidth + increaseHandleWidth;
-  var handleLineWidthHover = token.lineWidth + increaseHandleWidth * 3;
+  var handleLineWidthHover = token.lineWidth + increaseHandleWidth * 1.5;
+  var handleActiveColor = token.colorPrimary;
+  var handleActiveOutlineColor = new TinyColor(handleActiveColor).setAlpha(0.2).toRgbString();
   return {
     controlSize: controlSize,
     railSize: 4,
@@ -226,10 +241,11 @@ export var prepareComponentToken = function prepareComponentToken(token) {
     handleLineWidthHover: handleLineWidthHover,
     railBg: token.colorFillTertiary,
     railHoverBg: token.colorFillSecondary,
-    trackBg: token.colorPrimary,
-    trackHoverBg: token.colorPrimary,
+    trackBg: token.colorPrimaryBorder,
+    trackHoverBg: token.colorPrimaryBorderHover,
     handleColor: token.colorPrimaryBorder,
-    handleActiveColor: token.colorPrimary,
+    handleActiveColor: handleActiveColor,
+    handleActiveOutlineColor: handleActiveOutlineColor,
     handleColorDisabled: new TinyColor(token.colorTextDisabled).onBackground(token.colorBgContainer).toHexShortString(),
     dotBorderColor: token.colorBorderSecondary,
     dotActiveBorderColor: token.colorPrimaryBorder,

package/lib/Antd5/space/Compact.js

@@ -80,7 +80,7 @@ var Compact = function Compact(props) {
   var childNodes = toArray(children);
   var nodes = React.useMemo(function () {
     return childNodes.map(function (child, i) {
-      var key = child && child.key || "".concat(prefixCls, "-item-").concat(i);
+      var key = (child === null || child === void 0 ? void 0 : child.key) || "".concat(prefixCls, "-item-").concat(i);
       return _jsx(CompactItem, {
         compactSize: mergedSize,
         compactDirection: direction,

package/lib/Antd5/space/index.js

@@ -25,13 +25,13 @@ import Item from './Item';
 import useStyle from './style';
 export { SpaceContext } from './context';
 var InternalSpace = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _customClassNames$ite, _space$classNames;
+  var _space$size, _customClassNames$ite, _space$classNames;
   var _React$useContext = React.useContext(ConfigContext),
     getPrefixCls = _React$useContext.getPrefixCls,
     space = _React$useContext.space,
     directionConfig = _React$useContext.direction;
   var _props$size = props.size,
-    size = _props$size === void 0 ? (space === null || space === void 0 ? void 0 : space.size) || 'small' : _props$size,
+    size = _props$size === void 0 ? (_space$size = space === null || space === void 0 ? void 0 : space.size) !== null && _space$size !== void 0 ? _space$size : 'small' : _props$size,
     align = props.align,
     className = props.className,
     rootClassName = props.rootClassName,
@@ -73,7 +73,7 @@ var InternalSpace = /*#__PURE__*/React.forwardRef(function (props, ref) {
     if (child !== null && child !== undefined) {
       latestIndex = i;
     }
-    var key = child && child.key || "".concat(itemClassName, "-").concat(i);
+    var key = (child === null || child === void 0 ? void 0 : child.key) || "".concat(itemClassName, "-").concat(i);
     return _jsx(Item, {
       className: itemClassName,
       index: i,

package/lib/Antd5/spin/Indicator/Looper.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import classNames from 'classnames';
+import Progress from './Progress';
+export default function Looper(props) {
+  var prefixCls = props.prefixCls,
+    _props$percent = props.percent,
+    percent = _props$percent === void 0 ? 0 : _props$percent;
+  var dotClassName = "".concat(prefixCls, "-dot");
+  var holderClassName = "".concat(dotClassName, "-holder");
+  var hideClassName = "".concat(holderClassName, "-hidden");
+  // ===================== Render =====================
+  return _jsxs(_Fragment, {
+    children: [_jsx("span", {
+      className: classNames(holderClassName, percent > 0 && hideClassName),
+      children: _jsx("span", {
+        className: classNames(dotClassName, "".concat(prefixCls, "-dot-spin")),
+        children: [1, 2, 3, 4].map(function (i) {
+          return _jsx("i", {
+            className: "".concat(prefixCls, "-dot-item")
+          }, i);
+        })
+      })
+    }), _jsx(Progress, {
+      prefixCls: prefixCls,
+      percent: percent
+    })]
+  });
+}

package/lib/Antd5/spin/Indicator/Progress.js

@@ -0,0 +1,78 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import classNames from 'classnames';
+import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect';
+var viewSize = 100;
+var borderWidth = viewSize / 5;
+var radius = viewSize / 2 - borderWidth / 2;
+var circumference = radius * 2 * Math.PI;
+var position = 50;
+var CustomCircle = function CustomCircle(props) {
+  var dotClassName = props.dotClassName,
+    style = props.style,
+    hasCircleCls = props.hasCircleCls;
+  return _jsx("circle", {
+    className: classNames("".concat(dotClassName, "-circle"), _defineProperty({}, "".concat(dotClassName, "-circle-bg"), hasCircleCls)),
+    r: radius,
+    cx: position,
+    cy: position,
+    strokeWidth: borderWidth,
+    style: style
+  });
+};
+var Progress = function Progress(_ref) {
+  var percent = _ref.percent,
+    prefixCls = _ref.prefixCls;
+  var dotClassName = "".concat(prefixCls, "-dot");
+  var holderClassName = "".concat(dotClassName, "-holder");
+  var hideClassName = "".concat(holderClassName, "-hidden");
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    render = _React$useState2[0],
+    setRender = _React$useState2[1];
+  // ==================== Visible =====================
+  useLayoutEffect(function () {
+    if (percent !== 0) {
+      setRender(true);
+    }
+  }, [percent !== 0]);
+  // ==================== Progress ====================
+  var safePtg = Math.max(Math.min(percent, 100), 0);
+  // ===================== Render =====================
+  if (!render) {
+    return null;
+  }
+  var circleStyle = {
+    strokeDashoffset: "".concat(circumference / 4),
+    strokeDasharray: "".concat(circumference * safePtg / 100, " ").concat(circumference * (100 - safePtg) / 100)
+  };
+  return _jsx("span", {
+    className: classNames(holderClassName, "".concat(dotClassName, "-progress"), safePtg <= 0 && hideClassName),
+    children: _jsxs("svg", {
+      viewBox: "0 0 ".concat(viewSize, " ").concat(viewSize),
+      // biome-ignore lint/a11y/noNoninteractiveElementToInteractiveRole: progressbar could be readonly
+      role: "progressbar",
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-valuenow": safePtg,
+      children: [_jsx(CustomCircle, {
+        dotClassName: dotClassName,
+        hasCircleCls: true
+      }), _jsx(CustomCircle, {
+        dotClassName: dotClassName,
+        style: circleStyle
+      })]
+    })
+  });
+};
+export default Progress;

package/lib/Antd5/spin/Indicator/index.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import classNames from 'classnames';
+import { cloneElement } from '../../_util/reactNode';
+import Looper from './Looper';
+export default function Indicator(props) {
+  var prefixCls = props.prefixCls,
+    indicator = props.indicator,
+    percent = props.percent;
+  var dotClassName = "".concat(prefixCls, "-dot");
+  if (indicator && /*#__PURE__*/React.isValidElement(indicator)) {
+    return cloneElement(indicator, {
+      className: classNames(indicator.props.className, dotClassName),
+      percent: percent
+    });
+  }
+  return _jsx(Looper, {
+    prefixCls: prefixCls,
+    percent: percent
+  });
+}