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

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

@@ -1,4 +1,8 @@
 @charset "UTF-8";
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-overlay {
   /* #ifdef rn */
   position: absolute;
@@ -12,22 +16,13 @@
   right: 0;
   width: 100%;
   height: 100%;
-  background-color: var(--nutui-overlay-bg-color, var(--nutui-black-10, rgba(0, 0, 0, 0.7)));
+  background-color: var(--nutui-overlay-bg-color, var(--nutui-black-10));
   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;
 }
-.nut-overflow-hidden .taro_page {
-  overflow: hidden !important;
-}
 
 @keyframes nut-fade-in {
   0% {
@@ -62,49 +57,63 @@
   animation-duration: var(--nutui-overlay-animation-duration, 0.3s);
 }
 
+[dir=rtl] .nut-overlay,
+.nut-rtl .nut-overlay {
+  left: auto;
+  right: 0;
+}
+
 .nut-popup {
   position: fixed;
-  min-height: 26%;
+  min-height: 46%;
   max-height: 100%;
-  overflow-y: auto;
-  background-color: var(--nutui-overlay-content-bg-color, var(--nutui-gray-1, #ffffff));
-  color: var(--nutui-gray-7, #1a1a1a);
+  background-color: var(--nutui-overlay-content-bg-color, var(--nutui-gray-1));
   -webkit-overflow-scrolling: touch;
-  font-size: var(--nutui-font-size-3, 14px);
+  font-size: var(--nutui-font-size-base, 14px);
 }
 .nut-popup-title {
   display: flex;
+  flex-direction: row;
   align-items: center;
   justify-content: center;
   border-bottom: var(--nutui-popup-title-border-bottom, 0);
   padding: var(--nutui-popup-title-padding, 16px);
   position: relative;
 }
-.nut-popup-title-left {
-  position: absolute;
-  left: var(--nutui-popup-title-padding, 16px);
+.nut-popup-title-wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 }
 .nut-popup-title-title {
-  font-weight: var(--nutui-font-weight-bold, 500);
-  font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-6, 20px));
+  color: var(--nutui-gray-7);
+  font-weight: var(--nutui-font-weight-bold, 600);
+  font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-l, 16px));
+  line-height: var(--nutui-popup-title-font-size, var(--nutui-font-size-l, 16px));
 }
 .nut-popup-title-description {
-  color: var(--nutui-gray-5, #888b94);
-  font-size: var(--nutui-popup-description-font-size, var(--nutui-font-size-1, 10px));
+  color: var(--nutui-gray-6);
+  font-size: var(--nutui-popup-description-font-size, var(--nutui-font-size-base, 14px));
   font-weight: var(--nutui-font-weight, 400);
 }
+.nut-popup-title-description-gap {
+  margin-top: var(--nutui-popup-description-spacing, var(--nutui-spacing-base, 8px));
+}
+.nut-popup-title-left {
+  position: absolute;
+  top: var(--nutui-popup-title-padding, 16px);
+  left: var(--nutui-popup-title-padding, 16px);
+}
 .nut-popup-title-right {
-  position: absolute !important;
-  z-index: 1;
-  cursor: pointer;
-  width: var(--nutui-popup-icon-size, var(--nutui-font-size-6, 20px));
-  height: var(--nutui-popup-icon-size, var(--nutui-font-size-6, 20px));
-  display: flex;
-  justify-content: center;
-  align-items: center;
+  position: absolute;
   top: var(--nutui-popup-title-padding, 16px);
   right: var(--nutui-popup-title-padding, 16px);
-  color: var(--nutui-gray-5, #888b94);
+  z-index: 1;
+  width: var(--nutui-popup-icon-size, 20px);
+  height: var(--nutui-popup-icon-size, 20px);
+  color: var(--nutui-gray-7);
+  cursor: pointer;
 }
 .nut-popup-title-right:active {
   opacity: 0.7;
@@ -125,13 +134,14 @@
   top: 50%;
   left: 50%;
   min-height: 10%;
+  max-width: 295px;
   transform: translate(-50%, -50%);
 }
 .nut-popup-center.nut-popup-round {
-  border-radius: var(--nutui-popup-border-radius, 24px);
+  border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px));
 }
 .nut-popup-bottom, .nut-popup-top {
-  max-height: 83%;
+  max-height: 87%;
 }
 .nut-popup-bottom {
   bottom: 0;
@@ -139,21 +149,25 @@
   width: 100%;
 }
 .nut-popup-bottom.nut-popup-round {
-  border-radius: var(--nutui-popup-border-radius, 24px) var(--nutui-popup-border-radius, 24px) 0 0;
+  border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) 0 0;
 }
 .nut-popup-right {
   top: 0;
   right: 0;
+  width: 100px;
+  height: 100%;
 }
 .nut-popup-right.nut-popup-round {
-  border-radius: var(--nutui-popup-border-radius, 24px) 0 0 var(--nutui-popup-border-radius, 24px);
+  border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) 0 0 var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px));
 }
 .nut-popup-left {
   top: 0;
   left: 0;
+  width: 100px;
+  height: 100%;
 }
 .nut-popup-left.nut-popup-round {
-  border-radius: 0 var(--nutui-popup-border-radius, 24px) var(--nutui-popup-border-radius, 24px) 0;
+  border-radius: 0 var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) 0;
 }
 .nut-popup-top {
   top: 0;
@@ -161,7 +175,7 @@
   width: 100%;
 }
 .nut-popup-top.nut-popup-round {
-  border-radius: 0 0 var(--nutui-popup-border-radius, 24px) var(--nutui-popup-border-radius, 24px);
+  border-radius: 0 0 var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px));
 }
 .nut-popup-slide {
   /* 从顶部滑出 */
@@ -313,7 +327,7 @@
   display: none;
 }
 .nut-popup .nut-overflow-hidden {
-  overflow: hidden !important;
+  overflow: hidden;
 }
 
 [dir=rtl] .nut-popup-title-left,
@@ -367,7 +381,7 @@
   flex-shrink: 0;
   display: block;
   background-color: var(--nutui-tabs-tabpane-backgroundColor, #fff);
-  color: var(--nutui-gray-7, #1a1a1a);
+  color: var(--nutui-gray-7);
   padding: var(--nutui-tabs-tabpane-padding, 24px 20px);
   box-sizing: border-box;
   overflow: auto;
@@ -381,13 +395,19 @@
   display: flex;
 }
 
+.nut-tabs-horizontal {
+  flex-direction: column;
+}
+
 .nut-tabs-titles {
   display: flex;
   box-sizing: border-box;
   height: var(--nutui-tabs-titles-height, 44px);
   user-select: none;
-  overflow: hidden;
-  background: var(--nutui-tabs-titles-background-color, var(--nutui-gray-3, #f5f6fa));
+  overflow-x: auto;
+  overflow-y: hidden;
+  background: var(--nutui-tabs-titles-background-color, var(--nutui-gray-3));
+  scrollbar-width: none;
 }
 .nut-tabs-titles::-webkit-scrollbar {
   display: none;
@@ -396,7 +416,6 @@
 }
 .nut-tabs-titles .nut-tabs-list {
   width: 100%;
-  height: auto;
   display: flex;
   flex-shrink: 0;
 }
@@ -412,10 +431,6 @@
 .nut-tabs-titles-right .nut-tabs-titles-item {
   padding: 0 22px;
 }
-.nut-tabs-titles-scrollable {
-  overflow-x: auto;
-  overflow-y: hidden;
-}
 .nut-tabs-titles-item {
   position: relative;
   display: flex;
@@ -426,16 +441,19 @@
   height: var(--nutui-tabs-titles-height, 44px);
   line-height: var(--nutui-tabs-titles-height, 44px);
   min-width: var(--nutui-tabs-titles-item-min-width, 50px);
-  font-size: var(--nutui-tabs-titles-font-size, var(--nutui-font-size-3, 14px));
-  color: var(--nutui-tabs-titles-item-color, var(--nutui-gray-7, #1a1a1a));
+  font-size: var(--nutui-tabs-titles-font-size, var(--nutui-font-size-base, 14px));
+  color: var(--nutui-tabs-titles-item-color, var(--nutui-gray-7));
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.nut-tabs-titles-item .nut-icon {
+  color: var(--nutui-tabs-titles-item-color, var(--nutui-gray-7));
+}
 .nut-tabs-titles-item-left, .nut-tabs-titles-item-right {
   flex: none;
 }
 .nut-tabs-titles-item-text {
-  text-align: center;
+  color: var(--nutui-tabs-titles-item-color, var(--nutui-gray-7));
 }
 .nut-tabs-titles-item-smile, .nut-tabs-titles-item-line {
   position: absolute;
@@ -443,9 +461,9 @@
   width: 0;
   height: 0;
   content: " ";
-  bottom: var(--nutui-tabs-line-bottom, 15%);
   left: 50%;
   transform: translate(-50%, 0);
+  bottom: var(--nutui-tabs-line-bottom, 15%);
   border-radius: var(--nutui-tabs-line-border-radius, 2px);
   opacity: var(--nutui-tabs-tab-line-opacity, 1);
   overflow: hidden;
@@ -458,42 +476,53 @@
   font-size: 20px;
   width: 100%;
   height: 100%;
-  color: var(--nutui-color-primary, #ff0f23);
 }
-.nut-tabs-titles-item-active {
-  color: var(--nutui-tabs-titles-item-active-color, var(--nutui-color-primary, #ff0f23));
-  font-weight: var(--nutui-tabs-titles-item-active-font-weight, var(--nutui-font-weight-bold, 500));
+.nut-tabs-titles-item-active .nut-icon {
+  color: var(--nutui-tabs-titles-item-active-color, var(--nutui-brand-6));
+}
+.nut-tabs-titles-item-active .nut-tabs-titles-item-text {
+  color: var(--nutui-tabs-titles-item-active-color, var(--nutui-brand-6));
+  font-weight: var(--nutui-tabs-titles-item-active-font-weight, var(--nutui-font-weight-bold, 600));
 }
 .nut-tabs-titles-item-active .nut-tabs-titles-item-line {
   overflow: unset;
   content: " ";
   width: var(--nutui-tabs-tab-line-width, 12px);
   height: var(--nutui-tabs-tab-line-height, 2px);
-  background: var(--nutui-tabs-tab-line-color, var(--nutui-color-primary, #ff0f23));
+  background: var(--nutui-tabs-tab-line-color, var(--nutui-brand-6));
 }
 .nut-tabs-titles-item-active .nut-tabs-titles-item-smile {
   overflow: unset;
   width: 40px;
   height: 20px;
 }
+.nut-tabs-titles-item-active .nut-tabs-titles-item-smile .nut-icon {
+  color: var(--nutui-tabs-titles-item-active-color, var(--nutui-brand-6));
+}
 .nut-tabs-titles-item-disabled {
-  color: var(--nutui-color-text-disabled, #c2c4cc);
+  color: var(--nutui-gray-4);
+}
+.nut-tabs-titles-item-disabled .nut-icon {
+  color: var(--nutui-gray-4);
 }
-.nut-tabs-titles-simple .nut-tabs-titles-item-active {
-  color: var(--nutui-gray-7, #1a1a1a);
-  font-size: var(--nutui-tabs-titles-item-active-font-size, var(--nutui-font-size-4, 16px));
+.nut-tabs-titles-item-disabled .nut-tabs-titles-item-text {
+  color: var(--nutui-gray-4);
+}
+.nut-tabs-titles-simple .nut-tabs-titles-item-active .nut-tabs-titles-item-text,
+.nut-tabs-titles-simple .nut-tabs-titles-item-active .nut-icon {
+  color: var(--nutui-gray-7);
+  font-size: var(--nutui-tabs-titles-item-active-font-size, var(--nutui-font-size-l, 16px));
 }
 .nut-tabs-titles-card {
   padding: 0;
-  background-color: var(--nutui-color-default-light);
 }
 .nut-tabs-titles-card .nut-tabs-titles-item {
   padding: 0;
 }
 .nut-tabs-titles-card .nut-tabs-titles-item-active {
-  font-weight: var(--nutui-font-weight-bold, 500);
+  font-weight: var(--nutui-font-weight-bold, 600);
   background-color: #ffffff;
-  border-radius: var(--nutui-radius-6) var(--nutui-radius-6) 0 0;
+  border-radius: var(--nutui-radius-base, 8px) var(--nutui-radius-base, 8px) 0 0;
 }
 .nut-tabs-titles-button .nut-tabs-titles-item {
   padding: 0 10px;
@@ -508,16 +537,15 @@
 }
 .nut-tabs-titles-button .nut-tabs-titles-item-active .nut-tabs-titles-item-text {
   background: var(--nutui-color-default-light);
-  color: var(--nutui-gray-6, #505259);
+  color: var(--nutui-tabs-titles-item-active-color, var(--nutui-brand-6));
   border-radius: var(--nutui-tabs-button-border-radius, 50px);
-  font-weight: var(--nutui-font-weight-bold, 500);
-  background-color: var(--nutui-tabs-button-active-background-color, var(--nutui-color-primary-light, #ffebf1));
-  color: var(--nutui-color-primary, #ff0f23);
-  border: var(--nutui-tabs-button-active-border, 1px solid var(--nutui-color-primary, #ff0f23));
+  font-weight: var(--nutui-font-weight-bold, 600);
+  background-color: var(--nutui-tabs-button-active-background-color, var(--nutui-brand-1));
+  border: var(--nutui-tabs-button-active-border, 1px solid var(--nutui-brand-6));
 }
 .nut-tabs-titles-divider {
   padding: 0;
-  border-bottom: 1px solid var(--nutui-black-3, rgba(0, 0, 0, 0.06));
+  border-bottom: 1px solid var(--nutui-black-3);
 }
 .nut-tabs-titles-divider .nut-tabs-titles-item {
   padding: 0;
@@ -530,75 +558,36 @@
   top: 50%;
   height: 50%;
   width: 1px;
-  background: var(--nutui-black-3, rgba(0, 0, 0, 0.06));
+  background: var(--nutui-black-3);
   transform: translateY(-50%);
 }
 .nut-tabs-titles-divider .nut-tabs-titles-item:last-child::after {
   display: none;
 }
 
-[dir=rtl] .nut-tabs-titles-item-smile, [dir=rtl] .nut-tabs-titles-item-line,
-.nut-rtl .nut-tabs-titles-item-smile,
-.nut-rtl .nut-tabs-titles-item-line {
-  left: auto;
-  right: 50%;
-  transform: translate(50%, 0);
-}
-[dir=rtl] .nut-tabs-titles-divider .nut-tabs-titles-item::after,
-.nut-rtl .nut-tabs-titles-divider .nut-tabs-titles-item::after {
-  right: auto;
-  left: 0;
-}
-
-.nut-tabs-horizontal {
-  flex-direction: column;
-  position: relative;
-}
-
-.nut-tabs-vertical {
-  flex-direction: row;
-  width: 100%;
-}
 .nut-tabs-vertical .nut-tabs-ellipsis {
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
 }
 .nut-tabs-vertical .nut-tabs-titles {
-  box-sizing: border-box;
   flex-direction: column;
   height: 100%;
-  padding: 0;
   width: var(--nutui-tabs-vertical-titles-width, 100px);
   flex-shrink: 0;
 }
 .nut-tabs-vertical .nut-tabs-titles .nut-tabs-list {
-  width: 100%;
-  display: flex;
   flex-direction: column;
-  flex-shrink: 0;
-}
-.nut-tabs-vertical .nut-tabs-titles-line .nut-tabs-titles-item {
-  padding-left: 14px;
-}
-.nut-tabs-vertical .nut-tabs-titles-scrollable {
-  overflow-x: hidden;
-  overflow-y: auto;
 }
 .nut-tabs-vertical .nut-tabs-titles-item {
   height: var(--nutui-tabs-vertical-titles-item-height, 40px);
-  margin: 0;
   flex: none;
 }
 .nut-tabs-vertical .nut-tabs-titles-item-smile {
-  width: 0;
-  height: 0;
   overflow: hidden;
   transition: width 0.3s ease;
 }
 .nut-tabs-vertical .nut-tabs-titles-item-line {
-  width: 0;
-  height: 0;
   transform: translate(0, -50%);
   transition: height 0.3s ease;
 }
@@ -606,33 +595,29 @@
   top: 50%;
 }
 .nut-tabs-vertical .nut-tabs-titles-item-active {
-  background-color: var(--nutui-tabs-titles-item-active-background-color, var(--nutui-gray-1, #ffffff));
+  background-color: var(--nutui-tabs-titles-item-active-background-color, var(--nutui-gray-1));
 }
 .nut-tabs-vertical .nut-tabs-titles-item-active .nut-tabs-titles-item-line {
   left: 10px;
   width: var(--nutui-tabs-vertical-tab-line-width, 3px);
   height: var(--nutui-tabs-vertical-tab-line-height, 12px);
-  background: var(--nutui-tabs-vertical-tab-line-color, linear-gradient(180deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-light, #ffebf1) 100%));
+  background: var(--nutui-tabs-vertical-tab-line-color, linear-gradient(180deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-brand-1) 100%));
 }
 .nut-tabs-vertical .nut-tabs-titles-item-active .nut-tabs-titles-item-smile {
   right: -12px;
   bottom: -2%;
   left: auto;
-  width: 40px;
-  height: 20px;
   transform: rotate(320deg);
 }
 .nut-tabs-vertical .nut-tabs-horizontal .nut-tabs-titles {
   flex-direction: row;
-  overflow-x: auto;
-  overflow-y: hidden;
   height: var(--nutui-tabs-titles-height, 44px);
+  width: 100%;
+  padding: 0 !important;
 }
 .nut-tabs-vertical .nut-tabs-horizontal .nut-tabs-titles .nut-tabs-list {
-  width: 100%;
-  display: flex;
   flex-direction: row;
-  flex-shrink: 0;
+  height: auto;
 }
 .nut-tabs-vertical .nut-tabs-horizontal .nut-tabs-content {
   flex-direction: row;
@@ -643,6 +628,9 @@
 .nut-tabs-vertical .nut-tabs-horizontal .nut-tabs-titles-item-active .nut-tabs-titles-item-line {
   left: 50%;
   transform: translate(-50%, 0);
+  width: var(--nutui-tabs-tab-line-width, 12px);
+  height: var(--nutui-tabs-tab-line-height, 2px);
+  background: var(--nutui-tabs-tab-line-color, var(--nutui-brand-6));
 }
 .nut-tabs-vertical .nut-tabs-horizontal .nut-tabs-titles-item-active .nut-tabs-titles-item-smile {
   left: 50%;
@@ -660,28 +648,26 @@
 .nut-tabs-vertical .nut-tabs-content .nut-tabpane {
   height: 100%;
 }
-.nut-tabs-vertical .nut-tabs-horizontal .nut-tabs-titles {
+
+.nut-tabs-content {
   display: flex;
-  flex-direction: row;
-  padding: 0 !important;
-  width: 100%;
+  box-sizing: border-box;
 }
-.nut-tabs-vertical .nut-tabs-horizontal .nut-tabs-titles .nut-tabs-titles-item {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex: 1 0 auto;
+.nut-tabs-content-wrap {
+  overflow: hidden;
 }
-.nut-tabs-vertical .nut-tabs-horizontal .nut-tabs-titles .nut-tabs-titles-item-active {
-  color: var(--nutui-color-primary, #ff0f23);
-  font-weight: var(--nutui-tabs-titles-item-active-font-weight, var(--nutui-font-weight-bold, 500));
-  font-size: var(--nutui-tabs-titles-item-active-font-size, var(--nutui-font-size-4, 16px));
+
+[dir=rtl] .nut-tabs-titles-item-smile, [dir=rtl] .nut-tabs-titles-item-line,
+.nut-rtl .nut-tabs-titles-item-smile,
+.nut-rtl .nut-tabs-titles-item-line {
+  left: auto;
+  right: 50%;
+  transform: translate(50%, 0);
 }
-.nut-tabs-vertical .nut-tabs-horizontal .nut-tabs-titles .nut-tabs-titles-item-active .nut-tabs-titles-item-line {
-  content: " ";
-  width: var(--nutui-tabs-tab-line-width, 12px);
-  height: var(--nutui-tabs-tab-line-height, 2px);
-  background: var(--nutui-tabs-tab-line-color, var(--nutui-color-primary, #ff0f23));
+[dir=rtl] .nut-tabs-titles-divider .nut-tabs-titles-item::after,
+.nut-rtl .nut-tabs-titles-divider .nut-tabs-titles-item::after {
+  right: auto;
+  left: 0;
 }
 
 [dir=rtl] .nut-tabs-vertical .nut-tabs-titles-line .nut-tabs-titles-item,
@@ -713,21 +699,13 @@
   transform: translate(50%, 0) rotate(0deg);
 }
 
-.nut-tabs-content {
-  display: flex;
-  box-sizing: border-box;
-}
-.nut-tabs-content-wrap {
-  overflow: hidden;
-}
-
 .nut-cascader {
   width: 100%;
-  font-size: var(--nutui-cascader-font-size, var(--nutui-font-size-3, 14px));
+  font-size: var(--nutui-cascader-font-size, var(--nutui-font-size-base, 14px));
 }
 .nut-cascader .nut-tabs-titles {
   padding: var(--nutui-cascader-tabs-item-padding, 0 10px);
-  background: var(--nutui-gray-1, #ffffff);
+  background: var(--nutui-gray-1);
 }
 .nut-cascader .nut-tabs-titles-item {
   flex: initial;
@@ -738,7 +716,7 @@
 }
 .nut-cascader .nut-tabpane {
   padding: 0;
-  background: var(--nutui-gray-1, #ffffff);
+  background: var(--nutui-gray-1);
 }
 .nut-cascader-pane {
   display: block;
@@ -754,9 +732,9 @@
   justify-content: center;
   padding: var(--nutui-cascader-item-padding, 10px 20px);
   margin: var(--nutui-cascader-item-margin, 0px);
-  border-bottom: var(--nutui-cascader-item-border-bottom, 0px solid var(--nutui-black-3, rgba(0, 0, 0, 0.06)));
-  font-size: var(--nutui-cascader-item-font-size, var(--nutui-font-size-3, 14px));
-  color: var(--nutui-cascader-item-color, var(--nutui-gray-7, #1a1a1a));
+  border-bottom: var(--nutui-cascader-item-border-bottom, 0px solid var(--nutui-black-3));
+  font-size: var(--nutui-cascader-item-font-size, var(--nutui-font-size-base, 14px));
+  color: var(--nutui-cascader-item-color, var(--nutui-gray-7));
   cursor: pointer;
 }
 .nut-cascader-item.disabled {
@@ -764,7 +742,7 @@
   cursor: not-allowed;
 }
 .nut-cascader-item.active:not(.disabled) {
-  color: var(--nutui-cascader-item-active-color, var(--nutui-color-primary, #ff0f23));
+  color: var(--nutui-cascader-item-active-color, var(--nutui-brand-6));
 }
 .nut-cascader-item.active .nut-cascader-item-icon-check {
   visibility: visible;

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

@@ -1,16 +1,11 @@
-import React, { FunctionComponent, ReactNode } from 'react';
+import React, { FunctionComponent } from 'react';
 import { ITouchEvent } from '@tarojs/components';
-import { BasicComponent } from "../../utils/typings";
 import { CellGroup } from "../cellgroup/cellgroup";
-export interface CellProps extends BasicComponent {
-    title: ReactNode;
-    description: ReactNode;
-    extra: ReactNode;
-    radius: string | number;
-    align: string;
-    isLast: boolean;
+import { CellProps } from './types';
+interface CellTaroProps extends CellProps {
     onClick: (event: React.MouseEvent<HTMLDivElement, MouseEvent> | ITouchEvent) => void;
 }
-export declare const Cell: FunctionComponent<Partial<CellProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>> & {
+export declare const Cell: FunctionComponent<Partial<CellTaroProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>> & {
     Group: typeof CellGroup;
 };
+export {};

package/dist/es/packages/cell/cell.js

@@ -15,13 +15,14 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     extra: null,
     radius: '6px',
     align: 'flex-start',
+    clickable: false,
     isLast: false,
     onClick: function(event) {}
 });
 var classPrefix = 'nut-cell';
 export var Cell = function(props) {
     var ctx = useContext(CellGroupContext);
-    var _$_object_spread = _object_spread({}, defaultProps, props), children = _$_object_spread.children, onClick = _$_object_spread.onClick, title = _$_object_spread.title, description = _$_object_spread.description, extra = _$_object_spread.extra, radius = _$_object_spread.radius, align = _$_object_spread.align, isLast = _$_object_spread.isLast, className = _$_object_spread.className, style = _$_object_spread.style;
+    var _$_object_spread = _object_spread({}, defaultProps, props), children = _$_object_spread.children, onClick = _$_object_spread.onClick, title = _$_object_spread.title, description = _$_object_spread.description, extra = _$_object_spread.extra, radius = _$_object_spread.radius, align = _$_object_spread.align, isLast = _$_object_spread.isLast, className = _$_object_spread.className, style = _$_object_spread.style, clickable = _$_object_spread.clickable;
     var rtl = useRtl();
     var handleClick = function(event) {
         onClick(event);
@@ -33,11 +34,14 @@ export var Cell = function(props) {
     });
     var _obj;
     return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(View, {
-        className: classNames([
+        hoverStyle: {
+            opacity: clickable ? 0.7 : 1
+        },
+        className: "".concat(classNames([
             classPrefix,
             className,
             _define_property({}, "".concat(classPrefix, "-group-item"), ctx === null || ctx === void 0 ? void 0 : ctx.group)
-        ]),
+        ], clickable ? "".concat(classPrefix, "-clickable") : '')),
         onClick: function(event) {
             return handleClick(event);
         },

package/dist/es/packages/cell/index.d.ts

@@ -1,3 +1,3 @@
 import { Cell } from "./cell";
-export type { CellProps } from "./cell";
+export type { CellProps, CellAlign } from './types';
 export default Cell;

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

@@ -49,6 +49,26 @@
     font-size: $cell-extra-font-size;
     color: $cell-extra-color;
   }
+  &:active::before {
+    opacity: 0.1;
+  }
+  &-clickable {
+    cursor: pointer;
+    &::before {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 100%;
+      height: 100%;
+      background-color: $black;
+      border: inherit;
+      border-color: $black;
+      border-radius: inherit;
+      transform: translate(-50%, -50%);
+      opacity: 0;
+      content: ' ';
+    }
+  }
 
   &-divider {
     display: flex;