@nutui/nutui-react 3.0.20 → 3.1.0-beta.2

package/dist/cjs/packages/uploader/style-jmapp/style.css

@@ -63,7 +63,7 @@
   margin-right: var(--nutui-uploader-preview-margin-right, var(--nutui-spacing-s));
   margin-bottom: var(--nutui-uploader-preview-margin-bottom, var(--nutui-spacing-s));
   border-radius: var(--nutui-uploader-image-border-radius, var(--nutui-radius-xs));
-  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
+  box-shadow: 0 scale-px(2px) scale-px(10px) 0 rgba(0, 0, 0, 0.1);
 }
 .nut-uploader-preview-progress {
   position: absolute;
@@ -84,31 +84,31 @@
 }
 .nut-uploader-preview-progress-msg {
   color: var(--nutui-color-text-help);
-  font-size: 12px;
+  font-size: var(--nutui-font-text-small);
 }
 .nut-uploader-preview.list {
   width: 100%;
-  margin-right: 0px;
-  margin-bottom: 0px;
-  margin-top: 10px;
-  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.01);
+  margin-right: 0;
+  margin-bottom: 0;
+  margin-top: scale-px(10px);
+  box-shadow: 0 scale-px(2px) scale-px(10px) 0 rgba(0, 0, 0, 0.01);
 }
 .nut-uploader-preview-list {
   width: 100%;
-  height: 32px;
+  height: scale-px(32px);
   box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 10px;
+  padding: 0 scale-px(10px);
   background-color: var(--nutui-gray-2, #f8f8f8);
 }
 .nut-uploader-preview-list .nut-uploader-preview-img-file-name {
   display: flex;
   align-items: center;
   -webkit-line-clamp: 1;
-  padding: 2px;
-  height: 24px;
+  padding: scale-px(2px);
+  height: scale-px(24px);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -120,7 +120,7 @@
   bottom: 0;
 }
 .nut-uploader-preview-list .nut-progress .nut-progress-outer {
-  height: 2px !important;
+  height: scale-px(2px) !important;
 }
 .nut-uploader-preview .close {
   position: absolute;
@@ -143,7 +143,7 @@
   position: absolute;
   bottom: 0;
   left: 0;
-  font-size: 12px;
+  font-size: var(--nutui-font-text-small);
   color: #ffffff;
   text-align: center;
   box-sizing: border-box;
@@ -180,7 +180,7 @@
 .nut-uploader-preview-img-file-name {
   display: flex;
   width: 90%;
-  font-size: 12px;
+  font-size: var(--nutui-font-text-small);
   color: var(--nutui-color-text);
   display: -webkit-box;
   -webkit-box-orient: vertical;
@@ -216,7 +216,7 @@
 [dir=rtl] .nut-uploader-preview.list,
 .nut-rtl .nut-uploader-preview.list {
   margin-right: 0;
-  margin-left: 0px;
+  margin-left: 0;
 }
 [dir=rtl] .nut-uploader-preview .close,
 .nut-rtl .nut-uploader-preview .close {

package/dist/cjs/packages/uploader/style-jmapp/uploader.scss

@@ -72,7 +72,7 @@
     margin-right: $uploader-preview-margin-right;
     margin-bottom: $uploader-preview-margin-bottom;
     border-radius: $uploader-image-border-radius;
-    box-shadow: 0 2px 10px 0 rgb(0 0 0 / 10%);
+    box-shadow: 0 scale-px(2px) scale-px(10px) 0 rgb(0 0 0 / 10%);
 
     &-progress {
       position: absolute;
@@ -94,34 +94,34 @@
 
       &-msg {
         color: $color-text-help;
-        font-size: 12px;
+        font-size: $font-size-s;
       }
     }
 
     &.list {
       width: 100%;
-      margin-right: 0px;
-      margin-bottom: 0px;
-      margin-top: 10px;
-      box-shadow: 0 2px 10px 0 rgb(0 0 0 / 1%);
+      margin-right: 0;
+      margin-bottom: 0;
+      margin-top: scale-px(10px);
+      box-shadow: 0 scale-px(2px) scale-px(10px) 0 rgb(0 0 0 / 1%);
     }
 
     &-list {
       width: 100%;
-      height: 32px;
+      height: scale-px(32px);
       box-sizing: border-box;
       display: flex;
       align-items: center;
       justify-content: space-between;
-      padding: 0 10px;
+      padding: 0 scale-px(10px);
       background-color: $color-background-sunken;
 
       .nut-uploader-preview-img-file-name {
         display: flex;
         align-items: center;
         -webkit-line-clamp: 1;
-        padding: 2px;
-        height: 24px;
+        padding: scale-px(2px);
+        height: scale-px(24px);
         @include text-ellipsis();
       }
 
@@ -132,7 +132,7 @@
         bottom: 0;
 
         .nut-progress-outer {
-          height: 2px !important;
+          height: scale-px(2px) !important;
         }
       }
     }
@@ -160,7 +160,7 @@
         position: absolute;
         bottom: 0;
         left: 0;
-        font-size: 12px;
+        font-size: $font-size-s;
         color: $white;
         text-align: center;
         box-sizing: border-box;
@@ -196,7 +196,7 @@
         &-name {
           display: flex;
           width: 90%;
-          font-size: 12px;
+          font-size: $font-size-s;
           color: $color-text;
           @include moreline-ellipsis();
 
@@ -234,7 +234,7 @@
 
     &.list {
       margin-right: 0;
-      margin-left: 0px;
+      margin-left: 0;
     }
 
     .close {

package/dist/cjs/packages/uploader/style-jrkf/style.css

@@ -63,7 +63,7 @@
   margin-right: var(--nutui-uploader-preview-margin-right, var(--nutui-spacing-s));
   margin-bottom: var(--nutui-uploader-preview-margin-bottom, var(--nutui-spacing-s));
   border-radius: var(--nutui-uploader-image-border-radius, var(--nutui-radius-xs));
-  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
+  box-shadow: 0 scale-px(2px) scale-px(10px) 0 rgba(0, 0, 0, 0.1);
 }
 .nut-uploader-preview-progress {
   position: absolute;
@@ -84,31 +84,31 @@
 }
 .nut-uploader-preview-progress-msg {
   color: var(--nutui-color-text-help);
-  font-size: 12px;
+  font-size: var(--nutui-font-text-small);
 }
 .nut-uploader-preview.list {
   width: 100%;
-  margin-right: 0px;
-  margin-bottom: 0px;
-  margin-top: 10px;
-  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.01);
+  margin-right: 0;
+  margin-bottom: 0;
+  margin-top: scale-px(10px);
+  box-shadow: 0 scale-px(2px) scale-px(10px) 0 rgba(0, 0, 0, 0.01);
 }
 .nut-uploader-preview-list {
   width: 100%;
-  height: 32px;
+  height: scale-px(32px);
   box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 10px;
+  padding: 0 scale-px(10px);
   background-color: var(--nutui-gray-2, #f0f0f0);
 }
 .nut-uploader-preview-list .nut-uploader-preview-img-file-name {
   display: flex;
   align-items: center;
   -webkit-line-clamp: 1;
-  padding: 2px;
-  height: 24px;
+  padding: scale-px(2px);
+  height: scale-px(24px);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -120,7 +120,7 @@
   bottom: 0;
 }
 .nut-uploader-preview-list .nut-progress .nut-progress-outer {
-  height: 2px !important;
+  height: scale-px(2px) !important;
 }
 .nut-uploader-preview .close {
   position: absolute;
@@ -143,7 +143,7 @@
   position: absolute;
   bottom: 0;
   left: 0;
-  font-size: 12px;
+  font-size: var(--nutui-font-text-small);
   color: #ffffff;
   text-align: center;
   box-sizing: border-box;
@@ -180,7 +180,7 @@
 .nut-uploader-preview-img-file-name {
   display: flex;
   width: 90%;
-  font-size: 12px;
+  font-size: var(--nutui-font-text-small);
   color: var(--nutui-color-text);
   display: -webkit-box;
   -webkit-box-orient: vertical;
@@ -216,7 +216,7 @@
 [dir=rtl] .nut-uploader-preview.list,
 .nut-rtl .nut-uploader-preview.list {
   margin-right: 0;
-  margin-left: 0px;
+  margin-left: 0;
 }
 [dir=rtl] .nut-uploader-preview .close,
 .nut-rtl .nut-uploader-preview .close {

package/dist/cjs/packages/uploader/style-jrkf/uploader.scss

@@ -72,7 +72,7 @@
     margin-right: $uploader-preview-margin-right;
     margin-bottom: $uploader-preview-margin-bottom;
     border-radius: $uploader-image-border-radius;
-    box-shadow: 0 2px 10px 0 rgb(0 0 0 / 10%);
+    box-shadow: 0 scale-px(2px) scale-px(10px) 0 rgb(0 0 0 / 10%);
 
     &-progress {
       position: absolute;
@@ -94,34 +94,34 @@
 
       &-msg {
         color: $color-text-help;
-        font-size: 12px;
+        font-size: $font-size-s;
       }
     }
 
     &.list {
       width: 100%;
-      margin-right: 0px;
-      margin-bottom: 0px;
-      margin-top: 10px;
-      box-shadow: 0 2px 10px 0 rgb(0 0 0 / 1%);
+      margin-right: 0;
+      margin-bottom: 0;
+      margin-top: scale-px(10px);
+      box-shadow: 0 scale-px(2px) scale-px(10px) 0 rgb(0 0 0 / 1%);
     }
 
     &-list {
       width: 100%;
-      height: 32px;
+      height: scale-px(32px);
       box-sizing: border-box;
       display: flex;
       align-items: center;
       justify-content: space-between;
-      padding: 0 10px;
+      padding: 0 scale-px(10px);
       background-color: $color-background-sunken;
 
       .nut-uploader-preview-img-file-name {
         display: flex;
         align-items: center;
         -webkit-line-clamp: 1;
-        padding: 2px;
-        height: 24px;
+        padding: scale-px(2px);
+        height: scale-px(24px);
         @include text-ellipsis();
       }
 
@@ -132,7 +132,7 @@
         bottom: 0;
 
         .nut-progress-outer {
-          height: 2px !important;
+          height: scale-px(2px) !important;
         }
       }
     }
@@ -160,7 +160,7 @@
         position: absolute;
         bottom: 0;
         left: 0;
-        font-size: 12px;
+        font-size: $font-size-s;
         color: $white;
         text-align: center;
         box-sizing: border-box;
@@ -196,7 +196,7 @@
         &-name {
           display: flex;
           width: 90%;
-          font-size: 12px;
+          font-size: $font-size-s;
           color: $color-text;
           @include moreline-ellipsis();
 
@@ -234,7 +234,7 @@
 
     &.list {
       margin-right: 0;
-      margin-left: 0px;
+      margin-left: 0;
     }
 
     .close {

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

@@ -1,3 +1,13 @@
+:root,
+page {
+  --nut-scale-f: 1;
+  --nut-scale-font: var(--nut-scale-f, 1);
+  --nut-scale-icon: var(--nut-scale-f, 1);
+  --nut-icon-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+  --nut-icon-width: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+  --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+}
+
 /* #ifdef harmony */
 /* #endif */
 /* #ifndef harmony */

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

@@ -4,4 +4,4 @@ export type VideoRef = {
     pause: () => void;
     play: () => void;
 };
-export declare const Video: React.ForwardRefExoticComponent<Omit<Partial<WebVideoProps> & Omit<React.HTMLAttributes<HTMLDivElement>, "onPause" | "onPlay">, "ref"> & React.RefAttributes<VideoRef>>;
+export declare const Video: React.ForwardRefExoticComponent<Omit<Partial<WebVideoProps> & Omit<React.HTMLAttributes<HTMLDivElement>, "onPlay" | "onPause">, "ref"> & React.RefAttributes<VideoRef>>;

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

@@ -1,3 +1,13 @@
+:root,
+page {
+  --nut-scale-f: 1;
+  --nut-scale-font: var(--nut-scale-f, 1);
+  --nut-scale-icon: var(--nut-scale-f, 1);
+  --nut-icon-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+  --nut-icon-width: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+  --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+}
+
 /* #ifdef harmony */
 /* #endif */
 /* #ifndef harmony */
@@ -10,8 +20,8 @@
   float: left;
   color: var(--nutui-color-title, #1a1a1a);
   background: var(--nutui-color-background-overlay, #ffffff);
-  padding: 10px;
-  margin-right: 20px;
+  padding: calc(10px * var(--nut-scale-f, 1));
+  margin-right: calc(20px * var(--nut-scale-f, 1));
 }
 .nut-horizontal-items:after {
   content: "";
@@ -24,12 +34,12 @@
   display: block;
   color: var(--nutui-color-title, #1a1a1a);
   background: var(--nutui-color-background-overlay, #ffffff);
-  border-radius: 7px;
-  box-shadow: 0 1px 6px 0 rgb(237, 238, 241);
-  margin-top: 20px;
-  padding: 14px 15px;
-  font-size: 13px;
-  line-height: 18px;
+  border-radius: calc(7px * var(--nut-scale-f, 1));
+  box-shadow: 0 calc(1px * var(--nut-scale-f, 1)) calc(6px * var(--nut-scale-f, 1)) 0 rgb(237, 238, 241);
+  margin-top: calc(20px * var(--nut-scale-f, 1));
+  padding: calc(14px * var(--nut-scale-f, 1)) calc(15px * var(--nut-scale-f, 1));
+  font-size: var(--nutui-font-size-m, calc(13px * var(--nut-scale-font, var(--nut-scale-f, 1))));
+  line-height: calc(18px * var(--nut-scale-f, 1));
   font-family: PingFangSC;
   font-weight: 500;
 }
@@ -61,7 +71,7 @@
 }
 .nut-virtuallist-item {
   overflow: hidden;
-  margin: var(--nutui-list-item-margin, 0 0 10px 0);
+  margin: var(--nutui-list-item-margin, 0 0 calc(10px * var(--nut-scale-f, 1)) 0);
 }
 
 [dir=rtl] .nut-horizontal-items,
@@ -72,5 +82,5 @@
 .nut-rtl .nut-horizontal-items li {
   float: right;
   margin-right: 0;
-  margin-left: 20px;
+  margin-left: calc(20px * var(--nut-scale-f, 1));
 }

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

@@ -6,8 +6,8 @@
     float: left;
     color: $color-title;
     background: $color-background-overlay;
-    padding: 10px;
-    margin-right: 20px;
+    padding: scale-px(10px);
+    margin-right: scale-px(20px);
   }
 
   &:after {
@@ -23,12 +23,12 @@
     display: block;
     color: $color-title;
     background: $color-background-overlay;
-    border-radius: 7px;
-    box-shadow: 0 1px 6px 0 rgba(237, 238, 241, 1);
-    margin-top: 20px;
-    padding: 14px 15px;
-    font-size: 13px;
-    line-height: 18px;
+    border-radius: scale-px(7px);
+    box-shadow: 0 scale-px(1px) scale-px(6px) 0 rgba(237, 238, 241, 1);
+    margin-top: scale-px(20px);
+    padding: scale-px(14px) scale-px(15px);
+    font-size: $font-size-m;
+    line-height: scale-px(18px);
     font-family: PingFangSC;
     font-weight: 500;
   }
@@ -74,6 +74,6 @@
   li {
     float: right;
     margin-right: 0;
-    margin-left: 20px;
+    margin-left: scale-px(20px);
   }
 }

package/dist/cjs/packages/virtuallist/style-jmapp/style.css

@@ -10,8 +10,8 @@
   float: left;
   color: var(--nutui-color-title);
   background: var(--nutui-color-surface-2);
-  padding: 10px;
-  margin-right: 20px;
+  padding: scale-px(10px);
+  margin-right: scale-px(20px);
 }
 .nut-horizontal-items:after {
   content: "";
@@ -24,12 +24,12 @@
   display: block;
   color: var(--nutui-color-title);
   background: var(--nutui-color-surface-2);
-  border-radius: 7px;
-  box-shadow: 0 1px 6px 0 rgb(237, 238, 241);
-  margin-top: 20px;
-  padding: 14px 15px;
-  font-size: 13px;
-  line-height: 18px;
+  border-radius: scale-px(7px);
+  box-shadow: 0 scale-px(1px) scale-px(6px) 0 rgb(237, 238, 241);
+  margin-top: scale-px(20px);
+  padding: scale-px(14px) scale-px(15px);
+  font-size: var(--nutui-font-size-m, var(--nutui-font-text-small));
+  line-height: scale-px(18px);
   font-family: PingFangSC;
   font-weight: 500;
 }
@@ -72,5 +72,5 @@
 .nut-rtl .nut-horizontal-items li {
   float: right;
   margin-right: 0;
-  margin-left: 20px;
+  margin-left: scale-px(20px);
 }

package/dist/cjs/packages/virtuallist/style-jmapp/virtuallist.scss

@@ -6,8 +6,8 @@
     float: left;
     color: $color-title;
     background: $color-background-overlay;
-    padding: 10px;
-    margin-right: 20px;
+    padding: scale-px(10px);
+    margin-right: scale-px(20px);
   }
 
   &:after {
@@ -23,12 +23,12 @@
     display: block;
     color: $color-title;
     background: $color-background-overlay;
-    border-radius: 7px;
-    box-shadow: 0 1px 6px 0 rgba(237, 238, 241, 1);
-    margin-top: 20px;
-    padding: 14px 15px;
-    font-size: 13px;
-    line-height: 18px;
+    border-radius: scale-px(7px);
+    box-shadow: 0 scale-px(1px) scale-px(6px) 0 rgba(237, 238, 241, 1);
+    margin-top: scale-px(20px);
+    padding: scale-px(14px) scale-px(15px);
+    font-size: $font-size-m;
+    line-height: scale-px(18px);
     font-family: PingFangSC;
     font-weight: 500;
   }
@@ -74,6 +74,6 @@
   li {
     float: right;
     margin-right: 0;
-    margin-left: 20px;
+    margin-left: scale-px(20px);
   }
 }

package/dist/cjs/packages/virtuallist/style-jrkf/style.css

@@ -10,8 +10,8 @@
   float: left;
   color: var(--nutui-color-title);
   background: var(--nutui-color-surface-2);
-  padding: 10px;
-  margin-right: 20px;
+  padding: scale-px(10px);
+  margin-right: scale-px(20px);
 }
 .nut-horizontal-items:after {
   content: "";
@@ -24,12 +24,12 @@
   display: block;
   color: var(--nutui-color-title);
   background: var(--nutui-color-surface-2);
-  border-radius: 7px;
-  box-shadow: 0 1px 6px 0 rgb(237, 238, 241);
-  margin-top: 20px;
-  padding: 14px 15px;
-  font-size: 13px;
-  line-height: 18px;
+  border-radius: scale-px(7px);
+  box-shadow: 0 scale-px(1px) scale-px(6px) 0 rgb(237, 238, 241);
+  margin-top: scale-px(20px);
+  padding: scale-px(14px) scale-px(15px);
+  font-size: var(--nutui-font-size-m, var(--nutui-font-text-small));
+  line-height: scale-px(18px);
   font-family: PingFangSC;
   font-weight: 500;
 }
@@ -72,5 +72,5 @@
 .nut-rtl .nut-horizontal-items li {
   float: right;
   margin-right: 0;
-  margin-left: 20px;
+  margin-left: scale-px(20px);
 }

package/dist/cjs/packages/virtuallist/style-jrkf/virtuallist.scss

@@ -6,8 +6,8 @@
     float: left;
     color: $color-title;
     background: $color-background-overlay;
-    padding: 10px;
-    margin-right: 20px;
+    padding: scale-px(10px);
+    margin-right: scale-px(20px);
   }
 
   &:after {
@@ -23,12 +23,12 @@
     display: block;
     color: $color-title;
     background: $color-background-overlay;
-    border-radius: 7px;
-    box-shadow: 0 1px 6px 0 rgba(237, 238, 241, 1);
-    margin-top: 20px;
-    padding: 14px 15px;
-    font-size: 13px;
-    line-height: 18px;
+    border-radius: scale-px(7px);
+    box-shadow: 0 scale-px(1px) scale-px(6px) 0 rgba(237, 238, 241, 1);
+    margin-top: scale-px(20px);
+    padding: scale-px(14px) scale-px(15px);
+    font-size: $font-size-m;
+    line-height: scale-px(18px);
     font-family: PingFangSC;
     font-weight: 500;
   }
@@ -74,6 +74,6 @@
   li {
     float: right;
     margin-right: 0;
-    margin-left: 20px;
+    margin-left: scale-px(20px);
   }
 }

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

@@ -1,3 +1,13 @@
+:root,
+page {
+  --nut-scale-f: 1;
+  --nut-scale-font: var(--nut-scale-f, 1);
+  --nut-scale-icon: var(--nut-scale-f, 1);
+  --nut-icon-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+  --nut-icon-width: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+  --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+}
+
 /* #ifdef harmony */
 /* #endif */
 /* #ifndef harmony */

package/dist/cjs/types/index.d.ts

@@ -262,3 +262,6 @@ export * from './spec/audio/taro';
 export * from './spec/steps/base';
 export * from './spec/steps/h5';
 export * from './spec/steps/taro';
+export * from './spec/quickenter/base';
+export * from './spec/quickenter/h5';
+export * from './spec/quickenter/taro';

package/dist/cjs/types/index.js

@@ -267,3 +267,6 @@ _export_star._(require("./spec/audio/taro"), exports);
 _export_star._(require("./spec/steps/base"), exports);
 _export_star._(require("./spec/steps/h5"), exports);
 _export_star._(require("./spec/steps/taro"), exports);
+_export_star._(require("./spec/quickenter/base"), exports);
+_export_star._(require("./spec/quickenter/h5"), exports);
+_export_star._(require("./spec/quickenter/taro"), exports);

package/dist/cjs/types/spec/button/base.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import type { MouseEvent } from 'react';
 import { BaseProps } from '../../base/props';
 import { UIFill, UIRound, UISize, UIType } from '../../base/atoms';
 export interface BaseButton extends BaseProps {
@@ -14,5 +15,5 @@ export interface BaseButton extends BaseProps {
     rightIcon: ReactNode;
     id: string;
     nativeType: 'submit' | 'reset' | 'button';
-    onClick: (e: any) => void;
+    onClick: (e: MouseEvent<HTMLButtonElement>) => void;
 }

package/dist/cjs/types/spec/button/taro.d.ts

@@ -1,3 +1,7 @@
+import { ButtonProps as MiniProgramButtonProps } from '@tarojs/components';
 import { BaseButton } from './base';
-export interface TaroButtonProps extends BaseButton {
+type OmitMiniProgramButtonProps = Omit<MiniProgramButtonProps, 'size' | 'type' | 'onClick' | 'style' | 'disabled' | 'loading' | 'id'>;
+export interface TaroButtonProps extends BaseButton, OmitMiniProgramButtonProps {
+    nativeType: 'submit' | 'reset';
 }
+export {};

package/dist/cjs/types/spec/calendarcard/base.d.ts

@@ -23,6 +23,7 @@ export interface BaseCalendarCard extends BaseProps {
     firstDayOfWeek: number;
     startDate: Date;
     endDate: Date;
+    weekdays?: string[];
     disableDay: (day: CalendarCardDay) => boolean;
     renderDay: (day: CalendarCardDay) => ReactNode;
     renderDayTop: (day: CalendarCardDay) => ReactNode;