rsuite 6.0.0-canary-20250424 → 6.0.0-canary-20250620

package/IconButton/styles/index.less

@@ -1,90 +0,0 @@
-@import '../../styles/common';
-@import '../../Button/styles/index';
-
-//
-// 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(.rs-btn-icon-with-text) {
-    width: var(--rs-btn-size);
-  }
-
-  // Circle Button
-  &.rs-btn-icon-circle {
-    border-radius: var(--rs-radius-full);
-  }
-}
-
-// Icon Button with text
-.btn-icon-with-text(@bg) {
-  > .rs-icon {
-    background-color: @bg;
-  }
-}
-
-// Only support default/primary button
-.rs-btn-icon-with-text {
-  > .rs-icon {
-    position: absolute;
-    top: 0;
-    display: block;
-    background-color: var(--rs-iconbtn-addon);
-    transition: @btn-transition;
-    width: var(--rs-btn-size);
-    height: var(--rs-btn-size);
-    padding: calc((var(--rs-btn-size) - var(--rs-btn-icon-size)) / 2);
-  }
-
-  &.rs-btn-icon-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;
-    }
-  }
-
-  &.rs-btn-icon-placement-right {
-    padding-inline-end: calc(var(--rs-btn-padding-inline) + var(--rs-btn-size));
-
-    > .rs-icon {
-      inset-inline-end: 0;
-    }
-  }
-
-  .button-activated({
-    .btn-icon-with-text(var(--rs-iconbtn-activated-addon));
-  });
-
-  .button-pressed({
-    .btn-icon-with-text(var(--rs-iconbtn-pressed-addon));
-  });
-
-  .button-disabled({
-    .btn-icon-with-text(var(--rs-iconbtn-addon));
-  });
-}
-
-.rs-btn-icon-with-text.rs-btn-primary {
-  .btn-icon-with-text(var(--rs-iconbtn-primary-addon));
-
-  .button-activated({
-    .btn-icon-with-text(var(--rs-iconbtn-primary-activated-addon));
-  });
-
-  .button-pressed({
-    .btn-icon-with-text(var(--rs-iconbtn-primary-pressed-addon));
-  });
-
-  .button-disabled({
-    .btn-icon-with-text(var(--rs-iconbtn-primary-addon));
-  });
-}

package/Image/styles/index.less

@@ -1,34 +0,0 @@
-.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.less

@@ -1,50 +0,0 @@
-@import '../../styles/common.less';
-@import '../../Input/styles/mixin.less';
-
-.rs-inline-edit {
-  @sizes: xs, sm, md, lg;
-
-  each(@sizes, .(@size) {
-    &.rs-inline-edit-@{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}') + @input-border-width);
-      --rs-inline-edit-padding-inline: calc(var(~'--rs-input-padding-inline-@{size}') + @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);
-    }
-  }
-
-  &-disabled {
-    .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/index.less

@@ -1,23 +0,0 @@
-@import '../../styles/common';
-@import './variables.less';
-@import './mixin.less';
-
-//
-// Forms
-// --------------------------------------------------
-
-// Common form controls
-.rs-input {
-  .default-input();
-
-  @sizes: xs, sm, md, lg;
-
-  each(@sizes, .(@size) {
-    &.rs-input-@{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/Input/styles/mixin.less

@@ -1,38 +0,0 @@
-@import '../../styles/mixins/color-modes';
-
-.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: @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);
-
-  .high-contrast-mode({
-    transition: none;
-  });
-
-  // Placeholder
-  &::placeholder {
-    color: var(--rs-text-secondary);
-  }
-
-  &:focus {
-    border-color: var(--rs-input-focus-border);
-  }
-
-  &:focus-visible {
-    .focus-ring();
-  }
-
-  &:disabled {
-    background-color: var(--rs-input-disabled-bg);
-    color: var(--rs-text-disabled);
-  }
-}

package/Input/styles/variables.less

@@ -1,22 +0,0 @@
-:root {
-  --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: @line-height-extra-small;
-  --rs-input-line-height-sm: @line-height-base;
-  --rs-input-line-height-md: @line-height-base;
-  --rs-input-line-height-lg: @line-height-large;
-
-  --rs-input-border-radius: var(--rs-radius-md);
-
-  --rs-input-padding-block-xs: calc(@padding-y-xs - @input-border-width);
-  --rs-input-padding-block-sm: calc(@padding-y-sm - @input-border-width);
-  --rs-input-padding-block-md: calc(@padding-y - @input-border-width);
-  --rs-input-padding-block-lg: calc(@padding-y-lg - @input-border-width);
-  --rs-input-padding-inline-xs: calc(var(--rs-spacing) - @input-border-width);
-  --rs-input-padding-inline-sm: calc(calc(var(--rs-spacing) * 2) - @input-border-width);
-  --rs-input-padding-inline-md: calc(calc(var(--rs-spacing) * 2.5) - @input-border-width);
-  --rs-input-padding-inline-lg: calc(calc(var(--rs-spacing) * 3) - @input-border-width);
-}

package/InputGroup/styles/index.less

@@ -1,237 +0,0 @@
-@import '../../styles/common.less';
-@import '../../Input/styles/mixin.less';
-@import '../../Button/styles/index.less';
-
-//
-// 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-group-input-height-xs: calc(@input-height-extra-small - 2px);
-  --rs-input-group-input-height-sm: calc(@input-height-small - 2px);
-  --rs-input-group-input-height-md: calc(@input-height-base - 2px);
-  --rs-input-group-input-height-lg: calc(@input-height-large - 2px);
-  --rs-input-group-inside-btn-m-x-xs: calc(@padding-y-xs / 2);
-  --rs-input-group-inside-btn-m-x-sm: calc(@padding-y-sm / 2);
-  --rs-input-group-inside-btn-m-x-md: calc(@padding-y / 2);
-  --rs-input-group-inside-btn-m-x-lg: calc(@padding-y-lg / 2);
-  --rs-input-group-inside-btn-p-x-xs: calc(@padding-x-xs / 2);
-  --rs-input-group-inside-btn-p-x-sm: calc(@padding-x-sm / 2);
-  --rs-input-group-inside-btn-p-x-md: calc(@padding-x / 2);
-  --rs-input-group-inside-btn-p-x-lg: calc(@padding-x-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);
-
-  // Base styles for the input group container
-  position: relative;
-  display: flex;
-  border-radius: var(--rs-input-group-border-radius);
-  transition: @input-transition;
-  width: 100%;
-  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(@sizes, .(@size) {
-    &.rs-input-group-@{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
-  .high-contrast-mode({
-    transition: none;
-  });
-
-  // Focus States
-  // Apply special styles when the input group is focused
-  &:not(.rs-input-group-disabled).rs-input-group-focus,
-  &:focus-within {
-    border-color: var(--rs-input-focus-border);
-  }
-
-  &:not(.rs-input-group-disabled).rs-input-group-focus,
-  &:focus-within {
-    .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
-  &.rs-input-group-inside {
-    width: 100%;
-    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);
-      .rs-btn-subtle();
-
-      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.rs-input-group-disabled {
-  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
-  &.rs-input-sm {
-    padding: @padding-y-sm @padding-x-sm;
-    font-size: var(--rs-font-size-sm);
-  }
-
-  &.rs-input-xs {
-    padding: @padding-x-xs @padding-x-xs;
-    font-size: var(--rs-font-size-xs);
-  }
-
-  &.rs-input-lg {
-    padding: @padding-y-lg @padding-x-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.less

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

package/InputPicker/styles/index.less

@@ -1,64 +0,0 @@
-@import '../../styles/common.less';
-@import '../../Input/styles/index.less';
-@import '../../SelectPicker/styles/index.less';
-@import '../../internals/Picker/styles/index.less';
-@import './mixin.less';
-
-.rs-picker[data-picker='input'] {
-  --rs-picker-textbox-margin-inline: var(--rs-picker-input-height);
-
-  position: relative;
-  border: 1px solid var(--rs-border-primary);
-  border-radius: var(--rs-radius-md);
-  transition: @picker-transition;
-  background-color: var(--rs-input-bg);
-  overflow: hidden;
-
-  .rs-picker-toggle {
-    border: none !important;
-    height: var(--rs-picker-input-height);
-    cursor: text;
-  }
-
-  &:not([data-disabled='true']) .rs-picker-toggle {
-    position: absolute !important;
-  }
-
-  @sizes: xs, sm, md, lg;
-  each(@sizes, .(@size) {
-    &[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;
-
-    .rs-picker-focused & {
-      z-index: @zindex-picker-input;
-    }
-  }
-}

package/InputPicker/styles/mixin.less

@@ -1,7 +0,0 @@
-.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/Kbd/styles/index.less

@@ -1,20 +0,0 @@
-@import '../../styles/common.less';
-@import './variables.less';
-@import './mixin.less';
-
-// Kbd
-// -------------------------
-
-.rs-kbd {
-  .kbd();
-
-  // Size variants
-  @sizes: lg, md, sm, xs;
-
-  each(@sizes, .(@size) {
-    &-@{size} {
-      --rs-kbd-font-size: var(~'--rs-kbd-font-size-@{size}');
-      --rs-kbd-letter-spacing: var(~'--rs-kbd-letter-spacing-@{size}');
-    }
-  });
-}

package/Kbd/styles/mixin.less

@@ -1,24 +0,0 @@
-.kbd() {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  vertical-align: middle;
-  flex-shrink: 0;
-  white-space: nowrap;
-  word-spacing: -0.4em;
-  user-select: none;
-  border-radius: var(--rs-radius-sm);
-  line-height: 1.7em;
-  padding-inline-start: 0.5em;
-  padding-inline-end: 0.5em;
-  padding-bottom: 0.05em;
-  height: fit-content;
-  box-sizing: border-box;
-  background-color: var(--rs-kbd-bg);
-  border: solid 1px var(--rs-kbd-border);
-  box-shadow: inset 0 -1px 0 var(--rs-kbd-border);
-  color: var(--rs-kbd-text);
-  font-family: var(--rs-kbd-font-family);
-  font-size: var(--rs-kbd-font-size);
-  letter-spacing: var(--rs-kbd-letter-spacing);
-}

package/Kbd/styles/variables.less

@@ -1,13 +0,0 @@
-:root {
-  --rs-kbd-font-size-xs: var(--rs-font-size-2xs);
-  --rs-kbd-font-size-sm: var(--rs-font-size-xs);
-  --rs-kbd-font-size-md: var(--rs-font-size-sm);
-  --rs-kbd-font-size-lg: var(--rs-font-size-md);
-  --rs-kbd-letter-spacing-xs: 0.0025em;
-  --rs-kbd-letter-spacing-sm: 0em;
-  --rs-kbd-letter-spacing-md: 0em;
-  --rs-kbd-letter-spacing-lg: -0.0025em;
-  --rs-kbd-font-family: var(--rs-font-family-monospace);
-  --rs-kbd-font-size: var(--rs-kbd-font-size-md);
-  --rs-kbd-letter-spacing: var(--rs-kbd-letter-spacing-md);
-}

package/Link/styles/index.less

@@ -1,39 +0,0 @@
-.rs-link {
-  --rs-link-disabled-opacity: 0.5;
-  --rs-link-spacing: var(--rs-spacing);
-
-  display: inline-flex;
-  align-items: center;
-  text-decoration: none;
-
-  &-icon {
-    margin-inline: var(--rs-link-spacing);
-  }
-
-  &:where([data-underline='always']) {
-    text-decoration: underline;
-  }
-
-  &:where([data-underline='hover']) {
-    text-decoration: none;
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-
-  &:where([data-underline='never']) {
-    text-decoration: none !important;
-  }
-
-  &:where([data-underline='not-hover']) {
-    text-decoration: underline;
-    &:hover {
-      text-decoration: none;
-    }
-  }
-
-  &:where([data-disabled='true']) {
-    pointer-events: none;
-    opacity: var(--rs-link-disabled-opacity);
-  }
-}