rsuite 6.0.0-canary-2025031415 → 6.0.0-canary-20250319

package/esm/internals/Tree/TreeView.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { WithAsProps } from '../types';
-interface TreeViewProps extends WithAsProps, React.HTMLAttributes<HTMLDivElement> {
+import { BoxProps } from '../Box';
+interface TreeViewProps extends BoxProps, React.HTMLAttributes<HTMLDivElement> {
     treeRootClassName: string;
     multiselectable?: boolean;
     height?: number;

package/esm/internals/Tree/TreeView.js

@@ -3,6 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
 import useCombobox from "../Picker/hooks/useCombobox.js";
 import ScrollView from "../ScrollView/index.js";
+import Box from "../Box/index.js";
 import { useTreeContextProps } from "./TreeProvider.js";
 import { forwardRef } from "../utils/index.js";
 const ScrollShadowView = forwardRef((props, ref) => {
@@ -32,14 +33,15 @@ const TreeView = forwardRef((props, ref) => {
   } = useCombobox();
 
   // If the tree is virtualized, the scroll shadow is not needed.
-  const Component = scrollShadow && !virtualized ? ScrollShadowView : as;
+  const treeAs = scrollShadow && !virtualized ? ScrollShadowView : as;
 
   // If the tree is virtualized, the height is not needed.
   const viewStyles = {
     height: virtualized ? undefined : height,
     ...style
   };
-  return /*#__PURE__*/React.createElement(Component, _extends({
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: treeAs,
     role: "tree",
     style: viewStyles,
     id: id ? `${id}-${popupType}` : undefined,

package/esm/internals/types/picker.d.ts

@@ -3,7 +3,7 @@ import type { Placement } from './placement';
 import type { ToArray } from './utils';
 import type { FormControlBaseProps } from './form';
 import type { AnimationEventProps } from './animation';
-import type { WithAsProps } from './shared';
+import type { BoxProps } from '../Box';
 import type { Size } from './sizes';
 import type { PickerHandle } from '../Picker/types';
 export interface Option<T = number | string> extends Record<string, any> {
@@ -90,7 +90,7 @@ export interface DataProps<TData> {
      */
     childrenKey?: string;
 }
-export interface PickerBaseProps<L = any> extends PopupProps, WithAsProps, AnimationEventProps {
+export interface PickerBaseProps<L = any> extends PopupProps, BoxProps, AnimationEventProps {
     id?: string;
     /**
      * Custom Ref for the picker

package/esm/internals/utils/colours.d.ts

@@ -7,7 +7,7 @@ import { Color } from '../types/colours';
  */
 export declare const getColorVar: (color: Color | string | undefined) => string | undefined;
 export declare const isPresetColor: (color?: Color | React.CSSProperties['color']) => boolean;
-export declare const getColorStyle: (value?: import("csstype").Property.Color | undefined, component?: string | undefined, prop?: string) => {
+export declare const getColorStyle: (value?: import("csstype").Property.Color | undefined, name?: string | undefined, prop?: string) => {
     [x: string]: string | (string & {}) | undefined;
 } | undefined;
 /**

package/esm/internals/utils/createComponent.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { WithAsProps } from '../types';
-export type ComponentProps = WithAsProps & React.HTMLAttributes<HTMLDivElement>;
+import Box, { BoxProps } from '../Box/Box';
+export type ComponentProps = BoxProps & React.HTMLAttributes<HTMLDivElement>;
 interface Props<T extends React.ElementType> extends React.HTMLAttributes<HTMLDivElement> {
     name: string;
     componentAs?: T;
@@ -8,6 +8,7 @@ interface Props<T extends React.ElementType> extends React.HTMLAttributes<HTMLDi
 }
 /**
  * Create a component with `classPrefix` and `as` attributes.
+ * By default, the component is based on Box component and inherits all Box props.
  */
-export declare function createComponent<T extends React.ElementType = 'div', P = ComponentProps>({ name, componentAs, componentClassPrefix, ...defaultProps }: Props<T> & Partial<P>): import("../types").InternalRefForwardingComponent<T, Partial<P>, never> & Record<string, never>;
+export declare function createComponent<T extends React.ElementType = typeof Box, P = ComponentProps>({ name, componentAs, componentClassPrefix, ...defaultProps }: Props<T> & Partial<P>): import("../types").InternalRefForwardingComponent<T, Partial<P>, never> & Record<string, never>;
 export default createComponent;

package/esm/internals/utils/createComponent.js

@@ -2,11 +2,13 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
 import kebabCase from 'lodash/kebabCase';
+import Box from "../Box/Box.js";
 import { useStyles } from "../hooks/index.js";
-import { forwardRef } from "./index.js";
+import { forwardRef } from "./forwardRef.js";
 import { useCustom } from "../../CustomProvider/index.js";
 /**
  * Create a component with `classPrefix` and `as` attributes.
+ * By default, the component is based on Box component and inherits all Box props.
  */
 export function createComponent(_ref) {
   let {
@@ -20,7 +22,7 @@ export function createComponent(_ref) {
       propsWithDefaults
     } = useCustom(name, props);
     const {
-      as: Component = componentAs || 'div',
+      as,
       classPrefix = componentClassPrefix || kebabCase(name),
       className,
       role,
@@ -31,10 +33,11 @@ export function createComponent(_ref) {
       merge
     } = useStyles(classPrefix);
     const classes = merge(className, withPrefix());
-    return /*#__PURE__*/React.createElement(Component, _extends({}, defaultProps, rest, {
+    return /*#__PURE__*/React.createElement(Box, _extends({}, defaultProps, rest, {
       role: role,
       ref: ref,
-      className: classes
+      className: classes,
+      as: as || componentAs || 'div'
     }));
   });
   Component.displayName = name;

package/esm/internals/utils/sizes.d.ts

@@ -1,5 +1,8 @@
 import { SizeEnum } from '../types';
 export declare const isPresetSize: (size?: SizeEnum | number | string | null) => boolean;
-export declare const getSizeStyle: (value?: string | number | undefined, component?: string | undefined, prop?: string) => {
+export declare const getSizeStyle: (value?: string | number | undefined, name?: string | undefined, prop?: string) => {
+    [x: string]: string | number | undefined;
+} | undefined;
+export declare const getLineHeightStyle: (value?: string | number | undefined, name?: string | undefined, prop?: string) => {
     [x: string]: string | number | undefined;
 } | undefined;

package/esm/internals/utils/sizes.js

@@ -1,11 +1,11 @@
 'use client';
-import { SizeEnum } from "../types/index.js";
+import { SizeEnum, TypographySizeEnum } from "../types/index.js";
 import { createStyleGetter, getCssValue } from "./style-sheet/index.js";
 export const isPresetSize = size => {
   if (!size) {
     return false;
   }
-  const presetSizes = [...Object.values(SizeEnum), 'full'];
+  const presetSizes = [...Object.values(SizeEnum), ...Object.values(TypographySizeEnum), 'full'];
   return presetSizes.includes(size);
 };
 const sizeConfig = {
@@ -13,4 +13,10 @@ const sizeConfig = {
   presetChecker: isPresetSize,
   valueTransformer: getCssValue
 };
-export const getSizeStyle = createStyleGetter(sizeConfig);
+export const getSizeStyle = createStyleGetter(sizeConfig);
+const lineHeightConfig = {
+  prop: 'line-height',
+  presetChecker: isPresetSize,
+  valueTransformer: value => isPresetSize(value) ? value : null
+};
+export const getLineHeightStyle = createStyleGetter(lineHeightConfig);

package/esm/internals/utils/style-sheet/css.d.ts

@@ -7,7 +7,7 @@ export declare function getCssValue(value?: number | string | null, unit?: strin
 /**
  * Merge multiple style objects, filtering out undefined values
  */
-export declare function mergeStyles(...styles: (StyleProperties | undefined | null)[]): React.CSSProperties;
+export declare function mergeStyles(...styles: (StyleProperties | undefined | null)[]): React.CSSProperties | undefined;
 /**
  * Create CSS variables for offset positioning
  */

package/esm/internals/utils/style-sheet/css.js

@@ -1,4 +1,5 @@
 'use client';
+import isEmpty from 'lodash/isEmpty';
 /**
  * Processes and returns a value suitable for CSS (with a unit).
  */
@@ -31,13 +32,14 @@ export function mergeStyles() {
   for (var _len = arguments.length, styles = new Array(_len), _key = 0; _key < _len; _key++) {
     styles[_key] = arguments[_key];
   }
-  return styles.filter(Boolean).reduce((acc, style) => {
+  const mergedStyles = styles === null || styles === void 0 ? void 0 : styles.filter(Boolean).reduce((acc, style) => {
     if (!style) return acc;
     return {
       ...acc,
       ...style
     };
   }, {});
+  return isEmpty(mergedStyles) ? undefined : mergedStyles;
 }
 
 /**

package/esm/internals/utils/style-sheet/styles.d.ts

@@ -9,8 +9,8 @@ interface StylePropConfig<T = StyleValue> {
     presetChecker?: PresetChecker<T>;
     valueTransformer?: ValueTransformer<T>;
 }
-export declare const createStyleValueSetter: <T = string | number>(config: StylePropConfig<T>) => (value?: T | undefined, component?: string, prop?: string) => string | T | undefined;
-export declare const createStyleGetter: <T = string | number>(config: StylePropConfig<T>) => (value?: T | undefined, component?: string, prop?: string) => {
+export declare const createStyleValueSetter: <T = string | number>(config: StylePropConfig<T>) => (value?: T | undefined, name?: string, prop?: string) => string | T | undefined;
+export declare const createStyleGetter: <T = string | number>(config: StylePropConfig<T>) => (value?: T | undefined, name?: string, prop?: string) => {
     [x: string]: string | T | undefined;
 } | undefined;
 export {};

package/esm/internals/utils/style-sheet/styles.js

@@ -5,15 +5,15 @@ export const createStyleValueSetter = config => {
     presetChecker,
     useGlobalVar
   } = config;
-  return function (value, component, prop) {
+  return function (value, name, prop) {
     if (prop === void 0) {
       prop = config.prop;
     }
-    if (typeof value === 'undefined' || !component) {
+    if (typeof value === 'undefined' || !name) {
       return;
     }
     if (presetChecker !== null && presetChecker !== void 0 && presetChecker(value)) {
-      return useGlobalVar ? `var(--rs-${prop}-${value})` : `var(--rs-${component}-${prop}-${value})`;
+      return useGlobalVar ? `var(--rs-${prop}-${value})` : `var(--rs-${name}-${prop}-${value})`;
     } else if (Array.isArray(value)) {
       // If value is an array, join it with spaces,
       // .eg, gap=[10, 20] -> '10px 20px'
@@ -24,15 +24,15 @@ export const createStyleValueSetter = config => {
 };
 export const createStyleGetter = config => {
   const setValue = createStyleValueSetter(config);
-  return function (value, component, prop) {
+  return function (value, name, prop) {
     if (prop === void 0) {
       prop = config.prop;
     }
-    if (typeof value === 'undefined' || !component) {
+    if (typeof value === 'undefined' || !name) {
       return;
     }
     return {
-      [`--rs-${component}-${prop}`]: setValue(value, component, prop)
+      [`--rs-${name}-${prop}`]: setValue(value, name, prop)
     };
   };
 };

package/internals/Box/styles/index.less

@@ -1,7 +1,43 @@
 @import '../../../styles/common.less';
 
-:where(.rs-box) {
-  // Rounded
+// Define breakpoints map
+@breakpoints: {
+  xs: @screen-sm;
+  sm: @screen-md;
+  md: @screen-lg;
+  lg: @screen-xl;
+  xl: @screen-xxl;
+};
+
+// Define style property maps
+@style-maps: {
+  p: padding;
+  pt: padding-top;
+  pb: padding-bottom;
+  pl: padding-left;
+  pr: padding-right;
+  px: padding-inline;
+  py: padding-block;
+  m: margin;
+  mt: margin-top;
+  mb: margin-bottom;
+  ml: margin-left;
+  mr: margin-right;
+  mx: margin-inline;
+  my: margin-block;
+  w: width;
+  h: height;
+  c: color;
+  bd: border;
+  rounded: border-radius;
+  shadow: box-shadow;
+  bg: background;
+  display: display;
+};
+
+// Box base selector
+[data-rs='box'] {
+  // Define radius variables
   --rs-box-rounded-xs: var(--rs-radius-xs);
   --rs-box-rounded-sm: var(--rs-radius-sm);
   --rs-box-rounded-md: var(--rs-radius-md);
@@ -9,184 +45,34 @@
   --rs-box-rounded-xl: var(--rs-radius-xl);
   --rs-box-rounded-full: var(--rs-radius-full);
 
-  // Shadow
+  // Define shadow variables
   --rs-box-shadow-xs: var(--rs-shadow-xs);
   --rs-box-shadow-sm: var(--rs-shadow-sm);
   --rs-box-shadow-md: var(--rs-shadow-md);
   --rs-box-shadow-lg: var(--rs-shadow-lg);
   --rs-box-shadow-xl: var(--rs-shadow-xl);
 
-  // Background and color
-  &[style*='--rs-box-bg'] {
-    background: var(--rs-box-bg);
-  }
-  &[style*='--rs-box-color'] {
-    color: var(--rs-box-color);
-  }
-  &[style*='--rs-box-display'] {
-    display: var(--rs-box-display);
-  }
-
-  // Padding properties
-  &[style*='--rs-box-p'] {
-    padding: var(--rs-box-p);
-  }
-  &[style*='--rs-box-pt'] {
-    padding-top: var(--rs-box-pt);
-  }
-  &[style*='--rs-box-pb'] {
-    padding-bottom: var(--rs-box-pb);
-  }
-  &[style*='--rs-box-pl'] {
-    padding-left: var(--rs-box-pl);
-  }
-  &[style*='--rs-box-pr'] {
-    padding-right: var(--rs-box-pr);
-  }
-  &[style*='--rs-box-px'] {
-    padding-inline: var(--rs-box-px);
-  }
-  &[style*='--rs-box-py'] {
-    padding-block: var(--rs-box-py);
-  }
-
-  // Margin properties
-  &[style*='--rs-box-m'] {
-    margin: var(--rs-box-m);
-  }
-  &[style*='--rs-box-mt'] {
-    margin-top: var(--rs-box-mt);
-  }
-  &[style*='--rs-box-mb'] {
-    margin-bottom: var(--rs-box-mb);
-  }
-  &[style*='--rs-box-ml'] {
-    margin-left: var(--rs-box-ml);
-  }
-  &[style*='--rs-box-mr'] {
-    margin-right: var(--rs-box-mr);
-  }
-  &[style*='--rs-box-mx'] {
-    margin-inline: var(--rs-box-mx);
-  }
-  &[style*='--rs-box-my'] {
-    margin-block: var(--rs-box-my);
-  }
-
-  // Size properties
-  &[style*='--rs-box-w'] {
-    width: var(--rs-box-w);
-  }
-  &[style*='--rs-box-h'] {
-    height: var(--rs-box-h);
-  }
-
-  // Border properties
-  &[style*='--rs-box-rounded'] {
-    border-radius: var(--rs-box-rounded);
-  }
-  &[style*='--rs-box-border'] {
-    border: var(--rs-box-border);
-  }
-
-  // Shadow properties
-  &[style*='--rs-box-shadow'] {
-    box-shadow: var(--rs-box-shadow);
-  }
+  // Generate style properties from map
+  each(@style-maps, {
+    &[style*='--rs-box-@{key}'] { @{value}: ~'var(--rs-box-@{key})'; }
+  });
 }
 
-// Mobile first breakpoint mixins
-.make-visible(@breakpoint) {
-  :where(.rs-box-visible-@{breakpoint}) {
-    display: none !important;
+// Generate responsive visibility styles
+each(@breakpoints, {
+  @bp: @value - 1;
 
-    & when (@breakpoint = xs) {
-      @media (max-width: (@screen-sm - 1)) {
-        display: var(--rs-box-display, inherit) !important;
-      }
-    }
-
-    & when (@breakpoint = sm) {
-      @media (max-width: (@screen-md - 1)) {
-        display: var(--rs-box-display, inherit) !important;
-      }
-    }
-
-    & when (@breakpoint = md) {
-      @media (max-width: (@screen-lg - 1)) {
-        display: var(--rs-box-display, inherit) !important;
-      }
-    }
-
-    & when (@breakpoint = lg) {
-      @media (max-width: (@screen-xl - 1)) {
-        display: var(--rs-box-display, inherit) !important;
-      }
-    }
-
-    & when (@breakpoint = xl) {
-      @media (max-width: (@screen-xxl - 1)) {
-        display: var(--rs-box-display, inherit) !important;
-      }
-    }
-
-    & when (@breakpoint = xxl) {
-      display: var(--rs-box-display, inherit) !important;
+  // Visible from breakpoint
+  @media (max-width: @bp) {
+    [data-visible-from='@{key}'] {
+      display: none !important;
     }
   }
-}
-
-.make-hidden(@breakpoint) {
-  :where(.rs-box-hidden-@{breakpoint}) {
-    display: var(--rs-box-display, inherit) !important;
 
-    & when (@breakpoint = xs) {
-      @media (max-width: (@screen-sm - 1)) {
-        display: none !important;
-      }
-    }
-
-    & when (@breakpoint = sm) {
-      @media (max-width: (@screen-md - 1)) {
-        display: none !important;
-      }
-    }
-
-    & when (@breakpoint = md) {
-      @media (max-width: (@screen-lg - 1)) {
-        display: none !important;
-      }
-    }
-
-    & when (@breakpoint = lg) {
-      @media (max-width: (@screen-xl - 1)) {
-        display: none !important;
-      }
-    }
-
-    & when (@breakpoint = xl) {
-      @media (max-width: (@screen-xxl - 1)) {
-        display: none !important;
-      }
-    }
-
-    & when (@breakpoint = xxl) {
+  // Hidden from breakpoint
+  @media (min-width: @value) {
+    [data-hidden-from='@{key}'] {
       display: none !important;
     }
   }
-}
-
-// Generate breakpoint classes
-.make-visible(xs);
-.make-visible(sm);
-.make-visible(md);
-.make-visible(lg);
-.make-visible(xl);
-.make-visible(xxl);
-
-.make-hidden(xs);
-.make-hidden(sm);
-.make-hidden(md);
-.make-hidden(lg);
-.make-hidden(xl);
-.make-hidden(xxl);
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rsuite",
-  "version": "6.0.0-canary-2025031415",
+  "version": "6.0.0-canary-20250319",
   "description": "A suite of react components",
   "main": "cjs/index.js",
   "module": "esm/index.js",

package/styles/color-modes/dark.less

@@ -41,7 +41,7 @@
       --rs-@{color-name}-50: @@color-name-50;
 
       each(range(9), {
-        @level: @{index}00;
+        @level: ~'@{index}00';
         @color-name-level: ~'@{color-name}-@{level}-dark';
         --rs-@{color-name}-@{level}: @@color-name-level;
       });

package/styles/color-modes/light.less

@@ -41,7 +41,7 @@
     --rs-@{color-name}-50: @@color-name-50;
 
     each(range(9), {
-      @level: @{index}00;
+      @level: ~'@{index}00';
       @color-name-level: ~'@{color-name}-@{level}';
       --rs-@{color-name}-@{level}: @@color-name-level;
     });

package/styles/root.less

@@ -47,14 +47,18 @@
   --rs-radius-4xl: 2rem;    // 32px
   --rs-radius-full: calc(infinity * 1px);
 
+  // Shadow colors
+  --rs-shadow-color: rgb(0 0 0 / 10%);
+  --rs-shadow-color-deep: rgb(0 0 0 / 25%);
+
   // Shadows
   --rs-shadow-none: 0 0 #0000;
-  --rs-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 5%);
-  --rs-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 10%), 0 1px 2px 0 rgb(0 0 0 / 10%);
-  --rs-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px 0 rgb(0 0 0 / 10%);
-  --rs-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px 0 rgb(0 0 0 / 10%);
-  --rs-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 10%), 0 8px 10px 0 rgb(0 0 0 / 10%);
-  --rs-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 25%);
+  --rs-shadow-xs: 0 1px 2px 0 var(--rs-shadow-color);
+  --rs-shadow-sm: 0 1px 3px 0 var(--rs-shadow-color), 0 1px 2px 0 var(--rs-shadow-color);
+  --rs-shadow-md: 0 4px 6px -1px var(--rs-shadow-color), 0 2px 4px 0 var(--rs-shadow-color);
+  --rs-shadow-lg: 0 10px 15px -3px var(--rs-shadow-color), 0 4px 6px 0 var(--rs-shadow-color);
+  --rs-shadow-xl: 0 20px 25px -5px var(--rs-shadow-color), 0 8px 10px 0 var(--rs-shadow-color);
+  --rs-shadow-2xl: 0 25px 50px -12px var(--rs-shadow-color-deep);
 
 }
 

package/toaster/styles/index.css

@@ -12,7 +12,8 @@
   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);
+  --rs-shadow-color: rgba(0, 0, 0, 0.1);
+  --rs-shadow-md: 0 4px 6px -1px var(--rs-shadow-color), 0 2px 4px 0 var(--rs-shadow-color);
 }
 @keyframes notificationMoveIn {
   0% {

package/useToaster/styles/index.css

@@ -12,7 +12,8 @@
   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);
+  --rs-shadow-color: rgba(0, 0, 0, 0.1);
+  --rs-shadow-md: 0 4px 6px -1px var(--rs-shadow-color), 0 2px 4px 0 var(--rs-shadow-color);
 }
 @keyframes notificationMoveIn {
   0% {