rsuite 5.51.0 → 5.53.0

package/cjs/Sidenav/SidenavDropdownItem.js

@@ -10,13 +10,14 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Sidenav = require("./Sidenav");
-var _deprecatePropType = _interopRequireDefault(require("../utils/deprecatePropType"));
-var _MenuItem = _interopRequireDefault(require("../Menu/MenuItem"));
+var _propTypes2 = require("../internals/propTypes");
+var _MenuItem = _interopRequireDefault(require("../internals/Menu/MenuItem"));
 var _isNil = _interopRequireDefault(require("lodash/isNil"));
 var _utils = require("../utils");
 var _NavContext = _interopRequireDefault(require("../Nav/NavContext"));
 var _useRenderDropdownItem = require("../Dropdown/useRenderDropdownItem");
 var _ExpandedSidenavDropdownItem = _interopRequireDefault(require("./ExpandedSidenavDropdownItem"));
+var _classnames = _interopRequireDefault(require("classnames"));
 /**
  * @private this component is not supposed to be used directly
  *          Instead it's rendered by a <Nav.Item> within a <Sidenav>
@@ -106,7 +107,7 @@ var SidenavDropdownItem = /*#__PURE__*/_react.default.forwardRef(function (props
       className: classes
     }, menuitem, dataAttributes, restProps, {
       children: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, icon && /*#__PURE__*/_react.default.cloneElement(icon, {
-        className: prefix('menu-icon')
+        className: (0, _classnames.default)(prefix('menu-icon'), icon.props.className)
       }), children)
     }));
   });
@@ -116,11 +117,11 @@ SidenavDropdownItem.propTypes = {
   as: _propTypes.default.elementType,
   divider: _propTypes.default.bool,
   panel: _propTypes.default.bool,
-  trigger: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.oneOf(['click', 'hover'])]),
-  open: (0, _deprecatePropType.default)(_propTypes.default.bool),
+  trigger: _propTypes.default.oneOfType([_propTypes.default.array, (0, _propTypes2.oneOf)(['click', 'hover'])]),
+  open: (0, _propTypes2.deprecatePropType)(_propTypes.default.bool),
   active: _propTypes.default.bool,
   disabled: _propTypes.default.bool,
-  pullLeft: (0, _deprecatePropType.default)(_propTypes.default.bool),
+  pullLeft: (0, _propTypes2.deprecatePropType)(_propTypes.default.bool),
   submenu: _propTypes.default.element,
   onSelect: _propTypes.default.func,
   onClick: _propTypes.default.func,

package/cjs/Sidenav/SidenavDropdownMenu.js

@@ -10,8 +10,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireWildcard(require("react"));
 var _omit2 = _interopRequireDefault(require("lodash/omit"));
-var _Menu = _interopRequireDefault(require("../Menu/Menu"));
-var _MenuItem = _interopRequireDefault(require("../Menu/MenuItem"));
+var _Menu = _interopRequireDefault(require("../internals/Menu/Menu"));
+var _MenuItem = _interopRequireDefault(require("../internals/Menu/MenuItem"));
 var _utils = require("../utils");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Sidenav = require("./Sidenav");

package/cjs/Sidenav/SidenavDropdownToggle.js

@@ -11,6 +11,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ArrowDownLine = _interopRequireDefault(require("@rsuite/icons/ArrowDownLine"));
 var _utils = require("../utils");
 var _SidenavItem = _interopRequireDefault(require("./SidenavItem"));
+var _propTypes2 = require("../internals/propTypes");
 /**
  * @private this component is not supposed to be used directly
  *          Instead it's rendered by a <Nav.Menu> call
@@ -54,7 +55,7 @@ SidenavDropdownToggle.propTypes = {
   noCaret: _propTypes.default.bool,
   as: _propTypes.default.elementType,
   renderToggle: _propTypes.default.func,
-  placement: _propTypes.default.oneOf(['bottomStart', 'bottomEnd', 'topStart', 'topEnd', 'leftStart', 'rightStart', 'leftEnd', 'rightEnd'])
+  placement: (0, _propTypes2.oneOf)(['bottomStart', 'bottomEnd', 'topStart', 'topEnd', 'leftStart', 'rightStart', 'leftEnd', 'rightEnd'])
 };
 var _default = SidenavDropdownToggle;
 exports.default = _default;

package/cjs/Sidenav/SidenavItem.js

@@ -11,14 +11,15 @@ var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _isNil = _interopRequireDefault(require("lodash/isNil"));
 var _utils = require("../utils");
-var _Ripple = _interopRequireDefault(require("../Ripple"));
+var _Ripple = _interopRequireDefault(require("../internals/Ripple"));
 var _SafeAnchor = _interopRequireDefault(require("../SafeAnchor"));
 var _NavContext = _interopRequireDefault(require("../Nav/NavContext"));
-var _MenuItem = _interopRequireDefault(require("../Menu/MenuItem"));
+var _MenuItem = _interopRequireDefault(require("../internals/Menu/MenuItem"));
 var _omit = _interopRequireDefault(require("lodash/omit"));
 var _Sidenav = require("./Sidenav");
 var _Whisper = _interopRequireDefault(require("../Whisper"));
 var _Tooltip = _interopRequireDefault(require("../Tooltip"));
+var _classnames = _interopRequireDefault(require("classnames"));
 /**
  * @private
  */
@@ -62,6 +63,9 @@ var SidenavItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onSelectFromNav === null || onSelectFromNav === void 0 ? void 0 : onSelectFromNav(eventKey, event);
     onClick === null || onClick === void 0 ? void 0 : onClick(event);
   }, [disabled, onSelect, onSelectFromNav, eventKey, onClick]);
+  var clonedIcon = icon ? /*#__PURE__*/_react.default.cloneElement(icon, {
+    className: (0, _classnames.default)(prefix('icon'), icon.props.className)
+  }) : null;
   if (!sidenav.expanded) {
     return /*#__PURE__*/_react.default.createElement(_Whisper.default, {
       trigger: "hover",
@@ -92,9 +96,7 @@ var SidenavItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
         }, (0, _omit.default)(rest, ['divider', 'panel']), triggerProps, menuitem, {
           onMouseOver: (0, _utils.createChainedFunction)(menuitem.onMouseOver, triggerProps.onMouseOver),
           onMouseOut: (0, _utils.createChainedFunction)(menuitem.onMouseOut, triggerProps.onMouseOut)
-        }), icon && /*#__PURE__*/_react.default.cloneElement(icon, {
-          className: prefix('icon')
-        }), children, /*#__PURE__*/_react.default.createElement(_Ripple.default, null));
+        }), clonedIcon, children, /*#__PURE__*/_react.default.createElement(_Ripple.default, null));
       });
     });
   }
@@ -124,9 +126,7 @@ var SidenavItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     style: style,
     "aria-selected": selected || undefined,
     "data-event-key": eventKey
-  }, rest), icon && /*#__PURE__*/_react.default.cloneElement(icon, {
-    className: prefix('icon')
-  }), children, /*#__PURE__*/_react.default.createElement(_Ripple.default, null));
+  }, rest), clonedIcon, children, /*#__PURE__*/_react.default.createElement(_Ripple.default, null));
 });
 SidenavItem.displayName = 'Sidenav.Item';
 SidenavItem.propTypes = {

package/cjs/Sidenav/SidenavToggle.js

@@ -13,7 +13,7 @@ var _IconButton = _interopRequireDefault(require("../IconButton"));
 var _utils = require("../utils");
 var _AngleLeft = _interopRequireDefault(require("@rsuite/icons/legacy/AngleLeft"));
 var _AngleRight = _interopRequireDefault(require("@rsuite/icons/legacy/AngleRight"));
-var _deprecatePropType = _interopRequireDefault(require("../utils/deprecatePropType"));
+var _propTypes2 = require("../internals/propTypes");
 var _Sidenav = require("./Sidenav");
 var SidenavToggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var sidenav = (0, _react.useContext)(_Sidenav.SidenavContext);
@@ -54,7 +54,7 @@ SidenavToggle.displayName = 'Sidenav.Toggle';
 SidenavToggle.propTypes = {
   classPrefix: _propTypes.default.string,
   className: _propTypes.default.string,
-  expanded: (0, _deprecatePropType.default)(_propTypes.default.bool, 'Use <Sidenav expanded> instead.'),
+  expanded: (0, _propTypes2.deprecatePropType)(_propTypes.default.bool, 'Use <Sidenav expanded> instead.'),
   onToggle: _propTypes.default.func
 };
 var _default = SidenavToggle;

package/cjs/Slider/Slider.js

@@ -17,7 +17,7 @@ var _Handle = _interopRequireDefault(require("./Handle"));
 var _Graduated = _interopRequireDefault(require("./Graduated"));
 var _utils = require("../utils");
 var _utils2 = require("./utils");
-var _Plaintext = _interopRequireDefault(require("../Plaintext"));
+var _Plaintext = _interopRequireDefault(require("../internals/Plaintext"));
 var sliderPropTypes = {
   min: _propTypes.default.number,
   max: _propTypes.default.number,

package/cjs/Stack/Stack.js

@@ -9,6 +9,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("../utils");
+var _propTypes2 = require("../internals/propTypes");
 var _StackItem = _interopRequireDefault(require("./StackItem"));
 /**
  * The `Stack` component is a quick layout component through Flexbox,
@@ -80,9 +81,9 @@ Stack.propTypes = {
   className: _propTypes.default.string,
   children: _propTypes.default.node,
   classPrefix: _propTypes.default.string,
-  direction: _propTypes.default.oneOf(['row', 'row-reverse', 'column', 'column-reverse']),
-  alignItems: _propTypes.default.oneOf(['flex-start', 'center', 'flex-end', 'stretch', 'baseline']),
-  justifyContent: _propTypes.default.oneOf(['flex-start', 'center', 'flex-end', 'space-between', 'space-around']),
+  direction: (0, _propTypes2.oneOf)(['row', 'row-reverse', 'column', 'column-reverse']),
+  alignItems: (0, _propTypes2.oneOf)(['flex-start', 'center', 'flex-end', 'stretch', 'baseline']),
+  justifyContent: (0, _propTypes2.oneOf)(['flex-start', 'center', 'flex-end', 'space-between', 'space-around']),
   spacing: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string, _propTypes.default.array]),
   divider: _propTypes.default.node,
   wrap: _propTypes.default.bool

package/cjs/Stack/StackItem.js

@@ -8,6 +8,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _propTypes2 = require("../internals/propTypes");
 /**
  * The `Stack.Item` component is used to set the layout of the child element in the `Stack` component.
  *
@@ -43,7 +44,7 @@ StackItem.displayName = 'StackItem';
 StackItem.propTypes = {
   className: _propTypes.default.string,
   children: _propTypes.default.node,
-  alignSelf: _propTypes.default.oneOf(['flex-start', 'flex-end', 'center', 'baseline', 'stretch']),
+  alignSelf: (0, _propTypes2.oneOf)(['flex-start', 'flex-end', 'center', 'baseline', 'stretch']),
   flex: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
   grow: _propTypes.default.number,
   shrink: _propTypes.default.number,

package/cjs/Steps/StepItem.js

@@ -10,6 +10,7 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Check = _interopRequireDefault(require("@rsuite/icons/Check"));
 var _Close = _interopRequireDefault(require("@rsuite/icons/Close"));
+var _propTypes2 = require("../internals/propTypes");
 var _utils = require("../utils");
 var STEP_STATUS_ICON = {
   finish: /*#__PURE__*/_react.default.createElement(_Check.default, null),
@@ -77,7 +78,7 @@ StepItem.propTypes = {
   classPrefix: _propTypes.default.string,
   style: _propTypes.default.object,
   itemWidth: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-  status: _propTypes.default.oneOf(['finish', 'wait', 'process', 'error']),
+  status: (0, _propTypes2.oneOf)(['finish', 'wait', 'process', 'error']),
   icon: _propTypes.default.object,
   stepNumber: _propTypes.default.number,
   description: _propTypes.default.node,

package/cjs/Steps/Steps.js

@@ -9,6 +9,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("../utils");
+var _propTypes2 = require("../internals/propTypes");
 var _StepItem = _interopRequireDefault(require("./StepItem"));
 /**
  * The `Steps` component is used to guide users to complete tasks in accordance with the process.
@@ -79,7 +80,7 @@ Steps.propTypes = {
   className: _propTypes.default.string,
   children: _propTypes.default.node,
   current: _propTypes.default.number,
-  currentStatus: _propTypes.default.oneOf(['finish', 'wait', 'process', 'error'])
+  currentStatus: (0, _propTypes2.oneOf)(['finish', 'wait', 'process', 'error'])
 };
 var _default = Steps;
 exports.default = _default;

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, event: React.MouseEvent) => 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;

package/cjs/Tabs/Tabs.js

@@ -0,0 +1,221 @@
+'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 _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _utils = require("../utils");
+var _Nav = _interopRequireDefault(require("../Nav"));
+var _Tab = _interopRequireDefault(require("./Tab"));
+var _TabPanel = _interopRequireDefault(require("./TabPanel"));
+var _templateObject;
+function getFocusableTabs(tablist) {
+  var tabs = tablist === null || tablist === void 0 ? void 0 : tablist.querySelectorAll('[role=tab]');
+  return Array.from(tabs).filter(function (tab) {
+    return !(tab.getAttribute('aria-disabled') === 'true');
+  });
+}
+function getFocusedTab(tablist) {
+  var tabs = getFocusableTabs(tablist);
+  return tabs.find(function (tab) {
+    return tab.getAttribute('aria-selected');
+  });
+}
+function nextItem(tablist) {
+  if (!tablist) {
+    return null;
+  }
+  var item = getFocusedTab(tablist);
+  var items = getFocusableTabs(tablist);
+  if (!item) {
+    return items[0];
+  }
+  var nextItem = items[items.indexOf(item) + 1];
+  if (!nextItem || nextItem.getAttribute('role') !== 'tab') {
+    return items[0];
+  }
+  return nextItem;
+}
+function previousItem(tablist) {
+  if (!tablist) {
+    return null;
+  }
+  var item = getFocusedTab(tablist);
+  var items = getFocusableTabs(tablist);
+  if (!item) {
+    return items[items.length - 1];
+  }
+  var previousItem = items[items.indexOf(item) - 1];
+  if (!previousItem || previousItem.getAttribute('role') !== 'tab') {
+    return items[items.length - 1];
+  }
+  return previousItem;
+}
+var renderPanels = function renderPanels(children, tabProps) {
+  var id = tabProps.id,
+    activeKey = tabProps.activeKey;
+  return _utils.ReactChildren.map(children, function (child) {
+    var _child$props = child.props,
+      eventKey = _child$props.eventKey,
+      children = _child$props.children;
+    var selected = eventKey === activeKey;
+    return /*#__PURE__*/_react.default.createElement(_TabPanel.default, {
+      "aria-labelledby": id + "-" + eventKey,
+      "aria-hidden": !selected,
+      id: id + "-panel-" + eventKey,
+      active: selected
+    }, children);
+  });
+};
+var renderTabs = function renderTabs(children, tabPanelProps) {
+  var id = tabPanelProps.id,
+    activeKey = tabPanelProps.activeKey;
+  return _utils.ReactChildren.map(children, function (child) {
+    var _child$props2 = child.props,
+      eventKey = _child$props2.eventKey,
+      title = _child$props2.title,
+      disabled = _child$props2.disabled,
+      icon = _child$props2.icon;
+    var selected = eventKey === activeKey;
+    return /*#__PURE__*/_react.default.createElement(_Nav.default.Item, {
+      role: "tab",
+      as: "button",
+      type: "button",
+      "aria-selected": selected,
+      "aria-controls": id + "-panel-" + eventKey,
+      "aria-disabled": disabled,
+      "data-event-key": eventKey,
+      disabled: disabled,
+      icon: icon,
+      id: id + "-" + eventKey,
+      tabIndex: selected ? undefined : -1,
+      eventKey: eventKey
+    }, title);
+  });
+};
+
+/**
+ * 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
+ */
+var Tabs = /*#__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 ? 'tabs' : _props$classPrefix,
+    _props$appearance = props.appearance,
+    appearance = _props$appearance === void 0 ? 'tabs' : _props$appearance,
+    className = props.className,
+    children = props.children,
+    activeKeyProp = props.activeKey,
+    defaultActiveKey = props.defaultActiveKey,
+    idProp = props.id,
+    reversed = props.reversed,
+    vertical = props.vertical,
+    onSelect = props.onSelect,
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "classPrefix", "appearance", "className", "children", "activeKey", "defaultActiveKey", "id", "reversed", "vertical", "onSelect"]);
+  var id = (0, _utils.useUniqueId)('tab-', idProp);
+  var _useCustom = (0, _utils.useCustom)(),
+    rtl = _useCustom.rtl;
+  var _useControlled = (0, _utils.useControlled)(activeKeyProp, defaultActiveKey),
+    activeKey = _useControlled[0],
+    setActiveKey = _useControlled[1];
+  var _useClassNames = (0, _utils.useClassNames)(classPrefix),
+    withClassPrefix = _useClassNames.withClassPrefix,
+    prefix = _useClassNames.prefix,
+    merge = _useClassNames.merge;
+  var tablistRef = _react.default.useRef(null);
+  var handleSelect = (0, _utils.useEventCallback)(function (eventKey, event) {
+    setActiveKey(eventKey);
+    onSelect === null || onSelect === void 0 ? void 0 : onSelect(eventKey, event);
+  });
+  var handleKeyDown = (0, _utils.useEventCallback)(function (event) {
+    var _getFocusableTabs;
+    var target = event.target;
+    if (target.getAttribute('role') !== 'tab') {
+      return;
+    }
+    var previousItemKey = vertical ? 'ArrowUp' : 'ArrowLeft';
+    var nextItemKey = vertical ? 'ArrowDown' : 'ArrowRight';
+    if (!vertical && rtl) {
+      previousItemKey = 'ArrowRight';
+      nextItemKey = 'ArrowLeft';
+    }
+    var item = null;
+    switch (event.key) {
+      case previousItemKey:
+        item = previousItem(tablistRef.current);
+        event.preventDefault();
+        break;
+      case nextItemKey:
+        item = nextItem(tablistRef.current);
+        event.preventDefault();
+        break;
+      case 'Home':
+        item = (_getFocusableTabs = getFocusableTabs(tablistRef.current)) === null || _getFocusableTabs === void 0 ? void 0 : _getFocusableTabs[0];
+        event.preventDefault();
+        break;
+      case 'End':
+        var tabs = getFocusableTabs(tablistRef.current);
+        item = tabs[tabs.length - 1];
+        event.preventDefault();
+        break;
+    }
+    if (item) {
+      var _item;
+      var _item$dataset = (_item = item) === null || _item === void 0 ? void 0 : _item.dataset,
+        _eventKey = _item$dataset.eventKey;
+      handleSelect(_eventKey, event);
+      item.focus();
+    }
+  });
+  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+    className: merge(className, withClassPrefix({
+      reversed: reversed,
+      vertical: vertical
+    }))
+  }, rest, {
+    ref: ref
+  }), /*#__PURE__*/_react.default.createElement(_Nav.default, {
+    role: "tablist",
+    "aria-orientation": vertical ? 'vertical' : 'horizontal',
+    reversed: reversed,
+    vertical: vertical,
+    appearance: appearance,
+    activeKey: activeKey,
+    onSelect: handleSelect,
+    onKeyDown: handleKeyDown,
+    ref: tablistRef
+  }, renderTabs(children, {
+    id: id,
+    activeKey: activeKey
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["content"])))
+  }, renderPanels(children, {
+    id: id,
+    activeKey: activeKey
+  })));
+});
+Tabs.Tab = _Tab.default;
+Tabs.displayName = 'Tabs';
+Tabs.propTypes = {
+  appearance: _propTypes.default.oneOf(['tabs', 'subtle']),
+  activeKey: _propTypes.default.any,
+  defaultActiveKey: _propTypes.default.any,
+  reversed: _propTypes.default.bool,
+  vertical: _propTypes.default.bool,
+  id: _propTypes.default.string,
+  className: _propTypes.default.string,
+  classPrefix: _propTypes.default.string,
+  children: _propTypes.default.node,
+  onSelect: _propTypes.default.func
+};
+var _default = Tabs;
+exports.default = _default;

package/cjs/Tabs/index.d.ts

@@ -0,0 +1,3 @@
+import Tabs from './Tabs';
+export type { TabsProps } from './Tabs';
+export default Tabs;

package/cjs/Tabs/index.js

@@ -0,0 +1,9 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _Tabs = _interopRequireDefault(require("./Tabs"));
+var _default = _Tabs.default;
+exports.default = _default;

package/cjs/Tag/Tag.js

@@ -10,7 +10,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("../utils");
-var _CloseButton = _interopRequireDefault(require("../CloseButton"));
+var _CloseButton = _interopRequireDefault(require("../internals/CloseButton"));
 var _templateObject, _templateObject2;
 /**
  * The `Tag` component is used to label and categorize.

package/cjs/TagInput/index.d.ts

@@ -1,6 +1,6 @@
 import { InputPickerProps } from '../InputPicker/InputPicker';
 import { TagOnlyProps } from '../InputPicker/InputPickerContext';
-import type { PickerComponent } from '../Picker/types';
+import type { PickerComponent } from '../internals/Picker/types';
 export declare type TagInputProps = Omit<InputPickerProps<readonly string[]>, 'data'> & Partial<TagOnlyProps>;
 /**
  * The `TagInput` component is an enhancement of Input and supports input tags and management tags.

package/cjs/TagPicker/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { InputPickerProps } from '../InputPicker/InputPicker';
 import { TagOnlyProps } from '../InputPicker/InputPickerContext';
-import type { PickerComponent } from '../Picker/types';
+import type { PickerComponent } from '../internals/Picker/types';
 import type { CheckboxProps } from '../Checkbox';
 export interface TagPickerProps extends InputPickerProps, Partial<TagOnlyProps> {
     /**

package/cjs/Timeline/Timeline.js

@@ -11,6 +11,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _some = _interopRequireDefault(require("lodash/some"));
 var _TimelineItem = _interopRequireDefault(require("./TimelineItem"));
 var _utils = require("../utils");
+var _propTypes2 = require("../internals/propTypes");
 /**
  * The `Timeline` component is used to display a list of items in chronological order.
  *
@@ -65,7 +66,7 @@ Timeline.propTypes = {
   className: _propTypes.default.string,
   classPrefix: _propTypes.default.string,
   children: _propTypes.default.node,
-  align: _propTypes.default.oneOf(['left', 'right', 'alternate']),
+  align: (0, _propTypes2.oneOf)(['left', 'right', 'alternate']),
   endless: _propTypes.default.bool
 };
 var _default = Timeline;