rsuite 6.0.0-canary-20250620 → 6.0.0-canary-20250622

package/TreePicker/styles/index.css

@@ -523,84 +523,6 @@ body{
   --rs-zindex-modal:1050;
   --rs-zindex-drawer:1050;
 }
-[data-rs=box][style*="--rs-box-p"]{
-  padding:var(--rs-box-p);
-}
-[data-rs=box][style*="--rs-box-pt"]{
-  padding-top:var(--rs-box-pt);
-}
-[data-rs=box][style*="--rs-box-pb"]{
-  padding-bottom:var(--rs-box-pb);
-}
-[data-rs=box][style*="--rs-box-pl"]{
-  padding-left:var(--rs-box-pl);
-}
-[data-rs=box][style*="--rs-box-pr"]{
-  padding-right:var(--rs-box-pr);
-}
-[data-rs=box][style*="--rs-box-px"]{
-  padding-inline:var(--rs-box-px);
-}
-[data-rs=box][style*="--rs-box-py"]{
-  padding-block:var(--rs-box-py);
-}
-[data-rs=box][style*="--rs-box-m"]{
-  margin:var(--rs-box-m);
-}
-[data-rs=box][style*="--rs-box-mt"]{
-  margin-top:var(--rs-box-mt);
-}
-[data-rs=box][style*="--rs-box-mb"]{
-  margin-bottom:var(--rs-box-mb);
-}
-[data-rs=box][style*="--rs-box-ml"]{
-  margin-left:var(--rs-box-ml);
-}
-[data-rs=box][style*="--rs-box-mr"]{
-  margin-right:var(--rs-box-mr);
-}
-[data-rs=box][style*="--rs-box-mx"]{
-  margin-inline:var(--rs-box-mx);
-}
-[data-rs=box][style*="--rs-box-my"]{
-  margin-block:var(--rs-box-my);
-}
-[data-rs=box][style*="--rs-box-w"]{
-  width:var(--rs-box-w);
-}
-[data-rs=box][style*="--rs-box-h"]{
-  height:var(--rs-box-h);
-}
-[data-rs=box][style*="--rs-box-maxw"]{
-  max-width:var(--rs-box-maxw);
-}
-[data-rs=box][style*="--rs-box-maxh"]{
-  max-height:var(--rs-box-maxh);
-}
-[data-rs=box][style*="--rs-box-minw"]{
-  min-width:var(--rs-box-minw);
-}
-[data-rs=box][style*="--rs-box-minh"]{
-  min-height:var(--rs-box-minh);
-}
-[data-rs=box][style*="--rs-box-c"]{
-  color:var(--rs-box-c);
-}
-[data-rs=box][style*="--rs-box-bd"]{
-  border:var(--rs-box-bd);
-}
-[data-rs=box][style*="--rs-box-rounded"]{
-  border-radius:var(--rs-box-rounded);
-}
-[data-rs=box][style*="--rs-box-shadow"]{
-  box-shadow:var(--rs-box-shadow);
-}
-[data-rs=box][style*="--rs-box-bg"]{
-  background:var(--rs-box-bg);
-}
-[data-rs=box][style*="--rs-box-display"]{
-  display:var(--rs-box-display);
-}
 
 @media (max-width: calc(576px - 1px)){
   [data-visible-from=xs]{
@@ -1012,7 +934,7 @@ body{
   --rs-input-group-font-size-sm:var(--rs-font-size-sm);
   --rs-input-group-font-size-md:var(--rs-font-size-sm);
   --rs-input-group-font-size-lg:var(--rs-font-size-md);
-  --rs-input-group-width:var(--rs-box-w, 100%);
+  --rs-input-group-width:100%;
   position:relative;
   display:flex;
   border-radius:var(--rs-input-group-border-radius);

package/Uploader/styles/index.css

@@ -400,84 +400,6 @@ body{
   --rs-ripple-bg:rgb(0 0 0 / 20%);
   --rs-loader-default-size:1.125rem;
 }
-[data-rs=box][style*="--rs-box-p"]{
-  padding:var(--rs-box-p);
-}
-[data-rs=box][style*="--rs-box-pt"]{
-  padding-top:var(--rs-box-pt);
-}
-[data-rs=box][style*="--rs-box-pb"]{
-  padding-bottom:var(--rs-box-pb);
-}
-[data-rs=box][style*="--rs-box-pl"]{
-  padding-left:var(--rs-box-pl);
-}
-[data-rs=box][style*="--rs-box-pr"]{
-  padding-right:var(--rs-box-pr);
-}
-[data-rs=box][style*="--rs-box-px"]{
-  padding-inline:var(--rs-box-px);
-}
-[data-rs=box][style*="--rs-box-py"]{
-  padding-block:var(--rs-box-py);
-}
-[data-rs=box][style*="--rs-box-m"]{
-  margin:var(--rs-box-m);
-}
-[data-rs=box][style*="--rs-box-mt"]{
-  margin-top:var(--rs-box-mt);
-}
-[data-rs=box][style*="--rs-box-mb"]{
-  margin-bottom:var(--rs-box-mb);
-}
-[data-rs=box][style*="--rs-box-ml"]{
-  margin-left:var(--rs-box-ml);
-}
-[data-rs=box][style*="--rs-box-mr"]{
-  margin-right:var(--rs-box-mr);
-}
-[data-rs=box][style*="--rs-box-mx"]{
-  margin-inline:var(--rs-box-mx);
-}
-[data-rs=box][style*="--rs-box-my"]{
-  margin-block:var(--rs-box-my);
-}
-[data-rs=box][style*="--rs-box-w"]{
-  width:var(--rs-box-w);
-}
-[data-rs=box][style*="--rs-box-h"]{
-  height:var(--rs-box-h);
-}
-[data-rs=box][style*="--rs-box-maxw"]{
-  max-width:var(--rs-box-maxw);
-}
-[data-rs=box][style*="--rs-box-maxh"]{
-  max-height:var(--rs-box-maxh);
-}
-[data-rs=box][style*="--rs-box-minw"]{
-  min-width:var(--rs-box-minw);
-}
-[data-rs=box][style*="--rs-box-minh"]{
-  min-height:var(--rs-box-minh);
-}
-[data-rs=box][style*="--rs-box-c"]{
-  color:var(--rs-box-c);
-}
-[data-rs=box][style*="--rs-box-bd"]{
-  border:var(--rs-box-bd);
-}
-[data-rs=box][style*="--rs-box-rounded"]{
-  border-radius:var(--rs-box-rounded);
-}
-[data-rs=box][style*="--rs-box-shadow"]{
-  box-shadow:var(--rs-box-shadow);
-}
-[data-rs=box][style*="--rs-box-bg"]{
-  background:var(--rs-box-bg);
-}
-[data-rs=box][style*="--rs-box-display"]{
-  display:var(--rs-box-display);
-}
 
 @media (max-width: calc(576px - 1px)){
   [data-visible-from=xs]{

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/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/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/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/cjs/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/cjs/SegmentedControl/Indicator.js

@@ -0,0 +1,22 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _hooks = require("../internals/hooks");
+const Indicator = ({
+  style,
+  classPrefix
+}) => {
+  const {
+    prefix
+  } = (0, _hooks.useStyles)(classPrefix);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: prefix('indicator'),
+    style: style
+  });
+};
+Indicator.displayName = 'Indicator';
+var _default = exports.default = Indicator;

package/cjs/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/cjs/SegmentedControl/SegmentedControl.js

@@ -0,0 +1,87 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
+var _SegmentedItem = _interopRequireDefault(require("./SegmentedItem"));
+var _Indicator = _interopRequireDefault(require("./Indicator"));
+var _utils = require("../internals/utils");
+var _hooks = require("../internals/hooks");
+var _useIndicatorPosition = _interopRequireDefault(require("./hooks/useIndicatorPosition"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * The `SegmentedControl` component is used to offer multiple exclusive options.
+ * @see https://rsuitejs.com/components/segmented-control
+ */
+const SegmentedControl = (0, _utils.forwardRef)((props, ref) => {
+  const {
+    propsWithDefaults
+  } = (0, _hooks.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
+  } = (0, _hooks.useStyles)(classPrefix);
+  const classes = merge(className, withPrefix());
+  const [value, setValue] = (0, _hooks.useControlled)(valueProp, defaultValue);
+  const id = (0, _hooks.useUniqueId)('segmented', name);
+
+  // Ref for container element
+  const containerRef = (0, _react.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
+  } = (0, _useIndicatorPosition.default)({
+    containerRef,
+    activeIndex,
+    indicator,
+    data
+  });
+  const handleChange = (0, _hooks.useEventCallback)((nextValue, event) => {
+    setValue(nextValue);
+    onChange === null || onChange === void 0 || onChange(nextValue !== null && nextValue !== void 0 ? nextValue : '', event);
+  });
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as,
+    role: "radiogroup",
+    ref: (0, _utils.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.default.createElement(_SegmentedItem.default, {
+    key: index,
+    item: item,
+    index: index,
+    name: id,
+    active: value === item.value,
+    disabled: disabled,
+    classPrefix: classPrefix,
+    onChange: handleChange
+  })), activeIndex !== -1 && /*#__PURE__*/_react.default.createElement(_Indicator.default, {
+    style: indicatorStyle,
+    classPrefix: classPrefix
+  }));
+});
+SegmentedControl.displayName = 'SegmentedControl';
+var _default = exports.default = SegmentedControl;

package/cjs/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/cjs/SegmentedControl/SegmentedItem.js

@@ -0,0 +1,44 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _hooks = require("../internals/hooks");
+const SegmentedItem = ({
+  item,
+  index,
+  name,
+  active,
+  disabled,
+  classPrefix,
+  onChange
+}) => {
+  const {
+    prefix
+  } = (0, _hooks.useStyles)(classPrefix);
+  const handleChange = event => {
+    if (disabled) return;
+    onChange(item.value, event);
+  };
+  return /*#__PURE__*/_react.default.createElement("label", {
+    className: prefix('item'),
+    "data-value": item.value,
+    "data-index": index,
+    "data-active": active || undefined,
+    "data-disabled": disabled || undefined
+  }, /*#__PURE__*/_react.default.createElement("input", {
+    type: "radio",
+    name: name,
+    value: String(item.value),
+    checked: active,
+    disabled: disabled,
+    onChange: handleChange,
+    className: prefix('radio')
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    className: prefix('label')
+  }, item.label));
+};
+SegmentedItem.displayName = 'SegmentedItem';
+var _default = exports.default = SegmentedItem;

package/cjs/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/cjs/SegmentedControl/hooks/useIndicatorPosition.js

@@ -0,0 +1,55 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _react = require("react");
+var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
+var _hooks = require("../../internals/hooks");
+/**
+ * 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] = (0, _react.useState)({});
+  const updatePosition = (0, _react.useCallback)(() => {
+    if (!(containerRef !== null && containerRef !== void 0 && containerRef.current)) {
+      return;
+    }
+    const newStyle = updateIndicatorPosition(containerRef.current, activeIndex, indicator);
+    setIndicatorStyle(prev => (0, _isEqual.default)(prev, newStyle) ? prev : newStyle);
+  }, [containerRef, activeIndex, indicator]);
+
+  // Update position when active item or data changes
+  (0, _react.useEffect)(() => {
+    updatePosition();
+  }, [updatePosition, data]);
+
+  // Set up resize observer
+  (0, _hooks.useElementResize)(containerRef, updatePosition);
+  return {
+    style: indicatorStyle
+  };
+};
+var _default = exports.default = useIndicatorPosition;

package/cjs/SegmentedControl/index.d.ts

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

package/cjs/SegmentedControl/index.js

@@ -0,0 +1,11 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _SegmentedControl = _interopRequireDefault(require("./SegmentedControl"));
+exports.SegmentedControl = _SegmentedControl.default;
+// export types
+// export components
+var _default = exports.default = _SegmentedControl.default;

package/cjs/Slider/ProgressBar.js

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

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/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';