@hanwenbo/x-taro-ui 0.0.1

package/lib/components/menu/menu.js

@@ -0,0 +1,547 @@
+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/menu/menu.tsx
+var menu_exports = {};
+__export(menu_exports, {
+  default: () => menu_default
+});
+module.exports = __toCommonJS(menu_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: 16, gap: 6 },
+  small: { minHeight: 32, paddingX: 10, fontSize: 14, iconSize: 16, gap: 8 },
+  middle: { minHeight: 36, paddingX: 12, fontSize: 14, iconSize: 16, gap: 8 },
+  large: { minHeight: 40, paddingX: 12, fontSize: 16, iconSize: 20, gap: 10 }
+};
+function isActivationKey(key) {
+  return key === "Enter" || key === " " || key === "Spacebar";
+}
+var MenuSurface = ({
+  items = [],
+  selectedKeys: controlledSelectedKeys,
+  defaultSelectedKeys,
+  openKeys: controlledOpenKeys,
+  defaultOpenKeys,
+  onOpenChange,
+  onClick,
+  mode = "vertical",
+  accordion = false,
+  size = "middle",
+  bordered = false,
+  classNames: semanticClassNames,
+  styles: semanticStyles,
+  activeKey,
+  defaultActiveKey,
+  expandedKeys,
+  defaultExpandedKeys,
+  variant = "default",
+  showDividers = false,
+  textAlign = "left",
+  emptyText = "暂无菜单项",
+  onChange,
+  onExpandedKeysChange,
+  children,
+  className,
+  style,
+  testID
+}) => {
+  const { theme } = (0, import_theme.useTheme)();
+  const [innerSelectedKeys, setInnerSelectedKeys] = (0, import_react.useState)(
+    () => defaultSelectedKeys ?? (defaultActiveKey ? [defaultActiveKey] : [])
+  );
+  const [innerOpenKeys, setInnerOpenKeys] = (0, import_react.useState)(
+    () => defaultOpenKeys ?? defaultExpandedKeys ?? []
+  );
+  const [focusedKey, setFocusedKey] = (0, import_react.useState)(null);
+  const [hoveredKey, setHoveredKey] = (0, import_react.useState)(null);
+  const [pressedKey, setPressedKey] = (0, import_react.useState)(null);
+  const metrics = sizeMap[size];
+  const typography = (0, import_theme.getListTypographyTokens)(size);
+  const captionTypography = (0, import_theme.getTypographyRole)("caption");
+  const selectedKeys = controlledSelectedKeys ?? (activeKey !== void 0 ? [activeKey] : innerSelectedKeys);
+  const openKeys = controlledOpenKeys ?? expandedKeys ?? innerOpenKeys;
+  const selectionControlled = controlledSelectedKeys !== void 0 || activeKey !== void 0;
+  const openControlled = controlledOpenKeys !== void 0 || expandedKeys !== void 0;
+  const setOpenKeys = (nextKeys) => {
+    if (!openControlled) setInnerOpenKeys(nextKeys);
+    onOpenChange == null ? void 0 : onOpenChange(nextKeys);
+    onExpandedKeysChange == null ? void 0 : onExpandedKeysChange(nextKeys);
+  };
+  const toggleSubmenu = (key) => {
+    const nextKeys = openKeys.includes(key) ? openKeys.filter((itemKey) => itemKey !== key) : accordion ? [key] : [...openKeys, key];
+    setOpenKeys(nextKeys);
+  };
+  const selectItem = (item) => {
+    if (!selectionControlled) setInnerSelectedKeys([item.key]);
+    onClick == null ? void 0 : onClick(item);
+    onChange == null ? void 0 : onChange(item.key, item);
+  };
+  const renderBadge = (badge) => {
+    if (badge === void 0 || badge === null || badge === false) return null;
+    if (import_react.default.isValidElement(badge)) {
+      return /* @__PURE__ */ import_react.default.createElement(
+        import_components.View,
+        {
+          "data-slot": "menu-badge",
+          className: "x-menu__badge",
+          style: { display: "flex", flexShrink: 0 }
+        },
+        badge
+      );
+    }
+    if (typeof badge === "string" || typeof badge === "number") {
+      return /* @__PURE__ */ import_react.default.createElement(
+        import_components.Text,
+        {
+          "data-slot": "menu-badge",
+          className: "x-menu__badge",
+          style: { flexShrink: 0, fontSize: 12, color: theme.colors.foreground }
+        },
+        badge
+      );
+    }
+    const config = badge;
+    if (config.dot) {
+      return /* @__PURE__ */ import_react.default.createElement(
+        import_components.View,
+        {
+          "data-slot": "menu-badge",
+          "data-dot": "true",
+          className: "x-menu__badge x-menu__badge--dot",
+          style: {
+            width: 8,
+            height: 8,
+            flexShrink: 0,
+            borderRadius: 999,
+            backgroundColor: config.color ?? theme.colors.destructive
+          }
+        }
+      );
+    }
+    if (config.content === void 0) return null;
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_components.View,
+      {
+        "data-slot": "menu-badge",
+        className: "x-menu__badge",
+        style: {
+          boxSizing: "border-box",
+          display: "flex",
+          minWidth: 18,
+          height: 18,
+          flexShrink: 0,
+          alignItems: "center",
+          justifyContent: "center",
+          paddingLeft: 5,
+          paddingRight: 5,
+          borderRadius: 999,
+          backgroundColor: config.color ?? theme.colors.primary
+        }
+      },
+      /* @__PURE__ */ import_react.default.createElement(import_components.Text, { style: { fontSize: 10, color: theme.colors["primary-foreground"] } }, config.content)
+    );
+  };
+  const renderItems = (menuItems, depth = 0, parentHasIcon = false, ancestorInteractive = true) => menuItems.map((item, index) => {
+    var _a;
+    const levelIndent = depth * (metrics.iconSize + metrics.gap);
+    const parentIconIndent = parentHasIcon ? metrics.iconSize + metrics.gap : 0;
+    if (item.divider) {
+      return /* @__PURE__ */ import_react.default.createElement(
+        import_components.View,
+        {
+          key: item.key,
+          "data-slot": "menu-divider-wrap",
+          style: { paddingTop: 4, paddingBottom: 4 }
+        },
+        /* @__PURE__ */ import_react.default.createElement(
+          import_components.View,
+          {
+            "data-slot": "menu-divider",
+            className: "x-menu__divider",
+            style: {
+              marginRight: metrics.paddingX,
+              marginLeft: metrics.paddingX + levelIndent + parentIconIndent,
+              borderBottom: `1px solid ${theme.colors.border}`
+            }
+          }
+        )
+      );
+    }
+    if (item.type === "group") {
+      return /* @__PURE__ */ import_react.default.createElement(
+        import_components.View,
+        {
+          key: item.key,
+          "data-slot": "menu-group",
+          className: "x-menu__group",
+          style: {
+            display: "flex",
+            minWidth: 0,
+            flexDirection: "column",
+            marginTop: index === 0 ? 0 : 12
+          }
+        },
+        /* @__PURE__ */ import_react.default.createElement(
+          import_components.View,
+          {
+            "data-slot": "menu-group-label",
+            className: (0, import_utils.classNames)("x-menu__group-label", semanticClassNames == null ? void 0 : semanticClassNames.groupLabel),
+            style: {
+              padding: `${size === "large" ? 8 : size === "middle" ? 6 : 4}px ${metrics.paddingX}px`
+            }
+          },
+          renderText(item.label, {
+            fontSize: size === "mini" ? 10 : size === "small" ? 11 : size === "large" ? 14 : 12,
+            fontWeight: "500",
+            color: theme.colors["muted-foreground"]
+          })
+        ),
+        /* @__PURE__ */ import_react.default.createElement(
+          import_components.View,
+          {
+            "data-slot": "menu-group-content",
+            style: { display: "flex", flexDirection: "column", gap: 4, marginTop: 4 }
+          },
+          renderItems(item.children ?? [], depth, parentHasIcon, ancestorInteractive)
+        )
+      );
+    }
+    const hasChildren = Boolean((_a = item.children) == null ? void 0 : _a.length) || item.type === "submenu";
+    const open = hasChildren && openKeys.includes(item.key);
+    const active = selectedKeys.includes(item.key);
+    const hasIcon = Boolean(item.icon);
+    const interactionDisabled = Boolean(item.disabled) || !ancestorInteractive;
+    const focused = !interactionDisabled && focusedKey === item.key;
+    const hovered = !interactionDisabled && hoveredKey === item.key;
+    const pressed = !interactionDisabled && pressedKey === item.key;
+    const interactionHighlighted = hovered || pressed;
+    const itemBackground = active ? theme.colors.primary : interactionHighlighted ? item.danger ? (0, import_theme.withOpacity)(theme.colors.destructive, 0.1) : theme.colors.accent : variant === "filled" ? theme.colors.muted : "transparent";
+    const itemForeground = item.danger ? theme.colors.destructive : active ? theme.colors["primary-foreground"] : interactionHighlighted ? theme.colors["accent-foreground"] : theme.colors.foreground;
+    const descriptionForeground = active ? theme.colors["primary-foreground"] : interactionHighlighted ? theme.colors["accent-foreground"] : theme.colors["muted-foreground"];
+    const itemClassName = (0, import_utils.classNames)(
+      "x-menu__item",
+      hasChildren && "x-menu__submenu-trigger",
+      active && "x-menu__item--active",
+      item.disabled && "x-menu__item--disabled",
+      item.danger && "x-menu__item--danger",
+      focused && "x-menu__item--focused",
+      hovered && "x-menu__item--hovered",
+      pressed && "x-menu__item--pressed",
+      semanticClassNames == null ? void 0 : semanticClassNames.item,
+      active && (semanticClassNames == null ? void 0 : semanticClassNames.itemActive),
+      item.disabled && (semanticClassNames == null ? void 0 : semanticClassNames.itemDisabled)
+    );
+    const itemStyle = {
+      boxSizing: "border-box",
+      display: "flex",
+      minHeight: metrics.minHeight,
+      flex: mode === "horizontal" ? void 0 : 1,
+      alignItems: "center",
+      gap: metrics.gap,
+      paddingLeft: metrics.paddingX + depth * (metrics.iconSize + metrics.gap),
+      paddingRight: metrics.paddingX,
+      borderRadius: "var(--x-menu-surface-item-radius)",
+      backgroundColor: itemBackground,
+      color: itemForeground,
+      opacity: item.disabled ? 0.5 : pressed ? 0.88 : 1,
+      cursor: item.disabled ? "not-allowed" : "pointer",
+      outline: "none",
+      userSelect: "none",
+      boxShadow: focused ? `0 0 0 2px ${(0, import_theme.withOpacity)(theme.colors.ring, 0.28)}` : "none",
+      transform: pressed ? "scale(0.985)" : "scale(1)",
+      transition: "background-color var(--x-motion-duration-fast) ease, color var(--x-motion-duration-fast) ease, transform var(--x-motion-duration-fast) ease, opacity var(--x-motion-duration-fast) ease",
+      ...semanticStyles == null ? void 0 : semanticStyles.item,
+      ...active ? semanticStyles == null ? void 0 : semanticStyles.itemActive : void 0,
+      ...item.disabled ? semanticStyles == null ? void 0 : semanticStyles.itemDisabled : void 0
+    };
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_components.View,
+      {
+        key: item.key,
+        "data-slot": hasChildren ? "menu-submenu" : "menu-item-host",
+        "data-open": open ? "true" : "false",
+        className: (0, import_utils.classNames)(hasChildren && (semanticClassNames == null ? void 0 : semanticClassNames.submenu)),
+        style: {
+          minWidth: 0,
+          maxWidth: mode === "horizontal" ? 240 : "100%",
+          flexShrink: mode === "horizontal" ? 0 : void 0
+        }
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        import_components.View,
+        {
+          "data-slot": hasChildren ? "menu-submenu-trigger" : "menu-item",
+          "data-key": item.key,
+          "data-active": active ? "true" : "false",
+          "data-disabled": item.disabled ? "true" : "false",
+          "data-focused": focused ? "true" : "false",
+          "data-hovered": hovered ? "true" : "false",
+          "data-pressed": pressed ? "true" : "false",
+          className: itemClassName,
+          ...(0, import_taroProps.resolveTaroAccessibilityProps)("button", textContent(item.label)),
+          "aria-disabled": item.disabled,
+          "aria-current": !hasChildren && active ? "page" : void 0,
+          "aria-expanded": hasChildren ? open : void 0,
+          tabIndex: interactionDisabled ? -1 : 0,
+          style: itemStyle,
+          onBlur: () => {
+            setFocusedKey((current) => current === item.key ? null : current);
+            setPressedKey((current) => current === item.key ? null : current);
+          },
+          onFocus: () => {
+            if (!interactionDisabled) setFocusedKey(item.key);
+          },
+          onKeyDown: (event) => {
+            var _a2;
+            const key = event.key;
+            if (interactionDisabled || !isActivationKey(key)) return;
+            (_a2 = event.preventDefault) == null ? void 0 : _a2.call(event);
+            setPressedKey(item.key);
+          },
+          onKeyUp: (event) => {
+            var _a2;
+            const key = event.key;
+            if (interactionDisabled || !isActivationKey(key)) return;
+            (_a2 = event.preventDefault) == null ? void 0 : _a2.call(event);
+            setPressedKey(null);
+            if (hasChildren) toggleSubmenu(item.key);
+            else selectItem(item);
+          },
+          onClick: interactionDisabled ? void 0 : hasChildren ? () => toggleSubmenu(item.key) : () => selectItem(item),
+          onMouseDown: () => {
+            if (!interactionDisabled) setPressedKey(item.key);
+          },
+          onMouseEnter: () => {
+            if (!interactionDisabled) setHoveredKey(item.key);
+          },
+          onMouseLeave: () => {
+            setHoveredKey((current) => current === item.key ? null : current);
+            setPressedKey((current) => current === item.key ? null : current);
+          },
+          onMouseUp: () => {
+            setPressedKey((current) => current === item.key ? null : current);
+          },
+          onTouchCancel: () => {
+            setPressedKey((current) => current === item.key ? null : current);
+          },
+          onTouchEnd: () => {
+            setPressedKey((current) => current === item.key ? null : current);
+          },
+          onTouchStart: () => {
+            if (!interactionDisabled) setPressedKey(item.key);
+          }
+        },
+        item.icon ? /* @__PURE__ */ import_react.default.createElement(
+          import_components.View,
+          {
+            "data-slot": "menu-icon",
+            className: (0, import_utils.classNames)("x-menu__icon", semanticClassNames == null ? void 0 : semanticClassNames.icon),
+            style: {
+              display: "flex",
+              width: metrics.iconSize,
+              height: metrics.iconSize,
+              flexShrink: 0,
+              alignItems: "center",
+              justifyContent: "center",
+              ...semanticStyles == null ? void 0 : semanticStyles.icon
+            }
+          },
+          item.icon
+        ) : parentHasIcon ? /* @__PURE__ */ import_react.default.createElement(
+          import_components.View,
+          {
+            "data-slot": "menu-icon",
+            "data-placeholder": "true",
+            className: (0, import_utils.classNames)("x-menu__icon", semanticClassNames == null ? void 0 : semanticClassNames.icon),
+            style: { width: metrics.iconSize, height: metrics.iconSize, flexShrink: 0 }
+          }
+        ) : null,
+        /* @__PURE__ */ import_react.default.createElement(
+          import_components.View,
+          {
+            "data-slot": "menu-label",
+            className: (0, import_utils.classNames)("x-menu__label", semanticClassNames == null ? void 0 : semanticClassNames.label),
+            style: {
+              display: "flex",
+              minWidth: 0,
+              flex: 1,
+              flexDirection: "column",
+              alignItems: textAlign === "center" ? "center" : "flex-start",
+              ...semanticStyles == null ? void 0 : semanticStyles.label
+            }
+          },
+          renderText(item.label, {
+            display: "block",
+            width: "100%",
+            maxWidth: "100%",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+            fontSize: typography.titleFontSize,
+            fontWeight: active ? "600" : typography.titleFontWeight,
+            color: itemForeground,
+            textAlign
+          }),
+          item.description !== void 0 ? /* @__PURE__ */ import_react.default.createElement(import_components.View, { style: { width: "100%", minWidth: 0, marginTop: 4, overflow: "hidden" } }, renderText(item.description, {
+            display: "block",
+            width: "100%",
+            maxWidth: "100%",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+            fontSize: captionTypography.fontSize,
+            color: descriptionForeground,
+            textAlign
+          })) : null
+        ),
+        renderBadge(item.badge),
+        item.suffix,
+        hasChildren ? /* @__PURE__ */ import_react.default.createElement(
+          import_components.View,
+          {
+            "data-slot": "menu-chevron",
+            className: "x-menu__chevron",
+            style: {
+              display: "flex",
+              flexShrink: 0,
+              transform: open ? "rotate(90deg)" : "rotate(0deg)",
+              transition: "transform var(--x-motion-duration-emphasis) ease"
+            }
+          },
+          /* @__PURE__ */ import_react.default.createElement(
+            import_icon.Icon,
+            {
+              name: "ChevronRight",
+              size: metrics.iconSize,
+              color: active ? theme.colors["primary-foreground"] : interactionHighlighted ? theme.colors["accent-foreground"] : theme.colors["muted-foreground"]
+            }
+          )
+        ) : null
+      ),
+      showDividers && index < menuItems.length - 1 && !hasChildren ? /* @__PURE__ */ import_react.default.createElement(
+        import_components.View,
+        {
+          "data-slot": "menu-divider",
+          className: "x-menu__divider",
+          style: {
+            marginLeft: metrics.paddingX + levelIndent + parentIconIndent,
+            borderBottom: `1px solid ${theme.colors.border}`
+          }
+        }
+      ) : null,
+      hasChildren && item.children ? /* @__PURE__ */ import_react.default.createElement(
+        import_components.View,
+        {
+          "data-slot": "menu-submenu-content",
+          className: "x-menu__submenu-content",
+          "aria-hidden": !open,
+          style: {
+            display: "flex",
+            maxHeight: open ? 1e3 : 0,
+            overflow: "hidden",
+            opacity: open ? 1 : 0,
+            pointerEvents: open ? "auto" : "none",
+            flexDirection: "column",
+            gap: 4,
+            paddingTop: open ? 4 : 0,
+            paddingBottom: open ? 2 : 0,
+            transition: "max-height var(--x-motion-duration-emphasis) ease, opacity var(--x-motion-duration-emphasis) ease"
+          }
+        },
+        renderItems(
+          item.children,
+          depth + 1,
+          hasIcon || parentHasIcon,
+          ancestorInteractive && open
+        )
+      ) : null
+    );
+  });
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_components.View,
+    {
+      "data-slot": "menu-root",
+      "data-mode": mode,
+      "data-size": size,
+      "data-variant": variant,
+      "data-bordered": bordered ? "true" : "false",
+      "data-testid": testID,
+      className: (0, import_utils.classNames)(
+        "x-menu",
+        `x-menu--${mode}`,
+        `x-menu--${variant}`,
+        `x-menu--${size}`,
+        bordered && "x-menu--bordered",
+        semanticClassNames == null ? void 0 : semanticClassNames.root,
+        className
+      ),
+      style: {
+        boxSizing: "border-box",
+        display: "flex",
+        width: "100%",
+        minWidth: 0,
+        flexDirection: mode === "horizontal" ? "row" : "column",
+        flexWrap: "nowrap",
+        alignItems: mode === "horizontal" ? "center" : "stretch",
+        overflowX: mode === "horizontal" ? "auto" : void 0,
+        gap: 4,
+        paddingTop: variant === "compact" || mode === "horizontal" ? 0 : 8,
+        paddingRight: 0,
+        paddingBottom: variant === "compact" || mode === "horizontal" ? 0 : 8,
+        paddingLeft: 0,
+        border: bordered ? `1px solid ${theme.colors.border}` : "none",
+        borderRadius: bordered ? "var(--x-menu-root-radius)" : 0,
+        backgroundColor: variant === "filled" ? theme.colors.muted : theme.colors.background,
+        ...semanticStyles == null ? void 0 : semanticStyles.root,
+        ...style
+      }
+    },
+    items.length > 0 ? renderItems(items) : children ? children : /* @__PURE__ */ import_react.default.createElement(import_components.View, { "data-slot": "menu-empty", className: "x-menu__empty", style: { padding: 16 } }, renderText(emptyText, {
+      fontSize: typography.titleFontSize,
+      color: theme.colors["muted-foreground"]
+    }))
+  );
+};
+function renderText(content, style) {
+  return typeof content === "string" || typeof content === "number" ? /* @__PURE__ */ import_react.default.createElement(import_components.Text, { style }, content) : content;
+}
+function textContent(content) {
+  return typeof content === "string" || typeof content === "number" ? String(content) : void 0;
+}
+var Menu = ({ theme, ...props }) => {
+  if (theme === void 0) return /* @__PURE__ */ import_react.default.createElement(MenuSurface, { ...props });
+  return /* @__PURE__ */ import_react.default.createElement(import_theme.ThemeProvider, { defaultTheme: theme }, /* @__PURE__ */ import_react.default.createElement(MenuSurface, { ...props }));
+};
+Menu.displayName = "Menu";
+var menu_default = Menu;

package/lib/components/menu/types.d.ts

@@ -0,0 +1,79 @@
+import type { CSSProperties, ReactNode } from 'react';
+import type { ThemeConfig, ThemeMode } from '../../theme/types';
+import type { SizeVariant } from '../../theme/types';
+export interface MenuItemBadge {
+    content?: ReactNode;
+    color?: string;
+    dot?: boolean;
+}
+export interface MenuItem {
+    key: string;
+    label?: ReactNode;
+    description?: ReactNode;
+    icon?: ReactNode;
+    badge?: MenuItemBadge | ReactNode;
+    suffix?: ReactNode;
+    disabled?: boolean;
+    danger?: boolean;
+    divider?: boolean;
+    type?: 'item' | 'group' | 'submenu';
+    children?: MenuItem[];
+    theme?: ThemeMode | ThemeConfig;
+}
+export declare type MenuVariant = 'default' | 'filled' | 'compact';
+export declare type MenuTextAlign = 'left' | 'center';
+export interface MenuClassNames {
+    root?: string;
+    item?: string;
+    itemActive?: string;
+    itemDisabled?: string;
+    icon?: string;
+    label?: string;
+    submenu?: string;
+    groupLabel?: string;
+}
+export interface MenuStyles {
+    root?: CSSProperties;
+    item?: CSSProperties;
+    itemActive?: CSSProperties;
+    itemDisabled?: CSSProperties;
+    icon?: CSSProperties;
+    label?: CSSProperties;
+}
+export interface MenuProps {
+    items?: MenuItem[];
+    selectedKeys?: string[];
+    defaultSelectedKeys?: string[];
+    openKeys?: string[];
+    defaultOpenKeys?: string[];
+    onOpenChange?: (keys: string[]) => void;
+    onClick?: (item: MenuItem) => void;
+    theme?: ThemeMode | ThemeConfig;
+    mode?: 'vertical' | 'horizontal' | 'inline';
+    accordion?: boolean;
+    size?: SizeVariant;
+    bordered?: boolean;
+    classNames?: MenuClassNames;
+    styles?: MenuStyles;
+    /** @deprecated Use selectedKeys. */
+    activeKey?: string;
+    /** @deprecated Use defaultSelectedKeys. */
+    defaultActiveKey?: string;
+    /** @deprecated Use openKeys. */
+    expandedKeys?: string[];
+    /** @deprecated Use defaultOpenKeys. */
+    defaultExpandedKeys?: string[];
+    variant?: MenuVariant;
+    showDividers?: boolean;
+    textAlign?: MenuTextAlign;
+    emptyText?: ReactNode;
+    /** Legacy single-key callback retained for existing x-taro-ui callers. */
+    onChange?: (key: string, item: MenuItem) => void;
+    /** @deprecated Use onOpenChange. */
+    onExpandedKeysChange?: (keys: string[]) => void;
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    testID?: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/lib/components/menu/types.js

@@ -0,0 +1,17 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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/components/menu/types.ts
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);

package/lib/components/menubar/index.d.ts

@@ -0,0 +1,4 @@
+export * from './types';
+export { default as Menubar } from './menubar';
+export { default } from './menubar';
+//# sourceMappingURL=index.d.ts.map