rsuite 6.0.0-canary-20250507 → 6.0.0-canary-2025062016

package/Text/styles/index.less

@@ -1,122 +0,0 @@
-@import '../../styles/common.less';
-@import 'variables.less';
-@import '../../Kbd/styles/mixin.less';
-
-// Heading
-// -------------------------
-
-.rs-text {
-  font-family: var(--rs-font-family-base);
-  margin: 0;
-  color: var(--rs-text-color, var(--rs-text-primary));
-  font-size: var(--rs-font-size);
-  line-height: var(--rs-text-line-height, @line-height-base);
-  line-clamp: var(--rs-text-max-lines);
-
-  blockquote& {
-    font-style: italic;
-    padding-inline-start: 1.5rem;
-    border-left: 2px solid var(--rs-gray-200);
-  }
-
-  kbd& {
-    .kbd();
-  }
-
-  &.rs-text-muted {
-    color: var(--rs-text-secondary);
-  }
-
-  // Text Align: left | center | right | justify
-  &-left {
-    text-align: start;
-  }
-
-  &-center {
-    text-align: center;
-  }
-
-  &-right {
-    text-align: end;
-  }
-
-  &-justify {
-    text-align: justify;
-  }
-
-  // Text Transform: none | uppercase | lowercase | capitalize
-  &-uppercase {
-    text-transform: uppercase;
-  }
-
-  &-lowercase {
-    text-transform: lowercase;
-  }
-
-  &-capitalize {
-    text-transform: capitalize;
-  }
-
-  // Text Weight: thin | light | regular | medium | semibold | bold | extrabold
-  &-thin {
-    font-weight: var(--rs-text-weight-thin);
-  }
-
-  &-light {
-    font-weight: var(--rs-text-weight-light);
-  }
-
-  &-medium {
-    font-weight: var(--rs-text-weight-medium);
-  }
-
-  &-semibold {
-    font-weight: var(--rs-text-weight-semibold);
-  }
-
-  &-bold {
-    font-weight: var(--rs-text-weight-bold);
-  }
-
-  &-extrabold {
-    font-weight: var(--rs-text-weight-extrabold);
-  }
-
-  &-pre-line {
-    white-space: pre-line;
-  }
-
-  &-ellipsis {
-    overflow: hidden;
-
-    @supports (-webkit-line-clamp: 1) {
-      & {
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
-      }
-    }
-
-    @supports not (-webkit-line-clamp: 1) {
-      & {
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        word-wrap: break-word;
-      }
-    }
-  }
-
-  // Colorful tags
-  each(@spectrum, .(@color) {
-    &-@{color} {
-      --rs-text-color: var(~'--rs-@{color}-500');
-    }
-  });
-
-  // Size variants
-  @sizes: xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl;
-  each(@sizes, .(@size) {
-    &:where([style*='size-@{size}']) {
-      --rs-text-line-height: var(~'--rs-text-line-height-@{size}');
-    }
-  });
-}

package/Text/styles/variables.less

@@ -1,9 +0,0 @@
-:root {
-  --rs-text-weight-thin: 100;
-  --rs-text-weight-light: 300;
-  --rs-text-weight-regular: 400;
-  --rs-text-weight-medium: 500;
-  --rs-text-weight-semibold: 600;
-  --rs-text-weight-bold: 700;
-  --rs-text-weight-extrabold: 800;
-}

package/Textarea/styles/index.less

@@ -1,7 +0,0 @@
-.rs-textarea {
-  --rs-textarea-resize: none;
-
-  overflow: auto;
-  resize: var(--rs-textarea-resize);
-  height: auto;
-}

package/TimePicker/styles/index.less

@@ -1 +0,0 @@
-@import '../../DatePicker/styles/index.less';

package/TimeRangePicker/styles/index.less

@@ -1 +0,0 @@
-@import '../../DateRangePicker/styles/index.less';

package/Timeline/stories/styles.less

@@ -1,29 +0,0 @@
-.custom-timeline {
-  margin-inline-start: 20px;
-
-  .rs-timeline-item-custom-dot {
-    .rs-icon {
-      position: absolute;
-      background: #fff;
-      top: 0;
-      inset-inline-start: -2px;
-      border: 2px solid #ddd;
-      width: 40px;
-      height: 40px;
-      border-radius: var(--rs-radius-full);
-      font-size: var(--rs-font-size-lg);
-      color: #999;
-      margin-inline-start: -13px;
-      justify-content: center;
-      padding: 8px;
-    }
-  }
-
-  .rs-timeline-item-content {
-    margin-inline-start: 24px;
-  }
-}
-
-.rs-timeline-item-content p {
-  margin: 0;
-}

package/Timeline/styles/index.less

@@ -1,174 +0,0 @@
-@import '../../styles/common';
-@import 'mixin';
-
-//
-// Time lines
-// --------------------------------------------------
-
-.rs-timeline {
-  list-style: none;
-  padding: 0;
-  margin-bottom: 0;
-  direction: ltr;
-
-  &-item {
-    position: relative;
-    text-align: start;
-  }
-
-  &-item:not(:last-child) &-item-content {
-    padding-bottom: @time-line-item-content-padding-bottom;
-  }
-
-  &-item-dot {
-    position: absolute;
-    top: @time-line-dot-center-gap;
-
-    &::before {
-      content: '';
-      display: block;
-      width: @time-line-dot-side-length;
-      height: @time-line-dot-side-length;
-      background-color: var(--rs-timeline-indicator-bg);
-      border-radius: var(--rs-radius-full);
-    }
-  }
-
-  &-item-custom-dot {
-    text-align: center;
-
-    &::before {
-      display: none;
-    }
-  }
-
-  &-item-active &-item-dot::before {
-    background-color: var(--rs-timeline-indicator-active-bg);
-  }
-
-  &-item-tail {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    width: @time-line-tail-width;
-    background-color: var(--rs-timeline-indicator-bg);
-  }
-
-  // The first tail need reserved a space.
-  &-item:first-child &-item-tail {
-    top: @time-line-dot-center-gap;
-  }
-
-  // Last item tail need set height.
-  &-item:last-child &-item-tail {
-    bottom: auto;
-    height: (@time-line-dot-center-gap + @time-line-dot-side-length);
-  }
-
-  &-endless &-item:last-child &-item-tail {
-    height: auto;
-    min-height: @time-line-tail-min-height;
-  }
-
-  &-item:only-child &-item-tail {
-    display: none;
-  }
-
-  // Align left
-  .time-line-align(left);
-
-  &-align-left &-item {
-    padding-inline-start: @time-line-item-padding-left;
-  }
-
-  // Align right
-  .time-line-align(right);
-
-  &-align-right &-item-content {
-    text-align: end;
-  }
-
-  // Align alternate
-  &-align-alternate &-item-dot {
-    @dot-offset: (@time-line-dot-side-length / 2);
-
-    inset-inline-start: ~'calc(50% - @{dot-offset})';
-  }
-
-  &-align-alternate &-item-tail {
-    @tail-offset: (@time-line-tail-width / 2);
-
-    inset-inline-start: ~'calc(50% - @{tail-offset})';
-  }
-
-  &-align-alternate &-item-content {
-    width: 50%;
-  }
-
-  &-align-alternate &-item:nth-child(even) &-item-content {
-    text-align: end;
-  }
-
-  &-align-alternate &-item:nth-child(odd) {
-    text-align: end;
-  }
-
-  &-align-alternate &-item:nth-child(odd) &-item-content {
-    display: inline-block;
-    text-align: start;
-  }
-
-  // With time
-  &-with-time &-item {
-    display: flex;
-    padding-inline-start: 0;
-  }
-
-  &-with-time &-item-dot {
-    @dot-offset: (@time-line-dot-side-length / 2);
-
-    inset-inline-start: ~'calc(50% - @{dot-offset})';
-  }
-
-  &-with-time &-item-tail {
-    @tail-offset: (@time-line-tail-width / 2);
-
-    inset-inline-start: ~'calc(50% - @{tail-offset})';
-  }
-
-  &-with-time &-item-time,
-  &-with-time &-item-content {
-    flex: 1 0 50%;
-  }
-
-  &-align-alternate &-item:nth-child(2n),
-  &-with-time&-align-right &-item {
-    flex-direction: row-reverse;
-  }
-
-  &-with-time&-align-right &-item {
-    padding-inline-end: 0;
-  }
-
-  &-with-time&-align-left &-item-time {
-    text-align: end;
-  }
-
-  &-with-time&-align-right &-item-time {
-    text-align: start;
-  }
-
-  &-with-time&-align-left &-item-time,
-  &-with-time&-align-right &-item-content,
-  &-align-alternate &-item:nth-child(2n + 1) &-item-time,
-  &-align-alternate &-item:nth-child(2n) &-item-content {
-    padding-inline-end: @time-line-alternate-time-offset;
-  }
-
-  &-with-time&-align-left &-item-content,
-  &-with-time&-align-right &-item-time,
-  &-align-alternate &-item:nth-child(2n + 1) &-item-content,
-  &-align-alternate &-item:nth-child(2n) &-item-time {
-    padding-inline-start: @time-line-alternate-time-offset;
-  }
-}

package/Timeline/styles/mixin.less

@@ -1,13 +0,0 @@
-.time-line-align(@align:left) {
-  &-align-@{align} &-item-dot {
-    @{align}: 0;
-  }
-
-  &-align-@{align} &-item-tail {
-    @{align}: ((@time-line-dot-side-length - @time-line-tail-width) / 2);
-  }
-
-  &-align-@{align} &-item {
-    padding-@{align}: @time-line-item-padding-left;
-  }
-}

package/Toggle/styles/index.less

@@ -1,278 +0,0 @@
-@import '../../styles/common.less';
-@import '../../Button/styles/mixin.less';
-
-//
-// Toggle
-// --------------------------------------------------
-
-.rs-toggle {
-  // CSS Variables
-  --rs-toggle-transition: 0.2s ease-in-out;
-  --rs-toggle-gap: 10px;
-
-  // Extra small size
-  --rs-toggle-font-size-xs: var(--rs-font-size-2xs);
-  --rs-toggle-inner-font-size-xs: var(--rs-font-size-3xs);
-  --rs-toggle-line-height-xs: 1;
-  --rs-toggle-gap-xs: 4px;
-  --rs-toggle-handle-gap-xs: 2px;
-  --rs-toggle-size-xs: 14px;
-  --rs-toggle-inner-margin-xs: 4px;
-
-  // Small size
-  --rs-toggle-font-size-sm: var(--rs-font-size-xs);
-  --rs-toggle-inner-font-size-sm: var(--rs-font-size-2xs);
-  --rs-toggle-line-height-sm: 1.4;
-  --rs-toggle-gap-sm: 6px;
-  --rs-toggle-handle-gap-sm: 2px;
-  --rs-toggle-size-sm: 18px;
-  --rs-toggle-inner-margin-sm: 6px;
-
-  // Medium size
-  --rs-toggle-font-size-md: var(--rs-font-size-sm);
-  --rs-toggle-inner-font-size-md: var(--rs-font-size-xs);
-  --rs-toggle-line-height-md: 2;
-  --rs-toggle-gap-md: 8px;
-  --rs-toggle-handle-gap-md: 3px;
-  --rs-toggle-size-md: 22px;
-  --rs-toggle-inner-margin-md: 8px;
-
-  // Large size
-  --rs-toggle-font-size-lg: var(--rs-font-size-md);
-  --rs-toggle-inner-font-size-lg: var(--rs-font-size-sm);
-  --rs-toggle-line-height-lg: 2.14285714;
-  --rs-toggle-gap-lg: 10px;
-  --rs-toggle-handle-gap-lg: 4px;
-  --rs-toggle-size-lg: 28px;
-  --rs-toggle-inner-margin-lg: 10px;
-
-  // Extra large size
-  --rs-toggle-font-size-xl: var(--rs-font-size-lg);
-  --rs-toggle-inner-font-size-xl: var(--rs-font-size-md);
-  --rs-toggle-line-height-xl: 2.14285714;
-  --rs-toggle-gap-xl: 12px;
-  --rs-toggle-handle-gap-xl: 5px;
-  --rs-toggle-size-xl: 34px;
-  --rs-toggle-inner-margin-xl: 12px;
-
-  // Size variants
-  @sizes: xs, sm, md, lg, xl;
-
-  each(@sizes, .(@size) {
-    &-@{size} {
-
-      --rs-toggle-font-size: var(~'--rs-toggle-font-size-@{size}');
-      --rs-toggle-inner-font-size: var(~'--rs-toggle-inner-font-size-@{size}');
-      --rs-toggle-line-height: var(~'--rs-toggle-line-height-@{size}');
-      --rs-toggle-inner-margin: var(~'--rs-toggle-inner-margin-@{size}');
-      --rs-toggle-handle-size: calc(var(~'--rs-toggle-size-@{size}') - var(~'--rs-toggle-handle-gap-@{size}') * 2);
-      --rs-toggle-handle-gap: var(~'--rs-toggle-handle-gap-@{size}');
-      --rs-toggle-gap: var(~'--rs-toggle-gap-@{size}');
-      --rs-toggle-min-width: calc(var(~'--rs-toggle-size-@{size}') * 2 - var(--rs-toggle-handle-gap));
-      --rs-toggle-size: var(~'--rs-toggle-size-@{size}');
-      --rs-toggle-checked-margin-left: calc((var(--rs-toggle-size) - var(--rs-toggle-handle-gap)) * -1);
-      --rs-toggle-active-checked-margin-left: calc((var(--rs-toggle-size) * @toggle-active-scale - var(--rs-toggle-handle-gap)) * -1);
-    }
-  });
-
-  // Colorful
-  each(@spectrum, .(@color) {
-    &-@{color} {
-      --rs-toggle-checked-bg: var(~'--rs-@{color}-500');
-      --rs-toggle-checked-hover-bg: var(~'--rs-@{color}-600');
-    }
-  });
-
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  font-size: var(--rs-toggle-font-size);
-  gap: var(--rs-toggle-gap);
-
-  &:where([data-placement='start']) {
-    flex-direction: row-reverse;
-  }
-
-  &-label {
-    cursor: pointer;
-    font-size: inherit;
-  }
-
-  &-inner {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: margin var(--rs-toggle-transition);
-    font-size: var(--rs-toggle-inner-font-size);
-    line-height: var(--rs-toggle-line-height);
-    margin-inline-start: var(--rs-toggle-size);
-    margin-inline-end: var(--rs-toggle-inner-margin);
-    height: var(--rs-toggle-size);
-
-    .rs-icon {
-      font-size: inherit;
-    }
-  }
-
-  &-input {
-    cursor: pointer;
-    position: absolute;
-    inset: 0;
-    opacity: 0;
-  }
-
-  &-track {
-    position: relative;
-    display: inline-block;
-    box-sizing: border-box;
-    vertical-align: middle;
-    background-color: var(--rs-toggle-bg);
-    color: var(--rs-toggle-thumb);
-    cursor: pointer;
-    transition:
-      background-color var(--rs-toggle-transition),
-      width var(--rs-toggle-transition);
-    user-select: none;
-    height: var(--rs-toggle-size);
-    line-height: 1;
-    min-width: var(--rs-toggle-min-width);
-    border-radius: var(--rs-radius-full);
-
-    &::after {
-      width: var(--rs-toggle-handle-size);
-      height: var(--rs-toggle-handle-size);
-      inset-inline-start: var(--rs-toggle-handle-gap);
-      top: var(--rs-toggle-handle-gap);
-      border-radius: var(--rs-radius-full);
-    }
-
-    &:active::after {
-      width: calc(var(--rs-toggle-handle-size) * @toggle-active-scale);
-    }
-
-    .high-contrast-mode({
-      transition: none;
-      box-shadow: inset 0 0 0 1px var(--rs-toggle-thumb);
-    });
-
-    // Focus state
-    .rs-toggle-input:focus-visible + & {
-      .focus-ring();
-      box-shadow:
-        inset 0 0 0 1px var(--rs-toggle-thumb),
-        var(--rs-state-focus-shadow);
-    }
-
-    // Hover state
-    &:hover {
-      background-color: var(--rs-toggle-hover-bg);
-    }
-
-    // Toggle thumb
-    &::after {
-      content: '';
-      cursor: pointer;
-      position: absolute;
-      background-color: currentColor;
-      transition:
-        left var(--rs-toggle-transition),
-        margin-left var(--rs-toggle-transition),
-        width var(--rs-toggle-transition);
-    }
-
-    // Disabled state
-    .rs-toggle-disabled & {
-      background-color: var(--rs-toggle-disabled-bg);
-      color: var(--rs-toggle-disabled-thumb);
-      box-shadow: inset 0 0 0 1px var(--rs-toggle-disabled-thumb);
-      pointer-events: none;
-    }
-
-    // Checked state
-    .rs-toggle-checked & {
-      background-color: var(--rs-toggle-checked-bg);
-      color: var(--rs-toggle-checked-thumb);
-      box-shadow: none;
-
-      &::after {
-        inset-inline-start: 100%;
-        margin-inline-start: var(--rs-toggle-checked-margin-left);
-      }
-
-      &:active::after {
-        margin-inline-start: var(--rs-toggle-active-checked-margin-left);
-      }
-
-      .rs-toggle-inner {
-        margin-inline-end: var(--rs-toggle-size);
-        margin-inline-start: var(--rs-toggle-inner-margin);
-      }
-
-      &:hover {
-        background-color: var(--rs-toggle-checked-hover-bg);
-      }
-    }
-
-    .rs-toggle-disabled.rs-toggle-checked & {
-      background-color: var(--rs-toggle-checked-disabled-bg);
-      color: var(--rs-toggle-checked-disabled-thumb);
-    }
-
-    .rs-toggle-loading & {
-      &::after {
-        display: none;
-      }
-    }
-  }
-
-  &-loader {
-    position: absolute;
-    transition:
-      left var(--rs-toggle-transition),
-      margin-left var(--rs-toggle-transition),
-      width var(--rs-toggle-transition);
-    width: var(--rs-toggle-handle-size);
-    height: var(--rs-toggle-handle-size);
-    inset-inline-start: var(--rs-toggle-handle-gap);
-    top: var(--rs-toggle-handle-gap);
-
-    .rs-loader-spin,
-    .rs-loader-spin::before,
-    .rs-loader-spin::after {
-      width: var(--rs-toggle-handle-size);
-      height: var(--rs-toggle-handle-size);
-    }
-
-    & when (var(--rs-toggle-handle-size) < 16px) {
-      .rs-loader-spin::before,
-      .rs-loader-spin::after {
-        border-width: 2px;
-      }
-    }
-
-    .rs-toggle-checked & {
-      inset-inline-start: 100%;
-      margin-inline-start: var(--rs-toggle-checked-margin-left);
-    }
-
-    .rs-loader-spin {
-      &::before {
-        border-color: var(--rs-toggle-loader-ring);
-      }
-      &::after {
-        border-top-color: var(--rs-toggle-loader-rotor);
-      }
-
-      .rs-toggle-checked & {
-        .high-contrast-mode({
-          &::before {
-            border-color: var(--rs-gray-200);
-          }
-          &::after {
-            border-top-color: var(--rs-gray-500);
-          }
-        });
-      }
-    }
-  }
-}