rsuite 6.0.1 → 6.1.0

package/RadioTile/styles/index.scss

@@ -0,0 +1,80 @@
+@use '../../internals/Box/styles/index' as box;
+
+.rs-radio-tile {
+  --rs-radio-tile-border-radius: var(--rs-radius-md);
+  --rs-radio-tile-padding: calc(var(--rs-spacing) * 2.5);
+  --rs-radio-tile-mark-size: 48px;
+  --rs-radio-tile-spacing: calc(var(--rs-spacing) * 1.5);
+
+  border-radius: var(--rs-radio-tile-border-radius);
+  overflow: hidden;
+  border: 2px solid var(--rs-radio-tile-border);
+  padding: var(--rs-radio-tile-padding);
+  position: relative;
+  cursor: pointer;
+  display: flex;
+  gap: var(--rs-radio-tile-spacing);
+  align-items: center;
+
+  &-label {
+    font-weight: bold;
+  }
+
+  &-content {
+    color: var(--rs-text-secondary);
+  }
+
+  &-mark {
+    background: var(--rs-radio-tile-checked-color);
+    border-end-start-radius: 50%;
+    height: var(--rs-radio-tile-mark-size);
+    width: var(--rs-radio-tile-mark-size);
+    position: absolute;
+    inset-inline-end: calc(var(--rs-radio-tile-mark-size) / -2);
+    top: calc(var(--rs-radio-tile-mark-size) / -2);
+    z-index: 3;
+    opacity: 0;
+
+    &-icon {
+      position: absolute;
+      font-size: var(--rs-font-size-md);
+      top: 25px;
+      inset-inline-start: 7px;
+      color: var(--rs-radio-tile-checked-mark-color);
+    }
+  }
+
+  &[data-checked='true'] &-mark {
+    opacity: 1;
+  }
+
+  &[data-checked='true'][data-disabled='true'] {
+    border-color: var(--rs-radio-tile-checked-disabled-color);
+  }
+
+  &[data-checked='true'][data-disabled='true'] &-mark {
+    background-color: var(--rs-radio-tile-checked-disabled-color);
+  }
+
+  &[data-checked='true'],
+  &:hover:not([data-disabled='true']) {
+    border: 2px solid var(--rs-radio-tile-checked-color);
+  }
+
+  &[data-disabled='true'],
+  &[data-disabled='true'] &-content {
+    color: var(--rs-text-disabled);
+    cursor: var(--rs-cursor-disabled);
+  }
+
+  input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+    position: absolute;
+  }
+
+  &-icon {
+    font-size: var(--rs-radio-tile-icon-size);
+  }
+}

package/RadioTileGroup/styles/index.scss

@@ -0,0 +1 @@
+// RadioTileGroup

package/RangeSlider/styles/index.scss

@@ -0,0 +1,4 @@
+@use '../../Slider/styles/index';
+
+// RangeSlider completely depends on the style of Slider.
+// If new styles are added, they need to be introduced here and introduced in src/styles/index.scss.

package/Rate/styles/index.scss

@@ -0,0 +1,141 @@
+@use '../../internals/Box/styles/index' as box;
+
+// Rate
+// ----------------------
+
+.rs-rate {
+  --rs-rate-size-xs: var(--rs-font-size-lg);
+  --rs-rate-size-sm: var(--rs-font-size-2xl);
+  --rs-rate-size-md: var(--rs-font-size-3xl);
+  --rs-rate-size-lg: var(--rs-font-size-4xl);
+  --rs-rate-size-xl: var(--rs-font-size-5xl);
+  --rs-rate-size: var(--rs-rate-size-md);
+  --rs-rate-before-size: 50%;
+
+  position: relative;
+  display: inline-flex;
+  color: var(--rs-rate-color);
+  font-size: var(--rs-rate-size);
+  list-style: none;
+  vertical-align: middle;
+  margin: 0;
+  padding: 0;
+  gap: calc(var(--rs-spacing) * 2);
+
+  &-character {
+    position: relative;
+    cursor: pointer;
+    outline: none;
+    user-select: none;
+    width: max-content;
+    height: max-content;
+
+    &-before {
+      position: absolute;
+      width: var(--rs-rate-before-size);
+      height: 100%;
+      overflow: hidden;
+      opacity: 0;
+    }
+
+    &-after {
+      color: var(--rs-rate-symbol);
+      filter: grayscale(1);
+
+      @at-root .high-contrast-mode & {
+        > .rs-icon {
+          fill: none;
+          stroke: currentColor;
+        }
+      }
+    }
+
+    &-before,
+    &-after {
+      display: flex;
+      z-index: var(--rs-zindex-rate-character-before);
+
+      > .rs-icon {
+        font-size: inherit;
+      }
+    }
+
+    &:where([data-status='half']) &-before,
+    &:where([data-status='frac']) &-before {
+      opacity: 1;
+      filter: none;
+    }
+
+    &:where([data-status='full']) &-after {
+      color: inherit;
+      filter: none;
+
+      > .rs-icon {
+        fill: currentColor;
+      }
+    }
+
+    &-vertical {
+      width: 100%;
+      height: var(--rs-rate-before-size);
+      flex-direction: column-reverse;
+      bottom: 0;
+    }
+
+    .rs-icon,
+    svg {
+      height: 1em;
+      width: 1em;
+    }
+
+    &-before {
+      .rs-icon,
+      svg {
+        position: absolute;
+      }
+    }
+  }
+
+  &-character {
+    &:hover {
+      transform: scale(1.1);
+    }
+
+    &:active {
+      transform: scale(1);
+    }
+  }
+
+  &:where([data-disabled='true']) {
+    cursor: var(--rs-cursor-disabled);
+    opacity: 0.5;
+    outline: none;
+  }
+
+  &:where([data-disabled='true']) &-character {
+    pointer-events: none;
+  }
+
+  &:where([data-readonly='true']) &-character {
+    cursor: default;
+    pointer-events: none;
+  }
+
+  // Size variants
+  $sizes: xl, lg, md, sm, xs;
+
+  @each $size in $sizes {
+    &.rs-rate-#{$size} {
+      --rs-rate-size: var(--rs-rate-size-#{$size});
+    }
+  }
+
+  // Color variants
+  $spectrum: primary, secondary, success, warning, error, info;
+
+  @each $color in $spectrum {
+    &.rs-rate-#{$color} {
+      --rs-rate-color: var(--rs-#{$color}-500);
+    }
+  }
+}

package/Row/styles/index.scss

@@ -0,0 +1,2 @@
+// Col styles are included in Grid component
+// --------------------------------------------------

package/SegmentedControl/styles/_mixin.scss

@@ -0,0 +1,7 @@
+// Size variants
+@mixin segmented-control-size($size) {
+  --rs-segmented-control-height: var(--rs-segmented-control-height-#{$size});
+  --rs-segmented-control-item-padding-y: var(--rs-segmented-control-item-padding-y-#{$size});
+  --rs-segmented-control-item-padding-x: var(--rs-segmented-control-item-padding-x-#{$size});
+  --rs-segmented-control-font-size: var(--rs-segmented-control-font-size-#{$size});
+}

package/SegmentedControl/styles/_variables.scss

@@ -0,0 +1,43 @@
+:root {
+  // Layout
+  --rs-segmented-control-spacing: calc(var(--rs-spacing) * 1);
+  --rs-segmented-control-border-radius: var(--rs-radius-md);
+  --rs-segmented-control-border-width: 1px;
+  --rs-segmented-control-padding: calc(var(--rs-spacing) * 0.5);
+
+  // Size
+  --rs-segmented-control-height: 36px;
+  --rs-segmented-control-height-xs: 24px;
+  --rs-segmented-control-height-sm: 30px;
+  --rs-segmented-control-height-lg: 42px;
+  --rs-segmented-control-height-xl: 48px;
+  --rs-segmented-control-item-padding-y: calc(var(--rs-spacing) * 1);
+  --rs-segmented-control-item-padding-y-xs: calc(var(--rs-spacing) * 0.5);
+  --rs-segmented-control-item-padding-y-sm: calc(var(--rs-spacing) * 0.75);
+  --rs-segmented-control-item-padding-y-lg: calc(var(--rs-spacing) * 1.25);
+  --rs-segmented-control-item-padding-y-xl: calc(var(--rs-spacing) * 1.5);
+  --rs-segmented-control-item-padding-x: calc(var(--rs-spacing) * 2);
+  --rs-segmented-control-item-padding-x-xs: calc(var(--rs-spacing) * 1.5);
+  --rs-segmented-control-item-padding-x-sm: calc(var(--rs-spacing) * 1.75);
+  --rs-segmented-control-item-padding-x-lg: calc(var(--rs-spacing) * 2.25);
+  --rs-segmented-control-item-padding-x-xl: calc(var(--rs-spacing) * 2.5);
+  --rs-segmented-control-font-size: var(--rs-font-size-sm);
+  --rs-segmented-control-font-size-xs: var(--rs-font-size-extra-small);
+  --rs-segmented-control-font-size-sm: var(--rs-font-size-sm);
+  --rs-segmented-control-font-size-lg: var(--rs-font-size-base);
+  --rs-segmented-control-font-size-xl: var(--rs-font-size-large);
+
+  /* Indicator */
+  --rs-segmented-control-indicator-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  --rs-segmented-control-indicator-border-radius: calc(var(--rs-radius-md) - 2px);
+  --rs-segmented-control-indicator-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1),
+    0 1px 2px -1px rgb(0 0 0 / 0.1);
+
+  /* Underline variant */
+  --rs-segmented-control-underline-height: 2px;
+
+  /* Pill variant */
+  --rs-segmented-control-pill-indicator-height: calc(var(--rs-segmented-control-height) - 8px);
+  --rs-segmented-control-pill-indicator-border-radius: var(--rs-radius-md);
+  --rs-segmented-control-pill-indicator-shadow: var(--rs-shadow-sm);
+}

package/SegmentedControl/styles/index.scss

@@ -0,0 +1,147 @@
+@use '../../styles/mixins/color-modes' as color-modes;
+@use './variables';
+@use './mixin';
+
+.rs-segmented-control {
+  display: inline-flex;
+  position: relative;
+  align-items: center;
+  height: var(--rs-segmented-control-height);
+  border-style: solid;
+  border-width: var(--rs-segmented-control-border-width);
+  border-color: var(--rs-segmented-control-border-color);
+  border-radius: var(--rs-segmented-control-border-radius);
+  padding: var(--rs-segmented-control-padding);
+  gap: var(--rs-segmented-control-spacing);
+  background-color: var(--rs-segmented-control-bg);
+  box-sizing: border-box;
+  font-size: var(--rs-segmented-control-font-size);
+
+  // Size variants
+  &:where([data-size='xs']) {
+    @include mixin.segmented-control-size('xs');
+  }
+
+  &:where([data-size='sm']) {
+    @include mixin.segmented-control-size('sm');
+  }
+
+  &:where([data-size='lg']) {
+    @include mixin.segmented-control-size('lg');
+  }
+
+  &:where([data-size='xl']) {
+    @include mixin.segmented-control-size('xl');
+  }
+
+  &[data-block='true'] {
+    display: flex;
+    width: 100%;
+
+    .rs-segmented-control-item {
+      flex: 1 1 0%;
+      min-width: 0;
+      text-align: center;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  // Hide the indicator when no item is active
+  &:empty {
+    display: none;
+  }
+
+  // Default segmented control item
+  .rs-segmented-control-item {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding-inline: var(--rs-segmented-control-item-padding-x);
+    padding-block: var(--rs-segmented-control-item-padding-y);
+    border-radius: var(--rs-segmented-control-indicator-border-radius);
+    cursor: pointer;
+    user-select: none;
+    transition: color 0.2s ease;
+    color: var(--rs-segmented-control-item-color);
+
+    &[data-active] {
+      color: var(--rs-segmented-control-item-active-color);
+    }
+
+    &[data-disabled] {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    // Hide the radio input
+    .rs-segmented-control-radio {
+      position: absolute;
+      opacity: 0;
+      width: 0;
+      height: 0;
+      margin: 0;
+      padding: 0;
+    }
+
+    .rs-segmented-control-label {
+      font-size: var(--rs-font-size-sm);
+      line-height: var(--rs-line-height-sm);
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  // Animated indicator - base styles
+  .rs-segmented-control-indicator {
+    position: absolute;
+    z-index: 0;
+    transition: var(--rs-segmented-control-indicator-transition);
+    box-shadow: var(--rs-segmented-control-indicator-shadow);
+  }
+
+  // High contrast mode adjustments
+  @include color-modes.high-contrast-mode {
+    .rs-segmented-control-indicator {
+      transition: none;
+    }
+  }
+
+  // Pill indicator style
+  &:where([data-indicator='pill']) {
+    .rs-segmented-control-indicator {
+      background-color: var(--rs-segmented-control-pill-indicator-bg);
+      border-radius: var(--rs-segmented-control-pill-indicator-border-radius);
+      box-shadow: var(--rs-segmented-control-pill-indicator-shadow);
+      height: var(--rs-segmented-control-pill-indicator-height);
+    }
+  }
+
+  // Underline indicator style
+  &:where([data-indicator='underline']) {
+    padding-block: 0;
+    padding-inline: var(--rs-segmented-control-border-radius);
+    background-color: transparent;
+
+    .rs-segmented-control-item {
+      padding-bottom: calc(
+        var(--rs-segmented-control-item-padding-y) + var(--rs-segmented-control-underline-height)
+      );
+      border-radius: 0;
+      position: relative;
+      z-index: 1;
+    }
+
+    .rs-segmented-control-indicator {
+      bottom: -1px;
+      height: var(--rs-segmented-control-underline-height);
+      background-color: var(--rs-segmented-control-underline-color);
+      border-radius: var(--rs-radius-none);
+      box-shadow: none;
+    }
+  }
+}

package/SelectPicker/styles/index.scss

@@ -0,0 +1,44 @@
+@use '../../internals/Box/styles/index' as box;
+@use '../../styles/colors/colors-base' as colors;
+@use '../../styles/mixins/listbox' as listbox;
+@use '../../internals/Picker/styles/index' as picker;
+@use '../../internals/Picker/styles/mixin' as picker-mixin;
+
+// Select Picker
+// ----------------------
+
+// Menu Items (the listbox)
+.rs-picker-select-menu-items {
+  @include picker-mixin.picker-listbox-reset();
+  @include picker-mixin.picker-menu-group-common(picker);
+  @include picker-mixin.picker-menu-group-title(picker);
+  @include picker-mixin.picker-menu-group-closed(picker);
+
+  .rs-picker-menu-group ~ [role='option'] > .rs-picker-select-menu-item {
+    padding-inline-start: 26px;
+  }
+}
+
+// Menu item (the option)
+.rs-picker-select-menu-item {
+  @include listbox.listbox-option();
+
+  &:hover,
+  &:focus,
+  &.rs-picker-select-menu-item-focus {
+    @include listbox.listbox-option-active();
+  }
+
+  &.rs-picker-select-menu-item-active {
+    @include picker-mixin.picker-item-active();
+
+    color: var(--rs-listbox-option-selected-text);
+    background-color: var(--rs-listbox-option-selected-bg);
+  }
+
+  &.rs-picker-select-menu-item-disabled {
+    color: var(--rs-listbox-option-disabled-text);
+    background: none;
+    cursor: var(--rs-cursor-disabled);
+  }
+}

package/Sidebar/styles/index.scss

@@ -0,0 +1,17 @@
+@use '../../internals/Box/styles/index' as box;
+
+.rs-sidebar {
+  --rs-sidebar-width: var(--rs-box-w, 260px);
+  --rs-sidebar-collapse-transition: 0.15s ease-in;
+
+  flex: 0 0 var(--rs-sidebar-width);
+}
+
+.rs-sidebar-collapse {
+  transition:
+    flex var(--rs-sidebar-collapse-transition),
+    width var(--rs-sidebar-collapse-transition);
+  // Fixed firefox doesn't apply flex-basis if children width is so large.
+  // https://github.com/philipwalton/flexbugs/issues/41#issuecomment-111590394
+  min-width: 0;
+}