rsuite 6.0.0-canary-2025032014 → 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);
@@ -1604,7 +1597,7 @@ textarea.rs-input {
 .rs-input-group .rs-input-number,
 .rs-input-group .rs-input-group-addon,
 .rs-input-group .rs-input-group-btn,
-.rs-input-group .rs-picker-date .rs-picker-toggle {
+.rs-input-group .rs-picker[data-picker='date'] .rs-picker-toggle {
   border: none;
   border-radius: var(--rs-radius-none);
   outline: none;
@@ -1760,22 +1753,22 @@ textarea.rs-input {
   stroke: var(--rs-close-button-hover-color);
   stroke-width: 1;
 }
-.rs-picker-subtle .picker-subtle-toggle {
+.rs-picker[data-variant='subtle'] .picker-subtle-toggle {
   --rs-picker-toggle-border-width: 0px;
   position: relative;
   z-index: 5;
 }
-.rs-picker-subtle.rs-picker-disabled .picker-subtle-toggle {
+.rs-picker[data-variant='subtle'][data-disabled='true'] .picker-subtle-toggle {
   cursor: not-allowed;
 }
-.rs-picker-subtle.rs-picker-disabled .picker-subtle-toggle:hover,
-.rs-picker-subtle.rs-picker-disabled .picker-subtle-toggle:focus,
-.rs-picker-subtle.rs-picker-disabled .picker-subtle-toggle:active {
+.rs-picker[data-variant='subtle'][data-disabled='true'] .picker-subtle-toggle:hover,
+.rs-picker[data-variant='subtle'][data-disabled='true'] .picker-subtle-toggle:focus,
+.rs-picker[data-variant='subtle'][data-disabled='true'] .picker-subtle-toggle:active {
   background: none;
 }
-.rs-picker-subtle.rs-picker-disabled .picker-subtle-toggle:hover::after,
-.rs-picker-subtle.rs-picker-disabled .picker-subtle-toggle:focus::after,
-.rs-picker-subtle.rs-picker-disabled .picker-subtle-toggle:active::after {
+.rs-picker[data-variant='subtle'][data-disabled='true'] .picker-subtle-toggle:hover::after,
+.rs-picker[data-variant='subtle'][data-disabled='true'] .picker-subtle-toggle:focus::after,
+.rs-picker[data-variant='subtle'][data-disabled='true'] .picker-subtle-toggle:active::after {
   display: none;
 }
 .rs-picker {
@@ -1783,25 +1776,23 @@ textarea.rs-input {
   --rs-picker-loader-size: 20px;
   --rs-picker-toggle-border-width: 1px;
   --rs-picker-toggle-bg: var(--rs-input-bg);
-}
-.rs-picker-toggle-wrapper {
   display: inline-block;
   vertical-align: middle;
   max-width: 100%;
 }
-.rs-picker-block {
+.rs-picker[data-block='true'] {
   display: block;
   width: 100%;
 }
-.rs-picker-disabled {
+.rs-picker[data-disabled='true'] {
   cursor: not-allowed;
 }
-.rs-picker-disabled .rs-picker-toggle-value,
-.rs-picker-disabled .rs-picker-toggle-indicator,
-.rs-picker-disabled .rs-picker-tag-list .rs-tag {
+.rs-picker[data-disabled='true'] .rs-picker-toggle-value,
+.rs-picker[data-disabled='true'] .rs-picker-toggle-indicator,
+.rs-picker[data-disabled='true'] .rs-picker-tag-list .rs-tag {
   color: var(--rs-text-disabled) !important;
 }
-.rs-picker-disabled .rs-picker-value-count {
+.rs-picker[data-disabled='true'] .rs-picker-value-count {
   opacity: 0.5;
 }
 .rs-picker-toggle .rs-picker-toggle-placeholder {
@@ -1811,10 +1802,6 @@ textarea.rs-input {
 .rs-picker-has-value .rs-picker-toggle .rs-picker-toggle-value {
   color: var(--rs-picker-value);
 }
-.rs-picker-countable .rs-picker-toggle-value {
-  display: flex;
-  align-items: center;
-}
 .rs-picker-value-list {
   flex: 0 1 auto;
   overflow: hidden;
@@ -1825,11 +1812,12 @@ textarea.rs-input {
   margin-inline: var(--rs-picker-value-count-margin);
   background-color: var(--rs-picker-count-bg);
   color: var(--rs-picker-count-text);
+  flex-shrink: 0;
 }
 .rs-picker-value-separator {
   margin: 0 var(--rs-spacing) 0 0;
 }
-.rs-picker:not(.rs-picker-disabled):hover,
+.rs-picker:not([data-disabled='true']):hover,
 .rs-picker.rs-picker-focused {
   border-color: var(--rs-input-focus-border);
 }
@@ -1865,6 +1853,7 @@ textarea.rs-input {
   --rs-picker-popup-shadow: var(--rs-shadow-md);
   --rs-picker-popup-position-x: var(--rs-position-x);
   --rs-picker-popup-position-y: var(--rs-position-y);
+  --rs-picker-min-width: 0;
   position: absolute;
   top: var(--rs-picker-popup-position-y);
   left: var(--rs-picker-popup-position-x) /* rtl:ignore */;
@@ -1878,6 +1867,7 @@ textarea.rs-input {
   background-color: var(--rs-bg-overlay);
   box-shadow: var(--rs-picker-popup-shadow);
   padding-block: var(--rs-picker-popup-border-radius);
+  min-width: var(--rs-picker-min-width);
 }
 .rs-theme-high-contrast .rs-picker-popup {
   border: 1px solid var(--rs-border-primary);
@@ -1903,37 +1893,74 @@ textarea.rs-input {
   color: var(--rs-text-secondary);
   cursor: default;
 }
-.rs-picker-default .rs-picker-toggle {
+.rs-picker-popup .rs-picker-listbox {
+  max-height: var(--rs-picker-listbox-max-height);
+}
+.rs-picker-popup[data-breakpoint='xs'] {
+  min-width: unset;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+}
+.rs-picker-popup[data-breakpoint='xs'] .rs-picker-listbox {
+  height: unset;
+  max-height: unset;
+}
+.rs-picker-popup[data-breakpoint='xs'] .rs-tree,
+.rs-picker-popup[data-breakpoint='xs'] .rs-check-tree {
+  display: flex;
+  flex-direction: column;
+}
+.rs-picker-popup[data-breakpoint='xs'] .rs-tree-view,
+.rs-picker-popup[data-breakpoint='xs'] .rs-check-tree-view {
+  max-height: unset;
+  flex: 1 1 auto;
+}
+.rs-picker-popup[data-breakpoint='xs'] .rs-calendar-table {
+  width: 100%;
+}
+.rs-picker-popup[data-breakpoint='xs'] .rs-picker-box {
+  width: 100%;
+  height: 100%;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+.rs-picker-popup[data-breakpoint='xs'].rs-picker-popup-date .rs-calendar,
+.rs-picker-popup[data-breakpoint='xs'] .rs-picker-daterange-panel-only-time .rs-calendar {
+  height: 348px;
+}
+[data-variant='default'] .rs-picker-toggle {
   color: var(--rs-text-primary);
   border: var(--rs-picker-toggle-border-width) solid var(--rs-border-primary);
 }
-.rs-picker-disabled .rs-picker-toggle {
+[data-disabled='true'] .rs-picker-toggle {
   cursor: not-allowed;
 }
-.rs-picker-toggle .rs-picker-default:not(.rs-picker-disabled):hover,
-.rs-picker-toggle .rs-picker-default:not(.rs-picker-disabled):focus {
+.rs-picker-toggle [data-variant='default']:not([data-disabled='true']):hover,
+.rs-picker-toggle [data-variant='default']:not([data-disabled='true']):focus {
   border-color: var(--rs-input-focus-border);
 }
-.rs-picker-subtle .rs-picker-toggle {
+.rs-picker[data-variant='subtle'] .rs-picker-toggle {
   --rs-picker-toggle-border-width: 0px;
   position: relative;
   z-index: 5;
 }
-.rs-picker-subtle.rs-picker-disabled .rs-picker-toggle {
+.rs-picker[data-variant='subtle'][data-disabled='true'] .rs-picker-toggle {
   cursor: not-allowed;
 }
-.rs-picker-subtle.rs-picker-disabled .rs-picker-toggle:hover,
-.rs-picker-subtle.rs-picker-disabled .rs-picker-toggle:focus,
-.rs-picker-subtle.rs-picker-disabled .rs-picker-toggle:active {
+.rs-picker[data-variant='subtle'][data-disabled='true'] .rs-picker-toggle:hover,
+.rs-picker[data-variant='subtle'][data-disabled='true'] .rs-picker-toggle:focus,
+.rs-picker[data-variant='subtle'][data-disabled='true'] .rs-picker-toggle:active {
   background: none;
 }
-.rs-picker-subtle.rs-picker-disabled .rs-picker-toggle:hover::after,
-.rs-picker-subtle.rs-picker-disabled .rs-picker-toggle:focus::after,
-.rs-picker-subtle.rs-picker-disabled .rs-picker-toggle:active::after {
+.rs-picker[data-variant='subtle'][data-disabled='true'] .rs-picker-toggle:hover::after,
+.rs-picker[data-variant='subtle'][data-disabled='true'] .rs-picker-toggle:focus::after,
+.rs-picker[data-variant='subtle'][data-disabled='true'] .rs-picker-toggle:active::after {
   display: none;
 }
 .rs-picker-toggle-label {
-  color: var(--rs-text-primary);
+  color: var(--rs-text-secondary);
 }
 .rs-picker-toggle .rs-picker-toggle-stack {
   flex: 1 1 auto;
@@ -1972,44 +1999,67 @@ textarea.rs-input {
 .rs-picker-toggle-read-only {
   opacity: 0;
 }
-.rs-picker-default .rs-picker-toggle {
+.rs-picker-toggle .rs-picker[data-variant='default'],
+.rs-picker-toggle {
   transition: border-color ease-in-out 0.15s;
 }
-.rs-theme-high-contrast .rs-picker-default .rs-picker-toggle {
+.rs-theme-high-contrast .rs-picker-toggle .rs-picker[data-variant='default'],
+.rs-theme-high-contrast .rs-picker-toggle {
   transition: none;
 }
-.rs-picker-default:not(.rs-picker-disabled) .rs-picker-toggle:hover,
-.rs-picker-default:not(.rs-picker-disabled) .rs-picker-toggle:focus,
-.rs-picker-default:not(.rs-picker-disabled) .rs-picker-toggle-active {
+.rs-picker-toggle .rs-picker[data-variant='default']:hover,
+:not([data-disabled='true']) .rs-picker-toggle:hover,
+.rs-picker-toggle .rs-picker[data-variant='default']:focus,
+:not([data-disabled='true']) .rs-picker-toggle:focus,
+.rs-picker-toggle .rs-picker[data-variant='default']-active,
+:not([data-disabled='true']) .rs-picker-toggle-active {
   border-color: var(--rs-input-focus-border);
 }
-.rs-picker-subtle .rs-picker-toggle {
+.rs-picker[data-variant='subtle'] .rs-picker-toggle {
   color: var(--rs-btn-subtle-text);
   background-color: transparent;
   transition: none;
 }
-.rs-picker-subtle .rs-picker-toggle:hover {
+.rs-picker[data-variant='subtle'] .rs-picker-toggle:hover {
   color: var(--rs-btn-subtle-hover-text);
   background-color: var(--rs-btn-subtle-hover-bg);
 }
-.rs-picker-subtle .rs-picker-toggle:active,
-.rs-picker-subtle .rs-picker-toggle.rs-btn-active {
+.rs-picker[data-variant='subtle'] .rs-picker-toggle:active,
+.rs-picker[data-variant='subtle'] .rs-picker-toggle.rs-btn-active {
   color: var(--rs-btn-subtle-active-text);
   background-color: var(--rs-btn-subtle-active-bg);
 }
-.rs-picker-subtle .rs-picker-toggle:disabled,
-.rs-picker-subtle .rs-picker-toggle.rs-btn-disabled {
+.rs-picker[data-variant='subtle'] .rs-picker-toggle:disabled,
+.rs-picker[data-variant='subtle'] .rs-picker-toggle.rs-btn-disabled {
   color: var(--rs-btn-subtle-disabled-text);
   background: none;
 }
-.rs-theme-high-contrast .rs-picker-subtle .rs-picker-toggle:disabled,
-.rs-theme-high-contrast .rs-picker-subtle .rs-picker-toggle.rs-btn-disabled {
+.rs-theme-high-contrast .rs-picker[data-variant='subtle'] .rs-picker-toggle:disabled,
+.rs-theme-high-contrast .rs-picker[data-variant='subtle'] .rs-picker-toggle.rs-btn-disabled {
   border-color: var(--rs-btn-default-disabled-boreder-color);
 }
-.rs-picker-subtle .rs-picker-toggle-active {
+.rs-picker[data-variant='subtle'] .rs-picker-toggle-active {
   background-color: var(--rs-btn-subtle-hover-bg);
   color: var(--rs-btn-subtle-hover-text);
 }
+.rs-picker-toggle[data-size='lg'] .rs-picker-clean .rs-icon {
+  width: 16px;
+  height: 16px;
+}
+.rs-picker-toggle[data-size='sm'] .rs-picker-clean {
+  height: 18px;
+}
+.rs-picker-toggle[data-size='xs'] .rs-picker-clean {
+  height: 18px;
+}
+.rs-picker-toggle[data-size='xs'] .rs-picker-clean .rs-icon {
+  width: 12px;
+  height: 12px;
+}
+.rs-picker-toggle[data-countable='true'] .rs-picker-toggle-value {
+  display: flex;
+  align-items: center;
+}
 .rs-picker-toggle.rs-btn {
   text-align: start;
   display: inline-flex;
@@ -2043,18 +2093,18 @@ textarea.rs-input {
   font-size: var(--rs-font-size-md);
   color: var(--rs-text-secondary);
 }
-.rs-picker-default .rs-btn,
+.rs-picker[data-variant='default'] .rs-btn,
 .rs-picker-input .rs-btn,
-.rs-picker-default .rs-picker-toggle,
+.rs-picker[data-variant='default'] .rs-picker-toggle,
 .rs-picker-input .rs-picker-toggle {
   background-color: var(--rs-picker-toggle-bg);
 }
-.rs-picker-default.rs-picker-disabled,
-.rs-picker-input.rs-picker-disabled {
+.rs-picker[data-variant='default'][data-disabled='true'],
+.rs-picker-input[data-disabled='true'] {
   --rs-picker-toggle-bg: var(--rs-input-disabled-bg);
 }
-.rs-picker-default.rs-picker-disabled .rs-input-group,
-.rs-picker-input.rs-picker-disabled .rs-input-group {
+.rs-picker[data-variant='default'][data-disabled='true'] .rs-input-group,
+.rs-picker-input[data-disabled='true'] .rs-input-group {
   pointer-events: none;
 }
 .rs-check-item {

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/README.md

@@ -7,7 +7,7 @@
 English | [中文版][readm-cn]
 
 [![npm][npm-svg]][npm-home]
-[![GitHub Actions][actions-svg]][actions-home]
+[![GitHub Actions][nodejs-ci-svg]][nodejs-ci]
 [![npm bundle size][npm-bundle-size-img]][npm-bundle-size]
 [![codecov][codecov-img]][codecov]
 [![Discord][discord-svg]][discord-invite]
@@ -146,8 +146,8 @@ React Suite is [MIT licensed][license].
 [npm-home]: https://www.npmjs.com/package/rsuite
 [npm-bundle-size-img]: https://badgen.net/bundlephobia/minzip/rsuite?icon=npm
 [npm-bundle-size]: https://bundlephobia.com/package/rsuite
-[actions-svg]: https://github.com/rsuite/rsuite/workflows/Node.js%20CI/badge.svg?branch=main
-[actions-home]: https://github.com/rsuite/rsuite/actions?query=branch%3Amain+workflow%3A%22Node.js+CI%22
+[nodejs-ci-svg]: https://github.com/rsuite/rsuite/workflows/Node.js%20CI/badge.svg
+[nodejs-ci]: https://github.com/rsuite/rsuite/actions/workflows/nodejs-ci.yml?query=branch%3Amain+workflow%3A%22Node.js+CI%22
 [discord-svg]: https://img.shields.io/badge/Discord-Join%20chat%20%E2%86%92-738bd7.svg
 [discord-invite]: https://discord.gg/R8mnjwh
 [release-notes]: https://github.com/rsuite/rsuite/releases

package/RadioGroup/styles/index.css

@@ -73,6 +73,7 @@
   --rs-radio-group-picker-border-radius: var(--rs-radius-md);
   display: inline-flex;
   align-items: center;
+  flex-wrap: wrap;
   color: var(--rs-text-primary);
   border: 1px solid var(--rs-border-primary);
   border-radius: var(--rs-radio-group-picker-border-radius);

package/RadioGroup/styles/index.less

@@ -25,6 +25,7 @@
 
   display: inline-flex;
   align-items: center;
+  flex-wrap: wrap;
   color: var(--rs-text-primary);
   border: @radio-group-border-width solid var(--rs-border-primary);
   border-radius: var(--rs-radio-group-picker-border-radius);