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

package/esm/ButtonToolbar/ButtonToolbar.js

@@ -25,6 +25,8 @@ const ButtonToolbar = forwardRef((props, ref) => {
   } = useStyles(classPrefix);
   const classes = merge(className, withPrefix());
   return /*#__PURE__*/React.createElement(Stack, _extends({
+    wrap: true,
+    spacing: 8,
     as: as,
     role: role,
     ref: ref,

package/esm/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/esm/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/esm/Stack/Stack.js

@@ -3,8 +3,10 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
 import StackItem from "./StackItem.js";
 import Box from "../internals/Box/index.js";
-import { forwardRef, mergeStyles, getCssValue } from "../internals/utils/index.js";
+import { useStyled } from "../internals/hooks/useStyled.js";
+import { forwardRef } from "../internals/utils/index.js";
 import { useStyles, useCustom } from "../internals/hooks/index.js";
+import { generateStackCssVars } from "./utils.js";
 const Subcomponents = {
   Item: StackItem
 };
@@ -38,20 +40,33 @@ const Stack = forwardRef((props, ref) => {
   const {
     withPrefix,
     merge,
-    cssVar,
     responsive
   } = useStyles(classPrefix);
-  const classes = merge(className, withPrefix({
+  const baseClasses = merge(className, withPrefix({
     wrap
   }), ...responsive(direction));
-  const styles = mergeStyles(style, cssVar('spacing', spacing, getCssValue), cssVar('align', align), cssVar('justify', justify));
+
+  // Generate CSS variables for Stack
+  const cssVars = generateStackCssVars({
+    spacing,
+    align,
+    justify
+  });
+
+  // Use the useStyled hook to manage CSS variables
+  const styled = useStyled({
+    cssVars,
+    className: baseClasses,
+    style,
+    prefix: classPrefix
+  });
   const filteredChildren = React.Children.toArray(children);
   const childCount = filteredChildren.length;
   return /*#__PURE__*/React.createElement(Box, _extends({
     as: as,
     ref: ref,
-    className: classes,
-    style: styles
+    className: styled.className,
+    style: styled.style
   }, rest), filteredChildren.map((child, index) => /*#__PURE__*/React.createElement(React.Fragment, {
     key: index
   }, child, index < childCount - 1 && divider)));

package/esm/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/esm/Stack/utils.js

@@ -0,0 +1,35 @@
+'use client';
+import { getCssValue } from "../internals/utils/index.js";
+
+/**
+ * Generate CSS variables for Stack component
+ */
+export 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 => getCssValue(s)).join(' ');
+    } else {
+      cssVars[`${prefix}spacing`] = 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/esm/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/esm/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/esm/internals/Box/Box.js

@@ -2,9 +2,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
 import isEmpty from 'lodash/isEmpty';
-import { mergeStyles } from "../utils/index.js";
 import { forwardRef } from "../utils/react/forwardRef.js";
 import { getBoxCSSVariables, extractBoxProps, omitBoxProps } from "./utils.js";
+import { useStyled } from "../hooks/useStyled.js";
 /**
  * Box component is the base component for all components,
  * providing shorthand for style properties.
@@ -24,15 +24,20 @@ const Box = forwardRef((props, ref) => {
   const boxProps = extractBoxProps(rest);
   const domProps = omitBoxProps(rest);
   const boxCSSVars = getBoxCSSVariables(boxProps);
-  const boxStyle = mergeStyles(style, boxCSSVars);
   const isBox = !isEmpty(boxCSSVars) || showFrom || hideFrom;
+  const styled = useStyled({
+    cssVars: boxCSSVars,
+    className,
+    style,
+    enabled: isBox
+  });
   return /*#__PURE__*/React.createElement(Component, _extends({
     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/esm/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/esm/internals/Box/utils.js

@@ -1,6 +1,6 @@
 'use client';
 import { getCssValue, getSizeStyle, getColorVar } from "../utils/index.js";
-
+import { BREAKPOINTS } from "../constants/index.js";
 // Mapping for padding properties to their CSS style equivalents
 const paddingStyleMap = {
   p: 'padding',
@@ -70,6 +70,45 @@ export 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
+ */
+function isResponsiveValue(value) {
+  return value !== null && typeof value === 'object' && !Array.isArray(value) && Object.keys(value).some(key => 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
@@ -77,42 +116,143 @@ export const omitBoxProps = props => {
  */
 export 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}`] = getCssValue(props[propKey]);
+      cssVars[`${prefix}${propKey}`] = processResponsiveValue(props[propKey], val => getCssValue(val));
     }
   });
 
   // Process margin properties
   Object.keys(marginStyleMap).forEach(propKey => {
     if (props[propKey] !== undefined) {
-      cssVars[`--rs-box-${propKey}`] = getCssValue(props[propKey]);
+      cssVars[`${prefix}${propKey}`] = processResponsiveValue(props[propKey], val => getCssValue(val));
     }
   });
 
   // Process size properties
   Object.keys(sizeStyleMap).forEach(propKey => {
     if (props[propKey] !== undefined) {
-      cssVars[`--rs-box-${propKey}`] = getCssValue(props[propKey]);
+      cssVars[`${prefix}${propKey}`] = processResponsiveValue(props[propKey], val => getCssValue(val));
     }
   });
   if (props.bd !== undefined) {
-    cssVars['--rs-box-bd'] = getCssValue(props.bd);
+    cssVars[`${prefix}bd`] = processResponsiveValue(props.bd, val => 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'] = getColorVar(props.c);
+    cssVars[`${prefix}c`] = processResponsiveValue(props.c, val => getColorVar(val));
   }
   if (props.bg !== undefined) {
-    cssVars['--rs-box-bg'] = getColorVar(props.bg);
+    cssVars[`${prefix}bg`] = processResponsiveValue(props.bg, val => getColorVar(val));
+  }
+
+  // Handle special cases for rounded and shadow
+  if (props.rounded !== undefined) {
+    const processRounded = val => {
+      const result = 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 = 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,
-    ...getSizeStyle(props.rounded, 'box', 'rounded'),
-    ...getSizeStyle(props.shadow, 'box', 'shadow')
-  };
+  return cssVars;
 };

package/esm/internals/constants/index.js

@@ -1,6 +1,6 @@
 'use client';
-export const SIZE = ['lg', 'md', 'sm', 'xs'];
-export const BREAKPOINTS = ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'];
+export const SIZE = ['xs', 'sm', 'md', 'lg'];
+export const BREAKPOINTS = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
 export const STATUS = ['success', 'warning', 'error', 'info'];
 export const COLOR = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'violet'];
 export const PLACEMENT_4 = ['top', 'bottom', 'right', 'left'];

package/esm/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;