rsuite 6.0.1 → 6.1.0

package/Toggle/styles/index.scss

@@ -0,0 +1,284 @@
+@use '../../internals/Box/styles/index' as box;
+@use '../../styles/mixins/utilities' as utils;
+@use '../../styles/mixins/color-modes' as color-modes;
+@use '../../styles/colors/colors-base' as colors;
+@use '../../Button/styles/mixin' as button-mixin;
+
+//
+// Toggle
+// --------------------------------------------------
+
+.rs-toggle {
+  // CSS Variables
+  --rs-toggle-transition: 0.2s ease-in-out;
+  --rs-toggle-gap: 10px;
+  --rs-toggle-active-scale: 1.2;
+
+  // 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;
+
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  font-size: var(--rs-toggle-font-size);
+  gap: var(--rs-toggle-gap);
+
+  // Size variants
+  $sizes: xs, sm, md, lg, xl;
+
+  @each $size in $sizes {
+    &[data-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) * var(--rs-toggle-active-scale) - var(--rs-toggle-handle-gap)) * -1
+      );
+    }
+  }
+
+  // Colorful
+  @each $color in colors.$spectrum {
+    &[data-color='#{$color}'] {
+      --rs-toggle-checked-bg: var(--rs-#{$color}-500);
+      --rs-toggle-checked-hover-bg: var(--rs-#{$color}-600);
+    }
+  }
+
+  &: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) * var(--rs-toggle-active-scale));
+    }
+
+    @include color-modes.high-contrast-mode {
+      transition: none;
+      box-shadow: inset 0 0 0 1px var(--rs-toggle-thumb);
+    }
+
+    // Focus state
+    .rs-toggle-input:focus-visible + & {
+      @include utils.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:
+        inset-inline-start var(--rs-toggle-transition),
+        margin-inline-start var(--rs-toggle-transition),
+        width var(--rs-toggle-transition);
+    }
+
+    // Disabled state
+    .rs-toggle[data-disabled='true'] & {
+      background-color: var(--rs-toggle-disabled-bg);
+      color: var(--rs-toggle-disabled-thumb);
+      pointer-events: none;
+    }
+
+    // Checked state
+    .rs-toggle[data-checked='true'] & {
+      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[data-checked='true'][data-disabled='true'] & {
+      background-color: var(--rs-toggle-checked-disabled-bg);
+      color: var(--rs-toggle-checked-disabled-thumb);
+    }
+
+    .rs-toggle[data-loading='true'] & {
+      &::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);
+    }
+
+    .rs-loader-spin::before,
+    .rs-loader-spin::after {
+      border-width: 2px;
+    }
+
+    .rs-toggle[data-checked='true'] & {
+      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[data-checked='true'] & {
+        @include color-modes.high-contrast-mode {
+          &::before {
+            border-color: var(--rs-gray-200);
+          }
+          &::after {
+            border-top-color: var(--rs-gray-500);
+          }
+        }
+      }
+    }
+  }
+}

package/Tooltip/styles/index.scss

@@ -0,0 +1,160 @@
+@use '../../internals/Box/styles/index' as box;
+@use '../../styles/mixins/utilities' as utils;
+@use '../../styles/mixins/color-modes' as color-modes;
+@use './mixins' as tooltip-mixins;
+
+//
+// Tooltips
+// --------------------------------------------------
+
+// Base class
+.rs-tooltip {
+  --rs-tooltip-border-radius: var(--rs-radius-sm);
+  --rs-tooltip-padding-block: 4px;
+  --rs-tooltip-padding-inline: 10px;
+  --rs-tooltip-z-index: var(--rs-zindex-tooltip);
+  --rs-tooltip-max-width: 250px;
+  --rs-tooltip-line-height: var(--rs-text-line-height-xs);
+  --rs-tooltip-position-x: var(--rs-position-x);
+  --rs-tooltip-position-y: var(--rs-position-y);
+  --rs-tooltip-opacity: var(--rs-opacity, 0);
+  --rs-tooltip-arrow-gap-sm: var(--rs-spacing);
+  --rs-tooltip-arrow-gap-lg: calc(var(--rs-spacing) * 2.5);
+  --rs-tooltip-translate-distance: 2px;
+  --rs-tooltip-arrow-width: 6px;
+
+  position: absolute;
+  top: var(--rs-tooltip-position-y);
+  left: var(--rs-tooltip-position-x);
+  z-index: var(--rs-tooltip-z-index);
+  display: block;
+  font-size: var(--rs-font-size-xs);
+  opacity: var(--rs-tooltip-opacity);
+  line-height: var(--rs-tooltip-line-height);
+  max-width: var(--rs-tooltip-max-width);
+  padding: var(--rs-tooltip-padding-block) var(--rs-tooltip-padding-inline);
+  color: var(--rs-tooltip-text);
+  background-color: var(--rs-tooltip-bg);
+  border-radius: var(--rs-tooltip-border-radius);
+  overflow-wrap: break-word;
+
+  &.rs-anim-fade {
+    transition:
+      opacity 0.1s linear,
+      transform 0.1s ease-out;
+  }
+
+  &.rs-anim-in {
+    opacity: 1;
+    transition:
+      opacity 0.15s linear,
+      transform 0.15s ease-in;
+  }
+
+  // Arrows
+  &-arrow::before,
+  &-arrow::after {
+    content: ' ';
+    display: block;
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-color: transparent;
+    border-style: solid;
+  }
+
+  &-arrow::before {
+    display: none;
+  }
+
+  @include color-modes.high-contrast-mode {
+    border: 1px solid var(--rs-border-primary);
+
+    &-arrow::before {
+      display: block;
+    }
+  }
+
+  // Common style for .placement-top*
+  &:where([data-placement*='top']) {
+    margin-top: calc((var(--rs-tooltip-arrow-width) + 2px) * -1);
+    @include tooltip-mixins.set-translate-transition(0, calc(var(--rs-tooltip-translate-distance) * -1));
+
+    @include tooltip-mixins.with-tooltip-arrow(bottom);
+  }
+
+  // Common style for .placement-bottom*
+  &:where([data-placement*='bottom']) {
+    margin-top: calc(var(--rs-tooltip-arrow-width) + 2px);
+    @include tooltip-mixins.set-translate-transition(0, var(--rs-tooltip-translate-distance));
+
+    @include tooltip-mixins.with-tooltip-arrow(top);
+  }
+
+  // Arrow positioning for different placements
+  // Vertical centered arrow
+  &:where([data-placement='bottom'], [data-placement='top']) {
+    &::before,
+    &::after {
+      inset-inline-start: 50%;
+    }
+  }
+
+  &:where([data-placement='bottom-start'], [data-placement='top-start']) {
+    &::before,
+    &::after {
+      inset-inline-start: var(--rs-tooltip-arrow-gap-lg);
+    }
+  }
+
+  &:where([data-placement='bottom-end'], [data-placement='top-end']) {
+    &::before {
+      inset-inline-end: calc(var(--rs-tooltip-arrow-gap-sm) - 1px);
+    }
+
+    &::after {
+      inset-inline-end: var(--rs-tooltip-arrow-gap-sm);
+    }
+  }
+
+  // Horizontal centered arrow
+  &:where([data-placement='left'], [data-placement='right']) {
+    &::before,
+    &::after {
+      top: 50%;
+    }
+  }
+
+  // Horizontal start arrow
+  &:where([data-placement='left-start'], [data-placement='right-start']) {
+    &::before,
+    &::after {
+      top: var(--rs-tooltip-arrow-gap-lg);
+    }
+  }
+
+  // Horizontal end arrow
+  &:where([data-placement='left-end'], [data-placement='right-end']) {
+    &::before {
+      bottom: calc(var(--rs-tooltip-arrow-gap-sm) - 1px);
+    }
+    &::after {
+      bottom: var(--rs-tooltip-arrow-gap-sm);
+    }
+  }
+
+  // Common style for .placement-right*
+  &:where([data-placement*='right']) {
+    margin-left: calc(var(--rs-tooltip-arrow-width) + 2px);
+    @include tooltip-mixins.set-translate-transition(var(--rs-tooltip-translate-distance), 0);
+
+    @include tooltip-mixins.with-tooltip-arrow(left);
+  }
+
+  // Common style for .placement-left*
+  &:where([data-placement*='left']) {
+    margin-left: calc((var(--rs-tooltip-arrow-width) + 2px) * -1);
+    @include tooltip-mixins.set-translate-transition(calc(var(--rs-tooltip-translate-distance) * -1), 0);
+    @include tooltip-mixins.with-tooltip-arrow(right);
+  }
+}

package/Tooltip/styles/mixins.scss

@@ -0,0 +1,56 @@
+@use '../../styles/mixins/hacks' as hacks;
+@use '../../styles/mixins/color-modes' as color-modes;
+
+// Draw a triangle towards given direction
+// @mixin tooltip-arrow($direction, $size, $color)
+//
+// $direction: top | right | bottom | left
+// $size:      Size (height) of the triangle
+// $color:     Filling color of the triangle
+
+@mixin tooltip-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 tooltip's arrow to tooltip
+// $direction: The arrow's pointing direction. It's usually opposite of tooltip's placement
+//             e.g. tooltip[placement="top"] has an arrow[direction="bottom"]
+// $size:      The arrow's size (height)
+// $bg:        The arrow's background color, usually equal to tooltip's background
+// $border:    The arrow's border color, usually equal to tooltip's border (which only take effect
+//             in high-contrast theme)
+@mixin with-tooltip-arrow($direction, $size: 6px, $bg: var(--rs-tooltip-bg), $border: var(--rs-tooltip-border)) {
+  &::after {
+    @include tooltip-arrow($direction, $size, $bg);
+  }
+
+  @include color-modes.high-contrast-mode {
+    &::before {
+      @include tooltip-arrow($direction, $size + 1px, $border);
+    }
+  }
+}
+
+@mixin set-translate-transition($x, $y) {
+  transform: translate($x, $y);
+}

package/Tree/styles/_indent-line.scss

@@ -0,0 +1,8 @@
+.rs-tree-indent-line {
+  border-left: 1px solid var(--rs-tree-indent-line-color);
+  position: absolute;
+  width: 1px;
+  top: -4px;
+  inset-inline-start: 12px;
+  bottom: -4px;
+}

package/Tree/styles/_toggle.scss

@@ -0,0 +1,32 @@
+.rs-tree-node-toggle {
+  cursor: pointer;
+  width: 24px;
+  padding: 4px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  > .rs-tree-node-toggle-icon {
+    display: inline-block;
+    height: 16px;
+    width: 16px;
+    user-select: none;
+  }
+
+  > .rs-tree-node-custom-icon,
+  > .rs-tree-node-loading-icon {
+    display: flex;
+    align-items: center;
+    font-size: var(--rs-font-size-sm);
+  }
+
+  &-placeholder {
+    width: 24px;
+    height: 24px;
+  }
+}
+
+[dir='rtl'] .rs-tree-node-toggle {
+  inset-inline-end: 0;
+  padding-inline-end: inherit;
+}

package/Tree/styles/_variables.scss

@@ -0,0 +1,8 @@
+:root {
+  --rs-tree-node-font-size: var(--rs-font-size-sm);
+  --rs-tree-node-line-height: var(--rs-text-line-height-sm);
+  --rs-tree-node-padding-block: var(--rs-padding-block-md);
+  --rs-tree-node-padding-inline: var(--rs-padding-inline-md);
+  --rs-tree-node-label-padding: var(--rs-spacing);
+  --rs-tree-node-label-border-radius: var(--rs-radius-md);
+}