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

package/dist/es/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;
 }
@@ -15,8 +19,8 @@
   border: 1px solid var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05));
 }
 .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);
+  border: var(--nutui-radio-button-active-border, 1px solid var(--nutui-brand-6));
+  background-color: var(--nutui-brand-1);
 }
 .nut-radiogroup-horizontal .nut-radio {
   display: inline-flex;
@@ -25,13 +29,13 @@
   border: 1px solid #ffffff;
 }
 .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);
+  border: var(--nutui-radio-button-active-border, 1px solid var(--nutui-brand-6));
+  background-color: var(--nutui-brand-1);
 }
 .nut-radiogroup .nut-radio-button-active.nut-radio-button-disabled {
-  background: var(--nutui-color-text-disabled, #c2c4cc);
+  background: var(--nutui-gray-4);
   color: #ffffff;
-  border: 1px solid var(--nutui-color-text-disabled, #c2c4cc);
+  border: 1px solid var(--nutui-gray-4);
 }
 
 [dir=rtl] .nut-radiogroup .nut-radio,
@@ -58,51 +62,54 @@
 }
 .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-gray-7));
 }
 .nut-radio-label-disabled {
-  color: var(--nutui-radio-label-disable-color, var(--nutui-color-text-disabled, #c2c4cc));
+  color: var(--nutui-radio-label-disable-color, var(--nutui-gray-4));
 }
 .nut-radio-icon {
-  color: var(--nutui-color-text-disabled, #c2c4cc);
+  color: var(--nutui-gray-4);
   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);
+  color: var(--nutui-brand-6);
+  box-shadow: 0px 2px 4px 0px rgba(255, 15, 35, 0.2);
+  border-radius: 50%;
 }
 .nut-radio-icon-checked.nut-radio-icon-disabled {
-  color: var(--nutui-color-primary-disabled, #ffadbe);
+  color: var(--nutui-brand-3);
+  box-shadow: none;
 }
 .nut-radio-icon-disabled {
-  color: var(--nutui-color-text-disabled, #c2c4cc);
+  color: var(--nutui-gray-4);
 }
 .nut-radio-button {
   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-gray-7));
   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);
-  color: var(--nutui-color-primary, #ff0f23);
-  border: var(--nutui-radio-button-active-border, 1px solid var(--nutui-color-primary, #ff0f23));
+  background: var(--nutui-brand-1);
+  color: var(--nutui-brand-6);
+  border: var(--nutui-radio-button-active-border, 1px solid var(--nutui-brand-6));
 }
 .nut-radio-button-disabled {
-  color: var(--nutui-color-text-disabled, #c2c4cc);
+  color: var(--nutui-gray-4);
   border: 1px solid var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05));
 }
 .nut-radio .nut-radio-button-active.nut-radio-button-disabled {
-  background: var(--nutui-color-text-disabled, #c2c4cc);
+  background: var(--nutui-gray-4);
   color: #ffffff;
-  border: 1px solid var(--nutui-color-text-disabled, #c2c4cc);
+  border: 1px solid var(--nutui-gray-4);
 }
 
 [dir=rtl] .nut-radio:last-child,

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

@@ -1,41 +1,14 @@
 import React from 'react';
+import { ViewProps } from '@tarojs/components/types/View';
 import { RadioGroupDirection, RadioGroupOption, RadioGroupPosition, RadioGroupShape } from './types';
 export interface RadioGroupProps {
-    /**
-    * 当前选中项的标识符
-    * @default -
-    */
-    value?: string | number
+    value?: string | number;
     defaultValue?: string | number;
-    /**
-    * 文本所在的位置
-    * @default right
-    */
-    labelPosition: RadioGroupPosition
-    /**
-    * 使用横纵方向
-    * @default vertical
-    */
-    direction: RadioGroupDirection
-    /**
-    * 形状
-    * @default -
-    */
-    shape?: RadioGroupShape
-    /**
-    * 是否禁用
-    * @default false
-    */
-    disabled?: boolean
-    /**
-    * 配置 options 渲染单选按钮
-    * @default -
-    */
-    options: RadioGroupOption[]
-    /**
-    * 值变化时触发
-    * @default -
-    */
-    onChange: (value: string | number) => void
+    labelPosition: RadioGroupPosition;
+    direction: RadioGroupDirection;
+    shape?: RadioGroupShape;
+    disabled?: boolean;
+    options: RadioGroupOption[];
+    onChange: (value: string | number) => void;
 }
-export declare const RadioGroup: React.ForwardRefExoticComponent<Partial<RadioGroupProps> & Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> & React.RefAttributes<unknown>>;
+export declare const RadioGroup: React.ForwardRefExoticComponent<Omit<Partial<RadioGroupProps> & Omit<ViewProps, "onChange">, "ref"> & React.RefAttributes<unknown>>;

package/dist/es/packages/radiogroup/radiogroup.js

@@ -5,6 +5,7 @@ import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_
 import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
 import React, { useCallback } from "react";
 import classNames from "classnames";
+import { View } from "@tarojs/components";
 import RadioContext from "./context";
 import Radio from "../radio/index";
 import { usePropsValue } from "../../utils/use-props-value";
@@ -28,6 +29,7 @@ export var RadioGroup = /*#__PURE__*/ React.forwardRef(function(props, ref) {
         "options",
         "disabled"
     ]);
+    var cls = classNames(classPrefix, _define_property({}, "".concat(classPrefix, "-").concat(direction), direction), className);
     var _usePropsValue = _sliced_to_array(usePropsValue({
         defaultValue: props.defaultValue,
         value: props.value,
@@ -53,7 +55,9 @@ export var RadioGroup = /*#__PURE__*/ React.forwardRef(function(props, ref) {
             }));
         });
     }, [
-        options
+        options,
+        labelPosition,
+        val2State
     ]);
     return /*#__PURE__*/ React.createElement(RadioContext.Provider, {
         value: {
@@ -68,9 +72,8 @@ export var RadioGroup = /*#__PURE__*/ React.forwardRef(function(props, ref) {
                 setVal2State('');
             }
         }
-    }, /*#__PURE__*/ React.createElement("div", _object_spread({
-        className: classNames(classPrefix, _define_property({}, "".concat(classPrefix, "-").concat(props.direction), props.direction), className)
+    }, /*#__PURE__*/ React.createElement(View, _object_spread({
+        className: cls
     }, rest), (options === null || options === void 0 ? void 0 : options.length) ? renderOptionsChildren() : children));
 });
-RadioGroup.defaultProps = defaultProps;
 RadioGroup.displayName = 'NutRadioGroup';

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

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

package/dist/es/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;
 }
@@ -15,8 +19,8 @@
   border: 1px solid var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05));
 }
 .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);
+  border: var(--nutui-radio-button-active-border, 1px solid var(--nutui-brand-6));
+  background-color: var(--nutui-brand-1);
 }
 .nut-radiogroup-horizontal .nut-radio {
   display: inline-flex;
@@ -25,13 +29,13 @@
   border: 1px solid #ffffff;
 }
 .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);
+  border: var(--nutui-radio-button-active-border, 1px solid var(--nutui-brand-6));
+  background-color: var(--nutui-brand-1);
 }
 .nut-radiogroup .nut-radio-button-active.nut-radio-button-disabled {
-  background: var(--nutui-color-text-disabled, #c2c4cc);
+  background: var(--nutui-gray-4);
   color: #ffffff;
-  border: 1px solid var(--nutui-color-text-disabled, #c2c4cc);
+  border: 1px solid var(--nutui-gray-4);
 }
 
 [dir=rtl] .nut-radiogroup .nut-radio,

package/dist/es/packages/range/range.js

@@ -4,7 +4,7 @@ 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";
 import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
-import React, { useEffect, useState, useRef, useCallback, useMemo } from "react";
+import React, { useEffect, useState, useCallback, useMemo, useRef } from "react";
 import classNames from "classnames";
 import { View, Text } from "@tarojs/components";
 import pxTransform from "../../utils/px-transform";
@@ -38,19 +38,22 @@ var handleOverlap = function(value) {
 };
 export var Range = function(props) {
     var rtl = useRtl();
-    var _$_object_spread = _object_spread({}, defaultProps, props), className = _$_object_spread.className, style = _$_object_spread.style, range = _$_object_spread.range, disabled = _$_object_spread.disabled, button = _$_object_spread.button, vertical = _$_object_spread.vertical, marks = _$_object_spread.marks, onChange = _$_object_spread.onChange, onStart = _$_object_spread.onStart, onEnd = _$_object_spread.onEnd, minDescription = _$_object_spread.minDescription, maxDescription = _$_object_spread.maxDescription, currentDescription = _$_object_spread.currentDescription, min = _$_object_spread.min, max = _$_object_spread.max, step = _$_object_spread.step, value = _$_object_spread.value, defaultValue = _$_object_spread.defaultValue;
+    var _$_object_spread = _object_spread({}, defaultProps, props), className = _$_object_spread.className, style = _$_object_spread.style, range = _$_object_spread.range, disabled = _$_object_spread.disabled, button = _$_object_spread.button, vertical = _$_object_spread.vertical, marks = _$_object_spread.marks, minDescription = _$_object_spread.minDescription, maxDescription = _$_object_spread.maxDescription, currentDescription = _$_object_spread.currentDescription, min = _$_object_spread.min, max = _$_object_spread.max, step = _$_object_spread.step, value = _$_object_spread.value, defaultValue = _$_object_spread.defaultValue, onChange = _$_object_spread.onChange, onStart = _$_object_spread.onStart, onEnd = _$_object_spread.onEnd;
     var rtlClassPrefix = useMemo(function() {
         return "rtl-".concat(vertical ? verticalClassPrefix : classPrefix);
     }, [
         vertical
     ]);
     var _useState = _sliced_to_array(useState(0), 2), buttonIndex = _useState[0], setButtonIndex = _useState[1];
-    var _useState1 = _sliced_to_array(useState('start' || 'draging' || ''), 2), dragStatus = _useState1[0], setDragStatus = _useState1[1];
+    var _useState1 = _sliced_to_array(useState('start'), 2), dragStatus = _useState1[0], setDragStatus = _useState1[1];
     var touch = useTouch();
     var root = useRef(null);
     var _useState2 = _sliced_to_array(useState([]), 2), marksList = _useState2[0], setMarksList = _useState2[1];
     var _useState3 = _sliced_to_array(useState(0), 2), startValue = _useState3[0], setStartValue = _useState3[1];
     var scope = useMemo(function() {
+        if (max < min || max === min) {
+            console.log('max 的值需要大于 min的值');
+        }
         return max - min;
     }, [
         max,
@@ -72,7 +75,6 @@ export var Range = function(props) {
     useEffect(function() {
         if (marks) {
             if (Array.isArray(marks)) {
-                // 增加变量
                 var list = marks.sort(function(a, b) {
                     return a.value - b.value;
                 }).filter(function(point) {
@@ -99,6 +101,10 @@ export var Range = function(props) {
         max,
         min
     ]);
+    var _obj;
+    var classes = classNames(classPrefix, (_obj = {}, _define_property(_obj, "".concat(classPrefix, "-disabled"), disabled), _define_property(_obj, verticalClassPrefix, vertical), _define_property(_obj, "".concat(classPrefix, "-native"), isNative), _obj));
+    var _obj1;
+    var containerClasses = classNames("".concat(classPrefix, "-container"), (_obj1 = {}, _define_property(_obj1, "".concat(classPrefix, "-container-native"), isNative), _define_property(_obj1, "".concat(verticalClassPrefix, "-container"), vertical), _obj1), className);
     var markClassName = useCallback(function(mark) {
         var classPrefix = 'nut-range-mark';
         var verticalClassPrefix = 'nut-range-vertical-mark';
@@ -139,10 +145,7 @@ export var Range = function(props) {
     ]);
     var calcMainAxis = useCallback(function() {
         var modelVal = current;
-        if (isRange(modelVal)) {
-            return "".concat((modelVal[1] - modelVal[0]) * 100 / scope, "%");
-        }
-        return "".concat((modelVal - min) * 100 / scope, "%");
+        return isRange(modelVal) ? "".concat((modelVal[1] - modelVal[0]) * 100 / scope, "%") : "".concat((modelVal - min) * 100 / scope, "%");
     }, [
         current,
         isRange,
@@ -151,10 +154,7 @@ export var Range = function(props) {
     ]);
     var calcOffset = useCallback(function() {
         var modelVal = current;
-        if (isRange(modelVal)) {
-            return "".concat((modelVal[0] - min) * 100 / scope, "%");
-        }
-        return "0%";
+        return isRange(modelVal) ? "".concat((modelVal[0] - min) * 100 / scope, "%") : "0%";
     }, [
         current,
         isRange,
@@ -230,7 +230,7 @@ export var Range = function(props) {
         onEnd,
         setCurrent
     ]);
-    var click = useCallback(function() {
+    var click = useCallback(/*#__PURE__*/ function() {
         var _ref = _async_to_generator(function(event) {
             var _event_detail, rect, x, delta, total, _event_detail1, y, value, _current, left, right, middle;
             return _ts_generator(this, function(_state) {
@@ -315,7 +315,7 @@ export var Range = function(props) {
         isRange,
         touch
     ]);
-    var onTouchMove = useCallback(function() {
+    var onTouchMove = useCallback(/*#__PURE__*/ function() {
         var _ref = _async_to_generator(function(event) {
             var rect, delta, total, diff, newValue;
             return _ts_generator(this, function(_state) {
@@ -331,7 +331,6 @@ export var Range = function(props) {
                             onStart && onStart();
                         }
                         touch.move(isRn ? event.nativeEvent : event);
-                        // console.log(JSON.stringify(event.touches[0]))
                         setDragStatus('draging');
                         return [
                             4,
@@ -344,7 +343,6 @@ export var Range = function(props) {
                         ];
                         delta = isHm ? parseFloat(pxTransform(touch.deltaX.current)) : touch.deltaX.current;
                         total = rect.width;
-                        // console.log(pxTransform(delta), total)
                         diff = delta / total * scope;
                         diff = rtl ? -diff : diff;
                         if (vertical) {
@@ -468,8 +466,10 @@ export var Range = function(props) {
     var renderMarks = useCallback(function() {
         if (marksList.length <= 0) return null;
         var _obj;
+        var markcls = classNames("".concat(classPrefix, "-mark"), (_obj = {}, _define_property(_obj, "".concat(verticalClassPrefix, "-mark"), vertical), _define_property(_obj, "".concat(rtlClassPrefix, "-mark"), rtl), _define_property(_obj, "".concat(vertical ? verticalClassPrefix : classPrefix, "-mark-hm"), isHm), _obj));
+        var textcls = classNames("".concat(classPrefix, "-mark-text"), _define_property({}, "".concat(verticalClassPrefix, "-mark-text"), vertical));
         return /*#__PURE__*/ React.createElement(View, {
-            className: classNames("".concat(classPrefix, "-mark"), (_obj = {}, _define_property(_obj, "".concat(verticalClassPrefix, "-mark"), vertical), _define_property(_obj, "".concat(rtlClassPrefix, "-mark"), rtl), _define_property(_obj, "".concat(vertical ? verticalClassPrefix : classPrefix, "-mark-hm"), isHm), _obj))
+            className: markcls
         }, marksList.map(function(mark) {
             var _obj;
             return /*#__PURE__*/ React.createElement(View, {
@@ -477,7 +477,7 @@ export var Range = function(props) {
                 className: markClassName(mark),
                 style: marksStyle(mark)
             }, /*#__PURE__*/ React.createElement(Text, {
-                className: classNames("".concat(classPrefix, "-mark-text"), _define_property({}, "".concat(verticalClassPrefix, "-mark-text"), vertical))
+                className: textcls
             }, Array.isArray(marks) ? marksRef.current[mark] : marks[mark]), /*#__PURE__*/ React.createElement(View, {
                 className: classNames("".concat(vertical ? verticalClassPrefix : classPrefix, "-tick"), (_obj = {}, _define_property(_obj, "".concat(vertical ? verticalClassPrefix : classPrefix, "-tick-active"), tickClass(mark)), _define_property(_obj, "".concat(rtlClassPrefix, "-tick"), rtl), _obj))
             }));
@@ -521,31 +521,27 @@ export var Range = function(props) {
         }
         return 'translate(-50%, -50%)';
     }, []);
-    var renderButtonWrapper = useCallback(function() {
-        if (range) return [
+    var renderRangeButton = useCallback(function() {
+        return [
             0,
             1
         ].map(function(item, index) {
             var isLeft = index === 0;
             var suffix = isLeft ? 'left' : 'right';
             var _obj;
+            var cls = classNames("".concat(classPrefix, "-button-wrapper-").concat(suffix), (_obj = {}, _define_property(_obj, "".concat(verticalClassPrefix, "-button-wrapper-").concat(suffix), vertical), _define_property(_obj, "".concat(rtlClassPrefix, "-button-wrapper-").concat(suffix), rtl), _obj));
             return /*#__PURE__*/ React.createElement(View, {
                 key: index,
-                className: classNames("".concat(classPrefix, "-button-wrapper-").concat(suffix), (_obj = {}, _define_property(_obj, "".concat(verticalClassPrefix, "-button-wrapper-").concat(suffix), vertical), _define_property(_obj, "".concat(rtlClassPrefix, "-button-wrapper-").concat(suffix), rtl), _obj)),
+                className: cls,
                 style: {
                     // @ts-ignore
                     transform: rangeWrapperTransform
                 },
                 onTouchStart: function(e) {
-                    if (typeof index === 'number') {
-                        // 实时更新当前拖动的按钮索引
-                        setButtonIndex(index);
-                    }
+                    setButtonIndex(index);
                     onTouchStart(e);
                 },
-                onTouchMove: function(e) {
-                    return onTouchMove(e);
-                },
+                onTouchMove: onTouchMove,
                 onTouchEnd: onTouchEnd,
                 onTouchCancel: onTouchEnd,
                 onClick: function(e) {
@@ -553,6 +549,17 @@ export var Range = function(props) {
                 }
             }, renderButton(index));
         });
+    }, [
+        onTouchEnd,
+        onTouchMove,
+        onTouchStart,
+        renderButton,
+        rangeWrapperTransform,
+        vertical,
+        rtl,
+        rtlClassPrefix
+    ]);
+    var renderSingleButton = useCallback(function() {
         return /*#__PURE__*/ React.createElement(View, {
             catchMove: true,
             className: classNames("".concat(classPrefix, "-button-wrapper"), _define_property({}, "".concat(verticalClassPrefix, "-button-wrapper"), vertical)),
@@ -560,12 +567,8 @@ export var Range = function(props) {
                 // @ts-ignore
                 transform: wrapperTransform
             },
-            onTouchStart: function(e) {
-                return onTouchStart(e);
-            },
-            onTouchMove: function(e) {
-                return onTouchMove(e);
-            },
+            onTouchStart: onTouchStart,
+            onTouchMove: onTouchMove,
             onTouchEnd: onTouchEnd,
             onTouchCancel: onTouchEnd,
             onClick: function(e) {
@@ -576,23 +579,28 @@ export var Range = function(props) {
         onTouchEnd,
         onTouchMove,
         onTouchStart,
-        range,
-        rangeWrapperTransform,
         renderButton,
-        rtl,
-        rtlClassPrefix,
-        vertical,
-        wrapperTransform
+        wrapperTransform,
+        vertical
+    ]);
+    var renderButtonWrapper = useCallback(function() {
+        if (range) {
+            return renderRangeButton();
+        }
+        return renderSingleButton();
+    }, [
+        renderRangeButton,
+        renderSingleButton,
+        range
     ]);
-    var _obj, _obj1;
     return /*#__PURE__*/ React.createElement(View, {
-        className: classNames("".concat(classPrefix, "-container"), (_obj = {}, _define_property(_obj, "".concat(classPrefix, "-container-native"), isNative), _define_property(_obj, "".concat(verticalClassPrefix, "-container"), vertical), _obj), className),
+        className: containerClasses,
         style: style
     }, minDescription !== null && /*#__PURE__*/ React.createElement(Text, {
         className: "".concat(classPrefix, "-min")
     }, minDescription || min), /*#__PURE__*/ React.createElement(View, {
         ref: root,
-        className: classNames(classPrefix, (_obj1 = {}, _define_property(_obj1, "".concat(classPrefix, "-disabled"), disabled), _define_property(_obj1, verticalClassPrefix, vertical), _define_property(_obj1, "".concat(classPrefix, "-native"), isNative), _obj1)),
+        className: classes,
         onClick: function(e) {
             return click(e);
         }

package/dist/es/packages/range/style/range.scss

@@ -32,7 +32,7 @@
 
   &-min,
   &-max {
-    font-size: $font-size-small;
+    font-size: $font-size-s;
     color: $range-color;
     user-select: none;
   }
@@ -42,6 +42,8 @@
     position: relative;
     width: 100%;
     height: 100%;
+    max-width: 100%;
+    max-height: 100%;
     background: $range-active-color;
     border-radius: 2px;
     transition: all 0.2s;
@@ -101,7 +103,7 @@
       align-items: center;
       justify-content: center;
       user-select: none;
-      font-size: $font-size-small;
+      font-size: $font-size-s;
       color: $range-color;
       text-align: center;
       vertical-align: center;

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-range-container {
   display: flex;
   flex-direction: row;
@@ -16,7 +20,7 @@
   position: relative;
   height: var(--nutui-range-height, 4px);
   margin: 0 var(--nutui-range-margin, 15px);
-  background-color: var(--nutui-range-inactive-color, var(--nutui-color-primary-light, #ffebf1));
+  background-color: var(--nutui-range-inactive-color, var(--nutui-brand-1));
   border-radius: 2px;
   flex: 1;
   cursor: pointer;
@@ -28,8 +32,8 @@
   content: "";
 }
 .nut-range-min, .nut-range-max {
-  font-size: var(--nutui-font-size-2, 12px);
-  color: var(--nutui-range-color, var(--nutui-gray-7, #1a1a1a));
+  font-size: var(--nutui-font-size-s, 12px);
+  color: var(--nutui-range-color, var(--nutui-gray-7));
   user-select: none;
 }
 .nut-range-bar {
@@ -37,7 +41,9 @@
   position: relative;
   width: 100%;
   height: 100%;
-  background: var(--nutui-range-active-color, var(--nutui-color-primary, #ff0f23));
+  max-width: 100%;
+  max-height: 100%;
+  background: var(--nutui-range-active-color, var(--nutui-brand-6));
   border-radius: 2px;
   transition: all 0.2s;
 }
@@ -46,10 +52,10 @@
   display: flex;
   width: var(--nutui-range-button-width, 24px);
   height: var(--nutui-range-button-height, 24px);
-  background: var(--nutui-range-button-background, var(--nutui-color-primary-text, #ffffff));
+  background: var(--nutui-range-button-background, #ffffff);
   border-radius: 50%;
   box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
-  border: var(--nutui-range-button-border, 1px solid var(--nutui-color-primary, #ff0f23));
+  border: var(--nutui-range-button-border, 1px solid var(--nutui-brand-6));
   outline: none;
   align-items: center;
   top: 50%;
@@ -86,8 +92,8 @@
   align-items: center;
   justify-content: center;
   user-select: none;
-  font-size: var(--nutui-font-size-2, 12px);
-  color: var(--nutui-range-color, var(--nutui-gray-7, #1a1a1a));
+  font-size: var(--nutui-font-size-s, 12px);
+  color: var(--nutui-range-color, var(--nutui-gray-7));
   text-align: center;
   vertical-align: center;
   box-sizing: border-box;
@@ -131,10 +137,10 @@
   height: 11px;
   left: 0px;
   border-radius: 6px;
-  background: var(--nutui-range-inactive-color, var(--nutui-color-primary-light, #ffebf1));
+  background: var(--nutui-range-inactive-color, var(--nutui-brand-1));
 }
 .nut-range-tick-active {
-  background: var(--nutui-range-active-color, var(--nutui-color-primary, #ff0f23));
+  background: var(--nutui-range-active-color, var(--nutui-brand-6));
 }
 
 .nut-range-vertical-container {
@@ -197,10 +203,10 @@
   width: 10px;
   height: 10px;
   border-radius: 5px;
-  background: var(--nutui-range-inactive-color, var(--nutui-color-primary-light, #ffebf1));
+  background: var(--nutui-range-inactive-color, var(--nutui-brand-1));
 }
 .nut-range-vertical-tick-active {
-  background: var(--nutui-range-active-color, var(--nutui-color-primary, #ff0f23));
+  background: var(--nutui-range-active-color, var(--nutui-brand-6));
 }
 
 [dir=rtl] .nut-range-button-wrapper, [dir=rtl] .nut-range-button-wrapper-right,

package/dist/es/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/es/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>>;