rsuite 6.0.0-canary-20250620 → 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/Grid/utils/styles.d.ts

@@ -3,4 +3,4 @@ import type { GutterType } from '../types';
 /**
  * Generates CSS variable styles for grid gutters, supporting both single values and arrays [horizontal, vertical]
  */
-export declare const getResponsiveGutterStyles: (gutter?: GutterType | ResponsiveValue<GutterType>) => Record<string, string>;
+export declare const getResponsiveGutterStyles: (gutter?: GutterType | ResponsiveValue<GutterType>) => Record<string, string | undefined>;

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/RadioGroup/RadioGroup.d.ts

@@ -14,7 +14,10 @@ export interface RadioContextProps {
     ]>;
 }
 export interface RadioGroupProps<T = string | number> extends BoxProps, FormControlBaseProps<T> {
-    /** A radio group can have different appearances */
+    /**
+     * A radio group can have different appearances
+     * @deprecated Use `<SegmentedControl indicator="underline" />` instead
+     */
     appearance?: 'default' | 'picker';
     /** Name to use for form */
     name?: string;

package/esm/SegmentedControl/Indicator.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface IndicatorProps {
+    style: React.CSSProperties;
+    classPrefix: string;
+}
+declare const Indicator: {
+    ({ style, classPrefix }: IndicatorProps): React.JSX.Element;
+    displayName: string;
+};
+export default Indicator;

package/esm/SegmentedControl/Indicator.js

@@ -0,0 +1,17 @@
+'use client';
+import React from 'react';
+import { useStyles } from "../internals/hooks/index.js";
+const Indicator = ({
+  style,
+  classPrefix
+}) => {
+  const {
+    prefix
+  } = useStyles(classPrefix);
+  return /*#__PURE__*/React.createElement("div", {
+    className: prefix('indicator'),
+    style: style
+  });
+};
+Indicator.displayName = 'Indicator';
+export default Indicator;

package/esm/SegmentedControl/SegmentedControl.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import { BoxProps } from '../internals/Box';
+import type { FormControlBaseProps, Size } from '../internals/types';
+export interface SegmentedItemDataType {
+    /** The label of the item */
+    label: React.ReactNode;
+    /** The value of the item */
+    value: string | number;
+}
+export interface SegmentedControlProps<T = string | number | null> extends BoxProps, Omit<FormControlBaseProps<T>, 'readOnly' | 'plaintext'> {
+    /** The indicator style of the segmented control */
+    indicator?: 'pill' | 'underline';
+    /** Name to use for form */
+    name?: string;
+    /** Data of segmented items */
+    data?: SegmentedItemDataType[];
+    /** Display block style, fit the width of the container */
+    block?: boolean;
+    /** A segmented control can have different sizes */
+    size?: Size;
+}
+/**
+ * The `SegmentedControl` component is used to offer multiple exclusive options.
+ * @see https://rsuitejs.com/components/segmented-control
+ */
+declare const SegmentedControl: import("../internals/types").InternalRefForwardingComponent<"div", SegmentedControlProps<string | number | null>, never> & Record<string, never>;
+export default SegmentedControl;

package/esm/SegmentedControl/SegmentedControl.js

@@ -0,0 +1,81 @@
+'use client';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React, { useRef } from 'react';
+import Box from "../internals/Box/index.js";
+import SegmentedItem from "./SegmentedItem.js";
+import Indicator from "./Indicator.js";
+import { forwardRef, mergeRefs } from "../internals/utils/index.js";
+import { useStyles, useCustom, useControlled, useEventCallback, useUniqueId } from "../internals/hooks/index.js";
+import useIndicatorPosition from "./hooks/useIndicatorPosition.js";
+/**
+ * The `SegmentedControl` component is used to offer multiple exclusive options.
+ * @see https://rsuitejs.com/components/segmented-control
+ */
+const SegmentedControl = forwardRef((props, ref) => {
+  const {
+    propsWithDefaults
+  } = useCustom('SegmentedControl', props);
+  const {
+    as,
+    className,
+    classPrefix = 'segmented-control',
+    value: valueProp,
+    defaultValue,
+    indicator = 'pill',
+    size = 'md',
+    block = false,
+    name,
+    disabled,
+    data,
+    onChange,
+    ...rest
+  } = propsWithDefaults;
+  const {
+    merge,
+    withPrefix
+  } = useStyles(classPrefix);
+  const classes = merge(className, withPrefix());
+  const [value, setValue] = useControlled(valueProp, defaultValue);
+  const id = useUniqueId('segmented', name);
+
+  // Ref for container element
+  const containerRef = useRef(null);
+
+  // Get the active item index
+  const activeIndex = data === null || data === void 0 ? void 0 : data.findIndex(item => item.value === value);
+  const {
+    style: indicatorStyle
+  } = useIndicatorPosition({
+    containerRef,
+    activeIndex,
+    indicator,
+    data
+  });
+  const handleChange = useEventCallback((nextValue, event) => {
+    setValue(nextValue);
+    onChange === null || onChange === void 0 || onChange(nextValue !== null && nextValue !== void 0 ? nextValue : '', event);
+  });
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: as,
+    role: "radiogroup",
+    ref: mergeRefs(ref, containerRef),
+    className: classes,
+    "data-size": size,
+    "data-block": block || undefined,
+    "data-indicator": indicator
+  }, rest), data === null || data === void 0 ? void 0 : data.map((item, index) => /*#__PURE__*/React.createElement(SegmentedItem, {
+    key: index,
+    item: item,
+    index: index,
+    name: id,
+    active: value === item.value,
+    disabled: disabled,
+    classPrefix: classPrefix,
+    onChange: handleChange
+  })), activeIndex !== -1 && /*#__PURE__*/React.createElement(Indicator, {
+    style: indicatorStyle,
+    classPrefix: classPrefix
+  }));
+});
+SegmentedControl.displayName = 'SegmentedControl';
+export default SegmentedControl;

package/esm/SegmentedControl/SegmentedItem.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { SegmentedItemDataType } from './SegmentedControl';
+export interface SegmentedItemProps {
+    item: SegmentedItemDataType;
+    index: number;
+    name?: string;
+    active: boolean;
+    disabled?: boolean;
+    classPrefix: string;
+    onChange: (value: string | number, event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+declare const SegmentedItem: {
+    ({ item, index, name, active, disabled, classPrefix, onChange }: SegmentedItemProps): React.JSX.Element;
+    displayName: string;
+};
+export default SegmentedItem;

package/esm/SegmentedControl/SegmentedItem.js

@@ -0,0 +1,39 @@
+'use client';
+import React from 'react';
+import { useStyles } from "../internals/hooks/index.js";
+const SegmentedItem = ({
+  item,
+  index,
+  name,
+  active,
+  disabled,
+  classPrefix,
+  onChange
+}) => {
+  const {
+    prefix
+  } = useStyles(classPrefix);
+  const handleChange = event => {
+    if (disabled) return;
+    onChange(item.value, event);
+  };
+  return /*#__PURE__*/React.createElement("label", {
+    className: prefix('item'),
+    "data-value": item.value,
+    "data-index": index,
+    "data-active": active || undefined,
+    "data-disabled": disabled || undefined
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "radio",
+    name: name,
+    value: String(item.value),
+    checked: active,
+    disabled: disabled,
+    onChange: handleChange,
+    className: prefix('radio')
+  }), /*#__PURE__*/React.createElement("span", {
+    className: prefix('label')
+  }, item.label));
+};
+SegmentedItem.displayName = 'SegmentedItem';
+export default SegmentedItem;

package/esm/SegmentedControl/hooks/useIndicatorPosition.d.ts

@@ -0,0 +1,17 @@
+import { RefObject } from 'react';
+interface UseIndicatorPositionProps {
+    containerRef: RefObject<HTMLDivElement | null>;
+    activeIndex?: number;
+    indicator: 'pill' | 'underline';
+    data?: Array<{
+        value: string | number;
+    }>;
+    block?: boolean;
+}
+/**
+ * Custom hook to calculate and update the indicator position
+ */
+declare const useIndicatorPosition: ({ containerRef, activeIndex, indicator, data }: UseIndicatorPositionProps) => {
+    style: import("react").CSSProperties;
+};
+export default useIndicatorPosition;

package/esm/SegmentedControl/hooks/useIndicatorPosition.js

@@ -0,0 +1,50 @@
+'use client';
+import { useCallback, useEffect, useState } from 'react';
+import isEqual from 'lodash/isEqual';
+import { useElementResize } from "../../internals/hooks/index.js";
+/**
+ * Updates the indicator position based on the active item
+ */
+const updateIndicatorPosition = (container, activeIndex, indicator) => {
+  if (activeIndex === -1) return {};
+  const activeItem = container.querySelector(`[data-index="${activeIndex}"]`);
+  if (!activeItem) return {};
+  const containerStyle = window.getComputedStyle(container);
+  const paddingLeft = parseFloat(containerStyle.paddingLeft) || 0;
+  return {
+    transform: `translateX(${activeItem.offsetLeft - paddingLeft}px)`,
+    width: activeItem.offsetWidth,
+    height: indicator === 'underline' ? 2 : activeItem.offsetHeight
+  };
+};
+
+/**
+ * Custom hook to calculate and update the indicator position
+ */
+const useIndicatorPosition = ({
+  containerRef,
+  activeIndex,
+  indicator,
+  data
+}) => {
+  const [indicatorStyle, setIndicatorStyle] = useState({});
+  const updatePosition = useCallback(() => {
+    if (!(containerRef !== null && containerRef !== void 0 && containerRef.current)) {
+      return;
+    }
+    const newStyle = updateIndicatorPosition(containerRef.current, activeIndex, indicator);
+    setIndicatorStyle(prev => isEqual(prev, newStyle) ? prev : newStyle);
+  }, [containerRef, activeIndex, indicator]);
+
+  // Update position when active item or data changes
+  useEffect(() => {
+    updatePosition();
+  }, [updatePosition, data]);
+
+  // Set up resize observer
+  useElementResize(containerRef, updatePosition);
+  return {
+    style: indicatorStyle
+  };
+};
+export default useIndicatorPosition;

package/esm/SegmentedControl/index.d.ts

@@ -0,0 +1,4 @@
+import SegmentedControl from './SegmentedControl';
+export type { SegmentedControlProps, SegmentedItemDataType } from './SegmentedControl';
+export { SegmentedControl };
+export default SegmentedControl;

package/esm/SegmentedControl/index.js

@@ -0,0 +1,8 @@
+'use client';
+import SegmentedControl from "./SegmentedControl.js";
+
+// export types
+
+// export components
+export { SegmentedControl };
+export default SegmentedControl;

package/esm/Slider/ProgressBar.js

@@ -20,7 +20,7 @@ const ProgressBar = forwardRef((props, ref) => {
     withPrefix
   } = useStyles(classPrefix);
   const sizeKey = vertical ? 'height' : 'width';
-  const startKey = vertical ? 'bottom' : 'inset-inline-start';
+  const startKey = vertical ? 'bottom' : 'insetInlineStart';
   const styles = mergeStyles(style, {
     [startKey]: `${start}%`,
     [sizeKey]: `${end - start}%`

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/index.d.ts

@@ -57,6 +57,7 @@ export * from './RadioGroup';
 export * from './RadioTile';
 export * from './RadioTileGroup';
 export * from './SelectPicker';
+export * from './SegmentedControl';
 export * from './CheckPicker';
 export * from './InputPicker';
 export * from './TagPicker';

package/esm/index.js

@@ -81,6 +81,7 @@ export * from "./RadioGroup/index.js";
 export * from "./RadioTile/index.js";
 export * from "./RadioTileGroup/index.js";
 export * from "./SelectPicker/index.js";
+export * from "./SegmentedControl/index.js";
 export * from "./CheckPicker/index.js";
 export * from "./InputPicker/index.js";
 export * from "./TagPicker/index.js";

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 {};