@nutui/nutui-react 3.1.0-beta.1 → 4.0.0-beta.1

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

@@ -45,7 +45,7 @@ page {
   line-height: calc(42px * var(--nut-scale-f, 1));
   margin: auto;
   text-align: center;
-  background: linear-gradient(90deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%);
+  background: var(--nutui-button-primary-background-color, var(--nutui-color-primary, #ff0f23));
   border-radius: calc(21px * var(--nut-scale-f, 1));
   font-size: var(--nutui-font-size-l, calc(15px * var(--nut-scale-font, var(--nut-scale-f, 1))));
   color: #ffffff;
@@ -107,7 +107,7 @@ page {
 }
 .nut-address-selected-item.active {
   border: calc(1px * var(--nut-scale-f, 1)) solid var(--nutui-color-primary, #ff0f23);
-  background-color: var(--nutui-color-primary-light-pressed, #ffebf1);
+  background-color: var(--nutui-color-primary-light-pressed, #ffe8ee);
   color: var(--nutui-color-primary, #ff0f23);
 }
 .nut-address-selected-border {

package/dist/es/packages/audio/audio.js

@@ -150,8 +150,8 @@ export var Audio = function(props) {
             currentDescription: null,
             maxDescription: null,
             minDescription: null,
-            "inactive-color": "#cccccc",
-            "active-color": "#FF0F23"
+            "inactive-color": "var(--nutui-color-text-disabled, #c2c4cc)",
+            "active-color": "var(--nutui-color-primary, #ff0f23)"
         })), /*#__PURE__*/ React.createElement("div", {
             className: "time"
         }, AudioRef.current ? formatSeconds("".concat(statusRef.current.second)) : '00:00:00')), /*#__PURE__*/ React.createElement("div", {

package/dist/es/packages/button/button.js

@@ -22,7 +22,7 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     onClick: function() {}
 });
 export var Button = /*#__PURE__*/ React.forwardRef(function(props, ref) {
-    var _ref = _object_spread({}, defaultProps, props), color = _ref.color, shape = _ref.shape, fill = _ref.fill, loading = _ref.loading, disabled = _ref.disabled, type = _ref.type, size = _ref.size, block = _ref.block, icon = _ref.icon, rightIcon = _ref.rightIcon, children = _ref.children, className = _ref.className, style = _ref.style, nativeType = _ref.nativeType, onClick = _ref.onClick, rest = _object_without_properties(_ref, [
+    var _ref = _object_spread({}, defaultProps, props), color = _ref.color, shape = _ref.shape, fill = _ref.fill, loading = _ref.loading, disabled = _ref.disabled, type = _ref.type, size = _ref.size, block = _ref.block, icon = _ref.icon, rightIcon = _ref.rightIcon, children = _ref.children, className = _ref.className, style = _ref.style, nativeType = _ref.nativeType, description = _ref.description, onClick = _ref.onClick, rest = _object_without_properties(_ref, [
         "color",
         "shape",
         "fill",
@@ -37,8 +37,22 @@ export var Button = /*#__PURE__*/ React.forwardRef(function(props, ref) {
         "className",
         "style",
         "nativeType",
+        "description",
         "onClick"
     ]);
+    var mappedSize = useMemo(function() {
+        if (!size) return 'normal';
+        var sizeMap = {
+            '48': 'xlarge',
+            '40': 'large',
+            '32': 'normal',
+            '28': 'small',
+            '24': 'mini'
+        };
+        return sizeMap[size] || size;
+    }, [
+        size
+    ]);
     var getStyle = useMemo(function() {
         var style = {};
         if (color) {
@@ -48,7 +62,7 @@ export var Button = /*#__PURE__*/ React.forwardRef(function(props, ref) {
                     style.borderColor = color;
                 }
             } else {
-                style.color = '#fff';
+                style.color = 'var(--nutui-color-primary-text, #fff)';
                 style.background = color;
                 style.borderColor = 'transparent';
             }
@@ -68,19 +82,29 @@ export var Button = /*#__PURE__*/ React.forwardRef(function(props, ref) {
         onClick
     ]);
     var _obj;
-    var buttonClassNames = classNames(prefixCls, "".concat(prefixCls, "-").concat(type), (_obj = {}, _define_property(_obj, "".concat(prefixCls, "-").concat(type, "-solid"), type === 'primary' && !props.fill), _define_property(_obj, "".concat(prefixCls, "-").concat(fill), props.fill), _define_property(_obj, "".concat(prefixCls, "-").concat(type, "-").concat(fill), props.fill), _define_property(_obj, "".concat(prefixCls, "-").concat(size), size), _define_property(_obj, "".concat(prefixCls, "-").concat(shape), shape), _define_property(_obj, "".concat(prefixCls, "-block"), block), _define_property(_obj, "".concat(prefixCls, "-disabled"), disabled || loading), _define_property(_obj, "".concat(prefixCls, "-").concat(type).concat(props.fill ? "-".concat(fill) : '', "-disabled"), disabled || loading), _define_property(_obj, "".concat(prefixCls, "-loading"), loading), _define_property(_obj, "".concat(prefixCls, "-icononly"), !children), _obj), className);
+    var buttonClassNames = classNames(prefixCls, "".concat(prefixCls, "-").concat(type), (_obj = {}, _define_property(_obj, "".concat(prefixCls, "-").concat(type, "-solid"), type === 'primary' && !props.fill), _define_property(_obj, "".concat(prefixCls, "-").concat(fill), props.fill), _define_property(_obj, "".concat(prefixCls, "-").concat(type, "-").concat(fill), props.fill), _define_property(_obj, "".concat(prefixCls, "-").concat(mappedSize), mappedSize), _define_property(_obj, "".concat(prefixCls, "-has-desc"), !!description), _define_property(_obj, "".concat(prefixCls, "-").concat(shape), shape), _define_property(_obj, "".concat(prefixCls, "-block"), block), _define_property(_obj, "".concat(prefixCls, "-disabled"), disabled || loading), _define_property(_obj, "".concat(prefixCls, "-").concat(type).concat(props.fill ? "-".concat(fill) : '', "-disabled"), disabled || loading), _define_property(_obj, "".concat(prefixCls, "-loading"), loading), _define_property(_obj, "".concat(prefixCls, "-icononly"), !children), _obj), className);
     return /*#__PURE__*/ React.createElement("button", _object_spread_props(_object_spread({}, rest), {
         ref: ref,
         type: nativeType,
         className: buttonClassNames,
         style: _object_spread({}, getStyle, style),
+        "aria-disabled": disabled || loading,
+        "aria-busy": loading,
         onClick: handleClick
     }), /*#__PURE__*/ React.createElement("div", {
         className: "nut-button-wrap"
     }, loading && /*#__PURE__*/ React.createElement(Loading, {
-        className: "nut-icon-loading"
+        className: "nut-icon-loading",
+        "aria-hidden": "true"
     }), !loading && icon, children && /*#__PURE__*/ React.createElement("div", {
-        className: "".concat(props.fill || disabled || loading ? "nut-button-".concat(type).concat(props.fill ? "-".concat(fill) : '').concat(disabled || loading ? '-disabled' : '') : '').concat(icon || loading ? ' nut-button-text' : '').concat(rightIcon ? ' nut-button-text-right' : '')
-    }, children), rightIcon));
+        className: classNames({
+            'nut-button-text': icon || loading,
+            'nut-button-text-right': rightIcon
+        })
+    }, description ? /*#__PURE__*/ React.createElement("div", {
+        className: "nut-button-title"
+    }, children) : children, description && /*#__PURE__*/ React.createElement("div", {
+        className: "nut-button-desc"
+    }, description)), rightIcon));
 });
 Button.displayName = 'NutButton';