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

package/PanelGroup/styles/index.less

@@ -1,34 +0,0 @@
-@import '../../styles/common';
-
-//
-// PanelGroup
-// --------------------------------------------------
-
-.rs-panel-group {
-  // The first panel and the last panel in a panel group need set border-radius.
-  border-radius: var(--rs-radius-md);
-  overflow: hidden;
-
-  &-bordered {
-    border: 1px solid var(--rs-border-primary);
-  }
-
-  // Panel in Panel group haven't border.
-  > .rs-panel {
-    border: none;
-
-    // Draw a split line for panel
-    & + .rs-panel {
-      position: relative;
-
-      &::before {
-        content: '';
-        position: absolute;
-        top: 0;
-        border-top: 1px solid var(--rs-border-primary);
-        inset-inline-start: 20px;
-        inset-inline-end: 20px;
-      }
-    }
-  }
-}

package/PasswordInput/styles/index.less

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

package/PasswordStrengthMeter/styles/index.less

@@ -1,39 +0,0 @@
-.rs-password-strength-meter {
-  --rs-password-strength-meter-color-low: var(--rs-color-red);
-  --rs-password-strength-meter-color-medium: var(--rs-color-orange);
-  --rs-password-strength-meter-color-high: var(--rs-color-green);
-  --rs-password-strength-meter-bg: var(--rs-gray-200);
-
-  margin-top: calc(var(--rs-spacing) * 2);
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-
-  &-bar {
-    display: flex;
-    gap: var(--rs-spacing);
-    margin-bottom: var(--rs-spacing);
-    width: 100%;
-  }
-
-  &-segment {
-    flex: 1;
-    height: 6px;
-    border-radius: 2px;
-    background: var(--rs-password-strength-meter-bg);
-    transition: background 0.3s;
-
-    &:where([data-active='true']) {
-      background: var(--rs-password-strength-meter-color-medium);
-
-      &:first-child {
-        background: var(--rs-password-strength-meter-color-low);
-      }
-
-      &:last-child {
-        background: var(--rs-password-strength-meter-color-high);
-      }
-    }
-  }
-}

package/PinInput/styles/index.less

@@ -1,66 +0,0 @@
-@import '../../Input/styles/index.less';
-@import '../../styles/common';
-
-.rs-pin-input {
-  --rs-pin-input-size-lg: 42px;
-  --rs-pin-input-size-md: 36px;
-  --rs-pin-input-size-sm: 30px;
-  --rs-pin-input-size-xs: 24px;
-
-  --rs-pin-input-size: var(--rs-pin-input-size-md);
-
-  display: inline-flex;
-  flex-direction: row;
-  align-items: center;
-
-  // Individual segment styling
-  &-segment {
-    text-align: center;
-    width: var(--rs-pin-input-size);
-    caret-color: transparent;
-
-    // Size variants
-    &.rs-input-lg {
-      --rs-pin-input-size: var(--rs-pin-input-size-lg);
-    }
-
-    &.rs-input-md {
-      --rs-pin-input-size: var(--rs-pin-input-size-md);
-    }
-
-    &.rs-input-sm {
-      --rs-pin-input-size: var(--rs-pin-input-size-sm);
-    }
-
-    &.rs-input-xs {
-      --rs-pin-input-size: var(--rs-pin-input-size-xs);
-    }
-  }
-
-  // Masked input styling
-  &-masked {
-    font-family: monospace;
-  }
-
-  // Attached segments
-  &-attached {
-    .rs-pin-input-segment {
-      &:not(:first-child) {
-        margin-left: -1px;
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-      }
-
-      &:not(:last-child) {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-      }
-
-      // Focus state for attached inputs
-      &:focus {
-        z-index: 1;
-        position: relative;
-      }
-    }
-  }
-}

package/Placeholder/styles/index.less

@@ -1,148 +0,0 @@
-@import '../../styles/common.less';
-@import './mixin.less';
-
-//
-// Placeholder
-// --------------------------------------------------
-
-.rs-placeholder {
-  --rs-placeholder-row-height: 0.625rem;
-  --rs-placeholder-row-spacing: calc(var(--rs-spacing) * 4);
-  --rs-placeholder-paragraph-graph-width: 3.875rem;
-  --rs-placeholder-graph-width: 100%;
-  --rs-placeholder-graph-height: 12.5rem;
-  --rs-placeholder-bg-color: var(--rs-placeholder);
-  --rs-placeholder-bg-size: auto;
-  --rs-placeholder-img-color: var(--rs-bg-card);
-
-  display: flex;
-
-  &-paragraph {
-    justify-content: flex-start;
-    align-items: flex-start;
-    gap: var(--rs-placeholder-row-spacing);
-
-    &-graph {
-      flex: 0 0 auto;
-      width: var(--rs-placeholder-paragraph-graph-width);
-      height: var(--rs-placeholder-paragraph-graph-width);
-      border-radius: var(--rs-radius-xs);
-      background: var(--rs-placeholder-bg-color);
-      background-size: var(--rs-placeholder-bg-size);
-
-      &-circle {
-        border-radius: var(--rs-radius-full);
-      }
-
-      &-image {
-        width: 80px;
-        height: var(--rs-placeholder-paragraph-graph-width);
-        position: relative;
-        overflow: hidden;
-
-        &::after {
-          content: '';
-          width: 0;
-          height: 0;
-          inset-inline-start: 10px;
-          bottom: 10px;
-          position: absolute;
-          border-bottom: 36px solid var(--rs-placeholder-img-color);
-          border-left: 20px solid transparent;
-          border-right: 30px solid transparent;
-        }
-
-        &::before {
-          content: '';
-          width: 0;
-          height: 0;
-          inset-inline-start: 40px;
-          bottom: 10px;
-          position: absolute;
-          border-bottom: 22px solid var(--rs-placeholder-img-color);
-          border-left: 16px solid transparent;
-          border-right: 16px solid transparent;
-        }
-      }
-
-      &-image &-inner {
-        width: 12px;
-        height: 12px;
-        inset-inline-end: 18px;
-        top: 10px;
-        border-radius: var(--rs-radius-full);
-        background: var(--rs-placeholder-img-color);
-        position: absolute;
-      }
-    }
-
-    &-group {
-      width: 100%;
-      display: flex;
-      flex-direction: column;
-      gap: var(--rs-placeholder-row-spacing);
-    }
-
-    .rs-placeholder-row {
-      @widths: 100% 50% 80% 65% 90% 70% 85% 60% 75%;
-      .generate-row-width(@widths, length(@widths));
-    }
-  }
-
-  &-row {
-    background: var(--rs-placeholder-bg-color);
-    background-size: var(--rs-placeholder-bg-size);
-    width: 100%;
-    height: var(--rs-placeholder-row-height);
-  }
-
-  &-grid {
-    &-col {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      align-items: flex-end;
-      gap: var(--rs-placeholder-row-spacing);
-
-      &:first-child {
-        align-items: flex-start; //first col align left
-      }
-
-      .rs-placeholder-row {
-        width: 30%;
-        @widths: 50% 25% 35%;
-        .generate-row-width(@widths, length(@widths));
-      }
-    }
-  }
-
-  &-graph {
-    display: inline-block;
-    width: var(--rs-placeholder-graph-width);
-    height: var(--rs-placeholder-graph-height);
-    background: var(--rs-placeholder-bg-color);
-    background-size: var(--rs-placeholder-bg-size);
-  }
-
-  &&-active {
-    animation: placeholder-active 1.5s ease infinite;
-
-    --rs-placeholder-bg-color: linear-gradient(
-      -45deg,
-      var(--rs-placeholder) 25%,
-      var(--rs-placeholder-active) 37%,
-      var(--rs-placeholder) 63%
-    );
-    --rs-placeholder-bg-size: 400% 100%;
-  }
-
-  @keyframes placeholder-active {
-    0% {
-      background-position: 100% 50%;
-    }
-
-    100% {
-      background-position: 0 50%;
-    }
-  }
-}

package/Placeholder/styles/mixin.less

@@ -1,7 +0,0 @@
-.generate-row-width(@widths, @n) when (@n > 0) {
-  &:nth-child(@{n}) {
-    width: extract(@widths, @n);
-  }
-
-  .generate-row-width(@widths, @n - 1);
-}

package/Popover/styles/index.less

@@ -1,202 +0,0 @@
-@import '../../styles/common.less';
-@import '../../Heading/styles/index.less';
-@import './mixins.less';
-
-//
-// Popovers
-// --------------------------------------------------
-.rs-popover {
-  --rs-popover-font-size: var(--rs-font-size-xs);
-  --rs-popover-line-height: var(--rs-text-line-height-xs);
-  --rs-popover-title-font-size: var(--rs-font-size-sm);
-  --rs-popover-title-line-height: var(--rs-text-line-height-sm);
-  --rs-popover-border-radius: var(--rs-radius-sm);
-  --rs-popover-position-x: var(--rs-position-x);
-  --rs-popover-position-y: var(--rs-position-y);
-  --rs-popover-opacity: var(--rs-opacity, 0);
-
-  position: absolute;
-  top: var(--rs-popover-position-y);
-  left: var(--rs-popover-position-x) /* rtl:ignore */;
-  z-index: @zindex-popover;
-  display: block;
-  padding: 12px;
-  font-size: var(--rs-popover-font-size);
-  background-color: var(--rs-bg-overlay);
-  background-clip: padding-box;
-  border-radius: var(--rs-popover-border-radius);
-  opacity: var(--rs-popover-opacity);
-
-  .drop-shadow(var(--rs-popover-shadow));
-
-  &.rs-anim-fade {
-    transition:
-      opacity 0.1s linear,
-      transform 0.1s ease-out;
-  }
-
-  &.rs-anim-in {
-    --rs-popover-opacity: 1;
-
-    transition:
-      opacity 0.15s linear,
-      transform 0.15s ease-in;
-  }
-
-  .high-contrast-mode({
-    border: 1px solid var(--rs-border-primary);
-  });
-
-  // Arrow is outer, Arrow:after is inner
-  > .rs-popover-arrow {
-    border-width: @popover-arrow-outer-width;
-
-    &,
-    &::before,
-    &::after {
-      position: absolute;
-      display: block;
-      width: 0;
-      height: 0;
-      border-color: transparent;
-      border-style: solid;
-    }
-
-    &::before,
-    &::after {
-      border-width: @popover-arrow-width;
-      content: '';
-    }
-
-    &::before {
-      display: none;
-    }
-
-    .high-contrast-mode({
-      &::before {
-        display: block;
-      }
-    });
-  }
-
-  // Popover Title
-  &-title {
-    margin: 0; // reset heading margin
-    font-size: var(--rs-popover-title-font-size);
-    line-height: var(--rs-popover-title-line-height);
-  }
-
-  // Popover Content
-  &-content {
-    font-size: var(--rs-popover-font-size);
-    line-height: var(--rs-popover-line-height);
-  }
-
-  &-title ~ &-content {
-    margin-top: 8px;
-  }
-}
-
-.rs-popover {
-  // Vertical placement styles (top/bottom)
-  &:where([data-placement*='top']) {
-    margin-top: -(@popover-arrow-width + 2px);
-    .set-translate-transition(0, -@popover-translate-distance);
-
-    > .rs-popover-arrow {
-      margin-inline-start: -@popover-arrow-outer-width;
-      bottom: -@popover-arrow-outer-width;
-
-      .with-popover-arrow(bottom);
-    }
-  }
-
-  &:where([data-placement*='bottom']) {
-    margin-top: (@popover-arrow-width + 2px);
-    .set-translate-transition(0, @popover-translate-distance);
-
-    > .rs-popover-arrow {
-      margin-left: -@popover-arrow-outer-width;
-      top: -@popover-arrow-outer-width;
-
-      .with-popover-arrow(top);
-    }
-  }
-
-  // Arrow positioning for different placements
-  // Vertical centered arrow
-  &:where([data-placement='bottom'], [data-placement='top']) {
-    > .rs-popover-arrow {
-      left: 50%;
-    }
-  }
-
-  &:where([data-placement='bottom-end'], [data-placement='top-end']) {
-    > .rs-popover-arrow {
-      right: @popover-arrow-gap;
-    }
-  }
-
-  &:where([data-placement='left'], [data-placement='right']) {
-    > .rs-popover-arrow {
-      top: 50%;
-    }
-  }
-
-  &:where([data-placement='left-end'], [data-placement='right-end']) {
-    > .rs-popover-arrow {
-      bottom: @popover-arrow-gap;
-    }
-  }
-}
-
-/* rtl:begin:ignore */
-.rs-popover {
-  &:where([data-placement*='right']) {
-    margin-left: (@popover-arrow-width + 2px);
-    .set-translate-transition(@popover-translate-distance, 0);
-
-    > .rs-popover-arrow {
-      left: -@popover-arrow-outer-width;
-      margin-top: -@popover-arrow-outer-width;
-
-      .with-popover-arrow(left);
-    }
-  }
-
-  &:where([data-placement*='left']) {
-    margin-left: -(@popover-arrow-width + 2px);
-    .set-translate-transition(-@popover-translate-distance, 0);
-
-    > .rs-popover-arrow {
-      right: -@popover-arrow-outer-width;
-      margin-top: -@popover-arrow-outer-width;
-
-      .with-popover-arrow(right);
-    }
-  }
-}
-/* rtl:end:ignore */
-
-// Adjust full popover arrow postion
-.rs-popover-full {
-  // Reset content padding when [full]
-  padding: 0;
-
-  // Reset content margin-top when [full]
-  .rs-popover-content {
-    margin-top: 0;
-  }
-
-  &:where([data-placement='top-start'], [data-placement='bottom-start']) {
-    > .rs-popover-arrow {
-      margin-inline-start: @popover-arrow-outer-width;
-    }
-  }
-
-  &:where([data-placement='right-start'], [data-placement='left-start']) {
-    > .rs-popover-arrow {
-      margin-top: @popover-arrow-outer-width;
-    }
-  }
-}

package/Popover/styles/mixins.less

@@ -1,60 +0,0 @@
-@import '../../styles/variables';
-@import '../../styles/mixins/hacks';
-@import '../../styles/mixins/color-modes';
-
-// Draw a triangle towards given direction
-// .popover-arrow(@direction, @size, @color)
-//
-// @direction: top | right | bottom | left
-// @size:      Size (height) of the triangle
-// @color:     Filling color of the triangle
-
-.popover-arrow(top, @size, @color) {
-  top: -@size;
-  margin-left: -@size;
-  border-width: 0 @size @size;
-  border-bottom-color: @color;
-}
-
-.popover-arrow(bottom, @size, @color) {
-  bottom: -@size;
-  margin-left: -@size;
-  border-width: @size @size 0;
-  border-top-color: @color;
-}
-
-/* rtl:begin:ignore */
-.popover-arrow(right, @size, @color) {
-  right: -@size;
-  margin-top: -@size;
-  border-width: @size 0 @size @size;
-  border-left-color: @color;
-}
-
-.popover-arrow(left, @size, @color) {
-  left: -@size;
-  margin-top: -@size;
-  border-width: @size @size @size 0;
-  border-right-color: @color;
-}
-
-/* rtl:end:ignore */
-
-// Append Popover's arrow to Popover
-// @direction: The arrow's pointing direction. It's usually opposite of popover's placement
-//             e.g. popover[placement="top"] has an arrow[direction="bottom"]
-// @size:      The arrow's size (height)
-// @bg:        The arrow's background color, usually equal to popover's background
-// @border:    The arrow's border color, usually equal to popover's border (which only take effect
-//             in high-contrast theme)
-.with-popover-arrow(@direction, @size: @popover-arrow-width, @bg: var(--rs-bg-overlay), @border: var(--rs-border-primary)) {
-  &::after {
-    .popover-arrow(@direction, @size, @bg);
-  }
-
-  .high-contrast-mode({
-    &::before {
-      .popover-arrow(@direction, @size + 1px, @border);
-    }
-  });
-}

package/Progress/styles/animation.less

@@ -1,34 +0,0 @@
-
-@keyframes progress-active {
-  0% {
-    opacity: 0.1;
-    width: 0;
-  }
-
-  20% {
-    opacity: 0.5;
-    width: 0;
-  }
-
-  100% {
-    opacity: 0;
-    width: 100%;
-  }
-}
-
-@keyframes progress-active-vertical {
-  0% {
-    opacity: 0.1;
-    height: 0;
-  }
-
-  20% {
-    opacity: 0.5;
-    height: 0;
-  }
-
-  100% {
-    opacity: 0;
-    height: 100%;
-  }
-}