rsuite 6.0.0-canary-2025062016 → 6.0.0-canary-20250622

package/cjs/ButtonToolbar/ButtonToolbar.js

@@ -30,6 +30,8 @@ const ButtonToolbar = (0, _utils.forwardRef)((props, ref) => {
   } = (0, _hooks.useStyles)(classPrefix);
   const classes = merge(className, withPrefix());
   return /*#__PURE__*/_react.default.createElement(_Stack.default, (0, _extends2.default)({
+    wrap: true,
+    spacing: 8,
     as: as,
     role: role,
     ref: ref,

package/cjs/InputPicker/utils.d.ts

@@ -1 +1 @@
-export declare const convertSize: (size?: string) => "lg" | "md" | "sm";
+export declare const convertSize: (size?: string) => "sm" | "md" | "lg";

package/cjs/Nav/Nav.d.ts

@@ -4,11 +4,10 @@ import type { HTMLPropsWithoutSelect } from '../internals/types';
 export interface NavProps<T = any> extends BoxProps, HTMLPropsWithoutSelect {
     /**
      * The appearance style of the Nav component.
-     *
+     * - 'pills' appearance is deprecated. Use `SegmentedControl` component instead.
      * @default 'default'
-     * @version 'pills' is supported in version 5.68.0
      */
-    appearance?: 'default' | 'subtle' | 'tabs' | 'pills';
+    appearance?: 'default' | 'subtle' | 'tabs';
     /**
      * Whether the Nav component is reversed.
      */

package/cjs/Stack/Stack.js

@@ -8,8 +8,10 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _react = _interopRequireDefault(require("react"));
 var _StackItem = _interopRequireDefault(require("./StackItem"));
 var _Box = _interopRequireDefault(require("../internals/Box"));
+var _useStyled = require("../internals/hooks/useStyled");
 var _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");
+var _utils2 = require("./utils");
 const Subcomponents = {
   Item: _StackItem.default
 };
@@ -43,20 +45,33 @@ const Stack = (0, _utils.forwardRef)((props, ref) => {
   const {
     withPrefix,
     merge,
-    cssVar,
     responsive
   } = (0, _hooks.useStyles)(classPrefix);
-  const classes = merge(className, withPrefix({
+  const baseClasses = merge(className, withPrefix({
     wrap
   }), ...responsive(direction));
-  const styles = (0, _utils.mergeStyles)(style, cssVar('spacing', spacing, _utils.getCssValue), cssVar('align', align), cssVar('justify', justify));
+
+  // Generate CSS variables for Stack
+  const cssVars = (0, _utils2.generateStackCssVars)({
+    spacing,
+    align,
+    justify
+  });
+
+  // Use the useStyled hook to manage CSS variables
+  const styled = (0, _useStyled.useStyled)({
+    cssVars,
+    className: baseClasses,
+    style,
+    prefix: classPrefix
+  });
   const filteredChildren = _react.default.Children.toArray(children);
   const childCount = filteredChildren.length;
   return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
     as: as,
     ref: ref,
-    className: classes,
-    style: styles
+    className: styled.className,
+    style: styled.style
   }, rest), filteredChildren.map((child, index) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
     key: index
   }, child, index < childCount - 1 && divider)));

package/cjs/Stack/utils.d.ts

@@ -0,0 +1,9 @@
+import { CSSProperties } from 'react';
+/**
+ * Generate CSS variables for Stack component
+ */
+export declare function generateStackCssVars({ spacing, align, justify }: {
+    spacing?: number | string | (number | string)[];
+    align?: CSSProperties['alignItems'];
+    justify?: CSSProperties['justifyContent'];
+}): Record<string, string | number | undefined>;

package/cjs/Stack/utils.js

@@ -0,0 +1,38 @@
+'use client';
+"use strict";
+
+exports.__esModule = true;
+exports.generateStackCssVars = generateStackCssVars;
+var _utils = require("../internals/utils");
+/**
+ * Generate CSS variables for Stack component
+ */
+function generateStackCssVars({
+  spacing,
+  align,
+  justify
+}) {
+  const cssVars = {};
+  const prefix = `--rs-stack-`;
+
+  // Add spacing CSS variable
+  if (spacing !== undefined) {
+    // Handle array or single value for spacing
+    if (Array.isArray(spacing)) {
+      cssVars[`${prefix}spacing`] = spacing.map(s => (0, _utils.getCssValue)(s)).join(' ');
+    } else {
+      cssVars[`${prefix}spacing`] = (0, _utils.getCssValue)(spacing);
+    }
+  }
+
+  // Add align CSS variable
+  if (align !== undefined) {
+    cssVars[`${prefix}align`] = align;
+  }
+
+  // Add justify CSS variable
+  if (justify !== undefined) {
+    cssVars[`${prefix}justify`] = justify;
+  }
+  return cssVars;
+}

package/cjs/Tabs/Tabs.d.ts

@@ -6,10 +6,12 @@ import { BoxProps } from '../internals/Box';
 export interface TabsProps extends BoxProps {
     /**
      * The appearance of the tabs.
+     * - 'pills' appearance is deprecated. Use `SegmentedControl` component instead.
+     *
      * @default 'tabs'
-     * @version 'pills' is supported in version 5.68.0
+     *
      */
-    appearance?: 'tabs' | 'subtle' | 'pills';
+    appearance?: 'tabs' | 'subtle';
     /**
      * The key of the active tab.
      */

package/cjs/internals/Box/Box.d.ts

@@ -1,45 +1,45 @@
 import { CSSProperties as CSS } from 'react';
-import type { WithAsProps, Breakpoints, ColorScheme, Size } from '../types';
+import type { WithAsProps, Breakpoints, ResponsiveValue, ColorScheme, Size } from '../types';
 export interface BoxProps extends WithAsProps {
     /** Breakpoint below which the component is shown with `display: block` */
     showFrom?: Breakpoints;
     /** Breakpoint above which the component is hidden with `display: none` */
     hideFrom?: Breakpoints;
     /** Display property */
-    display?: CSS['display'];
+    display?: CSS['display'] | ResponsiveValue<CSS['display']>;
     /** Padding */
-    p?: CSS['padding'];
-    pt?: CSS['paddingTop'];
-    pb?: CSS['paddingBottom'];
-    pl?: CSS['paddingLeft'];
-    pr?: CSS['paddingRight'];
-    px?: CSS['paddingInline'];
-    py?: CSS['paddingBlock'];
+    p?: CSS['padding'] | ResponsiveValue<CSS['padding']>;
+    pt?: CSS['paddingTop'] | ResponsiveValue<CSS['paddingTop']>;
+    pb?: CSS['paddingBottom'] | ResponsiveValue<CSS['paddingBottom']>;
+    pl?: CSS['paddingLeft'] | ResponsiveValue<CSS['paddingLeft']>;
+    pr?: CSS['paddingRight'] | ResponsiveValue<CSS['paddingRight']>;
+    px?: CSS['paddingInline'] | ResponsiveValue<CSS['paddingInline']>;
+    py?: CSS['paddingBlock'] | ResponsiveValue<CSS['paddingBlock']>;
     /** Margin */
-    m?: CSS['margin'];
-    mt?: CSS['marginTop'];
-    mb?: CSS['marginBottom'];
-    ml?: CSS['marginLeft'];
-    mr?: CSS['marginRight'];
-    mx?: CSS['marginInline'];
-    my?: CSS['marginBlock'];
+    m?: CSS['margin'] | ResponsiveValue<CSS['margin']>;
+    mt?: CSS['marginTop'] | ResponsiveValue<CSS['marginTop']>;
+    mb?: CSS['marginBottom'] | ResponsiveValue<CSS['marginBottom']>;
+    ml?: CSS['marginLeft'] | ResponsiveValue<CSS['marginLeft']>;
+    mr?: CSS['marginRight'] | ResponsiveValue<CSS['marginRight']>;
+    mx?: CSS['marginInline'] | ResponsiveValue<CSS['marginInline']>;
+    my?: CSS['marginBlock'] | ResponsiveValue<CSS['marginBlock']>;
     /** Box size */
-    w?: CSS['width'];
-    h?: CSS['height'];
-    minw?: CSS['minWidth'];
-    maxw?: CSS['maxWidth'];
-    minh?: CSS['minHeight'];
-    maxh?: CSS['maxHeight'];
+    w?: CSS['width'] | ResponsiveValue<CSS['width']>;
+    h?: CSS['height'] | ResponsiveValue<CSS['height']>;
+    minw?: CSS['minWidth'] | ResponsiveValue<CSS['minWidth']>;
+    maxw?: CSS['maxWidth'] | ResponsiveValue<CSS['maxWidth']>;
+    minh?: CSS['minHeight'] | ResponsiveValue<CSS['minHeight']>;
+    maxh?: CSS['maxHeight'] | ResponsiveValue<CSS['maxHeight']>;
     /** Box Color */
-    c?: ColorScheme | CSS['color'];
+    c?: ColorScheme | CSS['color'] | ResponsiveValue<ColorScheme | CSS['color']>;
     /** Box Border */
-    bd?: CSS['border'];
+    bd?: CSS['border'] | ResponsiveValue<CSS['border']>;
     /** Box Background */
-    bg?: ColorScheme | CSS['backgroundColor'];
+    bg?: ColorScheme | CSS['backgroundColor'] | ResponsiveValue<ColorScheme | CSS['backgroundColor']>;
     /** Box Border Radius */
-    rounded?: Size | CSS['borderRadius'] | 'full';
+    rounded?: Size | CSS['borderRadius'] | 'full' | ResponsiveValue<Size | CSS['borderRadius'] | 'full'>;
     /** Box Shadow */
-    shadow?: Size | CSS['boxShadow'];
+    shadow?: Size | CSS['boxShadow'] | ResponsiveValue<Size | CSS['boxShadow']>;
 }
 /**
  * Box component is the base component for all components,

package/cjs/internals/Box/Box.js

@@ -7,9 +7,9 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
-var _utils = require("../utils");
 var _forwardRef = require("../utils/react/forwardRef");
-var _utils2 = require("./utils");
+var _utils = require("./utils");
+var _useStyled = require("../hooks/useStyled");
 /**
  * Box component is the base component for all components,
  * providing shorthand for style properties.
@@ -26,18 +26,23 @@ const Box = (0, _forwardRef.forwardRef)((props, ref) => {
     style,
     ...rest
   } = props;
-  const boxProps = (0, _utils2.extractBoxProps)(rest);
-  const domProps = (0, _utils2.omitBoxProps)(rest);
-  const boxCSSVars = (0, _utils2.getBoxCSSVariables)(boxProps);
-  const boxStyle = (0, _utils.mergeStyles)(style, boxCSSVars);
+  const boxProps = (0, _utils.extractBoxProps)(rest);
+  const domProps = (0, _utils.omitBoxProps)(rest);
+  const boxCSSVars = (0, _utils.getBoxCSSVariables)(boxProps);
   const isBox = !(0, _isEmpty.default)(boxCSSVars) || showFrom || hideFrom;
+  const styled = (0, _useStyled.useStyled)({
+    cssVars: boxCSSVars,
+    className,
+    style,
+    enabled: isBox
+  });
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
     ref: ref,
     "data-rs": isBox ? 'box' : undefined,
     "data-visible-from": showFrom,
     "data-hidden-from": hideFrom,
-    className: className,
-    style: boxStyle
+    className: styled.className,
+    style: styled.style
   }, domProps), children);
 });
 Box.displayName = 'Box';

package/cjs/internals/Box/utils.d.ts

@@ -1,3 +1,4 @@
+import type { ResponsiveValue } from '../types';
 /**
  * Extract box properties from props
  * @param props Original props object
@@ -10,9 +11,11 @@ export declare const extractBoxProps: (props: Record<string, any>) => Record<str
  * @returns New object without layout properties
  */
 export declare const omitBoxProps: (props: Record<string, any>) => Record<string, any>;
+type CSSVarValue = string | number | undefined | ResponsiveValue<string | number>;
 /**
  * Converts layout properties to CSS variables with abbreviated names
  * @param props Object containing layout properties
  * @returns Object with CSS variables
  */
-export declare const getBoxCSSVariables: (props: Record<string, any>) => Record<string, string | number | undefined>;
+export declare const getBoxCSSVariables: (props: Record<string, any>) => Record<string, CSSVarValue>;
+export {};

package/cjs/internals/Box/utils.js

@@ -4,6 +4,7 @@
 exports.__esModule = true;
 exports.omitBoxProps = exports.getBoxCSSVariables = exports.extractBoxProps = void 0;
 var _utils = require("../utils");
+var _constants = require("../constants");
 // Mapping for padding properties to their CSS style equivalents
 const paddingStyleMap = {
   p: 'padding',
@@ -74,51 +75,191 @@ const omitBoxProps = props => {
   return filteredProps;
 };
 
+/**
+ * Checks if a value is a responsive value object
+ * @param value - Value to check
+ * @returns True if the value is a responsive value object
+ */
+exports.omitBoxProps = omitBoxProps;
+function isResponsiveValue(value) {
+  return value !== null && typeof value === 'object' && !Array.isArray(value) && Object.keys(value).some(key => _constants.BREAKPOINTS.includes(key));
+}
+
+/**
+ * Process a value that might be a responsive value
+ * @param value - Value to process
+ * @param processor - Function to process non-responsive values
+ * @returns Processed value or responsive object with processed values
+ */
+function processResponsiveValue(value, processor) {
+  if (value === undefined) {
+    return undefined;
+  }
+  if (isResponsiveValue(value)) {
+    const result = {};
+    Object.entries(value).forEach(([breakpoint, val]) => {
+      if (val !== undefined) {
+        const processed = processor(val);
+        if (processed !== undefined) {
+          result[breakpoint] = processed;
+        }
+      }
+    });
+    return Object.keys(result).length > 0 ? result : undefined;
+  }
+  return processor(value);
+}
+
+// Type for CSS variable values that can be string, number, or responsive values
+
+// Silence ESLint warnings for unused parameters in forEach callbacks
+/* eslint-disable @typescript-eslint/no-unused-vars */
+
 /**
  * Converts layout properties to CSS variables with abbreviated names
  * @param props Object containing layout properties
  * @returns Object with CSS variables
  */
-exports.omitBoxProps = omitBoxProps;
 const getBoxCSSVariables = props => {
   const cssVars = {};
+  const prefix = `--rs-box-`;
 
   // Process padding properties
   Object.keys(paddingStyleMap).forEach(propKey => {
     if (props[propKey] !== undefined) {
-      cssVars[`--rs-box-${propKey}`] = (0, _utils.getCssValue)(props[propKey]);
+      cssVars[`${prefix}${propKey}`] = processResponsiveValue(props[propKey], val => (0, _utils.getCssValue)(val));
     }
   });
 
   // Process margin properties
   Object.keys(marginStyleMap).forEach(propKey => {
     if (props[propKey] !== undefined) {
-      cssVars[`--rs-box-${propKey}`] = (0, _utils.getCssValue)(props[propKey]);
+      cssVars[`${prefix}${propKey}`] = processResponsiveValue(props[propKey], val => (0, _utils.getCssValue)(val));
     }
   });
 
   // Process size properties
   Object.keys(sizeStyleMap).forEach(propKey => {
     if (props[propKey] !== undefined) {
-      cssVars[`--rs-box-${propKey}`] = (0, _utils.getCssValue)(props[propKey]);
+      cssVars[`${prefix}${propKey}`] = processResponsiveValue(props[propKey], val => (0, _utils.getCssValue)(val));
     }
   });
   if (props.bd !== undefined) {
-    cssVars['--rs-box-bd'] = (0, _utils.getCssValue)(props.bd);
+    cssVars[`${prefix}bd`] = processResponsiveValue(props.bd, val => (0, _utils.getCssValue)(val));
   }
   if (props.display !== undefined) {
-    cssVars['--rs-box-display'] = props.display;
+    cssVars[`${prefix}display`] = processResponsiveValue(props.display, val => val);
   }
   if (props.c !== undefined) {
-    cssVars['--rs-box-c'] = (0, _utils.getColorVar)(props.c);
+    cssVars[`${prefix}c`] = processResponsiveValue(props.c, val => (0, _utils.getColorVar)(val));
   }
   if (props.bg !== undefined) {
-    cssVars['--rs-box-bg'] = (0, _utils.getColorVar)(props.bg);
+    cssVars[`${prefix}bg`] = processResponsiveValue(props.bg, val => (0, _utils.getColorVar)(val));
+  }
+
+  // Handle special cases for rounded and shadow
+  if (props.rounded !== undefined) {
+    const processRounded = val => {
+      const result = (0, _utils.getSizeStyle)(val, 'box', 'rounded');
+      return result ? result : undefined;
+    };
+    if (isResponsiveValue(props.rounded)) {
+      // Handle responsive rounded values
+      const responsiveRounded = {};
+      Object.entries(props.rounded).forEach(([breakpoint, val]) => {
+        if (val !== undefined) {
+          const styleObj = processRounded(val);
+          if (styleObj) {
+            responsiveRounded[breakpoint] = styleObj;
+          }
+        }
+      });
+
+      // For each CSS variable key in the rounded styles, create a responsive value
+      const processedKeys = new Set();
+      Object.entries(responsiveRounded).forEach(([_breakpoint, styleObj]) => {
+        if (styleObj) {
+          Object.entries(styleObj).forEach(([key, _value]) => {
+            processedKeys.add(key);
+          });
+        }
+      });
+      processedKeys.forEach(key => {
+        const responsiveValue = {};
+        Object.entries(responsiveRounded).forEach(([breakpoint, styleObj]) => {
+          if (styleObj && styleObj[key] !== undefined) {
+            // Ensure we're only using string values for CSS variables
+            const value = styleObj[key];
+            if (typeof value === 'string' || typeof value === 'number') {
+              responsiveValue[breakpoint] = value;
+            }
+          }
+        });
+        if (Object.keys(responsiveValue).length > 0) {
+          cssVars[key] = responsiveValue;
+        }
+      });
+    } else {
+      // Handle non-responsive rounded value
+      const styleObj = processRounded(props.rounded);
+      if (styleObj) {
+        Object.entries(styleObj).forEach(([key, value]) => {
+          cssVars[key] = value;
+        });
+      }
+    }
+  }
+  if (props.shadow !== undefined) {
+    const processShadow = val => {
+      const result = (0, _utils.getSizeStyle)(val, 'box', 'shadow');
+      return result ? result : undefined;
+    };
+    if (isResponsiveValue(props.shadow)) {
+      // Handle responsive shadow values
+      const responsiveShadow = {};
+      Object.entries(props.shadow).forEach(([breakpoint, val]) => {
+        if (val !== undefined) {
+          const styleObj = processShadow(val);
+          if (styleObj) {
+            responsiveShadow[breakpoint] = styleObj;
+          }
+        }
+      });
+
+      // For each CSS variable key in the shadow styles, create a responsive value
+      const processedKeys = new Set();
+      Object.entries(responsiveShadow).forEach(([_breakpoint, styleObj]) => {
+        if (styleObj) {
+          Object.entries(styleObj).forEach(([key, _value]) => {
+            processedKeys.add(key);
+          });
+        }
+      });
+      processedKeys.forEach(key => {
+        const responsiveValue = {};
+        Object.entries(responsiveShadow).forEach(([breakpoint, styleObj]) => {
+          if (styleObj && styleObj[key] !== undefined) {
+            // Ensure we're only using string values for CSS variables
+            const value = styleObj[key];
+            if (typeof value === 'string' || typeof value === 'number') {
+              responsiveValue[breakpoint] = value;
+            }
+          }
+        });
+        if (Object.keys(responsiveValue).length > 0) {
+          cssVars[key] = responsiveValue;
+        }
+      });
+    } else {
+      // Handle non-responsive shadow value
+      const styleObj = processShadow(props.shadow);
+      if (styleObj) {
+        Object.entries(styleObj).forEach(([key, value]) => {
+          cssVars[key] = value;
+        });
+      }
+    }
   }
-  return {
-    ...cssVars,
-    ...(0, _utils.getSizeStyle)(props.rounded, 'box', 'rounded'),
-    ...(0, _utils.getSizeStyle)(props.shadow, 'box', 'shadow')
-  };
+  return cssVars;
 };
 exports.getBoxCSSVariables = getBoxCSSVariables;

package/cjs/internals/constants/index.js

@@ -3,8 +3,8 @@
 
 exports.__esModule = true;
 exports.TREE_NODE_DROP_POSITION = exports.STATUS = exports.SIZE = exports.PLACEMENT_AUTO = exports.PLACEMENT_8 = exports.PLACEMENT_4 = exports.PLACEMENT = exports.KEY_VALUES = exports.DATERANGE_DISABLED_TARGET = exports.COLOR = exports.CHECK_STATE = exports.BREAKPOINTS = void 0;
-const SIZE = exports.SIZE = ['lg', 'md', 'sm', 'xs'];
-const BREAKPOINTS = exports.BREAKPOINTS = ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'];
+const SIZE = exports.SIZE = ['xs', 'sm', 'md', 'lg'];
+const BREAKPOINTS = exports.BREAKPOINTS = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
 const STATUS = exports.STATUS = ['success', 'warning', 'error', 'info'];
 const COLOR = exports.COLOR = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'violet'];
 const PLACEMENT_4 = exports.PLACEMENT_4 = ['top', 'bottom', 'right', 'left'];

package/cjs/internals/hooks/useStyled.d.ts

@@ -0,0 +1,60 @@
+import { CSSProperties } from 'react';
+import type { Breakpoints, ResponsiveValue } from '../types';
+/**
+ * Options for the useStyled hook
+ */
+interface UseStyledOptions {
+    /**
+     * CSS variables to apply
+     */
+    cssVars?: Record<string, string | number | undefined | ResponsiveValue<string | number>>;
+    /**
+     * Base class name to include
+     */
+    className?: string;
+    /**
+     * Base style to merge with
+     */
+    style?: CSSProperties;
+    /**
+     * Whether this element should be styled
+     * Can be a boolean or a breakpoint string
+     */
+    enabled?: boolean | Breakpoints;
+    /**
+     * Prefix for the generated class name
+     * @default 'rs'
+     */
+    prefix?: string;
+}
+/**
+ * Result of the useStyled hook
+ */
+interface UseStyledResult {
+    /**
+     * Combined class name including the unique identifier
+     */
+    className: string | undefined;
+    /**
+     * Style object without CSS variables
+     */
+    style: CSSProperties | undefined;
+    /**
+     * Unique identifier for this styled element
+     */
+    id: string;
+}
+/**
+ * Custom hook for managing component styling with scoped CSS variables
+ *
+ * This hook handles:
+ * 1. Generating a unique class name for the component
+ * 2. Creating a scoped style rule to prevent CSS variable inheritance
+ * 3. Managing the lifecycle of style rules
+ * 4. Handling responsive values for different breakpoints
+ *
+ * @param options - Styling options
+ * @returns Styling properties to apply to the component
+ */
+export declare function useStyled(options: UseStyledOptions): UseStyledResult;
+export default useStyled;