@nutui/nutui-react-taro 3.0.0-beta.4 → 3.0.0-beta.6

package/dist/cjs/packages/nutui.react.js

@@ -28,7 +28,7 @@ _export(exports, {
         return _index73.default;
     },
     AvatarCropper: function() {
-        return _index100.default;
+        return _index101.default;
     },
     AvatarGroup: function() {
         return _index74.default;
@@ -40,7 +40,7 @@ _export(exports, {
         return _index55.default;
     },
     Barrage: function() {
-        return _index94.default;
+        return _index95.default;
     },
     Button: function() {
         return _index.default;
@@ -55,7 +55,7 @@ _export(exports, {
         return _index30.default;
     },
     Card: function() {
-        return _index95.default;
+        return _index96.default;
     },
     Cascader: function() {
         return _index32.default;
@@ -190,10 +190,10 @@ _export(exports, {
         return _index65.default;
     },
     Price: function() {
-        return _index83.default;
+        return _index84.default;
     },
     Progress: function() {
-        return _index84.default;
+        return _index85.default;
     },
     PullToRefresh: function() {
         return _index66.default;
@@ -222,6 +222,9 @@ _export(exports, {
     SearchBar: function() {
         return _index48.default;
     },
+    Segmented: function() {
+        return _index83.default;
+    },
     ShortPassword: function() {
         return _index49.default;
     },
@@ -241,10 +244,10 @@ _export(exports, {
         return _index12.default;
     },
     Step: function() {
-        return _index85.default;
+        return _index86.default;
     },
     Steps: function() {
-        return _index86.default;
+        return _index87.default;
     },
     Sticky: function() {
         return _index13.default;
@@ -256,10 +259,10 @@ _export(exports, {
         return _index68.default;
     },
     Swiper: function() {
-        return _index87.default;
+        return _index88.default;
     },
     SwiperItem: function() {
-        return _index88.default;
+        return _index89.default;
     },
     Switch: function() {
         return _index51.default;
@@ -274,43 +277,43 @@ _export(exports, {
         return _index25.default;
     },
     Table: function() {
-        return _index89.default;
+        return _index90.default;
     },
     Tabs: function() {
         return _index27.default;
     },
     Tag: function() {
-        return _index90.default;
+        return _index91.default;
     },
     TextArea: function() {
         return _index52.default;
     },
     TimeDetail: function() {
-        return _index96.default;
+        return _index97.default;
     },
     TimeSelect: function() {
-        return _index97.default;
+        return _index98.default;
     },
     Toast: function() {
         return _index69.default;
     },
     Tour: function() {
-        return _index91.default;
+        return _index92.default;
     },
     TrendArrow: function() {
-        return _index98.default;
+        return _index99.default;
     },
     Uploader: function() {
         return _index53.default;
     },
     Video: function() {
-        return _index92.default;
+        return _index93.default;
     },
     VirtualList: function() {
-        return _index93.default;
+        return _index94.default;
     },
     WaterMark: function() {
-        return _index99.default;
+        return _index100.default;
     }
 });
 var _export_star = require("@swc/helpers/_/_export_star");
@@ -398,24 +401,25 @@ var _index79 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("
 var _index80 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("./imagepreview/index"), exports));
 var _index81 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("./indicator/index"), exports));
 var _index82 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("./pagination/index"), exports));
-var _index83 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("./price/index"), exports));
-var _index84 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("./progress/index"), exports));
-var _index85 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("./step/index"), exports));
-var _index86 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("./steps/index"), exports));
-var _index87 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("./swiper/index"), exports));
-var _index88 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("./swiperitem/index"), exports));
-var _index89 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("./table/index"), exports));
-var _index90 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("./tag/index"), exports));
-var _index91 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("./tour/index"), exports));
-var _index92 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("./video/index"), exports));
-var _index93 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("./virtuallist/index"), exports));
-var _index94 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("./barrage/index"), exports));
-var _index95 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("./card/index"), exports));
-var _index96 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("./timedetail/index"), exports));
-var _index97 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("./timeselect/index"), exports));
-var _index98 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("./trendarrow/index"), exports));
-var _index99 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("./watermark/index"), exports));
-var _index100 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("./avatarcropper/index"), exports));
+var _index83 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("./segmented/index"), exports));
+var _index84 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("./price/index"), exports));
+var _index85 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("./progress/index"), exports));
+var _index86 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("./step/index"), exports));
+var _index87 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("./steps/index"), exports));
+var _index88 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("./swiper/index"), exports));
+var _index89 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("./swiperitem/index"), exports));
+var _index90 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("./table/index"), exports));
+var _index91 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("./tag/index"), exports));
+var _index92 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("./tour/index"), exports));
+var _index93 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("./video/index"), exports));
+var _index94 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("./virtuallist/index"), exports));
+var _index95 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("./barrage/index"), exports));
+var _index96 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("./card/index"), exports));
+var _index97 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("./timedetail/index"), exports));
+var _index98 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("./timeselect/index"), exports));
+var _index99 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("./trendarrow/index"), exports));
+var _index100 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("./watermark/index"), exports));
+var _index101 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("./avatarcropper/index"), exports));
 require("./button/button.scss");
 require("./cell/cell.scss");
 require("./cellgroup/cellgroup.scss");
@@ -499,6 +503,7 @@ require("./ellipsis/ellipsis.scss");
 require("./imagepreview/imagepreview.scss");
 require("./indicator/indicator.scss");
 require("./pagination/pagination.scss");
+require("./segmented/segmented.scss");
 require("./price/price.scss");
 require("./progress/progress.scss");
 require("./step/step.scss");

package/dist/cjs/packages/nutui.react.scss.d.ts

@@ -81,6 +81,7 @@ import "./ellipsis/ellipsis.scss";
 import "./imagepreview/imagepreview.scss";
 import "./indicator/indicator.scss";
 import "./pagination/pagination.scss";
+import "./segmented/segmented.scss";
 import "./price/price.scss";
 import "./progress/progress.scss";
 import "./step/step.scss";

package/dist/cjs/packages/nutui.react.scss.js

@@ -91,6 +91,7 @@ require("./ellipsis/ellipsis.scss");
 require("./imagepreview/imagepreview.scss");
 require("./indicator/indicator.scss");
 require("./pagination/pagination.scss");
+require("./segmented/segmented.scss");
 require("./price/price.scss");
 require("./progress/progress.scss");
 require("./step/step.scss");

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-overlay {
   /* #ifdef rn */
   position: absolute;

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-pagination {
   display: flex;
   flex-direction: row;

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

@@ -1,4 +1,8 @@
 @charset "UTF-8";
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-overlay {
   /* #ifdef rn */
   position: absolute;
@@ -146,9 +150,6 @@
   bottom: 0;
   left: 0;
   width: 100%;
-  /* #ifdef rn */
-  height: 300px;
-  /* #endif */
 }
 .nut-popup-bottom.nut-popup-round {
   border-radius: var(--nutui-popup-border-radius, 24px) var(--nutui-popup-border-radius, 24px) 0 0;

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

@@ -1,4 +1,8 @@
 @charset "UTF-8";
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-overlay {
   /* #ifdef rn */
   position: absolute;
@@ -146,9 +150,6 @@
   bottom: 0;
   left: 0;
   width: 100%;
-  /* #ifdef rn */
-  height: 300px;
-  /* #endif */
 }
 .nut-popup-bottom.nut-popup-round {
   border-radius: var(--nutui-popup-border-radius, 24px) var(--nutui-popup-border-radius, 24px) 0 0;

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

@@ -98,9 +98,6 @@
     bottom: 0;
     left: 0;
     width: 100%;
-    /* #ifdef rn */
-    height: 300px;
-    /* #endif */
 
     &.nut-popup-round {
       border-radius: $popup-border-radius $popup-border-radius 0 0;

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

@@ -1,4 +1,8 @@
 @charset "UTF-8";
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-overlay {
   /* #ifdef rn */
   position: absolute;
@@ -146,9 +150,6 @@
   bottom: 0;
   left: 0;
   width: 100%;
-  /* #ifdef rn */
-  height: 300px;
-  /* #endif */
 }
 .nut-popup-bottom.nut-popup-round {
   border-radius: var(--nutui-popup-border-radius, 24px) var(--nutui-popup-border-radius, 24px) 0 0;

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-price {
   direction: ltr;
   font-size: var(--nutui-font-size-l, 16px);

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-progress {
   display: flex;
   align-items: center;

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-pulltorefresh-head {
   overflow: hidden;
   position: relative;

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-radiogroup .nut-radio {
   margin: 0 var(--nutui-radiogroup-radio-margin, 20px) var(--nutui-radiogroup-radio-margin-bottom, 5px) 0;
 }

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-radiogroup .nut-radio {
   margin: 0 var(--nutui-radiogroup-radio-margin, 20px) var(--nutui-radiogroup-radio-margin-bottom, 5px) 0;
 }

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-range-container {
   display: flex;
   flex-direction: row;

package/dist/cjs/packages/rate/index.d.ts

@@ -1,3 +1,3 @@
 import { Rate } from "./rate";
-export type { RateProps } from "./rate";
+export type { RateSize, RateProps } from './types';
 export default Rate;

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

@@ -1,17 +1,3 @@
-import React, { FunctionComponent } from 'react';
-import { BasicComponent } from "../../utils/typings";
-export interface RateProps extends BasicComponent {
-    count: number;
-    value: number;
-    defaultValue: number;
-    min: number;
-    checkedIcon: React.ReactNode;
-    uncheckedIcon: React.ReactNode;
-    disabled: boolean;
-    readOnly: boolean;
-    allowHalf: boolean;
-    touchable: boolean;
-    onChange: (value: number) => void;
-    onTouchEnd: (e: TouchEvent, value: number) => void;
-}
+import { FunctionComponent } from 'react';
+import { RateProps } from './types';
 export declare const Rate: FunctionComponent<Partial<RateProps>>;

package/dist/cjs/packages/rate/rate.js

@@ -24,6 +24,8 @@ var _usepropsvalue = require("../../utils/use-props-value");
 var _getrectbytaro = require("../../utils/get-rect-by-taro");
 var _userefs = /*#__PURE__*/ _interop_require_default._(require("../../utils/use-refs"));
 var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
+    size: 'normal',
+    showScore: false,
     count: 5,
     min: 0,
     checkedIcon: null,
@@ -34,7 +36,7 @@ var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typing
     touchable: false
 });
 var Rate = function Rate(props) {
-    var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), className = _$_object_spread.className, style = _$_object_spread.style, count = _$_object_spread.count, value = _$_object_spread.value, defaultValue = _$_object_spread.defaultValue, min = _$_object_spread.min, checkedIcon = _$_object_spread.checkedIcon, uncheckedIcon = _$_object_spread.uncheckedIcon, disabled = _$_object_spread.disabled, readOnly = _$_object_spread.readOnly, allowHalf = _$_object_spread.allowHalf, touchable = _$_object_spread.touchable, onChange = _$_object_spread.onChange, onTouchEnd = _$_object_spread.onTouchEnd;
+    var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), className = _$_object_spread.className, style = _$_object_spread.style, size = _$_object_spread.size, showScore = _$_object_spread.showScore, count = _$_object_spread.count, value = _$_object_spread.value, defaultValue = _$_object_spread.defaultValue, min = _$_object_spread.min, checkedIcon = _$_object_spread.checkedIcon, uncheckedIcon = _$_object_spread.uncheckedIcon, disabled = _$_object_spread.disabled, readOnly = _$_object_spread.readOnly, allowHalf = _$_object_spread.allowHalf, touchable = _$_object_spread.touchable, onChange = _$_object_spread.onChange, onTouchEnd = _$_object_spread.onTouchEnd;
     var classPrefix = 'nut-rate';
     var _useState = (0, _sliced_to_array._)((0, _react.useState)([
         1,
@@ -158,7 +160,7 @@ var Rate = function Rate(props) {
         onTouchCancel: handleTouchEnd
     }, countArray.map(function(n, index) {
         return /*#__PURE__*/ _react.default.createElement(_components.View, {
-            className: "".concat(classPrefix, "-item"),
+            className: "".concat(classPrefix, "-item ").concat(classPrefix, "-item-").concat(size),
             key: n,
             ref: setRefs(index),
             onClick: function onClick1(event) {
@@ -172,6 +174,8 @@ var Rate = function Rate(props) {
                 return onHalfClick(event, n);
             }
         }, renderIcon(n)));
-    }));
+    }), showScore ? /*#__PURE__*/ _react.default.createElement(_components.Text, {
+        className: (0, _classnames.default)("".concat(classPrefix, "-score"), "".concat(classPrefix, "-score-").concat(size), (0, _define_property._)({}, "".concat(classPrefix, "-score-disabled"), disabled))
+    }, score.toFixed(1)) : null);
 };
 Rate.displayName = 'NutRate';

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

@@ -16,13 +16,9 @@
 
   &-item {
     display: flex;
+    align-items: center;
     flex-shrink: 0;
     position: relative;
-    margin-left: $rate-item-margin;
-
-    &:first-child {
-      margin-left: 0;
-    }
 
     &-half {
       position: absolute;
@@ -37,8 +33,41 @@
       }
     }
 
+    &-normal {
+      margin-left: $rate-item-margin;
+      .nut-icon {
+        height: $rate-icon-size;
+        width: $rate-icon-size;
+      }
+    }
+
+    &-large {
+      margin-left: calc($rate-item-margin * 2);
+      .nut-icon {
+        height: calc($rate-icon-size + 8px);
+        width: calc($rate-icon-size + 8px);
+      }
+    }
+
+    &-small {
+      margin-left: calc($rate-item-margin / 2);
+      .nut-icon {
+        height: calc($rate-icon-size - 4px);
+        width: calc($rate-icon-size - 4px);
+      }
+    }
+
+    &-normal,
+    &-large,
+    &-small {
+      &:first-child {
+        margin-left: 0;
+      }
+    }
+
     &-icon {
       display: flex;
+      align-items: center;
       cursor: pointer;
 
       .nut-icon {
@@ -66,18 +95,59 @@
       }
     }
   }
+
+  &-score {
+    display: inline-flex;
+    align-items: center;
+    color: $rate-font-color;
+    font-family: 'JD';
+    line-height: 1;
+
+    &-normal {
+      padding-left: $rate-item-margin;
+      font-size: $rate-font-size;
+    }
+
+    &-large {
+      font-size: calc($rate-font-size + 6px);
+      padding-left: calc($rate-item-margin * 2);
+    }
+
+    &-small {
+      font-size: calc($rate-font-size - 2px);
+      padding-left: calc($rate-item-margin / 2);
+    }
+
+    &-disabled {
+      color: $rate-icon-inactive-color;
+    }
+  }
 }
 
 [dir='rtl'] .nut-rate,
 .nut-rtl .nut-rate {
   &-item {
-    margin-right: 0;
-    margin-left: $rate-item-margin;
+    margin-left: 0;
+    &:first-child {
+      margin-right: 0;
+    }
+
+    &-normal {
+      margin-right: $rate-item-margin;
+    }
+
+    &-large {
+      margin-right: calc($rate-item-margin * 2);
+    }
+
+    &-small {
+      margin-right: calc($rate-item-margin - 2px);
+    }
 
     &:last-child {
-      margin-right: 0;
       margin-left: 0;
     }
+
     &-half {
       left: auto;
       right: 0;
@@ -95,4 +165,20 @@
       }
     }
   }
+
+  &-score {
+    padding-left: 0;
+
+    &-large {
+      padding-right: calc($rate-item-margin * 2);
+    }
+
+    &-normal {
+      padding-right: $rate-item-margin;
+    }
+
+    &-small {
+      padding-right: calc($rate-item-margin - 2px);
+    }
+  }
 }

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-rate {
   display: flex;
   touch-action: pan-x;
@@ -10,12 +14,9 @@
 }
 .nut-rate-item {
   display: flex;
+  align-items: center;
   flex-shrink: 0;
   position: relative;
-  margin-left: var(--nutui-rate-item-margin, 14px);
-}
-.nut-rate-item:first-child {
-  margin-left: 0;
 }
 .nut-rate-item-half {
   position: absolute;
@@ -28,15 +29,40 @@
 .nut-rate-item-half .nut-icon {
   flex-shrink: 0;
 }
+.nut-rate-item-normal {
+  margin-left: var(--nutui-rate-item-margin, 4px);
+}
+.nut-rate-item-normal .nut-icon {
+  height: var(--nutui-rate-icon-size, 12px);
+  width: var(--nutui-rate-icon-size, 12px);
+}
+.nut-rate-item-large {
+  margin-left: calc(var(--nutui-rate-item-margin, 4px) * 2);
+}
+.nut-rate-item-large .nut-icon {
+  height: calc(var(--nutui-rate-icon-size, 12px) + 8px);
+  width: calc(var(--nutui-rate-icon-size, 12px) + 8px);
+}
+.nut-rate-item-small {
+  margin-left: calc(var(--nutui-rate-item-margin, 4px) / 2);
+}
+.nut-rate-item-small .nut-icon {
+  height: calc(var(--nutui-rate-icon-size, 12px) - 4px);
+  width: calc(var(--nutui-rate-icon-size, 12px) - 4px);
+}
+.nut-rate-item-normal:first-child, .nut-rate-item-large:first-child, .nut-rate-item-small:first-child {
+  margin-left: 0;
+}
 .nut-rate-item-icon {
   display: flex;
+  align-items: center;
   cursor: pointer;
 }
 .nut-rate-item-icon .nut-icon {
-  color: var(--nutui-rate-icon-color, var(--nutui-color-primary, #ff0f23));
+  color: var(--nutui-rate-icon-color, var(--nutui-red-6, #ff3333));
 }
 .nut-rate-item-icon-disabled .nut-icon {
-  color: var(--nutui-rate-icon-inactive-color, var(--nutui-color-text-disabled, #c2c4cc));
+  color: var(--nutui-rate-icon-inactive-color, var(--nutui-gray-8, #dadce0));
 }
 .nut-rate-item-icon.nut-rate-item-icon.nut-rate-item-icon-half {
   position: absolute;
@@ -50,15 +76,51 @@
   left: auto;
   transform: none;
 }
+.nut-rate-score {
+  display: inline-flex;
+  align-items: center;
+  color: var(--nutui-rate-font-color, var(--nutui-red-6, #ff3333));
+  font-family: "JD";
+  line-height: 1;
+}
+.nut-rate-score-normal {
+  padding-left: var(--nutui-rate-item-margin, 4px);
+  font-size: var(--nutui-rate-font-size, 12px);
+}
+.nut-rate-score-large {
+  font-size: calc(var(--nutui-rate-font-size, 12px) + 6px);
+  padding-left: calc(var(--nutui-rate-item-margin, 4px) * 2);
+}
+.nut-rate-score-small {
+  font-size: calc(var(--nutui-rate-font-size, 12px) - 2px);
+  padding-left: calc(var(--nutui-rate-item-margin, 4px) / 2);
+}
+.nut-rate-score-disabled {
+  color: var(--nutui-rate-icon-inactive-color, var(--nutui-gray-8, #dadce0));
+}
 
 [dir=rtl] .nut-rate-item,
 .nut-rtl .nut-rate-item {
+  margin-left: 0;
+}
+[dir=rtl] .nut-rate-item:first-child,
+.nut-rtl .nut-rate-item:first-child {
   margin-right: 0;
-  margin-left: var(--nutui-rate-item-margin, 14px);
+}
+[dir=rtl] .nut-rate-item-normal,
+.nut-rtl .nut-rate-item-normal {
+  margin-right: var(--nutui-rate-item-margin, 4px);
+}
+[dir=rtl] .nut-rate-item-large,
+.nut-rtl .nut-rate-item-large {
+  margin-right: calc(var(--nutui-rate-item-margin, 4px) * 2);
+}
+[dir=rtl] .nut-rate-item-small,
+.nut-rtl .nut-rate-item-small {
+  margin-right: calc(var(--nutui-rate-item-margin, 4px) - 2px);
 }
 [dir=rtl] .nut-rate-item:last-child,
 .nut-rtl .nut-rate-item:last-child {
-  margin-right: 0;
   margin-left: 0;
 }
 [dir=rtl] .nut-rate-item-half,
@@ -75,4 +137,20 @@
 .nut-rtl .nut-rate-item-icon.nut-rate-item-icon::before {
   left: auto;
   right: auto;
+}
+[dir=rtl] .nut-rate-score,
+.nut-rtl .nut-rate-score {
+  padding-left: 0;
+}
+[dir=rtl] .nut-rate-score-large,
+.nut-rtl .nut-rate-score-large {
+  padding-right: calc(var(--nutui-rate-item-margin, 4px) * 2);
+}
+[dir=rtl] .nut-rate-score-normal,
+.nut-rtl .nut-rate-score-normal {
+  padding-right: var(--nutui-rate-item-margin, 4px);
+}
+[dir=rtl] .nut-rate-score-small,
+.nut-rtl .nut-rate-score-small {
+  padding-right: calc(var(--nutui-rate-item-margin, 4px) - 2px);
 }