rsuite 6.0.0-canary-2025011413 → 6.0.0-canary-20250315

package/toaster/styles/index.css

@@ -3,16 +3,6 @@
   * @param {string} @size-name - The size name
   * @param {string} @suffix - The suffix
   */
-:root,
-.rs-theme-light {
-  --rs-shadow-overlay: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
-}
-.rs-theme-dark {
-  --rs-shadow-overlay: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
-}
-.rs-theme-high-contrast {
-  --rs-shadow-overlay: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
-}
 /* stylelint-disable */
 *[class*='rs-'] {
   box-sizing: border-box;
@@ -21,6 +11,9 @@
 *[class*='rs-']::after {
   box-sizing: border-box;
 }
+:root {
+  --rs-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+}
 @keyframes notificationMoveIn {
   0% {
     opacity: 0;
@@ -69,6 +62,7 @@
   }
 }
 .rs-toast {
+  --rs-toast-shadow: var(--rs-shadow-md);
   pointer-events: auto;
 }
 .rs-toast-container {
@@ -79,7 +73,7 @@
   flex-direction: column;
 }
 .rs-toast-container .rs-toast:not(.rs-notification) {
-  box-shadow: var(--rs-shadow-overlay);
+  box-shadow: var(--rs-toast-shadow);
 }
 .rs-toast-container-top-center,
 .rs-toast-container-bottom-center {
@@ -93,7 +87,7 @@
 .rs-toast-container-bottom-start,
 .rs-toast-container-top-start {
   align-items: flex-start;
-  left: 24px;
+  inset-inline-start: 24px;
 }
 .rs-toast-container-bottom-start .rs-toast-fade-entered,
 .rs-toast-container-top-start .rs-toast-fade-entered {
@@ -102,11 +96,11 @@
 .rs-toast-container-bottom-end,
 .rs-toast-container-top-end {
   align-items: flex-end;
-  right: 24px;
+  inset-inline-end: 24px;
 }
 .rs-toast-container-bottom-end .rs-toast-fade-entered,
 .rs-toast-container-top-end .rs-toast-fade-entered {
-  margin-left: auto;
+  margin-inline-start: auto;
   animation-name: notificationMoveInRight;
 }
 .rs-toast-container-top-center,

package/toaster/styles/index.less

@@ -6,6 +6,8 @@
 // --------------------------------------------------
 
 .rs-toast {
+  --rs-toast-shadow: var(--rs-shadow-md);
+
   // Reset pointer events ,to overwrite line:16
   pointer-events: auto;
 }
@@ -20,7 +22,7 @@
 
   // Notification has box-shadow on rs-notification-content
   .rs-toast:not(.rs-notification) {
-    box-shadow: var(--rs-shadow-overlay);
+    box-shadow: var(--rs-toast-shadow);
   }
 
   &-top-center,
@@ -36,7 +38,7 @@
   &-bottom-start,
   &-top-start {
     align-items: flex-start;
-    left: @toast-spacing;
+    inset-inline-start: @toast-spacing;
 
     .rs-toast-fade-entered {
       animation-name: notificationMoveInLeft;
@@ -46,10 +48,10 @@
   &-bottom-end,
   &-top-end {
     align-items: flex-end;
-    right: @toast-spacing;
+    inset-inline-end: @toast-spacing;
 
     .rs-toast-fade-entered {
-      margin-left: auto;
+      margin-inline-start: auto;
       animation-name: notificationMoveInRight;
     }
   }

package/useToaster/styles/index.css

@@ -3,16 +3,6 @@
   * @param {string} @size-name - The size name
   * @param {string} @suffix - The suffix
   */
-:root,
-.rs-theme-light {
-  --rs-shadow-overlay: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
-}
-.rs-theme-dark {
-  --rs-shadow-overlay: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
-}
-.rs-theme-high-contrast {
-  --rs-shadow-overlay: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
-}
 /* stylelint-disable */
 *[class*='rs-'] {
   box-sizing: border-box;
@@ -21,6 +11,9 @@
 *[class*='rs-']::after {
   box-sizing: border-box;
 }
+:root {
+  --rs-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+}
 @keyframes notificationMoveIn {
   0% {
     opacity: 0;
@@ -69,6 +62,7 @@
   }
 }
 .rs-toast {
+  --rs-toast-shadow: var(--rs-shadow-md);
   pointer-events: auto;
 }
 .rs-toast-container {
@@ -79,7 +73,7 @@
   flex-direction: column;
 }
 .rs-toast-container .rs-toast:not(.rs-notification) {
-  box-shadow: var(--rs-shadow-overlay);
+  box-shadow: var(--rs-toast-shadow);
 }
 .rs-toast-container-top-center,
 .rs-toast-container-bottom-center {
@@ -93,7 +87,7 @@
 .rs-toast-container-bottom-start,
 .rs-toast-container-top-start {
   align-items: flex-start;
-  left: 24px;
+  inset-inline-start: 24px;
 }
 .rs-toast-container-bottom-start .rs-toast-fade-entered,
 .rs-toast-container-top-start .rs-toast-fade-entered {
@@ -102,11 +96,11 @@
 .rs-toast-container-bottom-end,
 .rs-toast-container-top-end {
   align-items: flex-end;
-  right: 24px;
+  inset-inline-end: 24px;
 }
 .rs-toast-container-bottom-end .rs-toast-fade-entered,
 .rs-toast-container-top-end .rs-toast-fade-entered {
-  margin-left: auto;
+  margin-inline-start: auto;
   animation-name: notificationMoveInRight;
 }
 .rs-toast-container-top-center,

package/Avatar/styles/mixin.less

@@ -1,42 +0,0 @@
-.avatar-size(@side-length,@font-size) {
-  width: @side-length;
-  height: @side-length;
-  font-size: @font-size;
-
-  & > .rs-icon {
-    @icon-font-size: ((@side-length - @font-size)/2 + @font-size);
-
-    font-size: @icon-font-size;
-    height: @icon-font-size;
-  }
-
-  & > .rs-avatar-image {
-    width: @side-length;
-    height: @side-length;
-    line-height: @side-length;
-  }
-}
-
-.avatar-xxl() {
-  .avatar-size(@avatar-size-xxl, @avatar-font-size-xxl);
-}
-
-.avatar-xl() {
-  .avatar-size(@avatar-size-xl, @avatar-font-size-xl);
-}
-
-.avatar-lg() {
-  .avatar-size(@avatar-size-lg, @avatar-font-size-lg);
-}
-
-.avatar-md() {
-  .avatar-size(@avatar-size, @avatar-font-size);
-}
-
-.avatar-sm() {
-  .avatar-size(@avatar-size-sm, @avatar-font-size-sm);
-}
-
-.avatar-xs() {
-  .avatar-size(@avatar-size-xs, @avatar-font-size-xs);
-}

package/FlexboxGrid/stories/styles.less

@@ -1,17 +0,0 @@
-// Flex grid box
-.show-grid {
-  .rs-flex-box-grid {
-    &-item {
-      margin-top: 6px;
-      margin-bottom: 6px;
-      padding: 10px 5px;
-      color: var(--rs-btn-primary-text);
-      text-align: center;
-      background-color: var(--rs-primary-500);
-    }
-
-    &-item:nth-child(2n) {
-      opacity: 0.8;
-    }
-  }
-}

package/Form/styles/mixin.less

@@ -1,139 +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: @border-radius;
-  .input-md();
-
-  .high-contrast-mode({
-    transition: none;
-  });
-
-  // Placeholder
-  &::placeholder {
-    color: var(--rs-text-secondary);
-  }
-
-  &:focus,
-  &:hover:not(:disabled) {
-    border-color: var(--rs-input-focus-border);
-  }
-
-  &:focus {
-    .focus-ring();
-  }
-
-  &:disabled {
-    background-color: var(--rs-input-disabled-bg);
-    color: var(--rs-text-disabled);
-  }
-}
-
-.input-size( @padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius;) {
-  @ie-height: (@padding-vertical * 2 + @font-size * @line-height);
-
-  padding: (@padding-vertical - @input-border-width) (@padding-horizontal - @input-border-width);
-  font-size: @font-size;
-  line-height: @line-height;
-
-  textarea& {
-    height: auto;
-  }
-}
-
-.input-lg() {
-  /* stylelint-disable */ //Formatted by prettier
-  .input-size(
-    @padding-y-lg; @input-padding-x; @font-size-large; @line-height-large; @input-border-radius
-  );
-  /* stylelint-enable */
-}
-
-.input-md() {
-  /* stylelint-disable */ //Formatted by prettier
-  .input-size(
-          @padding-y; @input-padding-x; @font-size-base; @line-height-base; @input-border-radius
-  );
-  /* stylelint-enable */
-}
-
-.input-sm() {
-  /* stylelint-disable */ //Formatted by prettier
-  .input-size(
-    @padding-y-sm; @input-padding-x; @font-size-base; @line-height-base; @input-border-radius
-  );
-  /* stylelint-enable */
-}
-
-.input-xs() {
-  /* stylelint-disable */ //Formatted by prettier
-  .input-size(
-    @padding-y-xs; @input-padding-x; @font-size-extra-small; @line-height-extra-small; @input-border-radius
-  );
-  /* stylelint-enable */
-}
-
-.reset-input-group-addon-size(@size-name) {
-
-  .map-size(@size-name);
-
-  @padding-horizontal-name: ~'padding-x@{suffix}';
-
-  @width: (@@padding-horizontal-name * 2 - @input-border-width*2 + @font-size-base);
-  @padding-horizontal: ((@width - @font-size-base)/2);
-
-  min-width: @width;
-  padding-left: @padding-horizontal;
-  padding-right: @padding-horizontal;
-}
-
-.reset-inside-input-group-btn-size(@size-name) {
-
-  .map-size(@size-name);
-
-  @height: ~'input-height-@{size-name}';
-  @vertical: ~'padding-y@{suffix}';
-  @horizontal: ~'padding-x@{suffix}';
-  @font-size: ~'font-size-@{size-name}';
-  @line-height: ~'line-height-@{size-name}';
-
-  height: @@height - @input-border-width*2;
-  padding: (@@vertical - @input-border-width) (@@horizontal - @input-border-width);
-  border-radius: 0 @border-radius @border-radius 0;
-
-  > .rs-icon {
-    // Extend font-size from parent.
-    font-size: @@font-size;
-    line-height: @@line-height;
-  }
-}
-
-.reset-input-group-children-size(@size-name) {
-  @height: ~'input-height-@{size-name}';
-  @useable-height: (@@height - 2px);
-  @vertical: ~'padding-@{size-name}-vertical';
-
-  &.rs-input-group-inside > .rs-input {
-    padding-right: 0;
-  }
-
-  &.rs-input-group {
-    > .rs-input {
-      height: @useable-height;
-    }
-
-    > .rs-input-group-addon {
-      height: @useable-height;
-
-      > .rs-icon {
-        font-size: inherit;
-      }
-    }
-  }
-}

package/Grid/stories/styles.less

@@ -1,29 +0,0 @@
-.show-grid {
-  [class*='rs-col-'] {
-    padding: 10px 5px;
-    color: var(--rs-btn-primary-text);
-    background-color: var(--rs-primary-500);
-    text-align: center;
-    margin-top: 6px;
-    margin-bottom: 6px;
-    [class*='rs-col-'] {
-      background-color: var(--rs-primary-700);
-
-      [class*='rs-col-'] {
-        background-color: var(--rs-primary-900);
-
-        &:nth-child(even) {
-          opacity: 0.9;
-        }
-      }
-    }
-
-    [class*='rs-col-']:nth-child(2n) {
-      opacity: 0.9;
-    }
-  }
-
-  [class*='rs-col-']:nth-child(2n) {
-    opacity: 0.8;
-  }
-}

package/Message/styles/mixin.less

@@ -1,41 +0,0 @@
-// Messages
-
-.message-variant(@background; @header-color; @text-color; @icon-color; @border-color; @icon-border-color;) {
-  background-color: #fff;
-
-  &.rs-message-bordered {
-    border: 1px solid @border-color;
-    border-left-width: 4px;
-
-    .rs-message-icon {
-      box-sizing: content-box;
-      border: 4px solid @icon-border-color;
-      border-radius: 50%;
-    }
-  }
-
-  .rs-message-container {
-    background-color: @background;
-  }
-
-  .rs-message-header {
-    color: @header-color;
-  }
-
-  .rs-message-body {
-    color: @text-color;
-  }
-
-  .rs-btn-close {
-    position: absolute;
-    right: 0;
-    top: 0;
-    padding: 8px;
-    font-size: 12px;
-  }
-
-  .rs-message-icon > .rs-icon,
-  .rs-btn-close {
-    color: @icon-color;
-  }
-}

package/Modal/styles/mixin.less

@@ -1,4 +0,0 @@
-.content-width(@width) {
-  width: @width;
-  max-width: calc(100% - 10px);
-}

package/Notification/styles/mixin.less

@@ -1,19 +0,0 @@
-.notification-variant(@icon-color) {
-  // Content
-  .rs-notification-content {
-    // Description
-    // Has title and description need to ajust distance
-    .rs-notification-title + .rs-notification-description {
-      margin-left: @notify-title-icon-size+ @notify-title-icon-margin;
-    }
-
-    // Tip icon
-    .rs-icon {
-      color: @icon-color;
-
-      &::before {
-        vertical-align: middle;
-      }
-    }
-  }
-}

package/TagPicker/styles/mixin.less

@@ -1,21 +0,0 @@
-.rs-tag-picker-size(@padding-vertical; @padding-horizontal; @font-size; @line-height;) {
-  .rs-picker-textbox {
-    padding-bottom: @padding-vertical - 3px;
-
-    .rs-picker-search-input {
-      padding-left: @padding-horizontal;
-      margin-top: @padding-vertical - 3px;
-      font-size: @font-size;
-    }
-
-    input {
-      height: @line-height * @font-size - 2px;
-    }
-  }
-
-  .rs-picker-toggle {
-    padding-top: @padding-vertical - 1px;
-    padding-bottom: @padding-vertical - 1px;
-    box-shadow: none;
-  }
-}

package/Toggle/styles/mixin.less

@@ -1,123 +0,0 @@
-.toggle-size-variant(
-  @toogle-height,
-  @min-width,
-  @toggle-handle-gap,
-  @toggle-inner-margin,
-  @toggle-inner-font-size,
-  @label-font-size,
-) {
-  @handle-diameter: (@toogle-height - @toggle-handle-gap*2);
-  font-size: @label-font-size;
-
-  .rs-toggle-loader {
-    width: @handle-diameter;
-    height: @handle-diameter;
-    left: @toggle-handle-gap;
-    top: @toggle-handle-gap;
-
-    .rs-loader-spin,
-    .rs-loader-spin::before,
-    .rs-loader-spin::after {
-      width: @handle-diameter;
-      height: @handle-diameter;
-    }
-
-    & when (@handle-diameter < 16px) {
-      .rs-loader-spin::before,
-      .rs-loader-spin::after {
-        border-width: 2px;
-      }
-    }
-  }
-
-  .rs-toggle-presentation {
-    height: @toogle-height;
-    min-width: @min-width;
-    border-radius: (@toogle-height / 2);
-  }
-
-  .rs-toggle-presentation::after {
-    width: @handle-diameter;
-    height: @handle-diameter;
-    left: @toggle-handle-gap;
-    top: @toggle-handle-gap;
-    border-radius: (@handle-diameter / 2);
-  }
-
-  .rs-toggle-presentation:active::after {
-    width: (@handle-diameter * @toggle-active-scale);
-  }
-
-  .rs-toggle-inner {
-    margin-left: @toogle-height;
-    margin-right: @toggle-inner-margin;
-    height: @toogle-height;
-    line-height: unit((@toogle-height / @toggle-inner-font-size));
-    font-size: @toggle-inner-font-size;
-
-    .rs-icon {
-      font-size: @toggle-inner-font-size;
-    }
-  }
-
-  &.rs-toggle-checked .rs-toggle-presentation {
-    &::after {
-      left: 100%;
-      margin-left: -(@handle-diameter + @toggle-handle-gap);
-    }
-
-    &:active::after {
-      margin-left: -(@handle-diameter * @toggle-active-scale + @toggle-handle-gap);
-    }
-
-    .rs-toggle-inner {
-      margin-right: @toogle-height;
-      margin-left: @toggle-inner-margin;
-    }
-  }
-
-  &.rs-toggle-checked .rs-toggle-loader {
-    left: 100%;
-    margin-left: -(@handle-diameter + @toggle-handle-gap);
-  }
-
-  .rs-toggle-label {
-    font-size: @label-font-size;
-  }
-}
-
-// Small
-.toggle(sm) {
-  .toggle-size-variant(
-    @toggle-sm-height,
-    @toggle-sm-min-width,
-    @toggle-sm-handle-gap,
-    @toggle-sm-inner-margin,
-    @toggle-sm-inner-font-size,
-    @font-size-small
-  );
-}
-
-// Middle
-.toggle(md) {
-  .toggle-size-variant(
-    @toggle-md-height,
-    @toggle-md-min-width,
-    @toggle-md-handle-gap,
-    @toggle-md-inner-margin,
-    @toggle-md-inner-font-size,
-    @font-size-base
-  );
-}
-
-// Large
-.toggle(lg) {
-  .toggle-size-variant(
-    @toggle-lg-height,
-    @toggle-lg-min-width,
-    @toggle-lg-handle-gap,
-    @toggle-lg-inner-margin,
-    @toggle-lg-inner-font-size,
-    @font-size-large
-  );
-}

package/cjs/Col/Col.d.ts

@@ -1,69 +0,0 @@
-import { WithAsProps } from '../internals/types';
-export interface ColProps extends WithAsProps {
-    /** The number of columns you wish to span for Extra small devices Phones (< 576px) */
-    xs?: number;
-    /** The number of columns you wish to span for Small devices Tablets (≥ 576px) */
-    sm?: number;
-    /** The number of columns you wish to span for Medium devices Desktops (≥ 768px) */
-    md?: number;
-    /** The number of columns you wish to span for Large devices Desktops (≥ 992px) */
-    lg?: number;
-    /** The number of columns you wish to span for Extra Large devices Desktops (≥ 1200px) */
-    xl?: number;
-    /** The number of columns you wish to span for Ultra Large devices Desktops (≥ 1400px) */
-    xxl?: number;
-    /** Move columns to the right for Extra small devices Phones */
-    xsOffset?: number;
-    /** Move columns to the right for Small devices Tablets */
-    smOffset?: number;
-    /** Move columns to the right for Medium devices Desktops */
-    mdOffset?: number;
-    /** Move columns to the right for Large devices Desktops */
-    lgOffset?: number;
-    /** Move columns to the right for Extra large devices Desktops */
-    xlOffset?: number;
-    /** Move columns to the right for Ultra large devices Desktops */
-    xxlOffset?: number;
-    /** Change the order of grid columns to the right for Extra small devices Phones */
-    xsPush?: number;
-    /** Change the order of grid columns to the right for Small devices Tablets */
-    smPush?: number;
-    /** Change the order of grid columns to the right for Medium devices Desktops */
-    mdPush?: number;
-    /** Change the order of grid columns to the right for Large devices Desktops */
-    lgPush?: number;
-    /** Change the order of grid columns to the right for Extra large devices Desktops */
-    xlPush?: number;
-    /** Change the order of grid columns to the right for Ultra large devices Desktops */
-    xxlPush?: number;
-    /** Change the order of grid columns to the left for Extra small devices Phones */
-    xsPull?: number;
-    /** Change the order of grid columns to the left for Small devices Tablets */
-    smPull?: number;
-    /** Change the order of grid columns to the left for Medium devices Desktops */
-    mdPull?: number;
-    /** Change the order of grid columns to the left for Large devices Desktops */
-    lgPull?: number;
-    /** Change the order of grid columns to the left for Extra large devices Desktops */
-    xlPull?: number;
-    /** Change the order of grid columns to the left for Ultra large devices Desktops */
-    xxlPull?: number;
-    /** Hide column on Extra small devices Phones */
-    xsHidden?: boolean;
-    /** Hide column on Small devices Tablets */
-    smHidden?: boolean;
-    /** Hide column on Medium devices Desktops */
-    mdHidden?: boolean;
-    /** Hide column on Large devices Desktops */
-    lgHidden?: boolean;
-    /** Hide column on Extra large devices Desktops */
-    xlHidden?: boolean;
-    /** Hide column on Ultra large devices Desktops */
-    xxlHidden?: boolean;
-}
-/**
- * The `Col` component is used for layout and grids.
- * @see https://rsuitejs.com/en/components/grid
- */
-declare const Col: import("../internals/types").InternalRefForwardingComponent<"div", ColProps, never> & Record<string, never>;
-export default Col;