rsuite 5.52.0 → 5.53.1

package/Tabs/styles/index.less

@@ -0,0 +1,28 @@
+@import '../../Nav/styles/index.less';
+
+.rs-tabs {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  &-reversed {
+    flex-direction: column-reverse;
+  }
+
+  &-vertical {
+    flex-direction: row;
+
+    .rs-tabs-content {
+      flex: 1;
+    }
+  }
+
+  .rs-nav-item {
+    background: none;
+  }
+
+  .rs-nav-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+}

package/TagInput/styles/index.css

@@ -2043,6 +2043,8 @@ textarea.rs-input-sm {
 }
 .rs-input-group.rs-input-group-inside {
   width: 100%;
+  background-color: #fff;
+  background-color: var(--rs-input-bg);
 }
 .rs-input-group.rs-input-group-inside .rs-input {
   display: block;
@@ -3426,6 +3428,8 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
 .rs-check-item.rs-check-item-focus {
   background-color: rgb(from #cce9ff r g b / 50%);
   background-color: var(--rs-listbox-option-hover-bg);
+  color: #1675e0;
+  color: var(--rs-listbox-option-hover-text);
 }
 .rs-theme-high-contrast .rs-check-item:not(.rs-checkbox-disabled):hover,
 .rs-theme-high-contrast .rs-check-item:focus,

package/TagPicker/styles/index.css

@@ -2043,6 +2043,8 @@ textarea.rs-input-sm {
 }
 .rs-input-group.rs-input-group-inside {
   width: 100%;
+  background-color: #fff;
+  background-color: var(--rs-input-bg);
 }
 .rs-input-group.rs-input-group-inside .rs-input {
   display: block;
@@ -3426,6 +3428,8 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
 .rs-check-item.rs-check-item-focus {
   background-color: rgb(from #cce9ff r g b / 50%);
   background-color: var(--rs-listbox-option-hover-bg);
+  color: #1675e0;
+  color: var(--rs-listbox-option-hover-text);
 }
 .rs-theme-high-contrast .rs-check-item:not(.rs-checkbox-disabled):hover,
 .rs-theme-high-contrast .rs-check-item:focus,

package/Tree/styles/index.css

@@ -148,17 +148,23 @@
 .rs-tree-node-label {
   position: relative;
   margin: 0;
-  padding-left: 16px;
+  padding: 1px 1px 1px 16px;
   display: inline-block;
   cursor: pointer;
   font-size: 14px;
   line-height: 22px;
 }
+.rs-tree-node-label:focus-visible .rs-tree-node-label-content {
+  outline: 3px solid rgb(from #3498ff r g b / 25%);
+  outline: 3px solid var(--rs-color-focus-ring);
+}
+.rs-theme-high-contrast .rs-tree-node-label:focus-visible .rs-tree-node-label-content {
+  outline-offset: 2px;
+}
 .rs-tree-node-label-content {
-  padding: 6px 12px 6px 8px;
+  padding: 6px 8px;
   display: inline-block;
-  border-top: 2px solid transparent;
-  border-bottom: 2px solid transparent;
+  border-radius: 6px;
 }
 .rs-tree-node-label-content:hover,
 .rs-tree-node-label-content:focus,

package/TreePicker/styles/index.css

@@ -148,17 +148,23 @@
 .rs-tree-node-label {
   position: relative;
   margin: 0;
-  padding-left: 16px;
+  padding: 1px 1px 1px 16px;
   display: inline-block;
   cursor: pointer;
   font-size: 14px;
   line-height: 22px;
 }
+.rs-tree-node-label:focus-visible .rs-tree-node-label-content {
+  outline: 3px solid rgb(from #3498ff r g b / 25%);
+  outline: 3px solid var(--rs-color-focus-ring);
+}
+.rs-theme-high-contrast .rs-tree-node-label:focus-visible .rs-tree-node-label-content {
+  outline-offset: 2px;
+}
 .rs-tree-node-label-content {
-  padding: 6px 12px 6px 8px;
+  padding: 6px 8px;
   display: inline-block;
-  border-top: 2px solid transparent;
-  border-bottom: 2px solid transparent;
+  border-radius: 6px;
 }
 .rs-tree-node-label-content:hover,
 .rs-tree-node-label-content:focus,

package/TreePicker/styles/index.less

@@ -42,18 +42,22 @@
     position: relative;
     margin: 0;
     //text gap
-    padding-left: (@picker-tree-arrow-down-width + 8px);
+    padding: 1px 1px 1px (@picker-tree-arrow-down-width + 8px);
     display: inline-block;
     cursor: pointer;
     font-size: @picker-tree-node-font-size;
     line-height: @picker-tree-node-line-height;
 
+    &:focus-visible {
+      .rs-tree-node-label-content {
+        .focus-ring();
+      }
+    }
+
     &-content {
-      padding: @custom-picker-tree-node-padding-vertical @picker-tree-node-padding-horizontal
-        @custom-picker-tree-node-padding-vertical @picker-tree-arrow-down-gap;
+      padding: 6px 8px;
       display: inline-block;
-      border-top: 2px solid transparent;
-      border-bottom: 2px solid transparent;
+      border-radius: 6px;
 
       &:hover,
       &:focus,

package/cjs/Carousel/Carousel.js

@@ -97,7 +97,7 @@ var Carousel = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var uniqueId = (0, _react.useMemo)(function () {
     return (0, _utils.guid)();
   }, []);
-  var items = _react.default.Children.map(children, function (child, index) {
+  var items = _utils.ReactChildren.map(children, function (child, index) {
     var _extends2;
     if (!child) {
       return;

package/cjs/CheckTreePicker/CheckTreeNode.js

@@ -132,7 +132,7 @@ var CheckTreeNode = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     title: getTitle(),
     onSelect: handleSelect
   }, /*#__PURE__*/_react.default.createElement("span", {
-    className: prefix('text-wrapper')
+    className: prefix('label-content')
   }, typeof renderTreeNode === 'function' ? renderTreeNode(nodeData) : label))) : null;
 });
 CheckTreeNode.displayName = 'CheckTreeNode';

package/cjs/DateRangePicker/DateRangePicker.d.ts

@@ -72,28 +72,28 @@ export interface DateRangePickerProps extends PickerBaseProps<DateRangePickerLoc
     /** Custom render for calendar title */
     renderTitle?: (date: Date) => React.ReactNode;
 }
-export interface DateRangePicker extends PickerComponent<DateRangePickerProps> {
+export interface DateRangePickerComponent extends PickerComponent<DateRangePickerProps> {
     /** Allow the maximum number of days specified, other dates are disabled */
-    allowedMaxDays?: (days: number) => DisabledDateFunction;
+    allowedMaxDays: (days: number) => DisabledDateFunction;
     /** Only allowed days are specified, other dates are disabled */
-    allowedDays?: (days: number) => DisabledDateFunction;
+    allowedDays: (days: number) => DisabledDateFunction;
     /** Allow specified date range, other dates are disabled */
-    allowedRange?: (startDate: string | Date, endDate: string | Date) => DisabledDateFunction;
+    allowedRange: (startDate: string | Date, endDate: string | Date) => DisabledDateFunction;
     /** Disable dates after the specified date */
-    before?: (beforeDate: string | Date) => DisabledDateFunction;
+    before: (beforeDate: string | Date) => DisabledDateFunction;
     /** Disable dates before the specified date */
-    after?: (afterDate: string | Date) => DisabledDateFunction;
+    after: (afterDate: string | Date) => DisabledDateFunction;
     /** Disable dates after today. */
-    beforeToday?: () => DisabledDateFunction;
+    beforeToday: () => DisabledDateFunction;
     /** Disable dates before today */
-    afterToday?: () => DisabledDateFunction;
+    afterToday: () => DisabledDateFunction;
     /** Used to combine multiple conditions */
-    combine?: (...args: any) => DisabledDateFunction;
+    combine: (...args: any) => DisabledDateFunction;
 }
 /**
  * A date range picker allows you to select a date range from a calendar.
  *
  * @see https://rsuitejs.com/components/date-range-picker
  */
-declare const DateRangePicker: DateRangePicker;
+declare const DateRangePicker: DateRangePickerComponent;
 export default DateRangePicker;

package/cjs/DateRangePicker/DateRangePicker.js

@@ -628,7 +628,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       disabledShortcut: disabledShortcutButton,
       onShortcutClick: handleShortcutPageDate,
       "data-testid": "daterange-predefined-side"
-    }), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    }), /*#__PURE__*/_react.default.createElement(_Stack.default.Item, null, /*#__PURE__*/_react.default.createElement("div", {
       className: prefix('daterange-content')
     }, showHeader && /*#__PURE__*/_react.default.createElement("div", {
       className: prefix('daterange-header'),

package/cjs/DateRangePicker/index.d.ts

@@ -1,4 +1,4 @@
 import DateRangePicker from './DateRangePicker';
-export type { DateRangePicker, DateRangePickerProps } from './DateRangePicker';
+export type { DateRangePickerComponent, DateRangePickerProps } from './DateRangePicker';
 export type { ValueType, DateRange, RangeType, DisabledDateFunction } from './types';
 export default DateRangePicker;

package/cjs/Dropdown/DropdownItem.js

@@ -7,13 +7,13 @@ exports.__esModule = true;
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _pick2 = _interopRequireDefault(require("lodash/pick"));
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _propTypes2 = require("../internals/propTypes");
 var _MenuItem = _interopRequireDefault(require("../internals/Menu/MenuItem"));
 var _DropdownContext = _interopRequireDefault(require("./DropdownContext"));
 var _isNil = _interopRequireDefault(require("lodash/isNil"));
+var _pick = _interopRequireDefault(require("lodash/pick"));
 var _utils = require("../utils");
 var _NavContext = _interopRequireDefault(require("../Nav/NavContext"));
 var _useInternalId = _interopRequireDefault(require("../utils/useInternalId"));
@@ -89,7 +89,9 @@ var DropdownItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     }, props));
   }
   if (divider) {
-    return /*#__PURE__*/_react.default.createElement(_DropdownSeparator.default, (0, _pick2.default)(props, ['data-testid']));
+    return /*#__PURE__*/_react.default.createElement(_DropdownSeparator.default, (0, _extends2.default)({
+      as: "li"
+    }, (0, _pick.default)(props, ['data-testid'])));
   }
   if (panel) {
     return renderDropdownItem((0, _extends2.default)({

package/cjs/Message/Message.d.ts

@@ -1,9 +1,23 @@
 import React from 'react';
 import { WithAsProps, TypeAttributes, RsRefForwardingComponent } from '../@types/common';
 export interface MessageProps extends WithAsProps {
-    /** The type of the message box. */
+    /**
+     * The type of the message box.
+     */
     type?: TypeAttributes.Status;
-    /** Whether it is possible to close the message box */
+    /**
+     * Show a border around the message box.
+     * @version 5.53.0
+     */
+    bordered?: boolean;
+    /**
+     * Center the message vertically.
+     * @version 5.53.0
+     */
+    centered?: boolean;
+    /**
+     * Whether it is possible to close the message box
+     */
     closable?: boolean;
     /**
      * Delay automatic removal of messages.
@@ -15,13 +29,21 @@ export interface MessageProps extends WithAsProps {
      *
      */
     duration?: number;
-    /** The title of the message  */
+    /**
+     * The title of the message
+     */
     header?: React.ReactNode;
-    /** Whether to display an icon */
+    /**
+     * Whether to display an icon
+     */
     showIcon?: boolean;
-    /** Fill the container */
+    /**
+     * Fill the container
+     */
     full?: boolean;
-    /** Callback after the message is removed */
+    /**
+     * Callback after the message is removed
+     */
     onClose?: (event?: React.MouseEvent<HTMLButtonElement>) => void;
 }
 /**

package/cjs/Message/Message.js

@@ -23,6 +23,8 @@ var Message = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _withClassPrefix;
   var _props$as = props.as,
     Component = _props$as === void 0 ? 'div' : _props$as,
+    bordered = props.bordered,
+    centered = props.centered,
     className = props.className,
     _props$classPrefix = props.classPrefix,
     classPrefix = _props$classPrefix === void 0 ? 'message' : _props$classPrefix,
@@ -36,7 +38,7 @@ var Message = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     type = _props$type === void 0 ? 'info' : _props$type,
     showIcon = props.showIcon,
     onClose = props.onClose,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "className", "classPrefix", "children", "closable", "duration", "full", "header", "type", "showIcon", "onClose"]);
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "bordered", "centered", "className", "classPrefix", "children", "closable", "duration", "full", "header", "type", "showIcon", "onClose"]);
   var _useState = (0, _react.useState)('show'),
     display = _useState[0],
     setDisplay = _useState[1];
@@ -49,7 +51,7 @@ var Message = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     usedToaster = _useContext.usedToaster; // Timed close message
   var _useTimeout = (0, _utils.useTimeout)(onClose, duration, usedToaster && duration > 0),
     clear = _useTimeout.clear;
-  var handleClose = (0, _react.useCallback)(function (event) {
+  var handleClose = (0, _utils.useEventCallback)(function (event) {
     setDisplay('hiding');
     onClose === null || onClose === void 0 ? void 0 : onClose(event);
     clear();
@@ -58,12 +60,14 @@ var Message = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
         setDisplay('hide');
       }
     }, 1000);
-  }, [clear, isMounted, onClose]);
+  });
   if (display === 'hide') {
     return null;
   }
   var classes = merge(className, withClassPrefix(type, display, (_withClassPrefix = {
-    full: full
+    full: full,
+    bordered: bordered,
+    centered: centered
   }, _withClassPrefix['has-title'] = header, _withClassPrefix['has-icon'] = showIcon, _withClassPrefix)));
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
     role: "alert"
@@ -75,7 +79,7 @@ var Message = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   }, closable && /*#__PURE__*/_react.default.createElement(_CloseButton.default, {
     onClick: handleClose
   }), showIcon && /*#__PURE__*/_react.default.createElement("div", {
-    className: prefix(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["icon-wrapper"])))
+    className: prefix(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["icon"])))
   }, _utils.MESSAGE_STATUS_ICONS[type]), /*#__PURE__*/_react.default.createElement("div", {
     className: prefix(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["content"])))
   }, header && /*#__PURE__*/_react.default.createElement("div", {
@@ -86,15 +90,17 @@ var Message = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 });
 Message.displayName = 'Message';
 Message.propTypes = {
-  type: (0, _propTypes2.oneOf)(_utils.STATUS),
-  className: _propTypes.default.string,
-  onClose: _propTypes.default.func,
+  bordered: _propTypes.default.bool,
+  centered: _propTypes.default.bool,
   closable: _propTypes.default.bool,
-  title: _propTypes.default.node,
+  className: _propTypes.default.string,
+  classPrefix: _propTypes.default.string,
   description: _propTypes.default.node,
-  showIcon: _propTypes.default.bool,
   full: _propTypes.default.bool,
-  classPrefix: _propTypes.default.string
+  onClose: _propTypes.default.func,
+  showIcon: _propTypes.default.bool,
+  title: _propTypes.default.node,
+  type: (0, _propTypes2.oneOf)(_utils.STATUS)
 };
 var _default = Message;
 exports.default = _default;

package/cjs/Nav/Nav.d.ts

@@ -16,6 +16,8 @@ export interface NavProps<T = any> extends WithAsProps, Omit<React.HTMLAttribute
     pullRight?: boolean;
     /** Active key, corresponding to eventkey in <Nav.item>. */
     activeKey?: T;
+    /** Default active key, corresponding to eventkey in <Nav.item>. */
+    defaultActiveKey?: T;
     /** Callback function triggered after selection */
     onSelect?: (eventKey: T | undefined, event: React.SyntheticEvent) => void;
 }

package/cjs/Nav/Nav.js

@@ -14,7 +14,6 @@ var _utils = require("../utils");
 var _Navbar = require("../Navbar/Navbar");
 var _Sidenav = require("../Sidenav/Sidenav");
 var _NavContext = _interopRequireDefault(require("./NavContext"));
-var _useEnsuredRef = _interopRequireDefault(require("../utils/useEnsuredRef"));
 var _Menubar = _interopRequireDefault(require("../internals/Menu/Menubar"));
 var _propTypes2 = require("../internals/propTypes");
 var _NavDropdown = _interopRequireDefault(require("./NavDropdown"));
@@ -26,7 +25,6 @@ var _NavbarDropdownItem = _interopRequireDefault(require("../Navbar/NavbarDropdo
 var _SidenavDropdownItem = _interopRequireDefault(require("../Sidenav/SidenavDropdownItem"));
 var _NavbarItem = _interopRequireDefault(require("../Navbar/NavbarItem"));
 var _SidenavItem = _interopRequireDefault(require("../Sidenav/SidenavItem"));
-var _useInternalId = _interopRequireDefault(require("../utils/useInternalId"));
 /**
  * The `Nav` component is used to create navigation links.
  * @see https://rsuitejs.com/components/nav
@@ -45,13 +43,14 @@ var Nav = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     className = props.className,
     children = props.children,
     activeKeyProp = props.activeKey,
+    defaultActiveKey = props.defaultActiveKey,
     onSelectProp = props.onSelect,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "classPrefix", "appearance", "vertical", "justified", "reversed", "pullRight", "className", "children", "activeKey", "onSelect"]);
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "classPrefix", "appearance", "vertical", "justified", "reversed", "pullRight", "className", "children", "activeKey", "defaultActiveKey", "onSelect"]);
   var sidenav = (0, _react.useContext)(_Sidenav.SidenavContext);
 
   // Whether inside a <Navbar>
   var navbar = (0, _react.useContext)(_Navbar.NavbarContext);
-  var menubarRef = (0, _useEnsuredRef.default)(ref);
+  var menubarRef = (0, _utils.useEnsuredRef)(ref);
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
     withClassPrefix = _useClassNames.withClassPrefix,
     merge = _useClassNames.merge,
@@ -69,15 +68,20 @@ var Nav = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   }));
   var _ref = sidenav || {},
     activeKeyFromSidenav = _ref.activeKey,
-    _ref$onSelect = _ref.onSelect,
-    onSelectFromSidenav = _ref$onSelect === void 0 ? onSelectProp : _ref$onSelect;
-  var activeKey = activeKeyProp !== null && activeKeyProp !== void 0 ? activeKeyProp : activeKeyFromSidenav;
+    onSelectFromSidenav = _ref.onSelect;
+  var _useControlled = (0, _utils.useControlled)(activeKeyProp !== null && activeKeyProp !== void 0 ? activeKeyProp : activeKeyFromSidenav, defaultActiveKey),
+    activeKey = _useControlled[0],
+    setActiveKey = _useControlled[1];
   var contextValue = (0, _react.useMemo)(function () {
     return {
       activeKey: activeKey,
-      onSelect: onSelectProp !== null && onSelectProp !== void 0 ? onSelectProp : onSelectFromSidenav
+      onSelect: function onSelect(eventKey, event) {
+        setActiveKey(eventKey);
+        onSelectProp === null || onSelectProp === void 0 ? void 0 : onSelectProp(eventKey, event);
+        onSelectFromSidenav === null || onSelectFromSidenav === void 0 ? void 0 : onSelectFromSidenav(eventKey, event);
+      }
     };
-  }, [activeKey, onSelectFromSidenav, onSelectProp]);
+  }, [activeKey, onSelectFromSidenav, onSelectProp, setActiveKey]);
   if (sidenav !== null && sidenav !== void 0 && sidenav.expanded) {
     return /*#__PURE__*/_react.default.createElement(_NavContext.default.Provider, {
       value: contextValue
@@ -130,7 +134,7 @@ Nav.Item = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var sidenav = (0, _react.useContext)(_Sidenav.SidenavContext);
   var _ref2 = parentNavMenu !== null && parentNavMenu !== void 0 ? parentNavMenu : [],
     dispatch = _ref2[1];
-  var _id = (0, _useInternalId.default)('Nav.Item');
+  var _id = (0, _utils.useInternalId)('Nav.Item');
   (0, _react.useEffect)(function () {
     if (dispatch) {
       var _props$active;

package/cjs/Panel/Panel.js

@@ -81,14 +81,14 @@ var Panel = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onGroupSelect === null || onGroupSelect === void 0 ? void 0 : onGroupSelect(eventKey, event);
     setExpanded(!expanded);
   });
-  var renderBody = (0, _utils.useEventCallback)(function (bodyProps) {
+  var renderBody = function renderBody(bodyProps) {
     var classes = prefix('body', {
       'body-fill': bodyFill
     });
     return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, bodyProps, {
       className: classes
     }), children);
-  });
+  };
   var renderCollapsibleBody = function renderCollapsibleBody() {
     return /*#__PURE__*/_react.default.createElement(_Collapse.default, {
       in: expanded,

package/cjs/Stack/Stack.js

@@ -58,12 +58,12 @@ var Stack = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
    * toArray remove undefined, null and boolean
    */
   var filterChildren = _react.default.Children.toArray(children);
-  var count = filterChildren.length;
+  var count = _utils.ReactChildren.count(filterChildren);
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
     ref: ref,
     className: classes,
     style: styles
-  }), _react.default.Children.map(filterChildren, function (child, index) {
+  }), _utils.ReactChildren.map(filterChildren, function (child, index) {
     var childNode = childrenRenderMode === 'wrap' && child.type !== _StackItem.default ? /*#__PURE__*/_react.default.createElement(_StackItem.default, {
       key: index,
       className: prefix('item'),

package/cjs/Steps/Steps.js

@@ -40,7 +40,7 @@ var Steps = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     vertical: vertical,
     horizontal: !vertical
   }));
-  var count = _react.default.Children.count(children);
+  var count = _utils.ReactChildren.count(children);
   var items = _utils.ReactChildren.mapCloneElement(children, function (item, index) {
     var itemStyles = {
       flexBasis: index < count - 1 ? 100 / (count - 1) + "%" : undefined,

package/cjs/Tabs/Tab.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+interface TabProps {
+    /**
+     * The children of the tab.
+     */
+    children?: React.ReactNode;
+    /**
+     * The disabled state of the tab.
+     */
+    disabled?: boolean;
+    /**
+     * The event key of the tab.
+     */
+    eventKey?: string;
+    /**
+     * The icon of the tab.
+     */
+    icon?: React.ReactNode;
+    /**
+     * Content for the tab title.
+     */
+    title: React.ReactNode;
+}
+declare const Tab: React.FC<TabProps>;
+export default Tab;

package/cjs/Tabs/Tab.js

@@ -0,0 +1,21 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var Tab = function Tab() {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+};
+Tab.displayName = 'Tab';
+Tab.propTypes = {
+  disabled: _propTypes.default.bool,
+  eventKey: _propTypes.default.string,
+  title: _propTypes.default.node,
+  children: _propTypes.default.node,
+  icon: _propTypes.default.node
+};
+var _default = Tab;
+exports.default = _default;

package/cjs/Tabs/TabPanel.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { WithAsProps } from '../@types/common';
+interface TabPanelProps extends WithAsProps {
+    /** The active state of the tab. */
+    active?: boolean;
+    /** The HTML id attribute, which should be unique. */
+    id?: string;
+}
+declare const TabPanel: React.ForwardRefExoticComponent<TabPanelProps & React.RefAttributes<HTMLDivElement>>;
+export default TabPanel;

package/cjs/Tabs/TabPanel.js

@@ -0,0 +1,33 @@
+'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 _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _react = _interopRequireDefault(require("react"));
+var _utils = require("../utils");
+var TabPanel = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var _props$as = props.as,
+    Component = _props$as === void 0 ? 'div' : _props$as,
+    _props$classPrefix = props.classPrefix,
+    classPrefix = _props$classPrefix === void 0 ? 'tab-panel' : _props$classPrefix,
+    children = props.children,
+    active = props.active,
+    className = props.className,
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "classPrefix", "children", "active", "className"]);
+  var _useClassNames = (0, _utils.useClassNames)(classPrefix),
+    withClassPrefix = _useClassNames.withClassPrefix,
+    merge = _useClassNames.merge;
+  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+    role: "tabpanel",
+    ref: ref,
+    tabIndex: 0,
+    hidden: !active,
+    className: merge(className, withClassPrefix())
+  }, rest), children);
+});
+TabPanel.displayName = 'TabPanel';
+var _default = TabPanel;
+exports.default = _default;

package/cjs/Tabs/Tabs.d.ts

@@ -0,0 +1,50 @@
+import React from 'react';
+import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
+import Tab from './Tab';
+export interface TabsProps extends WithAsProps {
+    /**
+     * The tabs appearance style.
+     */
+    appearance?: 'tabs' | 'subtle';
+    /**
+     * Mark the Tab with a matching `eventKey` as active.
+     */
+    activeKey?: string;
+    /**
+     * The default active tabKey.
+     */
+    defaultActiveKey?: string;
+    /**
+     * Reversed display.
+     * @default false
+     */
+    reversed?: boolean;
+    /**
+     * Vertical display.
+     * @default false
+     */
+    vertical?: boolean;
+    /**
+     * The HTML id attribute, which should be unique.
+     * @default use generated id
+     */
+    id?: string;
+    /**
+     * Callback fired when a Tab is selected.
+     * @param eventKey
+     * @param event
+     * @returns
+     */
+    onSelect?: (eventKey: string | undefined, event: React.SyntheticEvent) => void;
+}
+interface TabsComponent extends RsRefForwardingComponent<'div', TabsProps> {
+    Tab: typeof Tab;
+}
+/**
+ * Tabs are a set of layered sections of content, known as tab panels, that display one panel of content at a time.
+ *
+ * @version 5.53.0
+ * @see https://rsuitejs.com/components/tabs
+ */
+declare const Tabs: TabsComponent;
+export default Tabs;