@hanwenbo/x-taro-ui 0.0.1

package/es/components/masonryList/types.d.ts

@@ -0,0 +1,65 @@
+import type { CSSProperties, ReactNode } from 'react';
+export declare type MasonryListVariant = 'plain' | 'card' | 'outline';
+export interface MasonryListRenderItemInfo<T> {
+    item: T;
+    index: number;
+}
+export declare type MasonryListRenderItem<T> = ((info: MasonryListRenderItemInfo<T>) => ReactNode) | ((item: T, index: number) => ReactNode);
+export interface MasonryListRef<T = unknown> {
+    /** Reset the local rendered snapshot from the latest data/items prop and call onRefresh. */
+    refresh: () => void;
+    loadMore: () => void;
+    scrollToOffset: (params: {
+        offset: number;
+        animated?: boolean;
+    }) => void;
+    scrollToTop: (animated?: boolean) => void;
+    scrollToEnd: (animated?: boolean) => void;
+    getData: () => T[];
+    /** Mutates the local rendered snapshot; the next data/items prop change replaces it. */
+    updateItem: (updateFn: (data: T[]) => T[]) => void;
+    /** Mutates the local rendered snapshot and reports it through onDataChange. */
+    removeItem: (key: string) => void;
+    listLength: () => number;
+}
+export interface MasonryListProps<T = unknown> {
+    data?: T[];
+    /** @deprecated Use data. */
+    items?: T[];
+    /** Canonical renderer receives { item, index }; the legacy two-argument form remains supported. */
+    renderItem?: MasonryListRenderItem<T>;
+    keyExtractor?: (item: T, index: number) => string;
+    /** @deprecated Use numColumns. */
+    columns?: number;
+    numColumns?: number;
+    columnGap?: number | string;
+    itemGap?: number | string;
+    loadingComponent?: ReactNode;
+    emptyComponent?: ReactNode;
+    hasMore?: boolean;
+    onEndReached?: () => void;
+    onEndReachedThreshold?: number;
+    horizontal?: boolean;
+    itemHeight?: number | string;
+    /** Compatibility gap alias; canonical columnGap and itemGap remain independent. */
+    gap?: number | string;
+    variant?: MasonryListVariant;
+    estimatedHeight?: (item: T, index: number) => number;
+    loading?: boolean;
+    loadingText?: ReactNode;
+    emptyText?: ReactNode;
+    header?: ReactNode;
+    footer?: ReactNode;
+    itemStyle?: CSSProperties;
+    getItemStyle?: (item: T, index: number) => CSSProperties | undefined;
+    onRefresh?: () => void;
+    onDataChange?: (data: T[]) => void;
+    height?: number | string;
+    showScrollbar?: boolean;
+    contentContainerStyle?: CSSProperties;
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    testID?: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/es/components/masonryList/types.js

@@ -0,0 +1 @@
+export {};

package/es/components/menu/index.d.ts

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

package/es/components/menu/index.js

@@ -0,0 +1,3 @@
+export * from "./types";
+export { default as Menu } from "./menu";
+export { default } from "./menu";

package/es/components/menu/menu.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { MenuProps } from './types';
+declare const Menu: React.FC<MenuProps>;
+export default Menu;
+//# sourceMappingURL=menu.d.ts.map

package/es/components/menu/menu.js

@@ -0,0 +1,559 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["theme"];
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { useState } from 'react';
+import { Text, View } from '@tarojs/components';
+import { getListTypographyTokens, getTypographyRole, ThemeProvider, useTheme, withOpacity } from "../../theme";
+import { classNames } from "../../utils";
+import { resolveTaroAccessibilityProps } from "../../utils/taroProps";
+import { Icon } from "../icon";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+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 = function MenuSurface(_ref) {
+  var _ref3;
+  var _ref$items = _ref.items,
+    items = _ref$items === void 0 ? [] : _ref$items,
+    controlledSelectedKeys = _ref.selectedKeys,
+    defaultSelectedKeys = _ref.defaultSelectedKeys,
+    controlledOpenKeys = _ref.openKeys,
+    defaultOpenKeys = _ref.defaultOpenKeys,
+    onOpenChange = _ref.onOpenChange,
+    onClick = _ref.onClick,
+    _ref$mode = _ref.mode,
+    mode = _ref$mode === void 0 ? 'vertical' : _ref$mode,
+    _ref$accordion = _ref.accordion,
+    accordion = _ref$accordion === void 0 ? false : _ref$accordion,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'middle' : _ref$size,
+    _ref$bordered = _ref.bordered,
+    bordered = _ref$bordered === void 0 ? false : _ref$bordered,
+    semanticClassNames = _ref.classNames,
+    semanticStyles = _ref.styles,
+    activeKey = _ref.activeKey,
+    defaultActiveKey = _ref.defaultActiveKey,
+    expandedKeys = _ref.expandedKeys,
+    defaultExpandedKeys = _ref.defaultExpandedKeys,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'default' : _ref$variant,
+    _ref$showDividers = _ref.showDividers,
+    showDividers = _ref$showDividers === void 0 ? false : _ref$showDividers,
+    _ref$textAlign = _ref.textAlign,
+    textAlign = _ref$textAlign === void 0 ? 'left' : _ref$textAlign,
+    _ref$emptyText = _ref.emptyText,
+    emptyText = _ref$emptyText === void 0 ? '暂无菜单项' : _ref$emptyText,
+    onChange = _ref.onChange,
+    onExpandedKeysChange = _ref.onExpandedKeysChange,
+    children = _ref.children,
+    className = _ref.className,
+    style = _ref.style,
+    testID = _ref.testID;
+  var _useTheme = useTheme(),
+    theme = _useTheme.theme;
+  var _useState = useState(function () {
+      return defaultSelectedKeys !== null && defaultSelectedKeys !== void 0 ? defaultSelectedKeys : defaultActiveKey ? [defaultActiveKey] : [];
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    innerSelectedKeys = _useState2[0],
+    setInnerSelectedKeys = _useState2[1];
+  var _useState3 = useState(function () {
+      var _ref2;
+      return (_ref2 = defaultOpenKeys !== null && defaultOpenKeys !== void 0 ? defaultOpenKeys : defaultExpandedKeys) !== null && _ref2 !== void 0 ? _ref2 : [];
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    innerOpenKeys = _useState4[0],
+    setInnerOpenKeys = _useState4[1];
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    focusedKey = _useState6[0],
+    setFocusedKey = _useState6[1];
+  var _useState7 = useState(null),
+    _useState8 = _slicedToArray(_useState7, 2),
+    hoveredKey = _useState8[0],
+    setHoveredKey = _useState8[1];
+  var _useState9 = useState(null),
+    _useState10 = _slicedToArray(_useState9, 2),
+    pressedKey = _useState10[0],
+    setPressedKey = _useState10[1];
+  var metrics = sizeMap[size];
+  var typography = getListTypographyTokens(size);
+  var captionTypography = getTypographyRole('caption');
+  var selectedKeys = controlledSelectedKeys !== null && controlledSelectedKeys !== void 0 ? controlledSelectedKeys : activeKey !== undefined ? [activeKey] : innerSelectedKeys;
+  var openKeys = (_ref3 = controlledOpenKeys !== null && controlledOpenKeys !== void 0 ? controlledOpenKeys : expandedKeys) !== null && _ref3 !== void 0 ? _ref3 : innerOpenKeys;
+  var selectionControlled = controlledSelectedKeys !== undefined || activeKey !== undefined;
+  var openControlled = controlledOpenKeys !== undefined || expandedKeys !== undefined;
+  var setOpenKeys = function setOpenKeys(nextKeys) {
+    if (!openControlled) setInnerOpenKeys(nextKeys);
+    onOpenChange === null || onOpenChange === void 0 || onOpenChange(nextKeys);
+    onExpandedKeysChange === null || onExpandedKeysChange === void 0 || onExpandedKeysChange(nextKeys);
+  };
+  var toggleSubmenu = function toggleSubmenu(key) {
+    var nextKeys = openKeys.includes(key) ? openKeys.filter(function (itemKey) {
+      return itemKey !== key;
+    }) : accordion ? [key] : [].concat(_toConsumableArray(openKeys), [key]);
+    setOpenKeys(nextKeys);
+  };
+  var selectItem = function selectItem(item) {
+    if (!selectionControlled) setInnerSelectedKeys([item.key]);
+    onClick === null || onClick === void 0 || onClick(item);
+    onChange === null || onChange === void 0 || onChange(item.key, item);
+  };
+  var renderBadge = function renderBadge(badge) {
+    var _config$color2;
+    if (badge === undefined || badge === null || badge === false) return null;
+    if ( /*#__PURE__*/React.isValidElement(badge)) {
+      return /*#__PURE__*/_jsx(View, {
+        "data-slot": "menu-badge",
+        className: "x-menu__badge",
+        style: {
+          display: 'flex',
+          flexShrink: 0
+        },
+        children: badge
+      });
+    }
+    if (typeof badge === 'string' || typeof badge === 'number') {
+      return /*#__PURE__*/_jsx(Text, {
+        "data-slot": "menu-badge",
+        className: "x-menu__badge",
+        style: {
+          flexShrink: 0,
+          fontSize: 12,
+          color: theme.colors.foreground
+        },
+        children: badge
+      });
+    }
+    var config = badge;
+    if (config.dot) {
+      var _config$color;
+      return /*#__PURE__*/_jsx(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 = config.color) !== null && _config$color !== void 0 ? _config$color : theme.colors.destructive
+        }
+      });
+    }
+    if (config.content === undefined) return null;
+    return /*#__PURE__*/_jsx(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$color2 = config.color) !== null && _config$color2 !== void 0 ? _config$color2 : theme.colors.primary
+      },
+      children: /*#__PURE__*/_jsx(Text, {
+        style: {
+          fontSize: 10,
+          color: theme.colors['primary-foreground']
+        },
+        children: config.content
+      })
+    });
+  };
+  var renderItems = function renderItems(menuItems) {
+    var depth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+    var parentHasIcon = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    var ancestorInteractive = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
+    return menuItems.map(function (item, index) {
+      var _item$children2;
+      var levelIndent = depth * (metrics.iconSize + metrics.gap);
+      var parentIconIndent = parentHasIcon ? metrics.iconSize + metrics.gap : 0;
+      if (item.divider) {
+        return /*#__PURE__*/_jsx(View, {
+          "data-slot": "menu-divider-wrap",
+          style: {
+            paddingTop: 4,
+            paddingBottom: 4
+          },
+          children: /*#__PURE__*/_jsx(View, {
+            "data-slot": "menu-divider",
+            className: "x-menu__divider",
+            style: {
+              marginRight: metrics.paddingX,
+              marginLeft: metrics.paddingX + levelIndent + parentIconIndent,
+              borderBottom: "1px solid ".concat(theme.colors.border)
+            }
+          })
+        }, item.key);
+      }
+      if (item.type === 'group') {
+        var _item$children;
+        return /*#__PURE__*/_jsxs(View, {
+          "data-slot": "menu-group",
+          className: "x-menu__group",
+          style: {
+            display: 'flex',
+            minWidth: 0,
+            flexDirection: 'column',
+            marginTop: index === 0 ? 0 : 12
+          },
+          children: [/*#__PURE__*/_jsx(View, {
+            "data-slot": "menu-group-label",
+            className: classNames('x-menu__group-label', semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.groupLabel),
+            style: {
+              padding: "".concat(size === 'large' ? 8 : size === 'middle' ? 6 : 4, "px ").concat(metrics.paddingX, "px")
+            },
+            children: renderText(item.label, {
+              fontSize: size === 'mini' ? 10 : size === 'small' ? 11 : size === 'large' ? 14 : 12,
+              fontWeight: '500',
+              color: theme.colors['muted-foreground']
+            })
+          }), /*#__PURE__*/_jsx(View, {
+            "data-slot": "menu-group-content",
+            style: {
+              display: 'flex',
+              flexDirection: 'column',
+              gap: 4,
+              marginTop: 4
+            },
+            children: renderItems((_item$children = item.children) !== null && _item$children !== void 0 ? _item$children : [], depth, parentHasIcon, ancestorInteractive)
+          })]
+        }, item.key);
+      }
+      var hasChildren = Boolean((_item$children2 = item.children) === null || _item$children2 === void 0 ? void 0 : _item$children2.length) || item.type === 'submenu';
+      var open = hasChildren && openKeys.includes(item.key);
+      var active = selectedKeys.includes(item.key);
+      var hasIcon = Boolean(item.icon);
+      var interactionDisabled = Boolean(item.disabled) || !ancestorInteractive;
+      var focused = !interactionDisabled && focusedKey === item.key;
+      var hovered = !interactionDisabled && hoveredKey === item.key;
+      var pressed = !interactionDisabled && pressedKey === item.key;
+      var interactionHighlighted = hovered || pressed;
+      var itemBackground = active ? theme.colors.primary : interactionHighlighted ? item.danger ? withOpacity(theme.colors.destructive, 0.1) : theme.colors.accent : variant === 'filled' ? theme.colors.muted : 'transparent';
+      var itemForeground = item.danger ? theme.colors.destructive : active ? theme.colors['primary-foreground'] : interactionHighlighted ? theme.colors['accent-foreground'] : theme.colors.foreground;
+      var descriptionForeground = active ? theme.colors['primary-foreground'] : interactionHighlighted ? theme.colors['accent-foreground'] : theme.colors['muted-foreground'];
+      var itemClassName = 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 || semanticClassNames === void 0 ? void 0 : semanticClassNames.item, active && (semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.itemActive), item.disabled && (semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.itemDisabled));
+      var itemStyle = _objectSpread(_objectSpread(_objectSpread({
+        boxSizing: 'border-box',
+        display: 'flex',
+        minHeight: metrics.minHeight,
+        flex: mode === 'horizontal' ? undefined : 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 ".concat(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 || semanticStyles === void 0 ? void 0 : semanticStyles.item), active ? semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.itemActive : undefined), item.disabled ? semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.itemDisabled : undefined);
+      return /*#__PURE__*/_jsxs(View, {
+        "data-slot": hasChildren ? 'menu-submenu' : 'menu-item-host',
+        "data-open": open ? 'true' : 'false',
+        className: classNames(hasChildren && (semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.submenu)),
+        style: {
+          minWidth: 0,
+          maxWidth: mode === 'horizontal' ? 240 : '100%',
+          flexShrink: mode === 'horizontal' ? 0 : undefined
+        },
+        children: [/*#__PURE__*/_jsxs(View, _objectSpread(_objectSpread({
+          "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
+        }, resolveTaroAccessibilityProps('button', textContent(item.label))), {}, {
+          "aria-disabled": item.disabled,
+          "aria-current": !hasChildren && active ? 'page' : undefined,
+          "aria-expanded": hasChildren ? open : undefined,
+          tabIndex: interactionDisabled ? -1 : 0,
+          style: itemStyle,
+          onBlur: function onBlur() {
+            setFocusedKey(function (current) {
+              return current === item.key ? null : current;
+            });
+            setPressedKey(function (current) {
+              return current === item.key ? null : current;
+            });
+          },
+          onFocus: function onFocus() {
+            if (!interactionDisabled) setFocusedKey(item.key);
+          },
+          onKeyDown: function onKeyDown(event) {
+            var _preventDefault, _ref4;
+            var key = event.key;
+            if (interactionDisabled || !isActivationKey(key)) return;
+            (_preventDefault = (_ref4 = event).preventDefault) === null || _preventDefault === void 0 || _preventDefault.call(_ref4);
+            setPressedKey(item.key);
+          },
+          onKeyUp: function onKeyUp(event) {
+            var _preventDefault2, _ref5;
+            var key = event.key;
+            if (interactionDisabled || !isActivationKey(key)) return;
+            (_preventDefault2 = (_ref5 = event).preventDefault) === null || _preventDefault2 === void 0 || _preventDefault2.call(_ref5);
+            setPressedKey(null);
+            if (hasChildren) toggleSubmenu(item.key);else selectItem(item);
+          },
+          onClick: interactionDisabled ? undefined : hasChildren ? function () {
+            return toggleSubmenu(item.key);
+          } : function () {
+            return selectItem(item);
+          },
+          onMouseDown: function onMouseDown() {
+            if (!interactionDisabled) setPressedKey(item.key);
+          },
+          onMouseEnter: function onMouseEnter() {
+            if (!interactionDisabled) setHoveredKey(item.key);
+          },
+          onMouseLeave: function onMouseLeave() {
+            setHoveredKey(function (current) {
+              return current === item.key ? null : current;
+            });
+            setPressedKey(function (current) {
+              return current === item.key ? null : current;
+            });
+          },
+          onMouseUp: function onMouseUp() {
+            setPressedKey(function (current) {
+              return current === item.key ? null : current;
+            });
+          },
+          onTouchCancel: function onTouchCancel() {
+            setPressedKey(function (current) {
+              return current === item.key ? null : current;
+            });
+          },
+          onTouchEnd: function onTouchEnd() {
+            setPressedKey(function (current) {
+              return current === item.key ? null : current;
+            });
+          },
+          onTouchStart: function onTouchStart() {
+            if (!interactionDisabled) setPressedKey(item.key);
+          },
+          children: [item.icon ? /*#__PURE__*/_jsx(View, {
+            "data-slot": "menu-icon",
+            className: classNames('x-menu__icon', semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.icon),
+            style: _objectSpread({
+              display: 'flex',
+              width: metrics.iconSize,
+              height: metrics.iconSize,
+              flexShrink: 0,
+              alignItems: 'center',
+              justifyContent: 'center'
+            }, semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.icon),
+            children: item.icon
+          }) : parentHasIcon ? /*#__PURE__*/_jsx(View, {
+            "data-slot": "menu-icon",
+            "data-placeholder": "true",
+            className: classNames('x-menu__icon', semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.icon),
+            style: {
+              width: metrics.iconSize,
+              height: metrics.iconSize,
+              flexShrink: 0
+            }
+          }) : null, /*#__PURE__*/_jsxs(View, {
+            "data-slot": "menu-label",
+            className: classNames('x-menu__label', semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.label),
+            style: _objectSpread({
+              display: 'flex',
+              minWidth: 0,
+              flex: 1,
+              flexDirection: 'column',
+              alignItems: textAlign === 'center' ? 'center' : 'flex-start'
+            }, semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.label),
+            children: [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: textAlign
+            }), item.description !== undefined ? /*#__PURE__*/_jsx(View, {
+              style: {
+                width: '100%',
+                minWidth: 0,
+                marginTop: 4,
+                overflow: 'hidden'
+              },
+              children: renderText(item.description, {
+                display: 'block',
+                width: '100%',
+                maxWidth: '100%',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+                fontSize: captionTypography.fontSize,
+                color: descriptionForeground,
+                textAlign: textAlign
+              })
+            }) : null]
+          }), renderBadge(item.badge), item.suffix, hasChildren ? /*#__PURE__*/_jsx(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'
+            },
+            children: /*#__PURE__*/_jsx(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__*/_jsx(View, {
+          "data-slot": "menu-divider",
+          className: "x-menu__divider",
+          style: {
+            marginLeft: metrics.paddingX + levelIndent + parentIconIndent,
+            borderBottom: "1px solid ".concat(theme.colors.border)
+          }
+        }) : null, hasChildren && item.children ? /*#__PURE__*/_jsx(View, {
+          "data-slot": "menu-submenu-content",
+          className: "x-menu__submenu-content",
+          "aria-hidden": !open,
+          style: {
+            display: 'flex',
+            maxHeight: open ? 1000 : 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'
+          },
+          children: renderItems(item.children, depth + 1, hasIcon || parentHasIcon, ancestorInteractive && open)
+        }) : null]
+      }, item.key);
+    });
+  };
+  return /*#__PURE__*/_jsx(View, {
+    "data-slot": "menu-root",
+    "data-mode": mode,
+    "data-size": size,
+    "data-variant": variant,
+    "data-bordered": bordered ? 'true' : 'false',
+    "data-testid": testID,
+    className: classNames('x-menu', "x-menu--".concat(mode), "x-menu--".concat(variant), "x-menu--".concat(size), bordered && 'x-menu--bordered', semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.root, className),
+    style: _objectSpread(_objectSpread({
+      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' : undefined,
+      gap: 4,
+      paddingTop: variant === 'compact' || mode === 'horizontal' ? 0 : 8,
+      paddingRight: 0,
+      paddingBottom: variant === 'compact' || mode === 'horizontal' ? 0 : 8,
+      paddingLeft: 0,
+      border: bordered ? "1px solid ".concat(theme.colors.border) : 'none',
+      borderRadius: bordered ? 'var(--x-menu-root-radius)' : 0,
+      backgroundColor: variant === 'filled' ? theme.colors.muted : theme.colors.background
+    }, semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.root), style),
+    children: items.length > 0 ? renderItems(items) : children ? children : /*#__PURE__*/_jsx(View, {
+      "data-slot": "menu-empty",
+      className: "x-menu__empty",
+      style: {
+        padding: 16
+      },
+      children: renderText(emptyText, {
+        fontSize: typography.titleFontSize,
+        color: theme.colors['muted-foreground']
+      })
+    })
+  });
+};
+function renderText(content, style) {
+  return typeof content === 'string' || typeof content === 'number' ? /*#__PURE__*/_jsx(Text, {
+    style: style,
+    children: content
+  }) : content;
+}
+function textContent(content) {
+  return typeof content === 'string' || typeof content === 'number' ? String(content) : undefined;
+}
+var Menu = function Menu(_ref6) {
+  var theme = _ref6.theme,
+    props = _objectWithoutProperties(_ref6, _excluded);
+  if (theme === undefined) return /*#__PURE__*/_jsx(MenuSurface, _objectSpread({}, props));
+  return /*#__PURE__*/_jsx(ThemeProvider, {
+    defaultTheme: theme,
+    children: /*#__PURE__*/_jsx(MenuSurface, _objectSpread({}, props))
+  });
+};
+Menu.displayName = 'Menu';
+export default Menu;