rsuite 5.74.2 → 5.76.0

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+# [5.76.0](https://github.com/rsuite/rsuite/compare/v5.75.0...v5.76.0) (2024-12-20)
+
+
+### Features
+
+* **Image:** add support for Image ([#4068](https://github.com/rsuite/rsuite/issues/4068)) ([46980f9](https://github.com/rsuite/rsuite/commit/46980f985094110925fa5e2ad5c69a46cd84e7eb))
+
+
+
+# [5.75.0](https://github.com/rsuite/rsuite/compare/v5.74.2...v5.75.0) (2024-12-06)
+
+
+### Bug Fixes
+
+* **useToaster:** fix the container parameter of `toaster.push` does not work ([#4057](https://github.com/rsuite/rsuite/issues/4057)) ([c0073c3](https://github.com/rsuite/rsuite/commit/c0073c37e087a15bfd5c7457418da2890b18b573))
+
+
+### Features
+
+* **Card:** add support for Card ([#4061](https://github.com/rsuite/rsuite/issues/4061)) ([1c25622](https://github.com/rsuite/rsuite/commit/1c2562236d8be0b9a68862168e2bb4abd9e8b222))
+* **List:** add support divider on List ([#4062](https://github.com/rsuite/rsuite/issues/4062)) ([7f170b7](https://github.com/rsuite/rsuite/commit/7f170b782c0c60ce9abafdcfae71feadb25c93c7))
+* **Stat:** add support for Stat ([#4056](https://github.com/rsuite/rsuite/issues/4056)) ([c270e87](https://github.com/rsuite/rsuite/commit/c270e87f52d4881133eb73403102df5c9a5ad5a9))
+
+
+
 ## [5.74.2](https://github.com/rsuite/rsuite/compare/v5.74.1...v5.74.2) (2024-11-08)
 
 

package/Card/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "rsuite/Card",
+  "private": true,
+  "main": "../cjs/Card/index.js",
+  "module": "../esm/Card/index.js",
+  "types": "../esm/Card/index.d.ts"
+}

package/Card/styles/index.css

@@ -0,0 +1,105 @@
+:root,
+.rs-theme-light {
+  --rs-gray-0: #fff;
+  --rs-gray-100: #f2f2f5;
+  --rs-gray-200: #e5e5ea;
+  --rs-gray-600: #717273;
+  --rs-gray-900: #121212;
+  --rs-border-primary: var(--rs-gray-200);
+  --rs-card-bg: var(--rs-gray-0);
+  --rs-panel-shadow: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
+}
+.rs-theme-dark {
+  --rs-gray-0: #fff;
+  --rs-gray-100: #cbced4;
+  --rs-gray-200: #a4a9b3;
+  --rs-gray-600: #3c3f43;
+  --rs-gray-900: #0f131a;
+  --rs-border-primary: var(--rs-gray-600);
+  --rs-card-bg: var(--rs-gray-900);
+  --rs-panel-shadow: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
+}
+.rs-theme-high-contrast {
+  --rs-gray-0: #fff;
+  --rs-gray-100: #cbced4;
+  --rs-gray-200: #a4a9b3;
+  --rs-gray-600: #3c3f43;
+  --rs-gray-900: #0f131a;
+  --rs-border-primary: var(--rs-gray-100);
+  --rs-card-bg: var(--rs-gray-900);
+  --rs-panel-shadow: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
+}
+/* stylelint-disable */
+*[class*='rs-'] {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+*[class*='rs-']::before,
+*[class*='rs-']::after {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+.rs-card {
+  --rs-card-width: 100%;
+  --rs-card-padding: 16px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  border-radius: 6px;
+  overflow: hidden;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  position: relative;
+  width: var(--rs-card-width);
+}
+.rs-card-bordered {
+  border: 1px solid #e5e5ea;
+  border: 1px solid var(--rs-border-primary);
+  background-color: #fff;
+  background-color: var(--rs-card-bg);
+}
+.rs-card-shaded {
+  -webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
+  -webkit-box-shadow: var(--rs-panel-shadow);
+          box-shadow: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
+          box-shadow: var(--rs-panel-shadow);
+}
+.rs-card-shaded-hover:hover {
+  -webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
+  -webkit-box-shadow: var(--rs-panel-shadow);
+          box-shadow: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
+          box-shadow: var(--rs-panel-shadow);
+  cursor: pointer;
+}
+.rs-card-sm {
+  --rs-card-padding: 8px;
+}
+.rs-card-md {
+  --rs-card-padding: 16px;
+}
+.rs-card-lg {
+  --rs-card-padding: 24px;
+}
+.rs-card-row {
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+}
+.rs-card-header {
+  padding: var(--rs-card-padding) var(--rs-card-padding) 0 var(--rs-card-padding);
+}
+.rs-card-body {
+  padding: var(--rs-card-padding);
+}
+.rs-card-footer {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 8px;
+  padding: 0 var(--rs-card-padding) var(--rs-card-padding) var(--rs-card-padding);
+}

package/Card/styles/index.less

@@ -0,0 +1,62 @@
+@import '../../styles/common.less';
+
+//
+// Card
+// --------------------------------------------------
+
+.rs-card {
+  --rs-card-width: 100%;
+  --rs-card-padding: 16px;
+
+  display: flex;
+  flex-direction: column;
+  border-radius: 6px;
+  overflow: hidden;
+  box-sizing: border-box;
+  position: relative;
+  width: var(--rs-card-width);
+
+  &-bordered {
+    border: 1px solid var(--rs-border-primary);
+    background-color: var(--rs-card-bg);
+  }
+
+  &-shaded {
+    box-shadow: var(--rs-panel-shadow);
+  }
+
+  &-shaded-hover:hover {
+    box-shadow: var(--rs-panel-shadow);
+    cursor: pointer;
+  }
+
+  &-sm {
+    --rs-card-padding: 8px;
+  }
+
+  &-md {
+    --rs-card-padding: 16px;
+  }
+
+  &-lg {
+    --rs-card-padding: 24px;
+  }
+
+  &-row {
+    flex-direction: row;
+  }
+
+  &-header {
+    padding: var(--rs-card-padding) var(--rs-card-padding) 0 var(--rs-card-padding);
+  }
+
+  &-body {
+    padding: var(--rs-card-padding);
+  }
+
+  &-footer {
+    display: flex;
+    gap: 8px;
+    padding: 0 var(--rs-card-padding) var(--rs-card-padding) var(--rs-card-padding);
+  }
+}

package/CardBody/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "rsuite/CardBody",
+  "private": true,
+  "main": "../cjs/Card/CardBody.js",
+  "module": "../esm/Card/CardBody.js",
+  "types": "../esm/Card/CardBody.d.ts"
+}

package/CardFooter/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "rsuite/CardFooter",
+  "private": true,
+  "main": "../cjs/Card/CardFooter.js",
+  "module": "../esm/Card/CardFooter.js",
+  "types": "../esm/Card/CardFooter.d.ts"
+}

package/CardGroup/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "rsuite/CardGroup",
+  "private": true,
+  "main": "../cjs/CardGroup/index.js",
+  "module": "../esm/CardGroup/index.js",
+  "types": "../esm/CardGroup/index.d.ts"
+}

package/CardGroup/styles/index.css

@@ -0,0 +1,7 @@
+.rs-card-group {
+  --rs-columns: 4;
+  --rs-spacing: 20px;
+  display: grid;
+  grid-template-columns: repeat(var(--rs-columns), 1fr);
+  grid-gap: var(--rs-spacing);
+}

package/CardGroup/styles/index.less

@@ -0,0 +1,8 @@
+.rs-card-group {
+  --rs-columns: 4;
+  --rs-spacing: 20px;
+
+  display: grid;
+  grid-template-columns: repeat(var(--rs-columns), 1fr);
+  grid-gap: var(--rs-spacing);
+}

package/CardHeader/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "rsuite/CardHeader",
+  "private": true,
+  "main": "../cjs/Card/CardHeader.js",
+  "module": "../esm/Card/CardHeader.js",
+  "types": "../esm/Card/CardHeader.d.ts"
+}

package/Image/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "rsuite/Image",
+  "private": true,
+  "main": "../cjs/Image/index.js",
+  "module": "../esm/Image/index.js",
+  "types": "../esm/Image/index.d.ts"
+}

package/Image/styles/index.css

@@ -0,0 +1,33 @@
+.rs-image {
+  --rs-object-fit: cover;
+  --rs-object-position: initial;
+  -o-object-fit: var(--rs-object-fit);
+     object-fit: var(--rs-object-fit);
+  -o-object-position: var(--rs-object-position);
+     object-position: var(--rs-object-position);
+  max-width: 100%;
+}
+.rs-image-rounded {
+  border-radius: 6px;
+}
+.rs-image-circle {
+  border-radius: 50%;
+}
+.rs-image-bordered {
+  border: 1px solid var(--rs-border-primary);
+}
+.rs-image-zoomed {
+  -webkit-transition: -webkit-transform 0.3s ease-in-out;
+  transition: -webkit-transform 0.3s ease-in-out;
+  transition: transform 0.3s ease-in-out;
+  transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
+  cursor: pointer;
+}
+.rs-image-zoomed:hover {
+  -webkit-transform: matrix(1.25, 0, 0, 1.25, 0, 0);
+          transform: matrix(1.25, 0, 0, 1.25, 0, 0);
+}
+.rs-image-wrapper {
+  position: relative;
+  overflow: hidden;
+}

package/Image/styles/index.less

@@ -0,0 +1,34 @@
+.rs-image {
+  --rs-object-fit: cover;
+  --rs-object-position: initial;
+
+  object-fit: var(--rs-object-fit);
+  object-position: var(--rs-object-position);
+  max-width: 100%;
+
+  &-rounded {
+    border-radius: 6px;
+  }
+
+  &-circle {
+    border-radius: 50%;
+  }
+
+  &-bordered {
+    border: 1px solid var(--rs-border-primary);
+  }
+
+  &-zoomed {
+    transition: transform 0.3s ease-in-out;
+    cursor: pointer;
+
+    &:hover {
+      transform: matrix(1.25, 0, 0, 1.25, 0, 0);
+    }
+  }
+}
+
+.rs-image-wrapper {
+  position: relative;
+  overflow: hidden;
+}

package/List/styles/index.css

@@ -72,19 +72,13 @@
 }
 .rs-list {
   position: relative;
-  -webkit-box-shadow: 0 1px 0 #e5e5ea, 0 -1px 0 #e5e5ea;
-  -webkit-box-shadow: 0 1px 0 var(--rs-list-border), 0 -1px 0 var(--rs-list-border);
-          box-shadow: 0 1px 0 #e5e5ea, 0 -1px 0 #e5e5ea;
-          box-shadow: 0 1px 0 var(--rs-list-border), 0 -1px 0 var(--rs-list-border);
   overflow-x: hidden;
   overflow-y: auto;
 }
 .rs-list-bordered {
   border-radius: 6px;
-  -webkit-box-shadow: 0 0 0 1px #e5e5ea;
-  -webkit-box-shadow: 0 0 0 1px var(--rs-list-border);
-          box-shadow: 0 0 0 1px #e5e5ea;
-          box-shadow: 0 0 0 1px var(--rs-list-border);
+  border: 1px solid #e5e5ea;
+  border: 1px solid var(--rs-list-border);
 }
 .rs-list-hover .rs-list-item:hover {
   background-color: #f2faff;
@@ -118,15 +112,15 @@
   padding-top: 8px;
   padding-bottom: 8px;
 }
+.rs-list-item-xs {
+  padding-top: 2px;
+  padding-bottom: 2px;
+}
 /* rtl:begin:ignore */
 /* stylelint-disable-next-line */
 .rs-list-item {
   background-color: #fff;
   background-color: var(--rs-list-bg);
-  -webkit-box-shadow: 0 -1px 0 #e5e5ea, 0 1px 0 #e5e5ea;
-  -webkit-box-shadow: 0 -1px 0 var(--rs-list-border), 0 1px 0 var(--rs-list-border);
-          box-shadow: 0 -1px 0 #e5e5ea, 0 1px 0 #e5e5ea;
-          box-shadow: 0 -1px 0 var(--rs-list-border), 0 1px 0 var(--rs-list-border);
 }
 .rs-list-item-helper {
   position: absolute;
@@ -164,4 +158,8 @@
   border: 1px #3498ff dashed;
   border: 1px var(--rs-list-placeholder-border) dashed;
 }
+.rs-list-divider .rs-list-item + .rs-list-item {
+  border-top: 1px solid #e5e5ea;
+  border-top: 1px solid var(--rs-list-border);
+}
 /* rtl:end:ignore */

package/List/styles/index.less

@@ -6,14 +6,12 @@
 
 .rs-list {
   position: relative;
-  // border-top and border-bottom
-  box-shadow: 0 1px 0 var(--rs-list-border), 0 -1px 0 var(--rs-list-border);
   overflow-x: hidden;
   overflow-y: auto;
 
   &-bordered {
     border-radius: @border-radius;
-    box-shadow: 0 0 0 1px var(--rs-list-border);
+    border: @list-border-width solid var(--rs-list-border);
   }
 
   &-hover .rs-list-item:hover {
@@ -54,13 +52,17 @@
     padding-top: 8px;
     padding-bottom: 8px;
   }
+
+  &-xs {
+    padding-top: 2px;
+    padding-bottom: 2px;
+  }
 }
 
 /* rtl:begin:ignore */
 /* stylelint-disable-next-line */ // For RTL Scope
 .rs-list-item {
   background-color: var(--rs-list-bg);
-  box-shadow: 0 -1px 0 var(--rs-list-border), 0 1px 0 var(--rs-list-border);
 
   &-helper {
     position: absolute;
@@ -102,4 +104,10 @@
   }
 }
 
+.rs-list-divider {
+  .rs-list-item + .rs-list-item {
+    border-top: @list-border-width solid var(--rs-list-border);
+  }
+}
+
 /* rtl:end:ignore */

package/Stat/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "rsuite/Stat",
+  "private": true,
+  "main": "../cjs/Stat/index.js",
+  "module": "../esm/Stat/index.js",
+  "types": "../esm/Stat/index.d.ts"
+}