@nutui/nutui-react-taro 3.0.0-beta.7 → 3.0.0-beta.9

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

@@ -5,6 +5,7 @@
 .nut-button {
   position: relative;
   display: flex;
+  display: inline-block;
   /* #ifdef rn harmony*/
   width: 80px;
   /* #endif */
@@ -19,7 +20,7 @@
   margin: 0;
   padding: 0;
   height: var(--nutui-button-default-height, 32px);
-  font-size: var(--nutui-button-default-font-size, var(--nutui-font-size-s, 12px));
+  font-size: var(--nutui-button-default-font-size, var(--nutui-font-size-base, 14px));
   font-weight: var(--nutui-button-default-font-weight, var(--nutui-font-weight, 400));
   text-align: center;
   cursor: pointer;
@@ -28,7 +29,7 @@
   touch-action: manipulation;
   -webkit-appearance: none;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  color: var(--nutui-button-default-color, var(--nutui-color-title, #1a1a1a));
+  color: var(--nutui-button-default-color, var(--nutui-gray-7));
   background: var(--nutui-button-default-background-color, transparent);
   border-width: var(--nutui-button-border-width, 1px);
 }
@@ -49,9 +50,9 @@
   left: 50%;
   width: 100%;
   height: 100%;
-  background-color: var(--nutui-color-mask, rgba(0, 0, 0, 0.7));
+  background-color: var(--nutui-black-10);
   border: inherit;
-  border-color: var(--nutui-color-mask, rgba(0, 0, 0, 0.7));
+  border-color: var(--nutui-black-10);
   border-radius: inherit;
   transform: translate(-50%, -50%);
   opacity: 0;
@@ -75,9 +76,9 @@
   /* #endif */
 }
 .nut-button-wrap .nut-icon {
-  font-size: var(--nutui-button-default-font-size, var(--nutui-font-size-s, 12px));
-  width: var(--nutui-button-default-font-size, var(--nutui-font-size-s, 12px));
-  height: var(--nutui-button-default-font-size, var(--nutui-font-size-s, 12px));
+  font-size: var(--nutui-button-default-font-size, var(--nutui-font-size-base, 14px));
+  width: var(--nutui-button-default-font-size, var(--nutui-font-size-base, 14px));
+  height: var(--nutui-button-default-font-size, var(--nutui-font-size-base, 14px));
 }
 .nut-button-loading::before, .nut-button-disabled::before {
   display: none;
@@ -91,34 +92,37 @@
   padding: 0;
 }
 .nut-button-round {
-  border-radius: var(--nutui-button-border-radius, 8px);
+  border-radius: var(--nutui-button-border-radius, var(--nutui-radius-s, 6px));
+}
+.nut-button-round-xlarge {
+  border-radius: var(--nutui-button-xlarge-border-radius, var(--nutui-radius-base, 8px));
 }
-.nut-button-round-xlarge, .nut-button-round-large {
-  border-radius: var(--nutui-button-large-border-radius, 12px);
+.nut-button-round-large {
+  border-radius: var(--nutui-button-large-border-radius, var(--nutui-radius-s, 6px));
 }
 .nut-button-round-small {
-  border-radius: var(--nutui-button-small-border-radius, 8px);
+  border-radius: var(--nutui-button-small-border-radius, var(--nutui-radius-xs, 4px));
 }
 .nut-button-round-mini {
-  border-radius: var(--nutui-button-mini-border-radius, 6px);
+  border-radius: var(--nutui-button-mini-border-radius, var(--nutui-radius-xs, 4px));
 }
 .nut-button-default {
   padding: var(--nutui-button-default-padding, 0px 12px);
   border-style: solid;
-  border-color: var(--nutui-button-default-border-color, var(--nutui-color-text, #505259));
+  border-color: var(--nutui-button-default-border-color, var(--nutui-gray-6));
 }
 .nut-button-default-disabled, .nut-button-default-solid-disabled {
-  color: var(--nutui-button-primary-color, var(--nutui-color-primary-text, #ffffff));
-  background: var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #c2c4cc));
-  border-color: var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #c2c4cc));
+  color: var(--nutui-button-primary-color, #ffffff);
+  background: var(--nutui-button-default-disabled, var(--nutui-gray-4));
+  border-color: var(--nutui-button-default-disabled, var(--nutui-gray-4));
 }
 .nut-button-default-none-disabled {
-  color: var(--nutui-button-default-disabled-color, var(--nutui-color-text-help, #888b94));
+  color: var(--nutui-button-default-disabled-color, var(--nutui-gray-5));
 }
 .nut-button-default-outline-disabled, .nut-button-default-dashed-disabled {
   background: transparent;
-  color: var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #c2c4cc));
-  border-color: var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #c2c4cc));
+  color: var(--nutui-button-default-disabled, var(--nutui-gray-4));
+  border-color: var(--nutui-button-default-disabled, var(--nutui-gray-4));
 }
 .nut-button-normal {
   padding: var(--nutui-button-normal-padding, 0px 12px);
@@ -148,9 +152,9 @@
 .nut-button-large {
   height: var(--nutui-button-large-height, 40px);
   padding: var(--nutui-button-large-padding, 0px 16px);
-  font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-base, 14px));
+  font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 16px));
   font-weight: var(--nutui-button-large-font-weight, var(--nutui-font-weight-bold, 600));
-  border-radius: var(--nutui-radius-base, 8px);
+  border-radius: var(--nutui-radius-s, 6px);
 }
 .nut-button-large .nut-button-text {
   margin-left: var(--nutui-button-xlarge-text-icon-margin, 6px);
@@ -159,19 +163,19 @@
   margin-right: var(--nutui-button-xlarge-text-icon-margin, 6px);
 }
 .nut-button-large .nut-icon {
-  font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-base, 14px));
-  width: var(--nutui-button-large-font-size, var(--nutui-font-size-base, 14px));
-  height: var(--nutui-button-large-font-size, var(--nutui-font-size-base, 14px));
+  font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 16px));
+  width: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 16px));
+  height: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 16px));
 }
 .nut-button-large-children {
-  font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-base, 14px));
+  font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 16px));
   font-weight: var(--nutui-button-large-font-weight, var(--nutui-font-weight-bold, 600));
 }
 .nut-button-small {
   height: var(--nutui-button-small-height, 28px);
   padding: var(--nutui-button-small-padding, 0px 8px);
   font-size: var(--nutui-button-small-font-size, var(--nutui-font-size-s, 12px));
-  border-radius: var(--nutui-radius-s, 6px);
+  border-radius: var(--nutui-radius-xs, 4px);
 }
 .nut-button-small .nut-icon {
   font-size: var(--nutui-button-small-font-size, var(--nutui-font-size-s, 12px));
@@ -185,7 +189,7 @@
   height: var(--nutui-button-mini-height, 24px);
   padding: var(--nutui-button-mini-padding, 0px 8px);
   font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11px));
-  border-radius: var(--nutui-radius-s, 6px);
+  border-radius: var(--nutui-radius-xs, 4px);
 }
 .nut-button-mini .nut-icon {
   font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11px));
@@ -196,80 +200,87 @@
   font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11px));
 }
 .nut-button-primary {
-  color: var(--nutui-button-primary-color, var(--nutui-color-primary-text, #ffffff));
+  color: var(--nutui-button-primary-color, #ffffff);
   background-origin: border-box;
   border-color: transparent;
 }
 .nut-button-primary-children {
-  color: var(--nutui-button-primary-color, var(--nutui-color-primary-text, #ffffff));
+  color: var(--nutui-button-primary-color, #ffffff);
 }
 .nut-button-primary-solid {
   background: linear-gradient(90deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%);
-  color: var(--nutui-button-primary-color, var(--nutui-color-primary-text, #ffffff));
+  color: var(--nutui-button-primary-color, #ffffff);
   border-color: transparent;
+  font-weight: var(--nutui-font-weight-bold, 600);
+}
+.nut-button-primary-solid.nut-button-small, .nut-button-primary-solid.nut-button-mini {
+  font-weight: var(--nutui-font-weight, 400);
 }
 .nut-button-primary-disabled, .nut-button-primary-solid-disabled {
-  color: var(--nutui-button-primary-color, var(--nutui-color-primary-text, #ffffff));
-  background: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe));
-  border-color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe));
+  color: var(--nutui-button-primary-color, #ffffff);
+  background: var(--nutui-button-primary-disabled, var(--nutui-brand-3));
+  border-color: var(--nutui-button-primary-disabled, var(--nutui-brand-3));
 }
 .nut-button-primary-none {
-  color: var(--nutui-button-primary-border-color, var(--nutui-color-primary, #ff0f23));
+  color: var(--nutui-button-primary-border-color, var(--nutui-brand-6));
 }
 .nut-button-primary-none-disabled {
-  color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe));
+  color: var(--nutui-button-primary-disabled, var(--nutui-brand-3));
 }
 .nut-button-primary-outline {
-  color: var(--nutui-button-primary-border-color, var(--nutui-color-primary, #ff0f23));
-  border-color: var(--nutui-button-primary-border-color, var(--nutui-color-primary, #ff0f23));
+  color: var(--nutui-button-primary-border-color, var(--nutui-brand-6));
+  border-color: var(--nutui-button-primary-border-color, var(--nutui-brand-6));
 }
 .nut-button-primary-outline-disabled {
-  color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe));
-  border-color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe));
+  color: var(--nutui-button-primary-disabled, var(--nutui-brand-3));
+  border-color: var(--nutui-button-primary-disabled, var(--nutui-brand-3));
 }
 .nut-button-primary-dashed {
-  color: var(--nutui-button-primary-border-color, var(--nutui-color-primary, #ff0f23));
-  border-color: var(--nutui-button-primary-border-color, var(--nutui-color-primary, #ff0f23));
+  color: var(--nutui-button-primary-border-color, var(--nutui-brand-6));
+  border-color: var(--nutui-button-primary-border-color, var(--nutui-brand-6));
 }
 .nut-button-primary-dashed-disabled {
-  color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe));
-  border-color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe));
+  color: var(--nutui-button-primary-disabled, var(--nutui-brand-3));
+  border-color: var(--nutui-button-primary-disabled, var(--nutui-brand-3));
+}
+.nut-button-primary.nut-button-solid.nut-button-normal {
+  font-weight: var(--nutui-font-weight-bold, 600);
 }
 .nut-button-success {
-  color: var(--nutui-button-success-color, var(--nutui-color-primary-text, #ffffff));
-  background: var(--nutui-button-success-background-color, var(--nutui-color-success, #00d900));
+  color: var(--nutui-button-success-color, #ffffff);
+  background: var(--nutui-button-success-background-color, var(--nutui-green-2));
   background-origin: border-box;
   border-color: transparent;
 }
 .nut-button-success-children {
-  color: var(--nutui-button-success-color, var(--nutui-color-primary-text, #ffffff));
+  color: var(--nutui-button-success-color, #ffffff);
 }
 .nut-button-success-solid-disabled {
   background: var(--nutui-button-success-disabled, var(--nutui-color-success-disabled, #b2f0ae));
   border-color: var(--nutui-button-success-disabled, var(--nutui-color-success-disabled, #b2f0ae));
 }
 .nut-button-success-outline, .nut-button-success-dashed {
-  color: var(--nutui-button-success-border-color, var(--nutui-color-success, #00d900));
-  border-color: var(--nutui-button-success-border-color, var(--nutui-color-success, #00d900));
+  color: var(--nutui-button-success-border-color, var(--nutui-green-2));
+  border-color: var(--nutui-button-success-border-color, var(--nutui-green-2));
 }
 .nut-button-success-outline-disabled, .nut-button-success-dashed-disabled {
-  color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe));
-  border-color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe));
+  color: var(--nutui-button-primary-disabled, var(--nutui-brand-3));
+  border-color: var(--nutui-button-primary-disabled, var(--nutui-brand-3));
 }
 .nut-button-success-none {
-  color: var(--nutui-button-success-border-color, var(--nutui-color-success, #00d900));
+  color: var(--nutui-button-success-border-color, var(--nutui-green-2));
 }
 .nut-button-success-none-disabled {
   color: var(--nutui-button-success-disabled, var(--nutui-color-success-disabled, #b2f0ae));
 }
 .nut-button-info {
-  color: var(--nutui-button-info-color, var(--nutui-color-primary-text, #ffffff));
+  color: var(--nutui-button-info-color, #ffffff);
   background: var(--nutui-button-info-background-color, var(--nutui-color-info-background, #0073ff));
   background-origin: border-box;
   border-color: transparent;
 }
 .nut-button-info-children {
-  color: var(--nutui-button-info-color, var(--nutui-color-primary-text, #ffffff));
+  color: var(--nutui-button-info-color, #ffffff);
 }
 .nut-button-info-solid-disabled {
   background: var(--nutui-button-info-disabled, var(--nutui-color-info-disabled, #89a6f8));
@@ -290,56 +301,56 @@
   color: var(--nutui-button-info-disabled, var(--nutui-color-info-disabled, #89a6f8));
 }
 .nut-button-danger {
-  color: var(--nutui-button-danger-color, var(--nutui-color-primary-text, #ffffff));
-  background: var(--nutui-button-danger-background-color, var(--nutui-color-danger, #ff0f23));
+  color: var(--nutui-button-danger-color, #ffffff);
+  background: var(--nutui-button-danger-background-color, var(--nutui-red-2));
   background-origin: border-box;
   border-color: transparent;
 }
 .nut-button-danger-children {
-  color: var(--nutui-button-danger-color, var(--nutui-color-primary-text, #ffffff));
+  color: var(--nutui-button-danger-color, #ffffff);
 }
 .nut-button-danger-solid-disabled {
-  background: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled-special, #ffadbe)));
-  border-color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled-special, #ffadbe)));
+  background: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-brand-3)));
+  border-color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-brand-3)));
 }
 .nut-button-danger-outline, .nut-button-danger-dashed {
-  color: var(--nutui-button-danger-border-color, var(--nutui-color-danger, #ff0f23));
-  border-color: var(--nutui-button-danger-border-color, var(--nutui-color-danger, #ff0f23));
+  color: var(--nutui-button-danger-border-color, var(--nutui-red-2));
+  border-color: var(--nutui-button-danger-border-color, var(--nutui-red-2));
 }
 .nut-button-danger-outline-disabled, .nut-button-danger-dashed-disabled {
-  color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled-special, #ffadbe)));
-  border-color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled-special, #ffadbe)));
+  color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-brand-3)));
+  border-color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-brand-3)));
 }
 .nut-button-danger-none {
-  color: var(--nutui-button-danger-border-color, var(--nutui-color-danger, #ff0f23));
+  color: var(--nutui-button-danger-border-color, var(--nutui-red-2));
 }
 .nut-button-danger-none-disabled {
-  color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled-special, #ffadbe)));
+  color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-brand-3)));
 }
 .nut-button-warning {
-  color: var(--nutui-button-warning-color, var(--nutui-color-primary-text, #ffffff));
-  background: var(--nutui-button-warning-background-color, var(--nutui-color-warning, #ffbf00));
+  color: var(--nutui-button-warning-color, #ffffff);
+  background: var(--nutui-button-warning-background-color, var(--nutui-yellow-2));
   background-origin: border-box;
   border-color: transparent;
 }
 .nut-button-warning-children {
-  color: var(--nutui-button-warning-color, var(--nutui-color-primary-text, #ffffff));
+  color: var(--nutui-button-warning-color, #ffffff);
 }
 .nut-button-warning-disabled, .nut-button-warning-solid-disabled {
-  color: var(--nutui-button-warning-color, var(--nutui-color-primary-text, #ffffff));
+  color: var(--nutui-button-warning-color, #ffffff);
   background: var(--nutui-button-warning-disabled, var(--nutui-color-warning-disabled, #fdd3b9));
   border-color: var(--nutui-button-warning-disabled, var(--nutui-color-warning-disabled, #fdd3b9));
 }
 .nut-button-warning-outline, .nut-button-warning-dashed {
-  color: var(--nutui-button-warning-border-color, var(--nutui-color-warning, #ffbf00));
-  border-color: var(--nutui-button-warning-border-color, var(--nutui-color-warning, #ffbf00));
+  color: var(--nutui-button-warning-border-color, var(--nutui-yellow-2));
+  border-color: var(--nutui-button-warning-border-color, var(--nutui-yellow-2));
 }
 .nut-button-warning-outline-disabled, .nut-button-warning-dashed-disabled {
   color: var(--nutui-button-warning-disabled, var(--nutui-color-warning-disabled, #fdd3b9));
   border-color: var(--nutui-button-warning-disabled, var(--nutui-color-warning-disabled, #fdd3b9));
 }
 .nut-button-warning-none {
-  color: var(--nutui-button-warning-border-color, var(--nutui-color-warning, #ffbf00));
+  color: var(--nutui-button-warning-border-color, var(--nutui-yellow-2));
 }
 .nut-button-warning-none-disabled {
   color: var(--nutui-button-warning-disabled, var(--nutui-color-warning-disabled, #fdd3b9));
@@ -402,7 +413,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-pressed, #ffebf1));
+  background-color: var(--nutui-range-inactive-color, var(--nutui-brand-1));
   border-radius: 2px;
   flex: 1;
   cursor: pointer;
@@ -415,7 +426,7 @@
 }
 .nut-range-min, .nut-range-max {
   font-size: var(--nutui-font-size-s, 12px);
-  color: var(--nutui-range-color, var(--nutui-color-title, #1a1a1a));
+  color: var(--nutui-range-color, var(--nutui-gray-7));
   user-select: none;
 }
 .nut-range-bar {
@@ -425,7 +436,7 @@
   height: 100%;
   max-width: 100%;
   max-height: 100%;
-  background: var(--nutui-range-active-color, var(--nutui-color-primary, #ff0f23));
+  background: var(--nutui-range-active-color, var(--nutui-brand-6));
   border-radius: 2px;
   transition: all 0.2s;
 }
@@ -434,10 +445,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%;
@@ -475,7 +486,7 @@
   justify-content: center;
   user-select: none;
   font-size: var(--nutui-font-size-s, 12px);
-  color: var(--nutui-range-color, var(--nutui-color-title, #1a1a1a));
+  color: var(--nutui-range-color, var(--nutui-gray-7));
   text-align: center;
   vertical-align: center;
   box-sizing: border-box;
@@ -519,10 +530,10 @@
   height: 11px;
   left: 0px;
   border-radius: 6px;
-  background: var(--nutui-range-inactive-color, var(--nutui-color-primary-light-pressed, #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 {
@@ -585,10 +596,10 @@
   width: 10px;
   height: 10px;
   border-radius: 5px;
-  background: var(--nutui-range-inactive-color, var(--nutui-color-primary-light-pressed, #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,
@@ -651,7 +662,7 @@
   height: 30px;
   background: #ffffff;
   border-radius: 50%;
-  box-shadow: 0 0 8px var(--nutui-color-text-disabled, #c2c4cc);
+  box-shadow: 0 0 8px var(--nutui-gray-4);
 }
 .nut-audio-icon .nut-audio-icon-stop {
   position: relative;
@@ -664,7 +675,7 @@
   content: "";
   height: 2px;
   width: 30px;
-  background: var(--nutui-color-text-disabled, #c2c4cc);
+  background: var(--nutui-gray-4);
   transform: rotate(45deg);
   transform-origin: 8px -18px;
 }
@@ -699,7 +710,7 @@
   color: blue;
 }
 .nut-audio .nut-audio-none-container .nut-voice {
-  border: 1px solid var(--nutui-color-title, #1a1a1a);
+  border: 1px solid var(--nutui-gray-7);
   align-items: center;
 }
 

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

@@ -25,7 +25,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  background: var(--nutui-color-background, #f5f6fa);
+  background: var(--nutui-gray-3);
   background-size: 100% 100%;
 }
 .nut-image-error {
@@ -38,7 +38,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  background: var(--nutui-color-background, #f5f6fa);
+  background: var(--nutui-gray-3);
   background-size: 100% 100%;
 }
 

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

@@ -1,9 +1,8 @@
 import React, { FunctionComponent } from 'react';
-import type { MouseEvent } from 'react';
 import { PageScrollObject } from '@tarojs/taro';
 import { ITouchEvent } from '@tarojs/components';
-import { BasicComponent } from "../../utils/typings";
-export interface BackTopProps extends BasicComponent {
+import { HoverButtonProps } from "../hoverbutton/index";
+export interface BackTopProps extends HoverButtonProps {
     threshold: number;
     zIndex: number;
     duration: number;
@@ -11,6 +10,6 @@ export interface BackTopProps extends BasicComponent {
      * 容器滚动时的回调参数，主要用于 rn、鸿蒙端
      */
     scrollRes?: PageScrollObject;
-    onClick?: (event: React.MouseEvent<Element, MouseEvent> | ITouchEvent) => void;
+    onClick?: (event: React.MouseEvent<HTMLDivElement> | ITouchEvent) => void;
 }
 export declare const BackTop: FunctionComponent<Partial<BackTopProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick'>>;

package/dist/cjs/packages/backtop/backtop.js

@@ -17,38 +17,28 @@ var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _taro = require("@tarojs/taro");
 var _components = require("@tarojs/components");
-var _iconsreacttaro = require("@nutui/icons-react-taro");
 var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
+var _iconsreacttaro = require("@nutui/icons-react-taro");
 var _typings = require("../../utils/typings");
-var _index = require("../configprovider/index");
+var _index = /*#__PURE__*/ _interop_require_default._(require("../hoverbutton/index"));
 var _platformtaro = require("../../utils/platform-taro");
-var _pxtransform = /*#__PURE__*/ _interop_require_default._(require("../../utils/px-transform"));
 var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
     threshold: 200,
     zIndex: 900,
     duration: 1000
 });
-var isNative = (0, _platformtaro.harmonyAndRn)();
 var BackTop = function BackTop(props) {
-    var rtl = (0, _index.useRtl)();
-    var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), children = _$_object_spread.children, threshold = _$_object_spread.threshold, zIndex = _$_object_spread.zIndex, className = _$_object_spread.className, duration = _$_object_spread.duration, style = _$_object_spread.style, scrollRes = _$_object_spread.scrollRes, onClick = _$_object_spread.onClick;
+    var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), children = _$_object_spread.children, threshold = _$_object_spread.threshold, zIndex = _$_object_spread.zIndex, className = _$_object_spread.className, duration = _$_object_spread.duration, icon = _$_object_spread.icon, style = _$_object_spread.style, scrollRes = _$_object_spread.scrollRes, onClick = _$_object_spread.onClick;
     var classPrefix = 'nut-backtop';
     var _useState = (0, _sliced_to_array._)((0, _react.useState)(false), 2), backTop = _useState[0], setBackTop = _useState[1];
-    var _useState1 = (0, _sliced_to_array._)((0, _react.useState)(false), 2), isTouchStart = _useState1[0], setTouchStart = _useState1[1];
     var _obj;
-    var cls = (0, _classnames.default)(classPrefix, (_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-show"), backTop), (0, _define_property._)(_obj, "".concat(classPrefix, "-show-active"), isNative && isTouchStart), (0, _define_property._)(_obj, "".concat(classPrefix, "-rn"), (0, _platformtaro.rn)()), _obj), className);
+    var cls = (0, _classnames.default)(classPrefix, (_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-show"), backTop), (0, _define_property._)(_obj, "".concat(classPrefix, "-rn"), (0, _platformtaro.rn)()), _obj), className);
     var systemInfo = (0, _react.useRef)({});
     (0, _react.useEffect)(function() {
         (0, _taro.getSystemInfo)().then(function(res) {
             systemInfo.current = res;
         });
     }, []);
-    var handleActiveStart = (0, _react.useCallback)(function() {
-        isNative && setTouchStart(true);
-    }, []);
-    var handleActiveEnd = (0, _react.useCallback)(function() {
-        isNative && setTouchStart(false);
-    }, []);
     var onScroll = (0, _react.useCallback)(function(res) {
         var scrollTop = res.scrollTop;
         setBackTop(scrollTop >= threshold);
@@ -75,28 +65,20 @@ var BackTop = function BackTop(props) {
         duration,
         onClick
     ]);
-    var styles = (0, _react.useMemo)(function() {
-        var _obj;
-        return Object.keys(style || {}).length !== 0 ? (0, _object_spread._)({
-            zIndex: zIndex
-        }, style) : (_obj = {}, (0, _define_property._)(_obj, rtl ? 'left' : 'right', (0, _pxtransform.default)(10)), (0, _define_property._)(_obj, "bottom", (0, _pxtransform.default)(20)), (0, _define_property._)(_obj, "zIndex", zIndex), _obj);
-    }, [
-        rtl,
-        style,
-        zIndex
-    ]);
-    return /*#__PURE__*/ _react.default.createElement(_components.View, {
+    return /*#__PURE__*/ _react.default.createElement(_index.default, {
         className: cls,
-        style: styles,
+        style: (0, _object_spread._)({
+            zIndex: zIndex
+        }, style),
+        icon: !children && (icon || /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.Top, null)),
+        onClick: function onClick(e) {
+            goTop(e);
+        }
+    }, children && /*#__PURE__*/ _react.default.createElement(_components.View, {
+        className: "nut-hoverbutton-item-container",
         onClick: function onClick(e) {
             goTop(e);
-        },
-        onTouchStart: handleActiveStart,
-        onTouchEnd: handleActiveEnd,
-        onTouchCancel: handleActiveEnd
-    }, children || /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.Top, {
-        size: 19,
-        className: "nut-backtop-main"
-    }));
+        }
+    }, children));
 };
 BackTop.displayName = 'NutBackTop';

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

@@ -1,31 +1,22 @@
 .nut-backtop {
   display: none;
-  position: fixed;
 
   &-rn {
     position: absolute;
   }
 
   &-show {
-    width: 40px;
-    height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
-    background: $color-background-overlay;
-    color: $color-title;
-    border: 1px solid $backtop-border-color;
-    border-radius: 21px;
-    z-index: 100;
-
-    &:active,
-    &-active {
-      background: $color-background;
-    }
-  }
-
-  &-main {
+    width: $hoverbutton-item-size;
+    height: $hoverbutton-item-size;
     transition: all 0.2s ease-in-out;
-    color: $color-title;
+    .nut-hoverbutton-item-container {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+    }
   }
 }

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

@@ -4,27 +4,21 @@
 /* #endif */
 .nut-backtop {
   display: none;
-  position: fixed;
 }
 .nut-backtop-rn {
   position: absolute;
 }
 .nut-backtop-show {
-  width: 40px;
-  height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--nutui-color-background-overlay, #ffffff);
-  color: var(--nutui-color-title, #1a1a1a);
-  border: 1px solid var(--nutui-backtop-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
-  border-radius: 21px;
-  z-index: 100;
-}
-.nut-backtop-show:active, .nut-backtop-show-active {
-  background: var(--nutui-color-background, #f5f6fa);
-}
-.nut-backtop-main {
+  width: var(--nutui-hoverbutton-item-size, 40px);
+  height: var(--nutui-hoverbutton-item-size, 40px);
   transition: all 0.2s ease-in-out;
-  color: var(--nutui-color-title, #1a1a1a);
+}
+.nut-backtop-show .nut-hoverbutton-item-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 }

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

@@ -1,13 +1,3 @@
-import { FunctionComponent, ReactNode } from 'react';
-import { BasicComponent } from "../../utils/typings";
-export type BadgeFill = 'solid' | 'outline';
-export interface BadgeProps extends BasicComponent {
-    value: ReactNode;
-    dot: boolean;
-    max: number;
-    top: string | number;
-    right: string | number;
-    color: string;
-    fill: BadgeFill;
-}
+import { FunctionComponent } from 'react';
+import { BadgeProps } from './types';
 export declare const Badge: FunctionComponent<Partial<BadgeProps>>;