rsuite 6.0.1 → 6.1.0

package/Tag/styles/_variables.scss

@@ -0,0 +1,13 @@
+:root {
+  --rs-tag-border-radius: var(--rs-radius-md);
+  --rs-tag-spacing: 0.25rem;
+  --rs-tag-font-size-sm: var(--rs-font-size-xs);
+  --rs-tag-font-size-md: var(--rs-font-size-xs);
+  --rs-tag-font-size-lg: var(--rs-font-size-sm);
+  --rs-tag-padding-sm: 0 8px;
+  --rs-tag-padding-md: 2px 8px;
+  --rs-tag-padding-lg: 5px 10px;
+  --rs-tag-line-height-sm: var(--rs-line-height-sm);
+  --rs-tag-line-height-md: var(--rs-line-height-sm);
+  --rs-tag-line-height-lg: var(--rs-line-height-md);
+}

package/Tag/styles/index.scss

@@ -0,0 +1,62 @@
+@use '../../internals/Box/styles/index' as box;
+@use '../../internals/CloseButton/styles/index' as close-button;
+@use '../../styles/mixins/utilities' as utils;
+@use '../../styles/mixins/color-modes' as color-modes;
+@use 'variables';
+
+//
+// Tags
+// --------------------------------------------------
+
+.rs-tag {
+  // Base styles
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  gap: var(--rs-tag-spacing);
+  border-radius: var(--rs-tag-border-radius);
+  padding: var(--rs-tag-padding, var(--rs-tag-padding-md));
+  font-size: var(--rs-tag-font-size, var(--rs-tag-font-size-md));
+  line-height: var(--rs-tag-line-height, var(--rs-tag-line-height-md));
+  background-color: var(--rs-tag-bg);
+  color: var(--rs-tag-text, var(--rs-text-primary));
+
+  // Close icon
+  &-icon-close {
+    padding: 0;
+  }
+
+  // Size variants
+  @each $size in (lg, md, sm) {
+    &[data-size='#{$size}'] {
+      --rs-tag-padding: var(--rs-tag-padding-#{$size});
+      --rs-tag-font-size: var(--rs-tag-font-size-#{$size});
+      --rs-tag-line-height: var(--rs-tag-line-height-#{$size});
+    }
+  }
+
+  // Colorful tags
+  @each $color
+    in (
+      'primary',
+      'secondary',
+      'success',
+      'warning',
+      'error',
+      'info',
+      'dark',
+      'cyan',
+      'violet',
+      'orange',
+      'yellow',
+      'green',
+      'red',
+      'blue'
+    )
+  {
+    &[data-color='#{$color}'] {
+      --rs-tag-bg: var(--rs-#{$color}-500);
+      --rs-tag-text: #fff;
+    }
+  }
+}

package/TagGroup/styles/index.scss

@@ -0,0 +1,14 @@
+@use '../../internals/Box/styles/index' as box;
+
+//
+// Tag Group
+// --------------------------------------------------
+
+.rs-tag-group {
+  --rs-tag-group-gap: 0.625rem; // 10px
+
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--rs-tag-group-gap);
+}

package/TagInput/styles/index.scss

@@ -0,0 +1,5 @@
+@use '../../TagPicker/styles/index';
+
+.rs-picker[data-disabled-options='true'] {
+  --rs-picker-textbox-margin-inline: var(--rs-picker-textbox-min-height);
+}

package/TagPicker/styles/index.scss

@@ -0,0 +1,141 @@
+@use '../../internals/Box/styles/index' as box;
+@use '../../styles/mixins/utilities' as utils;
+@use '../../styles/mixins/color-modes' as color-modes;
+@use '../../InputPicker/styles/index' as input-picker;
+@use '../../CheckPicker/styles/index' as check-picker;
+@use '../../internals/Picker/styles/mixin' as picker-mixin;
+
+.rs-picker[data-picker='tag'] {
+  --rs-tag-picker-input-font-size-xs: var(--rs-font-size-xs);
+  --rs-tag-picker-input-font-size-sm: var(--rs-font-size-sm);
+  --rs-tag-picker-input-font-size-md: var(--rs-font-size-sm);
+  --rs-tag-picker-input-font-size-lg: var(--rs-font-size-md);
+  --rs-tag-border-radius: var(--rs-radius-sm);
+  --rs-tag-picker-padding-block: calc(var(--rs-padding-block-md) - 1px);
+
+  position: relative;
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--rs-picker-toggle-border-color, var(--rs-border-primary));
+  border-radius: var(--rs-radius-md);
+  transition: var(--rs-picker-transition);
+  background-color: var(--rs-input-bg);
+  overflow: hidden;
+
+  .rs-picker-toggle {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    border: none !important;
+    height: var(--rs-picker-input-height, 100%);
+    inset-inline-start: 0;
+    cursor: text;
+    box-shadow: none;
+    padding-block: var(--rs-tag-picker-padding-block);
+  }
+
+  .rs-picker-textbox {
+    // Set the minimum width of the text box according to the default 20 characters in the browser
+    // Consistent with InputPicker
+    min-width: calc(20 * 0.5875rem);
+    margin-inline-end: var(--rs-picker-textbox-min-height);
+  }
+
+  .rs-tag {
+    vertical-align: top;
+    @include utils.ellipsis-basic();
+  }
+
+  .rs-picker-search {
+    > input {
+      background: none;
+      outline: none;
+      border: none;
+      width: 100%;
+    }
+
+    &,
+    &-input,
+    &-input > input {
+      display: inline-block;
+      width: auto;
+      min-width: 14px;
+    }
+
+    &-input > input {
+      padding: 0;
+      border: transparent;
+      background: transparent;
+    }
+  }
+
+  .rs-picker-textbox {
+    min-height: var(--rs-picker-textbox-min-height, 34px);
+    position: relative;
+    // make sure tag in front of toggle
+    z-index: calc(var(--rs-zindex-picker-toggle) + 1);
+
+    .rs-picker-search-input {
+      font-size: var(--rs-tag-picker-input-font-size, 0.875rem);
+      padding: var(--rs-tag-picker-input-padding, 2px 4px);
+    }
+  }
+
+  .rs-picker-tag-list {
+    display: inline-flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    gap: var(--rs-tag-spacing, 4px);
+    padding: var(--rs-tag-list-padding, 4px);
+    padding-inline-end: 0;
+
+    .rs-tag {
+      border-radius: var(--rs-tag-border-radius);
+    }
+  }
+}
+
+.rs-plaintext .rs-tag {
+  margin: 0;
+}
+
+// Tag Picker Size
+// --------------------------------------------------
+.rs-picker[data-picker='tag'] {
+  &[data-size='lg'] {
+    --rs-tag-spacing: 5px;
+    --rs-tag-list-padding: 5px;
+    --rs-picker-textbox-min-height: 40px;
+    --rs-tag-picker-input-font-size: var(--rs-tag-picker-input-font-size-lg);
+    --rs-tag-picker-input-padding: 3px 5px;
+    --rs-tag-picker-padding-block: var(--rs-btn-padding-block-lg);
+  }
+
+  // Default size
+  &[data-size='md'] {
+    --rs-tag-spacing: 5px;
+    --rs-tag-list-padding: 5px;
+    --rs-picker-textbox-min-height: 34px;
+    --rs-tag-picker-input-font-size: var(--rs-tag-picker-input-font-size-md);
+    --rs-tag-picker-input-padding: 2px 4px;
+    --rs-tag-picker-padding-block: var(--rs-btn-padding-block-md);
+  }
+
+  &[data-size='sm'] {
+    --rs-tag-spacing: 4px;
+    --rs-tag-list-padding: 4px;
+    --rs-picker-textbox-min-height: 28px;
+    --rs-tag-picker-input-font-size: var(--rs-tag-picker-input-font-size-sm);
+    --rs-tag-picker-input-padding: 0 2px;
+    --rs-tag-picker-padding-block: var(--rs-btn-padding-block-sm);
+  }
+
+  &[data-size='xs'] {
+    --rs-tag-spacing: 2px;
+    --rs-tag-list-padding: 1px;
+    --rs-picker-textbox-min-height: 22px;
+    --rs-tag-picker-input-font-size: var(--rs-tag-picker-input-font-size-xs);
+    --rs-tag-picker-input-padding: 0 1px;
+    --rs-tag-picker-padding-block: var(--rs-btn-padding-block-xs);
+  }
+}

package/Text/styles/index.scss

@@ -0,0 +1,142 @@
+@use '../../internals/Box/styles/index' as box;
+@use '../../styles/mixins/utilities' as utils;
+@use '../../styles/mixins/color-modes' as color-modes;
+@use './variables';
+@use '../../Kbd/styles/mixin' as kbd;
+
+// Heading
+// -------------------------
+
+.rs-text {
+  // Base styles
+  font-family: var(--rs-font-family-base);
+  margin: 0;
+  color: var(--rs-text-color, var(--rs-text-primary));
+  font-size: var(--rs-font-size);
+  line-height: var(--rs-text-line-height, var(--rs-line-height-md));
+  line-clamp: var(--rs-text-max-lines);
+
+  &.rs-text-muted {
+    color: var(--rs-text-secondary);
+  }
+
+  // Text Align: left | center | right | justify
+  &-left {
+    text-align: start;
+  }
+
+  &-center {
+    text-align: center;
+  }
+
+  &-right {
+    text-align: end;
+  }
+
+  &-justify {
+    text-align: justify;
+  }
+
+  // Text Transform: none | uppercase | lowercase | capitalize
+  &-uppercase {
+    text-transform: uppercase;
+  }
+
+  &-lowercase {
+    text-transform: lowercase;
+  }
+
+  &-capitalize {
+    text-transform: capitalize;
+  }
+
+  // Text Weight: thin | light | regular | medium | semibold | bold | extrabold
+  &-thin {
+    font-weight: var(--rs-text-weight-thin);
+  }
+
+  &-light {
+    font-weight: var(--rs-text-weight-light);
+  }
+
+  &-medium {
+    font-weight: var(--rs-text-weight-medium);
+  }
+
+  &-semibold {
+    font-weight: var(--rs-text-weight-semibold);
+  }
+
+  &-bold {
+    font-weight: var(--rs-text-weight-bold);
+  }
+
+  &-extrabold {
+    font-weight: var(--rs-text-weight-extrabold);
+  }
+
+  &-pre-line {
+    white-space: pre-line;
+  }
+
+  &-ellipsis {
+    overflow: hidden;
+
+    @supports (-webkit-line-clamp: 1) {
+      & {
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+      }
+    }
+
+    @supports not (-webkit-line-clamp: 1) {
+      & {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        word-wrap: break-word;
+      }
+    }
+  }
+
+  // Colorful tags
+  @each $color
+    in (
+      'primary',
+      'secondary',
+      'success',
+      'warning',
+      'error',
+      'info',
+      'dark',
+      'cyan',
+      'violet',
+      'orange',
+      'yellow',
+      'green',
+      'red',
+      'blue'
+    )
+  {
+    &-#{$color} {
+      --rs-text-color: var(--rs-#{$color}-500);
+    }
+  }
+
+  // Size variants
+  $sizes: xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl;
+  @each $size in $sizes {
+    &:where([style*='size-#{$size}']) {
+      --rs-text-line-height: var(--rs-text-line-height-#{$size});
+    }
+  }
+}
+
+kbd.rs-text {
+  @include kbd.kbd();
+}
+
+blockquote.rs-text {
+  font-style: italic;
+  padding-inline-start: 1.5rem;
+  border-left: 2px solid var(--rs-gray-200);
+}

package/Text/styles/variables.scss

@@ -0,0 +1,9 @@
+:root {
+  --rs-text-weight-thin: 100;
+  --rs-text-weight-light: 300;
+  --rs-text-weight-regular: 400;
+  --rs-text-weight-medium: 500;
+  --rs-text-weight-semibold: 600;
+  --rs-text-weight-bold: 700;
+  --rs-text-weight-extrabold: 800;
+}

package/Textarea/styles/index.scss

@@ -0,0 +1,9 @@
+@use '../../internals/Box/styles/index' as box;
+
+.rs-textarea {
+  --rs-textarea-resize: none;
+
+  overflow: auto;
+  resize: var(--rs-textarea-resize);
+  height: auto;
+}

package/TimePicker/styles/index.scss

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

package/TimeRangePicker/styles/index.scss

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

package/Timeline/stories/styles.scss

@@ -0,0 +1,29 @@
+.custom-timeline {
+  margin-inline-start: 20px;
+
+  .rs-timeline-item-custom-dot {
+    .rs-icon {
+      position: absolute;
+      background: #fff;
+      top: 0;
+      inset-inline-start: -2px;
+      border: 2px solid #ddd;
+      width: 40px;
+      height: 40px;
+      border-radius: var(--rs-radius-full);
+      font-size: var(--rs-font-size-lg);
+      color: #999;
+      margin-inline-start: -13px;
+      justify-content: center;
+      padding: 8px;
+    }
+  }
+
+  .rs-timeline-item-content {
+    margin-inline-start: 24px;
+  }
+}
+
+.rs-timeline-item-content p {
+  margin: 0;
+}

package/Timeline/styles/_mixin.scss

@@ -0,0 +1,13 @@
+@mixin time-line-align($align: left) {
+  &-align-#{$align} &-item-dot {
+    #{$align}: 0;
+  }
+
+  &-align-#{$align} &-item-tail {
+    #{$align}: calc(var(--rs-time-line-dot-side-length) / 2 - var(--rs-time-line-tail-width) / 2);
+  }
+
+  &-align-#{$align} &-item {
+    padding-#{$align}: var(--rs-time-line-item-content-margin-left);
+  }
+}

package/Timeline/styles/index.scss

@@ -0,0 +1,187 @@
+@use '../../internals/Box/styles/index' as box;
+@use '../../styles/mixins/utilities' as utils;
+@use '../../styles/mixins/color-modes' as color-modes;
+@use './mixin';
+
+//
+// Time lines
+// --------------------------------------------------
+
+.rs-timeline {
+  // CSS Variables
+  --rs-time-line-tail-min-height: 2.375rem; // 20px + 18px
+  --rs-time-line-item-content-margin: 12px;
+  --rs-time-line-dot-side-length: 10px;
+  --rs-time-line-alternate-time-offset: calc(
+    var(--rs-time-line-dot-side-length) / 2 + var(--rs-time-line-item-content-margin)
+  ); // 5px + 12px
+  --rs-time-line-dot-center-gap: calc(var(--rs-time-line-dot-side-length) / 2);
+  --rs-time-line-item-content-padding-bottom: 18px;
+  --rs-time-line-tail-width: 2px;
+  --rs-time-line-item-padding: calc(
+    var(--rs-time-line-item-content-margin) + var(--rs-time-line-dot-side-length)
+  );
+
+  // Base styles
+  list-style: none;
+  padding: 0;
+  margin-bottom: 0;
+  direction: ltr;
+
+  &-item {
+    position: relative;
+    text-align: start;
+  }
+
+  &-item:not(:last-child) &-item-content {
+    padding-bottom: var(--rs-time-line-item-content-padding-bottom);
+  }
+
+  &-item-dot {
+    position: absolute;
+    top: var(--rs-time-line-dot-center-gap);
+
+    &::before {
+      content: '';
+      display: block;
+      width: var(--rs-time-line-dot-side-length);
+      height: var(--rs-time-line-dot-side-length);
+      background-color: var(--rs-timeline-indicator-bg);
+      border-radius: var(--rs-radius-full);
+    }
+  }
+
+  &-item-custom-dot {
+    text-align: center;
+
+    &::before {
+      display: none;
+    }
+  }
+
+  &-item-active &-item-dot::before {
+    background-color: var(--rs-timeline-indicator-active-bg);
+  }
+
+  &-item-tail {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: var(--rs-time-line-tail-width);
+    background-color: var(--rs-timeline-indicator-bg);
+  }
+
+  // The first tail need reserved a space.
+  &-item:first-child &-item-tail {
+    top: var(--rs-time-line-dot-center-gap);
+  }
+
+  // Last item tail need set height.
+  &-item:last-child &-item-tail {
+    bottom: auto;
+    height: calc(var(--rs-time-line-dot-center-gap) + var(--rs-time-line-dot-side-length));
+  }
+
+  &-endless &-item:last-child &-item-tail {
+    height: auto;
+    min-height: var(--rs-time-line-tail-min-height);
+  }
+
+  &-item:only-child &-item-tail {
+    display: none;
+  }
+
+  // Align left
+  @include mixin.time-line-align(left);
+
+  &-align-left &-item {
+    padding-inline-start: var(--rs-time-line-item-padding);
+  }
+
+  // Align right
+  @include mixin.time-line-align(right);
+
+  &-align-right &-item {
+    padding-inline-end: var(--rs-time-line-item-padding);
+  }
+
+  &-align-right &-item-content {
+    text-align: end;
+  }
+
+  // Align alternate
+  &-align-alternate &-item-dot {
+    inset-inline-start: calc(50% - var(--rs-time-line-dot-side-length) / 2);
+  }
+
+  &-align-alternate &-item-tail {
+    inset-inline-start: calc(50% - var(--rs-time-line-tail-width) / 2);
+  }
+
+  &-align-alternate &-item-content {
+    width: 50%;
+  }
+
+  &-align-alternate &-item:nth-child(even) &-item-content {
+    text-align: end;
+  }
+
+  &-align-alternate &-item:nth-child(odd) {
+    text-align: end;
+  }
+
+  &-align-alternate &-item:nth-child(odd) &-item-content {
+    display: inline-block;
+    text-align: start;
+  }
+
+  // With time
+  &-with-time &-item {
+    display: flex;
+    padding-inline-start: 0;
+  }
+
+  &-with-time &-item-dot {
+    inset-inline-start: calc(50% - var(--rs-time-line-dot-side-length) / 2);
+  }
+
+  &-with-time &-item-tail {
+    inset-inline-start: calc(50% - var(--rs-time-line-tail-width) / 2);
+  }
+
+  &-with-time &-item-time,
+  &-with-time &-item-content {
+    flex: 1 0 50%;
+  }
+
+  &-align-alternate &-item:nth-child(2n),
+  &-with-time.rs-timeline-align-right &-item {
+    flex-direction: row-reverse;
+  }
+
+  &-with-time.rs-timeline-align-right &-item {
+    padding-inline-end: 0;
+  }
+
+  &-with-time.rs-timeline-align-left &-item-time {
+    text-align: end;
+  }
+
+  &-with-time.rs-timeline-align-right &-item-time {
+    text-align: start;
+  }
+
+  &-with-time.rs-timeline-align-left &-item-time,
+  &-with-time.rs-timeline-align-right &-item-content,
+  &-align-alternate &-item:nth-child(2n + 1) &-item-time,
+  &-align-alternate &-item:nth-child(2n) &-item-content {
+    padding-inline-end: var(--rs-time-line-alternate-time-offset);
+  }
+
+  &-with-time.rs-timeline-align-left &-item-content,
+  &-with-time.rs-timeline-align-right &-item-time,
+  &-align-alternate &-item:nth-child(2n + 1) &-item-content,
+  &-align-alternate &-item:nth-child(2n) &-item-time {
+    padding-inline-start: var(--rs-time-line-alternate-time-offset);
+  }
+}