rsuite 6.0.0-canary-2025031915 → 6.0.0-canary-2025032014

package/AutoComplete/styles/index.css

@@ -1757,7 +1757,7 @@ textarea.rs-input {
 }
 .rs-picker-label.rs-input-group-addon {
   color: var(--rs-text-primary);
-  padding-inline-end: 4px !important;
+  padding-inline: calc(var(--rs-input-group-inside-btn-padding) * 2 - var(--rs-picker-toggle-border-width));
 }
 .rs-picker-loader {
   width: var(--rs-picker-loader-size);

package/Cascader/styles/index.css

@@ -1919,7 +1919,7 @@ textarea.rs-input {
 }
 .rs-picker-label.rs-input-group-addon {
   color: var(--rs-text-primary);
-  padding-inline-end: 4px !important;
+  padding-inline: calc(var(--rs-input-group-inside-btn-padding) * 2 - var(--rs-picker-toggle-border-width));
 }
 .rs-picker-loader {
   width: var(--rs-picker-loader-size);

package/CheckPicker/styles/index.css

@@ -1930,7 +1930,7 @@ textarea.rs-input {
 }
 .rs-picker-label.rs-input-group-addon {
   color: var(--rs-text-primary);
-  padding-inline-end: 4px !important;
+  padding-inline: calc(var(--rs-input-group-inside-btn-padding) * 2 - var(--rs-picker-toggle-border-width));
 }
 .rs-picker-loader {
   width: var(--rs-picker-loader-size);

package/CheckTree/styles/index.css

@@ -1776,7 +1776,7 @@ textarea.rs-input {
 }
 .rs-picker-label.rs-input-group-addon {
   color: var(--rs-text-primary);
-  padding-inline-end: 4px !important;
+  padding-inline: calc(var(--rs-input-group-inside-btn-padding) * 2 - var(--rs-picker-toggle-border-width));
 }
 .rs-picker-loader {
   width: var(--rs-picker-loader-size);

package/CheckTreePicker/styles/index.css

@@ -1776,7 +1776,7 @@ textarea.rs-input {
 }
 .rs-picker-label.rs-input-group-addon {
   color: var(--rs-text-primary);
-  padding-inline-end: 4px !important;
+  padding-inline: calc(var(--rs-input-group-inside-btn-padding) * 2 - var(--rs-picker-toggle-border-width));
 }
 .rs-picker-loader {
   width: var(--rs-picker-loader-size);

package/DatePicker/styles/index.css

@@ -2361,7 +2361,7 @@ textarea.rs-input {
 }
 .rs-picker-label.rs-input-group-addon {
   color: var(--rs-text-primary);
-  padding-inline-end: 4px !important;
+  padding-inline: calc(var(--rs-input-group-inside-btn-padding) * 2 - var(--rs-picker-toggle-border-width));
 }
 .rs-picker-loader {
   width: var(--rs-picker-loader-size);

package/DateRangePicker/styles/index.css

@@ -2361,7 +2361,7 @@ textarea.rs-input {
 }
 .rs-picker-label.rs-input-group-addon {
   color: var(--rs-text-primary);
-  padding-inline-end: 4px !important;
+  padding-inline: calc(var(--rs-input-group-inside-btn-padding) * 2 - var(--rs-picker-toggle-border-width));
 }
 .rs-picker-loader {
   width: var(--rs-picker-loader-size);

package/Form/styles/index.css

@@ -11,17 +11,3 @@
 *[class*='rs-']::after {
   box-sizing: border-box;
 }
-:root {
-  --rs-spacing: 0.25rem;
-}
-.rs-form {
-  --rs-form-direction: column;
-  --rs-form-spacing: calc(var(--rs-spacing) * 4);
-  display: flex;
-  flex-direction: var(--rs-form-direction);
-  gap: var(--rs-form-spacing);
-  align-items: flex-start;
-}
-.rs-form-inline {
-  --rs-form-direction: row;
-}

package/Form/styles/index.less

@@ -1,19 +1 @@
 @import '../../styles/common.less';
-
-// Form
-
-.rs-form {
-  --rs-form-direction: column;
-  --rs-form-spacing: calc(var(--rs-spacing) * 4);
-  --rs-form-group-spacing: var(--rs-spacing);
-  --rs-form-group-direction: column;
-
-  display: flex;
-  flex-direction: var(--rs-form-direction);
-  gap: var(--rs-form-spacing);
-  align-items: flex-start;
-}
-
-.rs-form-inline {
-  --rs-form-direction: row;
-}

package/FormControl/styles/index.css

@@ -14,19 +14,16 @@
 :root {
   --rs-radius-none: 0;
 }
-.rs-form-fluid .rs-form-control-wrapper {
+.rs-form-stack-fluid .rs-form-control-wrapper {
   width: 100%;
 }
-.rs-form-fluid .rs-form-control-wrapper > .rs-input-number,
-.rs-form-fluid .rs-form-control-wrapper > .rs-input {
+.rs-form-stack-fluid .rs-form-control-wrapper > .rs-input-number,
+.rs-form-stack-fluid .rs-form-control-wrapper > .rs-input {
   width: 100%;
 }
-.rs-form-fluid.rs-form-vertical .rs-form-group .rs-input-group {
+.rs-form-stack-fluid.rs-form-stack-vertical .rs-form-group .rs-input-group {
   width: 100%;
 }
-.rs-form-fluid.rs-form-vertical .rs-form-group .rs-form-control-wrapper {
-  max-width: 100%;
-}
 .rs-form-control-wrapper {
   position: relative;
 }
@@ -38,24 +35,22 @@
   pointer-events: none;
   touch-action: none;
 }
-.rs-form-vertical .rs-form-group .rs-input-group {
+.rs-form-stack-vertical .rs-form-group .rs-input-group {
   width: 300px;
 }
-.rs-form-vertical .rs-form-group .rs-form-control-wrapper {
+.rs-form-stack-vertical .rs-form-group .rs-form-control-wrapper {
   display: inline-block;
-  max-width: -moz-max-content;
-  max-width: max-content;
 }
-.rs-form-horizontal .rs-form-group .rs-form-control-wrapper {
+.rs-form-stack-horizontal .rs-form-group .rs-form-control-wrapper {
   float: inline-start;
 }
-.rs-form-horizontal .rs-form-group .rs-form-control-wrapper + .rs-form-help-text {
+.rs-form-stack-horizontal .rs-form-group .rs-form-control-wrapper + .rs-form-help-text {
   clear: both;
 }
-.rs-form-inline .rs-form-group .rs-form-control-wrapper {
+.rs-form-stack-inline .rs-form-group .rs-form-control-wrapper {
   display: inline-block;
 }
-.rs-form-inline .rs-form-group .rs-sr-only + .rs-form-control-wrapper {
+.rs-form-stack-inline .rs-form-group .rs-sr-only + .rs-form-control-wrapper {
   margin-inline-start: 0;
 }
 .rs-input-group > .rs-form-control > .rs-input {

package/FormControl/styles/index.less

@@ -1,7 +1,7 @@
 @import '../../styles/common.less';
 
 // Full container.
-.rs-form-fluid {
+.rs-form-stack-fluid {
   .rs-form-control-wrapper {
     width: 100%;
 
@@ -11,13 +11,10 @@
     }
   }
 
-  &.rs-form-vertical .rs-form-group {
+  &.rs-form-stack-vertical .rs-form-group {
     .rs-input-group {
       width: 100%;
     }
-    .rs-form-control-wrapper {
-      max-width: 100%;
-    }
   }
 }
 
@@ -38,13 +35,14 @@
 }
 
 // Vertical forms
-.rs-form-vertical .rs-form-group .rs-input-group {
-  width: @form-control-width;
-}
+.rs-form-stack-vertical .rs-form-group {
+  .rs-input-group {
+    width: @form-control-width;
+  }
 
-.rs-form-vertical .rs-form-group .rs-form-control-wrapper {
-  display: inline-block;
-  max-width: max-content;
+  .rs-form-control-wrapper {
+    display: inline-block;
+  }
 }
 
 // Horizontal forms
@@ -52,7 +50,7 @@
 // Horizontal forms are built on grid classes and allow you to create forms with
 // labels on the left and inputs on the right.
 
-.rs-form-horizontal .rs-form-group {
+.rs-form-stack-horizontal .rs-form-group {
   .rs-form-control-wrapper {
     float: inline-start;
   }
@@ -63,7 +61,7 @@
 }
 
 // Inline
-.rs-form-inline .rs-form-group {
+.rs-form-stack-inline .rs-form-group {
   .rs-form-control-wrapper {
     display: inline-block;
   }

package/FormControlLabel/styles/index.css

@@ -27,6 +27,6 @@
   --rs-gray-600: #3c3f43;
   --rs-text-secondary: var(--rs-gray-200);
 }
-.rs-form-plaintext .rs-form-control-label {
+[data-rs='form'][data-plaintext='true'] .rs-form-control-label {
   color: var(--rs-text-secondary);
 }

package/FormControlLabel/styles/index.less

@@ -2,6 +2,6 @@
 
 // FormControlLabel
 
-.rs-form-plaintext .rs-form-control-label {
+[data-rs='form'][data-plaintext='true'] .rs-form-control-label {
   color: var(--rs-text-secondary);
 }

package/FormGroup/styles/index.css

@@ -15,19 +15,6 @@
   --rs-font-size-sm: 0.875rem;
   --rs-spacing: 0.25rem;
 }
-.rs-form {
-  --rs-form-direction: column;
-  --rs-form-spacing: calc(var(--rs-spacing) * 4);
-  --rs-form-group-spacing: var(--rs-spacing);
-  --rs-form-group-direction: column;
-  display: flex;
-  flex-direction: var(--rs-form-direction);
-  gap: var(--rs-form-spacing);
-  align-items: flex-start;
-}
-.rs-form-inline {
-  --rs-form-direction: row;
-}
 .rs-form-group {
   position: relative;
   display: flex;
@@ -40,31 +27,37 @@
 .rs-form-group textarea.rs-input {
   vertical-align: bottom;
 }
-.rs-form-vertical .rs-form-group .rs-form-control-label {
+.rs-form-stack-vertical .rs-form-group .rs-form-control-label {
   display: block;
 }
-.rs-form-horizontal {
+.rs-form-stack {
+  --rs-form-group-spacing: var(--rs-spacing);
+  --rs-form-group-direction: column;
+}
+.rs-form-stack-horizontal {
   --rs-form-control-label-width: 170px;
   --rs-form-group-spacing: calc(var(--rs-spacing) * 3);
   --rs-form-group-direction: row;
 }
-.rs-form-horizontal .rs-form-group {
+.rs-form-stack-horizontal .rs-form-group {
   align-items: baseline;
 }
-.rs-form-horizontal .rs-form-group .rs-form-control-label {
+.rs-form-stack-horizontal .rs-form-group .rs-form-control-label {
   display: inline-block;
   font-size: var(--rs-font-size-sm);
   width: var(--rs-form-control-label-width);
   text-align: end;
 }
-.rs-form-horizontal .rs-form-group .rs-btn-toolbar {
+.rs-form-stack-horizontal .rs-form-group .rs-btn-toolbar {
   padding-inline-start: calc(var(--rs-form-control-label-width) + var(--rs-form-group-spacing));
 }
-.rs-form-inline {
-  --rs-form-spacing: calc(var(--rs-spacing) * 4);
+.rs-form-stack-inline {
   --rs-form-group-direction: row;
   --rs-form-group-spacing: calc(var(--rs-spacing) * 3);
 }
-.rs-form-inline .rs-form-group {
+.rs-form-stack-inline .rs-form-group {
   align-items: center;
 }
+.rs-form-stack-fluid .rs-form-group {
+  width: 100%;
+}

package/FormGroup/styles/index.less

@@ -21,18 +21,23 @@
 }
 
 // Vertical forms
-.rs-form-vertical .rs-form-group {
+.rs-form-stack-vertical .rs-form-group {
   .rs-form-control-label {
     display: block;
   }
 }
 
+.rs-form-stack {
+  --rs-form-group-spacing: var(--rs-spacing);
+  --rs-form-group-direction: column;
+}
+
 // Horizontal forms
 //
 // Horizontal forms are built on grid classes and allow you to create forms with
 // labels on the left and inputs on the right.
 
-.rs-form-horizontal {
+.rs-form-stack-horizontal {
   --rs-form-control-label-width: @form-control-label-width;
   --rs-form-group-spacing: calc(var(--rs-spacing) * 3);
   --rs-form-group-direction: row;
@@ -54,11 +59,17 @@
 }
 
 // Inline
-.rs-form-inline {
-  --rs-form-spacing: calc(var(--rs-spacing) * 4);
+.rs-form-stack-inline {
   --rs-form-group-direction: row;
   --rs-form-group-spacing: calc(var(--rs-spacing) * 3);
+
   .rs-form-group {
     align-items: center;
   }
 }
+
+.rs-form-stack-fluid {
+  .rs-form-group {
+    width: 100%;
+  }
+}

package/FormStack/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "rsuite/FormStack",
+  "private": true,
+  "main": "../cjs/FormStack/index.js",
+  "module": "../esm/FormStack/index.js",
+  "types": "../esm/FormStack/index.d.ts"
+}

package/FormStack/styles/index.css

@@ -0,0 +1,27 @@
+/**
+  * Map mixin
+  * @param {string} @size-name - The size name
+  * @param {string} @suffix - The suffix
+  */
+/* stylelint-disable */
+*[class*='rs-'] {
+  box-sizing: border-box;
+}
+*[class*='rs-']::before,
+*[class*='rs-']::after {
+  box-sizing: border-box;
+}
+:root {
+  --rs-spacing: 0.25rem;
+}
+.rs-form-stack {
+  --rs-form-stack-dir: column;
+  --rs-form-stack-spacing: calc(var(--rs-spacing) * 4);
+  display: flex;
+  flex-direction: var(--rs-form-stack-dir);
+  gap: var(--rs-form-stack-spacing);
+  align-items: flex-start;
+}
+.rs-form-stack-inline {
+  --rs-form-stack-dir: row;
+}

package/FormStack/styles/index.less

@@ -0,0 +1,15 @@
+@import '../../styles/common';
+
+.rs-form-stack {
+  --rs-form-stack-dir: column;
+  --rs-form-stack-spacing: calc(var(--rs-spacing) * 4);
+
+  display: flex;
+  flex-direction: var(--rs-form-stack-dir);
+  gap: var(--rs-form-stack-spacing);
+  align-items: flex-start;
+}
+
+.rs-form-stack-inline {
+  --rs-form-stack-dir: row;
+}

package/InputPicker/styles/index.css

@@ -1854,7 +1854,7 @@ textarea.rs-input {
 }
 .rs-picker-label.rs-input-group-addon {
   color: var(--rs-text-primary);
-  padding-inline-end: 4px !important;
+  padding-inline: calc(var(--rs-input-group-inside-btn-padding) * 2 - var(--rs-picker-toggle-border-width));
 }
 .rs-picker-loader {
   width: var(--rs-picker-loader-size);

package/MultiCascadeTree/styles/index.css

@@ -1931,7 +1931,7 @@ textarea.rs-input {
 }
 .rs-picker-label.rs-input-group-addon {
   color: var(--rs-text-primary);
-  padding-inline-end: 4px !important;
+  padding-inline: calc(var(--rs-input-group-inside-btn-padding) * 2 - var(--rs-picker-toggle-border-width));
 }
 .rs-picker-loader {
   width: var(--rs-picker-loader-size);

package/MultiCascader/styles/index.css

@@ -2114,7 +2114,7 @@ textarea.rs-input {
 }
 .rs-picker-label.rs-input-group-addon {
   color: var(--rs-text-primary);
-  padding-inline-end: 4px !important;
+  padding-inline: calc(var(--rs-input-group-inside-btn-padding) * 2 - var(--rs-picker-toggle-border-width));
 }
 .rs-picker-loader {
   width: var(--rs-picker-loader-size);

package/Pagination/styles/index.css

@@ -1839,7 +1839,7 @@ textarea.rs-input {
 }
 .rs-picker-label.rs-input-group-addon {
   color: var(--rs-text-primary);
-  padding-inline-end: 4px !important;
+  padding-inline: calc(var(--rs-input-group-inside-btn-padding) * 2 - var(--rs-picker-toggle-border-width));
 }
 .rs-picker-loader {
   width: var(--rs-picker-loader-size);

package/SelectPicker/styles/index.css

@@ -1774,7 +1774,7 @@ textarea.rs-input {
 }
 .rs-picker-label.rs-input-group-addon {
   color: var(--rs-text-primary);
-  padding-inline-end: 4px !important;
+  padding-inline: calc(var(--rs-input-group-inside-btn-padding) * 2 - var(--rs-picker-toggle-border-width));
 }
 .rs-picker-loader {
   width: var(--rs-picker-loader-size);

package/TagInput/styles/index.css

@@ -1848,7 +1848,7 @@ textarea.rs-input {
 }
 .rs-picker-label.rs-input-group-addon {
   color: var(--rs-text-primary);
-  padding-inline-end: 4px !important;
+  padding-inline: calc(var(--rs-input-group-inside-btn-padding) * 2 - var(--rs-picker-toggle-border-width));
 }
 .rs-picker-loader {
   width: var(--rs-picker-loader-size);

package/TagPicker/styles/index.css

@@ -1848,7 +1848,7 @@ textarea.rs-input {
 }
 .rs-picker-label.rs-input-group-addon {
   color: var(--rs-text-primary);
-  padding-inline-end: 4px !important;
+  padding-inline: calc(var(--rs-input-group-inside-btn-padding) * 2 - var(--rs-picker-toggle-border-width));
 }
 .rs-picker-loader {
   width: var(--rs-picker-loader-size);

package/TimePicker/styles/index.css

@@ -2361,7 +2361,7 @@ textarea.rs-input {
 }
 .rs-picker-label.rs-input-group-addon {
   color: var(--rs-text-primary);
-  padding-inline-end: 4px !important;
+  padding-inline: calc(var(--rs-input-group-inside-btn-padding) * 2 - var(--rs-picker-toggle-border-width));
 }
 .rs-picker-loader {
   width: var(--rs-picker-loader-size);

package/TimeRangePicker/styles/index.css

@@ -2361,7 +2361,7 @@ textarea.rs-input {
 }
 .rs-picker-label.rs-input-group-addon {
   color: var(--rs-text-primary);
-  padding-inline-end: 4px !important;
+  padding-inline: calc(var(--rs-input-group-inside-btn-padding) * 2 - var(--rs-picker-toggle-border-width));
 }
 .rs-picker-loader {
   width: var(--rs-picker-loader-size);

package/Tree/styles/index.css

@@ -1776,7 +1776,7 @@ textarea.rs-input {
 }
 .rs-picker-label.rs-input-group-addon {
   color: var(--rs-text-primary);
-  padding-inline-end: 4px !important;
+  padding-inline: calc(var(--rs-input-group-inside-btn-padding) * 2 - var(--rs-picker-toggle-border-width));
 }
 .rs-picker-loader {
   width: var(--rs-picker-loader-size);

package/TreePicker/styles/index.css

@@ -1776,7 +1776,7 @@ textarea.rs-input {
 }
 .rs-picker-label.rs-input-group-addon {
   color: var(--rs-text-primary);
-  padding-inline-end: 4px !important;
+  padding-inline: calc(var(--rs-input-group-inside-btn-padding) * 2 - var(--rs-picker-toggle-border-width));
 }
 .rs-picker-loader {
   width: var(--rs-picker-loader-size);

package/cjs/CustomProvider/types.d.ts

@@ -42,6 +42,7 @@ import type { FormControlLabelProps } from '../FormControlLabel';
 import type { FormErrorMessageProps } from '../FormErrorMessage';
 import type { FormGroupProps } from '../FormGroup';
 import type { FormHelpTextProps } from '../FormHelpText';
+import type { FormStackProps } from '../FormStack';
 import type { GridProps } from '../Grid';
 import type { HeaderProps } from '../Header';
 import type { HeadingProps } from '../Heading';
@@ -155,6 +156,7 @@ export interface ReactSuiteComponents {
     FormErrorMessage: ComponentProps<FormErrorMessageProps>;
     FormGroup: ComponentProps<FormGroupProps>;
     FormHelpText: ComponentProps<FormHelpTextProps>;
+    FormStack: ComponentProps<FormStackProps>;
     Grid: ComponentProps<GridProps>;
     Header: ComponentProps<HeaderProps>;
     Heading: ComponentProps<HeadingProps>;

package/cjs/Form/Form.d.ts

@@ -102,10 +102,19 @@ declare const Form: import("../internals/types").InternalRefForwardingComponent<
         [x: string]: string | undefined;
     }>> | undefined;
 }, never> & {
+    Stack: import("../internals/types").InternalRefForwardingComponent<"span", import("../FormStack").FormStackProps, never> & Record<string, never>;
     Control: FormControlComponent;
-    ControlLabel: import("../internals/types").InternalRefForwardingComponent<"label", import("../FormControlLabel").FormControlLabelProps, never> & Record<string, never>;
+    Label: import("../internals/types").InternalRefForwardingComponent<"label", import("../FormControlLabel").FormControlLabelProps, never> & Record<string, never>;
     ErrorMessage: import("../internals/types").InternalRefForwardingComponent<"div", import("../FormErrorMessage").FormErrorMessageProps, never> & Record<string, never>;
     Group: import("../internals/types").InternalRefForwardingComponent<"div", import("../FormGroup").FormGroupProps, never> & Record<string, never>;
+    Text: import("../internals/types").InternalRefForwardingComponent<"span", import("../FormHelpText").FormHelpTextProps, never> & Record<string, never>;
+    /**
+     * @deprecated Use `Form.Label` instead
+     */
+    ControlLabel: import("../internals/types").InternalRefForwardingComponent<"label", import("../FormControlLabel").FormControlLabelProps, never> & Record<string, never>;
+    /**
+     * @deprecated Use `Form.Text` instead
+     */
     HelpText: import("../internals/types").InternalRefForwardingComponent<"span", import("../FormHelpText").FormHelpTextProps, never> & Record<string, never>;
 };
 export default Form;