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

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
+        background: 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,68 @@ 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() {
+        return rtl ? {
+            right: '100%'
+        } : {
+            left: '100%'
+        };
+    };
+    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

@@ -43,6 +43,8 @@
 
     &-inner {
       display: flex;
+      flex-direction: row;
+      justify-content: center;
       align-items: center;
       height: 100%;
       width: 100%;

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-progress {
   display: flex;
   align-items: center;
@@ -8,7 +12,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-gray-3));
 }
 .nut-progress-outer .nut-progress-active:before {
   content: "";
@@ -40,15 +44,17 @@
 }
 .nut-progress-text-inner {
   display: flex;
+  flex-direction: row;
+  justify-content: center;
   align-items: center;
   height: 100%;
   width: 100%;
-  color: var(--nutui-progress-text-color, var(--nutui-color-primary-text, #ffffff));
+  color: var(--nutui-progress-text-color, #ffffff);
   padding: var(--nutui-progress-text-padding, 0 5px);
   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, linear-gradient(135deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%));
 }
 @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 { rn } from "../../utils/platform-taro";
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     type: 'default',
     pullingText: '',
@@ -21,7 +24,7 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     completeText: '',
     completeDelay: 500,
     disabled: false,
-    headHeight: 50,
+    headHeight: 80,
     threshold: 60,
     scrollTop: 0,
     onRefresh: function() {}
@@ -45,6 +48,7 @@ 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));
     };
@@ -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

@@ -9,7 +9,7 @@
       bottom: 0;
       left: 0;
       width: 100%;
-      color: $color-title;
+      color: $color-text-help;
       display: flex;
       flex-direction: column;
       justify-content: center;
@@ -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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-pulltorefresh-head {
   overflow: hidden;
   position: relative;
@@ -8,7 +12,7 @@
   bottom: 0;
   left: 0;
   width: 100%;
-  color: var(--nutui-gray-7, #1a1a1a);
+  color: var(--nutui-gray-5);
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -20,14 +24,17 @@
   margin-bottom: 4px;
 }
 .nut-pulltorefresh-primary {
-  background: var(--nutui-pulltorefresh-color-primary, var(--nutui-color-primary, #ff0f23));
+  background: var(--nutui-pulltorefresh-color-primary, var(--nutui-brand-6));
 }
-.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/radio/index.d.ts

@@ -1,4 +1,10 @@
-import { Radio } from "./radio";
+import React from 'react';
+import { RadioProps } from "./radio";
+import { RadioGroup } from "../radiogroup/radiogroup";
 export type { RadioProps } from "./radio";
 export type { RadioShape, RadioPosition } from './types';
-export default Radio;
+type CompoundedComponent = React.FC<Partial<RadioProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>> & {
+    Group: typeof RadioGroup;
+};
+declare const InnerRadio: CompoundedComponent;
+export default InnerRadio;

package/dist/es/packages/radio/index.js

@@ -1,2 +1,6 @@
+import React from "react";
 import { Radio } from "./radio";
-export default Radio;
+import { RadioGroup } from "../radiogroup/radiogroup";
+var InnerRadio = Radio;
+InnerRadio.Group = RadioGroup;
+export default InnerRadio;

package/dist/es/packages/radio/radio.d.ts

@@ -1,54 +1,15 @@
-import React, { FunctionComponent } from 'react';
-import RadioGroup from "../radiogroup/index";
+import React, { FC } from 'react';
 import { BasicComponent } from "../../utils/typings";
 import { RadioPosition, RadioShape } from "./types";
 export interface RadioProps extends BasicComponent {
-    /**
-    * 是否禁用选择
-    * @default false
-    */
-    disabled: boolean
-    /**
-    * 指定当前是否选中
-    * @default -
-    */
-    checked: boolean
-    /**
-    * 初始是否选中
-    * @default -
-    */
-    defaultChecked: boolean
-    /**
-    * 形状
-    * @default round
-    */
-    shape: RadioShape
-    /**
-    * 文本所在的位置
-    * @default right
-    */
-    labelPosition: RadioPosition
-    /**
-    * <a href="#/icon">图标名称</a>，选中前(建议和activeIcon一起修改)
-    * @default 'CheckNormal'
-    */
-    icon: React.ReactNode
-    /**
-    * <a href="#/icon">图标名称</a>，选中后(建议和icon一起修改)
-    * @default 'CheckChecked'
-    */
-    activeIcon: React.ReactNode
-    /**
-    * 携带的标识值，用于 Group 模式
-    * @default -
-    */
-    value: string | number
-    /**
-    * 选中态变化时触发
-    * @default -
-    */
-    onChange: (checked: boolean) => void
+    disabled: boolean;
+    checked: boolean;
+    defaultChecked: boolean;
+    shape: RadioShape;
+    labelPosition: RadioPosition;
+    icon: React.ReactNode;
+    activeIcon: React.ReactNode;
+    value: string | number;
+    onChange: (checked: boolean) => void;
 }
-export declare const Radio: FunctionComponent<Partial<RadioProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>> & {
-    Group: typeof RadioGroup;
-};
+export declare const Radio: FC<Partial<RadioProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>>;

package/dist/es/packages/radio/radio.js

@@ -4,11 +4,10 @@ import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
 import React, { useContext } from "react";
-import { CheckChecked, CheckNormal, CheckDisabled } from "@nutui/icons-react-taro";
+import { CheckChecked, CheckDisabled, CheckNormal } from "@nutui/icons-react-taro";
 import classNames from "classnames";
 import { View } from "@tarojs/components";
 import RadioContext from "../radiogroup/context";
-import RadioGroup from "../radiogroup/index";
 import { ComponentDefaults } from "../../utils/typings";
 import { usePropsValue } from "../../utils/use-props-value";
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
@@ -60,17 +59,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 +83,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(View, {
+            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(View, {
+            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 +106,11 @@ 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

@@ -37,9 +37,12 @@
   &-icon {
     &-checked {
       color: $color-primary;
+      box-shadow: 0px 2px 4px 0px #ff0f2333;
+      border-radius: 50%;
 
       &.nut-radio-icon-disabled {
-        color: $color-primary-disabled;
+        color: $color-primary-disabled-special;
+        box-shadow: none;
       }
     }
 
@@ -60,7 +63,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;
     }
@@ -77,6 +80,7 @@
     border: 1px solid $color-text-disabled;
   }
 }
+
 [dir='rtl'] .nut-radio,
 .nut-rtl .nut-radio {
   &:last-child {