rsuite 6.0.1 → 6.1.0

package/Progress/styles/_progress-line.scss

@@ -0,0 +1,343 @@
+@use './mixins' as progress-mixins;
+
+.rs-progress-line {
+  --rs-progress-line-color: var(--rs-progress-bar);
+  --rs-progress-line-trail-color: var(--rs-progress-bg);
+  --rs-progress-line-size: 10px;
+  --rs-progress-line-trail-size: var(--rs-progress-line-size);
+  --rs-progress-line-stroke: 0;
+  --rs-progress-line-radius: var(--rs-radius-sm);
+  --rs-progress-line-stripe-size: 16px;
+  --rs-progress-line-section-gap: 0px;
+  --rs-progress-bg-transition: 0.2s ease-in-out;
+
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: calc(var(--rs-spacing) * 3);
+
+  &:where([data-status='active']) {
+    .rs-progress-line-stroke {
+      position: relative;
+
+      &::before {
+        content: '';
+        opacity: 0;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        inset-inline-start: 0;
+        inset-inline-end: 0;
+        background-color: #fff;
+        border-radius: var(--rs-radius-lg);
+        animation: progress-active 1.2s cubic-bezier(0.23, 1, 0.32, 1) infinite;
+      }
+    }
+  }
+
+  &:where([data-status='success']) {
+    color: var(--rs-progress-bar-success);
+
+    .rs-progress-line-stroke {
+      background: var(--rs-progress-bar-success);
+    }
+  }
+
+  &:where([data-status='fail']) {
+    color: var(--rs-progress-bar-fail);
+
+    .rs-progress-line-stroke {
+      background: var(--rs-progress-bar-fail);
+    }
+  }
+
+  .rs-progress-line-info {
+    height: 20px;
+    display: flex;
+    align-items: center;
+
+    svg {
+      // 替换 Less 的 .icon-bolder(0.5px) 为直接的 CSS
+      stroke-width: 0.5px;
+    }
+  }
+
+  // Default end position (info on the right)
+  &:where([data-placement='end']) {
+    flex-direction: row;
+  }
+
+  // Start position (info on the left)
+  &:where([data-placement='start']) {
+    flex-direction: row-reverse;
+  }
+
+  // Inside positions
+  &:where([data-placement='insideStart']),
+  &:where([data-placement='insideEnd']),
+  &:where([data-placement='insideCenter']) {
+    .rs-progress-line-info {
+      color: #fff;
+      padding-inline: var(--rs-spacing);
+    }
+  }
+
+  &:where([data-placement='insideStart']) .rs-progress-line-stroke {
+    justify-content: flex-start;
+  }
+
+  &:where([data-placement='insideEnd']) .rs-progress-line-stroke {
+    justify-content: flex-end;
+  }
+
+  &:where([data-placement='insideCenter']) .rs-progress-line-stroke {
+    justify-content: center;
+  }
+
+  &-outer {
+    flex: 1 1 auto;
+    border-radius: var(--rs-progress-line-radius);
+    overflow: hidden;
+    // Make sure outer vertical-align:center;
+    vertical-align: middle;
+    position: relative;
+  }
+
+  &-trail {
+    display: flex;
+    align-items: center;
+    background: var(--rs-progress-line-trail-color);
+    border-radius: var(--rs-progress-line-radius);
+    height: var(--rs-progress-line-trail-size);
+  }
+
+  &-sections {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+    border-radius: var(--rs-progress-line-radius);
+    cursor: default;
+  }
+
+  &-stroke {
+    display: flex;
+    align-items: center;
+    background: var(--rs-progress-line-color);
+    border-radius: var(--rs-progress-line-radius);
+    transition: var(--rs-progress-bg-transition);
+    transition-property: width, height, background-color;
+    width: var(--rs-progress-line-stroke);
+    height: var(--rs-progress-line-size);
+    position: relative;
+    overflow: hidden;
+
+    // Section-specific border radius styles
+    &.rs-progress-line-section {
+      color: #fff;
+      border-radius: 0;
+      padding-inline: var(--rs-spacing);
+
+      // First section in horizontal layout
+      &:where(:first-of-type) {
+        border-start-start-radius: var(--rs-progress-line-radius);
+        border-end-start-radius: var(--rs-progress-line-radius);
+      }
+
+      // Last section in horizontal layout
+      &:where(:last-of-type) {
+        border-start-end-radius: var(--rs-progress-line-radius);
+        border-end-end-radius: var(--rs-progress-line-radius);
+      }
+    }
+  }
+
+  &.rs-progress-line-vertical {
+    flex-direction: column-reverse;
+    width: auto;
+    height: 100%;
+  }
+
+  // Inside positions
+  &.rs-progress-line-vertical {
+    // Vertical mode positioning
+    &:where([data-placement='start']) {
+      flex-direction: column;
+    }
+
+    &:where([data-placement='end']) {
+      flex-direction: column-reverse;
+    }
+
+    &:where([data-placement='insideStart']),
+    &:where([data-placement='insideEnd']),
+    &:where([data-placement='insideCenter']) {
+      .rs-progress-line-info {
+        @include progress-mixins.vertical-text;
+      }
+    }
+
+    &:where([data-placement='insideStart']) .rs-progress-line-stroke {
+      align-items: flex-start;
+    }
+
+    &:where([data-placement='insideEnd']) .rs-progress-line-stroke {
+      align-items: flex-end;
+    }
+
+    &:where([data-placement='insideCenter']) .rs-progress-line-stroke {
+      align-items: center;
+    }
+  }
+
+  &.rs-progress-line-vertical .rs-progress-line-outer {
+    width: auto;
+    flex: 1 1 auto;
+  }
+
+  &.rs-progress-line-vertical .rs-progress-line-trail {
+    min-height: 100px;
+    width: var(--rs-progress-line-trail-size);
+    display: flex;
+    flex-direction: column-reverse;
+    align-items: center;
+    position: relative;
+    height: 100%;
+  }
+
+  &.rs-progress-line-vertical .rs-progress-line-info {
+    flex-basis: auto;
+    width: 100%;
+  }
+
+  &.rs-progress-line-vertical .rs-progress-line-sections {
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    position: relative;
+  }
+
+  &.rs-progress-line-vertical .rs-progress-line-stroke {
+    width: 100%;
+    height: var(--rs-progress-line-stroke);
+    transition-property: height, background-color;
+    transform: rotate(180deg);
+    position: absolute;
+    bottom: 0;
+    left: 0;
+
+    &.rs-progress-line-section {
+      @include progress-mixins.vertical-text;
+
+      // First section in vertical layout
+      &:where(:first-of-type) {
+        border-top-left-radius: var(--rs-progress-line-radius);
+        border-top-right-radius: var(--rs-progress-line-radius);
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+
+      // Last section in vertical layout
+      &:where(:last-of-type) {
+        border-bottom-left-radius: var(--rs-progress-line-radius);
+        border-bottom-right-radius: var(--rs-progress-line-radius);
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+      }
+    }
+  }
+
+  &.rs-progress-line-vertical:where([data-status='active']) .rs-progress-line-stroke::before {
+    animation-name: progress-active-vertical;
+  }
+
+  // Striped effect
+  &-striped .rs-progress-line-stroke {
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-image: linear-gradient(
+        45deg,
+        rgba(255, 255, 255, 0.15) 25%,
+        transparent 25%,
+        transparent 50%,
+        rgba(255, 255, 255, 0.15) 50%,
+        rgba(255, 255, 255, 0.15) 75%,
+        transparent 75%,
+        transparent
+      );
+      background-size: var(--rs-progress-line-stripe-size) var(--rs-progress-line-stripe-size);
+      z-index: 0;
+    }
+  }
+
+  &-striped:where([data-status='active']) .rs-progress-line-stroke::after {
+    animation: progress-stripe 1s linear infinite;
+  }
+
+  &.rs-progress-line-vertical.rs-progress-line-striped .rs-progress-line-stroke::after {
+    background-image: linear-gradient(
+      -45deg,
+      rgba(255, 255, 255, 0.15) 25%,
+      transparent 25%,
+      transparent 50%,
+      rgba(255, 255, 255, 0.15) 50%,
+      rgba(255, 255, 255, 0.15) 75%,
+      transparent 75%,
+      transparent
+    );
+  }
+
+  &.rs-progress-line-vertical.rs-progress-line-striped:where([data-status='active'])
+    .rs-progress-line-stroke::after {
+    animation: progress-stripe-vertical 1s linear infinite;
+  }
+
+  // Indeterminate animation
+  &-indeterminate {
+    .rs-progress-line-stroke {
+      width: 100%;
+      position: relative;
+      overflow: hidden;
+      background-color: var(--rs-progress-line-trail-color);
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        width: 30%;
+        background-color: var(--rs-progress-line-color);
+        will-change: transform;
+        animation: progress-indeterminate 1.5s ease-in-out infinite;
+      }
+    }
+  }
+
+  &.rs-progress-line-vertical.rs-progress-line-indeterminate {
+    .rs-progress-line-stroke {
+      height: 100%;
+      background-color: var(--rs-progress-line-trail-color);
+      transform: rotate(180deg);
+
+      &::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        width: 100%;
+        height: 30%;
+        background-color: var(--rs-progress-line-color);
+        will-change: transform;
+        animation: progress-indeterminate-vertical 1.5s ease-in-out infinite;
+      }
+    }
+  }
+}

package/Progress/styles/index.scss

@@ -0,0 +1,3 @@
+@use '../../internals/Box/styles/index' as box;
+@use './animation';
+@use './progress-line';

package/ProgressCircle/styles/index.scss

@@ -0,0 +1,2 @@
+@use '../../internals/Box/styles/index' as box;
+@use './progress-circle';

package/ProgressCircle/styles/progress-circle.scss

@@ -0,0 +1,49 @@
+.rs-progress-circle {
+  --rs-progress-font-size: var(--rs-font-size-md);
+  --rs-progress-line-font-size: 0.875rem; // 14px
+  --rs-progress-circle-font-size: 2.25rem; // 36px
+
+  position: relative;
+  line-height: 0;
+  width: 100%;
+
+  &-info {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    font-size: var(--rs-progress-font-size);
+    color: var(--rs-text-secondary);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &-trail {
+    stroke: var(--rs-progress-bg);
+  }
+
+  &-stroke {
+    stroke: var(--rs-progress-bar);
+    transition:
+      stroke-dashoffset 0.3s ease,
+      stroke-dasharray 0.2s ease-in-out,
+      stroke 0.3s;
+  }
+
+  // Setting status color
+  &-success &-info {
+    color: var(--rs-progress-bar-success);
+  }
+
+  &-success &-stroke {
+    stroke: var(--rs-progress-bar-success);
+  }
+
+  &-fail &-info {
+    color: var(--rs-progress-bar-fail);
+  }
+
+  &-fail &-stroke {
+    stroke: var(--rs-progress-bar-fail);
+  }
+}

package/Radio/styles/_mixin.scss

@@ -0,0 +1,5 @@
+@mixin radio-inner-wrapper($border-color) {
+  border: 1px solid $border-color;
+  background-color: transparent;
+  border-radius: var(--rs-radius-full);
+}

package/Radio/styles/_variables.scss

@@ -0,0 +1,5 @@
+:root{
+  --rs-radio-size: 16px;
+  --rs-radio-inner-size: 6px;
+  --rs-radio-display: inline-flex;
+}

package/Radio/styles/index.scss

@@ -0,0 +1,147 @@
+@use '../../internals/Box/styles/index' as box;
+@use '../../styles/colors/colors-base' as colors;
+@use '../../styles/mixins/utilities' as utils;
+@use '../../styles/mixins/color-modes' as color-modes;
+@use '../../styles/mixins/input' as input;
+@use './variables';
+@use './mixin';
+
+.rs-radio {
+  display: var(--rs-radio-display);
+
+  @include input.check-radio-base;
+
+  [type='radio']:focus ~ .rs-radio-inner::before {
+    @include utils.focus-ring;
+  }
+
+  &[data-disabled='true'] {
+    cursor: var(--rs-cursor-disabled);
+  }
+}
+
+.rs-radio-checker {
+  position: relative;
+  display: inline-flex;
+
+  > label {
+    display: inline-flex;
+    align-items: center;
+    gap: calc(var(--rs-spacing) * 2);
+  }
+}
+
+.rs-radio-control {
+  position: relative;
+  display: inline-flex;
+
+  [type='radio'] {
+    opacity: 0;
+    width: var(--rs-radio-size);
+    height: var(--rs-radio-size);
+  }
+
+  &::before,
+  .rs-radio-inner::before,
+  .rs-radio-inner::after {
+    content: '';
+    position: absolute;
+    inset-inline-start: 0;
+    top: 0;
+    display: block;
+  }
+
+  &::before,
+  .rs-radio-inner::before {
+    width: var(--rs-radio-size);
+    height: var(--rs-radio-size);
+  }
+
+  // Ripple effect area.
+  &::before {
+    @include mixin.radio-inner-wrapper(var(--rs-radio-checked-bg));
+
+    transform: scale(1);
+    opacity: 0.7;
+    visibility: hidden;
+    transition:
+      transform 0.2s linear,
+      opacity 0.2s linear;
+
+    @include color-modes.high-contrast-mode {
+      transition: none;
+    }
+
+    .rs-radio[data-checked='true'] & {
+      transform: scale(1.5);
+      opacity: 0;
+      visibility: visible;
+    }
+  }
+}
+
+// Out border.
+.rs-radio-inner {
+  &::before {
+    @include mixin.radio-inner-wrapper(var(--rs-radio-border));
+
+    transition:
+      background 0.2s linear,
+      border 0.2s linear,
+      box-shadow 0.2s linear;
+
+    @include color-modes.high-contrast-mode {
+      transition: none;
+    }
+
+    .rs-radio:hover & {
+      border-color: var(--rs-radio-checked-bg);
+    }
+
+    .rs-radio[data-disabled='true'] & {
+      border-color: var(--rs-radio-disabled-bg);
+      background-color: var(--rs-radio-disabled-bg);
+    }
+
+    .rs-radio[data-checked='true'] & {
+      border-color: var(--rs-radio-checked-bg);
+      background-color: var(--rs-radio-checked-bg);
+    }
+
+    .rs-radio[data-disabled='true'][data-checked='true'] & {
+      opacity: 0.5;
+    }
+  }
+
+  // Solid circle.
+  &::after {
+    width: var(--rs-radio-inner-size);
+    height: var(--rs-radio-inner-size);
+    background-color: var(--rs-radio-marker);
+    margin-top: calc((var(--rs-radio-size) - var(--rs-radio-inner-size)) / 2);
+    margin-inline-start: calc((var(--rs-radio-size) - var(--rs-radio-inner-size)) / 2);
+    border-radius: var(--rs-radius-full);
+    opacity: 0;
+    transform: scale(0);
+    transition:
+      opacity 0.2s ease-in,
+      transform 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46);
+
+    @include color-modes.high-contrast-mode {
+      transition: none;
+    }
+
+    .rs-radio[data-checked='true'] & {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+}
+
+// Colorful radios
+@each $color in colors.$spectrum {
+  .rs-radio[data-color='#{$color}'] {
+    --rs-radio-checked-bg: var(--rs-#{'' + $color}-500);
+    --rs-radio-border: var(--rs-#{'' + $color}-500);
+  }
+}

package/RadioGroup/styles/_variables.scss

@@ -0,0 +1,10 @@
+:root {
+  --rs-radio-group-spacing: calc(var(--rs-spacing) * 3);
+  --rs-radio-group-direction: column;
+  --rs-radio-checker-label-color: var(--rs-text-secondary);
+  --rs-radio-checker-border-color: transparent;
+  --rs-radio-group-picker-border-radius: var(--rs-radius-md);
+  --rs-radio-group-border-width: 1px;
+  --rs-radio-padding-x: 10px;
+  --rs-radio-active-underline-width: 2px;
+}

package/RadioGroup/styles/index.scss

@@ -0,0 +1,83 @@
+@use '../../internals/Box/styles/index' as box;
+@use '../../styles/colors/colors-base' as colors;
+@use '../../styles/mixins/color-modes' as color-modes;
+@use './variables';
+
+.rs-radio-group {
+  display: flex;
+  flex-direction: var(--rs-radio-group-direction);
+  gap: var(--rs-radio-group-spacing);
+
+  &[data-inline='true'] {
+    --rs-radio-group-direction: row;
+  }
+}
+
+// Radio Group - picker appearance
+.rs-radio-group[data-appearance='picker'] {
+  display: inline-flex;
+  align-items: center;
+  flex-wrap: wrap;
+  color: var(--rs-text-primary);
+  border: var(--rs-radio-group-border-width) solid var(--rs-border-primary);
+  border-radius: var(--rs-radio-group-picker-border-radius);
+  padding-inline: calc(var(--rs-spacing) * 3);
+
+  .rs-radio[data-inline='true'] {
+    padding-inline: var(--rs-spacing);
+    margin: 0;
+  }
+
+  .rs-radio-checker {
+    padding: 0;
+    min-height: auto;
+  }
+
+  // Picker Radio group hidden radio.
+  .rs-radio-control {
+    display: none;
+  }
+
+  .rs-radio-checker > label {
+    display: inline-block;
+    white-space: nowrap;
+    font-size: var(--rs-font-size-sm);
+    line-height: var(--rs-line-height-md);
+    border-radius: var(--rs-radius-none);
+    color: var(--rs-radio-checker-label-color);
+    background: none;
+    transition: color 0.3s linear;
+    padding-inline: 0;
+    padding-block-start: calc(var(--rs-padding-block-md) - var(--rs-radio-group-border-width));
+    padding-block-end: calc(
+      var(--rs-padding-block-md) - var(--rs-radio-group-border-width) - var(
+          --rs-radio-active-underline-width
+        )
+    );
+    border-bottom: var(--rs-radio-active-underline-width) solid var(--rs-radio-checker-border-color);
+
+    @include color-modes.high-contrast-mode {
+      transition: none;
+    }
+
+    &:hover,
+    &:active {
+      color: var(--rs-text-active);
+      background: none;
+    }
+  }
+
+  .rs-radio-checked .rs-radio-checker > label {
+    --rs-radio-checker-label-color: var(--rs-text-active);
+    --rs-radio-checker-border-color: var(--rs-text-active);
+  }
+
+  .rs-radio[data-disabled='true'] .rs-radio-checker {
+    opacity: 0.3;
+    cursor: not-allowed;
+  }
+
+  .rs-radio[data-disabled='true'][data-checked='false'] .rs-radio-checker > label {
+    color: var(--rs-text-secondary);
+  }
+}