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

package/dist/cjs/packages/searchbar/searchbar.js

@@ -45,21 +45,23 @@ var SearchBar = function SearchBar(props) {
         var searchSelf = searchRef.current;
         searchSelf && searchSelf.focus();
     };
-    var change = function change(event) {
-        if (value === event.target.value) return;
-        onChange && (onChange === null || onChange === void 0 ? void 0 : onChange(event.target.value, event));
-        setValue(event.target.value);
-        event.target.value === '' && forceFocus();
+    var onInput = function onInput(event) {
+        var _event_detail;
+        var eventValue = event === null || event === void 0 ? void 0 : (_event_detail = event.detail) === null || _event_detail === void 0 ? void 0 : _event_detail.value;
+        if (value === eventValue) return;
+        onChange && (onChange === null || onChange === void 0 ? void 0 : onChange(eventValue, event));
+        setValue(eventValue);
+        eventValue === '' && forceFocus();
     };
     var focus = function focus(event) {
-        var value = event.target.value;
-        onFocus && (onFocus === null || onFocus === void 0 ? void 0 : onFocus(value, event));
+        var _event_detail;
+        onFocus && onFocus(event === null || event === void 0 ? void 0 : (_event_detail = event.detail) === null || _event_detail === void 0 ? void 0 : _event_detail.value, event);
     };
     var blur = function blur(event) {
+        var _event_detail;
         var searchSelf = searchRef.current;
         searchSelf && searchSelf.blur();
-        var value = event.target.value;
-        onBlur && (onBlur === null || onBlur === void 0 ? void 0 : onBlur(value, event));
+        onBlur && onBlur(event === null || event === void 0 ? void 0 : (_event_detail = event.detail) === null || _event_detail === void 0 ? void 0 : _event_detail.value, event);
     };
     (0, _react.useEffect)(function() {
         setValue(outerValue || '');
@@ -72,28 +74,21 @@ var SearchBar = function SearchBar(props) {
         autoFocus
     ]);
     var renderField = function renderField() {
-        return /*#__PURE__*/ _react.default.createElement("input", {
+        return /*#__PURE__*/ _react.default.createElement(_components.Input, {
             className: "".concat(classPrefix, "-input ").concat(clearable ? "".concat(classPrefix, "-input-clear") : ''),
             ref: searchRef,
             style: style,
             value: value || '',
             placeholder: placeholder || locale.placeholder,
-            disabled: disabled,
-            readOnly: readOnly,
-            maxLength: maxLength,
-            onKeyPress: onKeypress,
-            onChange: function onChange(e) {
-                return change(e);
-            },
-            onFocus: function onFocus(e) {
-                return focus(e);
-            },
-            onBlur: function onBlur(e) {
-                return blur(e);
-            },
-            onClick: function onClick(e) {
-                return clickInput(e);
-            }
+            disabled: disabled || readOnly,
+            maxlength: maxLength,
+            // @ts-ignore
+            // onKeyDown={onKeypress}
+            onInput: onInput,
+            onFocus: focus,
+            onBlur: blur,
+            onClick: clickInput,
+            onConfirm: onConfirm
         });
     };
     var clickInput = function clickInput(e) {
@@ -144,13 +139,16 @@ var SearchBar = function SearchBar(props) {
         onChange && (onChange === null || onChange === void 0 ? void 0 : onChange(''));
         onClear && onClear(event);
     };
-    var onKeypress = function onKeypress(e) {
-        if (e.key === 'Enter' || e.keyCode === 13) {
-            if (typeof e.cancelable !== 'boolean' || e.cancelable) {
-                e.preventDefault();
-            }
-            onSearch && onSearch(value);
-        }
+    //   const onKeypress = (event: any) => {
+    //     if (event?.detail?.keyCode === 13) {
+    //       if (typeof event.cancelable !== 'boolean' || event.cancelable) {
+    //         event.preventDefault()
+    //       }
+    //       onSearch && onSearch(value as string)
+    //     }
+    //   }
+    var onConfirm = function onConfirm() {
+        onSearch && onSearch(value);
     };
     return /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: "".concat(classPrefix, " ").concat(disabled ? "".concat(classPrefix, "-disabled") : '', "  ").concat(className || ''),

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

@@ -35,7 +35,8 @@
 
   &-left,
   &-right {
-    display: flex;
+    display: inline-flex;
+    align-items: center;
 
     &.nut-icon {
       width: 20px;
@@ -48,7 +49,9 @@
 
     & > div,
     & > span,
-    & > svg {
+    & > i,
+    & > svg,
+    .nut-icon {
       margin-right: $searchbar-gap;
 
       &:last-child {
@@ -59,10 +62,11 @@
 
   &-right {
     margin-left: $searchbar-gap;
-
     & > div,
     & > span,
-    & > svg {
+    & > i,
+    & > svg,
+    .nut-icon {
       margin-left: $searchbar-gap;
 
       &:first-child {
@@ -89,7 +93,8 @@
     }
   }
 
-  &-input-box {
+  &-input-box,
+  &-input {
     display: flex;
     align-items: center;
     flex: 1;
@@ -100,8 +105,6 @@
     outline: 0;
     box-sizing: border-box;
     width: 100%;
-    height: $searchbar-input-height;
-    line-height: $searchbar-input-height;
     padding: $searchbar-input-padding;
     font-size: $searchbar-font-size;
     color: $searchbar-input-text-color;

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

@@ -30,7 +30,8 @@
   color: var(--nutui-black-5);
 }
 .nut-searchbar-left, .nut-searchbar-right {
-  display: flex;
+  display: inline-flex;
+  align-items: center;
 }
 .nut-searchbar-left.nut-icon, .nut-searchbar-right.nut-icon {
   width: 20px;
@@ -39,19 +40,23 @@
 .nut-searchbar-left {
   margin-right: var(--nutui-searchbar-gap, 16px);
 }
-.nut-searchbar-left > div, .nut-searchbar-left > span, .nut-searchbar-left > svg {
+.nut-searchbar-left > div, .nut-searchbar-left > span, .nut-searchbar-left > i, .nut-searchbar-left > svg,
+.nut-searchbar-left .nut-icon {
   margin-right: var(--nutui-searchbar-gap, 16px);
 }
-.nut-searchbar-left > div:last-child, .nut-searchbar-left > span:last-child, .nut-searchbar-left > svg:last-child {
+.nut-searchbar-left > div:last-child, .nut-searchbar-left > span:last-child, .nut-searchbar-left > i:last-child, .nut-searchbar-left > svg:last-child,
+.nut-searchbar-left .nut-icon:last-child {
   margin-right: 0;
 }
 .nut-searchbar-right {
   margin-left: var(--nutui-searchbar-gap, 16px);
 }
-.nut-searchbar-right > div, .nut-searchbar-right > span, .nut-searchbar-right > svg {
+.nut-searchbar-right > div, .nut-searchbar-right > span, .nut-searchbar-right > i, .nut-searchbar-right > svg,
+.nut-searchbar-right .nut-icon {
   margin-left: var(--nutui-searchbar-gap, 16px);
 }
-.nut-searchbar-right > div:first-child, .nut-searchbar-right > span:first-child, .nut-searchbar-right > svg:first-child {
+.nut-searchbar-right > div:first-child, .nut-searchbar-right > span:first-child, .nut-searchbar-right > i:first-child, .nut-searchbar-right > svg:first-child,
+.nut-searchbar-right .nut-icon:first-child {
   margin-left: 0;
 }
 .nut-searchbar-left > text, .nut-searchbar-left > view {
@@ -66,7 +71,7 @@
 .nut-searchbar-right > text:first-child, .nut-searchbar-right > view:first-child {
   margin-left: 0;
 }
-.nut-searchbar-input-box {
+.nut-searchbar-input-box, .nut-searchbar-input {
   display: flex;
   align-items: center;
   flex: 1;
@@ -76,8 +81,6 @@
   outline: 0;
   box-sizing: border-box;
   width: 100%;
-  height: var(--nutui-searchbar-input-height, 32px);
-  line-height: var(--nutui-searchbar-input-height, 32px);
   padding: var(--nutui-searchbar-input-padding, 0 4px);
   font-size: var(--nutui-searchbar-font-size, var(--nutui-font-size-base, 14px));
   color: var(--nutui-searchbar-input-text-color, var(--nutui-color-title, #1a1a1a));

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

@@ -73,6 +73,11 @@
 .nut-avatar {
   position: relative;
   flex: 0 0 auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: var(--nutui-avatar-normal-width, 40px);
+  height: var(--nutui-avatar-normal-height, 40px);
 }
 .nut-avatar-round {
   border-radius: 999px;
@@ -96,21 +101,12 @@
 .nut-avatar-icon {
   background-size: 100% 100%;
 }
-.nut-avatar .nut-icon-img {
-  width: 100%;
-  height: 100%;
-}
 .nut-avatar-text {
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 100%;
-  height: 100%;
 }
 .nut-avatar-large {
-  display: flex;
-  justify-content: center;
-  align-items: center;
   width: var(--nutui-avatar-large-width, 60px);
   height: var(--nutui-avatar-large-height, 60px);
 }
@@ -118,30 +114,15 @@
   width: var(--nutui-avatar-large-width, 60px);
   height: var(--nutui-avatar-large-height, 60px);
 }
-.nut-avatar-large-img-image {
-  width: var(--nutui-avatar-large-width, 60px);
-  height: var(--nutui-avatar-large-height, 60px);
-}
 .nut-avatar-large-icon {
   width: var(--nutui-avatar-large-width, 60px);
   height: var(--nutui-avatar-large-height, 60px);
 }
-.nut-avatar-large .nut-icon-img {
-  width: 100%;
-  height: 100%;
-}
 .nut-avatar-large-text {
   width: var(--nutui-avatar-large-width, 60px);
   height: var(--nutui-avatar-large-height, 60px);
 }
 .nut-avatar-small {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: var(--nutui-avatar-small-width, 32px);
-  height: var(--nutui-avatar-small-height, 32px);
-}
-.nut-avatar-small-img-image {
   width: var(--nutui-avatar-small-width, 32px);
   height: var(--nutui-avatar-small-height, 32px);
 }
@@ -149,25 +130,6 @@
   width: var(--nutui-avatar-small-width, 32px);
   height: var(--nutui-avatar-small-height, 32px);
 }
-.nut-avatar-normal {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: var(--nutui-avatar-normal-width, 40px);
-  height: var(--nutui-avatar-normal-height, 40px);
-}
-.nut-avatar-normal-img-image {
-  width: var(--nutui-avatar-normal-width, 40px);
-  height: var(--nutui-avatar-normal-height, 40px);
-}
-.nut-avatar-normal .nut-icon-img {
-  width: 100%;
-  height: 100%;
-}
-.nut-avatar-normal-text {
-  width: var(--nutui-avatar-normal-width, 40px);
-  height: var(--nutui-avatar-normal-height, 40px);
-}
 
 .nut-skeleton {
   display: inline-block;

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

@@ -1,6 +1,13 @@
 .nut-badge {
   position: relative;
-  display: inline-block;
+  display: inline-flex;
+  width: auto;
+  /* #ifdef harmony */
+  min-width: 1px;
+  /* #endif */
+  /* #ifndef harmony */
+  min-width: auto;
+  /* #endif */
 }
 .nut-badge-icon {
   position: absolute;
@@ -8,8 +15,6 @@
   justify-content: center;
   align-items: center;
   background: var(--nutui-badge-background-color, linear-gradient(135deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%));
-  top: -10%;
-  right: -15%;
   padding: var(--nutui-badge-icon-padding, 3px);
   text-align: center;
   border: var(--nutui-badge-border, 0px solid var(--nutui-color-primary-text, #ffffff));
@@ -27,7 +32,12 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  /* #ifdef harmony */
+  background: var(--nutui-color-primary, #ff0f23);
+  /* #endif */
+  /* #ifndef harmony */
   background: var(--nutui-badge-background-color, linear-gradient(135deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%));
+  /* #endif */
   color: var(--nutui-badge-color, #fff);
   padding: var(--nutui-badge-padding, 0 4px);
   font-size: var(--nutui-badge-font-size, var(--nutui-font-size-xxs, 10px));
@@ -45,7 +55,9 @@
   padding: 0;
 }
 .nut-badge-content {
-  transform: var(--nutui-badge-content-transform, translateY(-50%) translateX(100%));
+  /* #ifndef rn */
+  transform: var(--nutui-badge-content-transform, translateX(100%));
+  /* #endif */
 }
 .nut-badge-dot {
   width: var(--nutui-badge-dot-width, 7px);
@@ -54,22 +66,12 @@
   border-radius: var(--nutui-badge-dot-width, 7px);
   padding: 0;
 }
-.nut-badge-outline .nut-badge-content {
+.nut-badge-outline {
   background: var(--nutui-color-primary-text, #ffffff);
   border: 1px solid var(--nutui-color-primary, #ff0f23);
   color: var(--nutui-color-primary, #ff0f23);
 }
 
-[dir=rtl] .nut-badge-icon,
-.nut-rtl .nut-badge-icon {
-  right: auto;
-  left: -15%;
-}
-[dir=rtl] .nut-badge-content,
-.nut-rtl .nut-badge-content {
-  transform: var(--nutui-badge-content-transform, translateY(-50%) translateX(-100%));
-}
-
 .nut-tabbar-item {
   display: flex;
   flex-direction: column;
@@ -108,10 +110,20 @@
   color: var(--nutui-tabbar-active-color, var(--nutui-color-primary, #ff0f23));
 }
 .nut-tabbar-item-active .nut-tabbar-item-icon-box {
+  /* #ifdef harmony*/
+  color: var(--nutui-tabbar-active-color, var(--nutui-color-primary, #ff0f23));
+  /* #endif*/
+  /* #ifndef harmony*/
   color: inherit;
+  /* #endif*/
 }
 .nut-tabbar-item-active .nut-tabbar-item-icon-box .nut-icon {
+  /* #ifdef harmony*/
+  color: var(--nutui-tabbar-active-color, var(--nutui-color-primary, #ff0f23));
+  /* #endif*/
+  /* #ifndef harmony*/
   color: inherit;
+  /* #endif*/
 }
 
 .nut-tabbar {

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

@@ -1,6 +1,13 @@
 .nut-badge {
   position: relative;
-  display: inline-block;
+  display: inline-flex;
+  width: auto;
+  /* #ifdef harmony */
+  min-width: 1px;
+  /* #endif */
+  /* #ifndef harmony */
+  min-width: auto;
+  /* #endif */
 }
 .nut-badge-icon {
   position: absolute;
@@ -8,8 +15,6 @@
   justify-content: center;
   align-items: center;
   background: var(--nutui-badge-background-color, linear-gradient(135deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%));
-  top: -10%;
-  right: -15%;
   padding: var(--nutui-badge-icon-padding, 3px);
   text-align: center;
   border: var(--nutui-badge-border, 0px solid var(--nutui-color-primary-text, #ffffff));
@@ -27,7 +32,12 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  /* #ifdef harmony */
+  background: var(--nutui-color-primary, #ff0f23);
+  /* #endif */
+  /* #ifndef harmony */
   background: var(--nutui-badge-background-color, linear-gradient(135deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%));
+  /* #endif */
   color: var(--nutui-badge-color, #fff);
   padding: var(--nutui-badge-padding, 0 4px);
   font-size: var(--nutui-badge-font-size, var(--nutui-font-size-xxs, 10px));
@@ -45,7 +55,9 @@
   padding: 0;
 }
 .nut-badge-content {
-  transform: var(--nutui-badge-content-transform, translateY(-50%) translateX(100%));
+  /* #ifndef rn */
+  transform: var(--nutui-badge-content-transform, translateX(100%));
+  /* #endif */
 }
 .nut-badge-dot {
   width: var(--nutui-badge-dot-width, 7px);
@@ -54,22 +66,12 @@
   border-radius: var(--nutui-badge-dot-width, 7px);
   padding: 0;
 }
-.nut-badge-outline .nut-badge-content {
+.nut-badge-outline {
   background: var(--nutui-color-primary-text, #ffffff);
   border: 1px solid var(--nutui-color-primary, #ff0f23);
   color: var(--nutui-color-primary, #ff0f23);
 }
 
-[dir=rtl] .nut-badge-icon,
-.nut-rtl .nut-badge-icon {
-  right: auto;
-  left: -15%;
-}
-[dir=rtl] .nut-badge-content,
-.nut-rtl .nut-badge-content {
-  transform: var(--nutui-badge-content-transform, translateY(-50%) translateX(-100%));
-}
-
 .nut-tabbar-item {
   display: flex;
   flex-direction: column;
@@ -108,8 +110,18 @@
   color: var(--nutui-tabbar-active-color, var(--nutui-color-primary, #ff0f23));
 }
 .nut-tabbar-item-active .nut-tabbar-item-icon-box {
+  /* #ifdef harmony*/
+  color: var(--nutui-tabbar-active-color, var(--nutui-color-primary, #ff0f23));
+  /* #endif*/
+  /* #ifndef harmony*/
   color: inherit;
+  /* #endif*/
 }
 .nut-tabbar-item-active .nut-tabbar-item-icon-box .nut-icon {
+  /* #ifdef harmony*/
+  color: var(--nutui-tabbar-active-color, var(--nutui-color-primary, #ff0f23));
+  /* #endif*/
+  /* #ifndef harmony*/
   color: inherit;
+  /* #endif*/
 }

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

@@ -40,10 +40,20 @@
     color: $tabbar-active-color;
 
     .nut-tabbar-item-icon-box {
+      /* #ifdef harmony*/
+      color: $tabbar-active-color;
+      /* #endif*/
+      /* #ifndef harmony*/
       color: inherit;
+      /* #endif*/
 
       .nut-icon {
+        /* #ifdef harmony*/
+        color: $tabbar-active-color;
+        /* #endif*/
+        /* #ifndef harmony*/
         color: inherit;
+        /* #endif*/
       }
     }
   }

package/dist/cjs/packages/tabbaritem/tabbaritem.js

@@ -20,6 +20,7 @@ var _components = require("@tarojs/components");
 var _typings = require("../../utils/typings");
 var _index = /*#__PURE__*/ _interop_require_default._(require("../badge/index"));
 var _context = /*#__PURE__*/ _interop_require_default._(require("../tabbar/context"));
+var _addcolorforharmony = /*#__PURE__*/ _interop_require_default._(require("../../utils/add-color-for-harmony"));
 var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
     title: '',
     icon: null,
@@ -66,9 +67,15 @@ var TabbarItem = function TabbarItem(props) {
         }
     }, rest), icon ? /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/ _react.default.createElement(_index.default, badgeProps, /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: boxPrefix
-    }, icon)), /*#__PURE__*/ _react.default.createElement(_components.View, {
-        className: titleClass
+    }, (0, _addcolorforharmony.default)(icon, active ? ctx === null || ctx === void 0 ? void 0 : ctx.activeColor : ctx === null || ctx === void 0 ? void 0 : ctx.inactiveColor))), /*#__PURE__*/ _react.default.createElement(_components.View, {
+        className: titleClass,
+        style: {
+            color: active ? ctx === null || ctx === void 0 ? void 0 : ctx.activeColor : ctx === null || ctx === void 0 ? void 0 : ctx.inactiveColor
+        }
     }, title)) : /*#__PURE__*/ _react.default.createElement(_index.default, badgeProps, /*#__PURE__*/ _react.default.createElement(_components.View, {
-        className: titleClass
+        className: titleClass,
+        style: {
+            color: active ? ctx === null || ctx === void 0 ? void 0 : ctx.activeColor : ctx === null || ctx === void 0 ? void 0 : ctx.inactiveColor
+        }
     }, title)));
 };

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

@@ -13,6 +13,7 @@
 .nut-tag .nut-icon {
   vertical-align: middle;
   margin-left: 4px;
+  color: var(--nutui-tag-color, #ffffff);
 }
 .nut-tag-text {
   font-size: var(--nutui-tag-font-size, var(--nutui-font-size-xxs, 10px));

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

@@ -13,6 +13,7 @@
   .nut-icon {
     vertical-align: middle;
     margin-left: 4px;
+    color: $tag-color;
   }
 
   &-text {

package/dist/cjs/packages/toast/style/index.js

@@ -1 +1,2 @@
+import '../../overlay/style';
 import './toast.scss';

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

@@ -1,3 +1,63 @@
+.nut-overlay {
+  /* #ifdef rn */
+  position: absolute;
+  /* #endif */
+  /* #ifndef rn */
+  position: fixed;
+  /* #endif */
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--nutui-overlay-bg-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7)));
+  z-index: var(--nutui-overlay-zIndex, 1000);
+}
+
+[dir=rtl] .nut-overlay,
+.nut-rtl .nut-overlay {
+  left: auto;
+  right: 0;
+}
+
+.nut-overflow-hidden {
+  overflow: hidden !important;
+}
+
+@keyframes nut-fade-in {
+  0% {
+    opacity: 0;
+  }
+  1% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes nut-fade-out {
+  0% {
+    opacity: 1;
+  }
+  1% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+.nut-overlay-slide-enter-active, .nut-overlay-slide-appear-active {
+  animation-fill-mode: both;
+  animation-name: nut-fade-in;
+  animation-duration: var(--nutui-overlay-animation-duration, 0.3s);
+}
+.nut-overlay-slide-exit-active {
+  animation-fill-mode: both;
+  animation-name: nut-fade-out;
+  animation-duration: var(--nutui-overlay-animation-duration, 0.3s);
+}
+
 @keyframes rotation {
   0% {
     -webkit-transform: rotate(0deg);

package/dist/cjs/packages/uploader/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/video/video.js

@@ -14,6 +14,7 @@ var _object_without_properties = require("@swc/helpers/_/_object_without_propert
 var _react = /*#__PURE__*/ _interop_require_default._(require("react"));
 var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
 var _components = require("@tarojs/components");
+var _mergeprops = require("../../utils/merge-props");
 var defaultProps = {
     source: {
         type: {},
@@ -30,8 +31,7 @@ var defaultProps = {
 };
 var classPrefix = "nut-video";
 var Video = function Video(props) {
-    var _ref = (0, _object_spread._)({}, defaultProps, props), children = _ref.children, source = _ref.source, options = _ref.options, className = _ref.className, style = _ref.style, onPlay = _ref.onPlay, onPause = _ref.onPause, onPlayEnd = _ref.onPlayEnd, restProps = (0, _object_without_properties._)(_ref, [
-        "children",
+    var _mergeProps = (0, _mergeprops.mergeProps)(defaultProps, props), source = _mergeProps.source, options = _mergeProps.options, className = _mergeProps.className, style = _mergeProps.style, onPlay = _mergeProps.onPlay, onPause = _mergeProps.onPause, onPlayEnd = _mergeProps.onPlayEnd, restProps = (0, _object_without_properties._)(_mergeProps, [
         "source",
         "options",
         "className",
@@ -45,7 +45,7 @@ var Video = function Video(props) {
         className: classes,
         style: style
     }, /*#__PURE__*/ _react.default.createElement(_components.Video, (0, _object_spread._)({
-        className: "nut-video-player",
+        className: "".concat(classPrefix, "-player"),
         muted: options.muted,
         autoplay: options.autoplay,
         loop: options.loop,

package/dist/cjs/utils/add-color-for-harmony.d.ts

@@ -0,0 +1,9 @@
+import React, { ReactNode } from 'react';
+/**
+ * 为支持 Harmony 的 React 元素添加颜色属性
+ * @param maybeElement - 要处理的 React 节点
+ * @param color - 要添加的颜色值（如：'#ff0000'）
+ * @returns 处理后的 React 节点
+ */
+declare function addColorForHarmony(maybeElement: ReactNode, color?: string): string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined;
+export default addColorForHarmony;