@nutui/nutui-react 3.0.0-beta.2 → 3.0.0-beta.4

package/dist/cjs/packages/navbar/navbar.js

@@ -16,6 +16,7 @@ var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 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 _index = require("../configprovider/index");
 var _typings = require("../../utils/typings");
 var _useclientrect = require("../../utils/use-client-rect");
 var _safearea = require("../safearea/safearea");
@@ -32,6 +33,7 @@ var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typing
 var NavBar = function NavBar(props) {
     var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), right = _$_object_spread.right, left = _$_object_spread.left, titleAlign = _$_object_spread.titleAlign, className = _$_object_spread.className, style = _$_object_spread.style, back = _$_object_spread.back, fixed = _$_object_spread.fixed, safeAreaInsetTop = _$_object_spread.safeAreaInsetTop, placeholder = _$_object_spread.placeholder, zIndex = _$_object_spread.zIndex, onBackClick = _$_object_spread.onBackClick;
     var classPrefix = 'nut-navbar';
+    var rtl = (0, _index.useRtl)();
     var children = Array.isArray(props.children) ? props.children : [
         props.children
     ];
@@ -75,11 +77,12 @@ var NavBar = function NavBar(props) {
         back
     ]);
     var renderLeft = function renderLeft() {
+        var _obj, _obj1;
         return back || left ? /*#__PURE__*/ _react.default.createElement("div", {
-            className: "".concat(classPrefix, "-left"),
+            className: (0, _classnames.default)((_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-left"), true), (0, _define_property._)(_obj, "".concat(classPrefix, "-left-align-").concat(titleAlign), true), (0, _define_property._)(_obj, "".concat(classPrefix, "-left-rtl"), rtl), _obj)),
             ref: leftRef
         }, back && /*#__PURE__*/ _react.default.createElement("div", {
-            className: "".concat(classPrefix, "-left-back"),
+            className: (0, _classnames.default)((_obj1 = {}, (0, _define_property._)(_obj1, "".concat(classPrefix, "-left-back"), true), (0, _define_property._)(_obj1, "".concat(classPrefix, "-left-back-align-").concat(titleAlign), true), (0, _define_property._)(_obj1, "".concat(classPrefix, "-left-back-children"), left), (0, _define_property._)(_obj1, "".concat(classPrefix, "-left-back-children-rtl"), left && rtl), _obj1)),
             onClick: function onClick(e) {
                 return onBackClick(e);
             }
@@ -94,14 +97,16 @@ var NavBar = function NavBar(props) {
                 width: contentRealWidth
             };
         }
+        var _obj;
         return /*#__PURE__*/ _react.default.createElement("div", {
-            className: "".concat(classPrefix, "-title"),
+            className: (0, _classnames.default)((_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-title"), true), (0, _define_property._)(_obj, "".concat(classPrefix, "-title-align-").concat(titleAlign), true), _obj)),
             style: titleStyle
         }, children);
     };
     var renderRight = function renderRight() {
+        var _obj;
         return /*#__PURE__*/ _react.default.createElement("div", {
-            className: "".concat(classPrefix, "-right"),
+            className: (0, _classnames.default)((_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-right"), true), (0, _define_property._)(_obj, "".concat(classPrefix, "-right-align-").concat(titleAlign), true), (0, _define_property._)(_obj, "".concat(classPrefix, "-right-rtl"), rtl), _obj)),
             ref: rightRef
         }, right);
     };
@@ -113,7 +118,7 @@ var NavBar = function NavBar(props) {
         }, renderLeft(), renderContent(), renderRight());
     };
     var _obj;
-    var classes = (0, _classnames.default)((_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-fixed"), fixed), (0, _define_property._)(_obj, "".concat(classPrefix, "-title-align-").concat(titleAlign), true), _obj));
+    var classes = (0, _classnames.default)((_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-fixed"), fixed), (0, _define_property._)(_obj, "".concat(classPrefix, "-safe-area-inset-top"), safeAreaInsetTop), (0, _define_property._)(_obj, "".concat(classPrefix, "-align-").concat(titleAlign), true), (0, _define_property._)(_obj, "".concat(classPrefix, "-rtl"), rtl), _obj));
     var cls = (0, _classnames.default)(classPrefix, classes, className);
     return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, safeAreaInsetTop && /*#__PURE__*/ _react.default.createElement(_safearea.SafeArea, {
         position: "top"

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

@@ -2,6 +2,8 @@
   width: $navbar-width;
   position: relative;
   display: flex;
+  flex-direction: row;
+  justify-content: center;
   align-items: center;
   height: $navbar-height;
   box-sizing: border-box;
@@ -16,6 +18,7 @@
     position: fixed;
     top: 0;
     left: 0;
+    right: 0;
     width: 100%;
   }
 
@@ -24,27 +27,32 @@
     width: 100%;
   }
 
+  &-safe-area-inset-top {
+    padding-top: constant(safe-area-inset-top);
+    padding-top: env(safe-area-inset-top);
+  }
+
+  &-align-left {
+    padding-left: 14px;
+  }
+
   &-title {
-    min-width: 53%;
-    margin: 0 auto;
+    width: 50%;
+    height: 100%;
     text-align: center;
     display: flex;
+    flex-direction: row;
     align-items: center;
     justify-content: center;
     font-size: $navbar-title-font-size;
     font-weight: $navbar-title-font-weight;
     color: $navbar-title-font-color;
-
-    .nut-tabs-titles {
-      background: transparent;
-
-      &-item-text {
-        color: $color-title;
-      }
-    }
-
-    .nut-tabpane {
-      display: none;
+    &-align-left {
+      min-width: 0;
+      flex: 1;
+      justify-content: flex-start;
+      padding: 0 8px;
+      text-align: left;
     }
   }
 
@@ -59,125 +67,62 @@
     bottom: 0;
     display: flex;
     align-items: center;
+    flex-direction: row;
+    height: 100%;
     cursor: pointer;
     padding: 0 14px;
-
+    /* #ifndef rn harmony jd h5 weapp*/
     .nut-icon,
     .nutui-iconfont {
       width: 20px;
       height: 20px;
       font-size: 20px;
     }
+    /* #endif */
   }
 
   &-left {
     left: 0;
+    &-rtl {
+      left: auto;
+      right: 0;
+    }
+    &-align-left {
+      position: static;
+      padding: 0;
+    }
 
     &-back {
       display: flex;
+      flex-direction: row;
       align-items: center;
       justify-content: center;
-      margin-right: 10px;
+      &-children {
+        margin-right: 10px;
+        &-rtl {
+          margin-right: 0;
+          margin-left: 10px;
+        }
+      }
     }
   }
 
   &-right {
     right: 0;
-
-    .nut-icon {
-      margin-left: 12px;
-
-      &:first-child {
-        margin-left: 0;
-      }
-    }
-  }
-
-  &-title-align-left {
-    padding-left: 14px;
-
-    .nut-navbar-left {
-      position: static;
-      padding: 0;
-
-      .nut-icon {
-        margin-left: 12px;
-
-        &:first-child {
-          margin-left: 0;
-        }
-      }
+    &-rtl {
+      right: auto;
+      left: 0;
     }
-    .nut-navbar-right {
+    &-align-left {
       position: static;
       display: inline-flex;
       white-space: nowrap;
       padding-left: 0;
     }
-    .nut-navbar-left-back {
-      margin-right: 0;
-    }
-
-    .nut-navbar-title {
-      min-width: 0;
-      margin: 0;
-      flex: 1;
-      justify-content: flex-start;
-      padding: 0 8px;
-      text-align: left;
-    }
   }
-}
-
-[dir='rtl'] .nut-navbar,
-.nut-rtl .nut-navbar {
-  &-fixed {
-    left: auto;
-    right: 0;
-  }
-
-  &-left {
-    left: auto;
-    right: 0;
+  &-rtl {
     .nut-icon-ArrowLeft {
       transform: rotateY(180deg);
     }
-    &-back {
-      margin-right: 0;
-      margin-left: 10px;
-    }
-  }
-
-  &-right {
-    right: auto;
-    left: 0;
-    .nut-icon {
-      margin-left: 0;
-      margin-right: 12px;
-
-      &:first-child {
-        margin-left: 0;
-        margin-right: 0;
-      }
-    }
-  }
-
-  &-title-align-left {
-    .nut-navbar-left {
-      .nut-icon-ArrowLeft {
-        margin-left: 0;
-        margin-right: 12px;
-
-        &:first-child {
-          margin-left: 0;
-          margin-right: 0;
-        }
-      }
-    }
-
-    .nut-navbar-left-back {
-      margin-right: 0;
-      margin-left: 0;
-    }
   }
 }

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

@@ -2,11 +2,13 @@
   width: var(--nutui-navbar-width, 100%);
   position: relative;
   display: flex;
+  flex-direction: row;
+  justify-content: center;
   align-items: center;
   height: var(--nutui-navbar-height, 44px);
   box-sizing: border-box;
   background: var(--nutui-navbar-background, var(--nutui-color-background, #f5f6fa));
-  box-shadow: var(--nutui-navbar-box-shadow, 0px);
+  box-shadow: var(--nutui-navbar-box-shadow, 0 0 transparent);
   font-size: var(--nutui-navbar-font-size, var(--nutui-font-size-base, 14px));
   color: var(--nutui-navbar-color, var(--nutui-color-title, #1a1a1a));
   margin-bottom: var(--nutui-navbar-margin-bottom, 20px);
@@ -16,31 +18,38 @@
   position: fixed;
   top: 0;
   left: 0;
+  right: 0;
   width: 100%;
 }
 .nut-navbar-placeholder {
   display: inline-block;
   width: 100%;
 }
+.nut-navbar-safe-area-inset-top {
+  padding-top: constant(safe-area-inset-top);
+  padding-top: env(safe-area-inset-top);
+}
+.nut-navbar-align-left {
+  padding-left: 14px;
+}
 .nut-navbar-title {
-  min-width: 53%;
-  margin: 0 auto;
+  width: 50%;
+  height: 100%;
   text-align: center;
   display: flex;
+  flex-direction: row;
   align-items: center;
   justify-content: center;
   font-size: var(--nutui-navbar-title-font-size, var(--nutui-font-size-xl, 18px));
   font-weight: var(--nutui-navbar-title-font-weight, var(--nutui-font-weight-bold, 600));
   color: var(--nutui-navbar-title-font-color, var(--nutui-color-title, #1a1a1a));
 }
-.nut-navbar-title .nut-tabs-titles {
-  background: transparent;
-}
-.nut-navbar-title .nut-tabs-titles-item-text {
-  color: var(--nutui-color-title, #1a1a1a);
-}
-.nut-navbar-title .nut-tabpane {
-  display: none;
+.nut-navbar-title-align-left {
+  min-width: 0;
+  flex: 1;
+  justify-content: flex-start;
+  padding: 0 8px;
+  text-align: left;
 }
 .nut-navbar-title ::-webkit-scrollbar {
   display: none;
@@ -51,8 +60,12 @@
   bottom: 0;
   display: flex;
   align-items: center;
+  flex-direction: row;
+  height: 100%;
   cursor: pointer;
   padding: 0 14px;
+  /* #ifndef rn harmony jd h5 weapp*/
+  /* #endif */
 }
 .nut-navbar-left .nut-icon,
 .nut-navbar-left .nutui-iconfont, .nut-navbar-right .nut-icon,
@@ -64,98 +77,40 @@
 .nut-navbar-left {
   left: 0;
 }
+.nut-navbar-left-rtl {
+  left: auto;
+  right: 0;
+}
+.nut-navbar-left-align-left {
+  position: static;
+  padding: 0;
+}
 .nut-navbar-left-back {
   display: flex;
+  flex-direction: row;
   align-items: center;
   justify-content: center;
+}
+.nut-navbar-left-back-children {
   margin-right: 10px;
 }
+.nut-navbar-left-back-children-rtl {
+  margin-right: 0;
+  margin-left: 10px;
+}
 .nut-navbar-right {
   right: 0;
 }
-.nut-navbar-right .nut-icon {
-  margin-left: 12px;
-}
-.nut-navbar-right .nut-icon:first-child {
-  margin-left: 0;
-}
-.nut-navbar-title-align-left {
-  padding-left: 14px;
-}
-.nut-navbar-title-align-left .nut-navbar-left {
-  position: static;
-  padding: 0;
-}
-.nut-navbar-title-align-left .nut-navbar-left .nut-icon {
-  margin-left: 12px;
-}
-.nut-navbar-title-align-left .nut-navbar-left .nut-icon:first-child {
-  margin-left: 0;
+.nut-navbar-right-rtl {
+  right: auto;
+  left: 0;
 }
-.nut-navbar-title-align-left .nut-navbar-right {
+.nut-navbar-right-align-left {
   position: static;
   display: inline-flex;
   white-space: nowrap;
   padding-left: 0;
 }
-.nut-navbar-title-align-left .nut-navbar-left-back {
-  margin-right: 0;
-}
-.nut-navbar-title-align-left .nut-navbar-title {
-  min-width: 0;
-  margin: 0;
-  flex: 1;
-  justify-content: flex-start;
-  padding: 0 8px;
-  text-align: left;
-}
-
-[dir=rtl] .nut-navbar-fixed,
-.nut-rtl .nut-navbar-fixed {
-  left: auto;
-  right: 0;
-}
-[dir=rtl] .nut-navbar-left,
-.nut-rtl .nut-navbar-left {
-  left: auto;
-  right: 0;
-}
-[dir=rtl] .nut-navbar-left .nut-icon-ArrowLeft,
-.nut-rtl .nut-navbar-left .nut-icon-ArrowLeft {
+.nut-navbar-rtl .nut-icon-ArrowLeft {
   transform: rotateY(180deg);
-}
-[dir=rtl] .nut-navbar-left-back,
-.nut-rtl .nut-navbar-left-back {
-  margin-right: 0;
-  margin-left: 10px;
-}
-[dir=rtl] .nut-navbar-right,
-.nut-rtl .nut-navbar-right {
-  right: auto;
-  left: 0;
-}
-[dir=rtl] .nut-navbar-right .nut-icon,
-.nut-rtl .nut-navbar-right .nut-icon {
-  margin-left: 0;
-  margin-right: 12px;
-}
-[dir=rtl] .nut-navbar-right .nut-icon:first-child,
-.nut-rtl .nut-navbar-right .nut-icon:first-child {
-  margin-left: 0;
-  margin-right: 0;
-}
-[dir=rtl] .nut-navbar-title-align-left .nut-navbar-left .nut-icon-ArrowLeft,
-.nut-rtl .nut-navbar-title-align-left .nut-navbar-left .nut-icon-ArrowLeft {
-  margin-left: 0;
-  margin-right: 12px;
-}
-[dir=rtl] .nut-navbar-title-align-left .nut-navbar-left .nut-icon-ArrowLeft:first-child,
-.nut-rtl .nut-navbar-title-align-left .nut-navbar-left .nut-icon-ArrowLeft:first-child {
-  margin-left: 0;
-  margin-right: 0;
-}
-[dir=rtl] .nut-navbar-title-align-left .nut-navbar-left-back,
-.nut-rtl .nut-navbar-title-align-left .nut-navbar-left-back {
-  margin-right: 0;
-  margin-left: 0;
 }

package/dist/cjs/packages/pagination/pagination.js

@@ -140,6 +140,8 @@ var Pagination = function Pagination(props) {
     }, /*#__PURE__*/ _react.default.createElement("div", {
         className: "".concat(classPrefix, "-lite-active")
     }, currentPage), /*#__PURE__*/ _react.default.createElement("div", {
+        className: "".concat(classPrefix, "-lite-spliterator")
+    }, "/"), /*#__PURE__*/ _react.default.createElement("div", {
         className: "".concat(classPrefix, "-lite-default")
     }, pageCount)));
 };

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

@@ -67,10 +67,11 @@
 }
 
 .nut-pagination-lite {
-  width: $pagination-lite-width;
   height: $pagination-lite-height;
+  padding: 0 $spacing-xs;
   display: flex;
   flex-direction: row;
+  align-items: center;
   color: $color-primary-text;
   background-color: $pagination-lite-background-color;
   border-radius: $pagination-lite-radius;
@@ -78,18 +79,11 @@
 
 .nut-pagination-lite-active,
 .nut-pagination-lite-default {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: $pagination-lite-height;
-  height: $pagination-lite-height;
-  font-size: $font-size-s;
+  font-size: $font-size-xs;
   color: $pagination-lite-color;
-  font-weight: 400;
 }
 
-.nut-pagination-lite-active {
-  border-radius: $pagination-lite-radius;
-  font-size: $font-size-s;
-  background-color: $pagination-lite-active-background-color;
+.nut-pagination-lite-spliterator {
+  font-size: $font-size-xs;
+  color: $pagination-lite-color;
 }

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

@@ -66,29 +66,23 @@
 }
 
 .nut-pagination-lite {
-  width: var(--nutui-pagination-lite-width, 40px);
   height: var(--nutui-pagination-lite-height, 20px);
+  padding: 0 var(--nutui-spacing-xs, 6px);
   display: flex;
   flex-direction: row;
+  align-items: center;
   color: var(--nutui-color-primary-text, #ffffff);
-  background-color: var(--nutui-pagination-lite-background-color, var(--nutui-black-7));
-  border-radius: var(--nutui-pagination-lite-radius, 6px);
+  background-color: var(--nutui-pagination-lite-background-color, rgba(0, 0, 0, 0.45));
+  border-radius: var(--nutui-pagination-lite-radius, var(--nutui-radius-xs, 4px));
 }
 
 .nut-pagination-lite-active,
 .nut-pagination-lite-default {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--nutui-pagination-lite-height, 20px);
-  height: var(--nutui-pagination-lite-height, 20px);
-  font-size: var(--nutui-font-size-s, 12px);
+  font-size: var(--nutui-font-size-xs, 11px);
   color: var(--nutui-pagination-lite-color, #ffffff);
-  font-weight: 400;
 }
 
-.nut-pagination-lite-active {
-  border-radius: var(--nutui-pagination-lite-radius, 6px);
-  font-size: var(--nutui-font-size-s, 12px);
-  background-color: var(--nutui-pagination-lite-active-background-color, var(--nutui-black-5));
+.nut-pagination-lite-spliterator {
+  font-size: var(--nutui-font-size-xs, 11px);
+  color: var(--nutui-pagination-lite-color, #ffffff);
 }

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

@@ -51,7 +51,7 @@ var Progress = function Progress(props) {
     var _useState = (0, _sliced_to_array._)((0, _react.useState)(0), 2), displayPercent = _useState[0], setDispalyPercent = _useState[1];
     var stylesInner = {
         width: "".concat(displayPercent, "%"),
-        backgroundColor: color || '#FF0F23'
+        background: color || '#FF0F23'
     };
     (0, _react.useEffect)(function() {
         setDispalyPercent(percent);

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-color: $progress-color;
+    background: $progress-color;
   }
 
   &-text {
@@ -39,7 +39,7 @@
     top: $progress-text-position-top;
     bottom: $progress-text-position-bottom;
     transition: all 0.4s;
-    // transform: translate(-50%);
+    transform: translate(-50%);
 
     &-inner {
       display: flex;

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

@@ -27,7 +27,7 @@
   justify-content: center;
   transition: all 0.4s;
   border-radius: var(--nutui-progress-border-radius, 12px);
-  background-color: var(--nutui-progress-color, #ff0f23);
+  background: var(--nutui-progress-color, linear-gradient(135deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%));
 }
 .nut-progress-text {
   display: flex;
@@ -36,6 +36,7 @@
   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;
@@ -49,7 +50,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, #ff0f23);
+  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/cjs/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/cjs/packages/radio/index.js

@@ -8,5 +8,10 @@ Object.defineProperty(exports, "default", {
         return _default;
     }
 });
+var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+var _react = /*#__PURE__*/ _interop_require_default._(require("react"));
 var _radio = require("./radio");
-var _default = _radio.Radio;
+var _radiogroup = require("../radiogroup/radiogroup");
+var InnerRadio = _radio.Radio;
+InnerRadio.Group = _radiogroup.RadioGroup;
+var _default = InnerRadio;

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

@@ -1,5 +1,4 @@
 import React, { FunctionComponent } from 'react';
-import RadioGroup from "../radiogroup";
 import { BasicComponent } from "../../utils/typings";
 import { RadioPosition, RadioShape } from "./types";
 export interface RadioProps extends BasicComponent {
@@ -13,6 +12,4 @@ export interface RadioProps extends BasicComponent {
     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: FunctionComponent<Partial<RadioProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>>;

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

@@ -19,7 +19,6 @@ var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _iconsreact = require("@nutui/icons-react");
 var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
 var _context = /*#__PURE__*/ _interop_require_default._(require("../radiogroup/context"));
-var _radiogroup = /*#__PURE__*/ _interop_require_default._(require("../radiogroup"));
 var _typings = require("../../utils/typings");
 var _usepropsvalue = require("../../utils/use-props-value");
 var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
@@ -129,4 +128,3 @@ var Radio = function Radio(props) {
     }, rest), renderRadioItem());
 };
 Radio.displayName = 'NutRadio';
-Radio.Group = _radiogroup.default;

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

@@ -77,6 +77,7 @@
     border: 1px solid $color-text-disabled;
   }
 }
+
 [dir='rtl'] .nut-radio,
 .nut-rtl .nut-radio {
   &:last-child {

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

@@ -40,7 +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 cls = (0, _classnames.default)(classPrefix, (0, _define_property._)({}, "".concat(classPrefix, "-").concat(direction), direction), className);
     var _usePropsValue = (0, _sliced_to_array._)((0, _usepropsvalue.usePropsValue)({
         defaultValue: props.defaultValue,
         value: props.value,