@nutui/nutui-react-taro 3.0.0-beta.0 → 3.0.0-beta.1

package/dist/cjs/packages/progress/progress.js

@@ -18,9 +18,12 @@ var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
 var _taro = /*#__PURE__*/ _interop_require_default._(require("@tarojs/taro"));
+var _components = require("@tarojs/components");
+var _pxtransform = /*#__PURE__*/ _interop_require_default._(require("../../utils/px-transform"));
 var _typings = require("../../utils/typings");
 var _index = require("../configprovider/index");
 var _useuuid = /*#__PURE__*/ _interop_require_default._(require("../../utils/use-uuid"));
+var _platformtaro = require("../../utils/platform-taro");
 var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
     percent: 0,
     showText: false,
@@ -47,14 +50,18 @@ var Progress = function Progress(props) {
     var _obj;
     var classesInner = (0, _classnames.default)((_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-inner"), true), (0, _define_property._)(_obj, "".concat(classPrefix, "-active"), animated), _obj));
     var stylesOuter = {
-        height: "".concat(strokeWidth, "px"),
-        background: background
+        width: '100%',
+        backgroundColor: background
     };
-    var _useState = (0, _sliced_to_array._)((0, _react.useState)(0), 2), displayPercent = _useState[0], setDispalyPercent = _useState[1];
+    var _useState = (0, _sliced_to_array._)((0, _react.useState)(percent), 2), displayPercent = _useState[0], setDispalyPercent = _useState[1];
     var stylesInner = {
         width: "".concat(displayPercent, "%"),
-        background: color
+        backgroundColor: color || '#FF0F23'
     };
+    if (strokeWidth) {
+        stylesOuter.height = (0, _pxtransform.default)(Number(strokeWidth));
+        stylesInner.height = (0, _pxtransform.default)(Number(strokeWidth));
+    }
     var handlePercent = function handlePercent() {
         var timer = null;
         if (delay) {
@@ -64,7 +71,7 @@ var Progress = function Progress(props) {
             }, delay);
         }
         return function() {
-            lazy && resetObserver(_taro.default.getEnv());
+            lazy && resetObserver();
             timer && clearTimeout(timer);
         };
     };
@@ -78,9 +85,9 @@ var Progress = function Progress(props) {
     var webObserver = (0, _react.useRef)(null);
     var uuid = (0, _useuuid.default)();
     var selector = "".concat(classPrefix, "-lazy-").concat(uuid);
-    var resetObserver = function resetObserver(env) {
-        var observer = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : null;
-        if (env === 'WEB') {
+    var resetObserver = function resetObserver() {
+        var observer = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : null;
+        if ((0, _platformtaro.web)()) {
             webObserver.current.disconnect && webObserver.current.disconnect();
         } else {
             observer && observer.disconnect();
@@ -135,35 +142,68 @@ var Progress = function Progress(props) {
         handlePercent();
     };
     (0, _react.useEffect)(function() {
-        if (_taro.default.getEnv() === 'WEB') {
+        if ((0, _platformtaro.web)()) {
             handleWebObserver();
-        } else {
+        } else if (!(0, _platformtaro.harmonyAndRn)()) {
             handleOtherObserver();
         }
     }, []);
-    return /*#__PURE__*/ _react.default.createElement("div", (0, _object_spread._)({
+    var getTextStyle = function getTextStyle() {
+        var value = (0, _platformtaro.harmony)() ? '93%' : '99%';
+        return rtl ? {
+            right: value
+        } : {
+            left: value
+        };
+    };
+    var computeRight = function computeRight() {
+        if (children) {
+            return 0;
+        }
+        if (!(0, _platformtaro.harmonyAndRn)()) {
+            return Math.floor("".concat(percent, "%").length * 9 / 2);
+        }
+        if ((0, _platformtaro.rn)()) {
+            return "".concat(percent, "%").length * 9 + 4;
+        }
+        return Math.floor(("".concat(percent, "%").length * 9 + 4) / 2);
+    };
+    var computeInnerStyle = function computeInnerStyle() {
+        var style = {
+            backgroundColor: color || '#ff0f23'
+        };
+        if ((0, _platformtaro.harmonyAndRn)()) {
+            style.width = (0, _platformtaro.harmony)() ? (0, _pxtransform.default)("".concat(percent, "%").length * 9 + 4) : "".concat(percent, "%").length * 9 + 4;
+        }
+        return style;
+    };
+    return /*#__PURE__*/ _react.default.createElement(_components.View, (0, _object_spread._)({
         ref: progressRef,
         id: selector,
         className: (0, _classnames.default)(classPrefix, className),
         style: style
-    }, rest), /*#__PURE__*/ _react.default.createElement("div", {
+    }, rest), /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: "".concat(classPrefix, "-outer"),
         style: stylesOuter
-    }, /*#__PURE__*/ _react.default.createElement("div", {
+    }, /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: classesInner,
-        style: stylesInner
-    }, showText && /*#__PURE__*/ _react.default.createElement("div", {
+        style: (0, _object_spread_props._)((0, _object_spread._)({}, stylesInner), {
+            position: 'relative'
+        })
+    }, showText && /*#__PURE__*/ _react.default.createElement(_components.View, {
+        style: (0, _define_property._)({
+            position: 'relative'
+        }, rtl ? 'left' : 'right', computeRight())
+    }, /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: "".concat(classPrefix, "-text"),
-        style: rtl ? {
-            right: "".concat(displayPercent, "%")
-        } : {
-            left: "".concat(displayPercent, "%")
-        }
-    }, children || /*#__PURE__*/ _react.default.createElement("div", {
+        style: (0, _object_spread_props._)((0, _object_spread._)({}, getTextStyle()), {
+            height: (0, _platformtaro.harmony)() ? (0, _pxtransform.default)(strokeWidth ? Number(strokeWidth) + 8 : 18) : strokeWidth ? Number(strokeWidth) + 8 : 18,
+            position: 'absolute',
+            top: -(strokeWidth ? (Number(strokeWidth) + 8 - 9) / 2 + 5 : 9)
+        })
+    }, children || /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: "".concat(classPrefix, "-text-inner"),
-        style: {
-            background: color
-        }
-    }, percent, "%")))));
+        style: computeInnerStyle()
+    }, "".concat(percent, "%")))))));
 };
 Progress.displayName = 'NutProgress';

package/dist/cjs/packages/progress/style/progress.scss

@@ -29,7 +29,7 @@
     justify-content: center;
     transition: all 0.4s;
     border-radius: $progress-border-radius;
-    background: $progress-color;
+    background-color: $progress-color;
   }
 
   &-text {
@@ -39,10 +39,12 @@
     top: $progress-text-position-top;
     bottom: $progress-text-position-bottom;
     transition: all 0.4s;
-    transform: translate(-50%);
+    // transform: translate(-50%);
 
     &-inner {
       display: flex;
+      flex-direction: row;
+      justify-content: center;
       align-items: center;
       height: 100%;
       width: 100%;

package/dist/cjs/packages/progress/style/style.css

@@ -8,7 +8,7 @@
   flex: auto;
   border-radius: var(--nutui-progress-border-radius, 12px);
   height: var(--nutui-progress-height, 10px);
-  background: var(--nutui-progress-background, var(--nutui-gray-3, #f5f6fa));
+  background: var(--nutui-progress-background, var(--nutui-color-background, #f5f6fa));
 }
 .nut-progress-outer .nut-progress-active:before {
   content: "";
@@ -27,7 +27,7 @@
   justify-content: center;
   transition: all 0.4s;
   border-radius: var(--nutui-progress-border-radius, 12px);
-  background: var(--nutui-progress-color, linear-gradient(135deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%));
+  background-color: var(--nutui-progress-color, #ff0f23);
 }
 .nut-progress-text {
   display: flex;
@@ -36,10 +36,11 @@
   top: var(--nutui-progress-text-position-top, -4px);
   bottom: var(--nutui-progress-text-position-bottom, -4px);
   transition: all 0.4s;
-  transform: translate(-50%);
 }
 .nut-progress-text-inner {
   display: flex;
+  flex-direction: row;
+  justify-content: center;
   align-items: center;
   height: 100%;
   width: 100%;
@@ -48,7 +49,7 @@
   border-radius: var(--nutui-progress-text-border-radius, 5px);
   font-size: var(--nutui-progress-text-font-size, 9px);
   line-height: 1;
-  background: var(--nutui-progress-text-background, var(--nutui-progress-color, linear-gradient(135deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%)));
+  background: var(--nutui-progress-text-background, #ff0f23);
 }
 @keyframes progressActive {
   0% {

package/dist/cjs/packages/progress/style/style.harmony.css

@@ -8,7 +8,7 @@
   flex: auto;
   border-radius: 12px;
   height: 10px;
-  background: #F7F8FC;
+  background: #f5f6fa;
 }
 .nut-progress-outer .nut-progress-active:before {
   content: "";
@@ -27,7 +27,7 @@
   justify-content: center;
   transition: all 0.4s;
   border-radius: 12px;
-  background: linear-gradient(135deg, #FF0F23 0%, #FF0F23 100%);
+  background-color: #ff0f23;
 }
 .nut-progress-text {
   display: flex;
@@ -36,10 +36,11 @@
   top: -4px;
   bottom: -4px;
   transition: all 0.4s;
-  transform: translate(-50%);
 }
 .nut-progress-text-inner {
   display: flex;
+  flex-direction: row;
+  justify-content: center;
   align-items: center;
   height: 100%;
   width: 100%;
@@ -48,7 +49,7 @@
   border-radius: 5px;
   font-size: 9px;
   line-height: 1;
-  background: linear-gradient(135deg, #FF0F23 0%, #FF0F23 100%);
+  background: #ff0f23;
 }
 @keyframes progressActive {
   0% {

package/dist/cjs/packages/pulltorefresh/pulltorefresh.js

@@ -11,6 +11,7 @@ Object.defineProperty(exports, "PullToRefresh", {
 var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
 var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 var _async_to_generator = require("@swc/helpers/_/_async_to_generator");
+var _define_property = require("@swc/helpers/_/_define_property");
 var _object_spread = require("@swc/helpers/_/_object_spread");
 var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
@@ -25,6 +26,8 @@ var _usetouch = require("../../utils/use-touch");
 var _rubberband = require("../../utils/rubberband");
 var _sleep = require("../../utils/sleep");
 var _typings = require("../../utils/typings");
+var _pxtransform = /*#__PURE__*/ _interop_require_default._(require("../../utils/px-transform"));
+var _platformtaro = require("../../utils/platform-taro");
 var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
     type: 'default',
     pullingText: '',
@@ -57,8 +60,9 @@ var PullToRefresh = function PullToRefresh(p) {
     var pullingRef = (0, _react.useRef)(false);
     var _useState = (0, _sliced_to_array._)((0, _react.useState)('pulling'), 2), status = _useState[0], setStatus = _useState[1];
     var _useState1 = (0, _sliced_to_array._)((0, _react.useState)(0), 2), height = _useState1[0], setHeight = _useState1[1];
+    var timer = (0, _react.useRef)();
     var renderIcons = function renderIcons(status) {
-        return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, (status === 'pulling' || status === 'complete') && /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.Loading, null), (status === 'canRelease' || status === 'refreshing') && /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.More, null));
+        return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, (status === 'pulling' || status === 'complete') && (!(0, _platformtaro.harmonyAndRn)() ? /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.Loading, null) : null), (status === 'canRelease' || status === 'refreshing') && (!(0, _platformtaro.harmonyAndRn)() ? /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.More, null) : null));
     };
     var renderStatusIcon = function renderStatusIcon() {
         if (props.renderIcon) {
@@ -79,10 +83,11 @@ var PullToRefresh = function PullToRefresh(p) {
         return '';
     };
     var handleTouchStart = function handleTouchStart(e) {
+        if (props.disabled) return;
         touch.start(e);
     };
     var handleTouchMove = function handleTouchMove(e) {
-        if (props.scrollTop > 0) {
+        if (props.scrollTop > 0 || props.disabled) {
             return;
         }
         if (status === 'refreshing' || status === 'complete') return;
@@ -93,6 +98,12 @@ var PullToRefresh = function PullToRefresh(p) {
             setHeight(Math.max((0, _rubberband.rubberbandIfOutOfBounds)(touch.deltaY.current, 0, 0, headHeight * 5, 0.5), 0));
             setStatus(height > threshold ? 'canRelease' : 'pulling');
         }
+        clearTimeout(timer.current);
+        if ((0, _platformtaro.rn)()) {
+            timer.current = setTimeout(function() {
+                handleTouchEnd();
+            }, 300);
+        }
     };
     function _doRefresh() {
         _doRefresh = (0, _async_to_generator._)(function() {
@@ -150,6 +161,7 @@ var PullToRefresh = function PullToRefresh(p) {
         return _doRefresh.apply(this, arguments);
     }
     var handleTouchEnd = function handleTouchEnd() {
+        if (props.disabled) return;
         pullingRef.current = false;
         if (status === 'canRelease') {
             doRefresh();
@@ -163,10 +175,11 @@ var PullToRefresh = function PullToRefresh(p) {
     // 安卓微信小程序onTouchMove回调次数少导致下拉卡顿，增加动效会更顺畅
     var isAndroidWeApp = _taro.default.getSystemInfoSync().platform === 'android' && _taro.default.getEnv() === 'WEAPP';
     var springStyles = (0, _object_spread._)({
-        height: "".concat(height, "px")
+        height: (0, _pxtransform.default)(height)
     }, !pullingRef.current || isAndroidWeApp ? {
         transition: 'height .3s ease'
     } : {});
+    var _obj, _obj1, _obj2, _obj3, _obj4;
     return /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: classes,
         style: props.style,
@@ -175,15 +188,18 @@ var PullToRefresh = function PullToRefresh(p) {
         onTouchEnd: handleTouchEnd
     }, /*#__PURE__*/ _react.default.createElement(_components.View, {
         style: springStyles,
-        className: "".concat(classPrefix, "-head")
+        className: (0, _classnames.default)((_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-head"), true), (0, _define_property._)(_obj, "".concat(classPrefix, "-primary-head"), props.type === 'primary'), _obj))
     }, /*#__PURE__*/ _react.default.createElement(_components.View, {
-        className: "".concat(classPrefix, "-head-content"),
+        className: (0, _classnames.default)((_obj1 = {}, (0, _define_property._)(_obj1, "".concat(classPrefix, "-head-content"), true), (0, _define_property._)(_obj1, "".concat(classPrefix, "-primary-head-content"), props.type === 'primary'), _obj1)),
         style: {
-            height: headHeight
+            height: (0, _pxtransform.default)(headHeight)
         }
-    }, /*#__PURE__*/ _react.default.createElement(_components.View, null, renderStatusIcon()), /*#__PURE__*/ _react.default.createElement(_components.View, null, renderStatusText()))), /*#__PURE__*/ _react.default.createElement(_components.View, {
-        className: "".concat(classPrefix, "-content")
+    }, /*#__PURE__*/ _react.default.createElement(_components.View, {
+        className: (0, _classnames.default)((_obj2 = {}, (0, _define_property._)(_obj2, "".concat(classPrefix, "-status-icon"), true), (0, _define_property._)(_obj2, "".concat(classPrefix, "-primary-status-icon"), props.type === 'primary'), _obj2))
+    }, renderStatusIcon()), /*#__PURE__*/ _react.default.createElement(_components.View, {
+        className: (0, _classnames.default)((_obj3 = {}, (0, _define_property._)(_obj3, "".concat(classPrefix, "-status-text"), true), (0, _define_property._)(_obj3, "".concat(classPrefix, "-primary-status-text"), props.type === 'primary'), _obj3))
+    }, renderStatusText()))), /*#__PURE__*/ _react.default.createElement(_components.View, {
+        className: (0, _classnames.default)((_obj4 = {}, (0, _define_property._)(_obj4, "".concat(classPrefix, "-content"), true), (0, _define_property._)(_obj4, "".concat(classPrefix, "-primary-content}"), props.type === 'primary'), _obj4))
     }, props.children));
 };
-PullToRefresh.defaultProps = defaultProps;
 PullToRefresh.displayName = 'NutPullToRefresh';

package/dist/cjs/packages/pulltorefresh/style/pulltorefresh.scss

@@ -25,15 +25,20 @@
 
   &-primary {
     background: $pulltorefresh-color-primary;
-    .nut-pulltorefresh-content {
+
+    &-content {
       color: $color-text-dark;
     }
 
-    .nut-pulltorefresh-head {
+    &-head {
       &-content {
         color: $color-text-dark;
       }
     }
+
+    &-status-text {
+      color: $white;
+    }
   }
 }
 

package/dist/cjs/packages/pulltorefresh/style/style.css

@@ -8,7 +8,7 @@
   bottom: 0;
   left: 0;
   width: 100%;
-  color: var(--nutui-gray-7, #1a1a1a);
+  color: var(--nutui-color-title, #1a1a1a);
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -22,12 +22,15 @@
 .nut-pulltorefresh-primary {
   background: var(--nutui-pulltorefresh-color-primary, var(--nutui-color-primary, #ff0f23));
 }
-.nut-pulltorefresh-primary .nut-pulltorefresh-content {
+.nut-pulltorefresh-primary-content {
   color: var(--nutui-white-12);
 }
-.nut-pulltorefresh-primary .nut-pulltorefresh-head-content {
+.nut-pulltorefresh-primary-head-content {
   color: var(--nutui-white-12);
 }
+.nut-pulltorefresh-primary-status-text {
+  color: #ffffff;
+}
 
 [dir=rtl] .nut-pulltorefresh-head-content,
 .nut-rtl .nut-pulltorefresh-head-content {

package/dist/cjs/packages/pulltorefresh/style/style.harmony.css

@@ -8,7 +8,7 @@
   bottom: 0;
   left: 0;
   width: 100%;
-  color: #1A1A1A;
+  color: #1a1a1a;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -19,6 +19,18 @@
   height: 26px;
   margin-bottom: 4px;
 }
+.nut-pulltorefresh-primary {
+  background: #ff0f23;
+}
+.nut-pulltorefresh-primary-content {
+  color: rgba(255, 255, 255, 0.9);
+}
+.nut-pulltorefresh-primary-head-content {
+  color: rgba(255, 255, 255, 0.9);
+}
+.nut-pulltorefresh-primary-status-text {
+  color: #ffffff;
+}
 
 [dir=rtl] .nut-pulltorefresh-head-content,
 .nut-rtl .nut-pulltorefresh-head-content {

package/dist/cjs/packages/radio/radio.js

@@ -72,17 +72,6 @@ var Radio = function Radio(props) {
             }
         };
     }
-    var renderLabel = function renderLabel() {
-        return /*#__PURE__*/ _react.default.createElement(_components.View, {
-            className: (0, _classnames.default)("".concat(classPrefix, "-label"), (0, _define_property._)({}, "".concat(classPrefix, "-label-disabled"), disabled))
-        }, children);
-    };
-    var renderButton = function renderButton() {
-        var _obj;
-        return /*#__PURE__*/ _react.default.createElement(_components.View, {
-            className: (0, _classnames.default)("".concat(classPrefix, "-button"), (_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-button-active"), checkedStatement), (0, _define_property._)(_obj, "".concat(classPrefix, "-button-disabled"), disabled), _obj))
-        }, children);
-    };
     var color = function color() {
         var _obj;
         return _obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-icon-disabled"), disabled), (0, _define_property._)(_obj, "".concat(classPrefix, "-icon"), !checkedStatement), (0, _define_property._)(_obj, "".concat(classPrefix, "-icon-checked"), checkedStatement), _obj;
@@ -107,8 +96,21 @@ var Radio = function Radio(props) {
             className: (0, _classnames.default)(color())
         });
     };
+    var renderLabel = function renderLabel() {
+        var labelcls = (0, _classnames.default)("".concat(classPrefix, "-label"), (0, _define_property._)({}, "".concat(classPrefix, "-label-disabled"), disabled));
+        return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, renderIcon(), /*#__PURE__*/ _react.default.createElement("div", {
+            className: labelcls
+        }, children));
+    };
+    var renderButton = function renderButton() {
+        var _obj;
+        var buttoncls = (0, _classnames.default)("".concat(classPrefix, "-button"), (_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-button-active"), checkedStatement), (0, _define_property._)(_obj, "".concat(classPrefix, "-button-disabled"), disabled), _obj));
+        return /*#__PURE__*/ _react.default.createElement("div", {
+            className: buttoncls
+        }, children);
+    };
     var renderByShape = function renderByShape(shape) {
-        return shape === 'button' ? renderButton() : /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, renderIcon(), renderLabel());
+        return shape === 'button' ? renderButton() : renderLabel();
     };
     var renderRadioItem = function renderRadioItem() {
         return renderByShape(context && context.shape ? context.shape : shape);
@@ -117,12 +119,12 @@ var Radio = function Radio(props) {
         if (disabled || checkedStatement) return;
         setCheckedStatement(!checkedStatement);
     };
+    var cls = (0, _classnames.default)(classPrefix, (0, _define_property._)({}, "".concat(classPrefix, "-reverse"), labelPosition === 'left'), className);
     return /*#__PURE__*/ _react.default.createElement(_components.View, {
-        className: (0, _classnames.default)(classPrefix, (0, _define_property._)({}, "".concat(classPrefix, "-reverse"), labelPosition === 'left'), className),
+        className: cls,
         style: style,
         onClick: handleClick
     }, renderRadioItem());
 };
-Radio.defaultProps = defaultProps;
 Radio.displayName = 'NutRadio';
 Radio.Group = _index.default;

package/dist/cjs/packages/radio/style/radio.scss

@@ -39,7 +39,7 @@
       color: $color-primary;
 
       &.nut-radio-icon-disabled {
-        color: $color-primary-disabled;
+        color: $color-primary-disabled-special;
       }
     }
 
@@ -60,7 +60,7 @@
     border: 1px solid $radio-button-background;
 
     &-active {
-      background: $color-primary-light;
+      background: $color-primary-light-pressed;
       color: $color-primary;
       border: $radio-button-active-border;
     }

package/dist/cjs/packages/radio/style/style.css

@@ -16,7 +16,7 @@
 }
 .nut-radiogroup-vertical .nut-radio-button-active {
   border: var(--nutui-radio-button-active-border, 1px solid var(--nutui-color-primary, #ff0f23));
-  background-color: var(--nutui-color-primary-light, #ffebf1);
+  background-color: var(--nutui-color-primary-light-pressed, #ffebf1);
 }
 .nut-radiogroup-horizontal .nut-radio {
   display: inline-flex;
@@ -26,7 +26,7 @@
 }
 .nut-radiogroup-horizontal .nut-radio-button-active {
   border: var(--nutui-radio-button-active-border, 1px solid var(--nutui-color-primary, #ff0f23));
-  background-color: var(--nutui-color-primary-light, #ffebf1);
+  background-color: var(--nutui-color-primary-light-pressed, #ffebf1);
 }
 .nut-radiogroup .nut-radio-button-active.nut-radio-button-disabled {
   background: var(--nutui-color-text-disabled, #c2c4cc);
@@ -58,8 +58,8 @@
 }
 .nut-radio-label {
   margin-left: var(--nutui-radio-label-margin-left, 4px);
-  font-size: var(--nutui-radio-label-font-size, var(--nutui-font-size-2, 12px));
-  color: var(--nutui-radio-label-color, var(--nutui-gray-7, #1a1a1a));
+  font-size: var(--nutui-radio-label-font-size, var(--nutui-font-size-s, 12px));
+  color: var(--nutui-radio-label-color, var(--nutui-color-title, #1a1a1a));
 }
 .nut-radio-label-disabled {
   color: var(--nutui-radio-label-disable-color, var(--nutui-color-text-disabled, #c2c4cc));
@@ -68,13 +68,13 @@
   color: var(--nutui-color-text-disabled, #c2c4cc);
   transition-duration: 0.3s;
   transition-property: color, border-color, background-color;
-  font-size: var(--nutui-radio-icon-font-size, var(--nutui-font-size-4, 16px));
+  font-size: var(--nutui-radio-icon-font-size, var(--nutui-font-size-l, 16px));
 }
 .nut-radio-icon-checked {
   color: var(--nutui-color-primary, #ff0f23);
 }
 .nut-radio-icon-checked.nut-radio-icon-disabled {
-  color: var(--nutui-color-primary-disabled, #ffadbe);
+  color: var(--nutui-color-primary-disabled-special, #ffadbe);
 }
 .nut-radio-icon-disabled {
   color: var(--nutui-color-text-disabled, #c2c4cc);
@@ -83,15 +83,15 @@
   display: inline-flex;
   align-items: center;
   padding: var(--nutui-radio-button-padding, 5px 18px);
-  font-size: var(--nutui-radio-button-font-size, var(--nutui-font-size-2, 12px));
+  font-size: var(--nutui-radio-button-font-size, var(--nutui-font-size-s, 12px));
   background: var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05));
   border-radius: var(--nutui-radio-button-border-radius, 15px);
-  color: var(--nutui-radio-label-color, var(--nutui-gray-7, #1a1a1a));
+  color: var(--nutui-radio-label-color, var(--nutui-color-title, #1a1a1a));
   box-sizing: border-box;
   border: 1px solid var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05));
 }
 .nut-radio-button-active {
-  background: var(--nutui-color-primary-light, #ffebf1);
+  background: var(--nutui-color-primary-light-pressed, #ffebf1);
   color: var(--nutui-color-primary, #ff0f23);
   border: var(--nutui-radio-button-active-border, 1px solid var(--nutui-color-primary, #ff0f23));
 }

package/dist/cjs/packages/radiogroup/radiogroup.js

@@ -40,6 +40,7 @@ var RadioGroup = /*#__PURE__*/ _react.default.forwardRef(function(props, ref) {
         "options",
         "disabled"
     ]);
+    var cls = (0, _classnames.default)(classPrefix, (0, _define_property._)({}, "".concat(classPrefix, "-").concat(props.direction), props.direction), className);
     var _usePropsValue = (0, _sliced_to_array._)((0, _usepropsvalue.usePropsValue)({
         defaultValue: props.defaultValue,
         value: props.value,
@@ -65,7 +66,9 @@ var RadioGroup = /*#__PURE__*/ _react.default.forwardRef(function(props, ref) {
             }));
         });
     }, [
-        options
+        options,
+        labelPosition,
+        val2State
     ]);
     return /*#__PURE__*/ _react.default.createElement(_context.default.Provider, {
         value: {
@@ -81,8 +84,7 @@ var RadioGroup = /*#__PURE__*/ _react.default.forwardRef(function(props, ref) {
             }
         }
     }, /*#__PURE__*/ _react.default.createElement("div", (0, _object_spread._)({
-        className: (0, _classnames.default)(classPrefix, (0, _define_property._)({}, "".concat(classPrefix, "-").concat(props.direction), props.direction), className)
+        className: cls
     }, rest), (options === null || options === void 0 ? void 0 : options.length) ? renderOptionsChildren() : children));
 });
-RadioGroup.defaultProps = defaultProps;
 RadioGroup.displayName = 'NutRadioGroup';

package/dist/cjs/packages/radiogroup/style/radiogroup.scss

@@ -24,7 +24,7 @@
 
       &-button-active {
         border: $radio-button-active-border;
-        background-color: $color-primary-light;
+        background-color: $color-primary-light-pressed;
       }
     }
   }
@@ -39,7 +39,7 @@
 
       &-button-active {
         border: $radio-button-active-border;
-        background-color: $color-primary-light;
+        background-color: $color-primary-light-pressed;
       }
     }
   }

package/dist/cjs/packages/radiogroup/style/style.css

@@ -16,7 +16,7 @@
 }
 .nut-radiogroup-vertical .nut-radio-button-active {
   border: var(--nutui-radio-button-active-border, 1px solid var(--nutui-color-primary, #ff0f23));
-  background-color: var(--nutui-color-primary-light, #ffebf1);
+  background-color: var(--nutui-color-primary-light-pressed, #ffebf1);
 }
 .nut-radiogroup-horizontal .nut-radio {
   display: inline-flex;
@@ -26,7 +26,7 @@
 }
 .nut-radiogroup-horizontal .nut-radio-button-active {
   border: var(--nutui-radio-button-active-border, 1px solid var(--nutui-color-primary, #ff0f23));
-  background-color: var(--nutui-color-primary-light, #ffebf1);
+  background-color: var(--nutui-color-primary-light-pressed, #ffebf1);
 }
 .nut-radiogroup .nut-radio-button-active.nut-radio-button-disabled {
   background: var(--nutui-color-text-disabled, #c2c4cc);