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

package/dist/es/packages/progress/progress.js

@@ -6,9 +6,12 @@ import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
 import React, { useEffect, useRef, useState } from "react";
 import classNames from "classnames";
 import Taro from "@tarojs/taro";
+import { View } from "@tarojs/components";
+import pxTransform from "../../utils/px-transform";
 import { ComponentDefaults } from "../../utils/typings";
 import { useRtl } from "../configprovider/index";
 import useUuid from "../../utils/use-uuid";
+import { harmony, harmonyAndRn, rn, web } from "../../utils/platform-taro";
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     percent: 0,
     showText: false,
@@ -35,14 +38,18 @@ export var Progress = function(props) {
     var _obj;
     var classesInner = classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix, "-inner"), true), _define_property(_obj, "".concat(classPrefix, "-active"), animated), _obj));
     var stylesOuter = {
-        height: "".concat(strokeWidth, "px"),
-        background: background
+        width: '100%',
+        backgroundColor: background
     };
-    var _useState = _sliced_to_array(useState(0), 2), displayPercent = _useState[0], setDispalyPercent = _useState[1];
+    var _useState = _sliced_to_array(useState(percent), 2), displayPercent = _useState[0], setDispalyPercent = _useState[1];
     var stylesInner = {
         width: "".concat(displayPercent, "%"),
-        background: color
+        backgroundColor: color || '#FF0F23'
     };
+    if (strokeWidth) {
+        stylesOuter.height = pxTransform(Number(strokeWidth));
+        stylesInner.height = pxTransform(Number(strokeWidth));
+    }
     var handlePercent = function() {
         var timer = null;
         if (delay) {
@@ -52,7 +59,7 @@ export var Progress = function(props) {
             }, delay);
         }
         return function() {
-            lazy && resetObserver(Taro.getEnv());
+            lazy && resetObserver();
             timer && clearTimeout(timer);
         };
     };
@@ -66,9 +73,9 @@ export var Progress = function(props) {
     var webObserver = useRef(null);
     var uuid = useUuid();
     var selector = "".concat(classPrefix, "-lazy-").concat(uuid);
-    var resetObserver = function(env) {
-        var observer = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : null;
-        if (env === 'WEB') {
+    var resetObserver = function() {
+        var observer = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : null;
+        if (web()) {
             webObserver.current.disconnect && webObserver.current.disconnect();
         } else {
             observer && observer.disconnect();
@@ -123,35 +130,69 @@ export var Progress = function(props) {
         handlePercent();
     };
     useEffect(function() {
-        if (Taro.getEnv() === 'WEB') {
+        if (web()) {
             handleWebObserver();
-        } else {
+        } else if (!harmonyAndRn()) {
             handleOtherObserver();
         }
     }, []);
-    return /*#__PURE__*/ React.createElement("div", _object_spread({
+    var getTextStyle = function() {
+        var value = harmony() ? '93%' : '99%';
+        return rtl ? {
+            right: value
+        } : {
+            left: value
+        };
+    };
+    var computeRight = function() {
+        if (children) {
+            return 0;
+        }
+        if (!harmonyAndRn()) {
+            return Math.floor("".concat(percent, "%").length * 9 / 2);
+        }
+        if (rn()) {
+            return "".concat(percent, "%").length * 9 + 4;
+        }
+        return Math.floor(("".concat(percent, "%").length * 9 + 4) / 2);
+    };
+    var computeInnerStyle = function() {
+        var style = {
+            backgroundColor: color || '#ff0f23'
+        };
+        if (harmonyAndRn()) {
+            style.width = harmony() ? pxTransform("".concat(percent, "%").length * 9 + 4) : "".concat(percent, "%").length * 9 + 4;
+        }
+        return style;
+    };
+    return /*#__PURE__*/ React.createElement(View, _object_spread({
         ref: progressRef,
         id: selector,
         className: classNames(classPrefix, className),
         style: style
-    }, rest), /*#__PURE__*/ React.createElement("div", {
+    }, rest), /*#__PURE__*/ React.createElement(View, {
         className: "".concat(classPrefix, "-outer"),
         style: stylesOuter
-    }, /*#__PURE__*/ React.createElement("div", {
+    }, /*#__PURE__*/ React.createElement(View, {
         className: classesInner,
-        style: stylesInner
-    }, showText && /*#__PURE__*/ React.createElement("div", {
+        style: _object_spread_props(_object_spread({}, stylesInner), {
+            position: 'relative'
+        })
+    }, showText && /*#__PURE__*/ React.createElement(View, {
+        style: _define_property({
+            position: 'relative'
+        }, rtl ? 'left' : 'right', computeRight())
+    }, /*#__PURE__*/ React.createElement(View, {
         className: "".concat(classPrefix, "-text"),
-        style: rtl ? {
-            right: "".concat(displayPercent, "%")
-        } : {
-            left: "".concat(displayPercent, "%")
-        }
-    }, children || /*#__PURE__*/ React.createElement("div", {
+        style: _object_spread_props(_object_spread({}, getTextStyle()), {
+            height: // eslint-disable-next-line no-nested-ternary
+            harmony() ? pxTransform(strokeWidth ? Number(strokeWidth) + 8 : 18) : strokeWidth ? Number(strokeWidth) + 8 : 18,
+            position: 'absolute',
+            top: -(strokeWidth ? (Number(strokeWidth) + 8 - 9) / 2 + 5 : 9)
+        })
+    }, children || /*#__PURE__*/ React.createElement(View, {
         className: "".concat(classPrefix, "-text-inner"),
-        style: {
-            background: color
-        }
-    }, percent, "%")))));
+        style: computeInnerStyle()
+    }, "".concat(percent, "%")))))));
 };
 Progress.displayName = 'NutProgress';

package/dist/es/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/es/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/es/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/es/packages/pulltorefresh/pulltorefresh.d.ts

@@ -3,66 +3,18 @@ import { BasicComponent } from "../../utils/typings";
 import { PullToRefreshType } from './types';
 export type PullStatus = 'pulling' | 'canRelease' | 'refreshing' | 'complete';
 export interface PullToRefreshProps extends BasicComponent {
-    /**
-    * 触发刷新时的处理函数
-    * @default -
-    */
-    onRefresh: () => Promise<any>
+    onRefresh: () => Promise<any>;
     type: PullToRefreshType;
-    /**
-    * 下拉的提示文案
-    * @default 下拉刷新
-    */
-    pullingText: ReactNode
-    /**
-    * 释放的提示文案
-    * @default 松手刷新
-    */
-    canReleaseText: ReactNode
-    /**
-    * 刷新时的提示文案
-    * @default 刷新中
-    */
-    refreshingText: ReactNode
-    /**
-    * 完成时的提示文案
-    * @default 刷新成功
-    */
-    completeText: ReactNode
-    /**
-    * 完成后延迟消失的时间，单位为 ms
-    * @default 500
-    */
-    completeDelay: number
-    /**
-    * 头部提示内容区的高度，单位为 px
-    * @default 40
-    */
-    headHeight: number
-    /**
-    * 触发刷新需要下拉多少距离，单位为 px
-    * @default 60
-    */
-    threshold: number
-    /**
-    * 是否禁用下拉刷新
-    * @default false
-    */
-    disabled: boolean
-    /**
-    * 可滚动的父元素的 scrollTop
-    * @default 0
-    */
-    scrollTop: number
-    /**
-    * 根据下拉状态，自定义下拉提示图标
-    * @default <Loading />
-    */
-    renderIcon: (status: PullStatus) => ReactNode
-    /**
-    * 根据下拉状态，自定义下拉提示文案
-    * @default -
-    */
-    renderText: (status: PullStatus) => ReactNode
+    pullingText: ReactNode;
+    canReleaseText: ReactNode;
+    refreshingText: ReactNode;
+    completeText: ReactNode;
+    completeDelay: number;
+    headHeight: number;
+    threshold: number;
+    disabled: boolean;
+    scrollTop: number;
+    renderIcon: (status: PullStatus) => ReactNode;
+    renderText: (status: PullStatus) => ReactNode;
 }
 export declare const PullToRefresh: FunctionComponent<Partial<PullToRefreshProps>>;

package/dist/es/packages/pulltorefresh/pulltorefresh.js

@@ -1,4 +1,5 @@
 import { _ as _async_to_generator } from "@swc/helpers/_/_async_to_generator";
+import { _ as _define_property } from "@swc/helpers/_/_define_property";
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
@@ -13,6 +14,8 @@ import { useTouch } from "../../utils/use-touch";
 import { rubberbandIfOutOfBounds } from "../../utils/rubberband";
 import { sleep } from "../../utils/sleep";
 import { ComponentDefaults } from "../../utils/typings";
+import pxTransform from "../../utils/px-transform";
+import { harmonyAndRn, rn } from "../../utils/platform-taro";
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     type: 'default',
     pullingText: '',
@@ -45,8 +48,9 @@ export var PullToRefresh = function(p) {
     var pullingRef = useRef(false);
     var _useState = _sliced_to_array(useState('pulling'), 2), status = _useState[0], setStatus = _useState[1];
     var _useState1 = _sliced_to_array(useState(0), 2), height = _useState1[0], setHeight = _useState1[1];
+    var timer = useRef();
     var renderIcons = function(status) {
-        return /*#__PURE__*/ React.createElement(React.Fragment, null, (status === 'pulling' || status === 'complete') && /*#__PURE__*/ React.createElement(Loading, null), (status === 'canRelease' || status === 'refreshing') && /*#__PURE__*/ React.createElement(More, null));
+        return /*#__PURE__*/ React.createElement(React.Fragment, null, (status === 'pulling' || status === 'complete') && (!harmonyAndRn() ? /*#__PURE__*/ React.createElement(Loading, null) : null), (status === 'canRelease' || status === 'refreshing') && (!harmonyAndRn() ? /*#__PURE__*/ React.createElement(More, null) : null));
     };
     var renderStatusIcon = function() {
         if (props.renderIcon) {
@@ -67,10 +71,11 @@ export var PullToRefresh = function(p) {
         return '';
     };
     var handleTouchStart = function(e) {
+        if (props.disabled) return;
         touch.start(e);
     };
     var handleTouchMove = function(e) {
-        if (props.scrollTop > 0) {
+        if (props.scrollTop > 0 || props.disabled) {
             return;
         }
         if (status === 'refreshing' || status === 'complete') return;
@@ -81,6 +86,12 @@ export var PullToRefresh = function(p) {
             setHeight(Math.max(rubberbandIfOutOfBounds(touch.deltaY.current, 0, 0, headHeight * 5, 0.5), 0));
             setStatus(height > threshold ? 'canRelease' : 'pulling');
         }
+        clearTimeout(timer.current);
+        if (rn()) {
+            timer.current = setTimeout(function() {
+                handleTouchEnd();
+            }, 300);
+        }
     };
     function _doRefresh() {
         _doRefresh = _async_to_generator(function() {
@@ -138,6 +149,7 @@ export var PullToRefresh = function(p) {
         return _doRefresh.apply(this, arguments);
     }
     var handleTouchEnd = function() {
+        if (props.disabled) return;
         pullingRef.current = false;
         if (status === 'canRelease') {
             doRefresh();
@@ -151,10 +163,11 @@ export var PullToRefresh = function(p) {
     // 安卓微信小程序onTouchMove回调次数少导致下拉卡顿，增加动效会更顺畅
     var isAndroidWeApp = Taro.getSystemInfoSync().platform === 'android' && Taro.getEnv() === 'WEAPP';
     var springStyles = _object_spread({
-        height: "".concat(height, "px")
+        height: pxTransform(height)
     }, !pullingRef.current || isAndroidWeApp ? {
         transition: 'height .3s ease'
     } : {});
+    var _obj, _obj1, _obj2, _obj3, _obj4;
     return /*#__PURE__*/ React.createElement(View, {
         className: classes,
         style: props.style,
@@ -163,15 +176,18 @@ export var PullToRefresh = function(p) {
         onTouchEnd: handleTouchEnd
     }, /*#__PURE__*/ React.createElement(View, {
         style: springStyles,
-        className: "".concat(classPrefix, "-head")
+        className: classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix, "-head"), true), _define_property(_obj, "".concat(classPrefix, "-primary-head"), props.type === 'primary'), _obj))
     }, /*#__PURE__*/ React.createElement(View, {
-        className: "".concat(classPrefix, "-head-content"),
+        className: classNames((_obj1 = {}, _define_property(_obj1, "".concat(classPrefix, "-head-content"), true), _define_property(_obj1, "".concat(classPrefix, "-primary-head-content"), props.type === 'primary'), _obj1)),
         style: {
-            height: headHeight
+            height: pxTransform(headHeight)
         }
-    }, /*#__PURE__*/ React.createElement(View, null, renderStatusIcon()), /*#__PURE__*/ React.createElement(View, null, renderStatusText()))), /*#__PURE__*/ React.createElement(View, {
-        className: "".concat(classPrefix, "-content")
+    }, /*#__PURE__*/ React.createElement(View, {
+        className: classNames((_obj2 = {}, _define_property(_obj2, "".concat(classPrefix, "-status-icon"), true), _define_property(_obj2, "".concat(classPrefix, "-primary-status-icon"), props.type === 'primary'), _obj2))
+    }, renderStatusIcon()), /*#__PURE__*/ React.createElement(View, {
+        className: classNames((_obj3 = {}, _define_property(_obj3, "".concat(classPrefix, "-status-text"), true), _define_property(_obj3, "".concat(classPrefix, "-primary-status-text"), props.type === 'primary'), _obj3))
+    }, renderStatusText()))), /*#__PURE__*/ React.createElement(View, {
+        className: classNames((_obj4 = {}, _define_property(_obj4, "".concat(classPrefix, "-content"), true), _define_property(_obj4, "".concat(classPrefix, "-primary-content}"), props.type === 'primary'), _obj4))
     }, props.children));
 };
-PullToRefresh.defaultProps = defaultProps;
 PullToRefresh.displayName = 'NutPullToRefresh';

package/dist/es/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/es/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/es/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/es/packages/radio/radio.js

@@ -60,17 +60,6 @@ export var Radio = function(props) {
             }
         };
     }
-    var renderLabel = function() {
-        return /*#__PURE__*/ React.createElement(View, {
-            className: classNames("".concat(classPrefix, "-label"), _define_property({}, "".concat(classPrefix, "-label-disabled"), disabled))
-        }, children);
-    };
-    var renderButton = function() {
-        var _obj;
-        return /*#__PURE__*/ React.createElement(View, {
-            className: classNames("".concat(classPrefix, "-button"), (_obj = {}, _define_property(_obj, "".concat(classPrefix, "-button-active"), checkedStatement), _define_property(_obj, "".concat(classPrefix, "-button-disabled"), disabled), _obj))
-        }, children);
-    };
     var color = function() {
         var _obj;
         return _obj = {}, _define_property(_obj, "".concat(classPrefix, "-icon-disabled"), disabled), _define_property(_obj, "".concat(classPrefix, "-icon"), !checkedStatement), _define_property(_obj, "".concat(classPrefix, "-icon-checked"), checkedStatement), _obj;
@@ -95,8 +84,21 @@ export var Radio = function(props) {
             className: classNames(color())
         });
     };
+    var renderLabel = function() {
+        var labelcls = classNames("".concat(classPrefix, "-label"), _define_property({}, "".concat(classPrefix, "-label-disabled"), disabled));
+        return /*#__PURE__*/ React.createElement(React.Fragment, null, renderIcon(), /*#__PURE__*/ React.createElement("div", {
+            className: labelcls
+        }, children));
+    };
+    var renderButton = function() {
+        var _obj;
+        var buttoncls = classNames("".concat(classPrefix, "-button"), (_obj = {}, _define_property(_obj, "".concat(classPrefix, "-button-active"), checkedStatement), _define_property(_obj, "".concat(classPrefix, "-button-disabled"), disabled), _obj));
+        return /*#__PURE__*/ React.createElement("div", {
+            className: buttoncls
+        }, children);
+    };
     var renderByShape = function(shape) {
-        return shape === 'button' ? renderButton() : /*#__PURE__*/ React.createElement(React.Fragment, null, renderIcon(), renderLabel());
+        return shape === 'button' ? renderButton() : renderLabel();
     };
     var renderRadioItem = function() {
         return renderByShape(context && context.shape ? context.shape : shape);
@@ -105,12 +107,12 @@ export var Radio = function(props) {
         if (disabled || checkedStatement) return;
         setCheckedStatement(!checkedStatement);
     };
+    var cls = classNames(classPrefix, _define_property({}, "".concat(classPrefix, "-reverse"), labelPosition === 'left'), className);
     return /*#__PURE__*/ React.createElement(View, {
-        className: classNames(classPrefix, _define_property({}, "".concat(classPrefix, "-reverse"), labelPosition === 'left'), className),
+        className: cls,
         style: style,
         onClick: handleClick
     }, renderRadioItem());
 };
-Radio.defaultProps = defaultProps;
 Radio.displayName = 'NutRadio';
 Radio.Group = RadioGroup;

package/dist/es/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/es/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/es/packages/radiogroup/radiogroup.js

@@ -28,6 +28,7 @@ export var RadioGroup = /*#__PURE__*/ React.forwardRef(function(props, ref) {
         "options",
         "disabled"
     ]);
+    var cls = classNames(classPrefix, _define_property({}, "".concat(classPrefix, "-").concat(props.direction), props.direction), className);
     var _usePropsValue = _sliced_to_array(usePropsValue({
         defaultValue: props.defaultValue,
         value: props.value,
@@ -53,7 +54,9 @@ export var RadioGroup = /*#__PURE__*/ React.forwardRef(function(props, ref) {
             }));
         });
     }, [
-        options
+        options,
+        labelPosition,
+        val2State
     ]);
     return /*#__PURE__*/ React.createElement(RadioContext.Provider, {
         value: {
@@ -69,8 +72,7 @@ export var RadioGroup = /*#__PURE__*/ React.forwardRef(function(props, ref) {
             }
         }
     }, /*#__PURE__*/ React.createElement("div", _object_spread({
-        className: classNames(classPrefix, _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';