@hanwenbo/x-taro-ui 0.0.1

package/lib/components/menubar/menubar.js

@@ -0,0 +1,800 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/menubar/menubar.tsx
+var menubar_exports = {};
+__export(menubar_exports, {
+  default: () => menubar_default
+});
+module.exports = __toCommonJS(menubar_exports);
+var import_react = __toESM(require("react"));
+var import_components = require("@tarojs/components");
+var import_theme = require("../../theme");
+var import_utils = require("../../utils");
+var import_taroProps = require("../../utils/taroProps");
+var import_icon = require("../icon");
+var sizeMap = {
+  mini: { minHeight: 28, paddingX: 8, fontSize: 12, iconSize: 14, gap: 4, minWidth: 160 },
+  small: { minHeight: 32, paddingX: 10, fontSize: 14, iconSize: 16, gap: 6, minWidth: 160 },
+  middle: { minHeight: 36, paddingX: 12, fontSize: 14, iconSize: 16, gap: 6, minWidth: 160 },
+  large: { minHeight: 40, paddingX: 14, fontSize: 16, iconSize: 18, gap: 8, minWidth: 160 }
+};
+function normalizeVariant(variant) {
+  if (variant === "filled") return "pills";
+  if (variant === "underlined") return "tabs";
+  return variant;
+}
+function isActivationKey(key) {
+  return key === "Enter" || key === " " || key === "Spacebar";
+}
+function nodeText(node) {
+  if (typeof node === "string" || typeof node === "number") return String(node);
+  return void 0;
+}
+function renderNode(node, style) {
+  if (typeof node === "string" || typeof node === "number") {
+    return /* @__PURE__ */ import_react.default.createElement(import_components.Text, { style }, node);
+  }
+  return node;
+}
+function getItemActions(item) {
+  var _a;
+  return ((_a = item.actions) == null ? void 0 : _a.length) ? item.actions : item.children ?? [];
+}
+function containsSelected(action, selectedKeys) {
+  var _a;
+  return selectedKeys.includes(action.key) || Boolean((_a = action.children) == null ? void 0 : _a.some((child) => containsSelected(child, selectedKeys)));
+}
+function getSubmenuPlacementStyle(placement) {
+  const opensAbove = placement.startsWith("top");
+  const alignsRight = placement === "right" || placement.endsWith("right");
+  return {
+    top: opensAbove ? void 0 : "calc(100% + 4px)",
+    bottom: opensAbove ? "calc(100% + 4px)" : void 0,
+    left: alignsRight ? void 0 : 0,
+    right: alignsRight ? 0 : void 0,
+    transformOrigin: `${opensAbove ? "bottom" : "top"} ${alignsRight ? "right" : "left"}`
+  };
+}
+function getEntryRole(type) {
+  if (type === "checkbox") return "menuitemcheckbox";
+  if (type === "radio") return "menuitemradio";
+  return "menuitem";
+}
+var Menubar = ({
+  items = [],
+  selectedKeys: controlledSelectedKeys,
+  defaultSelectedKeys,
+  activeKey,
+  defaultActiveKey,
+  placement = "bottom-left",
+  size = "middle",
+  variant = "default",
+  equalWidth = false,
+  emptyText = "暂无菜单配置",
+  onSelect,
+  onChange,
+  children,
+  className,
+  style
+}) => {
+  const { theme } = (0, import_theme.useTheme)();
+  const [innerSelectedKeys, setInnerSelectedKeys] = (0, import_react.useState)(
+    () => defaultSelectedKeys ?? (defaultActiveKey ? [defaultActiveKey] : [])
+  );
+  const [openKey, setOpenKey] = (0, import_react.useState)();
+  const [openActionKey, setOpenActionKey] = (0, import_react.useState)();
+  const [focusedEntry, setFocusedEntry] = (0, import_react.useState)();
+  const [hoveredEntry, setHoveredEntry] = (0, import_react.useState)();
+  const [pressedEntry, setPressedEntry] = (0, import_react.useState)();
+  const metrics = sizeMap[size];
+  const resolvedVariant = normalizeVariant(variant);
+  const selectedKeys = controlledSelectedKeys ?? (activeKey === void 0 ? innerSelectedKeys : [activeKey]);
+  const selectionControlled = controlledSelectedKeys !== void 0 || activeKey !== void 0;
+  const reactId = (0, import_react.useId)();
+  const safeId = (0, import_react.useMemo)(() => reactId.replace(/[^a-zA-Z0-9_-]/g, ""), [reactId]);
+  const rootId = `x-menubar-root-${safeId}`;
+  const hasDocument = process.env.TARO_ENV !== "weapp" && Boolean(globalThis["document"]);
+  const focusSelector = (selector) => {
+    var _a, _b;
+    const ownerDocument = globalThis["document"];
+    (_b = (_a = ownerDocument == null ? void 0 : ownerDocument.querySelector(selector)) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
+  };
+  const focusTopItem = (index, direction = 1) => {
+    var _a;
+    let nextIndex = (index + items.length) % items.length;
+    let attempts = 0;
+    while (((_a = items[nextIndex]) == null ? void 0 : _a.disabled) && attempts < items.length) {
+      nextIndex = (nextIndex + direction + items.length) % items.length;
+      attempts += 1;
+    }
+    focusSelector(`#${rootId} [data-slot="menubar-item"][data-index="${nextIndex}"]`);
+  };
+  const focusAction = (itemIndex, actionIndex, child = false, direction = 1) => {
+    var _a;
+    const slot = child ? "menubar-nested-item" : "menubar-submenu-item";
+    const ownerDocument = globalThis["document"];
+    const candidates = Array.from(
+      ownerDocument.querySelectorAll(
+        `#${rootId} [data-item-index="${itemIndex}"][data-slot="${slot}"]`
+      )
+    ).filter(
+      (element) => element.getAttribute("data-disabled") !== "true" && element.tabIndex >= 0
+    );
+    if (!candidates.length) return;
+    const exact = candidates.find(
+      (element) => Number(element.getAttribute("data-action-index")) === actionIndex
+    );
+    const directionalCandidates = direction > 0 ? candidates : [...candidates].reverse();
+    const next = exact ?? directionalCandidates.find((element) => {
+      const candidateIndex = Number(element.getAttribute("data-action-index"));
+      return direction > 0 ? candidateIndex > actionIndex : candidateIndex < actionIndex;
+    }) ?? directionalCandidates[0];
+    (_a = next == null ? void 0 : next.focus) == null ? void 0 : _a.call(next);
+  };
+  const updateUncontrolledSelection = (key) => {
+    if (!selectionControlled) setInnerSelectedKeys([key]);
+  };
+  const closeMenus = () => {
+    setOpenKey(void 0);
+    setOpenActionKey(void 0);
+    setPressedEntry(void 0);
+  };
+  const selectTopItem = (item) => {
+    updateUncontrolledSelection(item.key);
+    onSelect == null ? void 0 : onSelect(item.key, item);
+    onChange == null ? void 0 : onChange(item.key, item);
+    const actions = getItemActions(item);
+    if (actions.length) {
+      setOpenKey((current) => current === item.key ? void 0 : item.key);
+      setOpenActionKey(void 0);
+      return;
+    }
+    closeMenus();
+  };
+  const selectAction = (item, action) => {
+    updateUncontrolledSelection(action.key);
+    onSelect == null ? void 0 : onSelect(action.key, action);
+    onChange == null ? void 0 : onChange(item.key, item, action);
+    closeMenus();
+  };
+  (0, import_react.useEffect)(() => {
+    if (!openKey || !hasDocument) {
+      return void 0;
+    }
+    const ownerDocument = globalThis["document"];
+    const closeOnOutside = (event) => {
+      const root = ownerDocument.getElementById(rootId);
+      if (!root.contains(event.target)) closeMenus();
+    };
+    const closeOnEscape = (event) => {
+      if (event.key !== "Escape") return;
+      const itemIndex = items.findIndex((item) => item.key === openKey);
+      closeMenus();
+      if (itemIndex >= 0) focusTopItem(itemIndex);
+    };
+    ownerDocument.addEventListener("mousedown", closeOnOutside);
+    ownerDocument.addEventListener("touchstart", closeOnOutside);
+    ownerDocument.addEventListener("keydown", closeOnEscape);
+    return () => {
+      ownerDocument.removeEventListener("mousedown", closeOnOutside);
+      ownerDocument.removeEventListener("touchstart", closeOnOutside);
+      ownerDocument.removeEventListener("keydown", closeOnEscape);
+    };
+  });
+  const interactionProps = (entryId, disabled, activate, onArrowKey) => ({
+    onBlur: () => {
+      setFocusedEntry((current) => current === entryId ? void 0 : current);
+      setPressedEntry((current) => current === entryId ? void 0 : current);
+    },
+    onFocus: () => {
+      if (!disabled) setFocusedEntry(entryId);
+    },
+    onKeyDown: (event) => {
+      var _a;
+      const keyboardEvent = event;
+      if (disabled) return;
+      if (isActivationKey(keyboardEvent.key)) {
+        (_a = keyboardEvent.preventDefault) == null ? void 0 : _a.call(keyboardEvent);
+        setPressedEntry(entryId);
+        return;
+      }
+      onArrowKey(keyboardEvent.key);
+    },
+    onKeyUp: (event) => {
+      var _a;
+      const keyboardEvent = event;
+      if (disabled || !isActivationKey(keyboardEvent.key)) return;
+      (_a = keyboardEvent.preventDefault) == null ? void 0 : _a.call(keyboardEvent);
+      setPressedEntry(void 0);
+      activate();
+    },
+    onClick: disabled ? void 0 : activate,
+    onMouseDown: () => {
+      if (!disabled) setPressedEntry(entryId);
+    },
+    onMouseEnter: () => {
+      if (!disabled) setHoveredEntry(entryId);
+    },
+    onMouseLeave: () => {
+      setHoveredEntry((current) => current === entryId ? void 0 : current);
+      setPressedEntry((current) => current === entryId ? void 0 : current);
+    },
+    onMouseUp: () => setPressedEntry((current) => current === entryId ? void 0 : current),
+    onTouchCancel: () => setPressedEntry((current) => current === entryId ? void 0 : current),
+    onTouchEnd: () => setPressedEntry((current) => current === entryId ? void 0 : current),
+    onTouchStart: () => {
+      if (!disabled) setPressedEntry(entryId);
+    }
+  });
+  const interactionStyle = (entryId, disabled, danger, active) => {
+    const focused = !disabled && focusedEntry === entryId;
+    const hovered = !disabled && hoveredEntry === entryId;
+    const pressed = !disabled && pressedEntry === entryId;
+    let backgroundColor = active ? theme.colors.accent : "transparent";
+    if (hovered || pressed) {
+      backgroundColor = danger ? (0, import_theme.withOpacity)(theme.colors.destructive, 0.1) : theme.colors.accent;
+    }
+    return {
+      cursor: disabled ? "not-allowed" : "pointer",
+      outline: "none",
+      userSelect: "none",
+      backgroundColor,
+      boxShadow: focused ? `0 0 0 2px ${(0, import_theme.withOpacity)(theme.colors.ring, 0.28)}` : "none",
+      opacity: disabled ? 0.5 : pressed ? 0.86 : 1,
+      transform: pressed ? "scale(0.985)" : "scale(1)",
+      transition: "background-color var(--x-duration-fast) var(--x-easing-standard), color var(--x-duration-fast) var(--x-easing-standard), box-shadow var(--x-duration-fast) var(--x-easing-standard), transform var(--x-duration-fast) var(--x-easing-standard), opacity var(--x-duration-fast) var(--x-easing-standard)"
+    };
+  };
+  const renderIndicator = (action) => {
+    if (action.type !== "checkbox" && action.type !== "radio") return null;
+    const indicatorName = action.checked === "indeterminate" ? "Minus" : action.checked ? action.type === "radio" ? "Circle" : "Check" : void 0;
+    const indicatorColor = action.danger ? theme.colors.destructive : theme.colors.primary;
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_components.View,
+      {
+        "data-slot": "menubar-indicator",
+        style: {
+          display: "flex",
+          width: metrics.iconSize,
+          height: metrics.iconSize,
+          flexShrink: 0,
+          alignItems: "center",
+          justifyContent: "center",
+          color: indicatorColor
+        }
+      },
+      indicatorName ? /* @__PURE__ */ import_react.default.createElement(
+        import_icon.Icon,
+        {
+          name: indicatorName,
+          size: indicatorName === "Circle" ? Math.max(6, metrics.iconSize - 8) : metrics.iconSize,
+          color: indicatorColor,
+          fill: indicatorName === "Circle" ? "currentColor" : "none"
+        }
+      ) : null
+    );
+  };
+  const renderAction = (item, action, itemIndex, actionIndex) => {
+    if (action.type === "separator") {
+      return /* @__PURE__ */ import_react.default.createElement(
+        import_components.View,
+        {
+          key: action.key,
+          "data-slot": "menubar-separator",
+          style: {
+            marginTop: 4,
+            marginBottom: 4,
+            borderBottom: `1px solid ${theme.colors.border}`
+          }
+        }
+      );
+    }
+    if (action.type === "label") {
+      return /* @__PURE__ */ import_react.default.createElement(
+        import_components.View,
+        {
+          key: action.key,
+          "data-slot": "menubar-label",
+          style: { padding: `4px ${metrics.paddingX}px` }
+        },
+        renderNode(action.label, {
+          fontSize: Math.max(10, metrics.fontSize - 2),
+          fontWeight: "500",
+          color: theme.colors["muted-foreground"]
+        })
+      );
+    }
+    const entryId = `action:${item.key}:${action.key}`;
+    const nestedActions = action.children ?? [];
+    const hasNestedActions = nestedActions.length > 0;
+    const nestedOpen = hasNestedActions && openActionKey === action.key;
+    const active = containsSelected(action, selectedKeys) || nestedOpen;
+    const role = getEntryRole(action.type);
+    const activate = () => {
+      if (hasNestedActions) {
+        setOpenActionKey((current) => current === action.key ? void 0 : action.key);
+        return;
+      }
+      selectAction(item, action);
+    };
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_components.View,
+      {
+        key: action.key,
+        "data-slot": "menubar-action-host",
+        style: { position: "relative" },
+        onMouseLeave: () => {
+          if (hasNestedActions)
+            setOpenActionKey((current) => current === action.key ? void 0 : current);
+        }
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        import_components.View,
+        {
+          "data-slot": "menubar-submenu-item",
+          "data-item-index": itemIndex,
+          "data-action-index": actionIndex,
+          "data-active": active ? "true" : "false",
+          "data-disabled": action.disabled ? "true" : "false",
+          "data-danger": action.danger ? "true" : "false",
+          "data-focused": focusedEntry === entryId ? "true" : "false",
+          "data-hovered": hoveredEntry === entryId ? "true" : "false",
+          "data-pressed": pressedEntry === entryId ? "true" : "false",
+          "data-checked": action.checked === void 0 ? void 0 : String(action.checked),
+          ...(0, import_taroProps.resolveTaroAccessibilityProps)(role, nodeText(action.label)),
+          "aria-checked": action.type === "checkbox" || action.type === "radio" ? action.checked : void 0,
+          "aria-disabled": action.disabled,
+          "aria-expanded": hasNestedActions ? nestedOpen : void 0,
+          "aria-haspopup": hasNestedActions ? "menu" : void 0,
+          tabIndex: action.disabled || !openKey ? -1 : 0,
+          className: (0, import_utils.classNames)(
+            "x-menubar__submenu-item",
+            active && "x-menubar__submenu-item--active",
+            action.disabled && "x-menubar__submenu-item--disabled",
+            action.danger && "x-menubar__submenu-item--danger"
+          ),
+          style: {
+            boxSizing: "border-box",
+            display: "flex",
+            minHeight: metrics.minHeight,
+            alignItems: "center",
+            gap: metrics.gap,
+            paddingLeft: metrics.paddingX,
+            paddingRight: metrics.paddingX,
+            borderRadius: "var(--x-menu-surface-item-radius)",
+            color: action.danger ? theme.colors.destructive : active ? theme.colors["accent-foreground"] : theme.colors["popover-foreground"],
+            ...interactionStyle(entryId, Boolean(action.disabled), Boolean(action.danger), active)
+          },
+          ...interactionProps(entryId, Boolean(action.disabled), activate, (key) => {
+            if (key === "ArrowDown") focusAction(itemIndex, actionIndex + 1, false, 1);
+            if (key === "ArrowUp") focusAction(itemIndex, actionIndex - 1, false, -1);
+            if (key === "ArrowRight" && hasNestedActions) {
+              setOpenActionKey(action.key);
+              globalThis.setTimeout(() => focusAction(itemIndex, 0, true), 0);
+            }
+            if (key === "Escape" || key === "ArrowLeft") setOpenActionKey(void 0);
+          }),
+          onMouseEnter: () => {
+            if (!action.disabled) {
+              setHoveredEntry(entryId);
+              if (hasNestedActions) setOpenActionKey(action.key);
+            }
+          }
+        },
+        renderIndicator(action),
+        action.icon ? /* @__PURE__ */ import_react.default.createElement(
+          import_components.View,
+          {
+            "data-slot": "menubar-icon",
+            style: {
+              display: "flex",
+              width: metrics.iconSize,
+              height: metrics.iconSize,
+              flexShrink: 0,
+              alignItems: "center",
+              justifyContent: "center"
+            }
+          },
+          action.icon
+        ) : null,
+        /* @__PURE__ */ import_react.default.createElement(import_components.View, { style: { display: "flex", minWidth: 0, flex: 1, flexDirection: "column" } }, renderNode(action.label, {
+          display: "block",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap",
+          fontSize: metrics.fontSize,
+          color: action.danger ? theme.colors.destructive : active ? theme.colors["accent-foreground"] : theme.colors["popover-foreground"]
+        }), action.description !== void 0 && action.description !== null ? /* @__PURE__ */ import_react.default.createElement(import_components.View, { style: { marginTop: 2 } }, renderNode(action.description, {
+          display: "block",
+          fontSize: Math.max(10, metrics.fontSize - 3),
+          color: theme.colors["muted-foreground"]
+        })) : null),
+        action.shortcut !== void 0 && action.shortcut !== null ? /* @__PURE__ */ import_react.default.createElement(
+          import_components.View,
+          {
+            "data-slot": "menubar-shortcut",
+            style: {
+              flexShrink: 0,
+              paddingLeft: metrics.gap,
+              color: theme.colors["muted-foreground"]
+            }
+          },
+          action.shortcut
+        ) : null,
+        hasNestedActions ? /* @__PURE__ */ import_react.default.createElement(
+          import_icon.Icon,
+          {
+            name: "ChevronRight",
+            size: metrics.iconSize,
+            color: theme.colors["muted-foreground"]
+          }
+        ) : null
+      ),
+      hasNestedActions ? /* @__PURE__ */ import_react.default.createElement(
+        import_components.View,
+        {
+          "data-slot": "menubar-nested-submenu",
+          "data-open": nestedOpen ? "true" : "false",
+          "data-item-index": itemIndex,
+          ...(0, import_taroProps.resolveTaroAccessibilityProps)("menu", `${nodeText(action.label) ?? "操作"}子菜单`),
+          "aria-hidden": !nestedOpen,
+          style: {
+            position: "absolute",
+            top: -4,
+            left: "calc(100% + 6px)",
+            zIndex: 1102,
+            boxSizing: "border-box",
+            minWidth: metrics.minWidth,
+            maxWidth: "calc(100vw - 32px)",
+            padding: 4,
+            pointerEvents: nestedOpen ? "auto" : "none",
+            visibility: nestedOpen ? "visible" : "hidden",
+            opacity: nestedOpen ? 1 : 0,
+            border: `1px solid ${theme.colors.border}`,
+            borderRadius: "var(--x-menubar-submenu-radius)",
+            backgroundColor: theme.colors.popover,
+            boxShadow: "var(--x-menubar-submenu-shadow)",
+            transform: nestedOpen ? "translateX(0) scale(1)" : "translateX(-4px) scale(0.98)",
+            transformOrigin: "top left",
+            transition: nestedOpen ? "opacity var(--x-duration-overlayEnter) var(--x-easing-overlayEnter), transform var(--x-duration-overlayEnter) var(--x-easing-overlayEnter), visibility 0ms linear" : "opacity var(--x-duration-overlayExit) var(--x-easing-overlayExit), transform var(--x-duration-overlayExit) var(--x-easing-overlayExit), visibility 0ms linear var(--x-duration-overlayExit)"
+          }
+        },
+        nestedActions.map((child, childIndex) => {
+          const childId = `child:${item.key}:${action.key}:${child.key}`;
+          const childActive = selectedKeys.includes(child.key);
+          return /* @__PURE__ */ import_react.default.createElement(
+            import_components.View,
+            {
+              key: child.key,
+              "data-slot": "menubar-nested-item",
+              "data-item-index": itemIndex,
+              "data-action-index": childIndex,
+              "data-active": childActive ? "true" : "false",
+              "data-disabled": child.disabled ? "true" : "false",
+              ...(0, import_taroProps.resolveTaroAccessibilityProps)(
+                getEntryRole(child.type),
+                nodeText(child.label)
+              ),
+              "aria-checked": child.type === "checkbox" || child.type === "radio" ? child.checked : void 0,
+              "aria-disabled": child.disabled,
+              tabIndex: child.disabled || !nestedOpen ? -1 : 0,
+              style: {
+                boxSizing: "border-box",
+                display: "flex",
+                minHeight: metrics.minHeight,
+                alignItems: "center",
+                gap: metrics.gap,
+                paddingLeft: metrics.paddingX,
+                paddingRight: metrics.paddingX,
+                borderRadius: "var(--x-menu-surface-item-radius)",
+                ...interactionStyle(
+                  childId,
+                  Boolean(child.disabled),
+                  Boolean(child.danger),
+                  childActive
+                )
+              },
+              ...interactionProps(
+                childId,
+                Boolean(child.disabled),
+                () => selectAction(item, child),
+                (key) => {
+                  if (key === "ArrowDown") focusAction(itemIndex, childIndex + 1, true, 1);
+                  if (key === "ArrowUp") focusAction(itemIndex, childIndex - 1, true, -1);
+                  if (key === "Escape" || key === "ArrowLeft") {
+                    setOpenActionKey(void 0);
+                    focusAction(itemIndex, actionIndex);
+                  }
+                }
+              )
+            },
+            renderIndicator(child),
+            child.icon ? /* @__PURE__ */ import_react.default.createElement(
+              import_components.View,
+              {
+                "data-slot": "menubar-icon",
+                style: {
+                  display: "flex",
+                  width: metrics.iconSize,
+                  height: metrics.iconSize,
+                  flexShrink: 0,
+                  alignItems: "center",
+                  justifyContent: "center"
+                }
+              },
+              child.icon
+            ) : null,
+            /* @__PURE__ */ import_react.default.createElement(import_components.View, { style: { display: "flex", minWidth: 0, flex: 1, flexDirection: "column" } }, renderNode(child.label, {
+              display: "block",
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap",
+              fontSize: metrics.fontSize,
+              color: child.danger ? theme.colors.destructive : theme.colors["popover-foreground"]
+            }), child.description !== void 0 && child.description !== null ? /* @__PURE__ */ import_react.default.createElement(import_components.View, { style: { marginTop: 2 } }, renderNode(child.description, {
+              display: "block",
+              fontSize: Math.max(10, metrics.fontSize - 3),
+              color: theme.colors["muted-foreground"]
+            })) : null),
+            child.shortcut !== void 0 && child.shortcut !== null ? /* @__PURE__ */ import_react.default.createElement(
+              import_components.View,
+              {
+                "data-slot": "menubar-shortcut",
+                style: { flexShrink: 0, paddingLeft: metrics.gap }
+              },
+              child.shortcut
+            ) : null
+          );
+        })
+      ) : null
+    );
+  };
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_components.View,
+    {
+      id: rootId,
+      "data-slot": "menubar",
+      "data-size": size,
+      "data-variant": variant,
+      "data-resolved-variant": resolvedVariant,
+      "data-placement": placement,
+      ...(0, import_taroProps.resolveTaroAccessibilityProps)("menubar", "菜单栏"),
+      className: (0, import_utils.classNames)(
+        "x-menubar",
+        `x-menubar--${resolvedVariant}`,
+        `x-menubar--${size}`,
+        equalWidth && "x-menubar--equal",
+        className
+      ),
+      style: {
+        position: "relative",
+        zIndex: openKey ? 1100 : void 0,
+        boxSizing: "border-box",
+        display: "flex",
+        minHeight: metrics.minHeight,
+        maxWidth: "100%",
+        flexDirection: "row",
+        alignItems: "stretch",
+        gap: resolvedVariant === "pills" ? 4 : 0,
+        paddingRight: metrics.paddingX,
+        paddingBottom: resolvedVariant === "pills" ? 4 : 0,
+        paddingLeft: metrics.paddingX,
+        overflowX: openKey ? "visible" : "auto",
+        overflowY: "visible",
+        borderBottom: resolvedVariant === "pills" ? "none" : `1px solid ${theme.colors.border}`,
+        backgroundColor: theme.colors.card,
+        ...style
+      }
+    },
+    openKey && !hasDocument ? /* @__PURE__ */ import_react.default.createElement(
+      import_components.View,
+      {
+        "data-slot": "menubar-backdrop",
+        catchMove: true,
+        onClick: closeMenus,
+        style: {
+          position: "fixed",
+          top: 0,
+          right: 0,
+          bottom: 0,
+          left: 0,
+          zIndex: 1099,
+          backgroundColor: "transparent"
+        }
+      }
+    ) : null,
+    items.length === 0 ? children || /* @__PURE__ */ import_react.default.createElement(import_components.View, { "data-slot": "menubar-empty", style: { padding: metrics.paddingX } }, renderNode(emptyText, {
+      fontSize: metrics.fontSize,
+      color: theme.colors["muted-foreground"]
+    })) : items.map((item, itemIndex) => {
+      const actions = getItemActions(item);
+      const hasActions = actions.length > 0;
+      const isOpen = item.key === openKey;
+      const active = selectedKeys.includes(item.key) || actions.some((action) => containsSelected(action, selectedKeys)) || isOpen;
+      const entryId = `item:${item.key}`;
+      let triggerBackground = "transparent";
+      if (active && resolvedVariant !== "default") triggerBackground = theme.colors.accent;
+      if (hoveredEntry === entryId || pressedEntry === entryId) {
+        triggerBackground = theme.colors.accent;
+      }
+      return /* @__PURE__ */ import_react.default.createElement(
+        import_components.View,
+        {
+          key: item.key,
+          "data-slot": "menubar-item-host",
+          style: {
+            position: "relative",
+            zIndex: 1100,
+            minWidth: 0,
+            maxWidth: equalWidth ? void 0 : 220,
+            flex: equalWidth ? 1 : void 0,
+            flexShrink: equalWidth ? 1 : 0
+          }
+        },
+        /* @__PURE__ */ import_react.default.createElement(
+          import_components.View,
+          {
+            "data-slot": "menubar-item",
+            "data-index": itemIndex,
+            "data-key": item.key,
+            "data-active": active ? "true" : "false",
+            "data-open": isOpen ? "true" : "false",
+            "data-disabled": item.disabled ? "true" : "false",
+            "data-focused": focusedEntry === entryId ? "true" : "false",
+            "data-hovered": hoveredEntry === entryId ? "true" : "false",
+            "data-pressed": pressedEntry === entryId ? "true" : "false",
+            ...(0, import_taroProps.resolveTaroAccessibilityProps)("menuitem", nodeText(item.label)),
+            "aria-controls": hasActions ? `x-menubar-submenu-${safeId}-${itemIndex}` : void 0,
+            "aria-disabled": item.disabled,
+            "aria-expanded": hasActions ? isOpen : void 0,
+            "aria-haspopup": hasActions ? "menu" : void 0,
+            tabIndex: item.disabled ? -1 : 0,
+            className: (0, import_utils.classNames)(
+              "x-menubar__item",
+              active && "x-menubar__item--active",
+              isOpen && "x-menubar__item--open",
+              item.disabled && "x-menubar__item--disabled"
+            ),
+            style: {
+              ...interactionStyle(entryId, Boolean(item.disabled), false, false),
+              boxSizing: "border-box",
+              display: "flex",
+              width: equalWidth ? "100%" : void 0,
+              minHeight: metrics.minHeight,
+              alignItems: "center",
+              justifyContent: "center",
+              gap: metrics.gap,
+              paddingLeft: metrics.paddingX,
+              paddingRight: metrics.paddingX,
+              overflow: "hidden",
+              borderBottom: resolvedVariant === "pills" ? "none" : `2px solid ${active ? theme.colors.primary : "transparent"}`,
+              borderRadius: resolvedVariant === "pills" ? 999 : resolvedVariant === "tabs" ? "var(--x-menubar-trigger-radius) var(--x-menubar-trigger-radius) 0 0" : "var(--x-menubar-trigger-radius)",
+              backgroundColor: triggerBackground,
+              color: active ? theme.colors.primary : theme.colors.foreground
+            },
+            ...interactionProps(
+              entryId,
+              Boolean(item.disabled),
+              () => selectTopItem(item),
+              (key) => {
+                if (key === "ArrowRight") focusTopItem(itemIndex + 1, 1);
+                if (key === "ArrowLeft") focusTopItem(itemIndex - 1, -1);
+                if (key === "ArrowDown" && hasActions) {
+                  if (!isOpen) selectTopItem(item);
+                  globalThis.setTimeout(() => focusAction(itemIndex, 0), 0);
+                }
+                if (key === "Escape") closeMenus();
+              }
+            )
+          },
+          item.icon ? /* @__PURE__ */ import_react.default.createElement(
+            import_components.View,
+            {
+              "data-slot": "menubar-icon",
+              style: {
+                display: "flex",
+                width: metrics.iconSize,
+                height: metrics.iconSize,
+                flexShrink: 0,
+                alignItems: "center",
+                justifyContent: "center"
+              }
+            },
+            item.icon
+          ) : null,
+          /* @__PURE__ */ import_react.default.createElement(
+            import_components.View,
+            {
+              "data-slot": "menubar-item-label",
+              style: { minWidth: 0, overflow: "hidden", textOverflow: "ellipsis" }
+            },
+            renderNode(item.label, {
+              display: "block",
+              maxWidth: "100%",
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap",
+              fontSize: metrics.fontSize,
+              fontWeight: "500",
+              color: active ? theme.colors.primary : theme.colors.foreground
+            })
+          ),
+          item.badge !== void 0 && item.badge !== null && item.badge !== false ? /* @__PURE__ */ import_react.default.createElement(import_components.View, { "data-slot": "menubar-badge", style: { display: "flex", flexShrink: 0 } }, item.badge) : null,
+          hasActions ? /* @__PURE__ */ import_react.default.createElement(
+            import_icon.Icon,
+            {
+              name: isOpen ? "ChevronUp" : "ChevronDown",
+              size: metrics.iconSize,
+              color: active ? theme.colors.primary : theme.colors["muted-foreground"]
+            }
+          ) : null
+        ),
+        hasActions ? /* @__PURE__ */ import_react.default.createElement(
+          import_components.View,
+          {
+            id: `x-menubar-submenu-${safeId}-${itemIndex}`,
+            "data-slot": "menubar-submenu",
+            "data-open": isOpen ? "true" : "false",
+            "data-item-index": itemIndex,
+            ...(0, import_taroProps.resolveTaroAccessibilityProps)(
+              "menu",
+              `${nodeText(item.label) ?? "菜单"}子菜单`
+            ),
+            "aria-hidden": !isOpen,
+            style: {
+              position: "absolute",
+              zIndex: 1101,
+              boxSizing: "border-box",
+              minWidth: metrics.minWidth,
+              maxWidth: "calc(100vw - 32px)",
+              padding: 4,
+              overflow: "visible",
+              pointerEvents: isOpen ? "auto" : "none",
+              visibility: isOpen ? "visible" : "hidden",
+              opacity: isOpen ? 1 : 0,
+              border: `1px solid ${theme.colors.border}`,
+              borderRadius: "var(--x-menubar-submenu-radius)",
+              backgroundColor: theme.colors.popover,
+              color: theme.colors["popover-foreground"],
+              boxShadow: "var(--x-menubar-submenu-shadow)",
+              transform: isOpen ? "translateY(0) scale(1)" : "translateY(-4px) scale(0.98)",
+              transition: isOpen ? "opacity var(--x-duration-overlayEnter) var(--x-easing-overlayEnter), transform var(--x-duration-overlayEnter) var(--x-easing-overlayEnter), visibility 0ms linear" : "opacity var(--x-duration-overlayExit) var(--x-easing-overlayExit), transform var(--x-duration-overlayExit) var(--x-easing-overlayExit), visibility 0ms linear var(--x-duration-overlayExit)",
+              ...getSubmenuPlacementStyle(placement)
+            }
+          },
+          actions.map(
+            (action, actionIndex) => renderAction(item, action, itemIndex, actionIndex)
+          )
+        ) : null
+      );
+    })
+  );
+};
+Menubar.displayName = "Menubar";
+var menubar_default = Menubar;