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

package/InputPicker/styles/index.less

@@ -1,46 +1,43 @@
 @import '../../styles/common.less';
-@import '../../Form/styles/mixin.less';
 @import '../../Input/styles/index.less';
 @import '../../SelectPicker/styles/index.less';
 @import '../../internals/Picker/styles/index.less';
 @import './mixin.less';
 
 .rs-picker-input {
+
+  --rs-picker-textbox-margin-inline: var(--rs-picker-input-height);
+
   position: relative;
   border: 1px solid var(--rs-border-primary);
-  border-radius: @border-radius;
+  border-radius: var(--rs-radius-md);
   transition: @picker-transition;
   background-color: var(--rs-input-bg);
+  overflow: hidden;
 
   .rs-picker-toggle {
     border: none !important;
-    background: transparent !important;
-    height: @input-picker-toggle-content-height;
+    height: var(--rs-picker-input-height);
     cursor: text;
-
-    &-clean,
-    &-caret {
-      top: @padding-y - @picker-default-toggle-border-width;
-    }
-
-    .rs-ripple-pond {
-      display: none;
-    }
   }
 
   &:not(.rs-picker-disabled) .rs-picker-toggle {
     position: absolute !important;
   }
 
-  .input-picker-input-sizes();
-}
-
-.rs-picker-textbox {
-  margin-right: @dropdown-toggle-padding-right;
-  min-height: 34px;
+  @sizes: xs, sm, md, lg;
+  each(@sizes, .(@size) {
+    &.rs-picker-input-@{size} {
+      --rs-picker-input-height: calc(var(~'--rs-btn-size-@{size}') - 2px);
+      --rs-picker-search-input-font-size: var(~'--rs-input-font-size-@{size}');
+      --rs-picker-search-input-line-height: var(~'--rs-input-line-height-@{size}');
+      --rs-picker-search-input-padding-block: var(~'--rs-input-padding-block-@{size}');
+      --rs-picker-search-input-padding-inline: var(~'--rs-input-padding-inline-@{size}');
+    }
+  });
 
-  .rs-picker-cleanable & {
-    margin-right: (@dropdown-toggle-padding-right + @picker-toggle-clean-width);
+  .rs-picker-textbox {
+    margin-inline-end: var(--rs-picker-textbox-margin-inline);
   }
 }
 
@@ -49,58 +46,19 @@
   width: 100%;
 
   &-input {
-    .input-md();
-
-    .rs-picker-tag & {
-      font-size: @font-size-base;
-      line-height: @line-height-base;
-      padding: @padding-y-xs @input-padding-x @padding-y-xs @padding-x -
-        @picker-default-toggle-border-width;
-
-      > input {
-        background: none;
-        outline: none;
-        border: none;
-        width: 100%;
-      }
-    }
-
+    font-size: var(--rs-picker-search-input-font-size);
+    line-height: var(--rs-picker-search-input-line-height);
+    padding-block: var(--rs-picker-search-input-padding-block);
+    padding-inline: var(--rs-picker-search-input-padding-inline);
     background: none;
     outline: none;
     border: none;
     width: 100%;
     position: relative;
-    padding-right: 0;
+    padding-inline-end: 0;
 
     .rs-picker-focused & {
       z-index: @zindex-picker-input;
     }
   }
 }
-
-// Input Picker Size
-// --------------------------------------------------
-.rs-picker-input-lg {
-  .rs-input-picker-size(@padding-y-lg - 1; @padding-x-lg; @font-size-large; @line-height-large);
-  .rs-picker-textbox {
-    min-height: 40px;
-  }
-}
-
-.rs-picker-input-md {
-  .rs-input-picker-size(@padding-y; @padding-x; @font-size-base; @line-height-base);
-}
-
-.rs-picker-input-sm {
-  .rs-input-picker-size(@padding-y-sm; @padding-x-sm; @font-size-base; @line-height-base);
-  .rs-picker-textbox {
-    min-height: 28px;
-  }
-}
-
-.rs-picker-input-xs {
-  .rs-input-picker-size(@padding-y-xs; @padding-x-xs; @font-size-extra-small; @line-height-extra-small);
-  .rs-picker-textbox {
-    min-height: 22px;
-  }
-}

package/Kbd/package.json

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

package/Kbd/styles/index.css

@@ -0,0 +1,108 @@
+/**
+  * 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-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --rs-font-size-2xs: 0.625rem;
+  --rs-font-size-xs: 0.75rem;
+  --rs-font-size-sm: 0.875rem;
+  --rs-font-size-md: 1rem;
+  --rs-radius-sm: 0.25rem;
+}
+:root,
+.rs-theme-light {
+  --rs-gray-50: #f7f7fa;
+  --rs-gray-200: #e5e5ea;
+  --rs-gray-600: #717273;
+  --rs-gray-700: #575757;
+  --rs-gray-800: #343434;
+  --rs-kbd-bg: var(--rs-gray-50);
+  --rs-kbd-text: var(--rs-gray-800);
+  --rs-kbd-border: var(--rs-gray-200);
+}
+.rs-theme-dark {
+  --rs-gray-50: #e9ebf0;
+  --rs-gray-200: #a4a9b3;
+  --rs-gray-600: #3c3f43;
+  --rs-gray-700: #292d33;
+  --rs-gray-800: #1a1d24;
+  --rs-kbd-bg: var(--rs-gray-600);
+  --rs-kbd-text: var(--rs-gray-50);
+  --rs-kbd-border: var(--rs-gray-700);
+}
+.rs-theme-high-contrast {
+  --rs-gray-50: #e9ebf0;
+  --rs-gray-200: #a4a9b3;
+  --rs-gray-600: #3c3f43;
+  --rs-gray-700: #292d33;
+  --rs-gray-800: #1a1d24;
+  --rs-kbd-bg: var(--rs-gray-600);
+  --rs-kbd-text: var(--rs-gray-50);
+  --rs-kbd-border: var(--rs-gray-700);
+}
+:root {
+  --rs-kbd-font-size-xs: var(--rs-font-size-2xs);
+  --rs-kbd-font-size-sm: var(--rs-font-size-xs);
+  --rs-kbd-font-size-md: var(--rs-font-size-sm);
+  --rs-kbd-font-size-lg: var(--rs-font-size-md);
+  --rs-kbd-letter-spacing-xs: 0.0025em;
+  --rs-kbd-letter-spacing-sm: 0em;
+  --rs-kbd-letter-spacing-md: 0em;
+  --rs-kbd-letter-spacing-lg: -0.0025em;
+  --rs-kbd-font-family: var(--rs-font-family-monospace);
+  --rs-kbd-font-size: var(--rs-kbd-font-size-md);
+  --rs-kbd-letter-spacing: var(--rs-kbd-letter-spacing-md);
+}
+.rs-kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  flex-shrink: 0;
+  white-space: nowrap;
+  word-spacing: -0.4em;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  border-radius: var(--rs-radius-sm);
+  line-height: 1.7em;
+  padding-inline-start: 0.5em;
+  padding-inline-end: 0.5em;
+  padding-bottom: 0.05em;
+  height: -moz-fit-content;
+  height: fit-content;
+  box-sizing: border-box;
+  background-color: var(--rs-kbd-bg);
+  border: solid 1px var(--rs-kbd-border);
+  box-shadow: inset 0 -1px 0 var(--rs-kbd-border);
+  color: var(--rs-kbd-text);
+  font-family: var(--rs-kbd-font-family);
+  font-size: var(--rs-kbd-font-size);
+  letter-spacing: var(--rs-kbd-letter-spacing);
+}
+.rs-kbd-lg {
+  --rs-kbd-font-size: var(--rs-kbd-font-size-lg);
+  --rs-kbd-letter-spacing: var(--rs-kbd-letter-spacing-lg);
+}
+.rs-kbd-md {
+  --rs-kbd-font-size: var(--rs-kbd-font-size-md);
+  --rs-kbd-letter-spacing: var(--rs-kbd-letter-spacing-md);
+}
+.rs-kbd-sm {
+  --rs-kbd-font-size: var(--rs-kbd-font-size-sm);
+  --rs-kbd-letter-spacing: var(--rs-kbd-letter-spacing-sm);
+}
+.rs-kbd-xs {
+  --rs-kbd-font-size: var(--rs-kbd-font-size-xs);
+  --rs-kbd-letter-spacing: var(--rs-kbd-letter-spacing-xs);
+}

package/Kbd/styles/index.less

@@ -0,0 +1,20 @@
+@import '../../styles/common.less';
+@import './variables.less';
+@import './mixin.less';
+
+// Kbd
+// -------------------------
+
+.rs-kbd {
+  .kbd();
+
+  // Size variants
+  @sizes: lg, md, sm, xs;
+
+  each(@sizes, .(@size) {
+    &-@{size} {
+      --rs-kbd-font-size: var(~'--rs-kbd-font-size-@{size}');
+      --rs-kbd-letter-spacing: var(~'--rs-kbd-letter-spacing-@{size}');
+    }
+  });
+}

package/Kbd/styles/mixin.less

@@ -0,0 +1,24 @@
+.kbd() {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  flex-shrink: 0;
+  white-space: nowrap;
+  word-spacing: -0.4em;
+  user-select: none;
+  border-radius: var(--rs-radius-sm);
+  line-height: 1.7em;
+  padding-inline-start: 0.5em;
+  padding-inline-end: 0.5em;
+  padding-bottom: 0.05em;
+  height: fit-content;
+  box-sizing: border-box;
+  background-color: var(--rs-kbd-bg);
+  border: solid 1px var(--rs-kbd-border);
+  box-shadow: inset 0 -1px 0 var(--rs-kbd-border);
+  color: var(--rs-kbd-text);
+  font-family: var(--rs-kbd-font-family);
+  font-size: var(--rs-kbd-font-size);
+  letter-spacing: var(--rs-kbd-letter-spacing);
+}

package/Kbd/styles/variables.less

@@ -0,0 +1,13 @@
+:root {
+  --rs-kbd-font-size-xs: var(--rs-font-size-2xs);
+  --rs-kbd-font-size-sm: var(--rs-font-size-xs);
+  --rs-kbd-font-size-md: var(--rs-font-size-sm);
+  --rs-kbd-font-size-lg: var(--rs-font-size-md);
+  --rs-kbd-letter-spacing-xs: 0.0025em;
+  --rs-kbd-letter-spacing-sm: 0em;
+  --rs-kbd-letter-spacing-md: 0em;
+  --rs-kbd-letter-spacing-lg: -0.0025em;
+  --rs-kbd-font-family: var(--rs-font-family-monospace);
+  --rs-kbd-font-size: var(--rs-kbd-font-size-md);
+  --rs-kbd-letter-spacing: var(--rs-kbd-letter-spacing-md);
+}

package/List/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-radius-md: 0.375rem;
+  --rs-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.1);
+}
 :root,
 .rs-theme-light {
   --rs-gray-0: #fff;
@@ -65,21 +77,13 @@
     --rs-list-placeholder-bg: rgba(143, 153, 0, 0.2);
   }
 }
-/* stylelint-disable */
-*[class*='rs-'] {
-  box-sizing: border-box;
-}
-*[class*='rs-']::before,
-*[class*='rs-']::after {
-  box-sizing: border-box;
-}
 .rs-list {
   position: relative;
   overflow-x: hidden;
   overflow-y: auto;
 }
 .rs-list-bordered {
-  border-radius: 6px;
+  border-radius: var(--rs-radius-md);
   border: 1px solid var(--rs-list-border);
 }
 .rs-list-hover .rs-list-item:hover {
@@ -97,8 +101,8 @@
   position: relative;
 }
 .rs-list-item-bordered {
-  padding-left: 20px;
-  padding-right: 20px;
+  padding-inline-start: 20px;
+  padding-inline-end: 20px;
 }
 .rs-list-item-lg {
   padding-top: 20px;
@@ -124,11 +128,11 @@
 .rs-list-item-helper {
   position: absolute;
   background-color: var(--rs-list-bg);
-  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--rs-shadow-sm);
   width: calc(100% - 2px);
-  border-radius: 6px;
+  border-radius: var(--rs-radius-md);
   top: 0;
-  left: 0;
+  inset-inline-start: 0;
   z-index: 99;
   border: none;
   cursor: move;
@@ -148,7 +152,7 @@
   position: absolute;
   visibility: visible;
   top: 1px;
-  left: 1px;
+  inset-inline-start: 1px;
   width: calc(100% - 2 * 1px);
   height: calc(100% - 2 * 1px);
   border: 1px var(--rs-list-placeholder-border) dashed;

package/List/styles/index.less

@@ -10,7 +10,7 @@
   overflow-y: auto;
 
   &-bordered {
-    border-radius: @border-radius;
+    border-radius: var(--rs-radius-md);
     border: @list-border-width solid var(--rs-list-border);
   }
 
@@ -34,8 +34,8 @@
   position: relative;
 
   &-bordered {
-    padding-left: 20px;
-    padding-right: 20px;
+    padding-inline-start: 20px;
+    padding-inline-end: 20px;
   }
 
   &-lg {
@@ -67,11 +67,11 @@
   &-helper {
     position: absolute;
     background-color: var(--rs-list-bg);
-    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
+    box-shadow: var(--rs-shadow-sm);
     width: calc(100% - 2px);
-    border-radius: @border-radius;
+    border-radius: var(--rs-radius-md);
     top: 0;
-    left: 0;
+    inset-inline-start: 0;
     z-index: @zindex-list-helper;
     border: none;
     cursor: move;
@@ -96,7 +96,7 @@
       position: absolute;
       visibility: visible;
       top: @list-border-width;
-      left: @list-border-width;
+      inset-inline-start: @list-border-width;
       width: calc(100% - 2 * @list-border-width);
       height: calc(100% - 2 * @list-border-width);
       border: @list-border-width var(--rs-list-placeholder-border) dashed;