rsuite 6.0.0-canary-20250403 → 6.0.0-canary-20250424

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/PinInput/package.json

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

package/PinInput/styles/index.css

@@ -0,0 +1,212 @@
+: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 {
+  border-color: var(--rs-input-focus-border);
+}
+.rs-input:focus-visible {
+  outline: 2px solid var(--rs-color-focus-ring);
+  outline-offset: -1px;
+}
+.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);
+}
+/**
+  * 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 2px 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 2px 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);
+}
+.rs-pin-input {
+  --rs-pin-input-size-lg: 42px;
+  --rs-pin-input-size-md: 36px;
+  --rs-pin-input-size-sm: 30px;
+  --rs-pin-input-size-xs: 24px;
+  --rs-pin-input-size: var(--rs-pin-input-size-md);
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+}
+.rs-pin-input-segment {
+  text-align: center;
+  width: var(--rs-pin-input-size);
+  caret-color: transparent;
+}
+.rs-pin-input-segment.rs-input-lg {
+  --rs-pin-input-size: var(--rs-pin-input-size-lg);
+}
+.rs-pin-input-segment.rs-input-md {
+  --rs-pin-input-size: var(--rs-pin-input-size-md);
+}
+.rs-pin-input-segment.rs-input-sm {
+  --rs-pin-input-size: var(--rs-pin-input-size-sm);
+}
+.rs-pin-input-segment.rs-input-xs {
+  --rs-pin-input-size: var(--rs-pin-input-size-xs);
+}
+.rs-pin-input-masked {
+  font-family: monospace;
+}
+.rs-pin-input-attached .rs-pin-input-segment:not(:first-child) {
+  margin-left: -1px;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.rs-pin-input-attached .rs-pin-input-segment:not(:last-child) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.rs-pin-input-attached .rs-pin-input-segment:focus {
+  z-index: 1;
+  position: relative;
+}

package/PinInput/styles/index.less

@@ -0,0 +1,66 @@
+@import '../../Input/styles/index.less';
+@import '../../styles/common';
+
+.rs-pin-input {
+  --rs-pin-input-size-lg: 42px;
+  --rs-pin-input-size-md: 36px;
+  --rs-pin-input-size-sm: 30px;
+  --rs-pin-input-size-xs: 24px;
+
+  --rs-pin-input-size: var(--rs-pin-input-size-md);
+
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+
+  // Individual segment styling
+  &-segment {
+    text-align: center;
+    width: var(--rs-pin-input-size);
+    caret-color: transparent;
+
+    // Size variants
+    &.rs-input-lg {
+      --rs-pin-input-size: var(--rs-pin-input-size-lg);
+    }
+
+    &.rs-input-md {
+      --rs-pin-input-size: var(--rs-pin-input-size-md);
+    }
+
+    &.rs-input-sm {
+      --rs-pin-input-size: var(--rs-pin-input-size-sm);
+    }
+
+    &.rs-input-xs {
+      --rs-pin-input-size: var(--rs-pin-input-size-xs);
+    }
+  }
+
+  // Masked input styling
+  &-masked {
+    font-family: monospace;
+  }
+
+  // Attached segments
+  &-attached {
+    .rs-pin-input-segment {
+      &:not(:first-child) {
+        margin-left: -1px;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+
+      &:not(:last-child) {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+
+      // Focus state for attached inputs
+      &:focus {
+        z-index: 1;
+        position: relative;
+      }
+    }
+  }
+}

package/Radio/styles/index.css

@@ -25,7 +25,6 @@
   --rs-gray-500: #939393;
   --rs-gray-600: #717273;
   --rs-gray-800: #343434;
-  --rs-gray-900: #121212;
   --rs-primary-500: #3498ff;
   --rs-red-500: #f44336;
   --rs-orange-500: #fa8900;
@@ -35,7 +34,7 @@
   --rs-blue-500: #2196f3;
   --rs-violet-500: #673ab7;
   --rs-text-disabled: var(--rs-gray-600);
-  --rs-state-focus-shadow: 0 0 0 3px rgb(from var(--rs-primary-500) r g b / 25%);
+  --rs-color-focus-ring: rgb(from var(--rs-primary-500) r g b / 25%);
   --rs-checkbox-checked-bg: var(--rs-primary-500);
   --rs-radio-marker: #fff;
   --rs-radio-border: var(--rs-gray-300);
@@ -45,7 +44,7 @@
 @supports not (color: rgb(from white r g b)) {
   :root,
   .rs-theme-light {
-    --rs-state-focus-shadow: 0 0 0 3px rgba(52, 152, 255, 0.25);
+    --rs-color-focus-ring: rgba(52, 152, 255, 0.25);
   }
 }
 .rs-theme-dark {
@@ -57,7 +56,6 @@
   --rs-gray-500: #5c6066;
   --rs-gray-600: #3c3f43;
   --rs-gray-800: #1a1d24;
-  --rs-gray-900: #0f131a;
   --rs-primary-500: #34c3ff;
   --rs-red-500: #f04f43;
   --rs-orange-500: #ff9800;
@@ -67,7 +65,7 @@
   --rs-blue-500: #1499ef;
   --rs-violet-500: #673ab7;
   --rs-text-disabled: var(--rs-gray-400);
-  --rs-state-focus-shadow: 0 0 0 3px rgb(from var(--rs-gray-500) r g b / 25%);
+  --rs-color-focus-ring: 0 0 0 2px rgb(from var(--rs-gray-500) r g b / 25%);
   --rs-checkbox-checked-bg: var(--rs-primary-500);
   --rs-radio-marker: var(--rs-gray-800);
   --rs-radio-border: var(--rs-gray-400);
@@ -76,7 +74,7 @@
 }
 @supports not (color: rgb(from white r g b)) {
   .rs-theme-dark {
-    --rs-state-focus-shadow: 0 0 0 3px rgba(52, 195, 255, 0.25);
+    --rs-color-focus-ring: 0 0 0 2px rgba(52, 195, 255, 0.25);
   }
 }
 .rs-theme-high-contrast {
@@ -88,7 +86,6 @@
   --rs-gray-500: #5c6066;
   --rs-gray-600: #3c3f43;
   --rs-gray-800: #1a1d24;
-  --rs-gray-900: #0f131a;
   --rs-primary-500: #ffff00;
   --rs-red-500: #bd1732;
   --rs-orange-500: #ff9800;
@@ -98,7 +95,7 @@
   --rs-blue-500: #1499ef;
   --rs-violet-500: #673ab7;
   --rs-text-disabled: var(--rs-gray-400);
-  --rs-state-focus-shadow: 0 0 0 3px var(--rs-gray-900), 0 0 0 5px var(--rs-gray-0);
+  --rs-color-focus-ring: var(--rs-gray-0);
   --rs-checkbox-checked-bg: var(--rs-primary-500);
   --rs-radio-marker: var(--rs-gray-800);
   --rs-radio-border: var(--rs-gray-100);
@@ -128,7 +125,8 @@
   color: var(--rs-text-disabled);
 }
 .rs-radio [type='radio']:focus ~ .rs-radio-inner::before {
-  box-shadow: var(--rs-state-focus-shadow);
+  outline: 2px solid var(--rs-color-focus-ring);
+  outline-offset: -1px;
 }
 .rs-radio-checker {
   position: relative;

package/Radio/styles/index.less

@@ -9,7 +9,7 @@
   .radio-checkbox-common();
 
   [type='radio']:focus ~ .rs-radio-inner::before {
-    box-shadow: var(--rs-state-focus-shadow);
+    .focus-ring();
   }
 }
 

package/RangeSlider/styles/index.css

@@ -392,6 +392,8 @@
 .rs-slider-graduator ol,
 .rs-slider-graduator li {
   list-style: none;
+  margin: 0;
+  padding: 0;
 }
 .rs-slider-graduator > ol {
   display: flex;

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);
 }