rsuite 6.0.1 → 6.1.1

package/Accordion/styles/index.scss

@@ -0,0 +1,3 @@
+@use '../../internals/Box/styles/index';
+@use '../../PanelGroup/styles/index' as panel-group;
+@use '../../Panel/styles/index' as panel;

package/Animation/styles/_animation.scss

@@ -0,0 +1,95 @@
+@keyframes slideInLeft {
+  from {
+    opacity: 0;
+    transform: translate3d(-100%, 0, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@keyframes slideOutLeft {
+  from {
+    opacity: 1;
+    transform: none;
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(-100%, 0, 0);
+  }
+}
+
+@keyframes slideInRight {
+  from {
+    opacity: 0;
+    transform: translate3d(100%, 0, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@keyframes slideOutRight {
+  from {
+    opacity: 1;
+    transform: none;
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(100%, 0, 0);
+  }
+}
+
+@keyframes slideInTop {
+  from {
+    opacity: 0;
+    transform: translate3d(0, -100%, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@keyframes slideOutTop {
+  from {
+    opacity: 1;
+    transform: none;
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(0, -100%, 0);
+  }
+}
+
+@keyframes slideInBottom {
+  from {
+    opacity: 0;
+    transform: translate3d(0, 100%, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@keyframes slideOutBottom {
+  from {
+    opacity: 1;
+    transform: none;
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(0, 100%, 0);
+  }
+}

package/Animation/styles/_bounce.scss

@@ -0,0 +1,36 @@
+@use './mixin' as m;
+
+// Bounce
+.rs-anim-bounce-in {
+  animation-name: bounceIn;
+  @include m.animation-common(cubic-bezier(0.68, -0.55, 0.27, 1.55)); // Ease in out
+
+  @keyframes bounceIn {
+    from {
+      opacity: 0;
+      transform: scale(0.8);
+    }
+
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+}
+
+.rs-anim-bounce-out {
+  animation-name: bounceOut;
+  @include m.animation-common(cubic-bezier(0.4, 0, 1, 1)); // Fast out
+
+  @keyframes bounceOut {
+    from {
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    to {
+      opacity: 0;
+      transform: scale(0.8);
+    }
+  }
+}

package/Animation/styles/_collapse.scss

@@ -0,0 +1,23 @@
+.rs-anim-collapse {
+  display: none;
+
+  &.rs-anim-in {
+    display: block;
+  }
+}
+
+tr.rs-anim-collapse.rs-anim-in {
+  display: table-row;
+}
+
+tbody.rs-anim-collapse.rs-anim-in {
+  display: table-row-group;
+}
+
+.rs-anim-collapsing {
+  position: relative;
+  height: 0;
+  overflow: hidden;
+  transition: height var(--rs-anim-collapse-duration) ease,
+    width var(--rs-anim-collapse-duration) ease, visibility var(--rs-anim-collapse-duration) ease;
+}

package/Animation/styles/_fade.scss

@@ -0,0 +1,10 @@
+.rs-anim-fade {
+  opacity: 0;
+  transition: opacity var(--rs-anim-fade-duration) linear;
+  pointer-events: none;
+
+  &.rs-anim-in {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}

package/Animation/styles/_mixin.scss

@@ -0,0 +1,15 @@
+@mixin animation-common($timing) {
+  animation-duration: 0.3s;
+  animation-timing-function: $timing;
+  animation-fill-mode: forwards;
+}
+
+@mixin slide-animation-setting($move-in-animation-name, $move-out-animation-name) {
+  &.rs-anim-slide-in {
+    animation-name: $move-in-animation-name;
+  }
+
+  &.rs-anim-slide-out {
+    animation-name: $move-out-animation-name;
+  }
+}

package/Animation/styles/_slide.scss

@@ -0,0 +1,34 @@
+@use './mixin' as m;
+
+// Slide
+.rs-anim-slide-out {
+  @include m.animation-common(cubic-bezier(0.4, 0, 1, 1)); // Fast out
+}
+
+.rs-anim-slide-in {
+  @include m.animation-common(ease-in-out);
+}
+
+.rs-anim-right {
+  @include m.slide-animation-setting(slideInRight, slideOutRight);
+
+  [dir='rtl'] & {
+    @include m.slide-animation-setting(slideInLeft, slideOutLeft);
+  }
+}
+
+.rs-anim-left {
+  @include m.slide-animation-setting(slideInLeft, slideOutLeft);
+
+  [dir='rtl'] & {
+    @include m.slide-animation-setting(slideInRight, slideOutRight);
+  }
+}
+
+.rs-anim-top {
+  @include m.slide-animation-setting(slideInTop, slideOutTop);
+}
+
+.rs-anim-bottom {
+  @include m.slide-animation-setting(slideInBottom, slideOutBottom);
+}

package/Animation/styles/_variables.scss

@@ -0,0 +1,4 @@
+:root {
+  --rs-anim-fade-duration: 0.15s;
+  --rs-anim-collapse-duration: 0.35s;
+}

package/Animation/styles/index.scss

@@ -0,0 +1,8 @@
+@use '../../styles/themes';
+@use './variables';
+@use './mixin';
+@use './animation';
+@use './slide';
+@use './bounce';
+@use './collapse';
+@use './fade';

package/AutoComplete/styles/index.scss

@@ -0,0 +1,43 @@
+@use '../../internals/Box/styles/index';
+@use '../../internals/Picker/styles/index' as picker;
+@use '../../internals/Picker/styles/mixin' as picker-mixin;
+@use '../../styles/mixins/listbox';
+@use '../../styles/mixins/utilities' as utils;
+@use '../../Input/styles/index' as input;
+@use '../../InputGroup/styles/index' as input-group;
+
+.rs-auto-complete {
+  &-menu {
+    // Auto complete items style the same to Picker menu items
+    @include picker-mixin.picker-listbox-reset;
+  }
+
+  // The same to Picker select menu item
+  &-item {
+    @include listbox.listbox-option;
+
+    &:hover,
+    &:focus,
+    &-focus {
+      @include listbox.listbox-option-active;
+    }
+  }
+
+  .rs-input:focus::-webkit-textfield-decoration-container {
+    visibility: hidden;
+    pointer-events: none;
+  }
+}
+
+.rs-input-group > .rs-auto-complete {
+  position: relative;
+  flex: 1 1 auto;
+  width: 1%;
+  min-width: 0;
+
+  > .rs-input {
+    border-radius: var(--rs-radius-none);
+    border: none;
+    outline: none;
+  }
+}

package/Avatar/styles/index.scss

@@ -0,0 +1,48 @@
+@use '../../internals/Box/styles/index';
+
+.rs-avatar {
+  --rs-avatar-size-xs: 1.25rem; // 20px
+  --rs-avatar-size-sm: 1.875rem; // 30px
+  --rs-avatar-size-md: 2.5rem; // 40px
+  --rs-avatar-size-lg: 3.75rem; // 60px
+  --rs-avatar-size-xl: 5.625rem; // 90px
+  --rs-avatar-size-2xl: 7.5rem; // 120px
+
+  --rs-avatar-border-radius: var(--rs-radius-sm);
+  --rs-avatar-ring-offset-shadow: var(--rs-avatar-offset-color) 0 0 0 2px;
+  --rs-avatar-ring-shadow: var(--rs-avatar-color) 0 0 0 4px;
+  --rs-avatar-color: var(--rs-avatar-bg);
+  --rs-avatar-size: var(--rs-avatar-size-md);
+
+  background-color: var(--rs-avatar-color);
+  color: var(--rs-avatar-text);
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: var(--rs-avatar-border-radius);
+  overflow: hidden;
+  position: relative;
+  width: var(--rs-avatar-size);
+  height: var(--rs-avatar-size);
+
+  &-image {
+    width: var(--rs-avatar-size);
+    height: var(--rs-avatar-size);
+    line-height: var(--rs-avatar-size);
+  }
+
+  &-icon {
+    position: absolute;
+  }
+
+  &-bordered {
+    box-shadow:
+      var(--rs-avatar-ring-offset-shadow),
+      var(--rs-avatar-ring-shadow),
+      0 0 #0000;
+  }
+
+  &-circle {
+    --rs-avatar-border-radius: var(--rs-radius-full);
+  }
+}

package/AvatarGroup/styles/index.scss

@@ -0,0 +1,27 @@
+@use '../../internals/Box/styles/index';
+@use '../../Stack/styles/index' as stack;
+
+.rs-avatar-group {
+  --rs-avatar-group-spacing: 0;
+
+  display: flex;
+  align-items: flex-end;
+  flex-wrap: wrap;
+  gap: var(--rs-avatar-group-spacing);
+
+  &-stack {
+    .rs-avatar {
+      box-sizing: content-box;
+      margin-inline-end: -10px;
+      transition: margin 0.15s;
+
+      &:last-child {
+        margin-inline-end: 0;
+      }
+
+      &:hover {
+        margin-inline-end: 0;
+      }
+    }
+  }
+}

package/Badge/styles/_variables.scss

@@ -0,0 +1,48 @@
+.rs-badge {
+  // Size variables (base md = 0.75rem)
+  --rs-badge-font-size-xs: 0.625rem; // 10px
+  --rs-badge-font-size-sm: 0.6875rem; // 11px
+  --rs-badge-font-size-md: 0.75rem; // 12px
+  --rs-badge-font-size-lg: 0.875rem; // 14px
+  --rs-badge-font-size-xl: 1rem; // 16px
+
+  --rs-badge-line-height-xs: 0.875rem; // 14px
+  --rs-badge-line-height-sm: 0.9375rem; // 15px
+  --rs-badge-line-height-md: 1rem; // 16px
+  --rs-badge-line-height-lg: 1.125rem; // 18px
+  --rs-badge-line-height-xl: 1.25rem; // 20px
+
+  // One char size variables (for single character badges)
+  --rs-badge-one-char-size-xs: 1rem; // 16px
+  --rs-badge-one-char-size-sm: 1.125rem; // 18px
+  --rs-badge-one-char-size-md: 1.25rem; // 20px
+  --rs-badge-one-char-size-lg: 1.5rem; // 24px
+  --rs-badge-one-char-size-xl: 1.75rem; // 28px
+
+  // Dot size variables (for empty badges)
+  --rs-badge-dot-size-xs: 0.375rem; // 6px
+  --rs-badge-dot-size-sm: 0.5rem; // 8px
+  --rs-badge-dot-size-md: 0.625rem; // 10px
+  --rs-badge-dot-size-lg: 0.75rem; // 12px
+  --rs-badge-dot-size-xl: 0.875rem; // 14px
+
+  --rs-badge-offset-x: 5%;
+  --rs-badge-offset-y: 5%;
+  --rs-badge-move: var(--rs-badge-offset, 40%);
+  --rs-badge-one-char-size: var(--rs-badge-one-char-size-md);
+  --rs-badge-dot-size: var(--rs-badge-dot-size-md);
+  --rs-badge-font-size: var(--rs-badge-font-size-md);
+  --rs-badge-line-height: var(--rs-badge-line-height-md);
+
+  --rs-badge-transform-top-start: translate(calc(-1 * var(--rs-badge-move)), calc(-1 * var(--rs-badge-move)));
+  --rs-badge-transform-top-end: translate(var(--rs-badge-move), calc(-1 * var(--rs-badge-move)));
+  --rs-badge-transform-bottom-start: translate(calc(-1 * var(--rs-badge-move)), var(--rs-badge-move));
+  --rs-badge-transform-bottom-end: translate(var(--rs-badge-move), var(--rs-badge-move));
+}
+
+[dir='rtl'] .rs-badge {
+  --rs-badge-transform-top-start: translate(calc(18px - var(--rs-badge-move)), calc(-1 * var(--rs-badge-move)));
+  --rs-badge-transform-top-end: translate(calc(-1 * var(--rs-badge-move)), calc(-1 * var(--rs-badge-move)));
+  --rs-badge-transform-bottom-start: translate(calc(18px - var(--rs-badge-move)), var(--rs-badge-move));
+  --rs-badge-transform-bottom-end: translate(calc(-1 * var(--rs-badge-move)), var(--rs-badge-move));
+}

package/Badge/styles/index.scss

@@ -0,0 +1,111 @@
+@use '../../internals/Box/styles/index';
+@use './variables' as *;
+
+.rs-badge-wrapper {
+  position: relative;
+}
+
+.rs-badge {
+  display: inline-flex;
+
+  &[data-shape='circle'] {
+    --rs-badge-offset: 30%;
+  }
+
+  &:where([data-independent='true']),
+  &-content {
+    opacity: 1;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    background-color: var(--rs-badge-bg);
+    color: var(--rs-badge-text);
+    border-radius: var(--rs-radius-full);
+    font-size: var(--rs-badge-font-size);
+    line-height: var(--rs-badge-line-height);
+    padding-inline: 0.3125rem;
+    transition: opacity 0.3s ease-in-out;
+  }
+
+  &[data-one-char='true'] .rs-badge-content,
+  &[data-one-char='true'][data-independent='true'] {
+    width: var(--rs-badge-one-char-size);
+    height: var(--rs-badge-one-char-size);
+    line-height: var(--rs-badge-one-char-size);
+  }
+
+  &-content {
+    box-sizing: border-box;
+  }
+
+  &[data-hidden='true'] &-content,
+  &[data-hidden='true'][data-independent='true'] {
+    opacity: 0;
+  }
+
+  &[data-compact='true'] &-content,
+  &[data-compact='true'][data-independent='true'] {
+    padding: 0;
+  }
+
+  &:empty,
+  &-content:empty {
+    box-sizing: content-box;
+    width: var(--rs-badge-dot-size);
+    height: var(--rs-badge-dot-size);
+    border-radius: var(--rs-radius-full);
+    padding: 0;
+  }
+
+  &-wrapper &-content {
+    position: absolute;
+    z-index: var(--rs-zindex-badge-content);
+  }
+
+  &[data-outline='true'] &-content {
+    border: 2px solid var(--rs-badge-border);
+  }
+
+  &[data-placement='topStart'] .rs-badge-content {
+    transform: var(--rs-badge-transform-top-start);
+    top: var(--rs-badge-offset-y);
+    inset-inline-start: var(--rs-badge-offset-x);
+  }
+
+  &[data-placement='topEnd'] .rs-badge-content {
+    transform: var(--rs-badge-transform-top-end);
+    top: var(--rs-badge-offset-y);
+    inset-inline-end: var(--rs-badge-offset-x);
+  }
+
+  &[data-placement='bottomStart'] .rs-badge-content {
+    transform: var(--rs-badge-transform-bottom-start);
+    bottom: var(--rs-badge-offset-y);
+    inset-inline-start: var(--rs-badge-offset-x);
+  }
+
+  &[data-placement='bottomEnd'] .rs-badge-content {
+    transform: var(--rs-badge-transform-bottom-end);
+    bottom: var(--rs-badge-offset-y);
+    inset-inline-end: var(--rs-badge-offset-x);
+  }
+}
+
+// Spectrum color classes
+$badge-spectrum: 'red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'violet', 'pink';
+@each $color in $badge-spectrum {
+  .rs-badge[data-color='#{$color}'] {
+    --rs-badge-bg: var(--rs-#{$color}-500);
+  }
+}
+
+// Size classes
+$badge-sizes: 'xs', 'sm', 'md', 'lg', 'xl';
+@each $size in $badge-sizes {
+  .rs-badge[data-size='#{$size}'] {
+    --rs-badge-font-size: var(--rs-badge-font-size-#{$size});
+    --rs-badge-line-height: var(--rs-badge-line-height-#{$size});
+    --rs-badge-one-char-size: var(--rs-badge-one-char-size-#{$size});
+    --rs-badge-dot-size: var(--rs-badge-dot-size-#{$size});
+  }
+}

package/Box/styles/index.scss

@@ -0,0 +1 @@
+@use '../../internals/Box/styles/index';

package/Breadcrumb/styles/index.scss

@@ -0,0 +1,50 @@
+@use '../../internals/Box/styles/index';
+@use '../../styles/mixins/utilities' as utils;
+
+//
+// Breadcrumbs
+// --------------------------------------------------
+
+.rs-breadcrumb {
+  --rs-breadcrumb-spacing: var(--rs-spacing);
+  --rs-breadcrumb-size-sm: var(--rs-font-size-xs);
+  --rs-breadcrumb-size-md: var(--rs-font-size-sm);
+  --rs-breadcrumb-size-lg: var(--rs-font-size-md);
+  --rs-breadcrumb-size: var(--rs-breadcrumb-size-md);
+
+  font-size: var(--rs-breadcrumb-size);
+  color: var(--rs-text-secondary);
+
+  ol {
+    display: flex;
+    flex-wrap: wrap;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    gap: var(--rs-breadcrumb-spacing);
+  }
+
+  // If breadcrumbs has a ci
+  &-item {
+    transition: color 0.3s linear;
+    display: flex;
+    align-items: center;
+    gap: var(--rs-breadcrumb-spacing);
+
+    &:focus {
+      @include utils.tab-focus();
+    }
+
+    &[data-active='true'] {
+      color: var(--rs-breadcrumb-item-active-text);
+    }
+  }
+
+  // Separator has gap with text
+  &-separator {
+    margin: 0 var(--rs-breadcrumb-spacing);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}

package/Button/styles/_mixin.scss

@@ -0,0 +1,83 @@
+@use '../../styles/mixins/color-modes';
+
+// States
+@mixin button-activated {
+  &:hover {
+    @content;
+  }
+}
+
+@mixin button-pressed {
+  &:active,
+  &.rs-btn[data-active='true'] {
+    @content;
+  }
+}
+
+@mixin button-disabled {
+  &:disabled,
+  &.rs-btn[data-disabled='true'] {
+    @content;
+
+    @include color-modes.high-contrast-mode {
+      border-color: var(--rs-btn-default-disabled-border-color);
+    }
+  }
+}
+
+@mixin button-size-lg {
+  --rs-btn-size: var(--rs-btn-size-lg);
+  --rs-btn-font-size: var(--rs-btn-font-size-lg);
+  --rs-btn-line-height: var(--rs-btn-line-height-lg);
+  --rs-btn-padding-inline: var(--rs-btn-padding-inline-lg);
+  --rs-btn-padding-block: var(--rs-btn-padding-block-lg);
+  --rs-btn-icon-size: var(--rs-btn-icon-size-lg);
+}
+
+@mixin button-size-md {
+  --rs-btn-size: var(--rs-btn-size-md);
+  --rs-btn-font-size: var(--rs-btn-font-size-md);
+  --rs-btn-line-height: var(--rs-btn-line-height-md);
+  --rs-btn-padding-inline: var(--rs-btn-padding-inline-md);
+  --rs-btn-padding-block: var(--rs-btn-padding-block-md);
+  --rs-btn-icon-size: var(--rs-btn-icon-size-md);
+}
+
+@mixin button-size-sm {
+  --rs-btn-size: var(--rs-btn-size-sm);
+  --rs-btn-font-size: var(--rs-btn-font-size-sm);
+  --rs-btn-line-height: var(--rs-btn-line-height-sm);
+  --rs-btn-padding-inline: var(--rs-btn-padding-inline-sm);
+  --rs-btn-padding-block: var(--rs-btn-padding-block-sm);
+  --rs-btn-icon-size: var(--rs-btn-icon-size-sm);
+}
+
+@mixin button-size-xs {
+  --rs-btn-size: var(--rs-btn-size-xs);
+  --rs-btn-font-size: var(--rs-btn-font-size-xs);
+  --rs-btn-line-height: var(--rs-btn-line-height-xs);
+  --rs-btn-padding-inline: var(--rs-btn-padding-inline-xs);
+  --rs-btn-padding-block: var(--rs-btn-padding-block-xs);
+  --rs-btn-icon-size: var(--rs-btn-icon-size-xs);
+}
+
+// Button Style Mixins
+@mixin btn-subtle {
+  color: var(--rs-btn-subtle-text);
+  background-color: transparent;
+
+  @include button-activated {
+    color: var(--rs-btn-subtle-hover-text);
+    background-color: var(--rs-btn-subtle-hover-bg);
+  }
+
+  @include button-pressed {
+    color: var(--rs-btn-subtle-active-text);
+    background-color: var(--rs-btn-subtle-active-bg);
+  }
+
+  @include button-disabled {
+    color: var(--rs-btn-subtle-disabled-text);
+    background: none;
+  }
+}

package/Button/styles/_variables.scss

@@ -0,0 +1,38 @@
+:root {
+  --rs-btn-size-xs: 1.5rem; // 24px
+  --rs-btn-size-sm: 1.875rem; // 30px
+  --rs-btn-size-md: 2.25rem; // 36px
+  --rs-btn-size-lg: 2.625rem; // 42px
+
+  --rs-btn-font-size-xs: var(--rs-font-size-xs);
+  --rs-btn-font-size-sm: var(--rs-font-size-sm);
+  --rs-btn-font-size-md: var(--rs-font-size-sm);
+  --rs-btn-font-size-lg: var(--rs-font-size-md);
+
+  --rs-btn-line-height-xs: 1.25rem;
+  --rs-btn-line-height-sm: 1.25rem;
+  --rs-btn-line-height-md: 1.25rem;
+  --rs-btn-line-height-lg: 1.375rem;
+
+  --rs-btn-padding-inline-xs: calc(var(--rs-spacing) * 2);
+  --rs-btn-padding-inline-sm: calc(var(--rs-spacing) * 2.5);
+  --rs-btn-padding-inline-md: calc(var(--rs-spacing) * 3);
+  --rs-btn-padding-inline-lg: calc(var(--rs-spacing) * 3.5);
+  --rs-btn-padding-block-xs: calc(var(--rs-spacing) / 2);
+  --rs-btn-padding-block-sm: calc(var(--rs-spacing) * 1.25);
+  --rs-btn-padding-block-md: calc(var(--rs-spacing) * 2);
+  --rs-btn-padding-block-lg: calc(var(--rs-spacing) * 2.5);
+
+  --rs-btn-icon-size-xs: 0.75rem; // 12px
+  --rs-btn-icon-size-sm: 1rem; // 16px
+  --rs-btn-icon-size-md: 1rem; // 16px
+  --rs-btn-icon-size-lg: 1.25rem; // 20px
+
+  --rs-btn-ghost-border-width: 1px;
+  --rs-btn-loading-spin-default-diameter: 18px;
+  --rs-btn-loading-spin-xs-diameter: 16px;
+  --rs-btn-loading-spin-ring-wide: 3px;
+  --rs-btn-font-weight: normal;
+  --rs-btn-transition: color 0.15s ease-out, background-color 0.15s ease-out;
+  --rs-btn-icon-gap: 5px;
+}