rsuite 6.0.1 → 6.1.1

package/Button/styles/index.scss

@@ -0,0 +1,374 @@
+@use '../../internals/Box/styles/index';
+@use '../../styles/colors/colors-base' as c;
+@use '../../styles/mixins/utilities' as utils;
+@use '../../internals/Ripple/styles/index' as ripple;
+@use '../../styles/mixins/color-modes';
+@use 'variables' as vars;
+@use 'mixin';
+
+//
+// Buttons
+// --------------------------------------------------
+
+// Default Button
+.rs-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 0; // For input.btn
+  font-weight: var(--rs-btn-font-weight);
+  font-size: var(--rs-btn-font-size, var(--rs-font-size-sm));
+  line-height: var(--rs-btn-line-height, 1.25rem);
+  height: var(--rs-btn-size, 2.25rem);
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: var(--rs-btn-transition);
+  // Reset border style in all browser
+  border-width: 0;
+  border-style: solid;
+  border-color: var(--rs-btn-default-border-color, none);
+  user-select: none;
+  text-decoration: none;
+  color: var(--rs-btn-default-text);
+  background-color: var(--rs-btn-default-bg);
+  border-radius: var(--rs-radius-md);
+  padding-inline: var(--rs-btn-padding-inline);
+  padding-block: var(--rs-btn-padding-block);
+
+  @include color-modes.high-contrast-mode {
+    transition: none;
+    border-width: 1px;
+    border-color: var(--rs-btn-default-border-color);
+  }
+
+  @include utils.with-focus-ring;
+
+  @include mixin.button-activated {
+    color: var(--rs-btn-default-hover-text);
+    background-color: var(--rs-btn-default-hover-bg);
+    text-decoration: none;
+  }
+
+  @include mixin.button-pressed {
+    color: var(--rs-btn-default-active-text);
+    background-color: var(--rs-btn-default-active-bg);
+  }
+
+  @include mixin.button-disabled {
+    cursor: var(--rs-cursor-disabled);
+    color: var(--rs-btn-default-disabled-text);
+    background-color: var(--rs-btn-default-disabled-bg);
+  }
+
+  @include ripple.with-ripple;
+
+  // Button Sizes
+  // --------------------------------------------------
+
+  & {
+    @include mixin.button-size-md;
+  }
+
+  &[data-size='lg'] {
+    @include mixin.button-size-lg;
+  }
+
+  &[data-size='md'] {
+    @include mixin.button-size-md;
+  }
+
+  &[data-size='sm'] {
+    @include mixin.button-size-sm;
+  }
+
+  &[data-size='xs'] {
+    @include mixin.button-size-xs;
+  }
+}
+
+.rs-btn-start-icon {
+  line-height: 0; // Eliminate whitespace
+  margin-inline-end: var(--rs-btn-icon-gap);
+}
+
+.rs-btn-end-icon {
+  line-height: 0; // Eliminate whitespace
+  margin-inline-start: var(--rs-btn-icon-gap);
+}
+
+// Appearance variants
+// --------------------------------------------------
+
+// Primary Button
+.rs-btn[data-appearance='primary'] {
+  color: var(--rs-btn-primary-text);
+  background-color: var(--rs-btn-primary-bg);
+  border-color: var(--rs-btn-primary-border-color);
+
+  @include mixin.button-activated {
+    color: var(--rs-btn-primary-text);
+    background-color: var(--rs-btn-primary-hover-bg);
+  }
+
+  @include mixin.button-pressed {
+    color: var(--rs-btn-primary-text);
+    background-color: var(--rs-btn-primary-active-bg);
+  }
+
+  @include mixin.button-disabled {
+    color: var(--rs-btn-primary-text);
+    background-color: var(--rs-btn-primary-bg);
+    opacity: 0.3;
+  }
+}
+
+// Subtle Button
+.rs-btn[data-appearance='subtle'],
+.rs-btn-subtle {
+  color: var(--rs-btn-subtle-text);
+  background-color: transparent;
+
+  @include mixin.button-activated {
+    color: var(--rs-btn-subtle-hover-text);
+    background-color: var(--rs-btn-subtle-hover-bg);
+  }
+
+  @include mixin.button-pressed {
+    color: var(--rs-btn-subtle-active-text);
+    background-color: var(--rs-btn-subtle-active-bg);
+  }
+
+  @include mixin.button-disabled {
+    color: var(--rs-btn-subtle-disabled-text);
+    background: none;
+  }
+}
+
+// Link buttons
+.rs-btn[data-appearance='link'] {
+  color: var(--rs-btn-link-text);
+  background-color: transparent;
+
+  @include mixin.button-activated {
+    color: var(--rs-btn-link-hover-text);
+    background-color: transparent;
+    text-decoration: var(--rs-link-hover-decoration);
+  }
+
+  @include mixin.button-pressed {
+    color: var(--rs-btn-link-active-text);
+    background-color: transparent;
+  }
+
+  @include mixin.button-disabled {
+    color: var(--rs-btn-link-hover-text);
+    background-color: transparent;
+    text-decoration: none;
+    opacity: 0.3;
+  }
+}
+
+// Ghost Button
+.rs-btn[data-appearance='ghost'] {
+  color: var(--rs-btn-ghost-text);
+  background-color: transparent;
+  border: var(--rs-btn-ghost-border-width) solid var(--rs-btn-ghost-border);
+  padding-inline: calc(var(--rs-btn-padding-inline) - var(--rs-btn-ghost-border-width));
+
+  @include mixin.button-activated {
+    color: var(--rs-btn-ghost-hover-text);
+    background-color: transparent;
+    border-color: var(--rs-btn-ghost-hover-border);
+    box-shadow: 0 0 0 1px var(--rs-btn-ghost-hover-border);
+  }
+
+  @include mixin.button-pressed {
+    color: var(--rs-btn-ghost-active-text);
+    background-color: transparent;
+    border-color: var(--rs-btn-ghost-active-border);
+  }
+
+  @include mixin.button-disabled {
+    color: var(--rs-btn-ghost-text);
+    background-color: transparent;
+    opacity: 0.3;
+    border-color: var(--rs-btn-ghost-border);
+    box-shadow: var(--rs-shadow-none);
+  }
+}
+
+// Spectrum buttons
+@each $color in c.$spectrum {
+  // 将颜色名称作为字符串处理
+  $color-str: '#{$color}';
+  $C200: var(--rs-#{$color-str}-200);
+  $C300: var(--rs-#{$color-str}-300);
+  $C400: var(--rs-#{$color-str}-400);
+  $C500: var(--rs-#{$color-str}-500);
+  $C600: var(--rs-#{$color-str}-600);
+  $C700: var(--rs-#{$color-str}-700);
+  $C800: var(--rs-#{$color-str}-800);
+  $C900: var(--rs-#{$color-str}-900);
+
+  .rs-btn[data-color='#{$color-str}'] {
+    --rs-btn-primary-bg: #{$C500};
+    --rs-btn-primary-hover-bg: #{$C700};
+    --rs-btn-primary-active-bg: #{$C800};
+    --rs-btn-primary-border-color: #{$C700};
+    --rs-btn-subtle-hover-bg: #{$C500};
+    --rs-btn-subtle-hover-text: var(--rs-body-200);
+    --rs-btn-subtle-active-bg: #{$C600};
+    --rs-btn-subtle-active-text: var(--rs-body-800);
+    --rs-btn-ghost-border: #{$C700};
+    --rs-btn-ghost-text: #{$C700};
+    --rs-btn-ghost-hover-border: #{$C900};
+    --rs-btn-ghost-hover-text: #{$C800};
+    --rs-btn-ghost-active-border: #{$C900};
+    --rs-btn-ghost-active-text: #{$C900};
+    --rs-btn-link-text: #{$C700};
+    --rs-btn-link-hover-text: #{$C800};
+    --rs-btn-link-active-text: #{$C900};
+    --rs-iconbtn-primary-addon: #{$C600};
+    --rs-iconbtn-primary-activated-addon: #{$C800};
+    --rs-iconbtn-primary-pressed-addon: #{$C900};
+
+    @include color-modes.dark-mode {
+      --rs-btn-primary-bg: #{$C700};
+      --rs-btn-primary-hover-bg: #{$C500};
+      --rs-btn-primary-active-bg: #{$C400};
+      --rs-btn-primary-border-color: #{$C800};
+      --rs-btn-subtle-hover-bg: #{$C600};
+      --rs-btn-subtle-hover-text: #fff;
+      --rs-btn-subtle-active-bg: #{$C400};
+      --rs-btn-subtle-active-text: #fff;
+      --rs-btn-ghost-border: #{$C500};
+      --rs-btn-ghost-text: #{$C500};
+      --rs-btn-ghost-hover-border: #{$C400};
+      --rs-btn-ghost-hover-text: #{$C400};
+      --rs-btn-ghost-active-border: #{$C200};
+      --rs-btn-ghost-active-text: #{$C200};
+      --rs-btn-link-text: #{$C500};
+      --rs-btn-link-hover-text: #{$C400};
+      --rs-btn-link-active-text: #{$C200};
+      --rs-iconbtn-primary-addon: #{$C600};
+      --rs-iconbtn-primary-activated-addon: #{$C400};
+      --rs-iconbtn-primary-pressed-addon: #{$C300};
+    }
+
+    @include color-modes.high-contrast-mode {
+      --rs-btn-primary-bg: #{$C700};
+      --rs-btn-primary-hover-bg: #{$C600};
+      --rs-btn-primary-active-bg: #{$C400};
+      --rs-btn-subtle-hover-bg: #{$C600};
+      --rs-btn-subtle-hover-text: var(--rs-gray-900);
+      --rs-btn-subtle-active-bg: #{$C400};
+      --rs-btn-subtle-active-text: var(--rs-gray-900);
+      --rs-btn-ghost-border: #{$C500};
+      --rs-btn-ghost-text: #{$C500};
+      --rs-btn-ghost-hover-border: #{$C400};
+      --rs-btn-ghost-hover-text: #{$C400};
+      --rs-btn-ghost-active-border: #{$C200};
+      --rs-btn-ghost-active-text: #{$C200};
+      --rs-btn-link-text: #{$C500};
+      --rs-btn-link-hover-text: #{$C400};
+      --rs-btn-link-active-text: #{$C200};
+    }
+  }
+}
+
+// Block button
+// --------------------------------------------------
+
+.rs-btn[data-block='true'] {
+  width: 100%;
+
+  // Vertically space out multiple block buttons
+  & + & {
+    margin-top: 5px;
+  }
+}
+
+// Button Loading state
+.rs-btn[data-loading='true'] {
+  color: transparent !important;
+  position: relative;
+  cursor: default;
+  pointer-events: none;
+
+  // Spinner
+  > .rs-btn-spin {
+    &::before,
+    &::after {
+      content: '';
+      position: absolute;
+      width: var(--rs-btn-loading-spin-default-diameter);
+      height: var(--rs-btn-loading-spin-default-diameter);
+      margin: auto;
+      top: 0;
+      bottom: 0;
+      inset-inline-end: 0;
+      inset-inline-start: 0;
+      border-radius: var(--rs-radius-full);
+      z-index: 1;
+
+      .rs-btn[data-size='xs'] & {
+        width: var(--rs-btn-loading-spin-xs-diameter);
+        height: var(--rs-btn-loading-spin-xs-diameter);
+      }
+    }
+
+    &::before {
+      border: var(--rs-btn-loading-spin-ring-wide) solid var(--rs-loader-ring);
+
+      .rs-btn[data-appearance='primary'] & {
+        border-color: rgba(248, 247, 250, 0.3);
+
+        @include color-modes.high-contrast-mode {
+          border-color: var(--rs-loader-ring-inverse);
+        }
+      }
+    }
+
+    &::after {
+      border-width: var(--rs-btn-loading-spin-ring-wide);
+      border-color: var(--rs-loader-rotor) transparent transparent;
+      border-style: solid;
+      animation: buttonSpin 0.6s infinite linear;
+
+      .rs-btn[data-appearance='primary'] & {
+        border-top-color: #fff;
+
+        @include color-modes.high-contrast-mode {
+          border-top-color: var(--rs-loader-rotor-inverse);
+        }
+      }
+    }
+  }
+
+  @keyframes buttonSpin {
+    from {
+      transform: rotate(0);
+    }
+
+    to {
+      transform: rotate(360deg);
+    }
+  }
+}
+
+@mixin btn-error {
+  @extend .rs-btn-subtle;
+
+  --rs-btn-subtle-text: var(--rs-red-500);
+  --rs-btn-subtle-hover-bg: var(--rs-red-500);
+  --rs-btn-subtle-hover-text: #fff;
+  --rs-btn-subtle-active-bg: var(--rs-red-600);
+  --rs-btn-subtle-active-text: #fff;
+
+  @include color-modes.dark-mode {
+    --rs-btn-subtle-hover-bg: var(--rs-red-600);
+    --rs-btn-subtle-active-bg: var(--rs-red-400);
+  }
+}

package/ButtonGroup/styles/index.scss

@@ -0,0 +1,96 @@
+@use '../../internals/Box/styles/index' as box;
+@use '../../styles/mixins/utilities' as utils;
+
+//
+// Button groups
+// --------------------------------------------------
+
+// Make the div behave like a button
+.rs-btn-group {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle; // match .btn alignment given font-size hack above
+
+  > .rs-btn {
+    position: relative;
+
+    // Bring the "active" button to the front.
+    &:focus,
+    &:active {
+      z-index: 2;
+    }
+  }
+}
+
+// Horizontal Button remove border radius
+.rs-btn-group:not([data-vertical='true']) {
+  > .rs-btn {
+    float: inline-start;
+
+    &:not(:last-child) {
+      @include utils.border-right-radius(0);
+    }
+
+    &:not(:first-child) {
+      @include utils.border-left-radius(0);
+    }
+  }
+
+  // collapse border
+  > .rs-btn[data-appearance='ghost'] + .rs-btn[data-appearance='ghost'] {
+    margin-inline-start: -1px;
+  }
+
+  &[data-divided='true'] > .rs-btn {
+    &:not(:last-child) {
+      border-right-width: 1px;
+    }
+  }
+}
+
+// Vertical button groups
+// ----------------------
+
+.rs-btn-group[data-vertical='true'] {
+  > .rs-btn {
+    display: block;
+    width: 100%;
+    max-width: 100%;
+
+    &:not(:last-child) {
+      @include utils.border-bottom-radius(0);
+    }
+
+    &:not(:first-child) {
+      @include utils.border-top-radius(0);
+    }
+  }
+
+  // collapse border
+  > .rs-btn[data-appearance='ghost'] + .rs-btn[data-appearance='ghost'] {
+    margin-top: -1px;
+  }
+
+  &[data-divided='true'] > .rs-btn {
+    &:not(:last-child) {
+      border-bottom-width: 1px;
+    }
+  }
+
+  &[data-block='true'] {
+    width: 100%;
+  }
+}
+
+// Justified button groups
+// ----------------------
+
+.rs-btn-group[data-justified='true'] {
+  display: flex;
+  width: 100%;
+
+  > .rs-btn {
+    flex: 1 1 1%;
+    @include utils.ellipsis-basic;
+  }
+}

package/ButtonToolbar/styles/index.scss

@@ -0,0 +1,9 @@
+//
+// Button toolbar
+// --------------------------------------------------
+@use '../../Stack/styles/index' as stack;
+
+.rs-btn-toolbar {
+  // Clear whitespace
+  line-height: 0;
+}

package/CHANGELOG.md

@@ -1,3 +1,34 @@
+## [6.1.1](https://github.com/rsuite/rsuite/compare/v6.1.0...v6.1.1) (2025-12-18)
+
+
+### Bug Fixes
+
+* date range picker not jumping to current day when selecting outside current calendar ([#4465](https://github.com/rsuite/rsuite/issues/4465)) ([eb0823c](https://github.com/rsuite/rsuite/commit/eb0823cb0d26a5e0894de9a9c914a7974a9024c7))
+* docs/package.json & docs/package-lock.json to reduce vulnerabilities ([#4481](https://github.com/rsuite/rsuite/issues/4481)) ([843f1e9](https://github.com/rsuite/rsuite/commit/843f1e9797c82fe2a8b71f6ca336c51bb1e6408d))
+* **webpack:** add react-dom/client external for UMD builds ([#4467](https://github.com/rsuite/rsuite/issues/4467)) ([30504c3](https://github.com/rsuite/rsuite/commit/30504c368c4b80af50e274267e1d661c56969b79))
+
+
+
+# [6.1.0](https://github.com/rsuite/rsuite/compare/v6.0.1...v6.1.0) (2025-12-11)
+
+
+### Bug Fixes
+
+* **Breadcrumb:** forward props correctly when using as prop in BreadcrumbItem ([#4450](https://github.com/rsuite/rsuite/issues/4450)) ([1c39f37](https://github.com/rsuite/rsuite/commit/1c39f37d2b1081434a2db7e4c32f184fd8581990)), closes [#4427](https://github.com/rsuite/rsuite/issues/4427) [#4463](https://github.com/rsuite/rsuite/issues/4463)
+* **Checkbox:** set indeterminate property for screen reader support ([#4448](https://github.com/rsuite/rsuite/issues/4448)) ([0bcdd9e](https://github.com/rsuite/rsuite/commit/0bcdd9ed488b297c73f3b67d1f6b77f16e39c4d2)), closes [#4345](https://github.com/rsuite/rsuite/issues/4345)
+* **CheckTree:** allow parent nodes to be selected when all children are disabled ([#4446](https://github.com/rsuite/rsuite/issues/4446)) ([63e76e4](https://github.com/rsuite/rsuite/commit/63e76e47c5cff9197f1a1131e2e9a888a1fe60f6)), closes [#4346](https://github.com/rsuite/rsuite/issues/4346)
+* **Form:** call onChange when reset() is invoked on controlled form  ([#4444](https://github.com/rsuite/rsuite/issues/4444)) ([acb0e59](https://github.com/rsuite/rsuite/commit/acb0e595788bed2769b3cf57da9a5f9ca40f4e79)), closes [#4394](https://github.com/rsuite/rsuite/issues/4394)
+* **rate:** prevent name prop from overriding internal component styling ([#4455](https://github.com/rsuite/rsuite/issues/4455)) ([f803d01](https://github.com/rsuite/rsuite/commit/f803d01e7be28745fa40f17f4eee66c2b5e0d22d))
+
+
+### Features
+
+* **build:** export SCSS source files to npm package ([#4445](https://github.com/rsuite/rsuite/issues/4445)) ([edac8e6](https://github.com/rsuite/rsuite/commit/edac8e65e4877b82d11f24d0565f3cc411fd5956)), closes [#4437](https://github.com/rsuite/rsuite/issues/4437)
+* **DateInput:** support AM/PM toggle with 'a' and 'p' keys ([#4443](https://github.com/rsuite/rsuite/issues/4443)) ([d56468c](https://github.com/rsuite/rsuite/commit/d56468cad2e5880e605d1d05deaa223e2f2103f9))
+* **Tree:** add Home and End keyboard support for accessibility ([#4449](https://github.com/rsuite/rsuite/issues/4449)) ([9f54089](https://github.com/rsuite/rsuite/commit/9f54089666eaaffb24998256f4dd8b0561d6c638)), closes [#4344](https://github.com/rsuite/rsuite/issues/4344)
+
+
+
 ## [6.0.1](https://github.com/rsuite/rsuite/compare/v6.0.0...v6.0.1) (2025-12-07)
 
 

package/Calendar/styles/_variables.scss

@@ -0,0 +1,16 @@
+:root {
+  --rs-calendar-cell-font-size: var(--rs-font-size-sm);
+  --rs-calendar-cell-line-height: var(--rs-line-height-md);
+  --rs-calendar-cell-padding: 5px;
+  --rs-calendar-border-radius: var(--rs-radius-md);
+  --rs-calendar-table-width: 100%;
+  --rs-calendar-panel-today-active-side-length: var(--rs-line-height-base);
+  --rs-calendar-panel-compact-cell-height: 38px;
+  --rs-calendar-panel-cell-height: 100px;
+  --rs-calendar-dropdown-top: 44px;
+  --rs-calendar-table-cell-padding: 1px;
+  --rs-calendar-header-title-margin: 4px;
+  --rs-calendar-body-padding-top: 4px;
+  --rs-calendar-base-spacing: 10px;
+  --rs-calendar-header-width: 280px;
+}