rsuite 6.0.1 → 6.1.0

package/PanelGroup/styles/index.scss

@@ -0,0 +1,34 @@
+@use '../../internals/Box/styles/index' as box;
+
+//
+// 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.scss

@@ -0,0 +1,3 @@
+@use '../../Input/styles/index' as input;
+@use '../../InputGroup/styles/index' as input-group;
+

package/PasswordStrengthMeter/styles/index.scss

@@ -0,0 +1,41 @@
+@use '../../internals/Box/styles/index' as box;
+
+.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.scss

@@ -0,0 +1,93 @@
+@use '../../internals/Box/styles/index' as box;
+@use '../../Input/styles/index' as input;
+
+.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
+    &[data-size='lg'] {
+      --rs-pin-input-size: var(--rs-pin-input-size-lg);
+    }
+
+    &[data-size='md'] {
+      --rs-pin-input-size: var(--rs-pin-input-size-md);
+    }
+
+    &[data-size='sm'] {
+      --rs-pin-input-size: var(--rs-pin-input-size-sm);
+    }
+
+    &[data-size='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 {
+      border-radius: 0;
+
+      &:not(:first-of-type) {
+        margin-inline-start: -1px;
+      }
+
+      &:where(:first-of-type) {
+        border-start-start-radius: var(--rs-input-border-radius);
+        border-end-start-radius: var(--rs-input-border-radius);
+      }
+
+      &:where(:last-of-type) {
+        border-start-end-radius: var(--rs-input-border-radius);
+        border-end-end-radius: var(--rs-input-border-radius);
+      }
+
+      // Hack: Browser compatibility
+      // In RTL mode, Chrome requires border-radius to be reversed.
+      [dir='rtl'] & {
+        &:not(:last-of-type) {
+          margin-inline-start: -1px;
+        }
+
+        &:where(:first-of-type) {
+          border-start-start-radius: 0;
+          border-end-start-radius: 0;
+          border-start-end-radius: var(--rs-input-border-radius);
+          border-end-end-radius: var(--rs-input-border-radius);
+        }
+
+        &:where(:last-of-type) {
+          border-start-end-radius: 0;
+          border-end-end-radius: 0;
+          border-start-start-radius: var(--rs-input-border-radius);
+          border-end-start-radius: var(--rs-input-border-radius);
+        }
+      }
+
+      // Focus state for attached inputs
+      &:focus {
+        z-index: 1;
+        position: relative;
+      }
+    }
+  }
+}

package/Placeholder/styles/_mixin.scss

@@ -0,0 +1,9 @@
+@use 'sass:list';
+
+@mixin generate-row-width($widths, $n) {
+  @for $i from 1 through $n {
+    &:nth-child(#{$i}) {
+      width: list.nth($widths, $i);
+    }
+  }
+}

package/Placeholder/styles/index.scss

@@ -0,0 +1,155 @@
+@use '../../internals/Box/styles/index' as box;
+@use 'sass:list';
+@use './mixin' as m;
+
+//
+// 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);
+
+      &[data-shape='circle'] {
+        border-radius: var(--rs-radius-full);
+      }
+
+      &[data-shape='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%;
+      @include m.generate-row-width($widths, list.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%;
+        @include m.generate-row-width($widths, list.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);
+  }
+
+  &[data-active='true'] {
+    --rs-placeholder-active-bg: linear-gradient(
+      -45deg,
+      var(--rs-placeholder) 25%,
+      var(--rs-placeholder-active) 37%,
+      var(--rs-placeholder) 63%
+    );
+    --rs-placeholder-active-bg-size: 400% 100%;
+
+    &.rs-placeholder-graph,
+    .rs-placeholder-paragraph-graph,
+    .rs-placeholder-row {
+      background: var(--rs-placeholder-active-bg);
+      background-size: var(--rs-placeholder-active-bg-size) !important;
+      animation: placeholder-active 1.5s ease infinite;
+    }
+  }
+
+  @keyframes placeholder-active {
+    0% {
+      background-position: 100% 50%;
+    }
+
+    100% {
+      background-position: 0 50%;
+    }
+  }
+}

package/Popover/styles/index.scss

@@ -0,0 +1,224 @@
+@use '../../internals/Box/styles/index' as box;
+@use '../../Heading/styles/index' as heading;
+@use '../../styles/mixins/utilities' as utils;
+@use '../../styles/mixins/color-modes' as color-modes;
+@use './mixins';
+
+//
+// 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);
+  --rs-popover-arrow-gap: 4px;
+  --rs-popover-arrow-width: 6px;
+  --rs-popover-arrow-outer-width: 6px;
+  --rs-popover-translate-distance: 2px;
+
+  position: absolute;
+  top: var(--rs-popover-position-y);
+  left: var(--rs-popover-position-x);
+  z-index: var(--rs-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);
+
+  @include utils.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;
+  }
+
+  @include color-modes.high-contrast-mode {
+    border: 1px solid var(--rs-border-primary);
+  }
+
+  // Arrow is outer, Arrow:after is inner
+  > .rs-popover-arrow {
+    border-width: var(--rs-popover-arrow-outer-width);
+
+    &,
+    &::before,
+    &::after {
+      position: absolute;
+      display: block;
+      width: 0;
+      height: 0;
+      border-color: transparent;
+      border-style: solid;
+    }
+
+    &::before,
+    &::after {
+      border-width: var(--rs-popover-arrow-width);
+      content: '';
+    }
+
+    &::before {
+      display: none;
+    }
+
+    @include color-modes.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: calc((var(--rs-popover-arrow-width) + 2px) * -1);
+    @include utils.set-translate-transition(0, calc(var(--rs-popover-translate-distance) * -1));
+
+    > .rs-popover-arrow {
+      margin-inline-start: calc(var(--rs-popover-arrow-outer-width) * -1);
+      bottom: calc(var(--rs-popover-arrow-outer-width) * -1);
+
+      @include mixins.with-popover-arrow(bottom);
+    }
+  }
+
+  &:where([data-placement*='bottom']) {
+    margin-top: calc(var(--rs-popover-arrow-width) + 2px);
+    @include utils.set-translate-transition(0, var(--rs-popover-translate-distance));
+
+    > .rs-popover-arrow {
+      margin-inline-start: calc(var(--rs-popover-arrow-outer-width) * -1);
+      top: calc(var(--rs-popover-arrow-outer-width) * -1);
+
+      @include mixins.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 {
+      inset-inline-end: var(--rs-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: var(--rs-popover-arrow-gap);
+    }
+  }
+}
+
+.rs-popover {
+  --rs-popover-arrow-offset: calc(var(--rs-popover-arrow-outer-width) * -1);
+
+  &:where([data-placement*='right']) {
+    margin-inline-start: calc(var(--rs-popover-arrow-width) + 2px);
+    @include utils.set-translate-transition(var(--rs-popover-translate-distance), 0);
+
+    > .rs-popover-arrow {
+      inset-inline-start: var(--rs-popover-arrow-offset);
+      margin-top: calc(var(--rs-popover-arrow-outer-width) * -1);
+
+      @include mixins.with-popover-arrow(left);
+    }
+
+    [dir='rtl'] & {
+      margin-inline-end: calc(var(--rs-popover-arrow-width) + 2px);
+      > .rs-popover-arrow {
+        inset-inline-start: auto;
+        inset-inline-end: var(--rs-popover-arrow-offset);
+      }
+    }
+  }
+
+  &:where([data-placement*='left']) {
+    margin-inline-start: calc((var(--rs-popover-arrow-width) + 2px) * -1);
+    @include utils.set-translate-transition(calc(var(--rs-popover-translate-distance) * -1), 0);
+
+    > .rs-popover-arrow {
+      inset-inline-end: var(--rs-popover-arrow-offset);
+      margin-top: calc(var(--rs-popover-arrow-outer-width) * -1);
+
+      @include mixins.with-popover-arrow(right);
+    }
+
+    [dir='rtl'] & {
+      margin-inline-end: calc((var(--rs-popover-arrow-width) + 2px) * -1);
+      > .rs-popover-arrow {
+        inset-inline-start: var(--rs-popover-arrow-offset);
+        inset-inline-end: auto;
+      }
+    }
+  }
+}
+
+// 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: var(--rs-popover-arrow-outer-width);
+    }
+  }
+
+  &:where([data-placement='right-start'], [data-placement='left-start']) {
+    > .rs-popover-arrow {
+      margin-top: var(--rs-popover-arrow-outer-width);
+    }
+  }
+}

package/Popover/styles/mixins.scss

@@ -0,0 +1,54 @@
+@forward '../../styles/variables' as vars-*;
+@forward '../../styles/mixins/hacks' as hacks-*;
+@forward '../../styles/mixins/color-modes' as color-modes-*;
+@use '../../styles/mixins/color-modes' as color-modes;
+
+// Draw a triangle towards given direction
+// @mixin popover-arrow($direction, $size, $color)
+//
+// @direction: top | right | bottom | left
+// @size:      Size (height) of the triangle
+// @color:     Filling color of the triangle
+
+@mixin popover-arrow($direction, $size, $color) {
+  @if $direction == top {
+    top: -$size;
+    margin-inline-start: -$size;
+    border-width: 0 $size $size;
+    border-bottom-color: $color;
+  } @else if $direction == bottom {
+    bottom: -$size;
+    margin-inline-start: -$size;
+    border-width: $size $size 0;
+    border-top-color: $color;
+  } @else if $direction == right {
+    right: -$size;
+    margin-top: -$size;
+    border-width: $size 0 $size $size;
+    border-left-color: $color;
+  } @else if $direction == left {
+    left: -$size;
+    margin-top: -$size;
+    border-width: $size $size $size 0;
+    border-right-color: $color;
+  }
+}
+
+// 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)
+@mixin with-popover-arrow($direction, $size: 6px, $bg: var(--rs-bg-overlay), $border: var(--rs-border-primary)) {
+  &::after {
+    @include popover-arrow($direction, $size, $bg);
+  }
+
+  @include color-modes.high-contrast-mode {
+    &::before {
+      @include popover-arrow($direction, $size + 1px, $border);
+    }
+  }
+}

package/Progress/styles/_animation.scss

@@ -0,0 +1,69 @@
+@keyframes progress-active {
+  0% {
+    opacity: 0.1;
+    width: 0;
+  }
+
+  20% {
+    opacity: 0.8;
+    width: 0;
+  }
+
+  100% {
+    opacity: 0;
+    width: 100%;
+  }
+}
+
+@keyframes progress-active-vertical {
+  0% {
+    opacity: 0.1;
+    height: 0;
+  }
+
+  20% {
+    opacity: 0.8;
+    height: 0;
+  }
+
+  100% {
+    opacity: 0;
+    height: 100%;
+  }
+}
+
+@keyframes progress-stripe {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: var(--rs-progress-line-stripe-size) 0;
+  }
+}
+
+@keyframes progress-stripe-vertical {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: 0 var(--rs-progress-line-stripe-size);
+  }
+}
+
+@keyframes progress-indeterminate {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(400%);
+  }
+}
+
+@keyframes progress-indeterminate-vertical {
+  0% {
+    transform: translateY(-100%);
+  }
+  100% {
+    transform: translateY(400%);
+  }
+}

package/Progress/styles/_mixins.scss

@@ -0,0 +1,6 @@
+@mixin vertical-text {
+  writing-mode: vertical-rl;
+  text-orientation: mixed;
+  padding-block: var(--rs-spacing);
+  height: auto;
+}