rsuite 6.0.1 → 6.1.1

package/Heading/styles/_variables.scss

@@ -0,0 +1,19 @@
+:root {
+  --rs-heading-font-family: inherit;
+  --rs-heading-font-weight: bolder;
+  --rs-heading-color: inherit;
+
+  --rs-heading-h1-font-size: var(--rs-font-size-5xl);
+  --rs-heading-h2-font-size: var(--rs-font-size-4xl);
+  --rs-heading-h3-font-size: var(--rs-font-size-3xl);
+  --rs-heading-h4-font-size: var(--rs-font-size-2xl);
+  --rs-heading-h5-font-size: var(--rs-font-size-xl);
+  --rs-heading-h6-font-size: var(--rs-font-size-lg);
+
+  --rs-heading-h1-line-height: var(--rs-text-line-height-5xl);
+  --rs-heading-h2-line-height: var(--rs-text-line-height-4xl);
+  --rs-heading-h3-line-height: var(--rs-text-line-height-3xl);
+  --rs-heading-h4-line-height: var(--rs-text-line-height-2xl);
+  --rs-heading-h5-line-height: var(--rs-text-line-height-xl);
+  --rs-heading-h6-line-height: var(--rs-text-line-height-lg);
+}

package/Heading/styles/index.scss

@@ -0,0 +1,42 @@
+@use '../../internals/Box/styles/index' as box;
+@use './variables';
+
+// Heading
+// -------------------------
+
+.rs-heading {
+  font-family: var(--rs-heading-font-family);
+  font-weight: var(--rs-heading-font-weight);
+  color: var(--rs-heading-color);
+  margin: 0;
+
+  &.h1 {
+    font-size: var(--rs-heading-h1-font-size);
+    line-height: var(--rs-heading-h1-line-height);
+  }
+
+  &.h2 {
+    font-size: var(--rs-heading-h2-font-size);
+    line-height: var(--rs-heading-h2-line-height);
+  }
+
+  &.h3 {
+    font-size: var(--rs-heading-h3-font-size);
+    line-height: var(--rs-heading-h3-line-height);
+  }
+
+  &.h4 {
+    font-size: var(--rs-heading-h4-font-size);
+    line-height: var(--rs-heading-h4-line-height);
+  }
+
+  &.h5 {
+    font-size: var(--rs-heading-h5-font-size);
+    line-height: var(--rs-heading-h5-line-height);
+  }
+
+  &.h6 {
+    font-size: var(--rs-heading-h6-font-size);
+    line-height: var(--rs-heading-h6-line-height);
+  }
+}

package/HeadingGroup/styles/index.scss

@@ -0,0 +1,5 @@
+@use '../../internals/Box/styles/index' as box;
+
+.rs-heading-group {
+  margin-bottom: 1rem;
+}

package/Highlight/styles/index.scss

@@ -0,0 +1,9 @@
+@use '../../internals/Box/styles/index' as box;
+
+// Highlight component styles
+.rs-highlight-mark {
+  background-color: var(--rs-text-highlight-bg);
+  padding: 0 0.2em;
+  font-weight: bolder;
+  border-radius: var(--rs-radius-sm);
+}

package/IconButton/styles/index.scss

@@ -0,0 +1,90 @@
+@use '../../Button/styles/index';
+@use '../../Button/styles/mixin' as btn-mixin;
+
+//
+// IconButton
+// --------------------------------------------------
+.rs-btn-icon {
+  padding: calc((var(--rs-btn-size) - var(--rs-btn-icon-size)) / 2);
+  line-height: var(--rs-btn-icon-size);
+
+  > .rs-icon {
+    font-size: var(--rs-btn-icon-size);
+    vertical-align: bottom;
+  }
+
+  &:not([data-with-text]) {
+    width: var(--rs-btn-size);
+  }
+
+  // Circle Button
+  &[data-shape='circle'] {
+    border-radius: var(--rs-radius-full);
+  }
+}
+
+// Icon Button with text
+@mixin btn-icon-with-text($bg) {
+  > .rs-icon {
+    background-color: $bg;
+  }
+}
+
+// Only support default/primary button
+.rs-btn-icon[data-with-text] {
+  > .rs-icon {
+    position: absolute;
+    top: 0;
+    display: block;
+    background-color: var(--rs-iconbtn-addon);
+    transition: var(--rs-btn-transition);
+    width: var(--rs-btn-size);
+    height: var(--rs-btn-size);
+    padding: calc((var(--rs-btn-size) - var(--rs-btn-icon-size)) / 2);
+  }
+
+  &:where([data-placement='start'], [data-placement='left']) {
+    padding-inline-start: calc(var(--rs-btn-padding-inline) + var(--rs-btn-size));
+
+    > .rs-icon {
+      inset-inline-start: 0;
+      border-right-width: 1px;
+    }
+  }
+
+  &:where([data-placement='end'], [data-placement='right']) {
+    padding-inline-end: calc(var(--rs-btn-padding-inline) + var(--rs-btn-size));
+
+    > .rs-icon {
+      inset-inline-end: 0;
+    }
+  }
+
+  @include btn-mixin.button-activated {
+    @include btn-icon-with-text(var(--rs-iconbtn-activated-addon));
+  }
+
+  @include btn-mixin.button-pressed {
+    @include btn-icon-with-text(var(--rs-iconbtn-pressed-addon));
+  }
+
+  @include btn-mixin.button-disabled {
+    @include btn-icon-with-text(var(--rs-iconbtn-addon));
+  }
+}
+
+.rs-btn-icon[data-with-text][data-appearance='primary'] {
+  @include btn-icon-with-text(var(--rs-iconbtn-primary-addon));
+
+  @include btn-mixin.button-activated {
+    @include btn-icon-with-text(var(--rs-iconbtn-primary-activated-addon));
+  }
+
+  @include btn-mixin.button-pressed {
+    @include btn-icon-with-text(var(--rs-iconbtn-primary-pressed-addon));
+  }
+
+  @include btn-mixin.button-disabled {
+    @include btn-icon-with-text(var(--rs-iconbtn-primary-addon));
+  }
+}

package/Image/styles/index.scss

@@ -0,0 +1,36 @@
+@use '../../internals/Box/styles/index' as box;
+
+.rs-image {
+  --rs-object-fit: cover;
+  --rs-object-position: initial;
+
+  object-fit: var(--rs-object-fit);
+  object-position: var(--rs-object-position);
+  max-width: 100%;
+
+  &-rounded {
+    border-radius: var(--rs-radius-md);
+  }
+
+  &-circle {
+    border-radius: var(--rs-radius-full);
+  }
+
+  &-bordered {
+    border: 1px solid var(--rs-border-primary);
+  }
+
+  &-zoomed {
+    transition: transform 0.3s ease-in-out;
+    cursor: pointer;
+
+    &:hover {
+      transform: matrix(1.25, 0, 0, 1.25, 0, 0);
+    }
+  }
+}
+
+.rs-image-wrapper {
+  position: relative;
+  overflow: hidden;
+}

package/InlineEdit/styles/index.scss

@@ -0,0 +1,51 @@
+@use '../../internals/Box/styles/index' as box;
+@use '../../styles/colors/colors-base' as colors;
+@use '../../Input/styles/index' as input;
+
+.rs-inline-edit {
+  $sizes: xs, sm, md, lg;
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      --rs-inline-edit-font-size: var(--rs-input-font-size-#{$size});
+      --rs-inline-edit-line-height: var(--rs-input-line-height-#{$size});
+      --rs-inline-edit-padding-block: calc(var(--rs-input-padding-block-#{$size}) + var(--rs-input-border-width));
+      --rs-inline-edit-padding-inline: calc(var(--rs-input-padding-inline-#{$size}) + var(--rs-input-border-width));
+    }
+  }
+
+  position: relative;
+  display: inline-block;
+
+  .rs-plaintext {
+    font-size: var(--rs-inline-edit-font-size);
+    line-height: var(--rs-inline-edit-line-height);
+    padding-block: var(--rs-inline-edit-padding-block);
+    padding-inline: var(--rs-inline-edit-padding-inline);
+    border-radius: var(--rs-radius-md);
+
+    &:hover {
+      background-color: var(--rs-inline-edit-hover-bg);
+    }
+  }
+
+  &[data-disabled='true'] {
+    .rs-plaintext {
+      &:hover {
+        background-color: transparent;
+      }
+    }
+  }
+
+  &-controls {
+    position: absolute;
+    inset-block-start: 100%;
+    inset-inline-end: 0px;
+    margin-block-start: 6px;
+    z-index: 7;
+
+    .rs-btn {
+      box-shadow: var(--rs-shadow-sm);
+    }
+  }
+}

package/Input/styles/_mixin.scss

@@ -0,0 +1,39 @@
+@use '../../styles/mixins/color-modes' as cm;
+@use '../../styles/mixins/utilities' as utils;
+
+@mixin default-input {
+  display: block;
+  width: 100%;
+  color: var(--rs-text-primary);
+  background-color: var(--rs-input-bg);
+  background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
+  border: 1px solid var(--rs-border-primary);
+  transition: var(--rs-input-transition);
+  border-radius: var(--rs-input-border-radius);
+  font-size: var(--rs-input-font-size);
+  line-height: var(--rs-input-line-height);
+  padding-block: var(--rs-input-padding-block);
+  padding-inline: var(--rs-input-padding-inline);
+
+  @include cm.high-contrast-mode {
+    transition: none;
+  }
+
+  // Placeholder
+  &::placeholder {
+    color: var(--rs-text-secondary);
+  }
+
+  &:focus {
+    border-color: var(--rs-input-focus-border);
+  }
+
+  &:focus-visible {
+    @include utils.focus-ring;
+  }
+
+  &:disabled {
+    background-color: var(--rs-input-disabled-bg);
+    color: var(--rs-text-disabled);
+  }
+}

package/Input/styles/_variables.scss

@@ -0,0 +1,27 @@
+// Input variables
+:root {
+  --rs-input-border-width: 1px;
+
+  --rs-input-font-size-xs: var(--rs-font-size-xs);
+  --rs-input-font-size-sm: var(--rs-font-size-sm);
+  --rs-input-font-size-md: var(--rs-font-size-sm);
+  --rs-input-font-size-lg: var(--rs-font-size-md);
+
+  --rs-input-line-height-xs: var(--rs-line-height-xs);
+  --rs-input-line-height-sm: var(--rs-line-height-md);
+  --rs-input-line-height-md: var(--rs-line-height-md);
+  --rs-input-line-height-lg: var(--rs-line-height-lg);
+
+  --rs-input-border-radius: var(--rs-radius-md);
+
+  --rs-input-padding-block-xs: calc(var(--rs-spacing-block-xs) - var(--rs-input-border-width));
+  --rs-input-padding-block-sm: calc(var(--rs-spacing-block-sm) - var(--rs-input-border-width));
+  --rs-input-padding-block-md: calc(var(--rs-padding-block-md) - var(--rs-input-border-width));
+  --rs-input-padding-block-lg: calc(var(--rs-spacing-block-lg) - var(--rs-input-border-width));
+  --rs-input-padding-inline-xs: calc(var(--rs-spacing) - var(--rs-input-border-width));
+  --rs-input-padding-inline-sm: calc(calc(var(--rs-spacing) * 2) - var(--rs-input-border-width));
+  --rs-input-padding-inline-md: calc(calc(var(--rs-spacing) * 2.5) - var(--rs-input-border-width));
+  --rs-input-padding-inline-lg: calc(calc(var(--rs-spacing) * 3) - var(--rs-input-border-width));
+
+  --rs-input-transition: border-color ease-in-out 0.15s;
+}

package/Input/styles/index.scss

@@ -0,0 +1,23 @@
+@use '../../internals/Box/styles/index' as box;
+@use './mixin';
+@use './variables';
+
+//
+// Forms
+// --------------------------------------------------
+
+// Common form controls
+.rs-input {
+  @include mixin.default-input;
+
+  $sizes: (xs, sm, md, lg);
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      --rs-input-font-size: var(--rs-input-font-size-#{$size});
+      --rs-input-line-height: var(--rs-input-line-height-#{$size});
+      --rs-input-padding-block: var(--rs-input-padding-block-#{$size});
+      --rs-input-padding-inline: var(--rs-input-padding-inline-#{$size});
+    }
+  }
+}

package/InputGroup/styles/index.scss

@@ -0,0 +1,264 @@
+@use '../../internals/Box/styles/index' as box;
+@use '../../styles/mixins/color-modes';
+@use '../../styles/mixins/utilities' as utils;
+@use '../../Button/styles/mixin' as button;
+@use '../../Input/styles/mixin' as input-mixin;
+
+//
+// Input Group Component Styles
+// --------------------------------------------------
+// The Input Group component allows you to create grouped form controls by combining
+// inputs with addons, buttons, or other elements.
+
+.rs-input-group {
+  --rs-input-height-xs: calc(var(--rs-line-height-base) + (var(--rs-spacing-block-xs) * 2));
+  --rs-input-height-sm: calc(var(--rs-line-height-base) + (var(--rs-spacing-block-sm) * 2));
+  --rs-input-height-md: calc(var(--rs-line-height-base) + (var(--rs-padding-block-md) * 2));
+  --rs-input-height-lg: calc(var(--rs-line-height-plus) + (var(--rs-spacing-block-lg) * 2));
+  --rs-input-group-input-height-xs: calc(var(--rs-input-height-xs) - 2px);
+  --rs-input-group-input-height-sm: calc(var(--rs-input-height-sm) - 2px);
+  --rs-input-group-input-height-md: calc(var(--rs-input-height-md) - 2px);
+  --rs-input-group-input-height-lg: calc(var(--rs-input-height-lg) - 2px);
+  --rs-input-group-inside-btn-m-x-xs: calc(var(--rs-spacing-block-xs) / 2);
+  --rs-input-group-inside-btn-m-x-sm: calc(var(--rs-spacing-block-sm) / 2);
+  --rs-input-group-inside-btn-m-x-md: calc(var(--rs-padding-block-md) / 2);
+  --rs-input-group-inside-btn-m-x-lg: calc(var(--rs-spacing-block-lg) / 2);
+  --rs-input-group-inside-btn-p-x-xs: calc(var(--rs-spacing-inline-xs) / 2);
+  --rs-input-group-inside-btn-p-x-sm: calc(var(--rs-spacing-inline-sm) / 2);
+  --rs-input-group-inside-btn-p-x-md: calc(var(--rs-padding-inline-md) / 2);
+  --rs-input-group-inside-btn-p-x-lg: calc(var(--rs-spacing-inline-lg) / 2);
+  --rs-input-group-border-radius: var(--rs-radius-md);
+  --rs-input-group-font-size-xs: var(--rs-font-size-xs);
+  --rs-input-group-font-size-sm: var(--rs-font-size-sm);
+  --rs-input-group-font-size-md: var(--rs-font-size-sm);
+  --rs-input-group-font-size-lg: var(--rs-font-size-md);
+  --rs-input-group-width: 100%;
+
+  // Base styles for the input group container
+  position: relative;
+  display: flex;
+  border-radius: var(--rs-input-group-border-radius);
+  transition: var(--rs-input-transition);
+  width: var(--rs-input-group-width);
+  cursor: text;
+  color: var(--rs-text-primary);
+  border: 1px solid var(--rs-border-primary);
+  overflow: hidden;
+
+  // Size Variants Configuration
+  // Apply different sizes (xs, sm, md, lg) to input group
+  // Each size variant sets its own height, spacing, and font size variables
+  $sizes: (xs, sm, md, lg);
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      --rs-input-group-input-height: var(--rs-input-group-input-height-#{$size});
+      --rs-input-group-inside-btn-spacing: var(--rs-input-group-inside-btn-m-x-#{$size});
+      --rs-input-group-inside-btn-padding: var(--rs-input-group-inside-btn-p-x-#{$size});
+      --rs-input-group-font-size: var(--rs-input-group-font-size-#{$size});
+    }
+  }
+
+  // High Contrast Mode Adjustments
+  @include color-modes.high-contrast-mode {
+    transition: none;
+  }
+
+  // Focus States
+  // Apply special styles when the input group is focused
+  &:not([data-disabled='true']).rs-input-group-focus,
+  &:focus-within {
+    border-color: var(--rs-input-focus-border);
+  }
+
+  &:not([data-disabled='true']).rs-input-group-focus,
+  &:focus-within {
+    @include utils.focus-ring;
+  }
+
+  // Nested Input Groups
+  // Remove outline and border when input groups are nested
+  & & {
+    outline: none !important;
+    border-color: transparent !important;
+  }
+
+  .rs-input-group-btn {
+    height: var(--rs-input-group-input-height);
+  }
+
+  // Child Component Styles
+  // Remove borders and border radius from child components
+  .rs-number-input,
+  .rs-input-group-addon,
+  .rs-input-group-btn,
+  .rs-picker[data-picker='date'] .rs-picker-toggle {
+    border: none;
+    border-radius: var(--rs-radius-none);
+    outline: none;
+  }
+
+  > .rs-input,
+  > .rs-form-control-wrapper {
+    flex: 1 1 auto;
+  }
+
+  .rs-form-control-wrapper > .rs-input {
+    width: 100%;
+  }
+
+  > .rs-input {
+    // Ensure that the input is always above the *appended* addon button for
+    // proper border colors.
+    position: relative;
+    height: var(--rs-input-group-input-height);
+    border: none;
+    border-radius: var(--rs-radius-none);
+    outline: none;
+  }
+
+  > .rs-input-group-addon > .rs-icon {
+    font-size: inherit;
+  }
+
+  // Inside Input Group Variant
+  // Special styling for input groups with internal buttons/addons
+  &[data-inside='true'] {
+    width: var(--rs-input-group-width);
+    align-items: center;
+    background-color: var(--rs-input-bg);
+
+    .rs-input {
+      display: block;
+      width: 100%;
+      border: none;
+      outline: none;
+    }
+
+    .rs-input-group-btn,
+    .rs-input-group-addon {
+      flex: 0 0 auto;
+      width: auto;
+    }
+
+    .rs-input-group-btn {
+      border-radius: var(--rs-input-group-border-radius);
+      height: calc(
+        var(--rs-input-group-input-height) - var(--rs-input-group-inside-btn-spacing) * 2
+      );
+      margin-inline: var(--rs-input-group-inside-btn-spacing);
+      padding-inline: var(--rs-input-group-inside-btn-padding);
+      color: var(--rs-btn-subtle-text);
+      background-color: transparent;
+
+      &:hover {
+        color: var(--rs-btn-subtle-hover-text);
+        background-color: var(--rs-btn-subtle-hover-bg);
+      }
+
+      &:active,
+      &[data-active='true'] {
+        color: var(--rs-btn-subtle-active-text);
+        background-color: var(--rs-btn-subtle-active-bg);
+      }
+
+      &:disabled,
+      &[data-disabled='true'] {
+        color: var(--rs-btn-subtle-disabled-text);
+        background: none;
+      }
+
+      color: inherit;
+
+      &:focus {
+        outline: none;
+      }
+    }
+
+    .rs-input-group-addon {
+      background: none;
+      border: none;
+    }
+
+    // If the input has an element on the left, remove the left padding
+    .rs-input:not(:first-child),
+    .rs-auto-complete:not(:first-child) .rs-input {
+      padding-inline-start: 0;
+    }
+
+    // If the input has an element on the right, remove the right padding
+    .rs-input:not(:last-child),
+    .rs-auto-complete:not(:last-child) .rs-input {
+      padding-inline-end: 0;
+    }
+  }
+}
+
+// Disabled State
+// Styles applied when the input group is disabled
+.rs-input-group[data-disabled='true'] {
+  background-color: var(--rs-input-disabled-bg);
+  color: var(--rs-text-disabled);
+  cursor: not-allowed;
+
+  .rs-input,
+  .rs-input-group-btn,
+  .rs-input-group-addon {
+    color: inherit;
+  }
+}
+
+// Addon Component Styles
+// Base styles for the addon component
+.rs-input-group-addon {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  vertical-align: middle; // Match the inputs
+  color: var(--rs-text-primary);
+  font-size: var(--rs-input-group-font-size);
+  font-weight: normal;
+  line-height: 1;
+  text-align: center;
+  background-color: var(--rs-btn-default-bg);
+  padding-inline: var(--rs-spacing);
+  min-width: var(--rs-input-group-input-height);
+
+  // Sizing
+  &[data-size='sm'] {
+    padding-block: var(--rs-spacing-block-sm);
+    padding-inline: var(--rs-spacing-inline-sm);
+    font-size: var(--rs-font-size-sm);
+  }
+
+  &[data-size='xs'] {
+    padding: var(--rs-spacing-inline-xs);
+    font-size: var(--rs-font-size-xs);
+  }
+
+  &[data-size='lg'] {
+    padding-block: var(--rs-spacing-block-lg);
+    padding-inline: var(--rs-spacing-inline-lg);
+    font-size: var(--rs-font-size-md);
+  }
+
+  // Nuke default margins from checkboxes and radios to vertically center within.
+  input[type='radio'],
+  input[type='checkbox'] {
+    margin-top: 0;
+  }
+}
+
+// Button Component Styles
+// Base styles for the button component
+.rs-input-group-btn {
+  display: flex;
+  align-items: center;
+  position: relative;
+  line-height: 1;
+  white-space: nowrap;
+  border-radius: var(--rs-radius-none);
+  font-size: var(--rs-input-group-font-size);
+}

package/InputNumber/styles/index.scss

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

package/InputPicker/styles/_mixin.scss

@@ -0,0 +1,7 @@
+@mixin rs-input-picker-size($padding-vertical, $padding-horizontal, $font-size, $line-height) {
+  .rs-picker-search-input {
+    padding: ($padding-vertical - 1px) $padding-horizontal;
+    font-size: $font-size;
+    line-height: $line-height;
+  }
+}

package/InputPicker/styles/index.scss

@@ -0,0 +1,64 @@
+@use '../../internals/Box/styles/index' as box;
+@use '../../styles/colors/colors-base' as colors;
+@use '../../Input/styles/index' as input;
+@use '../../SelectPicker/styles/index' as select-picker;
+@use '../../internals/Picker/styles/index' as picker;
+@use './mixin' as input-picker-mixin;
+
+.rs-picker[data-picker='input'] {
+  --rs-picker-textbox-margin-inline: var(--rs-picker-input-height);
+
+  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 {
+    border: none !important;
+    height: var(--rs-picker-input-height);
+    width: 100%;
+    cursor: text;
+  }
+
+  &:not([data-disabled='true']) .rs-picker-toggle {
+    position: absolute !important;
+  }
+
+  $sizes: xs, sm, md, lg;
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      --rs-picker-input-height: calc(var(--rs-btn-size-#{$size}) - 2px);
+      --rs-picker-search-input-font-size: var(--rs-input-font-size-#{$size});
+      --rs-picker-search-input-line-height: var(--rs-input-line-height-#{$size});
+      --rs-picker-search-input-padding-block: var(--rs-input-padding-block-#{$size});
+      --rs-picker-search-input-padding-inline: var(--rs-input-padding-inline-#{$size});
+    }
+  }
+
+  .rs-picker-textbox {
+    margin-inline-end: var(--rs-picker-textbox-margin-inline);
+    height: var(--rs-picker-input-height);
+  }
+}
+
+.rs-picker-search {
+  border: none;
+  width: 100%;
+
+  &-input {
+    font-size: var(--rs-picker-search-input-font-size);
+    line-height: var(--rs-picker-search-input-line-height);
+    padding-block: var(--rs-picker-search-input-padding-block);
+    padding-inline: var(--rs-picker-search-input-padding-inline);
+    background: none;
+    outline: none;
+    border: none;
+    width: 100%;
+    position: relative;
+    padding-inline-end: 0;
+  }
+}