rsuite 6.0.0-canary-2025011413 → 6.0.0-canary-2025031415

package/CheckTreePicker/styles/index.less

@@ -11,10 +11,6 @@
     padding-top: @picker-menu-padding;
   }
 
-  .rs-check-item {
-    display: block;
-  }
-
   .rs-check-tree-view {
     padding: 2px 4px;
   }

package/Checkbox/styles/index.css

@@ -3,6 +3,18 @@
   * @param {string} @size-name - The size name
   * @param {string} @suffix - The suffix
   */
+/* stylelint-disable */
+*[class*='rs-'] {
+  box-sizing: border-box;
+}
+*[class*='rs-']::before,
+*[class*='rs-']::after {
+  box-sizing: border-box;
+}
+:root {
+  --rs-spacing: 0.25rem;
+  --rs-radius-sm: 0.25rem;
+}
 :root,
 .rs-theme-light {
   --rs-gray-0: #fff;
@@ -90,25 +102,16 @@
   --rs-checkbox-checked-bg: var(--rs-primary-500);
   --rs-checkbox-disabled-bg: var(--rs-gray-500);
 }
-/* stylelint-disable */
-*[class*='rs-'] {
-  box-sizing: border-box;
-}
-*[class*='rs-']::before,
-*[class*='rs-']::after {
-  box-sizing: border-box;
-}
 .rs-checkbox {
+  --rs-checkbox-size: 16px;
   position: relative;
-  display: inline-block;
-  vertical-align: middle;
+  display: inline-flex;
+  align-items: center;
 }
 .rs-checkbox-disabled label {
   cursor: not-allowed;
 }
 .rs-checkbox label {
-  line-height: 1.14285714;
-  margin-bottom: 0;
   font-weight: normal;
   cursor: pointer;
 }
@@ -121,36 +124,24 @@
 .rs-checkbox-disabled > .rs-checkbox-checker > label {
   color: var(--rs-text-disabled);
 }
-.rs-checkbox-inline {
-  position: relative;
-  display: inline-block;
-  margin-bottom: 0;
-  vertical-align: middle;
-  font-weight: normal;
-  margin-top: 0;
-  margin-right: 10px;
-}
-.rs-plaintext .rs-checkbox-inline:first-child {
-  margin-left: 0;
-}
 .rs-checkbox [type='checkbox']:focus-visible ~ .rs-checkbox-inner::before {
   box-shadow: var(--rs-state-focus-shadow);
 }
 .rs-checkbox-checker {
-  padding-top: 10px;
-  padding-bottom: 10px;
-  padding-left: 36px;
-  min-height: 36px;
-  line-height: 1;
   position: relative;
+  display: inline-flex;
+}
+.rs-checkbox-checker > label {
+  display: inline-flex;
+  align-items: center;
+  gap: calc(var(--rs-spacing) * 2);
 }
-/* rtl:begin:ignore */
 .rs-checkbox-control::before,
 .rs-checkbox-control .rs-checkbox-inner::before,
 .rs-checkbox-control .rs-checkbox-inner::after {
   content: '';
   position: absolute;
-  left: 0;
+  inset-inline-start: 0;
   top: 0;
   display: block;
 }
@@ -168,7 +159,7 @@
   width: 6px;
   height: 9px;
   margin-top: 2px;
-  margin-left: 5px;
+  margin-inline-start: 5px;
   opacity: 1;
 }
 .rs-checkbox-checked .rs-checkbox-control .rs-checkbox-inner::after {
@@ -180,39 +171,28 @@
   transform: rotate(0deg) scale(1);
   width: 10px;
   margin-top: 0;
-  margin-left: 3px;
+  margin-inline-start: 3px;
 }
-/* rtl:end:ignore */
-/* stylelint-disable-next-line */
 .rs-checkbox-control {
-  position: absolute;
-  width: 16px;
-  height: 16px;
-  display: inline-block;
-  left: 10px;
-  top: 10px;
+  position: relative;
+  display: inline-flex;
 }
 .rs-checkbox-control [type='checkbox'] {
-  position: absolute;
   opacity: 0;
+  width: var(--rs-checkbox-size);
+  height: var(--rs-checkbox-size);
   z-index: 1;
-  top: -10px;
-  right: -10px;
-  bottom: -10px;
-  left: -10px;
-  min-width: 36px;
-  min-height: 36px;
 }
 .rs-checkbox-control::before,
 .rs-checkbox-control .rs-checkbox-inner::before,
 .rs-checkbox-control .rs-checkbox-inner::after {
-  width: 16px;
-  height: 16px;
+  width: var(--rs-checkbox-size);
+  height: var(--rs-checkbox-size);
 }
 .rs-checkbox-control::before {
   border: 1px solid var(--rs-checkbox-checked-bg);
   background-color: transparent;
-  border-radius: 3px;
+  border-radius: var(--rs-radius-sm);
   transform: scale(1);
   opacity: 0.7;
   visibility: hidden;
@@ -229,7 +209,7 @@
 .rs-checkbox-control .rs-checkbox-inner::before {
   border: 1px solid var(--rs-checkbox-border);
   background-color: transparent;
-  border-radius: 3px;
+  border-radius: var(--rs-radius-sm);
   transition: background 0.2s linear, border 0.2s linear, box-shadow 0.2s linear;
 }
 .rs-theme-high-contrast .rs-checkbox-control .rs-checkbox-inner::before {
@@ -251,80 +231,31 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before {
 .rs-checkbox-disabled.rs-checkbox-indeterminate .rs-checkbox-control .rs-checkbox-inner::before {
   opacity: 0.5;
 }
-.rs-checkbox-red .rs-checkbox-control::before {
-  border-color: var(--rs-red-500);
-}
-.rs-checkbox-red label:hover .rs-checkbox-inner::before {
-  border-color: var(--rs-red-500);
-}
-.rs-checkbox-red.rs-checkbox-checked .rs-checkbox-inner::before,
-.rs-checkbox-red.rs-checkbox-indeterminate .rs-checkbox-inner::before {
-  border-color: var(--rs-red-500);
-  background-color: var(--rs-red-500);
-}
-.rs-checkbox-orange .rs-checkbox-control::before {
-  border-color: var(--rs-orange-500);
-}
-.rs-checkbox-orange label:hover .rs-checkbox-inner::before {
-  border-color: var(--rs-orange-500);
-}
-.rs-checkbox-orange.rs-checkbox-checked .rs-checkbox-inner::before,
-.rs-checkbox-orange.rs-checkbox-indeterminate .rs-checkbox-inner::before {
-  border-color: var(--rs-orange-500);
-  background-color: var(--rs-orange-500);
-}
-.rs-checkbox-yellow .rs-checkbox-control::before {
-  border-color: var(--rs-yellow-500);
-}
-.rs-checkbox-yellow label:hover .rs-checkbox-inner::before {
-  border-color: var(--rs-yellow-500);
-}
-.rs-checkbox-yellow.rs-checkbox-checked .rs-checkbox-inner::before,
-.rs-checkbox-yellow.rs-checkbox-indeterminate .rs-checkbox-inner::before {
-  border-color: var(--rs-yellow-500);
-  background-color: var(--rs-yellow-500);
-}
-.rs-checkbox-green .rs-checkbox-control::before {
-  border-color: var(--rs-green-500);
-}
-.rs-checkbox-green label:hover .rs-checkbox-inner::before {
-  border-color: var(--rs-green-500);
-}
-.rs-checkbox-green.rs-checkbox-checked .rs-checkbox-inner::before,
-.rs-checkbox-green.rs-checkbox-indeterminate .rs-checkbox-inner::before {
-  border-color: var(--rs-green-500);
-  background-color: var(--rs-green-500);
-}
-.rs-checkbox-cyan .rs-checkbox-control::before {
-  border-color: var(--rs-cyan-500);
-}
-.rs-checkbox-cyan label:hover .rs-checkbox-inner::before {
-  border-color: var(--rs-cyan-500);
-}
-.rs-checkbox-cyan.rs-checkbox-checked .rs-checkbox-inner::before,
-.rs-checkbox-cyan.rs-checkbox-indeterminate .rs-checkbox-inner::before {
-  border-color: var(--rs-cyan-500);
-  background-color: var(--rs-cyan-500);
+.rs-checkbox-red {
+  --rs-checkbox-checked-bg: var(--rs-red-500);
+  --rs-checkbox-border: var(--rs-red-500);
 }
-.rs-checkbox-blue .rs-checkbox-control::before {
-  border-color: var(--rs-blue-500);
+.rs-checkbox-orange {
+  --rs-checkbox-checked-bg: var(--rs-orange-500);
+  --rs-checkbox-border: var(--rs-orange-500);
 }
-.rs-checkbox-blue label:hover .rs-checkbox-inner::before {
-  border-color: var(--rs-blue-500);
+.rs-checkbox-yellow {
+  --rs-checkbox-checked-bg: var(--rs-yellow-500);
+  --rs-checkbox-border: var(--rs-yellow-500);
 }
-.rs-checkbox-blue.rs-checkbox-checked .rs-checkbox-inner::before,
-.rs-checkbox-blue.rs-checkbox-indeterminate .rs-checkbox-inner::before {
-  border-color: var(--rs-blue-500);
-  background-color: var(--rs-blue-500);
+.rs-checkbox-green {
+  --rs-checkbox-checked-bg: var(--rs-green-500);
+  --rs-checkbox-border: var(--rs-green-500);
 }
-.rs-checkbox-violet .rs-checkbox-control::before {
-  border-color: var(--rs-violet-500);
+.rs-checkbox-cyan {
+  --rs-checkbox-checked-bg: var(--rs-cyan-500);
+  --rs-checkbox-border: var(--rs-cyan-500);
 }
-.rs-checkbox-violet label:hover .rs-checkbox-inner::before {
-  border-color: var(--rs-violet-500);
+.rs-checkbox-blue {
+  --rs-checkbox-checked-bg: var(--rs-blue-500);
+  --rs-checkbox-border: var(--rs-blue-500);
 }
-.rs-checkbox-violet.rs-checkbox-checked .rs-checkbox-inner::before,
-.rs-checkbox-violet.rs-checkbox-indeterminate .rs-checkbox-inner::before {
-  border-color: var(--rs-violet-500);
-  background-color: var(--rs-violet-500);
+.rs-checkbox-violet {
+  --rs-checkbox-checked-bg: var(--rs-violet-500);
+  --rs-checkbox-border: var(--rs-violet-500);
 }

package/Checkbox/styles/index.less

@@ -1,7 +1,9 @@
-@import '../../styles/common';
-@import 'mixin';
+@import '../../styles/common.less';
+@import './mixin.less';
 
 .rs-checkbox {
+  --rs-checkbox-size: @checkbox-width-height;
+
   .radio-checkbox-common();
 
   [type='checkbox']:focus-visible ~ .rs-checkbox-inner::before {
@@ -10,22 +12,23 @@
 }
 
 .rs-checkbox-checker {
-  padding-top: 10px;
-  padding-bottom: 10px;
-  padding-left: (@checkbox-sense-width*2 + @checkbox-width-height);
-  min-height: (@checkbox-sense-width*2 + @checkbox-width-height);
-  line-height: 1;
   position: relative;
+  display: inline-flex;
+
+  > label {
+    display: inline-flex;
+    align-items: center;
+    gap: calc(var(--rs-spacing) * 2);
+  }
 }
 
-/* rtl:begin:ignore */
 .rs-checkbox-control {
   &::before,
   .rs-checkbox-inner::before,
   .rs-checkbox-inner::after {
     content: '';
     position: absolute;
-    left: 0;
+    inset-inline-start: 0;
     top: 0;
     display: block;
   }
@@ -34,7 +37,9 @@
   .rs-checkbox-inner::after {
     opacity: 0;
     transform: rotate(45deg) scale(0);
-    transition: opacity 0.2s ease-in, transform 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46);
+    transition:
+      opacity 0.2s ease-in,
+      transform 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46);
 
     .high-contrast-mode({
       transition: none;
@@ -46,7 +51,7 @@
       width: 6px;
       height: 9px;
       margin-top: 2px;
-      margin-left: 5px;
+      margin-inline-start: 5px;
       opacity: 1;
     }
 
@@ -60,41 +65,27 @@
       transform: rotate(0deg) scale(1);
       width: 10px;
       margin-top: 0;
-      margin-left: 3px;
+      margin-inline-start: 3px;
     }
   }
 }
 
-/* rtl:end:ignore */
-
-/* stylelint-disable-next-line */ // For RTL Scope
 .rs-checkbox-control {
-  position: absolute;
-  width: @checkbox-width-height;
-  height: @checkbox-width-height;
-  display: inline-block;
-  left: @checkbox-sense-width;
-  top: @checkbox-sense-width;
+  position: relative;
+  display: inline-flex;
 
   [type='checkbox'] {
-    position: absolute;
     opacity: 0;
+    width: var(--rs-checkbox-size);
+    height: var(--rs-checkbox-size);
     z-index: 1;
-
-    // Sense area(Can be clicked)
-    top: -@checkbox-sense-width;
-    right: -@checkbox-sense-width;
-    bottom: -@checkbox-sense-width;
-    left: -@checkbox-sense-width;
-    min-width: 36px;
-    min-height: 36px;
   }
 
   &::before,
   .rs-checkbox-inner::before,
   .rs-checkbox-inner::after {
-    width: @checkbox-width-height;
-    height: @checkbox-width-height;
+    width: var(--rs-checkbox-size);
+    height: var(--rs-checkbox-size);
   }
 
   // Ripple effect area
@@ -104,7 +95,9 @@
     transform: scale(1);
     opacity: 0.7;
     visibility: hidden;
-    transition: transform 0.2s linear, opacity 0.2s linear;
+    transition:
+      transform 0.2s linear,
+      opacity 0.2s linear;
 
     .high-contrast-mode({
       transition: none;
@@ -121,7 +114,10 @@
   .rs-checkbox-inner::before {
     .checkbox-inner-wrap(var(--rs-checkbox-border));
 
-    transition: background 0.2s linear, border 0.2s linear, box-shadow 0.2s linear;
+    transition:
+      background 0.2s linear,
+      border 0.2s linear,
+      box-shadow 0.2s linear;
 
     .high-contrast-mode({
       transition: none;
@@ -151,22 +147,7 @@
 
 each(@spectrum, .(@color) {
   .rs-checkbox-@{color} {
-    .rs-checkbox-control::before{
-      border-color: var(~'--rs-@{color}-500');
-    }
-
-    label:hover{
-      .rs-checkbox-inner::before {
-        border-color: var(~'--rs-@{color}-500');
-      }
-    }
-
-    &.rs-checkbox-checked,
-    &.rs-checkbox-indeterminate  {
-      .rs-checkbox-inner::before{
-        border-color: var(~'--rs-@{color}-500');
-        background-color:var(~'--rs-@{color}-500');
-      }
-    }
+    --rs-checkbox-checked-bg: var(~'--rs-@{color}-500');
+    --rs-checkbox-border: var(~'--rs-@{color}-500');
   }
 });

package/Checkbox/styles/mixin.less

@@ -1,14 +1,14 @@
 .checkbox-inner-wrap(@border-color) {
   border: 1px solid @border-color;
   background-color: @checkbox-bg;
-  border-radius: @checkbox-border-radius;
+  border-radius: var(--rs-radius-sm);
 }
 
 // Radio and Checkbox common styles
 .radio-checkbox-common() {
   position: relative;
-  display: inline-block;
-  vertical-align: middle;
+  display: inline-flex;
+  align-items: center;
 
   // These classes are used on elements with <label> descendants
   &-disabled {
@@ -18,8 +18,6 @@
   }
 
   label {
-    line-height: unit((@checkbox-width-height / @font-size-base));
-    margin-bottom: 0;
     font-weight: normal;
     cursor: pointer;
   }
@@ -36,19 +34,4 @@
   &-disabled > &-checker > label {
     color: var(--rs-text-disabled);
   }
-
-  // Radios and checkboxes on same line
-  &-inline {
-    position: relative;
-    display: inline-block;
-    margin-bottom: 0;
-    vertical-align: middle;
-    font-weight: normal;
-    margin-top: 0;
-    margin-right: @radio-sense-width; // space out consecutive inline controls
-
-    .rs-plaintext &:first-child {
-      margin-left: 0;
-    }
-  }
 }

package/CheckboxGroup/styles/index.css

@@ -11,13 +11,16 @@
 *[class*='rs-']::after {
   box-sizing: border-box;
 }
+:root {
+  --rs-spacing: 0.25rem;
+}
 .rs-checkbox-group {
+  --rs-checkbox-group-gap: calc(var(--rs-spacing) * 3);
+  --rs-checkbox-group-direction: column;
   display: flex;
-  flex-direction: column;
-}
-.rs-checkbox-group > .rs-checkbox {
-  margin-left: -10px;
+  flex-direction: var(--rs-checkbox-group-direction);
+  gap: var(--rs-checkbox-group-gap);
 }
-.rs-checkbox-group-inline {
-  flex-direction: row;
+.rs-checkbox-group.rs-checkbox-group-inline {
+  --rs-checkbox-group-direction: row;
 }

package/CheckboxGroup/styles/index.less

@@ -1,14 +1,14 @@
 @import '../../styles/common';
 
 .rs-checkbox-group {
+  --rs-checkbox-group-gap: calc(var(--rs-spacing) * 3);
+  --rs-checkbox-group-direction: column;
+
   display: flex;
-  flex-direction: column;
+  flex-direction: var(--rs-checkbox-group-direction);
+  gap: var(--rs-checkbox-group-gap);
 
-  > .rs-checkbox {
-    margin-left: -1 * @radio-sense-width;
+  &.rs-checkbox-group-inline {
+    --rs-checkbox-group-direction: row;
   }
 }
-
-.rs-checkbox-group-inline {
-  flex-direction: row;
-}

package/Col/styles/index.css

@@ -1,20 +0,0 @@
-/**
-  * Map mixin
-  * @param {string} @size-name - The size name
-  * @param {string} @suffix - The suffix
-  */
-/* stylelint-disable */
-*[class*='rs-'] {
-  box-sizing: border-box;
-}
-*[class*='rs-']::before,
-*[class*='rs-']::after {
-  box-sizing: border-box;
-}
-.rs-col {
-  float: left;
-  position: relative;
-  min-height: 1px;
-  padding-left: 5px;
-  padding-right: 5px;
-}

package/Col/styles/index.less

@@ -1,14 +1,2 @@
-@import '../../styles/common';
-
-// Columns
-//
-// Common styles for small and large grid columns
-.rs-col {
-  float: left;
-  position: relative;
-  // Prevent columns from collapsing when empty
-  min-height: 1px;
-  // Inner gutter via padding
-  padding-left: ceil((@grid-gutter-width / 2));
-  padding-right: floor((@grid-gutter-width / 2));
-}
+// Col styles are included in Grid component
+// --------------------------------------------------

package/DateInput/styles/index.css

@@ -3,6 +3,21 @@
   * @param {string} @size-name - The size name
   * @param {string} @suffix - The suffix
   */
+/* stylelint-disable */
+*[class*='rs-'] {
+  box-sizing: border-box;
+}
+*[class*='rs-']::before,
+*[class*='rs-']::after {
+  box-sizing: border-box;
+}
+:root {
+  --rs-font-size-xs: 0.75rem;
+  --rs-font-size-sm: 0.875rem;
+  --rs-font-size-md: 1rem;
+  --rs-spacing: 0.25rem;
+  --rs-radius-md: 0.375rem;
+}
 :root,
 .rs-theme-light {
   --rs-gray-0: #fff;
@@ -75,13 +90,24 @@
   --rs-input-focus-border: var(--rs-primary-500);
   --rs-input-disabled-bg: var(--rs-gray-700);
 }
-/* stylelint-disable */
-*[class*='rs-'] {
-  box-sizing: border-box;
-}
-*[class*='rs-']::before,
-*[class*='rs-']::after {
-  box-sizing: border-box;
+:root {
+  --rs-input-font-size-xs: var(--rs-font-size-xs);
+  --rs-input-font-size-sm: var(--rs-font-size-sm);
+  --rs-input-font-size-md: var(--rs-font-size-sm);
+  --rs-input-font-size-lg: var(--rs-font-size-md);
+  --rs-input-line-height-xs: 1.66666667;
+  --rs-input-line-height-sm: 1.42857143;
+  --rs-input-line-height-md: 1.42857143;
+  --rs-input-line-height-lg: 1.375;
+  --rs-input-border-radius: var(--rs-radius-md);
+  --rs-input-padding-block-xs: calc(2px - 1px);
+  --rs-input-padding-block-sm: calc(5px - 1px);
+  --rs-input-padding-block-md: calc(8px - 1px);
+  --rs-input-padding-block-lg: calc(10px - 1px);
+  --rs-input-padding-inline-xs: calc(var(--rs-spacing) - 1px);
+  --rs-input-padding-inline-sm: calc(calc(var(--rs-spacing) * 2) - 1px);
+  --rs-input-padding-inline-md: calc(calc(var(--rs-spacing) * 2.5) - 1px);
+  --rs-input-padding-inline-lg: calc(calc(var(--rs-spacing) * 3) - 1px);
 }
 .rs-input {
   display: block;
@@ -91,15 +117,11 @@
   background-image: none;
   border: 1px solid var(--rs-border-primary);
   transition: border-color ease-in-out 0.15s;
-  border-radius: 6px;
-  /* stylelint-disable */
-  padding: 7px 11px;
-  font-size: 14px;
-  line-height: 1.42857143;
-  /* stylelint-enable */
-}
-textarea.rs-input {
-  height: auto;
+  border-radius: var(--rs-input-border-radius);
+  font-size: var(--rs-input-font-size);
+  line-height: var(--rs-input-line-height);
+  padding-block: var(--rs-input-padding-block);
+  padding-inline: var(--rs-input-padding-inline);
 }
 .rs-theme-high-contrast .rs-input {
   transition: none;
@@ -125,36 +147,33 @@ textarea.rs-input {
   color: var(--rs-text-disabled);
 }
 textarea.rs-input {
-  overflow: auto;
-  resize: vertical;
-}
-.rs-input-xs {
-  /* stylelint-disable */
-  padding: 1px 11px;
-  font-size: 12px;
-  line-height: 1.66666667;
-  /* stylelint-enable */
-}
-textarea.rs-input-xs {
   height: auto;
 }
-.rs-input-lg {
-  /* stylelint-disable */
-  padding: 9px 11px;
-  font-size: 16px;
-  line-height: 1.375;
-  /* stylelint-enable */
+.rs-input.rs-input-xs {
+  --rs-input-font-size: var(--rs-input-font-size-xs);
+  --rs-input-line-height: var(--rs-input-line-height-xs);
+  --rs-input-padding-block: var(--rs-input-padding-block-xs);
+  --rs-input-padding-inline: var(--rs-input-padding-inline-xs);
+}
+.rs-input.rs-input-sm {
+  --rs-input-font-size: var(--rs-input-font-size-sm);
+  --rs-input-line-height: var(--rs-input-line-height-sm);
+  --rs-input-padding-block: var(--rs-input-padding-block-sm);
+  --rs-input-padding-inline: var(--rs-input-padding-inline-sm);
+}
+.rs-input.rs-input-md {
+  --rs-input-font-size: var(--rs-input-font-size-md);
+  --rs-input-line-height: var(--rs-input-line-height-md);
+  --rs-input-padding-block: var(--rs-input-padding-block-md);
+  --rs-input-padding-inline: var(--rs-input-padding-inline-md);
+}
+.rs-input.rs-input-lg {
+  --rs-input-font-size: var(--rs-input-font-size-lg);
+  --rs-input-line-height: var(--rs-input-line-height-lg);
+  --rs-input-padding-block: var(--rs-input-padding-block-lg);
+  --rs-input-padding-inline: var(--rs-input-padding-inline-lg);
 }
-textarea.rs-input-lg {
-  height: auto;
-}
-.rs-input-sm {
-  /* stylelint-disable */
-  padding: 4px 11px;
-  font-size: 14px;
-  line-height: 1.42857143;
-  /* stylelint-enable */
-}
-textarea.rs-input-sm {
-  height: auto;
+textarea.rs-input {
+  overflow: auto;
+  resize: vertical;
 }