rsuite 6.0.0-canary-2025032014 → 6.0.0-canary-20250416

package/cjs/SelectPicker/SelectPicker.js

@@ -9,9 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _pick = _interopRequireDefault(require("lodash/pick"));
 var _isNil = _interopRequireDefault(require("lodash/isNil"));
 var _isFunction = _interopRequireDefault(require("lodash/isFunction"));
-var _omit = _interopRequireDefault(require("lodash/omit"));
 var _SearchBox = _interopRequireDefault(require("../internals/SearchBox"));
-var _Box = _interopRequireDefault(require("../internals/Box"));
 var _hooks = require("../internals/hooks");
 var _utils = require("../internals/utils");
 var _Picker = require("../internals/Picker");
@@ -28,45 +26,47 @@ const SelectPicker = (0, _utils.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('SelectPicker', props);
   const {
-    as,
     appearance = 'default',
-    data = emptyArray,
-    valueKey = 'value',
-    labelKey = 'label',
-    value: valueProp,
+    as,
+    block,
+    className,
+    cleanable = true,
     classPrefix = 'picker',
-    placeholder,
+    data = emptyArray,
     defaultValue,
     disabled,
-    cleanable = true,
+    disabledItemValues = emptyArray,
+    groupBy,
+    id,
+    labelKey = 'label',
+    listProps,
+    listboxMaxHeight = 320,
+    locale,
+    placeholder,
     placement = 'bottomStart',
-    popupClassName,
     popupAutoWidth = true,
+    popupClassName,
     popupStyle,
-    listboxMaxHeight = 320,
-    groupBy,
-    locale,
-    toggleAs,
-    style,
     searchable = true,
-    disabledItemValues = emptyArray,
+    style,
+    toggleAs,
+    value: valueProp,
+    valueKey = 'value',
     virtualized,
-    listProps,
-    id,
-    onGroupTitleClick,
-    searchBy,
-    onEntered,
-    onExited,
-    onClean,
-    onChange,
-    onSelect,
-    onSearch,
     sort,
+    searchBy,
     renderValue,
     renderListbox,
     renderOptionGroup,
     renderOption,
     renderExtraFooter,
+    onGroupTitleClick,
+    onEnter,
+    onExit,
+    onClean,
+    onChange,
+    onSelect,
+    onSearch,
     ...rest
   } = propsWithDefaults;
   const {
@@ -160,13 +160,13 @@ const SelectPicker = (0, _utils.forwardRef)((props, ref) => {
     onMenuPressEnter: handleMenuPressEnter,
     ...rest
   });
-  const handleExited = (0, _hooks.useEventCallback)(() => {
+  const handleExit = (0, _hooks.useEventCallback)(() => {
     resetSearch();
     setActive(false);
     onSearch === null || onSearch === void 0 || onSearch('');
     setFocusItemValue(null);
   });
-  const handleEntered = (0, _hooks.useEventCallback)(() => {
+  const handleEnter = (0, _hooks.useEventCallback)(() => {
     setActive(true);
     setFocusItemValue(value);
   });
@@ -244,28 +244,27 @@ const SelectPicker = (0, _utils.forwardRef)((props, ref) => {
       inputRef: searchInput
     }), renderListbox ? renderListbox(listbox) : listbox, renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());
   };
-  const [classes, usedClassNamePropKeys] = (0, _Picker.usePickerClassName)({
-    ...props,
-    classPrefix,
-    appearance,
-    hasValue,
-    name: 'select',
-    cleanable
-  });
+  const triggerProps = {
+    ...(0, _pick.default)(props, _Picker.triggerPropKeys),
+    onEnter: (0, _utils.createChainedFunction)(handleEnter, onEnter),
+    onExit: (0, _utils.createChainedFunction)(handleExit, onExit)
+  };
   return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {
+    as: as,
     id: id,
-    pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),
+    name: "select",
+    block: block,
+    disabled: disabled,
+    appearance: appearance,
+    triggerProps: triggerProps,
     ref: trigger,
     placement: placement,
-    onEntered: (0, _utils.createChainedFunction)(handleEntered, onEntered),
-    onExited: (0, _utils.createChainedFunction)(handleExited, onExited),
-    speaker: renderPopup
-  }, /*#__PURE__*/_react.default.createElement(_Box.default, {
-    as: as,
-    className: classes,
+    speaker: renderPopup,
+    rootRef: root,
     style: style,
-    ref: root
-  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit.default)(rest, [..._Picker.omitTriggerPropKeys, ...usedClassNamePropKeys]), {
+    classPrefix: classPrefix,
+    className: className
+  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({
     ref: target,
     appearance: appearance,
     onClean: (0, _utils.createChainedFunction)(handleClean, onClean),
@@ -278,7 +277,7 @@ const SelectPicker = (0, _utils.forwardRef)((props, ref) => {
     focusItemValue: focusItemValue,
     active: active,
     placement: placement
-  }), selectedElement || (locale === null || locale === void 0 ? void 0 : locale.placeholder))));
+  }, rest), selectedElement || (locale === null || locale === void 0 ? void 0 : locale.placeholder)));
 });
 SelectPicker.displayName = 'SelectPicker';
 var _default = exports.default = SelectPicker;

package/cjs/Sidenav/ExpandedSidenavDropdownItem.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _isNil = _interopRequireDefault(require("lodash/isNil"));
 var _Ripple = _interopRequireDefault(require("../internals/Ripple"));
-var _SafeAnchor = _interopRequireDefault(require("../SafeAnchor"));
+var _SafeAnchor = _interopRequireDefault(require("../internals/SafeAnchor"));
 var _NavContext = _interopRequireDefault(require("../Nav/NavContext"));
 var _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");

package/cjs/Sidenav/SidenavItem.js

@@ -8,7 +8,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _isNil = _interopRequireDefault(require("lodash/isNil"));
-var _SafeAnchor = _interopRequireDefault(require("../SafeAnchor"));
+var _SafeAnchor = _interopRequireDefault(require("../internals/SafeAnchor"));
 var _NavContext = _interopRequireDefault(require("../Nav/NavContext"));
 var _MenuItem = _interopRequireDefault(require("../internals/Menu/MenuItem"));
 var _omit = _interopRequireDefault(require("lodash/omit"));

package/cjs/Slider/Graduated.d.ts

@@ -6,6 +6,10 @@ export interface GraduatedProps extends BoxProps {
     max: number;
     count: number;
     value: number | number[];
+    marks?: {
+        value: number;
+        label: React.ReactNode;
+    }[];
     renderMark?: (mark: number) => React.ReactNode;
 }
 declare const Graduated: import("../internals/types").InternalRefForwardingComponent<"div", GraduatedProps, never> & Record<string, never>;

package/cjs/Slider/Graduated.js

@@ -21,12 +21,14 @@ const Graduated = (0, _utils.forwardRef)((props, ref) => {
     value,
     classPrefix = 'slider',
     className,
+    marks = [],
     renderMark,
     ...rest
   } = props;
   const {
     merge,
-    prefix
+    prefix,
+    cssVar
   } = (0, _hooks.useStyles)(classPrefix);
   const activeIndexs = [];
   let startIndex = 0;
@@ -42,32 +44,53 @@ const Graduated = (0, _utils.forwardRef)((props, ref) => {
     activeIndexs.push((0, _utils2.precisionMath)(Math.ceil((value - min) / (max - min) * count)));
   }
   const graduatedItems = [];
-  for (let i = 0; i < count; i += 1) {
-    const classes = prefix({
-      pass: i >= startIndex && i <= endIndex,
-      active: ~activeIndexs.indexOf(i)
+
+  // If custom marks are provided, use them
+  if (marks.length > 0) {
+    // Only create DOM nodes for the specific mark values
+    marks.forEach((mark, index) => {
+      // Calculate the position index for this mark
+      const markPosition = (0, _utils2.precisionMath)((mark.value - min) / (max - min) * count);
+      graduatedItems.push(/*#__PURE__*/_react.default.createElement("li", {
+        className: prefix('tick'),
+        key: `${mark.value}-${index}`,
+        "data-pass": markPosition >= startIndex && markPosition <= endIndex,
+        "data-active": activeIndexs.indexOf(markPosition) !== -1,
+        style: cssVar('tick-offset', `${(mark.value - min) / (max - min) * 100}%`)
+      }, /*#__PURE__*/_react.default.createElement(_Mark.default, {
+        mark: mark.value,
+        renderMark: () => mark.label || mark.value
+      })));
     });
-    const mark = (0, _utils2.precisionMath)(i * step + min);
-    const lastMark = Math.min(max, mark + step);
-    const last = i === count - 1;
-    graduatedItems.push(/*#__PURE__*/_react.default.createElement("li", {
-      className: classes,
-      key: i
-    }, /*#__PURE__*/_react.default.createElement(_Mark.default, {
-      mark: mark,
-      renderMark: renderMark
-    }), last ? /*#__PURE__*/_react.default.createElement(_Mark.default, {
-      mark: lastMark,
-      renderMark: renderMark,
-      last: last
-    }) : null));
+  } else {
+    // Original implementation for when no custom marks are provided
+    for (let i = 0; i < count; i += 1) {
+      const mark = (0, _utils2.precisionMath)(i * step + min);
+      const lastMark = Math.min(max, mark + step);
+      const last = i === count - 1;
+      graduatedItems.push(/*#__PURE__*/_react.default.createElement("li", {
+        className: prefix('tick'),
+        "data-pass": i >= startIndex && i <= endIndex,
+        "data-active": activeIndexs.indexOf(i) !== -1,
+        key: i
+      }, /*#__PURE__*/_react.default.createElement(_Mark.default, {
+        mark: mark,
+        renderMark: renderMark
+      }), last ? /*#__PURE__*/_react.default.createElement(_Mark.default, {
+        mark: lastMark,
+        renderMark: renderMark,
+        last: last
+      }) : null));
+    }
   }
   const classes = merge(className, prefix('graduator'));
   return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
     as: as,
     ref: ref,
     className: classes
-  }, rest), /*#__PURE__*/_react.default.createElement("ol", null, graduatedItems));
+  }, rest, {
+    "data-with-marks": marks.length > 0
+  }), /*#__PURE__*/_react.default.createElement("ol", null, graduatedItems));
 });
 Graduated.displayName = 'Graduated';
 var _default = exports.default = Graduated;

package/cjs/Slider/Handle.d.ts

@@ -4,9 +4,9 @@ export interface HandleProps extends BoxProps, React.HTMLAttributes<HTMLDivEleme
     disabled?: boolean;
     vertical?: boolean;
     tooltip?: boolean;
-    rtl?: boolean;
     position?: number;
     value?: number;
+    keepTooltipOpen?: boolean;
     renderTooltip?: (value: number | undefined) => React.ReactNode;
     onDragMove?: (event: React.DragEvent, dataset?: DOMStringMap) => void;
     onDragStart?: (event: React.MouseEvent) => void;

package/cjs/Slider/Handle.js

@@ -23,10 +23,10 @@ const Handle = (0, _utils.forwardRef)((props, ref) => {
     position,
     vertical,
     tooltip,
-    rtl,
     value,
     role,
     tabIndex,
+    keepTooltipOpen,
     renderTooltip,
     onDragStart,
     onDragMove,
@@ -36,15 +36,13 @@ const Handle = (0, _utils.forwardRef)((props, ref) => {
     'data-key': dateKey,
     ...rest
   } = props;
-  const horizontalKey = rtl ? 'right' : 'left';
-  const direction = vertical ? 'bottom' : horizontalKey;
-  const styles = (0, _utils.mergeStyles)(style, {
-    [direction]: `${position}%`
-  });
+  const actualTooltip = tooltip || keepTooltipOpen;
   const {
     merge,
-    prefix
+    prefix,
+    cssVar
   } = (0, _hooks.useStyles)(classPrefix);
+  const styles = (0, _utils.mergeStyles)(style, cssVar('offset', `${position}%`));
   const {
     active,
     onMoveStart,
@@ -52,14 +50,15 @@ const Handle = (0, _utils.forwardRef)((props, ref) => {
     rootRef,
     tooltipRef
   } = (0, _useDrag.default)({
-    tooltip,
+    tooltip: actualTooltip,
     disabled,
     onDragStart,
     onDragMove,
-    onDragEnd
+    onDragEnd,
+    keepTooltipOpen
   });
   const handleClasses = merge(className, prefix('handle'), {
-    active
+    active: active || keepTooltipOpen
   });
   return /*#__PURE__*/_react.default.createElement(_Box.default, {
     as: as,
@@ -75,10 +74,11 @@ const Handle = (0, _utils.forwardRef)((props, ref) => {
     "data-range": dataRange,
     "data-key": dateKey,
     "data-testid": "slider-handle"
-  }, tooltip && /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+  }, actualTooltip && /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
     "aria-hidden": "true",
     ref: tooltipRef,
-    className: merge(prefix('tooltip'), 'placement-top')
+    className: prefix('tooltip'),
+    "data-placement": vertical ? 'left' : 'top'
   }, renderTooltip ? renderTooltip(value) : value), /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({
     tabIndex: -1,
     value: value

package/cjs/Slider/Slider.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { BoxProps } from '../internals/Box';
-import type { FormControlBaseProps } from '../internals/types';
+import type { FormControlBaseProps, Size } from '../internals/types';
 export interface LocaleType {
     placeholder?: string;
     searchPlaceholder?: string;
@@ -44,6 +44,21 @@ export interface SliderProps<T = number> extends BoxProps, FormControlBaseProps<
     placeholder?: React.ReactNode;
     /** Vertical Slide */
     vertical?: boolean;
+    /** If true, tooltip will always be visible  even without hover */
+    keepTooltipOpen?: boolean;
+    /**
+     * A slider can have different sizes.
+     *
+     * @default 'sm'
+     */
+    size?: Size;
+    /**
+     * Custom marks on the ruler
+     */
+    marks?: {
+        value: number;
+        label: React.ReactNode;
+    }[];
     /** Customize labels on the render ruler */
     renderMark?: (mark: number) => React.ReactNode;
     /** Customize the content of the rendered Tooltip. */

package/cjs/Slider/Slider.js

@@ -49,15 +49,18 @@ const Slider = (0, _utils.forwardRef)((props, ref) => {
     handleTitle,
     tooltip = true,
     step = 1,
+    size = 'sm',
     defaultValue = 0,
     value: valueProp,
     max: maxProp = 100,
     placeholder,
+    marks,
     getAriaValueText,
     renderTooltip,
     renderMark,
     onChange,
     onChangeCommitted,
+    keepTooltipOpen,
     ...rest
   } = propsWithDefaults;
   const barRef = (0, _react.useRef)(null);
@@ -185,7 +188,8 @@ const Slider = (0, _utils.forwardRef)((props, ref) => {
     as: as,
     ref: ref,
     role: "presentation",
-    className: classes
+    className: classes,
+    "data-size": size
   }, rest), /*#__PURE__*/_react.default.createElement("div", {
     ref: barRef,
     className: merge(barClassName, prefix('bar')),
@@ -202,6 +206,7 @@ const Slider = (0, _utils.forwardRef)((props, ref) => {
     max: max,
     count: count,
     value: value,
+    marks: marks,
     renderMark: renderMark
   })), /*#__PURE__*/_react.default.createElement(_Handle.default, {
     position: (value - min) / (max - min) * 100,
@@ -210,8 +215,8 @@ const Slider = (0, _utils.forwardRef)((props, ref) => {
     disabled: disabled,
     vertical: vertical,
     tooltip: tooltip,
-    rtl: rtl,
     value: value,
+    keepTooltipOpen: keepTooltipOpen,
     renderTooltip: renderTooltip,
     onDragMove: handleChangeValue,
     onKeyDown: handleKeyDown,

package/cjs/Slider/useDrag.d.ts

@@ -5,6 +5,7 @@ interface DragProps {
     onDragStart?: (event: React.MouseEvent) => void;
     onDragMove?: (event: React.DragEvent, dataset?: DOMStringMap) => void;
     onDragEnd?: (event: React.MouseEvent, dataset?: DOMStringMap) => void;
+    keepTooltipOpen?: boolean;
 }
 declare const useDrag: (props: DragProps) => {
     active: boolean;

package/cjs/Slider/useDrag.js

@@ -17,7 +17,8 @@ const useDrag = props => {
     disabled,
     onDragMove,
     onDragEnd,
-    onDragStart
+    onDragStart,
+    keepTooltipOpen
   } = props;
   const [active, setActive] = (0, _react.useState)(false);
   const moveTracker = (0, _react.useRef)(null);
@@ -32,8 +33,9 @@ const useDrag = props => {
     const tooltipElement = tooltipRef.current;
     if (tooltip && tooltipElement) {
       const width = (0, _getWidth.default)(tooltipElement);
+
       // Set the position of the tooltip
-      (0, _addStyle.default)(tooltipElement, 'left', `-${width / 2}px`);
+      (0, _addStyle.default)(tooltipElement, '--rs-tooltip-offset', `-${width / 2}px`);
     }
   }, [tooltip]);
   const handleDragMove = (0, _hooks.useEventCallback)((_deltaX, _deltaY, event) => {
@@ -72,10 +74,13 @@ const useDrag = props => {
     setTooltipPosition();
   });
   (0, _react.useEffect)(() => {
+    if (keepTooltipOpen) {
+      onMouseEnter();
+    }
     return () => {
       releaseMoves();
     };
-  }, [releaseMoves]);
+  }, [releaseMoves, keepTooltipOpen]);
   return {
     active,
     rootRef,

package/cjs/Steps/Steps.js

@@ -46,8 +46,8 @@ const Steps = (0, _utils.forwardRef)((props, ref) => {
     vertical,
     horizontal: !vertical
   }));
-  const count = _utils.ReactChildren.count(children);
-  const items = _utils.ReactChildren.mapCloneElement(children, (item, index) => {
+  const count = _utils.rch.count(children);
+  const items = _utils.rch.mapCloneElement(children, (item, index) => {
     const itemStyles = {
       flexBasis: index < count - 1 ? `${100 / (count - 1)}%` : undefined,
       maxWidth: index === count - 1 ? `${100 / count}%` : undefined

package/cjs/Tabs/Tabs.js

@@ -60,7 +60,7 @@ const renderPanels = (children, tabProps) => {
     id,
     activeKey
   } = tabProps;
-  return _utils.ReactChildren.map(children, child => {
+  return _utils.rch.map(children, child => {
     const {
       eventKey,
       children
@@ -79,7 +79,7 @@ const renderTabs = (children, tabPanelProps) => {
     id,
     activeKey
   } = tabPanelProps;
-  return _utils.ReactChildren.map(children, child => {
+  return _utils.rch.map(children, child => {
     const {
       eventKey,
       title,

package/cjs/Textarea/Textarea.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import { InputBaseCommonProps } from '../internals/InputBase';
+import type { SanitizedTextareaProps, PropsWithoutChange, FormControlBaseProps, Size } from '../internals/types';
+export interface TextareaProps extends InputBaseCommonProps, SanitizedTextareaProps, PropsWithoutChange<FormControlBaseProps> {
+    /**
+     * The size of the textarea.
+     * @default 'md'
+     */
+    size?: Size;
+    /** Enable auto resize of the textarea based on content */
+    autosize?: boolean;
+    /**
+     * Maximum number of rows up to which the textarea can grow
+     * Auto resize props for react-textarea-autosize
+     */
+    maxRows?: number;
+    /**
+     * Minimum number of rows up to which the textarea can shrink
+     * Auto resize props for react-textarea-autosize
+     */
+    minRows?: number;
+    /**
+     * Whether to allow the textarea to be resized
+     */
+    resize?: React.CSSProperties['resize'];
+    /**
+     * Called when Enter key is pressed
+     */
+    onPressEnter?: React.KeyboardEventHandler<HTMLTextAreaElement>;
+}
+declare const Textarea: import("../internals/types").InternalRefForwardingComponent<"textarea", TextareaProps, never> & Record<string, never>;
+export default Textarea;

package/cjs/Textarea/Textarea.js

@@ -0,0 +1,51 @@
+'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 = _interopRequireDefault(require("react"));
+var _reactTextareaAutosize = _interopRequireDefault(require("react-textarea-autosize"));
+var _InputBase = _interopRequireDefault(require("../internals/InputBase"));
+var _utils = require("../internals/utils");
+var _hooks = require("../internals/hooks");
+var _CustomProvider = require("../CustomProvider");
+const Textarea = (0, _utils.forwardRef)((props, ref) => {
+  const {
+    propsWithDefaults
+  } = (0, _CustomProvider.useCustom)('Textarea', props);
+  const {
+    rows = 3,
+    classPrefix = 'textarea',
+    className,
+    size = 'md',
+    autosize,
+    maxRows,
+    minRows,
+    resize,
+    style,
+    ...rest
+  } = propsWithDefaults;
+  const {
+    withPrefix,
+    merge,
+    cssVar
+  } = (0, _hooks.useStyles)(classPrefix);
+  const classes = merge(className, withPrefix());
+  const styles = (0, _utils.mergeStyles)(style, cssVar('resize', resize));
+  const autosizeProps = autosize ? {
+    maxRows,
+    minRows
+  } : {};
+  return /*#__PURE__*/_react.default.createElement(_InputBase.default, (0, _extends2.default)({
+    as: autosize ? _reactTextareaAutosize.default : 'textarea',
+    ref: ref,
+    size: size,
+    rows: rows,
+    className: classes,
+    style: styles
+  }, autosizeProps, rest));
+});
+Textarea.displayName = 'Textarea';
+var _default = exports.default = Textarea;

package/cjs/Textarea/index.d.ts

@@ -0,0 +1,4 @@
+import Textarea from './Textarea';
+export type { TextareaProps } from './Textarea';
+export { Textarea };
+export default Textarea;

package/cjs/Textarea/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 _Textarea = _interopRequireDefault(require("./Textarea"));
+exports.Textarea = _Textarea.default;
+// export types
+// export components
+var _default = exports.default = _Textarea.default;

package/cjs/Timeline/Timeline.js

@@ -43,7 +43,7 @@ const Timeline = (0, _utils.forwardRef)((props, ref) => {
     merge,
     withPrefix
   } = (0, _hooks.useStyles)(classPrefix);
-  const count = _utils.ReactChildren.count(children);
+  const count = _utils.rch.count(children);
   const withTime = (0, _some.default)(_react.default.Children.toArray(children), item => {
     var _item$props;
     return item === null || item === void 0 || (_item$props = item.props) === null || _item$props === void 0 ? void 0 : _item$props.time;
@@ -56,7 +56,7 @@ const Timeline = (0, _utils.forwardRef)((props, ref) => {
     as: as,
     ref: ref,
     className: classes
-  }, rest), _utils.ReactChildren.mapCloneElement(children, (_child, index) => ({
+  }, rest), _utils.rch.mapCloneElement(children, (_child, index) => ({
     last: index + 1 === count,
     INTERNAL_active: isItemActive(index, count),
     align

package/cjs/Toggle/Toggle.d.ts

@@ -42,11 +42,20 @@ export interface ToggleProps extends BoxProps, SanitizedInputProps {
     /**
      * The size of the toggle
      */
-    size?: Omit<Size, 'xs'>;
+    size?: Size;
     /**
      * Custom locale
      */
     locale?: ToggleLocale;
+    /**
+     * The label of the toggle switch
+     */
+    label?: React.ReactNode;
+    /**
+     * The placement of the label
+     * @version 6.0.0
+     */
+    labelPlacement?: 'start' | 'end';
     /**
      * Called when the state of the toggle changes
      */