@yamada-ui/menu 0.1.0

package/dist/index.js

@@ -0,0 +1,504 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Menu: () => Menu,
+  MenuButton: () => MenuButton,
+  MenuDivider: () => MenuDivider,
+  MenuGroup: () => MenuGroup,
+  MenuItem: () => MenuItem,
+  MenuList: () => MenuList,
+  MenuOptionGroup: () => MenuOptionGroup,
+  MenuOptionItem: () => MenuOptionItem,
+  useMenu: () => useMenu,
+  useMenuDescendant: () => useMenuDescendant,
+  useMenuDescendantsContext: () => useMenuDescendantsContext
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/menu.tsx
+var import_core = require("@yamada-ui/core");
+var import_popover = require("@yamada-ui/popover");
+var import_use_descendant = require("@yamada-ui/use-descendant");
+var import_use_disclosure = require("@yamada-ui/use-disclosure");
+var import_utils = require("@yamada-ui/utils");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var {
+  DescendantsContextProvider,
+  useDescendantsContext: useMenuDescendantsContext,
+  useDescendants,
+  useDescendant: useMenuDescendant
+} = (0, import_use_descendant.createDescendant)();
+var [MenuProvider, useMenu] = (0, import_utils.createContext)({
+  name: "MenuContext",
+  errorMessage: `useMenu returned is 'undefined'. Seems you forgot to wrap the components in "<Menu />"`
+});
+var Menu = (props) => {
+  const [styles, mergedProps] = (0, import_core.useMultiComponentStyle)("Menu", props);
+  const {
+    initialFocusRef,
+    closeOnSelect = true,
+    placement = "bottom-start",
+    duration = 0.2,
+    ...rest
+  } = (0, import_core.omitThemeProps)(mergedProps);
+  const descendants = useDescendants();
+  const [focusedIndex, setFocusedIndex] = (0, import_react.useState)(-1);
+  const menuRef = (0, import_react.useRef)(null);
+  const timeoutIds = (0, import_react.useRef)(/* @__PURE__ */ new Set([]));
+  const onFocusMenu = (0, import_react.useCallback)(() => {
+    requestAnimationFrame(() => {
+      var _a;
+      return (_a = menuRef.current) == null ? void 0 : _a.focus({ preventScroll: false });
+    });
+  }, []);
+  const onFocusFirstItem = (0, import_react.useCallback)(() => {
+    const id = setTimeout(() => {
+      if (initialFocusRef)
+        return;
+      const first = descendants.enabledfirstValue();
+      if (first)
+        setFocusedIndex(first.index);
+    });
+    timeoutIds.current.add(id);
+  }, [descendants, initialFocusRef]);
+  const onFocusLastItem = (0, import_react.useCallback)(() => {
+    const id = setTimeout(() => {
+      if (initialFocusRef)
+        return;
+      const last = descendants.enabledlastValue();
+      if (last)
+        setFocusedIndex(last.index);
+    });
+    timeoutIds.current.add(id);
+  }, [descendants, initialFocusRef]);
+  const onOpenInternal = (0, import_react.useCallback)(() => {
+    var _a;
+    (_a = rest.onOpen) == null ? void 0 : _a.call(rest);
+    onFocusMenu();
+  }, [onFocusMenu, rest]);
+  const [isOpen, onOpen, onClose] = (0, import_use_disclosure.useDisclosure)({ ...props, onOpen: onOpenInternal });
+  (0, import_utils.useUpdateEffect)(() => {
+    if (!isOpen)
+      setFocusedIndex(-1);
+  }, [isOpen]);
+  (0, import_utils.useUnmountEffect)(() => {
+    timeoutIds.current.forEach((id) => clearTimeout(id));
+    timeoutIds.current.clear();
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DescendantsContextProvider, { value: descendants, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    MenuProvider,
+    {
+      value: {
+        isOpen,
+        onOpen,
+        onClose,
+        onFocusFirstItem,
+        onFocusLastItem,
+        closeOnSelect,
+        focusedIndex,
+        setFocusedIndex,
+        menuRef,
+        styles
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_popover.Popover,
+        {
+          ...{
+            ...rest,
+            isOpen,
+            onOpen,
+            onClose,
+            placement,
+            duration,
+            initialFocusRef,
+            closeOnButton: false
+          }
+        }
+      )
+    }
+  ) });
+};
+
+// src/menu-button.tsx
+var import_core2 = require("@yamada-ui/core");
+var import_popover2 = require("@yamada-ui/popover");
+var import_utils2 = require("@yamada-ui/utils");
+var import_react2 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var MenuButton = (0, import_core2.forwardRef)(
+  ({ className, children, as: As, ...rest }, ref) => {
+    const { isOpen, onOpen, onFocusFirstItem, onFocusLastItem } = useMenu();
+    const onKeyDown = (0, import_react2.useCallback)(
+      (ev) => {
+        const actions = {
+          Enter: (0, import_utils2.funcAll)(onOpen, onFocusFirstItem),
+          ArrowDown: (0, import_utils2.funcAll)(onOpen, onFocusFirstItem),
+          ArrowUp: (0, import_utils2.funcAll)(onOpen, onFocusLastItem)
+        };
+        const action = actions[ev.key];
+        if (!action)
+          return;
+        ev.preventDefault();
+        ev.stopPropagation();
+        action();
+      },
+      [onFocusFirstItem, onFocusLastItem, onOpen]
+    );
+    const Component = As || Button;
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_popover2.PopoverTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      Component,
+      {
+        ref,
+        className: (0, import_utils2.cx)("ui-menu-button", className),
+        ...rest,
+        "data-active": (0, import_utils2.dataAttr)(isOpen),
+        "aria-expanded": (0, import_utils2.ariaAttr)(isOpen),
+        onKeyDown: (0, import_utils2.handlerAll)(rest.onKeyDown, onKeyDown),
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.span, { __css: { pointerEvents: "none", flex: "1 1 auto", minW: 0 }, children })
+      }
+    ) });
+  }
+);
+var Button = (0, import_core2.forwardRef)((rest, ref) => {
+  const { styles } = useMenu();
+  const css = {
+    display: "inline-flex",
+    appearance: "none",
+    alignItems: "center",
+    outline: 0,
+    ...styles.button
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.button, { ref, __css: css, ...rest });
+});
+
+// src/menu-list.tsx
+var import_core3 = require("@yamada-ui/core");
+var import_popover3 = require("@yamada-ui/popover");
+var import_utils3 = require("@yamada-ui/utils");
+var import_react3 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var MenuList = (0, import_core3.forwardRef)(({ className, ...rest }, ref) => {
+  const { menuRef, focusedIndex, setFocusedIndex, onClose, styles } = useMenu();
+  const descendants = useMenuDescendantsContext();
+  const onNext = (0, import_react3.useCallback)(() => {
+    const next = descendants.enabledNextValue(focusedIndex);
+    if (next)
+      setFocusedIndex(next.index);
+  }, [descendants, focusedIndex, setFocusedIndex]);
+  const onPrev = (0, import_react3.useCallback)(() => {
+    const prev = descendants.enabledPrevValue(focusedIndex);
+    if (prev)
+      setFocusedIndex(prev.index);
+  }, [descendants, focusedIndex, setFocusedIndex]);
+  const onFirst = (0, import_react3.useCallback)(() => {
+    const first = descendants.enabledfirstValue();
+    if (first)
+      setFocusedIndex(first.index);
+  }, [descendants, setFocusedIndex]);
+  const onLast = (0, import_react3.useCallback)(() => {
+    const last = descendants.enabledlastValue();
+    if (last)
+      setFocusedIndex(last.index);
+  }, [descendants, setFocusedIndex]);
+  const onKeyDown = (0, import_react3.useCallback)(
+    (ev) => {
+      const actions = {
+        Tab: (ev2) => ev2.preventDefault(),
+        Escape: onClose,
+        ArrowDown: focusedIndex === -1 ? onFirst : onNext,
+        ArrowUp: focusedIndex === -1 ? onLast : onPrev,
+        Home: onFirst,
+        End: onLast
+      };
+      const action = actions[ev.key];
+      if (!action)
+        return;
+      ev.preventDefault();
+      action(ev);
+    },
+    [focusedIndex, onClose, onFirst, onLast, onNext, onPrev]
+  );
+  const css = { ...styles.list };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    import_popover3.PopoverContent,
+    {
+      ref: (0, import_utils3.mergeRefs)(menuRef, ref),
+      className: (0, import_utils3.cx)("ui-menu-list", className),
+      role: "menu",
+      tabIndex: -1,
+      __css: css,
+      ...rest,
+      onKeyDown: (0, import_utils3.handlerAll)(rest.onKeyDown, onKeyDown)
+    }
+  );
+});
+
+// src/menu-item.tsx
+var import_core4 = require("@yamada-ui/core");
+var import_use_clickable = require("@yamada-ui/use-clickable");
+var import_utils4 = require("@yamada-ui/utils");
+var import_react4 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var isTargetMenuItem = (target) => {
+  var _a;
+  return (0, import_utils4.isHTMLElement)(target) && !!((_a = target == null ? void 0 : target.getAttribute("role")) == null ? void 0 : _a.startsWith("menu-item"));
+};
+var MenuItem = (0, import_core4.forwardRef)(
+  ({
+    as,
+    className,
+    type,
+    isDisabled,
+    isFocusable,
+    closeOnSelect: customCloseOnSelect,
+    icon,
+    command,
+    children,
+    ...props
+  }, ref) => {
+    const {
+      focusedIndex,
+      setFocusedIndex,
+      isOpen,
+      onClose,
+      closeOnSelect: generalCloseOnSelect,
+      menuRef,
+      styles
+    } = useMenu();
+    const trulyDisabled = isDisabled && !isFocusable;
+    const buttonRef = (0, import_react4.useRef)(null);
+    const { index, register } = useMenuDescendant({ disabled: trulyDisabled });
+    const isFocused = index === focusedIndex;
+    const onClick = (0, import_react4.useCallback)(
+      (ev) => {
+        var _a;
+        (_a = props.onClick) == null ? void 0 : _a.call(props, ev);
+        if (!isTargetMenuItem(ev.currentTarget))
+          return;
+        if (customCloseOnSelect != null ? customCloseOnSelect : generalCloseOnSelect)
+          onClose();
+      },
+      [props, customCloseOnSelect, generalCloseOnSelect, onClose]
+    );
+    const onFocus = (0, import_react4.useCallback)(
+      (ev) => {
+        var _a;
+        (_a = props.onFocus) == null ? void 0 : _a.call(props, ev);
+        setFocusedIndex(index);
+      },
+      [props, setFocusedIndex, index]
+    );
+    const rest = (0, import_use_clickable.useClickable)({
+      onClick,
+      onFocus,
+      ref: (0, import_utils4.mergeRefs)(register, buttonRef, ref),
+      isDisabled,
+      isFocusable
+    });
+    (0, import_utils4.useUpdateEffect)(() => {
+      if (!isOpen)
+        return;
+      if (isFocused && !trulyDisabled && buttonRef.current) {
+        requestAnimationFrame(() => {
+          var _a;
+          return (_a = buttonRef.current) == null ? void 0 : _a.focus();
+        });
+      } else if (menuRef.current && !(0, import_utils4.isActiveElement)(menuRef.current)) {
+        menuRef.current.focus();
+      }
+    }, [isFocused, trulyDisabled, menuRef, isOpen]);
+    type = as || type ? type != null ? type : void 0 : "button";
+    children = icon || command ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core4.ui.span, { style: { pointerEvents: "none", flex: 1 }, children }) : children;
+    const css = {
+      textDecoration: "none",
+      color: "inherit",
+      userSelect: "none",
+      display: "flex",
+      width: "100%",
+      alignItems: "center",
+      textAlign: "start",
+      flex: "0 0 auto",
+      outline: 0,
+      gap: "0.75rem",
+      ...styles.item
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      import_core4.ui.button,
+      {
+        ...props,
+        ...rest,
+        as,
+        type,
+        role: "menu-item",
+        tabInde: isFocused ? 0 : -1,
+        className: (0, import_utils4.cx)("ui-menu-item", className),
+        __css: css,
+        children: [
+          icon ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MenuIcon, { children: icon }) : null,
+          children,
+          command ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MenuCommand, { children: command }) : null
+        ]
+      }
+    );
+  }
+);
+var MenuOptionItem = (0, import_core4.forwardRef)(
+  ({ className, icon, isChecked, closeOnSelect = false, children, ...rest }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      MenuItem,
+      {
+        ref,
+        className: (0, import_utils4.cx)("ui-menu-option-item", className),
+        "aria-checked": (0, import_utils4.ariaAttr)(isChecked),
+        closeOnSelect,
+        ...rest,
+        children: [
+          icon !== null ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MenuIcon, { opacity: isChecked ? 1 : 0, children: icon || /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CheckIcon, {}) }) : null,
+          children
+        ]
+      }
+    );
+  }
+);
+var MenuIcon = (0, import_core4.forwardRef)(({ className, ...rest }, ref) => {
+  const { styles } = useMenu();
+  const css = {
+    flexShrink: 0,
+    display: "inline-flex",
+    justifyContent: "center",
+    alignItems: "center",
+    fontSize: "0.85em",
+    ...styles.icon
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core4.ui.span, { ref, className: (0, import_utils4.cx)("ui-menu-icon", className), __css: css, ...rest });
+});
+var MenuCommand = (0, import_core4.forwardRef)(({ className, ...rest }, ref) => {
+  const { styles } = useMenu();
+  const css = { ...styles.command };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core4.ui.span, { ref, className: (0, import_utils4.cx)("ui-menu-command", className), __css: css, ...rest });
+});
+var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { viewBox: "0 0 14 14", width: "1em", height: "1em", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  "polygon",
+  {
+    fill: "currentColor",
+    points: "5.5 11.9993304 14 3.49933039 12.5 2 5.5 8.99933039 1.5 4.9968652 0 6.49933039"
+  }
+) });
+
+// src/menu-group.tsx
+var import_core5 = require("@yamada-ui/core");
+var import_utils5 = require("@yamada-ui/utils");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var MenuGroup = (0, import_core5.forwardRef)(
+  ({ className, title, children, ...rest }, ref) => {
+    const { styles } = useMenu();
+    const css = { ...styles.group };
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      import_core5.ui.div,
+      {
+        ref,
+        className: (0, import_utils5.cx)("ui-menu-group", className),
+        role: "group",
+        __css: css,
+        ...rest,
+        children: [
+          title ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_core5.ui.span, { className: (0, import_utils5.cx)("ui-menu-group-title"), __css: styles.groupTitle, children: title }) : null,
+          children
+        ]
+      }
+    );
+  }
+);
+
+// src/menu-option-group.tsx
+var import_use_controllable_state = require("@yamada-ui/use-controllable-state");
+var import_utils6 = require("@yamada-ui/utils");
+var import_react5 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var MenuOptionGroup = (0, import_react5.forwardRef)(
+  ({ className, defaultValue, type, children, ...rest }, ref) => {
+    const isRadio = type === "radio";
+    defaultValue = isRadio ? "" : [];
+    const [value, setValue] = (0, import_use_controllable_state.useControllableState)({
+      ...rest,
+      defaultValue
+    });
+    const onChange = (0, import_react5.useCallback)(
+      (selectedValue) => {
+        if (isRadio && typeof value === "string")
+          setValue(selectedValue);
+        if (!isRadio && (0, import_utils6.isArray)(value)) {
+          const nextValue = value.includes(selectedValue) ? value.filter((item) => item !== selectedValue) : value.concat(selectedValue);
+          setValue(nextValue);
+        }
+      },
+      [isRadio, value, setValue]
+    );
+    const validChildren = (0, import_utils6.getValidChildren)(children);
+    const cloneChildren = validChildren.map((child) => {
+      if (child.type !== MenuOptionItem)
+        return child;
+      const onClick = (ev) => {
+        var _a, _b;
+        onChange(child.props.value);
+        (_b = (_a = child.props).onClick) == null ? void 0 : _b.call(_a, ev);
+      };
+      const isChecked = !isRadio && (0, import_utils6.isArray)(value) ? value.includes(child.props.value) : child.props.value === value;
+      return (0, import_react5.cloneElement)(child, { type, onClick, isChecked });
+    });
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      MenuGroup,
+      {
+        ref,
+        className: (0, import_utils6.cx)("ui-menu-option-group", className),
+        ...(0, import_utils6.omitObject)(rest, ["value", "onChange"]),
+        children: cloneChildren
+      }
+    );
+  }
+);
+MenuOptionGroup.displayName = "MenuOptionGroup";
+
+// src/menu-divider.tsx
+var import_core6 = require("@yamada-ui/core");
+var import_utils7 = require("@yamada-ui/utils");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var MenuDivider = (0, import_core6.forwardRef)(({ className, ...rest }, ref) => {
+  const { styles } = useMenu();
+  const css = { ...styles.divider };
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_core6.ui.hr, { ref, className: (0, import_utils7.cx)("ui-menu-divider", className), __css: css, ...rest });
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Menu,
+  MenuButton,
+  MenuDivider,
+  MenuGroup,
+  MenuItem,
+  MenuList,
+  MenuOptionGroup,
+  MenuOptionItem,
+  useMenu,
+  useMenuDescendant,
+  useMenuDescendantsContext
+});

package/dist/index.mjs

@@ -0,0 +1,28 @@
+import {
+  MenuButton,
+  MenuDivider,
+  MenuGroup,
+  MenuItem,
+  MenuList,
+  MenuOptionGroup,
+  MenuOptionItem
+} from "./chunk-OFZGIB33.mjs";
+import {
+  Menu,
+  useMenu,
+  useMenuDescendant,
+  useMenuDescendantsContext
+} from "./chunk-6ALPY7K4.mjs";
+export {
+  Menu,
+  MenuButton,
+  MenuDivider,
+  MenuGroup,
+  MenuItem,
+  MenuList,
+  MenuOptionGroup,
+  MenuOptionItem,
+  useMenu,
+  useMenuDescendant,
+  useMenuDescendantsContext
+};

package/dist/menu-button.d.ts

@@ -0,0 +1,7 @@
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { HTMLUIProps } from '@yamada-ui/core';
+
+type MenuButtonProps = HTMLUIProps<'button'>;
+declare const MenuButton: _yamada_ui_core.Component<"button", MenuButtonProps>;
+
+export { MenuButton, MenuButtonProps };

package/dist/menu-button.js

@@ -0,0 +1,100 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/menu-button.tsx
+var menu_button_exports = {};
+__export(menu_button_exports, {
+  MenuButton: () => MenuButton
+});
+module.exports = __toCommonJS(menu_button_exports);
+var import_core2 = require("@yamada-ui/core");
+var import_popover2 = require("@yamada-ui/popover");
+var import_utils2 = require("@yamada-ui/utils");
+var import_react2 = require("react");
+
+// src/menu.tsx
+var import_core = require("@yamada-ui/core");
+var import_popover = require("@yamada-ui/popover");
+var import_use_descendant = require("@yamada-ui/use-descendant");
+var import_use_disclosure = require("@yamada-ui/use-disclosure");
+var import_utils = require("@yamada-ui/utils");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var {
+  DescendantsContextProvider,
+  useDescendantsContext: useMenuDescendantsContext,
+  useDescendants,
+  useDescendant: useMenuDescendant
+} = (0, import_use_descendant.createDescendant)();
+var [MenuProvider, useMenu] = (0, import_utils.createContext)({
+  name: "MenuContext",
+  errorMessage: `useMenu returned is 'undefined'. Seems you forgot to wrap the components in "<Menu />"`
+});
+
+// src/menu-button.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var MenuButton = (0, import_core2.forwardRef)(
+  ({ className, children, as: As, ...rest }, ref) => {
+    const { isOpen, onOpen, onFocusFirstItem, onFocusLastItem } = useMenu();
+    const onKeyDown = (0, import_react2.useCallback)(
+      (ev) => {
+        const actions = {
+          Enter: (0, import_utils2.funcAll)(onOpen, onFocusFirstItem),
+          ArrowDown: (0, import_utils2.funcAll)(onOpen, onFocusFirstItem),
+          ArrowUp: (0, import_utils2.funcAll)(onOpen, onFocusLastItem)
+        };
+        const action = actions[ev.key];
+        if (!action)
+          return;
+        ev.preventDefault();
+        ev.stopPropagation();
+        action();
+      },
+      [onFocusFirstItem, onFocusLastItem, onOpen]
+    );
+    const Component = As || Button;
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_popover2.PopoverTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      Component,
+      {
+        ref,
+        className: (0, import_utils2.cx)("ui-menu-button", className),
+        ...rest,
+        "data-active": (0, import_utils2.dataAttr)(isOpen),
+        "aria-expanded": (0, import_utils2.ariaAttr)(isOpen),
+        onKeyDown: (0, import_utils2.handlerAll)(rest.onKeyDown, onKeyDown),
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.span, { __css: { pointerEvents: "none", flex: "1 1 auto", minW: 0 }, children })
+      }
+    ) });
+  }
+);
+var Button = (0, import_core2.forwardRef)((rest, ref) => {
+  const { styles } = useMenu();
+  const css = {
+    display: "inline-flex",
+    appearance: "none",
+    alignItems: "center",
+    outline: 0,
+    ...styles.button
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.button, { ref, __css: css, ...rest });
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MenuButton
+});

package/dist/menu-button.mjs

@@ -0,0 +1,7 @@
+import {
+  MenuButton
+} from "./chunk-OFZGIB33.mjs";
+import "./chunk-6ALPY7K4.mjs";
+export {
+  MenuButton
+};

package/dist/menu-divider.d.ts

@@ -0,0 +1,7 @@
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { HTMLUIProps } from '@yamada-ui/core';
+
+type MenuDividerProps = HTMLUIProps<'hr'>;
+declare const MenuDivider: _yamada_ui_core.Component<_yamada_ui_core.As, object>;
+
+export { MenuDivider, MenuDividerProps };