rsuite 6.0.0-canary-20250424 → 6.0.0-canary-20250620

package/Slider/styles/index.less

@@ -1,296 +0,0 @@
-@import '../../styles/common.less';
-@import '../../Tooltip/styles/index.less';
-
-//
-// Slider
-// --------------------------------------------------
-.rs-slider {
-  --rs-slider-size: 6px;
-  --rs-slider-mark-mt: 9px;
-  --rs-slider-handle-size: 12px;
-  --rs-slider-handle-bw: 2px;
-  --rs-slider-calibration-size: 4px;
-  --rs-slider-calibration-bw: 2px;
-  --rs-slider-handle-ratio: 2;
-  --rs-slider-transition: 0.15s ease-in-out;
-  --rs-tooltip-offset: 0;
-
-  position: relative;
-
-  .rs-tooltip {
-    left: var(--rs-tooltip-offset);
-    display: none;
-  }
-
-  &-disabled {
-    opacity: 0.5;
-    cursor: @cursor-disabled;
-
-    .rs-slider-bar,
-    .rs-slider-handle::before {
-      pointer-events: none;
-    }
-  }
-
-  &-with-mark:not(&-vertical) {
-    //White space for mark
-    margin-bottom: calc(@line-height-computed + var(--rs-slider-mark-mt));
-  }
-
-  &:where([data-size='xs']) {
-    --rs-slider-size: 4px;
-    --rs-slider-handle-size: 8px;
-    --rs-slider-calibration-size: 0;
-  }
-
-  &:where([data-size='md']) {
-    --rs-slider-size: 8px;
-    --rs-slider-handle-size: 16px;
-    --rs-slider-calibration-size: 6px;
-  }
-
-  &:where([data-size='lg']) {
-    --rs-slider-size: 10px;
-    --rs-slider-handle-size: 20px;
-    --rs-slider-calibration-size: 8px;
-  }
-
-  &:where([data-size='xl']) {
-    --rs-slider-size: 12px;
-    --rs-slider-handle-size: 24px;
-    --rs-slider-calibration-size: 10px;
-  }
-}
-
-// Bar
-.rs-slider-bar {
-  height: var(--rs-slider-size);
-  border-radius: var(--rs-radius-sm);
-  background-color: var(--rs-slider-bar);
-  transition: background-color ease-in-out 0.3s;
-  cursor: pointer;
-
-  .rs-slider:hover & {
-    background-color: var(--rs-slider-hover-bar);
-  }
-
-  .rs-slider-vertical & {
-    height: 100%;
-    width: var(--rs-slider-size);
-  }
-}
-
-// Handle
-.rs-slider-handle {
-  position: absolute;
-  top: -50%;
-  outline: none;
-  left: var(--rs-slider-offset);
-
-  &::before {
-    content: '';
-    position: absolute;
-    width: var(--rs-slider-handle-size);
-    height: var(--rs-slider-handle-size);
-    border-radius: var(--rs-radius-full);
-    border-width: var(--rs-slider-handle-bw);
-    border-style: solid;
-    border-color: var(--rs-slider-thumb-border);
-    background-color: var(--rs-slider-thumb-bg);
-    margin-inline-start: calc(var(--rs-slider-handle-size) / -2);
-    cursor: pointer;
-    transition:
-      box-shadow var(--rs-slider-transition),
-      background-color var(--rs-slider-transition),
-      transform var(--rs-slider-transition);
-  }
-
-  &:hover::before,
-  &:focus::before {
-    box-shadow: var(--rs-slider-thumb-hover-shadow);
-  }
-
-  &:active,
-  &.active {
-    &::before {
-      transform: scale(1.2);
-    }
-  }
-
-  .rs-slider-vertical & {
-    left: unset;
-    top: unset;
-    bottom: var(--rs-slider-offset);
-
-    &::before {
-      inset-inline-start: calc((var(--rs-slider-handle-size) - var(--rs-slider-size)) / 2);
-      margin-top: calc(var(--rs-slider-handle-size) / -2);
-    }
-  }
-}
-
-.rs-slider-handle:hover .rs-tooltip,
-.rs-slider-handle.active .rs-tooltip {
-  display: block;
-  opacity: 1;
-  top: -30px;
-
-  .rs-slider-vertical & {
-    top: -12px;
-    margin-inline-start: -36px;
-  }
-}
-
-// Mark
-.rs-slider-mark {
-  position: absolute;
-  top: calc(var(--rs-slider-size) + var(--rs-slider-mark-mt));
-  white-space: nowrap;
-
-  &-content {
-    margin-inline-start: calc(-50% + 2px);
-  }
-}
-
-.rs-slider-mark-last {
-  inset-inline-start: auto;
-  inset-inline-end: 0;
-
-  .rs-slider-mark-content {
-    margin-inline-start: calc(50% - 2px);
-  }
-}
-
-// Graduator
-.rs-slider-graduator {
-  --rs-slider-tick-offset: 0;
-  width: 100%;
-
-  .rs-slider-tick {
-    &[data-active='true']::before {
-      visibility: hidden;
-    }
-  }
-  &[data-with-marks='true'] {
-    .rs-slider-tick {
-      position: absolute;
-      left: var(--rs-slider-tick-offset);
-
-      &:last-child::after {
-        display: none;
-      }
-    }
-  }
-
-  ol,
-  li {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-
-  > ol {
-    display: flex;
-    padding-inline-start: 0;
-    width: 100%;
-
-    > li {
-      flex: 1 1 1%;
-      position: relative;
-
-      &:last-child::after,
-      &::before {
-        content: '';
-        display: block;
-        position: absolute;
-        width: var(--rs-slider-calibration-size);
-        height: var(--rs-slider-calibration-size);
-        border-radius: var(--rs-radius-full);
-        background-color: var(--rs-slider-thumb-bg);
-        box-sizing: border-box;
-        margin-inline: 2px;
-        top: 1px;
-
-        // Vertical styles
-        .rs-slider-vertical & {
-          top: unset;
-          bottom: 2px;
-          margin-inline-start: 1px;
-        }
-      }
-
-      &:last-child::after {
-        inset-inline-end: 0;
-
-        // Vertical styles
-        .rs-slider-vertical & {
-          inset-inline-start: 0;
-          bottom: unset;
-          top: 2px;
-        }
-      }
-    }
-  }
-
-  // Vertical styles
-  .rs-slider-vertical & {
-    display: block;
-    height: 100%;
-
-    &[data-with-marks='true'] {
-      .rs-slider-tick {
-        left: unset;
-        bottom: var(--rs-slider-tick-offset);
-      }
-    }
-
-    > ol {
-      width: var(--rs-slider-size);
-      display: flex;
-      flex-direction: column-reverse;
-      height: 100%;
-      padding: 0;
-
-      & > li {
-        display: block;
-        padding: 0;
-      }
-    }
-  }
-}
-
-// Progress bar
-.rs-slider-progress-bar {
-  position: absolute;
-  height: var(--rs-slider-size);
-  border-top-left-radius: var(--rs-radius-sm);
-  border-bottom-left-radius: var(--rs-radius-sm);
-  background-color: var(--rs-slider-progress);
-
-  .rs-slider-vertical & {
-    width: var(--rs-slider-size);
-    border-bottom-left-radius: var(--rs-radius-sm);
-    border-bottom-right-radius: var(--rs-radius-sm);
-  }
-}
-
-// Vertical
-.rs-slider-vertical {
-  height: 100%;
-
-  // Reset all setting
-  .rs-slider-mark {
-    top: unset;
-    bottom: -8px;
-    inset-inline-start: calc(var(--rs-slider-size) + var(--rs-slider-mark-mt));
-
-    &-content {
-      margin-inline-start: auto;
-    }
-  }
-
-  .rs-slider-mark-last {
-    bottom: unset;
-    top: -8px;
-  }
-}

package/Stack/styles/index.less

@@ -1,83 +0,0 @@
-@import '../../styles/common';
-
-.rs-stack {
-  --rs-stack-spacing: calc(var(--rs-spacing) * 1.5);
-  --rs-stack-wrap: nowrap;
-  --rs-stack-direction: row;
-  --rs-stack-align: center;
-  --rs-stack-justify: flex-start;
-
-  display: flex;
-  gap: var(--rs-stack-spacing);
-  flex-wrap: var(--rs-stack-wrap);
-  flex-direction: var(--rs-stack-direction);
-  align-items: var(--rs-stack-align);
-  justify-content: var(--rs-stack-justify);
-
-  &-column {
-    flex-direction: column;
-  }
-
-  &-row {
-    flex-direction: row;
-  }
-
-  &-column-reverse {
-    flex-direction: column-reverse;
-  }
-
-  &-row-reverse {
-    flex-direction: row-reverse;
-  }
-
-  .responsive-direction(xs);
-
-  // Small grid
-  //
-  // Columns, offsets, pushes, and pulls for the small device range, from phones
-  // to tablets / phones.
-
-  @media (min-width: @screen-sm) {
-    .responsive-direction(sm);
-  }
-
-  @media (min-width: @screen-md) {
-    .responsive-direction(md);
-  }
-
-  @media (min-width: @screen-lg) {
-    .responsive-direction(lg);
-  }
-
-  @media (min-width: @screen-xl) {
-    .responsive-direction(xl);
-  }
-
-  @media (min-width: @screen-xxl) {
-    .responsive-direction(xxl);
-  }
-}
-
-.rs-stack-item {
-  align-self: var(--rs-stack-item-align-self);
-  order: var(--rs-stack-item-order);
-  flex: var(--rs-stack-item-flex);
-  flex-grow: var(--rs-stack-item-grow);
-  flex-shrink: var(--rs-stack-item-shrink);
-  flex-basis: var(--rs-stack-item-flex-basis);
-}
-
-.responsive-direction(@size) {
-  &-@{size}-column {
-    flex-direction: column;
-  }
-  &-@{size}-row {
-    flex-direction: row;
-  }
-  &-@{size}-column-reverse {
-    flex-direction: column-reverse;
-  }
-  &-@{size}-row-reverse {
-    flex-direction: row-reverse;
-  }
-}

package/Stat/styles/index.less

@@ -1,113 +0,0 @@
-@import '../../styles/common.less';
-@import '../../IconButton/styles/index.less';
-@import '../../Tooltip/styles/index.less';
-
-.rs-stat {
-  --rs-stat-icon-size: 50px;
-  --rs-stat-border-radius: var(--rs-radius-md);
-  --rs-stat-spacing: calc(var(--rs-spacing) * 2.5);
-  --rs-stat-value-font-size: var(--rs-font-size-2xl);
-  --rs-stat-value-unit-font-size: var(--rs-font-size-xs);
-  --rs-stat-trend-font-size: var(--rs-font-size-xs);
-
-  display: flex;
-  gap: var(--rs-stat-spacing);
-  align-items: center;
-
-  &-icon {
-    width: var(--rs-stat-icon-size);
-    height: var(--rs-stat-icon-size);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: var(--rs-stat-border-radius);
-  }
-
-  &-body {
-    display: flex;
-    flex-direction: column;
-    gap: calc(var(--rs-spacing) * 2);
-    width: 100%;
-    margin: 0;
-  }
-
-  &-bordered {
-    border: 1px solid var(--rs-border-primary);
-    background-color: var(--rs-stat-body-bg);
-    border-radius: var(--rs-stat-border-radius);
-    padding: 16px;
-  }
-
-  &-label {
-    font-weight: 400;
-    display: inline-flex;
-    align-items: center;
-    color: var(--rs-text-secondary);
-    gap: calc(var(--rs-spacing) * 1.5);
-
-    &-uppercase {
-      text-transform: uppercase;
-    }
-  }
-
-  &-value {
-    display: flex;
-    gap: var(--rs-spacing);
-    align-items: baseline;
-    font-size: var(--rs-stat-value-font-size);
-    font-weight: 600;
-    line-height: 1;
-    margin: 0;
-  }
-
-  &-value-unit {
-    font-size: var(--rs-stat-value-unit-font-size);
-    font-weight: 400;
-  }
-
-  &-trend {
-    display: inline-flex;
-    align-items: center;
-    gap: calc(var(--rs-spacing) / 2);
-    border-radius: var(--rs-radius-sm);
-    font-weight: 600;
-    font-size: var(--rs-stat-trend-font-size);
-    line-height: 1;
-
-    &-up {
-      color: var(--rs-green-900);
-    }
-
-    &-down {
-      color: var(--rs-red-900);
-    }
-
-    &-default {
-      padding: 2px 6px;
-    }
-
-    &-default&-up {
-      background-color: var(--rs-green-100);
-    }
-
-    &-default&-down {
-      background-color: var(--rs-red-100);
-    }
-
-    &-subtle&-up {
-      color: var(--rs-green-600);
-    }
-
-    &-subtle&-down {
-      color: var(--rs-red-600);
-    }
-  }
-
-  &-help-text {
-    color: var(--rs-text-secondary);
-  }
-
-  .rs-progress-line {
-    padding: 0;
-  }
-}

package/StatGroup/styles/index.less

@@ -1,8 +0,0 @@
-.rs-stat-group {
-  --rs-stat-group-columns: 4;
-  --rs-stat-group-spacing: 6px;
-
-  display: grid;
-  grid-template-columns: repeat(var(--rs-stat-group-columns), 1fr);
-  grid-gap: var(--rs-stat-group-spacing);
-}

package/Steps/styles/index.less

@@ -1,222 +0,0 @@
-@import '../../styles/common.less';
-
-//
-// Steps
-// --------------------------------------------------
-.rs-steps {
-  --rs-steps-icon-size: 1.875rem;
-  --rs-steps-icon-font-size: var(--rs-font-size-md);
-  --rs-steps-icon-line-height: @steps-icon-line-height;
-  --rs-steps-title-font-size: var(--rs-font-size-md);
-  --rs-steps-title-line-height: @steps-title-line-height;
-  --rs-steps-title-min-height: 1rem;
-  --rs-steps-item-spacing: calc(var(--rs-spacing) * 10);
-  --rs-steps-description-margin-top: calc(var(--rs-spacing) * 3);
-  --rs-steps-description-font-size: var(--rs-font-size-sm);
-  --rs-steps-description-line-height: @line-height-base;
-
-  // Small
-  &.rs-steps-small {
-    --rs-steps-icon-size: 1.5rem;
-    --rs-steps-icon-font-size: var(--rs-font-size-sm);
-    --rs-steps-icon-line-height: @small-steps-icon-line-height;
-    --rs-steps-item-spacing: calc(var(--rs-spacing) * 8.5);
-    --rs-steps-title-font-size: var(--rs-font-size-sm);
-    --rs-steps-title-line-height: @small-steps-title-line-height;
-    --rs-steps-description-font-size: var(--rs-font-size-xs);
-    --rs-steps-description-line-height: @small-steps-description-line-height;
-  }
-
-  min-height: var(--rs-steps-icon-size);
-
-  // Item content
-  // --------------------------
-  .rs-steps-item-content {
-    color: var(--rs-text-secondary);
-    display: inline-block;
-    // Change static to relative, Make `z-index` more than Tail line
-    position: relative;
-    width: 100%;
-
-    .rs-steps-item-status-process & {
-      color: var(--rs-text-primary);
-    }
-
-    .rs-steps-item-status-error & {
-      color: var(--rs-text-error);
-    }
-  }
-
-  // Item title
-  .rs-steps-item-title {
-    position: relative;
-    font-size: var(--rs-steps-title-font-size);
-    line-height: var(--rs-steps-title-line-height);
-    min-height: var(--rs-steps-title-min-height);
-    padding-inline-end: calc(var(--rs-spacing) * 2.5);
-
-    display: inline-block;
-
-    &:empty {
-      padding-inline-end: 0;
-    }
-  }
-
-  // Item description
-  .rs-steps-item-description {
-    margin-top: var(--rs-steps-description-margin-top);
-    font-size: var(--rs-steps-description-font-size);
-    line-height: var(--rs-steps-description-line-height);
-  }
-}
-
-// Item
-// --------------------------
-.rs-steps-item {
-  padding-inline-start: var(--rs-steps-item-spacing);
-  position: relative;
-  overflow: hidden;
-}
-
-// Item icon
-.rs-steps-item-icon-wrapper {
-  width: var(--rs-steps-icon-size);
-  height: var(--rs-steps-icon-size);
-  font-size: var(--rs-steps-icon-font-size);
-  line-height: var(--rs-steps-icon-line-height);
-  color: var(--rs-text-secondary);
-  text-align: center;
-  position: absolute;
-  top: 0;
-  inset-inline-start: 0;
-  display: flex;
-  align-items: center;
-  border: 1px solid var(--rs-steps-border);
-  border-radius: var(--rs-radius-full);
-
-  // Finish status show check mark.
-  .rs-steps-item-status-finish & {
-    border-color: var(--rs-steps-state-finish);
-    color: var(--rs-steps-state-finish);
-  }
-
-  // Error status show X mark.
-  .rs-steps-item-status-error & {
-    border-color: var(--rs-steps-state-error);
-    color: var(--rs-steps-state-error);
-  }
-
-  .rs-steps-item-status-process & {
-    border-color: var(--rs-steps-state-process);
-    background-color: var(--rs-steps-state-process);
-    color: var(--rs-text-inverse);
-
-    .rs-icon {
-      color: var(--rs-steps-icon-state-process);
-    }
-  }
-
-  &.rs-steps-item-custom-icon {
-    border: none;
-    background: none;
-  }
-
-  // Icon content
-  > .rs-steps-item-icon {
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    text-align: center;
-    position: relative;
-
-    .rs-icon {
-      font-size: var(--rs-font-size-md);
-      vertical-align: middle;
-    }
-  }
-}
-
-.rs-steps-item-tail,
-.rs-steps-item-title::after {
-  position: absolute;
-  border-color: var(--rs-steps-border);
-
-  .rs-steps-item-status-process & {
-    border-color: var(--rs-steps-border);
-  }
-
-  .rs-steps-item-status-finish & {
-    border-color: var(--rs-steps-state-finish);
-  }
-
-  .rs-steps-next-error & {
-    border-color: var(--rs-steps-border-state-error);
-  }
-}
-
-// Horizontal
-.rs-steps-horizontal {
-  display: flex;
-  justify-content: space-between;
-
-  .rs-steps-item {
-    flex-grow: 1;
-    flex-shrink: 1;
-    min-height: var(--rs-steps-icon-size);
-
-    // The last node is self-adaptive width.
-    &:last-child {
-      flex-grow: 0;
-      flex-shrink: 0;
-
-      // The last item hidden tail line
-      .rs-steps-item-title::after {
-        display: none;
-      }
-    }
-
-    // There is a 10px spacing between each item.
-    &:not(:first-child) {
-      padding-inline-start: calc(var(--rs-steps-icon-size) + var(--rs-spacing) * 5);
-
-      .rs-steps-item-icon-wrapper {
-        inset-inline-start: calc(var(--rs-spacing) * 2.5);
-      }
-    }
-  }
-
-  .rs-steps-item-title {
-    &::after {
-      content: '';
-      top: calc(var(--rs-steps-icon-size) / 2);
-      inset-inline-start: 100%;
-      width: 9999px;
-      border-top-width: 1px;
-      border-top-style: solid;
-    }
-  }
-}
-
-// Verticla
-.rs-steps-vertical {
-  .rs-steps-item {
-    padding-bottom: calc(var(--rs-spacing) * 5);
-
-    // There is a 10px spacing between each item.
-    &:not(:first-child) {
-      margin-top: calc(var(--rs-spacing) * 2.5);
-    }
-
-    &:last-child .rs-steps-item-tail {
-      display: none;
-    }
-  }
-
-  .rs-steps-item-tail {
-    top: var(--rs-steps-item-spacing);
-    bottom: 0;
-    inset-inline-start: calc(var(--rs-steps-icon-size) / 2);
-    border-left-width: 1px;
-    border-left-style: solid;
-  }
-}