rsuite 6.0.0-canary-2025011413 → 6.0.0-canary-2025031415

package/cjs/InputPicker/InputSearch.js

@@ -26,11 +26,11 @@ const InputSearch = (0, _utils.forwardRef)((props, ref) => {
     onChange === null || onChange === void 0 || onChange(event === null || event === void 0 || (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value, event);
   });
   const {
-    withClassPrefix,
+    withPrefix,
     merge,
     prefix
-  } = (0, _hooks.useClassNames)(classPrefix);
-  const classes = merge(className, withClassPrefix());
+  } = (0, _hooks.useStyles)(classPrefix);
+  const classes = merge(className, withPrefix());
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: ref,
     className: classes,

package/cjs/InputPicker/TagList.js

@@ -15,7 +15,7 @@ const TagList = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   } = props;
   const {
     prefix
-  } = (0, _hooks.useClassNames)('picker');
+  } = (0, _hooks.useStyles)('picker');
   const {
     id
   } = (0, _useCombobox.default)();

package/cjs/InputPicker/TextBox.js

@@ -27,14 +27,11 @@ const TextBox = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   } = props;
   const {
     prefix
-  } = (0, _hooks.useClassNames)('picker');
+  } = (0, _hooks.useStyles)('picker');
   if (!multiple && disabled) {
     return null;
   }
-  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
-    className: prefix`textbox`,
-    ref: ref
-  }, rest), showTagList ? /*#__PURE__*/_react.default.createElement(_TagList.default, null, tags) : null, editable && /*#__PURE__*/_react.default.createElement(_InputSearch.default, (0, _extends2.default)({}, inputProps, {
+  const input = editable ? /*#__PURE__*/_react.default.createElement(_InputSearch.default, (0, _extends2.default)({}, inputProps, {
     tabIndex: -1,
     readOnly: readOnly,
     onBlur: onBlur,
@@ -42,7 +39,11 @@ const TextBox = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     inputRef: inputRef,
     onChange: onChange,
     value: inputValue
-  })));
+  })) : null;
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+    className: prefix`textbox`,
+    ref: ref
+  }, rest), showTagList ? /*#__PURE__*/_react.default.createElement(_TagList.default, null, tags, input) : input);
 });
 TextBox.displayName = 'TextBox';
 var _default = exports.default = TextBox;

package/cjs/InputPicker/hooks/useData.d.ts

@@ -1,17 +1,17 @@
 /// <reference types="react" />
-import type { ItemDataType } from '../../internals/types';
-export interface InputItemDataType<T = number | string> extends ItemDataType<T> {
+import type { Option } from '../../internals/types';
+export interface InputOption<T = number | string> extends Option<T> {
     create?: boolean;
 }
 interface UseDataProps {
-    controlledData?: InputItemDataType[];
-    cacheData?: InputItemDataType[];
-    onChange?: (data: ItemDataType[]) => void;
+    controlledData?: InputOption[];
+    cacheData?: InputOption[];
+    onChange?: (data: Option[]) => void;
 }
 declare function useData(props: UseDataProps): {
-    data: ItemDataType<string | number>[];
-    dataWithCache: ItemDataType<string | number>[];
-    newData: InputItemDataType<string | number>[];
-    setNewData: import("react").Dispatch<import("react").SetStateAction<InputItemDataType<string | number>[]>>;
+    data: Option<string | number>[];
+    dataWithCache: Option<string | number>[];
+    newData: InputOption<string | number>[];
+    setNewData: import("react").Dispatch<import("react").SetStateAction<InputOption<string | number>[]>>;
 };
 export default useData;

package/cjs/InputPicker/hooks/useInput.d.ts

@@ -1,13 +1,13 @@
 import React from 'react';
-import type { OverlayTriggerHandle } from '../../internals/Picker/PickerToggleTrigger';
+import type { OverlayTriggerHandle } from '../../internals/Overlay';
 import type { InputSearchProps } from '../InputSearch';
 interface InputProps {
     multi?: boolean;
-    triggerRef: React.RefObject<OverlayTriggerHandle>;
+    triggerRef: React.RefObject<OverlayTriggerHandle | null>;
 }
 declare function useInput(props: InputProps): {
     inputProps: InputSearchProps;
-    inputRef: React.MutableRefObject<any>;
+    inputRef: React.RefObject<any>;
     focus: () => void;
     blur: () => void;
 };

package/cjs/InputPicker/hooks/useInput.js

@@ -13,7 +13,7 @@ function useInput(props) {
     multi,
     triggerRef
   } = props;
-  const inputRef = (0, _react.useRef)();
+  const inputRef = (0, _react.useRef)(null);
   const maxWidth = (0, _useMaxWidth.default)(triggerRef);
   const getInput = (0, _react.useCallback)(() => {
     var _inputRef$current;

package/cjs/InputPicker/hooks/useMaxWidth.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import type { OverlayTriggerHandle } from '../../internals/Picker/PickerToggleTrigger';
-declare function useMaxWidth(triggerRef: React.RefObject<OverlayTriggerHandle>): number;
+import type { OverlayTriggerHandle } from '../../internals/Overlay';
+declare function useMaxWidth(triggerRef: React.RefObject<OverlayTriggerHandle | null>): number;
 export default useMaxWidth;

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

@@ -0,0 +1,15 @@
+import type { WithAsProps, Size } from '../internals/types';
+export interface KbdProps extends WithAsProps {
+    /**
+     * Sets Kbd size.
+     */
+    size?: Size;
+}
+/**
+ *
+ * The `Kbd` component is used to display a Kbd.
+ *
+ * @see https://rsuitejs.com/components/kbd
+ */
+declare const Kbd: import("../internals/types").InternalRefForwardingComponent<"kbd", KbdProps, never> & Record<string, never>;
+export default Kbd;

package/cjs/Kbd/Kbd.js

@@ -0,0 +1,40 @@
+'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 _utils = require("../internals/utils");
+var _hooks = require("../internals/hooks");
+var _CustomProvider = require("../CustomProvider");
+/**
+ *
+ * The `Kbd` component is used to display a Kbd.
+ *
+ * @see https://rsuitejs.com/components/kbd
+ */
+const Kbd = (0, _utils.forwardRef)((props, ref) => {
+  const {
+    propsWithDefaults
+  } = (0, _CustomProvider.useCustom)('Kbd', props);
+  const {
+    as: Component = 'kbd',
+    classPrefix = 'kbd',
+    className,
+    size = 'md',
+    ...rest
+  } = propsWithDefaults;
+  const {
+    withPrefix,
+    merge
+  } = (0, _hooks.useStyles)(classPrefix);
+  const classes = merge(className, withPrefix(size));
+  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
+    ref: ref,
+    className: classes
+  }));
+});
+Kbd.displayName = 'Kbd';
+var _default = exports.default = Kbd;

package/cjs/Kbd/index.d.ts

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

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

package/cjs/List/List.js

@@ -46,9 +46,9 @@ const List = (0, _utils.forwardRef)((props, ref) => {
     ...rest
   } = propsWithDefaults;
   const {
-    withClassPrefix,
+    withPrefix,
     merge
-  } = (0, _hooks.useClassNames)(classPrefix);
+  } = (0, _hooks.useStyles)(classPrefix);
   const {
     containerRef,
     register,
@@ -64,7 +64,7 @@ const List = (0, _utils.forwardRef)((props, ref) => {
     pressDelay,
     transitionDuration
   });
-  const classes = merge(className, withClassPrefix({
+  const classes = merge(className, withPrefix({
     bordered,
     sortable,
     sorting,

package/cjs/List/ListItem.js

@@ -34,9 +34,9 @@ const ListItem = (0, _utils.forwardRef)((props, ref) => {
   } = (0, _react.useContext)(_ListContext.default);
   const size = sizeProp || parentSize;
   const {
-    withClassPrefix,
+    withPrefix,
     merge
-  } = (0, _hooks.useClassNames)(classPrefix);
+  } = (0, _hooks.useStyles)(classPrefix);
   const listItemRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(() => {
     if (listItemRef.current) {
@@ -54,7 +54,7 @@ const ListItem = (0, _utils.forwardRef)((props, ref) => {
       return unregister;
     }
   }, [collection, disabled, index, register]);
-  const classes = merge(className, withClassPrefix(size, {
+  const classes = merge(className, withPrefix(size, {
     disabled,
     bordered
   }));

package/cjs/List/helper/useSortHelper.d.ts

@@ -18,7 +18,7 @@ export type SortConfig = {
 declare const useSortHelper: (config: SortConfig) => {
     handleStart: MouseEventHandler<Element>;
     handleEnd: MouseEventHandler<Element>;
-    containerRef: import("react").RefObject<HTMLDivElement>;
+    containerRef: import("react").RefObject<HTMLDivElement | null>;
     sorting: boolean;
     register: (item: ManagedItem) => {
         unregister: () => void;

package/cjs/List/helper/useSortHelper.js

@@ -24,7 +24,7 @@ const useSortHelper = config => {
   } = config;
   const [sorting, setSorting] = (0, _react.useState)(false);
   const containerRef = (0, _react.useRef)(null);
-  const pressTimer = (0, _react.useRef)();
+  const pressTimer = (0, _react.useRef)(null);
   const {
     listItemRegister,
     getManagedItem,

package/cjs/Loader/Loader.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { WithAsProps, SizeType } from '../internals/types';
+import type { WithAsProps, Size } from '../internals/types';
 export interface LoaderProps extends WithAsProps {
     /** Centered in the container */
     center?: boolean;
@@ -14,7 +14,7 @@ export interface LoaderProps extends WithAsProps {
     /** The speed at which the loader rotates */
     speed?: 'normal' | 'fast' | 'slow' | 'paused';
     /** A loader can have different sizes */
-    size?: SizeType;
+    size?: Size;
 }
 /**
  * The `Loader` component is used to indicate the loading state of a page or a section.

package/cjs/Loader/Loader.js

@@ -27,20 +27,19 @@ const Loader = (0, _utils.forwardRef)((props, ref) => {
     center,
     vertical,
     content,
-    size,
+    size = 'sm',
     ...rest
   } = propsWithDefaults;
   const {
     merge,
-    withClassPrefix,
+    withPrefix,
     prefix
-  } = (0, _hooks.useClassNames)(classPrefix);
+  } = (0, _hooks.useStyles)(classPrefix);
   const labelId = (0, _hooks.useUniqueId)('loader-label-');
-  const classes = merge(className, prefix('wrapper', `speed-${speed}`, size, {
-    'backdrop-wrapper': backdrop,
+  const classes = merge(className, prefix(`speed-${speed}`, size, {
+    center: backdrop || center,
     vertical,
-    inverse,
-    center
+    inverse
   }));
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
     role: "status",
@@ -51,7 +50,7 @@ const Loader = (0, _utils.forwardRef)((props, ref) => {
   }), backdrop && /*#__PURE__*/_react.default.createElement("div", {
     className: prefix('backdrop')
   }), /*#__PURE__*/_react.default.createElement("div", {
-    className: withClassPrefix()
+    className: withPrefix()
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: prefix('spin')
   }), content && /*#__PURE__*/_react.default.createElement("span", {

package/cjs/MaskedInput/MaskedInput.d.ts

@@ -1,5 +1,6 @@
 import { InputProps } from '../Input';
+import type { PropsWithoutChange } from '../internals/types';
 import type { TextMaskProps } from './TextMask';
-export type MaskedInputProps = Omit<TextMaskProps, 'onChange'> & Omit<InputProps, 'type'>;
+export type MaskedInputProps = PropsWithoutChange<TextMaskProps> & Omit<InputProps, 'type'>;
 declare const MaskedInput: import("../internals/types").InternalRefForwardingComponent<"input", MaskedInputProps, never> & Record<string, never>;
 export default MaskedInput;

package/cjs/MaskedInput/TextMask.js

@@ -36,7 +36,7 @@ const TextMask = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     ...rest
   } = props;
   const inputRef = (0, _react.useRef)(null);
-  const textMaskInputElement = (0, _react.useRef)();
+  const textMaskInputElement = (0, _react.useRef)(null);
   const initTextMask = (0, _react.useCallback)(() => {
     var _textMaskInputElement;
     textMaskInputElement.current = (0, _createTextMaskInputElement.default)({

package/cjs/Menu/Menu.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { StandardProps, HTMLPropsWithoutSelect } from '../internals/types';
+export interface MenuProps<T = string | number> extends StandardProps, HTMLPropsWithoutSelect<HTMLUListElement> {
+    /** Set the active key for the menu */
+    activeKey?: T;
+    /** Callback function triggered when an item is selected */
+    onSelect?: (eventKey: T | undefined, event: React.SyntheticEvent) => void;
+}
+/**
+ * The `<Menu>` component is used to create a menu.
+ *
+ * @see https://rsuitejs.com/components/menu
+ */
+declare const Menu: import("../internals/types").InternalRefForwardingComponent<"ul", MenuProps<string | number>, never> & {
+    Item: import("../internals/types").InternalRefForwardingComponent<"li", import("./MenuItem").MenuItemProps<any>, never> & Record<string, never>;
+    Separator: import("../internals/types").InternalRefForwardingComponent<"li", import("./MenuSeparator").MenuSeparatorProps, never> & Record<string, never>;
+};
+export default Menu;

package/cjs/Menu/Menu.js

@@ -0,0 +1,56 @@
+'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 _Menubar = _interopRequireDefault(require("../internals/Menu/Menubar"));
+var _MenuContext = _interopRequireDefault(require("./MenuContext"));
+var _MenuItem = _interopRequireDefault(require("./MenuItem"));
+var _MenuSeparator = _interopRequireDefault(require("./MenuSeparator"));
+var _hooks = require("../internals/hooks");
+var _utils = require("../internals/utils");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const Subcomponents = {
+  Item: _MenuItem.default,
+  Separator: _MenuSeparator.default
+};
+
+/**
+ * The `<Menu>` component is used to create a menu.
+ *
+ * @see https://rsuitejs.com/components/menu
+ */
+const Menu = (0, _utils.forwardRef)((props, ref) => {
+  const {
+    activeKey,
+    classPrefix = 'menu',
+    className,
+    children,
+    onSelect,
+    ...rest
+  } = props;
+  const {
+    merge,
+    withPrefix
+  } = (0, _hooks.useStyles)(classPrefix);
+  const contextValue = (0, _react.useMemo)(() => ({
+    activeKey,
+    onSelect
+  }), [activeKey, onSelect]);
+  const classes = merge(className, withPrefix());
+  return /*#__PURE__*/_react.default.createElement(_MenuContext.default.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/_react.default.createElement(_Menubar.default, {
+    vertical: true
+  }, (menubar, menubarRef) => /*#__PURE__*/_react.default.createElement("ul", (0, _extends2.default)({}, menubar, rest, {
+    ref: (0, _utils.mergeRefs)(menubarRef, ref),
+    className: classes,
+    role: "menu"
+  }), children)));
+}, Subcomponents);
+Menu.displayName = 'Menu';
+var _default = exports.default = Menu;

package/cjs/Menu/MenuContext.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface MenuContextProps {
+    activeKey?: string | number;
+    onSelect?: (eventKey: string | undefined, event: React.SyntheticEvent) => void;
+}
+declare const MenuContext: React.Context<MenuContextProps | null>;
+export default MenuContext;

package/cjs/{internals/Overlay/OverlayContext.js → Menu/MenuContext.js}

@@ -5,6 +5,6 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-const OverlayContext = /*#__PURE__*/_react.default.createContext({});
-OverlayContext.displayName = 'OverlayContext';
-var _default = exports.default = OverlayContext;
+const MenuContext = /*#__PURE__*/_react.default.createContext(null);
+MenuContext.displayName = 'MenuContext';
+var _default = exports.default = MenuContext;

package/cjs/Menu/MenuItem.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import type { IconProps } from '@rsuite/icons/Icon';
+import type { WithAsProps, HTMLPropsWithoutSelect } from '../internals/types';
+export interface MenuItemProps<T = any> extends WithAsProps, HTMLPropsWithoutSelect {
+    /** Active the current option */
+    active?: boolean;
+    /** Disable the current option */
+    disabled?: boolean;
+    /** The description of the current option */
+    description?: React.ReactNode;
+    /** The value of the current option */
+    eventKey?: T;
+    /** Set the icon */
+    icon?: React.ReactElement<IconProps>;
+    /**
+     * The menu item keyboard shortcut.
+     */
+    shortcut?: React.ReactNode;
+    /**
+     * Select the callback function for the current option
+     */
+    onSelect?: (eventKey: T, event: React.SyntheticEvent) => void;
+}
+declare const MenuItem: import("../internals/types").InternalRefForwardingComponent<"li", MenuItemProps<any>, never> & Record<string, never>;
+export default MenuItem;

package/cjs/Menu/MenuItem.js

@@ -0,0 +1,84 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _MenuItem = _interopRequireDefault(require("../internals/Menu/MenuItem"));
+var _MenuContext = _interopRequireDefault(require("./MenuContext"));
+var _isNil = _interopRequireDefault(require("lodash/isNil"));
+var _Text = _interopRequireDefault(require("../Text"));
+var _hooks = require("../internals/hooks");
+var _utils = require("../internals/utils");
+var _useRenderMenuItem = require("../internals/Menu/useRenderMenuItem");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const MenuItem = (0, _utils.forwardRef)((props, ref) => {
+  const {
+    as: Component = 'li',
+    active: activeProp,
+    classPrefix = 'menu-item',
+    className,
+    description,
+    shortcut,
+    eventKey,
+    icon,
+    children,
+    disabled,
+    onSelect,
+    ...rest
+  } = props;
+  const menu = (0, _react.useContext)(_MenuContext.default);
+  const {
+    merge,
+    withPrefix,
+    prefix
+  } = (0, _hooks.useStyles)(classPrefix);
+  const handleSelectItem = (0, _react.useCallback)(event => {
+    var _menu$onSelect;
+    onSelect === null || onSelect === void 0 || onSelect(eventKey, event);
+    menu === null || menu === void 0 || (_menu$onSelect = menu.onSelect) === null || _menu$onSelect === void 0 || _menu$onSelect.call(menu, eventKey, event);
+  }, [onSelect, eventKey, menu]);
+  const selected = activeProp || !(0, _isNil.default)(eventKey) && (0, _utils.shallowEqual)(menu === null || menu === void 0 ? void 0 : menu.activeKey, eventKey);
+  const renderMenuItem = (0, _useRenderMenuItem.useRenderMenuItem)(Component);
+  return /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
+    selected: selected,
+    disabled: disabled,
+    onActivate: handleSelectItem
+  }, (_ref, menuitemRef) => {
+    let {
+      selected,
+      active,
+      ...menuitem
+    } = _ref;
+    const classes = merge(className, withPrefix({
+      active: selected,
+      disabled,
+      focus: active
+    }));
+    return renderMenuItem({
+      ref: (0, _utils.mergeRefs)(ref, menuitemRef),
+      className: classes,
+      ...menuitem,
+      ...rest,
+      children: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, icon && /*#__PURE__*/(0, _react.cloneElement)(icon, {
+        className: (0, _classnames.default)(prefix('menu-icon'), icon.props.className)
+      }), /*#__PURE__*/_react.default.createElement("div", {
+        className: prefix('content')
+      }, /*#__PURE__*/_react.default.createElement(_Text.default, {
+        as: "span"
+      }, children), /*#__PURE__*/_react.default.createElement(_Text.default, {
+        as: "span",
+        muted: true
+      }, description)), shortcut && /*#__PURE__*/_react.default.createElement(_Text.default, {
+        as: "kbd",
+        className: prefix('shortcut'),
+        muted: true
+      }, shortcut))
+    });
+  });
+});
+MenuItem.displayName = 'MenuItem';
+var _default = exports.default = MenuItem;

package/cjs/Menu/MenuSeparator.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { WithAsProps } from '../internals/types';
+export interface MenuSeparatorProps extends WithAsProps, React.HTMLAttributes<HTMLElement> {
+    /** You can use a custom element for this component */
+    as?: React.ElementType;
+}
+/**
+ * The `<Menu.Separator>` API
+ *
+ */
+declare const MenuSeparator: import("../internals/types").InternalRefForwardingComponent<"li", MenuSeparatorProps, never> & Record<string, never>;
+export default MenuSeparator;

package/cjs/Menu/MenuSeparator.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 _react = _interopRequireDefault(require("react"));
+var _utils = require("../internals/utils");
+var _hooks = require("../internals/hooks");
+/**
+ * The `<Menu.Separator>` API
+ *
+ */
+const MenuSeparator = (0, _utils.forwardRef)((props, ref) => {
+  const {
+    classPrefix = 'menu-item-divider',
+    className,
+    as: Component = 'li',
+    ...restProps
+  } = props;
+  const {
+    merge,
+    withPrefix
+  } = (0, _hooks.useStyles)(classPrefix);
+  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+    ref: ref,
+    role: "separator",
+    className: merge(withPrefix(), className)
+  }, restProps));
+});
+MenuSeparator.displayName = 'MenuSeparator';
+var _default = exports.default = MenuSeparator;

package/cjs/Menu/index.d.ts

@@ -0,0 +1,8 @@
+import Menu from './Menu';
+import MenuItem from './MenuItem';
+import MenuSeparator from './MenuSeparator';
+export type { MenuProps } from './Menu';
+export type { MenuItemProps } from './MenuItem';
+export type { MenuSeparatorProps } from './MenuSeparator';
+export { Menu, MenuItem, MenuSeparator };
+export default Menu;

package/cjs/Menu/index.js

@@ -0,0 +1,15 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _Menu = _interopRequireDefault(require("./Menu"));
+exports.Menu = _Menu.default;
+var _MenuItem = _interopRequireDefault(require("./MenuItem"));
+exports.MenuItem = _MenuItem.default;
+var _MenuSeparator = _interopRequireDefault(require("./MenuSeparator"));
+exports.MenuSeparator = _MenuSeparator.default;
+// export types
+// export components
+var _default = exports.default = _Menu.default;