rsuite 6.0.0-canary-20250403 → 6.0.0-canary-20250416

package/Pagination/styles/index.css

@@ -1191,10 +1191,10 @@
 .rs-divider:where([data-orientation='horizontal'][data-with-label='true'])::after {
   margin-inline-start: var(--rs-divider-spacing-xs);
 }
-.rs-divider:where([data-position='left']):before {
+.rs-divider:where([data-placement='start']):before {
   display: none;
 }
-.rs-divider:where([data-position='right']):after {
+.rs-divider:where([data-placement='end']):after {
   display: none;
 }
 .rs-stack {
@@ -1495,9 +1495,6 @@
   background-color: var(--rs-input-disabled-bg);
   color: var(--rs-text-disabled);
 }
-textarea.rs-input {
-  height: auto;
-}
 .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);
@@ -1522,10 +1519,6 @@ textarea.rs-input {
   --rs-input-padding-block: var(--rs-input-padding-block-lg);
   --rs-input-padding-inline: var(--rs-input-padding-inline-lg);
 }
-textarea.rs-input {
-  overflow: auto;
-  resize: vertical;
-}
 .rs-input-group {
   --rs-input-group-input-height-xs: calc(24px - 2px);
   --rs-input-group-input-height-sm: calc(30px - 2px);

package/PasswordInput/package.json

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

package/PasswordInput/styles/index.css

@@ -0,0 +1,172 @@
+/**
+  * 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;
+}
+: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;
+  --rs-gray-50: #f7f7fa;
+  --rs-gray-100: #f2f2f5;
+  --rs-gray-200: #e5e5ea;
+  --rs-gray-400: #b6b7b8;
+  --rs-gray-500: #939393;
+  --rs-gray-600: #717273;
+  --rs-gray-700: #575757;
+  --rs-gray-800: #343434;
+  --rs-primary-500: #3498ff;
+  --rs-text-primary: var(--rs-gray-800);
+  --rs-text-secondary: var(--rs-gray-600);
+  --rs-text-disabled: var(--rs-gray-600);
+  --rs-border-primary: var(--rs-gray-200);
+  --rs-color-focus-ring: rgb(from var(--rs-primary-500) r g b / 25%);
+  --rs-input-bg: var(--rs-gray-0);
+  --rs-input-focus-border: var(--rs-primary-500);
+  --rs-input-disabled-bg: var(--rs-gray-50);
+}
+@supports not (color: rgb(from white r g b)) {
+  :root,
+  .rs-theme-light {
+    --rs-color-focus-ring: rgba(52, 152, 255, 0.25);
+  }
+}
+.rs-theme-dark {
+  --rs-gray-0: #fff;
+  --rs-gray-50: #e9ebf0;
+  --rs-gray-100: #cbced4;
+  --rs-gray-200: #a4a9b3;
+  --rs-gray-400: #6a6f76;
+  --rs-gray-500: #5c6066;
+  --rs-gray-600: #3c3f43;
+  --rs-gray-700: #292d33;
+  --rs-gray-800: #1a1d24;
+  --rs-primary-500: #34c3ff;
+  --rs-text-primary: var(--rs-gray-50);
+  --rs-text-secondary: var(--rs-gray-200);
+  --rs-text-disabled: var(--rs-gray-400);
+  --rs-border-primary: var(--rs-gray-600);
+  --rs-color-focus-ring: 0 0 0 3px rgb(from var(--rs-gray-500) r g b / 25%);
+  --rs-input-bg: var(--rs-gray-800);
+  --rs-input-focus-border: var(--rs-primary-500);
+  --rs-input-disabled-bg: var(--rs-gray-700);
+}
+@supports not (color: rgb(from white r g b)) {
+  .rs-theme-dark {
+    --rs-color-focus-ring: 0 0 0 3px rgba(52, 195, 255, 0.25);
+  }
+}
+.rs-theme-high-contrast {
+  --rs-gray-0: #fff;
+  --rs-gray-50: #e9ebf0;
+  --rs-gray-100: #cbced4;
+  --rs-gray-200: #a4a9b3;
+  --rs-gray-400: #6a6f76;
+  --rs-gray-500: #5c6066;
+  --rs-gray-600: #3c3f43;
+  --rs-gray-700: #292d33;
+  --rs-gray-800: #1a1d24;
+  --rs-primary-500: #ffff00;
+  --rs-text-primary: var(--rs-gray-50);
+  --rs-text-secondary: var(--rs-gray-200);
+  --rs-text-disabled: var(--rs-gray-400);
+  --rs-border-primary: var(--rs-gray-100);
+  --rs-color-focus-ring: var(--rs-gray-0);
+  --rs-input-bg: var(--rs-gray-800);
+  --rs-input-focus-border: var(--rs-primary-500);
+  --rs-input-disabled-bg: var(--rs-gray-700);
+}
+: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;
+  width: 100%;
+  color: var(--rs-text-primary);
+  background-color: var(--rs-input-bg);
+  background-image: none;
+  border: 1px solid var(--rs-border-primary);
+  transition: border-color ease-in-out 0.15s;
+  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;
+}
+.rs-input::-moz-placeholder {
+  color: var(--rs-text-secondary);
+}
+.rs-input::placeholder {
+  color: var(--rs-text-secondary);
+}
+.rs-input:focus,
+.rs-input:hover:not(:disabled) {
+  border-color: var(--rs-input-focus-border);
+}
+.rs-input:focus {
+  outline: 3px solid var(--rs-color-focus-ring);
+}
+.rs-theme-high-contrast .rs-input:focus {
+  outline-offset: 2px;
+}
+.rs-input:disabled {
+  background-color: var(--rs-input-disabled-bg);
+  color: var(--rs-text-disabled);
+}
+.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);
+}

package/PasswordInput/styles/index.less

@@ -0,0 +1 @@
+@import '../../Input/styles/index.less';

package/PasswordStrengthMeter/package.json

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

package/PasswordStrengthMeter/styles/index.css

@@ -0,0 +1,33 @@
+.rs-password-strength-meter {
+  --rs-password-strength-meter-color-low: var(--rs-color-red);
+  --rs-password-strength-meter-color-medium: var(--rs-color-orange);
+  --rs-password-strength-meter-color-high: var(--rs-color-green);
+  --rs-password-strength-meter-bg: var(--rs-gray-200);
+  margin-top: calc(var(--rs-spacing) * 2);
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+.rs-password-strength-meter-bar {
+  display: flex;
+  gap: var(--rs-spacing);
+  margin-bottom: var(--rs-spacing);
+  width: 100%;
+}
+.rs-password-strength-meter-segment {
+  flex: 1;
+  height: 6px;
+  border-radius: 2px;
+  background: var(--rs-password-strength-meter-bg);
+  transition: background 0.3s;
+}
+.rs-password-strength-meter-segment:where([data-active='true']) {
+  background: var(--rs-password-strength-meter-color-medium);
+}
+.rs-password-strength-meter-segment:where([data-active='true']):first-child {
+  background: var(--rs-password-strength-meter-color-low);
+}
+.rs-password-strength-meter-segment:where([data-active='true']):last-child {
+  background: var(--rs-password-strength-meter-color-high);
+}

package/PasswordStrengthMeter/styles/index.less

@@ -0,0 +1,39 @@
+.rs-password-strength-meter {
+  --rs-password-strength-meter-color-low: var(--rs-color-red);
+  --rs-password-strength-meter-color-medium: var(--rs-color-orange);
+  --rs-password-strength-meter-color-high: var(--rs-color-green);
+  --rs-password-strength-meter-bg: var(--rs-gray-200);
+
+  margin-top: calc(var(--rs-spacing) * 2);
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+
+  &-bar {
+    display: flex;
+    gap: var(--rs-spacing);
+    margin-bottom: var(--rs-spacing);
+    width: 100%;
+  }
+
+  &-segment {
+    flex: 1;
+    height: 6px;
+    border-radius: 2px;
+    background: var(--rs-password-strength-meter-bg);
+    transition: background 0.3s;
+
+    &:where([data-active='true']) {
+      background: var(--rs-password-strength-meter-color-medium);
+
+      &:first-child {
+        background: var(--rs-password-strength-meter-color-low);
+      }
+
+      &:last-child {
+        background: var(--rs-password-strength-meter-color-high);
+      }
+    }
+  }
+}

package/Rate/styles/index.css

@@ -16,6 +16,7 @@
   --rs-font-size-2xl: 1.5rem;
   --rs-font-size-3xl: 1.875rem;
   --rs-font-size-4xl: 2.25rem;
+  --rs-font-size-5xl: 3rem;
   --rs-spacing: 0.25rem;
 }
 :root,
@@ -31,7 +32,7 @@
   --rs-blue-500: #2196f3;
   --rs-violet-500: #673ab7;
   --rs-rate-symbol: var(--rs-gray-600);
-  --rs-rate-symbol-checked: var(--rs-blue-500);
+  --rs-rate-color: var(--rs-blue-500);
 }
 .rs-theme-dark {
   --rs-gray-100: #cbced4;
@@ -45,7 +46,7 @@
   --rs-blue-500: #1499ef;
   --rs-violet-500: #673ab7;
   --rs-rate-symbol: var(--rs-gray-600);
-  --rs-rate-symbol-checked: var(--rs-yellow-500);
+  --rs-rate-color: var(--rs-yellow-500);
 }
 .rs-theme-high-contrast {
   --rs-gray-100: #cbced4;
@@ -59,17 +60,20 @@
   --rs-blue-500: #1499ef;
   --rs-violet-500: #673ab7;
   --rs-rate-symbol: var(--rs-gray-100);
-  --rs-rate-symbol-checked: var(--rs-primary-500);
+  --rs-rate-color: var(--rs-primary-500);
 }
 .rs-rate {
-  --rate-font-size-xs: var(--rs-font-size-lg);
-  --rate-font-size-sm: var(--rs-font-size-2xl);
-  --rate-font-size-md: var(--rs-font-size-3xl);
-  --rate-font-size-lg: var(--rs-font-size-4xl);
+  --rs-rate-size-xs: var(--rs-font-size-lg);
+  --rs-rate-size-sm: var(--rs-font-size-2xl);
+  --rs-rate-size-md: var(--rs-font-size-3xl);
+  --rs-rate-size-lg: var(--rs-font-size-4xl);
+  --rs-rate-size-xl: var(--rs-font-size-5xl);
+  --rs-rate-size: var(--rs-rate-size-md);
+  --rs-rate-before-size: 50%;
   position: relative;
   display: inline-flex;
-  color: var(--rs-rate-symbol-checked);
-  font-size: var(--rate-font-size, var(--rate-font-size-md));
+  color: var(--rs-rate-color);
+  font-size: var(--rs-rate-size);
   list-style: none;
   vertical-align: middle;
   margin: 0;
@@ -83,12 +87,14 @@
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
-  width: var(--rate-font-size);
-  height: var(--rate-font-size);
+  width: -moz-max-content;
+  width: max-content;
+  height: -moz-max-content;
+  height: max-content;
 }
 .rs-rate-character-before {
   position: absolute;
-  width: 50%;
+  width: var(--rs-rate-before-size);
   height: 100%;
   overflow: hidden;
   opacity: 0;
@@ -110,76 +116,84 @@
 .rs-rate-character-after > .rs-icon {
   font-size: inherit;
 }
-.rs-rate-character-half .rs-rate-character-before {
+.rs-rate-character:where([data-status='half']) .rs-rate-character-before,
+.rs-rate-character:where([data-status='frac']) .rs-rate-character-before {
   opacity: 1;
   filter: none;
 }
-.rs-rate-character-full .rs-rate-character-after {
+.rs-rate-character:where([data-status='full']) .rs-rate-character-after {
   color: inherit;
   filter: none;
 }
-.rs-rate-character-full .rs-rate-character-after > .rs-icon {
+.rs-rate-character:where([data-status='full']) .rs-rate-character-after > .rs-icon {
   fill: currentColor;
 }
 .rs-rate-character-vertical {
   width: 100%;
-  height: 50%;
+  height: var(--rs-rate-before-size);
   flex-direction: column-reverse;
   bottom: 0;
 }
 .rs-rate-character .rs-icon,
 .rs-rate-character svg {
-  position: absolute;
   height: 1em;
   width: 1em;
 }
-.rs-rate:not(.rs-rate-readonly).rs-rate:not(.rs-rate-disabled) .rs-rate-character:hover {
+.rs-rate-character-before .rs-icon,
+.rs-rate-character-before svg {
+  position: absolute;
+}
+.rs-rate-character:hover {
   transform: scale(1.1);
 }
-.rs-rate:not(.rs-rate-readonly).rs-rate:not(.rs-rate-disabled) .rs-rate-character:active {
+.rs-rate-character:active {
   transform: scale(1);
 }
-.rs-rate-disabled {
+.rs-rate:where([data-disabled='true']) {
+  cursor: not-allowed;
   opacity: 0.5;
   outline: none;
 }
-.rs-rate-disabled .rs-rate-character {
-  cursor: not-allowed;
+.rs-rate:where([data-disabled='true']) .rs-rate-character {
+  pointer-events: none;
 }
-.rs-rate-readonly .rs-rate-character {
+.rs-rate:where([data-readonly='true']) .rs-rate-character {
   cursor: default;
   pointer-events: none;
 }
+.rs-rate.rs-rate-xl {
+  --rs-rate-size: var(--rs-rate-size-xl);
+}
 .rs-rate.rs-rate-lg {
-  --rate-font-size: var(--rate-font-size-lg);
+  --rs-rate-size: var(--rs-rate-size-lg);
 }
 .rs-rate.rs-rate-md {
-  --rate-font-size: var(--rate-font-size-md);
+  --rs-rate-size: var(--rs-rate-size-md);
 }
 .rs-rate.rs-rate-sm {
-  --rate-font-size: var(--rate-font-size-sm);
+  --rs-rate-size: var(--rs-rate-size-sm);
 }
 .rs-rate.rs-rate-xs {
-  --rate-font-size: var(--rate-font-size-xs);
+  --rs-rate-size: var(--rs-rate-size-xs);
 }
 .rs-rate.rs-rate-red {
-  --rs-rate-symbol-checked: var(--rs-red-500);
+  --rs-rate-color: var(--rs-red-500);
 }
 .rs-rate.rs-rate-orange {
-  --rs-rate-symbol-checked: var(--rs-orange-500);
+  --rs-rate-color: var(--rs-orange-500);
 }
 .rs-rate.rs-rate-yellow {
-  --rs-rate-symbol-checked: var(--rs-yellow-500);
+  --rs-rate-color: var(--rs-yellow-500);
 }
 .rs-rate.rs-rate-green {
-  --rs-rate-symbol-checked: var(--rs-green-500);
+  --rs-rate-color: var(--rs-green-500);
 }
 .rs-rate.rs-rate-cyan {
-  --rs-rate-symbol-checked: var(--rs-cyan-500);
+  --rs-rate-color: var(--rs-cyan-500);
 }
 .rs-rate.rs-rate-blue {
-  --rs-rate-symbol-checked: var(--rs-blue-500);
+  --rs-rate-color: var(--rs-blue-500);
 }
 .rs-rate.rs-rate-violet {
-  --rs-rate-symbol-checked: var(--rs-violet-500);
+  --rs-rate-color: var(--rs-violet-500);
 }

package/Rate/styles/index.less

@@ -4,15 +4,18 @@
 // ----------------------
 
 .rs-rate {
-  --rate-font-size-xs: var(--rs-font-size-lg);
-  --rate-font-size-sm: var(--rs-font-size-2xl);
-  --rate-font-size-md: var(--rs-font-size-3xl);
-  --rate-font-size-lg: var(--rs-font-size-4xl);
+  --rs-rate-size-xs: var(--rs-font-size-lg);
+  --rs-rate-size-sm: var(--rs-font-size-2xl);
+  --rs-rate-size-md: var(--rs-font-size-3xl);
+  --rs-rate-size-lg: var(--rs-font-size-4xl);
+  --rs-rate-size-xl: var(--rs-font-size-5xl);
+  --rs-rate-size: var(--rs-rate-size-md);
+  --rs-rate-before-size: 50%;
 
   position: relative;
   display: inline-flex;
-  color: var(--rs-rate-symbol-checked);
-  font-size: var(--rate-font-size, var(--rate-font-size-md));
+  color: var(--rs-rate-color);
+  font-size: var(--rs-rate-size);
   list-style: none;
   vertical-align: middle;
   margin: 0;
@@ -24,12 +27,12 @@
     cursor: pointer;
     outline: none;
     user-select: none;
-    width: var(--rate-font-size);
-    height: var(--rate-font-size);
+    width: max-content;
+    height: max-content;
 
     &-before {
       position: absolute;
-      width: 50%;
+      width: var(--rs-rate-before-size);
       height: 100%;
       overflow: hidden;
       opacity: 0;
@@ -57,12 +60,13 @@
       }
     }
 
-    &-half &-before {
+    &:where([data-status='half']) &-before,
+    &:where([data-status='frac']) &-before {
       opacity: 1;
       filter: none;
     }
 
-    &-full &-after {
+    &:where([data-status='full']) &-after {
       color: inherit;
       filter: none;
 
@@ -73,20 +77,26 @@
 
     &-vertical {
       width: 100%;
-      height: 50%;
+      height: var(--rs-rate-before-size);
       flex-direction: column-reverse;
       bottom: 0;
     }
 
     .rs-icon,
     svg {
-      position: absolute;
       height: 1em;
       width: 1em;
     }
+
+    &-before {
+      .rs-icon,
+      svg {
+        position: absolute;
+      }
+    }
   }
 
-  &:not(&-readonly)&:not(&-disabled) &-character {
+  &-character {
     &:hover {
       transform: scale(1.1);
     }
@@ -96,33 +106,34 @@
     }
   }
 
-  &-disabled {
+  &:where([data-disabled='true']) {
+    cursor: @cursor-disabled;
     opacity: 0.5;
     outline: none;
   }
 
-  &-disabled &-character {
-    cursor: @cursor-disabled;
+  &:where([data-disabled='true']) &-character {
+    pointer-events: none;
   }
 
-  &-readonly &-character {
+  &:where([data-readonly='true']) &-character {
     cursor: default;
     pointer-events: none;
   }
 
   // Size variants
-  @sizes: lg, md, sm, xs;
+  @sizes: xl, lg, md, sm, xs;
 
   each(@sizes, .(@size) {
     &&-@{size} {
-      --rate-font-size: var(~'--rate-font-size-@{size}');
+      --rs-rate-size: var(~'--rs-rate-size-@{size}');
     }
   });
 
   // Color variants
   each(@spectrum, .(@color) {
     &&-@{color} {
-      --rs-rate-symbol-checked: var(~'--rs-@{color}-500');
+      --rs-rate-color: var(~'--rs-@{color}-500');
     }
   });
 }